npm - @timbal-ai/timbal-react - Versions diffs - 0.8.1 → 0.8.2 - Mend

@timbal-ai/timbal-react 0.8.1 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/CHANGELOG.md +19 -0
package/README.md +14 -4
package/dist/app.cjs +220 -35
package/dist/app.d.cts +1 -1
package/dist/app.d.ts +1 -1
package/dist/app.esm.js +3 -1
package/dist/{chart-artifact-DwfRtQWL.d.ts → chart-artifact-Bl67kre7.d.ts} +60 -11
package/dist/{chart-artifact-DWkqIAK5.d.cts → chart-artifact-BzcvblDe.d.cts} +60 -11
package/dist/{chunk-GBBLAM3G.esm.js → chunk-6YVKCVEP.esm.js} +329 -145
package/dist/index.cjs +220 -35
package/dist/index.d.cts +1 -1
package/dist/index.d.ts +1 -1
package/dist/index.esm.js +3 -1
package/package.json +1 -1

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,25 @@
 All notable changes to `@timbal-ai/timbal-react` are documented here.
+## [0.8.2] — 2026-06-02
+### Added
+- **Full theme personalities** — extend programmatic theming beyond brand color to **roundness, shadows, and fonts** in one intent object:
+  - **`createTimbalTheme`** — new options: `shadow` (`none` | `hairline` | `soft` | `medium` | `strong`), `typography` (`sans`, optional `display`/`mono`, `importUrl` for web fonts). `radius` now also sets `--radius-2xl` (composer shell). Returns `fontFamily` + `fontImportUrl` for runtime font loading.
+  - **`themeToCss(theme, { scope?, includeFontImport? })`** — emits a `font-family: var(--font-sans)` rule when the theme carries a font; optional `@import` for standalone stylesheets.
+  - **`ensureThemeFontLink(url)`** — inject/remove a managed font `<link>` in `<head>`.
+  - **`applyTimbalTheme` / `TimbalThemeStyle`** — auto-load preset/custom web fonts via `<link>`.
+  - **`TIMBAL_THEME_PRESETS`** — each preset is now a full personality (color + radius + shadow + font), not color-only. New presets: **`folio`** (Fraunces serif, sharp corners), **`carbon`** (JetBrains Mono, green accent). Existing presets (`indigo`, `violet`, …) ship distinct fonts and radii.
+  - **`ThemePresetGallery`** — shows font name on each swatch card.
+  - **`THEME_AGENT_INSTRUCTIONS`** — documents typography, shadow, and font-loading rules for UI-generation agents.
+### Changed
+- **`TimbalThemePreset`** — adds optional `font` label for pickers.
+---
 ## [0.8.1] — 2026-06-02
 ### Added

package/README.md CHANGED Viewed

@@ -73,20 +73,30 @@ Both light AND dark blocks must be defined for every overridden token — otherw
 ### Programmatic theming (no hand-authored OKLCH)
-Instead of hand-writing paired `:root` / `.dark` blocks, derive a complete, contrast-correct palette from a single brand color. The package owns the OKLCH math for every token (primary, foreground, ring, the full button gradient, the playground tint):
+Instead of hand-writing paired `:root` / `.dark` blocks, derive a complete **personality** — color, roundness, shadows, and fonts — from a single intent object. The package owns the OKLCH math for every color token (primary, foreground, ring, the full button gradient, the playground tint):
 ```ts
 import { createTimbalTheme, themeToCss, applyTimbalTheme } from "@timbal-ai/timbal-react";
-const theme = createTimbalTheme({ brand: "#4f46e5", radius: 0.75 });
+const theme = createTimbalTheme({
+  brand: "#4f46e5",
+  radius: 0.875,     // corner roundness (rem) → --radius + --radius-2xl
+  shadow: "soft",    // "none" | "hairline" | "soft" | "medium" | "strong"
+  typography: {      // optional — 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",
+  },
+});
 // Build-time / SSR — paste into index.css (paired light + dark, always in sync):
 const css = themeToCss(theme);
-// Runtime — inject a managed <style>, swappable, returns a disposer:
+// Runtime — inject a managed <style> (+ font <link>), swappable, returns a disposer:
 const dispose = applyTimbalTheme(theme);
 ```
