@zendir/ui 0.5.0 → 0.6.1

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

@@ -1,1433 +1,1353 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, forwardRef, useRef, useMemo, useCallback, useImperativeHandle, useEffect, useState } from "react";
-import ReactEChartsCore from "echarts-for-react/lib/core";
-import * as echarts from "echarts/core";
-import { LineChart, BarChart, PieChart, ScatterChart, RadarChart, GaugeChart, HeatmapChart, CandlestickChart, BoxplotChart, TreemapChart, SunburstChart, FunnelChart, SankeyChart, CustomChart, GraphChart, ParallelChart } from "echarts/charts";
-import { GridComponent, TooltipComponent, TitleComponent, LegendComponent, DataZoomComponent, ToolboxComponent, MarkLineComponent, MarkAreaComponent, MarkPointComponent, VisualMapComponent, BrushComponent, PolarComponent, RadarComponent, GeoComponent, ParallelComponent } from "echarts/components";
-import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { AstroIcon } from "../../core/display/AstroIcon.js";
 import { HeaderIconWithStatus } from "../../core/display/HeaderIconWithStatus.js";
 import { useCardBorderStyle } from "../../context/DisplaySettingsContext.js";
-import { createAstroEChartsTheme, getSeriesColor, createAreaGradient } from "./theme.js";
-const STATUS_SHAPES = {
-  off: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: color }) }),
-  standby: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: color }) }),
-  normal: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: color }) }),
-  caution: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "10", height: "10", fill: color }) }),
-  serious: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx("polygon", { points: "6,1 11,6 6,11 1,6", fill: color }) }),
-  critical: (size, color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx("polygon", { points: "6,11 1,2 11,2", fill: color }) })
+import { createAreaGradient, createAstroEChartsTheme, getSeriesColor } from "./theme.js";
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ReactEChartsCore from "echarts-for-react/lib/core";
+import * as echarts from "echarts/core";
+import { BarChart, BoxplotChart, CandlestickChart, CustomChart, FunnelChart, GaugeChart, GraphChart, HeatmapChart, LineChart, ParallelChart, PieChart, RadarChart, SankeyChart, ScatterChart, SunburstChart, TreemapChart } from "echarts/charts";
+import { BrushComponent, DataZoomComponent, GeoComponent, GridComponent, LegendComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, ParallelComponent, PolarComponent, RadarComponent, TitleComponent, ToolboxComponent, TooltipComponent, VisualMapComponent } from "echarts/components";
+import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
+//#region src/react/charts/unified/AstroChart.tsx
+/**
+* @zendir/ui - AstroChart Component
+*
+* Enterprise-grade unified charting component built on ECharts.
+* Follows AstroUXD design patterns with full theme integration.
+*
+* Features:
+* - 15+ chart types
+* - Real-time streaming support
+* - Zoom, pan, brush selection
+* - Annotations (thresholds, regions)
+* - Export (PNG, SVG, CSV)
+* - Crosshair sync across charts
+* - Full accessibility support
+* - Dark/light theme support
+*/
+var STATUS_SHAPES = {
+	off: (size, color) => /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		width: size,
+		height: size,
+		children: /* @__PURE__ */ jsx("circle", {
+			cx: "6",
+			cy: "6",
+			r: "5",
+			fill: color
+		})
+	}),
+	standby: (size, color) => /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		width: size,
+		height: size,
+		children: /* @__PURE__ */ jsx("circle", {
+			cx: "6",
+			cy: "6",
+			r: "5",
+			fill: color
+		})
+	}),
+	normal: (size, color) => /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		width: size,
+		height: size,
+		children: /* @__PURE__ */ jsx("circle", {
+			cx: "6",
+			cy: "6",
+			r: "5",
+			fill: color
+		})
+	}),
+	caution: (size, color) => /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		width: size,
+		height: size,
+		children: /* @__PURE__ */ jsx("rect", {
+			x: "1",
+			y: "1",
+			width: "10",
+			height: "10",
+			fill: color
+		})
+	}),
+	serious: (size, color) => /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		width: size,
+		height: size,
+		children: /* @__PURE__ */ jsx("polygon", {
+			points: "6,1 11,6 6,11 1,6",
+			fill: color
+		})
+	}),
+	critical: (size, color) => /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		width: size,
+		height: size,
+		children: /* @__PURE__ */ jsx("polygon", {
+			points: "6,11 1,2 11,2",
+			fill: color
+		})
+	})
 };
