@zendir/ui 0.1.8 → 0.1.10

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

@@ -1,3168 +0,0 @@
-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