@zendir/ui 0.3.0 → 0.3.1

package/dist/react/cards/SpacecraftCard.js

@@ -0,0 +1,941 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { memo, useMemo, useCallback } from "react";
+import { useTheme } from "../theme/ThemeProvider.js";
+import { Icon } from "../core/display/Icon.js";
+import { CardHeader } from "../core/display/CardHeader.js";
+import { HeaderIconWithStatus } from "../core/display/HeaderIconWithStatus.js";
+import { useCardBorderStyle } from "../context/DisplaySettingsContext.js";
+import { safeAccentText, getStatusColor, classNames, formatCoordinate, formatAltitude, formatVelocity, formatTime, safeNumber, formatPercentage } from "../utils/index.js";
+import { useCompactMode } from "../hooks/useCompactMode.js";
+function getOrbitTypeColor(orbitType, accentColor) {
+  const colors = {
+    LEO: "#3E3CFF",
+    // Zendir Electric - Low Earth Orbit
+    MEO: "#3548C0",
+    // Zendir Prussian Blue Light - Medium Earth Orbit  
+    GEO: "#9D70FF",
+    // Zendir Purple - Geostationary
+    HEO: "#1B2DA0",
+    // Zendir Prussian Blue - Highly Elliptical
+    SSO: "#B48DFF",
+    // Zendir Purple Light - Sun-Synchronous
+    POLAR: "#6B69FF"
+    // Zendir Electric Light - Polar
+  };
+  return colors[(orbitType == null ? void 0 : orbitType.toUpperCase()) ?? ""] ?? accentColor;
+}
+function deriveHealthStatus(spacecraftStatus, telemetryStatus) {
+  if (telemetryStatus) {
+    const validStatuses = ["off", "standby", "normal", "caution", "serious", "critical"];
+    const normalized = telemetryStatus.toLowerCase();
+    if (validStatuses.includes(normalized)) {
+      return normalized;
+    }
+    switch (normalized) {
+      case "healthy":
+      case "nominal":
+      case "operational":
+        return "normal";
+      case "warning":
+      case "degraded":
+        return "caution";
+      case "failed":
+      case "error":
+        return "critical";
+      case "idle":
+        return "standby";
+    }
+  }
+  return spacecraftStatus ?? "off";
+}
+const SpacecraftCard = memo(function SpacecraftCard2({
+  spacecraft,
+  telemetry,
+  showOrbit = false,
+  showTelemetry = false,
+  loading = false,
+  onClick,
+  className = "",
+  compact = false,
+  defaultExpanded = false,
+  onPinChange
+}) {
+  var _a, _b, _c;
+  const { tokens, theme, prefersReducedMotion } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const isBoldVariant = theme === "transparent-bold";
+  const isMinimalVariant = theme === "transparent-minimal";
+  const useGlassMode = isBoldVariant || isMinimalVariant;
+  const glassAccentColor = tokens.colors.accent.primary;
+  const glassAccentMuted = `${glassAccentColor}66`;
+  const accentTextColor = useMemo(() => safeAccentText(tokens.colors.accent.primary), [tokens.colors.accent.primary]);
+  const cardBg = isTransparentTheme ? "transparent" : tokens.colors.background.surface;
+  const cardGlass = isTransparentTheme ? {
+    backdropFilter: "blur(12px)",
+    WebkitBackdropFilter: "blur(12px)"
+  } : {};
+  const cardBorderStyle = useCardBorderStyle(tokens, isTransparentTheme);
+  const glassContainerStyle = useGlassMode ? {
+    backgroundColor: "rgba(10, 15, 25, 0.35)",
+    backdropFilter: "blur(12px)",
+    WebkitBackdropFilter: "blur(12px)",
+    border: `1px solid ${glassAccentMuted}`,
+    borderTop: isBoldVariant ? `2px solid ${glassAccentColor}` : `1px solid ${glassAccentColor}`
+  } : {};
+  const { expanded, isPinned, isHovered: _isHovered, handlers: compactHandlers, transitionDuration: _compactTransition } = useCompactMode({
+    compact,
+    defaultExpanded,
+    onPinChange
+  });
+  const animationDuration = prefersReducedMotion ? 0 : 250;
+  const animationEasing = "cubic-bezier(0.4, 0, 0.2, 1)";
+  useCallback(() => {
+    if (onClick && spacecraft) {
+      onClick(spacecraft);
+    }
+  }, [onClick, spacecraft]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (onClick && spacecraft && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        onClick(spacecraft);
+      }
+    },
+    [onClick, spacecraft]
+  );
+  const orbitColor = useMemo(
+    () => getOrbitTypeColor(spacecraft == null ? void 0 : spacecraft.orbitType, tokens.colors.accent.primary),
+    [spacecraft == null ? void 0 : spacecraft.orbitType, tokens.colors.accent.primary]
+  );
+  const healthStatus = useMemo(
+    () => {
+      var _a2;
+      return deriveHealthStatus(spacecraft == null ? void 0 : spacecraft.status, (_a2 = telemetry == null ? void 0 : telemetry.health) == null ? void 0 : _a2.status);
+    },
+    [spacecraft == null ? void 0 : spacecraft.status, (_a = telemetry == null ? void 0 : telemetry.health) == null ? void 0 : _a.status]
+  );
+  const statusColor = useMemo(() => getStatusColor(healthStatus), [healthStatus]);
+  const transitionDuration = prefersReducedMotion ? "0ms" : "200ms";
+  const combinedClickHandler = useCallback(() => {
+    if (compact) {
+      compactHandlers.onClick();
+    }
+    if (onClick && spacecraft) {
+      onClick(spacecraft);
+    }
+  }, [compact, compactHandlers, onClick, spacecraft]);
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames("zendir-spacecraft-card", "loading", className),
+        role: "article",
+        "aria-busy": "true",
+        "aria-label": "Loading spacecraft data",
+        style: {
+          backgroundColor: cardBg,
+          ...cardGlass,
+          ...cardBorderStyle,
+          borderRadius: tokens.borderRadius.lg,
+          padding: tokens.spacing.md,
+          minHeight: 180
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: 32,
+                  height: 32,
+                  borderRadius: "50%",
+                  backgroundColor: "rgba(255,255,255,0.1)",
+                  animation: "pulse 1.5s ease-in-out infinite"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  height: 16,
+                  width: "60%",
+                  backgroundColor: "rgba(255,255,255,0.1)",
+                  borderRadius: 4,
+                  animation: "pulse 1.5s ease-in-out infinite"
+                }
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(2, 1fr)",
+                gap: 12
+              },
+              children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      height: 10,
+                      width: "40%",
+                      backgroundColor: "rgba(255,255,255,0.08)",
+                      borderRadius: 2,
+                      marginBottom: 4
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      height: 14,
+                      width: "70%",
+                      backgroundColor: "rgba(255,255,255,0.1)",
+                      borderRadius: 2
+                    }
+                  }
+                )
+              ] }, i))
+            }
+          ),
+          /* @__PURE__ */ jsx("style", { children: `
+          @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+          }
+        ` })
+        ]
+      }
+    );
+  }
+  if (!spacecraft) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames("zendir-spacecraft-card", "empty", className),
+        role: "article",
+        "aria-label": "No spacecraft data",
+        style: {
+          backgroundColor: cardBg,
+          ...cardGlass,
+          ...tokens.colors.border.cardStyleDashed ?? {},
+          borderRadius: tokens.borderRadius.lg,
+          padding: tokens.spacing.lg,
+          textAlign: "center",
+          color: tokens.colors.text.tertiary
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "32",
+              height: "32",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              style: { marginBottom: 8, opacity: 0.5 },
+              children: /* @__PURE__ */ jsx("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z" })
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: tokens.typography.body[2].fontSize }, children: "No spacecraft data available" })
+        ]
+      }
+    );
+  }
+  const CompactMetric = ({
+    icon,
+    label,
+    value,
+    color
+  }) => /* @__PURE__ */ jsxs("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: 3,
+    padding: `2px 0`
+  }, children: [
+    /* @__PURE__ */ jsx(Icon, { name: icon, size: 12, color: color ?? tokens.colors.text.secondary }),
+    /* @__PURE__ */ jsx("span", { style: {
+      fontSize: tokens.typography.fontSize.micro,
+      // 0.5625rem / 9px (AstroUXDS micro)
+      fontWeight: tokens.typography.fontWeight.medium,
+      fontFamily: tokens.typography.fontFamily.primary,
+      // Public Sans → Roboto fallback → system stack
+      color: tokens.colors.text.tertiary,
+      textTransform: "uppercase",
+      minWidth: 8
+    }, children: label.charAt(0) }),
+    /* @__PURE__ */ jsx("span", { style: {
+      fontVariantNumeric: "tabular-nums",
+      fontFamily: tokens.typography.fontFamily.mono,
+      fontSize: tokens.typography.fontSize.xs,
+      color: color ?? tokens.colors.text.primary,
+      fontWeight: tokens.typography.fontWeight.medium
+    }, children: value })
+  ] });
+  const renderCompactContent = () => {
+    var _a2;
+    const power = ((_a2 = telemetry == null ? void 0 : telemetry.subsystems) == null ? void 0 : _a2.power) ?? (telemetry == null ? void 0 : telemetry.power);
+    const batteryLevel = power == null ? void 0 : power.batteryLevel;
+    const batteryStatusLocal = batteryLevel !== void 0 ? batteryLevel > 50 ? "normal" : batteryLevel > 20 ? "caution" : "critical" : "off";
+    const statusColor2 = getStatusColor(healthStatus);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginBottom: tokens.spacing.xs,
+        paddingBottom: tokens.spacing.xs,
+        borderBottom: useGlassMode ? "none" : `1px solid ${tokens.colors.border.muted}`,
+        position: "relative",
+        zIndex: 1
+      }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.xs, flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(
+            HeaderIconWithStatus,
+            {
+              icon: "satellite-transmit",
+              size: 18,
+              status: healthStatus,
+              statusColor: statusColor2
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: {
+            fontWeight: tokens.typography.fontWeight.semibold,
+            fontSize: tokens.typography.fontSize.sm,
+            fontFamily: tokens.typography.fontFamily.primary,
+            color: useGlassMode ? glassAccentColor : void 0,
+            textShadow: useGlassMode ? `0 0 16px ${glassAccentMuted}` : void 0,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          }, children: (spacecraft.name ?? spacecraft.id ?? "Unknown").split(" ")[0] }),
+          useGlassMode && /* @__PURE__ */ jsx("div", { style: {
+            flex: 1,
+            height: isBoldVariant ? "2px" : "1px",
+            minWidth: 20,
+            background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 60%, transparent 100%)`,
+            boxShadow: isBoldVariant ? `0 0 8px ${glassAccentMuted}` : void 0
+          } })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.xs, flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                backgroundColor: `${orbitColor}20`,
+                color: orbitColor,
+                padding: `1px 6px`,
+                borderRadius: tokens.borderRadius.sm,
+                fontSize: tokens.typography.fontSize.xxs,
+                // 0.625rem / 10px (AstroUXDS compact)
+                fontWeight: tokens.typography.fontWeight.medium,
+                fontFamily: tokens.typography.fontFamily.primary
+              },
+              children: spacecraft.orbitType ?? "—"
+            }
+          ),
+          isPinned && /* @__PURE__ */ jsx(Icon, { name: "lock", size: 10, color: tokens.colors.accent.primary })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(3, 1fr)",
+        gap: `${tokens.spacing.xs} ${tokens.spacing.sm}`
+      }, children: [
+        /* @__PURE__ */ jsx(
+          CompactMetric,
+          {
+            icon: "location",
+            label: "Latitude",
+            value: formatCoordinate(spacecraft.latitude, "lat")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CompactMetric,
+          {
+            icon: "location",
+            label: "Longitude",
+            value: formatCoordinate(spacecraft.longitude, "lon")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CompactMetric,
+          {
+            icon: "orbit",
+            label: "Altitude",
+            value: formatAltitude(spacecraft.altitude),
+            color: orbitColor
+          }
+        ),
+        spacecraft.velocity !== void 0 && /* @__PURE__ */ jsx(
+          CompactMetric,
+          {
+            icon: "rocket",
+            label: "Velocity",
+            value: formatVelocity(spacecraft.velocity)
+          }
+        ),
+        batteryLevel !== void 0 && /* @__PURE__ */ jsx(
+          CompactMetric,
+          {
+            icon: "battery",
+            label: "Battery",
+            value: formatPercentage(batteryLevel),
+            color: getStatusColor(batteryStatusLocal)
+          }
+        ),
+        spacecraft.inclination !== void 0 && /* @__PURE__ */ jsx(
+          CompactMetric,
+          {
+            icon: "orbit",
+            label: "Inclination",
+            value: `${safeNumber(spacecraft.inclination, 1)}°`
+          }
+        )
+      ] })
+    ] });
+  };
+  if (compact) {
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        className: classNames("zendir-spacecraft-card", "compact", expanded ? "expanded" : "", className),
+        ...compactHandlers,
+        "aria-label": `Spacecraft: ${spacecraft.name ?? spacecraft.id}${expanded ? "" : " (compact)"}`,
+        style: {
+          position: "relative",
+          overflow: "hidden",
+          // Use glass container style for bold/minimal themes
+          ...useGlassMode ? glassContainerStyle : {
+            backgroundColor: cardBg,
+            ...cardGlass,
+            ...cardBorderStyle
+          },
+          borderRadius: tokens.borderRadius.lg,
+          padding: expanded ? tokens.spacing.md : tokens.spacing.sm,
+          fontFamily: tokens.typography.fontFamily.primary,
+          color: tokens.colors.text.primary,
+          fontSize: expanded ? tokens.typography.fontSize.base : tokens.typography.fontSize.sm,
+          cursor: "pointer",
+          transition: `all ${animationDuration}ms ${animationEasing}`,
+          boxShadow: expanded ? `0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px ${orbitColor}30` : "none",
+          zIndex: expanded ? 50 : 1
+        },
+        children: [
+          useGlassMode && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                background: "linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)",
+                pointerEvents: "none",
+                zIndex: 0
+              }
+            }
+          ),
+          expanded ? (
+            // Full expanded content
+            /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm, marginBottom: tokens.spacing.md }, children: [
+                /* @__PURE__ */ jsx(
+                  HeaderIconWithStatus,
+                  {
+                    icon: "satellite-transmit",
+                    size: 24,
+                    status: healthStatus
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                    /* @__PURE__ */ jsx(
+                      "h3",
+                      {
+                        style: {
+                          margin: 0,
+                          fontSize: tokens.typography.fontSize.md,
+                          fontWeight: tokens.typography.fontWeight.semibold,
+                          lineHeight: 1.2
+                        },
+                        children: spacecraft.name ?? spacecraft.id
+                      }
+                    ),
+                    isPinned && /* @__PURE__ */ jsx(Icon, { name: "lock", size: 12, color: tokens.colors.accent.primary })
+                  ] }),
+                  spacecraft.id && spacecraft.name && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: tokens.typography.fontSize.xs,
+                        color: tokens.colors.text.tertiary
+                      },
+                      children: spacecraft.id
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      backgroundColor: `${orbitColor}20`,
+                      color: orbitColor,
+                      padding: `4px 8px`,
+                      borderRadius: tokens.borderRadius.sm,
+                      fontSize: tokens.typography.fontSize.xs,
+                      fontWeight: tokens.typography.fontWeight.medium,
+                      flexShrink: 0
+                    },
+                    children: spacecraft.orbitType ?? "Unknown"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(2, 1fr)",
+                    gap: tokens.spacing.sm,
+                    marginBottom: tokens.spacing.md
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            display: "block",
+                            fontSize: tokens.typography.fontSize.xs,
+                            color: tokens.colors.text.tertiary,
+                            marginBottom: 2
+                          },
+                          children: "Latitude"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: tokens.typography.fontSize.md,
+                            fontWeight: tokens.typography.fontWeight.medium,
+                            fontVariantNumeric: "tabular-nums",
+                            fontFamily: tokens.typography.fontFamily.mono
+                          },
+                          children: formatCoordinate(spacecraft.latitude, "lat")
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            display: "block",
+                            fontSize: tokens.typography.fontSize.xs,
+                            color: tokens.colors.text.tertiary,
+                            marginBottom: 2
+                          },
+                          children: "Longitude"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: tokens.typography.fontSize.md,
+                            fontWeight: tokens.typography.fontWeight.medium,
+                            fontVariantNumeric: "tabular-nums",
+                            fontFamily: tokens.typography.fontFamily.mono
+                          },
+                          children: formatCoordinate(spacecraft.longitude, "lon")
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            display: "block",
+                            fontSize: tokens.typography.fontSize.xs,
+                            color: tokens.colors.text.tertiary,
+                            marginBottom: 2
+                          },
+                          children: "Altitude"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: tokens.typography.fontSize.md,
+                            fontWeight: tokens.typography.fontWeight.medium,
+                            fontVariantNumeric: "tabular-nums",
+                            fontFamily: tokens.typography.fontFamily.mono,
+                            color: orbitColor
+                          },
+                          children: formatAltitude(spacecraft.altitude)
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            display: "block",
+                            fontSize: tokens.typography.fontSize.xs,
+                            color: tokens.colors.text.tertiary,
+                            marginBottom: 2
+                          },
+                          children: "Velocity"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: tokens.typography.fontSize.md,
+                            fontWeight: tokens.typography.fontWeight.medium,
+                            fontVariantNumeric: "tabular-nums",
+                            fontFamily: tokens.typography.fontFamily.mono
+                          },
+                          children: formatVelocity(spacecraft.velocity)
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              spacecraft.timestamp && /* @__PURE__ */ jsx(
+                "time",
+                {
+                  dateTime: spacecraft.timestamp,
+                  style: {
+                    display: "block",
+                    fontSize: tokens.typography.fontSize.xs,
+                    color: tokens.colors.text.tertiary,
+                    fontVariantNumeric: "tabular-nums"
+                  },
+                  children: formatTime(spacecraft.timestamp)
+                }
+              )
+            ] })
+          ) : (
+            // Compact content
+            renderCompactContent()
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: classNames("zendir-spacecraft-card", compact ? "expanded" : "", className),
+      onClick: compact || onClick ? combinedClickHandler : void 0,
+      onKeyDown: onClick ? handleKeyDown : compactHandlers.onKeyDown,
+      tabIndex: onClick || compact ? 0 : void 0,
+      role: compact ? compactHandlers.role : "article",
+      "aria-expanded": compact ? compactHandlers["aria-expanded"] : void 0,
+      "aria-label": `Spacecraft: ${spacecraft.name ?? spacecraft.id}`,
+      style: {
+        position: "relative",
+        overflow: "hidden",
+        ...useGlassMode ? glassContainerStyle : {
+          backgroundColor: cardBg,
+          ...cardGlass,
+          ...cardBorderStyle
+        },
+        borderRadius: tokens.borderRadius.lg,
+        padding: tokens.spacing.md,
+        fontFamily: tokens.typography.fontFamily.primary,
+        color: tokens.colors.text.primary,
+        cursor: onClick || compact ? "pointer" : "default",
+        transition: `all ${transitionDuration} ease-out`,
+        outline: "none"
+      },
+      onMouseEnter: (e) => {
+        if (compact) compactHandlers.onMouseEnter();
+        if (onClick) {
+          e.currentTarget.style.borderColor = tokens.colors.border.focus;
+          e.currentTarget.style.boxShadow = tokens.shadows.md;
+          e.currentTarget.style.transform = prefersReducedMotion ? "none" : "translateY(-2px)";
+        }
+      },
+      onMouseLeave: (e) => {
+        if (compact) compactHandlers.onMouseLeave();
+        if (onClick) {
+          e.currentTarget.style.borderColor = tokens.colors.border.muted;
+          e.currentTarget.style.boxShadow = "none";
+          e.currentTarget.style.transform = "none";
+        }
+      },
+      onFocus: (e) => {
+        e.currentTarget.style.outline = `2px solid ${tokens.colors.border.focus}`;
+        e.currentTarget.style.outlineOffset = "2px";
+      },
+      onBlur: (e) => {
+        e.currentTarget.style.outline = "none";
+      },
+      children: [
+        useGlassMode && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              background: "linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)",
+              pointerEvents: "none",
+              zIndex: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CardHeader,
+          {
+            icon: "satellite-transmit",
+            title: spacecraft.name ?? spacecraft.id ?? "Unknown",
+            subtitle: spacecraft.id && spacecraft.name ? spacecraft.id : void 0,
+            status: healthStatus,
+            badge: spacecraft.orbitType ?? "Unknown",
+            badgeColor: orbitColor,
+            isPinned: compact && isPinned
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(2, 1fr)",
+              gap: tokens.spacing.sm
+            },
+            children: [
+              /* @__PURE__ */ jsx(DataCell, { label: "Latitude", value: formatCoordinate(spacecraft.latitude, "lat"), tokens, highlightColor: accentTextColor }),
+              /* @__PURE__ */ jsx(DataCell, { label: "Longitude", value: formatCoordinate(spacecraft.longitude, "lon"), tokens, highlightColor: accentTextColor }),
+              /* @__PURE__ */ jsx(DataCell, { label: "Altitude", value: formatAltitude(spacecraft.altitude), highlight: true, tokens, highlightColor: accentTextColor }),
+              /* @__PURE__ */ jsx(DataCell, { label: "Velocity", value: formatVelocity(spacecraft.velocity), tokens, highlightColor: accentTextColor })
+            ]
+          }
+        ),
+        showOrbit && spacecraft.inclination !== void 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              marginTop: tokens.spacing.md,
+              paddingTop: tokens.spacing.md,
+              borderTop: `1px solid ${tokens.colors.border.muted}`
+            },
+            children: /* @__PURE__ */ jsx(
+              DataCell,
+              {
+                label: "Inclination",
+                value: `${safeNumber(spacecraft.inclination, 1)}°`,
+                inline: true,
+                tokens
+              }
+            )
+          }
+        ),
+        showTelemetry && telemetry && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: tokens.spacing.md,
+              paddingTop: tokens.spacing.md,
+              borderTop: `1px solid ${tokens.colors.border.muted}`
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: tokens.spacing.sm,
+                    marginBottom: tokens.spacing.sm
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        style: {
+                          width: 10,
+                          height: 10,
+                          borderRadius: "50%",
+                          backgroundColor: statusColor,
+                          boxShadow: `0 0 8px ${statusColor}60`
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: tokens.typography.fontSize.xs,
+                          fontWeight: tokens.typography.fontWeight.medium,
+                          color: statusColor,
+                          textTransform: "capitalize"
+                        },
+                        children: ((_b = telemetry.health) == null ? void 0 : _b.status) ?? "Unknown"
+                      }
+                    )
+                  ]
+                }
+              ),
+              ((_c = telemetry.power) == null ? void 0 : _c.batteryLevel) !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: "space-between",
+                      marginBottom: 4,
+                      fontSize: tokens.typography.fontSize.xs
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Battery" }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontFamily: tokens.typography.fontFamily.mono,
+                            fontVariantNumeric: "tabular-nums"
+                          },
+                          children: formatPercentage(telemetry.power.batteryLevel, false, 0)
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      height: 4,
+                      backgroundColor: tokens.colors.border.muted,
+                      borderRadius: 2,
+                      overflow: "hidden"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        role: "progressbar",
+                        "aria-valuenow": telemetry.power.batteryLevel,
+                        "aria-valuemin": 0,
+                        "aria-valuemax": 100,
+                        "aria-label": "Battery level",
+                        style: {
+                          height: "100%",
+                          width: `${Math.min(100, Math.max(0, telemetry.power.batteryLevel))}%`,
+                          backgroundColor: telemetry.power.batteryLevel > 30 ? tokens.colors.status.normal : tokens.colors.status.critical,
+                          borderRadius: 2,
+                          transition: `width ${transitionDuration} ease-out`
+                        }
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        spacecraft.timestamp && /* @__PURE__ */ jsx(
+          "footer",
+          {
+            style: {
+              marginTop: tokens.spacing.md,
+              paddingTop: tokens.spacing.sm,
+              borderTop: `1px solid ${tokens.colors.border.muted}`,
+              fontSize: tokens.typography.fontSize.xs,
+              color: tokens.colors.text.tertiary,
+              textAlign: "right"
+            },
+            children: /* @__PURE__ */ jsxs("time", { dateTime: spacecraft.timestamp, children: [
+              formatTime(spacecraft.timestamp),
+              " UTC"
+            ] })
+          }
+        )
+      ]
+    }
+  );
+});
+const DataCell = memo(function DataCell2({
+  label,
+  value,
+  highlight = false,
+  inline = false,
+  tokens,
+  highlightColor
+}) {
+  if (inline) {
+    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            fontSize: tokens.typography.fontSize.xs,
+            color: tokens.colors.text.secondary,
+            // WCAG AA compliant
+            fontWeight: tokens.typography.fontWeight.medium
+          },
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            fontSize: tokens.typography.fontSize.sm,
+            fontFamily: tokens.typography.fontFamily.mono,
+            fontVariantNumeric: "tabular-nums",
+            color: tokens.colors.text.primary
+          },
+          children: value
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          display: "block",
+          fontSize: tokens.typography.fontSize.xs,
+          color: tokens.colors.text.secondary,
+          // WCAG AA compliant
+          fontWeight: tokens.typography.fontWeight.medium,
+          marginBottom: 2
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          display: "block",
+          fontSize: tokens.typography.fontSize.sm,
+          fontFamily: tokens.typography.fontFamily.mono,
+          fontVariantNumeric: "tabular-nums",
+          color: highlight ? highlightColor ?? safeAccentText(tokens.colors.accent.primary) : tokens.colors.text.primary,
+          fontWeight: tokens.typography.fontWeight.medium
+        },
+        children: value
+      }
+    )
+  ] });
+});
+export {
+  SpacecraftCard
+};
+//# sourceMappingURL=SpacecraftCard.js.map