-const STATUS_LABELS = {
-  off: "Off",
-  standby: "Standby",
-  normal: "Normal",
-  caution: "Caution",
-  serious: "Serious",
-  critical: "Critical"
+/**
+* Astro UX Status Labels
+* Follows Astro UXDS naming conventions
+* https://www.astrouxds.com/patterns/status-system/
+*/
+var STATUS_LABELS = {
+	off: "Off",
+	standby: "Standby",
+	normal: "Normal",
+	caution: "Caution",
+	serious: "Serious",
+	critical: "Critical"
 };
+/** Slug for safe filenames: lowercase, alphanumeric and hyphens only */
 function slug(str) {
-  return str.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+	return str.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
 }
+/** Build base export name from title, series names, and chart type */
 function derivedExportBaseName(title, seriesNames, chartType) {
-  const parts = ["zendir"];
-  if (title) parts.push(slug(title));
-  else parts.push("chart");
-  const seriesSlug = seriesNames.slice(0, 4).map(slug).filter(Boolean).join("-");
-  if (seriesSlug) parts.push(seriesSlug);
-  parts.push(slug(chartType));
-  return parts.join("-") || "zendir-chart";
+	const parts = ["zendir"];
+	if (title) parts.push(slug(title));
+	else parts.push("chart");
+	const seriesSlug = seriesNames.slice(0, 4).map(slug).filter(Boolean).join("-");
+	if (seriesSlug) parts.push(seriesSlug);
+	parts.push(slug(chartType));
+	return parts.join("-") || "zendir-chart";
 }
 echarts.use([
-  LineChart,
-  BarChart,
-  PieChart,
-  ScatterChart,
-  RadarChart,
-  GaugeChart,
-  HeatmapChart,
-  CandlestickChart,
-  BoxplotChart,
-  TreemapChart,
-  SunburstChart,
-  FunnelChart,
-  SankeyChart,
-  CustomChart,
-  GraphChart,
-  ParallelChart,
-  GridComponent,
-  TooltipComponent,
-  TitleComponent,
-  LegendComponent,
-  DataZoomComponent,
-  ToolboxComponent,
-  MarkLineComponent,
-  MarkAreaComponent,
-  MarkPointComponent,
-  VisualMapComponent,
-  BrushComponent,
-  PolarComponent,
-  RadarComponent,
-  GeoComponent,
-  ParallelComponent,
-  CanvasRenderer,
-  SVGRenderer
+	LineChart,
+	BarChart,
+	PieChart,
+	ScatterChart,
+	RadarChart,
+	GaugeChart,
+	HeatmapChart,
+	CandlestickChart,
+	BoxplotChart,
+	TreemapChart,
+	SunburstChart,
+	FunnelChart,
+	SankeyChart,
+	CustomChart,
+	GraphChart,
+	ParallelChart,
+	GridComponent,
+	TooltipComponent,
+	TitleComponent,
+	LegendComponent,
+	DataZoomComponent,
+	ToolboxComponent,
+	MarkLineComponent,
+	MarkAreaComponent,
+	MarkPointComponent,
+	VisualMapComponent,
+	BrushComponent,
+	PolarComponent,
+	RadarComponent,
+	GeoComponent,
+	ParallelComponent,
+	CanvasRenderer,
+	SVGRenderer
 ]);
 function transformSeriesToECharts(series, chartType, theme) {
-  return series.map((s, index) => {
-    var _a, _b, _c, _d, _e;
-    const seriesType = s.type || chartType;
-    const color = s.color || getSeriesColor(index);
-    const baseSeries = {
-      id: s.id,
-      name: s.name,
-      type: mapChartType(seriesType),
-      data: transformData(s.data, seriesType),
-      yAxisIndex: s.yAxisIndex || 0,
-      showSymbol: seriesType === "scatter" || ((_a = s.symbol) == null ? void 0 : _a.type) !== "none",
-      smooth: s.smooth ?? (seriesType === "line" || seriesType === "area")
-    };
-    if (seriesType === "line" || seriesType === "area") {
-      baseSeries.lineStyle = {
-        width: ((_b = s.lineStyle) == null ? void 0 : _b.width) ?? 2,
-        type: ((_c = s.lineStyle) == null ? void 0 : _c.type) ?? "solid",
-        opacity: ((_d = s.lineStyle) == null ? void 0 : _d.opacity) ?? 1
-      };
-      baseSeries.itemStyle = { color };
-      if (seriesType === "area") {
-        baseSeries.areaStyle = s.areaStyle || {
-          opacity: 0.3,
-          color: createAreaGradient(color)
-        };
-      }
-      if (s.symbol) {
-        baseSeries.symbol = s.symbol.type || "circle";
-        baseSeries.symbolSize = s.symbol.size || 6;
-      }
-    }
-    if (seriesType === "bar") {
-      baseSeries.itemStyle = {
-        color,
-        borderRadius: [4, 4, 0, 0]
-      };
-      if (s.stack) {
-        baseSeries.stack = s.stack;
-      }
-    }
-    if (seriesType === "pie" || seriesType === "donut") {
-      baseSeries.radius = seriesType === "donut" ? ["40%", "70%"] : "70%";
-      baseSeries.label = {
-        show: true,
-        formatter: "{b}: {d}%",
-        color: theme.textStyle.color,
-        textBorderWidth: 0,
-        textBorderColor: "transparent"
-      };
-      baseSeries.emphasis = {
-        itemStyle: {
-          shadowBlur: 10,
-          shadowOffsetX: 0,
-          shadowColor: "rgba(0, 0, 0, 0.5)"
-        }
-      };
-    }
-    if (seriesType === "scatter") {
-      baseSeries.symbolSize = ((_e = s.symbol) == null ? void 0 : _e.size) || 10;
-      baseSeries.itemStyle = { color };
-    }
-    if (seriesType === "gauge") {
-      baseSeries.detail = {
-        formatter: "{value}%",
-        fontSize: 20,
-        color: theme.textStyle.color
-      };
-      baseSeries.axisLine = {
-        lineStyle: {
-          width: 10,
-          color: [
-            [0.3, theme.color[1]],
-            // Green
-            [0.7, theme.color[3]],
-            // Yellow
-            [1, theme.color[2]]
-            // Red
-          ]
-        }
-      };
-    }
-    return baseSeries;
-  });
+	return series.map((s, index) => {
+		const seriesType = s.type || chartType;
+		const color = s.color || getSeriesColor(index);
+		const baseSeries = {
+			id: s.id,
+			name: s.name,
+			type: mapChartType(seriesType),
+			data: transformData(s.data, seriesType),
+			yAxisIndex: s.yAxisIndex || 0,
+			showSymbol: seriesType === "scatter" || s.symbol?.type !== "none",
+			smooth: s.smooth ?? (seriesType === "line" || seriesType === "area")
+		};
+		if (seriesType === "line" || seriesType === "area") {
+			baseSeries.lineStyle = {
+				width: s.lineStyle?.width ?? 2,
+				type: s.lineStyle?.type ?? "solid",
+				opacity: s.lineStyle?.opacity ?? 1
+			};
+			baseSeries.itemStyle = { color };
+			if (seriesType === "area") baseSeries.areaStyle = s.areaStyle || {
+				opacity: .3,
+				color: createAreaGradient(color)
+			};
+			if (s.symbol) {
+				baseSeries.symbol = s.symbol.type || "circle";
+				baseSeries.symbolSize = s.symbol.size || 6;
+			}
+		}
+		if (seriesType === "bar") {
+			baseSeries.itemStyle = {
+				color,
+				borderRadius: [
+					4,
+					4,
+					0,
+					0
+				]
+			};
+			if (s.stack) baseSeries.stack = s.stack;
+		}
+		if (seriesType === "pie" || seriesType === "donut") {
+			baseSeries.radius = seriesType === "donut" ? ["40%", "70%"] : "70%";
+			baseSeries.label = {
+				show: true,
+				formatter: "{b}: {d}%",
+				color: theme.textStyle.color,
+				textBorderWidth: 0,
+				textBorderColor: "transparent"
+			};
+			baseSeries.emphasis = { itemStyle: {
+				shadowBlur: 10,
+				shadowOffsetX: 0,
+				shadowColor: "rgba(0, 0, 0, 0.5)"
+			} };
+		}
+		if (seriesType === "scatter") {
+			baseSeries.symbolSize = s.symbol?.size || 10;
+			baseSeries.itemStyle = { color };
+		}
+		if (seriesType === "gauge") {
+			baseSeries.detail = {
+				formatter: "{value}%",
+				fontSize: 20,
+				color: theme.textStyle.color
+			};
+			baseSeries.axisLine = { lineStyle: {
+				width: 10,
+				color: [
+					[.3, theme.color[1]],
+					[.7, theme.color[3]],
+					[1, theme.color[2]]
+				]
+			} };
+		}
+		return baseSeries;
+	});
 }
 function mapChartType(type) {
-  switch (type) {
-    case "area":
-      return "line";
-    case "donut":
-      return "pie";
-    default:
-      return type;
-  }
+	switch (type) {
+		case "area": return "line";
+		case "donut": return "pie";
+		default: return type;
+	}
 }
 function transformData(data, type) {
-  if (!data || data.length === 0) return [];
-  if (typeof data[0] === "number") {
-    return data;
-  }
-  if (Array.isArray(data[0])) {
-    return data;
-  }
-  const firstItem = data[0];
-  if ("time" in firstItem) {
-    return data.map((d) => [d.time, d.value]);
-  }
-  if (type === "pie" || type === "donut") {
-    return data.map((d) => ({
-      name: String(d.x),
-      value: d.y,
-      // Apply color via itemStyle if specified
-      ...d.color ? { itemStyle: { color: d.color } } : {},
-      // Preserve any additional metadata
-      ...d.meta || {}
-    }));
-  }
-  if (type === "scatter") {
-    return data.map((d) => ({
-      value: [d.x, d.y],
-      ...d.color ? { itemStyle: { color: d.color } } : {},
-      ...d.label ? { name: d.label } : {}
-    }));
-  }
-  return data.map((d) => [d.x, d.y]);
+	if (!data || data.length === 0) return [];
+	if (typeof data[0] === "number") return data;
+	if (Array.isArray(data[0])) return data;
+	if ("time" in data[0]) return data.map((d) => [d.time, d.value]);
+	if (type === "pie" || type === "donut") return data.map((d) => ({
+		name: String(d.x),
+		value: d.y,
+		...d.color ? { itemStyle: { color: d.color } } : {},
+		...d.meta || {}
+	}));
+	if (type === "scatter") return data.map((d) => ({
+		value: [d.x, d.y],
+		...d.color ? { itemStyle: { color: d.color } } : {},
+		...d.label ? { name: d.label } : {}
+	}));
+	return data.map((d) => [d.x, d.y]);
 }
 function buildEChartsOptions(props, theme, hideTitle = false) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-  const {
-    type,
-    series,
-    title,
-    subtitle,
-    xAxis,
-    yAxis,
-    tooltip,
-    legend,
-    zoom,
-    annotations,
-    loading,
-    compactAxes = true
-    // Default: hide axis names for more chart space
-  } = props;
-  const showEChartsTitle = title && !hideTitle;
-  const isPolar = type === "radar";
-  const isPie = type === "pie" || type === "donut";
-  const isGauge = type === "gauge";
-  const isSankey = type === "sankey";
-  const isTreemap = type === "treemap" || type === "sunburst";
-  const isGraph = ((_a = props.echartsOptions) == null ? void 0 : _a.series) && Array.isArray(props.echartsOptions.series) && props.echartsOptions.series.some((s) => (s == null ? void 0 : s.type) === "graph");
-  const is3D = !!(((_b = props.echartsOptions) == null ? void 0 : _b.grid3D) || ((_c = props.echartsOptions) == null ? void 0 : _c.xAxis3D) || ((_d = props.echartsOptions) == null ? void 0 : _d.globe) || ((_e = props.echartsOptions) == null ? void 0 : _e.series) && Array.isArray(props.echartsOptions.series) && props.echartsOptions.series.some((s) => {
-    const seriesType = (s == null ? void 0 : s.type) || "";
-    return seriesType.includes("3D") || seriesType.includes("3d");
-  }));
-  const needsGrid = !isPolar && !isPie && !isGauge && !isSankey && !isTreemap && !isGraph && !is3D && !props.hideAxes;
-  const hasTitle = hideTitle ? true : !!title;
-  const hasSubtitle = hideTitle ? false : !!subtitle;
-  const legendPosition = (legend == null ? void 0 : legend.position) ?? "bottom";
-  const legendAtTop = legendPosition === "top";
-  const legendAtBottom = legendPosition === "bottom";
-  const showLegend = (legend == null ? void 0 : legend.show) !== false;
-  const options = {
-    // Title - positioned to avoid legend overlap (hidden when using custom header)
-    title: showEChartsTitle ? {
-      text: title,
-      subtext: subtitle,
-      left: "center",
-      top: legendAtTop && showLegend ? 35 : 10,
-      textStyle: { ...theme.title.textStyle, fontWeight: theme.title.textStyle.fontWeight ?? "normal" },
-      subtextStyle: theme.title.subtextStyle
-    } : void 0,
-    // Tooltip with improved contrast
-    // When compactAxes is true, axis names are shown in the axisPointer label on hover
-    tooltip: (tooltip == null ? void 0 : tooltip.enabled) !== false ? {
-      trigger: (tooltip == null ? void 0 : tooltip.trigger) || (isPie ? "item" : "axis"),
-      axisPointer: {
-        type: (tooltip == null ? void 0 : tooltip.crosshair) === true || (tooltip == null ? void 0 : tooltip.crosshair) === "both" ? "cross" : "line",
-        lineStyle: theme.axisPointer.lineStyle,
-        crossStyle: theme.axisPointer.crossStyle,
-        // Show axis value labels on hover (includes axis name context)
-        label: compactAxes ? {
-          show: true,
-          backgroundColor: theme.tooltip.backgroundColor,
-          borderColor: theme.tooltip.borderColor,
-          color: theme.tooltip.textStyle.color,
-          fontSize: 11,
-          padding: [4, 8],
-          // Add axis name prefix to the label when in compact mode
-          formatter: (params) => {
-            var _a2;
-            const axisName = params.axisDimension === "x" ? xAxis == null ? void 0 : xAxis.name : Array.isArray(yAxis) ? (_a2 = yAxis[params.axisIndex]) == null ? void 0 : _a2.name : yAxis == null ? void 0 : yAxis.name;
-            const value = typeof params.value === "number" ? params.value.toLocaleString() : params.value;
-            return axisName ? `${axisName}: ${value}` : String(value);
-          }
-        } : void 0
-      },
-      backgroundColor: theme.tooltip.backgroundColor,
-      borderColor: theme.tooltip.borderColor,
-      borderWidth: theme.tooltip.borderWidth,
-      textStyle: {
-        ...theme.tooltip.textStyle,
-        fontSize: 14
-        // AstroUXDS minimum 14pt
-      },
-      extraCssText: theme.tooltip.extraCssText,
-      confine: (tooltip == null ? void 0 : tooltip.confine) ?? true,
-      formatter: tooltip == null ? void 0 : tooltip.formatter
-    } : void 0,
-    // Legend - ultra-compact styling for maximum chart space
-    legend: showLegend ? {
-      show: true,
-      type: "scroll",
-      orient: (legend == null ? void 0 : legend.orient) || "horizontal",
-      left: (legend == null ? void 0 : legend.position) === "left" ? "left" : (legend == null ? void 0 : legend.position) === "right" ? "right" : "center",
-      top: legendAtTop ? 4 : void 0,
-      bottom: legendAtBottom ? 2 : void 0,
-      padding: [2, 6],
-      itemGap: 8,
-      itemWidth: 12,
-      itemHeight: 6,
-      textStyle: {
-        ...theme.legend.textStyle,
-        fontSize: 10
-        // Ultra-compact for maximum chart space
-      },
-      inactiveColor: theme.legend.inactiveColor,
-      selectedMode: (legend == null ? void 0 : legend.interactive) !== false
-    } : { show: false },
-    // Grid - minimal spacing for maximum chart plotting area
-    // When compactAxes is true, axis names are hidden so we need minimal padding
-    // containLabel: true ensures axis tick labels don't get cut off
-    // Extra space only needed for slider zoom (inside zoom is invisible)
-    grid: needsGrid ? {
-      left: compactAxes ? 8 : 40,
-      right: Array.isArray(yAxis) && yAxis.length > 1 ? compactAxes ? 8 : 40 : 8,
-      top: hasTitle ? hasSubtitle ? 50 : 36 : legendAtTop && showLegend ? 26 : 4,
-      bottom: (legendAtBottom && showLegend ? 26 : 16) + ((zoom == null ? void 0 : zoom.type) === "slider" || (zoom == null ? void 0 : zoom.type) === "both" ? 26 : 0),
-      containLabel: true
-    } : void 0,
-    // X Axis - compact font sizes for more chart space
-    // In compact mode, hide axis name (shown in tooltip instead)
-    xAxis: needsGrid ? {
-      type: (xAxis == null ? void 0 : xAxis.type) || "time",
-      name: compactAxes ? void 0 : xAxis == null ? void 0 : xAxis.name,
-      nameLocation: (xAxis == null ? void 0 : xAxis.nameLocation) || "middle",
-      nameGap: 18,
-      nameTextStyle: {
-        ...theme.xAxis.nameTextStyle,
-        fontSize: 10,
-        // Ultra-compact for maximum chart space
-        fontWeight: 500
-      },
-      min: xAxis == null ? void 0 : xAxis.min,
-      max: xAxis == null ? void 0 : xAxis.max,
-      axisLine: {
-        show: (xAxis == null ? void 0 : xAxis.showLine) !== false,
-        lineStyle: theme.xAxis.axisLine.lineStyle
-      },
-      axisTick: {
-        lineStyle: theme.xAxis.axisTick.lineStyle
-      },
-      axisLabel: {
-        ...theme.xAxis.axisLabel,
-        fontSize: 10,
-        // Ultra-compact for maximum chart space
-        formatter: xAxis == null ? void 0 : xAxis.labelFormatter,
-        // Prevent label overlap - auto-hide overlapping labels
-        hideOverlap: true,
-        // Rotate labels slightly if needed for better fit
-        rotate: 0,
-        // Show fewer labels when space is tight
-        interval: "auto"
-      },
-      splitLine: {
-        show: (xAxis == null ? void 0 : xAxis.showGrid) !== false,
-        lineStyle: { ...theme.xAxis.splitLine.lineStyle, type: theme.xAxis.splitLine.lineStyle.type ?? "solid" }
-      },
-      inverse: xAxis == null ? void 0 : xAxis.inverse
-    } : void 0,
-    // Y Axis - ultra-compact font sizes for maximum chart space
-    // In compact mode, hide axis name (shown in tooltip instead)
-    yAxis: needsGrid ? (Array.isArray(yAxis) ? yAxis : [yAxis || {}]).map((axis, i) => ({
-      type: (axis == null ? void 0 : axis.type) || "value",
-      name: compactAxes ? void 0 : axis == null ? void 0 : axis.name,
-      nameLocation: (axis == null ? void 0 : axis.nameLocation) || "middle",
-      nameGap: 28,
-      nameTextStyle: {
-        ...theme.yAxis.nameTextStyle,
-        fontSize: 10,
-        // Ultra-compact for maximum chart space
-        fontWeight: 500
-      },
-      position: (axis == null ? void 0 : axis.position) || (i === 0 ? "left" : "right"),
-      min: axis == null ? void 0 : axis.min,
-      max: axis == null ? void 0 : axis.max,
-      splitNumber: axis == null ? void 0 : axis.splitNumber,
-      axisLine: {
-        show: (axis == null ? void 0 : axis.showLine) !== false,
-        lineStyle: theme.yAxis.axisLine.lineStyle
-      },
-      axisTick: {
-        lineStyle: theme.yAxis.axisTick.lineStyle
-      },
-      axisLabel: {
-        ...theme.yAxis.axisLabel,
-        fontSize: 10,
-        // Ultra-compact for maximum chart space
-        formatter: (axis == null ? void 0 : axis.labelFormatter) ? axis.labelFormatter : (axis == null ? void 0 : axis.unit) ? (v) => `${v}${axis.unit}` : void 0
-      },
-      splitLine: {
-        show: (axis == null ? void 0 : axis.showGrid) !== false,
-        lineStyle: theme.yAxis.splitLine.lineStyle
-      },
-      inverse: axis == null ? void 0 : axis.inverse
-    })) : void 0,
-    // Radar (for radar charts) - transparent background for glassmorphic look
-    radar: isPolar ? {
-      indicator: ((_g = (_f = series[0]) == null ? void 0 : _f.data) == null ? void 0 : _g.map((d) => {
-        const point = d;
-        return {
-          name: point.label || point.category || String(point.x),
-          max: 100
-        };
-      })) || [],
-      splitArea: {
-        show: true,
-        areaStyle: {
-          color: ["transparent", "transparent", "transparent", "transparent", "transparent"]
-        }
-      },
-      splitLine: {
-        lineStyle: {
-          color: theme.xAxis.splitLine.lineStyle.color,
-          opacity: 0.4
-        }
-      },
-      axisLine: {
-        lineStyle: {
-          color: theme.xAxis.axisLine.lineStyle.color,
-          opacity: 0.4
-        }
-      },
-      axisName: {
-        color: theme.xAxis.axisLabel.color,
-        fontSize: 12
-      }
-    } : void 0,
-    // Data Zoom - inside zoom enabled by default for mouse wheel/pinch
-    // Use zoom={{ enabled: false }} to disable, or zoom={{ type: 'slider' }} for slider
-    dataZoom: (zoom == null ? void 0 : zoom.enabled) === false ? void 0 : [
-      // Inside zoom (mouse wheel / pinch) - ENABLED BY DEFAULT
-      ...(zoom == null ? void 0 : zoom.type) === "inside" || (zoom == null ? void 0 : zoom.type) === "both" || !(zoom == null ? void 0 : zoom.type) ? [{
-        type: "inside",
-        xAxisIndex: (zoom == null ? void 0 : zoom.axis) === "x" || (zoom == null ? void 0 : zoom.axis) === "both" || !(zoom == null ? void 0 : zoom.axis) ? 0 : void 0,
-        yAxisIndex: (zoom == null ? void 0 : zoom.axis) === "y" || (zoom == null ? void 0 : zoom.axis) === "both" ? 0 : void 0,
-        start: (zoom == null ? void 0 : zoom.start) ?? 0,
-        end: (zoom == null ? void 0 : zoom.end) ?? 100,
-        minSpan: zoom == null ? void 0 : zoom.minSpan,
-        maxSpan: zoom == null ? void 0 : zoom.maxSpan,
-        // Smooth zoom animation
-        throttle: 50
-      }] : [],
-      // Slider zoom (only when explicitly requested)
-      ...(zoom == null ? void 0 : zoom.type) === "slider" || (zoom == null ? void 0 : zoom.type) === "both" ? [{
-        type: "slider",
-        show: true,
-        xAxisIndex: (zoom == null ? void 0 : zoom.axis) === "x" || (zoom == null ? void 0 : zoom.axis) === "both" ? 0 : void 0,
-        yAxisIndex: (zoom == null ? void 0 : zoom.axis) === "y" || (zoom == null ? void 0 : zoom.axis) === "both" ? 0 : void 0,
-        start: (zoom == null ? void 0 : zoom.start) ?? 0,
-        end: (zoom == null ? void 0 : zoom.end) ?? 100,
-        minSpan: zoom == null ? void 0 : zoom.minSpan,
-        maxSpan: zoom == null ? void 0 : zoom.maxSpan,
-        backgroundColor: theme.dataZoom.backgroundColor,
-        borderColor: theme.dataZoom.borderColor,
-        fillerColor: theme.dataZoom.fillerColor,
-        handleStyle: { color: theme.dataZoom.handleColor },
-        textStyle: theme.dataZoom.textStyle,
-        height: 25,
-        bottom: 10
-      }] : []
-    ],
-    // Toolbox (export) – always use custom dropdown for consistent UI
-    toolbox: ((_h = props.export) == null ? void 0 : _h.enabled) ? (() => {
-      var _a2;
-      return {
-        show: false,
-        // Hide ECharts toolbox, use custom export button instead
-        right: 20,
-        top: 10,
-        feature: {
-          dataView: ((_a2 = props.export.formats) == null ? void 0 : _a2.includes("json")) ? {
-            show: true,
-            readOnly: true
-          } : void 0
-        },
-        iconStyle: {
-          borderColor: theme.textStyle.color
-        }
-      };
-    })() : void 0,
-    // Series
-    series: transformSeriesToECharts(series, type, theme),
-    // Animation
-    animation: !loading,
-    animationDuration: 300,
-    animationEasing: "cubicOut"
-  };
-  if ((annotations == null ? void 0 : annotations.markLines) && options.series) {
-    const seriesArray = options.series;
-    if (seriesArray.length > 0) {
-      seriesArray[0].markLine = {
-        silent: true,
-        symbol: "none",
-        data: annotations.markLines.data.map((line) => {
-          var _a2, _b2;
-          return {
-            ...line,
-            lineStyle: {
-              color: line.color || theme.color[2],
-              type: ((_a2 = line.lineStyle) == null ? void 0 : _a2.type) || "dashed",
-              width: ((_b2 = line.lineStyle) == null ? void 0 : _b2.width) || 1
-            },
-            label: {
-              show: !!line.label,
-              formatter: line.label,
-              position: "middle",
-              // center of line so label doesn't overlap y-axis at bottom
-              distance: 8,
-              color: theme.textStyle.color,
-              fontWeight: 600,
-              fontSize: 11,
-              textBorderWidth: 0,
-              textBorderColor: "transparent",
-              backgroundColor: theme.tooltip.backgroundColor,
-              borderColor: line.color || theme.color[2],
-              borderWidth: 1,
-              borderRadius: 4,
-              padding: [2, 6]
-            }
-          };
-        })
-      };
-    }
-  }
-  if ((annotations == null ? void 0 : annotations.markAreas) && options.series) {
-    const seriesArray = options.series;
-    const axisLabelColor = ((_j = (_i = theme.xAxis) == null ? void 0 : _i.axisLabel) == null ? void 0 : _j.color) ?? ((_k = theme.textStyle) == null ? void 0 : _k.color) ?? "#94a3b8";
-    const fadedColor = axisLabelColor.startsWith("rgba") ? axisLabelColor : `${axisLabelColor}cc`;
-    const defaultLabelStyle = {
-      show: true,
-      color: fadedColor,
-      fontSize: 11,
-      fontWeight: "500",
-      textBorderWidth: 0,
-      textBorderColor: "transparent",
-      formatter: (params) => {
-        const name = ((params == null ? void 0 : params.name) ?? "") || (typeof (params == null ? void 0 : params.value) === "string" ? params.value : "");
-        if (!name) return "";
-        const icon = name.toLowerCase().includes("eclipse") ? "◐ " : "";
-        return icon ? `${icon}${name}` : name;
-      }
-    };
-    if (seriesArray.length > 0) {
-      seriesArray[0].markArea = {
-        silent: true,
-        data: annotations.markAreas.data.map((pair) => {
-          const [start, end] = pair;
-          return [
-            { ...start, label: { ...defaultLabelStyle, formatter: defaultLabelStyle.formatter } },
-            end
-          ];
-        }),
-        itemStyle: annotations.markAreas.itemStyle
-      };
-    }
-  }
-  if (props.echartsOptions) {
-    return mergeOptions(options, props.echartsOptions);
-  }
-  return options;
+	const { type, series, title, subtitle, xAxis, yAxis, tooltip, legend, zoom, annotations, loading, compactAxes = true } = props;
+	const showEChartsTitle = title && !hideTitle;
+	const isPolar = type === "radar";
+	const isPie = type === "pie" || type === "donut";
+	const isGauge = type === "gauge";
+	const isSankey = type === "sankey";
+	const isTreemap = type === "treemap" || type === "sunburst";
+	const isGraph = props.echartsOptions?.series && Array.isArray(props.echartsOptions.series) && props.echartsOptions.series.some((s) => s?.type === "graph");
+	const is3D = !!(props.echartsOptions?.grid3D || props.echartsOptions?.xAxis3D || props.echartsOptions?.globe || props.echartsOptions?.series && Array.isArray(props.echartsOptions.series) && props.echartsOptions.series.some((s) => {
+		const seriesType = s?.type || "";
+		return seriesType.includes("3D") || seriesType.includes("3d");
+	}));
+	const needsGrid = !isPolar && !isPie && !isGauge && !isSankey && !isTreemap && !isGraph && !is3D && !props.hideAxes;
+	const hasTitle = hideTitle ? true : !!title;
+	const hasSubtitle = hideTitle ? false : !!subtitle;
+	const legendPosition = legend?.position ?? "bottom";
+	const legendAtTop = legendPosition === "top";
+	const legendAtBottom = legendPosition === "bottom";
+	const showLegend = legend?.show !== false;
+	const options = {
+		title: showEChartsTitle ? {
+			text: title,
+			subtext: subtitle,
+			left: "center",
+			top: legendAtTop && showLegend ? 35 : 10,
+			textStyle: {
+				...theme.title.textStyle,
+				fontWeight: theme.title.textStyle.fontWeight ?? "normal"
+			},
+			subtextStyle: theme.title.subtextStyle
+		} : void 0,
+		tooltip: tooltip?.enabled !== false ? {
+			trigger: tooltip?.trigger || (isPie ? "item" : "axis"),
+			axisPointer: {
+				type: tooltip?.crosshair === true || tooltip?.crosshair === "both" ? "cross" : "line",
+				lineStyle: theme.axisPointer.lineStyle,
+				crossStyle: theme.axisPointer.crossStyle,
+				label: compactAxes ? {
+					show: true,
+					backgroundColor: theme.tooltip.backgroundColor,
+					borderColor: theme.tooltip.borderColor,
+					color: theme.tooltip.textStyle.color,
+					fontSize: 11,
+					padding: [4, 8],
+					formatter: (params) => {
+						const axisName = params.axisDimension === "x" ? xAxis?.name : Array.isArray(yAxis) ? yAxis[params.axisIndex]?.name : yAxis?.name;
+						const value = typeof params.value === "number" ? params.value.toLocaleString() : params.value;
+						return axisName ? `${axisName}: ${value}` : String(value);
+					}
+				} : void 0
+			},
+			backgroundColor: theme.tooltip.backgroundColor,
+			borderColor: theme.tooltip.borderColor,
+			borderWidth: theme.tooltip.borderWidth,
+			textStyle: {
+				...theme.tooltip.textStyle,
+				fontSize: 14
+			},
+			extraCssText: theme.tooltip.extraCssText,
+			confine: tooltip?.confine ?? true,
+			formatter: tooltip?.formatter
+		} : void 0,
+		legend: showLegend ? {
+			show: true,
+			type: "scroll",
+			orient: legend?.orient || "horizontal",
+			left: legend?.position === "left" ? "left" : legend?.position === "right" ? "right" : "center",
+			top: legendAtTop ? 4 : void 0,
+			bottom: legendAtBottom ? 2 : void 0,
+			padding: [2, 6],
+			itemGap: 8,
+			itemWidth: 12,
+			itemHeight: 6,
+			textStyle: {
+				...theme.legend.textStyle,
+				fontSize: 10
+			},
+			inactiveColor: theme.legend.inactiveColor,
+			selectedMode: legend?.interactive !== false
+		} : { show: false },
+		grid: needsGrid ? {
+			left: compactAxes ? 8 : 40,
+			right: Array.isArray(yAxis) && yAxis.length > 1 ? compactAxes ? 8 : 40 : 8,
+			top: hasTitle ? hasSubtitle ? 50 : 36 : legendAtTop && showLegend ? 26 : 4,
+			bottom: (legendAtBottom && showLegend ? 26 : 16) + (zoom?.type === "slider" || zoom?.type === "both" ? 26 : 0),
+			containLabel: true
+		} : void 0,
+		xAxis: needsGrid ? {
+			type: xAxis?.type || "time",
+			name: compactAxes ? void 0 : xAxis?.name,
+			nameLocation: xAxis?.nameLocation || "middle",
+			nameGap: 18,
+			nameTextStyle: {
+				...theme.xAxis.nameTextStyle,
+				fontSize: 10,
+				fontWeight: 500
+			},
+			min: xAxis?.min,
+			max: xAxis?.max,
+			axisLine: {
+				show: xAxis?.showLine !== false,
+				lineStyle: theme.xAxis.axisLine.lineStyle
+			},
+			axisTick: { lineStyle: theme.xAxis.axisTick.lineStyle },
+			axisLabel: {
+				...theme.xAxis.axisLabel,
+				fontSize: 10,
+				formatter: xAxis?.labelFormatter,
+				hideOverlap: true,
+				rotate: 0,
+				interval: "auto"
+			},
+			splitLine: {
+				show: xAxis?.showGrid !== false,
+				lineStyle: {
+					...theme.xAxis.splitLine.lineStyle,
+					type: theme.xAxis.splitLine.lineStyle.type ?? "solid"
+				}
+			},
+			inverse: xAxis?.inverse
+		} : void 0,
+		yAxis: needsGrid ? (Array.isArray(yAxis) ? yAxis : [yAxis || {}]).map((axis, i) => ({
+			type: axis?.type || "value",
+			name: compactAxes ? void 0 : axis?.name,
+			nameLocation: axis?.nameLocation || "middle",
+			nameGap: 28,
+			nameTextStyle: {
+				...theme.yAxis.nameTextStyle,
+				fontSize: 10,
+				fontWeight: 500
+			},
+			position: axis?.position || (i === 0 ? "left" : "right"),
+			min: axis?.min,
+			max: axis?.max,
+			splitNumber: axis?.splitNumber,
+			axisLine: {
+				show: axis?.showLine !== false,
+				lineStyle: theme.yAxis.axisLine.lineStyle
+			},
+			axisTick: { lineStyle: theme.yAxis.axisTick.lineStyle },
+			axisLabel: {
+				...theme.yAxis.axisLabel,
+				fontSize: 10,
+				formatter: axis?.labelFormatter ? axis.labelFormatter : axis?.unit ? (v) => `${v}${axis.unit}` : void 0
+			},
+			splitLine: {
+				show: axis?.showGrid !== false,
+				lineStyle: theme.yAxis.splitLine.lineStyle
+			},
+			inverse: axis?.inverse
+		})) : void 0,
+		radar: isPolar ? {
+			indicator: series[0]?.data?.map((d) => {
+				const point = d;
+				return {
+					name: point.label || point.category || String(point.x),
+					max: 100
+				};
+			}) || [],
+			splitArea: {
+				show: true,
+				areaStyle: { color: [
+					"transparent",
+					"transparent",
+					"transparent",
+					"transparent",
+					"transparent"
+				] }
+			},
+			splitLine: { lineStyle: {
+				color: theme.xAxis.splitLine.lineStyle.color,
+				opacity: .4
+			} },
+			axisLine: { lineStyle: {
+				color: theme.xAxis.axisLine.lineStyle.color,
+				opacity: .4
+			} },
+			axisName: {
+				color: theme.xAxis.axisLabel.color,
+				fontSize: 12
+			}
+		} : void 0,
+		dataZoom: zoom?.enabled === false ? void 0 : [...zoom?.type === "inside" || zoom?.type === "both" || !zoom?.type ? [{
+			type: "inside",
+			xAxisIndex: zoom?.axis === "x" || zoom?.axis === "both" || !zoom?.axis ? 0 : void 0,
+			yAxisIndex: zoom?.axis === "y" || zoom?.axis === "both" ? 0 : void 0,
+			start: zoom?.start ?? 0,
+			end: zoom?.end ?? 100,
+			minSpan: zoom?.minSpan,
+			maxSpan: zoom?.maxSpan,
+			throttle: 50
+		}] : [], ...zoom?.type === "slider" || zoom?.type === "both" ? [{
+			type: "slider",
+			show: true,
+			xAxisIndex: zoom?.axis === "x" || zoom?.axis === "both" ? 0 : void 0,
+			yAxisIndex: zoom?.axis === "y" || zoom?.axis === "both" ? 0 : void 0,
+			start: zoom?.start ?? 0,
+			end: zoom?.end ?? 100,
+			minSpan: zoom?.minSpan,
+			maxSpan: zoom?.maxSpan,
+			backgroundColor: theme.dataZoom.backgroundColor,
+			borderColor: theme.dataZoom.borderColor,
+			fillerColor: theme.dataZoom.fillerColor,
+			handleStyle: { color: theme.dataZoom.handleColor },
+			textStyle: theme.dataZoom.textStyle,
+			height: 25,
+			bottom: 10
+		}] : []],
+		toolbox: props.export?.enabled ? (() => {
+			return {
+				show: false,
+				right: 20,
+				top: 10,
+				feature: { dataView: props.export.formats?.includes("json") ? {
+					show: true,
+					readOnly: true
+				} : void 0 },
+				iconStyle: { borderColor: theme.textStyle.color }
+			};
+		})() : void 0,
+		series: transformSeriesToECharts(series, type, theme),
+		animation: !loading,
+		animationDuration: 300,
+		animationEasing: "cubicOut"
+	};
+	if (annotations?.markLines && options.series) {
+		const seriesArray = options.series;
+		if (seriesArray.length > 0) seriesArray[0].markLine = {
+			silent: true,
+			symbol: "none",
+			data: annotations.markLines.data.map((line) => ({
+				...line,
+				lineStyle: {
+					color: line.color || theme.color[2],
+					type: line.lineStyle?.type || "dashed",
+					width: line.lineStyle?.width || 1
+				},
+				label: {
+					show: !!line.label,
+					formatter: line.label,
+					position: "middle",
+					distance: 8,
+					color: theme.textStyle.color,
+					fontWeight: 600,
+					fontSize: 11,
+					textBorderWidth: 0,
+					textBorderColor: "transparent",
+					backgroundColor: theme.tooltip.backgroundColor,
+					borderColor: line.color || theme.color[2],
+					borderWidth: 1,
+					borderRadius: 4,
+					padding: [2, 6]
+				}
+			}))
+		};
+	}
+	if (annotations?.markAreas && options.series) {
+		const seriesArray = options.series;
+		const axisLabelColor = theme.xAxis?.axisLabel?.color ?? theme.textStyle?.color ?? "#94a3b8";
+		const defaultLabelStyle = {
+			show: true,
+			color: axisLabelColor.startsWith("rgba") ? axisLabelColor : `${axisLabelColor}cc`,
+			fontSize: 11,
+			fontWeight: "500",
+			textBorderWidth: 0,
+			textBorderColor: "transparent",
+			formatter: (params) => {
+				const name = (params?.name ?? "") || (typeof params?.value === "string" ? params.value : "");
+				if (!name) return "";
+				const icon = name.toLowerCase().includes("eclipse") ? "◐ " : "";
+				return icon ? `${icon}${name}` : name;
+			}
+		};
+		if (seriesArray.length > 0) seriesArray[0].markArea = {
+			silent: true,
+			data: annotations.markAreas.data.map((pair) => {
+				const [start, end] = pair;
+				return [{
+					...start,
+					label: {
+						...defaultLabelStyle,
+						formatter: defaultLabelStyle.formatter
+					}
+				}, end];
+			}),
+			itemStyle: annotations.markAreas.itemStyle
+		};
+	}
+	if (props.echartsOptions) return mergeOptions(options, props.echartsOptions);
+	return options;
 }
 function mergeOptions(base, custom) {
-  let mergedSeries = base.series;
-  if (custom.series) {
-    const baseSeries = base.series || [];
-    const customSeries = custom.series;
-    const allBaseSeriesEmpty = baseSeries.length === 0 || baseSeries.every((s) => {
-      if (!s) return true;
-      if (!s.data) return true;
-      if (Array.isArray(s.data) && s.data.length === 0) return true;
-      return false;
-    });
-    const baseLen = baseSeries.length;
-    const customLen = customSeries.length;
-    if (baseLen === 1 && customLen === 1) {
-      const b = baseSeries[0];
-      const c = customSeries[0];
-      if ((b == null ? void 0 : b.type) === "gauge" && (c == null ? void 0 : c.type) === "gauge") {
-        mergedSeries = customSeries;
-      } else if (allBaseSeriesEmpty) {
-        mergedSeries = customSeries;
-      } else {
-        mergedSeries = [...baseSeries, ...customSeries];
-      }
-    } else if (allBaseSeriesEmpty) {
-      mergedSeries = customSeries;
-    } else {
-      mergedSeries = [...baseSeries, ...customSeries];
-    }
-  }
-  return {
-    ...base,
-    ...custom,
-    series: mergedSeries
-  };
+	let mergedSeries = base.series;
+	if (custom.series) {
+		const baseSeries = base.series || [];
+		const customSeries = custom.series;
+		const allBaseSeriesEmpty = baseSeries.length === 0 || baseSeries.every((s) => {
+			if (!s) return true;
+			if (!s.data) return true;
+			if (Array.isArray(s.data) && s.data.length === 0) return true;
+			return false;
+		});
+		const baseLen = baseSeries.length;
+		const customLen = customSeries.length;
+		if (baseLen === 1 && customLen === 1) {
+			const b = baseSeries[0];
+			const c = customSeries[0];
+			if (b?.type === "gauge" && c?.type === "gauge") mergedSeries = customSeries;
+			else if (allBaseSeriesEmpty) mergedSeries = customSeries;
+			else mergedSeries = [...baseSeries, ...customSeries];
+		} else if (allBaseSeriesEmpty) mergedSeries = customSeries;
+		else mergedSeries = [...baseSeries, ...customSeries];
+	}
+	return {
+		...base,
+		...custom,
+		series: mergedSeries
+	};
 }
