{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "dotted-map",
	"title": "Dotted Map",
	"type": "registry:block",
	"description": "A world map component rendered with dots, supporting custom markers with staggered entrance animations.",
	"dependencies": [
		"piri"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { createMap } from \"piri\";\n\timport { cn } from \"$UTILS$.js\";\n\n\tinterface Marker extends Record<string, unknown> {\n\t\tlat: number;\n\t\tlng: number;\n\t\tsize?: number;\n\t}\n\n\tinterface Props {\n\t\twidth?: number;\n\t\theight?: number;\n\t\tmapSamples?: number;\n\t\tmarkers?: Marker[];\n\t\tdotColor?: string;\n\t\tmarkerColor?: string;\n\t\tdotRadius?: number;\n\t\tstagger?: boolean;\n\t\tclass?: string;\n\t\tstyle?: string;\n\t}\n\n\tlet {\n\t\twidth = 150,\n\t\theight = 75,\n\t\tmapSamples = 5000,\n\t\tmarkers = [],\n\t\tmarkerColor = \"#FF6900\",\n\t\tdotColor = \"currentColor\",\n\t\tdotRadius = 0.2,\n\t\tstagger = true,\n\t\tclass: className,\n\t\tstyle,\n\t}: Props = $props();\n\n\tlet map = $derived(\n\t\tcreateMap({\n\t\t\twidth,\n\t\t\theight,\n\t\t\tmapSamples,\n\t\t\tradius: dotRadius,\n\t\t\tgrid: stagger ? \"diagonal\" : \"vertical\",\n\t\t})\n\t);\n\n\tlet points = $derived(map.points);\n\tlet processedMarkers = $derived(\n\t\tmap.addMarkers(markers) as Array<{ x: number; y: number; size?: number }>\n\t);\n</script>\n\n<svg\n\tviewBox=\"0 0 {width} {height}\"\n\tclass={cn(\"text-gray-500 dark:text-gray-500\", className)}\n\tstyle=\"width: 100%; height: 100%; {style || ''}\"\n>\n\t{#each points as point}\n\t\t<circle cx={point.x} cy={point.y} r={dotRadius} fill={dotColor} />\n\t{/each}\n\t{#each processedMarkers as marker}\n\t\t<circle cx={marker.x} cy={marker.y} r={marker.size ?? dotRadius} fill={markerColor} />\n\t{/each}\n</svg>\n",
			"type": "registry:component",
			"target": "magic/dotted-map/dotted-map.svelte"
		},
		{
			"content": "export { default as DottedMap } from \"./dotted-map.svelte\";\n",
			"type": "registry:file",
			"target": "magic/dotted-map/index.ts"
		}
	]
}