@classic-homes/charts-react 0.1.36 → 0.1.38

package/dist/index.js

@@ -77,10 +77,11 @@ var ChartError = React2.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ jsx2("p", { className: "mb-2 text-sm font-medium text-destructive", children: message }),
+          /* @__PURE__ */ jsx2("p", { className: "mb-2 text-sm font-medium text-foreground", children: message }),
           onRetry && /* @__PURE__ */ jsx2(
             "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"
@@ -156,6 +157,7 @@ var ChartContainer = React4.forwardRef(
     ...props
   }, ref) => {
     const heightStyle = typeof height === "number" ? `${height}px` : height;
+    const descriptionId = `${React4.useId()}-desc`;
     if (loading) {
       return /* @__PURE__ */ jsx4(ChartSkeleton, { height, className: wrapperClassName });
     }
@@ -179,12 +181,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__ */ jsx4("span", { id: `${title}-desc`, className: "sr-only", children: description }),
+          description && /* @__PURE__ */ jsx4("span", { id: descriptionId, className: "sr-only", children: description }),
           /* @__PURE__ */ jsx4("div", { className: cn("h-full w-full", className), style: { height: heightStyle }, children })
         ]
       }
@@ -204,14 +206,19 @@ import {
   TitleComponent
 } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
-import { generateLineChartDescription } from "@classic-homes/charts-core";
+import {
+  generateLineChartDescription,
+  getChartColors,
+  THEME_DARK as THEME_DARK2
+} from "@classic-homes/charts-core";
 
 // src/hooks/useChart.ts
-import { useEffect as useEffect4, useRef as useRef2 } from "react";
+import { useEffect as useEffect4, useRef } from "react";
 import * as echarts2 from "echarts/core";
+import { getReplaceMerge } from "@classic-homes/charts-core";
 
 // src/hooks/useChartTheme.ts
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState } from "react";
 import * as echarts from "echarts/core";
 import { lightTheme, darkTheme, THEME_LIGHT, THEME_DARK } from "@classic-homes/charts-core";
 var themesRegistered = false;
@@ -221,18 +228,18 @@ function registerClassicThemes() {
   echarts.registerTheme(THEME_DARK, darkTheme);
   themesRegistered = true;
 }
