@zendir/ui 0.4.1 → 0.6.0

package/dist/react/cards/OrbitCard.js

@@ -1,372 +1,495 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useMemo } from "react";
-import { estimateOrbitalPeriod, estimateOrbitalVelocity } from "../types.js";
 import { useTheme } from "../theme/ThemeProvider.js";
 import { Icon } from "../core/display/Icon.js";
+import { classNames, formatAltitude, formatCoordinate, formatDegrees, formatDuration, formatTime, formatVelocity, safeAccentText } from "../utils/index.js";
 import { AstroIcon } from "../core/display/AstroIcon.js";
 import { CardHeader } from "../core/display/CardHeader.js";
-import { classNames, formatAltitude, safeAccentText, formatVelocity, formatDegrees, formatDuration, formatCoordinate, formatTime } from "../utils/index.js";
 import { useCompactMode } from "../hooks/useCompactMode.js";
+import { estimateOrbitalPeriod, estimateOrbitalVelocity } from "../types.js";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/cards/OrbitCard.tsx
+/**
+* @zendir/ui - OrbitCard Component
+*
+* Enterprise-grade orbital parameters display card.
+*
+* AstroUXDS Compliance:
+* - Orbit type colors use Zendir-Astro data viz palette (categorical, not status)
+* - Tabular numbers for orbital data display
+* - Sentence-case labels per Tier 3 compliance
+*
+* Features:
+* - Full null-safety with graceful fallbacks
+* - WCAG 2.1 AA accessibility
+* - Computed orbital parameters (period, velocity)
+* - Orbit type classification with Zendir-branded color coding
+* - Loading and empty states
+*/
+/**
+* Get orbit type info with Zendir-branded colors
+* Uses AstroUXDS data visualization palette for orbit classification
+*/
 function getOrbitTypeInfo(orbitType) {
-  const types = {
-    LEO: { color: "#3E3CFF", description: "Low Earth Orbit (200-2,000 km)" },
-    // Zendir Electric
-    MEO: { color: "#3548C0", description: "Medium Earth Orbit (2,000-35,786 km)" },
-    // Zendir Prussian Blue Light
-    GEO: { color: "#9D70FF", description: "Geostationary Orbit (~35,786 km)" },
-    // Zendir Purple
-    HEO: { color: "#1B2DA0", description: "Highly Elliptical Orbit" },
-    // Zendir Prussian Blue
-    SSO: { color: "#B48DFF", description: "Sun-Synchronous Orbit" },
-    // Zendir Purple Light
-    POLAR: { color: "#6B69FF", description: "Polar Orbit" },
-    // Zendir Electric Light
-    MOLNIYA: { color: "#C9A8FF", description: "Molniya Orbit (12h period)" }
-    // Zendir Purple Lighter
-  };
-  return types[(orbitType == null ? void 0 : orbitType.toUpperCase()) ?? ""] ?? { color: "#a4abb6", description: "Unknown orbit type" };
+	return {
+		LEO: {
+			color: "#3E3CFF",
+			description: "Low Earth Orbit (200-2,000 km)"
+		},
+		MEO: {
+			color: "#3548C0",
+			description: "Medium Earth Orbit (2,000-35,786 km)"
+		},
+		GEO: {
+			color: "#9D70FF",
+			description: "Geostationary Orbit (~35,786 km)"
+		},
+		HEO: {
+			color: "#1B2DA0",
+			description: "Highly Elliptical Orbit"
+		},
+		SSO: {
+			color: "#B48DFF",
+			description: "Sun-Synchronous Orbit"
+		},
+		POLAR: {
+			color: "#6B69FF",
+			description: "Polar Orbit"
+		},
+		MOLNIYA: {
+			color: "#C9A8FF",
+			description: "Molniya Orbit (12h period)"
+		}
+	}[orbitType?.toUpperCase() ?? ""] ?? {
+		color: "#a4abb6",
+		description: "Unknown orbit type"
+	};
 }
