npm - @datum-cloud/datum-ui - Versions diffs - 1.3.1 → 1.4.0 - Mend

@datum-cloud/datum-ui 1.3.1 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1025) hide show

package/dist/{map-_GaPwJUi.mjs → layers-CGp0ceSG.mjs} RENAMED Viewed

@@ -1,122 +1,15 @@
 import { t as cn } from "./utils-Bu32wN-x.mjs";
-import { t as ButtonGroup } from "./button-group-B5s-1BCV.mjs";
+import { t as ButtonGroup } from "./button-group-DFrTH4L8.mjs";
 import { t as Button } from "./button-CsdF61EI.mjs";
-import { i as CommandGroup, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "./command-B1sx-XVY.mjs";
-import { i as InputGroupInput, n as InputGroupAddon, t as InputGroup } from "./input-group-Cr_BOTbn.mjs";
+import { i as CommandGroup, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "./command-C0aGIYnQ.mjs";
+import { i as InputGroupInput, n as InputGroupAddon, t as InputGroup } from "./input-group-DieA8aBt.mjs";
 import { t as Spinner } from "./spinner-C5Xv-i2C.mjs";
 import { CheckIcon, ChevronRightIcon, CircleIcon, LayersIcon, LoaderCircleIcon, MapPinIcon, MaximizeIcon, MinimizeIcon, MinusIcon, NavigationIcon, PenLineIcon, PentagonIcon, PlusIcon, SearchIcon, SquareIcon, Trash2Icon, Undo2Icon, WaypointsIcon } from "lucide-react";
 import * as React from "react";
 import { Suspense, createContext, lazy, useContext, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { renderToString } from "react-dom/server.browser";
-//#region ../shadcn/hooks/use-theme.ts
-/**
-* Lightweight theme detection hook for shadcn components.
-* Detects dark mode via the `dark` class on <html> (Tailwind convention)
-* or falls back to prefers-color-scheme media query.
-*/
-function useTheme() {
-	const [resolvedTheme, setResolvedTheme] = React.useState("light");
-	React.useEffect(() => {
-		const detect = () => {
-			if (document.documentElement.classList.contains("dark")) return "dark";
-			if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
-			return "light";
-		};
-		setResolvedTheme(detect());
-		const observer = new MutationObserver(() => setResolvedTheme(detect()));
-		observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: ["class"]
-		});
-		const mql = window.matchMedia("(prefers-color-scheme: dark)");
-		const onChange = () => setResolvedTheme(detect());
-		mql.addEventListener("change", onChange);
-		return () => {
-			observer.disconnect();
-			mql.removeEventListener("change", onChange);
-		};
-	}, []);
-	return { resolvedTheme };
-}
-//#endregion
-//#region ../shadcn/ui/dropdown-menu.tsx
-/**
-* Vanilla shadcn/ui DropdownMenu Component
-* Pure shadcn dropdown without Datum customizations
-* For Datum-specific features (destructive MenuItem), import from @/modules/datum-ui
-*/
-const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
-	ref,
-	className: cn("focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className),
-	...props,
-	children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
-}));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
-	ref,
-	className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg", className),
-	...props
-}));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
-	ref,
-	sideOffset,
-	className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md", className),
-	...props
-}) }));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
-	ref,
-	className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className),
-	...props
-}));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
-	ref,
-	className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
-	checked,
-	...props,
-	children: [/* @__PURE__ */ jsx("span", {
-		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
-		children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" }) })
-	}), children]
-}));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, {
-	ref,
-	className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
-	...props,
-	children: [/* @__PURE__ */ jsx("span", {
-		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
-		children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "h-2 w-2 fill-current" }) })
-	}), children]
-}));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, {
-	ref,
-	className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
-	...props
-}));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
-	ref,
-	className: cn("bg-muted -mx-1 my-1 h-px", className),
-	...props
-}));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-const DropdownMenuShortcut = ({ className, ...props }) => {
-	return /* @__PURE__ */ jsx("span", {
-		className: cn("ml-auto text-xs tracking-widest opacity-60", className),
-		...props
-	});
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-//#endregion
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 //#region ../shadcn/ui/place-autocomplete.tsx
 function formatAddress(properties) {
 	const parts = [];
@@ -146,7 +39,7 @@ function buildSearchUrl({ query, bbox, lang, lat, limit, locationBiasScale, lon,
 function useDebounce(value, delay = 300) {
 	const [debouncedValue, setDebouncedValue] = React.useState(value);
 	React.useEffect(() => {
-		const timer = setTimeout(() => setDebouncedValue(value), delay);
+		const timer = setTimeout(setDebouncedValue, delay, value);
 		return () => clearTimeout(timer);
 	}, [value, delay]);
 	return debouncedValue;
@@ -157,11 +50,13 @@ function usePlaceSearch({ debounceMs, query, ...props }) {
 	const [error, setError] = React.useState(null);
 	const [hasSearched, setHasSearched] = React.useState(false);
 	const debouncedQuery = useDebounce(query, debounceMs);
+	const bboxKey = props.bbox?.join(",");
 	React.useEffect(() => {
 		if (!debouncedQuery.trim()) {
 			setResults([]);
 			setIsLoading(false);
 			setHasSearched(false);
+			setError(null);
 			return;
 		}
 		const abortController = new AbortController();
@@ -177,11 +72,11 @@ function usePlaceSearch({ debounceMs, query, ...props }) {
 				const response = await fetch(url, { signal: abortController.signal });
 				if (!response.ok) throw new Error(`Photon API error: ${response.status} ${response.statusText}`);
 				const data = await response.json();
-				const addressOsmIds = /* @__PURE__ */ new Set();
+				const seenOsmKeys = /* @__PURE__ */ new Set();
 				setResults(data.features.filter((feature) => {
-					const id = feature.properties.osm_id;
-					if (addressOsmIds.has(id)) return false;
-					addressOsmIds.add(id);
+					const key = `${feature.properties.osm_type}:${feature.properties.osm_id}`;
+					if (seenOsmKeys.has(key)) return false;
+					seenOsmKeys.add(key);
 					return true;
 				}));
 			} catch (err) {
@@ -199,7 +94,7 @@ function usePlaceSearch({ debounceMs, query, ...props }) {
 		debouncedQuery,
 		props.lang,
 		props.limit,
-		props.bbox,
+		bboxKey,
 		props.lat,
 		props.lon,
 		props.zoom,
@@ -215,6 +110,8 @@ function usePlaceSearch({ debounceMs, query, ...props }) {
 function PlaceAutocomplete({ debounceMs = 300, lang, limit = 5, bbox, lat, lon, zoom, locationBiasScale, className, value: controlledValue, defaultValue = "", onChange: controlledOnChange, onPlaceSelect, onResultsChange, ...props }) {
 	const [internalValue, setInternalValue] = React.useState(defaultValue);
 	const [searchQuery, setSearchQuery] = React.useState("");
+	const [isOpen, setIsOpen] = React.useState(false);
+	const containerRef = React.useRef(null);
 	const isControlled = controlledValue !== void 0;
 	const displayValue = isControlled ? controlledValue : internalValue;
 	const { results, isLoading, error, hasSearched } = usePlaceSearch({
@@ -231,14 +128,26 @@ function PlaceAutocomplete({ debounceMs = 300, lang, limit = 5, bbox, lat, lon,
 	React.useEffect(() => {
 		onResultsChange?.(results);
 	}, [results, onResultsChange]);
+	React.useEffect(() => {
+		if (!isOpen) return;
+		function handlePointerDown(event) {
+			if (containerRef.current && !containerRef.current.contains(event.target)) setIsOpen(false);
+		}
+		document.addEventListener("mousedown", handlePointerDown);
+		return () => document.removeEventListener("mousedown", handlePointerDown);
+	}, [isOpen]);
 	const hasNoResults = hasSearched && !isLoading && !error && results.length === 0;
-	const showCommandList = error || hasNoResults || results.length > 0;
+	const showCommandList = isOpen && (Boolean(error) || hasNoResults || results.length > 0);
 	return /* @__PURE__ */ jsx(Command, {
 		className: cn("h-fit overflow-visible", className),
 		shouldFilter: false,
 		loop: true,
 		children: /* @__PURE__ */ jsxs("div", {
+			ref: containerRef,
 			className: "relative",
+			onKeyDown: (event) => {
+				if (event.key === "Escape") setIsOpen(false);
+			},
 			children: [/* @__PURE__ */ jsxs(InputGroup, {
 				className: cn("border-input! bg-popover! ring-0!", showCommandList && "rounded-b-none"),
 				children: [
@@ -250,8 +159,10 @@ function PlaceAutocomplete({ debounceMs = 300, lang, limit = 5, bbox, lat, lon,
 							const newValue = event.target.value;
 							if (!isControlled) setInternalValue(newValue);
 							setSearchQuery(newValue);
+							setIsOpen(true);
 							controlledOnChange?.(newValue);
 						},
+						onFocus: () => setIsOpen(true),
 						...props
 					}),
 					isLoading && /* @__PURE__ */ jsx(InputGroupAddon, {
@@ -263,20 +174,21 @@ function PlaceAutocomplete({ debounceMs = 300, lang, limit = 5, bbox, lat, lon,
 				"data-state": showCommandList ? "open" : "closed",
 				className: cn("bg-popover border-input absolute top-full right-0 left-0 rounded-b-md border border-t-0 shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=open]:slide-in-from-top-2 data-[state=closed]:slide-out-to-top-2"),
 				children: [
-					error && /* @__PURE__ */ jsxs(CommandEmpty, { children: ["Error: ", error.message] }),
+					error && /* @__PURE__ */ jsxs(CommandEmpty, { children: ["Error:", error.message] }),
 					hasNoResults && /* @__PURE__ */ jsxs(CommandEmpty, { children: [
-						"Can't find ",
+						"Can't find",
 						displayValue,
 						"."
 					] }),
 					results.length > 0 && /* @__PURE__ */ jsx(CommandGroup, { children: results.map((feature) => {
 						const formattedAddress = formatAddress(feature.properties);
 						return /* @__PURE__ */ jsxs(CommandItem, {
-							value: String(feature.properties.osm_id),
+							value: `${feature.properties.osm_type}:${feature.properties.osm_id}`,
 							onSelect: () => {
 								const formattedAddress = formatAddress(feature.properties);
 								if (!isControlled) setInternalValue(formattedAddress);
 								setSearchQuery("");
+								setIsOpen(false);
 								controlledOnChange?.(formattedAddress);
 								onPlaceSelect?.(feature);
 							},
@@ -290,7 +202,7 @@ function PlaceAutocomplete({ debounceMs = 300, lang, limit = 5, bbox, lat, lon,
 									children: formattedAddress
 								})]
 							})]
-						}, feature.properties.osm_id);
+						}, `${feature.properties.osm_type}:${feature.properties.osm_id}`);
 					}) })
 				]
 			})]
@@ -298,13 +210,73 @@ function PlaceAutocomplete({ debounceMs = 300, lang, limit = 5, bbox, lat, lon,
 	});
 }
 //#endregion
-//#region ../shadcn/ui/map.tsx
-let _useMap;
-let _useMapEvents;
-if (typeof window !== "undefined") import("./map-leaflet-imports-S3kx8Q-S.mjs").then((mod) => {
-	_useMap = mod.useMap;
-	_useMapEvents = mod.useMapEvents;
-});
+//#region ../shadcn/ui/map/hooks.tsx
+function useMapDrawHandleIcon() {
+	const { L } = useLeaflet();
+	if (!L) return null;
+	return L.divIcon({
+		iconAnchor: [8, 8],
+		html: renderToString(/* @__PURE__ */ jsx(CircleIcon, { className: "fill-primary stroke-primary size-4 transition-transform hover:scale-110" }))
+	});
+}
+function useLeaflet() {
+	const [L, setL] = useState(null);
+	const [LeafletDraw, setLeafletDraw] = useState(null);
+	useEffect(() => {
+		async function loadLeaflet() {
+			const leaflet = await import("leaflet");
+			const leafletFullscreen = await import("leaflet.fullscreen");
+			const leafletDraw = await import("leaflet-draw");
+			const L_object = leaflet.default;
+			if (L_object.Control && !L_object.Control.FullScreen) L_object.Control.FullScreen = leafletFullscreen.default || leafletFullscreen;
+			setLeafletDraw(leafletDraw);
+			setL(L_object);
+		}
+		if (L && LeafletDraw) return;
+		if (typeof window === "undefined") return;
+		loadLeaflet();
+	}, [L, LeafletDraw]);
+	return {
+		L,
+		LeafletDraw
+	};
+}
+function useDebounceLoadingState(delay = 200) {
+	const [isLoading, setIsLoading] = useState(false);
+	const [showLoading, setShowLoading] = useState(false);
+	const timeoutRef = useRef(null);
+	useEffect(() => {
+		if (isLoading) timeoutRef.current = setTimeout(() => {
+			setShowLoading(true);
+		}, delay);
+		else {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+				timeoutRef.current = null;
+			}
+			setShowLoading(false);
+		}
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, [isLoading, delay]);
+	return [showLoading, setIsLoading];
+}
+//#endregion
+//#region ../shadcn/ui/map/shared.ts
+const holder = {};
+function setLeafletHooks(map, mapEvents) {
+	holder.map = map;
+	holder.mapEvents = mapEvents;
+}
+function _useMap() {
+	return holder.map();
+}
+function _useMapEvents(handlers) {
+	return holder.mapEvents(handlers);
+}
+//#endregion
+//#region ../shadcn/ui/map/lazy.tsx
 function createLazyComponent(factory) {
 	const LazyComponent = lazy(factory);
 	return (props) => {
@@ -316,7 +288,11 @@ function createLazyComponent(factory) {
 		return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(LazyComponent, { ...props }) });
 	};
 }
-const LeafletMapContainer = createLazyComponent(() => import("react-leaflet").then((mod) => ({ default: mod.MapContainer })));
+const LeafletMapContainer = createLazyComponent(async () => {
+	const [reactLeaflet] = await Promise.all([import("react-leaflet"), import("./map-leaflet-imports-S3kx8Q-S.mjs")]);
+	setLeafletHooks(reactLeaflet.useMap, reactLeaflet.useMapEvents);
+	return { default: reactLeaflet.MapContainer };
+});
 const LeafletTileLayer = createLazyComponent(() => import("react-leaflet").then((mod) => ({ default: mod.TileLayer })));
 const LeafletMarker = createLazyComponent(() => import("react-leaflet").then((mod) => ({ default: mod.Marker })));
 const LeafletPopup = createLazyComponent(() => import("react-leaflet").then((mod) => ({ default: mod.Popup })));
@@ -339,188 +315,41 @@ function Map({ zoom = 15, maxZoom = 18, className, ...props }) {
 		...props
 	});
 }
-const MapLayersContext = createContext(null);
-function useMapLayersContext() {
-	return useContext(MapLayersContext);
-}
-function MapTileLayer({ name = "Default", url, attribution, darkUrl, darkAttribution, ...props }) {
-	const map = _useMap();
-	if (map.attributionControl) map.attributionControl.setPrefix("");
-	const context = useContext(MapLayersContext);
-	const DEFAULT_URL = "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png";
-	const DEFAULT_DARK_URL = "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png";
-	const { resolvedTheme } = useTheme();
-	const resolvedUrl = resolvedTheme === "dark" ? darkUrl ?? url ?? DEFAULT_DARK_URL : url ?? DEFAULT_URL;
-	const resolvedAttribution = resolvedTheme === "dark" && darkAttribution ? darkAttribution : attribution ?? "&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>, &copy; <a href=\"https://carto.com/attributions\">CARTO</a>";
-	useEffect(() => {
-		if (context) context.registerTileLayer({
-			name,
-			url: resolvedUrl,
-			attribution: resolvedAttribution
-		});
-	}, [
-		context,
-		name,
-		url,
-		attribution
-	]);
-	if (context && context.selectedTileLayer !== name) return null;
-	return /* @__PURE__ */ jsx(LeafletTileLayer, {
-		url: resolvedUrl,
-		attribution: resolvedAttribution,
+//#endregion
+//#region ../shadcn/ui/map/primitives.tsx
+function MapMarker({ icon = /* @__PURE__ */ jsx(MapPinIcon, { className: "size-6" }), iconAnchor = [12, 12], bgPos, popupAnchor, tooltipAnchor, ...props }) {
+	const { L } = useLeaflet();
+	if (!L) return null;
+	return /* @__PURE__ */ jsx(LeafletMarker, {
+		icon: L.divIcon({
+			html: renderToString(icon),
+			iconAnchor,
+			...bgPos ? { bgPos } : {},
+			...popupAnchor ? { popupAnchor } : {},
+			...tooltipAnchor ? { tooltipAnchor } : {}
+		}),
+		riseOnHover: true,
 		...props
 	});
 }
-function MapLayerGroup({ name, disabled, ...props }) {
-	const context = useMapLayersContext();
-	useEffect(() => {
-		if (context) context.registerLayerGroup({
-			name,
-			disabled
-		});
-	}, [
-		context,
-		name,
-		disabled
-	]);
-	if (context && !context.activeLayerGroups.includes(name)) return null;
-	return /* @__PURE__ */ jsx(LeafletLayerGroup, { ...props });
+function MapMarkerClusterGroup({ polygonOptions = { className: "fill-foreground stroke-foreground stroke-2" }, spiderLegPolylineOptions = { className: "fill-foreground stroke-foreground stroke-2" }, icon, ...props }) {
+	const { L } = useLeaflet();
+	if (!L) return null;
+	return /* @__PURE__ */ jsx(LeafletMarkerClusterGroup, {
+		polygonOptions,
+		spiderLegPolylineOptions,
+		iconCreateFunction: icon ? (cluster) => {
+			const iconNode = icon(cluster.getChildCount());
+			return L.divIcon({ html: renderToString(iconNode) });
+		} : void 0,
+		...props
+	});
 }
-function MapFeatureGroup({ name, disabled, ...props }) {
-	const context = useMapLayersContext();
-	useEffect(() => {
-		if (context) context.registerLayerGroup({
-			name,
-			disabled
-		});
-	}, [
-		context,
-		name,
-		disabled
-	]);
-	if (context && !context.activeLayerGroups.includes(name)) return null;
-	return /* @__PURE__ */ jsx(LeafletFeatureGroup, { ...props });
-}
-function MapLayers({ defaultTileLayer, defaultLayerGroups = [], ...props }) {
-	const [tileLayers, setTileLayers] = useState([]);
-	const [selectedTileLayer, setSelectedTileLayer] = useState(defaultTileLayer || "");
-	const [layerGroups, setLayerGroups] = useState([]);
-	const [activeLayerGroups, setActiveLayerGroups] = useState(defaultLayerGroups);
-	function registerTileLayer(tileLayer) {
-		setTileLayers((prevTileLayers) => {
-			if (prevTileLayers.some((layer) => layer.name === tileLayer.name)) return prevTileLayers;
-			return [...prevTileLayers, tileLayer];
-		});
-	}
-	function registerLayerGroup(layerGroup) {
-		setLayerGroups((prevLayerGroups) => {
-			if (prevLayerGroups.some((group) => group.name === layerGroup.name)) return prevLayerGroups;
-			return [...prevLayerGroups, layerGroup];
-		});
-	}
-	useEffect(() => {
-		if (defaultTileLayer && tileLayers.length > 0 && !tileLayers.some((tileLayer) => tileLayer.name === defaultTileLayer)) throw new Error(`Invalid defaultTileLayer "${defaultTileLayer}" provided to MapLayers. It must match a MapTileLayer's name prop.`);
-		if (tileLayers.length > 0 && !selectedTileLayer) setSelectedTileLayer(defaultTileLayer && tileLayers.some((layer) => layer.name === defaultTileLayer) ? defaultTileLayer : tileLayers[0].name);
-		if (defaultLayerGroups.length > 0 && layerGroups.length > 0 && defaultLayerGroups.some((name) => !layerGroups.some((group) => group.name === name))) throw new Error(`Invalid defaultLayerGroups value provided to MapLayers. All names must match a MapLayerGroup's name prop.`);
-	}, [
-		tileLayers,
-		defaultTileLayer,
-		selectedTileLayer,
-		layerGroups,
-		defaultLayerGroups
-	]);
-	return /* @__PURE__ */ jsx(MapLayersContext.Provider, {
-		value: {
-			registerTileLayer,
-			tileLayers,
-			selectedTileLayer,
-			setSelectedTileLayer,
-			registerLayerGroup,
-			layerGroups,
-			activeLayerGroups,
-			setActiveLayerGroups
-		},
-		...props
-	});
-}
-function MapLayersControl({ tileLayersLabel = "Map Type", layerGroupsLabel = "Layers", position = "top-1 right-1", className, ...props }) {
-	const layersContext = useMapLayersContext();
-	if (!layersContext) throw new Error("MapLayersControl must be used within MapLayers");
-	const { tileLayers, selectedTileLayer, setSelectedTileLayer, layerGroups, activeLayerGroups, setActiveLayerGroups } = layersContext;
-	if (tileLayers.length === 0 && layerGroups.length === 0) return null;
-	function handleLayerGroupToggle(name, checked) {
-		setActiveLayerGroups(checked ? [...activeLayerGroups, name] : activeLayerGroups.filter((groupName) => groupName !== name));
-	}
-	const showTileLayersDropdown = tileLayers.length > 1;
-	const showLayerGroupsDropdown = layerGroups.length > 0;
-	if (!showTileLayersDropdown && !showLayerGroupsDropdown) return null;
-	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
-		asChild: true,
-		children: /* @__PURE__ */ jsx(Button, {
-			type: "button",
-			variant: "secondary",
-			size: "sm",
-			"aria-label": "Select layers",
-			title: "Select layers",
-			className: cn("absolute z-1000 border", position, className),
-			...props,
-			children: /* @__PURE__ */ jsx(LayersIcon, {})
-		})
-	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
-		align: "end",
-		className: "z-1000",
-		children: [
-			showTileLayersDropdown && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: tileLayersLabel }), /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
-				value: selectedTileLayer,
-				onValueChange: setSelectedTileLayer,
-				children: tileLayers.map((tileLayer) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
-					value: tileLayer.name,
-					children: tileLayer.name
-				}, tileLayer.name))
-			})] }),
-			showTileLayersDropdown && showLayerGroupsDropdown && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-			showLayerGroupsDropdown && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: layerGroupsLabel }), layerGroups.map((layerGroup) => /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
-				checked: activeLayerGroups.includes(layerGroup.name),
-				disabled: layerGroup.disabled,
-				onCheckedChange: (checked) => handleLayerGroupToggle(layerGroup.name, checked),
-				children: layerGroup.name
-			}, layerGroup.name))] })
-		]
-	})] });
-}
-function MapMarker({ icon = /* @__PURE__ */ jsx(MapPinIcon, { className: "size-6" }), iconAnchor = [12, 12], bgPos, popupAnchor, tooltipAnchor, ...props }) {
-	const { L } = useLeaflet();
-	if (!L) return null;
-	return /* @__PURE__ */ jsx(LeafletMarker, {
-		icon: L.divIcon({
-			html: renderToString(icon),
-			iconAnchor,
-			...bgPos ? { bgPos } : {},
-			...popupAnchor ? { popupAnchor } : {},
-			...tooltipAnchor ? { tooltipAnchor } : {}
-		}),
-		riseOnHover: true,
-		...props
-	});
-}
-function MapMarkerClusterGroup({ polygonOptions = { className: "fill-foreground stroke-foreground stroke-2" }, spiderLegPolylineOptions = { className: "fill-foreground stroke-foreground stroke-2" }, icon, ...props }) {
-	const { L } = useLeaflet();
-	if (!L) return null;
-	return /* @__PURE__ */ jsx(LeafletMarkerClusterGroup, {
-		polygonOptions,
-		spiderLegPolylineOptions,
-		iconCreateFunction: icon ? (cluster) => {
-			const iconNode = icon(cluster.getChildCount());
-			return L.divIcon({ html: renderToString(iconNode) });
-		} : void 0,
-		...props
-	});
-}
-function MapCircle({ className, ...props }) {
-	return /* @__PURE__ */ jsx(LeafletCircle, {
-		className: cn("fill-foreground stroke-foreground stroke-2", className),
-		...props
-	});
+function MapCircle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(LeafletCircle, {
+		className: cn("fill-foreground stroke-foreground stroke-2", className),
+		...props
+	});
 }
 function MapCircleMarker({ className, ...props }) {
 	return /* @__PURE__ */ jsx(LeafletCircleMarker, {
@@ -575,6 +404,24 @@ function MapTooltip({ className, children, side = "top", sideOffset = 15, ...pro
 		children: [children, /* @__PURE__ */ jsx("div", { className: cn("bg-foreground fill-foreground absolute z-50 size-2.5 rotate-45 rounded-[2px]", ARROW_POSITION_CLASSES[side]) })]
 	});
 }
+//#endregion
+//#region ../shadcn/ui/map/controls.tsx
+function MapControlContainer({ className, ...props }) {
+	const { L } = useLeaflet();
+	const containerRef = useRef(null);
+	useEffect(() => {
+		if (!L) return;
+		const element = containerRef.current;
+		if (!element) return;
+		L.DomEvent.disableClickPropagation(element);
+		L.DomEvent.disableScrollPropagation(element);
+	}, [L]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: cn("absolute z-1000 size-fit cursor-default", className),
+		...props
+	});
+}
 function MapZoomControl({ position = "top-1 left-1", className, ...props }) {
 	const map = _useMap();
 	const [zoomLevel, setZoomLevel] = useState(map.getZoom());
@@ -637,6 +484,7 @@ function MapFullscreenControl({ position = "top-1 right-1", className, ...props
 			type: "button",
 			size: "icon",
 			variant: "outline",
+			disabled: !L,
 			onClick: () => map.toggleFullscreen(),
 			"aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
 			title: isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
@@ -656,28 +504,42 @@ function MapLocateControl({ watch = false, onLocationFound, onLocationError, pos
 	const map = _useMap();
 	const [isLocating, setIsLocating] = useDebounceLoadingState(200);
 	const [location, setLocation] = useState(null);
+	const locationHandlersRef = useRef(null);
+	function detachLocationHandlers() {
+		if (locationHandlersRef.current) {
+			map.off("locationfound", locationHandlersRef.current.found);
+			map.off("locationerror", locationHandlersRef.current.error);
+			locationHandlersRef.current = null;
+		}
+	}
 	function startLocating() {
+		detachLocationHandlers();
 		setIsLocating(true);
+		const found = (event) => {
+			setLocation(event.latlng);
+			setIsLocating(false);
+			onLocationFound?.(event);
+		};
+		const error = (event) => {
+			setLocation(null);
+			setIsLocating(false);
+			onLocationError?.(event);
+		};
+		locationHandlersRef.current = {
+			found,
+			error
+		};
+		map.on("locationfound", found);
+		map.on("locationerror", error);
 		map.locate({
 			setView: true,
 			maxZoom: map.getMaxZoom(),
 			watch
 		});
-		map.on("locationfound", (location) => {
-			setLocation(location.latlng);
-			setIsLocating(false);
-			onLocationFound?.(location);
-		});
-		map.on("locationerror", (error) => {
-			setLocation(null);
-			setIsLocating(false);
-			onLocationError?.(error);
-		});
 	}
 	function stopLocating() {
 		map.stopLocate();
-		map.off("locationfound");
-		map.off("locationerror");
+		detachLocationHandlers();
 		setLocation(null);
 		setIsLocating(false);
 	}
@@ -707,6 +569,8 @@ function MapSearchControl({ position = "top-1 left-1", className, ...props }) {
 		children: /* @__PURE__ */ jsx(PlaceAutocomplete, { ...props })
 	});
 }
+//#endregion
+//#region ../shadcn/ui/map/draw.tsx
 const MapDrawContext = createContext(null);
 function useMapDrawContext() {
 	return useContext(MapDrawContext);
@@ -778,13 +642,15 @@ function MapDrawShapeButton({ drawMode, createDrawTool, className, ...props }) {
 	const controlRef = useRef(null);
 	const { activeMode, setActiveMode } = drawContext;
 	const isActive = activeMode === drawMode;
+	const createDrawToolRef = useRef(createDrawTool);
+	createDrawToolRef.current = createDrawTool;
 	useEffect(() => {
 		if (!L || !isActive) {
 			controlRef.current?.disable();
 			controlRef.current = null;
 			return;
 		}
-		const control = createDrawTool(L, map);
+		const control = createDrawToolRef.current(L, map);
 		control.enable();
 		controlRef.current = control;
 		return () => {
@@ -794,8 +660,7 @@ function MapDrawShapeButton({ drawMode, createDrawTool, className, ...props }) {
 	}, [
 		L,
 		map,
-		isActive,
-		createDrawTool
+		isActive
 	]);
 	function handleClick() {
 		setActiveMode(isActive ? null : drawMode);
@@ -905,13 +770,15 @@ function MapDrawActionButton({ drawAction, createDrawTool, controlRef, className
 	const { featureGroup, activeMode, setActiveMode, layersCount } = drawContext;
 	const isActive = activeMode === drawAction;
 	const hasFeatures = layersCount > 0;
+	const createDrawToolRef = useRef(createDrawTool);
+	createDrawToolRef.current = createDrawTool;
 	useEffect(() => {
 		if (!L || !featureGroup || !isActive) {
 			controlRef.current?.disable?.();
 			controlRef.current = null;
 			return;
 		}
-		const control = createDrawTool(L, map, featureGroup);
+		const control = createDrawToolRef.current(L, map, featureGroup);
 		control.enable?.();
 		controlRef.current = control;
 		return () => {
@@ -922,8 +789,7 @@ function MapDrawActionButton({ drawAction, createDrawTool, controlRef, className
 		L,
 		map,
 		isActive,
-		featureGroup,
-		createDrawTool
+		featureGroup
 	]);
 	function handleClick() {
 		controlRef.current?.save();
@@ -1015,72 +881,259 @@ function MapDrawUndo({ className, ...props }) {
 		children: /* @__PURE__ */ jsx(Undo2Icon, {})
 	});
 }
-function MapControlContainer({ className, ...props }) {
-	const { L } = useLeaflet();
-	const containerRef = useRef(null);
-	useEffect(() => {
-		if (!L) return;
-		const element = containerRef.current;
-		if (!element) return;
-		L.DomEvent.disableClickPropagation(element);
-		L.DomEvent.disableScrollPropagation(element);
-	}, [L]);
-	return /* @__PURE__ */ jsx("div", {
-		ref: containerRef,
-		className: cn("absolute z-1000 size-fit cursor-default", className),
+//#endregion
+//#region ../shadcn/hooks/use-theme.ts
+/**
+* Lightweight theme detection hook for shadcn components.
+* Detects dark mode via the `dark` class on <html> (Tailwind convention)
+* or falls back to prefers-color-scheme media query.
+*/
+function useTheme() {
+	const [resolvedTheme, setResolvedTheme] = React.useState("light");
+	React.useEffect(() => {
+		const detect = () => {
+			if (document.documentElement.classList.contains("dark")) return "dark";
+			if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
+			return "light";
+		};
+		setResolvedTheme(detect());
+		const observer = new MutationObserver(() => setResolvedTheme(detect()));
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["class"]
+		});
+		const mql = window.matchMedia("(prefers-color-scheme: dark)");
+		const onChange = () => setResolvedTheme(detect());
+		mql.addEventListener("change", onChange);
+		return () => {
+			observer.disconnect();
+			mql.removeEventListener("change", onChange);
+		};
+	}, []);
+	return { resolvedTheme };
+}
+//#endregion
+//#region ../shadcn/ui/dropdown-menu.tsx
+/**
+* Vanilla shadcn/ui DropdownMenu Component
+* Pure shadcn dropdown without Datum customizations
+* For Datum-specific features (destructive MenuItem), import from @/modules/datum-ui
+*/
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
+	ref,
+	className: cn("focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className),
+	...props,
+	children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
+}));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
+	ref,
+	className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg", className),
+	...props
+}));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
+	ref,
+	sideOffset,
+	className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md", className),
+	...props
+}) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
+	ref,
+	className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className),
+	...props
+}));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
+	ref,
+	className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+	checked,
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+		children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" }) })
+	}), children]
+}));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, {
+	ref,
+	className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+		children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "h-2 w-2 fill-current" }) })
+	}), children]
+}));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, {
+	ref,
+	className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
+	...props
+}));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
+	ref,
+	className: cn("bg-muted -mx-1 my-1 h-px", className),
+	...props
+}));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+function DropdownMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("ml-auto text-xs tracking-widest opacity-60", className),
 		...props
 	});
 }
