@zendir/ui 0.1.0

package/dist/react/cards/OrbitCard.js

@@ -0,0 +1,372 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { estimateOrbitalPeriod, estimateOrbitalVelocity } from "../types.js";
+import { Icon } from "../core/Icon.js";
+import { AstroIcon } from "../core/AstroIcon.js";
+import { CardHeader } from "../core/CardHeader.js";
+import { classNames, formatAltitude, safeAccentText, formatVelocity, formatDegrees, formatDuration, formatCoordinate, formatTime } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+import { useCompactMode } from "../hooks/useCompactMode.js";
+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" };
+}
+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"
+            ] })
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  OrbitCard
+};
+//# sourceMappingURL=OrbitCard.js.map

package/dist/react/cards/OrbitCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrbitCard.js","sources":["../../../src/react/cards/OrbitCard.tsx"],"sourcesContent":["/**\n * @zendir/ui - OrbitCard Component\n * \n * Enterprise-grade orbital parameters display card.\n * \n * AstroUXDS Compliance:\n * - Orbit type colors use Zendir-Astro data viz palette (categorical, not status)\n * - Tabular numbers for orbital data display\n * - Sentence-case labels per Tier 3 compliance\n * \n * Features:\n * - Full null-safety with graceful fallbacks\n * - WCAG 2.1 AA accessibility\n * - Computed orbital parameters (period, velocity)\n * - Orbit type classification with Zendir-branded color coding\n * - Loading and empty states\n */\n\nimport React, { memo, useMemo } from 'react';\nimport type { SpacecraftPosition } from '../types';\nimport { estimateOrbitalPeriod, estimateOrbitalVelocity } from '../types';\nimport { useTheme } from '../theme';\nimport { Icon } from '../core/Icon';\nimport { AstroIcon } from '../core/AstroIcon';\nimport { CardHeader } from '../core/CardHeader';\nimport { useCompactMode } from '../hooks';\nimport {\n  formatAltitude,\n  formatVelocity,\n  formatDuration,\n  formatCoordinate,\n  formatDegrees,\n  formatTime,\n  classNames,\n  safeAccentText,\n} from '../utils';\n\nexport interface OrbitCardProps {\n  /** Spacecraft position data */\n  spacecraft?: SpacecraftPosition;\n  /** Show computed orbital parameters (period, velocity) */\n  showComputed?: boolean;\n  /** Loading state */\n  loading?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Enable compact mode - shows condensed view that expands on hover/click */\n  compact?: boolean;\n  /** Start expanded when in compact mode (pinned state) */\n  defaultExpanded?: boolean;\n  /** Callback when pin state changes in compact mode */\n  onPinChange?: (isPinned: boolean) => void;\n}\n\n/**\n * Orbit type information with color and description\n */\ninterface OrbitTypeInfo {\n  color: string;\n  description: string;\n}\n\n/**\n * Get orbit type info with Zendir-branded colors\n * Uses AstroUXDS data visualization palette for orbit classification\n */\nfunction getOrbitTypeInfo(orbitType: string | undefined): OrbitTypeInfo {\n  // Orbit type colors using Zendir-Astro palette\n  // Non-status colors since orbit type is categorical, not status\n  const types: Record<string, OrbitTypeInfo> = {\n    LEO: { color: '#3E3CFF', description: 'Low Earth Orbit (200-2,000 km)' },      // Zendir Electric\n    MEO: { color: '#3548C0', description: 'Medium Earth Orbit (2,000-35,786 km)' }, // Zendir Prussian Blue Light\n    GEO: { color: '#9D70FF', description: 'Geostationary Orbit (~35,786 km)' },     // Zendir Purple\n    HEO: { color: '#1B2DA0', description: 'Highly Elliptical Orbit' },              // Zendir Prussian Blue\n    SSO: { color: '#B48DFF', description: 'Sun-Synchronous Orbit' },                // Zendir Purple Light\n    POLAR: { color: '#6B69FF', description: 'Polar Orbit' },                        // Zendir Electric Light\n    MOLNIYA: { color: '#C9A8FF', description: 'Molniya Orbit (12h period)' },       // Zendir Purple Lighter\n  };\n\n  return types[orbitType?.toUpperCase() ?? ''] ?? { color: '#a4abb6', description: 'Unknown orbit type' };\n}\n\n/**\n * OrbitCard - Displays spacecraft orbital parameters\n * \n * @example\n * ```tsx\n * <OrbitCard\n *   spacecraft={spacecraftData}\n *   showComputed\n * />\n * ```\n */\nexport const OrbitCard = memo(function OrbitCard({\n  spacecraft,\n  showComputed = true,\n  loading = false,\n  className = '',\n  compact = false,\n  defaultExpanded = false,\n  onPinChange,\n}: OrbitCardProps): React.ReactElement {\n  const { tokens, theme, prefersReducedMotion } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const isBoldVariant = theme === 'transparent-bold';\n  const isMinimalVariant = theme === 'transparent-minimal';\n  const useGlassMode = isBoldVariant || isMinimalVariant;\n  \n  // Glass accent colors for bold/minimal themes (matching Container/AstroChart)\n  const glassAccentColor = tokens.colors.accent.primary;\n  const glassAccentMuted = `${glassAccentColor}66`;\n  \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  // Glass mode container style (matching Container/AstroChart for bold/minimal)\n  const glassContainerStyle: React.CSSProperties = useGlassMode ? {\n    backgroundColor: 'rgba(10, 15, 25, 0.35)',\n    backdropFilter: 'blur(12px)',\n    WebkitBackdropFilter: 'blur(12px)',\n    border: `1px solid ${glassAccentMuted}`,\n    borderTop: isBoldVariant ? `2px solid ${glassAccentColor}` : `1px solid ${glassAccentColor}`,\n  } : {};\n\n  // Compact mode state management\n  const { expanded, isPinned, handlers, transitionDuration } = useCompactMode({\n    compact,\n    defaultExpanded,\n    onPinChange,\n  });\n\n  // Computed orbital parameters\n  const orbitInfo = useMemo(() => getOrbitTypeInfo(spacecraft?.orbitType), [spacecraft?.orbitType]);\n\n  const computedPeriod = useMemo(() => {\n    if (!spacecraft?.altitude) return null;\n    try {\n      return estimateOrbitalPeriod(spacecraft.altitude);\n    } catch {\n      return null;\n    }\n  }, [spacecraft?.altitude]);\n\n  const computedVelocity = useMemo(() => {\n    if (!spacecraft?.altitude) return null;\n    try {\n      return estimateOrbitalVelocity(spacecraft.altitude);\n    } catch {\n      return null;\n    }\n  }, [spacecraft?.altitude]);\n\n  // Loading state\n  if (loading) {\n    return (\n      <div\n        className={classNames('zendir-orbit-card', 'loading', className)}\n        role=\"article\"\n        aria-busy=\"true\"\n        aria-label=\"Loading orbit data\"\n        style={{\n          backgroundColor: cardBg,\n          ...cardGlass,\n          ...(tokens.colors.border.cardStyle ?? {}),\n          borderRadius: tokens.borderRadius.lg,\n          padding: tokens.spacing.md,\n          minHeight: 200,\n        }}\n      >\n        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>\n          <div style={{ width: 40, height: 40, borderRadius: 8, backgroundColor: 'rgba(255,255,255,0.1)' }} />\n          <div style={{ flex: 1 }}>\n            <div style={{ height: 18, width: '50%', backgroundColor: 'rgba(255,255,255,0.1)', borderRadius: 4 }} />\n            <div style={{ height: 12, width: '70%', backgroundColor: 'rgba(255,255,255,0.06)', borderRadius: 4, marginTop: 6 }} />\n          </div>\n        </div>\n        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>\n          {[1, 2, 3, 4].map((i) => (\n            <div key={i}>\n              <div style={{ height: 10, width: '40%', backgroundColor: 'rgba(255,255,255,0.06)', borderRadius: 2 }} />\n              <div style={{ height: 20, width: '60%', backgroundColor: 'rgba(255,255,255,0.1)', borderRadius: 4, marginTop: 4 }} />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Empty state\n  if (!spacecraft) {\n    return (\n      <div\n        className={classNames('zendir-orbit-card', 'empty', className)}\n        role=\"article\"\n        aria-label=\"No orbit data\"\n        style={{\n          backgroundColor: cardBg,\n          ...cardGlass,\n          ...(tokens.colors.border.cardStyleDashed ?? {}),\n          borderRadius: tokens.borderRadius.lg,\n          padding: tokens.spacing.lg,\n          textAlign: 'center',\n          color: tokens.colors.text.tertiary,\n        }}\n      >\n        <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"currentColor\" style={{ opacity: 0.5, marginBottom: 8 }}>\n          <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\" />\n          <ellipse cx=\"12\" cy=\"12\" rx=\"10\" ry=\"4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1\" strokeDasharray=\"3,3\" />\n        </svg>\n        <p style={{ margin: 0, fontSize: tokens.typography.body[2].fontSize }}>No orbit data available</p>\n      </div>\n    );\n  }\n\n  // Compact view - shows key orbit info in a single row\n  if (compact && !expanded) {\n    return (\n      <article\n        className={classNames('zendir-orbit-card', 'compact', className)}\n        {...handlers}\n        aria-label={`Orbit: ${spacecraft.orbitType ?? 'Unknown'} (compact)`}\n        style={{\n          position: 'relative',\n          overflow: 'hidden',\n          ...(useGlassMode ? glassContainerStyle : {\n            backgroundColor: cardBg,\n            ...cardGlass,\n            ...(tokens.colors.border.cardStyle ?? {}),\n          }),\n          borderRadius: tokens.borderRadius.lg,\n          padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\n          fontFamily: tokens.typography.fontFamily.primary,\n          color: tokens.colors.text.primary,\n          fontSize: tokens.typography.fontSize.sm,\n          cursor: 'pointer',\n          transition: `all ${transitionDuration} ease-out`,\n          transform: 'scale(1)',\n        }}\n        onMouseEnter={(e) => {\n          handlers.onMouseEnter();\n          if (!prefersReducedMotion) {\n            (e.currentTarget as HTMLElement).style.transform = 'scale(1.01)';\n            (e.currentTarget as HTMLElement).style.boxShadow = `0 4px 12px ${orbitInfo.color}20`;\n          }\n        }}\n        onMouseLeave={(e) => {\n          handlers.onMouseLeave();\n          (e.currentTarget as HTMLElement).style.transform = 'scale(1)';\n          (e.currentTarget as HTMLElement).style.boxShadow = '';\n        }}\n      >\n        {/* Glass gradient overlay for bold/minimal themes */}\n        {useGlassMode && (\n          <div\n            style={{\n              position: 'absolute',\n              inset: 0,\n              background: 'linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)',\n              pointerEvents: 'none',\n              zIndex: 0,\n            }}\n          />\n        )}\n        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: tokens.spacing.md, position: 'relative', zIndex: 1 }}>\n          {/* Left side: Icon + Title + Accent line */}\n          <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm, flex: 1, minWidth: 0 }}>\n            <AstroIcon name=\"360\" size={16} color={orbitInfo.color} />\n            <span style={{ \n              fontWeight: tokens.typography.fontWeight.medium,\n              color: useGlassMode ? glassAccentColor : undefined,\n              textShadow: useGlassMode ? `0 0 16px ${glassAccentMuted}` : undefined,\n            }}>\n              Orbit\n            </span>\n            {useGlassMode && (\n              <div style={{\n                flex: 1,\n                height: isBoldVariant ? '2px' : '1px',\n                minWidth: 20,\n                background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 60%, transparent 100%)`,\n                boxShadow: isBoldVariant ? `0 0 8px ${glassAccentMuted}` : undefined,\n              }} />\n            )}\n          </div>\n          \n          {/* Right side: Orbit badge + Altitude + Pin */}\n          <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm, flexShrink: 0 }}>\n            <span\n              style={{\n                backgroundColor: `${orbitInfo.color}20`,\n                color: orbitInfo.color,\n                padding: `2px 6px`,\n                borderRadius: tokens.borderRadius.sm,\n                fontSize: tokens.typography.fontSize.xs,\n                fontWeight: tokens.typography.fontWeight.medium,\n              }}\n            >\n              {spacecraft.orbitType ?? '—'}\n            </span>\n            <span style={{ \n              fontVariantNumeric: 'tabular-nums', \n              fontFamily: tokens.typography.fontFamily.mono,\n              fontSize: tokens.typography.fontSize.xs,\n            }}>\n              {formatAltitude(spacecraft.altitude)}\n            </span>\n            {isPinned && (\n              <Icon name=\"lock\" size={12} color={tokens.colors.accent.primary} />\n            )}\n          </div>\n        </div>\n      </article>\n    );\n  }\n\n  const labelStyle: React.CSSProperties = {\n    color: tokens.colors.text.secondary, // WCAG AA compliant - 4.5:1 contrast\n    fontSize: tokens.typography.fontSize.xs,\n    fontWeight: tokens.typography.fontWeight.medium,\n  };\n\n  const valueStyle: React.CSSProperties = {\n    color: tokens.colors.text.primary,\n    fontWeight: tokens.typography.fontWeight.medium,\n    fontFamily: tokens.typography.fontFamily.mono,\n    fontVariantNumeric: 'tabular-nums',\n    fontSize: tokens.typography.fontSize.md,\n    marginTop: 2,\n  };\n\n  return (\n    <article\n      className={classNames('zendir-orbit-card', compact ? 'expanded' : '', className)}\n      {...(compact ? handlers : {})}\n      role={compact ? handlers.role : 'article'}\n      tabIndex={compact ? handlers.tabIndex : undefined}\n      aria-expanded={compact ? handlers['aria-expanded'] : undefined}\n      aria-label={`Orbit data for ${spacecraft.name ?? spacecraft.id}`}\n      style={{\n        position: 'relative',\n        overflow: 'hidden',\n        ...(useGlassMode ? glassContainerStyle : {\n          backgroundColor: cardBg,\n          ...cardGlass,\n          ...(tokens.colors.border.cardStyle ?? {}),\n        }),\n        borderRadius: tokens.borderRadius.lg,\n        padding: tokens.spacing.md,\n        fontFamily: tokens.typography.fontFamily.primary,\n        cursor: compact ? 'pointer' : undefined,\n        transition: compact ? `all ${transitionDuration} ease-out` : undefined,\n        color: tokens.colors.text.primary,\n        fontSize: tokens.typography.fontSize.sm,\n      }}\n    >\n      {/* Glass gradient overlay for bold/minimal themes */}\n      {useGlassMode && (\n        <div\n          style={{\n            position: 'absolute',\n            inset: 0,\n            background: 'linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)',\n            pointerEvents: 'none',\n            zIndex: 0,\n          }}\n        />\n      )}\n      \n      {/* Unified Card Header - handles all theme variants */}\n      {/* OrbitCard uses categorical colors (orbit type), not status colors */}\n      <CardHeader\n        icon=\"360\"\n        title={spacecraft.name ?? spacecraft.id ?? 'Unknown'}\n        subtitle={orbitInfo.description}\n        badge={spacecraft.orbitType ?? 'ORBIT'}\n        badgeColor={orbitInfo.color}\n        iconColor={orbitInfo.color}\n        hideStatusIndicator\n      />\n\n      {/* Orbital Parameters */}\n      <section aria-label=\"Orbital parameters\">\n        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: tokens.spacing.md }}>\n          <div>\n            <span style={labelStyle}>Altitude</span>\n            <div style={{ ...valueStyle, color: safeAccentText(tokens.colors.accent.primary) }}>\n              {formatAltitude(spacecraft.altitude)}\n            </div>\n          </div>\n          <div>\n            <span style={labelStyle}>Velocity</span>\n            <div style={valueStyle}>\n              {spacecraft.velocity\n                ? formatVelocity(spacecraft.velocity)\n                : computedVelocity\n                ? formatVelocity(computedVelocity)\n                : '-- km/s'}\n            </div>\n          </div>\n          {spacecraft.inclination !== undefined && (\n            <div>\n              <span style={labelStyle}>Inclination</span>\n              <div style={valueStyle}>{formatDegrees(spacecraft.inclination)}</div>\n            </div>\n          )}\n          {showComputed && computedPeriod !== null && (\n            <div>\n              <span style={labelStyle}>Period</span>\n              <div style={valueStyle}>{formatDuration(computedPeriod)}</div>\n            </div>\n          )}\n        </div>\n      </section>\n\n      {/* Current Position */}\n      <section\n        style={{\n          marginTop: tokens.spacing.lg,\n          paddingTop: tokens.spacing.lg,\n          borderTop: `1px solid ${tokens.colors.border.muted}`,\n        }}\n        aria-label=\"Current position\"\n      >\n        <h4\n          style={{\n            margin: `0 0 ${tokens.spacing.sm} 0`,\n            ...labelStyle,\n            display: 'flex',\n            alignItems: 'center',\n            gap: 4,\n          }}\n        >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <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\" />\n          </svg>\n          Current Position\n        </h4>\n        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: tokens.spacing.md }}>\n          <div>\n            <span style={labelStyle}>Latitude</span>\n            <div style={valueStyle}>{formatCoordinate(spacecraft.latitude, 'lat')}</div>\n          </div>\n          <div>\n            <span style={labelStyle}>Longitude</span>\n            <div style={valueStyle}>{formatCoordinate(spacecraft.longitude, 'lon')}</div>\n          </div>\n        </div>\n      </section>\n\n      {/* Timestamp */}\n      {spacecraft.timestamp && (\n        <footer\n          style={{\n            marginTop: tokens.spacing.md,\n            fontSize: tokens.typography.fontSize.xs,\n            color: tokens.colors.text.tertiary,\n            textAlign: 'right',\n          }}\n        >\n          <time dateTime={spacecraft.timestamp}>{formatTime(spacecraft.timestamp)} UTC</time>\n        </footer>\n      )}\n    </article>\n  );\n});\n"],"names":["OrbitCard"],"mappings":"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"}

package/dist/react/cards/SpacecraftCard.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+import { SpacecraftPosition, TelemetryData } from '../types';
+
+type ZendirClient = any;
+export interface SpacecraftCardProps {
+    /** Spacecraft position data (for direct data mode) */
+    spacecraft?: SpacecraftPosition;
+    /** Optional telemetry data */
+    telemetry?: TelemetryData;
+    /** Show expanded orbit info */
+    showOrbit?: boolean;
+    /** Show telemetry summary */
+    showTelemetry?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Click handler */
+    onClick?: (spacecraft: SpacecraftPosition) => void;
+    /** Custom className */
+    className?: string;
+    /** Connected mode: SDK client */
+    client?: ZendirClient;
+    /** Connected mode: Spacecraft ID to fetch */
+    spacecraftId?: string;
+    /** Enable compact mode - shows condensed view that expands on hover/click */
+    compact?: boolean;
+    /** Start expanded when in compact mode (pinned state) */
+    defaultExpanded?: boolean;
+    /** Callback when pin state changes in compact mode */
+    onPinChange?: (isPinned: boolean) => void;
+}
+/**
+ * SpacecraftCard - Displays spacecraft position and status information
+ *
+ * @example
+ * ```tsx
+ * // Direct data mode
+ * <SpacecraftCard
+ *   spacecraft={spacecraftData}
+ *   telemetry={telemetryData}
+ *   showOrbit
+ *   showTelemetry
+ *   onClick={() => {}}
+ * />
+ *
+ * // Connected mode (auto-fetches via SDK)
+ * <SpacecraftCard
+ *   client={zendirClient}
+ *   spacecraftId="iss-25544"
+ *   showTelemetry
+ * />
+ * ```
+ */
+export declare const SpacecraftCard: React.NamedExoticComponent<SpacecraftCardProps>;
+export {};