4f: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"] 50: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"] 51:T86a0,'use client' import { Button } from '@/components/ui/button' import { Checkbox } from '@/components/ui/checkbox' import { cn } from '@/lib/utils' import { ChevronDown, MapPin, Maximize2, SlidersHorizontal, X } from 'lucide-react' import { useCallback, useEffect, useRef, useState } from 'react' import { demoMapLocations, demoMapCenter, demoMapZoom } from './demo/map' /** * Represents a location/hotel to display on the map. * @interface Location * @property {string} [name] - Location name * @property {string} [subtitle] - Subtitle (e.g., neighborhood) * @property {string} [image] - Location image URL * @property {number} [price] - Price value * @property {string} [priceLabel] - Full price text (e.g., "$284 total Jan 29 - Feb 1") * @property {string} [priceSubtext] - Additional price info (e.g., "USD • Includes taxes") * @property {number} [rating] - Rating value (e.g., 8.6) * @property {[number, number]} coordinates - Lat/lng coordinates * @property {string} [link] - External link URL */ export interface Location { name?: string subtitle?: string image?: string price?: number priceLabel?: string priceSubtext?: string rating?: number coordinates: [number, number] // [lat, lng] link?: string } /** * Available map tile styles. * @typedef {"voyager" | "voyager-smooth" | "positron" | "dark-matter" | "openstreetmap"} MapStyle */ export type MapStyle = | 'voyager' | 'voyager-smooth' | 'positron' | 'dark-matter' | 'openstreetmap' // Filter configuration for fullscreen variant /** * Configuration for a single filter section. * @interface FilterSectionConfig */ export interface FilterSectionConfig { /** Unique identifier for this filter (used in filter state). */ id: string /** Display title for the filter section. */ title: string /** Available options for this filter. */ options: string[] /** * Function to check if a location matches the selected filter values. * @param location - The location to check * @param selectedValues - Currently selected filter values * @returns true if location matches, false otherwise */ matchFn?: (location: Location, selectedValues: string[]) => boolean } /** State tracking selected values for each filter by id. */ export type FilterState = Record const createEmptyFilterState = (filters: FilterSectionConfig[]): FilterState => { return filters.reduce((acc, filter) => { acc[filter.id] = [] return acc }, {} as FilterState) } /** * ═══════════════════════════════════════════════════════════════════════════ * MapCarouselProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for configuring an interactive map with a horizontal carousel of * location cards. Clicking a marker or card selects that location. * Supports inline (map with carousel) and fullscreen (split-screen) modes. */ export interface MapCarouselProps { data?: { /** Array of locations to display on the map with price markers. */ locations?: Location[] /** * Map center coordinates as [latitude, longitude]. * @default [37.7899, -122.4034] */ center?: [number, number] /** * Initial zoom level for the map. * @default 14 */ zoom?: number /** * Map tile style (voyager, positron, dark-matter, etc.). * @default "voyager" */ mapStyle?: MapStyle /** Optional title displayed above the list in fullscreen mode. */ title?: string /** * Filter sections configuration for fullscreen mode. * Each filter section has an id, title, options, and optional matchFn. * If not provided, no filters will be shown. */ filters?: FilterSectionConfig[] } actions?: { /** Called when a user selects a location via marker or card click. */ onSelectLocation?: (location: Location) => void } appearance?: { /** * Height of the map container (inline mode only). * @default "504px" */ mapHeight?: string /** * Display mode for the component. * - inline: Map with carousel cards at bottom * - pip: Same as inline (compact view) * - fullscreen: Split-screen with cards on left, filters, map on right * @default "inline" */ displayMode?: 'inline' | 'pip' | 'fullscreen' } } // Hotel card component function HotelCard({ location, isSelected, onClick }: { location: Location isSelected: boolean onClick: () => void }) { return ( ) } // Location card for fullscreen list view function LocationListCard({ location, isSelected, onClick, onMouseEnter, onMouseLeave }: { location: Location isSelected: boolean onClick: () => void onMouseEnter: () => void onMouseLeave: () => void }) { return (

{/* Thumbnail */} {location.image && (

)} {/* Location Info */}

{location.price !== undefined && (

${location.price} total

)} {location.priceSubtext && (

{location.priceSubtext}

)} {location.name && (

{location.name}

)} {location.subtitle && (

{location.subtitle}

)} {location.rating && (

{location.rating}

)}

) } // Filter section component with expandable checkbox list function FilterSection({ title, options, selected, onChange, defaultExpanded = true, showLimit = 5 }: { title: string options: string[] selected: string[] onChange: (values: string[]) => void defaultExpanded?: boolean showLimit?: number }) { const [expanded, setExpanded] = useState(defaultExpanded) const [showAll, setShowAll] = useState(false) const visibleOptions = showAll ? options : options.slice(0, showLimit) const hasMore = options.length > showLimit const toggleOption = (option: string) => { if (selected.includes(option)) { onChange(selected.filter(s => s !== option)) } else { onChange([...selected, option]) } } return (

