@zendir/ui 0.1.0

package/dist/react/visualizations/NavBallCard.js

@@ -0,0 +1,243 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { safeAccentText } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const 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(() => {
+    const pitchClamp = Math.max(-45, Math.min(45, pitch));
+    const rollClamp = Math.max(-180, Math.min(180, roll));
+    return {
+      transform: `rotate(${rollClamp}deg) translateY(${pitchClamp * 1.5}%)`
+    };
+  }, [pitch, roll]);
+  const formatAngle = (angle, prefix) => {
+    const sign = angle >= 0 ? "+" : "";
+    return `${prefix}: ${sign}${angle.toFixed(1)}°`;
+  };
+  const statusColors = {
+    normal: "#6ed86e",
+    caution: "#ffd54f",
+    critical: "#e57373",
+    standby: "#4fc3f7"
+  };
+  const errorColor = useMemo(() => {
+    if (pointingError < 0.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" };
+  const cardStyle = {
+    backgroundColor: cardBg,
+    ...cardGlass,
+    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",
+      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: 0.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 * 0.8}%`,
+              left: `${50 + yaw * 0.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 })
+    ] }) })
+  ] });
+};
+export {
+  NavBallCard
+};
+//# sourceMappingURL=NavBallCard.js.map

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

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

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

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+
+export interface PropulsionTankData {
+    id: string;
+    name: string;
+    /** Current mass in kg */
+    currentMassKg: number;
+    /** Maximum capacity in kg */
+    maxMassKg: number;
+    /** Propellant type */
+    type: 'hydrazine' | 'xenon' | 'cold_gas' | 'bipropellant' | string;
+}
+export interface ManeuverFeasibility {
+    name: string;
+    requiredDeltaVMs: number;
+    feasible: boolean;
+}
+export interface PropulsionCardProps {
+    /** Propellant tanks data */
+    tanks?: PropulsionTankData[];
+    /** Remaining delta-V in m/s */
+    remainingDeltaVMs?: number;
+    /** Total delta-V at full tanks in m/s */
+    totalDeltaVMs?: number;
+    /** Specific impulse in seconds */
+    ispSeconds?: number;
+    /** Common maneuvers with feasibility */
+    maneuvers?: ManeuverFeasibility[];
+    /** Compact mode */
+    compact?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+export declare const PropulsionCard: React.NamedExoticComponent<PropulsionCardProps>;
+export default PropulsionCard;

package/dist/react/visualizations/PropulsionCard.js

@@ -0,0 +1,298 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { AstroIcon } from "../core/AstroIcon.js";
+import { classNames, safeNumber, formatPercentage } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+function getPercentageStatus(pct) {
+  if (pct === void 0 || !Number.isFinite(pct)) return "off";
+  if (pct > 50) return "normal";
+  if (pct > 20) return "caution";
+  if (pct > 5) return "serious";
+  return "critical";
+}
+const PropulsionCard = memo(function PropulsionCard2({
+  tanks,
+  remainingDeltaVMs,
+  totalDeltaVMs,
+  ispSeconds,
+  maneuvers = [],
+  compact = false,
+  loading = false,
+  className = ""
+}) {
+  const { tokens, theme, prefersReducedMotion } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const cardBg = isTransparentTheme ? "transparent" : tokens.colors.background.surface;
+  const cardGlass = isTransparentTheme ? {
+    backdropFilter: "blur(12px)",
+    WebkitBackdropFilter: "blur(12px)"
+  } : {};
+  const transitionDuration = prefersReducedMotion ? "0ms" : "300ms";
+  const statusColors = {
+    normal: "#6ed86e",
+    caution: "#ffd54f",
+    serious: "#ffa726",
+    critical: "#e57373",
+    off: "#90a4ae",
+    standby: "#4fc3f7"
+  };
+  useMemo(() => {
+    if (!tanks || tanks.length === 0) return 0;
+    const totalCurrent = tanks.reduce((sum, t) => sum + (t.currentMassKg ?? 0), 0);
+    const totalMax = tanks.reduce((sum, t) => sum + (t.maxMassKg ?? 0), 0);
+    return totalMax > 0 ? totalCurrent / totalMax * 100 : 0;
+  }, [tanks]);
+  const deltaVPercentage = useMemo(() => {
+    const total = totalDeltaVMs ?? 0;
+    const remaining = remainingDeltaVMs ?? 0;
+    return total > 0 ? remaining / total * 100 : 0;
+  }, [remainingDeltaVMs, totalDeltaVMs]);
+  const deltaVStatus = getPercentageStatus(deltaVPercentage);
+  const deltaVColor = statusColors[deltaVStatus] || statusColors.off;
+  const getPercentageColor = (pct) => {
+    const status = getPercentageStatus(pct);
+    return statusColors[status] || statusColors.off;
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames("zendir-propulsion-card", "loading", className),
+        role: "article",
+        "aria-busy": "true",
+        "aria-label": "Loading propulsion data",
+        style: {
+          backgroundColor: cardBg,
+          ...cardGlass,
+          border: "none",
+          borderRadius: tokens.borderRadius.lg,
+          padding: tokens.spacing.md,
+          minHeight: 180
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 16 }, children: [
+            /* @__PURE__ */ jsx("div", { style: { height: 24, width: "40%", backgroundColor: "rgba(255,255,255,0.1)", borderRadius: 4 } }),
+            /* @__PURE__ */ jsx("div", { style: { height: 24, width: 80, backgroundColor: "rgba(255,255,255,0.1)", borderRadius: 4 } })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { height: 12, backgroundColor: "rgba(255,255,255,0.06)", borderRadius: 4, marginBottom: 16 } }),
+          [1, 2].map((i) => /* @__PURE__ */ jsx("div", { style: { height: 32, backgroundColor: "rgba(255,255,255,0.06)", borderRadius: 4, marginBottom: 8 } }, i))
+        ]
+      }
+    );
+  }
+  if (!tanks || tanks.length === 0) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames("zendir-propulsion-card", "empty", className),
+        role: "article",
+        "aria-label": "No propulsion 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: "launch", size: "normal", label: "", style: { opacity: 0.5 } }),
+          /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0 0", fontSize: tokens.typography.body[2].fontSize }, children: "No propulsion data available" })
+        ]
+      }
+    );
+  }
+  const getTankIconName = (type) => {
+    switch (type) {
+      case "hydrazine":
+        return "propulsion-power";
+      case "xenon":
+        return "cloud";
+      case "cold_gas":
+        return "ac-unit";
+      case "bipropellant":
+        return "whatshot";
+      default:
+        return "propulsion-power";
+    }
+  };
+  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
+  };
+  const labelStyle = {
+    color: tokens.colors.text.tertiary,
+    fontSize: tokens.typography.fontSize.xs,
+    fontWeight: tokens.typography.fontWeight.medium
+  };
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: classNames("zendir-propulsion-card", className),
+      "aria-label": "Propulsion system status",
+      style: cardStyle,
+      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: "Propulsion" }),
+            /* @__PURE__ */ jsx("p", { style: {
+              fontSize: tokens.typography.fontSize.xs,
+              color: tokens.colors.text.tertiary,
+              margin: 0,
+              marginTop: tokens.spacing.xs
+            }, children: ispSeconds ? `Isp: ${ispSeconds}s` : "Delta-V budget" })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { style: {
+            fontSize: tokens.typography.fontSize.lg,
+            fontWeight: tokens.typography.fontWeight.bold,
+            fontFamily: tokens.typography.fontFamily.mono,
+            fontVariantNumeric: "tabular-nums",
+            color: deltaVColor
+          }, children: [
+            safeNumber(remainingDeltaVMs, 0),
+            " m/s"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { marginBottom: tokens.spacing.md }, children: [
+          /* @__PURE__ */ jsxs("div", { style: {
+            display: "flex",
+            justifyContent: "space-between",
+            fontSize: tokens.typography.fontSize.xs,
+            marginBottom: tokens.spacing.xs
+          }, children: [
+            /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Remaining ΔV" }),
+            /* @__PURE__ */ jsx("span", { style: {
+              fontFamily: tokens.typography.fontFamily.mono,
+              color: deltaVColor
+            }, children: formatPercentage(deltaVPercentage, false, 0) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: {
+            height: "12px",
+            backgroundColor: tokens.colors.border.muted,
+            borderRadius: tokens.borderRadius.sm,
+            overflow: "hidden"
+          }, children: /* @__PURE__ */ jsx("div", { style: {
+            height: "100%",
+            width: `${Math.min(100, Math.max(0, deltaVPercentage))}%`,
+            backgroundColor: deltaVColor,
+            transition: `width ${transitionDuration} ease`,
+            borderRadius: tokens.borderRadius.sm
+          } }) }),
+          /* @__PURE__ */ jsxs("div", { style: {
+            display: "flex",
+            justifyContent: "space-between",
+            fontSize: tokens.typography.fontSize.xxs,
+            // 0.625rem / 10px (AstroUXDS compact)
+            color: tokens.colors.text.tertiary,
+            marginTop: tokens.spacing.xs
+          }, children: [
+            /* @__PURE__ */ jsx("span", { children: "0" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              safeNumber(totalDeltaVMs, 0),
+              " m/s"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: tokens.spacing.sm, marginBottom: tokens.spacing.md }, children: tanks.map((tank) => {
+          const current = tank.currentMassKg ?? 0;
+          const max = tank.maxMassKg ?? 1;
+          const pct = max > 0 ? current / max * 100 : 0;
+          return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm }, children: [
+            /* @__PURE__ */ jsx(AstroIcon, { name: getTankIconName(tank.type), size: "small", label: tank.type, style: { fontSize: tokens.typography.fontSize.sm } }),
+            /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsxs("div", { style: {
+                display: "flex",
+                justifyContent: "space-between",
+                fontSize: tokens.typography.fontSize.xs,
+                // 0.75rem / 12px (AstroUXDS body3)
+                marginBottom: "2px"
+              }, children: [
+                /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary }, children: tank.name }),
+                /* @__PURE__ */ jsxs("span", { style: {
+                  fontFamily: tokens.typography.fontFamily.mono,
+                  color: tokens.colors.text.tertiary,
+                  fontVariantNumeric: "tabular-nums"
+                }, children: [
+                  safeNumber(current, 1),
+                  " / ",
+                  safeNumber(max, 1),
+                  " kg"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: {
+                height: "6px",
+                backgroundColor: tokens.colors.border.muted,
+                borderRadius: tokens.borderRadius.sm,
+                overflow: "hidden"
+              }, children: /* @__PURE__ */ jsx("div", { style: {
+                height: "100%",
+                width: `${pct}%`,
+                backgroundColor: getPercentageColor(pct),
+                borderRadius: tokens.borderRadius.sm
+              } }) })
+            ] })
+          ] }, tank.id);
+        }) }),
+        maneuvers.length > 0 && !compact && /* @__PURE__ */ jsxs("div", { style: {
+          paddingTop: tokens.spacing.md,
+          borderTop: `1px solid ${tokens.colors.border.muted}`
+        }, children: [
+          /* @__PURE__ */ jsx("div", { style: {
+            ...labelStyle,
+            marginBottom: tokens.spacing.sm
+          }, children: "Maneuver feasibility" }),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: tokens.spacing.xs }, children: maneuvers.map((m, i) => /* @__PURE__ */ jsxs("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            fontSize: tokens.typography.fontSize.xs
+          }, children: [
+            /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary }, children: m.name }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm }, children: [
+              /* @__PURE__ */ jsxs("span", { style: {
+                fontFamily: tokens.typography.fontFamily.mono,
+                color: tokens.colors.text.tertiary
+              }, children: [
+                m.requiredDeltaVMs,
+                " m/s"
+              ] }),
+              /* @__PURE__ */ jsx("span", { style: {
+                fontWeight: tokens.typography.fontWeight.bold,
+                color: m.feasible ? tokens.colors.status.normal : tokens.colors.status.critical
+              }, children: m.feasible ? "✓" : "✗" })
+            ] })
+          ] }, i)) })
+        ] }),
+        deltaVPercentage < 20 && /* @__PURE__ */ jsx("div", { style: {
+          marginTop: tokens.spacing.md,
+          padding: tokens.spacing.sm,
+          backgroundColor: `${tokens.colors.status.critical}15`,
+          border: `1px solid ${tokens.colors.status.critical}40`,
+          borderRadius: tokens.borderRadius.md,
+          fontSize: tokens.typography.fontSize.xs,
+          color: tokens.colors.status.critical
+        }, children: "⚠️ Low propellant - limit maneuvers" })
+      ]
+    }
+  );
+});
+export {
+  PropulsionCard
+};
+//# sourceMappingURL=PropulsionCard.js.map