@zendir/ui 0.4.1 → 0.6.0

package/dist/react/cards/SpacecraftCard.js

@@ -1,941 +1,829 @@
-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 { classNames, formatAltitude, formatCoordinate, formatPercentage, formatTime, formatVelocity, getStatusColor, safeAccentText, safeNumber } from "../utils/index.js";
 import { HeaderIconWithStatus } from "../core/display/HeaderIconWithStatus.js";
+import { CardHeader } from "../core/display/CardHeader.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";
+import { memo, useCallback, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/cards/SpacecraftCard.tsx
+/**
+* @zendir/ui - SpacecraftCard Component
+*
+* Enterprise-grade spacecraft information card.
+*
+* AstroUXDS Compliance:
+* - Status colors used for health/operational status only
+* - Orbit type uses Zendir-Astro data viz colors (categorical)
+* - Zendir accent colors for interactive elements
+* - Tabular numbers with fontVariantNumeric for data
+* - Sentence-case labels per Tier 3 compliance
+*
+* Features:
+* - Full null-safety with graceful fallbacks
+* - WCAG 2.1 AA accessibility
+* - Keyboard navigation
+* - Smooth animations with reduced-motion support
+* - Loading skeleton state
+* - Error boundary support
+* - Real SDK integration via optional client prop
+*/
+/**
+* Get orbit type color based on orbit classification
+* Uses Zendir-Astro palette for categorical (non-status) classification
+*/
 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;
+	return {
+		LEO: "#3E3CFF",
+		MEO: "#3548C0",
+		GEO: "#9D70FF",
+		HEO: "#1B2DA0",
+		SSO: "#B48DFF",
+		POLAR: "#6B69FF"
+	}[orbitType?.toUpperCase() ?? ""] ?? accentColor;
 }
+/**
+* Derive health status from spacecraft or telemetry
+* Prefers telemetry.health.status, falls back to spacecraft.status
+*/
 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";
+	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: `
+/**
+* SpacecraftCard - Displays spacecraft position and status information
+*
+* @example
+* ```tsx
+* // Direct data mode
+* <SpacecraftCard
+*   spacecraft={spacecraftData}
+*   telemetry={telemetryData}
+*   showOrbit
+*   showTelemetry
+*   onClick={() => {}}
+* />
+*
+* // Connected mode (auto-fetches via SDK)
+* <SpacecraftCard
+*   client={zendirClient}
+*   spacecraftId="iss-25544"
+*   showTelemetry
+* />
+* ```
+*/
+var SpacecraftCard = memo(function SpacecraftCard({ spacecraft, telemetry, showOrbit = false, showTelemetry = false, loading = false, onClick, className = "", compact = false, defaultExpanded = false, onPinChange }) {
+	const { tokens, theme, prefersReducedMotion } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const isBoldVariant = theme === "transparent-bold";
+	const useGlassMode = isBoldVariant || theme === "transparent-minimal";
+	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?.orbitType, tokens.colors.accent.primary), [spacecraft?.orbitType, tokens.colors.accent.primary]);
+	const healthStatus = useMemo(() => deriveHealthStatus(spacecraft?.status, telemetry?.health?.status), [spacecraft?.status, telemetry?.health?.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"
-            ] })
-          }
-        )
-      ]
-    }
-  );
+		]
+	});
+	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: .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,
+					fontWeight: tokens.typography.fontWeight.medium,
+					fontFamily: tokens.typography.fontFamily.primary,
+					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 = () => {
+		const batteryLevel = (telemetry?.subsystems?.power ?? telemetry?.power)?.batteryLevel;
+		const batteryStatusLocal = batteryLevel !== void 0 ? batteryLevel > 50 ? "normal" : batteryLevel > 20 ? "caution" : "critical" : "off";
+		const statusColor = 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
+					}),
+					/* @__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,
+						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",
+			...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 ? /* @__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)
+			})
+		] }) : 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: telemetry.health?.status ?? "Unknown"
+					})]
+				}), telemetry.power?.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
-      }
-    )
-  ] });
+var DataCell = memo(function DataCell({ 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,
+				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,
+			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
+//#endregion
+export { SpacecraftCard };
+
+//# sourceMappingURL=SpacecraftCard.js.map