@salesmind-ai/design-system 0.3.1 → 0.3.2

package/dist/charts/index.js

@@ -1,2682 +1,5 @@
-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 };
+export { BarChart, Chart, ChartContainer, ChartSwitchControl, FunnelChart, HeatmapChart, LineChart, MBTIRadar, MBTITypeGrid, PieChart } from '../chunk-GUZIMHWS.js';
+import '../chunk-B6AVAX4F.js';
+import '../chunk-C2BCDNAV.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map