@salesmind-ai/design-system 0.3.0 → 0.3.2

package/dist/chunk-GUZIMHWS.js

@@ -0,0 +1,1608 @@
+import { useReportMode, useChartData, DataCoverageBadge, DataStateIndicator, CHART_REGISTRY, getDefaultChartForIntent, getAllowedSwitchTargets, validateChartData, ConfidenceIndicator } from './chunk-B6AVAX4F.js';
+import { Tooltip as Tooltip$1 } from './chunk-C2BCDNAV.js';
+import clsx7 from 'clsx';
+import { LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Line, BarChart as BarChart$1, Bar, Cell, PieChart as PieChart$1, Pie, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, ResponsiveContainer, AreaChart, Area } from 'recharts';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useMemo, useState } from 'react';
+
+function ChartContainer({
+  title,
+  subtitle,
+  height = 300,
+  data = [],
+  requiredFields = [],
+  minSampleSize = 30,
+  showCoverage = true,
+  dateRange,
+  loading,
+  emptyMessage = "No data available",
+  children,
+  className,
+  ...props
+}) {
+  const { features } = useReportMode();
+  const { state, isRenderable, message } = useChartData({
+    data,
+    requiredFields,
+    minSampleSize
+  });
+  const renderContent = () => {
+    if (loading) {
+      return /* @__PURE__ */ jsxs("div", { className: "ds-chart-container__loading", children: [
+        /* @__PURE__ */ jsx("div", { className: "ds-chart-container__spinner" }),
+        /* @__PURE__ */ jsx("span", { children: "Loading chart..." })
+      ] });
+    }
+    if (!isRenderable && state !== "VALID") {
+      return /* @__PURE__ */ jsxs("div", { className: "ds-chart-container__empty", children: [
+        /* @__PURE__ */ jsx(
+          DataStateIndicator,
+          {
+            state,
+            variant: "full",
+            details: { message, sampleSize: data.length, requiredSize: minSampleSize }
+          }
+        ),
+        state === "INSUFFICIENT_SAMPLE" && data.length === 0 && /* @__PURE__ */ jsx("p", { className: "ds-chart-container__empty-message", children: emptyMessage })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx7(
+        "ds-chart-container",
+        loading && "ds-chart-container--loading",
+        !isRenderable && "ds-chart-container--invalid",
+        className
+      ),
+      ...props,
+      children: [
+        (title || subtitle || showCoverage && features.showMethodology) && /* @__PURE__ */ jsxs("header", { className: "ds-chart-container__header", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ds-chart-container__header-content", children: [
+            title && /* @__PURE__ */ jsx("h4", { className: "ds-chart-container__title", children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { className: "ds-chart-container__subtitle", children: subtitle })
+          ] }),
+          showCoverage && features.showMethodology && data.length > 0 && /* @__PURE__ */ jsx(
+            DataCoverageBadge,
+            {
+              sampleSize: data.length,
+              requiredSize: minSampleSize,
+              dateRange,
+              size: "sm"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ds-chart-container__chart",
+            style: { height: typeof height === "number" ? height : void 0 },
+            children: renderContent()
+          }
+        ),
+        isRenderable && state !== "VALID" && /* @__PURE__ */ jsx("footer", { className: "ds-chart-container__footer", children: /* @__PURE__ */ jsx(DataStateIndicator, { state, variant: "compact" }) })
+      ]
+    }
+  );
+}
+ChartContainer.displayName = "ChartContainer";
+var DEFAULT_COLORS = [
+  "var(--brand-pink)",
+  "var(--brand-yellow)",
+  "var(--status-info)",
+  "var(--status-success)",
+  "var(--status-warning)"
+];
+function LineChart({
+  data,
+  xKey,
+  lines,
+  title,
+  subtitle,
+  height = 300,
+  grid = true,
+  legend: showLegend = true,
+  curve = "monotone",
+  minSampleSize = 7,
+  dateRange,
+  className
+}) {
+  const requiredFields = [xKey, ...lines.map((l) => l.key)];
+  const chartData = React.useMemo(() => data.map((item) => ({ ...item })), [data]);
+  return /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      title,
+      subtitle,
+      height,
+      data,
+      requiredFields,
+      minSampleSize,
+      dateRange,
+      className,
+      children: /* @__PURE__ */ jsxs(LineChart$1, { data: chartData, margin: { top: 5, right: 20, left: 0, bottom: 5 }, children: [
+        grid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: xKey,
+            tick: { fontSize: 12 },
+            tickLine: false,
+            axisLine: { strokeWidth: 1 }
+          }
+        ),
+        /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 12 }, tickLine: false, axisLine: false, width: 40 }),
+        /* @__PURE__ */ jsx(Tooltip, {}),
+        showLegend && /* @__PURE__ */ jsx(Legend, {}),
+        lines.map((line, index) => /* @__PURE__ */ jsx(
+          Line,
+          {
+            type: curve,
+            dataKey: line.key,
+            name: line.name || line.key,
+            stroke: line.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length],
+            strokeWidth: 2,
+            strokeDasharray: line.dashed ? "5 5" : void 0,
+            dot: line.dot !== false,
+            activeDot: { r: 6 }
+          },
+          line.key
+        ))
+      ] })
+    }
+  );
+}
+LineChart.displayName = "LineChart";
+var DEFAULT_COLORS2 = [
+  "var(--brand-pink)",
+  "var(--brand-yellow)",
+  "var(--status-info)",
+  "var(--status-success)",
+  "var(--status-warning)"
+];
+function BarChart({
+  data,
+  xKey,
+  bars,
+  title,
+  subtitle,
+  height = 300,
+  layout = "horizontal",
+  grid = true,
+  legend: showLegend = true,
+  radius = 4,
+  showLabels = false,
+  minSampleSize = 5,
+  categoryColors,
+  className
+}) {
+  const requiredFields = [xKey, ...bars.map((b) => b.key)];
+  const isVertical = layout === "vertical";
+  const chartData = useMemo(() => data.map((item) => ({ ...item })), [data]);
+  return /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      title,
+      subtitle,
+      height,
+      data: chartData,
+      requiredFields,
+      minSampleSize,
+      className,
+      children: /* @__PURE__ */ jsxs(
+        BarChart$1,
+        {
+          data: chartData,
+          layout: isVertical ? "vertical" : "horizontal",
+          margin: { top: 5, right: 20, left: isVertical ? 80 : 0, bottom: 5 },
+          children: [
+            grid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", horizontal: !isVertical, vertical: isVertical }),
+            isVertical ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(XAxis, { type: "number", tick: { fontSize: 12 }, tickLine: false, axisLine: false }),
+              /* @__PURE__ */ jsx(
+                YAxis,
+                {
+                  type: "category",
+                  dataKey: xKey,
+                  tick: { fontSize: 12 },
+                  tickLine: false,
+                  axisLine: false,
+                  width: 80
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                XAxis,
+                {
+                  dataKey: xKey,
+                  tick: { fontSize: 12 },
+                  tickLine: false,
+                  axisLine: { strokeWidth: 1 }
+                }
+              ),
+              /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 12 }, tickLine: false, axisLine: false, width: 40 })
+            ] }),
+            /* @__PURE__ */ jsx(Tooltip, {}),
+            showLegend && bars.length > 1 && /* @__PURE__ */ jsx(Legend, {}),
+            bars.map((bar, barIndex) => /* @__PURE__ */ jsx(
+              Bar,
+              {
+                dataKey: bar.key,
+                name: bar.name || bar.key,
+                fill: bar.color || DEFAULT_COLORS2[barIndex % DEFAULT_COLORS2.length],
+                stackId: bar.stackId,
+                radius: [radius, radius, 0, 0],
+                label: showLabels ? { position: "top", fontSize: 10 } : false,
+                children: categoryColors && chartData.map((_, index) => /* @__PURE__ */ jsx(Cell, { fill: categoryColors[index % categoryColors.length] }, `cell-${index}`))
+              },
+              bar.key
+            ))
+          ]
+        }
+      )
+    }
+  );
+}
+BarChart.displayName = "BarChart";
+var DEFAULT_COLORS3 = [
+  "var(--brand-pink)",
+  "var(--brand-yellow)",
+  "var(--status-info)",
+  "var(--status-success)",
+  "var(--status-warning)",
+  "var(--status-error)",
+  "#8884d8",
+  "#82ca9d"
+];
+function PieChart({
+  data,
+  title,
+  subtitle,
+  height = 300,
+  innerRadius = 0,
+  outerRadius = 80,
+  showLabels = true,
+  labelType = "percent",
+  legend: showLegend = true,
+  minSampleSize = 30,
+  className
+}) {
+  const safeData = useMemo(() => data.map((item) => ({ ...item })), [data]);
+  const renderLabel = (props) => {
+    const { name, value, percent } = props;
+    switch (labelType) {
+      case "percent":
+        return `${((percent ?? 0) * 100).toFixed(0)}%`;
+      case "value":
+        return (value ?? 0).toLocaleString();
+      case "name":
+        return name ?? "";
+      default:
+        return "";
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      title,
+      subtitle,
+      height,
+      data: safeData,
+      requiredFields: ["name", "value"],
+      minSampleSize,
+      className,
+      children: /* @__PURE__ */ jsxs(PieChart$1, { children: [
+        /* @__PURE__ */ jsx(
+          Pie,
+          {
+            data: safeData,
+            cx: "50%",
+            cy: "50%",
+            innerRadius,
+            outerRadius,
+            paddingAngle: 2,
+            dataKey: "value",
+            label: showLabels ? renderLabel : void 0,
+            labelLine: showLabels,
+            children: safeData.map((entry, index) => /* @__PURE__ */ jsx(
+              Cell,
+              {
+                fill: entry.color || DEFAULT_COLORS3[index % DEFAULT_COLORS3.length]
+              },
+              `cell-${index}`
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(Tooltip, {}),
+        showLegend && /* @__PURE__ */ jsx(Legend, {})
+      ] })
+    }
+  );
+}
+PieChart.displayName = "PieChart";
+var DEFAULT_COLORS4 = [
+  "var(--brand-pink)",
+  "var(--brand-yellow)",
+  "var(--status-info)",
+  "var(--status-success)",
+  "var(--status-warning)"
+];
+function FunnelChart({
+  stages,
+  title,
+  subtitle,
+  showConversionRates = true,
+  showDropOff = true,
+  showValues = true,
+  height = 300,
+  className
+}) {
+  const { features } = useReportMode();
+  const isValid = stages.length >= 3;
+  const maxValue = stages.length > 0 ? Math.max(...stages.map((s) => s.value)) : 0;
+  const stagesWithMetrics = useMemo(() => {
+    return stages.map((stage, index) => {
+      const prevStage = index > 0 ? stages[index - 1] : null;
+      const conversionRate = prevStage ? stage.value / prevStage.value * 100 : 100;
+      const dropOff = prevStage ? (prevStage.value - stage.value) / prevStage.value * 100 : 0;
+      const widthPercent = maxValue > 0 ? stage.value / maxValue * 100 : 0;
+      return {
+        ...stage,
+        conversionRate,
+        dropOff,
+        widthPercent,
+        color: stage.color || DEFAULT_COLORS4[index % DEFAULT_COLORS4.length]
+      };
+    });
+  }, [stages, maxValue]);
+  if (!isValid) {
+    return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-funnel-chart", "ds-funnel-chart--invalid", className), children: [
+      title && /* @__PURE__ */ jsx("h4", { className: "ds-funnel-chart__title", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "ds-funnel-chart__empty", children: /* @__PURE__ */ jsx(
+        DataStateIndicator,
+        {
+          state: "INSUFFICIENT_SAMPLE",
+          variant: "full",
+          details: {
+            message: "Funnel requires at least 3 stages",
+            sampleSize: stages.length,
+            requiredSize: 3
+          }
+        }
+      ) })
+    ] });
+  }
+  const totalConversion = stages.length > 1 ? (stages[stages.length - 1].value / stages[0].value * 100).toFixed(1) : "100";
+  return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-funnel-chart", className), style: { minHeight: height }, children: [
+    (title || subtitle) && /* @__PURE__ */ jsxs("header", { className: "ds-funnel-chart__header", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        title && /* @__PURE__ */ jsx("h4", { className: "ds-funnel-chart__title", children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "ds-funnel-chart__subtitle", children: subtitle })
+      ] }),
+      features.showMethodology && /* @__PURE__ */ jsx(DataCoverageBadge, { sampleSize: stages[0].value, size: "sm" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ds-funnel-chart__stages", children: stagesWithMetrics.map((stage, index) => /* @__PURE__ */ jsxs("div", { className: "ds-funnel-chart__stage", children: [
+      /* @__PURE__ */ jsx("div", { className: "ds-funnel-chart__bar-container", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ds-funnel-chart__bar",
+          style: {
+            width: `${stage.widthPercent}%`,
+            backgroundColor: stage.color
+          },
+          children: showValues && /* @__PURE__ */ jsx("span", { className: "ds-funnel-chart__value", children: stage.value.toLocaleString() })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-funnel-chart__label", children: [
+        /* @__PURE__ */ jsx("span", { className: "ds-funnel-chart__stage-name", children: stage.name }),
+        showConversionRates && index > 0 && /* @__PURE__ */ jsxs("span", { className: "ds-funnel-chart__conversion", children: [
+          stage.conversionRate.toFixed(1),
+          "% converted"
+        ] })
+      ] }),
+      showDropOff && index > 0 && stage.dropOff > 0 && /* @__PURE__ */ jsxs("div", { className: "ds-funnel-chart__dropoff", children: [
+        /* @__PURE__ */ jsx("span", { className: "ds-funnel-chart__dropoff-arrow", children: "\u2193" }),
+        /* @__PURE__ */ jsxs("span", { className: "ds-funnel-chart__dropoff-value", children: [
+          "-",
+          stage.dropOff.toFixed(1),
+          "%"
+        ] })
+      ] })
+    ] }, stage.name)) }),
+    /* @__PURE__ */ jsx("footer", { className: "ds-funnel-chart__footer", children: /* @__PURE__ */ jsxs("span", { className: "ds-funnel-chart__total", children: [
+      "Overall Conversion: ",
+      /* @__PURE__ */ jsxs("strong", { children: [
+        totalConversion,
+        "%"
+      ] })
+    ] }) })
+  ] });
+}
+FunnelChart.displayName = "FunnelChart";
+function HeatmapChart({
+  data,
+  title,
+  subtitle,
+  xLabel,
+  yLabel,
+  colorScale = ["var(--glass-elevated)", "var(--brand-pink)"],
+  showValues = true,
+  valueFormatter = (v) => v.toFixed(0),
+  minCells = 25,
+  className
+}) {
+  const { features } = useReportMode();
+  const { xValues, yValues, cellMap, minValue, maxValue } = useMemo(() => {
+    const xSet = /* @__PURE__ */ new Set();
+    const ySet = /* @__PURE__ */ new Set();
+    const map = /* @__PURE__ */ new Map();
+    let min = Infinity;
+    let max = -Infinity;
+    for (const cell of data) {
+      xSet.add(cell.x);
+      ySet.add(cell.y);
+      map.set(`${cell.x}-${cell.y}`, cell.value);
+      min = Math.min(min, cell.value);
+      max = Math.max(max, cell.value);
+    }
+    return {
+      xValues: Array.from(xSet),
+      yValues: Array.from(ySet),
+      cellMap: map,
+      minValue: min === Infinity ? 0 : min,
+      maxValue: max === -Infinity ? 0 : max
+    };
+  }, [data]);
+  const isValid = data.length >= minCells;
+  const getCellColor = (value) => {
+    if (maxValue === minValue) return colorScale[0];
+    const ratio = (value - minValue) / (maxValue - minValue);
+    return `color-mix(in srgb, ${colorScale[1]} ${ratio * 100}%, ${colorScale[0]})`;
+  };
+  const getTextColor = (value) => {
+    const ratio = (value - minValue) / (maxValue - minValue);
+    return ratio > 0.5 ? "white" : "var(--text-primary)";
+  };
+  if (!isValid) {
+    return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-heatmap-chart", "ds-heatmap-chart--invalid", className), children: [
+      title && /* @__PURE__ */ jsx("h4", { className: "ds-heatmap-chart__title", children: title }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-heatmap-chart__empty", children: [
+        /* @__PURE__ */ jsx("p", { children: "Insufficient data for heatmap visualization" }),
+        /* @__PURE__ */ jsxs("p", { className: "ds-heatmap-chart__empty-detail", children: [
+          data.length,
+          " cells provided, ",
+          minCells,
+          " required"
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-heatmap-chart", className), children: [
+    (title || subtitle) && /* @__PURE__ */ jsxs("header", { className: "ds-heatmap-chart__header", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        title && /* @__PURE__ */ jsx("h4", { className: "ds-heatmap-chart__title", children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "ds-heatmap-chart__subtitle", children: subtitle })
+      ] }),
+      features.showMethodology && /* @__PURE__ */ jsx(DataCoverageBadge, { sampleSize: data.length, requiredSize: minCells, size: "sm" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-heatmap-chart__container", children: [
+      yLabel && /* @__PURE__ */ jsx("div", { className: "ds-heatmap-chart__y-label", children: /* @__PURE__ */ jsx("span", { children: yLabel }) }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-heatmap-chart__grid-wrapper", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ds-heatmap-chart__grid",
+            style: {
+              gridTemplateColumns: `repeat(${xValues.length}, 1fr)`,
+              gridTemplateRows: `repeat(${yValues.length}, 1fr)`
+            },
+            children: yValues.map(
+              (y) => xValues.map((x) => {
+                const value = cellMap.get(`${x}-${y}`) ?? 0;
+                const cellContent = /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "ds-heatmap-chart__cell",
+                    style: {
+                      backgroundColor: getCellColor(value),
+                      color: getTextColor(value)
+                    },
+                    children: showValues && /* @__PURE__ */ jsx("span", { className: "ds-heatmap-chart__cell-value", children: valueFormatter(value) })
+                  },
+                  `${x}-${y}`
+                );
+                return /* @__PURE__ */ jsx(Tooltip$1, { content: `${x}, ${y}: ${valueFormatter(value)}`, children: cellContent }, `${x}-${y}`);
+              })
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ds-heatmap-chart__x-labels",
+            style: { gridTemplateColumns: `repeat(${xValues.length}, 1fr)` },
+            children: xValues.map((x) => /* @__PURE__ */ jsx("span", { className: "ds-heatmap-chart__x-label", children: x }, x))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ds-heatmap-chart__y-labels",
+          style: { gridTemplateRows: `repeat(${yValues.length}, 1fr)` },
+          children: yValues.map((y) => /* @__PURE__ */ jsx("span", { className: "ds-heatmap-chart__y-label-item", children: y }, y))
+        }
+      )
+    ] }),
+    xLabel && /* @__PURE__ */ jsx("div", { className: "ds-heatmap-chart__x-axis-label", children: /* @__PURE__ */ jsx("span", { children: xLabel }) }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-heatmap-chart__legend", children: [
+      /* @__PURE__ */ jsx("span", { className: "ds-heatmap-chart__legend-label", children: "Low" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ds-heatmap-chart__legend-bar",
+          style: {
+            background: `linear-gradient(to right, ${colorScale[0]}, ${colorScale[1]})`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "ds-heatmap-chart__legend-label", children: "High" })
+    ] })
+  ] });
+}
+HeatmapChart.displayName = "HeatmapChart";
+function ChartSwitchControl({
+  currentType,
+  allowedTypes,
+  onTypeChange,
+  size = "sm",
+  className
+}) {
+  if (allowedTypes.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: clsx7("ds-chart-switch", `ds-chart-switch--${size}`, className), children: allowedTypes.map((type) => {
+    const meta = CHART_REGISTRY[type];
+    if (!meta) return null;
+    const isActive = type === currentType;
+    const Icon = getChartIcon(type);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: clsx7(
+          "ds-chart-switch__option",
+          isActive && "ds-chart-switch__option--active"
+        ),
+        onClick: () => onTypeChange(type),
+        title: meta.name,
+        "aria-pressed": isActive,
+        children: [
+          /* @__PURE__ */ jsx(Icon, {}),
+          /* @__PURE__ */ jsx("span", { className: "ds-chart-switch__label", children: getShortLabel(type) })
+        ]
+      },
+      type
+    );
+  }) });
+}
+ChartSwitchControl.displayName = "ChartSwitchControl";
+function getChartIcon(type) {
+  const icons = {
+    line: LineIcon,
+    smooth_line: SmoothLineIcon,
+    area: AreaIcon,
+    stacked_area: StackedAreaIcon,
+    area_100pct: StackedAreaIcon,
+    bar: BarIcon,
+    column: ColumnIcon,
+    stacked_bar: StackedBarIcon,
+    stacked_column: StackedColumnIcon,
+    column_100pct: StackedColumnIcon,
+    pie: PieIcon,
+    donut: DonutIcon,
+    histogram: HistogramIcon,
+    funnel: FunnelIcon,
+    heatmap: HeatmapIcon
+  };
+  return icons[type] || DefaultChartIcon;
+}
+function getShortLabel(type) {
+  const labels = {
+    line: "Line",
+    smooth_line: "Smooth",
+    area: "Area",
+    stacked_area: "Stacked",
+    area_100pct: "100%",
+    bar: "Bar",
+    column: "Column",
+    stacked_bar: "Stacked",
+    stacked_column: "Stacked",
+    column_100pct: "100%",
+    pie: "Pie",
+    donut: "Donut",
+    histogram: "Histogram",
+    funnel: "Funnel",
+    heatmap: "Heatmap"
+  };
+  return labels[type] || type;
+}
+function LineIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: /* @__PURE__ */ jsx("polyline", { points: "22 12 18 8 13 13 9 9 2 16" })
+    }
+  );
+}
+function SmoothLineIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: /* @__PURE__ */ jsx("path", { d: "M2 16 C6 16, 8 8, 12 12 S18 6, 22 10" })
+    }
+  );
+}
+function AreaIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M2 20 L2 16 L8 10 L14 14 L22 6 L22 20 Z", fill: "currentColor", fillOpacity: "0.2" }),
+        /* @__PURE__ */ jsx("polyline", { points: "2 16 8 10 14 14 22 6" })
+      ]
+    }
+  );
+}
+function StackedAreaIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M2 20 L2 14 L8 10 L14 12 L22 8 L22 20 Z", fill: "currentColor", fillOpacity: "0.3" }),
+        /* @__PURE__ */ jsx("path", { d: "M2 20 L2 16 L8 14 L14 15 L22 12 L22 20 Z", fill: "currentColor", fillOpacity: "0.2" })
+      ]
+    }
+  );
+}
+function BarIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "14", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.2" }),
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "10", width: "18", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.2" }),
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "16", width: "10", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.2" })
+      ]
+    }
+  );
+}
+function ColumnIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "4", y: "8", width: "4", height: "14", rx: "1", fill: "currentColor", fillOpacity: "0.2" }),
+        /* @__PURE__ */ jsx("rect", { x: "10", y: "4", width: "4", height: "18", rx: "1", fill: "currentColor", fillOpacity: "0.2" }),
+        /* @__PURE__ */ jsx("rect", { x: "16", y: "12", width: "4", height: "10", rx: "1", fill: "currentColor", fillOpacity: "0.2" })
+      ]
+    }
+  );
+}
+function StackedBarIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "8", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
+        /* @__PURE__ */ jsx("rect", { x: "10", y: "4", width: "6", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.15" }),
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "10", width: "12", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
+        /* @__PURE__ */ jsx("rect", { x: "14", y: "10", width: "6", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.15" }),
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "16", width: "6", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
+        /* @__PURE__ */ jsx("rect", { x: "8", y: "16", width: "4", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.15" })
+      ]
+    }
+  );
+}
+function StackedColumnIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "4", y: "14", width: "4", height: "8", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
+        /* @__PURE__ */ jsx("rect", { x: "4", y: "8", width: "4", height: "6", rx: "1", fill: "currentColor", fillOpacity: "0.15" }),
+        /* @__PURE__ */ jsx("rect", { x: "10", y: "10", width: "4", height: "12", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
+        /* @__PURE__ */ jsx("rect", { x: "10", y: "4", width: "4", height: "6", rx: "1", fill: "currentColor", fillOpacity: "0.15" }),
+        /* @__PURE__ */ jsx("rect", { x: "16", y: "16", width: "4", height: "6", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
+        /* @__PURE__ */ jsx("rect", { x: "16", y: "12", width: "4", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.15" })
+      ]
+    }
+  );
+}
+function PieIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor", fillOpacity: "0.2" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 2 A10 10 0 0 1 22 12 L12 12 Z", fill: "currentColor", fillOpacity: "0.3" })
+      ]
+    }
+  );
+}
+function DonutIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor", fillOpacity: "0.2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5", fill: "var(--glass-elevated)", stroke: "none" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 2 A10 10 0 0 1 22 12 L17 12 A5 5 0 0 0 12 7 Z",
+            fill: "currentColor",
+            fillOpacity: "0.3"
+          }
+        )
+      ]
+    }
+  );
+}
+function HistogramIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "14", width: "4", height: "8", rx: "0", fill: "currentColor", fillOpacity: "0.2" }),
+        /* @__PURE__ */ jsx("rect", { x: "6", y: "10", width: "4", height: "12", rx: "0", fill: "currentColor", fillOpacity: "0.2" }),
+        /* @__PURE__ */ jsx("rect", { x: "10", y: "4", width: "4", height: "18", rx: "0", fill: "currentColor", fillOpacity: "0.2" }),
+        /* @__PURE__ */ jsx("rect", { x: "14", y: "8", width: "4", height: "14", rx: "0", fill: "currentColor", fillOpacity: "0.2" }),
+        /* @__PURE__ */ jsx("rect", { x: "18", y: "12", width: "4", height: "10", rx: "0", fill: "currentColor", fillOpacity: "0.2" })
+      ]
+    }
+  );
+}
+function FunnelIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M2 4 H22 L18 10 H6 Z", fill: "currentColor", fillOpacity: "0.3" }),
+        /* @__PURE__ */ jsx("path", { d: "M6 10 H18 L15 16 H9 Z", fill: "currentColor", fillOpacity: "0.25" }),
+        /* @__PURE__ */ jsx("path", { d: "M9 16 H15 L13 22 H11 Z", fill: "currentColor", fillOpacity: "0.2" })
+      ]
+    }
+  );
+}
+function HeatmapIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.1" }),
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "2", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.3" }),
+        /* @__PURE__ */ jsx("rect", { x: "16", y: "2", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.2" }),
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "9", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.4" }),
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.6" }),
+        /* @__PURE__ */ jsx("rect", { x: "16", y: "9", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.3" }),
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "16", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.2" }),
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "16", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.5" }),
+        /* @__PURE__ */ jsx("rect", { x: "16", y: "16", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.4" })
+      ]
+    }
+  );
+}
+function DefaultChartIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 15 L9 9 L13 13 L21 5" })
+      ]
+    }
+  );
+}
+var CHART_COLORS = [
+  "var(--brand-pink)",
+  "var(--brand-yellow)",
+  "var(--status-info)",
+  "var(--status-success)",
+  "var(--status-warning)",
+  "var(--status-error)"
+];
+function getColor(index, customColor) {
+  return customColor || CHART_COLORS[index % CHART_COLORS.length];
+}
+function Chart({
+  intent,
+  data,
+  dimensions,
+  measures,
+  defaultType,
+  allowedTypes,
+  chartType: controlledType,
+  onChartTypeChange,
+  allowSwitching = false,
+  title,
+  subtitle,
+  height = 300,
+  legend: showLegend = true,
+  grid = true,
+  className
+}) {
+  const { features } = useReportMode();
+  const resolvedDefault = defaultType || getDefaultChartForIntent(intent);
+  const [internalType, setInternalType] = useState(resolvedDefault);
+  const activeType = controlledType ?? internalType;
+  const resolvedAllowedTypes = useMemo(() => {
+    if (allowedTypes) return allowedTypes;
+    return getAllowedSwitchTargets(activeType);
+  }, [allowedTypes, activeType]);
+  const validation = useMemo(() => {
+    return validateChartData(
+      activeType,
+      data,
+      dimensions.map((d) => d.key),
+      measures.map((m) => m.key)
+    );
+  }, [activeType, data, dimensions, measures]);
+  const handleTypeChange = (newType) => {
+    if (onChartTypeChange) {
+      onChartTypeChange(newType);
+    } else {
+      setInternalType(newType);
+    }
+  };
+  const chartMeta = CHART_REGISTRY[activeType];
+  const renderChart = () => {
+    if (!validation.isValid) {
+      return /* @__PURE__ */ jsx("div", { className: "ds-chart__invalid", children: /* @__PURE__ */ jsx(
+        DataStateIndicator,
+        {
+          state: "INSUFFICIENT_SAMPLE",
+          variant: "full",
+          details: {
+            message: validation.errors[0],
+            sampleSize: data.length,
+            requiredSize: chartMeta?.contract.minDataPoints || 0
+          }
+        }
+      ) });
+    }
+    const xKey = dimensions[0]?.key || "x";
+    switch (activeType) {
+      case "line":
+      case "smooth_line":
+        return renderLineChart(xKey, activeType === "smooth_line");
+      case "area":
+      case "stacked_area":
+      case "area_100pct":
+        return renderAreaChart(xKey, activeType);
+      case "bar":
+      case "stacked_bar":
+        return renderBarChart(xKey, activeType, "horizontal");
+      case "column":
+      case "stacked_column":
+      case "column_100pct":
+        return renderBarChart(xKey, activeType, "vertical");
+      case "pie":
+      case "donut":
+        return renderPieChart(xKey, activeType === "donut");
+      case "histogram":
+        return renderHistogram();
+      default:
+        return /* @__PURE__ */ jsxs("div", { className: "ds-chart__unsupported", children: [
+          'Chart type "',
+          activeType,
+          '" is not yet implemented'
+        ] });
+    }
+  };
+  const renderLineChart = (xKey, smooth) => /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin: { top: 5, right: 20, left: 0, bottom: 5 }, children: [
+    grid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: xKey,
+        tick: { fontSize: 12 },
+        tickLine: false,
+        axisLine: { strokeWidth: 1 }
+      }
+    ),
+    /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 12 }, tickLine: false, axisLine: false, width: 40 }),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        contentStyle: {
+          background: "var(--glass-elevated)",
+          border: "1px solid var(--glass-border)"
+        }
+      }
+    ),
+    showLegend && measures.length > 1 && /* @__PURE__ */ jsx(Legend, {}),
+    measures.map((measure, idx) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        type: smooth ? "monotone" : "linear",
+        dataKey: measure.key,
+        name: measure.label || measure.key,
+        stroke: getColor(idx, measure.color),
+        strokeWidth: 2,
+        dot: true,
+        activeDot: { r: 6 }
+      },
+      measure.key
+    ))
+  ] }) });
+  const renderAreaChart = (xKey, type) => {
+    const isStacked = type === "stacked_area" || type === "area_100pct";
+    const is100Pct = type === "area_100pct";
+    const chartData = is100Pct ? normalizeData(data, measures) : data;
+    return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(AreaChart, { data: chartData, margin: { top: 5, right: 20, left: 0, bottom: 5 }, children: [
+      grid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: xKey,
+          tick: { fontSize: 12 },
+          tickLine: false,
+          axisLine: { strokeWidth: 1 }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          tick: { fontSize: 12 },
+          tickLine: false,
+          axisLine: false,
+          width: 40,
+          domain: is100Pct ? [0, 100] : void 0,
+          tickFormatter: is100Pct ? (v) => `${v}%` : void 0
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          contentStyle: {
+            background: "var(--glass-elevated)",
+            border: "1px solid var(--glass-border)"
+          }
+        }
+      ),
+      showLegend && /* @__PURE__ */ jsx(Legend, {}),
+      measures.map((measure, idx) => /* @__PURE__ */ jsx(
+        Area,
+        {
+          type: "monotone",
+          dataKey: measure.key,
+          name: measure.label || measure.key,
+          stroke: getColor(idx, measure.color),
+          fill: getColor(idx, measure.color),
+          fillOpacity: 0.3,
+          stackId: isStacked ? "stack" : void 0
+        },
+        measure.key
+      ))
+    ] }) });
+  };
+  const renderBarChart = (xKey, type, layout) => {
+    const isStacked = type.includes("stacked") || type.includes("100pct");
+    const is100Pct = type.includes("100pct");
+    const isHorizontal = layout === "horizontal";
+    const chartData = is100Pct ? normalizeData(data, measures) : data;
+    return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(
+      BarChart$1,
+      {
+        data: chartData,
+        layout: isHorizontal ? "vertical" : "horizontal",
+        margin: { top: 5, right: 20, left: isHorizontal ? 80 : 0, bottom: 5 },
+        children: [
+          grid && /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              strokeDasharray: "3 3",
+              horizontal: !isHorizontal,
+              vertical: isHorizontal
+            }
+          ),
+          isHorizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                type: "number",
+                tick: { fontSize: 12 },
+                tickLine: false,
+                axisLine: false,
+                domain: is100Pct ? [0, 100] : void 0,
+                tickFormatter: is100Pct ? (v) => `${v}%` : void 0
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                type: "category",
+                dataKey: xKey,
+                tick: { fontSize: 12 },
+                tickLine: false,
+                axisLine: false,
+                width: 80
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                dataKey: xKey,
+                tick: { fontSize: 12 },
+                tickLine: false,
+                axisLine: { strokeWidth: 1 }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                tick: { fontSize: 12 },
+                tickLine: false,
+                axisLine: false,
+                width: 40,
+                domain: is100Pct ? [0, 100] : void 0,
+                tickFormatter: is100Pct ? (v) => `${v}%` : void 0
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              contentStyle: {
+                background: "var(--glass-elevated)",
+                border: "1px solid var(--glass-border)"
+              }
+            }
+          ),
+          showLegend && measures.length > 1 && /* @__PURE__ */ jsx(Legend, {}),
+          measures.map((measure, idx) => /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: measure.key,
+              name: measure.label || measure.key,
+              fill: getColor(idx, measure.color),
+              stackId: isStacked ? "stack" : void 0,
+              radius: isStacked ? void 0 : [4, 4, 0, 0]
+            },
+            measure.key
+          ))
+        ]
+      }
+    ) });
+  };
+  const renderPieChart = (nameKey, isDonut) => {
+    const valueKey = measures[0]?.key || "value";
+    return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(PieChart$1, { children: [
+      /* @__PURE__ */ jsx(
+        Pie,
+        {
+          data,
+          dataKey: valueKey,
+          nameKey,
+          cx: "50%",
+          cy: "50%",
+          innerRadius: isDonut ? "50%" : 0,
+          outerRadius: "80%",
+          label: ({ name, percent }) => `${name}: ${((percent ?? 0) * 100).toFixed(0)}%`,
+          labelLine: false,
+          children: data.map((_, idx) => /* @__PURE__ */ jsx(Cell, { fill: getColor(idx) }, `cell-${idx}`))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          contentStyle: {
+            background: "var(--glass-elevated)",
+            border: "1px solid var(--glass-border)"
+          }
+        }
+      ),
+      showLegend && /* @__PURE__ */ jsx(Legend, {})
+    ] }) });
+  };
+  const renderHistogram = () => {
+    const valueKey = measures[0]?.key || "value";
+    const binKey = dimensions[0]?.key || "bin";
+    return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(BarChart$1, { data, margin: { top: 5, right: 20, left: 0, bottom: 5 }, children: [
+      grid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: binKey,
+          tick: { fontSize: 12 },
+          tickLine: false,
+          axisLine: { strokeWidth: 1 }
+        }
+      ),
+      /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 12 }, tickLine: false, axisLine: false, width: 40 }),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          contentStyle: {
+            background: "var(--glass-elevated)",
+            border: "1px solid var(--glass-border)"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(Bar, { dataKey: valueKey, fill: getColor(0), radius: [4, 4, 0, 0] })
+    ] }) });
+  };
+  const normalizeData = (sourceData, sourceMeasures) => {
+    return sourceData.map((row) => {
+      const total = sourceMeasures.reduce((sum, m) => {
+        const val = row[m.key];
+        return sum + (typeof val === "number" ? val : 0);
+      }, 0);
+      if (total === 0) return row;
+      const normalized = { ...row };
+      sourceMeasures.forEach((m) => {
+        const val = row[m.key];
+        if (typeof val === "number") {
+          normalized[m.key] = val / total * 100;
+        }
+      });
+      return normalized;
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-chart", className), children: [
+    (title || subtitle || allowSwitching) && /* @__PURE__ */ jsxs("header", { className: "ds-chart__header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ds-chart__header-text", children: [
+        title && /* @__PURE__ */ jsx("h4", { className: "ds-chart__title", children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "ds-chart__subtitle", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-chart__header-actions", children: [
+        features.showMethodology && data.length > 0 && /* @__PURE__ */ jsx(
+          DataCoverageBadge,
+          {
+            sampleSize: data.length,
+            requiredSize: chartMeta?.contract.minDataPoints || 0,
+            size: "sm"
+          }
+        ),
+        allowSwitching && resolvedAllowedTypes.length > 0 && /* @__PURE__ */ jsx(
+          ChartSwitchControl,
+          {
+            currentType: activeType,
+            allowedTypes: [activeType, ...resolvedAllowedTypes],
+            onTypeChange: handleTypeChange
+          }
+        )
+      ] })
+    ] }),
+    validation.warnings.length > 0 && /* @__PURE__ */ jsx("div", { className: "ds-chart__warnings", children: validation.warnings.map((warning, idx) => /* @__PURE__ */ jsx("div", { className: "ds-chart__warning", children: warning }, idx)) }),
+    /* @__PURE__ */ jsx("div", { className: "ds-chart__body", style: { height }, children: renderChart() })
+  ] });
+}
+Chart.displayName = "Chart";
+var DIMENSION_LABELS = {
+  EI: { left: "Extraversion", right: "Introversion", full: "E/I" },
+  SN: { left: "Sensing", right: "Intuition", full: "S/N" },
+  TF: { left: "Thinking", right: "Feeling", full: "T/F" },
+  JP: { left: "Judging", right: "Perceiving", full: "J/P" }
+};
+function MBTIRadar({
+  dimensions,
+  sampleSize,
+  comparison,
+  title,
+  subtitle,
+  size = 300,
+  showLabels = true,
+  showValues = true,
+  minSampleSize = 20,
+  confidence,
+  className
+}) {
+  const { features } = useReportMode();
+  const isValid = sampleSize >= minSampleSize;
+  const radarData = useMemo(() => {
+    return Object.keys(dimensions).map((key) => ({
+      dimension: DIMENSION_LABELS[key].full,
+      fullName: `${DIMENSION_LABELS[key].left} vs ${DIMENSION_LABELS[key].right}`,
+      value: dimensions[key],
+      comparison: comparison?.[key],
+      leftLabel: DIMENSION_LABELS[key].left,
+      rightLabel: DIMENSION_LABELS[key].right
+    }));
+  }, [dimensions, comparison]);
+  const derivedType = useMemo(() => {
+    const e = dimensions.EI < 50 ? "E" : "I";
+    const s = dimensions.SN < 50 ? "S" : "N";
+    const t = dimensions.TF < 50 ? "T" : "F";
+    const j = dimensions.JP < 50 ? "J" : "P";
+    return `${e}${s}${t}${j}`;
+  }, [dimensions]);
+  if (!isValid) {
+    return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-mbti-radar", "ds-mbti-radar--invalid", className), children: [
+      title && /* @__PURE__ */ jsx("h4", { className: "ds-mbti-radar__title", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "ds-mbti-radar__empty", children: /* @__PURE__ */ jsx(
+        DataStateIndicator,
+        {
+          state: "INSUFFICIENT_SAMPLE",
+          variant: "full",
+          details: {
+            message: "MBTI analysis requires sufficient sample size",
+            sampleSize,
+            requiredSize: minSampleSize
+          }
+        }
+      ) })
+    ] });
+  }
+  const CustomTooltip = ({
+    active,
+    payload
+  }) => {
+    if (!active || !payload?.length) return null;
+    const data = payload[0].payload;
+    return /* @__PURE__ */ jsxs("div", { className: "ds-mbti-radar__tooltip", children: [
+      /* @__PURE__ */ jsx("p", { className: "ds-mbti-radar__tooltip-title", children: data.fullName }),
+      /* @__PURE__ */ jsxs("p", { className: "ds-mbti-radar__tooltip-value", children: [
+        data.leftLabel,
+        ": ",
+        100 - data.value,
+        "%"
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "ds-mbti-radar__tooltip-value", children: [
+        data.rightLabel,
+        ": ",
+        data.value,
+        "%"
+      ] }),
+      data.comparison !== void 0 && /* @__PURE__ */ jsxs("p", { className: "ds-mbti-radar__tooltip-comparison", children: [
+        "Benchmark: ",
+        data.comparison,
+        "%"
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-mbti-radar", className), children: [
+    (title || subtitle) && /* @__PURE__ */ jsxs("header", { className: "ds-mbti-radar__header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ds-mbti-radar__header-text", children: [
+        title && /* @__PURE__ */ jsx("h4", { className: "ds-mbti-radar__title", children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "ds-mbti-radar__subtitle", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-mbti-radar__header-badges", children: [
+        features.showConfidenceScores && confidence !== void 0 && /* @__PURE__ */ jsx(ConfidenceIndicator, { score: confidence, size: "sm" }),
+        features.showMethodology && /* @__PURE__ */ jsx(DataCoverageBadge, { sampleSize, requiredSize: minSampleSize, size: "sm" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-mbti-radar__type-badge", children: [
+      /* @__PURE__ */ jsx("span", { className: "ds-mbti-radar__type-label", children: "Derived Type" }),
+      /* @__PURE__ */ jsx("span", { className: "ds-mbti-radar__type-value", children: derivedType })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ds-mbti-radar__chart", style: { width: size, height: size }, children: /* @__PURE__ */ jsxs(RadarChart, { cx: "50%", cy: "50%", outerRadius: "70%", width: size, height: size, data: radarData, children: [
+      /* @__PURE__ */ jsx(PolarGrid, { stroke: "var(--glass-border)" }),
+      /* @__PURE__ */ jsx(
+        PolarAngleAxis,
+        {
+          dataKey: "dimension",
+          tick: { fill: "var(--text-secondary)", fontSize: 12 }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PolarRadiusAxis,
+        {
+          angle: 45,
+          domain: [0, 100],
+          tick: { fill: "var(--text-tertiary)", fontSize: 10 },
+          tickCount: 5
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Radar,
+        {
+          name: "Profile",
+          dataKey: "value",
+          stroke: "var(--brand-pink)",
+          fill: "var(--brand-pink)",
+          fillOpacity: 0.3,
+          strokeWidth: 2
+        }
+      ),
+      comparison && /* @__PURE__ */ jsx(
+        Radar,
+        {
+          name: "Benchmark",
+          dataKey: "comparison",
+          stroke: "var(--brand-yellow)",
+          fill: "var(--brand-yellow)",
+          fillOpacity: 0.1,
+          strokeWidth: 2,
+          strokeDasharray: "5 5"
+        }
+      ),
+      showValues && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}) }),
+      comparison && /* @__PURE__ */ jsx(Legend, {})
+    ] }) }),
+    showLabels && /* @__PURE__ */ jsx("div", { className: "ds-mbti-radar__dimensions", children: radarData.map((d) => /* @__PURE__ */ jsxs("div", { className: "ds-mbti-radar__dimension", children: [
+      /* @__PURE__ */ jsx("span", { className: "ds-mbti-radar__dimension-left", children: d.leftLabel }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-mbti-radar__dimension-bar", children: [
+        /* @__PURE__ */ jsx("div", { className: "ds-mbti-radar__dimension-fill", style: { width: `${d.value}%` } }),
+        /* @__PURE__ */ jsx("div", { className: "ds-mbti-radar__dimension-marker", style: { left: `${d.value}%` } })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "ds-mbti-radar__dimension-right", children: d.rightLabel })
+    ] }, d.dimension)) })
+  ] });
+}
+MBTIRadar.displayName = "MBTIRadar";
+var MBTI_GRID = [
+  ["ISTJ", "ISFJ", "INFJ", "INTJ"],
+  ["ISTP", "ISFP", "INFP", "INTP"],
+  ["ESTP", "ESFP", "ENFP", "ENTP"],
+  ["ESTJ", "ESFJ", "ENFJ", "ENTJ"]
+];
+var TYPE_DESCRIPTIONS = {
+  ISTJ: "The Inspector - Practical, reliable, systematic",
+  ISFJ: "The Protector - Caring, supportive, traditional",
+  INFJ: "The Advocate - Insightful, principled, compassionate",
+  INTJ: "The Architect - Strategic, independent, determined",
+  ISTP: "The Virtuoso - Observant, practical, analytical",
+  ISFP: "The Adventurer - Artistic, sensitive, exploratory",
+  INFP: "The Mediator - Idealistic, empathetic, creative",
+  INTP: "The Logician - Inventive, logical, objective",
+  ESTP: "The Entrepreneur - Energetic, pragmatic, observant",
+  ESFP: "The Entertainer - Spontaneous, energetic, friendly",
+  ENFP: "The Campaigner - Enthusiastic, creative, sociable",
+  ENTP: "The Debater - Clever, curious, innovative",
+  ESTJ: "The Executive - Organized, logical, assertive",
+  ESFJ: "The Consul - Caring, sociable, traditional",
+  ENFJ: "The Protagonist - Charismatic, empathetic, organized",
+  ENTJ: "The Commander - Strategic, efficient, energetic"
+};
+var COLUMN_LABELS = ["ST", "SF", "NF", "NT"];
+var ROW_LABELS = ["I-J", "I-P", "E-P", "E-J"];
+function MBTITypeGrid({
+  data,
+  sampleSize: propSampleSize,
+  title,
+  subtitle,
+  showPercentages = true,
+  showCounts = true,
+  highlightThreshold,
+  minSampleSize = 50,
+  confidence,
+  onTypeClick,
+  selectedType,
+  className
+}) {
+  const { features } = useReportMode();
+  const typeMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of data) {
+      map.set(item.type, item);
+    }
+    return map;
+  }, [data]);
+  const totalSampleSize = propSampleSize ?? data.reduce((sum, d) => sum + d.count, 0);
+  const isValid = totalSampleSize >= minSampleSize;
+  const maxCount = useMemo(() => Math.max(...data.map((d) => d.count), 1), [data]);
+  const getPercentage = (count) => {
+    return totalSampleSize > 0 ? (count / totalSampleSize * 100).toFixed(1) : "0.0";
+  };
+  const getIntensity = (count) => {
+    if (maxCount === 0) return 0;
+    return count / maxCount * 100;
+  };
+  const isHighlighted = (type) => {
+    if (!highlightThreshold) return false;
+    const item = typeMap.get(type);
+    if (!item) return false;
+    const percentage = item.count / totalSampleSize * 100;
+    return percentage >= highlightThreshold;
+  };
+  if (!isValid) {
+    return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-mbti-type-grid", "ds-mbti-type-grid--invalid", className), children: [
+      title && /* @__PURE__ */ jsx("h4", { className: "ds-mbti-type-grid__title", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "ds-mbti-type-grid__empty", children: /* @__PURE__ */ jsx(
+        DataStateIndicator,
+        {
+          state: "INSUFFICIENT_SAMPLE",
+          variant: "full",
+          details: {
+            message: "MBTI distribution analysis requires sufficient sample size",
+            sampleSize: totalSampleSize,
+            requiredSize: minSampleSize
+          }
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-mbti-type-grid", className), children: [
+    (title || subtitle) && /* @__PURE__ */ jsxs("header", { className: "ds-mbti-type-grid__header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__header-text", children: [
+        title && /* @__PURE__ */ jsx("h4", { className: "ds-mbti-type-grid__title", children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "ds-mbti-type-grid__subtitle", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__header-badges", children: [
+        features.showConfidenceScores && confidence !== void 0 && /* @__PURE__ */ jsx(ConfidenceIndicator, { score: confidence, size: "sm" }),
+        features.showMethodology && /* @__PURE__ */ jsx(
+          DataCoverageBadge,
+          {
+            sampleSize: totalSampleSize,
+            requiredSize: minSampleSize,
+            size: "sm"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__container", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__column-headers", children: [
+        /* @__PURE__ */ jsx("div", { className: "ds-mbti-type-grid__corner" }),
+        COLUMN_LABELS.map((label) => /* @__PURE__ */ jsx("div", { className: "ds-mbti-type-grid__column-header", children: label }, label))
+      ] }),
+      MBTI_GRID.map((row, rowIndex) => /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__row", children: [
+        /* @__PURE__ */ jsx("div", { className: "ds-mbti-type-grid__row-header", children: ROW_LABELS[rowIndex] }),
+        row.map((type) => {
+          const typeData = typeMap.get(type);
+          const count = typeData?.count ?? 0;
+          const percentage = getPercentage(count);
+          const intensity = getIntensity(count);
+          const highlighted = isHighlighted(type);
+          const selected = selectedType === type;
+          return /* @__PURE__ */ jsx(
+            Tooltip$1,
+            {
+              content: /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__tooltip-content", children: [
+                /* @__PURE__ */ jsx("strong", { children: type }),
+                /* @__PURE__ */ jsx("p", { children: TYPE_DESCRIPTIONS[type] }),
+                /* @__PURE__ */ jsxs("p", { children: [
+                  "Count: ",
+                  count.toLocaleString()
+                ] }),
+                /* @__PURE__ */ jsxs("p", { children: [
+                  "Percentage: ",
+                  percentage,
+                  "%"
+                ] }),
+                typeData?.responseRate !== void 0 && /* @__PURE__ */ jsxs("p", { children: [
+                  "Response Rate: ",
+                  typeData.responseRate.toFixed(1),
+                  "%"
+                ] })
+              ] }),
+              children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: clsx7(
+                    "ds-mbti-type-grid__cell",
+                    highlighted && "ds-mbti-type-grid__cell--highlighted",
+                    selected && "ds-mbti-type-grid__cell--selected",
+                    onTypeClick && "ds-mbti-type-grid__cell--clickable"
+                  ),
+                  onClick: () => onTypeClick?.(type),
+                  disabled: !onTypeClick,
+                  style: {
+                    "--cell-intensity": `${intensity}%`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "ds-mbti-type-grid__cell-type", children: type }),
+                    showCounts && /* @__PURE__ */ jsx("span", { className: "ds-mbti-type-grid__cell-count", children: count.toLocaleString() }),
+                    showPercentages && /* @__PURE__ */ jsxs("span", { className: "ds-mbti-type-grid__cell-percentage", children: [
+                      percentage,
+                      "%"
+                    ] })
+                  ]
+                }
+              )
+            },
+            type
+          );
+        })
+      ] }, rowIndex))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__legend", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__legend-item", children: [
+        /* @__PURE__ */ jsx("span", { className: "ds-mbti-type-grid__legend-bar ds-mbti-type-grid__legend-bar--gradient" }),
+        /* @__PURE__ */ jsx("span", { className: "ds-mbti-type-grid__legend-label", children: "Distribution density" })
+      ] }),
+      highlightThreshold && /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__legend-item", children: [
+        /* @__PURE__ */ jsx("span", { className: "ds-mbti-type-grid__legend-bar ds-mbti-type-grid__legend-bar--highlight" }),
+        /* @__PURE__ */ jsxs("span", { className: "ds-mbti-type-grid__legend-label", children: [
+          ">=",
+          highlightThreshold,
+          "% of sample"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+MBTITypeGrid.displayName = "MBTITypeGrid";
+
+export { BarChart, Chart, ChartContainer, ChartSwitchControl, FunnelChart, HeatmapChart, LineChart, MBTIRadar, MBTITypeGrid, PieChart };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-GUZIMHWS.js.map