@timbal-ai/timbal-react 1.1.0 → 1.3.0

package/dist/chat.cjs

@@ -910,10 +910,10 @@ function findParentIdFromAuiParent(messages, auiParentId) {
 }
 
 // src/chat/thread.tsx
-var import_react27 = require("react");
-var import_react28 = require("@assistant-ui/react");
+var import_react30 = require("react");
+var import_react31 = require("@assistant-ui/react");
 var import_lucide_react8 = require("lucide-react");
-var import_react29 = require("motion/react");
+var import_react32 = require("motion/react");
 
 // src/chat/attachment.tsx
 var import_react5 = require("react");
@@ -1070,6 +1070,33 @@ var TIMBAL_V2_SHADOW = {
   ghost: "",
   link: ""
 };
+var TIMBAL_V2_PRIMARY_SURFACE = cn(
+  TIMBAL_V2_PRIMARY_GRADIENT,
+  TIMBAL_V2_SHADOW.primary,
+  TIMBAL_V2_BORDER.primary
+);
+var TIMBAL_V2_PRIMARY_PILL_ROOT = cn(
+  "relative box-border inline-flex items-center justify-center overflow-hidden rounded-full border-0 bg-transparent p-0 font-normal shadow-none transition duration-200 ease-in-out",
+  TIMBAL_V2_SHADOW.primary,
+  TIMBAL_V2_BORDER.primary
+);
+var TIMBAL_V2_PRIMARY_PILL_FILL_LAYER = cn(
+  "pointer-events-none absolute inset-0 transition duration-200 ease-in-out",
+  "bg-gradient-to-b from-primary-fill-from to-primary-fill-to",
+  "group-hover/avatar:from-primary-fill-hover-from group-hover/avatar:to-primary-fill-hover-to",
+  "group-active/avatar:from-primary-fill-active-from group-active/avatar:to-primary-fill-active-to"
+);
+var TIMBAL_V2_SECONDARY_PILL_ROOT = cn(
+  "relative box-border inline-flex items-center justify-center overflow-hidden rounded-full bg-transparent p-0 font-normal shadow-none transition duration-200 ease-in-out",
+  TIMBAL_V2_SHADOW.secondary,
+  TIMBAL_V2_BORDER.secondary
+);
+var TIMBAL_V2_SECONDARY_PILL_FILL_LAYER = cn(
+  "pointer-events-none absolute inset-0 transition duration-200 ease-in-out",
+  TIMBAL_V2_ELEVATED_GRADIENT,
+  "group-hover/avatar:from-secondary-fill-hover-from group-hover/avatar:to-secondary-fill-hover-to",
+  "group-active/avatar:from-secondary-fill-active-from group-active/avatar:to-secondary-fill-active-to"
+);
 var TIMBAL_V2_SWITCH_TRACK_OFF = cn(
   TIMBAL_V2_ELEVATED_GRADIENT,
   "border border-border shadow-card"
@@ -1179,25 +1206,71 @@ function DialogTitle({
 }
 
 // src/ui/avatar.tsx
+var React = __toESM(require("react"), 1);
 var import_radix_ui3 = require("radix-ui");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var AVATAR_PRIMARY_FALLBACK_CLASS = cn(
+  TIMBAL_V2_SECONDARY_PILL_ROOT,
+  TIMBAL_V2_LABEL.secondary,
+  "font-medium"
+);
+var AVATAR_SECONDARY_FILL_STYLE = {
+  backgroundImage: "linear-gradient(to bottom, var(--elevated-from), var(--elevated-to))"
+};
+var AvatarChromeContext = React.createContext(
+  null
+);
+function useAvatarChrome() {
+  return React.useContext(AvatarChromeContext);
+}
+function isBrandedVariant(variant) {
+  return variant === "secondary" || variant === "primary" || variant === "chart";
+}
+var AVATAR_SIZE_CLASS = {
+  default: "size-8",
+  sm: "size-6",
+  lg: "size-10"
+};
 function Avatar({
   className,
   size = "default",
+  variant: rootVariant,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const [chrome, setChrome] = React.useState(rootVariant ?? "muted");
+  React.useLayoutEffect(() => {
+    if (rootVariant !== void 0) {
+      setChrome(rootVariant);
+    }
+  }, [rootVariant]);
+  const branded = isBrandedVariant(chrome);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AvatarChromeContext.Provider, { value: { chrome, setChrome }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     import_radix_ui3.Avatar.Root,
     {
       "data-slot": "avatar",
       "data-size": size,
+      "data-variant": branded ? "secondary" : chrome,
       className: cn(
-        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        "group/avatar relative shrink-0 select-none",
+        AVATAR_SIZE_CLASS[size],
+        branded ? TIMBAL_V2_SECONDARY_PILL_ROOT : "flex overflow-hidden rounded-full",
         className
       ),
-      ...props
+      ...props,
+      children: [
+        branded ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: TIMBAL_V2_SECONDARY_PILL_FILL_LAYER,
+            style: AVATAR_SECONDARY_FILL_STYLE
+          }
+        ) : null,
+        children
+      ]
     }
-  );
+  ) });
 }
 function AvatarImage({
   className,
@@ -1207,24 +1280,44 @@ function AvatarImage({
     import_radix_ui3.Avatar.Image,
     {
       "data-slot": "avatar-image",
-      className: cn("aspect-square size-full", className),
+      className: cn(
+        "relative z-10 aspect-square size-full rounded-full object-cover",
+        className
+      ),
       ...props
     }
   );
 }
 function AvatarFallback({
   className,
+  variant = "muted",
+  seed: _seed,
+  children,
+  style,
   ...props
 }) {
+  const chromeCtx = useAvatarChrome();
+  React.useLayoutEffect(() => {
+    chromeCtx?.setChrome(variant);
+  }, [chromeCtx, variant]);
+  const branded = isBrandedVariant(variant);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_radix_ui3.Avatar.Fallback,
     {
       "data-slot": "avatar-fallback",
+      "data-variant": branded ? "secondary" : variant,
       className: cn(
-        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        "relative z-10 flex size-full items-center justify-center rounded-full",
+        branded ? cn(
+          "bg-transparent font-medium",
+          TIMBAL_V2_LABEL.secondary,
+          "text-sm group-data-[size=sm]/avatar:text-xs"
+        ) : "bg-muted font-normal text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
         className
       ),
-      ...props
+      style,
+      ...props,
+      children
     }
   );
 }
@@ -1233,7 +1326,7 @@ function AvatarFallback({
 var import_react4 = require("react");
 
 // src/ui/timbal-v2-button.tsx
-var React = __toESM(require("react"), 1);
+var React2 = __toESM(require("react"), 1);
 var import_radix_ui4 = require("radix-ui");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var TIMBAL_V2_FILL_AS_CHILD = {
@@ -1269,7 +1362,7 @@ var TIMBAL_V2_LABEL_AS_CHILD = {
   ...TIMBAL_V2_LABEL,
   link: "text-foreground underline decoration-foreground/25 underline-offset-2 hover:decoration-foreground/45"
 };
-var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
+var TimbalV2Button = React2.forwardRef(function TimbalV2Button2({
   variant = "secondary",
   size = "sm",
   isIconOnly = false,
@@ -1534,31 +1627,32 @@ var import_react_markdown = require("@assistant-ui/react-markdown");
 var import_remark_gfm = __toESM(require("remark-gfm"), 1);
 var import_remark_math = __toESM(require("remark-math"), 1);
 var import_rehype_katex = __toESM(require("rehype-katex"), 1);
-var import_react17 = require("react");
+var import_react20 = require("react");
 var import_lucide_react4 = require("lucide-react");
 
 // src/chat/syntax-highlighter.tsx
-var import_react16 = require("react");
+var import_react19 = require("react");
 var import_core = require("shiki/core");
 var import_javascript = require("shiki/engine/javascript");
 
 // src/artifacts/registry.tsx
-var import_react15 = require("react");
+var import_react18 = require("react");
 
 // src/artifacts/chart-artifact.tsx
-var import_react7 = require("react");
+var import_react10 = require("react");
 
 // src/charts/line-area-chart.tsx
+var import_react7 = require("react");
 var import_recharts = require("recharts");
 
 // src/ui/chart.tsx
-var React2 = __toESM(require("react"), 1);
+var React3 = __toESM(require("react"), 1);
 var RechartsPrimitive = __toESM(require("recharts"), 1);
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React2.createContext(null);
+var ChartContext = React3.createContext(null);
 function useChart() {
-  const context = React2.useContext(ChartContext);
+  const context = React3.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -1571,7 +1665,7 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React2.useId();
+  const uniqueId = React3.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
@@ -1632,7 +1726,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React2.useMemo(() => {
+  const tooltipLabel = React3.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -1743,7 +1837,7 @@ function ChartLegendContent({
         return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
-            className: "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+            className: "[&>svg]:text-muted-foreground flex min-w-0 max-w-[8rem] items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
             children: [
               itemConfig?.icon && !hideIcon ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(itemConfig.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "div",
@@ -1752,7 +1846,7 @@ function ChartLegendContent({
                   style: { backgroundColor: item.color }
                 }
               ),
-              itemConfig?.label
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "min-w-0 truncate", children: itemConfig?.label ?? (item.value != null ? String(item.value) : null) })
             ]
           },
           `${item.value ?? index}`
@@ -1775,6 +1869,83 @@ function getPayloadConfigFromPayload(config, payload, key) {
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
 
+// src/charts/chart-gradient-utils.ts
+function barGradientId(scopeId, dataKey) {
+  return `bar-${scopeId}-${sanitizeId(dataKey)}`;
+}
+function pieGradientId(scopeId, key) {
+  return `pie-${scopeId}-${sanitizeId(key)}`;
+}
+function sanitizeId(key) {
+  return key.replace(/[^a-zA-Z0-9_-]/g, "_");
+}
+function truncateLabel(text, maxChars = 14) {
+  const s = String(text ?? "");
+  if (s.length <= maxChars) return s;
+  if (maxChars <= 1) return "\u2026";
+  return `${s.slice(0, maxChars - 1)}\u2026`;
+}
+function estimateYAxisWidth(labels, { min = 48, max = 112, charWidth = 6.5 } = {}) {
+  if (labels.length === 0) return min;
+  const longest = labels.reduce((a, b) => a.length >= b.length ? a : b, "");
+  return Math.min(max, Math.max(min, Math.ceil(longest.length * charWidth) + 12));
+}
+
+// src/charts/chart-axis-tick.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ChartAxisTick = ({
+  x = 0,
+  y = 0,
+  payload,
+  textAnchor = "end",
+  maxChars = 14,
+  clipTicks = true
+}) => {
+  const raw = String(payload?.value ?? "");
+  const label = clipTicks ? truncateLabel(raw, maxChars) : raw;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { transform: `translate(${x},${y})`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("title", { children: raw }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "text",
+      {
+        textAnchor,
+        fill: "currentColor",
+        className: "fill-muted-foreground",
+        dominantBaseline: "middle",
+        children: label
+      }
+    )
+  ] });
+};
+
+// src/charts/chart-gradients.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var BarGradientDefs = ({
+  scopeId,
+  dataKeys,
+  horizontal
+}) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("defs", { children: dataKeys.map((dataKey) => {
+  const id = barGradientId(scopeId, dataKey);
+  const color = `var(--color-${dataKey})`;
+  if (horizontal) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: 1 }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "100%", stopColor: color, stopOpacity: 0.55 })
+    ] }, dataKey);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "100%", stopColor: color, stopOpacity: 0.55 })
+  ] }, dataKey);
+}) });
+var PieGradientDefs = ({ scopeId, slices }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("defs", { children: slices.map(({ key, color }) => {
+  const id = pieGradientId(scopeId, key);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "100%", stopColor: color, stopOpacity: 0.65 })
+  ] }, key);
+}) });
+
 // src/charts/geometry.ts
 function toNum(value) {
   const n = typeof value === "number" ? value : Number(value);
@@ -1792,15 +1963,52 @@ function formatCompact(value, unit) {
   return unit ? `${s}${unit}` : s;
 }
 
+// src/charts/line-area-chart-utils.ts
+function resolveChartMargin(options) {
+  const { flush, showXAxis, showYAxis } = options;
+  if (!flush) {
+    return { top: 8, right: 12, bottom: 0, left: 0 };
+  }
+  const anyAxis = showXAxis || showYAxis;
+  if (!anyAxis) {
+    return { top: 8, right: 12, bottom: 8, left: 12 };
+  }
+  return {
+    top: 8,
+    right: 12,
+    bottom: showXAxis ? 24 : 8,
+    left: showYAxis ? 8 : 12
+  };
+}
+function flushBarCategoryGap(flush, showCategoryAxis) {
+  return flush && showCategoryAxis ? "0%" : void 0;
+}
+function flushLineAreaEdgeToEdge(flush, variant, showXAxis, showYAxis) {
+  return flush && (variant === "line" || variant === "area") && showXAxis && !showYAxis;
+}
+function resolveTooltipCategory(label, payload, xKey, data, formatX) {
+  const row = payload?.[0]?.payload;
+  if (row && xKey in row) {
+    const idx = data.indexOf(row);
+    return formatX(row[xKey], idx >= 0 ? idx : 0);
+  }
+  if (label != null && label !== "") {
+    const idx = typeof label === "number" ? label : data.findIndex((r) => r[xKey] === label || String(r[xKey]) === String(label));
+    return formatX(label, idx >= 0 ? idx : 0);
+  }
+  return "";
+}
+
 // src/charts/line-area-chart.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var INDEX_X_KEY = "__index";
 var CHART_PALETTE = [
-  "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(--chart-1, #4f46e5)",
+  "var(--chart-2, #3b82f6)",
+  "var(--chart-3, #0ea5e9)",
+  "var(--chart-4, #6366f1)",
+  "var(--chart-5, #60a5fa)",
+  "var(--chart-6, #2563eb)"
 ];
 var LineAreaChart = ({
   data = [],
@@ -1825,9 +2033,11 @@ var LineAreaChart = ({
   tooltipIndicator = "dot",
   formatValue,
   formatX,
+  clipTicks = true,
   className,
   ariaLabel = "Chart"
 }) => {
+  const gradientScopeId = (0, import_react7.useId)().replace(/:/g, "");
   const xKey = xKeyProp ?? inferXKey(data);
   const series = resolveSeries(seriesProp, data, xKey);
   const flush = layout === "flush";
@@ -1837,7 +2047,7 @@ var LineAreaChart = ({
   const showLegend = showLegendProp ?? (!flush && series.length > 1);
   const grid = gridLines ?? (horizontal ? "vertical" : "horizontal");
   if (data.length === 0 || series.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChartEmpty, { className, height, ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartEmpty, { className, height, ariaLabel });
   }
   const config = {};
   series.forEach((s, i) => {
@@ -1848,25 +2058,52 @@ var LineAreaChart = ({
   });
   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 margin = resolveChartMargin({ flush, showXAxis, showYAxis });
+  const flushCategoryXAxisProps = flush && showXAxis && flushLineAreaEdgeToEdge(flush, variant, showXAxis, showYAxis) ? { scale: "point", padding: "no-gap", interval: 0 } : flush && showXAxis && variant === "bar" ? { interval: 0 } : {};
+  const useIndexX = flushLineAreaEdgeToEdge(flush, variant, showXAxis, showYAxis);
+  const chartData = useIndexX ? data.map((row, i) => ({ ...row, [INDEX_X_KEY]: i })) : data;
+  const chartXKey = useIndexX ? INDEX_X_KEY : xKey;
+  const categoryTick = (textAnchor) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartAxisTick, { textAnchor, clipTicks });
   const showVGrid = showGrid && (grid === "vertical" || grid === "both");
   const showHGrid = showGrid && (grid === "horizontal" || grid === "both");
-  const tooltipEl = showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const tooltipEl = showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     ChartTooltip,
     {
       cursor: variant === "bar",
-      content: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChartTooltipContent, { indicator: tooltipIndicator })
+      content: ({ active, payload, label }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        ChartTooltipContent,
+        {
+          active,
+          payload,
+          label,
+          indicator: tooltipIndicator,
+          labelFormatter: (_value, items) => {
+            const category = resolveTooltipCategory(label, items, xKey, data, xFmt);
+            return category || null;
+          },
+          formatter: (value, name, item) => {
+            const key = String(item.dataKey ?? name ?? "value");
+            const seriesLabel = config[key]?.label ?? name;
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-1 items-center justify-between leading-none", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-muted-foreground", children: seriesLabel }),
+              value != null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-foreground font-mono font-medium tabular-nums", children: valueFmt(value) }) : null
+            ] });
+          }
+        }
+      )
     }
   ) : null;
