@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/map-controls.mjs

@@ -0,0 +1,322 @@
+import { Button } from "./button.mjs";
+import { ScrollArea } from "./scroll-area.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "./dropdown-menu.mjs";
+import { Label } from "./label.mjs";
+import { Input } from "./input.mjs";
+import { Switch } from "./switch.mjs";
+import { MAPBOX_TOKEN } from "./mapbox-token.mjs";
+import { Layers, Loader2, LocateFixed, MapPin, Search, Settings2, X } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import mapboxgl from "mapbox-gl";
+//#region src/map-controls.tsx
+const mapStyles = [
+	{
+		value: "mapbox://styles/mapbox/light-v11",
+		label: "Light"
+	},
+	{
+		value: "mapbox://styles/mapbox/dark-v11",
+		label: "Dark"
+	},
+	{
+		value: "mapbox://styles/mapbox/streets-v12",
+		label: "Streets"
+	},
+	{
+		value: "mapbox://styles/mapbox/outdoors-v12",
+		label: "Outdoors"
+	},
+	{
+		value: "mapbox://styles/mapbox/satellite-v9",
+		label: "Satellite"
+	},
+	{
+		value: "mapbox://styles/mapbox/satellite-streets-v12",
+		label: "Satellite Streets"
+	},
+	{
+		value: "mapbox://styles/mapbox/navigation-day-v1",
+		label: "Navigation Day"
+	},
+	{
+		value: "mapbox://styles/mapbox/navigation-night-v1",
+		label: "Navigation Night"
+	},
+	{
+		value: "mapbox://styles/mapbox/standard",
+		label: "Standard"
+	},
+	{
+		value: "mapbox://styles/mapbox/standard-satellite",
+		label: "Standard Satellite"
+	}
+];
+/** Map controls overlay with style selector, location search, and settings panel. */
+function MapControls({ mapRef, mapStyle, onMapStyleChange, additionalControls, additionalSettings }) {
+	const markerRef = useRef(null);
+	const searchInputRef = useRef(null);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [searchResults, setSearchResults] = useState([]);
+	const [isSearching, setIsSearching] = useState(false);
+	const [showResults, setShowResults] = useState(false);
+	const [isSearchFocused, setIsSearchFocused] = useState(false);
+	const [isLocating, setIsLocating] = useState(false);
+	const [showMapType, setShowMapType] = useState(true);
+	const [showMyLocation, setShowMyLocation] = useState(true);
+	const [showSearch, setShowSearch] = useState(true);
+	const searchLocations = useCallback(async (query) => {
+		if (!query.trim()) {
+			setSearchResults([]);
+			return;
+		}
+		setIsSearching(true);
+		try {
+			const data = await (await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(query)}.json?access_token=${MAPBOX_TOKEN}&limit=5&types=place,locality,address,poi`)).json();
+			setSearchResults(data.features?.map((feature) => ({
+				id: feature.id,
+				place_name: feature.place_name,
+				center: feature.center
+			})) || []);
+		} catch (error) {
+			console.error("Search wwc:error:", error);
+			setSearchResults([]);
+		} finally {
+			setIsSearching(false);
+		}
+	}, []);
+	useEffect(() => {
+		if (!isSearchFocused) return;
+		const debounceTimer = setTimeout(() => {
+			searchLocations(searchQuery);
+		}, 300);
+		return () => clearTimeout(debounceTimer);
+	}, [
+		searchQuery,
+		searchLocations,
+		isSearchFocused
+	]);
+	const selectLocation = (result) => {
+		setSearchQuery(result.place_name);
+		setShowResults(false);
+		setSearchResults([]);
+		setIsSearchFocused(false);
+		searchInputRef.current?.blur();
+		if (mapRef.current) {
+			markerRef.current?.remove();
+			markerRef.current = new mapboxgl.Marker({ color: "#f97316" }).setLngLat(result.center).addTo(mapRef.current);
+			mapRef.current.flyTo({
+				center: result.center,
+				zoom: 12,
+				duration: 1500
+			});
+		}
+	};
+	const clearSearch = () => {
+		setSearchQuery("");
+		setSearchResults([]);
+		setShowResults(false);
+		setIsSearchFocused(false);
+		markerRef.current?.remove();
+		markerRef.current = null;
+	};
+	const handleSearchFocus = () => {
+		setIsSearchFocused(true);
+		if (searchResults.length > 0) setShowResults(true);
+	};
+	const handleSearchBlur = () => {
+		setTimeout(() => {
+			setShowResults(false);
+		}, 200);
+	};
+	const locateUser = () => {
+		if (!navigator.geolocation) return;
+		setIsLocating(true);
+		navigator.geolocation.getCurrentPosition((position) => {
+			const { latitude, longitude } = position.coords;
+			setIsLocating(false);
+			if (mapRef.current) {
+				markerRef.current?.remove();
+				const el = document.createElement("div");
+				el.innerHTML = `
+            <div style="
+              width: 16px;
+              height: 16px;
+              background: #3b82f6;
+              border: 2px solid white;
+              border-radius: 50%;
+              box-shadow: 0 0 0 rgba(59, 130, 246, 0.4);
+              animation: pulse 2s infinite;
+            "></div>
+            <style>
+              @keyframes pulse {
+                0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
+                70% { box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); }
+                100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
+              }
+            </style>
+          `;
+				markerRef.current = new mapboxgl.Marker(el).setLngLat([longitude, latitude]).addTo(mapRef.current);
+				mapRef.current.flyTo({
+					center: [longitude, latitude],
+					zoom: 14,
+					duration: 1500
+				});
+				setSearchQuery("");
+			}
+		}, () => {
+			setIsLocating(false);
+		}, {
+			enableHighAccuracy: true,
+			timeout: 1e4
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:absolute wwc:top-3 wwc:left-3 wwc:flex wwc:gap-1 wwc:z-10",
+		children: [
+			/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					icon: true,
+					className: "wwc:bg-card",
+					children: /* @__PURE__ */ jsx(Settings2, { className: "wwc:h-4 wwc:w-4" })
+				})
+			}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+				align: "start",
+				className: "wwc:w-48 wwc:p-3 wwc:space-y-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:justify-between",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: "show-map-type",
+							className: "wwc:text-xs",
+							children: "Map Type"
+						}), /* @__PURE__ */ jsx(Switch, {
+							id: "show-map-type",
+							checked: showMapType,
+							onCheckedChange: setShowMapType
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:justify-between",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: "show-location",
+							className: "wwc:text-xs",
+							children: "My Location"
+						}), /* @__PURE__ */ jsx(Switch, {
+							id: "show-location",
+							checked: showMyLocation,
+							onCheckedChange: setShowMyLocation
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:justify-between",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: "show-search",
+							className: "wwc:text-xs",
+							children: "Search"
+						}), /* @__PURE__ */ jsx(Switch, {
+							id: "show-search",
+							checked: showSearch,
+							onCheckedChange: setShowSearch
+						})]
+					}),
+					additionalSettings?.map((setting) => /* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:justify-between",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: setting.id,
+							className: "wwc:text-xs",
+							children: setting.label
+						}), /* @__PURE__ */ jsx(Switch, {
+							id: setting.id,
+							checked: setting.checked,
+							onCheckedChange: setting.onCheckedChange
+						})]
+					}, setting.id))
+				]
+			})] }),
+			showMapType && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					icon: true,
+					className: "wwc:bg-card",
+					children: /* @__PURE__ */ jsx(Layers, { className: "wwc:h-4 wwc:w-4" })
+				})
+			}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+				align: "start",
+				className: "wwc:w-44 wwc:p-0",
+				children: /* @__PURE__ */ jsx(ScrollArea, {
+					className: "wwc:h-[180px]",
+					children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+						value: mapStyle,
+						onValueChange: onMapStyleChange,
+						className: "wwc:p-1",
+						children: mapStyles.map((style) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+							value: style.value,
+							className: "wwc:text-xs",
+							children: style.label
+						}, style.value))
+					})
+				})
+			})] }),
+			showMyLocation && /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				icon: true,
+				className: "wwc:bg-card",
+				onClick: locateUser,
+				disabled: isLocating,
+				children: isLocating ? /* @__PURE__ */ jsx(Loader2, { className: "wwc:h-4 wwc:w-4 wwc:animate-spin" }) : /* @__PURE__ */ jsx(LocateFixed, { className: "wwc:h-4 wwc:w-4" })
+			}),
+			additionalControls,
+			showSearch && /* @__PURE__ */ jsxs("div", {
+				className: "wwc:relative wwc:w-48",
+				children: [
+					/* @__PURE__ */ jsx(Search, { className: "wwc:absolute wwc:left-2.5 wwc:top-1/2 wwc:-translate-y-1/2 wwc:h-3.5 wwc:w-3.5 wwc:text-muted-foreground" }),
+					/* @__PURE__ */ jsx(Input, {
+						ref: searchInputRef,
+						placeholder: "Search...",
+						value: searchQuery,
+						onChange: (e) => {
+							setSearchQuery(e.target.value);
+							if (e.target.value && isSearchFocused) setShowResults(true);
+						},
+						onFocus: handleSearchFocus,
+						onBlur: handleSearchBlur,
+						className: "wwc:pl-8 wwc:pr-7 wwc:h-8 wwc:bg-card wwc:text-xs"
+					}),
+					searchQuery && /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						icon: true,
+						onClick: clearSearch,
+						className: "wwc:absolute wwc:right-0.5 wwc:top-1/2 wwc:-translate-y-1/2 wwc:h-6 wwc:w-6",
+						children: /* @__PURE__ */ jsx(X, { className: "wwc:h-3 wwc:w-3" })
+					}),
+					showResults && isSearchFocused && searchResults.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: "wwc:absolute wwc:top-full wwc:left-0 wwc:mt-1 wwc:w-64 wwc:bg-card wwc:border wwc:rounded-md wwc:shadow-lg wwc:z-10",
+						children: /* @__PURE__ */ jsx(ScrollArea, {
+							className: "wwc:h-[180px]",
+							children: searchResults.map((result) => /* @__PURE__ */ jsxs("button", {
+								onClick: () => selectLocation(result),
+								className: "wwc:w-full wwc:flex wwc:items-start wwc:gap-2 wwc:px-3 wwc:py-2 wwc:text-left wwc:text-xs wwc:hover:bg-accent wwc:transition-colors",
+								children: [/* @__PURE__ */ jsx(MapPin, { className: "wwc:h-3.5 wwc:w-3.5 wwc:mt-0.5 wwc:shrink-0 wwc:text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+									className: "wwc:line-clamp-2",
+									children: result.place_name
+								})]
+							}, result.id))
+						})
+					}),
+					isSearching && isSearchFocused && /* @__PURE__ */ jsx("div", {
+						className: "wwc:absolute wwc:top-full wwc:left-0 wwc:mt-1 wwc:w-64 wwc:bg-card wwc:border wwc:rounded-md wwc:p-2 wwc:text-xs wwc:text-muted-foreground",
+						children: "Searching..."
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { MAPBOX_TOKEN, MapControls, mapStyles };
+
+//# sourceMappingURL=map-controls.mjs.map

package/dist/map-controls.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-controls.mjs","names":[],"sources":["../src/map-controls.tsx"],"sourcesContent":["import {Layers, Loader2, LocateFixed, MapPin, Search, Settings2, X} from \"lucide-react\";\nimport mapboxgl from \"mapbox-gl\";\nimport {useCallback, useEffect, useRef, useState} from \"react\";\n\nimport {Button} from \"./button\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuTrigger,\n} from \"./dropdown-menu\";\nimport {Input} from \"./input\";\nimport {Label} from \"./label\";\nimport {MAPBOX_TOKEN} from \"./mapbox-token\";\nimport {ScrollArea} from \"./scroll-area\";\nimport {Switch} from \"./switch\";\n\nconst mapStyles = [\n\t{value: \"mapbox://styles/mapbox/light-v11\", label: \"Light\"},\n\t{value: \"mapbox://styles/mapbox/dark-v11\", label: \"Dark\"},\n\t{value: \"mapbox://styles/mapbox/streets-v12\", label: \"Streets\"},\n\t{value: \"mapbox://styles/mapbox/outdoors-v12\", label: \"Outdoors\"},\n\t{value: \"mapbox://styles/mapbox/satellite-v9\", label: \"Satellite\"},\n\t{value: \"mapbox://styles/mapbox/satellite-streets-v12\", label: \"Satellite Streets\"},\n\t{value: \"mapbox://styles/mapbox/navigation-day-v1\", label: \"Navigation Day\"},\n\t{value: \"mapbox://styles/mapbox/navigation-night-v1\", label: \"Navigation Night\"},\n\t{value: \"mapbox://styles/mapbox/standard\", label: \"Standard\"},\n\t{value: \"mapbox://styles/mapbox/standard-satellite\", label: \"Standard Satellite\"},\n];\n\ninterface SearchResult {\n\tid: string;\n\tplace_name: string;\n\tcenter: [number, number];\n}\n\ninterface SettingsToggle {\n\tid: string;\n\tlabel: string;\n\tchecked: boolean;\n\tonCheckedChange: (checked: boolean) => void;\n}\n\ninterface MapControlsProps {\n\tmapRef: React.MutableRefObject<mapboxgl.Map | null>;\n\tmapStyle: string;\n\tonMapStyleChange: (style: string) => void;\n\tadditionalControls?: React.ReactNode;\n\tadditionalSettings?: SettingsToggle[];\n}\n\n/** Map controls overlay with style selector, location search, and settings panel. */\nexport function MapControls({\n\tmapRef,\n\tmapStyle,\n\tonMapStyleChange,\n\tadditionalControls,\n\tadditionalSettings,\n}: MapControlsProps) {\n\tconst markerRef = useRef<mapboxgl.Marker | null>(null);\n\tconst searchInputRef = useRef<HTMLInputElement>(null);\n\tconst [searchQuery, setSearchQuery] = useState(\"\");\n\tconst [searchResults, setSearchResults] = useState<SearchResult[]>([]);\n\tconst [isSearching, setIsSearching] = useState(false);\n\tconst [showResults, setShowResults] = useState(false);\n\tconst [isSearchFocused, setIsSearchFocused] = useState(false);\n\tconst [isLocating, setIsLocating] = useState(false);\n\tconst [showMapType, setShowMapType] = useState(true);\n\tconst [showMyLocation, setShowMyLocation] = useState(true);\n\tconst [showSearch, setShowSearch] = useState(true);\n\n\tconst searchLocations = useCallback(async (query: string) => {\n\t\tif (!query.trim()) {\n\t\t\tsetSearchResults([]);\n\t\t\treturn;\n\t\t}\n\n\t\tsetIsSearching(true);\n\t\ttry {\n\t\t\tconst response = await fetch(\n\t\t\t\t`https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(query)}.json?access_token=${MAPBOX_TOKEN}&limit=5&types=place,locality,address,poi`,\n\t\t\t);\n\t\t\tconst data = await response.json();\n\t\t\tsetSearchResults(\n\t\t\t\tdata.features?.map((feature: {id: string; place_name: string; center: [number, number]}) => ({\n\t\t\t\t\tid: feature.id,\n\t\t\t\t\tplace_name: feature.place_name,\n\t\t\t\t\tcenter: feature.center,\n\t\t\t\t})) || [],\n\t\t\t);\n\t\t} catch (error) {\n\t\t\tconsole.error(\"Search wwc:error:\", error);\n\t\t\tsetSearchResults([]);\n\t\t} finally {\n\t\t\tsetIsSearching(false);\n\t\t}\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (!isSearchFocused) return;\n\n\t\tconst debounceTimer = setTimeout(() => {\n\t\t\tsearchLocations(searchQuery);\n\t\t}, 300);\n\n\t\treturn () => clearTimeout(debounceTimer);\n\t}, [searchQuery, searchLocations, isSearchFocused]);\n\n\tconst selectLocation = (result: SearchResult) => {\n\t\tsetSearchQuery(result.place_name);\n\t\tsetShowResults(false);\n\t\tsetSearchResults([]);\n\t\tsetIsSearchFocused(false);\n\t\tsearchInputRef.current?.blur();\n\n\t\tif (mapRef.current) {\n\t\t\tmarkerRef.current?.remove();\n\n\t\t\tmarkerRef.current = new mapboxgl.Marker({color: \"#f97316\"}).setLngLat(result.center).addTo(mapRef.current);\n\n\t\t\tmapRef.current.flyTo({\n\t\t\t\tcenter: result.center,\n\t\t\t\tzoom: 12,\n\t\t\t\tduration: 1500,\n\t\t\t});\n\t\t}\n\t};\n\n\tconst clearSearch = () => {\n\t\tsetSearchQuery(\"\");\n\t\tsetSearchResults([]);\n\t\tsetShowResults(false);\n\t\tsetIsSearchFocused(false);\n\t\tmarkerRef.current?.remove();\n\t\tmarkerRef.current = null;\n\t};\n\n\tconst handleSearchFocus = () => {\n\t\tsetIsSearchFocused(true);\n\t\tif (searchResults.length > 0) {\n\t\t\tsetShowResults(true);\n\t\t}\n\t};\n\n\tconst handleSearchBlur = () => {\n\t\tsetTimeout(() => {\n\t\t\tsetShowResults(false);\n\t\t}, 200);\n\t};\n\n\tconst locateUser = () => {\n\t\tif (!navigator.geolocation) return;\n\n\t\tsetIsLocating(true);\n\n\t\tnavigator.geolocation.getCurrentPosition(\n\t\t\t(position) => {\n\t\t\t\tconst {latitude, longitude} = position.coords;\n\t\t\t\tsetIsLocating(false);\n\n\t\t\t\tif (mapRef.current) {\n\t\t\t\t\tmarkerRef.current?.remove();\n\n\t\t\t\t\tconst el = document.createElement(\"div\");\n\t\t\t\t\tel.innerHTML = `\n            <div style=\"\n              width: 16px;\n              height: 16px;\n              background: #3b82f6;\n              border: 2px solid white;\n              border-radius: 50%;\n              box-shadow: 0 0 0 rgba(59, 130, 246, 0.4);\n              animation: pulse 2s infinite;\n            \"></div>\n            <style>\n              @keyframes pulse {\n                0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }\n                70% { box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); }\n                100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }\n              }\n            </style>\n          `;\n\n\t\t\t\t\tmarkerRef.current = new mapboxgl.Marker(el).setLngLat([longitude, latitude]).addTo(mapRef.current);\n\n\t\t\t\t\tmapRef.current.flyTo({\n\t\t\t\t\t\tcenter: [longitude, latitude],\n\t\t\t\t\t\tzoom: 14,\n\t\t\t\t\t\tduration: 1500,\n\t\t\t\t\t});\n\n\t\t\t\t\tsetSearchQuery(\"\");\n\t\t\t\t}\n\t\t\t},\n\t\t\t() => {\n\t\t\t\tsetIsLocating(false);\n\t\t\t},\n\t\t\t{enableHighAccuracy: true, timeout: 10000},\n\t\t);\n\t};\n\n\treturn (\n\t\t<div className=\"wwc:absolute wwc:top-3 wwc:left-3 wwc:flex wwc:gap-1 wwc:z-10\">\n\t\t\t{/* Settings */}\n\t\t\t<DropdownMenu>\n\t\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t\t<Button variant=\"outline\" icon className=\"wwc:bg-card\">\n\t\t\t\t\t\t<Settings2 className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t<DropdownMenuContent align=\"start\" className=\"wwc:w-48 wwc:p-3 wwc:space-y-3\">\n\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:justify-between\">\n\t\t\t\t\t\t<Label htmlFor=\"show-map-type\" className=\"wwc:text-xs\">\n\t\t\t\t\t\t\tMap Type\n\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t<Switch id=\"show-map-type\" checked={showMapType} onCheckedChange={setShowMapType} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:justify-between\">\n\t\t\t\t\t\t<Label htmlFor=\"show-location\" className=\"wwc:text-xs\">\n\t\t\t\t\t\t\tMy Location\n\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t<Switch id=\"show-location\" checked={showMyLocation} onCheckedChange={setShowMyLocation} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:justify-between\">\n\t\t\t\t\t\t<Label htmlFor=\"show-search\" className=\"wwc:text-xs\">\n\t\t\t\t\t\t\tSearch\n\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t<Switch id=\"show-search\" checked={showSearch} onCheckedChange={setShowSearch} />\n\t\t\t\t\t</div>\n\t\t\t\t\t{additionalSettings?.map((setting) => (\n\t\t\t\t\t\t<div key={setting.id} className=\"wwc:flex wwc:items-center wwc:justify-between\">\n\t\t\t\t\t\t\t<Label htmlFor={setting.id} className=\"wwc:text-xs\">\n\t\t\t\t\t\t\t\t{setting.label}\n\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t<Switch id={setting.id} checked={setting.checked} onCheckedChange={setting.onCheckedChange} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</DropdownMenuContent>\n\t\t\t</DropdownMenu>\n\n\t\t\t{/* Map Type Selector */}\n\t\t\t{showMapType && (\n\t\t\t\t<DropdownMenu>\n\t\t\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t\t\t<Button variant=\"outline\" icon className=\"wwc:bg-card\">\n\t\t\t\t\t\t\t<Layers className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t\t<DropdownMenuContent align=\"start\" className=\"wwc:w-44 wwc:p-0\">\n\t\t\t\t\t\t<ScrollArea className=\"wwc:h-[180px]\">\n\t\t\t\t\t\t\t<DropdownMenuRadioGroup value={mapStyle} onValueChange={onMapStyleChange} className=\"wwc:p-1\">\n\t\t\t\t\t\t\t\t{mapStyles.map((style) => (\n\t\t\t\t\t\t\t\t\t<DropdownMenuRadioItem key={style.value} value={style.value} className=\"wwc:text-xs\">\n\t\t\t\t\t\t\t\t\t\t{style.label}\n\t\t\t\t\t\t\t\t\t</DropdownMenuRadioItem>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</DropdownMenuRadioGroup>\n\t\t\t\t\t\t</ScrollArea>\n\t\t\t\t\t</DropdownMenuContent>\n\t\t\t\t</DropdownMenu>\n\t\t\t)}\n\n\t\t\t{/* My Location Button */}\n\t\t\t{showMyLocation && (\n\t\t\t\t<Button variant=\"outline\" icon className=\"wwc:bg-card\" onClick={locateUser} disabled={isLocating}>\n\t\t\t\t\t{isLocating ? (\n\t\t\t\t\t\t<Loader2 className=\"wwc:h-4 wwc:w-4 wwc:animate-spin\" />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<LocateFixed className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t)}\n\t\t\t\t</Button>\n\t\t\t)}\n\n\t\t\t{/* Additional Controls */}\n\t\t\t{additionalControls}\n\n\t\t\t{/* Search Box */}\n\t\t\t{showSearch && (\n\t\t\t\t<div className=\"wwc:relative wwc:w-48\">\n\t\t\t\t\t<Search className=\"wwc:absolute wwc:left-2.5 wwc:top-1/2 wwc:-translate-y-1/2 wwc:h-3.5 wwc:w-3.5 wwc:text-muted-foreground\" />\n\t\t\t\t\t<Input\n\t\t\t\t\t\tref={searchInputRef}\n\t\t\t\t\t\tplaceholder=\"Search...\"\n\t\t\t\t\t\tvalue={searchQuery}\n\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\tsetSearchQuery(e.target.value);\n\t\t\t\t\t\t\tif (e.target.value && isSearchFocused) {\n\t\t\t\t\t\t\t\tsetShowResults(true);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonFocus={handleSearchFocus}\n\t\t\t\t\t\tonBlur={handleSearchBlur}\n\t\t\t\t\t\tclassName=\"wwc:pl-8 wwc:pr-7 wwc:h-8 wwc:bg-card wwc:text-xs\"\n\t\t\t\t\t/>\n\t\t\t\t\t{searchQuery && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\ticon\n\t\t\t\t\t\t\tonClick={clearSearch}\n\t\t\t\t\t\t\tclassName=\"wwc:absolute wwc:right-0.5 wwc:top-1/2 wwc:-translate-y-1/2 wwc:h-6 wwc:w-6\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<X className=\"wwc:h-3 wwc:w-3\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Search Results Dropdown */}\n\t\t\t\t\t{showResults && isSearchFocused && searchResults.length > 0 && (\n\t\t\t\t\t\t<div className=\"wwc:absolute wwc:top-full wwc:left-0 wwc:mt-1 wwc:w-64 wwc:bg-card wwc:border wwc:rounded-md wwc:shadow-lg wwc:z-10\">\n\t\t\t\t\t\t\t<ScrollArea className=\"wwc:h-[180px]\">\n\t\t\t\t\t\t\t\t{searchResults.map((result) => (\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tkey={result.id}\n\t\t\t\t\t\t\t\t\t\tonClick={() => selectLocation(result)}\n\t\t\t\t\t\t\t\t\t\tclassName=\"wwc:w-full wwc:flex wwc:items-start wwc:gap-2 wwc:px-3 wwc:py-2 wwc:text-left wwc:text-xs wwc:hover:bg-accent wwc:transition-colors\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<MapPin className=\"wwc:h-3.5 wwc:w-3.5 wwc:mt-0.5 wwc:shrink-0 wwc:text-muted-foreground\" />\n\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:line-clamp-2\">{result.place_name}</span>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</ScrollArea>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{isSearching && isSearchFocused && (\n\t\t\t\t\t\t<div className=\"wwc:absolute wwc:top-full wwc:left-0 wwc:mt-1 wwc:w-64 wwc:bg-card wwc:border wwc:rounded-md wwc:p-2 wwc:text-xs wwc:text-muted-foreground\">\n\t\t\t\t\t\t\tSearching...\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport {mapStyles, MAPBOX_TOKEN};\n"],"mappings":"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"}

