@zendir/ui 0.5.0 → 0.6.1

package/dist/react/charts/GroundTrackMap.js

@@ -1,1270 +1,1391 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useRef, useState, useMemo, useEffect, useCallback } from "react";
 import { useTheme } from "../theme/ThemeProvider.js";
 import { AstroIcon } from "../core/display/AstroIcon.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"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/charts/GroundTrackMap.tsx
+/**
+* @zendir/ui - GroundTrackMap Component (Enhanced)
+*
+* Full-featured 2D world map showing spacecraft ground tracks, current positions,
+* ground station locations, coverage footprints, satellite icons, and day/night terminator.
+*
+* Inspired by Astro UXDS TT&C Monitor / GRM Dashboard ground map patterns:
+* - Satellite icons with status-colored indicators (not just dots)
+* - Ground station antenna icons with coverage circles
+* - Sensor/antenna footprint cone projections
+* - Future orbit tracks (dashed) vs past tracks (solid)
+* - Day/night terminator
+* - Multi-satellite support
+* - Interactive hover tooltips
+* - AOS/LOS markers on track
+* - Legend with satellite/station counts
+*
+* Astro UX Compliance:
+* - Theme-integrated via useTheme()
+* - Uses official Astro status colors from theme tokens
+* - Uses Astro monitoring icon patterns
+* - 14pt minimum for labels (AstroUXDS guideline)
+* - Consistent with Astro data visualization patterns
+*/
+var STATUS_COLOR_MAP = {
+	normal: "#56f000",
+	standby: "#2dccff",
+	caution: "#fce83a",
+	serious: "#ffb302",
+	critical: "#ff3838",
+	off: "#a4abb6"
 };
-const DEFAULT_TRACK_COLORS = [
-  "#2dccff",
-  "#3E3CFF",
-  "#9D70FF",
-  "#56f000",
-  "#fce83a",
-  "#ff7849",
-  "#2dd4bf",
-  "#ff3838"
+var 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"
+var WORLD_MAP_PATHS = [
+	"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",
+	"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",
+	"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",
+	"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",
+	"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",
+	"M-180,-72 L180,-72 L180,-90 L-180,-90 Z"
 ];
+/**
+* Draw a ground-circle footprint using great-circle math.
+* Given a center lat/lon and an angular radius (in degrees measured along
+* Earth's surface), compute N points around the circle on the sphere, then
+* project each to equirectangular pixel coordinates.
+*
+* This produces a circle that is geographically correct AND looks natural
+* on the map — at high latitudes the circle is wider in longitude because
+* that's how equirectangular projection works, but it's capped by reality
+* rather than a simple 1/cos blowup.
+*/
 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();
+	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 dLon = lon * 180 / Math.PI - 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();
 }
