62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T21ae,'use client' import * as React from 'react' import { Map, MapMarker, type MapVariant } from '@/components/ui/map' import { cn } from '@/lib/utils' import { Globe } from 'lucide-react' export interface MapBubble { id: string name: string lat: number lng: number value: number formattedValue?: string category?: string status?: 'optimal' | 'warning' | 'destructive' | 'neutral' | 'active' color?: string pulse?: boolean description?: string } export interface BubbleMapProps { bubbles?: MapBubble[] minRadius?: number maxRadius?: number showLegend?: boolean legendTitle?: string selectedId?: string onSelectedIdChange?: (id: string | undefined) => void onSelect?: (bubble: MapBubble) => void interactive?: boolean projection?: 'globe' | 'mercator' variant?: MapVariant center?: [number, number] zoom?: number className?: string } const STATUS_COLORS: Record = { optimal: 'oklch(0.65 0.20 145)', active: 'oklch(0.60 0.20 250)', warning: 'oklch(0.75 0.18 65)', destructive: 'oklch(0.60 0.22 25)', neutral: 'oklch(0.65 0.05 240)', } function getBubbleColor(b: MapBubble): string { if (b.color) return b.color if (b.status && STATUS_COLORS[b.status]) return STATUS_COLORS[b.status] return 'oklch(0.60 0.20 250)' } export function BubbleMap({ bubbles = [], minRadius = 10, maxRadius = 42, showLegend = true, legendTitle = 'Scale by Magnitude', selectedId: controlledSelectedId, onSelectedIdChange, onSelect, interactive = true, projection: initialProjection = 'globe', variant = 'dark', center = [0, 20], zoom = 1.5, className, }: BubbleMapProps) { const [internalSelectedId, setInternalSelectedId] = React.useState(controlledSelectedId) const [projection, setProjection] = React.useState<'globe' | 'mercator'>(initialProjection) const activeId = controlledSelectedId !== undefined ? controlledSelectedId : internalSelectedId const values = React.useMemo(() => bubbles.map((b) => b.value), [bubbles]) const minValue = React.useMemo(() => (values.length ? Math.min(...values) : 1), [values]) const maxValue = React.useMemo(() => (values.length ? Math.max(...values) : 100), [values]) const getRadius = React.useCallback( (val: number): number => { if (maxValue === minValue) return (minRadius + maxRadius) / 2 const ratio = Math.sqrt(Math.max(0, val - minValue) / (maxValue - minValue)) return Math.round(minRadius + ratio * (maxRadius - minRadius)) }, [minValue, maxValue, minRadius, maxRadius], ) const activeBubble = React.useMemo(() => bubbles.find((b) => b.id === activeId), [bubbles, activeId]) const handleSelect = (b: MapBubble) => { if (!interactive) return setInternalSelectedId(b.id) onSelectedIdChange?.(b.id) onSelect?.(b) } const toggleProjection = () => { setProjection((prev) => (prev === 'globe' ? 'mercator' : 'globe')) } return (

{bubbles.map((b) => { const radius = getRadius(b.value) const isSelected = activeId === b.id const color = getBubbleColor(b) return (

handleSelect(b)} > {b.pulse && ( )}

{radius >= 20 ? ( {b.formattedValue || b.value} ) : ( )}

) })}

{activeBubble && (

{activeBubble.category || 'Node'}

{activeBubble.name}

Magnitude {activeBubble.formattedValue || activeBubble.value.toLocaleString()}

{activeBubble.description && (

{activeBubble.description}

)}

)} {showLegend && bubbles.length > 0 && (

{legendTitle}

{minValue.toLocaleString()} {maxValue.toLocaleString()}

)}

) } export function projectPoint(lat: number, lng: number): { x: number; y: number } { const x = ((lng + 180) / 360) * 1000 const y = ((90 - lat) / 180) * 500 return { x, y } } export const CONTINENT_LANDMASSES: Array<{ id: string; name: string; d: string }> = [] export default BubbleMap 61:["$","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"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/map.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/components/charts/bubble-map/BubbleMap.tsx","content":"$64","type":"registry:ui","target":"~/components/ui/charts/bubble-map/BubbleMap.tsx"},{"path":"packages/registry-react/components/charts/bubble-map/index.ts","content":"export {\n BubbleMap,\n default as BubbleMapDefault,\n type MapBubble,\n type BubbleMapProps,\n projectPoint,\n CONTINENT_LANDMASSES,\n} from './BubbleMap'\nexport { default } from './BubbleMap'\n","type":"registry:ui","target":"~/components/ui/charts/bubble-map/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]