@optilogic/charts 1.0.0-beta.8 → 1.0.0

package/dist/index.js

@@ -1,21 +1,389 @@
-import * as React from 'react';
-import { ResponsiveContainer, LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Line, BarChart as BarChart$1, Bar } from 'recharts';
+import * as React17 from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ResponsiveContainer, LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Line, BarChart as BarChart$1, Bar, AreaChart as AreaChart$1, Area, ScatterChart as ScatterChart$1, ZAxis, Scatter, ComposedChart as ComposedChart$1, ReferenceLine, Cell, PieChart as PieChart$1, Pie, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, Sankey, Treemap, FunnelChart as FunnelChart$1, Funnel, LabelList, Layer, Rectangle } from 'recharts';
 import { cn } from '@optilogic/core';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/line-chart.tsx
+// src/shared/colors.ts
 var CHART_COLORS = [
   "hsl(var(--chart-1))",
   "hsl(var(--chart-2))",
   "hsl(var(--chart-3))",
   "hsl(var(--chart-4))",
-  "hsl(var(--chart-5))"
+  "hsl(var(--chart-5))",
+  "hsl(var(--chart-6))",
+  "hsl(var(--chart-7))",
+  "hsl(var(--chart-8))",
+  "hsl(var(--chart-9))",
+  "hsl(var(--chart-10))",
+  "hsl(var(--chart-11))",
+  "hsl(var(--chart-12))"
 ];
 function getChartColor(index, custom) {
   if (custom) return custom;
   return CHART_COLORS[index % CHART_COLORS.length] ?? "hsl(var(--chart-1))";
 }
-var LineChart = React.forwardRef(
+var SEMANTIC_COLORS = {
+  positive: "hsl(var(--success))",
+  negative: "hsl(var(--destructive))",
+  neutral: "hsl(var(--muted-foreground))",
+  warning: "hsl(var(--warning))"
+};
+function getSemanticColor(name) {
+  return SEMANTIC_COLORS[name];
+}
+var ChartTooltipContent = React17.memo(function ChartTooltipContent2({
+  active,
+  payload,
+  label,
+  config
+}) {
+  if (!active || !payload?.length) return null;
+  const items = payload;
+  const formattedLabel = config?.labelFormatter ? config.labelFormatter(String(label)) : String(label ?? "");
+  const total = config?.showTotal ? items.reduce((sum, item) => sum + (Number(item.value) || 0), 0) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        background: "hsl(var(--card))",
+        border: "1px solid hsl(var(--border))",
+        borderRadius: 6,
+        padding: "8px 10px",
+        fontSize: 11,
+        lineHeight: 1.5,
+        boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+        minWidth: 120
+      },
+      children: [
+        formattedLabel && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              color: "hsl(var(--foreground))",
+              fontWeight: 600,
+              marginBottom: 4,
+              borderBottom: "1px solid hsl(var(--border))",
+              paddingBottom: 4
+            },
+            children: formattedLabel
+          }
+        ),
+        items.map((item, i) => {
+          const formatted = config?.formatter ? config.formatter(Number(item.value), item.name) : String(item.value);
+          const displayValue = Array.isArray(formatted) ? formatted[0] : formatted;
+          const displayName = Array.isArray(formatted) ? formatted[1] : item.name;
+          let delta = null;
+          if (config?.showDelta && config.baseline) {
+            const baselineValue = Number(
+              item.payload?.[config.baseline] ?? 0
+            );
+            if (baselineValue !== 0) {
+              const diff = Number(item.value) - baselineValue;
+              const pct = (diff / baselineValue * 100).toFixed(1);
+              const sign = diff >= 0 ? "+" : "";
+              const color = diff > 0 ? "hsl(var(--success))" : diff < 0 ? "hsl(var(--destructive))" : "hsl(var(--muted-foreground))";
+              delta = /* @__PURE__ */ jsxs("span", { style: { color, marginLeft: 4, fontSize: 10 }, children: [
+                diff >= 0 ? "\u25B2" : "\u25BC",
+                " ",
+                sign,
+                pct,
+                "%"
+              ] });
+            }
+          }
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 12,
+                padding: "1px 0"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        width: 8,
+                        height: 8,
+                        borderRadius: "50%",
+                        background: item.color,
+                        flexShrink: 0
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { style: { color: "hsl(var(--muted-foreground))" }, children: displayName })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontWeight: 600,
+                      color: "hsl(var(--foreground))",
+                      fontVariantNumeric: "tabular-nums"
+                    },
+                    children: [
+                      displayValue,
+                      delta
+                    ]
+                  }
+                )
+              ]
+            },
+            item.dataKey ?? i
+          );
+        }),
+        total != null && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              borderTop: "1px solid hsl(var(--border))",
+              marginTop: 4,
+              paddingTop: 4,
+              display: "flex",
+              justifyContent: "space-between",
+              fontWeight: 600,
+              color: "hsl(var(--foreground))"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { children: "Total" }),
+              /* @__PURE__ */ jsx("span", { style: { fontVariantNumeric: "tabular-nums" }, children: config?.formatter ? config.formatter(total, "Total") : total })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+function resolveTooltipProps(tooltip) {
+  if (tooltip === false || tooltip === void 0) return null;
+  if (tooltip === true) return { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) };
+  return {
+    content: /* @__PURE__ */ jsx(ChartTooltipContent, { config: tooltip })
+  };
+}
+var ChartLegendContent = React17.memo(function ChartLegendContent2({
+  payload
+}) {
+  if (!payload?.length) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "8px 16px",
+        fontSize: 11,
+        lineHeight: 1,
+        padding: "0 0 4px"
+      },
+      children: payload.map((entry, i) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          style: { display: "flex", alignItems: "center", gap: 5 },
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  width: 8,
+                  height: 8,
+                  borderRadius: "50%",
+                  background: entry.color,
+                  flexShrink: 0
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: { color: "hsl(var(--muted-foreground))" }, children: entry.value })
+          ]
+        },
+        entry.dataKey ?? i
+      ))
+    }
+  );
+});
+function resolveLegendConfig(legend) {
+  if (legend === false || legend === void 0) return null;
+  if (legend === true) return { position: "top", align: "right" };
+  return legend;
+}
+var ChartContainer = React17.forwardRef(function ChartContainer2({
+  children,
+  className,
+  height = "100%",
+  loading,
+  empty,
+  emptyMessage = "No data available",
+  title,
+  description
+}, ref) {
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), style: { height }, children: [
+    (title || description) && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 8 }, children: [
+      title && /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            fontSize: 13,
+            fontWeight: 600,
+            color: "hsl(var(--foreground))"
+          },
+          children: title
+        }
+      ),
+      description && /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            fontSize: 11,
+            color: "hsl(var(--muted-foreground))",
+            marginTop: 2
+          },
+          children: description
+        }
+      )
+    ] }),
+    loading ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: title || description ? "calc(100% - 40px)" : "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "animate-pulse",
+            style: {
+              width: "80%",
+              height: "60%",
+              borderRadius: 6,
+              background: "hsl(var(--muted))"
+            }
+          }
+        )
+      }
+    ) : empty ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: title || description ? "calc(100% - 40px)" : "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "hsl(var(--muted-foreground))",
+          fontSize: 12
+        },
+        children: emptyMessage
+      }
+    ) : /* @__PURE__ */ jsx(
+      ResponsiveContainer,
+      {
+        width: "100%",
+        height: title || description ? "calc(100% - 40px)" : "100%",
+        children
+      }
+    )
+  ] });
+});
+function useLiveData(config = {}) {
+  const {
+    initial = [],
+    maxPoints = 200,
+    interval = 2e3,
+    fetcher,
+    paused: initialPaused = false
+  } = config;
+  const [data, setData] = useState(initial);
+  const [isPaused, setIsPaused] = useState(initialPaused);
+  const bufferRef = useRef(initial);
+  const push = useCallback(
+    (...items) => {
+      bufferRef.current = [...bufferRef.current, ...items].slice(-maxPoints);
+      setData(bufferRef.current);
+    },
+    [maxPoints]
+  );
+  const replace = useCallback((items) => {
+    bufferRef.current = items;
+    setData(items);
+  }, []);
+  const pause = useCallback(() => setIsPaused(true), []);
+  const resume = useCallback(() => setIsPaused(false), []);
+  useEffect(() => {
+    if (!fetcher || isPaused) return;
+    let cancelled = false;
+    const tick = async () => {
+      try {
+        const result = await fetcher();
+        if (!cancelled) {
+          bufferRef.current = result.slice(-maxPoints);
+          setData(bufferRef.current);
+        }
+      } catch {
+      }
+    };
+    tick();
+    const id = setInterval(tick, interval);
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, [fetcher, interval, isPaused, maxPoints]);
+  return { data, push, replace, isPaused, pause, resume };
+}
+
+// src/shared/formatters.ts
+var compactThresholds = [
+  [1e9, "B"],
+  [1e6, "M"],
+  [1e3, "K"]
+];
+function formatCompact(value, decimals = 1) {
+  for (const [threshold, suffix] of compactThresholds) {
+    if (Math.abs(value) >= threshold) {
+      return `${(value / threshold).toFixed(decimals)}${suffix}`;
+    }
+  }
+  return value.toLocaleString();
+}
+function formatCurrency(value, currency = "USD", decimals) {
+  if (Math.abs(value) >= 1e6) {
+    return `$${formatCompact(value, decimals ?? 1)}`;
+  }
+  return value.toLocaleString("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: decimals ?? 0,
+    maximumFractionDigits: decimals ?? 0
+  });
+}
+function formatPercent(value, decimals = 1) {
+  return `${value.toFixed(decimals)}%`;
+}
+function formatUnit(value, unit, decimals = 1) {
+  return `${value.toLocaleString(void 0, { maximumFractionDigits: decimals })} ${unit}`;
+}
+function formatDuration(seconds) {
+  if (seconds < 60) return `${Math.round(seconds)}s`;
+  if (seconds < 3600) return `${Math.round(seconds / 60)}m`;
+  if (seconds < 86400) {
+    const h2 = Math.floor(seconds / 3600);
+    const m = Math.round(seconds % 3600 / 60);
+    return m > 0 ? `${h2}h ${m}m` : `${h2}h`;
+  }
+  const d = Math.floor(seconds / 86400);
+  const h = Math.round(seconds % 86400 / 3600);
+  return h > 0 ? `${d}d ${h}h` : `${d}d`;
+}
+var LineChart = React17.forwardRef(
   ({
     data,
     series,
@@ -25,112 +393,105 @@ var LineChart = React.forwardRef(
     tooltip = true,
     legend = false,
     animate = false,
+    live = false,
     className,
     height = "100%",
-    margin = { top: 8, right: 12, left: 0, bottom: 4 }
+    margin = { top: 8, right: 12, left: 0, bottom: 4 },
+    loading
   }, ref) => {
-    const gridConfig = React.useMemo(() => {
+    const gridConfig = React17.useMemo(() => {
       if (grid === false) return null;
       if (grid === true) return { vertical: false, horizontal: true };
       return grid;
     }, [grid]);
-    const legendConfig = React.useMemo(() => {
-      if (legend === false) return null;
-      if (legend === true)
-        return { position: "top", align: "right" };
-      return legend;
-    }, [legend]);
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), style: { height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin, children: [
-      gridConfig && /* @__PURE__ */ jsx(
-        CartesianGrid,
-        {
-          strokeDasharray: "3 3",
-          stroke: "hsl(var(--divider))",
-          vertical: gridConfig.vertical ?? false,
-          horizontal: gridConfig.horizontal ?? true
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        XAxis,
-        {
-          dataKey: xAxis.dataKey,
-          tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
-          tickLine: false,
-          axisLine: false,
-          minTickGap: xAxis.minTickGap ?? 24,
-          tickFormatter: xAxis.tickFormatter,
-          label: xAxis.label ? {
-            value: xAxis.label,
-            position: "insideBottom",
-            offset: -4,
-            fontSize: 11,
-            fill: "hsl(var(--muted-foreground))"
-          } : void 0
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        YAxis,
-        {
-          domain: yAxis?.domain ?? ["auto", "auto"],
-          tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
-          tickLine: false,
-          axisLine: false,
-          width: yAxis?.width ?? 30,
-          tickFormatter: yAxis?.tickFormatter,
-          label: yAxis?.label ? {
-            value: yAxis.label,
-            angle: -90,
-            position: "insideLeft",
-            fontSize: 11,
-            fill: "hsl(var(--muted-foreground))"
-          } : void 0
-        }
-      ),
-      tooltip && /* @__PURE__ */ jsx(
-        Tooltip,
-        {
-          contentStyle: {
-            background: "hsl(var(--card))",
-            border: "1px solid hsl(var(--border))",
-            borderRadius: 6,
-            fontSize: 11
-          },
-          labelStyle: {
-            color: "hsl(var(--foreground))",
-            fontWeight: 500,
-            marginBottom: 4
-          },
-          itemStyle: {
-            color: "hsl(var(--foreground))"
-          }
-        }
-      ),
-      legendConfig && /* @__PURE__ */ jsx(
-        Legend,
-        {
-          verticalAlign: legendConfig.position ?? "top",
-          align: legendConfig.align ?? "right",
-          wrapperStyle: { fontSize: 11, paddingBottom: 4 }
-        }
-      ),
-      series.map((s, index) => /* @__PURE__ */ jsx(
-        Line,
-        {
-          type: s.type ?? "monotone",
-          dataKey: s.dataKey,
-          name: s.name,
-          stroke: getChartColor(index, s.color),
-          strokeWidth: s.strokeWidth ?? 2,
-          dot: s.dot ?? false,
-          isAnimationActive: animate
-        },
-        s.dataKey
-      ))
-    ] }) }) });
+    const legendConfig = resolveLegendConfig(legend);
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+    return /* @__PURE__ */ jsx(
+      ChartContainer,
+      {
+        ref,
+        className,
+        height,
+        loading,
+        empty: !data?.length,
+        children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin, children: [
+          gridConfig && /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              strokeDasharray: "3 3",
+              stroke: "hsl(var(--divider))",
+              vertical: gridConfig.vertical ?? false,
+              horizontal: gridConfig.horizontal ?? true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: xAxis.dataKey,
+              tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+              tickLine: false,
+              axisLine: false,
+              minTickGap: xAxis.minTickGap ?? 24,
+              tickFormatter: xAxis.tickFormatter,
+              label: xAxis.label ? {
+                value: xAxis.label,
+                position: "insideBottom",
+                offset: -4,
+                fontSize: 11,
+                fill: "hsl(var(--muted-foreground))"
+              } : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              domain: yAxis?.domain ?? ["auto", "auto"],
+              tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+              tickLine: false,
+              axisLine: false,
+              width: yAxis?.width ?? 30,
+              tickFormatter: yAxis?.tickFormatter,
+              label: yAxis?.label ? {
+                value: yAxis.label,
+                angle: -90,
+                position: "insideLeft",
+                fontSize: 11,
+                fill: "hsl(var(--muted-foreground))"
+              } : void 0
+            }
+          ),
+          tooltipProps && /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps }),
+          legendConfig && /* @__PURE__ */ jsx(
+            Legend,
+            {
+              verticalAlign: legendConfig.position ?? "top",
+              align: legendConfig.align ?? "right",
+              content: /* @__PURE__ */ jsx(ChartLegendContent, {})
+            }
+          ),
+          series.map((s, index) => /* @__PURE__ */ jsx(
+            Line,
+            {
+              type: s.type ?? "monotone",
+              dataKey: s.dataKey,
+              name: s.name,
+              stroke: getChartColor(index, s.color),
+              strokeWidth: s.strokeWidth ?? 2,
+              strokeDasharray: s.strokeDasharray,
+              dot: s.dot ?? false,
+              isAnimationActive: isAnimated,
+              animationDuration: isAnimated ? 300 : 0
+            },
+            s.dataKey
+          ))
+        ] })
+      }
+    );
   }
 );
 LineChart.displayName = "LineChart";
