@zendir/ui 0.1.15 → 0.2.1

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,24 +68,37 @@ function drawCoverageEllipse(ctx, centerLat, centerLon, radiusDeg, W, H, lonToX,
   }
   ctx.closePath();
 }
-function calculateTerminator(date, numPoints = 72) {
+function calculateTerminatorContinuous(date, depressionDeg = 0, numPoints = 360) {
   const dayOfYear = Math.floor((date.getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 864e5);
   const declination = -23.44 * Math.cos(2 * Math.PI / 365 * (dayOfYear + 10));
   const decRad = declination * Math.PI / 180;
   const hourAngle = (date.getUTCHours() + date.getUTCMinutes() / 60) / 24 * 360 - 180;
-  const points = [];
+  const depRad = depressionDeg * Math.PI / 180;
+  const sunset = [];
+  const sunrise = [];
   for (let i = 0; i <= numPoints; i++) {
-    const latRad = (i / numPoints * 180 - 90) * (Math.PI / 180);
-    const cosH = -Math.tan(latRad) * Math.tan(decRad);
-    let lon;
-    if (cosH < -1) lon = hourAngle + 180;
-    else if (cosH > 1) lon = hourAngle;
-    else lon = hourAngle + Math.acos(cosH) * 180 / Math.PI;
-    while (lon > 180) lon -= 360;
-    while (lon < -180) lon += 360;
-    points.push({ lat: i / numPoints * 180 - 90, lon });
+    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, hourAngle]);
+      sunrise.push([lat, hourAngle + 360]);
+    } else {
+      const H = Math.acos(cosH) * 180 / Math.PI;
+      sunset.push([lat, hourAngle + H]);
+      sunrise.push([lat, hourAngle + 360 - H]);
+    }
   }
-  return points;
+  return { sunset, sunrise };
+}
+function buildNightPolygon(terminator) {
+  const { sunset, sunrise } = terminator;
+  if (!sunset.length || !sunrise.length) return [];
+  const poly = [];
+  poly.push(...sunset);
+  poly.push(...[...sunrise].reverse());
+  return poly;
 }
 function GroundTrackMap({
   groundTrack,
@@ -94,6 +107,7 @@ function GroundTrackMap({
   accessMask,
   teamPaths,
   showTerminator = true,
+  terminatorTime,
   showGrid = true,
   showLegend = true,
   showEquator = true,
@@ -109,7 +123,12 @@ function GroundTrackMap({
   onSatelliteClick,
   onStationClick,
   mapProvider = "leaflet",
-  tileUrl
+  tileUrl,
+  pins,
+  pinsEditable = false,
+  onPinAdd,
+  onPinUpdate,
+  onPinRemove
 }) {
   const { tokens } = useTheme();
   const canvasRef = useRef(null);
@@ -194,55 +213,54 @@ 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;
+      const now = terminatorTime ?? /* @__PURE__ */ new Date();
+      const BAND_STEP = 2;
+      const MAX_DEP = 24;
+      const NIGHT_ALPHA = 0.55;
+      const bandSteps = [];
+      for (let d = 0; d <= MAX_DEP; d += BAND_STEP) {
+        const t = Math.min(d / 18, 1);
+        const alpha = t * t * (NIGHT_ALPHA * 0.82) + (d > 18 ? (d - 18) / 6 * (NIGHT_ALPHA * 0.18) : 0);
+        bandSteps.push({ depression: d, alpha: Math.min(alpha, NIGHT_ALPHA) });
       }
-      ctx.closePath();
-      ctx.fill();
-      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);
+      bandSteps.push({ depression: 90, alpha: NIGHT_ALPHA });
+      let prevAlpha = 0;
+      for (const zone of bandSteps) {
+        const dep = Math.min(zone.depression, 89);
+        const bandAlpha = zone.alpha - prevAlpha;
+        if (bandAlpha < 2e-3) {
+          prevAlpha = zone.alpha;
+          continue;
+        }
+        const terminator = calculateTerminatorContinuous(now, dep);
+        if (terminator.sunset.length === 0) {
+          prevAlpha = zone.alpha;
+          continue;
+        }
+        const poly = buildNightPolygon(terminator);
+        if (poly.length < 3) {
+          prevAlpha = zone.alpha;
+          continue;
+        }
+        ctx.fillStyle = `rgba(0, 6, 24, ${bandAlpha.toFixed(4)})`;
+        for (const offset of [-360, 0, 360]) {
+          ctx.beginPath();
+          for (let i = 0; i < poly.length; i++) {
+            const lat = poly[i][0];
+            const lon = poly[i][1] + offset;
+            const x = lonToX(lon, W);
+            const y = latToY(lat, H);
+            if (i === 0) {
+              ctx.moveTo(x, y);
+            } else {
+              ctx.lineTo(x, y);
+            }
+          }
           ctx.closePath();
           ctx.fill();
-          ctx.beginPath();
-          ctx.moveTo(0, y);
         }
-        ctx.lineTo(x, y);
-        prevLX = x;
+        prevAlpha = zone.alpha;
       }
-      ctx.closePath();
-      ctx.fill();
     }
     ctx.fillStyle = COLORS.land;
     ctx.strokeStyle = "rgba(100, 120, 160, 0.25)";
@@ -739,13 +757,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 +907,7 @@ function GroundTrackMap({
               allSatellites,
               groundStations,
               showTerminator,
+              terminatorTime,
               showGrid,
               showLegend,
               showEquator,
@@ -874,7 +921,12 @@ function GroundTrackMap({
               tileUrl,
               className,
               onSatelliteClick,
-              onStationClick
+              onStationClick,
+              pins,
+              pinsEditable,
+              onPinAdd,
+              onPinUpdate,
+              onPinRemove
             }
           )
         }