package/dist/map-hover-card.d.mts

@@ -0,0 +1,28 @@
+import * as React from "react";
+//#region src/map-hover-card.d.ts
+export interface MapHoverCardRow {
+  label: string;
+  value: React.ReactNode;
+}
+export interface MapHoverCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  title: React.ReactNode;
+  /** Badges or meta under the title. */
+  badges?: React.ReactNode;
+  /** A preview strip above the title — a camera still, an image, a chart. */
+  media?: React.ReactNode;
+  /** Label/value lines. Keep it to a handful; this is a peek, not the record. */
+  rows?: MapHoverCardRow[];
+  /** A closing line — a hint, a count, an action. */
+  footer?: React.ReactNode;
+  /** Width in px. Default `220`. */
+  width?: number;
+}
+/**
+ * The card shown while hovering a marker: a peek at what is under the cursor, sized to be read without
+ * moving the eye far. It carries only what identifies the thing and what you would decide on — opening
+ * it is what the full panel is for.
+ */
+declare const MapHoverCard: React.ForwardRefExoticComponent<MapHoverCardProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { MapHoverCard };
+//# sourceMappingURL=map-hover-card.d.mts.map

package/dist/map-hover-card.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-hover-card.d.mts","names":[],"sources":["../src/map-hover-card.tsx"],"mappings":";;iBAKiB;EAChB;EACA,OAAO,MAAM;;iBAGG,0BAA0B,KAAK,MAAM,eAAe;EACpE,OAAO,MAAM;;EAEb,SAAS,MAAM;;EAEf,QAAQ,MAAM;;EAEd,OAAO;;EAEP,SAAS,MAAM;;EAEf;;;;;;;cAQK,cAAY,MAAA,0BAAA,oBAAA,MAAA,cAAA"}