{visibleOptions.map(option => ( toggleOption(option)} className="h-4 w-4" /> {option} ))} {hasMore && ( )}

) } // Filter panel that slides over the location list function FilterPanel({ isOpen, onClose, filterConfigs, filterState, onFiltersChange, onApply, onReset, resultCount }: { isOpen: boolean onClose: () => void filterConfigs: FilterSectionConfig[] filterState: FilterState onFiltersChange: (filters: FilterState) => void onApply: () => void onReset: () => void resultCount: number }) { const activeFiltersCount = Object.values(filterState).flat().length return ( <> {/* Backdrop */}

{/* Panel */}

{/* Header */}

Filters {activeFiltersCount > 0 && ( {activeFiltersCount} )}

{/* Filter sections - dynamically rendered */}

{filterConfigs.map((config) => ( onFiltersChange({ ...filterState, [config.id]: values })} /> ))}

{/* Footer with actions */}

{activeFiltersCount > 0 && ( )}

) } // Map placeholder shown during SSR or when Leaflet isn't loaded function MapPlaceholder({ height }: { height?: string }) { return (

Loading map...

) } // Vanilla Leaflet map – bypasses react-leaflet entirely to avoid dual-React hook errors. // Uses the leaflet JS API directly via refs so only the consumer's React copy exists. interface LeafletMapConfig { center: [number, number] zoom: number tileConfig: { url: string; attribution: string } locations: Location[] selectedIndex: number | null onSelectLocation: (location: Location, index: number) => void style?: React.CSSProperties } function VanillaLeafletMap({ center, zoom, tileConfig, locations, selectedIndex, onSelectLocation, style }: LeafletMapConfig) { const containerRef = useRef(null) // eslint-disable-next-line @typescript-eslint/no-explicit-any const mapInstanceRef = useRef(null) // eslint-disable-next-line @typescript-eslint/no-explicit-any const leafletRef = useRef(null) // eslint-disable-next-line @typescript-eslint/no-explicit-any const markersRef = useRef([]) const callbackRef = useRef(onSelectLocation) const [ready, setReady] = useState(false) callbackRef.current = onSelectLocation // Initialize the Leaflet map once on mount useEffect(() => { if (!containerRef.current || mapInstanceRef.current) return let cancelled = false ;(async () => { const L = (await import('leaflet')).default if (cancelled || !containerRef.current) return const LEAFLET_CSS_ID = 'leaflet-css-1.9.4' if (!document.getElementById(LEAFLET_CSS_ID)) { const link = document.createElement('link') link.id = LEAFLET_CSS_ID link.rel = 'stylesheet' link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' document.head.appendChild(link) } const map = L.map(containerRef.current, { center, zoom, zoomControl: true, scrollWheelZoom: true }) L.tileLayer(tileConfig.url, { attribution: tileConfig.attribution }).addTo(map) leafletRef.current = L mapInstanceRef.current = map setReady(true) })() return () => { cancelled = true mapInstanceRef.current?.remove() mapInstanceRef.current = null leafletRef.current = null } }, []) // eslint-disable-line react-hooks/exhaustive-deps // Sync markers whenever locations or selection change useEffect(() => { const L = leafletRef.current const map = mapInstanceRef.current if (!L || !map) return markersRef.current.forEach((m: { remove: () => void }) => m.remove()) markersRef.current = [] locations.forEach((location, index) => { const isSelected = selectedIndex === index const icon = L.divIcon({ className: '', html: `

