@timbal-ai/timbal-react 0.8.2 → 1.1.0

package/dist/{chunk-5ZKLPWVN.esm.js → chunk-YXZ22OJN.esm.js}

@@ -3,6 +3,11 @@ import {
   AvatarFallback,
   AvatarImage,
   Button,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
   Dialog,
   DialogContent,
   DialogTitle,
@@ -18,7 +23,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
   cn
-} from "./chunk-QVAUCVQA.esm.js";
+} from "./chunk-4AKJ6FKE.esm.js";
 
 // src/chat/tooltip-icon-button.tsx
 import { forwardRef } from "react";
@@ -203,25 +208,17 @@ var ComposerAddAttachment = () => {
 };
 
 // src/charts/line-area-chart.tsx
-import { useEffect as useEffect3, useId, useMemo, useState as useState3 } from "react";
-
-// src/charts/use-chart-width.ts
-import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
-function useChartWidth(initial = 640) {
-  const ref = useRef(null);
-  const [width, setWidth] = useState2(initial);
-  useEffect2(() => {
-    const el = ref.current;
-    if (!el || typeof ResizeObserver === "undefined") return;
-    const ro = new ResizeObserver((entries) => {
-      const w = entries[0]?.contentRect.width;
-      if (w && w > 0) setWidth(w);
-    });
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, []);
-  return { ref, width };
-}
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  XAxis,
+  YAxis
+} from "recharts";
 
 // src/charts/geometry.ts
 function toNum(value) {
@@ -293,27 +290,6 @@ function monotoneTangents(points) {
   }
   return tangents;
 }
-function niceTicks(min, max, count = 4) {
-  if (!Number.isFinite(min) || !Number.isFinite(max) || max === min) {
-    return [min || 0];
-  }
-  const step = niceStep((max - min) / count);
-  const start = Math.floor(min / step) * step;
-  const out = [];
-  for (let v = start; v <= max + step / 2; v += step) {
-    out.push(round(v));
-  }
-  return out;
-}
-function niceStep(raw) {
-  const exp = Math.floor(Math.log10(Math.abs(raw) || 1));
-  const base = Math.pow(10, exp);
-  const norm = raw / base;
-  let nice = 1;
-  if (norm >= 5) nice = 5;
-  else if (norm >= 2) nice = 2;
-  return nice * base;
-}
 function round(v) {
   return Math.round(v * 1e6) / 1e6;
 }
@@ -327,17 +303,15 @@ function formatCompact(value, unit) {
 }
 
 // src/charts/line-area-chart.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var CHART_PALETTE = [
-  "var(--primary, #6366f1)",
-  "#10b981",
-  "#f59e0b",
-  "#06b6d4",
-  "#a855f7",
-  "#ef4444"
+  "var(--chart-1, #6366f1)",
+  "var(--chart-2, #10b981)",
+  "var(--chart-3, #f59e0b)",
+  "var(--chart-4, #a855f7)",
+  "var(--chart-5, #ef4444)",
+  "var(--chart-6, #06b6d4)"
 ];
