@zendir/ui 0.1.7 → 0.1.9

package/dist/react/cards/SpacecraftCard.js

@@ -1,941 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { memo, useMemo, useCallback } from "react";
-import { Icon } from "../core/Icon.js";
-import { CardHeader } from "../core/CardHeader.js";
-import { HeaderIconWithStatus } from "../core/HeaderIconWithStatus.js";
-import { useCardBorderStyle } from "../context/DisplaySettingsContext.js";
-import { safeAccentText, getStatusColor, classNames, formatCoordinate, formatAltitude, formatVelocity, formatTime, safeNumber, formatPercentage } from "../utils/index.js";
-import { useTheme } from "../theme/ThemeProvider.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,
-      // Roboto - Astro UX compliant
-      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