@classic-homes/charts-react 0.1.37 → 0.2.0

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"
@@ -152,10 +153,13 @@ var ChartContainer = React4.forwardRef(
     onRetry,
     className,
     wrapperClassName,
+    legend,
+    legendPosition = "bottom",
     children,
     ...props
   }, ref) => {
     const heightStyle = typeof height === "number" ? `${height}px` : height;
+    const descriptionId = `${React4.useId()}-desc`;
     if (loading) {
       return /* @__PURE__ */ jsx4(ChartSkeleton, { height, className: wrapperClassName });
     }
@@ -173,28 +177,99 @@ var ChartContainer = React4.forwardRef(
     if (empty) {
       return /* @__PURE__ */ jsx4(ChartEmpty, { message: emptyMessage, height, className: wrapperClassName });
     }
-    return /* @__PURE__ */ jsxs4(
+    const chart = /* @__PURE__ */ jsxs4(
       "div",
       {
         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),
+        className: legend ? "min-h-0 min-w-0 flex-1" : 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 })
         ]
       }
     );
+    if (!legend) return chart;
+    const side = legendPosition === "left" || legendPosition === "right";
+    const leading = legendPosition === "top" || legendPosition === "left";
+    const legendNode = /* @__PURE__ */ jsx4(
+      "div",
+      {
+        "data-testid": "chart-legend",
+        className: cn("flex shrink-0 p-2", side ? "items-center" : "justify-center"),
+        children: legend
+      }
+    );
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: cn(
+          "flex rounded-lg border border-border bg-card",
+          side ? "flex-row" : "flex-col",
+          wrapperClassName
+        ),
+        children: [
+          leading && legendNode,
+          chart,
+          !leading && legendNode
+        ]
+      }
+    );
   }
 );
 ChartContainer.displayName = "ChartContainer";
 
