@zendir/ui 0.2.3 → 0.2.4

package/dist/react/charts/GroundTrackMapLeaflet.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { GroundStation } from '../types';
-import { SatelliteTrack, GroundStationEnhanced, SROGroundStation, MapPin, LightSource } from './GroundTrackMap';
+import { SatelliteTrack, GroundStationEnhanced, SROGroundStation, MapPin, LightSource, MapLayerDef } from './GroundTrackMap';
 
 export type GroundStationMapItem = GroundStation | GroundStationEnhanced | SROGroundStation;
 export interface GroundTrackMapLeafletProps {
@@ -43,6 +43,10 @@ export interface GroundTrackMapLeafletProps {
     onPinAdd?: (pin: Omit<MapPin, 'id'>) => void;
     onPinUpdate?: (pin: MapPin) => void;
     onPinRemove?: (pinId: string) => void;
+    /** Custom overlay layers for the Layers panel */
+    customLayers?: MapLayerDef[];
+    /** Called when any layer is toggled */
+    onLayerChange?: (layerId: string, enabled: boolean) => void;
 }
-export declare function GroundTrackMapLeaflet({ allSatellites, groundStations, showTerminator, terminatorTime, showGrid, showLegend, showEquator, showRecenterButton, showMapStyleToggle, defaultCenter, defaultZoom, height, width, minHeight, emptyMessage, tileUrl, nightTileUrl, lightSources, className, onSatelliteClick, onStationClick, pins, pinsEditable, onPinAdd, onPinUpdate, onPinRemove, }: GroundTrackMapLeafletProps): React.ReactElement;
+export declare function GroundTrackMapLeaflet({ allSatellites, groundStations, showTerminator, terminatorTime, showGrid, showLegend, showEquator, showRecenterButton, showMapStyleToggle, defaultCenter, defaultZoom, height, width, minHeight, emptyMessage, tileUrl, nightTileUrl, lightSources, className, onSatelliteClick, onStationClick, pins, pinsEditable, onPinAdd, onPinUpdate, onPinRemove, customLayers, onLayerChange, }: GroundTrackMapLeafletProps): React.ReactElement;
 export default GroundTrackMapLeaflet;

package/dist/react/charts/GroundTrackMapLeaflet.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useState, useCallback, useEffect } from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } from "react";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 /* empty css                   */
@@ -160,7 +160,9 @@ function GroundTrackMapLeaflet({
   pinsEditable = false,
   onPinAdd,
   onPinUpdate,
-  onPinRemove
+  onPinRemove,
+  customLayers,
+  onLayerChange
 }) {
   const { tokens } = useTheme();
   const containerRef = useRef(null);
@@ -170,9 +172,71 @@ function GroundTrackMapLeaflet({
   const controlsRef = useRef([]);
   const pinsGroupRef = useRef(null);
   const [ready, setReady] = useState(false);
-  const [tileStyle, setTileStyle] = useState("dark");
+  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;
@@ -204,7 +268,6 @@ function GroundTrackMapLeaflet({
       maxBounds: [[-90, -540], [90, 540]],
       maxBoundsViscosity: 1
     });
-    L.control.zoom({ position: "topright" }).addTo(map);
     map.attributionControl.setPrefix("");
     const overlayGroup = L.layerGroup();
     overlayGroup.addTo(map);
@@ -279,7 +342,7 @@ function GroundTrackMapLeaflet({
     if (!ready || !mapRef.current) return;
     const map = mapRef.current;
     clearLayers();
-    if (nightTileUrl && showTerminator) {
+    if (nightTileUrl && internalTerminator) {
       const nightTile = L.tileLayer(nightTileUrl, {
         maxZoom: 19,
         crossOrigin: true,
@@ -288,7 +351,7 @@ function GroundTrackMapLeaflet({
       });
       addLayer(nightTile);
     }
-    if (showTerminator) {
+    if (internalTerminator) {
       const now = terminatorTime ?? /* @__PURE__ */ new Date();
       const BAND_STEP = 2;
       const MAX_DEP = 24;
@@ -345,7 +408,7 @@ function GroundTrackMapLeaflet({
         });
       }
     }
-    if (lightSources && lightSources.length > 0 && showTerminator) {
+    if (lightSources && lightSources.length > 0 && internalTerminator) {
       const now = terminatorTime ?? /* @__PURE__ */ new Date();
       const dayOfYear = Math.floor((now.getTime() - new Date(now.getFullYear(), 0, 0).getTime()) / 864e5);
       const declination = -23.44 * Math.cos(2 * Math.PI / 365 * (dayOfYear + 10));
@@ -391,7 +454,7 @@ function GroundTrackMapLeaflet({
         }
       }
     }
-    if (showGrid) {
+    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) {
@@ -583,11 +646,11 @@ function GroundTrackMapLeaflet({
     ready,
     allSatellites,
     groundStations,
-    showTerminator,
+    internalTerminator,
     terminatorTime,
     nightTileUrl,
     lightSources,
-    showGrid,
+    internalGrid,
     showEquator,
     showLegend,
     tokens.colors.text.secondary,
@@ -686,8 +749,42 @@ function GroundTrackMapLeaflet({
       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",
     {
@@ -725,22 +822,22 @@ function GroundTrackMapLeaflet({
             children: emptyMessage
           }
         ),
-        (showRecenterButton || showMapStyleToggle && !isExplicitTileUrl) && /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "zendir-map-controls",
             style: {
               position: "absolute",
-              bottom: 28,
-              left: 10,
+              top: 10,
+              right: 10,
               zIndex: 1e3,
               display: "flex",
               flexDirection: "row",
-              gap: 6,
-              alignItems: "flex-end"
+              gap: 4,
+              alignItems: "flex-start",
+              pointerEvents: "none"
             },
             children: [
-              showRecenterButton && /* @__PURE__ */ jsxs(
+              showRecenterButton && /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
@@ -748,86 +845,209 @@ function GroundTrackMapLeaflet({
                   title: "Recenter map to fit all assets and ground stations",
                   "aria-label": "Recenter map",
                   style: {
-                    background: "rgba(20, 24, 38, 0.92)",
-                    backdropFilter: "blur(8px)",
-                    WebkitBackdropFilter: "blur(8px)",
-                    border: "1px solid rgba(120, 100, 180, 0.2)",
+                    ...ctrlBtnBase,
                     borderRadius: 4,
-                    color: "#c8c0d8",
-                    cursor: "pointer",
-                    padding: "6px 10px",
-                    fontSize: 11,
+                    padding: "6px 8px",
+                    gap: 4,
+                    fontSize: 10,
                     fontWeight: 500,
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 5,
-                    transition: "background 0.15s, border-color 0.15s",
-                    letterSpacing: "0.02em"
-                  },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.background = "rgba(30, 34, 52, 0.95)";
-                    e.currentTarget.style.borderColor = "rgba(157, 112, 255, 0.4)";
+                    letterSpacing: "0.03em",
+                    pointerEvents: "auto"
                   },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.background = "rgba(20, 24, 38, 0.92)";
-                    e.currentTarget.style.borderColor = "rgba(120, 100, 180, 0.2)";
-                  },
-                  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"
-                  ]
+                  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" })
+                  ] })
                 }
               ),
-              showMapStyleToggle && !isExplicitTileUrl && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    background: "rgba(20, 24, 38, 0.92)",
-                    backdropFilter: "blur(8px)",
-                    WebkitBackdropFilter: "blur(8px)",
-                    border: "1px solid rgba(120, 100, 180, 0.2)",
-                    borderRadius: 4,
-                    display: "flex",
-                    overflow: "hidden"
-                  },
-                  children: ["dark", "satellite"].map((style) => /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setTileStyle(style),
-                      title: style === "dark" ? "Dark ops map" : "Satellite imagery",
-                      "aria-label": style === "dark" ? "Dark map style" : "Satellite imagery",
-                      "aria-pressed": tileStyle === style,
-                      style: {
-                        background: tileStyle === style ? "rgba(157, 112, 255, 0.22)" : "transparent",
-                        border: "none",
-                        borderRight: style === "dark" ? "1px solid rgba(120, 100, 180, 0.15)" : "none",
-                        color: tileStyle === style ? "#d0c4ee" : "#7a748e",
-                        cursor: "pointer",
-                        padding: "5px 8px",
-                        fontSize: 10,
-                        fontWeight: tileStyle === style ? 600 : 400,
-                        display: "flex",
-                        alignItems: "center",
-                        gap: 4,
-                        transition: "all 0.15s ease",
-                        letterSpacing: "0.02em"
-                      },
-                      children: [
-                        style === "dark" ? /* @__PURE__ */ jsx("svg", { width: "11", height: "11", 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: "11", height: "11", 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"
-                      ]
+              /* @__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
                     },
-                    style
-                  ))
-                }
-              )
+                    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: "−"
+                  }
+                )
+              ] })
             ]
           }
         )