@timbal-ai/timbal-react 0.6.1 → 0.7.1

package/dist/studio.cjs

@@ -898,10 +898,10 @@ function findParentIdFromAuiParent(messages, auiParentId) {
 }
 
 // src/chat/thread.tsx
-var import_react27 = require("react");
-var import_react28 = require("@assistant-ui/react");
+var import_react29 = require("react");
+var import_react30 = require("@assistant-ui/react");
 var import_lucide_react8 = require("lucide-react");
-var import_react29 = require("motion/react");
+var import_react31 = require("motion/react");
 
 // src/chat/attachment.tsx
 var import_react5 = require("react");
@@ -1066,6 +1066,10 @@ var TIMBAL_V2_SWITCH_THUMB = cn(
   TIMBAL_V2_ELEVATED_GRADIENT,
   "border border-border/80 shadow-sm"
 );
+var TIMBAL_V2_ELEVATED_SURFACE = cn(
+  TIMBAL_V2_ELEVATED_GRADIENT,
+  "border border-border shadow-card"
+);
 var TIMBAL_V2_SECONDARY_CHROME = [
   TIMBAL_V2_ELEVATED_GRADIENT,
   "border border-border shadow-card",
@@ -1073,6 +1077,11 @@ var TIMBAL_V2_SECONDARY_CHROME = [
   "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
   "active:from-secondary-fill-active-from active:to-secondary-fill-active-to"
 ].join(" ");
+var TIMBAL_V2_LOGO_TILE = cn(
+  "bg-gradient-to-b from-white to-neutral-100",
+  "border border-neutral-200",
+  "shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.08)]"
+);
 
 // src/ui/dialog.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -1254,7 +1263,7 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
   isIconOnly = false,
   isLoading = false,
   fullWidth = false,
-  shape = "pill",
+  shape: _shape = "pill",
   asChild = false,
   className,
   disabled,
@@ -1264,7 +1273,7 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
 }, ref) {
   const isDisabled = disabled || isLoading;
   const sizeClass = isIconOnly ? TIMBAL_V2_SIZE_ICON[size] : TIMBAL_V2_SIZE_HEIGHT[size];
-  const radiusClass = variant === "link" || variant === "ghost" ? "rounded-md" : shape === "rect" ? "rounded-md" : "rounded-full";
+  const radiusClass = "rounded-full";
   const sharedRootClass = cn(
     "relative box-border inline-flex items-center justify-center gap-2 whitespace-nowrap border-0 text-sm font-normal shadow-none transition duration-200 ease-in-out",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
@@ -1513,293 +1522,625 @@ 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_react19 = require("react");
 var import_lucide_react4 = require("lucide-react");
 
 // src/chat/syntax-highlighter.tsx
-var import_react16 = require("react");
+var import_react18 = 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_react17 = require("react");
 
 // src/artifacts/chart-artifact.tsx
+var import_react9 = require("react");
+
+// src/charts/line-area-chart.tsx
+var import_react8 = require("react");
+
+// src/charts/use-chart-width.ts
 var import_react7 = require("react");
+function useChartWidth(initial = 640) {
+  const ref = (0, import_react7.useRef)(null);
+  const [width, setWidth] = (0, import_react7.useState)(initial);
+  (0, import_react7.useEffect)(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width;
+      if (w && w > 0) setWidth(w);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  return { ref, width };
+}
 
-// src/artifacts/artifact-card.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var ArtifactCard = ({ title, kind, className, bodyClassName, toolbar, children }) => {
-  const hasHeader = Boolean(title || toolbar);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    "div",
-    {
-      className: cn(
-        "aui-artifact-root my-3 overflow-hidden rounded-xl border border-border/60 bg-background shadow-sm",
-        className
-      ),
-      "data-artifact-kind": kind,
-      children: [
-        hasHeader && /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)("span", { className: "aui-artifact-title flex-1 truncate text-xs font-semibold text-foreground/80", children: title }),
-          !title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex-1" }),
-          toolbar
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("aui-artifact-body", bodyClassName), children })
-      ]
+// src/charts/geometry.ts
+function toNum(value) {
+  const n = typeof value === "number" ? value : Number(value);
+  return Number.isFinite(n) ? n : 0;
+}
+function monotoneLinePath(points) {
+  const n = points.length;
+  if (n === 0) return "";
+  if (n === 1) return `M ${points[0].x},${points[0].y}`;
+  if (n === 2) {
+    return `M ${points[0].x},${points[0].y} L ${points[1].x},${points[1].y}`;
+  }
+  const tangents = monotoneTangents(points);
+  let d = `M ${points[0].x},${points[0].y}`;
+  for (let i = 0; i < n - 1; i++) {
+    const p0 = points[i];
+    const p1 = points[i + 1];
+    const dx = (p1.x - p0.x) / 3;
+    const c1x = p0.x + dx;
+    const c1y = p0.y + dx * tangents[i];
+    const c2x = p1.x - dx;
+    const c2y = p1.y - dx * tangents[i + 1];
+    d += ` C ${c1x},${c1y} ${c2x},${c2y} ${p1.x},${p1.y}`;
+  }
+  return d;
+}
+function monotoneAreaPath(points, baseY) {
+  if (points.length === 0) return "";
+  const line = monotoneLinePath(points);
+  const last = points[points.length - 1];
+  const first = points[0];
+  return `${line} L ${last.x},${baseY} L ${first.x},${baseY} Z`;
+}
+function monotoneTangents(points) {
+  const n = points.length;
+  const slopes = new Array(n - 1);
+  for (let i = 0; i < n - 1; i++) {
+    const dx = points[i + 1].x - points[i].x || 1;
+    slopes[i] = (points[i + 1].y - points[i].y) / dx;
+  }
+  const tangents = new Array(n);
+  tangents[0] = slopes[0];
+  tangents[n - 1] = slopes[n - 2];
+  for (let i = 1; i < n - 1; i++) {
+    const s0 = slopes[i - 1];
+    const s1 = slopes[i];
+    if (s0 * s1 <= 0) {
+      tangents[i] = 0;
+    } else {
+      tangents[i] = (s0 + s1) / 2;
     }
-  );
-};
+  }
+  for (let i = 0; i < n - 1; i++) {
+    const s = slopes[i];
+    if (s === 0) {
+      tangents[i] = 0;
+      tangents[i + 1] = 0;
+      continue;
+    }
+    const a = tangents[i] / s;
+    const b = tangents[i + 1] / s;
+    const h = Math.hypot(a, b);
+    if (h > 3) {
+      const t = 3 / h;
+      tangents[i] = t * a * s;
+      tangents[i + 1] = t * b * s;
+    }
+  }
+  return tangents;
+}
+function niceTicks(min, max, count = 4) {
+  if (!Number.isFinite(min) || !Number.isFinite(max) || max === min) {
+    return [min || 0];
+  }
+  const step = niceStep((max - min) / count);
+  const start = Math.floor(min / step) * step;
+  const out = [];
+  for (let v = start; v <= max + step / 2; v += step) {
+    out.push(round(v));
+  }
+  return out;
+}
+function niceStep(raw) {
+  const exp = Math.floor(Math.log10(Math.abs(raw) || 1));
+  const base = Math.pow(10, exp);
+  const norm = raw / base;
+  let nice = 1;
+  if (norm >= 5) nice = 5;
+  else if (norm >= 2) nice = 2;
+  return nice * base;
+}
+function round(v) {
+  return Math.round(v * 1e6) / 1e6;
+}
+function formatCompact(value, unit) {
+  const abs = Math.abs(value);
+  let s;
+  if (abs >= 1e6) s = `${round(value / 1e6)}M`;
+  else if (abs >= 1e3) s = `${round(value / 1e3)}k`;
+  else s = String(round(value));
+  return unit ? `${s}${unit}` : s;
+}
 
-// src/artifacts/chart-artifact.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var ChartArtifactView = ({
-  artifact
-}) => {
-  const { type: _t, chartType = "bar", data = [] } = artifact;
-  const xKey = artifact.xKey ?? inferXKey(data);
-  const dataKeys = (0, import_react7.useMemo)(() => {
-    if (Array.isArray(artifact.dataKey)) return artifact.dataKey;
-    if (typeof artifact.dataKey === "string") return [artifact.dataKey];
-    return inferDataKeys(data, xKey);
-  }, [artifact.dataKey, data, xKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ArtifactCard, { title: artifact.title, kind: "chart", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "aui-artifact-chart p-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      ChartSvg,
-      {
-        chartType,
-        data,
-        xKey,
-        dataKeys,
-        unit: artifact.unit
-      }
-    ),
-    dataKeys.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Legend, { dataKeys })
-  ] }) });
-};
-var COLORS = [
+// src/charts/line-area-chart.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var CHART_PALETTE = [
   "var(--primary, #6366f1)",
-  "#22c55e",
+  "#10b981",
   "#f59e0b",
-  "#ef4444",
   "#06b6d4",
-  "#a855f7"
+  "#a855f7",
+  "#ef4444"
 ];
-var W = 600;
-var H = 240;
-var PAD = { top: 12, right: 16, bottom: 28, left: 36 };
-var ChartSvg = ({ chartType, data, xKey, dataKeys, unit }) => {
-  if (data.length === 0 || dataKeys.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(EmptyState, {});
-  }
-  if (chartType === "pie") {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PieChart, { data, xKey, dataKey: dataKeys[0] });
+var PAD_DEFAULT = { top: 12, right: 16, bottom: 26, left: 44 };
+var PAD_FLUSH = { top: 20, right: 0, bottom: 8, left: 0 };
+var LineAreaChart = ({
+  data = [],
+  xKey: xKeyProp,
+  series: seriesProp,
+  variant = "area",
+  height = 240,
+  unit,
+  yMax,
+  layout = "default",
+  showGrid = true,
+  showXAxis: showXAxisProp,
+  showYAxis: showYAxisProp,
+  showLegend: showLegendProp,
+  showTooltip = true,
+  formatValue,
+  formatX,
+  className,
+  ariaLabel = "Chart"
+}) => {
+  const uid = (0, import_react8.useId)();
+  const { ref, width } = useChartWidth();
+  const [active, setActive] = (0, import_react8.useState)(null);
+  const [grown, setGrown] = (0, import_react8.useState)(false);
+  const xKey = xKeyProp ?? inferXKey(data);
+  const series = (0, import_react8.useMemo)(
+    () => resolveSeries(seriesProp, data, xKey),
+    [seriesProp, data, xKey]
+  );
+  const pad = layout === "flush" ? PAD_FLUSH : PAD_DEFAULT;
+  const showXAxis = showXAxisProp ?? layout !== "flush";
+  const showYAxis = showYAxisProp ?? layout !== "flush";
+  const showLegend = showLegendProp ?? (layout !== "flush" && series.length > 1);
+  (0, import_react8.useEffect)(() => {
+    const t = requestAnimationFrame(() => setGrown(true));
+    return () => cancelAnimationFrame(t);
+  }, []);
+  const innerW = Math.max(0, width - pad.left - pad.right);
+  const innerH = Math.max(0, height - pad.top - pad.bottom);
+  const { minV, maxV } = (0, import_react8.useMemo)(() => {
+    let lo = 0;
+    let hi = yMax ?? 0;
+    for (const s of series) {
+      for (const d of data) {
+        const v = toNum(d[s.dataKey]);
+        if (v > hi && yMax == null) hi = v;
+        if (v < lo) lo = v;
+      }
+    }
+    if (hi === lo) hi = lo + 1;
+    return { minV: lo, maxV: yMax != null ? yMax : hi * 1.08 };
+  }, [series, data, yMax]);
+  const ticks = (0, import_react8.useMemo)(() => niceTicks(minV, maxV, 4), [minV, maxV]);
+  if (data.length === 0 || series.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartEmpty, { className, height });
   }
-  const innerW = W - PAD.left - PAD.right;
-  const innerH = H - PAD.top - PAD.bottom;
-  const all = dataKeys.flatMap((k) => data.map((d) => toNum(d[k])));
-  const maxV = Math.max(0, ...all);
-  const minV = Math.min(0, ...all);
-  const range = maxV - minV || 1;
-  const yScale = (v) => PAD.top + innerH - (v - minV) / range * innerH;
+  const yScale = (v) => pad.top + innerH - (v - minV) / (maxV - minV || 1) * innerH;
   const xCount = data.length;
   const xStep = xCount > 1 ? innerW / (xCount - 1) : innerW;
-  const xPos = (i) => chartType === "bar" ? PAD.left + innerW * (i + 0.5) / xCount : PAD.left + i * xStep;
-  const ticks = niceTicks(minV, maxV);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-    "svg",
-    {
-      viewBox: `0 0 ${W} ${H}`,
-      className: "aui-artifact-chart-svg w-full",
-      role: "img",
-      "aria-label": "Chart",
-      children: [
-        ticks.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const xPos = (i) => variant === "bar" ? pad.left + innerW * (i + 0.5) / xCount : pad.left + i * xStep;
+  const baseY = yScale(Math.max(0, minV));
+  const fmtV = (v) => formatValue ? formatValue(v) : formatCompact(v, unit);
+  const fmtX = (i) => formatX ? formatX(data[i]?.[xKey], i) : String(data[i]?.[xKey] ?? i);
+  const onMove = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const px2 = event.clientX - rect.left - pad.left;
+    const i = Math.round(px2 / (xStep || 1));
+    setActive(Math.max(0, Math.min(xCount - 1, i)));
+  };
+  const labelIdx = pickXLabels(xCount, innerW);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref, className: cn("relative w-full", className), style: { height }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "svg",
+      {
+        width,
+        height,
+        role: "img",
+        "aria-label": ariaLabel,
+        className: "block overflow-visible",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("defs", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("clipPath", { id: `${uid}-grow`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "rect",
+              {
+                x: pad.left,
+                y: 0,
+                height,
+                width: grown ? innerW : 0,
+                style: { transition: "width 900ms cubic-bezier(0.22,1,0.36,1)" }
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("linearGradient", { id: `${uid}-gridfade`, x1: "0%", x2: "100%", y1: "0", y2: "0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "0%", stopColor: "white", stopOpacity: 0 }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "8%", stopColor: "white", stopOpacity: 1 }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "92%", stopColor: "white", stopOpacity: 1 }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "100%", stopColor: "white", stopOpacity: 0 })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("mask", { id: `${uid}-gridmask`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "rect",
+              {
+                x: pad.left,
+                y: pad.top,
+                width: innerW,
+                height: innerH,
+                fill: `url(#${uid}-gridfade)`
+              }
+            ) }),
+            series.map((s, i) => {
+              const color = s.color ?? CHART_PALETTE[i % CHART_PALETTE.length];
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                "linearGradient",
+                {
+                  id: `${uid}-fill-${i}`,
+                  x1: "0",
+                  x2: "0",
+                  y1: "0",
+                  y2: "1",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.28 } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
+                  ]
+                },
+                s.dataKey
+              );
+            })
+          ] }),
+          showGrid && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("g", { mask: `url(#${uid}-gridmask)`, children: ticks.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "line",
             {
-              x1: PAD.left,
-              x2: W - PAD.right,
+              x1: pad.left,
+              x2: width - pad.right,
               y1: yScale(t),
               y2: yScale(t),
               stroke: "currentColor",
-              strokeOpacity: 0.08
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              strokeOpacity: 0.14,
+              strokeDasharray: "4 4",
+              className: "text-muted-foreground"
+            },
+            i
+          )) }),
+          showYAxis && ticks.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "text",
             {
-              x: PAD.left - 6,
+              x: pad.left - 8,
               y: yScale(t),
               textAnchor: "end",
               dominantBaseline: "middle",
-              className: "fill-muted-foreground text-[10px]",
-              children: formatTick(t, unit)
+              className: "fill-muted-foreground text-[10px] tabular-nums",
+              children: fmtV(t)
+            },
+            i
+          )),
+          showXAxis && labelIdx.map((i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "text",
+            {
+              x: xPos(i),
+              y: height - pad.bottom + 16,
+              textAnchor: i === 0 ? "start" : i === xCount - 1 ? "end" : "middle",
+              className: "fill-muted-foreground text-[10px] tabular-nums",
+              children: fmtX(i)
+            },
+            i
+          )),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("g", { clipPath: `url(#${uid}-grow)`, children: variant === "bar" ? renderBars({ data, series, xCount, xPos, yScale, baseY, innerW, uid }) : series.map((s, si) => {
+            const color = s.color ?? CHART_PALETTE[si % CHART_PALETTE.length];
+            const pts = data.map((d, i) => ({
+              x: xPos(i),
+              y: yScale(toNum(d[s.dataKey]))
+            }));
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
+              variant === "area" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: monotoneAreaPath(pts, baseY), fill: `url(#${uid}-fill-${si})` }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "path",
+                {
+                  d: monotoneLinePath(pts),
+                  fill: "none",
+                  stroke: color,
+                  strokeWidth: 2,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            ] }, s.dataKey);
+          }) }),
+          showTooltip && active != null && variant !== "bar" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { pointerEvents: "none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "line",
+              {
+                x1: xPos(active),
+                x2: xPos(active),
+                y1: pad.top,
+                y2: pad.top + innerH,
+                stroke: "currentColor",
+                strokeOpacity: 0.25,
+                className: "text-foreground"
+              }
+            ),
+            series.map((s, si) => {
+              const color = s.color ?? CHART_PALETTE[si % CHART_PALETTE.length];
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "circle",
+                {
+                  cx: xPos(active),
+                  cy: yScale(toNum(data[active]?.[s.dataKey])),
+                  r: 4,
+                  fill: color,
+                  stroke: "var(--background, #fff)",
+                  strokeWidth: 2
+                },
+                s.dataKey
+              );
+            })
+          ] }),
+          showTooltip && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "rect",
+            {
+              x: pad.left,
+              y: pad.top,
+              width: innerW,
+              height: innerH,
+              fill: "transparent",
+              style: { cursor: "crosshair" },
+              onMouseMove: onMove,
+              onMouseLeave: () => setActive(null)
             }
           )
