@zendir/ui 0.1.0

package/dist/react/astro/MissionClock.js

@@ -0,0 +1,411 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useState, useMemo, useCallback, useEffect } from "react";
+import { tabularNumsStyle, classNames } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+function formatMET(ms, showMilliseconds = false) {
+  const totalSeconds = Math.floor(Math.abs(ms) / 1e3);
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor(totalSeconds % 86400 / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  const sign = ms < 0 ? "-" : "";
+  if (showMilliseconds) {
+    const millis = Math.floor(Math.abs(ms) % 1e3);
+    return `${sign}${days.toString().padStart(2, "0")}:${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}.${millis.toString().padStart(3, "0")}`;
+  }
+  return `${sign}${days.toString().padStart(2, "0")}:${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+}
+function formatTimerDuration(ms, showDays = false) {
+  const totalSeconds = Math.floor(Math.abs(ms) / 1e3);
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor(totalSeconds % 86400 / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  const sign = ms < 0 ? "-" : "";
+  if (showDays && days > 0) {
+    return `${sign}${days}d ${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  }
+  if (hours > 0 || showDays) {
+    return `${sign}${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  }
+  return `${sign}${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+}
+function getJulianDay(date) {
+  const start = new Date(Date.UTC(date.getUTCFullYear(), 0, 0));
+  const diff = date.getTime() - start.getTime();
+  const oneDay = 1e3 * 60 * 60 * 24;
+  const day = Math.floor(diff / oneDay);
+  return day.toString().padStart(3, "0");
+}
+function normalizeTimerConfig(timer, label) {
+  if (!timer) return void 0;
+  if (timer instanceof Date) {
+    return {
+      label,
+      timestamp: timer,
+      direction: "countdown"
+    };
+  }
+  return timer;
+}
+const TimerDisplay = memo(function TimerDisplay2({
+  timer,
+  currentTime,
+  tokens,
+  compact = false
+}) {
+  const diff = timer.direction === "countdown" ? timer.timestamp.getTime() - currentTime.getTime() : currentTime.getTime() - timer.timestamp.getTime();
+  const isNegative = diff < 0;
+  const statusColor = timer.status ? tokens.colors.status[timer.status] : isNegative ? tokens.colors.status.caution : tokens.colors.status.normal;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: compact ? "center" : "flex-start",
+        flexDirection: compact ? "row" : "column",
+        gap: compact ? 8 : 2,
+        padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+        backgroundColor: `${statusColor}15`,
+        borderRadius: tokens.borderRadius.sm,
+        border: `1px solid ${statusColor}30`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: tokens.typography.fontSize.xs,
+              fontWeight: tokens.typography.fontWeight.semibold,
+              color: statusColor,
+              textTransform: "uppercase",
+              letterSpacing: tokens.typography.letterSpacing.wide
+            },
+            children: timer.label
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              fontSize: compact ? tokens.typography.fontSize.sm : tokens.typography.fontSize.base,
+              fontWeight: tokens.typography.fontWeight.bold,
+              // Bold (700) for timer readability
+              fontFamily: tokens.typography.fontFamily.mono,
+              color: statusColor,
+              ...tabularNumsStyle
+            },
+            children: [
+              isNegative ? "+" : "",
+              formatTimerDuration(diff, timer.showDays)
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+const MissionClock = memo(function MissionClock2({
+  format = "24h",
+  timezone = "UTC",
+  hideSeconds = false,
+  small = false,
+  showDate = false,
+  dateFormat = "iso",
+  className = "",
+  onClick,
+  aosTimer,
+  losTimer,
+  customTimers = [],
+  timeSource = "realtime",
+  simulationConfig,
+  customTime,
+  missionStart,
+  showMET = false,
+  updateInterval = 1e3,
+  compact = false,
+  showMilliseconds = false
+}) {
+  const { tokens, theme } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const [time, setTime] = useState(() => getCurrentTimeFromSource());
+  const normalizedAOS = useMemo(() => normalizeTimerConfig(aosTimer, "AOS"), [aosTimer]);
+  const normalizedLOS = useMemo(() => normalizeTimerConfig(losTimer, "LOS"), [losTimer]);
+  const allTimers = useMemo(() => {
+    const timers = [];
+    if (normalizedAOS) timers.push(normalizedAOS);
+    if (normalizedLOS) timers.push(normalizedLOS);
+    return [...timers, ...customTimers];
+  }, [normalizedAOS, normalizedLOS, customTimers]);
+  function getCurrentTimeFromSource() {
+    switch (timeSource) {
+      case "simulation":
+        if (simulationConfig) {
+          if (simulationConfig.getCurrentTime) {
+            return simulationConfig.getCurrentTime();
+          }
+          const epoch = typeof simulationConfig.epoch === "string" ? new Date(simulationConfig.epoch) : simulationConfig.epoch;
+          const elapsed = (simulationConfig.elapsedSeconds || 0) * 1e3;
+          return new Date(epoch.getTime() + elapsed);
+        }
+        return /* @__PURE__ */ new Date();
+      case "custom":
+        if (customTime) {
+          return typeof customTime === "function" ? customTime() : customTime;
+        }
+        return /* @__PURE__ */ new Date();
+      case "realtime":
+      default:
+        return /* @__PURE__ */ new Date();
+    }
+  }
+  const formatTimeDisplay = useCallback((date) => {
+    if (showMET && missionStart) {
+      const start = typeof missionStart === "string" ? new Date(missionStart) : missionStart;
+      const elapsed = date.getTime() - start.getTime();
+      return formatMET(elapsed, showMilliseconds);
+    }
+    if (format === "met" && missionStart) {
+      const start = typeof missionStart === "string" ? new Date(missionStart) : missionStart;
+      const elapsed = date.getTime() - start.getTime();
+      return formatMET(elapsed, showMilliseconds);
+    }
+    const hours = date.getUTCHours();
+    const mins = date.getUTCMinutes();
+    const secs = date.getUTCSeconds();
+    const millis = date.getUTCMilliseconds();
+    let hoursStr;
+    let suffix = "";
+    if (format === "12h") {
+      const h12 = hours % 12 || 12;
+      hoursStr = h12.toString().padStart(2, "0");
+      suffix = hours >= 12 ? " PM" : " AM";
+    } else {
+      hoursStr = hours.toString().padStart(2, "0");
+    }
+    const minsStr = mins.toString().padStart(2, "0");
+    const secsStr = secs.toString().padStart(2, "0");
+    const millisStr = millis.toString().padStart(3, "0");
+    if (hideSeconds) {
+      return `${hoursStr}:${minsStr}${suffix}`;
+    }
+    if (showMilliseconds) {
+      return `${hoursStr}:${minsStr}:${secsStr}.${millisStr}${suffix}`;
+    }
+    return `${hoursStr}:${minsStr}:${secsStr}${suffix}`;
+  }, [format, hideSeconds, showMET, missionStart, showMilliseconds]);
+  const formatDateDisplay = useCallback((date) => {
+    switch (dateFormat) {
+      case "julian": {
+        const year2 = date.getUTCFullYear();
+        const doy = getJulianDay(date);
+        return `${year2}/${doy}`;
+      }
+      case "gregorian": {
+        const year2 = date.getUTCFullYear();
+        const month2 = (date.getUTCMonth() + 1).toString().padStart(2, "0");
+        const day2 = date.getUTCDate().toString().padStart(2, "0");
+        return `${month2}/${day2}/${year2}`;
+      }
+      case "iso":
+      default:
+        if (format === "iso") {
+          return date.toISOString().split("T")[0];
+        }
+        const year = date.getUTCFullYear();
+        const month = (date.getUTCMonth() + 1).toString().padStart(2, "0");
+        const day = date.getUTCDate().toString().padStart(2, "0");
+        return `${year}-${month}-${day}`;
+    }
+  }, [format, dateFormat]);
+  useEffect(() => {
+    const effectiveInterval = showMilliseconds ? Math.min(updateInterval, 100) : hideSeconds ? 6e4 : updateInterval;
+    const intervalId = setInterval(() => {
+      setTime(getCurrentTimeFromSource());
+    }, effectiveInterval);
+    return () => clearInterval(intervalId);
+  }, [hideSeconds, updateInterval, showMilliseconds, timeSource, simulationConfig, customTime]);
+  const handleKeyDown = (e) => {
+    if (onClick && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      onClick();
+    }
+  };
+  const displayLabel = useMemo(() => {
+    if (showMET || format === "met") {
+      return "MET";
+    }
+    if (timeSource === "simulation") {
+      return "SIM";
+    }
+    return timezone;
+  }, [showMET, format, timeSource, timezone]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("zendir-mission-clock", className),
+      onClick,
+      onKeyDown: onClick ? handleKeyDown : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      role: "timer",
+      "aria-label": `Current time: ${formatTimeDisplay(time)} ${displayLabel}`,
+      style: {
+        display: "inline-flex",
+        flexDirection: compact ? "row" : "column",
+        alignItems: "center",
+        gap: compact ? 16 : 4,
+        padding: small ? `${tokens.spacing.xs} ${tokens.spacing.sm}` : `${tokens.spacing.sm} ${tokens.spacing.md}`,
+        backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
+        ...isTransparentTheme && { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" },
+        ...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
+        borderRadius: tokens.borderRadius.md,
+        cursor: onClick ? "pointer" : "default",
+        outline: "none",
+        transition: tokens.animation.fast,
+        ...tabularNumsStyle
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 2
+            },
+            children: [
+              showDate && dateFormat !== "none" && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: tokens.typography.fontSize.xs,
+                    fontWeight: tokens.typography.fontWeight.normal,
+                    fontFamily: tokens.typography.fontFamily.mono,
+                    color: tokens.colors.text.tertiary,
+                    letterSpacing: tokens.typography.letterSpacing.normal
+                  },
+                  children: formatDateDisplay(time)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: small ? tokens.typography.fontSize.base : tokens.typography.fontSize.xl,
+                    fontWeight: tokens.typography.fontWeight.bold,
+                    // Bold (700) for readability - time is critical info
+                    fontFamily: tokens.typography.fontFamily.mono,
+                    letterSpacing: tokens.typography.letterSpacing.normal,
+                    color: tokens.colors.text.primary
+                  },
+                  children: formatTimeDisplay(time)
+                }
+              ),
+              displayLabel && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: tokens.typography.fontSize.xs,
+                    fontWeight: tokens.typography.fontWeight.medium,
+                    color: timeSource === "simulation" ? tokens.colors.status.caution : tokens.colors.text.tertiary,
+                    textTransform: "uppercase",
+                    letterSpacing: tokens.typography.letterSpacing.wide
+                  },
+                  children: displayLabel
+                }
+              )
+            ]
+          }
+        ),
+        allTimers.length > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: compact ? "row" : "column",
+              gap: 8
+            },
+            children: allTimers.map((timer, index) => /* @__PURE__ */ jsx(
+              TimerDisplay,
+              {
+                timer,
+                currentTime: time,
+                tokens,
+                compact
+              },
+              `${timer.label}-${index}`
+            ))
+          }
+        )
+      ]
+    }
+  );
+});
+memo(function SimpleTimer2({
+  label,
+  timestamp,
+  direction = "countdown",
+  status,
+  showDays = false,
+  className = ""
+}) {
+  const { tokens } = useTheme();
+  const [now, setNow] = useState(/* @__PURE__ */ new Date());
+  useEffect(() => {
+    const interval = setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e3);
+    return () => clearInterval(interval);
+  }, []);
+  const timer = { label, timestamp, direction, status, showDays };
+  return /* @__PURE__ */ jsx("div", { className: classNames("zendir-simple-timer", className), children: /* @__PURE__ */ jsx(TimerDisplay, { timer, currentTime: now, tokens }) });
+});
+memo(function MissionElapsedTime2({
+  launchTime,
+  showMilliseconds = false,
+  className = "",
+  small = false
+}) {
+  return /* @__PURE__ */ jsx(
+    MissionClock,
+    {
+      format: "met",
+      missionStart: launchTime,
+      showMET: true,
+      showMilliseconds,
+      className,
+      small,
+      timezone: ""
+    }
+  );
+});
+memo(function SimulationClock2({
+  epoch,
+  elapsedSeconds = 0,
+  timeScale = 1,
+  isRunning = true,
+  showDate = true,
+  dateFormat = "julian",
+  className = "",
+  small = false
+}) {
+  return /* @__PURE__ */ jsx(
+    MissionClock,
+    {
+      timeSource: "simulation",
+      simulationConfig: {
+        epoch,
+        elapsedSeconds,
+        timeScale,
+        isRunning
+      },
+      showDate,
+      dateFormat,
+      className,
+      small
+    }
+  );
+});
+export {
+  MissionClock
+};
+//# sourceMappingURL=MissionClock.js.map