-// src/components/core/LineChart.tsx
+// src/components/base/ChartLegend.tsx
 import * as React5 from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var ChartLegend = React5.forwardRef(
+  ({ items, toggle, position = "bottom", chartTitle, orientation, className }, ref) => {
+    const vertical = (orientation ?? (position === "left" || position === "right" ? "vertical" : "horizontal")) === "vertical";
+    return /* @__PURE__ */ jsx5(
+      "ul",
+      {
+        ref,
+        "aria-label": chartTitle ? `${chartTitle} legend` : "Chart legend",
+        className: cn(
+          "flex gap-1 text-sm",
+          vertical ? "flex-col" : "flex-wrap justify-center",
+          className
+        ),
+        children: items.map((item) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": item.visible,
+            onClick: () => toggle(item.name),
+            className: cn(
+              "inline-flex items-center gap-2 rounded-md px-2 py-1 text-left hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              item.visible ? "text-foreground" : "text-muted-foreground line-through"
+            ),
+            children: [
+              /* @__PURE__ */ jsx5(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "h-3 w-3 shrink-0 rounded-sm",
+                  style: { backgroundColor: item.color, opacity: item.visible ? 1 : 0.35 }
+                }
+              ),
+              item.name
+            ]
+          }
+        ) }, item.name))
+      }
+    );
+  }
+);
+ChartLegend.displayName = "ChartLegend";
+
+// src/components/core/LineChart.tsx
+import * as React6 from "react";
 import * as echarts3 from "echarts/core";
 import { LineChart as EChartsLineChart } from "echarts/charts";
 import {
@@ -204,14 +279,28 @@ import {
   TitleComponent
 } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
-import { generateLineChartDescription } from "@classic-homes/charts-core";
+import {
+  buildAxis,
+  buildDataLabel,
+  buildLegend,
+  buildTooltip,
+  generateLineChartDescription,
+  getChartColors,
+  hasPointLabels,
+  gridInset,
+  mergeChartOption,
+  seriesLabelLookup,
+  THEME_DARK as THEME_DARK2,
+  withPointLabels
+} 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 +310,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,26 +335,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
-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;
     if (!container) return;
     let resizeTimeout;
-    resizeObserverRef.current = new ResizeObserver(() => {
+    const observer = new ResizeObserver(() => {
       clearTimeout(resizeTimeout);
       resizeTimeout = setTimeout(() => {
         const chart = chartRef.current;
@@ -274,18 +366,18 @@ 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
-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);
@@ -301,29 +393,39 @@ 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: 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 = useRef2(option);
+  const optionRef = useRef(option);
   optionRef.current = {
     ...option,
-    animation: animation ?? !reducedMotion
+    // Reduced motion always wins over the animation prop
+    animation: (animation ?? true) && !reducedMotion
   };
+  const appliedRef = useRef(null);
   useEffect4(() => {
-    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();
@@ -331,11 +433,12 @@ function useChart({
         chartRef.current = null;
       }
     };
-  }, [currentTheme]);
+  }, [container, currentTheme]);
   useEffect4(() => {
     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 {
@@ -345,8 +448,76 @@ function useChart({
   };
 }
 
+// src/hooks/useChartLegend.ts
+import { useCallback, useRef as useRef3, useState as useState4 } from "react";
+import {
+  getLegendItems
+} from "@classic-homes/charts-core";
+
+// src/hooks/useLatestRef.ts
+import { useRef as useRef2 } from "react";
+function useLatestRef(value) {
+  const ref = useRef2(value);
+  ref.current = value;
+  return ref;
+}
+
+// src/hooks/useChartLegend.ts
+var LEGEND_EVENTS = [
+  "legendselectchanged",
+  "legendselected",
+  "legendunselected",
+  "legendselectall",
+  "legendinverseselect"
+];
+function useChartLegend({
+  names,
+  colors,
+  palette,
+  config,
+  title,
+  onLegendChange
+}) {
+  const chartRef = useRef3(null);
+  const [visible, setVisible] = useState4({});
+  const latest = useLatestRef({ onLegendChange });
+  const attach = useCallback(
+    (chart) => {
+      chartRef.current = chart;
+      setVisible({});
+      const handler = (params) => {
+        const selected = { ...params.selected };
+        setVisible(selected);
+        latest.current.onLegendChange?.(selected);
+      };
+      for (const event of LEGEND_EVENTS) chart.on(event, handler);
+    },
+    [latest]
+  );
+  const dispatch = (action) => {
+    const chart = chartRef.current;
+    if (chart && !chart.isDisposed()) chart.dispatchAction(action);
+  };
+  return {
+    attach,
+    renderProps: {
+      items: getLegendItems(names, palette, colors, visible),
+      position: config?.position ?? "bottom",
+      chartTitle: title,
+      toggle: (name) => dispatch({ type: "legendToggleSelect", name }),
+      setVisible: (name, show) => dispatch({ type: show ? "legendSelect" : "legendUnSelect", name }),
+      showOnly: (name) => {
+        for (const other of names) {
+          dispatch({ type: other === name ? "legendSelect" : "legendUnSelect", name: other });
+        }
+      },
+      showAll: () => dispatch({ type: "legendAllSelect" })
+    }
+  };
+}
+
 // src/components/core/LineChart.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 echarts3.use([
   EChartsLineChart,
   GridComponent,
@@ -355,7 +526,7 @@ echarts3.use([
   TitleComponent,
   CanvasRenderer
 ]);
-var LineChart = React5.forwardRef(
+var LineChart = React6.forwardRef(
   ({
     title,
     description,
@@ -373,63 +544,110 @@ var LineChart = React5.forwardRef(
     areaFilled = false,
     showDataPoints = false,
     stacked = false,
+    showLabels = false,
+    labelFormatter,
+    xAxisConfig,
+    yAxisConfig,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    legend: legendConfig,
+    renderLegend,
+    onLegendChange,
+    option: optionOverride,
     onClick,
     onHover,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
-    const option = React5.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const chartColors = getChartColors(currentTheme);
+    const legend = useChartLegend({
+      names: data?.series?.map((s) => s.name) ?? [],
+      colors: data?.series?.map((s) => s.color) ?? [],
+      palette: chartColors.series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React6.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        tooltip: showTooltip ? {
-          trigger: "axis",
-          axisPointer: {
-            type: "cross",
-            label: {
-              backgroundColor: "#6a7985"
+      const getLabel = seriesLabelLookup(data.series);
+      const showSymbol = showDataPoints || showLabels || hasPointLabels(data.series);
+      return mergeChartOption(
+        {
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+            ...gridInset(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+          },
+          tooltip: buildTooltip(
+            {
+              trigger: "axis",
+              axisPointer: {
+                type: "cross",
+                label: {
+                  backgroundColor: chartColors.axisPointerLabel
+                }
+              }
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter,
+              getLabel
             }
-          }
-        } : void 0,
-        legend: showLegend ? {
-          data: data.series.map((s) => s.name),
-          bottom: 0
-        } : void 0,
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: data.categories,
-          splitLine: {
-            show: showGrid
-          }
-        },
-        yAxis: {
-          type: "value",
-          splitLine: {
-            show: showGrid
-          }
+          ),
+          legend: buildLegend(
+            data.series.map((s) => s.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend }
+          ),
+          xAxis: buildAxis(
+            {
+              type: "category",
+              boundaryGap: false,
+              data: data.categories,
+              splitLine: {
+                show: showGrid
+              }
+            },
+            xAxisConfig
+          ),
+          yAxis: buildAxis(
+            {
+              type: "value",
+              splitLine: {
+                show: showGrid
+              }
+            },
+            yAxisConfig
+          ),
+          series: data.series.map((series) => ({
+            name: series.name,
+            type: "line",
+            data: withPointLabels(series.data, series.labels, labelFormatter, { position: "top" }),
+            smooth,
+            showSymbol,
+            symbolSize: showDataPoints ? 6 : 0,
+            stack: stacked ? "Total" : void 0,
+            areaStyle: areaFilled ? { opacity: 0.3 } : void 0,
+            itemStyle: series.color ? { color: series.color } : void 0,
+            label: buildDataLabel({ show: true, position: "top" }, void 0, {
+              show: showLabels,
+              formatter: labelFormatter,
+              getLabel
+            }),
+            emphasis: {
+              focus: "series"
+            }
+          }))
         },
-        series: data.series.map((series) => ({
-          name: series.name,
-          type: "line",
-          data: series.data,
-          smooth,
-          showSymbol: showDataPoints,
-          symbolSize: showDataPoints ? 6 : 0,
-          stack: stacked ? "Total" : void 0,
-          areaStyle: areaFilled ? { opacity: 0.3 } : void 0,
-          itemStyle: series.color ? { color: series.color } : void 0,
-          emphasis: {
-            focus: "series"
-          }
-        }))
-      };
+        optionOverride
+      );
     }, [
       data,
       isEmpty,
@@ -439,45 +657,57 @@ var LineChart = React5.forwardRef(
       smooth,
       areaFilled,
       showDataPoints,
-      stacked
+      stacked,
+      chartColors,
+      showLabels,
+      labelFormatter,
+      xAxisConfig,
+      yAxisConfig,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
     ]);
+    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
-            });
+        legend.attach(chart);
+        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);
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       ChartContainer,
       {
         ref,
@@ -489,8 +719,10 @@ var LineChart = React5.forwardRef(
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
+        legendPosition: legendConfig?.position,
         ...props,
-        children: /* @__PURE__ */ jsx5("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx6("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -498,7 +730,7 @@ var LineChart = React5.forwardRef(
 LineChart.displayName = "LineChart";
 
 // src/components/core/BarChart.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import * as echarts4 from "echarts/core";
 import { BarChart as EChartsBarChart } from "echarts/charts";
 import {
@@ -508,8 +740,19 @@ import {
   TitleComponent as TitleComponent2
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer2 } from "echarts/renderers";
-import { generateBarChartDescription } from "@classic-homes/charts-core";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import {
+  buildAxis as buildAxis2,
+  buildDataLabel as buildDataLabel2,
+  buildLegend as buildLegend2,
+  buildTooltip as buildTooltip2,
+  generateBarChartDescription,
+  getChartColors as getChartColors2,
+  gridInset as gridInset2,
+  mergeChartOption as mergeChartOption2,
+  seriesLabelLookup as seriesLabelLookup2,
+  withPointLabels as withPointLabels2
+} from "@classic-homes/charts-core";
+import { jsx as jsx7 } from "react/jsx-runtime";
 echarts4.use([
   EChartsBarChart,
   GridComponent2,
@@ -518,7 +761,7 @@ echarts4.use([
   TitleComponent2,
   CanvasRenderer2
 ]);
-var BarChart = React6.forwardRef(
+var BarChart = React7.forwardRef(
   ({
     title,
     description,
@@ -535,13 +778,32 @@ var BarChart = React6.forwardRef(
     orientation = "vertical",
     stacked = false,
     showValues = false,
+    labelFormatter,
+    xAxisConfig,
+    yAxisConfig,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    legend: legendConfig,
+    renderLegend,
+    onLegendChange,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
     const isHorizontal = orientation === "horizontal";
-    const option = React6.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const legend = useChartLegend({
+      names: data?.series?.map((s) => s.name) ?? [],
+      colors: data?.series?.map((s) => s.color) ?? [],
+      palette: getChartColors2(currentTheme).series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React7.useMemo(() => {
       if (isEmpty) return {};
       const categoryAxis = {
         type: "category",
@@ -556,64 +818,103 @@ var BarChart = React6.forwardRef(
           show: showGrid
         }
       };
-      return {
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
+      const getLabel = seriesLabelLookup2(data.series);
+      return mergeChartOption2(
+        {
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+            ...gridInset2(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+          },
+          tooltip: buildTooltip2(
+            {
+              trigger: "axis",
+              axisPointer: {
+                type: "shadow"
+              }
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter,
+              getLabel
+            }
+          ),
+          legend: buildLegend2(
+            data.series.map((s) => s.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend }
+          ),
+          xAxis: buildAxis2(isHorizontal ? valueAxis : categoryAxis, xAxisConfig),
+          yAxis: buildAxis2(isHorizontal ? categoryAxis : valueAxis, yAxisConfig),
+          series: data.series.map((series) => ({
+            name: series.name,
+            type: "bar",
+            data: withPointLabels2(series.data, series.labels, labelFormatter, {
+              position: isHorizontal ? "right" : "top"
+            }),
+            stack: stacked ? "Total" : void 0,
+            itemStyle: series.color ? { color: series.color } : void 0,
+            label: buildDataLabel2(
+              {
+                show: true,
+                position: isHorizontal ? "right" : "top"
+              },
+              void 0,
+              { show: showValues, formatter: labelFormatter, getLabel }
+            ),
+            emphasis: {
+              focus: "series"
+            }
+          }))
         },
-        tooltip: showTooltip ? {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow"
-          }
-        } : void 0,
-        legend: showLegend ? {
-          data: data.series.map((s) => s.name),
-          bottom: 0
-        } : void 0,
-        xAxis: isHorizontal ? valueAxis : categoryAxis,
-        yAxis: isHorizontal ? categoryAxis : valueAxis,
-        series: data.series.map((series) => ({
-          name: series.name,
-          type: "bar",
-          data: series.data,
-          stack: stacked ? "Total" : void 0,
-          itemStyle: series.color ? { color: series.color } : void 0,
-          label: showValues ? {
-            show: true,
-            position: isHorizontal ? "right" : "top"
-          } : void 0,
-          emphasis: {
-            focus: "series"
-          }
-        }))
-      };
-    }, [data, isEmpty, showTooltip, showLegend, showGrid, isHorizontal, stacked, showValues]);
+        optionOverride
+      );
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      showLegend,
+      showGrid,
+      isHorizontal,
+      stacked,
+      showValues,
+      labelFormatter,
+      xAxisConfig,
+      yAxisConfig,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
+    ]);
+    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
-            });
+        legend.attach(chart);
+        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);
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       ChartContainer,
       {
         ref,
@@ -625,8 +926,10 @@ var BarChart = React6.forwardRef(
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
+        legendPosition: legendConfig?.position,
         ...props,
-        children: /* @__PURE__ */ jsx6("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx7("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -634,15 +937,27 @@ var BarChart = React6.forwardRef(
 BarChart.displayName = "BarChart";
 
 // src/components/core/PieChart.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import * as echarts5 from "echarts/core";
 import { PieChart as EChartsPieChart } from "echarts/charts";
 import { TooltipComponent as TooltipComponent3, LegendComponent as LegendComponent3, TitleComponent as TitleComponent3 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer3 } from "echarts/renderers";
-import { generatePieChartDescription } from "@classic-homes/charts-core";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import {
+  buildDataLabel as buildDataLabel3,
+  buildLegend as buildLegend3,
+  buildTooltip as buildTooltip3,
+  escapeHtml,
+  formatTooltipValue,
+  generatePieChartDescription,
+  getChartColors as getChartColors3,
+  itemLabelLookup,
+  legendCenter,
+  mergeChartOption as mergeChartOption3,
+  pointLabel
+} from "@classic-homes/charts-core";
+import { jsx as jsx8 } from "react/jsx-runtime";
 echarts5.use([EChartsPieChart, TooltipComponent3, LegendComponent3, TitleComponent3, CanvasRenderer3]);
-var PieChart = React7.forwardRef(
+var PieChart = React8.forwardRef(
   ({
     title,
     description,
@@ -658,73 +973,123 @@ var PieChart = React7.forwardRef(
     showLabels = true,
     labelPosition = "outside",
     innerRadius = 0,
+    labelFormatter,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    legend: legendConfig,
+    renderLegend,
+    onLegendChange,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.length;
-    const option = React7.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const legend = useChartLegend({
+      names: data?.map((d) => d.name) ?? [],
+      colors: data?.map((d) => d.color) ?? [],
+      palette: getChartColors3(currentTheme).series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React8.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        tooltip: showTooltip ? {
-          trigger: "item",
-          formatter: "{a} <br/>{b}: {c} ({d}%)"
-        } : void 0,
-        legend: showLegend ? {
-          orient: "horizontal",
-          bottom: 0,
-          data: data.map((d) => d.name)
-        } : void 0,
-        series: [
-          {
-            name: title,
-            type: "pie",
-            radius: innerRadius === 0 ? "70%" : ["50%", "70%"],
-            center: ["50%", "45%"],
-            data: data.map((item) => ({
-              name: item.name,
-              value: item.value,
-              itemStyle: item.color ? { color: item.color } : void 0
-            })),
-            label: showLabels ? {
-              show: true,
-              position: labelPosition,
-              formatter: labelPosition === "inside" ? "{d}%" : "{b}: {d}%"
-            } : {
-              show: false
-            },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
+      const valueFormatter = tooltipFormatter === void 0 ? tooltipValueFormatter : void 0;
+      const tooltipBase = {
+        trigger: "item",
+        formatter: valueFormatter ? (params) => {
+          const p = params;
+          return `${escapeHtml(p.seriesName)} <br/>${escapeHtml(p.name)}: ${escapeHtml(formatTooltipValue(p.value, valueFormatter))} (${p.percent}%)`;
+        } : "{a} <br/>{b}: {c} ({d}%)"
+      };
+      return mergeChartOption3(
+        {
+          tooltip: buildTooltip3(tooltipBase, {
+            show: showTooltip,
+            formatter: tooltipFormatter,
+            valueFormatter: tooltipValueFormatter,
+            getLabel: itemLabelLookup(data)
+          }),
+          legend: buildLegend3(
+            data.map((d) => d.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend, defaults: { orient: "horizontal" } }
+          ),
+          series: [
+            {
+              name: title,
+              type: "pie",
+              radius: innerRadius ? [innerRadius, "70%"] : "70%",
+              center: legendCenter(legendConfig, showLegend && !customLegend, ["50%", "45%"]),
+              data: data.map((item) => ({
+                name: item.name,
+                value: item.value,
+                itemStyle: item.color ? { color: item.color } : void 0,
+                label: pointLabel(item.label, labelFormatter, { position: labelPosition })
+              })),
+              label: buildDataLabel3(
+                {
+                  show: true,
+                  position: labelPosition,
+                  formatter: labelPosition === "inside" ? "{d}%" : "{b}: {d}%"
+                },
+                { show: false },
+                { show: showLabels, formatter: labelFormatter, getLabel: itemLabelLookup(data) }
+              ),
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)"
+                }
               }
             }
-          }
-        ]
-      };
-    }, [data, isEmpty, showTooltip, showLegend, showLabels, labelPosition, innerRadius, title]);
+          ]
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      showLegend,
+      showLabels,
+      labelPosition,
+      innerRadius,
+      title,
+      labelFormatter,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
+    ]);
+    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
-            });
+        legend.attach(chart);
+        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);
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       ChartContainer,
       {
         ref,
@@ -736,8 +1101,10 @@ var PieChart = React7.forwardRef(
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
+        legendPosition: legendConfig?.position,
         ...props,
-        children: /* @__PURE__ */ jsx7("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx8("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -745,7 +1112,7 @@ var PieChart = React7.forwardRef(
 PieChart.displayName = "PieChart";
 
 // src/components/core/AreaChart.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import * as echarts6 from "echarts/core";
 import { LineChart as EChartsLineChart2 } from "echarts/charts";
 import {
@@ -755,7 +1122,21 @@ import {
   TitleComponent as TitleComponent4
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer4 } from "echarts/renderers";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import {
+  buildAxis as buildAxis3,
+  buildDataLabel as buildDataLabel4,
+  buildLegend as buildLegend4,
+  buildTooltip as buildTooltip4,
+  colorWithAlpha,
+  getChartColors as getChartColors4,
+  hasPointLabels as hasPointLabels2,
+  gridInset as gridInset3,
+  mergeChartOption as mergeChartOption4,
+  seriesLabelLookup as seriesLabelLookup3,
+  THEME_DARK as THEME_DARK3,
+  withPointLabels as withPointLabels3
+} from "@classic-homes/charts-core";
+import { jsx as jsx9 } from "react/jsx-runtime";
 echarts6.use([
   EChartsLineChart2,
   GridComponent3,
@@ -764,7 +1145,7 @@ echarts6.use([
   TitleComponent4,
   CanvasRenderer4
 ]);
-var AreaChart = React8.forwardRef(
+var AreaChart = React9.forwardRef(
   ({
     title,
     description,
@@ -781,94 +1162,161 @@ var AreaChart = React8.forwardRef(
     smooth = false,
     stacked = false,
     gradient = true,
+    showLabels = false,
+    labelFormatter,
+    xAxisConfig,
+    yAxisConfig,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    legend: legendConfig,
+    renderLegend,
+    onLegendChange,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
-    const option = React8.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const chartColors = getChartColors4(currentTheme);
+    const legend = useChartLegend({
+      names: data?.series?.map((s) => s.name) ?? [],
+      colors: data?.series?.map((s) => s.color) ?? [],
+      palette: chartColors.series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React9.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        tooltip: showTooltip ? {
-          trigger: "axis",
-          axisPointer: {
-            type: "cross",
-            label: {
-              backgroundColor: "#6a7985"
+      const getLabel = seriesLabelLookup3(data.series);
+      const showSymbol = showLabels || hasPointLabels2(data.series);
+      return mergeChartOption4(
+        {
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+            ...gridInset3(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+          },
+          tooltip: buildTooltip4(
+            {
+              trigger: "axis",
+              axisPointer: {
+                type: "cross",
+                label: {
+                  backgroundColor: chartColors.axisPointerLabel
+                }
+              }
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter,
+              getLabel
             }
-          }
-        } : void 0,
-        legend: showLegend ? {
-          data: data.series.map((s) => s.name),
-          bottom: 0
-        } : void 0,
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: data.categories
-        },
-        yAxis: {
-          type: "value",
-          splitLine: {
-            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)`
+          ),
+          legend: buildLegend4(
+            data.series.map((s) => s.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend }
+          ),
+          xAxis: buildAxis3(
+            {
+              type: "category",
+              boundaryGap: false,
+              data: data.categories
+            },
+            xAxisConfig
+          ),
+          yAxis: buildAxis3(
+            {
+              type: "value",
+              splitLine: {
+                show: showGrid
               }
-            ])
-          } : { opacity: 0.5 },
-          itemStyle: series.color ? { color: series.color } : void 0,
-          emphasis: {
-            focus: "series"
-          },
-          showSymbol: false
-        }))
-      };
-    }, [data, isEmpty, showTooltip, showLegend, showGrid, smooth, stacked, gradient]);
+            },
+            yAxisConfig
+          ),
+          series: data.series.map((series, index) => {
+            const base = series.color || chartColors.series[index % chartColors.series.length];
+            return {
+              name: series.name,
+              type: "line",
+              data: withPointLabels3(series.data, series.labels, labelFormatter, {
+                position: "top"
+              }),
+              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,
+              label: buildDataLabel4({ show: true, position: "top" }, void 0, {
+                show: showLabels,
+                formatter: labelFormatter,
+                getLabel
+              }),
+              emphasis: {
+                focus: "series"
+              },
+              showSymbol
+            };
+          })
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      showLegend,
+      showGrid,
+      smooth,
+      stacked,
+      gradient,
+      chartColors,
+      showLabels,
+      labelFormatter,
+      xAxisConfig,
+      yAxisConfig,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
+    ]);
+    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
-            });
+        legend.attach(chart);
+        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);
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       ChartContainer,
       {
         ref,
@@ -880,8 +1328,10 @@ var AreaChart = React8.forwardRef(
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
+        legendPosition: legendConfig?.position,
         ...props,
-        children: /* @__PURE__ */ jsx8("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx9("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -889,9 +1339,9 @@ var AreaChart = React8.forwardRef(
 AreaChart.displayName = "AreaChart";
 
 // src/components/core/ScatterChart.tsx
-import * as React9 from "react";
+import * as React10 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,
@@ -899,17 +1349,32 @@ import {
   TitleComponent as TitleComponent5
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer5 } from "echarts/renderers";
-import { generateScatterChartDescription } from "@classic-homes/charts-core";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import {
+  buildAxis as buildAxis4,
+  buildDataLabel as buildDataLabel5,
+  buildLegend as buildLegend5,
+  buildTooltip as buildTooltip5,
+  escapeHtml as escapeHtml2,
+  formatTooltipValue as formatTooltipValue2,
+  generateScatterChartDescription,
+  getChartColors as getChartColors5,
+  gridInset as gridInset4,
+  mergeChartOption as mergeChartOption5,
+  seriesLabelLookup as seriesLabelLookup4,
+  withPointLabels as withPointLabels4
+} from "@classic-homes/charts-core";
+import { jsx as jsx10 } from "react/jsx-runtime";
 echarts7.use([
   EChartsScatterChart,
+  // Trend lines are line series
+  EChartsLineChart3,
   GridComponent4,
   TooltipComponent5,
   LegendComponent5,
   TitleComponent5,
   CanvasRenderer5
 ]);
-var ScatterChart = React9.forwardRef(
+var ScatterChart = React10.forwardRef(
   ({
     title,
     description,
@@ -925,19 +1390,45 @@ var ScatterChart = React9.forwardRef(
     showGrid = true,
     showTrendLine = false,
     symbolSize = 10,
+    showLabels = false,
+    labelFormatter,
+    xAxisConfig,
+    yAxisConfig,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    legend: legendConfig,
+    renderLegend,
+    onLegendChange,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.series?.length || data.series.every((s) => !s.data?.length);
-    const option = React9.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const legend = useChartLegend({
+      names: data?.series?.map((s) => s.name) ?? [],
+      colors: data?.series?.map((s) => s.color) ?? [],
+      palette: getChartColors5(currentTheme).series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React10.useMemo(() => {
       if (isEmpty) return {};
+      const getLabel = seriesLabelLookup4(data.series);
       const series = data.series.map((s) => ({
         name: s.name,
         type: "scatter",
-        data: s.data,
+        data: withPointLabels4(s.data, s.labels, labelFormatter, { position: "top" }),
         symbolSize: typeof symbolSize === "function" ? symbolSize : symbolSize,
         itemStyle: s.color ? { color: s.color } : void 0,
+        label: buildDataLabel5({ show: true, position: "top" }, void 0, {
+          show: showLabels,
+          formatter: labelFormatter,
+          getLabel
+        }),
         emphasis: {
           focus: "series",
           itemStyle: {
@@ -959,9 +1450,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",
@@ -982,63 +1476,103 @@ var ScatterChart = React9.forwardRef(
           });
         });
       }
-      return {
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        tooltip: showTooltip ? {
-          trigger: "item",
-          formatter: (params) => {
-            const p = params;
-            if (!p.value) return "";
-            return `${p.seriesName}<br/>X: ${p.value[0]}<br/>Y: ${p.value[1]}`;
-          }
-        } : void 0,
-        legend: showLegend ? {
-          data: data.series.map((s) => s.name),
-          bottom: 0
-        } : void 0,
-        xAxis: {
-          type: "value",
-          splitLine: {
-            show: showGrid
-          }
-        },
-        yAxis: {
-          type: "value",
-          splitLine: {
-            show: showGrid
-          }
-        },
-        series
-      };
-    }, [data, isEmpty, showTooltip, showLegend, showGrid, showTrendLine, symbolSize]);
-    const { containerRef } = useChart({
-      option,
-      theme,
-      animation,
+      return mergeChartOption5(
+        {
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+            ...gridInset4(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+          },
+          tooltip: buildTooltip5(
+            {
+              trigger: "item",
+              formatter: (params) => {
+                const p = params;
+                if (!p.value) return "";
+                const x = formatTooltipValue2(p.value[0], tooltipValueFormatter);
+                const y = formatTooltipValue2(p.value[1], tooltipValueFormatter);
+                return `${escapeHtml2(p.seriesName)}<br/>X: ${escapeHtml2(x)}<br/>Y: ${escapeHtml2(y)}`;
+              }
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter,
+              getLabel
+            }
+          ),
+          legend: buildLegend5(
+            data.series.map((s) => s.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend }
+          ),
+          xAxis: buildAxis4(
+            {
+              type: "value",
+              splitLine: {
+                show: showGrid
+              }
+            },
+            xAxisConfig
+          ),
+          yAxis: buildAxis4(
+            {
+              type: "value",
+              splitLine: {
+                show: showGrid
+              }
+            },
+            yAxisConfig
+          ),
+          series
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      showLegend,
+      showGrid,
+      showTrendLine,
+      symbolSize,
+      showLabels,
+      labelFormatter,
+      xAxisConfig,
+      yAxisConfig,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
+    ]);
+    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
-            });
+        legend.attach(chart);
+        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);
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       ChartContainer,
       {
         ref,
@@ -1050,8 +1584,10 @@ var ScatterChart = React9.forwardRef(
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
+        legendPosition: legendConfig?.position,
         ...props,
-        children: /* @__PURE__ */ jsx9("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx10("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1059,15 +1595,29 @@ var ScatterChart = React9.forwardRef(
 ScatterChart.displayName = "ScatterChart";
 
 // src/components/core/DonutChart.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 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 { jsx as jsx10 } from "react/jsx-runtime";
+import {
+  buildDataLabel as buildDataLabel6,
+  buildLegend as buildLegend6,
+  buildTooltip as buildTooltip6,
+  escapeHtml as escapeHtml3,
+  formatTooltipValue as formatTooltipValue3,
+  generatePieChartDescription as generatePieChartDescription2,
+  getChartColors as getChartColors6,
+  itemLabelLookup as itemLabelLookup2,
+  anchorCenterGraphic,
+  legendCenter as legendCenter2,
+  mergeChartOption as mergeChartOption6,
+  pointLabel as pointLabel2,
+  THEME_DARK as THEME_DARK4
+} from "@classic-homes/charts-core";
+import { jsx as jsx11 } from "react/jsx-runtime";
 echarts8.use([EChartsPieChart2, TooltipComponent6, LegendComponent6, TitleComponent6, CanvasRenderer6]);
-var DonutChart = React10.forwardRef(
+var DonutChart = React11.forwardRef(
   ({
     title,
     description,
@@ -1085,93 +1635,134 @@ var DonutChart = React10.forwardRef(
     innerRadius = "50%",
     centerLabel,
     centerValue,
+    labelFormatter,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    legend: legendConfig,
+    renderLegend,
+    onLegendChange,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.length;
-    const option = React10.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const chartColors = getChartColors6(currentTheme);
+    const legend = useChartLegend({
+      names: data?.map((d) => d.name) ?? [],
+      colors: data?.map((d) => d.color) ?? [],
+      palette: chartColors.series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React11.useMemo(() => {
       if (isEmpty) return {};
+      const pieCenter = legendCenter2(legendConfig, showLegend && !customLegend, ["50%", "45%"]);
       const graphicElements = [];
       if (centerLabel || centerValue) {
-        graphicElements.push({
-          type: "group",
-          left: "center",
-          top: "40%",
-          children: [
-            ...centerValue !== void 0 ? [
-              {
-                type: "text",
-                style: {
-                  text: String(centerValue),
-                  fontSize: 28,
-                  fontWeight: "bold",
-                  fill: "currentColor",
-                  textAlign: "center"
-                },
-                top: 0,
-                left: "center"
-              }
-            ] : [],
-            ...centerLabel ? [
-              {
-                type: "text",
-                style: {
-                  text: centerLabel,
-                  fontSize: 14,
-                  fill: "#888",
-                  textAlign: "center"
-                },
-                top: centerValue !== void 0 ? 35 : 0,
-                left: "center"
-              }
-            ] : []
-          ]
-        });
-      }
-      return {
-        tooltip: showTooltip ? {
-          trigger: "item",
-          formatter: "{a} <br/>{b}: {c} ({d}%)"
-        } : void 0,
-        legend: showLegend ? {
-          orient: "horizontal",
-          bottom: 0,
-          data: data.map((d) => d.name)
-        } : void 0,
-        graphic: graphicElements.length > 0 ? graphicElements : void 0,
-        series: [
-          {
-            name: title,
-            type: "pie",
-            radius: [innerRadius, "70%"],
-            center: ["50%", "45%"],
-            avoidLabelOverlap: true,
-            data: data.map((item) => ({
-              name: item.name,
-              value: item.value,
-              itemStyle: item.color ? { color: item.color } : void 0
-            })),
-            label: showLabels ? {
-              show: true,
-              position: labelPosition,
-              formatter: labelPosition === "inside" ? "{d}%" : "{b}: {d}%"
-            } : {
-              show: false
-            },
-            labelLine: {
-              show: showLabels && labelPosition === "outside"
+        graphicElements.push(
+          anchorCenterGraphic(
+            {
+              type: "group",
+              left: "center",
+              top: "40%",
+              children: [
+                ...centerValue !== void 0 ? [
+                  {
+                    type: "text",
+                    style: {
+                      text: String(centerValue),
+                      fontSize: 28,
+                      fontWeight: "bold",
+                      fill: chartColors.foreground,
+                      textAlign: "center"
+                    },
+                    top: 0,
+                    left: "center"
+                  }
+                ] : [],
+                ...centerLabel ? [
+                  {
+                    type: "text",
+                    style: {
+                      text: centerLabel,
+                      fontSize: 14,
+                      fill: chartColors.mutedForeground,
+                      textAlign: "center"
+                    },
+                    top: centerValue !== void 0 ? 35 : 0,
+                    left: "center"
+                  }
+                ] : []
+              ]
             },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
+            pieCenter,
+            ["50%", "45%"]
+          )
+        );
+      }
+      const valueFormatter = tooltipFormatter === void 0 ? tooltipValueFormatter : void 0;
+      const tooltipBase = {
+        trigger: "item",
+        formatter: valueFormatter ? (params) => {
+          const p = params;
+          return `${escapeHtml3(p.seriesName)} <br/>${escapeHtml3(p.name)}: ${escapeHtml3(formatTooltipValue3(p.value, valueFormatter))} (${p.percent}%)`;
+        } : "{a} <br/>{b}: {c} ({d}%)"
+      };
+      return mergeChartOption6(
+        {
+          tooltip: buildTooltip6(tooltipBase, {
+            show: showTooltip,
+            formatter: tooltipFormatter,
+            valueFormatter: tooltipValueFormatter,
+            getLabel: itemLabelLookup2(data)
+          }),
+          legend: buildLegend6(
+            data.map((d) => d.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend, defaults: { orient: "horizontal" } }
+          ),
+          graphic: graphicElements.length > 0 ? graphicElements : void 0,
+          series: [
+            {
+              name: title,
+              type: "pie",
+              radius: [innerRadius, "70%"],
+              center: pieCenter,
+              avoidLabelOverlap: true,
+              data: data.map((item) => ({
+                name: item.name,
+                value: item.value,
+                itemStyle: item.color ? { color: item.color } : void 0,
+                label: pointLabel2(item.label, labelFormatter, { position: labelPosition })
+              })),
+              label: buildDataLabel6(
+                {
+                  show: true,
+                  position: labelPosition,
+                  formatter: labelPosition === "inside" ? "{d}%" : "{b}: {d}%"
+                },
+                { show: false },
+                { show: showLabels, formatter: labelFormatter, getLabel: itemLabelLookup2(data) }
+              ),
+              labelLine: {
+                show: showLabels && labelPosition === "outside"
+              },
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)"
+                }
               }
             }
-          }
-        ]
-      };
+          ]
+        },
+        optionOverride
+      );
     }, [
       data,
       isEmpty,
@@ -1182,29 +1773,38 @@ var DonutChart = React10.forwardRef(
       innerRadius,
       centerLabel,
       centerValue,
-      title
+      title,
+      chartColors,
+      labelFormatter,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
     ]);
+    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
-            });
+        legend.attach(chart);
+        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);
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       ChartContainer,
       {
         ref,
@@ -1216,8 +1816,10 @@ var DonutChart = React10.forwardRef(
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
+        legendPosition: legendConfig?.position,
         ...props,
-        children: /* @__PURE__ */ jsx10("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx11("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1225,7 +1827,7 @@ var DonutChart = React10.forwardRef(
 DonutChart.displayName = "DonutChart";
 
 // src/components/extended/RadarChart.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import * as echarts9 from "echarts/core";
 import { RadarChart as EChartsRadarChart } from "echarts/charts";
 import {
@@ -1235,7 +1837,15 @@ import {
   RadarComponent
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer7 } from "echarts/renderers";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import {
+  buildDataLabel as buildDataLabel7,
+  buildLegend as buildLegend7,
+  buildTooltip as buildTooltip7,
+  getChartColors as getChartColors7,
+  legendCenter as legendCenter3,
+  mergeChartOption as mergeChartOption7
+} from "@classic-homes/charts-core";
+import { jsx as jsx12 } from "react/jsx-runtime";
 echarts9.use([
   EChartsRadarChart,
   TooltipComponent7,
@@ -1244,7 +1854,7 @@ echarts9.use([
   RadarComponent,
   CanvasRenderer7
 ]);
-var RadarChart = React11.forwardRef(
+var RadarChart = React12.forwardRef(
   ({
     title,
     description,
@@ -1259,50 +1869,101 @@ var RadarChart = React11.forwardRef(
     showLegend = true,
     showTooltip = true,
     shape = "polygon",
+    showLabels = false,
+    labelFormatter,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    legend: legendConfig,
+    renderLegend,
+    onLegendChange,
+    option: optionOverride,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.series?.length || !indicators?.length || data.series.every((s) => !s.data?.length);
-    const option = React11.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const legend = useChartLegend({
+      names: data?.series?.map((s) => s.name) ?? [],
+      colors: data?.series?.map((s) => s.color) ?? [],
+      palette: getChartColors7(currentTheme).series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React12.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        tooltip: showTooltip ? {
-          trigger: "item"
-        } : void 0,
-        legend: showLegend ? {
-          data: data.series.map((s) => s.name),
-          bottom: 0
-        } : void 0,
-        radar: {
-          indicator: indicators.map((ind) => ({
-            name: ind.name,
-            max: ind.max,
-            min: ind.min
-          })),
-          shape
+      return mergeChartOption7(
+        {
+          tooltip: buildTooltip7(
+            {
+              trigger: "item"
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter
+            }
+          ),
+          legend: buildLegend7(
+            data.series.map((s) => s.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend }
+          ),
+          radar: {
+            indicator: indicators.map((ind) => ({
+              name: ind.name,
+              max: ind.max,
+              min: ind.min
+            })),
+            shape,
+            center: legendCenter3(legendConfig, showLegend && !customLegend, ["50%", "50%"])
+          },
+          series: [
+            {
+              type: "radar",
+              label: buildDataLabel7({ show: true }, void 0, {
+                show: showLabels,
+                formatter: labelFormatter
+              }),
+              data: data.series.map((series) => ({
+                name: series.name,
+                value: series.data,
+                itemStyle: series.color ? { color: series.color } : void 0,
+                areaStyle: {
+                  opacity: 0.2
+                }
+              }))
+            }
+          ]
         },
-        series: [
-          {
-            type: "radar",
-            data: data.series.map((series) => ({
-              name: series.name,
-              value: series.data,
-              itemStyle: series.color ? { color: series.color } : void 0,
-              areaStyle: {
-                opacity: 0.2
-              }
-            }))
-          }
-        ]
-      };
-    }, [data, indicators, isEmpty, showTooltip, showLegend, shape]);
+        optionOverride
+      );
+    }, [
+      data,
+      indicators,
+      isEmpty,
+      showTooltip,
+      showLegend,
+      shape,
+      showLabels,
+      labelFormatter,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
+    ]);
     const { containerRef } = useChart({
       option,
       theme,
-      animation
+      animation,
+      onReady: (chart) => {
+        legend.attach(chart);
+      }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Radar chart with ${indicators.length} dimensions comparing ${data.series.length} series.` : void 0);
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       ChartContainer,
       {
         ref,
@@ -1314,8 +1975,10 @@ var RadarChart = React11.forwardRef(
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
+        legendPosition: legendConfig?.position,
         ...props,
-        children: /* @__PURE__ */ jsx11("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx12("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1323,12 +1986,23 @@ var RadarChart = React11.forwardRef(
 RadarChart.displayName = "RadarChart";
 
 // src/components/extended/FunnelChart.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import * as echarts10 from "echarts/core";
 import { FunnelChart as EChartsFunnelChart } from "echarts/charts";
 import { TooltipComponent as TooltipComponent8, LegendComponent as LegendComponent8, TitleComponent as TitleComponent8 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer8 } from "echarts/renderers";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import {
+  buildDataLabel as buildDataLabel8,
+  buildLegend as buildLegend8,
+  buildTooltip as buildTooltip8,
+  escapeHtml as escapeHtml4,
+  formatTooltipValue as formatTooltipValue4,
+  getChartColors as getChartColors8,
+  itemLabelLookup as itemLabelLookup3,
+  mergeChartOption as mergeChartOption8,
+  pointLabel as pointLabel3
+} from "@classic-homes/charts-core";
+import { jsx as jsx13 } from "react/jsx-runtime";
 echarts10.use([
   EChartsFunnelChart,
   TooltipComponent8,
@@ -1336,7 +2010,7 @@ echarts10.use([
   TitleComponent8,
   CanvasRenderer8
 ]);
-var FunnelChart = React12.forwardRef(
+var FunnelChart = React13.forwardRef(
   ({
     title,
     description,
@@ -1352,81 +2026,134 @@ var FunnelChart = React12.forwardRef(
     sort = "descending",
     orientation = "vertical",
     showLabels = true,
+    labelFormatter,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    legend: legendConfig,
+    renderLegend,
+    onLegendChange,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.length;
-    const option = React12.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const legend = useChartLegend({
+      names: data?.map((d) => d.name) ?? [],
+      colors: data?.map((d) => d.color) ?? [],
+      palette: getChartColors8(currentTheme).series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React13.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        tooltip: showTooltip ? {
-          trigger: "item",
-          formatter: "{a} <br/>{b}: {c}"
-        } : void 0,
-        legend: showLegend ? {
-          data: data.map((d) => d.name),
-          bottom: 0
-        } : void 0,
-        series: [
-          {
-            name: title,
-            type: "funnel",
-            left: "10%",
-            top: 60,
-            bottom: 60,
-            width: "80%",
-            min: 0,
-            max: Math.max(...data.map((d) => d.value)),
-            minSize: "0%",
-            maxSize: "100%",
-            sort,
-            orient: orientation,
-            gap: 2,
-            label: showLabels ? {
-              show: true,
-              position: "inside",
-              formatter: "{b}: {c}"
-            } : {
-              show: false
-            },
-            labelLine: {
-              show: false
-            },
-            emphasis: {
-              label: {
-                fontSize: 16
-              }
-            },
-            data: data.map((item) => ({
-              name: item.name,
-              value: item.value,
-              itemStyle: item.color ? { color: item.color } : void 0
-            }))
-          }
-        ]
+      const getLabel = itemLabelLookup3(data);
+      const valueFormatter = tooltipFormatter === void 0 ? tooltipValueFormatter : void 0;
+      const tooltipBase = {
+        trigger: "item",
+        formatter: valueFormatter ? (params) => {
+          const p = params;
+          return `${escapeHtml4(p.seriesName)} <br/>${escapeHtml4(p.name)}: ${escapeHtml4(formatTooltipValue4(p.value, valueFormatter))}`;
+        } : "{a} <br/>{b}: {c}"
       };
-    }, [data, isEmpty, showTooltip, showLegend, sort, orientation, showLabels, title]);
+      return mergeChartOption8(
+        {
+          tooltip: buildTooltip8(tooltipBase, {
+            show: showTooltip,
+            formatter: tooltipFormatter,
+            valueFormatter: tooltipValueFormatter,
+            getLabel
+          }),
+          legend: buildLegend8(
+            data.map((d) => d.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend }
+          ),
+          series: [
+            {
+              name: title,
+              type: "funnel",
+              left: "10%",
+              top: 60,
+              bottom: 60,
+              width: "80%",
+              min: 0,
+              // 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,
+              orient: orientation,
+              gap: 2,
+              label: buildDataLabel8(
+                {
+                  show: true,
+                  position: "inside",
+                  formatter: "{b}: {c}"
+                },
+                { show: false },
+                { show: showLabels, formatter: labelFormatter, getLabel }
+              ),
+              labelLine: {
+                show: false
+              },
+              emphasis: {
+                label: {
+                  fontSize: 16
+                }
+              },
+              data: data.map((item) => ({
+                name: item.name,
+                value: item.value,
+                itemStyle: item.color ? { color: item.color } : void 0,
+                label: pointLabel3(item.label, labelFormatter, { position: "inside" })
+              }))
+            }
+          ]
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      showLegend,
+      sort,
+      orientation,
+      showLabels,
+      title,
+      labelFormatter,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
+    ]);
+    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
-            });
+        legend.attach(chart);
+        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);
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       ChartContainer,
       {
         ref,
@@ -1438,8 +2165,10 @@ var FunnelChart = React12.forwardRef(
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
+        legendPosition: legendConfig?.position,
         ...props,
-        children: /* @__PURE__ */ jsx12("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx13("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1447,14 +2176,20 @@ var FunnelChart = React12.forwardRef(
 FunnelChart.displayName = "FunnelChart";
 
 // src/components/extended/GaugeChart.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import * as echarts11 from "echarts/core";
 import { GaugeChart as EChartsGaugeChart } from "echarts/charts";
-import { TitleComponent as TitleComponent9 } from "echarts/components";
+import { TitleComponent as TitleComponent9, TooltipComponent as TooltipComponent9 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer9 } from "echarts/renderers";
-import { jsx as jsx13 } from "react/jsx-runtime";
-echarts11.use([EChartsGaugeChart, TitleComponent9, CanvasRenderer9]);
-var GaugeChart = React13.forwardRef(
+import {
+  buildTooltip as buildTooltip9,
+  getChartColors as getChartColors9,
+  mergeChartOption as mergeChartOption9,
+  THEME_DARK as THEME_DARK5
+} from "@classic-homes/charts-core";
+import { jsx as jsx14 } from "react/jsx-runtime";
+echarts11.use([EChartsGaugeChart, TitleComponent9, TooltipComponent9, CanvasRenderer9]);
+var GaugeChart = React14.forwardRef(
   ({
     title,
     description,
@@ -1470,89 +2205,123 @@ var GaugeChart = React13.forwardRef(
     splitNumber = 10,
     showProgress = true,
     formatValue,
+    showTooltip = true,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    option: optionOverride,
     class: className,
     ...props
   }, ref) => {
-    const option = React13.useMemo(() => {
-      return {
-        series: [
-          {
-            type: "gauge",
-            center: ["50%", "60%"],
-            radius: "80%",
-            min,
-            max,
-            splitNumber,
-            progress: showProgress ? {
-              show: true,
-              width: 18
-            } : void 0,
-            axisLine: {
-              lineStyle: {
+    const currentTheme = useChartTheme(theme);
+    const chartColors = getChartColors9(currentTheme);
+    const reducedMotion = useReducedMotion();
+    const option = React14.useMemo(() => {
+      return mergeChartOption9(
+        {
+          // No tooltip by default; one appears once its content is customised
+          tooltip: tooltipFormatter || tooltipValueFormatter ? buildTooltip9(
+            { trigger: "item" },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter
+            }
+          ) : void 0,
+          series: [
+            {
+              type: "gauge",
+              center: ["50%", "60%"],
+              radius: "80%",
+              min,
+              max,
+              splitNumber,
+              progress: showProgress ? {
+                show: true,
                 width: 18
-              }
-            },
-            axisTick: {
-              distance: -30,
-              splitNumber: 5,
-              lineStyle: {
-                width: 2,
-                color: "#999"
-              }
-            },
-            splitLine: {
-              distance: -32,
-              length: 10,
-              lineStyle: {
-                width: 3,
-                color: "#999"
-              }
-            },
-            axisLabel: {
-              distance: -20,
-              color: "#999",
-              fontSize: 12
-            },
-            anchor: {
-              show: true,
-              size: 20,
-              itemStyle: {
-                borderWidth: 2
-              }
-            },
-            pointer: {
-              width: 6,
-              length: "60%"
-            },
-            title: {
-              show: true,
-              offsetCenter: [0, "70%"],
-              fontSize: 14
-            },
-            detail: {
-              valueAnimation: animation,
-              fontSize: 28,
-              fontWeight: "bold",
-              offsetCenter: [0, "40%"],
-              formatter: formatValue || "{value}"
-            },
-            data: [
-              {
-                value,
-                name: title
-              }
-            ]
-          }
-        ]
-      };
-    }, [value, min, max, splitNumber, showProgress, formatValue, title, animation]);
+              } : void 0,
+              axisLine: {
+                lineStyle: {
+                  width: 18
+                }
+              },
+              axisTick: {
+                distance: -30,
+                splitNumber: 5,
+                lineStyle: {
+                  width: 2,
+                  color: chartColors.mutedForeground
+                }
+              },
+              splitLine: {
+                distance: -32,
+                length: 10,
+                lineStyle: {
+                  width: 3,
+                  color: chartColors.mutedForeground
+                }
+              },
+              axisLabel: {
+                distance: -20,
+                color: chartColors.mutedForeground,
+                fontSize: 12
+              },
+              anchor: {
+                show: true,
+                size: 20,
+                itemStyle: {
+                  borderWidth: 2
+                }
+              },
+              pointer: {
+                width: 6,
+                length: "60%"
+              },
+              title: {
+                show: true,
+                offsetCenter: [0, "70%"],
+                fontSize: 14
+              },
+              detail: {
+                valueAnimation: animation && !reducedMotion,
+                fontSize: 28,
+                fontWeight: "bold",
+                offsetCenter: [0, "40%"],
+                formatter: formatValue || "{value}"
+              },
+              data: [
+                {
+                  value,
+                  name: title
+                }
+              ]
+            }
+          ]
+        },
+        optionOverride
+      );
+    }, [
+      value,
+      min,
+      max,
+      splitNumber,
+      showProgress,
+      formatValue,
+      title,
+      animation,
+      reducedMotion,
+      chartColors,
+      showTooltip,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      optionOverride
+    ]);
     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}.`;
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       ChartContainer,
       {
         ref,
@@ -1564,7 +2333,7 @@ var GaugeChart = React13.forwardRef(
         emptyMessage,
         className: cn(className),
         ...props,
-        children: /* @__PURE__ */ jsx13("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx14("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1572,26 +2341,34 @@ var GaugeChart = React13.forwardRef(
 GaugeChart.displayName = "GaugeChart";
 
 // src/components/extended/HeatmapChart.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import * as echarts12 from "echarts/core";
 import { HeatmapChart as EChartsHeatmapChart } from "echarts/charts";
 import {
   GridComponent as GridComponent5,
-  TooltipComponent as TooltipComponent9,
+  TooltipComponent as TooltipComponent10,
   TitleComponent as TitleComponent10,
   VisualMapComponent
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer10 } from "echarts/renderers";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import {
+  buildAxis as buildAxis5,
+  buildDataLabel as buildDataLabel9,
+  buildTooltip as buildTooltip10,
+  escapeHtml as escapeHtml5,
+  formatTooltipValue as formatTooltipValue5,
+  mergeChartOption as mergeChartOption10
+} from "@classic-homes/charts-core";
+import { jsx as jsx15 } from "react/jsx-runtime";
 echarts12.use([
   EChartsHeatmapChart,
   GridComponent5,
-  TooltipComponent9,
+  TooltipComponent10,
   TitleComponent10,
   VisualMapComponent,
   CanvasRenderer10
 ]);
-var HeatmapChart = React14.forwardRef(
+var HeatmapChart = React15.forwardRef(
   ({
     title,
     description,
@@ -1606,95 +2383,140 @@ var HeatmapChart = React14.forwardRef(
     animation = true,
     showTooltip = true,
     showValues = false,
+    labelFormatter,
+    xAxisConfig,
+    yAxisConfig,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    option: optionOverride,
     onClick,
     class: className,
     ...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);
-    const option = React14.useMemo(() => {
+    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 = React15.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        tooltip: showTooltip ? {
-          position: "top",
-          formatter: (params) => {
-            const p = params;
-            if (!p.value) return "";
-            const [xIdx, yIdx, value] = p.value;
-            return `${xAxis[xIdx]} / ${yAxis[yIdx]}: ${value}`;
-          }
-        } : void 0,
-        grid: {
-          left: "3%",
-          right: "10%",
-          bottom: "3%",
-          containLabel: true
-        },
-        xAxis: {
-          type: "category",
-          data: xAxis,
-          splitArea: {
-            show: true
-          }
-        },
-        yAxis: {
-          type: "category",
-          data: yAxis,
-          splitArea: {
-            show: true
-          }
-        },
-        visualMap: {
-          min: minValue,
-          max: maxValue,
-          calculable: true,
-          orient: "vertical",
-          right: "0%",
-          top: "center"
-        },
-        series: [
-          {
-            name: title,
-            type: "heatmap",
-            data: data.data,
-            label: showValues ? {
-              show: true
-            } : void 0,
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
+      return mergeChartOption10(
+        {
+          tooltip: buildTooltip10(
+            {
+              position: "top",
+              formatter: (params) => {
+                const p = params;
+                if (!p.value) return "";
+                const [xIdx, yIdx, value] = p.value;
+                return `${escapeHtml5(xAxis[xIdx])} / ${escapeHtml5(yAxis[yIdx])}: ${escapeHtml5(formatTooltipValue5(value, tooltipValueFormatter))}`;
               }
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter
             }
-          }
-        ]
-      };
-    }, [data, xAxis, yAxis, isEmpty, showTooltip, showValues, minValue, maxValue, title]);
+          ),
+          grid: {
+            left: "3%",
+            right: "10%",
+            bottom: "3%",
+            containLabel: true
+          },
+          xAxis: buildAxis5(
+            {
+              type: "category",
+              data: xAxis,
+              splitArea: {
+                show: true
+              }
+            },
+            xAxisConfig
+          ),
+          yAxis: buildAxis5(
+            {
+              type: "category",
+              data: yAxis,
+              splitArea: {
+                show: true
+              }
+            },
+            yAxisConfig
+          ),
+          visualMap: {
+            min: minValue,
+            max: maxValue,
+            calculable: true,
+            orient: "vertical",
+            right: "0%",
+            top: "center"
+          },
+          series: [
+            {
+              name: title,
+              type: "heatmap",
+              data: data.data,
+              label: buildDataLabel9({ show: true }, void 0, {
+                show: showValues,
+                formatter: labelFormatter
+              }),
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowColor: "rgba(0, 0, 0, 0.5)"
+                }
+              }
+            }
+          ]
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      xAxis,
+      yAxis,
+      isEmpty,
+      showTooltip,
+      showValues,
+      minValue,
+      maxValue,
+      title,
+      labelFormatter,
+      xAxisConfig,
+      yAxisConfig,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      optionOverride
+    ]);
+    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);
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       ChartContainer,
       {
         ref,
@@ -1707,7 +2529,7 @@ var HeatmapChart = React14.forwardRef(
         emptyMessage,
         className: cn(className),
         ...props,
-        children: /* @__PURE__ */ jsx14("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx15("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1715,14 +2537,25 @@ var HeatmapChart = React14.forwardRef(
 HeatmapChart.displayName = "HeatmapChart";
 
 // src/components/extended/TreemapChart.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import * as echarts13 from "echarts/core";
 import { TreemapChart as EChartsTreemapChart } from "echarts/charts";
-import { TooltipComponent as TooltipComponent10, TitleComponent as TitleComponent11 } from "echarts/components";
+import { TooltipComponent as TooltipComponent11, TitleComponent as TitleComponent11 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer11 } from "echarts/renderers";
-import { jsx as jsx15 } from "react/jsx-runtime";
-echarts13.use([EChartsTreemapChart, TooltipComponent10, TitleComponent11, CanvasRenderer11]);
-var TreemapChart = React15.forwardRef(
+import {
+  buildDataLabel as buildDataLabel10,
+  buildTooltip as buildTooltip11,
+  escapeHtml as escapeHtml6,
+  formatTooltipValue as formatTooltipValue6,
+  getChartColors as getChartColors10,
+  mergeChartOption as mergeChartOption11,
+  nameLabelLookup,
+  pointLabel as pointLabel4,
+  THEME_DARK as THEME_DARK6
+} from "@classic-homes/charts-core";
+import { jsx as jsx16 } from "react/jsx-runtime";
+echarts13.use([EChartsTreemapChart, TooltipComponent11, TitleComponent11, CanvasRenderer11]);
+var TreemapChart = React16.forwardRef(
   ({
     title,
     description,
@@ -1735,89 +2568,122 @@ var TreemapChart = React15.forwardRef(
     theme = "auto",
     animation = true,
     showTooltip = true,
+    labelFormatter,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.length;
-    const option = React15.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const chartColors = getChartColors10(currentTheme);
+    const option = React16.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        tooltip: showTooltip ? {
-          formatter: (params) => {
-            const p = params;
-            return `${p.name}: ${p.value}`;
-          }
-        } : void 0,
-        series: [
-          {
-            type: "treemap",
-            data,
-            roam: false,
-            levels: levels || [
-              {
-                itemStyle: {
-                  borderColor: "#555",
-                  borderWidth: 4,
-                  gapWidth: 4
-                }
-              },
-              {
-                colorSaturation: [0.3, 0.6],
-                itemStyle: {
-                  borderColorSaturation: 0.7,
-                  gapWidth: 2,
-                  borderWidth: 2
-                }
-              },
-              {
-                colorSaturation: [0.3, 0.5],
-                itemStyle: {
-                  borderColorSaturation: 0.6,
-                  gapWidth: 1
+      const toNode = (node) => ({
+        ...node,
+        children: node.children?.map(toNode),
+        label: pointLabel4(node.label, labelFormatter)
+      });
+      return mergeChartOption11(
+        {
+          tooltip: buildTooltip11(
+            {
+              formatter: (params) => {
+                const p = params;
+                return `${escapeHtml6(p.name)}: ${escapeHtml6(formatTooltipValue6(p.value, tooltipValueFormatter))}`;
+              }
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter
+            }
+          ),
+          series: [
+            {
+              type: "treemap",
+              data: data.map(toNode),
+              roam: false,
+              levels: levels || [
+                {
+                  itemStyle: {
+                    borderColor: chartColors.divider,
+                    borderWidth: 4,
+                    gapWidth: 4
+                  }
+                },
+                {
+                  colorSaturation: [0.3, 0.6],
+                  itemStyle: {
+                    borderColorSaturation: 0.7,
+                    gapWidth: 2,
+                    borderWidth: 2
+                  }
+                },
+                {
+                  colorSaturation: [0.3, 0.5],
+                  itemStyle: {
+                    borderColorSaturation: 0.6,
+                    gapWidth: 1
+                  }
+                },
+                {
+                  colorSaturation: [0.3, 0.5]
                 }
+              ],
+              label: buildDataLabel10({ show: true, formatter: "{b}" }, void 0, {
+                show: true,
+                formatter: labelFormatter,
+                getLabel: nameLabelLookup(data)
+              }),
+              upperLabel: {
+                show: true,
+                height: 30
               },
-              {
-                colorSaturation: [0.3, 0.5]
+              breadcrumb: {
+                show: true
               }
-            ],
-            label: {
-              show: true,
-              formatter: "{b}"
-            },
-            upperLabel: {
-              show: true,
-              height: 30
-            },
-            breadcrumb: {
-              show: true
             }
-          }
-        ]
-      };
-    }, [data, levels, isEmpty, showTooltip]);
+          ]
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      levels,
+      isEmpty,
+      showTooltip,
+      chartColors,
+      labelFormatter,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      optionOverride
+    ]);
+    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);
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       ChartContainer,
       {
         ref,
@@ -1830,7 +2696,7 @@ var TreemapChart = React15.forwardRef(
         emptyMessage,
         className: cn(className),
         ...props,
-        children: /* @__PURE__ */ jsx15("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx16("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1838,7 +2704,7 @@ var TreemapChart = React15.forwardRef(
 TreemapChart.displayName = "TreemapChart";
 
 // src/components/extended/CandlestickChart.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 import * as echarts14 from "echarts/core";
 import {
   CandlestickChart as EChartsCandlestickChart,
@@ -1846,22 +2712,29 @@ import {
 } from "echarts/charts";
 import {
   GridComponent as GridComponent6,
-  TooltipComponent as TooltipComponent11,
+  TooltipComponent as TooltipComponent12,
   TitleComponent as TitleComponent12,
   DataZoomComponent
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer12 } from "echarts/renderers";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import {
+  buildAxis as buildAxis6,
+  buildTooltip as buildTooltip12,
+  getChartColors as getChartColors11,
+  mergeChartOption as mergeChartOption12,
+  THEME_DARK as THEME_DARK7
+} from "@classic-homes/charts-core";
+import { jsx as jsx17 } from "react/jsx-runtime";
 echarts14.use([
   EChartsCandlestickChart,
   EChartsBarChart2,
   GridComponent6,
-  TooltipComponent11,
+  TooltipComponent12,
   TitleComponent12,
   DataZoomComponent,
   CanvasRenderer12
 ]);
-var CandlestickChart = React16.forwardRef(
+var CandlestickChart = React17.forwardRef(
   ({
     title,
     description,
@@ -1874,12 +2747,19 @@ var CandlestickChart = React16.forwardRef(
     animation = true,
     showTooltip = true,
     showVolume = false,
+    xAxisConfig,
+    yAxisConfig,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.dates?.length || !data?.data?.length;
-    const option = React16.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const chartColors = getChartColors11(currentTheme);
+    const option = React17.useMemo(() => {
       if (isEmpty) return {};
       const candlestickData = data.data.map((item) => [item.open, item.close, item.low, item.high]);
       const seriesArr = [
@@ -1888,12 +2768,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
           }
         }
       ];
@@ -1906,23 +2786,29 @@ var CandlestickChart = React16.forwardRef(
         }
       ];
       const xAxisArr = [
-        {
-          type: "category",
-          data: data.dates,
-          boundaryGap: false,
-          axisLine: { onZero: false },
-          splitLine: { show: false },
-          min: "dataMin",
-          max: "dataMax"
-        }
+        buildAxis6(
+          {
+            type: "category",
+            data: data.dates,
+            boundaryGap: false,
+            axisLine: { onZero: false },
+            splitLine: { show: false },
+            min: "dataMin",
+            max: "dataMax"
+          },
+          xAxisConfig
+        )
       ];
       const yAxisArr = [
-        {
-          scale: true,
-          splitArea: {
-            show: true
-          }
-        }
+        buildAxis6(
+          {
+            scale: true,
+            splitArea: {
+              show: true
+            }
+          },
+          yAxisConfig
+        )
       ];
       if (showVolume && data.volume) {
         gridArr.push({
@@ -1959,62 +2845,86 @@ var CandlestickChart = React16.forwardRef(
           yAxisIndex: 1,
           data: data.volume,
           itemStyle: {
-            color: "#6b7280"
+            color: chartColors.mutedForeground
           }
         });
       }
-      return {
-        tooltip: showTooltip ? {
-          trigger: "axis",
-          axisPointer: {
-            type: "cross"
-          }
-        } : void 0,
-        grid: gridArr,
-        xAxis: xAxisArr,
-        yAxis: yAxisArr,
-        dataZoom: [
-          {
-            type: "inside",
-            start: 80,
-            end: 100
-          },
-          {
-            show: true,
-            type: "slider",
-            top: "90%",
-            start: 80,
-            end: 100
-          }
-        ],
-        series: seriesArr
-      };
-    }, [data, isEmpty, showTooltip, showVolume, title]);
+      return mergeChartOption12(
+        {
+          tooltip: buildTooltip12(
+            {
+              trigger: "axis",
+              axisPointer: {
+                type: "cross"
+              }
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter
+            }
+          ),
+          grid: gridArr,
+          xAxis: xAxisArr,
+          yAxis: yAxisArr,
+          dataZoom: [
+            {
+              type: "inside",
+              start: 80,
+              end: 100
+            },
+            {
+              show: true,
+              type: "slider",
+              top: "90%",
+              start: 80,
+              end: 100
+            }
+          ],
+          series: seriesArr
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      showVolume,
+      title,
+      chartColors,
+      xAxisConfig,
+      yAxisConfig,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      optionOverride
+    ]);
+    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);
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       ChartContainer,
       {
         ref,
@@ -2027,7 +2937,7 @@ var CandlestickChart = React16.forwardRef(
         emptyMessage,
         className: cn(className),
         ...props,
-        children: /* @__PURE__ */ jsx16("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx17("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -2035,14 +2945,21 @@ var CandlestickChart = React16.forwardRef(
 CandlestickChart.displayName = "CandlestickChart";
 
 // src/components/extended/SankeyChart.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import * as echarts15 from "echarts/core";
 import { SankeyChart as EChartsSankeyChart } from "echarts/charts";
-import { TooltipComponent as TooltipComponent12, TitleComponent as TitleComponent13 } from "echarts/components";
+import { TooltipComponent as TooltipComponent13, TitleComponent as TitleComponent13 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer13 } from "echarts/renderers";
-import { jsx as jsx17 } from "react/jsx-runtime";
-echarts15.use([EChartsSankeyChart, TooltipComponent12, TitleComponent13, CanvasRenderer13]);
-var SankeyChart = React17.forwardRef(
+import {
+  buildDataLabel as buildDataLabel11,
+  buildTooltip as buildTooltip13,
+  mergeChartOption as mergeChartOption13,
+  nameLabelLookup as nameLabelLookup2,
+  pointLabel as pointLabel5
+} from "@classic-homes/charts-core";
+import { jsx as jsx18 } from "react/jsx-runtime";
+echarts15.use([EChartsSankeyChart, TooltipComponent13, TitleComponent13, CanvasRenderer13]);
+var SankeyChart = React18.forwardRef(
   ({
     title,
     description,
@@ -2055,68 +2972,97 @@ var SankeyChart = React17.forwardRef(
     animation = true,
     showTooltip = true,
     orient = "horizontal",
+    labelFormatter,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.nodes?.length || !data?.links?.length;
-    const option = React17.useMemo(() => {
+    const option = React18.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        tooltip: showTooltip ? {
-          trigger: "item",
-          triggerOn: "mousemove"
-        } : void 0,
-        series: [
-          {
-            type: "sankey",
-            orient,
-            emphasis: {
-              focus: "adjacency"
-            },
-            data: data.nodes.map((node) => ({
-              name: node.name,
-              itemStyle: node.color ? { color: node.color } : void 0
-            })),
-            links: data.links.map((link) => ({
-              source: link.source,
-              target: link.target,
-              value: link.value
-            })),
-            lineStyle: {
-              color: "gradient",
-              curveness: 0.5
+      return mergeChartOption13(
+        {
+          tooltip: buildTooltip13(
+            {
+              trigger: "item",
+              triggerOn: "mousemove"
             },
-            label: {
-              position: orient === "horizontal" ? "right" : "bottom"
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter
             }
-          }
-        ]
-      };
-    }, [data, isEmpty, showTooltip, orient]);
+          ),
+          series: [
+            {
+              type: "sankey",
+              orient,
+              emphasis: {
+                focus: "adjacency"
+              },
+              data: data.nodes.map((node) => ({
+                name: node.name,
+                itemStyle: node.color ? { color: node.color } : void 0,
+                label: pointLabel5(node.label, labelFormatter)
+              })),
+              links: data.links.map((link) => ({
+                source: link.source,
+                target: link.target,
+                value: link.value
+              })),
+              lineStyle: {
+                color: "gradient",
+                curveness: 0.5
+              },
+              label: buildDataLabel11(
+                {
+                  position: orient === "horizontal" ? "right" : "bottom"
+                },
+                void 0,
+                { show: true, formatter: labelFormatter, getLabel: nameLabelLookup2(data.nodes) }
+              )
+            }
+          ]
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      orient,
+      labelFormatter,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      optionOverride
+    ]);
+    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);
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       ChartContainer,
       {
         ref,
@@ -2129,7 +3075,7 @@ var SankeyChart = React17.forwardRef(
         emptyMessage,
         className: cn(className),
         ...props,
-        children: /* @__PURE__ */ jsx17("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx18("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -2142,6 +3088,7 @@ export {
   ChartContainer,
   ChartEmpty,
   ChartError,
+  ChartLegend,
   ChartSkeleton,
   DonutChart,
   FunnelChart,
@@ -2156,6 +3103,7 @@ export {
   cn,
   registerClassicThemes,
   useChart,
+  useChartLegend,
   useChartResize,
   useChartTheme,
   useReducedMotion