@zendir/ui 0.5.0 → 0.6.1

package/dist/react/cards/TelemetryCard.js

@@ -1,742 +1,1065 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { memo, useState, useMemo } from "react";
 import { useTheme } from "../theme/ThemeProvider.js";
-import { StatusIndicator } from "../astro/StatusIndicator.js";
-import { DataValue } from "../core/data/DataValue.js";
-import { getPropertyConfig } from "../core/data/propertyConfig.js";
+import { Icon } from "../core/display/Icon.js";
+import { classNames, deriveBatteryStatus, formatTime, getStatusColor, normalizeStatus, safeNumber } from "../utils/index.js";
 import { AstroIcon } from "../core/display/AstroIcon.js";
-import { CardHeader } from "../core/display/CardHeader.js";
 import { HeaderIconWithStatus } from "../core/display/HeaderIconWithStatus.js";
-import { Icon } from "../core/display/Icon.js";
+import { CardHeader } from "../core/display/CardHeader.js";
+import { getPropertyConfig } from "../core/data/propertyConfig.js";
+import { DataValue } from "../core/data/DataValue.js";
 import { useCardBorderStyle } from "../context/DisplaySettingsContext.js";
-import { classNames, getStatusColor, formatTime, safeNumber, normalizeStatus, deriveBatteryStatus } from "../utils/index.js";
 import { useCompactMode } from "../hooks/useCompactMode.js";
