@timbal-ai/timbal-react 0.7.1 → 0.8.1

package/dist/index.cjs

@@ -66,10 +66,27 @@ __export(index_exports, {
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
   DialogContent: () => DialogContent,
+  DialogDescription: () => DialogDescription,
+  DialogFooter: () => DialogFooter,
+  DialogHeader: () => DialogHeader,
   DialogOverlay: () => DialogOverlay,
   DialogPortal: () => DialogPortal,
   DialogTitle: () => DialogTitle,
   DialogTrigger: () => DialogTrigger,
+  DropdownMenu: () => DropdownMenu,
+  DropdownMenuCheckboxItem: () => DropdownMenuCheckboxItem,
+  DropdownMenuContent: () => DropdownMenuContent,
+  DropdownMenuGroup: () => DropdownMenuGroup,
+  DropdownMenuItem: () => DropdownMenuItem,
+  DropdownMenuLabel: () => DropdownMenuLabel,
+  DropdownMenuRadioGroup: () => DropdownMenuRadioGroup,
+  DropdownMenuRadioItem: () => DropdownMenuRadioItem,
+  DropdownMenuSeparator: () => DropdownMenuSeparator,
+  DropdownMenuShortcut: () => DropdownMenuShortcut,
+  DropdownMenuSub: () => DropdownMenuSub,
+  DropdownMenuSubContent: () => DropdownMenuSubContent,
+  DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
+  DropdownMenuTrigger: () => DropdownMenuTrigger,
   EmptyState: () => EmptyState,
   ExpandableSection: () => ExpandableSection,
   Field: () => Field,
@@ -99,11 +116,25 @@ __export(index_exports, {
   PageHeader: () => PageHeader,
   PillSegmentedTabs: () => PillSegmentedTabs,
   PlanBadge: () => PlanBadge,
+  Popover: () => Popover,
+  PopoverAnchor: () => PopoverAnchor,
+  PopoverContent: () => PopoverContent,
+  PopoverTrigger: () => PopoverTrigger,
   QuestionArtifactView: () => QuestionArtifactView,
   ResourceCard: () => ResourceCard,
   STUDIO_NAV_MODE: () => STUDIO_NAV_MODE,
   SearchInput: () => SearchInput,
   Section: () => Section,
+  Select: () => Select,
+  SelectContent: () => SelectContent,
+  SelectGroup: () => SelectGroup,
+  SelectItem: () => SelectItem,
+  SelectLabel: () => SelectLabel,
+  SelectScrollDownButton: () => SelectScrollDownButton,
+  SelectScrollUpButton: () => SelectScrollUpButton,
+  SelectSeparator: () => SelectSeparator,
+  SelectTrigger: () => SelectTrigger,
+  SelectValue: () => SelectValue,
   SessionProvider: () => SessionProvider,
   SettingsSection: () => SettingsSection,
   SettingsSectionHeader: () => SettingsSectionHeader,
@@ -118,8 +149,11 @@ __export(index_exports, {
   SubNav: () => SubNav,
   Suggestions: () => Suggestions,
   SurfaceCard: () => SurfaceCard,
+  THEME_AGENT_INSTRUCTIONS: () => THEME_AGENT_INSTRUCTIONS,
   THREAD_DEFAULT_MAX_WIDTH: () => THREAD_DEFAULT_MAX_WIDTH,
+  TIMBAL_THEME_PRESETS: () => TIMBAL_THEME_PRESETS,
   TableArtifactView: () => TableArtifactView,
+  ThemePresetGallery: () => ThemePresetGallery,
   Thread: () => Thread,
   ThreadPrimitive: () => import_react69.ThreadPrimitive,
   TimbalChat: () => TimbalChat,
@@ -127,6 +161,7 @@ __export(index_exports, {
   TimbalMark: () => TimbalMark,
   TimbalRuntimeProvider: () => TimbalRuntimeProvider,
   TimbalStudioShell: () => TimbalStudioShell,
+  TimbalThemeStyle: () => TimbalThemeStyle,
   ToolArtifactFallback: () => ToolArtifactFallback,
   ToolFallback: () => ToolFallback,
   Tooltip: () => Tooltip,
@@ -139,13 +174,17 @@ __export(index_exports, {
   UiEventProvider: () => UiEventProvider,
   UiNodeView: () => UiNodeView,
   WorkforceSelector: () => WorkforceSelector,
+  applyThemePreset: () => applyThemePreset,
+  applyTimbalTheme: () => applyTimbalTheme,
   assistantMessageContentClass: () => assistantMessageContentClass,
   assistantMessageRootClass: () => assistantMessageRootClass,
   authFetch: () => authFetch,
+  clearTimbalTheme: () => clearTimbalTheme,
   clearTokens: () => clearTokens,
   cn: () => cn,
   connectionRowListClass: () => connectionRowListClass,
   createDefaultAttachmentAdapter: () => createDefaultAttachmentAdapter,
+  createTimbalTheme: () => createTimbalTheme,
   createUploadAttachmentAdapter: () => createUploadAttachmentAdapter,
   defaultArtifactRenderers: () => defaultArtifactRenderers,
   fetchCurrentUser: () => fetchCurrentUser,
@@ -153,6 +192,8 @@ __export(index_exports, {
   getAccessToken: () => getAccessToken,
   getPath: () => getPath,
   getRefreshToken: () => getRefreshToken,
+  getStoredThemePreset: () => getStoredThemePreset,
+  getThemePreset: () => getThemePreset,
   isArtifact: () => isArtifact,
   isArtifactFenceLanguage: () => isArtifactFenceLanguage,
   isUiBinding: () => isUiBinding,
@@ -165,6 +206,7 @@ __export(index_exports, {
   setPath: () => setPath,
   setRefreshToken: () => setRefreshToken,
   splitMarkdownByArtifacts: () => splitMarkdownByArtifacts,
+  themeToCss: () => themeToCss,
   threadMessageColumnClass: () => threadMessageColumnClass,
   useAppCopilotContext: () => useAppCopilotContext,
   useAppShellChat: () => useAppShellChat,
@@ -1334,6 +1376,42 @@ function DialogTitle({
     }
   );
 }
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_radix_ui2.Dialog.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-1.5 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
 
 // src/ui/avatar.tsx
 var import_radix_ui3 = require("radix-ui");
@@ -4738,7 +4816,9 @@ var studioChromeShellStyle = {
 var STORAGE_KEYS = {
   sidebarCollapsed: "timbal-studio-sidebar-collapsed",
   /** Used by `ModeToggle` in uncontrolled mode (`localStorage`). */
-  theme: "timbal-theme"
+  theme: "timbal-theme",
+  /** Used by the theme preset picker to remember the selected brand preset. */
+  themePreset: "timbal-theme-preset"
 };
 var DOM_IDS = {
   sidebarRuntimeAnchor: "timbal-studio-sidebar-runtime-anchor",
@@ -6428,6 +6508,8 @@ Presentational groups \u2014 import from the package root, not from these paths:
 
 Also re-exported: \`Button\`, \`TimbalChat\`, \`ChartArtifactView\`, \`APP_KIT_AGENT_INSTRUCTIONS\`.
 
+Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\`, \`themeToCss\`, \`applyTimbalTheme\`, \`TIMBAL_THEME_PRESETS\`, \`applyThemePreset\`, \`ThemePresetGallery\`, \`TimbalThemeStyle\`, \`THEME_AGENT_INSTRUCTIONS\`.
+
 ### Design guidelines (required)
 
 | Area | Rule |
@@ -6435,7 +6517,7 @@ Also re-exported: \`Button\`, \`TimbalChat\`, \`ChartArtifactView\`, \`APP_KIT_A
 | **Copilot** | Use \`AppCopilotProvider\` for page context (\`useAppCopilotContext\`). Copilot is a **floating overlay** via \`AppShell\` \`chat={<AppChatPanel />}\` \u2014 not a sidebar column that shrinks main content. |
 | **Chat panel** | \`AppChatPanel\` only; \`Thread\` uses \`variant="panel"\` internally. Dismiss with **X**; trigger is a **text-only** pill (e.g. "Assistant") \u2014 **no** MessageSquare or chat icons on the shell trigger. |
 | **Context** | Do not show raw JSON context in the panel header; keep context in \`AppCopilotProvider\` only. |
-| **Theming** | Use semantic Tailwind tokens (\`bg-background\`, \`text-foreground\`, \`border-border\`, \`bg-elevated-from\`, etc.) from the host app's \`styles.css\`. Optional: \`import "@timbal-ai/timbal-react/styles.css"\`. |
+| **Theming** | Use semantic Tailwind tokens (\`bg-background\`, \`text-foreground\`, \`border-border\`, \`bg-elevated-from\`, etc.) from the host app's \`styles.css\`. To rebrand, **never hand-author OKLCH** \u2014 call \`createTimbalTheme({ brand })\` + \`themeToCss\`/\`applyTimbalTheme\`, or apply a catalog preset (\`TIMBAL_THEME_PRESETS\` / \`applyThemePreset\`). To offer styles, render \`ThemePresetGallery\`. See \`THEME_AGENT_INSTRUCTIONS\`. |
 | **Layout chrome** | \`Page\` \u2192 \`Section\` for main content hierarchy. \`AppShellTopbar\` for global actions (auth, theme). |
 | **Data** | Prefer \`DataTable\` with typed \`columns\` / \`rows\` / \`getRowKey\`; use \`ChartPanel\` with \`ChartArtifact\` for charts. |
 | **Modals** | Use \`AppConfirmDialog\` for destructive/export confirmations. |
@@ -6535,6 +6617,7 @@ Studio chrome (\`StudioSidebar\`, \`ModeToggle\`, \u2026) lives in \`@timbal-ai/
 | \`resource-gallery.tsx\` | \`ResourceCard\`, \`StatusDot\`, \`Sparkline\` |
 | \`charts-panel.tsx\` | \`ChartPanel\`, \`ChartArtifact\` |
 | \`copilot-overlay.tsx\` | \`AppShell\`, \`AppChatPanel\` |
+| \`theme-presets.tsx\` | \`ThemePresetGallery\`, \`applyTimbalTheme\` |
 
 ### Typical compositions
 
@@ -6580,139 +6663,814 @@ import {
 - For rich in-chat widgets, use **artifacts** (\`ARTIFACT_AGENT_INSTRUCTIONS\`) \u2014 app kit is for the **host application shell**.
 `.trim();
 
-// src/app/layout/AppShell.tsx
-var import_react55 = require("motion/react");
-var import_react56 = require("react");
+// src/design/oklch.ts
+var clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+var round2 = (n, digits) => {
+  const f = 10 ** digits;
+  return Math.round(n * f) / f;
+};
+function srgbToLinear(channel) {
+  const c = channel / 255;
+  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+function linearRgbToOklch(r, g, b, alpha) {
+  const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+  const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+  const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+  const l_ = Math.cbrt(l);
+  const m_ = Math.cbrt(m);
+  const s_ = Math.cbrt(s);
+  const labL = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+  const labA = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+  const labB = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+  const c = Math.sqrt(labA * labA + labB * labB);
+  let h = Math.atan2(labB, labA) * 180 / Math.PI;
+  if (h < 0) h += 360;
+  return { l: labL, c, h, alpha };
+}
+function oklchToLinearRgb(color) {
+  const hRad = color.h * Math.PI / 180;
+  const labA = color.c * Math.cos(hRad);
+  const labB = color.c * Math.sin(hRad);
+  const l_ = color.l + 0.3963377774 * labA + 0.2158037573 * labB;
+  const m_ = color.l - 0.1055613458 * labA - 0.0638541728 * labB;
+  const s_ = color.l - 0.0894841775 * labA - 1.291485548 * labB;
+  const l = l_ ** 3;
+  const m = m_ ** 3;
+  const s = s_ ** 3;
+  return {
+    r: 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    g: -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    b: -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  };
+}
+function parseHex(value) {
+  let hex = value.trim().replace(/^#/, "");
+  if (![3, 4, 6, 8].includes(hex.length)) return null;
+  if (hex.length === 3 || hex.length === 4) {
+    hex = hex.split("").map((ch) => ch + ch).join("");
+  }
+  const int = Number.parseInt(hex, 16);
+  if (Number.isNaN(int)) return null;
+  const hasAlpha = hex.length === 8;
+  const r = int >>> (hasAlpha ? 24 : 16) & 255;
+  const g = int >>> (hasAlpha ? 16 : 8) & 255;
+  const b = int >>> (hasAlpha ? 8 : 0) & 255;
+  const alpha = hasAlpha ? (int & 255) / 255 : 1;
+  return linearRgbToOklch(
+    srgbToLinear(r),
+    srgbToLinear(g),
+    srgbToLinear(b),
+    alpha
+  );
+}
+function parseRgb(value) {
+  const match = value.match(
+    /rgba?\(\s*([0-9.]+)[\s,]+([0-9.]+)[\s,]+([0-9.]+)(?:[\s,/]+([0-9.%]+))?\s*\)/i
+  );
+  if (!match) return null;
+  const r = Number.parseFloat(match[1]);
+  const g = Number.parseFloat(match[2]);
+  const b = Number.parseFloat(match[3]);
+  let alpha = 1;
+  if (match[4]) {
+    alpha = match[4].includes("%") ? Number.parseFloat(match[4]) / 100 : Number.parseFloat(match[4]);
+  }
+  if (![r, g, b].every(Number.isFinite)) return null;
+  return linearRgbToOklch(
+    srgbToLinear(r),
+    srgbToLinear(g),
+    srgbToLinear(b),
+    Number.isFinite(alpha) ? alpha : 1
+  );
+}
+function parseOklch(value) {
+  const match = value.match(
+    /oklch\(\s*([0-9.]+%?)\s+([0-9.]+%?)\s+([0-9.]+)(?:deg)?(?:\s*\/\s*([0-9.%]+))?\s*\)/i
+  );
+  if (!match) return null;
+  const l = match[1].includes("%") ? Number.parseFloat(match[1]) / 100 : Number.parseFloat(match[1]);
+  const c = match[2].includes("%") ? Number.parseFloat(match[2]) / 100 * 0.4 : Number.parseFloat(match[2]);
+  const h = Number.parseFloat(match[3]);
+  let alpha = 1;
+  if (match[4]) {
+    alpha = match[4].includes("%") ? Number.parseFloat(match[4]) / 100 : Number.parseFloat(match[4]);
+  }
+  if (![l, c, h].every(Number.isFinite)) return null;
+  return { l, c, h, alpha: Number.isFinite(alpha) ? alpha : 1 };
+}
+function parseColor(value) {
+  const parsed = parseOklch(value) ?? parseHex(value) ?? parseRgb(value);
+  if (!parsed) {
+    throw new Error(
+      `[@timbal-ai/timbal-react] Could not parse color "${value}". Use a hex (#1E40AF), rgb()/rgba(), or oklch() string.`
+    );
+  }
+  return parsed;
+}
+function lighten(color, delta) {
+  return { ...color, l: clamp(color.l + delta, 0, 1) };
+}
+function scaleChroma(color, factor) {
+  return { ...color, c: clamp(color.c * factor, 0, 0.4) };
+}
+function withAlpha(color, alpha) {
+  return { ...color, alpha: clamp(alpha, 0, 1) };
+}
+function oklchToString(color) {
+  const l = round2(clamp(color.l, 0, 1), 4);
+  const c = round2(clamp(color.c, 0, 0.4), 4);
+  const h = round2((color.h % 360 + 360) % 360, 2);
+  const a = clamp(color.alpha, 0, 1);
+  const base = `oklch(${l} ${c} ${h}`;
+  return a >= 1 ? `${base})` : `${base} / ${round2(a, 3)})`;
+}
+function readableForeground(bg, options) {
+  const threshold = options?.threshold ?? 0.62;
+  const lightText = options?.light ?? "oklch(0.985 0 0)";
+  const darkText = options?.dark ?? "oklch(0.205 0 0)";
+  return bg.l >= threshold ? darkText : lightText;
+}
+function relativeLuminance(color) {
+  const { r, g, b } = oklchToLinearRgb(color);
+  const lr = clamp(r, 0, 1);
+  const lg = clamp(g, 0, 1);
+  const lb = clamp(b, 0, 1);
+  return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;
+}
 
-// src/design/app-classes.ts
-var appPageColumnClass = "mx-auto w-full max-w-6xl px-4 md:px-6";
-var appShellTopbarInsetClass = "w-full px-4 md:px-6";
-var appShellInsetTopClass = "pt-4 md:pt-6";
-var appShellTopbarRowClass = cn(
-  studioTopbarPillHeightClass,
-  "flex w-full items-center justify-between gap-2"
-);
-var appShellTopbarStickyClass = cn(
-  "sticky top-0 z-20 shrink-0 bg-background pb-2",
-  appShellInsetTopClass
-);
-var appPageHeaderClass = cn(
-  "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
-  "pb-4 pt-2"
-);
-var appSectionClass = "flex flex-col gap-4 py-4";
-var appSectionTitleClass = "text-lg font-semibold text-foreground";
-var appSectionDescriptionClass = "text-sm text-muted-foreground";
-var appSurfaceCardClass = cn(
-  studioIntegrationCardClass,
-  "p-4 md:p-5"
-);
-var appStatTileClass = cn(
-  appSurfaceCardClass,
-  "flex flex-col gap-1 px-4 py-3 shadow-none"
-);
-var appStatValueClass = "text-2xl font-normal tracking-tight text-foreground tabular-nums";
-var appStatLabelClass = "text-xs font-normal text-muted-foreground";
-var appFilterBarClass = cn(
-  "flex flex-wrap items-center gap-2",
-  studioTopbarPillHeightClass
-);
-var appSearchInputClass = cn(studioSearchChromeClass, "text-sm");
-var appBreadcrumbsClass = "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground";
-var appBreadcrumbLinkClass = "transition-colors hover:text-foreground";
-var appFieldClass = "flex flex-col gap-1.5";
-var appFieldLabelClass = "text-sm font-medium text-foreground";
-var appFieldHintClass = "text-xs text-muted-foreground";
-var appInputClass = cn(
-  studioSecondaryChromeClass,
-  "h-10 w-full rounded-lg px-3 text-sm text-foreground outline-none",
-  "placeholder:text-muted-foreground/70",
-  "focus-visible:ring-2 focus-visible:ring-foreground/10"
-);
-var appEmptyStateClass = cn(
-  appSurfaceCardClass,
-  "flex flex-col items-center justify-center gap-2 py-12 text-center"
-);
-var appEmptyStateTitleClass = "text-base font-medium text-foreground";
-var appEmptyStateDescriptionClass = "max-w-sm text-sm text-muted-foreground";
-var appChartPanelClass = cn(appSurfaceCardClass, "flex flex-col gap-3");
+// src/design/theme.ts
+function primaryForMode(brand, mode) {
+  if (mode === "light") {
+    return { ...brand, l: Math.min(Math.max(brand.l, 0.42), 0.68) };
+  }
+  const lightened = lighten(brand, 0.06);
+  return {
+    ...lightened,
+    l: Math.min(Math.max(lightened.l, 0.5), 0.78),
+    c: Math.min(brand.c, 0.22)
+  };
+}
+function brandGradient(primary) {
+  return {
+    from: lighten(primary, 0.03),
+    to: lighten(primary, -0.02),
+    hoverFrom: lighten(primary, 0.06),
+    hoverTo: lighten(primary, 0.01),
+    activeFrom: lighten(primary, -0.02),
+    activeTo: lighten(primary, -0.06)
+  };
+}
+function neutralTints(brand) {
+  return {
+    lightHue: brand.h,
+    darkHue: brand.h,
+    lightChroma: 6e-3,
+    darkChroma: 8e-3
+  };
+}
+function createTimbalTheme(intent) {
+  const brand = parseColor(intent.brand);
+  const accent = intent.accent ? parseColor(intent.accent) : null;
+  const light = {};
+  const dark = {};
+  const root = {};
+  if (typeof intent.radius === "number") {
+    root["--radius"] = `${intent.radius}rem`;
+  }
+  const primaryLight = primaryForMode(brand, "light");
+  const primaryDark = primaryForMode(brand, "dark");
+  light["--primary"] = oklchToString(primaryLight);
+  light["--primary-foreground"] = readableForeground(primaryLight);
+  light["--ring"] = oklchToString(
+    scaleChroma({ ...primaryLight, l: 0.6 }, 0.7)
+  );
+  dark["--primary"] = oklchToString(primaryDark);
+  dark["--primary-foreground"] = readableForeground(primaryDark);
+  dark["--ring"] = oklchToString(scaleChroma({ ...primaryDark, l: 0.62 }, 0.6));
+  const gLight = brandGradient(primaryLight);
+  light["--primary-fill-from"] = oklchToString(gLight.from);
+  light["--primary-fill-to"] = oklchToString(gLight.to);
+  light["--primary-fill-hover-from"] = oklchToString(gLight.hoverFrom);
+  light["--primary-fill-hover-to"] = oklchToString(gLight.hoverTo);
+  light["--primary-fill-active-from"] = oklchToString(gLight.activeFrom);
+  light["--primary-fill-active-to"] = oklchToString(gLight.activeTo);
+  const gDark = brandGradient(primaryDark);
+  dark["--primary-fill-from"] = oklchToString(gDark.from);
+  dark["--primary-fill-to"] = oklchToString(gDark.to);
+  dark["--primary-fill-hover-from"] = oklchToString(gDark.hoverFrom);
+  dark["--primary-fill-hover-to"] = oklchToString(gDark.hoverTo);
+  dark["--primary-fill-active-from"] = oklchToString(gDark.activeFrom);
+  dark["--primary-fill-active-to"] = oklchToString(gDark.activeTo);
+  if (accent) {
+    const accentLight = { ...accent, l: Math.min(Math.max(accent.l, 0.9), 0.97) };
+    const accentDark = { ...accent, l: 0.25, c: Math.min(accent.c, 0.04) };
+    light["--accent"] = oklchToString(accentLight);
+    light["--accent-foreground"] = readableForeground(accentLight);
+    dark["--accent"] = oklchToString(accentDark);
+    dark["--accent-foreground"] = readableForeground(accentDark);
+  }
+  light["--playground-from"] = oklchToString(
+    withAlpha({ l: 0.91, c: 0.03, h: brand.h, alpha: 0.6 }, 0.6)
+  );
+  light["--playground-via"] = oklchToString(
+    withAlpha({ l: 0.965, c: 0.015, h: brand.h, alpha: 0.3 }, 0.3)
+  );
+  dark["--playground-from"] = oklchToString({
+    l: 0.27,
+    c: 0.03,
+    h: brand.h,
+    alpha: 1
+  });
+  dark["--playground-via"] = oklchToString({
+    l: 0.19,
+    c: 0.02,
+    h: brand.h,
+    alpha: 1
+  });
+  if (intent.tintNeutrals) {
+    const t = neutralTints(brand);
+    light["--secondary"] = oklchToString({
+      l: 0.975,
+      c: t.lightChroma,
+      h: t.lightHue,
+      alpha: 1
+    });
+    light["--muted"] = light["--secondary"];
+    light["--accent"] ?? (light["--accent"] = oklchToString({
+      l: 0.965,
+      c: t.lightChroma,
+      h: t.lightHue,
+      alpha: 1
+    }));
+    light["--border"] = oklchToString({
+      l: 0.91,
+      c: t.lightChroma,
+      h: t.lightHue,
+      alpha: 1
+    });
+    dark["--secondary"] = oklchToString({
+      l: 0.22,
+      c: t.darkChroma,
+      h: t.darkHue,
+      alpha: 1
+    });
+    dark["--muted"] = dark["--secondary"];
+    dark["--border"] = oklchToString({
+      l: 1,
+      c: 0,
+      h: 0,
+      alpha: 0.1
+    });
+  }
+  if (isDev2()) {
+    const lum = relativeLuminance(primaryLight);
+    const fgIsLight = light["--primary-foreground"].includes("0.985");
+    const fgLum = fgIsLight ? 1 : 0.05;
+    const ratio = (Math.max(lum, fgLum) + 0.05) / (Math.min(lum, fgLum) + 0.05);
+    if (ratio < 3.5) {
+      console.warn(
+        `[@timbal-ai/timbal-react] createTimbalTheme: brand "${intent.brand}" yields a low primary/foreground contrast (~${ratio.toFixed(2)}:1). Consider a darker or more saturated brand color for buttons/CTAs.`
+      );
+    }
+  }
+  return { light, dark, root };
+}
+function declarations(map, indent) {
+  return Object.entries(map).map(([name, value]) => `${indent}${name}: ${value};`).join("\n");
+}
+function themeToCss(theme, options = {}) {
+  const indent = options.indent ?? "  ";
+  const blocks = [];
+  const lightVars = { ...theme.root ?? {}, ...theme.light };
+  if (options.scope) {
+    const sel = `[data-timbal-theme="${options.scope}"]`;
+    if (Object.keys(lightVars).length) {
+      blocks.push(`${sel} {
+${declarations(lightVars, indent)}
+}`);
+    }
+    if (Object.keys(theme.dark).length) {
+      blocks.push(
+        `.dark ${sel}, ${sel}.dark {
+${declarations(theme.dark, indent)}
+}`
+      );
+    }
+  } else {
+    if (Object.keys(lightVars).length) {
+      blocks.push(`:root {
+${declarations(lightVars, indent)}
+}`);
+    }
+    if (Object.keys(theme.dark).length) {
+      blocks.push(`.dark {
+${declarations(theme.dark, indent)}
+}`);
+    }
+  }
+  return blocks.join("\n\n");
+}
+var RUNTIME_STYLE_ID = "timbal-theme-runtime";
+function applyTimbalTheme(theme) {
+  if (typeof document === "undefined") return () => {
+  };
+  let el = document.getElementById(RUNTIME_STYLE_ID);
+  if (!el) {
+    el = document.createElement("style");
+    el.id = RUNTIME_STYLE_ID;
+    el.setAttribute("data-timbal-theme-runtime", "");
+    document.head.appendChild(el);
+  }
+  el.textContent = themeToCss(theme);
+  return () => {
+    el?.parentNode?.removeChild(el);
+  };
+}
+function clearTimbalTheme() {
+  if (typeof document === "undefined") return;
+  document.getElementById(RUNTIME_STYLE_ID)?.remove();
+}
+function isDev2() {
+  if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") {
+    return false;
+  }
+  return true;
+}
 
-// src/app/layout/app-shell-chat-context.tsx
-var import_react54 = require("react");
-var AppShellChatContext = (0, import_react54.createContext)(null);
-var AppShellChatProvider = AppShellChatContext.Provider;
-function useAppShellChat() {
-  return (0, import_react54.useContext)(AppShellChatContext);
+// src/design/theme-presets.ts
+var EMPTY_TOKENS = { light: {}, dark: {}, root: {} };
+var TIMBAL_THEME_PRESETS = [
+  {
+    id: "platform",
+    label: "Platform",
+    description: "Shipped neutral monochrome \u2014 the Timbal Platform default. Calm, brand-agnostic.",
+    swatch: "oklch(0.205 0 0)",
+    tokens: EMPTY_TOKENS
+  },
+  {
+    id: "indigo",
+    label: "Indigo",
+    description: "Cool, trustworthy blue-violet \u2014 good for analytics & ops dashboards.",
+    swatch: "#4f46e5",
+    tokens: createTimbalTheme({ brand: "#4f46e5" })
+  },
+  {
+    id: "violet",
+    label: "Violet",
+    description: "Vivid purple \u2014 expressive, product/marketing-leaning surfaces.",
+    swatch: "#7c3aed",
+    tokens: createTimbalTheme({ brand: "#7c3aed" })
+  },
+  {
+    id: "forest",
+    label: "Forest",
+    description: "Grounded green \u2014 finance, sustainability, status-positive apps.",
+    swatch: "#16a34a",
+    tokens: createTimbalTheme({ brand: "#16a34a" })
+  },
+  {
+    id: "warm",
+    label: "Warm",
+    description: "Energetic orange \u2014 consumer, creative, high-engagement tools.",
+    swatch: "#ea580c",
+    tokens: createTimbalTheme({ brand: "#ea580c" })
+  },
+  {
+    id: "slate",
+    label: "Slate",
+    description: "Muted cool gray-blue with a subtle tint \u2014 understated enterprise.",
+    swatch: "#475569",
+    tokens: createTimbalTheme({ brand: "#475569", tintNeutrals: true })
+  }
+];
+var PRESET_BY_ID = new Map(
+  TIMBAL_THEME_PRESETS.map((preset) => [preset.id, preset])
+);
+function getThemePreset(id) {
+  return PRESET_BY_ID.get(id);
+}
+function applyThemePreset(id) {
+  const preset = PRESET_BY_ID.get(id);
+  if (!preset) return () => {
+  };
+  if (typeof window !== "undefined") {
+    try {
+      window.localStorage.setItem(STORAGE_KEYS.themePreset, id);
+    } catch {
+    }
+  }
+  return applyTimbalTheme(preset.tokens);
+}
+function getStoredThemePreset() {
+  if (typeof window === "undefined") return null;
+  try {
+    const value = window.localStorage.getItem(STORAGE_KEYS.themePreset);
+    return value && PRESET_BY_ID.has(value) ? value : null;
+  } catch {
+    return null;
+  }
 }
 
-// src/app/layout/AppShell.tsx
+// src/design/theme-instructions.ts
+var THEME_AGENT_INSTRUCTIONS = `
+## Theming (@timbal-ai/timbal-react)
+
+The package ships a complete light + dark token system (\`styles.css\`). Components are written against semantic Tailwind tokens (\`bg-background\`, \`text-primary\`, \`border-border\`, \`bg-elevated-from\`, \`bg-bubble-user\`, \u2026). To restyle, you change CSS variables \u2014 **never** hardcode colors in component code.
+
+### Golden rule
+
+**Never write \`oklch(...)\` / hex literals or hand-author paired \`:root\` + \`.dark\` blocks.** Express intent and let the package derive a complete, contrast-correct, paired palette.
+
+### Pick a brand color (rebrand)
+
+\`\`\`ts
+import { createTimbalTheme, themeToCss } from "@timbal-ai/timbal-react";
+
+const theme = createTimbalTheme({ brand: "#4f46e5" /* accent?, radius?, tintNeutrals? */ });
+// Build-time: write once into your app CSS (paired light + dark, guaranteed in sync):
+const css = themeToCss(theme);
+\`\`\`
+
+- For a real company, look up the actual brand hex first (brandfetch / "<company> brand color hex"), then pass it as \`brand\`.
+- \`createTimbalTheme\` derives \`--primary\`, its foreground, ring, the full button gradient, and a soft playground tint. You only supply intent.
+
+### Apply a theme
+
+- **Build-time / SSR:** \`themeToCss(theme)\` \u2192 paste the returned CSS into your \`index.css\` (after the \`@import "@timbal-ai/timbal-react/styles.css"\`). One block, both modes.
+- **Runtime / swappable:** \`applyTimbalTheme(theme)\` injects a managed \`<style>\` and returns a disposer. Works with the \`.dark\` toggle (next-themes / ModeToggle).
+- **Component:** render \`<TimbalThemeStyle theme={theme} />\` (or \`preset="indigo"\`) once near the app root.
+
+### Offer styles to the user ("show compatible styles, then apply")
+
+Use the closed preset catalog \u2014 do not invent options:
+
+\`\`\`ts
+import { TIMBAL_THEME_PRESETS, applyThemePreset } from "@timbal-ai/timbal-react";
+// TIMBAL_THEME_PRESETS: { id, label, description, swatch, tokens }[]
+\`\`\`
+
+| Preset id | Use when |
+|-----------|----------|
+| \`platform\` | Neutral monochrome default (no brand) |
+| \`indigo\` | Cool, trustworthy \u2014 analytics / ops dashboards |
+| \`violet\` | Expressive purple \u2014 product / marketing |
+| \`forest\` | Green \u2014 finance, sustainability, positive status |
+| \`warm\` | Orange \u2014 consumer / creative / high-engagement |
+| \`slate\` | Muted enterprise gray-blue (tinted neutrals) |
+
+- To present options visually, render \`<ThemePresetGallery value={id} onSelect={setId} />\` \u2014 each swatch previews real components (Button + metric tile) scoped via \`data-timbal-theme\`, so the live app doesn't change until the user picks.
+- On selection, call \`applyThemePreset(id)\` (persists to \`localStorage\` and restores on reload).
+
+### Rules
+
+- Generated pages use **semantic Tailwind tokens only** \u2014 never literal colors or per-element \`style={{ color }}\`.
+- Light/dark mode stays the \`.dark\` class (\`next-themes attribute="class"\` or \`ModeToggle\`). Presets are **brand**, not a second dark-mode system.
+- Override individual tokens only for one-offs the generator doesn't cover; if you must, set the variable in **both** \`:root\` and \`.dark\` (a dev-only warning fires otherwise).
+`.trim();
+
+// src/app/theme/TimbalThemeStyle.tsx
 var import_jsx_runtime49 = require("react/jsx-runtime");
-var floatingTriggerClass = cn(
-  "aui-app-shell-chat-trigger-fixed fixed z-50 rounded-full px-5 py-2.5 text-sm font-medium shadow-card-elevated",
-  "bg-primary text-primary-foreground transition-colors hover:bg-primary/90",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-  "bottom-6 right-6 max-sm:bottom-4 max-sm:right-4"
-);
-var floatingPanelClass = cn(
-  "aui-app-shell-chat-float fixed z-50 flex flex-col overflow-hidden rounded-2xl border border-border/60 shadow-card-elevated",
-  "bg-card/85 backdrop-blur-xl supports-backdrop-filter:bg-card/75",
-  // Mobile: stretch between insets (no fixed width — avoids a wide empty strip on the right)
-  "max-sm:inset-x-3 max-sm:top-3 max-sm:bottom-3 max-sm:w-auto",
-  "sm:top-6 sm:right-6 sm:bottom-6 sm:w-[var(--app-shell-chat-width)] sm:max-w-[calc(100vw-3rem)]"
-);
-var AppShellBody = ({
-  sidebar,
-  topbarContent,
-  mainClassName,
-  insetPaddingPx,
-  insetExpanded,
-  children
+var TimbalThemeStyle = ({
+  theme,
+  preset,
+  scope,
+  nonce
 }) => {
-  const reducedMotion = (0, import_react55.useReducedMotion)();
-  const layoutDirection = insetExpanded ? "expand" : "collapse";
-  const layoutTransition = studioSidebarWidthTransition(
-    !!reducedMotion,
-    layoutDirection
-  );
-  const insetPadding = sidebar ? insetPaddingPx : 0;
+  const tokens = theme ?? (preset ? getThemePreset(preset)?.tokens : void 0);
+  if (!tokens) return null;
+  const css = themeToCss(tokens, scope ? { scope } : void 0);
+  if (!css) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-    import_react55.motion.div,
+    "style",
     {
-      className: "aui-app-shell-body relative z-10 flex min-h-0 min-w-0 flex-1 flex-col",
-      initial: false,
-      animate: { paddingLeft: insetPadding },
-      transition: layoutTransition,
-      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-        "div",
-        {
-          className: cn(
-            "aui-app-shell-scroll flex min-h-0 flex-1 flex-col overflow-y-auto",
-            !topbarContent && appShellInsetTopClass
-          ),
-          children: [
-            topbarContent ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("header", { className: cn("aui-app-shell-topbar-region", appShellTopbarStickyClass), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: appShellTopbarInsetClass, children: topbarContent }) }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("main", { className: cn("aui-app-shell-main min-w-0 flex-1", mainClassName), children })
-          ]
-        }
-      )
+      "data-timbal-theme-style": scope ?? "root",
+      nonce,
+      dangerouslySetInnerHTML: { __html: css }
     }
   );
 };
-var AppShell = ({
-  sidebar,
-  topbar,
-  header,
-  children,
-  chat,
-  chatWidth = "24rem",
-  chatHeight,
-  chatOpen: chatOpenProp,
-  defaultChatOpen = false,
-  onChatOpenChange,
-  chatCollapsible = true,
-  chatTriggerLabel = "Assistant",
-  hideChatTrigger = false,
-  className,
+
+// src/app/data/metrics-shared.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var metricCardShellClass = cn(
+  studioIntegrationCardClass,
+  "aui-app-metric-card shadow-none",
+  "flex flex-col overflow-hidden"
+);
+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 metricCellDividerClass = "border-r border-border/40";
+var MetricCardHeader = ({
+  title,
+  titleId,
+  description,
+  actions
+}) => {
+  if (!title && !description && !actions) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("header", { className: metricCardHeaderClass, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "min-w-0", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }) : null,
+      description ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+    ] }),
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "shrink-0", children: actions }) : null
+  ] });
+};
+function metricTilesGridColsClass(n) {
+  switch (n) {
+    case 1:
+      return "grid-cols-1";
+    case 2:
+      return "grid-cols-2";
+    case 3:
+      return "grid-cols-3";
+    case 5:
+      return "grid-cols-2 sm:grid-cols-5";
+    case 6:
+      return "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6";
+    default:
+      return "grid-cols-2 md:grid-cols-4";
+  }
+}
+
+// src/app/data/MetricTile.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var trendToneClass = {
+  up: "border-border/80 bg-muted/40 text-muted-foreground",
+  down: "border-border/80 bg-muted/40 text-muted-foreground",
+  neutral: "border-border/80 bg-muted/30 text-muted-foreground"
+};
+var metricTileBaseClass = "relative flex min-w-0 flex-1 flex-col gap-1 px-4 py-3 text-left font-normal";
+var metricTileInteractiveClass = cn(
+  metricTileBaseClass,
+  "bg-transparent hover:bg-transparent active:bg-transparent",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/10"
+);
+var MetricTile = ({
+  label,
+  value,
+  unit,
+  trend,
+  trendTone = "neutral",
+  active = false,
+  showDivider = false,
+  onSelect,
+  ariaLabel,
+  className
+}) => {
+  const content = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+    active ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "absolute inset-x-0 bottom-0 h-0.5 bg-foreground dark:bg-white"
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-xs font-normal text-muted-foreground", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: "flex items-baseline gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-2xl font-normal tracking-tight text-foreground tabular-nums", children: value }),
+        unit ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-xs font-normal text-muted-foreground", children: unit }) : null
+      ] }),
+      trend ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        "span",
+        {
+          className: cn(
+            "rounded-full border px-1.5 py-0.5 text-xs font-normal",
+            trendToneClass[trendTone]
+          ),
+          children: trend
+        }
+      ) : null
+    ] })
+  ] });
+  const divider = showDivider ? metricCellDividerClass : void 0;
+  if (onSelect) {
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onSelect,
+        "aria-pressed": active,
+        "aria-label": ariaLabel,
+        className: cn(metricTileInteractiveClass, divider, className),
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cn(metricTileBaseClass, divider, className), children: content });
+};
+
+// src/app/theme/ThemePresetGallery.tsx
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var ThemePresetGallery = ({
+  value,
+  onSelect,
+  presets,
+  className
+}) => {
+  const items = presets ? TIMBAL_THEME_PRESETS.filter((p) => presets.includes(p.id)) : TIMBAL_THEME_PRESETS;
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": "Theme presets",
+      className: cn(
+        "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
+        className
+      ),
+      children: items.map((preset) => {
+        const selected = value === preset.id;
+        return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { "data-timbal-theme": preset.id, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TimbalThemeStyle, { preset: preset.id, scope: preset.id }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": selected,
+              "aria-label": `${preset.label} theme`,
+              onClick: () => onSelect?.(preset.id),
+              className: cn(
+                "group flex w-full flex-col gap-3 rounded-xl border bg-card p-3 text-left transition-colors",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                selected ? "border-primary ring-2 ring-primary/30" : "border-border hover:border-foreground/30"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        className: "size-4 shrink-0 rounded-full ring-1 ring-black/10",
+                        style: { background: preset.swatch }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-sm font-medium text-foreground", children: preset.label })
+                  ] }),
+                  selected ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-xs font-medium text-primary", children: "Selected" }) : null
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "text-xs leading-snug text-muted-foreground", children: preset.description }),
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col gap-2 rounded-lg border border-border bg-background p-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Button, { size: "xs", className: "pointer-events-none", children: "Primary" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "size-5 rounded-md bg-primary", "aria-hidden": true }),
+                    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "size-5 rounded-md bg-muted", "aria-hidden": true }),
+                    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                      "span",
+                      {
+                        className: "size-5 rounded-md border border-border bg-accent",
+                        "aria-hidden": true
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(MetricTile, { label: "Active users", value: "1,248", trend: "+8%" })
+                ] })
+              ]
+            }
+          )
+        ] }, preset.id);
+      })
+    }
+  );
+};
+
+// src/app/layout/AppShell.tsx
+var import_react55 = require("motion/react");
+var import_react56 = require("react");
+
+// src/design/app-classes.ts
+var appPageColumnClass = "mx-auto w-full max-w-6xl px-4 md:px-6";
+var appShellTopbarInsetClass = "w-full px-4 md:px-6";
+var appShellInsetTopClass = "pt-4 md:pt-6";
+var appShellTopbarRowClass = cn(
+  studioTopbarPillHeightClass,
+  "flex w-full items-center justify-between gap-2"
+);
+var appShellTopbarStickyClass = cn(
+  "sticky top-0 z-20 shrink-0 bg-background pb-2",
+  appShellInsetTopClass
+);
+var appPageHeaderClass = cn(
+  "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+  "pb-4 pt-2"
+);
+var appSectionClass = "flex flex-col gap-4 py-4";
+var appSectionTitleClass = "text-lg font-semibold text-foreground";
+var appSectionDescriptionClass = "text-sm text-muted-foreground";
+var appSurfaceCardClass = cn(
+  studioIntegrationCardClass,
+  "p-4 md:p-5"
+);
+var appStatTileClass = cn(
+  appSurfaceCardClass,
+  "flex flex-col gap-1 px-4 py-3 shadow-none"
+);
+var appStatValueClass = "text-2xl font-normal tracking-tight text-foreground tabular-nums";
+var appStatLabelClass = "text-xs font-normal text-muted-foreground";
+var appFilterBarClass = cn(
+  "flex flex-wrap items-center gap-2",
+  studioTopbarPillHeightClass
+);
+var appSearchInputClass = cn(studioSearchChromeClass, "text-sm");
+var appBreadcrumbsClass = "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground";
+var appBreadcrumbLinkClass = "transition-colors hover:text-foreground";
+var appFieldClass = "flex flex-col gap-1.5";
+var appFieldLabelClass = "text-sm font-medium text-foreground";
+var appFieldHintClass = "text-xs text-muted-foreground";
+var appInputClass = cn(
+  studioSecondaryChromeClass,
+  "h-10 w-full rounded-lg px-3 text-sm text-foreground outline-none",
+  "placeholder:text-muted-foreground/70",
+  "focus-visible:ring-2 focus-visible:ring-foreground/10"
+);
+var appEmptyStateClass = cn(
+  appSurfaceCardClass,
+  "flex flex-col items-center justify-center gap-2 py-12 text-center"
+);
+var appEmptyStateTitleClass = "text-base font-medium text-foreground";
+var appEmptyStateDescriptionClass = "max-w-sm text-sm text-muted-foreground";
+var appChartPanelClass = cn(appSurfaceCardClass, "flex flex-col gap-3");
+
+// src/app/layout/app-shell-chat-context.tsx
+var import_react54 = require("react");
+var AppShellChatContext = (0, import_react54.createContext)(null);
+var AppShellChatProvider = AppShellChatContext.Provider;
+function useAppShellChat() {
+  return (0, import_react54.useContext)(AppShellChatContext);
+}
+
+// src/app/layout/AppShell.tsx
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var floatingTriggerClass = cn(
+  "aui-app-shell-chat-trigger-fixed fixed z-50 rounded-full px-5 py-2.5 text-sm font-medium shadow-card-elevated",
+  "bg-primary text-primary-foreground transition-colors hover:bg-primary/90",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  "bottom-6 right-6 max-sm:bottom-4 max-sm:right-4"
+);
+var floatingPanelClass = cn(
+  "aui-app-shell-chat-float fixed z-50 flex flex-col overflow-hidden rounded-2xl border border-border/60 shadow-card-elevated",
+  "bg-card/85 backdrop-blur-xl supports-backdrop-filter:bg-card/75",
+  // Mobile: stretch between insets (no fixed width — avoids a wide empty strip on the right)
+  "max-sm:inset-x-3 max-sm:top-3 max-sm:bottom-3 max-sm:w-auto",
+  "sm:top-6 sm:right-6 sm:bottom-6 sm:w-[var(--app-shell-chat-width)] sm:max-w-[calc(100vw-3rem)]"
+);
+var AppShellBody = ({
+  sidebar,
+  topbarContent,
+  mainClassName,
+  insetPaddingPx,
+  insetExpanded,
+  children
+}) => {
+  const reducedMotion = (0, import_react55.useReducedMotion)();
+  const layoutDirection = insetExpanded ? "expand" : "collapse";
+  const layoutTransition = studioSidebarWidthTransition(
+    !!reducedMotion,
+    layoutDirection
+  );
+  const insetPadding = sidebar ? insetPaddingPx : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    import_react55.motion.div,
+    {
+      className: "aui-app-shell-body relative z-10 flex min-h-0 min-w-0 flex-1 flex-col",
+      initial: false,
+      animate: { paddingLeft: insetPadding },
+      transition: layoutTransition,
+      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+        "div",
+        {
+          className: cn(
+            "aui-app-shell-scroll flex min-h-0 flex-1 flex-col overflow-y-auto",
+            !topbarContent && appShellInsetTopClass
+          ),
+          children: [
+            topbarContent ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("header", { className: cn("aui-app-shell-topbar-region", appShellTopbarStickyClass), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: appShellTopbarInsetClass, children: topbarContent }) }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("main", { className: cn("aui-app-shell-main min-w-0 flex-1", mainClassName), children })
+          ]
+        }
+      )
+    }
+  );
+};
+var AppShell = ({
+  sidebar,
+  topbar,
+  header,
+  children,
+  chat,
+  chatWidth = "24rem",
+  chatHeight,
+  chatOpen: chatOpenProp,
+  defaultChatOpen = false,
+  onChatOpenChange,
+  chatCollapsible = true,
+  chatTriggerLabel = "Assistant",
+  hideChatTrigger = false,
+  className,
   mainClassName
 }) => {
   const topbarContent = topbar ?? header;
@@ -6739,7 +7497,7 @@ var AppShell = ({
     setInsetPaddingPx(insetPx);
   }, []);
   const insetExpanded = insetPaddingPx >= SIDEBAR_INSET_PX_EXPANDED;
-  const shellBody = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  const shellBody = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     AppShellBody,
     {
       sidebar,
@@ -6750,7 +7508,7 @@ var AppShell = ({
       children
     }
   );
-  const tree = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ShellInsetProvider, { value: sidebar ? reportShellInset : null, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  const tree = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ShellInsetProvider, { value: sidebar ? reportShellInset : null, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "div",
     {
       className: cn(
@@ -6761,7 +7519,7 @@ var AppShell = ({
       children: [
         sidebar,
         shellBody,
-        hasChat && chatOpen ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        hasChat && chatOpen ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "div",
           {
             className: floatingPanelClass,
@@ -6774,7 +7532,7 @@ var AppShell = ({
             children: chat
           }
         ) : null,
-        hasChat && chatCollapsible && !chatOpen && !hideChatTrigger ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        hasChat && chatCollapsible && !chatOpen && !hideChatTrigger ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "button",
           {
             type: "button",
@@ -6790,7 +7548,7 @@ var AppShell = ({
   if (!hasChat) {
     return tree;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     AppShellChatProvider,
     {
       value: {
@@ -6805,24 +7563,24 @@ var AppShell = ({
 };
 
 // src/app/layout/AppShellTopbar.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var AppShellTopbar = ({
   start,
   actions,
   children,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cn("aui-app-shell-topbar", appShellTopbarRowClass, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cn("aui-app-shell-topbar", appShellTopbarRowClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
       start,
       children
     ] }),
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "aui-app-shell-topbar-actions flex shrink-0 items-center gap-2", children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "aui-app-shell-topbar-actions flex shrink-0 items-center gap-2", children: actions }) : null
   ] });
 };
 
 // src/app/layout/AppShellChatTrigger.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var floatingPositionClass = "fixed bottom-6 right-6 z-50 max-sm:bottom-4 max-sm:right-4";
 var AppShellChatTrigger = ({
   className,
@@ -6831,7 +7589,7 @@ var AppShellChatTrigger = ({
 }) => {
   const shellChat = useAppShellChat();
   if (!shellChat || shellChat.open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     TimbalV2Button,
     {
       type: "button",
@@ -6851,61 +7609,61 @@ var AppShellChatTrigger = ({
 };
 
 // src/app/layout/PageHeader.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var PageHeader = ({
   title,
   description,
   actions,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("header", { className: cn("aui-app-page-header", appPageHeaderClass, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("header", { className: cn("aui-app-page-header", appPageHeaderClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
     ] }),
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "aui-app-page-header-actions flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "aui-app-page-header-actions flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
   ] });
 };
 
 // src/app/layout/Page.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var Page = ({
   children,
   breadcrumbs,
   className,
   ...headerProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("aui-app-page", appPageColumnClass, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn("aui-app-page", appPageColumnClass, className), children: [
     breadcrumbs,
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PageHeader, { ...headerProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(PageHeader, { ...headerProps }),
     children
   ] });
 };
 
 // src/app/layout/Section.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var Section = ({
   title,
   description,
   children,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("section", { className: cn("aui-app-section", appSectionClass, className), children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h2", { className: appSectionTitleClass, children: title }) : null,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: appSectionDescriptionClass, children: description }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("section", { className: cn("aui-app-section", appSectionClass, className), children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h2", { className: appSectionTitleClass, children: title }) : null,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: appSectionDescriptionClass, children: description }) : null,
     children
   ] });
 };
 
 // src/app/copilot/app-copilot-context.tsx
 var import_react57 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var AppCopilotContext = (0, import_react57.createContext)(null);
 var AppCopilotProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(AppCopilotContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(AppCopilotContext.Provider, { value, children });
 };
 function useAppCopilotContext() {
   return (0, import_react57.useContext)(AppCopilotContext) ?? {};
@@ -6913,7 +7671,7 @@ function useAppCopilotContext() {
 
 // src/app/chat/AppChatPanel.tsx
 var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime60 = 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"
@@ -6958,18 +7716,18 @@ var AppChatPanel = ({
   ...rest
 }) => {
   const shellChat = useAppShellChat();
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: cn(shellClass, className), children: [
-    shellChat?.collapsible ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: chromeClass, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: cn(shellClass, className), children: [
+    shellChat?.collapsible ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: chromeClass, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       "button",
       {
         type: "button",
         className: closeButtonClass,
         onClick: () => shellChat.setOpen(false),
         "aria-label": "Close assistant",
-        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react15.XIcon, { className: "size-4", "aria-hidden": true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react15.XIcon, { className: "size-4", "aria-hidden": true })
       }
     ) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: bodyClass, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: bodyClass, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       TimbalRuntimeProvider,
       {
         workforceId,
@@ -6979,7 +7737,7 @@ var AppChatPanel = ({
         attachmentsUploadUrl,
         attachmentsAccept,
         debug,
-        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           Thread,
           {
             variant: "panel",
@@ -7000,38 +7758,38 @@ var AppChatPanel = ({
 };
 
 // src/app/surfaces/SurfaceCard.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var SurfaceCard = ({ children, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: cn("aui-app-surface-card", appSurfaceCardClass, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: cn("aui-app-surface-card", appSurfaceCardClass, className), children });
 };
 
 // src/app/surfaces/StatTile.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var StatTile = ({ label, value, hint, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: cn("aui-app-stat-tile", appStatTileClass, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: appStatLabelClass, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: appStatValueClass, children: value }),
-    hint ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-xs text-muted-foreground", children: hint }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cn("aui-app-stat-tile", appStatTileClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: appStatLabelClass, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: appStatValueClass, children: value }),
+    hint ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-xs text-muted-foreground", children: hint }) : null
   ] });
 };
 
 // src/app/surfaces/EmptyState.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var EmptyState = ({
   title,
   description,
   action,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cn("aui-app-empty-state", appEmptyStateClass, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: appEmptyStateTitleClass, children: title }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: appEmptyStateDescriptionClass, children: description }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cn("aui-app-empty-state", appEmptyStateClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: appEmptyStateTitleClass, children: title }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: appEmptyStateDescriptionClass, children: description }) : null,
     action
   ] });
 };
 
 // src/app/surfaces/StatusBadge.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var statusBadgeToneClass = {
   default: "bg-muted text-foreground",
   primary: "bg-primary/10 text-primary",
@@ -7044,7 +7802,7 @@ var StatusBadge = ({
   tone = "default",
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "span",
     {
       className: cn(
@@ -7058,7 +7816,7 @@ var StatusBadge = ({
 };
 
 // src/app/surfaces/AppConfirmDialog.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime65 = 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";
@@ -7073,15 +7831,15 @@ var AppConfirmDialog = ({
   destructive = false,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     DialogContent,
     {
       className: cn("gap-0 p-0 sm:max-w-md", className),
-      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: bodyClass2, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DialogTitle, { className: titleClass, children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-sm text-muted-foreground", children: description }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: actionsClass, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: bodyClass2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DialogTitle, { className: titleClass, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "text-sm text-muted-foreground", children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: actionsClass, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
             TimbalV2Button,
             {
               type: "button",
@@ -7091,7 +7849,7 @@ var AppConfirmDialog = ({
               children: cancelLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
             TimbalV2Button,
             {
               type: "button",
@@ -7111,7 +7869,7 @@ var AppConfirmDialog = ({
 };
 
 // src/app/surfaces/InfoCard.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var toneClass = {
   neutral: "border-border bg-muted/40",
   info: "border-primary/25 bg-primary/5",
@@ -7126,7 +7884,7 @@ var InfoCard = ({
   action,
   tone = "neutral",
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
   "div",
   {
     className: cn(
@@ -7135,18 +7893,18 @@ var InfoCard = ({
       className
     ),
     children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: icon }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "min-w-0 flex-1", children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "text-sm font-medium text-foreground", children: title }) : null,
-        children ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: cn("text-sm text-muted-foreground", title && "mt-1"), children }) : null
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: icon }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "min-w-0 flex-1", children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "text-sm font-medium text-foreground", children: title }) : null,
+        children ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: cn("text-sm text-muted-foreground", title && "mt-1"), children }) : null
       ] }),
-      action ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "shrink-0", children: action }) : null
+      action ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "shrink-0", children: action }) : null
     ]
   }
 );
 
 // src/app/surfaces/StatusDot.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var dotClass = {
   online: "bg-emerald-500",
   busy: "bg-amber-500",
@@ -7159,9 +7917,9 @@ var StatusDot = ({
   label,
   pulse = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: cn("inline-flex items-center gap-1.5", className), children: [
-  /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "relative flex size-2", children: [
-    pulse ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("span", { className: cn("inline-flex items-center gap-1.5", className), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("span", { className: "relative flex size-2", children: [
+    pulse ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       "span",
       {
         className: cn(
@@ -7170,25 +7928,25 @@ var StatusDot = ({
         )
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[tone]) })
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[tone]) })
   ] }),
-  label ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-xs text-muted-foreground", children: label }) : null
+  label ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-xs text-muted-foreground", children: label }) : null
 ] });
 
 // src/app/surfaces/DescriptionList.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var DescriptionList = ({
   items,
   stacked = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime68.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_runtime64.jsxs)(
+    children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       "div",
       {
         className: cn(
@@ -7196,8 +7954,8 @@ var DescriptionList = ({
           stacked ? "flex flex-col gap-0.5" : "flex items-center justify-between gap-4"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("dt", { className: "text-sm text-muted-foreground", children: item.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("dt", { className: "text-sm text-muted-foreground", children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             "dd",
             {
               className: cn(
@@ -7217,8 +7975,8 @@ var DescriptionList = ({
 // src/app/surfaces/ExpandableSection.tsx
 var import_react58 = require("react");
 var import_react59 = require("motion/react");
-var import_jsx_runtime65 = require("react/jsx-runtime");
-var Chevron = ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var Chevron = ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -7232,7 +7990,7 @@ var Chevron = ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": true,
-    children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "m6 9 6 6 6-6" })
   }
 );
 var ExpandableSection = ({
@@ -7253,8 +8011,8 @@ var ExpandableSection = ({
     if (openProp == null) setInternalOpen((o) => !o);
     onOpenChange?.(!open);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: cn("border-b border-border last:border-0", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: cn("border-b border-border last:border-0", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
       "button",
       {
         type: "button",
@@ -7263,16 +8021,16 @@ 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_runtime65.jsxs)("span", { className: "flex min-w-0 items-center gap-3", children: [
-            icon ? /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65.jsx)("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
-            count != null ? /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime69.jsxs)("span", { className: "flex min-w-0 items-center gap-3", children: [
+            icon ? /* @__PURE__ */ (0, import_jsx_runtime69.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_runtime69.jsx)("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
+            count != null ? /* @__PURE__ */ (0, import_jsx_runtime69.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_runtime65.jsx)(Chevron, { open })
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Chevron, { open })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react59.AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react59.AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       import_react59.motion.div,
       {
         id: panelId,
@@ -7281,7 +8039,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_runtime65.jsx)("div", { className: "bg-muted/20", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "bg-muted/20", children })
       },
       "body"
     ) : null })
@@ -7289,7 +8047,7 @@ var ExpandableSection = ({
 };
 
 // src/app/surfaces/ResourceCard.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime70 = 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
@@ -7314,35 +8072,35 @@ var ResourceCard = ({
   ariaLabel,
   className
 }) => {
-  const body = /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-start gap-3", children: [
-      media ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: mediaShellClass, children: media }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "min-w-0 flex-1 pt-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "truncate text-sm font-normal leading-snug text-foreground", children: title }),
-        subtitle ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "mt-1 line-clamp-2 text-xs font-normal text-muted-foreground", children: subtitle }) : null
+  const body = /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex items-start gap-3", children: [
+      media ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: mediaShellClass, children: media }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "min-w-0 flex-1 pt-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "truncate text-sm font-normal leading-snug text-foreground", children: title }),
+        subtitle ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "mt-1 line-clamp-2 text-xs font-normal text-muted-foreground", children: subtitle }) : null
       ] }),
-      badge ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "shrink-0 pt-0.5", children: badge }) : null
+      badge ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "shrink-0 pt-0.5", children: badge }) : null
     ] }),
-    footer || action ? /* @__PURE__ */ (0, import_jsx_runtime66.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_runtime66.jsx)("span", { className: "min-w-0 truncate", children: footer }),
-      action ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "shrink-0 opacity-80", children: action }) : null
+    footer || action ? /* @__PURE__ */ (0, import_jsx_runtime70.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_runtime70.jsx)("span", { className: "min-w-0 truncate", children: footer }),
+      action ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "shrink-0 opacity-80", children: action }) : null
     ] }) : null
   ] });
   if (onClick) {
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", onClick, "aria-label": ariaLabel, className: cn(resourceCardInteractiveClass, className), children: body });
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { type: "button", onClick, "aria-label": ariaLabel, className: cn(resourceCardInteractiveClass, className), children: body });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("article", { className: cn(resourceCardShellClass, className), children: body });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("article", { className: cn(resourceCardShellClass, className), children: body });
 };
 
 // src/app/settings/SettingsSection.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var SettingsSectionHeader = ({
   title,
   description,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: cn("flex flex-col", className), children: [
-  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h3", { className: "text-[17px] font-medium leading-tight text-foreground", children: title }),
-  description ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+}) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: cn("flex flex-col", className), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("h3", { className: "text-[17px] font-medium leading-tight text-foreground", children: title }),
+  description ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
 ] });
 var SettingsSection = ({
   title,
@@ -7351,7 +8109,7 @@ var SettingsSection = ({
   children,
   noBorderTop = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
   "section",
   {
     className: cn(
@@ -7360,18 +8118,18 @@ var SettingsSection = ({
       className
     ),
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h2", { className: "text-sm font-medium text-foreground", children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null,
-        descriptionFooter ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "mt-3 min-w-0", children: descriptionFooter }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("h2", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null,
+        descriptionFooter ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mt-3 min-w-0", children: descriptionFooter }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "min-w-0 space-y-3", children })
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "min-w-0 space-y-3", children })
     ]
   }
 );
 
 // src/app/settings/FieldRow.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var FieldRow = ({
   label,
   children,
@@ -7381,7 +8139,7 @@ var FieldRow = ({
   className
 }) => {
   if (inline) {
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
       "div",
       {
         className: cn(
@@ -7389,8 +8147,8 @@ var FieldRow = ({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
               "label",
               {
                 htmlFor,
@@ -7398,17 +8156,17 @@ var FieldRow = ({
                 children: label
               }
             ),
-            description ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
+            description ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "shrink-0", children })
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "shrink-0", children })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cn("flex flex-col gap-1.5", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("label", { htmlFor, className: "text-sm font-medium text-foreground", children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("label", { htmlFor, className: "text-sm font-medium text-foreground", children: label }),
     children,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "text-xs text-muted-foreground", children: description }) : null
+    description ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: "text-xs text-muted-foreground", children: description }) : null
   ] });
 };
 
