viconic-react-icons 1.0.0

package/src/copyicons-smart-loader.js

@@ -0,0 +1,2132 @@
+/**
+ * CopyIcons Smart Loader v8.3 (CDN Smart Fallback + Early Abort)
+ * 
+ * SMART CDN STRATEGY: Uses the fastest path based on how many icons are needed.
+ * - Normal browsing (≤200 per collection): Individual CDN SVGs (parallel, stream-inject)
+ * - Bulk embedding (>200 per collection): Full bundle JSON from CDN (one request)
+ * - Search & Collection pages: Individual CDN (stream-inject, icons appear instantly)
+ * - Kit embedding with many icons: Bundle mode (efficient for 200+ icons)
+ * Django is ONLY used as last-resort fallback.
+ * 
+ * Architecture:
+ * 1. Inject cached icons immediately (sync, zero network)
+ * 2. Load prefix-map from CDN/localStorage (maps prefix → CDN base URL)
+ * 3. Smart path selection based on icon count per prefix:
+ *    a) Individual CDN: fetch parallel SVGs from CDN (~50ms each, 15 concurrent)
+ *    b) Bundle CDN: fetch entire collection JSON (~200-500ms, thousands of icons)
+ * 4. API batch fallback for any icons neither CDN source has
+ * 
+ * Simple Usage (zero config):
+ * <script src="https://api.copyicons.click/static/js/copyicons-smart-loader.js"></script>
+ * 
+ * @author CopyIcons Team
+ * @license MIT
+ * @version 8.2
+ */
+(function () {
+    'use strict';
+
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return;
+    }
+
+    // Inject base styles for viconic-icon custom element so it behaves correctly
+    if (typeof document !== 'undefined') {
+        const style = document.createElement('style');
+        // Use :where() to set specificity to 0, so user styles can easily override without !important
+        style.textContent = ':where(viconic-icon) { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: inherit; line-height: 1; } :where(viconic-icon):not(.ci-multicolor) svg { width: 100%; height: 100%; display: block; fill: currentColor; } :where(viconic-icon).ci-multicolor svg { width: 100%; height: 100%; display: block; }';
+        if (document.head.firstChild) {
+            document.head.insertBefore(style, document.head.firstChild);
+        } else {
+            document.head.appendChild(style);
+        }
+    }
+
+    // === PERFORMANCE CONSTANTS ===
+    const CACHE_TTL = 3 * 24 * 60 * 60 * 1000; // 3 days cache
+    const CACHE_PREFIX = 'copyicons:svg:';
+    const ICON_CACHE_PREFIX = 'ci:'; // Shorter prefix to save localStorage space
+    const PREFIXMAP_CACHE_KEY = 'ci:pfx-map';
+    const PREFIXMAP_TTL = 5 * 60 * 1000; // 5 min (matches CDN Cache-Control)
+    const MAX_MEMORY_CACHE_SIZE = 500;
+    const CDN_TIMEOUT = 3000; // 3s timeout per individual CDN fetch
+    const PREFIXMAP_TIMEOUT = 2000; // 2s timeout for prefix-map.json
+    const API_TIMEOUT = 8000; // 8s timeout for multi-prefix batch API
+    const BUNDLE_TIMEOUT = 5000; // 5s timeout for CDN bundle fetch
+    const CDN_CONCURRENCY = 15; // Concurrency limit for CDN fallback pool
+    const BUNDLE_THRESHOLD = 80; // Use CDN bundle when ≥80 icons needed (collection pages only)
+    const MAX_BUNDLE_CACHE = 2; // Max bundles kept in memory (LRU eviction)
+    const MEMORY_BUDGET = 290 * 1024 * 1024; // 290MB memory budget
+    const MEMORY_CHECK_INTERVAL = 30000; // Check memory every 30s
+
+    // === CDN BUNDLE CACHE: Stores entire collection SVG bundles in memory ===
+    // Key: collectionId → { data, accessTime, size }
+    const bundleCache = new Map();
+
+    // === IN-MEMORY CACHE with LRU eviction ===
+    const memoryCache = new Map();
+
+    // Prefix detection
+    const PREFIX_TOKEN_RE = /^[a-z0-9_]{1,32}$/i;
+    const DENY_PREFIXES = new Set([
+        'icon', 'icons', 'active', 'disabled', 'hidden',
+        'editor', 'preview', 'modal', 'btn', 'js', 'svg',
+        'text', 'bg', 'flex', 'inline', 'block', 'grid', 'gap',
+        'px', 'py', 'pt', 'pb', 'pl', 'pr', 'm', 'mx', 'my', 'mt', 'mb', 'ml', 'mr',
+        'w', 'h', 'min', 'max', 'border', 'rounded', 'shadow', 'opacity',
+        'hover', 'focus', 'group', 'transition', 'duration', 'ease',
+        'absolute', 'relative', 'fixed', 'sticky', 'top', 'bottom', 'left', 'right',
+        'z', 'overflow', 'truncate', 'translate', 'scale', 'rotate', 'skew',
+        'zinc', 'gray', 'slate', 'neutral', 'stone', 'red', 'orange', 'amber',
+        'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue',
+        'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose', 'white', 'black'
+    ]);
+
+    const ICON_CLASS_PREFIXES = ['cid-', 'cis-', 'cim-', 'cir-'];
+
+    // === VICONIC NAME CONVERSION ===
+    function camelToKebab(str) {
+        if (!str) return '';
+        // Three-step conversion to match backend's _kebab_to_camel round-trip:
+        // Step 1: handle consecutive uppercase before uppercase+lowercase (XMLParser → XML-Parser)
+        // Step 2: handle normal camelCase boundaries (arrowDown → arrow-Down)
+        let result = str
+            .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+            .replace(/([a-z0-9])([A-Z])/g, '$1-$2');
+        // Step 3: split trailing consecutive single-uppercase segments
+        // Backend _kebab_to_camel converts -a-z → AZ, so we need AZ$ → A-Z
+        // Apply repeatedly for 3+ chars (e.g. AZX$ → A-Z-X)
+        while (/[A-Z]{2,}$/.test(result)) {
+            result = result.replace(/([A-Z])([A-Z])$/, '$1-$2');
+        }
+        return result.toLowerCase();
+    }
+
+    function kebabToCamel(str) {
+        if (!str) return '';
+        // Only uppercase LETTERS after dashes. Dashes before digits stay.
+        return str.replace(/-([a-zA-Z])/g, (_, c) => c.toUpperCase());
+    }
+
+    function parseViconicIcon(attrValue) {
+        if (!attrValue) return null;
+        const colonIdx = attrValue.indexOf(':');
+        if (colonIdx < 1) return null;
+        const prefix = attrValue.slice(0, colonIdx).trim();
+        const camelName = attrValue.slice(colonIdx + 1).trim();
+        if (!prefix || !camelName) return null;
+        // icon attr uses camelCase, convert to kebab-case for CDN filenames
+        return { prefix, iconName: camelToKebab(camelName) };
+    }
+
+    function iconClassToViconic(iconClass) {
+        if (!iconClass) return null;
+        const tokens = iconClass.trim().split(/\s+/);
+        let prefix = '', rawName = '', animate = '';
+        for (const token of tokens) {
+            if (token === 'svg-loaded' || token === 'js-processed' || token === 'card-icon') continue;
+            if (!token.includes('-')) {
+                if (PREFIX_TOKEN_RE.test(token)) prefix = token;
+            } else {
+                let name = '';
+                let isIconPfx = false;
+                for (const iconPfx of ICON_CLASS_PREFIXES) {
+                    if (token.startsWith(iconPfx)) {
+                        name = token.slice(iconPfx.length);
+                        isIconPfx = true;
+                        break;
+                    }
+                }
+                if (isIconPfx && name) {
+                    rawName = name;
+                } else if (token.startsWith('ci-')) {
+                    animate = token.slice(3);
+                } else if (!isCSSUtilityClass(token)) {
+                    const dashIdx = token.indexOf('-');
+                    if (dashIdx > 0) rawName = token.slice(dashIdx + 1);
+                }
+            }
+        }
+        if (!rawName) return null;
+        // Convert to camelCase for the icon attribute
+        return { prefix, name: kebabToCamel(rawName), animate: animate || null };
+    }
+
+    function viconicTagFromClass(iconClass, animation) {
+        const parsed = iconClassToViconic(iconClass);
+        if (!parsed) return `<viconic-icon icon="${iconClass}"></viconic-icon>`;
+        const anim = animation || parsed.animate;
+        let tag = `<viconic-icon icon="${parsed.prefix}:${parsed.name}"`;
+        if (anim && anim !== 'none') tag += ` animate="${anim}"`;
+        tag += '></viconic-icon>';
+        return tag;
+    }
+
+    // Configuration
+    const currentScript = document.currentScript;
+    const config = {
+        apiBase: (window.CONFIG?.API_BASE || currentScript?.dataset?.apiBase || 'https://api.viconic.io.vn').replace(/\/$/, ''),
+        // Batch API for Iconify-style loading (by-prefix endpoint)
+        batchApiBase: (window.CONFIG?.BATCH_API_BASE || window.CONFIG?.API_BASE || currentScript?.dataset?.batchApiBase || 'https://api.viconic.io.vn').replace(/\/$/, ''),
+        cdnDomain: currentScript?.dataset?.cdnDomain || window.CONFIG?.CDN_DOMAIN || 'pub-1f6e5603f8674e37b76ceac17e995ec3.r2.dev',
+        // Custom domain for R2 CDN via Cloudflare edge (HTTP/2, edge cache)
+        cdnCustomDomain: window.CONFIG?.CDN_CUSTOM_DOMAIN || currentScript?.dataset?.cdnCustomDomain || '',
+        observe: currentScript?.hasAttribute('data-observe') ?? false,
+        lazy: currentScript?.hasAttribute('data-lazy') ?? false,
+    };
+
+    // === PRECONNECT TO CDN + API (saves DNS+TLS ~100-300ms on first visit) ===
+    try {
+        // Preconnect to CDN (custom domain takes priority)
+        const cdnHost = config.cdnCustomDomain || config.cdnDomain;
+        const cdnLink = document.createElement('link');
+        cdnLink.rel = 'preconnect';
+        cdnLink.href = `https://${cdnHost}`;
+        cdnLink.crossOrigin = '';
+        document.head.appendChild(cdnLink);
+
+        // Preconnect to batch API for Iconify-style loading
+        const batchApiLink = document.createElement('link');
+        batchApiLink.rel = 'preconnect';
+        batchApiLink.href = config.batchApiBase;
+        batchApiLink.crossOrigin = '';
+        document.head.appendChild(batchApiLink);
+
+        // Preconnect to main API if different
+        if (config.apiBase !== config.batchApiBase) {
+            const apiLink = document.createElement('link');
+            apiLink.rel = 'preconnect';
+            apiLink.href = config.apiBase;
+            apiLink.crossOrigin = '';
+            document.head.appendChild(apiLink);
+        }
+    } catch (e) { }
+
+    // State
+    let processedElements = new WeakSet();
+    const pendingIcons = new Map(); // prefix -> [{element, iconName}]
+    let batchTimer = null;
+    let mutationObserver = null;
+    let intersectionObserver = null;
+    let currentLoadId = 0;
+
+    // In-flight fetch deduplication: prefix -> Promise
+    const inflightFetches = new Map();
+
+    // Track prefixes that returned 404 (collection deleted/missing)
+    const failedPrefixes = new Set();
+
+    // === CDN PREFIX MAP with localStorage caching ===
+    let prefixMap = null;
+    let prefixMapPromise = null;
+
+    // Try to load prefix-map from localStorage SYNCHRONOUSLY (instant on revisit!)
+    try {
+        const cached = localStorage.getItem(PREFIXMAP_CACHE_KEY);
+        if (cached) {
+            const parsed = JSON.parse(cached);
+            if (Date.now() - parsed.t < PREFIXMAP_TTL) {
+                prefixMap = parsed.d;
+            }
+        }
+    } catch (e) { }
+
+    // Rewrite R2 CDN URLs to use custom domain (Cloudflare edge)
+    // e.g. pub-xxx.r2.dev/icons/solar → cdn.viconic.io.vn/icons/solar
+    function rewriteCdnUrl(url) {
+        if (!config.cdnCustomDomain || !url) return url;
+        return url.replace(
+            /https:\/\/pub-[a-z0-9]+\.r2\.dev/,
+            `https://${config.cdnCustomDomain}`
+        );
+    }
+
+    function rewritePrefixMap(map) {
+        if (!config.cdnCustomDomain || !map) return map;
+        const rewritten = {};
+        for (const [key, val] of Object.entries(map)) {
+            rewritten[key] = rewriteCdnUrl(val);
+        }
+        return rewritten;
+    }
+
+    async function loadPrefixMap() {
+        if (prefixMap) return prefixMap;
+        if (prefixMapPromise) return prefixMapPromise;
+
+        prefixMapPromise = (async () => {
+            try {
+                // Fetch from custom domain if available, fallback to r2.dev
+                const cdnHost = config.cdnCustomDomain || config.cdnDomain;
+                const resp = await Promise.race([
+                    fetch(`https://${cdnHost}/prefix-map.json`).catch(() => null),
+                    new Promise(resolve => setTimeout(() => resolve(null), PREFIXMAP_TIMEOUT))
+                ]);
+
+                if (resp && resp.ok) {
+                    const raw = await resp.json();
+                    prefixMap = rewritePrefixMap(raw);
+                    // Persist to localStorage for instant access on next page load
+                    try {
+                        localStorage.setItem(PREFIXMAP_CACHE_KEY, JSON.stringify({
+                            d: prefixMap, t: Date.now()
+                        }));
+                    } catch (e) { }
+                    return prefixMap;
+                }
+            } catch (e) { }
+            prefixMap = {};
+            return prefixMap;
+        })();
+        return prefixMapPromise;
+    }
+
+    // If we loaded from localStorage, start background refresh silently
+    // If not cached, start fetching now (non-blocking)
+    if (prefixMap) {
+        // Have cached data — also rewrite URLs if custom domain is set
+        prefixMap = rewritePrefixMap(prefixMap);
+        // Refresh in background without blocking anything
+        const bgHost = config.cdnCustomDomain || config.cdnDomain;
+        fetch(`https://${bgHost}/prefix-map.json`)
+            .then(r => r.ok ? r.json() : null)
+            .then(data => {
+                if (data) {
+                    prefixMap = rewritePrefixMap(data);
+                    try {
+                        localStorage.setItem(PREFIXMAP_CACHE_KEY, JSON.stringify({
+                            d: prefixMap, t: Date.now()
+                        }));
+                    } catch (e) { }
+                }
+            })
+            .catch(() => { });
+    } else {
+        loadPrefixMap();
+    }
+
+    // === CACHE FUNCTIONS ===
+
+    function getMemKey(prefix, iconName) {
+        return `${prefix}:${iconName}`;
+    }
+
+    function getFromMemory(prefix, iconName) {
+        const key = getMemKey(prefix, iconName);
+        const svg = memoryCache.get(key);
+        if (svg) {
+            // LRU: move to end
+            memoryCache.delete(key);
+            memoryCache.set(key, svg);
+        }
+        return svg;
+    }
+
+    function setToMemory(prefix, iconName, svg) {
+        const key = getMemKey(prefix, iconName);
+        if (memoryCache.has(key)) {
+            memoryCache.delete(key);
+        } else if (memoryCache.size >= MAX_MEMORY_CACHE_SIZE) {
+            // Evict oldest 50%
+            const deleteCount = Math.floor(MAX_MEMORY_CACHE_SIZE * 0.5);
+            const keysToDelete = [...memoryCache.keys()].slice(0, deleteCount);
+            for (const k of keysToDelete) memoryCache.delete(k);
+        }
+        memoryCache.set(key, svg);
+    }
+
+    // Get from localStorage (populates memory cache)
+    function getPerIconCache(prefix, iconName) {
+        const memCached = getFromMemory(prefix, iconName);
+        if (memCached && typeof memCached === 'string') return memCached;
+
+        try {
+            const key = `${ICON_CACHE_PREFIX}${prefix}:${iconName}`;
+            const cached = localStorage.getItem(key);
+            if (cached) {
+                const { s: svg, t: timestamp } = JSON.parse(cached);
+                if (typeof svg === 'string' && svg.trim() && Date.now() - timestamp < CACHE_TTL) {
+                    setToMemory(prefix, iconName, svg);
+                    return svg;
+                }
+                localStorage.removeItem(key);
+            }
+        } catch (e) { }
+        return null;
+    }
+
+    // === DEFERRED LOCALSTORAGE WRITES (don't block rendering!) ===
+    const _deferredWrites = [];
+    let _deferTimer = null;
+
+    function deferCacheWrite(prefix, iconName, svg) {
+        if (typeof svg !== 'string' || !svg.trim()) return;
+        _deferredWrites.push({ prefix, iconName, svg });
+        if (!_deferTimer) {
+            if ('requestIdleCallback' in window) {
+                _deferTimer = requestIdleCallback(_flushCacheWrites, { timeout: 2000 });
+            } else {
+                _deferTimer = setTimeout(_flushCacheWrites, 100);
+            }
+        }
+    }
+
+    function _flushCacheWrites() {
+        _deferTimer = null;
+        const writes = _deferredWrites.splice(0);
+        const now = Date.now();
+        for (const { prefix, iconName, svg } of writes) {
+            try {
+                const key = `${ICON_CACHE_PREFIX}${prefix}:${iconName}`;
+                localStorage.setItem(key, JSON.stringify({ s: svg, t: now }));
+            } catch (e) {
+                cleanupOldCache();
+                break; // Storage full, stop
+            }
+        }
+    }
+
+    // Set to cache (memory instantly, localStorage deferred)
+    function setPerIconCache(prefix, iconName, svg) {
+        if (typeof svg !== 'string' || !svg.trim()) return;
+        setToMemory(prefix, iconName, svg);
+        deferCacheWrite(prefix, iconName, svg);
+    }
+
+    // Batch cache (legacy, rarely used)
+    function getCachedData(key) {
+        try {
+            const cached = localStorage.getItem(CACHE_PREFIX + key);
+            if (cached) {
+                const { data, timestamp } = JSON.parse(cached);
+                if (Date.now() - timestamp < CACHE_TTL) return data;
+                localStorage.removeItem(CACHE_PREFIX + key);
+            }
+        } catch (e) { }
+        return null;
+    }
+
+    function setCachedData(key, data) {
+        try {
+            localStorage.setItem(CACHE_PREFIX + key, JSON.stringify({
+                data, timestamp: Date.now()
+            }));
+        } catch (e) { }
+    }
+
+    function cleanupOldCache() {
+        try {
+            const keysToRemove = [];
+            const now = Date.now();
+            for (let i = 0; i < localStorage.length; i++) {
+                const key = localStorage.key(i);
+                if (!key) continue;
+                if (key.startsWith(ICON_CACHE_PREFIX) || key.startsWith(CACHE_PREFIX)) {
+                    try {
+                        const cached = localStorage.getItem(key);
+                        if (cached) {
+                            const parsed = JSON.parse(cached);
+                            const timestamp = parsed.t || parsed.timestamp;
+                            if (now - timestamp > CACHE_TTL) keysToRemove.push(key);
+                        }
+                    } catch (e) {
+                        keysToRemove.push(key);
+                    }
+                }
+            }
+            keysToRemove.forEach(k => localStorage.removeItem(k));
+        } catch (e) { }
+    }
+
+    // One-time purge of corrupted cache entries
+    function purgeCorruptedCache() {
+        const PURGE_KEY = 'ci:purged_v2';
+        if (localStorage.getItem(PURGE_KEY)) return;
+        try {
+            const keysToRemove = [];
+            for (let i = 0; i < localStorage.length; i++) {
+                const key = localStorage.key(i);
+                if (!key || !key.startsWith(ICON_CACHE_PREFIX)) continue;
+                try {
+                    const cached = localStorage.getItem(key);
+                    if (!cached) continue;
+                    const parsed = JSON.parse(cached);
+                    if (typeof parsed.s !== 'string' || parsed.s.includes('[object') || !parsed.s.trim()) {
+                        keysToRemove.push(key);
+                    }
+                } catch (e) {
+                    keysToRemove.push(key);
+                }
+            }
+            keysToRemove.forEach(k => localStorage.removeItem(k));
+            localStorage.setItem(PURGE_KEY, '1');
+        } catch (e) { }
+    }
+
+    purgeCorruptedCache();
+
+    // === ICON DETECTION ===
+
+    function detectPrefix(iconEl) {
+        const dataCollection = iconEl.getAttribute('data-collection');
+        if (dataCollection) return dataCollection;
+
+        const cls = iconEl.classList;
+        if (!cls || cls.length === 0) return null;
+
+        let hasIconClass = false;
+        let prefix = null;
+
+        for (let i = 0; i < cls.length; i++) {
+            const token = cls[i];
+            if (!token) continue;
+
+            if (token.includes('-')) {
+                hasIconClass = true;
+                continue;
+            }
+
+            if (!PREFIX_TOKEN_RE.test(token)) continue;
+            if (DENY_PREFIXES.has(token.toLowerCase())) continue;
+
+            prefix = token;
+        }
+
+        return hasIconClass ? prefix : null;
+    }
+
+    function extractIconName(className, dataCollection) {
+        for (const iconPrefix of ICON_CLASS_PREFIXES) {
+            if (className.startsWith(iconPrefix)) {
+                return className.slice(iconPrefix.length) || null;
+            }
+        }
+        if (dataCollection) {
+            const colPrefix = dataCollection.endsWith('-') ? dataCollection : dataCollection + '-';
+            if (className.startsWith(colPrefix)) {
+                return className.slice(colPrefix.length) || null;
+            }
+        }
+        const dashIndex = className.indexOf('-');
+        if (dashIndex > 0) {
+            return className.slice(dashIndex + 1);
+        }
+        return null;
+    }
+
+    const STYLE_SUFFIXES = new Set([
+        'solid', 'regular', 'brands', 'light', 'thin', 'duotone', 'sharp',
+        'outlined', 'round', 'two-tone', 'filled', 'line', 'bulk',
+        'broken', 'linear', 'twotone', 'outline', 'fill'
+    ]);
+
+    const CSS_UTILITY_PREFIXES = [
+        'text-', 'bg-', 'w-', 'h-', 'p-', 'm-', 'px-', 'py-', 'pt-', 'pb-', 'pl-', 'pr-',
+        'mx-', 'my-', 'mt-', 'mb-', 'ml-', 'mr-', 'gap-', 'space-', 'flex-', 'grid-',
+        'col-', 'row-', 'border-', 'rounded-', 'shadow-', 'opacity-', 'z-', 'top-', 'bottom-',
+        'left-', 'right-', 'inset-', 'min-', 'max-', 'overflow-', 'translate-', 'scale-',
+        'rotate-', 'skew-', 'transition-', 'duration-', 'ease-', 'delay-', 'animate-',
+        'font-', 'leading-', 'tracking-', 'decoration-', 'underline-', 'line-',
+        'hover:', 'focus:', 'active:', 'group-', 'dark:', 'sm:', 'md:', 'lg:', 'xl:',
+        'from-', 'to-', 'via-', 'ring-', 'divide-', 'place-', 'items-', 'justify-',
+        'self-', 'order-', 'cursor-', 'select-', 'resize-', 'fill-', 'stroke-',
+        'object-', 'aspect-', 'columns-', 'break-', 'box-', 'float-', 'clear-',
+        'isolation-', 'overscroll-', 'scroll-', 'snap-', 'touch-', 'appearance-',
+        'outline-', 'accent-', 'caret-', 'will-', 'contain-', 'content-',
+        'data-', 'nav-', 'card-', 'btn-', 'modal-', 'sidebar-', 'editor-',
+        'hero-', 'mobile-', 'search-', 'pagination-', 'collection-', 'explore-',
+        'svg-', 'trending-', 'png-', 'kit-', 'color-', 'section-', 'toolbar-',
+        '-translate-', '-mt-', '-mb-', '-ml-', '-mr-'
+    ];
+
+    function isCSSUtilityClass(token) {
+        const lower = token.toLowerCase();
+        for (const prefix of CSS_UTILITY_PREFIXES) {
+            if (lower.startsWith(prefix)) return true;
+        }
+        if (lower.includes(':')) return true;
+        return false;
+    }
+
+    function getIconNames(iconEl) {
+        const knownPrefixNames = [];
+        const otherNames = [];
+        const cls = iconEl.classList;
+        const dataCollection = iconEl.getAttribute('data-collection') || '';
+
+        for (let i = 0; i < cls.length; i++) {
+            const token = cls[i];
+            if (!token || !token.includes('-')) continue;
+
+            if (isCSSUtilityClass(token)) continue;
+
+            let isKnownPrefix = false;
+            for (const iconPrefix of ICON_CLASS_PREFIXES) {
+                if (token.startsWith(iconPrefix)) {
+                    isKnownPrefix = true;
+                    break;
+                }
+            }
+
+            const name = extractIconName(token, dataCollection);
+            if (name) {
+                if (STYLE_SUFFIXES.has(name.toLowerCase())) continue;
+                if (isKnownPrefix) {
+                    knownPrefixNames.push(name);
+                } else {
+                    otherNames.push(name);
+                }
+            }
+        }
+
+        return knownPrefixNames.length > 0 ? knownPrefixNames : otherNames;
+    }
+
+    // === SVG INJECTION ===
+
+    function isInDOM(element) {
+        return element && element.isConnected !== false && document.body.contains(element);
+    }
+
+    // === MULTI-COLOR DETECTION ===
+    // Detects if an SVG has multiple distinct colors (fill/stroke) that should be preserved.
+    // Returns true if the icon is multi-color and colors should be locked.
+    function isMultiColorSvg(svgString) {
+        // Normalize color values for comparison
+        function normalizeColor(c) {
+            if (!c) return null;
+            c = c.trim().toLowerCase();
+            // Skip non-color values
+            if (c === 'none' || c === 'inherit' || c === 'transparent' || c === 'currentcolor') return null;
+            // Normalize common black representations
+            if (c === '#000' || c === '#000000' || c === 'black' || c === 'rgb(0,0,0)' || c === 'rgb(0, 0, 0)') return '#000000';
+            // Normalize common white representations
+            if (c === '#fff' || c === '#ffffff' || c === 'white' || c === 'rgb(255,255,255)' || c === 'rgb(255, 255, 255)') return '#ffffff';
+            // Expand 3-char hex to 6-char
+            const hex3 = c.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/);
+            if (hex3) return '#' + hex3[1] + hex3[1] + hex3[2] + hex3[2] + hex3[3] + hex3[3];
+            return c;
+        }
+
+        const colors = new Set();
+
+        // 1. Extract colors from fill="..." and stroke="..." attributes
+        const attrRe = /(?:fill|stroke)\s*=\s*"([^"]+)"/gi;
+        let m;
+        while ((m = attrRe.exec(svgString)) !== null) {
+            const nc = normalizeColor(m[1]);
+            if (nc) colors.add(nc);
+        }
+
+        // 2. Extract colors from inline style="..." (fill:...; stroke:...;)
+        const styleAttrRe = /style\s*=\s*"([^"]+)"/gi;
+        while ((m = styleAttrRe.exec(svgString)) !== null) {
+            const styleStr = m[1];
+            const propRe = /(?:fill|stroke)\s*:\s*([^;"\s]+)/gi;
+            let pm;
+            while ((pm = propRe.exec(styleStr)) !== null) {
+                const nc = normalizeColor(pm[1]);
+                if (nc) colors.add(nc);
+            }
+        }
+
+        // 3. Extract colors from <style> blocks (CSS rules)
+        const styleBlockRe = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+        while ((m = styleBlockRe.exec(svgString)) !== null) {
+            const css = m[1];
+            const cssPropRe = /(?:fill|stroke)\s*:\s*([^;}\s]+)/gi;
+            let cm;
+            while ((cm = cssPropRe.exec(css)) !== null) {
+                const nc = normalizeColor(cm[1]);
+                if (nc) colors.add(nc);
+            }
+        }
+
+        // Multi-color = has 2+ distinct non-black colors, OR has black + another color
+        // Single non-black color = also lock (e.g. icon purely in blue should keep blue)
+        if (colors.size >= 2) return true;
+        if (colors.size === 1 && !colors.has('#000000')) return true;
+        return false;
+    }
+
+    function injectSVG(element, svgContent) {
+        if (!isInDOM(element)) return false;
+        if (element.classList.contains('svg-loaded')) return true; // Already injected (racing dedup)
+        if (typeof svgContent !== 'string' || !svgContent.trim()) return false;
+
+        // Detect multi-color before scoping (scoping doesn't change colors)
+        const multiColor = isMultiColorSvg(svgContent);
+
+        // Apply fast SVG scoping to prevent CSS/ID collisions between icons
+        let scopedContent = svgContent;
+
+        // Lock colors for multi-color icons: replace currentColor with #000 so
+        // the icon is fully immune to CSS color inheritance
+        if (multiColor) {
+            // Replace currentColor in attributes: fill="currentColor", stroke="currentColor"
+            scopedContent = scopedContent.replace(/((?:fill|stroke)\s*=\s*")currentColor(")/gi, '$1#000$2');
+            // Replace currentColor in inline styles: style="fill:currentColor" or "stroke: currentColor"
+            scopedContent = scopedContent.replace(/((?:fill|stroke)\s*:\s*)currentColor/gi, '$1#000');
+        }
+        if (scopedContent.includes('<style') || scopedContent.includes('id=')) {
+            const uid = 'ci' + Math.random().toString(36).slice(2, 7);
+
+            // 1. Scope inline <style> CSS classes
+            if (scopedContent.includes('<style')) {
+                scopedContent = scopedContent.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (match, css) => {
+                    return match.replace(css, css.replace(/\.([a-zA-Z0-9_\-]+)/g, '.' + uid + '-$1'));
+                });
+                // Scope the matching class="..." attributes
+                scopedContent = scopedContent.replace(/class="([^"]+)"/gi, (match, classes) => {
+                    if (classes.includes('svg-loaded')) return match; // skip our own wrapper
+                    return 'class="' + classes.split(/\s+/).map(c => c ? uid + '-' + c : '').join(' ') + '"';
+                });
+            }
+
+            // 2. Scope generic IDs (clip-paths, gradients, masks)
+            if (scopedContent.includes('id=')) {
+                scopedContent = scopedContent.replace(/id="([^"]+)"/gi, `id="${uid}-$1"`);
+                scopedContent = scopedContent.replace(/url\(['"]?#([^'"\)]+)['"]?\)/gi, `url(#${uid}-$1)`);
+                scopedContent = scopedContent.replace(/href="#([^"]+)"/gi, `href="#${uid}-$1"`);
+            }
+        }
+
+        element.innerHTML = scopedContent;
+        element.classList.add('svg-loaded');
+
+        // Mark multi-color icons so CSS doesn't override their colors
+        if (multiColor) {
+            element.classList.add('ci-multicolor');
+        }
+
+        const svg = element.querySelector('svg');
+        if (svg) {
+            const originalFill = svg.getAttribute('fill');
+            if (multiColor) {
+                // Multi-color: preserve original colors, only set sizing
+                svg.style.cssText = 'width:1em;height:1em;display:inline-block;vertical-align:middle;';
+            } else {
+                const fillStyle = (originalFill === 'none') ? 'none' : 'currentColor';
+                svg.style.cssText = `width:1em;height:1em;fill:${fillStyle};display:inline-block;vertical-align:middle;`;
+            }
+            
+            if (element.getAttribute('animate') === 'trace') {
+                const isStrokeBased = (originalFill === 'none');
+                svg.style.setProperty('--trace-end-stroke', isStrokeBased ? 'currentColor' : 'transparent');
+                svg.style.setProperty('--trace-end-stroke-width', isStrokeBased ? (svg.getAttribute('stroke-width') || '2px') : '0px');
+                svg.style.setProperty('--trace-stroke-width', isStrokeBased ? (svg.getAttribute('stroke-width') || '2px') : '1px');
+                
+                const paths = svg.querySelectorAll('path, ellipse, circle, rect, polygon, polyline');
+                for (let i = 0; i < paths.length; i++) {
+                    const p = paths[i];
+                    const len = (typeof p.getTotalLength === 'function') ? Math.ceil(p.getTotalLength()) : 400;
+                    p.style.setProperty('--path-len', len);
+                }
+            }
+        }
+
+        return true;
+    }
+
+    function tryInjectFromCache(iconEl, prefix, iconName) {
+        const svg = getFromMemory(prefix, iconName) || getPerIconCache(prefix, iconName);
+        if (svg) {
+            iconEl.classList.add('cache-hit');
+            injectSVG(iconEl, svg);
+            return true;
+        }
+        return false;
+    }
+
+    // === ICON REGISTRATION ===
+
+    // === VICONIC ELEMENT REGISTRATION ===
+
+    function registerViconicIcon(el) {
+        if (!el || el.nodeType !== 1) return;
+        if (processedElements.has(el)) return;
+        processedElements.add(el);
+
+        const iconAttr = el.getAttribute('icon');
+        const parsed = parseViconicIcon(iconAttr);
+        if (!parsed) {
+            if (iconAttr) console.warn(`[CopyIcons] ⚠️ Cannot parse viconic-icon icon="${iconAttr}"`);
+            return;
+        }
+
+        const { prefix, iconName } = parsed;
+
+        if (tryInjectFromCache(el, prefix, iconName)) {
+            return;
+        }
+
+        if (!pendingIcons.has(prefix)) {
+            pendingIcons.set(prefix, []);
+        }
+        pendingIcons.get(prefix).push({ element: el, iconName });
+        scheduleBatchLoad();
+    }
+
+    function registerIcon(iconEl) {
+        if (!iconEl || iconEl.nodeType !== 1) return;
+        if (processedElements.has(iconEl)) return;
+        processedElements.add(iconEl);
+
+        const prefix = detectPrefix(iconEl);
+        if (!prefix) return;
+
+        const iconNames = getIconNames(iconEl);
+        if (iconNames.length === 0) return;
+
+        const iconName = iconNames[0];
+        if (tryInjectFromCache(iconEl, prefix, iconName)) {
+            return; // Cache hit - done synchronously!
+        }
+
+        // Cache miss - queue for network fetch
+        if (!pendingIcons.has(prefix)) {
+            pendingIcons.set(prefix, []);
+        }
+        pendingIcons.get(prefix).push({ element: iconEl, iconName: iconName });
+
+        scheduleBatchLoad();
+    }
+
+    function scheduleBatchLoad() {
+        if (batchTimer) return;
+        batchTimer = true;
+        // Use setTimeout(0) instead of queueMicrotask so ALL icons from
+        // processMutationBatch() get registered first, THEN loadPendingSVGs
+        // fires once with the full batch. queueMicrotask fires too early
+        // (after first registerIcon, before loop finishes).
+        setTimeout(() => {
+            batchTimer = null;
+            loadPendingSVGs();
+        }, 0);
+    }
+
+    function clearPending() {
+        if (batchTimer) {
+            clearTimeout(batchTimer);
+            batchTimer = null;
+        }
+        pendingIcons.clear();
+        processedElements = new WeakSet();
+        currentLoadId++;
+        inflightFetches.clear();
+
+        mutationBatch.length = 0;
+        if (mutationBatchTimer) {
+            clearTimeout(mutationBatchTimer);
+            mutationBatchTimer = null;
+        }
+    }
+
+    // === SVG LOADING (CDN Bundle Direct v8.0) ===
+
+    async function loadPendingSVGs() {
+        if (pendingIcons.size === 0) return;
+        const loadId = ++currentLoadId;
+
+        // Collect all prefix groups
+        const groups = new Map();
+        for (const [prefix, iconList] of pendingIcons) {
+            const iconNames = [...new Set(iconList.map(i => i.iconName))];
+            groups.set(prefix, { iconNames, iconList });
+        }
+        pendingIcons.clear();
+
+        // Phase 1: Inject cached + collect uncached (sync, zero network)
+        const uncachedGroups = new Map();
+        let totalUncached = 0;
+
+        for (const [prefix, { iconNames, iconList }] of groups) {
+            if (failedPrefixes.has(prefix)) continue;
+
+            const elementMap = new Map();
+            for (const { element, iconName } of iconList) {
+                if (!elementMap.has(iconName)) elementMap.set(iconName, []);
+                elementMap.get(iconName).push(element);
+            }
+
+            // Inject cached icons immediately (sync)
+            const uncachedNames = [];
+            for (const iconName of iconNames) {
+                const svg = getFromMemory(prefix, iconName) || getPerIconCache(prefix, iconName);
+                if (svg) {
+                    const elements = elementMap.get(iconName);
+                    if (elements) for (const el of elements) { el.classList.add('cache-hit'); injectSVG(el, svg); }
+                } else {
+                    uncachedNames.push(iconName);
+                }
+            }
+            if (uncachedNames.length === 0) continue;
+
+            uncachedGroups.set(prefix, { uncachedNames, elementMap });
+            totalUncached += uncachedNames.length;
+        }
+
+        if (totalUncached === 0 || loadId !== currentLoadId) return;
+
+        // ================================================================
+        // Phase 2: CDN-FIRST — fetch SVGs directly from R2 CDN
+        //
+        // NO server API calls. Fetch individual SVGs from R2 CDN.
+        // Browser HTTP/2 multiplexes ALL requests on ONE connection.
+        // 100 SVGs × ~500B on 1 HTTP/2 conn ≈ 300-500ms total.
+        //
+        // Why this is fast:
+        // - R2 CDN is behind Cloudflare → HTTP/2 + edge cache
+        // - Browser sends all requests simultaneously on 1 connection
+        // - Each SVG is tiny (~500B) → minimal transfer time
+        // - No server processing, no R2 bundle downloads, no DB queries
+        //
+        // For collection pages (≥80 icons same prefix) → CDN bundle.
+        // ================================================================
+
+        const t0 = performance.now();
+        const map = await loadPrefixMap();
+        if (loadId !== currentLoadId) return;
+
+        const bundlePromises = [];
+        const cdnPromises = [];
+        const unmappedIcons = []; // Icons without CDN mapping
+        let cdnCount = 0;
+
+        for (const [prefix, { uncachedNames, elementMap }] of uncachedGroups) {
+            const cdnBase = map?.[prefix];
+
+            // No CDN mapping → skip (will be unresolved)
+            if (!cdnBase) {
+                unmappedIcons.push({ prefix, uncachedNames, elementMap });
+                continue;
+            }
+
+            // Collection pages: use bundle for large same-prefix groups
+            if (uncachedNames.length >= BUNDLE_THRESHOLD) {
+                bundlePromises.push(
+                    loadIconsFromBundle(prefix, cdnBase, uncachedNames, elementMap).catch(() => {
+                        // Bundle failed → fall back to individual CDN fetches
+                        for (const name of uncachedNames) {
+                            cdnPromises.push(fetchAndInjectCDN(prefix, name, cdnBase, elementMap));
+                        }
+                    })
+                );
+                continue;
+            }
+
+            // CDN-FIRST: Fire individual SVG fetches — NO concurrency limit
+            // Browser HTTP/2 handles multiplexing on one connection
+            for (const name of uncachedNames) {
+                cdnCount++;
+                cdnPromises.push(fetchAndInjectCDN(prefix, name, cdnBase, elementMap));
+            }
+        }
+
+        // Single reusable fetch+inject function
+        async function fetchAndInjectCDN(prefix, name, cdnBase, elementMap) {
+            if (getFromMemory(prefix, name)) {
+                const els = elementMap.get(name);
+                if (els) for (const el of els) injectSVG(el, getFromMemory(prefix, name));
+                return { ok: true, prefix, name };
+            }
+            try {
+                const resp = await Promise.race([
+                    fetch(`${cdnBase}/${name}.svg`).catch(() => null),
+                    new Promise(r => setTimeout(() => r(null), CDN_TIMEOUT))
+                ]);
+                if (!resp || !resp.ok) return { ok: false, prefix, name };
+                const svg = await resp.text();
+                if (!svg || !svg.includes('<')) return { ok: false, prefix, name };
+                setToMemory(prefix, name, svg);
+                deferCacheWrite(prefix, name, svg);
+                const els = elementMap.get(name);
+                if (els) for (const el of els) injectSVG(el, svg);
+                return { ok: true, prefix, name };
+            } catch (e) {
+                return { ok: false, prefix, name };
+            }
+        }
+
+        // Fire ALL CDN fetches + bundles simultaneously
+        const cdnResults = await Promise.allSettled([...bundlePromises, ...cdnPromises]);
+
+        // Phase 3: Collect ALL failed icons (CDN failures + unmapped) → API fallback
+        // Group CDN failures by prefix for batch API call
+        const failedByPrefix = new Map();
+        for (const result of cdnResults) {
+            const val = result.status === 'fulfilled' ? result.value : null;
+            if (val && !val.ok && val.prefix && val.name) {
+                if (!failedByPrefix.has(val.prefix)) failedByPrefix.set(val.prefix, []);
+                failedByPrefix.get(val.prefix).push(val.name);
+            }
+        }
+
+        // Merge unmapped icons into the same fallback
+        for (const task of unmappedIcons) {
+            if (!failedByPrefix.has(task.prefix)) failedByPrefix.set(task.prefix, []);
+            failedByPrefix.get(task.prefix).push(...task.uncachedNames);
+        }
+
+        // Build combined element map for all groups
+        const allElementMaps = new Map();
+        for (const [prefix, { elementMap }] of uncachedGroups) {
+            allElementMaps.set(prefix, elementMap);
+        }
+        for (const task of unmappedIcons) {
+            allElementMaps.set(task.prefix, task.elementMap);
+        }
+
+        // API fallback for all failed icons
+        if (failedByPrefix.size > 0 && loadId === currentLoadId) {
+            const q = [...failedByPrefix.entries()]
+                .map(([prefix, names]) => `${prefix}:${names.join(',')}`)
+                .join('|');
+            try {
+                const resp = await Promise.race([
+                    fetch(`${config.batchApiBase}/api/v1/subset/multi-prefix/?q=${encodeURIComponent(q)}`).catch(() => null),
+                    new Promise(r => setTimeout(() => r(null), API_TIMEOUT))
+                ]);
+                if (resp?.ok) {
+                    const data = await resp.json().catch(() => null);
+                    if (data?.results) {
+                        for (const [prefix, names] of failedByPrefix) {
+                            const prefixResult = data.results[prefix];
+                            if (!prefixResult) continue;
+                            const elementMap = allElementMaps.get(prefix);
+                            for (const name of names) {
+                                const iconData = prefixResult[name];
+                                const svg = typeof iconData === 'string' ? iconData : iconData?.svg;
+                                if (!svg || typeof svg !== 'string' || !svg.includes('<')) continue;
+                                setToMemory(prefix, name, svg);
+                                deferCacheWrite(prefix, name, svg);
+                                if (elementMap) {
+                                    const els = elementMap.get(name);
+                                    if (els) for (const el of els) injectSVG(el, svg);
+                                }
+                            }
+                        }
+                    }
+                }
+            } catch (e) { }
+        }
+
+        const elapsed = Math.round(performance.now() - t0);
+        const unmappedCount = unmappedIcons.reduce((sum, g) => sum + g.uncachedNames.length, 0);
+        const info = unmappedCount > 0 ? ` (${cdnCount} CDN + ${unmappedCount} API)` : '';
+        console.log(`[CopyIcons] ⚡ ${totalUncached} icons in ${elapsed}ms${info}`);
+    }
+
+    // === CDN BUNDLE DIRECT: Fetch entire collection bundle from CDN, parse client-side ===
+    // This BYPASSES Django entirely — 5-10x faster than API path
+    // prefix-map: { "sol": "https://cdn/icons/solar-icons-1.0" }
+    // → collectionId = "solar-icons-1.0"
+    // → bundle URL = "https://cdn/collections/solar-icons-1.0/icons_svg.json"
+    const bundleInflight = new Map(); // collectionId → Promise
+
+    function getCollectionId(cdnBase) {
+        // cdnBase = "https://cdn.domain/icons/flowbite-icons" → "flowbite-icons"
+        if (!cdnBase) return null;
+        const parts = cdnBase.split('/icons/');
+        return parts.length > 1 ? parts[parts.length - 1] : null;
+    }
+
+    async function fetchBundleFromCDN(collectionId) {
+        const cached = bundleCache.get(collectionId);
+        if (cached) {
+            cached.accessTime = Date.now();
+            return cached.data;
+        }
+        if (bundleInflight.has(collectionId)) return bundleInflight.get(collectionId);
+
+        const promise = (async () => {
+            // Try gzip first (always available), then uncompressed (small collections only)
+            const urls = [
+                `https://${config.cdnDomain}/collections/${collectionId}/icons_svg.json.gz`,
+                `https://${config.cdnDomain}/collections/${collectionId}/icons_svg.json`,
+            ];
+
+            for (const url of urls) {
+                try {
+                    const resp = await Promise.race([
+                        fetch(url).catch(() => null),
+                        new Promise(resolve => setTimeout(() => resolve(null), BUNDLE_TIMEOUT))
+                    ]);
+
+                    if (!resp || !resp.ok) continue;
+
+                    const data = await resp.json().catch(() => null);
+                    if (data && typeof data === 'object' && Object.keys(data).length > 0) {
+                        const iconCount = Object.keys(data).length;
+                        // Estimate memory: ~500 bytes per SVG on average
+                        const estimatedSize = iconCount * 500;
+
+                        // Evict oldest bundles if over limit
+                        enforceBundleCacheLimit();
+
+                        bundleCache.set(collectionId, {
+                            data,
+                            accessTime: Date.now(),
+                            size: estimatedSize,
+                            iconCount
+                        });
+                        console.log(`[CopyIcons] 📦 Bundle loaded: ${collectionId} (${iconCount} icons from CDN, ~${Math.round(estimatedSize / 1024)}KB)`);
+                        return data;
+                    }
+                } catch (e) { continue; }
+            }
+            return null;
+        })();
+
+        bundleInflight.set(collectionId, promise);
+        promise.finally(() => bundleInflight.delete(collectionId));
+        return promise;
+    }
+
+    function enforceBundleCacheLimit() {
+        while (bundleCache.size >= MAX_BUNDLE_CACHE) {
+            // Evict least recently accessed
+            let oldestKey = null;
+            let oldestTime = Infinity;
+            for (const [key, entry] of bundleCache) {
+                if (entry.accessTime < oldestTime) {
+                    oldestTime = entry.accessTime;
+                    oldestKey = key;
+                }
+            }
+            if (oldestKey) {
+                const evicted = bundleCache.get(oldestKey);
+                bundleCache.delete(oldestKey);
+                console.log(`[CopyIcons] 🗑️ Bundle evicted: ${oldestKey} (${evicted.iconCount} icons, ~${Math.round(evicted.size / 1024)}KB)`);
+            } else {
+                break;
+            }
+        }
+    }
+
+    // === CDN BUNDLE: Extract icons from bundle + inject into elements ===
+    async function loadIconsFromBundle(prefix, cdnBase, iconNames, elementMap) {
+        const collectionId = getCollectionId(cdnBase);
+        if (!collectionId) return 0;
+
+        const bundle = await fetchBundleFromCDN(collectionId);
+        if (!bundle) return 0;
+
+        let loadedCount = 0;
+        for (const name of iconNames) {
+            // Skip already loaded (from parallel CDN individual or cache)
+            if (getFromMemory(prefix, name)) continue;
+
+            const svg = bundle[name];
+            if (!svg || typeof svg !== 'string' || !svg.includes('<')) continue;
+
+            setToMemory(prefix, name, svg);
+            deferCacheWrite(prefix, name, svg);
+
+            if (elementMap) {
+                const elements = elementMap.get(name);
+                if (elements) {
+                    for (const el of elements) {
+                        if (isInDOM(el)) injectSVG(el, svg);
+                    }
+                    loadedCount += elements.length;
+                }
+            } else {
+                // Auto stream-inject: find matching DOM elements (both <i> and <viconic-icon>)
+                try {
+                    const iCandidates = document.querySelectorAll(`i.${CSS.escape(prefix)}:not(.svg-loaded)`);
+                    for (const el of iCandidates) {
+                        const names = getIconNames(el);
+                        if (names.includes(name)) {
+                            injectSVG(el, svg);
+                            loadedCount++;
+                        }
+                    }
+                    const vCandidates = document.querySelectorAll(`viconic-icon[icon]:not(.svg-loaded)`);
+                    for (const el of vCandidates) {
+                        const parsed = parseViconicIcon(el.getAttribute('icon'));
+                        if (parsed && parsed.prefix === prefix && parsed.iconName === name) {
+                            injectSVG(el, svg);
+                            loadedCount++;
+                        }
+                    }
+                } catch (e) { }
+            }
+        }
+
+        // After extracting needed icons, save ALL remaining bundle icons
+        // to localStorage (deferred), then evict the bundle from memory.
+        // This keeps memory low while ensuring future pages hit localStorage cache.
+        scheduleBundleFlush(collectionId, prefix);
+
+        return loadedCount;
+    }
+
+    function scheduleBundleFlush(collectionId, prefix) {
+        // VICONIC OPTIMIZATION: 
+        // Do NOT flush 14,000 icons into localStorage (causes QuotaExceededError and lag).
+        // Instead, we just keep the bundle in bundleCache (RAM). 
+        // MAX_BUNDLE_CACHE (2) ensures we only keep ~14MB of heap max.
+        // The first load takes 1s, but subsequent paginations within the same 
+        // collection will be 0ms instant from memory!
+        console.log(`[CopyIcons] ✨ Bundle preserved in memory: ${collectionId} (Fast Pagination Enabled)`);
+    }
+
+    // === MULTI-PREFIX BATCH: One HTTP request for icons from ALL collections ===
+    async function fetchMultiPrefix(bulkPrefixes, map) {
+        const loadId = currentLoadId;
+
+        // Build query: sol:user,home|flo:arrow-left
+        const queryParts = [];
+        for (const [prefix, { uncachedNames }] of bulkPrefixes) {
+            queryParts.push(`${prefix}:${uncachedNames.join(',')}`);
+        }
+        const q = queryParts.join('|');
+
+        try {
+            const url = `${config.batchApiBase}/api/v1/subset/multi-prefix/?q=${encodeURIComponent(q)}`;
+            const response = await Promise.race([
+                fetch(url).catch(() => null),
+                new Promise(resolve => setTimeout(() => resolve(null), API_TIMEOUT))
+            ]);
+
+            if (response && response.ok) {
+                const data = await response.json();
+                if (loadId !== currentLoadId) return;
+
+                let totalLoaded = 0;
+                const results = data.results || {};
+
+                for (const [prefix, icons] of Object.entries(results)) {
+                    const group = bulkPrefixes.get(prefix);
+                    if (!group) continue;
+
+                    for (const [name, svgData] of Object.entries(icons)) {
+                        // Skip icons CDN already loaded (dual-path dedup)
+                        if (getFromMemory(prefix, name)) continue;
+
+                        const svg = extractSvg(svgData);
+                        if (!svg || typeof svg !== 'string' || !svg.trim()) continue;
+
+                        setToMemory(prefix, name, svg);
+                        deferCacheWrite(prefix, name, svg);
+
+                        const elements = group.elementMap.get(name);
+                        if (elements) {
+                            for (const el of elements) {
+                                if (isInDOM(el)) injectSVG(el, svg);
+                            }
+                            totalLoaded += elements.length;
+                        }
+                    }
+                }
+
+                if (totalLoaded > 0) {
+                    console.log(`[CopyIcons] ✅ ${totalLoaded} icons loaded via multi-prefix batch (${bulkPrefixes.size} collections)`);
+                }
+                return; // Success - done
+            }
+        } catch (e) { /* multi-prefix failed, fallback below */ }
+
+        // === FALLBACK: per-prefix API batch (if multi-prefix endpoint not available) ===
+        const fallbackPromises = [];
+        for (const [prefix, { uncachedNames, elementMap }] of bulkPrefixes) {
+            fallbackPromises.push(
+                fetchIconsViaAPI(prefix, uncachedNames, elementMap)
+                    .then(count => {
+                        if (count > 0) console.log(`[CopyIcons] ✅ ${count} icons loaded for "${prefix}" (API batch)`);
+                    })
+            );
+        }
+        await Promise.allSettled(fallbackPromises);
+    }
+
+    // === EXTRACT SVG from API response (handles both object and string formats) ===
+    function extractSvg(iconData) {
+        if (typeof iconData === 'string') return iconData;
+        if (typeof iconData === 'object' && iconData !== null) return iconData.svg || '';
+        return '';
+    }
+
+    // === API BATCH FETCH: ONE request returns all icons for a prefix ===
+    async function fetchIconsViaAPI(prefix, iconNames, elementMap) {
+        if (failedPrefixes.has(prefix)) return 0;
+
+        const MAX_BATCH = 100;
+        let totalLoaded = 0;
+
+        // Split into batches of 100 (API limit)
+        const batches = [];
+        for (let i = 0; i < iconNames.length; i += MAX_BATCH) {
+            batches.push(iconNames.slice(i, i + MAX_BATCH));
+        }
+
+        // Fire all batches in parallel (usually just 1 batch)
+        const loadId = currentLoadId;
+        const batchPromises = batches.map(async (batch) => {
+            if (loadId !== currentLoadId) return;
+            try {
+                const url = `${config.batchApiBase}/api/v1/subset/by-prefix/?prefix=${encodeURIComponent(prefix)}&icons=${encodeURIComponent(batch.join(','))}`;
+                const response = await Promise.race([
+                    fetch(url).catch(() => null),
+                    new Promise(resolve => setTimeout(() => resolve(null), API_TIMEOUT))
+                ]);
+
+                if (!response) return; // AbortError or network error
+                if (!response.ok) {
+                    if (response.status === 404) failedPrefixes.add(prefix);
+                    return;
+                }
+
+                const data = await response.json();
+                if (loadId !== currentLoadId || data.error) return;
+
+                for (const [name, iconData] of Object.entries(data.icons || {})) {
+                    const svg = extractSvg(iconData);
+                    if (!svg || typeof svg !== 'string' || !svg.trim()) continue;
+
+                    // Memory cache + deferred localStorage write
+                    setToMemory(prefix, name, svg);
+                    deferCacheWrite(prefix, name, svg);
+
+                    // Inject immediately into DOM
+                    if (elementMap) {
+                        const elements = elementMap.get(name);
+                        if (elements) {
+                            for (const el of elements) {
+                                if (isInDOM(el)) injectSVG(el, svg);
+                            }
+                            totalLoaded += elements.length;
+                        }
+                    } else {
+                        // Auto stream-inject: find matching DOM elements (both <i> and <viconic-icon>)
+                        try {
+                            const iCandidates = document.querySelectorAll(`i.${CSS.escape(prefix)}:not(.svg-loaded)`);
+                            for (const el of iCandidates) {
+                                const names = getIconNames(el);
+                                if (names.includes(name)) {
+                                    injectSVG(el, svg);
+                                    totalLoaded++;
+                                }
+                            }
+                            const vCandidates = document.querySelectorAll(`viconic-icon[icon]:not(.svg-loaded)`);
+                            for (const el of vCandidates) {
+                                const parsed = parseViconicIcon(el.getAttribute('icon'));
+                                if (parsed && parsed.prefix === prefix && parsed.iconName === name) {
+                                    injectSVG(el, svg);
+                                    totalLoaded++;
+                                }
+                            }
+                        } catch (e) { }
+                    }
+                }
+            } catch (e) { /* timeout or network error */ }
+        });
+
+        await Promise.allSettled(batchPromises);
+        return totalLoaded;
+    }
+
+    // === CDN STREAM-INJECT: Each icon appears as its fetch resolves ===
+    // Uses concurrency pool to avoid overwhelming the connection
+    async function fetchIconsViaCDN(prefix, cdnBase, iconNames, elementMap) {
+        const loadId = currentLoadId;
+        let loadedCount = 0;
+        let failCount = 0;
+        let notFoundCount = 0; // 404s = file doesn't exist on R2
+        const t0 = performance.now();
+
+        // Concurrency pool: process CDN_CONCURRENCY fetches at a time
+        // HTTP/2 multiplexing makes 30+ parallel requests on 1 connection very fast
+        let index = 0;
+
+        function nextFetch() {
+            if (index >= iconNames.length || loadId !== currentLoadId) return null;
+            const name = iconNames[index++];
+
+            // Skip if already loaded (by parallel preloadMulti or earlier fetch)
+            const cached = getFromMemory(prefix, name);
+            if (cached) {
+                loadedCount++;
+                if (elementMap) {
+                    const elements = elementMap.get(name);
+                    if (elements) {
+                        for (const el of elements) {
+                            if (isInDOM(el)) injectSVG(el, cached);
+                        }
+                    }
+                }
+                return Promise.resolve();
+            }
+
+            const url = `${cdnBase}/${name}.svg`;
+
+            return (async () => {
+                const t1 = performance.now();
+                const resp = await Promise.race([
+                    fetch(url).catch(() => null),
+                    new Promise(resolve => setTimeout(() => resolve(null), CDN_TIMEOUT))
+                ]);
+
+                if (!resp) {
+                    failCount++; // timeout or network error
+                    return;
+                }
+                if (!resp.ok) {
+                    if (resp.status === 404) notFoundCount++; // file doesn't exist on R2
+                    failCount++;
+                    return;
+                }
+
+                const svg = await resp.text().catch(() => '');
+                if (!svg || !svg.includes('<')) return;
+
+                setToMemory(prefix, name, svg);
+                deferCacheWrite(prefix, name, svg);
+                loadedCount++;
+
+                // Stream inject: show this icon NOW (tải đến đâu hiện đến đó)
+                if (elementMap) {
+                    const elements = elementMap.get(name);
+                    if (elements) {
+                        for (const el of elements) {
+                            if (isInDOM(el)) injectSVG(el, svg);
+                        }
+                    }
+                } else {
+                    // Auto stream-inject: preloadMulti has no elementMap,
+                    // so scan DOM for matching elements and inject immediately
+                    try {
+                        const iCandidates = document.querySelectorAll(`i.${CSS.escape(prefix)}:not(.svg-loaded)`);
+                        for (const el of iCandidates) {
+                            const names = getIconNames(el);
+                            if (names.includes(name)) {
+                                injectSVG(el, svg);
+                            }
+                        }
+                        const vCandidates = document.querySelectorAll(`viconic-icon[icon]:not(.svg-loaded)`);
+                        for (const el of vCandidates) {
+                            const parsed = parseViconicIcon(el.getAttribute('icon'));
+                            if (parsed && parsed.prefix === prefix && parsed.iconName === name) {
+                                injectSVG(el, svg);
+                            }
+                        }
+                    } catch (e) { }
+                }
+            })();
+        }
+
+        // Run all fetches with concurrency pool
+        async function runPool() {
+            const running = new Set();
+            for (let i = 0; i < Math.min(CDN_CONCURRENCY, iconNames.length); i++) {
+                const p = nextFetch();
+                if (p) { running.add(p); p.finally(() => running.delete(p)); }
+            }
+
+            while (running.size > 0) {
+                await Promise.race(running).catch(() => { });
+                const p = nextFetch();
+                if (p) { running.add(p); p.finally(() => running.delete(p)); }
+            }
+        }
+
+        await runPool();
+        const elapsed = Math.round(performance.now() - t0);
+        if (loadedCount > 0 || failCount > 0) {
+            console.log(`[CopyIcons] 📊 CDN "${prefix}": ${loadedCount}/${iconNames.length} loaded, ${failCount} failed (${notFoundCount} not-found), ${elapsed}ms`);
+        }
+        return { loadedCount, failCount, notFoundCount };
+    }
+
+    // === MAIN LOAD: CDN-first with API fallback ===
+
+    async function loadSVGsForPrefix(prefix, iconNames, iconList) {
+        if (failedPrefixes.has(prefix)) return;
+
+        // Build element map: iconName -> [elements]
+        const elementMap = new Map();
+        for (const { element, iconName } of iconList) {
+            if (!elementMap.has(iconName)) elementMap.set(iconName, []);
+            elementMap.get(iconName).push(element);
+        }
+
+        // Step 1: Inject cached icons immediately (sync)
+        const uncachedNames = [];
+        for (const iconName of iconNames) {
+            const svg = getFromMemory(prefix, iconName) || getPerIconCache(prefix, iconName);
+            if (svg) {
+                const elements = elementMap.get(iconName);
+                if (elements) {
+                    for (const el of elements) injectSVG(el, svg);
+                }
+            } else {
+                uncachedNames.push(iconName);
+            }
+        }
+
+        if (uncachedNames.length === 0) return;
+
+        // Step 2: If there's an in-flight preload, wait and re-check cache
+        if (inflightFetches.has(prefix)) {
+            try { await inflightFetches.get(prefix); } catch (e) { }
+
+            const stillUncached = [];
+            for (const name of uncachedNames) {
+                const svg = getFromMemory(prefix, name);
+                if (svg) {
+                    const elements = elementMap.get(name);
+                    if (elements) {
+                        for (const el of elements) injectSVG(el, svg);
+                    }
+                } else {
+                    stillUncached.push(name);
+                }
+            }
+            if (stillUncached.length === 0) return;
+            uncachedNames.length = 0;
+            uncachedNames.push(...stillUncached);
+        }
+
+        // Step 3: CDN-first strategy
+        const map = await loadPrefixMap();
+        const cdnBase = map[prefix];
+        let loadedCount = 0;
+
+        if (cdnBase) {
+            const colId = getCollectionId(cdnBase);
+            const bundleEntry = bundleCache.get(colId);
+            if (bundleEntry) bundleEntry.accessTime = Date.now();
+            const useBundle = uncachedNames.length >= BUNDLE_THRESHOLD || !!bundleEntry;
+
+            if (useBundle) {
+                // BUNDLE path: many icons or bundle already cached
+                loadedCount = await loadIconsFromBundle(prefix, cdnBase, uncachedNames, elementMap);
+            } else {
+                // INDIVIDUAL CDN path
+                loadedCount = await fetchIconsViaCDN(prefix, cdnBase, uncachedNames, elementMap);
+
+                // Smart fallback: bundle only when enough icons failed (>= 10)
+                // For 1-9 icons, API is faster than downloading 300KB+ bundle
+                const afterCDN = uncachedNames.filter(n => !getFromMemory(prefix, n));
+                const BUNDLE_FALLBACK_MIN = 10;
+                if (afterCDN.length >= BUNDLE_FALLBACK_MIN) {
+                    console.log(`[CopyIcons] 🔄 "${prefix}": ${afterCDN.length}/${uncachedNames.length} CDN failures → bundle fallback`);
+                    try {
+                        const bundleLoaded = await loadIconsFromBundle(prefix, cdnBase, afterCDN, elementMap);
+                        loadedCount += bundleLoaded;
+                    } catch (e) { }
+                }
+            }
+
+            // Final API fallback for any remaining
+            const remaining = uncachedNames.filter(n => !getFromMemory(prefix, n));
+            if (remaining.length > 0) {
+                const apiLoaded = await fetchIconsViaAPI(prefix, remaining, elementMap);
+                loadedCount += apiLoaded;
+            }
+        } else {
+            // === NO CDN ENTRY: API batch only ===
+            loadedCount = await fetchIconsViaAPI(prefix, uncachedNames, elementMap);
+        }
+
+        if (loadedCount > 0) {
+            console.log(`[CopyIcons] ✅ ${loadedCount} icons for "${prefix}" (${cdnBase ? 'CDN+fallback' : 'API'})`);
+        }
+    }
+
+    // === BATCH SVG INJECTION (legacy, used by injectSVGs) ===
+
+    function injectSVGs(iconList, svgData) {
+        const BATCH_SIZE = 100;
+        let index = 0;
+
+        function processBatch() {
+            const end = Math.min(index + BATCH_SIZE, iconList.length);
+            for (let i = index; i < end; i++) {
+                const { element, iconName } = iconList[i];
+                if (!svgData[iconName]) continue;
+
+                const iconInfo = svgData[iconName];
+                let svgContent = (typeof iconInfo === 'object' && iconInfo !== null) ? (iconInfo.svg || '') : (typeof iconInfo === 'string' ? iconInfo : '');
+                if (!svgContent || typeof svgContent !== 'string') continue;
+
+                const bgType = element.dataset.bgType;
+                if (bgType && bgType !== 'none') {
+                    svgContent = addBackground(svgContent, element.dataset);
+                }
+                injectSVG(element, svgContent);
+            }
+            index = end;
+            if (index < iconList.length) requestAnimationFrame(processBatch);
+        }
+
+        if (iconList.length <= BATCH_SIZE) {
+            processBatch();
+        } else {
+            requestAnimationFrame(processBatch);
+        }
+    }
+
+    function addBackground(svgContent, dataset) {
+        const bgColor = dataset.bgColor || '#6366f1';
+        const bgScale = parseFloat(dataset.bgScale || '1');
+        const bgType = dataset.bgType;
+
+        const vbMatch = svgContent.match(/viewBox=["']([^"']+)["']/);
+        if (!vbMatch) return svgContent;
+
+        const [minX, minY, width, height] = vbMatch[1].split(/[\s,]+/).map(parseFloat);
+        const baseSize = Math.min(width, height);
+        const centerX = minX + width / 2;
+        const centerY = minY + height / 2;
+        const bgSize = Math.min(baseSize * 0.7 * bgScale, baseSize);
+
+        let bgShape = '';
+        if (bgType === 'circle') {
+            bgShape = `<circle cx="${centerX}" cy="${centerY}" r="${bgSize / 2}" fill="${bgColor}" />`;
+        } else if (bgType === 'square') {
+            bgShape = `<rect x="${centerX - bgSize / 2}" y="${centerY - bgSize / 2}" width="${bgSize}" height="${bgSize}" fill="${bgColor}" />`;
+        } else if (bgType === 'rounded') {
+            const radius = bgSize * 0.15;
+            bgShape = `<rect x="${centerX - bgSize / 2}" y="${centerY - bgSize / 2}" width="${bgSize}" height="${bgSize}" rx="${radius}" ry="${radius}" fill="${bgColor}" />`;
+        }
+
+        return svgContent.replace(/(<svg[^>]*>)/, `$1${bgShape}`);
+    }
+
+    // === DOM SCANNING ===
+
+    function scanDOM(root = document) {
+        const icons = root.querySelectorAll('i[class], i[data-collection]');
+        for (let i = 0; i < icons.length; i++) {
+            registerIcon(icons[i]);
+        }
+        const viconics = root.querySelectorAll('viconic-icon[icon]');
+        for (let i = 0; i < viconics.length; i++) {
+            registerViconicIcon(viconics[i]);
+        }
+    }
+
+    // === LAZY LOADING ===
+
+    function setupLazyLoading() {
+        if (!config.lazy || !('IntersectionObserver' in window)) return;
+
+        intersectionObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    registerIcon(entry.target);
+                    intersectionObserver.unobserve(entry.target);
+                }
+            });
+        }, {
+            rootMargin: '100px'
+        });
+    }
+
+    function registerIconLazy(iconEl) {
+        if (config.lazy && intersectionObserver) {
+            intersectionObserver.observe(iconEl);
+        } else {
+            registerIcon(iconEl);
+        }
+    }
+
+    // === MUTATION OBSERVER ===
+
+    let mutationBatchTimer = null;
+    let mutationBatch = [];
+
+    function setupMutationObserver() {
+        if (mutationObserver) return;
+
+        mutationObserver = new MutationObserver((mutations) => {
+            for (const m of mutations) {
+                if (!m.addedNodes || m.addedNodes.length === 0) continue;
+                for (const node of m.addedNodes) {
+                    if (node.nodeType !== 1) continue;
+                    mutationBatch.push(node);
+                }
+            }
+
+            if (mutationBatch.length > 500) {
+                mutationBatch.splice(0, mutationBatch.length - 200);
+            }
+
+            if (mutationBatchTimer) clearTimeout(mutationBatchTimer);
+            if (mutationBatch.length > 20) {
+                mutationBatchTimer = setTimeout(processMutationBatch, 16);
+            } else {
+                mutationBatchTimer = setTimeout(processMutationBatch, 5);
+            }
+        });
+
+        if (document.body) {
+            mutationObserver.observe(document.body, { childList: true, subtree: true });
+        }
+    }
+
+    function processMutationBatch() {
+        if (mutationBatch.length === 0) return;
+
+        const nodes = mutationBatch.splice(0);
+
+        for (const node of nodes) {
+            if (!isInDOM(node)) continue;
+
+            if (node.tagName === 'I') {
+                registerIcon(node);
+            } else if (node.tagName === 'VICONIC-ICON') {
+                registerViconicIcon(node);
+            } else if (node.querySelectorAll) {
+                const icons = node.querySelectorAll('i[class], i[data-collection]');
+                icons.forEach(registerIcon);
+                const viconics = node.querySelectorAll('viconic-icon[icon]');
+                viconics.forEach(registerViconicIcon);
+            }
+        }
+    }
+
+    // === MEMORY MONITORING & COMPACTION ===
+
+    let memoryCheckTimer = null;
+
+    function getMemoryUsageMB() {
+        // Chrome/Edge: performance.memory (non-standard but widely available)
+        if (performance && performance.memory) {
+            return Math.round(performance.memory.usedJSHeapSize / (1024 * 1024));
+        }
+        return null;
+    }
+
+    function compactMemory(aggressive = false) {
+        // 1. Compact memoryCache: keep only most recent entries
+        const keepCount = aggressive ? 50 : 100;
+        if (memoryCache.size > keepCount) {
+            const keysToDelete = [...memoryCache.keys()].slice(0, memoryCache.size - keepCount);
+            for (const k of keysToDelete) memoryCache.delete(k);
+        }
+
+        // 2. Clear ALL bundles from bundleCache (biggest memory hog)
+        if (bundleCache.size > 0) {
+            const totalIcons = [...bundleCache.values()].reduce((sum, e) => sum + (e.iconCount || 0), 0);
+            bundleCache.clear();
+            console.log(`[CopyIcons] 🗜️ Bundles cleared (${totalIcons} icons freed from memory)`);
+        }
+
+        // 3. Clear deferred writes queue
+        if (_deferredWrites.length > 100) {
+            _flushCacheWrites();
+        }
+
+        const memMB = getMemoryUsageMB();
+        console.log(`[CopyIcons] 🗜️ Memory compacted: cache=${memoryCache.size}, bundles=${bundleCache.size}${memMB ? `, heap=${memMB}MB` : ''}`);
+    }
+
+    function checkMemoryBudget() {
+        const memMB = getMemoryUsageMB();
+        if (memMB === null) return; // Can't measure, skip
+
+        if (memMB > MEMORY_BUDGET / (1024 * 1024)) {
+            console.warn(`[CopyIcons] ⚠️ Memory ${memMB}MB exceeds budget ${Math.round(MEMORY_BUDGET / (1024 * 1024))}MB — compacting`);
+            compactMemory(true);
+        } else if (memMB > MEMORY_BUDGET / (1024 * 1024) * 0.85) {
+            // Approaching limit (85%) — gentle compact
+            compactMemory(false);
+        }
+    }
+
+    function setupMemoryMonitor() {
+        if (!performance || !performance.memory) return;
+        memoryCheckTimer = setInterval(checkMemoryBudget, MEMORY_CHECK_INTERVAL);
+    }
+
+    // === INITIALIZATION ===
+
+    function boot() {
+        console.log('[CopyIcons] 🚀 Smart Loader v8.3 (CDN Smart Fallback + Early Abort)');
+
+        const style = document.createElement('style');
+        style.textContent = `
+            i.svg-loaded {
+                display: inline-flex !important;
+                align-items: center;
+                justify-content: center;
+                background: none !important;
+                background-color: transparent !important;
+                -webkit-mask-image: none !important;
+                mask-image: none !important;
+            }
+            i.svg-loaded::before {
+                content: none !important;
+                display: none !important;
+            }
+            i.svg-loaded:not(.ci-multicolor) svg {
+                width: 1em;
+                height: 1em;
+                fill: currentColor;
+            }
+            i.svg-loaded.ci-multicolor svg {
+                width: 1em;
+                height: 1em;
+            }
+            .modal-icon-display:not(.svg-loaded) {
+                visibility: hidden;
+            }
+            :where(viconic-icon) {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                vertical-align: middle;
+                font-size: inherit;
+                line-height: 1;
+                width: 1em;
+                height: 1em;
+                opacity: 0;
+            }
+            :where(viconic-icon).svg-loaded {
+                display: inline-flex !important;
+                align-items: center;
+                justify-content: center;
+                background: none !important;
+                background-color: transparent !important;
+                opacity: 1;
+            }
+            :where(viconic-icon).svg-loaded:not(.ci-multicolor) svg {
+                width: 1em;
+                height: 1em;
+                fill: currentColor;
+            }
+            :where(viconic-icon).svg-loaded.ci-multicolor svg {
+                width: 1em;
+                height: 1em;
+            }
+            @keyframes ci-appear { from { opacity: 0; } to { opacity: 1; } }
+            :where(viconic-icon).svg-loaded:not(.cache-hit) { animation: ci-appear 0.12s ease-out; }
+            :where(viconic-icon).cache-hit { opacity: 1 !important; animation: none !important; }
+            i.cache-hit { animation: none !important; }
+            /* --- ANIMATION COMMENTED OUT START ---
+            @keyframes ci-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+            @keyframes ci-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+            @keyframes ci-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-0.4em); } 60% { transform: translateY(-0.2em); } }
+            @keyframes ci-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-0.1em); } 20%, 40%, 60%, 80% { transform: translateX(0.1em); } }
+            @keyframes ci-flip { 0%, 100% { transform: perspective(400px) rotateY(0deg); } 50% { transform: perspective(400px) rotateY(180deg); } }
+            @keyframes ci-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.25); } 28% { transform: scale(1); } 42% { transform: scale(1.25); } 70% { transform: scale(1); } }
+            @keyframes ci-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+            @keyframes ci-wobble { 0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(-12deg); } 30% { transform: rotate(8deg); } 45% { transform: rotate(-6deg); } 60% { transform: rotate(4deg); } 75% { transform: rotate(-2deg); } }
+            @keyframes ci-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.3em); } }
+            @keyframes ci-trace { 0% { fill-opacity: 0; stroke: currentColor; stroke-width: var(--trace-stroke-width, 1px); stroke-dasharray: var(--path-len, 400); stroke-dashoffset: var(--path-len, 400); } 50%, 60% { fill-opacity: 0; stroke: currentColor; stroke-width: var(--trace-stroke-width, 1px); stroke-dasharray: var(--path-len, 400); stroke-dashoffset: 0; } 100% { fill-opacity: 1; stroke: var(--trace-end-stroke, transparent); stroke-width: var(--trace-end-stroke-width, 0); stroke-dasharray: var(--path-len, 400); stroke-dashoffset: 0; } }
+            :where(viconic-icon)[animate="spin"] { animation: ci-spin 1.5s linear infinite !important; }
+            :where(viconic-icon)[animate="pulse"] { animation: ci-pulse 2s ease-in-out infinite !important; }
+            :where(viconic-icon)[animate="bounce"] { animation: ci-bounce 1s ease infinite !important; }
+            :where(viconic-icon)[animate="shake"] { animation: ci-shake 0.8s ease-in-out infinite !important; }
+            :where(viconic-icon)[animate="flip"] { animation: ci-flip 2s ease-in-out infinite !important; }
+            :where(viconic-icon)[animate="heartbeat"] { animation: ci-heartbeat 1.2s ease-in-out infinite !important; }
+            :where(viconic-icon)[animate="fade"] { animation: ci-fade 1.5s ease-in-out infinite !important; }
+            :where(viconic-icon)[animate="wobble"] { animation: ci-wobble 1s ease-in-out infinite !important; }
+            :where(viconic-icon)[animate="float"] { animation: ci-float 2.5s ease-in-out infinite !important; }
+            :where(viconic-icon)[animate="trace"] svg path, :where(viconic-icon)[animate="trace"] svg circle, :where(viconic-icon)[animate="trace"] svg rect, :where(viconic-icon)[animate="trace"] svg polygon, :where(viconic-icon)[animate="trace"] svg polyline { animation: ci-trace 3s ease-in-out infinite !important; }
+            --- ANIMATION COMMENTED OUT END --- */
+        `;
+        document.head.appendChild(style);
+
+        setupLazyLoading();
+        setupMutationObserver();
+        setupMemoryMonitor();
+        scanDOM(document);
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', boot);
+    } else {
+        boot();
+    }
+
+    // === PUBLIC API ===
+
+    window.CopyIcons = {
+        refresh() {
+            scanDOM(document);
+            this.expandAll();
+        },
+        expand() {
+            scanDOM(document);
+            this.expandAll();
+        },
+        expandAll() { /* No-op for SVG mode */ },
+
+        expandElement(element) {
+            if (!element || element.classList.contains('svg-loaded')) return true;
+            processedElements.delete(element);
+            if (element.tagName === 'VICONIC-ICON') {
+                registerViconicIcon(element);
+            } else {
+                registerIcon(element);
+            }
+            return true;
+        },
+
+        reset() { clearPending(); },
+        clearPending() { clearPending(); },
+
+        forceProcess(element) {
+            if (element) {
+                element.classList.remove('svg-loaded', 'js-processed');
+                element.innerHTML = '';
+                processedElements.delete(element);
+                if (element.tagName === 'VICONIC-ICON') {
+                    registerViconicIcon(element);
+                } else {
+                    registerIcon(element);
+                }
+            } else {
+                document.querySelectorAll('i:not(.svg-loaded)').forEach(icon => {
+                    processedElements.delete(icon);
+                    registerIcon(icon);
+                });
+                document.querySelectorAll('viconic-icon[icon]:not(.svg-loaded)').forEach(el => {
+                    processedElements.delete(el);
+                    registerViconicIcon(el);
+                });
+            }
+        },
+
+        // Viconic utilities
+        camelToKebab,
+        kebabToCamel,
+        classToViconicTag: viconicTagFromClass,
+        parseViconicIcon,
+        iconClassToViconic,
+
+        injectInstant(element) {
+            if (!element || element.classList.contains('svg-loaded')) return true;
+
+            let prefix, iconName;
+            if (element.tagName === 'VICONIC-ICON') {
+                const parsed = parseViconicIcon(element.getAttribute('icon'));
+                if (!parsed) return false;
+                prefix = parsed.prefix;
+                iconName = parsed.iconName;
+            } else {
+                prefix = detectPrefix(element);
+                if (!prefix) return false;
+                const iconNames = getIconNames(element);
+                if (iconNames.length === 0) return false;
+                iconName = iconNames[0];
+            }
+
+            const svg = getFromMemory(prefix, iconName) || getPerIconCache(prefix, iconName);
+            if (svg) {
+                injectSVG(element, svg);
+                return true;
+            }
+
+            processedElements.delete(element);
+            if (element.tagName === 'VICONIC-ICON') {
+                registerViconicIcon(element);
+            } else {
+                registerIcon(element);
+            }
+            return false;
+        },
+
+        preload(prefix, iconNames) {
+            if (!prefix || !iconNames || iconNames.length === 0) return Promise.resolve();
+
+            const uncached = iconNames.filter(name =>
+                !getFromMemory(prefix, name) && !getPerIconCache(prefix, name)
+            );
+            if (uncached.length === 0) return Promise.resolve();
+
+            if (inflightFetches.has(prefix)) {
+                return inflightFetches.get(prefix);
+            }
+
+            const promise = (async () => {
+                // CDN Smart: choose individual SVGs vs bundle based on count
+                const map = await loadPrefixMap();
+                const cdnBase = map[prefix];
+                if (cdnBase) {
+                    const colId = getCollectionId(cdnBase);
+                    const useBundle = uncached.length >= BUNDLE_THRESHOLD || (colId && bundleCache.has(colId));
+                    if (useBundle) {
+                        await loadIconsFromBundle(prefix, cdnBase, uncached, null);
+                    } else {
+                        await fetchIconsViaCDN(prefix, cdnBase, uncached, null).catch(() => { });
+                    }
+                    const remaining = uncached.filter(n => !getFromMemory(prefix, n));
+                    if (remaining.length === 0) return;
+                    await fetchIconsViaAPI(prefix, remaining, null).catch(() => { });
+                } else {
+                    await fetchIconsViaAPI(prefix, uncached, null).catch(() => { });
+                }
+            })()
+                .catch(() => { })
+                .finally(() => { inflightFetches.delete(prefix); });
+
+            inflightFetches.set(prefix, promise);
+            return promise;
+        },
+
+        // Preload icons from MULTIPLE prefixes in ONE request (for search pages)
+        // Usage: CopyIcons.preloadMulti({ "sol": ["user","home"], "flo": ["arrow"] })
+        preloadMulti(prefixMap) {
+            if (!prefixMap || typeof prefixMap !== 'object') return Promise.resolve();
+
+            // Filter to only uncached icons
+            const toFetch = {};
+            let totalUncached = 0;
+            for (const [prefix, names] of Object.entries(prefixMap)) {
+                if (!names || !names.length) continue;
+                const uncached = names.filter(n => !getFromMemory(prefix, n) && !getPerIconCache(prefix, n));
+                if (uncached.length > 0) {
+                    toFetch[prefix] = uncached;
+                    totalUncached += uncached.length;
+                }
+            }
+            if (totalUncached === 0) return Promise.resolve();
+
+            const promise = (async () => {
+                // === CDN INDIVIDUAL SVGs: fetch each icon directly from CDN (fast for search) ===
+                // Search pages typically need 1-10 icons per collection — downloading
+                // entire bundles (500KB-13MB) for a few icons is extremely wasteful.
+                // Individual SVGs are ~1-5KB each and fetched in parallel.
+                const map = await loadPrefixMap().catch(() => ({}));
+
+                // Fetch individual SVGs from CDN in parallel for each prefix
+                await Promise.allSettled(
+                    Object.entries(toFetch).map(async ([prefix, names]) => {
+                        const cdnBase = map[prefix];
+                        if (!cdnBase) return;
+                        try {
+                            await fetchIconsViaCDN(prefix, cdnBase, names, null);
+                            const loaded = names.filter(n => getFromMemory(prefix, n)).length;
+                            if (loaded > 0) console.log(`[CopyIcons] ⚡ CDN preloaded ${loaded} "${prefix}" icons`);
+                        } catch (e) { }
+                    })
+                );
+
+                // === FALLBACK: API batch for any icons CDN couldn't serve ===
+                const stillMissing = {};
+                let missingCount = 0;
+                for (const [prefix, names] of Object.entries(toFetch)) {
+                    const missed = names.filter(n => !getFromMemory(prefix, n));
+                    if (missed.length > 0) {
+                        stillMissing[prefix] = missed;
+                        missingCount += missed.length;
+                    }
+                }
+
+                if (missingCount > 0) {
+                    const queryParts = Object.entries(stillMissing).map(([p, ns]) => `${p}:${ns.join(',')}`);
+                    const q = queryParts.join('|');
+                    try {
+                        const url = `${config.batchApiBase}/api/v1/subset/multi-prefix/?q=${encodeURIComponent(q)}`;
+                        const resp = await Promise.race([
+                            fetch(url).catch(() => null),
+                            new Promise(resolve => setTimeout(() => resolve(null), API_TIMEOUT))
+                        ]);
+                        if (resp && resp.ok) {
+                            const data = await resp.json();
+                            let count = 0;
+                            for (const [prefix, icons] of Object.entries(data.results || {})) {
+                                for (const [name, svgData] of Object.entries(icons)) {
+                                    if (getFromMemory(prefix, name)) continue;
+                                    const svg = extractSvg(svgData);
+                                    if (svg && typeof svg === 'string' && svg.trim()) {
+                                        setToMemory(prefix, name, svg);
+                                        deferCacheWrite(prefix, name, svg);
+                                        count++;
+                                    }
+                                }
+                            }
+                            if (count > 0) console.log(`[CopyIcons] 📥 API fallback preloaded ${count} icons`);
+                        }
+                    } catch (e) { }
+                }
+            })().catch(() => { });
+
+            // Track all prefixes as in-flight
+            for (const prefix of Object.keys(toFetch)) {
+                inflightFetches.set(prefix, promise);
+            }
+            promise.finally(() => {
+                for (const prefix of Object.keys(toFetch)) {
+                    inflightFetches.delete(prefix);
+                }
+            });
+
+            return promise;
+        },
+
+        getStats() {
+            const memMB = getMemoryUsageMB();
+            const bundleStats = [];
+            for (const [id, entry] of bundleCache) {
+                bundleStats.push({ id, icons: entry.iconCount, sizeKB: Math.round(entry.size / 1024) });
+            }
+            return {
+                memoryCache: memoryCache.size,
+                pendingPrefixes: pendingIcons.size,
+                bundleCache: bundleCache.size,
+                bundles: bundleStats,
+                heapMB: memMB,
+                budgetMB: Math.round(MEMORY_BUDGET / (1024 * 1024)),
+            };
+        },
+
+        getConfig() { return { ...config }; },
+
+        clearCache() {
+            memoryCache.clear();
+            const keysToRemove = [];
+            for (let i = 0; i < localStorage.length; i++) {
+                const key = localStorage.key(i);
+                if (key && (key.startsWith(ICON_CACHE_PREFIX) || key.startsWith(CACHE_PREFIX))) {
+                    keysToRemove.push(key);
+                }
+            }
+            // Also clear prefix-map cache
+            keysToRemove.push(PREFIXMAP_CACHE_KEY);
+            keysToRemove.forEach(k => localStorage.removeItem(k));
+            prefixMap = null;
+            prefixMapPromise = null;
+            console.log(`[CopyIcons] 🗑️ Cleared ${keysToRemove.length} cache entries`);
+        },
+
+        compactMemory() {
+            compactMemory(false);
+        }
+    };
+
+    window.addEventListener('beforeunload', () => {
+        // Flush any pending cache writes before leaving
+        if (_deferredWrites.length > 0) _flushCacheWrites();
+
+        memoryCache.clear();
+        bundleCache.clear();
+        pendingIcons.clear();
+        if (memoryCheckTimer) {
+            clearInterval(memoryCheckTimer);
+            memoryCheckTimer = null;
+        }
+        if (mutationObserver) {
+            mutationObserver.disconnect();
+            mutationObserver = null;
+        }
+        if (intersectionObserver) {
+            intersectionObserver.disconnect();
+            intersectionObserver = null;
+        }
+    });
+
+    // Backward Compatibility
+    if (!window.IconLoader) {
+        window.IconLoader = {
+            expand: () => window.CopyIcons.refresh(),
+            expandElement: (el) => window.CopyIcons.expandElement(el),
+            preloadCollections: () => { }
+        };
+    }
+})();