@zendir/ui 0.1.0

package/dist/react/hooks/useZendirSession.js

@@ -0,0 +1,148 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+let loadState = "pending";
+let sdkModule = null;
+const subscribers = /* @__PURE__ */ new Set();
+function subscribe(callback) {
+  subscribers.add(callback);
+  return () => subscribers.delete(callback);
+}
+function notifySubscribers() {
+  subscribers.forEach((cb) => cb());
+}
+async function loadZendirSDK() {
+  if (loadState === "loaded") {
+    return sdkModule;
+  }
+  if (loadState === "failed") {
+    return null;
+  }
+  if (loadState === "loading") {
+    return new Promise((resolve) => {
+      const unsub = subscribe(() => {
+        unsub();
+        resolve(sdkModule);
+      });
+    });
+  }
+  loadState = "loading";
+  try {
+    const mod = await import(
+      /* @vite-ignore */
+      "@zendir/sdk"
+    );
+    sdkModule = { getZendirClient: mod.getZendirClient };
+    loadState = "loaded";
+    notifySubscribers();
+    return sdkModule;
+  } catch (err) {
+    loadState = "failed";
+    notifySubscribers();
+    return null;
+  }
+}
+function useZendirSession(options = {}) {
+  const { apiKey, baseUrl, autoConnect = false, debug = false } = options;
+  const [sdkLoaded, setSdkLoaded] = useState(loadState === "loaded");
+  const [sdkFailed, setSdkFailed] = useState(loadState === "failed");
+  const clientRef = useRef(null);
+  const [session, setSession] = useState(null);
+  const [simulation, setSimulation] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let mounted = true;
+    const unsubscribe = subscribe(() => {
+      if (mounted) {
+        setSdkLoaded(loadState === "loaded");
+        setSdkFailed(loadState === "failed");
+      }
+    });
+    if (loadState === "pending") {
+      loadZendirSDK().then((mod) => {
+        if (mounted && mod) {
+          clientRef.current = mod.getZendirClient({ apiKey, baseUrl, debug });
+        }
+      });
+    } else if (loadState === "loaded" && sdkModule) {
+      clientRef.current = sdkModule.getZendirClient({ apiKey, baseUrl, debug });
+    }
+    return () => {
+      mounted = false;
+      unsubscribe();
+    };
+  }, [apiKey, baseUrl, debug]);
+  useEffect(() => {
+    if (sdkFailed) {
+      setError("@zendir/sdk is not installed. Install with: npm install @zendir/sdk");
+    }
+  }, [sdkFailed]);
+  const connect = useCallback(async () => {
+    if (!clientRef.current) {
+      setError("@zendir/sdk is not available");
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const sessionInfo = await clientRef.current.createSession();
+      setSession(sessionInfo);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to connect";
+      setError(message);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  const createSimulation = useCallback(async (params) => {
+    if (!clientRef.current) {
+      setError("@zendir/sdk is not available");
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const simInfo = await clientRef.current.createSimulation({
+        name: params.name,
+        spacecraft: params.spacecraft
+      });
+      setSimulation(simInfo);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to create simulation";
+      setError(message);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  const disconnect = useCallback(() => {
+    if (clientRef.current) {
+      clientRef.current.clearSession();
+    }
+    setSession(null);
+    setSimulation(null);
+    setError(null);
+  }, []);
+  useEffect(() => {
+    if (autoConnect && apiKey && sdkLoaded && clientRef.current) {
+      connect().catch(() => {
+      });
+    }
+  }, [autoConnect, apiKey, sdkLoaded, connect]);
+  return {
+    session,
+    simulation,
+    isLoading,
+    error,
+    isConnected: !!session && session.status === "active",
+    isSdkAvailable: sdkLoaded && !sdkFailed,
+    client: clientRef.current,
+    connect,
+    createSimulation,
+    disconnect
+  };
+}
+export {
+  useZendirSession
+};
+//# sourceMappingURL=useZendirSession.js.map

package/dist/react/hooks/useZendirSession.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useZendirSession.js","sources":["../../../src/react/hooks/useZendirSession.ts"],"sourcesContent":["/**\n * @zendir/ui - useZendirSession Hook\n * \n * React hook for managing Zendir API session lifecycle.\n * \n * OPTIONAL DEPENDENCY: Requires @zendir/sdk to be installed.\n * If not installed, the hook returns an error state.\n * \n * @example\n * ```tsx\n * import { useZendirSession } from '@zendir/ui/react';\n * \n * function App() {\n *   const { session, connect, isLoading, error } = useZendirSession({\n *     apiKey: 'your-api-key',\n *     autoConnect: true,\n *   });\n *   \n *   if (error) return <div>Error: {error}</div>;\n *   if (isLoading) return <div>Connecting...</div>;\n *   if (!session) return <button onClick={connect}>Connect</button>;\n *   \n *   return <div>Connected: {session.id}</div>;\n * }\n * ```\n */\n\nimport { useState, useEffect, useCallback, useRef } from 'react';\n\n// ============================================================================\n// Types (defined locally to avoid hard dependency on @zendir/sdk)\n// ============================================================================\n\n/** Session info from Zendir API */\nexport interface SessionInfo {\n  id: string;\n  status: 'active' | 'expired' | 'error';\n  createdAt?: string;\n  expiresAt?: string;\n}\n\n/** Simulation info from Zendir API */\nexport interface SimulationInfo {\n  id: string;\n  name?: string;\n  status: 'running' | 'paused' | 'stopped';\n  spacecraftCount?: number;\n}\n\n/** Zendir client interface (matches @zendir/sdk) */\nexport interface ZendirClientInterface {\n  createSession: () => Promise<SessionInfo>;\n  createSimulation: (params: {\n    name?: string;\n    spacecraft: Array<{\n      name: string;\n      tle?: { line1: string; line2: string };\n      catalogNumber?: number;\n    }>;\n  }) => Promise<SimulationInfo>;\n  clearSession: () => void;\n}\n\n// ============================================================================\n// Dynamic SDK Loading\n// ============================================================================\n\ntype LoadState = 'pending' | 'loading' | 'loaded' | 'failed';\nlet loadState: LoadState = 'pending';\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nlet sdkModule: { getZendirClient: (options?: any) => any } | null = null;\nconst subscribers = new Set<() => void>();\n\nfunction subscribe(callback: () => void) {\n  subscribers.add(callback);\n  return () => subscribers.delete(callback);\n}\n\nfunction notifySubscribers() {\n  subscribers.forEach(cb => cb());\n}\n\n/**\n * Dynamically load @zendir/sdk\n * Returns null if not available\n */\nasync function loadZendirSDK(): Promise<typeof sdkModule> {\n  if (loadState === 'loaded') {\n    return sdkModule;\n  }\n  \n  if (loadState === 'failed') {\n    return null;\n  }\n  \n  if (loadState === 'loading') {\n    // Wait for the existing load to complete\n    return new Promise(resolve => {\n      const unsub = subscribe(() => {\n        unsub();\n        resolve(sdkModule);\n      });\n    });\n  }\n  \n  loadState = 'loading';\n  \n  try {\n    // @vite-ignore: optional peer — do not resolve at build time when SDK is not installed\n    const mod = await import(/* @vite-ignore */ '@zendir/sdk');\n    sdkModule = { getZendirClient: mod.getZendirClient };\n    loadState = 'loaded';\n    notifySubscribers();\n    return sdkModule;\n  } catch (err) {\n    loadState = 'failed';\n    notifySubscribers();\n    return null;\n  }\n}\n\n// ============================================================================\n// Hook Types\n// ============================================================================\n\nexport interface UseZendirSessionOptions {\n  /** API key (optional - can be set via client) */\n  apiKey?: string;\n  /** Base URL override */\n  baseUrl?: string;\n  /** Auto-connect on mount */\n  autoConnect?: boolean;\n  /** Enable debug logging */\n  debug?: boolean;\n}\n\nexport interface UseZendirSessionResult {\n  /** Current session info */\n  session: SessionInfo | null;\n  /** Current simulation info */\n  simulation: SimulationInfo | null;\n  /** Loading state */\n  isLoading: boolean;\n  /** Error message */\n  error: string | null;\n  /** Connected status */\n  isConnected: boolean;\n  /** Whether SDK is available */\n  isSdkAvailable: boolean;\n  /** Zendir client instance (null if SDK not loaded) */\n  client: ZendirClientInterface | null;\n  /** Connect/create session */\n  connect: () => Promise<void>;\n  /** Create simulation */\n  createSimulation: (params: {\n    name?: string;\n    spacecraft: Array<{\n      name: string;\n      tle?: { line1: string; line2: string };\n      catalogNumber?: number;\n    }>;\n  }) => Promise<void>;\n  /** Disconnect/clear session */\n  disconnect: () => void;\n}\n\n// ============================================================================\n// Hook Implementation\n// ============================================================================\n\nexport function useZendirSession(\n  options: UseZendirSessionOptions = {}\n): UseZendirSessionResult {\n  const { apiKey, baseUrl, autoConnect = false, debug = false } = options;\n\n  const [sdkLoaded, setSdkLoaded] = useState(loadState === 'loaded');\n  const [sdkFailed, setSdkFailed] = useState(loadState === 'failed');\n  const clientRef = useRef<ZendirClientInterface | null>(null);\n  \n  const [session, setSession] = useState<SessionInfo | null>(null);\n  const [simulation, setSimulation] = useState<SimulationInfo | null>(null);\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  // Load SDK on mount\n  useEffect(() => {\n    let mounted = true;\n    \n    const unsubscribe = subscribe(() => {\n      if (mounted) {\n        setSdkLoaded(loadState === 'loaded');\n        setSdkFailed(loadState === 'failed');\n      }\n    });\n    \n    if (loadState === 'pending') {\n      loadZendirSDK().then((mod) => {\n        if (mounted && mod) {\n          clientRef.current = mod.getZendirClient({ apiKey, baseUrl, debug });\n        }\n      });\n    } else if (loadState === 'loaded' && sdkModule) {\n      clientRef.current = sdkModule.getZendirClient({ apiKey, baseUrl, debug });\n    }\n    \n    return () => {\n      mounted = false;\n      unsubscribe();\n    };\n  }, [apiKey, baseUrl, debug]);\n\n  // Update error if SDK failed to load\n  useEffect(() => {\n    if (sdkFailed) {\n      setError('@zendir/sdk is not installed. Install with: npm install @zendir/sdk');\n    }\n  }, [sdkFailed]);\n\n  const connect = useCallback(async () => {\n    if (!clientRef.current) {\n      setError('@zendir/sdk is not available');\n      return;\n    }\n    \n    setIsLoading(true);\n    setError(null);\n\n    try {\n      const sessionInfo = await clientRef.current.createSession();\n      setSession(sessionInfo);\n    } catch (err) {\n      const message = err instanceof Error ? err.message : 'Failed to connect';\n      setError(message);\n      throw err;\n    } finally {\n      setIsLoading(false);\n    }\n  }, []);\n\n  const createSimulation = useCallback(async (params: {\n    name?: string;\n    spacecraft: Array<{\n      name: string;\n      tle?: { line1: string; line2: string };\n      catalogNumber?: number;\n    }>;\n  }) => {\n    if (!clientRef.current) {\n      setError('@zendir/sdk is not available');\n      return;\n    }\n    \n    setIsLoading(true);\n    setError(null);\n\n    try {\n      const simInfo = await clientRef.current.createSimulation({\n        name: params.name,\n        spacecraft: params.spacecraft,\n      });\n      setSimulation(simInfo);\n    } catch (err) {\n      const message = err instanceof Error ? err.message : 'Failed to create simulation';\n      setError(message);\n      throw err;\n    } finally {\n      setIsLoading(false);\n    }\n  }, []);\n\n  const disconnect = useCallback(() => {\n    if (clientRef.current) {\n      clientRef.current.clearSession();\n    }\n    setSession(null);\n    setSimulation(null);\n    setError(null);\n  }, []);\n\n  // Auto-connect on mount if enabled and SDK is loaded\n  useEffect(() => {\n    if (autoConnect && apiKey && sdkLoaded && clientRef.current) {\n      connect().catch(() => {\n        // Error already set in state\n      });\n    }\n  }, [autoConnect, apiKey, sdkLoaded, connect]);\n\n  return {\n    session,\n    simulation,\n    isLoading,\n    error,\n    isConnected: !!session && session.status === 'active',\n    isSdkAvailable: sdkLoaded && !sdkFailed,\n    client: clientRef.current,\n    connect,\n    createSimulation,\n    disconnect,\n  };\n}\n\n/**\n * Check if @zendir/sdk is available\n */\nexport function isZendirSdkAvailable(): boolean {\n  return loadState === 'loaded' && sdkModule !== null;\n}\n\n/**\n * Preload the @zendir/sdk module\n * Call this early in your app to ensure SDK is ready\n */\nexport async function preloadZendirSdk(): Promise<boolean> {\n  const mod = await loadZendirSDK();\n  return mod !== null;\n}\n\nexport default useZendirSession;\n"],"names":[],"mappings":"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"}

package/dist/react/index.d.ts

@@ -0,0 +1,74 @@
+/**
+ * @zendir/ui - React Components
+ *
+ * Enterprise-grade React components for Zendir space simulation applications.
+ * Designed for use in ChatGPT Apps, Next.js, and standard React applications.
+ *
+ * Features:
+ * - Full TypeScript support (works with or without @zendir/sdk)
+ * - WCAG 2.1 AA accessibility
+ * - Astro UX Design System compliance
+ * - Reduced motion support
+ * - Error boundaries and loading states
+ *
+ * Note: @zendir/sdk is optional. All types are provided locally.
+ * Install @zendir/sdk for API client functionality.
+ */
+export { Icon, getIconNames, isValidIconName, AstroIcon, isAstroIconsAvailable, preloadAstroIcons, getIconAliases, isIconAlias, getAstroIconNames, getAllIconNames, ASTRO_ICON_NAMES, Button, Input, Select, Toggle, Checkbox, Tooltip, Dialog, Badge, Container, Tabs, Pagination, GlassCard, GLASS_COLOR_OVERLAYS, DataValue, DataValueGroup, MessageStream, AppBar, ColorPickerPanel, getPropertyConfig, formatPropertyLabel, deriveStatus, deriveBatteryStatus, formatPropertyValue, createPropertyConfig, getPropertiesByCategory, PROPERTY_PRESETS, CATEGORY_ICONS, CATEGORY_LABELS, NumberInput, SideNav, ToastProvider, useToast, useToastManager, Popover, Menu, Box, Flex, Grid, Stack, HStack, VStack, Center, Spacer, Divider, useBreakpoint, BREAKPOINTS, resolveResponsive, resolveSpacing, ConfirmDialog, ConfirmProvider, useConfirm, PinInput, CopyButton, useCopyToClipboard, DataTable, DataTableRowDetail, ImageGallery, ChatPanel, parseChatResponse, createChatResponseParser, parseMcpToolResult, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT, ConnectionForm, SidePanel, HexViewer, REGION_COLORS, REGION_BORDER_COLORS, LimitsBar, LogViewer, PacketViewer, CommandBuilder, FileExplorer, MissionCalendar, ActivityPlanner, Typography, Display1, Display2, H1, H2, H3, H4, H5, H6, Body1, Body2, Body3, Compact, Micro, Mono, DataText, Label, FONT_FAMILY_PRIMARY, FONT_FAMILY_MONO, FONT_WEIGHTS, CardHeader, HeaderIconWithStatus, } from './core';
+export type { NumberInputProps, NumberInputSize, SliderStatus, StatusThresholds, SideNavProps, SideNavHeaderProps, SideNavItemProps, SideNavSectionProps, SideNavFooterProps, ToastOptions, ToastStatus, ToastPosition, ToastProviderProps, PopoverProps, PopoverPlacement, MenuProps, MenuItemProps, BoxProps, FlexProps, GridProps, StackProps, CenterProps, SpacerProps, DividerProps, Breakpoint, ResponsiveValue, SpacingToken, ConfirmDialogProps, ConfirmOptions, ConfirmStatus, PinInputProps, CopyButtonProps, UseCopyToClipboardReturn, DataTableProps, DataTableColumn, DataTableRowDetailProps, DataTableRowDetailField, ImageGalleryProps, GalleryImage, ChatPanelProps, ChatMessage, ChatBlock, ChatBlockEvent, ChatBlockAlert, ChatBlockTelemetry, ChatBlockProgress, ChatBlockTable, ChatBlockActions, ChatBlockChoice, ChatBlockConfirm, ChatBlockCommand, ChatBlockKV, ChatResponseFormat, ChatResponsePayload, ChatResponseParserOptions, McpToolContent, McpToolResult, ConnectionFormProps, ConnectionConfig, SidePanelProps, SidePanelPosition, HexViewerProps, HexHighlight, HexRegion, DecodedField, PacketHeaderEntry, ByteGrouping, OffsetBase, Endianness, LimitsBarProps, LimitsState, LogViewerProps, LogEntry, LogSeverity, PacketViewerProps, PacketItem, PacketItemLimits, PacketItemLimitsState, PacketViewMode, CommandBuilderProps, CommandParameter, CommandParamType, CommandHistoryEntry, FileExplorerProps, FileNode, FileViewMode, FileSortBy, MissionCalendarProps, CalendarEvent, CalendarTimeline, CalendarViewMode, ActivityStatus, ActivityType, ActivityPlannerProps, ActivityFormData, TypographyProps, TypographyVariant, TypographyElement, TypographyColor, CardHeaderProps, HeaderIconWithStatusProps, IconProps, IconName, AstroIconProps, AstroIconName, AstroIconSize, ButtonProps, ButtonVariant, ButtonSize, InputProps, InputSize, LabelPlacement, SelectProps, SelectOption, ToggleProps, CheckboxProps, TooltipProps, TooltipPlacement, DialogProps, DialogActionsProps, DialogSize, BadgeProps, BadgeVariant, BadgeSize, ContainerProps, ContainerVariant, ContainerPadding, TabsProps, TabsListProps, TabProps, TabsPanelProps, PaginationProps, GlassCardProps, GlassColorOverlay, DataValueProps, DataValueGroupProps, DataValueVariant, DataValueSize, MessageStreamProps, StreamMessage, AppBarProps, AppBarBranding, ColorPickerPanelProps, PropertyConfig, PropertyKey, PropertyCategory, GlassAccentPosition, } from './core';
+export { ThemeProvider, useTheme, useThemeTokens, useScrollbarStyles, CardAccentProvider, useCardAccent, getSystemAccentColor, getAccentColorOptions, CARD_ACCENT_COLORS, SPACE_SYSTEM_COLORS, } from './theme';
+export type { ThemeProviderProps, ThemeContextValue, ThemeVariant, ThemeMode, ThemeTokens, ThemeColors, ThemeAnimation, ThemeFocus, LayoutTokens, BorderTokens, CardAccentKey, CardAccentColor, CardAccentContextValue, CardAccentProviderProps, } from './theme';
+export { DisplaySettingsProvider, useDisplaySettings, useDisplaySettingsOptional, getEffectiveCompactMode, PRESET_COLORS, GLASS_TINTS, } from './context';
+export type { DisplaySettings, DisplaySettingsContextValue, DisplaySettingsProviderProps, ColorTarget, PresetColorKey, GlassTintKey, } from './context';
+export { ErrorBoundary, withErrorBoundary } from './shared/ErrorBoundary';
+export type { ErrorBoundaryProps } from './shared/ErrorBoundary';
+export { SkeletonText, SkeletonBox, SkeletonCircle, SkeletonCard, SkeletonChart, Skeleton3D, } from './shared/Skeleton';
+export type { SkeletonTextProps, SkeletonBoxProps, SkeletonCircleProps, SkeletonCardProps, SkeletonChartProps, Skeleton3DProps, } from './shared/Skeleton';
+export { withNullSafety, safeNumber, isValidNumber, formatNumber, formatTabular, formatTemperature, formatDataRate, formatDistance, formatAltitude, formatVelocity, formatPercentage, formatPower, formatFrequency, formatDuration, formatCountdown, formatUTC, formatTime, formatCoordinate, formatLatLon, formatDegrees, formatDecibels, clamp, lerp, mapRange, STATUS_COLORS, getStatusColor, getStatusFromValue, normalizeStatus, isStatusLevel, getStatusSeverity, getWorstStatus, classNames, tabularNumsStyle, transitions, focusRingStyle, addAlpha, safeAccentText, } from './utils';
+export type { StatusLevel, FormatNumberOptions } from './utils';
+export { StatusIndicator, ClassificationBanner, GlobalStatusBar, MissionClock, MonitoringIcon, Progress, Notification, Timeline, SimulationControls, MiniSimulationControls, SimulationControlsWithClock, } from './astro';
+export type { StatusIndicatorProps, StatusVariant, ClassificationBannerProps, ClassificationLevel, GlobalStatusBarProps, MissionClockProps, MonitoringIconProps, MonitoringStatus, ProgressProps, NotificationProps, NotificationStatus, TimelineProps, TimelineEvent, TimelineTrackDef, TimelineViewMode, TimeFormat, TimelineFilter, AstroStatus, AstroClassification, SimulationControlsProps, MiniSimulationControlsProps, SimulationControlsWithClockProps, } from './astro';
+export { SpacecraftCard } from './cards/SpacecraftCard';
+export type { SpacecraftCardProps } from './cards/SpacecraftCard';
+export { TelemetryCard } from './cards/TelemetryCard';
+export type { TelemetryCardProps } from './cards/TelemetryCard';
+export { AccessCard } from './cards/AccessCard';
+export type { AccessCardProps } from './cards/AccessCard';
+export { OrbitCard } from './cards/OrbitCard';
+export type { OrbitCardProps } from './cards/OrbitCard';
+export { TelemetryStreamCard } from './cards/TelemetryStreamCard';
+export type { TelemetryStreamCardProps, TelemetryMetric } from './cards/TelemetryStreamCard';
+export { AstroChart, LineChart, AreaChart, BarChart, ScatterChart, PieChart, DonutChart, GaugeChart, RadarChart, HeatmapChart, TimeSeriesChart, DualAxisChart, StackedAreaChart, StackedBarChart, BubbleChart, HistogramChart, SankeyChart, TreemapChart, SunburstChart, ParallelChart, CandlestickChart, GraphChart, PowerChart, AttitudeChart, ThermalHeatmapChart, LinkBudgetChart, SubsystemGauge, OrbitChart, ContactWindowChart, SpectrumChart, ManeuverBudgetChart, EclipseTimelineChart, RoseDiagram, HeliocentricOrbitPlot, Scatter3DChart, Bar3DChart, Surface3DChart, Lines3DChart, SphericalRadar3DChart, TransferOrbit3DChart, AttitudeHistory3DChart, ConjunctionAssessment3DChart, LaunchCorridor3DChart, AntennaPattern3DChart, WaterfallChart, DopplerTrackChart, LinkMarginChart, ConstellationCoverageChart, ConjunctionChart, generatePowerData, generateAttitudeData, generateDopplerData, generateWaterfallData, generateContactWindows, generateHeliocentricOrbits, generateSpectrum, generateEclipseTimeline, generateConstellationCoverage, generateConjunctionEvents, PowerOverviewChart, generateSamplePowerData, createAstroEChartsTheme, ASTRO_DATA_VIZ_COLORS, STATUS_COLORS as CHART_STATUS_COLORS, getSeriesColor, createAreaGradient, formatTimeLabel, formatValueWithUnit, calculateAxisBounds, useChartStream, useWebSocketStream, useChartSync, dispatchToGroup, syncZoomRange, resetGroupZoom, showGroupTooltip, hideGroupTooltip, getGroupCharts, exportGroupAsImages, exportGroupAsCSV, GroundTrackMap, } from './charts';
+export type { AstroChartHandle, AstroChartProps, ChartType, ChartTheme, DataPoint, TimeSeriesPoint, SeriesData, AxisOptions, ZoomOptions, TooltipOptions as ChartTooltipOptions, LegendOptions, AnnotationOptions, RealTimeOptions, ExportOptions, ChartEventParams, ZoomEventParams, PowerChartData, AttitudeChartData, ThermalChartData, LinkBudgetChartData, ContactWindowData, SpectrumDataPoint, ManeuverBudgetData, EclipseTimelineData, BubbleDataPoint, RoseDiagramData, HeliocentricOrbitData, Data3DPoint, Scatter3DData, Bar3DData, Surface3DData, Lines3DData, LineChartProps, AreaChartProps, BarChartProps, ScatterChartProps, PieChartProps, GaugeChartProps, RadarChartProps, HeatmapChartProps, TimeSeriesChartProps, DualAxisChartProps, BubbleChartProps, HistogramChartProps, SankeyChartProps, TreemapChartProps, TreemapDataNode, SunburstChartProps, SunburstDataNode, ParallelChartProps, ParallelAxisDef, CandlestickChartProps, CandlestickDataPoint, GraphChartProps, GraphNode, GraphLink, GraphCategory, PowerChartProps, AttitudeChartProps, ThermalHeatmapChartProps, LinkBudgetChartProps, SubsystemGaugeProps, OrbitChartProps, ContactWindowChartProps, SpectrumChartProps, ManeuverBudgetChartProps, EclipseTimelineChartProps, RoseDiagramProps, HeliocentricOrbitProps, Scatter3DChartProps, Bar3DChartProps, Surface3DChartProps, Lines3DChartProps, SphericalRadar3DChartProps, SphericalRadar3DData, TransferOrbit3DChartProps, TransferOrbitSegment, TransferOrbitWaypoint, AttitudeHistory3DChartProps, AttitudeHistoryPoint, ConjunctionAssessment3DChartProps, ConjunctionEvent, LaunchCorridor3DChartProps, LaunchCorridorData, AntennaPattern3DChartProps, AntennaPattern3DData, WaterfallChartProps, DopplerTrackChartProps, LinkMarginChartProps, WaterfallDataPoint, WaterfallSignalMarker, DopplerTrackPoint, SatellitePassInfo, LinkMarginPoint, CoverageGridData, PowerGeneratorConfig, AttitudeGeneratorConfig, DopplerGeneratorConfig, WaterfallGeneratorConfig, ContactGeneratorConfig, HeliocentricGeneratorConfig, SpectrumGeneratorConfig, EclipseGeneratorConfig, PowerOverviewChartProps, PowerTimelinePoint, PowerEvent, PowerState, OperationalMode, EventType, StreamOptions, StreamController, UseChartSyncOptions, EChartsTheme, GroundTrackMapProps, SatelliteTrack, GroundStationEnhanced, TeamPath, SROGroundStation, } from './charts';
+export { EclipseTimerCard } from './visualizations/EclipseTimerCard';
+export type { EclipseTimerCardProps } from './visualizations/EclipseTimerCard';
+export { NavBallCard } from './visualizations/NavBallCard';
+export type { NavBallCardProps } from './visualizations/NavBallCard';
+export { LinkBudgetCard } from './visualizations/LinkBudgetCard';
+export type { LinkBudgetCardProps, LinkBudgetData } from './visualizations/LinkBudgetCard';
+export { ThermalHeatmapCard } from './visualizations/ThermalHeatmapCard';
+export type { ThermalHeatmapCardProps, ComponentThermal } from './visualizations/ThermalHeatmapCard';
+export { PropulsionCard } from './visualizations/PropulsionCard';
+export type { PropulsionCardProps, PropulsionTankData, ManeuverFeasibility } from './visualizations/PropulsionCard';
+export { SensorFootprintCard } from './visualizations/SensorFootprintCard';
+export type { SensorFootprintCardProps, FootprintSensorConfig } from './visualizations/SensorFootprintCard';
+export { ZenSpace3D, ZenSpace3DCesium, latLonAltToCartesian, cartesianToLatLonAlt, parseTLE, propagateSGP4Simple, propagateSatellite, generateOrbitPath, calculateVisibilityConeGeometry, generateHexGrid, atmosphereVertexShader, atmosphereFragmentShader, starsVertexShader, starsFragmentShader, EARTH_RADIUS_KM, SCENE_EARTH_RADIUS, KM_TO_SCENE, } from './3d';
+export type { ZenSpace3DProps, ZenSpace3DHandle, ZenSpace3DCesiumProps, ViewMode, CameraMode, ObjectCategory, SpaceObject, Satellite as ZenSatellite, Debris, SpaceStation as ZenSpaceStation, Asteroid, TLEData, OrbitPath, ManeuverNode, VisibilityCone, CoverageRegion, CoverageHexGrid, OverpassInfo, TimeState, SelectionState, CameraState, LayerVisibility, ToolType, Vector3D, LatLonAlt, ZenSpace3DCallbacks, } from './3d';
+export { EarthViewer } from './3d/EarthViewer';
+export type { EarthViewerProps } from './3d/EarthViewer';
+export { SolarSystemViewer } from './3d/SolarSystemViewer';
+export type { SolarSystemViewerProps, PlanetPosition } from './3d/SolarSystemViewer';
+export { useZendirSession } from './hooks/useZendirSession';
+export type { UseZendirSessionOptions, UseZendirSessionResult } from './hooks/useZendirSession';
+export { useTelemetry } from './hooks/useTelemetry';
+export type { UseTelemetryOptions, UseTelemetryResult } from './hooks/useTelemetry';
+export { useSpacecraftPosition } from './hooks/useSpacecraftPosition';
+export type { UseSpacecraftPositionOptions, UseSpacecraftPositionResult } from './hooks/useSpacecraftPosition';
+export { useCompactMode } from './hooks/useCompactMode';
+export type { UseCompactModeOptions, UseCompactModeResult } from './hooks/useCompactMode';
+export { useOpenAiGlobal, useWidgetState, useToolOutput, useToolInput, useChatGPTTheme, useLocale, useDisplayMode, useCallTool, useSendMessage, useIntrinsicHeight, useMaxHeight, useOpenExternal, isInChatGPT, } from './chatgpt/index';
+export type { OpenAiGlobals, ThemeMode as ChatGPTThemeMode } from './chatgpt/index';
+export { AppCard, ChatGPTCard } from './chatgpt/AppCard';
+export type { AppCardProps, ChatGPTCardProps } from './chatgpt/AppCard';
+export type { SpacecraftPosition, Spacecraft, GroundStation, GroundTrackPoint, AccessData, AccessWindow, TelemetryData, OrbitalElements, Quaternion, EulerAngles, AngularVelocity, AttitudeData, PointingMode, EclipseInfo, DetailedLinkBudget, ThermalZone, ThermalData, ThrusterStatus, PropulsionSummary, ReactionWheelData, LVLHVector, LVLHState, ThrusterFireEvent, PlanetId, PlanetInfo, } from './types';
+export { estimateOrbitalPeriod, estimateOrbitalVelocity, auToKm, normalizePlanetName, getPlanet, PLANETS, } from './types';

package/dist/react/shared/ErrorBoundary.d.ts

@@ -0,0 +1,63 @@
+import { default as React, Component, ErrorInfo, ReactNode } from 'react';
+
+export interface ErrorBoundaryProps {
+    /** Custom fallback UI or render function */
+    fallback?: ReactNode | ((error: Error, retry: () => void) => ReactNode);
+    /** Callback when error is caught */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    /** Children to render */
+    children: ReactNode;
+    /** Component name for error context */
+    componentName?: string;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+/**
+ * ErrorBoundary - Catches and handles component errors gracefully
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary
+ *   fallback={<ErrorCard message="Failed to load" />}
+ *   onError={(error) => logError(error)}
+ * >
+ *   <SpacecraftCard {...props} />
+ * </ErrorBoundary>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary
+ *   fallback={(error, retry) => (
+ *     <div>
+ *       <p>Error: {error.message}</p>
+ *       <button onClick={retry}>Retry</button>
+ *     </div>
+ *   )}
+ * >
+ *   <TelemetryCard {...props} />
+ * </ErrorBoundary>
+ * ```
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    handleRetry: () => void;
+    render(): ReactNode;
+}
+/**
+ * Wraps a component with an ErrorBoundary
+ *
+ * @example
+ * ```tsx
+ * const SafeSpacecraftCard = withErrorBoundary(SpacecraftCard, {
+ *   componentName: 'SpacecraftCard',
+ *   onError: (error) => logError(error),
+ * });
+ * ```
+ */
+export declare function withErrorBoundary<P extends object>(Component: React.ComponentType<P>, options?: Omit<ErrorBoundaryProps, 'children'>): React.FC<P>;
+export {};

package/dist/react/shared/ErrorBoundary.js

@@ -0,0 +1,142 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Component } from "react";
+import { getStatusColor } from "../utils/index.js";
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "handleRetry", () => {
+      this.setState({ hasError: false, error: null });
+    });
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    var _a, _b;
+    (_b = (_a = this.props).onError) == null ? void 0 : _b.call(_a, error, errorInfo);
+    if (process.env.NODE_ENV === "development") {
+      console.error("ErrorBoundary caught an error:", error, errorInfo);
+    }
+  }
+  render() {
+    if (this.state.hasError) {
+      const { fallback, componentName } = this.props;
+      const { error } = this.state;
+      if (typeof fallback === "function" && error) {
+        return fallback(error, this.handleRetry);
+      }
+      if (fallback && typeof fallback !== "function") {
+        return fallback;
+      }
+      return /* @__PURE__ */ jsx(
+        DefaultErrorFallback,
+        {
+          error,
+          componentName,
+          onRetry: this.handleRetry
+        }
+      );
+    }
+    return this.props.children;
+  }
+}
+function DefaultErrorFallback({
+  error,
+  componentName,
+  onRetry
+}) {
+  const criticalColor = getStatusColor("critical");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 24,
+        minHeight: 120,
+        backgroundColor: "var(--color-background-surface, #1b2d3e)",
+        borderRadius: 8,
+        border: `1px solid ${criticalColor}40`,
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            fill: criticalColor,
+            width: "32",
+            height: "32",
+            style: { marginBottom: 12, opacity: 0.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 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "h3",
+          {
+            style: {
+              margin: 0,
+              marginBottom: 8,
+              fontSize: "0.875rem",
+              // 14px in rem
+              fontWeight: 500,
+              // AstroUXDS medium
+              color: "var(--color-text-primary, #ffffff)"
+            },
+            children: componentName ? `${componentName} Error` : "Something went wrong"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: 0,
+              marginBottom: 16,
+              fontSize: 12,
+              color: "var(--color-text-secondary, #a4abb6)",
+              maxWidth: 280
+            },
+            children: (error == null ? void 0 : error.message) ?? "An unexpected error occurred"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onRetry,
+            style: {
+              padding: "8px 16px",
+              fontSize: 12,
+              fontWeight: 500,
+              color: "#ffffff",
+              backgroundColor: "var(--color-interactive-default, #4dacff)",
+              border: "none",
+              borderRadius: 4,
+              cursor: "pointer",
+              transition: "background-color 150ms ease"
+            },
+            onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "var(--color-interactive-hover, #92cbff)",
+            onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "var(--color-interactive-default, #4dacff)",
+            children: "Try Again"
+          }
+        )
+      ]
+    }
+  );
+}
+function withErrorBoundary(Component2, options = {}) {
+  const WrappedComponent = (props) => /* @__PURE__ */ jsx(ErrorBoundary, { ...options, children: /* @__PURE__ */ jsx(Component2, { ...props }) });
+  WrappedComponent.displayName = `WithErrorBoundary(${Component2.displayName ?? Component2.name ?? "Component"})`;
+  return WrappedComponent;
+}
+export {
+  ErrorBoundary,
+  withErrorBoundary
+};
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/react/shared/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sources":["../../../src/react/shared/ErrorBoundary.tsx"],"sourcesContent":["/**\n * @zendir/ui - ErrorBoundary Component\n * \n * React error boundary that catches JavaScript errors in child components.\n * Prevents white screen of death and displays graceful fallback UI.\n * \n * Features:\n * - Customizable fallback UI\n * - Error callback for logging/reporting\n * - Retry functionality\n * - Accessible error display\n */\n\nimport React, { Component, ErrorInfo, ReactNode } from 'react';\nimport { getStatusColor } from '../utils';\n\nexport interface ErrorBoundaryProps {\n  /** Custom fallback UI or render function */\n  fallback?: ReactNode | ((error: Error, retry: () => void) => ReactNode);\n  /** Callback when error is caught */\n  onError?: (error: Error, errorInfo: ErrorInfo) => void;\n  /** Children to render */\n  children: ReactNode;\n  /** Component name for error context */\n  componentName?: string;\n}\n\ninterface ErrorBoundaryState {\n  hasError: boolean;\n  error: Error | null;\n}\n\n/**\n * ErrorBoundary - Catches and handles component errors gracefully\n * \n * @example\n * ```tsx\n * <ErrorBoundary \n *   fallback={<ErrorCard message=\"Failed to load\" />}\n *   onError={(error) => logError(error)}\n * >\n *   <SpacecraftCard {...props} />\n * </ErrorBoundary>\n * ```\n * \n * @example\n * ```tsx\n * <ErrorBoundary \n *   fallback={(error, retry) => (\n *     <div>\n *       <p>Error: {error.message}</p>\n *       <button onClick={retry}>Retry</button>\n *     </div>\n *   )}\n * >\n *   <TelemetryCard {...props} />\n * </ErrorBoundary>\n * ```\n */\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = { hasError: false, error: null };\n  }\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return { hasError: true, error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {\n    this.props.onError?.(error, errorInfo);\n    \n    // Log to console in development\n    if (process.env.NODE_ENV === 'development') {\n      console.error('ErrorBoundary caught an error:', error, errorInfo);\n    }\n  }\n\n  handleRetry = (): void => {\n    this.setState({ hasError: false, error: null });\n  };\n\n  render(): ReactNode {\n    if (this.state.hasError) {\n      const { fallback, componentName } = this.props;\n      const { error } = this.state;\n\n      // Custom fallback render function\n      if (typeof fallback === 'function' && error) {\n        return fallback(error, this.handleRetry);\n      }\n\n      // Custom fallback element (exclude function - already handled above)\n      if (fallback && typeof fallback !== 'function') {\n        return fallback;\n      }\n\n      // Default fallback UI\n      return (\n        <DefaultErrorFallback\n          error={error}\n          componentName={componentName}\n          onRetry={this.handleRetry}\n        />\n      );\n    }\n\n    return this.props.children;\n  }\n}\n\n// ============================================================================\n// Default Error Fallback\n// ============================================================================\n\ninterface DefaultErrorFallbackProps {\n  error: Error | null;\n  componentName?: string;\n  onRetry: () => void;\n}\n\nfunction DefaultErrorFallback({\n  error,\n  componentName,\n  onRetry,\n}: DefaultErrorFallbackProps): React.ReactElement {\n  const criticalColor = getStatusColor('critical');\n\n  return (\n    <div\n      role=\"alert\"\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        padding: 24,\n        minHeight: 120,\n        backgroundColor: 'var(--color-background-surface, #1b2d3e)',\n        borderRadius: 8,\n        border: `1px solid ${criticalColor}40`,\n        textAlign: 'center',\n      }}\n    >\n      {/* Error icon */}\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill={criticalColor}\n        width=\"32\"\n        height=\"32\"\n        style={{ marginBottom: 12, opacity: 0.8 }}\n      >\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\n      </svg>\n\n      {/* Error message */}\n      <h3\n        style={{\n          margin: 0,\n          marginBottom: 8,\n          fontSize: '0.875rem', // 14px in rem\n          fontWeight: 500, // AstroUXDS medium\n          color: 'var(--color-text-primary, #ffffff)',\n        }}\n      >\n        {componentName ? `${componentName} Error` : 'Something went wrong'}\n      </h3>\n\n      <p\n        style={{\n          margin: 0,\n          marginBottom: 16,\n          fontSize: 12,\n          color: 'var(--color-text-secondary, #a4abb6)',\n          maxWidth: 280,\n        }}\n      >\n        {error?.message ?? 'An unexpected error occurred'}\n      </p>\n\n      {/* Retry button */}\n      <button\n        onClick={onRetry}\n        style={{\n          padding: '8px 16px',\n          fontSize: 12,\n          fontWeight: 500,\n          color: '#ffffff',\n          backgroundColor: 'var(--color-interactive-default, #4dacff)',\n          border: 'none',\n          borderRadius: 4,\n          cursor: 'pointer',\n          transition: 'background-color 150ms ease',\n        }}\n        onMouseEnter={(e) =>\n          (e.currentTarget.style.backgroundColor = 'var(--color-interactive-hover, #92cbff)')\n        }\n        onMouseLeave={(e) =>\n          (e.currentTarget.style.backgroundColor = 'var(--color-interactive-default, #4dacff)')\n        }\n      >\n        Try Again\n      </button>\n    </div>\n  );\n}\n\n// ============================================================================\n// Higher-Order Component for Error Boundaries\n// ============================================================================\n\n/**\n * Wraps a component with an ErrorBoundary\n * \n * @example\n * ```tsx\n * const SafeSpacecraftCard = withErrorBoundary(SpacecraftCard, {\n *   componentName: 'SpacecraftCard',\n *   onError: (error) => logError(error),\n * });\n * ```\n */\nexport function withErrorBoundary<P extends object>(\n  Component: React.ComponentType<P>,\n  options: Omit<ErrorBoundaryProps, 'children'> = {}\n): React.FC<P> {\n  const WrappedComponent: React.FC<P> = (props) => (\n    <ErrorBoundary {...options}>\n      <Component {...props} />\n    </ErrorBoundary>\n  );\n\n  WrappedComponent.displayName = `WithErrorBoundary(${Component.displayName ?? Component.name ?? 'Component'})`;\n\n  return WrappedComponent;\n}\n"],"names":["Component"],"mappings":"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"}

package/dist/react/shared/Skeleton.d.ts

@@ -0,0 +1,110 @@
+import { default as React } from 'react';
+
+export interface SkeletonTextProps {
+    /** Number of lines to render */
+    lines?: number;
+    /** Width of the last line (as percentage or px) */
+    lastLineWidth?: string | number;
+    /** Height of each line */
+    lineHeight?: number;
+    /** Gap between lines */
+    gap?: number;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * SkeletonText - Placeholder for text content
+ *
+ * @example
+ * ```tsx
+ * <SkeletonText lines={3} lastLineWidth="60%" />
+ * ```
+ */
+export declare const SkeletonText: React.NamedExoticComponent<SkeletonTextProps>;
+export interface SkeletonBoxProps {
+    /** Width of the box */
+    width?: string | number;
+    /** Height of the box */
+    height?: string | number;
+    /** Border radius */
+    borderRadius?: number;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * SkeletonBox - Generic rectangular placeholder
+ *
+ * @example
+ * ```tsx
+ * <SkeletonBox width={200} height={100} />
+ * ```
+ */
+export declare const SkeletonBox: React.NamedExoticComponent<SkeletonBoxProps>;
+export interface SkeletonCircleProps {
+    /** Diameter of the circle */
+    size?: number;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * SkeletonCircle - Circular placeholder (avatars, icons)
+ *
+ * @example
+ * ```tsx
+ * <SkeletonCircle size={48} />
+ * ```
+ */
+export declare const SkeletonCircle: React.NamedExoticComponent<SkeletonCircleProps>;
+export interface SkeletonCardProps {
+    /** Card height */
+    height?: number;
+    /** Show header placeholder */
+    showHeader?: boolean;
+    /** Show content lines */
+    showContent?: boolean;
+    /** Number of content lines */
+    contentLines?: number;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * SkeletonCard - Card-shaped placeholder matching component cards
+ *
+ * @example
+ * ```tsx
+ * <SkeletonCard showHeader showContent contentLines={4} />
+ * ```
+ */
+export declare const SkeletonCard: React.NamedExoticComponent<SkeletonCardProps>;
+export interface SkeletonChartProps {
+    /** Chart height */
+    height?: number;
+    /** Chart type visualization */
+    type?: 'line' | 'bar' | 'area';
+    /** Custom className */
+    className?: string;
+}
+/**
+ * SkeletonChart - Chart placeholder with visualization hint
+ *
+ * @example
+ * ```tsx
+ * <SkeletonChart height={200} type="line" />
+ * ```
+ */
+export declare const SkeletonChart: React.NamedExoticComponent<SkeletonChartProps>;
+export interface Skeleton3DProps {
+    /** Container height */
+    height?: number;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * Skeleton3D - 3D viewer placeholder with sphere hint
+ *
+ * @example
+ * ```tsx
+ * <Skeleton3D height={400} />
+ * ```
+ */
+export declare const Skeleton3D: React.NamedExoticComponent<Skeleton3DProps>;