package/dist/map-hover-card.mjs

@@ -0,0 +1,56 @@
+import { FLOAT_SHADOW } from "./float-shadow.mjs";
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/map-hover-card.tsx
+/**
+* The card shown while hovering a marker: a peek at what is under the cursor, sized to be read without
+* moving the eye far. It carries only what identifies the thing and what you would decide on — opening
+* it is what the full panel is for.
+*/
+const MapHoverCard = React.forwardRef(({ className, title, badges, media, rows, footer, width = 220, style, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+	ref,
+	className: cn("wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:text-card-foreground", FLOAT_SHADOW, className),
+	style: {
+		width,
+		...style
+	},
+	...props,
+	children: [media, /* @__PURE__ */ jsxs("div", {
+		className: "wwc:space-y-1.5 wwc:px-2.5 wwc:py-2",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:space-y-1",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "wwc:truncate wwc:text-xs wwc:font-semibold",
+					children: title
+				}), badges && /* @__PURE__ */ jsx("div", {
+					className: "wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-1",
+					children: badges
+				})]
+			}),
+			rows && rows.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "wwc:space-y-0.5",
+				children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:items-start wwc:justify-between wwc:gap-2 wwc:text-[11px]",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "wwc:shrink-0 wwc:text-muted-foreground",
+						children: row.label
+					}), /* @__PURE__ */ jsx("span", {
+						className: "wwc:min-w-0 wwc:truncate wwc:text-right wwc:font-medium",
+						children: row.value
+					})]
+				}, row.label))
+			}),
+			footer && /* @__PURE__ */ jsx("div", {
+				className: "wwc:pt-0.5 wwc:text-[11px] wwc:text-muted-foreground",
+				children: footer
+			})
+		]
+	})]
+}));
+MapHoverCard.displayName = "MapHoverCard";
+//#endregion
+export { MapHoverCard };
+
+//# sourceMappingURL=map-hover-card.mjs.map

