Satellite

1"use client";
2 
3import MapLibreGL from "maplibre-gl";
4import { memo, startTransition, useEffect, useMemo, useState } from "react";
5import { createPortal } from "react-dom";
6 
7import { useMap } from "@/components/ui/map";
8 
9type Coordinate = [number, number];
10type ScreenPoint = { x: number; y: number };
11 
12type SatelliteMapTheme = "light" | "dark";
13 
14function getDocumentTheme(): SatelliteMapTheme | null {
15  if (typeof document === "undefined") return null;
16  if (document.documentElement.classList.contains("dark")) return "dark";
17  if (document.documentElement.classList.contains("light")) return "light";
18  return null;
19}
20 
21function getSystemTheme(): SatelliteMapTheme {
22  if (typeof window === "undefined") return "light";
23  return window.matchMedia("(prefers-color-scheme: dark)").matches
24    ? "dark"
25    : "light";
26}
27 
28function useSatelliteMapTheme(): SatelliteMapTheme {
29  const [theme, setTheme] = useState<SatelliteMapTheme>(
30    () => getDocumentTheme() ?? getSystemTheme(),
31  );
32 
33  useEffect(() => {
34    const observer = new MutationObserver(() => {
35      const docTheme = getDocumentTheme();
36      if (docTheme) setTheme(docTheme);
37    });
38    observer.observe(document.documentElement, {
39      attributes: true,
40      attributeFilter: ["class"],
41    });
42 
43    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
44    const onSystem = (e: MediaQueryListEvent) => {
45      if (!getDocumentTheme()) setTheme(e.matches ? "dark" : "light");
46    };
47    mediaQuery.addEventListener("change", onSystem);
48 
49    return () => {
50      observer.disconnect();
51      mediaQuery.removeEventListener("change", onSystem);
52    };
53  }, []);
54 
55  return theme;
56}
57 
58const SATELLITE_ORBIT_COLOR_LIGHT = "#0a0a0a";
59const SATELLITE_ORBIT_COLOR_DARK = "#e8e8e8";
60const SATELLITE_ORBIT_GLOW_COLOR_LIGHT = "rgba(15, 23, 42, 0.18)";
61const SATELLITE_ORBIT_GLOW_COLOR_DARK = "rgba(125, 211, 252, 0.35)";
62const SATELLITE_GROUND_TRACK_COLOR_LIGHT = "rgba(15, 23, 42, 0.22)";
63const SATELLITE_GROUND_TRACK_COLOR_DARK = "rgba(96, 165, 250, 0.28)";
64const SATELLITE_DOT_COLOR_LIGHT = "#0a0a0a";
65const SATELLITE_DOT_COLOR_DARK = "#f8fafc";
66const SATELLITE_PANEL_COLOR_LIGHT = "#374151";
67const SATELLITE_PANEL_COLOR_DARK = "#38bdf8";
68const SATELLITE_CONNECTOR_COLOR_LIGHT = "rgba(15, 23, 42, 0.4)";
69const SATELLITE_CONNECTOR_COLOR_DARK = "rgba(148, 163, 184, 0.45)";
70const VIEWPORT_EVENTS = ["move", "resize"] as const;
71const DEFAULT_SATELLITE_ICON_VIEW_BOX = "-12 -12 24 24";
72 
73type ResolvedSatelliteIconSvg = {
74// … truncated