@zendir/ui 0.5.0 → 0.6.0

package/dist/react/charts/GroundTrackMapLeaflet.js

@@ -1,32 +1,40 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useCallback } from "react";
 import { useTheme } from "../theme/ThemeProvider.js";
-import L from "leaflet";
-import "leaflet/dist/leaflet.css";
+import { FALLBACK_TILE, OSM_ATTRIBUTION, TILE_PRESETS, getBasemapAttribution } from "./groundTrackMapLeafletTiles.js";
 /* empty css                   */
 import { geodesicCirclePointsContinuous, segmentsWithWorldCopies, splitPolylineAtAntimeridian } from "./groundTrackMapLeafletUtils.js";
-import { TILE_PRESETS, getBasemapAttribution, FALLBACK_TILE, OSM_ATTRIBUTION } from "./groundTrackMapLeafletTiles.js";
-const STATUS_COLOR_MAP = {
-  normal: "#56f000",
-  standby: "#2dccff",
-  caution: "#fce83a",
-  serious: "#ffb302",
-  critical: "#ff3838",
-  off: "#a4abb6"
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+//#region src/react/charts/GroundTrackMapLeaflet.tsx
+/**
+* @zendir/ui - GroundTrackMap Leaflet Provider
+*
+* Leaflet-based 2D world map for ground tracks, stations, and terminator.
+* Uses Zendir hybrid theme; all interactions enabled (zoom, scroll, drag, etc.).
+* Import leaflet-zendir.css when using this component.
+*/
+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"
 ];
+/** Satellite spacecraft icon with solar panels, matching Astro UXDS style. */
 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">
+	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 -->
@@ -45,21 +53,21 @@ function createSatDivIcon(statusColor, trackColor) {
     <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}
+    ${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}"/>`}
   </svg>`;
-  return L.divIcon({
-    html: svg,
-    className: "zendir-sat-icon",
-    iconSize: [34, 34],
-    iconAnchor: [17, 17],
-    tooltipAnchor: [0, -18]
-  });
+	return L.divIcon({
+		html: svg,
+		className: "zendir-sat-icon",
+		iconSize: [34, 34],
+		iconAnchor: [17, 17],
+		tooltipAnchor: [0, -18]
+	});
 }
+/** Ground station icon — dish/antenna shape, matching Astro UXDS style. */
 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 = `
+	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"/>
@@ -67,24 +75,21 @@ function createStationDivIcon(statusColor, type, status) {
       <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 = `
+	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 = `
+	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">
+	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 -->
@@ -94,580 +99,591 @@ function createStationDivIcon(statusColor, type, status) {
     <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]
-  });
+	return L.divIcon({
+		html: svg,
+		className: "zendir-station-icon",
+		iconSize: [28, 28],
+		iconAnchor: [14, 14],
+		tooltipAnchor: [0, -14]
+	});
 }
+/**
+* Compute a terminator line with CONTINUOUS (unwrapped) longitudes.
+*
+* `depressionDeg` offsets the solar zenith angle to produce twilight
+* boundaries instead of the geometric sunset line:
+*   - 0° = geometric sunset/sunrise (day/night boundary)
+*   - 6° = civil twilight (horizon still visible, outdoor activities possible)
+*   - 12° = nautical twilight (horizon barely visible, stars appearing)
+*   - 18° = astronomical twilight (sky fully dark for observation)
+*
+* These thresholds follow IAU/USNO standard definitions used in celestial
+* navigation, Astro UX space ops dashboards, and STK/GMAT mission tools.
+*/
 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
+	};
 }