package/dist/map-hover-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-hover-card.mjs","names":[],"sources":["../src/map-hover-card.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport * as React from \"react\";\n\nimport {FLOAT_SHADOW} from \"./float-shadow\";\n\nexport interface MapHoverCardRow {\n\tlabel: string;\n\tvalue: React.ReactNode;\n}\n\nexport interface MapHoverCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n\ttitle: React.ReactNode;\n\t/** Badges or meta under the title. */\n\tbadges?: React.ReactNode;\n\t/** A preview strip above the title — a camera still, an image, a chart. */\n\tmedia?: React.ReactNode;\n\t/** Label/value lines. Keep it to a handful; this is a peek, not the record. */\n\trows?: MapHoverCardRow[];\n\t/** A closing line — a hint, a count, an action. */\n\tfooter?: React.ReactNode;\n\t/** Width in px. Default `220`. */\n\twidth?: number;\n}\n\n/**\n * The card shown while hovering a marker: a peek at what is under the cursor, sized to be read without\n * moving the eye far. It carries only what identifies the thing and what you would decide on — opening\n * it is what the full panel is for.\n */\nconst MapHoverCard = React.forwardRef<HTMLDivElement, MapHoverCardProps>(\n\t({className, title, badges, media, rows, footer, width = 220, style, ...props}, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:text-card-foreground\",\n\t\t\t\tFLOAT_SHADOW,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={{width, ...style}}\n\t\t\t{...props}\n\t\t>\n\t\t\t{media}\n\t\t\t<div className=\"wwc:space-y-1.5 wwc:px-2.5 wwc:py-2\">\n\t\t\t\t<div className=\"wwc:space-y-1\">\n\t\t\t\t\t<p className=\"wwc:truncate wwc:text-xs wwc:font-semibold\">{title}</p>\n\t\t\t\t\t{badges && <div className=\"wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-1\">{badges}</div>}\n\t\t\t\t</div>\n\n\t\t\t\t{rows && rows.length > 0 && (\n\t\t\t\t\t<div className=\"wwc:space-y-0.5\">\n\t\t\t\t\t\t{rows.map((row) => (\n\t\t\t\t\t\t\t<div key={row.label} className=\"wwc:flex wwc:items-start wwc:justify-between wwc:gap-2 wwc:text-[11px]\">\n\t\t\t\t\t\t\t\t<span className=\"wwc:shrink-0 wwc:text-muted-foreground\">{row.label}</span>\n\t\t\t\t\t\t\t\t<span className=\"wwc:min-w-0 wwc:truncate wwc:text-right wwc:font-medium\">{row.value}</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{footer && <div className=\"wwc:pt-0.5 wwc:text-[11px] wwc:text-muted-foreground\">{footer}</div>}\n\t\t\t</div>\n\t\t</div>\n\t),\n);\nMapHoverCard.displayName = \"MapHoverCard\";\n\nexport {MapHoverCard};\n"],"mappings":";;;;;;;;;;AA6BA,MAAM,eAAe,MAAM,YACzB,EAAC,WAAW,OAAO,QAAQ,OAAO,MAAM,QAAQ,QAAQ,KAAK,OAAO,GAAG,SAAQ,QAC/E,qBAAC,OAAD;CACM;CACL,WAAW,GACV,wGACA,cACA,SACD;CACA,OAAO;EAAC;EAAO,GAAG;CAAK;CACvB,GAAI;CARL,UAAA,CAUE,OACD,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,oBAAC,KAAD;KAAG,WAAU;KAA8C,UAAA;IAAS,CAAA,GACnE,UAAU,oBAAC,OAAD;KAAK,WAAU;KAAqD,UAAA;IAAY,CAAA,CACvF;;GAEJ,QAAQ,KAAK,SAAS,KACtB,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,KAAK,KAAK,QACV,qBAAC,OAAD;KAAqB,WAAU;KAA/B,UAAA,CACC,oBAAC,QAAD;MAAM,WAAU;MAA0C,UAAA,IAAI;KAAY,CAAA,GAC1E,oBAAC,QAAD;MAAM,WAAU;MAA2D,UAAA,IAAI;KAAY,CAAA,CACvF;IAHK,GAAA,IAAI,KAGT,CACL;GACG,CAAA;GAGL,UAAU,oBAAC,OAAD;IAAK,WAAU;IAAwD,UAAA;GAAY,CAAA;EAC1F;CACD,CAAA,CAAA;AAEP,CAAA,CAAA;AACA,aAAa,cAAc"}

