@timbal-ai/timbal-react 0.8.0 → 0.8.1

package/dist/{chunk-ZEDE2TWQ.esm.js → chunk-GBBLAM3G.esm.js}

@@ -1,9 +1,10 @@
 import {
   SIDEBAR_INSET_PX_EXPANDED,
+  STORAGE_KEYS,
   ShellInsetProvider,
   studioChromeShellStyle,
   studioSidebarWidthTransition
-} from "./chunk-Z27GBSOT.esm.js";
+} from "./chunk-QIABF4KB.esm.js";
 import {
   ChartArtifactView,
   LineAreaChart,
@@ -16,10 +17,10 @@ import {
   studioSecondaryChromeClass,
   studioTopbarPillHeightClass,
   toNum
-} from "./chunk-VVTTLIGT.esm.js";
+} from "./chunk-5ZKLPWVN.esm.js";
 import {
   PillSegmentedTabs
-} from "./chunk-YNDXBN6C.esm.js";
+} from "./chunk-OISVICYF.esm.js";
 import {
   Button,
   Dialog,
@@ -31,7 +32,7 @@ import {
   TIMBAL_V2_SWITCH_TRACK_OFF,
   TimbalV2Button,
   cn
-} from "./chunk-QKO67F4V.esm.js";
+} from "./chunk-QVAUCVQA.esm.js";
 
 // src/app/agent-instructions.ts
 var APP_KIT_AGENT_INSTRUCTIONS = `
@@ -66,6 +67,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 |
@@ -73,7 +76,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. |
@@ -173,6 +176,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
 
@@ -218,6 +222,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 round = (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 = round(clamp(color.l, 0, 1), 4);
+  const c = round(clamp(color.c, 0, 0.4), 4);
+  const h = round((color.h % 360 + 360) % 360, 2);
+  const a = clamp(color.alpha, 0, 1);
+  const base = `oklch(${l} ${c} ${h}`;
+  return a >= 1 ? `${base})` : `${base} / ${round(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 (isDev()) {
+    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 isDev() {
+  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
+import { jsx } from "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__ */ jsx(
+    "style",
+    {
+      "data-timbal-theme-style": scope ?? "root",
+      nonce,
+      dangerouslySetInnerHTML: { __html: css }
+    }
+  );
+};
+
+// src/app/data/metrics-shared.tsx
+import { jsx as jsx2, jsxs } from "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__ */ jsxs("header", { className: metricCardHeaderClass, children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      title ? /* @__PURE__ */ jsx2("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }) : null,
+      description ? /* @__PURE__ */ jsx2("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx2("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
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "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__ */ jsxs2(Fragment, { children: [
+    active ? /* @__PURE__ */ jsx3(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "absolute inset-x-0 bottom-0 h-0.5 bg-foreground dark:bg-white"
+      }
+    ) : null,
+    /* @__PURE__ */ jsx3("span", { className: "text-xs font-normal text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs2("span", { className: "flex items-baseline gap-1", children: [
+        /* @__PURE__ */ jsx3("span", { className: "text-2xl font-normal tracking-tight text-foreground tabular-nums", children: value }),
+        unit ? /* @__PURE__ */ jsx3("span", { className: "text-xs font-normal text-muted-foreground", children: unit }) : null
+      ] }),
+      trend ? /* @__PURE__ */ jsx3(
+        "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__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        onClick: onSelect,
+        "aria-pressed": active,
+        "aria-label": ariaLabel,
+        className: cn(metricTileInteractiveClass, divider, className),
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3("div", { className: cn(metricTileBaseClass, divider, className), children: content });
+};
+
+// src/app/theme/ThemePresetGallery.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "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__ */ jsx4(
+    "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__ */ jsxs3("div", { "data-timbal-theme": preset.id, children: [
+          /* @__PURE__ */ jsx4(TimbalThemeStyle, { preset: preset.id, scope: preset.id }),
+          /* @__PURE__ */ jsxs3(
+            "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__ */ jsxs3("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx4(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        className: "size-4 shrink-0 rounded-full ring-1 ring-black/10",
+                        style: { background: preset.swatch }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium text-foreground", children: preset.label })
+                  ] }),
+                  selected ? /* @__PURE__ */ jsx4("span", { className: "text-xs font-medium text-primary", children: "Selected" }) : null
+                ] }),
+                /* @__PURE__ */ jsx4("p", { className: "text-xs leading-snug text-muted-foreground", children: preset.description }),
+                /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2 rounded-lg border border-border bg-background p-2", children: [
+                  /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx4(Button, { size: "xs", className: "pointer-events-none", children: "Primary" }),
+                    /* @__PURE__ */ jsx4("span", { className: "size-5 rounded-md bg-primary", "aria-hidden": true }),
+                    /* @__PURE__ */ jsx4("span", { className: "size-5 rounded-md bg-muted", "aria-hidden": true }),
+                    /* @__PURE__ */ jsx4(
+                      "span",
+                      {
+                        className: "size-5 rounded-md border border-border bg-accent",
+                        "aria-hidden": true
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx4(MetricTile, { label: "Active users", value: "1,248", trend: "+8%" })
+                ] })
+              ]
+            }
+          )
+        ] }, preset.id);
+      })
+    }
+  );
+};
+
 // src/design/app-classes.ts
 var appPageColumnClass = "mx-auto w-full max-w-6xl px-4 md:px-6";
 var appShellTopbarInsetClass = "w-full px-4 md:px-6";
