@timbal-ai/timbal-react 1.1.0 → 1.2.0

package/dist/app.cjs

@@ -111,10 +111,14 @@ __export(app_exports, {
   connectionRowListClass: () => connectionRowListClass,
   createTimbalTheme: () => createTimbalTheme,
   ensureThemeFontLink: () => ensureThemeFontLink,
+  flushBarCategoryGap: () => flushBarCategoryGap,
+  flushLineAreaEdgeToEdge: () => flushLineAreaEdgeToEdge,
   formatLintReport: () => formatLintReport,
   getStoredThemePreset: () => getStoredThemePreset,
   getThemePreset: () => getThemePreset,
   lintGeneratedUi: () => lintGeneratedUi,
+  resolveChartMargin: () => resolveChartMargin,
+  resolveTooltipCategory: () => resolveTooltipCategory,
   reviewGeneratedUi: () => reviewGeneratedUi,
   themeToCss: () => themeToCss,
   useAppCopilotContext: () => useAppCopilotContext,
@@ -286,8 +290,8 @@ var HOUSE_RULES = [
   },
   {
     id: "no-data-gradient",
-    rule: "Gradients are reserved for chrome (composer, elevated surface, playground). Never on a data card, tile, or table.",
-    why: "Gradient stat cards are the canonical 'AI dashboard' look."
+    rule: "Gradients are reserved for chrome (composer, elevated surface, playground) and built-in chart/avatar fills \u2014 never on a data card shell, stat tile, or table row background.",
+    why: `Gradient stat cards are the canonical 'AI dashboard' look; SVG bar/pie fills and AvatarFallback variant="secondary" (Action button chrome) are kit-owned exceptions.`
   },
   {
     id: "compose-from-blocks",
@@ -400,8 +404,9 @@ The cause of slop is dropping **below** the curated block layer into raw primiti
 | \`FilterBar\` | Horizontal filter row \u2014 bottom-aligns controls. Mix \`SearchInput\` with labeled \`FilterField\` + \`Select\` (or \`Field\` + \`Select\`); labels sit above, control baselines match. |
 | \`FilterField\` | Optional label wrapper for a filter control inside \`FilterBar\` (severity, status, \u2026). Omit \`label\` for search-only fields. |
 | \`SearchInput\` | Filter field with consistent app styling. |
-| \`DataTable\` | Sortable table: \`columns\`, \`rows\`, \`getRowKey\`, optional \`sort\` / \`onSortChange\`, \`emptyTitle\`, \`showRowCount\`, \`caption\`. **Scales:** \`pageSize\` (built-in client pager), \`selectable\` + \`onSelectionChange\` (checkbox column for bulk actions), \`loading\` (skeleton rows). \`onRowClick\` for row \u2192 detail (open a \`Sheet\`). |
-| \`ChartPanel\` | Same shell as \`MetricChartCard\`: title row (\`px-4 pt-4\`), flush plot (\`pt-2\` only). Pass \`title\` + \`artifact\` (omit \`artifact.title\` to avoid duplicates) or \`children\`. \`loading\` renders a plot-height skeleton. |
+| \`DataTable\` | Sortable table: \`columns\`, \`rows\`, \`getRowKey\`, optional \`sort\` / \`onSortChange\`, \`emptyTitle\`, \`showRowCount\`, \`caption\`, \`truncate: true\` on columns with long text. **Scales:** \`pageSize\` (built-in client pager), \`selectable\` + \`onSelectionChange\` (checkbox column for bulk actions), \`loading\` (skeleton rows). \`onRowClick\` for row \u2192 detail (open a \`Sheet\`). |
+| \`Avatar\` / \`AvatarFallback\` | User initials: \`variant="secondary"\` (or \`primary\` / \`chart\` alias) on **both** \`Avatar\` and \`AvatarFallback\` \u2014 same chrome as catalog **Action** buttons (\`Button variant="secondary"\`: elevated gradient, \`border-border\`, \`shadow-card\`, \`text-foreground\`). Never dark primary CTA fill or raw \`bg-blue-600\`. |
+| \`ChartPanel\` | Same shell as \`MetricChartCard\`: title row (\`px-4 pt-4\`), flush plot (\`pt-2\` only) with **no axis ticks** \u2014 hover tooltips show category + value. Pass \`title\` + \`artifact\` (omit \`artifact.title\` to avoid duplicates) or \`children\`. \`loading\` renders a plot-height skeleton. |
 | \`FieldInput\`, \`FieldTextarea\`, \`FieldSelect\`, \`FieldSwitch\` | Settings-style forms with labels and hints. |
 | \`FormSection\` | Grouped form block. |
 | \`AppConfirmDialog\` | Confirm/cancel modal: \`open\`, \`onOpenChange\`, \`title\`, \`description\`, \`onConfirm\`. |
@@ -414,7 +419,7 @@ Charts run on **recharts** with shadcn \`ChartContainer\` / \`ChartTooltipConten
 
 | Component | Use for |
 |-----------|---------|
-| \`LineAreaChart\` | Cartesian engine (shadcn-style chrome). Props: \`data\`, \`xKey\`, \`series: [{ dataKey, label?, color? }]\`, \`variant\` (\`area\`\\|\`line\`\\|\`bar\`), \`orientation\` (\`horizontal\` for horizontal bars), \`stacked\`, \`curve\` (\`monotone\`\\|\`linear\`\\|\`step\`), \`dots\`, \`gridLines\`, \`tooltipIndicator\` (\`dot\`\\|\`line\`\\|\`dashed\`), \`layout\` (\`flush\`), \`height\`, \`showLegend\`, \`formatX\`, \`formatValue\`, \`ariaLabel\`. |
+| \`LineAreaChart\` | Cartesian engine (shadcn-style chrome). Bar fills use theme gradients automatically. Props: \`data\`, \`xKey\`, \`series: [{ dataKey, label?, color? }]\`, \`variant\` (\`area\`\\|\`line\`\\|\`bar\`), \`orientation\` (\`horizontal\` for horizontal bars), \`stacked\`, \`curve\`, \`dots\`, \`gridLines\`, \`tooltipIndicator\`, \`layout\` (\`flush\` \u2014 hides axes by default; category + values on hover tooltip), \`showXAxis\` / \`showYAxis\` to opt back in, \`clipTicks\` (truncates long axis labels when axes are on), \`height\`, \`showLegend\`, \`formatX\`, \`formatValue\`, \`ariaLabel\`. |
 | \`PieChart\` | Pie / donut: \`data\`, \`nameKey\`, \`dataKey\`, \`innerRadius\` (>0 = donut), \`centerValue\`/\`centerLabel\` (donut hole KPI), \`showLabels\`, \`colors\`. |
 | \`RadialChart\` | Concentric progress rings: \`data\`, \`nameKey\`, \`dataKey\`, \`maxValue\`, \`centerValue\`/\`centerLabel\`. Good for gauges / share-of-target. |
 | \`RadarChart\` | Spider chart (\u22653 axes): \`data\`, \`nameKey\`, \`series\`, \`maxValue\`. Compare a few metrics across entities. |
@@ -1540,6 +1545,33 @@ var TIMBAL_V2_SHADOW = {
   ghost: "",
   link: ""
 };
+var TIMBAL_V2_PRIMARY_SURFACE = cn(
+  TIMBAL_V2_PRIMARY_GRADIENT,
+  TIMBAL_V2_SHADOW.primary,
+  TIMBAL_V2_BORDER.primary
+);
+var TIMBAL_V2_PRIMARY_PILL_ROOT = cn(
+  "relative box-border inline-flex items-center justify-center overflow-hidden rounded-full border-0 bg-transparent p-0 font-normal shadow-none transition duration-200 ease-in-out",
+  TIMBAL_V2_SHADOW.primary,
+  TIMBAL_V2_BORDER.primary
+);
+var TIMBAL_V2_PRIMARY_PILL_FILL_LAYER = cn(
+  "pointer-events-none absolute inset-0 transition duration-200 ease-in-out",
+  "bg-gradient-to-b from-primary-fill-from to-primary-fill-to",
+  "group-hover/avatar:from-primary-fill-hover-from group-hover/avatar:to-primary-fill-hover-to",
+  "group-active/avatar:from-primary-fill-active-from group-active/avatar:to-primary-fill-active-to"
+);
+var TIMBAL_V2_SECONDARY_PILL_ROOT = cn(
+  "relative box-border inline-flex items-center justify-center overflow-hidden rounded-full bg-transparent p-0 font-normal shadow-none transition duration-200 ease-in-out",
+  TIMBAL_V2_SHADOW.secondary,
+  TIMBAL_V2_BORDER.secondary
+);
+var TIMBAL_V2_SECONDARY_PILL_FILL_LAYER = cn(
+  "pointer-events-none absolute inset-0 transition duration-200 ease-in-out",
+  TIMBAL_V2_ELEVATED_GRADIENT,
+  "group-hover/avatar:from-secondary-fill-hover-from group-hover/avatar:to-secondary-fill-hover-to",
+  "group-active/avatar:from-secondary-fill-active-from group-active/avatar:to-secondary-fill-active-to"
+);
 var TIMBAL_V2_SWITCH_TRACK_OFF = cn(
   TIMBAL_V2_ELEVATED_GRADIENT,
   "border border-border shadow-card"
@@ -1871,8 +1903,8 @@ var metricCardShellClass = cn(
 );
 var metricCardHeaderClass = "flex items-start justify-between gap-3 px-4 pb-1 pt-3";
 var metricTilesRowClass = "grid w-full min-w-0";
-var metricChartRegionClass = "relative min-h-0 w-full border-t border-border/40 pt-2";
-var metricChartPlotRegionClass = "relative min-h-0 w-full border-t border-border/40 px-0 pt-5 pb-3";
+var metricChartRegionClass = "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 pt-2";
+var metricChartPlotRegionClass = "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 px-0 pt-5 pb-3";
 var metricCellDividerClass = "border-r border-border/40";
 var MetricCardHeader = ({
   title,
@@ -2098,7 +2130,7 @@ var appShellTopbarRowClass = cn(
   "flex w-full items-center justify-between gap-2"
 );
 var appShellTopbarStickyClass = cn(
-  "sticky top-0 z-20 shrink-0 bg-background pb-2",
+  "shrink-0 bg-background pb-2",
   appShellInsetTopClass
 );
 var appPageHeaderClass = cn(
@@ -2514,10 +2546,10 @@ function useAppCopilotContext() {
 var import_lucide_react10 = require("lucide-react");
 
 // src/chat/thread.tsx
-var import_react33 = require("react");
-var import_react34 = require("@assistant-ui/react");
+var import_react36 = require("react");
+var import_react37 = require("@assistant-ui/react");
 var import_lucide_react9 = require("lucide-react");
-var import_react35 = require("motion/react");
+var import_react38 = require("motion/react");
 
 // src/chat/attachment.tsx
 var import_react8 = require("react");
@@ -2661,25 +2693,71 @@ function DialogTitle({
 }
 
 // src/ui/avatar.tsx
+var React2 = __toESM(require("react"), 1);
 var import_radix_ui4 = require("radix-ui");
 var import_jsx_runtime17 = require("react/jsx-runtime");
+var AVATAR_PRIMARY_FALLBACK_CLASS = cn(
+  TIMBAL_V2_SECONDARY_PILL_ROOT,
+  TIMBAL_V2_LABEL.secondary,
+  "font-medium"
+);
+var AVATAR_SECONDARY_FILL_STYLE = {
+  backgroundImage: "linear-gradient(to bottom, var(--elevated-from), var(--elevated-to))"
+};
+var AvatarChromeContext = React2.createContext(
+  null
+);
+function useAvatarChrome() {
+  return React2.useContext(AvatarChromeContext);
+}
+function isBrandedVariant(variant) {
+  return variant === "secondary" || variant === "primary" || variant === "chart";
+}
+var AVATAR_SIZE_CLASS = {
+  default: "size-8",
+  sm: "size-6",
+  lg: "size-10"
+};
 function Avatar({
   className,
   size = "default",
+  variant: rootVariant,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  const [chrome, setChrome] = React2.useState(rootVariant ?? "muted");
+  React2.useLayoutEffect(() => {
+    if (rootVariant !== void 0) {
+      setChrome(rootVariant);
+    }
+  }, [rootVariant]);
+  const branded = isBrandedVariant(chrome);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AvatarChromeContext.Provider, { value: { chrome, setChrome }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     import_radix_ui4.Avatar.Root,
     {
       "data-slot": "avatar",
       "data-size": size,
+      "data-variant": branded ? "secondary" : chrome,
       className: cn(
-        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        "group/avatar relative shrink-0 select-none",
+        AVATAR_SIZE_CLASS[size],
+        branded ? TIMBAL_V2_SECONDARY_PILL_ROOT : "flex overflow-hidden rounded-full",
         className
       ),
-      ...props
+      ...props,
+      children: [
+        branded ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: TIMBAL_V2_SECONDARY_PILL_FILL_LAYER,
+            style: AVATAR_SECONDARY_FILL_STYLE
+          }
+        ) : null,
+        children
+      ]
     }
-  );
+  ) });
 }
 function AvatarImage({
   className,
@@ -2689,24 +2767,44 @@ function AvatarImage({
     import_radix_ui4.Avatar.Image,
     {
       "data-slot": "avatar-image",
-      className: cn("aspect-square size-full", className),
+      className: cn(
+        "relative z-10 aspect-square size-full rounded-full object-cover",
+        className
+      ),
       ...props
     }
   );
 }
 function AvatarFallback({
   className,
+  variant = "muted",
+  seed: _seed,
+  children,
+  style,
   ...props
 }) {
+  const chromeCtx = useAvatarChrome();
+  React2.useLayoutEffect(() => {
+    chromeCtx?.setChrome(variant);
+  }, [chromeCtx, variant]);
+  const branded = isBrandedVariant(variant);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_radix_ui4.Avatar.Fallback,
     {
       "data-slot": "avatar-fallback",
+      "data-variant": branded ? "secondary" : variant,
       className: cn(
-        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        "relative z-10 flex size-full items-center justify-center rounded-full",
+        branded ? cn(
+          "bg-transparent font-medium",
+          TIMBAL_V2_LABEL.secondary,
+          "text-sm group-data-[size=sm]/avatar:text-xs"
+        ) : "bg-muted font-normal text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
         className
       ),
-      ...props
+      style,
+      ...props,
+      children
     }
   );
 }
@@ -2890,31 +2988,32 @@ var import_react_markdown = require("@assistant-ui/react-markdown");
 var import_remark_gfm = __toESM(require("remark-gfm"), 1);
 var import_remark_math = __toESM(require("remark-math"), 1);
 var import_rehype_katex = __toESM(require("rehype-katex"), 1);
-var import_react20 = require("react");
+var import_react23 = require("react");
 var import_lucide_react5 = require("lucide-react");
 
 // src/chat/syntax-highlighter.tsx
-var import_react19 = require("react");
+var import_react22 = require("react");
 var import_core = require("shiki/core");
 var import_javascript = require("shiki/engine/javascript");
 
 // src/artifacts/registry.tsx
-var import_react18 = require("react");
+var import_react21 = require("react");
 
 // src/artifacts/chart-artifact.tsx
-var import_react10 = require("react");
+var import_react13 = require("react");
 
 // src/charts/line-area-chart.tsx
+var import_react10 = require("react");
 var import_recharts = require("recharts");
 
 // src/ui/chart.tsx
-var React2 = __toESM(require("react"), 1);
+var React3 = __toESM(require("react"), 1);
 var RechartsPrimitive = __toESM(require("recharts"), 1);
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React2.createContext(null);
+var ChartContext = React3.createContext(null);
 function useChart() {
-  const context = React2.useContext(ChartContext);
+  const context = React3.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -2927,7 +3026,7 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React2.useId();
+  const uniqueId = React3.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
@@ -2988,7 +3087,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React2.useMemo(() => {
+  const tooltipLabel = React3.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -3099,7 +3198,7 @@ function ChartLegendContent({
         return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "div",
           {
-            className: "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+            className: "[&>svg]:text-muted-foreground flex min-w-0 max-w-[8rem] items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
             children: [
               itemConfig?.icon && !hideIcon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(itemConfig.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "div",
@@ -3108,7 +3207,7 @@ function ChartLegendContent({
                   style: { backgroundColor: item.color }
                 }
               ),
-              itemConfig?.label
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "min-w-0 truncate", children: itemConfig?.label ?? (item.value != null ? String(item.value) : null) })
             ]
           },
           `${item.value ?? index}`
@@ -3131,6 +3230,83 @@ function getPayloadConfigFromPayload(config, payload, key) {
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
 
+// src/charts/chart-gradient-utils.ts
+function barGradientId(scopeId, dataKey) {
+  return `bar-${scopeId}-${sanitizeId(dataKey)}`;
+}
+function pieGradientId(scopeId, key) {
+  return `pie-${scopeId}-${sanitizeId(key)}`;
+}
+function sanitizeId(key) {
+  return key.replace(/[^a-zA-Z0-9_-]/g, "_");
+}
+function truncateLabel(text, maxChars = 14) {
+  const s = String(text ?? "");
+  if (s.length <= maxChars) return s;
+  if (maxChars <= 1) return "\u2026";
+  return `${s.slice(0, maxChars - 1)}\u2026`;
+}
+function estimateYAxisWidth(labels, { min = 48, max = 112, charWidth = 6.5 } = {}) {
+  if (labels.length === 0) return min;
+  const longest = labels.reduce((a, b) => a.length >= b.length ? a : b, "");
+  return Math.min(max, Math.max(min, Math.ceil(longest.length * charWidth) + 12));
+}
+
+// src/charts/chart-axis-tick.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ChartAxisTick = ({
+  x = 0,
+  y = 0,
+  payload,
+  textAnchor = "end",
+  maxChars = 14,
+  clipTicks = true
+}) => {
+  const raw = String(payload?.value ?? "");
+  const label = clipTicks ? truncateLabel(raw, maxChars) : raw;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("g", { transform: `translate(${x},${y})`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("title", { children: raw }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "text",
+      {
+        textAnchor,
+        fill: "currentColor",
+        className: "fill-muted-foreground",
+        dominantBaseline: "middle",
+        children: label
+      }
+    )
+  ] });
+};
+
+// src/charts/chart-gradients.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var BarGradientDefs = ({
+  scopeId,
+  dataKeys,
+  horizontal
+}) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("defs", { children: dataKeys.map((dataKey) => {
+  const id = barGradientId(scopeId, dataKey);
+  const color = `var(--color-${dataKey})`;
+  if (horizontal) {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: 1 }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("stop", { offset: "100%", stopColor: color, stopOpacity: 0.55 })
+    ] }, dataKey);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("stop", { offset: "100%", stopColor: color, stopOpacity: 0.55 })
+  ] }, dataKey);
+}) });
+var PieGradientDefs = ({ scopeId, slices }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("defs", { children: slices.map(({ key, color }) => {
+  const id = pieGradientId(scopeId, key);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("stop", { offset: "100%", stopColor: color, stopOpacity: 0.65 })
+  ] }, key);
+}) });
+
 // src/charts/geometry.ts
 function toNum(value) {
   const n = typeof value === "number" ? value : Number(value);
@@ -3213,15 +3389,52 @@ function formatCompact(value, unit) {
   return unit ? `${s}${unit}` : s;
 }
 
+// src/charts/line-area-chart-utils.ts
+function resolveChartMargin(options) {
+  const { flush, showXAxis, showYAxis } = options;
+  if (!flush) {
+    return { top: 8, right: 12, bottom: 0, left: 0 };
+  }
+  const anyAxis = showXAxis || showYAxis;
+  if (!anyAxis) {
+    return { top: 8, right: 12, bottom: 8, left: 12 };
+  }
+  return {
+    top: 8,
+    right: 12,
+    bottom: showXAxis ? 24 : 8,
+    left: showYAxis ? 8 : 12
+  };
+}
+function flushBarCategoryGap(flush, showCategoryAxis) {
+  return flush && showCategoryAxis ? "0%" : void 0;
+}
+function flushLineAreaEdgeToEdge(flush, variant, showXAxis, showYAxis) {
+  return flush && (variant === "line" || variant === "area") && showXAxis && !showYAxis;
+}
+function resolveTooltipCategory(label, payload, xKey, data, formatX) {
+  const row = payload?.[0]?.payload;
+  if (row && xKey in row) {
+    const idx = data.indexOf(row);
+    return formatX(row[xKey], idx >= 0 ? idx : 0);
+  }
+  if (label != null && label !== "") {
+    const idx = typeof label === "number" ? label : data.findIndex((r) => r[xKey] === label || String(r[xKey]) === String(label));
+    return formatX(label, idx >= 0 ? idx : 0);
+  }
+  return "";
+}
+
 // src/charts/line-area-chart.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var INDEX_X_KEY = "__index";
 var CHART_PALETTE = [
-  "var(--chart-1, #6366f1)",
-  "var(--chart-2, #10b981)",
-  "var(--chart-3, #f59e0b)",
-  "var(--chart-4, #a855f7)",
-  "var(--chart-5, #ef4444)",
-  "var(--chart-6, #06b6d4)"
+  "var(--chart-1, #4f46e5)",
+  "var(--chart-2, #3b82f6)",
+  "var(--chart-3, #0ea5e9)",
+  "var(--chart-4, #6366f1)",
+  "var(--chart-5, #60a5fa)",
+  "var(--chart-6, #2563eb)"
 ];
 var LineAreaChart = ({
   data = [],
@@ -3246,9 +3459,11 @@ var LineAreaChart = ({
   tooltipIndicator = "dot",
   formatValue,
   formatX,
+  clipTicks = true,
   className,
   ariaLabel = "Chart"
 }) => {
+  const gradientScopeId = (0, import_react10.useId)().replace(/:/g, "");
   const xKey = xKeyProp ?? inferXKey(data);
   const series = resolveSeries(seriesProp, data, xKey);
   const flush = layout === "flush";
@@ -3258,7 +3473,7 @@ var LineAreaChart = ({
   const showLegend = showLegendProp ?? (!flush && series.length > 1);
   const grid = gridLines ?? (horizontal ? "vertical" : "horizontal");
   if (data.length === 0 || series.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartEmpty, { className, height, ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChartEmpty, { className, height, ariaLabel });
   }
   const config = {};
   series.forEach((s, i) => {
@@ -3269,25 +3484,52 @@ var LineAreaChart = ({
   });
   const valueFmt = (v) => formatValue ? formatValue(toNum(v)) : formatCompact(toNum(v), unit);
   const xFmt = (v, i) => formatX ? formatX(v, i) : String(v ?? "");
-  const margin = flush ? { top: 8, right: 4, bottom: 0, left: 0 } : { top: 8, right: 12, bottom: 0, left: 0 };
+  const margin = resolveChartMargin({ flush, showXAxis, showYAxis });
+  const flushCategoryXAxisProps = flush && showXAxis && flushLineAreaEdgeToEdge(flush, variant, showXAxis, showYAxis) ? { scale: "point", padding: "no-gap", interval: 0 } : flush && showXAxis && variant === "bar" ? { interval: 0 } : {};
+  const useIndexX = flushLineAreaEdgeToEdge(flush, variant, showXAxis, showYAxis);
+  const chartData = useIndexX ? data.map((row, i) => ({ ...row, [INDEX_X_KEY]: i })) : data;
+  const chartXKey = useIndexX ? INDEX_X_KEY : xKey;
+  const categoryTick = (textAnchor) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChartAxisTick, { textAnchor, clipTicks });
   const showVGrid = showGrid && (grid === "vertical" || grid === "both");
   const showHGrid = showGrid && (grid === "horizontal" || grid === "both");
-  const tooltipEl = showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const tooltipEl = showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     ChartTooltip,
     {
       cursor: variant === "bar",
-      content: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartTooltipContent, { indicator: tooltipIndicator })
+      content: ({ active, payload, label }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        ChartTooltipContent,
+        {
+          active,
+          payload,
+          label,
+          indicator: tooltipIndicator,
+          labelFormatter: (_value, items) => {
+            const category = resolveTooltipCategory(label, items, xKey, data, xFmt);
+            return category || null;
+          },
+          formatter: (value, name, item) => {
+            const key = String(item.dataKey ?? name ?? "value");
+            const seriesLabel = config[key]?.label ?? name;
+            return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-1 items-center justify-between leading-none", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-muted-foreground", children: seriesLabel }),
+              value != null ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-foreground font-mono font-medium tabular-nums", children: valueFmt(value) }) : null
+            ] });
+          }
+        }
+      )
     }
   ) : null;
-  const legendEl = showLegend ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartLegendContent, {}) }) : null;
-  const gridEl = showGrid && grid !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_recharts.CartesianGrid, { vertical: showVGrid, horizontal: showHGrid, strokeDasharray: "4 4" }) : null;
+  const legendEl = showLegend ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChartLegendContent, {}) }) : null;
+  const gridEl = showGrid && grid !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_recharts.CartesianGrid, { vertical: showVGrid, horizontal: showHGrid, strokeDasharray: "4 4" }) : null;
   const yDomain = yMax != null ? [0, yMax] : void 0;
   if (variant === "bar") {
-    const bars = series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    const dataKeys = series.map((s) => s.dataKey);
+    const barDefs = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(BarGradientDefs, { scopeId: gradientScopeId, dataKeys, horizontal });
+    const bars = series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       import_recharts.Bar,
       {
         dataKey: s.dataKey,
-        fill: `var(--color-${s.dataKey})`,
+        fill: `url(#${barGradientId(gradientScopeId, s.dataKey)})`,
         radius: barCornerRadius(barRadius, horizontal, stacked),
         stackId: stacked ? "stack" : void 0,
         isAnimationActive: true
@@ -3295,149 +3537,212 @@ var LineAreaChart = ({
       s.dataKey
     ));
     if (horizontal) {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartShell, { config, height, className, ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_recharts.BarChart, { accessibilityLayer: true, data, layout: "vertical", margin, children: [
-        gridEl,
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_recharts.XAxis,
-          {
-            type: "number",
-            hide: !showXAxis,
-            tickLine: false,
-            axisLine: false,
-            tickMargin: 8,
-            tickFormatter: (v) => valueFmt(v),
-            domain: yDomain
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_recharts.YAxis,
-          {
-            type: "category",
-            dataKey: xKey,
-            hide: !showYAxis,
-            tickLine: false,
-            axisLine: false,
-            tickMargin: 8,
-            width: showYAxis ? void 0 : 0,
-            tickFormatter: (v, i) => xFmt(v, i)
-          }
-        ),
-        tooltipEl,
-        legendEl,
-        bars
-      ] }) });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartShell, { config, height, className, ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_recharts.BarChart, { accessibilityLayer: true, data, margin, children: [
-      gridEl,
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_recharts.XAxis,
+      const categoryLabels = data.map((row, i) => xFmt(row[xKey], i));
+      const yAxisWidth = showYAxis ? estimateYAxisWidth(
+        clipTicks ? categoryLabels.map((l) => l.slice(0, 14)) : categoryLabels
+      ) : 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChartShell, { config, height, className, ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        import_recharts.BarChart,
         {
-          dataKey: xKey,
-          hide: !showXAxis,
-          tickLine: false,
-          axisLine: false,
-          tickMargin: 8,
-          minTickGap: 16,
-          tickFormatter: (v, i) => xFmt(v, i)
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_recharts.YAxis,
-        {
-          hide: !showYAxis,
-          tickLine: false,
-          axisLine: false,
-          tickMargin: 8,
-          width: showYAxis ? 44 : 0,
-          tickFormatter: (v) => valueFmt(v),
-          domain: yDomain
+          accessibilityLayer: true,
+          data,
+          layout: "vertical",
+          margin,
+          barCategoryGap: flushBarCategoryGap(flush, showYAxis),
+          children: [
+            barDefs,
+            gridEl,
+            showXAxis ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              import_recharts.XAxis,
+              {
+                type: "number",
+                tickLine: false,
+                axisLine: false,
+                tickMargin: 8,
+                tickFormatter: (v) => valueFmt(v),
+                domain: yDomain
+              }
+            ) : null,
+            showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              import_recharts.YAxis,
+              {
+                type: "category",
+                dataKey: xKey,
+                tickLine: false,
+                axisLine: false,
+                tickMargin: 8,
+                width: yAxisWidth,
+                minTickGap: 16,
+                tick: categoryTick("end")
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_recharts.YAxis, { type: "category", dataKey: xKey, hide: true, width: 0 }),
+            tooltipEl,
+            legendEl,
+            bars
+          ]
         }
-      ),
-      tooltipEl,
-      legendEl,
-      bars
-    ] }) });
+      ) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChartShell, { config, height, className, ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      import_recharts.BarChart,
+      {
+        accessibilityLayer: true,
+        data,
+        margin,
+        barCategoryGap: flushBarCategoryGap(flush, showXAxis),
+        children: [
+          barDefs,
+          gridEl,
+          showXAxis ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_recharts.XAxis,
+            {
+              dataKey: xKey,
+              tickLine: false,
+              axisLine: false,
+              tickMargin: 8,
+              minTickGap: 16,
+              tick: categoryTick("middle"),
+              ...flushCategoryXAxisProps
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_recharts.XAxis, { dataKey: xKey, hide: true }),
+          showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_recharts.YAxis,
+            {
+              tickLine: false,
+              axisLine: false,
+              tickMargin: 8,
+              width: 44,
+              tickFormatter: (v) => valueFmt(v),
+              domain: yDomain
+            }
+          ) : null,
+          tooltipEl,
+          legendEl,
+          bars
+        ]
+      }
+    ) });
   }