+/**
+* Build the full night polygon, properly closing the loops around the poles.
+* Ensures longitudes are strictly continuous so the map projection doesn't
+* draw antimeridian lines across the day side.
+*/
 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 GroundTrackMapLeaflet({
-  allSatellites,
-  groundStations,
-  showTerminator = true,
-  terminatorTime,
-  showGrid = false,
-  showLegend = true,
-  showEquator = false,
-  showRecenterButton = true,
-  showMapStyleToggle = true,
-  defaultCenter = [20, 0],
-  defaultZoom = 2,
-  height = "100%",
-  width = "100%",
-  minHeight = "400px",
-  emptyMessage = "No orbital data available",
-  tileUrl,
-  nightTileUrl,
-  lightSources,
-  className = "",
-  onSatelliteClick,
-  onStationClick,
-  pins,
-  pinsEditable = false,
-  onPinAdd,
-  onPinUpdate,
-  onPinRemove,
-  customLayers,
-  onLayerChange,
-  showCelestialMarkers
-}) {
-  const { tokens } = useTheme();
-  const containerRef = useRef(null);
-  const mapRef = useRef(null);
-  const tileLayerRef = useRef(null);
-  const overlayGroupRef = useRef(null);
-  const controlsRef = useRef([]);
-  const pinsGroupRef = useRef(null);
-  const [ready, setReady] = useState(false);
-  const [layersPanelOpen, setLayersPanelOpen] = useState(false);
-  const layersPanelRef = useRef(null);
-  useEffect(() => {
-    if (!layersPanelOpen) return;
-    const handleClickOutside = (e) => {
-      if (layersPanelRef.current && !layersPanelRef.current.contains(e.target)) {
-        setLayersPanelOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [layersPanelOpen]);
-  const TILE_STORAGE_KEY = "zendir-map-tile-style";
-  const isExplicitTileUrl = tileUrl !== void 0;
-  const [tileStyle, setTileStyle] = useState(() => {
-    if (isExplicitTileUrl) return "dark";
-    try {
-      const saved = localStorage.getItem(TILE_STORAGE_KEY);
-      if (saved === "dark" || saved === "satellite") return saved;
-    } catch {
-    }
-    return "dark";
-  });
-  const handleTileStyleChange = useCallback((style) => {
-    setTileStyle(style);
-    try {
-      localStorage.setItem(TILE_STORAGE_KEY, style);
-    } catch {
-    }
-  }, []);
-  const effectiveTileUrl = isExplicitTileUrl ? tileUrl : TILE_PRESETS[tileStyle];
-  const [internalTerminator, setInternalTerminator] = useState(showTerminator);
-  const [internalGrid, setInternalGrid] = useState(showGrid);
-  useEffect(() => {
-    setInternalTerminator(showTerminator);
-  }, [showTerminator]);
-  useEffect(() => {
-    setInternalGrid(showGrid);
-  }, [showGrid]);
-  const [customLayerState, setCustomLayerState] = useState(() => {
-    const state = {};
-    for (const l of customLayers ?? []) {
-      state[l.id] = l.defaultEnabled ?? true;
-    }
-    return state;
-  });
-  useEffect(() => {
-    setCustomLayerState((prev) => {
-      const next = { ...prev };
-      for (const l of customLayers ?? []) {
-        if (!(l.id in next)) next[l.id] = l.defaultEnabled ?? true;
-      }
-      return next;
-    });
-  }, [customLayers]);
-  const handleLayerToggle = useCallback((layerId, enabled) => {
-    if (layerId === "terminator") {
-      setInternalTerminator(enabled);
-    } else if (layerId === "grid") {
-      setInternalGrid(enabled);
-    } else {
-      setCustomLayerState((prev) => ({ ...prev, [layerId]: enabled }));
-    }
-    onLayerChange == null ? void 0 : onLayerChange(layerId, enabled);
-  }, [onLayerChange]);
-  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
-    });
-    map.attributionControl.setPrefix("");
-    const overlayGroup = L.layerGroup();
-    overlayGroup.addTo(map);
-    overlayGroupRef.current = overlayGroup;
-    const pinsGroup = L.layerGroup();
-    pinsGroup.addTo(map);
-    pinsGroupRef.current = pinsGroup;
-    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 () => {
-      var _a;
-      clearTimeout(t1);
-      clearTimeout(t2);
-      cancelAnimationFrame(raf);
-      clearLayers();
-      (_a = pinsGroupRef.current) == null ? void 0 : _a.clearLayers();
-      pinsGroupRef.current = null;
-      tileLayerRef.current = null;
-      map.remove();
-      mapRef.current = null;
-      overlayGroupRef.current = null;
-    };
-  }, [clearLayers]);
-  useEffect(() => {
-    const map = mapRef.current;
-    if (!map || !ready) return;
-    if (tileLayerRef.current) {
-      tileLayerRef.current.remove();
-      tileLayerRef.current = null;
-    }
-    const isCartoTiles = effectiveTileUrl.includes("cartocdn");
-    const basemapAttribution = getBasemapAttribution(effectiveTileUrl);
-    const tile = L.tileLayer(effectiveTileUrl, {
-      maxZoom: 19,
-      subdomains: isCartoTiles ? "abcd" : "abc",
-      crossOrigin: true,
-      attribution: basemapAttribution || void 0
-    });
-    tile.addTo(map);
-    tile.bringToBack();
-    tileLayerRef.current = tile;
-    let hasSwitchedToFallback = false;
-    const onTileError = () => {
-      if (hasSwitchedToFallback) return;
-      hasSwitchedToFallback = true;
-      tile.off("tileerror", onTileError);
-      tile.remove();
-      const fallback = L.tileLayer(FALLBACK_TILE, {
-        maxZoom: 19,
-        subdomains: "abc",
-        crossOrigin: true,
-        attribution: OSM_ATTRIBUTION
-      });
-      fallback.addTo(map);
-      fallback.bringToBack();
-      tileLayerRef.current = fallback;
-    };
-    tile.on("tileerror", onTileError);
-  }, [effectiveTileUrl, ready]);
-  useEffect(() => {
-    if (!ready || !mapRef.current) return;
-    const map = mapRef.current;
-    clearLayers();
-    if (nightTileUrl && internalTerminator) {
-      const nightTile = L.tileLayer(nightTileUrl, {
-        maxZoom: 19,
-        crossOrigin: true,
-        opacity: 0.7,
-        className: "zendir-night-tiles"
-      });
-      addLayer(nightTile);
-    }
-    if (internalTerminator) {
-      const now = terminatorTime ?? /* @__PURE__ */ new Date();
-      const isSatelliteTile = tileStyle === "satellite";
-      const BAND_STEP = 1.5;
-      const MAX_DEP = 30;
-      const NIGHT_OPACITY = isSatelliteTile ? 0.75 : 0.38;
-      const NIGHT_COLOR = isSatelliteTile ? "#030810" : "#2a3a52";
-      const bandSteps = [];
-      for (let d = 0; d <= MAX_DEP; d += BAND_STEP) {
-        const t = Math.min(d / 18, 1);
-        const opacity = Math.pow(t, 1.6) * (NIGHT_OPACITY * 0.85) + (d > 18 ? (d - 18) / 12 * (NIGHT_OPACITY * 0.15) : 0);
-        bandSteps.push({ depression: d, opacity: Math.min(opacity, NIGHT_OPACITY), color: NIGHT_COLOR });
-      }
-      bandSteps.push({ depression: 90, opacity: NIGHT_OPACITY, color: NIGHT_COLOR });
-      let prevOpacity = 0;
-      for (const b of bandSteps) {
-        const terminator = calculateTerminatorContinuous(now, Math.min(b.depression, 89));
-        const bandOpacity = b.opacity - prevOpacity;
-        if (bandOpacity < 2e-3 || terminator.sunset.length === 0) {
-          prevOpacity = b.opacity;
-          continue;
-        }
-        const poly = buildNightPolygon(terminator);
-        if (poly.length < 3) continue;
-        [0, 360, -360].forEach((offset) => {
-          const shifted = poly.map(([lat, lon]) => [lat, lon + offset]);
-          addLayer(L.polygon(shifted, {
-            color: "transparent",
-            fillColor: b.color,
-            fillOpacity: bandOpacity,
-            interactive: false
-          }));
-        });
-        prevOpacity = b.opacity;
-      }
-      const terminatorEdge = calculateTerminatorContinuous(now, 0);
-      const glowColor = isSatelliteTile ? "#a0a0a0" : "#909090";
-      const glowOpacity = isSatelliteTile ? 0.15 : 0.08;
-      const coreColor = isSatelliteTile ? "#c0c0c0" : "#a8a8a8";
-      const coreOpacity = isSatelliteTile ? 0.45 : 0.3;
-      if (terminatorEdge.sunset.length > 2) {
-        const sunsetLine = terminatorEdge.sunset.map(([lat, lon]) => [lat, lon]);
-        const sunriseLine = terminatorEdge.sunrise.map(([lat, lon]) => [lat, lon]);
-        [0, 360, -360].forEach((offset) => {
-          addLayer(L.polyline(
-            sunsetLine.map(([lat, lon]) => [lat, lon + offset]),
-            { color: glowColor, weight: 3, opacity: glowOpacity, interactive: false, smoothFactor: 1.5 }
-          ));
-          addLayer(L.polyline(
-            sunriseLine.map(([lat, lon]) => [lat, lon + offset]),
-            { color: glowColor, weight: 3, opacity: glowOpacity, interactive: false, smoothFactor: 1.5 }
-          ));
-          addLayer(L.polyline(
-            sunsetLine.map(([lat, lon]) => [lat, lon + offset]),
-            { color: coreColor, weight: 1, opacity: coreOpacity, interactive: false, smoothFactor: 1.5 }
-          ));
-          addLayer(L.polyline(
-            sunriseLine.map(([lat, lon]) => [lat, lon + offset]),
-            { color: coreColor, weight: 1, opacity: coreOpacity, interactive: false, smoothFactor: 1.5 }
-          ));
-        });
-      }
-    }
-    if (lightSources && lightSources.length > 0 && internalTerminator) {
-      const now = terminatorTime ?? /* @__PURE__ */ new Date();
-      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;
-      for (const light of lightSources) {
-        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 r = light.radius ?? 4;
-        const intensity = light.intensity ?? 0.8;
-        const color = light.color ?? "#ffeedd";
-        const alpha = intensity * nightFactor;
-        const glowMarker = L.circleMarker([light.latitude, light.longitude], {
-          radius: r * 2,
-          fillColor: color,
-          fillOpacity: alpha * 0.4,
-          color,
-          weight: 0,
-          interactive: !!light.label
-        });
-        addLayer(glowMarker);
-        const coreMarker = L.circleMarker([light.latitude, light.longitude], {
-          radius: Math.max(1, r * 0.5),
-          fillColor: color,
-          fillOpacity: Math.min(1, alpha * 1.2),
-          color: "transparent",
-          weight: 0,
-          interactive: false
-        });
-        addLayer(coreMarker);
-        if (light.label) {
-          glowMarker.bindTooltip(light.label, {
-            permanent: false,
-            direction: "top",
-            className: "zendir-leaflet-tooltip"
-          });
-        }
-      }
-    }
-    if (internalGrid) {
-      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 = geodesicCirclePointsContinuous(gs.latitude, gs.longitude, radius, 64);
-        [0, 360, -360].forEach((offset) => {
-          addLayer(L.polygon(ring.map(([lat, lon]) => [lat, lon + offset]), {
-            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: "auto", 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: "auto",
-            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 = geodesicCirclePointsContinuous(last.latitude, last.longitude, sat.footprintRadius, 64);
-        [0, 360, -360].forEach((offset) => {
-          addLayer(L.polygon(ring.map(([lat, lon]) => [lat, lon + offset]), {
-            color: `${color}50`,
-            fillColor: color,
-            fillOpacity: 0.03,
-            weight: 1,
-            dashArray: "4, 4",
-            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: "auto", 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;
+function GroundTrackMapLeaflet({ allSatellites, groundStations, showTerminator = true, terminatorTime, showGrid = false, showLegend = true, showEquator = false, showRecenterButton = true, showMapStyleToggle = true, defaultCenter = [20, 0], defaultZoom = 2, height = "100%", width = "100%", minHeight = "400px", emptyMessage = "No orbital data available", tileUrl, nightTileUrl, lightSources, className = "", onSatelliteClick, onStationClick, pins, pinsEditable = false, onPinAdd, onPinUpdate, onPinRemove, customLayers, onLayerChange, showCelestialMarkers }) {
+	const { tokens } = useTheme();
+	const containerRef = useRef(null);
+	const mapRef = useRef(null);
+	const tileLayerRef = useRef(null);
+	const overlayGroupRef = useRef(null);
+	const controlsRef = useRef([]);
+	/** Separate layer group so pin updates don't clear satellite/station layers */
+	const pinsGroupRef = useRef(null);
+	const [ready, setReady] = useState(false);
+	const [layersPanelOpen, setLayersPanelOpen] = useState(false);
+	const layersPanelRef = useRef(null);
+	useEffect(() => {
+		if (!layersPanelOpen) return;
+		const handleClickOutside = (e) => {
+			if (layersPanelRef.current && !layersPanelRef.current.contains(e.target)) setLayersPanelOpen(false);
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [layersPanelOpen]);
+	const TILE_STORAGE_KEY = "zendir-map-tile-style";
+	const isExplicitTileUrl = tileUrl !== void 0;
+	const [tileStyle, setTileStyle] = useState(() => {
+		if (isExplicitTileUrl) return "dark";
+		try {
+			const saved = localStorage.getItem(TILE_STORAGE_KEY);
+			if (saved === "dark" || saved === "satellite") return saved;
+		} catch {}
+		return "dark";
+	});
+	const handleTileStyleChange = useCallback((style) => {
+		setTileStyle(style);
+		try {
+			localStorage.setItem(TILE_STORAGE_KEY, style);
+		} catch {}
+	}, []);
+	const effectiveTileUrl = isExplicitTileUrl ? tileUrl : TILE_PRESETS[tileStyle];
+	const [internalTerminator, setInternalTerminator] = useState(showTerminator);
+	const [internalGrid, setInternalGrid] = useState(showGrid);
+	useEffect(() => {
+		setInternalTerminator(showTerminator);
+	}, [showTerminator]);
+	useEffect(() => {
+		setInternalGrid(showGrid);
+	}, [showGrid]);
+	const [customLayerState, setCustomLayerState] = useState(() => {
+		const state = {};
+		for (const l of customLayers ?? []) state[l.id] = l.defaultEnabled ?? true;
+		return state;
+	});
+	useEffect(() => {
+		setCustomLayerState((prev) => {
+			const next = { ...prev };
+			for (const l of customLayers ?? []) if (!(l.id in next)) next[l.id] = l.defaultEnabled ?? true;
+			return next;
+		});
+	}, [customLayers]);
+	const handleLayerToggle = useCallback((layerId, enabled) => {
+		if (layerId === "terminator") setInternalTerminator(enabled);
+		else if (layerId === "grid") setInternalGrid(enabled);
+		else setCustomLayerState((prev) => ({
+			...prev,
+			[layerId]: enabled
+		}));
+		onLayerChange?.(layerId, enabled);
+	}, [onLayerChange]);
+	const clearLayers = useCallback(() => {
+		const map = mapRef.current;
+		if (!map) return;
+		overlayGroupRef.current?.clearLayers();
+		controlsRef.current.forEach((ctrl) => map.removeControl(ctrl));
+		controlsRef.current = [];
+	}, []);
+	const addLayer = useCallback((layer) => {
+		overlayGroupRef.current?.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
+		});
+		map.attributionControl.setPrefix("");
+		const overlayGroup = L.layerGroup();
+		overlayGroup.addTo(map);
+		overlayGroupRef.current = overlayGroup;
+		const pinsGroup = L.layerGroup();
+		pinsGroup.addTo(map);
+		pinsGroupRef.current = pinsGroup;
+		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();
+			pinsGroupRef.current?.clearLayers();
+			pinsGroupRef.current = null;
+			tileLayerRef.current = null;
+			map.remove();
+			mapRef.current = null;
+			overlayGroupRef.current = null;
+		};
+	}, [clearLayers]);
+	useEffect(() => {
+		const map = mapRef.current;
+		if (!map || !ready) return;
+		if (tileLayerRef.current) {
+			tileLayerRef.current.remove();
+			tileLayerRef.current = null;
+		}
+		const isCartoTiles = effectiveTileUrl.includes("cartocdn");
+		const basemapAttribution = getBasemapAttribution(effectiveTileUrl);
+		const tile = L.tileLayer(effectiveTileUrl, {
+			maxZoom: 19,
+			subdomains: isCartoTiles ? "abcd" : "abc",
+			crossOrigin: true,
+			attribution: basemapAttribution || void 0
+		});
+		tile.addTo(map);
+		tile.bringToBack();
+		tileLayerRef.current = tile;
+		let hasSwitchedToFallback = false;
+		const onTileError = () => {
+			if (hasSwitchedToFallback) return;
+			hasSwitchedToFallback = true;
+			tile.off("tileerror", onTileError);
+			tile.remove();
+			const fallback = L.tileLayer(FALLBACK_TILE, {
+				maxZoom: 19,
+				subdomains: "abc",
+				crossOrigin: true,
+				attribution: OSM_ATTRIBUTION
+			});
+			fallback.addTo(map);
+			fallback.bringToBack();
+			tileLayerRef.current = fallback;
+		};
+		tile.on("tileerror", onTileError);
+	}, [effectiveTileUrl, ready]);
+	useEffect(() => {
+		if (!ready || !mapRef.current) return;
+		const map = mapRef.current;
+		clearLayers();
+		if (nightTileUrl && internalTerminator) {
+			const nightTile = L.tileLayer(nightTileUrl, {
+				maxZoom: 19,
+				crossOrigin: true,
+				opacity: .7,
+				className: "zendir-night-tiles"
+			});
+			addLayer(nightTile);
+		}
+		if (internalTerminator) {
+			const now = terminatorTime ?? /* @__PURE__ */ new Date();
+			const isSatelliteTile = tileStyle === "satellite";
+			const BAND_STEP = 1.5;
+			const MAX_DEP = 30;
+			const NIGHT_OPACITY = isSatelliteTile ? .75 : .38;
+			const NIGHT_COLOR = isSatelliteTile ? "#030810" : "#2a3a52";
+			const bandSteps = [];
+			for (let d = 0; d <= MAX_DEP; d += BAND_STEP) {
+				const t = Math.min(d / 18, 1);
+				const opacity = Math.pow(t, 1.6) * (NIGHT_OPACITY * .85) + (d > 18 ? (d - 18) / 12 * (NIGHT_OPACITY * .15) : 0);
+				bandSteps.push({
+					depression: d,
+					opacity: Math.min(opacity, NIGHT_OPACITY),
+					color: NIGHT_COLOR
+				});
+			}
+			bandSteps.push({
+				depression: 90,
+				opacity: NIGHT_OPACITY,
+				color: NIGHT_COLOR
+			});
+			let prevOpacity = 0;
+			for (const b of bandSteps) {
+				const terminator = calculateTerminatorContinuous(now, Math.min(b.depression, 89));
+				const bandOpacity = b.opacity - prevOpacity;
+				if (bandOpacity < .002 || terminator.sunset.length === 0) {
+					prevOpacity = b.opacity;
+					continue;
+				}
+				const poly = buildNightPolygon(terminator);
+				if (poly.length < 3) continue;
+				[
+					0,
+					360,
+					-360
+				].forEach((offset) => {
+					const shifted = poly.map(([lat, lon]) => [lat, lon + offset]);
+					addLayer(L.polygon(shifted, {
+						color: "transparent",
+						fillColor: b.color,
+						fillOpacity: bandOpacity,
+						interactive: false
+					}));
+				});
+				prevOpacity = b.opacity;
+			}
+			const terminatorEdge = calculateTerminatorContinuous(now, 0);
+			const glowColor = isSatelliteTile ? "#a0a0a0" : "#909090";
+			const glowOpacity = isSatelliteTile ? .15 : .08;
+			const coreColor = isSatelliteTile ? "#c0c0c0" : "#a8a8a8";
+			const coreOpacity = isSatelliteTile ? .45 : .3;
+			if (terminatorEdge.sunset.length > 2) {
+				const sunsetLine = terminatorEdge.sunset.map(([lat, lon]) => [lat, lon]);
+				const sunriseLine = terminatorEdge.sunrise.map(([lat, lon]) => [lat, lon]);
+				[
+					0,
+					360,
+					-360
+				].forEach((offset) => {
+					addLayer(L.polyline(sunsetLine.map(([lat, lon]) => [lat, lon + offset]), {
+						color: glowColor,
+						weight: 3,
+						opacity: glowOpacity,
+						interactive: false,
+						smoothFactor: 1.5
+					}));
+					addLayer(L.polyline(sunriseLine.map(([lat, lon]) => [lat, lon + offset]), {
+						color: glowColor,
+						weight: 3,
+						opacity: glowOpacity,
+						interactive: false,
+						smoothFactor: 1.5
+					}));
+					addLayer(L.polyline(sunsetLine.map(([lat, lon]) => [lat, lon + offset]), {
+						color: coreColor,
+						weight: 1,
+						opacity: coreOpacity,
+						interactive: false,
+						smoothFactor: 1.5
+					}));
+					addLayer(L.polyline(sunriseLine.map(([lat, lon]) => [lat, lon + offset]), {
+						color: coreColor,
+						weight: 1,
+						opacity: coreOpacity,
+						interactive: false,
+						smoothFactor: 1.5
+					}));
+				});
+			}
+		}
+		if (lightSources && lightSources.length > 0 && internalTerminator) {
+			const now = terminatorTime ?? /* @__PURE__ */ new Date();
+			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;
+			for (const light of lightSources) {
+				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 r = light.radius ?? 4;
+				const intensity = light.intensity ?? .8;
+				const color = light.color ?? "#ffeedd";
+				const alpha = intensity * nightFactor;
+				const glowMarker = L.circleMarker([light.latitude, light.longitude], {
+					radius: r * 2,
+					fillColor: color,
+					fillOpacity: alpha * .4,
+					color,
+					weight: 0,
+					interactive: !!light.label
+				});
+				addLayer(glowMarker);
+				const coreMarker = L.circleMarker([light.latitude, light.longitude], {
+					radius: Math.max(1, r * .5),
+					fillColor: color,
+					fillOpacity: Math.min(1, alpha * 1.2),
+					color: "transparent",
+					weight: 0,
+					interactive: false
+				});
+				addLayer(coreMarker);
+				if (light.label) glowMarker.bindTooltip(light.label, {
+					permanent: false,
+					direction: "top",
+					className: "zendir-leaflet-tooltip"
+				});
+			}
+		}
+		if (internalGrid) {
+			const gridStyle = {
+				color: "rgba(157, 112, 255, 0.12)",
+				weight: .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 = geodesicCirclePointsContinuous(gs.latitude, gs.longitude, radius, 64);
+				[
+					0,
+					360,
+					-360
+				].forEach((offset) => {
+					addLayer(L.polygon(ring.map(([lat, lon]) => [lat, lon + offset]), {
+						color: `${statusColor}55`,
+						fillColor: statusColor,
+						fillOpacity: .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: "auto",
+				className: "zendir-leaflet-tooltip"
+			});
+			marker.on("click", () => {
+				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;
+			segmentsWithWorldCopies(splitPolylineAtAntimeridian(track.slice(0, futureIdx).map((p) => [p.latitude, p.longitude]))).forEach((seg) => {
+				if (seg.length >= 2) addLayer(L.polyline(seg, {
+					color,
+					weight: 2.5,
+					opacity: 1
+				}));
+			});
+			if (futureIdx < track.length) segmentsWithWorldCopies(splitPolylineAtAntimeridian(track.slice(futureIdx).map((p) => [p.latitude, p.longitude]))).forEach((seg) => {
+				if (seg.length >= 2) addLayer(L.polyline(seg, {
+					color,
+					weight: 1.5,
+					opacity: .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: .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: .9
+					}));
+				});
+			}
+			if (sat.passMarkers && sat.passMarkers.length > 0) sat.passMarkers.forEach((pm) => {
+				const pmColor = pm.type === "aos" ? "#56f000" : "#ff3838";
+				const pmMarker = L.circleMarker([pm.latitude, pm.longitude], {
+					radius: 5,
+					fillColor: pmColor,
+					color: `${pmColor}cc`,
+					weight: 1.5,
+					fillOpacity: .9
+				});
+				addLayer(pmMarker);
+				pmMarker.bindTooltip(`${pm.type.toUpperCase()}${pm.label ? ` – ${pm.label}` : ""}`, {
+					permanent: false,
+					direction: "auto",
+					className: "zendir-leaflet-tooltip"
+				});
+			});
+			if (sat.showFootprint && sat.footprintRadius) {
+				const last = track[futureIdx > 0 ? Math.min(futureIdx - 1, track.length - 1) : track.length - 1];
+				const ring = geodesicCirclePointsContinuous(last.latitude, last.longitude, sat.footprintRadius, 64);
+				[
+					0,
+					360,
+					-360
+				].forEach((offset) => {
+					addLayer(L.polygon(ring.map(([lat, lon]) => [lat, lon + offset]), {
+						color: `${color}50`,
+						fillColor: color,
+						fillOpacity: .03,
+						weight: 1,
+						dashArray: "4, 4",
+						interactive: false
+					}));
+				});
+			}
+			const current = track[futureIdx > 0 ? Math.min(futureIdx - 1, track.length - 1) : track.length - 1];
+			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: "auto",
+				className: "zendir-leaflet-tooltip"
+			});
+			satMarker.on("click", () => onSatelliteClick?.(sat.id));
+		});
+		if (showLegend && (allSatellites.length > 0 || groundStations.length > 0)) {
+			const legend = new (L.Control.extend({ onAdd() {
+				const div = L.DomUtil.create("div", "leaflet-legend-zendir");
+				div.style.cssText = `
+            padding: 8px 12px; background: ${tokens.colors.background.surface}; border: 1px solid ${tokens.colors.border.default};
+            border-radius: 8px; color: ${tokens.colors.text.primary}; 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,
-    internalTerminator,
-    terminatorTime,
-    nightTileUrl,
-    lightSources,
-    internalGrid,
-    showEquator,
-    showLegend,
-    tileStyle,
-    tokens.colors.text.secondary,
-    addLayer,
-    clearLayers,
-    onSatelliteClick,
-    onStationClick
-  ]);
-  useEffect(() => {
-    if (!ready || !mapRef.current) return;
-    const group = pinsGroupRef.current;
-    if (!group) return;
-    group.clearLayers();
-    if (!pins || pins.length === 0) return;
-    const accentColor = tokens.colors.accent.primary;
-    pins.forEach((pin) => {
-      const pinColor = pin.color || accentColor;
-      const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="36" viewBox="0 0 24 36">
+				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:${STATUS_COLOR_MAP.standby};`;
+					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;
+			} }))({ position: "topleft" });
+			legend.addTo(map);
+			controlsRef.current.push(legend);
+		}
+	}, [
+		ready,
+		allSatellites,
+		groundStations,
+		internalTerminator,
+		terminatorTime,
+		nightTileUrl,
+		lightSources,
+		internalGrid,
+		showEquator,
+		showLegend,
+		tileStyle,
+		tokens.colors.text.primary,
+		tokens.colors.background.surface,
+		tokens.colors.border.default,
+		addLayer,
+		clearLayers,
+		onSatelliteClick,
+		onStationClick
+	]);
+	useEffect(() => {
+		if (!ready || !mapRef.current) return;
+		const group = pinsGroupRef.current;
+		if (!group) return;
+		group.clearLayers();
+		if (!pins || pins.length === 0) return;
+		const accentColor = tokens.colors.accent.primary;
+		pins.forEach((pin) => {
+			const pinColor = pin.color || accentColor;
+			const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="36" viewBox="0 0 24 36">
         <defs>
           <filter id="pin-shadow-${pin.id}" x="-30%" y="-10%" width="160%" height="140%">
             <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.35"/>
@@ -679,382 +695,444 @@ function GroundTrackMapLeaflet({
           <circle cx="12" cy="12" r="4" fill="#0d1323" stroke="rgba(255,255,255,0.7)" stroke-width="0.8"/>
         </g>
       </svg>`;
-      const icon = L.divIcon({
-        html: svg,
-        className: "zendir-pin-icon",
-        iconSize: [24, 36],
-        iconAnchor: [12, 36],
-        tooltipAnchor: [0, -36]
-      });
-      const marker = L.marker([pin.latitude, pin.longitude], {
-        icon,
-        draggable: pinsEditable,
-        title: pin.label ?? ""
-      });
-      const tooltipLines = [
-        pin.label ? `<strong>${pin.label}</strong>` : "",
-        pin.description ? `<div style="opacity:0.7;font-size:11px">${pin.description}</div>` : "",
-        `<div style="font-size:10px;opacity:0.5;font-family:monospace">${pin.latitude.toFixed(4)}°, ${pin.longitude.toFixed(4)}°</div>`,
-        pin.createdBy ? `<div style="font-size:10px;opacity:0.4;margin-top:2px">by ${pin.createdBy}</div>` : ""
-      ].filter(Boolean).join("");
-      marker.bindTooltip(tooltipLines, {
-        className: "zendir-pin-tooltip",
-        direction: "top",
-        offset: [0, -4]
-      });
-      if (pinsEditable) {
-        marker.on("dragend", () => {
-          const latlng = marker.getLatLng();
-          onPinUpdate == null ? void 0 : onPinUpdate({ ...pin, latitude: latlng.lat, longitude: latlng.lng });
-        });
-        marker.on("contextmenu", (e) => {
-          L.DomEvent.stopPropagation(e);
-          onPinRemove == null ? void 0 : onPinRemove(pin.id);
-        });
-      }
-      group.addLayer(marker);
-    });
-  }, [ready, pins, pinsEditable, onPinUpdate, onPinRemove, tokens.colors.accent.primary]);
-  useEffect(() => {
-    if (!ready || !mapRef.current || !pinsEditable || !onPinAdd) return;
-    const map = mapRef.current;
-    const handleClick = (e) => {
-      var _a, _b, _c;
-      if ((_c = (_b = (_a = e.originalEvent) == null ? void 0 : _a.target) == null ? void 0 : _b.closest) == null ? void 0 : _c.call(_b, ".leaflet-marker-icon")) return;
-      onPinAdd({
-        latitude: e.latlng.lat,
-        longitude: e.latlng.lng,
-        label: "",
-        color: tokens.colors.accent.primary
-      });
-    };
-    map.on("click", handleClick);
-    return () => {
-      map.off("click", handleClick);
-    };
-  }, [ready, pinsEditable, onPinAdd, tokens.colors.accent.primary]);
-  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 handleZoomIn = useCallback(() => {
-    var _a;
-    (_a = mapRef.current) == null ? void 0 : _a.zoomIn();
-  }, []);
-  const handleZoomOut = useCallback(() => {
-    var _a;
-    (_a = mapRef.current) == null ? void 0 : _a.zoomOut();
-  }, []);
-  const resolvedMinHeight = minHeight || (typeof height === "number" ? `${height}px` : "400px");
-  const isEmpty = allSatellites.length === 0 && groundStations.length === 0 && (!pins || pins.length === 0);
-  const ctrlBtnBase = {
-    background: "rgba(20, 24, 38, 0.92)",
-    backdropFilter: "blur(8px)",
-    WebkitBackdropFilter: "blur(8px)",
-    border: "1px solid rgba(120, 100, 180, 0.18)",
-    color: "#c8c0d8",
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    transition: "background 0.15s, border-color 0.15s"
-  };
-  const ctrlHover = (e) => {
-    e.currentTarget.style.background = "rgba(30, 34, 52, 0.95)";
-    e.currentTarget.style.borderColor = "rgba(157, 112, 255, 0.4)";
-  };
-  const ctrlLeave = (e) => {
-    e.currentTarget.style.background = "rgba(20, 24, 38, 0.92)";
-    e.currentTarget.style.borderColor = "rgba(120, 100, 180, 0.18)";
-  };
-  const overlayItems = [];
-  overlayItems.push({ id: "terminator", label: "Day / Night", enabled: internalTerminator });
-  overlayItems.push({ id: "grid", label: "Grid Lines", enabled: internalGrid });
-  for (const l of customLayers ?? []) {
-    overlayItems.push({ id: l.id, label: l.label, enabled: customLayerState[l.id] ?? (l.defaultEnabled ?? true) });
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `zendir-ground-track-map zendir-ground-track-map-leaflet${pinsEditable ? " zendir-pins-editable" : ""} ${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
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: 10,
-              right: 10,
-              zIndex: 1e3,
-              display: "flex",
-              flexDirection: "row",
-              gap: 4,
-              alignItems: "flex-start",
-              pointerEvents: "none"
-            },
-            children: [
-              showRecenterButton && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: handleRecenter,
-                  title: "Recenter map to fit all assets and ground stations",
-                  "aria-label": "Recenter map",
-                  style: {
-                    ...ctrlBtnBase,
-                    borderRadius: 4,
-                    padding: "6px 8px",
-                    gap: 4,
-                    fontSize: 10,
-                    fontWeight: 500,
-                    letterSpacing: "0.03em",
-                    pointerEvents: "auto"
-                  },
-                  onMouseEnter: ctrlHover,
-                  onMouseLeave: ctrlLeave,
-                  children: /* @__PURE__ */ jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", children: [
-                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
-                    /* @__PURE__ */ jsx("path", { d: "M12 2v4M12 18v4M2 12h4M18 12h4" })
-                  ] })
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { ref: layersPanelRef, style: { position: "relative", pointerEvents: "auto" }, children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setLayersPanelOpen((o) => !o),
-                    title: "Map layers",
-                    "aria-label": "Toggle map layers panel",
-                    "aria-expanded": layersPanelOpen,
-                    style: {
-                      ...ctrlBtnBase,
-                      borderRadius: 4,
-                      padding: "6px 8px",
-                      pointerEvents: "auto",
-                      borderColor: layersPanelOpen ? "rgba(157, 112, 255, 0.4)" : void 0,
-                      background: layersPanelOpen ? "rgba(30, 34, 52, 0.95)" : ctrlBtnBase.background
-                    },
-                    onMouseEnter: ctrlHover,
-                    onMouseLeave: ctrlLeave,
-                    children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinejoin: "round", children: [
-                      /* @__PURE__ */ jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
-                      /* @__PURE__ */ jsx("path", { d: "M2 17l10 5 10-5" }),
-                      /* @__PURE__ */ jsx("path", { d: "M2 12l10 5 10-5" })
-                    ] })
-                  }
-                ),
-                layersPanelOpen && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      position: "absolute",
-                      top: "calc(100% + 6px)",
-                      right: 0,
-                      minWidth: 180,
-                      background: "rgba(16, 18, 30, 0.96)",
-                      backdropFilter: "blur(16px)",
-                      WebkitBackdropFilter: "blur(16px)",
-                      border: "1px solid rgba(120, 100, 180, 0.18)",
-                      borderRadius: 6,
-                      padding: "8px 0",
-                      boxShadow: "0 8px 32px rgba(0,0,0,0.5)"
-                    },
-                    children: [
-                      !isExplicitTileUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx("div", { style: {
-                          padding: "4px 12px 6px",
-                          fontSize: 9,
-                          fontWeight: 600,
-                          letterSpacing: "0.08em",
-                          textTransform: "uppercase",
-                          color: "#7a748e"
-                        }, children: "Base Map" }),
-                        /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 2, padding: "0 8px 8px" }, children: ["dark", "satellite"].map((style) => /* @__PURE__ */ jsxs(
-                          "button",
-                          {
-                            type: "button",
-                            onClick: () => handleTileStyleChange(style),
-                            "aria-pressed": tileStyle === style,
-                            style: {
-                              flex: 1,
-                              background: tileStyle === style ? "rgba(157, 112, 255, 0.18)" : "rgba(255,255,255,0.03)",
-                              border: `1px solid ${tileStyle === style ? "rgba(157, 112, 255, 0.35)" : "rgba(120, 100, 180, 0.1)"}`,
-                              borderRadius: 4,
-                              color: tileStyle === style ? "#d0c4ee" : "#7a748e",
-                              cursor: "pointer",
-                              padding: "5px 6px",
-                              fontSize: 10,
-                              fontWeight: tileStyle === style ? 600 : 400,
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center",
-                              gap: 4,
-                              transition: "all 0.15s ease"
-                            },
-                            children: [
-                              style === "dark" ? /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" }) }) : /* @__PURE__ */ jsxs("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-                                /* @__PURE__ */ jsx("path", { d: "M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" })
-                              ] }),
-                              style === "dark" ? "Dark" : "Satellite"
-                            ]
-                          },
-                          style
-                        )) }),
-                        /* @__PURE__ */ jsx("div", { style: { height: 1, background: "rgba(120, 100, 180, 0.1)", margin: "0 8px" } })
-                      ] }),
-                      /* @__PURE__ */ jsx("div", { style: {
-                        padding: `${isExplicitTileUrl ? "4px" : "8px"} 12px 4px`,
-                        fontSize: 9,
-                        fontWeight: 600,
-                        letterSpacing: "0.08em",
-                        textTransform: "uppercase",
-                        color: "#7a748e"
-                      }, children: "Overlays" }),
-                      overlayItems.map((item) => /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => handleLayerToggle(item.id, !item.enabled),
-                          style: {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: 8,
-                            width: "100%",
-                            padding: "5px 12px",
-                            background: "transparent",
-                            border: "none",
-                            color: item.enabled ? "#c8c0d8" : "#5a5470",
-                            cursor: "pointer",
-                            fontSize: 11,
-                            textAlign: "left",
-                            transition: "background 0.1s"
-                          },
-                          onMouseEnter: (e) => {
-                            e.currentTarget.style.background = "rgba(157, 112, 255, 0.08)";
-                          },
-                          onMouseLeave: (e) => {
-                            e.currentTarget.style.background = "transparent";
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx("span", { style: {
-                              width: 14,
-                              height: 14,
-                              borderRadius: 3,
-                              border: `1.5px solid ${item.enabled ? "rgba(157, 112, 255, 0.6)" : "rgba(120, 100, 180, 0.25)"}`,
-                              background: item.enabled ? "rgba(157, 112, 255, 0.22)" : "transparent",
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center",
-                              flexShrink: 0,
-                              transition: "all 0.15s ease"
-                            }, children: item.enabled && /* @__PURE__ */ jsx("svg", { width: "9", height: "9", viewBox: "0 0 12 12", fill: "none", stroke: "#d0c4ee", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M2 6l3 3 5-5" }) }) }),
-                            item.label
-                          ]
-                        },
-                        item.id
-                      ))
-                    ]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", pointerEvents: "auto" }, children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: handleZoomIn,
-                    title: "Zoom in",
-                    "aria-label": "Zoom in",
-                    style: {
-                      ...ctrlBtnBase,
-                      borderRadius: "4px 4px 0 0",
-                      borderBottom: "none",
-                      width: 30,
-                      height: 28,
-                      fontSize: 16,
-                      fontWeight: 300,
-                      pointerEvents: "auto"
-                    },
-                    onMouseEnter: ctrlHover,
-                    onMouseLeave: ctrlLeave,
-                    children: "+"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: handleZoomOut,
-                    title: "Zoom out",
-                    "aria-label": "Zoom out",
-                    style: {
-                      ...ctrlBtnBase,
-                      borderRadius: "0 0 4px 4px",
-                      width: 30,
-                      height: 28,
-                      fontSize: 16,
-                      fontWeight: 300,
-                      pointerEvents: "auto"
-                    },
-                    onMouseEnter: ctrlHover,
-                    onMouseLeave: ctrlLeave,
-                    children: "−"
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
+			const icon = L.divIcon({
+				html: svg,
+				className: "zendir-pin-icon",
+				iconSize: [24, 36],
+				iconAnchor: [12, 36],
+				tooltipAnchor: [0, -36]
+			});
+			const marker = L.marker([pin.latitude, pin.longitude], {
+				icon,
+				draggable: pinsEditable,
+				title: pin.label ?? ""
+			});
+			const tooltipLines = [
+				pin.label ? `<strong>${pin.label}</strong>` : "",
+				pin.description ? `<div style="opacity:0.7;font-size:11px">${pin.description}</div>` : "",
+				`<div style="font-size:10px;opacity:0.5;font-family:monospace">${pin.latitude.toFixed(4)}°, ${pin.longitude.toFixed(4)}°</div>`,
+				pin.createdBy ? `<div style="font-size:10px;opacity:0.4;margin-top:2px">by ${pin.createdBy}</div>` : ""
+			].filter(Boolean).join("");
+			marker.bindTooltip(tooltipLines, {
+				className: "zendir-pin-tooltip",
+				direction: "top",
+				offset: [0, -4]
+			});
+			if (pinsEditable) {
+				marker.on("dragend", () => {
+					const latlng = marker.getLatLng();
+					onPinUpdate?.({
+						...pin,
+						latitude: latlng.lat,
+						longitude: latlng.lng
+					});
+				});
+				marker.on("contextmenu", (e) => {
+					L.DomEvent.stopPropagation(e);
+					onPinRemove?.(pin.id);
+				});
+			}
+			group.addLayer(marker);
+		});
+	}, [
+		ready,
+		pins,
+		pinsEditable,
+		onPinUpdate,
+		onPinRemove,
+		tokens.colors.accent.primary
+	]);
+	useEffect(() => {
+		if (!ready || !mapRef.current || !pinsEditable || !onPinAdd) return;
+		const map = mapRef.current;
+		const handleClick = (e) => {
+			if ((e.originalEvent?.target)?.closest?.(".leaflet-marker-icon")) return;
+			onPinAdd({
+				latitude: e.latlng.lat,
+				longitude: e.latlng.lng,
+				label: "",
+				color: tokens.colors.accent.primary
+			});
+		};
+		map.on("click", handleClick);
+		return () => {
+			map.off("click", handleClick);
+		};
+	}, [
+		ready,
+		pinsEditable,
+		onPinAdd,
+		tokens.colors.accent.primary
+	]);
+	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 handleZoomIn = useCallback(() => {
+		mapRef.current?.zoomIn();
+	}, []);
+	const handleZoomOut = useCallback(() => {
+		mapRef.current?.zoomOut();
+	}, []);
+	const resolvedMinHeight = minHeight || (typeof height === "number" ? `${height}px` : "400px");
+	const isEmpty = allSatellites.length === 0 && groundStations.length === 0 && (!pins || pins.length === 0);
+	const ctrlBtnBase = {
+		background: "rgba(20, 24, 38, 0.92)",
+		backdropFilter: "blur(8px)",
+		WebkitBackdropFilter: "blur(8px)",
+		border: "1px solid rgba(120, 100, 180, 0.18)",
+		color: "#c8c0d8",
+		cursor: "pointer",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		transition: "background 0.15s, border-color 0.15s"
+	};
+	const ctrlHover = (e) => {
+		e.currentTarget.style.background = "rgba(30, 34, 52, 0.95)";
+		e.currentTarget.style.borderColor = "rgba(157, 112, 255, 0.4)";
+	};
+	const ctrlLeave = (e) => {
+		e.currentTarget.style.background = "rgba(20, 24, 38, 0.92)";
+		e.currentTarget.style.borderColor = "rgba(120, 100, 180, 0.18)";
+	};
+	const overlayItems = [];
+	overlayItems.push({
+		id: "terminator",
+		label: "Day / Night",
+		enabled: internalTerminator
+	});
+	overlayItems.push({
+		id: "grid",
+		label: "Grid Lines",
+		enabled: internalGrid
+	});
+	for (const l of customLayers ?? []) overlayItems.push({
+		id: l.id,
+		label: l.label,
+		enabled: customLayerState[l.id] ?? l.defaultEnabled ?? true
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: `zendir-ground-track-map zendir-ground-track-map-leaflet${pinsEditable ? " zendir-pins-editable" : ""} ${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
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "absolute",
+					top: 10,
+					right: 10,
+					zIndex: 1e3,
+					display: "flex",
+					flexDirection: "row",
+					gap: 4,
+					alignItems: "flex-start",
+					pointerEvents: "none"
+				},
+				children: [
+					showRecenterButton && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: handleRecenter,
+						title: "Recenter map to fit all assets and ground stations",
+						"aria-label": "Recenter map",
+						style: {
+							...ctrlBtnBase,
+							borderRadius: 4,
+							padding: "6px 8px",
+							gap: 4,
+							fontSize: 10,
+							fontWeight: 500,
+							letterSpacing: "0.03em",
+							pointerEvents: "auto"
+						},
+						onMouseEnter: ctrlHover,
+						onMouseLeave: ctrlLeave,
+						children: /* @__PURE__ */ jsxs("svg", {
+							width: "13",
+							height: "13",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2.2",
+							children: [/* @__PURE__ */ jsx("circle", {
+								cx: "12",
+								cy: "12",
+								r: "3"
+							}), /* @__PURE__ */ jsx("path", { d: "M12 2v4M12 18v4M2 12h4M18 12h4" })]
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						ref: layersPanelRef,
+						style: {
+							position: "relative",
+							pointerEvents: "auto"
+						},
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setLayersPanelOpen((o) => !o),
+							title: "Map layers",
+							"aria-label": "Toggle map layers panel",
+							"aria-expanded": layersPanelOpen,
+							style: {
+								...ctrlBtnBase,
+								borderRadius: 4,
+								padding: "6px 8px",
+								pointerEvents: "auto",
+								borderColor: layersPanelOpen ? "rgba(157, 112, 255, 0.4)" : ctrlBtnBase.border ? void 0 : "rgba(120, 100, 180, 0.18)",
+								background: layersPanelOpen ? "rgba(30, 34, 52, 0.95)" : ctrlBtnBase.background
+							},
+							onMouseEnter: ctrlHover,
+							onMouseLeave: ctrlLeave,
+							children: /* @__PURE__ */ jsxs("svg", {
+								width: "14",
+								height: "14",
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "1.8",
+								strokeLinejoin: "round",
+								children: [
+									/* @__PURE__ */ jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
+									/* @__PURE__ */ jsx("path", { d: "M2 17l10 5 10-5" }),
+									/* @__PURE__ */ jsx("path", { d: "M2 12l10 5 10-5" })
+								]
+							})
+						}), layersPanelOpen && /* @__PURE__ */ jsxs("div", {
+							style: {
+								position: "absolute",
+								top: "calc(100% + 6px)",
+								right: 0,
+								minWidth: 180,
+								background: "rgba(16, 18, 30, 0.96)",
+								backdropFilter: "blur(16px)",
+								WebkitBackdropFilter: "blur(16px)",
+								border: "1px solid rgba(120, 100, 180, 0.18)",
+								borderRadius: 6,
+								padding: "8px 0",
+								boxShadow: "0 8px 32px rgba(0,0,0,0.5)"
+							},
+							children: [
+								!isExplicitTileUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
+									/* @__PURE__ */ jsx("div", {
+										style: {
+											padding: "4px 12px 6px",
+											fontSize: 9,
+											fontWeight: 600,
+											letterSpacing: "0.08em",
+											textTransform: "uppercase",
+											color: "#7a748e"
+										},
+										children: "Base Map"
+									}),
+									/* @__PURE__ */ jsx("div", {
+										style: {
+											display: "flex",
+											gap: 2,
+											padding: "0 8px 8px"
+										},
+										children: ["dark", "satellite"].map((style) => /* @__PURE__ */ jsxs("button", {
+											type: "button",
+											onClick: () => handleTileStyleChange(style),
+											"aria-pressed": tileStyle === style,
+											style: {
+												flex: 1,
+												background: tileStyle === style ? "rgba(157, 112, 255, 0.18)" : "rgba(255,255,255,0.03)",
+												border: `1px solid ${tileStyle === style ? "rgba(157, 112, 255, 0.35)" : "rgba(120, 100, 180, 0.1)"}`,
+												borderRadius: 4,
+												color: tileStyle === style ? "#d0c4ee" : "#7a748e",
+												cursor: "pointer",
+												padding: "5px 6px",
+												fontSize: 10,
+												fontWeight: tileStyle === style ? 600 : 400,
+												display: "flex",
+												alignItems: "center",
+												justifyContent: "center",
+												gap: 4,
+												transition: "all 0.15s ease"
+											},
+											children: [style === "dark" ? /* @__PURE__ */ jsx("svg", {
+												width: "10",
+												height: "10",
+												viewBox: "0 0 24 24",
+												fill: "currentColor",
+												stroke: "none",
+												children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" })
+											}) : /* @__PURE__ */ jsxs("svg", {
+												width: "10",
+												height: "10",
+												viewBox: "0 0 24 24",
+												fill: "none",
+												stroke: "currentColor",
+												strokeWidth: "2",
+												children: [/* @__PURE__ */ jsx("circle", {
+													cx: "12",
+													cy: "12",
+													r: "10"
+												}), /* @__PURE__ */ jsx("path", { d: "M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" })]
+											}), style === "dark" ? "Dark" : "Satellite"]
+										}, style))
+									}),
+									/* @__PURE__ */ jsx("div", { style: {
+										height: 1,
+										background: "rgba(120, 100, 180, 0.1)",
+										margin: "0 8px"
+									} })
+								] }),
+								/* @__PURE__ */ jsx("div", {
+									style: {
+										padding: `${isExplicitTileUrl ? "4px" : "8px"} 12px 4px`,
+										fontSize: 9,
+										fontWeight: 600,
+										letterSpacing: "0.08em",
+										textTransform: "uppercase",
+										color: "#7a748e"
+									},
+									children: "Overlays"
+								}),
+								overlayItems.map((item) => /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									onClick: () => handleLayerToggle(item.id, !item.enabled),
+									style: {
+										display: "flex",
+										alignItems: "center",
+										gap: 8,
+										width: "100%",
+										padding: "5px 12px",
+										background: "transparent",
+										border: "none",
+										color: item.enabled ? "#c8c0d8" : "#5a5470",
+										cursor: "pointer",
+										fontSize: 11,
+										textAlign: "left",
+										transition: "background 0.1s"
+									},
+									onMouseEnter: (e) => {
+										e.currentTarget.style.background = "rgba(157, 112, 255, 0.08)";
+									},
+									onMouseLeave: (e) => {
+										e.currentTarget.style.background = "transparent";
+									},
+									children: [/* @__PURE__ */ jsx("span", {
+										style: {
+											width: 14,
+											height: 14,
+											borderRadius: 3,
+											border: `1.5px solid ${item.enabled ? "rgba(157, 112, 255, 0.6)" : "rgba(120, 100, 180, 0.25)"}`,
+											background: item.enabled ? "rgba(157, 112, 255, 0.22)" : "transparent",
+											display: "flex",
+											alignItems: "center",
+											justifyContent: "center",
+											flexShrink: 0,
+											transition: "all 0.15s ease"
+										},
+										children: item.enabled && /* @__PURE__ */ jsx("svg", {
+											width: "9",
+											height: "9",
+											viewBox: "0 0 12 12",
+											fill: "none",
+											stroke: "#d0c4ee",
+											strokeWidth: "2",
+											children: /* @__PURE__ */ jsx("path", { d: "M2 6l3 3 5-5" })
+										})
+									}), item.label]
+								}, item.id))
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							flexDirection: "column",
+							pointerEvents: "auto"
+						},
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: handleZoomIn,
+							title: "Zoom in",
+							"aria-label": "Zoom in",
+							style: {
+								...ctrlBtnBase,
+								borderRadius: "4px 4px 0 0",
+								borderBottom: "none",
+								width: 30,
+								height: 28,
+								fontSize: 16,
+								fontWeight: 300,
+								pointerEvents: "auto"
+							},
+							onMouseEnter: ctrlHover,
+							onMouseLeave: ctrlLeave,
+							children: "+"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: handleZoomOut,
+							title: "Zoom out",
+							"aria-label": "Zoom out",
+							style: {
+								...ctrlBtnBase,
+								borderRadius: "0 0 4px 4px",
+								width: 30,
+								height: 28,
+								fontSize: 16,
+								fontWeight: 300,
+								pointerEvents: "auto"
+							},
+							onMouseEnter: ctrlHover,
+							onMouseLeave: ctrlLeave,
+							children: "−"
+						})]
+					})
+				]
+			})
+		]
+	});
 }
-export {
-  GroundTrackMapLeaflet
-};
-//# sourceMappingURL=GroundTrackMapLeaflet.js.map
+//#endregion
+export { GroundTrackMapLeaflet, GroundTrackMapLeaflet as default };
+
+//# sourceMappingURL=GroundTrackMapLeaflet.js.map