@@ -7416,7 +8174,7 @@ var FieldRow = ({
 var import_react60 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_react61 = require("motion/react");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var FloatingUnsavedChangesBar = ({
   visible,
   message = "Unsaved changes",
@@ -7434,7 +8192,7 @@ var FloatingUnsavedChangesBar = ({
   (0, import_react60.useEffect)(() => setMounted(true), []);
   if (!mounted || typeof document === "undefined") return null;
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react61.AnimatePresence, { children: visible ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center px-4", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_react61.AnimatePresence, { children: visible ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center px-4", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
       import_react61.motion.div,
       {
         role: "region",
@@ -7448,10 +8206,10 @@ var FloatingUnsavedChangesBar = ({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-sm text-muted-foreground", children: message }),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Button, { variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSaving, children: discardLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Button, { size: "sm", onClick: onSave, disabled: saveDisabled || isSaving, children: isSaving ? "Saving\u2026" : saveLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "text-sm text-muted-foreground", children: message }),
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Button, { variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSaving, children: discardLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Button, { size: "sm", onClick: onSave, disabled: saveDisabled || isSaving, children: isSaving ? "Saving\u2026" : saveLabel })
           ] })
         ]
       }
@@ -7461,13 +8219,13 @@ var FloatingUnsavedChangesBar = ({
 };
 
 // src/app/settings/DangerZone.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var DangerZoneAction = ({
   title,
   description,
   action,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
   "div",
   {
     className: cn(
@@ -7475,11 +8233,11 @@ var DangerZoneAction = ({
       className
     ),
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "text-sm font-medium text-foreground", children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "shrink-0", children: action })
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "shrink-0", children: action })
     ]
   }
 );
@@ -7488,7 +8246,7 @@ var DangerZone = ({
   description,
   children,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
   "section",
   {
     className: cn(
@@ -7496,18 +8254,18 @@ var DangerZone = ({
       className
     ),
     children: [
-      (title || description) && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("header", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-3", children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("h3", { className: "text-sm font-semibold text-destructive", children: title }) : null,
-        description ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+      (title || description) && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("header", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-3", children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h3", { className: "text-sm font-semibold text-destructive", children: title }) : null,
+        description ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "divide-y divide-border bg-card", children })
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "divide-y divide-border bg-card", children })
     ]
   }
 );
 
 // src/app/integrations/IntegrationCard.tsx
 var import_react62 = require("react");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime75 = 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,
@@ -7548,12 +8306,12 @@ var IntegrationCard = ({
   const titleId = (0, import_react62.useId)();
   const locked = status === "locked";
   const dimmed = status === "disabled" || locked;
-  const body = /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex h-full min-h-0 flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex shrink-0 items-start gap-3 pr-2", children: [
-      logo ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: logoShellClass, "aria-hidden": Boolean(ariaLabel), children: logo }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "min-w-0 flex-1 pt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  const body = /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex shrink-0 items-start gap-3 pr-2", children: [
+      logo ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: logoShellClass, "aria-hidden": Boolean(ariaLabel), children: logo }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "min-w-0 flex-1 pt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             "h4",
             {
               id: onClick && !action ? void 0 : titleId,
@@ -7561,12 +8319,12 @@ var IntegrationCard = ({
               children: name
             }
           ),
-          statusLabel[status] ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "mt-0.5 text-xs text-muted-foreground", children: statusLabel[status] }) : null
+          statusLabel[status] ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("p", { className: "mt-0.5 text-xs text-muted-foreground", children: statusLabel[status] }) : null
         ] }),
