@krak-stack/registry 0.1.0

package/dist/components/ui/google-map.js

@@ -0,0 +1,754 @@
+// ../../src/components/ui/google-map.tsx
+import { Minus, Plus } from "lucide-react";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+
+// ../../src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ../../src/paraglide/runtime.js
+import"@inlang/paraglide-js/urlpattern-polyfill";
+var baseLocale = "en";
+var locales = ["en", "fr"];
+var cookieName = "locale";
+var cookieMaxAge = 34560000;
+var cookieDomain = "";
+var localStorageKey = "PARAGLIDE_LOCALE";
+var strategy = [
+  "url",
+  "cookie",
+  "preferredLanguage",
+  "baseLocale"
+];
+var routeStrategies = [
+  {
+    match: "/api/:path(.*)?",
+    exclude: true
+  }
+];
+var urlPatterns = [
+  {
+    pattern: "/:path(.*)?",
+    localized: [
+      [
+        "en",
+        "/en/:path(.*)?"
+      ],
+      [
+        "fr",
+        "/fr/:path(.*)?"
+      ]
+    ]
+  }
+];
+var cachedRouteStrategyUrl;
+var cachedRouteStrategy;
+function findMatchingRouteStrategy(url) {
+  if (routeStrategies.length === 0) {
+    return;
+  }
+  const urlString = typeof url === "string" ? url : url.href;
+  if (cachedRouteStrategyUrl === urlString) {
+    return cachedRouteStrategy;
+  }
+  const urlObject = new URL(urlString, "http://dummy.com");
+  let match;
+  for (const routeStrategy of routeStrategies) {
+    const pattern = new URLPattern(routeStrategy.match, urlObject.href);
+    if (pattern.exec(urlObject.href)) {
+      match = routeStrategy;
+      break;
+    }
+  }
+  cachedRouteStrategyUrl = urlString;
+  cachedRouteStrategy = match;
+  return match;
+}
+function getStrategyForUrl(url) {
+  const routeStrategy = findMatchingRouteStrategy(url);
+  if (routeStrategy && routeStrategy.exclude !== true && Array.isArray(routeStrategy.strategy)) {
+    return routeStrategy.strategy;
+  }
+  return strategy;
+}
+var serverAsyncLocalStorage = undefined;
+var isServer = import.meta.env?.SSR ?? typeof window === "undefined";
+var experimentalStaticLocale = undefined;
+var TREE_SHAKE_COOKIE_STRATEGY_USED = true;
+var TREE_SHAKE_URL_STRATEGY_USED = true;
+var TREE_SHAKE_GLOBAL_VARIABLE_STRATEGY_USED = false;
+var TREE_SHAKE_PREFERRED_LANGUAGE_STRATEGY_USED = true;
+var TREE_SHAKE_DEFAULT_URL_PATTERN_USED = false;
+var TREE_SHAKE_LOCAL_STORAGE_STRATEGY_USED = false;
+globalThis.__paraglide = globalThis.__paraglide ?? {};
+globalThis.__paraglide.ssr = globalThis.__paraglide.ssr ?? {};
+var _locale;
+var localeInitiallySet = false;
+var getLocale = () => {
+  if (experimentalStaticLocale !== undefined) {
+    return experimentalStaticLocale;
+  }
+  if (serverAsyncLocalStorage) {
+    const locale = serverAsyncLocalStorage?.getStore()?.locale;
+    if (locale) {
+      return locale;
+    }
+  }
+  let strategyToUse = strategy;
+  if (!isServer && typeof window !== "undefined" && window.location?.href) {
+    strategyToUse = getStrategyForUrl(window.location.href);
+  }
+  const resolved = resolveLocaleWithStrategies(strategyToUse, typeof window !== "undefined" ? window.location?.href : undefined);
+  if (resolved) {
+    if (!localeInitiallySet) {
+      _locale = resolved;
+      localeInitiallySet = true;
+      setLocale(resolved, { reload: false });
+    }
+    return resolved;
+  }
+  throw new Error("No locale found. Read the docs https://paraglidejs.com/errors#no-locale-found");
+};
+function resolveLocaleWithStrategies(strategyToUse, urlForUrlStrategy) {
+  let locale;
+  for (const strat of strategyToUse) {
+    if (TREE_SHAKE_COOKIE_STRATEGY_USED && strat === "cookie") {
+      locale = extractLocaleFromCookie();
+    } else if (strat === "baseLocale") {
+      locale = baseLocale;
+    } else if (TREE_SHAKE_URL_STRATEGY_USED && strat === "url" && !isServer && typeof urlForUrlStrategy === "string") {
+      locale = extractLocaleFromUrl(urlForUrlStrategy);
+    } else if (TREE_SHAKE_GLOBAL_VARIABLE_STRATEGY_USED && strat === "globalVariable" && _locale !== undefined) {
+      locale = _locale;
+    } else if (TREE_SHAKE_PREFERRED_LANGUAGE_STRATEGY_USED && strat === "preferredLanguage" && !isServer) {
+      locale = extractLocaleFromNavigator();
+    } else if (TREE_SHAKE_LOCAL_STORAGE_STRATEGY_USED && strat === "localStorage" && !isServer) {
+      locale = localStorage.getItem(localStorageKey) ?? undefined;
+    } else if (isCustomStrategy(strat) && customClientStrategies.has(strat)) {
+      const handler = customClientStrategies.get(strat);
+      if (handler) {
+        const result = handler.getLocale();
+        if (result instanceof Promise) {
+          continue;
+        }
+        if (result !== undefined) {
+          return assertIsLocale(result);
+        }
+      }
+    }
+    const matchedLocale = toLocale(locale);
+    if (matchedLocale) {
+      return matchedLocale;
+    }
+  }
+  return;
+}
+var rtlLanguages = new Set([
+  "ar",
+  "dv",
+  "fa",
+  "he",
+  "ks",
+  "ku",
+  "ps",
+  "sd",
+  "ug",
+  "ur",
+  "yi"
+]);
+var navigateOrReload = (newLocation) => {
+  if (newLocation) {
+    window.location.href = newLocation;
+  } else {
+    window.location.reload();
+  }
+};
+var setLocale = (newLocale, options) => {
+  const optionsWithDefaults = {
+    reload: true,
+    ...options
+  };
+  let currentLocale;
+  try {
+    currentLocale = getLocale();
+  } catch {}
+  const customSetLocalePromises = [];
+  let newLocation = undefined;
+  let strategyToUse = strategy;
+  if (!isServer && typeof window !== "undefined" && window.location?.href) {
+    strategyToUse = getStrategyForUrl(window.location.href);
+  }
+  for (const strat of strategyToUse) {
+    if (TREE_SHAKE_GLOBAL_VARIABLE_STRATEGY_USED && strat === "globalVariable") {
+      _locale = newLocale;
+    } else if (TREE_SHAKE_COOKIE_STRATEGY_USED && strat === "cookie") {
+      if (isServer || typeof document === "undefined" || typeof window === "undefined") {
+        continue;
+      }
+      const cookieString = `${cookieName}=${newLocale}; path=/; max-age=${cookieMaxAge}`;
+      document.cookie = cookieDomain ? `${cookieString}; domain=${cookieDomain}` : cookieString;
+    } else if (strat === "baseLocale") {
+      continue;
+    } else if (TREE_SHAKE_URL_STRATEGY_USED && strat === "url" && typeof window !== "undefined") {
+      newLocation = localizeUrl(window.location.href, {
+        locale: newLocale
+      }).href;
+    } else if (TREE_SHAKE_LOCAL_STORAGE_STRATEGY_USED && strat === "localStorage" && typeof window !== "undefined") {
+      localStorage.setItem(localStorageKey, newLocale);
+    } else if (isCustomStrategy(strat) && customClientStrategies.has(strat)) {
+      const handler = customClientStrategies.get(strat);
+      if (handler) {
+        let result = handler.setLocale(newLocale);
+        if (result instanceof Promise) {
+          result = result.catch((error) => {
+            throw new Error(`Custom strategy "${strat}" setLocale failed.`, {
+              cause: error
+            });
+          });
+          customSetLocalePromises.push(result);
+        }
+      }
+    }
+  }
+  const runReload = () => {
+    if (!isServer && optionsWithDefaults.reload && window.location && newLocale !== currentLocale) {
+      navigateOrReload(newLocation);
+    }
+  };
+  if (customSetLocalePromises.length) {
+    return Promise.all(customSetLocalePromises).then(() => {
+      runReload();
+    });
+  }
+  runReload();
+  return;
+};
+var getUrlOrigin = () => {
+  if (serverAsyncLocalStorage) {
+    return serverAsyncLocalStorage.getStore()?.origin ?? "http://fallback.com";
+  } else if (typeof window !== "undefined") {
+    return window.location.origin;
+  }
+  return "http://fallback.com";
+};
+function toLocale(value) {
+  if (typeof value !== "string") {
+    return;
+  }
+  const lowerValue = value.toLowerCase();
+  for (const locale of locales) {
+    if (locale.toLowerCase() === lowerValue) {
+      return locale;
+    }
+  }
+  return;
+}
+function assertIsLocale(input) {
+  const locale = toLocale(input);
+  if (locale)
+    return locale;
+  throw new Error(`Invalid locale: ${input}. Expected one of: ${locales.join(", ")}`);
+}
+function extractLocaleFromCookie() {
+  if (typeof document === "undefined" || !document.cookie) {
+    return;
+  }
+  const match = document.cookie.match(new RegExp(`(^| )${cookieName}=([^;]+)`));
+  const locale = match?.[2];
+  return toLocale(locale);
+}
+function extractLocaleFromNavigator() {
+  if (!navigator?.languages?.length) {
+    return;
+  }
+  const languages = navigator.languages.map((lang) => ({
+    fullTag: lang,
+    baseTag: lang.split("-")[0]
+  }));
+  for (const lang of languages) {
+    const fullLocale = toLocale(lang.fullTag);
+    if (fullLocale) {
+      return fullLocale;
+    }
+    const baseLocale2 = toLocale(lang.baseTag);
+    if (baseLocale2) {
+      return baseLocale2;
+    }
+  }
+  return;
+}
+var cachedUrl;
+var cachedLocale;
+function extractLocaleFromUrl(url) {
+  const urlString = typeof url === "string" ? url : url.href;
+  if (cachedUrl === urlString) {
+    return cachedLocale;
+  }
+  let result;
+  if (TREE_SHAKE_DEFAULT_URL_PATTERN_USED) {
+    result = defaultUrlPatternExtractLocale(url);
+  } else {
+    const urlObj = typeof url === "string" ? new URL(url) : url;
+    for (const element of urlPatterns) {
+      for (const [locale, localizedPattern] of element.localized) {
+        const match = new URLPattern(localizedPattern, urlObj.href).exec(urlObj.href);
+        if (match) {
+          result = locale;
+          break;
+        }
+      }
+      if (result)
+        break;
+    }
+  }
+  cachedUrl = urlString;
+  cachedLocale = result;
+  return result;
+}
+function defaultUrlPatternExtractLocale(url) {
+  const urlObj = new URL(url, "http://dummy.com");
+  const pathSegments = urlObj.pathname.split("/").filter(Boolean);
+  return toLocale(pathSegments[0]) || baseLocale;
+}
+function localizeUrl(url, options) {
+  const targetLocale = options?.locale ? assertIsLocale(options?.locale) : getLocale();
+  if (TREE_SHAKE_DEFAULT_URL_PATTERN_USED) {
+    return localizeUrlDefaultPattern(url, targetLocale);
+  }
+  const urlObj = typeof url === "string" ? new URL(url) : url;
+  for (const element of urlPatterns) {
+    for (const [, localizedPattern] of element.localized) {
+      const match = new URLPattern(localizedPattern, urlObj.href).exec(urlObj.href);
+      if (!match) {
+        continue;
+      }
+      const targetPattern = element.localized.find(([locale]) => locale === targetLocale)?.[1];
+      if (!targetPattern) {
+        continue;
+      }
+      const localizedUrl = fillPattern(targetPattern, aggregateGroups(match), urlObj.origin);
+      return fillMissingUrlParts(localizedUrl, match);
+    }
+    const unlocalizedMatch = new URLPattern(element.pattern, urlObj.href).exec(urlObj.href);
+    if (unlocalizedMatch) {
+      const targetPattern = element.localized.find(([locale]) => locale === targetLocale)?.[1];
+      if (targetPattern) {
+        const localizedUrl = fillPattern(targetPattern, aggregateGroups(unlocalizedMatch), urlObj.origin);
+        return fillMissingUrlParts(localizedUrl, unlocalizedMatch);
+      }
+    }
+  }
+  return urlObj;
+}
+function localizeUrlDefaultPattern(url, locale) {
+  const urlObj = typeof url === "string" ? new URL(url, getUrlOrigin()) : new URL(url);
+  const currentLocale = extractLocaleFromUrl(urlObj);
+  if (currentLocale === locale) {
+    return urlObj;
+  }
+  const pathSegments = urlObj.pathname.split("/").filter(Boolean);
+  if (pathSegments.length > 0 && toLocale(pathSegments[0])) {
+    pathSegments.shift();
+  }
+  if (locale === baseLocale) {
+    urlObj.pathname = "/" + pathSegments.join("/");
+  } else {
+    urlObj.pathname = "/" + locale + "/" + pathSegments.join("/");
+  }
+  return urlObj;
+}
+function fillMissingUrlParts(url, match) {
+  if (match.protocol.groups["0"]) {
+    url.protocol = match.protocol.groups["0"] ?? "";
+  }
+  if (match.hostname.groups["0"]) {
+    url.hostname = match.hostname.groups["0"] ?? "";
+  }
+  if (match.username.groups["0"]) {
+    url.username = match.username.groups["0"] ?? "";
+  }
+  if (match.password.groups["0"]) {
+    url.password = match.password.groups["0"] ?? "";
+  }
+  if (match.port.groups["0"]) {
+    url.port = match.port.groups["0"] ?? "";
+  }
+  if (match.pathname.groups["0"]) {
+    url.pathname = match.pathname.groups["0"] ?? "";
+  }
+  if (match.search.groups["0"]) {
+    url.search = match.search.groups["0"] ?? "";
+  }
+  if (match.hash.groups["0"]) {
+    url.hash = match.hash.groups["0"] ?? "";
+  }
+  return url;
+}
+function fillPattern(pattern, values, origin) {
+  let processedPattern = pattern.replace(/(https?:\/\/[^:/]+):(\d+)(\/|$)/g, (_, protocol, port, slash) => {
+    return `${protocol}#PORT-${port}#${slash}`;
+  });
+  let processedGroupDelimiters = processedPattern.replace(/\{([^{}]*)\}([?+*]?)/g, (_, content, modifier) => {
+    if (modifier === "?") {
+      return content;
+    }
+    return content;
+  });
+  let filled = processedGroupDelimiters.replace(/(\/?):([a-zA-Z0-9_]+)(\([^)]*\))?([?+*]?)/g, (_, slash, name, __, modifier) => {
+    const value = values[name];
+    if (value === null) {
+      return "";
+    }
+    if (modifier === "?") {
+      return value !== undefined ? `${slash}${value}` : "";
+    }
+    if (modifier === "+" || modifier === "*") {
+      if (value === undefined && modifier === "+") {
+        throw new Error(`Missing value for "${name}" (one or more required)`);
+      }
+      return value ? `${slash}${value}` : "";
+    }
+    if (value === undefined) {
+      throw new Error(`Missing value for "${name}"`);
+    }
+    return `${slash}${value}`;
+  });
+  filled = filled.replace(/#PORT-(\d+)#/g, ":$1");
+  return new URL(filled, origin);
+}
+function aggregateGroups(match) {
+  return {
+    ...match.hash.groups,
+    ...match.hostname.groups,
+    ...match.password.groups,
+    ...match.pathname.groups,
+    ...match.port.groups,
+    ...match.protocol.groups,
+    ...match.search.groups,
+    ...match.username.groups
+  };
+}
+var customServerStrategies = new Map;
+var customClientStrategies = new Map;
+function isCustomStrategy(strategy2) {
+  return typeof strategy2 === "string" && /^custom-[A-Za-z0-9_-]+$/.test(strategy2);
+}
+
+// ../../src/components/ui/google-map.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+var googleMapsScriptId = "krak-stack-google-maps-script";
+var googleMapsCallbackName = "__krakStackGoogleMapsInit";
+var googleMapsPromise;
+var defaultMessages = {
+  en: {
+    mapLabel: "Google map",
+    loading: "Loading map...",
+    missingKeyTitle: "Map unavailable",
+    missingKeyBody: "Provide a Google Maps API key to display the map.",
+    errorTitle: "Map unavailable",
+    errorBody: "Google Maps could not be loaded. Try again later.",
+    zoomIn: "Zoom in",
+    zoomOut: "Zoom out"
+  },
+  fr: {
+    mapLabel: "Carte Google",
+    loading: "Chargement de la carte...",
+    missingKeyTitle: "Carte indisponible",
+    missingKeyBody: "Fournissez une clé d’API Google Maps pour afficher la carte.",
+    errorTitle: "Carte indisponible",
+    errorBody: "Impossible de charger Google Maps. Réessayez plus tard.",
+    zoomIn: "Zoom avant",
+    zoomOut: "Zoom arrière"
+  }
+};
+var googleMapMessages = (overrides) => ({
+  ...getLocale().startsWith("fr") ? defaultMessages.fr : defaultMessages.en,
+  ...overrides
+});
+var isGoogleMapsReady = (api) => Boolean(api?.maps.Map && api.maps.Marker && api.maps.Circle && api.maps.event);
+var loadGoogleMaps = (apiKey) => {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return Promise.reject(new Error("Google Maps requires a browser."));
+  }
+  if (isGoogleMapsReady(window.google))
+    return Promise.resolve(window.google);
+  if (googleMapsPromise)
+    return googleMapsPromise;
+  googleMapsPromise = new Promise((resolve, reject) => {
+    const resolveApi = () => {
+      if (isGoogleMapsReady(window.google))
+        resolve(window.google);
+      else
+        reject(new Error("Google Maps failed to initialize."));
+    };
+    const rejectLoad = () => reject(new Error("Google Maps failed to load."));
+    window[googleMapsCallbackName] = resolveApi;
+    const existingScript = document.getElementById(googleMapsScriptId);
+    if (existingScript) {
+      existingScript.addEventListener("error", rejectLoad, { once: true });
+      existingScript.addEventListener("load", resolveApi, { once: true });
+      return;
+    }
+    const script = document.createElement("script");
+    script.id = googleMapsScriptId;
+    script.async = true;
+    script.src = `https://maps.googleapis.com/maps/api/js?key=${encodeURIComponent(apiKey)}&loading=async&callback=${googleMapsCallbackName}`;
+    script.addEventListener("error", rejectLoad, { once: true });
+    document.head.append(script);
+  }).catch((error) => {
+    googleMapsPromise = undefined;
+    window[googleMapsCallbackName] = undefined;
+    document.getElementById(googleMapsScriptId)?.remove();
+    throw error;
+  });
+  return googleMapsPromise;
+};
+var clampZoom = (zoom, minZoom, maxZoom) => Math.min(maxZoom, Math.max(minZoom, zoom));
+var mapOptions = (center, zoom, interactive, minZoom, maxZoom) => ({
+  center,
+  zoom: clampZoom(zoom, minZoom, maxZoom),
+  clickableIcons: interactive,
+  disableDefaultUI: true,
+  draggable: interactive,
+  fullscreenControl: false,
+  gestureHandling: interactive ? "auto" : "none",
+  keyboardShortcuts: interactive,
+  mapTypeControl: false,
+  maxZoom,
+  minZoom,
+  scrollwheel: interactive,
+  streetViewControl: false,
+  zoomControl: false
+});
+function GoogleMap({
+  apiKey,
+  center,
+  zoom,
+  marker,
+  radius,
+  interactive = true,
+  zoomControls = true,
+  minZoom = 3,
+  maxZoom = 20,
+  className,
+  messages: messageOverrides
+}) {
+  const mapElementRef = useRef(null);
+  const apiRef = useRef(null);
+  const mapRef = useRef(null);
+  const markerRef = useRef(null);
+  const circleRef = useRef(null);
+  const zoomListenerRef = useRef(null);
+  const normalizedApiKey = apiKey.trim();
+  const normalizedMinZoom = Math.min(minZoom, maxZoom);
+  const normalizedMaxZoom = Math.max(minZoom, maxZoom);
+  const initialZoom = clampZoom(zoom, normalizedMinZoom, normalizedMaxZoom);
+  const [loadState, setLoadState] = useState(normalizedApiKey ? "loading" : "missing-key");
+  const [currentZoom, setCurrentZoom] = useState(initialZoom);
+  const labels = googleMapMessages(messageOverrides);
+  const markerEnabled = marker === true || typeof marker === "object";
+  const markerIcon = typeof marker === "object" ? marker.icon : undefined;
+  const centerLat = center.lat;
+  const centerLng = center.lng;
+  const radiusMeters = radius?.radiusMeters;
+  const radiusFillColor = radius?.fillColor;
+  const radiusFillOpacity = radius?.fillOpacity;
+  const radiusStrokeColor = radius?.strokeColor;
+  const radiusStrokeOpacity = radius?.strokeOpacity;
+  const radiusStrokeWeight = radius?.strokeWeight;
+  const initializeMap = useEffectEvent((api, element) => {
+    const map = new api.maps.Map(element, mapOptions(center, zoom, interactive, normalizedMinZoom, normalizedMaxZoom));
+    apiRef.current = api;
+    mapRef.current = map;
+    zoomListenerRef.current = api.maps.event.addListener(map, "zoom_changed", () => setCurrentZoom(map.getZoom() ?? zoom));
+    setCurrentZoom(clampZoom(zoom, normalizedMinZoom, normalizedMaxZoom));
+    setLoadState("ready");
+  });
+  useEffect(() => {
+    if (!normalizedApiKey) {
+      setLoadState("missing-key");
+      return;
+    }
+    const element = mapElementRef.current;
+    if (!element)
+      return;
+    let mounted = true;
+    setLoadState("loading");
+    loadGoogleMaps(normalizedApiKey).then((api) => {
+      if (!mounted)
+        return;
+      try {
+        initializeMap(api, element);
+      } catch {
+        setLoadState("error");
+      }
+    }).catch(() => {
+      if (mounted)
+        setLoadState("error");
+    });
+    return () => {
+      mounted = false;
+      zoomListenerRef.current?.remove();
+      markerRef.current?.setMap(null);
+      circleRef.current?.setMap(null);
+      if (mapRef.current) {
+        apiRef.current?.maps.event.clearInstanceListeners(mapRef.current);
+      }
+      markerRef.current = null;
+      circleRef.current = null;
+      zoomListenerRef.current = null;
+      mapRef.current = null;
+      apiRef.current = null;
+      element.replaceChildren();
+    };
+  }, [normalizedApiKey]);
+  useEffect(() => {
+    const api = apiRef.current;
+    const map = mapRef.current;
+    if (loadState !== "ready" || !api || !map)
+      return;
+    try {
+      const nextCenter = { lat: centerLat, lng: centerLng };
+      const nextZoom = clampZoom(zoom, normalizedMinZoom, normalizedMaxZoom);
+      map.setCenter(nextCenter);
+      map.setZoom(nextZoom);
+      map.setOptions(mapOptions(nextCenter, nextZoom, interactive, normalizedMinZoom, normalizedMaxZoom));
+      setCurrentZoom(nextZoom);
+      if (markerEnabled) {
+        if (markerRef.current) {
+          markerRef.current.setMap(map);
+          markerRef.current.setPosition(nextCenter);
+          markerRef.current.setIcon(markerIcon);
+        } else {
+          markerRef.current = new api.maps.Marker({
+            icon: markerIcon,
+            map,
+            position: nextCenter
+          });
+        }
+      } else {
+        markerRef.current?.setMap(null);
+        markerRef.current = null;
+      }
+      if (radiusMeters !== undefined) {
+        const style = {
+          fillColor: radiusFillColor ?? "#18181b",
+          fillOpacity: radiusFillOpacity ?? 0.12,
+          strokeColor: radiusStrokeColor ?? "#18181b",
+          strokeOpacity: radiusStrokeOpacity ?? 0.7,
+          strokeWeight: radiusStrokeWeight ?? 2
+        };
+        if (circleRef.current) {
+          circleRef.current.setMap(map);
+          circleRef.current.setCenter(nextCenter);
+          circleRef.current.setRadius(radiusMeters);
+          circleRef.current.setOptions(style);
+        } else {
+          circleRef.current = new api.maps.Circle({
+            ...style,
+            center: nextCenter,
+            clickable: false,
+            map,
+            radius: radiusMeters
+          });
+        }
+      } else {
+        circleRef.current?.setMap(null);
+        circleRef.current = null;
+      }
+    } catch {
+      setLoadState("error");
+    }
+  }, [
+    centerLat,
+    centerLng,
+    interactive,
+    loadState,
+    markerEnabled,
+    markerIcon,
+    normalizedMaxZoom,
+    normalizedMinZoom,
+    radiusFillColor,
+    radiusFillOpacity,
+    radiusMeters,
+    radiusStrokeColor,
+    radiusStrokeOpacity,
+    radiusStrokeWeight,
+    zoom
+  ]);
+  const changeZoom = (delta) => {
+    const map = mapRef.current;
+    if (!map)
+      return;
+    const nextZoom = clampZoom((map.getZoom() ?? currentZoom) + delta, normalizedMinZoom, normalizedMaxZoom);
+    map.setZoom(nextZoom);
+    setCurrentZoom(nextZoom);
+  };
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: cn("bg-muted relative min-h-64 overflow-hidden rounded-lg border", className),
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        ref: mapElementRef,
+        className: "h-full min-h-[inherit] w-full",
+        role: "region",
+        "aria-label": labels.mapLabel
+      }, undefined, false, undefined, this),
+      loadState === "ready" && zoomControls ? /* @__PURE__ */ jsxDEV("div", {
+        className: "bg-background/95 absolute right-4 bottom-4 z-10 overflow-hidden rounded-md border shadow-sm backdrop-blur",
+        children: [
+          /* @__PURE__ */ jsxDEV("button", {
+            type: "button",
+            className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground flex size-9 items-center justify-center transition-colors disabled:pointer-events-none disabled:opacity-50",
+            disabled: currentZoom >= normalizedMaxZoom,
+            onClick: () => changeZoom(1),
+            "aria-label": labels.zoomIn,
+            children: /* @__PURE__ */ jsxDEV(Plus, {
+              className: "size-4"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "bg-border h-px"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("button", {
+            type: "button",
+            className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground flex size-9 items-center justify-center transition-colors disabled:pointer-events-none disabled:opacity-50",
+            disabled: currentZoom <= normalizedMinZoom,
+            onClick: () => changeZoom(-1),
+            "aria-label": labels.zoomOut,
+            children: /* @__PURE__ */ jsxDEV(Minus, {
+              className: "size-4"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this) : null,
+      loadState === "loading" ? /* @__PURE__ */ jsxDEV("div", {
+        className: "bg-background/75 text-muted-foreground absolute inset-0 grid place-items-center text-sm font-medium backdrop-blur-sm",
+        role: "status",
+        children: labels.loading
+      }, undefined, false, undefined, this) : null,
+      loadState === "missing-key" || loadState === "error" ? /* @__PURE__ */ jsxDEV("div", {
+        className: "bg-background/85 absolute inset-0 grid place-items-center p-6 text-center backdrop-blur-sm",
+        children: /* @__PURE__ */ jsxDEV("div", {
+          className: "bg-card text-card-foreground max-w-sm rounded-lg border p-5 shadow-sm",
+          role: "alert",
+          children: [
+            /* @__PURE__ */ jsxDEV("p", {
+              className: "text-sm font-semibold",
+              children: loadState === "missing-key" ? labels.missingKeyTitle : labels.errorTitle
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("p", {
+              className: "text-muted-foreground mt-2 text-xs",
+              children: loadState === "missing-key" ? labels.missingKeyBody : labels.errorBody
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this) : null
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  GoogleMap
+};