@timbal-ai/timbal-react 0.8.1 → 0.8.2

package/dist/index.cjs

@@ -187,6 +187,7 @@ __export(index_exports, {
   createTimbalTheme: () => createTimbalTheme,
   createUploadAttachmentAdapter: () => createUploadAttachmentAdapter,
   defaultArtifactRenderers: () => defaultArtifactRenderers,
+  ensureThemeFontLink: () => ensureThemeFontLink,
   fetchCurrentUser: () => fetchCurrentUser,
   findMarkdownArtifacts: () => findMarkdownArtifacts,
   getAccessToken: () => getAccessToken,
@@ -6800,6 +6801,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) };
@@ -6835,8 +6868,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");
@@ -6934,7 +6985,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");
@@ -6957,6 +7008,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 {
@@ -6968,13 +7024,43 @@ ${declarations(lightVars, indent)}
 ${declarations(theme.dark, indent)}
 }`);
     }
+    if (theme.fontFamily) {
+      blocks.push(`:root,
+body {
+${indent}font-family: var(--font-sans);
+}`);
+    }
+  }
+  const css = blocks.join("\n\n");
+  if (options.includeFontImport && theme.fontImportUrl) {
+    return `@import url("${theme.fontImportUrl}");
+
+${css}`;
   }
-  return blocks.join("\n\n");
+  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");
@@ -6985,11 +7071,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 isDev2() {
   if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") {
@@ -7000,48 +7088,122 @@ function isDev2() {
 
 // 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(
@@ -7082,18 +7244,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
 
@@ -7110,14 +7283,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).
@@ -7141,14 +7318,17 @@ var TimbalThemeStyle = ({
   if (!tokens) return null;
   const css = themeToCss(tokens, scope ? { scope } : void 0);
   if (!css) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-    "style",
-    {
-      "data-timbal-theme-style": scope ?? "root",
-      nonce,
-      dangerouslySetInnerHTML: { __html: css }
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+    tokens.fontImportUrl ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("link", { rel: "stylesheet", href: tokens.fontImportUrl }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "style",
+      {
+        "data-timbal-theme-style": scope ?? "root",
+        nonce,
+        dangerouslySetInnerHTML: { __html: css }
+      }
+    )
+  ] });
 };
 
 // src/app/data/metrics-shared.tsx
@@ -7314,6 +7494,10 @@ var ThemePresetGallery = ({
                   selected ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-xs font-medium text-primary", children: "Selected" }) : null
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "text-xs leading-snug text-muted-foreground", children: preset.description }),
+                preset.font ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: [
+                  "Aa \xB7 ",
+                  preset.font
+                ] }) : null,
                 /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col gap-2 rounded-lg border border-border bg-background p-2", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Button, { size: "xs", className: "pointer-events-none", children: "Primary" }),
@@ -9956,6 +10140,7 @@ function SelectScrollDownButton({
   createTimbalTheme,
   createUploadAttachmentAdapter,
   defaultArtifactRenderers,
+  ensureThemeFontLink,
   fetchCurrentUser,
   findMarkdownArtifacts,
   getAccessToken,

package/dist/index.d.cts

@@ -6,7 +6,7 @@ import { ToolCallMessagePartComponent } from '@assistant-ui/react';
 export { ActionBarPrimitive, AssistantRuntimeProvider, AttachmentAdapter, AuiIf, ComposerPrimitive, MessagePrimitive, ThreadPrimitive, useComposerRuntime, useMessageRuntime, useThread, useThreadRuntime } from '@assistant-ui/react';
 export { M as ModeToggle, a as ModeToggleProps, b as ModeToggleTheme, S as STUDIO_NAV_MODE, c as StudioModeSwitch, d as StudioModeSwitchProps, e as StudioNavMode, f as StudioSidebar, g as StudioSidebarProps, h as StudioWelcome, i as StudioWelcomeProps, T as TimbalChatShell, j as TimbalChatShellProps, k as TimbalMark, l as TimbalMarkProps, m as TimbalStudioShell, n as TimbalStudioShellProps } from './welcome-COOb05a5.cjs';
 export { M as MarkdownText, T as THREAD_DEFAULT_MAX_WIDTH, a as ToolFallback, b as TooltipIconButton, c as TooltipIconButtonProps, W as WorkforceSelector, d as WorkforceSelectorProps, e as assistantMessageContentClass, f as assistantMessageRootClass, t as threadMessageColumnClass, u as useToolRunning, g as userMessageRootClass } from './layout-C2G-FcER.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, 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, 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';
 import React__default, { FC, ReactNode } from 'react';
 export { Avatar, AvatarFallback, AvatarImage, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, MemoPillSegmentedTabs, PillSegmentedTab, PillSegmentedTabs, PillSegmentedTabsProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Shimmer, TextShimmerProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui.cjs';

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import { ToolCallMessagePartComponent } from '@assistant-ui/react';
 export { ActionBarPrimitive, AssistantRuntimeProvider, AttachmentAdapter, AuiIf, ComposerPrimitive, MessagePrimitive, ThreadPrimitive, useComposerRuntime, useMessageRuntime, useThread, useThreadRuntime } from '@assistant-ui/react';
 export { M as ModeToggle, a as ModeToggleProps, b as ModeToggleTheme, S as STUDIO_NAV_MODE, c as StudioModeSwitch, d as StudioModeSwitchProps, e as StudioNavMode, f as StudioSidebar, g as StudioSidebarProps, h as StudioWelcome, i as StudioWelcomeProps, T as TimbalChatShell, j as TimbalChatShellProps, k as TimbalMark, l as TimbalMarkProps, m as TimbalStudioShell, n as TimbalStudioShellProps } from './welcome-DE08m9ca.js';
 export { M as MarkdownText, T as THREAD_DEFAULT_MAX_WIDTH, a as ToolFallback, b as TooltipIconButton, c as TooltipIconButtonProps, W as WorkforceSelector, d as WorkforceSelectorProps, e as assistantMessageContentClass, f as assistantMessageRootClass, t as threadMessageColumnClass, u as useToolRunning, g as userMessageRootClass } from './layout-BTJyU8wd.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, 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, 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';
 import React__default, { FC, ReactNode } from 'react';
 export { Avatar, AvatarFallback, AvatarImage, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, MemoPillSegmentedTabs, PillSegmentedTab, PillSegmentedTabs, PillSegmentedTabsProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Shimmer, TextShimmerProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui.js';

package/dist/index.esm.js

@@ -55,12 +55,13 @@ import {
   clearTimbalTheme,
   connectionRowListClass,
   createTimbalTheme,
+  ensureThemeFontLink,
   getStoredThemePreset,
   getThemePreset,
   themeToCss,
   useAppCopilotContext,
   useAppShellChat
-} from "./chunk-GBBLAM3G.esm.js";
+} from "./chunk-6YVKCVEP.esm.js";
 import {
   THREAD_DEFAULT_MAX_WIDTH,
   assistantMessageContentClass,
@@ -525,6 +526,7 @@ export {
   createTimbalTheme,
   createUploadAttachmentAdapter,
   defaultArtifactRenderers,
+  ensureThemeFontLink,
   fetchCurrentUser,
   findMarkdownArtifacts,
   getAccessToken,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timbal-ai/timbal-react",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "React components and runtime for building Timbal chat and studio apps",
   "type": "module",
   "main": "dist/index.cjs",