+function resolveTheme(preference) {
+  if (preference !== "auto") {
+    return preference === "dark" ? THEME_DARK : THEME_LIGHT;
+  }
+  if (typeof document === "undefined") return THEME_LIGHT;
+  return document.documentElement.classList.contains("dark") ? THEME_DARK : THEME_LIGHT;
+}
 function useChartTheme(preference = "auto") {
-  const [currentTheme, setCurrentTheme] = useState(THEME_LIGHT);
-  const updateTheme = useCallback(() => {
-    if (preference !== "auto") {
-      setCurrentTheme(preference === "dark" ? THEME_DARK : THEME_LIGHT);
-      return;
-    }
-    const isDark = document.documentElement.classList.contains("dark");
-    setCurrentTheme(isDark ? THEME_DARK : THEME_LIGHT);
-  }, [preference]);
+  const [currentTheme, setCurrentTheme] = useState(() => resolveTheme(preference));
   useEffect(() => {
     registerClassicThemes();
+    const updateTheme = () => setCurrentTheme(resolveTheme(preference));
     updateTheme();
     if (preference !== "auto") return;
     const observer = new MutationObserver((mutations) => {
@@ -246,44 +253,49 @@ 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
-import { useEffect as useEffect2, useRef } from "react";
+import { useEffect as useEffect2, useLayoutEffect, useState as useState2 } from "react";
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect2 : useLayoutEffect;
+function useRefElement(ref) {
+  const [element, setElement] = useState2(null);
+  useIsomorphicLayoutEffect(() => {
+    setElement(ref.current);
+  });
+  return element;
+}
 function useChartResize(chartRef, containerRef) {
-  const resizeObserverRef = useRef(null);
+  const container = useRefElement(containerRef);
   useEffect2(() => {
-    const container = containerRef.current;
-    const chart = chartRef.current;
-    if (!container || !chart) return;
+    if (!container) return;
     let resizeTimeout;
-    resizeObserverRef.current = new ResizeObserver(() => {
+    const observer = new ResizeObserver(() => {
       clearTimeout(resizeTimeout);
       resizeTimeout = setTimeout(() => {
-        chart.resize();
+        const chart = chartRef.current;
+        if (chart && !chart.isDisposed()) {
+          chart.resize();
+        }
       }, 100);
     });
-    resizeObserverRef.current.observe(container);
+    observer.observe(container);
     return () => {
       clearTimeout(resizeTimeout);
-      resizeObserverRef.current?.disconnect();
+      observer.disconnect();
     };
-  }, [chartRef, containerRef]);
+  }, [chartRef, container]);
 }
 
 // src/hooks/useReducedMotion.ts
-import { useState as useState2, useEffect as useEffect3 } from "react";
+import { useState as useState3, useEffect as useEffect3 } from "react";
 function useReducedMotion() {
-  const [reducedMotion, setReducedMotion] = useState2(false);
+  const [reducedMotion, setReducedMotion] = useState3(false);
   useEffect3(() => {
     const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
     setReducedMotion(mediaQuery.matches);
@@ -299,51 +311,53 @@ function useReducedMotion() {
 }
 
 // src/hooks/useChart.ts
+var isComponentType = (mainType) => echarts2.ComponentModel.hasClass(mainType);
+function applyOption(chart, prev, next) {
+  chart.setOption(next, {
+    replaceMerge: getReplaceMerge(prev, next, isComponentType),
+    lazyUpdate: true
+  });
+}
 function useChart({
   option,
   theme = "auto",
   animation,
   onReady
 }) {
-  const containerRef = useRef2(null);
-  const chartRef = useRef2(null);
+  const containerRef = useRef(null);
+  const container = useRefElement(containerRef);
+  const chartRef = useRef(null);
   const currentTheme = useChartTheme(theme);
   const reducedMotion = useReducedMotion();
-  const onReadyRef = useRef2(onReady);
+  const onReadyRef = useRef(onReady);
   onReadyRef.current = onReady;
+  const optionRef = useRef(option);
+  optionRef.current = {
+    ...option,
+    // Reduced motion always wins over the animation prop
+    animation: (animation ?? true) && !reducedMotion
+  };
+  const appliedRef = useRef(null);
   useEffect4(() => {
-    if (!containerRef.current) return;
-    if (chartRef.current) {
-      chartRef.current.dispose();
-    }
-    chartRef.current = echarts2.init(containerRef.current, currentTheme);
-    if (onReadyRef.current && chartRef.current) {
-      onReadyRef.current(chartRef.current);
-    }
+    if (!container) return;
+    const chart = echarts2.init(container, currentTheme);
+    chartRef.current = chart;
+    applyOption(chart, null, optionRef.current);
+    appliedRef.current = optionRef.current;
+    onReadyRef.current?.(chart);
     return () => {
-      chartRef.current?.dispose();
-      chartRef.current = null;
+      chart.dispose();
+      if (chartRef.current === chart) {
+        chartRef.current = null;
+      }
     };
-  }, [currentTheme]);
+  }, [container, currentTheme]);
   useEffect4(() => {
-    if (!chartRef.current) return;
-    const shouldAnimate = animation ?? !reducedMotion;
-    const optionWithAnimation = {
-      ...option,
-      animation: shouldAnimate
-    };
-    chartRef.current.setOption(optionWithAnimation, {
-      notMerge: false,
-      lazyUpdate: true
-    });
+    const chart = chartRef.current;
+    if (!chart || chart.isDisposed()) return;
+    applyOption(chart, appliedRef.current, optionRef.current);
+    appliedRef.current = optionRef.current;
   }, [option, animation, reducedMotion]);
-  useEffect4(() => {
-    if (!chartRef.current || !containerRef.current) return;
-    const currentOption = chartRef.current.getOption();
-    chartRef.current.dispose();
-    chartRef.current = echarts2.init(containerRef.current, currentTheme);
-    chartRef.current.setOption(currentOption);
-  }, [currentTheme]);
   useChartResize(chartRef, containerRef);
   return {
     chartRef,
@@ -352,6 +366,14 @@ function useChart({
   };
 }
 
+// src/hooks/useLatestRef.ts
+import { useRef as useRef2 } from "react";
+function useLatestRef(value) {
+  const ref = useRef2(value);
+  ref.current = value;
+  return ref;
+}
+
 // src/components/core/LineChart.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 echarts3.use([
@@ -386,6 +408,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 = getChartColors(currentTheme);
     const option = React5.useMemo(() => {
       if (isEmpty) return {};
       return {
@@ -400,7 +424,7 @@ var LineChart = React5.forwardRef(
           axisPointer: {
             type: "cross",
             label: {
-              backgroundColor: "#6a7985"
+              backgroundColor: chartColors.axisPointerLabel
             }
           }
         } : void 0,
@@ -446,41 +470,43 @@ var LineChart = React5.forwardRef(
       smooth,
       areaFilled,
       showDataPoints,
-      stacked
+      stacked,
+      chartColors
     ]);
+    const latest = useLatestRef({ onClick, onHover });
     const { containerRef } = useChart({
       option,
-      theme,
+      theme: currentTheme === THEME_DARK2 ? "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 ? generateLineChartDescription(title, data) : void 0);
@@ -598,25 +624,26 @@ 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 ? generateBarChartDescription(title, data) : void 0);
@@ -686,7 +713,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,
@@ -711,23 +738,24 @@ 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 ? generatePieChartDescription(title, data, false) : void 0);
@@ -762,6 +790,7 @@ import {
   TitleComponent as TitleComponent4
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer4 } from "echarts/renderers";
+import { colorWithAlpha, getChartColors as getChartColors2, THEME_DARK as THEME_DARK3 } from "@classic-homes/charts-core";
 import { jsx as jsx8 } from "react/jsx-runtime";
 echarts6.use([
   EChartsLineChart2,
@@ -793,6 +822,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 = getChartColors2(currentTheme);
     const option = React8.useMemo(() => {
       if (isEmpty) return {};
       return {
@@ -807,7 +838,7 @@ var AreaChart = React8.forwardRef(
           axisPointer: {
             type: "cross",
             label: {
-              backgroundColor: "#6a7985"
+              backgroundColor: chartColors.axisPointerLabel
             }
           }
         } : void 0,
@@ -826,52 +857,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: colorWithAlpha(base, 0.8) },
+                { offset: 1, color: 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 === THEME_DARK3 ? "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);
@@ -898,7 +927,7 @@ AreaChart.displayName = "AreaChart";
 // src/components/core/ScatterChart.tsx
 import * as React9 from "react";
 import * as echarts7 from "echarts/core";
-import { ScatterChart as EChartsScatterChart } from "echarts/charts";
+import { ScatterChart as EChartsScatterChart, LineChart as EChartsLineChart3 } from "echarts/charts";
 import {
   GridComponent as GridComponent4,
   TooltipComponent as TooltipComponent5,
@@ -906,10 +935,12 @@ import {
   TitleComponent as TitleComponent5
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer5 } from "echarts/renderers";
-import { generateScatterChartDescription } from "@classic-homes/charts-core";
+import { escapeHtml, generateScatterChartDescription } from "@classic-homes/charts-core";
 import { jsx as jsx9 } from "react/jsx-runtime";
 echarts7.use([
   EChartsScatterChart,
+  // Trend lines are line series
+  EChartsLineChart3,
   GridComponent4,
   TooltipComponent5,
   LegendComponent5,
@@ -966,9 +997,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",
@@ -1001,7 +1035,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 `${escapeHtml(p.seriesName)}<br/>X: ${escapeHtml(p.value[0])}<br/>Y: ${escapeHtml(p.value[1])}`;
           }
         } : void 0,
         legend: showLegend ? {
@@ -1023,25 +1057,26 @@ 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 ? generateScatterChartDescription(title, data) : void 0);
@@ -1071,7 +1106,11 @@ import * as echarts8 from "echarts/core";
 import { PieChart as EChartsPieChart2 } from "echarts/charts";
 import { TooltipComponent as TooltipComponent6, LegendComponent as LegendComponent6, TitleComponent as TitleComponent6 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer6 } from "echarts/renderers";
-import { generatePieChartDescription as generatePieChartDescription2 } from "@classic-homes/charts-core";
+import {
+  generatePieChartDescription as generatePieChartDescription2,
+  getChartColors as getChartColors3,
+  THEME_DARK as THEME_DARK4
+} from "@classic-homes/charts-core";
 import { jsx as jsx10 } from "react/jsx-runtime";
 echarts8.use([EChartsPieChart2, TooltipComponent6, LegendComponent6, TitleComponent6, CanvasRenderer6]);
 var DonutChart = React10.forwardRef(
@@ -1097,6 +1136,8 @@ var DonutChart = React10.forwardRef(
     ...props
   }, ref) => {
     const isEmpty = !data?.length;
+    const currentTheme = useChartTheme(theme);
+    const chartColors = getChartColors3(currentTheme);
     const option = React10.useMemo(() => {
       if (isEmpty) return {};
       const graphicElements = [];
@@ -1113,7 +1154,7 @@ var DonutChart = React10.forwardRef(
                   text: String(centerValue),
                   fontSize: 28,
                   fontWeight: "bold",
-                  fill: "currentColor",
+                  fill: chartColors.foreground,
                   textAlign: "center"
                 },
                 top: 0,
@@ -1126,7 +1167,7 @@ var DonutChart = React10.forwardRef(
                 style: {
                   text: centerLabel,
                   fontSize: 14,
-                  fill: "#888",
+                  fill: chartColors.mutedForeground,
                   textAlign: "center"
                 },
                 top: centerValue !== void 0 ? 35 : 0,
@@ -1189,25 +1230,27 @@ var DonutChart = React10.forwardRef(
       innerRadius,
       centerLabel,
       centerValue,
-      title
+      title,
+      chartColors
     ]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
-      theme,
+      theme: currentTheme === THEME_DARK4 ? "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 ? generatePieChartDescription2(title, data, true) : void 0);
@@ -1384,7 +1427,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,
@@ -1414,22 +1458,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);
@@ -1459,6 +1504,7 @@ import * as echarts11 from "echarts/core";
 import { GaugeChart as EChartsGaugeChart } from "echarts/charts";
 import { TitleComponent as TitleComponent9 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer9 } from "echarts/renderers";
+import { getChartColors as getChartColors4, THEME_DARK as THEME_DARK5 } from "@classic-homes/charts-core";
 import { jsx as jsx13 } from "react/jsx-runtime";
 echarts11.use([EChartsGaugeChart, TitleComponent9, CanvasRenderer9]);
 var GaugeChart = React13.forwardRef(
@@ -1480,6 +1526,9 @@ var GaugeChart = React13.forwardRef(
     class: className,
     ...props
   }, ref) => {
+    const currentTheme = useChartTheme(theme);
+    const chartColors = getChartColors4(currentTheme);
+    const reducedMotion = useReducedMotion();
     const option = React13.useMemo(() => {
       return {
         series: [
@@ -1504,7 +1553,7 @@ var GaugeChart = React13.forwardRef(
               splitNumber: 5,
               lineStyle: {
                 width: 2,
-                color: "#999"
+                color: chartColors.mutedForeground
               }
             },
             splitLine: {
@@ -1512,12 +1561,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: {
@@ -1537,7 +1586,7 @@ var GaugeChart = React13.forwardRef(
               fontSize: 14
             },
             detail: {
-              valueAnimation: animation,
+              valueAnimation: animation && !reducedMotion,
               fontSize: 28,
               fontWeight: "bold",
               offsetCenter: [0, "40%"],
@@ -1552,10 +1601,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 === THEME_DARK5 ? "dark" : "light",
       animation
     });
     const accessibilityDescription = description || `${title}. Gauge showing value ${value} on scale from ${min} to ${max}.`;
@@ -1589,6 +1649,7 @@ import {
   VisualMapComponent
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer10 } from "echarts/renderers";
+import { escapeHtml as escapeHtml2 } from "@classic-homes/charts-core";
 import { jsx as jsx14 } from "react/jsx-runtime";
 echarts12.use([
   EChartsHeatmapChart,
@@ -1618,9 +1679,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 {
@@ -1630,7 +1696,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 `${escapeHtml2(xAxis[xIdx])} / ${escapeHtml2(yAxis[yIdx])}: ${escapeHtml2(value)}`;
           }
         } : void 0,
         grid: {
@@ -1679,25 +1745,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);
@@ -1727,6 +1794,7 @@ import * as echarts13 from "echarts/core";
 import { TreemapChart as EChartsTreemapChart } from "echarts/charts";
 import { TooltipComponent as TooltipComponent10, TitleComponent as TitleComponent11 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer11 } from "echarts/renderers";
+import { escapeHtml as escapeHtml3, getChartColors as getChartColors5, THEME_DARK as THEME_DARK6 } from "@classic-homes/charts-core";
 import { jsx as jsx15 } from "react/jsx-runtime";
 echarts13.use([EChartsTreemapChart, TooltipComponent10, TitleComponent11, CanvasRenderer11]);
 var TreemapChart = React15.forwardRef(
@@ -1747,13 +1815,15 @@ var TreemapChart = React15.forwardRef(
     ...props
   }, ref) => {
     const isEmpty = !data?.length;
+    const currentTheme = useChartTheme(theme);
+    const chartColors = getChartColors5(currentTheme);
     const option = React15.useMemo(() => {
       if (isEmpty) return {};
       return {
         tooltip: showTooltip ? {
           formatter: (params) => {
             const p = params;
-            return `${p.name}: ${p.value}`;
+            return `${escapeHtml3(p.name)}: ${escapeHtml3(p.value)}`;
           }
         } : void 0,
         series: [
@@ -1764,7 +1834,7 @@ var TreemapChart = React15.forwardRef(
             levels: levels || [
               {
                 itemStyle: {
-                  borderColor: "#555",
+                  borderColor: chartColors.divider,
                   borderWidth: 4,
                   gapWidth: 4
                 }
@@ -1802,25 +1872,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 === THEME_DARK6 ? "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);
@@ -1858,6 +1929,7 @@ import {
   DataZoomComponent
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer12 } from "echarts/renderers";
+import { getChartColors as getChartColors6, THEME_DARK as THEME_DARK7 } from "@classic-homes/charts-core";
 import { jsx as jsx16 } from "react/jsx-runtime";
 echarts14.use([
   EChartsCandlestickChart,
@@ -1886,6 +1958,8 @@ var CandlestickChart = React16.forwardRef(
     ...props
   }, ref) => {
     const isEmpty = !data?.dates?.length || !data?.data?.length;
+    const currentTheme = useChartTheme(theme);
+    const chartColors = getChartColors6(currentTheme);
     const option = React16.useMemo(() => {
       if (isEmpty) return {};
       const candlestickData = data.data.map((item) => [item.open, item.close, item.low, item.high]);
@@ -1895,12 +1969,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
           }
         }
       ];
@@ -1966,7 +2040,7 @@ var CandlestickChart = React16.forwardRef(
           yAxisIndex: 1,
           data: data.volume,
           itemStyle: {
-            color: "#6b7280"
+            color: chartColors.mutedForeground
           }
         });
       }
@@ -1996,28 +2070,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 === THEME_DARK7 ? "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);
@@ -2101,25 +2177,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);