+> **Fonts must be loaded.** `applyTimbalTheme` and `TimbalThemeStyle` inject the `<link>` for `typography.importUrl` automatically. For build-time `themeToCss`, add the `<link rel="stylesheet">` to `index.html` yourself (or pass `themeToCss(theme, { includeFontImport: true })` when the result is a standalone stylesheet).
 Or render it as a component near your app root:
 ```tsx
@@ -98,7 +108,7 @@ import { TimbalThemeStyle } from "@timbal-ai/timbal-react";
 ### Presets + the picker
-A small closed catalog (`TIMBAL_THEME_PRESETS`: `platform`, `indigo`, `violet`, `forest`, `warm`, `slate`) lets you offer styles by stable id and apply on selection. `ThemePresetGallery` previews each option with real components, scoped so the live app doesn't change until the user picks:
+A small closed catalog (`TIMBAL_THEME_PRESETS`) lets you offer styles by stable id and apply on selection. Each preset is a **full personality** (color + radius + shadows + font), not just a color: `platform` (system), `indigo` (Geist), `violet` (Sora), `forest`/`warm` (Lexend), `slate` (Inter), `folio` (Fraunces serif), `carbon` (JetBrains Mono). `ThemePresetGallery` previews each option with real components, scoped so the live app doesn't change until the user picks:
 ```tsx
 import { ThemePresetGallery, applyThemePreset } from "@timbal-ai/timbal-react";

package/dist/app.cjs CHANGED Viewed

@@ -98,6 +98,7 @@ __export(app_exports, {
   clearTimbalTheme: () => clearTimbalTheme,
   connectionRowListClass: () => connectionRowListClass,
   createTimbalTheme: () => createTimbalTheme,
+  ensureThemeFontLink: () => ensureThemeFontLink,
   getStoredThemePreset: () => getStoredThemePreset,
   getThemePreset: () => getThemePreset,
   themeToCss: () => themeToCss,
@@ -431,6 +432,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) };
@@ -466,8 +499,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");
@@ -565,7 +616,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");
@@ -588,6 +639,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 {
@@ -597,15 +653,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");
@@ -616,11 +702,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") {
@@ -671,48 +759,122 @@ var STORAGE_KEYS = {
 // 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(
@@ -753,18 +915,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
@@ -781,14 +954,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).
@@ -812,14 +989,17 @@ var TimbalThemeStyle = ({
   if (!tokens) return null;
   const css = themeToCss(tokens, scope ? { scope } : void 0);
   if (!css) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "style",
-    {
-      "data-timbal-theme-style": scope ?? "root",
-      nonce,
-      dangerouslySetInnerHTML: { __html: css }
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    tokens.fontImportUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("link", { rel: "stylesheet", href: tokens.fontImportUrl }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "style",
+      {
+        "data-timbal-theme-style": scope ?? "root",
+        nonce,
+        dangerouslySetInnerHTML: { __html: css }
+      }
+    )
+  ] });
 };
 // src/utils.ts
