xertica-ui 1.4.0 → 1.4.2

package/components/ui/google-maps-loader.tsx

@@ -119,13 +119,14 @@ function loadGoogleMapsScript(apiKey?: string): Promise<void> {
       }
     }
 
-    // Verificar se o script já existe com KEY DIFERENTE
+    // Verificar se o script já existe
     const existing = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`) as HTMLScriptElement;
     if (existing) {
-      // Se existe mas com chave diferente, precisamos recarregar a página
+      // Se existe mas com chave diferente, logar aviso. Não podemos recarregar com SPA se componentes já foram definidos.
       if (!existing.src.includes(`key=${apiKey}`)) {
-        console.warn('[GoogleMapsLoader] API key changed, page reload required');
-        reject(new Error('API key changed. Please reload the page to apply changes.'));
+        console.warn('[GoogleMapsLoader] API key changed, but Google Maps cannot be reloaded without a full page refresh because custom elements are already defined.');
+        // Don't reject, just resolve to keep the app working with the old key until refresh
+        resolve();
         return;
       }
 
@@ -134,7 +135,6 @@ function loadGoogleMapsScript(apiKey?: string): Promise<void> {
         resolve();
       } else {
         existing.addEventListener('load', () => {
-          // Aguardar um pouco para garantir que todas as bibliotecas foram carregadas
           setTimeout(() => {
             if (isMarkerLibraryLoaded()) {
               resolve();
@@ -148,6 +148,13 @@ function loadGoogleMapsScript(apiKey?: string): Promise<void> {
       return;
     }
 
+    // Prevenir reinjeção se customElements já tem gmp-map (garantia final)
+    if (typeof customElements !== 'undefined' && customElements.get('gmp-map')) {
+      console.warn('[GoogleMapsLoader] gmp-map is already defined in customElements. Skipping script injection.');
+      resolve();
+      return;
+    }
+
     // Criar novo script
     const script = document.createElement('script');
     const params = new URLSearchParams({
@@ -399,16 +406,23 @@ export function reloadGoogleMaps(newApiKey: string): Promise<void> {
     }
 
     // Verificar se a key atual é a mesma
-    const existingScript = document.querySelector(`script[src*=\"maps.googleapis.com/maps/api/js\"]`) as HTMLScriptElement;
+    const existingScript = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`) as HTMLScriptElement;
     if (existingScript && existingScript.src.includes(`key=${newApiKey}`)) {
-      // Mesma key, apenas resolver
-      if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
-        resolve();
-        return;
-      }
+      // Mesma key, apenas resolver (ou esperar carregar)
+      resolve();
+      return;
+    }
+
+    // Se a chave for diferente, NÃO PODEMOS remover o script e adicionar outro 
+    // se o Google Maps já definiu custom elements. Isso causa o erro:
+    // "Element with name 'gmp-...' already defined"
+    if (typeof customElements !== 'undefined' && customElements.get('gmp-map')) {
+      console.warn('[GoogleMapsLoader] Cannot reload map API dynamically because custom elements (gmp-map) are already registered. A full page reload is required to apply the new API key.');
+      resolve(); // Resolver para não quebrar a UI
+      return;
     }
 
-    // Remover script antigo
+    // Se chegou aqui e não tem custom elements, podemos tentar recarregar
     removeExistingScript();
 
     // Atualizar singleton

package/components/ui/map.tsx

@@ -413,39 +413,47 @@ MapContent.displayName = "MapContent";
 
 export const Map = React.forwardRef<HTMLDivElement, MapProps>(
   (props, ref) => {
+    const { isLoaded, loadError } = useGoogleMapsLoader();
     const effectiveApiKey = props.apiKey || (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_GOOGLE_MAPS_API_KEY) || "";
 
     const isValidKey = effectiveApiKey &&
       effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" &&
       effectiveApiKey.startsWith("AIza");
 
-    if (!isValidKey) {
-      // ... (keep existing error state rendering)
-      return (
-        <div
-          ref={ref}
-          className={cn(
-            "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
-            props.className
-          )}
-          style={{ height: props.height || "400px" }}
-        >
-          <div className="absolute inset-0 flex items-center justify-center bg-muted">
-            <div className="text-center space-y-3 p-6">
-              <div className="w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center">
-                <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                </svg>
-              </div>
-              <p className="text-sm text-muted-foreground">Configure Google Maps API Key in Settings</p>
+    if (isLoaded || isValidKey || loadError) {
+      return <MapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
+    }
+
+    // Check if the script is injected in the DOM (loading via provider)
+    const isScriptInjected = typeof document !== 'undefined' && !!document.querySelector('script[src*="maps.googleapis.com/maps/api/js"]');
+
+    if (isScriptInjected) {
+      // Let MapContent show the loading skeleton
+      return <MapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
+          props.className
+        )}
+        style={{ height: props.height || "400px" }}
+      >
+        <div className="absolute inset-0 flex items-center justify-center bg-muted">
+          <div className="text-center space-y-3 p-6">
+            <div className="w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center">
+              <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
             </div>
+            <p className="text-sm text-muted-foreground">Configure Google Maps API Key in Settings</p>
           </div>
         </div>
-      );
-    }
-
-    return <MapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
+      </div>
+    );
   }
 );
 Map.displayName = "Map";

package/components/ui/route-map.tsx

@@ -234,46 +234,54 @@ RouteMapContent.displayName = "RouteMapContent";
 
 export const RouteMap = React.forwardRef<HTMLDivElement, RouteMapProps>(
   (props, ref) => {
+    const { isLoaded, loadError } = useGoogleMapsLoader();
     const effectiveApiKey = props.apiKey || (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_GOOGLE_MAPS_API_KEY) || "";
 
     const isValidKey = effectiveApiKey &&
       effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" &&
       effectiveApiKey.startsWith("AIza");
 
-    if (!isValidKey) {
-      const {
-        origin, destination, waypoints, travelMode, height, apiKey,
-        mapContainerClassName, disableDefaultUI, zoomControl,
-        streetViewControl, mapTypeControl, fullscreenControl,
-        onRouteCalculated, ...divProps
-      } = props;
+    if (isLoaded || isValidKey || loadError) {
+      return <RouteMapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
+    }
 
-      return (
-        <div
-          ref={ref}
-          className={cn(
-            "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
-            props.className
-          )}
-          style={{ height: props.height || "450px" }}
-          {...divProps}
-        >
-          <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-muted/50 to-muted">
-            <div className="text-center space-y-3 p-6">
-              <div className="w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center">
-                <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                </svg>
-              </div>
-              <p className="text-sm text-muted-foreground">Configure Google Maps API Key in Settings</p>
+    // Check if the script is injected in the DOM (loading via provider)
+    const isScriptInjected = typeof document !== 'undefined' && !!document.querySelector('script[src*="maps.googleapis.com/maps/api/js"]');
+
+    if (isScriptInjected) {
+      return <RouteMapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
+    }
+
+    const {
+      origin, destination, waypoints, travelMode, height, apiKey,
+      mapContainerClassName, disableDefaultUI, zoomControl,
+      streetViewControl, mapTypeControl, fullscreenControl,
+      onRouteCalculated, ...divProps
+    } = props;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
+          props.className
+        )}
+        style={{ height: props.height || "450px" }}
+        {...divProps}
+      >
+        <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-muted/50 to-muted">
+          <div className="text-center space-y-3 p-6">
+            <div className="w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center">
+              <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
             </div>
+            <p className="text-sm text-muted-foreground">Configure Google Maps API Key in Settings</p>
           </div>
         </div>
-      );
-    }
-
-    return <RouteMapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
+      </div>
+    );
   }
 );
 RouteMap.displayName = "RouteMap";

package/dist/index.es.js

@@ -47987,8 +47987,8 @@ function loadGoogleMapsScript(apiKey) {
     const existing = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`);
     if (existing) {
       if (!existing.src.includes(`key=${apiKey}`)) {
-        console.warn("[GoogleMapsLoader] API key changed, page reload required");
-        reject(new Error("API key changed. Please reload the page to apply changes."));
+        console.warn("[GoogleMapsLoader] API key changed, but Google Maps cannot be reloaded without a full page refresh because custom elements are already defined.");
+        resolve();
         return;
       }
       if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
@@ -48007,6 +48007,11 @@ function loadGoogleMapsScript(apiKey) {
       }
       return;
     }
