@classic-homes/charts-react 0.1.37 → 0.1.38

package/dist/index.cjs

@@ -135,10 +135,11 @@ var ChartError = React2.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mb-2 text-sm font-medium text-destructive", children: message }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mb-2 text-sm font-medium text-foreground", children: message }),
           onRetry && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "button",
             {
+              type: "button",
               onClick: onRetry,
               className: "rounded-md bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90",
               children: "Retry"
@@ -214,6 +215,7 @@ var ChartContainer = React4.forwardRef(
     ...props
   }, ref) => {
     const heightStyle = typeof height === "number" ? `${height}px` : height;
+    const descriptionId = `${React4.useId()}-desc`;
     if (loading) {
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartSkeleton, { height, className: wrapperClassName });
     }
@@ -237,12 +239,12 @@ var ChartContainer = React4.forwardRef(
         ref,
         role: "img",
         "aria-label": title,
-        "aria-describedby": description ? `${title}-desc` : void 0,
+        "aria-describedby": description ? descriptionId : void 0,
         "data-testid": "chart-container",
         className: cn("rounded-lg border border-border bg-card", wrapperClassName),
         ...props,
         children: [
-          description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: `${title}-desc`, className: "sr-only", children: description }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: descriptionId, className: "sr-only", children: description }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("h-full w-full", className), style: { height: heightStyle }, children })
         ]
       }
@@ -257,11 +259,12 @@ var echarts3 = __toESM(require("echarts/core"), 1);
 var import_charts = require("echarts/charts");
 var import_components = require("echarts/components");
 var import_renderers = require("echarts/renderers");
-var import_charts_core2 = require("@classic-homes/charts-core");
+var import_charts_core3 = require("@classic-homes/charts-core");
 
 // src/hooks/useChart.ts
 var import_react4 = require("react");
 var echarts2 = __toESM(require("echarts/core"), 1);
+var import_charts_core2 = require("@classic-homes/charts-core");
 
 // src/hooks/useChartTheme.ts
 var import_react = require("react");
@@ -274,18 +277,18 @@ function registerClassicThemes() {
   echarts.registerTheme(import_charts_core.THEME_DARK, import_charts_core.darkTheme);
   themesRegistered = true;
 }
+function resolveTheme(preference) {
+  if (preference !== "auto") {
+    return preference === "dark" ? import_charts_core.THEME_DARK : import_charts_core.THEME_LIGHT;
+  }
+  if (typeof document === "undefined") return import_charts_core.THEME_LIGHT;
+  return document.documentElement.classList.contains("dark") ? import_charts_core.THEME_DARK : import_charts_core.THEME_LIGHT;
+}
 function useChartTheme(preference = "auto") {
-  const [currentTheme, setCurrentTheme] = (0, import_react.useState)(import_charts_core.THEME_LIGHT);
-  const updateTheme = (0, import_react.useCallback)(() => {
-    if (preference !== "auto") {
-      setCurrentTheme(preference === "dark" ? import_charts_core.THEME_DARK : import_charts_core.THEME_LIGHT);
-      return;
-    }
-    const isDark = document.documentElement.classList.contains("dark");
-    setCurrentTheme(isDark ? import_charts_core.THEME_DARK : import_charts_core.THEME_LIGHT);
-  }, [preference]);
+  const [currentTheme, setCurrentTheme] = (0, import_react.useState)(() => resolveTheme(preference));
   (0, import_react.useEffect)(() => {
     registerClassicThemes();
+    const updateTheme = () => setCurrentTheme(resolveTheme(preference));
     updateTheme();
     if (preference !== "auto") return;
     const observer = new MutationObserver((mutations) => {
@@ -299,26 +302,29 @@ function useChartTheme(preference = "auto") {
       attributes: true,
       attributeFilter: ["class"]
     });
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleMediaChange = () => updateTheme();
-    mediaQuery.addEventListener("change", handleMediaChange);
     return () => {
       observer.disconnect();
-      mediaQuery.removeEventListener("change", handleMediaChange);
     };
-  }, [preference, updateTheme]);
+  }, [preference]);
   return currentTheme;
 }
 
 // src/hooks/useChartResize.ts
 var import_react2 = require("react");
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? import_react2.useEffect : import_react2.useLayoutEffect;
+function useRefElement(ref) {
+  const [element, setElement] = (0, import_react2.useState)(null);
+  useIsomorphicLayoutEffect(() => {
+    setElement(ref.current);
+  });
+  return element;
+}
 function useChartResize(chartRef, containerRef) {
-  const resizeObserverRef = (0, import_react2.useRef)(null);
+  const container = useRefElement(containerRef);
   (0, import_react2.useEffect)(() => {
-    const container = containerRef.current;
     if (!container) return;
     let resizeTimeout;
-    resizeObserverRef.current = new ResizeObserver(() => {
+    const observer = new ResizeObserver(() => {
       clearTimeout(resizeTimeout);
       resizeTimeout = setTimeout(() => {
         const chart = chartRef.current;
@@ -327,12 +333,12 @@ function useChartResize(chartRef, containerRef) {
         }
       }, 100);
     });
-    resizeObserverRef.current.observe(container);
+    observer.observe(container);
     return () => {
       clearTimeout(resizeTimeout);
-      resizeObserverRef.current?.disconnect();
+      observer.disconnect();
     };
-  }, [chartRef, containerRef]);
+  }, [chartRef, container]);
 }
 
 // src/hooks/useReducedMotion.ts