-        ] }, i)),
-        data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          "text",
-          {
-            x: xPos(i),
-            y: H - PAD.bottom + 14,
-            textAnchor: "middle",
-            className: "fill-muted-foreground text-[10px]",
-            children: String(d[xKey] ?? i)
-          },
-          i
-        )),
-        chartType === "bar" && renderBars({ data, dataKeys, xCount, xPos, yScale, minV, innerW }),
-        chartType === "line" && dataKeys.map((k, ki) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          Polyline,
-          {
-            data,
-            dataKey: k,
-            xPos,
-            yScale,
-            color: COLORS[ki % COLORS.length]
-          },
-          k
-        )),
-        chartType === "area" && dataKeys.map((k, ki) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          Area,
-          {
-            data,
-            dataKey: k,
-            xPos,
-            yScale,
-            baseY: yScale(Math.max(0, minV)),
-            color: COLORS[ki % COLORS.length]
-          },
-          k
-        ))
-      ]
-    }
-  );
+        ]
+      }
+    ),
+    showTooltip && active != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ChartTooltip,
+      {
+        x: xPos(active),
+        width,
+        title: fmtX(active),
+        rows: series.map((s, si) => ({
+          color: s.color ?? CHART_PALETTE[si % CHART_PALETTE.length],
+          label: s.label ?? s.dataKey,
+          value: fmtV(toNum(data[active]?.[s.dataKey]))
+        }))
+      }
+    ),
+    showLegend ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartLegend, { series }) : null
+  ] });
 };
 function renderBars(args) {
-  const { data, dataKeys, xCount, xPos, yScale, minV, innerW } = args;
-  const groupWidth = innerW / xCount * 0.7;
-  const barWidth = groupWidth / dataKeys.length;
-  const baseY = yScale(Math.max(0, minV));
-  return dataKeys.flatMap(
-    (k, ki) => data.map((d, i) => {
-      const v = toNum(d[k]);
-      const y = yScale(v);
-      const x = xPos(i) - groupWidth / 2 + ki * barWidth;
+  const { data, series, xCount, xPos, yScale, baseY, innerW } = args;
+  const groupWidth = innerW / xCount * 0.66;
+  const barWidth = groupWidth / series.length;
+  return series.flatMap(
+    (s, si) => data.map((d, i) => {
+      const color = s.color ?? CHART_PALETTE[si % CHART_PALETTE.length];
+      const y = yScale(toNum(d[s.dataKey]));
+      const x = xPos(i) - groupWidth / 2 + si * barWidth;
       const top = Math.min(y, baseY);
-      const height = Math.abs(y - baseY);
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      const h = Math.max(1, Math.abs(y - baseY));
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "rect",
         {
           x,
           y: top,
           width: Math.max(1, barWidth - 2),
-          height: Math.max(1, height),
-          rx: 2,
-          fill: COLORS[ki % COLORS.length]
+          height: h,
+          rx: 3,
+          fill: color
         },
-        `${k}-${i}`
+        `${s.dataKey}-${i}`
       );
     })
   );
 }
-var Polyline = ({ data, dataKey, xPos, yScale, color }) => {
-  const points = data.map((d, i) => `${xPos(i)},${yScale(toNum(d[dataKey]))}`).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "polyline",
+var ChartTooltip = ({ x, width, title, rows }) => {
+  const flip = x > width - 160;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
     {
-      points,
-      fill: "none",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinejoin: "round",
-      strokeLinecap: "round"
+      className: "pointer-events-none absolute top-2 z-10 min-w-[8rem] rounded-lg border border-border bg-popover/95 px-2.5 py-2 text-popover-foreground shadow-card-elevated backdrop-blur-sm",
+      style: {
+        left: flip ? void 0 : Math.min(x + 12, width - 8),
+        right: flip ? Math.max(width - x + 12, 8) : void 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mb-1.5 text-[11px] text-muted-foreground", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1", children: rows.map((r) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "span",
+              {
+                className: "inline-block size-2 rounded-full",
+                style: { background: r.color }
+              }
+            ),
+            r.label
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium tabular-nums text-foreground", children: r.value })
+        ] }, r.label)) })
+      ]
     }
   );
 };
-var Area = ({ data, dataKey, xPos, yScale, baseY, color }) => {
-  if (data.length === 0) return null;
-  const top = data.map((d, i) => `${xPos(i)},${yScale(toNum(d[dataKey]))}`).join(" ");
-  const path = `M ${xPos(0)},${baseY} L ${top} L ${xPos(data.length - 1)},${baseY} Z`;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: path, fill: color, fillOpacity: 0.18 }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Polyline, { data, dataKey, xPos, yScale, color })
-  ] });
+var ChartLegend = ({ series }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 pl-10 text-xs text-muted-foreground", children: series.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "span",
+    {
+      className: "inline-block size-2 rounded-sm",
+      style: { background: s.color ?? CHART_PALETTE[i % CHART_PALETTE.length] }
+    }
+  ),
+  s.label ?? s.dataKey
+] }, s.dataKey)) });
+var ChartEmpty = ({ className, height }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  "div",
+  {
+    className: cn(
+      "flex w-full items-center justify-center text-xs text-muted-foreground",
+      className
+    ),
+    style: { height },
+    children: "No data yet"
+  }
+);
+function inferXKey(data) {
+  if (data.length === 0) return "x";
+  for (const k of Object.keys(data[0])) {
+    if (typeof data[0][k] !== "number") return k;
+  }
+  return Object.keys(data[0])[0] ?? "x";
+}
+function resolveSeries(seriesProp, data, xKey) {
+  if (seriesProp && seriesProp.length > 0) {
+    return seriesProp.map((s) => typeof s === "string" ? { dataKey: s } : s);
+  }
+  if (data.length === 0) return [];
+  return Object.keys(data[0]).filter((k) => k !== xKey && typeof data[0][k] === "number").map((dataKey) => ({ dataKey }));
+}
+function pickXLabels(count, innerW) {
+  if (count <= 1) return [0];
+  const maxLabels = Math.max(2, Math.min(count, Math.floor(innerW / 64) + 1));
+  if (maxLabels >= count) return Array.from({ length: count }, (_, i) => i);
+  const out = /* @__PURE__ */ new Set([0, count - 1]);
+  const step = (count - 1) / (maxLabels - 1);
+  for (let i = 1; i < maxLabels - 1; i++) out.add(Math.round(i * step));
+  return [...out].sort((a, b) => a - b);
+}
+
+// src/artifacts/artifact-card.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ArtifactCard = ({ title, kind, className, bodyClassName, toolbar, children }) => {
+  const hasHeader = Boolean(title || toolbar);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      className: cn(
+        "aui-artifact-root my-3 overflow-hidden rounded-xl border border-border/60 bg-background shadow-sm",
+        className
+      ),
+      "data-artifact-kind": kind,
+      children: [
+        hasHeader && /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("span", { className: "aui-artifact-title flex-1 truncate text-xs font-semibold text-foreground/80", children: title }),
+          !title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex-1" }),
+          toolbar
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("aui-artifact-body", bodyClassName), children })
+      ]
+    }
+  );
 };
-var PieChart = ({ data, xKey, dataKey }) => {
-  const cx = W / 2;
-  const cy = H / 2;
-  const r = Math.min(W, H) / 2 - 16;
-  const total = data.reduce((sum, d) => sum + toNum(d[dataKey]), 0) || 1;
-  let acc = 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "svg",
+
+// src/artifacts/chart-artifact.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ChartArtifactView = ({
+  artifact,
+  embedded = false,
+  height = 300
+}) => {
+  const plot = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChartArtifactPlot, { artifact, height });
+  if (embedded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "aui-artifact-chart w-full", children: plot });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ArtifactCard, { title: artifact.title, kind: "chart", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "aui-artifact-chart pt-2", children: plot }) });
+};
+function ChartArtifactPlot({
+  artifact,
+  height
+}) {
+  const { chartType = "bar", data = [] } = artifact;
+  const xKey = artifact.xKey ?? inferXKey2(data);
+  const series = (0, import_react9.useMemo)(() => {
+    const keys = Array.isArray(artifact.dataKey) ? artifact.dataKey : typeof artifact.dataKey === "string" ? [artifact.dataKey] : inferDataKeys(data, xKey);
+    return keys.map((dataKey) => ({ dataKey }));
+  }, [artifact.dataKey, data, xKey]);
+  if (chartType === "pie") {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PieChart, { data, xKey, dataKey: series[0]?.dataKey ?? "value" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    LineAreaChart,
     {
-      viewBox: `0 0 ${W} ${H}`,
-      className: "aui-artifact-chart-svg w-full",
-      role: "img",
-      "aria-label": "Pie chart",
-      children: data.map((d, i) => {
-        const value = toNum(d[dataKey]);
-        const start = acc / total * Math.PI * 2;
-        acc += value;
-        const end = acc / total * Math.PI * 2;
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          PieSlice,
-          {
-            cx,
-            cy,
-            r,
-            start,
-            end,
-            color: COLORS[i % COLORS.length],
-            label: String(d[xKey] ?? i)
-          },
-          i
-        );
-      })
+      data,
+      xKey,
+      series,
+      layout: "flush",
+      height,
+      variant: chartType === "line" ? "line" : chartType === "area" ? "area" : "bar",
+      unit: artifact.unit,
+      ariaLabel: typeof artifact.title === "string" ? artifact.title : "Chart"
     }
   );
+}
+var PIE_W = 320;
+var PIE_H = 220;
+var PieChart = ({ data, xKey, dataKey }) => {
+  if (data.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex h-32 items-center justify-center text-xs text-muted-foreground", children: "No data" });
+  }
+  const cx = PIE_W / 2;
+  const cy = PIE_H / 2;
+  const r = Math.min(PIE_W, PIE_H) / 2 - 16;
+  const total = data.reduce((sum, d) => sum + toNum(d[dataKey]), 0) || 1;
+  let acc = 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "svg",
+      {
+        viewBox: `0 0 ${PIE_W} ${PIE_H}`,
+        className: "w-full max-w-[20rem]",
+        role: "img",
+        "aria-label": "Pie chart",
+        children: data.map((d, i) => {
+          const value = toNum(d[dataKey]);
+          const start = acc / total * Math.PI * 2;
+          acc += value;
+          const end = acc / total * Math.PI * 2;
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            PieSlice,
+            {
+              cx,
+              cy,
+              r,
+              start,
+              end,
+              color: CHART_PALETTE[i % CHART_PALETTE.length]
+            },
+            i
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "span",
+        {
+          className: "inline-block size-2 rounded-sm",
+          style: { background: CHART_PALETTE[i % CHART_PALETTE.length] }
+        }
+      ),
+      String(d[xKey] ?? i)
+    ] }, i)) })
+  ] });
 };