-  const legendEl = showLegend ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChartLegendContent, {}) }) : null;
-  const gridEl = showGrid && grid !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_recharts.CartesianGrid, { vertical: showVGrid, horizontal: showHGrid, strokeDasharray: "4 4" }) : null;
+  const legendEl = showLegend ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartLegendContent, {}) }) : null;
+  const gridEl = showGrid && grid !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts.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__ */ (0, import_jsx_runtime10.jsx)(
+    const dataKeys = series.map((s) => s.dataKey);
+    const barDefs = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BarGradientDefs, { scopeId: gradientScopeId, dataKeys, horizontal });
+    const bars = series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_recharts.Bar,
       {
         dataKey: s.dataKey,
-        fill: `var(--color-${s.dataKey})`,
+        fill: `url(#${barGradientId(gradientScopeId, s.dataKey)})`,
         radius: barCornerRadius(barRadius, horizontal, stacked),
         stackId: stacked ? "stack" : void 0,
         isAnimationActive: true
@@ -1874,149 +2111,212 @@ var LineAreaChart = ({
       s.dataKey
     ));
     if (horizontal) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChartShell, { config, height, className, ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_recharts.BarChart, { accessibilityLayer: true, data, layout: "vertical", margin, children: [
-        gridEl,
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_recharts.XAxis,
-          {
-            type: "number",
-            hide: !showXAxis,
-            tickLine: false,
-            axisLine: false,
-            tickMargin: 8,
-            tickFormatter: (v) => valueFmt(v),
-            domain: yDomain
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_recharts.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__ */ (0, import_jsx_runtime10.jsx)(ChartShell, { config, height, className, ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_recharts.BarChart, { accessibilityLayer: true, data, margin, children: [
-      gridEl,
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_recharts.XAxis,
-        {
-          dataKey: xKey,
-          hide: !showXAxis,
-          tickLine: false,
-          axisLine: false,
-          tickMargin: 8,
-          minTickGap: 16,
-          tickFormatter: (v, i) => xFmt(v, i)
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_recharts.YAxis,
+      const categoryLabels = data.map((row, i) => xFmt(row[xKey], i));
+      const yAxisWidth = showYAxis ? estimateYAxisWidth(
+        clipTicks ? categoryLabels.map((l) => l.slice(0, 14)) : categoryLabels
+      ) : 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartShell, { config, height, className, ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        import_recharts.BarChart,
         {
-          hide: !showYAxis,
-          tickLine: false,
-          axisLine: false,
-          tickMargin: 8,
-          width: showYAxis ? 44 : 0,
-          tickFormatter: (v) => valueFmt(v),
-          domain: yDomain
+          accessibilityLayer: true,
+          data,
+          layout: "vertical",
+          margin,
+          barCategoryGap: flushBarCategoryGap(flush, showYAxis),
+          children: [
+            barDefs,
+            gridEl,
+            showXAxis ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              import_recharts.XAxis,
+              {
+                type: "number",
+                tickLine: false,
+                axisLine: false,
+                tickMargin: 8,
+                tickFormatter: (v) => valueFmt(v),
+                domain: yDomain
+              }
+            ) : null,
+            showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              import_recharts.YAxis,
+              {
+                type: "category",
+                dataKey: xKey,
+                tickLine: false,
+                axisLine: false,
+                tickMargin: 8,
+                width: yAxisWidth,
+                minTickGap: 16,
+                tick: categoryTick("end")
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts.YAxis, { type: "category", dataKey: xKey, hide: true, width: 0 }),
+            tooltipEl,
+            legendEl,
+            bars
+          ]
         }
-      ),
-      tooltipEl,
-      legendEl,
-      bars
-    ] }) });
+      ) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartShell, { config, height, className, ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      import_recharts.BarChart,
+      {
+        accessibilityLayer: true,
+        data,
+        margin,
+        barCategoryGap: flushBarCategoryGap(flush, showXAxis),
+        children: [
+          barDefs,
+          gridEl,
+          showXAxis ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_recharts.XAxis,
+            {
+              dataKey: xKey,
+              tickLine: false,
+              axisLine: false,
+              tickMargin: 8,
+              minTickGap: 16,
+              tick: categoryTick("middle"),
+              ...flushCategoryXAxisProps
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts.XAxis, { dataKey: xKey, hide: true }),
+          showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_recharts.YAxis,
+            {
+              tickLine: false,
+              axisLine: false,
+              tickMargin: 8,
+              width: 44,
+              tickFormatter: (v) => valueFmt(v),
+              domain: yDomain
+            }
+          ) : null,
+          tooltipEl,
+          legendEl,
+          bars
+        ]
+      }
+    ) });
   }
-  const axes = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const lineAreaAxes = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    showXAxis && useIndexX ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_recharts.XAxis,
+      {
+        type: "number",
+        dataKey: INDEX_X_KEY,
+        domain: [0, Math.max(0, chartData.length - 1)],
+        allowDecimals: false,
+        ticks: chartData.map((_, i) => i),
+        tickLine: false,
+        axisLine: false,
+        tickMargin: 8,
+        tickFormatter: (i) => {
+          const row = chartData[Number(i)];
+          return row ? xFmt(row[xKey], Number(i)) : "";
+        }
+      }
+    ) : showXAxis ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_recharts.XAxis,
       {
         dataKey: xKey,
-        hide: !showXAxis,
         tickLine: false,
         axisLine: false,
         tickMargin: 8,
-        minTickGap: 24,
-        tickFormatter: (v, i) => xFmt(v, i)
+        minTickGap: flush ? 8 : 24,
+        tickFormatter: (v, i) => xFmt(v, i),
+        ...flushCategoryXAxisProps
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts.XAxis, { dataKey: chartXKey, hide: true }),
+    showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_recharts.YAxis,
       {
-        hide: !showYAxis,
         tickLine: false,
         axisLine: false,
         tickMargin: 8,
-        width: showYAxis ? 44 : 0,
+        width: 44,
         tickFormatter: (v) => valueFmt(v),
         domain: yDomain
       }
