@widgetic/editor 3.11.3 → 4.0.1

package/dist/components/ic/FontInputController.svelte

@@ -0,0 +1,2062 @@
+<!--
+ * FontInputController Component
+ * A dual-input controller for font family and weight selection with Google Fonts integration.
+ * 
+ * Features:
+ * - Font family selection with preview
+ * - Font weight selection based on available variants
+ * - Real-time search with highlighting
+ * - Category filtering (Serif, Sans Serif, Script, Other)
+ * - Recently used fonts tracking (up to 3 fonts)
+ * - Performance-optimized font loading
+ * - Custom font support via file browser
+ * 
+ * Performance optimizations:
+ * - Lazy loads fonts only when visible in viewport
+ * - Delays font loading until scrolling stops (1 second delay)
+ * - Preloads default font on mount
+ * - Uses font-display: swap for better loading UX
+-->
+
+<script lang="ts">
+  // Svelte imports
+  import { onMount, onDestroy, tick } from 'svelte';
+  const browser = typeof window !== 'undefined';
+
+  // Shadcn Compound Components 
+  import { Popover, Command, EmptyState } from '@widgetic/design-system/components';
+
+  // Tabler Icons
+  import { Check, IconCloudUpload, IconCaretDownFilled, IconArrowDown, IconArrowUp } from '@widgetic/design-system/icons';
+
+  // Asset imports
+  import icTrash from '../../assets/icons/trash.svg?url';
+  import fontsJsonUrl from '../../assets/fonts.json?url';
+
+  // Config imports
+  import { config as appConfig } from '../../config';
+  import { 
+    fontUtils, 
+    fontCategories, 
+    type FontItem, 
+    type RecentFont, 
+    recentFontsStore 
+  } from '../../utils/fontUtils';
+  import type { FontData } from '../../utils/FontManager';
+  import FontManager, { mapGoogleVariantIdsToWeightNames } from '../../utils/FontManager';
+  
+  import { shouldSkipFont } from '../../utils/skipFonts';
+
+  import { InputControllerHeader } from './index';
+
+  // Import shared components
+  import { SearchInput } from '@widgetic/design-system/components';
+  import CategoryTabs from './shared/CategoryTabs.svelte';
+  import { RecentItemsSection, ItemGrid } from './shared';
+
+
+  const FONT_FILTER_KEY = (id: string) => `font-specific-filter-state-${id}`;
+  const FONT_WEIGHT_KEY = (id: string) => `font-weight-state-${id}`;
+  const MAX_RECENT_FONTS = 3;
+
+  // Then continue with the rest of the declarations
+  type FilterType = typeof fontCategories.types[number];
+  let currentFilter: FilterType = 'All'; // Default to 'All'
+  let lastActiveFilter: FilterType = 'All'; // Add this declaration
+  let filterOptions: FilterType[] = [...fontCategories.types];
+
+  /**
+   * Component Props
+   * @prop {string} label - Display label for the font selector
+   * @prop {string} value - Currently selected font family
+   * @prop {Function} onChange - Callback when font selection changes
+   * @prop {InputControllerConfig} config - Configuration options
+   * @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: { family: string; weight: string; category: string } | null = null;
+  export let onChange: ((newValue: { family: string; weight: string; category: string }) => void) | undefined = undefined;
+  export let description: string | undefined = undefined;
+  export let controllerId: string;
+  export let openDropdowns: any;
+  export let toggleDropdown: (id: string) => void;
+
+  // Initialize timeouts
+  let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  
+  // Font weight state - remove localStorage check on init
+  let selectedWeight = `${controllerId}-Regular`;
+  let availableWeights: string[] = [];
+  
+  // Font search and filter state
+  let allFonts: FontItem[] = [];
+  let recentFonts: FontItem[] = [];
+  let filteredFonts: FontData[] = [];
+  let searchTerm = '';
+  let initialFontNumber = FontManager.initialFontNumber;
+  const SEARCH_BATCH_SIZE = FontManager.BATCH_SIZE;
+
+  // Font loading optimization
+  let fontListContainer: HTMLElement;
+  let fontObserver = new IntersectionObserver(() => {});
+  
+  // Initialize FontManager instance
+  let fontManagerInstance: FontManager;
+  let buttonWidth = 0;
+
+  // Add these variables for search
+  let activeSearchIndex = -1;
+
+  // Add loading state
+  let isLoadingBatch = false;
+  let isInitialLoading = true; // Start with loading state true
+
+  // Add new prop for controlling font list behavior
+  export let hideRecentFromList: boolean = false;
+  export let hideTrashIcon: boolean = true;
+
+  // Add scroll state tracking
+  let isScrolled = false;
+
+  // Add a timeout to track long-running initial loads
+  let initialLoadTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  // Function to update scroll state
+  function updateScrollState() {
+    if (fontListContainer) {
+      const wasScrolled = isScrolled;
+      isScrolled = fontListContainer.scrollTop > 10;
+      
+      // If we're transitioning from scrolled to not scrolled, remove transition
+      if (wasScrolled && !isScrolled) {
+        const stickyHeader = document.querySelector(`#font-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(`#font-header-${controllerId}`);
+        if (stickyHeader) {
+          stickyHeader.classList.add('transition-border');
+        }
+      }
+    }
+  }
+
+  // Subscribe to store changes
+  $: {
+    recentFonts = $recentFontsStore
+      .filter(font => !shouldSkipFont(font.family))
+      .map(font => ({
+        family: font.family,
+        category: normalizeCategory(font.category) as FontItem['category'],
+        isCustom: font.isCustom
+      }));
+    
+    // Update filtered fonts when recent fonts change
+    if (hideRecentFromList) {
+      updateFilteredFonts();
+    }
+  }
+
+  // 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;
+      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;
+
+  onMount(async () => {
+    try {
+      if (browser) {
+        // If we have an initial value, use its weight
+        if (value?.weight) {
+          selectedWeight = `${controllerId}-${value.weight}`;
+        }
+        
+        // Load saved filter
+        const savedFilter = localStorage.getItem(FONT_FILTER_KEY(controllerId));
+        if (savedFilter) {
+          currentFilter = savedFilter as FilterType;
+        }
+
+        // Load saved weight
+        const savedWeight = localStorage.getItem(FONT_WEIGHT_KEY(controllerId));
+        if (savedWeight) {
+          selectedWeight = savedWeight;
+        }
+      }
+
+      // console.log('🚀 [FontInput] Initializing controller:', {
+      //   controllerId,
+      //   initialFilter: currentFilter
+      // });
+      
+      // Initialize the debounced search function early
+      debouncedSearch = debounce(async (event: Event) => {
+        await handleSearch(event);
+      }, 300); // 300ms debounce time
+      
+      // Start font manager initialization in parallel
+      const fontManagerPromise = FontManager.getInstance(appConfig.GOOGLE_FONTS_API_KEY);
+      
+      // Load and verify recent fonts while waiting for font manager
+      const loadedRecentFonts = fontUtils.getRecentFonts();
+      // console.log('📝 [FontInput] Loading recent fonts:', loadedRecentFonts);
+
+      // Filter and validate recent fonts
+      const validRecentFonts = loadedRecentFonts
+        .filter(font => !shouldSkipFont(font.family))
+        .slice(0, MAX_RECENT_FONTS);
+
+      // Update store with validated fonts
+      recentFontsStore.set(validRecentFonts);
+      
+      // Update local state
+      recentFonts = validRecentFonts.map(font => ({
+        family: font.family,
+        category: normalizeCategory(font.category) as FontItem['category'],
+        isCustom: font.isCustom
+      }));
+
+      // console.log('✅ [FontInput] Recent fonts initialized:', {
+      //   loaded: loadedRecentFonts.length,
+      //   valid: validRecentFonts.length,
+      //   fonts: validRecentFonts.map(f => f.family)
+      // });
+      
+      // Now wait for font manager to be ready
+      fontManagerInstance = await fontManagerPromise;
+      
+      // Try to get preloaded fonts immediately
+      let preloadedFonts: FontData[] = [];
+      
+      // Check if we can get preloaded fonts for the current category
+      if (currentFilter !== 'All' && currentFilter !== 'Mine') {
+        // console.log(`🔍 [FontInput:${controllerId}] Getting preloaded fonts for category:`, currentFilter);
+        preloadedFonts = fontManagerInstance.getPreloadedFonts(currentFilter as FontItem['category']);
+        
+        if (preloadedFonts.length > 0) {
+          // console.log(`✅ [FontInput:${controllerId}] Using preloaded fonts for initial display:`, {
+          //   category: currentFilter,
+          //   count: preloadedFonts.length,
+          //   fonts: preloadedFonts.slice(0, 3).map(f => f.family)
+          // });
+          
+          // Filter out fonts that should be skipped
+          const filteredPreloadedFonts = preloadedFonts.filter(font => !shouldSkipFont(font.family));
+          
+          // Update allFonts with preloaded fonts
+          allFonts = filteredPreloadedFonts;
+          
+          // Update filtered fonts immediately
+          updateFilteredFonts();
+          
+          // Only set loading to false if we have fonts to display
+          if (filteredFonts.length > 0) {
+            isInitialLoading = false;
+            // console.log(`✅ [FontInput:${controllerId}] Initial loading complete with preloaded fonts:`, {
+            //   filteredFonts: filteredFonts.length,
+            //   category: currentFilter
+            // });
+            
+            // Clear the timeout since we've loaded successfully
+            if (initialLoadTimeout) {
+              clearTimeout(initialLoadTimeout);
+              initialLoadTimeout = null;
+            }
+          }
+        } else {
+          // console.log(`⚠️ [FontInput:${controllerId}] No preloaded fonts available for category:`, currentFilter);
+        }
+      } else if (currentFilter === 'All') {
+        // console.log(`🔍 [FontInput:${controllerId}] Getting initial batch for All category`);
+        // For All category, get the first batch
+        preloadedFonts = fontManagerInstance.getNextBatch(controllerId, 'All');
+        
+        if (preloadedFonts.length > 0) {
+          // console.log(`✅ [FontInput:${controllerId}] Using initial batch for All category:`, {
+          //   count: preloadedFonts.length,
+          //   fonts: preloadedFonts.slice(0, 3).map(f => f.family)
+          // });
+          
+          // Filter out fonts that should be skipped
+          const filteredPreloadedFonts = preloadedFonts.filter(font => !shouldSkipFont(font.family));
+          
+          // Update allFonts with preloaded fonts
+          allFonts = filteredPreloadedFonts;
+          
+          // Update filtered fonts immediately
+          updateFilteredFonts();
+          
+          // Only set loading to false if we have fonts to display
+          if (filteredFonts.length > 0) {
+            isInitialLoading = false;
+            // console.log(`✅ [FontInput:${controllerId}] Initial loading complete for All category:`, {
+            //   filteredFonts: filteredFonts.length
+            // });
+            
+            // Clear the timeout since we've loaded successfully
+            if (initialLoadTimeout) {
+              clearTimeout(initialLoadTimeout);
+              initialLoadTimeout = null;
+            }
+          }
+        }
+      } else if (currentFilter === 'Mine') {
+        // console.log(`🔍 [FontInput:${controllerId}] Getting custom fonts for Mine category`);
+        // For Mine category, first check if we already have preloaded fonts
+        preloadedFonts = fontManagerInstance.getPreloadedFonts('Mine');
+        
+        if (preloadedFonts.length > 0) {
+          console.log(`✅ [FontInput:${controllerId}] Using preloaded custom fonts for Mine category:`, {
+            count: preloadedFonts.length,
+            fonts: preloadedFonts.slice(0, 3).map(f => f.family)
+          });
+        } else {
+          // If no preloaded fonts found, load them now
+          console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found, loading them now...`);
+          preloadedFonts = await fontManagerInstance.loadCustomFonts();
+        }
+        
+        if (preloadedFonts.length > 0) {
+          // Update allFonts with custom fonts
+          allFonts = preloadedFonts;
+          
+          // Update filtered fonts immediately
+          updateFilteredFonts();
+          
+          // Only set loading to false if we have fonts to display
+          if (filteredFonts.length > 0) {
+            isInitialLoading = false;
+            // console.log(`✅ [FontInput:${controllerId}] Initial loading complete for Mine category:`, {
+            //   filteredFonts: filteredFonts.length
+            // });
+            
+            // Clear the timeout since we've loaded successfully
+            if (initialLoadTimeout) {
+              clearTimeout(initialLoadTimeout);
+              initialLoadTimeout = null;
+            }
+          }
+        }
+      }
+      
+      // Only set loading state if we couldn't get preloaded fonts
+      if (preloadedFonts.length === 0) {
+        // console.log(`⚠️ [FontInput:${controllerId}] No preloaded fonts available, will load asynchronously`);
+        // Keep isInitialLoading as true
+        
+        // Set a timeout to show loading indicator if initialization takes too long
+        initialLoadTimeout = setTimeout(() => {
+          // If we're still loading after 1 second, show the loading indicator
+          if (isInitialLoading) {
+            // console.log(`⚠️ [FontInput:${controllerId}] Initial font loading taking longer than expected`);
+          }
+        }, 1000); // Reduced from 2000ms to 1000ms
+      }
+      
+      // Initialize fonts list with saved filter - use a separate async function
+      // to avoid blocking the UI
+      const initializeFontsAsync = async () => {
+        try {
+          // console.log(`🔄 [FontInput:${controllerId}] Starting font initialization for controller:`, controllerId);
+          
+          // First, ensure the FontManager is fully initialized
+          if (!FontManager.isInitialized) {
+            // console.log(`⏳ [FontInput:${controllerId}] Waiting for FontManager to initialize...`);
+            // This will wait for the initialization promise to resolve
+            await FontManager.getInstance(appConfig.GOOGLE_FONTS_API_KEY);
+          }
+          
+          // Skip loading if we already have preloaded fonts
+          if (allFonts.length === 0) {
+            // console.log(`🔍 [FontInput:${controllerId}] No fonts loaded yet, loading initial batch for ${currentFilter}`);
+            // Instead of loading all fonts, just get the first batch
+            let initialFonts: FontData[] = [];
+            
+            if (currentFilter === 'Mine') {
+              // For Mine category, first check if we have preloaded fonts
+              initialFonts = fontManagerInstance.getPreloadedFonts('Mine');
+              
+              if (initialFonts.length > 0) {
+                console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts:`, {
+                  count: initialFonts.length,
+                  fonts: initialFonts.slice(0, 3).map(f => f.family)
+                });
+              } else {
+                // If no preloaded fonts, load them now
+                console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found, loading them now...`);
+                initialFonts = await fontManagerInstance.loadCustomFonts();
+              }
+            } else if (currentFilter === 'All') {
+              // For All category, get the first batch
+              initialFonts = fontManagerInstance.getNextBatch(controllerId, 'All');
+              // console.log(`📚 [FontInput:${controllerId}] Loaded initial batch for All:`, {
+              //   count: initialFonts.length,
+              //   fonts: initialFonts.slice(0, 3).map(f => f.family)
+              // });
+            } else {
+              // For specific categories, first try to get preloaded fonts
+              initialFonts = fontManagerInstance.getPreloadedFonts(currentFilter as FontItem['category']);
+              
+              if (initialFonts.length === 0) {
+                // If no preloaded fonts, get the first batch filtered by category
+                // console.log(`📚 [FontInput:${controllerId}] No preloaded fonts for ${currentFilter}, getting batch`);
+                initialFonts = fontManagerInstance.getNextBatch(controllerId, currentFilter);
+              } else {
+                // console.log(`📚 [FontInput:${controllerId}] Using preloaded fonts for ${currentFilter}:`, {
+                //   count: initialFonts.length,
+                //   fonts: initialFonts.slice(0, 3).map(f => f.family)
+                // });
+              }
+            }
+            
+            // Filter out fonts that should be skipped
+            const filteredFonts = initialFonts.filter(font => !shouldSkipFont(font.family));
+            // console.log(`🔍 [FontInput:${controllerId}] Filtered initial fonts:`, {
+            //   before: initialFonts.length,
+            //   after: filteredFonts.length,
+            //   skipped: initialFonts.length - filteredFonts.length
+            // });
+            
+            // Update allFonts with just the initial batch
+            allFonts = filteredFonts;
+      
+            // Update filtered fonts immediately
+            updateFilteredFonts();
+          } else {
+            // console.log(`✅ [FontInput:${controllerId}] Already have fonts loaded:`, {
+            //   count: allFonts.length,
+            //   category: currentFilter
+            // });
+          }
+          
+          // Set loading to false after fonts are loaded
+          // Only set loading to false if we have fonts to display
+          if (filteredFonts.length > 0) {
+            isInitialLoading = false;
+            // console.log(`✅ [FontInput:${controllerId}] Initialization complete with fonts:`, {
+            //   count: filteredFonts.length,
+            //   category: currentFilter
+            // });
+          } else {
+            // console.log(`⚠️ [FontInput:${controllerId}] No fonts found after initialization`);
+            // Still set loading to false to show empty state
+            isInitialLoading = false;
+          }
+          
+          // Clear the timeout since we've loaded successfully
+          if (initialLoadTimeout) {
+            clearTimeout(initialLoadTimeout);
+            initialLoadTimeout = null;
+          }
+    
+          // console.log(`✅ [FontInput:${controllerId}] Controller initialized with fonts:`, {
+          //   controllerId,
+          //   allFonts: allFonts.length,
+          //   filteredFonts: filteredFonts.length,
+          //   recentFonts: recentFonts.length,
+          //   currentFilter,
+          //   customFonts: allFonts.filter(f => f.category === 'Mine').length
+          // });
+        } catch (error) {
+          console.error(`❌ [FontInput:${controllerId}] Error during async font initialization:`, error);
+          isInitialLoading = false; // Make sure to set loading to false even on error
+          
+          // Clear the timeout on error
+          if (initialLoadTimeout) {
+            clearTimeout(initialLoadTimeout);
+            initialLoadTimeout = null;
+          }
+        }
+      };
+      
+      // Start the async initialization without waiting for it
+      initializeFontsAsync();
+      
+    } catch (error) {
+      console.error('❌ [FontInput] Error during initialization:', error);
+      isInitialLoading = false; // Make sure to set loading to false even on error
+      
+      // Clear the timeout on error
+      if (initialLoadTimeout) {
+        clearTimeout(initialLoadTimeout);
+        initialLoadTimeout = null;
+      }
+    }
+  });
+  
+  /**
+   * Initialize fonts based on the current filter
+   */
+  async function initializeFonts() {
+    if (currentFilter === 'Mine') {
+      // First check if we have preloaded fonts
+      const preloadedCustomFonts = fontManagerInstance.getPreloadedFonts('Mine');
+      
+      if (preloadedCustomFonts.length > 0) {
+        console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts in initializeFonts:`, {
+          count: preloadedCustomFonts.length,
+          fonts: preloadedCustomFonts.slice(0, 3).map(f => f.family)
+        });
+        return preloadedCustomFonts;
+      } else {
+        // If no preloaded fonts, load them now
+        console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found in initializeFonts, loading them now...`);
+        const customFonts = await fontManagerInstance.loadCustomFonts();
+        return customFonts;
+      }
+    }
+
+    // For All category, load Google Fonts first, then get custom fonts (already preloaded or load them)
+    const googleFonts = await fontManagerInstance.getInitialFontList();
+    
+    // First check if we have preloaded custom fonts
+    let customFonts = fontManagerInstance.getPreloadedFonts('Mine');
+    
+    if (customFonts.length === 0) {
+      // If no preloaded custom fonts, load them now
+      customFonts = await fontManagerInstance.loadCustomFonts();
+    }
+    
+    if (currentFilter === 'All') {
+      return [
+        ...googleFonts.filter(font => !font.isCustom),
+        ...customFonts
+      ];
+    }
+    
+    // For other categories, filter out custom fonts
+    return googleFonts.filter(font => !font.isCustom);
+  }
+
+  /**
+   * Fetches available fonts from Google Fonts API
+   */
+  async function fetchGoogleFonts() {
+    try {
+      // console.log('🔍 [FontInput] Fetching Google Fonts...');
+      fontManagerInstance = await FontManager.getInstance(appConfig.GOOGLE_FONTS_API_KEY);
+      allFonts = await fontManagerInstance.getCompleteFontList();
+      updateFilteredFonts();
+      
+      // console.log('✅ [FontInput] Fonts available:', allFonts.length);
+    } catch (error) {
+      console.error('❌ [FontInput] Error getting Google Fonts:', error);
+    }
+  }
+
+  /**
+   * Opens the file browser for font selection
+   * Receives font files in the format matching fonts
+   */
+  async function openFileBrowser() {
+
+    // console.log('🔍 [FontInput] Opening file browser for fonts:');
+
+    // try {
+    //   // Get the current font's ID if it exists in our custom fonts
+    //   const selectedId = value?.family ? 
+    //     fontManagerInstance?.getCachedFontList()
+    //       .find(f => f.family === value.family && f.category === 'Mine')?.id 
+    //     : undefined;
+
+    //   console.log('🔍 [FontInput] Opening file browser for fonts:', {
+    //     fileTypes: ['font'],
+    //     selectedId
+    //   });
+
+    //   const result = await window.uiSDK?.mountComponent('file-browser', {
+    //     container: '#file-browser',
+    //     config: {
+    //       fileTypes: ['font'],
+    //       selectedId,
+    //       batch: 1000 // allow for a large number of fonts to be selected
+    //     },
+    //     callbacks: {
+    //       onSelect: async (fontData: any) => {
+    //         if (!fontData) return;
+            
+    //         const fontValue = {
+    //           family: fontData.family,
+    //           weight: fontData.weight,
+    //           category: 'Mine' // Set category to Mine for uploaded fonts
+    //         };
+
+    //         console.log('✅ [FontInput] Font selected:', {
+    //           ...fontValue,
+    //           format: fontData.url.split('.').pop()
+    //         });
+
+    //         if (onChange) {
+    //           onChange(fontValue);
+    //         }
+    //       },
+    //       onError: (error: Error) => {
+    //         console.error('❌ [FontInput] File Browser error:', error);
+    //       }
+    //     }
+    //   });
+
+    // } catch (error) {
+    //   console.error('❌ [FontInput] Error opening file browser:', error);
+    // }
+  }
+
+
+  /**
+   * Updates the filtered fonts list based on search term and category
+   * Also handles setting up the observer after updating
+   * 
+   * Logic flow:
+   * 1. Start with all fonts
+   * 2. Apply search filter if term exists
+   * 3. Apply category filter if not 'All'
+   */
+  function updateFilteredFonts() {
+    let fonts = [...allFonts];
+    
+    // Clear both filters when search is active
+    if (searchTerm) {
+        const term = searchTerm.toLowerCase();
+        fonts = fonts.filter(font => 
+            font.family.toLowerCase().includes(term)
+        );
+        
+        // Force category to All when searching
+        currentFilter = 'All';
+    } else {
+        if (currentFilter !== 'All') {
+            fonts = fonts.filter(font => {
+                if (currentFilter === 'Mine') return font.category === 'Mine';
+                return normalizeCategory(font.category) === currentFilter;
+            });
+        }
+    }
+
+    // Optionally filter out recent fonts
+    if (hideRecentFromList) {
+      const beforeRecent = fonts.length;
+      fonts = fonts.filter(font => 
+        !recentFonts.some(recent => recent.family === font.family)
+      );
+      // console.log(`🔍 [FontInput:${controllerId}] Filtered out recent fonts:`, {
+      //   beforeFilter: beforeRecent,
+      //   afterFilter: fonts.length,
+      //   recentFontsRemoved: beforeRecent - fonts.length
+      // });
+    }
+
+    // Update filtered fonts
+    filteredFonts = fonts;
+    
+    // console.log(`✅ [FontInput:${controllerId}] Filtered fonts result:`, {
+    //   total: fonts.length,
+    //   filter: currentFilter,
+    //   searchTerm,
+    //   hideRecentFromList,
+    //   recentFontsHidden: hideRecentFromList ? recentFonts.length : 0,
+    //   initialFontNumber
+    // });
+    
+    // Setup observer after updating filtered fonts
+    // Use a small timeout to ensure the DOM has updated
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout);
+    }
+    
+    scrollTimeout = setTimeout(() => {
+      setupFontObserver();
+    }, 50);
+  }
+
+  /**
+   * Handles font selection and updates recent fonts
+   */
+  function handleFontSelect(font: FontItem | RecentFont) {
+    if (onChange) {
+      // Reset weight to Regular or first available weight
+      fetchFontWeights(font.family).then(async () => {
+        const newWeight = availableWeights.includes('Regular') ? 
+          'Regular' : availableWeights[0];
+
+        selectedWeight = `${controllerId}-${newWeight}`;
+        if (browser) {
+          localStorage.setItem(FONT_WEIGHT_KEY(controllerId), selectedWeight);
+        }
+
+        // Load the full font when selected
+        if (!fontManagerInstance?.isCustomFont(font.family)) {
+          await fontManagerInstance?.loadFullFont(font.family);
+        }
+
+        // Create the font value object with reset weight
+        const fontValue = {
+          family: font.family,
+          weight: newWeight,
+          category: font.category
+        };
+        
+        // Pass the font value object to onChange
+        onChange(fontValue);
+
+        // console.log('✅ [FontInput] Font selected:', {
+        //   font: fontValue
+        // });
+      });
+    }
+  }
+
+  /**
+   * Manages real-time search functionality
+   * Prioritizes recent fonts in search results
+   * Enhanced to better handle partial matches
+   */
+  async function handleSearch(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const newSearchTerm = input.value;
+    
+    // Skip processing if the search term hasn't changed
+    if (newSearchTerm === searchTerm) return;
+    
+    // Use debounced version only for typing
+    debouncedSearch(event);
+  }
+
+  // Add paste handler
+  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);
+  }
+
+  // Separate immediate search handler (keep this)
+  async function handleSearchImmediate(value: string) {
+    // Store current filter before overriding it
+    if (!searchTerm && value) {
+      lastActiveFilter = currentFilter;
+      currentFilter = 'All';
+      localStorage.setItem(FONT_FILTER_KEY(controllerId), 'All');
+    }
+    
+    // Apply filtering with the new search term
+    updateFilteredFonts();
+    
+    // Reset scroll position if needed
+    if (fontListContainer) {
+      fontListContainer.scrollTop = 0;
+    }
+  }
+
+  // Add a derived store for search results
+  let currentSearchResults: FontData[] = [];
+
+  // Update the reactive statement for search
+  $: if (searchTerm) {
+    const searchValue = searchTerm.toLowerCase().trim();
+    // Only process if the search value is not empty
+    if (searchValue) {
+      // Get both Google Fonts and custom fonts from cache
+      const googleFonts = fontManagerInstance?.getCachedFontList().filter(font => !font.isCustom) || [];
+      const customFonts = fontManagerInstance?.getCachedFontList().filter(font => font.isCustom) || [];
+      
+      // Merge both lists
+      const allCachedFonts = [...googleFonts, ...customFonts];
+      
+      // Modified search algorithm to use exact matching
+      const newSearchResults = allCachedFonts
+        .filter(font => {
+          const familyLower = font.family.toLowerCase().trim();
+          
+          // Skip fonts that should be excluded
+          if (shouldSkipFont(font.family)) {
+            return false;
+          }
+          
+          // Check if the search value is found in the font family
+          return familyLower.includes(searchValue);
+        })
+        .sort((a, b) => {
+          const aFamily = a.family.toLowerCase();
+          const bFamily = b.family.toLowerCase();
+          
+          // Prioritize fonts that start with the search term
+          const aStartsWith = aFamily.startsWith(searchValue);
+          const bStartsWith = bFamily.startsWith(searchValue);
+          
+          if (aStartsWith && !bStartsWith) return -1;
+          if (!aStartsWith && bStartsWith) return 1;
+          
+          // Then prioritize fonts where search term appears earlier
+          const aIndex = aFamily.indexOf(searchValue);
+          const bIndex = bFamily.indexOf(searchValue);
+          
+          if (aIndex !== -1 && bIndex !== -1) {
+            return aIndex - bIndex;
+          }
+          
+          // Fall back to alphabetical sorting
+          return aFamily.localeCompare(bFamily);
+        });
+
+      // 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 only if we have results and no item is currently selected
+        if (currentSearchResults.length > 0 && activeSearchIndex === -1) {
+          activeSearchIndex = 0;
+        }
+        
+        // Show more initial results (double the default)
+        const initialResultsCount = Math.min(FontManager.initialFontNumber * 2, currentSearchResults.length);
+        filteredFonts = currentSearchResults.slice(0, initialResultsCount);
+
+        // Reset scroll position
+        if (fontListContainer) {
+          fontListContainer.scrollTop = 0;
+        }
+
+        // Preload only the first batch of fonts
+        filteredFonts.forEach(font => {
+          fontManagerInstance?.loadFullFont(font.family);
+        });
+        
+        //  console.log('📝 [FontSearch] Updated results:', {
+        //   searchValue,
+        //   totalMatches: currentSearchResults.length,
+        //   displayedResults: filteredFonts.length,
+        //   activeIndex: activeSearchIndex
+        // });
+      }
+    }
+  }
+  
+  // 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 fonts
+    if (currentSearchResults.length > 0 || filteredFonts.length === 0) {
+      // console.log('🔄 [FontSearch] Handling empty search term');
+      
+      // Reset search state
+      currentSearchResults = [];
+      activeSearchIndex = -1;  // Reset active index
+      
+      // Reset batch index to start fresh
+      if (fontManagerInstance) {
+        fontManagerInstance.resetBatchIndex(controllerId);
+        
+        // Get fonts for current category
+        let fonts: FontData[] = [];
+        
+        if (currentFilter === 'All') {
+          // Get initial batch of fonts instead of all fonts
+          fonts = fontManagerInstance.getNextBatch(controllerId, currentFilter);
+          // Update all fonts
+          allFonts = fonts;
+          // Update filtered fonts
+          filteredFonts = [];
+          updateFilteredFonts();
+        } else if (currentFilter === 'Mine') {
+          // For Mine category, first check if we have preloaded fonts
+          const preloadedCustomFonts = fontManagerInstance.getPreloadedFonts('Mine');
+          
+          if (preloadedCustomFonts.length > 0) {
+            // Use preloaded custom fonts
+            console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts for empty search:`, {
+              count: preloadedCustomFonts.length,
+              fonts: preloadedCustomFonts.slice(0, 3).map(f => f.family)
+            });
+            allFonts = preloadedCustomFonts;
+            filteredFonts = [];
+            updateFilteredFonts();
+          } else {
+            // If no preloaded fonts, load them asynchronously
+            console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found for empty search, loading them now...`);
+            fontManagerInstance.loadCustomFonts().then(customFonts => {
+              allFonts = customFonts || [];
+              filteredFonts = [];
+              updateFilteredFonts();
+            });
+          }
+        } else {
+          // For other categories (Serif, Sans Serif, etc.), get initial batch by category
+          fonts = fontManagerInstance.getNextBatch(controllerId, currentFilter);
+          // Update all fonts
+          allFonts = fonts;
+          // Update filtered fonts
+          filteredFonts = [];
+          updateFilteredFonts();
+        }
+      }
+      
+      // Reset scroll position when clearing search (for non-Mine categories)
+      if (currentFilter !== 'Mine' && fontListContainer) {
+        fontListContainer.scrollTop = 0;
+      }
+      
+      // Setup observer in next tick for non-Mine categories
+      if (currentFilter !== 'Mine') {
+        if (scrollTimeout) {
+          clearTimeout(scrollTimeout);
+        }
+        
+        scrollTimeout = setTimeout(() => {
+          if (fontListContainer) {
+            setupFontObserver();
+          }
+        }, 50);
+      }
+      
+      // console.log('🔄 [FontSearch] Reset search state:', {
+      //   currentFilter,
+      //   allFonts: allFonts.length,
+      //   filteredFonts: filteredFonts.length
+      // });
+    }
+  }
+
+  // Update keyboard navigation to use filteredFonts
+  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 (!filteredFonts.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();
+      handleFontSelect(filteredFonts[activeSearchIndex]);
+    }
+  }
+
+  async function handleFilterChange(filter: FilterType) {
+    if (currentFilter !== filter) {
+        lastActiveFilter = filter; // Store the new filter as last active
+        currentFilter = filter;
+        
+        if (browser) {
+            localStorage.setItem(FONT_FILTER_KEY(controllerId), filter);
+        }
+        
+        if (fontManagerInstance) {
+            fontManagerInstance.resetBatchIndex(controllerId);
+            
+            try {
+                // console.log(`🔄 [FontInput:${controllerId}] Category changed to:`, filter);
+                let fonts: FontData[] = [];
+                
+                if (filter === 'All') {
+                    // Get initial batch of fonts instead of all fonts
+                    fonts = fontManagerInstance.getNextBatch(controllerId, filter);
+                    // console.log(`📚 [FontInput:${controllerId}] Loaded initial batch for All category:`, {
+                    //   count: fonts.length,
+                    //   fonts: fonts.slice(0, 3).map(f => f.family)
+                    // });
+                } else if (filter === 'Mine') {
+                    // Check if custom fonts are already loaded by getting them from the FontManager instance
+                    fonts = fontManagerInstance.getPreloadedFonts('Mine');
+                    
+                    if (fonts.length === 0) {
+                        // If no preloaded custom fonts found, load them
+                        console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found, loading them now...`);
+                        fonts = await fontManagerInstance.loadCustomFonts();
+                    } else {
+                        console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts:`, {
+                            count: fonts.length,
+                            fonts: fonts.slice(0, 3).map(f => f.family)
+                        });
+                    }
+                } else {
+                    // For other categories, first try to get preloaded fonts
+                    fonts = fontManagerInstance.getPreloadedFonts(filter as FontItem['category']);
+                    
+                    if (fonts.length > 0) {
+                        // console.log(`📚 [FontInput:${controllerId}] Using preloaded fonts for ${filter}:`, {
+                        //   count: fonts.length,
+                        //   fonts: fonts.slice(0, 3).map(f => f.family)
+                        // });
+                    } else {
+                        // If no preloaded fonts, get the first batch filtered by category
+                        // console.log(`📚 [FontInput:${controllerId}] No preloaded fonts for ${filter}, getting batch`);
+                        fonts = fontManagerInstance.getNextBatch(controllerId, filter);
+                    }
+                }
+                
+                // Filter out fonts that should be skipped
+                const filteredFonts = fonts.filter(font => !shouldSkipFont(font.family));
+                // console.log(`🔍 [FontInput:${controllerId}] Filtered fonts after category change:`, {
+                //   before: fonts.length,
+                //   after: filteredFonts.length,
+                //   skipped: fonts.length - filteredFonts.length
+                // });
+                
+                allFonts = filteredFonts;
+                updateFilteredFonts();
+                
+                // Setup observer in next tick
+                scrollTimeout = setTimeout(() => {
+                    if (fontListContainer) {
+                        setupFontObserver();
+                    }
+                }, 0);
+                
+                if (fontListContainer) {
+                    fontListContainer.scrollTop = 0;
+                }
+
+                // console.log(`✅ [FontInput:${controllerId}] Category change complete:`, {
+                //   filter,
+                //   fonts: allFonts.length,
+                //   filteredFonts: filteredFonts.length,
+                //   customFonts: allFonts.filter(f => f.isCustom).length
+                // });
+            } catch (error) {
+                console.error(`❌ [FontInput:${controllerId}] Error changing category:`, error);
+            }
+        }
+    }
+  }
+  /**
+   * Manages intersection observer for lazy loading fonts
+   * Only loads fonts when they become visible in viewport
+   */
+  function setupFontObserver() {
+    if (!fontListContainer) {
+      // console.log(`⚠️ [FontInput:${controllerId}] Font list container not found, retrying...`);
+      return scrollTimeout = setTimeout(() => {
+        if (fontListContainer) {
+          setupFontObserver();
+        }
+      }, 50);
+    }
+
+    // If we have no fonts to observe, try to update filtered fonts first
+    if (!filteredFonts.length) {
+      // console.log(`⚠️ [FontInput:${controllerId}] No fonts available to observe, updating filtered fonts`);
+      updateFilteredFonts();
+      
+      // If we still have no fonts, log a warning and return
+      if (!filteredFonts.length) {
+        // console.warn(`❌ [FontInput:${controllerId}] No fonts available to observe after update`);
+        return;
+      }
+    }
+
+    // console.log(`🔍 [FontInput:${controllerId}] Setting up font observer for`, filteredFonts.length, 'fonts');
+    
+    // Get the observer from FontManager
+    const observer = fontManagerInstance?.getObserver(fontListContainer);
+    if (!observer) {
+      // console.warn(`❌ [FontInput:${controllerId}] Failed to create observer`);
+      return;
+    }
+    
+    // Disconnect existing observer if it exists
+    if (fontObserver) {
+      fontObserver.disconnect();
+    }
+    
+    fontObserver = observer;
+    
+    // Use a more efficient approach to observe elements
+    // First, get all font elements that need to be observed
+    const fontElements = fontListContainer.querySelectorAll('[data-font]');
+    
+    // If there are no elements to observe, try again after a short delay
+    if (fontElements.length === 0) {
+      // console.log(`⚠️ [FontInput:${controllerId}] No font elements found to observe, will retry`);
+      return scrollTimeout = setTimeout(() => {
+        setupFontObserver();
+      }, 100);
+    }
+    
+    // console.log(`📝 [FontInput:${controllerId}] Observing`, fontElements.length, 'font 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, fontElements.length);
+      
+      for (let i = currentIndex; i < endIndex; i++) {
+        observer.observe(fontElements[i]);
+      }
+      
+      currentIndex = endIndex;
+      
+      if (currentIndex < fontElements.length) {
+        // Process next batch in the next animation frame
+        requestAnimationFrame(observeBatch);
+      } else {
+        // console.log(`✅ [FontInput:${controllerId}] Finished observing all font elements:`, {
+        //   total: fontElements.length,
+        //   batchSize,
+        //   batches: Math.ceil(fontElements.length / batchSize)
+        // });
+      }
+    };
+    
+    // Start the batched observation process
+    observeBatch();
+  }
+
+  /**
+   * Handles font list scrolling
+   */
+  function handleFontListScroll(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 font loading for visible fonts
+    fontManagerInstance?.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(`📜 [FontInput:${controllerId}] Scroll position:`, {
+    //   scrollTop,
+    //   scrollHeight,
+    //   clientHeight,
+    //   remainingScroll: scrollHeight - (scrollTop + clientHeight),
+    //   scrolledToBottom,
+    //   hasSearchTerm: Boolean(searchTerm),
+    //   searchResultsCount: currentSearchResults.length,
+    //   displayedResults: filteredFonts.length,
+    //   currentFilter
+    // });
+
+    if (scrolledToBottom) {
+      if (searchTerm && currentSearchResults.length > 0) {
+        // Calculate next batch using SEARCH_BATCH_SIZE
+        const nextBatchStart = filteredFonts.length;
+        const nextBatch = currentSearchResults.slice(
+          nextBatchStart,
+          nextBatchStart + SEARCH_BATCH_SIZE
+        );
+        
+        if (nextBatch.length > 0) {
+          // console.log(`🔄 [FontInput:${controllerId}] Loading next search batch:`, {
+          //   batchSize: nextBatch.length,
+          //   startIndex: nextBatchStart,
+          //   endIndex: nextBatchStart + nextBatch.length,
+          //   totalSearchResults: currentSearchResults.length
+          // });
+          
+          // Add new batch to filtered fonts
+          filteredFonts = [...filteredFonts, ...nextBatch];
+          
+          // Setup observer for new fonts
+          scrollTimeout = setTimeout(() => {
+            if (fontListContainer) {
+              setupFontObserver();
+            }
+          }, 0);
+
+          // console.log(`📝 [FontInput:${controllerId}] Loaded next search batch:`, {
+          //   batchSize: nextBatch.length,
+          //   totalDisplayed: filteredFonts.length,
+          //   remainingFonts: currentSearchResults.length - filteredFonts.length,
+          //   nextBatchSize: SEARCH_BATCH_SIZE
+          // });
+        } else {
+          // console.log(`ℹ️ [FontInput:${controllerId}] No more search results to load`);
+        }
+      } else {
+        // Normal font list scrolling
+        if (!isLoadingBatch && fontManagerInstance?.hasMoreFonts(controllerId, currentFilter)) {
+          // console.log(`🔄 [FontInput:${controllerId}] Reached bottom, loading next batch for ${currentFilter}`);
+          loadNextBatch();
+        } else if (isLoadingBatch) {
+          // console.log(`⏳ [FontInput:${controllerId}] Already loading a batch, skipping`);
+        } else if (!fontManagerInstance?.hasMoreFonts(controllerId, currentFilter)) {
+          // console.log(`ℹ️ [FontInput:${controllerId}] No more fonts to load for ${currentFilter}`);
+        }
+      }
+    }
+  }
+
+  /**
+   * Loads the next batch of fonts
+   */
+  async function loadNextBatch() {
+    if (isLoadingBatch) return;
+
+    try {
+      isLoadingBatch = true;
+      // console.log(`🔄 [FontInput:${controllerId}] Loading next batch for ${currentFilter}`);
+      
+      // Get next batch for this controller
+      const newFonts = fontManagerInstance.getNextBatch(controllerId, currentFilter);
+      // console.log(`📚 [FontInput:${controllerId}] Received next batch:`, {
+      //   count: newFonts.length,
+      //   category: currentFilter,
+      //   fonts: newFonts.slice(0, 3).map(f => f.family)
+      // });
+      
+      // Add to existing fonts, ensuring uniqueness
+      const combinedFonts = [...allFonts, ...newFonts];
+      allFonts = Array.from(
+        new Map(combinedFonts.map(font => [font.family, font])).values()
+      );
+      
+      // Update filtered fonts while preserving current filter
+      updateFilteredFonts();
+
+      // console.log(`✅ [FontInput:${controllerId}] Loaded new batch:`, {
+      //   controllerId,
+      //   filter: currentFilter,
+      //   newFonts: newFonts.length,
+      //   totalFonts: allFonts.length,
+      //   filteredFonts: filteredFonts.length,
+      //   hasMoreFonts: fontManagerInstance.hasMoreFonts(controllerId, currentFilter)
+      // });
+
+    } catch (error) {
+      console.error(`❌ [FontInput:${controllerId}] Error loading font batch:`, error);
+    } finally {
+      isLoadingBatch = false;
+    }
+  }
+
+  function handleToggle() {
+    // console.log('Font dropdown toggled:', controllerId);
+    toggleDropdown(controllerId);
+  }
+
+  function closeDropdown() {
+    if (open) {
+      handleToggle();
+    }
+  }
+
+  // Create a custom action for font observation
+  function observeFont(node: HTMLElement) {
+    if (fontObserver) {
+      fontObserver.observe(node);
+    }
+
+    return {
+      destroy() {
+        if (fontObserver) {
+          fontObserver.unobserve(node);
+        }
+      }
+    };
+  }
+
+  $: open = $openDropdowns.has(controllerId);
+
+  // Add a reactive statement to set up observer when fonts are loaded
+  $: if (filteredFonts.length > 0 && fontListContainer) {
+    // console.log('📝 [FontInput] Fonts loaded, setting up observer...');
+    setupFontObserver();
+  }
+
+  $: popoverStyle = `width: ${buttonWidth}px`;
+
+  /**
+   * Fetches and processes font weights from Google Fonts API
+   * or from fonts.json for custom fonts
+   */
+  async function fetchFontWeights(fontFamily: string) {
+    try {
+      // First check if it's a custom font using FontManager
+      if (fontManagerInstance?.isCustomFont(fontFamily)) {
+        // Get custom font data
+        const customFontResponse = await fetch(fontsJsonUrl);
+        if (customFontResponse.ok) {
+          const customFontsData = await customFontResponse.json();
+          const customFont = customFontsData.fontFamilies.find(
+            (f: any) => f.family === fontFamily
+          );
+
+          if (customFont) {
+            // For custom fonts, get all variants from fonts.json
+            availableWeights = customFont.variants
+              .map((v: any) => v.weight)
+              // Remove duplicates if any
+              .filter((weight: string, index: number, self: string[]) => 
+                self.indexOf(weight) === index
+              )
+              // Sort with Regular first, then alphabetically
+              .sort((a: string, b: string) => {
+                if (a === 'Regular') return -1;
+                if (b === 'Regular') return 1;
+                return a.localeCompare(b);
+              });
+
+            // Set default weight only if not already set for this controller
+            if (!selectedWeight.startsWith(controllerId)) {
+              selectedWeight = `${controllerId}-${availableWeights.includes('Regular') ? 
+                'Regular' : availableWeights[0]}`;
+            }
+              
+            return;
+          }
+        }
+      }
+
+      // Google font: use catalog cached by FontManager (no extra API call per font)
+      const variantIds = fontManagerInstance?.getGoogleFontVariantIds(fontFamily);
+      if (variantIds?.length) {
+        availableWeights = mapGoogleVariantIdsToWeightNames(variantIds);
+        if (!availableWeights.includes(selectedWeight.replace(`${controllerId}-`, ''))) {
+          selectedWeight = `${controllerId}-${availableWeights.includes('Regular') ? 'Regular' : availableWeights[0]}`;
+        }
+        return;
+      }
+
+      // API unavailable (403 / no catalog): sensible defaults, still loads via fonts.googleapis.com CSS
+      console.warn('[FontInput] Using default weights for font (Google catalog not loaded):', fontFamily);
+      availableWeights = ['Regular', 'Bold'];
+      selectedWeight = `${controllerId}-Regular`;
+    } catch (error) {
+      console.error('Error fetching font weights:', error);
+      availableWeights = ['Regular'];
+      selectedWeight = `${controllerId}-Regular`;
+    }
+  }
+
+  $: if (value?.family) {
+    fetchFontWeights(value.family);
+  }
+
+  /**
+   * Highlights search term matches in font names
+   * @param name Font name
+   * @param term Search term
+   * @returns HTML string with highlighted match
+   * 
+   * Note: Returns safe HTML as we're only wrapping with <strong>
+   */
+  function highlightMatch(name: string, term: string) {
+    // Check if this font is the selected one
+    const isSelected = value?.family === name;
+    
+    if (!term) {
+      // If no search term, just return the name with appropriate color
+      return isSelected 
+        ? `<span style="color: white">${name}</span>` 
+        : `<span style="color: hsl(var(--grey7))">${name}</span>`;
+    }
+    
+    const nameLower = name.toLowerCase();
+    const termLower = term.toLowerCase().trim();
+    
+    // If the name contains the search term, highlight that part
+    if (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);
+      
+      if (isSelected) {
+        // For selected items: text is white, highlight is grey7
+        return `<span style="color: white">${beforeMatch}<span style="color: hsl(var(--grey7))">${match}</span>${afterMatch}</span>`;
+      } else {
+        // For non-selected items: text is grey7, highlight is sage-green
+        return `<span style="color: hsl(var(--grey7))">${beforeMatch}<span style="color: hsl(var(--sage-green))">${match}</span>${afterMatch}</span>`;
+      }
+    }
+    
+    // Default case - just return the name with appropriate color
+    return isSelected
+      ? `<span style="color: white">${name}</span>`
+      : `<span style="color: hsl(var(--grey7))">${name}</span>`;
+  }
+
+  /**
+   * Handles global scroll events
+   */
+  function handleGlobalScroll(event: Event) {
+    // Ensure target is an HTMLElement before using closest
+    if (!(event.target instanceof HTMLElement)) {
+      return;
+    }
+    
+    const target = event.target;
+    
+    // Check if scroll happened inside our containers
+    const isInsideFontList = target === fontListContainer;
+    const isInsidePopover = target.closest('.font-popover-content');
+    const isInsideCommand = target.closest('[cmdk-root]');
+    
+    // If scrolling is inside any of our containers, don't close
+    if (isInsideFontList || isInsidePopover || isInsideCommand) {
+      return;
+    }
+
+    // If scrolling outside our containers, close dropdowns
+    if ($openDropdowns?.has(controllerId)) {
+      toggleDropdown(controllerId);
+    }
+    if ($openDropdowns?.has('weight-' + controllerId)) {
+      toggleDropdown('weight-' + controllerId);
+    }
+  }
+
+  // Update onMount to add scroll and touch listeners with passive option
+  onMount(() => {
+    // 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 });
+  });
+
+  // Update onDestroy to remove all listeners
+  onDestroy(() => {
+    window.removeEventListener('scroll', handleGlobalScroll, true);
+    window.removeEventListener('touchstart', () => {});
+    window.removeEventListener('touchmove', () => {});
+    
+    if (fontObserver) {
+      fontObserver.disconnect();
+    }
+    // Clear any timeouts
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout);
+    }
+    if (initialLoadTimeout) {
+      clearTimeout(initialLoadTimeout);
+    }
+    
+    console.log('🧹 [FontInput] Cleanup complete:', {
+      controllerId,
+      lastFilter: currentFilter
+    });
+  });
+
+  // Add this function to the script section
+  function handleDeleteCustomFont(font: FontItem | RecentFont, event: Event) {
+    event.stopPropagation();
+    // Convert returned RecentFonts to FontItems
+    recentFonts = fontUtils.removeCustomFont(font.family).map(font => ({
+      family: font.family,
+      category: font.category as FontItem['category'],
+      isCustom: font.isCustom
+    }));
+    updateFilteredFonts();
+  }
+
+  // Add this function after the script tag
+  function normalizeCategory(category: string): FontItem['category'] {
+    return fontCategories.normalize(category);
+  }
+
+  async function removeFont(fontFamily: string) {
+    try {
+      // Remove from manager
+      await fontManagerInstance?.removeCustomFont(fontFamily);
+      
+      // If the removed font was selected, clear the selection
+      if (value?.family === fontFamily && onChange) {
+        onChange({
+          family: '',
+          weight: 'Regular',
+          category: ''
+        });
+      }
+      
+      // Remove from recent fonts if present
+      const updatedRecentFonts = recentFonts.filter(f => f.family !== fontFamily);
+      recentFonts = updatedRecentFonts;
+      
+      // Add lastUsed property before updating store
+      const recentFontsWithLastUsed = updatedRecentFonts.map(f => ({
+        ...f,
+        lastUsed: Date.now()
+      }));
+      recentFontsStore.set(recentFontsWithLastUsed);
+      
+      // Remove from all fonts
+      allFonts = allFonts.filter(f => f.family !== fontFamily);
+      
+      // Update filtered fonts
+      updateFilteredFonts();
+      
+      console.log('✅ [FontInput] Font removed:', {
+        fontFamily,
+        remainingFonts: allFonts.length,
+        filteredFonts: filteredFonts.length,
+        recentFonts: recentFonts.length
+      });
+    } catch (error) {
+      console.error('❌ [FontInput] Error removing font:', error);
+    }
+  }
+
+  // Update the weight selection handler
+  function handleWeightSelect(weight: string) {
+    selectedWeight = `${controllerId}-${weight}`;
+    if (browser) {
+      localStorage.setItem(FONT_WEIGHT_KEY(controllerId), selectedWeight);
+    }
+    if (onChange) {
+      onChange({
+        family: value?.family || '',
+        weight: weight,
+        category: value?.category || ''
+      });
+    }
+  }
+
+  // Update the template to use the modified weight
+  $: displayWeight = selectedWeight.replace(`${controllerId}-`, '');
+
+  // Update arrow click handler to use filteredFonts
+  function handleArrowClick(direction: 'up' | 'down') {
+    if (!filteredFonts.length) return;
+
+    if (direction === 'down') {
+      activeSearchIndex = (activeSearchIndex + 1) % filteredFonts.length;
+    } else {
+      activeSearchIndex = activeSearchIndex <= 0 ? filteredFonts.length - 1 : activeSearchIndex - 1;
+    }
+
+    // Ensure the selected item is visible
+    const selectedElement = fontListContainer?.querySelector(`[data-font="${filteredFonts[activeSearchIndex].family}"]`);
+    selectedElement?.scrollIntoView({ block: 'nearest' });
+  }
+
+  // Add a function to handle mouse enter events on font items
+  function handleMouseEnter(index: number) {
+    // Update the active index to the hovered item
+    activeSearchIndex = index;
+  }
+
+  // Functions for RecentItemsSection
+  function renderFontItem(font: FontItem) {
+    return {
+      html: `
+        <div class="flex items-center flex-1 min-w-0">
+          <span 
+            class="text-[24px] truncate"
+            style="font-family: '${font.family}', sans-serif; font-display: swap;"
+          >
+            ${font.family}
+          </span>
+        </div>
+      `
+    };
+  }
+  
+  function isFontSelected(font: FontItem) {
+    return value?.family === font.family;
+  }
+  
+  function isCustomFont(font: FontItem) {
+    return font.category === 'Mine' && Boolean(font.isCustom);
+  }
+  
+  function getFontKey(font: FontItem) {
+    // Create a unique key by combining family with category
+    // This prevents duplicate keys when two fonts have the same family name
+    return `${font.family}-${font.category}`;
+  }
+  
+  function handleFontDelete(font: FontItem, event: Event) {
+    event.stopPropagation();
+    event.preventDefault();
+    removeFont(font.family);
+  }
+</script>
+
+<!-- Font Input Container -->
+<div class="flex flex-col widgetic-colors">
+  <!-- Font Family Section -->
+  <div class="flex flex-col gap-[8px]">
+    <div class="flex items-center w-full relative h-[48px]">
+      <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">
+          <!-- Font Family Button -->
+          <Popover.Root 
+            open={$openDropdowns?.has(controllerId)}
+            onOpenChange={(isOpen) => {
+              if (isOpen !== $openDropdowns?.has(controllerId)) {
+                if (!isOpen && value?.family && !shouldSkipFont(value.family)) {
+                  fontUtils.addRecentFont({
+                    family: value.family,
+                    category: normalizeCategory(value.category) as FontItem['category'],
+                    isCustom: fontManagerInstance?.isCustomFont(value.family) || false
+                  });
+                } else if (isOpen) {
+                  // Reset active search index when opening the dropdown
+                  activeSearchIndex = -1;
+                  
+                  // When opening, ensure we have fonts ready
+                  if (filteredFonts.length === 0 && allFonts.length > 0) {
+                    // If we have allFonts but no filtered fonts, update them
+                    updateFilteredFonts();
+                  }
+                  
+                  // Use a small timeout to ensure the DOM has updated before setting up the observer
+                  // This prevents the initial delay when opening the popover
+                  setTimeout(() => {
+                    if (fontListContainer) {
+                      setupFontObserver();
+                    }
+                  }, 50);
+                  
+                  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"
+              onmouseenter={() => {
+                // Preload fonts when hovering over the button
+                // This reduces the delay when actually clicking to open
+                if (!$openDropdowns?.has(controllerId) && filteredFonts.length === 0 && allFonts.length > 0) {
+                  updateFilteredFonts();
+                }
+              }}
+            >
+              <span
+                class="truncate flex-1 text-left subtext text-grey7"
+                style="font-family: '{value?.family || 'system-ui'}', sans-serif; font-display: swap;"
+              >
+                {value?.family || "Select font..."}
+              </span>
+              <IconCaretDownFilled class="w-5 h-5 shrink-0 text-grey5 group-hover:text-grey7" />
+            </Popover.Trigger>
+
+            <Popover.Content class="font-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 font-popover-content">
+                <!-- Title and upload icon -->
+                <div class="relative pt-6 pb-[11px] px-5">
+                  <div class="h5 text-grey7 widgetic-colors">Fonts</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 fonts..."
+                    bind:value={searchTerm}
+                    onInput={(e: Event) => {
+                      // Use debounced search only for typing
+                      debouncedSearch(e);
+                    }}
+                    onPaste={handlePaste}
+                    onKeydown={handleSearchKeydown}
+                    onClear={() => {
+                      searchTerm = ''; // Reset search term
+                      
+                      // Restore the previous filter when clearing search
+                      currentFilter = lastActiveFilter;
+                      if (browser) {
+                        localStorage.setItem(FONT_FILTER_KEY(controllerId), lastActiveFilter);
+                      }
+                      
+                      // ... rest of your onClear code ...
+                    }}
+                  />
+                </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 {filteredFonts.length > 0 ? 'overflow-y-auto' : 'overflow-hidden'} min-h-0 font-list-container"
+                  bind:this={fontListContainer}
+                  onscroll={(e) => {
+                    e.stopPropagation();
+                    handleFontListScroll(e);
+                    updateScrollState();
+                  }}
+                  id={`font-list-${controllerId}`}
+                  role="listbox"
+                  aria-label="Font list"
+                >
+                  <div class="space-y-0">
+                    <!-- Recently used section - only show when not searching -->
+                    {#if recentFonts.length > 0 && !searchTerm}
+                      <RecentItemsSection
+                        recentItems={recentFonts}
+                        title="Recently used"
+                        onItemSelect={handleFontSelect}
+                        onItemDelete={handleFontDelete}
+                        isItemSelected={isFontSelected}
+                        renderItem={renderFontItem}
+                        isCustomItem={isCustomFont}
+                        getItemKey={getFontKey}
+                        observeItem={observeFont}
+                        displayMode="list"
+                        hideTrashIcon={hideTrashIcon}
+                        itemType="font"
+                      />
+                    {/if}
+
+                    <!-- All fonts section -->
+                    <div class="mt-6 px-4">
+                      {#if filteredFonts.length > 0}
+                        <div id="font-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 pb-2 flex items-center">
+                            {#if isInitialLoading}
+                              <div class="w-4 h-4 border-2 border-t-sage-green border-r-sage-green border-b-grey2 border-l-grey2 rounded-full animate-spin mr-2"></div>
+                            {/if}
+                            {searchTerm ? 'Search results' : 'More'}
+                          </h3>
+                        </div>
+                      {/if}
+                      
+                      {#if filteredFonts.length === 0}
+                        <div class="empty-state-wrapper">
+                          {#if isInitialLoading}
+                            <!-- Show compact loading indicator while fonts are loading -->
+                            <div class="flex items-center">
+                              <div class="text-grey5 subtext mr-2">Loading fonts</div>
+                              <div class="w-4 h-4 border-2 border-t-sage-green border-r-sage-green border-b-grey2 border-l-grey2 rounded-full animate-spin"></div>
+                            </div>
+                          {:else}
+                            <!-- Only show empty state when loading is complete and no fonts were found -->
+                            <EmptyState 
+                              message={searchTerm ? 'No fonts found' : 'No fonts available'} 
+                              height="auto"
+                            />
+                          {/if}
+                        </div>
+                      {:else}
+                        <div class="pb-4"> <!-- Add a container with bottom padding -->
+                          {#each filteredFonts as font, index (`${font.family}-${searchTerm ? 'search' : currentFilter}-${index}`)}
+                            <!-- svelte-ignore a11y_click_events_have_key_events -->
+                            <div
+                              class="w-full py-1 px-4 cursor-pointer overflow-hidden relative rounded-small h-[42px] flex items-center
+                                {value?.family === font.family ? 'bg-sage-green text-white selected-item' : 
+                                index === activeSearchIndex && searchTerm ? 'bg-light-green text-sage-green' : 
+                                'hover:bg-light-green'}"
+                              data-font={font.family}
+                              use:observeFont
+                              onclick={() => handleFontSelect(font)}
+                              onmouseenter={() => handleMouseEnter(index)}
+                              role="button"
+                              tabindex="0"
+                            >
+                              <div class="flex items-center flex-1 min-w-0 group">
+                                <Check class="mr-2 h-6 w-6 flex-shrink-0 {value?.family === font.family ? 'text-white' : 'text-sage-green opacity-0'}"/>
+                                <span 
+                                  class="text-[24px] truncate {index === activeSearchIndex && searchTerm ? 'font-medium' : ''}"
+                                  style="font-family: '{font.family}', sans-serif; font-display: swap;"
+                                >
+                                  {@html highlightMatch(font.family, searchTerm)}
+                                </span>
+
+                                {#if font.category === 'Mine' && font.isCustom && !hideTrashIcon}
+                                  <div
+                                    role="button"
+                                    tabindex="-1"
+                                    class="ml-auto transition-opacity {value?.family === font.family ? 'opacity-0 pointer-events-none' : 'opacity-0 group-hover:opacity-100'}"
+                                    onclick={(e) => {
+                                      e.stopPropagation();
+                                      e.preventDefault();
+                                      removeFont(font.family);
+                                    }}
+                                  >
+                                    <img 
+                                      src={icTrash} 
+                                      alt="Remove font" 
+                                      class="w-4 h-4 text-grey5 hover:text-error"
+                                      draggable="false"
+                                    />
+                                    <span class="sr-only">Remove font</span>
+                                  </div>
+                                {/if}
+                              </div>
+                            </div>
+                          {/each}
+                        </div>
+                      {/if}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Popover.Content>
+          </Popover.Root>
+        </div>
+      </div>
+    </div>
+
+    <!-- Font Weight Section -->
+    <div class="flex items-center w-full relative h-[48px]">
+      <div class="w-[185px]"></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">
+          <!-- Font Weight Button -->
+          <Popover.Root 
+            open={$openDropdowns?.has('weight-' + controllerId)}
+            onOpenChange={(isOpen) => {
+              if (isOpen !== $openDropdowns?.has('weight-' + controllerId)) {
+                toggleDropdown('weight-' + 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">
+              <span class="truncate flex-1 text-left subtext text-grey7">
+                {displayWeight}
+              </span>
+              <IconCaretDownFilled class="w-5 h-5 shrink-0 text-grey5 group-hover:text-grey7" />
+            </Popover.Trigger>
+            <Popover.Content class="p-0 w-[150px]">
+              <Command.Root>
+                <Command.Group>
+                  {#each availableWeights as weight}
+                    <Command.Item
+                      value={weight}
+                      onSelect={() => handleWeightSelect(weight)}
+                      class="px-2 py-2"
+                    >
+                      <Check 
+                        class="mr-1 h-4 w-4 {displayWeight === weight ? 'opacity-100' : 'opacity-0'}"
+                      />
+                      <span class="truncate">{weight}</span>
+                    </Command.Item>
+                  {/each}
+                </Command.Group>
+              </Command.Root>
+            </Popover.Content>
+          </Popover.Root>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  {#if description}
+    <p class="subtext text-grey5">{description}</p>
+  {/if}
+</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;
+  }
+
+  /* Keep scrollbar styles */
+  :global(.overflow-y-auto) {
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--grey3)) transparent;
+  }
+
+  /* Ensure buttons take full width */
+  :global(.popover-trigger),
+  :global(.popover-trigger button) {
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  /* Custom styling for font items in RecentItemsSection */
+  :global([data-item]) {
+    border-radius: var(--radius-small) !important;
+  }
+  
+  :global([data-item].bg-\[hsl\(var\(--forest-green-10\)\)\]) {
+    background-color: hsl(var(--light-green)) !important;
+    color: hsl(var(--sage-green)) !important;
+  }
+  
+  :global([data-item]:hover) {
+    background-color: hsl(var(--light-green)) !important;
+  }
+  
+  /* Optimize font popover rendering */
+  :global(.font-input-popover) {
+    z-index: 50;
+    will-change: transform;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+  }
+  
+  :global(.font-popover-content) {
+    will-change: transform;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+  }
+  
+  /* Optimize font list container scrolling */
+  :global(.font-list-container) {
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--grey3)) transparent;
+    will-change: transform;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+  }
+
+  /* Add transition only for border appearance */
+  :global(.transition-border) {
+    transition: border-color 0.2s ease-in;
+  }
+
+  /* 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 */
+    z-index: 10; /* Ensure it appears above other content */
+  }
+
+  /* Prevent hover effect on selected items */
+  :global(.selected-item:hover) {
+    background-color: hsl(var(--sage-green)) !important;
+    color: white !important;
+  }
+  
+  /* Ensure text is white in selected items */
+  :global(.selected-item) {
+    color: white !important;
+  }
+
+  /* Style for search result highlighting */
+  :global(.search-result-highlight) {
+    color: hsl(var(--sage-green)) !important;
+  }
+
+  /* Style for active search item */
+  :global(.active-search-item) {
+    background-color: hsl(var(--light-green)) !important;
+    color: hsl(var(--sage-green)) !important;
+  }
+
+  /* Style for selected item text */
+  :global(.selected-item-text) {
+    color: white !important;
+  }
+
+  /* Style for selected item highlight */
+  :global(.selected-item-highlight) {
+    color: hsl(var(--grey7)) !important;
+  }
+
+  /* Style for checkmark icon */
+  :global(.checkmark-icon) {
+    margin-left: 12px !important;
+  }
+
+  /* Style for font item padding */
+  :global(.font-item) {
+    padding-left: 48px !important;
+  }
+
+  /* Style for font item height */
+  :global(.font-item) {
+    height: 42px !important;
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  /* Style for font item text */
+  :global(.font-item-text) {
+    font-size: 24px !important;
+  }
+
+  /* Style for font item padding */
+  :global(.font-item) {
+    padding: 8px !important;
+  }
+</style>
+
+
+