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:T10f4,"use client" import { useEffect, useRef, useCallback, type CSSProperties } from "react" import { useMap } from "./hooks" import type { MapCoordinates } from "./types" const DEFAULT_BLUR_AMOUNT = 8 const DEFAULT_ROUNDED = 0 const MIN_AREA_SIZE = 20 type BlurAreaConfig = { coordinates: MapCoordinates[] blur?: number backgroundColor?: string rounded?: number | "full" } type MapBlurAreaProps = { coordinates?: MapCoordinates[] areas?: BlurAreaConfig[] blur?: number backgroundColor?: string rounded?: number | "full" blockInteraction?: boolean } type Bounds = { minX: number maxX: number minY: number maxY: number } const getBounds = (points: { x: number; y: number }[]): Bounds => { const xs = points.map((p) => { return p.x }) const ys = points.map((p) => { return p.y }) return { minX: Math.min(...xs), maxX: Math.max(...xs), minY: Math.min(...ys), maxY: Math.max(...ys), } } type BlurOverlayProps = { coordinates: MapCoordinates[] blur: number backgroundColor?: string rounded: number | "full" blockInteraction: boolean } const BlurOverlay = ({ coordinates, blur, backgroundColor, rounded, blockInteraction }: BlurOverlayProps) => { const { map, isLoaded } = useMap() const overlayRef = useRef(null) const updatePosition = useCallback(() => { if (!overlayRef.current || !map) { return } const canvas = map.getCanvas() const canvasWidth = canvas.clientWidth const canvasHeight = canvas.clientHeight const projectedPoints = coordinates.map((coord) => { return map.project(coord) }) const bounds = getBounds(projectedPoints) const width = bounds.maxX - bounds.minX const height = bounds.maxY - bounds.minY const isVisible = bounds.maxX >= 0 && bounds.minX <= canvasWidth && bounds.maxY >= 0 && bounds.minY <= canvasHeight && width >= MIN_AREA_SIZE && height >= MIN_AREA_SIZE if (!isVisible) { overlayRef.current.style.opacity = "0" } else { overlayRef.current.style.opacity = "1" overlayRef.current.style.left = `${bounds.minX}px` overlayRef.current.style.top = `${bounds.minY}px` overlayRef.current.style.width = `${width}px` overlayRef.current.style.height = `${height}px` } }, [map, coordinates]) useEffect(() => { if (!map || !isLoaded || coordinates.length < 3) { return } updatePosition() map.on("move", updatePosition) map.on("zoom", updatePosition) map.on("rotate", updatePosition) map.on("pitch", updatePosition) map.on("resize", updatePosition) return () => { map.off("move", updatePosition) map.off("zoom", updatePosition) map.off("rotate", updatePosition) map.off("pitch", updatePosition) map.off("resize", updatePosition) } }, [map, isLoaded, coordinates, updatePosition]) const borderRadius = rounded === "full" ? "9999px" : `${rounded}px` const style: CSSProperties = { position: "absolute", backdropFilter: `blur(${blur}px)`, WebkitBackdropFilter: `blur(${blur}px)`, backgroundColor, borderRadius, pointerEvents: blockInteraction ? "auto" : "none", cursor: blockInteraction ? "not-allowed" : "default", transition: "opacity 0.2s ease-out", zIndex: 10, } return

} export const MapBlurArea = ({ coordinates, areas, blur = DEFAULT_BLUR_AMOUNT, backgroundColor, rounded = DEFAULT_ROUNDED, blockInteraction = false, }: MapBlurAreaProps) => { if (areas && areas.length > 0) { return ( <> {areas.map((area, index) => { return ( ) })} ) } if (!coordinates || coordinates.length < 3) { return null } return ( ) } 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","mapbox-gl",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/mapbox-gl","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":"mapbox-gl"}]]}]}]]}],["$","$L50",null,{"namespace":"@terrae","registryDependencies":["https://www.terrae.dev/map.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/map/blur-area.tsx","content":"$52","type":"registry:ui","target":"components/ui/map/blur-area.tsx"}],"className":"h-[70svh] min-h-80"}]]}]