@@ -354,7 +360,13 @@ function useReducedMotion() {
 }
 
 // src/hooks/useChart.ts
-var SET_OPTION_OPTS = { notMerge: false, lazyUpdate: true };
+var isComponentType = (mainType) => echarts2.ComponentModel.hasClass(mainType);
+function applyOption(chart, prev, next) {
+  chart.setOption(next, {
+    replaceMerge: (0, import_charts_core2.getReplaceMerge)(prev, next, isComponentType),
+    lazyUpdate: true
+  });
+}
 function useChart({
   option,
   theme = "auto",
@@ -362,6 +374,7 @@ function useChart({
   onReady
 }) {
   const containerRef = (0, import_react4.useRef)(null);
+  const container = useRefElement(containerRef);
   const chartRef = (0, import_react4.useRef)(null);
   const currentTheme = useChartTheme(theme);
   const reducedMotion = useReducedMotion();
@@ -370,13 +383,16 @@ function useChart({
   const optionRef = (0, import_react4.useRef)(option);
   optionRef.current = {
     ...option,
-    animation: animation ?? !reducedMotion
+    // Reduced motion always wins over the animation prop
+    animation: (animation ?? true) && !reducedMotion
   };
+  const appliedRef = (0, import_react4.useRef)(null);
   (0, import_react4.useEffect)(() => {
-    if (!containerRef.current) return;
-    const chart = echarts2.init(containerRef.current, currentTheme);
+    if (!container) return;
+    const chart = echarts2.init(container, currentTheme);
     chartRef.current = chart;
-    chart.setOption(optionRef.current, SET_OPTION_OPTS);
+    applyOption(chart, null, optionRef.current);
+    appliedRef.current = optionRef.current;
     onReadyRef.current?.(chart);
     return () => {
       chart.dispose();
@@ -384,11 +400,12 @@ function useChart({
         chartRef.current = null;
       }
     };
-  }, [currentTheme]);
+  }, [container, currentTheme]);
   (0, import_react4.useEffect)(() => {
     const chart = chartRef.current;
     if (!chart || chart.isDisposed()) return;
-    chart.setOption(optionRef.current, SET_OPTION_OPTS);
+    applyOption(chart, appliedRef.current, optionRef.current);
+    appliedRef.current = optionRef.current;
   }, [option, animation, reducedMotion]);
   useChartResize(chartRef, containerRef);
   return {
@@ -398,6 +415,14 @@ function useChart({
   };
 }
 
+// src/hooks/useLatestRef.ts
+var import_react5 = require("react");
+function useLatestRef(value) {
+  const ref = (0, import_react5.useRef)(value);
+  ref.current = value;
+  return ref;
+}
+
 // src/components/core/LineChart.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 echarts3.use([
@@ -432,6 +457,8 @@ var LineChart = React5.forwardRef(
     ...props
   }, ref) => {
     const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
+    const currentTheme = useChartTheme(theme);
+    const chartColors = (0, import_charts_core3.getChartColors)(currentTheme);
     const option = React5.useMemo(() => {
       if (isEmpty) return {};
       return {
@@ -446,7 +473,7 @@ var LineChart = React5.forwardRef(
           axisPointer: {
             type: "cross",
             label: {
-              backgroundColor: "#6a7985"
+              backgroundColor: chartColors.axisPointerLabel
             }
           }
         } : void 0,
@@ -492,44 +519,46 @@ var LineChart = React5.forwardRef(
       smooth,
       areaFilled,
       showDataPoints,
-      stacked
+      stacked,
+      chartColors
     ]);
+    const latest = useLatestRef({ onClick, onHover });
     const { containerRef } = useChart({
       option,
-      theme,
+      theme: currentTheme === import_charts_core3.THEME_DARK ? "dark" : "light",
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              seriesIndex: params.seriesIndex,
-              seriesName: params.seriesName || "",
-              dataIndex: params.dataIndex || 0,
-              name: params.name || "",
-              value: params.value,
-              color: params.color
-            });
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || "",
+            dataIndex: params.dataIndex || 0,
+            name: params.name || "",
+            value: params.value,
+            color: params.color
           });
-        }
-        if (onHover) {
-          chart.on("mouseover", (params) => {
-            onHover({
-              type: params.type || "mouseover",
-              componentType: params.componentType || "series",
-              seriesIndex: params.seriesIndex,
-              seriesName: params.seriesName || "",
-              dataIndex: params.dataIndex || 0,
-              name: params.name || "",
-              value: params.value,
-              color: params.color
-            });
+        });
+        chart.on("mouseover", (params) => {
+          const { onHover: onHover2 } = latest.current;
+          if (!onHover2) return;
+          onHover2({
+            type: params.type || "mouseover",
+            componentType: params.componentType || "series",
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || "",
+            dataIndex: params.dataIndex || 0,
+            name: params.name || "",
+            value: params.value,
+            color: params.color
           });
-        }
+        });
       }
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core2.generateLineChartDescription)(title, data) : void 0);
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core3.generateLineChartDescription)(title, data) : void 0);
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       ChartContainer,
       {
@@ -556,7 +585,7 @@ var echarts4 = __toESM(require("echarts/core"), 1);
 var import_charts2 = require("echarts/charts");
 var import_components2 = require("echarts/components");
 var import_renderers2 = require("echarts/renderers");
-var import_charts_core3 = require("@classic-homes/charts-core");
+var import_charts_core4 = require("@classic-homes/charts-core");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 echarts4.use([
   import_charts2.BarChart,
@@ -639,28 +668,29 @@ var BarChart = React6.forwardRef(
         }))
       };
     }, [data, isEmpty, showTooltip, showLegend, showGrid, isHorizontal, stacked, showValues]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
       theme,
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              seriesIndex: params.seriesIndex,
-              seriesName: params.seriesName || "",
-              dataIndex: params.dataIndex || 0,
-              name: params.name || "",
-              value: params.value,
-              color: params.color
-            });
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || "",
+            dataIndex: params.dataIndex || 0,
+            name: params.name || "",
+            value: params.value,
+            color: params.color
           });
