@zendir/ui 0.6.2 → 0.7.0

package/dist/react/visualizations/NavBallCard.js

@@ -0,0 +1,358 @@
+import { useTheme } from "../theme/ThemeProvider.js";
+import { safeAccentText } from "../utils/index.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/visualizations/NavBallCard.tsx
+/**
+* NavBallCard - Attitude visualization (KSP-style NavBall)
+*
+* Visual sphere showing spacecraft orientation with markers for
+* prograde, normal, radial vectors and target alignment.
+*
+* Astro UX Compliance:
+* - Uses official Astro status colors via theme tokens
+* - Sentence-case labels
+* - Tabular numbers for data
+* - Roboto/Roboto Mono typography
+* - 4px-based spacing
+*/
+var NavBallCard = ({ attitude, pointingMode = "nadir", targetName, compact = false, className = "" }) => {
+	const { tokens, theme } = 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 { roll, pitch, yaw } = attitude.eulerAngles;
+	const pointingError = attitude.pointingError ?? 0;
+	const horizonTransform = useMemo(() => {
+		return { transform: `rotate(${Math.max(-180, Math.min(180, roll))}deg) translateY(${Math.max(-45, Math.min(45, pitch)) * 1.5}%)` };
+	}, [pitch, roll]);
+	const formatAngle = (angle, prefix) => {
+		return `${prefix}: ${angle >= 0 ? "+" : ""}${angle.toFixed(1)}°`;
+	};
+	const statusColors = {
+		normal: "#6ed86e",
+		caution: "#ffd54f",
+		serious: "#ffa726",
+		critical: "#e57373",
+		off: "#90a4ae",
+		standby: "#4fc3f7"
+	};
+	const errorColor = useMemo(() => {
+		if (pointingError < .5) return statusColors.normal;
+		if (pointingError < 2) return statusColors.caution;
+		return statusColors.critical;
+	}, [pointingError]);
+	const sizeStyle = compact ? {
+		width: "96px",
+		height: "96px"
+	} : {
+		width: "160px",
+		height: "160px"
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		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("div", {
+				style: {
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+					marginBottom: tokens.spacing.md
+				},
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+					style: {
+						fontWeight: tokens.typography.fontWeight.medium,
+						fontSize: tokens.typography.fontSize.md,
+						color: tokens.colors.text.primary,
+						margin: 0
+					},
+					children: "Navball"
+				}), /* @__PURE__ */ jsxs("p", {
+					style: {
+						fontSize: tokens.typography.fontSize.xs,
+						color: tokens.colors.text.tertiary,
+						margin: 0,
+						marginTop: tokens.spacing.xs
+					},
+					children: [
+						pointingMode ? pointingMode.charAt(0).toUpperCase() + pointingMode.slice(1).toLowerCase() : "Unknown",
+						" ",
+						"pointing"
+					]
+				})] }), /* @__PURE__ */ jsxs("span", {
+					style: {
+						fontSize: tokens.typography.fontSize.xs,
+						fontFamily: tokens.typography.fontFamily.mono,
+						fontVariantNumeric: "tabular-nums",
+						color: errorColor
+					},
+					children: [
+						"Δ ",
+						pointingError.toFixed(2),
+						"°"
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					justifyContent: "center"
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						position: "relative",
+						...sizeStyle
+					},
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								position: "absolute",
+								inset: 0,
+								borderRadius: "50%",
+								border: `4px solid ${tokens.colors.border.muted}`,
+								overflow: "hidden",
+								backgroundColor: tokens.colors.background.base
+							},
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										position: "absolute",
+										inset: 0,
+										transition: "transform 0.3s ease-out",
+										...horizonTransform
+									},
+									children: [/* @__PURE__ */ jsx("div", { style: {
+										position: "absolute",
+										inset: "-50%",
+										transformOrigin: "center",
+										background: "linear-gradient(to bottom, #1e3a5f 0%, #1e3a5f 48%, #78350f 52%, #78350f 100%)"
+									} }), /* @__PURE__ */ jsxs("svg", {
+										style: {
+											position: "absolute",
+											inset: 0,
+											width: "100%",
+											height: "100%",
+											opacity: .2
+										},
+										viewBox: "0 0 100 100",
+										children: [[
+											-30,
+											-15,
+											0,
+											15,
+											30
+										].map((y) => /* @__PURE__ */ jsx("line", {
+											x1: "0",
+											y1: 50 + y,
+											x2: "100",
+											y2: 50 + y,
+											stroke: "white",
+											strokeWidth: "0.5"
+										}, y)), /* @__PURE__ */ jsx("line", {
+											x1: "50",
+											y1: "0",
+											x2: "50",
+											y2: "100",
+											stroke: "white",
+											strokeWidth: "0.5"
+										})]
+									})]
+								}),
+								/* @__PURE__ */ jsx("div", {
+									style: {
+										position: "absolute",
+										width: "24px",
+										height: "24px",
+										transform: "translate(-50%, -50%)",
+										transition: "all 0.2s",
+										top: `${50 - pitch * .8}%`,
+										left: `${50 + yaw * .3}%`
+									},
+									children: /* @__PURE__ */ jsxs("svg", {
+										viewBox: "0 0 24 24",
+										style: {
+											width: "100%",
+											height: "100%"
+										},
+										children: [
+											/* @__PURE__ */ jsx("circle", {
+												cx: "12",
+												cy: "12",
+												r: "8",
+												fill: "none",
+												stroke: statusColors.normal,
+												strokeWidth: "2"
+											}),
+											/* @__PURE__ */ jsx("line", {
+												x1: "12",
+												y1: "4",
+												x2: "12",
+												y2: "8",
+												stroke: statusColors.normal,
+												strokeWidth: "2"
+											}),
+											/* @__PURE__ */ jsx("line", {
+												x1: "12",
+												y1: "16",
+												x2: "12",
+												y2: "20",
+												stroke: statusColors.normal,
+												strokeWidth: "2"
+											}),
+											/* @__PURE__ */ jsx("line", {
+												x1: "4",
+												y1: "12",
+												x2: "8",
+												y2: "12",
+												stroke: statusColors.normal,
+												strokeWidth: "2"
+											}),
+											/* @__PURE__ */ jsx("line", {
+												x1: "16",
+												y1: "12",
+												x2: "20",
+												y2: "12",
+												stroke: statusColors.normal,
+												strokeWidth: "2"
+											})
+										]
+									})
+								}),
+								attitude.targetDirection && /* @__PURE__ */ jsx("div", {
+									style: {
+										position: "absolute",
+										width: "20px",
+										height: "20px",
+										transform: "translate(-50%, -50%)",
+										top: "35%",
+										left: "65%"
+									},
+									children: /* @__PURE__ */ jsx("div", {
+										style: {
+											width: "100%",
+											height: "100%",
+											border: `2px solid ${tokens.colors.accent.primary}`,
+											borderRadius: "50%",
+											display: "flex",
+											alignItems: "center",
+											justifyContent: "center"
+										},
+										children: /* @__PURE__ */ jsx("div", { style: {
+											width: "6px",
+											height: "6px",
+											backgroundColor: tokens.colors.accent.primary,
+											borderRadius: "50%"
+										} })
+									})
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							style: {
+								position: "absolute",
+								inset: 0,
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+								pointerEvents: "none"
+							},
+							children: /* @__PURE__ */ jsx("div", {
+								style: {
+									color: statusColors.caution,
+									fontSize: tokens.typography.fontSize.xxl,
+									textShadow: `0 0 4px ${statusColors.caution}`
+								},
+								children: "⨁"
+							})
+						}),
+						/* @__PURE__ */ jsxs("svg", {
+							style: {
+								position: "absolute",
+								inset: 0,
+								width: "100%",
+								height: "100%",
+								pointerEvents: "none"
+							},
+							viewBox: "0 0 100 100",
+							children: [/* @__PURE__ */ jsx("path", {
+								d: "M 20 90 A 40 40 0 0 1 80 90",
+								fill: "none",
+								stroke: `${tokens.colors.text.tertiary}40`,
+								strokeWidth: "2"
+							}), /* @__PURE__ */ jsx("line", {
+								x1: "50",
+								y1: "85",
+								x2: 50 + Math.sin(yaw * Math.PI / 180) * 25,
+								y2: 90 - Math.cos(yaw * Math.PI / 180) * 10,
+								stroke: tokens.colors.status.caution,
+								strokeWidth: "2",
+								strokeLinecap: "round"
+							})]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					justifyContent: "space-between",
+					marginTop: tokens.spacing.md,
+					fontFamily: tokens.typography.fontFamily.mono,
+					fontSize: compact ? "10px" : tokens.typography.fontSize.xs,
+					fontVariantNumeric: "tabular-nums"
+				},
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						style: { color: statusColors.critical },
+						children: formatAngle(roll, "R")
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: { color: statusColors.normal },
+						children: formatAngle(pitch, "P")
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: { color: statusColors.standby },
+						children: formatAngle(yaw, "Y")
+					})
+				]
+			}),
+			!compact && targetName && /* @__PURE__ */ jsx("div", {
+				style: {
+					marginTop: tokens.spacing.md,
+					paddingTop: tokens.spacing.md,
+					borderTop: `1px solid ${tokens.colors.border.muted}`,
+					fontSize: tokens.typography.fontSize.xs
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						justifyContent: "space-between"
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						style: { color: tokens.colors.text.tertiary },
+						children: "Target"
+					}), /* @__PURE__ */ jsx("span", {
+						style: { color: safeAccentText(tokens.colors.accent.primary) },
+						children: targetName
+					})]
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { NavBallCard, NavBallCard as default };
+
+//# sourceMappingURL=NavBallCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavBallCard.js","names":[],"sources":["../../../src/react/visualizations/NavBallCard.tsx"],"sourcesContent":["/**\r\n * NavBallCard - Attitude visualization (KSP-style NavBall)\r\n *\r\n * Visual sphere showing spacecraft orientation with markers for\r\n * prograde, normal, radial vectors and target alignment.\r\n *\r\n * Astro UX Compliance:\r\n * - Uses official Astro status colors via theme tokens\r\n * - Sentence-case labels\r\n * - Tabular numbers for data\r\n * - Roboto/Roboto Mono typography\r\n * - 4px-based spacing\r\n */\r\n\r\nimport React, { useMemo } from \"react\";\r\nimport type { AttitudeData, PointingMode } from \"../types\";\r\nimport { useTheme } from \"../theme\";\r\nimport { safeAccentText, type StatusLevel } from \"../utils\";\r\n\r\nexport interface NavBallCardProps {\r\n  /** Attitude data from API */\r\n  attitude: AttitudeData;\r\n  /** Current pointing mode */\r\n  pointingMode?: PointingMode;\r\n  /** Target name for display */\r\n  targetName?: string;\r\n  /** Compact mode */\r\n  compact?: boolean;\r\n  /** Custom class name */\r\n  className?: string;\r\n}\r\n\r\nexport const NavBallCard: React.FC<NavBallCardProps> = ({\r\n  attitude,\r\n  pointingMode = \"nadir\",\r\n  targetName,\r\n  compact = false,\r\n  className = \"\",\r\n}) => {\r\n  const { tokens, theme } = 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  const { roll, pitch, yaw } = attitude.eulerAngles;\r\n  const pointingError = attitude.pointingError ?? 0;\r\n\r\n  // Calculate visual transforms\r\n  const horizonTransform = useMemo(() => {\r\n    const pitchClamp = Math.max(-45, Math.min(45, pitch));\r\n    const rollClamp = Math.max(-180, Math.min(180, roll));\r\n    return {\r\n      transform: `rotate(${rollClamp}deg) translateY(${pitchClamp * 1.5}%)`,\r\n    };\r\n  }, [pitch, roll]);\r\n\r\n  // Format angle for display (Astro: tabular numbers)\r\n  const formatAngle = (angle: number, prefix: string): string => {\r\n    const sign = angle >= 0 ? \"+\" : \"\";\r\n    return `${prefix}: ${sign}${angle.toFixed(1)}°`;\r\n  };\r\n\r\n  // Medium-soft status colors (readable, not too pale)\r\n  const statusColors: 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  const errorColor = useMemo(() => {\r\n    if (pointingError < 0.5) return statusColors.normal;\r\n    if (pointingError < 2) return statusColors.caution;\r\n    return statusColors.critical;\r\n  }, [pointingError]);\r\n\r\n  const sizeStyle: React.CSSProperties = compact\r\n    ? { width: \"96px\", height: \"96px\" }\r\n    : { width: \"160px\", height: \"160px\" };\r\n\r\n  // Astro UX compliant card styling (transparent theme: glass background)\r\n  const cardStyle: React.CSSProperties = {\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  return (\r\n    <div className={className} style={cardStyle}>\r\n      {!compact && (\r\n        <div\r\n          style={{\r\n            display: \"flex\",\r\n            justifyContent: \"space-between\",\r\n            alignItems: \"center\",\r\n            marginBottom: tokens.spacing.md,\r\n          }}\r\n        >\r\n          <div>\r\n            {/* Astro: Sentence-case labels */}\r\n            <h3\r\n              style={{\r\n                fontWeight: tokens.typography.fontWeight.medium,\r\n                fontSize: tokens.typography.fontSize.md,\r\n                color: tokens.colors.text.primary,\r\n                margin: 0,\r\n              }}\r\n            >\r\n              Navball\r\n            </h3>\r\n            <p\r\n              style={{\r\n                fontSize: tokens.typography.fontSize.xs,\r\n                color: tokens.colors.text.tertiary,\r\n                margin: 0,\r\n                marginTop: tokens.spacing.xs,\r\n              }}\r\n            >\r\n              {pointingMode\r\n                ? pointingMode.charAt(0).toUpperCase() +\r\n                  pointingMode.slice(1).toLowerCase()\r\n                : \"Unknown\"}{\" \"}\r\n              pointing\r\n            </p>\r\n          </div>\r\n          {/* Astro: Tabular numbers for data */}\r\n          <span\r\n            style={{\r\n              fontSize: tokens.typography.fontSize.xs,\r\n              fontFamily: tokens.typography.fontFamily.mono,\r\n              fontVariantNumeric: \"tabular-nums\",\r\n              color: errorColor,\r\n            }}\r\n          >\r\n            Δ {pointingError.toFixed(2)}°\r\n          </span>\r\n        </div>\r\n      )}\r\n\r\n      <div style={{ display: \"flex\", justifyContent: \"center\" }}>\r\n        <div style={{ position: \"relative\", ...sizeStyle }}>\r\n          {/* Outer ring */}\r\n          <div\r\n            style={{\r\n              position: \"absolute\",\r\n              inset: 0,\r\n              borderRadius: \"50%\",\r\n              border: `4px solid ${tokens.colors.border.muted}`,\r\n              overflow: \"hidden\",\r\n              backgroundColor: tokens.colors.background.base,\r\n            }}\r\n          >\r\n            {/* Horizon gradient (day/night split) */}\r\n            <div\r\n              style={{\r\n                position: \"absolute\",\r\n                inset: 0,\r\n                transition: \"transform 0.3s ease-out\",\r\n                ...horizonTransform,\r\n              }}\r\n            >\r\n              <div\r\n                style={{\r\n                  position: \"absolute\",\r\n                  inset: \"-50%\",\r\n                  transformOrigin: \"center\",\r\n                  background:\r\n                    \"linear-gradient(to bottom, #1e3a5f 0%, #1e3a5f 48%, #78350f 52%, #78350f 100%)\",\r\n                }}\r\n              />\r\n\r\n              {/* Grid lines */}\r\n              <svg\r\n                style={{\r\n                  position: \"absolute\",\r\n                  inset: 0,\r\n                  width: \"100%\",\r\n                  height: \"100%\",\r\n                  opacity: 0.2,\r\n                }}\r\n                viewBox=\"0 0 100 100\"\r\n              >\r\n                {[-30, -15, 0, 15, 30].map((y) => (\r\n                  <line\r\n                    key={y}\r\n                    x1=\"0\"\r\n                    y1={50 + y}\r\n                    x2=\"100\"\r\n                    y2={50 + y}\r\n                    stroke=\"white\"\r\n                    strokeWidth=\"0.5\"\r\n                  />\r\n                ))}\r\n                <line\r\n                  x1=\"50\"\r\n                  y1=\"0\"\r\n                  x2=\"50\"\r\n                  y2=\"100\"\r\n                  stroke=\"white\"\r\n                  strokeWidth=\"0.5\"\r\n                />\r\n              </svg>\r\n            </div>\r\n\r\n            {/* Prograde marker - uses Astro normal color */}\r\n            <div\r\n              style={{\r\n                position: \"absolute\",\r\n                width: \"24px\",\r\n                height: \"24px\",\r\n                transform: \"translate(-50%, -50%)\",\r\n                transition: \"all 0.2s\",\r\n                top: `${50 - pitch * 0.8}%`,\r\n                left: `${50 + yaw * 0.3}%`,\r\n              }}\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 24 24\"\r\n                style={{ width: \"100%\", height: \"100%\" }}\r\n              >\r\n                <circle\r\n                  cx=\"12\"\r\n                  cy=\"12\"\r\n                  r=\"8\"\r\n                  fill=\"none\"\r\n                  stroke={statusColors.normal}\r\n                  strokeWidth=\"2\"\r\n                />\r\n                <line\r\n                  x1=\"12\"\r\n                  y1=\"4\"\r\n                  x2=\"12\"\r\n                  y2=\"8\"\r\n                  stroke={statusColors.normal}\r\n                  strokeWidth=\"2\"\r\n                />\r\n                <line\r\n                  x1=\"12\"\r\n                  y1=\"16\"\r\n                  x2=\"12\"\r\n                  y2=\"20\"\r\n                  stroke={statusColors.normal}\r\n                  strokeWidth=\"2\"\r\n                />\r\n                <line\r\n                  x1=\"4\"\r\n                  y1=\"12\"\r\n                  x2=\"8\"\r\n                  y2=\"12\"\r\n                  stroke={statusColors.normal}\r\n                  strokeWidth=\"2\"\r\n                />\r\n                <line\r\n                  x1=\"16\"\r\n                  y1=\"12\"\r\n                  x2=\"20\"\r\n                  y2=\"12\"\r\n                  stroke={statusColors.normal}\r\n                  strokeWidth=\"2\"\r\n                />\r\n              </svg>\r\n            </div>\r\n\r\n            {/* Target marker (if aligned) */}\r\n            {attitude.targetDirection && (\r\n              <div\r\n                style={{\r\n                  position: \"absolute\",\r\n                  width: \"20px\",\r\n                  height: \"20px\",\r\n                  transform: \"translate(-50%, -50%)\",\r\n                  top: \"35%\",\r\n                  left: \"65%\",\r\n                }}\r\n              >\r\n                <div\r\n                  style={{\r\n                    width: \"100%\",\r\n                    height: \"100%\",\r\n                    border: `2px solid ${tokens.colors.accent.primary}`,\r\n                    borderRadius: \"50%\",\r\n                    display: \"flex\",\r\n                    alignItems: \"center\",\r\n                    justifyContent: \"center\",\r\n                  }}\r\n                >\r\n                  <div\r\n                    style={{\r\n                      width: \"6px\",\r\n                      height: \"6px\",\r\n                      backgroundColor: tokens.colors.accent.primary,\r\n                      borderRadius: \"50%\",\r\n                    }}\r\n                  />\r\n                </div>\r\n              </div>\r\n            )}\r\n          </div>\r\n\r\n          {/* Fixed crosshair (boresight) */}\r\n          <div\r\n            style={{\r\n              position: \"absolute\",\r\n              inset: 0,\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              justifyContent: \"center\",\r\n              pointerEvents: \"none\",\r\n            }}\r\n          >\r\n            <div\r\n              style={{\r\n                color: statusColors.caution,\r\n                fontSize: tokens.typography.fontSize.xxl,\r\n                textShadow: `0 0 4px ${statusColors.caution}`,\r\n              }}\r\n            >\r\n              ⨁\r\n            </div>\r\n          </div>\r\n\r\n          {/* Yaw indicator arc */}\r\n          <svg\r\n            style={{\r\n              position: \"absolute\",\r\n              inset: 0,\r\n              width: \"100%\",\r\n              height: \"100%\",\r\n              pointerEvents: \"none\",\r\n            }}\r\n            viewBox=\"0 0 100 100\"\r\n          >\r\n            <path\r\n              d=\"M 20 90 A 40 40 0 0 1 80 90\"\r\n              fill=\"none\"\r\n              stroke={`${tokens.colors.text.tertiary}40`}\r\n              strokeWidth=\"2\"\r\n            />\r\n            {/* Yaw needle */}\r\n            <line\r\n              x1=\"50\"\r\n              y1=\"85\"\r\n              x2={50 + Math.sin((yaw * Math.PI) / 180) * 25}\r\n              y2={90 - Math.cos((yaw * Math.PI) / 180) * 10}\r\n              stroke={tokens.colors.status.caution}\r\n              strokeWidth=\"2\"\r\n              strokeLinecap=\"round\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n\r\n      {/* Attitude readouts - Astro: tabular numbers */}\r\n      <div\r\n        style={{\r\n          display: \"flex\",\r\n          justifyContent: \"space-between\",\r\n          marginTop: tokens.spacing.md,\r\n          fontFamily: tokens.typography.fontFamily.mono,\r\n          fontSize: compact ? \"10px\" : tokens.typography.fontSize.xs,\r\n          fontVariantNumeric: \"tabular-nums\",\r\n        }}\r\n      >\r\n        <span style={{ color: statusColors.critical }}>\r\n          {formatAngle(roll, \"R\")}\r\n        </span>\r\n        <span style={{ color: statusColors.normal }}>\r\n          {formatAngle(pitch, \"P\")}\r\n        </span>\r\n        <span style={{ color: statusColors.standby }}>\r\n          {formatAngle(yaw, \"Y\")}\r\n        </span>\r\n      </div>\r\n\r\n      {/* Target info - Astro: Sentence-case */}\r\n      {!compact && targetName && (\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            fontSize: tokens.typography.fontSize.xs,\r\n          }}\r\n        >\r\n          <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\r\n            <span style={{ color: tokens.colors.text.tertiary }}>Target</span>\r\n            <span\r\n              style={{ color: safeAccentText(tokens.colors.accent.primary) }}\r\n            >\r\n              {targetName}\r\n            </span>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default NavBallCard;\r\n"],"mappings":"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"}