+/** Parse a CSS hex color to [r, g, b]. Falls back to warm white. */
 function hexToRgb(hex) {
-  const h = hex.replace("#", "");
-  if (h.length === 3) {
-    return [parseInt(h[0] + h[0], 16), parseInt(h[1] + h[1], 16), parseInt(h[2] + h[2], 16)];
-  }
-  if (h.length >= 6) {
-    return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
-  }
-  return [255, 238, 221];
+	const h = hex.replace("#", "");
+	if (h.length === 3) return [
+		parseInt(h[0] + h[0], 16),
+		parseInt(h[1] + h[1], 16),
+		parseInt(h[2] + h[2], 16)
+	];
+	if (h.length >= 6) return [
+		parseInt(h.slice(0, 2), 16),
+		parseInt(h.slice(2, 4), 16),
+		parseInt(h.slice(4, 6), 16)
+	];
+	return [
+		255,
+		238,
+		221
+	];
 }
 function calculateTerminatorContinuous(date, depressionDeg = 0, numPoints = 360) {
-  const dayOfYear = Math.floor((date.getTime() - Date.UTC(date.getUTCFullYear(), 0, 0)) / 864e5);
-  const declination = -23.44 * Math.cos(2 * Math.PI / 365 * (dayOfYear + 10));
-  const decRad = declination * Math.PI / 180;
-  const B = 2 * Math.PI / 365 * (dayOfYear - 81);
-  const eotMinutes = 9.87 * Math.sin(2 * B) - 7.53 * Math.cos(B) - 1.5 * Math.sin(B);
-  const utcHours = date.getUTCHours() + date.getUTCMinutes() / 60 + date.getUTCSeconds() / 3600;
-  const solarHours = utcHours + eotMinutes / 60;
-  const subSolarLon = -(solarHours - 12) * 15;
-  const depRad = depressionDeg * Math.PI / 180;
-  const sunset = [];
-  const sunrise = [];
-  for (let i = 0; i <= numPoints; i++) {
-    const lat = -89.999 + i / numPoints * 179.998;
-    const latRad = lat * (Math.PI / 180);
-    const cosH = -(Math.sin(depRad) + Math.sin(latRad) * Math.sin(decRad)) / (Math.cos(latRad) * Math.cos(decRad));
-    if (cosH < -1) ;
-    else if (cosH > 1) {
-      sunset.push([lat, subSolarLon]);
-      sunrise.push([lat, subSolarLon + 360]);
-    } else {
-      const H = Math.acos(cosH) * 180 / Math.PI;
-      sunset.push([lat, subSolarLon + H]);
-      sunrise.push([lat, subSolarLon + 360 - H]);
-    }
-  }
-  return { sunset, sunrise };
+	const dayOfYear = Math.floor((date.getTime() - Date.UTC(date.getUTCFullYear(), 0, 0)) / 864e5);
+	const decRad = -23.44 * Math.cos(2 * Math.PI / 365 * (dayOfYear + 10)) * Math.PI / 180;
+	const B = 2 * Math.PI / 365 * (dayOfYear - 81);
+	const eotMinutes = 9.87 * Math.sin(2 * B) - 7.53 * Math.cos(B) - 1.5 * Math.sin(B);
+	const subSolarLon = -(date.getUTCHours() + date.getUTCMinutes() / 60 + date.getUTCSeconds() / 3600 + eotMinutes / 60 - 12) * 15;
+	const depRad = depressionDeg * Math.PI / 180;
+	const sunset = [];
+	const sunrise = [];
+	for (let i = 0; i <= numPoints; i++) {
+		const lat = -89.999 + i / numPoints * 179.998;
+		const latRad = lat * (Math.PI / 180);
+		const cosH = -(Math.sin(depRad) + Math.sin(latRad) * Math.sin(decRad)) / (Math.cos(latRad) * Math.cos(decRad));
+		if (cosH < -1) {} else if (cosH > 1) {
+			sunset.push([lat, subSolarLon]);
+			sunrise.push([lat, subSolarLon + 360]);
+		} else {
+			const H = Math.acos(cosH) * 180 / Math.PI;
+			sunset.push([lat, subSolarLon + H]);
+			sunrise.push([lat, subSolarLon + 360 - H]);
+		}
+	}
+	return {
+		sunset,
+		sunrise
+	};
 }
 function buildNightPolygon(terminator) {
-  const { sunset, sunrise } = terminator;
-  if (!sunset.length || !sunrise.length) return [];
-  const poly = [];
-  poly.push(...sunset);
-  poly.push(...[...sunrise].reverse());
-  return poly;
+	const { sunset, sunrise } = terminator;
+	if (!sunset.length || !sunrise.length) return [];
+	const poly = [];
+	poly.push(...sunset);
+	poly.push(...[...sunrise].reverse());
+	return poly;
 }