@@ -1403,6 +1583,10 @@ var ThemePresetGallery = ({
                   selected ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-xs font-medium text-primary", children: "Selected" }) : null
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs leading-snug text-muted-foreground", children: preset.description }),
+                preset.font ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: [
+                  "Aa \xB7 ",
+                  preset.font
+                ] }) : null,
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-2 rounded-lg border border-border bg-background p-2", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button, { size: "xs", className: "pointer-events-none", children: "Primary" }),
@@ -7446,6 +7630,7 @@ function TimbalChat({
   clearTimbalTheme,
   connectionRowListClass,
   createTimbalTheme,
+  ensureThemeFontLink,
   getStoredThemePreset,
   getThemePreset,
   themeToCss,

package/dist/app.d.cts CHANGED Viewed

@@ -1,4 +1,4 @@
-export { A as APP_KIT_AGENT_INSTRUCTIONS, a as AppChatPanel, b as AppChatPanelProps, c as AppConfirmDialog, d as AppConfirmDialogProps, e as AppCopilotContextValue, f as AppCopilotProvider, g as AppCopilotProviderProps, h as AppShell, i as AppShellChatControls, j as AppShellChatTrigger, k as AppShellChatTriggerProps, l as AppShellProps, m as AppShellTopbar, n as AppShellTopbarProps, B as BreadcrumbItem, o as Breadcrumbs, p as BreadcrumbsProps, C as CHART_PALETTE, q as ChartArtifactView, r as ChartLayout, s as ChartPanel, t as ChartPanelProps, u as ChartSeries, v as ChartVariant, w as ConnectionRow, x as ConnectionRowList, y as ConnectionRowListProps, z as ConnectionRowProps, D as DangerZone, E as DangerZoneAction, F as DangerZoneActionProps, G as DangerZoneProps, H as DataTable, I as DataTableColumn, J as DataTableProps, K as DataTableSort, L as DataTableSortDirection, M as DescriptionItem, N as DescriptionList, O as DescriptionListProps, P as EmptyState, Q as EmptyStateProps, R as ExpandableSection, S as ExpandableSectionProps, T as Field, U as FieldInput, V as FieldInputProps, W as FieldProps, X as FieldRow, Y as FieldRowProps, Z as FieldSelect, _ as FieldSelectProps, $ as FieldSwitch, a0 as FieldSwitchProps, a1 as FieldTextarea, a2 as FieldTextareaProps, a3 as FilterBar, a4 as FilterBarProps, a5 as FloatingUnsavedChangesBar, a6 as FloatingUnsavedChangesBarProps, a7 as FormSection, a8 as FormSectionProps, a9 as INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, aa as InfoCard, ab as InfoCardProps, ac as InfoCardTone, ad as IntegrationCard, ae as IntegrationCardProps, af as IntegrationCardStatus, ag as IntegrationsEmptyState, ah as IntegrationsEmptyStateProps, ai as LineAreaChart, aj as LineAreaChartProps, ak as MetricChartCard, al as MetricChartCardProps, am as MetricChartMetric, an as MetricRow, ao as MetricRowItem, ap as MetricRowProps, aq as MetricTile, ar as MetricTileProps, as as Page, at as PageHeader, au as PageHeaderProps, av as PageProps, aw as PlanBadge, ax as PlanBadgeProps, ay as PlanBadgeTone, az as ResourceCard, aA as ResourceCardProps, aB as SearchInput, aC as SearchInputProps, aD as Section, aE as SectionProps, aF as SettingsSection, aG as SettingsSectionHeader, aH as SettingsSectionHeaderProps, aI as SettingsSectionProps, aJ as Sparkline, aK as SparklineProps, aL as StatTile, aM as StatTileProps, aN as StatusBadge, aO as StatusBadgeProps, aP as StatusBadgeTone, aQ as StatusDot, aR as StatusDotProps, aS as StatusDotTone, aT as SubNav, aU as SubNavItem, aV as SubNavProps, aW as SurfaceCard, aX as SurfaceCardProps, aY as THEME_AGENT_INSTRUCTIONS, aZ as TIMBAL_THEME_PRESETS, a_ as ThemePresetGallery, a$ as ThemePresetGalleryProps, b0 as ThemeToCssOptions, b1 as ThemeTokenMap, b2 as TimbalThemeIntent, b3 as TimbalThemePreset, b4 as TimbalThemePresetId, b5 as TimbalThemeStyle, b6 as TimbalThemeStyleProps, b7 as TimbalThemeTokens, b8 as applyThemePreset, b9 as applyTimbalTheme, ba as clearTimbalTheme, bb as connectionRowListClass, bc as createTimbalTheme, bd as getStoredThemePreset, be as getThemePreset, bf as themeToCss, bg as useAppCopilotContext, bh as useAppShellChat } from './chart-artifact-DWkqIAK5.cjs';
+export { A as APP_KIT_AGENT_INSTRUCTIONS, a as AppChatPanel, b as AppChatPanelProps, c as AppConfirmDialog, d as AppConfirmDialogProps, e as AppCopilotContextValue, f as AppCopilotProvider, g as AppCopilotProviderProps, h as AppShell, i as AppShellChatControls, j as AppShellChatTrigger, k as AppShellChatTriggerProps, l as AppShellProps, m as AppShellTopbar, n as AppShellTopbarProps, B as BreadcrumbItem, o as Breadcrumbs, p as BreadcrumbsProps, C as CHART_PALETTE, q as ChartArtifactView, r as ChartLayout, s as ChartPanel, t as ChartPanelProps, u as ChartSeries, v as ChartVariant, w as ConnectionRow, x as ConnectionRowList, y as ConnectionRowListProps, z as ConnectionRowProps, D as DangerZone, E as DangerZoneAction, F as DangerZoneActionProps, G as DangerZoneProps, H as DataTable, I as DataTableColumn, J as DataTableProps, K as DataTableSort, L as DataTableSortDirection, M as DescriptionItem, N as DescriptionList, O as DescriptionListProps, P as EmptyState, Q as EmptyStateProps, R as ExpandableSection, S as ExpandableSectionProps, T as Field, U as FieldInput, V as FieldInputProps, W as FieldProps, X as FieldRow, Y as FieldRowProps, Z as FieldSelect, _ as FieldSelectProps, $ as FieldSwitch, a0 as FieldSwitchProps, a1 as FieldTextarea, a2 as FieldTextareaProps, a3 as FilterBar, a4 as FilterBarProps, a5 as FloatingUnsavedChangesBar, a6 as FloatingUnsavedChangesBarProps, a7 as FormSection, a8 as FormSectionProps, a9 as INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, aa as InfoCard, ab as InfoCardProps, ac as InfoCardTone, ad as IntegrationCard, ae as IntegrationCardProps, af as IntegrationCardStatus, ag as IntegrationsEmptyState, ah as IntegrationsEmptyStateProps, ai as LineAreaChart, aj as LineAreaChartProps, ak as MetricChartCard, al as MetricChartCardProps, am as MetricChartMetric, an as MetricRow, ao as MetricRowItem, ap as MetricRowProps, aq as MetricTile, ar as MetricTileProps, as as Page, at as PageHeader, au as PageHeaderProps, av as PageProps, aw as PlanBadge, ax as PlanBadgeProps, ay as PlanBadgeTone, az as ResourceCard, aA as ResourceCardProps, aB as SearchInput, aC as SearchInputProps, aD as Section, aE as SectionProps, aF as SettingsSection, aG as SettingsSectionHeader, aH as SettingsSectionHeaderProps, aI as SettingsSectionProps, aJ as Sparkline, aK as SparklineProps, aL as StatTile, aM as StatTileProps, aN as StatusBadge, aO as StatusBadgeProps, aP as StatusBadgeTone, aQ as StatusDot, aR as StatusDotProps, aS as StatusDotTone, aT as SubNav, aU as SubNavItem, aV as SubNavProps, aW as SurfaceCard, aX as SurfaceCardProps, aY as THEME_AGENT_INSTRUCTIONS, aZ as TIMBAL_THEME_PRESETS, a_ as ThemePresetGallery, a$ as ThemePresetGalleryProps, b0 as ThemeShadow, b1 as ThemeToCssOptions, b2 as ThemeTokenMap, b3 as TimbalThemeIntent, b4 as TimbalThemePreset, b5 as TimbalThemePresetId, b6 as TimbalThemeStyle, b7 as TimbalThemeStyleProps, b8 as TimbalThemeTokens, b9 as TimbalThemeTypography, ba as applyThemePreset, bb as applyTimbalTheme, bc as clearTimbalTheme, bd as connectionRowListClass, be as createTimbalTheme, bf as ensureThemeFontLink, bg as getStoredThemePreset, bh as getThemePreset, bi as themeToCss, bj as useAppCopilotContext, bk as useAppShellChat } from './chart-artifact-BzcvblDe.cjs';
 export { B as Button } from './button-ClSgD6OF.cjs';
 export { C as ChartArtifact, T as ThreadVariant, a as TimbalChat, b as TimbalChatProps } from './chat-Bed4FQSl.cjs';
 import 'react';

package/dist/app.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export { A as APP_KIT_AGENT_INSTRUCTIONS, a as AppChatPanel, b as AppChatPanelProps, c as AppConfirmDialog, d as AppConfirmDialogProps, e as AppCopilotContextValue, f as AppCopilotProvider, g as AppCopilotProviderProps, h as AppShell, i as AppShellChatControls, j as AppShellChatTrigger, k as AppShellChatTriggerProps, l as AppShellProps, m as AppShellTopbar, n as AppShellTopbarProps, B as BreadcrumbItem, o as Breadcrumbs, p as BreadcrumbsProps, C as CHART_PALETTE, q as ChartArtifactView, r as ChartLayout, s as ChartPanel, t as ChartPanelProps, u as ChartSeries, v as ChartVariant, w as ConnectionRow, x as ConnectionRowList, y as ConnectionRowListProps, z as ConnectionRowProps, D as DangerZone, E as DangerZoneAction, F as DangerZoneActionProps, G as DangerZoneProps, H as DataTable, I as DataTableColumn, J as DataTableProps, K as DataTableSort, L as DataTableSortDirection, M as DescriptionItem, N as DescriptionList, O as DescriptionListProps, P as EmptyState, Q as EmptyStateProps, R as ExpandableSection, S as ExpandableSectionProps, T as Field, U as FieldInput, V as FieldInputProps, W as FieldProps, X as FieldRow, Y as FieldRowProps, Z as FieldSelect, _ as FieldSelectProps, $ as FieldSwitch, a0 as FieldSwitchProps, a1 as FieldTextarea, a2 as FieldTextareaProps, a3 as FilterBar, a4 as FilterBarProps, a5 as FloatingUnsavedChangesBar, a6 as FloatingUnsavedChangesBarProps, a7 as FormSection, a8 as FormSectionProps, a9 as INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, aa as InfoCard, ab as InfoCardProps, ac as InfoCardTone, ad as IntegrationCard, ae as IntegrationCardProps, af as IntegrationCardStatus, ag as IntegrationsEmptyState, ah as IntegrationsEmptyStateProps, ai as LineAreaChart, aj as LineAreaChartProps, ak as MetricChartCard, al as MetricChartCardProps, am as MetricChartMetric, an as MetricRow, ao as MetricRowItem, ap as MetricRowProps, aq as MetricTile, ar as MetricTileProps, as as Page, at as PageHeader, au as PageHeaderProps, av as PageProps, aw as PlanBadge, ax as PlanBadgeProps, ay as PlanBadgeTone, az as ResourceCard, aA as ResourceCardProps, aB as SearchInput, aC as SearchInputProps, aD as Section, aE as SectionProps, aF as SettingsSection, aG as SettingsSectionHeader, aH as SettingsSectionHeaderProps, aI as SettingsSectionProps, aJ as Sparkline, aK as SparklineProps, aL as StatTile, aM as StatTileProps, aN as StatusBadge, aO as StatusBadgeProps, aP as StatusBadgeTone, aQ as StatusDot, aR as StatusDotProps, aS as StatusDotTone, aT as SubNav, aU as SubNavItem, aV as SubNavProps, aW as SurfaceCard, aX as SurfaceCardProps, aY as THEME_AGENT_INSTRUCTIONS, aZ as TIMBAL_THEME_PRESETS, a_ as ThemePresetGallery, a$ as ThemePresetGalleryProps, b0 as ThemeToCssOptions, b1 as ThemeTokenMap, b2 as TimbalThemeIntent, b3 as TimbalThemePreset, b4 as TimbalThemePresetId, b5 as TimbalThemeStyle, b6 as TimbalThemeStyleProps, b7 as TimbalThemeTokens, b8 as applyThemePreset, b9 as applyTimbalTheme, ba as clearTimbalTheme, bb as connectionRowListClass, bc as createTimbalTheme, bd as getStoredThemePreset, be as getThemePreset, bf as themeToCss, bg as useAppCopilotContext, bh as useAppShellChat } from './chart-artifact-DwfRtQWL.js';
+export { A as APP_KIT_AGENT_INSTRUCTIONS, a as AppChatPanel, b as AppChatPanelProps, c as AppConfirmDialog, d as AppConfirmDialogProps, e as AppCopilotContextValue, f as AppCopilotProvider, g as AppCopilotProviderProps, h as AppShell, i as AppShellChatControls, j as AppShellChatTrigger, k as AppShellChatTriggerProps, l as AppShellProps, m as AppShellTopbar, n as AppShellTopbarProps, B as BreadcrumbItem, o as Breadcrumbs, p as BreadcrumbsProps, C as CHART_PALETTE, q as ChartArtifactView, r as ChartLayout, s as ChartPanel, t as ChartPanelProps, u as ChartSeries, v as ChartVariant, w as ConnectionRow, x as ConnectionRowList, y as ConnectionRowListProps, z as ConnectionRowProps, D as DangerZone, E as DangerZoneAction, F as DangerZoneActionProps, G as DangerZoneProps, H as DataTable, I as DataTableColumn, J as DataTableProps, K as DataTableSort, L as DataTableSortDirection, M as DescriptionItem, N as DescriptionList, O as DescriptionListProps, P as EmptyState, Q as EmptyStateProps, R as ExpandableSection, S as ExpandableSectionProps, T as Field, U as FieldInput, V as FieldInputProps, W as FieldProps, X as FieldRow, Y as FieldRowProps, Z as FieldSelect, _ as FieldSelectProps, $ as FieldSwitch, a0 as FieldSwitchProps, a1 as FieldTextarea, a2 as FieldTextareaProps, a3 as FilterBar, a4 as FilterBarProps, a5 as FloatingUnsavedChangesBar, a6 as FloatingUnsavedChangesBarProps, a7 as FormSection, a8 as FormSectionProps, a9 as INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, aa as InfoCard, ab as InfoCardProps, ac as InfoCardTone, ad as IntegrationCard, ae as IntegrationCardProps, af as IntegrationCardStatus, ag as IntegrationsEmptyState, ah as IntegrationsEmptyStateProps, ai as LineAreaChart, aj as LineAreaChartProps, ak as MetricChartCard, al as MetricChartCardProps, am as MetricChartMetric, an as MetricRow, ao as MetricRowItem, ap as MetricRowProps, aq as MetricTile, ar as MetricTileProps, as as Page, at as PageHeader, au as PageHeaderProps, av as PageProps, aw as PlanBadge, ax as PlanBadgeProps, ay as PlanBadgeTone, az as ResourceCard, aA as ResourceCardProps, aB as SearchInput, aC as SearchInputProps, aD as Section, aE as SectionProps, aF as SettingsSection, aG as SettingsSectionHeader, aH as SettingsSectionHeaderProps, aI as SettingsSectionProps, aJ as Sparkline, aK as SparklineProps, aL as StatTile, aM as StatTileProps, aN as StatusBadge, aO as StatusBadgeProps, aP as StatusBadgeTone, aQ as StatusDot, aR as StatusDotProps, aS as StatusDotTone, aT as SubNav, aU as SubNavItem, aV as SubNavProps, aW as SurfaceCard, aX as SurfaceCardProps, aY as THEME_AGENT_INSTRUCTIONS, aZ as TIMBAL_THEME_PRESETS, a_ as ThemePresetGallery, a$ as ThemePresetGalleryProps, b0 as ThemeShadow, b1 as ThemeToCssOptions, b2 as ThemeTokenMap, b3 as TimbalThemeIntent, b4 as TimbalThemePreset, b5 as TimbalThemePresetId, b6 as TimbalThemeStyle, b7 as TimbalThemeStyleProps, b8 as TimbalThemeTokens, b9 as TimbalThemeTypography, ba as applyThemePreset, bb as applyTimbalTheme, bc as clearTimbalTheme, bd as connectionRowListClass, be as createTimbalTheme, bf as ensureThemeFontLink, bg as getStoredThemePreset, bh as getThemePreset, bi as themeToCss, bj as useAppCopilotContext, bk as useAppShellChat } from './chart-artifact-Bl67kre7.js';
 export { B as Button } from './button-ClSgD6OF.js';
 export { C as ChartArtifact, T as ThreadVariant, a as TimbalChat, b as TimbalChatProps } from './chat-Bed4FQSl.js';
 import 'react';

package/dist/app.esm.js CHANGED Viewed

@@ -62,12 +62,13 @@ import {
   clearTimbalTheme,
   connectionRowListClass,
   createTimbalTheme,
+  ensureThemeFontLink,
   getStoredThemePreset,
   getThemePreset,
   themeToCss,
   useAppCopilotContext,
   useAppShellChat
-} from "./chunk-GBBLAM3G.esm.js";
+} from "./chunk-6YVKCVEP.esm.js";
 import "./chunk-QIABF4KB.esm.js";
 import {
   CHART_PALETTE,
@@ -148,6 +149,7 @@ export {
   clearTimbalTheme,
   connectionRowListClass,
   createTimbalTheme,
+  ensureThemeFontLink,
   getStoredThemePreset,
   getThemePreset,
   themeToCss,