-        }
+        });
       }
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core3.generateBarChartDescription)(title, data) : void 0);
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core4.generateBarChartDescription)(title, data) : void 0);
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       ChartContainer,
       {
@@ -687,7 +717,7 @@ var echarts5 = __toESM(require("echarts/core"), 1);
 var import_charts3 = require("echarts/charts");
 var import_components3 = require("echarts/components");
 var import_renderers3 = require("echarts/renderers");
-var import_charts_core4 = require("@classic-homes/charts-core");
+var import_charts_core5 = require("@classic-homes/charts-core");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 echarts5.use([import_charts3.PieChart, import_components3.TooltipComponent, import_components3.LegendComponent, import_components3.TitleComponent, import_renderers3.CanvasRenderer]);
 var PieChart = React7.forwardRef(
@@ -727,7 +757,7 @@ var PieChart = React7.forwardRef(
           {
             name: title,
             type: "pie",
-            radius: innerRadius === 0 ? "70%" : ["50%", "70%"],
+            radius: innerRadius ? [innerRadius, "70%"] : "70%",
             center: ["50%", "45%"],
             data: data.map((item) => ({
               name: item.name,
@@ -752,26 +782,27 @@ var PieChart = React7.forwardRef(
         ]
       };
     }, [data, isEmpty, showTooltip, showLegend, showLabels, labelPosition, innerRadius, title]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
       theme,
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              name: params.name || "",
-              value: params.value,
-              percent: params.percent,
-              color: params.color
-            });
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            name: params.name || "",
+            value: params.value,
+            percent: params.percent,
+            color: params.color
           });
-        }
+        });
       }
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core4.generatePieChartDescription)(title, data, false) : void 0);
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core5.generatePieChartDescription)(title, data, false) : void 0);
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ChartContainer,
       {
@@ -798,6 +829,7 @@ var echarts6 = __toESM(require("echarts/core"), 1);
 var import_charts4 = require("echarts/charts");
 var import_components4 = require("echarts/components");
 var import_renderers4 = require("echarts/renderers");
+var import_charts_core6 = require("@classic-homes/charts-core");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 echarts6.use([
   import_charts4.LineChart,
@@ -829,6 +861,8 @@ var AreaChart = React8.forwardRef(
     ...props
   }, ref) => {
     const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
+    const currentTheme = useChartTheme(theme);
+    const chartColors = (0, import_charts_core6.getChartColors)(currentTheme);
     const option = React8.useMemo(() => {
       if (isEmpty) return {};
       return {
@@ -843,7 +877,7 @@ var AreaChart = React8.forwardRef(
           axisPointer: {
             type: "cross",
             label: {
-              backgroundColor: "#6a7985"
+              backgroundColor: chartColors.axisPointerLabel
             }
           }
         } : void 0,
@@ -862,52 +896,50 @@ var AreaChart = React8.forwardRef(
             show: showGrid
           }
         },
-        series: data.series.map((series, index) => ({
-          name: series.name,
-          type: "line",
-          data: series.data,
-          smooth,
-          stack: stacked ? "Total" : void 0,
-          areaStyle: gradient ? {
-            opacity: 0.8,
-            color: new echarts6.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 0,
-                color: series.color || `rgba(${60 + index * 40}, ${160 - index * 20}, ${180 - index * 30}, 0.8)`
-              },
-              {
-                offset: 1,
-                color: series.color || `rgba(${60 + index * 40}, ${160 - index * 20}, ${180 - index * 30}, 0.1)`
-              }
-            ])
-          } : { opacity: 0.5 },
-          itemStyle: series.color ? { color: series.color } : void 0,
-          emphasis: {
-            focus: "series"
-          },
-          showSymbol: false
-        }))
+        series: data.series.map((series, index) => {
+          const base = series.color || chartColors.series[index % chartColors.series.length];
+          return {
+            name: series.name,
+            type: "line",
+            data: series.data,
+            smooth,
+            stack: stacked ? "Total" : void 0,
+            areaStyle: gradient ? {
+              opacity: 0.8,
+              color: new echarts6.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: (0, import_charts_core6.colorWithAlpha)(base, 0.8) },
+                { offset: 1, color: (0, import_charts_core6.colorWithAlpha)(base, 0.1) }
+              ])
+            } : { opacity: 0.5 },
+            itemStyle: series.color ? { color: series.color } : void 0,
+            emphasis: {
+              focus: "series"
+            },
+            showSymbol: false
+          };
+        })
       };
