@zendir/ui 0.5.0 → 0.6.1

package/dist/react/astro/MissionClock.js

@@ -1,414 +1,391 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useState, useMemo, useCallback, useEffect } from "react";
 import { useTheme } from "../theme/ThemeProvider.js";
-import { tabularNumsStyle, classNames } from "../utils/index.js";
+import { classNames, tabularNumsStyle } from "../utils/index.js";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/astro/MissionClock.tsx
+/**
+* @zendir/ui - MissionClock Component (Pure React)
+*
+* Advanced mission time display following Astro UX patterns with full
+* space operations support.
+*
+* Features:
+* - Theme-integrated via useTheme()
+* - UTC/Zulu time display
+* - Configurable formats (12h, 24h, ISO)
+* - Optional seconds display
+* - AOS/LOS timer support (Acquisition/Loss of Signal)
+* - MET (Mission Elapsed Time) display
+* - Julian day format (DOY-###)
+* - Simulation time support (custom epoch/time source)
+* - Tabular numbers for stability
+* - Zendir SDK integration for real-time data
+*
+* Space Operations Terminology:
+* - AOS: Acquisition of Signal - when satellite rises above horizon
+* - LOS: Loss of Signal - when satellite passes below horizon
+* - TCA: Time of Closest Approach - maximum elevation point
+* - MET: Mission Elapsed Time - time since launch (dd:hh:mm:ss)
+* - DOY: Day of Year - Julian day format
+*/
+/**
+* Format duration as dd:hh:mm:ss (MET format)
+*/
 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")}`;
+	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")}`;
 }
+/**
+* Format duration for timers (compact: hh:mm:ss or mm:ss)
+*/
 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")}`;
+	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")}`;
 }
+/**
+* Get Julian day (day of year 001-366)
+*/
 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");
+	const start = new Date(Date.UTC(date.getUTCFullYear(), 0, 0));
+	const diff = date.getTime() - start.getTime();
+	return Math.floor(diff / (1e3 * 60 * 60 * 24)).toString().padStart(3, "0");
 }
+/**
+* Normalize timer config from Date or TimerConfig
+*/
 function normalizeTimerConfig(timer, label) {
-  if (!timer) return void 0;
-  if (timer instanceof Date) {
-    return {
-      label,
-      timestamp: timer,
-      direction: "countdown"
-    };
-  }
-  return timer;
+	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)
-            ]
-          }
-        )
-      ]
-    }
-  );
+var TimerDisplay = memo(function TimerDisplay({ 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,
+				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}`
-            ))
-          }
-        )
-      ]
-    }
-  );
+/**
+* MissionClock - Advanced mission time display for space operations
+*
+* Supports real-time clock, simulation time, MET (Mission Elapsed Time),
+* and AOS/LOS timers following Astro UX Design System patterns.
+*
+* @example
+* ```tsx
+* // Basic clock
+* <MissionClock format="24h" timezone="UTC" />
+*
+* // With AOS/LOS timers
+* <MissionClock
+*   format="24h"
+*   aosTimer={{ label: 'AOS', timestamp: new Date('2024-03-15T10:30:00Z'), direction: 'countdown' }}
+*   losTimer={{ label: 'LOS', timestamp: new Date('2024-03-15T10:45:00Z'), direction: 'countdown' }}
+* />
+*
+* // Simulation time
+* <MissionClock
+*   timeSource="simulation"
+*   simulationConfig={{
+*     epoch: new Date('2026-01-01T00:00:00Z'),
+*     elapsedSeconds: 3600,
+*     timeScale: 1,
+*   }}
+* />
+*
+* // Mission Elapsed Time
+* <MissionClock
+*   showMET
+*   missionStart={new Date('2026-01-01T00:00:00Z')}
+* />
+*
+* // Julian day format
+* <MissionClock showDate dateFormat="julian" />
+* ```
+*/
+var MissionClock = memo(function MissionClock({ 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();
+			default: return /* @__PURE__ */ new Date();
+		}
+	}
+	const formatTimeDisplay = useCallback((date) => {
+		if (showMET && missionStart) {
+			const start = typeof missionStart === "string" ? new Date(missionStart) : missionStart;
+			return formatMET(date.getTime() - start.getTime(), showMilliseconds);
+		}
+		if (format === "met" && missionStart) {
+			const start = typeof missionStart === "string" ? new Date(missionStart) : missionStart;
+			return formatMET(date.getTime() - start.getTime(), showMilliseconds);
+		}
+		const hours = date.getUTCHours();
+		const mins = date.getUTCMinutes();
+		const secs = date.getUTCSeconds();
+		const millis = date.getUTCMilliseconds();
+		let hoursStr;
+		let suffix = "";
+		if (format === "12h") {
+			hoursStr = (hours % 12 || 12).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": return `${date.getUTCFullYear()}/${getJulianDay(date)}`;
+			case "gregorian": {
+				const year = date.getUTCFullYear();
+				return `${(date.getUTCMonth() + 1).toString().padStart(2, "0")}/${date.getUTCDate().toString().padStart(2, "0")}/${year}`;
+			}
+			default:
+				if (format === "iso") return date.toISOString().split("T")[0];
+				return `${date.getUTCFullYear()}-${(date.getUTCMonth() + 1).toString().padStart(2, "0")}-${date.getUTCDate().toString().padStart(2, "0")}`;
+		}
+	}, [format, dateFormat]);
+	useEffect(() => {
+		const intervalId = setInterval(() => {
+			setTime(getCurrentTimeFromSource());
+		}, showMilliseconds ? Math.min(updateInterval, 100) : hideSeconds ? 6e4 : updateInterval);
+		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,
+						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}`))
+		})]
+	});
 });
-const SimpleTimer = 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 }) });
+var SimpleTimer = memo(function SimpleTimer({ 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
+		})
+	});
 });
-const MissionElapsedTime = memo(function MissionElapsedTime2({
-  launchTime,
-  showMilliseconds = false,
-  className = "",
-  small = false
-}) {
-  return /* @__PURE__ */ jsx(
-    MissionClock,
-    {
-      format: "met",
-      missionStart: launchTime,
-      showMET: true,
-      showMilliseconds,
-      className,
-      small,
-      timezone: ""
-    }
-  );
+var MissionElapsedTime = memo(function MissionElapsedTime({ launchTime, showMilliseconds = false, className = "", small = false }) {
+	return /* @__PURE__ */ jsx(MissionClock, {
+		format: "met",
+		missionStart: launchTime,
+		showMET: true,
+		showMilliseconds,
+		className,
+		small,
+		timezone: ""
+	});
 });
-const SimulationClock = 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
-    }
-  );
+var SimulationClock = memo(function SimulationClock({ 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,
-  MissionElapsedTime,
-  SimpleTimer,
-  SimulationClock
-};
-//# sourceMappingURL=MissionClock.js.map
+//#endregion
+export { MissionClock, MissionClock as default, MissionElapsedTime, SimpleTimer, SimulationClock };
+
+//# sourceMappingURL=MissionClock.js.map