-    )
+    ) : null
   ] });
+  const chartA11y = flush ? {} : { accessibilityLayer: true };
   if (variant === "area") {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChartShell, { config, height, className, ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_recharts.AreaChart, { accessibilityLayer: true, data, margin, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("defs", { children: series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("linearGradient", { id: `fill-${s.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("stop", { offset: "5%", stopColor: `var(--color-${s.dataKey})`, stopOpacity: 0.3 }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("stop", { offset: "95%", stopColor: `var(--color-${s.dataKey})`, stopOpacity: 0.04 })
-      ] }, s.dataKey)) }),
-      gridEl,
-      axes,
-      tooltipEl,
-      legendEl,
-      series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_recharts.Area,
-        {
-          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
-      ))
-    ] }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChartShell, { config, height, className, ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_recharts.LineChart, { accessibilityLayer: true, data, margin, children: [
-    gridEl,
-    axes,
-    tooltipEl,
-    legendEl,
-    series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_recharts.Line,
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      ChartShell,
       {
-        dataKey: s.dataKey,
-        type: curve,
-        stroke: `var(--color-${s.dataKey})`,
-        strokeWidth: 2,
-        dot: dots === true ? { r: 3 } : false,
-        activeDot: { r: 4 },
-        isAnimationActive: true
-      },
-      s.dataKey
-    ))
-  ] }) });
+        config,
+        height,
+        className,
+        ariaLabel,
+        flush,
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_recharts.AreaChart, { ...chartA11y, data: chartData, margin, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("defs", { children: series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("linearGradient", { id: `fill-${s.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("stop", { offset: "5%", stopColor: `var(--color-${s.dataKey})`, stopOpacity: 0.3 }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("stop", { offset: "95%", stopColor: `var(--color-${s.dataKey})`, stopOpacity: 0.04 })
+          ] }, s.dataKey)) }),
+          gridEl,
+          lineAreaAxes,
+          tooltipEl,
+          legendEl,
+          series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_recharts.Area,
+            {
+              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
+          ))
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    ChartShell,
+    {
+      config,
+      height,
+      className,
+      ariaLabel,
+      flush,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_recharts.LineChart, { ...chartA11y, data: chartData, margin, children: [
+        gridEl,
+        lineAreaAxes,
+        tooltipEl,
+        legendEl,
+        series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_recharts.Line,
+          {
+            dataKey: s.dataKey,
+            type: curve,
+            stroke: `var(--color-${s.dataKey})`,
+            strokeWidth: 2,
+            dot: dots === true ? { r: 3 } : false,
+            activeDot: { r: 4 },
+            isAnimationActive: true
+          },
+          s.dataKey
+        ))
+      ] })
+    }
+  );
 };
-var ChartShell = ({ config, height, className, ariaLabel, children }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var ChartShell = ({ config, height, className, ariaLabel, flush = false, children }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   ChartContainer,
   {
     config,
     role: "img",
     "aria-label": ariaLabel,
-    className: cn("aspect-auto w-full", className),
+    className: cn(
+      "aspect-auto w-full",
+      flush && "justify-start [&_.recharts-responsive-container]:!mx-0 [&_.recharts-responsive-container]:w-full",
+      className
+    ),
     style: { height },
     children
   }
@@ -2025,7 +2325,7 @@ var ChartEmpty = ({
   className,
   height,
   ariaLabel
-}) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   "div",
   {
     className: cn(
@@ -2058,8 +2358,35 @@ function resolveSeries(seriesProp, data, xKey) {
 }
 
 // src/charts/pie-chart.tsx
+var import_react8 = require("react");
 var import_recharts2 = require("recharts");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+
+// src/charts/chart-center-label.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var CENTER_BOX_W = 96;
+var CENTER_BOX_H = 52;
+var ChartCenterLabel = ({ cx, cy, value, label }) => {
+  const hasValue = value != null && value !== "";
+  const hasLabel = label != null && label !== "";
+  if (!hasValue && !hasLabel) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "foreignObject",
+    {
+      x: cx - CENTER_BOX_W / 2,
+      y: cy - CENTER_BOX_H / 2,
+      width: CENTER_BOX_W,
+      height: CENTER_BOX_H,
+      className: "overflow-visible",
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "pointer-events-none flex h-full flex-col items-center justify-center gap-0.5 text-center", children: [
+        hasValue ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-2xl font-normal leading-none tabular-nums text-foreground", children: value }) : null,
+        hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-[11px] leading-none text-muted-foreground", children: label }) : null
+      ] })
+    }
+  );
+};
+
+// src/charts/pie-chart.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var PieChart = ({
   data,
   nameKey: nameKeyProp,
@@ -2076,10 +2403,11 @@ var PieChart = ({
   className,
   ariaLabel = "Pie chart"
 }) => {
+  const gradientScopeId = (0, import_react8.useId)().replace(/:/g, "");
   const nameKey = nameKeyProp ?? inferNameKey(data, dataKey);
   const palette = colors ?? CHART_PALETTE;
   if (data.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PieEmpty, { className, height, ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PieEmpty, { className, height, ariaLabel });
   }
   const slices = data.map((d, i) => ({
     name: String(d[nameKey] ?? i),
@@ -2090,7 +2418,7 @@ var PieChart = ({
   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__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     ChartContainer,
     {
       config,
@@ -2098,14 +2426,21 @@ var PieChart = ({
       "aria-label": ariaLabel,
       className: cn("aspect-auto w-full", className),
       style: { height },
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_recharts2.PieChart, { children: [
-        showTooltip && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_recharts2.PieChart, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          PieGradientDefs,
+          {
+            scopeId: gradientScopeId,
+            slices: slices.map((s) => ({ key: s.name, color: s.fill }))
+          }
+        ),
+        showTooltip && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           ChartTooltip,
           {
-            content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChartTooltipContent, { nameKey: "name", indicator: tooltipIndicator, hideLabel: true })
+            content: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChartTooltipContent, { nameKey: "name", indicator: tooltipIndicator, hideLabel: true })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
           import_recharts2.Pie,
           {
             data: slices,
@@ -2118,24 +2453,30 @@ var PieChart = ({
             label: showLabels,
             isAnimationActive: true,
             children: [
-              slices.map((s) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_recharts2.Cell, { fill: s.fill }, s.name)),
-              hasCenter && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              slices.map((s) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_recharts2.Cell, { fill: `url(#${pieGradientId(gradientScopeId, s.name)})` }, s.name)),
+              hasCenter && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 import_recharts2.Label,
                 {
+                  position: "center",
                   content: ({ viewBox }) => {
                     if (!viewBox || !("cx" in viewBox)) return null;
                     const { cx, cy } = viewBox;
-                    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("text", { x: cx, y: cy, textAnchor: "middle", dominantBaseline: "middle", children: [
-                      centerValue != null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tspan", { x: cx, y: cy - 2, className: "fill-foreground text-2xl tabular-nums", children: centerValue }),
-                      centerLabel != null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tspan", { x: cx, y: cy + 18, className: "fill-muted-foreground text-[11px]", children: centerLabel })
-                    ] });
+                    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      ChartCenterLabel,
+                      {
+                        cx,
+                        cy,
+                        value: centerValue,
+                        label: centerLabel
+                      }
+                    );
                   }
                 }
               )
             ]
           }
         ),
-        showLegend && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChartLegendContent, { nameKey: "name" }) })
+        showLegend && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChartLegendContent, { nameKey: "name" }) })
       ] })
     }
   );
@@ -2144,7 +2485,7 @@ var PieEmpty = ({
   className,
   height,
   ariaLabel
-}) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "div",
   {
     className: cn("flex w-full items-center justify-center text-xs text-muted-foreground", className),
@@ -2163,8 +2504,9 @@ function inferNameKey(data, dataKey) {
 }
 
 // src/charts/radial-chart.tsx
+var import_react9 = require("react");
 var import_recharts3 = require("recharts");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var RadialChart = ({
   data,
   nameKey: nameKeyProp,
@@ -2180,10 +2522,11 @@ var RadialChart = ({
   className,
   ariaLabel = "Radial chart"
 }) => {
+  const gradientScopeId = (0, import_react9.useId)().replace(/:/g, "");
   const nameKey = nameKeyProp ?? inferNameKey2(data, dataKey);
   const palette = colors ?? CHART_PALETTE;
   if (data.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadialEmpty, { className, height, ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RadialEmpty, { className, height, ariaLabel });
   }
   const rows = data.map((d, i) => ({
     name: String(d[nameKey] ?? i),
@@ -2194,8 +2537,8 @@ var RadialChart = ({
   const config = {};
   for (const r of rows) config[r.name] = { label: r.name };
   const hasCenter = centerValue != null || centerLabel != null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("flex w-full flex-col items-center gap-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("flex w-full flex-col items-center gap-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       ChartContainer,
       {
         config,
@@ -2203,7 +2546,7 @@ var RadialChart = ({
         "aria-label": ariaLabel,
         className: "aspect-auto w-full",
         style: { height: height - (showLegend ? 32 : 0) },
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           import_recharts3.RadialBarChart,
           {
             data: rows,
@@ -2214,19 +2557,32 @@ var RadialChart = ({
             barSize: ringWidth,
             barGap: ringGap,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts3.PolarAngleAxis, { type: "number", domain: [0, max], tick: false, axisLine: false }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartTooltipContent, { nameKey: "name", hideLabel: true }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts3.RadialBar, { dataKey: "value", background: true, cornerRadius: ringWidth / 2, isAnimationActive: true, children: rows.map((r) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts3.Cell, { fill: r.fill }, r.name)) }),
-              hasCenter && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts3.PolarRadiusAxis, { tick: false, tickLine: false, axisLine: false, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                PieGradientDefs,
+                {
+                  scopeId: gradientScopeId,
+                  slices: rows.map((r) => ({ key: r.name, color: r.fill }))
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_recharts3.PolarAngleAxis, { type: "number", domain: [0, max], tick: false, axisLine: false }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChartTooltipContent, { nameKey: "name", hideLabel: true }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_recharts3.RadialBar, { dataKey: "value", background: true, cornerRadius: ringWidth / 2, isAnimationActive: true, children: rows.map((r) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_recharts3.Cell, { fill: `url(#${pieGradientId(gradientScopeId, r.name)})` }, r.name)) }),
+              hasCenter && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_recharts3.PolarRadiusAxis, { tick: false, tickLine: false, axisLine: false, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 import_recharts3.Label,
                 {
+                  position: "center",
                   content: ({ viewBox }) => {
                     if (!viewBox || !("cx" in viewBox)) return null;
                     const { cx, cy } = viewBox;
-                    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("text", { x: cx, y: cy, textAnchor: "middle", dominantBaseline: "middle", children: [
-                      centerValue != null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tspan", { x: cx, y: cy - 2, className: "fill-foreground text-2xl tabular-nums", children: centerValue }),
-                      centerLabel != null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tspan", { x: cx, y: cy + 18, className: "fill-muted-foreground text-[11px]", children: centerLabel })
-                    ] });
+                    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      ChartCenterLabel,
+                      {
+                        cx,
+                        cy,
+                        value: centerValue,
+                        label: centerLabel
+                      }
+                    );
                   }
                 }
               ) })
@@ -2235,8 +2591,8 @@ var RadialChart = ({
         )
       }
     ),
-    showLegend && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "inline-block size-2.5 rounded-[3px]", style: { background: r.fill } }),
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "inline-block size-2.5 rounded-[3px]", style: { background: r.fill } }),
       r.name
     ] }, r.name)) })
   ] });
