@zendir/ui 0.1.15 → 0.2.0

package/dist/react/astro/index.d.ts

@@ -50,8 +50,8 @@ export type { NotificationProps, NotificationStatus } from './Notification';
  * ```
  */
 export { UnifiedTimeline as Timeline } from './UnifiedTimeline';
-export type { UnifiedTimelineProps as TimelineProps, TimelineEvent, TimelineTrackDef, TimelineViewMode, TimeFormat, TimelineFilter, } from './UnifiedTimeline';
-export { getTimelineEventDisplayStatus, isTimelineFilterActive, matchesTimelineFilter, } from './UnifiedTimeline';
+export type { UnifiedTimelineProps as TimelineProps, TimelineEvent, TimelineTeam, TimelineTrackDef, TimelineViewMode, TimeFormat, TimelineFilter, } from './UnifiedTimeline';
+export { TIMELINE_FILTER_TEAM_LEGACY, TIMELINE_FILTER_TEAM_NONE, getTimelineEventDisplayStatus, getTimelineTeamAccent, getTimelineTeamDisplayLabel, getTimelineTeamFilterKey, isTimelineFilterActive, matchesTimelineFilter, } from './UnifiedTimeline';
 /**
  * Status type (shared across components)
  * Follows Astro UX 6-level status semantics

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

@@ -62,6 +62,27 @@ export interface SROGroundStation {
     longitude: number;
     altitude?: number | null;
 }
+/**
+ * User-placed point-of-interest pin on the map.
+ * Designed for collaborative scenarios where operators share annotated locations
+ * across terminals in real time (e.g. targets, waypoints, hazard markers).
+ */
+export interface MapPin {
+    /** Unique identifier (used as key and for update/remove callbacks) */
+    id: string;
+    /** Latitude in degrees (−90 … 90) */
+    latitude: number;
+    /** Longitude in degrees (−180 … 180) */
+    longitude: number;
+    /** Short label displayed next to the pin (e.g. "Target Alpha") */
+    label?: string;
+    /** Pin color — any CSS color string. Defaults to accent primary. */
+    color?: string;
+    /** Optional description shown in tooltip on hover */
+    description?: string;
+    /** Who placed the pin (display-only; not enforced) */
+    createdBy?: string;
+}
 export interface GroundTrackMapProps {
     /** Single satellite ground track (legacy API) */
     groundTrack?: GroundTrackPoint[];
@@ -75,6 +96,10 @@ export interface GroundTrackMapProps {
     teamPaths?: TeamPath[];
     /** Show day/night terminator */
     showTerminator?: boolean;
+    /** Override the time used for the day/night terminator calculation.
+     *  Defaults to wall-clock `new Date()` when omitted.
+     *  Pass a simulation/mission UTC to keep the terminator in sync with a sim clock. */
+    terminatorTime?: Date;
     /** Show grid lines */
     showGrid?: boolean;
     /** Show legend */
@@ -107,6 +132,20 @@ export interface GroundTrackMapProps {
     mapProvider?: 'leaflet' | 'canvas';
     /** Tile URL for Leaflet (default: CartoDB dark). Ignored when mapProvider is 'canvas'. */
     tileUrl?: string;
+    /** Array of user-placed pins displayed on the map */
+    pins?: MapPin[];
+    /**
+     * Allow operators to place new pins by clicking the map.
+     * When true, a single-click on an empty area opens a pin creation flow.
+     * Requires `onPinAdd` to be set. Default false.
+     */
+    pinsEditable?: boolean;
+    /** Called when the user places a new pin (provides lat/lon; consumer assigns id and persists) */
+    onPinAdd?: (pin: Omit<MapPin, 'id'>) => void;
+    /** Called when the user edits an existing pin (label, color, description change) */
+    onPinUpdate?: (pin: MapPin) => void;
+    /** Called when the user removes a pin */
+    onPinRemove?: (pinId: string) => void;
 }
-export declare function GroundTrackMap({ groundTrack, satellites, groundStations, accessMask, teamPaths, showTerminator, showGrid, showLegend, showEquator, showRecenterButton, isLoading, emptyMessage, width, height, minHeight, defaultCenter, defaultZoom, className, onSatelliteClick, onStationClick, mapProvider, tileUrl, }: GroundTrackMapProps): React.ReactElement;
+export declare function GroundTrackMap({ groundTrack, satellites, groundStations, accessMask, teamPaths, showTerminator, terminatorTime, showGrid, showLegend, showEquator, showRecenterButton, isLoading, emptyMessage, width, height, minHeight, defaultCenter, defaultZoom, className, onSatelliteClick, onStationClick, mapProvider, tileUrl, pins, pinsEditable, onPinAdd, onPinUpdate, onPinRemove, }: GroundTrackMapProps): React.ReactElement;
 export default GroundTrackMap;

package/dist/react/charts/GroundTrackMap.js

@@ -68,15 +68,16 @@ function drawCoverageEllipse(ctx, centerLat, centerLon, radiusDeg, W, H, lonToX,
   }
   ctx.closePath();
 }
-function calculateTerminator(date, numPoints = 72) {
+function calculateTerminator(date, depressionDeg = 0, numPoints = 72) {
   const dayOfYear = Math.floor((date.getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 864e5);
   const declination = -23.44 * Math.cos(2 * Math.PI / 365 * (dayOfYear + 10));
   const decRad = declination * Math.PI / 180;
   const hourAngle = (date.getUTCHours() + date.getUTCMinutes() / 60) / 24 * 360 - 180;
+  const depRad = depressionDeg * Math.PI / 180;
   const points = [];
   for (let i = 0; i <= numPoints; i++) {
     const latRad = (i / numPoints * 180 - 90) * (Math.PI / 180);
-    const cosH = -Math.tan(latRad) * Math.tan(decRad);
+    const cosH = -(Math.sin(depRad) + Math.sin(latRad) * Math.sin(decRad)) / (Math.cos(latRad) * Math.cos(decRad));
     let lon;
     if (cosH < -1) lon = hourAngle + 180;
     else if (cosH > 1) lon = hourAngle;
@@ -94,6 +95,7 @@ function GroundTrackMap({
   accessMask,
   teamPaths,
   showTerminator = true,
+  terminatorTime,
   showGrid = true,
   showLegend = true,
   showEquator = true,
@@ -109,7 +111,12 @@ function GroundTrackMap({
   onSatelliteClick,
   onStationClick,
   mapProvider = "leaflet",
-  tileUrl
+  tileUrl,
+  pins,
+  pinsEditable = false,
+  onPinAdd,
+  onPinUpdate,
+  onPinRemove
 }) {
   const { tokens } = useTheme();
   const canvasRef = useRef(null);
@@ -194,55 +201,65 @@ function GroundTrackMap({
     ctx.fillStyle = COLORS.background;
     ctx.fillRect(0, 0, W, H);
     if (showTerminator) {
-      const terminator = calculateTerminator(/* @__PURE__ */ new Date());
-      ctx.fillStyle = COLORS.night;
-      ctx.beginPath();
-      ctx.moveTo(W, 0);
-      ctx.lineTo(W, H);
-      let prevRX = W;
-      for (let i = terminator.length - 1; i >= 0; i--) {
-        const x = lonToX(terminator[i].lon, W);
-        const y = latToY(terminator[i].lat, H);
-        if (Math.abs(x - prevRX) > W * 0.5 && i < terminator.length - 1) {
-          const edgeX = prevRX > W / 2 ? W : 0;
-          ctx.lineTo(edgeX, y);
-          ctx.closePath();
-          ctx.fill();
-          ctx.beginPath();
-          ctx.moveTo(W, y);
-        }
-        ctx.lineTo(x, y);
-        prevRX = x;
-      }
-      ctx.closePath();
-      ctx.fill();
+      const now = terminatorTime ?? /* @__PURE__ */ new Date();
+      const twilightZones = [
+        { depression: 6, alpha: 0.08 },
+        // civil twilight
+        { depression: 12, alpha: 0.1 },
+        // nautical twilight
+        { depression: 18, alpha: 0.12 },
+        // astronomical twilight
+        { depression: 90, alpha: 0.22 }
+        // full night (beyond 18°)
+      ];
       const normLon = (l) => {
         let r = l;
         while (r > 180) r -= 360;
         while (r < -180) r += 360;
         return r;
       };
-      ctx.beginPath();
-      ctx.moveTo(0, 0);
-      ctx.lineTo(0, H);
-      let prevLX = 0;
-      for (let i = terminator.length - 1; i >= 0; i--) {
-        const sunriseLon = normLon(terminator[i].lon - 180);
-        const x = lonToX(sunriseLon, W);
-        const y = latToY(terminator[i].lat, H);
-        if (Math.abs(x - prevLX) > W * 0.5 && i < terminator.length - 1) {
-          const edgeX = prevLX < W / 2 ? 0 : W;
-          ctx.lineTo(edgeX, y);
-          ctx.closePath();
-          ctx.fill();
-          ctx.beginPath();
-          ctx.moveTo(0, y);
+      const fillNightSide = (terminator, isSunrise) => {
+        ctx.beginPath();
+        if (isSunrise) {
+          ctx.moveTo(0, 0);
+          ctx.lineTo(0, H);
+        } else {
+          ctx.moveTo(W, 0);
+          ctx.lineTo(W, H);
         }
-        ctx.lineTo(x, y);
-        prevLX = x;
+        let prevX = isSunrise ? 0 : W;
+        for (let i = terminator.length - 1; i >= 0; i--) {
+          const tLon = isSunrise ? normLon(terminator[i].lon - 180) : terminator[i].lon;
+          const x = lonToX(tLon, W);
+          const y = latToY(terminator[i].lat, H);
+          if (Math.abs(x - prevX) > W * 0.5 && i < terminator.length - 1) {
+            const edgeX = isSunrise ? prevX < W / 2 ? 0 : W : prevX > W / 2 ? W : 0;
+            ctx.lineTo(edgeX, y);
+            ctx.closePath();
+            ctx.fill();
+            ctx.beginPath();
+            ctx.moveTo(isSunrise ? 0 : W, y);
+          }
+          ctx.lineTo(x, y);
+          prevX = x;
+        }
+        ctx.closePath();
+        ctx.fill();
+      };
+      let prevTerminator = null;
+      for (const zone of twilightZones) {
+        const dep = Math.min(zone.depression, 89);
+        const terminator = calculateTerminator(now, dep);
+        ctx.fillStyle = `rgba(0, 6, 24, ${zone.alpha})`;
+        if (prevTerminator) {
+          fillNightSide(terminator, false);
+          fillNightSide(terminator, true);
+        } else {
+          fillNightSide(terminator, false);
+          fillNightSide(terminator, true);
+        }
+        prevTerminator = terminator;
       }
-      ctx.closePath();
-      ctx.fill();
     }
     ctx.fillStyle = COLORS.land;
     ctx.strokeStyle = "rgba(100, 120, 160, 0.25)";
@@ -739,13 +756,41 @@ function GroundTrackMap({
         ctx.fillText(item.label, legendX + 20, iy + 7);
       });
     }
-    if (allSatellites.length === 0 && groundStations.length === 0) {
+    if (pins && pins.length > 0) {
+      pins.forEach((pin) => {
+        const px = lonToX(pin.longitude, W);
+        const py = latToY(pin.latitude, H);
+        const pinColor = pin.color || tokens.colors.accent.primary;
+        ctx.save();
+        ctx.shadowColor = "rgba(0,0,0,0.4)";
+        ctx.shadowBlur = 6;
+        ctx.shadowOffsetY = 2;
+        ctx.beginPath();
+        ctx.arc(px, py - 10, 6, Math.PI, 0);
+        ctx.lineTo(px, py);
+        ctx.closePath();
+        ctx.fillStyle = pinColor;
+        ctx.fill();
+        ctx.restore();
+        ctx.beginPath();
+        ctx.arc(px, py - 10, 2.5, 0, Math.PI * 2);
+        ctx.fillStyle = "#0d1323";
+        ctx.fill();
+        if (pin.label) {
+          ctx.fillStyle = "rgba(255,255,255,0.9)";
+          ctx.font = '10px "Inter", system-ui, sans-serif';
+          ctx.textAlign = "center";
+          ctx.fillText(pin.label, px, py - 20);
+        }
+      });
+    }
+    if (allSatellites.length === 0 && groundStations.length === 0 && (!pins || pins.length === 0)) {
       ctx.fillStyle = COLORS.text;
       ctx.font = '12px "Inter", system-ui, sans-serif';
       ctx.textAlign = "center";
       ctx.fillText(emptyMessage, W / 2, H / 2);
     }
-  }, [allSatellites, groundStations, height, showTerminator, showGrid, showLegend, showEquator, lonToX, latToY, COLORS, emptyMessage]);
+  }, [allSatellites, groundStations, height, showTerminator, terminatorTime, showGrid, showLegend, showEquator, lonToX, latToY, COLORS, emptyMessage, pins, tokens.colors.accent.primary]);
   const handleMouseMove = useCallback((e) => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -861,6 +906,7 @@ function GroundTrackMap({
               allSatellites,
               groundStations,
               showTerminator,
+              terminatorTime,
               showGrid,
               showLegend,
               showEquator,
@@ -874,7 +920,12 @@ function GroundTrackMap({
               tileUrl,
               className,
               onSatelliteClick,
-              onStationClick
+              onStationClick,
+              pins,
+              pinsEditable,
+              onPinAdd,
+              onPinUpdate,
+              onPinRemove
             }
           )
         }