@zendir/ui 0.1.0

package/dist/react/visualizations/LinkBudgetCard.js

@@ -0,0 +1,444 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { classNames, safeNumber, formatDataRate } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+function formatDb(value, showSign = true, suffix = "dB") {
+  if (value === void 0 || value === null || !Number.isFinite(value)) {
+    return `-- ${suffix}`;
+  }
+  const sign = showSign && value >= 0 ? "+" : "";
+  return `${sign}${value.toFixed(1)} ${suffix}`;
+}
+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 >= 1e-3) return `${(watts * 1e3).toFixed(1)} mW`;
+  return `${(watts * 1e6).toFixed(1)} µW`;
+}
+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";
+}
+const LinkBudgetCard = memo(function LinkBudgetCard2({
+  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 == null ? void 0 : linkBudget.rxPowerDbm, linkBudget == null ? void 0 : 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: 0.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,
+                    // 0.625rem / 10px (AstroUXDS compact)
+                    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)
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+const ChainItem = memo(function ChainItem2({
+  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 })
+  ] });
+});
+export {
+  LinkBudgetCard
+};
+//# sourceMappingURL=LinkBudgetCard.js.map

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

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

package/dist/react/visualizations/NavBallCard.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { AttitudeData, PointingMode } from '../types';
+
+export interface NavBallCardProps {
+    /** Attitude data from API */
+    attitude: AttitudeData;
+    /** Current pointing mode */
+    pointingMode?: PointingMode;
+    /** Target name for display */
+    targetName?: string;
+    /** Compact mode */
+    compact?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+export declare const NavBallCard: React.FC<NavBallCardProps>;
+export default NavBallCard;