-    }, [data, isEmpty, showTooltip, showLegend, showGrid, smooth, stacked, gradient]);
+    }, [data, isEmpty, showTooltip, showLegend, showGrid, smooth, stacked, gradient, chartColors]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
-      theme,
+      theme: currentTheme === import_charts_core6.THEME_DARK ? "dark" : "light",
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              seriesIndex: params.seriesIndex,
-              seriesName: params.seriesName || "",
-              dataIndex: params.dataIndex || 0,
-              name: params.name || "",
-              value: params.value,
-              color: params.color
-            });
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || "",
+            dataIndex: params.dataIndex || 0,
+            name: params.name || "",
+            value: params.value,
+            color: params.color
           });
-        }
+        });
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Area chart with ${data.categories.length} data points across ${data.series.length} series.` : void 0);
@@ -937,10 +969,12 @@ var echarts7 = __toESM(require("echarts/core"), 1);
 var import_charts5 = require("echarts/charts");
 var import_components5 = require("echarts/components");
 var import_renderers5 = require("echarts/renderers");
-var import_charts_core5 = require("@classic-homes/charts-core");
+var import_charts_core7 = require("@classic-homes/charts-core");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 echarts7.use([
   import_charts5.ScatterChart,
+  // Trend lines are line series
+  import_charts5.LineChart,
   import_components5.GridComponent,
   import_components5.TooltipComponent,
   import_components5.LegendComponent,
@@ -997,9 +1031,12 @@ var ScatterChart = React9.forwardRef(
           });
           const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX);
           const intercept = (sumY - slope * sumX) / n;
-          const xValues = s.data.map(([x]) => x);
-          const minX = Math.min(...xValues);
-          const maxX = Math.max(...xValues);
+          let minX = Infinity;
+          let maxX = -Infinity;
+          for (const [x] of s.data) {
+            if (x < minX) minX = x;
+            if (x > maxX) maxX = x;
+          }
           series.push({
             name: `${s.name} Trend`,
             type: "line",
@@ -1032,7 +1069,7 @@ var ScatterChart = React9.forwardRef(
           formatter: (params) => {
             const p = params;
             if (!p.value) return "";
-            return `${p.seriesName}<br/>X: ${p.value[0]}<br/>Y: ${p.value[1]}`;
+            return `${(0, import_charts_core7.escapeHtml)(p.seriesName)}<br/>X: ${(0, import_charts_core7.escapeHtml)(p.value[0])}<br/>Y: ${(0, import_charts_core7.escapeHtml)(p.value[1])}`;
           }
         } : void 0,
         legend: showLegend ? {
@@ -1054,28 +1091,29 @@ var ScatterChart = React9.forwardRef(
         series
       };
     }, [data, isEmpty, showTooltip, showLegend, showGrid, showTrendLine, symbolSize]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
       theme,
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              seriesIndex: params.seriesIndex,
-              seriesName: params.seriesName || "",
-              dataIndex: params.dataIndex || 0,
-              name: params.name || "",
-              value: params.value,
-              color: params.color
-            });
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || "",
+            dataIndex: params.dataIndex || 0,
+            name: params.name || "",
+            value: params.value,
+            color: params.color
           });
-        }
+        });
       }
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core5.generateScatterChartDescription)(title, data) : void 0);
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core7.generateScatterChartDescription)(title, data) : void 0);
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ChartContainer,
       {
@@ -1102,7 +1140,7 @@ var echarts8 = __toESM(require("echarts/core"), 1);
 var import_charts6 = require("echarts/charts");
 var import_components6 = require("echarts/components");
 var import_renderers6 = require("echarts/renderers");
-var import_charts_core6 = require("@classic-homes/charts-core");
+var import_charts_core8 = require("@classic-homes/charts-core");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 echarts8.use([import_charts6.PieChart, import_components6.TooltipComponent, import_components6.LegendComponent, import_components6.TitleComponent, import_renderers6.CanvasRenderer]);
 var DonutChart = React10.forwardRef(
@@ -1128,6 +1166,8 @@ var DonutChart = React10.forwardRef(
     ...props
   }, ref) => {
     const isEmpty = !data?.length;
+    const currentTheme = useChartTheme(theme);
+    const chartColors = (0, import_charts_core8.getChartColors)(currentTheme);
     const option = React10.useMemo(() => {
       if (isEmpty) return {};
       const graphicElements = [];
@@ -1144,7 +1184,7 @@ var DonutChart = React10.forwardRef(
                   text: String(centerValue),
                   fontSize: 28,
                   fontWeight: "bold",
-                  fill: "currentColor",
+                  fill: chartColors.foreground,
                   textAlign: "center"
                 },
                 top: 0,
@@ -1157,7 +1197,7 @@ var DonutChart = React10.forwardRef(
                 style: {
                   text: centerLabel,
                   fontSize: 14,
-                  fill: "#888",
+                  fill: chartColors.mutedForeground,
                   textAlign: "center"
                 },
                 top: centerValue !== void 0 ? 35 : 0,
@@ -1220,28 +1260,30 @@ var DonutChart = React10.forwardRef(
       innerRadius,
       centerLabel,
       centerValue,
-      title
+      title,
+      chartColors
     ]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
-      theme,
+      theme: currentTheme === import_charts_core8.THEME_DARK ? "dark" : "light",
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              name: params.name || "",
-              value: params.value,
-              percent: params.percent,
-              color: params.color
-            });
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            name: params.name || "",
+            value: params.value,
+            percent: params.percent,
+            color: params.color
           });
-        }
+        });
       }
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core6.generatePieChartDescription)(title, data, true) : void 0);
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core8.generatePieChartDescription)(title, data, true) : void 0);
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       ChartContainer,
       {
@@ -1410,7 +1452,8 @@ var FunnelChart = React12.forwardRef(
             bottom: 60,
             width: "80%",
             min: 0,
-            max: Math.max(...data.map((d) => d.value)),
+            // reduce, not Math.max(...): spreading large arrays overflows the stack
+            max: data.reduce((m, d) => d.value > m ? d.value : m, -Infinity),
             minSize: "0%",
             maxSize: "100%",
             sort,
@@ -1440,22 +1483,23 @@ var FunnelChart = React12.forwardRef(
         ]
       };
     }, [data, isEmpty, showTooltip, showLegend, sort, orientation, showLabels, title]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
       theme,
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              name: params.name || "",
-              value: params.value,
-              color: params.color
-            });
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            name: params.name || "",
+            value: params.value,
+            color: params.color
           });
-        }
+        });
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Funnel chart with ${data.length} stages.` : void 0);
@@ -1485,6 +1529,7 @@ var echarts11 = __toESM(require("echarts/core"), 1);
 var import_charts9 = require("echarts/charts");
 var import_components9 = require("echarts/components");
 var import_renderers9 = require("echarts/renderers");
