@smilodon/core 1.2.1 → 1.2.2

package/dist/index.js

@@ -509,913 +509,968 @@ class Virtualizer {
     }
 }
 
-class NativeSelectElement extends HTMLElement {
-    static get observedAttributes() {
-        return ['placement', 'strategy', 'portal'];
-    }
-    constructor() {
-        super();
-        this._options = {};
-        this._items = [];
-        // Multi-select & interaction state
-        this._selectedSet = new Set(); // indices
-        this._selectedItems = new Map(); // index -> item
-        this._activeIndex = -1;
-        this._multi = false;
-        this._typeBuffer = '';
-        this._shadow = this.attachShadow({ mode: 'open' });
-        this._listRoot = document.createElement('div');
-        this._listRoot.setAttribute('role', 'listbox');
-        this._listRoot.setAttribute('tabindex', '0');
-        this._shadow.appendChild(this._listRoot);
-        // Live region for screen reader announcements
-        this._liveRegion = document.createElement('div');
-        this._liveRegion.setAttribute('role', 'status');
-        this._liveRegion.setAttribute('aria-live', 'polite');
-        this._liveRegion.style.cssText = 'position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;';
-        this._shadow.appendChild(this._liveRegion);
-        this._helpers = createRendererHelpers((item, index) => this._onSelect(item, index));
-        // Delegated click
-        this._listRoot.addEventListener('click', (e) => {
-            const el = e.target.closest('[data-selectable]');
-            if (!el)
-                return;
-            const idx = Number(el.dataset.index);
-            const item = this._items[idx];
-            this._onSelect(item, idx);
-        });
-        // Keyboard navigation
-        this._listRoot.addEventListener('keydown', (e) => this._onKeydown(e));
-    }
-    connectedCallback() {
-        // Initialize ARIA roles and open event
-        this._listRoot.setAttribute('role', 'listbox');
-        this._listRoot.setAttribute('aria-label', 'Options list');
-        if (this._multi)
-            this._listRoot.setAttribute('aria-multiselectable', 'true');
-        this._emit('open', {});
+/**
+ * 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;
     }
-    disconnectedCallback() {
-        this._emit('close', {});
-        // Cleanup: remove listeners if any were added outside constructor
-        if (this._typeTimeout)
-            window.clearTimeout(this._typeTimeout);
+    /**
+     * 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;
     }
-    attributeChangedCallback(name, _oldValue, newValue) {
-        switch (name) {
-            case 'placement':
-                this._options.placement = (newValue ?? undefined);
-                break;
-            case 'strategy':
-                this._options.strategy = (newValue ?? undefined);
-                break;
-            case 'portal':
-                this._options.portal = newValue === 'true' ? true : newValue === 'false' ? false : undefined;
+    /**
+     * 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;
+            }
         }
     }
-    set items(items) {
-        this._items = items ?? [];
-        // initialize virtualizer with estimated height (default 48) and buffer
-        this._virtualizer = new Virtualizer(this._listRoot, this._items.length, (i) => this._items[i], { estimatedItemHeight: 48, buffer: 5 });
-        this.render();
-    }
-    get items() {
-        return this._items;
+    /**
+     * 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));
     }
-    set multi(value) {
-        this._multi = value;
-        if (value) {
-            this._listRoot.setAttribute('aria-multiselectable', 'true');
-        }
-        else {
-            this._listRoot.removeAttribute('aria-multiselectable');
+    /**
+     * 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);
         }
     }
-    get multi() {
-        return this._multi;
-    }
-    get selectedIndices() {
-        return Array.from(this._selectedSet);
+    /**
+     * 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 selectedItems() {
-        return Array.from(this._selectedItems.values());
+    /**
+     * Get active component at index
+     *
+     * @param index - The option index
+     * @returns The component instance or undefined
+     */
+    getComponent(index) {
+        return this._activeComponents.get(index);
     }
-    set optionTemplate(template) {
-        this._options.optionTemplate = template;
-        this.render();
+    /**
+     * Clear the entire pool
+     */
+    clear() {
+        this.releaseAll();
+        this._pool.clear();
+        console.log('[CustomOptionPool] Pool cleared');
     }
-    set optionRenderer(renderer) {
-        this._options.optionRenderer = renderer;
-        this.render();
+    /**
+     * 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
+        };
     }
     /**
-     * Public API: setItems() method for compatibility with EnhancedSelect
-     * Accepts an array of items which can be:
-     * - Simple primitives (string, number)
-     * - Objects with {label, value} structure
-     * - Objects with {label, value, optionComponent} for custom rendering (v1.2.0+)
+     * Find an available component in the pool
      */
-    setItems(items) {
-        this.items = items ?? [];
+    _findAvailableComponent(factoryKey) {
+        const pool = this._pool.get(factoryKey);
+        if (!pool)
+            return undefined;
+        return pool.find(p => !p.inUse);
     }
     /**
-     * Public API: setValue() method to programmatically select an item
-     * For single select: clears selection and selects the item matching the value
-     * For multi-select: adds to selection if not already selected
+     * Generate a unique key for a factory function
      */
-    setValue(value) {
-        if (value === null || value === undefined || value === '') {
-            // Clear selection
-            this._selectedSet.clear();
-            this._selectedItems.clear();
-            this._activeIndex = -1;
-            this.render();
-            return;
-        }
-        // Find item by value
-        const index = this._items.findIndex(item => {
-            if (typeof item === 'object' && item !== null && 'value' in item) {
-                return item.value === value;
-            }
-            return item === value;
-        });
-        if (index >= 0) {
-            const item = this._items[index];
-            if (!this._multi) {
-                // Single select: clear and set
-                this._selectedSet.clear();
-                this._selectedItems.clear();
-            }
-            this._selectedSet.add(index);
-            this._selectedItems.set(index, item);
-            this._activeIndex = index;
-            this.render();
-        }
+    _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);
     }
     /**
-     * Public API: getValue() method to get currently selected value(s)
-     * Returns single value for single-select, array for multi-select
+     * 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
      */
-    getValue() {
-        const values = Array.from(this._selectedItems.values()).map(item => {
-            if (typeof item === 'object' && item !== null && 'value' in item) {
-                return item.value;
-            }
-            return item;
-        });
-        return this._multi ? values : (values[0] ?? null);
-    }
-    render() {
-        const { optionTemplate, optionRenderer } = this._options;
-        const viewportHeight = this.getBoundingClientRect().height || 300;
-        const scrollTop = this.scrollTop || 0;
-        // Update aria-activedescendant
-        if (this._activeIndex >= 0) {
-            this._listRoot.setAttribute('aria-activedescendant', `option-${this._activeIndex}`);
+    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 {
-            this._listRoot.removeAttribute('aria-activedescendant');
+            return this._renderLightweightOption(item, index, value, label, isSelected, isFocused, isDisabled, uniqueId);
         }
-        if (this._virtualizer) {
-            const { startIndex, endIndex } = this._virtualizer.computeWindow(scrollTop, viewportHeight);
-            this._virtualizer.render(startIndex, endIndex, (node, item, i) => {
-                this._applyOptionAttrs(node, i);
-                if (optionRenderer) {
-                    const el = optionRenderer(item, i, this._helpers);
-                    // replace node contents
-                    node.replaceChildren(el);
-                }
-                else if (optionTemplate) {
-                    const wrapper = document.createElement('div');
-                    wrapper.innerHTML = optionTemplate(item, i);
-                    const el = wrapper.firstElementChild;
-                    node.replaceChildren(el ?? document.createTextNode(String(item)));
-                }
-                else {
-                    // Handle {label, value} objects or primitives
-                    const displayText = (typeof item === 'object' && item !== null && 'label' in item)
-                        ? String(item.label)
-                        : String(item);
-                    node.textContent = displayText;
-                }
-            });
+    }
+    /**
+     * 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);
         }
-        const frag = document.createDocumentFragment();
-        for (let i = 0; i < this._items.length; i++) {
-            const item = this._items[i];
-            if (optionRenderer) {
-                const el = optionRenderer(item, i, this._helpers);
-                if (!el.hasAttribute('data-selectable')) {
-                    el.setAttribute('data-selectable', '');
-                    el.setAttribute('data-index', String(i));
-                }
-                this._applyOptionAttrs(el, i);
-                frag.appendChild(el);
-            }
-            else if (optionTemplate) {
-                // Fast path: render all via DocumentFragment in one call
-                renderTemplate(this._listRoot, this._items, optionTemplate);
-                // Apply ARIA attrs after template render
-                this._applyAriaToAll();
-                return; // rendering complete
+        else {
+            // Update lightweight option
+            if (selected) {
+                element.classList.add('selected');
+                element.setAttribute('aria-selected', 'true');
             }
             else {
-                const el = document.createElement('div');
-                // Handle {label, value} objects or primitives
-                const displayText = (typeof item === 'object' && item !== null && 'label' in item)
-                    ? String(item.label)
-                    : String(item);
-                el.textContent = displayText;
-                el.setAttribute('data-selectable', '');
-                el.setAttribute('data-index', String(i));
-                this._applyOptionAttrs(el, i);
-                frag.appendChild(el);
+                element.classList.remove('selected');
+                element.setAttribute('aria-selected', 'false');
             }
         }
-        this._listRoot.replaceChildren(frag);
     }
-    _applyOptionAttrs(node, index) {
-        node.setAttribute('role', 'option');
-        node.id = `option-${index}`;
-        if (this._selectedSet.has(index)) {
-            node.setAttribute('aria-selected', 'true');
+    /**
+     * 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 {
-            node.setAttribute('aria-selected', 'false');
+            // Update lightweight option
+            element.classList.toggle('focused', focused);
         }
     }
-    _applyAriaToAll() {
-        const children = Array.from(this._listRoot.children);
-        for (const child of children) {
-            const idx = Number(child.dataset.index);
-            if (Number.isFinite(idx))
-                this._applyOptionAttrs(child, idx);
-        }
+    /**
+     * 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);
     }
-    _emit(name, detail) {
-        this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
+    /**
+     * Unmount all options
+     */
+    unmountAll() {
+        this._pool.releaseAll();
+        this._mountedElements.clear();
     }
-    // Multi-select and interaction methods
-    _onSelect(item, index) {
-        if (this._multi) {
-            if (this._selectedSet.has(index)) {
-                this._selectedSet.delete(index);
-                this._selectedItems.delete(index);
-            }
-            else {
-                this._selectedSet.add(index);
-                this._selectedItems.set(index, item);
-            }
+    /**
+     * 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');
         }
-        else {
-            this._selectedSet.clear();
-            this._selectedItems.clear();
-            this._selectedSet.add(index);
-            this._selectedItems.set(index, item);
+        // Click handler
+        if (!isDisabled) {
+            option.addEventListener('click', () => {
+                this._config.onSelect(index);
+            });
         }
-        this._activeIndex = index;
-        this.render();
-        // Emit with all required fields
-        const selected = this._selectedSet.has(index);
-        const value = item?.value ?? item;
-        const label = item?.label ?? String(item);
-        this._emit('select', {
+        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,
-            selected,
-            multi: this._multi
-        });
-        // Emit 'change' event for better React compatibility
-        this._emit('change', {
-            selectedItems: Array.from(this._selectedItems.values()),
-            selectedValues: Array.from(this._selectedItems.values()).map(i => i?.value ?? i),
-            selectedIndices: Array.from(this._selectedSet)
-        });
-        this._announce(`Selected ${label}`);
-    }
-    _onKeydown(e) {
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                this._moveActive(1);
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                this._moveActive(-1);
-                break;
-            case 'Home':
-                e.preventDefault();
-                this._setActive(0);
-                break;
-            case 'End':
-                e.preventDefault();
-                this._setActive(this._items.length - 1);
-                break;
-            case 'PageDown':
-                e.preventDefault();
-                this._moveActive(10);
-                break;
-            case 'PageUp':
-                e.preventDefault();
-                this._moveActive(-10);
-                break;
-            case 'Enter':
-            case ' ':
-                e.preventDefault();
-                if (this._activeIndex >= 0) {
-                    const item = this._items[this._activeIndex];
-                    this._onSelect(item, this._activeIndex);
+            isSelected,
+            isFocused,
+            isDisabled,
+            onSelect: (idx) => {
+                if (!isDisabled) {
+                    this._config.onSelect(idx);
                 }
-                break;
-            case 'Escape':
-                e.preventDefault();
-                this._emit('close', {});
-                break;
-            default:
-                // Type-ahead buffer
-                if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
-                    this._onType(e.key);
+            },
+            onCustomEvent: (eventName, data) => {
+                if (this._config.onCustomEvent) {
+                    this._config.onCustomEvent(index, eventName, data);
                 }
-                break;
+            }
+        };
+        // 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;
     }
-    _moveActive(delta) {
-        const next = Math.max(0, Math.min(this._items.length - 1, this._activeIndex + delta));
-        this._setActive(next);
+}
+
+class NativeSelectElement extends HTMLElement {
+    static get observedAttributes() {
+        return ['placement', 'strategy', 'portal'];
     }
-    _setActive(index) {
-        this._activeIndex = index;
-        this.render();
-        this._scrollToActive();
-        this._announce(`Navigated to ${String(this._items[index])}`);
+    constructor() {
+        super();
+        this._options = {};
+        this._items = [];
+        // Multi-select & interaction state
+        this._selectedSet = new Set(); // indices
+        this._selectedItems = new Map(); // index -> item
+        this._activeIndex = -1;
+        this._multi = false;
+        this._typeBuffer = '';
+        this._shadow = this.attachShadow({ mode: 'open' });
+        this._listRoot = document.createElement('div');
+        this._listRoot.setAttribute('role', 'listbox');
+        this._listRoot.setAttribute('tabindex', '0');
+        this._shadow.appendChild(this._listRoot);
+        // Live region for screen reader announcements
+        this._liveRegion = document.createElement('div');
+        this._liveRegion.setAttribute('role', 'status');
+        this._liveRegion.setAttribute('aria-live', 'polite');
+        this._liveRegion.style.cssText = 'position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;';
+        this._shadow.appendChild(this._liveRegion);
+        this._helpers = createRendererHelpers((item, index) => this._onSelect(item, index));
+        // Delegated click
+        this._listRoot.addEventListener('click', (e) => {
+            const el = e.target.closest('[data-selectable]');
+            if (!el)
+                return;
+            const idx = Number(el.dataset.index);
+            const item = this._items[idx];
+            this._onSelect(item, idx);
+        });
+        // Keyboard navigation
+        this._listRoot.addEventListener('keydown', (e) => this._onKeydown(e));
     }
-    _scrollToActive() {
-        const el = this._shadow.getElementById(`option-${this._activeIndex}`);
-        el?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    connectedCallback() {
+        // Initialize ARIA roles and open event
+        this._listRoot.setAttribute('role', 'listbox');
+        this._listRoot.setAttribute('aria-label', 'Options list');
+        if (this._multi)
+            this._listRoot.setAttribute('aria-multiselectable', 'true');
+        this._initializeOptionRenderer();
+        this._emit('open', {});
     }
-    _onType(char) {
+    disconnectedCallback() {
+        this._emit('close', {});
+        // Cleanup unified renderer
+        if (this._unifiedRenderer) {
+            this._unifiedRenderer.unmountAll();
+        }
+        // Cleanup: remove listeners if any were added outside constructor
         if (this._typeTimeout)
             window.clearTimeout(this._typeTimeout);
-        this._typeBuffer += char.toLowerCase();
-        this._typeTimeout = window.setTimeout(() => {
-            this._typeBuffer = '';
-        }, 400);
-        // Find first matching item
-        const match = this._items.findIndex((item) => String(item).toLowerCase().startsWith(this._typeBuffer));
-        if (match >= 0) {
-            this._setActive(match);
-        }
     }
-    _announce(msg) {
-        if (this._liveRegion) {
-            this._liveRegion.textContent = msg;
-            setTimeout(() => {
-                if (this._liveRegion)
-                    this._liveRegion.textContent = '';
-            }, 1000);
+    _initializeOptionRenderer() {
+        const getValue = (item) => item?.value ?? item;
+        const getLabel = (item) => item?.label ?? String(item);
+        const getDisabled = (item) => item?.disabled ?? false;
+        const rendererConfig = {
+            enableRecycling: true,
+            maxPoolSize: 100,
+            getValue,
+            getLabel,
+            getDisabled,
+            onSelect: (index) => {
+                const item = this._items[index];
+                this._onSelect(item, index);
+            },
+            onCustomEvent: (index, eventName, data) => {
+                // Emit custom events from option components
+                this.dispatchEvent(new CustomEvent('option:custom-event', {
+                    detail: { index, eventName, data },
+                    bubbles: true,
+                    composed: true
+                }));
+            },
+            onError: (index, error) => {
+                console.error(`[NativeSelect] Error in option ${index}:`, error);
+                this.dispatchEvent(new CustomEvent('option:mount-error', {
+                    detail: { index, error },
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+        };
+        this._unifiedRenderer = new OptionRenderer(rendererConfig);
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        switch (name) {
+            case 'placement':
+                this._options.placement = (newValue ?? undefined);
+                break;
+            case 'strategy':
+                this._options.strategy = (newValue ?? undefined);
+                break;
+            case 'portal':
+                this._options.portal = newValue === 'true' ? true : newValue === 'false' ? false : undefined;
+                break;
         }
     }
-    // Focus management
-    focus() {
-        this._listRoot.focus();
+    set items(items) {
+        this._items = items ?? [];
+        // initialize virtualizer with estimated height (default 48) and buffer
+        this._virtualizer = new Virtualizer(this._listRoot, this._items.length, (i) => this._items[i], { estimatedItemHeight: 48, buffer: 5 });
+        this.render();
     }
-}
-customElements.define('smilodon-select', NativeSelectElement);
-
-/**
- * Global Configuration System for Select Components
- * Allows users to define default behaviors that can be overridden at component level
- */
-/**
- * Default global configuration
- */
-const defaultConfig = {
-    selection: {
-        mode: 'single',
-        allowDeselect: false,
-        maxSelections: 0,
-        showRemoveButton: true,
-        closeOnSelect: true,
-    },
-    scrollToSelected: {
-        enabled: true,
-        multiSelectTarget: 'first',
-        behavior: 'smooth',
-        block: 'nearest',
-    },
-    loadMore: {
-        enabled: false,
-        itemsPerLoad: 3,
-        threshold: 100,
-        showLoader: true,
-    },
-    busyBucket: {
-        enabled: true,
-        showSpinner: true,
-        message: 'Loading...',
-        minDisplayTime: 200,
-    },
-    styles: {
-        classNames: {},
-    },
-    serverSide: {
-        enabled: false,
-        getValueFromItem: (item) => item?.value ?? item,
-        getLabelFromItem: (item) => item?.label ?? String(item),
-    },
-    infiniteScroll: {
-        enabled: false,
-        pageSize: 20,
-        initialPage: 1,
-        cachePages: true,
-        maxCachedPages: 10,
-        preloadAdjacent: true,
-        scrollRestoration: 'auto',
-    },
-    expandable: {
-        enabled: false,
-        collapsedHeight: '300px',
-        expandedHeight: '500px',
-        expandLabel: 'Show more',
-        collapseLabel: 'Show less',
-    },
-    callbacks: {},
-    enabled: true,
-    searchable: false,
-    placeholder: 'Select an option...',
-    virtualize: true,
-    estimatedItemHeight: 48,
-};
-/**
- * Global configuration instance
- */
-class SelectConfigManager {
-    constructor() {
-        this.config = this.deepClone(defaultConfig);
+    get items() {
+        return this._items;
+    }
+    set multi(value) {
+        this._multi = value;
+        if (value) {
+            this._listRoot.setAttribute('aria-multiselectable', 'true');
+        }
+        else {
+            this._listRoot.removeAttribute('aria-multiselectable');
+        }
     }
-    /**
-     * Get current global configuration
-     */
-    getConfig() {
-        return this.config;
+    get multi() {
+        return this._multi;
     }
-    /**
-     * Update global configuration (deep merge)
-     */
-    updateConfig(updates) {
-        this.config = this.deepMerge(this.config, updates);
+    get selectedIndices() {
+        return Array.from(this._selectedSet);
+    }
+    get selectedItems() {
+        return Array.from(this._selectedItems.values());
+    }
+    set optionTemplate(template) {
+        this._options.optionTemplate = template;
+        this.render();
+    }
+    set optionRenderer(renderer) {
+        this._options.optionRenderer = renderer;
+        this.render();
     }
     /**
-     * Reset to default configuration
+     * Public API: setItems() method for compatibility with EnhancedSelect
+     * Accepts an array of items which can be:
+     * - Simple primitives (string, number)
+     * - Objects with {label, value} structure
+     * - Objects with {label, value, optionComponent} for custom rendering (v1.2.0+)
      */
-    resetConfig() {
-        this.config = this.deepClone(defaultConfig);
+    setItems(items) {
+        this.items = items ?? [];
     }
     /**
-     * Merge component-level config with global config
-     * Component-level config takes precedence
+     * Public API: setValue() method to programmatically select an item
+     * For single select: clears selection and selects the item matching the value
+     * For multi-select: adds to selection if not already selected
      */
-    mergeWithComponentConfig(componentConfig) {
-        return this.deepMerge(this.deepClone(this.config), componentConfig);
-    }
-    deepClone(obj) {
-        return JSON.parse(JSON.stringify(obj));
-    }
-    deepMerge(target, source) {
-        const result = { ...target };
-        for (const key in source) {
-            if (source.hasOwnProperty(key)) {
-                const sourceValue = source[key];
-                const targetValue = result[key];
-                if (sourceValue && typeof sourceValue === 'object' && !Array.isArray(sourceValue)) {
-                    result[key] = this.deepMerge(targetValue && typeof targetValue === 'object' ? targetValue : {}, sourceValue);
-                }
-                else {
-                    result[key] = sourceValue;
-                }
+    setValue(value) {
+        if (value === null || value === undefined || value === '') {
+            // Clear selection
+            this._selectedSet.clear();
+            this._selectedItems.clear();
+            this._activeIndex = -1;
+            this.render();
+            return;
+        }
+        // Find item by value
+        const index = this._items.findIndex(item => {
+            if (typeof item === 'object' && item !== null && 'value' in item) {
+                return item.value === value;
+            }
+            return item === value;
+        });
+        if (index >= 0) {
+            const item = this._items[index];
+            if (!this._multi) {
+                // Single select: clear and set
+                this._selectedSet.clear();
+                this._selectedItems.clear();
             }
+            this._selectedSet.add(index);
+            this._selectedItems.set(index, item);
+            this._activeIndex = index;
+            this.render();
         }
-        return result;
-    }
-}
-/**
- * Singleton instance
- */
-const selectConfig = new SelectConfigManager();
-/**
- * Helper function to configure select globally
- */
-function configureSelect(config) {
-    selectConfig.updateConfig(config);
-}
-/**
- * Helper function to reset select configuration
- */
-function resetSelectConfig() {
-    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
+     * Public API: getValue() method to get currently selected value(s)
+     * Returns single value for single-select, array for multi-select
      */
-    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}`);
+    getValue() {
+        const values = Array.from(this._selectedItems.values()).map(item => {
+            if (typeof item === 'object' && item !== null && 'value' in item) {
+                return item.value;
+            }
+            return item;
+        });
+        return this._multi ? values : (values[0] ?? null);
+    }
+    render() {
+        const { optionTemplate, optionRenderer } = this._options;
+        const viewportHeight = this.getBoundingClientRect().height || 300;
+        const scrollTop = this.scrollTop || 0;
+        // Update aria-activedescendant
+        if (this._activeIndex >= 0) {
+            this._listRoot.setAttribute('aria-activedescendant', `option-${this._activeIndex}`);
         }
         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;
+            this._listRoot.removeAttribute('aria-activedescendant');
+        }
+        // Check if any items have custom components
+        const hasCustomComponents = this._items.some(item => typeof item === 'object' && item !== null && 'optionComponent' in item);
+        // Use unified renderer if we have custom components
+        if (hasCustomComponents && this._unifiedRenderer) {
+            this._listRoot.replaceChildren(); // Clear existing content
+            const frag = document.createDocumentFragment();
+            for (let i = 0; i < this._items.length; i++) {
+                const item = this._items[i];
+                const isSelected = this._selectedSet.has(i);
+                const isFocused = this._activeIndex === i;
+                const optionElement = this._unifiedRenderer.render(item, i, isSelected, isFocused, `native-${this.getAttribute('id') || 'default'}`);
+                frag.appendChild(optionElement);
             }
+            this._listRoot.appendChild(frag);
+            return;
         }
-        // Mount the component
-        try {
-            component.mountOption(container, context);
-            this._activeComponents.set(index, component);
+        // Fall back to original rendering logic for lightweight options
+        if (this._virtualizer) {
+            const { startIndex, endIndex } = this._virtualizer.computeWindow(scrollTop, viewportHeight);
+            this._virtualizer.render(startIndex, endIndex, (node, item, i) => {
+                this._applyOptionAttrs(node, i);
+                if (optionRenderer) {
+                    const el = optionRenderer(item, i, this._helpers);
+                    // replace node contents
+                    node.replaceChildren(el);
+                }
+                else if (optionTemplate) {
+                    const wrapper = document.createElement('div');
+                    wrapper.innerHTML = optionTemplate(item, i);
+                    const el = wrapper.firstElementChild;
+                    node.replaceChildren(el ?? document.createTextNode(String(item)));
+                }
+                else {
+                    // Handle {label, value} objects or primitives
+                    const displayText = (typeof item === 'object' && item !== null && 'label' in item)
+                        ? String(item.label)
+                        : String(item);
+                    node.textContent = displayText;
+                }
+            });
+            return;
         }
-        catch (error) {
-            console.error(`[CustomOptionPool] Failed to mount component at index ${index}:`, error);
-            throw error;
+        const frag = document.createDocumentFragment();
+        for (let i = 0; i < this._items.length; i++) {
+            const item = this._items[i];
+            if (optionRenderer) {
+                const el = optionRenderer(item, i, this._helpers);
+                if (!el.hasAttribute('data-selectable')) {
+                    el.setAttribute('data-selectable', '');
+                    el.setAttribute('data-index', String(i));
+                }
+                this._applyOptionAttrs(el, i);
+                frag.appendChild(el);
+            }
+            else if (optionTemplate) {
+                // Fast path: render all via DocumentFragment in one call
+                renderTemplate(this._listRoot, this._items, optionTemplate);
+                // Apply ARIA attrs after template render
+                this._applyAriaToAll();
+                return; // rendering complete
+            }
+            else {
+                const el = document.createElement('div');
+                // Handle {label, value} objects or primitives
+                const displayText = (typeof item === 'object' && item !== null && 'label' in item)
+                    ? String(item.label)
+                    : String(item);
+                el.textContent = displayText;
+                el.setAttribute('data-selectable', '');
+                el.setAttribute('data-index', String(i));
+                this._applyOptionAttrs(el, i);
+                frag.appendChild(el);
+            }
         }
-        return component;
+        this._listRoot.replaceChildren(frag);
     }
-    /**
-     * 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();
+    _applyOptionAttrs(node, index) {
+        node.setAttribute('role', 'option');
+        node.id = `option-${index}`;
+        if (this._selectedSet.has(index)) {
+            node.setAttribute('aria-selected', 'true');
         }
-        catch (error) {
-            console.error(`[CustomOptionPool] Failed to unmount component at index ${index}:`, error);
+        else {
+            node.setAttribute('aria-selected', 'false');
         }
-        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;
-            }
+    }
+    _applyAriaToAll() {
+        const children = Array.from(this._listRoot.children);
+        for (const child of children) {
+            const idx = Number(child.dataset.index);
+            if (Number.isFinite(idx))
+                this._applyOptionAttrs(child, idx);
         }
     }
-    /**
-     * 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));
+    _emit(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
     }
-    /**
-     * 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);
+    // Multi-select and interaction methods
+    _onSelect(item, index) {
+        if (this._multi) {
+            if (this._selectedSet.has(index)) {
+                this._selectedSet.delete(index);
+                this._selectedItems.delete(index);
+            }
+            else {
+                this._selectedSet.add(index);
+                this._selectedItems.set(index, item);
+            }
+        }
+        else {
+            this._selectedSet.clear();
+            this._selectedItems.clear();
+            this._selectedSet.add(index);
+            this._selectedItems.set(index, item);
         }
+        this._activeIndex = index;
+        this.render();
+        // Emit with all required fields
+        const selected = this._selectedSet.has(index);
+        const value = item?.value ?? item;
+        const label = item?.label ?? String(item);
+        this._emit('select', {
+            item,
+            index,
+            value,
+            label,
+            selected,
+            multi: this._multi
+        });
+        // Emit 'change' event for better React compatibility
+        this._emit('change', {
+            selectedItems: Array.from(this._selectedItems.values()),
+            selectedValues: Array.from(this._selectedItems.values()).map(i => i?.value ?? i),
+            selectedIndices: Array.from(this._selectedSet)
+        });
+        this._announce(`Selected ${label}`);
     }
-    /**
-     * 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);
+    _onKeydown(e) {
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this._moveActive(1);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                this._moveActive(-1);
+                break;
+            case 'Home':
+                e.preventDefault();
+                this._setActive(0);
+                break;
+            case 'End':
+                e.preventDefault();
+                this._setActive(this._items.length - 1);
+                break;
+            case 'PageDown':
+                e.preventDefault();
+                this._moveActive(10);
+                break;
+            case 'PageUp':
+                e.preventDefault();
+                this._moveActive(-10);
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (this._activeIndex >= 0) {
+                    const item = this._items[this._activeIndex];
+                    this._onSelect(item, this._activeIndex);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                this._emit('close', {});
+                break;
+            default:
+                // Type-ahead buffer
+                if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
+                    this._onType(e.key);
+                }
+                break;
         }
     }
-    /**
-     * Get active component at index
-     *
-     * @param index - The option index
-     * @returns The component instance or undefined
-     */
-    getComponent(index) {
-        return this._activeComponents.get(index);
+    _moveActive(delta) {
+        const next = Math.max(0, Math.min(this._items.length - 1, this._activeIndex + delta));
+        this._setActive(next);
     }
-    /**
-     * Clear the entire pool
-     */
-    clear() {
-        this.releaseAll();
-        this._pool.clear();
-        console.log('[CustomOptionPool] Pool cleared');
+    _setActive(index) {
+        this._activeIndex = index;
+        this.render();
+        this._scrollToActive();
+        this._announce(`Navigated to ${String(this._items[index])}`);
     }
-    /**
-     * 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;
+    _scrollToActive() {
+        const el = this._shadow.getElementById(`option-${this._activeIndex}`);
+        el?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }
+    _onType(char) {
+        if (this._typeTimeout)
+            window.clearTimeout(this._typeTimeout);
+        this._typeBuffer += char.toLowerCase();
+        this._typeTimeout = window.setTimeout(() => {
+            this._typeBuffer = '';
+        }, 400);
+        // Find first matching item
+        const match = this._items.findIndex((item) => String(item).toLowerCase().startsWith(this._typeBuffer));
+        if (match >= 0) {
+            this._setActive(match);
         }
-        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);
+    _announce(msg) {
+        if (this._liveRegion) {
+            this._liveRegion.textContent = msg;
+            setTimeout(() => {
+                if (this._liveRegion)
+                    this._liveRegion.textContent = '';
+            }, 1000);
+        }
     }
-    /**
-     * 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)}`;
+    // Focus management
+    focus() {
+        this._listRoot.focus();
     }
 }
+customElements.define('smilodon-select', NativeSelectElement);
 
 /**
- * Option Renderer
- *
- * Unified renderer that handles both lightweight (label/value) and
- * custom component rendering with consistent performance characteristics.
+ * Global Configuration System for Select Components
+ * Allows users to define default behaviors that can be overridden at component level
+ */
+/**
+ * Default global configuration
  */
+const defaultConfig = {
+    selection: {
+        mode: 'single',
+        allowDeselect: false,
+        maxSelections: 0,
+        showRemoveButton: true,
+        closeOnSelect: true,
+    },
+    scrollToSelected: {
+        enabled: true,
+        multiSelectTarget: 'first',
+        behavior: 'smooth',
+        block: 'nearest',
+    },
+    loadMore: {
+        enabled: false,
+        itemsPerLoad: 3,
+        threshold: 100,
+        showLoader: true,
+    },
+    busyBucket: {
+        enabled: true,
+        showSpinner: true,
+        message: 'Loading...',
+        minDisplayTime: 200,
+    },
+    styles: {
+        classNames: {},
+    },
+    serverSide: {
+        enabled: false,
+        getValueFromItem: (item) => item?.value ?? item,
+        getLabelFromItem: (item) => item?.label ?? String(item),
+    },
+    infiniteScroll: {
+        enabled: false,
+        pageSize: 20,
+        initialPage: 1,
+        cachePages: true,
+        maxCachedPages: 10,
+        preloadAdjacent: true,
+        scrollRestoration: 'auto',
+    },
+    expandable: {
+        enabled: false,
+        collapsedHeight: '300px',
+        expandedHeight: '500px',
+        expandLabel: 'Show more',
+        collapseLabel: 'Show less',
+    },
+    callbacks: {},
+    enabled: true,
+    searchable: false,
+    placeholder: 'Select an option...',
+    virtualize: true,
+    estimatedItemHeight: 48,
+};
 /**
- * Manages rendering of both lightweight and custom component options
+ * Global configuration instance
  */
-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');
-            }
-        }
+class SelectConfigManager {
+    constructor() {
+        this.config = this.deepClone(defaultConfig);
     }
     /**
-     * Update focused state for an option
-     *
-     * @param index - The option index
-     * @param focused - Whether it has keyboard focus
+     * Get current global configuration
      */
-    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);
-        }
+    getConfig() {
+        return this.config;
     }
     /**
-     * Unmount and cleanup an option
-     *
-     * @param index - The option index
+     * Update global configuration (deep merge)
      */
-    unmount(index) {
-        // Release custom component if exists
-        this._pool.release(index);
-        // Remove from mounted elements
-        this._mountedElements.delete(index);
+    updateConfig(updates) {
+        this.config = this.deepMerge(this.config, updates);
     }
     /**
-     * Unmount all options
+     * Reset to default configuration
      */
-    unmountAll() {
-        this._pool.releaseAll();
-        this._mountedElements.clear();
+    resetConfig() {
+        this.config = this.deepClone(defaultConfig);
     }
     /**
-     * Get pool statistics
+     * Merge component-level config with global config
+     * Component-level config takes precedence
      */
-    getStats() {
-        return this._pool.getStats();
+    mergeWithComponentConfig(componentConfig) {
+        return this.deepMerge(this.deepClone(this.config), componentConfig);
     }
-    /**
-     * 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;
+    deepClone(obj) {
+        return JSON.parse(JSON.stringify(obj));
     }
-    /**
-     * 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);
+    deepMerge(target, source) {
+        const result = { ...target };
+        for (const key in source) {
+            if (source.hasOwnProperty(key)) {
+                const sourceValue = source[key];
+                const targetValue = result[key];
+                if (sourceValue && typeof sourceValue === 'object' && !Array.isArray(sourceValue)) {
+                    result[key] = this.deepMerge(targetValue && typeof targetValue === 'object' ? targetValue : {}, sourceValue);
                 }
-            },
-            onCustomEvent: (eventName, data) => {
-                if (this._config.onCustomEvent) {
-                    this._config.onCustomEvent(index, eventName, data);
+                else {
+                    result[key] = sourceValue;
                 }
             }
-        };
-        // 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;
+        return result;
     }
 }
+/**
+ * Singleton instance
+ */
+const selectConfig = new SelectConfigManager();
+/**
+ * Helper function to configure select globally
+ */
+function configureSelect(config) {
+    selectConfig.updateConfig(config);
+}
+/**
+ * Helper function to reset select configuration
+ */
+function resetSelectConfig() {
+    selectConfig.resetConfig();
+}
 
 /**
  * Enhanced Select Component