@zendir/ui 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"PropulsionCard.js","sources":["../../../src/react/visualizations/PropulsionCard.tsx"],"sourcesContent":["/**\n * @zendir/ui - PropulsionCard Component\n * \n * Delta-V Budget and Fuel Status visualization.\n * Shows propellant levels and remaining delta-V capability.\n * \n * Features:\n * - Full null-safety with graceful fallbacks\n * - Tank level visualization\n * - Maneuver feasibility checks\n * - Loading and empty states\n */\n\nimport React, { memo, useMemo } from 'react';\nimport { useTheme } from '../theme';\nimport { AstroIcon, type AstroIconName } from '../core/AstroIcon';\nimport {\n  safeNumber,\n  formatPercentage,\n  classNames,\n  type StatusLevel,\n} from '../utils';\n\nexport interface PropulsionTankData {\n  id: string;\n  name: string;\n  /** Current mass in kg */\n  currentMassKg: number;\n  /** Maximum capacity in kg */\n  maxMassKg: number;\n  /** Propellant type */\n  type: 'hydrazine' | 'xenon' | 'cold_gas' | 'bipropellant' | string;\n}\n\nexport interface ManeuverFeasibility {\n  name: string;\n  requiredDeltaVMs: number;\n  feasible: boolean;\n}\n\nexport interface PropulsionCardProps {\n  /** Propellant tanks data */\n  tanks?: PropulsionTankData[];\n  /** Remaining delta-V in m/s */\n  remainingDeltaVMs?: number;\n  /** Total delta-V at full tanks in m/s */\n  totalDeltaVMs?: number;\n  /** Specific impulse in seconds */\n  ispSeconds?: number;\n  /** Common maneuvers with feasibility */\n  maneuvers?: ManeuverFeasibility[];\n  /** Compact mode */\n  compact?: boolean;\n  /** Loading state */\n  loading?: boolean;\n  /** Custom class name */\n  className?: string;\n}\n\n/**\n * Get status level based on percentage\n */\nfunction getPercentageStatus(pct: number | undefined): StatusLevel {\n  if (pct === undefined || !Number.isFinite(pct)) return 'off';\n  if (pct > 50) return 'normal';\n  if (pct > 20) return 'caution';\n  if (pct > 5) return 'serious';\n  return 'critical';\n}\n\nexport const PropulsionCard = memo(function PropulsionCard({\n  tanks,\n  remainingDeltaVMs,\n  totalDeltaVMs,\n  ispSeconds,\n  maneuvers = [],\n  compact = false,\n  loading = false,\n  className = '',\n}: PropulsionCardProps): 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  const transitionDuration = prefersReducedMotion ? '0ms' : '300ms';\n  // Medium-soft status colors (readable, not too pale)\n  const statusColors: Record<StatusLevel, string> = {\n    normal: '#6ed86e',\n    caution: '#ffd54f',\n    serious: '#ffa726',\n    critical: '#e57373',\n    off: '#90a4ae',\n    standby: '#4fc3f7',\n  };\n\n  // Calculate overall propellant percentage\n  const _overallPercentage = useMemo(() => {\n    if (!tanks || tanks.length === 0) return 0;\n    const totalCurrent = tanks.reduce((sum, t) => sum + (t.currentMassKg ?? 0), 0);\n    const totalMax = tanks.reduce((sum, t) => sum + (t.maxMassKg ?? 0), 0);\n    return totalMax > 0 ? (totalCurrent / totalMax) * 100 : 0;\n  }, [tanks]);\n\n  // Delta-V percentage\n  const deltaVPercentage = useMemo(() => {\n    const total = totalDeltaVMs ?? 0;\n    const remaining = remainingDeltaVMs ?? 0;\n    return total > 0 ? (remaining / total) * 100 : 0;\n  }, [remainingDeltaVMs, totalDeltaVMs]);\n\n  const deltaVStatus = getPercentageStatus(deltaVPercentage);\n  const deltaVColor = statusColors[deltaVStatus] || statusColors.off;\n\n  // Get color based on percentage\n  const getPercentageColor = (pct: number | undefined): string => {\n    const status = getPercentageStatus(pct);\n    return statusColors[status as keyof typeof statusColors] || statusColors.off;\n  };\n\n  // Loading state\n  if (loading) {\n    return (\n      <div\n        className={classNames('zendir-propulsion-card', 'loading', className)}\n        role=\"article\"\n        aria-busy=\"true\"\n        aria-label=\"Loading propulsion data\"\n        style={{\n          backgroundColor: cardBg,\n          ...cardGlass,\n          border: 'none',\n          borderRadius: tokens.borderRadius.lg,\n          padding: tokens.spacing.md,\n          minHeight: 180,\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: 80, backgroundColor: 'rgba(255,255,255,0.1)', borderRadius: 4 }} />\n        </div>\n        <div style={{ height: 12, backgroundColor: 'rgba(255,255,255,0.06)', borderRadius: 4, marginBottom: 16 }} />\n        {[1, 2].map((i) => (\n          <div key={i} style={{ height: 32, backgroundColor: 'rgba(255,255,255,0.06)', borderRadius: 4, marginBottom: 8 }} />\n        ))}\n      </div>\n    );\n  }\n\n  // Empty state\n  if (!tanks || tanks.length === 0) {\n    return (\n      <div\n        className={classNames('zendir-propulsion-card', 'empty', className)}\n        role=\"article\"\n        aria-label=\"No propulsion 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        <AstroIcon name=\"launch\" size=\"normal\" label=\"\" style={{ opacity: 0.5 }} />\n        <p style={{ margin: '8px 0 0 0', fontSize: tokens.typography.body[2].fontSize }}>No propulsion data available</p>\n      </div>\n    );\n  }\n\n  // Tank type icons (AstroIcon)\n  const getTankIconName = (type: string): AstroIconName => {\n    switch (type) {\n      case 'hydrazine': return 'propulsion-power';\n      case 'xenon': return 'cloud';\n      case 'cold_gas': return 'ac-unit';\n      case 'bipropellant': return 'whatshot';\n      default: return 'propulsion-power';\n    }\n  };\n\n  // Astro UX compliant card styling (transparent theme: glass background)\n  const cardStyle: React.CSSProperties = {\n    backgroundColor: cardBg,\n    ...(isTransparentTheme && { backdropFilter: 'blur(12px)' as const, WebkitBackdropFilter: 'blur(12px)' as const }),\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  // Sentence-case label style (Astro guideline)\n  const labelStyle: React.CSSProperties = {\n    color: tokens.colors.text.tertiary,\n    fontSize: tokens.typography.fontSize.xs,\n    fontWeight: tokens.typography.fontWeight.medium,\n  };\n\n  return (\n    <article\n      className={classNames('zendir-propulsion-card', className)}\n      aria-label=\"Propulsion system status\"\n      style={cardStyle}\n    >\n      {!compact && (\n        <div style={{ \n          display: 'flex', \n          justifyContent: 'space-between', \n          alignItems: 'center', \n          marginBottom: tokens.spacing.md,\n        }}>\n          <div>\n            {/* Astro: Sentence-case labels */}\n            <h3 style={{ \n              fontWeight: tokens.typography.fontWeight.medium, \n              fontSize: tokens.typography.fontSize.md, \n              color: tokens.colors.text.primary, \n              margin: 0,\n            }}>\n              Propulsion\n            </h3>\n            <p style={{ \n              fontSize: tokens.typography.fontSize.xs, \n              color: tokens.colors.text.tertiary, \n              margin: 0,\n              marginTop: tokens.spacing.xs,\n            }}>\n              {ispSeconds ? `Isp: ${ispSeconds}s` : 'Delta-V budget'}\n            </p>\n          </div>\n          {/* Astro: Tabular numbers for data */}\n          <span style={{ \n            fontSize: tokens.typography.fontSize.lg, \n            fontWeight: tokens.typography.fontWeight.bold,\n            fontFamily: tokens.typography.fontFamily.mono, \n            fontVariantNumeric: 'tabular-nums',\n            color: deltaVColor,\n          }}>\n            {safeNumber(remainingDeltaVMs, 0)} m/s\n          </span>\n        </div>\n      )}\n\n      {/* Delta-V gauge */}\n      <div style={{ marginBottom: tokens.spacing.md }}>\n        <div style={{ \n          display: 'flex', \n          justifyContent: 'space-between', \n          fontSize: tokens.typography.fontSize.xs, \n          marginBottom: tokens.spacing.xs,\n        }}>\n          <span style={labelStyle}>Remaining ΔV</span>\n          <span style={{ \n            fontFamily: tokens.typography.fontFamily.mono,\n            color: deltaVColor,\n          }}>\n            {formatPercentage(deltaVPercentage, false, 0)}\n          </span>\n        </div>\n        <div style={{\n          height: '12px',\n          backgroundColor: tokens.colors.border.muted,\n          borderRadius: tokens.borderRadius.sm,\n          overflow: 'hidden',\n        }}>\n          <div style={{\n            height: '100%',\n            width: `${Math.min(100, Math.max(0, deltaVPercentage))}%`,\n            backgroundColor: deltaVColor,\n            transition: `width ${transitionDuration} ease`,\n            borderRadius: tokens.borderRadius.sm,\n          }} />\n        </div>\n        <div style={{ \n          display: 'flex', \n          justifyContent: 'space-between', \n          fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\n          color: tokens.colors.text.tertiary, \n          marginTop: tokens.spacing.xs,\n        }}>\n          <span>0</span>\n          <span>{safeNumber(totalDeltaVMs, 0)} m/s</span>\n        </div>\n      </div>\n\n      {/* Tank levels */}\n      <div style={{ display: 'flex', flexDirection: 'column', gap: tokens.spacing.sm, marginBottom: tokens.spacing.md }}>\n        {tanks.map((tank) => {\n          const current = tank.currentMassKg ?? 0;\n          const max = tank.maxMassKg ?? 1;\n          const pct = max > 0 ? (current / max) * 100 : 0;\n          return (\n            <div key={tank.id} style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm }}>\n              <AstroIcon name={getTankIconName(tank.type)} size=\"small\" label={tank.type} style={{ fontSize: tokens.typography.fontSize.sm }} />\n              <div style={{ flex: 1 }}>\n                <div style={{ \n                  display: 'flex', \n                  justifyContent: 'space-between', \n                  fontSize: tokens.typography.fontSize.xs, // 0.75rem / 12px (AstroUXDS body3)\n                  marginBottom: '2px',\n                }}>\n                  <span style={{ color: tokens.colors.text.secondary }}>{tank.name}</span>\n                  <span style={{ \n                    fontFamily: tokens.typography.fontFamily.mono, \n                    color: tokens.colors.text.tertiary,\n                    fontVariantNumeric: 'tabular-nums',\n                  }}>\n                    {safeNumber(current, 1)} / {safeNumber(max, 1)} kg\n                  </span>\n                </div>\n                <div style={{\n                  height: '6px',\n                  backgroundColor: tokens.colors.border.muted,\n                  borderRadius: tokens.borderRadius.sm,\n                  overflow: 'hidden',\n                }}>\n                  <div style={{\n                    height: '100%',\n                    width: `${pct}%`,\n                    backgroundColor: getPercentageColor(pct),\n                    borderRadius: tokens.borderRadius.sm,\n                  }} />\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Maneuver feasibility - Astro: Sentence-case */}\n      {maneuvers.length > 0 && !compact && (\n        <div style={{\n          paddingTop: tokens.spacing.md,\n          borderTop: `1px solid ${tokens.colors.border.muted}`,\n        }}>\n          <div style={{ \n            ...labelStyle, \n            marginBottom: tokens.spacing.sm,\n          }}>\n            Maneuver feasibility\n          </div>\n          <div style={{ display: 'flex', flexDirection: 'column', gap: tokens.spacing.xs }}>\n            {maneuvers.map((m, i) => (\n              <div key={i} style={{ \n                display: 'flex', \n                alignItems: 'center', \n                justifyContent: 'space-between', \n                fontSize: tokens.typography.fontSize.xs,\n              }}>\n                <span style={{ color: tokens.colors.text.secondary }}>{m.name}</span>\n                <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm }}>\n                  <span style={{ \n                    fontFamily: tokens.typography.fontFamily.mono, \n                    color: tokens.colors.text.tertiary,\n                  }}>\n                    {m.requiredDeltaVMs} m/s\n                  </span>\n                  <span style={{ \n                    fontWeight: tokens.typography.fontWeight.bold,\n                    color: m.feasible ? tokens.colors.status.normal : tokens.colors.status.critical,\n                  }}>\n                    {m.feasible ? '✓' : '✗'}\n                  </span>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {/* Warning if low - Astro notification style */}\n      {deltaVPercentage < 20 && (\n        <div style={{\n          marginTop: tokens.spacing.md,\n          padding: tokens.spacing.sm,\n          backgroundColor: `${tokens.colors.status.critical}15`,\n          border: `1px solid ${tokens.colors.status.critical}40`,\n          borderRadius: tokens.borderRadius.md,\n          fontSize: tokens.typography.fontSize.xs,\n          color: tokens.colors.status.critical,\n        }}>\n          ⚠️ Low propellant - limit maneuvers\n        </div>\n      )}\n    </article>\n  );\n});\n\nexport default PropulsionCard;\n\n\n\n\n"],"names":["PropulsionCard"],"mappings":"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"}

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

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+
+export interface FootprintSensorConfig {
+    id: string;
+    name: string;
+    /** Field of view in degrees (cross-track) */
+    fovDegrees: number;
+    /** Along-track field of view in degrees */
+    alongTrackFovDegrees?: number;
+    /** Sensor type */
+    type: 'camera' | 'radar' | 'lidar' | 'spectrometer' | string;
+    /** Whether sensor is active */
+    isActive: boolean;
+}
+export interface SensorFootprintCardProps {
+    /** Sensor configuration */
+    sensor?: FootprintSensorConfig;
+    /** Current spacecraft latitude */
+    latitude?: number;
+    /** Current spacecraft longitude */
+    longitude?: number;
+    /** Current altitude in km */
+    altitudeKm?: number;
+    /** Current heading/track angle in degrees */
+    headingDegrees?: number;
+    /** Compact mode */
+    compact?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+export declare const SensorFootprintCard: React.NamedExoticComponent<SensorFootprintCardProps>;

package/dist/react/visualizations/SensorFootprintCard.js

@@ -0,0 +1,326 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useRef, useMemo, useEffect } from "react";
+import { AstroIcon } from "../core/AstroIcon.js";
+import { classNames } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const SensorFootprintCard = memo(function SensorFootprintCard2({
+  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 == null ? void 0 : sensor.fovDegrees) ?? 30;
+    const alongFov = (sensor == null ? void 0 : 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);
+    const areaKm2 = crossTrackKm * alongTrackKm;
+    const swathWidthKm = crossTrackKm;
+    return { crossTrackKm, alongTrackKm, areaKm2, swathWidthKm };
+  }, [sensor == null ? void 0 : sensor.fovDegrees, sensor == null ? void 0 : 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 = 0.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: 0.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;
+  const cardStyle = {
+    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
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: cardStyle, 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,
+        // 0.625rem / 10px (AstroUXDS compact)
+        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"
+        ] })
+      ] })
+    ] })
+  ] });
+});
+export {
+  SensorFootprintCard
+};
+//# sourceMappingURL=SensorFootprintCard.js.map

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

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

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

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+
+export interface ComponentThermal {
+    id: string;
+    name: string;
+    /** Temperature in Celsius */
+    temperatureCelsius: number;
+    /** Minimum safe temperature */
+    minSafeCelsius: number;
+    /** Maximum safe temperature */
+    maxSafeCelsius: number;
+    /** Heater active status */
+    heaterActive?: boolean;
+}
+export interface ThermalHeatmapCardProps {
+    /** Component thermal data */
+    components?: ComponentThermal[];
+    /** Average spacecraft temperature */
+    averageTemperature?: number;
+    /** Compact mode (fewer items) */
+    compact?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * ThermalHeatmapCard - Displays spacecraft thermal status
+ *
+ * @example
+ * ```tsx
+ * <ThermalHeatmapCard
+ *   components={thermalComponents}
+ *   averageTemperature={22.5}
+ * />
+ * ```
+ */
+export declare const ThermalHeatmapCard: React.NamedExoticComponent<ThermalHeatmapCardProps>;