50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T269f,"use client"; import "leaflet/dist/leaflet.css"; import type { Map as LeafletMap, Marker as LeafletMarker } from "leaflet"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; import { field, mono, paper } from "./surfaces"; export interface GeoMapPlace { id: string; lat: number; lng: number; label: string; description?: string | undefined; } export interface GeoMapRoute { id: string; points: readonly (readonly [lat: number, lng: number])[]; label?: string | undefined; } export interface GeoMapProps extends Omit< ComponentProps<"div">, "children" | "onSelect" > { places: readonly GeoMapPlace[]; routes?: readonly GeoMapRoute[] | undefined; selectedId?: string | undefined; onSelect?: ((id: string) => void) | undefined; theme?: "light" | "dark" | "auto" | undefined; tileUrl?: string | undefined; attribution?: string | undefined; height?: number | undefined; } type LeafletModule = typeof import("leaflet"); type Coordinate = [lat: number, lng: number]; const DEFAULT_TILE_URL = "https://tile.openstreetmap.org/{z}/{x}/{y}.png"; const DEFAULT_ATTRIBUTION = "© OpenStreetMap contributors"; function isCoordinate(lat: number, lng: number) { return ( Number.isFinite(lat) && Number.isFinite(lng) && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180 ); } function markerIcon(leaflet: LeafletModule, selected: boolean) { const size = selected ? 16 : 10; return leaflet.divIcon({ className: "geo-map-marker", html: selected ? '' : '', iconSize: [size, size], iconAnchor: [size / 2, size / 2], }); } const TILE_INK = { light: "[&_.leaflet-tile-pane]:contrast-90 [&_.leaflet-tile-pane]:grayscale", dark: "[&_.leaflet-tile-pane]:brightness-90 [&_.leaflet-tile-pane]:contrast-90 [&_.leaflet-tile-pane]:grayscale [&_.leaflet-tile-pane]:hue-rotate-180 [&_.leaflet-tile-pane]:invert", auto: "[&_.leaflet-tile-pane]:contrast-90 [&_.leaflet-tile-pane]:grayscale dark:[&_.leaflet-tile-pane]:brightness-90 dark:[&_.leaflet-tile-pane]:hue-rotate-180 dark:[&_.leaflet-tile-pane]:invert", } as const; export function GeoMap({ places, routes, selectedId, onSelect, theme = "auto", tileUrl, attribution, height = 260, className, ...props }: GeoMapProps) { const containerRef = useRef(null); const mapRef = useRef(null); const leafletRef = useRef(null); const markersRef = useRef(new Map()); const [mapReady, setMapReady] = useState(false); const mapContent = useMemo(() => { const validPlaces = places.filter((place) => isCoordinate(place.lat, place.lng), ); const routePoints: Coordinate[] = []; const validRoutes = routes ?.map((route) => { const points = route.points .filter(([lat, lng]) => isCoordinate(lat, lng)) .map(([lat, lng]) => [lat, lng] as Coordinate); routePoints.push(...points); return { ...route, points }; }) .filter((route) => route.points.length > 1) ?? []; return { signature: JSON.stringify([ places.map((place) => [ place.id, place.lat, place.lng, place.label, place.description, ]), routes?.map((route) => [route.id, route.points]) ?? [], ]), validPlaces, routePoints, validRoutes, }; }, [places, routes]); const { signature: contentSignature, validPlaces } = mapContent; const mapContentRef = useRef(mapContent); mapContentRef.current = mapContent; const resolvedTileUrl = tileUrl ?? DEFAULT_TILE_URL; const resolvedAttribution = attribution ?? DEFAULT_ATTRIBUTION; const [uncontrolledSelectedId, setUncontrolledSelectedId] = useState< string | undefined >(() => validPlaces[0]?.id); const activeId = selectedId ?? (validPlaces.some((place) => place.id === uncontrolledSelectedId) ? uncontrolledSelectedId : validPlaces[0]?.id); const activeIdRef = useRef(activeId); activeIdRef.current = activeId; const selectPlace = useCallback( (place: GeoMapPlace) => { if (selectedId === undefined) setUncontrolledSelectedId(place.id); onSelect?.(place.id); mapRef.current?.panTo([place.lat, place.lng]); }, [onSelect, selectedId], ); const selectPlaceRef = useRef(selectPlace); selectPlaceRef.current = selectPlace; useEffect(() => { const container = containerRef.current; if (!container) return undefined; let cancelled = false; let map: LeafletMap | null = null; setMapReady(false); void (async () => { const leaflet = await import("leaflet"); if (cancelled) return; leafletRef.current = leaflet; map = leaflet.map(container, { keyboard: true }); mapRef.current = map; leaflet .tileLayer(resolvedTileUrl, { attribution: resolvedAttribution, }) .addTo(map); setMapReady(true); })(); return () => { cancelled = true; if (mapRef.current === map) mapRef.current = null; map?.remove(); }; }, [resolvedAttribution, resolvedTileUrl]); useEffect(() => { const leaflet = leafletRef.current; const map = mapRef.current; if (!leaflet || !map || !mapReady) return; const { routePoints, validPlaces, validRoutes } = mapContentRef.current; const layer = leaflet.layerGroup().addTo(map); const points: Coordinate[] = [ ...validPlaces.map((place) => [place.lat, place.lng] as Coordinate), ...routePoints, ]; const [first] = points; if (points.length === 1 && first) { map.setView(first, 13); } else if (points.length > 1) { map.fitBounds(leaflet.latLngBounds(points), { padding: [24, 24] }); } else { map.setView([0, 0], 2); } for (const route of validRoutes) { leaflet .polyline(route.points, { className: "stroke-foreground/70", weight: 2, }) .addTo(layer); } for (const place of validPlaces) { const marker = leaflet .marker([place.lat, place.lng], { icon: markerIcon(leaflet, place.id === activeIdRef.current), title: place.label, }) .addTo(layer) .on("click", () => selectPlaceRef.current(place)); markersRef.current.set(place.id, marker); } return () => { markersRef.current.clear(); layer.remove(); }; }, [contentSignature, mapReady]); useEffect(() => { const leaflet = leafletRef.current; if (!leaflet) return; for (const place of mapContentRef.current.validPlaces) { markersRef.current .get(place.id) ?.setIcon(markerIcon(leaflet, place.id === activeId)); } }, [activeId, contentSignature]); return (

{!mapReady ? ( Loading map ) : null}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","leaflet",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/leaflet","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"leaflet"}]]}]}]]}],["$","$L50",null,{"namespace":"@assistant-ui","registryDependencies":["https://r.assistant-ui.com/elements-surfaces.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/assistant-ui/elements/geo-map.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]