-const OrbitCard = memo(function OrbitCard2({
-  spacecraft,
-  showComputed = true,
-  loading = false,
-  className = "",
-  compact = false,
-  defaultExpanded = false,
-  onPinChange
-}) {
-  const { tokens, theme, prefersReducedMotion } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const isBoldVariant = theme === "transparent-bold";
-  const isMinimalVariant = theme === "transparent-minimal";
-  const useGlassMode = isBoldVariant || isMinimalVariant;
-  const glassAccentColor = tokens.colors.accent.primary;
-  const glassAccentMuted = `${glassAccentColor}66`;
-  const cardBg = isTransparentTheme ? "transparent" : tokens.colors.background.surface;
-  const cardGlass = isTransparentTheme ? {
-    backdropFilter: "blur(12px)",
-    WebkitBackdropFilter: "blur(12px)"
-  } : {};
-  const glassContainerStyle = useGlassMode ? {
-    backgroundColor: "rgba(10, 15, 25, 0.35)",
-    backdropFilter: "blur(12px)",
-    WebkitBackdropFilter: "blur(12px)",
-    border: `1px solid ${glassAccentMuted}`,
-    borderTop: isBoldVariant ? `2px solid ${glassAccentColor}` : `1px solid ${glassAccentColor}`
-  } : {};
-  const { expanded, isPinned, handlers, transitionDuration } = useCompactMode({
-    compact,
-    defaultExpanded,
-    onPinChange
-  });
-  const orbitInfo = useMemo(() => getOrbitTypeInfo(spacecraft == null ? void 0 : spacecraft.orbitType), [spacecraft == null ? void 0 : spacecraft.orbitType]);
-  const computedPeriod = useMemo(() => {
-    if (!(spacecraft == null ? void 0 : spacecraft.altitude)) return null;
-    try {
-      return estimateOrbitalPeriod(spacecraft.altitude);
-    } catch {
-      return null;
-    }
-  }, [spacecraft == null ? void 0 : spacecraft.altitude]);
-  const computedVelocity = useMemo(() => {
-    if (!(spacecraft == null ? void 0 : spacecraft.altitude)) return null;
-    try {
-      return estimateOrbitalVelocity(spacecraft.altitude);
-    } catch {
-      return null;
-    }
-  }, [spacecraft == null ? void 0 : spacecraft.altitude]);
-  if (loading) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: classNames("zendir-orbit-card", "loading", className),
-        role: "article",
-        "aria-busy": "true",
-        "aria-label": "Loading orbit data",
-        style: {
-          backgroundColor: cardBg,
-          ...cardGlass,
-          ...tokens.colors.border.cardStyle ?? {},
-          borderRadius: tokens.borderRadius.lg,
-          padding: tokens.spacing.md,
-          minHeight: 200
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }, children: [
-            /* @__PURE__ */ jsx("div", { style: { width: 40, height: 40, borderRadius: 8, backgroundColor: "rgba(255,255,255,0.1)" } }),
-            /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx("div", { style: { height: 18, width: "50%", backgroundColor: "rgba(255,255,255,0.1)", borderRadius: 4 } }),
-              /* @__PURE__ */ jsx("div", { style: { height: 12, width: "70%", backgroundColor: "rgba(255,255,255,0.06)", borderRadius: 4, marginTop: 6 } })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }, children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("div", { style: { height: 10, width: "40%", backgroundColor: "rgba(255,255,255,0.06)", borderRadius: 2 } }),
-            /* @__PURE__ */ jsx("div", { style: { height: 20, width: "60%", backgroundColor: "rgba(255,255,255,0.1)", borderRadius: 4, marginTop: 4 } })
-          ] }, i)) })
-        ]
-      }
-    );
-  }
-  if (!spacecraft) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: classNames("zendir-orbit-card", "empty", className),
-        role: "article",
-        "aria-label": "No orbit data",
-        style: {
-          backgroundColor: cardBg,
-          ...cardGlass,
-          ...tokens.colors.border.cardStyleDashed ?? {},
-          borderRadius: tokens.borderRadius.lg,
-          padding: tokens.spacing.lg,
-          textAlign: "center",
-          color: tokens.colors.text.tertiary
-        },
-        children: [
-          /* @__PURE__ */ jsxs("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "currentColor", style: { opacity: 0.5, marginBottom: 8 }, children: [
-            /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }),
-            /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", fill: "none", stroke: "currentColor", strokeWidth: "1", strokeDasharray: "3,3" })
-          ] }),
-          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: tokens.typography.body[2].fontSize }, children: "No orbit data available" })
-        ]
-      }
-    );
-  }
-  if (compact && !expanded) {
-    return /* @__PURE__ */ jsxs(
-      "article",
-      {
-        className: classNames("zendir-orbit-card", "compact", className),
-        ...handlers,
-        "aria-label": `Orbit: ${spacecraft.orbitType ?? "Unknown"} (compact)`,
-        style: {
-          position: "relative",
-          overflow: "hidden",
-          ...useGlassMode ? glassContainerStyle : {
-            backgroundColor: cardBg,
-            ...cardGlass,
-            ...tokens.colors.border.cardStyle ?? {}
-          },
-          borderRadius: tokens.borderRadius.lg,
-          padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
-          fontFamily: tokens.typography.fontFamily.primary,
-          color: tokens.colors.text.primary,
-          fontSize: tokens.typography.fontSize.sm,
-          cursor: "pointer",
-          transition: `all ${transitionDuration} ease-out`,
-          transform: "scale(1)"
-        },
-        onMouseEnter: (e) => {
-          handlers.onMouseEnter();
-          if (!prefersReducedMotion) {
-            e.currentTarget.style.transform = "scale(1.01)";
-            e.currentTarget.style.boxShadow = `0 4px 12px ${orbitInfo.color}20`;
-          }
-        },
-        onMouseLeave: (e) => {
-          handlers.onMouseLeave();
-          e.currentTarget.style.transform = "scale(1)";
-          e.currentTarget.style.boxShadow = "";
-        },
-        children: [
-          useGlassMode && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                inset: 0,
-                background: "linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)",
-                pointerEvents: "none",
-                zIndex: 0
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: tokens.spacing.md, position: "relative", zIndex: 1 }, children: [
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm, flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ jsx(AstroIcon, { name: "360", size: 16, color: orbitInfo.color }),
-              /* @__PURE__ */ jsx("span", { style: {
-                fontWeight: tokens.typography.fontWeight.medium,
-                color: useGlassMode ? glassAccentColor : void 0,
-                textShadow: useGlassMode ? `0 0 16px ${glassAccentMuted}` : void 0
-              }, children: "Orbit" }),
-              useGlassMode && /* @__PURE__ */ jsx("div", { style: {
-                flex: 1,
-                height: isBoldVariant ? "2px" : "1px",
-                minWidth: 20,
-                background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 60%, transparent 100%)`,
-                boxShadow: isBoldVariant ? `0 0 8px ${glassAccentMuted}` : void 0
-              } })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm, flexShrink: 0 }, children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    backgroundColor: `${orbitInfo.color}20`,
-                    color: orbitInfo.color,
-                    padding: `2px 6px`,
-                    borderRadius: tokens.borderRadius.sm,
-                    fontSize: tokens.typography.fontSize.xs,
-                    fontWeight: tokens.typography.fontWeight.medium
-                  },
-                  children: spacecraft.orbitType ?? "—"
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { style: {
-                fontVariantNumeric: "tabular-nums",
-                fontFamily: tokens.typography.fontFamily.mono,
-                fontSize: tokens.typography.fontSize.xs
-              }, children: formatAltitude(spacecraft.altitude) }),
-              isPinned && /* @__PURE__ */ jsx(Icon, { name: "lock", size: 12, color: tokens.colors.accent.primary })
-            ] })
-          ] })
-        ]
-      }
-    );
-  }
-  const labelStyle = {
-    color: tokens.colors.text.secondary,
-    // WCAG AA compliant - 4.5:1 contrast
-    fontSize: tokens.typography.fontSize.xs,
-    fontWeight: tokens.typography.fontWeight.medium
-  };
-  const valueStyle = {
-    color: tokens.colors.text.primary,
-    fontWeight: tokens.typography.fontWeight.medium,
-    fontFamily: tokens.typography.fontFamily.mono,
-    fontVariantNumeric: "tabular-nums",
-    fontSize: tokens.typography.fontSize.md,
-    marginTop: 2
-  };
-  return /* @__PURE__ */ jsxs(
-    "article",
-    {
-      className: classNames("zendir-orbit-card", compact ? "expanded" : "", className),
-      ...compact ? handlers : {},
-      role: compact ? handlers.role : "article",
-      tabIndex: compact ? handlers.tabIndex : void 0,
-      "aria-expanded": compact ? handlers["aria-expanded"] : void 0,
-      "aria-label": `Orbit data for ${spacecraft.name ?? spacecraft.id}`,
-      style: {
-        position: "relative",
-        overflow: "hidden",
-        ...useGlassMode ? glassContainerStyle : {
-          backgroundColor: cardBg,
-          ...cardGlass,
-          ...tokens.colors.border.cardStyle ?? {}
-        },
-        borderRadius: tokens.borderRadius.lg,
-        padding: tokens.spacing.md,
-        fontFamily: tokens.typography.fontFamily.primary,
-        cursor: compact ? "pointer" : void 0,
-        transition: compact ? `all ${transitionDuration} ease-out` : void 0,
-        color: tokens.colors.text.primary,
-        fontSize: tokens.typography.fontSize.sm
-      },
-      children: [
-        useGlassMode && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              background: "linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)",
-              pointerEvents: "none",
-              zIndex: 0
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          CardHeader,
-          {
-            icon: "360",
-            title: spacecraft.name ?? spacecraft.id ?? "Unknown",
-            subtitle: orbitInfo.description,
-            badge: spacecraft.orbitType ?? "ORBIT",
-            badgeColor: orbitInfo.color,
-            iconColor: orbitInfo.color,
-            hideStatusIndicator: true
-          }
-        ),
-        /* @__PURE__ */ jsx("section", { "aria-label": "Orbital parameters", children: /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: tokens.spacing.md }, children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Altitude" }),
-            /* @__PURE__ */ jsx("div", { style: { ...valueStyle, color: safeAccentText(tokens.colors.accent.primary) }, children: formatAltitude(spacecraft.altitude) })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Velocity" }),
-            /* @__PURE__ */ jsx("div", { style: valueStyle, children: spacecraft.velocity ? formatVelocity(spacecraft.velocity) : computedVelocity ? formatVelocity(computedVelocity) : "-- km/s" })
-          ] }),
-          spacecraft.inclination !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Inclination" }),
-            /* @__PURE__ */ jsx("div", { style: valueStyle, children: formatDegrees(spacecraft.inclination) })
-          ] }),
-          showComputed && computedPeriod !== null && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Period" }),
-            /* @__PURE__ */ jsx("div", { style: valueStyle, children: formatDuration(computedPeriod) })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsxs(
-          "section",
-          {
-            style: {
-              marginTop: tokens.spacing.lg,
-              paddingTop: tokens.spacing.lg,
-              borderTop: `1px solid ${tokens.colors.border.muted}`
-            },
-            "aria-label": "Current position",
-            children: [
-              /* @__PURE__ */ jsxs(
-                "h4",
-                {
-                  style: {
-                    margin: `0 0 ${tokens.spacing.sm} 0`,
-                    ...labelStyle,
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 4
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" }) }),
-                    "Current Position"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: tokens.spacing.md }, children: [
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Latitude" }),
-                  /* @__PURE__ */ jsx("div", { style: valueStyle, children: formatCoordinate(spacecraft.latitude, "lat") })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Longitude" }),
-                  /* @__PURE__ */ jsx("div", { style: valueStyle, children: formatCoordinate(spacecraft.longitude, "lon") })
-                ] })
-              ] })
-            ]
-          }
-        ),
-        spacecraft.timestamp && /* @__PURE__ */ jsx(
-          "footer",
-          {
-            style: {
-              marginTop: tokens.spacing.md,
-              fontSize: tokens.typography.fontSize.xs,
-              color: tokens.colors.text.tertiary,
-              textAlign: "right"
-            },
-            children: /* @__PURE__ */ jsxs("time", { dateTime: spacecraft.timestamp, children: [
-              formatTime(spacecraft.timestamp),
-              " UTC"
-            ] })
-          }
-        )
-      ]
-    }
-  );
+/**
+* OrbitCard - Displays spacecraft orbital parameters
+*
+* @example
+* ```tsx
+* <OrbitCard
+*   spacecraft={spacecraftData}
+*   showComputed
+* />
+* ```
+*/
+var OrbitCard = memo(function OrbitCard({ spacecraft, showComputed = true, loading = false, className = "", compact = false, defaultExpanded = false, onPinChange }) {
+	const { tokens, theme, prefersReducedMotion } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const isBoldVariant = theme === "transparent-bold";
+	const useGlassMode = isBoldVariant || theme === "transparent-minimal";
+	const glassAccentColor = tokens.colors.accent.primary;
+	const glassAccentMuted = `${glassAccentColor}66`;
+	const cardBg = isTransparentTheme ? "transparent" : tokens.colors.background.surface;
+	const cardGlass = isTransparentTheme ? {
+		backdropFilter: "blur(12px)",
+		WebkitBackdropFilter: "blur(12px)"
+	} : {};
+	const glassContainerStyle = useGlassMode ? {
+		backgroundColor: "rgba(10, 15, 25, 0.35)",
+		backdropFilter: "blur(12px)",
+		WebkitBackdropFilter: "blur(12px)",
+		border: `1px solid ${glassAccentMuted}`,
+		borderTop: isBoldVariant ? `2px solid ${glassAccentColor}` : `1px solid ${glassAccentColor}`
+	} : {};
+	const { expanded, isPinned, handlers, transitionDuration } = useCompactMode({
+		compact,
+		defaultExpanded,
+		onPinChange
+	});
+	const orbitInfo = useMemo(() => getOrbitTypeInfo(spacecraft?.orbitType), [spacecraft?.orbitType]);
+	const computedPeriod = useMemo(() => {
+		if (!spacecraft?.altitude) return null;
+		try {
+			return estimateOrbitalPeriod(spacecraft.altitude);
+		} catch {
+			return null;
+		}
+	}, [spacecraft?.altitude]);
+	const computedVelocity = useMemo(() => {
+		if (!spacecraft?.altitude) return null;
+		try {
+			return estimateOrbitalVelocity(spacecraft.altitude);
+		} catch {
+			return null;
+		}
+	}, [spacecraft?.altitude]);
+	if (loading) return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-orbit-card", "loading", className),
+		role: "article",
+		"aria-busy": "true",
+		"aria-label": "Loading orbit data",
+		style: {
+			backgroundColor: cardBg,
+			...cardGlass,
+			...tokens.colors.border.cardStyle ?? {},
+			borderRadius: tokens.borderRadius.lg,
+			padding: tokens.spacing.md,
+			minHeight: 200
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 12,
+				marginBottom: 20
+			},
+			children: [/* @__PURE__ */ jsx("div", { style: {
+				width: 40,
+				height: 40,
+				borderRadius: 8,
+				backgroundColor: "rgba(255,255,255,0.1)"
+			} }), /* @__PURE__ */ jsxs("div", {
+				style: { flex: 1 },
+				children: [/* @__PURE__ */ jsx("div", { style: {
+					height: 18,
+					width: "50%",
+					backgroundColor: "rgba(255,255,255,0.1)",
+					borderRadius: 4
+				} }), /* @__PURE__ */ jsx("div", { style: {
+					height: 12,
+					width: "70%",
+					backgroundColor: "rgba(255,255,255,0.06)",
+					borderRadius: 4,
+					marginTop: 6
+				} })]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "grid",
+				gridTemplateColumns: "repeat(2, 1fr)",
+				gap: 16
+			},
+			children: [
+				1,
+				2,
+				3,
+				4
+			].map((i) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { style: {
+				height: 10,
+				width: "40%",
+				backgroundColor: "rgba(255,255,255,0.06)",
+				borderRadius: 2
+			} }), /* @__PURE__ */ jsx("div", { style: {
+				height: 20,
+				width: "60%",
+				backgroundColor: "rgba(255,255,255,0.1)",
+				borderRadius: 4,
+				marginTop: 4
+			} })] }, i))
+		})]
+	});
+	if (!spacecraft) return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-orbit-card", "empty", className),
+		role: "article",
+		"aria-label": "No orbit data",
+		style: {
+			backgroundColor: cardBg,
+			...cardGlass,
+			...tokens.colors.border.cardStyleDashed ?? {},
+			borderRadius: tokens.borderRadius.lg,
+			padding: tokens.spacing.lg,
+			textAlign: "center",
+			color: tokens.colors.text.tertiary
+		},
+		children: [/* @__PURE__ */ jsxs("svg", {
+			width: "32",
+			height: "32",
+			viewBox: "0 0 24 24",
+			fill: "currentColor",
+			style: {
+				opacity: .5,
+				marginBottom: 8
+			},
+			children: [/* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }), /* @__PURE__ */ jsx("ellipse", {
+				cx: "12",
+				cy: "12",
+				rx: "10",
+				ry: "4",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1",
+				strokeDasharray: "3,3"
+			})]
+		}), /* @__PURE__ */ jsx("p", {
+			style: {
+				margin: 0,
+				fontSize: tokens.typography.body[2].fontSize
+			},
+			children: "No orbit data available"
+		})]
+	});
+	if (compact && !expanded) return /* @__PURE__ */ jsxs("article", {
+		className: classNames("zendir-orbit-card", "compact", className),
+		...handlers,
+		"aria-label": `Orbit: ${spacecraft.orbitType ?? "Unknown"} (compact)`,
+		style: {
+			position: "relative",
+			overflow: "hidden",
+			...useGlassMode ? glassContainerStyle : {
+				backgroundColor: cardBg,
+				...cardGlass,
+				...tokens.colors.border.cardStyle ?? {}
+			},
+			borderRadius: tokens.borderRadius.lg,
+			padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
+			fontFamily: tokens.typography.fontFamily.primary,
+			color: tokens.colors.text.primary,
+			fontSize: tokens.typography.fontSize.sm,
+			cursor: "pointer",
+			transition: `all ${transitionDuration} ease-out`,
+			transform: "scale(1)"
+		},
+		onMouseEnter: (e) => {
+			handlers.onMouseEnter();
+			if (!prefersReducedMotion) {
+				e.currentTarget.style.transform = "scale(1.01)";
+				e.currentTarget.style.boxShadow = `0 4px 12px ${orbitInfo.color}20`;
+			}
+		},
+		onMouseLeave: (e) => {
+			handlers.onMouseLeave();
+			e.currentTarget.style.transform = "scale(1)";
+			e.currentTarget.style.boxShadow = "";
+		},
+		children: [useGlassMode && /* @__PURE__ */ jsx("div", { style: {
+			position: "absolute",
+			inset: 0,
+			background: "linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)",
+			pointerEvents: "none",
+			zIndex: 0
+		} }), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				gap: tokens.spacing.md,
+				position: "relative",
+				zIndex: 1
+			},
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.sm,
+					flex: 1,
+					minWidth: 0
+				},
+				children: [
+					/* @__PURE__ */ jsx(AstroIcon, {
+						name: "360",
+						size: 16,
+						color: orbitInfo.color
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: {
+							fontWeight: tokens.typography.fontWeight.medium,
+							color: useGlassMode ? glassAccentColor : void 0,
+							textShadow: useGlassMode ? `0 0 16px ${glassAccentMuted}` : void 0
+						},
+						children: "Orbit"
+					}),
+					useGlassMode && /* @__PURE__ */ jsx("div", { style: {
+						flex: 1,
+						height: isBoldVariant ? "2px" : "1px",
+						minWidth: 20,
+						background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 60%, transparent 100%)`,
+						boxShadow: isBoldVariant ? `0 0 8px ${glassAccentMuted}` : void 0
+					} })
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.sm,
+					flexShrink: 0
+				},
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						style: {
+							backgroundColor: `${orbitInfo.color}20`,
+							color: orbitInfo.color,
+							padding: `2px 6px`,
+							borderRadius: tokens.borderRadius.sm,
+							fontSize: tokens.typography.fontSize.xs,
+							fontWeight: tokens.typography.fontWeight.medium
+						},
+						children: spacecraft.orbitType ?? "—"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: {
+							fontVariantNumeric: "tabular-nums",
+							fontFamily: tokens.typography.fontFamily.mono,
+							fontSize: tokens.typography.fontSize.xs
+						},
+						children: formatAltitude(spacecraft.altitude)
+					}),
+					isPinned && /* @__PURE__ */ jsx(Icon, {
+						name: "lock",
+						size: 12,
+						color: tokens.colors.accent.primary
+					})
+				]
+			})]
+		})]
+	});
+	const labelStyle = {
+		color: tokens.colors.text.secondary,
+		fontSize: tokens.typography.fontSize.xs,
+		fontWeight: tokens.typography.fontWeight.medium
+	};
+	const valueStyle = {
+		color: tokens.colors.text.primary,
+		fontWeight: tokens.typography.fontWeight.medium,
+		fontFamily: tokens.typography.fontFamily.mono,
+		fontVariantNumeric: "tabular-nums",
+		fontSize: tokens.typography.fontSize.md,
+		marginTop: 2
+	};
+	return /* @__PURE__ */ jsxs("article", {
+		className: classNames("zendir-orbit-card", compact ? "expanded" : "", className),
+		...compact ? handlers : {},
+		role: compact ? handlers.role : "article",
+		tabIndex: compact ? handlers.tabIndex : void 0,
+		"aria-expanded": compact ? handlers["aria-expanded"] : void 0,
+		"aria-label": `Orbit data for ${spacecraft.name ?? spacecraft.id}`,
+		style: {
+			position: "relative",
+			overflow: "hidden",
+			...useGlassMode ? glassContainerStyle : {
+				backgroundColor: cardBg,
+				...cardGlass,
+				...tokens.colors.border.cardStyle ?? {}
+			},
+			borderRadius: tokens.borderRadius.lg,
+			padding: tokens.spacing.md,
+			fontFamily: tokens.typography.fontFamily.primary,
+			cursor: compact ? "pointer" : void 0,
+			transition: compact ? `all ${transitionDuration} ease-out` : void 0,
+			color: tokens.colors.text.primary,
+			fontSize: tokens.typography.fontSize.sm
+		},
+		children: [
+			useGlassMode && /* @__PURE__ */ jsx("div", { style: {
+				position: "absolute",
+				inset: 0,
+				background: "linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)",
+				pointerEvents: "none",
+				zIndex: 0
+			} }),
+			/* @__PURE__ */ jsx(CardHeader, {
+				icon: "360",
+				title: spacecraft.name ?? spacecraft.id ?? "Unknown",
+				subtitle: orbitInfo.description,
+				badge: spacecraft.orbitType ?? "ORBIT",
+				badgeColor: orbitInfo.color,
+				iconColor: orbitInfo.color,
+				hideStatusIndicator: true
+			}),
+			/* @__PURE__ */ jsx("section", {
+				"aria-label": "Orbital parameters",
+				children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "grid",
+						gridTemplateColumns: "repeat(2, 1fr)",
+						gap: tokens.spacing.md
+					},
+					children: [
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+							style: labelStyle,
+							children: "Altitude"
+						}), /* @__PURE__ */ jsx("div", {
+							style: {
+								...valueStyle,
+								color: safeAccentText(tokens.colors.accent.primary)
+							},
+							children: formatAltitude(spacecraft.altitude)
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+							style: labelStyle,
+							children: "Velocity"
+						}), /* @__PURE__ */ jsx("div", {
+							style: valueStyle,
+							children: spacecraft.velocity ? formatVelocity(spacecraft.velocity) : computedVelocity ? formatVelocity(computedVelocity) : "-- km/s"
+						})] }),
+						spacecraft.inclination !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+							style: labelStyle,
+							children: "Inclination"
+						}), /* @__PURE__ */ jsx("div", {
+							style: valueStyle,
+							children: formatDegrees(spacecraft.inclination)
+						})] }),
+						showComputed && computedPeriod !== null && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+							style: labelStyle,
+							children: "Period"
+						}), /* @__PURE__ */ jsx("div", {
+							style: valueStyle,
+							children: formatDuration(computedPeriod)
+						})] })
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				style: {
+					marginTop: tokens.spacing.lg,
+					paddingTop: tokens.spacing.lg,
+					borderTop: `1px solid ${tokens.colors.border.muted}`
+				},
+				"aria-label": "Current position",
+				children: [/* @__PURE__ */ jsxs("h4", {
+					style: {
+						margin: `0 0 ${tokens.spacing.sm} 0`,
+						...labelStyle,
+						display: "flex",
+						alignItems: "center",
+						gap: 4
+					},
+					children: [/* @__PURE__ */ jsx("svg", {
+						width: "12",
+						height: "12",
+						viewBox: "0 0 24 24",
+						fill: "currentColor",
+						children: /* @__PURE__ */ jsx("path", { d: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" })
+					}), "Current Position"]
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "grid",
+						gridTemplateColumns: "repeat(2, 1fr)",
+						gap: tokens.spacing.md
+					},
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+						style: labelStyle,
+						children: "Latitude"
+					}), /* @__PURE__ */ jsx("div", {
+						style: valueStyle,
+						children: formatCoordinate(spacecraft.latitude, "lat")
+					})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+						style: labelStyle,
+						children: "Longitude"
+					}), /* @__PURE__ */ jsx("div", {
+						style: valueStyle,
+						children: formatCoordinate(spacecraft.longitude, "lon")
+					})] })]
+				})]
+			}),
+			spacecraft.timestamp && /* @__PURE__ */ jsx("footer", {
+				style: {
+					marginTop: tokens.spacing.md,
+					fontSize: tokens.typography.fontSize.xs,
+					color: tokens.colors.text.tertiary,
+					textAlign: "right"
+				},
+				children: /* @__PURE__ */ jsxs("time", {
+					dateTime: spacecraft.timestamp,
+					children: [formatTime(spacecraft.timestamp), " UTC"]
+				})
+			})
+		]
+	});
 });
-export {
-  OrbitCard
-};
-//# sourceMappingURL=OrbitCard.js.map
+//#endregion
+export { OrbitCard };
+
+//# sourceMappingURL=OrbitCard.js.map