@widgetic/editor 4.0.2 → 4.0.4

package/dist/utils/FontManager.js

@@ -8,43 +8,68 @@ const fontWeightOrder = {
     ExtraLight: 2,
     Light: 3,
     Regular: 4,
+    Italic: 4.5,
     Medium: 5,
+    'Medium Italic': 5.5,
     SemiBold: 6,
+    'SemiBold Italic': 6.5,
     Bold: 7,
+    'Bold Italic': 7.5,
     ExtraBold: 8,
+    'ExtraBold Italic': 8.5,
     Black: 9,
+    'Black Italic': 9.5,
+    'Light Italic': 3.5,
+    'Thin Italic': 1.5,
+    'ExtraLight Italic': 2.5,
 };
-/** Maps Google Fonts API variant ids to display weight labels. */
+function googleVariantIdToWeightName(variant) {
+    const italic = /italic/i.test(variant);
+    const base = variant.replace(/italic/ig, '').toLowerCase() || 'regular';
+    let name;
+    switch (base) {
+        case '100':
+            name = 'Thin';
+            break;
+        case '200':
+            name = 'ExtraLight';
+            break;
+        case '300':
+            name = 'Light';
+            break;
+        case '400':
+        case 'regular':
+        case '':
+            name = 'Regular';
+            break;
+        case '500':
+            name = 'Medium';
+            break;
+        case '600':
+            name = 'SemiBold';
+            break;
+        case '700':
+        case 'bold':
+            name = 'Bold';
+            break;
+        case '800':
+            name = 'ExtraBold';
+            break;
+        case '900':
+            name = 'Black';
+            break;
+        default:
+            name = base;
+    }
+    if (!italic)
+        return name;
+    return name === 'Regular' ? 'Italic' : `${name} Italic`;
+}
+/** Maps Google Fonts API variant ids to display weight labels (includes italic faces). */
 export function mapGoogleVariantIdsToWeightNames(variants) {
-    return variants
-        .filter((v) => !v.includes('italic'))
-        .map((v) => {
-        switch (v) {
-            case '100':
-                return 'Thin';
-            case '200':
-                return 'ExtraLight';
-            case '300':
-                return 'Light';
-            case '400':
-            case 'regular':
-                return 'Regular';
-            case '500':
-                return 'Medium';
-            case '600':
-                return 'SemiBold';
-            case '700':
-            case 'bold':
-                return 'Bold';
-            case '800':
-                return 'ExtraBold';
-            case '900':
-                return 'Black';
-            default:
-                return v;
-        }
-    })
-        .sort((a, b) => (fontWeightOrder[a] || 99) - (fontWeightOrder[b] || 99));
+    const names = variants.map(googleVariantIdToWeightName);
+    const unique = [...new Set(names)];
+    return unique.sort((a, b) => (fontWeightOrder[a] || 99) - (fontWeightOrder[b] || 99));
 }
 class FontManager {
     // Debug configuration
@@ -122,7 +147,7 @@ class FontManager {
             family,
             category,
             isCustom: false,
-            variants: ['regular', '500', '600', '700'],
+            variants: ['regular', 'italic', '500', '500italic', '600', '600italic', '700', '700italic'],
         }));
         return [
             ...pack(sans, 'Sans Serif'),
@@ -147,7 +172,7 @@ class FontManager {
         FontManager.forbiddenApiKeyWarned = true;
         console.warn('[FontManager] Google Fonts API returned 403 Forbidden. Fix in Google Cloud Console: ' +
             '(1) Enable "Web Fonts Developer API" on the project, ' +
-            '(2) API key → Application restrictions → HTTP referrers: http://localhost:5180/*, http://localhost:5174/*, http://127.0.0.1:5180/*, https://*.widgetic.com/*, ' +
+            '(2) API key → Application restrictions → HTTP referrers: http://localhost:5173/*, http://localhost:5174/*, http://localhost:5180/*, https://*.widgetic.com/*, ' +
             '(3) use a key created for Web Fonts (not Gemini/other APIs). Font picker falls back to cached/custom fonts.');
     }
     warnBadRequestApiKey() {
@@ -155,7 +180,7 @@ class FontManager {
             return;
         FontManager.badRequestApiKeyWarned = true;
         console.warn('[FontManager] Google Fonts API returned 400 Bad Request. Usually: invalid API key, Web Fonts Developer API not enabled, or wrong key type. ' +
-            'Use the "Widgetic-Fonts" key from Google Cloud (Web Fonts API only), set VITE_GOOGLE_FONTS_API_KEY in widget-creator/.env, restart dev server. ' +
+            'Use a Web Fonts Developer API key (not Gemini). Set PUBLIC_GOOGLE_FONTS_API_KEY and VITE_GOOGLE_FONTS_API_KEY in Frontend/site/.env and widget-creator/.env, restart Vite. ' +
             'Font picker falls back to cached/custom fonts.');
     }
     /**
@@ -236,7 +261,7 @@ class FontManager {
      */
     async initialize() {
         if (FontManager.isInitialized) {
-            console.log('✅ [FontManager] Already initialized');
+            // console.log('✅ [FontManager] Already initialized');
             return;
         }
         try {
@@ -271,74 +296,22 @@ class FontManager {
                     : await this.fetchGoogleFontsCatalog();
                 if (catalog?.length) {
                     this.catalog = { stage: 'complete', fonts: catalog };
-                    // Preload initial fonts for each category
+                    // Index initial fonts for each category without blocking startup
                     const categories = ['Serif', 'Sans Serif', 'Script', 'Other'];
-                    // Preload fonts for each category
-                    await Promise.all(categories.map(async (category) => {
+                    categories.forEach(category => {
                         const categoryFonts = this.catalogFonts
                             .filter(font => fontCategories.normalize(font.category) === category)
                             .slice(0, FontManager.initialFontNumber);
                         this.categoryFonts.set(category, categoryFonts);
-                        // Preload the fonts by inserting their stylesheets
-                        await Promise.all(categoryFonts.map(async (font) => {
-                            try {
-                                await this.insertFontStylesheet(font.family);
-                                await this.loadFont(font.family, ['400', '500', '600', '700']);
-                            }
-                            catch (error) {
-                                console.warn(`⚠️ [FontManager] Failed to preload font: ${font.family}`, error);
-                            }
-                        }));
-                        // console.log(`📚 [FontManager] Preloaded fonts for ${category}:`, {
-                        //   total: categoryFonts.length,
-                        //   sample: categoryFonts.slice(0, 3).map(f => f.family)
-                        // });
-                    }));
-                    // Save filtered list to localStorage cache
+                    });
+                    // Save filtered list to cache
                     this.saveFontListToCache(this.catalogFonts);
-                    // console.log('📚 [FontManager] Complete font list cached:', {
-                    //   total: this.cachedFontList.length,
-                    //   categoriesPreloaded: Array.from(this.categoryFonts.keys())
-                    // });
                 }
             }
             catch (error) {
                 // console.error('❌ [FontManager] Error caching complete font list:', error);
             }
-            // Define initial fonts that must be loaded (excluding skipped fonts)
-            const initialFonts = [
-                'Roboto', 'Open Sans', 'Montserrat', 'Poppins',
-                'Lato', 'Inter'
-            ].filter(font => !shouldSkipFont(font));
-            // Add popular fonts from the initial list
-            const popularFonts = initialFontList
-                .slice(0, FontManager.initialFontNumber)
-                .map(font => font.family)
-                .filter(family => !initialFonts.includes(family));
-            // Combine all fonts to preload: initial fonts + recent fonts + popular fonts
-            const fontsToLoad = [...new Set([
-                    ...initialFonts,
-                    ...recentFonts.map(font => font.family),
-                    ...popularFonts
-                ])].filter(font => !this.loadedFonts.has(font));
-            if (fontsToLoad.length > 0) {
-                // console.log('🔄 [FontManager] Preloading fonts:', fontsToLoad);
-                // Load all fonts in parallel with all weights
-                const loadPromises = fontsToLoad.map(async (family) => {
-                    try {
-                        await this.insertFontStylesheet(family);
-                        await this.loadFont(family, ['400', '500', '600', '700']);
-                    }
-                    catch (error) {
-                        console.warn(`⚠️ [FontManager] Failed to load font: ${family}`, error);
-                    }
-                });
-                await Promise.all(loadPromises);
-            }
-            else {
-                console.log('✨ [FontManager] All initial fonts already cached');
-            }
-            // Only set initialized after everything is complete
+            // Only set initialized after catalog/custom setup is complete
             FontManager.isInitialized = true;
             // console.log('✅ [FontManager] Initialization complete. Font status:', {
             //   totalLoaded: this.loadedFonts.size,
@@ -703,7 +676,7 @@ class FontManager {
                 return null;
             // Check if cache is expired
             if (Date.now() - cache.timestamp > FontManager.CACHE_DURATION) {
-                console.log('⚠️ [FontManager] Cache expired, removing');
+                // console.log('⚠️ [FontManager] Cache expired, removing');
                 void deleteKvValue(FontManager.CACHE_KEY);
                 return null;
             }
@@ -766,13 +739,13 @@ class FontManager {
         }
         // Return immediately if preload is already complete
         if (FontManager.initialPreloadComplete) {
-            console.log('✅ [FontManager] Initial fonts already preloaded');
+            // console.log('✅ [FontManager] Initial fonts already preloaded');
             return;
         }
         // Create new preload promise
         FontManager.preloadPromise = (async () => {
             try {
-                console.log('🚀 [FontManager] Preloading initial fonts...');
+                // console.log('🚀 [FontManager] Preloading initial fonts...');
                 const initialFonts = await this.getInitialFontList();
                 const loadPromises = initialFonts.map(font => {
                     this.insertFontStylesheet(font.family);
@@ -780,7 +753,7 @@ class FontManager {
                 });
                 await Promise.all(loadPromises);
                 FontManager.initialPreloadComplete = true;
-                console.log('✅ [FontManager] Initial fonts preloaded');
+                // console.log('✅ [FontManager] Initial fonts preloaded');
             }
             catch (error) {
                 console.error('❌ [FontManager] Error preloading initial fonts:', error);
@@ -1169,12 +1142,12 @@ class FontManager {
                 ? Array.from(this.customFonts.values())
                 : this.catalogFonts.filter(font => fontCategories.normalize(font.category) === category);
         const remainingItems = categoryFonts.length - currentIndex;
-        console.log('🔍 [FontManager] Checking remaining fonts:', {
-            category,
-            currentIndex,
-            totalInCategory: categoryFonts.length,
-            remainingItems
-        });
+        // console.log('🔍 [FontManager] Checking remaining fonts:', {
+        // category,
+        // currentIndex,
+        // totalInCategory: categoryFonts.length,
+        // remainingItems
+        // });
         // Only return true if we have more items in this category
         return remainingItems > 0;
     }
@@ -1223,7 +1196,7 @@ class FontManager {
                         fonts: this.catalog.fonts.filter(font => font.family !== family || font.category !== 'Mine'),
                     };
                 }
-                console.log('✅ [FontManager] Custom font removed:', family);
+                // console.log('✅ [FontManager] Custom font removed:', family);
             }
         }
         catch (error) {

package/dist/utils/VectorManager.d.ts

@@ -46,6 +46,8 @@ declare class VectorManager {
     static isInitialized: boolean;
     static initialVectorNumber: number;
     private static initializationPromise;
+    private static svgsFetchPromise;
+    private static fetchSvgsJson;
     private remainingTime;
     private preInitializedObservers;
     static readonly BATCH_SIZE = 100;
@@ -86,7 +88,7 @@ declare class VectorManager {
      */
     getInitialVectorList(): Promise<VectorData[]>;
     /**
-     * Saves vector list to localStorage cache
+     * Saves vector list to cache (avoids writing 1.2MB JSON to localStorage)
      */
     private saveVectorListToCache;
     /**

package/dist/utils/VectorManager.js

@@ -33,6 +33,22 @@ class VectorManager {
     static initialVectorNumber = 8; // 8 - how many vectors to load initially
     // Add a static property to track initialization state
     static initializationPromise = null;
+    static svgsFetchPromise = null;
+    static async fetchSvgsJson() {
+        if (!VectorManager.svgsFetchPromise) {
+            VectorManager.svgsFetchPromise = fetch('/svgs.json')
+                .then(response => {
+                if (!response.ok)
+                    throw new Error('Failed to fetch vectors');
+                return response.json();
+            })
+                .catch(err => {
+                VectorManager.svgsFetchPromise = null;
+                throw err;
+            });
+        }
+        return VectorManager.svgsFetchPromise;
+    }
     // Add this property
     remainingTime = 0;
     // Add a Map to store pre-initialized observers
@@ -97,54 +113,24 @@ class VectorManager {
                 category: vectorCategories.normalize(vector.category),
                 url: vector.url
             }));
-            // Get initial vector list and cache it
+            // Get initial vector list and cache it (deduplicated fetch)
             const initialVectorList = await this.getInitialVectorList();
             // console.log('📋 [VectorManager] Initial vector list loaded:', initialVectorList.length);
-            // Cache the complete vector list immediately
+            // Setup category indexing without eager vector preloading
             try {
-                // Load vectors from svgs.json instead of API
-                const response = await fetch('/svgs.json');
-                if (!response.ok)
-                    throw new Error('Failed to fetch vectors');
-                const data = await response.json();
-                // Convert to VectorData format and cache
-                this.cachedVectorList = data.svgGroups.flatMap((group) => group.items.map((item) => ({
-                    name: item.name,
-                    category: vectorCategories.normalize(group.category),
-                    url: item.url
-                })));
-                // Preload initial vectors for each category
                 const categories = ['Icons', 'Emojis', 'Clipart', 'Mine'];
-                // Preload vectors for each category
-                await Promise.all(categories.map(async (category) => {
+                categories.forEach(category => {
                     const categoryVectors = this.cachedVectorList
                         .filter(vector => vectorCategories.normalize(vector.category) === category)
                         .slice(0, VectorManager.initialVectorNumber);
                     this.categoryVectors.set(category, categoryVectors);
-                    // Preload the vectors
-                    await Promise.all(categoryVectors.map(async (vector) => {
-                        try {
-                            await this.loadVector(vector.name);
-                        }
-                        catch (error) {
-                            console.warn(`⚠️ [VectorManager] Failed to preload vector: ${vector.name}`, error);
-                        }
-                    }));
-                    // console.log(`📚 [VectorManager] Preloaded vectors for ${category}:`, {
-                    //   total: categoryVectors.length,
-                    //   sample: categoryVectors.slice(0, 3).map(v => v.name)
-                    // });
-                }));
-                // Save filtered list to localStorage cache
+                });
+                // Clean up legacy cache and mark loaded
                 this.saveVectorListToCache(this.cachedVectorList);
                 this.allVectorsLoaded = true;
-                // console.log('📚 [VectorManager] Complete vector list cached:', {
-                //   total: this.cachedVectorList.length,
-                //   categoriesPreloaded: Array.from(this.categoryVectors.keys())
-                // });
             }
             catch (error) {
-                console.error('❌ [VectorManager] Error caching complete vector list:', error);
+                console.error('❌ [VectorManager] Error indexing vector list:', error);
             }
             // Only set initialized after everything is complete
             VectorManager.isInitialized = true;
@@ -292,11 +278,8 @@ class VectorManager {
             }));
             // Add custom vectors from custom-svgs.json
             const customVectors = await this.loadCustomVectors();
-            // Load vectors from svgs.json
-            const response = await fetch('/svgs.json');
-            if (!response.ok)
-                throw new Error('Failed to fetch vectors');
-            const data = await response.json();
+            // Load vectors from svgs.json using deduplicated fetch promise
+            const data = await VectorManager.fetchSvgsJson();
             // Process and combine vectors
             const standardVectors = data.svgGroups.flatMap((group) => group.items.map((item) => ({
                 name: item.name,
@@ -320,22 +303,15 @@ class VectorManager {
         }
     }
     /**
-     * Saves vector list to localStorage cache
+     * Saves vector list to cache (avoids writing 1.2MB JSON to localStorage)
      */
     saveVectorListToCache(vectors) {
         try {
-            const cacheData = {
-                timestamp: Date.now(),
-                vectors: vectors
-            };
-            localStorage.setItem(VectorManager.CACHE_KEY, JSON.stringify(cacheData));
-            // console.log('💾 [VectorManager] Vector list cached:', {
-            //   vectors: vectors.length,
-            //   expires: new Date(cacheData.timestamp + VectorManager.CACHE_DURATION)
-            // });
+            // Remove legacy large JSON from localStorage if present to free storage quota
+            localStorage.removeItem(VectorManager.CACHE_KEY);
         }
         catch (error) {
-            console.error('❌ [VectorManager] Error caching vector list:', error);
+            // Ignore storage errors
         }
     }
     /**
@@ -672,7 +648,7 @@ class VectorManager {
             return this.observers.get(key) || null;
         }
         // Create new observer
-        console.log('🔧 [VectorManager] Creating new observer for container:', key);
+        // console.log('🔧 [VectorManager] Creating new observer for container:', key);
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 const vectorName = entry.target.getAttribute('data-vector');
@@ -732,23 +708,7 @@ class VectorManager {
      * Returns null if cache is invalid or expired
      */
     getVectorListFromCache() {
-        try {
-            const cached = localStorage.getItem(VectorManager.CACHE_KEY);
-            if (!cached)
-                return null;
-            const cache = JSON.parse(cached);
-            const now = Date.now();
-            // Check if cache has expired
-            if (now - cache.timestamp > VectorManager.CACHE_DURATION) {
-                console.log('📅 [VectorManager] Cache expired, will refresh');
-                return null;
-            }
-            return cache.vectors;
-        }
-        catch (error) {
-            console.error('❌ [VectorManager] Error reading vector cache:', error);
-            return null;
-        }
+        return null;
     }
 }
 export default VectorManager;

package/dist/utils/colorTransparency.js

@@ -12,7 +12,7 @@ export class ColorTransparencyHandler {
      * Converts hex color to RGBA while preserving opacity
      */
     hexToRgba(hex) {
-        console.log('Converting hex to rgba:', hex, 'Current opacity:', this.persistentOpacity);
+        // console.log('Converting hex to rgba:', hex, 'Current opacity:', this.persistentOpacity);
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
         if (result) {
             return {
@@ -57,7 +57,7 @@ export class ColorTransparencyHandler {
         finally {
             this.isInternalUpdate = false;
         }
-        console.log('Updated opacity:', newOpacity);
+        // console.log('Updated opacity:', newOpacity);
     }
     /**
      * Updates opacity from input value
@@ -75,7 +75,7 @@ export class ColorTransparencyHandler {
         finally {
             this.isInternalUpdate = false;
         }
-        console.log('Updated opacity from input:', value);
+        // console.log('Updated opacity from input:', value);
     }
     /**
      * Gets the current opacity percentage

package/dist/utils/fontUtils.js

@@ -15,7 +15,7 @@ export const fontCategories = {
     normalize(category) {
         // Handle null or undefined category
         if (!category) {
-            console.log('⚠️ [FontUtils] Null category, returning Other');
+            // console.log('⚠️ [FontUtils] Null category, returning Other');
             return 'Other';
         }
         // Convert to lowercase and trim for consistent matching

package/dist/utils/passiveEvents.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Passive event listener helper.
+ * Apply specifically to scroll-listening elements that do not call preventDefault().
+ */
+export declare function addPassiveEventListener<K extends keyof WindowEventMap>(target: EventTarget, type: K, listener: (this: EventTarget, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): () => void;

package/dist/utils/passiveEvents.js

@@ -1,20 +1,11 @@
-// Add passive event listener support globally
-if (typeof window !== 'undefined') {
-    // Save the original addEventListener
-    const originalAddEventListener = EventTarget.prototype.addEventListener;
-    // Override addEventListener
-    EventTarget.prototype.addEventListener = function (type, listener, options) {
-        // Force passive for touch and wheel events
-        if (type === 'touchstart' || type === 'touchmove' || type === 'wheel') {
-            let newOptions = options;
-            if (typeof options === 'object') {
-                newOptions = { ...options, passive: true };
-            }
-            else {
-                newOptions = { passive: true };
-            }
-            return originalAddEventListener.call(this, type, listener, newOptions);
-        }
-        return originalAddEventListener.call(this, type, listener, options);
+/**
+ * Passive event listener helper.
+ * Apply specifically to scroll-listening elements that do not call preventDefault().
+ */
+export function addPassiveEventListener(target, type, listener, options) {
+    const opts = typeof options === 'object' ? { ...options, passive: true } : { passive: true };
+    target.addEventListener(type, listener, opts);
+    return () => {
+        target.removeEventListener(type, listener, opts);
     };
 }

package/dist/utils/recentColors.js

@@ -14,31 +14,31 @@ export const recentColorsUtil = {
     addRecentColor(color, alpha) {
         try {
             const normalizedColor = color.toLowerCase();
-            console.log('Adding/updating recent color:', {
-                normalizedColor,
-                alpha,
-                originalColor: color
-            });
+            // console.log('Adding/updating recent color:', { 
+            // normalizedColor, 
+            // alpha,
+            // originalColor: color 
+            // });
             let colors = this.getRecentColors();
             // Normalize all colors for comparison
             const existingIndex = colors.findIndex(c => {
                 const normalizedExisting = c.color.toLowerCase();
                 const alphaMatch = Math.abs(c.alpha - alpha) < 0.001;
-                console.log('Comparing:', {
-                    existing: normalizedExisting,
-                    new: normalizedColor,
-                    existingAlpha: c.alpha,
-                    newAlpha: alpha,
-                    alphaMatch,
-                    colorsMatch: normalizedExisting === normalizedColor
-                });
+                // console.log('Comparing:', {
+                // existing: normalizedExisting,
+                // new: normalizedColor,
+                // existingAlpha: c.alpha,
+                // newAlpha: alpha,
+                // alphaMatch,
+                // colorsMatch: normalizedExisting === normalizedColor
+                // });
                 return normalizedExisting === normalizedColor && alphaMatch;
             });
-            console.log('Found existing color at index:', existingIndex);
+            // console.log('Found existing color at index:', existingIndex);
             if (existingIndex !== -1) {
                 // Remove the existing color
                 const removed = colors.splice(existingIndex, 1)[0];
-                console.log('Removed existing color:', removed);
+                // console.log('Removed existing color:', removed);
             }
             // Add the new/updated color to the front
             const newColor = {

package/dist/utils/vectorUtils.js

@@ -10,7 +10,7 @@ export const vectorCategories = {
     normalize(category) {
         // Handle null or undefined category
         if (!category) {
-            console.log('⚠️ [VectorUtils] Null category, returning Icons');
+            // console.log('⚠️ [VectorUtils] Null category, returning Icons');
             return 'Icons';
         }
         // Convert to lowercase and trim for consistent matching

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/editor",
-	"version": "4.0.2",
+	"version": "4.0.4",
 	"type": "module",
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",