-const AstroChart = memo(forwardRef(
-  function AstroChart2(props, ref) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const {
-      width = "100%",
-      height = 400,
-      loading = false,
-      emptyMessage = "No data available",
-      className = "",
-      style,
-      ariaLabel,
-      onChartReady,
-      onClick,
-      onHover,
-      onZoomChange,
-      onBrushSelect,
-      realTime,
-      series = [],
-      infoTooltip,
-      // Header icon/status system
-      icon,
-      iconStatus,
-      statusMessage,
-      showStatusBadge = false
-    } = props;
-    const chartRef = useRef(null);
-    const { tokens, mode, theme: themeVariant } = useTheme();
-    const isTransparentTheme = themeVariant === "transparent" || themeVariant === "transparent-bold" || themeVariant === "transparent-minimal";
-    const isBoldVariant = themeVariant === "transparent-bold";
-    const isMinimalVariant = themeVariant === "transparent-minimal";
-    const cardBorderStyle = useCardBorderStyle(tokens, isTransparentTheme);
-    const glassAccentColor = tokens.colors.accent.primary;
-    const glassAccentMuted = `${glassAccentColor}66`;
-    const headingConfig = ((_b = (_a = tokens.layout) == null ? void 0 : _a.card) == null ? void 0 : _b.heading) ?? {
-      iconSize: 20,
-      iconSizeCompact: 16,
-      titleFontSize: "1.125rem",
-      titleFontSizeChart: "0.875rem",
-      titleFontWeight: 500,
-      gap: 8
-    };
-    const chartTitleFontSize = headingConfig.titleFontSizeChart ?? headingConfig.titleFontSize;
-    const theme = useMemo(
-      () => createAstroEChartsTheme(tokens, mode, themeVariant),
-      [tokens, mode, themeVariant]
-    );
-    const hideEChartsTitle = !!(icon || props.title);
-    const options = useMemo(
-      () => buildEChartsOptions(props, theme, hideEChartsTitle),
-      [props, theme, hideEChartsTitle]
-    );
-    const getChart = useCallback(() => {
-      var _a2;
-      return (_a2 = chartRef.current) == null ? void 0 : _a2.getEchartsInstance();
-    }, []);
-    const getExportFileName = useCallback((extension, includeTimestamp = true) => {
-      var _a2, _b2;
-      const context = {
-        title: props.title,
-        subtitle: props.subtitle,
-        seriesNames: series.map((s) => s.name),
-        chartType: props.type
-      };
-      let base;
-      if ((_a2 = props.export) == null ? void 0 : _a2.getExportFileName) {
-        base = props.export.getExportFileName(context);
-      } else if ((_b2 = props.export) == null ? void 0 : _b2.fileName) {
-        base = props.export.fileName;
-      } else {
-        base = derivedExportBaseName(props.title, context.seriesNames, props.type);
-      }
-      if (includeTimestamp) {
-        const d = /* @__PURE__ */ new Date();
-        const ts = d.toISOString().slice(0, 19).replace(/[-T:]/g, "").replace(/(\d{8})(\d{6})/, "$1-$2");
-        base = `${base}-${ts}`;
-      }
-      if (extension) base = `${base}.${extension.replace(/^\./, "")}`;
-      return base;
-    }, [props.title, props.subtitle, props.type, props.export, series]);
-    useImperativeHandle(ref, () => ({
-      getChart,
-      resize: () => {
-        var _a2;
-        return (_a2 = getChart()) == null ? void 0 : _a2.resize();
-      },
-      getExportFileName,
-      exportImage: (type = "png", pixelRatio = 2) => {
-        const chart = getChart();
-        if (!chart) return void 0;
-        const imgType = type === "jpg" ? "jpeg" : type;
-        return chart.getDataURL({
-          type: imgType,
-          pixelRatio,
-          backgroundColor: "transparent"
-        });
-      },
-      exportCSV: () => {
-        var _a2, _b2;
-        const rows = [];
-        const headers = ["Index", ...series.map((s) => s.name)];
-        rows.push(headers.join(","));
-        const maxLen = Math.max(...series.map((s) => {
-          var _a3;
-          return ((_a3 = s.data) == null ? void 0 : _a3.length) || 0;
-        }));
-        for (let i = 0; i < maxLen; i++) {
-          const row = [i.toString()];
-          for (const s of series) {
-            const data = s.data;
-            const value = data == null ? void 0 : data[i];
-            if (typeof value === "number") {
-              row.push(value.toString());
-            } else if (Array.isArray(value)) {
-              row.push(((_a2 = value[1]) == null ? void 0 : _a2.toString()) || "");
-            } else if (value && typeof value === "object") {
-              const point = value;
-              row.push(((_b2 = "value" in point ? point.value : point.y) == null ? void 0 : _b2.toString()) || "");
-            } else {
-              row.push("");
-            }
-          }
-          rows.push(row.join(","));
-        }
-        return rows.join("\n");
-      },
-      appendData: (seriesIndex, data) => {
-        var _a2;
-        const chart = getChart();
-        if (!chart) return;
-        const option = chart.getOption();
-        const seriesOpt = (_a2 = option.series) == null ? void 0 : _a2[seriesIndex];
-        if (!seriesOpt) return;
-        const currentData = [...seriesOpt.data || []];
-        const newPoint = "time" in data ? [data.time, data.value] : [data.x, data.y];
-        currentData.push(newPoint);
-        const maxPoints = (realTime == null ? void 0 : realTime.maxPoints) || 1e3;
-        while (currentData.length > maxPoints) {
-          currentData.shift();
-        }
-        chart.setOption({
-          series: [{
-            data: currentData
-          }]
-        }, {
-          replaceMerge: ["series"]
-        });
-      },
-      clearData: () => {
-        const chart = getChart();
-        if (!chart) return;
-        chart.setOption({
-          series: series.map(() => ({ data: [] }))
-        });
-      },
-      dispatchAction: (action) => {
-        var _a2;
-        (_a2 = getChart()) == null ? void 0 : _a2.dispatchAction(action);
-      }
-    }), [getChart, series, realTime]);
-    const userZoomRef = useRef(null);
-    const programmaticRef = useRef(false);
-    const handleEvents = useMemo(() => {
-      const events = {};
-      if (onClick) {
-        events.click = (params) => {
-          onClick(params);
-        };
-      }
-      if (onHover) {
-        events.mouseover = (params) => {
-          onHover(params);
-        };
-      }
-      events.datazoom = (params) => {
-        var _a2;
-        if (programmaticRef.current) {
-          programmaticRef.current = false;
-          return;
-        }
-        const p = params;
-        const b = (_a2 = p.batch) == null ? void 0 : _a2[0];
-        const start = (b == null ? void 0 : b.start) ?? p.start ?? 0;
-        const end = (b == null ? void 0 : b.end) ?? p.end ?? 100;
-        const startValue = (b == null ? void 0 : b.startValue) ?? p.startValue;
-        const endValue = (b == null ? void 0 : b.endValue) ?? p.endValue;
-        const isFullRange = start <= 0 && end >= 100;
-        userZoomRef.current = isFullRange ? null : { start, end, startValue, endValue };
-        if (onZoomChange) onZoomChange({ start, end });
-      };
-      if (onBrushSelect) {
-        events.brushselected = (params) => {
-          onBrushSelect(params);
-        };
-      }
-      return events;
-    }, [onClick, onHover, onZoomChange, onBrushSelect]);
-    useEffect(() => {
-      const saved = userZoomRef.current;
-      if (!saved) return;
-      const chart = getChart();
-      if (!chart || typeof chart.isDisposed === "function" && chart.isDisposed()) return;
-      const hasAbsolute = saved.startValue !== void 0 && saved.endValue !== void 0;
-      programmaticRef.current = true;
-      try {
-        chart.dispatchAction(hasAbsolute ? { type: "dataZoom", startValue: saved.startValue, endValue: saved.endValue } : { type: "dataZoom", start: saved.start, end: saved.end });
-      } catch {
-        programmaticRef.current = false;
-      }
-    }, [options, getChart]);
-    const handleChartReady = useCallback((chart) => {
-      onChartReady == null ? void 0 : onChartReady(chart);
-    }, [onChartReady]);
-    const exportFormats = ((_c = props.export) == null ? void 0 : _c.formats) ?? ["png"];
-    const useCustomExportDropdown = (_d = props.export) == null ? void 0 : _d.enabled;
-    const [exportMenuOpen, setExportMenuOpen] = useState(false);
-    const exportMenuRef = useRef(null);
-    const [infoTooltipOpen, setInfoTooltipOpen] = useState(false);
-    const infoTooltipRef = useRef(null);
-    useEffect(() => {
-      if (!infoTooltip || !infoTooltipOpen) return;
-      const handleClickOutside = (e) => {
-        if (infoTooltipRef.current && !infoTooltipRef.current.contains(e.target)) {
-          setInfoTooltipOpen(false);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [infoTooltip, infoTooltipOpen]);
-    useEffect(() => {
-      if (!useCustomExportDropdown || !exportMenuOpen) return;
-      const handleClickOutside = (e) => {
-        if (exportMenuRef.current && !exportMenuRef.current.contains(e.target)) {
-          setExportMenuOpen(false);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [useCustomExportDropdown, exportMenuOpen]);
-    const handleExportFormat = useCallback((format) => {
-      var _a2, _b2, _c2, _d2;
-      const chart = getChart();
-      if (format === "csv") {
-        const rows = [];
-        const headers = ["Index", ...series.map((s) => s.name)];
-        rows.push(headers.join(","));
-        const maxLen = Math.max(...series.map((s) => {
-          var _a3;
-          return ((_a3 = s.data) == null ? void 0 : _a3.length) || 0;
-        }));
-        for (let i = 0; i < maxLen; i++) {
-          const row = [i.toString()];
-          for (const s of series) {
-            const data = s.data;
-            const value = data == null ? void 0 : data[i];
-            if (typeof value === "number") row.push(value.toString());
-            else if (Array.isArray(value)) row.push(((_a2 = value[1]) == null ? void 0 : _a2.toString()) || "");
-            else if (value && typeof value === "object") {
-              const point = value;
-              row.push(((_b2 = "value" in point ? point.value : point.y) == null ? void 0 : _b2.toString()) || "");
-            } else row.push("");
-          }
-          rows.push(row.join(","));
-        }
-        const csv = rows.join("\n");
-        const filename = getExportFileName("csv", true);
-        const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement("a");
-        a.href = url;
-        a.download = filename;
-        a.click();
-        URL.revokeObjectURL(url);
-      } else if (chart) {
-        const imgType = format === "jpeg" ? "jpeg" : format;
-        const dataUrl = chart.getDataURL({
-          type: imgType,
-          pixelRatio: ((_c2 = props.export) == null ? void 0 : _c2.pixelRatio) || 2,
-          backgroundColor: ((_d2 = props.export) == null ? void 0 : _d2.backgroundColor) || "transparent"
-        });
-        if (dataUrl) {
-          const ext = format === "jpeg" ? "jpg" : format;
-          const filename = getExportFileName(ext, true);
-          const a = document.createElement("a");
-          a.href = dataUrl;
-          a.download = filename;
-          a.click();
-        }
-      }
-      setExportMenuOpen(false);
-    }, [getChart, series, getExportFileName, (_e = props.export) == null ? void 0 : _e.pixelRatio, (_f = props.export) == null ? void 0 : _f.backgroundColor]);
-    useEffect(() => {
-      var _a2;
-      const chart = getChart();
-      if (!chart) return;
-      let mounted = true;
-      const resizeObserver = new ResizeObserver(() => {
-        if (!mounted) return;
-        try {
-          chart.resize();
-        } catch {
-        }
-      });
-      const container = (_a2 = chartRef.current) == null ? void 0 : _a2.ele;
-      if (container) {
-        resizeObserver.observe(container);
-      }
-      return () => {
-        mounted = false;
-        resizeObserver.disconnect();
-      };
-    }, [getChart]);
-    const needs3DCanvas = useMemo(() => {
-      const eo = props.echartsOptions;
-      if (!eo) return false;
-      if (eo.grid3D || eo.xAxis3D || eo.yAxis3D || eo.zAxis3D || eo.globe || eo.geo3D) return true;
-      if (Array.isArray(eo.series)) {
-        return eo.series.some((s) => {
-          const t = (s == null ? void 0 : s.type) || "";
-          return t.includes("3D") || t.includes("3d") || t === "scatter3D" || t === "bar3D" || t === "surface" || t === "lines3D";
-        });
-      }
-      return false;
-    }, [props.echartsOptions]);
-    const hasSeriesData = series.some((s) => s.data && s.data.length > 0);
-    const hasEchartsOptionsSeries = ((_g = props.echartsOptions) == null ? void 0 : _g.series) && (Array.isArray(props.echartsOptions.series) ? props.echartsOptions.series.length > 0 : props.echartsOptions.series !== void 0);
-    const hasData = hasSeriesData || hasEchartsOptionsSeries;
-    const getStatusColor = (status) => {
-      var _a2, _b2, _c2, _d2, _e2, _f2;
-      switch (status) {
-        case "critical":
-          return ((_a2 = tokens.colors.status) == null ? void 0 : _a2.critical) || "#ff3838";
-        case "serious":
-          return ((_b2 = tokens.colors.status) == null ? void 0 : _b2.serious) || "#ffb302";
-        case "caution":
-          return ((_c2 = tokens.colors.status) == null ? void 0 : _c2.caution) || "#fce83a";
-        case "normal":
-          return ((_d2 = tokens.colors.status) == null ? void 0 : _d2.normal) || "#56f000";
-        case "standby":
-          return ((_e2 = tokens.colors.status) == null ? void 0 : _e2.standby) || "#2dccff";
-        case "off":
-          return ((_f2 = tokens.colors.status) == null ? void 0 : _f2.off) || "#a4abb6";
-        default:
-          return tokens.colors.text.secondary;
-      }
-    };
-    const hasHeader = !!(icon || props.title);
-    const useGlassMode = isBoldVariant || isMinimalVariant;
-    const containerStyle = {
-      width: typeof width === "number" ? `${width}px` : width,
-      height: typeof height === "number" ? `${height}px` : height,
-      borderRadius: tokens.borderRadius.lg,
-      padding: tokens.spacing.sm,
-      position: "relative",
-      overflow: "hidden",
-      // Glass mode styling for bold/minimal (matching Container)
-      ...useGlassMode ? {
-        backgroundColor: "rgba(10, 15, 25, 0.35)",
-        backdropFilter: "blur(12px)",
-        WebkitBackdropFilter: "blur(12px)",
-        border: `1px solid ${glassAccentMuted}`,
-        borderTop: isBoldVariant ? `2px solid ${glassAccentColor}` : `1px solid ${glassAccentColor}`,
-        transition: "all 0.3s ease-out, box-shadow 0.3s ease-out"
-      } : isTransparentTheme ? {
-        // Regular transparent (glass) theme — match top cards (ISS): transparent + blur
-        backgroundColor: "transparent",
-        backdropFilter: "blur(12px)",
-        WebkitBackdropFilter: "blur(12px)",
-        ...cardBorderStyle
-      } : {
-        // Non-transparent themes — use same border as Container (muted) so chart doesn't stand out
-        backgroundColor: tokens.colors.background.surface,
-        border: `1px solid ${tokens.colors.border.muted}`
-      },
-      ...style
-    };
-    const glassGradient = useGlassMode ? `linear-gradient(135deg, ${glassAccentColor}10 0%, ${glassAccentColor}03 100%)` : void 0;
-    if (!hasData && !loading) {
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: `astro-chart astro-chart--empty ${className}`,
-          style: containerStyle,
-          role: "group",
-          "aria-roledescription": "chart",
-          "aria-label": ariaLabel || "Empty chart",
-          children: [
-            useGlassMode && glassGradient && /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  inset: 0,
-                  background: glassGradient,
-                  pointerEvents: "none",
-                  zIndex: 0
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              height: "100%",
-              color: tokens.colors.text.secondary,
-              fontFamily: tokens.typography.fontFamily.primary,
-              fontSize: tokens.typography.fontSize.sm,
-              position: "relative",
-              zIndex: 1
-            }, children: emptyMessage })
-          ]
-        }
-      );
-    }
-    const exportImageFormats = exportFormats.filter((f) => ["png", "jpeg", "jpg", "svg"].includes(f));
-    const hasCsv = exportFormats.includes("csv");
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `astro-chart ${className}`,
-        style: containerStyle,
-        role: "group",
-        "aria-roledescription": "chart",
-        "aria-label": ariaLabel || props.title || "Chart",
-        children: [
-          useGlassMode && glassGradient && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                inset: 0,
-                background: glassGradient,
-                pointerEvents: "none",
-                zIndex: 0
-              }
-            }
-          ),
-          hasHeader && isBoldVariant && /* @__PURE__ */ jsxs("div", { style: { position: "relative", zIndex: 1 }, children: [
-            /* @__PURE__ */ jsx("div", { style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              padding: `12px ${tokens.spacing.sm} 0`
-            }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: headingConfig.gap }, children: [
-              icon && iconStatus && /* @__PURE__ */ jsx(
-                HeaderIconWithStatus,
-                {
-                  icon,
-                  size: headingConfig.iconSize,
-                  status: iconStatus,
-                  statusColor: getStatusColor(iconStatus)
-                }
-              ),
-              icon && !iconStatus && /* @__PURE__ */ jsx(
-                AstroIcon,
-                {
-                  name: icon,
-                  size: headingConfig.iconSize,
-                  color: glassAccentColor
-                }
-              ),
-              props.title && /* @__PURE__ */ jsx("h3", { style: {
-                margin: 0,
-                fontSize: chartTitleFontSize,
-                fontWeight: headingConfig.titleFontWeight,
-                color: glassAccentColor,
-                letterSpacing: "0.5px",
-                textShadow: `0 0 20px ${glassAccentMuted}`
-              }, children: props.title })
-            ] }) }),
-            /* @__PURE__ */ jsxs("div", { style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "8px",
-              padding: `10px ${tokens.spacing.sm} 0`,
-              marginBottom: tokens.spacing.xs
-            }, children: [
-              /* @__PURE__ */ jsx("div", { style: {
-                flex: 1,
-                height: "2px",
-                background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 50%, transparent 100%)`,
-                boxShadow: `0 0 8px ${glassAccentMuted}`
-              } }),
-              showStatusBadge && iconStatus && /* @__PURE__ */ jsxs("span", { style: {
-                display: "inline-flex",
-                alignItems: "center",
-                gap: "4px",
-                padding: "2px 8px",
-                fontSize: "0.625rem",
-                // 10px in rem
-                fontWeight: 500,
-                // AstroUXDS medium (not 600)
-                letterSpacing: "0.05em",
-                color: getStatusColor(iconStatus),
-                backgroundColor: `${getStatusColor(iconStatus)}20`,
-                border: `1px solid ${getStatusColor(iconStatus)}40`,
-                borderRadius: "3px",
-                whiteSpace: "nowrap"
-              }, children: [
-                STATUS_SHAPES[iconStatus](6, getStatusColor(iconStatus)),
-                STATUS_LABELS[iconStatus]
-              ] })
-            ] })
-          ] }),
-          hasHeader && isMinimalVariant && /* @__PURE__ */ jsxs("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            padding: `${tokens.spacing.xs} ${tokens.spacing.sm} 0`,
-            marginBottom: tokens.spacing.xs,
-            position: "relative",
-            zIndex: 1
-          }, children: [
-            icon && iconStatus && /* @__PURE__ */ jsx(
-              HeaderIconWithStatus,
-              {
-                icon,
-                size: headingConfig.iconSizeCompact,
-                status: iconStatus,
-                statusColor: getStatusColor(iconStatus),
-                style: { marginRight: tokens.spacing.sm }
-              }
-            ),
-            icon && !iconStatus && /* @__PURE__ */ jsx(
-              AstroIcon,
-              {
-                name: icon,
-                size: headingConfig.iconSizeCompact,
-                color: glassAccentColor,
-                style: { marginRight: tokens.spacing.sm }
-              }
-            ),
-            props.title && /* @__PURE__ */ jsx("h3", { style: {
-              margin: 0,
-              fontSize: chartTitleFontSize,
-              fontWeight: headingConfig.titleFontWeight,
-              color: glassAccentColor,
-              textShadow: `0 0 16px ${glassAccentMuted}`,
-              letterSpacing: "0.02em",
-              whiteSpace: "nowrap",
-              marginRight: "12px"
-            }, children: props.title }),
-            /* @__PURE__ */ jsxs("div", { style: {
-              flex: 1,
-              display: "flex",
-              alignItems: "center",
-              gap: headingConfig.gap,
-              minWidth: 40
-            }, children: [
-              /* @__PURE__ */ jsx("div", { style: {
-                flex: 1,
-                height: "1px",
-                background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 60%, transparent 100%)`
-              } }),
-              showStatusBadge && iconStatus && /* @__PURE__ */ jsxs("span", { style: {
-                display: "inline-flex",
-                alignItems: "center",
-                gap: "3px",
-                padding: "1px 6px",
-                fontSize: "0.5625rem",
-                // 9px in rem (micro)
-                fontWeight: 500,
-                // AstroUXDS medium (not 600)
-                letterSpacing: "0.05em",
-                color: getStatusColor(iconStatus),
-                backgroundColor: `${getStatusColor(iconStatus)}15`,
-                border: `1px solid ${getStatusColor(iconStatus)}30`,
-                borderRadius: "2px",
-                whiteSpace: "nowrap"
-              }, children: [
-                STATUS_SHAPES[iconStatus](5, getStatusColor(iconStatus)),
-                STATUS_LABELS[iconStatus]
-              ] })
-            ] })
-          ] }),
-          hasHeader && isTransparentTheme && !useGlassMode && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              title: statusMessage,
-              style: {
-                position: "absolute",
-                top: 6,
-                left: 8,
-                display: "flex",
-                alignItems: "center",
-                gap: headingConfig.gap,
-                zIndex: 10
-              },
-              children: [
-                icon && iconStatus && /* @__PURE__ */ jsx(
-                  HeaderIconWithStatus,
-                  {
-                    icon,
-                    size: headingConfig.iconSizeCompact,
-                    status: iconStatus,
-                    statusColor: getStatusColor(iconStatus)
-                  }
-                ),
-                icon && !iconStatus && /* @__PURE__ */ jsx(
-                  AstroIcon,
-                  {
-                    name: icon,
-                    size: headingConfig.iconSizeCompact,
-                    color: tokens.colors.text.tertiary
-                  }
-                ),
-                props.title && /* @__PURE__ */ jsx("span", { style: {
-                  fontSize: chartTitleFontSize,
-                  fontWeight: headingConfig.titleFontWeight,
-                  color: tokens.colors.text.primary
-                }, children: props.title })
-              ]
-            }
-          ),
-          hasHeader && !isTransparentTheme && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              title: statusMessage,
-              style: {
-                position: "absolute",
-                top: 6,
-                left: 8,
-                display: "flex",
-                alignItems: "center",
-                gap: headingConfig.gap,
-                zIndex: 10
-              },
-              children: [
-                icon && iconStatus && /* @__PURE__ */ jsx(
-                  HeaderIconWithStatus,
-                  {
-                    icon,
-                    size: headingConfig.iconSizeCompact,
-                    status: iconStatus,
-                    statusColor: getStatusColor(iconStatus)
-                  }
-                ),
-                icon && !iconStatus && /* @__PURE__ */ jsx(
-                  AstroIcon,
-                  {
-                    name: icon,
-                    size: headingConfig.iconSizeCompact,
-                    color: tokens.colors.text.tertiary
-                  }
-                ),
-                props.title && /* @__PURE__ */ jsx("span", { style: {
-                  fontSize: chartTitleFontSize,
-                  fontWeight: headingConfig.titleFontWeight,
-                  color: tokens.colors.text.primary
-                }, children: props.title })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ReactEChartsCore,
-            {
-              ref: chartRef,
-              echarts,
-              option: options,
-              opts: {
-                renderer: props.renderer ?? (needs3DCanvas ? "canvas" : "svg"),
-                ...(props.renderer === "canvas" || needs3DCanvas) && typeof window !== "undefined" && { devicePixelRatio: window.devicePixelRatio || 1 }
-              },
-              style: { width: "100%", height: "100%" },
-              notMerge: true,
-              lazyUpdate: true,
-              showLoading: loading,
-              loadingOption: {
-                text: "Loading...",
-                color: tokens.colors.accent.primary,
-                textColor: tokens.colors.text.primary,
-                maskColor: isTransparentTheme ? "rgba(10, 15, 25, 0.6)" : `${tokens.colors.background.surface}80`
-              },
-              onEvents: handleEvents,
-              onChartReady: handleChartReady
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { style: {
-            position: "absolute",
-            right: 8,
-            top: 6,
-            zIndex: 10,
-            display: "flex",
-            alignItems: "center",
-            gap: 4
-          }, children: [
-            infoTooltip && /* @__PURE__ */ jsxs("div", { ref: infoTooltipRef, style: { position: "relative" }, children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setInfoTooltipOpen((v) => !v),
-                  "aria-label": "Chart information",
-                  "aria-expanded": infoTooltipOpen,
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: 20,
-                    height: 20,
-                    padding: 4,
-                    border: `1px solid ${tokens.colors.border.default}`,
-                    borderRadius: "50%",
-                    background: infoTooltipOpen ? tokens.colors.accent.primary : isTransparentTheme ? "rgba(10, 15, 25, 0.5)" : tokens.colors.background.surface,
-                    color: infoTooltipOpen ? tokens.colors.background.base : tokens.colors.text.secondary,
-                    cursor: "pointer",
-                    transition: "all 0.15s ease"
-                  },
-                  children: infoTooltip.icon || /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) })
-                }
-              ),
-              infoTooltipOpen && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  role: "tooltip",
-                  style: {
-                    position: "absolute",
-                    right: 0,
-                    top: "100%",
-                    marginTop: 8,
-                    minWidth: 200,
-                    maxWidth: infoTooltip.maxWidth || 300,
-                    padding: "12px 16px",
-                    background: isTransparentTheme ? "rgba(10, 15, 25, 0.85)" : tokens.colors.background.surface,
-                    backdropFilter: isTransparentTheme ? "blur(12px)" : void 0,
-                    border: `1px solid ${tokens.colors.border.default}`,
-                    borderRadius: tokens.borderRadius.md,
-                    boxShadow: "0 4px 16px rgba(0,0,0,0.25)",
-                    color: tokens.colors.text.primary,
-                    fontFamily: tokens.typography.fontFamily.primary,
-                    fontSize: tokens.typography.fontSize.sm,
-                    lineHeight: 1.5,
-                    zIndex: 20
-                  },
-                  children: infoTooltip.content
-                }
-              )
-            ] }),
-            useCustomExportDropdown && /* @__PURE__ */ jsxs("div", { ref: exportMenuRef, style: { position: "relative" }, children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setExportMenuOpen((v) => !v),
-                  "aria-haspopup": "true",
-                  "aria-expanded": exportMenuOpen,
-                  "aria-label": "Save chart as",
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: 20,
-                    height: 20,
-                    padding: 4,
-                    border: `1px solid ${tokens.colors.border.default}`,
-                    borderRadius: "50%",
-                    background: isTransparentTheme ? "rgba(10, 15, 25, 0.5)" : tokens.colors.background.surface,
-                    color: tokens.colors.text.secondary,
-                    cursor: "pointer",
-                    transition: "all 0.15s ease"
-                  },
-                  children: /* @__PURE__ */ jsxs("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-                    /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-                    /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
-                    /* @__PURE__ */ jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
-                  ] })
-                }
-              ),
-              exportMenuOpen && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  role: "menu",
-                  style: {
-                    position: "absolute",
-                    right: 0,
-                    top: "100%",
-                    marginTop: 4,
-                    minWidth: 120,
-                    padding: 4,
-                    background: tokens.colors.background.surface,
-                    border: `1px solid ${tokens.colors.border.default}`,
-                    borderRadius: tokens.borderRadius.md,
-                    boxShadow: "0 4px 12px rgba(0,0,0,0.2)"
-                  },
-                  children: [
-                    exportImageFormats.map((f) => /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        role: "menuitem",
-                        onClick: () => handleExportFormat(f === "jpg" ? "jpeg" : f),
-                        style: {
-                          display: "block",
-                          width: "100%",
-                          padding: "8px 12px",
-                          border: "none",
-                          borderRadius: tokens.borderRadius.sm,
-                          background: "transparent",
-                          color: tokens.colors.text.primary,
-                          fontFamily: tokens.typography.fontFamily.primary,
-                          fontSize: tokens.typography.fontSize.sm,
-                          textAlign: "left",
-                          cursor: "pointer"
-                        },
-                        children: f.toUpperCase()
-                      },
-                      f
-                    )),
-                    hasCsv && /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        role: "menuitem",
-                        onClick: () => handleExportFormat("csv"),
-                        style: {
-                          display: "block",
-                          width: "100%",
-                          padding: "8px 12px",
-                          border: "none",
-                          borderRadius: tokens.borderRadius.sm,
-                          background: "transparent",
-                          color: tokens.colors.text.primary,
-                          fontFamily: tokens.typography.fontFamily.primary,
-                          fontSize: tokens.typography.fontSize.sm,
-                          textAlign: "left",
-                          cursor: "pointer"
-                        },
-                        children: "CSV"
-                      }
-                    )
-                  ]
-                }
-              )
-            ] })
-          ] })
-        ]
-      }
-    );
-  }
-));
-export {
-  AstroChart
-};
-//# sourceMappingURL=AstroChart.js.map
+var AstroChart = memo(forwardRef(function AstroChart(props, ref) {
+	const { width = "100%", height = 400, loading = false, emptyMessage = "No data available", className = "", style, ariaLabel, onChartReady, onClick, onHover, onZoomChange, onBrushSelect, realTime, series = [], infoTooltip, icon, iconStatus, statusMessage, showStatusBadge = false } = props;
+	const chartRef = useRef(null);
+	const { tokens, mode, theme: themeVariant } = useTheme();
+	const isTransparentTheme = themeVariant === "transparent" || themeVariant === "transparent-bold" || themeVariant === "transparent-minimal";
+	const isBoldVariant = themeVariant === "transparent-bold";
+	const isMinimalVariant = themeVariant === "transparent-minimal";
+	const cardBorderStyle = useCardBorderStyle(tokens, isTransparentTheme);
+	const glassAccentColor = tokens.colors.accent.primary;
+	const glassAccentMuted = `${glassAccentColor}66`;
+	const headingConfig = tokens.layout?.card?.heading ?? {
+		iconSize: 20,
+		iconSizeCompact: 16,
+		titleFontSize: "1.125rem",
+		titleFontSizeChart: "0.875rem",
+		titleFontWeight: 500,
+		gap: 8
+	};
+	const chartTitleFontSize = headingConfig.titleFontSizeChart ?? headingConfig.titleFontSize;
+	const theme = useMemo(() => createAstroEChartsTheme(tokens, mode, themeVariant), [
+		tokens,
+		mode,
+		themeVariant
+	]);
+	const hideEChartsTitle = !!(icon || props.title);
+	const options = useMemo(() => buildEChartsOptions(props, theme, hideEChartsTitle), [
+		props,
+		theme,
+		hideEChartsTitle
+	]);
+	const getChart = useCallback(() => {
+		return chartRef.current?.getEchartsInstance();
+	}, []);
+	const getExportFileName = useCallback((extension, includeTimestamp = true) => {
+		const context = {
+			title: props.title,
+			subtitle: props.subtitle,
+			seriesNames: series.map((s) => s.name),
+			chartType: props.type
+		};
+		let base;
+		if (props.export?.getExportFileName) base = props.export.getExportFileName(context);
+		else if (props.export?.fileName) base = props.export.fileName;
+		else base = derivedExportBaseName(props.title, context.seriesNames, props.type);
+		if (includeTimestamp) {
+			const ts = (/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/[-T:]/g, "").replace(/(\d{8})(\d{6})/, "$1-$2");
+			base = `${base}-${ts}`;
+		}
+		if (extension) base = `${base}.${extension.replace(/^\./, "")}`;
+		return base;
+	}, [
+		props.title,
+		props.subtitle,
+		props.type,
+		props.export,
+		series
+	]);
+	useImperativeHandle(ref, () => ({
+		getChart,
+		resize: () => getChart()?.resize(),
+		getExportFileName,
+		exportImage: (type = "png", pixelRatio = 2) => {
+			const chart = getChart();
+			if (!chart) return void 0;
+			const imgType = type === "jpg" ? "jpeg" : type;
+			return chart.getDataURL({
+				type: imgType,
+				pixelRatio,
+				backgroundColor: "transparent"
+			});
+		},
+		exportCSV: () => {
+			const rows = [];
+			const headers = ["Index", ...series.map((s) => s.name)];
+			rows.push(headers.join(","));
+			const maxLen = Math.max(...series.map((s) => s.data?.length || 0));
+			for (let i = 0; i < maxLen; i++) {
+				const row = [i.toString()];
+				for (const s of series) {
+					const value = s.data?.[i];
+					if (typeof value === "number") row.push(value.toString());
+					else if (Array.isArray(value)) row.push(value[1]?.toString() || "");
+					else if (value && typeof value === "object") {
+						const point = value;
+						row.push(("value" in point ? point.value : point.y)?.toString() || "");
+					} else row.push("");
+				}
+				rows.push(row.join(","));
+			}
+			return rows.join("\n");
+		},
+		appendData: (seriesIndex, data) => {
+			const chart = getChart();
+			if (!chart) return;
+			const seriesOpt = chart.getOption().series?.[seriesIndex];
+			if (!seriesOpt) return;
+			const currentData = [...seriesOpt.data || []];
+			const newPoint = "time" in data ? [data.time, data.value] : [data.x, data.y];
+			currentData.push(newPoint);
+			const maxPoints = realTime?.maxPoints || 1e3;
+			while (currentData.length > maxPoints) currentData.shift();
+			chart.setOption({ series: [{ data: currentData }] }, { replaceMerge: ["series"] });
+		},
+		clearData: () => {
+			const chart = getChart();
+			if (!chart) return;
+			chart.setOption({ series: series.map(() => ({ data: [] })) });
+		},
+		dispatchAction: (action) => {
+			getChart()?.dispatchAction(action);
+		}
+	}), [
+		getChart,
+		series,
+		realTime
+	]);
+	const userZoomRef = useRef(null);
+	const programmaticRef = useRef(false);
+	const handleEvents = useMemo(() => {
+		const events = {};
+		if (onClick) events.click = (params) => {
+			onClick(params);
+		};
+		if (onHover) events.mouseover = (params) => {
+			onHover(params);
+		};
+		events.datazoom = (params) => {
+			if (programmaticRef.current) {
+				programmaticRef.current = false;
+				return;
+			}
+			const p = params;
+			const b = p.batch?.[0];
+			const start = b?.start ?? p.start ?? 0;
+			const end = b?.end ?? p.end ?? 100;
+			const startValue = b?.startValue ?? p.startValue;
+			const endValue = b?.endValue ?? p.endValue;
+			userZoomRef.current = start <= 0 && end >= 100 ? null : {
+				start,
+				end,
+				startValue,
+				endValue
+			};
+			if (onZoomChange) onZoomChange({
+				start,
+				end
+			});
+		};
+		if (onBrushSelect) events.brushselected = (params) => {
+			onBrushSelect(params);
+		};
+		return events;
+	}, [
+		onClick,
+		onHover,
+		onZoomChange,
+		onBrushSelect
+	]);
+	useEffect(() => {
+		const saved = userZoomRef.current;
+		if (!saved) return;
+		const chart = getChart();
+		if (!chart || typeof chart.isDisposed === "function" && chart.isDisposed()) return;
+		const hasAbsolute = saved.startValue !== void 0 && saved.endValue !== void 0;
+		programmaticRef.current = true;
+		try {
+			chart.dispatchAction(hasAbsolute ? {
+				type: "dataZoom",
+				startValue: saved.startValue,
+				endValue: saved.endValue
+			} : {
+				type: "dataZoom",
+				start: saved.start,
+				end: saved.end
+			});
+		} catch {
+			programmaticRef.current = false;
+		}
+	}, [options, getChart]);
+	const handleChartReady = useCallback((chart) => {
+		onChartReady?.(chart);
+	}, [onChartReady]);
+	const exportFormats = props.export?.formats ?? ["png"];
+	const useCustomExportDropdown = props.export?.enabled;
+	const [exportMenuOpen, setExportMenuOpen] = useState(false);
+	const exportMenuRef = useRef(null);
+	const [infoTooltipOpen, setInfoTooltipOpen] = useState(false);
+	const infoTooltipRef = useRef(null);
+	useEffect(() => {
+		if (!infoTooltip || !infoTooltipOpen) return;
+		const handleClickOutside = (e) => {
+			if (infoTooltipRef.current && !infoTooltipRef.current.contains(e.target)) setInfoTooltipOpen(false);
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [infoTooltip, infoTooltipOpen]);
+	useEffect(() => {
+		if (!useCustomExportDropdown || !exportMenuOpen) return;
+		const handleClickOutside = (e) => {
+			if (exportMenuRef.current && !exportMenuRef.current.contains(e.target)) setExportMenuOpen(false);
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [useCustomExportDropdown, exportMenuOpen]);
+	const handleExportFormat = useCallback((format) => {
+		const chart = getChart();
+		if (format === "csv") {
+			const rows = [];
+			const headers = ["Index", ...series.map((s) => s.name)];
+			rows.push(headers.join(","));
+			const maxLen = Math.max(...series.map((s) => s.data?.length || 0));
+			for (let i = 0; i < maxLen; i++) {
+				const row = [i.toString()];
+				for (const s of series) {
+					const value = s.data?.[i];
+					if (typeof value === "number") row.push(value.toString());
+					else if (Array.isArray(value)) row.push(value[1]?.toString() || "");
+					else if (value && typeof value === "object") {
+						const point = value;
+						row.push(("value" in point ? point.value : point.y)?.toString() || "");
+					} else row.push("");
+				}
+				rows.push(row.join(","));
+			}
+			const csv = rows.join("\n");
+			const filename = getExportFileName("csv", true);
+			const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement("a");
+			a.href = url;
+			a.download = filename;
+			a.click();
+			URL.revokeObjectURL(url);
+		} else if (chart) {
+			const imgType = format === "jpeg" ? "jpeg" : format;
+			const dataUrl = chart.getDataURL({
+				type: imgType,
+				pixelRatio: props.export?.pixelRatio || 2,
+				backgroundColor: props.export?.backgroundColor || "transparent"
+			});
+			if (dataUrl) {
+				const filename = getExportFileName(format === "jpeg" ? "jpg" : format, true);
+				const a = document.createElement("a");
+				a.href = dataUrl;
+				a.download = filename;
+				a.click();
+			}
+		}
+		setExportMenuOpen(false);
+	}, [
+		getChart,
+		series,
+		getExportFileName,
+		props.export?.pixelRatio,
+		props.export?.backgroundColor
+	]);
+	useEffect(() => {
+		const chart = getChart();
+		if (!chart) return;
+		let mounted = true;
+		const resizeObserver = new ResizeObserver(() => {
+			if (!mounted) return;
+			try {
+				chart.resize();
+			} catch {}
+		});
+		const container = chartRef.current?.ele;
+		if (container) resizeObserver.observe(container);
+		return () => {
+			mounted = false;
+			resizeObserver.disconnect();
+		};
+	}, [getChart]);
+	const needs3DCanvas = useMemo(() => {
+		const eo = props.echartsOptions;
+		if (!eo) return false;
+		if (eo.grid3D || eo.xAxis3D || eo.yAxis3D || eo.zAxis3D || eo.globe || eo.geo3D) return true;
+		if (Array.isArray(eo.series)) return eo.series.some((s) => {
+			const t = s?.type || "";
+			return t.includes("3D") || t.includes("3d") || t === "scatter3D" || t === "bar3D" || t === "surface" || t === "lines3D";
+		});
+		return false;
+	}, [props.echartsOptions]);
+	const hasSeriesData = series.some((s) => s.data && s.data.length > 0);
+	const hasEchartsOptionsSeries = props.echartsOptions?.series && (Array.isArray(props.echartsOptions.series) ? props.echartsOptions.series.length > 0 : props.echartsOptions.series !== void 0);
+	const hasData = hasSeriesData || hasEchartsOptionsSeries;
+	const getStatusColor = (status) => {
+		switch (status) {
+			case "critical": return tokens.colors.status?.critical || "#ff3838";
+			case "serious": return tokens.colors.status?.serious || "#ffb302";
+			case "caution": return tokens.colors.status?.caution || "#fce83a";
+			case "normal": return tokens.colors.status?.normal || "#56f000";
+			case "standby": return tokens.colors.status?.standby || "#2dccff";
+			case "off": return tokens.colors.status?.off || "#a4abb6";
+			default: return tokens.colors.text.secondary;
+		}
+	};
+	const hasHeader = !!(icon || props.title);
+	const useGlassMode = isBoldVariant || isMinimalVariant;
+	const containerStyle = {
+		width: typeof width === "number" ? `${width}px` : width,
+		height: typeof height === "number" ? `${height}px` : height,
+		borderRadius: tokens.borderRadius.lg,
+		padding: tokens.spacing.sm,
+		position: "relative",
+		overflow: "hidden",
+		...useGlassMode ? {
+			backgroundColor: "rgba(10, 15, 25, 0.35)",
+			backdropFilter: "blur(12px)",
+			WebkitBackdropFilter: "blur(12px)",
+			border: `1px solid ${glassAccentMuted}`,
+			borderTop: isBoldVariant ? `2px solid ${glassAccentColor}` : `1px solid ${glassAccentColor}`,
+			transition: "all 0.3s ease-out, box-shadow 0.3s ease-out"
+		} : isTransparentTheme ? {
+			backgroundColor: "transparent",
+			backdropFilter: "blur(12px)",
+			WebkitBackdropFilter: "blur(12px)",
+			...cardBorderStyle
+		} : {
+			backgroundColor: tokens.colors.background.surface,
+			border: `1px solid ${tokens.colors.border.muted}`
+		},
+		...style
+	};
+	const glassGradient = useGlassMode ? `linear-gradient(135deg, ${glassAccentColor}10 0%, ${glassAccentColor}03 100%)` : void 0;
+	if (!hasData && !loading) return /* @__PURE__ */ jsxs("div", {
+		className: `astro-chart astro-chart--empty ${className}`,
+		style: containerStyle,
+		role: "group",
+		"aria-roledescription": "chart",
+		"aria-label": ariaLabel || "Empty chart",
+		children: [useGlassMode && glassGradient && /* @__PURE__ */ jsx("div", { style: {
+			position: "absolute",
+			inset: 0,
+			background: glassGradient,
+			pointerEvents: "none",
+			zIndex: 0
+		} }), /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				height: "100%",
+				color: tokens.colors.text.secondary,
+				fontFamily: tokens.typography.fontFamily.primary,
+				fontSize: tokens.typography.fontSize.sm,
+				position: "relative",
+				zIndex: 1
+			},
+			children: emptyMessage
+		})]
+	});
+	const exportImageFormats = exportFormats.filter((f) => [
+		"png",
+		"jpeg",
+		"jpg",
+		"svg"
+	].includes(f));
+	const hasCsv = exportFormats.includes("csv");
+	return /* @__PURE__ */ jsxs("div", {
+		className: `astro-chart ${className}`,
+		style: containerStyle,
+		role: "group",
+		"aria-roledescription": "chart",
+		"aria-label": ariaLabel || props.title || "Chart",
+		children: [
+			useGlassMode && glassGradient && /* @__PURE__ */ jsx("div", { style: {
+				position: "absolute",
+				inset: 0,
+				background: glassGradient,
+				pointerEvents: "none",
+				zIndex: 0
+			} }),
+			hasHeader && isBoldVariant && /* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "relative",
+					zIndex: 1
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "space-between",
+						padding: `12px ${tokens.spacing.sm} 0`
+					},
+					children: /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: headingConfig.gap
+						},
+						children: [
+							icon && iconStatus && /* @__PURE__ */ jsx(HeaderIconWithStatus, {
+								icon,
+								size: headingConfig.iconSize,
+								status: iconStatus,
+								statusColor: getStatusColor(iconStatus)
+							}),
+							icon && !iconStatus && /* @__PURE__ */ jsx(AstroIcon, {
+								name: icon,
+								size: headingConfig.iconSize,
+								color: glassAccentColor
+							}),
+							props.title && /* @__PURE__ */ jsx("h3", {
+								style: {
+									margin: 0,
+									fontSize: chartTitleFontSize,
+									fontWeight: headingConfig.titleFontWeight,
+									color: glassAccentColor,
+									letterSpacing: "0.5px",
+									textShadow: `0 0 20px ${glassAccentMuted}`
+								},
+								children: props.title
+							})
+						]
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "8px",
+						padding: `10px ${tokens.spacing.sm} 0`,
+						marginBottom: tokens.spacing.xs
+					},
+					children: [/* @__PURE__ */ jsx("div", { style: {
+						flex: 1,
+						height: "2px",
+						background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 50%, transparent 100%)`,
+						boxShadow: `0 0 8px ${glassAccentMuted}`
+					} }), showStatusBadge && iconStatus && /* @__PURE__ */ jsxs("span", {
+						style: {
+							display: "inline-flex",
+							alignItems: "center",
+							gap: "4px",
+							padding: "2px 8px",
+							fontSize: "0.625rem",
+							fontWeight: 500,
+							letterSpacing: "0.05em",
+							color: getStatusColor(iconStatus),
+							backgroundColor: `${getStatusColor(iconStatus)}20`,
+							border: `1px solid ${getStatusColor(iconStatus)}40`,
+							borderRadius: "3px",
+							whiteSpace: "nowrap"
+						},
+						children: [STATUS_SHAPES[iconStatus](6, getStatusColor(iconStatus)), STATUS_LABELS[iconStatus]]
+					})]
+				})]
+			}),
+			hasHeader && isMinimalVariant && /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					padding: `${tokens.spacing.xs} ${tokens.spacing.sm} 0`,
+					marginBottom: tokens.spacing.xs,
+					position: "relative",
+					zIndex: 1
+				},
+				children: [
+					icon && iconStatus && /* @__PURE__ */ jsx(HeaderIconWithStatus, {
+						icon,
+						size: headingConfig.iconSizeCompact,
+						status: iconStatus,
+						statusColor: getStatusColor(iconStatus),
+						style: { marginRight: tokens.spacing.sm }
+					}),
+					icon && !iconStatus && /* @__PURE__ */ jsx(AstroIcon, {
+						name: icon,
+						size: headingConfig.iconSizeCompact,
+						color: glassAccentColor,
+						style: { marginRight: tokens.spacing.sm }
+					}),
+					props.title && /* @__PURE__ */ jsx("h3", {
+						style: {
+							margin: 0,
+							fontSize: chartTitleFontSize,
+							fontWeight: headingConfig.titleFontWeight,
+							color: glassAccentColor,
+							textShadow: `0 0 16px ${glassAccentMuted}`,
+							letterSpacing: "0.02em",
+							whiteSpace: "nowrap",
+							marginRight: "12px"
+						},
+						children: props.title
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							flex: 1,
+							display: "flex",
+							alignItems: "center",
+							gap: headingConfig.gap,
+							minWidth: 40
+						},
+						children: [/* @__PURE__ */ jsx("div", { style: {
+							flex: 1,
+							height: "1px",
+							background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 60%, transparent 100%)`
+						} }), showStatusBadge && iconStatus && /* @__PURE__ */ jsxs("span", {
+							style: {
+								display: "inline-flex",
+								alignItems: "center",
+								gap: "3px",
+								padding: "1px 6px",
+								fontSize: "0.5625rem",
+								fontWeight: 500,
+								letterSpacing: "0.05em",
+								color: getStatusColor(iconStatus),
+								backgroundColor: `${getStatusColor(iconStatus)}15`,
+								border: `1px solid ${getStatusColor(iconStatus)}30`,
+								borderRadius: "2px",
+								whiteSpace: "nowrap"
+							},
+							children: [STATUS_SHAPES[iconStatus](5, getStatusColor(iconStatus)), STATUS_LABELS[iconStatus]]
+						})]
+					})
+				]
+			}),
+			hasHeader && isTransparentTheme && !useGlassMode && /* @__PURE__ */ jsxs("div", {
+				title: statusMessage,
+				style: {
+					position: "absolute",
+					top: 6,
+					left: 8,
+					display: "flex",
+					alignItems: "center",
+					gap: headingConfig.gap,
+					zIndex: 10
+				},
+				children: [
+					icon && iconStatus && /* @__PURE__ */ jsx(HeaderIconWithStatus, {
+						icon,
+						size: headingConfig.iconSizeCompact,
+						status: iconStatus,
+						statusColor: getStatusColor(iconStatus)
+					}),
+					icon && !iconStatus && /* @__PURE__ */ jsx(AstroIcon, {
+						name: icon,
+						size: headingConfig.iconSizeCompact,
+						color: tokens.colors.text.tertiary
+					}),
+					props.title && /* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: chartTitleFontSize,
+							fontWeight: headingConfig.titleFontWeight,
+							color: tokens.colors.text.primary
+						},
+						children: props.title
+					})
+				]
+			}),
+			hasHeader && !isTransparentTheme && /* @__PURE__ */ jsxs("div", {
+				title: statusMessage,
+				style: {
+					position: "absolute",
+					top: 6,
+					left: 8,
+					display: "flex",
+					alignItems: "center",
+					gap: headingConfig.gap,
+					zIndex: 10
+				},
+				children: [
+					icon && iconStatus && /* @__PURE__ */ jsx(HeaderIconWithStatus, {
+						icon,
+						size: headingConfig.iconSizeCompact,
+						status: iconStatus,
+						statusColor: getStatusColor(iconStatus)
+					}),
+					icon && !iconStatus && /* @__PURE__ */ jsx(AstroIcon, {
+						name: icon,
+						size: headingConfig.iconSizeCompact,
+						color: tokens.colors.text.tertiary
+					}),
+					props.title && /* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: chartTitleFontSize,
+							fontWeight: headingConfig.titleFontWeight,
+							color: tokens.colors.text.primary
+						},
+						children: props.title
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(ReactEChartsCore, {
+				ref: chartRef,
+				echarts,
+				option: options,
+				opts: {
+					renderer: props.renderer ?? (needs3DCanvas ? "canvas" : "svg"),
+					...(props.renderer === "canvas" || needs3DCanvas) && typeof window !== "undefined" && { devicePixelRatio: window.devicePixelRatio || 1 }
+				},
+				style: {
+					width: "100%",
+					height: "100%"
+				},
+				notMerge: true,
+				lazyUpdate: true,
+				showLoading: loading,
+				loadingOption: {
+					text: "Loading...",
+					color: tokens.colors.accent.primary,
+					textColor: tokens.colors.text.primary,
+					maskColor: isTransparentTheme ? "rgba(10, 15, 25, 0.6)" : tokens.colors.background.overlay
+				},
+				onEvents: handleEvents,
+				onChartReady: handleChartReady
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "absolute",
+					right: 8,
+					top: 6,
+					zIndex: 10,
+					display: "flex",
+					alignItems: "center",
+					gap: 4
+				},
+				children: [infoTooltip && /* @__PURE__ */ jsxs("div", {
+					ref: infoTooltipRef,
+					style: { position: "relative" },
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setInfoTooltipOpen((v) => !v),
+						"aria-label": "Chart information",
+						"aria-expanded": infoTooltipOpen,
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							width: 20,
+							height: 20,
+							padding: 4,
+							border: `1px solid ${tokens.colors.border.default}`,
+							borderRadius: "50%",
+							background: infoTooltipOpen ? tokens.colors.accent.primary : isTransparentTheme ? "rgba(10, 15, 25, 0.5)" : tokens.colors.background.surface,
+							color: infoTooltipOpen ? tokens.colors.background.base : tokens.colors.text.secondary,
+							cursor: "pointer",
+							transition: "all 0.15s ease"
+						},
+						children: infoTooltip.icon || /* @__PURE__ */ jsx("svg", {
+							width: "10",
+							height: "10",
+							viewBox: "0 0 24 24",
+							fill: "currentColor",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" })
+						})
+					}), infoTooltipOpen && /* @__PURE__ */ jsx("div", {
+						role: "tooltip",
+						style: {
+							position: "absolute",
+							right: 0,
+							top: "100%",
+							marginTop: 8,
+							minWidth: 200,
+							maxWidth: infoTooltip.maxWidth || 300,
+							padding: "12px 16px",
+							background: isTransparentTheme ? "rgba(10, 15, 25, 0.85)" : tokens.colors.background.surface,
+							backdropFilter: isTransparentTheme ? "blur(12px)" : void 0,
+							border: `1px solid ${tokens.colors.border.default}`,
+							borderRadius: tokens.borderRadius.md,
+							boxShadow: "0 4px 16px rgba(0,0,0,0.25)",
+							color: tokens.colors.text.primary,
+							fontFamily: tokens.typography.fontFamily.primary,
+							fontSize: tokens.typography.fontSize.sm,
+							lineHeight: 1.5,
+							zIndex: 20
+						},
+						children: infoTooltip.content
+					})]
+				}), useCustomExportDropdown && /* @__PURE__ */ jsxs("div", {
+					ref: exportMenuRef,
+					style: { position: "relative" },
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setExportMenuOpen((v) => !v),
+						"aria-haspopup": "true",
+						"aria-expanded": exportMenuOpen,
+						"aria-label": "Save chart as",
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							width: 20,
+							height: 20,
+							padding: 4,
+							border: `1px solid ${tokens.colors.border.default}`,
+							borderRadius: "50%",
+							background: isTransparentTheme ? "rgba(10, 15, 25, 0.5)" : tokens.colors.background.surface,
+							color: tokens.colors.text.secondary,
+							cursor: "pointer",
+							transition: "all 0.15s ease"
+						},
+						children: /* @__PURE__ */ jsxs("svg", {
+							width: "10",
+							height: "10",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							"aria-hidden": "true",
+							children: [
+								/* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+								/* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+								/* @__PURE__ */ jsx("line", {
+									x1: "12",
+									y1: "15",
+									x2: "12",
+									y2: "3"
+								})
+							]
+						})
+					}), exportMenuOpen && /* @__PURE__ */ jsxs("div", {
+						role: "menu",
+						style: {
+							position: "absolute",
+							right: 0,
+							top: "100%",
+							marginTop: 4,
+							minWidth: 120,
+							padding: 4,
+							background: tokens.colors.background.surface,
+							border: `1px solid ${tokens.colors.border.default}`,
+							borderRadius: tokens.borderRadius.md,
+							boxShadow: "0 4px 12px rgba(0,0,0,0.2)"
+						},
+						children: [exportImageFormats.map((f) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							role: "menuitem",
+							onClick: () => handleExportFormat(f === "jpg" ? "jpeg" : f),
+							style: {
+								display: "block",
+								width: "100%",
+								padding: "8px 12px",
+								border: "none",
+								borderRadius: tokens.borderRadius.sm,
+								background: "transparent",
+								color: tokens.colors.text.primary,
+								fontFamily: tokens.typography.fontFamily.primary,
+								fontSize: tokens.typography.fontSize.sm,
+								textAlign: "left",
+								cursor: "pointer"
+							},
+							children: f.toUpperCase()
+						}, f)), hasCsv && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							role: "menuitem",
+							onClick: () => handleExportFormat("csv"),
+							style: {
+								display: "block",
+								width: "100%",
+								padding: "8px 12px",
+								border: "none",
+								borderRadius: tokens.borderRadius.sm,
+								background: "transparent",
+								color: tokens.colors.text.primary,
+								fontFamily: tokens.typography.fontFamily.primary,
+								fontSize: tokens.typography.fontSize.sm,
+								textAlign: "left",
+								cursor: "pointer"
+							},
+							children: "CSV"
+						})]
+					})]
+				})]
+			})
+		]
+	});
+}));
+//#endregion
+export { AstroChart, AstroChart as default };
+
+//# sourceMappingURL=AstroChart.js.map