-function GroundTrackMap({
-  groundTrack,
-  satellites = [],
-  groundStations = [],
-  accessMask,
-  teamPaths,
-  showTerminator = true,
-  terminatorTime,
-  showGrid = true,
-  showLegend = true,
-  showEquator = true,
-  showRecenterButton = false,
-  showMapStyleToggle = true,
-  isLoading = false,
-  emptyMessage = "No orbital data available",
-  width = "100%",
-  height = "100%",
-  minHeight = "400px",
-  defaultCenter,
-  defaultZoom,
-  className = "",
-  onSatelliteClick,
-  onStationClick,
-  mapProvider = "leaflet",
-  tileUrl,
-  nightTileUrl,
-  lightSources,
-  pins,
-  pinsEditable = false,
-  onPinAdd,
-  onPinUpdate,
-  onPinRemove,
-  customLayers,
-  onLayerChange,
-  showCelestialMarkers
-}) {
-  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 now = terminatorTime ?? /* @__PURE__ */ new Date();
-      const BAND_STEP = 1.5;
-      const MAX_DEP = 30;
-      const NIGHT_ALPHA = 0.38;
-      const bandSteps = [];
-      for (let d = 0; d <= MAX_DEP; d += BAND_STEP) {
-        const t = Math.min(d / 18, 1);
-        const alpha = Math.pow(t, 1.6) * (NIGHT_ALPHA * 0.85) + (d > 18 ? (d - 18) / 12 * (NIGHT_ALPHA * 0.15) : 0);
-        bandSteps.push({ depression: d, alpha: Math.min(alpha, NIGHT_ALPHA) });
-      }
-      bandSteps.push({ depression: 90, alpha: NIGHT_ALPHA });
-      let prevAlpha = 0;
-      for (const zone of bandSteps) {
-        const dep = Math.min(zone.depression, 89);
-        const bandAlpha = zone.alpha - prevAlpha;
-        if (bandAlpha < 2e-3) {
-          prevAlpha = zone.alpha;
-          continue;
-        }
-        const terminator = calculateTerminatorContinuous(now, dep);
-        if (terminator.sunset.length === 0) {
-          prevAlpha = zone.alpha;
-          continue;
-        }
-        const poly = buildNightPolygon(terminator);
-        if (poly.length < 3) {
-          prevAlpha = zone.alpha;
-          continue;
-        }
-        ctx.fillStyle = `rgba(42, 58, 82, ${bandAlpha.toFixed(4)})`;
-        for (const offset of [-360, 0, 360]) {
-          ctx.beginPath();
-          for (let i = 0; i < poly.length; i++) {
-            const lat = poly[i][0];
-            const lon = poly[i][1] + offset;
-            const x = lonToX(lon, W);
-            const y = latToY(lat, H);
-            if (i === 0) {
-              ctx.moveTo(x, y);
-            } else {
-              ctx.lineTo(x, y);
-            }
-          }
-          ctx.closePath();
-          ctx.fill();
-        }
-        prevAlpha = zone.alpha;
-      }
-      const terminatorEdge = calculateTerminatorContinuous(now, 0);
-      if (terminatorEdge.sunset.length > 2) {
-        ctx.save();
-        ctx.strokeStyle = "rgba(160, 160, 160, 0.08)";
-        ctx.lineWidth = 3;
-        for (const curve of [terminatorEdge.sunset, terminatorEdge.sunrise]) {
-          for (const offset of [-360, 0, 360]) {
-            ctx.beginPath();
-            for (let i = 0; i < curve.length; i++) {
-              const x = lonToX(curve[i][1] + offset, W);
-              const y = latToY(curve[i][0], H);
-              if (i === 0) ctx.moveTo(x, y);
-              else ctx.lineTo(x, y);
-            }
-            ctx.stroke();
-          }
-        }
-        ctx.strokeStyle = "rgba(168, 168, 168, 0.30)";
-        ctx.lineWidth = 1;
-        for (const curve of [terminatorEdge.sunset, terminatorEdge.sunrise]) {
-          for (const offset of [-360, 0, 360]) {
-            ctx.beginPath();
-            for (let i = 0; i < curve.length; i++) {
-              const x = lonToX(curve[i][1] + offset, W);
-              const y = latToY(curve[i][0], H);
-              if (i === 0) ctx.moveTo(x, y);
-              else ctx.lineTo(x, y);
-            }
-            ctx.stroke();
-          }
-        }
-        ctx.restore();
-      }
-    }
-    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);
-    }
-    if (lightSources && lightSources.length > 0 && showTerminator) {
-      const now = terminatorTime ?? /* @__PURE__ */ new Date();
-      for (const light of lightSources) {
-        const lx = lonToX(light.longitude, W);
-        const ly = latToY(light.latitude, H);
-        const r = light.radius ?? 4;
-        const intensity = light.intensity ?? 0.8;
-        const color = light.color ?? "#ffeedd";
-        const dayOfYear = Math.floor((now.getTime() - Date.UTC(now.getUTCFullYear(), 0, 0)) / 864e5);
-        const declination = -23.44 * Math.cos(2 * Math.PI / 365 * (dayOfYear + 10));
-        const decRad = declination * Math.PI / 180;
-        const lsSubSolarLon = -(now.getUTCHours() + now.getUTCMinutes() / 60 - 12) * 15;
-        const latRad = light.latitude * Math.PI / 180;
-        const sinAlt = Math.sin(latRad) * Math.sin(decRad) + Math.cos(latRad) * Math.cos(decRad) * Math.cos((light.longitude - lsSubSolarLon) * Math.PI / 180);
-        const solarAltDeg = Math.asin(sinAlt) * 180 / Math.PI;
-        let nightFactor;
-        if (solarAltDeg >= 0) nightFactor = 0;
-        else if (solarAltDeg <= -18) nightFactor = 1;
-        else nightFactor = Math.min(1, -solarAltDeg / 18);
-        if (nightFactor < 0.01) continue;
-        const alpha = intensity * nightFactor;
-        const [cr, cg, cb] = hexToRgb(color);
-        const grad = ctx.createRadialGradient(lx, ly, 0, lx, ly, r * 2);
-        grad.addColorStop(0, `rgba(${cr}, ${cg}, ${cb}, ${alpha})`);
-        grad.addColorStop(0.4, `rgba(${cr}, ${cg}, ${cb}, ${alpha * 0.6})`);
-        grad.addColorStop(1, `rgba(${cr}, ${cg}, ${cb}, 0)`);
-        ctx.fillStyle = grad;
-        ctx.beginPath();
-        ctx.arc(lx, ly, r * 2, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.fillStyle = `rgba(${cr}, ${cg}, ${cb}, ${Math.min(1, alpha * 1.3)})`;
-        ctx.beginPath();
-        ctx.arc(lx, ly, Math.max(1, r * 0.4), 0, Math.PI * 2);
-        ctx.fill();
-      }
-    }
-    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 (pins && pins.length > 0) {
-      pins.forEach((pin) => {
-        const px = lonToX(pin.longitude, W);
-        const py = latToY(pin.latitude, H);
-        const pinColor = pin.color || tokens.colors.accent.primary;
-        ctx.save();
-        ctx.shadowColor = "rgba(0,0,0,0.4)";
-        ctx.shadowBlur = 6;
-        ctx.shadowOffsetY = 2;
-        ctx.beginPath();
-        ctx.arc(px, py - 10, 6, Math.PI, 0);
-        ctx.lineTo(px, py);
-        ctx.closePath();
-        ctx.fillStyle = pinColor;
-        ctx.fill();
-        ctx.restore();
-        ctx.beginPath();
-        ctx.arc(px, py - 10, 2.5, 0, Math.PI * 2);
-        ctx.fillStyle = "#0d1323";
-        ctx.fill();
-        if (pin.label) {
-          ctx.fillStyle = "rgba(255,255,255,0.9)";
-          ctx.font = '10px "Inter", system-ui, sans-serif';
-          ctx.textAlign = "center";
-          ctx.fillText(pin.label, px, py - 20);
-        }
-      });
-    }
-    if (allSatellites.length === 0 && groundStations.length === 0 && (!pins || pins.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, terminatorTime, showGrid, showLegend, showEquator, lonToX, latToY, COLORS, emptyMessage, pins, lightSources, tokens.colors.accent.primary]);
-  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,
-              terminatorTime,
-              showGrid,
-              showLegend,
-              showEquator,
-              showRecenterButton,
-              showMapStyleToggle,
-              defaultCenter: leafletDefaultCenter,
-              defaultZoom: leafletDefaultZoom,
-              height,
-              width,
-              minHeight,
-              emptyMessage,
-              tileUrl,
-              nightTileUrl,
-              lightSources,
-              className,
-              onSatelliteClick,
-              onStationClick,
-              pins,
-              pinsEditable,
-              onPinAdd,
-              onPinUpdate,
-              onPinRemove,
-              customLayers,
-              onLayerChange,
-              showCelestialMarkers
-            }
-          )
-        }
-      );
-    }
-    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" })
-                ] })
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
+function GroundTrackMap({ groundTrack, satellites = [], groundStations = [], accessMask, teamPaths, showTerminator = true, terminatorTime, showGrid = true, showLegend = true, showEquator = true, showRecenterButton = false, showMapStyleToggle = true, isLoading = false, emptyMessage = "No orbital data available", width = "100%", height = "100%", minHeight = "400px", defaultCenter, defaultZoom, className = "", onSatelliteClick, onStationClick, mapProvider = "leaflet", tileUrl, nightTileUrl, lightSources, pins, pinsEditable = false, onPinAdd, onPinUpdate, onPinRemove, customLayers, onLayerChange, showCelestialMarkers }) {
+	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 ? (/* @__PURE__ */ 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,
+		textPrimary: tokens.colors.text.primary,
+		borderMuted: tokens.colors.border.muted,
+		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 now = terminatorTime ?? /* @__PURE__ */ new Date();
+			const BAND_STEP = 1.5;
+			const MAX_DEP = 30;
+			const NIGHT_ALPHA = .38;
+			const bandSteps = [];
+			for (let d = 0; d <= MAX_DEP; d += BAND_STEP) {
+				const t = Math.min(d / 18, 1);
+				const alpha = Math.pow(t, 1.6) * (NIGHT_ALPHA * .85) + (d > 18 ? (d - 18) / 12 * (NIGHT_ALPHA * .15) : 0);
+				bandSteps.push({
+					depression: d,
+					alpha: Math.min(alpha, NIGHT_ALPHA)
+				});
+			}
+			bandSteps.push({
+				depression: 90,
+				alpha: NIGHT_ALPHA
+			});
+			let prevAlpha = 0;
+			for (const zone of bandSteps) {
+				const dep = Math.min(zone.depression, 89);
+				const bandAlpha = zone.alpha - prevAlpha;
+				if (bandAlpha < .002) {
+					prevAlpha = zone.alpha;
+					continue;
+				}
+				const terminator = calculateTerminatorContinuous(now, dep);
+				if (terminator.sunset.length === 0) {
+					prevAlpha = zone.alpha;
+					continue;
+				}
+				const poly = buildNightPolygon(terminator);
+				if (poly.length < 3) {
+					prevAlpha = zone.alpha;
+					continue;
+				}
+				ctx.fillStyle = `rgba(42, 58, 82, ${bandAlpha.toFixed(4)})`;
+				for (const offset of [
+					-360,
+					0,
+					360
+				]) {
+					ctx.beginPath();
+					for (let i = 0; i < poly.length; i++) {
+						const lat = poly[i][0];
+						const lon = poly[i][1] + offset;
+						const x = lonToX(lon, W);
+						const y = latToY(lat, H);
+						if (i === 0) ctx.moveTo(x, y);
+						else ctx.lineTo(x, y);
+					}
+					ctx.closePath();
+					ctx.fill();
+				}
+				prevAlpha = zone.alpha;
+			}
+			const terminatorEdge = calculateTerminatorContinuous(now, 0);
+			if (terminatorEdge.sunset.length > 2) {
+				ctx.save();
+				ctx.strokeStyle = "rgba(160, 160, 160, 0.08)";
+				ctx.lineWidth = 3;
+				for (const curve of [terminatorEdge.sunset, terminatorEdge.sunrise]) for (const offset of [
+					-360,
+					0,
+					360
+				]) {
+					ctx.beginPath();
+					for (let i = 0; i < curve.length; i++) {
+						const x = lonToX(curve[i][1] + offset, W);
+						const y = latToY(curve[i][0], H);
+						if (i === 0) ctx.moveTo(x, y);
+						else ctx.lineTo(x, y);
+					}
+					ctx.stroke();
+				}
+				ctx.strokeStyle = "rgba(168, 168, 168, 0.30)";
+				ctx.lineWidth = 1;
+				for (const curve of [terminatorEdge.sunset, terminatorEdge.sunrise]) for (const offset of [
+					-360,
+					0,
+					360
+				]) {
+					ctx.beginPath();
+					for (let i = 0; i < curve.length; i++) {
+						const x = lonToX(curve[i][1] + offset, W);
+						const y = latToY(curve[i][0], H);
+						if (i === 0) ctx.moveTo(x, y);
+						else ctx.lineTo(x, y);
+					}
+					ctx.stroke();
+				}
+				ctx.restore();
+			}
+		}
+		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 = .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, 12, 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(-10, -10);
+			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 * .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 = -9;
+			const badgeY = -9;
+			const badgeSize = 7;
+			ctx.beginPath();
+			ctx.arc(badgeX, badgeY, 5.5, 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 - .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(-5.5, badgeY);
+				ctx.lineTo(badgeX, -5.5);
+				ctx.lineTo(badgeX - hs, badgeY);
+				ctx.closePath();
+				ctx.fill();
+			} else if (status === "critical") {
+				const hs = badgeSize / 2;
+				ctx.beginPath();
+				ctx.moveTo(badgeX, -5.5);
+				ctx.lineTo(-5.5, 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);
+		}
+		if (lightSources && lightSources.length > 0 && showTerminator) {
+			const now = terminatorTime ?? /* @__PURE__ */ new Date();
+			for (const light of lightSources) {
+				const lx = lonToX(light.longitude, W);
+				const ly = latToY(light.latitude, H);
+				const r = light.radius ?? 4;
+				const intensity = light.intensity ?? .8;
+				const color = light.color ?? "#ffeedd";
+				const dayOfYear = Math.floor((now.getTime() - Date.UTC(now.getUTCFullYear(), 0, 0)) / 864e5);
+				const decRad = -23.44 * Math.cos(2 * Math.PI / 365 * (dayOfYear + 10)) * Math.PI / 180;
+				const lsSubSolarLon = -(now.getUTCHours() + now.getUTCMinutes() / 60 - 12) * 15;
+				const latRad = light.latitude * Math.PI / 180;
+				const sinAlt = Math.sin(latRad) * Math.sin(decRad) + Math.cos(latRad) * Math.cos(decRad) * Math.cos((light.longitude - lsSubSolarLon) * Math.PI / 180);
+				const solarAltDeg = Math.asin(sinAlt) * 180 / Math.PI;
+				let nightFactor;
+				if (solarAltDeg >= 0) nightFactor = 0;
+				else if (solarAltDeg <= -18) nightFactor = 1;
+				else nightFactor = Math.min(1, -solarAltDeg / 18);
+				if (nightFactor < .01) continue;
+				const alpha = intensity * nightFactor;
+				const [cr, cg, cb] = hexToRgb(color);
+				const grad = ctx.createRadialGradient(lx, ly, 0, lx, ly, r * 2);
+				grad.addColorStop(0, `rgba(${cr}, ${cg}, ${cb}, ${alpha})`);
+				grad.addColorStop(.4, `rgba(${cr}, ${cg}, ${cb}, ${alpha * .6})`);
+				grad.addColorStop(1, `rgba(${cr}, ${cg}, ${cb}, 0)`);
+				ctx.fillStyle = grad;
+				ctx.beginPath();
+				ctx.arc(lx, ly, r * 2, 0, Math.PI * 2);
+				ctx.fill();
+				ctx.fillStyle = `rgba(${cr}, ${cg}, ${cb}, ${Math.min(1, alpha * 1.3)})`;
+				ctx.beginPath();
+				ctx.arc(lx, ly, Math.max(1, r * .4), 0, Math.PI * 2);
+				ctx.fill();
+			}
+		}
+		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);
+				if (Math.abs(x - prevX) > W / 2) {
+					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 current = track[futureIdx > 0 ? Math.min(futureIdx - 1, track.length - 1) : track.length - 1];
+			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 satHalf = 22 / 2;
+			ctx.beginPath();
+			ctx.arc(cx, cy, 17, 0, Math.PI * 2);
+			ctx.fillStyle = `${statusColor}12`;
+			ctx.fill();
+			ctx.beginPath();
+			ctx.arc(cx, cy, 14, 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(-2, -3.5 / 2);
+			ctx.lineTo(bw / 2 - .5, -3.5 / 2);
+			ctx.arcTo(bw / 2, -3.5 / 2, bw / 2, -1.25, .5);
+			ctx.lineTo(bw / 2, bh / 2 - .5);
+			ctx.arcTo(bw / 2, bh / 2, bw / 2 - .5, bh / 2, .5);
+			ctx.lineTo(-2, bh / 2);
+			ctx.arcTo(-5 / 2, bh / 2, -5 / 2, bh / 2 - .5, .5);
+			ctx.lineTo(-5 / 2, -1.25);
+			ctx.arcTo(-5 / 2, -3.5 / 2, -2, -3.5 / 2, .5);
+			ctx.closePath();
+			ctx.fill();
+			ctx.fillStyle = `${statusColor}BB`;
+			ctx.fillRect(-9, -2, 5, 4);
+			ctx.strokeStyle = `${statusColor}55`;
+			ctx.lineWidth = .5;
+			ctx.beginPath();
+			ctx.moveTo(-6.5, -2);
+			ctx.lineTo(-6.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(-5 / 2, 0);
+			ctx.lineTo(-4, 0);
+			ctx.moveTo(bw / 2, 0);
+			ctx.lineTo(satHalf - 7, 0);
+			ctx.stroke();
+			const satBadgeX = -9;
+			const satBadgeY = -9;
+			const satBadgeSize = 7;
+			ctx.beginPath();
+			ctx.arc(satBadgeX, satBadgeY, 5.5, 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 - .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(-5.5, satBadgeY);
+				ctx.lineTo(satBadgeX, -5.5);
+				ctx.lineTo(satBadgeX - hs, satBadgeY);
+				ctx.closePath();
+				ctx.fill();
+			} else if (satStatus === "critical") {
+				const hs = satBadgeSize / 2;
+				ctx.beginPath();
+				ctx.moveTo(satBadgeX, -5.5);
+				ctx.lineTo(-5.5, 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 = COLORS.textPrimary;
+			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 = COLORS.borderMuted;
+			ctx.lineWidth = 1;
+			const r = 4;
+			ctx.beginPath();
+			ctx.moveTo(14, legendY);
+			ctx.lineTo(legendX + maxLabelWidth - r, legendY);
+			ctx.arcTo(legendX + maxLabelWidth, legendY, legendX + maxLabelWidth, 14, r);
+			ctx.lineTo(legendX + maxLabelWidth, legendY + legendH - r);
+			ctx.arcTo(legendX + maxLabelWidth, legendY + legendH, legendX + maxLabelWidth - r, legendY + legendH, r);
+			ctx.lineTo(14, legendY + legendH);
+			ctx.arcTo(legendX, legendY + legendH, legendX, legendY + legendH - r, r);
+			ctx.lineTo(legendX, 14);
+			ctx.arcTo(legendX, legendY, 14, legendY, r);
+			ctx.closePath();
+			ctx.fill();
+			ctx.stroke();
+			items.forEach((item, i) => {
+				const iy = 18 + i * lineHeight;
+				ctx.fillStyle = item.color;
+				ctx.beginPath();
+				ctx.arc(20, iy + 3, 4, 0, Math.PI * 2);
+				ctx.fill();
+				ctx.fillStyle = COLORS.textPrimary;
+				ctx.font = "10px \"Inter\", system-ui, sans-serif";
+				ctx.textAlign = "left";
+				ctx.fillText(item.label, 30, iy + 7);
+			});
+		}
+		if (pins && pins.length > 0) pins.forEach((pin) => {
+			const px = lonToX(pin.longitude, W);
+			const py = latToY(pin.latitude, H);
+			const pinColor = pin.color || tokens.colors.accent.primary;
+			ctx.save();
+			ctx.shadowColor = "rgba(0,0,0,0.4)";
+			ctx.shadowBlur = 6;
+			ctx.shadowOffsetY = 2;
+			ctx.beginPath();
+			ctx.arc(px, py - 10, 6, Math.PI, 0);
+			ctx.lineTo(px, py);
+			ctx.closePath();
+			ctx.fillStyle = pinColor;
+			ctx.fill();
+			ctx.restore();
+			ctx.beginPath();
+			ctx.arc(px, py - 10, 2.5, 0, Math.PI * 2);
+			ctx.fillStyle = "#0d1323";
+			ctx.fill();
+			if (pin.label) {
+				ctx.fillStyle = COLORS.textPrimary;
+				ctx.font = "10px \"Inter\", system-ui, sans-serif";
+				ctx.textAlign = "center";
+				ctx.fillText(pin.label, px, py - 20);
+			}
+		});
+		if (allSatellites.length === 0 && groundStations.length === 0 && (!pins || pins.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,
+		terminatorTime,
+		showGrid,
+		showLegend,
+		showEquator,
+		lonToX,
+		latToY,
+		COLORS,
+		emptyMessage,
+		pins,
+		lightSources,
+		tokens.colors.accent.primary
+	]);
+	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);
+			if (Math.sqrt((mx - sx) ** 2 + (my - sy) ** 2) < 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);
+			if (Math.sqrt((mx - gx) ** 2 + (my - gy) ** 2) < 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?.(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?.("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,
+				terminatorTime,
+				showGrid,
+				showLegend,
+				showEquator,
+				showRecenterButton,
+				showMapStyleToggle,
+				defaultCenter: leafletDefaultCenter,
+				defaultZoom: leafletDefaultZoom,
+				height,
+				width,
+				minHeight,
+				emptyMessage,
+				tileUrl,
+				nightTileUrl,
+				lightSources,
+				className,
+				onSatelliteClick,
+				onStationClick,
+				pins,
+				pinsEditable,
+				onPinAdd,
+				onPinUpdate,
+				onPinRemove,
+				customLayers,
+				onLayerChange,
+				showCelestialMarkers
+			})
+		});
+		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: tokens.colors.status.caution,
+					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: tokens.colors.background.elevated,
+					border: `1px solid ${tokens.colors.border.muted}`,
+					borderRadius: "4px",
+					color: tokens.colors.text.primary,
+					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: tokens.colors.background.surface,
+					backdropFilter: "blur(8px)",
+					border: `1px solid ${tooltip.statusColor}40`,
+					borderRadius: "8px",
+					padding: 0,
+					pointerEvents: "none",
+					zIndex: 10,
+					color: tokens.colors.text.primary,
+					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" ? `${tokens.colors.status.standby}26` : `${tokens.colors.status.normal}26`,
+									color: tooltip.type === "satellite" ? tokens.colors.status.standby : tokens.colors.status.normal
+								},
+								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: tokens.colors.text.muted },
+									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: tokens.colors.text.muted },
+									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: tokens.colors.text.muted },
+									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: tokens.colors.text.muted },
+									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 ${tokens.colors.border.muted}`,
+								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
+//#endregion
+export { GroundTrackMap, GroundTrackMap as default };
+
+//# sourceMappingURL=GroundTrackMap.js.map