-var PAD_DEFAULT = { top: 12, right: 16, bottom: 26, left: 44 };
-var PAD_FLUSH = { top: 20, right: 0, bottom: 8, left: 0 };
 var LineAreaChart = ({
   data = [],
   xKey: xKeyProp,
@@ -346,308 +320,222 @@ var LineAreaChart = ({
   height = 240,
   unit,
   yMax,
+  curve = "monotone",
+  stacked = false,
+  dots = false,
+  orientation = "vertical",
+  barRadius = 4,
+  gridLines,
   layout = "default",
   showGrid = true,
   showXAxis: showXAxisProp,
   showYAxis: showYAxisProp,
   showLegend: showLegendProp,
   showTooltip = true,
+  tooltipIndicator = "dot",
   formatValue,
   formatX,
   className,
   ariaLabel = "Chart"
 }) => {
-  const uid = useId();
-  const { ref, width } = useChartWidth();
-  const [active, setActive] = useState3(null);
-  const [grown, setGrown] = useState3(false);
   const xKey = xKeyProp ?? inferXKey(data);
-  const series = useMemo(
-    () => resolveSeries(seriesProp, data, xKey),
-    [seriesProp, data, xKey]
-  );
-  const pad = layout === "flush" ? PAD_FLUSH : PAD_DEFAULT;
-  const showXAxis = showXAxisProp ?? layout !== "flush";
-  const showYAxis = showYAxisProp ?? layout !== "flush";
-  const showLegend = showLegendProp ?? (layout !== "flush" && series.length > 1);
-  useEffect3(() => {
-    const t = requestAnimationFrame(() => setGrown(true));
-    return () => cancelAnimationFrame(t);
-  }, []);
-  const innerW = Math.max(0, width - pad.left - pad.right);
-  const innerH = Math.max(0, height - pad.top - pad.bottom);
-  const { minV, maxV } = useMemo(() => {
-    let lo = 0;
-    let hi = yMax ?? 0;
-    for (const s of series) {
-      for (const d of data) {
-        const v = toNum(d[s.dataKey]);
-        if (v > hi && yMax == null) hi = v;
-        if (v < lo) lo = v;
-      }
-    }
-    if (hi === lo) hi = lo + 1;
-    return { minV: lo, maxV: yMax != null ? yMax : hi * 1.08 };
-  }, [series, data, yMax]);
-  const ticks = useMemo(() => niceTicks(minV, maxV, 4), [minV, maxV]);
+  const series = resolveSeries(seriesProp, data, xKey);
+  const flush = layout === "flush";
+  const horizontal = orientation === "horizontal" && variant === "bar";
+  const showXAxis = showXAxisProp ?? !flush;
+  const showYAxis = showYAxisProp ?? !flush;
+  const showLegend = showLegendProp ?? (!flush && series.length > 1);
+  const grid = gridLines ?? (horizontal ? "vertical" : "horizontal");
   if (data.length === 0 || series.length === 0) {
-    return /* @__PURE__ */ jsx3(ChartEmpty, { className, height });
-  }
-  const yScale = (v) => pad.top + innerH - (v - minV) / (maxV - minV || 1) * innerH;
-  const xCount = data.length;
-  const xStep = xCount > 1 ? innerW / (xCount - 1) : innerW;
-  const xPos = (i) => variant === "bar" ? pad.left + innerW * (i + 0.5) / xCount : pad.left + i * xStep;
-  const baseY = yScale(Math.max(0, minV));
-  const fmtV = (v) => formatValue ? formatValue(v) : formatCompact(v, unit);
-  const fmtX = (i) => formatX ? formatX(data[i]?.[xKey], i) : String(data[i]?.[xKey] ?? i);
-  const onMove = (event) => {
-    const rect = event.currentTarget.getBoundingClientRect();
-    const px = event.clientX - rect.left - pad.left;
-    const i = Math.round(px / (xStep || 1));
-    setActive(Math.max(0, Math.min(xCount - 1, i)));
-  };
-  const labelIdx = pickXLabels(xCount, innerW);
-  return /* @__PURE__ */ jsxs3("div", { ref, className: cn("relative w-full", className), style: { height }, children: [
-    /* @__PURE__ */ jsxs3(
-      "svg",
+    return /* @__PURE__ */ jsx3(ChartEmpty, { className, height, ariaLabel });
+  }
+  const config = {};
+  series.forEach((s, i) => {
+    config[s.dataKey] = {
+      label: s.label ?? s.dataKey,
+      color: s.color ?? CHART_PALETTE[i % CHART_PALETTE.length]
+    };
+  });
+  const valueFmt = (v) => formatValue ? formatValue(toNum(v)) : formatCompact(toNum(v), unit);
+  const xFmt = (v, i) => formatX ? formatX(v, i) : String(v ?? "");
+  const margin = flush ? { top: 8, right: 4, bottom: 0, left: 0 } : { top: 8, right: 12, bottom: 0, left: 0 };
+  const showVGrid = showGrid && (grid === "vertical" || grid === "both");
+  const showHGrid = showGrid && (grid === "horizontal" || grid === "both");
+  const tooltipEl = showTooltip ? /* @__PURE__ */ jsx3(
+    ChartTooltip,
+    {
+      cursor: variant === "bar",
+      content: /* @__PURE__ */ jsx3(ChartTooltipContent, { indicator: tooltipIndicator })
+    }
+  ) : null;
+  const legendEl = showLegend ? /* @__PURE__ */ jsx3(ChartLegend, { content: /* @__PURE__ */ jsx3(ChartLegendContent, {}) }) : null;
+  const gridEl = showGrid && grid !== "none" ? /* @__PURE__ */ jsx3(CartesianGrid, { vertical: showVGrid, horizontal: showHGrid, strokeDasharray: "4 4" }) : null;
+  const yDomain = yMax != null ? [0, yMax] : void 0;
+  if (variant === "bar") {
+    const bars = series.map((s) => /* @__PURE__ */ jsx3(
+      Bar,
       {
-        width,
-        height,
-        role: "img",
-        "aria-label": ariaLabel,
-        className: "block overflow-visible",
-        children: [
-          /* @__PURE__ */ jsxs3("defs", { children: [
-            /* @__PURE__ */ jsx3("clipPath", { id: `${uid}-grow`, children: /* @__PURE__ */ jsx3(
-              "rect",
-              {
-                x: pad.left,
-                y: 0,
-                height,
-                width: grown ? innerW : 0,
-                style: { transition: "width 900ms cubic-bezier(0.22,1,0.36,1)" }
-              }
-            ) }),
-            /* @__PURE__ */ jsxs3("linearGradient", { id: `${uid}-gridfade`, x1: "0%", x2: "100%", y1: "0", y2: "0", children: [
-              /* @__PURE__ */ jsx3("stop", { offset: "0%", stopColor: "white", stopOpacity: 0 }),
-              /* @__PURE__ */ jsx3("stop", { offset: "8%", stopColor: "white", stopOpacity: 1 }),
-              /* @__PURE__ */ jsx3("stop", { offset: "92%", stopColor: "white", stopOpacity: 1 }),
-              /* @__PURE__ */ jsx3("stop", { offset: "100%", stopColor: "white", stopOpacity: 0 })
-            ] }),
-            /* @__PURE__ */ jsx3("mask", { id: `${uid}-gridmask`, children: /* @__PURE__ */ jsx3(
-              "rect",
-              {
-                x: pad.left,
-                y: pad.top,
-                width: innerW,
-                height: innerH,
-                fill: `url(#${uid}-gridfade)`
-              }
-            ) }),
-            series.map((s, i) => {
-              const color = s.color ?? CHART_PALETTE[i % CHART_PALETTE.length];
-              return /* @__PURE__ */ jsxs3(
-                "linearGradient",
-                {
-                  id: `${uid}-fill-${i}`,
-                  x1: "0",
-                  x2: "0",
-                  y1: "0",
-                  y2: "1",
-                  children: [
-                    /* @__PURE__ */ jsx3("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.28 } }),
-                    /* @__PURE__ */ jsx3("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
-                  ]
-                },
-                s.dataKey
-              );
-            })
-          ] }),
-          showGrid && /* @__PURE__ */ jsx3("g", { mask: `url(#${uid}-gridmask)`, children: ticks.map((t, i) => /* @__PURE__ */ jsx3(
-            "line",
-            {
-              x1: pad.left,
-              x2: width - pad.right,
-              y1: yScale(t),
-              y2: yScale(t),
-              stroke: "currentColor",
-              strokeOpacity: 0.14,
-              strokeDasharray: "4 4",
-              className: "text-muted-foreground"
-            },
-            i
-          )) }),
-          showYAxis && ticks.map((t, i) => /* @__PURE__ */ jsx3(
-            "text",
-            {
-              x: pad.left - 8,
-              y: yScale(t),
-              textAnchor: "end",
-              dominantBaseline: "middle",
-              className: "fill-muted-foreground text-[10px] tabular-nums",
-              children: fmtV(t)
-            },
-            i
-          )),
-          showXAxis && labelIdx.map((i) => /* @__PURE__ */ jsx3(
-            "text",
-            {
-              x: xPos(i),
-              y: height - pad.bottom + 16,
-              textAnchor: i === 0 ? "start" : i === xCount - 1 ? "end" : "middle",
-              className: "fill-muted-foreground text-[10px] tabular-nums",
-              children: fmtX(i)
-            },
-            i
-          )),
-          /* @__PURE__ */ jsx3("g", { clipPath: `url(#${uid}-grow)`, children: variant === "bar" ? renderBars({ data, series, xCount, xPos, yScale, baseY, innerW, uid }) : series.map((s, si) => {
-            const color = s.color ?? CHART_PALETTE[si % CHART_PALETTE.length];
-            const pts = data.map((d, i) => ({
-              x: xPos(i),
-              y: yScale(toNum(d[s.dataKey]))
-            }));
-            return /* @__PURE__ */ jsxs3("g", { children: [
-              variant === "area" && /* @__PURE__ */ jsx3("path", { d: monotoneAreaPath(pts, baseY), fill: `url(#${uid}-fill-${si})` }),
-              /* @__PURE__ */ jsx3(
-                "path",
-                {
-                  d: monotoneLinePath(pts),
-                  fill: "none",
-                  stroke: color,
-                  strokeWidth: 2,
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              )
-            ] }, s.dataKey);
-          }) }),
-          showTooltip && active != null && variant !== "bar" && /* @__PURE__ */ jsxs3("g", { pointerEvents: "none", children: [
-            /* @__PURE__ */ jsx3(
-              "line",
-              {
-                x1: xPos(active),
-                x2: xPos(active),
-                y1: pad.top,
-                y2: pad.top + innerH,
-                stroke: "currentColor",
-                strokeOpacity: 0.25,
-                className: "text-foreground"
-              }
-            ),
-            series.map((s, si) => {
-              const color = s.color ?? CHART_PALETTE[si % CHART_PALETTE.length];
-              return /* @__PURE__ */ jsx3(
-                "circle",
-                {
-                  cx: xPos(active),
-                  cy: yScale(toNum(data[active]?.[s.dataKey])),
-                  r: 4,
-                  fill: color,
-                  stroke: "var(--background, #fff)",
-                  strokeWidth: 2
-                },
-                s.dataKey
-              );
-            })
-          ] }),
-          showTooltip && /* @__PURE__ */ jsx3(
-            "rect",
-            {
-              x: pad.left,
-              y: pad.top,
-              width: innerW,
-              height: innerH,
-              fill: "transparent",
-              style: { cursor: "crosshair" },
-              onMouseMove: onMove,
-              onMouseLeave: () => setActive(null)
-            }
-          )
-        ]
+        dataKey: s.dataKey,
+        fill: `var(--color-${s.dataKey})`,
+        radius: barCornerRadius(barRadius, horizontal, stacked),
+        stackId: stacked ? "stack" : void 0,
+        isAnimationActive: true
+      },
+      s.dataKey
+    ));
+    if (horizontal) {
+      return /* @__PURE__ */ jsx3(ChartShell, { config, height, className, ariaLabel, children: /* @__PURE__ */ jsxs3(BarChart, { accessibilityLayer: true, data, layout: "vertical", margin, children: [
+        gridEl,
+        /* @__PURE__ */ jsx3(
+          XAxis,
+          {
+            type: "number",
+            hide: !showXAxis,
+            tickLine: false,
+            axisLine: false,
+            tickMargin: 8,
+            tickFormatter: (v) => valueFmt(v),
+            domain: yDomain
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          YAxis,
+          {
+            type: "category",
+            dataKey: xKey,
+            hide: !showYAxis,
+            tickLine: false,
+            axisLine: false,
+            tickMargin: 8,
+            width: showYAxis ? void 0 : 0,
+            tickFormatter: (v, i) => xFmt(v, i)
+          }
+        ),
+        tooltipEl,
+        legendEl,
+        bars
+      ] }) });
+    }
+    return /* @__PURE__ */ jsx3(ChartShell, { config, height, className, ariaLabel, children: /* @__PURE__ */ jsxs3(BarChart, { accessibilityLayer: true, data, margin, children: [
+      gridEl,
+      /* @__PURE__ */ jsx3(
+        XAxis,
+        {
+          dataKey: xKey,
+          hide: !showXAxis,
+          tickLine: false,
+          axisLine: false,
+          tickMargin: 8,
+          minTickGap: 16,
+          tickFormatter: (v, i) => xFmt(v, i)
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        YAxis,
+        {
+          hide: !showYAxis,
+          tickLine: false,
+          axisLine: false,
+          tickMargin: 8,
+          width: showYAxis ? 44 : 0,
+          tickFormatter: (v) => valueFmt(v),
+          domain: yDomain
+        }
+      ),
+      tooltipEl,
+      legendEl,
+      bars
+    ] }) });
+  }
+  const axes = /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      XAxis,
+      {
+        dataKey: xKey,
+        hide: !showXAxis,
+        tickLine: false,
+        axisLine: false,
+        tickMargin: 8,
+        minTickGap: 24,
+        tickFormatter: (v, i) => xFmt(v, i)
       }
     ),
-    showTooltip && active != null && /* @__PURE__ */ jsx3(
-      ChartTooltip,
+    /* @__PURE__ */ jsx3(
+      YAxis,
       {
-        x: xPos(active),
-        width,
-        title: fmtX(active),
-        rows: series.map((s, si) => ({
-          color: s.color ?? CHART_PALETTE[si % CHART_PALETTE.length],
-          label: s.label ?? s.dataKey,
-          value: fmtV(toNum(data[active]?.[s.dataKey]))
-        }))
+        hide: !showYAxis,
+        tickLine: false,
+        axisLine: false,
+        tickMargin: 8,
+        width: showYAxis ? 44 : 0,
+        tickFormatter: (v) => valueFmt(v),
+        domain: yDomain
       }
-    ),
-    showLegend ? /* @__PURE__ */ jsx3(ChartLegend, { series }) : null
+    )
   ] });
-};
-function renderBars(args) {
-  const { data, series, xCount, xPos, yScale, baseY, innerW } = args;
-  const groupWidth = innerW / xCount * 0.66;
-  const barWidth = groupWidth / series.length;
-  return series.flatMap(
-    (s, si) => data.map((d, i) => {
-      const color = s.color ?? CHART_PALETTE[si % CHART_PALETTE.length];
-      const y = yScale(toNum(d[s.dataKey]));
-      const x = xPos(i) - groupWidth / 2 + si * barWidth;
-      const top = Math.min(y, baseY);
-      const h = Math.max(1, Math.abs(y - baseY));
-      return /* @__PURE__ */ jsx3(
-        "rect",
+  if (variant === "area") {
+    return /* @__PURE__ */ jsx3(ChartShell, { config, height, className, ariaLabel, children: /* @__PURE__ */ jsxs3(AreaChart, { accessibilityLayer: true, data, margin, children: [
+      /* @__PURE__ */ jsx3("defs", { children: series.map((s) => /* @__PURE__ */ jsxs3("linearGradient", { id: `fill-${s.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx3("stop", { offset: "5%", stopColor: `var(--color-${s.dataKey})`, stopOpacity: 0.3 }),
+        /* @__PURE__ */ jsx3("stop", { offset: "95%", stopColor: `var(--color-${s.dataKey})`, stopOpacity: 0.04 })
+      ] }, s.dataKey)) }),
+      gridEl,
+      axes,
+      tooltipEl,
+      legendEl,
+      series.map((s) => /* @__PURE__ */ jsx3(
+        Area,
         {
-          x,
-          y: top,
-          width: Math.max(1, barWidth - 2),
-          height: h,
-          rx: 3,
-          fill: color
+          dataKey: s.dataKey,
+          type: curve,
+          stackId: stacked ? "stack" : void 0,
+          stroke: `var(--color-${s.dataKey})`,
+          strokeWidth: 2,
+          fill: `url(#fill-${s.dataKey})`,
+          dot: dots === true ? { r: 3 } : false,
+          activeDot: { r: 4 },
+          isAnimationActive: true
         },
-        `${s.dataKey}-${i}`
-      );
-    })
-  );
-}
-var ChartTooltip = ({ x, width, title, rows }) => {
-  const flip = x > width - 160;
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      className: "pointer-events-none absolute top-2 z-10 min-w-[8rem] rounded-lg border border-border bg-popover/95 px-2.5 py-2 text-popover-foreground shadow-card-elevated backdrop-blur-sm",
-      style: {
-        left: flip ? void 0 : Math.min(x + 12, width - 8),
-        right: flip ? Math.max(width - x + 12, 8) : void 0
+        s.dataKey
+      ))
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx3(ChartShell, { config, height, className, ariaLabel, children: /* @__PURE__ */ jsxs3(LineChart, { accessibilityLayer: true, data, margin, children: [
+    gridEl,
+    axes,
+    tooltipEl,
+    legendEl,
+    series.map((s) => /* @__PURE__ */ jsx3(
+      Line,
+      {
+        dataKey: s.dataKey,
+        type: curve,
+        stroke: `var(--color-${s.dataKey})`,
+        strokeWidth: 2,
+        dot: dots === true ? { r: 3 } : false,
+        activeDot: { r: 4 },
+        isAnimationActive: true
       },
-      children: [
-        /* @__PURE__ */ jsx3("div", { className: "mb-1.5 text-[11px] text-muted-foreground", children: title }),
-        /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-1", children: rows.map((r) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsx3(
-              "span",
-              {
-                className: "inline-block size-2 rounded-full",
-                style: { background: r.color }
-              }
-            ),
-            r.label
-          ] }),
-          /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium tabular-nums text-foreground", children: r.value })
-        ] }, r.label)) })
-      ]
-    }
-  );
+      s.dataKey
+    ))
+  ] }) });
 };
-var ChartLegend = ({ series }) => /* @__PURE__ */ jsx3("div", { className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 pl-10 text-xs text-muted-foreground", children: series.map((s, i) => /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1.5", children: [
-  /* @__PURE__ */ jsx3(
-    "span",
-    {
-      className: "inline-block size-2 rounded-sm",
-      style: { background: s.color ?? CHART_PALETTE[i % CHART_PALETTE.length] }
-    }
-  ),
-  s.label ?? s.dataKey
-] }, s.dataKey)) });
-var ChartEmpty = ({ className, height }) => /* @__PURE__ */ jsx3(
+var ChartShell = ({ config, height, className, ariaLabel, children }) => /* @__PURE__ */ jsx3(
+  ChartContainer,
+  {
+    config,
+    role: "img",
+    "aria-label": ariaLabel,
+    className: cn("aspect-auto w-full", className),
+    style: { height },
+    children
+  }
+);
+var ChartEmpty = ({
+  className,
+  height,
+  ariaLabel
+}) => /* @__PURE__ */ jsx3(
   "div",
   {
     className: cn(
@@ -655,9 +543,15 @@ var ChartEmpty = ({ className, height }) => /* @__PURE__ */ jsx3(
       className
     ),
     style: { height },
+    role: "img",
+    "aria-label": ariaLabel,
     children: "No data yet"
   }
 );
+function barCornerRadius(r, horizontal, stacked) {
+  if (stacked) return r;
+  return horizontal ? [0, r, r, 0] : [r, r, 0, 0];
+}
 function inferXKey(data) {
   if (data.length === 0) return "x";
   for (const k of Object.keys(data[0])) {
@@ -672,21 +566,316 @@ function resolveSeries(seriesProp, data, xKey) {
   if (data.length === 0) return [];
   return Object.keys(data[0]).filter((k) => k !== xKey && typeof data[0][k] === "number").map((dataKey) => ({ dataKey }));
 }
-function pickXLabels(count, innerW) {
-  if (count <= 1) return [0];
-  const maxLabels = Math.max(2, Math.min(count, Math.floor(innerW / 64) + 1));
-  if (maxLabels >= count) return Array.from({ length: count }, (_, i) => i);
-  const out = /* @__PURE__ */ new Set([0, count - 1]);
-  const step = (count - 1) / (maxLabels - 1);
-  for (let i = 1; i < maxLabels - 1; i++) out.add(Math.round(i * step));
-  return [...out].sort((a, b) => a - b);
+
+// src/charts/pie-chart.tsx
+import { Cell, Label, Pie, PieChart as RePieChart } from "recharts";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var PieChart = ({
+  data,
+  nameKey: nameKeyProp,
+  dataKey = "value",
+  innerRadius = 0,
+  colors,
+  height = 260,
+  showLegend = true,
+  showLabels = false,
+  showTooltip = true,
+  tooltipIndicator = "dot",
+  centerValue,
+  centerLabel,
+  className,
+  ariaLabel = "Pie chart"
+}) => {
+  const nameKey = nameKeyProp ?? inferNameKey(data, dataKey);
+  const palette = colors ?? CHART_PALETTE;
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx4(PieEmpty, { className, height, ariaLabel });
+  }
+  const slices = data.map((d, i) => ({
+    name: String(d[nameKey] ?? i),
+    value: toNum(d[dataKey]),
+    fill: palette[i % palette.length]
+  }));
+  const config = {};
+  for (const s of slices) config[s.name] = { label: s.name };
+  const innerPct = innerRadius > 0 ? `${Math.round(innerRadius * 75)}%` : 0;
+  const hasCenter = innerRadius > 0 && (centerValue != null || centerLabel != null);
+  return /* @__PURE__ */ jsx4(
+    ChartContainer,
+    {
+      config,
+      role: "img",
+      "aria-label": ariaLabel,
+      className: cn("aspect-auto w-full", className),
+      style: { height },
+      children: /* @__PURE__ */ jsxs4(RePieChart, { children: [
+        showTooltip && /* @__PURE__ */ jsx4(
+          ChartTooltip,
+          {
+            content: /* @__PURE__ */ jsx4(ChartTooltipContent, { nameKey: "name", indicator: tooltipIndicator, hideLabel: true })
+          }
+        ),
+        /* @__PURE__ */ jsxs4(
+          Pie,
+          {
+            data: slices,
+            dataKey: "value",
+            nameKey: "name",
+            innerRadius: innerPct,
+            outerRadius: "75%",
+            paddingAngle: innerRadius > 0 ? 2 : 0,
+            strokeWidth: 2,
+            label: showLabels,
+            isAnimationActive: true,
+            children: [
+              slices.map((s) => /* @__PURE__ */ jsx4(Cell, { fill: s.fill }, s.name)),
+              hasCenter && /* @__PURE__ */ jsx4(
+                Label,
+                {
+                  content: ({ viewBox }) => {
+                    if (!viewBox || !("cx" in viewBox)) return null;
+                    const { cx, cy } = viewBox;
+                    return /* @__PURE__ */ jsxs4("text", { x: cx, y: cy, textAnchor: "middle", dominantBaseline: "middle", children: [
+                      centerValue != null && /* @__PURE__ */ jsx4("tspan", { x: cx, y: cy - 2, className: "fill-foreground text-2xl tabular-nums", children: centerValue }),
+                      centerLabel != null && /* @__PURE__ */ jsx4("tspan", { x: cx, y: cy + 18, className: "fill-muted-foreground text-[11px]", children: centerLabel })
+                    ] });
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsx4(ChartLegend, { content: /* @__PURE__ */ jsx4(ChartLegendContent, { nameKey: "name" }) })
+      ] })
+    }
+  );
+};
+var PieEmpty = ({
+  className,
+  height,
+  ariaLabel
+}) => /* @__PURE__ */ jsx4(
+  "div",
+  {
+    className: cn("flex w-full items-center justify-center text-xs text-muted-foreground", className),
+    style: { height },
+    role: "img",
+    "aria-label": ariaLabel,
+    children: "No data yet"
+  }
+);
+function inferNameKey(data, dataKey) {
+  if (data.length === 0) return "name";
+  for (const k of Object.keys(data[0])) {
+    if (k !== dataKey && typeof data[0][k] !== "number") return k;
+  }
+  return Object.keys(data[0]).find((k) => k !== dataKey) ?? "name";
+}
+
+// src/charts/radial-chart.tsx
+import {
+  Cell as Cell2,
+  Label as Label2,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  RadialBar,
+  RadialBarChart
+} from "recharts";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var RadialChart = ({
+  data,
+  nameKey: nameKeyProp,
+  dataKey = "value",
+  maxValue,
+  colors,
+  height = 260,
+  ringWidth = 16,
+  ringGap = 4,
+  showLegend = true,
+  centerValue,
+  centerLabel,
+  className,
+  ariaLabel = "Radial chart"
+}) => {
+  const nameKey = nameKeyProp ?? inferNameKey2(data, dataKey);
+  const palette = colors ?? CHART_PALETTE;
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx5(RadialEmpty, { className, height, ariaLabel });
+  }
+  const rows = data.map((d, i) => ({
+    name: String(d[nameKey] ?? i),
+    value: toNum(d[dataKey]),
+    fill: palette[i % palette.length]
+  }));
+  const max = maxValue ?? Math.max(...rows.map((r) => r.value), 1);
+  const config = {};
+  for (const r of rows) config[r.name] = { label: r.name };
+  const hasCenter = centerValue != null || centerLabel != null;
+  return /* @__PURE__ */ jsxs5("div", { className: cn("flex w-full flex-col items-center gap-3", className), children: [
+    /* @__PURE__ */ jsx5(
+      ChartContainer,
+      {
+        config,
+        role: "img",
+        "aria-label": ariaLabel,
+        className: "aspect-auto w-full",
+        style: { height: height - (showLegend ? 32 : 0) },
+        children: /* @__PURE__ */ jsxs5(
+          RadialBarChart,
+          {
+            data: rows,
+            startAngle: 90,
+            endAngle: -270,
+            innerRadius: "30%",
+            outerRadius: "100%",
+            barSize: ringWidth,
+            barGap: ringGap,
+            children: [
+              /* @__PURE__ */ jsx5(PolarAngleAxis, { type: "number", domain: [0, max], tick: false, axisLine: false }),
+              /* @__PURE__ */ jsx5(ChartTooltip, { content: /* @__PURE__ */ jsx5(ChartTooltipContent, { nameKey: "name", hideLabel: true }) }),
+              /* @__PURE__ */ jsx5(RadialBar, { dataKey: "value", background: true, cornerRadius: ringWidth / 2, isAnimationActive: true, children: rows.map((r) => /* @__PURE__ */ jsx5(Cell2, { fill: r.fill }, r.name)) }),
+              hasCenter && /* @__PURE__ */ jsx5(PolarRadiusAxis, { tick: false, tickLine: false, axisLine: false, children: /* @__PURE__ */ jsx5(
+                Label2,
+                {
+                  content: ({ viewBox }) => {
+                    if (!viewBox || !("cx" in viewBox)) return null;
+                    const { cx, cy } = viewBox;
+                    return /* @__PURE__ */ jsxs5("text", { x: cx, y: cy, textAnchor: "middle", dominantBaseline: "middle", children: [
+                      centerValue != null && /* @__PURE__ */ jsx5("tspan", { x: cx, y: cy - 2, className: "fill-foreground text-2xl tabular-nums", children: centerValue }),
+                      centerLabel != null && /* @__PURE__ */ jsx5("tspan", { x: cx, y: cy + 18, className: "fill-muted-foreground text-[11px]", children: centerLabel })
+                    ] });
+                  }
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx5("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-muted-foreground", children: rows.map((r) => /* @__PURE__ */ jsxs5("span", { className: "inline-flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx5("span", { className: "inline-block size-2.5 rounded-[3px]", style: { background: r.fill } }),
+      r.name
+    ] }, r.name)) })
+  ] });
+};
+var RadialEmpty = ({
+  className,
+  height,
+  ariaLabel
+}) => /* @__PURE__ */ jsx5(
+  "div",
+  {
+    className: cn("flex w-full items-center justify-center text-xs text-muted-foreground", className),
+    style: { height },
+    role: "img",
+    "aria-label": ariaLabel,
+    children: "No data yet"
+  }
+);
+function inferNameKey2(data, dataKey) {
+  if (data.length === 0) return "name";
+  for (const k of Object.keys(data[0])) {
+    if (k !== dataKey && typeof data[0][k] !== "number") return k;
+  }
+  return Object.keys(data[0]).find((k) => k !== dataKey) ?? "name";
+}
+
+// src/charts/radar-chart.tsx
+import {
+  PolarAngleAxis as PolarAngleAxis2,
+  PolarGrid,
+  Radar,
+  RadarChart as ReRadarChart
+} from "recharts";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var RadarChart = ({
+  data,
+  nameKey: nameKeyProp,
+  series: seriesProp,
+  maxValue,
+  height = 280,
+  showLegend = true,
+  fill = true,
+  className,
+  ariaLabel = "Radar chart"
+}) => {
+  const nameKey = nameKeyProp ?? inferNameKey3(data);
+  const series = resolveSeries2(seriesProp, data, nameKey);
+  if (data.length < 3 || series.length === 0) {
+    return /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: cn("flex items-center justify-center text-xs text-muted-foreground", className),
+        style: { height },
+        role: "img",
+        "aria-label": ariaLabel,
+        children: "Radar needs at least 3 axes"
+      }
+    );
+  }
+  const config = {};
+  series.forEach((s, i) => {
+    config[s.dataKey] = {
+      label: s.label ?? s.dataKey,
+      color: s.color ?? CHART_PALETTE[i % CHART_PALETTE.length]
+    };
+  });
+  return /* @__PURE__ */ jsx6(
+    ChartContainer,
+    {
+      config,
+      role: "img",
+      "aria-label": ariaLabel,
+      className: cn("mx-auto aspect-square", className),
+      style: { height },
+      children: /* @__PURE__ */ jsxs6(ReRadarChart, { data, outerRadius: "70%", children: [
+        /* @__PURE__ */ jsx6(ChartTooltip, { content: /* @__PURE__ */ jsx6(ChartTooltipContent, { indicator: "line" }) }),
+        /* @__PURE__ */ jsx6(PolarGrid, {}),
+        /* @__PURE__ */ jsx6(
+          PolarAngleAxis2,
+          {
+            dataKey: nameKey,
+            tick: { fontSize: 10, fill: "var(--color-muted-foreground)" }
+          }
+        ),
+        series.map((s) => /* @__PURE__ */ jsx6(
+          Radar,
+          {
+            dataKey: s.dataKey,
+            stroke: `var(--color-${s.dataKey})`,
+            fill: `var(--color-${s.dataKey})`,
+            fillOpacity: fill ? 0.18 : 0,
+            strokeWidth: 2,
+            dot: { r: 2.5, fillOpacity: 1 },
+            isAnimationActive: true
+          },
+          s.dataKey
+        )),
+        showLegend && series.length > 1 && /* @__PURE__ */ jsx6(ChartLegend, { content: /* @__PURE__ */ jsx6(ChartLegendContent, {}) })
+      ] })
+    }
+  );
+};
+function inferNameKey3(data) {
+  if (data.length === 0) return "name";
+  for (const k of Object.keys(data[0])) {
+    if (typeof data[0][k] !== "number") return k;
+  }
+  return Object.keys(data[0])[0] ?? "name";
+}
+function resolveSeries2(seriesProp, data, nameKey) {
+  if (seriesProp && seriesProp.length > 0) {
+    return seriesProp.map((s) => typeof s === "string" ? { dataKey: s } : s);
+  }
+  if (data.length === 0) return [];
+  return Object.keys(data[0]).filter((k) => k !== nameKey && typeof data[0][k] === "number").map((dataKey) => ({ dataKey }));
 }
 
 // src/artifacts/artifact-card.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var ArtifactCard = ({ title, kind, className, bodyClassName, toolbar, children }) => {
   const hasHeader = Boolean(title || toolbar);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: cn(
@@ -695,30 +884,30 @@ var ArtifactCard = ({ title, kind, className, bodyClassName, toolbar, children }
       ),
       "data-artifact-kind": kind,
       children: [
-        hasHeader && /* @__PURE__ */ jsxs4("div", { className: "aui-artifact-header flex items-center gap-2 border-b border-border/40 bg-muted/30 px-3 py-1.5", children: [
-          title && /* @__PURE__ */ jsx4("span", { className: "aui-artifact-title flex-1 truncate text-xs font-semibold text-foreground/80", children: title }),
-          !title && /* @__PURE__ */ jsx4("span", { className: "flex-1" }),
+        hasHeader && /* @__PURE__ */ jsxs7("div", { className: "aui-artifact-header flex items-center gap-2 border-b border-border/40 bg-muted/30 px-3 py-1.5", children: [
+          title && /* @__PURE__ */ jsx7("span", { className: "aui-artifact-title flex-1 truncate text-xs font-semibold text-foreground/80", children: title }),
+          !title && /* @__PURE__ */ jsx7("span", { className: "flex-1" }),
           toolbar
         ] }),
-        /* @__PURE__ */ jsx4("div", { className: cn("aui-artifact-body", bodyClassName), children })
+        /* @__PURE__ */ jsx7("div", { className: cn("aui-artifact-body", bodyClassName), children })
       ]
     }
   );
 };
 
 // src/artifacts/chart-artifact.tsx
-import { useMemo as useMemo2 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var ChartArtifactView = ({
   artifact,
   embedded = false,
   height = 300
 }) => {
-  const plot = /* @__PURE__ */ jsx5(ChartArtifactPlot, { artifact, height });
+  const plot = /* @__PURE__ */ jsx8(ChartArtifactPlot, { artifact, height });
   if (embedded) {
-    return /* @__PURE__ */ jsx5("div", { className: "aui-artifact-chart w-full", children: plot });
+    return /* @__PURE__ */ jsx8("div", { className: "aui-artifact-chart w-full", children: plot });
   }
-  return /* @__PURE__ */ jsx5(ArtifactCard, { title: artifact.title, kind: "chart", children: /* @__PURE__ */ jsx5("div", { className: "aui-artifact-chart pt-2", children: plot }) });
+  return /* @__PURE__ */ jsx8(ArtifactCard, { title: artifact.title, kind: "chart", children: /* @__PURE__ */ jsx8("div", { className: "aui-artifact-chart pt-2", children: plot }) });
 };
 function ChartArtifactPlot({
   artifact,
@@ -726,14 +915,58 @@ function ChartArtifactPlot({
 }) {
   const { chartType = "bar", data = [] } = artifact;
   const xKey = artifact.xKey ?? inferXKey2(data);
-  const series = useMemo2(() => {
+  const series = useMemo(() => {
+    if (artifact.series && artifact.series.length > 0) {
+      return artifact.series.map((s) => ({
+        dataKey: s.dataKey,
+        label: s.label,
+        color: s.color
+      }));
+    }
     const keys = Array.isArray(artifact.dataKey) ? artifact.dataKey : typeof artifact.dataKey === "string" ? [artifact.dataKey] : inferDataKeys(data, xKey);
-    return keys.map((dataKey) => ({ dataKey }));
-  }, [artifact.dataKey, data, xKey]);
-  if (chartType === "pie") {
-    return /* @__PURE__ */ jsx5("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ jsx5(PieChart, { data, xKey, dataKey: series[0]?.dataKey ?? "value" }) });
+    const colors = artifact.colors;
+    return keys.map((dataKey, i) => ({
+      dataKey,
+      color: colors?.[i]
+    }));
+  }, [artifact.series, artifact.dataKey, artifact.colors, data, xKey]);
+  const aria = typeof artifact.title === "string" ? artifact.title : "Chart";
+  if (chartType === "pie" || chartType === "donut") {
+    const total = data.reduce((sum, d) => sum + toNum(d[series[0]?.dataKey ?? "value"]), 0);
+    return /* @__PURE__ */ jsx8("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ jsx8(
+      PieChart,
+      {
+        data,
+        nameKey: xKey,
+        dataKey: series[0]?.dataKey ?? "value",
+        innerRadius: chartType === "donut" ? 0.6 : 0,
+        colors: artifact.colors,
+        height,
+        unit: artifact.unit,
+        centerValue: chartType === "donut" ? formatCompact(total, artifact.unit) : void 0,
+        centerLabel: chartType === "donut" ? "Total" : void 0,
+        ariaLabel: aria
+      }
+    ) });
+  }
+  if (chartType === "radial") {
+    return /* @__PURE__ */ jsx8("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ jsx8(
+      RadialChart,
+      {
+        data,
+        nameKey: xKey,
+        dataKey: series[0]?.dataKey ?? "value",
+        colors: artifact.colors,
+        height,
+        ariaLabel: aria
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsx5(
+  if (chartType === "radar") {
+    return /* @__PURE__ */ jsx8("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ jsx8(RadarChart, { data, nameKey: xKey, series, height, ariaLabel: aria }) });
+  }
+  const horizontal = chartType === "horizontalBar";
+  return /* @__PURE__ */ jsx8(
     LineAreaChart,
     {
       data,
@@ -742,71 +975,19 @@ function ChartArtifactPlot({
       layout: "flush",
       height,
       variant: chartType === "line" ? "line" : chartType === "area" ? "area" : "bar",
+      orientation: horizontal ? "horizontal" : "vertical",
+      stacked: artifact.stacked,
+      curve: artifact.curve,
+      dots: artifact.dots,
+      tooltipIndicator: artifact.tooltipIndicator,
+      showXAxis: true,
+      showYAxis: horizontal,
+      showLegend: artifact.legend ?? series.length > 1,
       unit: artifact.unit,
-      ariaLabel: typeof artifact.title === "string" ? artifact.title : "Chart"
+      ariaLabel: aria
     }
   );
 }
-var PIE_W = 320;
-var PIE_H = 220;
-var PieChart = ({ data, xKey, dataKey }) => {
-  if (data.length === 0) {
-    return /* @__PURE__ */ jsx5("div", { className: "flex h-32 items-center justify-center text-xs text-muted-foreground", children: "No data" });
-  }
-  const cx = PIE_W / 2;
-  const cy = PIE_H / 2;
-  const r = Math.min(PIE_W, PIE_H) / 2 - 16;
-  const total = data.reduce((sum, d) => sum + toNum(d[dataKey]), 0) || 1;
-  let acc = 0;
-  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center gap-3", children: [
-    /* @__PURE__ */ jsx5(
-      "svg",
-      {
-        viewBox: `0 0 ${PIE_W} ${PIE_H}`,
-        className: "w-full max-w-[20rem]",
-        role: "img",
-        "aria-label": "Pie chart",
-        children: data.map((d, i) => {
-          const value = toNum(d[dataKey]);
-          const start = acc / total * Math.PI * 2;
-          acc += value;
-          const end = acc / total * Math.PI * 2;
-          return /* @__PURE__ */ jsx5(
-            PieSlice,
-            {
-              cx,
-              cy,
-              r,
-              start,
-              end,
-              color: CHART_PALETTE[i % CHART_PALETTE.length]
-            },
-            i
-          );
-        })
-      }
-    ),
-    /* @__PURE__ */ jsx5("div", { className: "flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: data.map((d, i) => /* @__PURE__ */ jsxs5("span", { className: "inline-flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx5(
-        "span",
-        {
-          className: "inline-block size-2 rounded-sm",
-          style: { background: CHART_PALETTE[i % CHART_PALETTE.length] }
-        }
-      ),
-      String(d[xKey] ?? i)
-    ] }, i)) })
-  ] });
-};
-var PieSlice = ({ cx, cy, r, start, end, color }) => {
-  const x1 = cx + Math.sin(start) * r;
-  const y1 = cy - Math.cos(start) * r;
-  const x2 = cx + Math.sin(end) * r;
-  const y2 = cy - Math.cos(end) * r;
-  const large = end - start > Math.PI ? 1 : 0;
-  const path = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`;
-  return /* @__PURE__ */ jsx5("path", { d: path, fill: color, stroke: "var(--background, #fff)", strokeWidth: 1.5 });
-};
 function inferXKey2(data) {
   if (data.length === 0) return "x";
   for (const k of Object.keys(data[0])) {
@@ -822,7 +1003,7 @@ function inferDataKeys(data, xKey) {
 }
 
 // src/artifacts/question-artifact.tsx
-import { useCallback, useState as useState4 } from "react";
+import { useCallback, useState as useState2 } from "react";
 import { useThreadRuntime } from "@assistant-ui/react";
 import { CheckIcon } from "lucide-react";
 
@@ -938,12 +1119,12 @@ var studioQuestionOptionSelectedClass = cn(
 );
 
 // src/artifacts/question-artifact.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function optionKey(option, index) {
   const id = option.id?.trim();
   return id ? id : `__option-${index}`;
 }
-var OptionRadio = ({ selected }) => /* @__PURE__ */ jsx6(
+var OptionRadio = ({ selected }) => /* @__PURE__ */ jsx9(
   "span",
   {
     className: cn(
@@ -951,15 +1132,15 @@ var OptionRadio = ({ selected }) => /* @__PURE__ */ jsx6(
       selected ? "border-foreground bg-foreground text-background" : "border-border bg-background"
     ),
     "aria-hidden": true,
-    children: selected ? /* @__PURE__ */ jsx6(CheckIcon, { className: "size-2.5 stroke-[3]" }) : null
+    children: selected ? /* @__PURE__ */ jsx9(CheckIcon, { className: "size-2.5 stroke-[3]" }) : null
   }
 );
 var QuestionArtifactView = ({
   artifact
 }) => {
   const runtime = useThreadRuntime();
-  const [selected, setSelected] = useState4([]);
-  const [submittedIds, setSubmittedIds] = useState4(null);
+  const [selected, setSelected] = useState2([]);
+  const [submittedIds, setSubmittedIds] = useState2(null);
   const isMulti = artifact.multi === true;
   const isDisabled = submittedIds !== null;
   const send = useCallback(
@@ -990,12 +1171,12 @@ var QuestionArtifactView = ({
   const onConfirm = useCallback(() => {
     send(selected);
   }, [selected, send]);
-  return /* @__PURE__ */ jsx6("div", { className: studioArtifactShellClass, "data-artifact-kind": "question", children: /* @__PURE__ */ jsxs6("div", { className: "px-2.5 py-2", children: [
-    artifact.prompt ? /* @__PURE__ */ jsx6("p", { className: "mb-2 text-sm font-normal leading-snug text-foreground", children: artifact.prompt }) : null,
-    /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-0.5", role: "list", children: artifact.options.map((option, index) => {
+  return /* @__PURE__ */ jsx9("div", { className: studioArtifactShellClass, "data-artifact-kind": "question", children: /* @__PURE__ */ jsxs8("div", { className: "px-2.5 py-2", children: [
+    artifact.prompt ? /* @__PURE__ */ jsx9("p", { className: "mb-2 text-sm font-normal leading-snug text-foreground", children: artifact.prompt }) : null,
+    /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-0.5", role: "list", children: artifact.options.map((option, index) => {
       const key = optionKey(option, index);
       const isSelected = submittedIds ? submittedIds.includes(key) : isMulti && selected.includes(key);
-      return /* @__PURE__ */ jsxs6(
+      return /* @__PURE__ */ jsxs8(
         "button",
         {
           type: "button",
@@ -1007,17 +1188,17 @@ var QuestionArtifactView = ({
             isDisabled && (isSelected ? "cursor-default" : "cursor-not-allowed opacity-50")
           ),
           children: [
-            /* @__PURE__ */ jsx6(OptionRadio, { selected: isSelected }),
-            /* @__PURE__ */ jsxs6("span", { className: "min-w-0 flex-1 text-left", children: [
-              /* @__PURE__ */ jsx6("span", { className: "block font-normal text-foreground", children: option.label }),
-              option.description ? /* @__PURE__ */ jsx6("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: option.description }) : null
+            /* @__PURE__ */ jsx9(OptionRadio, { selected: isSelected }),
+            /* @__PURE__ */ jsxs8("span", { className: "min-w-0 flex-1 text-left", children: [
+              /* @__PURE__ */ jsx9("span", { className: "block font-normal text-foreground", children: option.label }),
+              option.description ? /* @__PURE__ */ jsx9("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: option.description }) : null
             ] })
           ]
         },
         key
       );
     }) }),
-    isMulti && !submittedIds ? /* @__PURE__ */ jsx6("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ jsx6(
+    isMulti && !submittedIds ? /* @__PURE__ */ jsx9("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ jsx9(
       TimbalV2Button,
       {
         type: "button",
@@ -1032,12 +1213,12 @@ var QuestionArtifactView = ({
 };
 
 // src/artifacts/html-artifact.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var HtmlArtifactView = ({ artifact }) => {
   const sandboxed = artifact.sandboxed !== false;
   const sandbox = sandboxed ? "allow-scripts allow-same-origin allow-forms allow-modals allow-popups allow-pointer-lock" : void 0;
   const height = artifact.height ?? "320px";
-  return /* @__PURE__ */ jsx7(ArtifactCard, { title: artifact.title, kind: "html", children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx10(ArtifactCard, { title: artifact.title, kind: "html", children: /* @__PURE__ */ jsx10(
     "iframe",
     {
       title: artifact.title ?? "HTML artifact",
@@ -1050,7 +1231,7 @@ var HtmlArtifactView = ({ artifact }) => {
 };
 
 // src/artifacts/json-artifact.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var JsonArtifactView = ({
   artifact
 }) => {
@@ -1062,16 +1243,16 @@ var JsonArtifactView = ({
   } catch {
     body = String(data);
   }
-  return /* @__PURE__ */ jsx8(ArtifactCard, { title, kind: "json", children: /* @__PURE__ */ jsx8("pre", { className: "aui-artifact-json m-0 max-h-[420px] overflow-auto p-3 font-mono text-[12px] leading-relaxed text-foreground/85", children: body }) });
+  return /* @__PURE__ */ jsx11(ArtifactCard, { title, kind: "json", children: /* @__PURE__ */ jsx11("pre", { className: "aui-artifact-json m-0 max-h-[420px] overflow-auto p-3 font-mono text-[12px] leading-relaxed text-foreground/85", children: body }) });
 };
 
 // src/artifacts/table-artifact.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var TableArtifactView = ({ artifact }) => {
   const rows = artifact.rows ?? [];
   const columns = artifact.columns ?? deriveColumns(rows);
-  return /* @__PURE__ */ jsx9(ArtifactCard, { title: artifact.title, kind: "table", children: /* @__PURE__ */ jsx9("div", { className: "aui-artifact-table-wrap overflow-x-auto", children: /* @__PURE__ */ jsxs7("table", { className: "aui-artifact-table w-full border-collapse text-sm", children: [
-    /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsx9("tr", { className: "border-b border-border/40 bg-muted/20", children: columns.map((col) => /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx12(ArtifactCard, { title: artifact.title, kind: "table", children: /* @__PURE__ */ jsx12("div", { className: "aui-artifact-table-wrap overflow-x-auto", children: /* @__PURE__ */ jsxs9("table", { className: "aui-artifact-table w-full border-collapse text-sm", children: [
+    /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsx12("tr", { className: "border-b border-border/40 bg-muted/20", children: columns.map((col) => /* @__PURE__ */ jsx12(
       "th",
       {
         className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground",
@@ -1079,11 +1260,11 @@ var TableArtifactView = ({ artifact }) => {
       },
       col.key
     )) }) }),
-    /* @__PURE__ */ jsx9("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx12("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx12(
       "tr",
       {
         className: "border-b border-border/30 transition-colors last:border-b-0 hover:bg-muted/20",
-        children: columns.map((col) => /* @__PURE__ */ jsx9(
+        children: columns.map((col) => /* @__PURE__ */ jsx12(
           "td",
           {
             className: "px-3 py-2 align-top text-foreground/85",
@@ -1170,11 +1351,11 @@ import {
   createContext,
   useContext
 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var UiStateContext = createContext({});
 var UiDispatchContext = createContext(() => {
 });
-var UiStateProvider = ({ state, dispatch, children }) => /* @__PURE__ */ jsx10(UiStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx10(UiDispatchContext.Provider, { value: dispatch, children }) });
+var UiStateProvider = ({ state, dispatch, children }) => /* @__PURE__ */ jsx13(UiStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx13(UiDispatchContext.Provider, { value: dispatch, children }) });
 function useUiState() {
   return useContext(UiStateContext);
 }
@@ -1184,12 +1365,12 @@ function useUiDispatch() {
 var UiEventContext = createContext(
   null
 );
-var UiEventProvider = ({ onEvent, children }) => /* @__PURE__ */ jsx10(UiEventContext.Provider, { value: onEvent, children });
+var UiEventProvider = ({ onEvent, children }) => /* @__PURE__ */ jsx13(UiEventContext.Provider, { value: onEvent, children });
 function useUiEventEmitter() {
   return useContext(UiEventContext);
 }
 var UiCustomNodeRegistryContext = createContext({});
-var UiCustomNodeRegistryProvider = ({ renderers, children }) => /* @__PURE__ */ jsx10(UiCustomNodeRegistryContext.Provider, { value: renderers, children });
+var UiCustomNodeRegistryProvider = ({ renderers, children }) => /* @__PURE__ */ jsx13(UiCustomNodeRegistryContext.Provider, { value: renderers, children });
 function useUiCustomNodeRegistry() {
   return useContext(UiCustomNodeRegistryContext);
 }
@@ -1198,29 +1379,29 @@ function useUiCustomNodeRegistry() {
 import { useCallback as useCallback2 } from "react";
 import { motion } from "motion/react";
 import { useThreadRuntime as useThreadRuntime2 } from "@assistant-ui/react";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var UiNodeView = ({ node }) => {
   switch (node.kind) {
     case "box":
-      return /* @__PURE__ */ jsx11(BoxNode, { node });
+      return /* @__PURE__ */ jsx14(BoxNode, { node });
     case "text":
-      return /* @__PURE__ */ jsx11(TextNode, { node });
+      return /* @__PURE__ */ jsx14(TextNode, { node });
     case "heading":
-      return /* @__PURE__ */ jsx11(HeadingNode, { node });
+      return /* @__PURE__ */ jsx14(HeadingNode, { node });
     case "badge":
-      return /* @__PURE__ */ jsx11(BadgeNode, { node });
+      return /* @__PURE__ */ jsx14(BadgeNode, { node });
     case "button":
-      return /* @__PURE__ */ jsx11(ButtonNode, { node });
+      return /* @__PURE__ */ jsx14(ButtonNode, { node });
     case "toggle":
-      return /* @__PURE__ */ jsx11(ToggleNode, { node });
+      return /* @__PURE__ */ jsx14(ToggleNode, { node });
     case "slider":
-      return /* @__PURE__ */ jsx11(SliderNode, { node });
+      return /* @__PURE__ */ jsx14(SliderNode, { node });
     case "tooltip":
-      return /* @__PURE__ */ jsx11(TooltipNode, { node });
+      return /* @__PURE__ */ jsx14(TooltipNode, { node });
     case "draggable":
-      return /* @__PURE__ */ jsx11(DraggableNode, { node });
+      return /* @__PURE__ */ jsx14(DraggableNode, { node });
     case "custom":
-      return /* @__PURE__ */ jsx11(CustomNode, { node });
+      return /* @__PURE__ */ jsx14(CustomNode, { node });
     default:
       return null;
   }
@@ -1280,7 +1461,7 @@ var JUSTIFY_CLS = {
 };
 var BoxNode = ({ node }) => {
   const dir = node.direction ?? "col";
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       className: cn(
@@ -1295,7 +1476,7 @@ var BoxNode = ({ node }) => {
         gap: node.gap !== void 0 ? `${node.gap * 0.25}rem` : void 0,
         padding: node.padding !== void 0 ? `${node.padding * 0.25}rem` : void 0
       },
-      children: node.children?.map((child, i) => /* @__PURE__ */ jsx11(UiNodeView, { node: child }, child.id ?? i))
+      children: node.children?.map((child, i) => /* @__PURE__ */ jsx14(UiNodeView, { node: child }, child.id ?? i))
     }
   );
 };
@@ -1314,7 +1495,7 @@ var TEXT_WEIGHT = {
 var TextNode = ({ node }) => {
   const state = useUiState();
   const value = resolveBindable(node.value, state);
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14(
     "span",
     {
       className: cn(
@@ -1345,13 +1526,13 @@ var HeadingNode = ({ node }) => {
   );
   switch (level) {
     case 1:
-      return /* @__PURE__ */ jsx11("h1", { className: cls, children: value });
+      return /* @__PURE__ */ jsx14("h1", { className: cls, children: value });
     case 2:
-      return /* @__PURE__ */ jsx11("h2", { className: cls, children: value });
+      return /* @__PURE__ */ jsx14("h2", { className: cls, children: value });
     case 3:
-      return /* @__PURE__ */ jsx11("h3", { className: cls, children: value });
+      return /* @__PURE__ */ jsx14("h3", { className: cls, children: value });
     case 4:
-      return /* @__PURE__ */ jsx11("h4", { className: cls, children: value });
+      return /* @__PURE__ */ jsx14("h4", { className: cls, children: value });
   }
 };
 var BADGE_TONE = {
@@ -1364,7 +1545,7 @@ var BADGE_TONE = {
 var BadgeNode = ({ node }) => {
   const state = useUiState();
   const value = String(resolveBindable(node.value, state) ?? "");
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14(
     "span",
     {
       className: cn(
@@ -1381,7 +1562,7 @@ var ButtonNode = ({ node }) => {
   const run = useActionRunner();
   const label = String(resolveBindable(node.label, state) ?? "");
   const disabled = node.disabled !== void 0 ? Boolean(resolveBindable(node.disabled, state)) : false;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14(
     Button,
     {
       variant: node.variant ?? "default",
@@ -1403,7 +1584,7 @@ var ToggleNode = ({ node }) => {
     dispatch({ type: "toggle", path: node.binding });
     run(node.onChange);
   };
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs10(
     "label",
     {
       className: cn(
@@ -1411,7 +1592,7 @@ var ToggleNode = ({ node }) => {
         node.className
       ),
       children: [
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx14(
           "button",
           {
             type: "button",
@@ -1422,7 +1603,7 @@ var ToggleNode = ({ node }) => {
               "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-[background,box-shadow,border-color] duration-200",
               value ? "border-foreground/15 bg-gradient-to-b from-primary-fill-from to-primary-fill-to shadow-card" : cn(TIMBAL_V2_SWITCH_TRACK_OFF, "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to")
             ),
-            children: /* @__PURE__ */ jsx11(
+            children: /* @__PURE__ */ jsx14(
               "span",
               {
                 className: cn(
@@ -1435,7 +1616,7 @@ var ToggleNode = ({ node }) => {
             )
           }
         ),
-        label && /* @__PURE__ */ jsx11("span", { className: "text-foreground/85", children: label })
+        label && /* @__PURE__ */ jsx14("span", { className: "text-foreground/85", children: label })
       ]
     }
   );
@@ -1455,12 +1636,12 @@ var SliderNode = ({ node }) => {
     const next = Number(e.target.value);
     dispatch({ type: "set", path: node.binding, value: next });
   };
-  return /* @__PURE__ */ jsxs8("div", { className: cn("aui-ui-slider flex flex-col gap-1", node.className), children: [
-    (label || showValue) && /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
-      label && /* @__PURE__ */ jsx11("span", { children: label }),
-      showValue && /* @__PURE__ */ jsx11("span", { className: "font-mono", children: value })
+  return /* @__PURE__ */ jsxs10("div", { className: cn("aui-ui-slider flex flex-col gap-1", node.className), children: [
+    (label || showValue) && /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+      label && /* @__PURE__ */ jsx14("span", { children: label }),
+      showValue && /* @__PURE__ */ jsx14("span", { className: "font-mono", children: value })
     ] }),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx14(
       "input",
       {
         type: "range",
@@ -1482,9 +1663,9 @@ var SliderNode = ({ node }) => {
 var TooltipNode = ({ node }) => {
   const state = useUiState();
   const content = String(resolveBindable(node.content, state) ?? "");
-  return /* @__PURE__ */ jsx11(TooltipProvider, { children: /* @__PURE__ */ jsxs8(Tooltip, { children: [
-    /* @__PURE__ */ jsx11(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx11("span", { className: cn("aui-ui-tooltip-trigger inline-flex", node.className), children: /* @__PURE__ */ jsx11(UiNodeView, { node: node.child }) }) }),
-    /* @__PURE__ */ jsx11(TooltipContent, { side: node.side ?? "top", children: content })
+  return /* @__PURE__ */ jsx14(TooltipProvider, { children: /* @__PURE__ */ jsxs10(Tooltip, { children: [
+    /* @__PURE__ */ jsx14(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx14("span", { className: cn("aui-ui-tooltip-trigger inline-flex", node.className), children: /* @__PURE__ */ jsx14(UiNodeView, { node: node.child }) }) }),
+    /* @__PURE__ */ jsx14(TooltipContent, { side: node.side ?? "top", children: content })
   ] }) });
 };
 var DraggableNode = ({ node }) => {
@@ -1492,7 +1673,7 @@ var DraggableNode = ({ node }) => {
   const snapBack = node.snapBack ?? true;
   const axis = node.axis ?? "both";
   const dragProp = axis === "both" ? true : axis;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14(
     motion.div,
     {
       drag: dragProp,
@@ -1504,7 +1685,7 @@ var DraggableNode = ({ node }) => {
         "aui-ui-draggable inline-block cursor-grab touch-none",
         node.className
       ),
-      children: /* @__PURE__ */ jsx11(UiNodeView, { node: node.child })
+      children: /* @__PURE__ */ jsx14(UiNodeView, { node: node.child })
     }
   );
 };
@@ -1514,8 +1695,8 @@ var CustomNode = ({ node }) => {
   const Renderer = registry[node.name];
   if (!Renderer) return null;
   const resolvedProps = resolveProps(node.props ?? {}, state);
-  const children = node.children?.map((child, i) => /* @__PURE__ */ jsx11(UiNodeView, { node: child }, child.id ?? i));
-  return /* @__PURE__ */ jsx11(Renderer, { props: resolvedProps, children });
+  const children = node.children?.map((child, i) => /* @__PURE__ */ jsx14(UiNodeView, { node: child }, child.id ?? i));
+  return /* @__PURE__ */ jsx14(Renderer, { props: resolvedProps, children });
 };
 function resolveProps(props, state) {
   const out = {};
@@ -1527,18 +1708,18 @@ function resolveProps(props, state) {
 
 // src/artifacts/ui/ui-artifact.tsx
 import { useReducer } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var UiArtifactView = ({ artifact }) => {
   const [state, dispatch] = useReducer(
     uiStateReducer,
     artifact.initialState ?? {}
   );
-  return /* @__PURE__ */ jsx12(ArtifactCard, { title: artifact.title, kind: "ui", children: /* @__PURE__ */ jsx12(UiStateProvider, { state, dispatch, children: /* @__PURE__ */ jsx12("div", { className: "aui-ui-root p-3", children: /* @__PURE__ */ jsx12(UiNodeView, { node: artifact.root }) }) }) });
+  return /* @__PURE__ */ jsx15(ArtifactCard, { title: artifact.title, kind: "ui", children: /* @__PURE__ */ jsx15(UiStateProvider, { state, dispatch, children: /* @__PURE__ */ jsx15("div", { className: "aui-ui-root p-3", children: /* @__PURE__ */ jsx15(UiNodeView, { node: artifact.root }) }) }) });
 };
 
 // src/artifacts/registry.tsx
-import { createContext as createContext2, useContext as useContext2, useMemo as useMemo3 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var defaultArtifactRenderers = {
   chart: ChartArtifactView,
   question: QuestionArtifactView,
@@ -1551,12 +1732,12 @@ var ArtifactRegistryContext = createContext2(
   defaultArtifactRenderers
 );
 var ArtifactRegistryProvider = ({ renderers, override, children }) => {
-  const merged = useMemo3(() => {
+  const merged = useMemo2(() => {
     if (!renderers) return defaultArtifactRenderers;
     if (override) return renderers;
     return { ...defaultArtifactRenderers, ...renderers };
   }, [renderers, override]);
-  return /* @__PURE__ */ jsx13(ArtifactRegistryContext.Provider, { value: merged, children });
+  return /* @__PURE__ */ jsx16(ArtifactRegistryContext.Provider, { value: merged, children });
 };
 function useArtifactRegistry() {
   return useContext2(ArtifactRegistryContext);
@@ -1565,7 +1746,7 @@ var ArtifactView = ({ artifact }) => {
   const registry = useArtifactRegistry();
   const Renderer = registry[artifact.type] ?? registry.json;
   if (!Renderer) return null;
-  return /* @__PURE__ */ jsx13(Renderer, { artifact });
+  return /* @__PURE__ */ jsx16(Renderer, { artifact });
 };
 
 // src/artifacts/types.ts
@@ -1677,11 +1858,11 @@ import {
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
-import { memo, useState as useState6 } from "react";
+import { memo, useState as useState4 } from "react";
 import { CheckIcon as CheckIcon2, CopyIcon } from "lucide-react";
 
 // src/chat/syntax-highlighter.tsx
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 import { createHighlighterCore } from "shiki/core";
 import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
 import langJavascript from "shiki/langs/javascript.mjs";
@@ -1703,7 +1884,7 @@ import langC from "shiki/langs/c.mjs";
 import langCpp from "shiki/langs/cpp.mjs";
 import themeVitesseDark from "shiki/themes/vitesse-dark.mjs";
 import themeVitesseLight from "shiki/themes/vitesse-light.mjs";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var SHIKI_THEME_DARK = "vitesse-dark";
 var SHIKI_THEME_LIGHT = "vitesse-light";
 var highlighterPromise = null;
@@ -1741,8 +1922,8 @@ var ShikiSyntaxHighlighter = ({
   language,
   code
 }) => {
-  const [html, setHtml] = useState5(null);
-  useEffect4(() => {
+  const [html, setHtml] = useState3(null);
+  useEffect2(() => {
     let cancelled = false;
     (async () => {
       try {
@@ -1772,13 +1953,13 @@ var ShikiSyntaxHighlighter = ({
     try {
       const parsed = JSON.parse(code);
       if (isArtifact(parsed)) {
-        return /* @__PURE__ */ jsx14(ArtifactView, { artifact: parsed });
+        return /* @__PURE__ */ jsx17(ArtifactView, { artifact: parsed });
       }
     } catch {
     }
   }
   if (html) {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx17(
       "div",
       {
         className: "shiki-wrapper [&>pre]:!m-0 [&>pre]:!rounded-t-none [&>pre]:!rounded-b-lg [&>pre]:!border [&>pre]:!border-t-0 [&>pre]:!border-border/50 [&>pre]:!p-3 [&>pre]:!text-xs [&>pre]:!leading-relaxed [&>pre]:overflow-x-auto",
@@ -1786,14 +1967,14 @@ var ShikiSyntaxHighlighter = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx14(Pre, { children: /* @__PURE__ */ jsx14(Code2, { children: code }) });
+  return /* @__PURE__ */ jsx17(Pre, { children: /* @__PURE__ */ jsx17(Code2, { children: code }) });
 };
 var syntax_highlighter_default = ShikiSyntaxHighlighter;
 
 // src/chat/markdown-text.tsx
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var MarkdownTextImpl = () => {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx18(
     MarkdownTextPrimitive,
     {
       remarkPlugins: [remarkGfm, remarkMath],
@@ -1814,20 +1995,20 @@ var CodeHeader = ({ language, code }) => {
     if (!code || isCopied) return;
     copyToClipboard(code);
   };
-  return /* @__PURE__ */ jsxs9("div", { className: "aui-code-header flex items-center justify-between rounded-t-lg border border-b-0 border-border/50 bg-code-header-bg px-4 py-2", children: [
-    /* @__PURE__ */ jsxs9("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase", children: [
-      /* @__PURE__ */ jsx15("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40" }),
+  return /* @__PURE__ */ jsxs11("div", { className: "aui-code-header flex items-center justify-between rounded-t-lg border border-b-0 border-border/50 bg-code-header-bg px-4 py-2", children: [
+    /* @__PURE__ */ jsxs11("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase", children: [
+      /* @__PURE__ */ jsx18("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40" }),
       language
     ] }),
-    /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsxs11(
       TooltipIconButton,
       {
         tooltip: isCopied ? "Copied!" : "Copy",
         onClick: onCopy,
         className: "transition-colors hover:text-foreground",
         children: [
-          !isCopied && /* @__PURE__ */ jsx15(CopyIcon, { className: "h-3.5 w-3.5" }),
-          isCopied && /* @__PURE__ */ jsx15(CheckIcon2, { className: "h-3.5 w-3.5 text-emerald-500" })
+          !isCopied && /* @__PURE__ */ jsx18(CopyIcon, { className: "h-3.5 w-3.5" }),
+          isCopied && /* @__PURE__ */ jsx18(CheckIcon2, { className: "h-3.5 w-3.5 text-emerald-500" })
         ]
       }
     )
@@ -1836,7 +2017,7 @@ var CodeHeader = ({ language, code }) => {
 var useCopyToClipboard = ({
   copiedDuration = 3e3
 } = {}) => {
-  const [isCopied, setIsCopied] = useState6(false);
+  const [isCopied, setIsCopied] = useState4(false);
   const copyToClipboard = (value) => {
     if (!value) return;
     navigator.clipboard.writeText(value).then(() => {
@@ -1847,7 +2028,7 @@ var useCopyToClipboard = ({
   return { isCopied, copyToClipboard };
 };
 var defaultComponents = memoizeMarkdownComponents({
-  h1: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  h1: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "h1",
     {
       className: cn(
@@ -1857,7 +2038,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  h2: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  h2: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "h2",
     {
       className: cn(
@@ -1867,7 +2048,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  h3: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  h3: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "h3",
     {
       className: cn(
@@ -1877,7 +2058,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  h4: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  h4: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "h4",
     {
       className: cn(
@@ -1887,7 +2068,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  h5: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  h5: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "h5",
     {
       className: cn(
@@ -1897,7 +2078,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  h6: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  h6: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "h6",
     {
       className: cn(
@@ -1907,7 +2088,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  p: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  p: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "p",
     {
       className: cn(
@@ -1917,7 +2098,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  a: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  a: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "a",
     {
       className: cn(
@@ -1929,7 +2110,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  blockquote: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  blockquote: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "blockquote",
     {
       className: cn(
@@ -1939,7 +2120,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  ul: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  ul: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "ul",
     {
       className: cn(
@@ -1949,7 +2130,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  ol: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  ol: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "ol",
     {
       className: cn(
@@ -1959,7 +2140,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  hr: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  hr: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "hr",
     {
       className: cn(
@@ -1969,14 +2150,14 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  table: ({ className, ...props }) => /* @__PURE__ */ jsx15("div", { className: "my-4 w-full overflow-x-auto rounded-lg border border-border/50", children: /* @__PURE__ */ jsx15(
+  table: ({ className, ...props }) => /* @__PURE__ */ jsx18("div", { className: "my-4 w-full overflow-x-auto rounded-lg border border-border/50", children: /* @__PURE__ */ jsx18(
     "table",
     {
       className: cn("aui-md-table w-full border-collapse text-sm", className),
       ...props
     }
   ) }),
-  th: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  th: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "th",
     {
       className: cn(
@@ -1986,7 +2167,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  td: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  td: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "td",
     {
       className: cn(
@@ -1996,7 +2177,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  tr: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  tr: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "tr",
     {
       className: cn(
@@ -2006,8 +2187,8 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  li: ({ className, ...props }) => /* @__PURE__ */ jsx15("li", { className: cn("aui-md-li leading-[1.7]", className), ...props }),
-  sup: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  li: ({ className, ...props }) => /* @__PURE__ */ jsx18("li", { className: cn("aui-md-li leading-[1.7]", className), ...props }),
+  sup: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "sup",
     {
       className: cn(
@@ -2017,7 +2198,7 @@ var defaultComponents = memoizeMarkdownComponents({
       ...props
     }
   ),
-  pre: ({ className, ...props }) => /* @__PURE__ */ jsx15(
+  pre: ({ className, ...props }) => /* @__PURE__ */ jsx18(
     "pre",
     {
       className: cn(
@@ -2029,7 +2210,7 @@ var defaultComponents = memoizeMarkdownComponents({
   ),
   code: function Code({ className, ...props }) {
     const isCodeBlock = useIsMarkdownCodeBlock();
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx18(
       "code",
       {
         className: cn(
@@ -2040,8 +2221,8 @@ var defaultComponents = memoizeMarkdownComponents({
       }
     );
   },
-  strong: ({ className, ...props }) => /* @__PURE__ */ jsx15("strong", { className: cn("font-semibold text-foreground", className), ...props }),
-  em: ({ className, ...props }) => /* @__PURE__ */ jsx15("em", { className: cn("italic", className), ...props }),
+  strong: ({ className, ...props }) => /* @__PURE__ */ jsx18("strong", { className: cn("font-semibold text-foreground", className), ...props }),
+  em: ({ className, ...props }) => /* @__PURE__ */ jsx18("em", { className: cn("italic", className), ...props }),
   CodeHeader
 });
 
@@ -2237,10 +2418,10 @@ import {
   createContext as createContext4,
   useCallback as useCallback3,
   useContext as useContext4,
-  useEffect as useEffect5,
-  useMemo as useMemo4,
-  useRef as useRef2,
-  useState as useState7
+  useEffect as useEffect3,
+  useMemo as useMemo3,
+  useRef,
+  useState as useState5
 } from "react";
 import {
   useExternalStoreRuntime,
@@ -2594,20 +2775,20 @@ function buildPromptBody({
 
 // src/runtime/attachments-context.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var TimbalAttachmentsEnabledContext = createContext3(false);
 function TimbalAttachmentsEnabledProvider({
   enabled,
   children
 }) {
-  return /* @__PURE__ */ jsx16(TimbalAttachmentsEnabledContext.Provider, { value: enabled, children });
+  return /* @__PURE__ */ jsx19(TimbalAttachmentsEnabledContext.Provider, { value: enabled, children });
 }
 function useTimbalAttachmentsEnabled() {
   return useContext3(TimbalAttachmentsEnabledContext);
 }
 
 // src/runtime/provider.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function projectAttachment(attachment) {
   const filename = attachment.name ?? "attachment";
   const mimeType = attachment.contentType ?? "application/octet-stream";
@@ -2672,19 +2853,19 @@ function useTimbalStream({
   fetch: fetchFn,
   debug = false
 }) {
-  const [messages, setMessages] = useState7([]);
-  const [isRunning, setIsRunning] = useState7(false);
-  const abortRef = useRef2(null);
-  const messagesRef = useRef2([]);
-  const fetchFnRef = useRef2(fetchFn ?? authFetch);
-  useEffect5(() => {
+  const [messages, setMessages] = useState5([]);
+  const [isRunning, setIsRunning] = useState5(false);
+  const abortRef = useRef(null);
+  const messagesRef = useRef([]);
+  const fetchFnRef = useRef(fetchFn ?? authFetch);
+  useEffect3(() => {
     fetchFnRef.current = fetchFn ?? authFetch;
   }, [fetchFn]);
-  const debugRef = useRef2(debug);
-  useEffect5(() => {
+  const debugRef = useRef(debug);
+  useEffect3(() => {
     debugRef.current = debug;
   }, [debug]);
-  useEffect5(() => {
+  useEffect3(() => {
     messagesRef.current = messages;
   }, [messages]);
   const streamAssistantResponse = useCallback3(
@@ -2833,7 +3014,7 @@ function useTimbalStream({
     abortRef.current?.abort();
     setMessages([]);
   }, []);
-  return useMemo4(
+  return useMemo3(
     () => ({ messages, isRunning, send, reload, cancel, clear }),
     [messages, isRunning, send, reload, cancel, clear]
   );
@@ -2870,7 +3051,7 @@ function TimbalRuntimeProvider({
     fetch: fetchFn,
     debug
   });
-  const attachmentAdapter = useMemo4(
+  const attachmentAdapter = useMemo3(
     () => resolveAttachmentAdapter(attachments, {
       baseUrl,
       fetch: fetchFn,
@@ -2913,7 +3094,7 @@ function TimbalRuntimeProvider({
     onCancel,
     ...attachmentAdapter ? { adapters: { attachments: attachmentAdapter } } : {}
   });
-  return /* @__PURE__ */ jsx17(TimbalStreamContext.Provider, { value: stream, children: /* @__PURE__ */ jsx17(TimbalAttachmentsEnabledProvider, { enabled: attachmentAdapter !== void 0, children: /* @__PURE__ */ jsx17(AssistantRuntimeProvider, { runtime, children }) }) });
+  return /* @__PURE__ */ jsx20(TimbalStreamContext.Provider, { value: stream, children: /* @__PURE__ */ jsx20(TimbalAttachmentsEnabledProvider, { enabled: attachmentAdapter !== void 0, children: /* @__PURE__ */ jsx20(AssistantRuntimeProvider, { runtime, children }) }) });
 }
 function findParentIdFromAuiParent(messages, auiParentId) {
   const idx = messages.findIndex((m) => m.id === auiParentId);
@@ -2922,7 +3103,7 @@ function findParentIdFromAuiParent(messages, auiParentId) {
 }
 
 // src/chat/tool-fallback.tsx
-import { memo as memo2, useMemo as useMemo5, useState as useState8 } from "react";
+import { memo as memo2, useMemo as useMemo4, useState as useState6 } from "react";
 import { ChevronRightIcon } from "lucide-react";
 import {
   useAuiState as useAuiState2
@@ -2930,7 +3111,7 @@ import {
 
 // src/chat/motion.tsx
 import { AnimatePresence, motion as motion2, useReducedMotion } from "motion/react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var luxuryEase = [0.16, 1, 0.3, 1];
 var TOOL_ENTER_MS = 0.78;
 var TOOL_EXIT_MS = 0.28;
@@ -2958,7 +3139,7 @@ function toolMotionState(reduced, entering, variant) {
 function ToolMotion({ children, className, motionKey }) {
   const reduced = useReducedMotion() ?? false;
   const { enter, exit } = toolPresenceTransition(reduced);
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx21(
     motion2.div,
     {
       className: cn("aui-tool-motion w-full min-w-0", className),
@@ -2981,7 +3162,7 @@ function ToolPresence({
   const reduced = useReducedMotion() ?? false;
   const { enter, exit } = toolPresenceTransition(reduced);
   const enterTransition = variant === "executing" ? { duration: reduced ? 0.3 : 0.52, ease: luxuryEase } : enter;
-  return /* @__PURE__ */ jsx18(AnimatePresence, { mode: "wait", initial: true, children: /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx21(AnimatePresence, { mode: "wait", initial: true, children: /* @__PURE__ */ jsx21(
     motion2.div,
     {
       className: cn("aui-tool-presence w-full min-w-0", className),
@@ -3003,7 +3184,7 @@ function ToolBodyPresence({
   className
 }) {
   const reduced = useReducedMotion() ?? false;
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       className: cn(
@@ -3011,7 +3192,7 @@ function ToolBodyPresence({
         open ? reduced ? "duration-200 ease-out" : "duration-[340ms] ease-[cubic-bezier(0.16,1,0.3,1)]" : reduced ? "duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]" : "duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]"
       ),
       style: { gridTemplateRows: open ? "1fr" : "0fr" },
-      children: /* @__PURE__ */ jsx18("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx18(
+      children: /* @__PURE__ */ jsx21("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx21(
         "div",
         {
           className: cn(
@@ -3027,7 +3208,7 @@ function ToolBodyPresence({
 }
 
 // src/chat/tool-fallback.tsx
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 function detectRunning({
   status,
   result,
@@ -3059,8 +3240,8 @@ function formatToolResult(result) {
     return String(result);
   }
 }
-var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__ */ jsxs10("span", { className: "inline-flex min-w-0 max-w-full items-baseline gap-1", children: [
-  action ? shimmer ? /* @__PURE__ */ jsx19(
+var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__ */ jsxs12("span", { className: "inline-flex min-w-0 max-w-full items-baseline gap-1", children: [
+  action ? shimmer ? /* @__PURE__ */ jsx22(
     Shimmer,
     {
       as: "span",
@@ -3069,10 +3250,10 @@ var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__
       spread: 2.5,
       children: action
     }
-  ) : /* @__PURE__ */ jsx19("span", { className: studioTimelineActionClass, children: action }) : null,
-  detail ? /* @__PURE__ */ jsx19("span", { className: studioTimelineDetailClass, children: detail }) : null
+  ) : /* @__PURE__ */ jsx22("span", { className: studioTimelineActionClass, children: action }) : null,
+  detail ? /* @__PURE__ */ jsx22("span", { className: studioTimelineDetailClass, children: detail }) : null
 ] });
-var TimelineHoverChevron = ({ expanded }) => /* @__PURE__ */ jsx19(
+var TimelineHoverChevron = ({ expanded }) => /* @__PURE__ */ jsx22(
   ChevronRightIcon,
   {
     className: studioTimelineChevronClass(expanded),
@@ -3080,9 +3261,9 @@ var TimelineHoverChevron = ({ expanded }) => /* @__PURE__ */ jsx19(
   }
 );
 var ToolPanel = ({ toolName, argsText, result, isError }) => {
-  const [open, setOpen] = useState8(false);
+  const [open, setOpen] = useState6(false);
   const detail = formatToolLabel(toolName);
-  const formattedArgs = useMemo5(() => {
+  const formattedArgs = useMemo4(() => {
     if (!argsText || argsText === "{}") return null;
     try {
       return JSON.stringify(JSON.parse(argsText), null, 2);
@@ -3090,17 +3271,17 @@ var ToolPanel = ({ toolName, argsText, result, isError }) => {
       return argsText;
     }
   }, [argsText]);
-  const formattedResult = useMemo5(() => {
+  const formattedResult = useMemo4(() => {
     if (result === void 0 || result === null) return null;
     return formatToolResult(result);
   }, [result]);
   const hasBody = Boolean(formattedArgs || formattedResult);
   const action = isError ? "Failed" : "Used";
   if (!hasBody) {
-    return /* @__PURE__ */ jsx19("div", { className: "aui-tool-row w-full min-w-0", children: /* @__PURE__ */ jsx19(TimelineActionLabel, { action, detail }) });
+    return /* @__PURE__ */ jsx22("div", { className: "aui-tool-row w-full min-w-0", children: /* @__PURE__ */ jsx22(TimelineActionLabel, { action, detail }) });
   }
-  return /* @__PURE__ */ jsxs10("div", { className: "aui-tool-row w-full min-w-0", children: [
-    /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs12("div", { className: "aui-tool-row w-full min-w-0", children: [
+    /* @__PURE__ */ jsx22(
       "button",
       {
         type: "button",
@@ -3108,7 +3289,7 @@ var ToolPanel = ({ toolName, argsText, result, isError }) => {
         "aria-expanded": open,
         "aria-label": `${action} ${detail}`,
         className: studioTimelineRowButtonClass,
-        children: /* @__PURE__ */ jsxs10(
+        children: /* @__PURE__ */ jsxs12(
           "span",
           {
             className: cn(
@@ -3117,37 +3298,37 @@ var ToolPanel = ({ toolName, argsText, result, isError }) => {
               "text-foreground"
             ),
             children: [
-              /* @__PURE__ */ jsx19(TimelineActionLabel, { action, detail }),
-              /* @__PURE__ */ jsx19(TimelineHoverChevron, { expanded: open })
+              /* @__PURE__ */ jsx22(TimelineActionLabel, { action, detail }),
+              /* @__PURE__ */ jsx22(TimelineHoverChevron, { expanded: open })
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ jsxs10(
+    /* @__PURE__ */ jsxs12(
       ToolBodyPresence,
       {
         open,
         className: cn(studioTimelineBodyPadClass, "gap-2"),
         children: [
-          formattedArgs ? /* @__PURE__ */ jsx19(
+          formattedArgs ? /* @__PURE__ */ jsx22(
             "div",
             {
               className: cn(
                 studioComposerIoWellClass,
                 "max-h-48 overflow-auto px-2.5 py-2"
               ),
-              children: /* @__PURE__ */ jsx19("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] font-normal leading-relaxed text-foreground", children: formattedArgs })
+              children: /* @__PURE__ */ jsx22("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] font-normal leading-relaxed text-foreground", children: formattedArgs })
             }
           ) : null,
-          formattedResult ? /* @__PURE__ */ jsx19(
+          formattedResult ? /* @__PURE__ */ jsx22(
             "div",
             {
               className: cn(
                 studioComposerIoWellClass,
                 "max-h-48 overflow-auto px-2.5 py-2"
               ),
-              children: /* @__PURE__ */ jsx19("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] font-normal leading-relaxed text-foreground", children: formattedResult })
+              children: /* @__PURE__ */ jsx22("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] font-normal leading-relaxed text-foreground", children: formattedResult })
             }
           ) : null
         ]
@@ -3164,20 +3345,20 @@ var ToolFallbackImpl = ({
   const isRunning = useToolRunning({ status, result });
   const isError = status?.type === "incomplete" && status.reason !== "cancelled";
   const presenceKey = isRunning ? "running" : isError ? "error" : "complete";
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx22(
     ToolPresence,
     {
       presenceKey,
       variant: isRunning ? "executing" : "settled",
       className: "py-0.5",
-      children: isRunning ? /* @__PURE__ */ jsx19("div", { className: "aui-tool-running", children: /* @__PURE__ */ jsx19(
+      children: isRunning ? /* @__PURE__ */ jsx22("div", { className: "aui-tool-running", children: /* @__PURE__ */ jsx22(
         TimelineActionLabel,
         {
           action: "Using",
           detail: formatToolLabel(toolName),
           shimmer: true
         }
-      ) }) : /* @__PURE__ */ jsx19(
+      ) }) : /* @__PURE__ */ jsx22(
         ToolPanel,
         {
           toolName,
@@ -3195,7 +3376,7 @@ var ToolFallback = memo2(
 ToolFallback.displayName = "ToolFallback";
 
 // src/artifacts/tool-artifact.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var ToolArtifactFallback = (props) => {
   const registry = useArtifactRegistry();
   const isRunning = useToolRunning({
@@ -3207,18 +3388,18 @@ var ToolArtifactFallback = (props) => {
     if (artifact) {
       const Renderer = registry[artifact.type];
       if (Renderer) {
-        return /* @__PURE__ */ jsx20(
+        return /* @__PURE__ */ jsx23(
           ToolMotion,
           {
             motionKey: `artifact-${artifact.type}`,
             className: "aui-tool-artifact",
-            children: /* @__PURE__ */ jsx20(Renderer, { artifact })
+            children: /* @__PURE__ */ jsx23(Renderer, { artifact })
           }
         );
       }
     }
   }
-  return /* @__PURE__ */ jsx20(ToolFallback, { ...props });
+  return /* @__PURE__ */ jsx23(ToolFallback, { ...props });
 };
 
 // src/chat/composer.tsx
@@ -3228,7 +3409,7 @@ import {
   useComposerRuntime
 } from "@assistant-ui/react";
 import { ArrowUpIcon, SquareIcon } from "lucide-react";
-import { Fragment, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 var Composer = ({
   placeholder = "Send a message...",
   showAttachments,
@@ -3239,10 +3420,10 @@ var Composer = ({
 }) => {
   const attachmentsEnabled = useTimbalAttachmentsEnabled();
   const attachUi = showAttachments !== false && attachmentsEnabled;
-  const shell = /* @__PURE__ */ jsxs11(Fragment, { children: [
-    attachUi && /* @__PURE__ */ jsx21(ComposerAttachments, {}),
-    /* @__PURE__ */ jsx21(ComposerInput, { placeholder, autoFocus: !noAutoFocus }),
-    /* @__PURE__ */ jsx21(
+  const shell = /* @__PURE__ */ jsxs13(Fragment2, { children: [
+    attachUi && /* @__PURE__ */ jsx24(ComposerAttachments, {}),
+    /* @__PURE__ */ jsx24(ComposerInput, { placeholder, autoFocus: !noAutoFocus }),
+    /* @__PURE__ */ jsx24(
       ComposerToolbar,
       {
         showAttachments: attachUi,
@@ -3251,14 +3432,14 @@ var Composer = ({
       }
     )
   ] });
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx24(
     ComposerPrimitive2.Root,
     {
       className: cn(
         "aui-composer-root relative flex w-full flex-col",
         className
       ),
-      children: attachUi ? /* @__PURE__ */ jsx21(
+      children: attachUi ? /* @__PURE__ */ jsx24(
         ComposerPrimitive2.AttachmentDropzone,
         {
           className: cn(
@@ -3267,7 +3448,7 @@ var Composer = ({
           ),
           children: shell
         }
-      ) : /* @__PURE__ */ jsx21("div", { className: studioComposeInputShellClass, children: shell })
+      ) : /* @__PURE__ */ jsx24("div", { className: studioComposeInputShellClass, children: shell })
     }
   );
 };
@@ -3287,7 +3468,7 @@ var ComposerInput = ({
     el.style.height = "auto";
     el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
   };
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx24(
     ComposerPrimitive2.Input,
     {
       placeholder,
@@ -3301,17 +3482,17 @@ var ComposerInput = ({
   );
 };
 var ComposerToolbar = ({ showAttachments, toolbar, sendTooltip }) => {
-  return /* @__PURE__ */ jsxs11("div", { className: "aui-composer-action-wrapper relative z-[1] flex items-center justify-between gap-1 bg-composer-bg px-2.5 pb-2.5", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1", children: [
-      showAttachments && /* @__PURE__ */ jsx21(ComposerAddAttachment, {}),
+  return /* @__PURE__ */ jsxs13("div", { className: "aui-composer-action-wrapper relative z-[1] flex items-center justify-between gap-1 bg-composer-bg px-2.5 pb-2.5", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", children: [
+      showAttachments && /* @__PURE__ */ jsx24(ComposerAddAttachment, {}),
       toolbar
     ] }),
-    /* @__PURE__ */ jsx21(ComposerSendOrCancel, { sendTooltip })
+    /* @__PURE__ */ jsx24(ComposerSendOrCancel, { sendTooltip })
   ] });
 };
 var ComposerSendOrCancel = ({ sendTooltip }) => {
-  return /* @__PURE__ */ jsxs11(Fragment, { children: [
-    /* @__PURE__ */ jsx21(AuiIf, { condition: (s) => !s.thread.isRunning, children: /* @__PURE__ */ jsx21(ComposerPrimitive2.Send, { asChild: true, children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs13(Fragment2, { children: [
+    /* @__PURE__ */ jsx24(AuiIf, { condition: (s) => !s.thread.isRunning, children: /* @__PURE__ */ jsx24(ComposerPrimitive2.Send, { asChild: true, children: /* @__PURE__ */ jsx24(
       TooltipIconButton,
       {
         tooltip: sendTooltip,
@@ -3319,17 +3500,17 @@ var ComposerSendOrCancel = ({ sendTooltip }) => {
         type: "submit",
         className: "aui-composer-send shrink-0 disabled:opacity-30",
         "aria-label": "Send message",
-        children: /* @__PURE__ */ jsx21(ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
+        children: /* @__PURE__ */ jsx24(ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
       }
     ) }) }),
-    /* @__PURE__ */ jsx21(AuiIf, { condition: (s) => s.thread.isRunning, children: /* @__PURE__ */ jsx21(ComposerPrimitive2.Cancel, { asChild: true, children: /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx24(AuiIf, { condition: (s) => s.thread.isRunning, children: /* @__PURE__ */ jsx24(ComposerPrimitive2.Cancel, { asChild: true, children: /* @__PURE__ */ jsx24(
       TooltipIconButton,
       {
         tooltip: "Stop generating",
         variant: "primary",
         className: "aui-composer-cancel shrink-0",
         "aria-label": "Stop generating",
-        children: /* @__PURE__ */ jsx21(SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" })
+        children: /* @__PURE__ */ jsx24(SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" })
       }
     ) }) })
   ] });
@@ -3337,20 +3518,20 @@ var ComposerSendOrCancel = ({ sendTooltip }) => {
 
 // src/chat/suggestions.tsx
 import {
-  useEffect as useEffect6,
-  useMemo as useMemo6,
-  useState as useState9
+  useEffect as useEffect4,
+  useMemo as useMemo5,
+  useState as useState7
 } from "react";
 import { useThreadRuntime as useThreadRuntime3 } from "@assistant-ui/react";
 import { ArrowUpIcon as ArrowUpIcon2 } from "lucide-react";
-import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 var Suggestions = ({
   suggestions,
   className
 }) => {
   const items = useResolvedSuggestions(suggestions);
   if (!items || items.length === 0) return null;
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       className: cn(
@@ -3359,7 +3540,7 @@ var Suggestions = ({
       ),
       role: "list",
       "aria-label": "Suggested prompts",
-      children: items.map((suggestion, i) => /* @__PURE__ */ jsx22(SuggestionRow, { suggestion }, (suggestion.prompt ?? suggestion.title) + i))
+      children: items.map((suggestion, i) => /* @__PURE__ */ jsx25(SuggestionRow, { suggestion }, (suggestion.prompt ?? suggestion.title) + i))
     }
   );
 };
@@ -3369,7 +3550,7 @@ var SuggestionRow = ({ suggestion }) => {
     const text = suggestion.prompt ?? suggestion.title;
     runtime.append({ role: "user", content: [{ type: "text", text }] });
   };
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs14(
     "button",
     {
       type: "button",
@@ -3377,20 +3558,20 @@ var SuggestionRow = ({ suggestion }) => {
       onClick,
       className: cn("aui-thread-suggestion", studioListRowButtonClass),
       children: [
-        /* @__PURE__ */ jsx22("span", { className: "aui-thread-suggestion-icon shrink-0 text-muted-foreground", children: suggestion.icon ?? /* @__PURE__ */ jsx22(ArrowUpIcon2, { className: "size-4", strokeWidth: 1.75, "aria-hidden": true }) }),
-        /* @__PURE__ */ jsxs12("span", { className: "aui-thread-suggestion-text min-w-0 flex-1 text-left", children: [
-          /* @__PURE__ */ jsx22("span", { className: "aui-thread-suggestion-text-1 block truncate text-sm font-normal text-foreground", children: suggestion.title }),
-          suggestion.description && /* @__PURE__ */ jsx22("span", { className: "aui-thread-suggestion-text-2 mt-0.5 block truncate text-xs text-muted-foreground", children: suggestion.description })
+        /* @__PURE__ */ jsx25("span", { className: "aui-thread-suggestion-icon shrink-0 text-muted-foreground", children: suggestion.icon ?? /* @__PURE__ */ jsx25(ArrowUpIcon2, { className: "size-4", strokeWidth: 1.75, "aria-hidden": true }) }),
+        /* @__PURE__ */ jsxs14("span", { className: "aui-thread-suggestion-text min-w-0 flex-1 text-left", children: [
+          /* @__PURE__ */ jsx25("span", { className: "aui-thread-suggestion-text-1 block truncate text-sm font-normal text-foreground", children: suggestion.title }),
+          suggestion.description && /* @__PURE__ */ jsx25("span", { className: "aui-thread-suggestion-text-2 mt-0.5 block truncate text-xs text-muted-foreground", children: suggestion.description })
         ] })
       ]
     }
   );
 };
 function useResolvedSuggestions(source) {
-  const [resolved, setResolved] = useState9(
+  const [resolved, setResolved] = useState7(
     () => Array.isArray(source) ? source : void 0
   );
-  useEffect6(() => {
+  useEffect4(() => {
     if (!source) {
       setResolved(void 0);
       return;
@@ -3409,11 +3590,11 @@ function useResolvedSuggestions(source) {
       cancelled = true;
     };
   }, [source]);
-  return useMemo6(() => resolved, [resolved]);
+  return useMemo5(() => resolved, [resolved]);
 }
 
 // src/chat/thread.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect5 } from "react";
 import {
   ActionBarMorePrimitive,
   ActionBarPrimitive,
@@ -3514,7 +3695,7 @@ function useThreadVariant() {
 }
 
 // src/chat/thread.tsx
-import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 var Thread = ({
   className,
   variant = "default",
@@ -3537,16 +3718,16 @@ var Thread = ({
   const EditComposerSlot = components?.EditComposer ?? EditComposer;
   const ScrollToBottomSlot = components?.ScrollToBottom ?? ThreadScrollToBottom;
   const SuggestionsSlot = components?.Suggestions ?? Suggestions;
-  useEffect7(() => {
+  useEffect5(() => {
     scheduleThemeSanityCheck();
   }, []);
-  return /* @__PURE__ */ jsx23(ThreadVariantProvider, { value: variant, children: /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26(ThreadVariantProvider, { value: variant, children: /* @__PURE__ */ jsx26(
     ArtifactRegistryProvider,
     {
       renderers: artifacts?.renderers,
       override: artifacts?.override,
-      children: /* @__PURE__ */ jsx23(UiEventProvider, { onEvent: onArtifactEvent ?? (() => {
-      }), children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx26(UiEventProvider, { onEvent: onArtifactEvent ?? (() => {
+      }), children: /* @__PURE__ */ jsx26(
         ThreadPrimitive.Root,
         {
           className: cn(
@@ -3556,7 +3737,7 @@ var Thread = ({
           ),
           style: { ["--thread-max-width"]: maxWidth },
           "data-thread-variant": variant,
-          children: /* @__PURE__ */ jsxs13(
+          children: /* @__PURE__ */ jsxs15(
             ThreadPrimitive.Viewport,
             {
               turnAnchor: "bottom",
@@ -3565,7 +3746,7 @@ var Thread = ({
                 isPanel ? "px-2 pt-2" : "px-4 pt-4"
               ),
               children: [
-                /* @__PURE__ */ jsx23(
+                /* @__PURE__ */ jsx26(
                   WelcomeSlot,
                   {
                     config: welcome,
@@ -3574,7 +3755,7 @@ var Thread = ({
                     Suggestions: SuggestionsSlot
                   }
                 ),
-                /* @__PURE__ */ jsx23(
+                /* @__PURE__ */ jsx26(
                   ThreadPrimitive.Messages,
                   {
                     components: {
@@ -3584,14 +3765,14 @@ var Thread = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx23(
+                /* @__PURE__ */ jsx26(
                   ThreadPrimitive.ViewportFooter,
                   {
                     className: cn(
                       "aui-thread-viewport-footer sticky bottom-0 z-10 mt-auto w-full isolate pt-2",
                       isPanel ? "bg-card pb-2" : "bg-background pb-4 md:pb-6"
                     ),
-                    children: /* @__PURE__ */ jsxs13(
+                    children: /* @__PURE__ */ jsxs15(
                       "div",
                       {
                         className: cn(
@@ -3599,8 +3780,8 @@ var Thread = ({
                           isPanel ? "gap-2" : "gap-4"
                         ),
                         children: [
-                          /* @__PURE__ */ jsx23(ScrollToBottomSlot, {}),
-                          /* @__PURE__ */ jsx23(ComposerSlot, { placeholder })
+                          /* @__PURE__ */ jsx26(ScrollToBottomSlot, {}),
+                          /* @__PURE__ */ jsx26(ComposerSlot, { placeholder })
                         ]
                       }
                     )
@@ -3615,13 +3796,13 @@ var Thread = ({
   ) });
 };
 var ThreadScrollToBottom = () => {
-  return /* @__PURE__ */ jsx23(ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26(ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx26(
     TooltipIconButton,
     {
       tooltip: "Scroll to bottom",
       variant: "secondary",
       className: "aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center disabled:invisible",
-      children: /* @__PURE__ */ jsx23(ArrowDownIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx26(ArrowDownIcon, { className: "size-4" })
     }
   ) });
 };
@@ -3660,8 +3841,8 @@ var ThreadWelcome = ({
   if (!isEmpty) return null;
   const defaultHeading = isPanel ? "Ask about this page" : "How can I help you today?";
   const defaultSubheading = isPanel ? "The assistant can use dashboard context from your app." : "Send a message to start a conversation.";
-  return /* @__PURE__ */ jsxs13("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: [
-    /* @__PURE__ */ jsx23("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: [
+    /* @__PURE__ */ jsx26("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ jsxs15(
       motion3.div,
       {
         className: cn(
@@ -3672,8 +3853,8 @@ var ThreadWelcome = ({
         initial: "initial",
         animate: "animate",
         children: [
-          config?.icon && /* @__PURE__ */ jsx23(motion3.div, { variants: welcomeIcon, className: isPanel ? "mb-3" : "mb-5", children: config.icon }),
-          /* @__PURE__ */ jsx23(
+          config?.icon && /* @__PURE__ */ jsx26(motion3.div, { variants: welcomeIcon, className: isPanel ? "mb-3" : "mb-5", children: config.icon }),
+          /* @__PURE__ */ jsx26(
             motion3.h1,
             {
               variants: welcomeItem,
@@ -3684,7 +3865,7 @@ var ThreadWelcome = ({
               children: config?.heading ?? defaultHeading
             }
           ),
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx26(
             motion3.p,
             {
               variants: welcomeItem,
@@ -3695,15 +3876,15 @@ var ThreadWelcome = ({
         ]
       }
     ) }),
-    showWelcomeSuggestions && suggestions ? /* @__PURE__ */ jsx23("div", { className: "aui-thread-welcome-suggestions mx-auto w-full max-w-(--thread-max-width) px-2", children: /* @__PURE__ */ jsx23(SuggestionsSlot, { suggestions }) }) : null
+    showWelcomeSuggestions && suggestions ? /* @__PURE__ */ jsx26("div", { className: "aui-thread-welcome-suggestions mx-auto w-full max-w-(--thread-max-width) px-2", children: /* @__PURE__ */ jsx26(SuggestionsSlot, { suggestions }) }) : null
   ] });
 };
 var MessageError = () => {
-  return /* @__PURE__ */ jsx23(MessagePrimitive2.Error, { children: /* @__PURE__ */ jsx23(ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm", children: /* @__PURE__ */ jsx23(ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
+  return /* @__PURE__ */ jsx26(MessagePrimitive2.Error, { children: /* @__PURE__ */ jsx26(ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm", children: /* @__PURE__ */ jsx26(ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
 };
 var AssistantMessage = () => {
   const isPanel = useThreadVariant() === "panel";
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(
     MessagePrimitive2.Root,
     {
       className: cn(
@@ -3712,7 +3893,7 @@ var AssistantMessage = () => {
       ),
       "data-role": "assistant",
       children: [
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs15(
           "div",
           {
             className: cn(
@@ -3720,7 +3901,7 @@ var AssistantMessage = () => {
               isPanel ? "px-1 text-sm" : "px-2"
             ),
             children: [
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx26(
                 MessagePrimitive2.Parts,
                 {
                   components: {
@@ -3731,11 +3912,11 @@ var AssistantMessage = () => {
                   }
                 }
               ),
-              /* @__PURE__ */ jsx23(MessageError, {})
+              /* @__PURE__ */ jsx26(MessageError, {})
             ]
           }
         ),
-        /* @__PURE__ */ jsx23("div", { className: "aui-assistant-message-footer mt-1 mb-3 ml-1 flex", children: /* @__PURE__ */ jsx23(AssistantActionBar, {}) })
+        /* @__PURE__ */ jsx26("div", { className: "aui-assistant-message-footer mt-1 mb-3 ml-1 flex", children: /* @__PURE__ */ jsx26(AssistantActionBar, {}) })
       ]
     }
   );
@@ -3748,36 +3929,36 @@ var ASSISTANT_ACTION_ICON_CLASS = cn(
   "[&>span:first-child]:group-hover/tbv2:bg-ghost-fill-hover"
 );
 var AssistantActionBar = () => {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(
     ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "never",
       className: "aui-assistant-action-bar-root flex items-center gap-0 bg-transparent px-0 py-0.5 text-muted-foreground/60",
       children: [
-        /* @__PURE__ */ jsx23(ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsx26(ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxs15(
           TooltipIconButton,
           {
             tooltip: "Copy",
             variant: "ghost",
             className: ASSISTANT_ACTION_ICON_CLASS,
             children: [
-              /* @__PURE__ */ jsx23(AuiIf2, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ jsx23(CheckIcon3, { className: "size-3" }) }),
-              /* @__PURE__ */ jsx23(AuiIf2, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ jsx23(CopyIcon2, { className: "size-3" }) })
+              /* @__PURE__ */ jsx26(AuiIf2, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ jsx26(CheckIcon3, { className: "size-3" }) }),
+              /* @__PURE__ */ jsx26(AuiIf2, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ jsx26(CopyIcon2, { className: "size-3" }) })
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx23(ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx26(ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ jsx26(
           TooltipIconButton,
           {
             tooltip: "Regenerate",
             variant: "ghost",
             className: ASSISTANT_ACTION_ICON_CLASS,
-            children: /* @__PURE__ */ jsx23(RefreshCwIcon, { className: "size-3" })
+            children: /* @__PURE__ */ jsx26(RefreshCwIcon, { className: "size-3" })
           }
         ) }),
-        /* @__PURE__ */ jsxs13(ActionBarMorePrimitive.Root, { children: [
-          /* @__PURE__ */ jsx23(ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsxs15(ActionBarMorePrimitive.Root, { children: [
+          /* @__PURE__ */ jsx26(ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx26(
             TooltipIconButton,
             {
               tooltip: "More",
@@ -3786,17 +3967,17 @@ var AssistantActionBar = () => {
                 ASSISTANT_ACTION_ICON_CLASS,
                 "data-[state=open]:text-muted-foreground/80"
               ),
-              children: /* @__PURE__ */ jsx23(MoreHorizontalIcon, { className: "size-3" })
+              children: /* @__PURE__ */ jsx26(MoreHorizontalIcon, { className: "size-3" })
             }
           ) }),
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx26(
             ActionBarMorePrimitive.Content,
             {
               side: "bottom",
               align: "start",
               className: "aui-action-bar-more-content z-50 min-w-36 overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-card-elevated",
-              children: /* @__PURE__ */ jsx23(ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ jsxs13(ActionBarMorePrimitive.Item, { className: "aui-action-bar-more-item flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-muted focus:bg-muted", children: [
-                /* @__PURE__ */ jsx23(DownloadIcon, { className: "size-4 shrink-0" }),
+              children: /* @__PURE__ */ jsx26(ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ jsxs15(ActionBarMorePrimitive.Item, { className: "aui-action-bar-more-item flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-muted focus:bg-muted", children: [
+                /* @__PURE__ */ jsx26(DownloadIcon, { className: "size-4 shrink-0" }),
                 "Export as Markdown"
               ] }) })
             }
@@ -3807,11 +3988,11 @@ var AssistantActionBar = () => {
   );
 };
 var UserMessageText = () => {
-  return /* @__PURE__ */ jsx23("span", { className: "whitespace-pre-wrap", children: /* @__PURE__ */ jsx23(MessagePartPrimitive.Text, { smooth: false }) });
+  return /* @__PURE__ */ jsx26("span", { className: "whitespace-pre-wrap", children: /* @__PURE__ */ jsx26(MessagePartPrimitive.Text, { smooth: false }) });
 };
 var UserMessage = () => {
   const isPanel = useThreadVariant() === "panel";
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(
     MessagePrimitive2.Root,
     {
       className: cn(
@@ -3820,8 +4001,8 @@ var UserMessage = () => {
       ),
       "data-role": "user",
       children: [
-        /* @__PURE__ */ jsx23(UserMessageAttachments, {}),
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsx26(UserMessageAttachments, {}),
+        /* @__PURE__ */ jsxs15(
           motion3.div,
           {
             className: cn(
@@ -3832,8 +4013,8 @@ var UserMessage = () => {
             animate: { opacity: 1, y: 0, scale: 1 },
             transition: { duration: 0.65, ease: luxuryEase },
             children: [
-              /* @__PURE__ */ jsx23(MessagePrimitive2.Parts, { components: { Text: UserMessageText } }),
-              /* @__PURE__ */ jsx23("div", { className: "aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2", children: /* @__PURE__ */ jsx23(UserActionBar, {}) })
+              /* @__PURE__ */ jsx26(MessagePrimitive2.Parts, { components: { Text: UserMessageText } }),
+              /* @__PURE__ */ jsx26("div", { className: "aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2", children: /* @__PURE__ */ jsx26(UserActionBar, {}) })
             ]
           }
         )
@@ -3842,42 +4023,42 @@ var UserMessage = () => {
   );
 };
 var UserActionBar = () => {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26(
     ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "always",
       className: "aui-user-action-bar-root flex flex-col items-end",
-      children: /* @__PURE__ */ jsx23(ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx26(ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ jsx26(
         TooltipIconButton,
         {
           tooltip: "Edit",
           variant: "ghost",
           className: ASSISTANT_ACTION_ICON_CLASS,
-          children: /* @__PURE__ */ jsx23(PencilIcon, { className: "size-3" })
+          children: /* @__PURE__ */ jsx26(PencilIcon, { className: "size-3" })
         }
       ) })
     }
   );
 };
 var EditComposer = () => {
-  return /* @__PURE__ */ jsx23(MessagePrimitive2.Root, { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3", children: /* @__PURE__ */ jsxs13(ComposerPrimitive3.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted", children: [
-    /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26(MessagePrimitive2.Root, { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3", children: /* @__PURE__ */ jsxs15(ComposerPrimitive3.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted", children: [
+    /* @__PURE__ */ jsx26(
       ComposerPrimitive3.Input,
       {
         className: "aui-edit-composer-input min-h-14 w-full resize-none bg-transparent p-4 text-foreground text-sm outline-none",
         autoFocus: true
       }
     ),
-    /* @__PURE__ */ jsxs13("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
-      /* @__PURE__ */ jsx23(ComposerPrimitive3.Cancel, { asChild: true, children: /* @__PURE__ */ jsx23(TimbalV2Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
-      /* @__PURE__ */ jsx23(ComposerPrimitive3.Send, { asChild: true, children: /* @__PURE__ */ jsx23(TimbalV2Button, { variant: "primary", size: "sm", children: "Update" }) })
+    /* @__PURE__ */ jsxs15("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
+      /* @__PURE__ */ jsx26(ComposerPrimitive3.Cancel, { asChild: true, children: /* @__PURE__ */ jsx26(TimbalV2Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
+      /* @__PURE__ */ jsx26(ComposerPrimitive3.Send, { asChild: true, children: /* @__PURE__ */ jsx26(TimbalV2Button, { variant: "primary", size: "sm", children: "Update" }) })
     ] })
   ] }) });
 };
 
 // src/chat/chat.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function TimbalChat({
   workforceId,
   baseUrl,
@@ -3888,7 +4069,7 @@ function TimbalChat({
   debug,
   ...threadProps
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx27(
     TimbalRuntimeProvider,
     {
       workforceId,
@@ -3898,7 +4079,7 @@ function TimbalChat({
       attachmentsUploadUrl,
       attachmentsAccept,
       debug,
-      children: /* @__PURE__ */ jsx24(Thread, { ...threadProps })
+      children: /* @__PURE__ */ jsx27(Thread, { ...threadProps })
     }
   );
 }
@@ -3907,8 +4088,6 @@ export {
   studioTopbarPillHeightClass,
   studioTopbarIconPillClass,
   studioPlaygroundGradientClass,
-  studioSecondaryChromeClass,
-  studioSearchChromeClass,
   studioIntegrationCardClass,
   studioSidebarPanelClass,
   studioSidebarNavItemClass,
@@ -3926,6 +4105,9 @@ export {
   monotoneAreaPath,
   CHART_PALETTE,
   LineAreaChart,
+  PieChart,
+  RadialChart,
+  RadarChart,
   ArtifactCard,
   ChartArtifactView,
   QuestionArtifactView,