@zendir/ui 0.1.0

package/dist/react/charts/GroundTrackMapLeaflet.js

@@ -0,0 +1,571 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect } from "react";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+/* empty css                   */
+import { geodesicCirclePoints, splitRingAtAntimeridian, segmentsWithWorldCopies, splitPolylineAtAntimeridian } from "./groundTrackMapLeafletUtils.js";
+import { DEFAULT_TILE, CARTO_ATTRIBUTION, OSM_ATTRIBUTION, FALLBACK_TILE } from "./groundTrackMapLeafletTiles.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const 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"
+];
+function createSatDivIcon(statusColor, trackColor) {
+  const badge = statusColor === "#56f000" ? `<circle cx="7" cy="7" r="3" fill="${statusColor}"/>` : statusColor === "#2dccff" ? `<circle cx="7" cy="7" r="2.5" fill="none" stroke="${statusColor}" stroke-width="1.5"/>` : statusColor === "#fce83a" ? `<rect x="4.5" y="4.5" width="5" height="5" fill="${statusColor}"/>` : statusColor === "#ffb302" ? `<polygon points="7,3.5 10.5,7 7,10.5 3.5,7" fill="${statusColor}"/>` : statusColor === "#ff3838" ? `<polygon points="7,10 4,4 10,4" fill="${statusColor}"/>` : `<circle cx="7" cy="7" r="2" fill="${statusColor}"/>`;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34">
+    <!-- Glow ring -->
+    <circle cx="17" cy="17" r="15" fill="${statusColor}" fill-opacity="0.12"/>
+    <!-- Main body circle -->
+    <circle cx="17" cy="17" r="11" fill="#0d1323" stroke="${trackColor}" stroke-width="1.5"/>
+    <!-- Left solar panel -->
+    <rect x="2" y="15" width="9" height="4" rx="0.5" fill="${trackColor}" fill-opacity="0.75"/>
+    <line x1="5.5" y1="15" x2="5.5" y2="19" stroke="${trackColor}" stroke-width="0.5" stroke-opacity="0.45"/>
+    <!-- Connector left -->
+    <line x1="11" y1="17" x2="13" y2="17" stroke="${trackColor}" stroke-width="1.2"/>
+    <!-- Satellite bus body -->
+    <rect x="13" y="14.5" width="8" height="5" rx="1" fill="${statusColor}"/>
+    <!-- Connector right -->
+    <line x1="21" y1="17" x2="23" y2="17" stroke="${trackColor}" stroke-width="1.2"/>
+    <!-- Right solar panel -->
+    <rect x="23" y="15" width="9" height="4" rx="0.5" fill="${trackColor}" fill-opacity="0.75"/>
+    <line x1="26.5" y1="15" x2="26.5" y2="19" stroke="${trackColor}" stroke-width="0.5" stroke-opacity="0.45"/>
+    <!-- Status badge (top-left) -->
+    <circle cx="7" cy="7" r="5.5" fill="#0d1323"/>
+    ${badge}
+  </svg>`;
+  return L.divIcon({
+    html: svg,
+    className: "zendir-sat-icon",
+    iconSize: [34, 34],
+    iconAnchor: [17, 17],
+    tooltipAnchor: [0, -18]
+  });
+}
+function createStationDivIcon(statusColor, type, status) {
+  const badge = status === "normal" ? `<circle cx="5" cy="5" r="2.5" fill="${statusColor}"/>` : status === "standby" ? `<circle cx="5" cy="5" r="2" fill="none" stroke="${statusColor}" stroke-width="1.2"/>` : status === "caution" ? `<rect x="3" y="3" width="4" height="4" fill="${statusColor}"/>` : status === "serious" ? `<polygon points="5,2.5 7.5,5 5,7.5 2.5,5" fill="${statusColor}"/>` : status === "critical" ? `<polygon points="5,7.5 2.5,2.5 7.5,2.5" fill="${statusColor}"/>` : `<circle cx="5" cy="5" r="1.5" fill="${statusColor}"/>`;
+  let iconInner = "";
+  if (type === "phased-array") {
+    iconInner = `
+      <rect x="9" y="7" width="10" height="8" rx="0.5" fill="none" stroke="${statusColor}" stroke-width="1.2"/>
+      <line x1="12" y1="7" x2="12" y2="15" stroke="${statusColor}" stroke-width="0.7"/>
+      <line x1="15" y1="7" x2="15" y2="15" stroke="${statusColor}" stroke-width="0.7"/>
+      <line x1="9" y1="10" x2="19" y2="10" stroke="${statusColor}" stroke-width="0.7"/>
+      <line x1="9" y1="13" x2="19" y2="13" stroke="${statusColor}" stroke-width="0.7"/>
+      <line x1="14" y1="15" x2="14" y2="20" stroke="${statusColor}" stroke-width="1.2"/>
+      <line x1="11" y1="20" x2="17" y2="20" stroke="${statusColor}" stroke-width="1.2"/>`;
+  } else if (type === "relay") {
+    iconInner = `
+      <path d="M 8 16 a 7 7 0 0 1 7 -7" fill="none" stroke="${statusColor}" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M 8 16 m 2 -2 a 5 5 0 0 1 5 -5" fill="none" stroke="${statusColor}" stroke-width="1.2" stroke-linecap="round"/>
+      <line x1="14" y1="16" x2="14" y2="21" stroke="${statusColor}" stroke-width="1.2"/>
+      <line x1="11" y1="21" x2="17" y2="21" stroke="${statusColor}" stroke-width="1.2"/>
+      <path d="M 16 8 a 3 3 0 0 1 0 4" fill="none" stroke="${statusColor}" stroke-width="1.2" stroke-linecap="round"/>
+      <path d="M 17.5 6.5 a 5 5 0 0 1 0 7" fill="none" stroke="${statusColor}" stroke-width="1" stroke-linecap="round"/>`;
+  } else {
+    iconInner = `
+      <path d="M 14 14 m -7 0 a 7 7 0 0 1 7 -7" fill="none" stroke="${statusColor}" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M 14 14 m -5 0 a 5 5 0 0 1 5 -5" fill="none" stroke="${statusColor}" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M 14 14 m -3 0 a 3 3 0 0 1 3 -3" fill="none" stroke="${statusColor}" stroke-width="1.5" stroke-linecap="round"/>
+      <circle cx="14" cy="14" r="1.5" fill="${statusColor}"/>
+      <line x1="14" y1="15" x2="14" y2="21" stroke="${statusColor}" stroke-width="1.2"/>
+      <line x1="11" y1="21" x2="17" y2="21" stroke="${statusColor}" stroke-width="1.2"/>`;
+  }
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
+    <!-- Glow ring -->
+    <circle cx="14" cy="14" r="13" fill="${statusColor}" fill-opacity="0.1"/>
+    <!-- Background -->
+    <circle cx="14" cy="14" r="11" fill="#0d1323" stroke="${statusColor}" stroke-width="1.2" stroke-opacity="0.7"/>
+    ${iconInner}
+    <!-- Status badge (top-left) -->
+    <circle cx="5" cy="5" r="5" fill="#0d1323"/>
+    ${badge}
+  </svg>`;
+  return L.divIcon({
+    html: svg,
+    className: "zendir-station-icon",
+    iconSize: [28, 28],
+    iconAnchor: [14, 14],
+    tooltipAnchor: [0, -14]
+  });
+}
+function calculateTerminatorContinuous(date, numPoints = 72) {
+  const dayOfYear = Math.floor((date.getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 864e5);
+  const declination = -23.44 * Math.cos(2 * Math.PI / 365 * (dayOfYear + 10));
+  const decRad = declination * Math.PI / 180;
+  const hourAngle = (date.getUTCHours() + date.getUTCMinutes() / 60) / 24 * 360 - 180;
+  const points = [];
+  let prevLon = null;
+  for (let i = 0; i <= numPoints; i++) {
+    const latRad = (i / numPoints * 180 - 90) * (Math.PI / 180);
+    const cosH = -Math.tan(latRad) * Math.tan(decRad);
+    let lon;
+    if (cosH < -1) lon = hourAngle + 180;
+    else if (cosH > 1) lon = hourAngle;
+    else lon = hourAngle + Math.acos(cosH) * 180 / Math.PI;
+    if (prevLon != null) {
+      while (lon - prevLon > 180) lon -= 360;
+      while (lon - prevLon < -180) lon += 360;
+    }
+    prevLon = lon;
+    points.push([i / numPoints * 180 - 90, lon]);
+  }
+  return points;
+}
+function buildNightPolygon(sunsetTerminator) {
+  if (!sunsetTerminator.length) return [];
+  const sunrise = sunsetTerminator.map(([lat, lon]) => [lat, lon - 180]);
+  return [...sunsetTerminator, ...[...sunrise].reverse()];
+}
+function GroundTrackMapLeaflet({
+  allSatellites,
+  groundStations,
+  showTerminator = true,
+  showGrid = false,
+  showLegend = true,
+  showEquator = false,
+  showRecenterButton = true,
+  defaultCenter = [20, 0],
+  defaultZoom = 2,
+  height = "100%",
+  width = "100%",
+  minHeight = "400px",
+  emptyMessage = "No orbital data available",
+  tileUrl = DEFAULT_TILE,
+  className = "",
+  onSatelliteClick,
+  onStationClick
+}) {
+  const { tokens } = useTheme();
+  const containerRef = useRef(null);
+  const mapRef = useRef(null);
+  const tileLayerRef = useRef(null);
+  const overlayGroupRef = useRef(null);
+  const controlsRef = useRef([]);
+  const [ready, setReady] = useState(false);
+  const clearLayers = useCallback(() => {
+    var _a;
+    const map = mapRef.current;
+    if (!map) return;
+    (_a = overlayGroupRef.current) == null ? void 0 : _a.clearLayers();
+    controlsRef.current.forEach((ctrl) => map.removeControl(ctrl));
+    controlsRef.current = [];
+  }, []);
+  const addLayer = useCallback((layer) => {
+    var _a;
+    (_a = overlayGroupRef.current) == null ? void 0 : _a.addLayer(layer);
+  }, []);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const center = defaultCenter ?? [20, 0];
+    const zoom = defaultZoom ?? 2;
+    const map = L.map(el, {
+      center,
+      zoom,
+      zoomControl: false,
+      scrollWheelZoom: true,
+      doubleClickZoom: true,
+      touchZoom: true,
+      boxZoom: true,
+      keyboard: true,
+      dragging: true,
+      attributionControl: true,
+      maxBounds: [[-90, -540], [90, 540]],
+      maxBoundsViscosity: 1
+    });
+    L.control.zoom({ position: "topright" }).addTo(map);
+    map.attributionControl.setPrefix("");
+    const isCartoTiles = tileUrl.includes("cartocdn");
+    if (isCartoTiles) {
+      map.attributionControl.addAttribution(CARTO_ATTRIBUTION);
+    }
+    const tileOptions = {
+      maxZoom: 19,
+      subdomains: isCartoTiles ? "abcd" : "abc",
+      // crossOrigin avoids tainted-canvas errors when Leaflet tries to read tile pixels
+      crossOrigin: true
+    };
+    const tile = L.tileLayer(tileUrl, tileOptions);
+    tile.addTo(map);
+    tileLayerRef.current = tile;
+    let hasSwitchedToFallback = false;
+    const onTileError = () => {
+      if (hasSwitchedToFallback) return;
+      hasSwitchedToFallback = true;
+      tile.off("tileerror", onTileError);
+      tile.remove();
+      if (isCartoTiles) {
+        map.attributionControl.removeAttribution(CARTO_ATTRIBUTION);
+        map.attributionControl.addAttribution(OSM_ATTRIBUTION);
+      }
+      const fallback = L.tileLayer(FALLBACK_TILE, {
+        maxZoom: 19,
+        subdomains: "abc",
+        crossOrigin: true
+      });
+      fallback.addTo(map);
+      tileLayerRef.current = fallback;
+    };
+    tile.on("tileerror", onTileError);
+    const overlayGroup = L.layerGroup();
+    overlayGroup.addTo(map);
+    overlayGroupRef.current = overlayGroup;
+    mapRef.current = map;
+    setReady(true);
+    const onSize = () => {
+      map.invalidateSize({ animate: false });
+    };
+    const raf = requestAnimationFrame(onSize);
+    const t1 = setTimeout(onSize, 150);
+    const t2 = setTimeout(onSize, 500);
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+      cancelAnimationFrame(raf);
+      clearLayers();
+      tileLayerRef.current = null;
+      map.remove();
+      mapRef.current = null;
+      overlayGroupRef.current = null;
+    };
+  }, [tileUrl, clearLayers]);
+  useEffect(() => {
+    if (!ready || !mapRef.current) return;
+    const map = mapRef.current;
+    clearLayers();
+    if (showTerminator) {
+      const sunsetTerminator = calculateTerminatorContinuous(/* @__PURE__ */ new Date());
+      const nightPoly = buildNightPolygon(sunsetTerminator);
+      if (nightPoly.length > 2) {
+        [0, 360, -360].forEach((offset) => {
+          const shifted = nightPoly.map(([lat, lon]) => [lat, lon + offset]);
+          addLayer(L.polygon(shifted, {
+            color: "transparent",
+            fillColor: "#00060f",
+            fillOpacity: 0.35,
+            interactive: false
+          }));
+        });
+      }
+      const sunriseTerminator = sunsetTerminator.map(([lat, lon]) => [lat, lon - 180]);
+      [sunsetTerminator, sunriseTerminator].forEach((line) => {
+        [0, 360, -360].forEach((offset) => {
+          const shifted = line.map(([lat, lon]) => [lat, lon + offset]);
+          addLayer(L.polyline(shifted, {
+            color: "rgba(88, 166, 255, 0.22)",
+            weight: 1,
+            interactive: false
+          }));
+        });
+      });
+    }
+    if (showGrid) {
+      const gridStyle = { color: "rgba(157, 112, 255, 0.12)", weight: 0.5, interactive: false };
+      [-360, 0, 360].forEach((offset) => {
+        for (let lon = -180; lon <= 180; lon += 30) {
+          const l = lon + offset;
+          addLayer(L.polyline([[90, l], [-90, l]], gridStyle));
+        }
+        for (let lat = -90; lat <= 90; lat += 30) {
+          addLayer(L.polyline([[lat, -180 + offset], [lat, 180 + offset]], gridStyle));
+        }
+      });
+    }
+    if (showEquator) {
+      [-360, 0, 360].forEach((offset) => {
+        addLayer(L.polyline([[0, -180 + offset], [0, 180 + offset]], {
+          color: "rgba(88, 166, 255, 0.25)",
+          weight: 1,
+          dashArray: "6, 4",
+          interactive: false
+        }));
+      });
+    }
+    groundStations.forEach((gs) => {
+      const status = ("status" in gs ? gs.status : void 0) ?? "standby";
+      const statusColor = STATUS_COLOR_MAP[status] || STATUS_COLOR_MAP.standby;
+      const stationType = ("type" in gs ? gs.type : void 0) ?? "dish";
+      const radius = "coverageRadius" in gs ? gs.coverageRadius : void 0;
+      const showCoverage = "showCoverage" in gs ? gs.showCoverage : false;
+      if (radius != null && radius > 0 && showCoverage) {
+        const ring = geodesicCirclePoints(gs.latitude, gs.longitude, radius, 64);
+        const rings = splitRingAtAntimeridian(ring);
+        [0, 360, -360].forEach((offset) => {
+          rings.forEach((r) => {
+            const shifted = r.map(([lat, lon]) => [lat, lon + offset]);
+            addLayer(L.polygon(shifted, {
+              color: `${statusColor}55`,
+              fillColor: statusColor,
+              fillOpacity: 0.1,
+              weight: 1,
+              dashArray: "4, 3",
+              interactive: false
+            }));
+          });
+        });
+      }
+      const gsIcon = createStationDivIcon(statusColor, stationType, status);
+      const marker = L.marker([gs.latitude, gs.longitude], { icon: gsIcon });
+      addLayer(marker);
+      const statusLabel = status !== "standby" ? ` · ${status}` : "";
+      marker.bindTooltip(
+        `<strong>${gs.name}</strong>${statusLabel}${"network" in gs && gs.network ? `<br/><span style="opacity:0.7">${gs.network}</span>` : ""}`,
+        { permanent: false, direction: "top", className: "zendir-leaflet-tooltip" }
+      );
+      marker.on("click", () => {
+        onStationClick == null ? void 0 : onStationClick("id" in gs ? String(gs.id) : gs.name);
+      });
+    });
+    allSatellites.forEach((sat, satIdx) => {
+      const track = sat.groundTrack;
+      if (!track || track.length === 0) return;
+      const color = sat.color || DEFAULT_TRACK_COLORS[satIdx % DEFAULT_TRACK_COLORS.length];
+      const futureIdx = sat.futureTrackIndex ?? track.length;
+      const pastLatLngs = track.slice(0, futureIdx).map((p) => [p.latitude, p.longitude]);
+      segmentsWithWorldCopies(splitPolylineAtAntimeridian(pastLatLngs)).forEach((seg) => {
+        if (seg.length >= 2) {
+          addLayer(L.polyline(seg, { color, weight: 2.5, opacity: 1 }));
+        }
+      });
+      if (futureIdx < track.length) {
+        const futureLatLngs = track.slice(futureIdx).map((p) => [p.latitude, p.longitude]);
+        segmentsWithWorldCopies(splitPolylineAtAntimeridian(futureLatLngs)).forEach((seg) => {
+          if (seg.length >= 2) {
+            addLayer(L.polyline(seg, { color, weight: 1.5, opacity: 0.5, dashArray: "6, 4" }));
+          }
+        });
+      }
+      if (sat.accessMask && sat.accessMask.some(Boolean)) {
+        let segment = [];
+        for (let i = 0; i < track.length; i++) {
+          if (sat.accessMask[i]) {
+            segment.push([track[i].latitude, track[i].longitude]);
+          } else if (segment.length >= 2) {
+            segmentsWithWorldCopies(splitPolylineAtAntimeridian(segment)).forEach((seg) => {
+              if (seg.length >= 2) {
+                addLayer(L.polyline(seg, { color: STATUS_COLOR_MAP.normal, weight: 4, opacity: 0.9 }));
+              }
+            });
+            segment = [];
+          } else {
+            segment = [];
+          }
+        }
+        if (segment.length >= 2) {
+          segmentsWithWorldCopies(splitPolylineAtAntimeridian(segment)).forEach((seg) => {
+            if (seg.length >= 2) {
+              addLayer(L.polyline(seg, { color: STATUS_COLOR_MAP.normal, weight: 4, opacity: 0.9 }));
+            }
+          });
+        }
+      }
+      if (sat.passMarkers && sat.passMarkers.length > 0) {
+        sat.passMarkers.forEach((pm) => {
+          const isAos = pm.type === "aos";
+          const pmColor = isAos ? "#56f000" : "#ff3838";
+          const pmMarker = L.circleMarker([pm.latitude, pm.longitude], {
+            radius: 5,
+            fillColor: pmColor,
+            color: `${pmColor}cc`,
+            weight: 1.5,
+            fillOpacity: 0.9
+          });
+          addLayer(pmMarker);
+          pmMarker.bindTooltip(`${pm.type.toUpperCase()}${pm.label ? ` – ${pm.label}` : ""}`, {
+            permanent: false,
+            direction: "top",
+            className: "zendir-leaflet-tooltip"
+          });
+        });
+      }
+      if (sat.showFootprint && sat.footprintRadius) {
+        const lastIdx = futureIdx > 0 ? Math.min(futureIdx - 1, track.length - 1) : track.length - 1;
+        const last = track[lastIdx];
+        const ring = geodesicCirclePoints(last.latitude, last.longitude, sat.footprintRadius, 64);
+        const rings = splitRingAtAntimeridian(ring);
+        [0, 360, -360].forEach((offset) => {
+          rings.forEach((r) => {
+            const shifted = r.map(([lat, lon]) => [lat, lon + offset]);
+            addLayer(L.polygon(shifted, {
+              color: `${color}70`,
+              fillColor: color,
+              fillOpacity: 0.1,
+              weight: 1,
+              dashArray: "3, 3",
+              interactive: false
+            }));
+          });
+        });
+      }
+      const currentIdx = futureIdx > 0 ? Math.min(futureIdx - 1, track.length - 1) : track.length - 1;
+      const current = track[currentIdx];
+      const statusColor = STATUS_COLOR_MAP[sat.status || "normal"] || STATUS_COLOR_MAP.normal;
+      const satIcon = createSatDivIcon(statusColor, color);
+      const satMarker = L.marker([current.latitude, current.longitude], { icon: satIcon });
+      addLayer(satMarker);
+      satMarker.bindTooltip(
+        `<strong style="color:${color}">${sat.name}</strong><br/>Lat ${current.latitude.toFixed(3)}° &nbsp; Lon ${current.longitude.toFixed(3)}°` + (current.altitude != null ? `<br/>Alt ${current.altitude.toFixed(1)} km` : "") + (sat.status ? `<br/><span style="color:${statusColor}">${sat.status.toUpperCase()}</span>` : ""),
+        { permanent: false, direction: "top", className: "zendir-leaflet-tooltip" }
+      );
+      satMarker.on("click", () => onSatelliteClick == null ? void 0 : onSatelliteClick(sat.id));
+    });
+    if (showLegend && (allSatellites.length > 0 || groundStations.length > 0)) {
+      const Legend = L.Control.extend({
+        onAdd() {
+          const div = L.DomUtil.create("div", "leaflet-legend-zendir");
+          div.style.cssText = `
+            padding: 8px 12px; background: rgba(15,21,32,0.9); border: 1px solid rgba(157,112,255,0.2);
+            border-radius: 8px; color: #e4e0f0; font-size: 11px; font-family: Roboto, sans-serif;
+          `;
+          allSatellites.forEach((s, i) => {
+            const c = s.color || DEFAULT_TRACK_COLORS[i % DEFAULT_TRACK_COLORS.length];
+            const row = document.createElement("div");
+            row.style.cssText = "display: flex; align-items: center; gap: 6px; margin: 2px 0;";
+            const swatch = document.createElement("span");
+            swatch.style.cssText = `width:8px;height:8px;border-radius:50%;background:${c};`;
+            const label = document.createElement("span");
+            label.textContent = s.name;
+            row.appendChild(swatch);
+            row.appendChild(label);
+            div.appendChild(row);
+          });
+          if (groundStations.length > 0) {
+            const row = document.createElement("div");
+            row.style.cssText = "display: flex; align-items: center; gap: 6px; margin: 2px 0; margin-top: 6px;";
+            const swatch = document.createElement("span");
+            swatch.style.cssText = "width:8px;height:8px;border-radius:50%;background:#2dccff;";
+            const label = document.createElement("span");
+            label.textContent = `${groundStations.length} Ground Station${groundStations.length > 1 ? "s" : ""}`;
+            row.appendChild(swatch);
+            row.appendChild(label);
+            div.appendChild(row);
+          }
+          return div;
+        }
+      });
+      const legend = new Legend({ position: "topleft" });
+      legend.addTo(map);
+      controlsRef.current.push(legend);
+    }
+  }, [
+    ready,
+    allSatellites,
+    groundStations,
+    showTerminator,
+    showGrid,
+    showEquator,
+    showLegend,
+    tokens.colors.text.secondary,
+    addLayer,
+    clearLayers,
+    onSatelliteClick,
+    onStationClick
+  ]);
+  const handleRecenter = useCallback(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    const points = [];
+    allSatellites.forEach((s) => {
+      s.groundTrack.forEach((p) => points.push([p.latitude, p.longitude]));
+    });
+    groundStations.forEach((gs) => points.push([gs.latitude, gs.longitude]));
+    if (points.length > 0) {
+      const bounds = L.latLngBounds(points);
+      map.fitBounds(bounds, { padding: [40, 40], maxZoom: 8 });
+    } else {
+      map.setView(defaultCenter, defaultZoom);
+    }
+  }, [allSatellites, groundStations, defaultCenter, defaultZoom]);
+  const resolvedMinHeight = minHeight || (typeof height === "number" ? `${height}px` : "400px");
+  const isEmpty = allSatellites.length === 0 && groundStations.length === 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `zendir-ground-track-map zendir-ground-track-map-leaflet ${className}`,
+      "data-map-backend": "leaflet",
+      style: {
+        width,
+        height,
+        minHeight: resolvedMinHeight,
+        backgroundColor: tokens.colors.background.base,
+        borderRadius: 8,
+        overflow: "hidden",
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: containerRef,
+            style: { width: "100%", height: "100%", minHeight: resolvedMinHeight }
+          }
+        ),
+        isEmpty && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "50%",
+              top: "50%",
+              transform: "translate(-50%, -50%)",
+              color: tokens.colors.text.secondary,
+              fontSize: 14,
+              pointerEvents: "none"
+            },
+            children: emptyMessage
+          }
+        ),
+        showRecenterButton && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleRecenter,
+            title: "Recenter map",
+            "aria-label": "Recenter map",
+            style: {
+              position: "absolute",
+              top: 8,
+              right: 50,
+              zIndex: 1e3,
+              background: "rgba(24, 29, 46, 0.9)",
+              border: "1px solid rgba(157, 112, 255, 0.25)",
+              borderRadius: 6,
+              color: "#e4e0f0",
+              cursor: "pointer",
+              padding: "6px 10px",
+              fontSize: 12,
+              display: "flex",
+              alignItems: "center",
+              gap: 4
+            },
+            children: [
+              /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+                /* @__PURE__ */ jsx("path", { d: "M12 2v4M12 18v4M2 12h4M18 12h4" })
+              ] }),
+              "Recenter"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  GroundTrackMapLeaflet
+};
+//# sourceMappingURL=GroundTrackMapLeaflet.js.map