-function useMapDrawHandleIcon() {
-	const { L } = useLeaflet();
-	if (!L) return null;
-	return L.divIcon({
-		iconAnchor: [8, 8],
-		html: renderToString(/* @__PURE__ */ jsx(CircleIcon, { className: "fill-primary stroke-primary size-4 transition-transform hover:scale-110" }))
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+//#endregion
+//#region ../shadcn/ui/map/layers.tsx
+const MapLayersContext = createContext(null);
+function useMapLayersContext() {
+	return useContext(MapLayersContext);
+}
+function MapTileLayer({ name = "Default", url, attribution, darkUrl, darkAttribution, ...props }) {
+	const map = _useMap();
+	if (map.attributionControl) map.attributionControl.setPrefix("");
+	const context = useContext(MapLayersContext);
+	const DEFAULT_URL = "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png";
+	const DEFAULT_DARK_URL = "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png";
+	const { resolvedTheme } = useTheme();
+	const resolvedUrl = resolvedTheme === "dark" ? darkUrl ?? url ?? DEFAULT_DARK_URL : url ?? DEFAULT_URL;
+	const resolvedAttribution = resolvedTheme === "dark" && darkAttribution ? darkAttribution : attribution ?? "&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>, &copy; <a href=\"https://carto.com/attributions\">CARTO</a>";
+	useEffect(() => {
+		if (context) context.registerTileLayer({
+			name,
+			url: resolvedUrl,
+			attribution: resolvedAttribution
+		});
+	}, [
+		context,
+		name,
+		resolvedUrl,
+		resolvedAttribution
+	]);
+	if (context && context.selectedTileLayer !== name) return null;
+	return /* @__PURE__ */ jsx(LeafletTileLayer, {
+		url: resolvedUrl,
+		attribution: resolvedAttribution,
+		...props
 	});
 }
-function useLeaflet() {
-	const [L, setL] = useState(null);
-	const [LeafletDraw, setLeafletDraw] = useState(null);
+function MapLayerGroup({ name, disabled, ...props }) {
+	const context = useMapLayersContext();
 	useEffect(() => {
-		async function loadLeaflet() {
-			const leaflet = await import("leaflet");
-			const leafletFullscreen = await import("leaflet.fullscreen");
-			const leafletDraw = await import("leaflet-draw");
-			const L_object = leaflet.default;
-			if (L_object.Control && !L_object.Control.FullScreen) L_object.Control.FullScreen = leafletFullscreen.default || leafletFullscreen;
-			setLeafletDraw(leafletDraw);
-			setL(L_object);
-		}
-		if (L && LeafletDraw) return;
-		if (typeof window === "undefined") return;
-		loadLeaflet();
-	}, [L, LeafletDraw]);
-	return {
-		L,
-		LeafletDraw
-	};
+		if (context) context.registerLayerGroup({
+			name,
+			disabled
+		});
+	}, [
+		context,
+		name,
+		disabled
+	]);
+	if (context && !context.activeLayerGroups.includes(name)) return null;
+	return /* @__PURE__ */ jsx(LeafletLayerGroup, { ...props });
 }
-function useDebounceLoadingState(delay = 200) {
-	const [isLoading, setIsLoading] = useState(false);
-	const [showLoading, setShowLoading] = useState(false);
-	const timeoutRef = useRef(null);
+function MapFeatureGroup({ name, disabled, ...props }) {
+	const context = useMapLayersContext();
 	useEffect(() => {
-		if (isLoading) timeoutRef.current = setTimeout(() => {
-			setShowLoading(true);
-		}, delay);
-		else {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current);
-				timeoutRef.current = null;
-			}
-			setShowLoading(false);
-		}
-		return () => {
-			if (timeoutRef.current) clearTimeout(timeoutRef.current);
-		};
-	}, [isLoading, delay]);
-	return [showLoading, setIsLoading];
+		if (context) context.registerLayerGroup({
+			name,
+			disabled
+		});
+	}, [
+		context,
+		name,
+		disabled
+	]);
+	if (context && !context.activeLayerGroups.includes(name)) return null;
+	return /* @__PURE__ */ jsx(LeafletFeatureGroup, { ...props });
+}
+function MapLayers({ defaultTileLayer, defaultLayerGroups = [], ...props }) {
+	const [tileLayers, setTileLayers] = useState([]);
+	const [selectedTileLayer, setSelectedTileLayer] = useState(defaultTileLayer || "");
+	const [layerGroups, setLayerGroups] = useState([]);
+	const [activeLayerGroups, setActiveLayerGroups] = useState(defaultLayerGroups);
+	function registerTileLayer(tileLayer) {
+		setTileLayers((prevTileLayers) => {
+			if (prevTileLayers.some((layer) => layer.name === tileLayer.name)) return prevTileLayers;
+			return [...prevTileLayers, tileLayer];
+		});
+	}
+	function registerLayerGroup(layerGroup) {
+		setLayerGroups((prevLayerGroups) => {
+			if (prevLayerGroups.some((group) => group.name === layerGroup.name)) return prevLayerGroups;
+			return [...prevLayerGroups, layerGroup];
+		});
+	}
+	useEffect(() => {
+		if (tileLayers.length > 0 && !selectedTileLayer) setSelectedTileLayer(defaultTileLayer && tileLayers.some((layer) => layer.name === defaultTileLayer) ? defaultTileLayer : tileLayers[0].name);
+	}, [
+		tileLayers,
+		defaultTileLayer,
+		selectedTileLayer
+	]);
+	return /* @__PURE__ */ jsx(MapLayersContext.Provider, {
+		value: {
+			registerTileLayer,
+			tileLayers,
+			selectedTileLayer,
+			setSelectedTileLayer,
+			registerLayerGroup,
+			layerGroups,
+			activeLayerGroups,
+			setActiveLayerGroups
+		},
+		...props
+	});
+}
+function MapLayersControl({ tileLayersLabel = "Map Type", layerGroupsLabel = "Layers", position = "top-1 right-1", className, ...props }) {
+	const layersContext = useMapLayersContext();
+	if (!layersContext) throw new Error("MapLayersControl must be used within MapLayers");
+	const { tileLayers, selectedTileLayer, setSelectedTileLayer, layerGroups, activeLayerGroups, setActiveLayerGroups } = layersContext;
+	if (tileLayers.length === 0 && layerGroups.length === 0) return null;
+	function handleLayerGroupToggle(name, checked) {
+		setActiveLayerGroups(checked ? [...activeLayerGroups, name] : activeLayerGroups.filter((groupName) => groupName !== name));
+	}
+	const showTileLayersDropdown = tileLayers.length > 1;
+	const showLayerGroupsDropdown = layerGroups.length > 0;
+	if (!showTileLayersDropdown && !showLayerGroupsDropdown) return null;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "secondary",
+			size: "sm",
+			"aria-label": "Select layers",
+			title: "Select layers",
+			className: cn("absolute z-1000 border", position, className),
+			...props,
+			children: /* @__PURE__ */ jsx(LayersIcon, {})
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "end",
+		className: "z-1000",
+		children: [
+			showTileLayersDropdown && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: tileLayersLabel }), /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+				value: selectedTileLayer,
+				onValueChange: setSelectedTileLayer,
+				children: tileLayers.map((tileLayer) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+					value: tileLayer.name,
+					children: tileLayer.name
+				}, tileLayer.name))
+			})] }),
+			showTileLayersDropdown && showLayerGroupsDropdown && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			showLayerGroupsDropdown && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: layerGroupsLabel }), layerGroups.map((layerGroup) => /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
+				checked: activeLayerGroups.includes(layerGroup.name),
+				disabled: layerGroup.disabled,
+				onCheckedChange: (checked) => handleLayerGroupToggle(layerGroup.name, checked),
+				children: layerGroup.name
+			}, layerGroup.name))] })
+		]
+	})] });
 }
 //#endregion
