@zendir/ui 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCompactMode.js","sources":["../../../src/react/hooks/useCompactMode.ts"],"sourcesContent":["/**\n * @zendir/ui - useCompactMode Hook\n * \n * Provides compact mode functionality for data cards with:\n * - Hover-to-expand behavior\n * - Click-to-pin (stays expanded until clicked again)\n * - Keyboard accessibility (Enter/Space to toggle pin)\n * - Reduced motion support\n * - Integration with DisplaySettingsContext for global compact mode\n * \n * Priority for compact mode:\n * 1. Explicit `compact` prop (if provided)\n * 2. Global compact mode from DisplaySettingsContext\n * 3. Default: false\n * \n * Usage:\n * ```tsx\n * const { expanded, isPinned, handlers, transitionDuration } = useCompactMode({\n *   compact: true, // Optional - if omitted, uses global setting\n *   defaultExpanded: false,\n *   onPinChange: (pinned) => {},\n * });\n * \n * return (\n *   <div {...handlers}>\n *     {expanded ? <FullContent /> : <CompactContent />}\n *   </div>\n * );\n * ```\n */\n\nimport { useState, useCallback, useMemo } from 'react';\nimport { useTheme } from '../theme';\nimport { useDisplaySettingsOptional } from '../context/DisplaySettingsContext';\n\n/**\n * Options for useCompactMode hook\n */\nexport interface UseCompactModeOptions {\n  /** Whether compact mode is enabled */\n  compact?: boolean;\n  /** Start in expanded (pinned) state */\n  defaultExpanded?: boolean;\n  /** Callback when pin state changes */\n  onPinChange?: (isPinned: boolean) => void;\n}\n\n/**\n * Result from useCompactMode hook\n */\nexport interface UseCompactModeResult {\n  /** Whether the component should render in expanded state */\n  expanded: boolean;\n  /** Whether the component is pinned (clicked to stay expanded) */\n  isPinned: boolean;\n  /** Whether the component is being hovered */\n  isHovered: boolean;\n  /** Whether compact mode is active */\n  isCompact: boolean;\n  /** Event handlers to spread on the container element */\n  handlers: {\n    onMouseEnter: () => void;\n    onMouseLeave: () => void;\n    onClick: () => void;\n    onKeyDown: (e: React.KeyboardEvent) => void;\n    tabIndex: number;\n    role: string;\n    'aria-expanded': boolean;\n  };\n  /** Transition duration respecting reduced motion */\n  transitionDuration: string;\n  /** Toggle the pinned state programmatically */\n  togglePin: () => void;\n  /** Set pinned state programmatically */\n  setPin: (pinned: boolean) => void;\n}\n\n/**\n * Hook for managing compact mode state and interactions\n * \n * Provides hover-to-expand and click-to-pin functionality with\n * full keyboard accessibility and reduced motion support.\n * \n * Priority for compact mode:\n * 1. Explicit `compact` prop (if provided)\n * 2. Global compact mode from DisplaySettingsContext\n * 3. Default: false\n */\nexport function useCompactMode(options: UseCompactModeOptions = {}): UseCompactModeResult {\n  const { compact: compactProp, defaultExpanded = false, onPinChange } = options;\n  const { prefersReducedMotion } = useTheme();\n  const displaySettings = useDisplaySettingsOptional();\n  \n  // Resolve compact mode: prop > context > default (false)\n  const compact = compactProp ?? displaySettings?.compactMode ?? false;\n  \n  const [isHovered, setIsHovered] = useState(false);\n  const [isPinned, setIsPinned] = useState(defaultExpanded);\n  \n  // Transition duration respects reduced motion preference\n  const transitionDuration = prefersReducedMotion ? '0ms' : '200ms';\n  \n  // Expanded state: pinned OR hovered (only matters when compact is true)\n  const expanded = !compact || isPinned || isHovered;\n  \n  // Toggle pin state\n  const togglePin = useCallback(() => {\n    const newPinned = !isPinned;\n    setIsPinned(newPinned);\n    onPinChange?.(newPinned);\n  }, [isPinned, onPinChange]);\n  \n  // Set pin state directly\n  const setPin = useCallback((pinned: boolean) => {\n    setIsPinned(pinned);\n    onPinChange?.(pinned);\n  }, [onPinChange]);\n  \n  // Mouse enter handler\n  const onMouseEnter = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n  \n  // Mouse leave handler\n  const onMouseLeave = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n  \n  // Click handler - toggle pin state when in compact mode\n  const onClick = useCallback(() => {\n    if (compact) {\n      togglePin();\n    }\n  }, [compact, togglePin]);\n  \n  // Keyboard handler for accessibility\n  const onKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (compact && (e.key === 'Enter' || e.key === ' ')) {\n      e.preventDefault();\n      togglePin();\n    }\n  }, [compact, togglePin]);\n  \n  // Memoized handlers object\n  const handlers = useMemo(() => ({\n    onMouseEnter,\n    onMouseLeave,\n    onClick,\n    onKeyDown,\n    tabIndex: compact ? 0 : -1,\n    role: compact ? 'button' : 'article',\n    'aria-expanded': expanded,\n  }), [onMouseEnter, onMouseLeave, onClick, onKeyDown, compact, expanded]);\n  \n  return {\n    expanded,\n    isPinned,\n    isHovered,\n    isCompact: compact,\n    handlers,\n    transitionDuration,\n    togglePin,\n    setPin,\n  };\n}\n"],"names":[],"mappings":";;;AAwFO,SAAS,eAAe,UAAiC,IAA0B;AACxF,QAAM,EAAE,SAAS,aAAa,kBAAkB,OAAO,gBAAgB;AACvE,QAAM,EAAE,qBAAA,IAAyB,SAAA;AACjC,QAAM,kBAAkB,2BAAA;AAGxB,QAAM,UAAU,gBAAe,mDAAiB,gBAAe;AAE/D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,eAAe;AAGxD,QAAM,qBAAqB,uBAAuB,QAAQ;AAG1D,QAAM,WAAW,CAAC,WAAW,YAAY;AAGzC,QAAM,YAAY,YAAY,MAAM;AAClC,UAAM,YAAY,CAAC;AACnB,gBAAY,SAAS;AACrB,+CAAc;AAAA,EAChB,GAAG,CAAC,UAAU,WAAW,CAAC;AAG1B,QAAM,SAAS,YAAY,CAAC,WAAoB;AAC9C,gBAAY,MAAM;AAClB,+CAAc;AAAA,EAChB,GAAG,CAAC,WAAW,CAAC;AAGhB,QAAM,eAAe,YAAY,MAAM;AACrC,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAA,CAAE;AAGL,QAAM,eAAe,YAAY,MAAM;AACrC,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAA,CAAE;AAGL,QAAM,UAAU,YAAY,MAAM;AAChC,QAAI,SAAS;AACX,gBAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,SAAS,CAAC;AAGvB,QAAM,YAAY,YAAY,CAAC,MAA2B;AACxD,QAAI,YAAY,EAAE,QAAQ,WAAW,EAAE,QAAQ,MAAM;AACnD,QAAE,eAAA;AACF,gBAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,SAAS,CAAC;AAGvB,QAAM,WAAW,QAAQ,OAAO;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,UAAU,IAAI;AAAA,IACxB,MAAM,UAAU,WAAW;AAAA,IAC3B,iBAAiB;AAAA,EAAA,IACf,CAAC,cAAc,cAAc,SAAS,WAAW,SAAS,QAAQ,CAAC;AAEvE,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/react/hooks/useLiveSelection.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @zendir/ui - useLiveSelection Hook
+ *
+ * Manages "live follow" vs "pinned" selection for any streaming list.
+ *
+ * Behaviour:
+ * - **Live mode** (default): the selection automatically tracks the newest
+ *   item in the list (index 0 after sorting newest-first).
+ * - **Pinned mode**: the user has manually selected an item. The list can
+ *   continue to receive new items but the highlighted row stays fixed on the
+ *   chosen packet until the user explicitly resumes live follow.
+ * - **Paused mode**: live updates to the list are frozen externally (handled
+ *   by the caller). Pinned selection is preserved across pause/resume.
+ *
+ * Usage:
+ * ```ts
+ * const { selectedId, isLive, isPinned, pin, resume } = useLiveSelection({
+ *   items: filteredPackets,
+ *   getId: getPacketId,
+ *   isPaused,
+ * });
+ * ```
+ */
+export interface UseLiveSelectionOptions<T> {
+    /** The current (possibly filtered) ordered list, newest first. */
+    items: T[];
+    /** Derive a stable string identity from an item. */
+    getId: (item: T) => string | null;
+    /**
+     * When true, the caller is freezing new items from being added.
+     * useLiveSelection will not try to auto-follow while paused.
+     */
+    isPaused: boolean;
+}
+export interface UseLiveSelectionResult<T> {
+    /** The stable id of the currently selected item (null = nothing selected). */
+    selectedId: string | null;
+    /** The currently selected item, or null. */
+    selectedItem: T | null;
+    /** Index of the selected item within `items` (−1 if not found). */
+    selectedIndex: number;
+    /** True when auto-following the newest item. False when user has pinned a selection. */
+    isLive: boolean;
+    /** True when the user has manually pinned a specific item. */
+    isPinned: boolean;
+    /**
+     * Call this when the user manually clicks a row.
+     * Switches to pinned mode and locks the given item as the selection.
+     */
+    pin: (item: T) => void;
+    /**
+     * Call this to return to live-follow mode.
+     * Clears the pinned selection and immediately selects the newest item.
+     */
+    resume: () => void;
+}
+export declare function useLiveSelection<T>({ items, getId, isPaused, }: UseLiveSelectionOptions<T>): UseLiveSelectionResult<T>;

package/dist/react/hooks/useSimulationPlayback.d.ts

@@ -0,0 +1,97 @@
+/**
+ * @zendir/ui - useSimulationPlayback Hook
+ *
+ * Hook for managing simulation playback state with play/pause/stop controls.
+ * Designed to work seamlessly with SimulationControls component.
+ *
+ * Features:
+ * - Play/pause/stop state management
+ * - Configurable time scale (playback speed)
+ * - Step forward/backward functionality
+ * - Automatic time updates when playing
+ * - Zendir SDK integration ready
+ *
+ * @example
+ * ```tsx
+ * const sim = useSimulationPlayback({
+ *   epoch: new Date('2026-01-01T00:00:00Z'),
+ *   initialElapsedSeconds: 0,
+ *   initialTimeScale: 1,
+ *   stepSize: 60, // 1 minute steps
+ * });
+ *
+ * <SimulationControls
+ *   isPlaying={sim.isPlaying}
+ *   onPlay={sim.play}
+ *   onPause={sim.pause}
+ *   onStop={sim.stop}
+ *   onStepForward={sim.stepForward}
+ *   onStepBackward={sim.stepBackward}
+ *   currentTime={sim.currentTime}
+ *   epoch={sim.epoch}
+ *   elapsedSeconds={sim.elapsedSeconds}
+ *   timeScale={sim.timeScale}
+ *   onTimeScaleChange={sim.setTimeScale}
+ * />
+ * ```
+ */
+export interface UseSimulationPlaybackOptions {
+    /** Simulation epoch (t=0). Defaults to current date at midnight UTC. */
+    epoch?: Date | string;
+    /** Initial elapsed seconds from epoch. Defaults to 0. */
+    initialElapsedSeconds?: number;
+    /** Initial time scale factor. Defaults to 1 (realtime). */
+    initialTimeScale?: number;
+    /** Step size in seconds for step forward/backward. Defaults to 60 (1 minute). */
+    stepSize?: number;
+    /** Update interval in milliseconds. Defaults to 1000. */
+    updateInterval?: number;
+    /** Callback when state changes */
+    onChange?: (state: SimulationPlaybackState) => void;
+    /** Maximum elapsed seconds (optional upper bound) */
+    maxElapsedSeconds?: number;
+    /** Whether to loop back to start when max is reached */
+    loop?: boolean;
+}
+export interface SimulationPlaybackState {
+    /** Whether simulation is currently playing */
+    isPlaying: boolean;
+    /** Whether simulation is paused (not playing but not at start) */
+    isPaused: boolean;
+    /** Whether simulation is stopped (at start position) */
+    isStopped: boolean;
+    /** Current time scale factor (playback speed) */
+    timeScale: number;
+    /** Simulation epoch (t=0) */
+    epoch: Date;
+    /** Elapsed seconds from epoch */
+    elapsedSeconds: number;
+    /** Current simulation time as Date */
+    currentTime: Date;
+    /** Step size in seconds */
+    stepSize: number;
+}
+export interface UseSimulationPlaybackResult extends SimulationPlaybackState {
+    /** Start playing the simulation */
+    play: () => void;
+    /** Pause the simulation */
+    pause: () => void;
+    /** Stop and reset to start */
+    stop: () => void;
+    /** Toggle play/pause state */
+    toggle: () => void;
+    /** Step forward by stepSize seconds */
+    stepForward: () => void;
+    /** Step backward by stepSize seconds */
+    stepBackward: () => void;
+    /** Set time scale (playback speed) */
+    setTimeScale: (scale: number) => void;
+    /** Set step size in seconds */
+    setStepSize: (size: number) => void;
+    /** Jump to a specific elapsed time in seconds */
+    seekTo: (seconds: number) => void;
+    /** Set the epoch (resets elapsed time to 0) */
+    setEpoch: (epoch: Date | string) => void;
+}
+export declare function useSimulationPlayback(options?: UseSimulationPlaybackOptions): UseSimulationPlaybackResult;
+export default useSimulationPlayback;

package/dist/react/hooks/useSimulationTime.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @zendir/ui - useSimulationTime Hook
+ *
+ * Hook for integrating with Zendir SDK simulation time.
+ * Provides real-time simulation epoch and elapsed time for MissionClock
+ * and other time-sensitive components.
+ *
+ * Features:
+ * - Automatic SDK detection (graceful fallback when SDK not available)
+ * - Real-time simulation time updates
+ * - MET (Mission Elapsed Time) calculation
+ * - Time scaling support
+ *
+ * @example
+ * ```tsx
+ * const { simulationTime, epoch, elapsedSeconds, isConnected } = useSimulationTime({
+ *   updateInterval: 1000,
+ * });
+ *
+ * <MissionClock
+ *   timeSource="simulation"
+ *   simulationConfig={{
+ *     epoch,
+ *     elapsedSeconds,
+ *     isRunning: isConnected,
+ *   }}
+ * />
+ * ```
+ */
+export interface SimulationTimeState {
+    /** Current simulation time as Date */
+    simulationTime: Date;
+    /** Simulation epoch (t=0) */
+    epoch: Date | null;
+    /** Elapsed seconds since epoch */
+    elapsedSeconds: number;
+    /** Time scale factor (1 = realtime) */
+    timeScale: number;
+    /** Whether simulation is running */
+    isRunning: boolean;
+    /** Whether connected to Zendir SDK */
+    isConnected: boolean;
+    /** Whether SDK is available */
+    isSdkAvailable: boolean;
+    /** Error message if any */
+    error: string | null;
+}
+export interface UseSimulationTimeOptions {
+    /** Update interval in milliseconds (default: 1000) */
+    updateInterval?: number;
+    /** Custom simulation epoch (for manual mode without SDK) */
+    manualEpoch?: Date;
+    /** Manual elapsed seconds (for manual mode without SDK) */
+    manualElapsedSeconds?: number;
+    /** Manual time scale (for manual mode without SDK) */
+    manualTimeScale?: number;
+    /** Custom time provider function */
+    customTimeProvider?: () => Date;
+}
+export declare function useSimulationTime(options?: UseSimulationTimeOptions): SimulationTimeState;
+export default useSimulationTime;

package/dist/react/hooks/useSpacecraftPosition.d.ts

@@ -0,0 +1,50 @@
+import { SpacecraftPosition } from '../types';
+
+export type { SpacecraftPosition };
+/**
+ * Compact ground track point for real-time orbit visualization
+ * Uses abbreviated property names for performance in streaming contexts
+ * Note: For full ground track data, use GroundTrackPoint from '../types'
+ */
+export interface CompactGroundTrackPoint {
+    /** Latitude in degrees */
+    lat: number;
+    /** Longitude in degrees */
+    lon: number;
+    /** Timestamp (epoch ms or ISO string) */
+    t: number;
+}
+/** Client interface (compatible with @zendir/sdk ZendirClient) */
+export interface PositionClientInterface {
+    fetchSpacecraftPositions: () => Promise<SpacecraftPosition[]>;
+}
+export interface UseSpacecraftPositionOptions {
+    /** Zendir client instance (or any compatible client) */
+    client: PositionClientInterface;
+    /** Polling interval in ms (default: 1000) */
+    interval?: number;
+    /** Enable polling */
+    enabled?: boolean;
+    /** Track ground track history */
+    trackHistory?: boolean;
+    /** Maximum history points */
+    maxHistory?: number;
+}
+export interface UseSpacecraftPositionResult {
+    /** All spacecraft positions */
+    spacecraft: SpacecraftPosition[];
+    /** Ground track history per spacecraft */
+    groundTracks: Map<string, CompactGroundTrackPoint[]>;
+    /** Loading state */
+    isLoading: boolean;
+    /** Error message */
+    error: string | null;
+    /** Last update timestamp */
+    lastUpdate: number | null;
+    /** Get specific spacecraft */
+    getSpacecraft: (id: string) => SpacecraftPosition | undefined;
+    /** Manually refresh positions */
+    refresh: () => Promise<void>;
+}
+export declare function useSpacecraftPosition(options: UseSpacecraftPositionOptions): UseSpacecraftPositionResult;
+export default useSpacecraftPosition;

package/dist/react/hooks/useSpacecraftPosition.js

@@ -0,0 +1,89 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+const DEFAULT_MAX_HISTORY = 500;
+function useSpacecraftPosition(options) {
+  const {
+    client,
+    interval = 1e3,
+    enabled = true,
+    trackHistory = true,
+    maxHistory = DEFAULT_MAX_HISTORY
+  } = options;
+  const [spacecraft, setSpacecraft] = useState([]);
+  const [groundTracks, setGroundTracks] = useState(/* @__PURE__ */ new Map());
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [lastUpdate, setLastUpdate] = useState(null);
+  const intervalRef = useRef(null);
+  const startTimeRef = useRef(Date.now());
+  const fetchPositions = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const positions = await client.fetchSpacecraftPositions();
+      setSpacecraft(positions);
+      setLastUpdate(Date.now());
+      if (trackHistory) {
+        const elapsed = (Date.now() - startTimeRef.current) / 1e3;
+        setGroundTracks((prev) => {
+          const newTracks = new Map(prev);
+          for (const sc of positions) {
+            if (!sc.id) continue;
+            const point = {
+              lat: sc.latitude,
+              lon: sc.longitude,
+              t: elapsed
+            };
+            const existing = newTracks.get(sc.id) || [];
+            const updated = [...existing, point];
+            if (updated.length > maxHistory) {
+              newTracks.set(sc.id, updated.slice(-maxHistory));
+            } else {
+              newTracks.set(sc.id, updated);
+            }
+          }
+          return newTracks;
+        });
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to fetch positions";
+      setError(message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client, trackHistory, maxHistory]);
+  useEffect(() => {
+    if (!enabled) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      return;
+    }
+    startTimeRef.current = Date.now();
+    fetchPositions();
+    intervalRef.current = setInterval(fetchPositions, interval);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [enabled, interval, fetchPositions]);
+  const getSpacecraft = useCallback(
+    (id) => spacecraft.find((sc) => sc.id === id),
+    [spacecraft]
+  );
+  return {
+    spacecraft,
+    groundTracks,
+    isLoading,
+    error,
+    lastUpdate,
+    getSpacecraft,
+    refresh: fetchPositions
+  };
+}
+export {
+  useSpacecraftPosition
+};
+//# sourceMappingURL=useSpacecraftPosition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSpacecraftPosition.js","sources":["../../../src/react/hooks/useSpacecraftPosition.ts"],"sourcesContent":["/**\n * @zendir/ui - useSpacecraftPosition Hook\n * \n * React hook for fetching and tracking spacecraft positions.\n * \n * OPTIONAL DEPENDENCY: Requires @zendir/sdk client instance.\n * The client must be passed as a prop (allows using any compatible client).\n */\n\nimport { useState, useEffect, useCallback, useRef } from 'react';\nimport type { SpacecraftPosition } from '../types';\n\n// Re-export the canonical type for consumers\nexport type { SpacecraftPosition };\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Compact ground track point for real-time orbit visualization\n * Uses abbreviated property names for performance in streaming contexts\n * Note: For full ground track data, use GroundTrackPoint from '../types'\n */\nexport interface CompactGroundTrackPoint {\n  /** Latitude in degrees */\n  lat: number;\n  /** Longitude in degrees */\n  lon: number;\n  /** Timestamp (epoch ms or ISO string) */\n  t: number;\n}\n\n/** Client interface (compatible with @zendir/sdk ZendirClient) */\nexport interface PositionClientInterface {\n  fetchSpacecraftPositions: () => Promise<SpacecraftPosition[]>;\n}\n\n// ============================================================================\n// Hook Types\n// ============================================================================\n\nexport interface UseSpacecraftPositionOptions {\n  /** Zendir client instance (or any compatible client) */\n  client: PositionClientInterface;\n  /** Polling interval in ms (default: 1000) */\n  interval?: number;\n  /** Enable polling */\n  enabled?: boolean;\n  /** Track ground track history */\n  trackHistory?: boolean;\n  /** Maximum history points */\n  maxHistory?: number;\n}\n\nexport interface UseSpacecraftPositionResult {\n  /** All spacecraft positions */\n  spacecraft: SpacecraftPosition[];\n  /** Ground track history per spacecraft */\n  groundTracks: Map<string, CompactGroundTrackPoint[]>;\n  /** Loading state */\n  isLoading: boolean;\n  /** Error message */\n  error: string | null;\n  /** Last update timestamp */\n  lastUpdate: number | null;\n  /** Get specific spacecraft */\n  getSpacecraft: (id: string) => SpacecraftPosition | undefined;\n  /** Manually refresh positions */\n  refresh: () => Promise<void>;\n}\n\nconst DEFAULT_MAX_HISTORY = 500;\n\nexport function useSpacecraftPosition(\n  options: UseSpacecraftPositionOptions\n): UseSpacecraftPositionResult {\n  const {\n    client,\n    interval = 1000,\n    enabled = true,\n    trackHistory = true,\n    maxHistory = DEFAULT_MAX_HISTORY,\n  } = options;\n\n  const [spacecraft, setSpacecraft] = useState<SpacecraftPosition[]>([]);\n  const [groundTracks, setGroundTracks] = useState<Map<string, CompactGroundTrackPoint[]>>(new Map());\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [lastUpdate, setLastUpdate] = useState<number | null>(null);\n\n  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n  const startTimeRef = useRef<number>(Date.now());\n\n  const fetchPositions = useCallback(async () => {\n    setIsLoading(true);\n    setError(null);\n\n    try {\n      const positions = await client.fetchSpacecraftPositions();\n      setSpacecraft(positions);\n      setLastUpdate(Date.now());\n\n      // Update ground tracks\n      if (trackHistory) {\n        const elapsed = (Date.now() - startTimeRef.current) / 1000;\n\n        setGroundTracks(prev => {\n          const newTracks = new Map(prev);\n\n          for (const sc of positions) {\n            // Skip if no id\n            if (!sc.id) continue;\n            \n            const point: CompactGroundTrackPoint = {\n              lat: sc.latitude,\n              lon: sc.longitude,\n              t: elapsed,\n            };\n\n            const existing = newTracks.get(sc.id) || [];\n            const updated = [...existing, point];\n\n            if (updated.length > maxHistory) {\n              newTracks.set(sc.id, updated.slice(-maxHistory));\n            } else {\n              newTracks.set(sc.id, updated);\n            }\n          }\n\n          return newTracks;\n        });\n      }\n    } catch (err) {\n      const message = err instanceof Error ? err.message : 'Failed to fetch positions';\n      setError(message);\n    } finally {\n      setIsLoading(false);\n    }\n  }, [client, trackHistory, maxHistory]);\n\n  // Set up polling\n  useEffect(() => {\n    if (!enabled) {\n      if (intervalRef.current) {\n        clearInterval(intervalRef.current);\n        intervalRef.current = null;\n      }\n      return;\n    }\n\n    startTimeRef.current = Date.now();\n\n    // Initial fetch\n    fetchPositions();\n\n    // Set up polling\n    intervalRef.current = setInterval(fetchPositions, interval);\n\n    return () => {\n      if (intervalRef.current) {\n        clearInterval(intervalRef.current);\n        intervalRef.current = null;\n      }\n    };\n  }, [enabled, interval, fetchPositions]);\n\n  const getSpacecraft = useCallback(\n    (id: string) => spacecraft.find(sc => sc.id === id),\n    [spacecraft]\n  );\n\n  return {\n    spacecraft,\n    groundTracks,\n    isLoading,\n    error,\n    lastUpdate,\n    getSpacecraft,\n    refresh: fetchPositions,\n  };\n}\n\nexport default useSpacecraftPosition;\n\n\n\n\n"],"names":[],"mappings":";AAwEA,MAAM,sBAAsB;AAErB,SAAS,sBACd,SAC6B;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV,eAAe;AAAA,IACf,aAAa;AAAA,EAAA,IACX;AAEJ,QAAM,CAAC,YAAY,aAAa,IAAI,SAA+B,CAAA,CAAE;AACrE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAiD,oBAAI,KAAK;AAClG,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAwB,IAAI;AAEhE,QAAM,cAAc,OAA8C,IAAI;AACtE,QAAM,eAAe,OAAe,KAAK,IAAA,CAAK;AAE9C,QAAM,iBAAiB,YAAY,YAAY;AAC7C,iBAAa,IAAI;AACjB,aAAS,IAAI;AAEb,QAAI;AACF,YAAM,YAAY,MAAM,OAAO,yBAAA;AAC/B,oBAAc,SAAS;AACvB,oBAAc,KAAK,KAAK;AAGxB,UAAI,cAAc;AAChB,cAAM,WAAW,KAAK,IAAA,IAAQ,aAAa,WAAW;AAEtD,wBAAgB,CAAA,SAAQ;AACtB,gBAAM,YAAY,IAAI,IAAI,IAAI;AAE9B,qBAAW,MAAM,WAAW;AAE1B,gBAAI,CAAC,GAAG,GAAI;AAEZ,kBAAM,QAAiC;AAAA,cACrC,KAAK,GAAG;AAAA,cACR,KAAK,GAAG;AAAA,cACR,GAAG;AAAA,YAAA;AAGL,kBAAM,WAAW,UAAU,IAAI,GAAG,EAAE,KAAK,CAAA;AACzC,kBAAM,UAAU,CAAC,GAAG,UAAU,KAAK;AAEnC,gBAAI,QAAQ,SAAS,YAAY;AAC/B,wBAAU,IAAI,GAAG,IAAI,QAAQ,MAAM,CAAC,UAAU,CAAC;AAAA,YACjD,OAAO;AACL,wBAAU,IAAI,GAAG,IAAI,OAAO;AAAA,YAC9B;AAAA,UACF;AAEA,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAAA,IACF,SAAS,KAAK;AACZ,YAAM,UAAU,eAAe,QAAQ,IAAI,UAAU;AACrD,eAAS,OAAO;AAAA,IAClB,UAAA;AACE,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,UAAU,CAAC;AAGrC,YAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ,UAAI,YAAY,SAAS;AACvB,sBAAc,YAAY,OAAO;AACjC,oBAAY,UAAU;AAAA,MACxB;AACA;AAAA,IACF;AAEA,iBAAa,UAAU,KAAK,IAAA;AAG5B,mBAAA;AAGA,gBAAY,UAAU,YAAY,gBAAgB,QAAQ;AAE1D,WAAO,MAAM;AACX,UAAI,YAAY,SAAS;AACvB,sBAAc,YAAY,OAAO;AACjC,oBAAY,UAAU;AAAA,MACxB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,UAAU,cAAc,CAAC;AAEtC,QAAM,gBAAgB;AAAA,IACpB,CAAC,OAAe,WAAW,KAAK,CAAA,OAAM,GAAG,OAAO,EAAE;AAAA,IAClD,CAAC,UAAU;AAAA,EAAA;AAGb,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA;AAEb;"}

package/dist/react/hooks/useTelemetry.d.ts

@@ -0,0 +1,55 @@
+import { TelemetryData } from '../types';
+
+/** Attitude data from spacecraft */
+export interface AttitudeData {
+    quaternion?: {
+        x: number;
+        y: number;
+        z: number;
+        w: number;
+    };
+    euler?: {
+        roll: number;
+        pitch: number;
+        yaw: number;
+    };
+    angularVelocity?: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    timestamp?: string;
+}
+/** Client interface (compatible with @zendir/sdk ZendirClient) */
+export interface TelemetryClientInterface {
+    getTelemetry: (spacecraftId: string) => Promise<unknown>;
+    getAttitude: (spacecraftId: string) => Promise<AttitudeData>;
+}
+export interface UseTelemetryOptions {
+    /** Zendir client instance (or any compatible client) */
+    client: TelemetryClientInterface;
+    /** Spacecraft ID to fetch telemetry for */
+    spacecraftId: string;
+    /** Polling interval in ms (default: 2000) */
+    interval?: number;
+    /** Enable polling */
+    enabled?: boolean;
+}
+export interface UseTelemetryResult {
+    /** Latest telemetry data */
+    telemetry: TelemetryData | null;
+    /** Latest attitude data */
+    attitude: AttitudeData | null;
+    /** Telemetry history */
+    history: TelemetryData[];
+    /** Loading state */
+    isLoading: boolean;
+    /** Error message */
+    error: string | null;
+    /** Last update timestamp */
+    lastUpdate: number | null;
+    /** Manually refresh telemetry */
+    refresh: () => Promise<void>;
+}
+export declare function useTelemetry(options: UseTelemetryOptions): UseTelemetryResult;
+export default useTelemetry;

package/dist/react/hooks/useTelemetry.js

@@ -0,0 +1,73 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+const MAX_HISTORY = 100;
+function useTelemetry(options) {
+  const { client, spacecraftId, interval = 2e3, enabled = true } = options;
+  const [telemetry, setTelemetry] = useState(null);
+  const [attitude, setAttitude] = useState(null);
+  const [history, setHistory] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [lastUpdate, setLastUpdate] = useState(null);
+  const intervalRef = useRef(null);
+  const fetchTelemetry = useCallback(async () => {
+    if (!spacecraftId) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const [telemetryData, attitudeData] = await Promise.all([
+        client.getTelemetry(spacecraftId),
+        client.getAttitude(spacecraftId)
+      ]);
+      setTelemetry(telemetryData);
+      setAttitude(attitudeData);
+      setLastUpdate(Date.now());
+      setHistory((prev) => {
+        const newHistory = [...prev, telemetryData];
+        if (newHistory.length > MAX_HISTORY) {
+          return newHistory.slice(-MAX_HISTORY);
+        }
+        return newHistory;
+      });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to fetch telemetry";
+      setError(message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client, spacecraftId]);
+  useEffect(() => {
+    if (!enabled || !spacecraftId) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      return;
+    }
+    fetchTelemetry();
+    intervalRef.current = setInterval(fetchTelemetry, interval);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [enabled, spacecraftId, interval, fetchTelemetry]);
+  useEffect(() => {
+    setHistory([]);
+    setTelemetry(null);
+    setAttitude(null);
+  }, [spacecraftId]);
+  return {
+    telemetry,
+    attitude,
+    history,
+    isLoading,
+    error,
+    lastUpdate,
+    refresh: fetchTelemetry
+  };
+}
+export {
+  useTelemetry
+};
+//# sourceMappingURL=useTelemetry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTelemetry.js","sources":["../../../src/react/hooks/useTelemetry.ts"],"sourcesContent":["/**\n * @zendir/ui - useTelemetry Hook\n * \n * React hook for fetching and updating spacecraft telemetry data.\n * \n * OPTIONAL DEPENDENCY: Requires @zendir/sdk client instance.\n * The client must be passed as a prop (allows using any compatible client).\n */\n\nimport { useState, useEffect, useCallback, useRef } from 'react';\nimport type { TelemetryData } from '../types';\n\n// ============================================================================\n// Types (defined locally to avoid hard dependency on @zendir/sdk)\n// ============================================================================\n\n/** Attitude data from spacecraft */\nexport interface AttitudeData {\n  quaternion?: { x: number; y: number; z: number; w: number };\n  euler?: { roll: number; pitch: number; yaw: number };\n  angularVelocity?: { x: number; y: number; z: number };\n  timestamp?: string;\n}\n\n/** Client interface (compatible with @zendir/sdk ZendirClient) */\nexport interface TelemetryClientInterface {\n  getTelemetry: (spacecraftId: string) => Promise<unknown>;\n  getAttitude: (spacecraftId: string) => Promise<AttitudeData>;\n}\n\n// ============================================================================\n// Hook Types\n// ============================================================================\n\nexport interface UseTelemetryOptions {\n  /** Zendir client instance (or any compatible client) */\n  client: TelemetryClientInterface;\n  /** Spacecraft ID to fetch telemetry for */\n  spacecraftId: string;\n  /** Polling interval in ms (default: 2000) */\n  interval?: number;\n  /** Enable polling */\n  enabled?: boolean;\n}\n\nexport interface UseTelemetryResult {\n  /** Latest telemetry data */\n  telemetry: TelemetryData | null;\n  /** Latest attitude data */\n  attitude: AttitudeData | null;\n  /** Telemetry history */\n  history: TelemetryData[];\n  /** Loading state */\n  isLoading: boolean;\n  /** Error message */\n  error: string | null;\n  /** Last update timestamp */\n  lastUpdate: number | null;\n  /** Manually refresh telemetry */\n  refresh: () => Promise<void>;\n}\n\nconst MAX_HISTORY = 100;\n\nexport function useTelemetry(options: UseTelemetryOptions): UseTelemetryResult {\n  const { client, spacecraftId, interval = 2000, enabled = true } = options;\n\n  const [telemetry, setTelemetry] = useState<TelemetryData | null>(null);\n  const [attitude, setAttitude] = useState<AttitudeData | null>(null);\n  const [history, setHistory] = useState<TelemetryData[]>([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [lastUpdate, setLastUpdate] = useState<number | null>(null);\n\n  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const fetchTelemetry = useCallback(async () => {\n    if (!spacecraftId) return;\n\n    setIsLoading(true);\n    setError(null);\n\n    try {\n      const [telemetryData, attitudeData] = await Promise.all([\n        client.getTelemetry(spacecraftId),\n        client.getAttitude(spacecraftId),\n      ]);\n\n      setTelemetry(telemetryData as unknown as TelemetryData);\n      setAttitude(attitudeData);\n      setLastUpdate(Date.now());\n\n      // Add to history\n      setHistory(prev => {\n        const newHistory = [...prev, telemetryData as unknown as TelemetryData];\n        if (newHistory.length > MAX_HISTORY) {\n          return newHistory.slice(-MAX_HISTORY);\n        }\n        return newHistory;\n      });\n    } catch (err) {\n      const message = err instanceof Error ? err.message : 'Failed to fetch telemetry';\n      setError(message);\n    } finally {\n      setIsLoading(false);\n    }\n  }, [client, spacecraftId]);\n\n  // Set up polling\n  useEffect(() => {\n    if (!enabled || !spacecraftId) {\n      if (intervalRef.current) {\n        clearInterval(intervalRef.current);\n        intervalRef.current = null;\n      }\n      return;\n    }\n\n    // Initial fetch\n    fetchTelemetry();\n\n    // Set up polling\n    intervalRef.current = setInterval(fetchTelemetry, interval);\n\n    return () => {\n      if (intervalRef.current) {\n        clearInterval(intervalRef.current);\n        intervalRef.current = null;\n      }\n    };\n  }, [enabled, spacecraftId, interval, fetchTelemetry]);\n\n  // Clear history when spacecraft changes\n  useEffect(() => {\n    setHistory([]);\n    setTelemetry(null);\n    setAttitude(null);\n  }, [spacecraftId]);\n\n  return {\n    telemetry,\n    attitude,\n    history,\n    isLoading,\n    error,\n    lastUpdate,\n    refresh: fetchTelemetry,\n  };\n}\n\nexport default useTelemetry;\n\n\n\n\n"],"names":[],"mappings":";AA8DA,MAAM,cAAc;AAEb,SAAS,aAAa,SAAkD;AAC7E,QAAM,EAAE,QAAQ,cAAc,WAAW,KAAM,UAAU,SAAS;AAElE,QAAM,CAAC,WAAW,YAAY,IAAI,SAA+B,IAAI;AACrE,QAAM,CAAC,UAAU,WAAW,IAAI,SAA8B,IAAI;AAClE,QAAM,CAAC,SAAS,UAAU,IAAI,SAA0B,CAAA,CAAE;AAC1D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAwB,IAAI;AAEhE,QAAM,cAAc,OAA8C,IAAI;AAEtE,QAAM,iBAAiB,YAAY,YAAY;AAC7C,QAAI,CAAC,aAAc;AAEnB,iBAAa,IAAI;AACjB,aAAS,IAAI;AAEb,QAAI;AACF,YAAM,CAAC,eAAe,YAAY,IAAI,MAAM,QAAQ,IAAI;AAAA,QACtD,OAAO,aAAa,YAAY;AAAA,QAChC,OAAO,YAAY,YAAY;AAAA,MAAA,CAChC;AAED,mBAAa,aAAyC;AACtD,kBAAY,YAAY;AACxB,oBAAc,KAAK,KAAK;AAGxB,iBAAW,CAAA,SAAQ;AACjB,cAAM,aAAa,CAAC,GAAG,MAAM,aAAyC;AACtE,YAAI,WAAW,SAAS,aAAa;AACnC,iBAAO,WAAW,MAAM,CAAC,WAAW;AAAA,QACtC;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH,SAAS,KAAK;AACZ,YAAM,UAAU,eAAe,QAAQ,IAAI,UAAU;AACrD,eAAS,OAAO;AAAA,IAClB,UAAA;AACE,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,CAAC;AAGzB,YAAU,MAAM;AACd,QAAI,CAAC,WAAW,CAAC,cAAc;AAC7B,UAAI,YAAY,SAAS;AACvB,sBAAc,YAAY,OAAO;AACjC,oBAAY,UAAU;AAAA,MACxB;AACA;AAAA,IACF;AAGA,mBAAA;AAGA,gBAAY,UAAU,YAAY,gBAAgB,QAAQ;AAE1D,WAAO,MAAM;AACX,UAAI,YAAY,SAAS;AACvB,sBAAc,YAAY,OAAO;AACjC,oBAAY,UAAU;AAAA,MACxB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,cAAc,UAAU,cAAc,CAAC;AAGpD,YAAU,MAAM;AACd,eAAW,CAAA,CAAE;AACb,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA;AAEb;"}

package/dist/react/hooks/useZendirSession.d.ts

@@ -0,0 +1,109 @@
+/**
+ * @zendir/ui - useZendirSession Hook
+ *
+ * React hook for managing Zendir API session lifecycle.
+ *
+ * OPTIONAL DEPENDENCY: Requires @zendir/sdk to be installed.
+ * If not installed, the hook returns an error state.
+ *
+ * @example
+ * ```tsx
+ * import { useZendirSession } from '@zendir/ui/react';
+ *
+ * function App() {
+ *   const { session, connect, isLoading, error } = useZendirSession({
+ *     apiKey: 'your-api-key',
+ *     autoConnect: true,
+ *   });
+ *
+ *   if (error) return <div>Error: {error}</div>;
+ *   if (isLoading) return <div>Connecting...</div>;
+ *   if (!session) return <button onClick={connect}>Connect</button>;
+ *
+ *   return <div>Connected: {session.id}</div>;
+ * }
+ * ```
+ */
+/** Session info from Zendir API */
+export interface SessionInfo {
+    id: string;
+    status: 'active' | 'expired' | 'error';
+    createdAt?: string;
+    expiresAt?: string;
+}
+/** Simulation info from Zendir API */
+export interface SimulationInfo {
+    id: string;
+    name?: string;
+    status: 'running' | 'paused' | 'stopped';
+    spacecraftCount?: number;
+}
+/** Zendir client interface (matches @zendir/sdk) */
+export interface ZendirClientInterface {
+    createSession: () => Promise<SessionInfo>;
+    createSimulation: (params: {
+        name?: string;
+        spacecraft: Array<{
+            name: string;
+            tle?: {
+                line1: string;
+                line2: string;
+            };
+            catalogNumber?: number;
+        }>;
+    }) => Promise<SimulationInfo>;
+    clearSession: () => void;
+}
+export interface UseZendirSessionOptions {
+    /** API key (optional - can be set via client) */
+    apiKey?: string;
+    /** Base URL override */
+    baseUrl?: string;
+    /** Auto-connect on mount */
+    autoConnect?: boolean;
+    /** Enable debug logging */
+    debug?: boolean;
+}
+export interface UseZendirSessionResult {
+    /** Current session info */
+    session: SessionInfo | null;
+    /** Current simulation info */
+    simulation: SimulationInfo | null;
+    /** Loading state */
+    isLoading: boolean;
+    /** Error message */
+    error: string | null;
+    /** Connected status */
+    isConnected: boolean;
+    /** Whether SDK is available */
+    isSdkAvailable: boolean;
+    /** Zendir client instance (null if SDK not loaded) */
+    client: ZendirClientInterface | null;
+    /** Connect/create session */
+    connect: () => Promise<void>;
+    /** Create simulation */
+    createSimulation: (params: {
+        name?: string;
+        spacecraft: Array<{
+            name: string;
+            tle?: {
+                line1: string;
+                line2: string;
+            };
+            catalogNumber?: number;
+        }>;
+    }) => Promise<void>;
+    /** Disconnect/clear session */
+    disconnect: () => void;
+}
+export declare function useZendirSession(options?: UseZendirSessionOptions): UseZendirSessionResult;
+/**
+ * Check if @zendir/sdk is available
+ */
+export declare function isZendirSdkAvailable(): boolean;
+/**
+ * Preload the @zendir/sdk module
+ * Call this early in your app to ensure SDK is ready
+ */
+export declare function preloadZendirSdk(): Promise<boolean>;
+export default useZendirSession;