-var PieSlice = ({ cx, cy, r, start, end, color, label }) => {
+var PieSlice = ({ cx, cy, r, start, end, color }) => {
   const x1 = cx + Math.sin(start) * r;
   const y1 = cy - Math.cos(start) * r;
   const x2 = cx + Math.sin(end) * r;
   const y2 = cy - Math.cos(end) * r;
   const large = end - start > Math.PI ? 1 : 0;
   const path = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`;
-  const mid = (start + end) / 2;
-  const lx = cx + Math.sin(mid) * (r * 0.65);
-  const ly = cy - Math.cos(mid) * (r * 0.65);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: path, fill: color, stroke: "var(--background, #fff)", strokeWidth: 1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "text",
-      {
-        x: lx,
-        y: ly,
-        textAnchor: "middle",
-        dominantBaseline: "middle",
-        className: "fill-white text-[10px] font-semibold",
-        children: label
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: path, fill: color, stroke: "var(--background, #fff)", strokeWidth: 1.5 });
 };
-var Legend = ({ dataKeys }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "aui-artifact-chart-legend mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: dataKeys.map((k, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "span",
-    {
-      className: "inline-block size-2 rounded-sm",
-      style: { background: COLORS[i % COLORS.length] },
-      "aria-hidden": true
-    }
-  ),
-  k
-] }, k)) });
-var EmptyState = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "aui-artifact-chart-empty flex h-32 items-center justify-center text-xs text-muted-foreground", children: "No data" });
-function inferXKey(data) {
+function inferXKey2(data) {
   if (data.length === 0) return "x";
   for (const k of Object.keys(data[0])) {
     if (typeof data[0][k] !== "number") return k;
@@ -1812,41 +2153,10 @@ function inferDataKeys(data, xKey) {
     (k) => k !== xKey && typeof data[0][k] === "number"
   );
 }
-function toNum(value) {
-  const n = typeof value === "number" ? value : Number(value);
-  return Number.isFinite(n) ? n : 0;
-}
-function niceTicks(min, max, count = 4) {
-  if (max === min) return [min];
-  const range = max - min;
-  const step = niceStep(range / count);
-  const start = Math.floor(min / step) * step;
-  const out = [];
-  for (let v = start; v <= max + step / 2; v += step) {
-    out.push(round(v));
-  }
-  return out;
-}
-function niceStep(raw) {
-  const exp = Math.floor(Math.log10(Math.abs(raw))) || 0;
-  const base = Math.pow(10, exp);
-  const norm = raw / base;
-  let nice = 1;
-  if (norm >= 5) nice = 5;
-  else if (norm >= 2) nice = 2;
-  return nice * base;
-}
-function round(v) {
-  return Math.round(v * 1e6) / 1e6;
-}
-function formatTick(v, unit) {
-  const s = Math.abs(v) >= 1e3 ? `${(v / 1e3).toFixed(1)}k` : String(round(v));
-  return unit ? `${s}${unit}` : s;
-}
 
 // src/artifacts/question-artifact.tsx
-var import_react8 = require("react");
-var import_react9 = require("@assistant-ui/react");
+var import_react10 = require("react");
+var import_react11 = require("@assistant-ui/react");
 var import_lucide_react3 = require("lucide-react");
 
 // src/design/classes.ts
@@ -1961,12 +2271,12 @@ var studioQuestionOptionSelectedClass = cn(
 );
 
 // src/artifacts/question-artifact.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = 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_runtime11.jsx)(
+var OptionRadio = ({ selected }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   "span",
   {
     className: cn(
@@ -1974,18 +2284,18 @@ var OptionRadio = ({ selected }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx
       selected ? "border-foreground bg-foreground text-background" : "border-border bg-background"
     ),
     "aria-hidden": true,
-    children: selected ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.CheckIcon, { className: "size-2.5 stroke-[3]" }) : null
+    children: selected ? /* @__PURE__ */ (0, import_jsx_runtime12.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_react11.useThreadRuntime)();
+  const [selected, setSelected] = (0, import_react10.useState)([]);
+  const [submittedIds, setSubmittedIds] = (0, import_react10.useState)(null);
   const isMulti = artifact.multi === true;
   const isDisabled = submittedIds !== null;
-  const send = (0, import_react8.useCallback)(
+  const send = (0, import_react10.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);
@@ -1997,7 +2307,7 @@ var QuestionArtifactView = ({
     },
     [artifact.options, runtime]
   );
-  const onPick = (0, import_react8.useCallback)(
+  const onPick = (0, import_react10.useCallback)(
     (key) => {
       if (isDisabled) return;
       if (!isMulti) {
@@ -2010,15 +2320,15 @@ var QuestionArtifactView = ({
     },
     [isDisabled, isMulti, send]
   );
-  const onConfirm = (0, import_react8.useCallback)(() => {
+  const onConfirm = (0, import_react10.useCallback)(() => {
     send(selected);
   }, [selected, send]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: studioArtifactShellClass, "data-artifact-kind": "question", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "px-2.5 py-2", children: [
-    artifact.prompt ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mb-2 text-sm font-normal leading-snug text-foreground", children: artifact.prompt }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex flex-col gap-0.5", role: "list", children: artifact.options.map((option, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: studioArtifactShellClass, "data-artifact-kind": "question", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "px-2.5 py-2", children: [
+    artifact.prompt ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mb-2 text-sm font-normal leading-snug text-foreground", children: artifact.prompt }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime11.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "button",
         {
           type: "button",
@@ -2030,17 +2340,17 @@ var QuestionArtifactView = ({
             isDisabled && (isSelected ? "cursor-default" : "cursor-not-allowed opacity-50")
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(OptionRadio, { selected: isSelected }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "min-w-0 flex-1 text-left", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "block font-normal text-foreground", children: option.label }),
-              option.description ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: option.description }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(OptionRadio, { selected: isSelected }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "min-w-0 flex-1 text-left", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "block font-normal text-foreground", children: option.label }),
+              option.description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: option.description }) : null
             ] })
           ]
         },
         key
       );
     }) }),
-    isMulti && !submittedIds ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    isMulti && !submittedIds ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       TimbalV2Button,
       {
         type: "button",
@@ -2055,12 +2365,12 @@ var QuestionArtifactView = ({
 };
 
 // src/artifacts/html-artifact.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = 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_runtime12.jsx)(ArtifactCard, { title: artifact.title, kind: "html", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ArtifactCard, { title: artifact.title, kind: "html", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "iframe",
     {
       title: artifact.title ?? "HTML artifact",
@@ -2073,7 +2383,7 @@ var HtmlArtifactView = ({ artifact }) => {
 };
 
 // src/artifacts/json-artifact.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var JsonArtifactView = ({
   artifact
 }) => {
@@ -2085,16 +2395,16 @@ var JsonArtifactView = ({
   } catch {
     body = String(data);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ArtifactCard, { title, kind: "json", children: /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime14.jsx)(ArtifactCard, { title, kind: "json", children: /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var TableArtifactView = ({ artifact }) => {
   const rows = artifact.rows ?? [];
   const columns = artifact.columns ?? deriveColumns(rows);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ArtifactCard, { title: artifact.title, kind: "table", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "aui-artifact-table-wrap overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: "aui-artifact-table w-full border-collapse text-sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tr", { className: "border-b border-border/40 bg-muted/20", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArtifactCard, { title: artifact.title, kind: "table", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "aui-artifact-table-wrap overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("table", { className: "aui-artifact-table w-full border-collapse text-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { className: "border-b border-border/40 bg-muted/20", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "th",
       {
         className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground",
@@ -2102,11 +2412,11 @@ var TableArtifactView = ({ artifact }) => {
       },
       col.key
     )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime14.jsx)(
+        children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "td",
           {
             className: "px-3 py-2 align-top text-foreground/85",
@@ -2139,7 +2449,7 @@ function formatCell(value) {
 }
 
 // src/artifacts/ui/ui-artifact.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 
 // src/artifacts/ui/types.ts
 function isUiBinding(value) {
@@ -2192,38 +2502,38 @@ function resolveBindable(value, state) {
 }
 
 // src/artifacts/ui/registry.tsx
-var import_react10 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var UiStateContext = (0, import_react10.createContext)({});
-var UiDispatchContext = (0, import_react10.createContext)(() => {
+var import_react12 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var UiStateContext = (0, import_react12.createContext)({});
+var UiDispatchContext = (0, import_react12.createContext)(() => {
 });
-var UiStateProvider = ({ state, dispatch, children }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UiStateContext.Provider, { value: state, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UiDispatchContext.Provider, { value: dispatch, children }) });
+var UiStateProvider = ({ state, dispatch, children }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UiStateContext.Provider, { value: state, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UiDispatchContext.Provider, { value: dispatch, children }) });
 function useUiState() {
-  return (0, import_react10.useContext)(UiStateContext);
+  return (0, import_react12.useContext)(UiStateContext);
 }
 function useUiDispatch() {
-  return (0, import_react10.useContext)(UiDispatchContext);
+  return (0, import_react12.useContext)(UiDispatchContext);
 }
-var UiEventContext = (0, import_react10.createContext)(
+var UiEventContext = (0, import_react12.createContext)(
   null
 );
-var UiEventProvider = ({ onEvent, children }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UiEventContext.Provider, { value: onEvent, children });
+var UiEventProvider = ({ onEvent, children }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UiEventContext.Provider, { value: onEvent, children });
 function useUiEventEmitter() {
-  return (0, import_react10.useContext)(UiEventContext);
+  return (0, import_react12.useContext)(UiEventContext);
 }
-var UiCustomNodeRegistryContext = (0, import_react10.createContext)({});
+var UiCustomNodeRegistryContext = (0, import_react12.createContext)({});
 function useUiCustomNodeRegistry() {
-  return (0, import_react10.useContext)(UiCustomNodeRegistryContext);
+  return (0, import_react12.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_react13 = require("react");
+var import_react14 = require("motion/react");
+var import_react15 = require("@assistant-ui/react");
 
 // src/ui/button.tsx
 var import_class_variance_authority = require("class-variance-authority");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var LEGACY_SIZE_TO_V2 = {
   default: "md",
   xs: "xs",
@@ -2273,7 +2583,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_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     TimbalV2Button,
     {
       "data-slot": "button",
@@ -2281,7 +2591,7 @@ function Button({
       "data-size": size,
       variant: v2Variant,
       size: v2Size,
-      shape: "rect",
+      shape: "pill",
       isIconOnly,
       asChild,
       className: cn(buttonVariants({ variant, size, className })),
@@ -2291,29 +2601,29 @@ function Button({
 }
 
 // src/artifacts/ui/nodes.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var UiNodeView = ({ node }) => {
   switch (node.kind) {
     case "box":
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BoxNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BoxNode, { node });
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextNode, { node });
     case "heading":
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(HeadingNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HeadingNode, { node });
     case "badge":
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BadgeNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BadgeNode, { node });
     case "button":
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ButtonNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ButtonNode, { node });
     case "toggle":
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToggleNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToggleNode, { node });
     case "slider":
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SliderNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SliderNode, { node });
     case "tooltip":
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipNode, { node });
     case "draggable":
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DraggableNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DraggableNode, { node });
     case "custom":
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CustomNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CustomNode, { node });
     default:
       return null;
   }
@@ -2321,9 +2631,9 @@ var UiNodeView = ({ node }) => {
 function useActionRunner() {
   const state = useUiState();
   const dispatch = useUiDispatch();
-  const runtime = (0, import_react13.useThreadRuntime)();
+  const runtime = (0, import_react15.useThreadRuntime)();
   const emit = useUiEventEmitter();
-  return (0, import_react11.useCallback)(
+  return (0, import_react13.useCallback)(
     (actions) => {
       if (!actions) return;
       const list = Array.isArray(actions) ? actions : [actions];
@@ -2373,7 +2683,7 @@ var JUSTIFY_CLS = {
 };
 var BoxNode = ({ node }) => {
   const dir = node.direction ?? "col";
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       className: cn(
@@ -2388,7 +2698,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_runtime17.jsx)(UiNodeView, { node: child }, child.id ?? i))
+      children: node.children?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(UiNodeView, { node: child }, child.id ?? i))
     }
   );
 };
@@ -2407,7 +2717,7 @@ var TEXT_WEIGHT = {
 var TextNode = ({ node }) => {
   const state = useUiState();
   const value = resolveBindable(node.value, state);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "span",
     {
       className: cn(
@@ -2438,13 +2748,13 @@ var HeadingNode = ({ node }) => {
   );
   switch (level) {
     case 1:
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h1", { className: cls, children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h1", { className: cls, children: value });
     case 2:
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: cls, children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h2", { className: cls, children: value });
     case 3:
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: cls, children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: cls, children: value });
     case 4:
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h4", { className: cls, children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h4", { className: cls, children: value });
   }
 };
 var BADGE_TONE = {
@@ -2457,7 +2767,7 @@ var BADGE_TONE = {
 var BadgeNode = ({ node }) => {
   const state = useUiState();
   const value = String(resolveBindable(node.value, state) ?? "");
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "span",
     {
       className: cn(
@@ -2474,7 +2784,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_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     Button,
     {
       variant: node.variant ?? "default",
@@ -2496,7 +2806,7 @@ var ToggleNode = ({ node }) => {
     dispatch({ type: "toggle", path: node.binding });
     run(node.onChange);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "label",
     {
       className: cn(
@@ -2504,7 +2814,7 @@ var ToggleNode = ({ node }) => {
         node.className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "button",
           {
             type: "button",
@@ -2515,7 +2825,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_runtime17.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "span",
               {
                 className: cn(
@@ -2528,7 +2838,7 @@ var ToggleNode = ({ node }) => {
             )
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-foreground/85", children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-foreground/85", children: label })
       ]
     }
   );
@@ -2548,12 +2858,12 @@ var SliderNode = ({ node }) => {
     const next = Number(e.target.value);
     dispatch({ type: "set", path: node.binding, value: next });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("aui-ui-slider flex flex-col gap-1", node.className), children: [
-    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: label }),
-      showValue && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "font-mono", children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("aui-ui-slider flex flex-col gap-1", node.className), children: [
+    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: label }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "font-mono", children: value })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "input",
       {
         type: "range",
@@ -2575,9 +2885,9 @@ var SliderNode = ({ node }) => {
 var TooltipNode = ({ node }) => {
   const state = useUiState();
   const content = String(resolveBindable(node.content, state) ?? "");
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: cn("aui-ui-tooltip-trigger inline-flex", node.className), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UiNodeView, { node: node.child }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipContent, { side: node.side ?? "top", children: content })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: cn("aui-ui-tooltip-trigger inline-flex", node.className), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(UiNodeView, { node: node.child }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipContent, { side: node.side ?? "top", children: content })
   ] }) });
 };
 var DraggableNode = ({ node }) => {
@@ -2585,8 +2895,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_runtime17.jsx)(
-    import_react12.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_react14.motion.div,
     {
       drag: dragProp,
       dragMomentum: false,
@@ -2597,7 +2907,7 @@ var DraggableNode = ({ node }) => {
         "aui-ui-draggable inline-block cursor-grab touch-none",
         node.className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UiNodeView, { node: node.child })
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(UiNodeView, { node: node.child })
     }
   );
 };
@@ -2607,8 +2917,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_runtime17.jsx)(UiNodeView, { node: child }, child.id ?? i));
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Renderer, { props: resolvedProps, children });
+  const children = node.children?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(UiNodeView, { node: child }, child.id ?? i));
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Renderer, { props: resolvedProps, children });
 };
 function resolveProps(props, state) {
   const out = {};
@@ -2619,17 +2929,17 @@ function resolveProps(props, state) {
 }
 
 // src/artifacts/ui/ui-artifact.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var UiArtifactView = ({ artifact }) => {
-  const [state, dispatch] = (0, import_react14.useReducer)(
+  const [state, dispatch] = (0, import_react16.useReducer)(
     uiStateReducer,
     artifact.initialState ?? {}
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ArtifactCard, { title: artifact.title, kind: "ui", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(UiStateProvider, { state, dispatch, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "aui-ui-root p-3", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(UiNodeView, { node: artifact.root }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactCard, { title: artifact.title, kind: "ui", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(UiStateProvider, { state, dispatch, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "aui-ui-root p-3", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(UiNodeView, { node: artifact.root }) }) }) });
 };
 
 // src/artifacts/registry.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var defaultArtifactRenderers = {
   chart: ChartArtifactView,
   question: QuestionArtifactView,
@@ -2638,25 +2948,25 @@ var defaultArtifactRenderers = {
   table: TableArtifactView,
   ui: UiArtifactView
 };
-var ArtifactRegistryContext = (0, import_react15.createContext)(
+var ArtifactRegistryContext = (0, import_react17.createContext)(
   defaultArtifactRenderers
 );
 var ArtifactRegistryProvider = ({ renderers, override, children }) => {
-  const merged = (0, import_react15.useMemo)(() => {
+  const merged = (0, import_react17.useMemo)(() => {
     if (!renderers) return defaultArtifactRenderers;
     if (override) return renderers;
     return { ...defaultArtifactRenderers, ...renderers };
   }, [renderers, override]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactRegistryContext.Provider, { value: merged, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ArtifactRegistryContext.Provider, { value: merged, children });
 };
 function useArtifactRegistry() {
-  return (0, import_react15.useContext)(ArtifactRegistryContext);
+  return (0, import_react17.useContext)(ArtifactRegistryContext);
 }
 var ArtifactView = ({ artifact }) => {
   const registry = useArtifactRegistry();
   const Renderer = registry[artifact.type] ?? registry.json;
   if (!Renderer) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Renderer, { artifact });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Renderer, { artifact });
 };
 
 // src/artifacts/parse.ts
@@ -2732,7 +3042,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_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var SHIKI_THEME_DARK = "vitesse-dark";
 var SHIKI_THEME_LIGHT = "vitesse-light";
 var highlighterPromise = null;
@@ -2770,8 +3080,8 @@ var ShikiSyntaxHighlighter = ({
   language,
   code
 }) => {
-  const [html, setHtml] = (0, import_react16.useState)(null);
-  (0, import_react16.useEffect)(() => {
+  const [html, setHtml] = (0, import_react18.useState)(null);
+  (0, import_react18.useEffect)(() => {
     let cancelled = false;
     (async () => {
       try {
@@ -2801,13 +3111,13 @@ var ShikiSyntaxHighlighter = ({
     try {
       const parsed = JSON.parse(code);
       if (isArtifact(parsed)) {
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ArtifactView, { artifact: parsed });
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ArtifactView, { artifact: parsed });
       }
     } catch {
     }
   }
   if (html) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.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",
@@ -2815,14 +3125,14 @@ var ShikiSyntaxHighlighter = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pre, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Code2, { children: code }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Pre, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Code2, { children: code }) });
 };
 var syntax_highlighter_default = ShikiSyntaxHighlighter;
 
 // src/chat/markdown-text.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var MarkdownTextImpl = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     import_react_markdown.MarkdownTextPrimitive,
     {
       remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
@@ -2835,7 +3145,7 @@ var MarkdownTextImpl = () => {
     }
   );
 };
-var MarkdownText = (0, import_react17.memo)(MarkdownTextImpl);
+var MarkdownText = (0, import_react19.memo)(MarkdownTextImpl);
 var CodeHeader = ({ language, code }) => {
   const { isCopied, copyToClipboard } = useCopyToClipboard();
   if (isArtifactFenceLanguage(language)) return null;
@@ -2843,20 +3153,20 @@ var CodeHeader = ({ language, code }) => {
     if (!code || isCopied) return;
     copyToClipboard(code);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime21.jsxs)("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.jsxs)("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40" }),
       language
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       TooltipIconButton,
       {
         tooltip: isCopied ? "Copied!" : "Copy",
         onClick: onCopy,
         className: "transition-colors hover:text-foreground",
         children: [
-          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.CopyIcon, { className: "h-3.5 w-3.5" }),
-          isCopied && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.CheckIcon, { className: "h-3.5 w-3.5 text-emerald-500" })
+          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react4.CopyIcon, { className: "h-3.5 w-3.5" }),
+          isCopied && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react4.CheckIcon, { className: "h-3.5 w-3.5 text-emerald-500" })
         ]
       }
     )
@@ -2865,7 +3175,7 @@ var CodeHeader = ({ language, code }) => {
 var useCopyToClipboard = ({
   copiedDuration = 3e3
 } = {}) => {
-  const [isCopied, setIsCopied] = (0, import_react17.useState)(false);
+  const [isCopied, setIsCopied] = (0, import_react19.useState)(false);
   const copyToClipboard = (value) => {
     if (!value) return;
     navigator.clipboard.writeText(value).then(() => {
@@ -2876,7 +3186,7 @@ var useCopyToClipboard = ({
   return { isCopied, copyToClipboard };
 };
 var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownComponents)({
-  h1: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  h1: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "h1",
     {
       className: cn(
@@ -2886,7 +3196,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h2: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  h2: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "h2",
     {
       className: cn(
@@ -2896,7 +3206,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h3: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  h3: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "h3",
     {
       className: cn(
@@ -2906,7 +3216,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h4: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  h4: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "h4",
     {
       className: cn(
@@ -2916,7 +3226,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h5: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  h5: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "h5",
     {
       className: cn(
@@ -2926,7 +3236,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h6: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  h6: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "h6",
     {
       className: cn(
@@ -2936,7 +3246,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  p: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  p: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "p",
     {
       className: cn(
@@ -2946,7 +3256,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "a",
     {
       className: cn(
@@ -2958,7 +3268,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "blockquote",
     {
       className: cn(
@@ -2968,7 +3278,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  ul: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  ul: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "ul",
     {
       className: cn(
@@ -2978,7 +3288,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  ol: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  ol: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "ol",
     {
       className: cn(
@@ -2988,7 +3298,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  hr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  hr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "hr",
     {
       className: cn(
@@ -2998,14 +3308,14 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  table: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "my-4 w-full overflow-x-auto rounded-lg border border-border/50", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  table: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "my-4 w-full overflow-x-auto rounded-lg border border-border/50", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "table",
     {
       className: cn("aui-md-table w-full border-collapse text-sm", className),
       ...props
     }
   ) }),
-  th: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  th: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "th",
     {
       className: cn(
@@ -3015,7 +3325,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  td: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  td: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "td",
     {
       className: cn(
@@ -3025,7 +3335,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  tr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  tr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "tr",
     {
       className: cn(
@@ -3035,8 +3345,8 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  li: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { className: cn("aui-md-li leading-[1.7]", className), ...props }),
-  sup: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  li: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { className: cn("aui-md-li leading-[1.7]", className), ...props }),
+  sup: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "sup",
     {
       className: cn(
@@ -3046,7 +3356,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  pre: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  pre: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "pre",
     {
       className: cn(
@@ -3058,7 +3368,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_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "code",
       {
         className: cn(
@@ -3069,20 +3379,20 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       }
     );
   },
-  strong: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("strong", { className: cn("font-semibold text-foreground", className), ...props }),
-  em: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("em", { className: cn("italic", className), ...props }),
+  strong: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("strong", { className: cn("font-semibold text-foreground", className), ...props }),
+  em: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("em", { className: cn("italic", className), ...props }),
   CodeHeader
 });
 
 // src/chat/tool-fallback.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_lucide_react5 = require("lucide-react");
-var import_react22 = require("@assistant-ui/react");
+var import_react24 = require("@assistant-ui/react");
 
 // src/ui/shimmer.tsx
-var import_react18 = require("motion/react");
-var import_react19 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react20 = require("motion/react");
+var import_react21 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var ShimmerComponent = ({
   children,
   as: Component = "p",
@@ -3090,14 +3400,14 @@ var ShimmerComponent = ({
   duration = 2,
   spread = 2
 }) => {
-  const MotionComponent = import_react18.motion.create(
+  const MotionComponent = import_react20.motion.create(
     Component
   );
-  const dynamicSpread = (0, import_react19.useMemo)(
+  const dynamicSpread = (0, import_react21.useMemo)(
     () => (children?.length ?? 0) * spread,
     [children, spread]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     MotionComponent,
     {
       animate: { backgroundPosition: "0% center" },
@@ -3120,11 +3430,11 @@ var ShimmerComponent = ({
     }
   );
 };
-var Shimmer = (0, import_react19.memo)(ShimmerComponent);
+var Shimmer = (0, import_react21.memo)(ShimmerComponent);
 
 // src/chat/motion.tsx
-var import_react20 = require("motion/react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react22 = require("motion/react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var luxuryEase = [0.16, 1, 0.3, 1];
 var TOOL_ENTER_MS = 0.78;
 var TOOL_EXIT_MS = 0.28;
@@ -3150,10 +3460,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_react22.useReducedMotion)() ?? false;
   const { enter, exit } = toolPresenceTransition(reduced);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_react20.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_react22.motion.div,
     {
       className: cn("aui-tool-motion w-full min-w-0", className),
       initial: toolMotionState(reduced, true, "settled"),
@@ -3172,11 +3482,11 @@ function ToolPresence({
   className,
   variant = "settled"
 }) {
-  const reduced = (0, import_react20.useReducedMotion)() ?? false;
+  const reduced = (0, import_react22.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_runtime23.jsx)(import_react20.AnimatePresence, { mode: "wait", initial: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_react20.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react22.AnimatePresence, { mode: "wait", initial: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_react22.motion.div,
     {
       className: cn("aui-tool-presence w-full min-w-0", className),
       initial: toolMotionState(reduced, true, variant),
@@ -3196,8 +3506,8 @@ function ToolBodyPresence({
   children,
   className
 }) {
-  const reduced = (0, import_react20.useReducedMotion)() ?? false;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const reduced = (0, import_react22.useReducedMotion)() ?? false;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       className: cn(
@@ -3205,7 +3515,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_runtime23.jsx)("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
         {
           className: cn(
@@ -3221,7 +3531,7 @@ function ToolBodyPresence({
 }
 
 // src/chat/tool-fallback.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function detectRunning({
   status,
   result,
@@ -3235,7 +3545,7 @@ function detectRunning({
 }
 function useToolRunning(props) {
   const { isRunning: streamRunning } = useTimbalRuntime();
-  const partStatus = (0, import_react22.useAuiState)((s) => s.part.status);
+  const partStatus = (0, import_react24.useAuiState)((s) => s.part.status);
   return detectRunning({
     status: partStatus ?? props.status,
     result: props.result,
@@ -3253,8 +3563,8 @@ function formatToolResult(result) {
     return String(result);
   }
 }
-var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "inline-flex min-w-0 max-w-full items-baseline gap-1", children: [
-  action ? shimmer ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "inline-flex min-w-0 max-w-full items-baseline gap-1", children: [
+  action ? shimmer ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     Shimmer,
     {
       as: "span",
@@ -3263,10 +3573,10 @@ var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__
       spread: 2.5,
       children: action
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: studioTimelineActionClass, children: action }) : null,
-  detail ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: studioTimelineDetailClass, children: detail }) : null
+  ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: studioTimelineActionClass, children: action }) : null,
+  detail ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: studioTimelineDetailClass, children: detail }) : null
 ] });
-var TimelineHoverChevron = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var TimelineHoverChevron = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   import_lucide_react5.ChevronRightIcon,
   {
     className: studioTimelineChevronClass(expanded),
@@ -3274,9 +3584,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_react23.useState)(false);
   const detail = formatToolLabel(toolName);
-  const formattedArgs = (0, import_react21.useMemo)(() => {
+  const formattedArgs = (0, import_react23.useMemo)(() => {
     if (!argsText || argsText === "{}") return null;
     try {
       return JSON.stringify(JSON.parse(argsText), null, 2);
@@ -3284,17 +3594,17 @@ var ToolPanel = ({ toolName, argsText, result, isError }) => {
       return argsText;
     }
   }, [argsText]);
-  const formattedResult = (0, import_react21.useMemo)(() => {
+  const formattedResult = (0, import_react23.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_runtime24.jsx)("div", { className: "aui-tool-row w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TimelineActionLabel, { action, detail }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "aui-tool-row w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TimelineActionLabel, { action, detail }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "aui-tool-row w-full min-w-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-tool-row w-full min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "button",
       {
         type: "button",
@@ -3302,7 +3612,7 @@ var ToolPanel = ({ toolName, argsText, result, isError }) => {
         "aria-expanded": open,
         "aria-label": `${action} ${detail}`,
         className: studioTimelineRowButtonClass,
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           "span",
           {
             className: cn(
@@ -3311,37 +3621,37 @@ var ToolPanel = ({ toolName, argsText, result, isError }) => {
               "text-foreground"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TimelineActionLabel, { action, detail }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TimelineHoverChevron, { expanded: open })
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TimelineActionLabel, { action, detail }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TimelineHoverChevron, { expanded: open })
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       ToolBodyPresence,
       {
         open,
         className: cn(studioTimelineBodyPadClass, "gap-2"),
         children: [
-          formattedArgs ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          formattedArgs ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "div",
             {
               className: cn(
                 studioComposerIoWellClass,
                 "max-h-48 overflow-auto px-2.5 py-2"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime25.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_runtime24.jsx)(
+          formattedResult ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "div",
             {
               className: cn(
                 studioComposerIoWellClass,
                 "max-h-48 overflow-auto px-2.5 py-2"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime25.jsx)("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] font-normal leading-relaxed text-foreground", children: formattedResult })
             }
           ) : null
         ]
@@ -3358,20 +3668,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_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     ToolPresence,
     {
       presenceKey,
       variant: isRunning ? "executing" : "settled",
       className: "py-0.5",
-      children: isRunning ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "aui-tool-running", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      children: isRunning ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "aui-tool-running", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         TimelineActionLabel,
         {
           action: "Using",
           detail: formatToolLabel(toolName),
           shimmer: true
         }
-      ) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         ToolPanel,
         {
           toolName,
@@ -3383,13 +3693,13 @@ var ToolFallbackImpl = ({
     }
   );
 };
-var ToolFallback = (0, import_react21.memo)(
+var ToolFallback = (0, import_react23.memo)(
   ToolFallbackImpl
 );
 ToolFallback.displayName = "ToolFallback";
 
 // src/artifacts/tool-artifact.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var ToolArtifactFallback = (props) => {
   const registry = useArtifactRegistry();
   const isRunning = useToolRunning({
@@ -3401,24 +3711,24 @@ var ToolArtifactFallback = (props) => {
     if (artifact) {
       const Renderer = registry[artifact.type];
       if (Renderer) {
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           ToolMotion,
           {
             motionKey: `artifact-${artifact.type}`,
             className: "aui-tool-artifact",
-            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Renderer, { artifact })
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Renderer, { artifact })
           }
         );
       }
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ToolFallback, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ToolFallback, { ...props });
 };
 
 // src/chat/composer.tsx
-var import_react23 = require("@assistant-ui/react");
+var import_react25 = require("@assistant-ui/react");
 var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Composer = ({
   placeholder = "Send a message...",
   showAttachments,
@@ -3429,10 +3739,10 @@ var Composer = ({
 }) => {
   const attachmentsEnabled = useTimbalAttachmentsEnabled();
   const attachUi = showAttachments !== false && attachmentsEnabled;
-  const shell = /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    attachUi && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ComposerAttachments, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ComposerInput, { placeholder, autoFocus: !noAutoFocus }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  const shell = /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    attachUi && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ComposerAttachments, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ComposerInput, { placeholder, autoFocus: !noAutoFocus }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       ComposerToolbar,
       {
         showAttachments: attachUi,
@@ -3441,15 +3751,15 @@ var Composer = ({
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_react23.ComposerPrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_react25.ComposerPrimitive.Root,
     {
       className: cn(
         "aui-composer-root relative flex w-full flex-col",
         className
       ),
-      children: attachUi ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_react23.ComposerPrimitive.AttachmentDropzone,
+      children: attachUi ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        import_react25.ComposerPrimitive.AttachmentDropzone,
         {
           className: cn(
             studioComposeInputShellClass,
@@ -3457,7 +3767,7 @@ var Composer = ({
           ),
           children: shell
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: studioComposeInputShellClass, children: shell })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: studioComposeInputShellClass, children: shell })
     }
   );
 };
@@ -3465,7 +3775,7 @@ var ComposerInput = ({
   placeholder,
   autoFocus
 }) => {
-  const composer = (0, import_react23.useComposerRuntime)();
+  const composer = (0, import_react25.useComposerRuntime)();
   const onKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
       e.preventDefault();
@@ -3477,8 +3787,8 @@ var ComposerInput = ({
     el.style.height = "auto";
     el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_react23.ComposerPrimitive.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_react25.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",
@@ -3491,17 +3801,17 @@ var ComposerInput = ({
   );
 };
 var ComposerToolbar = ({ showAttachments, toolbar, sendTooltip }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.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_runtime26.jsxs)("div", { className: "flex items-center gap-1", children: [
-      showAttachments && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ComposerAddAttachment, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsxs)("div", { className: "flex items-center gap-1", children: [
+      showAttachments && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ComposerAddAttachment, {}),
       toolbar
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ComposerSendOrCancel, { sendTooltip })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ComposerSendOrCancel, { sendTooltip })
   ] });
 };
 var ComposerSendOrCancel = ({ sendTooltip }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react23.AuiIf, { condition: (s) => !s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react23.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react25.AuiIf, { condition: (s) => !s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react25.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       TooltipIconButton,
       {
         tooltip: sendTooltip,
@@ -3509,34 +3819,34 @@ var ComposerSendOrCancel = ({ sendTooltip }) => {
         type: "submit",
         className: "aui-composer-send shrink-0 disabled:opacity-30",
         "aria-label": "Send message",
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react6.ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react6.ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
       }
     ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react23.AuiIf, { condition: (s) => s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react23.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react25.AuiIf, { condition: (s) => s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react25.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       TooltipIconButton,
       {
         tooltip: "Stop generating",
         variant: "primary",
         className: "aui-composer-cancel shrink-0",
         "aria-label": "Stop generating",
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react6.SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.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_react26 = require("react");
+var import_react27 = require("@assistant-ui/react");
 var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Suggestions = ({
   suggestions,
   className
 }) => {
   const items = useResolvedSuggestions(suggestions);
   if (!items || items.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       className: cn(
@@ -3545,17 +3855,17 @@ var Suggestions = ({
       ),
       role: "list",
       "aria-label": "Suggested prompts",
-      children: items.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SuggestionRow, { suggestion }, (suggestion.prompt ?? suggestion.title) + i))
+      children: items.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SuggestionRow, { suggestion }, (suggestion.prompt ?? suggestion.title) + i))
     }
   );
 };
 var SuggestionRow = ({ suggestion }) => {
-  const runtime = (0, import_react25.useThreadRuntime)();
+  const runtime = (0, import_react27.useThreadRuntime)();
   const onClick = () => {
     const text = suggestion.prompt ?? suggestion.title;
     runtime.append({ role: "user", content: [{ type: "text", text }] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "button",
     {
       type: "button",
@@ -3563,20 +3873,20 @@ var SuggestionRow = ({ suggestion }) => {
       onClick,
       className: cn("aui-thread-suggestion", studioListRowButtonClass),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "aui-thread-suggestion-icon shrink-0 text-muted-foreground", children: suggestion.icon ?? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ArrowUpIcon, { className: "size-4", strokeWidth: 1.75, "aria-hidden": true }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "aui-thread-suggestion-text min-w-0 flex-1 text-left", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.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_runtime28.jsx)("span", { className: "aui-thread-suggestion-icon shrink-0 text-muted-foreground", children: suggestion.icon ?? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react7.ArrowUpIcon, { className: "size-4", strokeWidth: 1.75, "aria-hidden": true }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "aui-thread-suggestion-text min-w-0 flex-1 text-left", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.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_react26.useState)(
     () => Array.isArray(source) ? source : void 0
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!source) {
       setResolved(void 0);
       return;
@@ -3595,7 +3905,7 @@ function useResolvedSuggestions(source) {
       cancelled = true;
     };
   }, [source]);
-  return (0, import_react24.useMemo)(() => resolved, [resolved]);
+  return (0, import_react26.useMemo)(() => resolved, [resolved]);
 }
 
 // src/design/theme-sanity.ts
@@ -3668,21 +3978,22 @@ function scheduleThemeSanityCheck() {
 }
 
 // src/chat/thread-variant.tsx
-var import_react26 = require("react");
-var ThreadVariantContext = (0, import_react26.createContext)("default");
+var import_react28 = require("react");
+var ThreadVariantContext = (0, import_react28.createContext)("default");
 var ThreadVariantProvider = ThreadVariantContext.Provider;
 function useThreadVariant() {
-  return (0, import_react26.useContext)(ThreadVariantContext);
+  return (0, import_react28.useContext)(ThreadVariantContext);
 }
 
 // src/chat/thread.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var Thread = ({
   className,
   variant = "default",
   maxWidth: maxWidthProp,
   welcome,
   suggestions,
+  showWelcomeSuggestions,
   composerPlaceholder,
   components,
   artifacts,
@@ -3698,17 +4009,17 @@ var Thread = ({
   const EditComposerSlot = components?.EditComposer ?? EditComposer;
   const ScrollToBottomSlot = components?.ScrollToBottom ?? ThreadScrollToBottom;
   const SuggestionsSlot = components?.Suggestions ?? Suggestions;
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     scheduleThemeSanityCheck();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ThreadVariantProvider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ThreadVariantProvider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     ArtifactRegistryProvider,
     {
       renderers: artifacts?.renderers,
       override: artifacts?.override,
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(UiEventProvider, { onEvent: onArtifactEvent ?? (() => {
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        import_react28.ThreadPrimitive.Root,
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(UiEventProvider, { onEvent: onArtifactEvent ?? (() => {
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        import_react30.ThreadPrimitive.Root,
         {
           className: cn(
             "aui-root aui-thread-root @container flex h-full flex-col bg-transparent",
@@ -3717,8 +4028,8 @@ var Thread = ({
           ),
           style: { ["--thread-max-width"]: maxWidth },
           "data-thread-variant": variant,
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-            import_react28.ThreadPrimitive.Viewport,
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+            import_react30.ThreadPrimitive.Viewport,
             {
               turnAnchor: "bottom",
               className: cn(
@@ -3726,16 +4037,17 @@ var Thread = ({
                 isPanel ? "px-2 pt-2" : "px-4 pt-4"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   WelcomeSlot,
                   {
                     config: welcome,
                     suggestions,
+                    showWelcomeSuggestions,
                     Suggestions: SuggestionsSlot
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  import_react28.ThreadPrimitive.Messages,
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  import_react30.ThreadPrimitive.Messages,
                   {
                     components: {
                       UserMessage: UserMessageSlot,
@@ -3744,14 +4056,14 @@ var Thread = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  import_react28.ThreadPrimitive.ViewportFooter,
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  import_react30.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_runtime28.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                       "div",
                       {
                         className: cn(
@@ -3759,8 +4071,8 @@ var Thread = ({
                           isPanel ? "gap-2" : "gap-4"
                         ),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ScrollToBottomSlot, {}),
-                          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ComposerSlot, { placeholder })
+                          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ScrollToBottomSlot, {}),
+                          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ComposerSlot, { placeholder })
                         ]
                       }
                     )
@@ -3775,13 +4087,13 @@ var Thread = ({
   ) });
 };
 var ThreadScrollToBottom = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react30.ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime28.jsx)(import_lucide_react8.ArrowDownIcon, { className: "size-4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react8.ArrowDownIcon, { className: "size-4" })
     }
   ) });
 };
@@ -3811,16 +4123,18 @@ var welcomeIcon = {
 var ThreadWelcome = ({
   config,
   suggestions,
+  showWelcomeSuggestions: showWelcomeSuggestionsProp,
   Suggestions: SuggestionsSlot = Suggestions
 }) => {
-  const isEmpty = (0, import_react28.useThread)((s) => s.messages.length === 0);
+  const isEmpty = (0, import_react30.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_runtime28.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_runtime28.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-      import_react29.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      import_react31.motion.div,
       {
         className: cn(
           "aui-thread-welcome-message flex flex-col items-center justify-center text-center",
@@ -3830,9 +4144,9 @@ var ThreadWelcome = ({
         initial: "initial",
         animate: "animate",
         children: [
-          config?.icon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react29.motion.div, { variants: welcomeIcon, className: isPanel ? "mb-3" : "mb-5", children: config.icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            import_react29.motion.h1,
+          config?.icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react31.motion.div, { variants: welcomeIcon, className: isPanel ? "mb-3" : "mb-5", children: config.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_react31.motion.h1,
             {
               variants: welcomeItem,
               className: cn(
@@ -3842,8 +4156,8 @@ var ThreadWelcome = ({
               children: config?.heading ?? defaultHeading
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            import_react29.motion.p,
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_react31.motion.p,
             {
               variants: welcomeItem,
               className: "aui-thread-welcome-message-inner mt-1.5 text-muted-foreground text-sm",
@@ -3853,16 +4167,16 @@ var ThreadWelcome = ({
         ]
       }
     ) }),
-    suggestions && !isPanel ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "aui-thread-welcome-suggestions mx-auto w-full max-w-(--thread-max-width) px-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SuggestionsSlot, { suggestions }) }) : null
+    showWelcomeSuggestions && suggestions ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "aui-thread-welcome-suggestions mx-auto w-full max-w-(--thread-max-width) px-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SuggestionsSlot, { suggestions }) }) : null
   ] });
 };
 var MessageError = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.MessagePrimitive.Error, { children: /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)(import_react28.ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react30.MessagePrimitive.Error, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react30.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_runtime29.jsx)(import_react30.ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
 };
 var AssistantMessage = () => {
   const isPanel = useThreadVariant() === "panel";
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-    import_react28.MessagePrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    import_react30.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",
@@ -3870,7 +4184,7 @@ var AssistantMessage = () => {
       ),
       "data-role": "assistant",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           "div",
           {
             className: cn(
@@ -3878,8 +4192,8 @@ var AssistantMessage = () => {
               isPanel ? "px-1 text-sm" : "px-2"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                import_react28.MessagePrimitive.Parts,
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                import_react30.MessagePrimitive.Parts,
                 {
                   components: {
                     Text: MarkdownText,
@@ -3889,11 +4203,11 @@ var AssistantMessage = () => {
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MessageError, {})
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MessageError, {})
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "aui-assistant-message-footer mt-1 mb-3 ml-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AssistantActionBar, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "aui-assistant-message-footer mt-1 mb-3 ml-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AssistantActionBar, {}) })
       ]
     }
   );
@@ -3906,36 +4220,36 @@ var ASSISTANT_ACTION_ICON_CLASS = cn(
   "[&>span:first-child]:group-hover/tbv2:bg-ghost-fill-hover"
 );
 var AssistantActionBar = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-    import_react28.ActionBarPrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    import_react30.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_runtime28.jsx)(import_react28.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react30.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           TooltipIconButton,
           {
             tooltip: "Copy",
             variant: "ghost",
             className: ASSISTANT_ACTION_ICON_CLASS,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.AuiIf, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.CheckIcon, { className: "size-3" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.AuiIf, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.CopyIcon, { className: "size-3" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react30.AuiIf, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react8.CheckIcon, { className: "size-3" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react30.AuiIf, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react8.CopyIcon, { className: "size-3" }) })
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react30.ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           TooltipIconButton,
           {
             tooltip: "Regenerate",
             variant: "ghost",
             className: ASSISTANT_ACTION_ICON_CLASS,
-            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.RefreshCwIcon, { className: "size-3" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react8.RefreshCwIcon, { className: "size-3" })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react28.ActionBarMorePrimitive.Root, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react30.ActionBarMorePrimitive.Root, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react30.ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             TooltipIconButton,
             {
               tooltip: "More",
@@ -3944,17 +4258,17 @@ var AssistantActionBar = () => {
                 ASSISTANT_ACTION_ICON_CLASS,
                 "data-[state=open]:text-muted-foreground/80"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.MoreHorizontalIcon, { className: "size-3" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react8.MoreHorizontalIcon, { className: "size-3" })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            import_react28.ActionBarMorePrimitive.Content,
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_react30.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_runtime28.jsx)(import_react28.ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)(import_lucide_react8.DownloadIcon, { className: "size-4 shrink-0" }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react30.ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react30.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_runtime29.jsx)(import_lucide_react8.DownloadIcon, { className: "size-4 shrink-0" }),
                 "Export as Markdown"
               ] }) })
             }
@@ -3965,12 +4279,12 @@ var AssistantActionBar = () => {
   );
 };
 var UserMessageText = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.MessagePartPrimitive.Text, { smooth: false }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react30.MessagePartPrimitive.Text, { smooth: false }) });
 };
 var UserMessage = () => {
   const isPanel = useThreadVariant() === "panel";
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-    import_react28.MessagePrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    import_react30.MessagePrimitive.Root,
     {
       className: cn(
         "aui-user-message-root mx-auto flex w-full max-w-(--thread-max-width) flex-col items-end gap-2",
@@ -3978,9 +4292,9 @@ var UserMessage = () => {
       ),
       "data-role": "user",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(UserMessageAttachments, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-          import_react29.motion.div,
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(UserMessageAttachments, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          import_react31.motion.div,
           {
             className: cn(
               "aui-user-message-content relative inline-block max-w-[85%] rounded-2xl bg-bubble-user text-bubble-user-foreground",
@@ -3990,8 +4304,8 @@ var UserMessage = () => {
             animate: { opacity: 1, y: 0, scale: 1 },
             transition: { duration: 0.65, ease: luxuryEase },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.MessagePrimitive.Parts, { components: { Text: UserMessageText } }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)(UserActionBar, {}) })
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react30.MessagePrimitive.Parts, { components: { Text: UserMessageText } }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsx)(UserActionBar, {}) })
             ]
           }
         )
@@ -4000,42 +4314,42 @@ var UserMessage = () => {
   );
 };
 var UserActionBar = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_react28.ActionBarPrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_react30.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "always",
       className: "aui-user-action-bar-root flex flex-col items-end",
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react30.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         TooltipIconButton,
         {
           tooltip: "Edit",
           variant: "ghost",
           className: ASSISTANT_ACTION_ICON_CLASS,
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.PencilIcon, { className: "size-3" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react8.PencilIcon, { className: "size-3" })
         }
       ) })
     }
   );
 };
 var EditComposer = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.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_runtime28.jsx)(
-      import_react28.ComposerPrimitive.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react30.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_runtime29.jsxs)(import_react30.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_runtime29.jsx)(
+      import_react30.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_runtime28.jsxs)("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TimbalV2Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react28.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TimbalV2Button, { variant: "primary", size: "sm", children: "Update" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react30.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TimbalV2Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react30.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TimbalV2Button, { variant: "primary", size: "sm", children: "Update" }) })
     ] })
   ] }) });
 };
 
 // src/chat/chat.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function TimbalChat({
   workforceId,
   baseUrl,
@@ -4046,7 +4360,7 @@ function TimbalChat({
   debug,
   ...threadProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     TimbalRuntimeProvider,
     {
       workforceId,
@@ -4056,14 +4370,14 @@ function TimbalChat({
       attachmentsUploadUrl,
       attachmentsAccept,
       debug,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Thread, { ...threadProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Thread, { ...threadProps })
     }
   );
 }
 
 // src/chat/workforce-selector.tsx
 var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var WorkforceSelector = ({
   workforces,
   value,
@@ -4074,7 +4388,7 @@ var WorkforceSelector = ({
 }) => {
   if (workforces.length === 0) return null;
   if (hideWhenSingle && workforces.length === 1) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       className: cn(
@@ -4085,7 +4399,7 @@ var WorkforceSelector = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.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",
@@ -4093,15 +4407,15 @@ var WorkforceSelector = ({
             onChange: (e) => onChange(e.target.value),
             "aria-label": placeholder,
             children: [
-              !value && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: "", children: placeholder }),
+              !value && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("option", { value: "", children: placeholder }),
               workforces.map((w) => {
                 const id = idOf(w);
-                return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: id, children: w.name ?? id }, id);
+                return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("option", { value: id, children: w.name ?? id }, id);
               })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           import_lucide_react9.ChevronDownIcon,
           {
             className: "aui-workforce-selector-icon pointer-events-none absolute right-3 size-3.5 text-muted-foreground/70",
@@ -4117,22 +4431,22 @@ function idOf(item) {
 }
 
 // src/hooks/use-workforces.ts
-var import_react30 = require("react");
+var import_react32 = require("react");
 function useWorkforces(options = {}) {
   const { baseUrl = "/api", fetch: fetchFn, pickInitial, enabled = true } = options;
-  const [workforces, setWorkforces] = (0, import_react30.useState)([]);
-  const [selectedId, setSelectedId] = (0, import_react30.useState)("");
-  const [isLoading, setIsLoading] = (0, import_react30.useState)(enabled);
-  const [error, setError] = (0, import_react30.useState)(null);
-  const fetchFnRef = (0, import_react30.useRef)(fetchFn ?? authFetch);
-  (0, import_react30.useEffect)(() => {
+  const [workforces, setWorkforces] = (0, import_react32.useState)([]);
+  const [selectedId, setSelectedId] = (0, import_react32.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react32.useState)(enabled);
+  const [error, setError] = (0, import_react32.useState)(null);
+  const fetchFnRef = (0, import_react32.useRef)(fetchFn ?? authFetch);
+  (0, import_react32.useEffect)(() => {
     fetchFnRef.current = fetchFn ?? authFetch;
   }, [fetchFn]);
-  const pickInitialRef = (0, import_react30.useRef)(pickInitial);
-  (0, import_react30.useEffect)(() => {
+  const pickInitialRef = (0, import_react32.useRef)(pickInitial);
+  (0, import_react32.useEffect)(() => {
     pickInitialRef.current = pickInitial;
   }, [pickInitial]);
-  const load = (0, import_react30.useMemo)(() => {
+  const load = (0, import_react32.useMemo)(() => {
     return async () => {
       if (!enabled) {
         setIsLoading(false);
@@ -4157,10 +4471,10 @@ function useWorkforces(options = {}) {
       }
     };
   }, [baseUrl, enabled]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     load();
   }, [load]);
-  const selected = (0, import_react30.useMemo)(
+  const selected = (0, import_react32.useMemo)(
     () => workforces.find((w) => idOf2(w) === selectedId),
     [workforces, selectedId]
   );
@@ -4212,7 +4526,9 @@ var studioChromeShellStyle = {
   "--studio-inset-left-collapsed": SIDEBAR_INSET_COLLAPSED
 };
 var STORAGE_KEYS = {
-  sidebarCollapsed: "timbal-studio-sidebar-collapsed"
+  sidebarCollapsed: "timbal-studio-sidebar-collapsed",
+  /** Used by `ModeToggle` in uncontrolled mode (`localStorage`). */
+  theme: "timbal-theme"
 };
 var DOM_IDS = {
   sidebarRuntimeAnchor: "timbal-studio-sidebar-runtime-anchor",
@@ -4220,7 +4536,7 @@ var DOM_IDS = {
 };
 
 // src/studio/shell/chat-shell.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var TimbalChatShell = ({
   workforceId,
   brand,
@@ -4238,7 +4554,7 @@ var TimbalChatShell = ({
   });
   const effectiveId = workforceId ?? selectedId;
   const showSelector = !hideWorkforceSelector && !workforceId && workforces.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       className: cn(
@@ -4247,7 +4563,7 @@ var TimbalChatShell = ({
       ),
       style: studioChromeShellStyle,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "div",
           {
             className: cn(
@@ -4257,7 +4573,7 @@ var TimbalChatShell = ({
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
           "header",
           {
             className: cn(
@@ -4266,9 +4582,9 @@ var TimbalChatShell = ({
             ),
             style: { minHeight: "var(--studio-topbar-height)" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
                 brand,
-                showSelector && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                showSelector && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   WorkforceSelector,
                   {
                     workforces,
@@ -4277,11 +4593,11 @@ var TimbalChatShell = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex shrink-0 items-center gap-1", children: headerActions })
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex shrink-0 items-center gap-1", children: headerActions })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           TimbalChat,
           {
             workforceId: effectiveId,
@@ -4298,9 +4614,9 @@ var TimbalChatShell = ({
 };
 
 // src/studio/shell/studio-shell.tsx
-var import_react45 = require("react");
+var import_react47 = require("react");
 var import_lucide_react13 = require("lucide-react");
-var import_react46 = require("motion/react");
+var import_react48 = require("motion/react");
 
 // src/design/sidebar-motion.ts
 var STUDIO_SIDEBAR_EASE_ENTER = [0, 0, 0.2, 1];
@@ -4371,16 +4687,16 @@ function studioSidebarBackdropTransition(reduced) {
 }
 
 // src/hooks/use-sidebar-collapse-phase.ts
-var import_react31 = require("react");
+var import_react33 = require("react");
 var WIDTH_OVERLAP_FRAC = 0.7;
 function useSidebarCollapsePhase(collapsed, reducedMotion) {
-  const [widthCollapsed, setWidthCollapsed] = (0, import_react31.useState)(collapsed);
-  const [entriesVisible, setEntriesVisible] = (0, import_react31.useState)(true);
-  const collapsedTarget = (0, import_react31.useRef)(collapsed);
-  const isFirstRender = (0, import_react31.useRef)(true);
-  const widthTimerRef = (0, import_react31.useRef)(null);
-  const revealTimerRef = (0, import_react31.useRef)(null);
-  (0, import_react31.useEffect)(() => {
+  const [widthCollapsed, setWidthCollapsed] = (0, import_react33.useState)(collapsed);
+  const [entriesVisible, setEntriesVisible] = (0, import_react33.useState)(true);
+  const collapsedTarget = (0, import_react33.useRef)(collapsed);
+  const isFirstRender = (0, import_react33.useRef)(true);
+  const widthTimerRef = (0, import_react33.useRef)(null);
+  const revealTimerRef = (0, import_react33.useRef)(null);
+  (0, import_react33.useEffect)(() => {
     collapsedTarget.current = collapsed;
   }, [collapsed]);
   const clearWidthTimer = () => {
@@ -4395,7 +4711,7 @@ function useSidebarCollapsePhase(collapsed, reducedMotion) {
       revealTimerRef.current = null;
     }
   };
-  const applyWidthTarget = (0, import_react31.useCallback)(() => {
+  const applyWidthTarget = (0, import_react33.useCallback)(() => {
     const willExpand = !collapsedTarget.current;
     setWidthCollapsed(collapsedTarget.current);
     clearRevealTimer();
@@ -4406,7 +4722,7 @@ function useSidebarCollapsePhase(collapsed, reducedMotion) {
       );
     }
   }, [reducedMotion]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     clearWidthTimer();
     clearRevealTimer();
     if (reducedMotion) {
@@ -4430,10 +4746,10 @@ function useSidebarCollapsePhase(collapsed, reducedMotion) {
       clearRevealTimer();
     };
   }, [collapsed, reducedMotion, applyWidthTarget]);
-  const onEntriesBlurOutComplete = (0, import_react31.useCallback)(() => {
+  const onEntriesBlurOutComplete = (0, import_react33.useCallback)(() => {
     applyWidthTarget();
   }, [applyWidthTarget]);
-  const onPanelWidthComplete = (0, import_react31.useCallback)(() => {
+  const onPanelWidthComplete = (0, import_react33.useCallback)(() => {
     clearRevealTimer();
     setEntriesVisible(true);
   }, []);
@@ -4448,15 +4764,15 @@ function useSidebarCollapsePhase(collapsed, reducedMotion) {
 }
 
 // src/studio/sidebar/sidebar-backdrop.tsx
-var import_react32 = require("motion/react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react34 = require("motion/react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var StudioSidebarBackdrop = ({
   open,
   onClose
 }) => {
-  const reducedMotion = (0, import_react32.useReducedMotion)();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react32.AnimatePresence, { children: open ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    import_react32.motion.button,
+  const reducedMotion = (0, import_react34.useReducedMotion)();
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react34.AnimatePresence, { children: open ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_react34.motion.button,
     {
       type: "button",
       className: "fixed inset-0 z-40 bg-foreground/30 backdrop-blur-[2px] md:hidden",
@@ -4471,36 +4787,36 @@ var StudioSidebarBackdrop = ({
 };
 
 // src/studio/sidebar/sidebar-context.tsx
-var import_react33 = require("react");
-var StudioSidebarContext = (0, import_react33.createContext)({
+var import_react35 = require("react");
+var StudioSidebarContext = (0, import_react35.createContext)({
   collapsed: false,
   isMobile: false,
   isCollapsedRail: false,
   iconOnlyLayout: false
 });
 function useStudioSidebarLayout() {
-  return (0, import_react33.useContext)(StudioSidebarContext);
+  return (0, import_react35.useContext)(StudioSidebarContext);
 }
 
 // src/studio/sidebar/sidebar.tsx
-var import_react39 = require("react");
-var import_react40 = require("motion/react");
+var import_react41 = require("react");
+var import_react42 = require("motion/react");
 
 // src/studio/sidebar/sidebar-entries.tsx
-var import_react34 = require("motion/react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react36 = require("motion/react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var StudioSidebarEntries = ({
   visible,
   onBlurOutComplete,
   children,
   className
 }) => {
-  const reducedMotion = (0, import_react34.useReducedMotion)();
+  const reducedMotion = (0, import_react36.useReducedMotion)();
   if (reducedMotion) {
-    return visible ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("flex min-h-0 flex-1 flex-col", className), children }) : null;
+    return visible ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn("flex min-h-0 flex-1 flex-col", className), children }) : null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    import_react34.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_react36.motion.div,
     {
       className: cn("flex min-h-0 flex-1 flex-col", className),
       initial: false,
@@ -4523,11 +4839,11 @@ var StudioSidebarEntries = ({
 var import_lucide_react10 = require("lucide-react");
 
 // src/auth/provider.tsx
-var import_react35 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var SessionContext = (0, import_react35.createContext)(void 0);
+var import_react37 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var SessionContext = (0, import_react37.createContext)(void 0);
 var useOptionalSession = () => {
-  const context = (0, import_react35.useContext)(SessionContext);
+  const context = (0, import_react37.useContext)(SessionContext);
   return context ?? null;
 };
 
@@ -4554,35 +4870,35 @@ function studioSidebarNavItemClasses(iconOnly, isActive) {
 }
 
 // src/studio/sidebar/sidebar-entry-motion.tsx
-var import_react36 = require("motion/react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react38 = require("motion/react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var StudioSidebarEntryMotion = ({
   children,
   className
 }) => {
-  const reducedMotion = (0, import_react36.useReducedMotion)();
+  const reducedMotion = (0, import_react38.useReducedMotion)();
   if (reducedMotion) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react36.motion.div, { variants: studioSidebarEntryItemVariants, className: cn(className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react38.motion.div, { variants: studioSidebarEntryItemVariants, className: cn(className), children });
 };
 
 // src/studio/sidebar/sidebar-tooltip.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var StudioSidebarTooltip = ({
   label,
   enabled,
   children
 }) => {
-  if (!enabled) return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipTrigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipContent, { side: "right", className: "text-xs", children: label })
+  if (!enabled) return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipContent, { side: "right", className: "text-xs", children: label })
   ] });
 };
 
 // src/studio/sidebar/sidebar-footer.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function userInitials(name, email) {
   const fromName = name.trim().split(/\s+/).map((part) => part.charAt(0)).join("").slice(0, 2).toUpperCase();
   if (fromName) return fromName;
@@ -4600,32 +4916,32 @@ var StudioSidebarFooter = ({
     session?.logout();
     onSignOut?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StudioSidebarEntryMotion, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StudioSidebarEntryMotion, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "footer",
     {
       className: cn(
         "mt-auto w-full shrink-0 py-2.5",
         iconOnlyLayout ? studioSidebarCollapsedRailInsetClass : "px-2.5"
       ),
-      children: user ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-2", children: [
-        iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Avatar, { size: "sm", className: "size-8", children: [
-          user.user_photo_url ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AvatarFallback, { className: "text-[10px]", children: userInitials(user.user_name, user.user_email) })
-        ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Avatar, { size: "sm", children: [
-            user.user_photo_url ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AvatarFallback, { children: userInitials(user.user_name, user.user_email) })
+      children: user ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Avatar, { size: "sm", className: "size-8", children: [
+          user.user_photo_url ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AvatarFallback, { className: "text-[10px]", children: userInitials(user.user_name, user.user_email) })
+        ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Avatar, { size: "sm", children: [
+            user.user_photo_url ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AvatarImage, { src: user.user_photo_url, alt: user.user_name }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AvatarFallback, { children: userInitials(user.user_name, user.user_email) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "truncate text-sm font-medium text-foreground", children: user.user_name }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: user.user_email })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "truncate text-sm font-medium text-foreground", children: user.user_name }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: user.user_email })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "div",
           {
             className: iconOnlyLayout ? studioSidebarCollapsedRailChipRowClass : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StudioSidebarTooltip, { label: "Sign out", enabled: showTooltips, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StudioSidebarTooltip, { label: "Sign out", enabled: showTooltips, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
               "button",
               {
                 type: "button",
@@ -4636,28 +4952,28 @@ var StudioSidebarFooter = ({
                 ),
                 "aria-label": "Sign out",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react10.LogOut, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react10.LogOut, { className: "size-3.5 shrink-0" }),
                   !iconOnlyLayout ? "Sign out" : null
                 ]
               }
             ) })
           }
         )
-      ] }) : !iconOnlyLayout && emptyCaption ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "px-1 text-xs text-muted-foreground", children: emptyCaption }) : null
+      ] }) : !iconOnlyLayout && emptyCaption ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "px-1 text-xs text-muted-foreground", children: emptyCaption }) : null
     }
   ) });
 };
 
 // src/studio/sidebar/sidebar-header.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var sidebarHeaderClass = "flex h-12 shrink-0 items-center px-2";
 var toggleButtonClass = cn(
   "flex shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors",
   "hover:bg-muted hover:text-foreground",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15"
 );
-var SidebarToggleButton = ({ ariaLabel, expanded, onClick, children }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+var SidebarToggleButton = ({ ariaLabel, expanded, onClick, children }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
   "button",
   {
     type: "button",
@@ -4671,7 +4987,7 @@ var SidebarToggleButton = ({ ariaLabel, expanded, onClick, children }) => /* @__
 var CollapsedBrandToggle = ({
   onExpand,
   brand
-}) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StudioSidebarTooltip, { label: "Expand sidebar", enabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: studioSidebarCollapsedRailChipRowClass, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(StudioSidebarTooltip, { label: "Expand sidebar", enabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
   "button",
   {
     type: "button",
@@ -4683,7 +4999,7 @@ var CollapsedBrandToggle = ({
       "group relative inline-flex size-8 items-center justify-center overflow-hidden rounded-lg"
     ),
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "span",
         {
           "aria-hidden": true,
@@ -4695,7 +5011,7 @@ var CollapsedBrandToggle = ({
           children: brand
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         import_lucide_react11.ChevronRight,
         {
           "aria-hidden": true,
@@ -4717,40 +5033,40 @@ var StudioSidebarHeader = ({
   brand
 }) => {
   if (isMobile) {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("header", { className: cn(sidebarHeaderClass, "justify-between gap-2 pr-2"), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("header", { className: cn(sidebarHeaderClass, "justify-between gap-2 pr-2"), children: [
       brand,
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         SidebarToggleButton,
         {
           ariaLabel: "Close menu",
           expanded: mobileOpen,
           onClick: onToggle,
-          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react11.X, { className: "size-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react11.X, { className: "size-3.5" })
         }
       )
     ] });
   }
   if (isCollapsedRail) {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "header",
       {
         className: cn(
           "flex h-12 shrink-0 items-center",
           studioSidebarCollapsedRailInsetClass
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CollapsedBrandToggle, { onExpand: onToggle, brand })
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CollapsedBrandToggle, { onExpand: onToggle, brand })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("header", { className: cn(sidebarHeaderClass, "justify-between gap-1 pr-2"), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("header", { className: cn(sidebarHeaderClass, "justify-between gap-1 pr-2"), children: [
     brand,
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       SidebarToggleButton,
       {
         ariaLabel: "Collapse sidebar",
         expanded: true,
         onClick: onToggle,
-        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react11.ChevronLeft, { className: "size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react11.ChevronLeft, { className: "size-4" })
       }
     )
   ] });
@@ -4769,7 +5085,7 @@ function workforceItemInitial(w) {
 }
 
 // src/studio/sidebar/sidebar-nav.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var StudioSidebarNav = ({
   workforces,
   selectedId,
@@ -4778,7 +5094,7 @@ var StudioSidebarNav = ({
   showTooltips
 }) => {
   if (workforces.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "nav",
     {
       className: cn(
@@ -4790,11 +5106,11 @@ var StudioSidebarNav = ({
         const id = workforceItemId(w);
         const isActive = id === selectedId;
         const label = workforceItemLabel(w);
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           StudioSidebarEntryMotion,
           {
             className: iconOnlyLayout ? studioSidebarCollapsedRailChipRowClass : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(StudioSidebarTooltip, { label, enabled: showTooltips, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StudioSidebarTooltip, { label, enabled: showTooltips, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               "button",
               {
                 type: "button",
@@ -4805,7 +5121,7 @@ var StudioSidebarNav = ({
                   studioSidebarNavItemClasses(iconOnlyLayout, isActive),
                   iconOnlyLayout && "inline-flex"
                 ),
-                children: iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-xs font-semibold leading-none", children: workforceItemInitial(w) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "min-w-0 truncate", children: label })
+                children: iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-xs font-semibold leading-none", children: workforceItemInitial(w) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "min-w-0 truncate", children: label })
               }
             ) })
           },
@@ -4818,7 +5134,7 @@ var StudioSidebarNav = ({
 
 // src/studio/sidebar/timbal-mark.tsx
 var import_shaders_react = require("@paper-design/shaders-react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var DEFAULT_SIZE = 64;
 var TRANSPARENT_BACK = "#00000000";
 var TIMBAL_SYMBOL_DATA_URI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAH6ElEQVR4Aeyci7EcNRBFFxIBIgEygUiASCATyASIBOa4rFrZntmPPq1W93218o5nZyTd26dbmnX5fX3TjxyY4IDAmmCqurzdBJYomOKAwJpiqzoVWGJgigMCa4qt6lRgZWHAWKfAMjY8y3ACK0ukjXUKLGPDswwnsLJE2linwDI2PMtwAitLpI11Cixjw+/DxT4SWLHju0ydwHrP+p/euzzE1T8cKr492lsvgfWaXZj733Hp90fL9Pr1EPvn0QTWYcLoF8bS6Pdf/kjQAAnNv7RqVcW6do4q9ffxMe/HW5oXy323boF1zkvzEnDe3RZnS5X6fcRsBdbdRY6oTl1LAJ1s2NDdXaVq3QLr7kapUph8Pxv/iESiDVUqsG63sgQ0b1Rve/6QQEOrVG1DdrCGbFRrQzc5Zh9FlSKppkw5M1gYi8FTjHXaaalSJNTUKWYEC3P5spP3qeY667zsIadVqVpvNrCoUrTag+jHgIRm0z2ka7AGRpzqNG2jOnCeo7uiSi3RnQEszCVjydzRgfPaH1rRbFqlajMig0WVWmpubbThMRvzJVWq1hgVrFKlgKvWG/2YRHLxpBsNrOVLwCJySSBXT7qRwHKxBCwAiypFWzD09ZARwCpVysUScG318E+oUsv3Uleq3gPrqpd1512bO9GWsockqSYO0971zmBR/mnt6ve7k0RC87KvEV61bEewMNftEvCq8Q3XlSqF/obbbW/ZDSz2UWSs2yVgQvjQimb3VarWvgtYZCnm8uRXzz/6MXq3rM47gLXVEjCI9FKlqNCDurTtxjNYxdytloAB4aM6r65S3TK8grXtEtAZEZZ7Wmc362/3BlapUtsuAY0hDVGlau2ewApnbm30g+OyhySpHly210dewKL80/Zyr2+2JBKaQ+4hV4OFudtvVBv4KlUK/Q23+79lJVjso8jYUEvAk5CjFc0hq1StfQVYZCnm8uRXzyX6MXqbq/Nu5liDFX4JOAGgVCkq9MnHMU9ZgVXMDb8EfIYJ1TlNlaq1W4BFlcpoLss9rfY7zfFMsFSl0mD0pdBZYKXaqFa2so+iSpFU1el8hzPAwlgMzuQmeyl0k1ARdf/zrqiRYGGuq/+C9K4Zb11/v5g9JFCh/342+dEosDCWlslOljs0Z3vSfSnGvWCRpRmf+KhSGXW/BBUX9YCFuWQsmUtfGdo3h0g0q0odRjx6tYAFSFnNZXNOlX7kqT47HGgB67jtJnNv+nnkQCtYj/rUZ3LgFggsRdOTAwLLUzQCzUVgBQqmJykCy1M0As1FYAUKpicpAstTNALNRWAFCqYnKTPB8qRTczF2QGAZG55lOIGVJdLGOgWWseFZhhNYWSJtrFNgGRueZTiBlSXSM3We9C2wTkzRqX4HBFa/h+rhxAGBdWKKTvU7ILD6PVQPJw4IrBNTdKrfAYHV76F6OHFAYJ2Ysv+p9QoE1voYhJyBwAoZ1vWiBNb6GIScgcAKGdb1ogTW+hiEnIHAChnW9aIElk0M0o0isNKF3EawwLLxOd0oAitdyN8W/Ndxx9LfmnyMH/aFuX+EVXct7Lfjox+P9vZLFeu5ZcXcf59fGuYKKhRA8Xtmm0QJrGvbqFJd5l537foTKvN3xwzRf7y1vdKC9cSuUqW6zH0yhsePSaSfR0xMYH3qYvcS8Gl32/yNBPrqmC3vx1v/S2DdPRyyBNy72+aIKkUbOuEWsPg970MnsbizUqWGLAGLtbwzPNWpey91NWALWFd97Xh+qrmODSl7SJJqyjQzg0X5p00x1mmnJBKam79GeFVXRrAwd9oS8KrxC64rVQr904f3A9Z0qR8GYB9Fxk5bAj6M4usPtKJ5epWqZWcBiyzFXJ78av3Rj9G7pDpnAMt0CXBCaqlSVOglU4oMVjHXdAlYEsVPB6U6L6lS9TSigkWVWm5ubbTRMcs9zWi462GigaUqdR1r008igbVso2oasS8HYx9FlSKpvvx00ZkHYC2aUduwGIvBbXfveRd7KXSTUO4U7A4W5g79V3l3ETqfEHtIoEL/+RWLz+4MFsbSFltoOjzLHZrdP+nuCBZZmvGJjyVvG927gVWWADLXtFQsHAytVKmt9pC7gEWVwlz3S8BgANG9TZWqte8AVqlSmFzPPfoxiUSbrnPGAJ7BKkuAqtSMyE/u0ytYW21UB8aIfRRViqQa2K19Vx7BwlgMtndj3Ygs8+gmodbNYuDInsDCXH3ZOTC4K7vyAhbZSlvphfXYLHdoDrmHXA0WVWrLx+lOCnnSDa17JViYS8aSuZ1x2uZ2tKL5cZXaRs71RFeARZVKYe5ntrMxD12lar3WYJUqBVz1PKIfk0ipnnStwEqzBHyWISRQxifdmwVYqZaACiyqFK06ledwJlilSqVaAg50qFJp9lKH3tPXLLCymlv2kCTVqeFZTs4Ai/JPC+ThUykkEprDf43w1ImPF4wEC3MzLgGlSqH/o616GwUW+ygyNtMSgFY0q0qd5FEvWGQp5vLkd9J92FPozVidXw5oD1hZlwASiQr9sskZL2wBK+sSgO6UX3a2JEYrWCyBLePtfA/L387zN517C1imE7wYTKedOyCwnAdo1+kJrF0j53zeAst5gHadnsDaNXLO5y2wnAdo1+kJrF0j53zew8ByrlPTM3ZAYBkbnmU4gZUl0sY6BZax4VmGE1hZIm2sU2AZG55lOIGVJdLDdL7W0f8AAAD//x3VUCQAAAAGSURBVAMArsj7LTb9pqMAAAAASUVORK5CYII=";
@@ -4827,14 +5143,14 @@ function TimbalMark({
   size = DEFAULT_SIZE,
   src = TIMBAL_SYMBOL_DATA_URI
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       className: cn("relative shrink-0 bg-transparent", className),
       style: { width: size, height: size },
       role: "img",
       "aria-label": "Timbal",
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         import_shaders_react.LiquidMetal,
         {
           width: size,
@@ -4866,14 +5182,14 @@ function TimbalMark({
 }
 
 // src/studio/sidebar/shell-inset-bridge-context.tsx
-var import_react38 = require("react");
+var import_react40 = require("react");
 
 // src/layout/shell-inset-context.tsx
-var import_react37 = require("react");
-var ShellInsetContext = (0, import_react37.createContext)(null);
+var import_react39 = require("react");
+var ShellInsetContext = (0, import_react39.createContext)(null);
 var ShellInsetProvider = ShellInsetContext.Provider;
 function useShellInsetReporter() {
-  return (0, import_react37.useContext)(ShellInsetContext);
+  return (0, import_react39.useContext)(ShellInsetContext);
 }
 
 // src/studio/sidebar/shell-inset-bridge-context.tsx
@@ -4882,7 +5198,7 @@ var StudioSidebarShellInsetBridge = ({
 }) => {
   const reportInset = useShellInsetReporter();
   const { isMobile, isCollapsedRail } = useStudioSidebarLayout();
-  (0, import_react38.useLayoutEffect)(() => {
+  (0, import_react40.useLayoutEffect)(() => {
     const insetPx = isMobile ? 0 : isCollapsedRail ? SIDEBAR_INSET_PX_COLLAPSED : SIDEBAR_INSET_PX_EXPANDED;
     reportInset?.(insetPx);
     onInsetChange?.(insetPx);
@@ -4891,7 +5207,7 @@ var StudioSidebarShellInsetBridge = ({
 };
 
 // src/studio/sidebar/sidebar.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var DEFAULT_BREAKPOINT_PX = 768;
 function readPersistedCollapsed(key) {
   if (!key || typeof window === "undefined") return false;
@@ -4924,7 +5240,7 @@ var StudioSidebarPanel = ({
   brand,
   emptyCaption = null
 }) => {
-  const reducedMotion = (0, import_react40.useReducedMotion)();
+  const reducedMotion = (0, import_react42.useReducedMotion)();
   const isCollapsedRail = widthCollapsed && !isMobile;
   const iconOnlyLayout = studioSidebarIconOnlyLayout(isMobile, isCollapsedRail);
   const isDrawerOpen = isMobile && mobileOpen;
@@ -4941,9 +5257,9 @@ var StudioSidebarPanel = ({
     onCollapsedChange(!collapsed);
   };
   const panelWidthPx = isMobile ? SIDEBAR_MOBILE_PX : widthCollapsed ? SIDEBAR_WIDTH_COLLAPSED_PX : SIDEBAR_WIDTH_PX;
-  const brandNode = brand ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TimbalMark, { size: 32 });
-  const panel = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-    import_react40.motion.div,
+  const brandNode = brand ?? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TimbalMark, { size: 32 });
+  const panel = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    import_react42.motion.div,
     {
       "data-sidebar-collapsed": isCollapsedRail ? "" : void 0,
       className: cn(
@@ -4957,7 +5273,7 @@ var StudioSidebarPanel = ({
       style: { willChange: entriesVisible ? void 0 : "width" },
       onAnimationComplete: isMobile || entriesVisible ? void 0 : () => onPanelWidthComplete(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           StudioSidebarHeader,
           {
             isCollapsedRail,
@@ -4967,13 +5283,13 @@ var StudioSidebarPanel = ({
             brand: brandNode
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
           StudioSidebarEntries,
           {
             visible: entriesVisible,
             onBlurOutComplete: onEntriesBlurOutComplete,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 "div",
                 {
                   id: DOM_IDS.sidebarRuntimeAnchor,
@@ -4983,7 +5299,7 @@ var StudioSidebarPanel = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 StudioSidebarNav,
                 {
                   workforces,
@@ -4993,8 +5309,8 @@ var StudioSidebarPanel = ({
                   showTooltips: isCollapsedRail
                 }
               ),
-              workforces.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "min-h-0 flex-1" }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              workforces.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "min-h-0 flex-1" }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 StudioSidebarFooter,
                 {
                   iconOnlyLayout,
@@ -5010,8 +5326,8 @@ var StudioSidebarPanel = ({
     }
   );
   if (isMobile) {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_react40.motion.aside,
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      import_react42.motion.aside,
       {
         className: "fixed inset-y-0 left-0 z-[60] flex",
         "aria-label": "Studio navigation",
@@ -5026,7 +5342,7 @@ var StudioSidebarPanel = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "aside",
     {
       className: "absolute inset-y-0 left-0 z-[60] flex py-[var(--studio-sidebar-gap)] pl-[var(--studio-sidebar-gap)]",
@@ -5048,51 +5364,51 @@ var StudioSidebar = ({
   onMobileOpenChange: onMobileOpenChangeProp,
   onInsetChange
 }) => {
-  const reducedMotion = (0, import_react40.useReducedMotion)();
+  const reducedMotion = (0, import_react42.useReducedMotion)();
   const fetched = useWorkforces({ enabled: workforcesProp === void 0 });
   const workforces = workforcesProp ?? fetched.workforces;
-  const [internalSelected, setInternalSelected] = (0, import_react39.useState)(
+  const [internalSelected, setInternalSelected] = (0, import_react41.useState)(
     selectedIdProp ?? ""
   );
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (selectedIdProp !== void 0) return;
     if (internalSelected) return;
     const first = workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name;
     if (first) setInternalSelected(first);
   }, [workforces, selectedIdProp, internalSelected]);
   const selectedId = selectedIdProp ?? internalSelected ?? workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name ?? "";
-  const handleSelect = (0, import_react39.useCallback)(
+  const handleSelect = (0, import_react41.useCallback)(
     (id) => {
       if (selectedIdProp === void 0) setInternalSelected(id);
       onSelect?.(id);
     },
     [selectedIdProp, onSelect]
   );
-  const [collapsed, setCollapsed] = (0, import_react39.useState)(() => {
+  const [collapsed, setCollapsed] = (0, import_react41.useState)(() => {
     const persisted = readPersistedCollapsed(persistKey);
     return persisted || defaultCollapsed;
   });
-  const handleCollapsedChange = (0, import_react39.useCallback)(
+  const handleCollapsedChange = (0, import_react41.useCallback)(
     (next) => {
       setCollapsed(next);
       writePersistedCollapsed(persistKey, next);
     },
     [persistKey]
   );
-  const [isMobile, setIsMobile] = (0, import_react39.useState)(() => {
+  const [isMobile, setIsMobile] = (0, import_react41.useState)(() => {
     if (typeof window === "undefined") return false;
     return window.innerWidth < mobileBreakpointPx;
   });
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (typeof window === "undefined") return;
     const onResize = () => setIsMobile(window.innerWidth < mobileBreakpointPx);
     onResize();
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, [mobileBreakpointPx]);
-  const [internalMobileOpen, setInternalMobileOpen] = (0, import_react39.useState)(false);
+  const [internalMobileOpen, setInternalMobileOpen] = (0, import_react41.useState)(false);
   const mobileOpen = mobileOpenProp ?? internalMobileOpen;
-  const setMobileOpen = (0, import_react39.useCallback)(
+  const setMobileOpen = (0, import_react41.useCallback)(
     (next) => {
       if (mobileOpenProp === void 0) setInternalMobileOpen(next);
       onMobileOpenChangeProp?.(next);
@@ -5109,7 +5425,7 @@ var StudioSidebar = ({
   const entriesVisible = isMobile || phaseEntriesVisible;
   const isCollapsedRail = widthCollapsed && !isMobile;
   const iconOnlyLayout = studioSidebarIconOnlyLayout(isMobile, isCollapsedRail);
-  const contextValue = (0, import_react39.useMemo)(
+  const contextValue = (0, import_react41.useMemo)(
     () => ({
       collapsed: effectiveCollapsed,
       isMobile,
@@ -5118,9 +5434,9 @@ var StudioSidebar = ({
     }),
     [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(StudioSidebarContext.Provider, { value: contextValue, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StudioSidebarShellInsetBridge, { onInsetChange }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(StudioSidebarContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(StudioSidebarShellInsetBridge, { onInsetChange }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       StudioSidebarPanel,
       {
         workforces,
@@ -5143,26 +5459,26 @@ var StudioSidebar = ({
 };
 
 // src/studio/sidebar/sidebar-runtime-portal.tsx
-var import_react41 = require("react");
+var import_react43 = require("react");
 var import_react_dom = require("react-dom");
 var import_lucide_react12 = require("lucide-react");
-var import_react42 = require("@assistant-ui/react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_react44 = require("@assistant-ui/react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var StudioSidebarRuntimePortal = ({
   label = "New chat"
 }) => {
   const { iconOnlyLayout } = useStudioSidebarLayout();
-  const hasMessages = (0, import_react42.useThread)((s) => s.messages.length > 0);
+  const hasMessages = (0, import_react44.useThread)((s) => s.messages.length > 0);
   const { clear } = useTimbalRuntime();
-  const [anchor, setAnchor] = (0, import_react41.useState)(null);
-  const startNewChat = (0, import_react41.useCallback)(() => {
+  const [anchor, setAnchor] = (0, import_react43.useState)(null);
+  const startNewChat = (0, import_react43.useCallback)(() => {
     clear();
   }, [clear]);
-  (0, import_react41.useLayoutEffect)(() => {
+  (0, import_react43.useLayoutEffect)(() => {
     setAnchor(document.getElementById(DOM_IDS.sidebarRuntimeAnchor));
   }, []);
   if (!anchor || !hasMessages) return null;
-  const button = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  const button = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "button",
     {
       type: "button",
@@ -5170,24 +5486,24 @@ var StudioSidebarRuntimePortal = ({
       "aria-label": label,
       className: studioSidebarNavItemClasses(iconOnlyLayout, false),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react12.MessageSquarePlus, { className: "size-3.5 shrink-0" }),
-        !iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "min-w-0 truncate", children: label }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react12.MessageSquarePlus, { className: "size-3.5 shrink-0" }),
+        !iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "min-w-0 truncate", children: label }) : null
       ]
     }
   );
   return (0, import_react_dom.createPortal)(
-    iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: button }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { side: "right", className: "text-xs", children: label })
+    iconOnlyLayout ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipContent, { side: "right", className: "text-xs", children: label })
     ] }) : button,
     anchor
   );
 };
 
 // src/studio/sidebar/welcome.tsx
-var import_react43 = require("motion/react");
-var import_react44 = require("@assistant-ui/react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react45 = require("motion/react");
+var import_react46 = require("@assistant-ui/react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var welcomeStagger2 = {
   initial: {},
   animate: {
@@ -5212,34 +5528,34 @@ var welcomeIcon2 = {
   }
 };
 var StudioWelcome = ({ config, icon }) => {
-  const isEmpty = (0, import_react44.useThread)((s) => s.messages.length === 0);
+  const isEmpty = (0, import_react46.useThread)((s) => s.messages.length === 0);
   if (!isEmpty) return null;
-  const iconNode = icon ?? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  const iconNode = icon ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     TimbalMark,
     {
       size: 112,
       className: "max-md:scale-[0.58] max-md:origin-center"
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("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_runtime43.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-    import_react43.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("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_runtime44.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    import_react45.motion.div,
     {
       className: "aui-thread-welcome-message flex flex-col items-center justify-center px-2 text-center sm:px-4",
       variants: welcomeStagger2,
       initial: "initial",
       animate: "animate",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react43.motion.div, { variants: welcomeIcon2, className: "mb-4 md:mb-5", children: iconNode }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-          import_react43.motion.h1,
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react45.motion.div, { variants: welcomeIcon2, className: "mb-4 md:mb-5", children: iconNode }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          import_react45.motion.h1,
           {
             variants: welcomeItem2,
             className: "aui-thread-welcome-message-inner text-xl font-semibold sm:text-2xl",
             children: config?.heading ?? "How can I help you today?"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-          import_react43.motion.p,
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          import_react45.motion.p,
           {
             variants: welcomeItem2,
             className: "aui-thread-welcome-message-inner mt-2 text-muted-foreground",
@@ -5252,8 +5568,8 @@ var StudioWelcome = ({ config, icon }) => {
 };
 
 // src/studio/shell/studio-shell.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var import_react47 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_react49 = require("react");
 var DEFAULT_BREAKPOINT_PX2 = 768;
 function readPersistedCollapsed2(key) {
   if (!key || typeof window === "undefined") return false;
@@ -5273,9 +5589,9 @@ function writePersistedCollapsed2(key, collapsed) {
 function makeComposerWithPortal(BaseComposer) {
   const Resolved = BaseComposer ?? Composer;
   return function StudioComposerWithSidebar(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StudioSidebarRuntimePortal, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Resolved, { ...props })
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(StudioSidebarRuntimePortal, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Resolved, { ...props })
     ] });
   };
 }
@@ -5295,7 +5611,7 @@ var TimbalStudioShell = ({
   components,
   ...chatProps
 }) => {
-  const reducedMotion = (0, import_react46.useReducedMotion)();
+  const reducedMotion = (0, import_react48.useReducedMotion)();
   const shouldFetchWorkforces = !workforceId && workforcesProp === void 0;
   const fetched = useWorkforces({
     enabled: shouldFetchWorkforces,
@@ -5303,36 +5619,36 @@ var TimbalStudioShell = ({
     baseUrl: workforcesBaseUrl
   });
   const workforces = workforcesProp ?? fetched.workforces;
-  const [internalSelected, setInternalSelected] = (0, import_react45.useState)(
+  const [internalSelected, setInternalSelected] = (0, import_react47.useState)(
     workforceId ?? ""
   );
-  (0, import_react45.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (workforceId) return;
     if (internalSelected) return;
     const first = workforces[0]?.id ?? workforces[0]?.uid ?? workforces[0]?.name;
     if (first) setInternalSelected(first);
   }, [workforces, workforceId, internalSelected]);
   const activeWorkforceId = workforceId ?? internalSelected ?? fetched.selectedId ?? "";
-  const [collapsed, setCollapsed] = (0, import_react45.useState)(() => {
+  const [collapsed, setCollapsed] = (0, import_react47.useState)(() => {
     const persisted = readPersistedCollapsed2(persistKey);
     return persisted || defaultCollapsed;
   });
-  const [isMobile, setIsMobile] = (0, import_react45.useState)(() => {
+  const [isMobile, setIsMobile] = (0, import_react47.useState)(() => {
     if (typeof window === "undefined") return false;
     return window.innerWidth < mobileBreakpointPx;
   });
-  const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react45.useState)(false);
-  (0, import_react45.useEffect)(() => {
+  const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react47.useState)(false);
+  (0, import_react47.useEffect)(() => {
     if (typeof window === "undefined") return;
     const onResize = () => setIsMobile(window.innerWidth < mobileBreakpointPx);
     onResize();
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, [mobileBreakpointPx]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (!isMobile) setMobileSidebarOpen(false);
   }, [isMobile]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (!mobileSidebarOpen) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") setMobileSidebarOpen(false);
@@ -5356,21 +5672,21 @@ var TimbalStudioShell = ({
     layoutDirection
   );
   const desktopInsetPx = widthCollapsed ? SIDEBAR_INSET_PX_COLLAPSED : SIDEBAR_INSET_PX_EXPANDED;
-  const onCollapsedChange = (0, import_react45.useCallback)(
+  const onCollapsedChange = (0, import_react47.useCallback)(
     (next) => {
       setCollapsed(next);
       writePersistedCollapsed2(persistKey, next);
     },
     [persistKey]
   );
-  const handleSelectWorkforce = (0, import_react45.useCallback)(
+  const handleSelectWorkforce = (0, import_react47.useCallback)(
     (id) => {
       if (!workforceId) setInternalSelected(id);
       if (isMobile) setMobileSidebarOpen(false);
     },
     [workforceId, isMobile]
   );
-  const sidebarContext = (0, import_react45.useMemo)(
+  const sidebarContext = (0, import_react47.useMemo)(
     () => ({
       collapsed: effectiveCollapsed,
       isMobile,
@@ -5379,12 +5695,12 @@ var TimbalStudioShell = ({
     }),
     [effectiveCollapsed, isMobile, isCollapsedRail, iconOnlyLayout]
   );
-  const resolvedComponents = (0, import_react45.useMemo)(() => {
+  const resolvedComponents = (0, import_react47.useMemo)(() => {
     const next = { Welcome: StudioWelcome, ...components };
     next.Composer = makeComposerWithPortal(components?.Composer);
     return next;
   }, [components]);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StudioSidebarContext.Provider, { value: sidebarContext, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(StudioSidebarContext.Provider, { value: sidebarContext, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
       className: cn(
@@ -5393,14 +5709,14 @@ var TimbalStudioShell = ({
       ),
       style: studioChromeShellStyle,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "div",
           {
             className: "pointer-events-none absolute inset-0 z-0 bg-background",
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "div",
           {
             className: cn(
@@ -5410,14 +5726,14 @@ var TimbalStudioShell = ({
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           StudioSidebarBackdrop,
           {
             open: isMobile && mobileSidebarOpen,
             onClose: () => setMobileSidebarOpen(false)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           StudioSidebarPanel,
           {
             workforces,
@@ -5436,8 +5752,8 @@ var TimbalStudioShell = ({
             emptyCaption: sidebarEmptyCaption
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-          import_react46.motion.header,
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+          import_react48.motion.header,
           {
             className: cn(
               "absolute top-0 right-0 z-40 flex items-start justify-between gap-2",
@@ -5448,7 +5764,7 @@ var TimbalStudioShell = ({
             animate: { left: isMobile ? 0 : desktopInsetPx },
             transition: layoutTransition,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
                 "div",
                 {
                   className: cn(
@@ -5456,7 +5772,7 @@ var TimbalStudioShell = ({
                     studioTopbarPillHeightClass
                   ),
                   children: [
-                    isMobile && !mobileSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                    isMobile && !mobileSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                       TimbalV2Button,
                       {
                         variant: "secondary",
@@ -5466,19 +5782,19 @@ var TimbalStudioShell = ({
                         onClick: () => setMobileSidebarOpen(true),
                         "aria-label": "Open menu",
                         "aria-expanded": false,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react13.Menu, { className: "size-4" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react13.Menu, { className: "size-4" })
                       }
                     ) : null,
                     headerStart
                   ]
                 }
               ),
-              headerActions ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex shrink-0 items-center gap-1", children: headerActions }) : null
+              headerActions ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex shrink-0 items-center gap-1", children: headerActions }) : null
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-          import_react46.motion.main,
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          import_react48.motion.main,
           {
             className: cn(
               "relative z-10 flex h-full min-w-0 flex-col",
@@ -5488,7 +5804,7 @@ var TimbalStudioShell = ({
             initial: false,
             animate: { paddingLeft: isMobile ? 12 : desktopInsetPx },
             transition: layoutTransition,
-            children: activeWorkforceId ? /* @__PURE__ */ (0, import_react47.createElement)(
+            children: activeWorkforceId ? /* @__PURE__ */ (0, import_react49.createElement)(
               TimbalChat,
               {
                 ...chatProps,
@@ -5507,9 +5823,29 @@ var TimbalStudioShell = ({
 };
 
 // src/studio/sidebar/mode-toggle.tsx
-var import_react48 = require("react");
+var import_react50 = require("react");
 var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function readStoredTheme() {
+  if (typeof window === "undefined") return null;
+  try {
+    const value = window.localStorage.getItem(STORAGE_KEYS.theme);
+    return value === "dark" || value === "light" ? value : null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredTheme(theme) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(STORAGE_KEYS.theme, theme);
+  } catch {
+  }
+}
+function applyDarkClass(isDark) {
+  if (typeof document === "undefined") return;
+  document.documentElement.classList.toggle("dark", isDark);
+}
 var ModeToggle = ({
   theme,
   setTheme,
@@ -5517,24 +5853,31 @@ var ModeToggle = ({
   label = "Toggle theme"
 }) => {
   const isControlled = theme !== void 0;
-  const [internalIsDark, setInternalIsDark] = (0, import_react48.useState)(false);
-  (0, import_react48.useEffect)(() => {
+  const [internalIsDark, setInternalIsDark] = (0, import_react50.useState)(false);
+  (0, import_react50.useLayoutEffect)(() => {
     if (isControlled) return;
-    if (typeof document === "undefined") return;
+    const stored = readStoredTheme();
+    if (stored) {
+      const isDark2 = stored === "dark";
+      applyDarkClass(isDark2);
+      setInternalIsDark(isDark2);
+      return;
+    }
     setInternalIsDark(document.documentElement.classList.contains("dark"));
   }, [isControlled]);
   const isDark = isControlled ? theme === "dark" : internalIsDark;
-  const onClick = (0, import_react48.useCallback)(() => {
+  const onClick = (0, import_react50.useCallback)(() => {
     const next = isDark ? "light" : "dark";
     if (setTheme) {
       setTheme(next);
       return;
     }
-    if (typeof document === "undefined") return;
-    document.documentElement.classList.toggle("dark", next === "dark");
-    setInternalIsDark(next === "dark");
+    const isDarkNext = next === "dark";
+    applyDarkClass(isDarkNext);
+    writeStoredTheme(isDarkNext ? "dark" : "light");
+    setInternalIsDark(isDarkNext);
   }, [isDark, setTheme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     TimbalV2Button,
     {
       variant: "secondary",
@@ -5550,20 +5893,20 @@ var ModeToggle = ({
       "aria-label": label,
       title: label,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react14.Sun, { className: "size-3.5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react14.Moon, { className: "absolute size-3.5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "sr-only", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react14.Sun, { className: "size-3.5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react14.Moon, { className: "absolute size-3.5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "sr-only", children: label })
       ]
     }
   );
 };
 
 // src/studio/mode-switch.tsx
-var import_react51 = require("react");
+var import_react53 = require("react");
 
 // src/ui/pill-segmented-tabs.tsx
-var import_react49 = require("react");
-var import_react50 = require("motion/react");
+var import_react51 = require("react");
+var import_react52 = require("motion/react");
 
 // src/design/pill-segmented-classes.ts
 var pillSegmentedTrackBase = "inline-flex w-fit max-w-max shrink-0 self-start items-center rounded-full";
@@ -5596,7 +5939,7 @@ var pillSegmentedActiveIndicatorClass = cn(
 );
 
 // src/ui/pill-segmented-tabs.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var PillTab = ({
   tabKey,
   label,
@@ -5607,10 +5950,10 @@ var PillTab = ({
   segmentClassName,
   animateIndicator
 }) => {
-  const handlePress = (0, import_react49.useCallback)(() => {
+  const handlePress = (0, import_react51.useCallback)(() => {
     if (!disabled) onSelect(tabKey);
   }, [disabled, onSelect, tabKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     "button",
     {
       type: "button",
@@ -5623,15 +5966,15 @@ var PillTab = ({
         !disabled && (isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground")
       ),
       children: [
-        isActive && animateIndicator ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-          import_react50.motion.div,
+        isActive && animateIndicator ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_react52.motion.div,
           {
             layoutId,
             className: pillSegmentedActiveIndicatorClass,
             transition: { type: "spring", duration: 0.3, bounce: 0.15 }
           }
-        ) : isActive ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: pillSegmentedActiveIndicatorClass, "aria-hidden": true }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "relative z-10 whitespace-nowrap", children: label })
+        ) : isActive ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: pillSegmentedActiveIndicatorClass, "aria-hidden": true }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "relative z-10 whitespace-nowrap", children: label })
       ]
     }
   );
@@ -5645,13 +5988,13 @@ var PillSegmentedTabs = ({
   layoutId: layoutIdProp,
   "aria-label": ariaLabel
 }) => {
-  const reactId = (0, import_react49.useId)();
+  const reactId = (0, import_react51.useId)();
   const layoutId = layoutIdProp ?? `pill-segmented-${reactId.replace(/:/g, "")}`;
-  const reducedMotion = (0, import_react50.useReducedMotion)();
+  const reducedMotion = (0, import_react52.useReducedMotion)();
   const isFlush = trackVariant === "flush";
   const trackClass = isFlush ? pillSegmentedTrackFlushClass : pillSegmentedTrackClass;
   const segmentClassName = isFlush ? pillSegmentedFlushSegmentClass : pillSegmentedSegmentClass;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { role: "group", "aria-label": ariaLabel, className: cn(trackClass, className), children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { role: "group", "aria-label": ariaLabel, className: cn(trackClass, className), children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     PillTab,
     {
       tabKey: tab.key,
@@ -5666,15 +6009,15 @@ var PillSegmentedTabs = ({
     tab.key
   )) });
 };
-var MemoPillSegmentedTabs = (0, import_react49.memo)(PillSegmentedTabs);
+var MemoPillSegmentedTabs = (0, import_react51.memo)(PillSegmentedTabs);
 
 // src/studio/mode-switch.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var STUDIO_NAV_MODE = {
   BUILD: "build",
   OPERATE: "operate"
 };
-var StudioModeSwitch = (0, import_react51.memo)(
+var StudioModeSwitch = (0, import_react53.memo)(
   function StudioModeSwitch2({
     value,
     onChange,
@@ -5683,14 +6026,14 @@ var StudioModeSwitch = (0, import_react51.memo)(
     manageLabel = "Manage",
     "aria-label": ariaLabel = "Studio mode"
   }) {
-    const tabs = (0, import_react51.useMemo)(
+    const tabs = (0, import_react53.useMemo)(
       () => [
         { key: STUDIO_NAV_MODE.BUILD, label: buildLabel },
         { key: STUDIO_NAV_MODE.OPERATE, label: manageLabel }
       ],
       [buildLabel, manageLabel]
     );
-    const handleChange = (0, import_react51.useCallback)(
+    const handleChange = (0, import_react53.useCallback)(
       (key) => {
         if (key === STUDIO_NAV_MODE.BUILD || key === STUDIO_NAV_MODE.OPERATE) {
           onChange(key);
@@ -5698,14 +6041,14 @@ var StudioModeSwitch = (0, import_react51.memo)(
       },
       [onChange]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "div",
       {
         "data-tour": "studio-mode-switch",
         "data-studio-chrome-align": "mode-switch",
         id: "studio-chrome-mode-switch",
         className,
-        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           PillSegmentedTabs,
           {
             value,