{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "region-select", "title": "RegionSelect", "description": "Server location picker: an interactive dot-matrix world map synced with an accessible select.", "registryDependencies": [ "utils", "https://ui.neon.com/r/select.json", "https://ui.neon.com/r/neon-tokens.json", "https://ui.neon.com/r/region-card.json" ], "files": [ { "path": "src/components/region-select/region-select.tsx", "content": "\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { RegionCard } from \"@/components/region-card/region-card\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { cn } from \"@/lib/utils\";\n\nimport {\n decodeRow,\n MAP_BITS,\n MAP_COLS,\n MAP_LAT_MAX,\n MAP_LAT_MIN,\n MAP_ROWS,\n} from \"./map-dots\";\n\nexport interface ServerRegion {\n /** Region id, e.g. \"aws-us-east-1\". */\n id: string;\n /** Human-readable name, e.g. \"US East 1 (N. Virginia)\". */\n name: string;\n /** Cloud provider label used as the name prefix, e.g. \"AWS\". */\n provider?: string;\n /** Latitude of the datacenter location. */\n lat: number;\n /** Longitude of the datacenter location. */\n lng: number;\n /** Mark a region as unavailable; the marker and option render dimmed. */\n disabled?: boolean;\n}\n\nexport type RegionSelectProps = Omit<\n ComponentProps<\"div\">,\n \"defaultValue\" | \"onChange\"\n> & {\n /** Regions to plot and list; order drives the select. */\n regions: ServerRegion[];\n /** Controlled selected region id. */\n value?: string;\n /** Uncontrolled initial region id. */\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n /** Placeholder shown in the select before a region is chosen. */\n placeholder?: string;\n /** Hide the select under the map; markers become the only input. */\n hideSelect?: boolean;\n /** Hide the floating region card on the map. */\n hideCard?: boolean;\n /** Extra content rendered inside the region card, e.g. a latency badge. */\n cardSuffix?: ReactNode;\n /** Measured round-trips by region id, e.g. from useRegionPing. */\n latencies?: Record;\n};\n\n/** Full display label: provider prefix plus region name. */\nconst regionLabel = (region: ServerRegion) =>\n region.provider ? `${region.provider} ${region.name}` : region.name;\n\n/** Equirectangular position of a lat/lng pair as percentages of the map. */\nconst project = (lat: number, lng: number) => ({\n left: ((lng + 180) / 360) * 100,\n top: ((MAP_LAT_MAX - lat) / (MAP_LAT_MAX - MAP_LAT_MIN)) * 100,\n});\n\n/* ─────────────────────────────────────────────────────────\n * REGION CARD PLACEMENT\n *\n * The card anchors beside the selected marker and flips\n * quadrant so it always grows toward the map's center —\n * never covering the marker, never clipping at an edge.\n * ───────────────────────────────────────────────────────── */\nconst cardAnchor = (region: ServerRegion) => {\n const { left, top } = project(region.lat, region.lng);\n const LEFT_HALF = 50;\n\n return {\n ...(left <= LEFT_HALF ? { left: `${left}%` } : { right: `${100 - left}%` }),\n top: `${top}%`,\n };\n};\n\nconst cardPlacement = (region: ServerRegion) => {\n const { left, top } = project(region.lat, region.lng);\n const HALF = 50;\n const vertical = top <= HALF ? \"mt-3\" : \"-translate-y-full -mt-3\";\n const horizontal = left <= HALF ? \"ml-2\" : \"mr-2\";\n\n return cn(vertical, horizontal);\n};\n\n/* ─────────────────────────────────────────────────────────\n * DOT MAP\n *\n * The land bitmap renders once to a canvas sized to the\n * container (device-pixel aware), in the current value of\n * `color` — so the map re-inks itself on theme flips via a\n * class observer, and never ships thousands of DOM nodes.\n * ───────────────────────────────────────────────────────── */\nconst DOT_RADIUS_RATIO = 0.32;\n\nconst drawMap = (canvas: HTMLCanvasElement) => {\n const context = canvas.getContext(\"2d\");\n const width = canvas.clientWidth;\n\n if (!(context && width)) {\n return;\n }\n\n const dpr = window.devicePixelRatio || 1;\n const cell = width / MAP_COLS;\n const height = cell * MAP_ROWS;\n\n canvas.width = Math.round(width * dpr);\n canvas.height = Math.round(height * dpr);\n context.scale(dpr, dpr);\n context.clearRect(0, 0, width, height);\n context.fillStyle = getComputedStyle(canvas).color;\n\n const radius = cell * DOT_RADIUS_RATIO;\n const TAU = Math.PI * 2;\n\n for (let row = 0; row < MAP_ROWS; row += 1) {\n const bits = decodeRow(MAP_BITS[row] ?? \"\");\n const cy = (row + 0.5) * cell;\n\n for (let col = 0; col < MAP_COLS; col += 1) {\n if (bits[col]) {\n context.beginPath();\n context.arc((col + 0.5) * cell, cy, radius, 0, TAU);\n context.fill();\n }\n }\n }\n};\n\nconst DotMap = () => {\n const ref = useRef(null);\n\n useEffect(() => {\n const canvas = ref.current;\n\n if (!canvas) {\n return;\n }\n\n const redraw = () => drawMap(canvas);\n\n redraw();\n\n const resizeObserver = new ResizeObserver(redraw);\n resizeObserver.observe(canvas);\n\n // Re-ink on theme flips: class-based dark mode toggles on .\n const themeObserver = new MutationObserver(redraw);\n themeObserver.observe(document.documentElement, {\n attributeFilter: [\"class\", \"data-theme\", \"style\"],\n attributes: true,\n });\n\n return () => {\n resizeObserver.disconnect();\n themeObserver.disconnect();\n };\n }, []);\n\n return (\n \n );\n};\n\n/* ─────────────────────────────────────────────────────────\n * MARKERS\n *\n * Each region is a real button on the map: hover or focus\n * lifts a label pill above it, click selects. The selected\n * marker glows primary with a slow ping halo (static under\n * reduced motion). The select below stays the keyboard and\n * screen-reader path, so markers skip roving-focus theater.\n * ───────────────────────────────────────────────────────── */\n/** Flips the hover pill away from nearby map edges so it never clips. */\nconst pillPlacement = (left: number, top: number) => {\n const EDGE = 20;\n const NEAR_TOP = 18;\n const horizontal = (() => {\n if (left <= EDGE) {\n return \"-left-1\";\n }\n\n if (left >= 100 - EDGE) {\n return \"-right-1\";\n }\n\n return \"-translate-x-1/2 left-1/2\";\n })();\n const vertical = top <= NEAR_TOP ? \"top-full mt-1.5\" : \"bottom-full mb-1.5\";\n\n return cn(horizontal, vertical);\n};\n\nconst RegionMarker = ({\n onSelect,\n region,\n selected,\n}: {\n onSelect: () => void;\n region: ServerRegion;\n selected: boolean;\n}) => {\n const { left, top } = project(region.lat, region.lng);\n\n return (\n \n {selected ? (\n \n ) : null}\n \n