@zendir/ui 0.1.0

package/dist/react/charts/unified/domain.js

@@ -0,0 +1,3168 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, forwardRef, useMemo, useState, useEffect } from "react";
+import { AstroChart } from "./AstroChart.js";
+import { ASTRO_DATA_VIZ_COLORS, ZENDIR_BRAND_COLORS, STATUS_COLORS } from "./theme.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
+let _echartsGlReady = false;
+let _echartsGlPromise = null;
+function _loadEchartsGl() {
+  if (!_echartsGlPromise) {
+    _echartsGlPromise = import("echarts-gl").then(() => {
+      _echartsGlReady = true;
+      return true;
+    }).catch((err) => {
+      console.warn("[zendir-ui] echarts-gl failed to load — 3D charts will not render:", err);
+      return false;
+    });
+  }
+  return _echartsGlPromise;
+}
+_loadEchartsGl();
+function useEchartsGlReady() {
+  const [ready, setReady] = useState(_echartsGlReady);
+  useEffect(() => {
+    if (!_echartsGlReady) {
+      _loadEchartsGl().then((ok) => {
+        if (ok) setReady(true);
+      });
+    }
+  }, []);
+  return ready;
+}
+const SOFT_STATUS_COLORS = {
+  normal: "#6ed86e",
+  caution: "#ffd54f",
+  critical: "#e57373",
+  standby: "#4fc3f7"
+};
+function useChartTooltipStyle() {
+  const { tokens, mode } = useTheme();
+  const isDark = mode === "dark";
+  return {
+    backgroundColor: isDark ? "rgba(15, 23, 42, 0.95)" : "rgba(255, 255, 255, 0.95)",
+    borderColor: isDark ? "rgba(100, 116, 139, 0.4)" : "rgba(100, 116, 139, 0.3)",
+    textStyle: {
+      color: tokens.colors.text.primary,
+      fontSize: 12
+    }
+  };
+}
+function useChartLegendStyle() {
+  const { tokens } = useTheme();
+  return {
+    textStyle: {
+      color: tokens.colors.text.secondary
+    }
+  };
+}
+function useChartVisualMapStyle() {
+  const { tokens } = useTheme();
+  return {
+    textStyle: {
+      color: tokens.colors.text.tertiary
+    },
+    // Allow drag selection on the visualMap bar
+    calculable: true,
+    // Enable hover linking - when hovering on visualMap, highlight only that range
+    hoverLink: true,
+    // Non-hovered regions get faded opacity (not invisible, just light)
+    outOfRange: {
+      color: "rgba(128, 128, 128, 0.12)",
+      // Very light gray with low opacity
+      opacity: 0.15
+      // Also reduce opacity for 3D elements
+    },
+    // Handle styles for the interactive bar (the draggable endpoints)
+    handleStyle: {
+      borderColor: tokens.colors.accent.primary,
+      color: tokens.colors.accent.primary
+    },
+    // Indicator style when hovering
+    indicatorStyle: {
+      borderColor: "#fff"
+    },
+    // Smooth transition when highlighting
+    realtime: true
+  };
+}
+const PowerChart = memo(forwardRef(
+  function PowerChart2({
+    data = [],
+    title = "Power system",
+    showLegend = true,
+    width = "100%",
+    height = 250,
+    showEclipse = true,
+    loading = false,
+    enableZoom = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip,
+    // Icon/status props
+    icon,
+    iconStatus,
+    statusMessage
+  }, ref) {
+    const { series, annotations } = useMemo(() => {
+      const solarSeries = {
+        id: "solar",
+        name: "Solar",
+        type: "line",
+        data: data.map((d) => ({ x: d.time, y: d.solarPower })),
+        color: SOFT_STATUS_COLORS.standby,
+        // Cyan for solar
+        yAxisIndex: 0,
+        smooth: true,
+        symbol: { type: "none" }
+      };
+      const batterySeries = {
+        id: "battery",
+        name: "Battery",
+        type: "line",
+        data: data.map((d) => ({ x: d.time, y: d.batteryPercent })),
+        color: SOFT_STATUS_COLORS.normal,
+        // Green for battery
+        yAxisIndex: 1,
+        smooth: true,
+        symbol: { type: "none" }
+      };
+      const netPowerSeries = {
+        id: "netPower",
+        name: "Net",
+        type: "line",
+        data: data.map((d) => ({ x: d.time, y: d.netPower })),
+        color: ZENDIR_BRAND_COLORS.electric,
+        // Zendir Electric
+        yAxisIndex: 0,
+        smooth: true,
+        symbol: { type: "none" }
+      };
+      const consumptionSeries = {
+        id: "consumption",
+        name: "Load",
+        type: "line",
+        data: data.map((d) => ({ x: d.time, y: d.consumption })),
+        color: SOFT_STATUS_COLORS.critical,
+        // Red for consumption
+        yAxisIndex: 0,
+        lineStyle: { type: "dashed", width: 1.5 },
+        smooth: true,
+        symbol: { type: "none" }
+      };
+      const eclipseAreas = { data: [] };
+      if (showEclipse) {
+        let inEclipse = false;
+        let eclipseStart = 0;
+        data.forEach((d, _i) => {
+          if (d.eclipse && !inEclipse) {
+            inEclipse = true;
+            eclipseStart = d.time;
+          } else if (!d.eclipse && inEclipse) {
+            inEclipse = false;
+            eclipseAreas.data.push([
+              { xAxis: eclipseStart, name: "Eclipse" },
+              { xAxis: d.time }
+            ]);
+          }
+        });
+        if (inEclipse && data.length > 0) {
+          eclipseAreas.data.push([
+            { xAxis: eclipseStart, name: "Eclipse" },
+            { xAxis: data[data.length - 1].time }
+          ]);
+        }
+        eclipseAreas.itemStyle = {
+          color: `${STATUS_COLORS.critical}15`
+        };
+      }
+      return {
+        series: [solarSeries, batterySeries, netPowerSeries, consumptionSeries],
+        annotations: showEclipse && eclipseAreas.data.length > 0 ? { markAreas: eclipseAreas } : void 0
+      };
+    }, [data, showEclipse]);
+    const tooltipConfig = useMemo(() => ({
+      trigger: "axis",
+      crosshair: "x",
+      formatter: (params) => {
+        var _a;
+        const p = Array.isArray(params) ? params : [];
+        if (p.length === 0) return "";
+        const axisVal = p[0].axisValue ?? p[0].value;
+        const time = typeof axisVal === "number" ? axisVal : axisVal instanceof Date ? axisVal.getTime() : Number(axisVal);
+        const inEclipse = ((_a = annotations == null ? void 0 : annotations.markAreas) == null ? void 0 : _a.data) ? annotations.markAreas.data.some(
+          (pair) => {
+            const start = pair[0].xAxis ?? 0;
+            const end = pair[1].xAxis ?? 0;
+            return time >= start && time <= end;
+          }
+        ) : false;
+        const lines = p.map(
+          (item) => `${item.marker ?? ""} ${item.seriesName ?? ""}: ${item.value ?? ""}`
+        );
+        if (inEclipse) lines.push("◐ Eclipse — spacecraft in shadow; solar panels off");
+        return lines.join("<br/>");
+      }
+    }), [annotations]);
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "line",
+        title,
+        series,
+        width,
+        height,
+        loading,
+        className,
+        icon,
+        iconStatus,
+        statusMessage,
+        xAxis: { type: "time", name: "" },
+        yAxis: [
+          {
+            name: "Power [W]",
+            position: "left",
+            min: 0
+          },
+          {
+            name: "Battery [%]",
+            position: "right",
+            min: 0,
+            max: 100
+          }
+        ],
+        tooltip: tooltipConfig,
+        legend: { show: showLegend, position: "bottom" },
+        zoom: enableZoom ? { enabled: true, type: "inside", axis: "x" } : void 0,
+        annotations,
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const AttitudeChart = memo(forwardRef(
+  function AttitudeChart2({
+    data = [],
+    title = "Attitude control",
+    showLegend = true,
+    width = "100%",
+    height = 200,
+    loading = false,
+    enableZoom = false,
+    showError = true,
+    showAngularVelocity = true,
+    className = "",
+    export: exportOptions,
+    infoTooltip,
+    // Icon/status props
+    icon,
+    iconStatus,
+    statusMessage
+  }, ref) {
+    const series = useMemo(() => {
+      const result = [
+        {
+          id: "roll",
+          name: "Roll",
+          type: "line",
+          data: data.map((d) => ({ x: d.time, y: d.roll })),
+          color: SOFT_STATUS_COLORS.critical,
+          // Red
+          smooth: true,
+          symbol: { type: "none" }
+        },
+        {
+          id: "pitch",
+          name: "Pitch",
+          type: "line",
+          data: data.map((d) => ({ x: d.time, y: d.pitch })),
+          color: SOFT_STATUS_COLORS.normal,
+          // Green
+          smooth: true,
+          symbol: { type: "none" }
+        },
+        {
+          id: "yaw",
+          name: "Yaw",
+          type: "line",
+          data: data.map((d) => ({ x: d.time, y: d.yaw })),
+          color: ZENDIR_BRAND_COLORS.electric,
+          // Zendir Electric
+          smooth: true,
+          symbol: { type: "none" }
+        }
+      ];
+      if (showError && data.some((d) => d.pointingError !== void 0)) {
+        result.push({
+          id: "error",
+          name: "Error",
+          type: "line",
+          data: data.filter((d) => d.pointingError !== void 0).map((d) => ({ x: d.time, y: d.pointingError })),
+          color: SOFT_STATUS_COLORS.caution,
+          // Yellow (status color)
+          smooth: true,
+          symbol: { type: "none" },
+          lineStyle: { width: 1.5 }
+        });
+      }
+      if (showAngularVelocity && data.some((d) => d.angularVelocity !== void 0)) {
+        result.push({
+          id: "angVel",
+          name: "ω",
+          type: "line",
+          data: data.filter((d) => d.angularVelocity !== void 0).map((d) => ({ x: d.time, y: d.angularVelocity })),
+          color: ZENDIR_BRAND_COLORS.purple,
+          // Zendir Purple
+          smooth: true,
+          symbol: { type: "none" },
+          lineStyle: { type: "dashed", width: 1 }
+        });
+      }
+      return result;
+    }, [data, showError, showAngularVelocity]);
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "line",
+        title,
+        series,
+        width,
+        height,
+        loading,
+        className,
+        icon,
+        iconStatus,
+        statusMessage,
+        xAxis: { type: "time", name: "" },
+        yAxis: {
+          name: "Attitude [deg]"
+          // Center zero line
+        },
+        tooltip: { trigger: "axis", crosshair: "x" },
+        legend: { show: showLegend, position: "bottom" },
+        zoom: enableZoom ? { enabled: true, type: "inside", axis: "x" } : void 0,
+        annotations: {
+          markLines: {
+            data: [{ yAxis: 0, label: "", lineStyle: { type: "solid", width: 1 } }]
+          }
+        },
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const ThermalHeatmapChart = memo(forwardRef(
+  function ThermalHeatmapChart2({
+    data = [],
+    zones = [],
+    title = "Thermal zones",
+    width = "100%",
+    height = 300,
+    range = [-40, 80],
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const { series, timeLabels } = useMemo(() => {
+      const timeLabels2 = data.map(
+        (d) => new Date(d.time).toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+          hour12: false
+        })
+      );
+      const heatmapData = [];
+      data.forEach((d, timeIdx) => {
+        zones.forEach((zone, zoneIdx) => {
+          const temp = d.zones[zone] ?? 0;
+          heatmapData.push([timeIdx, zoneIdx, temp]);
+        });
+      });
+      return {
+        series: [{
+          id: "thermal",
+          name: "Temperature",
+          type: "heatmap",
+          data: heatmapData
+        }],
+        timeLabels: timeLabels2
+      };
+    }, [data, zones]);
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "heatmap",
+        title,
+        series,
+        width,
+        height,
+        loading,
+        className,
+        xAxis: { type: "category" },
+        yAxis: { type: "category" },
+        tooltip: { trigger: "item" },
+        echartsOptions: {
+          xAxis: { data: timeLabels },
+          yAxis: { data: zones },
+          visualMap: {
+            min: range[0],
+            max: range[1],
+            calculable: true,
+            orient: "vertical",
+            right: 10,
+            top: "center",
+            // Enable hover linking - highlight only hovered range
+            hoverLink: true,
+            // Non-hovered regions get faded opacity
+            outOfRange: {
+              color: "rgba(128, 128, 128, 0.12)",
+              opacity: 0.15
+            },
+            // Thermal gradient (cold → hot) - Original high-contrast palette
+            // Multi-hue gradient for clear temperature differentiation
+            inRange: {
+              color: [
+                "#313695",
+                // Deep blue (very cold)
+                "#4575b4",
+                // Blue
+                "#74add1",
+                // Light blue
+                "#abd9e9",
+                // Pale blue
+                "#e0f3f8",
+                // Very pale blue
+                "#ffffbf",
+                // Pale yellow (neutral)
+                "#fee090",
+                // Light orange
+                "#fdae61",
+                // Orange
+                "#f46d43",
+                // Red-orange
+                "#d73027",
+                // Red
+                "#a50026"
+                // Dark red (very hot)
+              ]
+            }
+          },
+          series: [{
+            type: "heatmap",
+            data: series[0].data,
+            label: { show: true, formatter: (p) => Array.isArray(p.value) && typeof p.value[2] === "number" ? `${p.value[2]}°` : "" },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              }
+            }
+          }]
+        },
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const LinkBudgetChart = memo(forwardRef(
+  function LinkBudgetChart2({
+    data = [],
+    title = "Link budget",
+    showLegend = true,
+    width = "100%",
+    height = 200,
+    marginThreshold = 3,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const series = useMemo(() => [
+      {
+        id: "signal",
+        name: "Signal",
+        type: "area",
+        data: data.map((d) => ({ x: d.time, y: d.signalStrength })),
+        color: SOFT_STATUS_COLORS.normal,
+        smooth: true,
+        symbol: { type: "none" },
+        areaStyle: { opacity: 0.2 }
+      },
+      {
+        id: "noise",
+        name: "Noise floor",
+        type: "line",
+        data: data.map((d) => ({ x: d.time, y: d.noiseFloor })),
+        color: SOFT_STATUS_COLORS.critical,
+        smooth: true,
+        symbol: { type: "none" },
+        lineStyle: { type: "dashed", width: 1 }
+      },
+      {
+        id: "margin",
+        name: "Margin",
+        type: "line",
+        data: data.map((d) => ({ x: d.time, y: d.margin })),
+        color: SOFT_STATUS_COLORS.standby,
+        yAxisIndex: 1,
+        smooth: true,
+        symbol: { type: "none" }
+      }
+    ], [data]);
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "line",
+        title,
+        series,
+        width,
+        height,
+        loading,
+        className,
+        xAxis: { type: "time" },
+        yAxis: [
+          { name: "dBm", position: "left" },
+          { name: "Margin [dB]", position: "right", min: 0 }
+        ],
+        tooltip: { trigger: "axis", crosshair: "x" },
+        legend: { show: showLegend, position: "bottom" },
+        annotations: {
+          markLines: {
+            data: [
+              {
+                yAxis: marginThreshold,
+                label: `Min margin (${marginThreshold} dB)`,
+                color: SOFT_STATUS_COLORS.caution,
+                lineStyle: { type: "dashed" }
+              }
+            ]
+          }
+        },
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const SubsystemGauge = memo(forwardRef(
+  function SubsystemGauge2({
+    value,
+    name,
+    unit = "%",
+    width = 200,
+    height = 200,
+    thresholds = { caution: 70, critical: 90 },
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const clampedValue = Math.max(0, Math.min(100, value));
+    const widthPx = typeof width === "number" ? width : height;
+    const gaugeSize = Math.max(110, Math.min(widthPx, height));
+    const arcWidth = Math.max(8, Math.round(gaugeSize * 0.085));
+    const valueFontSize = Math.max(18, Math.round(gaugeSize * 0.17));
+    const titleFontSize = Math.max(10, Math.round(gaugeSize * 0.085));
+    const compactGauge = gaugeSize < 150;
+    const centerY = compactGauge ? "53%" : "55%";
+    const detailY = compactGauge ? "10%" : "15%";
+    const titleY = compactGauge ? "78%" : "84%";
+    const unitSuffix = (unit == null ? void 0 : unit.trim()) ?? "";
+    const longUnit = unitSuffix.length > 4;
+    const getValueColor = () => {
+      if (thresholds.critical && clampedValue >= thresholds.critical) return SOFT_STATUS_COLORS.critical;
+      if (thresholds.caution && clampedValue >= thresholds.caution) return SOFT_STATUS_COLORS.caution;
+      return SOFT_STATUS_COLORS.normal;
+    };
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "gauge",
+        series: [],
+        width,
+        height,
+        loading,
+        className,
+        echartsOptions: {
+          series: [{
+            type: "gauge",
+            min: 0,
+            max: 100,
+            startAngle: 200,
+            endAngle: -20,
+            radius: "90%",
+            center: ["50%", centerY],
+            // Modern minimal track
+            axisLine: {
+              lineStyle: {
+                width: arcWidth,
+                color: [[1, "rgba(100, 116, 139, 0.15)"]]
+                // Subtle track
+              }
+            },
+            // Hide all traditional gauge elements
+            axisTick: { show: false },
+            splitLine: { show: false },
+            axisLabel: { show: false },
+            pointer: { show: false },
+            // No pointer for modern look
+            // Progress arc with gradient
+            progress: {
+              show: true,
+              width: arcWidth,
+              roundCap: true,
+              itemStyle: {
+                color: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 1,
+                  y2: 0,
+                  colorStops: [
+                    { offset: 0, color: "rgba(100, 200, 200, 0.6)" },
+                    { offset: 1, color: getValueColor() }
+                  ]
+                },
+                shadowColor: getValueColor(),
+                shadowBlur: 8
+              }
+            },
+            // Clean title below
+            title: {
+              show: true,
+              offsetCenter: [0, titleY],
+              fontSize: titleFontSize,
+              fontWeight: 500,
+              color: "rgba(255, 255, 255, 0.7)"
+            },
+            // Modern centered value
+            detail: {
+              valueAnimation: true,
+              formatter: (currentValue) => {
+                const rounded = Math.round(currentValue);
+                if (!unitSuffix) return `${rounded}`;
+                if (longUnit) return `${rounded}
+{unit|${unitSuffix}}`;
+                return `${rounded}${unitSuffix}`;
+              },
+              fontSize: valueFontSize,
+              fontWeight: 700,
+              // AstroUXDS bold for gauge values
+              lineHeight: Math.round(valueFontSize * 1.05),
+              offsetCenter: [0, detailY],
+              color: getValueColor(),
+              rich: {
+                unit: {
+                  color: "rgba(255, 255, 255, 0.75)",
+                  fontSize: Math.max(10, Math.round(valueFontSize * 0.5)),
+                  fontWeight: 500,
+                  lineHeight: Math.round(valueFontSize * 0.8)
+                }
+              }
+            },
+            data: [{ value: clampedValue, name }]
+          }]
+        },
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const OrbitChart = memo(forwardRef(
+  function OrbitChart2({
+    data = [],
+    title = "Polar Projection",
+    referenceAltitude,
+    width = 300,
+    height = 300,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "scatter",
+        title,
+        series: [],
+        width,
+        height,
+        loading,
+        className,
+        echartsOptions: {
+          polar: {
+            radius: ["0%", "75%"],
+            center: ["50%", "50%"]
+          },
+          angleAxis: {
+            type: "value",
+            min: 0,
+            max: 360,
+            startAngle: 90,
+            interval: 30,
+            axisLine: { show: false },
+            axisTick: { show: false },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "rgba(100, 116, 139, 0.15)",
+                type: "dashed"
+              }
+            },
+            axisLabel: {
+              fontSize: 9,
+              color: "rgba(255, 255, 255, 0.4)",
+              formatter: (value) => value === 0 ? "" : `${value}°`
+            }
+          },
+          radiusAxis: {
+            min: referenceAltitude ? referenceAltitude * 0.9 : "dataMin",
+            max: referenceAltitude ? referenceAltitude * 1.1 : "dataMax",
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { show: false },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "rgba(100, 116, 139, 0.2)",
+                type: "dashed"
+              }
+            }
+          },
+          series: [{
+            type: "scatter",
+            name: "Position",
+            coordinateSystem: "polar",
+            data: data.map((d) => [d.altitude, d.angle]),
+            symbolSize: 8,
+            itemStyle: {
+              color: ZENDIR_BRAND_COLORS.electric,
+              // Zendir Electric
+              shadowColor: ZENDIR_BRAND_COLORS.electric,
+              shadowBlur: 6
+            }
+          }]
+        },
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const ContactWindowChart = memo(forwardRef(
+  function ContactWindowChart2({
+    data = [],
+    title = "Contact windows",
+    timeRange,
+    width = "100%",
+    height = 200,
+    loading = false,
+    enableZoom = true,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const { categories, ganttData } = useMemo(() => {
+      const cats = data.map((d) => d.name);
+      const items = [];
+      data.forEach((station, stationIdx) => {
+        station.windows.forEach((w) => {
+          w.signalQuality === "poor" ? STATUS_COLORS.critical : w.signalQuality === "marginal" ? STATUS_COLORS.caution : STATUS_COLORS.normal;
+          items.push({
+            name: station.name,
+            value: [stationIdx, w.start, w.end, w.label]
+          });
+        });
+      });
+      return { categories: cats, ganttData: items };
+    }, [data]);
+    const series = [{
+      id: "contacts",
+      name: "Contacts",
+      type: "bar",
+      data: []
+    }];
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "bar",
+        title,
+        series,
+        width,
+        height,
+        loading,
+        className,
+        zoom: enableZoom ? { enabled: true, type: "inside", axis: "x" } : void 0,
+        echartsOptions: {
+          tooltip: {
+            trigger: "item",
+            formatter: (params) => {
+              const p = params;
+              const [, start, end, label] = p.value;
+              const duration = ((end - start) / 6e4).toFixed(1);
+              return `${label || "Contact"}<br/>Duration: ${duration} min`;
+            }
+          },
+          grid: { left: 100, right: 20, top: 40, bottom: 40 },
+          xAxis: {
+            type: "time",
+            min: timeRange == null ? void 0 : timeRange[0],
+            max: timeRange == null ? void 0 : timeRange[1]
+          },
+          yAxis: {
+            type: "category",
+            data: categories
+          },
+          series: [{
+            type: "custom",
+            renderItem: (_params, api) => {
+              const a = api;
+              const catIdx = a.value(0);
+              const start = a.coord([a.value(1), catIdx]);
+              const end = a.coord([a.value(2), catIdx]);
+              const height2 = a.size([0, 1])[1] * 0.6;
+              return {
+                type: "rect",
+                shape: {
+                  x: start[0],
+                  y: start[1] - height2 / 2,
+                  width: end[0] - start[0],
+                  height: height2
+                },
+                style: {
+                  fill: STATUS_COLORS.normal,
+                  stroke: STATUS_COLORS.standby
+                }
+              };
+            },
+            encode: { x: [1, 2], y: 0 },
+            data: ganttData
+          }]
+        },
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const SpectrumChart = memo(forwardRef(
+  function SpectrumChart2({
+    data = [],
+    title = "RF spectrum",
+    frequencyRange,
+    powerRange,
+    noiseFloor,
+    width = "100%",
+    height = 200,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const series = useMemo(() => [{
+      id: "spectrum",
+      name: "Power",
+      type: "area",
+      data: data.map((d) => ({ x: d.frequency, y: d.power })),
+      color: ZENDIR_BRAND_COLORS.electric,
+      // Zendir Electric
+      smooth: false,
+      areaStyle: { opacity: 0.3 },
+      symbol: { type: "none" }
+    }], [data]);
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "area",
+        title,
+        series,
+        width,
+        height,
+        loading,
+        className,
+        xAxis: {
+          type: "value",
+          name: "Frequency",
+          min: frequencyRange == null ? void 0 : frequencyRange[0],
+          max: frequencyRange == null ? void 0 : frequencyRange[1]
+        },
+        yAxis: {
+          type: "value",
+          name: "dBm",
+          min: powerRange == null ? void 0 : powerRange[0],
+          max: powerRange == null ? void 0 : powerRange[1]
+        },
+        tooltip: { trigger: "axis", crosshair: "x" },
+        annotations: noiseFloor !== void 0 ? {
+          markLines: {
+            data: [{
+              yAxis: noiseFloor,
+              label: `Noise floor (${noiseFloor} dBm)`,
+              color: SOFT_STATUS_COLORS.caution,
+              lineStyle: { type: "dashed" }
+            }]
+          }
+        } : void 0,
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const ManeuverBudgetChart = memo(forwardRef(
+  function ManeuverBudgetChart2({
+    data = [],
+    title = "Delta-V budget",
+    totalBudget,
+    width = "100%",
+    height = 200,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const series = useMemo(() => {
+      const typeColors = {
+        executed: STATUS_COLORS.normal,
+        // Green (completed)
+        planned: STATUS_COLORS.standby,
+        // Cyan (scheduled)
+        remaining: ZENDIR_BRAND_COLORS.electric,
+        // Zendir Electric
+        margin: ZENDIR_BRAND_COLORS.purple
+        // Zendir Purple
+      };
+      return [{
+        id: "deltaV",
+        name: "Delta-V",
+        type: "bar",
+        data: data.map((d) => ({
+          x: d.name,
+          y: d.deltaV,
+          meta: { type: d.type, color: typeColors[d.type] || STATUS_COLORS.standby }
+        }))
+      }];
+    }, [data]);
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "bar",
+        title,
+        subtitle: totalBudget ? `Total: ${totalBudget} m/s` : void 0,
+        series,
+        width,
+        height,
+        loading,
+        className,
+        xAxis: { type: "category" },
+        yAxis: { type: "value", name: "m/s" },
+        tooltip: { trigger: "axis" },
+        echartsOptions: {
+          series: [{
+            type: "bar",
+            data: data.map((d) => ({
+              value: d.deltaV,
+              name: d.name,
+              itemStyle: {
+                color: d.type === "executed" ? STATUS_COLORS.normal : d.type === "planned" ? STATUS_COLORS.standby : d.type === "remaining" ? ZENDIR_BRAND_COLORS.electric : ZENDIR_BRAND_COLORS.purple
+              }
+            }))
+          }]
+        },
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const EclipseTimelineChart = memo(forwardRef(
+  function EclipseTimelineChart2({
+    data = [],
+    title = "Eclipse timeline",
+    timeRange,
+    width = "100%",
+    height = 100,
+    loading = false,
+    enableZoom = true,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const series = [{
+      id: "eclipse",
+      name: "Eclipse",
+      type: "bar",
+      data: []
+    }];
+    const typeColors = {
+      umbra: ZENDIR_BRAND_COLORS.prussianBlue,
+      // Deep Zendir blue
+      penumbra: ZENDIR_BRAND_COLORS.electricDark,
+      // Dark electric
+      sunlight: STATUS_COLORS.caution
+      // Standard yellow for sunlight
+    };
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "bar",
+        title,
+        series,
+        width,
+        height,
+        loading,
+        className,
+        zoom: enableZoom ? { enabled: true, type: "inside", axis: "x" } : void 0,
+        echartsOptions: {
+          tooltip: {
+            trigger: "item",
+            formatter: (params) => {
+              const p = params;
+              const [start, end, eclipseType] = p.data.value;
+              const duration = ((end - start) / 6e4).toFixed(1);
+              return `${eclipseType.charAt(0).toUpperCase() + eclipseType.slice(1)}<br/>Duration: ${duration} min`;
+            }
+          },
+          grid: { left: 60, right: 20, top: 30, bottom: 30 },
+          xAxis: {
+            type: "time",
+            min: timeRange == null ? void 0 : timeRange[0],
+            max: timeRange == null ? void 0 : timeRange[1]
+          },
+          yAxis: {
+            type: "category",
+            data: [""],
+            show: false
+          },
+          series: [{
+            type: "custom",
+            renderItem: (_params, api) => {
+              const a = api;
+              const start = a.coord([a.value(0), 0]);
+              const end = a.coord([a.value(1), 0]);
+              const eclipseType = a.value(2);
+              const h = 30;
+              return {
+                type: "rect",
+                shape: {
+                  x: start[0],
+                  y: start[1] - h / 2,
+                  width: Math.max(end[0] - start[0], 2),
+                  height: h
+                },
+                style: {
+                  fill: typeColors[eclipseType] || typeColors.sunlight
+                }
+              };
+            },
+            encode: { x: [0, 1] },
+            data: data.map((d) => ({ value: [d.start, d.end, d.type] }))
+          }]
+        },
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const RoseDiagram = memo(forwardRef(
+  function RoseDiagram2({
+    data = [],
+    title = "Rose Diagram",
+    width = "100%",
+    height = 400,
+    bins = 16,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const binData = useMemo(() => {
+      const binSize = 360 / bins;
+      const binCounts = new Array(bins).fill(0);
+      data.forEach((d) => {
+        const normalizedAngle = (d.direction % 360 + 360) % 360;
+        const binIndex = Math.floor(normalizedAngle / binSize);
+        binCounts[binIndex] += d.magnitude;
+      });
+      return binCounts.map((count, i) => ({
+        name: `${(i * binSize).toFixed(0)}°`,
+        value: count
+      }));
+    }, [data, bins]);
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "bar",
+        series: [],
+        title,
+        width,
+        height,
+        loading,
+        className,
+        echartsOptions: {
+          polar: {
+            radius: ["10%", "70%"],
+            center: ["50%", "50%"]
+          },
+          angleAxis: {
+            type: "category",
+            data: binData.map((d) => d.name),
+            startAngle: 90,
+            boundaryGap: true,
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: {
+              fontSize: 9,
+              color: "rgba(255, 255, 255, 0.5)",
+              margin: 8
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "rgba(100, 116, 139, 0.12)",
+                type: "dashed"
+              }
+            }
+          },
+          radiusAxis: {
+            min: 0,
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { show: false },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "rgba(100, 116, 139, 0.15)",
+                type: "dashed"
+              }
+            }
+          },
+          tooltip: {
+            trigger: "item",
+            backgroundColor: "rgba(20, 30, 48, 0.95)",
+            borderColor: "rgba(100, 116, 139, 0.3)",
+            textStyle: { color: "rgba(255, 255, 255, 0.87)" }
+            // High contrast white
+          },
+          series: [{
+            type: "bar",
+            data: binData.map((d) => d.value),
+            coordinateSystem: "polar",
+            roundCap: true,
+            itemStyle: {
+              // Zendir Electric → Purple gradient
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 1,
+                y2: 0,
+                colorStops: [
+                  { offset: 0, color: ZENDIR_BRAND_COLORS.electric },
+                  // #3E3CFF
+                  { offset: 1, color: ZENDIR_BRAND_COLORS.purple }
+                  // #9D70FF
+                ]
+              },
+              shadowColor: ZENDIR_BRAND_COLORS.purple,
+              shadowBlur: 4
+            }
+          }]
+        },
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const ORBIT_COLOR_MAP = {
+  // Human-made objects: Zendir Purple/Blue shades
+  spacecraft: "#3E3CFF",
+  // Zendir Electric
+  satellite: "#9D70FF",
+  // Zendir Purple
+  station: "#3548C0",
+  // Zendir Prussian Blue Light
+  probe: "#1B2DA0",
+  // Zendir Prussian Blue
+  // Natural objects: Realistic colors
+  planet: "#5BC0DE",
+  // Teal-blue (default)
+  // Debris/Asteroids: Brown/Gray shades
+  asteroid: "#8B7355",
+  // Warm brown
+  debris: "#6B6B6B",
+  // Gray
+  // Comets: Brown with icy tones
+  comet: "#5C4033"
+  // Dark brown
+};
+const ORBIT_TYPE_LABELS = {
+  spacecraft: "Spacecraft",
+  satellite: "Satellite",
+  station: "Space Station",
+  probe: "Deep Space Probe",
+  planet: "Planet",
+  asteroid: "Asteroid",
+  debris: "Debris",
+  comet: "Comet"
+};
+const HeliocentricOrbitPlot = memo(forwardRef(
+  function HeliocentricOrbitPlot2({
+    data = [],
+    title = "Heliocentric Orbit",
+    width = "100%",
+    height = 500,
+    showGrid = true,
+    enableZoom = true,
+    showLabels = true,
+    mode = "2d",
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip,
+    onBodyClick: _onBodyClick
+  }, ref) {
+    const { tokens, mode: themeMode } = useTheme();
+    const tooltipStyle = useChartTooltipStyle();
+    useChartLegendStyle();
+    const labelPrimary = tokens.colors.text.primary;
+    const labelSecondary = tokens.colors.text.secondary;
+    tokens.colors.text.tertiary;
+    const labelBg = themeMode === "dark" ? "rgba(15, 23, 42, 0.72)" : "rgba(255, 255, 255, 0.9)";
+    const bodyDataMap = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      data.forEach((body) => map.set(body.name, body));
+      return map;
+    }, [data]);
+    const echarts2DOptions = useMemo(() => {
+      const seriesArray = [];
+      data.forEach((body, idx) => {
+        const bodyColor = body.color || ORBIT_COLOR_MAP[body.type || "spacecraft"] || ASTRO_DATA_VIZ_COLORS.mixed[idx % ASTRO_DATA_VIZ_COLORS.mixed.length];
+        const typeLabel = ORBIT_TYPE_LABELS[body.type || "spacecraft"] || "Object";
+        if (body.orbitPath && body.orbitPath.length > 0) {
+          const orbitRadius = body.semiMajorAxis || Math.max(...body.orbitPath.map((p) => Math.sqrt(p.x * p.x + p.y * p.y)));
+          seriesArray.push({
+            type: "line",
+            name: `${body.name} Orbit`,
+            data: body.orbitPath.map((p) => [p.x, p.y, body.name, typeLabel, orbitRadius, body.period, body.inclination]),
+            lineStyle: {
+              color: bodyColor,
+              type: "dashed",
+              width: 1.5,
+              opacity: 0.6
+            },
+            symbol: "none",
+            silent: false,
+            emphasis: {
+              lineStyle: {
+                width: 3.5,
+                opacity: 1,
+                shadowBlur: 8,
+                shadowColor: bodyColor
+              }
+            },
+            z: 1
+          });
+        }
+        seriesArray.push({
+          type: "scatter",
+          name: body.name,
+          symbolSize: body.size || (body.type === "planet" ? 20 : 12),
+          data: [[body.x, body.y, body.z || 0, body.type, typeLabel, body.description, body.semiMajorAxis, body.period]],
+          itemStyle: {
+            color: bodyColor,
+            shadowColor: bodyColor,
+            shadowBlur: body.type === "planet" ? 10 : 5
+          },
+          label: {
+            show: showLabels,
+            position: "top",
+            formatter: body.name,
+            fontSize: 11,
+            color: labelSecondary,
+            textBorderColor: "transparent",
+            textBorderWidth: 0
+          },
+          emphasis: {
+            scale: 1.6,
+            itemStyle: {
+              shadowBlur: 20
+            },
+            label: {
+              show: true,
+              fontWeight: "bold",
+              fontSize: 12,
+              color: labelPrimary
+            }
+          },
+          z: 10
+        });
+      });
+      return {
+        tooltip: {
+          trigger: "item",
+          ...tooltipStyle,
+          borderWidth: 1,
+          padding: [12, 16],
+          formatter: (params) => {
+            const seriesName = params.seriesName || "";
+            if (params.seriesType === "line") {
+              const [_x, _y, bodyName, typeLabel, orbitRadius, period, inclination] = params.value || [];
+              const bodyInfo = bodyDataMap.get(bodyName);
+              let html = `<div style="font-weight:600;font-size:13px;margin-bottom:6px;color:#3E3CFF">${seriesName}</div>`;
+              html += `<div style="color:rgba(255,255,255,0.5);font-size:10px;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px">${typeLabel || "Orbital Path"}</div>`;
+              html += `<div style="border-top:1px solid rgba(100,116,139,0.3);padding-top:8px">`;
+              if (orbitRadius) {
+                html += `<div style="display:flex;justify-content:space-between;margin-bottom:4px"><span style="color:rgba(255,255,255,0.6)">Semi-major axis:</span><span style="font-family:monospace">${orbitRadius.toFixed(3)} AU</span></div>`;
+              }
+              if (period) {
+                html += `<div style="display:flex;justify-content:space-between;margin-bottom:4px"><span style="color:rgba(255,255,255,0.6)">Orbital period:</span><span style="font-family:monospace">${period.toFixed(1)} days</span></div>`;
+              }
+              if (inclination !== void 0) {
+                html += `<div style="display:flex;justify-content:space-between;margin-bottom:4px"><span style="color:rgba(255,255,255,0.6)">Inclination:</span><span style="font-family:monospace">${inclination.toFixed(1)}°</span></div>`;
+              }
+              if (bodyInfo == null ? void 0 : bodyInfo.description) {
+                html += `<div style="margin-top:6px;color:rgba(255,255,255,0.7);font-style:italic;font-size:11px">${bodyInfo.description}</div>`;
+              }
+              html += `</div>`;
+              return html;
+            }
+            if (params.seriesType === "scatter") {
+              const [x, y, z, _bodyType, typeLabel, description, sma, period] = params.value;
+              const distance = Math.sqrt(x * x + y * y + (z || 0) * (z || 0));
+              let html = `<div style="font-weight:600;font-size:13px;margin-bottom:4px">${seriesName}</div>`;
+              html += `<div style="color:rgba(255,255,255,0.5);font-size:10px;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px">${typeLabel || "Object"}</div>`;
+              html += `<div style="border-top:1px solid rgba(100,116,139,0.3);padding-top:8px">`;
+              html += `<div style="display:flex;justify-content:space-between;margin-bottom:3px"><span style="color:rgba(255,255,255,0.6)">X:</span><span style="font-family:monospace">${x.toFixed(3)} AU</span></div>`;
+              html += `<div style="display:flex;justify-content:space-between;margin-bottom:3px"><span style="color:rgba(255,255,255,0.6)">Y:</span><span style="font-family:monospace">${y.toFixed(3)} AU</span></div>`;
+              if (z !== 0 && z !== void 0) {
+                html += `<div style="display:flex;justify-content:space-between;margin-bottom:3px"><span style="color:rgba(255,255,255,0.6)">Z:</span><span style="font-family:monospace">${z.toFixed(3)} AU</span></div>`;
+              }
+              html += `<div style="display:flex;justify-content:space-between;margin-bottom:3px;border-top:1px solid rgba(100,116,139,0.2);padding-top:6px;margin-top:4px"><span style="color:rgba(255,255,255,0.6)">Distance from Sun:</span><span style="font-family:monospace;color:#5BC0DE">${distance.toFixed(3)} AU</span></div>`;
+              if (sma) {
+                html += `<div style="display:flex;justify-content:space-between;margin-bottom:3px"><span style="color:rgba(255,255,255,0.6)">Semi-major axis:</span><span style="font-family:monospace">${sma.toFixed(3)} AU</span></div>`;
+              }
+              if (period) {
+                html += `<div style="display:flex;justify-content:space-between;margin-bottom:3px"><span style="color:rgba(255,255,255,0.6)">Period:</span><span style="font-family:monospace">${period.toFixed(1)} days</span></div>`;
+              }
+              if (description) {
+                html += `<div style="margin-top:8px;color:rgba(255,255,255,0.7);font-style:italic;font-size:11px;max-width:200px">${description}</div>`;
+              }
+              html += `</div>`;
+              return html;
+            }
+            return seriesName;
+          }
+        },
+        toolbox: {
+          show: enableZoom,
+          right: 20,
+          top: 10,
+          feature: {
+            dataZoom: { show: true, title: { zoom: "Zoom", back: "Reset" } },
+            restore: { show: true, title: "Reset" }
+          },
+          iconStyle: { borderColor: "rgba(255, 255, 255, 0.5)" }
+        },
+        dataZoom: enableZoom ? [
+          { type: "inside", xAxisIndex: 0, filterMode: "none" },
+          { type: "inside", yAxisIndex: 0, filterMode: "none" }
+        ] : void 0,
+        grid: {
+          containLabel: true,
+          left: 60,
+          right: enableZoom ? 80 : 40,
+          top: 60,
+          bottom: 60
+        },
+        xAxis: {
+          type: "value",
+          name: "X (AU)",
+          nameLocation: "middle",
+          nameGap: 30,
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" },
+          splitLine: { show: showGrid, lineStyle: { color: "rgba(100, 116, 139, 0.15)" } },
+          axisLine: { show: true, lineStyle: { color: "rgba(100, 116, 139, 0.3)" } },
+          axisLabel: { color: "rgba(255, 255, 255, 0.5)" }
+        },
+        yAxis: {
+          type: "value",
+          name: "Y (AU)",
+          nameLocation: "middle",
+          nameGap: 40,
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" },
+          splitLine: { show: showGrid, lineStyle: { color: "rgba(100, 116, 139, 0.15)" } },
+          axisLine: { show: true, lineStyle: { color: "rgba(100, 116, 139, 0.3)" } },
+          axisLabel: { color: "rgba(255, 255, 255, 0.5)" }
+        },
+        animation: true,
+        animationDuration: 300,
+        series: seriesArray
+      };
+    }, [data, showGrid, enableZoom, showLabels, bodyDataMap, tooltipStyle]);
+    const echarts3DOptions = useMemo(() => {
+      const seriesArray = [];
+      data.forEach((body, idx) => {
+        const bodyColor = body.color || ORBIT_COLOR_MAP[body.type || "spacecraft"] || ASTRO_DATA_VIZ_COLORS.mixed[idx % ASTRO_DATA_VIZ_COLORS.mixed.length];
+        const typeLabel = ORBIT_TYPE_LABELS[body.type || "spacecraft"] || "Object";
+        if (body.orbitPath && body.orbitPath.length > 0) {
+          const orbitData = body.orbitPath.map((p) => [p.x, p.y, p.z || 0]);
+          if (orbitData.length > 2) {
+            orbitData.push(orbitData[0]);
+          }
+          seriesArray.push({
+            type: "line3D",
+            name: `${body.name} Orbit`,
+            coordinateSystem: "cartesian3D",
+            data: orbitData,
+            lineStyle: {
+              color: bodyColor,
+              width: 1.5,
+              opacity: 0.6
+            },
+            silent: false
+          });
+        }
+        seriesArray.push({
+          type: "scatter3D",
+          name: body.name,
+          coordinateSystem: "cartesian3D",
+          data: [{
+            name: body.name,
+            value: [body.x, body.y, body.z || 0],
+            itemStyle: { color: bodyColor },
+            typeLabel,
+            description: body.description
+          }],
+          symbolSize: body.size || (body.type === "planet" ? 16 : 10),
+          itemStyle: { color: bodyColor },
+          label: {
+            show: showLabels,
+            formatter: body.name,
+            textStyle: {
+              color: labelPrimary,
+              fontSize: 11,
+              backgroundColor: labelBg,
+              padding: [2, 4],
+              borderRadius: 2
+            }
+          },
+          emphasis: {
+            itemStyle: { opacity: 1 },
+            label: { show: true }
+          }
+        });
+      });
+      return {
+        tooltip: {
+          show: true,
+          ...tooltipStyle,
+          formatter: (params) => {
+            const d = params.data || {};
+            const seriesName = params.seriesName || "";
+            if (params.seriesType === "line3D") {
+              return `<div style="font-weight:600">${seriesName}</div>`;
+            }
+            const [x, y, z] = d.value || params.value || [0, 0, 0];
+            const distance = Math.sqrt(x * x + y * y + z * z);
+            let html = `<div style="font-weight:600;font-size:13px;margin-bottom:4px">${d.name || seriesName}</div>`;
+            html += `<div style="color:rgba(255,255,255,0.5);font-size:10px;margin-bottom:8px;text-transform:uppercase">${d.typeLabel || "Object"}</div>`;
+            html += `<div style="border-top:1px solid rgba(100,116,139,0.3);padding-top:8px">`;
+            html += `<div>X: <span style="font-family:monospace">${x.toFixed(3)}</span> AU</div>`;
+            html += `<div>Y: <span style="font-family:monospace">${y.toFixed(3)}</span> AU</div>`;
+            html += `<div>Z: <span style="font-family:monospace">${z.toFixed(3)}</span> AU</div>`;
+            html += `<div style="margin-top:4px;color:#5BC0DE">Distance: <span style="font-family:monospace">${distance.toFixed(3)}</span> AU</div>`;
+            if (d.description) {
+              html += `<div style="margin-top:6px;color:rgba(255,255,255,0.7);font-style:italic;font-size:11px">${d.description}</div>`;
+            }
+            html += `</div>`;
+            return html;
+          }
+        },
+        grid3D: {
+          boxWidth: 200,
+          boxHeight: 60,
+          boxDepth: 200,
+          viewControl: {
+            autoRotate: false,
+            autoRotateAfterStill: 5,
+            autoRotateSpeed: 5,
+            distance: 280,
+            alpha: 20,
+            beta: 40,
+            rotateSensitivity: 2,
+            zoomSensitivity: 1.5,
+            panSensitivity: 1
+          },
+          light: {
+            main: { intensity: 1.2, shadow: false },
+            ambient: { intensity: 0.4 }
+          },
+          postEffect: {
+            enable: true,
+            bloom: { enable: true, intensity: 0.05 }
+          }
+        },
+        xAxis3D: {
+          type: "value",
+          name: "X (AU)",
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" },
+          axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.4)" } },
+          axisLabel: { color: "rgba(255, 255, 255, 0.4)", formatter: (v) => v.toFixed(1) },
+          splitLine: { show: showGrid, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } }
+        },
+        yAxis3D: {
+          type: "value",
+          name: "Y (AU)",
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" },
+          axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.4)" } },
+          axisLabel: { color: "rgba(255, 255, 255, 0.4)", formatter: (v) => v.toFixed(1) },
+          splitLine: { show: showGrid, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } }
+        },
+        zAxis3D: {
+          type: "value",
+          name: "Z (AU)",
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" },
+          axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.4)" } },
+          axisLabel: { color: "rgba(255, 255, 255, 0.4)", formatter: (v) => v.toFixed(1) },
+          splitLine: { show: showGrid, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } }
+        },
+        series: seriesArray
+      };
+    }, [data, showGrid, showLabels]);
+    const echartsOptions = mode === "3d" ? echarts3DOptions : echarts2DOptions;
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "scatter",
+        series: [],
+        title,
+        width,
+        height,
+        loading,
+        className,
+        echartsOptions,
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const Scatter3DChart = memo(forwardRef(
+  function Scatter3DChart2({
+    data = [],
+    title,
+    width = "100%",
+    height = 500,
+    showGrid = true,
+    xAxisLabel = "X",
+    yAxisLabel = "Y",
+    zAxisLabel = "Z",
+    autoRotate = false,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const glReady = useEchartsGlReady();
+    const tooltipStyle = useChartTooltipStyle();
+    const legendStyle = useChartLegendStyle();
+    const echartsOptions = useMemo(() => {
+      const seriesArray = data.map((series, idx) => ({
+        type: "scatter3D",
+        name: series.name,
+        data: series.data.map((p) => ({
+          name: p.label || series.name,
+          value: [p.x, p.y, p.z],
+          itemStyle: p.color ? { color: p.color } : void 0,
+          meta: p.meta
+        })),
+        symbolSize: typeof series.symbolSize === "number" ? series.symbolSize : 12,
+        itemStyle: {
+          color: series.color || ASTRO_DATA_VIZ_COLORS.mixed[idx % ASTRO_DATA_VIZ_COLORS.mixed.length]
+        },
+        label: {
+          show: false
+        },
+        emphasis: {
+          itemStyle: { opacity: 1 },
+          label: { show: true, formatter: (params) => {
+            var _a;
+            return ((_a = params.data) == null ? void 0 : _a.name) || "";
+          } }
+        }
+      }));
+      return {
+        tooltip: {
+          show: true,
+          ...tooltipStyle,
+          formatter: (params) => {
+            const d = params.data || {};
+            const [x, y, z] = d.value || [0, 0, 0];
+            let html = `<div style="font-weight:600;font-size:13px;margin-bottom:4px">${d.name || params.seriesName}</div>`;
+            html += `<div>${xAxisLabel}: <span style="font-family:monospace">${x.toFixed(2)}</span></div>`;
+            html += `<div>${yAxisLabel}: <span style="font-family:monospace">${y.toFixed(2)}</span></div>`;
+            html += `<div>${zAxisLabel}: <span style="font-family:monospace">${z.toFixed(2)}</span></div>`;
+            return html;
+          }
+        },
+        legend: {
+          show: data.length > 1,
+          top: 10,
+          ...legendStyle
+        },
+        grid3D: {
+          boxWidth: 100,
+          boxHeight: 100,
+          boxDepth: 100,
+          viewControl: {
+            autoRotate,
+            autoRotateSpeed: 5,
+            distance: 200,
+            alpha: 25,
+            beta: 45,
+            rotateSensitivity: 2,
+            zoomSensitivity: 1.5
+          },
+          light: {
+            main: { intensity: 1.2, shadow: false },
+            ambient: { intensity: 0.4 }
+          },
+          postEffect: {
+            enable: true,
+            bloom: { enable: true, intensity: 0.05 }
+          }
+        },
+        xAxis3D: {
+          type: "value",
+          name: xAxisLabel,
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" },
+          axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.4)" } },
+          axisLabel: { color: "rgba(255, 255, 255, 0.4)" },
+          splitLine: { show: showGrid, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } }
+        },
+        yAxis3D: {
+          type: "value",
+          name: yAxisLabel,
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" },
+          axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.4)" } },
+          axisLabel: { color: "rgba(255, 255, 255, 0.4)" },
+          splitLine: { show: showGrid, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } }
+        },
+        zAxis3D: {
+          type: "value",
+          name: zAxisLabel,
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" },
+          axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.4)" } },
+          axisLabel: { color: "rgba(255, 255, 255, 0.4)" },
+          splitLine: { show: showGrid, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } }
+        },
+        series: seriesArray
+      };
+    }, [data, showGrid, xAxisLabel, yAxisLabel, zAxisLabel, autoRotate, tooltipStyle, legendStyle]);
+    if (!glReady) return /* @__PURE__ */ jsx(AstroChart, { ref, type: "scatter", series: [], title, width, height, loading: true, className });
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "scatter",
+        series: [],
+        title,
+        width,
+        height,
+        loading,
+        className,
+        echartsOptions,
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const Bar3DChart = memo(forwardRef(
+  function Bar3DChart2({
+    data = [],
+    title,
+    width = "100%",
+    height = 500,
+    xCategories = [],
+    yCategories = [],
+    xAxisLabel = "X",
+    yAxisLabel = "Y",
+    zAxisLabel = "Value",
+    shading = "lambert",
+    autoRotate = false,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const glReady = useEchartsGlReady();
+    const tooltipStyle = useChartTooltipStyle();
+    const visualMapStyle = useChartVisualMapStyle();
+    const { tokens } = useTheme();
+    const labelPrimary = tokens.colors.text.primary;
+    const labelSecondary = tokens.colors.text.secondary;
+    const labelTertiary = tokens.colors.text.tertiary;
+    const derivedXCategories = xCategories || [...new Set(data.map((d) => String(d.x)))];
+    const derivedYCategories = yCategories || [...new Set(data.map((d) => String(d.y)))];
+    const echartsOptions = useMemo(() => {
+      const seriesData = data.map((d) => {
+        const xIdx = derivedXCategories.indexOf(String(d.x));
+        const yIdx = derivedYCategories.indexOf(String(d.y));
+        return {
+          value: [xIdx, yIdx, d.z],
+          name: d.label || `${d.x} - ${d.y}`,
+          itemStyle: d.color ? { color: d.color } : void 0
+        };
+      });
+      const maxZ = Math.max(...data.map((d) => d.z), 1);
+      return {
+        tooltip: {
+          show: true,
+          ...tooltipStyle,
+          formatter: (params) => {
+            const d = params.data || {};
+            const [xIdx, yIdx, z] = d.value || [0, 0, 0];
+            const xLabel = derivedXCategories[xIdx] || xIdx;
+            const yLabel = derivedYCategories[yIdx] || yIdx;
+            let html = `<div style="font-weight:600;font-size:13px;margin-bottom:4px">${d.name || ""}</div>`;
+            html += `<div>${xAxisLabel}: ${xLabel}</div>`;
+            html += `<div>${yAxisLabel}: ${yLabel}</div>`;
+            html += `<div style="color:#3E3CFF">${zAxisLabel}: <span style="font-family:monospace">${z.toFixed(2)}</span></div>`;
+            return html;
+          }
+        },
+        visualMap: {
+          show: true,
+          min: 0,
+          max: maxZ,
+          inRange: {
+            color: ["#3E3CFF", "#9D70FF", "#22d3ee", "#56f000"]
+          },
+          ...visualMapStyle,
+          right: 10,
+          top: "center"
+        },
+        grid3D: {
+          boxWidth: 100,
+          boxHeight: 80,
+          boxDepth: 100,
+          viewControl: {
+            autoRotate,
+            autoRotateSpeed: 3,
+            distance: 250,
+            alpha: 25,
+            beta: 45,
+            rotateSensitivity: 2,
+            zoomSensitivity: 1.5
+          },
+          light: {
+            main: { intensity: 1.1, shadow: true, shadowQuality: "medium" },
+            ambient: { intensity: 0.4 }
+          }
+        },
+        xAxis3D: {
+          type: "category",
+          name: xAxisLabel,
+          data: derivedXCategories,
+          nameTextStyle: { color: labelSecondary },
+          axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.4)" } },
+          axisLabel: { color: labelSecondary, fontSize: 10 }
+        },
+        yAxis3D: {
+          type: "category",
+          name: yAxisLabel,
+          data: derivedYCategories,
+          nameTextStyle: { color: labelSecondary },
+          axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.4)" } },
+          axisLabel: { color: labelSecondary, fontSize: 10 }
+        },
+        zAxis3D: {
+          type: "value",
+          name: zAxisLabel,
+          nameTextStyle: { color: labelSecondary },
+          axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.4)" } },
+          axisLabel: { color: labelTertiary }
+        },
+        series: [{
+          type: "bar3D",
+          data: seriesData,
+          shading,
+          barSize: 15,
+          bevelSize: 0.1,
+          label: {
+            show: false
+          },
+          emphasis: {
+            label: {
+              show: true,
+              formatter: (params) => {
+                var _a;
+                return ((_a = params.data) == null ? void 0 : _a.name) || "";
+              },
+              textStyle: { color: labelPrimary, fontSize: 11 }
+            }
+          }
+        }]
+      };
+    }, [data, derivedXCategories, derivedYCategories, xAxisLabel, yAxisLabel, zAxisLabel, shading, autoRotate, tooltipStyle, visualMapStyle, labelPrimary, labelSecondary, labelTertiary]);
+    if (!glReady) return /* @__PURE__ */ jsx(AstroChart, { ref, type: "bar", series: [], title, width, height, loading: true, className });
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "bar",
+        series: [],
+        title,
+        width,
+        height,
+        loading,
+        className,
+        echartsOptions,
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const Surface3DChart = memo(forwardRef(
+  function Surface3DChart2({
+    data = { data: [] },
+    title,
+    width = "100%",
+    height = 500,
+    xAxisLabel = "X",
+    yAxisLabel = "Y",
+    zAxisLabel = "Z",
+    shading = "realistic",
+    autoRotate = false,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const glReady = useEchartsGlReady();
+    const tooltipStyle = useChartTooltipStyle();
+    const visualMapStyle = useChartVisualMapStyle();
+    const echartsOptions = useMemo(() => {
+      var _a;
+      const surfaceData = [];
+      const rows = data.data.length;
+      const cols = rows > 0 ? data.data[0].length : 0;
+      for (let i = 0; i < rows; i++) {
+        for (let j = 0; j < cols; j++) {
+          const x = data.xRange ? data.xRange[0] + (data.xRange[1] - data.xRange[0]) * (i / (rows - 1 || 1)) : i;
+          const y = data.yRange ? data.yRange[0] + (data.yRange[1] - data.yRange[0]) * (j / (cols - 1 || 1)) : j;
+          surfaceData.push([x, y, data.data[i][j]]);
+        }
+      }
+      const allZ = data.data.flat();
+      const minZ = Math.min(...allZ);
+      const maxZ = Math.max(...allZ);
+      const colorRange = data.colorMap === "thermal" ? ["#0d0887", "#6a00a8", "#b12a90", "#e16462", "#fca636", "#f0f921"] : data.colorMap === "viridis" ? ["#440154", "#414487", "#2a788e", "#22a884", "#7ad151", "#fde725"] : ((_a = data.colorStops) == null ? void 0 : _a.map((s) => s.color)) || ["#1B2DA0", "#3E3CFF", "#9D70FF", "#22d3ee", "#56f000"];
+      return {
+        tooltip: {
+          show: true,
+          ...tooltipStyle
+        },
+        visualMap: {
+          show: true,
+          min: minZ,
+          max: maxZ,
+          inRange: { color: colorRange },
+          ...visualMapStyle,
+          right: 10,
+          top: "center"
+        },
+        grid3D: {
+          boxWidth: 100,
+          boxHeight: 60,
+          boxDepth: 100,
+          viewControl: {
+            autoRotate,
+            autoRotateSpeed: 3,
+            distance: 220,
+            alpha: 30,
+            beta: 45,
+            rotateSensitivity: 2,
+            zoomSensitivity: 1.5
+          },
+          light: {
+            main: { intensity: 1.2, shadow: true, shadowQuality: "medium" },
+            ambient: { intensity: 0.5 }
+          },
+          postEffect: {
+            enable: true,
+            SSAO: { enable: true, radius: 2 }
+          }
+        },
+        xAxis3D: {
+          type: "value",
+          name: xAxisLabel,
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" },
+          axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.4)" } },
+          axisLabel: { color: "rgba(255, 255, 255, 0.4)" }
+        },
+        yAxis3D: {
+          type: "value",
+          name: yAxisLabel,
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" },
+          axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.4)" } },
+          axisLabel: { color: "rgba(255, 255, 255, 0.4)" }
+        },
+        zAxis3D: {
+          type: "value",
+          name: zAxisLabel,
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" },
+          axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.4)" } },
+          axisLabel: { color: "rgba(255, 255, 255, 0.4)" }
+        },
+        series: [{
+          type: "surface",
+          data: surfaceData,
+          shading,
+          wireframe: data.wireframe ? {
+            show: true,
+            lineStyle: { color: "rgba(255, 255, 255, 0.2)", width: 0.5 }
+          } : { show: false }
+        }]
+      };
+    }, [data, xAxisLabel, yAxisLabel, zAxisLabel, shading, autoRotate, tooltipStyle, visualMapStyle]);
+    if (!glReady) return /* @__PURE__ */ jsx(AstroChart, { ref, type: "scatter", series: [], title, width, height, loading: true, className });
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "scatter",
+        series: [],
+        title,
+        width,
+        height,
+        loading,
+        className,
+        echartsOptions,
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const Lines3DChart = memo(forwardRef(
+  function Lines3DChart2({
+    data = [],
+    title,
+    width = "100%",
+    height = 500,
+    showGrid = true,
+    xAxisLabel = "X",
+    yAxisLabel = "Y",
+    zAxisLabel = "Z",
+    showFlowEffect = false,
+    autoRotate = false,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const { tokens, mode } = useTheme();
+    const tooltipStyle = useChartTooltipStyle();
+    const legendStyle = useChartLegendStyle();
+    tokens.colors.text.primary;
+    tokens.colors.text.secondary;
+    tokens.colors.text.tertiary;
+    const echartsOptions = useMemo(() => {
+      const seriesArray = [];
+      data.forEach((line, idx) => {
+        const lineColor = line.color || ASTRO_DATA_VIZ_COLORS.mixed[idx % ASTRO_DATA_VIZ_COLORS.mixed.length];
+        seriesArray.push({
+          type: "line3D",
+          name: line.name,
+          coordinateSystem: "cartesian3D",
+          data: line.path.map((p) => [p.x, p.y, p.z]),
+          lineStyle: {
+            color: lineColor,
+            width: line.lineWidth || 2,
+            type: line.lineStyle || "solid",
+            opacity: 0.8
+          }
+        });
+        if (line.showEndpoints) {
+          seriesArray.push({
+            type: "scatter3D",
+            name: `${line.name} Points`,
+            coordinateSystem: "cartesian3D",
+            data: [
+              { value: [line.path[0].x, line.path[0].y, line.path[0].z], name: "Start" },
+              { value: [line.path[line.path.length - 1].x, line.path[line.path.length - 1].y, line.path[line.path.length - 1].z], name: "End" }
+            ],
+            symbolSize: 8,
+            itemStyle: { color: lineColor }
+          });
+        }
+      });
+      return {
+        tooltip: {
+          show: true,
+          ...tooltipStyle,
+          formatter: (params) => {
+            const d = params.data || {};
+            if (params.seriesType === "line3D") {
+              return `<div style="font-weight:600">${params.seriesName}</div>`;
+            }
+            const [x, y, z] = d.value || [0, 0, 0];
+            return `<div style="font-weight:600">${d.name || params.seriesName}</div>
+              <div>${xAxisLabel}: ${x.toFixed(2)}</div>
+              <div>${yAxisLabel}: ${y.toFixed(2)}</div>
+              <div>${zAxisLabel}: ${z.toFixed(2)}</div>`;
+          }
+        },
+        legend: {
+          show: data.length > 1,
+          top: 10,
+          ...legendStyle
+        },
+        grid3D: {
+          boxWidth: 100,
+          boxHeight: 100,
+          boxDepth: 100,
+          viewControl: {
+            autoRotate,
+            autoRotateSpeed: 3,
+            distance: 200,
+            alpha: 25,
+            beta: 45,
+            rotateSensitivity: 2,
+            zoomSensitivity: 1.5
+          },
+          light: {
+            main: { intensity: 1.2, shadow: false },
+            ambient: { intensity: 0.4 }
+          },
+          postEffect: {
+            enable: true,
+            bloom: { enable: showFlowEffect, intensity: 0.1 }
+          }
+        },
+        xAxis3D: {
+          type: "value",
+          name: xAxisLabel,
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" },
+          axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.4)" } },
+          axisLabel: { color: "rgba(255, 255, 255, 0.4)" },
+          splitLine: { show: showGrid, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } }
+        },
+        yAxis3D: {
+          type: "value",
+          name: yAxisLabel,
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" },
+          axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.4)" } },
+          axisLabel: { color: "rgba(255, 255, 255, 0.4)" },
+          splitLine: { show: showGrid, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } }
+        },
+        zAxis3D: {
+          type: "value",
+          name: zAxisLabel,
+          nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" },
+          axisLine: { lineStyle: { color: "rgba(100, 116, 139, 0.4)" } },
+          axisLabel: { color: "rgba(255, 255, 255, 0.4)" },
+          splitLine: { show: showGrid, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } }
+        },
+        series: seriesArray
+      };
+    }, [data, showGrid, xAxisLabel, yAxisLabel, zAxisLabel, showFlowEffect, autoRotate, tooltipStyle, legendStyle]);
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "scatter",
+        series: [],
+        title,
+        width,
+        height,
+        loading,
+        className,
+        echartsOptions,
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const SphericalRadar3DChart = memo(forwardRef(
+  function SphericalRadar3DChart2({
+    data = [],
+    title,
+    width = "100%",
+    height = 500,
+    maxRange = 1e3,
+    showRangeRings = true,
+    autoRotate = false,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const glReady = useEchartsGlReady();
+    const tooltipStyle = useChartTooltipStyle();
+    useChartLegendStyle();
+    const categoryColors = {
+      satellite: "#56f000",
+      debris: "#ff3838",
+      unknown: "#fce83a",
+      friendly: "#3E3CFF",
+      hostile: "#ff3838"
+    };
+    const echartsOptions = useMemo(() => {
+      const scatterData = data.map((obj) => {
+        const azRad = obj.azimuth * Math.PI / 180;
+        const elRad = obj.elevation * Math.PI / 180;
+        const r = obj.range / maxRange * 100;
+        return {
+          name: obj.name,
+          value: [
+            r * Math.cos(elRad) * Math.sin(azRad),
+            r * Math.sin(elRad),
+            r * Math.cos(elRad) * Math.cos(azRad)
+          ],
+          itemStyle: { color: obj.color || categoryColors[obj.category || "unknown"] },
+          symbolSize: obj.size || 12,
+          category: obj.category,
+          azimuth: obj.azimuth,
+          elevation: obj.elevation,
+          range: obj.range
+        };
+      });
+      const rangeRings = [];
+      if (showRangeRings) {
+        [0.25, 0.5, 0.75, 1].forEach((fraction) => {
+          const r = fraction * 100;
+          const ringPoints = Array.from({ length: 73 }, (_, i) => {
+            const angle = i / 72 * Math.PI * 2;
+            return [r * Math.sin(angle), 0, r * Math.cos(angle)];
+          });
+          rangeRings.push({
+            type: "line3D",
+            coordinateSystem: "cartesian3D",
+            data: ringPoints,
+            lineStyle: { color: "rgba(100, 116, 139, 0.3)", width: 1 },
+            silent: true
+          });
+        });
+      }
+      return {
+        tooltip: {
+          show: true,
+          ...tooltipStyle,
+          formatter: (params) => {
+            var _a, _b, _c;
+            const d = params.data || {};
+            let html = `<div style="font-weight:600;font-size:13px;margin-bottom:4px">${d.name}</div>`;
+            html += `<div style="color:rgba(255,255,255,0.5);text-transform:uppercase;font-size:10px;margin-bottom:6px">${d.category || "Unknown"}</div>`;
+            html += `<div>Azimuth: <span style="font-family:monospace">${(_a = d.azimuth) == null ? void 0 : _a.toFixed(1)}°</span></div>`;
+            html += `<div>Elevation: <span style="font-family:monospace">${(_b = d.elevation) == null ? void 0 : _b.toFixed(1)}°</span></div>`;
+            html += `<div style="color:#22d3ee">Range: <span style="font-family:monospace">${(_c = d.range) == null ? void 0 : _c.toFixed(1)} km</span></div>`;
+            return html;
+          }
+        },
+        grid3D: {
+          boxWidth: 100,
+          boxHeight: 50,
+          boxDepth: 100,
+          viewControl: {
+            autoRotate,
+            autoRotateSpeed: 2,
+            distance: 250,
+            alpha: 25,
+            beta: 45,
+            rotateSensitivity: 2,
+            zoomSensitivity: 1.5
+          },
+          light: {
+            main: { intensity: 1.2, shadow: false },
+            ambient: { intensity: 0.5 }
+          },
+          postEffect: { enable: true, bloom: { enable: true, intensity: 0.05 } }
+        },
+        xAxis3D: { type: "value", name: "East", min: -100, max: 100, axisLabel: { show: false }, splitLine: { show: false } },
+        yAxis3D: { type: "value", name: "Up", min: -50, max: 100, axisLabel: { show: false }, splitLine: { show: false } },
+        zAxis3D: { type: "value", name: "North", min: -100, max: 100, axisLabel: { show: false }, splitLine: { show: false } },
+        series: [...rangeRings, { type: "scatter3D", coordinateSystem: "cartesian3D", data: scatterData, symbolSize: 12 }]
+      };
+    }, [data, maxRange, showRangeRings, autoRotate, categoryColors, tooltipStyle]);
+    if (!glReady) return /* @__PURE__ */ jsx(AstroChart, { ref, type: "scatter", series: [], title, width, height, loading: true, className });
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "scatter",
+        series: [],
+        title,
+        width,
+        height,
+        loading,
+        className,
+        echartsOptions,
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const TransferOrbit3DChart = memo(forwardRef(
+  function TransferOrbit3DChart2({
+    segments = [],
+    waypoints = [],
+    referenceOrbits = [],
+    title,
+    width = "100%",
+    height = 550,
+    showDeltaV = true,
+    autoRotate = false,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const glReady = useEchartsGlReady();
+    const tooltipStyle = useChartTooltipStyle();
+    const legendStyle = useChartLegendStyle();
+    const { tokens, mode } = useTheme();
+    const labelPrimary = tokens.colors.text.primary;
+    const labelSecondary = tokens.colors.text.secondary;
+    const labelTertiary = tokens.colors.text.tertiary;
+    const labelBg = mode === "dark" ? "rgba(15, 23, 42, 0.72)" : "rgba(255, 255, 255, 0.9)";
+    const segmentColors = { coast: "#9D70FF", burn: "#ff3838", "gravity-assist": "#22d3ee", spiral: "#56f000" };
+    const waypointColors = { departure: "#3E3CFF", arrival: "#56f000", flyby: "#22d3ee", node: "#fce83a", burn: "#ff3838" };
+    const echartsOptions = useMemo(() => {
+      const seriesArray = [];
+      referenceOrbits.forEach((orbit) => {
+        seriesArray.push({
+          type: "line3D",
+          name: orbit.name,
+          coordinateSystem: "cartesian3D",
+          data: orbit.path.map((p) => [p.x, p.y, p.z]),
+          lineStyle: { color: orbit.color || "rgba(100, 116, 139, 0.3)", width: 1, type: "dashed" },
+          silent: true
+        });
+      });
+      segments.forEach((segment, idx) => {
+        const color = segment.color || segmentColors[segment.type] || ASTRO_DATA_VIZ_COLORS.mixed[idx % ASTRO_DATA_VIZ_COLORS.mixed.length];
+        seriesArray.push({
+          type: "line3D",
+          name: segment.name,
+          coordinateSystem: "cartesian3D",
+          data: segment.path.map((p) => [p.x, p.y, p.z]),
+          lineStyle: { color, width: segment.type === "burn" ? 4 : 2 }
+        });
+      });
+      if (waypoints.length > 0) {
+        seriesArray.push({
+          type: "scatter3D",
+          name: "Waypoints",
+          coordinateSystem: "cartesian3D",
+          data: waypoints.map((wp) => ({
+            name: wp.name,
+            value: [wp.position.x, wp.position.y, wp.position.z],
+            itemStyle: { color: waypointColors[wp.type] || "#fff" },
+            symbolSize: wp.type === "burn" ? 14 : 18,
+            deltaV: wp.deltaV,
+            tof: wp.tof,
+            waypointType: wp.type
+          })),
+          label: { show: true, formatter: (p) => {
+            var _a;
+            return (_a = p.data) == null ? void 0 : _a.name;
+          }, textStyle: { color: labelPrimary, fontSize: 11, backgroundColor: labelBg, padding: [2, 4] } }
+        });
+      }
+      const totalDeltaV = segments.reduce((sum, s) => sum + (s.deltaV || 0), 0) + waypoints.reduce((sum, w) => sum + (w.deltaV || 0), 0);
+      return {
+        tooltip: {
+          show: true,
+          ...tooltipStyle,
+          formatter: (params) => {
+            const d = params.data || {};
+            if (params.seriesType === "line3D") {
+              const seg = segments.find((s) => s.name === params.seriesName);
+              return `<div style="font-weight:600">${params.seriesName}</div>${(seg == null ? void 0 : seg.deltaV) ? `<div style="color:#ff3838">ΔV: ${seg.deltaV.toFixed(2)} km/s</div>` : ""}`;
+            }
+            return `<div style="font-weight:600;margin-bottom:4px">${d.name}</div>${d.deltaV ? `<div style="color:#ff3838">ΔV: ${d.deltaV.toFixed(2)} km/s</div>` : ""}${d.tof ? `<div>TOF: ${d.tof.toFixed(0)} days</div>` : ""}`;
+          }
+        },
+        legend: { show: true, top: 10, ...legendStyle },
+        graphic: showDeltaV && totalDeltaV > 0 ? [{ type: "text", right: 20, top: 20, style: { text: `Total ΔV: ${totalDeltaV.toFixed(2)} km/s`, fill: "#ff3838", fontSize: 14, fontWeight: "bold" } }] : void 0,
+        grid3D: { boxWidth: 150, boxHeight: 80, boxDepth: 150, viewControl: { autoRotate, autoRotateSpeed: 2, distance: 280, alpha: 20, beta: 40 }, light: { main: { intensity: 1.2 }, ambient: { intensity: 0.4 } }, postEffect: { enable: true, bloom: { enable: true, intensity: 0.08 } } },
+        xAxis3D: { type: "value", name: "X (AU)", nameTextStyle: { color: labelSecondary }, axisLabel: { color: labelTertiary, formatter: (v) => v.toFixed(1) }, splitLine: { show: true, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } } },
+        yAxis3D: { type: "value", name: "Z (AU)", nameTextStyle: { color: labelSecondary }, axisLabel: { color: labelTertiary, formatter: (v) => v.toFixed(1) }, splitLine: { show: true, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } } },
+        zAxis3D: { type: "value", name: "Y (AU)", nameTextStyle: { color: labelSecondary }, axisLabel: { color: labelTertiary, formatter: (v) => v.toFixed(1) }, splitLine: { show: true, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } } },
+        series: seriesArray
+      };
+    }, [segments, waypoints, referenceOrbits, showDeltaV, autoRotate, segmentColors, waypointColors, tooltipStyle, legendStyle, labelPrimary, labelSecondary, labelTertiary, labelBg]);
+    if (!glReady) return /* @__PURE__ */ jsx(AstroChart, { ref, type: "scatter", series: [], title, width, height, loading: true, className });
+    return /* @__PURE__ */ jsx(AstroChart, { ref, type: "scatter", series: [], title, width, height, loading, className, echartsOptions, export: exportOptions, infoTooltip });
+  }
+));
+const AttitudeHistory3DChart = memo(forwardRef(
+  function AttitudeHistory3DChart2({
+    data = [],
+    title,
+    width = "100%",
+    height = 500,
+    mode = "euler",
+    showModeTransitions = true,
+    autoRotate = false,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const glReady = useEchartsGlReady();
+    const tooltipStyle = useChartTooltipStyle();
+    const legendStyle = useChartLegendStyle();
+    const echartsOptions = useMemo(() => {
+      const seriesArray = [];
+      if (mode === "euler" && data.length > 0) {
+        const pathData = data.filter((d) => d.euler).map((d) => [d.euler.roll, d.euler.pitch, d.euler.yaw]);
+        seriesArray.push({ type: "line3D", name: "Attitude Path", coordinateSystem: "cartesian3D", data: pathData, lineStyle: { color: "#3E3CFF", width: 2 } });
+        if (pathData.length > 0) {
+          seriesArray.push({ type: "scatter3D", name: "Start/End", coordinateSystem: "cartesian3D", data: [
+            { value: pathData[0], name: "Start", itemStyle: { color: "#56f000" } },
+            { value: pathData[pathData.length - 1], name: "End", itemStyle: { color: "#ff3838" } }
+          ], symbolSize: 14 });
+        }
+        if (showModeTransitions) {
+          const transitions = data.filter((d, i) => i > 0 && d.mode !== data[i - 1].mode && d.euler);
+          if (transitions.length > 0) {
+            seriesArray.push({ type: "scatter3D", name: "Mode Changes", coordinateSystem: "cartesian3D", data: transitions.map((d) => ({ value: [d.euler.roll, d.euler.pitch, d.euler.yaw], name: d.mode, itemStyle: { color: "#fce83a" } })), symbolSize: 10, symbol: "diamond" });
+          }
+        }
+      }
+      return {
+        tooltip: {
+          show: true,
+          ...tooltipStyle,
+          formatter: (params) => {
+            const d = params.data || {};
+            const [roll, pitch, yaw] = d.value || [0, 0, 0];
+            return `<div style="font-weight:600;margin-bottom:4px">${d.name || params.seriesName}</div><div>Roll: ${roll.toFixed(2)}°</div><div>Pitch: ${pitch.toFixed(2)}°</div><div>Yaw: ${yaw.toFixed(2)}°</div>`;
+          }
+        },
+        legend: { show: true, top: 10, ...legendStyle },
+        grid3D: { boxWidth: 100, boxHeight: 100, boxDepth: 100, viewControl: { autoRotate, distance: 220, alpha: 25, beta: 45 }, light: { main: { intensity: 1.2 }, ambient: { intensity: 0.4 } } },
+        xAxis3D: { type: "value", name: "Roll (°)", nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" }, axisLabel: { color: "rgba(255, 255, 255, 0.4)" }, splitLine: { show: true, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } } },
+        yAxis3D: { type: "value", name: "Pitch (°)", nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" }, axisLabel: { color: "rgba(255, 255, 255, 0.4)" }, splitLine: { show: true, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } } },
+        zAxis3D: { type: "value", name: "Yaw (°)", nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" }, axisLabel: { color: "rgba(255, 255, 255, 0.4)" }, splitLine: { show: true, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } } },
+        series: seriesArray
+      };
+    }, [data, mode, showModeTransitions, autoRotate, tooltipStyle, legendStyle]);
+    if (!glReady) return /* @__PURE__ */ jsx(AstroChart, { ref, type: "scatter", series: [], title, width, height, loading: true, className });
+    return /* @__PURE__ */ jsx(AstroChart, { ref, type: "scatter", series: [], title, width, height, loading, className, echartsOptions, export: exportOptions, infoTooltip });
+  }
+));
+const ConjunctionAssessment3DChart = memo(forwardRef(
+  function ConjunctionAssessment3DChart2({
+    events = [],
+    primaryOrbit = [],
+    title,
+    width = "100%",
+    height = 550,
+    showUncertainty = true,
+    warningThreshold = 5,
+    criticalThreshold = 1,
+    autoRotate = false,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const glReady = useEchartsGlReady();
+    const tooltipStyle = useChartTooltipStyle();
+    const legendStyle = useChartLegendStyle();
+    const { tokens, mode } = useTheme();
+    tokens.colors.text.primary;
+    tokens.colors.text.secondary;
+    tokens.colors.text.tertiary;
+    const echartsOptions = useMemo(() => {
+      const seriesArray = [];
+      if (primaryOrbit && primaryOrbit.length > 0) {
+        seriesArray.push({ type: "line3D", name: "Primary Orbit", coordinateSystem: "cartesian3D", data: primaryOrbit.map((p) => [p.x, p.y, p.z]), lineStyle: { color: "#3E3CFF", width: 2 } });
+      }
+      const eventData = events.map((evt) => {
+        const color = evt.missDistance < criticalThreshold ? "#ff3838" : evt.missDistance < warningThreshold ? "#fce83a" : "#56f000";
+        return { name: `${evt.primary} × ${evt.secondary}`, value: [evt.position.x, evt.position.y, evt.position.z], itemStyle: { color }, symbolSize: Math.max(8, Math.min(24, 30 - evt.missDistance * 3)), ...evt };
+      });
+      seriesArray.push({ type: "scatter3D", name: "Conjunctions", coordinateSystem: "cartesian3D", data: eventData, symbol: "circle", emphasis: { itemStyle: { borderColor: "#fff", borderWidth: 2 } } });
+      if (showUncertainty) {
+        events.filter((e) => e.uncertainty).forEach((evt) => {
+          const { x, y, z } = evt.position;
+          const { rx, ry, rz } = evt.uncertainty;
+          seriesArray.push({ type: "line3D", coordinateSystem: "cartesian3D", data: [[x - rx, y, z], [x + rx, y, z]], lineStyle: { color: "rgba(255, 255, 255, 0.3)", width: 1 }, silent: true });
+          seriesArray.push({ type: "line3D", coordinateSystem: "cartesian3D", data: [[x, y - ry, z], [x, y + ry, z]], lineStyle: { color: "rgba(255, 255, 255, 0.3)", width: 1 }, silent: true });
+          seriesArray.push({ type: "line3D", coordinateSystem: "cartesian3D", data: [[x, y, z - rz], [x, y, z + rz]], lineStyle: { color: "rgba(255, 255, 255, 0.3)", width: 1 }, silent: true });
+        });
+      }
+      return {
+        tooltip: {
+          show: true,
+          ...tooltipStyle,
+          formatter: (params) => {
+            var _a;
+            const d = params.data || {};
+            if (params.seriesType === "line3D") return "";
+            const mdColor = d.missDistance < criticalThreshold ? "#ff3838" : d.missDistance < warningThreshold ? "#fce83a" : "#56f000";
+            return `<div style="font-weight:600;margin-bottom:4px">${d.name}</div><div style="color:${mdColor}">Miss Distance: ${(_a = d.missDistance) == null ? void 0 : _a.toFixed(3)} km</div>${d.probability !== void 0 ? `<div>Probability: ${(d.probability * 100).toExponential(2)}%</div>` : ""}${d.relativeVelocity ? `<div>Rel. Velocity: ${d.relativeVelocity.toFixed(2)} km/s</div>` : ""}`;
+          }
+        },
+        legend: { show: true, top: 10, ...legendStyle },
+        grid3D: { boxWidth: 100, boxHeight: 100, boxDepth: 100, viewControl: { autoRotate, distance: 220, alpha: 25, beta: 45 }, light: { main: { intensity: 1.2 }, ambient: { intensity: 0.4 } }, postEffect: { enable: true, bloom: { enable: true, intensity: 0.05 } } },
+        xAxis3D: { type: "value", name: "X (km)", nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" }, axisLabel: { color: "rgba(255, 255, 255, 0.4)" }, splitLine: { show: true, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } } },
+        yAxis3D: { type: "value", name: "Y (km)", nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" }, axisLabel: { color: "rgba(255, 255, 255, 0.4)" }, splitLine: { show: true, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } } },
+        zAxis3D: { type: "value", name: "Z (km)", nameTextStyle: { color: "rgba(255, 255, 255, 0.5)" }, axisLabel: { color: "rgba(255, 255, 255, 0.4)" }, splitLine: { show: true, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } } },
+        series: seriesArray
+      };
+    }, [events, primaryOrbit, showUncertainty, warningThreshold, criticalThreshold, autoRotate, tooltipStyle, legendStyle]);
+    if (!glReady) return /* @__PURE__ */ jsx(AstroChart, { ref, type: "scatter", series: [], title, width, height, loading: true, className });
+    return /* @__PURE__ */ jsx(AstroChart, { ref, type: "scatter", series: [], title, width, height, loading, className, echartsOptions, export: exportOptions, infoTooltip });
+  }
+));
+const LaunchCorridor3DChart = memo(forwardRef(
+  function LaunchCorridor3DChart2({
+    data = { corridors: [] },
+    title,
+    width = "100%",
+    height = 550,
+    showTrajectory = true,
+    autoRotate = false,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const glReady = useEchartsGlReady();
+    const { tokens, mode } = useTheme();
+    const tooltipStyle = useChartTooltipStyle();
+    const labelPrimary = tokens.colors.text.primary;
+    const labelSecondary = tokens.colors.text.secondary;
+    const labelTertiary = tokens.colors.text.tertiary;
+    const labelBg = mode === "dark" ? "rgba(15, 23, 42, 0.72)" : "rgba(255, 255, 255, 0.9)";
+    const legendStyle = useChartLegendStyle();
+    const corridorColors = { nominal: "rgba(86, 240, 0, 0.4)", abort: "rgba(255, 179, 2, 0.4)", safety: "rgba(34, 211, 238, 0.4)", exclusion: "rgba(255, 56, 56, 0.4)" };
+    const echartsOptions = useMemo(() => {
+      const seriesArray = [];
+      const latLonTo3D = (lat, lon, alt) => [lon, alt * 0.1, lat];
+      data.corridors.forEach((corridor) => {
+        const color = corridor.color || corridorColors[corridor.type] || "rgba(100, 116, 139, 0.4)";
+        const lowerPath = corridor.groundFootprint.map((p) => latLonTo3D(p.lat, p.lon, corridor.altitudeRange[0]));
+        if (lowerPath.length > 0) lowerPath.push(lowerPath[0]);
+        seriesArray.push({ type: "line3D", name: `${corridor.name} (floor)`, coordinateSystem: "cartesian3D", data: lowerPath, lineStyle: { color, width: 2 } });
+        const upperPath = corridor.groundFootprint.map((p) => latLonTo3D(p.lat, p.lon, corridor.altitudeRange[1]));
+        if (upperPath.length > 0) upperPath.push(upperPath[0]);
+        seriesArray.push({ type: "line3D", name: `${corridor.name} (ceiling)`, coordinateSystem: "cartesian3D", data: upperPath, lineStyle: { color, width: 2, type: "dashed" } });
+      });
+      if (showTrajectory && data.trajectory && data.trajectory.length > 0) {
+        seriesArray.push({ type: "line3D", name: "Trajectory", coordinateSystem: "cartesian3D", data: data.trajectory.map((p) => latLonTo3D(p.lat, p.lon, p.altitude)), lineStyle: { color: "#fff", width: 3 } });
+      }
+      if (data.events && data.events.length > 0) {
+        seriesArray.push({ type: "scatter3D", name: "Events", coordinateSystem: "cartesian3D", data: data.events.map((e) => ({ name: e.name, value: latLonTo3D(e.lat, e.lon, e.altitude), itemStyle: { color: "#fce83a" }, altitude: e.altitude, time: e.time })), symbolSize: 12, symbol: "diamond", label: { show: true, formatter: (p) => {
+          var _a;
+          return (_a = p.data) == null ? void 0 : _a.name;
+        }, textStyle: { color: labelPrimary, fontSize: 10, backgroundColor: labelBg, padding: [2, 4] } } });
+      }
+      return {
+        tooltip: {
+          show: true,
+          ...tooltipStyle,
+          formatter: (params) => {
+            const d = params.data || {};
+            if (params.seriesType === "line3D") return `<div style="font-weight:600">${params.seriesName}</div>`;
+            return `<div style="font-weight:600;margin-bottom:4px">${d.name}</div>${d.altitude ? `<div>Altitude: ${d.altitude.toFixed(1)} km</div>` : ""}${d.time ? `<div>T+: ${d.time.toFixed(0)}s</div>` : ""}`;
+          }
+        },
+        legend: { show: true, top: 10, ...legendStyle },
+        grid3D: { boxWidth: 150, boxHeight: 60, boxDepth: 100, viewControl: { autoRotate, distance: 280, alpha: 30, beta: 30 }, light: { main: { intensity: 1.2 }, ambient: { intensity: 0.4 } } },
+        xAxis3D: { type: "value", name: "Longitude (°)", nameTextStyle: { color: labelSecondary }, axisLabel: { color: labelTertiary }, splitLine: { show: true, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } } },
+        yAxis3D: { type: "value", name: "Altitude (km)", nameTextStyle: { color: labelSecondary }, axisLabel: { color: labelTertiary }, splitLine: { show: true, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } } },
+        zAxis3D: { type: "value", name: "Latitude (°)", nameTextStyle: { color: labelSecondary }, axisLabel: { color: labelTertiary }, splitLine: { show: true, lineStyle: { color: "rgba(100, 116, 139, 0.1)" } } },
+        series: seriesArray
+      };
+    }, [data, showTrajectory, autoRotate, corridorColors, tooltipStyle, legendStyle, labelPrimary, labelSecondary, labelTertiary, labelBg]);
+    if (!glReady) return /* @__PURE__ */ jsx(AstroChart, { ref, type: "scatter", series: [], title, width, height, loading: true, className });
+    return /* @__PURE__ */ jsx(AstroChart, { ref, type: "scatter", series: [], title, width, height, loading, className, echartsOptions, export: exportOptions, infoTooltip });
+  }
+));
+const AntennaPattern3DChart = memo(forwardRef(
+  function AntennaPattern3DChart2({
+    patterns = [],
+    title,
+    width = "100%",
+    height = 500,
+    minGain = -20,
+    autoRotate = true,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const glReady = useEchartsGlReady();
+    const { tokens } = useTheme();
+    const tooltipStyle = useChartTooltipStyle();
+    tokens.colors.text.primary;
+    tokens.colors.text.secondary;
+    const legendStyle = useChartLegendStyle();
+    const echartsOptions = useMemo(() => {
+      const seriesArray = [];
+      patterns.forEach((pattern, pIdx) => {
+        const color = pattern.color || ASTRO_DATA_VIZ_COLORS.mixed[pIdx % ASTRO_DATA_VIZ_COLORS.mixed.length];
+        const maxGain = Math.max(...pattern.pattern.map((p) => p.gain), 0);
+        const surfaceData = pattern.pattern.filter((p) => p.gain >= minGain).map((p) => {
+          const thetaRad = p.theta * Math.PI / 180;
+          const phiRad = p.phi * Math.PI / 180;
+          const r = Math.max(0, (p.gain - minGain) / (maxGain - minGain) * 80 + 20);
+          return { value: [r * Math.sin(thetaRad) * Math.cos(phiRad), r * Math.cos(thetaRad), r * Math.sin(thetaRad) * Math.sin(phiRad)], gain: p.gain, itemStyle: { color, opacity: 0.7 } };
+        });
+        seriesArray.push({ type: "scatter3D", name: pattern.name, coordinateSystem: "cartesian3D", data: surfaceData, symbolSize: 4 });
+        if (pattern.boresight) {
+          const thetaRad = pattern.boresight.theta * Math.PI / 180;
+          const phiRad = pattern.boresight.phi * Math.PI / 180;
+          seriesArray.push({ type: "line3D", name: `${pattern.name} Boresight`, coordinateSystem: "cartesian3D", data: [[0, 0, 0], [100 * Math.sin(thetaRad) * Math.cos(phiRad), 100 * Math.cos(thetaRad), 100 * Math.sin(thetaRad) * Math.sin(phiRad)]], lineStyle: { color: "#fff", width: 2 } });
+        }
+      });
+      return {
+        tooltip: {
+          show: true,
+          ...tooltipStyle,
+          formatter: (params) => {
+            const d = params.data || {};
+            return `<div style="font-weight:600;margin-bottom:4px">${params.seriesName}</div>${d.gain !== void 0 ? `<div style="color:#22d3ee">Gain: ${d.gain.toFixed(1)} dBi</div>` : ""}`;
+          }
+        },
+        legend: { show: patterns.length > 1, top: 10, ...legendStyle },
+        grid3D: { boxWidth: 100, boxHeight: 100, boxDepth: 100, viewControl: { autoRotate, autoRotateSpeed: 3, distance: 220, alpha: 20, beta: 45 }, light: { main: { intensity: 1.2 }, ambient: { intensity: 0.5 } }, postEffect: { enable: true, bloom: { enable: true, intensity: 0.08 } } },
+        xAxis3D: { type: "value", name: "X", min: -100, max: 100, axisLabel: { show: false }, splitLine: { show: false } },
+        yAxis3D: { type: "value", name: "Z", min: -100, max: 100, axisLabel: { show: false }, splitLine: { show: false } },
+        zAxis3D: { type: "value", name: "Y", min: -100, max: 100, axisLabel: { show: false }, splitLine: { show: false } },
+        series: seriesArray
+      };
+    }, [patterns, minGain, autoRotate, tooltipStyle, legendStyle]);
+    if (!glReady) return /* @__PURE__ */ jsx(AstroChart, { ref, type: "scatter", series: [], title, width, height, loading: true, className });
+    return /* @__PURE__ */ jsx(AstroChart, { ref, type: "scatter", series: [], title, width, height, loading, className, echartsOptions, export: exportOptions, infoTooltip });
+  }
+));
+const WaterfallChart = memo(forwardRef(
+  function WaterfallChart2({
+    data = [],
+    title = "RF Spectrum Waterfall",
+    centerFrequency: _centerFrequency,
+    bandwidth: _bandwidth,
+    fftBins = 512,
+    colorMap = "viridis",
+    powerRange = [-120, -60],
+    timeWindow = 60,
+    markers: _markers = [],
+    showSpectrum: _showSpectrum = true,
+    width = "100%",
+    height = 400,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const { tokens } = useTheme();
+    const tooltipStyle = useChartTooltipStyle();
+    tokens.colors.text.primary;
+    tokens.colors.text.secondary;
+    const colorMaps = {
+      viridis: ["#440154", "#482777", "#3e4989", "#31688e", "#26828e", "#1f9e89", "#35b779", "#6ece58", "#b5de2b", "#fde725"],
+      plasma: ["#0d0887", "#46039f", "#7201a8", "#9c179e", "#bd3786", "#d8576b", "#ed7953", "#fb9f3a", "#fdca26", "#f0f921"],
+      inferno: ["#000004", "#1b0c41", "#4a0c6b", "#781c6d", "#a52c60", "#cf4446", "#ed6925", "#fb9b06", "#f7d13d", "#fcffa4"],
+      magma: ["#000004", "#180f3d", "#440f76", "#721f81", "#9e2f7f", "#cd4071", "#f1605d", "#fd9668", "#feca8d", "#fcfdbf"]
+    };
+    const echartsOptions = useMemo(() => {
+      if (!data.length) return {};
+      const heatmapData = [];
+      const timeLabels = [];
+      const freqLabels = [];
+      const firstPoint = data[0];
+      const freqMin = Math.min(...firstPoint.frequencies);
+      const freqMax = Math.max(...firstPoint.frequencies);
+      const freqStep = (freqMax - freqMin) / (fftBins - 1);
+      for (let i = 0; i < fftBins; i++) {
+        const freq = freqMin + i * freqStep;
+        freqLabels.push((freq / 1e6).toFixed(2));
+      }
+      data.slice(-timeWindow).forEach((point, tIdx) => {
+        const time = point.time instanceof Date ? point.time : new Date(point.time);
+        timeLabels.push(time.toLocaleTimeString());
+        point.powers.forEach((power, fIdx) => {
+          if (fIdx < fftBins) {
+            heatmapData.push([fIdx, tIdx, power]);
+          }
+        });
+      });
+      return {
+        tooltip: {
+          show: true,
+          ...tooltipStyle,
+          formatter: (params) => {
+            if (Array.isArray(params)) return "";
+            const [fIdx, tIdx, power] = params.data || [];
+            const freq = freqLabels[fIdx] || "N/A";
+            const time = timeLabels[tIdx] || "N/A";
+            return `<div style="font-weight:600">Spectrum</div>
+              <div>Frequency: ${freq} MHz</div>
+              <div>Time: ${time}</div>
+              <div>Power: ${(power == null ? void 0 : power.toFixed(1)) ?? "N/A"} dBm</div>`;
+          }
+        },
+        grid: { left: 60, right: 40, top: 40, bottom: 60 },
+        xAxis: { type: "category", data: freqLabels, name: "Frequency (MHz)", nameLocation: "middle", nameGap: 35 },
+        yAxis: { type: "category", data: timeLabels, name: "Time", nameLocation: "middle", nameGap: 45 },
+        visualMap: {
+          min: powerRange[0],
+          max: powerRange[1],
+          calculable: true,
+          orient: "horizontal",
+          left: "center",
+          bottom: 0,
+          // Enable hover linking - highlight only hovered range
+          hoverLink: true,
+          // Non-hovered regions get faded opacity
+          outOfRange: {
+            color: "rgba(128, 128, 128, 0.12)",
+            opacity: 0.15
+          },
+          inRange: { color: colorMaps[colorMap] || colorMaps.viridis },
+          text: [`${powerRange[1]} dBm`, `${powerRange[0]} dBm`],
+          textStyle: { color: "rgba(255, 255, 255, 0.7)" }
+        },
+        series: [{
+          type: "heatmap",
+          data: heatmapData,
+          emphasis: { itemStyle: { borderColor: "#fff", borderWidth: 1 } }
+        }]
+      };
+    }, [data, fftBins, colorMap, powerRange, timeWindow, tooltipStyle]);
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "heatmap",
+        series: [],
+        title,
+        width,
+        height,
+        loading,
+        className,
+        echartsOptions,
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const DopplerTrackChart = memo(forwardRef(
+  function DopplerTrackChart2({
+    predicted = [],
+    measured = [],
+    carrierFrequency: _carrierFrequency,
+    passInfo,
+    showResiduals = false,
+    showElevation = true,
+    title,
+    width = "100%",
+    height = 300,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const tooltipStyle = useChartTooltipStyle();
+    const chartTitle = title || (passInfo ? `Doppler Track – ${passInfo.name}` : "Doppler Track");
+    const echartsOptions = useMemo(() => {
+      const series = [];
+      if (predicted.length > 0) {
+        series.push({
+          name: "Predicted",
+          type: "line",
+          data: predicted.map((p) => {
+            const time = p.time instanceof Date ? p.time.getTime() : p.time;
+            return [time, p.dopplerShift];
+          }),
+          lineStyle: { color: ASTRO_DATA_VIZ_COLORS.mixed[0], width: 2 },
+          symbol: "none",
+          smooth: true
+        });
+      }
+      if (measured.length > 0) {
+        series.push({
+          name: "Measured",
+          type: "scatter",
+          data: measured.map((p) => {
+            const time = p.time instanceof Date ? p.time.getTime() : p.time;
+            return [time, p.dopplerShift];
+          }),
+          itemStyle: { color: ASTRO_DATA_VIZ_COLORS.mixed[2] },
+          symbolSize: 4
+        });
+      }
+      if (showElevation && predicted.some((p) => p.elevation !== void 0)) {
+        series.push({
+          name: "Elevation",
+          type: "line",
+          yAxisIndex: 1,
+          data: predicted.filter((p) => p.elevation !== void 0).map((p) => {
+            const time = p.time instanceof Date ? p.time.getTime() : p.time;
+            return [time, p.elevation];
+          }),
+          lineStyle: { color: SOFT_STATUS_COLORS.normal, width: 1, type: "dashed" },
+          symbol: "none",
+          areaStyle: { color: `${STATUS_COLORS.normal}20` }
+        });
+      }
+      return {
+        tooltip: {
+          show: true,
+          trigger: "axis",
+          ...tooltipStyle,
+          formatter: (params) => {
+            if (!Array.isArray(params) || params.length === 0) return "";
+            const firstParam = params[0];
+            const time = new Date(firstParam.data[0]).toLocaleTimeString();
+            let html = `<div style="font-weight:600;margin-bottom:4px">${time}</div>`;
+            params.forEach((p) => {
+              var _a;
+              const value = p.seriesName === "Elevation" ? `${(_a = p.data[1]) == null ? void 0 : _a.toFixed(1)}°` : `${(p.data[1] / 1e3).toFixed(2)} kHz`;
+              html += `<div>${p.marker} ${p.seriesName}: ${value}</div>`;
+            });
+            return html;
+          }
+        },
+        legend: { show: true, top: 10 },
+        grid: { left: 60, right: 60, top: 50, bottom: 40 },
+        xAxis: { type: "time", name: "Time" },
+        yAxis: [
+          { type: "value", name: "Doppler (kHz)", axisLabel: { formatter: (v) => (v / 1e3).toFixed(1) } },
+          { type: "value", name: "Elevation (°)", position: "right", min: 0, max: 90, show: showElevation }
+        ],
+        series
+      };
+    }, [predicted, measured, showResiduals, showElevation, tooltipStyle]);
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "line",
+        title: chartTitle,
+        series: [],
+        width,
+        height,
+        loading,
+        className,
+        echartsOptions,
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const LinkMarginChart = memo(forwardRef(
+  function LinkMarginChart2({
+    data = [],
+    minMargin,
+    mode = "both",
+    showRainFade: _showRainFade = false,
+    title = "Link Margin vs Elevation",
+    width = "100%",
+    height = 250,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const series = [];
+    if ((mode === "uplink" || mode === "both") && data.some((d) => d.uplinkMargin !== void 0)) {
+      series.push({
+        id: "uplink",
+        name: "Uplink Margin",
+        data: data.filter((d) => d.uplinkMargin !== void 0).map((d) => ({ x: d.elevation, y: d.uplinkMargin })),
+        color: ASTRO_DATA_VIZ_COLORS.mixed[0]
+      });
+    }
+    if ((mode === "downlink" || mode === "both") && data.some((d) => d.downlinkMargin !== void 0)) {
+      series.push({
+        id: "downlink",
+        name: "Downlink Margin",
+        data: data.filter((d) => d.downlinkMargin !== void 0).map((d) => ({ x: d.elevation, y: d.downlinkMargin })),
+        color: ASTRO_DATA_VIZ_COLORS.mixed[2]
+      });
+    }
+    const annotations = {
+      markLines: {
+        data: [{
+          yAxis: minMargin,
+          label: `Min Margin (${minMargin} dB)`,
+          color: SOFT_STATUS_COLORS.caution,
+          lineStyle: { type: "dashed" }
+        }]
+      },
+      markAreas: {
+        data: [[
+          { yAxis: 0, name: "Insufficient Margin" },
+          { yAxis: minMargin }
+        ]],
+        itemStyle: { color: `${STATUS_COLORS.critical}15` }
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "line",
+        title,
+        series,
+        width,
+        height,
+        loading,
+        className,
+        xAxis: { type: "value", name: "Elevation (°)", min: 0, max: 90 },
+        yAxis: { type: "value", name: "Margin (dB)" },
+        tooltip: { trigger: "axis", crosshair: "x" },
+        legend: { show: mode === "both", position: "bottom" },
+        annotations,
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const ConstellationCoverageChart = memo(forwardRef(
+  function ConstellationCoverageChart2({
+    data = { coverage: [], latitudes: [], longitudes: [] },
+    title = "Constellation Coverage",
+    metricLabel = "Coverage",
+    metricUnit = "%",
+    colorMap = "viridis",
+    valueRange,
+    satellites = [],
+    groundStations = [],
+    width = "100%",
+    height = 400,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const { tokens } = useTheme();
+    const tooltipStyle = useChartTooltipStyle();
+    const labelPrimary = tokens.colors.text.primary;
+    const labelSecondary = tokens.colors.text.secondary;
+    const colorMaps = {
+      viridis: ["#440154", "#482777", "#3e4989", "#31688e", "#26828e", "#1f9e89", "#35b779", "#6ece58", "#b5de2b", "#fde725"],
+      jet: ["#00007f", "#0000ff", "#007fff", "#00ffff", "#7fff7f", "#ffff00", "#ff7f00", "#ff0000", "#7f0000"],
+      plasma: ["#0d0887", "#46039f", "#7201a8", "#9c179e", "#bd3786", "#d8576b", "#ed7953", "#fb9f3a", "#fdca26", "#f0f921"],
+      thermal: ["#000000", "#1a0a2e", "#3d1551", "#6b1d6a", "#a12568", "#d3405c", "#eb6841", "#f5a623", "#f7dc6f", "#ffffff"]
+    };
+    const echartsOptions = useMemo(() => {
+      if (!data.coverage.length || !data.latitudes.length || !data.longitudes.length) return {};
+      const heatmapData = [];
+      let minVal = Infinity;
+      let maxVal = -Infinity;
+      data.latitudes.forEach((_, latIdx) => {
+        data.longitudes.forEach((_2, lonIdx) => {
+          var _a;
+          const val = ((_a = data.coverage[latIdx]) == null ? void 0 : _a[lonIdx]) ?? 0;
+          heatmapData.push([lonIdx, latIdx, val]);
+          if (val < minVal) minVal = val;
+          if (val > maxVal) maxVal = val;
+        });
+      });
+      const range = valueRange || [minVal, maxVal];
+      const lonLabels = data.longitudes.map((v) => `${v.toFixed(0)}°`);
+      const latLabels = data.latitudes.map((v) => `${v.toFixed(0)}°`);
+      const seriesArray = [
+        {
+          type: "heatmap",
+          data: heatmapData,
+          emphasis: { itemStyle: { borderColor: "#fff", borderWidth: 1 } },
+          progressive: 5e3
+        }
+      ];
+      if (satellites.length > 0) {
+        seriesArray.push({
+          type: "scatter",
+          name: "Satellites",
+          coordinateSystem: "cartesian2d",
+          data: satellites.map((sat) => {
+            const lonIdx = data.longitudes.findIndex((v) => Math.abs(v - sat.lon) < data.longitudes[1] - data.longitudes[0]);
+            const latIdx = data.latitudes.findIndex((v) => Math.abs(v - sat.lat) < data.latitudes[1] - data.latitudes[0]);
+            return { value: [lonIdx >= 0 ? lonIdx : 0, latIdx >= 0 ? latIdx : 0], name: sat.name, itemStyle: { color: sat.color || "#fff" } };
+          }),
+          symbolSize: 8,
+          symbol: "triangle",
+          z: 10,
+          label: { show: true, formatter: (p) => {
+            var _a;
+            return ((_a = p.data) == null ? void 0 : _a.name) || "";
+          }, position: "top", color: labelPrimary, fontSize: 9 }
+        });
+      }
+      if (groundStations.length > 0) {
+        seriesArray.push({
+          type: "scatter",
+          name: "Ground Stations",
+          coordinateSystem: "cartesian2d",
+          data: groundStations.map((gs) => {
+            const lonIdx = data.longitudes.findIndex((v) => Math.abs(v - gs.lon) < data.longitudes[1] - data.longitudes[0]);
+            const latIdx = data.latitudes.findIndex((v) => Math.abs(v - gs.lat) < data.latitudes[1] - data.latitudes[0]);
+            return { value: [lonIdx >= 0 ? lonIdx : 0, latIdx >= 0 ? latIdx : 0], name: gs.name };
+          }),
+          symbolSize: 10,
+          symbol: "diamond",
+          itemStyle: { color: ASTRO_DATA_VIZ_COLORS.mixed[2] },
+          z: 10,
+          label: { show: true, formatter: (p) => {
+            var _a;
+            return ((_a = p.data) == null ? void 0 : _a.name) || "";
+          }, position: "bottom", color: labelSecondary, fontSize: 9 }
+        });
+      }
+      return {
+        tooltip: {
+          show: true,
+          ...tooltipStyle,
+          formatter: (params) => {
+            if (Array.isArray(params)) return "";
+            const d = params.data;
+            if (params.seriesType === "scatter") return `<div style="font-weight:600">${(d == null ? void 0 : d.name) || ""}</div>`;
+            const [lonIdx, latIdx, val] = d || [];
+            const lon = data.longitudes[lonIdx] ?? "N/A";
+            const lat = data.latitudes[latIdx] ?? "N/A";
+            return `<div style="font-weight:600">${metricLabel}</div>
+              <div>Lat: ${typeof lat === "number" ? lat.toFixed(1) : lat}°</div>
+              <div>Lon: ${typeof lon === "number" ? lon.toFixed(1) : lon}°</div>
+              <div>${metricLabel}: ${(val == null ? void 0 : val.toFixed(1)) ?? "N/A"} ${metricUnit}</div>`;
+          }
+        },
+        grid: { left: 60, right: 50, top: 40, bottom: 80 },
+        xAxis: { type: "category", data: lonLabels, name: "Longitude", nameLocation: "middle", nameGap: 30, axisLabel: { interval: Math.floor(lonLabels.length / 12) } },
+        yAxis: { type: "category", data: latLabels, name: "Latitude", nameLocation: "middle", nameGap: 40, axisLabel: { interval: Math.floor(latLabels.length / 6) } },
+        visualMap: {
+          min: range[0],
+          max: range[1],
+          calculable: true,
+          orient: "horizontal",
+          left: "center",
+          bottom: 0,
+          hoverLink: true,
+          outOfRange: { color: "rgba(128, 128, 128, 0.12)", opacity: 0.15 },
+          inRange: { color: colorMaps[colorMap] || colorMaps.viridis },
+          text: [`${range[1]} ${metricUnit}`, `${range[0]} ${metricUnit}`],
+          textStyle: { color: labelSecondary }
+        },
+        series: seriesArray
+      };
+    }, [data, satellites, groundStations, colorMap, valueRange, metricLabel, metricUnit, tooltipStyle, labelPrimary, labelSecondary]);
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "heatmap",
+        series: [],
+        title,
+        width,
+        height,
+        loading,
+        className,
+        echartsOptions,
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+const ConjunctionChart = memo(forwardRef(
+  function ConjunctionChart2({
+    events = [],
+    timeRange,
+    warningThreshold = 5,
+    criticalThreshold = 1,
+    minProbability: _minProbability,
+    showProbability = true,
+    title = "Conjunction Assessment",
+    width = "100%",
+    height = 350,
+    loading = false,
+    className = "",
+    export: exportOptions,
+    infoTooltip
+  }, ref) {
+    const tooltipStyle = useChartTooltipStyle();
+    const echartsOptions = useMemo(() => {
+      if (!events.length) return {};
+      const sorted = [...events].sort((a, b) => a.tca - b.tca);
+      const missData = sorted.map((evt) => {
+        const color = evt.missDistance < criticalThreshold ? STATUS_COLORS.critical : evt.missDistance < warningThreshold ? STATUS_COLORS.caution : STATUS_COLORS.normal;
+        return {
+          value: [evt.tca, evt.missDistance],
+          itemStyle: { color },
+          symbolSize: Math.max(6, Math.min(20, 22 - evt.missDistance * 2)),
+          ...evt
+        };
+      });
+      const seriesArray = [
+        {
+          name: "Miss Distance",
+          type: "scatter",
+          data: missData,
+          symbolSize: (val) => val.symbolSize || 10,
+          z: 10
+        }
+      ];
+      if (showProbability && sorted.some((e) => e.probability !== void 0)) {
+        seriesArray.push({
+          name: "Probability (Pc)",
+          type: "bar",
+          yAxisIndex: 1,
+          data: sorted.map((evt) => ({
+            value: [evt.tca, evt.probability ?? 0],
+            itemStyle: {
+              color: (evt.probability ?? 0) > 1e-4 ? `${STATUS_COLORS.critical}99` : (evt.probability ?? 0) > 1e-6 ? `${STATUS_COLORS.caution}99` : `${STATUS_COLORS.normal}60`
+            }
+          })),
+          barWidth: 8,
+          z: 5
+        });
+      }
+      return {
+        tooltip: {
+          show: true,
+          trigger: "item",
+          ...tooltipStyle,
+          formatter: (params) => {
+            var _a, _b, _c;
+            const d = params.data || {};
+            if (params.seriesName === "Probability (Pc)") {
+              return `<div>Pc: ${(((_a = d.value) == null ? void 0 : _a[1]) ?? 0).toExponential(2)}</div>`;
+            }
+            const mdColor = d.missDistance < criticalThreshold ? STATUS_COLORS.critical : d.missDistance < warningThreshold ? STATUS_COLORS.caution : STATUS_COLORS.normal;
+            const tca = new Date(((_b = d.value) == null ? void 0 : _b[0]) ?? d.tca);
+            return `<div style="font-weight:600;margin-bottom:4px">${d.primary} × ${d.secondary}</div>
+              <div>TCA: ${tca.toLocaleString()}</div>
+              <div style="color:${mdColor}">Miss Distance: ${(_c = d.missDistance) == null ? void 0 : _c.toFixed(3)} km</div>
+              ${d.probability !== void 0 ? `<div>Pc: ${(d.probability * 100).toExponential(2)}%</div>` : ""}
+              ${d.relativeVelocity ? `<div>Rel. Velocity: ${d.relativeVelocity.toFixed(2)} km/s</div>` : ""}`;
+          }
+        },
+        legend: { show: showProbability, top: 10 },
+        grid: { left: 60, right: showProbability ? 80 : 40, top: 50, bottom: 40 },
+        xAxis: {
+          type: "time",
+          name: "Time of Closest Approach",
+          ...timeRange ? { min: timeRange[0], max: timeRange[1] } : {}
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "Miss Distance (km)",
+            min: 0,
+            splitLine: { lineStyle: { color: "rgba(100, 116, 139, 0.15)" } }
+          },
+          {
+            type: "log",
+            name: showProbability ? "Probability" : void 0,
+            position: "right",
+            show: showProbability,
+            min: 1e-10,
+            max: 1,
+            axisLabel: { formatter: (v) => v.toExponential(0) },
+            splitLine: { show: false }
+          }
+        ],
+        // Threshold marklines
+        series: seriesArray.map((s, i) => ({
+          ...s,
+          ...i === 0 ? {
+            markLine: {
+              silent: true,
+              data: [
+                { yAxis: criticalThreshold, label: { formatter: `Critical (${criticalThreshold} km)`, color: STATUS_COLORS.critical }, lineStyle: { color: SOFT_STATUS_COLORS.critical, type: "dashed", width: 1 } },
+                { yAxis: warningThreshold, label: { formatter: `Warning (${warningThreshold} km)`, color: STATUS_COLORS.caution }, lineStyle: { color: SOFT_STATUS_COLORS.caution, type: "dashed", width: 1 } }
+              ]
+            },
+            markArea: {
+              silent: true,
+              data: [[{ yAxis: 0 }, { yAxis: criticalThreshold }]],
+              itemStyle: { color: `${STATUS_COLORS.critical}10` }
+            }
+          } : {}
+        }))
+      };
+    }, [events, timeRange, warningThreshold, criticalThreshold, showProbability, tooltipStyle]);
+    return /* @__PURE__ */ jsx(
+      AstroChart,
+      {
+        ref,
+        type: "scatter",
+        series: [],
+        title,
+        width,
+        height,
+        loading,
+        className,
+        echartsOptions,
+        export: exportOptions,
+        infoTooltip
+      }
+    );
+  }
+));
+export {
+  AntennaPattern3DChart,
+  AttitudeChart,
+  AttitudeHistory3DChart,
+  Bar3DChart,
+  ConjunctionAssessment3DChart,
+  ConjunctionChart,
+  ConstellationCoverageChart,
+  ContactWindowChart,
+  DopplerTrackChart,
+  EclipseTimelineChart,
+  HeliocentricOrbitPlot,
+  LaunchCorridor3DChart,
+  Lines3DChart,
+  LinkBudgetChart,
+  LinkMarginChart,
+  ManeuverBudgetChart,
+  OrbitChart,
+  PowerChart,
+  RoseDiagram,
+  Scatter3DChart,
+  SpectrumChart,
+  SphericalRadar3DChart,
+  SubsystemGauge,
+  Surface3DChart,
+  ThermalHeatmapChart,
+  TransferOrbit3DChart,
+  WaterfallChart
+};
+//# sourceMappingURL=domain.js.map