-  const axes = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const lineAreaAxes = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    showXAxis && useIndexX ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_recharts.XAxis,
+      {
+        type: "number",
+        dataKey: INDEX_X_KEY,
+        domain: [0, Math.max(0, chartData.length - 1)],
+        allowDecimals: false,
+        ticks: chartData.map((_, i) => i),
+        tickLine: false,
+        axisLine: false,
+        tickMargin: 8,
+        tickFormatter: (i) => {
+          const row = chartData[Number(i)];
+          return row ? xFmt(row[xKey], Number(i)) : "";
+        }
+      }
+    ) : showXAxis ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       import_recharts.XAxis,
       {
         dataKey: xKey,
-        hide: !showXAxis,
         tickLine: false,
         axisLine: false,
         tickMargin: 8,
-        minTickGap: 24,
-        tickFormatter: (v, i) => xFmt(v, i)
+        minTickGap: flush ? 8 : 24,
+        tickFormatter: (v, i) => xFmt(v, i),
+        ...flushCategoryXAxisProps
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_recharts.XAxis, { dataKey: chartXKey, hide: true }),
+    showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       import_recharts.YAxis,
       {
-        hide: !showYAxis,
         tickLine: false,
         axisLine: false,
         tickMargin: 8,
-        width: showYAxis ? 44 : 0,
+        width: 44,
         tickFormatter: (v) => valueFmt(v),
         domain: yDomain
       }
-    )
+    ) : null
   ] });
+  const chartA11y = flush ? {} : { accessibilityLayer: true };
   if (variant === "area") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartShell, { config, height, className, ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_recharts.AreaChart, { accessibilityLayer: true, data, margin, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("defs", { children: series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("linearGradient", { id: `fill-${s.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("stop", { offset: "5%", stopColor: `var(--color-${s.dataKey})`, stopOpacity: 0.3 }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("stop", { offset: "95%", stopColor: `var(--color-${s.dataKey})`, stopOpacity: 0.04 })
-      ] }, s.dataKey)) }),
-      gridEl,
-      axes,
-      tooltipEl,
-      legendEl,
-      series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_recharts.Area,
-        {
-          dataKey: s.dataKey,
-          type: curve,
-          stackId: stacked ? "stack" : void 0,
-          stroke: `var(--color-${s.dataKey})`,
-          strokeWidth: 2,
-          fill: `url(#fill-${s.dataKey})`,
-          dot: dots === true ? { r: 3 } : false,
-          activeDot: { r: 4 },
-          isAnimationActive: true
-        },
-        s.dataKey
-      ))
-    ] }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartShell, { config, height, className, ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_recharts.LineChart, { accessibilityLayer: true, data, margin, children: [
-    gridEl,
-    axes,
-    tooltipEl,
-    legendEl,
-    series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      import_recharts.Line,
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      ChartShell,
       {
-        dataKey: s.dataKey,
-        type: curve,
-        stroke: `var(--color-${s.dataKey})`,
-        strokeWidth: 2,
-        dot: dots === true ? { r: 3 } : false,
-        activeDot: { r: 4 },
-        isAnimationActive: true
-      },
-      s.dataKey
-    ))
-  ] }) });
+        config,
+        height,
+        className,
+        ariaLabel,
+        flush,
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_recharts.AreaChart, { ...chartA11y, data: chartData, margin, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("defs", { children: series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("linearGradient", { id: `fill-${s.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("stop", { offset: "5%", stopColor: `var(--color-${s.dataKey})`, stopOpacity: 0.3 }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("stop", { offset: "95%", stopColor: `var(--color-${s.dataKey})`, stopOpacity: 0.04 })
+          ] }, s.dataKey)) }),
+          gridEl,
+          lineAreaAxes,
+          tooltipEl,
+          legendEl,
+          series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_recharts.Area,
+            {
+              dataKey: s.dataKey,
+              type: curve,
+              stackId: stacked ? "stack" : void 0,
+              stroke: `var(--color-${s.dataKey})`,
+              strokeWidth: 2,
+              fill: `url(#fill-${s.dataKey})`,
+              dot: dots === true ? { r: 3 } : false,
+              activeDot: { r: 4 },
+              isAnimationActive: true
+            },
+            s.dataKey
+          ))
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    ChartShell,
+    {
+      config,
+      height,
+      className,
+      ariaLabel,
+      flush,
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_recharts.LineChart, { ...chartA11y, data: chartData, margin, children: [
+        gridEl,
+        lineAreaAxes,
+        tooltipEl,
+        legendEl,
+        series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_recharts.Line,
+          {
+            dataKey: s.dataKey,
+            type: curve,
+            stroke: `var(--color-${s.dataKey})`,
+            strokeWidth: 2,
+            dot: dots === true ? { r: 3 } : false,
+            activeDot: { r: 4 },
+            isAnimationActive: true
+          },
+          s.dataKey
+        ))
+      ] })
+    }
+  );
 };
-var ChartShell = ({ config, height, className, ariaLabel, children }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+var ChartShell = ({ config, height, className, ariaLabel, flush = false, children }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   ChartContainer,
   {
     config,
     role: "img",
     "aria-label": ariaLabel,
-    className: cn("aspect-auto w-full", className),
+    className: cn(
+      "aspect-auto w-full",
+      flush && "justify-start [&_.recharts-responsive-container]:!mx-0 [&_.recharts-responsive-container]:w-full",
+      className
+    ),
     style: { height },
     children
   }
@@ -3446,7 +3751,7 @@ var ChartEmpty = ({
   className,
   height,
   ariaLabel
-}) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   "div",
   {
     className: cn(
@@ -3479,8 +3784,35 @@ function resolveSeries(seriesProp, data, xKey) {
 }
 
 // src/charts/pie-chart.tsx
+var import_react11 = require("react");
 var import_recharts2 = require("recharts");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+
+// src/charts/chart-center-label.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var CENTER_BOX_W = 96;
+var CENTER_BOX_H = 52;
+var ChartCenterLabel = ({ cx, cy, value, label }) => {
+  const hasValue = value != null && value !== "";
+  const hasLabel = label != null && label !== "";
+  if (!hasValue && !hasLabel) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "foreignObject",
+    {
+      x: cx - CENTER_BOX_W / 2,
+      y: cy - CENTER_BOX_H / 2,
+      width: CENTER_BOX_W,
+      height: CENTER_BOX_H,
+      className: "overflow-visible",
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "pointer-events-none flex h-full flex-col items-center justify-center gap-0.5 text-center", children: [
+        hasValue ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-2xl font-normal leading-none tabular-nums text-foreground", children: value }) : null,
+        hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-[11px] leading-none text-muted-foreground", children: label }) : null
+      ] })
+    }
+  );
+};
+
+// src/charts/pie-chart.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var PieChart = ({
   data,
   nameKey: nameKeyProp,
@@ -3497,10 +3829,11 @@ var PieChart = ({
   className,
   ariaLabel = "Pie chart"
 }) => {
+  const gradientScopeId = (0, import_react11.useId)().replace(/:/g, "");
   const nameKey = nameKeyProp ?? inferNameKey(data, dataKey);
   const palette = colors ?? CHART_PALETTE;
   if (data.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PieEmpty, { className, height, ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PieEmpty, { className, height, ariaLabel });
   }
   const slices = data.map((d, i) => ({
     name: String(d[nameKey] ?? i),
@@ -3511,7 +3844,7 @@ var PieChart = ({
   for (const s of slices) config[s.name] = { label: s.name };
   const innerPct = innerRadius > 0 ? `${Math.round(innerRadius * 75)}%` : 0;
   const hasCenter = innerRadius > 0 && (centerValue != null || centerLabel != null);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     ChartContainer,
     {
       config,
@@ -3519,14 +3852,21 @@ var PieChart = ({
       "aria-label": ariaLabel,
       className: cn("aspect-auto w-full", className),
       style: { height },
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_recharts2.PieChart, { children: [
-        showTooltip && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_recharts2.PieChart, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          PieGradientDefs,
+          {
+            scopeId: gradientScopeId,
+            slices: slices.map((s) => ({ key: s.name, color: s.fill }))
+          }
+        ),
+        showTooltip && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           ChartTooltip,
           {
-            content: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartTooltipContent, { nameKey: "name", indicator: tooltipIndicator, hideLabel: true })
+            content: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChartTooltipContent, { nameKey: "name", indicator: tooltipIndicator, hideLabel: true })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           import_recharts2.Pie,
           {
             data: slices,
@@ -3539,24 +3879,30 @@ var PieChart = ({
             label: showLabels,
             isAnimationActive: true,
             children: [
-              slices.map((s) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_recharts2.Cell, { fill: s.fill }, s.name)),
-              hasCenter && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              slices.map((s) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_recharts2.Cell, { fill: `url(#${pieGradientId(gradientScopeId, s.name)})` }, s.name)),
+              hasCenter && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 import_recharts2.Label,
                 {
+                  position: "center",
                   content: ({ viewBox }) => {
                     if (!viewBox || !("cx" in viewBox)) return null;
                     const { cx, cy } = viewBox;
-                    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("text", { x: cx, y: cy, textAnchor: "middle", dominantBaseline: "middle", children: [
-                      centerValue != null && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tspan", { x: cx, y: cy - 2, className: "fill-foreground text-2xl tabular-nums", children: centerValue }),
-                      centerLabel != null && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tspan", { x: cx, y: cy + 18, className: "fill-muted-foreground text-[11px]", children: centerLabel })
-                    ] });
+                    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                      ChartCenterLabel,
+                      {
+                        cx,
+                        cy,
+                        value: centerValue,
+                        label: centerLabel
+                      }
+                    );
                   }
                 }
               )
             ]
           }
         ),
-        showLegend && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartLegendContent, { nameKey: "name" }) })
+        showLegend && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChartLegendContent, { nameKey: "name" }) })
       ] })
     }
   );