+    if (typeof customElements !== "undefined" && customElements.get("gmp-map")) {
+      console.warn("[GoogleMapsLoader] gmp-map is already defined in customElements. Skipping script injection.");
+      resolve();
+      return;
+    }
     const script = document.createElement("script");
     const params = new URLSearchParams({
       key: apiKey,
@@ -48173,10 +48178,13 @@ function reloadGoogleMaps(newApiKey) {
     }
     const existingScript = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`);
     if (existingScript && existingScript.src.includes(`key=${newApiKey}`)) {
-      if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
-        resolve();
-        return;
-      }
+      resolve();
+      return;
+    }
+    if (typeof customElements !== "undefined" && customElements.get("gmp-map")) {
+      console.warn("[GoogleMapsLoader] Cannot reload map API dynamically because custom elements (gmp-map) are already registered. A full page reload is required to apply the new API key.");
+      resolve();
+      return;
     }
     removeExistingScript();
     updateSingleton({ isLoaded: false, loadError: void 0 });
@@ -54950,29 +54958,34 @@ const MapContent = React__default.forwardRef(
 MapContent.displayName = "MapContent";
 const Map$1 = React__default.forwardRef(
   (props, ref) => {
+    const { isLoaded, loadError } = useGoogleMapsLoader();
     const effectiveApiKey = props.apiKey || typeof import.meta !== "undefined" && __vite_import_meta_env__$1 && void 0 || "";
     const isValidKey = effectiveApiKey && effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" && effectiveApiKey.startsWith("AIza");
-    if (!isValidKey) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          ref,
-          className: cn(
-            "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
-            props.className
-          ),
-          style: { height: props.height || "400px" },
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 p-6", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-8 h-8 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure Google Maps API Key in Settings" })
-          ] }) })
-        }
-      );
+    if (isLoaded || isValidKey || loadError) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(MapContent, { ref, ...props, apiKey: effectiveApiKey });
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(MapContent, { ref, ...props, apiKey: effectiveApiKey });
+    const isScriptInjected = typeof document !== "undefined" && !!document.querySelector('script[src*="maps.googleapis.com/maps/api/js"]');
+    if (isScriptInjected) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(MapContent, { ref, ...props, apiKey: effectiveApiKey });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
+          props.className
+        ),
+        style: { height: props.height || "400px" },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 p-6", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-8 h-8 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure Google Maps API Key in Settings" })
+        ] }) })
+      }
+    );
   }
 );
 Map$1.displayName = "Map";
@@ -71070,46 +71083,51 @@ const RouteMapContent = React__default.forwardRef(
 RouteMapContent.displayName = "RouteMapContent";
 const RouteMap = React__default.forwardRef(
   (props, ref) => {
+    const { isLoaded, loadError } = useGoogleMapsLoader();
     const effectiveApiKey = props.apiKey || typeof import.meta !== "undefined" && __vite_import_meta_env__ && void 0 || "";
     const isValidKey = effectiveApiKey && effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" && effectiveApiKey.startsWith("AIza");
-    if (!isValidKey) {
-      const {
-        origin,
-        destination,
-        waypoints,
-        travelMode,
-        height,
-        apiKey,
-        mapContainerClassName,
-        disableDefaultUI,
-        zoomControl,
-        streetViewControl,
-        mapTypeControl,
-        fullscreenControl,
-        onRouteCalculated,
-        ...divProps
-      } = props;
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          ref,
-          className: cn(
-            "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
-            props.className
-          ),
-          style: { height: props.height || "450px" },
-          ...divProps,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-muted/50 to-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 p-6", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-8 h-8 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure Google Maps API Key in Settings" })
-          ] }) })
-        }
-      );
+    if (isLoaded || isValidKey || loadError) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(RouteMapContent, { ref, ...props, apiKey: effectiveApiKey });
+    }
+    const isScriptInjected = typeof document !== "undefined" && !!document.querySelector('script[src*="maps.googleapis.com/maps/api/js"]');
+    if (isScriptInjected) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(RouteMapContent, { ref, ...props, apiKey: effectiveApiKey });
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(RouteMapContent, { ref, ...props, apiKey: effectiveApiKey });
+    const {
+      origin,
+      destination,
+      waypoints,
+      travelMode,
+      height,
+      apiKey,
+      mapContainerClassName,
+      disableDefaultUI,
+      zoomControl,
+      streetViewControl,
+      mapTypeControl,
+      fullscreenControl,
+      onRouteCalculated,
+      ...divProps
+    } = props;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
+          props.className
+        ),
+        style: { height: props.height || "450px" },
+        ...divProps,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-muted/50 to-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 p-6", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-8 h-8 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure Google Maps API Key in Settings" })
+        ] }) })
+      }
+    );
   }
 );
 RouteMap.displayName = "RouteMap";

package/dist/index.umd.js

@@ -48006,8 +48006,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       const existing = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`);
       if (existing) {
         if (!existing.src.includes(`key=${apiKey}`)) {
-          console.warn("[GoogleMapsLoader] API key changed, page reload required");
-          reject(new Error("API key changed. Please reload the page to apply changes."));
+          console.warn("[GoogleMapsLoader] API key changed, but Google Maps cannot be reloaded without a full page refresh because custom elements are already defined.");
+          resolve();
           return;
         }
         if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
@@ -48026,6 +48026,11 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         }
         return;
       }
