@timbal-ai/timbal-react 0.8.1 → 0.8.2

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

@@ -359,6 +359,38 @@ function relativeLuminance(color) {
 }
 
 // src/design/theme.ts
+var SHADOW_PRESETS = {
+  none: {
+    lightCard: "none",
+    lightElevated: "none",
+    darkCard: "none",
+    darkElevated: "none"
+  },
+  hairline: {
+    lightCard: "0 0 0 1px rgba(15, 23, 42, 0.06)",
+    lightElevated: "0 1px 2px rgba(15, 23, 42, 0.06)",
+    darkCard: "0 0 0 1px rgba(255, 255, 255, 0.06)",
+    darkElevated: "0 2px 8px rgba(0, 0, 0, 0.4)"
+  },
+  soft: {
+    lightCard: "0 1px 2px rgba(15, 23, 42, 0.04)",
+    lightElevated: "0 8px 30px rgba(15, 23, 42, 0.07)",
+    darkCard: "0 1px 2px rgba(0, 0, 0, 0.3)",
+    darkElevated: "0 10px 34px rgba(0, 0, 0, 0.45)"
+  },
+  medium: {
+    lightCard: "0 1px 2px -0.5px rgba(0, 0, 0, 0.05)",
+    lightElevated: "0 4px 24px rgba(0, 0, 0, 0.06)",
+    darkCard: "0 1px 3px rgba(0, 0, 0, 0.22)",
+    darkElevated: "0 4px 24px rgba(0, 0, 0, 0.35)"
+  },
+  strong: {
+    lightCard: "0 2px 6px rgba(15, 23, 42, 0.10)",
+    lightElevated: "0 16px 48px rgba(15, 23, 42, 0.16)",
+    darkCard: "0 2px 6px rgba(0, 0, 0, 0.4)",
+    darkElevated: "0 18px 50px rgba(0, 0, 0, 0.6)"
+  }
+};
 function primaryForMode(brand, mode) {
   if (mode === "light") {
     return { ...brand, l: Math.min(Math.max(brand.l, 0.42), 0.68) };
@@ -394,8 +426,26 @@ function createTimbalTheme(intent) {
   const light = {};
   const dark = {};
   const root = {};
+  let fontFamily;
+  let fontImportUrl;
   if (typeof intent.radius === "number") {
     root["--radius"] = `${intent.radius}rem`;
+    root["--radius-2xl"] = `${Math.max(intent.radius + 0.25, 0)}rem`;
+  }
+  if (intent.typography) {
+    const { sans, display, mono, importUrl } = intent.typography;
+    root["--font-sans"] = sans;
+    if (display) root["--font-display"] = display;
+    if (mono) root["--font-mono"] = mono;
+    fontFamily = sans;
+    fontImportUrl = importUrl;
+  }
+  if (intent.shadow) {
+    const s = SHADOW_PRESETS[intent.shadow];
+    light["--shadow-card-value"] = s.lightCard;
+    light["--shadow-card-elevated-value"] = s.lightElevated;
+    dark["--shadow-card-value"] = s.darkCard;
+    dark["--shadow-card-elevated-value"] = s.darkElevated;
   }
   const primaryLight = primaryForMode(brand, "light");
   const primaryDark = primaryForMode(brand, "dark");
@@ -493,7 +543,7 @@ function createTimbalTheme(intent) {
       );
     }
   }
-  return { light, dark, root };
+  return { light, dark, root, fontFamily, fontImportUrl };
 }
 function declarations(map, indent) {
   return Object.entries(map).map(([name, value]) => `${indent}${name}: ${value};`).join("\n");
@@ -516,6 +566,11 @@ ${declarations(theme.dark, indent)}
 }`
       );
     }
+    if (theme.fontFamily) {
+      blocks.push(`${sel} {
+${indent}font-family: var(--font-sans);
+}`);
+    }
   } else {
     if (Object.keys(lightVars).length) {
       blocks.push(`:root {
@@ -525,15 +580,45 @@ ${declarations(lightVars, indent)}
     if (Object.keys(theme.dark).length) {
       blocks.push(`.dark {
 ${declarations(theme.dark, indent)}
+}`);
+    }
+    if (theme.fontFamily) {
+      blocks.push(`:root,
+body {
+${indent}font-family: var(--font-sans);
 }`);
     }
   }
-  return blocks.join("\n\n");
+  const css = blocks.join("\n\n");
+  if (options.includeFontImport && theme.fontImportUrl) {
+    return `@import url("${theme.fontImportUrl}");
+
+${css}`;
+  }
+  return css;
 }
 var RUNTIME_STYLE_ID = "timbal-theme-runtime";