@@ -3565,7 +3911,7 @@ var PieEmpty = ({
   className,
   height,
   ariaLabel
-}) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   "div",
   {
     className: cn("flex w-full items-center justify-center text-xs text-muted-foreground", className),
@@ -3584,8 +3930,9 @@ function inferNameKey(data, dataKey) {
 }
 
 // src/charts/radial-chart.tsx
+var import_react12 = require("react");
 var import_recharts3 = require("recharts");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var RadialChart = ({
   data,
   nameKey: nameKeyProp,
@@ -3601,10 +3948,11 @@ var RadialChart = ({
   className,
   ariaLabel = "Radial chart"
 }) => {
+  const gradientScopeId = (0, import_react12.useId)().replace(/:/g, "");
   const nameKey = nameKeyProp ?? inferNameKey2(data, dataKey);
   const palette = colors ?? CHART_PALETTE;
   if (data.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RadialEmpty, { className, height, ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadialEmpty, { className, height, ariaLabel });
   }
   const rows = data.map((d, i) => ({
     name: String(d[nameKey] ?? i),
@@ -3615,8 +3963,8 @@ var RadialChart = ({
   const config = {};
   for (const r of rows) config[r.name] = { label: r.name };
   const hasCenter = centerValue != null || centerLabel != null;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cn("flex w-full flex-col items-center gap-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cn("flex w-full flex-col items-center gap-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       ChartContainer,
       {
         config,
@@ -3624,7 +3972,7 @@ var RadialChart = ({
         "aria-label": ariaLabel,
         className: "aspect-auto w-full",
         style: { height: height - (showLegend ? 32 : 0) },
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           import_recharts3.RadialBarChart,
           {
             data: rows,
@@ -3635,19 +3983,32 @@ var RadialChart = ({
             barSize: ringWidth,
             barGap: ringGap,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_recharts3.PolarAngleAxis, { type: "number", domain: [0, max], tick: false, axisLine: false }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChartTooltipContent, { nameKey: "name", hideLabel: true }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_recharts3.RadialBar, { dataKey: "value", background: true, cornerRadius: ringWidth / 2, isAnimationActive: true, children: rows.map((r) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_recharts3.Cell, { fill: r.fill }, r.name)) }),
-              hasCenter && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_recharts3.PolarRadiusAxis, { tick: false, tickLine: false, axisLine: false, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                PieGradientDefs,
+                {
+                  scopeId: gradientScopeId,
+                  slices: rows.map((r) => ({ key: r.name, color: r.fill }))
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_recharts3.PolarAngleAxis, { type: "number", domain: [0, max], tick: false, axisLine: false }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChartTooltipContent, { nameKey: "name", hideLabel: true }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_recharts3.RadialBar, { dataKey: "value", background: true, cornerRadius: ringWidth / 2, isAnimationActive: true, children: rows.map((r) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_recharts3.Cell, { fill: `url(#${pieGradientId(gradientScopeId, r.name)})` }, r.name)) }),
+              hasCenter && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_recharts3.PolarRadiusAxis, { tick: false, tickLine: false, axisLine: false, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 import_recharts3.Label,
                 {
+                  position: "center",
                   content: ({ viewBox }) => {
                     if (!viewBox || !("cx" in viewBox)) return null;
                     const { cx, cy } = viewBox;
-                    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("text", { x: cx, y: cy, textAnchor: "middle", dominantBaseline: "middle", children: [
-                      centerValue != null && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tspan", { x: cx, y: cy - 2, className: "fill-foreground text-2xl tabular-nums", children: centerValue }),
-                      centerLabel != null && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tspan", { x: cx, y: cy + 18, className: "fill-muted-foreground text-[11px]", children: centerLabel })
-                    ] });
+                    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                      ChartCenterLabel,
+                      {
+                        cx,
+                        cy,
+                        value: centerValue,
+                        label: centerLabel
+                      }
+                    );
                   }
                 }
               ) })
@@ -3656,8 +4017,8 @@ var RadialChart = ({
         )
       }
     ),
-    showLegend && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-muted-foreground", children: rows.map((r) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "inline-block size-2.5 rounded-[3px]", style: { background: r.fill } }),
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-muted-foreground", children: rows.map((r) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "inline-block size-2.5 rounded-[3px]", style: { background: r.fill } }),
       r.name
     ] }, r.name)) })
   ] });
@@ -3666,7 +4027,7 @@ var RadialEmpty = ({
   className,
   height,
   ariaLabel
-}) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
   "div",
   {
     className: cn("flex w-full items-center justify-center text-xs text-muted-foreground", className),
@@ -3686,7 +4047,7 @@ function inferNameKey2(data, dataKey) {
 
 // src/charts/radar-chart.tsx
 var import_recharts4 = require("recharts");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var RadarChart = ({
   data,
   nameKey: nameKeyProp,
@@ -3701,7 +4062,7 @@ var RadarChart = ({
   const nameKey = nameKeyProp ?? inferNameKey3(data);
   const series = resolveSeries2(seriesProp, data, nameKey);
   if (data.length < 3 || series.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "div",
       {
         className: cn("flex items-center justify-center text-xs text-muted-foreground", className),
@@ -3719,7 +4080,7 @@ var RadarChart = ({
       color: s.color ?? CHART_PALETTE[i % CHART_PALETTE.length]
     };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     ChartContainer,
     {
       config,
@@ -3727,17 +4088,17 @@ var RadarChart = ({
       "aria-label": ariaLabel,
       className: cn("mx-auto aspect-square", className),
       style: { height },
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_recharts4.RadarChart, { data, outerRadius: "70%", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChartTooltipContent, { indicator: "line" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_recharts4.PolarGrid, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_recharts4.RadarChart, { data, outerRadius: "70%", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChartTooltipContent, { indicator: "line" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_recharts4.PolarGrid, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_recharts4.PolarAngleAxis,
           {
             dataKey: nameKey,
             tick: { fontSize: 10, fill: "var(--color-muted-foreground)" }
           }
         ),
-        series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_recharts4.Radar,
           {
             dataKey: s.dataKey,
@@ -3750,7 +4111,7 @@ var RadarChart = ({
           },
           s.dataKey
         )),
-        showLegend && series.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChartLegendContent, {}) })
+        showLegend && series.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChartLegendContent, {}) })
       ] })
     }
   );
@@ -3771,10 +4132,10 @@ function resolveSeries2(seriesProp, data, nameKey) {
 }
 
 // src/artifacts/artifact-card.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var ArtifactCard = ({ title, kind, className, bodyClassName, toolbar, children }) => {
   const hasHeader = Boolean(title || toolbar);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "div",
     {
       className: cn(
@@ -3783,29 +4144,29 @@ var ArtifactCard = ({ title, kind, className, bodyClassName, toolbar, children }
       ),
       "data-artifact-kind": kind,
       children: [
-        hasHeader && /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)("span", { className: "aui-artifact-title flex-1 truncate text-xs font-semibold text-foreground/80", children: title }),
-          !title && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "flex-1" }),
+        hasHeader && /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)("span", { className: "aui-artifact-title flex-1 truncate text-xs font-semibold text-foreground/80", children: title }),
+          !title && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "flex-1" }),
           toolbar
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("aui-artifact-body", bodyClassName), children })
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("aui-artifact-body", bodyClassName), children })
       ]
     }
   );
 };
 
 // src/artifacts/chart-artifact.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var ChartArtifactView = ({
   artifact,
   embedded = false,
   height = 300
 }) => {
-  const plot = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChartArtifactPlot, { artifact, height });
+  const plot = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChartArtifactPlot, { artifact, height });
   if (embedded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "aui-artifact-chart w-full", children: plot });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "aui-artifact-chart w-full", children: plot });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ArtifactCard, { title: artifact.title, kind: "chart", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "aui-artifact-chart pt-2", children: plot }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ArtifactCard, { title: artifact.title, kind: "chart", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "aui-artifact-chart pt-2", children: plot }) });
 };
 function ChartArtifactPlot({
   artifact,
@@ -3813,7 +4174,7 @@ function ChartArtifactPlot({
 }) {
   const { chartType = "bar", data = [] } = artifact;
   const xKey = artifact.xKey ?? inferXKey2(data);
-  const series = (0, import_react10.useMemo)(() => {
+  const series = (0, import_react13.useMemo)(() => {
     if (artifact.series && artifact.series.length > 0) {
       return artifact.series.map((s) => ({
         dataKey: s.dataKey,
@@ -3831,7 +4192,7 @@ function ChartArtifactPlot({
   const aria = typeof artifact.title === "string" ? artifact.title : "Chart";
   if (chartType === "pie" || chartType === "donut") {
     const total = data.reduce((sum, d) => sum + toNum(d[series[0]?.dataKey ?? "value"]), 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       PieChart,
       {
         data,
@@ -3848,7 +4209,7 @@ function ChartArtifactPlot({
     ) });
   }
   if (chartType === "radial") {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       RadialChart,
       {
         data,
@@ -3861,10 +4222,11 @@ function ChartArtifactPlot({
     ) });
   }
   if (chartType === "radar") {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadarChart, { data, nameKey: xKey, series, height, ariaLabel: aria }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadarChart, { data, nameKey: xKey, series, height, ariaLabel: aria }) });
   }
   const horizontal = chartType === "horizontalBar";
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  const showAxes = artifact.showAxes === true;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     LineAreaChart,
     {
       data,
@@ -3878,8 +4240,8 @@ function ChartArtifactPlot({
       curve: artifact.curve,
       dots: artifact.dots,
       tooltipIndicator: artifact.tooltipIndicator,
-      showXAxis: true,
-      showYAxis: horizontal,
+      showXAxis: showAxes,
+      showYAxis: showAxes && horizontal,
       showLegend: artifact.legend ?? series.length > 1,
       unit: artifact.unit,
       ariaLabel: aria
@@ -3901,15 +4263,15 @@ function inferDataKeys(data, xKey) {
 }
 
 // src/artifacts/question-artifact.tsx
-var import_react11 = require("react");
-var import_react12 = require("@assistant-ui/react");
+var import_react14 = require("react");
+var import_react15 = require("@assistant-ui/react");
 var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime30 = 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_runtime27.jsx)(
+var OptionRadio = ({ selected }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   "span",
   {
     className: cn(
@@ -3917,18 +4279,18 @@ var OptionRadio = ({ selected }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx
       selected ? "border-foreground bg-foreground text-background" : "border-border bg-background"
     ),
     "aria-hidden": true,
-    children: selected ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react4.CheckIcon, { className: "size-2.5 stroke-[3]" }) : null
+    children: selected ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react4.CheckIcon, { className: "size-2.5 stroke-[3]" }) : null
   }
 );
 var QuestionArtifactView = ({
   artifact
 }) => {
-  const runtime = (0, import_react12.useThreadRuntime)();
-  const [selected, setSelected] = (0, import_react11.useState)([]);
-  const [submittedIds, setSubmittedIds] = (0, import_react11.useState)(null);
+  const runtime = (0, import_react15.useThreadRuntime)();
+  const [selected, setSelected] = (0, import_react14.useState)([]);
+  const [submittedIds, setSubmittedIds] = (0, import_react14.useState)(null);
   const isMulti = artifact.multi === true;
   const isDisabled = submittedIds !== null;
-  const send = (0, import_react11.useCallback)(
+  const send = (0, import_react14.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);
@@ -3940,7 +4302,7 @@ var QuestionArtifactView = ({
     },
     [artifact.options, runtime]
   );
-  const onPick = (0, import_react11.useCallback)(
+  const onPick = (0, import_react14.useCallback)(
     (key) => {
       if (isDisabled) return;
       if (!isMulti) {
@@ -3953,15 +4315,15 @@ var QuestionArtifactView = ({
     },
     [isDisabled, isMulti, send]
   );
-  const onConfirm = (0, import_react11.useCallback)(() => {
+  const onConfirm = (0, import_react14.useCallback)(() => {
     send(selected);
   }, [selected, send]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: studioArtifactShellClass, "data-artifact-kind": "question", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "px-2.5 py-2", children: [
-    artifact.prompt ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "mb-2 text-sm font-normal leading-snug text-foreground", children: artifact.prompt }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex flex-col gap-0.5", role: "list", children: artifact.options.map((option, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: studioArtifactShellClass, "data-artifact-kind": "question", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "px-2.5 py-2", children: [
+    artifact.prompt ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "mb-2 text-sm font-normal leading-snug text-foreground", children: artifact.prompt }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime27.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         "button",
         {
           type: "button",
@@ -3973,17 +4335,17 @@ var QuestionArtifactView = ({
             isDisabled && (isSelected ? "cursor-default" : "cursor-not-allowed opacity-50")
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(OptionRadio, { selected: isSelected }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "min-w-0 flex-1 text-left", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "block font-normal text-foreground", children: option.label }),
-              option.description ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: option.description }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(OptionRadio, { selected: isSelected }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "min-w-0 flex-1 text-left", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "block font-normal text-foreground", children: option.label }),
+              option.description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: option.description }) : null
             ] })
           ]
         },
         key
       );
     }) }),
-    isMulti && !submittedIds ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    isMulti && !submittedIds ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       TimbalV2Button,
       {
         type: "button",
@@ -3998,12 +4360,12 @@ var QuestionArtifactView = ({
 };
 
 // src/artifacts/html-artifact.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime31 = 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_runtime28.jsx)(ArtifactCard, { title: artifact.title, kind: "html", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ArtifactCard, { title: artifact.title, kind: "html", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "iframe",
     {
       title: artifact.title ?? "HTML artifact",
@@ -4016,7 +4378,7 @@ var HtmlArtifactView = ({ artifact }) => {
 };
 
 // src/artifacts/json-artifact.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var JsonArtifactView = ({
   artifact
 }) => {
@@ -4028,16 +4390,16 @@ var JsonArtifactView = ({
   } catch {
     body = String(data);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ArtifactCard, { title, kind: "json", children: /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime32.jsx)(ArtifactCard, { title, kind: "json", children: /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var TableArtifactView = ({ artifact }) => {
   const rows = artifact.rows ?? [];
   const columns = artifact.columns ?? deriveColumns(rows);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ArtifactCard, { title: artifact.title, kind: "table", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "aui-artifact-table-wrap overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("table", { className: "aui-artifact-table w-full border-collapse text-sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tr", { className: "border-b border-border/40 bg-muted/20", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ArtifactCard, { title: artifact.title, kind: "table", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "aui-artifact-table-wrap overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("table", { className: "aui-artifact-table w-full border-collapse text-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tr", { className: "border-b border-border/40 bg-muted/20", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "th",
       {
         className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground",
@@ -4045,11 +4407,11 @@ var TableArtifactView = ({ artifact }) => {
       },
       col.key
     )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime30.jsx)(
+        children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "td",
           {
             className: "px-3 py-2 align-top text-foreground/85",
@@ -4082,7 +4444,7 @@ function formatCell(value) {
 }
 
 // src/artifacts/ui/ui-artifact.tsx
-var import_react17 = require("react");
+var import_react20 = require("react");
 
 // src/artifacts/ui/types.ts
 function isUiBinding(value) {
@@ -4135,57 +4497,57 @@ function resolveBindable(value, state) {
 }
 
 // src/artifacts/ui/registry.tsx
-var import_react13 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var UiStateContext = (0, import_react13.createContext)({});
-var UiDispatchContext = (0, import_react13.createContext)(() => {
+var import_react16 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var UiStateContext = (0, import_react16.createContext)({});
+var UiDispatchContext = (0, import_react16.createContext)(() => {
 });
-var UiStateProvider = ({ state, dispatch, children }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(UiStateContext.Provider, { value: state, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(UiDispatchContext.Provider, { value: dispatch, children }) });
+var UiStateProvider = ({ state, dispatch, children }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(UiStateContext.Provider, { value: state, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(UiDispatchContext.Provider, { value: dispatch, children }) });
 function useUiState() {
-  return (0, import_react13.useContext)(UiStateContext);
+  return (0, import_react16.useContext)(UiStateContext);
 }
 function useUiDispatch() {
-  return (0, import_react13.useContext)(UiDispatchContext);
+  return (0, import_react16.useContext)(UiDispatchContext);
 }
-var UiEventContext = (0, import_react13.createContext)(
+var UiEventContext = (0, import_react16.createContext)(
   null
 );
-var UiEventProvider = ({ onEvent, children }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(UiEventContext.Provider, { value: onEvent, children });
+var UiEventProvider = ({ onEvent, children }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(UiEventContext.Provider, { value: onEvent, children });
 function useUiEventEmitter() {
-  return (0, import_react13.useContext)(UiEventContext);
+  return (0, import_react16.useContext)(UiEventContext);
 }
-var UiCustomNodeRegistryContext = (0, import_react13.createContext)({});
+var UiCustomNodeRegistryContext = (0, import_react16.createContext)({});
 function useUiCustomNodeRegistry() {
-  return (0, import_react13.useContext)(UiCustomNodeRegistryContext);
+  return (0, import_react16.useContext)(UiCustomNodeRegistryContext);
 }
 
 // src/artifacts/ui/nodes.tsx
-var import_react14 = require("react");
-var import_react15 = require("motion/react");
-var import_react16 = require("@assistant-ui/react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_react18 = require("motion/react");
+var import_react19 = require("@assistant-ui/react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var UiNodeView = ({ node }) => {
   switch (node.kind) {
     case "box":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BoxNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BoxNode, { node });
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TextNode, { node });
     case "heading":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HeadingNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HeadingNode, { node });
     case "badge":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BadgeNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BadgeNode, { node });
     case "button":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ButtonNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ButtonNode, { node });
     case "toggle":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ToggleNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ToggleNode, { node });
     case "slider":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SliderNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SliderNode, { node });
     case "tooltip":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipNode, { node });
     case "draggable":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DraggableNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DraggableNode, { node });
     case "custom":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CustomNode, { node });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomNode, { node });
     default:
       return null;
   }
@@ -4193,9 +4555,9 @@ var UiNodeView = ({ node }) => {
 function useActionRunner() {
   const state = useUiState();
   const dispatch = useUiDispatch();
-  const runtime = (0, import_react16.useThreadRuntime)();
+  const runtime = (0, import_react19.useThreadRuntime)();
   const emit = useUiEventEmitter();
-  return (0, import_react14.useCallback)(
+  return (0, import_react17.useCallback)(
     (actions) => {
       if (!actions) return;
       const list = Array.isArray(actions) ? actions : [actions];
@@ -4245,7 +4607,7 @@ var JUSTIFY_CLS = {
 };
 var BoxNode = ({ node }) => {
   const dir = node.direction ?? "col";
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       className: cn(
@@ -4260,7 +4622,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_runtime32.jsx)(UiNodeView, { node: child }, child.id ?? i))
+      children: node.children?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(UiNodeView, { node: child }, child.id ?? i))
     }
   );
 };
@@ -4279,7 +4641,7 @@ var TEXT_WEIGHT = {
 var TextNode = ({ node }) => {
   const state = useUiState();
   const value = resolveBindable(node.value, state);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "span",
     {
       className: cn(
@@ -4310,13 +4672,13 @@ var HeadingNode = ({ node }) => {
   );
   switch (level) {
     case 1:
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h1", { className: cls, children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h1", { className: cls, children: value });
     case 2:
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: cls, children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", { className: cls, children: value });
     case 3:
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h3", { className: cls, children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { className: cls, children: value });
     case 4:
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h4", { className: cls, children: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h4", { className: cls, children: value });
   }
 };
 var BADGE_TONE = {
@@ -4329,7 +4691,7 @@ var BADGE_TONE = {
 var BadgeNode = ({ node }) => {
   const state = useUiState();
   const value = String(resolveBindable(node.value, state) ?? "");
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "span",
     {
       className: cn(
@@ -4346,7 +4708,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_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     Button,
     {
       variant: node.variant ?? "default",
@@ -4368,7 +4730,7 @@ var ToggleNode = ({ node }) => {
     dispatch({ type: "toggle", path: node.binding });
     run(node.onChange);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "label",
     {
       className: cn(
@@ -4376,7 +4738,7 @@ var ToggleNode = ({ node }) => {
         node.className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "button",
           {
             type: "button",
@@ -4387,7 +4749,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_runtime32.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               "span",
               {
                 className: cn(
@@ -4400,7 +4762,7 @@ var ToggleNode = ({ node }) => {
             )
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-foreground/85", children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-foreground/85", children: label })
       ]
     }
   );
@@ -4420,12 +4782,12 @@ var SliderNode = ({ node }) => {
     const next = Number(e.target.value);
     dispatch({ type: "set", path: node.binding, value: next });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("aui-ui-slider flex flex-col gap-1", node.className), children: [
-    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: label }),
-      showValue && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "font-mono", children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("aui-ui-slider flex flex-col gap-1", node.className), children: [
+    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: label }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "font-mono", children: value })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "input",
       {
         type: "range",
@@ -4447,9 +4809,9 @@ var SliderNode = ({ node }) => {
 var TooltipNode = ({ node }) => {
   const state = useUiState();
   const content = String(resolveBindable(node.content, state) ?? "");
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: cn("aui-ui-tooltip-trigger inline-flex", node.className), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(UiNodeView, { node: node.child }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipContent, { side: node.side ?? "top", children: content })
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: cn("aui-ui-tooltip-trigger inline-flex", node.className), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(UiNodeView, { node: node.child }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { side: node.side ?? "top", children: content })
   ] }) });
 };
 var DraggableNode = ({ node }) => {
@@ -4457,8 +4819,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_runtime32.jsx)(
-    import_react15.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_react18.motion.div,
     {
       drag: dragProp,
       dragMomentum: false,
@@ -4469,7 +4831,7 @@ var DraggableNode = ({ node }) => {
         "aui-ui-draggable inline-block cursor-grab touch-none",
         node.className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(UiNodeView, { node: node.child })
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(UiNodeView, { node: node.child })
     }
   );
 };
@@ -4479,8 +4841,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_runtime32.jsx)(UiNodeView, { node: child }, child.id ?? i));
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Renderer, { props: resolvedProps, children });
+  const children = node.children?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(UiNodeView, { node: child }, child.id ?? i));
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Renderer, { props: resolvedProps, children });
 };
 function resolveProps(props, state) {
   const out = {};
@@ -4491,17 +4853,17 @@ function resolveProps(props, state) {
 }
 
 // src/artifacts/ui/ui-artifact.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var UiArtifactView = ({ artifact }) => {
-  const [state, dispatch] = (0, import_react17.useReducer)(
+  const [state, dispatch] = (0, import_react20.useReducer)(
     uiStateReducer,
     artifact.initialState ?? {}
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ArtifactCard, { title: artifact.title, kind: "ui", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(UiStateProvider, { state, dispatch, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "aui-ui-root p-3", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(UiNodeView, { node: artifact.root }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArtifactCard, { title: artifact.title, kind: "ui", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(UiStateProvider, { state, dispatch, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "aui-ui-root p-3", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(UiNodeView, { node: artifact.root }) }) }) });
 };
 
 // src/artifacts/registry.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var defaultArtifactRenderers = {
   chart: ChartArtifactView,
   question: QuestionArtifactView,
@@ -4510,25 +4872,25 @@ var defaultArtifactRenderers = {
   table: TableArtifactView,
   ui: UiArtifactView
 };
-var ArtifactRegistryContext = (0, import_react18.createContext)(
+var ArtifactRegistryContext = (0, import_react21.createContext)(
   defaultArtifactRenderers
 );
 var ArtifactRegistryProvider = ({ renderers, override, children }) => {
-  const merged = (0, import_react18.useMemo)(() => {
+  const merged = (0, import_react21.useMemo)(() => {
     if (!renderers) return defaultArtifactRenderers;
     if (override) return renderers;
     return { ...defaultArtifactRenderers, ...renderers };
   }, [renderers, override]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ArtifactRegistryContext.Provider, { value: merged, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ArtifactRegistryContext.Provider, { value: merged, children });
 };
 function useArtifactRegistry() {
-  return (0, import_react18.useContext)(ArtifactRegistryContext);
+  return (0, import_react21.useContext)(ArtifactRegistryContext);
 }
 var ArtifactView = ({ artifact }) => {
   const registry = useArtifactRegistry();
   const Renderer = registry[artifact.type] ?? registry.json;
   if (!Renderer) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Renderer, { artifact });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Renderer, { artifact });
 };
 
 // src/artifacts/types.ts
@@ -4609,7 +4971,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_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var SHIKI_THEME_DARK = "vitesse-dark";
 var SHIKI_THEME_LIGHT = "vitesse-light";
 var highlighterPromise = null;
@@ -4647,8 +5009,8 @@ var ShikiSyntaxHighlighter = ({
   language,
   code
 }) => {
-  const [html, setHtml] = (0, import_react19.useState)(null);
-  (0, import_react19.useEffect)(() => {
+  const [html, setHtml] = (0, import_react22.useState)(null);
+  (0, import_react22.useEffect)(() => {
     let cancelled = false;
     (async () => {
       try {
@@ -4678,13 +5040,13 @@ var ShikiSyntaxHighlighter = ({
     try {
       const parsed = JSON.parse(code);
       if (isArtifact(parsed)) {
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArtifactView, { artifact: parsed });
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ArtifactView, { artifact: parsed });
       }
     } catch {
     }
   }
   if (html) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.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",
@@ -4692,14 +5054,14 @@ var ShikiSyntaxHighlighter = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Pre, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Code2, { children: code }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Pre, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Code2, { children: code }) });
 };
 var syntax_highlighter_default = ShikiSyntaxHighlighter;
 
 // src/chat/markdown-text.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var MarkdownTextImpl = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     import_react_markdown.MarkdownTextPrimitive,
     {
       remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
@@ -4712,7 +5074,7 @@ var MarkdownTextImpl = () => {
     }
   );
 };
-var MarkdownText = (0, import_react20.memo)(MarkdownTextImpl);
+var MarkdownText = (0, import_react23.memo)(MarkdownTextImpl);
 var CodeHeader = ({ language, code }) => {
   const { isCopied, copyToClipboard } = useCopyToClipboard();
   if (isArtifactFenceLanguage(language)) return null;
@@ -4720,20 +5082,20 @@ var CodeHeader = ({ language, code }) => {
     if (!code || isCopied) return;
     copyToClipboard(code);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsxs)("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.jsxs)("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40" }),
       language
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       TooltipIconButton,
       {
         tooltip: isCopied ? "Copied!" : "Copy",
         onClick: onCopy,
         className: "transition-colors hover:text-foreground",
         children: [
-          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react5.CopyIcon, { className: "h-3.5 w-3.5" }),
-          isCopied && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react5.CheckIcon, { className: "h-3.5 w-3.5 text-emerald-500" })
+          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react5.CopyIcon, { className: "h-3.5 w-3.5" }),
+          isCopied && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react5.CheckIcon, { className: "h-3.5 w-3.5 text-emerald-500" })
         ]
       }
     )
@@ -4742,7 +5104,7 @@ var CodeHeader = ({ language, code }) => {
 var useCopyToClipboard = ({
   copiedDuration = 3e3
 } = {}) => {
-  const [isCopied, setIsCopied] = (0, import_react20.useState)(false);
+  const [isCopied, setIsCopied] = (0, import_react23.useState)(false);
   const copyToClipboard = (value) => {
     if (!value) return;
     navigator.clipboard.writeText(value).then(() => {
@@ -4753,7 +5115,7 @@ var useCopyToClipboard = ({
   return { isCopied, copyToClipboard };
 };
 var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownComponents)({
-  h1: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  h1: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "h1",
     {
       className: cn(
@@ -4763,7 +5125,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h2: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  h2: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "h2",
     {
       className: cn(
@@ -4773,7 +5135,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h3: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  h3: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "h3",
     {
       className: cn(
@@ -4783,7 +5145,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h4: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  h4: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "h4",
     {
       className: cn(
@@ -4793,7 +5155,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h5: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  h5: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "h5",
     {
       className: cn(
@@ -4803,7 +5165,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h6: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  h6: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "h6",
     {
       className: cn(
@@ -4813,7 +5175,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  p: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  p: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "p",
     {
       className: cn(
@@ -4823,7 +5185,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "a",
     {
       className: cn(
@@ -4835,7 +5197,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "blockquote",
     {
       className: cn(
@@ -4845,7 +5207,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  ul: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  ul: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "ul",
     {
       className: cn(
@@ -4855,7 +5217,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  ol: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  ol: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "ol",
     {
       className: cn(
@@ -4865,7 +5227,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  hr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  hr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "hr",
     {
       className: cn(
@@ -4875,14 +5237,14 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  table: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "my-4 w-full overflow-x-auto rounded-lg border border-border/50", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  table: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "my-4 w-full overflow-x-auto rounded-lg border border-border/50", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "table",
     {
       className: cn("aui-md-table w-full border-collapse text-sm", className),
       ...props
     }
   ) }),
-  th: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  th: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "th",
     {
       className: cn(
@@ -4892,7 +5254,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  td: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  td: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "td",
     {
       className: cn(
@@ -4902,7 +5264,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  tr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  tr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "tr",
     {
       className: cn(
@@ -4912,8 +5274,8 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  li: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { className: cn("aui-md-li leading-[1.7]", className), ...props }),
-  sup: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  li: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("li", { className: cn("aui-md-li leading-[1.7]", className), ...props }),
+  sup: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "sup",
     {
       className: cn(
@@ -4923,7 +5285,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  pre: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  pre: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "pre",
     {
       className: cn(
@@ -4935,7 +5297,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_runtime36.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "code",
       {
         className: cn(
@@ -4946,20 +5308,20 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       }
     );
   },
-  strong: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("strong", { className: cn("font-semibold text-foreground", className), ...props }),
-  em: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("em", { className: cn("italic", className), ...props }),
+  strong: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("strong", { className: cn("font-semibold text-foreground", className), ...props }),
+  em: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("em", { className: cn("italic", className), ...props }),
   CodeHeader
 });
 
 // src/chat/tool-fallback.tsx
-var import_react27 = require("react");
+var import_react30 = require("react");
 var import_lucide_react6 = require("lucide-react");
-var import_react28 = require("@assistant-ui/react");
+var import_react31 = require("@assistant-ui/react");
 
 // src/ui/shimmer.tsx
-var import_react21 = require("motion/react");
-var import_react22 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react24 = require("motion/react");
+var import_react25 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var ShimmerComponent = ({
   children,
   as: Component = "p",
@@ -4967,14 +5329,14 @@ var ShimmerComponent = ({
   duration = 2,
   spread = 2
 }) => {
-  const MotionComponent = import_react21.motion.create(
+  const MotionComponent = import_react24.motion.create(
     Component
   );
-  const dynamicSpread = (0, import_react22.useMemo)(
+  const dynamicSpread = (0, import_react25.useMemo)(
     () => (children?.length ?? 0) * spread,
     [children, spread]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     MotionComponent,
     {
       animate: { backgroundPosition: "0% center" },
@@ -4997,11 +5359,11 @@ var ShimmerComponent = ({
     }
   );
 };
-var Shimmer = (0, import_react22.memo)(ShimmerComponent);
+var Shimmer = (0, import_react25.memo)(ShimmerComponent);
 
 // src/chat/motion.tsx
-var import_react23 = require("motion/react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_react26 = require("motion/react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var luxuryEase = [0.16, 1, 0.3, 1];
 var TOOL_ENTER_MS = 0.78;
 var TOOL_EXIT_MS = 0.28;
@@ -5027,10 +5389,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_react23.useReducedMotion)() ?? false;
+  const reduced = (0, import_react26.useReducedMotion)() ?? false;
   const { enter, exit } = toolPresenceTransition(reduced);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_react23.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_react26.motion.div,
     {
       className: cn("aui-tool-motion w-full min-w-0", className),
       initial: toolMotionState(reduced, true, "settled"),
@@ -5049,11 +5411,11 @@ function ToolPresence({
   className,
   variant = "settled"
 }) {
-  const reduced = (0, import_react23.useReducedMotion)() ?? false;
+  const reduced = (0, import_react26.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_runtime38.jsx)(import_react23.AnimatePresence, { mode: "wait", initial: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_react23.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react26.AnimatePresence, { mode: "wait", initial: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_react26.motion.div,
     {
       className: cn("aui-tool-presence w-full min-w-0", className),
       initial: toolMotionState(reduced, true, variant),
@@ -5073,8 +5435,8 @@ function ToolBodyPresence({
   children,
   className
 }) {
-  const reduced = (0, import_react23.useReducedMotion)() ?? false;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  const reduced = (0, import_react26.useReducedMotion)() ?? false;
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       className: cn(
@@ -5082,7 +5444,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_runtime38.jsx)("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "div",
         {
           className: cn(
@@ -5098,8 +5460,8 @@ function ToolBodyPresence({
 }
 
 // src/runtime/provider.tsx
-var import_react25 = require("react");
-var import_react26 = require("@assistant-ui/react");
+var import_react28 = require("react");
+var import_react29 = require("@assistant-ui/react");
 var import_timbal_sdk = require("@timbal-ai/timbal-sdk");
 
 // src/auth/tokens.ts
@@ -5514,17 +5876,17 @@ function buildPromptBody({
 }
 
 // src/runtime/attachments-context.tsx
-var import_react24 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var TimbalAttachmentsEnabledContext = (0, import_react24.createContext)(false);
+var import_react27 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var TimbalAttachmentsEnabledContext = (0, import_react27.createContext)(false);
 function TimbalAttachmentsEnabledProvider({
   enabled,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TimbalAttachmentsEnabledContext.Provider, { value: enabled, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TimbalAttachmentsEnabledContext.Provider, { value: enabled, children });
 }
 function useTimbalAttachmentsEnabled() {
-  return (0, import_react24.useContext)(TimbalAttachmentsEnabledContext);
+  return (0, import_react27.useContext)(TimbalAttachmentsEnabledContext);
 }
 
 // src/runtime/upload-adapter.ts
@@ -5633,7 +5995,7 @@ function resolveAttachmentAdapter(attachments, options = {}) {
 }
 
 // src/runtime/provider.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function projectAttachment(attachment) {
   const filename = attachment.name ?? "attachment";
   const mimeType = attachment.contentType ?? "application/octet-stream";
@@ -5698,22 +6060,22 @@ function useTimbalStream({
   fetch: fetchFn,
   debug = false
 }) {
-  const [messages, setMessages] = (0, import_react25.useState)([]);
-  const [isRunning, setIsRunning] = (0, import_react25.useState)(false);
-  const abortRef = (0, import_react25.useRef)(null);
-  const messagesRef = (0, import_react25.useRef)([]);
-  const fetchFnRef = (0, import_react25.useRef)(fetchFn ?? authFetch);
-  (0, import_react25.useEffect)(() => {
+  const [messages, setMessages] = (0, import_react28.useState)([]);
+  const [isRunning, setIsRunning] = (0, import_react28.useState)(false);
+  const abortRef = (0, import_react28.useRef)(null);
+  const messagesRef = (0, import_react28.useRef)([]);
+  const fetchFnRef = (0, import_react28.useRef)(fetchFn ?? authFetch);
+  (0, import_react28.useEffect)(() => {
     fetchFnRef.current = fetchFn ?? authFetch;
   }, [fetchFn]);
-  const debugRef = (0, import_react25.useRef)(debug);
-  (0, import_react25.useEffect)(() => {
+  const debugRef = (0, import_react28.useRef)(debug);
+  (0, import_react28.useEffect)(() => {
     debugRef.current = debug;
   }, [debug]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     messagesRef.current = messages;
   }, [messages]);
-  const streamAssistantResponse = (0, import_react25.useCallback)(
+  const streamAssistantResponse = (0, import_react28.useCallback)(
     async (input, attachments, userId, assistantId, parentId, signal) => {
       const state = createReducerState();
       const flush = () => {
@@ -5792,7 +6154,7 @@ function useTimbalStream({
     },
     [workforceId, baseUrl]
   );
-  const send = (0, import_react25.useCallback)(
+  const send = (0, import_react28.useCallback)(
     async (input, options) => {
       const userId = crypto.randomUUID();
       const assistantId = crypto.randomUUID();
@@ -5823,7 +6185,7 @@ function useTimbalStream({
     },
     [streamAssistantResponse]
   );
-  const reload = (0, import_react25.useCallback)(
+  const reload = (0, import_react28.useCallback)(
     async (messageId) => {
       const current = messagesRef.current;
       const idx = messageId ? current.findIndex((m) => m.id === messageId) : current.length - 2;
@@ -5852,14 +6214,14 @@ function useTimbalStream({
     },
     [streamAssistantResponse]
   );
-  const cancel = (0, import_react25.useCallback)(() => {
+  const cancel = (0, import_react28.useCallback)(() => {
     abortRef.current?.abort();
   }, []);
-  const clear = (0, import_react25.useCallback)(() => {
+  const clear = (0, import_react28.useCallback)(() => {
     abortRef.current?.abort();
     setMessages([]);
   }, []);
-  return (0, import_react25.useMemo)(
+  return (0, import_react28.useMemo)(
     () => ({ messages, isRunning, send, reload, cancel, clear }),
     [messages, isRunning, send, reload, cancel, clear]
   );
@@ -5870,9 +6232,9 @@ function readTopLevelStartRunId(event) {
   }
   return null;
 }
-var TimbalStreamContext = (0, import_react25.createContext)(null);
+var TimbalStreamContext = (0, import_react28.createContext)(null);
 function useTimbalRuntime() {
-  const ctx = (0, import_react25.useContext)(TimbalStreamContext);
+  const ctx = (0, import_react28.useContext)(TimbalStreamContext);
   if (!ctx) {
     throw new Error(
       "useTimbalRuntime must be used inside a <TimbalRuntimeProvider>."
@@ -5896,7 +6258,7 @@ function TimbalRuntimeProvider({
     fetch: fetchFn,
     debug
   });
-  const attachmentAdapter = (0, import_react25.useMemo)(
+  const attachmentAdapter = (0, import_react28.useMemo)(
     () => resolveAttachmentAdapter(attachments, {
       baseUrl,
       fetch: fetchFn,
@@ -5905,7 +6267,7 @@ function TimbalRuntimeProvider({
     }),
     [attachments, attachmentsUploadUrl, attachmentsAccept, baseUrl, fetchFn]
   );
-  const onNew = (0, import_react25.useCallback)(
+  const onNew = (0, import_react28.useCallback)(
     async (message) => {
       const textPart = message.content.find((c) => c.type === "text");
       const input = textPart && textPart.type === "text" ? textPart.text : "";
@@ -5920,16 +6282,16 @@ function TimbalRuntimeProvider({
     },
     [stream]
   );
-  const onReload = (0, import_react25.useCallback)(
+  const onReload = (0, import_react28.useCallback)(
     async (messageId) => {
       await stream.reload(messageId);
     },
     [stream]
   );
-  const onCancel = (0, import_react25.useCallback)(async () => {
+  const onCancel = (0, import_react28.useCallback)(async () => {
     stream.cancel();
   }, [stream]);
-  const runtime = (0, import_react26.useExternalStoreRuntime)({
+  const runtime = (0, import_react29.useExternalStoreRuntime)({
     isRunning: stream.isRunning,
     messages: stream.messages,
     convertMessage,
@@ -5939,7 +6301,7 @@ function TimbalRuntimeProvider({
     onCancel,
     ...attachmentAdapter ? { adapters: { attachments: attachmentAdapter } } : {}
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TimbalStreamContext.Provider, { value: stream, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TimbalAttachmentsEnabledProvider, { enabled: attachmentAdapter !== void 0, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react26.AssistantRuntimeProvider, { runtime, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TimbalStreamContext.Provider, { value: stream, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TimbalAttachmentsEnabledProvider, { enabled: attachmentAdapter !== void 0, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react29.AssistantRuntimeProvider, { runtime, children }) }) });
 }
 function findParentIdFromAuiParent(messages, auiParentId) {
   const idx = messages.findIndex((m) => m.id === auiParentId);
@@ -5948,7 +6310,7 @@ function findParentIdFromAuiParent(messages, auiParentId) {
 }
 
 // src/chat/tool-fallback.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function detectRunning({
   status,
   result,
@@ -5962,7 +6324,7 @@ function detectRunning({
 }
 function useToolRunning(props) {
   const { isRunning: streamRunning } = useTimbalRuntime();
-  const partStatus = (0, import_react28.useAuiState)((s) => s.part.status);
+  const partStatus = (0, import_react31.useAuiState)((s) => s.part.status);
   return detectRunning({
     status: partStatus ?? props.status,
     result: props.result,
@@ -5980,8 +6342,8 @@ function formatToolResult(result) {
     return String(result);
   }
 }
-var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "inline-flex min-w-0 max-w-full items-baseline gap-1", children: [
-  action ? shimmer ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "inline-flex min-w-0 max-w-full items-baseline gap-1", children: [
+  action ? shimmer ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     Shimmer,
     {
       as: "span",
@@ -5990,10 +6352,10 @@ var TimelineActionLabel = ({ action, detail, shimmer = false }) => /* @__PURE__
       spread: 2.5,
       children: action
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: studioTimelineActionClass, children: action }) : null,
-  detail ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: studioTimelineDetailClass, children: detail }) : null
+  ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: studioTimelineActionClass, children: action }) : null,
+  detail ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: studioTimelineDetailClass, children: detail }) : null
 ] });
-var TimelineHoverChevron = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+var TimelineHoverChevron = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
   import_lucide_react6.ChevronRightIcon,
   {
     className: studioTimelineChevronClass(expanded),
@@ -6001,9 +6363,9 @@ var TimelineHoverChevron = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runt
   }
 );
 var ToolPanel = ({ toolName, argsText, result, isError }) => {
-  const [open, setOpen] = (0, import_react27.useState)(false);
+  const [open, setOpen] = (0, import_react30.useState)(false);
   const detail = formatToolLabel(toolName);
-  const formattedArgs = (0, import_react27.useMemo)(() => {
+  const formattedArgs = (0, import_react30.useMemo)(() => {
     if (!argsText || argsText === "{}") return null;
     try {
       return JSON.stringify(JSON.parse(argsText), null, 2);
@@ -6011,17 +6373,17 @@ var ToolPanel = ({ toolName, argsText, result, isError }) => {
       return argsText;
     }
   }, [argsText]);
-  const formattedResult = (0, import_react27.useMemo)(() => {
+  const formattedResult = (0, import_react30.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_runtime41.jsx)("div", { className: "aui-tool-row w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TimelineActionLabel, { action, detail }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "aui-tool-row w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TimelineActionLabel, { action, detail }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "aui-tool-row w-full min-w-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "aui-tool-row w-full min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "button",
       {
         type: "button",
@@ -6029,7 +6391,7 @@ var ToolPanel = ({ toolName, argsText, result, isError }) => {
         "aria-expanded": open,
         "aria-label": `${action} ${detail}`,
         className: studioTimelineRowButtonClass,
-        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
           "span",
           {
             className: cn(
@@ -6038,37 +6400,37 @@ var ToolPanel = ({ toolName, argsText, result, isError }) => {
               "text-foreground"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TimelineActionLabel, { action, detail }),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TimelineHoverChevron, { expanded: open })
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TimelineActionLabel, { action, detail }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TimelineHoverChevron, { expanded: open })
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
       ToolBodyPresence,
       {
         open,
         className: cn(studioTimelineBodyPadClass, "gap-2"),
         children: [
-          formattedArgs ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          formattedArgs ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             "div",
             {
               className: cn(
                 studioComposerIoWellClass,
                 "max-h-48 overflow-auto px-2.5 py-2"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime44.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_runtime41.jsx)(
+          formattedResult ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             "div",
             {
               className: cn(
                 studioComposerIoWellClass,
                 "max-h-48 overflow-auto px-2.5 py-2"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime44.jsx)("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] font-normal leading-relaxed text-foreground", children: formattedResult })
             }
           ) : null
         ]
@@ -6085,20 +6447,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_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     ToolPresence,
     {
       presenceKey,
       variant: isRunning ? "executing" : "settled",
       className: "py-0.5",
-      children: isRunning ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "aui-tool-running", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      children: isRunning ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "aui-tool-running", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         TimelineActionLabel,
         {
           action: "Using",
           detail: formatToolLabel(toolName),
           shimmer: true
         }
-      ) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         ToolPanel,
         {
           toolName,
@@ -6110,13 +6472,13 @@ var ToolFallbackImpl = ({
     }
   );
 };
-var ToolFallback = (0, import_react27.memo)(
+var ToolFallback = (0, import_react30.memo)(
   ToolFallbackImpl
 );
 ToolFallback.displayName = "ToolFallback";
 
 // src/artifacts/tool-artifact.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var ToolArtifactFallback = (props) => {
   const registry = useArtifactRegistry();
   const isRunning = useToolRunning({
@@ -6128,24 +6490,24 @@ var ToolArtifactFallback = (props) => {
     if (artifact) {
       const Renderer = registry[artifact.type];
       if (Renderer) {
-        return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           ToolMotion,
           {
             motionKey: `artifact-${artifact.type}`,
             className: "aui-tool-artifact",
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Renderer, { artifact })
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Renderer, { artifact })
           }
         );
       }
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ToolFallback, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ToolFallback, { ...props });
 };
 
 // src/chat/composer.tsx
-var import_react29 = require("@assistant-ui/react");
+var import_react32 = require("@assistant-ui/react");
 var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var Composer = ({
   placeholder = "Send a message...",
   showAttachments,
@@ -6156,10 +6518,10 @@ var Composer = ({
 }) => {
   const attachmentsEnabled = useTimbalAttachmentsEnabled();
   const attachUi = showAttachments !== false && attachmentsEnabled;
-  const shell = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    attachUi && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ComposerAttachments, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ComposerInput, { placeholder, autoFocus: !noAutoFocus }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  const shell = /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+    attachUi && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ComposerAttachments, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ComposerInput, { placeholder, autoFocus: !noAutoFocus }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       ComposerToolbar,
       {
         showAttachments: attachUi,
@@ -6168,15 +6530,15 @@ var Composer = ({
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    import_react29.ComposerPrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    import_react32.ComposerPrimitive.Root,
     {
       className: cn(
         "aui-composer-root relative flex w-full flex-col",
         className
       ),
-      children: attachUi ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-        import_react29.ComposerPrimitive.AttachmentDropzone,
+      children: attachUi ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        import_react32.ComposerPrimitive.AttachmentDropzone,
         {
           className: cn(
             studioComposeInputShellClass,
@@ -6184,7 +6546,7 @@ var Composer = ({
           ),
           children: shell
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: studioComposeInputShellClass, children: shell })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: studioComposeInputShellClass, children: shell })
     }
   );
 };
@@ -6192,7 +6554,7 @@ var ComposerInput = ({
   placeholder,
   autoFocus
 }) => {
-  const composer = (0, import_react29.useComposerRuntime)();
+  const composer = (0, import_react32.useComposerRuntime)();
   const onKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
       e.preventDefault();
@@ -6204,8 +6566,8 @@ var ComposerInput = ({
     el.style.height = "auto";
     el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    import_react29.ComposerPrimitive.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    import_react32.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",
@@ -6218,17 +6580,17 @@ var ComposerInput = ({
   );
 };
 var ComposerToolbar = ({ showAttachments, toolbar, sendTooltip }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime43.jsxs)("div", { className: "flex items-center gap-1", children: [
-      showAttachments && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ComposerAddAttachment, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsxs)("div", { className: "flex items-center gap-1", children: [
+      showAttachments && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ComposerAddAttachment, {}),
       toolbar
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ComposerSendOrCancel, { sendTooltip })
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ComposerSendOrCancel, { sendTooltip })
   ] });
 };
 var ComposerSendOrCancel = ({ sendTooltip }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react29.AuiIf, { condition: (s) => !s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react29.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react32.AuiIf, { condition: (s) => !s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react32.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       TooltipIconButton,
       {
         tooltip: sendTooltip,
@@ -6236,34 +6598,34 @@ var ComposerSendOrCancel = ({ sendTooltip }) => {
         type: "submit",
         className: "aui-composer-send shrink-0 disabled:opacity-30",
         "aria-label": "Send message",
-        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react7.ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react7.ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
       }
     ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react29.AuiIf, { condition: (s) => s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react29.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react32.AuiIf, { condition: (s) => s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react32.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       TooltipIconButton,
       {
         tooltip: "Stop generating",
         variant: "primary",
         className: "aui-composer-cancel shrink-0",
         "aria-label": "Stop generating",
-        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react7.SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react7.SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" })
       }
     ) }) })
   ] });
 };
 
 // src/chat/suggestions.tsx
-var import_react30 = require("react");
-var import_react31 = require("@assistant-ui/react");
+var import_react33 = require("react");
+var import_react34 = require("@assistant-ui/react");
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var Suggestions = ({
   suggestions,
   className
 }) => {
   const items = useResolvedSuggestions(suggestions);
   if (!items || items.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "div",
     {
       className: cn(
@@ -6272,17 +6634,17 @@ var Suggestions = ({
       ),
       role: "list",
       "aria-label": "Suggested prompts",
-      children: items.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SuggestionRow, { suggestion }, (suggestion.prompt ?? suggestion.title) + i))
+      children: items.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SuggestionRow, { suggestion }, (suggestion.prompt ?? suggestion.title) + i))
     }
   );
 };
 var SuggestionRow = ({ suggestion }) => {
-  const runtime = (0, import_react31.useThreadRuntime)();
+  const runtime = (0, import_react34.useThreadRuntime)();
   const onClick = () => {
     const text = suggestion.prompt ?? suggestion.title;
     runtime.append({ role: "user", content: [{ type: "text", text }] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     "button",
     {
       type: "button",
@@ -6290,20 +6652,20 @@ var SuggestionRow = ({ suggestion }) => {
       onClick,
       className: cn("aui-thread-suggestion", studioListRowButtonClass),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "aui-thread-suggestion-icon shrink-0 text-muted-foreground", children: suggestion.icon ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react8.ArrowUpIcon, { className: "size-4", strokeWidth: 1.75, "aria-hidden": true }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "aui-thread-suggestion-text min-w-0 flex-1 text-left", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44.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_runtime47.jsx)("span", { className: "aui-thread-suggestion-icon shrink-0 text-muted-foreground", children: suggestion.icon ?? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react8.ArrowUpIcon, { className: "size-4", strokeWidth: 1.75, "aria-hidden": true }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "aui-thread-suggestion-text min-w-0 flex-1 text-left", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.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_runtime47.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_react30.useState)(
+  const [resolved, setResolved] = (0, import_react33.useState)(
     () => Array.isArray(source) ? source : void 0
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (!source) {
       setResolved(void 0);
       return;
@@ -6322,7 +6684,7 @@ function useResolvedSuggestions(source) {
       cancelled = true;
     };
   }, [source]);
-  return (0, import_react30.useMemo)(() => resolved, [resolved]);
+  return (0, import_react33.useMemo)(() => resolved, [resolved]);
 }
 
 // src/design/theme-sanity.ts
@@ -6395,15 +6757,15 @@ function scheduleThemeSanityCheck() {
 }
 
 // src/chat/thread-variant.tsx
-var import_react32 = require("react");
-var ThreadVariantContext = (0, import_react32.createContext)("default");
+var import_react35 = require("react");
+var ThreadVariantContext = (0, import_react35.createContext)("default");
 var ThreadVariantProvider = ThreadVariantContext.Provider;
 function useThreadVariant() {
-  return (0, import_react32.useContext)(ThreadVariantContext);
+  return (0, import_react35.useContext)(ThreadVariantContext);
 }
 
 // src/chat/thread.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var Thread = ({
   className,
   variant = "default",
@@ -6426,17 +6788,17 @@ var Thread = ({
   const EditComposerSlot = components?.EditComposer ?? EditComposer;
   const ScrollToBottomSlot = components?.ScrollToBottom ?? ThreadScrollToBottom;
   const SuggestionsSlot = components?.Suggestions ?? Suggestions;
-  (0, import_react33.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     scheduleThemeSanityCheck();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ThreadVariantProvider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ThreadVariantProvider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     ArtifactRegistryProvider,
     {
       renderers: artifacts?.renderers,
       override: artifacts?.override,
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(UiEventProvider, { onEvent: onArtifactEvent ?? (() => {
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-        import_react34.ThreadPrimitive.Root,
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(UiEventProvider, { onEvent: onArtifactEvent ?? (() => {
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        import_react37.ThreadPrimitive.Root,
         {
           className: cn(
             "aui-root aui-thread-root @container flex h-full flex-col bg-transparent",
@@ -6445,8 +6807,8 @@ var Thread = ({
           ),
           style: { ["--thread-max-width"]: maxWidth },
           "data-thread-variant": variant,
-          children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-            import_react34.ThreadPrimitive.Viewport,
+          children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+            import_react37.ThreadPrimitive.Viewport,
             {
               turnAnchor: "bottom",
               className: cn(
@@ -6454,7 +6816,7 @@ var Thread = ({
                 isPanel ? "px-2 pt-2" : "px-4 pt-4"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                   WelcomeSlot,
                   {
                     config: welcome,
@@ -6463,8 +6825,8 @@ var Thread = ({
                     Suggestions: SuggestionsSlot
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                  import_react34.ThreadPrimitive.Messages,
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  import_react37.ThreadPrimitive.Messages,
                   {
                     components: {
                       UserMessage: UserMessageSlot,
@@ -6473,14 +6835,14 @@ var Thread = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                  import_react34.ThreadPrimitive.ViewportFooter,
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  import_react37.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_runtime45.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
                       "div",
                       {
                         className: cn(
@@ -6488,8 +6850,8 @@ var Thread = ({
                           isPanel ? "gap-2" : "gap-4"
                         ),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ScrollToBottomSlot, {}),
-                          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ComposerSlot, { placeholder })
+                          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ScrollToBottomSlot, {}),
+                          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ComposerSlot, { placeholder })
                         ]
                       }
                     )
@@ -6504,13 +6866,13 @@ var Thread = ({
   ) });
 };
 var ThreadScrollToBottom = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react34.ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react37.ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime45.jsx)(import_lucide_react9.ArrowDownIcon, { className: "size-4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react9.ArrowDownIcon, { className: "size-4" })
     }
   ) });
 };
@@ -6543,15 +6905,15 @@ var ThreadWelcome = ({
   showWelcomeSuggestions: showWelcomeSuggestionsProp,
   Suggestions: SuggestionsSlot = Suggestions
 }) => {
-  const isEmpty = (0, import_react34.useThread)((s) => s.messages.length === 0);
+  const isEmpty = (0, import_react37.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_runtime45.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_runtime45.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-      import_react35.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      import_react38.motion.div,
       {
         className: cn(
           "aui-thread-welcome-message flex flex-col items-center justify-center text-center",
@@ -6561,9 +6923,9 @@ var ThreadWelcome = ({
         initial: "initial",
         animate: "animate",
         children: [
-          config?.icon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react35.motion.div, { variants: welcomeIcon, className: isPanel ? "mb-3" : "mb-5", children: config.icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            import_react35.motion.h1,
+          config?.icon && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react38.motion.div, { variants: welcomeIcon, className: isPanel ? "mb-3" : "mb-5", children: config.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            import_react38.motion.h1,
             {
               variants: welcomeItem,
               className: cn(
@@ -6573,8 +6935,8 @@ var ThreadWelcome = ({
               children: config?.heading ?? defaultHeading
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            import_react35.motion.p,
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            import_react38.motion.p,
             {
               variants: welcomeItem,
               className: "aui-thread-welcome-message-inner mt-1.5 text-muted-foreground text-sm",
@@ -6584,16 +6946,16 @@ var ThreadWelcome = ({
         ]
       }
     ) }),
-    showWelcomeSuggestions && suggestions ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "aui-thread-welcome-suggestions mx-auto w-full max-w-(--thread-max-width) px-2", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SuggestionsSlot, { suggestions }) }) : null
+    showWelcomeSuggestions && suggestions ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "aui-thread-welcome-suggestions mx-auto w-full max-w-(--thread-max-width) px-2", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SuggestionsSlot, { suggestions }) }) : null
   ] });
 };
 var MessageError = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react34.MessagePrimitive.Error, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react34.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_runtime45.jsx)(import_react34.ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react37.MessagePrimitive.Error, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react37.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_runtime48.jsx)(import_react37.ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
 };
 var AssistantMessage = () => {
   const isPanel = useThreadVariant() === "panel";
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-    import_react34.MessagePrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    import_react37.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",
@@ -6601,7 +6963,7 @@ var AssistantMessage = () => {
       ),
       "data-role": "assistant",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
           "div",
           {
             className: cn(
@@ -6609,8 +6971,8 @@ var AssistantMessage = () => {
               isPanel ? "px-1 text-sm" : "px-2"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                import_react34.MessagePrimitive.Parts,
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                import_react37.MessagePrimitive.Parts,
                 {
                   components: {
                     Text: MarkdownText,
@@ -6620,11 +6982,11 @@ var AssistantMessage = () => {
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(MessageError, {})
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(MessageError, {})
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "aui-assistant-message-footer mt-1 mb-3 ml-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AssistantActionBar, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "aui-assistant-message-footer mt-1 mb-3 ml-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AssistantActionBar, {}) })
       ]
     }
   );
@@ -6637,36 +6999,36 @@ var ASSISTANT_ACTION_ICON_CLASS = cn(
   "[&>span:first-child]:group-hover/tbv2:bg-ghost-fill-hover"
 );
 var AssistantActionBar = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-    import_react34.ActionBarPrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    import_react37.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_runtime45.jsx)(import_react34.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react37.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
           TooltipIconButton,
           {
             tooltip: "Copy",
             variant: "ghost",
             className: ASSISTANT_ACTION_ICON_CLASS,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react34.AuiIf, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react9.CheckIcon, { className: "size-3" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react34.AuiIf, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react9.CopyIcon, { className: "size-3" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react37.AuiIf, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react9.CheckIcon, { className: "size-3" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react37.AuiIf, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react9.CopyIcon, { className: "size-3" }) })
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react34.ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react37.ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           TooltipIconButton,
           {
             tooltip: "Regenerate",
             variant: "ghost",
             className: ASSISTANT_ACTION_ICON_CLASS,
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react9.RefreshCwIcon, { className: "size-3" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react9.RefreshCwIcon, { className: "size-3" })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react34.ActionBarMorePrimitive.Root, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react34.ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react37.ActionBarMorePrimitive.Root, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react37.ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             TooltipIconButton,
             {
               tooltip: "More",
@@ -6675,17 +7037,17 @@ var AssistantActionBar = () => {
                 ASSISTANT_ACTION_ICON_CLASS,
                 "data-[state=open]:text-muted-foreground/80"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react9.MoreHorizontalIcon, { className: "size-3" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react9.MoreHorizontalIcon, { className: "size-3" })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            import_react34.ActionBarMorePrimitive.Content,
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            import_react37.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_runtime45.jsx)(import_react34.ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react34.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_runtime45.jsx)(import_lucide_react9.DownloadIcon, { className: "size-4 shrink-0" }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react37.ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react37.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_runtime48.jsx)(import_lucide_react9.DownloadIcon, { className: "size-4 shrink-0" }),
                 "Export as Markdown"
               ] }) })
             }
@@ -6696,12 +7058,12 @@ var AssistantActionBar = () => {
   );
 };
 var UserMessageText = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react34.MessagePartPrimitive.Text, { smooth: false }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react37.MessagePartPrimitive.Text, { smooth: false }) });
 };
 var UserMessage = () => {
   const isPanel = useThreadVariant() === "panel";
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-    import_react34.MessagePrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    import_react37.MessagePrimitive.Root,
     {
       className: cn(
         "aui-user-message-root mx-auto flex w-full max-w-(--thread-max-width) flex-col items-end gap-2",
@@ -6709,9 +7071,9 @@ var UserMessage = () => {
       ),
       "data-role": "user",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(UserMessageAttachments, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-          import_react35.motion.div,
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(UserMessageAttachments, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+          import_react38.motion.div,
           {
             className: cn(
               "aui-user-message-content relative inline-block max-w-[85%] rounded-2xl bg-bubble-user text-bubble-user-foreground",
@@ -6721,8 +7083,8 @@ var UserMessage = () => {
             animate: { opacity: 1, y: 0, scale: 1 },
             transition: { duration: 0.65, ease: luxuryEase },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react34.MessagePrimitive.Parts, { components: { Text: UserMessageText } }),
-              /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime45.jsx)(UserActionBar, {}) })
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react37.MessagePrimitive.Parts, { components: { Text: UserMessageText } }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsx)(UserActionBar, {}) })
             ]
           }
         )
@@ -6731,42 +7093,42 @@ var UserMessage = () => {
   );
 };
 var UserActionBar = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-    import_react34.ActionBarPrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    import_react37.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "always",
       className: "aui-user-action-bar-root flex flex-col items-end",
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react34.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react37.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         TooltipIconButton,
         {
           tooltip: "Edit",
           variant: "ghost",
           className: ASSISTANT_ACTION_ICON_CLASS,
-          children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react9.PencilIcon, { className: "size-3" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react9.PencilIcon, { className: "size-3" })
         }
       ) })
     }
   );
 };
 var EditComposer = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react34.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_runtime45.jsxs)(import_react34.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_runtime45.jsx)(
-      import_react34.ComposerPrimitive.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react37.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_runtime48.jsxs)(import_react37.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_runtime48.jsx)(
+      import_react37.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_runtime45.jsxs)("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react34.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TimbalV2Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react34.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TimbalV2Button, { variant: "primary", size: "sm", children: "Update" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react37.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TimbalV2Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react37.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TimbalV2Button, { variant: "primary", size: "sm", children: "Update" }) })
     ] })
   ] }) });
 };
 
 // src/app/chat/AppChatPanel.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var shellClass = "aui-app-chat-panel flex h-full min-h-0 flex-col overflow-hidden";
 var chromeClass = cn(
   "aui-app-chat-panel-chrome relative z-20 flex min-h-10 shrink-0 items-center justify-end px-2 pt-2"
@@ -6811,18 +7173,18 @@ var AppChatPanel = ({
   ...rest
 }) => {
   const shellChat = useAppShellChat();
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn(shellClass, className), children: [
-    shellChat?.collapsible ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: chromeClass, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn(shellClass, className), children: [
+    shellChat?.collapsible ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: chromeClass, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "button",
       {
         type: "button",
         className: closeButtonClass,
         onClick: () => shellChat.setOpen(false),
         "aria-label": "Close assistant",
-        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react10.XIcon, { className: "size-4", "aria-hidden": true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react10.XIcon, { className: "size-4", "aria-hidden": true })
       }
     ) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: bodyClass, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: bodyClass, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       TimbalRuntimeProvider,
       {
         workforceId,
@@ -6832,7 +7194,7 @@ var AppChatPanel = ({
         attachmentsUploadUrl,
         attachmentsAccept,
         debug,
-        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           Thread,
           {
             variant: "panel",
@@ -6853,38 +7215,38 @@ var AppChatPanel = ({
 };
 
 // src/app/surfaces/SurfaceCard.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var SurfaceCard = ({ children, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: cn("aui-app-surface-card", appSurfaceCardClass, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: cn("aui-app-surface-card", appSurfaceCardClass, className), children });
 };
 
 // src/app/surfaces/StatTile.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var StatTile = ({ label, value, hint, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn("aui-app-stat-tile", appStatTileClass, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: appStatLabelClass, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: appStatValueClass, children: value }),
-    hint ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xs text-muted-foreground", children: hint }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: cn("aui-app-stat-tile", appStatTileClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: appStatLabelClass, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: appStatValueClass, children: value }),
+    hint ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-xs text-muted-foreground", children: hint }) : null
   ] });
 };
 
 // src/app/surfaces/EmptyState.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var EmptyState = ({
   title,
   description,
   action,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("aui-app-empty-state", appEmptyStateClass, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: appEmptyStateTitleClass, children: title }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: appEmptyStateDescriptionClass, children: description }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: cn("aui-app-empty-state", appEmptyStateClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: appEmptyStateTitleClass, children: title }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: appEmptyStateDescriptionClass, children: description }) : null,
     action
   ] });
 };
 
 // src/app/surfaces/StatusBadge.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var statusBadgeToneClass = {
   default: "bg-muted text-foreground",
   primary: "bg-primary/10 text-primary",
@@ -6898,7 +7260,7 @@ var StatusBadge = ({
   tone = "default",
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "span",
     {
       className: cn(
@@ -6912,7 +7274,7 @@ var StatusBadge = ({
 };
 
 // src/app/surfaces/AppConfirmDialog.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var bodyClass2 = "flex flex-col gap-4 p-6";
 var titleClass = "pr-8";
 var actionsClass = "flex flex-wrap justify-end gap-2";
@@ -6927,15 +7289,15 @@ var AppConfirmDialog = ({
   destructive = false,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     DialogContent,
     {
       className: cn("gap-0 p-0 sm:max-w-md", className),
-      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: bodyClass2, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DialogTitle, { className: titleClass, children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "text-sm text-muted-foreground", children: description }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: actionsClass, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: bodyClass2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DialogTitle, { className: titleClass, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-sm text-muted-foreground", children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: actionsClass, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             TimbalV2Button,
             {
               type: "button",
@@ -6945,7 +7307,7 @@ var AppConfirmDialog = ({
               children: cancelLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             TimbalV2Button,
             {
               type: "button",
@@ -6965,7 +7327,7 @@ var AppConfirmDialog = ({
 };
 
 // src/app/surfaces/InfoCard.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var toneClass = {
   neutral: "border-border bg-muted/40",
   info: "border-primary/25 bg-primary/5",
@@ -6980,7 +7342,7 @@ var InfoCard = ({
   action,
   tone = "neutral",
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
   "div",
   {
     className: cn(
@@ -6989,18 +7351,18 @@ var InfoCard = ({
       className
     ),
     children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: icon }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "min-w-0 flex-1", children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "text-sm font-medium text-foreground", children: title }) : null,
-        children ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: cn("text-sm text-muted-foreground", title && "mt-1"), children }) : null
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: icon }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "min-w-0 flex-1", children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "text-sm font-medium text-foreground", children: title }) : null,
+        children ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: cn("text-sm text-muted-foreground", title && "mt-1"), children }) : null
       ] }),
-      action ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "shrink-0", children: action }) : null
+      action ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "shrink-0", children: action }) : null
     ]
   }
 );
 
 // src/app/surfaces/StatusDot.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var dotClass = {
   online: "bg-emerald-500",
   busy: "bg-amber-500",
@@ -7013,9 +7375,9 @@ var StatusDot = ({
   label,
   pulse = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: cn("inline-flex items-center gap-1.5", className), children: [
-  /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "relative flex size-2", children: [
-    pulse ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: cn("inline-flex items-center gap-1.5", className), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "relative flex size-2", children: [
+    pulse ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       "span",
       {
         className: cn(
@@ -7024,25 +7386,25 @@ var StatusDot = ({
         )
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[tone]) })
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[tone]) })
   ] }),
-  label ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-xs text-muted-foreground", children: label }) : null
+  label ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-xs text-muted-foreground", children: label }) : null
 ] });
 
 // src/app/surfaces/DescriptionList.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var DescriptionList = ({
   items,
   stacked = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   "dl",
   {
     className: cn(
       "divide-y divide-border rounded-xl border border-border bg-card",
       className
     ),
-    children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+    children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
       "div",
       {
         className: cn(
@@ -7050,8 +7412,8 @@ var DescriptionList = ({
           stacked ? "flex flex-col gap-0.5" : "flex items-center justify-between gap-4"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("dt", { className: "text-sm text-muted-foreground", children: item.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("dt", { className: "text-sm text-muted-foreground", children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             "dd",
             {
               className: cn(
@@ -7069,10 +7431,10 @@ var DescriptionList = ({
 );
 
 // src/app/surfaces/ExpandableSection.tsx
-var import_react36 = require("react");
-var import_react37 = require("motion/react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var Chevron = ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+var import_react39 = require("react");
+var import_react40 = require("motion/react");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var Chevron = ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -7086,7 +7448,7 @@ var Chevron = ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": true,
-    children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("path", { d: "m6 9 6 6 6-6" })
   }
 );
 var ExpandableSection = ({
@@ -7099,16 +7461,16 @@ var ExpandableSection = ({
   onOpenChange,
   className
 }) => {
-  const reduceMotion = (0, import_react37.useReducedMotion)();
-  const panelId = (0, import_react36.useId)();
-  const [internalOpen, setInternalOpen] = (0, import_react36.useState)(defaultOpen);
+  const reduceMotion = (0, import_react40.useReducedMotion)();
+  const panelId = (0, import_react39.useId)();
+  const [internalOpen, setInternalOpen] = (0, import_react39.useState)(defaultOpen);
   const open = openProp ?? internalOpen;
   const toggle = () => {
     if (openProp == null) setInternalOpen((o) => !o);
     onOpenChange?.(!open);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cn("border-b border-border last:border-0", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: cn("border-b border-border last:border-0", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
       "button",
       {
         type: "button",
@@ -7117,17 +7479,17 @@ var ExpandableSection = ({
         "aria-controls": panelId,
         className: "flex w-full items-center justify-between gap-3 bg-transparent px-4 py-3 text-left hover:bg-transparent active:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/10",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "flex min-w-0 items-center gap-3", children: [
-            icon ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "flex size-8 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground", children: icon }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
-            count != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: count }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "flex min-w-0 items-center gap-3", children: [
+            icon ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "flex size-8 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground", children: icon }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
+            count != null ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: count }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Chevron, { open })
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Chevron, { open })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react37.AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-      import_react37.motion.div,
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react40.AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      import_react40.motion.div,
       {
         id: panelId,
         initial: reduceMotion ? void 0 : { height: 0, opacity: 0 },
@@ -7135,7 +7497,7 @@ var ExpandableSection = ({
         exit: reduceMotion ? void 0 : { height: 0, opacity: 0 },
         transition: { duration: 0.2, ease: "easeOut" },
         className: "overflow-hidden",
-        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "bg-muted/20", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "bg-muted/20", children })
       },
       "body"
     ) : null })
@@ -7143,7 +7505,7 @@ var ExpandableSection = ({
 };
 
 // src/app/surfaces/ResourceCard.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var resourceCardShellClass = cn(
   "flex min-h-[8.5rem] flex-col rounded-2xl p-4 text-left font-normal",
   TIMBAL_V2_ELEVATED_SURFACE
@@ -7168,35 +7530,35 @@ var ResourceCard = ({
   ariaLabel,
   className
 }) => {
-  const body = /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-start gap-3", children: [
-      media ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: mediaShellClass, children: media }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "min-w-0 flex-1 pt-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "truncate text-sm font-normal leading-snug text-foreground", children: title }),
-        subtitle ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "mt-1 line-clamp-2 text-xs font-normal text-muted-foreground", children: subtitle }) : null
+  const body = /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-start gap-3", children: [
+      media ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: mediaShellClass, children: media }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "min-w-0 flex-1 pt-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "truncate text-sm font-normal leading-snug text-foreground", children: title }),
+        subtitle ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "mt-1 line-clamp-2 text-xs font-normal text-muted-foreground", children: subtitle }) : null
       ] }),
-      badge ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "shrink-0 pt-0.5", children: badge }) : null
+      badge ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "shrink-0 pt-0.5", children: badge }) : null
     ] }),
-    footer || action ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "mt-auto flex items-center justify-between gap-3 border-t border-border/40 pt-3 text-xs font-normal text-muted-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "min-w-0 truncate", children: footer }),
-      action ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "shrink-0 opacity-80", children: action }) : null
+    footer || action ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "mt-auto flex items-center justify-between gap-3 border-t border-border/40 pt-3 text-xs font-normal text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "min-w-0 truncate", children: footer }),
+      action ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "shrink-0 opacity-80", children: action }) : null
     ] }) : null
   ] });
   if (onClick) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("button", { type: "button", onClick, "aria-label": ariaLabel, className: cn(resourceCardInteractiveClass, className), children: body });
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { type: "button", onClick, "aria-label": ariaLabel, className: cn(resourceCardInteractiveClass, className), children: body });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("article", { className: cn(resourceCardShellClass, className), children: body });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("article", { className: cn(resourceCardShellClass, className), children: body });
 };
 
 // src/app/settings/SettingsSection.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var SettingsSectionHeader = ({
   title,
   description,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn("flex flex-col", className), children: [
-  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h3", { className: "text-[17px] font-medium leading-tight text-foreground", children: title }),
-  description ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+}) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: cn("flex flex-col", className), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("h3", { className: "text-[17px] font-medium leading-tight text-foreground", children: title }),
+  description ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
 ] });
 var SettingsSection = ({
   title,
@@ -7205,7 +7567,7 @@ var SettingsSection = ({
   children,
   noBorderTop = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
   "section",
   {
     className: cn(
@@ -7214,18 +7576,18 @@ var SettingsSection = ({
       className
     ),
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h2", { className: "text-sm font-medium text-foreground", children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null,
-        descriptionFooter ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "mt-3 min-w-0", children: descriptionFooter }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("h2", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null,
+        descriptionFooter ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "mt-3 min-w-0", children: descriptionFooter }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "min-w-0 space-y-3", children })
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "min-w-0 space-y-3", children })
     ]
   }
 );
 
 // src/app/settings/FieldRow.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var FieldRow = ({
   label,
   children,
@@ -7235,7 +7597,7 @@ var FieldRow = ({
   className
 }) => {
   if (inline) {
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
       "div",
       {
         className: cn(
@@ -7243,8 +7605,8 @@ var FieldRow = ({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
               "label",
               {
                 htmlFor,
@@ -7252,25 +7614,25 @@ var FieldRow = ({
                 children: label
               }
             ),
-            description ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
+            description ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "shrink-0", children })
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "shrink-0", children })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: cn("flex flex-col gap-1.5", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("label", { htmlFor, className: "text-sm font-medium text-foreground", children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("label", { htmlFor, className: "text-sm font-medium text-foreground", children: label }),
     children,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-xs text-muted-foreground", children: description }) : null
+    description ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-xs text-muted-foreground", children: description }) : null
   ] });
 };
 
 // src/app/settings/FloatingUnsavedChangesBar.tsx
-var import_react38 = require("react");
+var import_react41 = require("react");
 var import_react_dom = require("react-dom");
-var import_react39 = require("motion/react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_react42 = require("motion/react");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var FloatingUnsavedChangesBar = ({
   visible,
   message = "Unsaved changes",
@@ -7283,13 +7645,13 @@ var FloatingUnsavedChangesBar = ({
   ariaLabel = "Unsaved changes",
   className
 }) => {
-  const reduceMotion = (0, import_react39.useReducedMotion)();
-  const [mounted, setMounted] = (0, import_react38.useState)(false);
-  (0, import_react38.useEffect)(() => setMounted(true), []);
+  const reduceMotion = (0, import_react42.useReducedMotion)();
+  const [mounted, setMounted] = (0, import_react41.useState)(false);
+  (0, import_react41.useEffect)(() => setMounted(true), []);
   if (!mounted || typeof document === "undefined") return null;
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react39.AnimatePresence, { children: visible ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center px-4", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
-      import_react39.motion.div,
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react42.AnimatePresence, { children: visible ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center px-4", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+      import_react42.motion.div,
       {
         role: "region",
         "aria-label": ariaLabel,
@@ -7302,10 +7664,10 @@ var FloatingUnsavedChangesBar = ({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-sm text-muted-foreground", children: message }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSaving, children: discardLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { size: "sm", onClick: onSave, disabled: saveDisabled || isSaving, children: isSaving ? "Saving\u2026" : saveLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-sm text-muted-foreground", children: message }),
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSaving, children: discardLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { size: "sm", onClick: onSave, disabled: saveDisabled || isSaving, children: isSaving ? "Saving\u2026" : saveLabel })
           ] })
         ]
       }
@@ -7315,13 +7677,13 @@ var FloatingUnsavedChangesBar = ({
 };
 
 // src/app/settings/DangerZone.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var DangerZoneAction = ({
   title,
   description,
   action,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
   "div",
   {
     className: cn(
@@ -7329,11 +7691,11 @@ var DangerZoneAction = ({
       className
     ),
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-sm font-medium text-foreground", children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "shrink-0", children: action })
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "shrink-0", children: action })
     ]
   }
 );
@@ -7342,7 +7704,7 @@ var DangerZone = ({
   description,
   children,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
   "section",
   {
     className: cn(
@@ -7350,18 +7712,18 @@ var DangerZone = ({
       className
     ),
     children: [
-      (title || description) && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("header", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-3", children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("h3", { className: "text-sm font-semibold text-destructive", children: title }) : null,
-        description ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+      (title || description) && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("header", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-3", children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("h3", { className: "text-sm font-semibold text-destructive", children: title }) : null,
+        description ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "divide-y divide-border bg-card", children })
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "divide-y divide-border bg-card", children })
     ]
   }
 );
 
 // src/app/integrations/IntegrationCard.tsx
-var import_react40 = require("react");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_react43 = require("react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var INTEGRATION_CATALOG_CARD_HEIGHT_CLASS = "h-[12.25rem] min-h-[12.25rem] max-h-[12.25rem]";
 var statusLabel = {
   available: null,
@@ -7399,15 +7761,15 @@ var IntegrationCard = ({
   ariaLabel,
   className
 }) => {
-  const titleId = (0, import_react40.useId)();
+  const titleId = (0, import_react43.useId)();
   const locked = status === "locked";
   const dimmed = status === "disabled" || locked;
-  const body = /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex h-full min-h-0 flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex shrink-0 items-start gap-3 pr-2", children: [
-      logo ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: logoShellClass, "aria-hidden": Boolean(ariaLabel), children: logo }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "min-w-0 flex-1 pt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  const body = /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex shrink-0 items-start gap-3 pr-2", children: [
+      logo ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: logoShellClass, "aria-hidden": Boolean(ariaLabel), children: logo }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "min-w-0 flex-1 pt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
             "h4",
             {
               id: onClick && !action ? void 0 : titleId,
@@ -7415,12 +7777,12 @@ var IntegrationCard = ({
               children: name
             }
           ),
-          statusLabel[status] ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "mt-0.5 text-xs text-muted-foreground", children: statusLabel[status] }) : null
+          statusLabel[status] ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "mt-0.5 text-xs text-muted-foreground", children: statusLabel[status] }) : null
         ] }),
-        badge ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "shrink-0", children: badge }) : null
+        badge ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "shrink-0", children: badge }) : null
       ] }) })
     ] }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    description ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       "p",
       {
         className: cn(
@@ -7430,9 +7792,9 @@ var IntegrationCard = ({
         children: description
       }
     ) : null,
-    action ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "min-h-0 flex-1", "aria-hidden": true }),
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "relative mt-3 shrink-0", children: action })
+    action ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "min-h-0 flex-1", "aria-hidden": true }),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "relative mt-3 shrink-0", children: action })
     ] }) : null
   ] });
   const shellClass3 = cn(
@@ -7442,7 +7804,7 @@ var IntegrationCard = ({
     className
   );
   if (onClick && !action) {
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       "button",
       {
         type: "button",
@@ -7459,12 +7821,12 @@ var IntegrationCard = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("article", { className: shellClass3, "aria-labelledby": titleId, children: body });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("article", { className: shellClass3, "aria-labelledby": titleId, children: body });
 };
 
 // src/app/integrations/IntegrationsEmptyState.tsx
-var import_react41 = require("react");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_react44 = require("react");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var IntegrationsEmptyState = ({
   title = "No integrations yet",
   description = "Connect a provider to start syncing data and powering your workforce.",
@@ -7472,8 +7834,8 @@ var IntegrationsEmptyState = ({
   action,
   className
 }) => {
-  const titleId = (0, import_react41.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+  const titleId = (0, import_react44.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
     "section",
     {
       className: cn(
@@ -7483,7 +7845,7 @@ var IntegrationsEmptyState = ({
       ),
       "aria-labelledby": titleId,
       children: [
-        icon ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
           "span",
           {
             className: cn(
@@ -7495,21 +7857,21 @@ var IntegrationsEmptyState = ({
             children: icon
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }) : null,
-        action ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "mt-1", children: action }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }) : null,
+        action ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "mt-1", children: action }) : null
       ]
     }
   );
 };
 
 // src/app/integrations/PlanBadge.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var planBadgeClass = "inline-flex h-5 max-w-full shrink-0 items-center rounded-md border border-border bg-muted/90 px-2 text-[11px] font-normal text-muted-foreground dark:border-white/10 dark:bg-white/5 dark:text-muted-foreground";
-var PlanBadge = ({ children, className }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: cn(planBadgeClass, className), children });
+var PlanBadge = ({ children, className }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: cn(planBadgeClass, className), children });
 
 // src/app/integrations/ConnectionRow.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var logoShellClass2 = cn(
   "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg",
   TIMBAL_V2_LOGO_TILE
@@ -7524,14 +7886,14 @@ var ConnectionRow = ({
   ariaLabel,
   className
 }) => {
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
-    logo ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: logoShellClass2, children: logo }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "truncate text-sm font-normal text-foreground", children: name }),
-      meta ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: meta }) : null
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    logo ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: logoShellClass2, children: logo }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "truncate text-sm font-normal text-foreground", children: name }),
+      meta ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: meta }) : null
     ] }),
-    badge ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "shrink-0", children: badge }) : null,
-    action ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "shrink-0", children: action }) : null
+    badge ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "shrink-0", children: badge }) : null,
+    action ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "shrink-0", children: action }) : null
   ] });
   const rowClass2 = cn(
     "flex w-full items-center gap-3 px-4 py-3 text-left",
@@ -7539,7 +7901,7 @@ var ConnectionRow = ({
     className
   );
   if (onClick) {
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       "button",
       {
         type: "button",
@@ -7551,7 +7913,7 @@ var ConnectionRow = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { role: "listitem", className: rowClass2, children: inner });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { role: "listitem", className: rowClass2, children: inner });
 };
 var connectionRowListClass = cn(
   "overflow-hidden rounded-2xl",
@@ -7559,12 +7921,12 @@ var connectionRowListClass = cn(
 );
 
 // src/app/integrations/ConnectionRowList.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var ConnectionRowList = ({
   children,
   "aria-label": ariaLabel = "Connected integrations",
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
   "div",
   {
     role: "list",
@@ -7575,8 +7937,8 @@ var ConnectionRowList = ({
 );
 
 // src/ui/pill-segmented-tabs.tsx
-var import_react42 = require("react");
-var import_react43 = require("motion/react");
+var import_react45 = require("react");
+var import_react46 = 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";
@@ -7609,7 +7971,7 @@ var pillSegmentedActiveIndicatorClass = cn(
 );
 
 // src/ui/pill-segmented-tabs.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var PillTab = ({
   tabKey,
   label,
@@ -7620,10 +7982,10 @@ var PillTab = ({
   segmentClassName,
   animateIndicator
 }) => {
-  const handlePress = (0, import_react42.useCallback)(() => {
+  const handlePress = (0, import_react45.useCallback)(() => {
     if (!disabled) onSelect(tabKey);
   }, [disabled, onSelect, tabKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
     "button",
     {
       type: "button",
@@ -7636,15 +7998,15 @@ var PillTab = ({
         !disabled && (isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground")
       ),
       children: [
-        isActive && animateIndicator ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-          import_react43.motion.div,
+        isActive && animateIndicator ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          import_react46.motion.div,
           {
             layoutId,
             className: pillSegmentedActiveIndicatorClass,
             transition: { type: "spring", duration: 0.3, bounce: 0.15 }
           }
-        ) : isActive ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: pillSegmentedActiveIndicatorClass, "aria-hidden": true }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "relative z-10 whitespace-nowrap", children: label })
+        ) : isActive ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: pillSegmentedActiveIndicatorClass, "aria-hidden": true }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "relative z-10 whitespace-nowrap", children: label })
       ]
     }
   );
@@ -7658,13 +8020,13 @@ var PillSegmentedTabs = ({
   layoutId: layoutIdProp,
   "aria-label": ariaLabel
 }) => {
-  const reactId = (0, import_react42.useId)();
+  const reactId = (0, import_react45.useId)();
   const layoutId = layoutIdProp ?? `pill-segmented-${reactId.replace(/:/g, "")}`;
-  const reducedMotion = (0, import_react43.useReducedMotion)();
+  const reducedMotion = (0, import_react46.useReducedMotion)();
   const isFlush = trackVariant === "flush";
   const trackClass2 = isFlush ? pillSegmentedTrackFlushClass : pillSegmentedTrackClass;
   const segmentClassName = isFlush ? pillSegmentedFlushSegmentClass : pillSegmentedSegmentClass;
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { role: "group", "aria-label": ariaLabel, className: cn(trackClass2, className), children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { role: "group", "aria-label": ariaLabel, className: cn(trackClass2, className), children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     PillTab,
     {
       tabKey: tab.key,
@@ -7679,10 +8041,10 @@ var PillSegmentedTabs = ({
     tab.key
   )) });
 };
-var MemoPillSegmentedTabs = (0, import_react42.memo)(PillSegmentedTabs);
+var MemoPillSegmentedTabs = (0, import_react45.memo)(PillSegmentedTabs);
 
 // src/app/navigation/SubNav.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var SubNav = ({
   items,
   activeId,
@@ -7691,7 +8053,7 @@ var SubNav = ({
   "aria-label": ariaLabel = "Section navigation",
   layoutId
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("nav", { className: cn("aui-app-sub-nav", className), "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("nav", { className: cn("aui-app-sub-nav", className), "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     PillSegmentedTabs,
     {
       value: activeId,
@@ -7705,13 +8067,13 @@ var SubNav = ({
 };
 
 // src/app/navigation/Breadcrumbs.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var Breadcrumbs = ({ items, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("nav", { className: cn("aui-app-breadcrumbs", appBreadcrumbsClass, className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("nav", { className: cn("aui-app-breadcrumbs", appBreadcrumbsClass, className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("li", { className: "inline-flex items-center gap-1.5", children: [
-      index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-muted-foreground/50", "aria-hidden": true, children: "/" }) : null,
-      isLast ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-foreground", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("a", { href: item.href, className: appBreadcrumbLinkClass, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("li", { className: "inline-flex items-center gap-1.5", children: [
+      index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "text-muted-foreground/50", "aria-hidden": true, children: "/" }) : null,
+      isLast ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "text-foreground", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("a", { href: item.href, className: appBreadcrumbLinkClass, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
         "button",
         {
           type: "button",
@@ -7725,7 +8087,7 @@ var Breadcrumbs = ({ items, className }) => {
 };
 
 // src/app/forms/Field.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var Field = ({
   label,
   hint,
@@ -7734,11 +8096,11 @@ var Field = ({
   className,
   htmlFor
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: cn("aui-app-field", appFieldClass, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("label", { className: appFieldLabelClass, htmlFor, children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: cn("aui-app-field", appFieldClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("label", { className: appFieldLabelClass, htmlFor, children: label }),
     children,
-    hint && !error ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: appFieldHintClass, children: hint }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: "text-xs text-destructive", role: "alert", children: error }) : null
+    hint && !error ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: appFieldHintClass, children: hint }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: "text-xs text-destructive", role: "alert", children: error }) : null
   ] });
 };
 var FieldInput = ({
@@ -7751,7 +8113,7 @@ var FieldInput = ({
   ...inputProps
 }) => {
   const inputId = id ?? inputProps.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     Field,
     {
       label,
@@ -7759,7 +8121,7 @@ var FieldInput = ({
       error,
       htmlFor: inputId,
       className: fieldClassName,
-      children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         "input",
         {
           id: inputId,
@@ -7773,7 +8135,7 @@ var FieldInput = ({
 };
 
 // src/app/forms/FieldTextarea.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var textareaClass = cn(
   appInputClass,
   "min-h-[5.5rem] resize-y py-2.5 leading-relaxed"
@@ -7788,7 +8150,7 @@ var FieldTextarea = ({
   ...props
 }) => {
   const textareaId = id ?? props.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     Field,
     {
       label,
@@ -7796,7 +8158,7 @@ var FieldTextarea = ({
       error,
       htmlFor: textareaId,
       className: fieldClassName,
-      children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         "textarea",
         {
           id: textareaId,
@@ -7811,7 +8173,7 @@ var FieldTextarea = ({
 
 // src/app/forms/FieldSelect.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var selectWrapClass = "relative";
 var selectClass = cn(
   appInputClass,
@@ -7828,7 +8190,7 @@ var FieldSelect = ({
   ...props
 }) => {
   const selectId = id ?? props.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     Field,
     {
       label,
@@ -7836,8 +8198,8 @@ var FieldSelect = ({
       error,
       htmlFor: selectId,
       className: fieldClassName,
-      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: selectWrapClass, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: selectWrapClass, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
           "select",
           {
             id: selectId,
@@ -7847,7 +8209,7 @@ var FieldSelect = ({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
           import_lucide_react11.ChevronDownIcon,
           {
             className: "pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground",
@@ -7860,7 +8222,7 @@ var FieldSelect = ({
 };
 
 // src/app/forms/FieldSwitch.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var trackClass = cn(
   "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-[background,box-shadow,border-color] duration-200",
   "peer-focus-visible:ring-2 peer-focus-visible:ring-foreground/10",
@@ -7881,7 +8243,7 @@ var FieldSwitch = ({
   ...props
 }) => {
   const inputId = id ?? props.name ?? "switch";
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     "label",
     {
       className: cn(
@@ -7890,8 +8252,8 @@ var FieldSwitch = ({
       ),
       htmlFor: inputId,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { className: "relative mt-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { className: "relative mt-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             "input",
             {
               id: inputId,
@@ -7901,11 +8263,11 @@ var FieldSwitch = ({
               ...props
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: thumbClass }) })
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: thumbClass }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "text-sm font-medium text-foreground", children: label }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "text-xs text-muted-foreground", children: description }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "text-sm font-medium text-foreground", children: label }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "text-xs text-muted-foreground", children: description }) : null
         ] })
       ]
     }
@@ -7914,13 +8276,13 @@ var FieldSwitch = ({
 
 // src/app/forms/SearchInput.tsx
 var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var SearchInput = ({
   className,
   placeholder = "Search\u2026",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     "label",
     {
       className: cn(
@@ -7929,8 +8291,8 @@ var SearchInput = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_lucide_react12.SearchIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react12.SearchIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           "input",
           {
             type: "search",
@@ -7945,18 +8307,18 @@ var SearchInput = ({
 };
 
 // src/app/forms/FormSection.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var FormSection = ({ title, children, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("fieldset", { className: cn("aui-app-form-section", appSectionClass, "border-0 p-0", className), children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("legend", { className: cn(appSectionTitleClass, "mb-3 px-0"), children: title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "flex flex-col gap-4", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("fieldset", { className: cn("aui-app-form-section", appSectionClass, "border-0 p-0", className), children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("legend", { className: cn(appSectionTitleClass, "mb-3 px-0"), children: title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "flex flex-col gap-4", children })
   ] });
 };
 
 // src/app/data/FilterBar.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var FilterBar = ({ children, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     "div",
     {
       className: cn("aui-app-filter-bar", appFilterBarClass, className),
@@ -7968,31 +8330,31 @@ var FilterBar = ({ children, className }) => {
 };
 
 // src/app/data/FilterField.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var FilterField = ({
   label,
   children,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: cn("aui-app-filter-field", appFieldClass, className), children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: appFieldLabelClass, children: label }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: cn("aui-app-filter-field", appFieldClass, className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: appFieldLabelClass, children: label }) : null,
     children
   ] });
 };
 
 // src/app/data/DataTable.tsx
-var import_react44 = require("react");
+var import_react47 = require("react");
 var import_lucide_react14 = require("lucide-react");
 
 // src/ui/checkbox.tsx
 var import_radix_ui5 = require("radix-ui");
 var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 function Checkbox({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     import_radix_ui5.Checkbox.Root,
     {
       "data-slot": "checkbox",
@@ -8003,12 +8365,12 @@ function Checkbox({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
         import_radix_ui5.Checkbox.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: "flex items-center justify-center text-current transition-none",
-          children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react13.CheckIcon, { className: "size-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react13.CheckIcon, { className: "size-3.5" })
         }
       )
     }
@@ -8016,9 +8378,9 @@ function Checkbox({
 }
 
 // src/ui/skeleton.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     "div",
     {
       "data-slot": "skeleton",
@@ -8029,7 +8391,7 @@ function Skeleton({ className, ...props }) {
 }
 
 // src/app/data/DataTable.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var shellClass2 = "overflow-hidden rounded-xl border border-border bg-card shadow-card";
 var tableClass = "w-full border-collapse bg-transparent text-sm";
 var headCellClass = "border-b border-border/60 bg-transparent px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide text-muted-foreground";
@@ -8071,12 +8433,12 @@ function SortIndicator({
 }) {
   const iconClass = "size-3.5 shrink-0 opacity-60 group-hover:opacity-100";
   if (!active) {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react14.ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react14.ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
   }
   if (direction === "desc") {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react14.ArrowDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react14.ArrowDownIcon, { className: iconClass, "aria-hidden": true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react14.ArrowUpIcon, { className: iconClass, "aria-hidden": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react14.ArrowUpIcon, { className: iconClass, "aria-hidden": true });
 }
 function DataTable({
   columns,
@@ -8108,7 +8470,7 @@ function DataTable({
   defaultPageIndex = 0,
   onPageChange
 }) {
-  const [uncontrolledSort, setUncontrolledSort] = (0, import_react44.useState)(
+  const [uncontrolledSort, setUncontrolledSort] = (0, import_react47.useState)(
     defaultSort
   );
   const isSortControlled = sortProp !== void 0;
@@ -8119,19 +8481,19 @@ function DataTable({
     }
     onSortChange?.(next);
   };
-  const [uncontrolledSelected, setUncontrolledSelected] = (0, import_react44.useState)(
+  const [uncontrolledSelected, setUncontrolledSelected] = (0, import_react47.useState)(
     defaultSelectedKeys ?? []
   );
   const isSelectionControlled = selectedKeysProp !== void 0;
   const selectedKeys = isSelectionControlled ? selectedKeysProp : uncontrolledSelected;
-  const selectedSet = (0, import_react44.useMemo)(() => new Set(selectedKeys), [selectedKeys]);
+  const selectedSet = (0, import_react47.useMemo)(() => new Set(selectedKeys), [selectedKeys]);
   const setSelected = (next) => {
     if (!isSelectionControlled) {
       setUncontrolledSelected(next);
     }
     onSelectionChange?.(next);
   };
-  const [uncontrolledPage, setUncontrolledPage] = (0, import_react44.useState)(defaultPageIndex);
+  const [uncontrolledPage, setUncontrolledPage] = (0, import_react47.useState)(defaultPageIndex);
   const isPageControlled = pageIndexProp !== void 0;
   const rawPageIndex = isPageControlled ? pageIndexProp : uncontrolledPage;
   const setPage = (next) => {
@@ -8140,7 +8502,7 @@ function DataTable({
     }
     onPageChange?.(next);
   };
-  const sortedRows = (0, import_react44.useMemo)(() => {
+  const sortedRows = (0, import_react47.useMemo)(() => {
     if (!sort) return rows;
     const column = columns.find((col) => col.id === sort.columnId);
     if (!column?.sortable) return rows;
@@ -8159,13 +8521,13 @@ function DataTable({
   const paginated = typeof pageSize === "number" && pageSize > 0;
   const pageCount = paginated ? Math.max(1, Math.ceil(sortedRows.length / pageSize)) : 1;
   const pageIndex = Math.min(Math.max(0, rawPageIndex), pageCount - 1);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (!paginated || isPageControlled) return;
     if (uncontrolledPage > pageCount - 1) {
       setUncontrolledPage(pageCount - 1);
     }
   }, [paginated, isPageControlled, uncontrolledPage, pageCount]);
-  const visibleRows = (0, import_react44.useMemo)(() => {
+  const visibleRows = (0, import_react47.useMemo)(() => {
     if (!paginated) return sortedRows;
     const start = pageIndex * pageSize;
     return sortedRows.slice(start, start + pageSize);
@@ -8174,7 +8536,7 @@ function DataTable({
   const headPad = dense ? "px-3 py-2" : void 0;
   const colSpan = columns.length + (selectable ? 1 : 0);
   if (!loading && rows.length === 0 && emptyMode === "replace") {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(EmptyState, { title: emptyTitle, description: emptyDescription, className });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(EmptyState, { title: emptyTitle, description: emptyDescription, className });
   }
   const allKeys = sortedRows.map(getRowKey);
   const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedSet.has(k));
@@ -8199,10 +8561,10 @@ function DataTable({
   const hasPager = paginated && !loading && sortedRows.length > 0;
   const hasFoot = (showRowCount || footer || hasPager) && (loading || sortedRows.length > 0);
   const skeletonCount = loadingRows ?? pageSize ?? 5;
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("table", { className: tableClass, children: [
-    caption ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("caption", { className: "sr-only", children: caption }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("thead", { className: cn(stickyHeader && stickyHeadClass), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("tr", { children: [
-      selectable ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("th", { scope: "col", className: cn(selectCellClass, headPad), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("table", { className: tableClass, children: [
+    caption ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("caption", { className: "sr-only", children: caption }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("thead", { className: cn(stickyHeader && stickyHeadClass), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("tr", { children: [
+      selectable ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("th", { scope: "col", className: cn(selectCellClass, headPad), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         Checkbox,
         {
           checked: headerCheckedState,
@@ -8214,19 +8576,19 @@ function DataTable({
       columns.map((col) => {
         const isSorted = sort?.columnId === col.id;
         const ariaSort = col.sortable ? isSorted ? sort.direction === "asc" ? "ascending" : "descending" : "none" : void 0;
-        const headerContent = col.sortable ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+        const headerContent = col.sortable ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
           "button",
           {
             type: "button",
             className: sortButtonClass,
             onClick: () => setSort(nextSort(sort, col.id)),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "truncate", children: col.header }),
-              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
+              /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "truncate", children: col.header }),
+              /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
             ]
           }
         ) : col.header;
-        return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           "th",
           {
             scope: "col",
@@ -8243,9 +8605,9 @@ function DataTable({
         );
       })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: loading ? Array.from({ length: skeletonCount }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("tr", { className: rowClass, "aria-hidden": true, children: [
-      selectable ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("td", { className: cn(selectCellClass, cellPad), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Skeleton, { className: "size-4 rounded-[4px]" }) }) : null,
-      columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: loading ? Array.from({ length: skeletonCount }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("tr", { className: rowClass, "aria-hidden": true, children: [
+      selectable ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("td", { className: cn(selectCellClass, cellPad), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Skeleton, { className: "size-4 rounded-[4px]" }) }) : null,
+      columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         "td",
         {
           className: cn(
@@ -8254,17 +8616,17 @@ function DataTable({
             col.align && alignClass[col.align],
             col.className
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Skeleton, { className: "h-4 w-[60%]" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Skeleton, { className: "h-4 w-[60%]" })
         },
         col.id
       ))
-    ] }, `skeleton-${rowIdx}`)) : visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("td", { colSpan, className: emptyCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "font-medium text-foreground", children: emptyTitle }),
-      emptyDescription ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "max-w-sm text-muted-foreground", children: emptyDescription }) : null
+    ] }, `skeleton-${rowIdx}`)) : visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("td", { colSpan, className: emptyCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("p", { className: "font-medium text-foreground", children: emptyTitle }),
+      emptyDescription ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("p", { className: "max-w-sm text-muted-foreground", children: emptyDescription }) : null
     ] }) }) }) : visibleRows.map((row) => {
       const key = getRowKey(row);
       const isSelected = selectedSet.has(key);
-      return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
         "tr",
         {
           className: rowClass,
@@ -8280,12 +8642,12 @@ function DataTable({
           tabIndex: onRowClick ? 0 : void 0,
           role: onRowClick ? "button" : void 0,
           children: [
-            selectable ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+            selectable ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
               "td",
               {
                 className: cn(selectCellClass, cellPad),
                 onClick: (event) => event.stopPropagation(),
-                children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                   Checkbox,
                   {
                     checked: isSelected,
@@ -8295,16 +8657,17 @@ function DataTable({
                 )
               }
             ) : null,
-            columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+            columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
               "td",
               {
                 className: cn(
                   bodyCellClass,
                   cellPad,
+                  col.truncate && "max-w-0",
                   col.align && alignClass[col.align],
                   col.className
                 ),
-                children: col.cell(row)
+                children: col.truncate ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "truncate", children: col.cell(row) }) : col.cell(row)
               },
               col.id
             ))
@@ -8313,7 +8676,7 @@ function DataTable({
         key
       );
     }) }),
-    hasFoot ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("td", { colSpan, className: footCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+    hasFoot ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("td", { colSpan, className: footCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
       "div",
       {
         className: cn(
@@ -8321,18 +8684,18 @@ function DataTable({
           (showRowCount || footer || hasPager) && "justify-between"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: footInnerClass, children: [
-            showRowCount ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: footInnerClass, children: [
+            showRowCount ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("span", { children: [
               rowCountText,
               selectable && selectedSet.size > 0 ? ` \xB7 ${selectedSet.size} selected` : null
-            ] }) : selectable && selectedSet.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { children: [
+            ] }) : selectable && selectedSet.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("span", { children: [
               selectedSet.size,
               " selected"
             ] }) : null,
             footer
           ] }),
-          hasPager ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: "tabular-nums", children: [
+          hasPager ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("span", { className: "tabular-nums", children: [
               pageIndex * pageSize + 1,
               "\u2013",
               Math.min(
@@ -8343,8 +8706,8 @@ function DataTable({
               "of ",
               sortedRows.length
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                 "button",
                 {
                   type: "button",
@@ -8352,10 +8715,10 @@ function DataTable({
                   onClick: () => setPage(pageIndex - 1),
                   disabled: pageIndex <= 0,
                   "aria-label": "Previous page",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react14.ChevronLeftIcon, { className: "size-4", "aria-hidden": true })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react14.ChevronLeftIcon, { className: "size-4", "aria-hidden": true })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                 "button",
                 {
                   type: "button",
@@ -8363,7 +8726,7 @@ function DataTable({
                   onClick: () => setPage(pageIndex + 1),
                   disabled: pageIndex >= pageCount - 1,
                   "aria-label": "Next page",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react14.ChevronRightIcon, { className: "size-4", "aria-hidden": true })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react14.ChevronRightIcon, { className: "size-4", "aria-hidden": true })
                 }
               )
             ] })
@@ -8375,8 +8738,8 @@ function DataTable({
 }
 
 // src/app/data/ChartPanel.tsx
-var import_react45 = require("react");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_react48 = require("react");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var ChartPanel = ({
   title,
   description,
@@ -8387,17 +8750,17 @@ var ChartPanel = ({
   loading = false,
   className
 }) => {
-  const titleId = (0, import_react45.useId)();
+  const titleId = (0, import_react48.useId)();
   const resolvedTitle = title ?? artifact?.title;
   const hasHeader = Boolean(resolvedTitle || description || actions);
-  const body = loading ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Skeleton, { className: "w-full rounded-lg", style: { height }, "aria-hidden": true }) : children ?? (artifact ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ChartArtifactView, { artifact, embedded: true, height }) : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+  const body = loading ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Skeleton, { className: "w-full rounded-lg", style: { height }, "aria-hidden": true }) : children ?? (artifact ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ChartArtifactView, { artifact, embedded: true, height }) : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
     "section",
     {
       className: cn(metricCardShellClass, "aui-app-chart-panel", className),
       "aria-labelledby": resolvedTitle ? titleId : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           MetricCardHeader,
           {
             title: resolvedTitle,
@@ -8406,14 +8769,14 @@ var ChartPanel = ({
             actions
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           "div",
           {
             className: cn(
               "relative min-h-0 w-full",
               hasHeader ? metricChartPlotRegionClass : "pt-2 pb-3"
             ),
-            children: body ?? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            children: body ?? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
               "div",
               {
                 className: "flex items-center justify-center text-sm font-normal text-muted-foreground",
@@ -8430,8 +8793,8 @@ var ChartPanel = ({
 };
 
 // src/app/data/MetricRow.tsx
-var import_react46 = require("react");
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_react49 = require("react");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var MetricRow = ({
   title,
   description,
@@ -8444,9 +8807,9 @@ var MetricRow = ({
   loading = false,
   className
 }) => {
-  const titleId = (0, import_react46.useId)();
+  const titleId = (0, import_react49.useId)();
   const selectable = onMetricChange != null || activeMetricId != null;
-  const [internalId, setInternalId] = (0, import_react46.useState)(
+  const [internalId, setInternalId] = (0, import_react49.useState)(
     defaultActiveMetricId ?? metrics[0]?.id
   );
   const activeId = activeMetricId ?? internalId;
@@ -8454,13 +8817,13 @@ var MetricRow = ({
     if (activeMetricId == null) setInternalId(id);
     onMetricChange?.(id);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
           MetricCardHeader,
           {
             title,
@@ -8469,7 +8832,7 @@ var MetricRow = ({
             actions
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
           "div",
           {
             role: selectable ? "group" : void 0,
@@ -8480,18 +8843,18 @@ var MetricRow = ({
               metricTilesGridColsClass(loading ? metrics.length || 4 : metrics.length),
               (title || description || actions) && "mt-3"
             ),
-            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
               "div",
               {
                 className: "flex min-w-0 flex-1 flex-col gap-2 px-4 py-3",
                 "aria-hidden": true,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Skeleton, { className: "h-3 w-20" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Skeleton, { className: "h-7 w-24" })
+                  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Skeleton, { className: "h-3 w-20" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Skeleton, { className: "h-7 w-24" })
                 ]
               },
               `skeleton-${index}`
-            )) : metrics.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+            )) : metrics.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
               MetricTile,
               {
                 label: m.label,
@@ -8513,8 +8876,8 @@ var MetricRow = ({
 };
 
 // src/app/data/MetricChartCard.tsx
-var import_react47 = require("react");
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_react50 = require("react");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var MetricChartCard = ({
   title,
   description,
@@ -8533,8 +8896,8 @@ var MetricChartCard = ({
   loading = false,
   className
 }) => {
-  const titleId = (0, import_react47.useId)();
-  const [internalId, setInternalId] = (0, import_react47.useState)(
+  const titleId = (0, import_react50.useId)();
+  const [internalId, setInternalId] = (0, import_react50.useState)(
     defaultActiveMetricId ?? metrics[0]?.id
   );
   const activeId = activeMetricId ?? internalId;
@@ -8545,13 +8908,13 @@ var MetricChartCard = ({
   };
   const hasHeader = Boolean(title || description || actions);
   const chartAriaLabel = typeof active?.label === "string" ? `${active.label} over time` : "Metric chart";
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
           MetricCardHeader,
           {
             title,
@@ -8560,7 +8923,7 @@ var MetricChartCard = ({
             actions
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
           "div",
           {
             role: "group",
@@ -8571,18 +8934,18 @@ var MetricChartCard = ({
               metricTilesGridColsClass(loading ? metrics.length || 4 : metrics.length),
               hasHeader && "mt-3"
             ),
-            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
               "div",
               {
                 className: "flex min-w-0 flex-1 flex-col gap-2 px-4 py-3",
                 "aria-hidden": true,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Skeleton, { className: "h-3 w-20" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Skeleton, { className: "h-7 w-24" })
+                  /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Skeleton, { className: "h-3 w-20" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Skeleton, { className: "h-7 w-24" })
                 ]
               },
               `skeleton-${index}`
-            )) : metrics.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+            )) : metrics.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
               MetricTile,
               {
                 label: m.label,
@@ -8598,14 +8961,14 @@ var MetricChartCard = ({
             ))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
           Skeleton,
           {
             className: "w-full rounded-lg",
             style: { height },
             "aria-hidden": true
           }
-        ) : active?.data && active.data.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        ) : active?.data && active.data.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
           LineAreaChart,
           {
             data: active.data,
@@ -8625,7 +8988,7 @@ var MetricChartCard = ({
             ariaLabel: chartAriaLabel
           },
           active.id
-        ) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
           "div",
           {
             className: "flex w-full items-center justify-center text-sm font-normal text-muted-foreground",
@@ -8640,13 +9003,13 @@ var MetricChartCard = ({
 };
 
 // src/hooks/use-live-query.ts
-var import_react48 = require("react");
+var import_react51 = require("react");
 function useInterval(callback, delayMs) {
-  const saved = (0, import_react48.useRef)(callback);
-  (0, import_react48.useEffect)(() => {
+  const saved = (0, import_react51.useRef)(callback);
+  (0, import_react51.useEffect)(() => {
     saved.current = callback;
   }, [callback]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (delayMs === null) return;
     const id = setInterval(() => saved.current(), delayMs);
     return () => clearInterval(id);
@@ -8659,25 +9022,25 @@ function useLiveQuery(fetcher, options = {}) {
     immediate = true,
     refetchOnFocus = true
   } = options;
-  const [data, setData] = (0, import_react48.useState)(void 0);
-  const [error, setError] = (0, import_react48.useState)(void 0);
-  const [loading, setLoading] = (0, import_react48.useState)(enabled);
-  const [refreshing, setRefreshing] = (0, import_react48.useState)(false);
-  const [lastUpdated, setLastUpdated] = (0, import_react48.useState)(null);
-  const fetcherRef = (0, import_react48.useRef)(fetcher);
-  (0, import_react48.useEffect)(() => {
+  const [data, setData] = (0, import_react51.useState)(void 0);
+  const [error, setError] = (0, import_react51.useState)(void 0);
+  const [loading, setLoading] = (0, import_react51.useState)(enabled);
+  const [refreshing, setRefreshing] = (0, import_react51.useState)(false);
+  const [lastUpdated, setLastUpdated] = (0, import_react51.useState)(null);
+  const fetcherRef = (0, import_react51.useRef)(fetcher);
+  (0, import_react51.useEffect)(() => {
     fetcherRef.current = fetcher;
   }, [fetcher]);
-  const mounted = (0, import_react48.useRef)(true);
-  const requestId = (0, import_react48.useRef)(0);
-  const hasData = (0, import_react48.useRef)(false);
-  (0, import_react48.useEffect)(() => {
+  const mounted = (0, import_react51.useRef)(true);
+  const requestId = (0, import_react51.useRef)(0);
+  const hasData = (0, import_react51.useRef)(false);
+  (0, import_react51.useEffect)(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
     };
   }, []);
-  const run = (0, import_react48.useCallback)(() => {
+  const run = (0, import_react51.useCallback)(() => {
     const id = ++requestId.current;
     if (hasData.current) {
       setRefreshing(true);
@@ -8699,15 +9062,15 @@ function useLiveQuery(fetcher, options = {}) {
       setRefreshing(false);
     });
   }, []);
-  const refetch = (0, import_react48.useCallback)(() => {
+  const refetch = (0, import_react51.useCallback)(() => {
     if (!enabled) return;
     run();
   }, [enabled, run]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!enabled) return;
     if (immediate) run();
   }, [enabled, immediate, run]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!enabled || intervalMs === null) return;
     const tick = () => {
       if (refetchOnFocus && typeof document !== "undefined" && document.visibilityState === "hidden") {
@@ -8718,7 +9081,7 @@ function useLiveQuery(fetcher, options = {}) {
     const handle = setInterval(tick, intervalMs);
     return () => clearInterval(handle);
   }, [enabled, intervalMs, refetchOnFocus, run]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!enabled || !refetchOnFocus || typeof document === "undefined") return;
     const onVisible = () => {
       if (document.visibilityState === "visible") run();
@@ -8730,8 +9093,8 @@ function useLiveQuery(fetcher, options = {}) {
 }
 
 // src/charts/sparkline.tsx
-var import_react49 = require("react");
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_react52 = require("react");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var Sparkline = ({
   data,
   dataKey = "value",
@@ -8743,10 +9106,10 @@ var Sparkline = ({
   className,
   ariaLabel = "Trend"
 }) => {
-  const uid = (0, import_react49.useId)();
+  const uid = (0, import_react52.useId)();
   const values = data.map((d) => typeof d === "number" ? d : toNum(d[dataKey]));
   if (values.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: cn("inline-block", className), style: { width, height } });
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: cn("inline-block", className), style: { width, height } });
   }
   const pad = strokeWidth + 1;
   const min = Math.min(...values);
@@ -8758,7 +9121,7 @@ var Sparkline = ({
     x: pad + (values.length > 1 ? i / (values.length - 1) * innerW : innerW / 2),
     y: pad + innerH - (v - min) / range * innerH
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
     "svg",
     {
       width,
@@ -8769,14 +9132,14 @@ var Sparkline = ({
       "aria-label": ariaLabel,
       preserveAspectRatio: "none",
       children: [
-        area && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("linearGradient", { id: `${uid}-spark`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
-            /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
+        area && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("linearGradient", { id: `${uid}-spark`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           "path",
           {
             d: monotoneLinePath(points),
@@ -8793,7 +9156,7 @@ var Sparkline = ({
 };
 
 // src/chat/chat.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 function TimbalChat({
   workforceId,
   baseUrl,
@@ -8804,7 +9167,7 @@ function TimbalChat({
   debug,
   ...threadProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
     TimbalRuntimeProvider,
     {
       workforceId,
@@ -8814,7 +9177,7 @@ function TimbalChat({
       attachmentsUploadUrl,
       attachmentsAccept,
       debug,
-      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Thread, { ...threadProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Thread, { ...threadProps })
     }
   );
 }
@@ -8901,10 +9264,14 @@ function TimbalChat({
   connectionRowListClass,
   createTimbalTheme,
   ensureThemeFontLink,
+  flushBarCategoryGap,
+  flushLineAreaEdgeToEdge,
   formatLintReport,
   getStoredThemePreset,
   getThemePreset,
   lintGeneratedUi,
+  resolveChartMargin,
+  resolveTooltipCategory,
   reviewGeneratedUi,
   themeToCss,
   useAppCopilotContext,