package/dist/map-legend.d.mts

@@ -0,0 +1,41 @@
+import * as React from "react";
+//#region src/map-legend.d.ts
+/** How a legend entry is drawn, matching how the thing itself appears on the map. */
+export type MapLegendShape = "circle" | "square" | "fill" | "line" | "dashed";
+export interface MapLegendItem {
+  label: string;
+  /** Swatch colour. */
+  color: string;
+  /** Default `circle`. Use `square` for fixtures, `fill`/`line`/`dashed` for map layers. */
+  shape?: MapLegendShape;
+  /** Glyph drawn inside the swatch, as inner SVG markup on a 24x24 viewBox. */
+  icon?: string;
+}
+export interface MapLegendSection {
+  title: string;
+  items: MapLegendItem[];
+}
+export interface MapLegendProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Header text. Default "Map legend". */
+  title?: React.ReactNode;
+  sections: MapLegendSection[];
+  /** Start folded to just the header. Default false. */
+  defaultCollapsed?: boolean;
+  collapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  /** Width in px. Default `150` — a key, not a panel. */
+  width?: number;
+  /** Width while collapsed. Default `160`, matching a collapsed `MapControlPanel`. */
+  collapsedWidth?: number;
+  /** Cap on the card's height; the body scrolls beneath it. Default `"50vh"`. */
+  maxHeight?: string;
+}
+/**
+ * A compact key for what is currently drawn on a map: swatches shaped like the thing they describe, so
+ * a round entry means a round marker and a dashed entry means a dashed outline. Grouped into sections
+ * and foldable, with the same chrome as the other floating map panels.
+ */
+declare const MapLegend: React.ForwardRefExoticComponent<MapLegendProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { MapLegend };
+//# sourceMappingURL=map-legend.d.mts.map

