@aigentyc/chat-sdk 0.1.0

package/dist/chunk-5T4FJ2SR.js

@@ -0,0 +1,664 @@
+"use client";
+import { cn } from './chunk-3RW7O444.js';
+import * as RechartsPrimitive from 'recharts';
+import { ComposedChart, CartesianGrid, XAxis, YAxis, Bar, Line, Area, RadarChart, PolarGrid, PolarAngleAxis, Radar, AreaChart, PieChart, Pie, Cell, BarChart, LineChart } from 'recharts';
+import * as React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Check, TrendingUp, TrendingDown, Minus, X, Star } from 'lucide-react';
+
+var THEMES = { light: "", dark: ".dark" };
+var ChartContext = React.createContext(null);
+function useChart() {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+var ChartContainer = React.forwardRef(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-chart": chartId,
+      ref,
+      className: cn(
+        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })
+      ]
+    }
+  ) });
+});
+ChartContainer.displayName = "Chart";
+var ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config2]) => config2.theme || config2.color
+  );
+  if (!colorConfig.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(THEMES).map(
+          ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+            const color = itemConfig.theme?.[theme] || itemConfig.color;
+            return color ? `  --color-${key}: ${color};` : null;
+          }).join("\n")}
+}
+`
+        ).join("\n")
+      }
+    }
+  );
+};
+var ChartTooltip = RechartsPrimitive.Tooltip;
+var ChartTooltipContent = React.forwardRef(
+  ({
+    active,
+    payload,
+    className,
+    indicator = "dot",
+    hideLabel = false,
+    hideIndicator = false,
+    label,
+    labelFormatter,
+    labelClassName,
+    formatter,
+    color,
+    nameKey,
+    labelKey
+  }, ref) => {
+    const { config } = useChart();
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+      const [item] = payload;
+      const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+      if (labelFormatter) {
+        return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+      }
+      if (!value) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: value });
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey
+    ]);
+    if (!active || !payload?.length) {
+      return null;
+    }
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        ),
+        children: [
+          !nestLabel ? tooltipLabel : null,
+          /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                ),
+                children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                        {
+                          "h-2.5 w-2.5": indicator === "dot",
+                          "w-1": indicator === "line",
+                          "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                          "my-0.5": nestLabel && indicator === "dashed"
+                        }
+                      ),
+                      style: {
+                        "--color-bg": indicatorColor,
+                        "--color-border": indicatorColor
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+                          nestLabel ? tooltipLabel : null,
+                          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
+                        ] }),
+                        item.value && /* @__PURE__ */ jsx("span", { className: "font-mono font-medium tabular-nums text-foreground", children: item.value.toLocaleString() })
+                      ]
+                    }
+                  )
+                ] })
+              },
+              item.dataKey
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+var ChartLegend = RechartsPrimitive.Legend;
+var ChartLegendContent = React.forwardRef(
+  ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+    const { config } = useChart();
+    if (!payload?.length) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        ),
+        children: payload.filter((item) => item.type !== "none").map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              ),
+              children: [
+                itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "h-2 w-2 shrink-0 rounded-[2px]",
+                    style: {
+                      backgroundColor: item.color
+                    }
+                  }
+                ),
+                itemConfig?.label
+              ]
+            },
+            item.value
+          );
+        })
+      }
+    );
+  }
+);
+ChartLegendContent.displayName = "ChartLegend";
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return void 0;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let configLabelKey = key;
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+var CHART_COLORS = [
+  "var(--ac-chart-1, hsl(221, 83%, 53%))",
+  "var(--ac-chart-2, hsl(142, 71%, 45%))",
+  "var(--ac-chart-3, hsl(38, 92%, 50%))",
+  "var(--ac-chart-4, hsl(0, 84%, 60%))",
+  "var(--ac-chart-5, hsl(262, 83%, 58%))",
+  "var(--ac-chart-6, hsl(173, 80%, 40%))",
+  "var(--ac-chart-7, hsl(330, 81%, 60%))",
+  "var(--ac-chart-8, hsl(25, 95%, 53%))"
+];
+function formatValue(value, formatter) {
+  switch (formatter) {
+    case "currency":
+      return `$${value.toLocaleString()}`;
+    case "percent":
+      return `${value}%`;
+    case "compact": {
+      if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+      if (value >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
+      return value.toLocaleString();
+    }
+    default:
+      return value.toLocaleString();
+  }
+}
+function buildChartConfig(series) {
+  const cfg = {};
+  for (let i = 0; i < series.length; i++) {
+    const s = series[i];
+    cfg[s.dataKey] = {
+      label: s.label,
+      color: s.color || CHART_COLORS[i % CHART_COLORS.length]
+    };
+  }
+  return cfg;
+}
+function shouldShowLegend(config, series) {
+  if (config?.showLegend !== void 0) return config.showLegend;
+  return (series?.length ?? 0) > 1;
+}
+function RenderLineChart({ spec }) {
+  const series = spec.config?.series ?? [];
+  const chartConfig = buildChartConfig(series);
+  const xKey = spec.config?.xAxis ?? "name";
+  const showGrid = spec.config?.showGrid !== false;
+  return /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: "h-[300px] w-full", children: /* @__PURE__ */ jsxs(LineChart, { data: spec.data, accessibilityLayer: true, children: [
+    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", className: "stroke-muted" }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, className: "text-xs", tickLine: false, axisLine: false }),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        className: "text-xs",
+        tickLine: false,
+        axisLine: false,
+        tickFormatter: (v) => formatValue(v, spec.config?.valueFormatter)
+      }
+    ),
+    /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+    shouldShowLegend(spec.config, series) && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
+    series.map((s) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        type: "monotone",
+        dataKey: s.dataKey,
+        stroke: `var(--color-${s.dataKey})`,
+        strokeWidth: 2,
+        dot: { r: 3 },
+        activeDot: { r: 5 }
+      },
+      s.dataKey
+    ))
+  ] }) });
+}
+function RenderBarChart({ spec }) {
+  const series = spec.config?.series ?? [];
+  const chartConfig = buildChartConfig(series);
+  const xKey = spec.config?.xAxis ?? "name";
+  const showGrid = spec.config?.showGrid !== false;
+  const stacked = spec.config?.stacked ?? false;
+  return /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: "h-[300px] w-full", children: /* @__PURE__ */ jsxs(BarChart, { data: spec.data, accessibilityLayer: true, children: [
+    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", className: "stroke-muted" }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, className: "text-xs", tickLine: false, axisLine: false }),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        className: "text-xs",
+        tickLine: false,
+        axisLine: false,
+        tickFormatter: (v) => formatValue(v, spec.config?.valueFormatter)
+      }
+    ),
+    /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+    shouldShowLegend(spec.config, series) && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
+    series.map((s) => /* @__PURE__ */ jsx(
+      Bar,
+      {
+        dataKey: s.dataKey,
+        fill: `var(--color-${s.dataKey})`,
+        radius: [4, 4, 0, 0],
+        stackId: stacked ? "stack" : void 0
+      },
+      s.dataKey
+    ))
+  ] }) });
+}
+function RenderPieChart({ spec }) {
+  const series = spec.config?.series ?? [];
+  const valueKey = series[0]?.dataKey ?? "value";
+  const chartConfig = buildChartConfig(series);
+  const data = (spec.data ?? []).map((d, i) => ({
+    ...d,
+    fill: CHART_COLORS[i % CHART_COLORS.length]
+  }));
+  return /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: "h-[300px] w-full", children: /* @__PURE__ */ jsxs(PieChart, { accessibilityLayer: true, children: [
+    /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, { nameKey: "name" }) }),
+    /* @__PURE__ */ jsx(
+      Pie,
+      {
+        data,
+        dataKey: valueKey,
+        nameKey: "name",
+        cx: "50%",
+        cy: "50%",
+        outerRadius: 100,
+        label: ({ percent }) => `${((percent ?? 0) * 100).toFixed(0)}%`,
+        labelLine: false,
+        children: data.map((_entry, i) => /* @__PURE__ */ jsx(Cell, { fill: CHART_COLORS[i % CHART_COLORS.length] }, `cell-${i}`))
+      }
+    ),
+    shouldShowLegend(spec.config, series) && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, { nameKey: "name" }) })
+  ] }) });
+}
+function RenderAreaChart({ spec }) {
+  const series = spec.config?.series ?? [];
+  const chartConfig = buildChartConfig(series);
+  const xKey = spec.config?.xAxis ?? "name";
+  const showGrid = spec.config?.showGrid !== false;
+  const stacked = spec.config?.stacked ?? false;
+  return /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: "h-[300px] w-full", children: /* @__PURE__ */ jsxs(AreaChart, { data: spec.data, accessibilityLayer: true, children: [
+    /* @__PURE__ */ jsx("defs", { children: series.map((s) => /* @__PURE__ */ jsxs("linearGradient", { id: `fill-${s.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: `var(--color-${s.dataKey})`, stopOpacity: 0.3 }),
+      /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: `var(--color-${s.dataKey})`, stopOpacity: 0.05 })
+    ] }, s.dataKey)) }),
+    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", className: "stroke-muted" }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, className: "text-xs", tickLine: false, axisLine: false }),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        className: "text-xs",
+        tickLine: false,
+        axisLine: false,
+        tickFormatter: (v) => formatValue(v, spec.config?.valueFormatter)
+      }
+    ),
+    /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+    shouldShowLegend(spec.config, series) && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
+    series.map((s) => /* @__PURE__ */ jsx(
+      Area,
+      {
+        type: "monotone",
+        dataKey: s.dataKey,
+        stroke: `var(--color-${s.dataKey})`,
+        fill: `url(#fill-${s.dataKey})`,
+        strokeWidth: 2,
+        stackId: stacked ? "stack" : void 0
+      },
+      s.dataKey
+    ))
+  ] }) });
+}
+function RenderRadarChart({ spec }) {
+  const series = spec.config?.series ?? [];
+  const chartConfig = buildChartConfig(series);
+  const xKey = spec.config?.xAxis ?? "name";
+  return /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: "h-[300px] w-full", children: /* @__PURE__ */ jsxs(RadarChart, { data: spec.data, cx: "50%", cy: "50%", outerRadius: "80%", accessibilityLayer: true, children: [
+    /* @__PURE__ */ jsx(PolarGrid, { className: "stroke-muted" }),
+    /* @__PURE__ */ jsx(PolarAngleAxis, { dataKey: xKey, className: "text-xs" }),
+    /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+    shouldShowLegend(spec.config, series) && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
+    series.map((s) => /* @__PURE__ */ jsx(
+      Radar,
+      {
+        name: s.label,
+        dataKey: s.dataKey,
+        stroke: `var(--color-${s.dataKey})`,
+        fill: `var(--color-${s.dataKey})`,
+        fillOpacity: 0.2
+      },
+      s.dataKey
+    ))
+  ] }) });
+}
+function RenderComposedChart({ spec }) {
+  const series = spec.config?.series ?? [];
+  const chartConfig = buildChartConfig(series);
+  const xKey = spec.config?.xAxis ?? "name";
+  const showGrid = spec.config?.showGrid !== false;
+  return /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: "h-[300px] w-full", children: /* @__PURE__ */ jsxs(ComposedChart, { data: spec.data, accessibilityLayer: true, children: [
+    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", className: "stroke-muted" }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, className: "text-xs", tickLine: false, axisLine: false }),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        className: "text-xs",
+        tickLine: false,
+        axisLine: false,
+        tickFormatter: (v) => formatValue(v, spec.config?.valueFormatter)
+      }
+    ),
+    /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+    shouldShowLegend(spec.config, series) && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
+    series.map((s) => {
+      const color = `var(--color-${s.dataKey})`;
+      switch (s.type) {
+        case "area":
+          return /* @__PURE__ */ jsx(
+            Area,
+            {
+              type: "monotone",
+              dataKey: s.dataKey,
+              stroke: color,
+              fill: color,
+              fillOpacity: 0.15,
+              strokeWidth: 2
+            },
+            s.dataKey
+          );
+        case "line":
+          return /* @__PURE__ */ jsx(
+            Line,
+            {
+              type: "monotone",
+              dataKey: s.dataKey,
+              stroke: color,
+              strokeWidth: 2,
+              dot: { r: 3 }
+            },
+            s.dataKey
+          );
+        case "bar":
+        default:
+          return /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: s.dataKey,
+              fill: color,
+              radius: [4, 4, 0, 0]
+            },
+            s.dataKey
+          );
+      }
+    })
+  ] }) });
+}
+function RenderMetricCards({ spec }) {
+  const metrics = spec.metrics ?? [];
+  if (metrics.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-3", children: metrics.map((m, i) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4 space-y-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold tracking-tight", children: m.value }),
+      m.unit && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: m.unit })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: m.label }),
+    m.trend && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      m.trendDirection === "up" && /* @__PURE__ */ jsx(TrendingUp, { className: "h-3.5 w-3.5 text-emerald-500" }),
+      m.trendDirection === "down" && /* @__PURE__ */ jsx(TrendingDown, { className: "h-3.5 w-3.5 text-red-500" }),
+      m.trendDirection === "neutral" && /* @__PURE__ */ jsx(Minus, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `text-xs font-medium ${m.trendDirection === "up" ? "text-emerald-500" : m.trendDirection === "down" ? "text-red-500" : "text-muted-foreground"}`,
+          children: m.trend
+        }
+      )
+    ] }),
+    m.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/70", children: m.description })
+  ] }, i)) });
+}
+function RenderComparison({ spec }) {
+  const items = spec.items ?? [];
+  const fields = spec.comparisonFields ?? [];
+  if (items.length === 0 || fields.length === 0) return null;
+  function renderCellValue(value, type) {
+    if (type === "boolean" || typeof value === "boolean") {
+      return value ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-emerald-500 mx-auto" }) : /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-red-400 mx-auto" });
+    }
+    if (type === "rating" && typeof value === "number") {
+      return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-0.5", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(
+        Star,
+        {
+          className: `h-3.5 w-3.5 ${i < value ? "fill-amber-400 text-amber-400" : "text-muted-foreground/30"}`
+        },
+        i
+      )) });
+    }
+    return /* @__PURE__ */ jsx("span", { className: "text-sm", children: String(value) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b bg-muted/50", children: [
+      /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left font-medium text-muted-foreground" }),
+      items.map((item, i) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: `px-3 py-2 text-center font-semibold ${item.highlight ? "bg-primary/5 border-t-2 border-t-primary" : ""}`,
+          children: item.name
+        },
+        i
+      ))
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: fields.map((field, fi) => /* @__PURE__ */ jsxs("tr", { className: fi % 2 === 0 ? "" : "bg-muted/20", children: [
+      /* @__PURE__ */ jsx("td", { className: "px-3 py-2 font-medium text-muted-foreground whitespace-nowrap", children: field.label }),
+      items.map((item, ii) => /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: `px-3 py-2 text-center ${item.highlight ? "bg-primary/5" : ""}`,
+          children: field.key in item.features ? renderCellValue(item.features[field.key], field.type) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "-" })
+        },
+        ii
+      ))
+    ] }, field.key)) })
+  ] }) });
+}
+function RenderTimeline({ spec }) {
+  const events = spec.events ?? [];
+  if (events.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "relative pl-6 space-y-6", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-[9px] top-2 bottom-2 w-px bg-border" }),
+    events.map((event, i) => {
+      const status = event.status ?? "upcoming";
+      return /* @__PURE__ */ jsxs("div", { className: "relative flex gap-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute -left-6 top-0.5 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `h-[18px] w-[18px] rounded-full border-2 ${status === "completed" ? "border-emerald-500 bg-emerald-500" : status === "current" ? "border-blue-500 bg-blue-500 animate-pulse" : "border-muted-foreground/40 bg-background"}`,
+            children: status === "completed" && /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-white m-auto" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 pb-1", children: [
+          event.date && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-0.5", children: event.date }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: `text-sm font-medium ${status === "upcoming" ? "text-muted-foreground" : ""}`,
+              children: event.title
+            }
+          ),
+          event.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/70 mt-0.5", children: event.description })
+        ] })
+      ] }, i);
+    })
+  ] });
+}
+function RenderProgress({ spec }) {
+  const goals = spec.goals ?? [];
+  if (goals.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: goals.map((goal, i) => {
+    const pct = goal.target > 0 ? Math.min(goal.current / goal.target * 100, 100) : 0;
+    const barColor = pct >= 75 ? "bg-emerald-500" : pct >= 40 ? "bg-amber-500" : "bg-red-500";
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: goal.label }),
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground tabular-nums", children: [
+          goal.current.toLocaleString(),
+          goal.unit ? ` ${goal.unit}` : "",
+          " / ",
+          goal.target.toLocaleString(),
+          goal.unit ? ` ${goal.unit}` : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "h-2.5 w-full rounded-full bg-muted overflow-hidden", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `h-full rounded-full transition-all ${barColor}`,
+          style: { width: `${pct}%` }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground text-right tabular-nums", children: [
+        pct.toFixed(0),
+        "%"
+      ] })
+    ] }, i);
+  }) });
+}
+function renderContent(spec) {
+  switch (spec.type) {
+    case "line_chart":
+      return spec.data?.length ? /* @__PURE__ */ jsx(RenderLineChart, { spec }) : null;
+    case "bar_chart":
+      return spec.data?.length ? /* @__PURE__ */ jsx(RenderBarChart, { spec }) : null;
+    case "pie_chart":
+      return spec.data?.length ? /* @__PURE__ */ jsx(RenderPieChart, { spec }) : null;
+    case "area_chart":
+      return spec.data?.length ? /* @__PURE__ */ jsx(RenderAreaChart, { spec }) : null;
+    case "radar_chart":
+      return spec.data?.length ? /* @__PURE__ */ jsx(RenderRadarChart, { spec }) : null;
+    case "composed_chart":
+      return spec.data?.length ? /* @__PURE__ */ jsx(RenderComposedChart, { spec }) : null;
+    case "metric_cards":
+      return /* @__PURE__ */ jsx(RenderMetricCards, { spec });
+    case "comparison":
+      return /* @__PURE__ */ jsx(RenderComparison, { spec });
+    case "timeline":
+      return /* @__PURE__ */ jsx(RenderTimeline, { spec });
+    case "progress":
+      return /* @__PURE__ */ jsx(RenderProgress, { spec });
+    default:
+      return /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        "Unsupported visualization type: ",
+        String(spec.type)
+      ] });
+  }
+}
+function VisualizationRenderer({ spec }) {
+  if (!spec || !spec.type) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-3", children: [
+    (spec.title || spec.description) && /* @__PURE__ */ jsxs("div", { children: [
+      spec.title && /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: spec.title }),
+      spec.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: spec.description })
+    ] }),
+    renderContent(spec)
+  ] });
+}
+var VisualizationRenderer_default = VisualizationRenderer;
+
+export { VisualizationRenderer, VisualizationRenderer_default };
+//# sourceMappingURL=chunk-5T4FJ2SR.js.map
+//# sourceMappingURL=chunk-5T4FJ2SR.js.map