@zendir/ui 0.1.0

package/dist/react/cards/AccessCard.js

@@ -0,0 +1,410 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { Icon } from "../core/Icon.js";
+import { CardHeader } from "../core/CardHeader.js";
+import { getStatusColor, classNames, safeNumber, formatDegrees, formatDecibels, formatDataRate, safeAccentText, formatTime, formatDuration } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+import { useCompactMode } from "../hooks/useCompactMode.js";
+const AccessCard = memo(function AccessCard2({
+  access,
+  groundStationName,
+  spacecraftName,
+  upcomingWindows = [],
+  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 isAccessible = (access == null ? void 0 : access.isAccessible) ?? false;
+  const statusLevel = isAccessible ? "normal" : "off";
+  const statusColor = getStatusColor(statusLevel);
+  const signalStatus = useMemo(() => {
+    const signal = access == null ? void 0 : access.signalStrength;
+    if (signal === void 0 || signal === null) return "off";
+    if (signal > 70) return "normal";
+    if (signal > 40) return "caution";
+    if (signal > 20) return "serious";
+    return "critical";
+  }, [access == null ? void 0 : access.signalStrength]);
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames("zendir-access-card", "loading", className),
+        role: "article",
+        "aria-busy": "true",
+        "aria-label": "Loading access data",
+        style: {
+          backgroundColor: cardBg,
+          ...cardGlass,
+          ...tokens.colors.border.cardStyle ?? {},
+          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: 60, backgroundColor: "rgba(255,255,255,0.1)", borderRadius: 4 } })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }, children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx("div", { style: { height: 40, backgroundColor: "rgba(255,255,255,0.06)", borderRadius: 4 } }, i)) })
+        ]
+      }
+    );
+  }
+  if (!access) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames("zendir-access-card", "empty", className),
+        role: "article",
+        "aria-label": "No access 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__ */ jsx("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 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }),
+          /* @__PURE__ */ jsxs("p", { style: { margin: 0, fontSize: tokens.typography.body[2].fontSize }, children: [
+            groundStationName,
+            ": No access data"
+          ] })
+        ]
+      }
+    );
+  }
+  if (compact && !expanded) {
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        className: classNames("zendir-access-card", "compact", className),
+        ...handlers,
+        "aria-label": `Access: ${groundStationName} (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 ${statusColor}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(
+                "div",
+                {
+                  style: {
+                    width: 10,
+                    height: 10,
+                    borderRadius: "50%",
+                    backgroundColor: statusColor,
+                    boxShadow: isAccessible ? `0 0 6px ${statusColor}` : "none",
+                    flexShrink: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: {
+                fontWeight: tokens.typography.fontWeight.medium,
+                color: useGlassMode ? glassAccentColor : void 0,
+                textShadow: useGlassMode ? `0 0 16px ${glassAccentMuted}` : void 0
+              }, children: groundStationName.split(" ")[0] }),
+              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: {
+                color: statusColor,
+                fontSize: tokens.typography.fontSize.xs,
+                fontWeight: tokens.typography.fontWeight.medium
+              }, children: isAccessible ? "AOS" : "LOS" }),
+              access.signalStrength !== void 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                /* @__PURE__ */ jsx(Icon, { name: "antenna", size: 12, color: tokens.colors.text.secondary }),
+                /* @__PURE__ */ jsxs("span", { style: {
+                  fontVariantNumeric: "tabular-nums",
+                  fontFamily: tokens.typography.fontFamily.mono,
+                  fontSize: tokens.typography.fontSize.xs
+                }, children: [
+                  safeNumber(access.signalStrength, 0),
+                  "%"
+                ] })
+              ] }),
+              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",
+    marginTop: 2
+  };
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: classNames("zendir-access-card", className),
+      "aria-label": `${spacecraftName ?? "Spacecraft"} access to ${groundStationName}`,
+      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,
+        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: "antenna-transmit",
+            title: groundStationName,
+            subtitle: spacecraftName,
+            status: statusLevel,
+            badge: isAccessible ? "Link" : "No Link",
+            badgeColor: statusColor
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "section",
+          {
+            style: {
+              paddingTop: tokens.spacing.md,
+              borderTop: `1px solid ${tokens.colors.border.muted}`,
+              marginBottom: tokens.spacing.md
+            },
+            "aria-label": "Access metrics",
+            children: /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: tokens.spacing.sm }, children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Elevation" }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      ...valueStyle,
+                      color: (access.elevation ?? 0) > 0 ? tokens.colors.status.normal : tokens.colors.status.off
+                    },
+                    children: formatDegrees(access.elevation)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Azimuth" }),
+                /* @__PURE__ */ jsx("div", { style: valueStyle, children: formatDegrees(access.azimuth) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Range" }),
+                /* @__PURE__ */ jsxs("div", { style: valueStyle, children: [
+                  safeNumber(access.slantRange, 0),
+                  " km"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Signal" }),
+                /* @__PURE__ */ jsxs("div", { style: { ...valueStyle, color: getStatusColor(signalStatus) }, children: [
+                  safeNumber(access.signalStrength, 0, "--"),
+                  "%"
+                ] })
+              ] })
+            ] })
+          }
+        ),
+        access.linkBudget && isAccessible && /* @__PURE__ */ jsxs(
+          "section",
+          {
+            style: {
+              paddingTop: tokens.spacing.md,
+              borderTop: `1px solid ${tokens.colors.border.muted}`,
+              marginBottom: tokens.spacing.md
+            },
+            "aria-label": "Link budget",
+            children: [
+              /* @__PURE__ */ jsx(
+                "h4",
+                {
+                  style: {
+                    margin: `0 0 ${tokens.spacing.sm} 0`,
+                    ...labelStyle
+                  },
+                  children: "Link Budget"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: tokens.spacing.sm }, children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Rx Power" }),
+                  /* @__PURE__ */ jsxs("div", { style: valueStyle, children: [
+                    formatDecibels(access.linkBudget.receivedPower),
+                    "m"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("span", { style: labelStyle, children: "SNR" }),
+                  /* @__PURE__ */ jsx("div", { style: valueStyle, children: formatDecibels(access.linkBudget.snr) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Data Rate" }),
+                  /* @__PURE__ */ jsx("div", { style: { ...valueStyle, color: safeAccentText(tokens.colors.accent.primary) }, children: formatDataRate(access.linkBudget.dataRate) })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        upcomingWindows.length > 0 && /* @__PURE__ */ jsxs("section", { "aria-label": "Upcoming passes", children: [
+          /* @__PURE__ */ jsx(
+            "h4",
+            {
+              style: {
+                margin: `0 0 ${tokens.spacing.sm} 0`,
+                ...labelStyle
+              },
+              children: "Upcoming Passes"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: upcomingWindows.slice(0, 3).map((window, idx) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                padding: tokens.spacing.sm,
+                backgroundColor: tokens.colors.background.base,
+                borderRadius: tokens.borderRadius.sm
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        fontSize: tokens.typography.fontSize.xs,
+                        fontWeight: tokens.typography.fontWeight.medium,
+                        fontFamily: tokens.typography.fontFamily.mono
+                      },
+                      children: formatTime(String(window.startTime ?? window.aos), false)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { style: { fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.tertiary }, children: formatDuration(window.duration ?? 0) })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      fontSize: tokens.typography.fontSize.xs,
+                      color: tokens.colors.status.normal,
+                      fontFamily: tokens.typography.fontFamily.mono
+                    },
+                    children: [
+                      safeNumber(window.maxElevation, 0),
+                      "° max"
+                    ]
+                  }
+                )
+              ]
+            },
+            idx
+          )) })
+        ] })
+      ]
+    }
+  );
+});
+export {
+  AccessCard
+};
+//# sourceMappingURL=AccessCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccessCard.js","sources":["../../../src/react/cards/AccessCard.tsx"],"sourcesContent":["/**\n * @zendir/ui - AccessCard Component\n * \n * Enterprise-grade access/link status card between spacecraft and ground station.\n * \n * AstroUXDS Compliance:\n * - Status colors used semantically for link/signal status\n * - Normal (green) = accessible, Off (grey) = no contact\n * - Signal strength uses status gradient (normal → caution → serious → critical)\n * - Zendir accent colors for decorative elements\n * - Tabular numbers for time/data display\n * \n * Features:\n * - Full null-safety with graceful fallbacks\n * - WCAG 2.1 AA accessibility\n * - Link budget display\n * - Upcoming pass windows\n * - Loading and empty states\n */\n\nimport React, { memo, useMemo } from 'react';\nimport type { AccessData, AccessWindow } from '../types';\nimport { useTheme } from '../theme';\nimport { Icon } from '../core/Icon';\nimport { CardHeader } from '../core/CardHeader';\nimport { useCompactMode } from '../hooks';\nimport {\n  safeNumber,\n  formatDuration,\n  formatTime,\n  formatDataRate,\n  formatDecibels,\n  formatDegrees,\n  classNames,\n  getStatusColor,\n  safeAccentText,\n  type StatusLevel,\n} from '../utils';\n\nexport interface AccessCardProps {\n  /** Current access data */\n  access?: AccessData;\n  /** Ground station name */\n  groundStationName: string;\n  /** Spacecraft name */\n  spacecraftName?: string;\n  /** Next access windows */\n  upcomingWindows?: AccessWindow[];\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 * AccessCard - Displays spacecraft-ground station link status\n * \n * @example\n * ```tsx\n * <AccessCard\n *   access={accessData}\n *   groundStationName=\"Goldstone\"\n *   spacecraftName=\"ISS\"\n *   upcomingWindows={windows}\n * />\n * ```\n */\nexport const AccessCard = memo(function AccessCard({\n  access,\n  groundStationName,\n  spacecraftName,\n  upcomingWindows = [],\n  loading = false,\n  className = '',\n  compact = false,\n  defaultExpanded = false,\n  onPinChange,\n}: AccessCardProps): 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 status\n  const isAccessible = access?.isAccessible ?? false;\n  const statusLevel: StatusLevel = isAccessible ? 'normal' : 'off';\n  const statusColor = getStatusColor(statusLevel);\n\n  const signalStatus = useMemo((): StatusLevel => {\n    const signal = access?.signalStrength;\n    if (signal === undefined || signal === null) return 'off';\n    if (signal > 70) return 'normal';\n    if (signal > 40) return 'caution';\n    if (signal > 20) return 'serious';\n    return 'critical';\n  }, [access?.signalStrength]);\n\n  // Loading state\n  if (loading) {\n    return (\n      <div\n        className={classNames('zendir-access-card', 'loading', className)}\n        role=\"article\"\n        aria-busy=\"true\"\n        aria-label=\"Loading access 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: 180,\n        }}\n      >\n        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>\n          <div style={{ height: 24, width: '40%', backgroundColor: 'rgba(255,255,255,0.1)', borderRadius: 4 }} />\n          <div style={{ height: 24, width: 60, backgroundColor: 'rgba(255,255,255,0.1)', borderRadius: 4 }} />\n        </div>\n        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>\n          {[1, 2, 3, 4].map((i) => (\n            <div key={i} style={{ height: 40, backgroundColor: 'rgba(255,255,255,0.06)', borderRadius: 4 }} />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  // Empty state\n  if (!access) {\n    return (\n      <div\n        className={classNames('zendir-access-card', 'empty', className)}\n        role=\"article\"\n        aria-label=\"No access 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 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\" />\n        </svg>\n        <p style={{ margin: 0, fontSize: tokens.typography.body[2].fontSize }}>{groundStationName}: No access data</p>\n      </div>\n    );\n  }\n\n  // Compact view - shows key access info in a single row\n  if (compact && !expanded) {\n    return (\n      <article\n        className={classNames('zendir-access-card', 'compact', className)}\n        {...handlers}\n        aria-label={`Access: ${groundStationName} (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 ${statusColor}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: Status indicator + Name + Accent line */}\n          <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm, flex: 1, minWidth: 0 }}>\n            <div\n              style={{\n                width: 10,\n                height: 10,\n                borderRadius: '50%',\n                backgroundColor: statusColor,\n                boxShadow: isAccessible ? `0 0 6px ${statusColor}` : 'none',\n                flexShrink: 0,\n              }}\n            />\n            <span style={{ \n              fontWeight: tokens.typography.fontWeight.medium,\n              color: useGlassMode ? glassAccentColor : undefined,\n              textShadow: useGlassMode ? `0 0 16px ${glassAccentMuted}` : undefined,\n            }}>\n              {groundStationName.split(' ')[0]}\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: Status badge + Signal strength + Pin */}\n          <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm, flexShrink: 0 }}>\n            <span style={{ \n              color: statusColor, \n              fontSize: tokens.typography.fontSize.xs,\n              fontWeight: tokens.typography.fontWeight.medium,\n            }}>\n              {isAccessible ? 'AOS' : 'LOS'}\n            </span>\n            {access.signalStrength !== undefined && (\n              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>\n                <Icon name=\"antenna\" size={12} color={tokens.colors.text.secondary} />\n                <span style={{ \n                  fontVariantNumeric: 'tabular-nums', \n                  fontFamily: tokens.typography.fontFamily.mono,\n                  fontSize: tokens.typography.fontSize.xs,\n                }}>\n                  {safeNumber(access.signalStrength, 0)}%\n                </span>\n              </div>\n            )}\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    marginTop: 2,\n  };\n\n  return (\n    <article\n      className={classNames('zendir-access-card', className)}\n      aria-label={`${spacecraftName ?? 'Spacecraft'} access to ${groundStationName}`}\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        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      <CardHeader\n        icon=\"antenna-transmit\"\n        title={groundStationName}\n        subtitle={spacecraftName}\n        status={statusLevel}\n        badge={isAccessible ? 'Link' : 'No Link'}\n        badgeColor={statusColor}\n      />\n\n      {/* Access Metrics */}\n      <section\n        style={{\n          paddingTop: tokens.spacing.md,\n          borderTop: `1px solid ${tokens.colors.border.muted}`,\n          marginBottom: tokens.spacing.md,\n        }}\n        aria-label=\"Access metrics\"\n      >\n        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: tokens.spacing.sm }}>\n          <div>\n            <span style={labelStyle}>Elevation</span>\n            <div\n              style={{\n                ...valueStyle,\n                color: (access.elevation ?? 0) > 0 ? tokens.colors.status.normal : tokens.colors.status.off,\n              }}\n            >\n              {formatDegrees(access.elevation)}\n            </div>\n          </div>\n          <div>\n            <span style={labelStyle}>Azimuth</span>\n            <div style={valueStyle}>{formatDegrees(access.azimuth)}</div>\n          </div>\n          <div>\n            <span style={labelStyle}>Range</span>\n            <div style={valueStyle}>{safeNumber(access.slantRange, 0)} km</div>\n          </div>\n          <div>\n            <span style={labelStyle}>Signal</span>\n            <div style={{ ...valueStyle, color: getStatusColor(signalStatus) }}>\n              {safeNumber(access.signalStrength, 0, '--')}%\n            </div>\n          </div>\n        </div>\n      </section>\n\n      {/* Link Budget */}\n      {access.linkBudget && isAccessible && (\n        <section\n          style={{\n            paddingTop: tokens.spacing.md,\n            borderTop: `1px solid ${tokens.colors.border.muted}`,\n            marginBottom: tokens.spacing.md,\n          }}\n          aria-label=\"Link budget\"\n        >\n          <h4\n            style={{\n              margin: `0 0 ${tokens.spacing.sm} 0`,\n              ...labelStyle,\n            }}\n          >\n            Link Budget\n          </h4>\n          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: tokens.spacing.sm }}>\n            <div>\n              <span style={labelStyle}>Rx Power</span>\n              <div style={valueStyle}>{formatDecibels(access.linkBudget.receivedPower)}m</div>\n            </div>\n            <div>\n              <span style={labelStyle}>SNR</span>\n              <div style={valueStyle}>{formatDecibels(access.linkBudget.snr)}</div>\n            </div>\n            <div>\n              <span style={labelStyle}>Data Rate</span>\n              <div style={{ ...valueStyle, color: safeAccentText(tokens.colors.accent.primary) }}>\n                {formatDataRate(access.linkBudget.dataRate)}\n              </div>\n            </div>\n          </div>\n        </section>\n      )}\n\n      {/* Upcoming Windows */}\n      {upcomingWindows.length > 0 && (\n        <section aria-label=\"Upcoming passes\">\n          <h4\n            style={{\n              margin: `0 0 ${tokens.spacing.sm} 0`,\n              ...labelStyle,\n            }}\n          >\n            Upcoming Passes\n          </h4>\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>\n            {upcomingWindows.slice(0, 3).map((window, idx) => (\n              <div\n                key={idx}\n                style={{\n                  display: 'flex',\n                  justifyContent: 'space-between',\n                  alignItems: 'center',\n                  padding: tokens.spacing.sm,\n                  backgroundColor: tokens.colors.background.base,\n                  borderRadius: tokens.borderRadius.sm,\n                }}\n              >\n                <div>\n                  <div\n                    style={{\n                      fontSize: tokens.typography.fontSize.xs,\n                      fontWeight: tokens.typography.fontWeight.medium,\n                      fontFamily: tokens.typography.fontFamily.mono,\n                    }}\n                  >\n                    {formatTime(String(window.startTime ?? window.aos), false)}\n                  </div>\n                  <div style={{ fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.tertiary }}>\n                    {formatDuration(window.duration ?? 0)}\n                  </div>\n                </div>\n                <div\n                  style={{\n                    fontSize: tokens.typography.fontSize.xs,\n                    color: tokens.colors.status.normal,\n                    fontFamily: tokens.typography.fontFamily.mono,\n                  }}\n                >\n                  {safeNumber(window.maxElevation, 0)}° max\n                </div>\n              </div>\n            ))}\n          </div>\n        </section>\n      )}\n    </article>\n  );\n});\n"],"names":["AccessCard"],"mappings":"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"}

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

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { SpacecraftPosition } from '../types';
+
+export interface OrbitCardProps {
+    /** Spacecraft position data */
+    spacecraft?: SpacecraftPosition;
+    /** Show computed orbital parameters (period, velocity) */
+    showComputed?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Custom className */
+    className?: 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;
+}
+/**
+ * OrbitCard - Displays spacecraft orbital parameters
+ *
+ * @example
+ * ```tsx
+ * <OrbitCard
+ *   spacecraft={spacecraftData}
+ *   showComputed
+ * />
+ * ```
+ */
+export declare const OrbitCard: React.NamedExoticComponent<OrbitCardProps>;