@salesmind-ai/design-system 0.2.0 → 0.3.0

package/dist/charts/index.js

@@ -0,0 +1,2682 @@
+import clsx11 from 'clsx';
+import { LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$1, Legend, Line, BarChart as BarChart$1, Bar, Cell, PieChart as PieChart$1, Pie, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, ResponsiveContainer, AreaChart, Area } from 'recharts';
+import React2, { createContext, useMemo, useState, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Tooltip } from '@base-ui/react/tooltip';
+
+// src/components/ChartContainer/ChartContainer.tsx
+
+// src/report-engine/constants.ts
+var EXECUTIVE_MODE = {
+  mode: "executive",
+  features: {
+    showMethodology: false,
+    showConfidenceScores: false,
+    showRawData: false,
+    showStatisticalTests: false,
+    chartDetailLevel: "summary",
+    maxInsightsShown: 5,
+    allowDrilldown: false
+  }
+};
+var CONFIDENCE_THRESHOLDS = [
+  { level: "high", min: 90, max: 100, label: "High Confidence", color: "var(--status-success)" },
+  {
+    level: "moderate",
+    min: 70,
+    max: 89,
+    label: "Moderate Confidence",
+    color: "var(--status-info)"
+  },
+  { level: "low", min: 50, max: 69, label: "Low Confidence", color: "var(--status-warning)" },
+  {
+    level: "insufficient",
+    min: 0,
+    max: 49,
+    label: "Insufficient Data",
+    color: "var(--status-error)"
+  }
+];
+var MINIMUM_SAMPLE_SIZES = {
+  overall: 30};
+var ANALYTICAL_STATE_CONFIG = {
+  VALID: {
+    label: "Valid",
+    icon: "check",
+    color: "var(--status-success)",
+    action: null
+  },
+  INSUFFICIENT_SAMPLE: {
+    label: "Insufficient Sample",
+    icon: "alert-triangle",
+    color: "var(--status-warning)",
+    action: "Add more data"
+  },
+  LOW_CONFIDENCE: {
+    label: "Low Confidence",
+    icon: "alert-circle",
+    color: "var(--status-warning)",
+    action: "Interpret with caution"
+  },
+  PARTIAL_TIME_WINDOW: {
+    label: "Partial Data",
+    icon: "clock",
+    color: "var(--status-info)",
+    action: "Expand date range"
+  },
+  DATA_SKEW_DETECTED: {
+    label: "Data Skew",
+    icon: "bar-chart-2",
+    color: "var(--status-warning)",
+    action: "Review methodology"
+  },
+  CONFLICTING_SIGNALS: {
+    label: "Conflicting Signals",
+    icon: "git-merge",
+    color: "var(--status-error)",
+    action: "Manual review needed"
+  },
+  INFERRED_NOT_OBSERVED: {
+    label: "AI Generated",
+    icon: "cpu",
+    color: "var(--status-info)",
+    action: "Verify with data"
+  },
+  STALE_DATA: {
+    label: "Stale Data",
+    icon: "clock",
+    color: "var(--status-warning)",
+    action: "Refresh data"
+  },
+  FIELD_MISSING: {
+    label: "Missing Field",
+    icon: "file-x",
+    color: "var(--status-error)",
+    action: "Upload complete data"
+  },
+  CALCULATION_ERROR: {
+    label: "Calculation Error",
+    icon: "x-circle",
+    color: "var(--status-error)",
+    action: "Contact support"
+  }
+};
+
+// src/report-engine/confidence.ts
+function calculateConfidence(params) {
+  const { sampleSize, requiredSize, completeness, recency, variance} = params;
+  const sampleScore = Math.min(40, sampleSize / requiredSize * 40);
+  const completenessScore = completeness * 20;
+  const recencyScore = recency * 20;
+  const variancePenalty = variance * 10;
+  const aiPenalty = 0;
+  const rawScore = sampleScore + completenessScore + recencyScore - variancePenalty - aiPenalty;
+  return Math.max(0, Math.min(100, Math.round(rawScore)));
+}
+function getConfidenceThreshold(score) {
+  return CONFIDENCE_THRESHOLDS.find((t) => score >= t.min && score <= t.max) ?? CONFIDENCE_THRESHOLDS[CONFIDENCE_THRESHOLDS.length - 1];
+}
+var ReportModeContext = createContext(null);
+function useReportMode() {
+  const context = useContext(ReportModeContext);
+  if (!context) {
+    return EXECUTIVE_MODE;
+  }
+  return context;
+}
+function useChartData({
+  data,
+  requiredFields,
+  minSampleSize = MINIMUM_SAMPLE_SIZES.overall
+}) {
+  return useMemo(() => {
+    const missingFields = [];
+    if (data.length > 0) {
+      const firstRecord = data[0];
+      for (const field of requiredFields) {
+        if (!(field in firstRecord)) {
+          missingFields.push(field);
+        }
+      }
+    }
+    let completeness = 1;
+    if (data.length > 0 && requiredFields.length > 0) {
+      let filled = 0;
+      let total = 0;
+      for (const record of data) {
+        for (const field of requiredFields) {
+          total++;
+          const value = record[field];
+          if (value !== null && value !== void 0 && value !== "") {
+            filled++;
+          }
+        }
+      }
+      completeness = total > 0 ? filled / total : 0;
+    }
+    let state = "VALID";
+    let message;
+    if (missingFields.length > 0) {
+      state = "FIELD_MISSING";
+      message = `Missing fields: ${missingFields.join(", ")}`;
+    } else if (data.length === 0) {
+      state = "INSUFFICIENT_SAMPLE";
+      message = "No data available";
+    } else if (data.length < minSampleSize) {
+      state = "INSUFFICIENT_SAMPLE";
+      message = `Sample size ${data.length} is below minimum ${minSampleSize}`;
+    } else if (completeness < 0.7) {
+      state = "LOW_CONFIDENCE";
+      message = `Data completeness is ${Math.round(completeness * 100)}%`;
+    }
+    const confidence = calculateConfidence({
+      sampleSize: data.length,
+      requiredSize: minSampleSize,
+      completeness,
+      recency: 1,
+      // Assume fresh data if not specified
+      variance: 0});
+    const isRenderable = state === "VALID" || state === "LOW_CONFIDENCE";
+    return {
+      data,
+      state,
+      confidence,
+      isRenderable,
+      message
+    };
+  }, [data, requiredFields, minSampleSize]);
+}
+
+// src/report-engine/chart-types.ts
+var CHART_REGISTRY = {
+  // ══════════════════════════════════════════════════════════════════════════
+  // TREND CHARTS (MVP)
+  // ══════════════════════════════════════════════════════════════════════════
+  line: {
+    id: "line",
+    name: "Line Chart",
+    description: "Shows trends over time with connected data points",
+    intent: "trend",
+    phase: "mvp",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 1,
+      minDataPoints: 3,
+      idealDataPoints: 7,
+      allowNegativeValues: true,
+      requireNonZeroTotal: false,
+      warningThresholds: { sparseData: 3 },
+      fallback: { type: "show_kpi", message: "Insufficient data for trend visualization" }
+    },
+    switchableTo: ["smooth_line", "area", "stacked_area"],
+    supportsStacking: false,
+    supportsMultipleSeries: true,
+    requiresTimeAxis: true
+  },
+  smooth_line: {
+    id: "smooth_line",
+    name: "Smooth Line Chart",
+    description: "Curved line chart for smoother trend visualization",
+    intent: "trend",
+    phase: "mvp",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 1,
+      minDataPoints: 3,
+      idealDataPoints: 7,
+      allowNegativeValues: true,
+      requireNonZeroTotal: false,
+      warningThresholds: { sparseData: 3 },
+      fallback: { type: "show_kpi", message: "Insufficient data for trend visualization" }
+    },
+    switchableTo: ["line", "area", "stacked_area"],
+    supportsStacking: false,
+    supportsMultipleSeries: true,
+    requiresTimeAxis: true
+  },
+  area: {
+    id: "area",
+    name: "Area Chart",
+    description: "Filled area under line, emphasizes volume over time",
+    intent: "trend",
+    phase: "mvp",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 1,
+      minDataPoints: 3,
+      idealDataPoints: 7,
+      allowNegativeValues: false,
+      requireNonZeroTotal: false,
+      warningThresholds: { sparseData: 3 },
+      fallback: { type: "show_kpi", message: "Insufficient data for area visualization" }
+    },
+    switchableTo: ["line", "smooth_line", "stacked_area", "area_100pct"],
+    supportsStacking: true,
+    supportsMultipleSeries: true,
+    requiresTimeAxis: true
+  },
+  stacked_area: {
+    id: "stacked_area",
+    name: "Stacked Area Chart",
+    description: "Multiple series stacked to show cumulative trends",
+    intent: "trend",
+    phase: "mvp",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 2,
+      minDataPoints: 3,
+      idealDataPoints: 7,
+      allowNegativeValues: false,
+      requireNonZeroTotal: true,
+      warningThresholds: { sparseData: 3 },
+      fallback: { type: "warn", message: "Stacked area requires non-negative values" }
+    },
+    switchableTo: ["line", "area", "area_100pct"],
+    supportsStacking: true,
+    supportsMultipleSeries: true,
+    requiresTimeAxis: true
+  },
+  area_100pct: {
+    id: "area_100pct",
+    name: "100% Stacked Area",
+    description: "Shows proportional contribution over time",
+    intent: "trend",
+    phase: "mvp",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 2,
+      minDataPoints: 3,
+      idealDataPoints: 7,
+      allowNegativeValues: false,
+      requireNonZeroTotal: true,
+      warningThresholds: { sparseData: 3 },
+      fallback: { type: "warn", message: "100% stacked requires positive totals" }
+    },
+    switchableTo: ["stacked_area", "area"],
+    supportsStacking: true,
+    supportsMultipleSeries: true,
+    requiresTimeAxis: true
+  },
+  // ══════════════════════════════════════════════════════════════════════════
+  // COMPARISON CHARTS (MVP)
+  // ══════════════════════════════════════════════════════════════════════════
+  bar: {
+    id: "bar",
+    name: "Horizontal Bar Chart",
+    description: "Horizontal bars for comparing categories",
+    intent: "comparison",
+    phase: "mvp",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 1,
+      minDataPoints: 2,
+      idealDataPoints: 5,
+      maxDataPoints: 15,
+      allowNegativeValues: true,
+      requireNonZeroTotal: false,
+      warningThresholds: { tooManyCategories: 12 },
+      fallback: { type: "aggregate", strategy: "top_n" }
+    },
+    switchableTo: ["column", "stacked_bar", "stacked_column"],
+    supportsStacking: true,
+    supportsMultipleSeries: true,
+    requiresTimeAxis: false
+  },
+  column: {
+    id: "column",
+    name: "Vertical Column Chart",
+    description: "Vertical bars for comparing categories",
+    intent: "comparison",
+    phase: "mvp",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 1,
+      minDataPoints: 2,
+      idealDataPoints: 5,
+      maxDataPoints: 12,
+      allowNegativeValues: true,
+      requireNonZeroTotal: false,
+      warningThresholds: { tooManyCategories: 10 },
+      fallback: { type: "aggregate", strategy: "top_n" }
+    },
+    switchableTo: ["bar", "stacked_column", "stacked_bar"],
+    supportsStacking: true,
+    supportsMultipleSeries: true,
+    requiresTimeAxis: false
+  },
+  stacked_bar: {
+    id: "stacked_bar",
+    name: "Stacked Horizontal Bar",
+    description: "Horizontal stacked bars showing composition per category",
+    intent: "comparison",
+    phase: "mvp",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 2,
+      minDataPoints: 2,
+      idealDataPoints: 5,
+      maxDataPoints: 10,
+      allowNegativeValues: false,
+      requireNonZeroTotal: true,
+      warningThresholds: { tooManyCategories: 8, imbalancedRatio: 0.9 },
+      fallback: { type: "aggregate", strategy: "other_bucket" }
+    },
+    switchableTo: ["bar", "stacked_column", "column_100pct"],
+    supportsStacking: true,
+    supportsMultipleSeries: true,
+    requiresTimeAxis: false
+  },
+  stacked_column: {
+    id: "stacked_column",
+    name: "Stacked Vertical Column",
+    description: "Vertical stacked columns showing composition per category",
+    intent: "comparison",
+    phase: "mvp",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 2,
+      minDataPoints: 2,
+      idealDataPoints: 5,
+      maxDataPoints: 10,
+      allowNegativeValues: false,
+      requireNonZeroTotal: true,
+      warningThresholds: { tooManyCategories: 8, imbalancedRatio: 0.9 },
+      fallback: { type: "aggregate", strategy: "other_bucket" }
+    },
+    switchableTo: ["column", "stacked_bar", "column_100pct"],
+    supportsStacking: true,
+    supportsMultipleSeries: true,
+    requiresTimeAxis: false
+  },
+  column_100pct: {
+    id: "column_100pct",
+    name: "100% Stacked Column",
+    description: "Shows proportional composition per category",
+    intent: "comparison",
+    phase: "mvp",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 2,
+      minDataPoints: 2,
+      idealDataPoints: 5,
+      maxDataPoints: 10,
+      allowNegativeValues: false,
+      requireNonZeroTotal: true,
+      warningThresholds: { tooManyCategories: 8 },
+      fallback: { type: "warn", message: "100% stacked requires positive totals" }
+    },
+    switchableTo: ["stacked_column", "stacked_bar"],
+    supportsStacking: true,
+    supportsMultipleSeries: true,
+    requiresTimeAxis: false
+  },
+  combo: {
+    id: "combo",
+    name: "Combo Chart",
+    description: "Combines bars with line overlay (Phase 2)",
+    intent: "comparison",
+    phase: "phase2",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 2,
+      minDataPoints: 3,
+      idealDataPoints: 6,
+      allowNegativeValues: true,
+      requireNonZeroTotal: false,
+      warningThresholds: { tooManyCategories: 10 },
+      fallback: { type: "warn", message: "Combo chart requires dual measures" }
+    },
+    switchableTo: ["column", "line"],
+    supportsStacking: false,
+    supportsMultipleSeries: true,
+    requiresTimeAxis: false
+  },
+  // ══════════════════════════════════════════════════════════════════════════
+  // COMPOSITION CHARTS (MVP)
+  // ══════════════════════════════════════════════════════════════════════════
+  pie: {
+    id: "pie",
+    name: "Pie Chart",
+    description: "Shows proportional composition of a whole",
+    intent: "composition",
+    phase: "mvp",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 1,
+      minDataPoints: 2,
+      idealDataPoints: 4,
+      maxDataPoints: 6,
+      allowNegativeValues: false,
+      requireNonZeroTotal: true,
+      warningThresholds: { tooManyCategories: 6, imbalancedRatio: 0.95 },
+      fallback: { type: "aggregate", strategy: "other_bucket" }
+    },
+    switchableTo: ["donut", "column_100pct"],
+    supportsStacking: false,
+    supportsMultipleSeries: false,
+    requiresTimeAxis: false,
+    maxSlices: 6
+  },
+  donut: {
+    id: "donut",
+    name: "Donut Chart",
+    description: "Pie chart with center cutout, can display total",
+    intent: "composition",
+    phase: "mvp",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 1,
+      minDataPoints: 2,
+      idealDataPoints: 4,
+      maxDataPoints: 6,
+      allowNegativeValues: false,
+      requireNonZeroTotal: true,
+      warningThresholds: { tooManyCategories: 6, imbalancedRatio: 0.95 },
+      fallback: { type: "aggregate", strategy: "other_bucket" }
+    },
+    switchableTo: ["pie", "column_100pct"],
+    supportsStacking: false,
+    supportsMultipleSeries: false,
+    requiresTimeAxis: false,
+    maxSlices: 6
+  },
+  treemap: {
+    id: "treemap",
+    name: "Treemap",
+    description: "Nested rectangles showing hierarchical composition (Phase 2)",
+    intent: "composition",
+    phase: "phase2",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 1,
+      minDataPoints: 3,
+      idealDataPoints: 10,
+      maxDataPoints: 50,
+      allowNegativeValues: false,
+      requireNonZeroTotal: true,
+      warningThresholds: { tooManyCategories: 30 },
+      fallback: { type: "aggregate", strategy: "top_n" }
+    },
+    switchableTo: ["pie", "donut"],
+    supportsStacking: false,
+    supportsMultipleSeries: false,
+    requiresTimeAxis: false
+  },
+  // ══════════════════════════════════════════════════════════════════════════
+  // DISTRIBUTION CHARTS (MVP)
+  // ══════════════════════════════════════════════════════════════════════════
+  histogram: {
+    id: "histogram",
+    name: "Histogram",
+    description: "Shows distribution of values across bins",
+    intent: "distribution",
+    phase: "mvp",
+    contract: {
+      requiredDimensions: 0,
+      requiredMeasures: 1,
+      minDataPoints: 10,
+      idealDataPoints: 50,
+      allowNegativeValues: true,
+      requireNonZeroTotal: false,
+      warningThresholds: { sparseData: 10 },
+      fallback: { type: "show_kpi", message: "Insufficient data for distribution" }
+    },
+    switchableTo: ["radar"],
+    supportsStacking: false,
+    supportsMultipleSeries: false,
+    requiresTimeAxis: false
+  },
+  radar: {
+    id: "radar",
+    name: "Radar Chart",
+    description: "Multi-dimensional comparison in radial layout (Phase 2)",
+    intent: "distribution",
+    phase: "phase2",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 3,
+      minDataPoints: 3,
+      idealDataPoints: 6,
+      maxDataPoints: 8,
+      allowNegativeValues: false,
+      requireNonZeroTotal: false,
+      warningThresholds: { tooManyCategories: 8 },
+      fallback: { type: "warn", message: "Radar works best with 3-8 dimensions" }
+    },
+    switchableTo: ["histogram"],
+    supportsStacking: false,
+    supportsMultipleSeries: true,
+    requiresTimeAxis: false
+  },
+  // ══════════════════════════════════════════════════════════════════════════
+  // RELATIONSHIP CHARTS
+  // ══════════════════════════════════════════════════════════════════════════
+  heatmap: {
+    id: "heatmap",
+    name: "Heatmap",
+    description: "Color-coded matrix showing intensity",
+    intent: "relationship",
+    phase: "mvp",
+    contract: {
+      requiredDimensions: 2,
+      requiredMeasures: 1,
+      minDataPoints: 9,
+      idealDataPoints: 25,
+      allowNegativeValues: true,
+      requireNonZeroTotal: false,
+      warningThresholds: { sparseData: 9 },
+      fallback: { type: "warn", message: "Heatmap requires grid data" }
+    },
+    switchableTo: ["scatter"],
+    supportsStacking: false,
+    supportsMultipleSeries: false,
+    requiresTimeAxis: false
+  },
+  scatter: {
+    id: "scatter",
+    name: "Scatter Plot",
+    description: "Shows correlation between two variables (Phase 2)",
+    intent: "relationship",
+    phase: "phase2",
+    contract: {
+      requiredDimensions: 0,
+      requiredMeasures: 2,
+      minDataPoints: 20,
+      idealDataPoints: 100,
+      allowNegativeValues: true,
+      requireNonZeroTotal: false,
+      warningThresholds: { sparseData: 20 },
+      fallback: { type: "show_kpi", message: "Scatter requires 20+ points" }
+    },
+    switchableTo: ["bubble", "heatmap"],
+    supportsStacking: false,
+    supportsMultipleSeries: true,
+    requiresTimeAxis: false
+  },
+  bubble: {
+    id: "bubble",
+    name: "Bubble Chart",
+    description: "Scatter with sized points for third dimension (Phase 2)",
+    intent: "relationship",
+    phase: "phase2",
+    contract: {
+      requiredDimensions: 0,
+      requiredMeasures: 3,
+      minDataPoints: 10,
+      idealDataPoints: 50,
+      allowNegativeValues: true,
+      requireNonZeroTotal: false,
+      warningThresholds: { sparseData: 10 },
+      fallback: { type: "show_kpi", message: "Bubble requires 3 measures" }
+    },
+    switchableTo: ["scatter"],
+    supportsStacking: false,
+    supportsMultipleSeries: true,
+    requiresTimeAxis: false
+  },
+  // ══════════════════════════════════════════════════════════════════════════
+  // GEOGRAPHIC CHARTS (Phase 2)
+  // ══════════════════════════════════════════════════════════════════════════
+  geo: {
+    id: "geo",
+    name: "Geographic Map",
+    description: "Map with regional data markers (Phase 2)",
+    intent: "geo",
+    phase: "phase2",
+    contract: {
+      requiredDimensions: 1,
+      // geo dimension (country/region)
+      requiredMeasures: 1,
+      minDataPoints: 1,
+      idealDataPoints: 10,
+      allowNegativeValues: true,
+      requireNonZeroTotal: false,
+      warningThresholds: {},
+      fallback: { type: "hide" }
+    },
+    switchableTo: ["choropleth"],
+    supportsStacking: false,
+    supportsMultipleSeries: false,
+    requiresTimeAxis: false
+  },
+  choropleth: {
+    id: "choropleth",
+    name: "Choropleth Map",
+    description: "Color-shaded regions by value (Phase 2)",
+    intent: "geo",
+    phase: "phase2",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 1,
+      minDataPoints: 3,
+      idealDataPoints: 20,
+      allowNegativeValues: false,
+      requireNonZeroTotal: false,
+      warningThresholds: {},
+      fallback: { type: "hide" }
+    },
+    switchableTo: ["geo"],
+    supportsStacking: false,
+    supportsMultipleSeries: false,
+    requiresTimeAxis: false
+  },
+  // ══════════════════════════════════════════════════════════════════════════
+  // SPECIAL CHARTS
+  // ══════════════════════════════════════════════════════════════════════════
+  funnel: {
+    id: "funnel",
+    name: "Funnel Chart",
+    description: "Shows conversion through sequential stages",
+    intent: "comparison",
+    phase: "mvp",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 1,
+      minDataPoints: 3,
+      idealDataPoints: 5,
+      maxDataPoints: 7,
+      allowNegativeValues: false,
+      requireNonZeroTotal: true,
+      warningThresholds: { tooManyCategories: 7 },
+      fallback: { type: "warn", message: "Funnel requires sequential stages" }
+    },
+    switchableTo: ["bar"],
+    supportsStacking: false,
+    supportsMultipleSeries: false,
+    requiresTimeAxis: false
+  },
+  waterfall: {
+    id: "waterfall",
+    name: "Waterfall Chart",
+    description: "Shows cumulative effect of sequential changes (Phase 2)",
+    intent: "comparison",
+    phase: "phase2",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 1,
+      minDataPoints: 3,
+      idealDataPoints: 6,
+      maxDataPoints: 12,
+      allowNegativeValues: true,
+      requireNonZeroTotal: false,
+      warningThresholds: { tooManyCategories: 10 },
+      fallback: { type: "warn", message: "Waterfall requires sequential data" }
+    },
+    switchableTo: ["bar", "column"],
+    supportsStacking: false,
+    supportsMultipleSeries: false,
+    requiresTimeAxis: false
+  },
+  timeline: {
+    id: "timeline",
+    name: "Timeline",
+    description: "Shows events along time axis (Phase 2)",
+    intent: "trend",
+    phase: "phase2",
+    contract: {
+      requiredDimensions: 1,
+      requiredMeasures: 0,
+      minDataPoints: 2,
+      idealDataPoints: 10,
+      allowNegativeValues: false,
+      requireNonZeroTotal: false,
+      warningThresholds: {},
+      fallback: { type: "hide" }
+    },
+    switchableTo: ["line"],
+    supportsStacking: false,
+    supportsMultipleSeries: false,
+    requiresTimeAxis: true
+  }
+};
+function getAllowedSwitchTargets(currentType) {
+  const metadata = CHART_REGISTRY[currentType];
+  if (!metadata) return [];
+  return metadata.switchableTo.filter((type) => {
+    const targetMeta = CHART_REGISTRY[type];
+    return targetMeta && targetMeta.phase === "mvp";
+  });
+}
+function validateChartData(chartType, data, dimensions, measures) {
+  const metadata = CHART_REGISTRY[chartType];
+  if (!metadata) {
+    return {
+      isValid: false,
+      warnings: [],
+      errors: [`Unknown chart type: ${chartType}`]
+    };
+  }
+  const contract = metadata.contract;
+  const warnings = [];
+  const errors = [];
+  if (data.length < contract.minDataPoints) {
+    errors.push(`Requires at least ${contract.minDataPoints} data points, got ${data.length}`);
+  }
+  if (contract.maxDataPoints && data.length > contract.maxDataPoints) {
+    warnings.push(`Chart works best with \u2264${contract.maxDataPoints} items. Consider aggregating.`);
+  }
+  if (dimensions.length < contract.requiredDimensions) {
+    errors.push(`Requires ${contract.requiredDimensions} dimension(s), got ${dimensions.length}`);
+  }
+  if (measures.length < contract.requiredMeasures) {
+    errors.push(`Requires ${contract.requiredMeasures} measure(s), got ${measures.length}`);
+  }
+  if (!contract.allowNegativeValues && data.length > 0) {
+    const hasNegative = data.some((row) => {
+      if (typeof row !== "object" || row === null) return false;
+      return measures.some((m) => {
+        const val = row[m];
+        return typeof val === "number" && val < 0;
+      });
+    });
+    if (hasNegative) {
+      errors.push("This chart type does not support negative values");
+    }
+  }
+  if (contract.warningThresholds.tooManyCategories && data.length > contract.warningThresholds.tooManyCategories) {
+    warnings.push(`Too many categories (${data.length}). Consider grouping smaller values.`);
+  }
+  return {
+    isValid: errors.length === 0,
+    warnings,
+    errors,
+    fallbackAction: errors.length > 0 ? contract.fallback : void 0
+  };
+}
+function getDefaultChartForIntent(intent) {
+  const defaults = {
+    trend: "line",
+    comparison: "column",
+    composition: "donut",
+    distribution: "histogram",
+    relationship: "heatmap",
+    geo: "geo"
+  };
+  return defaults[intent];
+}
+var DataStateIndicator = React2.forwardRef(
+  ({ state, details, variant = "compact", onAction, className, ...props }, ref) => {
+    const config = ANALYTICAL_STATE_CONFIG[state];
+    if (state === "VALID" && variant === "compact") {
+      return null;
+    }
+    const renderIcon = () => {
+      switch (config.icon) {
+        case "check":
+          return /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: /* @__PURE__ */ jsx("polyline", { points: "20,6 9,17 4,12" })
+            }
+          );
+        case "alert-triangle":
+          return /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: [
+                /* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+              ]
+            }
+          );
+        case "alert-circle":
+          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" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+              ]
+            }
+          );
+        case "x-circle":
+          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" }),
+                /* @__PURE__ */ jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+                /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+              ]
+            }
+          );
+        case "cpu":
+          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: "4", width: "16", height: "16", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "6", height: "6" }),
+                /* @__PURE__ */ jsx("line", { x1: "9", y1: "1", x2: "9", y2: "4" }),
+                /* @__PURE__ */ jsx("line", { x1: "15", y1: "1", x2: "15", y2: "4" }),
+                /* @__PURE__ */ jsx("line", { x1: "9", y1: "20", x2: "9", y2: "23" }),
+                /* @__PURE__ */ jsx("line", { x1: "15", y1: "20", x2: "15", y2: "23" }),
+                /* @__PURE__ */ jsx("line", { x1: "20", y1: "9", x2: "23", y2: "9" }),
+                /* @__PURE__ */ jsx("line", { x1: "20", y1: "14", x2: "23", y2: "14" }),
+                /* @__PURE__ */ jsx("line", { x1: "1", y1: "9", x2: "4", y2: "9" }),
+                /* @__PURE__ */ jsx("line", { x1: "1", y1: "14", x2: "4", y2: "14" })
+              ]
+            }
+          );
+        default:
+          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" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+              ]
+            }
+          );
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx11(
+          "ds-data-state-indicator",
+          `ds-data-state-indicator--${variant}`,
+          `ds-data-state-indicator--${state.toLowerCase().replace(/_/g, "-")}`,
+          className
+        ),
+        role: "status",
+        "aria-live": "polite",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "ds-data-state-indicator__icon", style: { color: config.color }, children: renderIcon() }),
+          /* @__PURE__ */ jsxs("div", { className: "ds-data-state-indicator__content", children: [
+            /* @__PURE__ */ jsx("span", { className: "ds-data-state-indicator__label", children: config.label }),
+            variant === "full" && details && /* @__PURE__ */ jsxs("span", { className: "ds-data-state-indicator__details", children: [
+              details.message,
+              details.sampleSize !== void 0 && details.requiredSize !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                " ",
+                "(n=",
+                details.sampleSize,
+                "/",
+                details.requiredSize,
+                ")"
+              ] }),
+              details.confidence !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                " \u2022 ",
+                details.confidence,
+                "% confidence"
+              ] }),
+              details.missingFields && details.missingFields.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                " \u2022 Missing: ",
+                details.missingFields.join(", ")
+              ] })
+            ] })
+          ] }),
+          config.action && onAction && /* @__PURE__ */ jsx("button", { type: "button", className: "ds-data-state-indicator__action", onClick: onAction, children: config.action })
+        ]
+      }
+    );
+  }
+);
+DataStateIndicator.displayName = "DataStateIndicator";
+var DataCoverageBadge = React2.forwardRef(
+  ({ sampleSize, requiredSize, dateRange, showDateRange = true, size = "md", className, ...props }, ref) => {
+    const isSufficient = !requiredSize || sampleSize >= requiredSize;
+    const percentage = requiredSize ? Math.min(100, Math.round(sampleSize / requiredSize * 100)) : 100;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx11(
+          "ds-data-coverage-badge",
+          `ds-data-coverage-badge--${size}`,
+          !isSufficient && "ds-data-coverage-badge--insufficient",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "ds-data-coverage-badge__sample", children: [
+            /* @__PURE__ */ jsx("span", { className: "ds-data-coverage-badge__icon", children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "14",
+                height: "14",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7", r: "4" }),
+                  /* @__PURE__ */ jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
+                  /* @__PURE__ */ jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("span", { className: "ds-data-coverage-badge__count", children: [
+              "n=",
+              sampleSize.toLocaleString()
+            ] }),
+            requiredSize && /* @__PURE__ */ jsxs("span", { className: "ds-data-coverage-badge__required", children: [
+              "(",
+              percentage,
+              "% of min ",
+              requiredSize,
+              ")"
+            ] })
+          ] }),
+          showDateRange && dateRange && /* @__PURE__ */ jsxs("div", { className: "ds-data-coverage-badge__date", children: [
+            /* @__PURE__ */ jsx("span", { className: "ds-data-coverage-badge__icon", children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "14",
+                height: "14",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: [
+                  /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
+                  /* @__PURE__ */ jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+                  /* @__PURE__ */ jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+                  /* @__PURE__ */ jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              dateRange.start,
+              " \u2013 ",
+              dateRange.end
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+DataCoverageBadge.displayName = "DataCoverageBadge";
+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: clsx11(
+        "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 = React2.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$1, {}),
+        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$1, {}),
+            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$1, {}),
+        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: clsx11("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: clsx11("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";
+Tooltip.Provider;
+Tooltip.Root;
+Tooltip.Trigger;
+var TooltipContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { sideOffset: 5, children: /* @__PURE__ */ jsxs(Tooltip.Popup, { ref, className: clsx11("ds-tooltip__content", className), ...props, children: [
+  children,
+  /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "ds-tooltip__arrow" })
+] }) }) }));
+TooltipContent.displayName = "TooltipContent";
+var Tooltip4 = ({ content, children, delay = 200 }) => {
+  return /* @__PURE__ */ jsx(Tooltip.Provider, { delay, children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { render: children }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: content })
+  ] }) });
+};
+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: clsx11("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: clsx11("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(Tooltip4, { 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: clsx11("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: clsx11(
+          "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$1,
+      {
+        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$1,
+        {
+          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$1,
+            {
+              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$1,
+        {
+          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$1,
+        {
+          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: clsx11("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 ConfidenceIndicator = React2.forwardRef(
+  ({ score, showScore = true, showLabel = true, size = "md", className, ...props }, ref) => {
+    const threshold = getConfidenceThreshold(score);
+    const normalizedScore = Math.max(0, Math.min(100, score));
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx11(
+          "ds-confidence-indicator",
+          `ds-confidence-indicator--${size}`,
+          `ds-confidence-indicator--${threshold.level}`,
+          className
+        ),
+        role: "meter",
+        "aria-valuenow": normalizedScore,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": `Confidence: ${threshold.label} (${normalizedScore}%)`,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "ds-confidence-indicator__bar", children: /* @__PURE__ */ jsx("div", { className: "ds-confidence-indicator__fill", style: { width: `${normalizedScore}%` } }) }),
+          /* @__PURE__ */ jsxs("div", { className: "ds-confidence-indicator__text", children: [
+            showScore && /* @__PURE__ */ jsxs("span", { className: "ds-confidence-indicator__score", children: [
+              normalizedScore,
+              "%"
+            ] }),
+            showLabel && /* @__PURE__ */ jsx("span", { className: "ds-confidence-indicator__label", children: threshold.label })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ConfidenceIndicator.displayName = "ConfidenceIndicator";
+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: clsx11("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: clsx11("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$1, { 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: clsx11("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: clsx11("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(
+            Tooltip4,
+            {
+              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: clsx11(
+                    "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=index.js.map