-        badge ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "shrink-0", children: badge }) : null
+        badge ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "shrink-0", children: badge }) : null
       ] }) })
     ] }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    description ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       "p",
       {
         className: cn(
@@ -7576,9 +8334,9 @@ var IntegrationCard = ({
         children: description
       }
     ) : null,
-    action ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "min-h-0 flex-1", "aria-hidden": true }),
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "relative mt-3 shrink-0", children: action })
+    action ? /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "min-h-0 flex-1", "aria-hidden": true }),
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "relative mt-3 shrink-0", children: action })
     ] }) : null
   ] });
   const shellClass3 = cn(
@@ -7588,7 +8346,7 @@ var IntegrationCard = ({
     className
   );
   if (onClick && !action) {
-    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       "button",
       {
         type: "button",
@@ -7605,12 +8363,12 @@ var IntegrationCard = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("article", { className: shellClass3, "aria-labelledby": titleId, children: body });
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("article", { className: shellClass3, "aria-labelledby": titleId, children: body });
 };
 
 // src/app/integrations/IntegrationsEmptyState.tsx
 var import_react63 = require("react");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var IntegrationsEmptyState = ({
   title = "No integrations yet",
   description = "Connect a provider to start syncing data and powering your workforce.",
@@ -7619,7 +8377,7 @@ var IntegrationsEmptyState = ({
   className
 }) => {
   const titleId = (0, import_react63.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     "section",
     {
       className: cn(
@@ -7629,7 +8387,7 @@ var IntegrationsEmptyState = ({
       ),
       "aria-labelledby": titleId,
       children: [
-        icon ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           "span",
           {
             className: cn(
@@ -7641,21 +8399,21 @@ var IntegrationsEmptyState = ({
             children: icon
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }) : null,
-        action ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "mt-1", children: action }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }) : null,
+        action ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "mt-1", children: action }) : null
       ]
     }
   );
 };
 
 // src/app/integrations/PlanBadge.tsx
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime77 = 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_runtime73.jsx)("span", { className: cn(planBadgeClass, className), children });
+var PlanBadge = ({ children, className }) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: cn(planBadgeClass, className), children });
 
 // src/app/integrations/ConnectionRow.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var logoShellClass2 = cn(
   "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg",
   TIMBAL_V2_LOGO_TILE
@@ -7670,14 +8428,14 @@ var ConnectionRow = ({
   ariaLabel,
   className
 }) => {
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
-    logo ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: logoShellClass2, children: logo }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "truncate text-sm font-normal text-foreground", children: name }),
-      meta ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: meta }) : null
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
+    logo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: logoShellClass2, children: logo }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "truncate text-sm font-normal text-foreground", children: name }),
+      meta ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: meta }) : null
     ] }),
