npm - @zendir/ui - Versions diffs - 0.7.1 → 0.8.1 - Mend

@zendir/ui 0.7.1 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3602) hide show

package/dist/react/cards/SpacecraftCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SpacecraftCard.js","names":[],"sources":["../../../src/react/cards/SpacecraftCard.tsx"],"sourcesContent":["/*\n @zendir/ui - SpacecraftCard Component\n \n Enterprise-grade spacecraft information card.\n \n AstroUXDS Compliance:\n * - Status colors used for health/operational status only\n * - Orbit type uses Zendir-Astro data viz colors (categorical)\n * - Zendir accent colors for interactive elements\n * - Tabular numbers with fontVariantNumeric for data\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 * - Keyboard navigation\n * - Smooth animations with reduced-motion support\n * - Loading skeleton state\n * - Error boundary support\n * - Real SDK integration via optional client prop\n /\n\nimport React, { memo, useCallback, useMemo } from \"react\";\nimport type { SpacecraftPosition, TelemetryData } from \"../types\";\nimport { useTheme } from \"../theme\";\nimport { Icon, type IconName } from \"../core/display/Icon\";\nimport { CardHeader } from \"../core/display/CardHeader\";\nimport { HeaderIconWithStatus } from \"../core/display/HeaderIconWithStatus\";\nimport { useCompactMode } from \"../hooks\";\nimport { useCardBorderStyle } from \"../context/DisplaySettingsContext\";\n\n// ZendirClient is optional - only used when SDK is installed\ntype ZendirClient = any;\nimport {\n safeNumber,\n formatCoordinate,\n formatAltitude,\n formatVelocity,\n formatPercentage,\n formatTime,\n getStatusColor,\n classNames,\n safeAccentText,\n type StatusLevel,\n} from \"../utils\";\n\nexport interface SpacecraftCardProps {\n /* Spacecraft position data (for direct data mode) /\n spacecraft?: SpacecraftPosition;\n /* Optional telemetry data /\n telemetry?: TelemetryData;\n /* Show expanded orbit info /\n showOrbit?: boolean;\n /* Show telemetry summary /\n showTelemetry?: boolean;\n /* Loading state /\n loading?: boolean;\n /* Click handler /\n onClick?: (spacecraft: SpacecraftPosition) => void;\n /* Custom className /\n className?: string;\n /* Connected mode: SDK client /\n client?: ZendirClient;\n /* Connected mode: Spacecraft ID to fetch /\n spacecraftId?: 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 orbit type color based on orbit classification\n * Uses Zendir-Astro palette for categorical (non-status) classification\n /\nfunction getOrbitTypeColor(\n orbitType: string \| undefined,\n accentColor: string,\n): string {\n // Orbit type colors using pure Zendir brand palette\n // These are categorical colors, not status colors\n const colors: Record<string, string> = {\n LEO: \"#3E3CFF\", // Zendir Electric - Low Earth Orbit\n MEO: \"#3548C0\", // Zendir Prussian Blue Light - Medium Earth Orbit\n GEO: \"#9D70FF\", // Zendir Purple - Geostationary\n HEO: \"#1B2DA0\", // Zendir Prussian Blue - Highly Elliptical\n SSO: \"#B48DFF\", // Zendir Purple Light - Sun-Synchronous\n POLAR: \"#6B69FF\", // Zendir Electric Light - Polar\n };\n return colors[orbitType?.toUpperCase() ?? \"\"] ?? accentColor;\n}\n\n/\n Derive health status from spacecraft or telemetry\n * Prefers telemetry.health.status, falls back to spacecraft.status\n /\nfunction deriveHealthStatus(\n spacecraftStatus: StatusLevel \| undefined,\n telemetryStatus: string \| undefined,\n): StatusLevel {\n // Prefer telemetry if available, but also validate it's a proper StatusLevel\n if (telemetryStatus) {\n const validStatuses: StatusLevel[] = [\n \"off\",\n \"standby\",\n \"normal\",\n \"caution\",\n \"serious\",\n \"critical\",\n ];\n const normalized = telemetryStatus.toLowerCase();\n if (validStatuses.includes(normalized as StatusLevel)) {\n return normalized as StatusLevel;\n }\n // Legacy mapping for backwards compatibility\n switch (normalized) {\n case \"healthy\":\n case \"nominal\":\n case \"operational\":\n return \"normal\";\n case \"warning\":\n case \"degraded\":\n return \"caution\";\n case \"failed\":\n case \"error\":\n return \"critical\";\n case \"idle\":\n return \"standby\";\n }\n }\n // Use spacecraft.status directly (already typed as StatusLevel)\n return spacecraftStatus ?? \"off\";\n}\n\n/\n SpacecraftCard - Displays spacecraft position and status information\n \n @example\n * ```tsx\n * // Direct data mode\n * <SpacecraftCard\n * spacecraft={spacecraftData}\n * telemetry={telemetryData}\n * showOrbit\n * showTelemetry\n * onClick={() => {}}\n * />\n \n // Connected mode (auto-fetches via SDK)\n * <SpacecraftCard\n * client={zendirClient}\n * spacecraftId=\"iss-25544\"\n * showTelemetry\n * />\n * ```\n /\nexport const SpacecraftCard = memo(function SpacecraftCard({\n spacecraft,\n telemetry,\n showOrbit = false,\n showTelemetry = false,\n loading = false,\n onClick,\n className = \"\",\n compact = false,\n defaultExpanded = false,\n onPinChange,\n}: SpacecraftCardProps): 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 // WCAG AA safe accent for use as foreground text on dark backgrounds\n const accentTextColor = useMemo(\n () => safeAccentText(tokens.colors.accent.primary),\n [tokens.colors.accent.primary],\n );\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: compactHandlers,\n transitionDuration: _compactTransition,\n } = useCompactMode({\n compact,\n defaultExpanded,\n onPinChange,\n });\n\n // Smooth animation timing\n const animationDuration = prefersReducedMotion ? 0 : 250;\n const animationEasing = \"cubic-bezier(0.4, 0, 0.2, 1)\";\n\n // Memoized click handler\n const _handleClick = useCallback(() => {\n if (onClick && spacecraft) {\n onClick(spacecraft);\n }\n }, [onClick, spacecraft]);\n\n // Keyboard handler for accessibility\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (onClick && spacecraft && (e.key === \"Enter\" \|\| e.key === \" \")) {\n e.preventDefault();\n onClick(spacecraft);\n }\n },\n [onClick, spacecraft],\n );\n\n // Memoized computed values\n const orbitColor = useMemo(\n () =>\n getOrbitTypeColor(spacecraft?.orbitType, tokens.colors.accent.primary),\n [spacecraft?.orbitType, tokens.colors.accent.primary],\n );\n\n const healthStatus = useMemo(\n () => deriveHealthStatus(spacecraft?.status, telemetry?.health?.status),\n [spacecraft?.status, telemetry?.health?.status],\n );\n\n const statusColor = useMemo(\n () => getStatusColor(healthStatus),\n [healthStatus],\n );\n\n // Animation duration (respects reduced motion)\n const transitionDuration = prefersReducedMotion ? \"0ms\" : \"200ms\";\n\n // Combined click handler for compact mode and onClick (must be before early returns)\n const combinedClickHandler = useCallback(() => {\n if (compact) {\n compactHandlers.onClick();\n }\n if (onClick && spacecraft) {\n onClick(spacecraft);\n }\n }, [compact, compactHandlers, onClick, spacecraft]);\n\n // Loading state\n if (loading) {\n return (\n <div\n className={classNames(\"zendir-spacecraft-card\", \"loading\", className)}\n role=\"article\"\n aria-busy=\"true\"\n aria-label=\"Loading spacecraft data\"\n style={{\n backgroundColor: cardBg,\n ...cardGlass,\n ...cardBorderStyle,\n borderRadius: tokens.borderRadius.lg,\n padding: tokens.spacing.md,\n minHeight: 180,\n }}\n >\n {/ Loading skeleton /}\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: 12,\n marginBottom: 16,\n }}\n >\n <div\n style={{\n width: 32,\n height: 32,\n borderRadius: \"50%\",\n backgroundColor: \"rgba(255,255,255,0.1)\",\n animation: \"pulse 1.5s ease-in-out infinite\",\n }}\n />\n <div style={{ flex: 1 }}>\n <div\n style={{\n height: 16,\n width: \"60%\",\n backgroundColor: \"rgba(255,255,255,0.1)\",\n borderRadius: 4,\n animation: \"pulse 1.5s ease-in-out infinite\",\n }}\n />\n </div>\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}>\n <div\n style={{\n height: 10,\n width: \"40%\",\n backgroundColor: \"rgba(255,255,255,0.08)\",\n borderRadius: 2,\n marginBottom: 4,\n }}\n />\n <div\n style={{\n height: 14,\n width: \"70%\",\n backgroundColor: \"rgba(255,255,255,0.1)\",\n borderRadius: 2,\n }}\n />\n </div>\n ))}\n </div>\n <style>{`\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n }\n `}</style>\n </div>\n );\n }\n\n // Empty state\n if (!spacecraft) {\n return (\n <div\n className={classNames(\"zendir-spacecraft-card\", \"empty\", className)}\n role=\"article\"\n aria-label=\"No spacecraft 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 <svg\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n style={{ marginBottom: 8, opacity: 0.5 }}\n >\n <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" />\n </svg>\n <p style={{ margin: 0, fontSize: tokens.typography.body[2].fontSize }}>\n No spacecraft data available\n </p>\n </div>\n );\n }\n\n // Compact view - shows key info in a single row\n // Compact metric item component for consistent styling\n const CompactMetric = ({\n icon,\n label,\n value,\n color,\n }: {\n icon: IconName;\n label: string;\n value: string \| number;\n color?: string;\n }) => (\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: 3,\n padding: `2px 0`,\n }}\n >\n <Icon\n name={icon}\n size={12}\n color={color ?? tokens.colors.text.secondary}\n />\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 rendering\n const renderCompactContent = () => {\n const power = telemetry?.subsystems?.power ?? telemetry?.power;\n const batteryLevel = power?.batteryLevel;\n const batteryStatusLocal =\n batteryLevel !== undefined\n ? batteryLevel > 50\n ? \"normal\"\n : batteryLevel > 20\n ? \"caution\"\n : \"critical\"\n : \"off\";\n\n // Status color for header icon\n const statusColor = getStatusColor(healthStatus);\n\n return (\n <>\n {/ Header: Icon (status colored) → Status symbol → Name → Badges /}\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 + Name + Accent line /}\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: tokens.spacing.xs,\n flex: 1,\n minWidth: 0,\n }}\n >\n {/ Icon with status badge - MonitoringIcon pattern /}\n <HeaderIconWithStatus\n icon=\"satellite-transmit\"\n size={18}\n status={healthStatus}\n statusColor={statusColor}\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 }}\n >\n {(spacecraft.name ?? spacecraft.id ?? \"Unknown\").split(\" \")[0]}\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: Orbit type badge + Pin /}\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: tokens.spacing.xs,\n flexShrink: 0,\n }}\n >\n {/ Orbit type badge /}\n <span\n style={{\n backgroundColor: `${orbitColor}20`,\n color: orbitColor,\n padding: `1px 6px`,\n borderRadius: tokens.borderRadius.sm,\n fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\n fontWeight: tokens.typography.fontWeight.medium,\n fontFamily: tokens.typography.fontFamily.primary,\n }}\n >\n {spacecraft.orbitType ?? \"—\"}\n </span>\n {/ Pin badge /}\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 - 3 columns /}\n <div\n style={{\n display: \"grid\",\n gridTemplateColumns: \"repeat(3, 1fr)\",\n gap: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n }}\n >\n {/ Position metrics /}\n <CompactMetric\n icon=\"location\"\n label=\"Latitude\"\n value={formatCoordinate(spacecraft.latitude, \"lat\")}\n />\n <CompactMetric\n icon=\"location\"\n label=\"Longitude\"\n value={formatCoordinate(spacecraft.longitude, \"lon\")}\n />\n <CompactMetric\n icon=\"orbit\"\n label=\"Altitude\"\n value={formatAltitude(spacecraft.altitude)}\n color={orbitColor}\n />\n\n {/ Velocity /}\n {spacecraft.velocity !== undefined && (\n <CompactMetric\n icon=\"rocket\"\n label=\"Velocity\"\n value={formatVelocity(spacecraft.velocity)}\n />\n )}\n\n {/ Telemetry data if available /}\n {batteryLevel !== undefined && (\n <CompactMetric\n icon=\"battery\"\n label=\"Battery\"\n value={formatPercentage(batteryLevel)}\n color={getStatusColor(batteryStatusLocal as StatusLevel)}\n />\n )}\n\n {/ Inclination if available /}\n {spacecraft.inclination !== undefined && (\n <CompactMetric\n icon=\"orbit\"\n label=\"Inclination\"\n value={`${safeNumber(spacecraft.inclination, 1)}°`}\n />\n )}\n </div>\n </>\n );\n };\n\n // Compact mode with in-place expansion - cards push each other\n if (compact) {\n return (\n <article\n className={classNames(\n \"zendir-spacecraft-card\",\n \"compact\",\n expanded ? \"expanded\" : \"\",\n className,\n )}\n {...compactHandlers}\n aria-label={`Spacecraft: ${spacecraft.name ?? spacecraft.id}${expanded ? \"\" : \" (compact)\"}`}\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 ${orbitColor}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\n <>\n {/ Full expanded header - matches MonitoringIcon layout pattern /}\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: tokens.spacing.sm,\n marginBottom: tokens.spacing.md,\n }}\n >\n {/ Icon with status badge - MonitoringIcon pattern /}\n <HeaderIconWithStatus\n icon=\"satellite-transmit\"\n size={24}\n status={healthStatus}\n />\n <div style={{ flex: 1, minWidth: 0 }}>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 6 }}>\n <h3\n style={{\n margin: 0,\n fontSize: tokens.typography.fontSize.md,\n fontWeight: tokens.typography.fontWeight.semibold,\n lineHeight: 1.2,\n }}\n >\n {spacecraft.name ?? spacecraft.id}\n </h3>\n {isPinned && (\n <Icon\n name=\"lock\"\n size={12}\n color={tokens.colors.accent.primary}\n />\n )}\n </div>\n {spacecraft.id && spacecraft.name && (\n <span\n style={{\n fontSize: tokens.typography.fontSize.xs,\n color: tokens.colors.text.tertiary,\n }}\n >\n {spacecraft.id}\n </span>\n )}\n </div>\n <span\n style={{\n backgroundColor: `${orbitColor}20`,\n color: orbitColor,\n padding: `4px 8px`,\n borderRadius: tokens.borderRadius.sm,\n fontSize: tokens.typography.fontSize.xs,\n fontWeight: tokens.typography.fontWeight.medium,\n flexShrink: 0,\n }}\n >\n {spacecraft.orbitType ?? \"Unknown\"}\n </span>\n </div>\n\n {/ Position Grid /}\n <div\n style={{\n display: \"grid\",\n gridTemplateColumns: \"repeat(2, 1fr)\",\n gap: tokens.spacing.sm,\n marginBottom: tokens.spacing.md,\n }}\n >\n <div>\n <span\n style={{\n display: \"block\",\n fontSize: tokens.typography.fontSize.xs,\n color: tokens.colors.text.tertiary,\n marginBottom: 2,\n }}\n >\n Latitude\n </span>\n <span\n style={{\n fontSize: tokens.typography.fontSize.md,\n fontWeight: tokens.typography.fontWeight.medium,\n fontVariantNumeric: \"tabular-nums\",\n fontFamily: tokens.typography.fontFamily.mono,\n }}\n >\n {formatCoordinate(spacecraft.latitude, \"lat\")}\n </span>\n </div>\n <div>\n <span\n style={{\n display: \"block\",\n fontSize: tokens.typography.fontSize.xs,\n color: tokens.colors.text.tertiary,\n marginBottom: 2,\n }}\n >\n Longitude\n </span>\n <span\n style={{\n fontSize: tokens.typography.fontSize.md,\n fontWeight: tokens.typography.fontWeight.medium,\n fontVariantNumeric: \"tabular-nums\",\n fontFamily: tokens.typography.fontFamily.mono,\n }}\n >\n {formatCoordinate(spacecraft.longitude, \"lon\")}\n </span>\n </div>\n <div>\n <span\n style={{\n display: \"block\",\n fontSize: tokens.typography.fontSize.xs,\n color: tokens.colors.text.tertiary,\n marginBottom: 2,\n }}\n >\n Altitude\n </span>\n <span\n style={{\n fontSize: tokens.typography.fontSize.md,\n fontWeight: tokens.typography.fontWeight.medium,\n fontVariantNumeric: \"tabular-nums\",\n fontFamily: tokens.typography.fontFamily.mono,\n color: orbitColor,\n }}\n >\n {formatAltitude(spacecraft.altitude)}\n </span>\n </div>\n <div>\n <span\n style={{\n display: \"block\",\n fontSize: tokens.typography.fontSize.xs,\n color: tokens.colors.text.tertiary,\n marginBottom: 2,\n }}\n >\n Velocity\n </span>\n <span\n style={{\n fontSize: tokens.typography.fontSize.md,\n fontWeight: tokens.typography.fontWeight.medium,\n fontVariantNumeric: \"tabular-nums\",\n fontFamily: tokens.typography.fontFamily.mono,\n }}\n >\n {formatVelocity(spacecraft.velocity)}\n </span>\n </div>\n </div>\n\n {/ Timestamp /}\n {spacecraft.timestamp && (\n <time\n dateTime={spacecraft.timestamp}\n style={{\n display: \"block\",\n fontSize: tokens.typography.fontSize.xs,\n color: tokens.colors.text.tertiary,\n fontVariantNumeric: \"tabular-nums\",\n }}\n >\n {formatTime(spacecraft.timestamp)}\n </time>\n )}\n </>\n ) : (\n // Compact content\n renderCompactContent()\n )}\n </article>\n );\n }\n\n return (\n <article\n className={classNames(\n \"zendir-spacecraft-card\",\n compact ? \"expanded\" : \"\",\n className,\n )}\n onClick={compact \|\| onClick ? combinedClickHandler : undefined}\n onKeyDown={onClick ? handleKeyDown : compactHandlers.onKeyDown}\n tabIndex={onClick \|\| compact ? 0 : undefined}\n role={compact ? compactHandlers.role : \"article\"}\n aria-expanded={compact ? compactHandlers[\"aria-expanded\"] : undefined}\n aria-label={`Spacecraft: ${spacecraft.name ?? spacecraft.id}`}\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 cursor: onClick \|\| compact ? \"pointer\" : \"default\",\n transition: `all ${transitionDuration} ease-out`,\n outline: \"none\",\n }}\n onMouseEnter={(e) => {\n if (compact) compactHandlers.onMouseEnter();\n if (onClick) {\n e.currentTarget.style.borderColor = tokens.colors.border.focus;\n e.currentTarget.style.boxShadow = tokens.shadows.md;\n e.currentTarget.style.transform = prefersReducedMotion\n ? \"none\"\n : \"translateY(-2px)\";\n }\n }}\n onMouseLeave={(e) => {\n if (compact) compactHandlers.onMouseLeave();\n if (onClick) {\n e.currentTarget.style.borderColor = tokens.colors.border.muted;\n e.currentTarget.style.boxShadow = \"none\";\n e.currentTarget.style.transform = \"none\";\n }\n }}\n onFocus={(e) => {\n e.currentTarget.style.outline = `2px solid ${tokens.colors.border.focus}`;\n e.currentTarget.style.outlineOffset = \"2px\";\n }}\n onBlur={(e) => {\n e.currentTarget.style.outline = \"none\";\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=\"satellite-transmit\"\n title={spacecraft.name ?? spacecraft.id ?? \"Unknown\"}\n subtitle={spacecraft.id && spacecraft.name ? spacecraft.id : undefined}\n status={healthStatus}\n badge={spacecraft.orbitType ?? \"Unknown\"}\n badgeColor={orbitColor}\n isPinned={compact && isPinned}\n />\n\n {/ Position Data Grid /}\n <div\n style={{\n display: \"grid\",\n gridTemplateColumns: \"repeat(2, 1fr)\",\n gap: tokens.spacing.sm,\n }}\n >\n <DataCell\n label=\"Latitude\"\n value={formatCoordinate(spacecraft.latitude, \"lat\")}\n tokens={tokens}\n highlightColor={accentTextColor}\n />\n <DataCell\n label=\"Longitude\"\n value={formatCoordinate(spacecraft.longitude, \"lon\")}\n tokens={tokens}\n highlightColor={accentTextColor}\n />\n <DataCell\n label=\"Altitude\"\n value={formatAltitude(spacecraft.altitude)}\n highlight\n tokens={tokens}\n highlightColor={accentTextColor}\n />\n <DataCell\n label=\"Velocity\"\n value={formatVelocity(spacecraft.velocity)}\n tokens={tokens}\n highlightColor={accentTextColor}\n />\n </div>\n\n {/ Orbit Info (Optional) /}\n {showOrbit && spacecraft.inclination !== undefined && (\n <div\n style={{\n marginTop: tokens.spacing.md,\n paddingTop: tokens.spacing.md,\n borderTop: `1px solid ${tokens.colors.border.muted}`,\n }}\n >\n <DataCell\n label=\"Inclination\"\n value={`${safeNumber(spacecraft.inclination, 1)}°`}\n inline\n tokens={tokens}\n />\n </div>\n )}\n\n {/ Telemetry Summary (Optional) /}\n {showTelemetry && telemetry && (\n <div\n style={{\n marginTop: tokens.spacing.md,\n paddingTop: tokens.spacing.md,\n borderTop: `1px solid ${tokens.colors.border.muted}`,\n }}\n >\n {/ Health Status /}\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: tokens.spacing.sm,\n marginBottom: tokens.spacing.sm,\n }}\n >\n <span\n aria-hidden=\"true\"\n style={{\n width: 10,\n height: 10,\n borderRadius: \"50%\",\n backgroundColor: statusColor,\n boxShadow: `0 0 8px ${statusColor}60`,\n }}\n />\n <span\n style={{\n fontSize: tokens.typography.fontSize.xs,\n fontWeight: tokens.typography.fontWeight.medium,\n color: statusColor,\n textTransform: \"capitalize\",\n }}\n >\n {telemetry.health?.status ?? \"Unknown\"}\n </span>\n </div>\n\n {/ Battery Progress /}\n {telemetry.power?.batteryLevel !== undefined && (\n <div>\n <div\n style={{\n display: \"flex\",\n justifyContent: \"space-between\",\n marginBottom: 4,\n fontSize: tokens.typography.fontSize.xs,\n }}\n >\n <span style={{ color: tokens.colors.text.tertiary }}>\n Battery\n </span>\n <span\n style={{\n fontFamily: tokens.typography.fontFamily.mono,\n fontVariantNumeric: \"tabular-nums\",\n }}\n >\n {formatPercentage(telemetry.power.batteryLevel, false, 0)}\n </span>\n </div>\n <div\n style={{\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}\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))}%`,\n backgroundColor:\n telemetry.power.batteryLevel > 30\n ? tokens.colors.status.normal\n : tokens.colors.status.critical,\n borderRadius: 2,\n transition: `width ${transitionDuration} ease-out`,\n }}\n />\n </div>\n </div>\n )}\n </div>\n )}\n\n {/ Timestamp Footer /}\n {spacecraft.timestamp && (\n <footer\n style={{\n marginTop: tokens.spacing.md,\n paddingTop: tokens.spacing.sm,\n borderTop: `1px solid ${tokens.colors.border.muted}`,\n fontSize: tokens.typography.fontSize.xs,\n color: tokens.colors.text.tertiary,\n textAlign: \"right\",\n }}\n >\n <time dateTime={spacecraft.timestamp}>\n {formatTime(spacecraft.timestamp)} UTC\n </time>\n </footer>\n )}\n </article>\n );\n});\n\n// ============================================================================\n// Helper Components\n// ============================================================================\n\ninterface DataCellProps {\n label: string;\n value: string;\n highlight?: boolean;\n inline?: boolean;\n tokens: ReturnType<typeof useTheme>[\"tokens\"];\n /* WCAG AA safe highlight color (computed via safeAccentText) */\n highlightColor?: string;\n}\n\nconst DataCell = memo(function DataCell({\n label,\n value,\n highlight = false,\n inline = false,\n tokens,\n highlightColor,\n}: DataCellProps): React.ReactElement {\n if (inline) {\n return (\n <div\n style={{\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n }}\n >\n <span\n style={{\n fontSize: tokens.typography.fontSize.xs,\n color: tokens.colors.text.secondary, // WCAG AA compliant\n fontWeight: tokens.typography.fontWeight.medium,\n }}\n >\n {label}\n </span>\n <span\n style={{\n fontSize: tokens.typography.fontSize.sm,\n fontFamily: tokens.typography.fontFamily.mono,\n fontVariantNumeric: \"tabular-nums\",\n color: tokens.colors.text.primary,\n }}\n >\n {value}\n </span>\n </div>\n );\n }\n\n return (\n <div>\n <span\n style={{\n display: \"block\",\n fontSize: tokens.typography.fontSize.xs,\n color: tokens.colors.text.secondary, // WCAG AA compliant\n fontWeight: tokens.typography.fontWeight.medium,\n marginBottom: 2,\n }}\n >\n {label}\n </span>\n <span\n style={{\n display: \"block\",\n fontSize: tokens.typography.fontSize.sm,\n fontFamily: tokens.typography.fontFamily.mono,\n fontVariantNumeric: \"tabular-nums\",\n color: highlight\n ? (highlightColor ?? safeAccentText(tokens.colors.accent.primary))\n : tokens.colors.text.primary,\n fontWeight: tokens.typography.fontWeight.medium,\n }}\n >\n {value}\n </span>\n </div>\n );\n});\n"],"mappings":"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"}
1	+ {"version":3,"file":"SpacecraftCard.js","names":[],"sources":["../../../src/react/cards/SpacecraftCard.tsx"],"sourcesContent":["/*\r\n @zendir/ui - SpacecraftCard Component\r\n \r\n Enterprise-grade spacecraft information card.\r\n \r\n AstroUXDS Compliance:\r\n * - Status colors used for health/operational status only\r\n * - Orbit type uses Zendir-Astro data viz colors (categorical)\r\n * - Zendir accent colors for interactive elements\r\n * - Tabular numbers with fontVariantNumeric for data\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 * - Keyboard navigation\r\n * - Smooth animations with reduced-motion support\r\n * - Loading skeleton state\r\n * - Error boundary support\r\n * - Real SDK integration via optional client prop\r\n /\r\n\r\nimport React, { memo, useCallback, useMemo } from \"react\";\r\nimport type { SpacecraftPosition, TelemetryData } from \"../types\";\r\nimport { useTheme } from \"../theme\";\r\nimport { Icon, type IconName } from \"../core/display/Icon\";\r\nimport { CardHeader } from \"../core/display/CardHeader\";\r\nimport { HeaderIconWithStatus } from \"../core/display/HeaderIconWithStatus\";\r\nimport { useCompactMode } from \"../hooks\";\r\nimport { useCardBorderStyle } from \"../context/DisplaySettingsContext\";\r\n\r\n// ZendirClient is optional - only used when SDK is installed\r\ntype ZendirClient = any;\r\nimport {\r\n safeNumber,\r\n formatCoordinate,\r\n formatAltitude,\r\n formatVelocity,\r\n formatPercentage,\r\n formatTime,\r\n getStatusColor,\r\n classNames,\r\n safeAccentText,\r\n type StatusLevel,\r\n} from \"../utils\";\r\n\r\nexport interface SpacecraftCardProps {\r\n /* Spacecraft position data (for direct data mode) /\r\n spacecraft?: SpacecraftPosition;\r\n /* Optional telemetry data /\r\n telemetry?: TelemetryData;\r\n /* Show expanded orbit info /\r\n showOrbit?: boolean;\r\n /* Show telemetry summary /\r\n showTelemetry?: boolean;\r\n /* Loading state /\r\n loading?: boolean;\r\n /* Click handler /\r\n onClick?: (spacecraft: SpacecraftPosition) => void;\r\n /* Custom className /\r\n className?: string;\r\n /* Connected mode: SDK client /\r\n client?: ZendirClient;\r\n /* Connected mode: Spacecraft ID to fetch /\r\n spacecraftId?: 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 orbit type color based on orbit classification\r\n * Uses Zendir-Astro palette for categorical (non-status) classification\r\n /\r\nfunction getOrbitTypeColor(\r\n orbitType: string \| undefined,\r\n accentColor: string,\r\n): string {\r\n // Orbit type colors using pure Zendir brand palette\r\n // These are categorical colors, not status colors\r\n const colors: Record<string, string> = {\r\n LEO: \"#3E3CFF\", // Zendir Electric - Low Earth Orbit\r\n MEO: \"#3548C0\", // Zendir Prussian Blue Light - Medium Earth Orbit\r\n GEO: \"#9D70FF\", // Zendir Purple - Geostationary\r\n HEO: \"#1B2DA0\", // Zendir Prussian Blue - Highly Elliptical\r\n SSO: \"#B48DFF\", // Zendir Purple Light - Sun-Synchronous\r\n POLAR: \"#6B69FF\", // Zendir Electric Light - Polar\r\n };\r\n return colors[orbitType?.toUpperCase() ?? \"\"] ?? accentColor;\r\n}\r\n\r\n/\r\n Derive health status from spacecraft or telemetry\r\n * Prefers telemetry.health.status, falls back to spacecraft.status\r\n /\r\nfunction deriveHealthStatus(\r\n spacecraftStatus: StatusLevel \| undefined,\r\n telemetryStatus: string \| undefined,\r\n): StatusLevel {\r\n // Prefer telemetry if available, but also validate it's a proper StatusLevel\r\n if (telemetryStatus) {\r\n const validStatuses: StatusLevel[] = [\r\n \"off\",\r\n \"standby\",\r\n \"normal\",\r\n \"caution\",\r\n \"serious\",\r\n \"critical\",\r\n ];\r\n const normalized = telemetryStatus.toLowerCase();\r\n if (validStatuses.includes(normalized as StatusLevel)) {\r\n return normalized as StatusLevel;\r\n }\r\n // Legacy mapping for backwards compatibility\r\n switch (normalized) {\r\n case \"healthy\":\r\n case \"nominal\":\r\n case \"operational\":\r\n return \"normal\";\r\n case \"warning\":\r\n case \"degraded\":\r\n return \"caution\";\r\n case \"failed\":\r\n case \"error\":\r\n return \"critical\";\r\n case \"idle\":\r\n return \"standby\";\r\n }\r\n }\r\n // Use spacecraft.status directly (already typed as StatusLevel)\r\n return spacecraftStatus ?? \"off\";\r\n}\r\n\r\n/\r\n SpacecraftCard - Displays spacecraft position and status information\r\n \r\n @example\r\n * ```tsx\r\n * // Direct data mode\r\n * <SpacecraftCard\r\n * spacecraft={spacecraftData}\r\n * telemetry={telemetryData}\r\n * showOrbit\r\n * showTelemetry\r\n * onClick={() => {}}\r\n * />\r\n \r\n // Connected mode (auto-fetches via SDK)\r\n * <SpacecraftCard\r\n * client={zendirClient}\r\n * spacecraftId=\"iss-25544\"\r\n * showTelemetry\r\n * />\r\n * ```\r\n /\r\nexport const SpacecraftCard = memo(function SpacecraftCard({\r\n spacecraft,\r\n telemetry,\r\n showOrbit = false,\r\n showTelemetry = false,\r\n loading = false,\r\n onClick,\r\n className = \"\",\r\n compact = false,\r\n defaultExpanded = false,\r\n onPinChange,\r\n}: SpacecraftCardProps): 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 // WCAG AA safe accent for use as foreground text on dark backgrounds\r\n const accentTextColor = useMemo(\r\n () => safeAccentText(tokens.colors.accent.primary),\r\n [tokens.colors.accent.primary],\r\n );\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: compactHandlers,\r\n transitionDuration: _compactTransition,\r\n } = useCompactMode({\r\n compact,\r\n defaultExpanded,\r\n onPinChange,\r\n });\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 // Memoized click handler\r\n const _handleClick = useCallback(() => {\r\n if (onClick && spacecraft) {\r\n onClick(spacecraft);\r\n }\r\n }, [onClick, spacecraft]);\r\n\r\n // Keyboard handler for accessibility\r\n const handleKeyDown = useCallback(\r\n (e: React.KeyboardEvent) => {\r\n if (onClick && spacecraft && (e.key === \"Enter\" \|\| e.key === \" \")) {\r\n e.preventDefault();\r\n onClick(spacecraft);\r\n }\r\n },\r\n [onClick, spacecraft],\r\n );\r\n\r\n // Memoized computed values\r\n const orbitColor = useMemo(\r\n () =>\r\n getOrbitTypeColor(spacecraft?.orbitType, tokens.colors.accent.primary),\r\n [spacecraft?.orbitType, tokens.colors.accent.primary],\r\n );\r\n\r\n const healthStatus = useMemo(\r\n () => deriveHealthStatus(spacecraft?.status, telemetry?.health?.status),\r\n [spacecraft?.status, telemetry?.health?.status],\r\n );\r\n\r\n const statusColor = useMemo(\r\n () => getStatusColor(healthStatus),\r\n [healthStatus],\r\n );\r\n\r\n // Animation duration (respects reduced motion)\r\n const transitionDuration = prefersReducedMotion ? \"0ms\" : \"200ms\";\r\n\r\n // Combined click handler for compact mode and onClick (must be before early returns)\r\n const combinedClickHandler = useCallback(() => {\r\n if (compact) {\r\n compactHandlers.onClick();\r\n }\r\n if (onClick && spacecraft) {\r\n onClick(spacecraft);\r\n }\r\n }, [compact, compactHandlers, onClick, spacecraft]);\r\n\r\n // Loading state\r\n if (loading) {\r\n return (\r\n <div\r\n className={classNames(\"zendir-spacecraft-card\", \"loading\", className)}\r\n role=\"article\"\r\n aria-busy=\"true\"\r\n aria-label=\"Loading spacecraft 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: 180,\r\n }}\r\n >\r\n {/ Loading skeleton /}\r\n <div\r\n style={{\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: 12,\r\n marginBottom: 16,\r\n }}\r\n >\r\n <div\r\n style={{\r\n width: 32,\r\n height: 32,\r\n borderRadius: \"50%\",\r\n backgroundColor: \"rgba(255,255,255,0.1)\",\r\n animation: \"pulse 1.5s ease-in-out infinite\",\r\n }}\r\n />\r\n <div style={{ flex: 1 }}>\r\n <div\r\n style={{\r\n height: 16,\r\n width: \"60%\",\r\n backgroundColor: \"rgba(255,255,255,0.1)\",\r\n borderRadius: 4,\r\n animation: \"pulse 1.5s ease-in-out infinite\",\r\n }}\r\n />\r\n </div>\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}>\r\n <div\r\n style={{\r\n height: 10,\r\n width: \"40%\",\r\n backgroundColor: \"rgba(255,255,255,0.08)\",\r\n borderRadius: 2,\r\n marginBottom: 4,\r\n }}\r\n />\r\n <div\r\n style={{\r\n height: 14,\r\n width: \"70%\",\r\n backgroundColor: \"rgba(255,255,255,0.1)\",\r\n borderRadius: 2,\r\n }}\r\n />\r\n </div>\r\n ))}\r\n </div>\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 </div>\r\n );\r\n }\r\n\r\n // Empty state\r\n if (!spacecraft) {\r\n return (\r\n <div\r\n className={classNames(\"zendir-spacecraft-card\", \"empty\", className)}\r\n role=\"article\"\r\n aria-label=\"No spacecraft 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 <svg\r\n width=\"32\"\r\n height=\"32\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"1.5\"\r\n style={{ marginBottom: 8, opacity: 0.5 }}\r\n >\r\n <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" />\r\n </svg>\r\n <p style={{ margin: 0, fontSize: tokens.typography.body[2].fontSize }}>\r\n No spacecraft data available\r\n </p>\r\n </div>\r\n );\r\n }\r\n\r\n // Compact view - shows key info in a single row\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 }: {\r\n icon: IconName;\r\n label: string;\r\n value: string \| number;\r\n color?: 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 <Icon\r\n name={icon}\r\n size={12}\r\n color={color ?? tokens.colors.text.secondary}\r\n />\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 rendering\r\n const renderCompactContent = () => {\r\n const power = telemetry?.subsystems?.power ?? telemetry?.power;\r\n const batteryLevel = power?.batteryLevel;\r\n const batteryStatusLocal =\r\n batteryLevel !== undefined\r\n ? batteryLevel > 50\r\n ? \"normal\"\r\n : batteryLevel > 20\r\n ? \"caution\"\r\n : \"critical\"\r\n : \"off\";\r\n\r\n // Status color for header icon\r\n const statusColor = getStatusColor(healthStatus);\r\n\r\n return (\r\n <>\r\n {/ Header: Icon (status colored) → Status symbol → Name → Badges /}\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 + Name + Accent line /}\r\n <div\r\n style={{\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: tokens.spacing.xs,\r\n flex: 1,\r\n minWidth: 0,\r\n }}\r\n >\r\n {/ Icon with status badge - MonitoringIcon pattern /}\r\n <HeaderIconWithStatus\r\n icon=\"satellite-transmit\"\r\n size={18}\r\n status={healthStatus}\r\n statusColor={statusColor}\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 }}\r\n >\r\n {(spacecraft.name ?? spacecraft.id ?? \"Unknown\").split(\" \")[0]}\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: Orbit type badge + Pin /}\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 {/ Orbit type badge /}\r\n <span\r\n style={{\r\n backgroundColor: `${orbitColor}20`,\r\n color: orbitColor,\r\n padding: `1px 6px`,\r\n borderRadius: tokens.borderRadius.sm,\r\n fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\r\n fontWeight: tokens.typography.fontWeight.medium,\r\n fontFamily: tokens.typography.fontFamily.primary,\r\n }}\r\n >\r\n {spacecraft.orbitType ?? \"—\"}\r\n </span>\r\n {/ Pin badge /}\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 - 3 columns /}\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 {/ Position metrics /}\r\n <CompactMetric\r\n icon=\"location\"\r\n label=\"Latitude\"\r\n value={formatCoordinate(spacecraft.latitude, \"lat\")}\r\n />\r\n <CompactMetric\r\n icon=\"location\"\r\n label=\"Longitude\"\r\n value={formatCoordinate(spacecraft.longitude, \"lon\")}\r\n />\r\n <CompactMetric\r\n icon=\"orbit\"\r\n label=\"Altitude\"\r\n value={formatAltitude(spacecraft.altitude)}\r\n color={orbitColor}\r\n />\r\n\r\n {/ Velocity /}\r\n {spacecraft.velocity !== undefined && (\r\n <CompactMetric\r\n icon=\"rocket\"\r\n label=\"Velocity\"\r\n value={formatVelocity(spacecraft.velocity)}\r\n />\r\n )}\r\n\r\n {/ Telemetry data if available /}\r\n {batteryLevel !== undefined && (\r\n <CompactMetric\r\n icon=\"battery\"\r\n label=\"Battery\"\r\n value={formatPercentage(batteryLevel)}\r\n color={getStatusColor(batteryStatusLocal as StatusLevel)}\r\n />\r\n )}\r\n\r\n {/ Inclination if available /}\r\n {spacecraft.inclination !== undefined && (\r\n <CompactMetric\r\n icon=\"orbit\"\r\n label=\"Inclination\"\r\n value={`${safeNumber(spacecraft.inclination, 1)}°`}\r\n />\r\n )}\r\n </div>\r\n </>\r\n );\r\n };\r\n\r\n // Compact mode with in-place expansion - cards push each other\r\n if (compact) {\r\n return (\r\n <article\r\n className={classNames(\r\n \"zendir-spacecraft-card\",\r\n \"compact\",\r\n expanded ? \"expanded\" : \"\",\r\n className,\r\n )}\r\n {...compactHandlers}\r\n aria-label={`Spacecraft: ${spacecraft.name ?? spacecraft.id}${expanded ? \"\" : \" (compact)\"}`}\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 ${orbitColor}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\r\n <>\r\n {/ Full expanded header - matches MonitoringIcon layout pattern /}\r\n <div\r\n style={{\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: tokens.spacing.sm,\r\n marginBottom: tokens.spacing.md,\r\n }}\r\n >\r\n {/ Icon with status badge - MonitoringIcon pattern /}\r\n <HeaderIconWithStatus\r\n icon=\"satellite-transmit\"\r\n size={24}\r\n status={healthStatus}\r\n />\r\n <div style={{ flex: 1, minWidth: 0 }}>\r\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 6 }}>\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 lineHeight: 1.2,\r\n }}\r\n >\r\n {spacecraft.name ?? spacecraft.id}\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 />\r\n )}\r\n </div>\r\n {spacecraft.id && spacecraft.name && (\r\n <span\r\n style={{\r\n fontSize: tokens.typography.fontSize.xs,\r\n color: tokens.colors.text.tertiary,\r\n }}\r\n >\r\n {spacecraft.id}\r\n </span>\r\n )}\r\n </div>\r\n <span\r\n style={{\r\n backgroundColor: `${orbitColor}20`,\r\n color: orbitColor,\r\n padding: `4px 8px`,\r\n borderRadius: tokens.borderRadius.sm,\r\n fontSize: tokens.typography.fontSize.xs,\r\n fontWeight: tokens.typography.fontWeight.medium,\r\n flexShrink: 0,\r\n }}\r\n >\r\n {spacecraft.orbitType ?? \"Unknown\"}\r\n </span>\r\n </div>\r\n\r\n {/ Position Grid /}\r\n <div\r\n style={{\r\n display: \"grid\",\r\n gridTemplateColumns: \"repeat(2, 1fr)\",\r\n gap: tokens.spacing.sm,\r\n marginBottom: tokens.spacing.md,\r\n }}\r\n >\r\n <div>\r\n <span\r\n style={{\r\n display: \"block\",\r\n fontSize: tokens.typography.fontSize.xs,\r\n color: tokens.colors.text.tertiary,\r\n marginBottom: 2,\r\n }}\r\n >\r\n Latitude\r\n </span>\r\n <span\r\n style={{\r\n fontSize: tokens.typography.fontSize.md,\r\n fontWeight: tokens.typography.fontWeight.medium,\r\n fontVariantNumeric: \"tabular-nums\",\r\n fontFamily: tokens.typography.fontFamily.mono,\r\n }}\r\n >\r\n {formatCoordinate(spacecraft.latitude, \"lat\")}\r\n </span>\r\n </div>\r\n <div>\r\n <span\r\n style={{\r\n display: \"block\",\r\n fontSize: tokens.typography.fontSize.xs,\r\n color: tokens.colors.text.tertiary,\r\n marginBottom: 2,\r\n }}\r\n >\r\n Longitude\r\n </span>\r\n <span\r\n style={{\r\n fontSize: tokens.typography.fontSize.md,\r\n fontWeight: tokens.typography.fontWeight.medium,\r\n fontVariantNumeric: \"tabular-nums\",\r\n fontFamily: tokens.typography.fontFamily.mono,\r\n }}\r\n >\r\n {formatCoordinate(spacecraft.longitude, \"lon\")}\r\n </span>\r\n </div>\r\n <div>\r\n <span\r\n style={{\r\n display: \"block\",\r\n fontSize: tokens.typography.fontSize.xs,\r\n color: tokens.colors.text.tertiary,\r\n marginBottom: 2,\r\n }}\r\n >\r\n Altitude\r\n </span>\r\n <span\r\n style={{\r\n fontSize: tokens.typography.fontSize.md,\r\n fontWeight: tokens.typography.fontWeight.medium,\r\n fontVariantNumeric: \"tabular-nums\",\r\n fontFamily: tokens.typography.fontFamily.mono,\r\n color: orbitColor,\r\n }}\r\n >\r\n {formatAltitude(spacecraft.altitude)}\r\n </span>\r\n </div>\r\n <div>\r\n <span\r\n style={{\r\n display: \"block\",\r\n fontSize: tokens.typography.fontSize.xs,\r\n color: tokens.colors.text.tertiary,\r\n marginBottom: 2,\r\n }}\r\n >\r\n Velocity\r\n </span>\r\n <span\r\n style={{\r\n fontSize: tokens.typography.fontSize.md,\r\n fontWeight: tokens.typography.fontWeight.medium,\r\n fontVariantNumeric: \"tabular-nums\",\r\n fontFamily: tokens.typography.fontFamily.mono,\r\n }}\r\n >\r\n {formatVelocity(spacecraft.velocity)}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n {/ Timestamp /}\r\n {spacecraft.timestamp && (\r\n <time\r\n dateTime={spacecraft.timestamp}\r\n style={{\r\n display: \"block\",\r\n fontSize: tokens.typography.fontSize.xs,\r\n color: tokens.colors.text.tertiary,\r\n fontVariantNumeric: \"tabular-nums\",\r\n }}\r\n >\r\n {formatTime(spacecraft.timestamp)}\r\n </time>\r\n )}\r\n </>\r\n ) : (\r\n // Compact content\r\n renderCompactContent()\r\n )}\r\n </article>\r\n );\r\n }\r\n\r\n return (\r\n <article\r\n className={classNames(\r\n \"zendir-spacecraft-card\",\r\n compact ? \"expanded\" : \"\",\r\n className,\r\n )}\r\n onClick={compact \|\| onClick ? combinedClickHandler : undefined}\r\n onKeyDown={onClick ? handleKeyDown : compactHandlers.onKeyDown}\r\n tabIndex={onClick \|\| compact ? 0 : undefined}\r\n role={compact ? compactHandlers.role : \"article\"}\r\n aria-expanded={compact ? compactHandlers[\"aria-expanded\"] : undefined}\r\n aria-label={`Spacecraft: ${spacecraft.name ?? spacecraft.id}`}\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 cursor: onClick \|\| compact ? \"pointer\" : \"default\",\r\n transition: `all ${transitionDuration} ease-out`,\r\n outline: \"none\",\r\n }}\r\n onMouseEnter={(e) => {\r\n if (compact) compactHandlers.onMouseEnter();\r\n if (onClick) {\r\n e.currentTarget.style.borderColor = tokens.colors.border.focus;\r\n e.currentTarget.style.boxShadow = tokens.shadows.md;\r\n e.currentTarget.style.transform = prefersReducedMotion\r\n ? \"none\"\r\n : \"translateY(-2px)\";\r\n }\r\n }}\r\n onMouseLeave={(e) => {\r\n if (compact) compactHandlers.onMouseLeave();\r\n if (onClick) {\r\n e.currentTarget.style.borderColor = tokens.colors.border.muted;\r\n e.currentTarget.style.boxShadow = \"none\";\r\n e.currentTarget.style.transform = \"none\";\r\n }\r\n }}\r\n onFocus={(e) => {\r\n e.currentTarget.style.outline = `2px solid ${tokens.colors.border.focus}`;\r\n e.currentTarget.style.outlineOffset = \"2px\";\r\n }}\r\n onBlur={(e) => {\r\n e.currentTarget.style.outline = \"none\";\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=\"satellite-transmit\"\r\n title={spacecraft.name ?? spacecraft.id ?? \"Unknown\"}\r\n subtitle={spacecraft.id && spacecraft.name ? spacecraft.id : undefined}\r\n status={healthStatus}\r\n badge={spacecraft.orbitType ?? \"Unknown\"}\r\n badgeColor={orbitColor}\r\n isPinned={compact && isPinned}\r\n />\r\n\r\n {/ Position Data Grid /}\r\n <div\r\n style={{\r\n display: \"grid\",\r\n gridTemplateColumns: \"repeat(2, 1fr)\",\r\n gap: tokens.spacing.sm,\r\n }}\r\n >\r\n <DataCell\r\n label=\"Latitude\"\r\n value={formatCoordinate(spacecraft.latitude, \"lat\")}\r\n tokens={tokens}\r\n highlightColor={accentTextColor}\r\n />\r\n <DataCell\r\n label=\"Longitude\"\r\n value={formatCoordinate(spacecraft.longitude, \"lon\")}\r\n tokens={tokens}\r\n highlightColor={accentTextColor}\r\n />\r\n <DataCell\r\n label=\"Altitude\"\r\n value={formatAltitude(spacecraft.altitude)}\r\n highlight\r\n tokens={tokens}\r\n highlightColor={accentTextColor}\r\n />\r\n <DataCell\r\n label=\"Velocity\"\r\n value={formatVelocity(spacecraft.velocity)}\r\n tokens={tokens}\r\n highlightColor={accentTextColor}\r\n />\r\n </div>\r\n\r\n {/ Orbit Info (Optional) /}\r\n {showOrbit && spacecraft.inclination !== undefined && (\r\n <div\r\n style={{\r\n marginTop: tokens.spacing.md,\r\n paddingTop: tokens.spacing.md,\r\n borderTop: `1px solid ${tokens.colors.border.muted}`,\r\n }}\r\n >\r\n <DataCell\r\n label=\"Inclination\"\r\n value={`${safeNumber(spacecraft.inclination, 1)}°`}\r\n inline\r\n tokens={tokens}\r\n />\r\n </div>\r\n )}\r\n\r\n {/ Telemetry Summary (Optional) /}\r\n {showTelemetry && telemetry && (\r\n <div\r\n style={{\r\n marginTop: tokens.spacing.md,\r\n paddingTop: tokens.spacing.md,\r\n borderTop: `1px solid ${tokens.colors.border.muted}`,\r\n }}\r\n >\r\n {/ Health Status /}\r\n <div\r\n style={{\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: tokens.spacing.sm,\r\n marginBottom: tokens.spacing.sm,\r\n }}\r\n >\r\n <span\r\n aria-hidden=\"true\"\r\n style={{\r\n width: 10,\r\n height: 10,\r\n borderRadius: \"50%\",\r\n backgroundColor: statusColor,\r\n boxShadow: `0 0 8px ${statusColor}60`,\r\n }}\r\n />\r\n <span\r\n style={{\r\n fontSize: tokens.typography.fontSize.xs,\r\n fontWeight: tokens.typography.fontWeight.medium,\r\n color: statusColor,\r\n textTransform: \"capitalize\",\r\n }}\r\n >\r\n {telemetry.health?.status ?? \"Unknown\"}\r\n </span>\r\n </div>\r\n\r\n {/ Battery Progress /}\r\n {telemetry.power?.batteryLevel !== undefined && (\r\n <div>\r\n <div\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n marginBottom: 4,\r\n fontSize: tokens.typography.fontSize.xs,\r\n }}\r\n >\r\n <span style={{ color: tokens.colors.text.tertiary }}>\r\n Battery\r\n </span>\r\n <span\r\n style={{\r\n fontFamily: tokens.typography.fontFamily.mono,\r\n fontVariantNumeric: \"tabular-nums\",\r\n }}\r\n >\r\n {formatPercentage(telemetry.power.batteryLevel, false, 0)}\r\n </span>\r\n </div>\r\n <div\r\n style={{\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}\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))}%`,\r\n backgroundColor:\r\n telemetry.power.batteryLevel > 30\r\n ? tokens.colors.status.normal\r\n : tokens.colors.status.critical,\r\n borderRadius: 2,\r\n transition: `width ${transitionDuration} ease-out`,\r\n }}\r\n />\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n\r\n {/ Timestamp Footer /}\r\n {spacecraft.timestamp && (\r\n <footer\r\n style={{\r\n marginTop: tokens.spacing.md,\r\n paddingTop: tokens.spacing.sm,\r\n borderTop: `1px solid ${tokens.colors.border.muted}`,\r\n fontSize: tokens.typography.fontSize.xs,\r\n color: tokens.colors.text.tertiary,\r\n textAlign: \"right\",\r\n }}\r\n >\r\n <time dateTime={spacecraft.timestamp}>\r\n {formatTime(spacecraft.timestamp)} UTC\r\n </time>\r\n </footer>\r\n )}\r\n </article>\r\n );\r\n});\r\n\r\n// ============================================================================\r\n// Helper Components\r\n// ============================================================================\r\n\r\ninterface DataCellProps {\r\n label: string;\r\n value: string;\r\n highlight?: boolean;\r\n inline?: boolean;\r\n tokens: ReturnType<typeof useTheme>[\"tokens\"];\r\n /* WCAG AA safe highlight color (computed via safeAccentText) */\r\n highlightColor?: string;\r\n}\r\n\r\nconst DataCell = memo(function DataCell({\r\n label,\r\n value,\r\n highlight = false,\r\n inline = false,\r\n tokens,\r\n highlightColor,\r\n}: DataCellProps): React.ReactElement {\r\n if (inline) {\r\n return (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n alignItems: \"center\",\r\n }}\r\n >\r\n <span\r\n style={{\r\n fontSize: tokens.typography.fontSize.xs,\r\n color: tokens.colors.text.secondary, // WCAG AA compliant\r\n fontWeight: tokens.typography.fontWeight.medium,\r\n }}\r\n >\r\n {label}\r\n </span>\r\n <span\r\n style={{\r\n fontSize: tokens.typography.fontSize.sm,\r\n fontFamily: tokens.typography.fontFamily.mono,\r\n fontVariantNumeric: \"tabular-nums\",\r\n color: tokens.colors.text.primary,\r\n }}\r\n >\r\n {value}\r\n </span>\r\n </div>\r\n );\r\n }\r\n\r\n return (\r\n <div>\r\n <span\r\n style={{\r\n display: \"block\",\r\n fontSize: tokens.typography.fontSize.xs,\r\n color: tokens.colors.text.secondary, // WCAG AA compliant\r\n fontWeight: tokens.typography.fontWeight.medium,\r\n marginBottom: 2,\r\n }}\r\n >\r\n {label}\r\n </span>\r\n <span\r\n style={{\r\n display: \"block\",\r\n fontSize: tokens.typography.fontSize.sm,\r\n fontFamily: tokens.typography.fontFamily.mono,\r\n fontVariantNumeric: \"tabular-nums\",\r\n color: highlight\r\n ? (highlightColor ?? safeAccentText(tokens.colors.accent.primary))\r\n : 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"],"mappings":"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"}