@zendir/ui 0.6.0 → 0.6.1

package/dist/react/cards/TelemetryCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TelemetryCard.js","names":[],"sources":["../../../src/react/cards/TelemetryCard.tsx"],"sourcesContent":["/**\n * @zendir/ui - TelemetryCard Component\n *\n * Enterprise-grade spacecraft telemetry data card.\n *\n * AstroUXDS Compliance:\n * - Status colors used semantically (battery level, health status)\n * - Dual-coded status indicators (color + shape via StatusIndicator)\n * - Zendir accent colors for non-status elements (icons, decorative)\n * - Tabular numbers with fontVariantNumeric for data display\n * - Sentence-case labels per Tier 3 compliance\n *\n * Features:\n * - Full null-safety with graceful fallbacks\n * - WCAG 2.1 AA accessibility\n * - Subsystem toggles (power, attitude, comms)\n * - Anomaly alerts\n * - Loading and empty states\n */\n\nimport React, { memo, useMemo, useState } from \"react\";\nimport type { TelemetryData } from \"../types\";\nimport { useTheme } from \"../theme\";\nimport { StatusIndicator } from \"../astro\";\nimport { DataValue, DataValueGroup } from \"../core/data/DataValue\";\nimport { getPropertyConfig } from \"../core/data/propertyConfig\";\nimport { AstroIcon } from \"../core/display/AstroIcon\";\nimport { CardHeader } from \"../core/display/CardHeader\";\nimport { HeaderIconWithStatus } from \"../core/display/HeaderIconWithStatus\";\nimport { Icon, type IconName } from \"../core/display/Icon\";\nimport { useCompactMode } from \"../hooks\";\nimport { useCardBorderStyle } from \"../context/DisplaySettingsContext\";\nimport {\n  safeNumber,\n  formatTime,\n  classNames,\n  getStatusColor,\n  deriveBatteryStatus,\n  normalizeStatus,\n  type StatusLevel,\n} from \"../utils\";\n\nexport interface TelemetryCardProps {\n  /** Telemetry data */\n  telemetry?: TelemetryData;\n  /** Spacecraft name */\n  spacecraftName?: string;\n  /** Show power subsystem */\n  showPower?: boolean;\n  /** Show attitude subsystem */\n  showAttitude?: boolean;\n  /** Show communications */\n  showComms?: boolean;\n  /** Loading state */\n  loading?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Enable compact mode - shows condensed view that expands on hover/click */\n  compact?: boolean;\n  /** Start expanded when in compact mode (pinned state) */\n  defaultExpanded?: boolean;\n  /** Callback when pin state changes in compact mode */\n  onPinChange?: (isPinned: boolean) => void;\n}\n\n/**\n * Get health status level\n * Uses normalizeStatus utility to convert SDK terms to StatusLevel\n */\nfunction getHealthStatus(healthStatus: string | undefined): StatusLevel {\n  return normalizeStatus(healthStatus);\n}\n\n/**\n * Get battery status based on level\n * @deprecated Use deriveBatteryStatus from utils instead\n */\nfunction getBatteryStatus(level: number | undefined): StatusLevel {\n  return deriveBatteryStatus(level);\n}\n\n/**\n * TelemetryCard - Displays spacecraft telemetry data\n *\n * @example\n * ```tsx\n * <TelemetryCard\n *   telemetry={telemetryData}\n *   spacecraftName=\"ISS\"\n *   showPower\n *   showAttitude\n *   showComms\n * />\n * ```\n */\nexport const TelemetryCard = memo(function TelemetryCard({\n  telemetry,\n  spacecraftName,\n  showPower = true,\n  showAttitude = true,\n  showComms = true,\n  loading = false,\n  className = \"\",\n  compact = false,\n  defaultExpanded = false,\n  onPinChange,\n}: TelemetryCardProps): React.ReactElement {\n  const { tokens, theme, prefersReducedMotion } = useTheme();\n  const isTransparentTheme =\n    theme === \"transparent\" ||\n    theme === \"transparent-bold\" ||\n    theme === \"transparent-minimal\";\n  const isBoldVariant = theme === \"transparent-bold\";\n  const isMinimalVariant = theme === \"transparent-minimal\";\n  const useGlassMode = isBoldVariant || isMinimalVariant;\n\n  // Glass accent colors for bold/minimal themes (matching Container/AstroChart)\n  const glassAccentColor = tokens.colors.accent.primary;\n  const glassAccentMuted = `${glassAccentColor}66`;\n\n  // Use transparent background with blur for transparent themes (matching Timeline)\n  const cardBg = isTransparentTheme\n    ? \"transparent\"\n    : tokens.colors.background.surface;\n  const cardGlass = isTransparentTheme\n    ? {\n        backdropFilter: \"blur(12px)\" as const,\n        WebkitBackdropFilter: \"blur(12px)\" as const,\n      }\n    : {};\n  // Get card border style based on accentBorders setting\n  const cardBorderStyle = useCardBorderStyle(tokens, isTransparentTheme);\n\n  // Glass mode container style (matching Container/AstroChart for bold/minimal)\n  const glassContainerStyle: React.CSSProperties = useGlassMode\n    ? {\n        backgroundColor: \"rgba(10, 15, 25, 0.35)\",\n        backdropFilter: \"blur(12px)\",\n        WebkitBackdropFilter: \"blur(12px)\",\n        border: `1px solid ${glassAccentMuted}`,\n        borderTop: isBoldVariant\n          ? `2px solid ${glassAccentColor}`\n          : `1px solid ${glassAccentColor}`,\n      }\n    : {};\n\n  // Compact mode state management\n  const {\n    expanded,\n    isPinned,\n    isHovered: _isHovered,\n    handlers,\n    transitionDuration: compactTransition,\n  } = useCompactMode({\n    compact,\n    defaultExpanded,\n    onPinChange,\n  });\n\n  // Track if we're animating to prevent flicker\n  const [_isAnimating, _setIsAnimating] = useState(false);\n\n  // Smooth animation timing\n  const animationDuration = prefersReducedMotion ? 0 : 250;\n  const animationEasing = \"cubic-bezier(0.4, 0, 0.2, 1)\";\n\n  // Computed statuses\n  const healthStatus = useMemo(\n    () => getHealthStatus(telemetry?.health?.status),\n    [telemetry?.health?.status],\n  );\n\n  const batteryStatus = useMemo(\n    () => getBatteryStatus(telemetry?.power?.batteryLevel),\n    [telemetry?.power?.batteryLevel],\n  );\n\n  const transitionDuration = prefersReducedMotion ? \"0ms\" : \"200ms\";\n\n  // Loading state\n  if (loading) {\n    return (\n      <div\n        className={classNames(\"zendir-telemetry-card\", \"loading\", className)}\n        role=\"article\"\n        aria-busy=\"true\"\n        aria-label=\"Loading telemetry data\"\n        style={{\n          backgroundColor: cardBg,\n          ...cardGlass,\n          ...cardBorderStyle,\n          borderRadius: tokens.borderRadius.lg,\n          padding: tokens.spacing.md,\n          minHeight: 200,\n        }}\n      >\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 8,\n            marginBottom: 16,\n          }}\n        >\n          <div\n            style={{\n              width: 24,\n              height: 24,\n              borderRadius: 4,\n              backgroundColor: \"rgba(255,255,255,0.1)\",\n            }}\n          />\n          <div\n            style={{\n              height: 16,\n              width: \"40%\",\n              backgroundColor: \"rgba(255,255,255,0.1)\",\n              borderRadius: 4,\n            }}\n          />\n        </div>\n        {[1, 2, 3].map((i) => (\n          <div key={i} style={{ marginBottom: 16 }}>\n            <div\n              style={{\n                height: 12,\n                width: \"30%\",\n                backgroundColor: \"rgba(255,255,255,0.08)\",\n                borderRadius: 2,\n                marginBottom: 8,\n              }}\n            />\n            <div\n              style={{\n                display: \"grid\",\n                gridTemplateColumns: \"repeat(2, 1fr)\",\n                gap: 8,\n              }}\n            >\n              {[1, 2, 3, 4].map((j) => (\n                <div\n                  key={j}\n                  style={{\n                    height: 32,\n                    backgroundColor: \"rgba(255,255,255,0.06)\",\n                    borderRadius: 4,\n                  }}\n                />\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  // Empty state\n  if (!telemetry) {\n    return (\n      <div\n        className={classNames(\"zendir-telemetry-card\", \"empty\", className)}\n        role=\"article\"\n        aria-label=\"No telemetry data\"\n        style={{\n          backgroundColor: cardBg,\n          ...cardGlass,\n          ...(tokens.colors.border.cardStyleDashed ?? {}),\n          borderRadius: tokens.borderRadius.lg,\n          padding: tokens.spacing.lg,\n          textAlign: \"center\",\n          color: tokens.colors.text.tertiary,\n        }}\n      >\n        <AstroIcon\n          name=\"antenna\"\n          size=\"normal\"\n          label=\"\"\n          style={{ opacity: 0.5 }}\n        />\n        <p\n          style={{\n            margin: \"8px 0 0 0\",\n            fontSize: tokens.typography.body[2].fontSize,\n          }}\n        >\n          No telemetry data available\n        </p>\n      </div>\n    );\n  }\n\n  const sectionStyle: React.CSSProperties = {\n    marginBottom: tokens.spacing.md,\n    paddingBottom: tokens.spacing.md,\n    borderBottom: `1px solid ${tokens.colors.border.muted}`,\n  };\n\n  /** Fixed width so all section and metric icons align on one vertical line */\n  const iconColumnWidth = 20;\n  const iconGap = tokens.spacing.sm;\n  const rowGap = tokens.spacing.smd;\n  const sectionGridColumns = `${iconColumnWidth}px 1fr ${iconColumnWidth}px 1fr`;\n\n  // Compact metric item component for consistent styling\n  const CompactMetric = ({\n    icon,\n    label,\n    value,\n    color,\n    astroIcon,\n  }: {\n    icon?: string;\n    label: string;\n    value: string | number;\n    color?: string;\n    astroIcon?: string;\n  }) => (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: 3,\n        padding: `2px 0`,\n      }}\n    >\n      {astroIcon ? (\n        <AstroIcon\n          name={astroIcon}\n          size={12}\n          color={color ?? tokens.colors.text.secondary}\n        />\n      ) : icon ? (\n        <Icon\n          name={icon as IconName}\n          size={12}\n          color={color ?? tokens.colors.text.secondary}\n        />\n      ) : null}\n      <span\n        style={{\n          fontSize: tokens.typography.fontSize.micro, // 0.5625rem / 9px (AstroUXDS micro)\n          fontWeight: tokens.typography.fontWeight.medium,\n          fontFamily: tokens.typography.fontFamily.primary, // Public Sans → Roboto fallback → system stack\n          color: tokens.colors.text.tertiary,\n          textTransform: \"uppercase\",\n          minWidth: 8,\n        }}\n      >\n        {label.charAt(0)}\n      </span>\n      <span\n        style={{\n          fontVariantNumeric: \"tabular-nums\",\n          fontFamily: tokens.typography.fontFamily.mono,\n          fontSize: tokens.typography.fontSize.xs,\n          color: color ?? tokens.colors.text.primary,\n          fontWeight: tokens.typography.fontWeight.medium,\n        }}\n      >\n        {value}\n      </span>\n    </div>\n  );\n\n  // Compact view content - reusable for both states\n  const renderCompactContent = () => {\n    const power = telemetry?.power ?? telemetry?.subsystems?.power;\n    const attitude = telemetry?.attitude ?? telemetry?.subsystems?.attitude;\n    const comms = telemetry?.communications ?? telemetry?.subsystems?.comms;\n    const thermal = telemetry?.subsystems?.thermal;\n    const compactStatusColor = getStatusColor(healthStatus);\n\n    return (\n      <>\n        {/* Header: Icon with status badge overlay → Name → (flex) → Badges on right */}\n        {/* Follows MonitoringIcon layout pattern for consistency */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            marginBottom: tokens.spacing.xs,\n            paddingBottom: tokens.spacing.xs,\n            borderBottom: useGlassMode\n              ? \"none\"\n              : `1px solid ${tokens.colors.border.muted}`,\n            position: \"relative\",\n            zIndex: 1,\n          }}\n        >\n          {/* Left side: Icon with status badge + Name */}\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: tokens.spacing.sm,\n              minWidth: 0,\n              flex: 1,\n            }}\n          >\n            {/* Icon with status badge - MonitoringIcon pattern */}\n            <HeaderIconWithStatus\n              icon=\"antenna-receive\"\n              size={20}\n              status={healthStatus}\n              statusColor={compactStatusColor}\n            />\n            {/* Name - accent color for glass mode */}\n            <span\n              style={{\n                fontWeight: tokens.typography.fontWeight.semibold,\n                fontSize: tokens.typography.fontSize.sm,\n                fontFamily: tokens.typography.fontFamily.primary,\n                color: useGlassMode ? glassAccentColor : undefined,\n                textShadow: useGlassMode\n                  ? `0 0 16px ${glassAccentMuted}`\n                  : undefined,\n                whiteSpace: \"nowrap\",\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                minWidth: 0,\n              }}\n            >\n              {spacecraftName ? spacecraftName.split(\" \")[0] : \"Telemetry\"}\n            </span>\n            {/* Accent line for glass mode */}\n            {useGlassMode && (\n              <div\n                style={{\n                  flex: 1,\n                  height: isBoldVariant ? \"2px\" : \"1px\",\n                  minWidth: 20,\n                  background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 60%, transparent 100%)`,\n                  boxShadow: isBoldVariant\n                    ? `0 0 8px ${glassAccentMuted}`\n                    : undefined,\n                }}\n              />\n            )}\n          </div>\n\n          {/* Right side: Badges (pin indicator, etc.) */}\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: tokens.spacing.xs,\n              flexShrink: 0,\n            }}\n          >\n            {isPinned && (\n              <Icon\n                name=\"lock\"\n                size={10}\n                color={tokens.colors.accent.primary}\n              />\n            )}\n          </div>\n        </div>\n\n        {/* Metrics grid */}\n        <div\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: \"repeat(3, 1fr)\",\n            gap: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n          }}\n        >\n          {/* Power metrics */}\n          {showPower && power && (\n            <>\n              {power.batteryLevel !== undefined && (\n                <CompactMetric\n                  icon=\"battery\"\n                  label=\"Battery\"\n                  value={`${safeNumber(power.batteryLevel, 0)}%`}\n                  color={getStatusColor(batteryStatus)}\n                />\n              )}\n              {(power.solarGeneration ?? power.solarArrayOutput) !==\n                undefined && (\n                <CompactMetric\n                  astroIcon=\"solar\"\n                  label=\"Solar\"\n                  value={`${safeNumber(power.solarGeneration ?? power.solarArrayOutput, 1)}W`}\n                  color={tokens.colors.status.standby}\n                />\n              )}\n              {power.voltage !== undefined && (\n                <CompactMetric\n                  astroIcon=\"propulsion-power\"\n                  label=\"Voltage\"\n                  value={`${safeNumber(power.voltage, 1)}V`}\n                />\n              )}\n            </>\n          )}\n\n          {/* Attitude metrics */}\n          {showAttitude && attitude && (\n            <>\n              {attitude.pointingError !== undefined && (\n                <CompactMetric\n                  astroIcon=\"explore\"\n                  label=\"Pointing\"\n                  value={`${safeNumber(attitude.pointingError, 2)}°`}\n                />\n              )}\n              {attitude.targetMode && (\n                <CompactMetric\n                  astroIcon=\"explore\"\n                  label=\"Mode\"\n                  value={attitude.targetMode}\n                />\n              )}\n            </>\n          )}\n\n          {/* Thermal metrics */}\n          {thermal && (\n            <>\n              {thermal.cpuTemp !== undefined && (\n                <CompactMetric\n                  icon=\"thermometer\"\n                  label=\"CPU\"\n                  value={`${safeNumber(thermal.cpuTemp, 0)}°C`}\n                  color={\n                    thermal.cpuTemp > 50\n                      ? tokens.colors.status.caution\n                      : undefined\n                  }\n                />\n              )}\n            </>\n          )}\n\n          {/* Comms metrics */}\n          {showComms && comms && (\n            <>\n              {comms.signalStrength !== undefined && (\n                <CompactMetric\n                  astroIcon=\"antenna\"\n                  label=\"Signal\"\n                  value={`${safeNumber(comms.signalStrength, 0)}%`}\n                />\n              )}\n              {(comms.downlinkRate ?? comms.dataRate) !== undefined && (\n                <CompactMetric\n                  astroIcon=\"antenna-transmit\"\n                  label=\"Rate\"\n                  value={`${safeNumber(comms.downlinkRate ?? comms.dataRate, 0)}Mb`}\n                />\n              )}\n              {comms.transmitterStatus && (\n                <CompactMetric\n                  astroIcon=\"antenna-receive\"\n                  label=\"TX\"\n                  value={\n                    comms.transmitterStatus === \"transmitting\" ? \"ON\" : \"OFF\"\n                  }\n                  color={\n                    comms.transmitterStatus === \"transmitting\"\n                      ? tokens.colors.status.normal\n                      : tokens.colors.status.off\n                  }\n                />\n              )}\n            </>\n          )}\n        </div>\n      </>\n    );\n  };\n\n  // Compact mode with overlay expansion - prevents layout shift\n  if (compact) {\n    return (\n      <article\n        className={classNames(\n          \"zendir-telemetry-card\",\n          \"compact\",\n          expanded ? \"expanded\" : \"\",\n          className,\n        )}\n        {...handlers}\n        aria-label={\n          spacecraftName\n            ? `${spacecraftName} Telemetry${expanded ? \"\" : \" (compact)\"}`\n            : \"Telemetry Data\"\n        }\n        style={{\n          position: \"relative\",\n          overflow: \"hidden\",\n          // Use glass container style for bold/minimal themes\n          ...(useGlassMode\n            ? glassContainerStyle\n            : {\n                backgroundColor: cardBg,\n                ...cardGlass,\n                ...cardBorderStyle,\n              }),\n          borderRadius: tokens.borderRadius.lg,\n          padding: expanded ? tokens.spacing.md : tokens.spacing.sm,\n          fontFamily: tokens.typography.fontFamily.primary,\n          color: tokens.colors.text.primary,\n          fontSize: expanded\n            ? tokens.typography.fontSize.base\n            : tokens.typography.fontSize.sm,\n          cursor: \"pointer\",\n          transition: `all ${animationDuration}ms ${animationEasing}`,\n          boxShadow: expanded\n            ? `0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px ${tokens.colors.accent.primary}30`\n            : \"none\",\n          zIndex: expanded ? 50 : 1,\n        }}\n      >\n        {/* Glass gradient overlay for bold/minimal themes */}\n        {useGlassMode && (\n          <div\n            style={{\n              position: \"absolute\",\n              inset: 0,\n              background:\n                \"linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)\",\n              pointerEvents: \"none\",\n              zIndex: 0,\n            }}\n          />\n        )}\n        {expanded\n          ? // Full expanded content - resolve data with fallbacks like compact view\n            (() => {\n              const power = telemetry?.power ?? telemetry?.subsystems?.power;\n              const attitude =\n                telemetry?.attitude ?? telemetry?.subsystems?.attitude;\n              const comms =\n                telemetry?.communications ?? telemetry?.subsystems?.comms;\n              return (\n                <>\n                  {/* Header - consistent icon/status with compact view */}\n                  <header\n                    style={{\n                      display: \"flex\",\n                      justifyContent: \"space-between\",\n                      alignItems: \"center\",\n                      marginBottom: tokens.spacing.md,\n                    }}\n                  >\n                    <div\n                      style={{\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        gap: tokens.spacing.sm,\n                      }}\n                    >\n                      {/* Icon with status badge - MonitoringIcon pattern */}\n                      <HeaderIconWithStatus\n                        icon=\"antenna-receive\"\n                        size={24}\n                        status={healthStatus}\n                      />\n                      <h3\n                        style={{\n                          margin: 0,\n                          fontSize: tokens.typography.fontSize.md,\n                          fontWeight: tokens.typography.fontWeight.semibold,\n                        }}\n                      >\n                        {spacecraftName\n                          ? `${spacecraftName} Telemetry`\n                          : \"Telemetry\"}\n                      </h3>\n                      {isPinned && (\n                        <Icon\n                          name=\"lock\"\n                          size={12}\n                          color={tokens.colors.accent.primary}\n                          style={{ marginLeft: 4 }}\n                        />\n                      )}\n                    </div>\n                    <StatusIndicator\n                      status={healthStatus}\n                      label={healthStatus}\n                      small\n                    />\n                  </header>\n\n                  {/* Power Section - fixed icon column so all icons align vertically */}\n                  {showPower && (\n                    <section style={sectionStyle} aria-label=\"Power subsystem\">\n                      <div\n                        style={{\n                          display: \"grid\",\n                          gridTemplateColumns: sectionGridColumns,\n                          gap: `${rowGap} ${iconGap}`,\n                          alignItems: \"center\",\n                        }}\n                      >\n                        <AstroIcon\n                          name=\"propulsion-power\"\n                          size={12}\n                          color={tokens.colors.text.tertiary}\n                        />\n                        <h4\n                          style={{\n                            margin: 0,\n                            gridColumn: \"2 / -1\",\n                            fontSize: tokens.typography.fontSize.xs,\n                            fontWeight: tokens.typography.fontWeight.medium,\n                            color: tokens.colors.text.secondary,\n                          }}\n                        >\n                          Power\n                        </h4>\n                        <AstroIcon\n                          name={getPropertyConfig(\"battery\").icon}\n                          size={16}\n                          color={getStatusColor(batteryStatus)}\n                        />\n                        <DataValue\n                          property=\"battery\"\n                          value={power?.batteryLevel}\n                          size=\"sm\"\n                          variant=\"card\"\n                          showIcon={false}\n                        />\n                        <AstroIcon\n                          name={getPropertyConfig(\"voltage\").icon}\n                          size={16}\n                          color={tokens.colors.text.tertiary}\n                        />\n                        <DataValue\n                          property=\"voltage\"\n                          value={power?.voltage}\n                          size=\"sm\"\n                          variant=\"card\"\n                          showIcon={false}\n                        />\n                        <AstroIcon\n                          name={getPropertyConfig(\"solarPower\").icon}\n                          size={16}\n                          color={tokens.colors.text.tertiary}\n                        />\n                        <DataValue\n                          property=\"solarPower\"\n                          value={\n                            power?.solarGeneration ?? power?.solarArrayOutput\n                          }\n                          size=\"sm\"\n                          variant=\"card\"\n                          status=\"standby\"\n                          showIcon={false}\n                        />\n                        <AstroIcon\n                          name={getPropertyConfig(\"load\").icon}\n                          size={16}\n                          color={tokens.colors.text.tertiary}\n                        />\n                        <DataValue\n                          property=\"load\"\n                          value={power?.consumption}\n                          size=\"sm\"\n                          variant=\"card\"\n                          showIcon={false}\n                        />\n                      </div>\n\n                      {/* Battery progress bar */}\n                      <div\n                        style={{\n                          marginTop: tokens.spacing.sm,\n                          height: 4,\n                          backgroundColor: tokens.colors.border.muted,\n                          borderRadius: 2,\n                          overflow: \"hidden\",\n                        }}\n                      >\n                        <div\n                          role=\"progressbar\"\n                          aria-valuenow={power?.batteryLevel ?? 0}\n                          aria-valuemin={0}\n                          aria-valuemax={100}\n                          aria-label=\"Battery level\"\n                          style={{\n                            height: \"100%\",\n                            width: `${Math.min(100, Math.max(0, power?.batteryLevel ?? 0))}%`,\n                            backgroundColor: getStatusColor(batteryStatus),\n                            borderRadius: 2,\n                            transition: `width ${transitionDuration} ease-out`,\n                          }}\n                        />\n                      </div>\n                    </section>\n                  )}\n\n                  {/* Attitude Section - fixed icon column so all icons align vertically */}\n                  {showAttitude && (\n                    <section\n                      style={sectionStyle}\n                      aria-label=\"Attitude subsystem\"\n                    >\n                      <div\n                        style={{\n                          display: \"grid\",\n                          gridTemplateColumns: sectionGridColumns,\n                          gap: `${rowGap} ${iconGap}`,\n                          alignItems: \"center\",\n                        }}\n                      >\n                        <AstroIcon\n                          name=\"explore\"\n                          size={12}\n                          color={tokens.colors.text.tertiary}\n                        />\n                        <h4\n                          style={{\n                            margin: 0,\n                            gridColumn: \"2 / -1\",\n                            fontSize: tokens.typography.fontSize.xs,\n                            fontWeight: tokens.typography.fontWeight.medium,\n                            color: tokens.colors.text.secondary,\n                          }}\n                        >\n                          Attitude\n                        </h4>\n                        <AstroIcon\n                          name={getPropertyConfig(\"roll\").icon}\n                          size={16}\n                          color={tokens.colors.text.tertiary}\n                        />\n                        <DataValue\n                          property=\"roll\"\n                          value={\n                            attitude?.eulerAngles?.roll ??\n                            attitude?.pointingError\n                          }\n                          size=\"sm\"\n                          variant=\"card\"\n                          showStatus={false}\n                          showIcon={false}\n                        />\n                        <AstroIcon\n                          name={getPropertyConfig(\"pitch\").icon}\n                          size={16}\n                          color={tokens.colors.text.tertiary}\n                        />\n                        <DataValue\n                          property=\"pitch\"\n                          value={attitude?.eulerAngles?.pitch}\n                          size=\"sm\"\n                          variant=\"card\"\n                          showStatus={false}\n                          showIcon={false}\n                        />\n                        <AstroIcon\n                          name={getPropertyConfig(\"yaw\").icon}\n                          size={16}\n                          color={tokens.colors.text.tertiary}\n                        />\n                        <DataValue\n                          property=\"yaw\"\n                          value={attitude?.eulerAngles?.yaw}\n                          size=\"sm\"\n                          variant=\"card\"\n                          showStatus={false}\n                          showIcon={false}\n                        />\n                        <AstroIcon\n                          name=\"explore\"\n                          size={16}\n                          color={tokens.colors.text.tertiary}\n                        />\n                        <DataValue\n                          label=\"Mode\"\n                          icon=\"explore\"\n                          value={attitude?.targetMode ?? \"--\"}\n                          size=\"sm\"\n                          variant=\"card\"\n                          showStatus={false}\n                          showIcon={false}\n                        />\n                      </div>\n                    </section>\n                  )}\n\n                  {/* Communications Section - fixed icon column so all icons align vertically */}\n                  {showComms && (\n                    <section\n                      style={{ marginBottom: tokens.spacing.sm }}\n                      aria-label=\"Communications subsystem\"\n                    >\n                      <div\n                        style={{\n                          display: \"grid\",\n                          gridTemplateColumns: sectionGridColumns,\n                          gap: `${rowGap} ${iconGap}`,\n                          alignItems: \"center\",\n                        }}\n                      >\n                        <AstroIcon\n                          name=\"antenna\"\n                          size={12}\n                          color={tokens.colors.text.tertiary}\n                        />\n                        <h4\n                          style={{\n                            margin: 0,\n                            gridColumn: \"2 / -1\",\n                            fontSize: tokens.typography.fontSize.xs,\n                            fontWeight: tokens.typography.fontWeight.medium,\n                            color: tokens.colors.text.secondary,\n                          }}\n                        >\n                          Communications\n                        </h4>\n                        <AstroIcon\n                          name=\"antenna-transmit\"\n                          size={16}\n                          color={tokens.colors.text.tertiary}\n                        />\n                        <DataValue\n                          label=\"Status\"\n                          icon=\"antenna-transmit\"\n                          value={\n                            comms?.transmitterStatus ?? comms?.status ?? \"--\"\n                          }\n                          size=\"sm\"\n                          variant=\"card\"\n                          showStatus={false}\n                          showIcon={false}\n                        />\n                        <AstroIcon\n                          name={getPropertyConfig(\"signalStrength\").icon}\n                          size={16}\n                          color={tokens.colors.text.tertiary}\n                        />\n                        <DataValue\n                          property=\"signalStrength\"\n                          value={comms?.signalStrength}\n                          size=\"sm\"\n                          variant=\"card\"\n                          showStatus={false}\n                          showIcon={false}\n                        />\n                        <AstroIcon\n                          name=\"antenna-receive\"\n                          size={16}\n                          color={tokens.colors.text.tertiary}\n                        />\n                        <DataValue\n                          label=\"Transmitted\"\n                          icon=\"antenna-receive\"\n                          value={\n                            comms?.packetsTransmitted ?? comms?.dataRate ?? \"--\"\n                          }\n                          size=\"sm\"\n                          variant=\"card\"\n                          showStatus={false}\n                          showIcon={false}\n                        />\n                        <span style={{ gridColumn: \"4 / -1\" }} />\n                      </div>\n                    </section>\n                  )}\n\n                  {/* Timestamp */}\n                  {telemetry?.timestamp && (\n                    <time\n                      dateTime={telemetry.timestamp}\n                      style={{\n                        display: \"block\",\n                        fontSize: tokens.typography.fontSize.xs,\n                        color: tokens.colors.text.tertiary,\n                        marginTop: tokens.spacing.sm,\n                        fontVariantNumeric: \"tabular-nums\",\n                      }}\n                    >\n                      {formatTime(telemetry.timestamp)}\n                    </time>\n                  )}\n                </>\n              );\n            })()\n          : // Compact content\n            renderCompactContent()}\n      </article>\n    );\n  }\n\n  return (\n    <article\n      className={classNames(\n        \"zendir-telemetry-card\",\n        compact ? \"expanded\" : \"\",\n        className,\n      )}\n      {...(compact ? handlers : {})}\n      role={compact ? handlers.role : \"article\"}\n      tabIndex={compact ? handlers.tabIndex : undefined}\n      aria-expanded={compact ? handlers[\"aria-expanded\"] : undefined}\n      aria-label={\n        spacecraftName ? `${spacecraftName} Telemetry` : \"Telemetry Data\"\n      }\n      style={{\n        position: \"relative\",\n        overflow: \"hidden\",\n        ...(useGlassMode\n          ? glassContainerStyle\n          : {\n              backgroundColor: cardBg,\n              ...cardGlass,\n              ...cardBorderStyle,\n            }),\n        borderRadius: tokens.borderRadius.lg,\n        padding: tokens.spacing.md,\n        fontFamily: tokens.typography.fontFamily.primary,\n        color: tokens.colors.text.primary,\n        fontSize: tokens.typography.fontSize.sm,\n        cursor: compact ? \"pointer\" : undefined,\n        transition: compact ? `all ${compactTransition} ease-out` : undefined,\n      }}\n    >\n      {/* Glass gradient overlay for bold/minimal themes */}\n      {useGlassMode && (\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            background:\n              \"linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)\",\n            pointerEvents: \"none\",\n            zIndex: 0,\n          }}\n        />\n      )}\n\n      {/* Unified Card Header - handles all theme variants */}\n      <CardHeader\n        icon=\"antenna-receive\"\n        title={spacecraftName ? `${spacecraftName} Telemetry` : \"Telemetry\"}\n        status={healthStatus}\n        isPinned={compact && isPinned}\n      />\n\n      {/* Power Section - fixed icon column so all icons align vertically */}\n      {showPower && (\n        <section style={sectionStyle} aria-label=\"Power subsystem\">\n          <div\n            style={{\n              display: \"grid\",\n              gridTemplateColumns: sectionGridColumns,\n              gap: `${rowGap} ${iconGap}`,\n              alignItems: \"center\",\n            }}\n          >\n            <AstroIcon\n              name=\"propulsion-power\"\n              size={12}\n              color={tokens.colors.text.tertiary}\n            />\n            <h4\n              style={{\n                margin: 0,\n                gridColumn: \"2 / -1\",\n                fontSize: tokens.typography.fontSize.xs,\n                fontWeight: tokens.typography.fontWeight.medium,\n                color: tokens.colors.text.secondary,\n              }}\n            >\n              Power\n            </h4>\n            <AstroIcon\n              name={getPropertyConfig(\"battery\").icon}\n              size={16}\n              color={getStatusColor(batteryStatus)}\n            />\n            <DataValue\n              property=\"battery\"\n              value={telemetry.power?.batteryLevel}\n              size=\"sm\"\n              variant=\"card\"\n              showIcon={false}\n            />\n            <AstroIcon\n              name={getPropertyConfig(\"voltage\").icon}\n              size={16}\n              color={tokens.colors.text.tertiary}\n            />\n            <DataValue\n              property=\"voltage\"\n              value={telemetry.power?.voltage}\n              size=\"sm\"\n              variant=\"card\"\n              showIcon={false}\n            />\n            <AstroIcon\n              name={getPropertyConfig(\"solarPower\").icon}\n              size={16}\n              color={tokens.colors.text.tertiary}\n            />\n            <DataValue\n              property=\"solarPower\"\n              value={telemetry.power?.solarGeneration}\n              size=\"sm\"\n              variant=\"card\"\n              status=\"standby\"\n              showIcon={false}\n            />\n            <AstroIcon\n              name={getPropertyConfig(\"load\").icon}\n              size={16}\n              color={tokens.colors.text.tertiary}\n            />\n            <DataValue\n              property=\"load\"\n              value={telemetry.power?.consumption}\n              size=\"sm\"\n              variant=\"card\"\n              showIcon={false}\n            />\n          </div>\n\n          {/* Battery progress bar */}\n          <div\n            style={{\n              marginTop: tokens.spacing.sm,\n              height: 4,\n              backgroundColor: tokens.colors.border.muted,\n              borderRadius: 2,\n              overflow: \"hidden\",\n            }}\n          >\n            <div\n              role=\"progressbar\"\n              aria-valuenow={telemetry.power?.batteryLevel ?? 0}\n              aria-valuemin={0}\n              aria-valuemax={100}\n              aria-label=\"Battery level\"\n              style={{\n                height: \"100%\",\n                width: `${Math.min(100, Math.max(0, telemetry.power?.batteryLevel ?? 0))}%`,\n                backgroundColor: getStatusColor(batteryStatus),\n                borderRadius: 2,\n                transition: `width ${transitionDuration} ease-out`,\n              }}\n            />\n          </div>\n        </section>\n      )}\n\n      {/* Attitude Section - fixed icon column so all icons align vertically */}\n      {showAttitude && (\n        <section style={sectionStyle} aria-label=\"Attitude subsystem\">\n          <div\n            style={{\n              display: \"grid\",\n              gridTemplateColumns: sectionGridColumns,\n              gap: `${rowGap} ${iconGap}`,\n              alignItems: \"center\",\n            }}\n          >\n            <AstroIcon\n              name=\"explore\"\n              size={12}\n              color={tokens.colors.text.tertiary}\n            />\n            <h4\n              style={{\n                margin: 0,\n                gridColumn: \"2 / -1\",\n                fontSize: tokens.typography.fontSize.xs,\n                fontWeight: tokens.typography.fontWeight.medium,\n                color: tokens.colors.text.secondary,\n              }}\n            >\n              Attitude\n            </h4>\n            <AstroIcon\n              name={getPropertyConfig(\"roll\").icon}\n              size={16}\n              color={tokens.colors.text.tertiary}\n            />\n            <DataValue\n              property=\"roll\"\n              value={telemetry.attitude?.eulerAngles?.roll}\n              size=\"sm\"\n              variant=\"card\"\n              showStatus={false}\n              showIcon={false}\n            />\n            <AstroIcon\n              name={getPropertyConfig(\"pitch\").icon}\n              size={16}\n              color={tokens.colors.text.tertiary}\n            />\n            <DataValue\n              property=\"pitch\"\n              value={telemetry.attitude?.eulerAngles?.pitch}\n              size=\"sm\"\n              variant=\"card\"\n              showStatus={false}\n              showIcon={false}\n            />\n            <AstroIcon\n              name={getPropertyConfig(\"yaw\").icon}\n              size={16}\n              color={tokens.colors.text.tertiary}\n            />\n            <DataValue\n              property=\"yaw\"\n              value={telemetry.attitude?.eulerAngles?.yaw}\n              size=\"sm\"\n              variant=\"card\"\n              showStatus={false}\n              showIcon={false}\n            />\n            <AstroIcon\n              name=\"explore\"\n              size={16}\n              color={tokens.colors.text.tertiary}\n            />\n            <DataValue\n              label=\"Mode\"\n              icon=\"explore\"\n              value={telemetry.attitude?.targetMode ?? \"--\"}\n              size=\"sm\"\n              variant=\"card\"\n              showStatus={false}\n              showIcon={false}\n            />\n          </div>\n          {telemetry.attitude?.pointingError !== undefined && (\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: iconGap,\n                marginTop: tokens.spacing.sm,\n              }}\n            >\n              <AstroIcon\n                name={getPropertyConfig(\"pointingError\").icon}\n                size={16}\n                color={tokens.colors.text.tertiary}\n              />\n              <DataValue\n                property=\"pointingError\"\n                value={telemetry.attitude.pointingError}\n                size=\"sm\"\n                variant=\"inline\"\n                showIcon={false}\n              />\n            </div>\n          )}\n        </section>\n      )}\n\n      {/* Communications Section - fixed icon column so all icons align vertically */}\n      {showComms && (\n        <section\n          style={{ marginBottom: tokens.spacing.md }}\n          aria-label=\"Communications subsystem\"\n        >\n          <div\n            style={{\n              display: \"grid\",\n              gridTemplateColumns: sectionGridColumns,\n              gap: `${rowGap} ${iconGap}`,\n              alignItems: \"center\",\n            }}\n          >\n            <AstroIcon\n              name=\"antenna\"\n              size={12}\n              color={tokens.colors.text.tertiary}\n            />\n            <h4\n              style={{\n                margin: 0,\n                gridColumn: \"2 / -1\",\n                fontSize: tokens.typography.fontSize.xs,\n                fontWeight: tokens.typography.fontWeight.medium,\n                color: tokens.colors.text.secondary,\n              }}\n            >\n              Communications\n            </h4>\n            <AstroIcon\n              name=\"antenna-transmit\"\n              size={16}\n              color={tokens.colors.text.tertiary}\n            />\n            <DataValue\n              label=\"Status\"\n              icon=\"antenna-transmit\"\n              value={telemetry.communications?.transmitterStatus ?? \"--\"}\n              size=\"sm\"\n              variant=\"card\"\n              showIcon={false}\n              status={\n                telemetry.communications?.transmitterStatus === \"transmitting\"\n                  ? \"normal\"\n                  : telemetry.communications?.transmitterStatus === \"error\"\n                    ? \"critical\"\n                    : \"off\"\n              }\n            />\n            <AstroIcon\n              name={getPropertyConfig(\"queue\").icon}\n              size={16}\n              color={tokens.colors.text.tertiary}\n            />\n            <DataValue\n              property=\"queue\"\n              value={telemetry.communications?.packetsQueued}\n              size=\"sm\"\n              variant=\"card\"\n              showIcon={false}\n            />\n            <AstroIcon\n              name=\"antenna-receive\"\n              size={16}\n              color={tokens.colors.text.tertiary}\n            />\n            <DataValue\n              label=\"Transmitted\"\n              icon=\"antenna-receive\"\n              value={safeNumber(\n                (telemetry.communications?.bytesTransmitted ?? 0) / 1024,\n                1,\n              )}\n              unit=\"KB\"\n              size=\"sm\"\n              variant=\"card\"\n              showStatus={false}\n              showIcon={false}\n            />\n            <span style={{ gridColumn: \"4 / -1\" }} />\n          </div>\n        </section>\n      )}\n\n      {/* Anomalies Alert */}\n      {telemetry.health?.anomalies && telemetry.health.anomalies.length > 0 && (\n        <div\n          role=\"alert\"\n          style={{\n            backgroundColor: `${tokens.colors.status.critical}15`,\n            border: `1px solid ${tokens.colors.status.critical}40`,\n            borderRadius: tokens.borderRadius.md,\n            padding: tokens.spacing.sm,\n            marginTop: tokens.spacing.md,\n          }}\n        >\n          <h4\n            style={{\n              margin: `0 0 ${tokens.spacing.xs} 0`,\n              fontSize: tokens.typography.fontSize.xs,\n              fontWeight: tokens.typography.fontWeight.medium,\n              color: tokens.colors.status.critical,\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: 4,\n            }}\n          >\n            ⚠️ Anomalies ({telemetry.health.anomalies.length})\n          </h4>\n          <ul style={{ margin: 0, paddingLeft: 16 }}>\n            {telemetry.health.anomalies.map(\n              (\n                anomaly: { id: string; message: string; severity?: string },\n                idx: number,\n              ) => (\n                <li\n                  key={idx}\n                  style={{\n                    fontSize: tokens.typography.fontSize.xs,\n                    color: tokens.colors.status.critical,\n                    marginTop: 2,\n                  }}\n                >\n                  {typeof anomaly === \"object\" &&\n                  anomaly !== null &&\n                  \"message\" in anomaly\n                    ? anomaly.message\n                    : String(anomaly)}\n                </li>\n              ),\n            )}\n          </ul>\n        </div>\n      )}\n\n      {/* Timestamp Footer */}\n      <footer\n        style={{\n          marginTop: tokens.spacing.md,\n          fontSize: tokens.typography.fontSize.xs,\n          color: tokens.colors.text.secondary, // WCAG AA compliant - 4.5:1 contrast\n          textAlign: \"right\",\n        }}\n      >\n        <time dateTime={telemetry.timestamp}>\n          {formatTime(telemetry.timestamp)} UTC\n        </time>\n      </footer>\n    </article>\n  );\n});\n\n// Note: DataCell is deprecated in favor of DataValue from core.\n// Use <DataValue property=\"...\" value={...} /> for automatic icon/status integration.\n"],"mappings":"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"}
+{"version":3,"file":"TelemetryCard.js","names":[],"sources":["../../../src/react/cards/TelemetryCard.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - TelemetryCard Component\r\n *\r\n * Enterprise-grade spacecraft telemetry data card.\r\n *\r\n * AstroUXDS Compliance:\r\n * - Status colors used semantically (battery level, health status)\r\n * - Dual-coded status indicators (color + shape via StatusIndicator)\r\n * - Zendir accent colors for non-status elements (icons, decorative)\r\n * - Tabular numbers with fontVariantNumeric for data display\r\n * - Sentence-case labels per Tier 3 compliance\r\n *\r\n * Features:\r\n * - Full null-safety with graceful fallbacks\r\n * - WCAG 2.1 AA accessibility\r\n * - Subsystem toggles (power, attitude, comms)\r\n * - Anomaly alerts\r\n * - Loading and empty states\r\n */\r\n\r\nimport React, { memo, useMemo, useState } from \"react\";\r\nimport type { TelemetryData } from \"../types\";\r\nimport { useTheme } from \"../theme\";\r\nimport { StatusIndicator } from \"../astro\";\r\nimport { DataValue, DataValueGroup } from \"../core/data/DataValue\";\r\nimport { getPropertyConfig } from \"../core/data/propertyConfig\";\r\nimport { AstroIcon } from \"../core/display/AstroIcon\";\r\nimport { CardHeader } from \"../core/display/CardHeader\";\r\nimport { HeaderIconWithStatus } from \"../core/display/HeaderIconWithStatus\";\r\nimport { Icon, type IconName } from \"../core/display/Icon\";\r\nimport { useCompactMode } from \"../hooks\";\r\nimport { useCardBorderStyle } from \"../context/DisplaySettingsContext\";\r\nimport {\r\n  safeNumber,\r\n  formatTime,\r\n  classNames,\r\n  getStatusColor,\r\n  deriveBatteryStatus,\r\n  normalizeStatus,\r\n  type StatusLevel,\r\n} from \"../utils\";\r\n\r\nexport interface TelemetryCardProps {\r\n  /** Telemetry data */\r\n  telemetry?: TelemetryData;\r\n  /** Spacecraft name */\r\n  spacecraftName?: string;\r\n  /** Show power subsystem */\r\n  showPower?: boolean;\r\n  /** Show attitude subsystem */\r\n  showAttitude?: boolean;\r\n  /** Show communications */\r\n  showComms?: boolean;\r\n  /** Loading state */\r\n  loading?: boolean;\r\n  /** Custom className */\r\n  className?: string;\r\n  /** Enable compact mode - shows condensed view that expands on hover/click */\r\n  compact?: boolean;\r\n  /** Start expanded when in compact mode (pinned state) */\r\n  defaultExpanded?: boolean;\r\n  /** Callback when pin state changes in compact mode */\r\n  onPinChange?: (isPinned: boolean) => void;\r\n}\r\n\r\n/**\r\n * Get health status level\r\n * Uses normalizeStatus utility to convert SDK terms to StatusLevel\r\n */\r\nfunction getHealthStatus(healthStatus: string | undefined): StatusLevel {\r\n  return normalizeStatus(healthStatus);\r\n}\r\n\r\n/**\r\n * Get battery status based on level\r\n * @deprecated Use deriveBatteryStatus from utils instead\r\n */\r\nfunction getBatteryStatus(level: number | undefined): StatusLevel {\r\n  return deriveBatteryStatus(level);\r\n}\r\n\r\n/**\r\n * TelemetryCard - Displays spacecraft telemetry data\r\n *\r\n * @example\r\n * ```tsx\r\n * <TelemetryCard\r\n *   telemetry={telemetryData}\r\n *   spacecraftName=\"ISS\"\r\n *   showPower\r\n *   showAttitude\r\n *   showComms\r\n * />\r\n * ```\r\n */\r\nexport const TelemetryCard = memo(function TelemetryCard({\r\n  telemetry,\r\n  spacecraftName,\r\n  showPower = true,\r\n  showAttitude = true,\r\n  showComms = true,\r\n  loading = false,\r\n  className = \"\",\r\n  compact = false,\r\n  defaultExpanded = false,\r\n  onPinChange,\r\n}: TelemetryCardProps): React.ReactElement {\r\n  const { tokens, theme, prefersReducedMotion } = useTheme();\r\n  const isTransparentTheme =\r\n    theme === \"transparent\" ||\r\n    theme === \"transparent-bold\" ||\r\n    theme === \"transparent-minimal\";\r\n  const isBoldVariant = theme === \"transparent-bold\";\r\n  const isMinimalVariant = theme === \"transparent-minimal\";\r\n  const useGlassMode = isBoldVariant || isMinimalVariant;\r\n\r\n  // Glass accent colors for bold/minimal themes (matching Container/AstroChart)\r\n  const glassAccentColor = tokens.colors.accent.primary;\r\n  const glassAccentMuted = `${glassAccentColor}66`;\r\n\r\n  // Use transparent background with blur for transparent themes (matching Timeline)\r\n  const cardBg = isTransparentTheme\r\n    ? \"transparent\"\r\n    : tokens.colors.background.surface;\r\n  const cardGlass = isTransparentTheme\r\n    ? {\r\n        backdropFilter: \"blur(12px)\" as const,\r\n        WebkitBackdropFilter: \"blur(12px)\" as const,\r\n      }\r\n    : {};\r\n  // Get card border style based on accentBorders setting\r\n  const cardBorderStyle = useCardBorderStyle(tokens, isTransparentTheme);\r\n\r\n  // Glass mode container style (matching Container/AstroChart for bold/minimal)\r\n  const glassContainerStyle: React.CSSProperties = useGlassMode\r\n    ? {\r\n        backgroundColor: \"rgba(10, 15, 25, 0.35)\",\r\n        backdropFilter: \"blur(12px)\",\r\n        WebkitBackdropFilter: \"blur(12px)\",\r\n        border: `1px solid ${glassAccentMuted}`,\r\n        borderTop: isBoldVariant\r\n          ? `2px solid ${glassAccentColor}`\r\n          : `1px solid ${glassAccentColor}`,\r\n      }\r\n    : {};\r\n\r\n  // Compact mode state management\r\n  const {\r\n    expanded,\r\n    isPinned,\r\n    isHovered: _isHovered,\r\n    handlers,\r\n    transitionDuration: compactTransition,\r\n  } = useCompactMode({\r\n    compact,\r\n    defaultExpanded,\r\n    onPinChange,\r\n  });\r\n\r\n  // Track if we're animating to prevent flicker\r\n  const [_isAnimating, _setIsAnimating] = useState(false);\r\n\r\n  // Smooth animation timing\r\n  const animationDuration = prefersReducedMotion ? 0 : 250;\r\n  const animationEasing = \"cubic-bezier(0.4, 0, 0.2, 1)\";\r\n\r\n  // Computed statuses\r\n  const healthStatus = useMemo(\r\n    () => getHealthStatus(telemetry?.health?.status),\r\n    [telemetry?.health?.status],\r\n  );\r\n\r\n  const batteryStatus = useMemo(\r\n    () => getBatteryStatus(telemetry?.power?.batteryLevel),\r\n    [telemetry?.power?.batteryLevel],\r\n  );\r\n\r\n  const transitionDuration = prefersReducedMotion ? \"0ms\" : \"200ms\";\r\n\r\n  // Loading state\r\n  if (loading) {\r\n    return (\r\n      <div\r\n        className={classNames(\"zendir-telemetry-card\", \"loading\", className)}\r\n        role=\"article\"\r\n        aria-busy=\"true\"\r\n        aria-label=\"Loading telemetry data\"\r\n        style={{\r\n          backgroundColor: cardBg,\r\n          ...cardGlass,\r\n          ...cardBorderStyle,\r\n          borderRadius: tokens.borderRadius.lg,\r\n          padding: tokens.spacing.md,\r\n          minHeight: 200,\r\n        }}\r\n      >\r\n        <div\r\n          style={{\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            gap: 8,\r\n            marginBottom: 16,\r\n          }}\r\n        >\r\n          <div\r\n            style={{\r\n              width: 24,\r\n              height: 24,\r\n              borderRadius: 4,\r\n              backgroundColor: \"rgba(255,255,255,0.1)\",\r\n            }}\r\n          />\r\n          <div\r\n            style={{\r\n              height: 16,\r\n              width: \"40%\",\r\n              backgroundColor: \"rgba(255,255,255,0.1)\",\r\n              borderRadius: 4,\r\n            }}\r\n          />\r\n        </div>\r\n        {[1, 2, 3].map((i) => (\r\n          <div key={i} style={{ marginBottom: 16 }}>\r\n            <div\r\n              style={{\r\n                height: 12,\r\n                width: \"30%\",\r\n                backgroundColor: \"rgba(255,255,255,0.08)\",\r\n                borderRadius: 2,\r\n                marginBottom: 8,\r\n              }}\r\n            />\r\n            <div\r\n              style={{\r\n                display: \"grid\",\r\n                gridTemplateColumns: \"repeat(2, 1fr)\",\r\n                gap: 8,\r\n              }}\r\n            >\r\n              {[1, 2, 3, 4].map((j) => (\r\n                <div\r\n                  key={j}\r\n                  style={{\r\n                    height: 32,\r\n                    backgroundColor: \"rgba(255,255,255,0.06)\",\r\n                    borderRadius: 4,\r\n                  }}\r\n                />\r\n              ))}\r\n            </div>\r\n          </div>\r\n        ))}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Empty state\r\n  if (!telemetry) {\r\n    return (\r\n      <div\r\n        className={classNames(\"zendir-telemetry-card\", \"empty\", className)}\r\n        role=\"article\"\r\n        aria-label=\"No telemetry data\"\r\n        style={{\r\n          backgroundColor: cardBg,\r\n          ...cardGlass,\r\n          ...(tokens.colors.border.cardStyleDashed ?? {}),\r\n          borderRadius: tokens.borderRadius.lg,\r\n          padding: tokens.spacing.lg,\r\n          textAlign: \"center\",\r\n          color: tokens.colors.text.tertiary,\r\n        }}\r\n      >\r\n        <AstroIcon\r\n          name=\"antenna\"\r\n          size=\"normal\"\r\n          label=\"\"\r\n          style={{ opacity: 0.5 }}\r\n        />\r\n        <p\r\n          style={{\r\n            margin: \"8px 0 0 0\",\r\n            fontSize: tokens.typography.body[2].fontSize,\r\n          }}\r\n        >\r\n          No telemetry data available\r\n        </p>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  const sectionStyle: React.CSSProperties = {\r\n    marginBottom: tokens.spacing.md,\r\n    paddingBottom: tokens.spacing.md,\r\n    borderBottom: `1px solid ${tokens.colors.border.muted}`,\r\n  };\r\n\r\n  /** Fixed width so all section and metric icons align on one vertical line */\r\n  const iconColumnWidth = 20;\r\n  const iconGap = tokens.spacing.sm;\r\n  const rowGap = tokens.spacing.smd;\r\n  const sectionGridColumns = `${iconColumnWidth}px 1fr ${iconColumnWidth}px 1fr`;\r\n\r\n  // Compact metric item component for consistent styling\r\n  const CompactMetric = ({\r\n    icon,\r\n    label,\r\n    value,\r\n    color,\r\n    astroIcon,\r\n  }: {\r\n    icon?: string;\r\n    label: string;\r\n    value: string | number;\r\n    color?: string;\r\n    astroIcon?: string;\r\n  }) => (\r\n    <div\r\n      style={{\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        gap: 3,\r\n        padding: `2px 0`,\r\n      }}\r\n    >\r\n      {astroIcon ? (\r\n        <AstroIcon\r\n          name={astroIcon}\r\n          size={12}\r\n          color={color ?? tokens.colors.text.secondary}\r\n        />\r\n      ) : icon ? (\r\n        <Icon\r\n          name={icon as IconName}\r\n          size={12}\r\n          color={color ?? tokens.colors.text.secondary}\r\n        />\r\n      ) : null}\r\n      <span\r\n        style={{\r\n          fontSize: tokens.typography.fontSize.micro, // 0.5625rem / 9px (AstroUXDS micro)\r\n          fontWeight: tokens.typography.fontWeight.medium,\r\n          fontFamily: tokens.typography.fontFamily.primary, // Public Sans → Roboto fallback → system stack\r\n          color: tokens.colors.text.tertiary,\r\n          textTransform: \"uppercase\",\r\n          minWidth: 8,\r\n        }}\r\n      >\r\n        {label.charAt(0)}\r\n      </span>\r\n      <span\r\n        style={{\r\n          fontVariantNumeric: \"tabular-nums\",\r\n          fontFamily: tokens.typography.fontFamily.mono,\r\n          fontSize: tokens.typography.fontSize.xs,\r\n          color: color ?? tokens.colors.text.primary,\r\n          fontWeight: tokens.typography.fontWeight.medium,\r\n        }}\r\n      >\r\n        {value}\r\n      </span>\r\n    </div>\r\n  );\r\n\r\n  // Compact view content - reusable for both states\r\n  const renderCompactContent = () => {\r\n    const power = telemetry?.power ?? telemetry?.subsystems?.power;\r\n    const attitude = telemetry?.attitude ?? telemetry?.subsystems?.attitude;\r\n    const comms = telemetry?.communications ?? telemetry?.subsystems?.comms;\r\n    const thermal = telemetry?.subsystems?.thermal;\r\n    const compactStatusColor = getStatusColor(healthStatus);\r\n\r\n    return (\r\n      <>\r\n        {/* Header: Icon with status badge overlay → Name → (flex) → Badges on right */}\r\n        {/* Follows MonitoringIcon layout pattern for consistency */}\r\n        <div\r\n          style={{\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"space-between\",\r\n            marginBottom: tokens.spacing.xs,\r\n            paddingBottom: tokens.spacing.xs,\r\n            borderBottom: useGlassMode\r\n              ? \"none\"\r\n              : `1px solid ${tokens.colors.border.muted}`,\r\n            position: \"relative\",\r\n            zIndex: 1,\r\n          }}\r\n        >\r\n          {/* Left side: Icon with status badge + Name */}\r\n          <div\r\n            style={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: tokens.spacing.sm,\r\n              minWidth: 0,\r\n              flex: 1,\r\n            }}\r\n          >\r\n            {/* Icon with status badge - MonitoringIcon pattern */}\r\n            <HeaderIconWithStatus\r\n              icon=\"antenna-receive\"\r\n              size={20}\r\n              status={healthStatus}\r\n              statusColor={compactStatusColor}\r\n            />\r\n            {/* Name - accent color for glass mode */}\r\n            <span\r\n              style={{\r\n                fontWeight: tokens.typography.fontWeight.semibold,\r\n                fontSize: tokens.typography.fontSize.sm,\r\n                fontFamily: tokens.typography.fontFamily.primary,\r\n                color: useGlassMode ? glassAccentColor : undefined,\r\n                textShadow: useGlassMode\r\n                  ? `0 0 16px ${glassAccentMuted}`\r\n                  : undefined,\r\n                whiteSpace: \"nowrap\",\r\n                overflow: \"hidden\",\r\n                textOverflow: \"ellipsis\",\r\n                minWidth: 0,\r\n              }}\r\n            >\r\n              {spacecraftName ? spacecraftName.split(\" \")[0] : \"Telemetry\"}\r\n            </span>\r\n            {/* Accent line for glass mode */}\r\n            {useGlassMode && (\r\n              <div\r\n                style={{\r\n                  flex: 1,\r\n                  height: isBoldVariant ? \"2px\" : \"1px\",\r\n                  minWidth: 20,\r\n                  background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 60%, transparent 100%)`,\r\n                  boxShadow: isBoldVariant\r\n                    ? `0 0 8px ${glassAccentMuted}`\r\n                    : undefined,\r\n                }}\r\n              />\r\n            )}\r\n          </div>\r\n\r\n          {/* Right side: Badges (pin indicator, etc.) */}\r\n          <div\r\n            style={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: tokens.spacing.xs,\r\n              flexShrink: 0,\r\n            }}\r\n          >\r\n            {isPinned && (\r\n              <Icon\r\n                name=\"lock\"\r\n                size={10}\r\n                color={tokens.colors.accent.primary}\r\n              />\r\n            )}\r\n          </div>\r\n        </div>\r\n\r\n        {/* Metrics grid */}\r\n        <div\r\n          style={{\r\n            display: \"grid\",\r\n            gridTemplateColumns: \"repeat(3, 1fr)\",\r\n            gap: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\r\n          }}\r\n        >\r\n          {/* Power metrics */}\r\n          {showPower && power && (\r\n            <>\r\n              {power.batteryLevel !== undefined && (\r\n                <CompactMetric\r\n                  icon=\"battery\"\r\n                  label=\"Battery\"\r\n                  value={`${safeNumber(power.batteryLevel, 0)}%`}\r\n                  color={getStatusColor(batteryStatus)}\r\n                />\r\n              )}\r\n              {(power.solarGeneration ?? power.solarArrayOutput) !==\r\n                undefined && (\r\n                <CompactMetric\r\n                  astroIcon=\"solar\"\r\n                  label=\"Solar\"\r\n                  value={`${safeNumber(power.solarGeneration ?? power.solarArrayOutput, 1)}W`}\r\n                  color={tokens.colors.status.standby}\r\n                />\r\n              )}\r\n              {power.voltage !== undefined && (\r\n                <CompactMetric\r\n                  astroIcon=\"propulsion-power\"\r\n                  label=\"Voltage\"\r\n                  value={`${safeNumber(power.voltage, 1)}V`}\r\n                />\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {/* Attitude metrics */}\r\n          {showAttitude && attitude && (\r\n            <>\r\n              {attitude.pointingError !== undefined && (\r\n                <CompactMetric\r\n                  astroIcon=\"explore\"\r\n                  label=\"Pointing\"\r\n                  value={`${safeNumber(attitude.pointingError, 2)}°`}\r\n                />\r\n              )}\r\n              {attitude.targetMode && (\r\n                <CompactMetric\r\n                  astroIcon=\"explore\"\r\n                  label=\"Mode\"\r\n                  value={attitude.targetMode}\r\n                />\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {/* Thermal metrics */}\r\n          {thermal && (\r\n            <>\r\n              {thermal.cpuTemp !== undefined && (\r\n                <CompactMetric\r\n                  icon=\"thermometer\"\r\n                  label=\"CPU\"\r\n                  value={`${safeNumber(thermal.cpuTemp, 0)}°C`}\r\n                  color={\r\n                    thermal.cpuTemp > 50\r\n                      ? tokens.colors.status.caution\r\n                      : undefined\r\n                  }\r\n                />\r\n              )}\r\n            </>\r\n          )}\r\n\r\n          {/* Comms metrics */}\r\n          {showComms && comms && (\r\n            <>\r\n              {comms.signalStrength !== undefined && (\r\n                <CompactMetric\r\n                  astroIcon=\"antenna\"\r\n                  label=\"Signal\"\r\n                  value={`${safeNumber(comms.signalStrength, 0)}%`}\r\n                />\r\n              )}\r\n              {(comms.downlinkRate ?? comms.dataRate) !== undefined && (\r\n                <CompactMetric\r\n                  astroIcon=\"antenna-transmit\"\r\n                  label=\"Rate\"\r\n                  value={`${safeNumber(comms.downlinkRate ?? comms.dataRate, 0)}Mb`}\r\n                />\r\n              )}\r\n              {comms.transmitterStatus && (\r\n                <CompactMetric\r\n                  astroIcon=\"antenna-receive\"\r\n                  label=\"TX\"\r\n                  value={\r\n                    comms.transmitterStatus === \"transmitting\" ? \"ON\" : \"OFF\"\r\n                  }\r\n                  color={\r\n                    comms.transmitterStatus === \"transmitting\"\r\n                      ? tokens.colors.status.normal\r\n                      : tokens.colors.status.off\r\n                  }\r\n                />\r\n              )}\r\n            </>\r\n          )}\r\n        </div>\r\n      </>\r\n    );\r\n  };\r\n\r\n  // Compact mode with overlay expansion - prevents layout shift\r\n  if (compact) {\r\n    return (\r\n      <article\r\n        className={classNames(\r\n          \"zendir-telemetry-card\",\r\n          \"compact\",\r\n          expanded ? \"expanded\" : \"\",\r\n          className,\r\n        )}\r\n        {...handlers}\r\n        aria-label={\r\n          spacecraftName\r\n            ? `${spacecraftName} Telemetry${expanded ? \"\" : \" (compact)\"}`\r\n            : \"Telemetry Data\"\r\n        }\r\n        style={{\r\n          position: \"relative\",\r\n          overflow: \"hidden\",\r\n          // Use glass container style for bold/minimal themes\r\n          ...(useGlassMode\r\n            ? glassContainerStyle\r\n            : {\r\n                backgroundColor: cardBg,\r\n                ...cardGlass,\r\n                ...cardBorderStyle,\r\n              }),\r\n          borderRadius: tokens.borderRadius.lg,\r\n          padding: expanded ? tokens.spacing.md : tokens.spacing.sm,\r\n          fontFamily: tokens.typography.fontFamily.primary,\r\n          color: tokens.colors.text.primary,\r\n          fontSize: expanded\r\n            ? tokens.typography.fontSize.base\r\n            : tokens.typography.fontSize.sm,\r\n          cursor: \"pointer\",\r\n          transition: `all ${animationDuration}ms ${animationEasing}`,\r\n          boxShadow: expanded\r\n            ? `0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px ${tokens.colors.accent.primary}30`\r\n            : \"none\",\r\n          zIndex: expanded ? 50 : 1,\r\n        }}\r\n      >\r\n        {/* Glass gradient overlay for bold/minimal themes */}\r\n        {useGlassMode && (\r\n          <div\r\n            style={{\r\n              position: \"absolute\",\r\n              inset: 0,\r\n              background:\r\n                \"linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)\",\r\n              pointerEvents: \"none\",\r\n              zIndex: 0,\r\n            }}\r\n          />\r\n        )}\r\n        {expanded\r\n          ? // Full expanded content - resolve data with fallbacks like compact view\r\n            (() => {\r\n              const power = telemetry?.power ?? telemetry?.subsystems?.power;\r\n              const attitude =\r\n                telemetry?.attitude ?? telemetry?.subsystems?.attitude;\r\n              const comms =\r\n                telemetry?.communications ?? telemetry?.subsystems?.comms;\r\n              return (\r\n                <>\r\n                  {/* Header - consistent icon/status with compact view */}\r\n                  <header\r\n                    style={{\r\n                      display: \"flex\",\r\n                      justifyContent: \"space-between\",\r\n                      alignItems: \"center\",\r\n                      marginBottom: tokens.spacing.md,\r\n                    }}\r\n                  >\r\n                    <div\r\n                      style={{\r\n                        display: \"flex\",\r\n                        alignItems: \"center\",\r\n                        gap: tokens.spacing.sm,\r\n                      }}\r\n                    >\r\n                      {/* Icon with status badge - MonitoringIcon pattern */}\r\n                      <HeaderIconWithStatus\r\n                        icon=\"antenna-receive\"\r\n                        size={24}\r\n                        status={healthStatus}\r\n                      />\r\n                      <h3\r\n                        style={{\r\n                          margin: 0,\r\n                          fontSize: tokens.typography.fontSize.md,\r\n                          fontWeight: tokens.typography.fontWeight.semibold,\r\n                        }}\r\n                      >\r\n                        {spacecraftName\r\n                          ? `${spacecraftName} Telemetry`\r\n                          : \"Telemetry\"}\r\n                      </h3>\r\n                      {isPinned && (\r\n                        <Icon\r\n                          name=\"lock\"\r\n                          size={12}\r\n                          color={tokens.colors.accent.primary}\r\n                          style={{ marginLeft: 4 }}\r\n                        />\r\n                      )}\r\n                    </div>\r\n                    <StatusIndicator\r\n                      status={healthStatus}\r\n                      label={healthStatus}\r\n                      small\r\n                    />\r\n                  </header>\r\n\r\n                  {/* Power Section - fixed icon column so all icons align vertically */}\r\n                  {showPower && (\r\n                    <section style={sectionStyle} aria-label=\"Power subsystem\">\r\n                      <div\r\n                        style={{\r\n                          display: \"grid\",\r\n                          gridTemplateColumns: sectionGridColumns,\r\n                          gap: `${rowGap} ${iconGap}`,\r\n                          alignItems: \"center\",\r\n                        }}\r\n                      >\r\n                        <AstroIcon\r\n                          name=\"propulsion-power\"\r\n                          size={12}\r\n                          color={tokens.colors.text.tertiary}\r\n                        />\r\n                        <h4\r\n                          style={{\r\n                            margin: 0,\r\n                            gridColumn: \"2 / -1\",\r\n                            fontSize: tokens.typography.fontSize.xs,\r\n                            fontWeight: tokens.typography.fontWeight.medium,\r\n                            color: tokens.colors.text.secondary,\r\n                          }}\r\n                        >\r\n                          Power\r\n                        </h4>\r\n                        <AstroIcon\r\n                          name={getPropertyConfig(\"battery\").icon}\r\n                          size={16}\r\n                          color={getStatusColor(batteryStatus)}\r\n                        />\r\n                        <DataValue\r\n                          property=\"battery\"\r\n                          value={power?.batteryLevel}\r\n                          size=\"sm\"\r\n                          variant=\"card\"\r\n                          showIcon={false}\r\n                        />\r\n                        <AstroIcon\r\n                          name={getPropertyConfig(\"voltage\").icon}\r\n                          size={16}\r\n                          color={tokens.colors.text.tertiary}\r\n                        />\r\n                        <DataValue\r\n                          property=\"voltage\"\r\n                          value={power?.voltage}\r\n                          size=\"sm\"\r\n                          variant=\"card\"\r\n                          showIcon={false}\r\n                        />\r\n                        <AstroIcon\r\n                          name={getPropertyConfig(\"solarPower\").icon}\r\n                          size={16}\r\n                          color={tokens.colors.text.tertiary}\r\n                        />\r\n                        <DataValue\r\n                          property=\"solarPower\"\r\n                          value={\r\n                            power?.solarGeneration ?? power?.solarArrayOutput\r\n                          }\r\n                          size=\"sm\"\r\n                          variant=\"card\"\r\n                          status=\"standby\"\r\n                          showIcon={false}\r\n                        />\r\n                        <AstroIcon\r\n                          name={getPropertyConfig(\"load\").icon}\r\n                          size={16}\r\n                          color={tokens.colors.text.tertiary}\r\n                        />\r\n                        <DataValue\r\n                          property=\"load\"\r\n                          value={power?.consumption}\r\n                          size=\"sm\"\r\n                          variant=\"card\"\r\n                          showIcon={false}\r\n                        />\r\n                      </div>\r\n\r\n                      {/* Battery progress bar */}\r\n                      <div\r\n                        style={{\r\n                          marginTop: tokens.spacing.sm,\r\n                          height: 4,\r\n                          backgroundColor: tokens.colors.border.muted,\r\n                          borderRadius: 2,\r\n                          overflow: \"hidden\",\r\n                        }}\r\n                      >\r\n                        <div\r\n                          role=\"progressbar\"\r\n                          aria-valuenow={power?.batteryLevel ?? 0}\r\n                          aria-valuemin={0}\r\n                          aria-valuemax={100}\r\n                          aria-label=\"Battery level\"\r\n                          style={{\r\n                            height: \"100%\",\r\n                            width: `${Math.min(100, Math.max(0, power?.batteryLevel ?? 0))}%`,\r\n                            backgroundColor: getStatusColor(batteryStatus),\r\n                            borderRadius: 2,\r\n                            transition: `width ${transitionDuration} ease-out`,\r\n                          }}\r\n                        />\r\n                      </div>\r\n                    </section>\r\n                  )}\r\n\r\n                  {/* Attitude Section - fixed icon column so all icons align vertically */}\r\n                  {showAttitude && (\r\n                    <section\r\n                      style={sectionStyle}\r\n                      aria-label=\"Attitude subsystem\"\r\n                    >\r\n                      <div\r\n                        style={{\r\n                          display: \"grid\",\r\n                          gridTemplateColumns: sectionGridColumns,\r\n                          gap: `${rowGap} ${iconGap}`,\r\n                          alignItems: \"center\",\r\n                        }}\r\n                      >\r\n                        <AstroIcon\r\n                          name=\"explore\"\r\n                          size={12}\r\n                          color={tokens.colors.text.tertiary}\r\n                        />\r\n                        <h4\r\n                          style={{\r\n                            margin: 0,\r\n                            gridColumn: \"2 / -1\",\r\n                            fontSize: tokens.typography.fontSize.xs,\r\n                            fontWeight: tokens.typography.fontWeight.medium,\r\n                            color: tokens.colors.text.secondary,\r\n                          }}\r\n                        >\r\n                          Attitude\r\n                        </h4>\r\n                        <AstroIcon\r\n                          name={getPropertyConfig(\"roll\").icon}\r\n                          size={16}\r\n                          color={tokens.colors.text.tertiary}\r\n                        />\r\n                        <DataValue\r\n                          property=\"roll\"\r\n                          value={\r\n                            attitude?.eulerAngles?.roll ??\r\n                            attitude?.pointingError\r\n                          }\r\n                          size=\"sm\"\r\n                          variant=\"card\"\r\n                          showStatus={false}\r\n                          showIcon={false}\r\n                        />\r\n                        <AstroIcon\r\n                          name={getPropertyConfig(\"pitch\").icon}\r\n                          size={16}\r\n                          color={tokens.colors.text.tertiary}\r\n                        />\r\n                        <DataValue\r\n                          property=\"pitch\"\r\n                          value={attitude?.eulerAngles?.pitch}\r\n                          size=\"sm\"\r\n                          variant=\"card\"\r\n                          showStatus={false}\r\n                          showIcon={false}\r\n                        />\r\n                        <AstroIcon\r\n                          name={getPropertyConfig(\"yaw\").icon}\r\n                          size={16}\r\n                          color={tokens.colors.text.tertiary}\r\n                        />\r\n                        <DataValue\r\n                          property=\"yaw\"\r\n                          value={attitude?.eulerAngles?.yaw}\r\n                          size=\"sm\"\r\n                          variant=\"card\"\r\n                          showStatus={false}\r\n                          showIcon={false}\r\n                        />\r\n                        <AstroIcon\r\n                          name=\"explore\"\r\n                          size={16}\r\n                          color={tokens.colors.text.tertiary}\r\n                        />\r\n                        <DataValue\r\n                          label=\"Mode\"\r\n                          icon=\"explore\"\r\n                          value={attitude?.targetMode ?? \"--\"}\r\n                          size=\"sm\"\r\n                          variant=\"card\"\r\n                          showStatus={false}\r\n                          showIcon={false}\r\n                        />\r\n                      </div>\r\n                    </section>\r\n                  )}\r\n\r\n                  {/* Communications Section - fixed icon column so all icons align vertically */}\r\n                  {showComms && (\r\n                    <section\r\n                      style={{ marginBottom: tokens.spacing.sm }}\r\n                      aria-label=\"Communications subsystem\"\r\n                    >\r\n                      <div\r\n                        style={{\r\n                          display: \"grid\",\r\n                          gridTemplateColumns: sectionGridColumns,\r\n                          gap: `${rowGap} ${iconGap}`,\r\n                          alignItems: \"center\",\r\n                        }}\r\n                      >\r\n                        <AstroIcon\r\n                          name=\"antenna\"\r\n                          size={12}\r\n                          color={tokens.colors.text.tertiary}\r\n                        />\r\n                        <h4\r\n                          style={{\r\n                            margin: 0,\r\n                            gridColumn: \"2 / -1\",\r\n                            fontSize: tokens.typography.fontSize.xs,\r\n                            fontWeight: tokens.typography.fontWeight.medium,\r\n                            color: tokens.colors.text.secondary,\r\n                          }}\r\n                        >\r\n                          Communications\r\n                        </h4>\r\n                        <AstroIcon\r\n                          name=\"antenna-transmit\"\r\n                          size={16}\r\n                          color={tokens.colors.text.tertiary}\r\n                        />\r\n                        <DataValue\r\n                          label=\"Status\"\r\n                          icon=\"antenna-transmit\"\r\n                          value={\r\n                            comms?.transmitterStatus ?? comms?.status ?? \"--\"\r\n                          }\r\n                          size=\"sm\"\r\n                          variant=\"card\"\r\n                          showStatus={false}\r\n                          showIcon={false}\r\n                        />\r\n                        <AstroIcon\r\n                          name={getPropertyConfig(\"signalStrength\").icon}\r\n                          size={16}\r\n                          color={tokens.colors.text.tertiary}\r\n                        />\r\n                        <DataValue\r\n                          property=\"signalStrength\"\r\n                          value={comms?.signalStrength}\r\n                          size=\"sm\"\r\n                          variant=\"card\"\r\n                          showStatus={false}\r\n                          showIcon={false}\r\n                        />\r\n                        <AstroIcon\r\n                          name=\"antenna-receive\"\r\n                          size={16}\r\n                          color={tokens.colors.text.tertiary}\r\n                        />\r\n                        <DataValue\r\n                          label=\"Transmitted\"\r\n                          icon=\"antenna-receive\"\r\n                          value={\r\n                            comms?.packetsTransmitted ?? comms?.dataRate ?? \"--\"\r\n                          }\r\n                          size=\"sm\"\r\n                          variant=\"card\"\r\n                          showStatus={false}\r\n                          showIcon={false}\r\n                        />\r\n                        <span style={{ gridColumn: \"4 / -1\" }} />\r\n                      </div>\r\n                    </section>\r\n                  )}\r\n\r\n                  {/* Timestamp */}\r\n                  {telemetry?.timestamp && (\r\n                    <time\r\n                      dateTime={telemetry.timestamp}\r\n                      style={{\r\n                        display: \"block\",\r\n                        fontSize: tokens.typography.fontSize.xs,\r\n                        color: tokens.colors.text.tertiary,\r\n                        marginTop: tokens.spacing.sm,\r\n                        fontVariantNumeric: \"tabular-nums\",\r\n                      }}\r\n                    >\r\n                      {formatTime(telemetry.timestamp)}\r\n                    </time>\r\n                  )}\r\n                </>\r\n              );\r\n            })()\r\n          : // Compact content\r\n            renderCompactContent()}\r\n      </article>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <article\r\n      className={classNames(\r\n        \"zendir-telemetry-card\",\r\n        compact ? \"expanded\" : \"\",\r\n        className,\r\n      )}\r\n      {...(compact ? handlers : {})}\r\n      role={compact ? handlers.role : \"article\"}\r\n      tabIndex={compact ? handlers.tabIndex : undefined}\r\n      aria-expanded={compact ? handlers[\"aria-expanded\"] : undefined}\r\n      aria-label={\r\n        spacecraftName ? `${spacecraftName} Telemetry` : \"Telemetry Data\"\r\n      }\r\n      style={{\r\n        position: \"relative\",\r\n        overflow: \"hidden\",\r\n        ...(useGlassMode\r\n          ? glassContainerStyle\r\n          : {\r\n              backgroundColor: cardBg,\r\n              ...cardGlass,\r\n              ...cardBorderStyle,\r\n            }),\r\n        borderRadius: tokens.borderRadius.lg,\r\n        padding: tokens.spacing.md,\r\n        fontFamily: tokens.typography.fontFamily.primary,\r\n        color: tokens.colors.text.primary,\r\n        fontSize: tokens.typography.fontSize.sm,\r\n        cursor: compact ? \"pointer\" : undefined,\r\n        transition: compact ? `all ${compactTransition} ease-out` : undefined,\r\n      }}\r\n    >\r\n      {/* Glass gradient overlay for bold/minimal themes */}\r\n      {useGlassMode && (\r\n        <div\r\n          style={{\r\n            position: \"absolute\",\r\n            inset: 0,\r\n            background:\r\n              \"linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)\",\r\n            pointerEvents: \"none\",\r\n            zIndex: 0,\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Unified Card Header - handles all theme variants */}\r\n      <CardHeader\r\n        icon=\"antenna-receive\"\r\n        title={spacecraftName ? `${spacecraftName} Telemetry` : \"Telemetry\"}\r\n        status={healthStatus}\r\n        isPinned={compact && isPinned}\r\n      />\r\n\r\n      {/* Power Section - fixed icon column so all icons align vertically */}\r\n      {showPower && (\r\n        <section style={sectionStyle} aria-label=\"Power subsystem\">\r\n          <div\r\n            style={{\r\n              display: \"grid\",\r\n              gridTemplateColumns: sectionGridColumns,\r\n              gap: `${rowGap} ${iconGap}`,\r\n              alignItems: \"center\",\r\n            }}\r\n          >\r\n            <AstroIcon\r\n              name=\"propulsion-power\"\r\n              size={12}\r\n              color={tokens.colors.text.tertiary}\r\n            />\r\n            <h4\r\n              style={{\r\n                margin: 0,\r\n                gridColumn: \"2 / -1\",\r\n                fontSize: tokens.typography.fontSize.xs,\r\n                fontWeight: tokens.typography.fontWeight.medium,\r\n                color: tokens.colors.text.secondary,\r\n              }}\r\n            >\r\n              Power\r\n            </h4>\r\n            <AstroIcon\r\n              name={getPropertyConfig(\"battery\").icon}\r\n              size={16}\r\n              color={getStatusColor(batteryStatus)}\r\n            />\r\n            <DataValue\r\n              property=\"battery\"\r\n              value={telemetry.power?.batteryLevel}\r\n              size=\"sm\"\r\n              variant=\"card\"\r\n              showIcon={false}\r\n            />\r\n            <AstroIcon\r\n              name={getPropertyConfig(\"voltage\").icon}\r\n              size={16}\r\n              color={tokens.colors.text.tertiary}\r\n            />\r\n            <DataValue\r\n              property=\"voltage\"\r\n              value={telemetry.power?.voltage}\r\n              size=\"sm\"\r\n              variant=\"card\"\r\n              showIcon={false}\r\n            />\r\n            <AstroIcon\r\n              name={getPropertyConfig(\"solarPower\").icon}\r\n              size={16}\r\n              color={tokens.colors.text.tertiary}\r\n            />\r\n            <DataValue\r\n              property=\"solarPower\"\r\n              value={telemetry.power?.solarGeneration}\r\n              size=\"sm\"\r\n              variant=\"card\"\r\n              status=\"standby\"\r\n              showIcon={false}\r\n            />\r\n            <AstroIcon\r\n              name={getPropertyConfig(\"load\").icon}\r\n              size={16}\r\n              color={tokens.colors.text.tertiary}\r\n            />\r\n            <DataValue\r\n              property=\"load\"\r\n              value={telemetry.power?.consumption}\r\n              size=\"sm\"\r\n              variant=\"card\"\r\n              showIcon={false}\r\n            />\r\n          </div>\r\n\r\n          {/* Battery progress bar */}\r\n          <div\r\n            style={{\r\n              marginTop: tokens.spacing.sm,\r\n              height: 4,\r\n              backgroundColor: tokens.colors.border.muted,\r\n              borderRadius: 2,\r\n              overflow: \"hidden\",\r\n            }}\r\n          >\r\n            <div\r\n              role=\"progressbar\"\r\n              aria-valuenow={telemetry.power?.batteryLevel ?? 0}\r\n              aria-valuemin={0}\r\n              aria-valuemax={100}\r\n              aria-label=\"Battery level\"\r\n              style={{\r\n                height: \"100%\",\r\n                width: `${Math.min(100, Math.max(0, telemetry.power?.batteryLevel ?? 0))}%`,\r\n                backgroundColor: getStatusColor(batteryStatus),\r\n                borderRadius: 2,\r\n                transition: `width ${transitionDuration} ease-out`,\r\n              }}\r\n            />\r\n          </div>\r\n        </section>\r\n      )}\r\n\r\n      {/* Attitude Section - fixed icon column so all icons align vertically */}\r\n      {showAttitude && (\r\n        <section style={sectionStyle} aria-label=\"Attitude subsystem\">\r\n          <div\r\n            style={{\r\n              display: \"grid\",\r\n              gridTemplateColumns: sectionGridColumns,\r\n              gap: `${rowGap} ${iconGap}`,\r\n              alignItems: \"center\",\r\n            }}\r\n          >\r\n            <AstroIcon\r\n              name=\"explore\"\r\n              size={12}\r\n              color={tokens.colors.text.tertiary}\r\n            />\r\n            <h4\r\n              style={{\r\n                margin: 0,\r\n                gridColumn: \"2 / -1\",\r\n                fontSize: tokens.typography.fontSize.xs,\r\n                fontWeight: tokens.typography.fontWeight.medium,\r\n                color: tokens.colors.text.secondary,\r\n              }}\r\n            >\r\n              Attitude\r\n            </h4>\r\n            <AstroIcon\r\n              name={getPropertyConfig(\"roll\").icon}\r\n              size={16}\r\n              color={tokens.colors.text.tertiary}\r\n            />\r\n            <DataValue\r\n              property=\"roll\"\r\n              value={telemetry.attitude?.eulerAngles?.roll}\r\n              size=\"sm\"\r\n              variant=\"card\"\r\n              showStatus={false}\r\n              showIcon={false}\r\n            />\r\n            <AstroIcon\r\n              name={getPropertyConfig(\"pitch\").icon}\r\n              size={16}\r\n              color={tokens.colors.text.tertiary}\r\n            />\r\n            <DataValue\r\n              property=\"pitch\"\r\n              value={telemetry.attitude?.eulerAngles?.pitch}\r\n              size=\"sm\"\r\n              variant=\"card\"\r\n              showStatus={false}\r\n              showIcon={false}\r\n            />\r\n            <AstroIcon\r\n              name={getPropertyConfig(\"yaw\").icon}\r\n              size={16}\r\n              color={tokens.colors.text.tertiary}\r\n            />\r\n            <DataValue\r\n              property=\"yaw\"\r\n              value={telemetry.attitude?.eulerAngles?.yaw}\r\n              size=\"sm\"\r\n              variant=\"card\"\r\n              showStatus={false}\r\n              showIcon={false}\r\n            />\r\n            <AstroIcon\r\n              name=\"explore\"\r\n              size={16}\r\n              color={tokens.colors.text.tertiary}\r\n            />\r\n            <DataValue\r\n              label=\"Mode\"\r\n              icon=\"explore\"\r\n              value={telemetry.attitude?.targetMode ?? \"--\"}\r\n              size=\"sm\"\r\n              variant=\"card\"\r\n              showStatus={false}\r\n              showIcon={false}\r\n            />\r\n          </div>\r\n          {telemetry.attitude?.pointingError !== undefined && (\r\n            <div\r\n              style={{\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                gap: iconGap,\r\n                marginTop: tokens.spacing.sm,\r\n              }}\r\n            >\r\n              <AstroIcon\r\n                name={getPropertyConfig(\"pointingError\").icon}\r\n                size={16}\r\n                color={tokens.colors.text.tertiary}\r\n              />\r\n              <DataValue\r\n                property=\"pointingError\"\r\n                value={telemetry.attitude.pointingError}\r\n                size=\"sm\"\r\n                variant=\"inline\"\r\n                showIcon={false}\r\n              />\r\n            </div>\r\n          )}\r\n        </section>\r\n      )}\r\n\r\n      {/* Communications Section - fixed icon column so all icons align vertically */}\r\n      {showComms && (\r\n        <section\r\n          style={{ marginBottom: tokens.spacing.md }}\r\n          aria-label=\"Communications subsystem\"\r\n        >\r\n          <div\r\n            style={{\r\n              display: \"grid\",\r\n              gridTemplateColumns: sectionGridColumns,\r\n              gap: `${rowGap} ${iconGap}`,\r\n              alignItems: \"center\",\r\n            }}\r\n          >\r\n            <AstroIcon\r\n              name=\"antenna\"\r\n              size={12}\r\n              color={tokens.colors.text.tertiary}\r\n            />\r\n            <h4\r\n              style={{\r\n                margin: 0,\r\n                gridColumn: \"2 / -1\",\r\n                fontSize: tokens.typography.fontSize.xs,\r\n                fontWeight: tokens.typography.fontWeight.medium,\r\n                color: tokens.colors.text.secondary,\r\n              }}\r\n            >\r\n              Communications\r\n            </h4>\r\n            <AstroIcon\r\n              name=\"antenna-transmit\"\r\n              size={16}\r\n              color={tokens.colors.text.tertiary}\r\n            />\r\n            <DataValue\r\n              label=\"Status\"\r\n              icon=\"antenna-transmit\"\r\n              value={telemetry.communications?.transmitterStatus ?? \"--\"}\r\n              size=\"sm\"\r\n              variant=\"card\"\r\n              showIcon={false}\r\n              status={\r\n                telemetry.communications?.transmitterStatus === \"transmitting\"\r\n                  ? \"normal\"\r\n                  : telemetry.communications?.transmitterStatus === \"error\"\r\n                    ? \"critical\"\r\n                    : \"off\"\r\n              }\r\n            />\r\n            <AstroIcon\r\n              name={getPropertyConfig(\"queue\").icon}\r\n              size={16}\r\n              color={tokens.colors.text.tertiary}\r\n            />\r\n            <DataValue\r\n              property=\"queue\"\r\n              value={telemetry.communications?.packetsQueued}\r\n              size=\"sm\"\r\n              variant=\"card\"\r\n              showIcon={false}\r\n            />\r\n            <AstroIcon\r\n              name=\"antenna-receive\"\r\n              size={16}\r\n              color={tokens.colors.text.tertiary}\r\n            />\r\n            <DataValue\r\n              label=\"Transmitted\"\r\n              icon=\"antenna-receive\"\r\n              value={safeNumber(\r\n                (telemetry.communications?.bytesTransmitted ?? 0) / 1024,\r\n                1,\r\n              )}\r\n              unit=\"KB\"\r\n              size=\"sm\"\r\n              variant=\"card\"\r\n              showStatus={false}\r\n              showIcon={false}\r\n            />\r\n            <span style={{ gridColumn: \"4 / -1\" }} />\r\n          </div>\r\n        </section>\r\n      )}\r\n\r\n      {/* Anomalies Alert */}\r\n      {telemetry.health?.anomalies && telemetry.health.anomalies.length > 0 && (\r\n        <div\r\n          role=\"alert\"\r\n          style={{\r\n            backgroundColor: `${tokens.colors.status.critical}15`,\r\n            border: `1px solid ${tokens.colors.status.critical}40`,\r\n            borderRadius: tokens.borderRadius.md,\r\n            padding: tokens.spacing.sm,\r\n            marginTop: tokens.spacing.md,\r\n          }}\r\n        >\r\n          <h4\r\n            style={{\r\n              margin: `0 0 ${tokens.spacing.xs} 0`,\r\n              fontSize: tokens.typography.fontSize.xs,\r\n              fontWeight: tokens.typography.fontWeight.medium,\r\n              color: tokens.colors.status.critical,\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: 4,\r\n            }}\r\n          >\r\n            ⚠️ Anomalies ({telemetry.health.anomalies.length})\r\n          </h4>\r\n          <ul style={{ margin: 0, paddingLeft: 16 }}>\r\n            {telemetry.health.anomalies.map(\r\n              (\r\n                anomaly: { id: string; message: string; severity?: string },\r\n                idx: number,\r\n              ) => (\r\n                <li\r\n                  key={idx}\r\n                  style={{\r\n                    fontSize: tokens.typography.fontSize.xs,\r\n                    color: tokens.colors.status.critical,\r\n                    marginTop: 2,\r\n                  }}\r\n                >\r\n                  {typeof anomaly === \"object\" &&\r\n                  anomaly !== null &&\r\n                  \"message\" in anomaly\r\n                    ? anomaly.message\r\n                    : String(anomaly)}\r\n                </li>\r\n              ),\r\n            )}\r\n          </ul>\r\n        </div>\r\n      )}\r\n\r\n      {/* Timestamp Footer */}\r\n      <footer\r\n        style={{\r\n          marginTop: tokens.spacing.md,\r\n          fontSize: tokens.typography.fontSize.xs,\r\n          color: tokens.colors.text.secondary, // WCAG AA compliant - 4.5:1 contrast\r\n          textAlign: \"right\",\r\n        }}\r\n      >\r\n        <time dateTime={telemetry.timestamp}>\r\n          {formatTime(telemetry.timestamp)} UTC\r\n        </time>\r\n      </footer>\r\n    </article>\r\n  );\r\n});\r\n\r\n// Note: DataCell is deprecated in favor of DataValue from core.\r\n// Use <DataValue property=\"...\" value={...} /> for automatic icon/status integration.\r\n"],"mappings":"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"}