@@ -282,7 +961,7 @@ function useAppShellChat() {
 // src/app/layout/AppShell.tsx
 import { motion, useReducedMotion } from "motion/react";
 import { useCallback, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "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",
@@ -311,14 +990,14 @@ var AppShellBody = ({
     layoutDirection
   );
   const insetPadding = sidebar ? insetPaddingPx : 0;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx5(
     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__ */ jsxs(
+      children: /* @__PURE__ */ jsxs4(
         "div",
         {
           className: cn(
@@ -326,8 +1005,8 @@ var AppShellBody = ({
             !topbarContent && appShellInsetTopClass
           ),
           children: [
-            topbarContent ? /* @__PURE__ */ jsx("header", { className: cn("aui-app-shell-topbar-region", appShellTopbarStickyClass), children: /* @__PURE__ */ jsx("div", { className: appShellTopbarInsetClass, children: topbarContent }) }) : null,
-            /* @__PURE__ */ jsx("main", { className: cn("aui-app-shell-main min-w-0 flex-1", mainClassName), children })
+            topbarContent ? /* @__PURE__ */ jsx5("header", { className: cn("aui-app-shell-topbar-region", appShellTopbarStickyClass), children: /* @__PURE__ */ jsx5("div", { className: appShellTopbarInsetClass, children: topbarContent }) }) : null,
+            /* @__PURE__ */ jsx5("main", { className: cn("aui-app-shell-main min-w-0 flex-1", mainClassName), children })
           ]
         }
       )
@@ -375,7 +1054,7 @@ var AppShell = ({
     setInsetPaddingPx(insetPx);
   }, []);
   const insetExpanded = insetPaddingPx >= SIDEBAR_INSET_PX_EXPANDED;
-  const shellBody = /* @__PURE__ */ jsx(
+  const shellBody = /* @__PURE__ */ jsx5(
     AppShellBody,
     {
       sidebar,
@@ -386,7 +1065,7 @@ var AppShell = ({
       children
     }
   );
-  const tree = /* @__PURE__ */ jsx(ShellInsetProvider, { value: sidebar ? reportShellInset : null, children: /* @__PURE__ */ jsxs(
+  const tree = /* @__PURE__ */ jsx5(ShellInsetProvider, { value: sidebar ? reportShellInset : null, children: /* @__PURE__ */ jsxs4(
     "div",
     {
       className: cn(
@@ -397,7 +1076,7 @@ var AppShell = ({
       children: [
         sidebar,
         shellBody,
-        hasChat && chatOpen ? /* @__PURE__ */ jsx(
+        hasChat && chatOpen ? /* @__PURE__ */ jsx5(
           "div",
           {
             className: floatingPanelClass,
@@ -410,7 +1089,7 @@ var AppShell = ({
             children: chat
           }
         ) : null,
-        hasChat && chatCollapsible && !chatOpen && !hideChatTrigger ? /* @__PURE__ */ jsx(
+        hasChat && chatCollapsible && !chatOpen && !hideChatTrigger ? /* @__PURE__ */ jsx5(
           "button",
           {
             type: "button",
@@ -426,7 +1105,7 @@ var AppShell = ({
   if (!hasChat) {
     return tree;
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx5(
     AppShellChatProvider,
     {
       value: {
@@ -441,24 +1120,24 @@ var AppShell = ({
 };
 
 // src/app/layout/AppShellTopbar.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var AppShellTopbar = ({
   start,
   actions,
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsxs2("div", { className: cn("aui-app-shell-topbar", appShellTopbarRowClass, className), children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: cn("aui-app-shell-topbar", appShellTopbarRowClass, className), children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
       start,
       children
     ] }),
-    actions ? /* @__PURE__ */ jsx2("div", { className: "aui-app-shell-topbar-actions flex shrink-0 items-center gap-2", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx6("div", { className: "aui-app-shell-topbar-actions flex shrink-0 items-center gap-2", children: actions }) : null
   ] });
 };
 
 // src/app/layout/AppShellChatTrigger.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var floatingPositionClass = "fixed bottom-6 right-6 z-50 max-sm:bottom-4 max-sm:right-4";
 var AppShellChatTrigger = ({
   className,
@@ -467,7 +1146,7 @@ var AppShellChatTrigger = ({
 }) => {
   const shellChat = useAppShellChat();
   if (!shellChat || shellChat.open) return null;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx7(
     TimbalV2Button,
     {
       type: "button",
@@ -487,61 +1166,61 @@ var AppShellChatTrigger = ({
 };
 
 // src/app/layout/PageHeader.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var PageHeader = ({
   title,
   description,
   actions,
   className
 }) => {
-  return /* @__PURE__ */ jsxs3("header", { className: cn("aui-app-page-header", appPageHeaderClass, className), children: [
-    /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx4("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }),
-      description ? /* @__PURE__ */ jsx4("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+  return /* @__PURE__ */ jsxs6("header", { className: cn("aui-app-page-header", appPageHeaderClass, className), children: [
+    /* @__PURE__ */ jsxs6("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx8("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }),
+      description ? /* @__PURE__ */ jsx8("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
     ] }),
-    actions ? /* @__PURE__ */ jsx4("div", { className: "aui-app-page-header-actions flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx8("div", { className: "aui-app-page-header-actions flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
   ] });
 };
 
 // src/app/layout/Page.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var Page = ({
   children,
   breadcrumbs,
   className,
   ...headerProps
 }) => {
-  return /* @__PURE__ */ jsxs4("div", { className: cn("aui-app-page", appPageColumnClass, className), children: [
+  return /* @__PURE__ */ jsxs7("div", { className: cn("aui-app-page", appPageColumnClass, className), children: [
     breadcrumbs,
-    /* @__PURE__ */ jsx5(PageHeader, { ...headerProps }),
+    /* @__PURE__ */ jsx9(PageHeader, { ...headerProps }),
     children
   ] });
 };
 
 // src/app/layout/Section.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var Section = ({
   title,
   description,
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsxs5("section", { className: cn("aui-app-section", appSectionClass, className), children: [
-    title ? /* @__PURE__ */ jsx6("h2", { className: appSectionTitleClass, children: title }) : null,
-    description ? /* @__PURE__ */ jsx6("p", { className: appSectionDescriptionClass, children: description }) : null,
+  return /* @__PURE__ */ jsxs8("section", { className: cn("aui-app-section", appSectionClass, className), children: [
+    title ? /* @__PURE__ */ jsx10("h2", { className: appSectionTitleClass, children: title }) : null,
+    description ? /* @__PURE__ */ jsx10("p", { className: appSectionDescriptionClass, children: description }) : null,
     children
   ] });
 };
 
 // src/app/copilot/app-copilot-context.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var AppCopilotContext = createContext2(null);
 var AppCopilotProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ jsx7(AppCopilotContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx11(AppCopilotContext.Provider, { value, children });
 };
 function useAppCopilotContext() {
   return useContext2(AppCopilotContext) ?? {};
@@ -549,7 +1228,7 @@ function useAppCopilotContext() {
 
 // src/app/chat/AppChatPanel.tsx
 import { XIcon } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "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"
@@ -594,18 +1273,18 @@ var AppChatPanel = ({
   ...rest
 }) => {
   const shellChat = useAppShellChat();
-  return /* @__PURE__ */ jsxs6("div", { className: cn(shellClass, className), children: [
-    shellChat?.collapsible ? /* @__PURE__ */ jsx8("div", { className: chromeClass, children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs9("div", { className: cn(shellClass, className), children: [
+    shellChat?.collapsible ? /* @__PURE__ */ jsx12("div", { className: chromeClass, children: /* @__PURE__ */ jsx12(
       "button",
       {
         type: "button",
         className: closeButtonClass,
         onClick: () => shellChat.setOpen(false),
         "aria-label": "Close assistant",
-        children: /* @__PURE__ */ jsx8(XIcon, { className: "size-4", "aria-hidden": true })
+        children: /* @__PURE__ */ jsx12(XIcon, { className: "size-4", "aria-hidden": true })
       }
     ) }) : null,
-    /* @__PURE__ */ jsx8("div", { className: bodyClass, children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx12("div", { className: bodyClass, children: /* @__PURE__ */ jsx12(
       TimbalRuntimeProvider,
       {
         workforceId,
@@ -615,7 +1294,7 @@ var AppChatPanel = ({
         attachmentsUploadUrl,
         attachmentsAccept,
         debug,
-        children: /* @__PURE__ */ jsx8(
+        children: /* @__PURE__ */ jsx12(
           Thread,
           {
             variant: "panel",
@@ -636,38 +1315,38 @@ var AppChatPanel = ({
 };
 
 // src/app/surfaces/SurfaceCard.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var SurfaceCard = ({ children, className }) => {
-  return /* @__PURE__ */ jsx9("div", { className: cn("aui-app-surface-card", appSurfaceCardClass, className), children });
+  return /* @__PURE__ */ jsx13("div", { className: cn("aui-app-surface-card", appSurfaceCardClass, className), children });
 };
 
 // src/app/surfaces/StatTile.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var StatTile = ({ label, value, hint, className }) => {
-  return /* @__PURE__ */ jsxs7("div", { className: cn("aui-app-stat-tile", appStatTileClass, className), children: [
-    /* @__PURE__ */ jsx10("span", { className: appStatLabelClass, children: label }),
-    /* @__PURE__ */ jsx10("span", { className: appStatValueClass, children: value }),
-    hint ? /* @__PURE__ */ jsx10("span", { className: "text-xs text-muted-foreground", children: hint }) : null
+  return /* @__PURE__ */ jsxs10("div", { className: cn("aui-app-stat-tile", appStatTileClass, className), children: [
+    /* @__PURE__ */ jsx14("span", { className: appStatLabelClass, children: label }),
+    /* @__PURE__ */ jsx14("span", { className: appStatValueClass, children: value }),
+    hint ? /* @__PURE__ */ jsx14("span", { className: "text-xs text-muted-foreground", children: hint }) : null
   ] });
 };
 
 // src/app/surfaces/EmptyState.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var EmptyState = ({
   title,
   description,
   action,
   className
 }) => {
-  return /* @__PURE__ */ jsxs8("div", { className: cn("aui-app-empty-state", appEmptyStateClass, className), children: [
-    /* @__PURE__ */ jsx11("p", { className: appEmptyStateTitleClass, children: title }),
-    description ? /* @__PURE__ */ jsx11("p", { className: appEmptyStateDescriptionClass, children: description }) : null,
+  return /* @__PURE__ */ jsxs11("div", { className: cn("aui-app-empty-state", appEmptyStateClass, className), children: [
+    /* @__PURE__ */ jsx15("p", { className: appEmptyStateTitleClass, children: title }),
+    description ? /* @__PURE__ */ jsx15("p", { className: appEmptyStateDescriptionClass, children: description }) : null,
     action
   ] });
 };
 
 // src/app/surfaces/StatusBadge.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var statusBadgeToneClass = {
   default: "bg-muted text-foreground",
   primary: "bg-primary/10 text-primary",
@@ -680,7 +1359,7 @@ var StatusBadge = ({
   tone = "default",
   className
 }) => {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx16(
     "span",
     {
       className: cn(
@@ -694,7 +1373,7 @@ var StatusBadge = ({
 };
 
 // src/app/surfaces/AppConfirmDialog.tsx
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "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";
@@ -709,15 +1388,15 @@ var AppConfirmDialog = ({
   destructive = false,
   className
 }) => {
-  return /* @__PURE__ */ jsx13(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx17(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx17(
     DialogContent,
     {
       className: cn("gap-0 p-0 sm:max-w-md", className),
-      children: /* @__PURE__ */ jsxs9("div", { className: bodyClass2, children: [
-        /* @__PURE__ */ jsx13(DialogTitle, { className: titleClass, children: title }),
-        description ? /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: description }) : null,
-        /* @__PURE__ */ jsxs9("div", { className: actionsClass, children: [
-          /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsxs12("div", { className: bodyClass2, children: [
+        /* @__PURE__ */ jsx17(DialogTitle, { className: titleClass, children: title }),
+        description ? /* @__PURE__ */ jsx17("p", { className: "text-sm text-muted-foreground", children: description }) : null,
+        /* @__PURE__ */ jsxs12("div", { className: actionsClass, children: [
+          /* @__PURE__ */ jsx17(
             TimbalV2Button,
             {
               type: "button",
@@ -727,7 +1406,7 @@ var AppConfirmDialog = ({
               children: cancelLabel
             }
           ),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx17(
             TimbalV2Button,
             {
               type: "button",
@@ -747,7 +1426,7 @@ var AppConfirmDialog = ({
 };
 
 // src/app/surfaces/InfoCard.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var toneClass = {
   neutral: "border-border bg-muted/40",
   info: "border-primary/25 bg-primary/5",
@@ -762,7 +1441,7 @@ var InfoCard = ({
   action,
   tone = "neutral",
   className
-}) => /* @__PURE__ */ jsxs10(
+}) => /* @__PURE__ */ jsxs13(
   "div",
   {
     className: cn(
@@ -771,18 +1450,18 @@ var InfoCard = ({
       className
     ),
     children: [
-      icon ? /* @__PURE__ */ jsx14("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: icon }) : null,
-      /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
-        title ? /* @__PURE__ */ jsx14("p", { className: "text-sm font-medium text-foreground", children: title }) : null,
-        children ? /* @__PURE__ */ jsx14("div", { className: cn("text-sm text-muted-foreground", title && "mt-1"), children }) : null
+      icon ? /* @__PURE__ */ jsx18("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: icon }) : null,
+      /* @__PURE__ */ jsxs13("div", { className: "min-w-0 flex-1", children: [
+        title ? /* @__PURE__ */ jsx18("p", { className: "text-sm font-medium text-foreground", children: title }) : null,
+        children ? /* @__PURE__ */ jsx18("div", { className: cn("text-sm text-muted-foreground", title && "mt-1"), children }) : null
       ] }),
-      action ? /* @__PURE__ */ jsx14("div", { className: "shrink-0", children: action }) : null
+      action ? /* @__PURE__ */ jsx18("div", { className: "shrink-0", children: action }) : null
     ]
   }
 );
 
 // src/app/surfaces/StatusDot.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var dotClass = {
   online: "bg-emerald-500",
   busy: "bg-amber-500",
@@ -795,9 +1474,9 @@ var StatusDot = ({
   label,
   pulse = false,
   className
-}) => /* @__PURE__ */ jsxs11("span", { className: cn("inline-flex items-center gap-1.5", className), children: [
-  /* @__PURE__ */ jsxs11("span", { className: "relative flex size-2", children: [
-    pulse ? /* @__PURE__ */ jsx15(
+}) => /* @__PURE__ */ jsxs14("span", { className: cn("inline-flex items-center gap-1.5", className), children: [
+  /* @__PURE__ */ jsxs14("span", { className: "relative flex size-2", children: [
+    pulse ? /* @__PURE__ */ jsx19(
       "span",
       {
         className: cn(
@@ -806,25 +1485,25 @@ var StatusDot = ({
         )
       }
     ) : null,
-    /* @__PURE__ */ jsx15("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[tone]) })
+    /* @__PURE__ */ jsx19("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[tone]) })
   ] }),
-  label ? /* @__PURE__ */ jsx15("span", { className: "text-xs text-muted-foreground", children: label }) : null
+  label ? /* @__PURE__ */ jsx19("span", { className: "text-xs text-muted-foreground", children: label }) : null
 ] });
 
 // src/app/surfaces/DescriptionList.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var DescriptionList = ({
   items,
   stacked = false,
   className
-}) => /* @__PURE__ */ jsx16(
+}) => /* @__PURE__ */ jsx20(
   "dl",
   {
     className: cn(
       "divide-y divide-border rounded-xl border border-border bg-card",
       className
     ),
-    children: items.map((item, i) => /* @__PURE__ */ jsxs12(
+    children: items.map((item, i) => /* @__PURE__ */ jsxs15(
       "div",
       {
         className: cn(
@@ -832,8 +1511,8 @@ var DescriptionList = ({
           stacked ? "flex flex-col gap-0.5" : "flex items-center justify-between gap-4"
         ),
         children: [
-          /* @__PURE__ */ jsx16("dt", { className: "text-sm text-muted-foreground", children: item.label }),
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx20("dt", { className: "text-sm text-muted-foreground", children: item.label }),
+          /* @__PURE__ */ jsx20(
             "dd",
             {
               className: cn(
@@ -853,8 +1532,8 @@ var DescriptionList = ({
 // src/app/surfaces/ExpandableSection.tsx
 import { useId, useState as useState2 } from "react";
 import { AnimatePresence, motion as motion2, useReducedMotion as useReducedMotion2 } from "motion/react";
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
-var Chevron = ({ open }) => /* @__PURE__ */ jsx17(
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+var Chevron = ({ open }) => /* @__PURE__ */ jsx21(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -868,7 +1547,7 @@ var Chevron = ({ open }) => /* @__PURE__ */ jsx17(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": true,
-    children: /* @__PURE__ */ jsx17("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ jsx21("path", { d: "m6 9 6 6 6-6" })
   }
 );
 var ExpandableSection = ({
@@ -889,8 +1568,8 @@ var ExpandableSection = ({
     if (openProp == null) setInternalOpen((o) => !o);
     onOpenChange?.(!open);
   };
-  return /* @__PURE__ */ jsxs13("div", { className: cn("border-b border-border last:border-0", className), children: [
-    /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs16("div", { className: cn("border-b border-border last:border-0", className), children: [
+    /* @__PURE__ */ jsxs16(
       "button",
       {
         type: "button",
@@ -899,16 +1578,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__ */ jsxs13("span", { className: "flex min-w-0 items-center gap-3", children: [
-            icon ? /* @__PURE__ */ jsx17("span", { className: "flex size-8 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground", children: icon }) : null,
-            /* @__PURE__ */ jsx17("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
-            count != null ? /* @__PURE__ */ jsx17("span", { className: "rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: count }) : null
+          /* @__PURE__ */ jsxs16("span", { className: "flex min-w-0 items-center gap-3", children: [
+            icon ? /* @__PURE__ */ jsx21("span", { className: "flex size-8 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground", children: icon }) : null,
+            /* @__PURE__ */ jsx21("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
+            count != null ? /* @__PURE__ */ jsx21("span", { className: "rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: count }) : null
           ] }),
-          /* @__PURE__ */ jsx17(Chevron, { open })
+          /* @__PURE__ */ jsx21(Chevron, { open })
         ]
       }
     ),
-    /* @__PURE__ */ jsx17(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx21(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsx21(
       motion2.div,
       {
         id: panelId,
@@ -917,7 +1596,7 @@ var ExpandableSection = ({
         exit: reduceMotion ? void 0 : { height: 0, opacity: 0 },
         transition: { duration: 0.2, ease: "easeOut" },
         className: "overflow-hidden",
-        children: /* @__PURE__ */ jsx17("div", { className: "bg-muted/20", children })
+        children: /* @__PURE__ */ jsx21("div", { className: "bg-muted/20", children })
       },
       "body"
     ) : null })
@@ -925,7 +1604,7 @@ var ExpandableSection = ({
 };
 
 // src/app/surfaces/ResourceCard.tsx
-import { Fragment, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs17 } from "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
@@ -950,35 +1629,35 @@ var ResourceCard = ({
   ariaLabel,
   className
 }) => {
-  const body = /* @__PURE__ */ jsxs14(Fragment, { children: [
-    /* @__PURE__ */ jsxs14("div", { className: "flex items-start gap-3", children: [
-      media ? /* @__PURE__ */ jsx18("span", { className: mediaShellClass, children: media }) : null,
-      /* @__PURE__ */ jsxs14("div", { className: "min-w-0 flex-1 pt-0.5", children: [
-        /* @__PURE__ */ jsx18("p", { className: "truncate text-sm font-normal leading-snug text-foreground", children: title }),
-        subtitle ? /* @__PURE__ */ jsx18("p", { className: "mt-1 line-clamp-2 text-xs font-normal text-muted-foreground", children: subtitle }) : null
+  const body = /* @__PURE__ */ jsxs17(Fragment2, { children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex items-start gap-3", children: [
+      media ? /* @__PURE__ */ jsx22("span", { className: mediaShellClass, children: media }) : null,
+      /* @__PURE__ */ jsxs17("div", { className: "min-w-0 flex-1 pt-0.5", children: [
+        /* @__PURE__ */ jsx22("p", { className: "truncate text-sm font-normal leading-snug text-foreground", children: title }),
+        subtitle ? /* @__PURE__ */ jsx22("p", { className: "mt-1 line-clamp-2 text-xs font-normal text-muted-foreground", children: subtitle }) : null
       ] }),
-      badge ? /* @__PURE__ */ jsx18("span", { className: "shrink-0 pt-0.5", children: badge }) : null
+      badge ? /* @__PURE__ */ jsx22("span", { className: "shrink-0 pt-0.5", children: badge }) : null
     ] }),
-    footer || action ? /* @__PURE__ */ jsxs14("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__ */ jsx18("span", { className: "min-w-0 truncate", children: footer }),
-      action ? /* @__PURE__ */ jsx18("span", { className: "shrink-0 opacity-80", children: action }) : null
+    footer || action ? /* @__PURE__ */ jsxs17("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__ */ jsx22("span", { className: "min-w-0 truncate", children: footer }),
+      action ? /* @__PURE__ */ jsx22("span", { className: "shrink-0 opacity-80", children: action }) : null
     ] }) : null
   ] });
   if (onClick) {
-    return /* @__PURE__ */ jsx18("button", { type: "button", onClick, "aria-label": ariaLabel, className: cn(resourceCardInteractiveClass, className), children: body });
+    return /* @__PURE__ */ jsx22("button", { type: "button", onClick, "aria-label": ariaLabel, className: cn(resourceCardInteractiveClass, className), children: body });
   }
-  return /* @__PURE__ */ jsx18("article", { className: cn(resourceCardShellClass, className), children: body });
+  return /* @__PURE__ */ jsx22("article", { className: cn(resourceCardShellClass, className), children: body });
 };
 
 // src/app/settings/SettingsSection.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var SettingsSectionHeader = ({
   title,
   description,
   className
-}) => /* @__PURE__ */ jsxs15("div", { className: cn("flex flex-col", className), children: [
-  /* @__PURE__ */ jsx19("h3", { className: "text-[17px] font-medium leading-tight text-foreground", children: title }),
-  description ? /* @__PURE__ */ jsx19("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+}) => /* @__PURE__ */ jsxs18("div", { className: cn("flex flex-col", className), children: [
+  /* @__PURE__ */ jsx23("h3", { className: "text-[17px] font-medium leading-tight text-foreground", children: title }),
+  description ? /* @__PURE__ */ jsx23("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
 ] });
 var SettingsSection = ({
   title,
@@ -987,7 +1666,7 @@ var SettingsSection = ({
   children,
   noBorderTop = false,
   className
-}) => /* @__PURE__ */ jsxs15(
+}) => /* @__PURE__ */ jsxs18(
   "section",
   {
     className: cn(
@@ -996,18 +1675,18 @@ var SettingsSection = ({
       className
     ),
     children: [
-      /* @__PURE__ */ jsxs15("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx19("h2", { className: "text-sm font-medium text-foreground", children: title }),
-        description ? /* @__PURE__ */ jsx19("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null,
-        descriptionFooter ? /* @__PURE__ */ jsx19("div", { className: "mt-3 min-w-0", children: descriptionFooter }) : null
+      /* @__PURE__ */ jsxs18("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx23("h2", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx23("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null,
+        descriptionFooter ? /* @__PURE__ */ jsx23("div", { className: "mt-3 min-w-0", children: descriptionFooter }) : null
       ] }),
-      /* @__PURE__ */ jsx19("div", { className: "min-w-0 space-y-3", children })
+      /* @__PURE__ */ jsx23("div", { className: "min-w-0 space-y-3", children })
     ]
   }
 );
 
 // src/app/settings/FieldRow.tsx
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var FieldRow = ({
   label,
   children,
@@ -1017,7 +1696,7 @@ var FieldRow = ({
   className
 }) => {
   if (inline) {
-    return /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsxs19(
       "div",
       {
         className: cn(
@@ -1025,8 +1704,8 @@ var FieldRow = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsxs16("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsxs19("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx24(
               "label",
               {
                 htmlFor,
@@ -1034,17 +1713,17 @@ var FieldRow = ({
                 children: label
               }
             ),
-            description ? /* @__PURE__ */ jsx20("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
+            description ? /* @__PURE__ */ jsx24("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
           ] }),
-          /* @__PURE__ */ jsx20("div", { className: "shrink-0", children })
+          /* @__PURE__ */ jsx24("div", { className: "shrink-0", children })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs16("div", { className: cn("flex flex-col gap-1.5", className), children: [
-    /* @__PURE__ */ jsx20("label", { htmlFor, className: "text-sm font-medium text-foreground", children: label }),
+  return /* @__PURE__ */ jsxs19("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsx24("label", { htmlFor, className: "text-sm font-medium text-foreground", children: label }),
     children,
-    description ? /* @__PURE__ */ jsx20("p", { className: "text-xs text-muted-foreground", children: description }) : null
+    description ? /* @__PURE__ */ jsx24("p", { className: "text-xs text-muted-foreground", children: description }) : null
   ] });
 };
 
@@ -1052,7 +1731,7 @@ var FieldRow = ({
 import { useEffect, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 import { AnimatePresence as AnimatePresence2, motion as motion3, useReducedMotion as useReducedMotion3 } from "motion/react";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var FloatingUnsavedChangesBar = ({
   visible,
   message = "Unsaved changes",
@@ -1070,7 +1749,7 @@ var FloatingUnsavedChangesBar = ({
   useEffect(() => setMounted(true), []);
   if (!mounted || typeof document === "undefined") return null;
   return createPortal(
-    /* @__PURE__ */ jsx21(AnimatePresence2, { children: visible ? /* @__PURE__ */ jsx21("div", { className: "pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center px-4", children: /* @__PURE__ */ jsxs17(
+    /* @__PURE__ */ jsx25(AnimatePresence2, { children: visible ? /* @__PURE__ */ jsx25("div", { className: "pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center px-4", children: /* @__PURE__ */ jsxs20(
       motion3.div,
       {
         role: "region",
@@ -1084,10 +1763,10 @@ var FloatingUnsavedChangesBar = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx21("span", { className: "text-sm text-muted-foreground", children: message }),
-          /* @__PURE__ */ jsxs17("span", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx21(Button, { variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSaving, children: discardLabel }),
-            /* @__PURE__ */ jsx21(Button, { size: "sm", onClick: onSave, disabled: saveDisabled || isSaving, children: isSaving ? "Saving\u2026" : saveLabel })
+          /* @__PURE__ */ jsx25("span", { className: "text-sm text-muted-foreground", children: message }),
+          /* @__PURE__ */ jsxs20("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx25(Button, { variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSaving, children: discardLabel }),
+            /* @__PURE__ */ jsx25(Button, { size: "sm", onClick: onSave, disabled: saveDisabled || isSaving, children: isSaving ? "Saving\u2026" : saveLabel })
           ] })
         ]
       }
@@ -1097,13 +1776,13 @@ var FloatingUnsavedChangesBar = ({
 };
 
 // src/app/settings/DangerZone.tsx
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 var DangerZoneAction = ({
   title,
   description,
   action,
   className
-}) => /* @__PURE__ */ jsxs18(
+}) => /* @__PURE__ */ jsxs21(
   "div",
   {
     className: cn(
@@ -1111,11 +1790,11 @@ var DangerZoneAction = ({
       className
     ),
     children: [
-      /* @__PURE__ */ jsxs18("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx22("p", { className: "text-sm font-medium text-foreground", children: title }),
-        description ? /* @__PURE__ */ jsx22("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+      /* @__PURE__ */ jsxs21("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx26("p", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx26("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
       ] }),
-      /* @__PURE__ */ jsx22("div", { className: "shrink-0", children: action })
+      /* @__PURE__ */ jsx26("div", { className: "shrink-0", children: action })
     ]
   }
 );
@@ -1124,7 +1803,7 @@ var DangerZone = ({
   description,
   children,
   className
-}) => /* @__PURE__ */ jsxs18(
+}) => /* @__PURE__ */ jsxs21(
   "section",
   {
     className: cn(
@@ -1132,18 +1811,18 @@ var DangerZone = ({
       className
     ),
     children: [
-      (title || description) && /* @__PURE__ */ jsxs18("header", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-3", children: [
-        title ? /* @__PURE__ */ jsx22("h3", { className: "text-sm font-semibold text-destructive", children: title }) : null,
-        description ? /* @__PURE__ */ jsx22("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+      (title || description) && /* @__PURE__ */ jsxs21("header", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-3", children: [
+        title ? /* @__PURE__ */ jsx26("h3", { className: "text-sm font-semibold text-destructive", children: title }) : null,
+        description ? /* @__PURE__ */ jsx26("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
       ] }),
-      /* @__PURE__ */ jsx22("div", { className: "divide-y divide-border bg-card", children })
+      /* @__PURE__ */ jsx26("div", { className: "divide-y divide-border bg-card", children })
     ]
   }
 );
 
 // src/app/integrations/IntegrationCard.tsx
 import { useId as useId2 } from "react";
-import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 var INTEGRATION_CATALOG_CARD_HEIGHT_CLASS = "h-[12.25rem] min-h-[12.25rem] max-h-[12.25rem]";
 var statusLabel = {
   available: null,
@@ -1184,12 +1863,12 @@ var IntegrationCard = ({
   const titleId = useId2();
   const locked = status === "locked";
   const dimmed = status === "disabled" || locked;
-  const body = /* @__PURE__ */ jsxs19("div", { className: "flex h-full min-h-0 flex-col", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex shrink-0 items-start gap-3 pr-2", children: [
-      logo ? /* @__PURE__ */ jsx23("span", { className: logoShellClass, "aria-hidden": Boolean(ariaLabel), children: logo }) : null,
-      /* @__PURE__ */ jsx23("div", { className: "min-w-0 flex-1 pt-0.5", children: /* @__PURE__ */ jsxs19("div", { className: "flex items-start justify-between gap-2", children: [
-        /* @__PURE__ */ jsxs19("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx23(
+  const body = /* @__PURE__ */ jsxs22("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex shrink-0 items-start gap-3 pr-2", children: [
+      logo ? /* @__PURE__ */ jsx27("span", { className: logoShellClass, "aria-hidden": Boolean(ariaLabel), children: logo }) : null,
+      /* @__PURE__ */ jsx27("div", { className: "min-w-0 flex-1 pt-0.5", children: /* @__PURE__ */ jsxs22("div", { className: "flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs22("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx27(
             "h4",
             {
               id: onClick && !action ? void 0 : titleId,
@@ -1197,12 +1876,12 @@ var IntegrationCard = ({
               children: name
             }
           ),
-          statusLabel[status] ? /* @__PURE__ */ jsx23("p", { className: "mt-0.5 text-xs text-muted-foreground", children: statusLabel[status] }) : null
+          statusLabel[status] ? /* @__PURE__ */ jsx27("p", { className: "mt-0.5 text-xs text-muted-foreground", children: statusLabel[status] }) : null
         ] }),
-        badge ? /* @__PURE__ */ jsx23("span", { className: "shrink-0", children: badge }) : null
+        badge ? /* @__PURE__ */ jsx27("span", { className: "shrink-0", children: badge }) : null
       ] }) })
     ] }),
-    description ? /* @__PURE__ */ jsx23(
+    description ? /* @__PURE__ */ jsx27(
       "p",
       {
         className: cn(
@@ -1212,9 +1891,9 @@ var IntegrationCard = ({
         children: description
       }
     ) : null,
-    action ? /* @__PURE__ */ jsxs19(Fragment2, { children: [
-      /* @__PURE__ */ jsx23("div", { className: "min-h-0 flex-1", "aria-hidden": true }),
-      /* @__PURE__ */ jsx23("div", { className: "relative mt-3 shrink-0", children: action })
+    action ? /* @__PURE__ */ jsxs22(Fragment3, { children: [
+      /* @__PURE__ */ jsx27("div", { className: "min-h-0 flex-1", "aria-hidden": true }),
+      /* @__PURE__ */ jsx27("div", { className: "relative mt-3 shrink-0", children: action })
     ] }) : null
   ] });
   const shellClass3 = cn(
@@ -1224,7 +1903,7 @@ var IntegrationCard = ({
     className
   );
   if (onClick && !action) {
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx27(
       "button",
       {
         type: "button",
@@ -1241,12 +1920,12 @@ var IntegrationCard = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx23("article", { className: shellClass3, "aria-labelledby": titleId, children: body });
+  return /* @__PURE__ */ jsx27("article", { className: shellClass3, "aria-labelledby": titleId, children: body });
 };
 
 // src/app/integrations/IntegrationsEmptyState.tsx
 import { useId as useId3 } from "react";
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 var IntegrationsEmptyState = ({
   title = "No integrations yet",
   description = "Connect a provider to start syncing data and powering your workforce.",
@@ -1255,7 +1934,7 @@ var IntegrationsEmptyState = ({
   className
 }) => {
   const titleId = useId3();
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs23(
     "section",
     {
       className: cn(
@@ -1265,7 +1944,7 @@ var IntegrationsEmptyState = ({
       ),
       "aria-labelledby": titleId,
       children: [
-        icon ? /* @__PURE__ */ jsx24(
+        icon ? /* @__PURE__ */ jsx28(
           "span",
           {
             className: cn(
@@ -1277,21 +1956,21 @@ var IntegrationsEmptyState = ({
             children: icon
           }
         ) : null,
-        /* @__PURE__ */ jsx24("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }),
-        description ? /* @__PURE__ */ jsx24("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }) : null,
-        action ? /* @__PURE__ */ jsx24("div", { className: "mt-1", children: action }) : null
+        /* @__PURE__ */ jsx28("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx28("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }) : null,
+        action ? /* @__PURE__ */ jsx28("div", { className: "mt-1", children: action }) : null
       ]
     }
   );
 };
 
 // src/app/integrations/PlanBadge.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "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__ */ jsx25("span", { className: cn(planBadgeClass, className), children });
+var PlanBadge = ({ children, className }) => /* @__PURE__ */ jsx29("span", { className: cn(planBadgeClass, className), children });
 
 // src/app/integrations/ConnectionRow.tsx
-import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
 var logoShellClass2 = cn(
   "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg",
   TIMBAL_V2_LOGO_TILE
@@ -1306,14 +1985,14 @@ var ConnectionRow = ({
   ariaLabel,
   className
 }) => {
-  const inner = /* @__PURE__ */ jsxs21(Fragment3, { children: [
-    logo ? /* @__PURE__ */ jsx26("span", { className: logoShellClass2, children: logo }) : null,
-    /* @__PURE__ */ jsxs21("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx26("p", { className: "truncate text-sm font-normal text-foreground", children: name }),
-      meta ? /* @__PURE__ */ jsx26("p", { className: "truncate text-xs text-muted-foreground", children: meta }) : null
+  const inner = /* @__PURE__ */ jsxs24(Fragment4, { children: [
+    logo ? /* @__PURE__ */ jsx30("span", { className: logoShellClass2, children: logo }) : null,
+    /* @__PURE__ */ jsxs24("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx30("p", { className: "truncate text-sm font-normal text-foreground", children: name }),
+      meta ? /* @__PURE__ */ jsx30("p", { className: "truncate text-xs text-muted-foreground", children: meta }) : null
     ] }),
-    badge ? /* @__PURE__ */ jsx26("span", { className: "shrink-0", children: badge }) : null,
-    action ? /* @__PURE__ */ jsx26("span", { className: "shrink-0", children: action }) : null
+    badge ? /* @__PURE__ */ jsx30("span", { className: "shrink-0", children: badge }) : null,
+    action ? /* @__PURE__ */ jsx30("span", { className: "shrink-0", children: action }) : null
   ] });
   const rowClass2 = cn(
     "flex w-full items-center gap-3 px-4 py-3 text-left",
@@ -1321,7 +2000,7 @@ var ConnectionRow = ({
     className
   );
   if (onClick) {
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx30(
       "button",
       {
         type: "button",
@@ -1333,7 +2012,7 @@ var ConnectionRow = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx26("div", { role: "listitem", className: rowClass2, children: inner });
+  return /* @__PURE__ */ jsx30("div", { role: "listitem", className: rowClass2, children: inner });
 };
 var connectionRowListClass = cn(
   "overflow-hidden rounded-2xl",
@@ -1341,12 +2020,12 @@ var connectionRowListClass = cn(
 );
 
 // src/app/integrations/ConnectionRowList.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var ConnectionRowList = ({
   children,
   "aria-label": ariaLabel = "Connected integrations",
   className
-}) => /* @__PURE__ */ jsx27(
+}) => /* @__PURE__ */ jsx31(
   "div",
   {
     role: "list",
@@ -1357,7 +2036,7 @@ var ConnectionRowList = ({
 );
 
 // src/app/navigation/SubNav.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var SubNav = ({
   items,
   activeId,
@@ -1366,7 +2045,7 @@ var SubNav = ({
   "aria-label": ariaLabel = "Section navigation",
   layoutId
 }) => {
-  return /* @__PURE__ */ jsx28("nav", { className: cn("aui-app-sub-nav", className), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx32("nav", { className: cn("aui-app-sub-nav", className), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx32(
     PillSegmentedTabs,
     {
       value: activeId,
@@ -1380,13 +2059,13 @@ var SubNav = ({
 };
 
 // src/app/navigation/Breadcrumbs.tsx
-import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
 var Breadcrumbs = ({ items, className }) => {
-  return /* @__PURE__ */ jsx29("nav", { className: cn("aui-app-breadcrumbs", appBreadcrumbsClass, className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx29("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx33("nav", { className: cn("aui-app-breadcrumbs", appBreadcrumbsClass, className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx33("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ jsxs22("li", { className: "inline-flex items-center gap-1.5", children: [
-      index > 0 ? /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground/50", "aria-hidden": true, children: "/" }) : null,
-      isLast ? /* @__PURE__ */ jsx29("span", { className: "text-foreground", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx29("a", { href: item.href, className: appBreadcrumbLinkClass, children: item.label }) : /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsxs25("li", { className: "inline-flex items-center gap-1.5", children: [
+      index > 0 ? /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground/50", "aria-hidden": true, children: "/" }) : null,
+      isLast ? /* @__PURE__ */ jsx33("span", { className: "text-foreground", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx33("a", { href: item.href, className: appBreadcrumbLinkClass, children: item.label }) : /* @__PURE__ */ jsx33(
         "button",
         {
           type: "button",
@@ -1400,7 +2079,7 @@ var Breadcrumbs = ({ items, className }) => {
 };
 
 // src/app/forms/Field.tsx
-import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
 var Field = ({
   label,
   hint,
@@ -1409,11 +2088,11 @@ var Field = ({
   className,
   htmlFor
 }) => {
-  return /* @__PURE__ */ jsxs23("div", { className: cn("aui-app-field", appFieldClass, className), children: [
-    /* @__PURE__ */ jsx30("label", { className: appFieldLabelClass, htmlFor, children: label }),
+  return /* @__PURE__ */ jsxs26("div", { className: cn("aui-app-field", appFieldClass, className), children: [
+    /* @__PURE__ */ jsx34("label", { className: appFieldLabelClass, htmlFor, children: label }),
     children,
-    hint && !error ? /* @__PURE__ */ jsx30("p", { className: appFieldHintClass, children: hint }) : null,
-    error ? /* @__PURE__ */ jsx30("p", { className: "text-xs text-destructive", role: "alert", children: error }) : null
+    hint && !error ? /* @__PURE__ */ jsx34("p", { className: appFieldHintClass, children: hint }) : null,
+    error ? /* @__PURE__ */ jsx34("p", { className: "text-xs text-destructive", role: "alert", children: error }) : null
   ] });
 };
 var FieldInput = ({
@@ -1426,7 +2105,7 @@ var FieldInput = ({
   ...inputProps
 }) => {
   const inputId = id ?? inputProps.name;
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx34(
     Field,
     {
       label,
@@ -1434,7 +2113,7 @@ var FieldInput = ({
       error,
       htmlFor: inputId,
       className: fieldClassName,
-      children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx34(
         "input",
         {
           id: inputId,
@@ -1448,7 +2127,7 @@ var FieldInput = ({
 };
 
 // src/app/forms/FieldTextarea.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var textareaClass = cn(
   appInputClass,
   "min-h-[5.5rem] resize-y py-2.5 leading-relaxed"
@@ -1463,7 +2142,7 @@ var FieldTextarea = ({
   ...props
 }) => {
   const textareaId = id ?? props.name;
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx35(
     Field,
     {
       label,
@@ -1471,7 +2150,7 @@ var FieldTextarea = ({
       error,
       htmlFor: textareaId,
       className: fieldClassName,
-      children: /* @__PURE__ */ jsx31(
+      children: /* @__PURE__ */ jsx35(
         "textarea",
         {
           id: textareaId,
@@ -1486,7 +2165,7 @@ var FieldTextarea = ({
 
 // src/app/forms/FieldSelect.tsx
 import { ChevronDownIcon } from "lucide-react";
-import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
 var selectWrapClass = "relative";
 var selectClass = cn(
   appInputClass,
@@ -1503,7 +2182,7 @@ var FieldSelect = ({
   ...props
 }) => {
   const selectId = id ?? props.name;
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx36(
     Field,
     {
       label,
@@ -1511,8 +2190,8 @@ var FieldSelect = ({
       error,
       htmlFor: selectId,
       className: fieldClassName,
-      children: /* @__PURE__ */ jsxs24("div", { className: selectWrapClass, children: [
-        /* @__PURE__ */ jsx32(
+      children: /* @__PURE__ */ jsxs27("div", { className: selectWrapClass, children: [
+        /* @__PURE__ */ jsx36(
           "select",
           {
             id: selectId,
@@ -1522,7 +2201,7 @@ var FieldSelect = ({
             children
           }
         ),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx36(
           ChevronDownIcon,
           {
             className: "pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground",
@@ -1535,7 +2214,7 @@ var FieldSelect = ({
 };
 
 // src/app/forms/FieldSwitch.tsx
-import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs28 } from "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",
@@ -1556,7 +2235,7 @@ var FieldSwitch = ({
   ...props
 }) => {
   const inputId = id ?? props.name ?? "switch";
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs28(
     "label",
     {
       className: cn(
@@ -1565,8 +2244,8 @@ var FieldSwitch = ({
       ),
       htmlFor: inputId,
       children: [
-        /* @__PURE__ */ jsxs25("span", { className: "relative mt-0.5", children: [
-          /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsxs28("span", { className: "relative mt-0.5", children: [
+          /* @__PURE__ */ jsx37(
             "input",
             {
               id: inputId,
@@ -1576,11 +2255,11 @@ var FieldSwitch = ({
               ...props
             }
           ),
-          /* @__PURE__ */ jsx33("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ jsx33("span", { className: thumbClass }) })
+          /* @__PURE__ */ jsx37("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ jsx37("span", { className: thumbClass }) })
         ] }),
-        /* @__PURE__ */ jsxs25("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsx33("span", { className: "text-sm font-medium text-foreground", children: label }),
-          description ? /* @__PURE__ */ jsx33("span", { className: "text-xs text-muted-foreground", children: description }) : null
+        /* @__PURE__ */ jsxs28("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx37("span", { className: "text-sm font-medium text-foreground", children: label }),
+          description ? /* @__PURE__ */ jsx37("span", { className: "text-xs text-muted-foreground", children: description }) : null
         ] })
       ]
     }
@@ -1589,13 +2268,13 @@ var FieldSwitch = ({
 
 // src/app/forms/SearchInput.tsx
 import { SearchIcon } from "lucide-react";
-import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
 var SearchInput = ({
   className,
   placeholder = "Search\u2026",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs29(
     "label",
     {
       className: cn(
@@ -1604,8 +2283,8 @@ var SearchInput = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx34(SearchIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx38(SearchIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsx38(
           "input",
           {
             type: "search",
@@ -1620,18 +2299,18 @@ var SearchInput = ({
 };
 
 // src/app/forms/FormSection.tsx
-import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
 var FormSection = ({ title, children, className }) => {
-  return /* @__PURE__ */ jsxs27("fieldset", { className: cn("aui-app-form-section", appSectionClass, "border-0 p-0", className), children: [
-    title ? /* @__PURE__ */ jsx35("legend", { className: cn(appSectionTitleClass, "mb-3 px-0"), children: title }) : null,
-    /* @__PURE__ */ jsx35("div", { className: "flex flex-col gap-4", children })
+  return /* @__PURE__ */ jsxs30("fieldset", { className: cn("aui-app-form-section", appSectionClass, "border-0 p-0", className), children: [
+    title ? /* @__PURE__ */ jsx39("legend", { className: cn(appSectionTitleClass, "mb-3 px-0"), children: title }) : null,
+    /* @__PURE__ */ jsx39("div", { className: "flex flex-col gap-4", children })
   ] });
 };
 
 // src/app/data/FilterBar.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var FilterBar = ({ children, className }) => {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       className: cn("aui-app-filter-bar", appFilterBarClass, className),
@@ -1645,7 +2324,7 @@ var FilterBar = ({ children, className }) => {
 // src/app/data/DataTable.tsx
 import { useMemo, useState as useState4 } from "react";
 import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
-import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs31 } from "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";
@@ -1685,12 +2364,12 @@ function SortIndicator({
 }) {
   const iconClass = "size-3.5 shrink-0 opacity-60 group-hover:opacity-100";
   if (!active) {
-    return /* @__PURE__ */ jsx37(ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ jsx41(ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
   }
   if (direction === "desc") {
-    return /* @__PURE__ */ jsx37(ArrowDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ jsx41(ArrowDownIcon, { className: iconClass, "aria-hidden": true });
   }
-  return /* @__PURE__ */ jsx37(ArrowUpIcon, { className: iconClass, "aria-hidden": true });
+  return /* @__PURE__ */ jsx41(ArrowUpIcon, { className: iconClass, "aria-hidden": true });
 }
 function DataTable({
   columns,
@@ -1741,28 +2420,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__ */ jsx37(EmptyState, { title: emptyTitle, description: emptyDescription, className });
+    return /* @__PURE__ */ jsx41(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__ */ jsx37("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ jsx37("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs28("table", { className: tableClass, children: [
-    caption ? /* @__PURE__ */ jsx37("caption", { className: "sr-only", children: caption }) : null,
-    /* @__PURE__ */ jsx37("thead", { className: cn(stickyHeader && stickyHeadClass), children: /* @__PURE__ */ jsx37("tr", { children: columns.map((col) => {
+  return /* @__PURE__ */ jsx41("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ jsx41("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs31("table", { className: tableClass, children: [
+    caption ? /* @__PURE__ */ jsx41("caption", { className: "sr-only", children: caption }) : null,
+    /* @__PURE__ */ jsx41("thead", { className: cn(stickyHeader && stickyHeadClass), children: /* @__PURE__ */ jsx41("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__ */ jsxs28(
+      const headerContent = col.sortable ? /* @__PURE__ */ jsxs31(
         "button",
         {
           type: "button",
           className: sortButtonClass,
           onClick: () => setSort(nextSort(sort, col.id)),
           children: [
-            /* @__PURE__ */ jsx37("span", { className: "truncate", children: col.header }),
-            /* @__PURE__ */ jsx37(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
+            /* @__PURE__ */ jsx41("span", { className: "truncate", children: col.header }),
+            /* @__PURE__ */ jsx41(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
           ]
         }
       ) : col.header;
-      return /* @__PURE__ */ jsx37(
+      return /* @__PURE__ */ jsx41(
         "th",
         {
           scope: "col",
@@ -1778,10 +2457,10 @@ function DataTable({
         col.id
       );
     }) }) }),
-    /* @__PURE__ */ jsx37("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: sortedRows.length === 0 ? /* @__PURE__ */ jsx37("tr", { children: /* @__PURE__ */ jsx37("td", { colSpan: columns.length, className: emptyCellClass, children: /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center gap-1", children: [
-      /* @__PURE__ */ jsx37("p", { className: "font-medium text-foreground", children: emptyTitle }),
-      emptyDescription ? /* @__PURE__ */ jsx37("p", { className: "max-w-sm text-muted-foreground", children: emptyDescription }) : null
-    ] }) }) }) : sortedRows.map((row) => /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx41("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: sortedRows.length === 0 ? /* @__PURE__ */ jsx41("tr", { children: /* @__PURE__ */ jsx41("td", { colSpan: columns.length, className: emptyCellClass, children: /* @__PURE__ */ jsxs31("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ jsx41("p", { className: "font-medium text-foreground", children: emptyTitle }),
+      emptyDescription ? /* @__PURE__ */ jsx41("p", { className: "max-w-sm text-muted-foreground", children: emptyDescription }) : null
+    ] }) }) }) : sortedRows.map((row) => /* @__PURE__ */ jsx41(
       "tr",
       {
         className: rowClass,
@@ -1795,7 +2474,7 @@ function DataTable({
         } : void 0,
         tabIndex: onRowClick ? 0 : void 0,
         role: onRowClick ? "button" : void 0,
-        children: columns.map((col) => /* @__PURE__ */ jsx37(
+        children: columns.map((col) => /* @__PURE__ */ jsx41(
           "td",
           {
             className: cn(
@@ -1811,7 +2490,7 @@ function DataTable({
       },
       getRowKey(row)
     )) }),
-    hasFoot ? /* @__PURE__ */ jsx37("tfoot", { children: /* @__PURE__ */ jsx37("tr", { children: /* @__PURE__ */ jsx37("td", { colSpan: columns.length, className: footCellClass, children: /* @__PURE__ */ jsxs28(
+    hasFoot ? /* @__PURE__ */ jsx41("tfoot", { children: /* @__PURE__ */ jsx41("tr", { children: /* @__PURE__ */ jsx41("td", { colSpan: columns.length, className: footCellClass, children: /* @__PURE__ */ jsxs31(
       "div",
       {
         className: cn(
@@ -1819,7 +2498,7 @@ function DataTable({
           showRowCount && footer ? "justify-between" : "justify-start"
         ),
         children: [
-          showRowCount ? /* @__PURE__ */ jsx37("span", { children: rowCountText }) : null,
+          showRowCount ? /* @__PURE__ */ jsx41("span", { children: rowCountText }) : null,
           footer
         ]
       }
@@ -1829,53 +2508,7 @@ function DataTable({
 
 // src/app/data/ChartPanel.tsx
 import { useId as useId4 } from "react";
-
-// src/app/data/metrics-shared.tsx
-import { jsx as jsx38, jsxs as jsxs29 } from "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__ */ jsxs29("header", { className: metricCardHeaderClass, children: [
-    /* @__PURE__ */ jsxs29("div", { className: "min-w-0", children: [
-      title ? /* @__PURE__ */ jsx38("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }) : null,
-      description ? /* @__PURE__ */ jsx38("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
-    ] }),
-    actions ? /* @__PURE__ */ jsx38("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
-import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
 var ChartPanel = ({
   title,
   description,
@@ -1888,14 +2521,14 @@ var ChartPanel = ({
   const titleId = useId4();
   const resolvedTitle = title ?? artifact?.title;
   const hasHeader = Boolean(resolvedTitle || description || actions);
-  const body = children ?? (artifact ? /* @__PURE__ */ jsx39(ChartArtifactView, { artifact, embedded: true, height }) : null);
-  return /* @__PURE__ */ jsxs30(
+  const body = children ?? (artifact ? /* @__PURE__ */ jsx42(ChartArtifactView, { artifact, embedded: true, height }) : null);
+  return /* @__PURE__ */ jsxs32(
     "section",
     {
       className: cn(metricCardShellClass, "aui-app-chart-panel", className),
       "aria-labelledby": resolvedTitle ? titleId : void 0,
       children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx42(
           MetricCardHeader,
           {
             title: resolvedTitle,
@@ -1904,14 +2537,14 @@ var ChartPanel = ({
             actions
           }
         ),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx42(
           "div",
           {
             className: cn(
               "relative min-h-0 w-full",
               hasHeader ? metricChartPlotRegionClass : "pt-2 pb-3"
             ),
-            children: body ?? /* @__PURE__ */ jsx39(
+            children: body ?? /* @__PURE__ */ jsx42(
               "div",
               {
                 className: "flex items-center justify-center text-sm font-normal text-muted-foreground",
@@ -1927,77 +2560,9 @@ var ChartPanel = ({
   );
 };
 
-// src/app/data/MetricTile.tsx
-import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs31 } from "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__ */ jsxs31(Fragment4, { children: [
-    active ? /* @__PURE__ */ jsx40(
-      "span",
-      {
-        "aria-hidden": true,
-        className: "absolute inset-x-0 bottom-0 h-0.5 bg-foreground dark:bg-white"
-      }
-    ) : null,
-    /* @__PURE__ */ jsx40("span", { className: "text-xs font-normal text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsxs31("span", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs31("span", { className: "flex items-baseline gap-1", children: [
-        /* @__PURE__ */ jsx40("span", { className: "text-2xl font-normal tracking-tight text-foreground tabular-nums", children: value }),
-        unit ? /* @__PURE__ */ jsx40("span", { className: "text-xs font-normal text-muted-foreground", children: unit }) : null
-      ] }),
-      trend ? /* @__PURE__ */ jsx40(
-        "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__ */ jsx40(
-      "button",
-      {
-        type: "button",
-        onClick: onSelect,
-        "aria-pressed": active,
-        "aria-label": ariaLabel,
-        className: cn(metricTileInteractiveClass, divider, className),
-        children: content
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx40("div", { className: cn(metricTileBaseClass, divider, className), children: content });
-};
-
 // src/app/data/MetricRow.tsx
 import { useId as useId5, useState as useState5 } from "react";
-import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 var MetricRow = ({
   title,
   description,
@@ -2019,13 +2584,13 @@ var MetricRow = ({
     if (activeMetricId == null) setInternalId(id);
     onMetricChange?.(id);
   };
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx43(
           MetricCardHeader,
           {
             title,
@@ -2034,7 +2599,7 @@ var MetricRow = ({
             actions
           }
         ),
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx43(
           "div",
           {
             role: selectable ? "group" : void 0,
@@ -2044,7 +2609,7 @@ var MetricRow = ({
               metricTilesGridColsClass(metrics.length),
               (title || description || actions) && "mt-3"
             ),
-            children: metrics.map((m, index) => /* @__PURE__ */ jsx41(
+            children: metrics.map((m, index) => /* @__PURE__ */ jsx43(
               MetricTile,
               {
                 label: m.label,
@@ -2067,7 +2632,7 @@ var MetricRow = ({
 
 // src/app/data/MetricChartCard.tsx
 import { useId as useId6, useState as useState6 } from "react";
-import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var MetricChartCard = ({
   title,
   description,
@@ -2097,13 +2662,13 @@ var MetricChartCard = ({
   };
   const hasHeader = Boolean(title || description || actions);
   const chartAriaLabel = typeof active?.label === "string" ? `${active.label} over time` : "Metric chart";
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx44(
           MetricCardHeader,
           {
             title,
@@ -2112,7 +2677,7 @@ var MetricChartCard = ({
             actions
           }
         ),
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx44(
           "div",
           {
             role: "group",
@@ -2122,7 +2687,7 @@ var MetricChartCard = ({
               metricTilesGridColsClass(metrics.length),
               hasHeader && "mt-3"
             ),
-            children: metrics.map((m, index) => /* @__PURE__ */ jsx42(
+            children: metrics.map((m, index) => /* @__PURE__ */ jsx44(
               MetricTile,
               {
                 label: m.label,
@@ -2138,7 +2703,7 @@ var MetricChartCard = ({
             ))
           }
         ),
-        /* @__PURE__ */ jsx42("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: active?.data && active.data.length > 0 ? /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx44("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: active?.data && active.data.length > 0 ? /* @__PURE__ */ jsx44(
           LineAreaChart,
           {
             data: active.data,
@@ -2158,7 +2723,7 @@ var MetricChartCard = ({
             ariaLabel: chartAriaLabel
           },
           active.id
-        ) : /* @__PURE__ */ jsx42(
+        ) : /* @__PURE__ */ jsx44(
           "div",
           {
             className: "flex w-full items-center justify-center text-sm font-normal text-muted-foreground",
@@ -2174,7 +2739,7 @@ var MetricChartCard = ({
 
 // src/charts/sparkline.tsx
 import { useId as useId7 } from "react";
-import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var Sparkline = ({
   data,
   dataKey = "value",
@@ -2189,7 +2754,7 @@ var Sparkline = ({
   const uid = useId7();
   const values = data.map((d) => typeof d === "number" ? d : toNum(d[dataKey]));
   if (values.length === 0) {
-    return /* @__PURE__ */ jsx43("span", { className: cn("inline-block", className), style: { width, height } });
+    return /* @__PURE__ */ jsx45("span", { className: cn("inline-block", className), style: { width, height } });
   }
   const pad = strokeWidth + 1;
   const min = Math.min(...values);
@@ -2201,7 +2766,7 @@ var Sparkline = ({
     x: pad + (values.length > 1 ? i / (values.length - 1) * innerW : innerW / 2),
     y: pad + innerH - (v - min) / range * innerH
   }));
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "svg",
     {
       width,
@@ -2212,14 +2777,14 @@ var Sparkline = ({
       "aria-label": ariaLabel,
       preserveAspectRatio: "none",
       children: [
-        area && /* @__PURE__ */ jsxs34(Fragment5, { children: [
-          /* @__PURE__ */ jsx43("defs", { children: /* @__PURE__ */ jsxs34("linearGradient", { id: `${uid}-spark`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-            /* @__PURE__ */ jsx43("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
-            /* @__PURE__ */ jsx43("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
+        area && /* @__PURE__ */ jsxs35(Fragment5, { children: [
+          /* @__PURE__ */ jsx45("defs", { children: /* @__PURE__ */ jsxs35("linearGradient", { id: `${uid}-spark`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx45("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
+            /* @__PURE__ */ jsx45("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
           ] }) }),
-          /* @__PURE__ */ jsx43("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
+          /* @__PURE__ */ jsx45("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
         ] }),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx45(
           "path",
           {
             d: monotoneLinePath(points),
@@ -2237,6 +2802,18 @@ var Sparkline = ({
 
 export {
   APP_KIT_AGENT_INSTRUCTIONS,
+  createTimbalTheme,
+  themeToCss,
+  applyTimbalTheme,
+  clearTimbalTheme,
+  TIMBAL_THEME_PRESETS,
+  getThemePreset,
+  applyThemePreset,
+  getStoredThemePreset,
+  THEME_AGENT_INSTRUCTIONS,
+  TimbalThemeStyle,
+  MetricTile,
+  ThemePresetGallery,
   appPageColumnClass,
   appShellTopbarInsetClass,
   appShellInsetTopClass,
@@ -2289,7 +2866,6 @@ export {
   FilterBar,
   DataTable,
   ChartPanel,
-  MetricTile,
   MetricRow,
   MetricChartCard,
   Sparkline