@@ -2245,7 +2601,7 @@ var RadialEmpty = ({
   className,
   height,
   ariaLabel
-}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   "div",
   {
     className: cn("flex w-full items-center justify-center text-xs text-muted-foreground", className),
@@ -2265,7 +2621,7 @@ function inferNameKey2(data, dataKey) {
 
 // src/charts/radar-chart.tsx
 var import_recharts4 = require("recharts");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var RadarChart = ({
   data,
   nameKey: nameKeyProp,
@@ -2280,7 +2636,7 @@ var RadarChart = ({
   const nameKey = nameKeyProp ?? inferNameKey3(data);
   const series = resolveSeries2(seriesProp, data, nameKey);
   if (data.length < 3 || series.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "div",
       {
         className: cn("flex items-center justify-center text-xs text-muted-foreground", className),
@@ -2298,7 +2654,7 @@ var RadarChart = ({
       color: s.color ?? CHART_PALETTE[i % CHART_PALETTE.length]
     };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     ChartContainer,
     {
       config,
@@ -2306,17 +2662,17 @@ var RadarChart = ({
       "aria-label": ariaLabel,
       className: cn("mx-auto aspect-square", className),
       style: { height },
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_recharts4.RadarChart, { data, outerRadius: "70%", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChartTooltipContent, { indicator: "line" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_recharts4.PolarGrid, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_recharts4.RadarChart, { data, outerRadius: "70%", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChartTooltipContent, { indicator: "line" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_recharts4.PolarGrid, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           import_recharts4.PolarAngleAxis,
           {
             dataKey: nameKey,
             tick: { fontSize: 10, fill: "var(--color-muted-foreground)" }
           }
         ),
-        series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           import_recharts4.Radar,
           {
             dataKey: s.dataKey,
@@ -2329,7 +2685,7 @@ var RadarChart = ({
           },
           s.dataKey
         )),
-        showLegend && series.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChartLegendContent, {}) })
+        showLegend && series.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChartLegendContent, {}) })
       ] })
     }
   );
@@ -2350,10 +2706,10 @@ function resolveSeries2(seriesProp, data, nameKey) {
 }
 
 // src/artifacts/artifact-card.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var ArtifactCard = ({ title, kind, className, bodyClassName, toolbar, children }) => {
   const hasHeader = Boolean(title || toolbar);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
       className: cn(
@@ -2362,29 +2718,29 @@ var ArtifactCard = ({ title, kind, className, bodyClassName, toolbar, children }
       ),
       "data-artifact-kind": kind,
       children: [
-        hasHeader && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("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__ */ (0, import_jsx_runtime14.jsx)("span", { className: "aui-artifact-title flex-1 truncate text-xs font-semibold text-foreground/80", children: title }),
-          !title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "flex-1" }),
+        hasHeader && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("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__ */ (0, import_jsx_runtime17.jsx)("span", { className: "aui-artifact-title flex-1 truncate text-xs font-semibold text-foreground/80", children: title }),
+          !title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "flex-1" }),
           toolbar
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("aui-artifact-body", bodyClassName), children })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("aui-artifact-body", bodyClassName), children })
       ]
     }
   );
 };
 
 // src/artifacts/chart-artifact.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var ChartArtifactView = ({
   artifact,
   embedded = false,
   height = 300
 }) => {
-  const plot = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChartArtifactPlot, { artifact, height });
+  const plot = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartArtifactPlot, { artifact, height });
   if (embedded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "aui-artifact-chart w-full", children: plot });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "aui-artifact-chart w-full", children: plot });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArtifactCard, { title: artifact.title, kind: "chart", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "aui-artifact-chart pt-2", children: plot }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ArtifactCard, { title: artifact.title, kind: "chart", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "aui-artifact-chart pt-2", children: plot }) });
 };
 function ChartArtifactPlot({
   artifact,
@@ -2392,7 +2748,7 @@ function ChartArtifactPlot({
 }) {
   const { chartType = "bar", data = [] } = artifact;
   const xKey = artifact.xKey ?? inferXKey2(data);
-  const series = (0, import_react7.useMemo)(() => {
+  const series = (0, import_react10.useMemo)(() => {
     if (artifact.series && artifact.series.length > 0) {
       return artifact.series.map((s) => ({
         dataKey: s.dataKey,
@@ -2410,7 +2766,7 @@ function ChartArtifactPlot({
   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__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       PieChart,
       {
         data,
@@ -2427,7 +2783,7 @@ function ChartArtifactPlot({
     ) });
   }
   if (chartType === "radial") {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       RadialChart,
       {
         data,
@@ -2440,10 +2796,11 @@ function ChartArtifactPlot({
     ) });
   }
   if (chartType === "radar") {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RadarChart, { data, nameKey: xKey, series, height, ariaLabel: aria }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RadarChart, { data, nameKey: xKey, series, height, ariaLabel: aria }) });
   }
   const horizontal = chartType === "horizontalBar";
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const showAxes = artifact.showAxes === true;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     LineAreaChart,
     {
       data,
@@ -2457,8 +2814,8 @@ function ChartArtifactPlot({
       curve: artifact.curve,
       dots: artifact.dots,
       tooltipIndicator: artifact.tooltipIndicator,
-      showXAxis: true,
-      showYAxis: horizontal,
+      showXAxis: showAxes,
+      showYAxis: showAxes && horizontal,
       showLegend: artifact.legend ?? series.length > 1,
       unit: artifact.unit,
       ariaLabel: aria
@@ -2480,8 +2837,8 @@ function inferDataKeys(data, xKey) {
 }
 
 // src/artifacts/question-artifact.tsx
-var import_react8 = require("react");
-var import_react9 = require("@assistant-ui/react");
+var import_react11 = require("react");
+var import_react12 = require("@assistant-ui/react");
 var import_lucide_react3 = require("lucide-react");
 
 // src/design/classes.ts
@@ -2590,12 +2947,12 @@ var studioQuestionOptionSelectedClass = cn(
 );
 
 // src/artifacts/question-artifact.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function optionKey(option, index) {
   const id = option.id?.trim();
   return id ? id : `__option-${index}`;
 }
-var OptionRadio = ({ selected }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var OptionRadio = ({ selected }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "span",
   {
     className: cn(
@@ -2603,18 +2960,18 @@ var OptionRadio = ({ selected }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx
       selected ? "border-foreground bg-foreground text-background" : "border-border bg-background"
     ),
     "aria-hidden": true,
-    children: selected ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react3.CheckIcon, { className: "size-2.5 stroke-[3]" }) : null
+    children: selected ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react3.CheckIcon, { className: "size-2.5 stroke-[3]" }) : null
   }
 );
 var QuestionArtifactView = ({
   artifact
 }) => {
-  const runtime = (0, import_react9.useThreadRuntime)();
-  const [selected, setSelected] = (0, import_react8.useState)([]);
-  const [submittedIds, setSubmittedIds] = (0, import_react8.useState)(null);
+  const runtime = (0, import_react12.useThreadRuntime)();
+  const [selected, setSelected] = (0, import_react11.useState)([]);
+  const [submittedIds, setSubmittedIds] = (0, import_react11.useState)(null);
   const isMulti = artifact.multi === true;
   const isDisabled = submittedIds !== null;
-  const send = (0, import_react8.useCallback)(
+  const send = (0, import_react11.useCallback)(
     (keys) => {
       if (keys.length === 0) return;
       const labels = artifact.options.map((option, index) => ({ option, key: optionKey(option, index) })).filter(({ key }) => keys.includes(key)).map(({ option }) => option.label);
@@ -2626,7 +2983,7 @@ var QuestionArtifactView = ({
     },
     [artifact.options, runtime]
   );
-  const onPick = (0, import_react8.useCallback)(
+  const onPick = (0, import_react11.useCallback)(
     (key) => {
       if (isDisabled) return;
       if (!isMulti) {
@@ -2639,15 +2996,15 @@ var QuestionArtifactView = ({
     },
     [isDisabled, isMulti, send]
   );
-  const onConfirm = (0, import_react8.useCallback)(() => {
+  const onConfirm = (0, import_react11.useCallback)(() => {
     send(selected);
   }, [selected, send]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: studioArtifactShellClass, "data-artifact-kind": "question", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "px-2.5 py-2", children: [
-    artifact.prompt ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mb-2 text-sm font-normal leading-snug text-foreground", children: artifact.prompt }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex flex-col gap-0.5", role: "list", children: artifact.options.map((option, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: studioArtifactShellClass, "data-artifact-kind": "question", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "px-2.5 py-2", children: [
+    artifact.prompt ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "mb-2 text-sm font-normal leading-snug text-foreground", children: artifact.prompt }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime16.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
         "button",
         {
           type: "button",
@@ -2659,17 +3016,17 @@ var QuestionArtifactView = ({
             isDisabled && (isSelected ? "cursor-default" : "cursor-not-allowed opacity-50")
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OptionRadio, { selected: isSelected }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "min-w-0 flex-1 text-left", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "block font-normal text-foreground", children: option.label }),
-              option.description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: option.description }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(OptionRadio, { selected: isSelected }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "min-w-0 flex-1 text-left", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "block font-normal text-foreground", children: option.label }),
+              option.description ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: option.description }) : null
             ] })
           ]
         },
         key
       );
     }) }),
-    isMulti && !submittedIds ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    isMulti && !submittedIds ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       TimbalV2Button,
       {
         type: "button",
@@ -2684,12 +3041,12 @@ var QuestionArtifactView = ({
 };
 
 // src/artifacts/html-artifact.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("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__ */ (0, import_jsx_runtime17.jsx)(ArtifactCard, { title: artifact.title, kind: "html", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ArtifactCard, { title: artifact.title, kind: "html", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "iframe",
     {
       title: artifact.title ?? "HTML artifact",
@@ -2702,7 +3059,7 @@ var HtmlArtifactView = ({ artifact }) => {
 };
 
 // src/artifacts/json-artifact.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var JsonArtifactView = ({
   artifact
 }) => {
@@ -2714,16 +3071,16 @@ var JsonArtifactView = ({
   } catch {
     body = String(data);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ArtifactCard, { title, kind: "json", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime21.jsx)(ArtifactCard, { title, kind: "json", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var TableArtifactView = ({ artifact }) => {
   const rows = artifact.rows ?? [];
   const columns = artifact.columns ?? deriveColumns(rows);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactCard, { title: artifact.title, kind: "table", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "aui-artifact-table-wrap overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("table", { className: "aui-artifact-table w-full border-collapse text-sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tr", { className: "border-b border-border/40 bg-muted/20", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ArtifactCard, { title: artifact.title, kind: "table", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "aui-artifact-table-wrap overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { className: "aui-artifact-table w-full border-collapse text-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { className: "border-b border-border/40 bg-muted/20", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "th",
       {
         className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground",
@@ -2731,11 +3088,11 @@ var TableArtifactView = ({ artifact }) => {
       },
       col.key
     )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "tr",
       {
         className: "border-b border-border/30 transition-colors last:border-b-0 hover:bg-muted/20",
-        children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "td",
           {
             className: "px-3 py-2 align-top text-foreground/85",
@@ -2768,7 +3125,7 @@ function formatCell(value) {
 }
 
 // src/artifacts/ui/ui-artifact.tsx
-var import_react14 = require("react");
+var import_react17 = require("react");
 
 // src/artifacts/ui/types.ts
 function isUiBinding(value) {
@@ -2821,38 +3178,38 @@ function resolveBindable(value, state) {
 }
 
 // src/artifacts/ui/registry.tsx
-var import_react10 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var UiStateContext = (0, import_react10.createContext)({});
-var UiDispatchContext = (0, import_react10.createContext)(() => {
+var import_react13 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var UiStateContext = (0, import_react13.createContext)({});
+var UiDispatchContext = (0, import_react13.createContext)(() => {
 });
-var UiStateProvider = ({ state, dispatch, children }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UiStateContext.Provider, { value: state, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UiDispatchContext.Provider, { value: dispatch, children }) });
+var UiStateProvider = ({ state, dispatch, children }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(UiStateContext.Provider, { value: state, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(UiDispatchContext.Provider, { value: dispatch, children }) });
 function useUiState() {
-  return (0, import_react10.useContext)(UiStateContext);
+  return (0, import_react13.useContext)(UiStateContext);
 }
 function useUiDispatch() {
-  return (0, import_react10.useContext)(UiDispatchContext);
+  return (0, import_react13.useContext)(UiDispatchContext);
 }
-var UiEventContext = (0, import_react10.createContext)(
+var UiEventContext = (0, import_react13.createContext)(
   null
 );
-var UiEventProvider = ({ onEvent, children }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UiEventContext.Provider, { value: onEvent, children });
+var UiEventProvider = ({ onEvent, children }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(UiEventContext.Provider, { value: onEvent, children });
 function useUiEventEmitter() {
-  return (0, import_react10.useContext)(UiEventContext);
+  return (0, import_react13.useContext)(UiEventContext);
 }
-var UiCustomNodeRegistryContext = (0, import_react10.createContext)({});
+var UiCustomNodeRegistryContext = (0, import_react13.createContext)({});
 function useUiCustomNodeRegistry() {
-  return (0, import_react10.useContext)(UiCustomNodeRegistryContext);
+  return (0, import_react13.useContext)(UiCustomNodeRegistryContext);
 }
 
 // src/artifacts/ui/nodes.tsx
-var import_react11 = require("react");
-var import_react12 = require("motion/react");
-var import_react13 = require("@assistant-ui/react");
+var import_react14 = require("react");
+var import_react15 = require("motion/react");
+var import_react16 = require("@assistant-ui/react");
 
 // src/ui/button.tsx
 var import_class_variance_authority = require("class-variance-authority");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var LEGACY_SIZE_TO_V2 = {
   default: "md",
   xs: "xs",
@@ -2902,7 +3259,7 @@ function Button({
   const v2Variant = TIMBAL_V2_FROM_LEGACY_BUTTON[variant ?? "default"];
   const v2Size = LEGACY_SIZE_TO_V2[size ?? "default"];
   const isIconOnly = typeof size === "string" && size.startsWith("icon");
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     TimbalV2Button,
     {
       "data-slot": "button",
@@ -2920,29 +3277,29 @@ function Button({
 }
 
 // src/artifacts/ui/nodes.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var UiNodeView = ({ node }) => {
   switch (node.kind) {
     case "box":
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BoxNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BoxNode, { node });
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TextNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TextNode, { node });
     case "heading":
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(HeadingNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(HeadingNode, { node });
     case "badge":
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BadgeNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BadgeNode, { node });
     case "button":
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ButtonNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ButtonNode, { node });
     case "toggle":
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToggleNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ToggleNode, { node });
     case "slider":
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SliderNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SliderNode, { node });
     case "tooltip":
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TooltipNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipNode, { node });
     case "draggable":
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DraggableNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DraggableNode, { node });
     case "custom":
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CustomNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CustomNode, { node });
     default:
       return null;
   }
@@ -2950,9 +3307,9 @@ var UiNodeView = ({ node }) => {
 function useActionRunner() {
   const state = useUiState();
   const dispatch = useUiDispatch();
-  const runtime = (0, import_react13.useThreadRuntime)();
+  const runtime = (0, import_react16.useThreadRuntime)();
   const emit = useUiEventEmitter();
-  return (0, import_react11.useCallback)(
+  return (0, import_react14.useCallback)(
     (actions) => {
       if (!actions) return;
       const list = Array.isArray(actions) ? actions : [actions];
@@ -3002,7 +3359,7 @@ var JUSTIFY_CLS = {
 };
 var BoxNode = ({ node }) => {
   const dir = node.direction ?? "col";
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       className: cn(
@@ -3017,7 +3374,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__ */ (0, import_jsx_runtime22.jsx)(UiNodeView, { node: child }, child.id ?? i))
+      children: node.children?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(UiNodeView, { node: child }, child.id ?? i))
     }
   );
 };
@@ -3036,7 +3393,7 @@ var TEXT_WEIGHT = {
 var TextNode = ({ node }) => {
   const state = useUiState();
   const value = resolveBindable(node.value, state);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "span",
     {
       className: cn(
@@ -3067,13 +3424,13 @@ var HeadingNode = ({ node }) => {
   );
   switch (level) {
     case 1:
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h1", { className: cls, children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h1", { className: cls, children: value });
     case 2:
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: cls, children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: cls, children: value });
     case 3:
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: cls, children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h3", { className: cls, children: value });
     case 4:
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h4", { className: cls, children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h4", { className: cls, children: value });
   }
 };
 var BADGE_TONE = {
@@ -3086,7 +3443,7 @@ var BADGE_TONE = {
 var BadgeNode = ({ node }) => {
   const state = useUiState();
   const value = String(resolveBindable(node.value, state) ?? "");
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "span",
     {
       className: cn(
@@ -3103,7 +3460,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__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     Button,
     {
       variant: node.variant ?? "default",
@@ -3125,7 +3482,7 @@ var ToggleNode = ({ node }) => {
     dispatch({ type: "toggle", path: node.binding });
     run(node.onChange);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "label",
     {
       className: cn(
@@ -3133,7 +3490,7 @@ var ToggleNode = ({ node }) => {
         node.className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "button",
           {
             type: "button",
@@ -3144,7 +3501,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__ */ (0, import_jsx_runtime22.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               "span",
               {
                 className: cn(
@@ -3157,7 +3514,7 @@ var ToggleNode = ({ node }) => {
             )
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-foreground/85", children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-foreground/85", children: label })
       ]
     }
   );
@@ -3177,12 +3534,12 @@ var SliderNode = ({ node }) => {
     const next = Number(e.target.value);
     dispatch({ type: "set", path: node.binding, value: next });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("aui-ui-slider flex flex-col gap-1", node.className), children: [
-    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: label }),
-      showValue && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "font-mono", children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("aui-ui-slider flex flex-col gap-1", node.className), children: [
+    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: label }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-mono", children: value })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "input",
       {
         type: "range",
@@ -3204,9 +3561,9 @@ var SliderNode = ({ node }) => {
 var TooltipNode = ({ node }) => {
   const state = useUiState();
   const content = String(resolveBindable(node.content, state) ?? "");
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: cn("aui-ui-tooltip-trigger inline-flex", node.className), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(UiNodeView, { node: node.child }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TooltipContent, { side: node.side ?? "top", children: content })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: cn("aui-ui-tooltip-trigger inline-flex", node.className), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(UiNodeView, { node: node.child }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { side: node.side ?? "top", children: content })
   ] }) });
 };
 var DraggableNode = ({ node }) => {
@@ -3214,8 +3571,8 @@ var DraggableNode = ({ node }) => {
   const snapBack = node.snapBack ?? true;
   const axis = node.axis ?? "both";
   const dragProp = axis === "both" ? true : axis;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    import_react12.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_react15.motion.div,
     {
       drag: dragProp,
       dragMomentum: false,
@@ -3226,7 +3583,7 @@ var DraggableNode = ({ node }) => {
         "aui-ui-draggable inline-block cursor-grab touch-none",
         node.className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(UiNodeView, { node: node.child })
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(UiNodeView, { node: node.child })
     }
   );
 };
@@ -3236,8 +3593,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__ */ (0, import_jsx_runtime22.jsx)(UiNodeView, { node: child }, child.id ?? i));
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Renderer, { props: resolvedProps, children });
+  const children = node.children?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(UiNodeView, { node: child }, child.id ?? i));
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Renderer, { props: resolvedProps, children });
 };
 function resolveProps(props, state) {
   const out = {};
@@ -3248,17 +3605,17 @@ function resolveProps(props, state) {
 }
 
 // src/artifacts/ui/ui-artifact.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var UiArtifactView = ({ artifact }) => {
-  const [state, dispatch] = (0, import_react14.useReducer)(
+  const [state, dispatch] = (0, import_react17.useReducer)(
     uiStateReducer,
     artifact.initialState ?? {}
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArtifactCard, { title: artifact.title, kind: "ui", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(UiStateProvider, { state, dispatch, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "aui-ui-root p-3", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(UiNodeView, { node: artifact.root }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ArtifactCard, { title: artifact.title, kind: "ui", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(UiStateProvider, { state, dispatch, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "aui-ui-root p-3", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(UiNodeView, { node: artifact.root }) }) }) });
 };
 
 // src/artifacts/registry.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var defaultArtifactRenderers = {
   chart: ChartArtifactView,
   question: QuestionArtifactView,
@@ -3267,25 +3624,25 @@ var defaultArtifactRenderers = {
   table: TableArtifactView,
   ui: UiArtifactView
 };
-var ArtifactRegistryContext = (0, import_react15.createContext)(
+var ArtifactRegistryContext = (0, import_react18.createContext)(
   defaultArtifactRenderers
 );
 var ArtifactRegistryProvider = ({ renderers, override, children }) => {
-  const merged = (0, import_react15.useMemo)(() => {
+  const merged = (0, import_react18.useMemo)(() => {
     if (!renderers) return defaultArtifactRenderers;
     if (override) return renderers;
     return { ...defaultArtifactRenderers, ...renderers };
   }, [renderers, override]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArtifactRegistryContext.Provider, { value: merged, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArtifactRegistryContext.Provider, { value: merged, children });
 };
 function useArtifactRegistry() {
-  return (0, import_react15.useContext)(ArtifactRegistryContext);
+  return (0, import_react18.useContext)(ArtifactRegistryContext);
 }
 var ArtifactView = ({ artifact }) => {
   const registry = useArtifactRegistry();
   const Renderer = registry[artifact.type] ?? registry.json;
   if (!Renderer) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Renderer, { artifact });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Renderer, { artifact });
 };
 
 // src/artifacts/parse.ts
@@ -3361,7 +3718,7 @@ var import_c = __toESM(require("shiki/langs/c.mjs"), 1);
 var import_cpp = __toESM(require("shiki/langs/cpp.mjs"), 1);
 var import_vitesse_dark = __toESM(require("shiki/themes/vitesse-dark.mjs"), 1);
 var import_vitesse_light = __toESM(require("shiki/themes/vitesse-light.mjs"), 1);
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var SHIKI_THEME_DARK = "vitesse-dark";
 var SHIKI_THEME_LIGHT = "vitesse-light";
 var highlighterPromise = null;
@@ -3399,8 +3756,8 @@ var ShikiSyntaxHighlighter = ({
   language,
   code
 }) => {
-  const [html, setHtml] = (0, import_react16.useState)(null);
-  (0, import_react16.useEffect)(() => {
+  const [html, setHtml] = (0, import_react19.useState)(null);
+  (0, import_react19.useEffect)(() => {
     let cancelled = false;
     (async () => {
       try {
@@ -3430,13 +3787,13 @@ var ShikiSyntaxHighlighter = ({
     try {
       const parsed = JSON.parse(code);
       if (isArtifact(parsed)) {
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArtifactView, { artifact: parsed });
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ArtifactView, { artifact: parsed });
       }
     } catch {
     }
   }
   if (html) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "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",
@@ -3444,14 +3801,14 @@ var ShikiSyntaxHighlighter = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Pre, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Code2, { children: code }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Pre, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Code2, { children: code }) });
 };
 var syntax_highlighter_default = ShikiSyntaxHighlighter;
 
 // src/chat/markdown-text.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var MarkdownTextImpl = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_react_markdown.MarkdownTextPrimitive,
     {
       remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
@@ -3464,7 +3821,7 @@ var MarkdownTextImpl = () => {
     }
   );
 };
-var MarkdownText = (0, import_react17.memo)(MarkdownTextImpl);
+var MarkdownText = (0, import_react20.memo)(MarkdownTextImpl);
 var CodeHeader = ({ language, code }) => {
   const { isCopied, copyToClipboard } = useCopyToClipboard();
   if (isArtifactFenceLanguage(language)) return null;
@@ -3472,20 +3829,20 @@ var CodeHeader = ({ language, code }) => {
     if (!code || isCopied) return;
     copyToClipboard(code);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("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__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("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__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40" }),
       language
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       TooltipIconButton,
       {
         tooltip: isCopied ? "Copied!" : "Copy",
         onClick: onCopy,
         className: "transition-colors hover:text-foreground",
         children: [
-          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react4.CopyIcon, { className: "h-3.5 w-3.5" }),
-          isCopied && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react4.CheckIcon, { className: "h-3.5 w-3.5 text-emerald-500" })
+          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react4.CopyIcon, { className: "h-3.5 w-3.5" }),
+          isCopied && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react4.CheckIcon, { className: "h-3.5 w-3.5 text-emerald-500" })
         ]
       }
     )
@@ -3494,7 +3851,7 @@ var CodeHeader = ({ language, code }) => {
 var useCopyToClipboard = ({
   copiedDuration = 3e3
 } = {}) => {
-  const [isCopied, setIsCopied] = (0, import_react17.useState)(false);
+  const [isCopied, setIsCopied] = (0, import_react20.useState)(false);
   const copyToClipboard = (value) => {
     if (!value) return;
     navigator.clipboard.writeText(value).then(() => {
@@ -3505,7 +3862,7 @@ var useCopyToClipboard = ({
   return { isCopied, copyToClipboard };
 };
 var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownComponents)({
-  h1: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  h1: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "h1",
     {
       className: cn(
@@ -3515,7 +3872,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h2: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  h2: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "h2",
     {
       className: cn(
@@ -3525,7 +3882,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h3: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  h3: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "h3",
     {
       className: cn(
@@ -3535,7 +3892,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h4: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  h4: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "h4",
     {
       className: cn(
@@ -3545,7 +3902,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h5: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  h5: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "h5",
     {
       className: cn(
@@ -3555,7 +3912,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h6: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  h6: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "h6",
     {
       className: cn(
@@ -3565,7 +3922,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  p: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  p: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "p",
     {
       className: cn(
@@ -3575,7 +3932,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "a",
     {
       className: cn(
@@ -3587,7 +3944,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "blockquote",
     {
       className: cn(
@@ -3597,7 +3954,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  ul: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  ul: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "ul",
     {
       className: cn(
@@ -3607,7 +3964,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  ol: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  ol: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "ol",
     {
       className: cn(
@@ -3617,7 +3974,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  hr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  hr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "hr",
     {
       className: cn(
@@ -3627,14 +3984,14 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  table: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "my-4 w-full overflow-x-auto rounded-lg border border-border/50", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  table: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "my-4 w-full overflow-x-auto rounded-lg border border-border/50", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "table",
     {
       className: cn("aui-md-table w-full border-collapse text-sm", className),
       ...props
     }
   ) }),
-  th: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  th: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "th",
     {
       className: cn(
@@ -3644,7 +4001,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  td: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  td: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "td",
     {
       className: cn(
@@ -3654,7 +4011,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  tr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  tr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "tr",
     {
       className: cn(
@@ -3664,8 +4021,8 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  li: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { className: cn("aui-md-li leading-[1.7]", className), ...props }),
-  sup: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  li: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { className: cn("aui-md-li leading-[1.7]", className), ...props }),
+  sup: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "sup",
     {
       className: cn(
@@ -3675,7 +4032,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  pre: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  pre: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "pre",
     {
       className: cn(
@@ -3687,7 +4044,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
   ),
   code: function Code({ className, ...props }) {
     const isCodeBlock = (0, import_react_markdown.useIsMarkdownCodeBlock)();
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "code",
       {
         className: cn(
@@ -3698,20 +4055,20 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       }
     );
   },
-  strong: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("strong", { className: cn("font-semibold text-foreground", className), ...props }),
-  em: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("em", { className: cn("italic", className), ...props }),
+  strong: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("strong", { className: cn("font-semibold text-foreground", className), ...props }),
+  em: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("em", { className: cn("italic", className), ...props }),
   CodeHeader
 });
 
 // src/chat/tool-fallback.tsx
-var import_react21 = require("react");
+var import_react24 = require("react");
 var import_lucide_react5 = require("lucide-react");
-var import_react22 = require("@assistant-ui/react");
+var import_react25 = require("@assistant-ui/react");
 
 // src/ui/shimmer.tsx
-var import_react18 = require("motion/react");
-var import_react19 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react21 = require("motion/react");
+var import_react22 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var ShimmerComponent = ({
   children,
   as: Component = "p",
@@ -3719,14 +4076,14 @@ var ShimmerComponent = ({
   duration = 2,
   spread = 2
 }) => {
-  const MotionComponent = import_react18.motion.create(
+  const MotionComponent = import_react21.motion.create(
     Component
   );
-  const dynamicSpread = (0, import_react19.useMemo)(
+  const dynamicSpread = (0, import_react22.useMemo)(
     () => (children?.length ?? 0) * spread,
     [children, spread]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     MotionComponent,
     {
       animate: { backgroundPosition: "0% center" },
@@ -3749,11 +4106,11 @@ var ShimmerComponent = ({
     }
   );
 };
-var Shimmer = (0, import_react19.memo)(ShimmerComponent);
+var Shimmer = (0, import_react22.memo)(ShimmerComponent);
 
 // src/chat/motion.tsx
-var import_react20 = require("motion/react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react23 = require("motion/react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var luxuryEase = [0.16, 1, 0.3, 1];
 var TOOL_ENTER_MS = 0.78;
 var TOOL_EXIT_MS = 0.28;
@@ -3779,10 +4136,10 @@ function toolMotionState(reduced, entering, variant) {
   return entering ? { opacity: 0, y: 14, filter: "blur(10px)" } : { opacity: 1, y: 0, filter: "blur(0px)" };
 }
 function ToolMotion({ children, className, motionKey }) {
-  const reduced = (0, import_react20.useReducedMotion)() ?? false;
+  const reduced = (0, import_react23.useReducedMotion)() ?? false;
   const { enter, exit } = toolPresenceTransition(reduced);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_react20.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_react23.motion.div,
     {
       className: cn("aui-tool-motion w-full min-w-0", className),
       initial: toolMotionState(reduced, true, "settled"),
@@ -3801,11 +4158,11 @@ function ToolPresence({
   className,
   variant = "settled"
 }) {
-  const reduced = (0, import_react20.useReducedMotion)() ?? false;
+  const reduced = (0, import_react23.useReducedMotion)() ?? false;
   const { enter, exit } = toolPresenceTransition(reduced);
   const enterTransition = variant === "executing" ? { duration: reduced ? 0.3 : 0.52, ease: luxuryEase } : enter;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react20.AnimatePresence, { mode: "wait", initial: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_react20.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react23.AnimatePresence, { mode: "wait", initial: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_react23.motion.div,
     {
       className: cn("aui-tool-presence w-full min-w-0", className),
       initial: toolMotionState(reduced, true, variant),
@@ -3825,8 +4182,8 @@ function ToolBodyPresence({
   children,
   className
 }) {
-  const reduced = (0, import_react20.useReducedMotion)() ?? false;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  const reduced = (0, import_react23.useReducedMotion)() ?? false;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       className: cn(
@@ -3834,7 +4191,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__ */ (0, import_jsx_runtime28.jsx)("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
           className: cn(
@@ -3850,7 +4207,7 @@ function ToolBodyPresence({
 }
 
 // src/chat/tool-fallback.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function detectRunning({
   status,
   result,
@@ -3864,7 +4221,7 @@ function detectRunning({
 }
 function useToolRunning(props) {
   const { isRunning: streamRunning } = useTimbalRuntime();
-  const partStatus = (0, import_react22.useAuiState)((s) => s.part.status);
+  const partStatus = (0, import_react25.useAuiState)((s) => s.part.status);
   return detectRunning({
     status: partStatus ?? props.status,
     result: props.result,
@@ -3882,8 +4239,8 @@ function formatToolResult(result) {
     return String(result);
   }
 }
-var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "inline-flex min-w-0 max-w-full items-baseline gap-1", children: [
-  action ? shimmer ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "inline-flex min-w-0 max-w-full items-baseline gap-1", children: [
+  action ? shimmer ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     Shimmer,
     {
       as: "span",
@@ -3892,10 +4249,10 @@ var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__
       spread: 2.5,
       children: action
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: studioTimelineActionClass, children: action }) : null,
-  detail ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: studioTimelineDetailClass, children: detail }) : null
+  ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: studioTimelineActionClass, children: action }) : null,
+  detail ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: studioTimelineDetailClass, children: detail }) : null
 ] });
-var TimelineHoverChevron = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var TimelineHoverChevron = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   import_lucide_react5.ChevronRightIcon,
   {
     className: studioTimelineChevronClass(expanded),
@@ -3903,9 +4260,9 @@ var TimelineHoverChevron = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runt
   }
 );
 var ToolPanel = ({ toolName, argsText, result, isError }) => {
-  const [open, setOpen] = (0, import_react21.useState)(false);
+  const [open, setOpen] = (0, import_react24.useState)(false);
   const detail = formatToolLabel(toolName);
-  const formattedArgs = (0, import_react21.useMemo)(() => {
+  const formattedArgs = (0, import_react24.useMemo)(() => {
     if (!argsText || argsText === "{}") return null;
     try {
       return JSON.stringify(JSON.parse(argsText), null, 2);
@@ -3913,17 +4270,17 @@ var ToolPanel = ({ toolName, argsText, result, isError }) => {
       return argsText;
     }
   }, [argsText]);
-  const formattedResult = (0, import_react21.useMemo)(() => {
+  const formattedResult = (0, import_react24.useMemo)(() => {
     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__ */ (0, import_jsx_runtime29.jsx)("div", { className: "aui-tool-row w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TimelineActionLabel, { action, detail }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "aui-tool-row w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TimelineActionLabel, { action, detail }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "aui-tool-row w-full min-w-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "aui-tool-row w-full min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "button",
       {
         type: "button",
@@ -3931,7 +4288,7 @@ var ToolPanel = ({ toolName, argsText, result, isError }) => {
         "aria-expanded": open,
         "aria-label": `${action} ${detail}`,
         className: studioTimelineRowButtonClass,
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
           "span",
           {
             className: cn(
@@ -3940,37 +4297,37 @@ var ToolPanel = ({ toolName, argsText, result, isError }) => {
               "text-foreground"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TimelineActionLabel, { action, detail }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TimelineHoverChevron, { expanded: open })
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TimelineActionLabel, { action, detail }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TimelineHoverChevron, { expanded: open })
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       ToolBodyPresence,
       {
         open,
         className: cn(studioTimelineBodyPadClass, "gap-2"),
         children: [
-          formattedArgs ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          formattedArgs ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "div",
             {
               className: cn(
                 studioComposerIoWellClass,
                 "max-h-48 overflow-auto px-2.5 py-2"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] font-normal leading-relaxed text-foreground", children: formattedArgs })
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] font-normal leading-relaxed text-foreground", children: formattedArgs })
             }
           ) : null,
-          formattedResult ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          formattedResult ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "div",
             {
               className: cn(
                 studioComposerIoWellClass,
                 "max-h-48 overflow-auto px-2.5 py-2"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] font-normal leading-relaxed text-foreground", children: formattedResult })
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] font-normal leading-relaxed text-foreground", children: formattedResult })
             }
           ) : null
         ]
@@ -3987,20 +4344,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__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     ToolPresence,
     {
       presenceKey,
       variant: isRunning ? "executing" : "settled",
       className: "py-0.5",
-      children: isRunning ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "aui-tool-running", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: isRunning ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "aui-tool-running", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         TimelineActionLabel,
         {
           action: "Using",
           detail: formatToolLabel(toolName),
           shimmer: true
         }
-      ) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         ToolPanel,
         {
           toolName,
@@ -4012,13 +4369,13 @@ var ToolFallbackImpl = ({
     }
   );
 };
-var ToolFallback = (0, import_react21.memo)(
+var ToolFallback = (0, import_react24.memo)(
   ToolFallbackImpl
 );
 ToolFallback.displayName = "ToolFallback";
 
 // src/artifacts/tool-artifact.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var ToolArtifactFallback = (props) => {
   const registry = useArtifactRegistry();
   const isRunning = useToolRunning({
@@ -4030,24 +4387,24 @@ var ToolArtifactFallback = (props) => {
     if (artifact) {
       const Renderer = registry[artifact.type];
       if (Renderer) {
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ToolMotion,
           {
             motionKey: `artifact-${artifact.type}`,
             className: "aui-tool-artifact",
-            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Renderer, { artifact })
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Renderer, { artifact })
           }
         );
       }
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ToolFallback, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToolFallback, { ...props });
 };
 
 // src/chat/composer.tsx
-var import_react23 = require("@assistant-ui/react");
+var import_react26 = require("@assistant-ui/react");
 var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Composer = ({
   placeholder = "Send a message...",
   showAttachments,
@@ -4058,10 +4415,10 @@ var Composer = ({
 }) => {
   const attachmentsEnabled = useTimbalAttachmentsEnabled();
   const attachUi = showAttachments !== false && attachmentsEnabled;
-  const shell = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    attachUi && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ComposerAttachments, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ComposerInput, { placeholder, autoFocus: !noAutoFocus }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  const shell = /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    attachUi && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ComposerAttachments, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ComposerInput, { placeholder, autoFocus: !noAutoFocus }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       ComposerToolbar,
       {
         showAttachments: attachUi,
@@ -4070,15 +4427,15 @@ var Composer = ({
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    import_react23.ComposerPrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_react26.ComposerPrimitive.Root,
     {
       className: cn(
         "aui-composer-root relative flex w-full flex-col",
         className
       ),
-      children: attachUi ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-        import_react23.ComposerPrimitive.AttachmentDropzone,
+      children: attachUi ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        import_react26.ComposerPrimitive.AttachmentDropzone,
         {
           className: cn(
             studioComposeInputShellClass,
@@ -4086,7 +4443,7 @@ var Composer = ({
           ),
           children: shell
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: studioComposeInputShellClass, children: shell })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: studioComposeInputShellClass, children: shell })
     }
   );
 };
@@ -4094,7 +4451,7 @@ var ComposerInput = ({
   placeholder,
   autoFocus
 }) => {
-  const composer = (0, import_react23.useComposerRuntime)();
+  const composer = (0, import_react26.useComposerRuntime)();
   const onKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
       e.preventDefault();
@@ -4106,8 +4463,8 @@ var ComposerInput = ({
     el.style.height = "auto";
     el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    import_react23.ComposerPrimitive.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_react26.ComposerPrimitive.Input,
     {
       placeholder,
       className: "aui-composer-input max-h-60 min-h-14 w-full resize-none bg-composer-bg px-3 pt-3 pb-1 text-sm outline-none placeholder:text-muted-foreground/70 focus-visible:ring-0",
@@ -4120,17 +4477,17 @@ var ComposerInput = ({
   );
 };
 var ComposerToolbar = ({ showAttachments, toolbar, sendTooltip }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("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__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-1", children: [
-      showAttachments && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ComposerAddAttachment, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("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__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-1", children: [
+      showAttachments && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ComposerAddAttachment, {}),
       toolbar
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ComposerSendOrCancel, { sendTooltip })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ComposerSendOrCancel, { sendTooltip })
   ] });
 };
 var ComposerSendOrCancel = ({ sendTooltip }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react23.AuiIf, { condition: (s) => !s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react23.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react26.AuiIf, { condition: (s) => !s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react26.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       TooltipIconButton,
       {
         tooltip: sendTooltip,
@@ -4138,34 +4495,34 @@ var ComposerSendOrCancel = ({ sendTooltip }) => {
         type: "submit",
         className: "aui-composer-send shrink-0 disabled:opacity-30",
         "aria-label": "Send message",
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react6.ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react6.ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
       }
     ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react23.AuiIf, { condition: (s) => s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react23.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react26.AuiIf, { condition: (s) => s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react26.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       TooltipIconButton,
       {
         tooltip: "Stop generating",
         variant: "primary",
         className: "aui-composer-cancel shrink-0",
         "aria-label": "Stop generating",
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react6.SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react6.SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" })
       }
     ) }) })
   ] });
 };
 
 // src/chat/suggestions.tsx
-var import_react24 = require("react");
-var import_react25 = require("@assistant-ui/react");
+var import_react27 = require("react");
+var import_react28 = require("@assistant-ui/react");
 var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var Suggestions = ({
   suggestions,
   className
 }) => {
   const items = useResolvedSuggestions(suggestions);
   if (!items || items.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       className: cn(
@@ -4174,17 +4531,17 @@ var Suggestions = ({
       ),
       role: "list",
       "aria-label": "Suggested prompts",
-      children: items.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SuggestionRow, { suggestion }, (suggestion.prompt ?? suggestion.title) + i))
+      children: items.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SuggestionRow, { suggestion }, (suggestion.prompt ?? suggestion.title) + i))
     }
   );
 };
 var SuggestionRow = ({ suggestion }) => {
-  const runtime = (0, import_react25.useThreadRuntime)();
+  const runtime = (0, import_react28.useThreadRuntime)();
   const onClick = () => {
     const text = suggestion.prompt ?? suggestion.title;
     runtime.append({ role: "user", content: [{ type: "text", text }] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "button",
     {
       type: "button",
@@ -4192,20 +4549,20 @@ var SuggestionRow = ({ suggestion }) => {
       onClick,
       className: cn("aui-thread-suggestion", studioListRowButtonClass),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "aui-thread-suggestion-icon shrink-0 text-muted-foreground", children: suggestion.icon ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react7.ArrowUpIcon, { className: "size-4", strokeWidth: 1.75, "aria-hidden": true }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "aui-thread-suggestion-text min-w-0 flex-1 text-left", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "aui-thread-suggestion-text-1 block truncate text-sm font-normal text-foreground", children: suggestion.title }),
-          suggestion.description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "aui-thread-suggestion-text-2 mt-0.5 block truncate text-xs text-muted-foreground", children: suggestion.description })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "aui-thread-suggestion-icon shrink-0 text-muted-foreground", children: suggestion.icon ?? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react7.ArrowUpIcon, { className: "size-4", strokeWidth: 1.75, "aria-hidden": true }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "aui-thread-suggestion-text min-w-0 flex-1 text-left", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "aui-thread-suggestion-text-1 block truncate text-sm font-normal text-foreground", children: suggestion.title }),
+          suggestion.description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("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] = (0, import_react24.useState)(
+  const [resolved, setResolved] = (0, import_react27.useState)(
     () => Array.isArray(source) ? source : void 0
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!source) {
       setResolved(void 0);
       return;
@@ -4224,7 +4581,7 @@ function useResolvedSuggestions(source) {
       cancelled = true;
     };
   }, [source]);
-  return (0, import_react24.useMemo)(() => resolved, [resolved]);
+  return (0, import_react27.useMemo)(() => resolved, [resolved]);
 }
 
 // src/design/theme-sanity.ts
@@ -4297,15 +4654,15 @@ function scheduleThemeSanityCheck() {
 }
 
 // src/chat/thread-variant.tsx
-var import_react26 = require("react");
-var ThreadVariantContext = (0, import_react26.createContext)("default");
+var import_react29 = require("react");
+var ThreadVariantContext = (0, import_react29.createContext)("default");
 var ThreadVariantProvider = ThreadVariantContext.Provider;
 function useThreadVariant() {
-  return (0, import_react26.useContext)(ThreadVariantContext);
+  return (0, import_react29.useContext)(ThreadVariantContext);
 }
 
 // src/chat/thread.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var Thread = ({
   className,
   variant = "default",
@@ -4328,17 +4685,17 @@ var Thread = ({
   const EditComposerSlot = components?.EditComposer ?? EditComposer;
   const ScrollToBottomSlot = components?.ScrollToBottom ?? ThreadScrollToBottom;
   const SuggestionsSlot = components?.Suggestions ?? Suggestions;
-  (0, import_react27.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     scheduleThemeSanityCheck();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ThreadVariantProvider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ThreadVariantProvider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     ArtifactRegistryProvider,
     {
       renderers: artifacts?.renderers,
       override: artifacts?.override,
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(UiEventProvider, { onEvent: onArtifactEvent ?? (() => {
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        import_react28.ThreadPrimitive.Root,
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(UiEventProvider, { onEvent: onArtifactEvent ?? (() => {
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        import_react31.ThreadPrimitive.Root,
         {
           className: cn(
             "aui-root aui-thread-root @container flex h-full flex-col bg-transparent",
@@ -4347,8 +4704,8 @@ var Thread = ({
           ),
           style: { ["--thread-max-width"]: maxWidth },
           "data-thread-variant": variant,
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-            import_react28.ThreadPrimitive.Viewport,
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+            import_react31.ThreadPrimitive.Viewport,
             {
               turnAnchor: "bottom",
               className: cn(
@@ -4356,7 +4713,7 @@ var Thread = ({
                 isPanel ? "px-2 pt-2" : "px-4 pt-4"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                   WelcomeSlot,
                   {
                     config: welcome,
@@ -4365,8 +4722,8 @@ var Thread = ({
                     Suggestions: SuggestionsSlot
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                  import_react28.ThreadPrimitive.Messages,
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  import_react31.ThreadPrimitive.Messages,
                   {
                     components: {
                       UserMessage: UserMessageSlot,
@@ -4375,14 +4732,14 @@ var Thread = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                  import_react28.ThreadPrimitive.ViewportFooter,
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  import_react31.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__ */ (0, import_jsx_runtime33.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
                       "div",
                       {
                         className: cn(
@@ -4390,8 +4747,8 @@ var Thread = ({
                           isPanel ? "gap-2" : "gap-4"
                         ),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ScrollToBottomSlot, {}),
-                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ComposerSlot, { placeholder })
+                          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ScrollToBottomSlot, {}),
+                          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ComposerSlot, { placeholder })
                         ]
                       }
                     )
@@ -4406,13 +4763,13 @@ var Thread = ({
   ) });
 };
 var ThreadScrollToBottom = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react28.ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react31.ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     TooltipIconButton,
     {
       tooltip: "Scroll to bottom",
       variant: "secondary",
       className: "aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center disabled:invisible",
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react8.ArrowDownIcon, { className: "size-4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react8.ArrowDownIcon, { className: "size-4" })
     }
   ) });
 };
@@ -4445,15 +4802,15 @@ var ThreadWelcome = ({
   showWelcomeSuggestions: showWelcomeSuggestionsProp,
   Suggestions: SuggestionsSlot = Suggestions
 }) => {
-  const isEmpty = (0, import_react28.useThread)((s) => s.messages.length === 0);
+  const isEmpty = (0, import_react31.useThread)((s) => s.messages.length === 0);
   const isPanel = useThreadVariant() === "panel";
   const showWelcomeSuggestions = showWelcomeSuggestionsProp ?? !isPanel;
   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__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-      import_react29.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+      import_react32.motion.div,
       {
         className: cn(
           "aui-thread-welcome-message flex flex-col items-center justify-center text-center",
@@ -4463,9 +4820,9 @@ var ThreadWelcome = ({
         initial: "initial",
         animate: "animate",
         children: [
-          config?.icon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react29.motion.div, { variants: welcomeIcon, className: isPanel ? "mb-3" : "mb-5", children: config.icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            import_react29.motion.h1,
+          config?.icon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react32.motion.div, { variants: welcomeIcon, className: isPanel ? "mb-3" : "mb-5", children: config.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            import_react32.motion.h1,
             {
               variants: welcomeItem,
               className: cn(
@@ -4475,8 +4832,8 @@ var ThreadWelcome = ({
               children: config?.heading ?? defaultHeading
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            import_react29.motion.p,
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            import_react32.motion.p,
             {
               variants: welcomeItem,
               className: "aui-thread-welcome-message-inner mt-1.5 text-muted-foreground text-sm",
@@ -4486,16 +4843,16 @@ var ThreadWelcome = ({
         ]
       }
     ) }),
-    showWelcomeSuggestions && suggestions ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "aui-thread-welcome-suggestions mx-auto w-full max-w-(--thread-max-width) px-2", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SuggestionsSlot, { suggestions }) }) : null
+    showWelcomeSuggestions && suggestions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "aui-thread-welcome-suggestions mx-auto w-full max-w-(--thread-max-width) px-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SuggestionsSlot, { suggestions }) }) : null
   ] });
 };
 var MessageError = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react28.MessagePrimitive.Error, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react28.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__ */ (0, import_jsx_runtime33.jsx)(import_react28.ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react31.MessagePrimitive.Error, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react31.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__ */ (0, import_jsx_runtime36.jsx)(import_react31.ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
 };
 var AssistantMessage = () => {
   const isPanel = useThreadVariant() === "panel";
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-    import_react28.MessagePrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    import_react31.MessagePrimitive.Root,
     {
       className: cn(
         "aui-assistant-message-root fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in duration-150",
@@ -4503,7 +4860,7 @@ var AssistantMessage = () => {
       ),
       "data-role": "assistant",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
           "div",
           {
             className: cn(
@@ -4511,8 +4868,8 @@ var AssistantMessage = () => {
               isPanel ? "px-1 text-sm" : "px-2"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                import_react28.MessagePrimitive.Parts,
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                import_react31.MessagePrimitive.Parts,
                 {
                   components: {
                     Text: MarkdownText,
@@ -4522,11 +4879,11 @@ var AssistantMessage = () => {
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MessageError, {})
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MessageError, {})
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "aui-assistant-message-footer mt-1 mb-3 ml-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AssistantActionBar, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "aui-assistant-message-footer mt-1 mb-3 ml-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AssistantActionBar, {}) })
       ]
     }
   );
@@ -4539,36 +4896,36 @@ var ASSISTANT_ACTION_ICON_CLASS = cn(
   "[&>span:first-child]:group-hover/tbv2:bg-ghost-fill-hover"
 );
 var AssistantActionBar = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-    import_react28.ActionBarPrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    import_react31.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__ */ (0, import_jsx_runtime33.jsx)(import_react28.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react31.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
           TooltipIconButton,
           {
             tooltip: "Copy",
             variant: "ghost",
             className: ASSISTANT_ACTION_ICON_CLASS,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react28.AuiIf, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react8.CheckIcon, { className: "size-3" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react28.AuiIf, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react8.CopyIcon, { className: "size-3" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react31.AuiIf, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react8.CheckIcon, { className: "size-3" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react31.AuiIf, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react8.CopyIcon, { className: "size-3" }) })
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react28.ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react31.ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           TooltipIconButton,
           {
             tooltip: "Regenerate",
             variant: "ghost",
             className: ASSISTANT_ACTION_ICON_CLASS,
-            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react8.RefreshCwIcon, { className: "size-3" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react8.RefreshCwIcon, { className: "size-3" })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react28.ActionBarMorePrimitive.Root, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react28.ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react31.ActionBarMorePrimitive.Root, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react31.ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             TooltipIconButton,
             {
               tooltip: "More",
@@ -4577,17 +4934,17 @@ var AssistantActionBar = () => {
                 ASSISTANT_ACTION_ICON_CLASS,
                 "data-[state=open]:text-muted-foreground/80"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react8.MoreHorizontalIcon, { className: "size-3" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react8.MoreHorizontalIcon, { className: "size-3" })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            import_react28.ActionBarMorePrimitive.Content,
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            import_react31.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__ */ (0, import_jsx_runtime33.jsx)(import_react28.ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react28.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__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react8.DownloadIcon, { className: "size-4 shrink-0" }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react31.ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react31.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__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react8.DownloadIcon, { className: "size-4 shrink-0" }),
                 "Export as Markdown"
               ] }) })
             }
@@ -4598,12 +4955,12 @@ var AssistantActionBar = () => {
   );
 };
 var UserMessageText = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react28.MessagePartPrimitive.Text, { smooth: false }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react31.MessagePartPrimitive.Text, { smooth: false }) });
 };
 var UserMessage = () => {
   const isPanel = useThreadVariant() === "panel";
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-    import_react28.MessagePrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    import_react31.MessagePrimitive.Root,
     {
       className: cn(
         "aui-user-message-root mx-auto flex w-full max-w-(--thread-max-width) flex-col items-end gap-2",
@@ -4611,9 +4968,9 @@ var UserMessage = () => {
       ),
       "data-role": "user",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(UserMessageAttachments, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-          import_react29.motion.div,
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(UserMessageAttachments, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+          import_react32.motion.div,
           {
             className: cn(
               "aui-user-message-content relative inline-block max-w-[85%] rounded-2xl bg-bubble-user text-bubble-user-foreground",
@@ -4623,8 +4980,8 @@ var UserMessage = () => {
             animate: { opacity: 1, y: 0, scale: 1 },
             transition: { duration: 0.65, ease: luxuryEase },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react28.MessagePrimitive.Parts, { components: { Text: UserMessageText } }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(UserActionBar, {}) })
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react31.MessagePrimitive.Parts, { components: { Text: UserMessageText } }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(UserActionBar, {}) })
             ]
           }
         )
@@ -4633,42 +4990,42 @@ var UserMessage = () => {
   );
 };
 var UserActionBar = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    import_react28.ActionBarPrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_react31.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "always",
       className: "aui-user-action-bar-root flex flex-col items-end",
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react28.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react31.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         TooltipIconButton,
         {
           tooltip: "Edit",
           variant: "ghost",
           className: ASSISTANT_ACTION_ICON_CLASS,
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react8.PencilIcon, { className: "size-3" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react8.PencilIcon, { className: "size-3" })
         }
       ) })
     }
   );
 };
 var EditComposer = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react28.MessagePrimitive.Root, { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react28.ComposerPrimitive.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_react28.ComposerPrimitive.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react31.MessagePrimitive.Root, { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react31.ComposerPrimitive.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      import_react31.ComposerPrimitive.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__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react28.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TimbalV2Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react28.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TimbalV2Button, { variant: "primary", size: "sm", children: "Update" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react31.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TimbalV2Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react31.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TimbalV2Button, { variant: "primary", size: "sm", children: "Update" }) })
     ] })
   ] }) });
 };
 
 // src/chat/chat.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function TimbalChat({
   workforceId,
   baseUrl,
@@ -4679,7 +5036,7 @@ function TimbalChat({
   debug,
   ...threadProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     TimbalRuntimeProvider,
     {
       workforceId,
@@ -4689,7 +5046,7 @@ function TimbalChat({
       attachmentsUploadUrl,
       attachmentsAccept,
       debug,
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Thread, { ...threadProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Thread, { ...threadProps })
     }
   );
 }
@@ -4718,7 +5075,7 @@ var overlayListPanelClass = cn(
 );
 
 // src/chat/workforce-selector.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var WorkforceSelector = ({
   workforces,
   value,
@@ -4729,7 +5086,7 @@ var WorkforceSelector = ({
 }) => {
   if (workforces.length === 0) return null;
   if (hideWhenSingle && workforces.length === 1) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "div",
     {
       className: cn(
@@ -4740,7 +5097,7 @@ var WorkforceSelector = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
           "select",
           {
             className: "aui-workforce-selector-input h-full cursor-pointer appearance-none rounded-full border-none bg-transparent pr-8 pl-3.5 text-sm font-medium text-foreground outline-none focus:outline-none",
@@ -4748,15 +5105,15 @@ var WorkforceSelector = ({
             onChange: (e) => onChange(e.target.value),
             "aria-label": placeholder,
             children: [
-              !value && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("option", { value: "", children: placeholder }),
+              !value && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("option", { value: "", children: placeholder }),
               workforces.map((w) => {
                 const id = idOf(w);
-                return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("option", { value: id, children: w.name ?? id }, id);
+                return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("option", { value: id, children: w.name ?? id }, id);
               })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           import_lucide_react9.ChevronDownIcon,
           {
             className: "aui-workforce-selector-icon pointer-events-none absolute right-3 size-3.5 text-muted-foreground/70",