+import { StatusIndicator } from "../astro/StatusIndicator.js";
+import { memo, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/cards/TelemetryCard.tsx
+/**
+* @zendir/ui - TelemetryCard Component
+*
+* Enterprise-grade spacecraft telemetry data card.
+*
+* AstroUXDS Compliance:
+* - Status colors used semantically (battery level, health status)
+* - Dual-coded status indicators (color + shape via StatusIndicator)
+* - Zendir accent colors for non-status elements (icons, decorative)
+* - Tabular numbers with fontVariantNumeric for data display
+* - Sentence-case labels per Tier 3 compliance
+*
+* Features:
+* - Full null-safety with graceful fallbacks
+* - WCAG 2.1 AA accessibility
+* - Subsystem toggles (power, attitude, comms)
+* - Anomaly alerts
+* - Loading and empty states
+*/
+/**
+* Get health status level
+* Uses normalizeStatus utility to convert SDK terms to StatusLevel
+*/
 function getHealthStatus(healthStatus) {
-  return normalizeStatus(healthStatus);
+	return normalizeStatus(healthStatus);
 }
+/**
+* Get battery status based on level
+* @deprecated Use deriveBatteryStatus from utils instead
+*/
 function getBatteryStatus(level) {
-  return deriveBatteryStatus(level);
+	return deriveBatteryStatus(level);
 }
-const TelemetryCard = memo(function TelemetryCard2({
-  telemetry,
-  spacecraftName,
-  showPower = true,
-  showAttitude = true,
-  showComms = true,
-  loading = false,
-  className = "",
-  compact = false,
-  defaultExpanded = false,
-  onPinChange
-}) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
-  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 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, transitionDuration: compactTransition } = useCompactMode({
-    compact,
-    defaultExpanded,
-    onPinChange
-  });
-  const [_isAnimating, _setIsAnimating] = useState(false);
-  const animationDuration = prefersReducedMotion ? 0 : 250;
-  const animationEasing = "cubic-bezier(0.4, 0, 0.2, 1)";
-  const healthStatus = useMemo(
-    () => {
-      var _a2;
-      return getHealthStatus((_a2 = telemetry == null ? void 0 : telemetry.health) == null ? void 0 : _a2.status);
-    },
-    [(_a = telemetry == null ? void 0 : telemetry.health) == null ? void 0 : _a.status]
-  );
-  const batteryStatus = useMemo(
-    () => {
-      var _a2;
-      return getBatteryStatus((_a2 = telemetry == null ? void 0 : telemetry.power) == null ? void 0 : _a2.batteryLevel);
-    },
-    [(_b = telemetry == null ? void 0 : telemetry.power) == null ? void 0 : _b.batteryLevel]
-  );
-  const transitionDuration = prefersReducedMotion ? "0ms" : "200ms";
-  if (loading) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: classNames("zendir-telemetry-card", "loading", className),
-        role: "article",
-        "aria-busy": "true",
-        "aria-label": "Loading telemetry data",
-        style: {
-          backgroundColor: cardBg,
-          ...cardGlass,
-          ...cardBorderStyle,
-          borderRadius: tokens.borderRadius.lg,
-          padding: tokens.spacing.md,
-          minHeight: 200
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }, children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  width: 24,
-                  height: 24,
-                  borderRadius: 4,
-                  backgroundColor: "rgba(255,255,255,0.1)"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  height: 16,
-                  width: "40%",
-                  backgroundColor: "rgba(255,255,255,0.1)",
-                  borderRadius: 4
-                }
-              }
-            )
-          ] }),
-          [1, 2, 3].map((i) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  height: 12,
-                  width: "30%",
-                  backgroundColor: "rgba(255,255,255,0.08)",
-                  borderRadius: 2,
-                  marginBottom: 8
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  display: "grid",
-                  gridTemplateColumns: "repeat(2, 1fr)",
-                  gap: 8
-                },
-                children: [1, 2, 3, 4].map((j) => /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      height: 32,
-                      backgroundColor: "rgba(255,255,255,0.06)",
-                      borderRadius: 4
-                    }
-                  },
-                  j
-                ))
-              }
-            )
-          ] }, i))
-        ]
-      }
-    );
-  }
-  if (!telemetry) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: classNames("zendir-telemetry-card", "empty", className),
-        role: "article",
-        "aria-label": "No telemetry 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(AstroIcon, { name: "antenna", size: "normal", label: "", style: { opacity: 0.5 } }),
-          /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0 0", fontSize: tokens.typography.body[2].fontSize }, children: "No telemetry data available" })
-        ]
-      }
-    );
-  }
-  const sectionStyle = {
-    marginBottom: tokens.spacing.md,
-    paddingBottom: tokens.spacing.md,
-    borderBottom: `1px solid ${tokens.colors.border.muted}`
-  };
-  const iconColumnWidth = 20;
-  const iconGap = tokens.spacing.sm;
-  const rowGap = tokens.spacing.smd;
-  const sectionGridColumns = `${iconColumnWidth}px 1fr ${iconColumnWidth}px 1fr`;
-  const CompactMetric = ({
-    icon,
-    label,
-    value,
-    color,
-    astroIcon
-  }) => /* @__PURE__ */ jsxs("div", { style: {
-    display: "flex",
-    alignItems: "center",
-    gap: 3,
-    padding: `2px 0`
-  }, children: [
-    astroIcon ? /* @__PURE__ */ jsx(AstroIcon, { name: astroIcon, size: 12, color: color ?? tokens.colors.text.secondary }) : icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: 12, color: color ?? tokens.colors.text.secondary }) : null,
-    /* @__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, _b2, _c2, _d2;
-    const power = (telemetry == null ? void 0 : telemetry.power) ?? ((_a2 = telemetry == null ? void 0 : telemetry.subsystems) == null ? void 0 : _a2.power);
-    const attitude = (telemetry == null ? void 0 : telemetry.attitude) ?? ((_b2 = telemetry == null ? void 0 : telemetry.subsystems) == null ? void 0 : _b2.attitude);
-    const comms = (telemetry == null ? void 0 : telemetry.communications) ?? ((_c2 = telemetry == null ? void 0 : telemetry.subsystems) == null ? void 0 : _c2.comms);
-    const thermal = (_d2 = telemetry == null ? void 0 : telemetry.subsystems) == null ? void 0 : _d2.thermal;
-    const compactStatusColor = 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.sm, minWidth: 0, flex: 1 }, children: [
-          /* @__PURE__ */ jsx(
-            HeaderIconWithStatus,
-            {
-              icon: "antenna-receive",
-              size: 20,
-              status: healthStatus,
-              statusColor: compactStatusColor
-            }
-          ),
-          /* @__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",
-            minWidth: 0
-          }, children: spacecraftName ? spacecraftName.split(" ")[0] : "Telemetry" }),
-          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__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.xs, flexShrink: 0 }, children: 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: [
-        showPower && power && /* @__PURE__ */ jsxs(Fragment, { children: [
-          power.batteryLevel !== void 0 && /* @__PURE__ */ jsx(
-            CompactMetric,
-            {
-              icon: "battery",
-              label: "Battery",
-              value: `${safeNumber(power.batteryLevel, 0)}%`,
-              color: getStatusColor(batteryStatus)
-            }
-          ),
-          (power.solarGeneration ?? power.solarArrayOutput) !== void 0 && /* @__PURE__ */ jsx(
-            CompactMetric,
-            {
-              astroIcon: "solar",
-              label: "Solar",
-              value: `${safeNumber(power.solarGeneration ?? power.solarArrayOutput, 1)}W`,
-              color: tokens.colors.status.standby
-            }
-          ),
-          power.voltage !== void 0 && /* @__PURE__ */ jsx(
-            CompactMetric,
-            {
-              astroIcon: "propulsion-power",
-              label: "Voltage",
-              value: `${safeNumber(power.voltage, 1)}V`
-            }
-          )
-        ] }),
-        showAttitude && attitude && /* @__PURE__ */ jsxs(Fragment, { children: [
-          attitude.pointingError !== void 0 && /* @__PURE__ */ jsx(
-            CompactMetric,
-            {
-              astroIcon: "explore",
-              label: "Pointing",
-              value: `${safeNumber(attitude.pointingError, 2)}°`
-            }
-          ),
-          attitude.targetMode && /* @__PURE__ */ jsx(
-            CompactMetric,
-            {
-              astroIcon: "explore",
-              label: "Mode",
-              value: attitude.targetMode
-            }
-          )
-        ] }),
-        thermal && /* @__PURE__ */ jsx(Fragment, { children: thermal.cpuTemp !== void 0 && /* @__PURE__ */ jsx(
-          CompactMetric,
-          {
-            icon: "thermometer",
-            label: "CPU",
-            value: `${safeNumber(thermal.cpuTemp, 0)}°C`,
-            color: thermal.cpuTemp > 50 ? tokens.colors.status.caution : void 0
-          }
-        ) }),
-        showComms && comms && /* @__PURE__ */ jsxs(Fragment, { children: [
-          comms.signalStrength !== void 0 && /* @__PURE__ */ jsx(
-            CompactMetric,
-            {
-              astroIcon: "antenna",
-              label: "Signal",
-              value: `${safeNumber(comms.signalStrength, 0)}%`
-            }
-          ),
-          (comms.downlinkRate ?? comms.dataRate) !== void 0 && /* @__PURE__ */ jsx(
-            CompactMetric,
-            {
-              astroIcon: "antenna-transmit",
-              label: "Rate",
-              value: `${safeNumber(comms.downlinkRate ?? comms.dataRate, 0)}Mb`
-            }
-          ),
-          comms.transmitterStatus && /* @__PURE__ */ jsx(
-            CompactMetric,
-            {
-              astroIcon: "antenna-receive",
-              label: "TX",
-              value: comms.transmitterStatus === "transmitting" ? "ON" : "OFF",
-              color: comms.transmitterStatus === "transmitting" ? tokens.colors.status.normal : tokens.colors.status.off
-            }
-          )
-        ] })
-      ] })
-    ] });
-  };
-  if (compact) {
-    return /* @__PURE__ */ jsxs(
-      "article",
-      {
-        className: classNames("zendir-telemetry-card", "compact", expanded ? "expanded" : "", className),
-        ...handlers,
-        "aria-label": spacecraftName ? `${spacecraftName} Telemetry${expanded ? "" : " (compact)"}` : "Telemetry Data",
-        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 ${tokens.colors.accent.primary}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 - resolve data with fallbacks like compact view
-            (() => {
-              var _a2, _b2, _c2, _d2, _e2, _f2;
-              const power = (telemetry == null ? void 0 : telemetry.power) ?? ((_a2 = telemetry == null ? void 0 : telemetry.subsystems) == null ? void 0 : _a2.power);
-              const attitude = (telemetry == null ? void 0 : telemetry.attitude) ?? ((_b2 = telemetry == null ? void 0 : telemetry.subsystems) == null ? void 0 : _b2.attitude);
-              const comms = (telemetry == null ? void 0 : telemetry.communications) ?? ((_c2 = telemetry == null ? void 0 : telemetry.subsystems) == null ? void 0 : _c2.comms);
-              return /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs(
-                  "header",
-                  {
-                    style: {
-                      display: "flex",
-                      justifyContent: "space-between",
-                      alignItems: "center",
-                      marginBottom: tokens.spacing.md
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm }, children: [
-                        /* @__PURE__ */ jsx(
-                          HeaderIconWithStatus,
-                          {
-                            icon: "antenna-receive",
-                            size: 24,
-                            status: healthStatus
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "h3",
-                          {
-                            style: {
-                              margin: 0,
-                              fontSize: tokens.typography.fontSize.md,
-                              fontWeight: tokens.typography.fontWeight.semibold
-                            },
-                            children: spacecraftName ? `${spacecraftName} Telemetry` : "Telemetry"
-                          }
-                        ),
-                        isPinned && /* @__PURE__ */ jsx(Icon, { name: "lock", size: 12, color: tokens.colors.accent.primary, style: { marginLeft: 4 } })
-                      ] }),
-                      /* @__PURE__ */ jsx(StatusIndicator, { status: healthStatus, label: healthStatus, small: true })
-                    ]
-                  }
-                ),
-                showPower && /* @__PURE__ */ jsxs("section", { style: sectionStyle, "aria-label": "Power subsystem", children: [
-                  /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: sectionGridColumns, gap: `${rowGap} ${iconGap}`, alignItems: "center" }, children: [
-                    /* @__PURE__ */ jsx(AstroIcon, { name: "propulsion-power", size: 12, color: tokens.colors.text.tertiary }),
-                    /* @__PURE__ */ jsx("h4", { style: { margin: 0, gridColumn: "2 / -1", fontSize: tokens.typography.fontSize.xs, fontWeight: tokens.typography.fontWeight.medium, color: tokens.colors.text.secondary }, children: "Power" }),
-                    /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("battery").icon, size: 16, color: getStatusColor(batteryStatus) }),
-                    /* @__PURE__ */ jsx(DataValue, { property: "battery", value: power == null ? void 0 : power.batteryLevel, size: "sm", variant: "card", showIcon: false }),
-                    /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("voltage").icon, size: 16, color: tokens.colors.text.tertiary }),
-                    /* @__PURE__ */ jsx(DataValue, { property: "voltage", value: power == null ? void 0 : power.voltage, size: "sm", variant: "card", showIcon: false }),
-                    /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("solarPower").icon, size: 16, color: tokens.colors.text.tertiary }),
-                    /* @__PURE__ */ jsx(DataValue, { property: "solarPower", value: (power == null ? void 0 : power.solarGeneration) ?? (power == null ? void 0 : power.solarArrayOutput), size: "sm", variant: "card", status: "standby", showIcon: false }),
-                    /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("load").icon, size: 16, color: tokens.colors.text.tertiary }),
-                    /* @__PURE__ */ jsx(DataValue, { property: "load", value: power == null ? void 0 : power.consumption, size: "sm", variant: "card", showIcon: false })
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        marginTop: tokens.spacing.sm,
-                        height: 4,
-                        backgroundColor: tokens.colors.border.muted,
-                        borderRadius: 2,
-                        overflow: "hidden"
-                      },
-                      children: /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          role: "progressbar",
-                          "aria-valuenow": (power == null ? void 0 : power.batteryLevel) ?? 0,
-                          "aria-valuemin": 0,
-                          "aria-valuemax": 100,
-                          "aria-label": "Battery level",
-                          style: {
-                            height: "100%",
-                            width: `${Math.min(100, Math.max(0, (power == null ? void 0 : power.batteryLevel) ?? 0))}%`,
-                            backgroundColor: getStatusColor(batteryStatus),
-                            borderRadius: 2,
-                            transition: `width ${transitionDuration} ease-out`
-                          }
-                        }
-                      )
-                    }
-                  )
-                ] }),
-                showAttitude && /* @__PURE__ */ jsx("section", { style: sectionStyle, "aria-label": "Attitude subsystem", children: /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: sectionGridColumns, gap: `${rowGap} ${iconGap}`, alignItems: "center" }, children: [
-                  /* @__PURE__ */ jsx(AstroIcon, { name: "explore", size: 12, color: tokens.colors.text.tertiary }),
-                  /* @__PURE__ */ jsx("h4", { style: { margin: 0, gridColumn: "2 / -1", fontSize: tokens.typography.fontSize.xs, fontWeight: tokens.typography.fontWeight.medium, color: tokens.colors.text.secondary }, children: "Attitude" }),
-                  /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("roll").icon, size: 16, color: tokens.colors.text.tertiary }),
-                  /* @__PURE__ */ jsx(DataValue, { property: "roll", value: ((_d2 = attitude == null ? void 0 : attitude.eulerAngles) == null ? void 0 : _d2.roll) ?? (attitude == null ? void 0 : attitude.pointingError), size: "sm", variant: "card", showStatus: false, showIcon: false }),
-                  /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("pitch").icon, size: 16, color: tokens.colors.text.tertiary }),
-                  /* @__PURE__ */ jsx(DataValue, { property: "pitch", value: (_e2 = attitude == null ? void 0 : attitude.eulerAngles) == null ? void 0 : _e2.pitch, size: "sm", variant: "card", showStatus: false, showIcon: false }),
-                  /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("yaw").icon, size: 16, color: tokens.colors.text.tertiary }),
-                  /* @__PURE__ */ jsx(DataValue, { property: "yaw", value: (_f2 = attitude == null ? void 0 : attitude.eulerAngles) == null ? void 0 : _f2.yaw, size: "sm", variant: "card", showStatus: false, showIcon: false }),
-                  /* @__PURE__ */ jsx(AstroIcon, { name: "explore", size: 16, color: tokens.colors.text.tertiary }),
-                  /* @__PURE__ */ jsx(DataValue, { label: "Mode", icon: "explore", value: (attitude == null ? void 0 : attitude.targetMode) ?? "--", size: "sm", variant: "card", showStatus: false, showIcon: false })
-                ] }) }),
-                showComms && /* @__PURE__ */ jsx("section", { style: { marginBottom: tokens.spacing.sm }, "aria-label": "Communications subsystem", children: /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: sectionGridColumns, gap: `${rowGap} ${iconGap}`, alignItems: "center" }, children: [
-                  /* @__PURE__ */ jsx(AstroIcon, { name: "antenna", size: 12, color: tokens.colors.text.tertiary }),
-                  /* @__PURE__ */ jsx("h4", { style: { margin: 0, gridColumn: "2 / -1", fontSize: tokens.typography.fontSize.xs, fontWeight: tokens.typography.fontWeight.medium, color: tokens.colors.text.secondary }, children: "Communications" }),
-                  /* @__PURE__ */ jsx(AstroIcon, { name: "antenna-transmit", size: 16, color: tokens.colors.text.tertiary }),
-                  /* @__PURE__ */ jsx(DataValue, { label: "Status", icon: "antenna-transmit", value: (comms == null ? void 0 : comms.transmitterStatus) ?? (comms == null ? void 0 : comms.status) ?? "--", size: "sm", variant: "card", showStatus: false, showIcon: false }),
-                  /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("signalStrength").icon, size: 16, color: tokens.colors.text.tertiary }),
-                  /* @__PURE__ */ jsx(DataValue, { property: "signalStrength", value: comms == null ? void 0 : comms.signalStrength, size: "sm", variant: "card", showStatus: false, showIcon: false }),
-                  /* @__PURE__ */ jsx(AstroIcon, { name: "antenna-receive", size: 16, color: tokens.colors.text.tertiary }),
-                  /* @__PURE__ */ jsx(DataValue, { label: "Transmitted", icon: "antenna-receive", value: (comms == null ? void 0 : comms.packetsTransmitted) ?? (comms == null ? void 0 : comms.dataRate) ?? "--", size: "sm", variant: "card", showStatus: false, showIcon: false }),
-                  /* @__PURE__ */ jsx("span", { style: { gridColumn: "4 / -1" } })
-                ] }) }),
-                (telemetry == null ? void 0 : telemetry.timestamp) && /* @__PURE__ */ jsx(
-                  "time",
-                  {
-                    dateTime: telemetry.timestamp,
-                    style: {
-                      display: "block",
-                      fontSize: tokens.typography.fontSize.xs,
-                      color: tokens.colors.text.tertiary,
-                      marginTop: tokens.spacing.sm,
-                      fontVariantNumeric: "tabular-nums"
-                    },
-                    children: formatTime(telemetry.timestamp)
-                  }
-                )
-              ] });
-            })()
-          ) : (
-            // Compact content
-            renderCompactContent()
-          )
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "article",
-    {
-      className: classNames("zendir-telemetry-card", compact ? "expanded" : "", className),
-      ...compact ? handlers : {},
-      role: compact ? handlers.role : "article",
-      tabIndex: compact ? handlers.tabIndex : void 0,
-      "aria-expanded": compact ? handlers["aria-expanded"] : void 0,
-      "aria-label": spacecraftName ? `${spacecraftName} Telemetry` : "Telemetry Data",
-      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,
-        fontSize: tokens.typography.fontSize.sm,
-        cursor: compact ? "pointer" : void 0,
-        transition: compact ? `all ${compactTransition} ease-out` : void 0
-      },
-      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: "antenna-receive",
-            title: spacecraftName ? `${spacecraftName} Telemetry` : "Telemetry",
-            status: healthStatus,
-            isPinned: compact && isPinned
-          }
-        ),
-        showPower && /* @__PURE__ */ jsxs("section", { style: sectionStyle, "aria-label": "Power subsystem", children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: sectionGridColumns, gap: `${rowGap} ${iconGap}`, alignItems: "center" }, children: [
-            /* @__PURE__ */ jsx(AstroIcon, { name: "propulsion-power", size: 12, color: tokens.colors.text.tertiary }),
-            /* @__PURE__ */ jsx("h4", { style: { margin: 0, gridColumn: "2 / -1", fontSize: tokens.typography.fontSize.xs, fontWeight: tokens.typography.fontWeight.medium, color: tokens.colors.text.secondary }, children: "Power" }),
-            /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("battery").icon, size: 16, color: getStatusColor(batteryStatus) }),
-            /* @__PURE__ */ jsx(DataValue, { property: "battery", value: (_c = telemetry.power) == null ? void 0 : _c.batteryLevel, size: "sm", variant: "card", showIcon: false }),
-            /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("voltage").icon, size: 16, color: tokens.colors.text.tertiary }),
-            /* @__PURE__ */ jsx(DataValue, { property: "voltage", value: (_d = telemetry.power) == null ? void 0 : _d.voltage, size: "sm", variant: "card", showIcon: false }),
-            /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("solarPower").icon, size: 16, color: tokens.colors.text.tertiary }),
-            /* @__PURE__ */ jsx(DataValue, { property: "solarPower", value: (_e = telemetry.power) == null ? void 0 : _e.solarGeneration, size: "sm", variant: "card", status: "standby", showIcon: false }),
-            /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("load").icon, size: 16, color: tokens.colors.text.tertiary }),
-            /* @__PURE__ */ jsx(DataValue, { property: "load", value: (_f = telemetry.power) == null ? void 0 : _f.consumption, size: "sm", variant: "card", showIcon: false })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                marginTop: tokens.spacing.sm,
-                height: 4,
-                backgroundColor: tokens.colors.border.muted,
-                borderRadius: 2,
-                overflow: "hidden"
-              },
-              children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  role: "progressbar",
-                  "aria-valuenow": ((_g = telemetry.power) == null ? void 0 : _g.batteryLevel) ?? 0,
-                  "aria-valuemin": 0,
-                  "aria-valuemax": 100,
-                  "aria-label": "Battery level",
-                  style: {
-                    height: "100%",
-                    width: `${Math.min(100, Math.max(0, ((_h = telemetry.power) == null ? void 0 : _h.batteryLevel) ?? 0))}%`,
-                    backgroundColor: getStatusColor(batteryStatus),
-                    borderRadius: 2,
-                    transition: `width ${transitionDuration} ease-out`
-                  }
-                }
-              )
-            }
-          )
-        ] }),
-        showAttitude && /* @__PURE__ */ jsxs("section", { style: sectionStyle, "aria-label": "Attitude subsystem", children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: sectionGridColumns, gap: `${rowGap} ${iconGap}`, alignItems: "center" }, children: [
-            /* @__PURE__ */ jsx(AstroIcon, { name: "explore", size: 12, color: tokens.colors.text.tertiary }),
-            /* @__PURE__ */ jsx("h4", { style: { margin: 0, gridColumn: "2 / -1", fontSize: tokens.typography.fontSize.xs, fontWeight: tokens.typography.fontWeight.medium, color: tokens.colors.text.secondary }, children: "Attitude" }),
-            /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("roll").icon, size: 16, color: tokens.colors.text.tertiary }),
-            /* @__PURE__ */ jsx(DataValue, { property: "roll", value: (_j = (_i = telemetry.attitude) == null ? void 0 : _i.eulerAngles) == null ? void 0 : _j.roll, size: "sm", variant: "card", showStatus: false, showIcon: false }),
-            /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("pitch").icon, size: 16, color: tokens.colors.text.tertiary }),
-            /* @__PURE__ */ jsx(DataValue, { property: "pitch", value: (_l = (_k = telemetry.attitude) == null ? void 0 : _k.eulerAngles) == null ? void 0 : _l.pitch, size: "sm", variant: "card", showStatus: false, showIcon: false }),
-            /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("yaw").icon, size: 16, color: tokens.colors.text.tertiary }),
-            /* @__PURE__ */ jsx(DataValue, { property: "yaw", value: (_n = (_m = telemetry.attitude) == null ? void 0 : _m.eulerAngles) == null ? void 0 : _n.yaw, size: "sm", variant: "card", showStatus: false, showIcon: false }),
-            /* @__PURE__ */ jsx(AstroIcon, { name: "explore", size: 16, color: tokens.colors.text.tertiary }),
-            /* @__PURE__ */ jsx(DataValue, { label: "Mode", icon: "explore", value: ((_o = telemetry.attitude) == null ? void 0 : _o.targetMode) ?? "--", size: "sm", variant: "card", showStatus: false, showIcon: false })
-          ] }),
-          ((_p = telemetry.attitude) == null ? void 0 : _p.pointingError) !== void 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: iconGap, marginTop: tokens.spacing.sm }, children: [
-            /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("pointingError").icon, size: 16, color: tokens.colors.text.tertiary }),
-            /* @__PURE__ */ jsx(DataValue, { property: "pointingError", value: telemetry.attitude.pointingError, size: "sm", variant: "inline", showIcon: false })
-          ] })
-        ] }),
-        showComms && /* @__PURE__ */ jsx("section", { style: { marginBottom: tokens.spacing.md }, "aria-label": "Communications subsystem", children: /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: sectionGridColumns, gap: `${rowGap} ${iconGap}`, alignItems: "center" }, children: [
-          /* @__PURE__ */ jsx(AstroIcon, { name: "antenna", size: 12, color: tokens.colors.text.tertiary }),
-          /* @__PURE__ */ jsx("h4", { style: { margin: 0, gridColumn: "2 / -1", fontSize: tokens.typography.fontSize.xs, fontWeight: tokens.typography.fontWeight.medium, color: tokens.colors.text.secondary }, children: "Communications" }),
-          /* @__PURE__ */ jsx(AstroIcon, { name: "antenna-transmit", size: 16, color: tokens.colors.text.tertiary }),
-          /* @__PURE__ */ jsx(
-            DataValue,
-            {
-              label: "Status",
-              icon: "antenna-transmit",
-              value: ((_q = telemetry.communications) == null ? void 0 : _q.transmitterStatus) ?? "--",
-              size: "sm",
-              variant: "card",
-              showIcon: false,
-              status: ((_r = telemetry.communications) == null ? void 0 : _r.transmitterStatus) === "transmitting" ? "normal" : ((_s = telemetry.communications) == null ? void 0 : _s.transmitterStatus) === "error" ? "critical" : "off"
-            }
-          ),
-          /* @__PURE__ */ jsx(AstroIcon, { name: getPropertyConfig("queue").icon, size: 16, color: tokens.colors.text.tertiary }),
-          /* @__PURE__ */ jsx(DataValue, { property: "queue", value: (_t = telemetry.communications) == null ? void 0 : _t.packetsQueued, size: "sm", variant: "card", showIcon: false }),
-          /* @__PURE__ */ jsx(AstroIcon, { name: "antenna-receive", size: 16, color: tokens.colors.text.tertiary }),
-          /* @__PURE__ */ jsx(
-            DataValue,
-            {
-              label: "Transmitted",
-              icon: "antenna-receive",
-              value: safeNumber((((_u = telemetry.communications) == null ? void 0 : _u.bytesTransmitted) ?? 0) / 1024, 1),
-              unit: "KB",
-              size: "sm",
-              variant: "card",
-              showStatus: false,
-              showIcon: false
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { style: { gridColumn: "4 / -1" } })
-        ] }) }),
-        ((_v = telemetry.health) == null ? void 0 : _v.anomalies) && telemetry.health.anomalies.length > 0 && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            role: "alert",
-            style: {
-              backgroundColor: `${tokens.colors.status.critical}15`,
-              border: `1px solid ${tokens.colors.status.critical}40`,
-              borderRadius: tokens.borderRadius.md,
-              padding: tokens.spacing.sm,
-              marginTop: tokens.spacing.md
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "h4",
-                {
-                  style: {
-                    margin: `0 0 ${tokens.spacing.xs} 0`,
-                    fontSize: tokens.typography.fontSize.xs,
-                    fontWeight: tokens.typography.fontWeight.medium,
-                    color: tokens.colors.status.critical,
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 4
-                  },
-                  children: [
-                    "⚠️ Anomalies (",
-                    telemetry.health.anomalies.length,
-                    ")"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx("ul", { style: { margin: 0, paddingLeft: 16 }, children: telemetry.health.anomalies.map((anomaly, idx) => /* @__PURE__ */ jsx(
-                "li",
-                {
-                  style: {
-                    fontSize: tokens.typography.fontSize.xs,
-                    color: tokens.colors.status.critical,
-                    marginTop: 2
-                  },
-                  children: typeof anomaly === "object" && anomaly !== null && "message" in anomaly ? anomaly.message : String(anomaly)
-                },
-                idx
-              )) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "footer",
-          {
-            style: {
-              marginTop: tokens.spacing.md,
-              fontSize: tokens.typography.fontSize.xs,
-              color: tokens.colors.text.secondary,
-              // WCAG AA compliant - 4.5:1 contrast
-              textAlign: "right"
-            },
-            children: /* @__PURE__ */ jsxs("time", { dateTime: telemetry.timestamp, children: [
-              formatTime(telemetry.timestamp),
-              " UTC"
-            ] })
-          }
-        )
-      ]
-    }
-  );
+/**
+* TelemetryCard - Displays spacecraft telemetry data
+*
+* @example
+* ```tsx
+* <TelemetryCard
+*   telemetry={telemetryData}
+*   spacecraftName="ISS"
+*   showPower
+*   showAttitude
+*   showComms
+* />
+* ```
+*/
+var TelemetryCard = memo(function TelemetryCard({ telemetry, spacecraftName, showPower = true, showAttitude = true, showComms = true, loading = false, 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 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, transitionDuration: compactTransition } = useCompactMode({
+		compact,
+		defaultExpanded,
+		onPinChange
+	});
+	const [_isAnimating, _setIsAnimating] = useState(false);
+	const animationDuration = prefersReducedMotion ? 0 : 250;
+	const animationEasing = "cubic-bezier(0.4, 0, 0.2, 1)";
+	const healthStatus = useMemo(() => getHealthStatus(telemetry?.health?.status), [telemetry?.health?.status]);
+	const batteryStatus = useMemo(() => getBatteryStatus(telemetry?.power?.batteryLevel), [telemetry?.power?.batteryLevel]);
+	const transitionDuration = prefersReducedMotion ? "0ms" : "200ms";
+	if (loading) return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-telemetry-card", "loading", className),
+		role: "article",
+		"aria-busy": "true",
+		"aria-label": "Loading telemetry data",
+		style: {
+			backgroundColor: cardBg,
+			...cardGlass,
+			...cardBorderStyle,
+			borderRadius: tokens.borderRadius.lg,
+			padding: tokens.spacing.md,
+			minHeight: 200
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 8,
+				marginBottom: 16
+			},
+			children: [/* @__PURE__ */ jsx("div", { style: {
+				width: 24,
+				height: 24,
+				borderRadius: 4,
+				backgroundColor: "rgba(255,255,255,0.1)"
+			} }), /* @__PURE__ */ jsx("div", { style: {
+				height: 16,
+				width: "40%",
+				backgroundColor: "rgba(255,255,255,0.1)",
+				borderRadius: 4
+			} })]
+		}), [
+			1,
+			2,
+			3
+		].map((i) => /* @__PURE__ */ jsxs("div", {
+			style: { marginBottom: 16 },
+			children: [/* @__PURE__ */ jsx("div", { style: {
+				height: 12,
+				width: "30%",
+				backgroundColor: "rgba(255,255,255,0.08)",
+				borderRadius: 2,
+				marginBottom: 8
+			} }), /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "grid",
+					gridTemplateColumns: "repeat(2, 1fr)",
+					gap: 8
+				},
+				children: [
+					1,
+					2,
+					3,
+					4
+				].map((j) => /* @__PURE__ */ jsx("div", { style: {
+					height: 32,
+					backgroundColor: "rgba(255,255,255,0.06)",
+					borderRadius: 4
+				} }, j))
+			})]
+		}, i))]
+	});
+	if (!telemetry) return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-telemetry-card", "empty", className),
+		role: "article",
+		"aria-label": "No telemetry 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(AstroIcon, {
+			name: "antenna",
+			size: "normal",
+			label: "",
+			style: { opacity: .5 }
+		}), /* @__PURE__ */ jsx("p", {
+			style: {
+				margin: "8px 0 0 0",
+				fontSize: tokens.typography.body[2].fontSize
+			},
+			children: "No telemetry data available"
+		})]
+	});
+	const sectionStyle = {
+		marginBottom: tokens.spacing.md,
+		paddingBottom: tokens.spacing.md,
+		borderBottom: `1px solid ${tokens.colors.border.muted}`
+	};
+	/** Fixed width so all section and metric icons align on one vertical line */
+	const iconColumnWidth = 20;
+	const iconGap = tokens.spacing.sm;
+	const rowGap = tokens.spacing.smd;
+	const sectionGridColumns = `${iconColumnWidth}px 1fr ${iconColumnWidth}px 1fr`;
+	const CompactMetric = ({ icon, label, value, color, astroIcon }) => /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 3,
+			padding: `2px 0`
+		},
+		children: [
+			astroIcon ? /* @__PURE__ */ jsx(AstroIcon, {
+				name: astroIcon,
+				size: 12,
+				color: color ?? tokens.colors.text.secondary
+			}) : icon ? /* @__PURE__ */ jsx(Icon, {
+				name: icon,
+				size: 12,
+				color: color ?? tokens.colors.text.secondary
+			}) : null,
+			/* @__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 power = telemetry?.power ?? telemetry?.subsystems?.power;
+		const attitude = telemetry?.attitude ?? telemetry?.subsystems?.attitude;
+		const comms = telemetry?.communications ?? telemetry?.subsystems?.comms;
+		const thermal = telemetry?.subsystems?.thermal;
+		const compactStatusColor = 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.sm,
+					minWidth: 0,
+					flex: 1
+				},
+				children: [
+					/* @__PURE__ */ jsx(HeaderIconWithStatus, {
+						icon: "antenna-receive",
+						size: 20,
+						status: healthStatus,
+						statusColor: compactStatusColor
+					}),
+					/* @__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",
+							minWidth: 0
+						},
+						children: spacecraftName ? spacecraftName.split(" ")[0] : "Telemetry"
+					}),
+					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__ */ jsx("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.xs,
+					flexShrink: 0
+				},
+				children: 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: [
+				showPower && power && /* @__PURE__ */ jsxs(Fragment, { children: [
+					power.batteryLevel !== void 0 && /* @__PURE__ */ jsx(CompactMetric, {
+						icon: "battery",
+						label: "Battery",
+						value: `${safeNumber(power.batteryLevel, 0)}%`,
+						color: getStatusColor(batteryStatus)
+					}),
+					(power.solarGeneration ?? power.solarArrayOutput) !== void 0 && /* @__PURE__ */ jsx(CompactMetric, {
+						astroIcon: "solar",
+						label: "Solar",
+						value: `${safeNumber(power.solarGeneration ?? power.solarArrayOutput, 1)}W`,
+						color: tokens.colors.status.standby
+					}),
+					power.voltage !== void 0 && /* @__PURE__ */ jsx(CompactMetric, {
+						astroIcon: "propulsion-power",
+						label: "Voltage",
+						value: `${safeNumber(power.voltage, 1)}V`
+					})
+				] }),
+				showAttitude && attitude && /* @__PURE__ */ jsxs(Fragment, { children: [attitude.pointingError !== void 0 && /* @__PURE__ */ jsx(CompactMetric, {
+					astroIcon: "explore",
+					label: "Pointing",
+					value: `${safeNumber(attitude.pointingError, 2)}°`
+				}), attitude.targetMode && /* @__PURE__ */ jsx(CompactMetric, {
+					astroIcon: "explore",
+					label: "Mode",
+					value: attitude.targetMode
+				})] }),
+				thermal && /* @__PURE__ */ jsx(Fragment, { children: thermal.cpuTemp !== void 0 && /* @__PURE__ */ jsx(CompactMetric, {
+					icon: "thermometer",
+					label: "CPU",
+					value: `${safeNumber(thermal.cpuTemp, 0)}°C`,
+					color: thermal.cpuTemp > 50 ? tokens.colors.status.caution : void 0
+				}) }),
+				showComms && comms && /* @__PURE__ */ jsxs(Fragment, { children: [
+					comms.signalStrength !== void 0 && /* @__PURE__ */ jsx(CompactMetric, {
+						astroIcon: "antenna",
+						label: "Signal",
+						value: `${safeNumber(comms.signalStrength, 0)}%`
+					}),
+					(comms.downlinkRate ?? comms.dataRate) !== void 0 && /* @__PURE__ */ jsx(CompactMetric, {
+						astroIcon: "antenna-transmit",
+						label: "Rate",
+						value: `${safeNumber(comms.downlinkRate ?? comms.dataRate, 0)}Mb`
+					}),
+					comms.transmitterStatus && /* @__PURE__ */ jsx(CompactMetric, {
+						astroIcon: "antenna-receive",
+						label: "TX",
+						value: comms.transmitterStatus === "transmitting" ? "ON" : "OFF",
+						color: comms.transmitterStatus === "transmitting" ? tokens.colors.status.normal : tokens.colors.status.off
+					})
+				] })
+			]
+		})] });
+	};
+	if (compact) return /* @__PURE__ */ jsxs("article", {
+		className: classNames("zendir-telemetry-card", "compact", expanded ? "expanded" : "", className),
+		...handlers,
+		"aria-label": spacecraftName ? `${spacecraftName} Telemetry${expanded ? "" : " (compact)"}` : "Telemetry Data",
+		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 ${tokens.colors.accent.primary}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 ? (() => {
+			const power = telemetry?.power ?? telemetry?.subsystems?.power;
+			const attitude = telemetry?.attitude ?? telemetry?.subsystems?.attitude;
+			const comms = telemetry?.communications ?? telemetry?.subsystems?.comms;
+			return /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs("header", {
+					style: {
+						display: "flex",
+						justifyContent: "space-between",
+						alignItems: "center",
+						marginBottom: tokens.spacing.md
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: tokens.spacing.sm
+						},
+						children: [
+							/* @__PURE__ */ jsx(HeaderIconWithStatus, {
+								icon: "antenna-receive",
+								size: 24,
+								status: healthStatus
+							}),
+							/* @__PURE__ */ jsx("h3", {
+								style: {
+									margin: 0,
+									fontSize: tokens.typography.fontSize.md,
+									fontWeight: tokens.typography.fontWeight.semibold
+								},
+								children: spacecraftName ? `${spacecraftName} Telemetry` : "Telemetry"
+							}),
+							isPinned && /* @__PURE__ */ jsx(Icon, {
+								name: "lock",
+								size: 12,
+								color: tokens.colors.accent.primary,
+								style: { marginLeft: 4 }
+							})
+						]
+					}), /* @__PURE__ */ jsx(StatusIndicator, {
+						status: healthStatus,
+						label: healthStatus,
+						small: true
+					})]
+				}),
+				showPower && /* @__PURE__ */ jsxs("section", {
+					style: sectionStyle,
+					"aria-label": "Power subsystem",
+					children: [/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "grid",
+							gridTemplateColumns: sectionGridColumns,
+							gap: `${rowGap} ${iconGap}`,
+							alignItems: "center"
+						},
+						children: [
+							/* @__PURE__ */ jsx(AstroIcon, {
+								name: "propulsion-power",
+								size: 12,
+								color: tokens.colors.text.tertiary
+							}),
+							/* @__PURE__ */ jsx("h4", {
+								style: {
+									margin: 0,
+									gridColumn: "2 / -1",
+									fontSize: tokens.typography.fontSize.xs,
+									fontWeight: tokens.typography.fontWeight.medium,
+									color: tokens.colors.text.secondary
+								},
+								children: "Power"
+							}),
+							/* @__PURE__ */ jsx(AstroIcon, {
+								name: getPropertyConfig("battery").icon,
+								size: 16,
+								color: getStatusColor(batteryStatus)
+							}),
+							/* @__PURE__ */ jsx(DataValue, {
+								property: "battery",
+								value: power?.batteryLevel,
+								size: "sm",
+								variant: "card",
+								showIcon: false
+							}),
+							/* @__PURE__ */ jsx(AstroIcon, {
+								name: getPropertyConfig("voltage").icon,
+								size: 16,
+								color: tokens.colors.text.tertiary
+							}),
+							/* @__PURE__ */ jsx(DataValue, {
+								property: "voltage",
+								value: power?.voltage,
+								size: "sm",
+								variant: "card",
+								showIcon: false
+							}),
+							/* @__PURE__ */ jsx(AstroIcon, {
+								name: getPropertyConfig("solarPower").icon,
+								size: 16,
+								color: tokens.colors.text.tertiary
+							}),
+							/* @__PURE__ */ jsx(DataValue, {
+								property: "solarPower",
+								value: power?.solarGeneration ?? power?.solarArrayOutput,
+								size: "sm",
+								variant: "card",
+								status: "standby",
+								showIcon: false
+							}),
+							/* @__PURE__ */ jsx(AstroIcon, {
+								name: getPropertyConfig("load").icon,
+								size: 16,
+								color: tokens.colors.text.tertiary
+							}),
+							/* @__PURE__ */ jsx(DataValue, {
+								property: "load",
+								value: power?.consumption,
+								size: "sm",
+								variant: "card",
+								showIcon: false
+							})
+						]
+					}), /* @__PURE__ */ jsx("div", {
+						style: {
+							marginTop: tokens.spacing.sm,
+							height: 4,
+							backgroundColor: tokens.colors.border.muted,
+							borderRadius: 2,
+							overflow: "hidden"
+						},
+						children: /* @__PURE__ */ jsx("div", {
+							role: "progressbar",
+							"aria-valuenow": power?.batteryLevel ?? 0,
+							"aria-valuemin": 0,
+							"aria-valuemax": 100,
+							"aria-label": "Battery level",
+							style: {
+								height: "100%",
+								width: `${Math.min(100, Math.max(0, power?.batteryLevel ?? 0))}%`,
+								backgroundColor: getStatusColor(batteryStatus),
+								borderRadius: 2,
+								transition: `width ${transitionDuration} ease-out`
+							}
+						})
+					})]
+				}),
+				showAttitude && /* @__PURE__ */ jsx("section", {
+					style: sectionStyle,
+					"aria-label": "Attitude subsystem",
+					children: /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "grid",
+							gridTemplateColumns: sectionGridColumns,
+							gap: `${rowGap} ${iconGap}`,
+							alignItems: "center"
+						},
+						children: [
+							/* @__PURE__ */ jsx(AstroIcon, {
+								name: "explore",
+								size: 12,
+								color: tokens.colors.text.tertiary
+							}),
+							/* @__PURE__ */ jsx("h4", {
+								style: {
+									margin: 0,
+									gridColumn: "2 / -1",
+									fontSize: tokens.typography.fontSize.xs,
+									fontWeight: tokens.typography.fontWeight.medium,
+									color: tokens.colors.text.secondary
+								},
+								children: "Attitude"
+							}),
+							/* @__PURE__ */ jsx(AstroIcon, {
+								name: getPropertyConfig("roll").icon,
+								size: 16,
+								color: tokens.colors.text.tertiary
+							}),
+							/* @__PURE__ */ jsx(DataValue, {
+								property: "roll",
+								value: attitude?.eulerAngles?.roll ?? attitude?.pointingError,
+								size: "sm",
+								variant: "card",
+								showStatus: false,
+								showIcon: false
+							}),
+							/* @__PURE__ */ jsx(AstroIcon, {
+								name: getPropertyConfig("pitch").icon,
+								size: 16,
+								color: tokens.colors.text.tertiary
+							}),
+							/* @__PURE__ */ jsx(DataValue, {
+								property: "pitch",
+								value: attitude?.eulerAngles?.pitch,
+								size: "sm",
+								variant: "card",
+								showStatus: false,
+								showIcon: false
+							}),
+							/* @__PURE__ */ jsx(AstroIcon, {
+								name: getPropertyConfig("yaw").icon,
+								size: 16,
+								color: tokens.colors.text.tertiary
+							}),
+							/* @__PURE__ */ jsx(DataValue, {
+								property: "yaw",
+								value: attitude?.eulerAngles?.yaw,
+								size: "sm",
+								variant: "card",
+								showStatus: false,
+								showIcon: false
+							}),
+							/* @__PURE__ */ jsx(AstroIcon, {
+								name: "explore",
+								size: 16,
+								color: tokens.colors.text.tertiary
+							}),
+							/* @__PURE__ */ jsx(DataValue, {
+								label: "Mode",
+								icon: "explore",
+								value: attitude?.targetMode ?? "--",
+								size: "sm",
+								variant: "card",
+								showStatus: false,
+								showIcon: false
+							})
+						]
+					})
+				}),
+				showComms && /* @__PURE__ */ jsx("section", {
+					style: { marginBottom: tokens.spacing.sm },
+					"aria-label": "Communications subsystem",
+					children: /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "grid",
+							gridTemplateColumns: sectionGridColumns,
+							gap: `${rowGap} ${iconGap}`,
+							alignItems: "center"
+						},
+						children: [
+							/* @__PURE__ */ jsx(AstroIcon, {
+								name: "antenna",
+								size: 12,
+								color: tokens.colors.text.tertiary
+							}),
+							/* @__PURE__ */ jsx("h4", {
+								style: {
+									margin: 0,
+									gridColumn: "2 / -1",
+									fontSize: tokens.typography.fontSize.xs,
+									fontWeight: tokens.typography.fontWeight.medium,
+									color: tokens.colors.text.secondary
+								},
+								children: "Communications"
+							}),
+							/* @__PURE__ */ jsx(AstroIcon, {
+								name: "antenna-transmit",
+								size: 16,
+								color: tokens.colors.text.tertiary
+							}),
+							/* @__PURE__ */ jsx(DataValue, {
+								label: "Status",
+								icon: "antenna-transmit",
+								value: comms?.transmitterStatus ?? comms?.status ?? "--",
+								size: "sm",
+								variant: "card",
+								showStatus: false,
+								showIcon: false
+							}),
+							/* @__PURE__ */ jsx(AstroIcon, {
+								name: getPropertyConfig("signalStrength").icon,
+								size: 16,
+								color: tokens.colors.text.tertiary
+							}),
+							/* @__PURE__ */ jsx(DataValue, {
+								property: "signalStrength",
+								value: comms?.signalStrength,
+								size: "sm",
+								variant: "card",
+								showStatus: false,
+								showIcon: false
+							}),
+							/* @__PURE__ */ jsx(AstroIcon, {
+								name: "antenna-receive",
+								size: 16,
+								color: tokens.colors.text.tertiary
+							}),
+							/* @__PURE__ */ jsx(DataValue, {
+								label: "Transmitted",
+								icon: "antenna-receive",
+								value: comms?.packetsTransmitted ?? comms?.dataRate ?? "--",
+								size: "sm",
+								variant: "card",
+								showStatus: false,
+								showIcon: false
+							}),
+							/* @__PURE__ */ jsx("span", { style: { gridColumn: "4 / -1" } })
+						]
+					})
+				}),
+				telemetry?.timestamp && /* @__PURE__ */ jsx("time", {
+					dateTime: telemetry.timestamp,
+					style: {
+						display: "block",
+						fontSize: tokens.typography.fontSize.xs,
+						color: tokens.colors.text.tertiary,
+						marginTop: tokens.spacing.sm,
+						fontVariantNumeric: "tabular-nums"
+					},
+					children: formatTime(telemetry.timestamp)
+				})
+			] });
+		})() : renderCompactContent()]
+	});
+	return /* @__PURE__ */ jsxs("article", {
+		className: classNames("zendir-telemetry-card", compact ? "expanded" : "", className),
+		...compact ? handlers : {},
+		role: compact ? handlers.role : "article",
+		tabIndex: compact ? handlers.tabIndex : void 0,
+		"aria-expanded": compact ? handlers["aria-expanded"] : void 0,
+		"aria-label": spacecraftName ? `${spacecraftName} Telemetry` : "Telemetry Data",
+		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,
+			fontSize: tokens.typography.fontSize.sm,
+			cursor: compact ? "pointer" : void 0,
+			transition: compact ? `all ${compactTransition} ease-out` : void 0
+		},
+		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: "antenna-receive",
+				title: spacecraftName ? `${spacecraftName} Telemetry` : "Telemetry",
+				status: healthStatus,
+				isPinned: compact && isPinned
+			}),
+			showPower && /* @__PURE__ */ jsxs("section", {
+				style: sectionStyle,
+				"aria-label": "Power subsystem",
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "grid",
+						gridTemplateColumns: sectionGridColumns,
+						gap: `${rowGap} ${iconGap}`,
+						alignItems: "center"
+					},
+					children: [
+						/* @__PURE__ */ jsx(AstroIcon, {
+							name: "propulsion-power",
+							size: 12,
+							color: tokens.colors.text.tertiary
+						}),
+						/* @__PURE__ */ jsx("h4", {
+							style: {
+								margin: 0,
+								gridColumn: "2 / -1",
+								fontSize: tokens.typography.fontSize.xs,
+								fontWeight: tokens.typography.fontWeight.medium,
+								color: tokens.colors.text.secondary
+							},
+							children: "Power"
+						}),
+						/* @__PURE__ */ jsx(AstroIcon, {
+							name: getPropertyConfig("battery").icon,
+							size: 16,
+							color: getStatusColor(batteryStatus)
+						}),
+						/* @__PURE__ */ jsx(DataValue, {
+							property: "battery",
+							value: telemetry.power?.batteryLevel,
+							size: "sm",
+							variant: "card",
+							showIcon: false
+						}),
+						/* @__PURE__ */ jsx(AstroIcon, {
+							name: getPropertyConfig("voltage").icon,
+							size: 16,
+							color: tokens.colors.text.tertiary
+						}),
+						/* @__PURE__ */ jsx(DataValue, {
+							property: "voltage",
+							value: telemetry.power?.voltage,
+							size: "sm",
+							variant: "card",
+							showIcon: false
+						}),
+						/* @__PURE__ */ jsx(AstroIcon, {
+							name: getPropertyConfig("solarPower").icon,
+							size: 16,
+							color: tokens.colors.text.tertiary
+						}),
+						/* @__PURE__ */ jsx(DataValue, {
+							property: "solarPower",
+							value: telemetry.power?.solarGeneration,
+							size: "sm",
+							variant: "card",
+							status: "standby",
+							showIcon: false
+						}),
+						/* @__PURE__ */ jsx(AstroIcon, {
+							name: getPropertyConfig("load").icon,
+							size: 16,
+							color: tokens.colors.text.tertiary
+						}),
+						/* @__PURE__ */ jsx(DataValue, {
+							property: "load",
+							value: telemetry.power?.consumption,
+							size: "sm",
+							variant: "card",
+							showIcon: false
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					style: {
+						marginTop: tokens.spacing.sm,
+						height: 4,
+						backgroundColor: tokens.colors.border.muted,
+						borderRadius: 2,
+						overflow: "hidden"
+					},
+					children: /* @__PURE__ */ jsx("div", {
+						role: "progressbar",
+						"aria-valuenow": telemetry.power?.batteryLevel ?? 0,
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						"aria-label": "Battery level",
+						style: {
+							height: "100%",
+							width: `${Math.min(100, Math.max(0, telemetry.power?.batteryLevel ?? 0))}%`,
+							backgroundColor: getStatusColor(batteryStatus),
+							borderRadius: 2,
+							transition: `width ${transitionDuration} ease-out`
+						}
+					})
+				})]
+			}),
+			showAttitude && /* @__PURE__ */ jsxs("section", {
+				style: sectionStyle,
+				"aria-label": "Attitude subsystem",
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "grid",
+						gridTemplateColumns: sectionGridColumns,
+						gap: `${rowGap} ${iconGap}`,
+						alignItems: "center"
+					},
+					children: [
+						/* @__PURE__ */ jsx(AstroIcon, {
+							name: "explore",
+							size: 12,
+							color: tokens.colors.text.tertiary
+						}),
+						/* @__PURE__ */ jsx("h4", {
+							style: {
+								margin: 0,
+								gridColumn: "2 / -1",
+								fontSize: tokens.typography.fontSize.xs,
+								fontWeight: tokens.typography.fontWeight.medium,
+								color: tokens.colors.text.secondary
+							},
+							children: "Attitude"
+						}),
+						/* @__PURE__ */ jsx(AstroIcon, {
+							name: getPropertyConfig("roll").icon,
+							size: 16,
+							color: tokens.colors.text.tertiary
+						}),
+						/* @__PURE__ */ jsx(DataValue, {
+							property: "roll",
+							value: telemetry.attitude?.eulerAngles?.roll,
+							size: "sm",
+							variant: "card",
+							showStatus: false,
+							showIcon: false
+						}),
+						/* @__PURE__ */ jsx(AstroIcon, {
+							name: getPropertyConfig("pitch").icon,
+							size: 16,
+							color: tokens.colors.text.tertiary
+						}),
+						/* @__PURE__ */ jsx(DataValue, {
+							property: "pitch",
+							value: telemetry.attitude?.eulerAngles?.pitch,
+							size: "sm",
+							variant: "card",
+							showStatus: false,
+							showIcon: false
+						}),
+						/* @__PURE__ */ jsx(AstroIcon, {
+							name: getPropertyConfig("yaw").icon,
+							size: 16,
+							color: tokens.colors.text.tertiary
+						}),
+						/* @__PURE__ */ jsx(DataValue, {
+							property: "yaw",
+							value: telemetry.attitude?.eulerAngles?.yaw,
+							size: "sm",
+							variant: "card",
+							showStatus: false,
+							showIcon: false
+						}),
+						/* @__PURE__ */ jsx(AstroIcon, {
+							name: "explore",
+							size: 16,
+							color: tokens.colors.text.tertiary
+						}),
+						/* @__PURE__ */ jsx(DataValue, {
+							label: "Mode",
+							icon: "explore",
+							value: telemetry.attitude?.targetMode ?? "--",
+							size: "sm",
+							variant: "card",
+							showStatus: false,
+							showIcon: false
+						})
+					]
+				}), telemetry.attitude?.pointingError !== void 0 && /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: iconGap,
+						marginTop: tokens.spacing.sm
+					},
+					children: [/* @__PURE__ */ jsx(AstroIcon, {
+						name: getPropertyConfig("pointingError").icon,
+						size: 16,
+						color: tokens.colors.text.tertiary
+					}), /* @__PURE__ */ jsx(DataValue, {
+						property: "pointingError",
+						value: telemetry.attitude.pointingError,
+						size: "sm",
+						variant: "inline",
+						showIcon: false
+					})]
+				})]
+			}),
+			showComms && /* @__PURE__ */ jsx("section", {
+				style: { marginBottom: tokens.spacing.md },
+				"aria-label": "Communications subsystem",
+				children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "grid",
+						gridTemplateColumns: sectionGridColumns,
+						gap: `${rowGap} ${iconGap}`,
+						alignItems: "center"
+					},
+					children: [
+						/* @__PURE__ */ jsx(AstroIcon, {
+							name: "antenna",
+							size: 12,
+							color: tokens.colors.text.tertiary
+						}),
+						/* @__PURE__ */ jsx("h4", {
+							style: {
+								margin: 0,
+								gridColumn: "2 / -1",
+								fontSize: tokens.typography.fontSize.xs,
+								fontWeight: tokens.typography.fontWeight.medium,
+								color: tokens.colors.text.secondary
+							},
+							children: "Communications"
+						}),
+						/* @__PURE__ */ jsx(AstroIcon, {
+							name: "antenna-transmit",
+							size: 16,
+							color: tokens.colors.text.tertiary
+						}),
+						/* @__PURE__ */ jsx(DataValue, {
+							label: "Status",
+							icon: "antenna-transmit",
+							value: telemetry.communications?.transmitterStatus ?? "--",
+							size: "sm",
+							variant: "card",
+							showIcon: false,
+							status: telemetry.communications?.transmitterStatus === "transmitting" ? "normal" : telemetry.communications?.transmitterStatus === "error" ? "critical" : "off"
+						}),
+						/* @__PURE__ */ jsx(AstroIcon, {
+							name: getPropertyConfig("queue").icon,
+							size: 16,
+							color: tokens.colors.text.tertiary
+						}),
+						/* @__PURE__ */ jsx(DataValue, {
+							property: "queue",
+							value: telemetry.communications?.packetsQueued,
+							size: "sm",
+							variant: "card",
+							showIcon: false
+						}),
+						/* @__PURE__ */ jsx(AstroIcon, {
+							name: "antenna-receive",
+							size: 16,
+							color: tokens.colors.text.tertiary
+						}),
+						/* @__PURE__ */ jsx(DataValue, {
+							label: "Transmitted",
+							icon: "antenna-receive",
+							value: safeNumber((telemetry.communications?.bytesTransmitted ?? 0) / 1024, 1),
+							unit: "KB",
+							size: "sm",
+							variant: "card",
+							showStatus: false,
+							showIcon: false
+						}),
+						/* @__PURE__ */ jsx("span", { style: { gridColumn: "4 / -1" } })
+					]
+				})
+			}),
+			telemetry.health?.anomalies && telemetry.health.anomalies.length > 0 && /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				style: {
+					backgroundColor: `${tokens.colors.status.critical}15`,
+					border: `1px solid ${tokens.colors.status.critical}40`,
+					borderRadius: tokens.borderRadius.md,
+					padding: tokens.spacing.sm,
+					marginTop: tokens.spacing.md
+				},
+				children: [/* @__PURE__ */ jsxs("h4", {
+					style: {
+						margin: `0 0 ${tokens.spacing.xs} 0`,
+						fontSize: tokens.typography.fontSize.xs,
+						fontWeight: tokens.typography.fontWeight.medium,
+						color: tokens.colors.status.critical,
+						display: "flex",
+						alignItems: "center",
+						gap: 4
+					},
+					children: [
+						"⚠️ Anomalies (",
+						telemetry.health.anomalies.length,
+						")"
+					]
+				}), /* @__PURE__ */ jsx("ul", {
+					style: {
+						margin: 0,
+						paddingLeft: 16
+					},
+					children: telemetry.health.anomalies.map((anomaly, idx) => /* @__PURE__ */ jsx("li", {
+						style: {
+							fontSize: tokens.typography.fontSize.xs,
+							color: tokens.colors.status.critical,
+							marginTop: 2
+						},
+						children: typeof anomaly === "object" && anomaly !== null && "message" in anomaly ? anomaly.message : String(anomaly)
+					}, idx))
+				})]
+			}),
+			/* @__PURE__ */ jsx("footer", {
+				style: {
+					marginTop: tokens.spacing.md,
+					fontSize: tokens.typography.fontSize.xs,
+					color: tokens.colors.text.secondary,
+					textAlign: "right"
+				},
+				children: /* @__PURE__ */ jsxs("time", {
+					dateTime: telemetry.timestamp,
+					children: [formatTime(telemetry.timestamp), " UTC"]
+				})
+			})
+		]
+	});
 });
-export {
-  TelemetryCard
-};
-//# sourceMappingURL=TelemetryCard.js.map
+//#endregion
+export { TelemetryCard };
+
+//# sourceMappingURL=TelemetryCard.js.map