package/dist/map-legend.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-legend.d.mts","names":[],"sources":["../src/map-legend.tsx"],"mappings":";;;YAQY;iBAEK;EAChB;;EAEA;;EAEA,QAAQ;;EAER;;iBAGgB;EAChB;EACA,OAAO;;iBAGS,uBAAuB,KAAK,MAAM,eAAe;;EAEjE,QAAQ,MAAM;EACd,UAAU;;EAEV;EACA;EACA,qBAAqB;;EAErB;;EAEA;;EAEA;;;;;;;cAgDK,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}

package/dist/map-legend.mjs

@@ -0,0 +1,97 @@
+import { Button } from "./button.mjs";
+import { FLOAT_SHADOW } from "./float-shadow.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { PanelLeft, PanelLeftClose } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/map-legend.tsx
+function Swatch({ item }) {
+	const shape = item.shape ?? "circle";
+	if (shape === "line" || shape === "dashed") return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "wwc:h-0 wwc:w-3.5 wwc:shrink-0 wwc:border-t-2",
+		style: {
+			borderColor: item.color,
+			borderStyle: shape === "dashed" ? "dashed" : "solid"
+		}
+	});
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cn("wwc:flex wwc:size-3 wwc:shrink-0 wwc:items-center wwc:justify-center", shape === "circle" && "wwc:rounded-full", shape === "square" && "wwc:rounded-[3px]", shape === "fill" && "wwc:rounded-[2px] wwc:opacity-60"),
+		style: { backgroundColor: item.color },
+		children: item.icon && /* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			width: 8,
+			height: 8,
+			viewBox: "0 0 24 24",
+			fill: "#fff",
+			stroke: "none",
+			style: { color: item.color },
+			dangerouslySetInnerHTML: { __html: item.icon }
+		})
+	});
+}
+/**
+* A compact key for what is currently drawn on a map: swatches shaped like the thing they describe, so
+* a round entry means a round marker and a dashed entry means a dashed outline. Grouped into sections
+* and foldable, with the same chrome as the other floating map panels.
+*/
+const MapLegend = React.forwardRef(({ className, title = "Map legend", sections, defaultCollapsed = false, collapsed: collapsedProp, onCollapsedChange, width = 150, collapsedWidth = 160, maxHeight = "50vh", style, ...props }, ref) => {
+	const [uncontrolled, setUncontrolled] = React.useState(defaultCollapsed);
+	const collapsed = collapsedProp ?? uncontrolled;
+	const toggle = () => {
+		const next = !collapsed;
+		if (collapsedProp == null) setUncontrolled(next);
+		onCollapsedChange?.(next);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:flex wwc:flex-col wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:text-card-foreground", FLOAT_SHADOW, className),
+		style: {
+			width: collapsed ? collapsedWidth : width,
+			maxHeight,
+			transition: "width 200ms ease",
+			...style
+		},
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:shrink-0 wwc:items-center wwc:justify-between wwc:gap-2 wwc:px-2.5 wwc:py-1.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "wwc:text-xs wwc:font-medium wwc:text-muted-foreground",
+				children: title
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				icon: true,
+				"aria-label": collapsed ? "Show map legend" : "Hide map legend",
+				"aria-expanded": !collapsed,
+				className: "wwc:h-6 wwc:w-6 wwc:text-muted-foreground",
+				onClick: toggle,
+				children: collapsed ? /* @__PURE__ */ jsx(PanelLeft, { className: "wwc:h-3.5 wwc:w-3.5" }) : /* @__PURE__ */ jsx(PanelLeftClose, { className: "wwc:h-3.5 wwc:w-3.5" })
+			})]
+		}), !collapsed && /* @__PURE__ */ jsx("div", {
+			className: "wwc:min-h-0 wwc:flex-1 wwc:space-y-2 wwc:overflow-y-auto wwc:border-t wwc:border-border wwc:px-2.5 wwc:py-2",
+			children: sections.map((section) => /* @__PURE__ */ jsxs("div", {
+				className: "wwc:space-y-1",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "wwc:text-[11px] wwc:font-semibold",
+					children: section.title
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "wwc:space-y-0.5",
+					children: section.items.map((item) => /* @__PURE__ */ jsxs("li", {
+						className: "wwc:flex wwc:items-center wwc:gap-1.5 wwc:text-[11px] wwc:leading-5",
+						children: [/* @__PURE__ */ jsx(Swatch, { item }), /* @__PURE__ */ jsx("span", {
+							className: "wwc:truncate wwc:text-muted-foreground",
+							children: item.label
+						})]
+					}, item.label))
+				})]
+			}, section.title))
+		})]
+	});
+});
+MapLegend.displayName = "MapLegend";
+//#endregion
+export { MapLegend };
+
+//# sourceMappingURL=map-legend.mjs.map