-var BarChart = React.forwardRef(
+var BarChart = React17.forwardRef(
   ({
     data,
     series,
@@ -141,105 +502,351 @@ var BarChart = React.forwardRef(
     tooltip = true,
     legend = false,
     animate = true,
+    live = false,
     barSize,
     barGap,
     barCategoryGap,
     className,
     height = "100%",
-    margin = { top: 8, right: 12, left: 0, bottom: 4 }
+    margin = { top: 8, right: 12, left: 0, bottom: 4 },
+    loading
   }, ref) => {
-    const gridConfig = React.useMemo(() => {
+    const gridConfig = React17.useMemo(() => {
       if (grid === false) return null;
       if (grid === true) return { vertical: false, horizontal: true };
       return grid;
     }, [grid]);
-    const legendConfig = React.useMemo(() => {
-      if (legend === false) return null;
-      if (legend === true)
-        return { position: "top", align: "right" };
-      return legend;
-    }, [legend]);
+    const legendConfig = resolveLegendConfig(legend);
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
     const isHorizontal = layout === "horizontal";
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), style: { height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
-      BarChart$1,
+    return /* @__PURE__ */ jsx(
+      ChartContainer,
       {
-        data,
-        layout: isHorizontal ? "vertical" : "horizontal",
-        margin,
-        barSize,
-        barGap,
-        barCategoryGap,
-        children: [
+        ref,
+        className,
+        height,
+        loading,
+        empty: !data?.length,
+        children: /* @__PURE__ */ jsxs(
+          BarChart$1,
+          {
+            data,
+            layout: isHorizontal ? "vertical" : "horizontal",
+            margin,
+            barSize,
+            barGap,
+            barCategoryGap,
+            children: [
+              gridConfig && /* @__PURE__ */ jsx(
+                CartesianGrid,
+                {
+                  strokeDasharray: "3 3",
+                  stroke: "hsl(var(--divider))",
+                  vertical: isHorizontal ? gridConfig.horizontal ?? true : gridConfig.vertical ?? false,
+                  horizontal: isHorizontal ? gridConfig.vertical ?? false : gridConfig.horizontal ?? true
+                }
+              ),
+              isHorizontal ? /* @__PURE__ */ jsx(
+                XAxis,
+                {
+                  type: "number",
+                  domain: yAxis?.domain ?? ["auto", "auto"],
+                  tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+                  tickLine: false,
+                  axisLine: false,
+                  tickFormatter: yAxis?.tickFormatter,
+                  label: yAxis?.label ? {
+                    value: yAxis.label,
+                    position: "insideBottom",
+                    offset: -4,
+                    fontSize: 11,
+                    fill: "hsl(var(--muted-foreground))"
+                  } : void 0
+                }
+              ) : /* @__PURE__ */ jsx(
+                XAxis,
+                {
+                  dataKey: xAxis.dataKey,
+                  tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+                  tickLine: false,
+                  axisLine: false,
+                  minTickGap: xAxis.minTickGap ?? 24,
+                  tickFormatter: xAxis.tickFormatter,
+                  label: xAxis.label ? {
+                    value: xAxis.label,
+                    position: "insideBottom",
+                    offset: -4,
+                    fontSize: 11,
+                    fill: "hsl(var(--muted-foreground))"
+                  } : void 0
+                }
+              ),
+              isHorizontal ? /* @__PURE__ */ jsx(
+                YAxis,
+                {
+                  type: "category",
+                  dataKey: xAxis.dataKey,
+                  tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+                  tickLine: false,
+                  axisLine: false,
+                  width: yAxis?.width ?? 80,
+                  tickFormatter: xAxis.tickFormatter
+                }
+              ) : /* @__PURE__ */ jsx(
+                YAxis,
+                {
+                  domain: yAxis?.domain ?? ["auto", "auto"],
+                  tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+                  tickLine: false,
+                  axisLine: false,
+                  width: yAxis?.width ?? 30,
+                  tickFormatter: yAxis?.tickFormatter,
+                  label: yAxis?.label ? {
+                    value: yAxis.label,
+                    angle: -90,
+                    position: "insideLeft",
+                    fontSize: 11,
+                    fill: "hsl(var(--muted-foreground))"
+                  } : void 0
+                }
+              ),
+              tooltipProps && /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  ...tooltipProps,
+                  cursor: { fill: "hsl(var(--accent))", fillOpacity: 0.3 }
+                }
+              ),
+              legendConfig && /* @__PURE__ */ jsx(
+                Legend,
+                {
+                  verticalAlign: legendConfig.position ?? "top",
+                  align: legendConfig.align ?? "right",
+                  content: /* @__PURE__ */ jsx(ChartLegendContent, {})
+                }
+              ),
+              series.map((s, index) => /* @__PURE__ */ jsx(
+                Bar,
+                {
+                  dataKey: s.dataKey,
+                  name: s.name,
+                  fill: getChartColor(index, s.color),
+                  stackId: s.stackId,
+                  radius: s.radius ?? 0,
+                  isAnimationActive: isAnimated,
+                  animationDuration: isAnimated ? 300 : 0
+                },
+                s.dataKey
+              ))
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+BarChart.displayName = "BarChart";
+var AreaChart = React17.forwardRef(
+  ({
+    data,
+    series,
+    xAxis,
+    yAxis,
+    grid = true,
+    tooltip = true,
+    legend = false,
+    animate = true,
+    live = false,
+    className,
+    height = "100%",
+    margin = { top: 8, right: 12, left: 0, bottom: 4 },
+    loading
+  }, ref) => {
+    const gridConfig = React17.useMemo(() => {
+      if (grid === false) return null;
+      if (grid === true) return { vertical: false, horizontal: true };
+      return grid;
+    }, [grid]);
+    const legendConfig = resolveLegendConfig(legend);
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+    return /* @__PURE__ */ jsx(
+      ChartContainer,
+      {
+        ref,
+        className,
+        height,
+        loading,
+        empty: !data?.length,
+        children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin, children: [
+          /* @__PURE__ */ jsx("defs", { children: series.map((s, index) => {
+            const color = getChartColor(index, s.color);
+            return /* @__PURE__ */ jsxs(
+              "linearGradient",
+              {
+                id: `area-gradient-${s.dataKey}`,
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [
+                  /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: color, stopOpacity: 0.3 }),
+                  /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: color, stopOpacity: 0.05 })
+                ]
+              },
+              s.dataKey
+            );
+          }) }),
           gridConfig && /* @__PURE__ */ jsx(
             CartesianGrid,
             {
               strokeDasharray: "3 3",
               stroke: "hsl(var(--divider))",
-              vertical: isHorizontal ? gridConfig.horizontal ?? true : gridConfig.vertical ?? false,
-              horizontal: isHorizontal ? gridConfig.vertical ?? false : gridConfig.horizontal ?? true
+              vertical: gridConfig.vertical ?? false,
+              horizontal: gridConfig.horizontal ?? true
             }
           ),
-          isHorizontal ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(
             XAxis,
             {
-              type: "number",
-              domain: yAxis?.domain ?? ["auto", "auto"],
+              dataKey: xAxis.dataKey,
               tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
               tickLine: false,
               axisLine: false,
-              tickFormatter: yAxis?.tickFormatter,
-              label: yAxis?.label ? {
-                value: yAxis.label,
+              minTickGap: xAxis.minTickGap ?? 24,
+              tickFormatter: xAxis.tickFormatter,
+              label: xAxis.label ? {
+                value: xAxis.label,
                 position: "insideBottom",
                 offset: -4,
                 fontSize: 11,
                 fill: "hsl(var(--muted-foreground))"
               } : void 0
             }
-          ) : /* @__PURE__ */ jsx(
-            XAxis,
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
             {
-              dataKey: xAxis.dataKey,
+              domain: yAxis?.domain ?? ["auto", "auto"],
               tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
               tickLine: false,
               axisLine: false,
-              minTickGap: xAxis.minTickGap ?? 24,
-              tickFormatter: xAxis.tickFormatter,
-              label: xAxis.label ? {
-                value: xAxis.label,
-                position: "insideBottom",
-                offset: -4,
+              width: yAxis?.width ?? 30,
+              tickFormatter: yAxis?.tickFormatter,
+              label: yAxis?.label ? {
+                value: yAxis.label,
+                angle: -90,
+                position: "insideLeft",
                 fontSize: 11,
                 fill: "hsl(var(--muted-foreground))"
               } : void 0
             }
           ),
-          isHorizontal ? /* @__PURE__ */ jsx(
-            YAxis,
+          tooltipProps && /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps }),
+          legendConfig && /* @__PURE__ */ jsx(
+            Legend,
+            {
+              verticalAlign: legendConfig.position ?? "top",
+              align: legendConfig.align ?? "right",
+              content: /* @__PURE__ */ jsx(ChartLegendContent, {})
+            }
+          ),
+          series.map((s, index) => /* @__PURE__ */ jsx(
+            Area,
+            {
+              type: s.type ?? "monotone",
+              dataKey: s.dataKey,
+              name: s.name,
+              stroke: getChartColor(index, s.color),
+              strokeWidth: s.strokeWidth ?? 2,
+              fill: `url(#area-gradient-${s.dataKey})`,
+              fillOpacity: s.fillOpacity ?? 1,
+              stackId: s.stackId,
+              isAnimationActive: isAnimated,
+              animationDuration: isAnimated ? 300 : 0
+            },
+            s.dataKey
+          ))
+        ] })
+      }
+    );
+  }
+);
+AreaChart.displayName = "AreaChart";
+var ScatterChart = React17.forwardRef(
+  ({
+    series,
+    xAxis,
+    yAxis,
+    zAxis,
+    grid = true,
+    tooltip = true,
+    legend = false,
+    animate = true,
+    live = false,
+    className,
+    height = "100%",
+    margin = { top: 8, right: 12, left: 0, bottom: 4 },
+    loading
+  }, ref) => {
+    const gridConfig = React17.useMemo(() => {
+      if (grid === false) return null;
+      if (grid === true) return { vertical: true, horizontal: true };
+      return grid;
+    }, [grid]);
+    const legendConfig = resolveLegendConfig(legend);
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+    const hasZ = series.some((s) => s.zDataKey);
+    return /* @__PURE__ */ jsx(
+      ChartContainer,
+      {
+        ref,
+        className,
+        height,
+        loading,
+        empty: !series.some((s) => s.data?.length),
+        children: /* @__PURE__ */ jsxs(ScatterChart$1, { margin, children: [
+          gridConfig && /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              strokeDasharray: "3 3",
+              stroke: "hsl(var(--divider))",
+              vertical: gridConfig.vertical ?? true,
+              horizontal: gridConfig.horizontal ?? true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            XAxis,
             {
-              type: "category",
               dataKey: xAxis.dataKey,
+              name: xAxis.name ?? xAxis.dataKey,
+              type: "number",
               tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
               tickLine: false,
               axisLine: false,
-              width: yAxis?.width ?? 80,
               tickFormatter: xAxis.tickFormatter,
               label: xAxis.label ? {
                 value: xAxis.label,
-                angle: -90,
-                position: "insideLeft",
+                position: "insideBottom",
+                offset: -4,
                 fontSize: 11,
                 fill: "hsl(var(--muted-foreground))"
               } : void 0
             }
-          ) : /* @__PURE__ */ jsx(
+          ),
+          /* @__PURE__ */ jsx(
             YAxis,
             {
+              dataKey: yAxis?.domain ? void 0 : "y",
+              name: yAxis?.name,
+              type: "number",
               domain: yAxis?.domain ?? ["auto", "auto"],
               tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
               tickLine: false,
               axisLine: false,
-              width: yAxis?.width ?? 30,
+              width: yAxis?.width ?? 40,
               tickFormatter: yAxis?.tickFormatter,
               label: yAxis?.label ? {
                 value: yAxis.label,
@@ -250,53 +857,2277 @@ var BarChart = React.forwardRef(
               } : void 0
             }
           ),
-          tooltip && /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              contentStyle: {
-                background: "hsl(var(--card))",
-                border: "1px solid hsl(var(--border))",
-                borderRadius: 6,
-                fontSize: 11
-              },
-              labelStyle: {
-                color: "hsl(var(--foreground))",
-                fontWeight: 500,
-                marginBottom: 4
-              },
-              itemStyle: {
-                color: "hsl(var(--foreground))"
-              },
-              cursor: { fill: "hsl(var(--accent))", fillOpacity: 0.3 }
-            }
-          ),
+          hasZ && /* @__PURE__ */ jsx(ZAxis, { range: zAxis?.range ?? [40, 400] }),
+          tooltipProps && /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps }),
           legendConfig && /* @__PURE__ */ jsx(
             Legend,
             {
               verticalAlign: legendConfig.position ?? "top",
               align: legendConfig.align ?? "right",
-              wrapperStyle: { fontSize: 11, paddingBottom: 4 }
+              content: /* @__PURE__ */ jsx(ChartLegendContent, {})
             }
           ),
           series.map((s, index) => /* @__PURE__ */ jsx(
-            Bar,
+            Scatter,
             {
-              dataKey: s.dataKey,
               name: s.name,
+              data: s.data,
               fill: getChartColor(index, s.color),
-              stackId: s.stackId,
-              radius: s.radius ?? 0,
-              isAnimationActive: animate
+              isAnimationActive: isAnimated
             },
-            s.dataKey
+            s.name
           ))
-        ]
+        ] })
       }
-    ) }) });
+    );
   }
 );