+      if (typeof customElements !== "undefined" && customElements.get("gmp-map")) {
+        console.warn("[GoogleMapsLoader] gmp-map is already defined in customElements. Skipping script injection.");
+        resolve();
+        return;
+      }
       const script = document.createElement("script");
       const params = new URLSearchParams({
         key: apiKey,
@@ -48192,10 +48197,13 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       }
       const existingScript = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`);
       if (existingScript && existingScript.src.includes(`key=${newApiKey}`)) {
-        if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
-          resolve();
-          return;
-        }
+        resolve();
+        return;
+      }
+      if (typeof customElements !== "undefined" && customElements.get("gmp-map")) {
+        console.warn("[GoogleMapsLoader] Cannot reload map API dynamically because custom elements (gmp-map) are already registered. A full page reload is required to apply the new API key.");
+        resolve();
+        return;
       }
       removeExistingScript();
       updateSingleton({ isLoaded: false, loadError: void 0 });
@@ -54969,29 +54977,34 @@ Defaulting to \`null\`.`;
   MapContent.displayName = "MapContent";
   const Map$1 = React.forwardRef(
     (props, ref) => {
+      const { isLoaded, loadError } = useGoogleMapsLoader();
       const effectiveApiKey = props.apiKey || typeof { url: typeof document === "undefined" && typeof location === "undefined" ? require("url").pathToFileURL(__filename).href : typeof document === "undefined" ? location.href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("index.umd.js", document.baseURI).href } !== "undefined" && __vite_import_meta_env__$1 && void 0 || "";
       const isValidKey = effectiveApiKey && effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" && effectiveApiKey.startsWith("AIza");
-      if (!isValidKey) {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            ref,
-            className: cn(
-              "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
-              props.className
-            ),
-            style: { height: props.height || "400px" },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 p-6", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-8 h-8 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure Google Maps API Key in Settings" })
-            ] }) })
-          }
-        );
+      if (isLoaded || isValidKey || loadError) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(MapContent, { ref, ...props, apiKey: effectiveApiKey });
       }
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(MapContent, { ref, ...props, apiKey: effectiveApiKey });
+      const isScriptInjected = typeof document !== "undefined" && !!document.querySelector('script[src*="maps.googleapis.com/maps/api/js"]');
+      if (isScriptInjected) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(MapContent, { ref, ...props, apiKey: effectiveApiKey });
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          ref,
+          className: cn(
+            "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
+            props.className
+          ),
+          style: { height: props.height || "400px" },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 p-6", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-8 h-8 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure Google Maps API Key in Settings" })
+          ] }) })
+        }
+      );
     }
   );
   Map$1.displayName = "Map";
