@zendir/ui 0.6.3 → 0.7.1

package/dist/react/visualizations/SensorFootprintCard.js

@@ -0,0 +1,392 @@
+import { useTheme } from "../theme/ThemeProvider.js";
+import { classNames } from "../utils/index.js";
+import { AstroIcon } from "../core/display/AstroIcon.js";
+import { memo, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/visualizations/SensorFootprintCard.tsx
+/**
+* @zendir/ui - SensorFootprintCard Component
+*
+* Camera/Sensor Field of View visualization showing ground footprint.
+*
+* Features:
+* - Full null-safety with graceful fallbacks
+* - Canvas-based footprint visualization
+* - Coverage area calculations
+* - Loading and empty states
+*/
+var SensorFootprintCard = memo(function SensorFootprintCard({ sensor, latitude, longitude, altitudeKm, headingDegrees = 0, compact = false, loading = 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 canvasRef = useRef(null);
+	const statusColors = useMemo(() => ({
+		standby: tokens.colors.status.standby,
+		off: tokens.colors.status.off,
+		caution: tokens.colors.status.caution
+	}), [tokens]);
+	const safeAltitude = altitudeKm ?? 400;
+	const footprint = useMemo(() => {
+		const fov = sensor?.fovDegrees ?? 30;
+		const alongFov = sensor?.alongTrackFovDegrees ?? fov;
+		const halfFovRad = fov / 2 * (Math.PI / 180);
+		const alongHalfFovRad = alongFov / 2 * (Math.PI / 180);
+		const crossTrackKm = 2 * safeAltitude * Math.tan(halfFovRad);
+		const alongTrackKm = 2 * safeAltitude * Math.tan(alongHalfFovRad);
+		return {
+			crossTrackKm,
+			alongTrackKm,
+			areaKm2: crossTrackKm * alongTrackKm,
+			swathWidthKm: crossTrackKm
+		};
+	}, [
+		sensor?.fovDegrees,
+		sensor?.alongTrackFovDegrees,
+		safeAltitude
+	]);
+	useEffect(() => {
+		if (loading || !sensor) return;
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+		const w = canvas.width;
+		const h = canvas.height;
+		ctx.fillStyle = tokens.colors.background.base;
+		ctx.fillRect(0, 0, w, h);
+		ctx.strokeStyle = tokens.colors.border.muted;
+		ctx.lineWidth = .5;
+		for (let x = 0; x <= w; x += w / 8) {
+			ctx.beginPath();
+			ctx.moveTo(x, 0);
+			ctx.lineTo(x, h);
+			ctx.stroke();
+		}
+		for (let y = 0; y <= h; y += h / 6) {
+			ctx.beginPath();
+			ctx.moveTo(0, y);
+			ctx.lineTo(w, y);
+			ctx.stroke();
+		}
+		const cx = w / 2;
+		const cy = h / 2;
+		const scaleKmPerPixel = 1e3 / Math.min(w, h);
+		const halfWidth = footprint.crossTrackKm / 2 / scaleKmPerPixel;
+		const halfHeight = footprint.alongTrackKm / 2 / scaleKmPerPixel;
+		ctx.save();
+		ctx.translate(cx, cy);
+		ctx.rotate(headingDegrees * Math.PI / 180);
+		ctx.fillStyle = sensor.isActive ? `${statusColors.standby}20` : `${statusColors.off}15`;
+		ctx.beginPath();
+		ctx.ellipse(0, 0, halfWidth, halfHeight, 0, 0, 2 * Math.PI);
+		ctx.fill();
+		ctx.strokeStyle = sensor.isActive ? statusColors.standby : statusColors.off;
+		ctx.lineWidth = 2;
+		ctx.setLineDash(sensor.isActive ? [] : [5, 5]);
+		ctx.stroke();
+		ctx.setLineDash([]);
+		ctx.strokeStyle = `${tokens.colors.text.primary}40`;
+		ctx.lineWidth = 1;
+		ctx.beginPath();
+		ctx.moveTo(-halfWidth, 0);
+		ctx.lineTo(halfWidth, 0);
+		ctx.stroke();
+		ctx.beginPath();
+		ctx.moveTo(0, -halfHeight);
+		ctx.lineTo(0, halfHeight);
+		ctx.stroke();
+		ctx.restore();
+		ctx.fillStyle = tokens.colors.status.caution;
+		ctx.beginPath();
+		ctx.arc(cx, cy, 4, 0, 2 * Math.PI);
+		ctx.fill();
+		ctx.save();
+		ctx.translate(cx, cy);
+		ctx.rotate(headingDegrees * Math.PI / 180);
+		ctx.fillStyle = tokens.colors.status.caution;
+		ctx.beginPath();
+		ctx.moveTo(0, -8);
+		ctx.lineTo(3, -4);
+		ctx.lineTo(-3, -4);
+		ctx.closePath();
+		ctx.fill();
+		ctx.restore();
+		const scaleBarLength = 100;
+		const scaleBarPixels = scaleBarLength / scaleKmPerPixel;
+		ctx.fillStyle = tokens.colors.text.tertiary;
+		ctx.fillRect(10, h - 20, scaleBarPixels, 3);
+		ctx.font = "10px monospace";
+		ctx.fillText(`${scaleBarLength} km`, 10, h - 8);
+	}, [
+		loading,
+		sensor,
+		tokens,
+		footprint,
+		headingDegrees,
+		statusColors
+	]);
+	if (loading) return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-sensor-footprint-card", "loading", className),
+		role: "article",
+		"aria-busy": "true",
+		"aria-label": "Loading sensor data",
+		style: {
+			backgroundColor: cardBg,
+			...cardGlass,
+			border: "none",
+			borderRadius: tokens.borderRadius.lg,
+			padding: tokens.spacing.md,
+			minHeight: 200
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				justifyContent: "space-between",
+				marginBottom: 16
+			},
+			children: [/* @__PURE__ */ jsx("div", { style: {
+				height: 24,
+				width: "50%",
+				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
+			} })]
+		}), /* @__PURE__ */ jsx("div", { style: {
+			height: 120,
+			backgroundColor: "rgba(255,255,255,0.06)",
+			borderRadius: 8
+		} })]
+	});
+	if (!sensor) return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-sensor-footprint-card", "empty", className),
+		role: "article",
+		"aria-label": "No sensor 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(AstroIcon, {
+			name: "camera",
+			size: "normal",
+			label: "",
+			style: { opacity: .5 }
+		}), /* @__PURE__ */ jsx("p", {
+			style: {
+				margin: "8px 0 0 0",
+				fontSize: tokens.typography.body[2].fontSize
+			},
+			children: "No sensor data available"
+		})]
+	});
+	const getSensorIconName = (type) => {
+		switch (type) {
+			case "camera": return "camera";
+			case "radar": return "antenna";
+			case "lidar": return "flash-on";
+			case "spectrometer": return "filter";
+			default: return "image";
+		}
+	};
+	const formatArea = (km2) => {
+		if (km2 >= 1e6) return `${(km2 / 1e6).toFixed(1)}M km²`;
+		if (km2 >= 1e3) return `${(km2 / 1e3).toFixed(1)}k km²`;
+		return `${km2.toFixed(0)} km²`;
+	};
+	const canvasSize = compact ? 120 : 180;
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		style: {
+			backgroundColor: cardBg,
+			...isTransparentTheme && {
+				backdropFilter: "blur(12px)",
+				WebkitBackdropFilter: "blur(12px)"
+			},
+			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",
+					alignItems: "center",
+					justifyContent: "space-between",
+					marginBottom: tokens.spacing.md
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: tokens.spacing.sm
+					},
+					children: [/* @__PURE__ */ jsx(AstroIcon, {
+						name: getSensorIconName(sensor.type),
+						size: "small",
+						label: sensor.type,
+						style: { fontSize: tokens.typography.fontSize.lg }
+					}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+						style: {
+							fontWeight: tokens.typography.fontWeight.semibold,
+							color: tokens.colors.text.primary,
+							fontSize: tokens.typography.fontSize.md,
+							margin: 0
+						},
+						children: sensor.name
+					}), /* @__PURE__ */ jsxs("p", {
+						style: {
+							color: tokens.colors.text.tertiary,
+							fontSize: tokens.typography.fontSize.xs,
+							margin: 0,
+							marginTop: tokens.spacing.xs
+						},
+						children: [
+							"FOV: ",
+							sensor.fovDegrees,
+							"°"
+						]
+					})] })]
+				}), /* @__PURE__ */ jsx("span", {
+					style: {
+						padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+						borderRadius: tokens.borderRadius.sm,
+						fontSize: tokens.typography.fontSize.xxs,
+						fontWeight: tokens.typography.fontWeight.bold,
+						letterSpacing: "0.5px",
+						backgroundColor: sensor.isActive ? `${statusColors.standby}20` : `${statusColors.off}20`,
+						color: sensor.isActive ? statusColors.standby : statusColors.off
+					},
+					children: sensor.isActive ? "Active" : "Standby"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					justifyContent: "center"
+				},
+				children: /* @__PURE__ */ jsx("canvas", {
+					ref: canvasRef,
+					width: canvasSize,
+					height: canvasSize,
+					style: { borderRadius: tokens.borderRadius.md }
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "grid",
+					gridTemplateColumns: "repeat(2, 1fr)",
+					gap: tokens.spacing.sm,
+					marginTop: tokens.spacing.md,
+					fontSize: compact ? "10px" : tokens.typography.fontSize.xs
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						backgroundColor: tokens.colors.background.base,
+						borderRadius: tokens.borderRadius.md,
+						padding: tokens.spacing.sm,
+						textAlign: "center"
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						style: {
+							color: statusColors.standby,
+							fontWeight: tokens.typography.fontWeight.bold,
+							fontFamily: tokens.typography.fontFamily.mono,
+							fontVariantNumeric: "tabular-nums"
+						},
+						children: [footprint.swathWidthKm.toFixed(0), " km"]
+					}), /* @__PURE__ */ jsx("div", {
+						style: { color: tokens.colors.text.tertiary },
+						children: "Swath width"
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						backgroundColor: tokens.colors.background.base,
+						borderRadius: tokens.borderRadius.md,
+						padding: tokens.spacing.sm,
+						textAlign: "center"
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							color: statusColors.standby,
+							fontWeight: tokens.typography.fontWeight.bold,
+							fontFamily: tokens.typography.fontFamily.mono,
+							fontVariantNumeric: "tabular-nums"
+						},
+						children: formatArea(footprint.areaKm2)
+					}), /* @__PURE__ */ jsx("div", {
+						style: { color: tokens.colors.text.tertiary },
+						children: "Coverage"
+					})]
+				})]
+			}),
+			!compact && /* @__PURE__ */ jsxs("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: "Nadir point"
+					}), /* @__PURE__ */ jsxs("span", {
+						style: {
+							fontFamily: tokens.typography.fontFamily.mono,
+							color: tokens.colors.text.secondary,
+							fontVariantNumeric: "tabular-nums"
+						},
+						children: [
+							Math.abs(latitude ?? 0).toFixed(2),
+							"°",
+							(latitude ?? 0) >= 0 ? "N" : "S",
+							",",
+							Math.abs(longitude ?? 0).toFixed(2),
+							"°",
+							(longitude ?? 0) >= 0 ? "E" : "W"
+						]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						justifyContent: "space-between",
+						marginTop: tokens.spacing.xs
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						style: { color: tokens.colors.text.tertiary },
+						children: "Altitude"
+					}), /* @__PURE__ */ jsxs("span", {
+						style: {
+							fontFamily: tokens.typography.fontFamily.mono,
+							color: tokens.colors.text.secondary,
+							fontVariantNumeric: "tabular-nums"
+						},
+						children: [(altitudeKm ?? 0).toFixed(1), " km"]
+					})]
+				})]
+			})
+		]
+	});
+});
+//#endregion
+export { SensorFootprintCard };
+
+//# sourceMappingURL=SensorFootprintCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SensorFootprintCard.js","names":[],"sources":["../../../src/react/visualizations/SensorFootprintCard.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - SensorFootprintCard Component\r\n *\r\n * Camera/Sensor Field of View visualization showing ground footprint.\r\n *\r\n * Features:\r\n * - Full null-safety with graceful fallbacks\r\n * - Canvas-based footprint visualization\r\n * - Coverage area calculations\r\n * - Loading and empty states\r\n */\r\n\r\nimport React, { memo, useMemo, useRef, useEffect } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport { AstroIcon, type AstroIconName } from \"../core/display/AstroIcon\";\r\nimport { classNames } from \"../utils\";\r\n\r\nexport interface FootprintSensorConfig {\r\n  id: string;\r\n  name: string;\r\n  /** Field of view in degrees (cross-track) */\r\n  fovDegrees: number;\r\n  /** Along-track field of view in degrees */\r\n  alongTrackFovDegrees?: number;\r\n  /** Sensor type */\r\n  type: \"camera\" | \"radar\" | \"lidar\" | \"spectrometer\" | string;\r\n  /** Whether sensor is active */\r\n  isActive: boolean;\r\n}\r\n\r\nexport interface SensorFootprintCardProps {\r\n  /** Sensor configuration */\r\n  sensor?: FootprintSensorConfig;\r\n  /** Current spacecraft latitude */\r\n  latitude?: number;\r\n  /** Current spacecraft longitude */\r\n  longitude?: number;\r\n  /** Current altitude in km */\r\n  altitudeKm?: number;\r\n  /** Current heading/track angle in degrees */\r\n  headingDegrees?: number;\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\nexport const SensorFootprintCard = memo(function SensorFootprintCard({\r\n  sensor,\r\n  latitude,\r\n  longitude,\r\n  altitudeKm,\r\n  headingDegrees = 0,\r\n  compact = false,\r\n  loading = false,\r\n  className = \"\",\r\n}: SensorFootprintCardProps): React.ReactElement {\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  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 canvasRef = useRef<HTMLCanvasElement>(null);\r\n  const statusColors = useMemo(\r\n    () => ({\r\n      standby: tokens.colors.status.standby,\r\n      off: tokens.colors.status.off,\r\n      caution: tokens.colors.status.caution,\r\n    }),\r\n    [tokens],\r\n  );\r\n\r\n  const safeAltitude = altitudeKm ?? 400;\r\n  const footprint = useMemo(() => {\r\n    const fov = sensor?.fovDegrees ?? 30;\r\n    const alongFov = sensor?.alongTrackFovDegrees ?? fov;\r\n    const halfFovRad = (fov / 2) * (Math.PI / 180);\r\n    const alongHalfFovRad = (alongFov / 2) * (Math.PI / 180);\r\n    const crossTrackKm = 2 * safeAltitude * Math.tan(halfFovRad);\r\n    const alongTrackKm = 2 * safeAltitude * Math.tan(alongHalfFovRad);\r\n    const areaKm2 = crossTrackKm * alongTrackKm;\r\n    const swathWidthKm = crossTrackKm;\r\n    return { crossTrackKm, alongTrackKm, areaKm2, swathWidthKm };\r\n  }, [sensor?.fovDegrees, sensor?.alongTrackFovDegrees, safeAltitude]);\r\n\r\n  useEffect(() => {\r\n    if (loading || !sensor) return;\r\n    const canvas = canvasRef.current;\r\n    if (!canvas) return;\r\n    const ctx = canvas.getContext(\"2d\");\r\n    if (!ctx) return;\r\n    const w = canvas.width;\r\n    const h = canvas.height;\r\n    ctx.fillStyle = tokens.colors.background.base;\r\n    ctx.fillRect(0, 0, w, h);\r\n    ctx.strokeStyle = tokens.colors.border.muted;\r\n    ctx.lineWidth = 0.5;\r\n    for (let x = 0; x <= w; x += w / 8) {\r\n      ctx.beginPath();\r\n      ctx.moveTo(x, 0);\r\n      ctx.lineTo(x, h);\r\n      ctx.stroke();\r\n    }\r\n    for (let y = 0; y <= h; y += h / 6) {\r\n      ctx.beginPath();\r\n      ctx.moveTo(0, y);\r\n      ctx.lineTo(w, y);\r\n      ctx.stroke();\r\n    }\r\n    const cx = w / 2;\r\n    const cy = h / 2;\r\n    const scaleKmPerPixel = 1000 / Math.min(w, h);\r\n    const halfWidth = footprint.crossTrackKm / 2 / scaleKmPerPixel;\r\n    const halfHeight = footprint.alongTrackKm / 2 / scaleKmPerPixel;\r\n    ctx.save();\r\n    ctx.translate(cx, cy);\r\n    ctx.rotate((headingDegrees * Math.PI) / 180);\r\n    ctx.fillStyle = sensor.isActive\r\n      ? `${statusColors.standby}20`\r\n      : `${statusColors.off}15`;\r\n    ctx.beginPath();\r\n    ctx.ellipse(0, 0, halfWidth, halfHeight, 0, 0, 2 * Math.PI);\r\n    ctx.fill();\r\n    ctx.strokeStyle = sensor.isActive ? statusColors.standby : statusColors.off;\r\n    ctx.lineWidth = 2;\r\n    ctx.setLineDash(sensor.isActive ? [] : [5, 5]);\r\n    ctx.stroke();\r\n    ctx.setLineDash([]);\r\n    ctx.strokeStyle = `${tokens.colors.text.primary}40`;\r\n    ctx.lineWidth = 1;\r\n    ctx.beginPath();\r\n    ctx.moveTo(-halfWidth, 0);\r\n    ctx.lineTo(halfWidth, 0);\r\n    ctx.stroke();\r\n    ctx.beginPath();\r\n    ctx.moveTo(0, -halfHeight);\r\n    ctx.lineTo(0, halfHeight);\r\n    ctx.stroke();\r\n    ctx.restore();\r\n    ctx.fillStyle = tokens.colors.status.caution;\r\n    ctx.beginPath();\r\n    ctx.arc(cx, cy, 4, 0, 2 * Math.PI);\r\n    ctx.fill();\r\n    ctx.save();\r\n    ctx.translate(cx, cy);\r\n    ctx.rotate((headingDegrees * Math.PI) / 180);\r\n    ctx.fillStyle = tokens.colors.status.caution;\r\n    ctx.beginPath();\r\n    ctx.moveTo(0, -8);\r\n    ctx.lineTo(3, -4);\r\n    ctx.lineTo(-3, -4);\r\n    ctx.closePath();\r\n    ctx.fill();\r\n    ctx.restore();\r\n    const scaleBarLength = 100;\r\n    const scaleBarPixels = scaleBarLength / scaleKmPerPixel;\r\n    ctx.fillStyle = tokens.colors.text.tertiary;\r\n    ctx.fillRect(10, h - 20, scaleBarPixels, 3);\r\n    ctx.font = \"10px monospace\";\r\n    ctx.fillText(`${scaleBarLength} km`, 10, h - 8);\r\n  }, [loading, sensor, tokens, footprint, headingDegrees, statusColors]);\r\n\r\n  // Loading state\r\n  if (loading) {\r\n    return (\r\n      <div\r\n        className={classNames(\r\n          \"zendir-sensor-footprint-card\",\r\n          \"loading\",\r\n          className,\r\n        )}\r\n        role=\"article\"\r\n        aria-busy=\"true\"\r\n        aria-label=\"Loading sensor 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.md,\r\n          minHeight: 200,\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: \"50%\",\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        <div\r\n          style={{\r\n            height: 120,\r\n            backgroundColor: \"rgba(255,255,255,0.06)\",\r\n            borderRadius: 8,\r\n          }}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Empty state\r\n  if (!sensor) {\r\n    return (\r\n      <div\r\n        className={classNames(\r\n          \"zendir-sensor-footprint-card\",\r\n          \"empty\",\r\n          className,\r\n        )}\r\n        role=\"article\"\r\n        aria-label=\"No sensor 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        <AstroIcon\r\n          name=\"camera\"\r\n          size=\"normal\"\r\n          label=\"\"\r\n          style={{ opacity: 0.5 }}\r\n        />\r\n        <p\r\n          style={{\r\n            margin: \"8px 0 0 0\",\r\n            fontSize: tokens.typography.body[2].fontSize,\r\n          }}\r\n        >\r\n          No sensor data available\r\n        </p>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Sensor type icon (AstroIcon)\r\n  const getSensorIconName = (type: string): AstroIconName => {\r\n    switch (type) {\r\n      case \"camera\":\r\n        return \"camera\";\r\n      case \"radar\":\r\n        return \"antenna\";\r\n      case \"lidar\":\r\n        return \"flash-on\";\r\n      case \"spectrometer\":\r\n        return \"filter\";\r\n      default:\r\n        return \"image\";\r\n    }\r\n  };\r\n\r\n  // Format area (Astro: tabular numbers)\r\n  const formatArea = (km2: number): string => {\r\n    if (km2 >= 1e6) return `${(km2 / 1e6).toFixed(1)}M km²`;\r\n    if (km2 >= 1e3) return `${(km2 / 1e3).toFixed(1)}k km²`;\r\n    return `${km2.toFixed(0)} km²`;\r\n  };\r\n\r\n  const canvasSize = compact ? 120 : 180;\r\n\r\n  // Astro UX compliant card styling\r\n  const cardStyle: React.CSSProperties = {\r\n    backgroundColor: cardBg,\r\n    ...(isTransparentTheme && {\r\n      backdropFilter: \"blur(12px)\" as const,\r\n      WebkitBackdropFilter: \"blur(12px)\" as const,\r\n    }),\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            alignItems: \"center\",\r\n            justifyContent: \"space-between\",\r\n            marginBottom: tokens.spacing.md,\r\n          }}\r\n        >\r\n          <div\r\n            style={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: tokens.spacing.sm,\r\n            }}\r\n          >\r\n            <AstroIcon\r\n              name={getSensorIconName(sensor.type)}\r\n              size=\"small\"\r\n              label={sensor.type}\r\n              style={{ fontSize: tokens.typography.fontSize.lg }}\r\n            />\r\n            <div>\r\n              {/* Astro: Sentence-case labels */}\r\n              <h3\r\n                style={{\r\n                  fontWeight: tokens.typography.fontWeight.semibold,\r\n                  color: tokens.colors.text.primary,\r\n                  fontSize: tokens.typography.fontSize.md,\r\n                  margin: 0,\r\n                }}\r\n              >\r\n                {sensor.name}\r\n              </h3>\r\n              <p\r\n                style={{\r\n                  color: tokens.colors.text.tertiary,\r\n                  fontSize: tokens.typography.fontSize.xs,\r\n                  margin: 0,\r\n                  marginTop: tokens.spacing.xs,\r\n                }}\r\n              >\r\n                FOV: {sensor.fovDegrees}°\r\n              </p>\r\n            </div>\r\n          </div>\r\n          {/* Status badge - Astro style (sentence case per Tier 3) */}\r\n          <span\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              letterSpacing: \"0.5px\",\r\n              backgroundColor: sensor.isActive\r\n                ? `${statusColors.standby}20`\r\n                : `${statusColors.off}20`,\r\n              color: sensor.isActive ? statusColors.standby : statusColors.off,\r\n            }}\r\n          >\r\n            {sensor.isActive ? \"Active\" : \"Standby\"}\r\n          </span>\r\n        </div>\r\n      )}\r\n\r\n      {/* Canvas visualization */}\r\n      <div style={{ display: \"flex\", justifyContent: \"center\" }}>\r\n        <canvas\r\n          ref={canvasRef}\r\n          width={canvasSize}\r\n          height={canvasSize}\r\n          style={{ borderRadius: tokens.borderRadius.md }}\r\n        />\r\n      </div>\r\n\r\n      {/* Metrics - Astro: Sentence-case, tabular numbers */}\r\n      <div\r\n        style={{\r\n          display: \"grid\",\r\n          gridTemplateColumns: \"repeat(2, 1fr)\",\r\n          gap: tokens.spacing.sm,\r\n          marginTop: tokens.spacing.md,\r\n          fontSize: compact ? \"10px\" : tokens.typography.fontSize.xs,\r\n        }}\r\n      >\r\n        <div\r\n          style={{\r\n            backgroundColor: tokens.colors.background.base,\r\n            borderRadius: tokens.borderRadius.md,\r\n            padding: tokens.spacing.sm,\r\n            textAlign: \"center\",\r\n          }}\r\n        >\r\n          <div\r\n            style={{\r\n              color: statusColors.standby,\r\n              fontWeight: tokens.typography.fontWeight.bold,\r\n              fontFamily: tokens.typography.fontFamily.mono,\r\n              fontVariantNumeric: \"tabular-nums\",\r\n            }}\r\n          >\r\n            {footprint.swathWidthKm.toFixed(0)} km\r\n          </div>\r\n          <div style={{ color: tokens.colors.text.tertiary }}>Swath width</div>\r\n        </div>\r\n        <div\r\n          style={{\r\n            backgroundColor: tokens.colors.background.base,\r\n            borderRadius: tokens.borderRadius.md,\r\n            padding: tokens.spacing.sm,\r\n            textAlign: \"center\",\r\n          }}\r\n        >\r\n          <div\r\n            style={{\r\n              color: statusColors.standby,\r\n              fontWeight: tokens.typography.fontWeight.bold,\r\n              fontFamily: tokens.typography.fontFamily.mono,\r\n              fontVariantNumeric: \"tabular-nums\",\r\n            }}\r\n          >\r\n            {formatArea(footprint.areaKm2)}\r\n          </div>\r\n          <div style={{ color: tokens.colors.text.tertiary }}>Coverage</div>\r\n        </div>\r\n      </div>\r\n\r\n      {/* Position info - Astro: Sentence-case, tabular numbers */}\r\n      {!compact && (\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 }}>\r\n              Nadir point\r\n            </span>\r\n            <span\r\n              style={{\r\n                fontFamily: tokens.typography.fontFamily.mono,\r\n                color: tokens.colors.text.secondary,\r\n                fontVariantNumeric: \"tabular-nums\",\r\n              }}\r\n            >\r\n              {Math.abs(latitude ?? 0).toFixed(2)}°\r\n              {(latitude ?? 0) >= 0 ? \"N\" : \"S\"},\r\n              {Math.abs(longitude ?? 0).toFixed(2)}°\r\n              {(longitude ?? 0) >= 0 ? \"E\" : \"W\"}\r\n            </span>\r\n          </div>\r\n          <div\r\n            style={{\r\n              display: \"flex\",\r\n              justifyContent: \"space-between\",\r\n              marginTop: tokens.spacing.xs,\r\n            }}\r\n          >\r\n            <span style={{ color: tokens.colors.text.tertiary }}>Altitude</span>\r\n            <span\r\n              style={{\r\n                fontFamily: tokens.typography.fontFamily.mono,\r\n                color: tokens.colors.text.secondary,\r\n                fontVariantNumeric: \"tabular-nums\",\r\n              }}\r\n            >\r\n              {(altitudeKm ?? 0).toFixed(1)} km\r\n            </span>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n"],"mappings":"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"}