@widgetic/editor 3.11.4 → 4.0.2

package/dist/components/ic/VectorInputController.svelte

@@ -0,0 +1,1826 @@
+<!--
+ * VectorInputController Component
+ * A single-input controller for SVG vector selection with category filtering.
+ * 
+ * Features:
+ * - Vector selection with preview
+ * - Real-time search with highlighting
+ * - Category filtering (Icons, Emojis, Clipart, Mine)
+ * - Recently used vectors tracking (up to 3 vectors)
+ * - Performance-optimized vector loading
+ * - Custom vector support via file browser
+ * 
+ * Performance optimizations:
+ * - Lazy loads vectors only when visible in viewport
+ * - Delays vector loading until scrolling stops (1 second delay)
+ * - Preloads default vectors on mount
+ 
+ -->
+<script lang="ts">
+  // Svelte imports
+  import { onMount, onDestroy, tick } from 'svelte';
+  const browser = typeof window !== 'undefined';
+
+  /** COMPONENTS IMPORTS */
+  // Shadcn UI components imports from design-system
+  import { Popover, EmptyState } from '@widgetic/design-system/components';
+
+  // Import Tabler Icons from design-system
+  import { Check, IconCloudUpload, IconCaretDownFilled, IconAlertTriangle } from '@widgetic/design-system/icons';
+  
+  // Import InputControllerHeader
+  import { InputControllerHeader } from './index';
+  
+  // Import shared components
+  // import { SearchInput } from './shared';
+  import { SearchInput } from '@widgetic/design-system/components';
+  import CategoryTabs from './shared/CategoryTabs.svelte';
+  import { RecentItemsSection, ItemGrid } from './shared';
+  
+  // Utils imports
+  import { 
+    vectorUtils, 
+    vectorCategories, 
+    type VectorItem, 
+    type RecentVector, 
+    recentVectorsStore 
+  } from '../../utils/vectorUtils';
+  import type { VectorData } from '../../utils/VectorManager';
+  import VectorManager from '../../utils/VectorManager';
+  
+  // Constants
+  const VECTOR_FILTER_KEY = (id: string) => `vector-specific-filter-state-${id}`;
+  const MAX_RECENT_VECTORS = 3;
+
+  type FilterType = typeof vectorCategories.types[number];
+  let currentFilter: FilterType = 'All'; // Default to 'All'
+  let lastActiveFilter: FilterType = 'All'; // Add this to track the last active filter
+  let filterOptions: FilterType[] = [...vectorCategories.types];
+
+  /**
+   * Component Props
+   * @prop {string} label - Display label for the vector selector
+   * @prop {string} value - Currently selected vector
+   * @prop {Function} onChange - Callback when vector selection changes
+   * @prop {string} description - Optional help text
+   * @prop {string} controllerId - Unique identifier for this controller
+   * @prop {any} openDropdowns - Store tracking open dropdown states
+   * @prop {Function} toggleDropdown - Function to toggle dropdown state
+   * @prop {Function} onFocus - Optional focus handler
+   */
+  export let label: string;
+  export let value: { name: string; category: string; url: string } | null = null;
+  export let onChange: ((newValue: { name: string; category: string; url: string } | null) => void) | undefined = undefined;
+  export let description: string | undefined = undefined;
+  export let controllerId: string;
+  export let openDropdowns: any;
+  export let toggleDropdown: (id: string) => void;
+  export let onFocus: () => void = () => {};
+
+  // Vector modal state
+  let showVectorModal = false;
+  
+  // Vector search and filter state
+  let allVectors: VectorItem[] = [];
+  let recentVectors: VectorItem[] = [];
+  let filteredVectors: VectorData[] = [];
+  let searchTerm = '';
+  let searchBatchIndex = VectorManager.initialVectorNumber;
+  const SEARCH_BATCH_SIZE = VectorManager.BATCH_SIZE;
+
+  // Vector loading optimization
+  let vectorListContainer: HTMLElement;
+  let vectorObserver = new IntersectionObserver(() => {});
+  
+  // Initialize VectorManager instance
+  let vectorManagerInstance: VectorManager;
+  let buttonWidth = 0;
+
+  let scrollTimeout: ReturnType<typeof setTimeout>;
+
+  // Add these variables for search
+  let activeSearchIndex = -1;
+
+  // Add loading state
+  let isLoadingBatch = false;
+
+  // Add new prop for controlling vector list behavior
+  export let hideRecentFromList: boolean = false;
+  export let hideTrashIcon: boolean = true;
+
+  // Add scroll state tracking
+  let isScrolled = false;
+
+  // Add loading state variables for ItemGrid
+  let loadingMoreVectors = false;
+  let hasMoreVectors = false;
+  
+  // Add state to track SVG loading errors
+  let svgLoadErrors = new Map<string, boolean>();
+
+  // Function to handle SVG loading errors
+  function handleSvgError(vectorName: string, event: Event): void {
+    // Extract more information about the error source
+    let errorUrl = 'unknown';
+    if (event && event.target instanceof HTMLImageElement) {
+      errorUrl = event.target.src || 'unknown';
+      event.target.style.display = 'none';
+    }
+    
+    console.error(`❌ [VectorInput] Failed to load SVG: "${vectorName}" from URL: ${errorUrl}`);
+    svgLoadErrors.set(vectorName, true);
+    // Force component update by reassigning the Map
+    svgLoadErrors = new Map(svgLoadErrors);
+  }
+
+  // Function to check if a vector has a loading error
+  function hasSvgLoadError(vectorName: string): boolean {
+    return svgLoadErrors.has(vectorName);
+  }
+
+  // Function to render fallback for failed SVG loads
+  function renderSvgFallback(vectorName: string): string {
+    return `
+      <div class="flex items-center justify-center w-full h-full bg-grey1 rounded-large widgetic-radius">
+        <div class="flex flex-col items-center justify-center gap-1 p-2 text-center">
+          <span class="text-error">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path>
+              <path d="M12 9v4"></path>
+              <path d="M12 17h.01"></path>
+            </svg>
+          </span>
+          <span class="caption text-grey5">Failed to load</span>
+        </div>
+      </div>
+    `;
+  }
+
+  // Function to update scroll state
+  function updateScrollState() {
+    if (vectorListContainer) {
+      const wasScrolled = isScrolled;
+      isScrolled = vectorListContainer.scrollTop > 10;
+      
+      // If we're transitioning from scrolled to not scrolled, remove transition
+      if (wasScrolled && !isScrolled) {
+        const stickyHeader = document.querySelector(`#vector-header-${controllerId}`);
+        if (stickyHeader) {
+          stickyHeader.classList.remove('transition-border');
+          // Force a reflow to ensure the transition class removal takes effect
+          void (stickyHeader as HTMLElement).offsetWidth;
+        }
+      } else if (!wasScrolled && isScrolled) {
+        // Add transition class when starting to scroll
+        const stickyHeader = document.querySelector(`#vector-header-${controllerId}`);
+        if (stickyHeader) {
+          stickyHeader.classList.add('transition-border');
+        }
+      }
+    }
+  }
+
+  // Subscribe to store changes
+  $: {
+    recentVectors = $recentVectorsStore
+      .map(vector => ({
+        name: vector.name,
+        category: vectorCategories.normalize(vector.category) as VectorItem['category'],
+        url: vector.url,
+        isCustom: vector.isCustom
+      }));
+    
+    // Update filtered vectors when recent vectors change
+    if (hideRecentFromList) {
+      updateFilteredVectors();
+    }
+  }
+
+  // Add debounce function at the top of the script section
+  function debounce<T extends (...args: any[]) => Promise<void>>(
+    func: T, 
+    wait: number
+  ): (...args: Parameters<T>) => void {
+    let timeout: ReturnType<typeof setTimeout> | null = null;
+    return function(this: any, ...args: Parameters<T>): void {
+      const context = this;
+      
+      // Ensure we have a valid event with a target
+      const event = args[0] as Event;
+      if (!event || !event.target) {
+        console.warn('❌ [VectorSearch] Debounced function called with invalid event:', event);
+        return;
+      }
+      
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        timeout = null;
+        func.apply(context, args);
+      }, wait);
+    };
+  };
+
+  // Add a variable to store the debounced search function
+  let debouncedSearch: (event: Event) => void;
+
+  /**
+   * Updates the filtered vectors list based on search term and category
+   * Also handles setting up the observer after updating
+   */
+  function updateFilteredVectors() {
+    let vectors = [...allVectors];
+    
+    // console.log('🔄 [VectorInput] Updating filtered vectors:', {
+    //   allVectors: allVectors.length,
+    //   currentFilter,
+    //   searchTerm,
+    //   hideRecentFromList,
+    //   recentVectors: recentVectors.length
+    // });
+    
+    // Apply search filter
+    if (searchTerm) {
+      const term = searchTerm.toLowerCase();
+      vectors = vectors.filter(vector => 
+        vector.name.toLowerCase().includes(term)
+      );
+    }
+    
+    // Apply category filter
+    if (currentFilter !== 'All') {
+      vectors = vectors.filter(vector => {
+        // For Mine category, check exact match
+        if (currentFilter === 'Mine') {
+          return vector.category === 'Mine';
+        }
+        // For other categories, use normalization
+        const normalizedCategory = vectorCategories.normalize(vector.category);
+        return normalizedCategory === currentFilter;
+      });
+    }
+    
+    // Optionally filter out recent vectors
+    if (hideRecentFromList) {
+      vectors = vectors.filter(vector => 
+        !recentVectors.some(recent => recent.name === vector.name)
+      );
+    }
+
+    // Update filtered vectors
+    filteredVectors = vectors;
+    
+    // console.log('✅ [VectorInput] Filtered vectors result:', {
+    //   total: vectors.length,
+    //   filter: currentFilter,
+    //   searchTerm,
+    //   hideRecentFromList,
+    //   recentVectorsHidden: hideRecentFromList ? recentVectors.length : 0
+    // });
+    
+    // Setup observer after updating filtered vectors
+    // Use a small timeout to ensure the DOM has updated
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout);
+    }
+    
+    scrollTimeout = setTimeout(() => {
+      setupVectorObserver();
+    }, 50);
+  }
+
+  // Initialize the debounced search function in onMount
+  onMount(async () => {
+    // Initialize the debounced search function
+    debouncedSearch = debounce(async (event: Event) => {
+      await handleSearch(event);
+    }, 300); // 300ms debounce time
+    
+    // Setup global error handler for SVG loading errors
+    const vectorErrorHandler = (event: Event) => {
+      if (event instanceof CustomEvent && event.detail) {
+        const vectorName = event.detail;
+        // Check if we can get the vector URL from allVectors
+        const vectorData = allVectors.find(v => v.name === vectorName);
+        const vectorUrl = vectorData?.url || 'unknown';
+        
+        console.error(`❌ [VectorInput] Failed to load SVG: "${vectorName}" from URL: ${vectorUrl}`);
+        svgLoadErrors.set(vectorName, true);
+        // Force component update
+        svgLoadErrors = new Map(svgLoadErrors);
+      }
+    };
+    
+    // Add the event listener
+    document.addEventListener('vector-load-error', vectorErrorHandler);
+
+    // Store the handler reference for cleanup in onDestroy
+    (window as any)['vectorErrorHandler'] = vectorErrorHandler;
+
+    try {
+      if (browser) {
+        // Load saved filter
+        const savedFilter = localStorage.getItem(VECTOR_FILTER_KEY(controllerId));
+        if (savedFilter) {
+          currentFilter = savedFilter as FilterType;
+        }
+        
+        // Check if the current selected vector exists/loads
+        if (value?.name && value.url) {
+          const testImg = new Image();
+          testImg.onload = () => {
+            // Vector loads successfully
+            console.log(`✅ [VectorInput] Current vector loads successfully: ${value.name}`);
+          };
+          testImg.onerror = () => {
+            // Mark as error if it fails to load
+            console.error(`❌ [VectorInput] Current vector failed to load: ${value.name}, URL: ${value.url}`);
+            svgLoadErrors.set(value.name, true);
+            svgLoadErrors = new Map(svgLoadErrors);
+          };
+          testImg.src = value.url;
+        }
+      }
+
+      // console.log('🚀 [VectorInput] Initializing controller:', {
+      //   controllerId,
+      //   initialFilter: currentFilter
+      // });
+      
+      vectorManagerInstance = await VectorManager.getInstance();
+      
+      // Load and verify recent vectors
+      const loadedRecentVectors = vectorUtils.getRecentVectors();
+      // console.log('📝 [VectorInput] Loading recent vectors:', loadedRecentVectors);
+
+      // Filter and validate recent vectors
+      const validRecentVectors = loadedRecentVectors
+        .slice(0, MAX_RECENT_VECTORS);
+
+      // Update store with validated vectors
+      recentVectorsStore.set(validRecentVectors);
+      
+      // Update local state
+      recentVectors = validRecentVectors.map(vector => ({
+        name: vector.name,
+        category: vectorCategories.normalize(vector.category) as VectorItem['category'],
+        url: vector.url,
+        isCustom: vector.isCustom
+      }));
+
+      // console.log('✅ [VectorInput] Recent vectors initialized:', {
+      //   loaded: loadedRecentVectors.length,
+      //   valid: validRecentVectors.length,
+      //   vectors: validRecentVectors.map(v => v.name)
+      // });
+
+      // Initialize vectors list with saved filter
+      const initializeVectors = async () => {
+        if (currentFilter === 'Mine') {
+          const customVectors = await vectorManagerInstance.loadCustomVectors();
+          return customVectors;
+        }
+
+        // For All category, load standard vectors first, then append custom vectors
+        const standardVectors = await vectorManagerInstance.getInitialVectorList();
+        const customVectors = await vectorManagerInstance.loadCustomVectors();
+        
+        if (currentFilter === 'All') {
+          return [
+            ...standardVectors.filter(vector => !vector.isCustom),
+            ...customVectors
+          ];
+        }
+        
+        // For other categories, filter out custom vectors
+        return standardVectors.filter(vector => !vector.isCustom);
+      };
+
+      const initialVectors = await initializeVectors();
+
+      // Force a fresh batch for this controller
+      vectorManagerInstance.resetBatchIndex(controllerId);
+
+      // For Mine category, use all custom vectors
+      if (currentFilter === 'Mine') {
+        allVectors = initialVectors;
+      } else {
+        // For other categories, use normal filtering
+        if (currentFilter !== 'All') {
+          const categoryVectors = initialVectors.filter(vector => 
+            vectorCategories.normalize(vector.category) === currentFilter
+          );
+          allVectors = categoryVectors.slice(0, searchBatchIndex);
+        } else {
+          allVectors = initialVectors.slice(0, searchBatchIndex);
+        }
+      }
+
+      // Update filtered vectors immediately
+      updateFilteredVectors();
+
+      // Preload the vectors to detect missing files early
+      if (filteredVectors.length > 0) {
+        console.log(`🔍 [VectorInput] Preloading ${filteredVectors.length} vectors to detect missing files...`);
+        preloadVectors(filteredVectors);
+      }
+      
+      // Also preload recent vectors
+      if (recentVectors.length > 0) {
+        console.log(`🔍 [VectorInput] Preloading ${recentVectors.length} recent vectors...`);
+        preloadVectors(recentVectors);
+      }
+
+      // Setup observer after vectors are loaded
+      scrollTimeout = setTimeout(() => {
+        setupVectorObserver();
+      }, 0);
+
+      // console.log('✅ [VectorInput] Controller initialized:', {
+      //   controllerId,
+      //   initialVectors: allVectors.length,
+      //   filteredVectors: filteredVectors.length,
+      //   recentVectors: recentVectors.length,
+      //   currentFilter,
+      //   customVectors: allVectors.filter(v => v.category === 'Mine').length
+      // });
+    } catch (error) {
+      console.error('❌ [VectorInput] Error during initialization:', error);
+    }
+  });
+
+  /**
+   * Manages real-time search functionality
+   * Prioritizes recent vectors in search results
+   * Enhanced to better handle partial matches
+   */
+  async function handleSearch(event: Event) {
+    try {
+      const input = event.target as HTMLInputElement;
+      // Add null check for input element
+      if (!input) {
+        console.warn('❌ [VectorSearch] Search input element is null');
+        return;
+      }
+      
+      const newSearchTerm = input.value;
+      
+      // Skip processing if the search term hasn't changed
+      if (newSearchTerm === searchTerm) {
+        return;
+      }
+      
+      // If this is a new search (was empty before), save the current filter
+      if (!searchTerm && newSearchTerm) {
+        lastActiveFilter = currentFilter;
+        currentFilter = 'All'; // Reset to All when starting a search
+        if (browser) {
+          localStorage.setItem(VECTOR_FILTER_KEY(controllerId), 'All');
+        }
+      }
+      
+      searchTerm = newSearchTerm;
+      
+      // console.log('🔍 [VectorSearch] Search input:', { searchTerm });
+  
+      if (!searchTerm.trim()) {
+        // Reset to normal view if search is empty
+        searchTerm = '';
+        
+        // Reset batch index to start fresh
+        if (vectorManagerInstance) {
+          vectorManagerInstance.resetBatchIndex(controllerId);
+          
+          // Reload vectors for the current category
+          await tick(); // Ensure the UI updates first
+          
+          // The reactive statement for empty search term will handle reloading
+        }
+        
+        if (vectorListContainer) {
+          vectorListContainer.scrollTop = 0;
+        }
+        return; // Let reactivity handle the reset
+      }
+  
+      // Just load the complete vector list if we're searching
+      const completeVectorList = await vectorManagerInstance?.getCompleteVectorList(true) || [];
+      allVectors = completeVectorList;
+      
+      // Reset scroll position
+      if (vectorListContainer) {
+        vectorListContainer.scrollTop = 0;
+      }
+      
+      // Ensure the UI updates to show "Search Results" instead of "More"
+      await tick();
+    } catch (error) {
+      console.error('❌ [VectorSearch] Error:', error);
+    }
+  }
+
+  // Add a derived store for search results
+  let currentSearchResults: VectorData[] = [];
+
+  // Update the reactive statement for search
+  $: if (searchTerm) {
+    const searchValue = searchTerm.toLowerCase().trim();
+    // Only process if the search value is not empty
+    if (searchValue) {
+      try {
+        // Get both standard and custom vectors from cache - add null checks
+        const standardVectors = vectorManagerInstance?.getCachedVectorList()?.filter(vector => !vector.isCustom) || [];
+        const customVectors = vectorManagerInstance?.getCachedVectorList()?.filter(vector => vector.isCustom) || [];
+        
+        // Merge both lists
+        const allCachedVectors = [...standardVectors, ...customVectors];
+        
+        // Enhanced search algorithm
+        const newSearchResults = allCachedVectors
+          .filter(vector => {
+            const nameLower = vector.name.toLowerCase().trim();
+            
+            // Use exact matching for search term instead of splitting by spaces
+            return nameLower.includes(searchValue);
+          })
+          .sort((a, b) => {
+            const aName = a.name.toLowerCase();
+            const bName = b.name.toLowerCase();
+            
+            // Prioritize vectors that start with the search term
+            const aStartsWith = aName.startsWith(searchValue);
+            const bStartsWith = bName.startsWith(searchValue);
+            
+            if (aStartsWith && !bStartsWith) return -1;
+            if (!aStartsWith && bStartsWith) return 1;
+            
+            // Then prioritize vectors where search term appears earlier
+            const aIndex = aName.indexOf(searchValue);
+            const bIndex = bName.indexOf(searchValue);
+            
+            if (aIndex !== -1 && bIndex !== -1) {
+              return aIndex - bIndex;
+            }
+            
+            // Fall back to alphabetical sorting
+            return aName.localeCompare(bName);
+          });
+
+        // Only update results if they've changed
+        if (JSON.stringify(newSearchResults) !== JSON.stringify(currentSearchResults)) {
+          // Store all search results for batching
+          currentSearchResults = newSearchResults;
+          
+          // Select first item automatically if we have results
+          activeSearchIndex = currentSearchResults.length > 0 ? 0 : -1;
+          
+          // Show more initial results (double the default)
+          const initialResultsCount = Math.min(VectorManager.initialVectorNumber * 2, currentSearchResults.length);
+          filteredVectors = currentSearchResults.slice(0, initialResultsCount);
+
+          // Reset scroll position
+          if (vectorListContainer) {
+            vectorListContainer.scrollTop = 0;
+          }
+          
+          // console.log('📝 [VectorSearch] Updated results:', {
+          //   searchValue,
+          //   totalMatches: currentSearchResults.length,
+          //   displayedResults: filteredVectors.length,
+          //   activeIndex: activeSearchIndex
+          // });
+        }
+      } catch (error) {
+        console.error('❌ [VectorSearch] Error processing search:', error);
+      }
+    }
+  }
+  
+  // Handle empty search term separately to avoid reactivity loop
+  $: if (searchTerm === '') {
+    // Only reset if we actually had search results before or if we have no filtered vectors
+    if (currentSearchResults.length > 0 || filteredVectors.length === 0) {
+      // console.log('🔄 [VectorSearch] Handling empty search term');
+      
+      // Reset search state
+      currentSearchResults = [];
+      activeSearchIndex = -1;  // Reset active index
+      
+      // Reset batch index to start fresh
+      if (vectorManagerInstance) {
+        vectorManagerInstance.resetBatchIndex(controllerId);
+      
+        // Get vectors for current category
+        let vectors: VectorData[] = [];
+        
+        if (currentFilter === 'All') {
+          try {
+            // Get standard vectors first - add null check
+            const standardVectors = vectorManagerInstance.getCachedVectorList()
+              ?.filter(vector => !vector.isCustom)
+              ?.slice(0, VectorManager.initialVectorNumber) || [];
+            
+            // Get custom vectors - add null check
+            const customVectors = vectorManagerInstance.getCachedVectorList()
+              ?.filter(vector => vector.isCustom) || [];
+            
+            // Combine them with custom vectors at the end
+            vectors = [...standardVectors, ...customVectors];
+          } catch (error) {
+            console.error('❌ [VectorSearch] Error getting cached vectors:', error);
+            vectors = [];
+          }
+        } else if (currentFilter === 'Mine') {
+          vectors = vectorManagerInstance.getPreloadedVectors(currentFilter as VectorItem['category']);
+        } else {
+          // For other categories, filter out custom vectors
+          vectors = vectorManagerInstance.getPreloadedVectors(currentFilter as VectorItem['category'])
+            .filter(vector => !vector.isCustom);
+        }
+        
+        // Update all vectors
+        allVectors = vectors;
+        
+        // Update filtered vectors directly to ensure UI updates
+        updateFilteredVectors();
+      }
+      
+      // Reset scroll position
+      if (vectorListContainer) {
+        vectorListContainer.scrollTop = 0;
+      }
+      
+      // Ensure the observer is set up after the DOM updates
+      setTimeout(() => {
+        setupVectorObserver();
+        // console.log('🔄 [VectorSearch] Observer setup after search clear');
+      }, 50);
+    }
+  }
+
+  /**
+   * Manages intersection observer for lazy loading vectors
+   * Only loads vectors when they become visible in viewport
+   */
+  function setupVectorObserver() {
+    if (!vectorListContainer) {
+      // console.log('⚠️ [VectorInput] Vector list container not found, retrying...');
+      return scrollTimeout = setTimeout(() => {
+        if (vectorListContainer) {
+          setupVectorObserver();
+        }
+      }, 50);
+    }
+
+    // If we have no vectors to observe, try to update filtered vectors first
+    if (!filteredVectors.length) {
+      // console.log('⚠️ [VectorInput] No vectors available to observe, updating filtered vectors');
+      updateFilteredVectors();
+      
+      // If we still have no vectors, log a warning and return
+      if (!filteredVectors.length) {
+        // console.warn('❌ [VectorInput] No vectors available to observe after update');
+        
+        // If we're in a category that should have vectors, try to reload them
+        if (vectorManagerInstance) {
+          // console.log('🔄 [VectorInput] Attempting to reload vectors for category:', currentFilter);
+          
+          // Reset batch index
+          vectorManagerInstance.resetBatchIndex(controllerId);
+          
+          // Get vectors for current category
+          let vectors: VectorData[] = [];
+          
+          try {
+            if (currentFilter === 'All') {
+              // Get standard vectors first - add null check
+              const standardVectors = vectorManagerInstance.getCachedVectorList()
+                ?.filter(vector => !vector.isCustom)
+                ?.slice(0, VectorManager.initialVectorNumber) || [];
+              
+              // Get custom vectors - add null check
+              const customVectors = vectorManagerInstance.getCachedVectorList()
+                ?.filter(vector => vector.isCustom) || [];
+              
+              // Combine them with custom vectors at the end
+              vectors = [...standardVectors, ...customVectors];
+            } else if (currentFilter === 'Mine') {
+              vectors = vectorManagerInstance.getPreloadedVectors(currentFilter as VectorItem['category']);
+            } else {
+              // For other categories, filter out custom vectors
+              vectors = vectorManagerInstance.getPreloadedVectors(currentFilter as VectorItem['category'])
+                .filter(vector => !vector.isCustom);
+            }
+          } catch (error) {
+            console.error('❌ [VectorInput] Error getting cached vectors:', error);
+            vectors = [];
+          }
+          
+          // Update all vectors
+          allVectors = vectors;
+          updateFilteredVectors();
+        }
+        
+        return;
+      }
+    }
+
+    // console.log('🔍 [VectorInput] Setting up vector observer for', filteredVectors.length, 'vectors');
+    
+    // Get the observer from VectorManager
+    const observer = vectorManagerInstance?.getObserver(vectorListContainer);
+    if (!observer) {
+      // console.warn('❌ [VectorInput] Failed to create observer');
+      return;
+    }
+    
+    // Disconnect existing observer if it exists
+    if (vectorObserver) {
+      vectorObserver.disconnect();
+    }
+    
+    vectorObserver = observer;
+    
+    // Observe all existing vector elements - add null check
+    if (vectorListContainer) {
+      const vectorElements = vectorListContainer.querySelectorAll('[data-vector]');
+      // console.log('📝 [VectorInput] Observing', vectorElements.length, 'vector elements');
+      
+      // Use a more efficient approach to observe elements
+      // Batch the observation process to reduce performance impact
+      const batchSize = 20; // Process 20 elements at a time
+      let currentIndex = 0;
+      
+      const observeBatch = () => {
+        const endIndex = Math.min(currentIndex + batchSize, vectorElements.length);
+        
+        for (let i = currentIndex; i < endIndex; i++) {
+          observer.observe(vectorElements[i]);
+        }
+        
+        currentIndex = endIndex;
+        
+        if (currentIndex < vectorElements.length) {
+          // Process next batch in the next animation frame
+          requestAnimationFrame(observeBatch);
+        }
+      };
+      
+      // Start the batched observation process
+      observeBatch();
+    }
+  }
+
+  /**
+   * Handles keyboard navigation in search results
+   */
+  function handleSearchKeydown(event: KeyboardEvent | CustomEvent<KeyboardEvent>) {
+    // Ensure we have a KeyboardEvent
+    const keyEvent = event instanceof KeyboardEvent ? event : event.detail;
+    
+    // Prevent handling backspace when search is already empty
+    if (keyEvent.key === 'Backspace' && !searchTerm) {
+      keyEvent.preventDefault();
+      return;
+    }
+    
+    if (!filteredVectors.length) return;
+
+    if (keyEvent.key === 'ArrowDown') {
+      keyEvent.preventDefault();
+      handleArrowClick('down');
+    } else if (keyEvent.key === 'ArrowUp') {
+      keyEvent.preventDefault();
+      handleArrowClick('up');
+    } else if (keyEvent.key === 'Enter' && activeSearchIndex !== -1) {
+      keyEvent.preventDefault();
+      handleVectorSelect(filteredVectors[activeSearchIndex]);
+    }
+  }
+
+  /**
+   * Updates arrow navigation in search results
+   */
+  function handleArrowClick(direction: 'up' | 'down') {
+    if (!filteredVectors.length) return;
+
+    if (direction === 'down') {
+      activeSearchIndex = (activeSearchIndex + 1) % filteredVectors.length;
+    } else {
+      activeSearchIndex = activeSearchIndex <= 0 ? filteredVectors.length - 1 : activeSearchIndex - 1;
+    }
+
+    // Ensure the selected item is visible and add null check for vectorListContainer
+    if (vectorListContainer && activeSearchIndex >= 0 && activeSearchIndex < filteredVectors.length) {
+      const selectedElement = vectorListContainer.querySelector(`[data-vector="${filteredVectors[activeSearchIndex].name}"]`);
+      selectedElement?.scrollIntoView({ block: 'nearest' });
+    }
+  }
+
+  /**
+   * Handles vector selection and updates recent vectors
+   */
+  function handleVectorSelect(vector: VectorItem | RecentVector) {
+    // First check if the vector has a loading error
+    if (hasSvgLoadError(vector.name)) {
+      console.warn(`⚠️ [VectorInput] Prevented selection of vector with loading error: ${vector.name}`);
+      return; // Don't select vectors that failed to load
+    }
+
+    if (onChange) {
+      const vectorValue = {
+        name: vector.name,
+        category: vector.category,
+        url: vector.url
+      };
+      
+      // Pass the vector value object to onChange
+      onChange(vectorValue);
+
+      // console.log('✅ [VectorInput] Vector selected:', {
+      //   vector: vectorValue
+      // });
+    }
+  }
+
+  /**
+   * Handles vector list scrolling
+   */
+  function handleVectorListScroll(event: Event) {
+    // Ensure target is an HTMLElement
+    if (!(event.target instanceof HTMLElement)) {
+      return;
+    }
+
+    // Prevent event propagation to stop global scroll handler from closing the modal
+    event.stopPropagation();
+
+    // Handle vector loading for visible vectors
+    vectorManagerInstance?.handleScroll();
+
+    const container = event.target;
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    // Increase the threshold to detect when we're closer to the bottom
+    const scrolledToBottom = (scrollHeight - (scrollTop + clientHeight)) <= 100;
+
+    // Add debug log to help diagnose scrolling issues
+    // console.log('📜 [VectorScroll] Scroll position:', {
+    //   scrollTop,
+    //   scrollHeight,
+    //   clientHeight,
+    //   remainingScroll: scrollHeight - (scrollTop + clientHeight),
+    //   scrolledToBottom,
+    //   hasSearchTerm: Boolean(searchTerm),
+    //   searchResultsCount: currentSearchResults.length,
+    //   displayedResults: filteredVectors.length
+    // });
+
+    // Use requestAnimationFrame to optimize scroll handling
+    if (scrolledToBottom) {
+      // Use requestAnimationFrame to avoid blocking the UI thread
+      requestAnimationFrame(() => {
+        if (searchTerm && currentSearchResults.length > 0) {
+          // Calculate next batch using SEARCH_BATCH_SIZE
+          const nextBatchStart = filteredVectors.length;
+          const nextBatch = currentSearchResults.slice(
+            nextBatchStart,
+            nextBatchStart + SEARCH_BATCH_SIZE
+          );
+          
+          if (nextBatch.length > 0) {
+            // Add new batch to filtered vectors
+            filteredVectors = [...filteredVectors, ...nextBatch];
+            
+            // Setup observer for new vectors
+            scrollTimeout = setTimeout(() => {
+              if (vectorListContainer) {
+                setupVectorObserver();
+              }
+            }, 0);
+
+            console.log('📝 [VectorSearch] Loaded next batch:', {
+              batchSize: nextBatch.length,
+              totalDisplayed: filteredVectors.length,
+              remainingVectors: currentSearchResults.length - filteredVectors.length,
+              nextBatchSize: SEARCH_BATCH_SIZE
+            });
+          }
+        } else {
+          // Normal vector list scrolling
+          if (!isLoadingBatch && vectorManagerInstance?.hasMoreVectors(controllerId, currentFilter)) {
+            loadNextBatch();
+          }
+        }
+      });
+    }
+  }
+
+  /**
+   * Loads the next batch of vectors
+   */
+  async function loadNextBatch() {
+    if (isLoadingBatch) return;
+
+    try {
+      isLoadingBatch = true;
+      
+      // Get next batch for this controller
+      const newVectors = vectorManagerInstance.getNextBatch(controllerId, currentFilter);
+      
+      // Add to existing vectors, ensuring uniqueness
+      const combinedVectors = [...allVectors, ...newVectors];
+      allVectors = Array.from(
+        new Map(combinedVectors.map(vector => [vector.name, vector])).values()
+      );
+      
+      // Update filtered vectors while preserving current filter
+      updateFilteredVectors();
+
+      // console.log('🔄 [VectorInput] Loaded new batch:', {
+      //   controllerId,
+      //   filter: currentFilter,
+      //   newVectors: newVectors.length,
+      //   totalVectors: allVectors.length,
+      //   filteredVectors: filteredVectors.length
+      // });
+
+    } catch (error) {
+      console.error('❌ [VectorInput] Error loading vector batch:', error);
+    } finally {
+      isLoadingBatch = false;
+    }
+  }
+
+  onDestroy(() => {
+    window.removeEventListener('scroll', handleGlobalScroll, true);
+    window.removeEventListener('touchstart', () => {});
+    window.removeEventListener('touchmove', () => {});
+    
+    // Remove vector load error listener using the stored reference
+    const vectorErrorHandler = (window as any)['vectorErrorHandler'];
+    if (vectorErrorHandler) {
+      document.removeEventListener('vector-load-error', vectorErrorHandler);
+      delete (window as any)['vectorErrorHandler'];
+    }
+    
+    if (vectorObserver) {
+      vectorObserver.disconnect();
+    }
+    // Clear any timeouts
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout);
+    }
+    showVectorModal = false;
+    
+    console.log('🧹 [VectorInput] Cleanup complete:', {
+      controllerId,
+      lastFilter: currentFilter
+    });
+  });
+
+  /**
+   * Opens the file browser for vector selection
+   */
+  async function openFileBrowser() {
+    console.log('🔍 [VectorInput] Opening file browser for vectors');
+
+    try {
+      // Get the current vector's ID if it exists in our custom vectors
+      const selectedId = value?.name ? 
+        vectorManagerInstance?.getCachedVectorList()
+          .find(v => v.name === value.name && v.category === 'Mine')?.name 
+        : undefined;
+
+      console.log('🔍 [VectorInput] Opening file browser:', {
+        fileTypes: ['svg'],
+        selectedId
+      });
+
+      // TODO: Implement file browser functionality
+      // This will be similar to FontInputController but for SVG files
+    } catch (error) {
+      console.error('❌ [VectorInput] Error opening file browser:', error);
+    }
+  }
+
+  /**
+   * Handles category filter changes
+   */
+  async function handleFilterChange(filter: FilterType) {
+    if (currentFilter !== filter) {
+      currentFilter = filter;
+      lastActiveFilter = filter; // Remember the last active filter
+      
+      if (browser) {
+        localStorage.setItem(VECTOR_FILTER_KEY(controllerId), filter);
+      }
+      
+      if (vectorManagerInstance) {
+        vectorManagerInstance.resetBatchIndex(controllerId);
+        
+        try {
+          let vectors: VectorData[] = [];
+          
+          if (filter === 'All') {
+            // Get standard vectors first - add null check
+            const standardVectors = vectorManagerInstance.getCachedVectorList()
+              ?.filter(vector => !vector.isCustom)
+              ?.slice(0, searchBatchIndex) || [];
+            
+            // Get custom vectors - add null check
+            const customVectors = vectorManagerInstance.getCachedVectorList()
+              ?.filter(vector => vector.isCustom) || [];
+            
+            // Combine them with custom vectors at the end
+            vectors = [...standardVectors, ...customVectors];
+          } else if (filter === 'Mine') {
+            vectors = vectorManagerInstance.getPreloadedVectors(filter as VectorItem['category']);
+          } else {
+            // For other categories, filter out custom vectors
+            vectors = vectorManagerInstance.getPreloadedVectors(filter as VectorItem['category'])
+              .filter(vector => !vector.isCustom);
+          }
+          
+          allVectors = vectors;
+          updateFilteredVectors();
+          
+          // Setup observer in next tick
+          scrollTimeout = setTimeout(() => {
+            if (vectorListContainer) {
+              setupVectorObserver();
+            }
+          }, 0);
+          
+          if (vectorListContainer) {
+            vectorListContainer.scrollTop = 0;
+          }
+
+          // console.log('🔄 [VectorInput] Category changed:', {
+          //   filter,
+          //   vectors: allVectors.length,
+          //   filteredVectors: filteredVectors.length,
+          //   customVectors: allVectors.filter(v => v.isCustom).length
+          // });
+        } catch (error) {
+          console.error('❌ [VectorInput] Error changing category:', error);
+        }
+      }
+    }
+  }
+
+  /**
+   * Creates a custom action for vector observation
+   */
+  function observeVector(node: HTMLElement) {
+    if (vectorObserver) {
+      vectorObserver.observe(node);
+    }
+
+    return {
+      destroy() {
+        if (vectorObserver) {
+          vectorObserver.unobserve(node);
+        }
+      }
+    };
+  }
+
+  /**
+   * Highlights search term matches in vector names
+   */
+  function highlightMatch(name: string, term: string) {
+    if (!term) return name;
+    const nameLower = name.toLowerCase();
+    const termLower = term.toLowerCase().trim();
+    
+    // If the name contains the search term, highlight that part in blue
+    if (termLower && nameLower.includes(termLower)) {
+      const index = nameLower.indexOf(termLower);
+      const beforeMatch = name.slice(0, index);
+      const match = name.slice(index, index + termLower.length);
+      const afterMatch = name.slice(index + termLower.length);
+      
+      return `<span style="color: hsl(var(--grey7))">${beforeMatch}<span style="color: #45BCFE">${match}</span>${afterMatch}</span>`;
+    }
+    
+    // Default case - just return the name in grey7 color
+    return `<span style="color: hsl(var(--grey7))">${name}</span>`;
+  }
+  
+
+  /**
+   * Removes a custom vector
+   */
+  async function removeVector(name: string) {
+    try {
+      // Remove from manager
+      await vectorManagerInstance?.removeCustomVector(name);
+      
+      // If the removed vector was selected, clear the selection
+      if (value?.name === name && onChange) {
+        onChange(null);
+      }
+      
+      // Remove from recent vectors if present
+      const updatedRecentVectors = recentVectors.filter(v => v.name !== name);
+      recentVectors = updatedRecentVectors;
+      
+      // Add lastUsed property before updating store
+      const recentVectorsWithLastUsed = updatedRecentVectors.map(v => ({
+        ...v,
+        lastUsed: Date.now()
+      }));
+      recentVectorsStore.set(recentVectorsWithLastUsed);
+      
+      // Remove from all vectors
+      allVectors = allVectors.filter(v => v.name !== name);
+      
+      // Update filtered vectors
+      updateFilteredVectors();
+      
+      // Wait for DOM update
+      await tick();
+      
+      // Re-setup observer for remaining vectors
+      setupVectorObserver();
+      
+      // console.log('✅ [VectorInput] Vector removed:', {
+      //   name,
+      //   remainingVectors: allVectors.length,
+      //   filteredVectors: filteredVectors.length,
+      //   recentVectors: recentVectors.length
+      // });
+    } catch (error) {
+      console.error('❌ [VectorInput] Error removing vector:', error);
+    }
+  }
+
+  // Add scroll listener with passive option
+  window.addEventListener('scroll', handleGlobalScroll, {
+    capture: true,
+    passive: true
+  });
+
+  // Add touch listeners with passive option
+  window.addEventListener('touchstart', () => {}, { passive: true });
+  window.addEventListener('touchmove', () => {}, { passive: true });
+
+  // Add to VectorInputController.svelte
+  function handleToggle() {
+    const beforeState = $openDropdowns?.has(controllerId);
+    console.log('🟡 [VectorInput] Toggle start:', {
+      controllerId,
+      beforeState,
+      openDropdowns: Array.from($openDropdowns || new Set())
+    });
+    
+    toggleDropdown(controllerId);
+    
+    const afterState = $openDropdowns?.has(controllerId);
+    console.log('🟢 [VectorInput] Toggle complete:', {
+      controllerId,
+      beforeState,
+      afterState,
+      openDropdowns: Array.from($openDropdowns || new Set())
+    });
+  }
+
+  function closeDropdown() {
+    if (open) {
+      handleToggle();
+    }
+  }
+
+  function handleGlobalScroll(event: Event) {
+    // Don't close if scrolling happens within our containers
+    if ((event.target instanceof HTMLElement)) {
+      const target = event.target;
+      
+      // Check if scroll happened inside our containers
+      const isInsideVectorList = target === vectorListContainer || target.closest(`#vector-list-${controllerId}`);
+      const isInsidePopover = target.closest('.vector-popover-content') || target.closest('.vector-input-popover');
+      const isInsideCommand = target.closest('[cmdk-root]');
+      
+      // Log scroll event for debugging
+      // console.log('🔍 [VectorInput] Scroll event:', {
+      //   target: target.id || target.className,
+      //   isInsideVectorList,
+      //   isInsidePopover,
+      //   isInsideCommand,
+      //   shouldStayOpen: isInsideVectorList || isInsidePopover || isInsideCommand
+      // });
+      
+      // If scrolling is inside any of our containers, don't close
+      if (isInsideVectorList || isInsidePopover || isInsideCommand) {
+        return;
+      }
+
+      // If scrolling outside our containers, close dropdowns
+      if ($openDropdowns?.has(controllerId)) {
+        console.log('🔴 [VectorInput] Closing dropdown due to external scroll');
+        toggleDropdown(controllerId);
+      }
+    }
+  }
+
+  // Add to VectorInputController.svelte
+  $: open = $openDropdowns.has(controllerId) || false;
+
+  // Add after filteredVectors.length > 0 check
+  $: if (filteredVectors.length > 0 && vectorListContainer) {
+    // console.log('📝 [VectorInput] Vectors loaded, setting up observer...');
+    setupVectorObserver();
+  }
+
+  // Add these event handlers
+  function handleButtonClick() {
+    const currentState = $openDropdowns?.has(controllerId);
+    // console.log('🔵 [VectorInput] Button click start:', {
+    //   controllerId,
+    //   currentState,
+    //   openDropdowns: Array.from($openDropdowns || new Set()),
+    //   source: 'button'
+    // });
+
+    if (!currentState) {
+      // console.log('🎯 [VectorInput] Triggering focus');
+      onFocus();
+    }
+    // toggleDropdown(controllerId);
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleButtonClick();
+    }
+  }
+
+  // Add this function
+  function measureWidth(node: HTMLElement) {
+    const resizeObserver = new ResizeObserver(() => {
+      buttonWidth = node.offsetWidth;
+    });
+
+    resizeObserver.observe(node);
+
+    return {
+      destroy() {
+        resizeObserver.disconnect();
+      }
+    };
+  }
+
+  // Add this reactive statement
+  $: popoverStyle = `width: ${buttonWidth}px`;
+
+  // Update the trash click handler
+  function handleTrashClick(vector: VectorItem, event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    removeVector(vector.name);
+  }
+
+  // Create a Svelte action to handle image error events
+  function handleImageError(node: HTMLElement, vectorName: string) {
+    const errorHandler = (event: Event) => {
+      console.log(`❌ [VectorInput] Image failed to load: ${vectorName}`);
+      svgLoadErrors.set(vectorName, true);
+      svgLoadErrors = new Map(svgLoadErrors);
+      
+      if (node instanceof HTMLImageElement) {
+        node.style.display = 'none';
+      }
+    };
+    
+    node.addEventListener('error', errorHandler);
+    
+    return {
+      destroy() {
+        node.removeEventListener('error', errorHandler);
+      },
+      update(newVectorName: string) {
+        vectorName = newVectorName;
+      }
+    };
+  }
+
+  // Functions for RecentItemsSection and ItemGrid
+  function renderVectorItem(vector: VectorItem) {
+    // If we already know this SVG has a load error, show fallback
+    if (hasSvgLoadError(vector.name)) {
+      return {
+        html: `
+          <div class="flex items-center justify-center w-full h-full bg-grey1 rounded-large widgetic-radius">
+            <div class="flex flex-col items-center justify-center gap-1 p-2 text-center">
+              <span class="text-error">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path>
+                  <path d="M12 9v4"></path>
+                  <path d="M12 17h.01"></path>
+                </svg>
+              </span>
+              <span class="caption text-grey5">Failed to load</span>
+            </div>
+          </div>
+        `
+      };
+    }
+        
+    return {
+      html: `
+        <div class="flex items-center justify-center w-full h-full vector-img-container">
+          <img 
+            src="${vector.url}" 
+            alt="${vector.name}"
+            class="w-[72px] h-[72px] object-contain"
+            draggable="false"
+            onerror="this.style.display='none'; document.dispatchEvent(new CustomEvent('vector-load-error', {detail: this.alt, bubbles: true})); console.error('❌ [VectorInput] Vector failed to load:', this.alt, 'URL:', this.src);"
+          />
+        </div>
+      `
+    };
+  }
+  
+  function isVectorSelected(vector: VectorItem) {
+    return Boolean(value?.name === vector.name);
+  }
+  
+  function isCustomVector(vector: VectorItem) {
+    return vector.category === 'Mine' && Boolean(vector.isCustom);
+  }
+  
+  function getVectorKey(vector: VectorItem) {
+    // Create a unique key by combining name with URL or category
+    // This prevents duplicate keys when two vectors have the same name
+    return vector.url ? `${vector.name}-${vector.url}` : `${vector.name}-${vector.category}`;
+  }
+  
+  function handleVectorDelete(vector: VectorItem, event: Event) {
+    // Convert Event to MouseEvent or create a synthetic one if needed
+    const mouseEvent = event instanceof MouseEvent 
+      ? event 
+      : new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+          view: window
+        });
+    
+    handleTrashClick(vector, mouseEvent);
+  }
+
+  // Update when vector manager changes
+  $: if (vectorManagerInstance) {
+    hasMoreVectors = vectorManagerInstance.hasMoreVectors(controllerId, currentFilter);
+  }
+
+  // Add a handleSearchImmediate function to process search terms immediately without debounce
+  async function handleSearchImmediate(value: string) {
+    if (!searchTerm && value) {
+      // If this is a new search, save current filter
+      lastActiveFilter = currentFilter;
+      currentFilter = 'All'; // Reset to All when starting a search
+      if (browser) {
+        localStorage.setItem(VECTOR_FILTER_KEY(controllerId), 'All');
+      }
+    }
+    
+    // Just load the complete vector list if we're searching
+    const completeVectorList = await vectorManagerInstance?.getCompleteVectorList(true) || [];
+    allVectors = completeVectorList;
+    
+    // Apply filtering with the new search term
+    updateFilteredVectors();
+    
+    // Reset scroll position
+    if (vectorListContainer) {
+      vectorListContainer.scrollTop = 0;
+    }
+  }
+
+  // Update the paste handler to use handleSearchImmediate for immediate processing
+  function handlePaste(event: ClipboardEvent) {
+    const pastedText = event.clipboardData?.getData('text/plain') || '';
+    
+    // Don't prevent default - let the paste happen naturally
+    // Then trigger an immediate search update with the pasted content
+    // searchTerm will be updated through binding
+    
+    // Schedule the handleSearchImmediate for the next tick to ensure
+    // the input value is updated with the pasted content first
+    setTimeout(() => {
+      handleSearchImmediate(pastedText);
+    }, 0);
+  }
+
+  /**
+   * Preloads a batch of vectors to detect loading errors early
+   */
+  async function preloadVectors(vectors: VectorItem[]) {
+    const batchSize = 10;
+    const preloadChunks = (chunks: VectorItem[][]) => {
+      if (chunks.length === 0) return;
+      
+      const chunk = chunks.shift()!;
+      
+      // Process this chunk
+      chunk.forEach(vector => {
+        const img = new Image();
+        img.onload = () => {
+          // Successfully loaded
+        };
+        img.onerror = () => {
+          console.error(`❌ [VectorInput] Preload failed for vector: "${vector.name}" URL: ${vector.url}`);
+          svgLoadErrors.set(vector.name, true);
+          svgLoadErrors = new Map(svgLoadErrors);
+        };
+        img.src = vector.url;
+      });
+      
+      // Process next chunk after a small delay
+      if (chunks.length > 0) {
+        setTimeout(() => preloadChunks(chunks), 100);
+      }
+    };
+    
+    // Split vectors into batches to avoid overwhelming the browser
+    const chunks: VectorItem[][] = [];
+    for (let i = 0; i < vectors.length; i += batchSize) {
+      chunks.push(vectors.slice(i, i + batchSize));
+    }
+    
+    // Start preloading
+    preloadChunks(chunks);
+  }
+</script>
+
+<div class="flex flex-col gap-2 widgetic-colors">
+  <div class="flex items-center w-full relative">
+    <div class="w-[185px] flex-shrink-0 ml-auto">
+      <InputControllerHeader 
+        label={label}
+        helpText={description}
+      />
+    </div>
+    
+    <div class="absolute right-0">
+      <div 
+        class="h-[48px] w-[185px] rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green"
+        onfocusin={onFocus}
+      >
+        <Popover.Root 
+          open={$openDropdowns?.has(controllerId)}
+          onOpenChange={(isOpen) => {
+            if (isOpen !== $openDropdowns?.has(controllerId)) {
+              if (isOpen) {
+                // Check if the selected vector image is valid
+                if (value?.name && value.url) {
+                  // Create a temporary image to test if it loads
+                  const testImg = new Image();
+                  testImg.onload = () => {
+                    // Remove from error list if it was there
+                    if (hasSvgLoadError(value.name)) {
+                      svgLoadErrors.delete(value.name);
+                      svgLoadErrors = new Map(svgLoadErrors);
+                      console.log(`✅ [VectorInput] Vector now loads successfully: ${value.name}`);
+                    }
+                  };
+                  testImg.onerror = () => {
+                    // Mark as error if it fails to load
+                    if (!hasSvgLoadError(value.name)) {
+                      svgLoadErrors.set(value.name, true);
+                      svgLoadErrors = new Map(svgLoadErrors);
+                      console.error(`❌ [VectorInput] Current vector failed to load: ${value.name}, URL: ${value.url}`);
+                    }
+                  };
+                  testImg.src = value.url;
+                }
+              } else if (!isOpen && value?.name) {
+                vectorUtils.addRecentVector({
+                  name: value.name,
+                  category: vectorCategories.normalize(value.category) as VectorItem['category'],
+                  url: value.url,
+                  isCustom: vectorManagerInstance?.isCustomVector(value.name) || false
+                });
+              }
+              
+              toggleDropdown(controllerId);
+            }
+          }}
+        >
+          <Popover.Trigger 
+            class="w-full h-full flex items-center border-0 bg-transparent hover:bg-transparent focus:bg-transparent pl-3 pr-[16px] group"
+            onclick={handleButtonClick}
+            onkeydown={handleKeyDown}
+            onmouseenter={() => {
+              // Preload vectors when hovering over the button
+              // This reduces the delay when actually clicking to open
+              if (!$openDropdowns?.has(controllerId) && filteredVectors.length === 0 && allVectors.length > 0) {
+                updateFilteredVectors();
+                // console.log('🔄 [VectorInput] Preloading vectors on hover');
+              }
+            }}
+            aria-expanded={open}
+            aria-haspopup="listbox"
+            aria-controls={`vector-list-${controllerId}`}
+          >
+            <div class="flex items-center gap-2 truncate flex-1">
+              {#if value?.url}
+                {#if hasSvgLoadError(value.name)}
+                  <div class="w-5 h-5 flex items-center justify-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-error">
+                      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path>
+                      <path d="M12 9v4"></path>
+                      <path d="M12 17h.01"></path>
+                    </svg>
+                  </div>
+                  <span class="truncate text-left capitalize subtext text-grey7">
+                    {value?.name || "Select vector..."}
+                  </span>
+                {:else}
+                  <!-- Use a simple img tag with Svelte action for error handling -->
+                  <img 
+                    src={value.url} 
+                    alt={value.name}
+                    class="w-5 h-5 object-contain"
+                    use:handleImageError={value.name}
+                  />
+                  <span class="truncate text-left capitalize subtext text-grey7">
+                    {value?.name || "Select vector..."}
+                  </span>
+                {/if}
+              {:else}
+                <span class="truncate text-left subtext text-grey7">
+                  Select vector...
+                </span>
+              {/if}
+            </div>
+            <IconCaretDownFilled class="w-5 h-5 shrink-0 text-grey5 group-hover:text-grey7" />
+          </Popover.Trigger>
+
+          <Popover.Content class="vector-input-popover w-[374px] h-[565px] !p-0 widgetic-colors widgetic-radius rounded-medium modal-shadow border border-grey2">
+            <div class="flex flex-col h-full vector-popover-content">
+              <!-- Title and upload icon -->
+              <div class="relative pt-6 pb-[8px] px-4">
+                <div class="h5 text-grey7 widgetic-colors">Vectors</div>
+                <button 
+                  type="button" 
+                  class="absolute right-6 top-[26px] bg-transparent border-0 cursor-pointer p-0 rounded-full hover:bg-grey3 transition-all duration-300"
+                  onclick={() => {
+                    try {
+                      openFileBrowser();
+                    } catch (error) {
+                      console.error('Error opening file browser:', error);
+                    }
+                  }}
+                >
+                  <IconCloudUpload class="w-6 h-6 text-grey7 hover:text-grey7 transition-colors duration-300 widgetic-colors" />
+                </button>
+              </div>
+
+              {#if description}
+                <p class="px-4 -mt-2 mb-2 subtext text-grey5">{description}</p>
+              {/if}
+
+              <!-- Search input -->
+              <div class="relative px-4">
+                <SearchInput
+                  placeholder="Search vectors..."
+                  bind:value={searchTerm}
+                  onInput={(e: Event) => {
+                    // Use debounced search for better performance
+                    debouncedSearch(e);
+                  }}
+                  onKeydown={handleSearchKeydown}
+                  onPaste={handlePaste}
+                  onClear={() => {
+                    searchTerm = ''; // Reset search term
+                    
+                    // Restore the previous filter when clearing search
+                    currentFilter = lastActiveFilter;
+                    if (browser) {
+                      localStorage.setItem(VECTOR_FILTER_KEY(controllerId), lastActiveFilter);
+                    }
+                    
+                    // Reset batch index to start fresh
+                    if (vectorManagerInstance) {
+                      vectorManagerInstance.resetBatchIndex(controllerId);
+                    
+                      // Get vectors for current category
+                      let vectors: VectorData[] = [];
+                      
+                      try {
+                        if (currentFilter === 'All') {
+                          // Get standard vectors first - add null check
+                          const standardVectors = vectorManagerInstance.getCachedVectorList()
+                            ?.filter(vector => !vector.isCustom)
+                            ?.slice(0, VectorManager.initialVectorNumber) || [];
+                          
+                          // Get custom vectors - add null check
+                          const customVectors = vectorManagerInstance.getCachedVectorList()
+                            ?.filter(vector => vector.isCustom) || [];
+                          
+                          // Combine them with custom vectors at the end
+                          vectors = [...standardVectors, ...customVectors];
+                        } else if (currentFilter === 'Mine') {
+                          vectors = vectorManagerInstance.getPreloadedVectors(currentFilter as VectorItem['category']);
+                        } else {
+                          // For other categories, filter out custom vectors
+                          vectors = vectorManagerInstance.getPreloadedVectors(currentFilter as VectorItem['category'])
+                            .filter(vector => !vector.isCustom);
+                        }
+                      } catch (error) {
+                        console.error('❌ [VectorSearch] Error getting cached vectors:', error);
+                        vectors = [];
+                      }
+                      
+                      // Update all vectors
+                      allVectors = vectors;
+                      
+                      // Update filtered vectors directly to ensure UI updates
+                      updateFilteredVectors();
+                    }
+                    
+                    // Reset scroll position
+                    if (vectorListContainer) {
+                      vectorListContainer.scrollTop = 0;
+                    }
+                    
+                    // Ensure the observer is set up after the DOM updates
+                    setTimeout(() => {
+                      setupVectorObserver();
+                      console.log('🔄 [VectorSearch] Observer setup after search clear');
+                    }, 50);
+                    
+                    console.log('🔄 [VectorSearch] Search cleared');
+                  }}
+                />
+              </div>
+
+              <!-- Filter toggle group - sticky header -->
+              {#if !searchTerm}
+                <div class="sticky top-0 bg-white z-10">
+                  <CategoryTabs
+                    categories={filterOptions}
+                    activeCategory={currentFilter}
+                    onCategorySelect={handleFilterChange}
+                    filterVisible={!searchTerm}
+                  />
+                </div>
+              {/if}
+
+              <!-- Scrollable content -->
+              <div 
+                class="flex-1 {filteredVectors.length > 0 ? 'overflow-y-auto' : 'overflow-hidden'} min-h-0 vector-list-container"
+                bind:this={vectorListContainer}
+                onscroll={(e: Event) => {
+                  e.stopPropagation();
+                  handleVectorListScroll(e);
+                  updateScrollState();
+                }}
+                id={`vector-list-${controllerId}`}
+                role="listbox"
+                aria-label="Vector list"
+              >
+                <div class="space-y-0">
+                  <!-- Recently used section - only show when not searching -->
+                  {#if recentVectors.length > 0 && !searchTerm}
+                    <RecentItemsSection
+                      recentItems={recentVectors}
+                      title="Recently used"
+                      onItemSelect={handleVectorSelect}
+                      onItemDelete={handleVectorDelete}
+                      isItemSelected={isVectorSelected}
+                      renderItem={renderVectorItem}
+                      isCustomItem={isCustomVector}
+                      getItemKey={getVectorKey}
+                      observeItem={observeVector}
+                      displayMode="grid"
+                      hideTrashIcon={hideTrashIcon}
+                      itemType="vector"
+                    />
+                  {/if}
+
+                  <!-- All vectors section -->
+                  <div class="mt-6 mb-0">
+                    {#if filteredVectors.length > 0}
+                      <div id="vector-header-{controllerId}" class="sticky top-0 -mt-2 bg-white z-10 pt-2 {isScrolled ? 'border-b border-grey2' : 'border-b border-transparent'} transition-border">
+                        <h3 class="subtext text-grey7 px-4 pb-2">
+                          {searchTerm ? 'Search results' : 'More'}
+                        </h3>
+                      </div>
+                    {/if}
+                    
+                    {#if filteredVectors.length === 0}
+                      <div class="empty-state-wrapper">
+                        <EmptyState 
+                          message={searchTerm ? 'No vectors found' : 'No vectors available'} 
+                          height="auto"
+                        />
+                      </div>
+                    {:else}
+                      <ItemGrid
+                        items={filteredVectors}
+                        containerRef={(node) => { vectorListContainer = node; }}
+                        onItemSelect={handleVectorSelect}
+                        isItemSelected={isVectorSelected}
+                        renderItem={renderVectorItem}
+                        getItemKey={getVectorKey}
+                        observeItem={observeVector}
+                        loadingMore={loadingMoreVectors}
+                        hasMoreItems={hasMoreVectors}
+                        loadNextBatch={() => {
+                          if (!isLoadingBatch && vectorManagerInstance?.hasMoreVectors(controllerId, currentFilter)) {
+                            loadNextBatch();
+                          }
+                        }}
+                        layoutClass="grid-cols-3"
+                        itemType="vector"
+                      />
+                    {/if}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Popover.Content>
+        </Popover.Root>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Update button styles */
+  :global(button.bg-transparent) {
+    background: transparent !important;
+    border: none !important;
+  }
+
+  :global(button.bg-transparent:hover),
+  :global(button.bg-transparent:focus) {
+    background-color: transparent !important;
+  }
+
+  /* Add transition only for border appearance */
+  :global(.transition-border) {
+    transition: border-color 0.2s ease-in-out;
+  }
+
+  /* Keep scrollbar styles */
+  :global(.overflow-y-auto) {
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--grey3)) transparent;
+  }
+
+  /* Target specific elements */
+  :global(.vector-input-wrapper:hover ~ .vector-input-wrapper .group-hover\\:underline) {
+    text-decoration: none;
+  }
+
+  :global(.vector-input-wrapper:hover ~ .vector-input-wrapper) {
+    pointer-events: none;
+  }
+  
+  /* Custom styling for vector items in grid - moved to RecentItemsSection.svelte */
+  
+  /* Ensure vector list container properly handles scroll events */
+  :global(.vector-list-container) {
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--grey3)) transparent;
+    will-change: transform;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+  }
+  
+  /* Ensure popover content stays open during scrolling */
+  :global(.vector-input-popover) {
+    z-index: 50;
+    will-change: transform;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+  }
+  
+  /* Optimize vector popover content rendering */
+  :global(.vector-popover-content) {
+    will-change: transform;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+  }
+  
+  /* Prevent scrolling when showing empty state */
+  .empty-state-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    padding-top: 60px; /* Add padding to account for the header */
+    padding-bottom: 60px; /* Balance the padding */
+  }
+</style>
+