react-premium-charts 0.1.6

package/dist/index.cjs

@@ -0,0 +1,2087 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
+var d3Shape = require('d3-shape');
+var d3Scale = require('d3-scale');
+var d3Array = require('d3-array');
+
+// src/theme/ThemeProvider.tsx
+var Ctx = react.createContext({
+  mode: "light",
+  palette: "default",
+  isGradientEnabled: true
+});
+function ThemeProvider({
+  mode = "light",
+  palette = "default",
+  isGradientEnabled = true,
+  children
+}) {
+  const value = react.useMemo(() => ({ mode, palette, isGradientEnabled }), [mode, palette, isGradientEnabled]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Ctx.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "msc-root", "data-msc-theme": mode, "data-msc-palette": palette, children }) });
+}
+function useTheme() {
+  return react.useContext(Ctx);
+}
+var ChartCtx = react.createContext(null);
+function useChart() {
+  const v = react.useContext(ChartCtx);
+  if (!v) throw new Error("useChart must be used inside <Chart>");
+  return v;
+}
+function Chart({
+  width,
+  height,
+  margin = { top: 16, right: 16, bottom: 28, left: 40 },
+  defs,
+  children,
+  className,
+  style
+}) {
+  const svgRef = react.useRef(null);
+  const [pointer, setPointer] = react.useState(null);
+  const clearTooltipFns = react.useRef(/* @__PURE__ */ new Set());
+  const registerClearTooltip = react.useCallback((fn) => {
+    clearTooltipFns.current.add(fn);
+    return () => {
+      clearTooltipFns.current.delete(fn);
+    };
+  }, []);
+  const handleChartLeave = react.useCallback(() => {
+    setPointer(null);
+    clearTooltipFns.current.forEach((fn) => fn());
+  }, []);
+  const clearAllTooltips = react.useCallback(() => {
+    clearTooltipFns.current.forEach((fn) => fn());
+  }, []);
+  const innerWidth = Math.max(0, width - margin.left - margin.right);
+  const innerHeight = Math.max(0, height - margin.top - margin.bottom);
+  const value = react.useMemo(
+    () => ({
+      size: { width, height },
+      margin,
+      innerWidth,
+      innerHeight,
+      svgRef,
+      pointer,
+      setPointer,
+      registerClearTooltip,
+      clearAllTooltips
+    }),
+    [width, height, margin, innerWidth, innerHeight, pointer, registerClearTooltip, clearAllTooltips]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ChartCtx.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      ref: svgRef,
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      overflow: "visible",
+      className,
+      style: { background: "var(--msc-panel)", borderRadius: "var(--msc-radius)", ...style },
+      onMouseLeave: handleChartLeave,
+      onMouseMove: (e) => {
+        const svg = svgRef.current;
+        if (!svg) return;
+        const pt = svg.createSVGPoint();
+        pt.x = e.clientX;
+        pt.y = e.clientY;
+        const screenCTM = svg.getScreenCTM();
+        if (!screenCTM) return;
+        const local = pt.matrixTransform(screenCTM.inverse());
+        setPointer({ x: local.x, y: local.y });
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${margin.left},${margin.top})`, children: [
+        defs,
+        children
+      ] })
+    }
+  ) });
+}
+function AxisBottom({
+  ticks,
+  y = void 0
+}) {
+  const { innerHeight } = useChart();
+  const yy = y ?? innerHeight;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: 0, x2: Math.max(...ticks.map((t) => t.x), 0), y1: yy, y2: yy, stroke: "var(--msc-border)" }),
+    ticks.map((t) => /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${t.x},${yy})`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("line", { y2: 6, stroke: "var(--msc-border)" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          y: 18,
+          textAnchor: "middle",
+          fontSize: 12,
+          fill: "var(--msc-muted)",
+          children: t.value
+        }
+      )
+    ] }, t.value))
+  ] });
+}
+function AxisLeft({
+  ticks
+}) {
+  const x = 0;
+  const maxY = Math.max(...ticks.map((t) => t.y), 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x, x2: x, y1: 0, y2: maxY, stroke: "var(--msc-border)" }),
+    ticks.map((t) => /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x},${t.y})`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x2: -6, stroke: "var(--msc-border)" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          x: -10,
+          dy: "0.32em",
+          textAnchor: "end",
+          fontSize: 12,
+          fill: "var(--msc-muted)",
+          children: t.value
+        }
+      )
+    ] }, t.value))
+  ] });
+}
+function AxisRight({
+  ticks,
+  x
+}) {
+  const maxY = Math.max(...ticks.map((t) => t.y), 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x, x2: x, y1: 0, y2: maxY, stroke: "var(--msc-border)" }),
+    ticks.map((t) => /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x},${t.y})`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x2: 6, stroke: "var(--msc-border)" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          x: 10,
+          dy: "0.32em",
+          textAnchor: "start",
+          fontSize: 12,
+          fill: "var(--msc-muted)",
+          children: t.value
+        }
+      )
+    ] }, t.value))
+  ] });
+}
+function Grid({
+  xTicks,
+  yTicks
+}) {
+  const { innerWidth, innerHeight } = useChart();
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { "aria-hidden": "true", children: [
+    xTicks.map((x) => /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: x,
+        x2: x,
+        y1: 0,
+        y2: innerHeight,
+        stroke: "var(--msc-grid)",
+        strokeDasharray: "3 6"
+      },
+      `x-${x}`
+    )),
+    yTicks.map((y) => /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: 0,
+        x2: innerWidth,
+        y1: y,
+        y2: y,
+        stroke: "var(--msc-grid)",
+        strokeDasharray: "3 6"
+      },
+      `y-${y}`
+    ))
+  ] });
+}
+function ThresholdLine({
+  value,
+  yScale,
+  stroke = "var(--msc-s4)",
+  strokeWidth = 1.5,
+  strokeDasharray = "6 4",
+  label
+}) {
+  const { innerWidth } = useChart();
+  const y = yScale(value);
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: 0,
+        x2: innerWidth,
+        y1: y,
+        y2: y,
+        stroke,
+        strokeWidth,
+        strokeDasharray
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: innerWidth - 4,
+        y: y - 6,
+        textAnchor: "end",
+        fontSize: 11,
+        fill: "var(--msc-muted)",
+        children: label
+      }
+    )
+  ] });
+}
+function LinearGradient({
+  id,
+  x1 = "0%",
+  y1 = "0%",
+  x2 = "0%",
+  y2 = "100%",
+  stops
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("linearGradient", { id, x1, y1, x2, y2, children: stops.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    "stop",
+    {
+      offset: s.offset,
+      stopColor: s.color,
+      stopOpacity: s.opacity ?? 1
+    },
+    i
+  )) }) });
+}
+function RadialGradient({
+  id,
+  cx = "50%",
+  cy = "50%",
+  r = "50%",
+  fx,
+  fy,
+  stops
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("radialGradient", { id, cx, cy, r, fx, fy, children: stops.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    "stop",
+    {
+      offset: s.offset,
+      stopColor: s.color,
+      stopOpacity: s.opacity ?? 1
+    },
+    i
+  )) }) });
+}
+function ChartTitle({
+  title,
+  x = 0,
+  y = -8
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "text",
+    {
+      x,
+      y,
+      fontSize: 14,
+      fontWeight: 600,
+      fill: "var(--msc-muted)",
+      children: title
+    }
+  );
+}
+function Legend({
+  items,
+  direction = "row"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "msc-legend",
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 12,
+        flexDirection: direction,
+        alignItems: "center",
+        justifyContent: "center",
+        marginTop: 12
+      },
+      children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            fontSize: 12,
+            color: "var(--msc-muted)"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "msc-dot",
+                style: {
+                  background: item.color,
+                  width: 8,
+                  height: 8,
+                  marginRight: 0
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              item.label,
+              item.value != null && `: ${item.value}`
+            ] })
+          ]
+        },
+        `${item.label}-${i}`
+      ))
+    }
+  );
+}
+var TOOLTIP_WIDTH = 200;
+var TOOLTIP_HEIGHT = 120;
+var OFFSET = 12;
+var PADDING = 8;
+var TOOLTIP_Z_INDEX = 1e4;
+function computeTooltipPosition(anchorX, anchorY, containerWidth, containerHeight, tooltipWidth = TOOLTIP_WIDTH, tooltipHeight = TOOLTIP_HEIGHT) {
+  let x = anchorX + OFFSET;
+  let y = anchorY - tooltipHeight - OFFSET;
+  if (x + tooltipWidth > containerWidth - PADDING) {
+    x = anchorX - tooltipWidth - OFFSET;
+  }
+  if (x < PADDING) {
+    x = PADDING;
+  }
+  if (y < PADDING) {
+    y = anchorY + OFFSET;
+  }
+  if (y + tooltipHeight > containerHeight - PADDING) {
+    y = containerHeight - tooltipHeight - PADDING;
+  }
+  return { x: Math.max(PADDING, x), y: Math.max(PADDING, y) };
+}
+function useScreenPosition(innerX, innerY, svgRef, margin) {
+  const [pos, setPos] = react.useState(null);
+  react.useEffect(() => {
+    const svg = svgRef?.current;
+    if (!svg || !margin) return;
+    const pt = svg.createSVGPoint();
+    pt.x = innerX + margin.left;
+    pt.y = innerY + margin.top;
+    const ctm = svg.getScreenCTM();
+    if (!ctm) return;
+    const screen = pt.matrixTransform(ctm);
+    setPos({ x: screen.x, y: screen.y });
+  }, [innerX, innerY, svgRef, margin]);
+  return pos;
+}
+function TooltipPortal({
+  x,
+  y,
+  anchorX,
+  anchorY,
+  containerWidth,
+  containerHeight,
+  svgRef,
+  margin,
+  children
+}) {
+  const innerPosition = anchorX != null && anchorY != null && containerWidth != null && containerHeight != null ? computeTooltipPosition(anchorX, anchorY, containerWidth, containerHeight) : { x: x ?? 0, y: y ?? 0 };
+  const screenPos = useScreenPosition(
+    innerPosition.x,
+    innerPosition.y,
+    svgRef,
+    margin ?? void 0
+  );
+  const usePortal = svgRef != null && margin != null && screenPos != null;
+  if (usePortal && screenPos) {
+    return reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            left: screenPos.x,
+            top: screenPos.y,
+            zIndex: TOOLTIP_Z_INDEX,
+            pointerEvents: "none",
+            width: "max-content",
+            maxWidth: TOOLTIP_WIDTH,
+            minWidth: 140
+          },
+          children
+        }
+      ),
+      document.body
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "foreignObject",
+    {
+      x: innerPosition.x,
+      y: innerPosition.y,
+      width: TOOLTIP_WIDTH + 40,
+      height: TOOLTIP_HEIGHT + 40,
+      style: { overflow: "visible", pointerEvents: "none" },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            width: "max-content",
+            maxWidth: TOOLTIP_WIDTH,
+            minWidth: 140,
+            pointerEvents: "none"
+          },
+          children
+        }
+      )
+    }
+  );
+}
+function DefaultTooltip({
+  title,
+  rows
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "msc-tooltip", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "msc-tooltip-title", children: title }),
+    rows.map((r) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "msc-tooltip-row", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "msc-dot", style: { background: r.color } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: r.label })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 650 }, children: r.value })
+    ] }, r.label))
+  ] });
+}
+var HOVER_HIT_RADIUS = 12;
+var HOVER_LEAVE_DELAY = 150;
+function LineSeries({
+  data,
+  x,
+  y,
+  xScale,
+  yScale,
+  stroke = "var(--msc-s1)",
+  strokeWidth = 2.5,
+  curve = "monotone",
+  showMarkers = false,
+  animate = true,
+  duration = 800,
+  hoverDimOpacity = 0.5,
+  tooltip
+}) {
+  const [hoveredIndex, setHoveredIndex] = react.useState(null);
+  const leaveTimeoutRef = react.useRef(null);
+  const { innerWidth, innerHeight, svgRef, margin, registerClearTooltip, clearAllTooltips } = useChart();
+  const clearTooltip = () => {
+    if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+    leaveTimeoutRef.current = null;
+    setHoveredIndex(null);
+  };
+  react.useEffect(() => {
+    return registerClearTooltip(clearTooltip);
+  }, [registerClearTooltip]);
+  const handleEnter = (i) => {
+    if (leaveTimeoutRef.current) {
+      clearTimeout(leaveTimeoutRef.current);
+      leaveTimeoutRef.current = null;
+    }
+    clearAllTooltips();
+    setHoveredIndex(i);
+  };
+  const handleLeave = () => {
+    leaveTimeoutRef.current = setTimeout(clearTooltip, HOVER_LEAVE_DELAY);
+  };
+  const { pathD, points } = react.useMemo(() => {
+    const gen = d3Shape.line().x((dd, i) => xScale(x(dd, i))).y((dd, i) => yScale(y(dd, i))).defined((dd, i) => Number.isFinite(x(dd, i)) && Number.isFinite(y(dd, i))).curve(curve === "monotone" ? d3Shape.curveMonotoneX : d3Shape.curveLinear);
+    const pathD2 = gen(data) ?? "";
+    const points2 = data.map((d, i) => ({
+      x: xScale(x(d, i)),
+      y: yScale(y(d, i)),
+      datum: d,
+      index: i
+    }));
+    return { pathD: pathD2, points: points2 };
+  }, [data, x, y, xScale, yScale, curve]);
+  const lineOpacity = hoveredIndex === null ? 1 : hoverDimOpacity;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: pathD,
+        fill: "none",
+        stroke,
+        strokeWidth,
+        opacity: lineOpacity,
+        pathLength: animate ? 1 : void 0,
+        strokeDasharray: animate ? "1 1" : void 0,
+        strokeDashoffset: animate ? 1 : void 0,
+        style: {
+          ...animate ? { animation: `msc-line-draw ${duration}ms ease-out forwards` } : {},
+          transition: "opacity 0.2s ease"
+        }
+      }
+    ),
+    points.map((pt, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx: pt.x,
+          cy: pt.y,
+          r: HOVER_HIT_RADIUS,
+          fill: "transparent",
+          style: { cursor: "pointer" },
+          onMouseEnter: () => handleEnter(i),
+          onMouseLeave: handleLeave
+        }
+      ),
+      (showMarkers || hoveredIndex === i) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            cx: pt.x,
+            cy: pt.y,
+            r: showMarkers ? 4 : 6,
+            fill: showMarkers ? stroke : "var(--msc-panel)",
+            stroke: showMarkers ? "var(--msc-panel)" : stroke,
+            strokeWidth: showMarkers ? 2 : 2.5,
+            style: {
+              transition: "opacity 0.15s ease",
+              transformOrigin: "center",
+              ...animate ? {
+                animation: `msc-marker-pop 400ms ease-out ${Math.min(300 + i * 80, duration - 100)}ms both`
+              } : {}
+            }
+          }
+        ),
+        tooltip && hoveredIndex === i && /* @__PURE__ */ jsxRuntime.jsx(
+          TooltipPortal,
+          {
+            anchorX: pt.x,
+            anchorY: pt.y,
+            containerWidth: innerWidth,
+            containerHeight: innerHeight,
+            svgRef,
+            margin,
+            children: /* @__PURE__ */ jsxRuntime.jsx(DefaultTooltip, { ...tooltip(pt.datum, i) })
+          }
+        )
+      ] })
+    ] }, i))
+  ] });
+}
+function AreaSeries({
+  data,
+  x,
+  y,
+  y0 = 0,
+  xScale,
+  yScale,
+  fill = "var(--msc-s1)",
+  fillOpacity = 0.18,
+  curve = "monotone",
+  animate = true,
+  duration = 600
+}) {
+  const d = react.useMemo(() => {
+    const gen = d3Shape.area().x((dd, i) => xScale(x(dd, i))).y1((dd, i) => yScale(y(dd, i))).y0(() => yScale(y0)).defined((dd, i) => Number.isFinite(x(dd, i)) && Number.isFinite(y(dd, i))).curve(curve === "monotone" ? d3Shape.curveMonotoneX : d3Shape.curveLinear);
+    return gen(data) ?? "";
+  }, [data, x, y, y0, xScale, yScale, curve]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d,
+      fill,
+      fillOpacity,
+      stroke: "none",
+      className: animate ? "msc-area-animate" : void 0,
+      style: animate ? {
+        animation: `msc-area-reveal ${duration}ms ease-out forwards`
+      } : void 0
+    }
+  );
+}
+var HOVER_LEAVE_DELAY2 = 150;
+function BarSeries({
+  data,
+  x,
+  y,
+  xScale,
+  yScale,
+  fill = "var(--msc-s1)",
+  radius = 10,
+  animate = true,
+  duration = 500,
+  hoverDimOpacity = 0.4,
+  tooltip
+}) {
+  const [hoveredIndex, setHoveredIndex] = react.useState(null);
+  const leaveTimeoutRef = react.useRef(null);
+  const { innerWidth, innerHeight, svgRef, margin, registerClearTooltip, clearAllTooltips } = useChart();
+  const barW = xScale.bandwidth();
+  const clearTooltip = () => {
+    if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+    leaveTimeoutRef.current = null;
+    setHoveredIndex(null);
+  };
+  react.useEffect(() => {
+    return registerClearTooltip(clearTooltip);
+  }, [registerClearTooltip]);
+  const handleEnter = (i) => {
+    if (leaveTimeoutRef.current) {
+      clearTimeout(leaveTimeoutRef.current);
+      leaveTimeoutRef.current = null;
+    }
+    clearAllTooltips();
+    setHoveredIndex(i);
+  };
+  const handleLeave = () => {
+    leaveTimeoutRef.current = setTimeout(clearTooltip, HOVER_LEAVE_DELAY2);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { children: data.map((d, i) => {
+    const xx = xScale(x(d, i));
+    if (xx == null) return null;
+    const yVal = y(d, i);
+    const yy = yScale(yVal);
+    const zeroY = yScale(0);
+    const h = zeroY - yy;
+    const isHovered = hoveredIndex === i;
+    const opacity = hoveredIndex === null ? 0.92 : isHovered ? 1 : hoverDimOpacity;
+    const anchorX = xx + barW / 2;
+    const anchorY = yy;
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          x: xx,
+          y: h >= 0 ? yy : zeroY,
+          width: barW,
+          height: Math.abs(h),
+          rx: radius,
+          ry: radius,
+          fill,
+          opacity,
+          className: `msc-bar-hoverable ${animate ? "msc-bar-animate" : ""}`.trim(),
+          style: {
+            ...animate ? { animation: `msc-bar-grow ${duration}ms ease-out ${i * 60}ms both` } : {},
+            transition: "opacity 0.2s ease",
+            cursor: tooltip ? "pointer" : void 0
+          },
+          onMouseEnter: () => handleEnter(i),
+          onMouseLeave: handleLeave
+        }
+      ),
+      tooltip && isHovered && /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipPortal,
+        {
+          anchorX,
+          anchorY,
+          containerWidth: innerWidth,
+          containerHeight: innerHeight,
+          svgRef,
+          margin,
+          children: /* @__PURE__ */ jsxRuntime.jsx(DefaultTooltip, { ...tooltip(d, i) })
+        }
+      )
+    ] }, i);
+  }) });
+}
+var HOVER_LEAVE_DELAY3 = 150;
+function HorizontalBarSeries({
+  data,
+  y,
+  x,
+  yScale,
+  xScale,
+  fill = "var(--msc-s1)",
+  radius = 6,
+  animate = true,
+  duration = 500,
+  hoverDimOpacity = 0.4,
+  tooltip
+}) {
+  const [hoveredIndex, setHoveredIndex] = react.useState(null);
+  const leaveTimeoutRef = react.useRef(null);
+  const { innerWidth, innerHeight, svgRef, margin, registerClearTooltip, clearAllTooltips } = useChart();
+  const barH = yScale.bandwidth();
+  const clearTooltip = () => {
+    if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+    leaveTimeoutRef.current = null;
+    setHoveredIndex(null);
+  };
+  react.useEffect(() => {
+    return registerClearTooltip(clearTooltip);
+  }, [registerClearTooltip]);
+  const handleEnter = (i) => {
+    if (leaveTimeoutRef.current) {
+      clearTimeout(leaveTimeoutRef.current);
+      leaveTimeoutRef.current = null;
+    }
+    clearAllTooltips();
+    setHoveredIndex(i);
+  };
+  const handleLeave = () => {
+    leaveTimeoutRef.current = setTimeout(clearTooltip, HOVER_LEAVE_DELAY3);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { children: data.map((d, i) => {
+    const yy = yScale(y(d, i));
+    if (yy == null) return null;
+    const xVal = x(d, i);
+    const xx = xScale(xVal);
+    const zeroX = xScale(0);
+    const w = xx - zeroX;
+    const isHovered = hoveredIndex === i;
+    const opacity = hoveredIndex === null ? 0.92 : isHovered ? 1 : hoverDimOpacity;
+    const anchorX = w >= 0 ? zeroX + Math.abs(w) / 2 : zeroX - Math.abs(w) / 2;
+    const anchorY = yy + barH / 2;
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          x: w >= 0 ? zeroX : xx,
+          y: yy,
+          width: Math.abs(w),
+          height: barH,
+          rx: radius,
+          ry: radius,
+          fill,
+          opacity,
+          className: `msc-bar-hoverable ${animate ? "msc-bar-animate msc-bar-horizontal" : ""}`.trim(),
+          style: {
+            ...animate ? { animation: `msc-bar-grow-horizontal ${duration}ms ease-out ${i * 60}ms both` } : {},
+            transition: "opacity 0.2s ease",
+            cursor: tooltip ? "pointer" : void 0
+          },
+          onMouseEnter: () => handleEnter(i),
+          onMouseLeave: handleLeave
+        }
+      ),
+      tooltip && isHovered && /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipPortal,
+        {
+          anchorX,
+          anchorY,
+          containerWidth: innerWidth,
+          containerHeight: innerHeight,
+          svgRef,
+          margin,
+          children: /* @__PURE__ */ jsxRuntime.jsx(DefaultTooltip, { ...tooltip(d, i) })
+        }
+      )
+    ] }, i);
+  }) });
+}
+var HOVER_LEAVE_DELAY4 = 150;
+function GroupedBarSeries({
+  data,
+  x,
+  xScale,
+  yScale,
+  groups,
+  radius = 6,
+  animate = true,
+  duration = 500,
+  hoverDimOpacity = 0.4
+}) {
+  const [hovered, setHovered] = react.useState(null);
+  const leaveTimeoutRef = react.useRef(null);
+  const { innerWidth, innerHeight, svgRef, margin, registerClearTooltip, clearAllTooltips } = useChart();
+  const clearTooltip = () => {
+    if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+    leaveTimeoutRef.current = null;
+    setHovered(null);
+  };
+  react.useEffect(() => {
+    return registerClearTooltip(clearTooltip);
+  }, [registerClearTooltip]);
+  const handleEnter = (groupIdx, dataIdx) => {
+    if (leaveTimeoutRef.current) {
+      clearTimeout(leaveTimeoutRef.current);
+      leaveTimeoutRef.current = null;
+    }
+    clearAllTooltips();
+    setHovered({ groupIdx, dataIdx });
+  };
+  const handleLeave = () => {
+    leaveTimeoutRef.current = setTimeout(clearTooltip, HOVER_LEAVE_DELAY4);
+  };
+  const groupCount = groups.length;
+  const categoryBand = xScale.bandwidth();
+  const barGap = 2;
+  const barWidth = (categoryBand - barGap * (groupCount - 1)) / groupCount;
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { children: groups.map(
+    (group, groupIdx) => data.map((d, i) => {
+      const xx = xScale(x(d, i));
+      if (xx == null) return null;
+      const xOffset = xx + groupIdx * (barWidth + barGap);
+      const yVal = group.y(d, i);
+      const yy = yScale(yVal);
+      const zeroY = yScale(0);
+      const h = zeroY - yy;
+      const rectY = h >= 0 ? yy : zeroY;
+      const isHovered = hovered?.groupIdx === groupIdx && hovered?.dataIdx === i;
+      const opacity = hovered === null ? 0.92 : isHovered ? 1 : hoverDimOpacity;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: xOffset,
+            y: rectY,
+            width: barWidth,
+            height: Math.abs(h),
+            rx: radius,
+            ry: radius,
+            fill: group.fill,
+            opacity,
+            className: `msc-bar-hoverable ${animate ? "msc-bar-animate" : ""}`.trim(),
+            style: {
+              ...animate ? { animation: `msc-bar-grow ${duration}ms ease-out ${(i * groupCount + groupIdx) * 40}ms both` } : {},
+              transition: "opacity 0.2s ease",
+              cursor: group.tooltip ? "pointer" : void 0
+            },
+            onMouseEnter: () => handleEnter(groupIdx, i),
+            onMouseLeave: handleLeave
+          }
+        ),
+        group.tooltip && isHovered && /* @__PURE__ */ jsxRuntime.jsx(
+          TooltipPortal,
+          {
+            anchorX: xOffset + barWidth / 2,
+            anchorY: yy,
+            containerWidth: innerWidth,
+            containerHeight: innerHeight,
+            svgRef,
+            margin,
+            children: /* @__PURE__ */ jsxRuntime.jsx(DefaultTooltip, { ...group.tooltip(d, i) })
+          }
+        )
+      ] }, `${groupIdx}-${i}`);
+    })
+  ) });
+}
+var HOVER_LEAVE_DELAY5 = 150;
+function StackedBarSeries({
+  segments,
+  orientation = "horizontal",
+  radius = 4,
+  animate = true,
+  duration = 400,
+  hoverDimOpacity = 0.4,
+  showValues = true,
+  valueFormat = (v) => String(v)
+}) {
+  const [hoveredIdx, setHoveredIdx] = react.useState(null);
+  const leaveTimeoutRef = react.useRef(null);
+  const { innerWidth, innerHeight, svgRef, margin, registerClearTooltip, clearAllTooltips } = useChart();
+  const clearTooltip = () => {
+    if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+    leaveTimeoutRef.current = null;
+    setHoveredIdx(null);
+  };
+  react.useEffect(() => {
+    return registerClearTooltip(clearTooltip);
+  }, [registerClearTooltip]);
+  const handleEnter = (idx) => {
+    if (leaveTimeoutRef.current) {
+      clearTimeout(leaveTimeoutRef.current);
+      leaveTimeoutRef.current = null;
+    }
+    clearAllTooltips();
+    setHoveredIdx(idx);
+  };
+  const handleLeave = () => {
+    leaveTimeoutRef.current = setTimeout(clearTooltip, HOVER_LEAVE_DELAY5);
+  };
+  const total = segments.reduce((s, seg) => s + seg.value, 0);
+  if (total <= 0) return null;
+  const isHorizontal = orientation === "horizontal";
+  const barLength = isHorizontal ? innerWidth : innerHeight;
+  const barThickness = isHorizontal ? innerHeight : innerWidth;
+  const n = segments.length;
+  function roundedRectPath(x, y, w, h, r, roundLeft, roundRight) {
+    const r2 = Math.min(r, w / 2, h / 2);
+    if (r2 <= 0) return `M ${x} ${y} L ${x + w} ${y} L ${x + w} ${y + h} L ${x} ${y + h} Z`;
+    if (roundLeft && roundRight) {
+      return `M ${x + r2} ${y} L ${x + w - r2} ${y} A ${r2} ${r2} 0 0 1 ${x + w} ${y + r2} L ${x + w} ${y + h - r2} A ${r2} ${r2} 0 0 1 ${x + w - r2} ${y + h} L ${x + r2} ${y + h} A ${r2} ${r2} 0 0 1 ${x} ${y + h - r2} L ${x} ${y + r2} A ${r2} ${r2} 0 0 1 ${x + r2} ${y} Z`;
+    }
+    if (roundLeft) {
+      return `M ${x + r2} ${y} L ${x + w} ${y} L ${x + w} ${y + h} L ${x + r2} ${y + h} A ${r2} ${r2} 0 0 1 ${x} ${y + h - r2} L ${x} ${y + r2} A ${r2} ${r2} 0 0 1 ${x + r2} ${y} Z`;
+    }
+    if (roundRight) {
+      return `M ${x} ${y} L ${x + w - r2} ${y} A ${r2} ${r2} 0 0 1 ${x + w} ${y + r2} L ${x + w} ${y + h - r2} A ${r2} ${r2} 0 0 1 ${x + w - r2} ${y + h} L ${x} ${y + h} Z`;
+    }
+    return `M ${x} ${y} L ${x + w} ${y} L ${x + w} ${y + h} L ${x} ${y + h} Z`;
+  }
+  let offset = 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: isHorizontal ? void 0 : `translate(0,${innerHeight}) rotate(-90)`, children: segments.map((seg, idx) => {
+    const width = seg.value / total * barLength;
+    const x = offset;
+    offset += width;
+    const isHovered = hoveredIdx === idx;
+    const opacity = hoveredIdx === null ? 0.92 : isHovered ? 1 : hoverDimOpacity;
+    const textX = x + width / 2;
+    const textY = barThickness / 2;
+    const minWidthForLabel = 24;
+    const isFirst = idx === 0;
+    const isLast = idx === n - 1;
+    const roundLeft = isFirst;
+    const roundRight = isLast;
+    const pathD = roundedRectPath(x, 0, Math.max(0, width), barThickness, radius, roundLeft, roundRight);
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: pathD,
+          fill: seg.fill,
+          opacity,
+          style: {
+            ...animate ? { animation: `msc-bar-grow ${duration}ms ease-out ${idx * 50}ms both` } : {},
+            transition: "opacity 0.2s ease",
+            cursor: seg.tooltip ? "pointer" : void 0
+          },
+          onMouseEnter: () => handleEnter(idx),
+          onMouseLeave: handleLeave
+        }
+      ),
+      showValues && width >= minWidthForLabel && /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          x: textX,
+          y: textY,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          fill: "white",
+          style: {
+            fontSize: 11,
+            fontWeight: 600,
+            pointerEvents: "none",
+            textShadow: "0 1px 1px rgba(0,0,0,0.3)"
+          },
+          children: seg.label ? `${seg.label}: ${valueFormat(seg.value)}` : valueFormat(seg.value)
+        }
+      ),
+      seg.tooltip && isHovered && /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipPortal,
+        {
+          anchorX: x + width / 2,
+          anchorY: barThickness / 2,
+          containerWidth: innerWidth,
+          containerHeight: innerHeight,
+          svgRef,
+          margin,
+          children: /* @__PURE__ */ jsxRuntime.jsx(DefaultTooltip, { ...seg.tooltip })
+        }
+      )
+    ] }, idx);
+  }) });
+}
+var DEFAULT_COLORS = [
+  "var(--msc-s1)",
+  "var(--msc-s2)",
+  "var(--msc-s3)",
+  "var(--msc-s4)",
+  "var(--msc-s5)"
+];
+function PieSeries({
+  data,
+  value,
+  colors = DEFAULT_COLORS,
+  innerRadius = 0,
+  outerRadius,
+  padAngle = 0,
+  cornerRadius = 0,
+  animate = true,
+  duration = 600,
+  hoverDimOpacity = 0.4,
+  tooltip
+}) {
+  const [hoveredIndex, setHoveredIndex] = react.useState(null);
+  const leaveTimeoutRef = react.useRef(null);
+  const { innerWidth, innerHeight, svgRef, margin, registerClearTooltip, clearAllTooltips } = useChart();
+  const clearTooltip = () => {
+    if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+    leaveTimeoutRef.current = null;
+    setHoveredIndex(null);
+  };
+  react.useEffect(() => {
+    return registerClearTooltip(clearTooltip);
+  }, [registerClearTooltip]);
+  const handleEnter = (i) => {
+    if (leaveTimeoutRef.current) {
+      clearTimeout(leaveTimeoutRef.current);
+      leaveTimeoutRef.current = null;
+    }
+    clearAllTooltips();
+    setHoveredIndex(i);
+  };
+  const handleLeave = () => {
+    leaveTimeoutRef.current = setTimeout(clearTooltip, 150);
+  };
+  const { arcs, arcGen, cx, cy } = react.useMemo(() => {
+    const r = outerRadius ?? Math.min(innerWidth, innerHeight) / 2 - 8;
+    const cx2 = innerWidth / 2;
+    const cy2 = innerHeight / 2;
+    const pieGen = d3Shape.pie().value((d, i) => value(d, i)).sort(null);
+    const arcGen2 = d3Shape.arc().innerRadius(innerRadius).outerRadius(r).padAngle(padAngle).cornerRadius(cornerRadius);
+    const arcs2 = pieGen(data).map((d, i) => ({ ...d, index: i }));
+    return { arcs: arcs2, arcGen: arcGen2, cx: cx2, cy: cy2 };
+  }, [data, value, innerWidth, innerHeight, outerRadius, innerRadius, padAngle, cornerRadius]);
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${cx},${cy})`, children: arcs.map((arc, i) => {
+    const d = arcGen(arc);
+    if (!d) return null;
+    const fill = colors[i % colors.length] ?? colors[0];
+    const isHovered = hoveredIndex === i;
+    const fillOpacity = hoveredIndex === null ? 0.92 : isHovered ? 1 : hoverDimOpacity;
+    const [centroidX, centroidY] = arcGen.centroid(arc);
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d,
+          fill,
+          fillOpacity,
+          className: `msc-pie-slice-hoverable ${animate ? "msc-pie-slice-animate" : ""}`.trim(),
+          style: {
+            ...animate ? { animation: `msc-pie-draw ${duration}ms ease-out ${i * 40}ms both` } : {},
+            transition: "fill-opacity 0.2s ease",
+            cursor: tooltip ? "pointer" : void 0
+          },
+          onMouseEnter: () => handleEnter(i),
+          onMouseLeave: handleLeave
+        }
+      ),
+      tooltip && isHovered && /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipPortal,
+        {
+          anchorX: cx + centroidX,
+          anchorY: cy + centroidY,
+          containerWidth: innerWidth,
+          containerHeight: innerHeight,
+          svgRef,
+          margin,
+          children: /* @__PURE__ */ jsxRuntime.jsx(DefaultTooltip, { ...tooltip(arc.data, i) })
+        }
+      )
+    ] }, i);
+  }) });
+}
+var DEFAULT_COLORS2 = [
+  "var(--msc-s1)",
+  "var(--msc-s2)",
+  "var(--msc-s3)",
+  "var(--msc-s4)",
+  "var(--msc-s5)"
+];
+var HOVER_LEAVE_DELAY6 = 150;
+function PolarAreaSeries({
+  data,
+  value,
+  colors = DEFAULT_COLORS2,
+  innerRadius = 0,
+  padAngle = 0.02,
+  cornerRadius = 4,
+  animate = true,
+  duration = 600,
+  hoverDimOpacity = 0.4,
+  tooltip
+}) {
+  const [hoveredIndex, setHoveredIndex] = react.useState(null);
+  const leaveTimeoutRef = react.useRef(null);
+  const { innerWidth, innerHeight, svgRef, margin, registerClearTooltip, clearAllTooltips } = useChart();
+  const clearTooltip = () => {
+    if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+    leaveTimeoutRef.current = null;
+    setHoveredIndex(null);
+  };
+  react.useEffect(() => {
+    return registerClearTooltip(clearTooltip);
+  }, [registerClearTooltip]);
+  const handleEnter = (i) => {
+    if (leaveTimeoutRef.current) {
+      clearTimeout(leaveTimeoutRef.current);
+      leaveTimeoutRef.current = null;
+    }
+    clearAllTooltips();
+    setHoveredIndex(i);
+  };
+  const handleLeave = () => {
+    leaveTimeoutRef.current = setTimeout(clearTooltip, HOVER_LEAVE_DELAY6);
+  };
+  const { arcs, arcGen, cx, cy } = react.useMemo(() => {
+    const r = Math.min(innerWidth, innerHeight) / 2 - 8;
+    const cx2 = innerWidth / 2;
+    const cy2 = innerHeight / 2;
+    const maxVal = Math.max(...data.map((d, i) => value(d, i)), 1);
+    const n = data.length;
+    const angleStep = 2 * Math.PI / n;
+    const arcs2 = data.map((d, i) => {
+      const val = value(d, i);
+      const outerR = innerRadius + val / maxVal * (r - innerRadius);
+      return {
+        data: d,
+        index: i,
+        startAngle: i * angleStep,
+        endAngle: (i + 1) * angleStep,
+        innerRadius,
+        outerRadius: outerR
+      };
+    });
+    const arcGen2 = d3Shape.arc().innerRadius((a) => a.innerRadius).outerRadius((a) => a.outerRadius).padAngle(padAngle).cornerRadius(cornerRadius);
+    return { arcs: arcs2, arcGen: arcGen2, cx: cx2, cy: cy2 };
+  }, [data, value, innerWidth, innerHeight, innerRadius, padAngle, cornerRadius]);
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${cx},${cy})`, children: arcs.map((arc, i) => {
+    const d = arcGen(arc);
+    if (!d) return null;
+    const fill = colors[i % colors.length] ?? colors[0];
+    const isHovered = hoveredIndex === i;
+    const fillOpacity = hoveredIndex === null ? 0.92 : isHovered ? 1 : hoverDimOpacity;
+    const [centroidX, centroidY] = arcGen.centroid(arc);
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d,
+          fill,
+          fillOpacity,
+          className: `msc-pie-slice-hoverable ${animate ? "msc-pie-slice-animate" : ""}`.trim(),
+          style: {
+            ...animate ? { animation: `msc-pie-draw ${duration}ms ease-out ${i * 40}ms both` } : {},
+            transition: "fill-opacity 0.2s ease",
+            cursor: tooltip ? "pointer" : void 0
+          },
+          onMouseEnter: () => handleEnter(i),
+          onMouseLeave: handleLeave
+        }
+      ),
+      tooltip && isHovered && /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipPortal,
+        {
+          anchorX: cx + centroidX,
+          anchorY: cy + centroidY,
+          containerWidth: innerWidth,
+          containerHeight: innerHeight,
+          svgRef,
+          margin,
+          children: /* @__PURE__ */ jsxRuntime.jsx(DefaultTooltip, { ...tooltip(arc.data, i) })
+        }
+      )
+    ] }, i);
+  }) });
+}
+var DEFAULT_COLORS3 = [
+  "var(--msc-s1)",
+  "var(--msc-s2)",
+  "var(--msc-s3)",
+  "var(--msc-s4)",
+  "var(--msc-s5)"
+];
+function PieChart({
+  data,
+  value,
+  label,
+  colors = DEFAULT_COLORS3,
+  width = 280,
+  height = 260,
+  margin = { top: 16, right: 16, bottom: 16, left: 16 },
+  showLegend = true,
+  showValues = true,
+  valueFormat = (v) => String(v),
+  innerRadius = 0,
+  padAngle = 0.02,
+  cornerRadius = 4,
+  animate = true,
+  defs,
+  tooltip
+}) {
+  const getColor = (i) => colors[i % colors.length] ?? colors[0] ?? "var(--msc-s1)";
+  const legendItems = data.map((d, i) => ({
+    label: label ? label(d, i) : `Item ${i + 1}`,
+    value: showValues ? valueFormat(value(d, i)) : void 0,
+    color: getColor(i)
+  }));
+  const defaultTooltip = tooltip ?? ((d, i) => ({
+    title: label ? label(d, i) : `Item ${i + 1}`,
+    rows: [{ label: "Value", value: valueFormat(value(d, i)), color: getColor(i) }]
+  }));
+  const chartMargin = {
+    top: margin.top ?? 16,
+    right: margin.right ?? 16,
+    bottom: margin.bottom ?? 16,
+    left: margin.left ?? 16
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Chart, { width, height, margin: chartMargin, children: [
+      defs,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PieSeries,
+        {
+          data,
+          value,
+          colors,
+          innerRadius,
+          padAngle,
+          cornerRadius,
+          animate,
+          tooltip: defaultTooltip
+        }
+      )
+    ] }),
+    showLegend && /* @__PURE__ */ jsxRuntime.jsx(Legend, { items: legendItems })
+  ] });
+}
+function ComboChart({
+  data,
+  x,
+  bar,
+  line,
+  barLabel = "Bar",
+  lineLabel = "Line",
+  barFill = "var(--msc-s1)",
+  lineStroke = "var(--msc-s2)",
+  width = 320,
+  height = 200,
+  margin = { top: 24, right: 16, bottom: 28, left: 46 },
+  showMarkers = true,
+  animate = true,
+  defs,
+  barTooltip,
+  lineTooltip
+}) {
+  const chartMargin = {
+    top: margin.top ?? 24,
+    right: margin.right ?? 16,
+    bottom: margin.bottom ?? 28,
+    left: margin.left ?? 46
+  };
+  const innerW = width - (chartMargin.left ?? 0) - (chartMargin.right ?? 0);
+  const innerH = height - (chartMargin.top ?? 0) - (chartMargin.bottom ?? 0);
+  const xScale = react.useMemo(
+    () => d3Scale.scaleBand().domain(data.map((d, i) => x(d, i))).range([0, innerW]).padding(0.25),
+    [data, x, innerW]
+  );
+  const yScale = react.useMemo(() => {
+    const barVals = data.map((d, i) => bar(d, i));
+    const lineVals = data.map((d, i) => line(d, i));
+    const all = [...barVals, ...lineVals];
+    return d3Scale.scaleLinear().domain([Math.min(...all, 0), Math.max(...all)]).nice().range([innerH, 0]);
+  }, [data, bar, line, innerH]);
+  const lineXScale = react.useMemo(() => {
+    const firstD = data[0];
+    const lastD = data[data.length - 1];
+    const first = firstD ? (xScale(x(firstD, 0)) ?? 0) + xScale.bandwidth() / 2 : 0;
+    const last = data.length > 1 && lastD ? (xScale(x(lastD, data.length - 1)) ?? 0) + xScale.bandwidth() / 2 : first;
+    return d3Scale.scaleLinear().domain([0, Math.max(0, data.length - 1)]).range([first, last]);
+  }, [data, x, xScale]);
+  const bottomTicks = react.useMemo(
+    () => data.map((d, i) => ({ value: x(d, i), x: (xScale(x(d, i)) ?? 0) + xScale.bandwidth() / 2, y: innerH })),
+    [data, x, xScale, innerH]
+  );
+  const leftTicks = react.useMemo(() => yScale.ticks(5).map((v) => ({ value: String(v), x: 0, y: yScale(v) })), [yScale]);
+  const xTicks = xScale.domain().map((m) => (xScale(m) ?? 0) + xScale.bandwidth() / 2);
+  const yTicks = yScale.ticks(5).map((v) => yScale(v));
+  const defaultBarTooltip = barTooltip ?? ((d, i) => ({
+    title: x(d, i),
+    rows: [{ label: barLabel, value: String(bar(d, i)), color: barFill }]
+  }));
+  const defaultLineTooltip = lineTooltip ?? ((d, i) => ({
+    title: x(d, i),
+    rows: [{ label: lineLabel, value: String(line(d, i)), color: lineStroke }]
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Chart, { width, height, margin: chartMargin, children: [
+    defs,
+    /* @__PURE__ */ jsxRuntime.jsx(Grid, { xTicks, yTicks }),
+    /* @__PURE__ */ jsxRuntime.jsx(AxisLeft, { ticks: leftTicks }),
+    /* @__PURE__ */ jsxRuntime.jsx(AxisBottom, { ticks: bottomTicks }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BarSeries,
+      {
+        data,
+        x,
+        y: bar,
+        xScale,
+        yScale,
+        fill: barFill,
+        animate,
+        tooltip: defaultBarTooltip
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      LineSeries,
+      {
+        data,
+        x: (_, i) => i,
+        y: line,
+        xScale: lineXScale,
+        yScale,
+        stroke: lineStroke,
+        showMarkers,
+        animate,
+        tooltip: defaultLineTooltip
+      }
+    )
+  ] });
+}
+var HOVER_LEAVE_DELAY7 = 150;
+function RadarChart({
+  data,
+  value,
+  label,
+  colors = ["var(--msc-s1)", "var(--msc-s2)", "var(--msc-s3)"],
+  width = 280,
+  height = 280,
+  margin = { top: 24, right: 24, bottom: 24, left: 24 },
+  levels = 5,
+  animate = true,
+  duration = 500,
+  fillOpacity = 0.25,
+  strokeWidth = 2,
+  fill,
+  stroke,
+  defs,
+  tooltip
+}) {
+  const chartMargin = {
+    top: margin.top ?? 24,
+    right: margin.right ?? 24,
+    bottom: margin.bottom ?? 24,
+    left: margin.left ?? 24
+  };
+  const innerW = width - (chartMargin.left ?? 0) - (chartMargin.right ?? 0);
+  const innerH = height - (chartMargin.top ?? 0) - (chartMargin.bottom ?? 0);
+  const cx = innerW / 2;
+  const cy = innerH / 2;
+  const radius = Math.min(cx, cy) - 16;
+  const n = data.length;
+  const angleStep = 2 * Math.PI / n;
+  const points = react.useMemo(() => {
+    const maxVal = Math.max(...data.map((d, i) => value(d, i)), 1);
+    return data.map((d, i) => {
+      const angle = i * angleStep - Math.PI / 2;
+      const val = value(d, i);
+      const r = val / maxVal * radius;
+      return {
+        x: cx + r * Math.cos(angle),
+        y: cy + r * Math.sin(angle),
+        label: label(d, i),
+        value: val,
+        datum: d,
+        index: i
+      };
+    });
+  }, [data, value, label, angleStep, radius, cx, cy]);
+  const polygonPoints = points.map((p) => `${p.x},${p.y}`).join(" ");
+  const fillColor = fill ?? colors[0] ?? "var(--msc-s1)";
+  const strokeColor = stroke ?? colors[0] ?? "var(--msc-s1)";
+  return /* @__PURE__ */ jsxRuntime.jsxs(Chart, { width, height, margin: chartMargin, children: [
+    defs,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RadarGrid,
+      {
+        n,
+        levels,
+        cx,
+        cy,
+        radius,
+        angleStep
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "polygon",
+        {
+          points: polygonPoints,
+          fill: fillColor,
+          fillOpacity,
+          stroke: strokeColor,
+          strokeWidth,
+          style: {
+            ...animate ? { animation: `msc-area-reveal ${duration}ms ease-out forwards` } : {}
+          }
+        }
+      ),
+      points.map((pt, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        RadarPoint,
+        {
+          pt,
+          color: strokeColor,
+          animate,
+          duration,
+          delay: i * 60,
+          tooltip
+        },
+        i
+      ))
+    ] }),
+    points.map((pt, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: pt.x + (pt.x >= cx ? 8 : -8),
+        y: pt.y,
+        textAnchor: pt.x >= cx ? "start" : "end",
+        dominantBaseline: "middle",
+        fontSize: 10,
+        fill: "var(--msc-muted)",
+        children: pt.label
+      },
+      `label-${i}`
+    ))
+  ] });
+}
+function RadarGrid({
+  n,
+  levels,
+  cx,
+  cy,
+  radius,
+  angleStep
+}) {
+  const lines = [];
+  for (let level = 1; level <= levels; level++) {
+    const r = radius * level / levels;
+    const pts = [];
+    for (let i = 0; i <= n; i++) {
+      const angle = i * angleStep - Math.PI / 2;
+      pts.push(`${cx + r * Math.cos(angle)},${cy + r * Math.sin(angle)}`);
+    }
+    lines.push(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "polygon",
+        {
+          points: pts.join(" "),
+          fill: "none",
+          stroke: "var(--msc-grid)",
+          strokeWidth: 1
+        },
+        `level-${level}`
+      )
+    );
+  }
+  for (let i = 0; i < n; i++) {
+    const angle = i * angleStep - Math.PI / 2;
+    const x2 = cx + radius * Math.cos(angle);
+    const y2 = cy + radius * Math.sin(angle);
+    lines.push(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          x1: cx,
+          y1: cy,
+          x2,
+          y2,
+          stroke: "var(--msc-grid)",
+          strokeWidth: 1
+        },
+        `axis-${i}`
+      )
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { children: lines });
+}
+function RadarPoint({
+  pt,
+  color,
+  animate,
+  duration,
+  delay,
+  tooltip
+}) {
+  const [hovered, setHovered] = react.useState(false);
+  const leaveTimeoutRef = react.useRef(null);
+  const { innerWidth, innerHeight, svgRef, margin, registerClearTooltip, clearAllTooltips } = useChart();
+  react.useEffect(() => {
+    const clear = () => {
+      if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+      setHovered(false);
+    };
+    return registerClearTooltip(clear);
+  }, [registerClearTooltip]);
+  const handleEnter = () => {
+    if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+    clearAllTooltips();
+    setHovered(true);
+  };
+  const handleLeave = () => {
+    leaveTimeoutRef.current = setTimeout(() => setHovered(false), HOVER_LEAVE_DELAY7);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: pt.x,
+        cy: pt.y,
+        r: 5,
+        fill: color,
+        stroke: "var(--msc-panel)",
+        strokeWidth: 2,
+        style: {
+          cursor: tooltip ? "pointer" : void 0,
+          ...animate ? { animation: `msc-marker-pop 400ms ease-out ${delay}ms both` } : {}
+        },
+        onMouseEnter: handleEnter,
+        onMouseLeave: handleLeave
+      }
+    ),
+    tooltip && hovered && /* @__PURE__ */ jsxRuntime.jsx(
+      TooltipPortal,
+      {
+        anchorX: pt.x,
+        anchorY: pt.y,
+        containerWidth: innerWidth,
+        containerHeight: innerHeight,
+        svgRef,
+        margin,
+        children: /* @__PURE__ */ jsxRuntime.jsx(DefaultTooltip, { ...tooltip(pt.datum, pt.index) })
+      }
+    )
+  ] });
+}
+var DEFAULT_COLORS4 = [
+  "var(--msc-s1)",
+  "var(--msc-s2)",
+  "var(--msc-s3)",
+  "var(--msc-s4)",
+  "var(--msc-s5)"
+];
+function PolarAreaChart({
+  data,
+  value,
+  label,
+  colors = DEFAULT_COLORS4,
+  width = 280,
+  height = 260,
+  margin = { top: 16, right: 16, bottom: 16, left: 16 },
+  showLegend = true,
+  showValues = true,
+  valueFormat = (v) => String(v),
+  animate = true,
+  defs,
+  tooltip
+}) {
+  const getColor = (i) => colors[i % colors.length] ?? colors[0] ?? "var(--msc-s1)";
+  const legendItems = data.map((d, i) => ({
+    label: label ? label(d, i) : `Item ${i + 1}`,
+    value: showValues ? valueFormat(value(d, i)) : void 0,
+    color: getColor(i)
+  }));
+  const chartMargin = {
+    top: margin.top ?? 16,
+    right: margin.right ?? 16,
+    bottom: margin.bottom ?? 16,
+    left: margin.left ?? 16
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Chart, { width, height, margin: chartMargin, children: [
+      defs,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PolarAreaSeries,
+        {
+          data,
+          value,
+          colors,
+          animate,
+          tooltip
+        }
+      )
+    ] }),
+    showLegend && /* @__PURE__ */ jsxRuntime.jsx(Legend, { items: legendItems })
+  ] });
+}
+function MultiaxisLineChart({
+  data,
+  x,
+  leftLine,
+  rightLine,
+  leftLabel = "Left",
+  rightLabel = "Right",
+  leftStroke = "var(--msc-s1)",
+  rightStroke = "var(--msc-s2)",
+  width = 400,
+  height = 240,
+  margin = { top: 24, right: 48, bottom: 28, left: 48 },
+  showMarkers = true,
+  defs,
+  leftTooltip,
+  rightTooltip
+}) {
+  const chartMargin = {
+    top: margin.top ?? 24,
+    right: margin.right ?? 48,
+    bottom: margin.bottom ?? 28,
+    left: margin.left ?? 48
+  };
+  const innerW = width - (chartMargin.left ?? 0) - (chartMargin.right ?? 0);
+  const innerH = height - (chartMargin.top ?? 0) - (chartMargin.bottom ?? 0);
+  const leftVals = data.map((d, i) => leftLine(d, i));
+  const rightVals = data.map((d, i) => rightLine(d, i));
+  const leftYScale = react.useMemo(
+    () => d3Scale.scaleLinear().domain([Math.min(...leftVals, 0), Math.max(...leftVals)]).nice().range([innerH, 0]),
+    [leftVals, innerH]
+  );
+  const rightYScale = react.useMemo(
+    () => d3Scale.scaleLinear().domain([Math.min(...rightVals, 0), Math.max(...rightVals)]).nice().range([innerH, 0]),
+    [rightVals, innerH]
+  );
+  const xScale = react.useMemo(() => {
+    const labels = data.map((d, i) => String(x(d, i)));
+    return d3Scale.scaleBand().domain(labels).range([0, innerW]).padding(0.25);
+  }, [data, x, innerW]);
+  const lineXScale = react.useMemo(() => {
+    const domain = xScale.domain();
+    const firstLabel = domain[0] ?? "";
+    const lastLabel = domain[domain.length - 1] ?? firstLabel;
+    const first = (xScale(firstLabel) ?? 0) + xScale.bandwidth() / 2;
+    const last = (xScale(lastLabel) ?? first) + xScale.bandwidth() / 2;
+    return d3Scale.scaleLinear().domain([0, data.length - 1]).range([first, last]);
+  }, [xScale, data.length]);
+  const bottomTicks = react.useMemo(
+    () => data.map((d, i) => ({
+      value: String(x(d, i)),
+      x: (xScale(String(x(d, i))) ?? 0) + xScale.bandwidth() / 2,
+      y: innerH
+    })),
+    [data, x, xScale, innerH]
+  );
+  const leftTicks = react.useMemo(
+    () => leftYScale.ticks(5).map((v) => ({ value: String(v), x: 0, y: leftYScale(v) })),
+    [leftYScale]
+  );
+  const rightTicks = react.useMemo(
+    () => rightYScale.ticks(5).map((v) => ({
+      value: String(v),
+      x: innerW,
+      y: rightYScale(v)
+    })),
+    [rightYScale, innerW]
+  );
+  const xTicks = xScale.domain().map((m) => (xScale(m) ?? 0) + xScale.bandwidth() / 2);
+  const yTicks = leftYScale.ticks(5).map((v) => leftYScale(v));
+  const defaultLeftTooltip = leftTooltip ?? ((d, i) => ({
+    title: String(x(d, i)),
+    rows: [{ label: leftLabel, value: String(leftLine(d, i)), color: leftStroke }]
+  }));
+  const defaultRightTooltip = rightTooltip ?? ((d, i) => ({
+    title: String(x(d, i)),
+    rows: [{ label: rightLabel, value: String(rightLine(d, i)), color: rightStroke }]
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Chart, { width, height, margin: chartMargin, children: [
+    defs,
+    /* @__PURE__ */ jsxRuntime.jsx(Grid, { xTicks, yTicks }),
+    /* @__PURE__ */ jsxRuntime.jsx(AxisLeft, { ticks: leftTicks }),
+    /* @__PURE__ */ jsxRuntime.jsx(AxisRight, { ticks: rightTicks, x: innerW }),
+    /* @__PURE__ */ jsxRuntime.jsx(AxisBottom, { ticks: bottomTicks }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      LineSeries,
+      {
+        data,
+        x: (_, i) => i,
+        y: leftLine,
+        xScale: lineXScale,
+        yScale: leftYScale,
+        stroke: leftStroke,
+        showMarkers,
+        tooltip: defaultLeftTooltip
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      LineSeries,
+      {
+        data,
+        x: (_, i) => i,
+        y: rightLine,
+        xScale: lineXScale,
+        yScale: rightYScale,
+        stroke: rightStroke,
+        showMarkers,
+        tooltip: defaultRightTooltip
+      }
+    )
+  ] });
+}
+var HOVER_LEAVE_DELAY8 = 150;
+function ScatterSeries({
+  data,
+  x,
+  y,
+  xScale,
+  yScale,
+  fill = "var(--msc-s1)",
+  stroke = "var(--msc-panel)",
+  strokeWidth = 2,
+  radius = 5,
+  animate = true,
+  duration = 400,
+  hoverDimOpacity = 0.5,
+  tooltip
+}) {
+  const [hoveredIndex, setHoveredIndex] = react.useState(null);
+  const leaveTimeoutRef = react.useRef(null);
+  const { innerWidth, innerHeight, svgRef, margin, registerClearTooltip, clearAllTooltips } = useChart();
+  const clearTooltip = () => {
+    if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+    leaveTimeoutRef.current = null;
+    setHoveredIndex(null);
+  };
+  react.useEffect(() => {
+    return registerClearTooltip(clearTooltip);
+  }, [registerClearTooltip]);
+  const handleEnter = (i) => {
+    if (leaveTimeoutRef.current) {
+      clearTimeout(leaveTimeoutRef.current);
+      leaveTimeoutRef.current = null;
+    }
+    clearAllTooltips();
+    setHoveredIndex(i);
+  };
+  const handleLeave = () => {
+    leaveTimeoutRef.current = setTimeout(clearTooltip, HOVER_LEAVE_DELAY8);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { children: data.map((d, i) => {
+    const xx = xScale(x(d, i));
+    const yy = yScale(y(d, i));
+    if (!Number.isFinite(xx) || !Number.isFinite(yy)) return null;
+    const isHovered = hoveredIndex === i;
+    const opacity = hoveredIndex === null ? 0.92 : isHovered ? 1 : hoverDimOpacity;
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx: xx,
+          cy: yy,
+          r: radius,
+          fill,
+          stroke,
+          strokeWidth,
+          opacity,
+          style: {
+            transition: "opacity 0.2s ease",
+            cursor: tooltip ? "pointer" : void 0,
+            ...animate ? { animation: `msc-marker-pop ${duration}ms ease-out ${i * 50}ms both` } : {}
+          },
+          onMouseEnter: () => handleEnter(i),
+          onMouseLeave: handleLeave
+        }
+      ),
+      tooltip && isHovered && /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipPortal,
+        {
+          anchorX: xx,
+          anchorY: yy,
+          containerWidth: innerWidth,
+          containerHeight: innerHeight,
+          svgRef,
+          margin,
+          children: /* @__PURE__ */ jsxRuntime.jsx(DefaultTooltip, { ...tooltip(d, i) })
+        }
+      )
+    ] }, i);
+  }) });
+}
+var HOVER_LEAVE_DELAY9 = 150;
+var MIN_RADIUS = 4;
+var MAX_RADIUS = 24;
+function BubbleSeries({
+  data,
+  x,
+  y,
+  size,
+  xScale,
+  yScale,
+  fill = "var(--msc-s1)",
+  stroke = "var(--msc-panel)",
+  strokeWidth = 2,
+  fillOpacity = 0.7,
+  animate = true,
+  duration = 400,
+  hoverDimOpacity = 0.5,
+  tooltip
+}) {
+  const [hoveredIndex, setHoveredIndex] = react.useState(null);
+  const leaveTimeoutRef = react.useRef(null);
+  const { innerWidth, innerHeight, svgRef, margin, registerClearTooltip, clearAllTooltips } = useChart();
+  const sizeScale = react.useMemo(() => {
+    const sizes = data.map((d, i) => size(d, i));
+    const min = Math.min(...sizes);
+    const max = Math.max(...sizes);
+    return (v) => {
+      if (max === min) return (MIN_RADIUS + MAX_RADIUS) / 2;
+      const t = (v - min) / (max - min);
+      return MIN_RADIUS + t * (MAX_RADIUS - MIN_RADIUS);
+    };
+  }, [data, size]);
+  const clearTooltip = () => {
+    if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+    leaveTimeoutRef.current = null;
+    setHoveredIndex(null);
+  };
+  react.useEffect(() => {
+    return registerClearTooltip(clearTooltip);
+  }, [registerClearTooltip]);
+  const handleEnter = (i) => {
+    if (leaveTimeoutRef.current) {
+      clearTimeout(leaveTimeoutRef.current);
+      leaveTimeoutRef.current = null;
+    }
+    clearAllTooltips();
+    setHoveredIndex(i);
+  };
+  const handleLeave = () => {
+    leaveTimeoutRef.current = setTimeout(clearTooltip, HOVER_LEAVE_DELAY9);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { children: data.map((d, i) => {
+    const xx = xScale(x(d, i));
+    const yy = yScale(y(d, i));
+    if (!Number.isFinite(xx) || !Number.isFinite(yy)) return null;
+    const r = sizeScale(size(d, i));
+    const isHovered = hoveredIndex === i;
+    const opacity = hoveredIndex === null ? fillOpacity : isHovered ? fillOpacity : hoverDimOpacity;
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx: xx,
+          cy: yy,
+          r,
+          fill,
+          stroke,
+          strokeWidth,
+          fillOpacity: opacity,
+          style: {
+            transition: "opacity 0.2s ease",
+            cursor: tooltip ? "pointer" : void 0,
+            ...animate ? { animation: `msc-marker-pop ${duration}ms ease-out ${i * 50}ms both` } : {}
+          },
+          onMouseEnter: () => handleEnter(i),
+          onMouseLeave: handleLeave
+        }
+      ),
+      tooltip && isHovered && /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipPortal,
+        {
+          anchorX: xx,
+          anchorY: yy,
+          containerWidth: innerWidth,
+          containerHeight: innerHeight,
+          svgRef,
+          margin,
+          children: /* @__PURE__ */ jsxRuntime.jsx(DefaultTooltip, { ...tooltip(d, i) })
+        }
+      )
+    ] }, i);
+  }) });
+}
+function interpolateColor(t, stops) {
+  if (stops.length === 0) return "var(--msc-grid)";
+  const first = stops[0];
+  if (stops.length === 1 || !first) return first?.color ?? "var(--msc-grid)";
+  t = Math.max(0, Math.min(1, t));
+  for (let i = 0; i < stops.length - 1; i++) {
+    const a = stops[i];
+    const b = stops[i + 1];
+    if (a && b && t >= a.offset && t <= b.offset) {
+      const local = (t - a.offset) / (b.offset - a.offset || 1);
+      return lerpColor(a.color, b.color, local);
+    }
+  }
+  const last = stops[stops.length - 1];
+  return last?.color ?? "var(--msc-grid)";
+}
+function lerpColor(a, b, t) {
+  const parse = (hex) => {
+    const m = hex.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
+    return m ? [parseInt(m[1] ?? "0", 16), parseInt(m[2] ?? "0", 16), parseInt(m[3] ?? "0", 16)] : [0, 0, 0];
+  };
+  const [r1, g1, b1] = parse(a);
+  const [r2, g2, b2] = parse(b);
+  const r = Math.round(r1 + (r2 - r1) * t);
+  const g = Math.round(g1 + (g2 - g1) * t);
+  const bl = Math.round(b1 + (b2 - b1) * t);
+  return `rgb(${r},${g},${bl})`;
+}
+function HeatmapSeries({
+  rows,
+  columns,
+  data,
+  colorScale = ["#93c5fd", "#3b82f6", "#8b5cf6", "#7c3aed"],
+  gradientStops,
+  animate = true,
+  duration = 300,
+  hoverDimOpacity = 0.7,
+  tooltip
+}) {
+  const [hovered, setHovered] = react.useState(null);
+  const leaveTimeoutRef = react.useRef(null);
+  const { innerWidth, innerHeight, svgRef, margin, registerClearTooltip, clearAllTooltips } = useChart();
+  const clearTooltip = () => {
+    if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+    leaveTimeoutRef.current = null;
+    setHovered(null);
+  };
+  react.useEffect(() => {
+    return registerClearTooltip(clearTooltip);
+  }, [registerClearTooltip]);
+  const handleEnter = (r, c) => {
+    if (leaveTimeoutRef.current) {
+      clearTimeout(leaveTimeoutRef.current);
+      leaveTimeoutRef.current = null;
+    }
+    clearAllTooltips();
+    setHovered({ r, c });
+  };
+  const handleLeave = () => {
+    leaveTimeoutRef.current = setTimeout(clearTooltip, 150);
+  };
+  const { cellWidth, cellHeight, minVal, maxVal } = react.useMemo(() => {
+    const cellW = innerWidth / Math.max(columns.length, 1);
+    const cellH = innerHeight / Math.max(rows.length, 1);
+    let min = Infinity;
+    let max = -Infinity;
+    data.forEach(
+      (row) => row.forEach((cell) => {
+        if (cell.value < min) min = cell.value;
+        if (cell.value > max) max = cell.value;
+      })
+    );
+    if (min === Infinity) min = 0;
+    if (max === -Infinity) max = 1;
+    return { cellWidth: cellW, cellHeight: cellH, minVal: min, maxVal: max };
+  }, [innerWidth, innerHeight, columns.length, rows.length, data]);
+  const getColor = (value) => {
+    const t = maxVal === minVal ? 0 : (value - minVal) / (maxVal - minVal);
+    if (gradientStops && gradientStops.length > 0) {
+      return interpolateColor(t, gradientStops);
+    }
+    if (colorScale.length === 0) return "var(--msc-grid)";
+    const idx = Math.min(
+      Math.floor(t * (colorScale.length - 1)),
+      colorScale.length - 1
+    );
+    return colorScale[idx];
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    rows.map((rowLabel, r) => /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: -8,
+        y: r * cellHeight + cellHeight / 2,
+        textAnchor: "end",
+        fontSize: 10,
+        fill: "var(--msc-muted)",
+        dy: "0.32em",
+        children: rowLabel
+      },
+      `row-${r}`
+    )),
+    columns.map((colLabel, c) => /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: c * cellWidth + cellWidth / 2,
+        y: innerHeight + 16,
+        textAnchor: "middle",
+        fontSize: 10,
+        fill: "var(--msc-muted)",
+        children: colLabel
+      },
+      `col-${c}`
+    )),
+    rows.map(
+      (rowLabel, r) => columns.map((colLabel, c) => {
+        const cell = data[r]?.[c] ?? { value: 0 };
+        const x = c * cellWidth;
+        const y = r * cellHeight;
+        const isHovered = hovered?.r === r && hovered?.c === c;
+        const opacity = hovered === null ? 1 : isHovered ? 1 : hoverDimOpacity;
+        return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              x: x + 1,
+              y: y + 1,
+              width: cellWidth - 2,
+              height: cellHeight - 2,
+              fill: getColor(cell.value),
+              opacity,
+              rx: 2,
+              style: {
+                ...animate ? { animation: `msc-area-reveal ${duration}ms ease-out ${(r * columns.length + c) * 20}ms both` } : {},
+                transition: "opacity 0.2s ease",
+                cursor: tooltip ? "pointer" : void 0
+              },
+              onMouseEnter: () => handleEnter(r, c),
+              onMouseLeave: handleLeave
+            }
+          ),
+          tooltip && isHovered && /* @__PURE__ */ jsxRuntime.jsx(
+            TooltipPortal,
+            {
+              anchorX: x + cellWidth / 2,
+              anchorY: y + cellHeight / 2,
+              containerWidth: innerWidth,
+              containerHeight: innerHeight,
+              svgRef,
+              margin,
+              children: /* @__PURE__ */ jsxRuntime.jsx(DefaultTooltip, { ...tooltip(rowLabel, colLabel, cell) })
+            }
+          )
+        ] }, `${r}-${c}`);
+      })
+    )
+  ] });
+}
+function useNearestPoint(data, xAccessor, xScale, yAccessor, yScale) {
+  d3Array.bisector((d) => xAccessor(d, 0)).center;
+  return function findNearest(pointerX) {
+    if (!data.length) return null;
+    const lastDatum = data[data.length - 1];
+    if (lastDatum === void 0) return null;
+    const approxIndex = Math.round(pointerX / Math.max(xScale(xAccessor(lastDatum, data.length - 1)), 1) * (data.length - 1));
+    const seed = Math.max(0, Math.min(data.length - 1, approxIndex));
+    const idx = Math.max(0, Math.min(data.length - 1, seed));
+    const d = data[idx];
+    if (d === void 0) return null;
+    const x = xScale(xAccessor(d, idx));
+    const y = yScale(yAccessor(d, idx));
+    const distance = Math.abs(pointerX - x);
+    return { index: idx, datum: d, x, y, distance };
+  };
+}
+
+exports.AreaSeries = AreaSeries;
+exports.AxisBottom = AxisBottom;
+exports.AxisLeft = AxisLeft;
+exports.AxisRight = AxisRight;
+exports.BarSeries = BarSeries;
+exports.BubbleSeries = BubbleSeries;
+exports.Chart = Chart;
+exports.ChartTitle = ChartTitle;
+exports.ComboChart = ComboChart;
+exports.DefaultTooltip = DefaultTooltip;
+exports.Grid = Grid;
+exports.GroupedBarSeries = GroupedBarSeries;
+exports.HeatmapSeries = HeatmapSeries;
+exports.HorizontalBarSeries = HorizontalBarSeries;
+exports.Legend = Legend;
+exports.LineSeries = LineSeries;
+exports.LinearGradient = LinearGradient;
+exports.MultiaxisLineChart = MultiaxisLineChart;
+exports.PieChart = PieChart;
+exports.PieSeries = PieSeries;
+exports.PolarAreaChart = PolarAreaChart;
+exports.PolarAreaSeries = PolarAreaSeries;
+exports.RadarChart = RadarChart;
+exports.RadialGradient = RadialGradient;
+exports.ScatterSeries = ScatterSeries;
+exports.StackedBarSeries = StackedBarSeries;
+exports.ThemeProvider = ThemeProvider;
+exports.ThresholdLine = ThresholdLine;
+exports.TooltipPortal = TooltipPortal;
+exports.computeTooltipPosition = computeTooltipPosition;
+exports.useChart = useChart;
+exports.useNearestPoint = useNearestPoint;
+exports.useTheme = useTheme;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map