-BarChart.displayName = "BarChart";
+ScatterChart.displayName = "ScatterChart";
+var ComposedChart = React17.forwardRef(
+  ({
+    data,
+    series,
+    xAxis,
+    yAxis,
+    yAxisRight,
+    grid = true,
+    tooltip = true,
+    legend = false,
+    animate = true,
+    live = false,
+    className,
+    height = "100%",
+    margin = { top: 8, right: 12, left: 0, bottom: 4 },
+    loading
+  }, ref) => {
+    const gridConfig = React17.useMemo(() => {
+      if (grid === false) return null;
+      if (grid === true) return { vertical: false, horizontal: true };
+      return grid;
+    }, [grid]);
+    const legendConfig = resolveLegendConfig(legend);
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+    return /* @__PURE__ */ jsx(
+      ChartContainer,
+      {
+        ref,
+        className,
+        height,
+        loading,
+        empty: !data?.length,
+        children: /* @__PURE__ */ jsxs(ComposedChart$1, { data, margin, children: [
+          gridConfig && /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              strokeDasharray: "3 3",
+              stroke: "hsl(var(--divider))",
+              vertical: gridConfig.vertical ?? false,
+              horizontal: gridConfig.horizontal ?? true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: xAxis.dataKey,
+              tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+              tickLine: false,
+              axisLine: false,
+              minTickGap: xAxis.minTickGap ?? 24,
+              tickFormatter: xAxis.tickFormatter,
+              label: xAxis.label ? {
+                value: xAxis.label,
+                position: "insideBottom",
+                offset: -4,
+                fontSize: 11,
+                fill: "hsl(var(--muted-foreground))"
+              } : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              yAxisId: "left",
+              domain: yAxis?.domain ?? ["auto", "auto"],
+              tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+              tickLine: false,
+              axisLine: false,
+              width: yAxis?.width ?? 40,
+              tickFormatter: yAxis?.tickFormatter,
+              label: yAxis?.label ? {
+                value: yAxis.label,
+                angle: -90,
+                position: "insideLeft",
+                fontSize: 11,
+                fill: "hsl(var(--muted-foreground))"
+              } : void 0
+            }
+          ),
+          yAxisRight && /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              yAxisId: yAxisRight.id,
+              orientation: "right",
+              domain: yAxisRight.domain ?? ["auto", "auto"],
+              tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+              tickLine: false,
+              axisLine: false,
+              width: yAxisRight.width ?? 40,
+              tickFormatter: yAxisRight.tickFormatter,
+              label: yAxisRight.label ? {
+                value: yAxisRight.label,
+                angle: 90,
+                position: "insideRight",
+                fontSize: 11,
+                fill: "hsl(var(--muted-foreground))"
+              } : void 0
+            }
+          ),
+          tooltipProps && /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps }),
+          legendConfig && /* @__PURE__ */ jsx(
+            Legend,
+            {
+              verticalAlign: legendConfig.position ?? "top",
+              align: legendConfig.align ?? "right",
+              content: /* @__PURE__ */ jsx(ChartLegendContent, {})
+            }
+          ),
+          series.map((s, index) => {
+            const color = getChartColor(index, s.color);
+            const yAxisId = s.yAxisId ?? "left";
+            const props = {
+              key: s.dataKey,
+              dataKey: s.dataKey,
+              name: s.name,
+              yAxisId,
+              isAnimationActive: isAnimated,
+              animationDuration: isAnimated ? 300 : 0
+            };
+            switch (s.type) {
+              case "line":
+                return /* @__PURE__ */ jsx(
+                  Line,
+                  {
+                    ...props,
+                    type: "monotone",
+                    stroke: color,
+                    strokeWidth: s.strokeWidth ?? 2,
+                    strokeDasharray: s.strokeDasharray,
+                    dot: false
+                  }
+                );
+              case "bar":
+                return /* @__PURE__ */ jsx(
+                  Bar,
+                  {
+                    ...props,
+                    fill: color,
+                    stackId: s.stackId,
+                    radius: s.radius ?? 0
+                  }
+                );
+              case "area":
+                return /* @__PURE__ */ jsx(
+                  Area,
+                  {
+                    ...props,
+                    type: "monotone",
+                    stroke: color,
+                    fill: color,
+                    fillOpacity: s.fillOpacity ?? 0.15,
+                    strokeWidth: s.strokeWidth ?? 2,
+                    stackId: s.stackId
+                  }
+                );
+            }
+          })
+        ] })
+      }
+    );
+  }
+);
+ComposedChart.displayName = "ComposedChart";
+function buildWaterfallData(items) {
+  let running = 0;
+  return items.map((item) => {
+    if (item.isTotal) {
+      const row = {
+        name: item.name,
+        invisible: 0,
+        delta: running,
+        isTotal: true,
+        rawValue: running
+      };
+      return row;
+    }
+    const start = running;
+    running += item.value;
+    const base = item.value >= 0 ? start : running;
+    return {
+      name: item.name,
+      invisible: base,
+      delta: Math.abs(item.value),
+      isTotal: false,
+      rawValue: item.value
+    };
+  });
+}
+var WaterfallChart = React17.forwardRef(
+  ({
+    data,
+    xAxis,
+    yAxis,
+    tooltip = true,
+    positiveColor,
+    negativeColor,
+    totalColor,
+    animate = true,
+    live = false,
+    className,
+    height = "100%",
+    margin = { top: 8, right: 12, left: 0, bottom: 4 },
+    loading
+  }, ref) => {
+    const rows = React17.useMemo(() => buildWaterfallData(data), [data]);
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+    const posColor = positiveColor ?? getSemanticColor("positive");
+    const negColor = negativeColor ?? getSemanticColor("negative");
+    const totColor = totalColor ?? "hsl(var(--chart-3))";
+    return /* @__PURE__ */ jsx(
+      ChartContainer,
+      {
+        ref,
+        className,
+        height,
+        loading,
+        empty: !data?.length,
+        children: /* @__PURE__ */ jsxs(BarChart$1, { data: rows, margin, children: [
+          /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              strokeDasharray: "3 3",
+              stroke: "hsl(var(--divider))",
+              vertical: false
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: "name",
+              tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+              tickLine: false,
+              axisLine: false,
+              tickFormatter: xAxis?.tickFormatter
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              domain: yAxis?.domain ?? ["auto", "auto"],
+              tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" },
+              tickLine: false,
+              axisLine: false,
+              width: yAxis?.width ?? 40,
+              tickFormatter: yAxis?.tickFormatter,
+              label: yAxis?.label ? {
+                value: yAxis.label,
+                angle: -90,
+                position: "insideLeft",
+                fontSize: 11,
+                fill: "hsl(var(--muted-foreground))"
+              } : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(ReferenceLine, { y: 0, stroke: "hsl(var(--divider))" }),
+          tooltipProps && /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps }),
+          /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: "invisible",
+              stackId: "waterfall",
+              fill: "transparent",
+              isAnimationActive: false
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: "delta",
+              stackId: "waterfall",
+              isAnimationActive: isAnimated,
+              animationDuration: isAnimated ? 300 : 0,
+              radius: [2, 2, 0, 0],
+              children: rows.map((row, i) => /* @__PURE__ */ jsx(
+                Cell,
+                {
+                  fill: row.isTotal ? totColor : row.rawValue >= 0 ? posColor : negColor
+                },
+                i
+              ))
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+WaterfallChart.displayName = "WaterfallChart";
+var RADIAN = Math.PI / 180;
+function defaultRenderLabel({
+  cx,
+  cy,
+  midAngle,
+  innerRadius,
+  outerRadius,
+  percent
+}) {
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+  if (percent < 0.04) return null;
+  return /* @__PURE__ */ jsx(
+    "text",
+    {
+      x,
+      y,
+      fill: "hsl(var(--card-foreground))",
+      textAnchor: "middle",
+      dominantBaseline: "central",
+      fontSize: 10,
+      fontWeight: 600,
+      children: `${(percent * 100).toFixed(0)}%`
+    }
+  );
+}
+var PieChart = React17.forwardRef(
+  ({
+    data,
+    innerRadius = 0,
+    outerRadius = "80%",
+    paddingAngle = 2,
+    startAngle = 90,
+    endAngle = -270,
+    legend = false,
+    tooltip = true,
+    label = false,
+    animate = true,
+    live = false,
+    className,
+    height = "100%",
+    margin = { top: 8, right: 8, left: 8, bottom: 8 },
+    loading
+  }, ref) => {
+    const legendConfig = resolveLegendConfig(legend);
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+    const renderLabel = label === true ? defaultRenderLabel : typeof label === "function" ? (entry) => label(entry) : void 0;
+    return /* @__PURE__ */ jsx(
+      ChartContainer,
+      {
+        ref,
+        className,
+        height,
+        loading,
+        empty: !data?.length,
+        children: /* @__PURE__ */ jsxs(PieChart$1, { margin, children: [
+          /* @__PURE__ */ jsx(
+            Pie,
+            {
+              data,
+              dataKey: "value",
+              nameKey: "name",
+              cx: "50%",
+              cy: "50%",
+              innerRadius,
+              outerRadius,
+              paddingAngle,
+              startAngle,
+              endAngle,
+              isAnimationActive: isAnimated,
+              animationDuration: isAnimated ? 400 : 0,
+              label: renderLabel,
+              labelLine: false,
+              stroke: "hsl(var(--card))",
+              strokeWidth: 2,
+              children: data.map((entry, index) => /* @__PURE__ */ jsx(
+                Cell,
+                {
+                  fill: getChartColor(index, entry.color)
+                },
+                entry.name
+              ))
+            }
+          ),
+          tooltipProps && /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps }),
+          legendConfig && /* @__PURE__ */ jsx(
+            Legend,
+            {
+              verticalAlign: legendConfig.position ?? "bottom",
+              align: legendConfig.align ?? "center",
+              content: /* @__PURE__ */ jsx(ChartLegendContent, {})
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+PieChart.displayName = "PieChart";
+var DonutChart = React17.forwardRef(
+  ({
+    data,
+    innerRadius = "60%",
+    outerRadius = "80%",
+    paddingAngle = 2,
+    legend = false,
+    tooltip = true,
+    centerLabel,
+    centerValue,
+    animate = true,
+    live = false,
+    className,
+    height = "100%",
+    margin = { top: 8, right: 8, left: 8, bottom: 8 },
+    loading
+  }, ref) => {
+    const legendConfig = resolveLegendConfig(legend);
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+    return /* @__PURE__ */ jsx(
+      ChartContainer,
+      {
+        ref,
+        className,
+        height,
+        loading,
+        empty: !data?.length,
+        children: /* @__PURE__ */ jsxs(PieChart$1, { margin, children: [
+          /* @__PURE__ */ jsx(
+            Pie,
+            {
+              data,
+              dataKey: "value",
+              nameKey: "name",
+              cx: "50%",
+              cy: "50%",
+              innerRadius,
+              outerRadius,
+              paddingAngle,
+              startAngle: 90,
+              endAngle: -270,
+              isAnimationActive: isAnimated,
+              animationDuration: isAnimated ? 400 : 0,
+              stroke: "hsl(var(--card))",
+              strokeWidth: 2,
+              children: data.map((entry, index) => /* @__PURE__ */ jsx(
+                Cell,
+                {
+                  fill: getChartColor(index, entry.color)
+                },
+                entry.name
+              ))
+            }
+          ),
+          (centerLabel || centerValue) && /* @__PURE__ */ jsxs(
+            "text",
+            {
+              x: "50%",
+              y: "50%",
+              textAnchor: "middle",
+              dominantBaseline: "central",
+              children: [
+                centerValue && /* @__PURE__ */ jsx(
+                  "tspan",
+                  {
+                    x: "50%",
+                    dy: centerLabel ? "-0.5em" : "0",
+                    fontSize: 20,
+                    fontWeight: 700,
+                    fill: "hsl(var(--foreground))",
+                    children: centerValue
+                  }
+                ),
+                centerLabel && /* @__PURE__ */ jsx(
+                  "tspan",
+                  {
+                    x: "50%",
+                    dy: centerValue ? "1.4em" : "0",
+                    fontSize: 11,
+                    fill: "hsl(var(--muted-foreground))",
+                    children: centerLabel
+                  }
+                )
+              ]
+            }
+          ),
+          tooltipProps && /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps }),
+          legendConfig && /* @__PURE__ */ jsx(
+            Legend,
+            {
+              verticalAlign: legendConfig.position ?? "bottom",
+              align: legendConfig.align ?? "center",
+              content: /* @__PURE__ */ jsx(ChartLegendContent, {})
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+DonutChart.displayName = "DonutChart";
+var RadarChart = React17.forwardRef(
+  ({
+    data,
+    series,
+    categoryKey,
+    domain,
+    legend = false,
+    tooltip = true,
+    animate = true,
+    live = false,
+    className,
+    height = "100%",
+    margin = { top: 8, right: 8, left: 8, bottom: 8 },
+    loading
+  }, ref) => {
+    const legendConfig = resolveLegendConfig(legend);
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+    return /* @__PURE__ */ jsx(
+      ChartContainer,
+      {
+        ref,
+        className,
+        height,
+        loading,
+        empty: !data?.length,
+        children: /* @__PURE__ */ jsxs(RadarChart$1, { data, margin, cx: "50%", cy: "50%", children: [
+          /* @__PURE__ */ jsx(PolarGrid, { stroke: "hsl(var(--divider))" }),
+          /* @__PURE__ */ jsx(
+            PolarAngleAxis,
+            {
+              dataKey: categoryKey,
+              tick: { fontSize: 10, fill: "hsl(var(--muted-foreground))" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PolarRadiusAxis,
+            {
+              domain,
+              tick: { fontSize: 9, fill: "hsl(var(--muted-foreground))" },
+              axisLine: false
+            }
+          ),
+          tooltipProps && /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps }),
+          legendConfig && /* @__PURE__ */ jsx(
+            Legend,
+            {
+              verticalAlign: legendConfig.position ?? "bottom",
+              align: legendConfig.align ?? "center",
+              content: /* @__PURE__ */ jsx(ChartLegendContent, {})
+            }
+          ),
+          series.map((s, index) => {
+            const color = getChartColor(index, s.color);
+            return /* @__PURE__ */ jsx(
+              Radar,
+              {
+                name: s.name,
+                dataKey: s.dataKey,
+                stroke: color,
+                strokeWidth: s.strokeWidth ?? 2,
+                strokeDasharray: s.strokeDasharray,
+                fill: color,
+                fillOpacity: s.fillOpacity ?? 0.15,
+                isAnimationActive: isAnimated,
+                animationDuration: isAnimated ? 400 : 0
+              },
+              s.dataKey
+            );
+          })
+        ] })
+      }
+    );
+  }
+);
+RadarChart.displayName = "RadarChart";
+var RadialBarChart = React17.forwardRef(
+  ({
+    data,
+    innerRadius = "30%",
+    outerRadius = "90%",
+    startAngle = 180,
+    endAngle = 0,
+    legend = false,
+    tooltip = true,
+    showLabels = true,
+    animate = true,
+    live = false,
+    className,
+    height = "100%",
+    margin = { top: 8, right: 8, left: 8, bottom: 8 },
+    loading
+  }, ref) => {
+    const legendConfig = resolveLegendConfig(legend);
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+    const coloredData = React17.useMemo(
+      () => data.map((d, i) => ({
+        ...d,
+        fill: d.fill ?? getChartColor(i)
+      })),
+      [data]
+    );
+    return /* @__PURE__ */ jsx(
+      ChartContainer,
+      {
+        ref,
+        className,
+        height,
+        loading,
+        empty: !data?.length,
+        children: /* @__PURE__ */ jsxs(
+          RadialBarChart$1,
+          {
+            data: coloredData,
+            innerRadius,
+            outerRadius,
+            startAngle,
+            endAngle,
+            margin,
+            cx: "50%",
+            cy: "50%",
+            children: [
+              /* @__PURE__ */ jsx(
+                RadialBar,
+                {
+                  dataKey: "value",
+                  background: { fill: "hsl(var(--muted))" },
+                  isAnimationActive: isAnimated,
+                  animationDuration: isAnimated ? 400 : 0,
+                  label: showLabels ? {
+                    position: "insideStart",
+                    fill: "hsl(var(--foreground))",
+                    fontSize: 10,
+                    fontWeight: 600
+                  } : false
+                }
+              ),
+              tooltipProps && /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps }),
+              legendConfig && /* @__PURE__ */ jsx(
+                Legend,
+                {
+                  verticalAlign: legendConfig.position ?? "bottom",
+                  align: legendConfig.align ?? "center",
+                  content: /* @__PURE__ */ jsx(ChartLegendContent, {})
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+RadialBarChart.displayName = "RadialBarChart";
+function SankeyNodeRenderer({
+  x,
+  y,
+  width,
+  height,
+  index,
+  payload
+}) {
+  const fill = payload.color ?? getChartColor(index);
+  return /* @__PURE__ */ jsxs(Layer, { children: [
+    /* @__PURE__ */ jsx(
+      Rectangle,
+      {
+        x,
+        y,
+        width,
+        height,
+        fill,
+        fillOpacity: 0.9
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + width + 6,
+        y: y + height / 2,
+        textAnchor: "start",
+        dominantBaseline: "central",
+        fontSize: 10,
+        fill: "hsl(var(--foreground))",
+        children: payload.name
+      }
+    )
+  ] }, `node-${index}`);
+}
+function SankeyLinkRenderer({
+  sourceX,
+  sourceY,
+  sourceControlX,
+  targetX,
+  targetY,
+  targetControlX,
+  linkWidth,
+  index,
+  payload
+}) {
+  const sourceColor = payload.source.color ?? getChartColor(index);
+  return /* @__PURE__ */ jsx(Layer, { children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: `
+          M${sourceX},${sourceY}
+          C${sourceControlX},${sourceY} ${targetControlX},${targetY} ${targetX},${targetY}
+        `,
+      fill: "none",
+      stroke: sourceColor,
+      strokeWidth: linkWidth,
+      strokeOpacity: 0.3
+    }
+  ) }, `link-${index}`);
+}
+var SankeyChart = React17.forwardRef(
+  ({
+    data,
+    nodeWidth = 10,
+    nodePadding = 20,
+    tooltip = true,
+    className,
+    height = "100%",
+    margin = { top: 8, right: 80, left: 8, bottom: 8 },
+    loading
+  }, ref) => {
+    const tooltipProps = resolveTooltipProps(tooltip);
+    return /* @__PURE__ */ jsx(
+      ChartContainer,
+      {
+        ref,
+        className,
+        height,
+        loading,
+        empty: !data?.nodes?.length,
+        children: /* @__PURE__ */ jsx(
+          Sankey,
+          {
+            data,
+            nodeWidth,
+            nodePadding,
+            margin,
+            node: SankeyNodeRenderer,
+            link: SankeyLinkRenderer,
+            children: tooltipProps && /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps })
+          }
+        )
+      }
+    );
+  }
+);
+SankeyChart.displayName = "SankeyChart";
+function TreemapContent({
+  x,
+  y,
+  width,
+  height,
+  index,
+  name,
+  depth,
+  color
+}) {
+  const fill = color ?? getChartColor(index);
+  const showLabel = width > 40 && height > 20;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        fill,
+        fillOpacity: depth === 1 ? 0.85 : 0.6,
+        stroke: "hsl(var(--card))",
+        strokeWidth: 2,
+        rx: 2
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + width / 2,
+        y: y + height / 2,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fontSize: Math.min(11, width / 6),
+        fill: "hsl(var(--card-foreground))",
+        fontWeight: 500,
+        style: { pointerEvents: "none" },
+        children: name.length > width / 7 ? `${name.slice(0, Math.floor(width / 7))}\u2026` : name
+      }
+    )
+  ] });
+}
+var TreemapChart = React17.forwardRef(
+  ({
+    data,
+    dataKey = "value",
+    aspectRatio = 4 / 3,
+    tooltip = true,
+    animate = true,
+    live = false,
+    className,
+    height = "100%",
+    margin,
+    loading
+  }, ref) => {
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+    return /* @__PURE__ */ jsx(
+      ChartContainer,
+      {
+        ref,
+        className,
+        height,
+        loading,
+        empty: !data?.length,
+        children: /* @__PURE__ */ jsx(
+          Treemap,
+          {
+            data,
+            dataKey,
+            aspectRatio,
+            isAnimationActive: isAnimated,
+            animationDuration: isAnimated ? 400 : 0,
+            content: /* @__PURE__ */ jsx(TreemapContent, { x: 0, y: 0, width: 0, height: 0, index: 0, name: "", depth: 1 }),
+            children: tooltipProps && /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps })
+          }
+        )
+      }
+    );
+  }
+);
+TreemapChart.displayName = "TreemapChart";
+var FunnelChart = React17.forwardRef(
+  ({
+    data,
+    tooltip = true,
+    showLabels = true,
+    animate = true,
+    live = false,
+    className,
+    height = "100%",
+    margin = { top: 8, right: 8, left: 8, bottom: 8 },
+    loading
+  }, ref) => {
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+    return /* @__PURE__ */ jsx(
+      ChartContainer,
+      {
+        ref,
+        className,
+        height,
+        loading,
+        empty: !data?.length,
+        children: /* @__PURE__ */ jsxs(FunnelChart$1, { margin, children: [
+          /* @__PURE__ */ jsxs(
+            Funnel,
+            {
+              dataKey: "value",
+              data,
+              isAnimationActive: isAnimated,
+              animationDuration: isAnimated ? 400 : 0,
+              children: [
+                data.map((entry, index) => /* @__PURE__ */ jsx(
+                  Cell,
+                  {
+                    fill: getChartColor(index, entry.color),
+                    stroke: "hsl(var(--card))",
+                    strokeWidth: 2
+                  },
+                  entry.name
+                )),
+                showLabels && /* @__PURE__ */ jsx(
+                  LabelList,
+                  {
+                    dataKey: "name",
+                    position: "center",
+                    fill: "#ffffff",
+                    fontSize: 13,
+                    fontWeight: 600,
+                    style: {
+                      textShadow: "0 1px 3px rgba(0,0,0,0.4)",
+                      paintOrder: "stroke",
+                      stroke: "rgba(0,0,0,0.2)",
+                      strokeWidth: 2,
+                      strokeLinejoin: "round"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          tooltipProps && /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps })
+        ] })
+      }
+    );
+  }
+);
+FunnelChart.displayName = "FunnelChart";
+var ROW_HEIGHT_DEFAULT = 36;
+var LABEL_WIDTH_DEFAULT = 160;
+var HEADER_HEIGHT = 32;
+function getTimeBounds(tasks, milestones) {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const t of tasks) {
+    if (t.start.getTime() < min) min = t.start.getTime();
+    if (t.end.getTime() > max) max = t.end.getTime();
+  }
+  for (const m of milestones) {
+    if (m.date.getTime() < min) min = m.date.getTime();
+    if (m.date.getTime() > max) max = m.date.getTime();
+  }
+  const pad = (max - min) * 0.05 || 864e5;
+  return { min: min - pad, max: max + pad, span: max - min + 2 * pad };
+}
+function generateTicks(min, max, scale) {
+  const ticks = [];
+  const d = new Date(min);
+  if (scale === "day") {
+    d.setHours(0, 0, 0, 0);
+    while (d.getTime() <= max) {
+      ticks.push({
+        pos: d.getTime(),
+        label: d.toLocaleDateString(void 0, { month: "short", day: "numeric" })
+      });
+      d.setDate(d.getDate() + 1);
+    }
+  } else if (scale === "week") {
+    d.setHours(0, 0, 0, 0);
+    d.setDate(d.getDate() - d.getDay());
+    while (d.getTime() <= max) {
+      ticks.push({
+        pos: d.getTime(),
+        label: d.toLocaleDateString(void 0, { month: "short", day: "numeric" })
+      });
+      d.setDate(d.getDate() + 7);
+    }
+  } else {
+    d.setDate(1);
+    d.setHours(0, 0, 0, 0);
+    while (d.getTime() <= max) {
+      ticks.push({
+        pos: d.getTime(),
+        label: d.toLocaleDateString(void 0, { month: "short", year: "2-digit" })
+      });
+      d.setMonth(d.getMonth() + 1);
+    }
+  }
+  return ticks;
+}
+var GanttChart = React17.forwardRef(
+  function GanttChart2({
+    tasks,
+    milestones = [],
+    timeScale = "day",
+    className,
+    height = 400,
+    rowHeight = ROW_HEIGHT_DEFAULT,
+    labelWidth = LABEL_WIDTH_DEFAULT,
+    onTaskClick
+  }, ref) {
+    const containerRef = React17.useRef(null);
+    const [hoveredId, setHoveredId] = React17.useState(null);
+    const [tooltipInfo, setTooltipInfo] = React17.useState(null);
+    const groups = React17.useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      for (const t of tasks) {
+        const g = t.group ?? "";
+        if (!map.has(g)) map.set(g, []);
+        map.get(g).push(t);
+      }
+      return map;
+    }, [tasks]);
+    const orderedTasks = React17.useMemo(() => {
+      const result = [];
+      for (const group of groups.values()) {
+        result.push(...group.sort((a, b) => a.start.getTime() - b.start.getTime()));
+      }
+      return result;
+    }, [groups]);
+    const taskIndex = React17.useMemo(() => {
+      const m = /* @__PURE__ */ new Map();
+      orderedTasks.forEach((t, i) => m.set(t.id, i));
+      return m;
+    }, [orderedTasks]);
+    const bounds = React17.useMemo(
+      () => getTimeBounds(tasks, milestones),
+      [tasks, milestones]
+    );
+    const ticks = React17.useMemo(
+      () => generateTicks(bounds.min, bounds.max, timeScale),
+      [bounds, timeScale]
+    );
+    const chartHeight = typeof height === "number" ? height : void 0;
+    const svgHeight = HEADER_HEIGHT + orderedTasks.length * rowHeight + 8;
+    function xOf(time, chartWidth) {
+      return (time - bounds.min) / bounds.span * chartWidth;
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (node) => {
+          containerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: cn("w-full overflow-auto relative", className),
+        style: { height },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: "100%",
+              height: Math.max(svgHeight, chartHeight ?? svgHeight),
+              style: { minWidth: labelWidth + 400 },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: 0,
+                    y: 0,
+                    width: labelWidth,
+                    height: svgHeight,
+                    fill: "hsl(var(--card))"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: labelWidth,
+                    y1: 0,
+                    x2: labelWidth,
+                    y2: svgHeight,
+                    stroke: "hsl(var(--border))"
+                  }
+                ),
+                /* @__PURE__ */ jsx("g", { children: ticks.map((tick, i) => {
+                  const x = labelWidth + xOf(tick.pos, 1e3);
+                  return /* @__PURE__ */ jsxs("g", { children: [
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: x,
+                        y1: HEADER_HEIGHT,
+                        x2: x,
+                        y2: svgHeight,
+                        stroke: "hsl(var(--divider))",
+                        strokeDasharray: "2 4"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        x: x + 4,
+                        y: HEADER_HEIGHT - 10,
+                        fontSize: 9,
+                        fill: "hsl(var(--muted-foreground))",
+                        children: tick.label
+                      }
+                    )
+                  ] }, i);
+                }) }),
+                orderedTasks.map((task, i) => {
+                  const y = HEADER_HEIGHT + i * rowHeight;
+                  const barX = labelWidth + xOf(task.start.getTime(), 1e3);
+                  const barW = xOf(task.end.getTime(), 1e3) - xOf(task.start.getTime(), 1e3);
+                  const barH = rowHeight * 0.55;
+                  const barY = y + (rowHeight - barH) / 2;
+                  const color = task.color ?? getChartColor(i);
+                  const isHovered = hoveredId === task.id;
+                  const progress = task.progress ?? 0;
+                  return /* @__PURE__ */ jsxs(
+                    "g",
+                    {
+                      onMouseEnter: (e) => {
+                        setHoveredId(task.id);
+                        const rect = containerRef.current?.getBoundingClientRect();
+                        setTooltipInfo({
+                          task,
+                          x: e.clientX - (rect?.left ?? 0) + (containerRef.current?.scrollLeft ?? 0),
+                          y: e.clientY - (rect?.top ?? 0) + (containerRef.current?.scrollTop ?? 0)
+                        });
+                      },
+                      onMouseLeave: () => {
+                        setHoveredId(null);
+                        setTooltipInfo(null);
+                      },
+                      onClick: () => onTaskClick?.(task),
+                      style: { cursor: onTaskClick ? "pointer" : "default" },
+                      children: [
+                        i % 2 === 0 && /* @__PURE__ */ jsx(
+                          "rect",
+                          {
+                            x: 0,
+                            y,
+                            width: "100%",
+                            height: rowHeight,
+                            fill: "hsl(var(--muted))",
+                            fillOpacity: 0.3
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "text",
+                          {
+                            x: 12,
+                            y: y + rowHeight / 2,
+                            dominantBaseline: "central",
+                            fontSize: 11,
+                            fill: "hsl(var(--foreground))",
+                            fontWeight: isHovered ? 600 : 400,
+                            children: task.name.length > labelWidth / 8 ? `${task.name.slice(0, Math.floor(labelWidth / 8))}\u2026` : task.name
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "rect",
+                          {
+                            x: barX,
+                            y: barY,
+                            width: Math.max(barW, 2),
+                            height: barH,
+                            rx: 3,
+                            fill: color,
+                            fillOpacity: 0.25,
+                            stroke: isHovered ? color : "none",
+                            strokeWidth: isHovered ? 1.5 : 0
+                          }
+                        ),
+                        progress > 0 && /* @__PURE__ */ jsx(
+                          "rect",
+                          {
+                            x: barX,
+                            y: barY,
+                            width: Math.max(barW * progress / 100, 2),
+                            height: barH,
+                            rx: 3,
+                            fill: color,
+                            fillOpacity: 0.85
+                          }
+                        )
+                      ]
+                    },
+                    task.id
+                  );
+                }),
+                orderedTasks.map(
+                  (task) => (task.dependencies ?? []).map((depId) => {
+                    const fromIdx = taskIndex.get(depId);
+                    if (fromIdx === void 0) return null;
+                    const toIdx = taskIndex.get(task.id);
+                    const fromTask = orderedTasks[fromIdx];
+                    const fromEndX = labelWidth + xOf(fromTask.end.getTime(), 1e3);
+                    const fromY = HEADER_HEIGHT + fromIdx * rowHeight + rowHeight / 2;
+                    const toStartX = labelWidth + xOf(task.start.getTime(), 1e3);
+                    const toY = HEADER_HEIGHT + toIdx * rowHeight + rowHeight / 2;
+                    const midX = (fromEndX + toStartX) / 2;
+                    return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: `M${fromEndX},${fromY} C${midX},${fromY} ${midX},${toY} ${toStartX},${toY}`,
+                        fill: "none",
+                        stroke: "hsl(var(--muted-foreground))",
+                        strokeWidth: 1,
+                        strokeDasharray: "3 2",
+                        markerEnd: "url(#arrow)"
+                      }
+                    ) }, `${depId}-${task.id}`);
+                  })
+                ),
+                milestones.map((m, i) => {
+                  const x = labelWidth + xOf(m.date.getTime(), 1e3);
+                  return /* @__PURE__ */ jsxs("g", { children: [
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: x,
+                        y1: HEADER_HEIGHT,
+                        x2: x,
+                        y2: svgHeight,
+                        stroke: m.color ?? "hsl(var(--warning))",
+                        strokeWidth: 1.5,
+                        strokeDasharray: "4 3"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "polygon",
+                      {
+                        points: `${x},${HEADER_HEIGHT - 2} ${x + 5},${HEADER_HEIGHT + 6} ${x},${HEADER_HEIGHT + 14} ${x - 5},${HEADER_HEIGHT + 6}`,
+                        fill: m.color ?? "hsl(var(--warning))"
+                      }
+                    )
+                  ] }, m.id);
+                }),
+                /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+                  "marker",
+                  {
+                    id: "arrow",
+                    viewBox: "0 0 6 6",
+                    refX: 6,
+                    refY: 3,
+                    markerWidth: 6,
+                    markerHeight: 6,
+                    orient: "auto-start-reverse",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M 0 0 L 6 3 L 0 6 z",
+                        fill: "hsl(var(--muted-foreground))"
+                      }
+                    )
+                  }
+                ) })
+              ]
+            }
+          ),
+          tooltipInfo && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: tooltipInfo.x + 12,
+                top: tooltipInfo.y - 10,
+                background: "hsl(var(--card))",
+                border: "1px solid hsl(var(--border))",
+                borderRadius: 6,
+                padding: "6px 10px",
+                fontSize: 11,
+                lineHeight: 1.5,
+                boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+                pointerEvents: "none",
+                zIndex: 50,
+                maxWidth: 220
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontWeight: 600,
+                      color: "hsl(var(--foreground))",
+                      marginBottom: 2
+                    },
+                    children: tooltipInfo.task.name
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { style: { color: "hsl(var(--muted-foreground))" }, children: [
+                  tooltipInfo.task.start.toLocaleDateString(),
+                  " \u2013",
+                  " ",
+                  tooltipInfo.task.end.toLocaleDateString()
+                ] }),
+                tooltipInfo.task.progress != null && /* @__PURE__ */ jsxs("div", { style: { color: "hsl(var(--muted-foreground))" }, children: [
+                  "Progress: ",
+                  tooltipInfo.task.progress,
+                  "%"
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+GanttChart.displayName = "GanttChart";
+var DEFAULT_SCALE = {
+  min: "hsl(var(--chart-9))",
+  mid: "hsl(var(--chart-4))",
+  max: "hsl(var(--chart-7))"
+};
+function interpolateColor(t, scale) {
+  if (!scale.mid) {
+    return `color-mix(in srgb, ${scale.min} ${(1 - t) * 100}%, ${scale.max})`;
+  }
+  if (t <= 0.5) {
+    const t22 = t * 2;
+    return `color-mix(in srgb, ${scale.min} ${(1 - t22) * 100}%, ${scale.mid})`;
+  }
+  const t2 = (t - 0.5) * 2;
+  return `color-mix(in srgb, ${scale.mid} ${(1 - t2) * 100}%, ${scale.max})`;
+}
+var HeatmapChart = React17.forwardRef(
+  function HeatmapChart2({
+    data,
+    xLabels,
+    yLabels,
+    colorScale = DEFAULT_SCALE,
+    cellSize = 40,
+    showValues = true,
+    valueFormatter,
+    className,
+    height,
+    loading,
+    onCellClick
+  }, ref) {
+    const containerRef = React17.useRef(null);
+    const [hoveredCell, setHoveredCell] = React17.useState(null);
+    const [tooltipPos, setTooltipPos] = React17.useState({ x: 0, y: 0 });
+    const { valueMap, minVal, maxVal } = React17.useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      let lo = Infinity;
+      let hi = -Infinity;
+      for (const cell of data) {
+        map.set(`${cell.x}|${cell.y}`, cell.value);
+        if (cell.value < lo) lo = cell.value;
+        if (cell.value > hi) hi = cell.value;
+      }
+      return { valueMap: map, minVal: lo, maxVal: hi };
+    }, [data]);
+    const normalize = (v) => maxVal === minVal ? 0.5 : (v - minVal) / (maxVal - minVal);
+    const labelColWidth = 80;
+    const svgWidth = labelColWidth + xLabels.length * cellSize;
+    const svgHeight = 28 + yLabels.length * cellSize;
+    if (loading) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: cn("w-full flex items-center justify-center", className),
+          style: { height: height ?? svgHeight },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "animate-pulse",
+              style: {
+                width: "80%",
+                height: "60%",
+                borderRadius: 6,
+                background: "hsl(var(--muted))"
+              }
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (node) => {
+          containerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: cn("w-full overflow-auto relative", className),
+        style: { height },
+        children: [
+          /* @__PURE__ */ jsxs("svg", { width: svgWidth, height: svgHeight, children: [
+            xLabels.map((label, i) => /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: labelColWidth + i * cellSize + cellSize / 2,
+                y: 14,
+                textAnchor: "middle",
+                fontSize: 9,
+                fill: "hsl(var(--muted-foreground))",
+                children: label
+              },
+              `x-${i}`
+            )),
+            yLabels.map((yLabel, yi) => /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: labelColWidth - 8,
+                  y: 28 + yi * cellSize + cellSize / 2,
+                  textAnchor: "end",
+                  dominantBaseline: "central",
+                  fontSize: 9,
+                  fill: "hsl(var(--muted-foreground))",
+                  children: yLabel
+                }
+              ),
+              xLabels.map((xLabel, xi) => {
+                const key = `${xLabel}|${yLabel}`;
+                const val = valueMap.get(key);
+                const t = val != null ? normalize(val) : 0;
+                const cx = labelColWidth + xi * cellSize;
+                const cy = 28 + yi * cellSize;
+                const cellData = { x: xLabel, y: yLabel, value: val ?? 0 };
+                return /* @__PURE__ */ jsxs(
+                  "g",
+                  {
+                    onMouseEnter: (e) => {
+                      setHoveredCell(cellData);
+                      const rect = containerRef.current?.getBoundingClientRect();
+                      setTooltipPos({
+                        x: e.clientX - (rect?.left ?? 0) + (containerRef.current?.scrollLeft ?? 0),
+                        y: e.clientY - (rect?.top ?? 0) + (containerRef.current?.scrollTop ?? 0)
+                      });
+                    },
+                    onMouseLeave: () => setHoveredCell(null),
+                    onClick: () => onCellClick?.(cellData),
+                    style: { cursor: onCellClick ? "pointer" : "default" },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "rect",
+                        {
+                          x: cx + 1,
+                          y: cy + 1,
+                          width: cellSize - 2,
+                          height: cellSize - 2,
+                          rx: 3,
+                          fill: val != null ? interpolateColor(t, colorScale) : "hsl(var(--muted))",
+                          fillOpacity: val != null ? 0.85 : 0.3,
+                          stroke: hoveredCell?.x === xLabel && hoveredCell?.y === yLabel ? "hsl(var(--foreground))" : "none",
+                          strokeWidth: 1.5
+                        }
+                      ),
+                      showValues && val != null && cellSize >= 32 && /* @__PURE__ */ jsx(
+                        "text",
+                        {
+                          x: cx + cellSize / 2,
+                          y: cy + cellSize / 2,
+                          textAnchor: "middle",
+                          dominantBaseline: "central",
+                          fontSize: Math.min(10, cellSize / 4.5),
+                          fill: "hsl(var(--foreground))",
+                          fontWeight: 500,
+                          style: { pointerEvents: "none" },
+                          children: valueFormatter ? valueFormatter(val) : val.toLocaleString()
+                        }
+                      )
+                    ]
+                  },
+                  key
+                );
+              })
+            ] }, `row-${yi}`))
+          ] }),
+          hoveredCell && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: tooltipPos.x + 12,
+                top: tooltipPos.y - 10,
+                background: "hsl(var(--card))",
+                border: "1px solid hsl(var(--border))",
+                borderRadius: 6,
+                padding: "6px 10px",
+                fontSize: 11,
+                lineHeight: 1.5,
+                boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+                pointerEvents: "none",
+                zIndex: 50,
+                maxWidth: 200
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { color: "hsl(var(--muted-foreground))" }, children: [
+                  String(hoveredCell.x),
+                  " / ",
+                  String(hoveredCell.y)
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontWeight: 600,
+                      color: "hsl(var(--foreground))",
+                      fontVariantNumeric: "tabular-nums"
+                    },
+                    children: valueFormatter ? valueFormatter(hoveredCell.value) : hoveredCell.value.toLocaleString()
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+HeatmapChart.displayName = "HeatmapChart";
+var Sparkline = React17.memo(function Sparkline2({
+  data,
+  variant = "line",
+  color,
+  width = "100%",
+  height = 24,
+  strokeWidth = 1.5,
+  className
+}) {
+  const chartColor = color ?? getChartColor(0);
+  const points = React17.useMemo(
+    () => data.map((v, i) => ({ i, v })),
+    [data]
+  );
+  if (!points.length) return null;
+  return /* @__PURE__ */ jsx("div", { className, style: { width, height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: variant === "bar" ? /* @__PURE__ */ jsx(BarChart$1, { data: points, margin: { top: 0, right: 0, left: 0, bottom: 0 }, children: /* @__PURE__ */ jsx(Bar, { dataKey: "v", fill: chartColor, fillOpacity: 0.7, isAnimationActive: false }) }) : variant === "area" ? /* @__PURE__ */ jsxs(AreaChart$1, { data: points, margin: { top: 0, right: 0, left: 0, bottom: 0 }, children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "sparkArea", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: chartColor, stopOpacity: 0.3 }),
+      /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: chartColor, stopOpacity: 0.05 })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      Area,
+      {
+        type: "monotone",
+        dataKey: "v",
+        stroke: chartColor,
+        strokeWidth,
+        fill: "url(#sparkArea)",
+        isAnimationActive: false,
+        dot: false
+      }
+    )
+  ] }) : /* @__PURE__ */ jsx(LineChart$1, { data: points, margin: { top: 0, right: 0, left: 0, bottom: 0 }, children: /* @__PURE__ */ jsx(
+    Line,
+    {
+      type: "monotone",
+      dataKey: "v",
+      stroke: chartColor,
+      strokeWidth,
+      dot: false,
+      isAnimationActive: false
+    }
+  ) }) }) });
+});
+Sparkline.displayName = "Sparkline";
+var KPICard = React17.memo(function KPICard2({
+  label,
+  value,
+  previousValue,
+  changeLabel,
+  sparklineData,
+  sparklineVariant = "area",
+  sparklineColor,
+  icon,
+  className
+}) {
+  const currentNum = typeof value === "number" ? value : parseFloat(String(value));
+  const hasDelta = previousValue != null && !isNaN(currentNum) && previousValue !== 0;
+  const delta = hasDelta ? (currentNum - previousValue) / previousValue * 100 : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border p-4 flex flex-col gap-2",
+        className
+      ),
+      style: {
+        background: "hsl(var(--card))",
+        borderColor: "hsl(var(--border))"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: 12,
+                color: "hsl(var(--muted-foreground))",
+                fontWeight: 500
+              },
+              children: label
+            }
+          ),
+          icon && /* @__PURE__ */ jsx("span", { style: { color: "hsl(var(--muted-foreground))" }, children: icon })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: 22,
+                  fontWeight: 700,
+                  color: "hsl(var(--foreground))",
+                  lineHeight: 1,
+                  fontVariantNumeric: "tabular-nums"
+                },
+                children: value
+              }
+            ),
+            delta != null && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                style: {
+                  fontSize: 11,
+                  fontWeight: 500,
+                  color: delta > 0 ? "hsl(var(--success))" : delta < 0 ? "hsl(var(--destructive))" : "hsl(var(--muted-foreground))",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 2
+                },
+                children: [
+                  delta >= 0 ? "\u25B2" : "\u25BC",
+                  " ",
+                  delta >= 0 ? "+" : "",
+                  delta.toFixed(1),
+                  "%",
+                  changeLabel && /* @__PURE__ */ jsx("span", { style: { color: "hsl(var(--muted-foreground))", marginLeft: 4 }, children: changeLabel })
+                ]
+              }
+            )
+          ] }),
+          sparklineData && sparklineData.length > 1 && /* @__PURE__ */ jsx(
+            Sparkline,
+            {
+              data: sparklineData,
+              variant: sparklineVariant,
+              color: sparklineColor ?? (delta != null ? delta >= 0 ? "hsl(var(--success))" : "hsl(var(--destructive))" : void 0),
+              width: 80,
+              height: 32
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+KPICard.displayName = "KPICard";
+function buildOverlayData(scenarios, categoryKey, metrics) {
+  const merged = /* @__PURE__ */ new Map();
+  for (const scenario of scenarios) {
+    for (const row of scenario.data) {
+      const key = String(row[categoryKey]);
+      if (!merged.has(key)) merged.set(key, { [categoryKey]: row[categoryKey] });
+      const target = merged.get(key);
+      for (const m of metrics) {
+        target[`${scenario.name}_${m}`] = row[m];
+      }
+    }
+  }
+  const data = Array.from(merged.values());
+  const series = scenarios.flatMap(
+    (s, si) => metrics.map((m) => ({
+      dataKey: `${s.name}_${m}`,
+      name: `${s.name} \u2013 ${m}`,
+      color: s.color,
+      strokeDasharray: si > 0 ? "5 3" : void 0
+    }))
+  );
+  return { data, series };
+}
+function buildDeltaData(scenarios, baselineIndex, categoryKey, metrics) {
+  const baseline = scenarios[baselineIndex];
+  if (!baseline) return { data: [], series: [] };
+  const baseMap = /* @__PURE__ */ new Map();
+  for (const row of baseline.data) {
+    baseMap.set(String(row[categoryKey]), row);
+  }
+  const comparisons = scenarios.filter((_, i) => i !== baselineIndex);
+  const merged = /* @__PURE__ */ new Map();
+  for (const scenario of comparisons) {
+    for (const row of scenario.data) {
+      const key = String(row[categoryKey]);
+      if (!merged.has(key)) merged.set(key, { [categoryKey]: row[categoryKey] });
+      const target = merged.get(key);
+      const baseRow = baseMap.get(key);
+      for (const m of metrics) {
+        const base = Number(baseRow?.[m] ?? 0);
+        const val = Number(row[m] ?? 0);
+        target[`${scenario.name}_${m}`] = val - base;
+      }
+    }
+  }
+  const data = Array.from(merged.values());
+  const series = comparisons.flatMap(
+    (s) => metrics.map((m) => ({
+      dataKey: `${s.name}_${m}`,
+      name: `${s.name} \u0394 ${m}`
+    }))
+  );
+  return { data, series };
+}
+function buildScorecardData(scenarios, metrics) {
+  const data = metrics.map((m) => {
+    const row = { metric: m };
+    for (const s of scenarios) {
+      const values = s.data.map((d) => Number(d[m] ?? 0));
+      const avg = values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;
+      row[s.name] = Math.round(avg * 10) / 10;
+    }
+    return row;
+  });
+  const series = scenarios.map((s, i) => ({
+    dataKey: s.name,
+    name: s.name,
+    color: s.color,
+    strokeDasharray: i > 0 ? "5 3" : void 0
+  }));
+  return { data, series };
+}
+var ScenarioComparison = React17.memo(function ScenarioComparison2({
+  scenarios,
+  metrics,
+  categoryKey,
+  mode = "overlay",
+  baselineIndex = 0,
+  tooltip = true,
+  className,
+  height = 350
+}) {
+  if (!scenarios.length || !metrics.length) return null;
+  if (mode === "side-by-side") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("grid gap-4", className),
+        style: {
+          gridTemplateColumns: `repeat(${scenarios.length}, 1fr)`
+        },
+        children: scenarios.map((scenario) => /* @__PURE__ */ jsxs("div", { style: { height }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                fontSize: 12,
+                fontWeight: 600,
+                color: "hsl(var(--foreground))",
+                marginBottom: 6
+              },
+              children: scenario.name
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            LineChart,
+            {
+              data: scenario.data,
+              series: metrics.map((m) => ({
+                dataKey: m,
+                name: m,
+                color: scenario.color
+              })),
+              xAxis: { dataKey: categoryKey },
+              tooltip,
+              legend: metrics.length > 1,
+              height: "calc(100% - 24px)"
+            }
+          )
+        ] }, scenario.name))
+      }
+    );
+  }
+  if (mode === "overlay") {
+    const { data, series } = buildOverlayData(scenarios, categoryKey, metrics);
+    return /* @__PURE__ */ jsx("div", { className, style: { height }, children: /* @__PURE__ */ jsx(
+      LineChart,
+      {
+        data,
+        series,
+        xAxis: { dataKey: categoryKey },
+        tooltip,
+        legend: true,
+        height: "100%"
+      }
+    ) });
+  }
+  if (mode === "delta") {
+    const { data, series } = buildDeltaData(
+      scenarios,
+      baselineIndex,
+      categoryKey,
+      metrics
+    );
+    return /* @__PURE__ */ jsx("div", { className, style: { height }, children: /* @__PURE__ */ jsx(
+      BarChart,
+      {
+        data,
+        series: series.map((s) => ({ ...s })),
+        xAxis: { dataKey: categoryKey },
+        tooltip,
+        legend: true,
+        height: "100%"
+      }
+    ) });
+  }
+  if (mode === "scorecard") {
+    const { data, series } = buildScorecardData(scenarios, metrics);
+    return /* @__PURE__ */ jsx("div", { className, style: { height }, children: /* @__PURE__ */ jsx(
+      RadarChart,
+      {
+        data,
+        series: series.map((s) => ({
+          ...s,
+          fillOpacity: 0.1
+        })),
+        categoryKey: "metric",
+        tooltip,
+        legend: true,
+        height: "100%"
+      }
+    ) });
+  }
+  return null;
+});
+ScenarioComparison.displayName = "ScenarioComparison";
+function resolveLegendFromString(val) {
+  if (!val || val === "none") return false;
+  const parts = val.split("-");
+  return {
+    position: parts[0] ?? "top",
+    align: parts[1] ?? "right"
+  };
+}
+var ChartRenderer = React17.memo(function ChartRenderer2({
+  config,
+  data,
+  height = "100%",
+  className
+}) {
+  if (!data?.length || !config.series.length) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className,
+        style: {
+          height,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "hsl(var(--muted-foreground))",
+          fontSize: 12
+        },
+        children: "Configure a chart to preview"
+      }
+    );
+  }
+  const legend = resolveLegendFromString(config.legend);
+  const common = {
+    className,
+    height,
+    grid: config.grid ?? true,
+    animate: config.animate ?? true,
+    tooltip: config.tooltip ?? true,
+    legend
+  };
+  const xAxis = { dataKey: config.categoryKey };
+  const series = config.series;
+  switch (config.type) {
+    case "line":
+      return /* @__PURE__ */ jsx(LineChart, { data, series, xAxis, ...common });
+    case "bar":
+      return /* @__PURE__ */ jsx(BarChart, { data, series, xAxis, ...common });
+    case "area":
+      return /* @__PURE__ */ jsx(AreaChart, { data, series, xAxis, ...common });
+    case "pie":
+      return /* @__PURE__ */ jsx(
+        PieChart,
+        {
+          data: data.map((d) => ({
+            name: String(d[config.categoryKey]),
+            value: Number(d[series[0].dataKey] ?? 0)
+          })),
+          label: true,
+          ...common
+        }
+      );
+    case "donut":
+      return /* @__PURE__ */ jsx(
+        DonutChart,
+        {
+          data: data.map((d) => ({
+            name: String(d[config.categoryKey]),
+            value: Number(d[series[0].dataKey] ?? 0)
+          })),
+          ...common
+        }
+      );
+    case "scatter":
+      return /* @__PURE__ */ jsx(
+        ScatterChart,
+        {
+          series: [
+            {
+              name: series[0]?.name ?? "Data",
+              data
+            }
+          ],
+          xAxis: { ...xAxis, name: config.categoryKey },
+          ...common
+        }
+      );
+    case "radar":
+      return /* @__PURE__ */ jsx(
+        RadarChart,
+        {
+          data,
+          series,
+          categoryKey: config.categoryKey,
+          ...common
+        }
+      );
+    case "composed":
+      return /* @__PURE__ */ jsx(
+        ComposedChart,
+        {
+          data,
+          series: series.map((s) => ({
+            type: s.composedType ?? "bar",
+            dataKey: s.dataKey,
+            name: s.name,
+            color: s.color
+          })),
+          xAxis,
+          ...common
+        }
+      );
+    case "waterfall":
+      return /* @__PURE__ */ jsx(
+        WaterfallChart,
+        {
+          data: data.map((d) => ({
+            name: String(d[config.categoryKey]),
+            value: Number(d[series[0]?.dataKey] ?? 0)
+          })),
+          ...common
+        }
+      );
+    case "funnel":
+      return /* @__PURE__ */ jsx(
+        FunnelChart,
+        {
+          data: data.map((d) => ({
+            name: String(d[config.categoryKey]),
+            value: Number(d[series[0]?.dataKey] ?? 0)
+          })),
+          ...common
+        }
+      );
+    case "treemap":
+      return /* @__PURE__ */ jsx(
+        TreemapChart,
+        {
+          data: data.map((d) => ({
+            name: String(d[config.categoryKey]),
+            value: Number(d[series[0]?.dataKey] ?? 0)
+          })),
+          ...common
+        }
+      );
+    case "radialBar":
+      return /* @__PURE__ */ jsx(
+        RadialBarChart,
+        {
+          data: data.map((d) => ({
+            name: String(d[config.categoryKey]),
+            value: Number(d[series[0]?.dataKey] ?? 0)
+          })),
+          ...common
+        }
+      );
+    case "heatmap": {
+      if (series.length < 2) {
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              height,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "hsl(var(--muted-foreground))",
+              fontSize: 12
+            },
+            children: "Heatmap requires at least 2 series (x, value)"
+          }
+        );
+      }
+      const xLabels = Array.from(
+        new Set(data.map((d) => String(d[config.categoryKey])))
+      );
+      const yLabels = Array.from(
+        new Set(data.map((d) => String(d[series[0].dataKey])))
+      );
+      const cells = data.map((d) => ({
+        x: String(d[config.categoryKey]),
+        y: String(d[series[0].dataKey]),
+        value: Number(d[series[1].dataKey] ?? 0)
+      }));
+      return /* @__PURE__ */ jsx(
+        HeatmapChart,
+        {
+          data: cells,
+          xLabels,
+          yLabels,
+          height,
+          className
+        }
+      );
+    }
+    default:
+      return null;
+  }
+});
+ChartRenderer.displayName = "ChartRenderer";
+var CHART_TYPE_OPTIONS = [
+  { value: "line", label: "Line" },
+  { value: "bar", label: "Bar" },
+  { value: "area", label: "Area" },
+  { value: "pie", label: "Pie" },
+  { value: "donut", label: "Donut" },
+  { value: "scatter", label: "Scatter" },
+  { value: "radar", label: "Radar" },
+  { value: "composed", label: "Composed" },
+  { value: "waterfall", label: "Waterfall" },
+  { value: "funnel", label: "Funnel" },
+  { value: "treemap", label: "Treemap" },
+  { value: "radialBar", label: "Radial Bar" },
+  { value: "heatmap", label: "Heatmap" }
+];
+var LEGEND_POSITIONS = [
+  { value: "none", label: "None" },
+  { value: "top-left", label: "Top Left" },
+  { value: "top-center", label: "Top Center" },
+  { value: "top-right", label: "Top Right" },
+  { value: "bottom-center", label: "Bottom Center" }
+];
+function useControlledConfig(initial, columns) {
+  const defaultConfig = {
+    type: "bar",
+    categoryKey: columns[0] ?? "",
+    series: columns.length > 1 ? [{ dataKey: columns[1], name: columns[1] }] : [],
+    legend: "none",
+    grid: true,
+    animate: true
+  };
+  return React17.useState({ ...defaultConfig, ...initial });
+}
+var selectStyle = {
+  width: "100%",
+  padding: "5px 8px",
+  fontSize: 12,
+  borderRadius: 4,
+  border: "1px solid hsl(var(--border))",
+  background: "hsl(var(--card))",
+  color: "hsl(var(--foreground))"
+};
+var labelStyle = {
+  fontSize: 11,
+  fontWeight: 500,
+  color: "hsl(var(--muted-foreground))",
+  marginBottom: 3,
+  display: "block"
+};
+var ChartBuilder = React17.memo(function ChartBuilder2({
+  columns,
+  data,
+  onChange,
+  onSave,
+  initialConfig,
+  className
+}) {
+  const [config, setConfig] = useControlledConfig(initialConfig, columns);
+  React17.useEffect(() => {
+    onChange?.(config);
+  }, [config, onChange]);
+  const addSeries = () => {
+    const unused = columns.find(
+      (c) => c !== config.categoryKey && !config.series.some((s) => s.dataKey === c)
+    );
+    if (!unused) return;
+    setConfig((prev) => ({
+      ...prev,
+      series: [...prev.series, { dataKey: unused, name: unused }]
+    }));
+  };
+  const removeSeries = (index) => {
+    setConfig((prev) => ({
+      ...prev,
+      series: prev.series.filter((_, i) => i !== index)
+    }));
+  };
+  const updateSeries = (index, field, value) => {
+    setConfig((prev) => ({
+      ...prev,
+      series: prev.series.map(
+        (s, i) => i === index ? { ...s, [field]: value } : s
+      )
+    }));
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex gap-4", className),
+      style: { minHeight: 400 },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex flex-col gap-3 shrink-0 overflow-y-auto",
+            style: {
+              width: 240,
+              padding: 12,
+              background: "hsl(var(--card))",
+              border: "1px solid hsl(var(--border))",
+              borderRadius: 8
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, color: "hsl(var(--foreground))" }, children: "Chart Builder" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Chart Type" }),
+                /* @__PURE__ */ jsx(
+                  "select",
+                  {
+                    style: selectStyle,
+                    value: config.type,
+                    onChange: (e) => setConfig((prev) => ({ ...prev, type: e.target.value })),
+                    children: CHART_TYPE_OPTIONS.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Category Axis" }),
+                /* @__PURE__ */ jsx(
+                  "select",
+                  {
+                    style: selectStyle,
+                    value: config.categoryKey,
+                    onChange: (e) => setConfig((prev) => ({ ...prev, categoryKey: e.target.value })),
+                    children: columns.map((c) => /* @__PURE__ */ jsx("option", { value: c, children: c }, c))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Series" }),
+                config.series.map((s, i) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex gap-1 items-center",
+                    style: { marginBottom: 4 },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "select",
+                        {
+                          style: { ...selectStyle, flex: 1 },
+                          value: s.dataKey,
+                          onChange: (e) => updateSeries(i, "dataKey", e.target.value),
+                          children: columns.filter((c) => c !== config.categoryKey).map((c) => /* @__PURE__ */ jsx("option", { value: c, children: c }, c))
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => removeSeries(i),
+                          style: {
+                            padding: "2px 6px",
+                            fontSize: 14,
+                            lineHeight: 1,
+                            border: "1px solid hsl(var(--border))",
+                            borderRadius: 4,
+                            background: "hsl(var(--card))",
+                            color: "hsl(var(--muted-foreground))",
+                            cursor: "pointer"
+                          },
+                          children: "\xD7"
+                        }
+                      )
+                    ]
+                  },
+                  i
+                )),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: addSeries,
+                    style: {
+                      width: "100%",
+                      padding: "4px 8px",
+                      fontSize: 11,
+                      border: "1px dashed hsl(var(--border))",
+                      borderRadius: 4,
+                      background: "transparent",
+                      color: "hsl(var(--muted-foreground))",
+                      cursor: "pointer",
+                      marginTop: 2
+                    },
+                    children: "+ Add Series"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Legend" }),
+                /* @__PURE__ */ jsx(
+                  "select",
+                  {
+                    style: selectStyle,
+                    value: config.legend,
+                    onChange: (e) => setConfig((prev) => ({ ...prev, legend: e.target.value })),
+                    children: LEGEND_POSITIONS.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    id: "grid-toggle",
+                    checked: config.grid,
+                    onChange: (e) => setConfig((prev) => ({ ...prev, grid: e.target.checked }))
+                  }
+                ),
+                /* @__PURE__ */ jsx("label", { htmlFor: "grid-toggle", style: { ...labelStyle, margin: 0 }, children: "Show Grid" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    id: "animate-toggle",
+                    checked: config.animate,
+                    onChange: (e) => setConfig((prev) => ({ ...prev, animate: e.target.checked }))
+                  }
+                ),
+                /* @__PURE__ */ jsx("label", { htmlFor: "animate-toggle", style: { ...labelStyle, margin: 0 }, children: "Animate" })
+              ] }),
+              onSave && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => onSave(config),
+                  style: {
+                    marginTop: 8,
+                    padding: "6px 12px",
+                    fontSize: 12,
+                    fontWeight: 600,
+                    borderRadius: 6,
+                    border: "none",
+                    background: "hsl(var(--primary))",
+                    color: "hsl(var(--primary-foreground))",
+                    cursor: "pointer"
+                  },
+                  children: "Save Chart"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex-1",
+            style: {
+              border: "1px solid hsl(var(--border))",
+              borderRadius: 8,
+              padding: 12,
+              background: "hsl(var(--background))",
+              minHeight: 300
+            },
+            children: /* @__PURE__ */ jsx(ChartRenderer, { config, data, height: "100%" })
+          }
+        )
+      ]
+    }
+  );
+});
+ChartBuilder.displayName = "ChartBuilder";
 
-export { BarChart, CHART_COLORS, LineChart, getChartColor };
+export { AreaChart, BarChart, CHART_COLORS, ChartBuilder, ChartContainer, ChartLegendContent, ChartRenderer, ChartTooltipContent, ComposedChart, DonutChart, FunnelChart, GanttChart, HeatmapChart, KPICard, LineChart, PieChart, RadarChart, RadialBarChart, SankeyChart, ScatterChart, ScenarioComparison, Sparkline, TreemapChart, WaterfallChart, formatCompact, formatCurrency, formatDuration, formatPercent, formatUnit, getChartColor, getSemanticColor, resolveLegendConfig, resolveTooltipProps, useLiveData };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map