@zendir/ui 0.1.8 → 0.1.9

package/dist/react/charts/GroundTrackMap.js

@@ -1,1123 +0,0 @@
-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