Replace blocky region graphic with clean world map base and interactive anchors

dashboard/src/components/RegionWorldMap.tsx

@@ -0,0 +1,79 @@
+import worldMapCleanAsset from "../assets/world-map-clean.svg";
+import "../styles/region-world-map.css";
+
+export type RegionKey =
+  | "us-east-1"
+  | "us-west-2"
+  | "eu-west-1"
+  | "eu-central-1"
+  | "ap-southeast-1"
+  | "local";
+
+type RegionAnchor = {
+  x: number;
+  y: number;
+  label: string;
+};
+
+const REGION_ANCHORS: Record<RegionKey, RegionAnchor> = {
+  "us-east-1": { x: 28, y: 36, label: "US East" },
+  "us-west-2": { x: 18, y: 35, label: "US West" },
+  "eu-west-1": { x: 47, y: 31, label: "EU West" },
+  "eu-central-1": { x: 52, y: 30, label: "EU Central" },
+  "ap-southeast-1": { x: 77, y: 56, label: "AP Southeast" },
+  local: { x: 50, y: 84, label: "Local / Unassigned" },
+};
+
+export type RegionWorldMapProps = {
+  selectedRegion?: RegionKey | null;
+  highlightedRegion?: RegionKey | null;
+  onRegionSelect?: (region: RegionKey) => void;
+  showLocalAnchor?: boolean;
+  className?: string;
+};
+
+export function RegionWorldMap({
+  selectedRegion,
+  highlightedRegion,
+  onRegionSelect,
+  showLocalAnchor = true,
+  className,
+}: RegionWorldMapProps) {
+  const keys = (Object.keys(REGION_ANCHORS) as RegionKey[]).filter((key) => showLocalAnchor || key !== "local");
+
+  return (
+    <div className={["region-world-map", className].filter(Boolean).join(" ")}>
+      <img src={worldMapCleanAsset} alt="World map" className="region-world-map__asset" draggable={false} />
+      <svg viewBox="0 0 100 100" className="region-world-map__overlay" aria-hidden="true">
+        {keys.map((key) => {
+          const anchor = REGION_ANCHORS[key];
+          const selected = selectedRegion === key;
+          const highlighted = highlightedRegion === key;
+          return (
+            <g
+              key={key}
+              className="region-world-map__dot-group"
+              style={{ transform: `translate(${anchor.x}px, ${anchor.y}px)` }}
+              onClick={() => onRegionSelect?.(key)}
+            >
+              <circle
+                className="region-world-map__dot-pulse"
+                r={selected || highlighted ? 2.5 : 1.8}
+                opacity={selected || highlighted ? 0.35 : 0.16}
+              />
+              <circle
+                className="region-world-map__dot-core"
+                r={selected ? 1.25 : highlighted ? 1.15 : 1}
+                data-selected={selected ? "true" : "false"}
+                data-highlighted={highlighted ? "true" : "false"}
+              />
+              <title>{anchor.label}</title>
+            </g>
+          );
+        })}
+      </svg>
+    </div>
+  );
+}
+
+export { REGION_ANCHORS };

dashboard/src/styles/region-world-map.css

@@ -0,0 +1,67 @@
+.region-world-map {
+  position: relative;
+  width: 100%;
+  max-width: 760px;
+  margin: 0 auto;
+  border-radius: 14px;
+  overflow: hidden;
+  background: var(--map-bg, color-mix(in oklab, var(--surface, #0f172a) 84%, #0b1220));
+  border: 1px solid var(--map-border, color-mix(in oklab, var(--text, #cbd5e1) 18%, transparent));
+}
+
+.region-world-map__asset {
+  display: block;
+  width: 100%;
+  height: auto;
+  opacity: 0.95;
+  filter: saturate(0.9) contrast(0.95);
+}
+
+.region-world-map__overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.region-world-map__dot-group {
+  cursor: pointer;
+}
+
+.region-world-map__dot-pulse {
+  fill: var(--map-accent-soft, color-mix(in oklab, var(--accent, #38bdf8) 35%, transparent));
+}
+
+.region-world-map__dot-core {
+  fill: var(--map-accent, var(--accent, #38bdf8));
+  stroke: var(--map-dot-stroke, rgba(255, 255, 255, 0.9));
+  stroke-width: 0.25;
+  transition: transform 120ms ease, fill 120ms ease, opacity 120ms ease;
+  transform-origin: center;
+}
+
+.region-world-map__dot-core[data-highlighted="true"] {
+  fill: var(--map-accent-highlight, #22d3ee);
+}
+
+.region-world-map__dot-core[data-selected="true"] {
+  fill: var(--map-accent-selected, #0ea5e9);
+}
+
+.region-world-map__dot-group:hover .region-world-map__dot-core {
+  transform: scale(1.08);
+}
+
+:root[data-theme="light"] .region-world-map,
+:root[data-theme="altius-light"] .region-world-map {
+  --map-bg: color-mix(in oklab, #ffffff 92%, #dbeafe);
+  --map-border: color-mix(in oklab, #0f172a 10%, transparent);
+  --map-dot-stroke: rgba(15, 23, 42, 0.25);
+}
+
+:root[data-theme="altius"],
+:root[data-theme="dark"] {
+  --map-bg: color-mix(in oklab, #111827 88%, #020617);
+  --map-border: color-mix(in oklab, #cbd5e1 14%, transparent);
+  --map-dot-stroke: rgba(241, 245, 249, 0.72);
+}