package/dist/react/cards/TelemetryStreamCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TelemetryStreamCard.js","names":[],"sources":["../../../src/react/cards/TelemetryStreamCard.tsx"],"sourcesContent":["/**\n * @zendir/ui - TelemetryStreamCard Component\n *\n * Compact streaming telemetry card showing individual metric channels.\n * Designed for real-time data display with configurable metrics.\n *\n * Features:\n * - Configurable metric channels\n * - Streaming status indicator\n * - Color-coded values based on thresholds\n * - WCAG 2.1 AA accessibility\n */\n\nimport React, { memo, useMemo } from \"react\";\nimport { useTheme } from \"../theme\";\nimport { Icon } from \"../core/display/Icon\";\nimport { CardHeader } from \"../core/display/CardHeader\";\nimport { useCompactMode } from \"../hooks\";\nimport { classNames, type StatusLevel } from \"../utils\";\n\nexport interface TelemetryMetric {\n  /** Unique identifier */\n  id: string;\n  /** Display label */\n  label: string;\n  /** Current value */\n  value: number | string;\n  /** Unit suffix */\n  unit?: string;\n  /** Status level for color coding */\n  status?: StatusLevel;\n  /** Format function for value display */\n  format?: (value: number) => string;\n}\n\nexport interface TelemetryStreamCardProps {\n  /** Card title */\n  title?: string;\n  /** Number of channels */\n  channelCount?: number;\n  /** Update frequency (Hz) */\n  frequency?: number;\n  /** Streaming status */\n  isStreaming?: boolean;\n  /** Metric channels to display */\n  metrics?: TelemetryMetric[];\n  /** Loading state */\n  loading?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Enable compact mode - shows condensed view that expands on hover/click */\n  compact?: boolean;\n  /** Start expanded when in compact mode (pinned state) */\n  defaultExpanded?: boolean;\n  /** Callback when pin state changes in compact mode */\n  onPinChange?: (isPinned: boolean) => void;\n}\n\n/**\n * Get status color for a metric value\n */\nfunction getMetricColor(status: StatusLevel | undefined, tokens: any): string {\n  if (!status || status === \"normal\") return tokens.colors.status.normal;\n  if (status === \"caution\") return tokens.colors.status.caution;\n  if (status === \"critical\") return tokens.colors.status.critical;\n  if (status === \"standby\") return tokens.colors.status.standby;\n  return tokens.colors.text.primary;\n}\n\n/**\n * TelemetryStreamCard - Compact streaming telemetry display\n *\n * @example\n * ```tsx\n * <TelemetryStreamCard\n *   title=\"Telemetry\"\n *   channelCount={12}\n *   frequency={1}\n *   isStreaming={true}\n *   metrics={[\n *     { id: 'cpu', label: 'CPU Temp', value: 42, unit: '°C', status: 'normal' },\n *     { id: 'voltage', label: 'Bus Voltage', value: 28.4, unit: 'V' },\n *     { id: 'wheel', label: 'Wheel Speed', value: 2450, unit: 'rpm' },\n *     { id: 'memory', label: 'Memory', value: 78, unit: '%', status: 'caution' },\n *   ]}\n * />\n * ```\n */\nexport const TelemetryStreamCard = memo(function TelemetryStreamCard({\n  title = \"Telemetry\",\n  channelCount = 12,\n  frequency = 1,\n  isStreaming = true,\n  metrics = [],\n  loading = false,\n  className = \"\",\n  compact = false,\n  defaultExpanded = false,\n  onPinChange,\n}: TelemetryStreamCardProps): React.ReactElement {\n  const { tokens, theme, prefersReducedMotion } = useTheme();\n  const isTransparentTheme =\n    theme === \"transparent\" ||\n    theme === \"transparent-bold\" ||\n    theme === \"transparent-minimal\";\n  const isBoldVariant = theme === \"transparent-bold\";\n  const isMinimalVariant = theme === \"transparent-minimal\";\n  const useGlassMode = isBoldVariant || isMinimalVariant;\n\n  // Glass accent colors for bold/minimal themes (matching Container/AstroChart)\n  const glassAccentColor = tokens.colors.accent.primary;\n  const glassAccentMuted = `${glassAccentColor}66`;\n\n  // Compact mode state management\n  const { expanded, isPinned, handlers, transitionDuration } = useCompactMode({\n    compact,\n    defaultExpanded,\n    onPinChange,\n  });\n\n  // Glass mode container style (matching Container/AstroChart for bold/minimal)\n  const glassContainerStyle: React.CSSProperties = useGlassMode\n    ? {\n        backgroundColor: \"rgba(10, 15, 25, 0.35)\",\n        backdropFilter: \"blur(12px)\",\n        WebkitBackdropFilter: \"blur(12px)\",\n        border: `1px solid ${glassAccentMuted}`,\n        borderTop: isBoldVariant\n          ? `2px solid ${glassAccentColor}`\n          : `1px solid ${glassAccentColor}`,\n      }\n    : {};\n\n  // Card styles - Use transparent background with blur for transparent themes (matching Timeline)\n  const cardStyle = useMemo(\n    () => ({\n      position: \"relative\" as const,\n      overflow: \"hidden\" as const,\n      ...(useGlassMode\n        ? glassContainerStyle\n        : {\n            backgroundColor: isTransparentTheme\n              ? \"transparent\"\n              : tokens.colors.background.surface,\n            ...(isTransparentTheme && {\n              backdropFilter: \"blur(12px)\" as const,\n              WebkitBackdropFilter: \"blur(12px)\" as const,\n            }),\n            ...(tokens.colors.border.cardStyleDefault ?? {\n              border: `1px solid ${tokens.colors.border.default}`,\n            }),\n          }),\n      borderRadius: tokens.borderRadius.lg,\n      padding: tokens.spacing.md,\n    }),\n    [tokens, isTransparentTheme, useGlassMode, glassContainerStyle],\n  );\n\n  // Metric box styles\n  const metricBoxStyle = useMemo(\n    () => ({\n      backgroundColor: tokens.colors.background.elevated,\n      borderRadius: tokens.borderRadius.md,\n      padding: tokens.spacing.sm,\n    }),\n    [tokens],\n  );\n\n  // Loading state\n  if (loading) {\n    return (\n      <article\n        className={classNames(\"zendir-telemetry-stream-card\", className)}\n        style={cardStyle}\n        aria-busy=\"true\"\n        aria-label=\"Loading telemetry stream\"\n      >\n        <div\n          style={{\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            marginBottom: 16,\n          }}\n        >\n          <div>\n            <div\n              style={{\n                height: 16,\n                width: 80,\n                backgroundColor: tokens.colors.background.elevated,\n                borderRadius: 4,\n                marginBottom: 4,\n              }}\n            />\n            <div\n              style={{\n                height: 12,\n                width: 100,\n                backgroundColor: tokens.colors.background.elevated,\n                borderRadius: 4,\n              }}\n            />\n          </div>\n          <div\n            style={{\n              height: 24,\n              width: 70,\n              backgroundColor: tokens.colors.background.elevated,\n              borderRadius: 12,\n            }}\n          />\n        </div>\n        <div\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: \"repeat(2, 1fr)\",\n            gap: 12,\n          }}\n        >\n          {[1, 2, 3, 4].map((i) => (\n            <div key={i} style={metricBoxStyle}>\n              <div\n                style={{\n                  height: 10,\n                  width: 60,\n                  backgroundColor: tokens.colors.background.base,\n                  borderRadius: 4,\n                  marginBottom: 8,\n                }}\n              />\n              <div\n                style={{\n                  height: 20,\n                  width: 80,\n                  backgroundColor: tokens.colors.background.base,\n                  borderRadius: 4,\n                }}\n              />\n            </div>\n          ))}\n        </div>\n      </article>\n    );\n  }\n\n  // Compact view - shows streaming status and first few metrics\n  if (compact && !expanded) {\n    return (\n      <article\n        className={classNames(\n          \"zendir-telemetry-stream-card\",\n          \"compact\",\n          className,\n        )}\n        {...handlers}\n        style={{\n          ...cardStyle,\n          padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\n          cursor: \"pointer\",\n          transition: `all ${transitionDuration} ease-out`,\n        }}\n        onMouseEnter={(e) => {\n          handlers.onMouseEnter();\n          if (!prefersReducedMotion) {\n            (e.currentTarget as HTMLElement).style.transform = \"scale(1.01)\";\n            (e.currentTarget as HTMLElement).style.boxShadow =\n              `0 4px 12px ${tokens.colors.accent.primary}20`;\n          }\n        }}\n        onMouseLeave={(e) => {\n          handlers.onMouseLeave();\n          (e.currentTarget as HTMLElement).style.transform = \"scale(1)\";\n          (e.currentTarget as HTMLElement).style.boxShadow = \"\";\n        }}\n        aria-label={`${title} (compact)`}\n      >\n        {/* Glass gradient overlay for bold/minimal themes */}\n        {useGlassMode && (\n          <div\n            style={{\n              position: \"absolute\",\n              inset: 0,\n              background:\n                \"linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)\",\n              pointerEvents: \"none\",\n              zIndex: 0,\n            }}\n          />\n        )}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            gap: tokens.spacing.md,\n            position: \"relative\",\n            zIndex: 1,\n          }}\n        >\n          {/* Left side: Status indicator + Title + Accent line */}\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: tokens.spacing.sm,\n              flex: 1,\n              minWidth: 0,\n            }}\n          >\n            <div\n              style={{\n                width: 8,\n                height: 8,\n                borderRadius: \"50%\",\n                backgroundColor: isStreaming\n                  ? tokens.colors.status.normal\n                  : tokens.colors.status.off,\n                boxShadow: isStreaming\n                  ? `0 0 6px ${tokens.colors.status.normal}`\n                  : \"none\",\n                flexShrink: 0,\n              }}\n            />\n            <span\n              style={{\n                fontWeight: tokens.typography.fontWeight.medium,\n                color: useGlassMode ? glassAccentColor : undefined,\n                textShadow: useGlassMode\n                  ? `0 0 16px ${glassAccentMuted}`\n                  : undefined,\n              }}\n            >\n              {title.split(\" \")[0]}\n            </span>\n            {useGlassMode && (\n              <div\n                style={{\n                  flex: 1,\n                  height: isBoldVariant ? \"2px\" : \"1px\",\n                  minWidth: 20,\n                  background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 60%, transparent 100%)`,\n                  boxShadow: isBoldVariant\n                    ? `0 0 8px ${glassAccentMuted}`\n                    : undefined,\n                }}\n              />\n            )}\n          </div>\n\n          {/* Right side: Channel count badge + Metrics + Pin */}\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: tokens.spacing.sm,\n              flexShrink: 0,\n            }}\n          >\n            <span\n              style={{\n                color: tokens.colors.text.tertiary,\n                fontSize: tokens.typography.fontSize.xs,\n                backgroundColor: useGlassMode\n                  ? `${glassAccentColor}20`\n                  : undefined,\n                padding: useGlassMode ? \"1px 6px\" : undefined,\n                borderRadius: tokens.borderRadius.sm,\n              }}\n            >\n              {channelCount}ch\n            </span>\n            {metrics.slice(0, 2).map((metric) => (\n              <span\n                key={metric.id}\n                style={{\n                  fontVariantNumeric: \"tabular-nums\",\n                  fontFamily: tokens.typography.fontFamily.mono,\n                  fontSize: tokens.typography.fontSize.xs,\n                  color: getMetricColor(metric.status, tokens),\n                }}\n              >\n                {metric.value}\n                {metric.unit ? metric.unit : \"\"}\n              </span>\n            ))}\n            {isPinned && (\n              <Icon\n                name=\"lock\"\n                size={12}\n                color={tokens.colors.accent.primary}\n              />\n            )}\n          </div>\n        </div>\n      </article>\n    );\n  }\n\n  return (\n    <article\n      className={classNames(\n        \"zendir-telemetry-stream-card\",\n        compact ? \"expanded\" : \"\",\n        className,\n      )}\n      {...(compact ? handlers : {})}\n      role={compact ? handlers.role : \"article\"}\n      tabIndex={compact ? handlers.tabIndex : undefined}\n      aria-expanded={compact ? handlers[\"aria-expanded\"] : undefined}\n      style={{\n        ...cardStyle,\n        cursor: compact ? \"pointer\" : undefined,\n        transition: compact ? `all ${transitionDuration} ease-out` : undefined,\n      }}\n      aria-label={`${title} - ${isStreaming ? \"Streaming\" : \"Paused\"}`}\n      aria-live=\"polite\"\n    >\n      {/* Glass gradient overlay for bold/minimal themes */}\n      {useGlassMode && (\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            background:\n              \"linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)\",\n            pointerEvents: \"none\",\n            zIndex: 0,\n          }}\n        />\n      )}\n\n      {/* Unified Card Header - handles all theme variants */}\n      <CardHeader\n        icon=\"antenna-receive\"\n        title={title}\n        subtitle={`${channelCount} channels • ${frequency} Hz`}\n        status={isStreaming ? \"normal\" : \"standby\"}\n        badge={isStreaming ? \"Streaming\" : \"Paused\"}\n        badgeColor={\n          isStreaming\n            ? tokens.colors.status.normal\n            : tokens.colors.status.standby\n        }\n      />\n\n      {/* Metrics Grid */}\n      <div\n        style={{\n          display: \"grid\",\n          gridTemplateColumns: \"repeat(2, 1fr)\",\n          gap: 12,\n        }}\n      >\n        {metrics.map((metric) => (\n          <div\n            key={metric.id}\n            style={metricBoxStyle}\n            role=\"group\"\n            aria-label={`${metric.label}: ${metric.value}${metric.unit || \"\"}`}\n          >\n            <div\n              style={{\n                fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\n                fontWeight: tokens.typography.fontWeight.medium, // 500 (AstroUXDS medium)\n                textTransform: \"uppercase\",\n                letterSpacing: \"0.05em\",\n                color: tokens.colors.text.tertiary,\n                marginBottom: 4,\n              }}\n            >\n              {metric.label}\n            </div>\n            <div\n              style={{\n                fontSize: tokens.typography.fontSize.lg,\n                fontWeight: tokens.typography.fontWeight.bold, // 700 (AstroUXDS bold)\n                fontFamily: tokens.typography.fontFamily.mono,\n                fontVariantNumeric: \"tabular-nums\",\n                color: getMetricColor(metric.status, tokens),\n              }}\n            >\n              {typeof metric.value === \"number\"\n                ? metric.format\n                  ? metric.format(metric.value)\n                  : metric.value.toLocaleString()\n                : metric.value}\n              {metric.unit && (\n                <span\n                  style={{\n                    fontSize: tokens.typography.fontSize.sm,\n                    fontWeight: tokens.typography.fontWeight.normal, // 400 (AstroUXDS normal)\n                    marginLeft: 2,\n                  }}\n                >\n                  {metric.unit}\n                </span>\n              )}\n            </div>\n          </div>\n        ))}\n      </div>\n\n      {/* Pulse animation */}\n      <style>{`\n        @keyframes pulse {\n          0%, 100% { opacity: 1; }\n          50% { opacity: 0.5; }\n        }\n      `}</style>\n    </article>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"TelemetryStreamCard.js","names":[],"sources":["../../../src/react/cards/TelemetryStreamCard.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - TelemetryStreamCard Component\r\n *\r\n * Compact streaming telemetry card showing individual metric channels.\r\n * Designed for real-time data display with configurable metrics.\r\n *\r\n * Features:\r\n * - Configurable metric channels\r\n * - Streaming status indicator\r\n * - Color-coded values based on thresholds\r\n * - WCAG 2.1 AA accessibility\r\n */\r\n\r\nimport React, { memo, useMemo } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport { Icon } from \"../core/display/Icon\";\r\nimport { CardHeader } from \"../core/display/CardHeader\";\r\nimport { useCompactMode } from \"../hooks\";\r\nimport { classNames, type StatusLevel } from \"../utils\";\r\n\r\nexport interface TelemetryMetric {\r\n  /** Unique identifier */\r\n  id: string;\r\n  /** Display label */\r\n  label: string;\r\n  /** Current value */\r\n  value: number | string;\r\n  /** Unit suffix */\r\n  unit?: string;\r\n  /** Status level for color coding */\r\n  status?: StatusLevel;\r\n  /** Format function for value display */\r\n  format?: (value: number) => string;\r\n}\r\n\r\nexport interface TelemetryStreamCardProps {\r\n  /** Card title */\r\n  title?: string;\r\n  /** Number of channels */\r\n  channelCount?: number;\r\n  /** Update frequency (Hz) */\r\n  frequency?: number;\r\n  /** Streaming status */\r\n  isStreaming?: boolean;\r\n  /** Metric channels to display */\r\n  metrics?: TelemetryMetric[];\r\n  /** Loading state */\r\n  loading?: boolean;\r\n  /** Custom className */\r\n  className?: string;\r\n  /** Enable compact mode - shows condensed view that expands on hover/click */\r\n  compact?: boolean;\r\n  /** Start expanded when in compact mode (pinned state) */\r\n  defaultExpanded?: boolean;\r\n  /** Callback when pin state changes in compact mode */\r\n  onPinChange?: (isPinned: boolean) => void;\r\n}\r\n\r\n/**\r\n * Get status color for a metric value\r\n */\r\nfunction getMetricColor(status: StatusLevel | undefined, tokens: any): string {\r\n  if (!status || status === \"normal\") return tokens.colors.status.normal;\r\n  if (status === \"caution\") return tokens.colors.status.caution;\r\n  if (status === \"critical\") return tokens.colors.status.critical;\r\n  if (status === \"standby\") return tokens.colors.status.standby;\r\n  return tokens.colors.text.primary;\r\n}\r\n\r\n/**\r\n * TelemetryStreamCard - Compact streaming telemetry display\r\n *\r\n * @example\r\n * ```tsx\r\n * <TelemetryStreamCard\r\n *   title=\"Telemetry\"\r\n *   channelCount={12}\r\n *   frequency={1}\r\n *   isStreaming={true}\r\n *   metrics={[\r\n *     { id: 'cpu', label: 'CPU Temp', value: 42, unit: '°C', status: 'normal' },\r\n *     { id: 'voltage', label: 'Bus Voltage', value: 28.4, unit: 'V' },\r\n *     { id: 'wheel', label: 'Wheel Speed', value: 2450, unit: 'rpm' },\r\n *     { id: 'memory', label: 'Memory', value: 78, unit: '%', status: 'caution' },\r\n *   ]}\r\n * />\r\n * ```\r\n */\r\nexport const TelemetryStreamCard = memo(function TelemetryStreamCard({\r\n  title = \"Telemetry\",\r\n  channelCount = 12,\r\n  frequency = 1,\r\n  isStreaming = true,\r\n  metrics = [],\r\n  loading = false,\r\n  className = \"\",\r\n  compact = false,\r\n  defaultExpanded = false,\r\n  onPinChange,\r\n}: TelemetryStreamCardProps): React.ReactElement {\r\n  const { tokens, theme, prefersReducedMotion } = useTheme();\r\n  const isTransparentTheme =\r\n    theme === \"transparent\" ||\r\n    theme === \"transparent-bold\" ||\r\n    theme === \"transparent-minimal\";\r\n  const isBoldVariant = theme === \"transparent-bold\";\r\n  const isMinimalVariant = theme === \"transparent-minimal\";\r\n  const useGlassMode = isBoldVariant || isMinimalVariant;\r\n\r\n  // Glass accent colors for bold/minimal themes (matching Container/AstroChart)\r\n  const glassAccentColor = tokens.colors.accent.primary;\r\n  const glassAccentMuted = `${glassAccentColor}66`;\r\n\r\n  // Compact mode state management\r\n  const { expanded, isPinned, handlers, transitionDuration } = useCompactMode({\r\n    compact,\r\n    defaultExpanded,\r\n    onPinChange,\r\n  });\r\n\r\n  // Glass mode container style (matching Container/AstroChart for bold/minimal)\r\n  const glassContainerStyle: React.CSSProperties = useGlassMode\r\n    ? {\r\n        backgroundColor: \"rgba(10, 15, 25, 0.35)\",\r\n        backdropFilter: \"blur(12px)\",\r\n        WebkitBackdropFilter: \"blur(12px)\",\r\n        border: `1px solid ${glassAccentMuted}`,\r\n        borderTop: isBoldVariant\r\n          ? `2px solid ${glassAccentColor}`\r\n          : `1px solid ${glassAccentColor}`,\r\n      }\r\n    : {};\r\n\r\n  // Card styles - Use transparent background with blur for transparent themes (matching Timeline)\r\n  const cardStyle = useMemo(\r\n    () => ({\r\n      position: \"relative\" as const,\r\n      overflow: \"hidden\" as const,\r\n      ...(useGlassMode\r\n        ? glassContainerStyle\r\n        : {\r\n            backgroundColor: isTransparentTheme\r\n              ? \"transparent\"\r\n              : tokens.colors.background.surface,\r\n            ...(isTransparentTheme && {\r\n              backdropFilter: \"blur(12px)\" as const,\r\n              WebkitBackdropFilter: \"blur(12px)\" as const,\r\n            }),\r\n            ...(tokens.colors.border.cardStyleDefault ?? {\r\n              border: `1px solid ${tokens.colors.border.default}`,\r\n            }),\r\n          }),\r\n      borderRadius: tokens.borderRadius.lg,\r\n      padding: tokens.spacing.md,\r\n    }),\r\n    [tokens, isTransparentTheme, useGlassMode, glassContainerStyle],\r\n  );\r\n\r\n  // Metric box styles\r\n  const metricBoxStyle = useMemo(\r\n    () => ({\r\n      backgroundColor: tokens.colors.background.elevated,\r\n      borderRadius: tokens.borderRadius.md,\r\n      padding: tokens.spacing.sm,\r\n    }),\r\n    [tokens],\r\n  );\r\n\r\n  // Loading state\r\n  if (loading) {\r\n    return (\r\n      <article\r\n        className={classNames(\"zendir-telemetry-stream-card\", className)}\r\n        style={cardStyle}\r\n        aria-busy=\"true\"\r\n        aria-label=\"Loading telemetry stream\"\r\n      >\r\n        <div\r\n          style={{\r\n            display: \"flex\",\r\n            justifyContent: \"space-between\",\r\n            marginBottom: 16,\r\n          }}\r\n        >\r\n          <div>\r\n            <div\r\n              style={{\r\n                height: 16,\r\n                width: 80,\r\n                backgroundColor: tokens.colors.background.elevated,\r\n                borderRadius: 4,\r\n                marginBottom: 4,\r\n              }}\r\n            />\r\n            <div\r\n              style={{\r\n                height: 12,\r\n                width: 100,\r\n                backgroundColor: tokens.colors.background.elevated,\r\n                borderRadius: 4,\r\n              }}\r\n            />\r\n          </div>\r\n          <div\r\n            style={{\r\n              height: 24,\r\n              width: 70,\r\n              backgroundColor: tokens.colors.background.elevated,\r\n              borderRadius: 12,\r\n            }}\r\n          />\r\n        </div>\r\n        <div\r\n          style={{\r\n            display: \"grid\",\r\n            gridTemplateColumns: \"repeat(2, 1fr)\",\r\n            gap: 12,\r\n          }}\r\n        >\r\n          {[1, 2, 3, 4].map((i) => (\r\n            <div key={i} style={metricBoxStyle}>\r\n              <div\r\n                style={{\r\n                  height: 10,\r\n                  width: 60,\r\n                  backgroundColor: tokens.colors.background.base,\r\n                  borderRadius: 4,\r\n                  marginBottom: 8,\r\n                }}\r\n              />\r\n              <div\r\n                style={{\r\n                  height: 20,\r\n                  width: 80,\r\n                  backgroundColor: tokens.colors.background.base,\r\n                  borderRadius: 4,\r\n                }}\r\n              />\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </article>\r\n    );\r\n  }\r\n\r\n  // Compact view - shows streaming status and first few metrics\r\n  if (compact && !expanded) {\r\n    return (\r\n      <article\r\n        className={classNames(\r\n          \"zendir-telemetry-stream-card\",\r\n          \"compact\",\r\n          className,\r\n        )}\r\n        {...handlers}\r\n        style={{\r\n          ...cardStyle,\r\n          padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\r\n          cursor: \"pointer\",\r\n          transition: `all ${transitionDuration} ease-out`,\r\n        }}\r\n        onMouseEnter={(e) => {\r\n          handlers.onMouseEnter();\r\n          if (!prefersReducedMotion) {\r\n            (e.currentTarget as HTMLElement).style.transform = \"scale(1.01)\";\r\n            (e.currentTarget as HTMLElement).style.boxShadow =\r\n              `0 4px 12px ${tokens.colors.accent.primary}20`;\r\n          }\r\n        }}\r\n        onMouseLeave={(e) => {\r\n          handlers.onMouseLeave();\r\n          (e.currentTarget as HTMLElement).style.transform = \"scale(1)\";\r\n          (e.currentTarget as HTMLElement).style.boxShadow = \"\";\r\n        }}\r\n        aria-label={`${title} (compact)`}\r\n      >\r\n        {/* Glass gradient overlay for bold/minimal themes */}\r\n        {useGlassMode && (\r\n          <div\r\n            style={{\r\n              position: \"absolute\",\r\n              inset: 0,\r\n              background:\r\n                \"linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)\",\r\n              pointerEvents: \"none\",\r\n              zIndex: 0,\r\n            }}\r\n          />\r\n        )}\r\n        <div\r\n          style={{\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"space-between\",\r\n            gap: tokens.spacing.md,\r\n            position: \"relative\",\r\n            zIndex: 1,\r\n          }}\r\n        >\r\n          {/* Left side: Status indicator + Title + Accent line */}\r\n          <div\r\n            style={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: tokens.spacing.sm,\r\n              flex: 1,\r\n              minWidth: 0,\r\n            }}\r\n          >\r\n            <div\r\n              style={{\r\n                width: 8,\r\n                height: 8,\r\n                borderRadius: \"50%\",\r\n                backgroundColor: isStreaming\r\n                  ? tokens.colors.status.normal\r\n                  : tokens.colors.status.off,\r\n                boxShadow: isStreaming\r\n                  ? `0 0 6px ${tokens.colors.status.normal}`\r\n                  : \"none\",\r\n                flexShrink: 0,\r\n              }}\r\n            />\r\n            <span\r\n              style={{\r\n                fontWeight: tokens.typography.fontWeight.medium,\r\n                color: useGlassMode ? glassAccentColor : undefined,\r\n                textShadow: useGlassMode\r\n                  ? `0 0 16px ${glassAccentMuted}`\r\n                  : undefined,\r\n              }}\r\n            >\r\n              {title.split(\" \")[0]}\r\n            </span>\r\n            {useGlassMode && (\r\n              <div\r\n                style={{\r\n                  flex: 1,\r\n                  height: isBoldVariant ? \"2px\" : \"1px\",\r\n                  minWidth: 20,\r\n                  background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 60%, transparent 100%)`,\r\n                  boxShadow: isBoldVariant\r\n                    ? `0 0 8px ${glassAccentMuted}`\r\n                    : undefined,\r\n                }}\r\n              />\r\n            )}\r\n          </div>\r\n\r\n          {/* Right side: Channel count badge + Metrics + Pin */}\r\n          <div\r\n            style={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: tokens.spacing.sm,\r\n              flexShrink: 0,\r\n            }}\r\n          >\r\n            <span\r\n              style={{\r\n                color: tokens.colors.text.tertiary,\r\n                fontSize: tokens.typography.fontSize.xs,\r\n                backgroundColor: useGlassMode\r\n                  ? `${glassAccentColor}20`\r\n                  : undefined,\r\n                padding: useGlassMode ? \"1px 6px\" : undefined,\r\n                borderRadius: tokens.borderRadius.sm,\r\n              }}\r\n            >\r\n              {channelCount}ch\r\n            </span>\r\n            {metrics.slice(0, 2).map((metric) => (\r\n              <span\r\n                key={metric.id}\r\n                style={{\r\n                  fontVariantNumeric: \"tabular-nums\",\r\n                  fontFamily: tokens.typography.fontFamily.mono,\r\n                  fontSize: tokens.typography.fontSize.xs,\r\n                  color: getMetricColor(metric.status, tokens),\r\n                }}\r\n              >\r\n                {metric.value}\r\n                {metric.unit ? metric.unit : \"\"}\r\n              </span>\r\n            ))}\r\n            {isPinned && (\r\n              <Icon\r\n                name=\"lock\"\r\n                size={12}\r\n                color={tokens.colors.accent.primary}\r\n              />\r\n            )}\r\n          </div>\r\n        </div>\r\n      </article>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <article\r\n      className={classNames(\r\n        \"zendir-telemetry-stream-card\",\r\n        compact ? \"expanded\" : \"\",\r\n        className,\r\n      )}\r\n      {...(compact ? handlers : {})}\r\n      role={compact ? handlers.role : \"article\"}\r\n      tabIndex={compact ? handlers.tabIndex : undefined}\r\n      aria-expanded={compact ? handlers[\"aria-expanded\"] : undefined}\r\n      style={{\r\n        ...cardStyle,\r\n        cursor: compact ? \"pointer\" : undefined,\r\n        transition: compact ? `all ${transitionDuration} ease-out` : undefined,\r\n      }}\r\n      aria-label={`${title} - ${isStreaming ? \"Streaming\" : \"Paused\"}`}\r\n      aria-live=\"polite\"\r\n    >\r\n      {/* Glass gradient overlay for bold/minimal themes */}\r\n      {useGlassMode && (\r\n        <div\r\n          style={{\r\n            position: \"absolute\",\r\n            inset: 0,\r\n            background:\r\n              \"linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)\",\r\n            pointerEvents: \"none\",\r\n            zIndex: 0,\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Unified Card Header - handles all theme variants */}\r\n      <CardHeader\r\n        icon=\"antenna-receive\"\r\n        title={title}\r\n        subtitle={`${channelCount} channels • ${frequency} Hz`}\r\n        status={isStreaming ? \"normal\" : \"standby\"}\r\n        badge={isStreaming ? \"Streaming\" : \"Paused\"}\r\n        badgeColor={\r\n          isStreaming\r\n            ? tokens.colors.status.normal\r\n            : tokens.colors.status.standby\r\n        }\r\n      />\r\n\r\n      {/* Metrics Grid */}\r\n      <div\r\n        style={{\r\n          display: \"grid\",\r\n          gridTemplateColumns: \"repeat(2, 1fr)\",\r\n          gap: 12,\r\n        }}\r\n      >\r\n        {metrics.map((metric) => (\r\n          <div\r\n            key={metric.id}\r\n            style={metricBoxStyle}\r\n            role=\"group\"\r\n            aria-label={`${metric.label}: ${metric.value}${metric.unit || \"\"}`}\r\n          >\r\n            <div\r\n              style={{\r\n                fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\r\n                fontWeight: tokens.typography.fontWeight.medium, // 500 (AstroUXDS medium)\r\n                textTransform: \"uppercase\",\r\n                letterSpacing: \"0.05em\",\r\n                color: tokens.colors.text.tertiary,\r\n                marginBottom: 4,\r\n              }}\r\n            >\r\n              {metric.label}\r\n            </div>\r\n            <div\r\n              style={{\r\n                fontSize: tokens.typography.fontSize.lg,\r\n                fontWeight: tokens.typography.fontWeight.bold, // 700 (AstroUXDS bold)\r\n                fontFamily: tokens.typography.fontFamily.mono,\r\n                fontVariantNumeric: \"tabular-nums\",\r\n                color: getMetricColor(metric.status, tokens),\r\n              }}\r\n            >\r\n              {typeof metric.value === \"number\"\r\n                ? metric.format\r\n                  ? metric.format(metric.value)\r\n                  : metric.value.toLocaleString()\r\n                : metric.value}\r\n              {metric.unit && (\r\n                <span\r\n                  style={{\r\n                    fontSize: tokens.typography.fontSize.sm,\r\n                    fontWeight: tokens.typography.fontWeight.normal, // 400 (AstroUXDS normal)\r\n                    marginLeft: 2,\r\n                  }}\r\n                >\r\n                  {metric.unit}\r\n                </span>\r\n              )}\r\n            </div>\r\n          </div>\r\n        ))}\r\n      </div>\r\n\r\n      {/* Pulse animation */}\r\n      <style>{`\r\n        @keyframes pulse {\r\n          0%, 100% { opacity: 1; }\r\n          50% { opacity: 0.5; }\r\n        }\r\n      `}</style>\r\n    </article>\r\n  );\r\n});\r\n"],"mappings":"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"}