@zendir/ui 0.1.0

package/dist/react/cards/TelemetryCard.js

@@ -0,0 +1,742 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { memo, useState, useMemo } from "react";
+import { DataValue } from "../core/DataValue.js";
+import { getPropertyConfig } from "../core/propertyConfig.js";
+import { AstroIcon } from "../core/AstroIcon.js";
+import { CardHeader } from "../core/CardHeader.js";
+import { HeaderIconWithStatus } from "../core/HeaderIconWithStatus.js";
+import { Icon } from "../core/Icon.js";
+import { useCardBorderStyle } from "../context/DisplaySettingsContext.js";
+import { classNames, getStatusColor, formatTime, safeNumber, normalizeStatus, deriveBatteryStatus } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+import { useCompactMode } from "../hooks/useCompactMode.js";
+import { StatusIndicator } from "../astro/StatusIndicator.js";
+function getHealthStatus(healthStatus) {
+  return normalizeStatus(healthStatus);
+}
+function getBatteryStatus(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,
+      // Roboto - Astro UX compliant
+      color: tokens.colors.text.tertiary,
+      textTransform: "uppercase",
+      minWidth: 8
+    }, children: label.charAt(0) }),
+    /* @__PURE__ */ jsx("span", { style: {
+      fontVariantNumeric: "tabular-nums",
+      fontFamily: tokens.typography.fontFamily.mono,
+      fontSize: tokens.typography.fontSize.xs,
+      color: color ?? tokens.colors.text.primary,
+      fontWeight: tokens.typography.fontWeight.medium
+    }, children: value })
+  ] });
+  const renderCompactContent = () => {
+    var _a2, _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"
+            ] })
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  TelemetryCard
+};
+//# sourceMappingURL=TelemetryCard.js.map