@zendir/ui 0.6.3 → 0.7.0

package/dist/react/visualizations/LinkBudgetCard.js

@@ -0,0 +1,426 @@
+import { useTheme } from "../theme/ThemeProvider.js";
+import { classNames, formatDataRate, safeNumber } from "../utils/index.js";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/visualizations/LinkBudgetCard.tsx
+/**
+* @zendir/ui - LinkBudgetCard Component
+*
+* RF Signal Chain Visualization showing complete link budget equation.
+* Tx Power → Antenna Gains → Path Loss → Rx Power = Margin
+*
+* AstroUXDS Compliance:
+* - Uses status colors for semantic meaning (gains=green, losses=red)
+* - Tx Power uses Zendir accent color (brand identity)
+* - Margin indicator uses status colors based on link quality
+* - Typography follows minimum size requirements (14pt)
+*
+* Features:
+* - Full null-safety with graceful fallbacks
+* - Visual signal chain diagram
+* - Link margin indicator with progress bar
+* - Loading and empty states
+*/
+/**
+* Format dB value with sign
+*/
+function formatDb(value, showSign = true, suffix = "dB") {
+	if (value === void 0 || value === null || !Number.isFinite(value)) return `-- ${suffix}`;
+	return `${showSign && value >= 0 ? "+" : ""}${value.toFixed(1)} ${suffix}`;
+}
+/**
+* Calculate power in watts from dBm
+*/
+function dbmToWatts(dbm) {
+	if (dbm === void 0 || !Number.isFinite(dbm)) return "-- W";
+	const watts = Math.pow(10, (dbm - 30) / 10);
+	if (watts >= 1e3) return `${(watts / 1e3).toFixed(1)} kW`;
+	if (watts >= 1) return `${watts.toFixed(1)} W`;
+	if (watts >= .001) return `${(watts * 1e3).toFixed(1)} mW`;
+	return `${(watts * 1e6).toFixed(1)} µW`;
+}
+/**
+* Get margin status level
+*/
+function getMarginStatus(margin) {
+	if (margin === void 0 || !Number.isFinite(margin)) return "off";
+	if (margin >= 6) return "normal";
+	if (margin >= 3) return "standby";
+	if (margin >= 0) return "caution";
+	return "critical";
+}
+/**
+* LinkBudgetCard - Visualizes RF link budget
+*
+* @example
+* ```tsx
+* <LinkBudgetCard
+*   linkBudget={linkBudgetData}
+*   groundStationName="Goldstone"
+* />
+* ```
+*/
+var LinkBudgetCard = memo(function LinkBudgetCard({ linkBudget, groundStationName = "Ground Station", compact = false, loading = false, className = "" }) {
+	const { tokens, theme, prefersReducedMotion } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const cardBg = isTransparentTheme ? "transparent" : tokens.colors.background.surface;
+	const cardGlass = isTransparentTheme ? {
+		backdropFilter: "blur(12px)",
+		WebkitBackdropFilter: "blur(12px)"
+	} : {};
+	const marginDb = useMemo(() => {
+		if (!linkBudget) return void 0;
+		const rx = linkBudget.rxPowerDbm;
+		const sens = linkBudget.rxSensitivityDbm;
+		if (!Number.isFinite(rx) || !Number.isFinite(sens)) return void 0;
+		return rx - sens;
+	}, [linkBudget?.rxPowerDbm, linkBudget?.rxSensitivityDbm]);
+	const marginStatus = getMarginStatus(marginDb);
+	const transitionDuration = prefersReducedMotion ? "0ms" : "300ms";
+	const SOFT_STATUS_COLORS = {
+		normal: "#6ed86e",
+		caution: "#ffd54f",
+		serious: "#ffa726",
+		critical: "#e57373",
+		off: "#90a4ae",
+		standby: "#4fc3f7"
+	};
+	if (loading) return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-link-budget-card", "loading", className),
+		role: "article",
+		"aria-busy": "true",
+		"aria-label": "Loading link budget",
+		style: {
+			backgroundColor: cardBg,
+			...cardGlass,
+			border: "none",
+			borderRadius: tokens.borderRadius.lg,
+			padding: tokens.spacing.md,
+			minHeight: 280
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				justifyContent: "space-between",
+				marginBottom: 16
+			},
+			children: [/* @__PURE__ */ jsx("div", { style: {
+				height: 24,
+				width: "40%",
+				backgroundColor: "rgba(255,255,255,0.1)",
+				borderRadius: 4
+			} }), /* @__PURE__ */ jsx("div", { style: {
+				height: 24,
+				width: 60,
+				backgroundColor: "rgba(255,255,255,0.1)",
+				borderRadius: 4
+			} })]
+		}), [
+			1,
+			2,
+			3,
+			4,
+			5
+		].map((i) => /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 8,
+				marginBottom: 12
+			},
+			children: [/* @__PURE__ */ jsx("div", { style: {
+				width: 16,
+				height: 16,
+				borderRadius: "50%",
+				backgroundColor: "rgba(255,255,255,0.1)"
+			} }), /* @__PURE__ */ jsx("div", { style: {
+				flex: 1,
+				height: 16,
+				backgroundColor: "rgba(255,255,255,0.06)",
+				borderRadius: 4
+			} })]
+		}, i))]
+	});
+	if (!linkBudget) return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-link-budget-card", "empty", className),
+		role: "article",
+		"aria-label": "No link budget data",
+		style: {
+			backgroundColor: cardBg,
+			...cardGlass,
+			border: "none",
+			borderRadius: tokens.borderRadius.lg,
+			padding: tokens.spacing.lg,
+			textAlign: "center",
+			color: tokens.colors.text.tertiary
+		},
+		children: [/* @__PURE__ */ jsx("svg", {
+			width: "32",
+			height: "32",
+			viewBox: "0 0 24 24",
+			fill: "currentColor",
+			style: {
+				opacity: .5,
+				marginBottom: 8
+			},
+			children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" })
+		}), /* @__PURE__ */ jsxs("p", {
+			style: {
+				margin: 0,
+				fontSize: tokens.typography.body[2].fontSize
+			},
+			children: [groundStationName, ": No link budget data"]
+		})]
+	});
+	const isLinkClosed = linkBudget.isLinkClosed ?? false;
+	const statusColor = isLinkClosed ? SOFT_STATUS_COLORS.normal : SOFT_STATUS_COLORS.off;
+	const marginColor = SOFT_STATUS_COLORS[marginStatus] ?? SOFT_STATUS_COLORS.off;
+	const chainItemStyle = {
+		position: "relative",
+		paddingLeft: 36,
+		marginBottom: tokens.spacing.md
+	};
+	const dotStyle = (color) => ({
+		position: "absolute",
+		left: 8,
+		top: 6,
+		width: 16,
+		height: 16,
+		backgroundColor: color,
+		borderRadius: "50%",
+		border: `2px solid ${tokens.colors.background.surface}`,
+		zIndex: 10
+	});
+	return /* @__PURE__ */ jsxs("article", {
+		className: classNames("zendir-link-budget-card", className),
+		"aria-label": `Link budget for ${groundStationName}`,
+		style: {
+			backgroundColor: cardBg,
+			...cardGlass,
+			border: "none",
+			borderRadius: tokens.borderRadius.lg,
+			padding: tokens.spacing.md,
+			fontFamily: tokens.typography.fontFamily.primary,
+			color: tokens.colors.text.primary
+		},
+		children: [
+			!compact && /* @__PURE__ */ jsxs("header", {
+				style: {
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "flex-start",
+					marginBottom: tokens.spacing.md
+				},
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+					style: {
+						margin: 0,
+						fontSize: tokens.typography.fontSize.md,
+						fontWeight: tokens.typography.fontWeight.semibold
+					},
+					children: "Link Budget"
+				}), /* @__PURE__ */ jsx("p", {
+					style: {
+						margin: "2px 0 0 0",
+						fontSize: tokens.typography.fontSize.xs,
+						color: tokens.colors.text.tertiary
+					},
+					children: groundStationName
+				})] }), /* @__PURE__ */ jsx("span", {
+					role: "status",
+					style: {
+						padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+						borderRadius: tokens.borderRadius.sm,
+						fontSize: tokens.typography.fontSize.xxs,
+						fontWeight: tokens.typography.fontWeight.bold,
+						backgroundColor: `${statusColor}20`,
+						color: statusColor
+					},
+					children: isLinkClosed ? "Link Closed" : "No Link"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: { position: "relative" },
+				children: [
+					/* @__PURE__ */ jsx("div", { style: {
+						position: "absolute",
+						left: 14,
+						top: 24,
+						bottom: 24,
+						width: 2,
+						backgroundColor: tokens.colors.border.muted
+					} }),
+					/* @__PURE__ */ jsx(ChainItem, {
+						label: "Tx Power",
+						value: formatDb(linkBudget.txPowerDbm, false, "dBm"),
+						subtext: dbmToWatts(linkBudget.txPowerDbm),
+						color: tokens.colors.accent.primary,
+						dotStyle,
+						chainItemStyle,
+						tokens
+					}),
+					/* @__PURE__ */ jsx(ChainItem, {
+						label: "Antenna Gain",
+						value: formatDb(linkBudget.txAntennaGainDbi, true, "dBi"),
+						color: SOFT_STATUS_COLORS.normal,
+						dotStyle,
+						chainItemStyle,
+						tokens
+					}),
+					/* @__PURE__ */ jsx(ChainItem, {
+						label: "Path Loss",
+						value: formatDb(linkBudget.pathLossDb, true, "dB"),
+						subtext: `Range: ${safeNumber(linkBudget.rangeKm, 0, "--")} km`,
+						color: SOFT_STATUS_COLORS.critical,
+						dotStyle,
+						chainItemStyle,
+						tokens
+					}),
+					(linkBudget.atmosphericLossDb || linkBudget.pointingLossDb) && /* @__PURE__ */ jsx(ChainItem, {
+						label: "Other Losses",
+						value: formatDb((linkBudget.atmosphericLossDb ?? 0) + (linkBudget.pointingLossDb ?? 0), true, "dB"),
+						color: SOFT_STATUS_COLORS.caution,
+						dotStyle,
+						chainItemStyle,
+						tokens
+					}),
+					/* @__PURE__ */ jsx(ChainItem, {
+						label: "Rx Gain",
+						value: formatDb(linkBudget.rxAntennaGainDbi, true, "dBi"),
+						color: SOFT_STATUS_COLORS.normal,
+						dotStyle,
+						chainItemStyle,
+						tokens
+					}),
+					/* @__PURE__ */ jsx("div", { style: {
+						height: 1,
+						backgroundColor: tokens.colors.border.muted,
+						marginLeft: 36,
+						marginBottom: tokens.spacing.sm
+					} }),
+					/* @__PURE__ */ jsx(ChainItem, {
+						label: "Rx Power",
+						value: formatDb(linkBudget.rxPowerDbm, false, "dBm"),
+						color: isLinkClosed ? tokens.colors.text.primary : SOFT_STATUS_COLORS.off,
+						glow: isLinkClosed,
+						dotStyle,
+						chainItemStyle,
+						tokens,
+						bold: true
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					marginTop: tokens.spacing.md,
+					paddingTop: tokens.spacing.md,
+					borderTop: `1px solid ${tokens.colors.border.muted}`
+				},
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							justifyContent: "space-between",
+							alignItems: "center",
+							fontSize: tokens.typography.fontSize.sm
+						},
+						children: [/* @__PURE__ */ jsx("span", {
+							style: { color: tokens.colors.text.tertiary },
+							children: "Link Margin"
+						}), /* @__PURE__ */ jsx("span", {
+							style: {
+								fontFamily: tokens.typography.fontFamily.mono,
+								fontWeight: tokens.typography.fontWeight.bold,
+								fontVariantNumeric: "tabular-nums",
+								color: marginColor
+							},
+							children: formatDb(marginDb, true, "dB")
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							marginTop: tokens.spacing.sm,
+							height: 8,
+							backgroundColor: tokens.colors.border.muted,
+							borderRadius: 4,
+							overflow: "hidden"
+						},
+						children: /* @__PURE__ */ jsx("div", {
+							role: "progressbar",
+							"aria-valuenow": marginDb ?? 0,
+							"aria-label": "Link margin",
+							style: {
+								height: "100%",
+								borderRadius: 4,
+								transition: `width ${transitionDuration} ease`,
+								backgroundColor: marginColor,
+								width: `${Math.min(100, Math.max(0, ((marginDb ?? 0) + 10) * 5))}%`
+							}
+						})
+					}),
+					linkBudget.dataRateBps !== void 0 && /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							justifyContent: "space-between",
+							alignItems: "center",
+							fontSize: tokens.typography.fontSize.xs,
+							marginTop: tokens.spacing.sm
+						},
+						children: [/* @__PURE__ */ jsx("span", {
+							style: { color: tokens.colors.text.tertiary },
+							children: "Data Rate"
+						}), /* @__PURE__ */ jsx("span", {
+							style: {
+								fontFamily: tokens.typography.fontFamily.mono,
+								color: SOFT_STATUS_COLORS.standby,
+								fontVariantNumeric: "tabular-nums"
+							},
+							children: formatDataRate(linkBudget.dataRateBps)
+						})]
+					})
+				]
+			})
+		]
+	});
+});
+var ChainItem = memo(function ChainItem({ label, value, subtext, color, glow = false, bold = false, dotStyle, chainItemStyle, tokens }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: chainItemStyle,
+		children: [
+			/* @__PURE__ */ jsx("div", { style: {
+				...dotStyle(color),
+				boxShadow: glow ? `0 0 8px ${color}` : "none"
+			} }),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+					fontSize: tokens.typography.fontSize.sm,
+					fontWeight: bold ? tokens.typography.fontWeight.semibold : tokens.typography.fontWeight.normal
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					style: { color: bold ? tokens.colors.text.primary : tokens.colors.text.secondary },
+					children: label
+				}), /* @__PURE__ */ jsx("span", {
+					style: {
+						fontFamily: tokens.typography.fontFamily.mono,
+						color: bold ? tokens.colors.text.primary : color,
+						fontVariantNumeric: "tabular-nums"
+					},
+					children: value
+				})]
+			}),
+			subtext && /* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: tokens.typography.fontSize.xxs,
+					color: tokens.colors.text.tertiary
+				},
+				children: subtext
+			})
+		]
+	});
+});
+//#endregion
+export { LinkBudgetCard };
+
+//# sourceMappingURL=LinkBudgetCard.js.map

package/dist/react/visualizations/LinkBudgetCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkBudgetCard.js","names":[],"sources":["../../../src/react/visualizations/LinkBudgetCard.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - LinkBudgetCard Component\r\n *\r\n * RF Signal Chain Visualization showing complete link budget equation.\r\n * Tx Power → Antenna Gains → Path Loss → Rx Power = Margin\r\n *\r\n * AstroUXDS Compliance:\r\n * - Uses status colors for semantic meaning (gains=green, losses=red)\r\n * - Tx Power uses Zendir accent color (brand identity)\r\n * - Margin indicator uses status colors based on link quality\r\n * - Typography follows minimum size requirements (14pt)\r\n *\r\n * Features:\r\n * - Full null-safety with graceful fallbacks\r\n * - Visual signal chain diagram\r\n * - Link margin indicator with progress bar\r\n * - Loading and empty states\r\n */\r\n\r\nimport React, { memo, useMemo } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport {\r\n  safeNumber,\r\n  formatDataRate,\r\n  classNames,\r\n  type StatusLevel,\r\n} from \"../utils\";\r\n\r\nexport interface LinkBudgetData {\r\n  /** Transmitter power in dBm */\r\n  txPowerDbm: number;\r\n  /** Transmitter antenna gain in dBi */\r\n  txAntennaGainDbi: number;\r\n  /** Receiver antenna gain in dBi */\r\n  rxAntennaGainDbi: number;\r\n  /** Free space path loss in dB (negative value) */\r\n  pathLossDb: number;\r\n  /** Atmospheric losses in dB (negative value) */\r\n  atmosphericLossDb?: number;\r\n  /** Pointing losses in dB (negative value) */\r\n  pointingLossDb?: number;\r\n  /** Received power in dBm */\r\n  rxPowerDbm: number;\r\n  /** Receiver sensitivity threshold in dBm */\r\n  rxSensitivityDbm: number;\r\n  /** Current range in km */\r\n  rangeKm: number;\r\n  /** Data rate in bps */\r\n  dataRateBps?: number;\r\n  /** Link status */\r\n  isLinkClosed: boolean;\r\n}\r\n\r\nexport interface LinkBudgetCardProps {\r\n  /** Link budget data */\r\n  linkBudget?: LinkBudgetData;\r\n  /** Ground station name */\r\n  groundStationName?: string;\r\n  /** Compact mode */\r\n  compact?: boolean;\r\n  /** Loading state */\r\n  loading?: boolean;\r\n  /** Custom class name */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * Format dB value with sign\r\n */\r\nfunction formatDb(\r\n  value: number | undefined,\r\n  showSign = true,\r\n  suffix = \"dB\",\r\n): string {\r\n  if (value === undefined || value === null || !Number.isFinite(value)) {\r\n    return `-- ${suffix}`;\r\n  }\r\n  const sign = showSign && value >= 0 ? \"+\" : \"\";\r\n  return `${sign}${value.toFixed(1)} ${suffix}`;\r\n}\r\n\r\n/**\r\n * Calculate power in watts from dBm\r\n */\r\nfunction dbmToWatts(dbm: number | undefined): string {\r\n  if (dbm === undefined || !Number.isFinite(dbm)) return \"-- W\";\r\n  const watts = Math.pow(10, (dbm - 30) / 10);\r\n  if (watts >= 1000) return `${(watts / 1000).toFixed(1)} kW`;\r\n  if (watts >= 1) return `${watts.toFixed(1)} W`;\r\n  if (watts >= 0.001) return `${(watts * 1000).toFixed(1)} mW`;\r\n  return `${(watts * 1000000).toFixed(1)} µW`;\r\n}\r\n\r\n/**\r\n * Get margin status level\r\n */\r\nfunction getMarginStatus(margin: number | undefined): StatusLevel {\r\n  if (margin === undefined || !Number.isFinite(margin)) return \"off\";\r\n  if (margin >= 6) return \"normal\";\r\n  if (margin >= 3) return \"standby\";\r\n  if (margin >= 0) return \"caution\";\r\n  return \"critical\";\r\n}\r\n\r\n/**\r\n * LinkBudgetCard - Visualizes RF link budget\r\n *\r\n * @example\r\n * ```tsx\r\n * <LinkBudgetCard\r\n *   linkBudget={linkBudgetData}\r\n *   groundStationName=\"Goldstone\"\r\n * />\r\n * ```\r\n */\r\nexport const LinkBudgetCard = memo(function LinkBudgetCard({\r\n  linkBudget,\r\n  groundStationName = \"Ground Station\",\r\n  compact = false,\r\n  loading = false,\r\n  className = \"\",\r\n}: LinkBudgetCardProps): 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  // 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\r\n  // Calculate margin\r\n  const marginDb = useMemo(() => {\r\n    if (!linkBudget) return undefined;\r\n    const rx = linkBudget.rxPowerDbm;\r\n    const sens = linkBudget.rxSensitivityDbm;\r\n    if (!Number.isFinite(rx) || !Number.isFinite(sens)) return undefined;\r\n    return rx - sens;\r\n  }, [linkBudget?.rxPowerDbm, linkBudget?.rxSensitivityDbm]);\r\n\r\n  const marginStatus = getMarginStatus(marginDb);\r\n  const transitionDuration = prefersReducedMotion ? \"0ms\" : \"300ms\";\r\n\r\n  // Medium-soft status colors (readable, not too pale)\r\n  const SOFT_STATUS_COLORS: Record<StatusLevel, string> = {\r\n    normal: \"#6ed86e\",\r\n    caution: \"#ffd54f\",\r\n    serious: \"#ffa726\",\r\n    critical: \"#e57373\",\r\n    off: \"#90a4ae\",\r\n    standby: \"#4fc3f7\",\r\n  };\r\n\r\n  // Loading state\r\n  if (loading) {\r\n    return (\r\n      <div\r\n        className={classNames(\"zendir-link-budget-card\", \"loading\", className)}\r\n        role=\"article\"\r\n        aria-busy=\"true\"\r\n        aria-label=\"Loading link budget\"\r\n        style={{\r\n          backgroundColor: cardBg,\r\n          ...cardGlass,\r\n          border: \"none\",\r\n          borderRadius: tokens.borderRadius.lg,\r\n          padding: tokens.spacing.md,\r\n          minHeight: 280,\r\n        }}\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            style={{\r\n              height: 24,\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            style={{\r\n              height: 24,\r\n              width: 60,\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, 4, 5].map((i) => (\r\n          <div\r\n            key={i}\r\n            style={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: 8,\r\n              marginBottom: 12,\r\n            }}\r\n          >\r\n            <div\r\n              style={{\r\n                width: 16,\r\n                height: 16,\r\n                borderRadius: \"50%\",\r\n                backgroundColor: \"rgba(255,255,255,0.1)\",\r\n              }}\r\n            />\r\n            <div\r\n              style={{\r\n                flex: 1,\r\n                height: 16,\r\n                backgroundColor: \"rgba(255,255,255,0.06)\",\r\n                borderRadius: 4,\r\n              }}\r\n            />\r\n          </div>\r\n        ))}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Empty state\r\n  if (!linkBudget) {\r\n    return (\r\n      <div\r\n        className={classNames(\"zendir-link-budget-card\", \"empty\", className)}\r\n        role=\"article\"\r\n        aria-label=\"No link budget data\"\r\n        style={{\r\n          backgroundColor: cardBg,\r\n          ...cardGlass,\r\n          border: \"none\",\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=\"currentColor\"\r\n          style={{ opacity: 0.5, marginBottom: 8 }}\r\n        >\r\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z\" />\r\n        </svg>\r\n        <p style={{ margin: 0, fontSize: tokens.typography.body[2].fontSize }}>\r\n          {groundStationName}: No link budget data\r\n        </p>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  const isLinkClosed = linkBudget.isLinkClosed ?? false;\r\n  const statusColor = isLinkClosed\r\n    ? SOFT_STATUS_COLORS.normal\r\n    : SOFT_STATUS_COLORS.off;\r\n  const marginColor =\r\n    SOFT_STATUS_COLORS[marginStatus] ?? SOFT_STATUS_COLORS.off;\r\n\r\n  const chainItemStyle: React.CSSProperties = {\r\n    position: \"relative\",\r\n    paddingLeft: 36,\r\n    marginBottom: tokens.spacing.md,\r\n  };\r\n\r\n  const dotStyle = (color: string): React.CSSProperties => ({\r\n    position: \"absolute\",\r\n    left: 8,\r\n    top: 6,\r\n    width: 16,\r\n    height: 16,\r\n    backgroundColor: color,\r\n    borderRadius: \"50%\",\r\n    border: `2px solid ${tokens.colors.background.surface}`,\r\n    zIndex: 10,\r\n  });\r\n\r\n  return (\r\n    <article\r\n      className={classNames(\"zendir-link-budget-card\", className)}\r\n      aria-label={`Link budget for ${groundStationName}`}\r\n      style={{\r\n        backgroundColor: cardBg,\r\n        ...cardGlass,\r\n        border: \"none\",\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      }}\r\n    >\r\n      {/* Header */}\r\n      {!compact && (\r\n        <header\r\n          style={{\r\n            display: \"flex\",\r\n            justifyContent: \"space-between\",\r\n            alignItems: \"flex-start\",\r\n            marginBottom: tokens.spacing.md,\r\n          }}\r\n        >\r\n          <div>\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              Link Budget\r\n            </h3>\r\n            <p\r\n              style={{\r\n                margin: \"2px 0 0 0\",\r\n                fontSize: tokens.typography.fontSize.xs,\r\n                color: tokens.colors.text.tertiary,\r\n              }}\r\n            >\r\n              {groundStationName}\r\n            </p>\r\n          </div>\r\n          <span\r\n            role=\"status\"\r\n            style={{\r\n              padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\r\n              borderRadius: tokens.borderRadius.sm,\r\n              fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\r\n              fontWeight: tokens.typography.fontWeight.bold,\r\n              backgroundColor: `${statusColor}20`,\r\n              color: statusColor,\r\n            }}\r\n          >\r\n            {isLinkClosed ? \"Link Closed\" : \"No Link\"}\r\n          </span>\r\n        </header>\r\n      )}\r\n\r\n      {/* Signal Chain */}\r\n      <div style={{ position: \"relative\" }}>\r\n        {/* Vertical line */}\r\n        <div\r\n          style={{\r\n            position: \"absolute\",\r\n            left: 14,\r\n            top: 24,\r\n            bottom: 24,\r\n            width: 2,\r\n            backgroundColor: tokens.colors.border.muted,\r\n          }}\r\n        />\r\n\r\n        {/* Tx Power */}\r\n        <ChainItem\r\n          label=\"Tx Power\"\r\n          value={formatDb(linkBudget.txPowerDbm, false, \"dBm\")}\r\n          subtext={dbmToWatts(linkBudget.txPowerDbm)}\r\n          color={tokens.colors.accent.primary}\r\n          dotStyle={dotStyle}\r\n          chainItemStyle={chainItemStyle}\r\n          tokens={tokens}\r\n        />\r\n\r\n        {/* Tx Antenna Gain */}\r\n        <ChainItem\r\n          label=\"Antenna Gain\"\r\n          value={formatDb(linkBudget.txAntennaGainDbi, true, \"dBi\")}\r\n          color={SOFT_STATUS_COLORS.normal}\r\n          dotStyle={dotStyle}\r\n          chainItemStyle={chainItemStyle}\r\n          tokens={tokens}\r\n        />\r\n\r\n        {/* Path Loss */}\r\n        <ChainItem\r\n          label=\"Path Loss\"\r\n          value={formatDb(linkBudget.pathLossDb, true, \"dB\")}\r\n          subtext={`Range: ${safeNumber(linkBudget.rangeKm, 0, \"--\")} km`}\r\n          color={SOFT_STATUS_COLORS.critical}\r\n          dotStyle={dotStyle}\r\n          chainItemStyle={chainItemStyle}\r\n          tokens={tokens}\r\n        />\r\n\r\n        {/* Additional losses */}\r\n        {(linkBudget.atmosphericLossDb || linkBudget.pointingLossDb) && (\r\n          <ChainItem\r\n            label=\"Other Losses\"\r\n            value={formatDb(\r\n              (linkBudget.atmosphericLossDb ?? 0) +\r\n                (linkBudget.pointingLossDb ?? 0),\r\n              true,\r\n              \"dB\",\r\n            )}\r\n            color={SOFT_STATUS_COLORS.caution}\r\n            dotStyle={dotStyle}\r\n            chainItemStyle={chainItemStyle}\r\n            tokens={tokens}\r\n          />\r\n        )}\r\n\r\n        {/* Rx Antenna Gain */}\r\n        <ChainItem\r\n          label=\"Rx Gain\"\r\n          value={formatDb(linkBudget.rxAntennaGainDbi, true, \"dBi\")}\r\n          color={SOFT_STATUS_COLORS.normal}\r\n          dotStyle={dotStyle}\r\n          chainItemStyle={chainItemStyle}\r\n          tokens={tokens}\r\n        />\r\n\r\n        {/* Divider */}\r\n        <div\r\n          style={{\r\n            height: 1,\r\n            backgroundColor: tokens.colors.border.muted,\r\n            marginLeft: 36,\r\n            marginBottom: tokens.spacing.sm,\r\n          }}\r\n        />\r\n\r\n        {/* Rx Power Result */}\r\n        <ChainItem\r\n          label=\"Rx Power\"\r\n          value={formatDb(linkBudget.rxPowerDbm, false, \"dBm\")}\r\n          color={\r\n            isLinkClosed ? tokens.colors.text.primary : SOFT_STATUS_COLORS.off\r\n          }\r\n          glow={isLinkClosed}\r\n          dotStyle={dotStyle}\r\n          chainItemStyle={chainItemStyle}\r\n          tokens={tokens}\r\n          bold\r\n        />\r\n      </div>\r\n\r\n      {/* Margin Indicator */}\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        <div\r\n          style={{\r\n            display: \"flex\",\r\n            justifyContent: \"space-between\",\r\n            alignItems: \"center\",\r\n            fontSize: tokens.typography.fontSize.sm,\r\n          }}\r\n        >\r\n          <span style={{ color: tokens.colors.text.tertiary }}>\r\n            Link Margin\r\n          </span>\r\n          <span\r\n            style={{\r\n              fontFamily: tokens.typography.fontFamily.mono,\r\n              fontWeight: tokens.typography.fontWeight.bold,\r\n              fontVariantNumeric: \"tabular-nums\",\r\n              color: marginColor,\r\n            }}\r\n          >\r\n            {formatDb(marginDb, true, \"dB\")}\r\n          </span>\r\n        </div>\r\n\r\n        {/* Visual margin bar */}\r\n        <div\r\n          style={{\r\n            marginTop: tokens.spacing.sm,\r\n            height: 8,\r\n            backgroundColor: tokens.colors.border.muted,\r\n            borderRadius: 4,\r\n            overflow: \"hidden\",\r\n          }}\r\n        >\r\n          <div\r\n            role=\"progressbar\"\r\n            aria-valuenow={marginDb ?? 0}\r\n            aria-label=\"Link margin\"\r\n            style={{\r\n              height: \"100%\",\r\n              borderRadius: 4,\r\n              transition: `width ${transitionDuration} ease`,\r\n              backgroundColor: marginColor,\r\n              width: `${Math.min(100, Math.max(0, ((marginDb ?? 0) + 10) * 5))}%`,\r\n            }}\r\n          />\r\n        </div>\r\n\r\n        {/* Data rate */}\r\n        {linkBudget.dataRateBps !== undefined && (\r\n          <div\r\n            style={{\r\n              display: \"flex\",\r\n              justifyContent: \"space-between\",\r\n              alignItems: \"center\",\r\n              fontSize: tokens.typography.fontSize.xs,\r\n              marginTop: tokens.spacing.sm,\r\n            }}\r\n          >\r\n            <span style={{ color: tokens.colors.text.tertiary }}>\r\n              Data Rate\r\n            </span>\r\n            <span\r\n              style={{\r\n                fontFamily: tokens.typography.fontFamily.mono,\r\n                color: SOFT_STATUS_COLORS.standby,\r\n                fontVariantNumeric: \"tabular-nums\",\r\n              }}\r\n            >\r\n              {formatDataRate(linkBudget.dataRateBps)}\r\n            </span>\r\n          </div>\r\n        )}\r\n      </div>\r\n    </article>\r\n  );\r\n});\r\n\r\n// ============================================================================\r\n// Helper Component\r\n// ============================================================================\r\n\r\ninterface ChainItemProps {\r\n  label: string;\r\n  value: string;\r\n  subtext?: string;\r\n  color: string;\r\n  glow?: boolean;\r\n  bold?: boolean;\r\n  dotStyle: (color: string) => React.CSSProperties;\r\n  chainItemStyle: React.CSSProperties;\r\n  tokens: ReturnType<typeof useTheme>[\"tokens\"];\r\n}\r\n\r\nconst ChainItem = memo(function ChainItem({\r\n  label,\r\n  value,\r\n  subtext,\r\n  color,\r\n  glow = false,\r\n  bold = false,\r\n  dotStyle,\r\n  chainItemStyle,\r\n  tokens,\r\n}: ChainItemProps): React.ReactElement {\r\n  return (\r\n    <div style={chainItemStyle}>\r\n      <div\r\n        style={{\r\n          ...dotStyle(color),\r\n          boxShadow: glow ? `0 0 8px ${color}` : \"none\",\r\n        }}\r\n      />\r\n      <div\r\n        style={{\r\n          display: \"flex\",\r\n          justifyContent: \"space-between\",\r\n          alignItems: \"center\",\r\n          fontSize: tokens.typography.fontSize.sm,\r\n          fontWeight: bold\r\n            ? tokens.typography.fontWeight.semibold\r\n            : tokens.typography.fontWeight.normal,\r\n        }}\r\n      >\r\n        <span\r\n          style={{\r\n            color: bold\r\n              ? tokens.colors.text.primary\r\n              : tokens.colors.text.secondary,\r\n          }}\r\n        >\r\n          {label}\r\n        </span>\r\n        <span\r\n          style={{\r\n            fontFamily: tokens.typography.fontFamily.mono,\r\n            color: bold ? tokens.colors.text.primary : color,\r\n            fontVariantNumeric: \"tabular-nums\",\r\n          }}\r\n        >\r\n          {value}\r\n        </span>\r\n      </div>\r\n      {subtext && (\r\n        <div\r\n          style={{\r\n            fontSize: tokens.typography.fontSize.xxs,\r\n            color: tokens.colors.text.tertiary,\r\n          }}\r\n        >\r\n          {subtext}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n"],"mappings":"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"}