@@ -71089,46 +71102,51 @@ For more information, see https://radix-ui.com/primitives/docs/components/alert-
   RouteMapContent.displayName = "RouteMapContent";
   const RouteMap = React.forwardRef(
     (props, ref) => {
+      const { isLoaded, loadError } = useGoogleMapsLoader();
       const effectiveApiKey = props.apiKey || typeof { url: typeof document === "undefined" && typeof location === "undefined" ? require("url").pathToFileURL(__filename).href : typeof document === "undefined" ? location.href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("index.umd.js", document.baseURI).href } !== "undefined" && __vite_import_meta_env__ && void 0 || "";
       const isValidKey = effectiveApiKey && effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" && effectiveApiKey.startsWith("AIza");
-      if (!isValidKey) {
-        const {
-          origin,
-          destination,
-          waypoints,
-          travelMode,
-          height,
-          apiKey,
-          mapContainerClassName,
-          disableDefaultUI,
-          zoomControl,
-          streetViewControl,
-          mapTypeControl,
-          fullscreenControl,
-          onRouteCalculated,
-          ...divProps
-        } = props;
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            ref,
-            className: cn(
-              "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
-              props.className
-            ),
-            style: { height: props.height || "450px" },
-            ...divProps,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-muted/50 to-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 p-6", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-8 h-8 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure Google Maps API Key in Settings" })
-            ] }) })
-          }
-        );
+      if (isLoaded || isValidKey || loadError) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(RouteMapContent, { ref, ...props, apiKey: effectiveApiKey });
+      }
+      const isScriptInjected = typeof document !== "undefined" && !!document.querySelector('script[src*="maps.googleapis.com/maps/api/js"]');
+      if (isScriptInjected) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(RouteMapContent, { ref, ...props, apiKey: effectiveApiKey });
       }
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(RouteMapContent, { ref, ...props, apiKey: effectiveApiKey });
+      const {
+        origin,
+        destination,
+        waypoints,
+        travelMode,
+        height,
+        apiKey,
+        mapContainerClassName,
+        disableDefaultUI,
+        zoomControl,
+        streetViewControl,
+        mapTypeControl,
+        fullscreenControl,
+        onRouteCalculated,
+        ...divProps
+      } = props;
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          ref,
+          className: cn(
+            "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
+            props.className
+          ),
+          style: { height: props.height || "450px" },
+          ...divProps,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-muted/50 to-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 p-6", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-8 h-8 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure Google Maps API Key in Settings" })
+          ] }) })
+        }
+      );
     }
   );
   RouteMap.displayName = "RouteMap";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Xertica UI - Design System completo com componentes React e Tailwind CSS",
   "type": "module",
   "main": "./dist/index.umd.js",