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:T2d43,"use client"; import type { ComponentProps, ReactNode } from "react"; import { useEffect, useMemo, useRef, useState } from "react"; import { RegionCard } from "@/components/region-card/region-card"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { cn } from "@/lib/utils"; import { decodeRow, MAP_BITS, MAP_COLS, MAP_LAT_MAX, MAP_LAT_MIN, MAP_ROWS, } from "./map-dots"; export interface ServerRegion { /** Region id, e.g. "aws-us-east-1". */ id: string; /** Human-readable name, e.g. "US East 1 (N. Virginia)". */ name: string; /** Cloud provider label used as the name prefix, e.g. "AWS". */ provider?: string; /** Latitude of the datacenter location. */ lat: number; /** Longitude of the datacenter location. */ lng: number; /** Mark a region as unavailable; the marker and option render dimmed. */ disabled?: boolean; } export type RegionSelectProps = Omit< ComponentProps<"div">, "defaultValue" | "onChange" > & { /** Regions to plot and list; order drives the select. */ regions: ServerRegion[]; /** Controlled selected region id. */ value?: string; /** Uncontrolled initial region id. */ defaultValue?: string; onValueChange?: (value: string) => void; /** Placeholder shown in the select before a region is chosen. */ placeholder?: string; /** Hide the select under the map; markers become the only input. */ hideSelect?: boolean; /** Hide the floating region card on the map. */ hideCard?: boolean; /** Extra content rendered inside the region card, e.g. a latency badge. */ cardSuffix?: ReactNode; /** Measured round-trips by region id, e.g. from useRegionPing. */ latencies?: Record; }; /** Full display label: provider prefix plus region name. */ const regionLabel = (region: ServerRegion) => region.provider ? `${region.provider} ${region.name}` : region.name; /** Equirectangular position of a lat/lng pair as percentages of the map. */ const project = (lat: number, lng: number) => ({ left: ((lng + 180) / 360) * 100, top: ((MAP_LAT_MAX - lat) / (MAP_LAT_MAX - MAP_LAT_MIN)) * 100, }); /* ───────────────────────────────────────────────────────── * REGION CARD PLACEMENT * * The card anchors beside the selected marker and flips * quadrant so it always grows toward the map's center — * never covering the marker, never clipping at an edge. * ───────────────────────────────────────────────────────── */ const cardAnchor = (region: ServerRegion) => { const { left, top } = project(region.lat, region.lng); const LEFT_HALF = 50; return { ...(left <= LEFT_HALF ? { left: `${left}%` } : { right: `${100 - left}%` }), top: `${top}%`, }; }; const cardPlacement = (region: ServerRegion) => { const { left, top } = project(region.lat, region.lng); const HALF = 50; const vertical = top <= HALF ? "mt-3" : "-translate-y-full -mt-3"; const horizontal = left <= HALF ? "ml-2" : "mr-2"; return cn(vertical, horizontal); }; /* ───────────────────────────────────────────────────────── * DOT MAP * * The land bitmap renders once to a canvas sized to the * container (device-pixel aware), in the current value of * `color` — so the map re-inks itself on theme flips via a * class observer, and never ships thousands of DOM nodes. * ───────────────────────────────────────────────────────── */ const DOT_RADIUS_RATIO = 0.32; const drawMap = (canvas: HTMLCanvasElement) => { const context = canvas.getContext("2d"); const width = canvas.clientWidth; if (!(context && width)) { return; } const dpr = window.devicePixelRatio || 1; const cell = width / MAP_COLS; const height = cell * MAP_ROWS; canvas.width = Math.round(width * dpr); canvas.height = Math.round(height * dpr); context.scale(dpr, dpr); context.clearRect(0, 0, width, height); context.fillStyle = getComputedStyle(canvas).color; const radius = cell * DOT_RADIUS_RATIO; const TAU = Math.PI * 2; for (let row = 0; row < MAP_ROWS; row += 1) { const bits = decodeRow(MAP_BITS[row] ?? ""); const cy = (row + 0.5) * cell; for (let col = 0; col < MAP_COLS; col += 1) { if (bits[col]) { context.beginPath(); context.arc((col + 0.5) * cell, cy, radius, 0, TAU); context.fill(); } } } }; const DotMap = () => { const ref = useRef(null); useEffect(() => { const canvas = ref.current; if (!canvas) { return; } const redraw = () => drawMap(canvas); redraw(); const resizeObserver = new ResizeObserver(redraw); resizeObserver.observe(canvas); // Re-ink on theme flips: class-based dark mode toggles on . const themeObserver = new MutationObserver(redraw); themeObserver.observe(document.documentElement, { attributeFilter: ["class", "data-theme", "style"], attributes: true, }); return () => { resizeObserver.disconnect(); themeObserver.disconnect(); }; }, []); return (