package/dist/react/astro/MissionClock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MissionClock.js","sources":["../../../src/react/astro/MissionClock.tsx"],"sourcesContent":["/**\n * @zendir/ui - MissionClock Component (Pure React)\n * \n * Advanced mission time display following Astro UX patterns with full\n * space operations support.\n * \n * Features:\n * - Theme-integrated via useTheme()\n * - UTC/Zulu time display\n * - Configurable formats (12h, 24h, ISO)\n * - Optional seconds display\n * - AOS/LOS timer support (Acquisition/Loss of Signal)\n * - MET (Mission Elapsed Time) display\n * - Julian day format (DOY-###)\n * - Simulation time support (custom epoch/time source)\n * - Tabular numbers for stability\n * - Zendir SDK integration for real-time data\n * \n * Space Operations Terminology:\n * - AOS: Acquisition of Signal - when satellite rises above horizon\n * - LOS: Loss of Signal - when satellite passes below horizon\n * - TCA: Time of Closest Approach - maximum elevation point\n * - MET: Mission Elapsed Time - time since launch (dd:hh:mm:ss)\n * - DOY: Day of Year - Julian day format\n */\n\nimport React, { memo, useState, useEffect, useCallback, useMemo } from 'react';\nimport { useTheme } from '../theme';\nimport { classNames, tabularNumsStyle } from '../utils';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type ClockFormat = '12h' | '24h' | 'iso' | 'met';\nexport type DateFormat = 'iso' | 'julian' | 'gregorian' | 'none';\nexport type TimeSource = 'realtime' | 'simulation' | 'custom';\n\n/**\n * Timer configuration for AOS/LOS countdown/up timers\n */\nexport interface TimerConfig {\n  /** Timer label (e.g., \"AOS\", \"LOS\", \"MET\") */\n  label: string;\n  /** Target timestamp (for countdown) or start timestamp (for countup) */\n  timestamp: Date;\n  /** Timer direction: 'countdown' counts to target, 'countup' counts from start */\n  direction: 'countdown' | 'countup';\n  /** Optional status color */\n  status?: 'normal' | 'caution' | 'critical' | 'standby';\n  /** Show days in timer format */\n  showDays?: boolean;\n}\n\n/**\n * Simulation time configuration\n */\nexport interface SimulationTimeConfig {\n  /** Simulation epoch (t=0) as Date or ISO string */\n  epoch: Date | string;\n  /** Current simulation time offset in seconds from epoch */\n  elapsedSeconds?: number;\n  /** Time scale factor (1 = realtime, 2 = 2x speed, etc.) */\n  timeScale?: number;\n  /** Whether simulation is running */\n  isRunning?: boolean;\n  /** Callback to get current simulation time */\n  getCurrentTime?: () => Date;\n}\n\nexport interface MissionClockProps {\n  /** Clock format */\n  format?: ClockFormat;\n  /** Timezone label to display */\n  timezone?: string;\n  /** Hide seconds */\n  hideSeconds?: boolean;\n  /** Small size variant */\n  small?: boolean;\n  /** Show date */\n  showDate?: boolean;\n  /** Date format (iso, julian, gregorian) */\n  dateFormat?: DateFormat;\n  /** Custom className */\n  className?: string;\n  /** Click handler */\n  onClick?: () => void;\n  \n  // === AOS/LOS Timer Support ===\n  /** AOS timer - countdown/up to Acquisition of Signal */\n  aosTimer?: TimerConfig | Date;\n  /** LOS timer - countdown/up to Loss of Signal */\n  losTimer?: TimerConfig | Date;\n  /** Additional custom timers */\n  customTimers?: TimerConfig[];\n  \n  // === Simulation Time Support ===\n  /** Time source: realtime, simulation, or custom */\n  timeSource?: TimeSource;\n  /** Simulation time configuration (for timeSource='simulation') */\n  simulationConfig?: SimulationTimeConfig;\n  /** Custom time provider (for timeSource='custom') */\n  customTime?: Date | (() => Date);\n  \n  // === Mission Elapsed Time ===\n  /** Mission start time for MET display */\n  missionStart?: Date | string;\n  /** Show MET (Mission Elapsed Time) instead of wall clock */\n  showMET?: boolean;\n  \n  // === Advanced Options ===\n  /** Update interval in milliseconds (default: 1000) */\n  updateInterval?: number;\n  /** Compact mode - single line display */\n  compact?: boolean;\n  /** Show milliseconds */\n  showMilliseconds?: boolean;\n}\n\n// ============================================================================\n// Utility Functions\n// ============================================================================\n\n/**\n * Format duration as dd:hh:mm:ss (MET format)\n */\nfunction formatMET(ms: number, showMilliseconds = false): string {\n  const totalSeconds = Math.floor(Math.abs(ms) / 1000);\n  const days = Math.floor(totalSeconds / 86400);\n  const hours = Math.floor((totalSeconds % 86400) / 3600);\n  const minutes = Math.floor((totalSeconds % 3600) / 60);\n  const seconds = totalSeconds % 60;\n  \n  const sign = ms < 0 ? '-' : '';\n  \n  if (showMilliseconds) {\n    const millis = Math.floor(Math.abs(ms) % 1000);\n    return `${sign}${days.toString().padStart(2, '0')}:${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${millis.toString().padStart(3, '0')}`;\n  }\n  \n  return `${sign}${days.toString().padStart(2, '0')}:${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n}\n\n/**\n * Format duration for timers (compact: hh:mm:ss or mm:ss)\n */\nfunction formatTimerDuration(ms: number, showDays = false): string {\n  const totalSeconds = Math.floor(Math.abs(ms) / 1000);\n  const days = Math.floor(totalSeconds / 86400);\n  const hours = Math.floor((totalSeconds % 86400) / 3600);\n  const minutes = Math.floor((totalSeconds % 3600) / 60);\n  const seconds = totalSeconds % 60;\n  \n  const sign = ms < 0 ? '-' : '';\n  \n  if (showDays && days > 0) {\n    return `${sign}${days}d ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n  }\n  \n  if (hours > 0 || showDays) {\n    return `${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n  }\n  \n  return `${sign}${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n}\n\n/**\n * Get Julian day (day of year 001-366)\n */\nfunction getJulianDay(date: Date): string {\n  const start = new Date(Date.UTC(date.getUTCFullYear(), 0, 0));\n  const diff = date.getTime() - start.getTime();\n  const oneDay = 1000 * 60 * 60 * 24;\n  const day = Math.floor(diff / oneDay);\n  return day.toString().padStart(3, '0');\n}\n\n/**\n * Normalize timer config from Date or TimerConfig\n */\nfunction normalizeTimerConfig(timer: TimerConfig | Date | undefined, label: string): TimerConfig | undefined {\n  if (!timer) return undefined;\n  if (timer instanceof Date) {\n    return {\n      label,\n      timestamp: timer,\n      direction: 'countdown',\n    };\n  }\n  return timer;\n}\n\n// ============================================================================\n// Timer Sub-component\n// ============================================================================\n\ninterface TimerDisplayProps {\n  timer: TimerConfig;\n  currentTime: Date;\n  tokens: ReturnType<typeof useTheme>['tokens'];\n  compact?: boolean;\n}\n\nconst TimerDisplay = memo(function TimerDisplay({\n  timer,\n  currentTime,\n  tokens,\n  compact = false,\n}: TimerDisplayProps) {\n  const diff = timer.direction === 'countdown'\n    ? timer.timestamp.getTime() - currentTime.getTime()\n    : currentTime.getTime() - timer.timestamp.getTime();\n  \n  const isNegative = diff < 0;\n  const statusColor = timer.status \n    ? tokens.colors.status[timer.status]\n    : isNegative \n      ? tokens.colors.status.caution \n      : tokens.colors.status.normal;\n  \n  return (\n    <div\n      style={{\n        display: 'flex',\n        alignItems: compact ? 'center' : 'flex-start',\n        flexDirection: compact ? 'row' : 'column',\n        gap: compact ? 8 : 2,\n        padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n        backgroundColor: `${statusColor}15`,\n        borderRadius: tokens.borderRadius.sm,\n        border: `1px solid ${statusColor}30`,\n      }}\n    >\n      <span\n        style={{\n          fontSize: tokens.typography.fontSize.xs,\n          fontWeight: tokens.typography.fontWeight.semibold,\n          color: statusColor,\n          textTransform: 'uppercase',\n          letterSpacing: tokens.typography.letterSpacing.wide,\n        }}\n      >\n        {timer.label}\n      </span>\n      <span\n        style={{\n          fontSize: compact ? tokens.typography.fontSize.sm : tokens.typography.fontSize.base,\n          fontWeight: tokens.typography.fontWeight.bold, // Bold (700) for timer readability\n          fontFamily: tokens.typography.fontFamily.mono,\n          color: statusColor,\n          ...tabularNumsStyle,\n        }}\n      >\n        {isNegative ? '+' : ''}{formatTimerDuration(diff, timer.showDays)}\n      </span>\n    </div>\n  );\n});\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\n/**\n * MissionClock - Advanced mission time display for space operations\n * \n * Supports real-time clock, simulation time, MET (Mission Elapsed Time),\n * and AOS/LOS timers following Astro UX Design System patterns.\n * \n * @example\n * ```tsx\n * // Basic clock\n * <MissionClock format=\"24h\" timezone=\"UTC\" />\n * \n * // With AOS/LOS timers\n * <MissionClock\n *   format=\"24h\"\n *   aosTimer={{ label: 'AOS', timestamp: new Date('2024-03-15T10:30:00Z'), direction: 'countdown' }}\n *   losTimer={{ label: 'LOS', timestamp: new Date('2024-03-15T10:45:00Z'), direction: 'countdown' }}\n * />\n * \n * // Simulation time\n * <MissionClock\n *   timeSource=\"simulation\"\n *   simulationConfig={{\n *     epoch: new Date('2026-01-01T00:00:00Z'),\n *     elapsedSeconds: 3600,\n *     timeScale: 1,\n *   }}\n * />\n * \n * // Mission Elapsed Time\n * <MissionClock\n *   showMET\n *   missionStart={new Date('2026-01-01T00:00:00Z')}\n * />\n * \n * // Julian day format\n * <MissionClock showDate dateFormat=\"julian\" />\n * ```\n */\nexport const MissionClock = memo(function MissionClock({\n  format = '24h',\n  timezone = 'UTC',\n  hideSeconds = false,\n  small = false,\n  showDate = false,\n  dateFormat = 'iso',\n  className = '',\n  onClick,\n  aosTimer,\n  losTimer,\n  customTimers = [],\n  timeSource = 'realtime',\n  simulationConfig,\n  customTime,\n  missionStart,\n  showMET = false,\n  updateInterval = 1000,\n  compact = false,\n  showMilliseconds = false,\n}: MissionClockProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  \n  // State for current time\n  const [time, setTime] = useState(() => getCurrentTimeFromSource());\n  \n  // Normalize timer configs\n  const normalizedAOS = useMemo(() => normalizeTimerConfig(aosTimer, 'AOS'), [aosTimer]);\n  const normalizedLOS = useMemo(() => normalizeTimerConfig(losTimer, 'LOS'), [losTimer]);\n  \n  // All timers combined\n  const allTimers = useMemo(() => {\n    const timers: TimerConfig[] = [];\n    if (normalizedAOS) timers.push(normalizedAOS);\n    if (normalizedLOS) timers.push(normalizedLOS);\n    return [...timers, ...customTimers];\n  }, [normalizedAOS, normalizedLOS, customTimers]);\n  \n  // Get current time based on source\n  function getCurrentTimeFromSource(): Date {\n    switch (timeSource) {\n      case 'simulation':\n        if (simulationConfig) {\n          if (simulationConfig.getCurrentTime) {\n            return simulationConfig.getCurrentTime();\n          }\n          const epoch = typeof simulationConfig.epoch === 'string' \n            ? new Date(simulationConfig.epoch) \n            : simulationConfig.epoch;\n          const elapsed = (simulationConfig.elapsedSeconds || 0) * 1000;\n          return new Date(epoch.getTime() + elapsed);\n        }\n        return new Date();\n        \n      case 'custom':\n        if (customTime) {\n          return typeof customTime === 'function' ? customTime() : customTime;\n        }\n        return new Date();\n        \n      case 'realtime':\n      default:\n        return new Date();\n    }\n  }\n  \n  // Format time display\n  const formatTimeDisplay = useCallback((date: Date): string => {\n    if (showMET && missionStart) {\n      const start = typeof missionStart === 'string' ? new Date(missionStart) : missionStart;\n      const elapsed = date.getTime() - start.getTime();\n      return formatMET(elapsed, showMilliseconds);\n    }\n    \n    if (format === 'met' && missionStart) {\n      const start = typeof missionStart === 'string' ? new Date(missionStart) : missionStart;\n      const elapsed = date.getTime() - start.getTime();\n      return formatMET(elapsed, showMilliseconds);\n    }\n    \n    const hours = date.getUTCHours();\n    const mins = date.getUTCMinutes();\n    const secs = date.getUTCSeconds();\n    const millis = date.getUTCMilliseconds();\n\n    let hoursStr: string;\n    let suffix = '';\n\n    if (format === '12h') {\n      const h12 = hours % 12 || 12;\n      hoursStr = h12.toString().padStart(2, '0');\n      suffix = hours >= 12 ? ' PM' : ' AM';\n    } else {\n      hoursStr = hours.toString().padStart(2, '0');\n    }\n\n    const minsStr = mins.toString().padStart(2, '0');\n    const secsStr = secs.toString().padStart(2, '0');\n    const millisStr = millis.toString().padStart(3, '0');\n\n    if (hideSeconds) {\n      return `${hoursStr}:${minsStr}${suffix}`;\n    }\n    \n    if (showMilliseconds) {\n      return `${hoursStr}:${minsStr}:${secsStr}.${millisStr}${suffix}`;\n    }\n    \n    return `${hoursStr}:${minsStr}:${secsStr}${suffix}`;\n  }, [format, hideSeconds, showMET, missionStart, showMilliseconds]);\n\n  // Format date display\n  const formatDateDisplay = useCallback((date: Date): string => {\n    switch (dateFormat) {\n      case 'julian': {\n        const year = date.getUTCFullYear();\n        const doy = getJulianDay(date);\n        return `${year}/${doy}`;\n      }\n      case 'gregorian': {\n        const year = date.getUTCFullYear();\n        const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');\n        const day = date.getUTCDate().toString().padStart(2, '0');\n        return `${month}/${day}/${year}`;\n      }\n      case 'iso':\n      default:\n        if (format === 'iso') {\n          return date.toISOString().split('T')[0];\n        }\n        const year = date.getUTCFullYear();\n        const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');\n        const day = date.getUTCDate().toString().padStart(2, '0');\n        return `${year}-${month}-${day}`;\n    }\n  }, [format, dateFormat]);\n\n  // Update time at interval\n  useEffect(() => {\n    // Calculate effective update interval\n    const effectiveInterval = showMilliseconds ? Math.min(updateInterval, 100) : (hideSeconds ? 60000 : updateInterval);\n    \n    const intervalId = setInterval(() => {\n      setTime(getCurrentTimeFromSource());\n    }, effectiveInterval);\n\n    return () => clearInterval(intervalId);\n  }, [hideSeconds, updateInterval, showMilliseconds, timeSource, simulationConfig, customTime]);\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (onClick && (e.key === 'Enter' || e.key === ' ')) {\n      e.preventDefault();\n      onClick();\n    }\n  };\n  \n  // Determine display label\n  const displayLabel = useMemo(() => {\n    if (showMET || format === 'met') {\n      return 'MET';\n    }\n    if (timeSource === 'simulation') {\n      return 'SIM';\n    }\n    return timezone;\n  }, [showMET, format, timeSource, timezone]);\n\n  return (\n    <div\n      className={classNames('zendir-mission-clock', className)}\n      onClick={onClick}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n      tabIndex={onClick ? 0 : undefined}\n      role=\"timer\"\n      aria-label={`Current time: ${formatTimeDisplay(time)} ${displayLabel}`}\n      style={{\n        display: 'inline-flex',\n        flexDirection: compact ? 'row' : 'column',\n        alignItems: 'center',\n        gap: compact ? 16 : 4,\n        padding: small ? `${tokens.spacing.xs} ${tokens.spacing.sm}` : `${tokens.spacing.sm} ${tokens.spacing.md}`,\n        backgroundColor: isTransparentTheme ? 'transparent' : tokens.colors.background.surface,\n        ...(isTransparentTheme && { backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)' as const }),\n        ...(tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` }),\n        borderRadius: tokens.borderRadius.md,\n        cursor: onClick ? 'pointer' : 'default',\n        outline: 'none',\n        transition: tokens.animation.fast,\n        ...tabularNumsStyle,\n      }}\n    >\n      {/* Main clock section */}\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'center',\n          gap: 2,\n        }}\n      >\n        {/* Date (optional) */}\n        {showDate && dateFormat !== 'none' && (\n          <span\n            style={{\n              fontSize: tokens.typography.fontSize.xs,\n              fontWeight: tokens.typography.fontWeight.normal,\n              fontFamily: tokens.typography.fontFamily.mono,\n              color: tokens.colors.text.tertiary,\n              letterSpacing: tokens.typography.letterSpacing.normal,\n            }}\n          >\n            {formatDateDisplay(time)}\n          </span>\n        )}\n\n        {/* Time - Using bold weight for critical time displays (Apple/Google best practice) */}\n        <span\n          style={{\n            fontSize: small ? tokens.typography.fontSize.base : tokens.typography.fontSize.xl,\n            fontWeight: tokens.typography.fontWeight.bold, // Bold (700) for readability - time is critical info\n            fontFamily: tokens.typography.fontFamily.mono,\n            letterSpacing: tokens.typography.letterSpacing.normal,\n            color: tokens.colors.text.primary,\n          }}\n        >\n          {formatTimeDisplay(time)}\n        </span>\n\n        {/* Label (timezone/MET/SIM) */}\n        {displayLabel && (\n          <span\n            style={{\n              fontSize: tokens.typography.fontSize.xs,\n              fontWeight: tokens.typography.fontWeight.medium,\n              color: timeSource === 'simulation' \n                ? tokens.colors.status.caution \n                : tokens.colors.text.tertiary,\n              textTransform: 'uppercase',\n              letterSpacing: tokens.typography.letterSpacing.wide,\n            }}\n          >\n            {displayLabel}\n          </span>\n        )}\n      </div>\n      \n      {/* AOS/LOS Timers */}\n      {allTimers.length > 0 && (\n        <div\n          style={{\n            display: 'flex',\n            flexDirection: compact ? 'row' : 'column',\n            gap: 8,\n          }}\n        >\n          {allTimers.map((timer, index) => (\n            <TimerDisplay\n              key={`${timer.label}-${index}`}\n              timer={timer}\n              currentTime={time}\n              tokens={tokens}\n              compact={compact}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n});\n\n// ============================================================================\n// Convenience Components\n// ============================================================================\n\n/**\n * SimpleTimer - Standalone countdown/up timer\n */\nexport interface SimpleTimerProps {\n  /** Timer label */\n  label: string;\n  /** Target/start timestamp */\n  timestamp: Date;\n  /** Timer direction */\n  direction?: 'countdown' | 'countup';\n  /** Status color */\n  status?: 'normal' | 'caution' | 'critical' | 'standby';\n  /** Show days */\n  showDays?: boolean;\n  /** Custom className */\n  className?: string;\n}\n\nexport const SimpleTimer = memo(function SimpleTimer({\n  label,\n  timestamp,\n  direction = 'countdown',\n  status,\n  showDays = false,\n  className = '',\n}: SimpleTimerProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const [now, setNow] = useState(new Date());\n  \n  useEffect(() => {\n    const interval = setInterval(() => setNow(new Date()), 1000);\n    return () => clearInterval(interval);\n  }, []);\n  \n  const timer: TimerConfig = { label, timestamp, direction, status, showDays };\n  \n  return (\n    <div className={classNames('zendir-simple-timer', className)}>\n      <TimerDisplay timer={timer} currentTime={now} tokens={tokens} />\n    </div>\n  );\n});\n\n/**\n * MissionElapsedTime - Dedicated MET display\n */\nexport interface MissionElapsedTimeProps {\n  /** Mission launch/start time */\n  launchTime: Date | string;\n  /** Show milliseconds */\n  showMilliseconds?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Small variant */\n  small?: boolean;\n}\n\nexport const MissionElapsedTime = memo(function MissionElapsedTime({\n  launchTime,\n  showMilliseconds = false,\n  className = '',\n  small = false,\n}: MissionElapsedTimeProps): React.ReactElement {\n  return (\n    <MissionClock\n      format=\"met\"\n      missionStart={launchTime}\n      showMET\n      showMilliseconds={showMilliseconds}\n      className={className}\n      small={small}\n      timezone=\"\"\n    />\n  );\n});\n\n/**\n * SimulationClock - Clock driven by simulation time\n */\nexport interface SimulationClockProps {\n  /** Simulation epoch */\n  epoch: Date | string;\n  /** Elapsed seconds from epoch */\n  elapsedSeconds?: number;\n  /** Time scale factor */\n  timeScale?: number;\n  /** Whether simulation is running */\n  isRunning?: boolean;\n  /** Show date */\n  showDate?: boolean;\n  /** Date format */\n  dateFormat?: DateFormat;\n  /** Custom className */\n  className?: string;\n  /** Small variant */\n  small?: boolean;\n}\n\nexport const SimulationClock = memo(function SimulationClock({\n  epoch,\n  elapsedSeconds = 0,\n  timeScale = 1,\n  isRunning = true,\n  showDate = true,\n  dateFormat = 'julian',\n  className = '',\n  small = false,\n}: SimulationClockProps): React.ReactElement {\n  return (\n    <MissionClock\n      timeSource=\"simulation\"\n      simulationConfig={{\n        epoch,\n        elapsedSeconds,\n        timeScale,\n        isRunning,\n      }}\n      showDate={showDate}\n      dateFormat={dateFormat}\n      className={className}\n      small={small}\n    />\n  );\n});\n\nexport default MissionClock;\n"],"names":["TimerDisplay","MissionClock","year","month","day","SimpleTimer","MissionElapsedTime","SimulationClock"],"mappings":"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"}

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

@@ -0,0 +1,60 @@
+import { default as React } from 'react';
+import { StatusLevel } from '../utils';
+
+export type MonitoringStatus = StatusLevel;
+export interface MonitoringIconProps {
+    /** Current status of the monitored item */
+    status: MonitoringStatus;
+    /** Primary label (always visible) */
+    label: string;
+    /** Sub-label for dynamic info (optional) */
+    sublabel?: string;
+    /** Icon name or custom icon element */
+    icon?: string | React.ReactNode;
+    /** Notification count badge */
+    notifications?: number;
+    /** Show tooltip on hover */
+    tooltip?: string;
+    /** Custom className */
+    className?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /**
+     * Show percentage arc display instead of icon
+     * When true, displays a circular arc showing the percentage value
+     */
+    showPercentage?: boolean;
+    /** Percentage value (0-100) - displayed as arc when showPercentage is true */
+    percentage?: number;
+    /** Map percentage to status colors (e.g., low = critical, high = normal) */
+    percentageToStatus?: 'ascending' | 'descending';
+    /** Show percentage value as text inside the arc */
+    showPercentageValue?: boolean;
+}
+/**
+ * MonitoringIcon - Pure React monitoring icon component
+ *
+ * Displays system status with icon, label, and optional notification badge.
+ * Fully Astro UX compliant with theme integration.
+ *
+ * @example
+ * ```tsx
+ * // Standard monitoring icon
+ * <MonitoringIcon
+ *   status="normal"
+ *   label="Power"
+ *   sublabel="85%"
+ *   icon="power"
+ * />
+ *
+ * // Percentage arc display
+ * <MonitoringIcon
+ *   status="normal"
+ *   label="Battery"
+ *   showPercentage
+ *   percentage={75}
+ *   percentageToStatus="ascending"
+ * />
+ * ```
+ */
+export declare const MonitoringIcon: React.NamedExoticComponent<MonitoringIconProps>;