viconic-react-icons 1.5.6 → 1.5.8

package/dist/index.js

@@ -1665,8 +1665,6 @@ var import_react = __toESM(require("react"));
                 display: inline-flex !important;
                 align-items: center;
                 justify-content: center;
-                background: none !important;
-                background-color: transparent !important;
                 
             }
             :where(viconic-icon).svg-loaded:not(.ci-multicolor) svg {
@@ -1992,8 +1990,7 @@ var import_react = __toESM(require("react"));
         if (c && c.d && Date.now() - c.t < TTL) {
           for (const n in c.d) {
             if (!Object.prototype.hasOwnProperty.call(c.d, n)) continue;
-            const svg = c.d[n];
-            if (!W.icons[n]) W.icons[n] = svg;
+            if (!W.icons[n]) W.icons[n] = c.d[n];
           }
         }
       } catch (e) {
@@ -2003,101 +2000,16 @@ var import_react = __toESM(require("react"));
   }
 })();
 var _initializedKits = /* @__PURE__ */ new Set();
-var _kitRegistry = {};
-var _pendingMisses = {};
-if (typeof document !== "undefined") {
-  document.addEventListener("viconic:ready", (e) => {
-    const prefix = e && e.detail && e.detail.prefix;
-    if (prefix) _flushPendingMisses(prefix);
-  });
-}
-var _kitMissQueues = {};
-var _kitMissTimers = {};
-var _kitQueued = {};
-function _resolveRegistry(prefix) {
-  if (_kitRegistry[prefix]) return _kitRegistry[prefix];
-  const kits = window.CopyIconsKit || {};
-  for (const kId in kits) {
-    const kit = kits[kId];
-    if (kit.config && kit.config.prefix === prefix) {
-      const entry = { kitId: kId, api: kit.config.api || "https://api.viconic.dev" };
-      _kitRegistry[prefix] = entry;
-      return entry;
-    }
-  }
-  return null;
-}
-function _flushPendingMisses(prefix) {
-  const pending = _pendingMisses[prefix];
-  if (!pending || !pending.size) return;
-  const entry = _resolveRegistry(prefix);
-  if (!entry) return;
-  delete _pendingMisses[prefix];
-  pending.forEach((name) => _dispatchBatchFetch(prefix, name, entry));
-}
-function _dispatchBatchFetch(prefix, iconBaseName, entry) {
-  const { kitId, api } = entry;
-  if (!_kitQueued[kitId]) _kitQueued[kitId] = /* @__PURE__ */ new Set();
-  if (_kitQueued[kitId].has(iconBaseName)) return;
-  _kitQueued[kitId].add(iconBaseName);
-  if (!_kitMissQueues[kitId]) _kitMissQueues[kitId] = /* @__PURE__ */ new Set();
-  _kitMissQueues[kitId].add(iconBaseName);
-  if (_kitMissTimers[kitId]) return;
-  _kitMissTimers[kitId] = setTimeout(() => {
-    delete _kitMissTimers[kitId];
-    const names = [..._kitMissQueues[kitId] || []];
-    delete _kitMissQueues[kitId];
-    if (!names.length) return;
-    fetch(`${api}/api/v1/kits/${kitId}/icons/?icons=${names.join(",")}`).then((r) => r.ok ? r.json() : null).then((bj) => {
-      if (!bj || !bj.icons) return;
-      const W = window.__viconic = window.__viconic || {};
-      W.icons = W.icons || {};
-      const cdnFetches = [];
-      for (const n in bj.icons) {
-        if (!Object.prototype.hasOwnProperty.call(bj.icons, n)) continue;
-        const d = bj.icons[n];
-        const svg = d.svg || "";
-        if (svg && svg.includes("<")) {
-          W.icons[`@${prefix}/${n}`] = svg;
-          W.icons[`${prefix}:${n}`] = svg;
-          W.icons[`${prefix}/${n}`] = svg;
-          W.icons[n] = W.icons[n] || svg;
-        } else if (d.cdn_url) {
-          cdnFetches.push(
-            fetch(d.cdn_url).then((r) => r.ok ? r.text() : "").then((s) => {
-              if (s && s.includes("<")) {
-                W.icons[`@${prefix}/${n}`] = s;
-                W.icons[`${prefix}:${n}`] = s;
-                W.icons[`${prefix}/${n}`] = s;
-                W.icons[n] = W.icons[n] || s;
-              }
-            }).catch(() => {
-            })
-          );
-        }
-      }
-      Promise.all(cdnFetches).then(() => {
-        try {
-          document.dispatchEvent(new CustomEvent("viconic:ready", { detail: { prefix, kitId } }));
-        } catch (e) {
-        }
-      });
-    }).catch(() => {
-    });
-  }, 150);
-}
-function _queueKitMiss(prefix, iconBaseName) {
-  if (typeof window === "undefined") return;
-  const entry = _resolveRegistry(prefix);
-  if (entry) {
-    _dispatchBatchFetch(prefix, iconBaseName, entry);
-  } else {
-    if (!_pendingMisses[prefix]) _pendingMisses[prefix] = /* @__PURE__ */ new Set();
-    _pendingMisses[prefix].add(iconBaseName);
-  }
+function _isQueued(kitId, iconName) {
+  if (typeof window === "undefined") return false;
+  const q = window.__viconicQueued = window.__viconicQueued || {};
+  const k = kitId + ":" + iconName;
+  if (q[k]) return true;
+  q[k] = 1;
+  return false;
 }
 function initViconic(options = {}) {
-  const { kitId, cdnBase = "cdn.viconic.dev", version, prefix: explicitPrefix, api = "https://api.viconic.dev" } = options;
+  const { kitId, cdnBase = "cdn.viconic.dev", version } = options;
   if (typeof window === "undefined") return;
   if (!kitId) {
     console.warn("[Viconic] initViconic requires a kitId");
@@ -2105,31 +2017,14 @@ function initViconic(options = {}) {
   }
   if (_initializedKits.has(kitId)) return;
   _initializedKits.add(kitId);
-  if (explicitPrefix) {
-    _kitRegistry[explicitPrefix] = { kitId, api };
-  }
-  if (typeof window !== "undefined") {
-    window.__viconicKitIds = window.__viconicKitIds || {};
-    window.__viconicKitIds[kitId] = { api };
-  }
   const scriptId = `viconic-kit-${kitId}`;
   if (document.getElementById(scriptId)) return;
   const script = document.createElement("script");
   script.id = scriptId;
   let url = `https://${cdnBase}/kits/${kitId}/loader.js`;
   if (version) {
-    const vQuery = version === "dev" ? Date.now() : version;
-    url += `?v=${vQuery}`;
+    url += `?v=${version === "dev" ? Date.now() : version}`;
   }
-  script.onload = () => {
-    const kits = window.CopyIconsKit || {};
-    const kit = kits[kitId];
-    if (kit && kit.config && kit.config.prefix) {
-      const pfx = kit.config.prefix;
-      _kitRegistry[pfx] = { kitId, api: kit.config.api || api };
-      _flushPendingMisses(pfx);
-    }
-  };
   script.src = url;
   script.async = true;
   document.head.appendChild(script);
@@ -2150,51 +2045,50 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
     function isInjected() {
       return el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
     }
-    if (!isInjected()) {
+    function tryInjectFromCache() {
+      if (isInjected()) return false;
       const W = window.__viconic;
-      if (W && W.icons) {
-        const iconBaseName = prefixMatch ? prefixMatch[2] : null;
-        const svg = iconBaseName && W.icons[iconBaseName] || name && W.icons[name] || null;
-        if (svg) {
-          el.innerHTML = svg;
-          el.classList.add("vi-ok", "svg-loaded");
-        }
+      if (!W || !W.icons) return false;
+      const baseName = prefixMatch ? prefixMatch[2] : null;
+      const svg = baseName && W.icons[baseName] || name && W.icons[name] || null;
+      if (svg) {
+        el.innerHTML = svg;
+        el.classList.add("vi-ok", "svg-loaded");
+        return true;
       }
+      return false;
     }
-    if (!isInjected() && !isKitIcon) {
+    if (tryInjectFromCache()) return;
+    if (!isKitIcon) {
       if (window.CopyIcons && window.CopyIcons.forceProcess) {
         window.CopyIcons.forceProcess(el);
+      } else if (el._u) {
+        el._u();
       }
     }
-    if (!isInjected() && !isKitIcon && el._u) {
-      el._u();
-    }
     if (isInjected()) return;
-    function tryInjectFromEvent() {
-      if (isInjected()) return;
-      const W = window.__viconic;
-      if (W && W.icons) {
-        const iconBaseName = prefixMatch ? prefixMatch[2] : null;
-        const svg = iconBaseName && W.icons[iconBaseName] || name && W.icons[name] || null;
-        if (svg) {
-          el.innerHTML = svg;
-          el.classList.add("vi-ok", "svg-loaded");
-          return;
+    if (isKitIcon && prefixMatch) {
+      const kitId = (() => {
+        const kits = window.CopyIconsKit || {};
+        for (const kId in kits) {
+          if (kits[kId].config && kits[kId].config.prefix === prefixMatch[1]) return kId;
+        }
+        return prefixMatch[1];
+      })();
+      if (!_isQueued(kitId, prefixMatch[2])) {
+        if (el._u) {
+          el._u();
         }
-      }
-      if (!isKitIcon && el._u) el._u();
-      if (!isKitIcon && window.CopyIcons && window.CopyIcons.forceProcess) {
-        window.CopyIcons.forceProcess(el);
       }
     }
-    document.addEventListener("viconic:ready", tryInjectFromEvent);
-    if (!isInjected() && isKitIcon && prefixMatch) {
-      const prefix = prefixMatch[1];
-      const iconBaseName = prefixMatch[2];
-      _queueKitMiss(prefix, iconBaseName);
+    function onReady() {
+      if (tryInjectFromCache()) {
+        document.removeEventListener("viconic:ready", onReady);
+      }
     }
+    document.addEventListener("viconic:ready", onReady);
     return () => {
-      document.removeEventListener("viconic:ready", tryInjectFromEvent);
+      document.removeEventListener("viconic:ready", onReady);
     };
   }, [name, className, size, color, style]);
   const combinedStyle = {

package/dist/index.mjs

@@ -1630,8 +1630,6 @@ import React, { useEffect, useRef } from "react";
                 display: inline-flex !important;
                 align-items: center;
                 justify-content: center;
-                background: none !important;
-                background-color: transparent !important;
                 
             }
             :where(viconic-icon).svg-loaded:not(.ci-multicolor) svg {
@@ -1957,8 +1955,7 @@ import React, { useEffect, useRef } from "react";
         if (c && c.d && Date.now() - c.t < TTL) {
           for (const n in c.d) {
             if (!Object.prototype.hasOwnProperty.call(c.d, n)) continue;
-            const svg = c.d[n];
-            if (!W.icons[n]) W.icons[n] = svg;
+            if (!W.icons[n]) W.icons[n] = c.d[n];
           }
         }
       } catch (e) {
@@ -1968,101 +1965,16 @@ import React, { useEffect, useRef } from "react";
   }
 })();
 var _initializedKits = /* @__PURE__ */ new Set();
-var _kitRegistry = {};
-var _pendingMisses = {};
-if (typeof document !== "undefined") {
-  document.addEventListener("viconic:ready", (e) => {
-    const prefix = e && e.detail && e.detail.prefix;
-    if (prefix) _flushPendingMisses(prefix);
-  });
-}
-var _kitMissQueues = {};
-var _kitMissTimers = {};
-var _kitQueued = {};
-function _resolveRegistry(prefix) {
-  if (_kitRegistry[prefix]) return _kitRegistry[prefix];
-  const kits = window.CopyIconsKit || {};
-  for (const kId in kits) {
-    const kit = kits[kId];
-    if (kit.config && kit.config.prefix === prefix) {
-      const entry = { kitId: kId, api: kit.config.api || "https://api.viconic.dev" };
-      _kitRegistry[prefix] = entry;
-      return entry;
-    }
-  }
-  return null;
-}
-function _flushPendingMisses(prefix) {
-  const pending = _pendingMisses[prefix];
-  if (!pending || !pending.size) return;
-  const entry = _resolveRegistry(prefix);
-  if (!entry) return;
-  delete _pendingMisses[prefix];
-  pending.forEach((name) => _dispatchBatchFetch(prefix, name, entry));
-}
-function _dispatchBatchFetch(prefix, iconBaseName, entry) {
-  const { kitId, api } = entry;
-  if (!_kitQueued[kitId]) _kitQueued[kitId] = /* @__PURE__ */ new Set();
-  if (_kitQueued[kitId].has(iconBaseName)) return;
-  _kitQueued[kitId].add(iconBaseName);
-  if (!_kitMissQueues[kitId]) _kitMissQueues[kitId] = /* @__PURE__ */ new Set();
-  _kitMissQueues[kitId].add(iconBaseName);
-  if (_kitMissTimers[kitId]) return;
-  _kitMissTimers[kitId] = setTimeout(() => {
-    delete _kitMissTimers[kitId];
-    const names = [..._kitMissQueues[kitId] || []];
-    delete _kitMissQueues[kitId];
-    if (!names.length) return;
-    fetch(`${api}/api/v1/kits/${kitId}/icons/?icons=${names.join(",")}`).then((r) => r.ok ? r.json() : null).then((bj) => {
-      if (!bj || !bj.icons) return;
-      const W = window.__viconic = window.__viconic || {};
-      W.icons = W.icons || {};
-      const cdnFetches = [];
-      for (const n in bj.icons) {
-        if (!Object.prototype.hasOwnProperty.call(bj.icons, n)) continue;
-        const d = bj.icons[n];
-        const svg = d.svg || "";
-        if (svg && svg.includes("<")) {
-          W.icons[`@${prefix}/${n}`] = svg;
-          W.icons[`${prefix}:${n}`] = svg;
-          W.icons[`${prefix}/${n}`] = svg;
-          W.icons[n] = W.icons[n] || svg;
-        } else if (d.cdn_url) {
-          cdnFetches.push(
-            fetch(d.cdn_url).then((r) => r.ok ? r.text() : "").then((s) => {
-              if (s && s.includes("<")) {
-                W.icons[`@${prefix}/${n}`] = s;
-                W.icons[`${prefix}:${n}`] = s;
-                W.icons[`${prefix}/${n}`] = s;
-                W.icons[n] = W.icons[n] || s;
-              }
-            }).catch(() => {
-            })
-          );
-        }
-      }
-      Promise.all(cdnFetches).then(() => {
-        try {
-          document.dispatchEvent(new CustomEvent("viconic:ready", { detail: { prefix, kitId } }));
-        } catch (e) {
-        }
-      });
-    }).catch(() => {
-    });
-  }, 150);
-}
-function _queueKitMiss(prefix, iconBaseName) {
-  if (typeof window === "undefined") return;
-  const entry = _resolveRegistry(prefix);
-  if (entry) {
-    _dispatchBatchFetch(prefix, iconBaseName, entry);
-  } else {
-    if (!_pendingMisses[prefix]) _pendingMisses[prefix] = /* @__PURE__ */ new Set();
-    _pendingMisses[prefix].add(iconBaseName);
-  }
+function _isQueued(kitId, iconName) {
+  if (typeof window === "undefined") return false;
+  const q = window.__viconicQueued = window.__viconicQueued || {};
+  const k = kitId + ":" + iconName;
+  if (q[k]) return true;
+  q[k] = 1;
+  return false;
 }
 function initViconic(options = {}) {
-  const { kitId, cdnBase = "cdn.viconic.dev", version, prefix: explicitPrefix, api = "https://api.viconic.dev" } = options;
+  const { kitId, cdnBase = "cdn.viconic.dev", version } = options;
   if (typeof window === "undefined") return;
   if (!kitId) {
     console.warn("[Viconic] initViconic requires a kitId");
@@ -2070,31 +1982,14 @@ function initViconic(options = {}) {
   }
   if (_initializedKits.has(kitId)) return;
   _initializedKits.add(kitId);
-  if (explicitPrefix) {
-    _kitRegistry[explicitPrefix] = { kitId, api };
-  }
-  if (typeof window !== "undefined") {
-    window.__viconicKitIds = window.__viconicKitIds || {};
-    window.__viconicKitIds[kitId] = { api };
-  }
   const scriptId = `viconic-kit-${kitId}`;
   if (document.getElementById(scriptId)) return;
   const script = document.createElement("script");
   script.id = scriptId;
   let url = `https://${cdnBase}/kits/${kitId}/loader.js`;
   if (version) {
-    const vQuery = version === "dev" ? Date.now() : version;
-    url += `?v=${vQuery}`;
+    url += `?v=${version === "dev" ? Date.now() : version}`;
   }
-  script.onload = () => {
-    const kits = window.CopyIconsKit || {};
-    const kit = kits[kitId];
-    if (kit && kit.config && kit.config.prefix) {
-      const pfx = kit.config.prefix;
-      _kitRegistry[pfx] = { kitId, api: kit.config.api || api };
-      _flushPendingMisses(pfx);
-    }
-  };
   script.src = url;
   script.async = true;
   document.head.appendChild(script);
@@ -2115,51 +2010,50 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
     function isInjected() {
       return el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
     }
-    if (!isInjected()) {
+    function tryInjectFromCache() {
+      if (isInjected()) return false;
       const W = window.__viconic;
-      if (W && W.icons) {
-        const iconBaseName = prefixMatch ? prefixMatch[2] : null;
-        const svg = iconBaseName && W.icons[iconBaseName] || name && W.icons[name] || null;
-        if (svg) {
-          el.innerHTML = svg;
-          el.classList.add("vi-ok", "svg-loaded");
-        }
+      if (!W || !W.icons) return false;
+      const baseName = prefixMatch ? prefixMatch[2] : null;
+      const svg = baseName && W.icons[baseName] || name && W.icons[name] || null;
+      if (svg) {
+        el.innerHTML = svg;
+        el.classList.add("vi-ok", "svg-loaded");
+        return true;
       }
+      return false;
     }
-    if (!isInjected() && !isKitIcon) {
+    if (tryInjectFromCache()) return;
+    if (!isKitIcon) {
       if (window.CopyIcons && window.CopyIcons.forceProcess) {
         window.CopyIcons.forceProcess(el);
+      } else if (el._u) {
+        el._u();
       }
     }
-    if (!isInjected() && !isKitIcon && el._u) {
-      el._u();
-    }
     if (isInjected()) return;
-    function tryInjectFromEvent() {
-      if (isInjected()) return;
-      const W = window.__viconic;
-      if (W && W.icons) {
-        const iconBaseName = prefixMatch ? prefixMatch[2] : null;
-        const svg = iconBaseName && W.icons[iconBaseName] || name && W.icons[name] || null;
-        if (svg) {
-          el.innerHTML = svg;
-          el.classList.add("vi-ok", "svg-loaded");
-          return;
+    if (isKitIcon && prefixMatch) {
+      const kitId = (() => {
+        const kits = window.CopyIconsKit || {};
+        for (const kId in kits) {
+          if (kits[kId].config && kits[kId].config.prefix === prefixMatch[1]) return kId;
+        }
+        return prefixMatch[1];
+      })();
+      if (!_isQueued(kitId, prefixMatch[2])) {
+        if (el._u) {
+          el._u();
         }
-      }
-      if (!isKitIcon && el._u) el._u();
-      if (!isKitIcon && window.CopyIcons && window.CopyIcons.forceProcess) {
-        window.CopyIcons.forceProcess(el);
       }
     }
-    document.addEventListener("viconic:ready", tryInjectFromEvent);
-    if (!isInjected() && isKitIcon && prefixMatch) {
-      const prefix = prefixMatch[1];
-      const iconBaseName = prefixMatch[2];
-      _queueKitMiss(prefix, iconBaseName);
+    function onReady() {
+      if (tryInjectFromCache()) {
+        document.removeEventListener("viconic:ready", onReady);
+      }
     }
+    document.addEventListener("viconic:ready", onReady);
     return () => {
-      document.removeEventListener("viconic:ready", tryInjectFromEvent);
+      document.removeEventListener("viconic:ready", onReady);
     };
   }, [name, className, size, color, style]);
   const combinedStyle = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viconic-react-icons",
-  "version": "1.5.6",
+  "version": "1.5.8",
   "description": "Viconic Smart Icons loader for React — supports Kit and 200k+ system icons",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/copyicons-smart-loader.js

@@ -1855,8 +1855,6 @@
                 display: inline-flex !important;
                 align-items: center;
                 justify-content: center;
-                background: none !important;
-                background-color: transparent !important;
                 
             }
             :where(viconic-icon).svg-loaded:not(.ci-multicolor) svg {

package/src/index.jsx

@@ -3,32 +3,27 @@ import './copyicons-smart-loader.js';
 
 // ============================================
 // PRE-LOAD KIT CACHE SYNCHRONOUSLY AT MODULE LEVEL
-// Same architecture as kit loader: read localStorage before any render
-// so icons are available instantly when components mount.
 // ============================================
 (function _preloadKitCache() {
     if (typeof window === 'undefined' || typeof localStorage === 'undefined') return;
     try {
         const W = (window.__viconic = window.__viconic || {});
         W.icons = W.icons || {};
-        const TTL = 3 * 24 * 60 * 60 * 1000; // 3 days
+        const TTL = 3 * 24 * 60 * 60 * 1000;
         for (let i = 0; i < localStorage.length; i++) {
             const key = localStorage.key(i);
             if (!key || !key.startsWith('viconic:')) continue;
             try {
                 const c = JSON.parse(localStorage.getItem(key));
                 if (c && c.d && Date.now() - c.t < TTL) {
-                    // Register all icon name variants into W.icons
                     for (const n in c.d) {
                         if (!Object.prototype.hasOwnProperty.call(c.d, n)) continue;
-                        const svg = c.d[n];
-                        // Store by plain name so _u() can find it regardless of prefix
-                        if (!W.icons[n]) W.icons[n] = svg;
+                        if (!W.icons[n]) W.icons[n] = c.d[n];
                     }
                 }
-            } catch (e) { /* corrupted entry, skip */ }
+            } catch (e) {}
         }
-    } catch (e) { }
+    } catch (e) {}
 })();
 
 // ============================================
@@ -37,189 +32,58 @@ import './copyicons-smart-loader.js';
 const _initializedKits = new Set();
 
 // ============================================
-// Kit registry: prefix -> { kitId, api }
-// Populated by initViconic() via script.onload
-// and by viconic:ready event handler.
+// Window-level dedup set: survives HMR module reloads and Strict Mode remounts.
+// Keyed by iconKey = "kitId:iconName". Cleared after loader fires viconic:ready.
 // ============================================
-const _kitRegistry = {}; // prefix -> { kitId, api }
-
-// Pending misses buffered before registry is ready
-// prefix -> Set of icon names
-const _pendingMisses = {};
-
-// Global viconic:ready listener — fires when kit loader calls register()
-// This is the main trigger for flushing pending misses when loader.js
-// completes its first batch fetch (which happens after script.onload).
-if (typeof document !== 'undefined') {
-    document.addEventListener('viconic:ready', (e) => {
-        const prefix = e && e.detail && e.detail.prefix;
-        if (prefix) _flushPendingMisses(prefix);
-    });
-}
-
-// ============================================
-// DEBOUNCED BATCH FETCH for missing kit icons
-// ============================================
-const _kitMissQueues = {}; // kitId -> Set of icon names
-const _kitMissTimers = {}; // kitId -> timer handle
-const _kitQueued = {};     // kitId -> Set of icon names already queued (prevents Strict Mode double-queue)
-
-function _resolveRegistry(prefix) {
-    if (_kitRegistry[prefix]) return _kitRegistry[prefix];
-    // Fallback: check CopyIconsKit
-    const kits = window.CopyIconsKit || {};
-    for (const kId in kits) {
-        const kit = kits[kId];
-        if (kit.config && kit.config.prefix === prefix) {
-            const entry = { kitId: kId, api: kit.config.api || 'https://api.viconic.dev' };
-            _kitRegistry[prefix] = entry;
-            return entry;
-        }
-    }
-    return null;
+function _isQueued(kitId, iconName) {
+    if (typeof window === 'undefined') return false;
+    const q = (window.__viconicQueued = window.__viconicQueued || {});
+    const k = kitId + ':' + iconName;
+    if (q[k]) return true;
+    q[k] = 1;
+    return false;
 }
 
-function _flushPendingMisses(prefix) {
-    const pending = _pendingMisses[prefix];
-    if (!pending || !pending.size) return;
-    const entry = _resolveRegistry(prefix);
-    if (!entry) return;
-    delete _pendingMisses[prefix];
-    pending.forEach(name => _dispatchBatchFetch(prefix, name, entry));
-}
-
-function _dispatchBatchFetch(prefix, iconBaseName, entry) {
-    const { kitId, api } = entry;
-    // Skip if already queued — prevents React Strict Mode double-invoke from making 2 requests
-    if (!_kitQueued[kitId]) _kitQueued[kitId] = new Set();
-    if (_kitQueued[kitId].has(iconBaseName)) return;
-    _kitQueued[kitId].add(iconBaseName);
-    if (!_kitMissQueues[kitId]) _kitMissQueues[kitId] = new Set();
-    _kitMissQueues[kitId].add(iconBaseName);
-    if (_kitMissTimers[kitId]) return; // already scheduled, will pick up new additions
-    // 150ms debounce: collect all icons across the full React render cycle
-    _kitMissTimers[kitId] = setTimeout(() => {
-        delete _kitMissTimers[kitId];
-        const names = [...(_kitMissQueues[kitId] || [])];
-        delete _kitMissQueues[kitId];
-        if (!names.length) return;
-        fetch(`${api}/api/v1/kits/${kitId}/icons/?icons=${names.join(',')}`)
-            .then(r => r.ok ? r.json() : null)
-            .then(bj => {
-                if (!bj || !bj.icons) return;
-                const W = (window.__viconic = window.__viconic || {});
-                W.icons = W.icons || {};
-                const cdnFetches = [];
-                for (const n in bj.icons) {
-                    if (!Object.prototype.hasOwnProperty.call(bj.icons, n)) continue;
-                    const d = bj.icons[n];
-                    const svg = d.svg || '';
-                    if (svg && svg.includes('<')) {
-                        W.icons[`@${prefix}/${n}`] = svg;
-                        W.icons[`${prefix}:${n}`] = svg;
-                        W.icons[`${prefix}/${n}`] = svg;
-                        W.icons[n] = W.icons[n] || svg;
-                    } else if (d.cdn_url) {
-                        // User-uploaded icon: fetch SVG from CDN and store in W.icons
-                        // so loader refresh() finds it and doesn't fetch individually
-                        cdnFetches.push(
-                            fetch(d.cdn_url)
-                                .then(r => r.ok ? r.text() : '')
-                                .then(s => {
-                                    if (s && s.includes('<')) {
-                                        W.icons[`@${prefix}/${n}`] = s;
-                                        W.icons[`${prefix}:${n}`] = s;
-                                        W.icons[`${prefix}/${n}`] = s;
-                                        W.icons[n] = W.icons[n] || s;
-                                    }
-                                })
-                                .catch(() => {})
-                        );
-                    }
-                }
-                Promise.all(cdnFetches).then(() => {
-                    try { document.dispatchEvent(new CustomEvent('viconic:ready', { detail: { prefix, kitId } })); } catch(e) {}
-                });
-            })
-            .catch(() => {});
-    }, 150);
-}
-
-function _queueKitMiss(prefix, iconBaseName) {
+function _clearQueued(kitId) {
     if (typeof window === 'undefined') return;
-    const entry = _resolveRegistry(prefix);
-    if (entry) {
-        _dispatchBatchFetch(prefix, iconBaseName, entry);
-    } else {
-        // Registry not ready yet — buffer until loader fires
-        if (!_pendingMisses[prefix]) _pendingMisses[prefix] = new Set();
-        _pendingMisses[prefix].add(iconBaseName);
+    const q = window.__viconicQueued;
+    if (!q) return;
+    const prefix = kitId + ':';
+    for (const k in q) {
+        if (k.startsWith(prefix)) delete q[k];
     }
 }
 
 /**
  * Initialize a Viconic Kit in your React app.
  * Injects the kit's loader.js script into <head>.
- * Supports multiple kits — call once per kit.
  *
  * @param {Object} options
  * @param {string} options.kitId - UUID of the Kit (required)
  * @param {string} [options.cdnBase] - Custom CDN domain (default: cdn.viconic.dev)
- * 
- * @example
- * import { initViconic } from 'viconic-react-icons';
- * 
- * initViconic({ kitId: '387a6161-cb39-411f-8f13-29a5813e4efd' });
- * // Multiple kits:
- * initViconic({ kitId: 'another-kit-uuid', version: '1.0' });
+ * @param {string} [options.version] - Version string for cache busting
  */
 export function initViconic(options = {}) {
-    const { kitId, cdnBase = 'cdn.viconic.dev', version, prefix: explicitPrefix, api = 'https://api.viconic.dev' } = options;
-    if (typeof window === 'undefined') return; // SSR guard
+    const { kitId, cdnBase = 'cdn.viconic.dev', version } = options;
+    if (typeof window === 'undefined') return;
     if (!kitId) {
         console.warn('[Viconic] initViconic requires a kitId');
         return;
     }
-    if (_initializedKits.has(kitId)) return; // Already initialized
+    if (_initializedKits.has(kitId)) return;
     _initializedKits.add(kitId);
 
-    // Register synchronously so _queueKitMiss can find kitId immediately,
-    // even before the async loader.js script has loaded and populated CopyIconsKit.
-    // If prefix is not known yet, we'll also register once CopyIconsKit fires.
-    if (explicitPrefix) {
-        _kitRegistry[explicitPrefix] = { kitId, api };
-    }
-    // Also register by kitId so we can backfill prefix once loader fires
-    if (typeof window !== 'undefined') {
-        window.__viconicKitIds = window.__viconicKitIds || {};
-        window.__viconicKitIds[kitId] = { api };
-    }
-
     const scriptId = `viconic-kit-${kitId}`;
-    if (document.getElementById(scriptId)) return; // Script already in DOM
+    if (document.getElementById(scriptId)) return;
 
     const script = document.createElement('script');
     script.id = scriptId;
 
-    // Add cache busting for development or specific version updates
     let url = `https://${cdnBase}/kits/${kitId}/loader.js`;
     if (version) {
-        const vQuery = version === 'dev' ? Date.now() : version;
-        url += `?v=${vQuery}`;
+        url += `?v=${version === 'dev' ? Date.now() : version}`;
     }
 
-    // Once loader.js runs and registers CopyIconsKit, backfill _kitRegistry and flush pending misses
-    script.onload = () => {
-        const kits = window.CopyIconsKit || {};
-        const kit = kits[kitId];
-        if (kit && kit.config && kit.config.prefix) {
-            const pfx = kit.config.prefix;
-            _kitRegistry[pfx] = { kitId, api: kit.config.api || api };
-            // Flush any misses buffered before the loader was ready
-            _flushPendingMisses(pfx);
-        }
-    };
-
     script.src = url;
     script.async = true;
     document.head.appendChild(script);
@@ -227,11 +91,7 @@ export function initViconic(options = {}) {
 
 /**
  * ViconicIcon — React component for rendering Viconic icons.
- * 
- * Works with both:
- * - System icons: <ViconicIcon name="lucide:home" />
- * - Kit icons: <ViconicIcon name="@myprefix/home" /> (after initViconic)
- * 
+ *
  * @param {string} name - Icon identifier (e.g., "lucide:home", "@prefix/name")
  * @param {string} [className] - CSS class names
  * @param {object} [style] - Inline styles
@@ -246,7 +106,6 @@ export const ViconicIcon = ({ name, className, style, size, color, ...props }) =
         const el = iconRef.current;
         if (!el) return;
 
-        // --- FIX DOM REUSE (Reconciliation) ---
         if (prevNameRef.current !== name) {
             el.innerHTML = '';
             el.classList.remove('vi-ok', 'svg-loaded', 'vi-mono', 'ci-multicolor');
@@ -260,78 +119,73 @@ export const ViconicIcon = ({ name, className, style, size, color, ...props }) =
             return el.classList.contains('vi-ok') || el.classList.contains('svg-loaded');
         }
 
-        // --- PATH 1: Synchronous inject from W.icons (pre-loaded from localStorage at module init) ---
-        if (!isInjected()) {
+        function tryInjectFromCache() {
+            if (isInjected()) return false;
             const W = window.__viconic;
-            if (W && W.icons) {
-                // Try all key variants: iconBaseName, @prefix/name, prefix:name, prefix/name
-                const iconBaseName = prefixMatch ? prefixMatch[2] : null;
-                const svg = (iconBaseName && W.icons[iconBaseName])
-                    || (name && W.icons[name])
-                    || null;
-                if (svg) {
-                    el.innerHTML = svg;
-                    el.classList.add('vi-ok', 'svg-loaded');
-                }
+            if (!W || !W.icons) return false;
+            const baseName = prefixMatch ? prefixMatch[2] : null;
+            const svg = (baseName && W.icons[baseName])
+                || (name && W.icons[name])
+                || null;
+            if (svg) {
+                el.innerHTML = svg;
+                el.classList.add('vi-ok', 'svg-loaded');
+                return true;
             }
+            return false;
         }
 
-        // --- PATH 2: Smart loader for system icons (prefix:name) ---
-        if (!isInjected() && !isKitIcon) {
+        // PATH 1: Already in W.icons (from localStorage preload or prior fetch)
+        if (tryInjectFromCache()) return;
+
+        // PATH 2: System icons — delegate to smart loader
+        if (!isKitIcon) {
             if (window.CopyIcons && window.CopyIcons.forceProcess) {
                 window.CopyIcons.forceProcess(el);
+            } else if (el._u) {
+                el._u();
             }
         }
 
-        // --- PATH 3: Custom element _u() call (kit loader registered element, system icons only) ---
-        if (!isInjected() && !isKitIcon && el._u) {
-            el._u();
-        }
-
         if (isInjected()) return;
 
-        // --- PATH 4: Event-driven — listen for viconic:ready fired by kit loader after register() ---
-        // Much faster than polling: icons appear the instant the loader finishes fetching them.
-        function tryInjectFromEvent() {
-            if (isInjected()) return;
-            const W = window.__viconic;
-            if (W && W.icons) {
-                const iconBaseName = prefixMatch ? prefixMatch[2] : null;
-                const svg = (iconBaseName && W.icons[iconBaseName])
-                    || (name && W.icons[name])
-                    || null;
-                if (svg) {
-                    el.innerHTML = svg;
-                    el.classList.add('vi-ok', 'svg-loaded');
-                    return;
+        // PATH 3: Kit icons — let loader.js handle batching via el._u()
+        // el._u() notifies the loader element to queue this icon.
+        // Loader already has its own debounced batch queue.
+        // Use window-level dedup to prevent Strict Mode / HMR double-calls.
+        if (isKitIcon && prefixMatch) {
+            const kitId = (() => {
+                const kits = window.CopyIconsKit || {};
+                for (const kId in kits) {
+                    if (kits[kId].config && kits[kId].config.prefix === prefixMatch[1]) return kId;
+                }
+                return prefixMatch[1]; // fallback to prefix as key
+            })();
+
+            if (!_isQueued(kitId, prefixMatch[2])) {
+                if (el._u) {
+                    el._u();
                 }
-            }
-            if (!isKitIcon && el._u) el._u();
-            if (!isKitIcon && window.CopyIcons && window.CopyIcons.forceProcess) {
-                window.CopyIcons.forceProcess(el);
             }
         }
 
-        document.addEventListener('viconic:ready', tryInjectFromEvent);
-
-        // --- PATH 5: Immediate queue for missing kit icons ---
-        // Call _queueKitMiss immediately (no per-component delay) so all icons from
-        // the same render cycle are collected into the same debounced batch request.
-        if (!isInjected() && isKitIcon && prefixMatch) {
-            const prefix = prefixMatch[1];
-            const iconBaseName = prefixMatch[2];
-            _queueKitMiss(prefix, iconBaseName);
+        // PATH 4: Listen for viconic:ready to inject when loader finishes fetching
+        function onReady() {
+            if (tryInjectFromCache()) {
+                document.removeEventListener('viconic:ready', onReady);
+            }
         }
+        document.addEventListener('viconic:ready', onReady);
 
         return () => {
-            document.removeEventListener('viconic:ready', tryInjectFromEvent);
+            document.removeEventListener('viconic:ready', onReady);
         };
     }, [name, className, size, color, style]);
 
     const combinedStyle = {
         ...(size ? { fontSize: size } : {}),
         ...(color ? { color: color } : {}),
-        ...style
+        ...style,
     };
 
     return (