package/dist/map-legend.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-legend.mjs","names":[],"sources":["../src/map-legend.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {PanelLeft, PanelLeftClose} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Button} from \"./button\";\nimport {FLOAT_SHADOW} from \"./float-shadow\";\n\n/** How a legend entry is drawn, matching how the thing itself appears on the map. */\nexport type MapLegendShape = \"circle\" | \"square\" | \"fill\" | \"line\" | \"dashed\";\n\nexport interface MapLegendItem {\n\tlabel: string;\n\t/** Swatch colour. */\n\tcolor: string;\n\t/** Default `circle`. Use `square` for fixtures, `fill`/`line`/`dashed` for map layers. */\n\tshape?: MapLegendShape;\n\t/** Glyph drawn inside the swatch, as inner SVG markup on a 24x24 viewBox. */\n\ticon?: string;\n}\n\nexport interface MapLegendSection {\n\ttitle: string;\n\titems: MapLegendItem[];\n}\n\nexport interface MapLegendProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n\t/** Header text. Default \"Map legend\". */\n\ttitle?: React.ReactNode;\n\tsections: MapLegendSection[];\n\t/** Start folded to just the header. Default false. */\n\tdefaultCollapsed?: boolean;\n\tcollapsed?: boolean;\n\tonCollapsedChange?: (collapsed: boolean) => void;\n\t/** Width in px. Default `150` — a key, not a panel. */\n\twidth?: number;\n\t/** Width while collapsed. Default `160`, matching a collapsed `MapControlPanel`. */\n\tcollapsedWidth?: number;\n\t/** Cap on the card's height; the body scrolls beneath it. Default `\"50vh\"`. */\n\tmaxHeight?: string;\n}\n\nfunction Swatch({item}: {item: MapLegendItem}) {\n\tconst shape = item.shape ?? \"circle\";\n\tif (shape === \"line\" || shape === \"dashed\") {\n\t\treturn (\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName=\"wwc:h-0 wwc:w-3.5 wwc:shrink-0 wwc:border-t-2\"\n\t\t\t\tstyle={{borderColor: item.color, borderStyle: shape === \"dashed\" ? \"dashed\" : \"solid\"}}\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<span\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:flex wwc:size-3 wwc:shrink-0 wwc:items-center wwc:justify-center\",\n\t\t\t\tshape === \"circle\" && \"wwc:rounded-full\",\n\t\t\t\tshape === \"square\" && \"wwc:rounded-[3px]\",\n\t\t\t\tshape === \"fill\" && \"wwc:rounded-[2px] wwc:opacity-60\",\n\t\t\t)}\n\t\t\tstyle={{backgroundColor: item.color}}\n\t\t>\n\t\t\t{item.icon && (\n\t\t\t\t// Same trick the markers use: the glyph fills white and its detail is knocked back out.\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth={8}\n\t\t\t\t\theight={8}\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"#fff\"\n\t\t\t\t\tstroke=\"none\"\n\t\t\t\t\tstyle={{color: item.color}}\n\t\t\t\t\t// biome-ignore lint/security/noDangerouslySetInnerHtml: the glyph is library-authored markup\n\t\t\t\t\tdangerouslySetInnerHTML={{__html: item.icon}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</span>\n\t);\n}\n\n/**\n * A compact key for what is currently drawn on a map: swatches shaped like the thing they describe, so\n * a round entry means a round marker and a dashed entry means a dashed outline. Grouped into sections\n * and foldable, with the same chrome as the other floating map panels.\n */\nconst MapLegend = React.forwardRef<HTMLDivElement, MapLegendProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\ttitle = \"Map legend\",\n\t\t\tsections,\n\t\t\tdefaultCollapsed = false,\n\t\t\tcollapsed: collapsedProp,\n\t\t\tonCollapsedChange,\n\t\t\twidth = 150,\n\t\t\tcollapsedWidth = 160,\n\t\t\tmaxHeight = \"50vh\",\n\t\t\tstyle,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [uncontrolled, setUncontrolled] = React.useState(defaultCollapsed);\n\t\tconst collapsed = collapsedProp ?? uncontrolled;\n\n\t\tconst toggle = () => {\n\t\t\tconst next = !collapsed;\n\t\t\tif (collapsedProp == null) setUncontrolled(next);\n\t\t\tonCollapsedChange?.(next);\n\t\t};\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:flex wwc:flex-col wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:text-card-foreground\",\n\t\t\t\t\tFLOAT_SHADOW,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tstyle={{width: collapsed ? collapsedWidth : width, maxHeight, transition: \"width 200ms ease\", ...style}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<div className=\"wwc:flex wwc:shrink-0 wwc:items-center wwc:justify-between wwc:gap-2 wwc:px-2.5 wwc:py-1.5\">\n\t\t\t\t\t<span className=\"wwc:text-xs wwc:font-medium wwc:text-muted-foreground\">{title}</span>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\ticon\n\t\t\t\t\t\taria-label={collapsed ? \"Show map legend\" : \"Hide map legend\"}\n\t\t\t\t\t\taria-expanded={!collapsed}\n\t\t\t\t\t\tclassName=\"wwc:h-6 wwc:w-6 wwc:text-muted-foreground\"\n\t\t\t\t\t\tonClick={toggle}\n\t\t\t\t\t>\n\t\t\t\t\t\t{collapsed ? (\n\t\t\t\t\t\t\t<PanelLeft className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<PanelLeftClose className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\n\t\t\t\t{!collapsed && (\n\t\t\t\t\t<div className=\"wwc:min-h-0 wwc:flex-1 wwc:space-y-2 wwc:overflow-y-auto wwc:border-t wwc:border-border wwc:px-2.5 wwc:py-2\">\n\t\t\t\t\t\t{sections.map((section) => (\n\t\t\t\t\t\t\t<div key={section.title} className=\"wwc:space-y-1\">\n\t\t\t\t\t\t\t\t<p className=\"wwc:text-[11px] wwc:font-semibold\">{section.title}</p>\n\t\t\t\t\t\t\t\t<ul className=\"wwc:space-y-0.5\">\n\t\t\t\t\t\t\t\t\t{section.items.map((item) => (\n\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\tkey={item.label}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"wwc:flex wwc:items-center wwc:gap-1.5 wwc:text-[11px] wwc:leading-5\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Swatch item={item} />\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:truncate wwc:text-muted-foreground\">{item.label}</span>\n\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nMapLegend.displayName = \"MapLegend\";\n\nexport {MapLegend};\n"],"mappings":";;;;;;;AAyCA,SAAS,OAAO,EAAC,QAA8B;CAC9C,MAAM,QAAQ,KAAK,SAAS;CAC5B,IAAI,UAAU,UAAU,UAAU,UACjC,OACC,oBAAC,QAAD;EACC,eAAY;EACZ,WAAU;EACV,OAAO;GAAC,aAAa,KAAK;GAAO,aAAa,UAAU,WAAW,WAAW;EAAO;CACrF,CAAA;CAGH,OACC,oBAAC,QAAD;EACC,eAAY;EACZ,WAAW,GACV,wEACA,UAAU,YAAY,oBACtB,UAAU,YAAY,qBACtB,UAAU,UAAU,kCACrB;EACA,OAAO,EAAC,iBAAiB,KAAK,MAAK;EAElC,UAAA,KAAK,QAEL,oBAAC,OAAD;GACC,OAAM;GACN,OAAO;GACP,QAAQ;GACR,SAAQ;GACR,MAAK;GACL,QAAO;GACP,OAAO,EAAC,OAAO,KAAK,MAAK;GAEzB,yBAAyB,EAAC,QAAQ,KAAK,KAAI;EAC3C,CAAA;CAEG,CAAA;AAER;;;;;;AAOA,MAAM,YAAY,MAAM,YAEtB,EACC,WACA,QAAQ,cACR,UACA,mBAAmB,OACnB,WAAW,eACX,mBACA,QAAQ,KACR,iBAAiB,KACjB,YAAY,QACZ,OACA,GAAG,SAEJ,QACI;CACJ,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,gBAAgB;CACvE,MAAM,YAAY,iBAAiB;CAEnC,MAAM,eAAe;EACpB,MAAM,OAAO,CAAC;EACd,IAAI,iBAAiB,MAAM,gBAAgB,IAAI;EAC/C,oBAAoB,IAAI;CACzB;CAEA,OACC,qBAAC,OAAD;EACM;EACL,WAAW,GACV,8HACA,cACA,SACD;EACA,OAAO;GAAC,OAAO,YAAY,iBAAiB;GAAO;GAAW,YAAY;GAAoB,GAAG;EAAK;EACtG,GAAI;EARL,UAAA,CAUC,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,oBAAC,QAAD;IAAM,WAAU;IAAyD,UAAA;GAAY,CAAA,GACrF,oBAAC,QAAD;IACC,SAAQ;IACR,MAAK;IACL,MAAA;IACA,cAAY,YAAY,oBAAoB;IAC5C,iBAAe,CAAC;IAChB,WAAU;IACV,SAAS;IAER,UAAA,YACA,oBAAC,WAAD,EAAW,WAAU,sBAAuB,CAAA,IAE5C,oBAAC,gBAAD,EAAgB,WAAU,sBAAuB,CAAA;GAE3C,CAAA,CACJ;EAEJ,CAAA,GAAA,CAAC,aACD,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,SAAS,KAAK,YACd,qBAAC,OAAD;IAAyB,WAAU;IAAnC,UAAA,CACC,oBAAC,KAAD;KAAG,WAAU;KAAqC,UAAA,QAAQ;IAAS,CAAA,GACnE,oBAAC,MAAD;KAAI,WAAU;KACZ,UAAA,QAAQ,MAAM,KAAK,SACnB,qBAAC,MAAD;MAEC,WAAU;MAFX,UAAA,CAIC,oBAAC,QAAD,EAAc,KAAO,CAAA,GACrB,oBAAC,QAAD;OAAM,WAAU;OAA0C,UAAA,KAAK;MAAY,CAAA,CACxE;KALE,GAAA,KAAK,KAKP,CACJ;IACE,CAAA,CACA;GAbK,GAAA,QAAQ,KAab,CACL;EACG,CAAA,CAEF;;AAEP,CACD;AACA,UAAU,cAAc"}