@zendir/ui 0.1.0

package/dist/react/charts/GroundTrackMap.js

@@ -0,0 +1,1123 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useMemo, useEffect, useCallback } from "react";
+import { AstroIcon } from "../core/AstroIcon.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const STATUS_COLOR_MAP = {
+  normal: "#56f000",
+  // Green — Astro UXDS "Normal"
+  standby: "#2dccff",
+  // Cyan — Astro UXDS "Standby"
+  caution: "#fce83a",
+  // Yellow — Astro UXDS "Caution"
+  serious: "#ffb302",
+  // Orange — Astro UXDS "Serious"
+  critical: "#ff3838",
+  // Red — Astro UXDS "Critical"
+  off: "#a4abb6"
+  // Grey — Astro UXDS "Off"
+};
+const DEFAULT_TRACK_COLORS = [
+  "#2dccff",
+  "#3E3CFF",
+  "#9D70FF",
+  "#56f000",
+  "#fce83a",
+  "#ff7849",
+  "#2dd4bf",
+  "#ff3838"
+];
+const WORLD_MAP_PATHS = [
+  // North America
+  "M-168,70 L-168,60 L-145,63 L-140,58 L-130,55 L-125,49 L-122,48 L-117,33 L-115,28 L-105,22 L-97,18 L-88,20 L-82,25 L-82,30 L-80,32 L-67,47 L-60,46 L-55,52 L-56,60 L-65,70 L-85,73 L-100,72 L-130,70 L-168,70",
+  // South America
+  "M-82,12 L-77,8 L-73,11 L-65,5 L-60,5 L-50,0 L-45,-5 L-43,-10 L-39,-15 L-38,-22 L-40,-25 L-43,-30 L-48,-33 L-50,-40 L-55,-48 L-57,-52 L-68,-55 L-73,-50 L-78,-42 L-80,-20 L-78,-5 L-82,12",
+  // Europe + Africa
+  "M-10,72 L-5,60 L-5,48 L0,44 L3,44 L5,48 L8,44 L3,37 L-5,35 L-17,28 L-17,15 L-8,10 L-4,5 L5,5 L10,2 L15,-3 L22,-12 L28,-22 L33,-30 L30,-35 L22,-35 L18,-27 L12,-20 L8,-10 L3,0 L-5,10 L-12,15 L-15,20 L-13,32 L-10,38 L0,48 L8,55 L15,58 L20,60 L25,65 L30,70 L-10,72",
+  // Asia  
+  "M30,70 L40,65 L50,60 L60,55 L70,50 L80,45 L90,45 L100,40 L105,35 L110,30 L115,25 L120,30 L125,35 L130,40 L135,45 L140,50 L145,55 L150,60 L155,65 L160,68 L170,70 L180,70 L180,72 L30,72 L30,70",
+  // Australia
+  "M112,-12 L118,-14 L125,-15 L132,-13 L138,-15 L143,-17 L148,-20 L152,-23 L153,-28 L150,-33 L147,-37 L140,-38 L134,-36 L130,-33 L126,-30 L120,-30 L116,-28 L114,-24 L113,-18 L112,-12",
+  // Antarctica
+  "M-180,-72 L180,-72 L180,-90 L-180,-90 Z"
+];
+function drawCoverageEllipse(ctx, centerLat, centerLon, radiusDeg, W, H, lonToX, latToY, numSegments = 72) {
+  const lat0 = centerLat * Math.PI / 180;
+  const lon0 = centerLon * Math.PI / 180;
+  const d = radiusDeg * Math.PI / 180;
+  const cx = lonToX(centerLon, W);
+  const cy = latToY(centerLat, H);
+  const pxPerDegLon = W / 360;
+  const pxPerDegLat = H / 180;
+  ctx.beginPath();
+  for (let i = 0; i <= numSegments; i++) {
+    const bearing = i / numSegments * 2 * Math.PI;
+    const sinLat = Math.sin(lat0) * Math.cos(d) + Math.cos(lat0) * Math.sin(d) * Math.cos(bearing);
+    const lat = Math.asin(Math.max(-1, Math.min(1, sinLat)));
+    const lon = lon0 + Math.atan2(
+      Math.sin(bearing) * Math.sin(d) * Math.cos(lat0),
+      Math.cos(d) - Math.sin(lat0) * sinLat
+    );
+    const pLatDeg = lat * 180 / Math.PI;
+    const pLonDeg = lon * 180 / Math.PI;
+    const dLon = pLonDeg - centerLon;
+    const dLat = pLatDeg - centerLat;
+    const px = cx + dLon * pxPerDegLon;
+    const py = cy - dLat * pxPerDegLat;
+    if (i === 0) ctx.moveTo(px, py);
+    else ctx.lineTo(px, py);
+  }
+  ctx.closePath();
+}
+function calculateTerminator(date, numPoints = 72) {
+  const dayOfYear = Math.floor((date.getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 864e5);
+  const declination = -23.44 * Math.cos(2 * Math.PI / 365 * (dayOfYear + 10));
+  const decRad = declination * Math.PI / 180;
+  const hourAngle = (date.getUTCHours() + date.getUTCMinutes() / 60) / 24 * 360 - 180;
+  const points = [];
+  for (let i = 0; i <= numPoints; i++) {
+    const latRad = (i / numPoints * 180 - 90) * (Math.PI / 180);
+    const cosH = -Math.tan(latRad) * Math.tan(decRad);
+    let lon;
+    if (cosH < -1) lon = hourAngle + 180;
+    else if (cosH > 1) lon = hourAngle;
+    else lon = hourAngle + Math.acos(cosH) * 180 / Math.PI;
+    while (lon > 180) lon -= 360;
+    while (lon < -180) lon += 360;
+    points.push({ lat: i / numPoints * 180 - 90, lon });
+  }
+  return points;
+}
+function GroundTrackMap({
+  groundTrack,
+  satellites = [],
+  groundStations = [],
+  accessMask,
+  teamPaths,
+  showTerminator = true,
+  showGrid = true,
+  showLegend = true,
+  showEquator = true,
+  showRecenterButton = false,
+  isLoading = false,
+  emptyMessage = "No orbital data available",
+  width = "100%",
+  height = "100%",
+  minHeight = "400px",
+  defaultCenter,
+  defaultZoom,
+  className = "",
+  onSatelliteClick,
+  onStationClick,
+  mapProvider = "leaflet",
+  tileUrl
+}) {
+  const { tokens } = useTheme();
+  const canvasRef = useRef(null);
+  const containerRef = useRef(null);
+  const [tooltip, setTooltip] = useState(null);
+  const [_viewOffset, setViewOffset] = useState({ x: 0, y: 0 });
+  const allSatellites = useMemo(() => {
+    if (satellites.length > 0) return satellites;
+    if (teamPaths && teamPaths.length > 0) {
+      return teamPaths.map((tp, idx) => ({
+        id: `team-${idx}`,
+        name: tp.name,
+        color: tp.color,
+        status: "normal",
+        groundTrack: tp.positions.filter((p) => p.lat != null && p.lng != null).map((p) => ({
+          latitude: p.lat,
+          longitude: p.lng,
+          altitude: p.altitude ?? 0,
+          timestamp: p.time != null ? new Date(p.time * 1e3).toISOString() : (/* @__PURE__ */ new Date()).toISOString()
+        }))
+      }));
+    }
+    if (groundTrack && groundTrack.length > 0) {
+      return [{
+        id: "primary",
+        name: "Satellite",
+        groundTrack,
+        status: "normal",
+        accessMask
+      }];
+    }
+    return [];
+  }, [satellites, groundTrack, accessMask, teamPaths]);
+  const leafletDefaultCenter = useMemo(() => defaultCenter ?? [20, 0], [defaultCenter]);
+  const leafletDefaultZoom = useMemo(() => defaultZoom ?? 2, [defaultZoom]);
+  const [LeafletMap, setLeafletMap] = useState(null);
+  const [leafletFailed, setLeafletFailed] = useState(false);
+  useEffect(() => {
+    if (mapProvider !== "leaflet") return;
+    import("./GroundTrackMapLeaflet.js").then((m) => setLeafletMap(() => m.GroundTrackMapLeaflet)).catch((err) => {
+      console.warn('[GroundTrackMap] Leaflet backend failed to load. Install "leaflet" and ensure it is resolvable. Falling back to static canvas.', err);
+      setLeafletFailed(true);
+    });
+  }, [mapProvider]);
+  const handleRecenter = useCallback(() => {
+    setViewOffset({ x: 0, y: 0 });
+  }, []);
+  const COLORS = useMemo(() => ({
+    background: tokens.colors.background.base,
+    grid: tokens.colors.border.muted,
+    text: tokens.colors.text.secondary,
+    accent: tokens.colors.accent.primary,
+    land: "rgba(30, 40, 58, 0.92)",
+    ocean: tokens.colors.background.base,
+    night: "rgba(0, 10, 40, 0.35)",
+    equator: "rgba(88, 166, 255, 0.25)"
+  }), [tokens]);
+  const lonToX = useCallback((lon, w) => {
+    let normalizedLon = lon;
+    while (normalizedLon > 180) normalizedLon -= 360;
+    while (normalizedLon < -180) normalizedLon += 360;
+    return (normalizedLon + 180) / 360 * w;
+  }, []);
+  const latToY = useCallback((lat, h) => {
+    return (90 - lat) / 180 * h;
+  }, []);
+  const draw = useCallback(() => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const dpr = window.devicePixelRatio || 1;
+    const rect = container.getBoundingClientRect();
+    const W = rect.width;
+    const H = typeof height === "number" ? height : rect.height || 400;
+    canvas.width = W * dpr;
+    canvas.height = H * dpr;
+    canvas.style.width = `${W}px`;
+    canvas.style.height = `${H}px`;
+    ctx.scale(dpr, dpr);
+    ctx.fillStyle = COLORS.background;
+    ctx.fillRect(0, 0, W, H);
+    if (showTerminator) {
+      const terminator = calculateTerminator(/* @__PURE__ */ new Date());
+      ctx.fillStyle = COLORS.night;
+      ctx.beginPath();
+      ctx.moveTo(W, 0);
+      ctx.lineTo(W, H);
+      let prevRX = W;
+      for (let i = terminator.length - 1; i >= 0; i--) {
+        const x = lonToX(terminator[i].lon, W);
+        const y = latToY(terminator[i].lat, H);
+        if (Math.abs(x - prevRX) > W * 0.5 && i < terminator.length - 1) {
+          const edgeX = prevRX > W / 2 ? W : 0;
+          ctx.lineTo(edgeX, y);
+          ctx.closePath();
+          ctx.fill();
+          ctx.beginPath();
+          ctx.moveTo(W, y);
+        }
+        ctx.lineTo(x, y);
+        prevRX = x;
+      }
+      ctx.closePath();
+      ctx.fill();
+      const normLon = (l) => {
+        let r = l;
+        while (r > 180) r -= 360;
+        while (r < -180) r += 360;
+        return r;
+      };
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.lineTo(0, H);
+      let prevLX = 0;
+      for (let i = terminator.length - 1; i >= 0; i--) {
+        const sunriseLon = normLon(terminator[i].lon - 180);
+        const x = lonToX(sunriseLon, W);
+        const y = latToY(terminator[i].lat, H);
+        if (Math.abs(x - prevLX) > W * 0.5 && i < terminator.length - 1) {
+          const edgeX = prevLX < W / 2 ? 0 : W;
+          ctx.lineTo(edgeX, y);
+          ctx.closePath();
+          ctx.fill();
+          ctx.beginPath();
+          ctx.moveTo(0, y);
+        }
+        ctx.lineTo(x, y);
+        prevLX = x;
+      }
+      ctx.closePath();
+      ctx.fill();
+    }
+    ctx.fillStyle = COLORS.land;
+    ctx.strokeStyle = "rgba(100, 120, 160, 0.25)";
+    ctx.lineWidth = 1;
+    for (const pathStr of WORLD_MAP_PATHS) {
+      const commands = pathStr.split(" ");
+      ctx.beginPath();
+      for (const cmd of commands) {
+        if (cmd.startsWith("M") || cmd.startsWith("L")) {
+          const coords = cmd.substring(1).split(",");
+          const lon = parseFloat(coords[0]);
+          const lat = parseFloat(coords[1]);
+          const x = lonToX(lon, W);
+          const y = latToY(lat, H);
+          if (cmd.startsWith("M")) ctx.moveTo(x, y);
+          else ctx.lineTo(x, y);
+        } else if (cmd === "Z") {
+          ctx.closePath();
+        }
+      }
+      ctx.fill();
+      ctx.stroke();
+    }
+    if (showGrid) {
+      ctx.strokeStyle = COLORS.grid;
+      ctx.lineWidth = 0.4;
+      for (let lon = -180; lon <= 180; lon += 30) {
+        const x = lonToX(lon, W);
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, H);
+        ctx.stroke();
+      }
+      for (let lat = -90; lat <= 90; lat += 30) {
+        const y = latToY(lat, H);
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(W, y);
+        ctx.stroke();
+      }
+    }
+    if (showEquator) {
+      const eqY = latToY(0, H);
+      ctx.strokeStyle = COLORS.equator;
+      ctx.lineWidth = 1;
+      ctx.setLineDash([6, 4]);
+      ctx.beginPath();
+      ctx.moveTo(0, eqY);
+      ctx.lineTo(W, eqY);
+      ctx.stroke();
+      ctx.setLineDash([]);
+    }
+    for (const gs of groundStations) {
+      const enhanced = gs;
+      if (enhanced.showCoverage && enhanced.coverageRadius) {
+        const statusColor = STATUS_COLOR_MAP[enhanced.status || "standby"] || STATUS_COLOR_MAP.standby;
+        drawCoverageEllipse(ctx, gs.latitude, gs.longitude, enhanced.coverageRadius, W, H, lonToX, latToY);
+        ctx.fillStyle = `${statusColor}15`;
+        ctx.fill();
+        ctx.strokeStyle = `${statusColor}40`;
+        ctx.lineWidth = 1;
+        ctx.setLineDash([4, 3]);
+        ctx.stroke();
+        ctx.setLineDash([]);
+      }
+    }
+    for (const gs of groundStations) {
+      const enhanced = gs;
+      const x = lonToX(gs.longitude, W);
+      const y = latToY(gs.latitude, H);
+      const status = enhanced.status || "standby";
+      const statusColor = STATUS_COLOR_MAP[status] || STATUS_COLOR_MAP.standby;
+      const stationType = enhanced.type || "dish";
+      const iconSize = 20;
+      const halfIcon = iconSize / 2;
+      ctx.save();
+      ctx.translate(x, y);
+      ctx.beginPath();
+      ctx.arc(0, 0, halfIcon + 2, 0, Math.PI * 2);
+      ctx.fillStyle = `${statusColor}18`;
+      ctx.fill();
+      ctx.beginPath();
+      ctx.arc(0, 0, halfIcon, 0, Math.PI * 2);
+      ctx.fillStyle = "rgba(15, 23, 42, 0.85)";
+      ctx.fill();
+      ctx.strokeStyle = `${statusColor}66`;
+      ctx.lineWidth = 1.5;
+      ctx.stroke();
+      ctx.save();
+      const iconScale = iconSize / 24;
+      ctx.translate(-halfIcon, -halfIcon);
+      ctx.scale(iconScale, iconScale);
+      if (stationType === "dish" || stationType === "omni") {
+        ctx.strokeStyle = statusColor;
+        ctx.fillStyle = statusColor;
+        ctx.lineWidth = 2 / iconScale;
+        ctx.beginPath();
+        ctx.arc(12, 12, 10, Math.PI * 1.25, Math.PI * 1.75);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(12, 12, 6.5, Math.PI * 1.2, Math.PI * 1.8);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(12, 12, 3, Math.PI * 1.15, Math.PI * 1.85);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(12, 12, 1.5, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.lineWidth = 1.5 / iconScale;
+        ctx.beginPath();
+        ctx.moveTo(12, 14);
+        ctx.lineTo(12, 20);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(8, 20);
+        ctx.lineTo(16, 20);
+        ctx.stroke();
+      } else if (stationType === "phased-array") {
+        ctx.strokeStyle = statusColor;
+        ctx.fillStyle = statusColor;
+        ctx.lineWidth = 1.5 / iconScale;
+        ctx.strokeRect(5, 4, 14, 12);
+        for (let gx = 8; gx <= 16; gx += 4) {
+          ctx.beginPath();
+          ctx.moveTo(gx, 4);
+          ctx.lineTo(gx, 16);
+          ctx.stroke();
+        }
+        for (let gy = 8; gy <= 12; gy += 4) {
+          ctx.beginPath();
+          ctx.moveTo(5, gy);
+          ctx.lineTo(19, gy);
+          ctx.stroke();
+        }
+        ctx.beginPath();
+        ctx.moveTo(12, 16);
+        ctx.lineTo(12, 21);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(8, 21);
+        ctx.lineTo(16, 21);
+        ctx.stroke();
+      } else {
+        ctx.strokeStyle = statusColor;
+        ctx.fillStyle = statusColor;
+        ctx.lineWidth = 2 / iconScale;
+        ctx.beginPath();
+        ctx.arc(10, 12, 7, Math.PI * 0.8, Math.PI * 1.7);
+        ctx.stroke();
+        ctx.lineWidth = 1.5 / iconScale;
+        ctx.beginPath();
+        ctx.moveTo(10, 12);
+        ctx.lineTo(16, 6);
+        ctx.stroke();
+        ctx.lineWidth = 1.2 / iconScale;
+        ctx.beginPath();
+        ctx.arc(17, 5, 2.5, Math.PI * 1.2, Math.PI * 1.7);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(17, 5, 4.5, Math.PI * 1.15, Math.PI * 1.75);
+        ctx.stroke();
+        ctx.lineWidth = 1.5 / iconScale;
+        ctx.beginPath();
+        ctx.moveTo(10, 14);
+        ctx.lineTo(10, 20);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(6, 20);
+        ctx.lineTo(14, 20);
+        ctx.stroke();
+      }
+      ctx.restore();
+      const badgeX = -halfIcon + 1;
+      const badgeY = -halfIcon + 1;
+      const badgeSize = 7;
+      ctx.beginPath();
+      ctx.arc(badgeX, badgeY, badgeSize / 2 + 2, 0, Math.PI * 2);
+      ctx.fillStyle = "rgba(15, 23, 42, 0.9)";
+      ctx.fill();
+      ctx.fillStyle = statusColor;
+      ctx.strokeStyle = statusColor;
+      ctx.lineWidth = 1;
+      if (status === "normal") {
+        ctx.beginPath();
+        ctx.arc(badgeX, badgeY, badgeSize / 2, 0, Math.PI * 2);
+        ctx.fill();
+      } else if (status === "standby") {
+        ctx.beginPath();
+        ctx.arc(badgeX, badgeY, badgeSize / 2 - 0.5, 0, Math.PI * 2);
+        ctx.lineWidth = 2;
+        ctx.stroke();
+      } else if (status === "caution") {
+        const hs = badgeSize / 2;
+        ctx.fillRect(badgeX - hs, badgeY - hs, badgeSize, badgeSize);
+      } else if (status === "serious") {
+        const hs = badgeSize / 2;
+        ctx.beginPath();
+        ctx.moveTo(badgeX, badgeY - hs);
+        ctx.lineTo(badgeX + hs, badgeY);
+        ctx.lineTo(badgeX, badgeY + hs);
+        ctx.lineTo(badgeX - hs, badgeY);
+        ctx.closePath();
+        ctx.fill();
+      } else if (status === "critical") {
+        const hs = badgeSize / 2;
+        ctx.beginPath();
+        ctx.moveTo(badgeX, badgeY + hs);
+        ctx.lineTo(badgeX + hs, badgeY - hs);
+        ctx.lineTo(badgeX - hs, badgeY - hs);
+        ctx.closePath();
+        ctx.fill();
+      } else {
+        ctx.beginPath();
+        ctx.arc(badgeX, badgeY, badgeSize / 3, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.restore();
+      ctx.fillStyle = COLORS.text;
+      ctx.font = '9px "Inter", system-ui, sans-serif';
+      ctx.textAlign = "center";
+      ctx.fillText(gs.name.length > 14 ? gs.name.slice(0, 14) + "…" : gs.name, x, y + halfIcon + 12);
+    }
+    allSatellites.forEach((sat, satIdx) => {
+      const track = sat.groundTrack;
+      if (!track || track.length === 0) return;
+      const trackColor = sat.color || DEFAULT_TRACK_COLORS[satIdx % DEFAULT_TRACK_COLORS.length];
+      const futureIdx = sat.futureTrackIndex ?? track.length;
+      ctx.strokeStyle = trackColor;
+      ctx.lineWidth = 2;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      ctx.setLineDash([]);
+      ctx.beginPath();
+      let prevX = lonToX(track[0].longitude, W);
+      let prevY = latToY(track[0].latitude, H);
+      ctx.moveTo(prevX, prevY);
+      for (let i = 1; i < Math.min(futureIdx, track.length); i++) {
+        const x = lonToX(track[i].longitude, W);
+        const y = latToY(track[i].latitude, H);
+        const crossesDateLine = Math.abs(x - prevX) > W / 2;
+        if (crossesDateLine) {
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(x, y);
+        } else {
+          ctx.lineTo(x, y);
+        }
+        prevX = x;
+        prevY = y;
+      }
+      ctx.stroke();
+      if (futureIdx < track.length) {
+        ctx.strokeStyle = `${trackColor}88`;
+        ctx.lineWidth = 1.5;
+        ctx.setLineDash([6, 4]);
+        ctx.beginPath();
+        ctx.moveTo(lonToX(track[futureIdx].longitude, W), latToY(track[futureIdx].latitude, H));
+        let fpx = lonToX(track[futureIdx].longitude, W);
+        for (let i = futureIdx + 1; i < track.length; i++) {
+          const x = lonToX(track[i].longitude, W);
+          const y = latToY(track[i].latitude, H);
+          if (Math.abs(x - fpx) > W / 2) {
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+          } else {
+            ctx.lineTo(x, y);
+          }
+          fpx = x;
+        }
+        ctx.stroke();
+        ctx.setLineDash([]);
+      }
+      if (sat.accessMask && sat.accessMask.some(Boolean)) {
+        ctx.strokeStyle = STATUS_COLOR_MAP.normal;
+        ctx.lineWidth = 3;
+        ctx.setLineDash([]);
+        ctx.beginPath();
+        let drawing = false;
+        let apx = lonToX(track[0].longitude, W);
+        for (let i = 0; i < track.length; i++) {
+          const x = lonToX(track[i].longitude, W);
+          const y = latToY(track[i].latitude, H);
+          const active = sat.accessMask[i];
+          const crossesDateLine = i > 0 && Math.abs(x - apx) > W / 2;
+          if (active && !crossesDateLine) {
+            if (!drawing) {
+              ctx.moveTo(x, y);
+              drawing = true;
+            } else ctx.lineTo(x, y);
+          } else {
+            if (drawing) {
+              ctx.stroke();
+              ctx.beginPath();
+              drawing = false;
+            }
+          }
+          apx = x;
+        }
+        if (drawing) ctx.stroke();
+      }
+      if (sat.passMarkers) {
+        for (const marker of sat.passMarkers) {
+          const mx = lonToX(marker.longitude, W);
+          const my = latToY(marker.latitude, H);
+          const markerColor = marker.type === "aos" ? STATUS_COLOR_MAP.normal : STATUS_COLOR_MAP.critical;
+          ctx.save();
+          ctx.translate(mx, my);
+          ctx.beginPath();
+          if (marker.type === "aos") {
+            ctx.moveTo(0, -6);
+            ctx.lineTo(4, 2);
+            ctx.lineTo(-4, 2);
+          } else {
+            ctx.moveTo(0, 6);
+            ctx.lineTo(4, -2);
+            ctx.lineTo(-4, -2);
+          }
+          ctx.closePath();
+          ctx.fillStyle = markerColor;
+          ctx.fill();
+          ctx.restore();
+          if (marker.label) {
+            ctx.fillStyle = markerColor;
+            ctx.font = '8px "Inter", system-ui, sans-serif';
+            ctx.textAlign = "center";
+            ctx.fillText(marker.label, mx, marker.type === "aos" ? my - 9 : my + 13);
+          }
+        }
+      }
+      if (sat.showFootprint && sat.footprintRadius) {
+        const lastPt = futureIdx > 0 ? track[Math.min(futureIdx - 1, track.length - 1)] : track[track.length - 1];
+        drawCoverageEllipse(ctx, lastPt.latitude, lastPt.longitude, sat.footprintRadius, W, H, lonToX, latToY);
+        ctx.fillStyle = `${trackColor}12`;
+        ctx.fill();
+        ctx.strokeStyle = `${trackColor}50`;
+        ctx.lineWidth = 1;
+        ctx.setLineDash([3, 3]);
+        ctx.stroke();
+        ctx.setLineDash([]);
+      }
+      const currentIdx = futureIdx > 0 ? Math.min(futureIdx - 1, track.length - 1) : track.length - 1;
+      const current = track[currentIdx];
+      const cx = lonToX(current.longitude, W);
+      const cy = latToY(current.latitude, H);
+      const satStatus = sat.status || "normal";
+      const statusColor = STATUS_COLOR_MAP[satStatus] || STATUS_COLOR_MAP.normal;
+      const satIconSize = 22;
+      const satHalf = satIconSize / 2;
+      ctx.beginPath();
+      ctx.arc(cx, cy, satHalf + 6, 0, Math.PI * 2);
+      ctx.fillStyle = `${statusColor}12`;
+      ctx.fill();
+      ctx.beginPath();
+      ctx.arc(cx, cy, satHalf + 3, 0, Math.PI * 2);
+      ctx.fillStyle = `${statusColor}20`;
+      ctx.fill();
+      ctx.save();
+      ctx.translate(cx, cy);
+      ctx.beginPath();
+      ctx.arc(0, 0, satHalf, 0, Math.PI * 2);
+      ctx.fillStyle = "rgba(15, 23, 42, 0.88)";
+      ctx.fill();
+      ctx.strokeStyle = `${statusColor}88`;
+      ctx.lineWidth = 1.5;
+      ctx.stroke();
+      ctx.fillStyle = statusColor;
+      const bw = 5, bh = 3.5;
+      ctx.beginPath();
+      ctx.moveTo(-bw / 2 + 0.5, -bh / 2);
+      ctx.lineTo(bw / 2 - 0.5, -bh / 2);
+      ctx.arcTo(bw / 2, -bh / 2, bw / 2, -bh / 2 + 0.5, 0.5);
+      ctx.lineTo(bw / 2, bh / 2 - 0.5);
+      ctx.arcTo(bw / 2, bh / 2, bw / 2 - 0.5, bh / 2, 0.5);
+      ctx.lineTo(-bw / 2 + 0.5, bh / 2);
+      ctx.arcTo(-bw / 2, bh / 2, -bw / 2, bh / 2 - 0.5, 0.5);
+      ctx.lineTo(-bw / 2, -bh / 2 + 0.5);
+      ctx.arcTo(-bw / 2, -bh / 2, -bw / 2 + 0.5, -bh / 2, 0.5);
+      ctx.closePath();
+      ctx.fill();
+      ctx.fillStyle = `${statusColor}BB`;
+      ctx.fillRect(-satHalf + 2, -2, 5, 4);
+      ctx.strokeStyle = `${statusColor}55`;
+      ctx.lineWidth = 0.5;
+      ctx.beginPath();
+      ctx.moveTo(-satHalf + 4.5, -2);
+      ctx.lineTo(-satHalf + 4.5, 2);
+      ctx.stroke();
+      ctx.fillStyle = `${statusColor}BB`;
+      ctx.fillRect(satHalf - 7, -2, 5, 4);
+      ctx.strokeStyle = `${statusColor}55`;
+      ctx.beginPath();
+      ctx.moveTo(satHalf - 4.5, -2);
+      ctx.lineTo(satHalf - 4.5, 2);
+      ctx.stroke();
+      ctx.strokeStyle = statusColor;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(-bw / 2, 0);
+      ctx.lineTo(-satHalf + 7, 0);
+      ctx.moveTo(bw / 2, 0);
+      ctx.lineTo(satHalf - 7, 0);
+      ctx.stroke();
+      const satBadgeX = -satHalf + 2;
+      const satBadgeY = -satHalf + 2;
+      const satBadgeSize = 7;
+      ctx.beginPath();
+      ctx.arc(satBadgeX, satBadgeY, satBadgeSize / 2 + 2, 0, Math.PI * 2);
+      ctx.fillStyle = "rgba(15, 23, 42, 0.9)";
+      ctx.fill();
+      ctx.fillStyle = statusColor;
+      ctx.strokeStyle = statusColor;
+      ctx.lineWidth = 1;
+      if (satStatus === "normal") {
+        ctx.beginPath();
+        ctx.arc(satBadgeX, satBadgeY, satBadgeSize / 2, 0, Math.PI * 2);
+        ctx.fill();
+      } else if (satStatus === "standby") {
+        ctx.beginPath();
+        ctx.arc(satBadgeX, satBadgeY, satBadgeSize / 2 - 0.5, 0, Math.PI * 2);
+        ctx.lineWidth = 2;
+        ctx.stroke();
+      } else if (satStatus === "caution") {
+        const hs = satBadgeSize / 2;
+        ctx.fillRect(satBadgeX - hs, satBadgeY - hs, satBadgeSize, satBadgeSize);
+      } else if (satStatus === "serious") {
+        const hs = satBadgeSize / 2;
+        ctx.beginPath();
+        ctx.moveTo(satBadgeX, satBadgeY - hs);
+        ctx.lineTo(satBadgeX + hs, satBadgeY);
+        ctx.lineTo(satBadgeX, satBadgeY + hs);
+        ctx.lineTo(satBadgeX - hs, satBadgeY);
+        ctx.closePath();
+        ctx.fill();
+      } else if (satStatus === "critical") {
+        const hs = satBadgeSize / 2;
+        ctx.beginPath();
+        ctx.moveTo(satBadgeX, satBadgeY + hs);
+        ctx.lineTo(satBadgeX + hs, satBadgeY - hs);
+        ctx.lineTo(satBadgeX - hs, satBadgeY - hs);
+        ctx.closePath();
+        ctx.fill();
+      } else {
+        ctx.beginPath();
+        ctx.arc(satBadgeX, satBadgeY, satBadgeSize / 3, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.restore();
+      ctx.fillStyle = "#fff";
+      ctx.font = 'bold 10px "Inter", system-ui, sans-serif';
+      ctx.textAlign = "center";
+      ctx.fillText(sat.name, cx, cy - satHalf - 6);
+    });
+    if (showLegend && (allSatellites.length > 0 || groundStations.length > 0)) {
+      const legendX = 10;
+      const legendY = 10;
+      const lineHeight = 14;
+      const items = [];
+      allSatellites.forEach((sat, idx) => {
+        const c = sat.color || DEFAULT_TRACK_COLORS[idx % DEFAULT_TRACK_COLORS.length];
+        items.push({ color: c, label: sat.name });
+      });
+      if (groundStations.length > 0) {
+        items.push({ color: STATUS_COLOR_MAP.standby, label: `${groundStations.length} Ground Station${groundStations.length > 1 ? "s" : ""}` });
+      }
+      const maxLabelWidth = Math.max(...items.map((item) => ctx.measureText(item.label).width)) + 28;
+      const legendH = items.length * lineHeight + 10;
+      ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
+      ctx.strokeStyle = "rgba(100, 116, 139, 0.3)";
+      ctx.lineWidth = 1;
+      const r = 4;
+      ctx.beginPath();
+      ctx.moveTo(legendX + r, legendY);
+      ctx.lineTo(legendX + maxLabelWidth - r, legendY);
+      ctx.arcTo(legendX + maxLabelWidth, legendY, legendX + maxLabelWidth, legendY + r, r);
+      ctx.lineTo(legendX + maxLabelWidth, legendY + legendH - r);
+      ctx.arcTo(legendX + maxLabelWidth, legendY + legendH, legendX + maxLabelWidth - r, legendY + legendH, r);
+      ctx.lineTo(legendX + r, legendY + legendH);
+      ctx.arcTo(legendX, legendY + legendH, legendX, legendY + legendH - r, r);
+      ctx.lineTo(legendX, legendY + r);
+      ctx.arcTo(legendX, legendY, legendX + r, legendY, r);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      items.forEach((item, i) => {
+        const iy = legendY + 8 + i * lineHeight;
+        ctx.fillStyle = item.color;
+        ctx.beginPath();
+        ctx.arc(legendX + 10, iy + 3, 4, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.fillStyle = "rgba(255, 255, 255, 0.85)";
+        ctx.font = '10px "Inter", system-ui, sans-serif';
+        ctx.textAlign = "left";
+        ctx.fillText(item.label, legendX + 20, iy + 7);
+      });
+    }
+    if (allSatellites.length === 0 && groundStations.length === 0) {
+      ctx.fillStyle = COLORS.text;
+      ctx.font = '12px "Inter", system-ui, sans-serif';
+      ctx.textAlign = "center";
+      ctx.fillText(emptyMessage, W / 2, H / 2);
+    }
+  }, [allSatellites, groundStations, height, showTerminator, showGrid, showLegend, showEquator, lonToX, latToY, COLORS, emptyMessage]);
+  const handleMouseMove = useCallback((e) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+    const W = rect.width;
+    const H = typeof height === "number" ? height : rect.height;
+    for (const sat of allSatellites) {
+      if (!sat.groundTrack.length) continue;
+      const futureIdx = sat.futureTrackIndex ?? sat.groundTrack.length;
+      const currentIdx = futureIdx > 0 ? Math.min(futureIdx - 1, sat.groundTrack.length - 1) : sat.groundTrack.length - 1;
+      const lastPt = sat.groundTrack[currentIdx];
+      const sx = lonToX(lastPt.longitude, W);
+      const sy = latToY(lastPt.latitude, H);
+      const dist = Math.sqrt((mx - sx) ** 2 + (my - sy) ** 2);
+      if (dist < 18) {
+        const satStatus = sat.status || "normal";
+        setTooltip({
+          x: e.clientX - rect.left + 15,
+          y: e.clientY - rect.top - 10,
+          type: "satellite",
+          name: sat.name,
+          status: satStatus,
+          statusColor: STATUS_COLOR_MAP[satStatus] || STATUS_COLOR_MAP.normal,
+          lat: lastPt.latitude,
+          lon: lastPt.longitude,
+          alt: lastPt.altitude,
+          trackColor: sat.color || DEFAULT_TRACK_COLORS[allSatellites.indexOf(sat) % DEFAULT_TRACK_COLORS.length],
+          hasFootprint: sat.showFootprint,
+          futurePoints: sat.groundTrack.length - futureIdx,
+          pastPoints: futureIdx
+        });
+        return;
+      }
+    }
+    for (const gs of groundStations) {
+      const gx = lonToX(gs.longitude, W);
+      const gy = latToY(gs.latitude, H);
+      const dist = Math.sqrt((mx - gx) ** 2 + (my - gy) ** 2);
+      if (dist < 16) {
+        const enhanced = gs;
+        const gsStatus = enhanced.status || "standby";
+        setTooltip({
+          x: e.clientX - rect.left + 15,
+          y: e.clientY - rect.top - 10,
+          type: "station",
+          name: gs.name,
+          status: gsStatus,
+          statusColor: STATUS_COLOR_MAP[gsStatus] || STATUS_COLOR_MAP.standby,
+          lat: gs.latitude,
+          lon: gs.longitude,
+          stationType: enhanced.type || "dish",
+          network: "network" in gs && gs.network ? String(gs.network) : void 0,
+          coverageRadius: enhanced.coverageRadius
+        });
+        return;
+      }
+    }
+    setTooltip(null);
+  }, [allSatellites, groundStations, height, lonToX, latToY]);
+  const handleClick = useCallback((e) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+    const W = rect.width;
+    const H = typeof height === "number" ? height : rect.height;
+    for (const sat of allSatellites) {
+      if (!sat.groundTrack.length) continue;
+      const futureIdx = sat.futureTrackIndex ?? sat.groundTrack.length;
+      const currentIdx = futureIdx > 0 ? Math.min(futureIdx - 1, sat.groundTrack.length - 1) : sat.groundTrack.length - 1;
+      const currentPt = sat.groundTrack[currentIdx];
+      const sx = lonToX(currentPt.longitude, W);
+      const sy = latToY(currentPt.latitude, H);
+      if (Math.sqrt((mx - sx) ** 2 + (my - sy) ** 2) < 15) {
+        onSatelliteClick == null ? void 0 : onSatelliteClick(sat.id);
+        return;
+      }
+    }
+    for (const gs of groundStations) {
+      const gx = lonToX(gs.longitude, W);
+      const gy = latToY(gs.latitude, H);
+      if (Math.sqrt((mx - gx) ** 2 + (my - gy) ** 2) < 12) {
+        onStationClick == null ? void 0 : onStationClick("id" in gs ? gs.id : gs.name);
+        return;
+      }
+    }
+  }, [allSatellites, groundStations, height, lonToX, latToY, onSatelliteClick, onStationClick]);
+  useEffect(() => {
+    draw();
+    window.addEventListener("resize", draw);
+    return () => window.removeEventListener("resize", draw);
+  }, [draw]);
+  const resolvedMinHeightForLeaflet = minHeight || (typeof height === "number" ? `${height}px` : "400px");
+  if (mapProvider === "leaflet") {
+    if (LeafletMap) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "img",
+          "aria-label": allSatellites.length > 0 || groundStations.length > 0 ? "Ground track map showing satellite tracks and ground stations" : "Ground track map",
+          style: {
+            display: "block",
+            width: width ?? "100%",
+            height: typeof height === "string" ? height : void 0,
+            minHeight: resolvedMinHeightForLeaflet
+          },
+          children: /* @__PURE__ */ jsx(
+            LeafletMap,
+            {
+              allSatellites,
+              groundStations,
+              showTerminator,
+              showGrid,
+              showLegend,
+              showEquator,
+              showRecenterButton,
+              defaultCenter: leafletDefaultCenter,
+              defaultZoom: leafletDefaultZoom,
+              height,
+              width,
+              minHeight,
+              emptyMessage,
+              tileUrl,
+              className,
+              onSatelliteClick,
+              onStationClick
+            }
+          )
+        }
+      );
+    }
+    if (!leafletFailed) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `zendir-ground-track-map ${className}`,
+          style: {
+            width,
+            height: typeof height === "string" ? height : void 0,
+            minHeight: resolvedMinHeightForLeaflet,
+            backgroundColor: tokens.colors.background.base,
+            borderRadius: 8,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary, fontSize: 14 }, children: "Loading map…" })
+        }
+      );
+    }
+  }
+  const resolvedMinHeight = minHeight || (typeof height === "number" ? `${height}px` : "400px");
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `zendir-ground-track-map ${className}`,
+        style: {
+          width,
+          minHeight: resolvedMinHeight,
+          backgroundColor: COLORS.background,
+          borderRadius: "8px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsx("span", { style: { color: COLORS.text, fontSize: "14px", letterSpacing: "1px" }, children: "Loading…" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      role: "img",
+      "aria-label": allSatellites.length > 0 || groundStations.length > 0 ? "Ground track map showing satellite tracks and ground stations" : "Ground track map",
+      className: `zendir-ground-track-map ${className}`,
+      style: { width, height: typeof height === "string" ? height : void 0, minHeight: resolvedMinHeight, backgroundColor: COLORS.background, borderRadius: "8px", overflow: "hidden", position: "relative" },
+      "data-map-backend": "canvas",
+      children: [
+        mapProvider === "leaflet" && leafletFailed && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: 8,
+              left: 8,
+              zIndex: 100,
+              padding: "4px 8px",
+              background: "rgba(0,0,0,0.75)",
+              color: "#fce83a",
+              fontSize: 11,
+              borderRadius: 4
+            },
+            children: [
+              "Static view (install ",
+              /* @__PURE__ */ jsx("code", { style: { fontFamily: "monospace" }, children: "leaflet" }),
+              " for zoom/pan)"
+            ]
+          }
+        ),
+        showRecenterButton && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleRecenter,
+            title: "Recenter Map",
+            "aria-label": "Recenter map",
+            style: {
+              position: "absolute",
+              top: "8px",
+              right: "8px",
+              zIndex: 20,
+              background: "rgba(30, 41, 59, 0.85)",
+              border: "1px solid rgba(100, 116, 139, 0.4)",
+              borderRadius: "4px",
+              color: "#fff",
+              cursor: "pointer",
+              padding: "4px 8px",
+              fontSize: "12px",
+              lineHeight: "1",
+              display: "flex",
+              alignItems: "center",
+              gap: "4px"
+            },
+            children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+              /* @__PURE__ */ jsx("path", { d: "M12 2v4M12 18v4M2 12h4M18 12h4" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            style: { display: "block", cursor: tooltip ? "pointer" : "default" },
+            onMouseMove: handleMouseMove,
+            onMouseLeave: () => setTooltip(null),
+            onClick: handleClick
+          }
+        ),
+        tooltip && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: tooltip.x,
+              top: tooltip.y,
+              background: "rgba(15, 23, 42, 0.95)",
+              backdropFilter: "blur(8px)",
+              border: `1px solid ${tooltip.statusColor}40`,
+              borderRadius: "8px",
+              padding: 0,
+              pointerEvents: "none",
+              zIndex: 10,
+              color: "rgba(255, 255, 255, 0.9)",
+              fontSize: "11px",
+              fontFamily: '"Inter", system-ui, sans-serif',
+              lineHeight: "1.5",
+              boxShadow: `0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px ${tooltip.statusColor}15`,
+              minWidth: 180,
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: {
+                padding: "6px 10px",
+                borderBottom: `1px solid ${tooltip.statusColor}25`,
+                background: `${tooltip.statusColor}10`,
+                display: "flex",
+                alignItems: "center",
+                gap: 6
+              }, children: [
+                /* @__PURE__ */ jsx("span", { style: {
+                  width: 8,
+                  height: 8,
+                  borderRadius: tooltip.status === "caution" ? 1 : "50%",
+                  background: tooltip.statusColor,
+                  display: "inline-block",
+                  flexShrink: 0,
+                  boxShadow: `0 0 4px ${tooltip.statusColor}88`
+                } }),
+                /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 12 }, children: tooltip.name }),
+                /* @__PURE__ */ jsx("span", { style: {
+                  marginLeft: "auto",
+                  fontSize: 9,
+                  fontWeight: 600,
+                  textTransform: "uppercase",
+                  color: tooltip.statusColor,
+                  letterSpacing: "0.5px"
+                }, children: tooltip.status })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { padding: "6px 10px", display: "flex", flexDirection: "column", gap: 3 }, children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 2 }, children: [
+                  /* @__PURE__ */ jsx("span", { style: {
+                    fontSize: 9,
+                    fontWeight: 600,
+                    padding: "1px 5px",
+                    borderRadius: 3,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.3px",
+                    background: tooltip.type === "satellite" ? "rgba(45, 204, 255, 0.15)" : "rgba(86, 240, 0, 0.15)",
+                    color: tooltip.type === "satellite" ? "#2dccff" : "#56f000"
+                  }, children: tooltip.type === "satellite" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(AstroIcon, { name: "satellite", size: "extra-small", label: "Satellite", style: { marginRight: 4, verticalAlign: "middle" } }),
+                    "Satellite"
+                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(AstroIcon, { name: "antenna", size: "extra-small", label: tooltip.stationType || "Ground station", style: { marginRight: 4, verticalAlign: "middle" } }),
+                    tooltip.stationType || "dish"
+                  ] }) }),
+                  tooltip.network && /* @__PURE__ */ jsx("span", { style: {
+                    fontSize: 9,
+                    padding: "1px 5px",
+                    borderRadius: 3,
+                    background: "rgba(157, 112, 255, 0.15)",
+                    color: "#9D70FF"
+                  }, children: tooltip.network })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "52px 1fr", gap: "2px 8px", fontSize: 10 }, children: [
+                  /* @__PURE__ */ jsx("span", { style: { color: "rgba(255,255,255,0.5)" }, children: "Lat" }),
+                  /* @__PURE__ */ jsxs("span", { style: { fontFamily: '"Roboto Mono", monospace', fontWeight: 500 }, children: [
+                    tooltip.lat >= 0 ? "+" : "",
+                    tooltip.lat.toFixed(4),
+                    "°"
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { style: { color: "rgba(255,255,255,0.5)" }, children: "Lon" }),
+                  /* @__PURE__ */ jsxs("span", { style: { fontFamily: '"Roboto Mono", monospace', fontWeight: 500 }, children: [
+                    tooltip.lon >= 0 ? "+" : "",
+                    tooltip.lon.toFixed(4),
+                    "°"
+                  ] }),
+                  tooltip.alt !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { style: { color: "rgba(255,255,255,0.5)" }, children: "Altitude" }),
+                    /* @__PURE__ */ jsxs("span", { style: { fontFamily: '"Roboto Mono", monospace', fontWeight: 500 }, children: [
+                      tooltip.alt.toFixed(1),
+                      " km"
+                    ] })
+                  ] }),
+                  tooltip.coverageRadius !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { style: { color: "rgba(255,255,255,0.5)" }, children: "Coverage" }),
+                    /* @__PURE__ */ jsxs("span", { style: { fontFamily: '"Roboto Mono", monospace', fontWeight: 500 }, children: [
+                      tooltip.coverageRadius.toFixed(1),
+                      "° radius"
+                    ] })
+                  ] })
+                ] }),
+                tooltip.type === "satellite" && (tooltip.pastPoints !== void 0 || tooltip.futurePoints !== void 0) && /* @__PURE__ */ jsxs("div", { style: { marginTop: 3, paddingTop: 3, borderTop: "1px solid rgba(255,255,255,0.08)", display: "flex", gap: 10, fontSize: 9 }, children: [
+                  tooltip.pastPoints !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
+                    /* @__PURE__ */ jsx("span", { style: { color: tooltip.trackColor }, children: "━" }),
+                    " ",
+                    tooltip.pastPoints,
+                    " past pts"
+                  ] }),
+                  tooltip.futurePoints !== void 0 && tooltip.futurePoints > 0 && /* @__PURE__ */ jsxs("span", { children: [
+                    /* @__PURE__ */ jsx("span", { style: { color: `${tooltip.trackColor}88` }, children: "╌" }),
+                    " ",
+                    tooltip.futurePoints,
+                    " predicted"
+                  ] }),
+                  tooltip.hasFootprint && /* @__PURE__ */ jsx("span", { style: { color: "#9D70FF" }, children: "◎ Footprint" })
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  GroundTrackMap
+};
+//# sourceMappingURL=GroundTrackMap.js.map