+var FONT_LINK_ATTR = "data-timbal-theme-font";
+function ensureThemeFontLink(url) {
+  if (typeof document === "undefined") return;
+  const existing = document.head.querySelector(
+    `link[${FONT_LINK_ATTR}]`
+  );
+  if (!url) {
+    existing?.remove();
+    return;
+  }
+  if (existing?.getAttribute("href") === url) return;
+  const link = existing ?? document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = url;
+  link.setAttribute(FONT_LINK_ATTR, "");
+  if (!existing) document.head.appendChild(link);
+}
 function applyTimbalTheme(theme) {
   if (typeof document === "undefined") return () => {
   };
+  ensureThemeFontLink(theme.fontImportUrl);
   let el = document.getElementById(RUNTIME_STYLE_ID);
   if (!el) {
     el = document.createElement("style");
@@ -544,11 +629,13 @@ function applyTimbalTheme(theme) {
   el.textContent = themeToCss(theme);
   return () => {
     el?.parentNode?.removeChild(el);
+    ensureThemeFontLink(void 0);
   };
 }
 function clearTimbalTheme() {
   if (typeof document === "undefined") return;
   document.getElementById(RUNTIME_STYLE_ID)?.remove();
+  ensureThemeFontLink(void 0);
 }
 function isDev() {
   if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") {
@@ -559,48 +646,122 @@ function isDev() {
 
 // src/design/theme-presets.ts
 var EMPTY_TOKENS = { light: {}, dark: {}, root: {} };
+var FONT_URL = {
+  geist: "https://fonts.googleapis.com/css2?family=Geist:wght@400..600&display=swap",
+  sora: "https://fonts.googleapis.com/css2?family=Sora:wght@400..600&display=swap",
+  lexend: "https://fonts.googleapis.com/css2?family=Lexend:wght@400..600&display=swap",
+  inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400..600&display=swap",
+  fraunces: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..600&display=swap",
+  jetbrains: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400..600&display=swap"
+};
+var STACK = {
+  geist: '"Geist", ui-sans-serif, system-ui, sans-serif',
+  sora: '"Sora", ui-sans-serif, system-ui, sans-serif',
+  lexend: '"Lexend", ui-sans-serif, system-ui, sans-serif',
+  inter: '"Inter", ui-sans-serif, system-ui, sans-serif',
+  fraunces: '"Fraunces", ui-serif, Georgia, "Times New Roman", serif',
+  jetbrains: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace'
+};
 var TIMBAL_THEME_PRESETS = [
   {
     id: "platform",
     label: "Platform",
-    description: "Shipped neutral monochrome \u2014 the Timbal Platform default. Calm, brand-agnostic.",
+    description: "Shipped neutral monochrome \u2014 the Timbal Platform default. Calm, brand-agnostic, system font.",
     swatch: "oklch(0.205 0 0)",
+    font: null,
     tokens: EMPTY_TOKENS
   },
   {
     id: "indigo",
     label: "Indigo",
-    description: "Cool, trustworthy blue-violet \u2014 good for analytics & ops dashboards.",
+    description: "Cool, trustworthy blue-violet, Geist type, generous radius, soft shadows \u2014 analytics & ops dashboards.",
     swatch: "#4f46e5",
-    tokens: createTimbalTheme({ brand: "#4f46e5" })
+    font: "Geist",
+    tokens: createTimbalTheme({
+      brand: "#4f46e5",
+      radius: 0.875,
+      shadow: "soft",
+      typography: { sans: STACK.geist, importUrl: FONT_URL.geist }
+    })
   },
   {
     id: "violet",
     label: "Violet",
-    description: "Vivid purple \u2014 expressive, product/marketing-leaning surfaces.",
+    description: "Vivid purple, Sora type, rounded, soft shadows \u2014 expressive product / marketing surfaces.",
     swatch: "#7c3aed",
-    tokens: createTimbalTheme({ brand: "#7c3aed" })
+    font: "Sora",
+    tokens: createTimbalTheme({
+      brand: "#7c3aed",
+      radius: 1,
+      shadow: "soft",
+      typography: { sans: STACK.sora, importUrl: FONT_URL.sora }
+    })
   },
   {
     id: "forest",
     label: "Forest",
-    description: "Grounded green \u2014 finance, sustainability, status-positive apps.",
+    description: "Grounded green, Lexend type, compact radius \u2014 finance, sustainability, status-positive apps.",
     swatch: "#16a34a",
-    tokens: createTimbalTheme({ brand: "#16a34a" })
+    font: "Lexend",
+    tokens: createTimbalTheme({
+      brand: "#16a34a",
+      radius: 0.625,
+      shadow: "soft",
+      typography: { sans: STACK.lexend, importUrl: FONT_URL.lexend }
+    })
   },
   {
     id: "warm",
     label: "Warm",
-    description: "Energetic orange \u2014 consumer, creative, high-engagement tools.",
+    description: "Energetic orange, Lexend type, friendly radius \u2014 consumer, creative, high-engagement tools.",
     swatch: "#ea580c",
-    tokens: createTimbalTheme({ brand: "#ea580c" })
+    font: "Lexend",
+    tokens: createTimbalTheme({
+      brand: "#ea580c",
+      radius: 0.875,
+      shadow: "soft",
+      typography: { sans: STACK.lexend, importUrl: FONT_URL.lexend }
+    })
   },
   {
     id: "slate",
     label: "Slate",
-    description: "Muted cool gray-blue with a subtle tint \u2014 understated enterprise.",
+    description: "Muted enterprise gray-blue, Inter type, tight radius, hairline shadows, tinted neutrals.",
     swatch: "#475569",
-    tokens: createTimbalTheme({ brand: "#475569", tintNeutrals: true })
+    font: "Inter",
+    tokens: createTimbalTheme({
+      brand: "#475569",
+      radius: 0.5,
+      shadow: "hairline",
+      tintNeutrals: true,
+      typography: { sans: STACK.inter, importUrl: FONT_URL.inter }
+    })
+  },
+  {
+    id: "folio",
+    label: "Folio",
+    description: "Editorial serif (Fraunces), near-sharp corners, hairline shadows \u2014 content / docs / reports.",
+    swatch: "#9a3412",
+    font: "Fraunces",
+    tokens: createTimbalTheme({
+      brand: "#9a3412",
+      radius: 0.25,
+      shadow: "hairline",
+      typography: { sans: STACK.fraunces, importUrl: FONT_URL.fraunces }
+    })
+  },
+  {
+    id: "carbon",
+    label: "Carbon",
+    description: "Terminal monospace (JetBrains Mono), crisp corners, green accent \u2014 developer / infra tools.",
+    swatch: "#15803d",
+    font: "JetBrains Mono",
+    tokens: createTimbalTheme({
+      brand: "#15803d",
+      radius: 0.375,
+      shadow: "hairline",
+      typography: { sans: STACK.jetbrains, importUrl: FONT_URL.jetbrains }
+    })
   }
 ];
 var PRESET_BY_ID = new Map(
@@ -641,18 +802,29 @@ The package ships a complete light + dark token system (\`styles.css\`). Compone
 
 **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)
+### Generate a full personality (color + roundness + fonts + shadows)
 
 \`\`\`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);
+const theme = createTimbalTheme({
+  brand: "#4f46e5",
+  radius: 0.875,          // corner roundness in rem (sets --radius + --radius-2xl)
+  shadow: "soft",         // "none" | "hairline" | "soft" | "medium" | "strong"
+  tintNeutrals: false,    // tint background/border toward the brand hue
+  accent: "#10b981",      // optional secondary accent
+  typography: {           // optional \u2014 re-skins every component's font
+    sans: '"Geist", ui-sans-serif, system-ui, sans-serif',
+    importUrl: "https://fonts.googleapis.com/css2?family=Geist:wght@400..600&display=swap",
+    // display?, mono? also supported
+  },
+});
+const css = themeToCss(theme); // paired light + dark, guaranteed in sync
 \`\`\`
 
-- 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.
+- \`createTimbalTheme\` derives \`--primary\`, its foreground, ring, the full button gradient, and a soft playground tint from \`brand\`. \`radius\` sets roundness, \`shadow\` sets card depth, \`typography\` sets fonts. You only supply intent \u2014 never raw OKLCH.
+- For a real company, look up the actual brand hex first (brandfetch / "<company> brand color hex").
+- **Web fonts must be loaded.** \`applyTimbalTheme\` / \`TimbalThemeStyle\` inject the \`<link>\` for \`typography.importUrl\` automatically. For build-time \`themeToCss\`, add the \`<link rel="stylesheet" href="\u2026">\` to your \`index.html\` yourself (or pass \`themeToCss(theme, { includeFontImport: true })\` when the result is a standalone stylesheet).
 
 ### Apply a theme
 
@@ -669,14 +841,18 @@ 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) |
+Each preset is a **full personality** (color + radius + shadows + font), not just a color:
+
+| Preset id | Personality |
+|-----------|-------------|
+| \`platform\` | Neutral monochrome, system font (the default \u2014 no brand) |
+| \`indigo\` | Blue-violet, Geist, generous radius, soft shadows \u2014 analytics / ops |
+| \`violet\` | Purple, Sora, rounded \u2014 product / marketing |
+| \`forest\` | Green, Lexend, compact \u2014 finance / sustainability |
+| \`warm\` | Orange, Lexend, friendly \u2014 consumer / creative |
+| \`slate\` | Enterprise gray-blue, Inter, tight radius, hairline shadows |
+| \`folio\` | Editorial serif (Fraunces), near-sharp corners \u2014 content / docs |
+| \`carbon\` | Terminal monospace (JetBrains Mono), green accent \u2014 dev / infra |
 
 - 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).
@@ -689,7 +865,7 @@ import { TIMBAL_THEME_PRESETS, applyThemePreset } from "@timbal-ai/timbal-react"
 `.trim();
 
 // src/app/theme/TimbalThemeStyle.tsx
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var TimbalThemeStyle = ({
   theme,
   preset,
@@ -700,18 +876,21 @@ var TimbalThemeStyle = ({
   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 }
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    tokens.fontImportUrl ? /* @__PURE__ */ jsx("link", { rel: "stylesheet", href: tokens.fontImportUrl }) : null,
+    /* @__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";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var metricCardShellClass = cn(
   studioIntegrationCardClass,
   "aui-app-metric-card shadow-none",
@@ -729,8 +908,8 @@ var MetricCardHeader = ({
   actions
 }) => {
   if (!title && !description && !actions) return null;
-  return /* @__PURE__ */ jsxs("header", { className: metricCardHeaderClass, children: [
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+  return /* @__PURE__ */ jsxs2("header", { className: metricCardHeaderClass, children: [
+    /* @__PURE__ */ jsxs2("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
     ] }),
@@ -755,7 +934,7 @@ function metricTilesGridColsClass(n) {
 }
 
 // src/app/data/MetricTile.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } 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",
@@ -779,7 +958,7 @@ var MetricTile = ({
   ariaLabel,
   className
 }) => {
-  const content = /* @__PURE__ */ jsxs2(Fragment, { children: [
+  const content = /* @__PURE__ */ jsxs3(Fragment2, { children: [
     active ? /* @__PURE__ */ jsx3(
       "span",
       {
@@ -788,8 +967,8 @@ var MetricTile = ({
       }
     ) : 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__ */ jsxs3("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs3("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
       ] }),
@@ -823,7 +1002,7 @@ var MetricTile = ({
 };
 
 // src/app/theme/ThemePresetGallery.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var ThemePresetGallery = ({
   value,
   onSelect,
@@ -842,9 +1021,9 @@ var ThemePresetGallery = ({
       ),
       children: items.map((preset) => {
         const selected = value === preset.id;
-        return /* @__PURE__ */ jsxs3("div", { "data-timbal-theme": preset.id, children: [
+        return /* @__PURE__ */ jsxs4("div", { "data-timbal-theme": preset.id, children: [
           /* @__PURE__ */ jsx4(TimbalThemeStyle, { preset: preset.id, scope: preset.id }),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs4(
             "button",
             {
               type: "button",
@@ -858,8 +1037,8 @@ var ThemePresetGallery = ({
                 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__ */ jsxs4("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ jsx4(
                       "span",
                       {
@@ -873,8 +1052,12 @@ var ThemePresetGallery = ({
                   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: [
+                preset.font ? /* @__PURE__ */ jsxs4("span", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: [
+                  "Aa \xB7 ",
+                  preset.font
+                ] }) : null,
+                /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2 rounded-lg border border-border bg-background p-2", children: [
+                  /* @__PURE__ */ jsxs4("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 }),
@@ -961,7 +1144,7 @@ function useAppShellChat() {
 // src/app/layout/AppShell.tsx
 import { motion, useReducedMotion } from "motion/react";
 import { useCallback, useState } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } 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",
@@ -997,7 +1180,7 @@ var AppShellBody = ({
       initial: false,
       animate: { paddingLeft: insetPadding },
       transition: layoutTransition,
-      children: /* @__PURE__ */ jsxs4(
+      children: /* @__PURE__ */ jsxs5(
         "div",
         {
           className: cn(
@@ -1065,7 +1248,7 @@ var AppShell = ({
       children
     }
   );
-  const tree = /* @__PURE__ */ jsx5(ShellInsetProvider, { value: sidebar ? reportShellInset : null, children: /* @__PURE__ */ jsxs4(
+  const tree = /* @__PURE__ */ jsx5(ShellInsetProvider, { value: sidebar ? reportShellInset : null, children: /* @__PURE__ */ jsxs5(
     "div",
     {
       className: cn(
@@ -1120,15 +1303,15 @@ var AppShell = ({
 };
 
 // src/app/layout/AppShellTopbar.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var AppShellTopbar = ({
   start,
   actions,
   children,
   className
 }) => {
-  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: [
+  return /* @__PURE__ */ jsxs6("div", { className: cn("aui-app-shell-topbar", appShellTopbarRowClass, className), children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
       start,
       children
     ] }),
@@ -1166,15 +1349,15 @@ var AppShellChatTrigger = ({
 };
 
 // src/app/layout/PageHeader.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var PageHeader = ({
   title,
   description,
   actions,
   className
 }) => {
-  return /* @__PURE__ */ jsxs6("header", { className: cn("aui-app-page-header", appPageHeaderClass, className), children: [
-    /* @__PURE__ */ jsxs6("div", { className: "min-w-0", children: [
+  return /* @__PURE__ */ jsxs7("header", { className: cn("aui-app-page-header", appPageHeaderClass, className), children: [
+    /* @__PURE__ */ jsxs7("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
     ] }),
@@ -1183,14 +1366,14 @@ var PageHeader = ({
 };
 
 // src/app/layout/Page.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var Page = ({
   children,
   breadcrumbs,
   className,
   ...headerProps
 }) => {
-  return /* @__PURE__ */ jsxs7("div", { className: cn("aui-app-page", appPageColumnClass, className), children: [
+  return /* @__PURE__ */ jsxs8("div", { className: cn("aui-app-page", appPageColumnClass, className), children: [
     breadcrumbs,
     /* @__PURE__ */ jsx9(PageHeader, { ...headerProps }),
     children
@@ -1198,14 +1381,14 @@ var Page = ({
 };
 
 // src/app/layout/Section.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var Section = ({
   title,
   description,
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsxs8("section", { className: cn("aui-app-section", appSectionClass, className), children: [
+  return /* @__PURE__ */ jsxs9("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
@@ -1228,7 +1411,7 @@ function useAppCopilotContext() {
 
 // src/app/chat/AppChatPanel.tsx
 import { XIcon } from "lucide-react";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } 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"
@@ -1273,7 +1456,7 @@ var AppChatPanel = ({
   ...rest
 }) => {
   const shellChat = useAppShellChat();
-  return /* @__PURE__ */ jsxs9("div", { className: cn(shellClass, className), children: [
+  return /* @__PURE__ */ jsxs10("div", { className: cn(shellClass, className), children: [
     shellChat?.collapsible ? /* @__PURE__ */ jsx12("div", { className: chromeClass, children: /* @__PURE__ */ jsx12(
       "button",
       {
@@ -1321,9 +1504,9 @@ var SurfaceCard = ({ children, className }) => {
 };
 
 // src/app/surfaces/StatTile.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var StatTile = ({ label, value, hint, className }) => {
-  return /* @__PURE__ */ jsxs10("div", { className: cn("aui-app-stat-tile", appStatTileClass, className), children: [
+  return /* @__PURE__ */ jsxs11("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
@@ -1331,14 +1514,14 @@ var StatTile = ({ label, value, hint, className }) => {
 };
 
 // src/app/surfaces/EmptyState.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 var EmptyState = ({
   title,
   description,
   action,
   className
 }) => {
-  return /* @__PURE__ */ jsxs11("div", { className: cn("aui-app-empty-state", appEmptyStateClass, className), children: [
+  return /* @__PURE__ */ jsxs12("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
@@ -1373,7 +1556,7 @@ var StatusBadge = ({
 };
 
 // src/app/surfaces/AppConfirmDialog.tsx
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } 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";
@@ -1392,10 +1575,10 @@ var AppConfirmDialog = ({
     DialogContent,
     {
       className: cn("gap-0 p-0 sm:max-w-md", className),
-      children: /* @__PURE__ */ jsxs12("div", { className: bodyClass2, children: [
+      children: /* @__PURE__ */ jsxs13("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__ */ jsxs13("div", { className: actionsClass, children: [
           /* @__PURE__ */ jsx17(
             TimbalV2Button,
             {
@@ -1426,7 +1609,7 @@ var AppConfirmDialog = ({
 };
 
 // src/app/surfaces/InfoCard.tsx
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var toneClass = {
   neutral: "border-border bg-muted/40",
   info: "border-primary/25 bg-primary/5",
@@ -1441,7 +1624,7 @@ var InfoCard = ({
   action,
   tone = "neutral",
   className
-}) => /* @__PURE__ */ jsxs13(
+}) => /* @__PURE__ */ jsxs14(
   "div",
   {
     className: cn(
@@ -1451,7 +1634,7 @@ var InfoCard = ({
     ),
     children: [
       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: [
+      /* @__PURE__ */ jsxs14("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
       ] }),
@@ -1461,7 +1644,7 @@ var InfoCard = ({
 );
 
 // src/app/surfaces/StatusDot.tsx
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var dotClass = {
   online: "bg-emerald-500",
   busy: "bg-amber-500",
@@ -1474,8 +1657,8 @@ var StatusDot = ({
   label,
   pulse = false,
   className
-}) => /* @__PURE__ */ jsxs14("span", { className: cn("inline-flex items-center gap-1.5", className), children: [
-  /* @__PURE__ */ jsxs14("span", { className: "relative flex size-2", children: [
+}) => /* @__PURE__ */ jsxs15("span", { className: cn("inline-flex items-center gap-1.5", className), children: [
+  /* @__PURE__ */ jsxs15("span", { className: "relative flex size-2", children: [
     pulse ? /* @__PURE__ */ jsx19(
       "span",
       {
@@ -1491,7 +1674,7 @@ var StatusDot = ({
 ] });
 
 // src/app/surfaces/DescriptionList.tsx
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var DescriptionList = ({
   items,
   stacked = false,
@@ -1503,7 +1686,7 @@ var DescriptionList = ({
       "divide-y divide-border rounded-xl border border-border bg-card",
       className
     ),
-    children: items.map((item, i) => /* @__PURE__ */ jsxs15(
+    children: items.map((item, i) => /* @__PURE__ */ jsxs16(
       "div",
       {
         className: cn(
@@ -1532,7 +1715,7 @@ 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 jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var Chevron = ({ open }) => /* @__PURE__ */ jsx21(
   "svg",
   {
@@ -1568,8 +1751,8 @@ var ExpandableSection = ({
     if (openProp == null) setInternalOpen((o) => !o);
     onOpenChange?.(!open);
   };
-  return /* @__PURE__ */ jsxs16("div", { className: cn("border-b border-border last:border-0", className), children: [
-    /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17("div", { className: cn("border-b border-border last:border-0", className), children: [
+    /* @__PURE__ */ jsxs17(
       "button",
       {
         type: "button",
@@ -1578,7 +1761,7 @@ 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__ */ jsxs16("span", { className: "flex min-w-0 items-center gap-3", children: [
+          /* @__PURE__ */ jsxs17("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
@@ -1604,7 +1787,7 @@ var ExpandableSection = ({
 };
 
 // src/app/surfaces/ResourceCard.tsx
-import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs18 } 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
@@ -1629,16 +1812,16 @@ var ResourceCard = ({
   ariaLabel,
   className
 }) => {
-  const body = /* @__PURE__ */ jsxs17(Fragment2, { children: [
-    /* @__PURE__ */ jsxs17("div", { className: "flex items-start gap-3", children: [
+  const body = /* @__PURE__ */ jsxs18(Fragment3, { children: [
+    /* @__PURE__ */ jsxs18("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__ */ jsxs18("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__ */ jsx22("span", { className: "shrink-0 pt-0.5", children: badge }) : 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: [
+    footer || action ? /* @__PURE__ */ jsxs18("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
@@ -1650,12 +1833,12 @@ var ResourceCard = ({
 };
 
 // src/app/settings/SettingsSection.tsx
-import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 var SettingsSectionHeader = ({
   title,
   description,
   className
-}) => /* @__PURE__ */ jsxs18("div", { className: cn("flex flex-col", className), children: [
+}) => /* @__PURE__ */ jsxs19("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
 ] });
@@ -1666,7 +1849,7 @@ var SettingsSection = ({
   children,
   noBorderTop = false,
   className
-}) => /* @__PURE__ */ jsxs18(
+}) => /* @__PURE__ */ jsxs19(
   "section",
   {
     className: cn(
@@ -1675,7 +1858,7 @@ var SettingsSection = ({
       className
     ),
     children: [
-      /* @__PURE__ */ jsxs18("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs19("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
@@ -1686,7 +1869,7 @@ var SettingsSection = ({
 );
 
 // src/app/settings/FieldRow.tsx
-import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 var FieldRow = ({
   label,
   children,
@@ -1696,7 +1879,7 @@ var FieldRow = ({
   className
 }) => {
   if (inline) {
-    return /* @__PURE__ */ jsxs19(
+    return /* @__PURE__ */ jsxs20(
       "div",
       {
         className: cn(
@@ -1704,7 +1887,7 @@ var FieldRow = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsxs19("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsx24(
               "label",
               {
@@ -1720,7 +1903,7 @@ var FieldRow = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs19("div", { className: cn("flex flex-col gap-1.5", className), children: [
+  return /* @__PURE__ */ jsxs20("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__ */ jsx24("p", { className: "text-xs text-muted-foreground", children: description }) : null
@@ -1731,7 +1914,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 jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 var FloatingUnsavedChangesBar = ({
   visible,
   message = "Unsaved changes",
@@ -1749,7 +1932,7 @@ var FloatingUnsavedChangesBar = ({
   useEffect(() => setMounted(true), []);
   if (!mounted || typeof document === "undefined") return null;
   return createPortal(
-    /* @__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(
+    /* @__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__ */ jsxs21(
       motion3.div,
       {
         role: "region",
@@ -1764,7 +1947,7 @@ var FloatingUnsavedChangesBar = ({
         ),
         children: [
           /* @__PURE__ */ jsx25("span", { className: "text-sm text-muted-foreground", children: message }),
-          /* @__PURE__ */ jsxs20("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxs21("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 })
           ] })
@@ -1776,13 +1959,13 @@ var FloatingUnsavedChangesBar = ({
 };
 
 // src/app/settings/DangerZone.tsx
-import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 var DangerZoneAction = ({
   title,
   description,
   action,
   className
-}) => /* @__PURE__ */ jsxs21(
+}) => /* @__PURE__ */ jsxs22(
   "div",
   {
     className: cn(
@@ -1790,7 +1973,7 @@ var DangerZoneAction = ({
       className
     ),
     children: [
-      /* @__PURE__ */ jsxs21("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs22("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
       ] }),
@@ -1803,7 +1986,7 @@ var DangerZone = ({
   description,
   children,
   className
-}) => /* @__PURE__ */ jsxs21(
+}) => /* @__PURE__ */ jsxs22(
   "section",
   {
     className: cn(
@@ -1811,7 +1994,7 @@ var DangerZone = ({
       className
     ),
     children: [
-      (title || description) && /* @__PURE__ */ jsxs21("header", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-3", children: [
+      (title || description) && /* @__PURE__ */ jsxs22("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
       ] }),
@@ -1822,7 +2005,7 @@ var DangerZone = ({
 
 // src/app/integrations/IntegrationCard.tsx
 import { useId as useId2 } from "react";
-import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs23 } 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,
@@ -1863,11 +2046,11 @@ var IntegrationCard = ({
   const titleId = useId2();
   const locked = status === "locked";
   const dimmed = status === "disabled" || locked;
-  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: [
+  const body = /* @__PURE__ */ jsxs23("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs23("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("div", { className: "min-w-0 flex-1 pt-0.5", children: /* @__PURE__ */ jsxs23("div", { className: "flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsx27(
             "h4",
             {
@@ -1891,7 +2074,7 @@ var IntegrationCard = ({
         children: description
       }
     ) : null,
-    action ? /* @__PURE__ */ jsxs22(Fragment3, { children: [
+    action ? /* @__PURE__ */ jsxs23(Fragment4, { 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
@@ -1925,7 +2108,7 @@ var IntegrationCard = ({
 
 // src/app/integrations/IntegrationsEmptyState.tsx
 import { useId as useId3 } from "react";
-import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 var IntegrationsEmptyState = ({
   title = "No integrations yet",
   description = "Connect a provider to start syncing data and powering your workforce.",
@@ -1934,7 +2117,7 @@ var IntegrationsEmptyState = ({
   className
 }) => {
   const titleId = useId3();
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "section",
     {
       className: cn(
@@ -1970,7 +2153,7 @@ var planBadgeClass = "inline-flex h-5 max-w-full shrink-0 items-center rounded-m
 var PlanBadge = ({ children, className }) => /* @__PURE__ */ jsx29("span", { className: cn(planBadgeClass, className), children });
 
 // src/app/integrations/ConnectionRow.tsx
-import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 var logoShellClass2 = cn(
   "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg",
   TIMBAL_V2_LOGO_TILE
@@ -1985,9 +2168,9 @@ var ConnectionRow = ({
   ariaLabel,
   className
 }) => {
-  const inner = /* @__PURE__ */ jsxs24(Fragment4, { children: [
+  const inner = /* @__PURE__ */ jsxs25(Fragment5, { children: [
     logo ? /* @__PURE__ */ jsx30("span", { className: logoShellClass2, children: logo }) : null,
-    /* @__PURE__ */ jsxs24("div", { className: "min-w-0 flex-1", children: [
+    /* @__PURE__ */ jsxs25("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
     ] }),
@@ -2059,11 +2242,11 @@ var SubNav = ({
 };
 
 // src/app/navigation/Breadcrumbs.tsx
-import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
 var Breadcrumbs = ({ items, className }) => {
   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__ */ jsxs25("li", { className: "inline-flex items-center gap-1.5", children: [
+    return /* @__PURE__ */ jsxs26("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",
@@ -2079,7 +2262,7 @@ var Breadcrumbs = ({ items, className }) => {
 };
 
 // src/app/forms/Field.tsx
-import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
 var Field = ({
   label,
   hint,
@@ -2088,7 +2271,7 @@ var Field = ({
   className,
   htmlFor
 }) => {
-  return /* @__PURE__ */ jsxs26("div", { className: cn("aui-app-field", appFieldClass, className), children: [
+  return /* @__PURE__ */ jsxs27("div", { className: cn("aui-app-field", appFieldClass, className), children: [
     /* @__PURE__ */ jsx34("label", { className: appFieldLabelClass, htmlFor, children: label }),
     children,
     hint && !error ? /* @__PURE__ */ jsx34("p", { className: appFieldHintClass, children: hint }) : null,
@@ -2165,7 +2348,7 @@ var FieldTextarea = ({
 
 // src/app/forms/FieldSelect.tsx
 import { ChevronDownIcon } from "lucide-react";
-import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
 var selectWrapClass = "relative";
 var selectClass = cn(
   appInputClass,
@@ -2190,7 +2373,7 @@ var FieldSelect = ({
       error,
       htmlFor: selectId,
       className: fieldClassName,
-      children: /* @__PURE__ */ jsxs27("div", { className: selectWrapClass, children: [
+      children: /* @__PURE__ */ jsxs28("div", { className: selectWrapClass, children: [
         /* @__PURE__ */ jsx36(
           "select",
           {
@@ -2214,7 +2397,7 @@ var FieldSelect = ({
 };
 
 // src/app/forms/FieldSwitch.tsx
-import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs29 } 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",
@@ -2235,7 +2418,7 @@ var FieldSwitch = ({
   ...props
 }) => {
   const inputId = id ?? props.name ?? "switch";
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "label",
     {
       className: cn(
@@ -2244,7 +2427,7 @@ var FieldSwitch = ({
       ),
       htmlFor: inputId,
       children: [
-        /* @__PURE__ */ jsxs28("span", { className: "relative mt-0.5", children: [
+        /* @__PURE__ */ jsxs29("span", { className: "relative mt-0.5", children: [
           /* @__PURE__ */ jsx37(
             "input",
             {
@@ -2257,7 +2440,7 @@ var FieldSwitch = ({
           ),
           /* @__PURE__ */ jsx37("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ jsx37("span", { className: thumbClass }) })
         ] }),
-        /* @__PURE__ */ jsxs28("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsxs29("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
         ] })
@@ -2268,13 +2451,13 @@ var FieldSwitch = ({
 
 // src/app/forms/SearchInput.tsx
 import { SearchIcon } from "lucide-react";
-import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
 var SearchInput = ({
   className,
   placeholder = "Search\u2026",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "label",
     {
       className: cn(
@@ -2299,9 +2482,9 @@ var SearchInput = ({
 };
 
 // src/app/forms/FormSection.tsx
-import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
 var FormSection = ({ title, children, className }) => {
-  return /* @__PURE__ */ jsxs30("fieldset", { className: cn("aui-app-form-section", appSectionClass, "border-0 p-0", className), children: [
+  return /* @__PURE__ */ jsxs31("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 })
   ] });
@@ -2324,7 +2507,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 jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs32 } 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";
@@ -2424,12 +2607,12 @@ function DataTable({
   }
   const rowCountText = rowCountLabel?.(sortedRows.length) ?? `${sortedRows.length} row${sortedRows.length === 1 ? "" : "s"}`;
   const hasFoot = Boolean((showRowCount || footer) && sortedRows.length > 0);
-  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: [
+  return /* @__PURE__ */ jsx41("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ jsx41("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs32("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__ */ jsxs31(
+      const headerContent = col.sortable ? /* @__PURE__ */ jsxs32(
         "button",
         {
           type: "button",
@@ -2457,7 +2640,7 @@ function DataTable({
         col.id
       );
     }) }) }),
-    /* @__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("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__ */ jsxs32("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(
@@ -2490,7 +2673,7 @@ function DataTable({
       },
       getRowKey(row)
     )) }),
-    hasFoot ? /* @__PURE__ */ jsx41("tfoot", { children: /* @__PURE__ */ jsx41("tr", { children: /* @__PURE__ */ jsx41("td", { colSpan: columns.length, className: footCellClass, children: /* @__PURE__ */ jsxs31(
+    hasFoot ? /* @__PURE__ */ jsx41("tfoot", { children: /* @__PURE__ */ jsx41("tr", { children: /* @__PURE__ */ jsx41("td", { colSpan: columns.length, className: footCellClass, children: /* @__PURE__ */ jsxs32(
       "div",
       {
         className: cn(
@@ -2508,7 +2691,7 @@ function DataTable({
 
 // src/app/data/ChartPanel.tsx
 import { useId as useId4 } from "react";
-import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
 var ChartPanel = ({
   title,
   description,
@@ -2522,7 +2705,7 @@ var ChartPanel = ({
   const resolvedTitle = title ?? artifact?.title;
   const hasHeader = Boolean(resolvedTitle || description || actions);
   const body = children ?? (artifact ? /* @__PURE__ */ jsx42(ChartArtifactView, { artifact, embedded: true, height }) : null);
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "section",
     {
       className: cn(metricCardShellClass, "aui-app-chart-panel", className),
@@ -2562,7 +2745,7 @@ var ChartPanel = ({
 
 // src/app/data/MetricRow.tsx
 import { useId as useId5, useState as useState5 } from "react";
-import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
 var MetricRow = ({
   title,
   description,
@@ -2584,7 +2767,7 @@ var MetricRow = ({
     if (activeMetricId == null) setInternalId(id);
     onMetricChange?.(id);
   };
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "section",
     {
       className: cn(metricCardShellClass, className),
@@ -2632,7 +2815,7 @@ var MetricRow = ({
 
 // src/app/data/MetricChartCard.tsx
 import { useId as useId6, useState as useState6 } from "react";
-import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
 var MetricChartCard = ({
   title,
   description,
@@ -2662,7 +2845,7 @@ var MetricChartCard = ({
   };
   const hasHeader = Boolean(title || description || actions);
   const chartAriaLabel = typeof active?.label === "string" ? `${active.label} over time` : "Metric chart";
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "section",
     {
       className: cn(metricCardShellClass, className),
@@ -2739,7 +2922,7 @@ var MetricChartCard = ({
 
 // src/charts/sparkline.tsx
 import { useId as useId7 } from "react";
-import { Fragment as Fragment5, jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
 var Sparkline = ({
   data,
   dataKey = "value",
@@ -2766,7 +2949,7 @@ var Sparkline = ({
     x: pad + (values.length > 1 ? i / (values.length - 1) * innerW : innerW / 2),
     y: pad + innerH - (v - min) / range * innerH
   }));
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "svg",
     {
       width,
@@ -2777,8 +2960,8 @@ var Sparkline = ({
       "aria-label": ariaLabel,
       preserveAspectRatio: "none",
       children: [
-        area && /* @__PURE__ */ jsxs35(Fragment5, { children: [
-          /* @__PURE__ */ jsx45("defs", { children: /* @__PURE__ */ jsxs35("linearGradient", { id: `${uid}-spark`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+        area && /* @__PURE__ */ jsxs36(Fragment6, { children: [
+          /* @__PURE__ */ jsx45("defs", { children: /* @__PURE__ */ jsxs36("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 } })
           ] }) }),
@@ -2804,6 +2987,7 @@ export {
   APP_KIT_AGENT_INSTRUCTIONS,
   createTimbalTheme,
   themeToCss,
+  ensureThemeFontLink,
   applyTimbalTheme,
   clearTimbalTheme,
   TIMBAL_THEME_PRESETS,