-    badge ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "shrink-0", children: badge }) : null,
-    action ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "shrink-0", children: action }) : null
+    badge ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "shrink-0", children: badge }) : null,
+    action ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "shrink-0", children: action }) : null
   ] });
   const rowClass2 = cn(
     "flex w-full items-center gap-3 px-4 py-3 text-left",
@@ -7685,7 +8443,7 @@ var ConnectionRow = ({
     className
   );
   if (onClick) {
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       "button",
       {
         type: "button",
@@ -7697,7 +8455,7 @@ var ConnectionRow = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { role: "listitem", className: rowClass2, children: inner });
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { role: "listitem", className: rowClass2, children: inner });
 };
 var connectionRowListClass = cn(
   "overflow-hidden rounded-2xl",
@@ -7705,12 +8463,12 @@ var connectionRowListClass = cn(
 );
 
 // src/app/integrations/ConnectionRowList.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var ConnectionRowList = ({
   children,
   "aria-label": ariaLabel = "Connected integrations",
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
   "div",
   {
     role: "list",
@@ -7721,7 +8479,7 @@ var ConnectionRowList = ({
 );
 
 // src/app/navigation/SubNav.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var SubNav = ({
   items,
   activeId,
@@ -7730,7 +8488,7 @@ var SubNav = ({
   "aria-label": ariaLabel = "Section navigation",
   layoutId
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("nav", { className: cn("aui-app-sub-nav", className), "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("nav", { className: cn("aui-app-sub-nav", className), "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     PillSegmentedTabs,
     {
       value: activeId,
@@ -7744,13 +8502,13 @@ var SubNav = ({
 };
 
 // src/app/navigation/Breadcrumbs.tsx
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var Breadcrumbs = ({ items, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("nav", { className: cn("aui-app-breadcrumbs", appBreadcrumbsClass, className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("nav", { className: cn("aui-app-breadcrumbs", appBreadcrumbsClass, className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime81.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_runtime77.jsxs)("li", { className: "inline-flex items-center gap-1.5", children: [
-      index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "text-muted-foreground/50", "aria-hidden": true, children: "/" }) : null,
-      isLast ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "text-foreground", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("a", { href: item.href, className: appBreadcrumbLinkClass, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("li", { className: "inline-flex items-center gap-1.5", children: [
+      index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "text-muted-foreground/50", "aria-hidden": true, children: "/" }) : null,
+      isLast ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "text-foreground", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("a", { href: item.href, className: appBreadcrumbLinkClass, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         "button",
         {
           type: "button",
@@ -7764,7 +8522,7 @@ var Breadcrumbs = ({ items, className }) => {
 };
 
 // src/app/forms/Field.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var Field = ({
   label,
   hint,
@@ -7773,11 +8531,11 @@ var Field = ({
   className,
   htmlFor
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: cn("aui-app-field", appFieldClass, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("label", { className: appFieldLabelClass, htmlFor, children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: cn("aui-app-field", appFieldClass, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("label", { className: appFieldLabelClass, htmlFor, children: label }),
     children,
-    hint && !error ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: appFieldHintClass, children: hint }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "text-xs text-destructive", role: "alert", children: error }) : null
+    hint && !error ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("p", { className: appFieldHintClass, children: hint }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("p", { className: "text-xs text-destructive", role: "alert", children: error }) : null
   ] });
 };
 var FieldInput = ({
@@ -7790,7 +8548,7 @@ var FieldInput = ({
   ...inputProps
 }) => {
   const inputId = id ?? inputProps.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
     Field,
     {
       label,
@@ -7798,7 +8556,7 @@ var FieldInput = ({
       error,
       htmlFor: inputId,
       className: fieldClassName,
-      children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         "input",
         {
           id: inputId,
@@ -7812,7 +8570,7 @@ var FieldInput = ({
 };
 
 // src/app/forms/FieldTextarea.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var textareaClass = cn(
   appInputClass,
   "min-h-[5.5rem] resize-y py-2.5 leading-relaxed"
@@ -7827,7 +8585,7 @@ var FieldTextarea = ({
   ...props
 }) => {
   const textareaId = id ?? props.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     Field,
     {
       label,
@@ -7835,7 +8593,7 @@ var FieldTextarea = ({
       error,
       htmlFor: textareaId,
       className: fieldClassName,
-      children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
         "textarea",
         {
           id: textareaId,
@@ -7850,7 +8608,7 @@ var FieldTextarea = ({
 
 // src/app/forms/FieldSelect.tsx
 var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var selectWrapClass = "relative";
 var selectClass = cn(
   appInputClass,
@@ -7867,7 +8625,7 @@ var FieldSelect = ({
   ...props
 }) => {
   const selectId = id ?? props.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
     Field,
     {
       label,
@@ -7875,8 +8633,8 @@ var FieldSelect = ({
       error,
       htmlFor: selectId,
       className: fieldClassName,
-      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: selectWrapClass, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: selectWrapClass, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
           "select",
           {
             id: selectId,
@@ -7886,7 +8644,7 @@ var FieldSelect = ({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
           import_lucide_react16.ChevronDownIcon,
           {
             className: "pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground",
@@ -7899,7 +8657,7 @@ var FieldSelect = ({
 };
 
 // src/app/forms/FieldSwitch.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime85 = 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",
@@ -7920,7 +8678,7 @@ var FieldSwitch = ({
   ...props
 }) => {
   const inputId = id ?? props.name ?? "switch";
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
     "label",
     {
       className: cn(
@@ -7929,8 +8687,8 @@ var FieldSwitch = ({
       ),
       htmlFor: inputId,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { className: "relative mt-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("span", { className: "relative mt-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             "input",
             {
               id: inputId,
@@ -7940,11 +8698,11 @@ var FieldSwitch = ({
               ...props
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: thumbClass }) })
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: thumbClass }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "text-sm font-medium text-foreground", children: label }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "text-xs text-muted-foreground", children: description }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-sm font-medium text-foreground", children: label }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-xs text-muted-foreground", children: description }) : null
         ] })
       ]
     }
@@ -7953,13 +8711,13 @@ var FieldSwitch = ({
 
 // src/app/forms/SearchInput.tsx
 var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var SearchInput = ({
   className,
   placeholder = "Search\u2026",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
     "label",
     {
       className: cn(
@@ -7968,8 +8726,8 @@ var SearchInput = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react17.SearchIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react17.SearchIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           "input",
           {
             type: "search",
@@ -7984,18 +8742,18 @@ var SearchInput = ({
 };
 
 // src/app/forms/FormSection.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var FormSection = ({ title, children, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("fieldset", { className: cn("aui-app-form-section", appSectionClass, "border-0 p-0", className), children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("legend", { className: cn(appSectionTitleClass, "mb-3 px-0"), children: title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "flex flex-col gap-4", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("fieldset", { className: cn("aui-app-form-section", appSectionClass, "border-0 p-0", className), children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("legend", { className: cn(appSectionTitleClass, "mb-3 px-0"), children: title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "flex flex-col gap-4", children })
   ] });
 };
 
 // src/app/data/FilterBar.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var FilterBar = ({ children, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     "div",
     {
       className: cn("aui-app-filter-bar", appFilterBarClass, className),
@@ -8009,7 +8767,7 @@ var FilterBar = ({ children, className }) => {
 // src/app/data/DataTable.tsx
 var import_react64 = require("react");
 var import_lucide_react18 = require("lucide-react");
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime89 = 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";
@@ -8049,12 +8807,12 @@ function SortIndicator({
 }) {
   const iconClass = "size-3.5 shrink-0 opacity-60 group-hover:opacity-100";
   if (!active) {
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react18.ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react18.ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
   }
   if (direction === "desc") {
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react18.ArrowDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react18.ArrowDownIcon, { className: iconClass, "aria-hidden": true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react18.ArrowUpIcon, { className: iconClass, "aria-hidden": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react18.ArrowUpIcon, { className: iconClass, "aria-hidden": true });
 }
 function DataTable({
   columns,
@@ -8105,28 +8863,28 @@ function DataTable({
   const cellPad = dense ? "px-3 py-2" : void 0;
   const headPad = dense ? "px-3 py-2" : void 0;
   if (rows.length === 0 && emptyMode === "replace") {
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(EmptyState, { title: emptyTitle, description: emptyDescription, className });
+    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(EmptyState, { title: emptyTitle, description: emptyDescription, className });
   }
   const rowCountText = rowCountLabel?.(sortedRows.length) ?? `${sortedRows.length} row${sortedRows.length === 1 ? "" : "s"}`;
   const hasFoot = Boolean((showRowCount || footer) && sortedRows.length > 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("table", { className: tableClass, children: [
-    caption ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("caption", { className: "sr-only", children: caption }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("thead", { className: cn(stickyHeader && stickyHeadClass), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("tr", { children: columns.map((col) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("table", { className: tableClass, children: [
+    caption ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("caption", { className: "sr-only", children: caption }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("thead", { className: cn(stickyHeader && stickyHeadClass), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("tr", { children: 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_runtime85.jsxs)(
+      const headerContent = col.sortable ? /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
         "button",
         {
           type: "button",
           className: sortButtonClass,
           onClick: () => setSort(nextSort(sort, col.id)),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "truncate", children: col.header }),
-            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "truncate", children: col.header }),
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
           ]
         }
       ) : col.header;
-      return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "th",
         {
           scope: "col",
@@ -8142,10 +8900,10 @@ function DataTable({
         col.id
       );
     }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: sortedRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("td", { colSpan: columns.length, className: emptyCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { className: "font-medium text-foreground", children: emptyTitle }),
-      emptyDescription ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { className: "max-w-sm text-muted-foreground", children: emptyDescription }) : null
-    ] }) }) }) : sortedRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: sortedRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("td", { colSpan: columns.length, className: emptyCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: "font-medium text-foreground", children: emptyTitle }),
+      emptyDescription ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: "max-w-sm text-muted-foreground", children: emptyDescription }) : null
+    ] }) }) }) : sortedRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
       "tr",
       {
         className: rowClass,
@@ -8159,7 +8917,7 @@ function DataTable({
         } : void 0,
         tabIndex: onRowClick ? 0 : void 0,
         role: onRowClick ? "button" : void 0,
-        children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+        children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
           "td",
           {
             className: cn(
@@ -8175,7 +8933,7 @@ function DataTable({
       },
       getRowKey(row)
     )) }),
-    hasFoot ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("td", { colSpan: columns.length, className: footCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+    hasFoot ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("td", { colSpan: columns.length, className: footCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
       "div",
       {
         className: cn(
@@ -8183,7 +8941,7 @@ function DataTable({
           showRowCount && footer ? "justify-between" : "justify-start"
         ),
         children: [
-          showRowCount ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { children: rowCountText }) : null,
+          showRowCount ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { children: rowCountText }) : null,
           footer
         ]
       }
@@ -8193,53 +8951,7 @@ function DataTable({
 
 // src/app/data/ChartPanel.tsx
 var import_react65 = require("react");
-
-// src/app/data/metrics-shared.tsx
-var import_jsx_runtime86 = require("react/jsx-runtime");
-var metricCardShellClass = cn(
-  studioIntegrationCardClass,
-  "aui-app-metric-card shadow-none",
-  "flex flex-col overflow-hidden"
-);
-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 metricCellDividerClass = "border-r border-border/40";
-var MetricCardHeader = ({
-  title,
-  titleId,
-  description,
-  actions
-}) => {
-  if (!title && !description && !actions) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("header", { className: metricCardHeaderClass, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "min-w-0", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }) : null,
-      description ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
-    ] }),
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "shrink-0", children: actions }) : null
-  ] });
-};
-function metricTilesGridColsClass(n) {
-  switch (n) {
-    case 1:
-      return "grid-cols-1";
-    case 2:
-      return "grid-cols-2";
-    case 3:
-      return "grid-cols-3";
-    case 5:
-      return "grid-cols-2 sm:grid-cols-5";
-    case 6:
-      return "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6";
-    default:
-      return "grid-cols-2 md:grid-cols-4";
-  }
-}
-
-// src/app/data/ChartPanel.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var ChartPanel = ({
   title,
   description,
@@ -8252,14 +8964,14 @@ var ChartPanel = ({
   const titleId = (0, import_react65.useId)();
   const resolvedTitle = title ?? artifact?.title;
   const hasHeader = Boolean(resolvedTitle || description || actions);
-  const body = children ?? (artifact ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ChartArtifactView, { artifact, embedded: true, height }) : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+  const body = children ?? (artifact ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ChartArtifactView, { artifact, embedded: true, height }) : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
     "section",
     {
       className: cn(metricCardShellClass, "aui-app-chart-panel", className),
       "aria-labelledby": resolvedTitle ? titleId : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           MetricCardHeader,
           {
             title: resolvedTitle,
@@ -8268,14 +8980,14 @@ var ChartPanel = ({
             actions
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           "div",
           {
             className: cn(
               "relative min-h-0 w-full",
               hasHeader ? metricChartPlotRegionClass : "pt-2 pb-3"
             ),
-            children: body ?? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+            children: body ?? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
               "div",
               {
                 className: "flex items-center justify-center text-sm font-normal text-muted-foreground",
@@ -8291,77 +9003,9 @@ var ChartPanel = ({
   );
 };
 
-// src/app/data/MetricTile.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
-var trendToneClass = {
-  up: "border-border/80 bg-muted/40 text-muted-foreground",
-  down: "border-border/80 bg-muted/40 text-muted-foreground",
-  neutral: "border-border/80 bg-muted/30 text-muted-foreground"
-};
-var metricTileBaseClass = "relative flex min-w-0 flex-1 flex-col gap-1 px-4 py-3 text-left font-normal";
-var metricTileInteractiveClass = cn(
-  metricTileBaseClass,
-  "bg-transparent hover:bg-transparent active:bg-transparent",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/10"
-);
-var MetricTile = ({
-  label,
-  value,
-  unit,
-  trend,
-  trendTone = "neutral",
-  active = false,
-  showDivider = false,
-  onSelect,
-  ariaLabel,
-  className
-}) => {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
-    active ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-      "span",
-      {
-        "aria-hidden": true,
-        className: "absolute inset-x-0 bottom-0 h-0.5 bg-foreground dark:bg-white"
-      }
-    ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "text-xs font-normal text-muted-foreground", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("span", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("span", { className: "flex items-baseline gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "text-2xl font-normal tracking-tight text-foreground tabular-nums", children: value }),
-        unit ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "text-xs font-normal text-muted-foreground", children: unit }) : null
-      ] }),
-      trend ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-        "span",
-        {
-          className: cn(
-            "rounded-full border px-1.5 py-0.5 text-xs font-normal",
-            trendToneClass[trendTone]
-          ),
-          children: trend
-        }
-      ) : null
-    ] })
-  ] });
-  const divider = showDivider ? metricCellDividerClass : void 0;
-  if (onSelect) {
-    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-      "button",
-      {
-        type: "button",
-        onClick: onSelect,
-        "aria-pressed": active,
-        "aria-label": ariaLabel,
-        className: cn(metricTileInteractiveClass, divider, className),
-        children: content
-      }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: cn(metricTileBaseClass, divider, className), children: content });
-};
-
 // src/app/data/MetricRow.tsx
 var import_react66 = require("react");
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var MetricRow = ({
   title,
   description,
@@ -8383,13 +9027,13 @@ var MetricRow = ({
     if (activeMetricId == null) setInternalId(id);
     onMetricChange?.(id);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           MetricCardHeader,
           {
             title,
@@ -8398,7 +9042,7 @@ var MetricRow = ({
             actions
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           "div",
           {
             role: selectable ? "group" : void 0,
@@ -8408,7 +9052,7 @@ var MetricRow = ({
               metricTilesGridColsClass(metrics.length),
               (title || description || actions) && "mt-3"
             ),
-            children: metrics.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+            children: metrics.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
               MetricTile,
               {
                 label: m.label,
@@ -8431,7 +9075,7 @@ var MetricRow = ({
 
 // src/app/data/MetricChartCard.tsx
 var import_react67 = require("react");
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var MetricChartCard = ({
   title,
   description,
@@ -8461,13 +9105,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_runtime90.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
           MetricCardHeader,
           {
             title,
@@ -8476,7 +9120,7 @@ var MetricChartCard = ({
             actions
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
           "div",
           {
             role: "group",
@@ -8486,7 +9130,7 @@ var MetricChartCard = ({
               metricTilesGridColsClass(metrics.length),
               hasHeader && "mt-3"
             ),
-            children: metrics.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            children: metrics.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
               MetricTile,
               {
                 label: m.label,
@@ -8502,7 +9146,7 @@ var MetricChartCard = ({
             ))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: active?.data && active.data.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: active?.data && active.data.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
           LineAreaChart,
           {
             data: active.data,
@@ -8522,7 +9166,7 @@ var MetricChartCard = ({
             ariaLabel: chartAriaLabel
           },
           active.id
-        ) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
           "div",
           {
             className: "flex w-full items-center justify-center text-sm font-normal text-muted-foreground",
@@ -8538,7 +9182,7 @@ var MetricChartCard = ({
 
 // src/charts/sparkline.tsx
 var import_react68 = require("react");
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var Sparkline = ({
   data,
   dataKey = "value",
@@ -8553,7 +9197,7 @@ var Sparkline = ({
   const uid = (0, import_react68.useId)();
   const values = data.map((d) => typeof d === "number" ? d : toNum(d[dataKey]));
   if (values.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: cn("inline-block", className), style: { width, height } });
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: cn("inline-block", className), style: { width, height } });
   }
   const pad = strokeWidth + 1;
   const min = Math.min(...values);
@@ -8565,7 +9209,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_runtime91.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
     "svg",
     {
       width,
@@ -8576,14 +9220,14 @@ var Sparkline = ({
       "aria-label": ariaLabel,
       preserveAspectRatio: "none",
       children: [
-        area && /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("linearGradient", { id: `${uid}-spark`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
-            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
+        area && /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_jsx_runtime93.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("linearGradient", { id: `${uid}-spark`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           "path",
           {
             d: monotoneLinePath(points),
@@ -8727,7 +9371,7 @@ When you call a tool that returns an artifact (\`make_chart\`, \`ask_question\`,
 
 // src/auth/guard.tsx
 var import_lucide_react19 = require("lucide-react");
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var AuthGuard = ({
   children,
   requireAuth = false,
@@ -8738,7 +9382,7 @@ var AuthGuard = ({
     return children;
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_lucide_react19.Loader2, { className: "w-8 h-8 animate-spin" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_lucide_react19.Loader2, { className: "w-8 h-8 animate-spin" }) });
   }
   if (requireAuth && !isAuthenticated && !isEmbedded) {
     const returnTo = encodeURIComponent(
@@ -8752,6 +9396,407 @@ var AuthGuard = ({
 
 // src/index.ts
 var import_react69 = require("@assistant-ui/react");
+
+// src/ui/dropdown-menu.tsx
+var import_radix_ui5 = require("radix-ui");
+var import_lucide_react20 = require("lucide-react");
+var import_jsx_runtime95 = require("react/jsx-runtime");
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_radix_ui5.DropdownMenu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    import_radix_ui5.DropdownMenu.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_radix_ui5.DropdownMenu.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_radix_ui5.DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    import_radix_ui5.DropdownMenu.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[80] max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-x-hidden overflow-y-auto rounded-lg border border-border p-1 shadow-card",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    import_radix_ui5.DropdownMenu.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
+    import_radix_ui5.DropdownMenu.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cn(
+        "relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_radix_ui5.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_lucide_react20.CheckIcon, { className: "size-4" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuRadioGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    import_radix_ui5.DropdownMenu.RadioGroup,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      ...props
+    }
+  );
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
+    import_radix_ui5.DropdownMenu.RadioItem,
+    {
+      "data-slot": "dropdown-menu-radio-item",
+      className: cn(
+        "relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_radix_ui5.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_lucide_react20.CircleIcon, { className: "size-2 fill-current" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    import_radix_ui5.DropdownMenu.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-2 py-1.5 text-xs font-medium text-muted-foreground data-[inset]:pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    import_radix_ui5.DropdownMenu.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("-mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSub({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_radix_ui5.DropdownMenu.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
+    import_radix_ui5.DropdownMenu.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        "flex cursor-default items-center rounded-md px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[inset]:pl-8",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_lucide_react20.ChevronRightIcon, { className: "ml-auto size-4" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    import_radix_ui5.DropdownMenu.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[80] min-w-[8rem] origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-hidden rounded-lg border border-border p-1 shadow-card",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/popover.tsx
+var import_radix_ui6 = require("radix-ui");
+var import_jsx_runtime96 = require("react/jsx-runtime");
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_radix_ui6.Popover.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_radix_ui6.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverAnchor({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_radix_ui6.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_radix_ui6.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+    import_radix_ui6.Popover.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[80] w-72 origin-[var(--radix-popover-content-transform-origin)] rounded-xl border border-border p-4 shadow-card outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+
+// src/ui/select.tsx
+var import_radix_ui7 = require("radix-ui");
+var import_lucide_react21 = require("lucide-react");
+var import_jsx_runtime97 = require("react/jsx-runtime");
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_radix_ui7.Select.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_radix_ui7.Select.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_radix_ui7.Select.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
+    import_radix_ui7.Select.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "flex w-fit items-center justify-between gap-2 rounded-lg border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_radix_ui7.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_lucide_react21.ChevronDownIcon, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_radix_ui7.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
+    import_radix_ui7.Select.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-[80] max-h-[var(--radix-select-content-available-height)] min-w-[8rem] origin-[var(--radix-select-content-transform-origin)] overflow-x-hidden overflow-y-auto rounded-lg border border-border shadow-card",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(SelectScrollUpButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          import_radix_ui7.Select.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+    import_radix_ui7.Select.Label,
+    {
+      "data-slot": "select-label",
+      className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
+    import_radix_ui7.Select.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_radix_ui7.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_lucide_react21.CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_radix_ui7.Select.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+    import_radix_ui7.Select.Separator,
+    {
+      "data-slot": "select-separator",
+      className: cn("-mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+    import_radix_ui7.Select.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_lucide_react21.ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+    import_radix_ui7.Select.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_lucide_react21.ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   APP_KIT_AGENT_INSTRUCTIONS,
@@ -8790,10 +9835,27 @@ var import_react69 = require("@assistant-ui/react");
   Dialog,
   DialogClose,
   DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
   DialogOverlay,
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
   EmptyState,
   ExpandableSection,
   Field,
@@ -8823,11 +9885,25 @@ var import_react69 = require("@assistant-ui/react");
   PageHeader,
   PillSegmentedTabs,
   PlanBadge,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
   QuestionArtifactView,
   ResourceCard,
   STUDIO_NAV_MODE,
   SearchInput,
   Section,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
   SessionProvider,
   SettingsSection,
   SettingsSectionHeader,
@@ -8842,8 +9918,11 @@ var import_react69 = require("@assistant-ui/react");
   SubNav,
   Suggestions,
   SurfaceCard,
+  THEME_AGENT_INSTRUCTIONS,
   THREAD_DEFAULT_MAX_WIDTH,
+  TIMBAL_THEME_PRESETS,
   TableArtifactView,
+  ThemePresetGallery,
   Thread,
   ThreadPrimitive,
   TimbalChat,
@@ -8851,6 +9930,7 @@ var import_react69 = require("@assistant-ui/react");
   TimbalMark,
   TimbalRuntimeProvider,
   TimbalStudioShell,
+  TimbalThemeStyle,
   ToolArtifactFallback,
   ToolFallback,
   Tooltip,
@@ -8863,13 +9943,17 @@ var import_react69 = require("@assistant-ui/react");
   UiEventProvider,
   UiNodeView,
   WorkforceSelector,
+  applyThemePreset,
+  applyTimbalTheme,
   assistantMessageContentClass,
   assistantMessageRootClass,
   authFetch,
+  clearTimbalTheme,
   clearTokens,
   cn,
   connectionRowListClass,
   createDefaultAttachmentAdapter,
+  createTimbalTheme,
   createUploadAttachmentAdapter,
   defaultArtifactRenderers,
   fetchCurrentUser,
@@ -8877,6 +9961,8 @@ var import_react69 = require("@assistant-ui/react");
   getAccessToken,
   getPath,
   getRefreshToken,
+  getStoredThemePreset,
+  getThemePreset,
   isArtifact,
   isArtifactFenceLanguage,
   isUiBinding,
@@ -8889,6 +9975,7 @@ var import_react69 = require("@assistant-ui/react");
   setPath,
   setRefreshToken,
   splitMarkdownByArtifacts,
+  themeToCss,
   threadMessageColumnClass,
   useAppCopilotContext,
   useAppShellChat,