Tactical map

1"use client";
2 
3import * as React from "react";
4import { MapPin, Plus, Maximize2, Minus } from "lucide-react";
5 
6import { cn } from "@/lib/utils";
7import { StatusBadge, type StatusBadgeProps } from "@/registry/blacksite/ui/status-badge";
8 
9export interface MapMarker {
10  id: string;
11  label?: string;
12  /** Position in 0..1 normalised coordinates. */
13  x: number;
14  y: number;
15  tone?: "primary" | "success" | "warning" | "danger" | "info" | "gold" | "neutral";
16  status?: StatusBadgeProps["status"];
17  /** Render as a pin (default) or triangle. */
18  shape?: "pin" | "triangle" | "square";
19}
20 
21export interface MapZone {
22  id: string;
23  /** Polygon points in normalised 0..1 coordinates. */
24  points: Array<[number, number]>;
25  label?: string;
26  tone?: "primary" | "warning" | "danger" | "info" | "gold";
27  /** Style of the zone outline. */
28  variant?: "dashed" | "solid";
29}
30 
31interface TacticalMapProps extends React.HTMLAttributes<HTMLDivElement> {
32  markers?: MapMarker[];
33  zones?: MapZone[];
34  /**
35   * Aspect ratio, e.g. "4 / 3" or "16 / 9". Pass `null` (or omit) to let the
36   * map fill its parent — useful when the map is inside a flex container that
37   * already constrains height.
38   */
39  aspectRatio?: string | null;
40  /** Show the zoom controls overlay. */
41  controls?: boolean;
42  /** Background grid type. */
43  grid?: "fine" | "coarse" | "none";
44  /** Optional caption rendered top-left. */
45  caption?: React.ReactNode;
46}
47 
48const toneToColor: Record<NonNullable<MapMarker["tone"]>, string> = {
49  primary: "var(--color-primary)",
50  success: "var(--color-success)",
51  warning: "var(--color-warning)",
52  danger: "var(--color-danger)",
53  info: "var(--color-info)",
54  gold: "var(--color-gold)",
55  neutral: "var(--color-foreground-muted)",
56};
57 
58const TacticalMap = React.forwardRef<HTMLDivElement, TacticalMapProps>(
59  (
60    {
61      className,
62      markers = [],
63      zones = [],
64      aspectRatio = "4 / 3",
65      controls = true,
66      grid = "fine",
67      caption,
68      ...props
69    },
70    ref,
71  ) => {
72    return (
73      <div
74        ref={ref}
75        className={cn(
76          "border-border bg-background-overlay relative w-full overflow-hidden rounded-md border",
77          grid === "fine" && "bg-grid-fine",
78          grid === "coarse" && "bg-grid",
79          className,
80        )}
81        style={aspectRatio ? { aspectRatio } : undefined}
82        {...props}
83      >
84        {/* Subtle radial gradient lighting */}
85        <div
86          aria-hidden
87// … truncated