+var import_charts_core9 = require("@classic-homes/charts-core");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 echarts11.use([import_charts9.GaugeChart, import_components9.TitleComponent, import_renderers9.CanvasRenderer]);
 var GaugeChart = React13.forwardRef(
@@ -1506,6 +1551,9 @@ var GaugeChart = React13.forwardRef(
     class: className,
     ...props
   }, ref) => {
+    const currentTheme = useChartTheme(theme);
+    const chartColors = (0, import_charts_core9.getChartColors)(currentTheme);
+    const reducedMotion = useReducedMotion();
     const option = React13.useMemo(() => {
       return {
         series: [
@@ -1530,7 +1578,7 @@ var GaugeChart = React13.forwardRef(
               splitNumber: 5,
               lineStyle: {
                 width: 2,
-                color: "#999"
+                color: chartColors.mutedForeground
               }
             },
             splitLine: {
@@ -1538,12 +1586,12 @@ var GaugeChart = React13.forwardRef(
               length: 10,
               lineStyle: {
                 width: 3,
-                color: "#999"
+                color: chartColors.mutedForeground
               }
             },
             axisLabel: {
               distance: -20,
-              color: "#999",
+              color: chartColors.mutedForeground,
               fontSize: 12
             },
             anchor: {
@@ -1563,7 +1611,7 @@ var GaugeChart = React13.forwardRef(
               fontSize: 14
             },
             detail: {
-              valueAnimation: animation,
+              valueAnimation: animation && !reducedMotion,
               fontSize: 28,
               fontWeight: "bold",
               offsetCenter: [0, "40%"],
@@ -1578,10 +1626,21 @@ var GaugeChart = React13.forwardRef(
           }
         ]
       };
-    }, [value, min, max, splitNumber, showProgress, formatValue, title, animation]);
+    }, [
+      value,
+      min,
+      max,
+      splitNumber,
+      showProgress,
+      formatValue,
+      title,
+      animation,
+      reducedMotion,
+      chartColors
+    ]);
     const { containerRef } = useChart({
       option,
-      theme,
+      theme: currentTheme === import_charts_core9.THEME_DARK ? "dark" : "light",
       animation
     });
     const accessibilityDescription = description || `${title}. Gauge showing value ${value} on scale from ${min} to ${max}.`;
@@ -1610,6 +1669,7 @@ var echarts12 = __toESM(require("echarts/core"), 1);
 var import_charts10 = require("echarts/charts");
 var import_components10 = require("echarts/components");
 var import_renderers10 = require("echarts/renderers");
+var import_charts_core10 = require("@classic-homes/charts-core");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 echarts12.use([
   import_charts10.HeatmapChart,
@@ -1639,9 +1699,14 @@ var HeatmapChart = React14.forwardRef(
     ...props
   }, ref) => {
     const isEmpty = !data?.data?.length || !xAxis?.length || !yAxis?.length;
-    const values = data?.data?.map(([, , value]) => value) || [];
-    const minValue = data?.min ?? Math.min(...values);
-    const maxValue = data?.max ?? Math.max(...values);
+    let dataMin = Infinity;
+    let dataMax = -Infinity;
+    for (const [, , value] of data?.data ?? []) {
+      if (value < dataMin) dataMin = value;
+      if (value > dataMax) dataMax = value;
+    }
+    const minValue = data?.min ?? dataMin;
+    const maxValue = data?.max ?? dataMax;
     const option = React14.useMemo(() => {
       if (isEmpty) return {};
       return {
@@ -1651,7 +1716,7 @@ var HeatmapChart = React14.forwardRef(
             const p = params;
             if (!p.value) return "";
             const [xIdx, yIdx, value] = p.value;
-            return `${xAxis[xIdx]} / ${yAxis[yIdx]}: ${value}`;
+            return `${(0, import_charts_core10.escapeHtml)(xAxis[xIdx])} / ${(0, import_charts_core10.escapeHtml)(yAxis[yIdx])}: ${(0, import_charts_core10.escapeHtml)(value)}`;
           }
         } : void 0,
         grid: {
@@ -1700,25 +1765,26 @@ var HeatmapChart = React14.forwardRef(
         ]
       };
     }, [data, xAxis, yAxis, isEmpty, showTooltip, showValues, minValue, maxValue, title]);
+    const latest = useLatestRef({ onClick, xAxis, yAxis });
     const { containerRef } = useChart({
       option,
       theme,
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            const [xIdx, yIdx, value] = params.value || [0, 0, 0];
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              xIndex: xIdx,
-              yIndex: yIdx,
-              xLabel: xAxis[xIdx],
-              yLabel: yAxis[yIdx],
-              value
-            });
+        chart.on("click", (params) => {
+          const { onClick: onClick2, xAxis: xAxis2, yAxis: yAxis2 } = latest.current;
+          if (!onClick2) return;
+          const [xIdx, yIdx, value] = params.value || [0, 0, 0];
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            xIndex: xIdx,
+            yIndex: yIdx,
+            xLabel: xAxis2[xIdx],
+            yLabel: yAxis2[yIdx],
+            value
           });
-        }
+        });
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Heatmap with ${xAxis.length} columns and ${yAxis.length} rows.` : void 0);
@@ -1748,6 +1814,7 @@ var echarts13 = __toESM(require("echarts/core"), 1);
 var import_charts11 = require("echarts/charts");
 var import_components11 = require("echarts/components");
 var import_renderers11 = require("echarts/renderers");
+var import_charts_core11 = require("@classic-homes/charts-core");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 echarts13.use([import_charts11.TreemapChart, import_components11.TooltipComponent, import_components11.TitleComponent, import_renderers11.CanvasRenderer]);
 var TreemapChart = React15.forwardRef(
@@ -1768,13 +1835,15 @@ var TreemapChart = React15.forwardRef(
     ...props
   }, ref) => {
     const isEmpty = !data?.length;
+    const currentTheme = useChartTheme(theme);
+    const chartColors = (0, import_charts_core11.getChartColors)(currentTheme);
     const option = React15.useMemo(() => {
       if (isEmpty) return {};
       return {
         tooltip: showTooltip ? {
           formatter: (params) => {
             const p = params;
-            return `${p.name}: ${p.value}`;
+            return `${(0, import_charts_core11.escapeHtml)(p.name)}: ${(0, import_charts_core11.escapeHtml)(p.value)}`;
           }
         } : void 0,
         series: [
@@ -1785,7 +1854,7 @@ var TreemapChart = React15.forwardRef(
             levels: levels || [
               {
                 itemStyle: {
-                  borderColor: "#555",
+                  borderColor: chartColors.divider,
                   borderWidth: 4,
                   gapWidth: 4
                 }
@@ -1823,25 +1892,26 @@ var TreemapChart = React15.forwardRef(
           }
         ]
       };
-    }, [data, levels, isEmpty, showTooltip]);
+    }, [data, levels, isEmpty, showTooltip, chartColors]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
-      theme,
+      theme: currentTheme === import_charts_core11.THEME_DARK ? "dark" : "light",
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            const treePathInfo = params.treePathInfo || [];
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              name: params.name || "",
-              value: params.value,
-              path: treePathInfo.map((item) => item.name || ""),
-              depth: treePathInfo.length - 1
-            });
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          const treePathInfo = params.treePathInfo || [];
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            name: params.name || "",
+            value: params.value,
+            path: treePathInfo.map((item) => item.name || ""),
+            depth: treePathInfo.length - 1
           });
-        }
+        });
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Treemap chart showing hierarchical data.` : void 0);
@@ -1871,6 +1941,7 @@ var echarts14 = __toESM(require("echarts/core"), 1);
 var import_charts12 = require("echarts/charts");
 var import_components12 = require("echarts/components");
 var import_renderers12 = require("echarts/renderers");