${location.price !== undefined ? `$${location.price}` : location.name ?? 'Location'}

`, iconSize: [60, 24], iconAnchor: [30, 12] }) const marker = L.marker(location.coordinates, { icon, zIndexOffset: isSelected ? 1000 : 0 }) marker.on('click', () => callbackRef.current(location, index)) marker.addTo(map) markersRef.current.push(marker) }) }, [locations, selectedIndex, ready]) return (

{!ready && (

)}

) } /** * Gets the tile configuration for a given map style. * @param {MapStyle} style - The map style to use * @returns {{ url: string; attribution: string }} The tile URL and attribution */ const getTileConfig = (style: MapStyle) => { const configs: Record = { // Voyager - Colorful, detailed, Apple Maps-like (recommended default) voyager: { url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', attribution: '© OpenStreetMap © CARTO' }, // Voyager with labels under roads - cleaner look 'voyager-smooth': { url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}{r}.png', attribution: '© OpenStreetMap © CARTO' }, // Positron - Light, minimal, clean positron: { url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', attribution: '© OpenStreetMap © CARTO' }, // Dark Matter - Dark theme 'dark-matter': { url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', attribution: '© OpenStreetMap © CARTO' }, // OpenStreetMap - Standard, detailed openstreetmap: { url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', attribution: '© OpenStreetMap contributors' } } return configs[style] } /** * An interactive map with a horizontal carousel of location cards. * Clicking a marker or card selects that location and syncs the view. * * Features: * - Leaflet map with multiple tile style options * - Price markers on map locations * - Inline mode: Map with draggable carousel at bottom * - Fullscreen mode: Split-screen with cards on left, filters, map on right * - Location cards with image, rating, and price * - Selection sync between map and carousel/list * - MCP Apps display mode integration * * @component * @example * ```tsx * console.log("Selected:", loc.name), * onExpand: () => console.log("Expand to fullscreen") * }} * appearance={{ * mapHeight: "504px", * displayMode: "inline" * }} * /> * ``` */ export function MapCarousel({ data, actions, appearance }: MapCarouselProps) { const resolvedData: NonNullable = data ?? { locations: demoMapLocations, center: demoMapCenter, zoom: demoMapZoom } const { locations = [], center = [37.7899, -122.4034], // San Francisco zoom = 14, mapStyle = 'voyager', title, filters: filterConfigs = [] } = resolvedData const tileConfig = getTileConfig(mapStyle) const { onSelectLocation } = actions ?? {} const { mapHeight = '504px' } = appearance ?? {} const displayMode = appearance?.displayMode ?? 'inline' const [selectedIndex, setSelectedIndex] = useState(null) const [isDragging, setIsDragging] = useState(false) const [startX, setStartX] = useState(0) const [scrollLeft, setScrollLeft] = useState(0) const [hasDragged, setHasDragged] = useState(false) const carouselRef = useRef(null) const cardRefs = useRef>(new Map()) // Filter state for fullscreen mode - initialized from filter configs const emptyFilterState = createEmptyFilterState(filterConfigs) const [showFilters, setShowFilters] = useState(false) const [filterState, setFilterState] = useState(emptyFilterState) const [appliedFilterState, setAppliedFilterState] = useState(emptyFilterState) // Refs for fullscreen scroll functionality const listContainerRef = useRef(null) const locationItemRefs = useRef>(new Map()) // Filter locations based on applied filters using dynamic matchFn const filterLocations = useCallback((locationsToFilter: Location[], filtersToApply: FilterState): Location[] => { // If no filter configs, return all locations if (filterConfigs.length === 0) return locationsToFilter return locationsToFilter.filter(location => { // Check each filter section for (const config of filterConfigs) { const selectedValues = filtersToApply[config.id] || [] // Skip if no values selected for this filter if (selectedValues.length === 0) continue // Use the matchFn if provided, otherwise skip this filter if (config.matchFn) { if (!config.matchFn(location, selectedValues)) { return false } } } return true }) }, [filterConfigs]) // Scroll to location in list when selected from map const scrollToLocation = useCallback((locationIndex: number) => { const locationElement = locationItemRefs.current.get(locationIndex) if (locationElement && listContainerRef.current) { const container = listContainerRef.current const elementTop = locationElement.offsetTop const elementHeight = locationElement.offsetHeight const containerHeight = container.offsetHeight const scrollTo = elementTop - containerHeight / 2 + elementHeight / 2 container.scrollTo({ top: scrollTo, behavior: 'smooth' }) } }, []) // Handle location selection const handleSelectLocation = useCallback( (location: Location, index: number) => { setSelectedIndex(index) onSelectLocation?.(location) // Scroll to the selected card (inline mode) const cardElement = cardRefs.current.get(index) if (cardElement && carouselRef.current) { const container = carouselRef.current const cardLeft = cardElement.offsetLeft const cardWidth = cardElement.offsetWidth const containerWidth = container.offsetWidth const scrollTo = cardLeft - containerWidth / 2 + cardWidth / 2 container.scrollTo({ left: scrollTo, behavior: 'smooth' }) } }, [onSelectLocation] ) // Handle expand button click — display mode changes handled by host wrapper const handleExpand = () => { // No-op: display mode is managed by the HostAPIProvider } // Drag handlers for carousel const handleMouseDown = useCallback((e: React.MouseEvent) => { if (!carouselRef.current) return setIsDragging(true) setHasDragged(false) setStartX(e.pageX - carouselRef.current.offsetLeft) setScrollLeft(carouselRef.current.scrollLeft) }, []) const handleMouseMove = useCallback( (e: React.MouseEvent) => { if (!isDragging || !carouselRef.current) return e.preventDefault() const x = e.pageX - carouselRef.current.offsetLeft const walk = (x - startX) * 1.5 if (Math.abs(walk) > 5) { setHasDragged(true) } carouselRef.current.scrollLeft = scrollLeft - walk }, [isDragging, startX, scrollLeft] ) const handleMouseUp = useCallback(() => { setIsDragging(false) }, []) const handleMouseLeave = useCallback(() => { setIsDragging(false) }, []) // Touch handlers for mobile const handleTouchStart = useCallback((e: React.TouchEvent) => { if (!carouselRef.current) return setIsDragging(true) setHasDragged(false) setStartX(e.touches[0].pageX - carouselRef.current.offsetLeft) setScrollLeft(carouselRef.current.scrollLeft) }, []) const handleTouchMove = useCallback( (e: React.TouchEvent) => { if (!isDragging || !carouselRef.current) return const x = e.touches[0].pageX - carouselRef.current.offsetLeft const walk = (x - startX) * 1.5 if (Math.abs(walk) > 5) { setHasDragged(true) } carouselRef.current.scrollLeft = scrollLeft - walk }, [isDragging, startX, scrollLeft] ) const handleTouchEnd = useCallback(() => { setIsDragging(false) }, []) // Handle card click (only if not dragging) const handleCardClick = useCallback( (location: Location, index: number) => { if (hasDragged) return handleSelectLocation(location, index) if (location.link) { window.open(location.link, '_blank', 'noopener,noreferrer') } }, [hasDragged, handleSelectLocation] ) // Fullscreen mode - split-screen with cards on left, map on right if (displayMode === 'fullscreen') { const handleLocationHover = (locationIndex: number | null) => { setSelectedIndex(locationIndex) } const handleLocationClick = (location: Location, index: number) => { setSelectedIndex(index) onSelectLocation?.(location) if (location.link) { window.open(location.link, '_blank', 'noopener,noreferrer') } } const handleMapMarkerClick = (location: Location, index: number) => { setSelectedIndex(index) scrollToLocation(index) onSelectLocation?.(location) } const handleFilterButtonClick = () => { setFilterState(appliedFilterState) setShowFilters(true) } const handleApplyFilters = () => { setAppliedFilterState(filterState) setShowFilters(false) } const handleResetFilters = () => { setFilterState(emptyFilterState) setAppliedFilterState(emptyFilterState) } // Get filtered locations const filteredLocations = filterLocations(locations, appliedFilterState) // Get preview count for filter panel const previewFilteredCount = filterLocations(locations, filterState).length // Count of active filters const activeFiltersCount = Object.values(appliedFilterState).flat().length // Check if filters are configured const hasFilters = filterConfigs.length > 0 return (

{/* Left Panel - Location List */}

{/* Header */}

{title && {title}} | {filteredLocations.length}

{hasFilters && ( )}

{/* Scrollable Location List */}

{filteredLocations.length === 0 ? (

No locations match your filters

) : ( filteredLocations.map((location, index) => (

{ if (el) locationItemRefs.current.set(index, el) }} > handleLocationClick(location, index)} onMouseEnter={() => handleLocationHover(index)} onMouseLeave={() => handleLocationHover(null)} />

)) )}

{/* Filter Panel Overlay */} {hasFilters && ( setShowFilters(false)} filterConfigs={filterConfigs} filterState={filterState} onFiltersChange={setFilterState} onApply={handleApplyFilters} onReset={handleResetFilters} resultCount={previewFilteredCount} /> )}

{/* Right Panel - Map */}

) } // Inline and PiP modes - Map with carousel at bottom return (

{/* Expand button in top right */}

{/* Map Section - Full size */} {/* Carousel Section - Overlay at bottom */}

{locations.map((location, index) => (

{ if (el) cardRefs.current.set( index, el as unknown as HTMLButtonElement ) }} > handleCardClick(location, index)} />

))}

) } 52:T7b2,// Demo data for Map category components // This file contains sample data used for component previews and documentation export const demoMapLocations = [ { id: '1', name: 'The Embarcadero Grand', subtitle: 'Embarcadero', image: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=400', price: 329, priceLabel: '$329 per night', priceSubtext: 'USD · Includes taxes and fees', rating: 9.1, coordinates: [37.7935, -122.3938] as [number, number], }, { id: '2', name: 'Hotel Nob Hill', subtitle: 'Nob Hill', image: 'https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=400', price: 275, priceLabel: '$275 per night', priceSubtext: 'USD · Includes taxes and fees', rating: 8.7, coordinates: [37.7925, -122.4138] as [number, number], }, { id: '3', name: 'Marina Bay Suites', subtitle: 'Marina District', image: 'https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?w=400', price: 389, priceLabel: '$389 per night', priceSubtext: 'USD · Includes taxes and fees', rating: 9.4, coordinates: [37.8025, -122.4382] as [number, number], }, { id: '4', name: 'Mission Street Inn', subtitle: 'Mission District', image: 'https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?w=400', price: 189, priceLabel: '$189 per night', priceSubtext: 'USD · Includes taxes and fees', rating: 8.2, coordinates: [37.7599, -122.4148] as [number, number], }, { id: '5', name: 'The Hayes Valley Hotel', subtitle: 'Hayes Valley', image: 'https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?w=400', price: 245, priceLabel: '$245 per night', priceSubtext: 'USD · Includes taxes and fees', rating: 8.9, coordinates: [37.7759, -122.4245] as [number, number], }, ] export const demoMapCenter: [number, number] = [37.7749, -122.4194] export const demoMapZoom = 12 4e:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@manifest","registryDependencies":["button","checkbox"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/map/map-carousel.tsx","content":"$51","type":"registry:block","target":"components/ui/map-carousel.tsx"},{"path":"registry/map/demo/map.ts","content":"$52","type":"registry:lib","target":"components/ui/demo/map.ts"}],"className":"h-[70svh] min-h-80"}]]}]