-export { useLeaflet as A, MapPolyline as C, MapTileLayer as D, MapSearchControl as E, MapTooltip as O, MapPolygon as S, MapRectangle as T, MapLayers as _, MapDrawCircle as a, MapMarker as b, MapDrawEdit as c, MapDrawPolyline as d, MapDrawRectangle as f, MapLayerGroup as g, MapFullscreenControl as h, MapControlContainer as i, PlaceAutocomplete as j, MapZoomControl as k, MapDrawMarker as l, MapFeatureGroup as m, MapCircle as n, MapDrawControl as o, MapDrawUndo as p, MapCircleMarker as r, MapDrawDelete as s, Map as t, MapDrawPolygon as u, MapLayersControl as v, MapPopup as w, MapMarkerClusterGroup as x, MapLocateControl as y };
+export { useLeaflet as A, MapMarkerClusterGroup as C, MapRectangle as D, MapPopup as E, MapTooltip as O, MapMarker as S, MapPolyline as T, MapLocateControl as _, MapTileLayer as a, MapCircle as b, MapDrawDelete as c, MapDrawPolygon as d, MapDrawPolyline as f, MapFullscreenControl as g, MapControlContainer as h, MapLayersControl as i, PlaceAutocomplete as j, Map as k, MapDrawEdit as l, MapDrawUndo as m, MapLayerGroup as n, MapDrawCircle as o, MapDrawRectangle as p, MapLayers as r, MapDrawControl as s, MapFeatureGroup as t, MapDrawMarker as u, MapSearchControl as v, MapPolygon as w, MapCircleMarker as x, MapZoomControl as y };