+var import_charts_core12 = require("@classic-homes/charts-core");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 echarts14.use([
   import_charts12.CandlestickChart,
@@ -1899,6 +1970,8 @@ var CandlestickChart = React16.forwardRef(
     ...props
   }, ref) => {
     const isEmpty = !data?.dates?.length || !data?.data?.length;
+    const currentTheme = useChartTheme(theme);
+    const chartColors = (0, import_charts_core12.getChartColors)(currentTheme);
     const option = React16.useMemo(() => {
       if (isEmpty) return {};
       const candlestickData = data.data.map((item) => [item.open, item.close, item.low, item.high]);
@@ -1908,12 +1981,12 @@ var CandlestickChart = React16.forwardRef(
           type: "candlestick",
           data: candlestickData,
           itemStyle: {
-            color: "#ef4444",
+            color: chartColors.destructive,
             // Up color (red for bearish in some markets)
-            color0: "#22c55e",
+            color0: chartColors.success,
             // Down color (green for bullish)
-            borderColor: "#ef4444",
-            borderColor0: "#22c55e"
+            borderColor: chartColors.destructive,
+            borderColor0: chartColors.success
           }
         }
       ];
@@ -1979,7 +2052,7 @@ var CandlestickChart = React16.forwardRef(
           yAxisIndex: 1,
           data: data.volume,
           itemStyle: {
-            color: "#6b7280"
+            color: chartColors.mutedForeground
           }
         });
       }
@@ -2009,28 +2082,30 @@ var CandlestickChart = React16.forwardRef(
         ],
         series: seriesArr
       };
