@timbal-ai/timbal-react 0.8.0 → 0.8.1

package/dist/index.cjs

@@ -149,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,
@@ -158,6 +161,7 @@ __export(index_exports, {
   TimbalMark: () => TimbalMark,
   TimbalRuntimeProvider: () => TimbalRuntimeProvider,
   TimbalStudioShell: () => TimbalStudioShell,
+  TimbalThemeStyle: () => TimbalThemeStyle,
   ToolArtifactFallback: () => ToolArtifactFallback,
   ToolFallback: () => ToolFallback,
   Tooltip: () => Tooltip,
@@ -170,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,
@@ -184,6 +192,8 @@ __export(index_exports, {
   getAccessToken: () => getAccessToken,
   getPath: () => getPath,
   getRefreshToken: () => getRefreshToken,
+  getStoredThemePreset: () => getStoredThemePreset,
+  getThemePreset: () => getThemePreset,
   isArtifact: () => isArtifact,
   isArtifactFenceLanguage: () => isArtifactFenceLanguage,
   isUiBinding: () => isUiBinding,
@@ -196,6 +206,7 @@ __export(index_exports, {
   setPath: () => setPath,
   setRefreshToken: () => setRefreshToken,
   splitMarkdownByArtifacts: () => splitMarkdownByArtifacts,
+  themeToCss: () => themeToCss,
   threadMessageColumnClass: () => threadMessageColumnClass,
   useAppCopilotContext: () => useAppCopilotContext,
   useAppShellChat: () => useAppShellChat,
@@ -4805,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",
@@ -6495,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 |
@@ -6502,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. |
@@ -6602,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
 
@@ -6647,6 +6663,681 @@ import {
 - For rich in-chat widgets, use **artifacts** (\`ARTIFACT_AGENT_INSTRUCTIONS\`) \u2014 app kit is for the **host application shell**.
 `.trim();
 
+// 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/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/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/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 TimbalThemeStyle = ({
+  theme,
+  preset,
+  scope,
+  nonce
+}) => {
+  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)(
+    "style",
+    {
+      "data-timbal-theme-style": scope ?? "root",
+      nonce,
+      dangerouslySetInnerHTML: { __html: css }
+    }
+  );
+};
+
+// 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");
@@ -6713,7 +7404,7 @@ function useAppShellChat() {
 }
 
 // src/app/layout/AppShell.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+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",
@@ -6742,14 +7433,14 @@ var AppShellBody = ({
     layoutDirection
   );
   const insetPadding = sidebar ? insetPaddingPx : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  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_runtime49.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
         "div",
         {
           className: cn(
@@ -6757,8 +7448,8 @@ var AppShellBody = ({
             !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 })
+            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 })
           ]
         }
       )
@@ -6806,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,
@@ -6817,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(
@@ -6828,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,
@@ -6841,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",
@@ -6857,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: {
@@ -6872,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,
@@ -6898,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",
@@ -6918,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) ?? {};
@@ -6980,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"
@@ -7025,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,
@@ -7046,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",
@@ -7067,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",
@@ -7111,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(
@@ -7125,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";
@@ -7140,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",
@@ -7158,7 +7849,7 @@ var AppConfirmDialog = ({
               children: cancelLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
             TimbalV2Button,
             {
               type: "button",
@@ -7178,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",
@@ -7193,7 +7884,7 @@ var InfoCard = ({
   action,
   tone = "neutral",
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
   "div",
   {
     className: cn(
@@ -7202,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",
@@ -7226,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(
@@ -7237,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(
@@ -7263,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(
@@ -7284,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",
@@ -7299,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 = ({
@@ -7320,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",
@@ -7330,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,
@@ -7348,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 })
@@ -7356,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
@@ -7381,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,
@@ -7418,7 +8109,7 @@ var SettingsSection = ({
   children,
   noBorderTop = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
   "section",
   {
     className: cn(
@@ -7427,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,
@@ -7448,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(
@@ -7456,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,
@@ -7465,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
   ] });
 };
 
@@ -7483,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",
@@ -7501,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",
@@ -7515,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 })
           ] })
         ]
       }
@@ -7528,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(
@@ -7542,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 })
     ]
   }
 );
@@ -7555,7 +8246,7 @@ var DangerZone = ({
   description,
   children,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
   "section",
   {
     className: cn(
@@ -7563,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,
@@ -7615,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,
@@ -7628,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(
@@ -7643,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(
@@ -7655,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",
@@ -7672,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.",
@@ -7686,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(
@@ -7696,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(
@@ -7708,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
@@ -7737,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",
@@ -7752,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",
@@ -7764,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",
@@ -7772,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",
@@ -7788,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,
@@ -7797,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,
@@ -7811,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",
@@ -7831,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,
@@ -7840,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 = ({
@@ -7857,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,
@@ -7865,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,
@@ -7879,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"
@@ -7894,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,
@@ -7902,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,
@@ -7917,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,
@@ -7934,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,
@@ -7942,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,
@@ -7953,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",
@@ -7966,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",
@@ -7987,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(
@@ -7996,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,
@@ -8007,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
         ] })
       ]
     }
@@ -8020,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(
@@ -8035,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",
@@ -8051,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),
@@ -8076,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";
@@ -8116,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,
@@ -8172,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",
@@ -8209,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,
@@ -8226,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(
@@ -8242,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(
@@ -8250,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
         ]
       }
@@ -8260,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,
@@ -8319,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,
@@ -8335,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",
@@ -8358,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,
@@ -8450,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,
@@ -8465,7 +9042,7 @@ var MetricRow = ({
             actions
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           "div",
           {
             role: selectable ? "group" : void 0,
@@ -8475,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,
@@ -8498,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,
@@ -8528,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,
@@ -8543,7 +9120,7 @@ var MetricChartCard = ({
             actions
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
           "div",
           {
             role: "group",
@@ -8553,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,
@@ -8569,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,
@@ -8589,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",
@@ -8605,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",
@@ -8620,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);
@@ -8632,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,
@@ -8643,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),
@@ -8794,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,
@@ -8805,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(
@@ -8823,16 +9400,16 @@ 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_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_radix_ui5.DropdownMenu.Root, { "data-slot": "dropdown-menu", ...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_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     import_radix_ui5.DropdownMenu.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -8843,14 +9420,14 @@ function DropdownMenuTrigger({
 function DropdownMenuGroup({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_radix_ui5.DropdownMenu.Group, { "data-slot": "dropdown-menu-group", ...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_runtime93.jsx)(import_radix_ui5.DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  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",
@@ -8869,7 +9446,7 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     import_radix_ui5.DropdownMenu.Item,
     {
       "data-slot": "dropdown-menu-item",
@@ -8889,7 +9466,7 @@ function DropdownMenuCheckboxItem({
   checked,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
     import_radix_ui5.DropdownMenu.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
@@ -8900,7 +9477,7 @@ function DropdownMenuCheckboxItem({
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_radix_ui5.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_lucide_react20.CheckIcon, { className: "size-4" }) }) }),
+        /* @__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
       ]
     }
@@ -8909,7 +9486,7 @@ function DropdownMenuCheckboxItem({
 function DropdownMenuRadioGroup({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     import_radix_ui5.DropdownMenu.RadioGroup,
     {
       "data-slot": "dropdown-menu-radio-group",
@@ -8922,7 +9499,7 @@ function DropdownMenuRadioItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
     import_radix_ui5.DropdownMenu.RadioItem,
     {
       "data-slot": "dropdown-menu-radio-item",
@@ -8932,7 +9509,7 @@ function DropdownMenuRadioItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_radix_ui5.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_lucide_react20.CircleIcon, { className: "size-2 fill-current" }) }) }),
+        /* @__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
       ]
     }
@@ -8943,7 +9520,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     import_radix_ui5.DropdownMenu.Label,
     {
       "data-slot": "dropdown-menu-label",
@@ -8960,7 +9537,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     import_radix_ui5.DropdownMenu.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -8973,7 +9550,7 @@ function DropdownMenuShortcut({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     "span",
     {
       "data-slot": "dropdown-menu-shortcut",
@@ -8988,7 +9565,7 @@ function DropdownMenuShortcut({
 function DropdownMenuSub({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_radix_ui5.DropdownMenu.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_radix_ui5.DropdownMenu.Sub, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({
   className,
@@ -8996,7 +9573,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
     import_radix_ui5.DropdownMenu.SubTrigger,
     {
       "data-slot": "dropdown-menu-sub-trigger",
@@ -9008,7 +9585,7 @@ function DropdownMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_lucide_react20.ChevronRightIcon, { className: "ml-auto size-4" })
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_lucide_react20.ChevronRightIcon, { className: "ml-auto size-4" })
       ]
     }
   );
@@ -9017,7 +9594,7 @@ function DropdownMenuSubContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     import_radix_ui5.DropdownMenu.SubContent,
     {
       "data-slot": "dropdown-menu-sub-content",
@@ -9032,21 +9609,21 @@ function DropdownMenuSubContent({
 
 // src/ui/popover.tsx
 var import_radix_ui6 = require("radix-ui");
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_radix_ui6.Popover.Root, { "data-slot": "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_runtime94.jsx)(import_radix_ui6.Popover.Trigger, { "data-slot": "popover-trigger", ...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_runtime94.jsx)(import_radix_ui6.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_radix_ui6.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
 }
 function PopoverContent({
   className,
@@ -9054,7 +9631,7 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_radix_ui6.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+  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",
@@ -9072,21 +9649,21 @@ function PopoverContent({
 // src/ui/select.tsx
 var import_radix_ui7 = require("radix-ui");
 var import_lucide_react21 = require("lucide-react");
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_radix_ui7.Select.Root, { "data-slot": "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_runtime95.jsx)(import_radix_ui7.Select.Group, { "data-slot": "select-group", ...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_runtime95.jsx)(import_radix_ui7.Select.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_radix_ui7.Select.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
@@ -9094,7 +9671,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
     import_radix_ui7.Select.Trigger,
     {
       "data-slot": "select-trigger",
@@ -9106,7 +9683,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_radix_ui7.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_lucide_react21.ChevronDownIcon, { className: "size-4 opacity-50" }) })
+        /* @__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" }) })
       ]
     }
   );
@@ -9117,7 +9694,7 @@ function SelectContent({
   position = "popper",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_radix_ui7.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
+  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",
@@ -9129,8 +9706,8 @@ function SelectContent({
       position,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(SelectScrollUpButton, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(SelectScrollUpButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           import_radix_ui7.Select.Viewport,
           {
             className: cn(
@@ -9140,7 +9717,7 @@ function SelectContent({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(SelectScrollDownButton, {})
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(SelectScrollDownButton, {})
       ]
     }
   ) });
@@ -9149,7 +9726,7 @@ function SelectLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
     import_radix_ui7.Select.Label,
     {
       "data-slot": "select-label",
@@ -9163,7 +9740,7 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
     import_radix_ui7.Select.Item,
     {
       "data-slot": "select-item",
@@ -9173,8 +9750,8 @@ function SelectItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_radix_ui7.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_lucide_react21.CheckIcon, { className: "size-4" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_radix_ui7.Select.ItemText, { 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 })
       ]
     }
   );
@@ -9183,7 +9760,7 @@ function SelectSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
     import_radix_ui7.Select.Separator,
     {
       "data-slot": "select-separator",
@@ -9196,13 +9773,13 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  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_runtime95.jsx)(import_lucide_react21.ChevronUpIcon, { className: "size-4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_lucide_react21.ChevronUpIcon, { className: "size-4" })
     }
   );
 }
@@ -9210,13 +9787,13 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  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_runtime95.jsx)(import_lucide_react21.ChevronDownIcon, { className: "size-4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_lucide_react21.ChevronDownIcon, { className: "size-4" })
     }
   );
 }
@@ -9341,8 +9918,11 @@ function SelectScrollDownButton({
   SubNav,
   Suggestions,
   SurfaceCard,
+  THEME_AGENT_INSTRUCTIONS,
   THREAD_DEFAULT_MAX_WIDTH,
+  TIMBAL_THEME_PRESETS,
   TableArtifactView,
+  ThemePresetGallery,
   Thread,
   ThreadPrimitive,
   TimbalChat,
@@ -9350,6 +9930,7 @@ function SelectScrollDownButton({
   TimbalMark,
   TimbalRuntimeProvider,
   TimbalStudioShell,
+  TimbalThemeStyle,
   ToolArtifactFallback,
   ToolFallback,
   Tooltip,
@@ -9362,13 +9943,17 @@ function SelectScrollDownButton({
   UiEventProvider,
   UiNodeView,
   WorkforceSelector,
+  applyThemePreset,
+  applyTimbalTheme,
   assistantMessageContentClass,
   assistantMessageRootClass,
   authFetch,
+  clearTimbalTheme,
   clearTokens,
   cn,
   connectionRowListClass,
   createDefaultAttachmentAdapter,
+  createTimbalTheme,
   createUploadAttachmentAdapter,
   defaultArtifactRenderers,
   fetchCurrentUser,
@@ -9376,6 +9961,8 @@ function SelectScrollDownButton({
   getAccessToken,
   getPath,
   getRefreshToken,
+  getStoredThemePreset,
+  getThemePreset,
   isArtifact,
   isArtifactFenceLanguage,
   isUiBinding,
@@ -9388,6 +9975,7 @@ function SelectScrollDownButton({
   setPath,
   setRefreshToken,
   splitMarkdownByArtifacts,
+  themeToCss,
   threadMessageColumnClass,
   useAppCopilotContext,
   useAppShellChat,