-    }, [data, isEmpty, showTooltip, showVolume, title]);
+    }, [data, isEmpty, showTooltip, showVolume, title, chartColors]);
+    const latest = useLatestRef({ onClick, data });
     const { containerRef } = useChart({
       option,
-      theme,
+      theme: currentTheme === import_charts_core12.THEME_DARK ? "dark" : "light",
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            const dataIndex = params.dataIndex || 0;
-            const item = data.data[dataIndex];
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              date: data.dates[dataIndex],
-              open: item.open,
-              close: item.close,
-              high: item.high,
-              low: item.low,
-              volume: data.volume?.[dataIndex]
-            });
+        chart.on("click", (params) => {
+          const { onClick: onClick2, data: data2 } = latest.current;
+          if (!onClick2) return;
+          const dataIndex = params.dataIndex || 0;
+          const item = data2.data[dataIndex];
+          if (!item) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            date: data2.dates[dataIndex],
+            open: item.open,
+            close: item.close,
+            high: item.high,
+            low: item.low,
+            volume: data2.volume?.[dataIndex]
           });
-        }
+        });
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Candlestick chart with ${data.dates.length} data points.` : void 0);
@@ -2114,25 +2189,26 @@ var SankeyChart = React17.forwardRef(
         ]
       };
     }, [data, isEmpty, showTooltip, orient]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
       theme,
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            const isEdge = params.dataType === "edge";
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              dataType: isEdge ? "edge" : "node",
-              name: params.name || "",
-              value: isEdge ? params.value : void 0,
-              source: isEdge ? params.data?.source : void 0,
-              target: isEdge ? params.data?.target : void 0
-            });
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          const isEdge = params.dataType === "edge";
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            dataType: isEdge ? "edge" : "node",
+            name: params.name || "",
+            value: isEdge ? params.value : void 0,
+            source: isEdge ? params.data?.source : void 0,
+            target: isEdge ? params.data?.target : void 0
           });
-        }
+        });
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Sankey diagram with ${data.nodes.length} nodes and ${data.links.length} links.` : void 0);