@timbal-ai/timbal-react 0.8.1 → 1.0.0

package/dist/{chart-artifact-DWkqIAK5.d.cts → chart-artifact-DOkwSTjQ.d.cts}

@@ -16,6 +16,179 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  */
 declare const APP_KIT_AGENT_INSTRUCTIONS: string;
 
+/**
+ * The single source of truth for what generated Timbal UIs are *allowed* to
+ * look like — the anti-slop constraint, encoded as data.
+ *
+ * Both the deterministic linter (`ui-lint.ts`) and the agent prompt
+ * (`APP_KIT_AGENT_INSTRUCTIONS`) read from this module, so the rules a model is
+ * told and the rules it is checked against can never drift apart.
+ *
+ * "Slop" = the generic AI-dashboard look: a decorative icon on every tile,
+ * loud green/red trend pills, arbitrary palette colors, gratuitous dividers,
+ * card-in-card nesting, bold giant numbers. Taste lives here, not in prose.
+ *
+ * This is a **public, documented** API (exported from the package root and
+ * `/app`), in the same tier as the theme generator — not an internal class
+ * composite.
+ */
+/**
+ * Semantic color token roots the design system defines (see `styles.css`).
+ * Generated code may only reach for colors through these — `bg-background`,
+ * `text-muted-foreground`, `border-border`, `text-primary`, `bg-destructive`,
+ * the timbal chrome extensions, etc. Anything else is slop.
+ */
+declare const SEMANTIC_COLOR_TOKENS: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-foreground", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "destructive-foreground", "border", "input", "ring", "sidebar", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring", "elevated-from", "elevated-to", "modal-from", "modal-to", "playground-from", "playground-via", "playground-to", "composer-bg", "composer-border", "composer-border-focus", "bubble-user", "bubble-user-foreground", "code-block-bg", "code-header-bg"];
+type SemanticColorToken = (typeof SEMANTIC_COLOR_TOKENS)[number];
+/**
+ * Gradient / fill tokens reserved for **chrome only** (buttons, the elevated
+ * surface, the modal shell, the playground backdrop). They must never decorate
+ * a data card, a stat tile, or a list — that is the canonical "slop gradient".
+ */
+declare const RESERVED_GRADIENT_TOKENS: readonly ["primary-fill-from", "primary-fill-to", "primary-fill-hover-from", "primary-fill-hover-to", "primary-fill-active-from", "primary-fill-active-to", "secondary-fill-hover-from", "secondary-fill-hover-to", "secondary-fill-active-from", "secondary-fill-active-to", "destructive-fill-hover-from", "destructive-fill-hover-to", "destructive-fill-active-from", "destructive-fill-active-to", "ghost-fill-hover", "ghost-fill-active", "elevated-from", "elevated-to", "modal-from", "modal-to", "playground-from", "playground-via", "playground-to"];
+/**
+ * The Tailwind named palette. Any of these followed by a numeric shade
+ * (`-50`..`-950`) in a color utility is a hardcoded color — not a token —
+ * and is rejected by the linter.
+ */
+declare const TAILWIND_PALETTE_COLORS: readonly ["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
+/** Tailwind color-bearing utility prefixes the linter inspects. */
+declare const COLOR_UTILITY_PREFIXES: readonly ["bg", "text", "border", "ring", "from", "via", "to", "fill", "stroke", "decoration", "outline", "shadow", "divide", "accent", "caret"];
+/**
+ * Numeric budgets the linter enforces. Tuned for "tasteful dashboard", not
+ * "icon confetti". A view that needs more icons than this is almost always
+ * decorating instead of communicating.
+ */
+declare const SLOP_BUDGETS: {
+    /** Max decorative/standalone icons rendered in a single generated file. */
+    readonly maxIconsPerView: 6;
+    /** Max consecutive list rows separated by an explicit border/divider before
+     *  it reads as a "ruled table" — prefer spacing or zebra instead. */
+    readonly maxRowDividers: 2;
+};
+/**
+ * House-style rules in plain language. The prompt renders these verbatim and
+ * the linter maps each `id` to a check, so the model is told and tested on the
+ * exact same list.
+ */
+interface HouseRule {
+    id: string;
+    /** One-line imperative the agent reads. */
+    rule: string;
+    /** Why it matters (kept short — models follow rules with rationale better). */
+    why: string;
+    /** A wrong example (kept to a fragment). */
+    slop?: string;
+    /** The tasteful equivalent. */
+    good?: string;
+}
+declare const HOUSE_RULES: readonly HouseRule[];
+
+/**
+ * Deterministic anti-slop linter for generated Timbal UI code.
+ *
+ * Runs a dependency-free line scan over a `.tsx` string and flags the patterns
+ * that turn a clean dashboard into generic AI slop: hardcoded colors, icon
+ * spam, bold giant numbers, divider-per-row lists, gradients on data cards.
+ *
+ * It intentionally avoids a full AST/parser dependency — the checks are
+ * line/regex heuristics tuned for high precision on the patterns that actually
+ * recur in generated output. Feed `formatLintReport(findings)` back to the
+ * generating agent (see `reviewGeneratedUi`) so it can self-correct.
+ *
+ * Public, documented API — exported from the package root and `/app`.
+ */
+type LintSeverity = "error" | "warn";
+interface LintFinding {
+    /** Stable rule id (maps to a HouseRule where applicable). */
+    rule: string;
+    severity: LintSeverity;
+    /** 1-based line number in the supplied source. */
+    line: number;
+    /** Human-readable explanation + fix. */
+    message: string;
+    /** The offending source fragment (trimmed). */
+    snippet: string;
+}
+interface LintResult {
+    findings: LintFinding[];
+    errorCount: number;
+    warnCount: number;
+    /** True when there are no `error`-severity findings. */
+    ok: boolean;
+}
+interface LintOptions {
+    /** Max standalone icons before `icon-spam` fires. Defaults to the budget. */
+    maxIconsPerView?: number;
+    /** Max bordered list rows before `row-divider` fires. Defaults to the budget. */
+    maxRowDividers?: number;
+    /** Treat warnings as errors (so `ok` reflects them too). */
+    strict?: boolean;
+}
+/**
+ * Lint a single generated `.tsx` (or fragment) string for slop.
+ *
+ * @example
+ * ```ts
+ * const { ok, findings } = lintGeneratedUi(generatedTsx);
+ * if (!ok) sendBackToAgent(formatLintReport(findings));
+ * ```
+ */
+declare function lintGeneratedUi(source: string, options?: LintOptions): LintResult;
+/**
+ * Render lint findings as a compact, agent- and human-readable report.
+ * Empty string when there are no findings.
+ */
+declare function formatLintReport(findings: LintFinding[]): string;
+
+/**
+ * Layer 4 of the anti-slop system: the critique loop.
+ *
+ * `reviewGeneratedUi` runs the deterministic linter (Layer 2) and packages the
+ * result into something a generating agent can act on in one round-trip — a
+ * pass/fail verdict plus a ready-to-send revision prompt that names the exact
+ * lines and fixes. The system prompt string (`UI_REVIEW_AGENT_INSTRUCTIONS`)
+ * teaches the model to self-review *before* it returns code, so the loop is
+ * usually closed without a second model call.
+ *
+ * Public, documented API — exported from the package root and `/app`.
+ */
+
+interface ReviewResult {
+    /** Raw linter output. */
+    lint: LintResult;
+    /** True when no blocking (error-severity, or any warning in strict mode) findings remain. */
+    passed: boolean;
+    /** Compact human/agent-readable report ("" when clean). */
+    report: string;
+    /**
+     * A ready-to-send follow-up prompt instructing the agent to fix the findings,
+     * or `null` when the UI passed. Send this back to the model and re-run
+     * `reviewGeneratedUi` on its next output until `passed` is true.
+     */
+    revisionPrompt: string | null;
+}
+/**
+ * Review a generated `.tsx` string for slop and produce an actionable verdict.
+ *
+ * @example
+ * ```ts
+ * let code = await generate(userPrompt);
+ * for (let i = 0; i < 2; i++) {
+ *   const review = reviewGeneratedUi(code, { strict: true });
+ *   if (review.passed) break;
+ *   code = await generate(review.revisionPrompt!); // agent fixes named issues
+ * }
+ * ```
+ */
+declare function reviewGeneratedUi(source: string, options?: LintOptions): ReviewResult;
+/**
+ * Append to a UI-generation agent's system prompt so it self-reviews before
+ * returning code. Pairs with `APP_KIT_AGENT_INSTRUCTIONS` and
+ * `THEME_AGENT_INSTRUCTIONS`.
+ */
+declare const UI_REVIEW_AGENT_INSTRUCTIONS: string;
+
 /**
  * Theme generator — turn brand *intent* into a complete, paired light + dark
  * token set, so agents and apps never hand-author `oklch(...)` or risk a
@@ -41,15 +214,39 @@ interface TimbalThemeTokens {
     light: ThemeTokenMap;
     /** Variables applied in `.dark`. */
     dark: ThemeTokenMap;
-    /** Mode-independent variables (e.g. `--radius`) applied once in `:root`. */
+    /** Mode-independent variables (e.g. `--radius`, `--font-sans`) applied once in `:root`. */
     root?: ThemeTokenMap;
+    /**
+     * Font stack applied as `font-family` on the theme scope (and `body`), so
+     * every component re-skins. Set independently of the `--font-*` vars so the
+     * serializer can emit the actual `font-family` declaration.
+     */
+    fontFamily?: string;
+    /**
+     * Optional stylesheet URL (e.g. a Google Fonts link) that loads the font in
+     * `fontFamily`. Injected as a `<link>` by `applyTimbalTheme` / `TimbalThemeStyle`;
+     * for build-time `themeToCss` the host should add the link itself.
+     */
+    fontImportUrl?: string;
+}
+/** Drop-shadow weight for cards / elevated surfaces. */
+type ThemeShadow = "none" | "hairline" | "soft" | "medium" | "strong";
+interface TimbalThemeTypography {
+    /** Body / UI font stack. Applied as `font-family` and `--font-sans`. */
+    sans: string;
+    /** Optional heading/display stack (`--font-display`; falls back to sans). */
+    display?: string;
+    /** Optional monospace stack (`--font-mono`). */
+    mono?: string;
+    /** Optional stylesheet URL that loads the fonts (Google Fonts CSS, etc.). */
+    importUrl?: string;
 }
 interface TimbalThemeIntent {
     /** Primary brand color — any CSS color: `#4f46e5`, `rgb(...)`, `oklch(...)`. */
     brand: string;
     /** Optional secondary accent. Defaults to a desaturated brand. */
     accent?: string;
-    /** Corner radius in rem (maps to `--radius`). Default keeps the shipped 0.75. */
+    /** Corner radius in rem (maps to `--radius` + `--radius-2xl`). Default 0.75. */
     radius?: number;
     /**
      * Tint neutral surfaces (background / muted / border) toward the brand hue
@@ -57,6 +254,13 @@ interface TimbalThemeIntent {
      * keeps the shipped neutral grays.
      */
     tintNeutrals?: boolean;
+    /**
+     * Full typography personality (font stacks + optional web-font URL). When
+     * set, the generated theme re-skins every component's font.
+     */
+    typography?: TimbalThemeTypography;
+    /** Shadow weight for cards / elevated surfaces. Default keeps the shipped `medium`. */
+    shadow?: ThemeShadow;
 }
 /**
  * Derive a complete paired token set from brand intent. Pure — safe in SSR,
@@ -72,20 +276,35 @@ interface ThemeToCssOptions {
     scope?: string;
     /** Indentation for emitted declarations. Default two spaces. */
     indent?: string;
+    /**
+     * Prepend an `@import url("…")` for the theme's `fontImportUrl`. Off by
+     * default — `@import` must precede all other rules, so this is only safe when
+     * the returned CSS is the entire stylesheet. Prefer loading the font with a
+     * `<link>` (which `applyTimbalTheme` / `TimbalThemeStyle` do automatically).
+     */
+    includeFontImport?: boolean;
 }
 /**
  * Serialize a theme to a CSS string with paired `:root` (light) and `.dark`
  * blocks — the exact shape apps would otherwise hand-author. Writing this in a
- * single block guarantees light + dark stay in sync.
+ * single block guarantees light + dark stay in sync. When the theme carries a
+ * `fontFamily`, a matching `font-family` rule is emitted so every component
+ * re-skins (scoped to the subtree for previews, or `:root` + `body` globally).
  */
 declare function themeToCss(theme: TimbalThemeTokens, options?: ThemeToCssOptions): string;
+/**
+ * Ensure a stylesheet `<link>` for a web-font URL exists in `<head>`. Idempotent
+ * per URL; replaces any previously injected theme font link. No-op in SSR.
+ */
+declare function ensureThemeFontLink(url: string | undefined): void;
 /**
  * Apply a theme at runtime by injecting (or replacing) a single managed
- * `<style>` element in `<head>`. Works with the `.dark` class toggle used by
- * `next-themes` / `ModeToggle` — both light and dark blocks are written, so
- * switching mode never desyncs. No-op in SSR / non-DOM contexts.
+ * `<style>` element in `<head>` (and a font `<link>` when the theme carries
+ * one). Works with the `.dark` class toggle used by `next-themes` / `ModeToggle`
+ * — both light and dark blocks are written, so switching mode never desyncs.
+ * No-op in SSR / non-DOM contexts.
  *
- * Returns a disposer that removes the injected style.
+ * Returns a disposer that removes the injected style + font link.
  */
 declare function applyTimbalTheme(theme: TimbalThemeTokens): () => void;
 /** Remove a runtime theme injected by {@link applyTimbalTheme}. */
@@ -101,7 +320,7 @@ declare function clearTimbalTheme(): void;
  * infinite palette for both humans and models.
  */
 
-type TimbalThemePresetId = "platform" | "indigo" | "violet" | "forest" | "warm" | "slate";
+type TimbalThemePresetId = "platform" | "indigo" | "violet" | "forest" | "warm" | "slate" | "folio" | "carbon";
 interface TimbalThemePreset {
     id: TimbalThemePresetId;
     /** Short human label for pickers. */
@@ -110,9 +329,12 @@ interface TimbalThemePreset {
     description: string;
     /** Representative swatch color (CSS) for chips / previews. */
     swatch: string;
+    /** Human-readable font name (for picker chips). `null` = system default. */
+    font: string | null;
     /**
-     * Token overrides. `platform` is the shipped neutral palette and has empty
-     * maps (no overrides — `styles.css` defaults apply).
+     * Full personality token set — color + radius + shadow + typography.
+     * `platform` is the shipped neutral palette and has empty maps (no overrides;
+     * `styles.css` defaults apply).
      */
     tokens: TimbalThemeTokens;
 }
@@ -615,13 +837,15 @@ interface SubNavProps {
  */
 declare const SubNav: FC<SubNavProps>;
 
-interface BreadcrumbItem {
+interface BreadcrumbEntry {
     label: ReactNode;
     href?: string;
     onClick?: () => void;
 }
+/** @deprecated Use `BreadcrumbEntry` — avoids clashing with the UI `BreadcrumbItem` primitive. */
+type BreadcrumbItem = BreadcrumbEntry;
 interface BreadcrumbsProps {
-    items: BreadcrumbItem[];
+    items: BreadcrumbEntry[];
     className?: string;
 }
 declare const Breadcrumbs: FC<BreadcrumbsProps>;
@@ -917,4 +1141,4 @@ interface ChartArtifactViewProps {
  */
 declare const ChartArtifactView: FC<ChartArtifactViewProps>;
 
-export { FieldSwitch as $, APP_KIT_AGENT_INSTRUCTIONS as A, type BreadcrumbItem as B, CHART_PALETTE as C, DangerZone as D, DangerZoneAction as E, type DangerZoneActionProps as F, type DangerZoneProps as G, DataTable as H, type DataTableColumn as I, type DataTableProps as J, type DataTableSort as K, type DataTableSortDirection as L, type DescriptionItem as M, DescriptionList as N, type DescriptionListProps as O, EmptyState as P, type EmptyStateProps as Q, ExpandableSection as R, type ExpandableSectionProps as S, Field as T, FieldInput as U, type FieldInputProps as V, type FieldProps as W, FieldRow as X, type FieldRowProps as Y, FieldSelect as Z, type FieldSelectProps as _, AppChatPanel as a, type ThemePresetGalleryProps as a$, type FieldSwitchProps as a0, FieldTextarea as a1, type FieldTextareaProps as a2, FilterBar as a3, type FilterBarProps as a4, FloatingUnsavedChangesBar as a5, type FloatingUnsavedChangesBarProps as a6, FormSection as a7, type FormSectionProps as a8, INTEGRATION_CATALOG_CARD_HEIGHT_CLASS as a9, type ResourceCardProps as aA, SearchInput as aB, type SearchInputProps as aC, Section as aD, type SectionProps as aE, SettingsSection as aF, SettingsSectionHeader as aG, type SettingsSectionHeaderProps as aH, type SettingsSectionProps as aI, Sparkline as aJ, type SparklineProps as aK, StatTile as aL, type StatTileProps as aM, StatusBadge as aN, type StatusBadgeProps as aO, type StatusBadgeTone as aP, StatusDot as aQ, type StatusDotProps as aR, type StatusDotTone as aS, SubNav as aT, type SubNavItem as aU, type SubNavProps as aV, SurfaceCard as aW, type SurfaceCardProps as aX, THEME_AGENT_INSTRUCTIONS as aY, TIMBAL_THEME_PRESETS as aZ, ThemePresetGallery as a_, InfoCard as aa, type InfoCardProps as ab, type InfoCardTone as ac, IntegrationCard as ad, type IntegrationCardProps as ae, type IntegrationCardStatus as af, IntegrationsEmptyState as ag, type IntegrationsEmptyStateProps as ah, LineAreaChart as ai, type LineAreaChartProps as aj, MetricChartCard as ak, type MetricChartCardProps as al, type MetricChartMetric as am, MetricRow as an, type MetricRowItem as ao, type MetricRowProps as ap, MetricTile as aq, type MetricTileProps as ar, Page as as, PageHeader as at, type PageHeaderProps as au, type PageProps as av, PlanBadge as aw, type PlanBadgeProps as ax, type PlanBadgeTone as ay, ResourceCard as az, type AppChatPanelProps as b, type ThemeToCssOptions as b0, type ThemeTokenMap as b1, type TimbalThemeIntent as b2, type TimbalThemePreset as b3, type TimbalThemePresetId as b4, TimbalThemeStyle as b5, type TimbalThemeStyleProps as b6, type TimbalThemeTokens as b7, applyThemePreset as b8, applyTimbalTheme as b9, clearTimbalTheme as ba, connectionRowListClass as bb, createTimbalTheme as bc, getStoredThemePreset as bd, getThemePreset as be, themeToCss as bf, useAppCopilotContext as bg, useAppShellChat as bh, AppConfirmDialog as c, type AppConfirmDialogProps as d, type AppCopilotContextValue as e, AppCopilotProvider as f, type AppCopilotProviderProps as g, AppShell as h, type AppShellChatControls as i, AppShellChatTrigger as j, type AppShellChatTriggerProps as k, type AppShellProps as l, AppShellTopbar as m, type AppShellTopbarProps as n, Breadcrumbs as o, type BreadcrumbsProps as p, ChartArtifactView as q, type ChartLayout as r, ChartPanel as s, type ChartPanelProps as t, type ChartSeries as u, type ChartVariant as v, ConnectionRow as w, ConnectionRowList as x, type ConnectionRowListProps as y, type ConnectionRowProps as z };
+export { FieldSelect as $, APP_KIT_AGENT_INSTRUCTIONS as A, type BreadcrumbEntry as B, CHART_PALETTE as C, type ConnectionRowListProps as D, type ConnectionRowProps as E, DangerZone as F, DangerZoneAction as G, type DangerZoneActionProps as H, type DangerZoneProps as I, DataTable as J, type DataTableColumn as K, type DataTableProps as L, type DataTableSort as M, type DataTableSortDirection as N, type DescriptionItem as O, DescriptionList as P, type DescriptionListProps as Q, EmptyState as R, type EmptyStateProps as S, ExpandableSection as T, type ExpandableSectionProps as U, Field as V, FieldInput as W, type FieldInputProps as X, type FieldProps as Y, FieldRow as Z, type FieldRowProps as _, AppChatPanel as a, type StatusBadgeProps as a$, type FieldSelectProps as a0, FieldSwitch as a1, type FieldSwitchProps as a2, FieldTextarea as a3, type FieldTextareaProps as a4, FilterBar as a5, type FilterBarProps as a6, FloatingUnsavedChangesBar as a7, type FloatingUnsavedChangesBarProps as a8, FormSection as a9, Page as aA, PageHeader as aB, type PageHeaderProps as aC, type PageProps as aD, PlanBadge as aE, type PlanBadgeProps as aF, type PlanBadgeTone as aG, RESERVED_GRADIENT_TOKENS as aH, ResourceCard as aI, type ResourceCardProps as aJ, type ReviewResult as aK, SEMANTIC_COLOR_TOKENS as aL, SLOP_BUDGETS as aM, SearchInput as aN, type SearchInputProps as aO, Section as aP, type SectionProps as aQ, type SemanticColorToken as aR, SettingsSection as aS, SettingsSectionHeader as aT, type SettingsSectionHeaderProps as aU, type SettingsSectionProps as aV, Sparkline as aW, type SparklineProps as aX, StatTile as aY, type StatTileProps as aZ, StatusBadge as a_, type FormSectionProps as aa, HOUSE_RULES as ab, type HouseRule as ac, INTEGRATION_CATALOG_CARD_HEIGHT_CLASS as ad, InfoCard as ae, type InfoCardProps as af, type InfoCardTone as ag, IntegrationCard as ah, type IntegrationCardProps as ai, type IntegrationCardStatus as aj, IntegrationsEmptyState as ak, type IntegrationsEmptyStateProps as al, LineAreaChart as am, type LineAreaChartProps as an, type LintFinding as ao, type LintOptions as ap, type LintResult as aq, type LintSeverity as ar, MetricChartCard as as, type MetricChartCardProps as at, type MetricChartMetric as au, MetricRow as av, type MetricRowItem as aw, type MetricRowProps as ax, MetricTile as ay, type MetricTileProps as az, type AppChatPanelProps as b, type StatusBadgeTone as b0, StatusDot as b1, type StatusDotProps as b2, type StatusDotTone as b3, SubNav as b4, type SubNavItem as b5, type SubNavProps as b6, SurfaceCard as b7, type SurfaceCardProps as b8, TAILWIND_PALETTE_COLORS as b9, themeToCss as bA, useAppCopilotContext as bB, useAppShellChat as bC, THEME_AGENT_INSTRUCTIONS as ba, TIMBAL_THEME_PRESETS as bb, ThemePresetGallery as bc, type ThemePresetGalleryProps as bd, type ThemeShadow as be, type ThemeToCssOptions as bf, type ThemeTokenMap as bg, type TimbalThemeIntent as bh, type TimbalThemePreset as bi, type TimbalThemePresetId as bj, TimbalThemeStyle as bk, type TimbalThemeStyleProps as bl, type TimbalThemeTokens as bm, type TimbalThemeTypography as bn, UI_REVIEW_AGENT_INSTRUCTIONS as bo, applyThemePreset as bp, applyTimbalTheme as bq, clearTimbalTheme as br, connectionRowListClass as bs, createTimbalTheme as bt, ensureThemeFontLink as bu, formatLintReport as bv, getStoredThemePreset as bw, getThemePreset as bx, lintGeneratedUi as by, reviewGeneratedUi as bz, AppConfirmDialog as c, type AppConfirmDialogProps as d, type AppCopilotContextValue as e, AppCopilotProvider as f, type AppCopilotProviderProps as g, AppShell as h, type AppShellChatControls as i, AppShellChatTrigger as j, type AppShellChatTriggerProps as k, type AppShellProps as l, AppShellTopbar as m, type AppShellTopbarProps as n, type BreadcrumbItem as o, Breadcrumbs as p, type BreadcrumbsProps as q, COLOR_UTILITY_PREFIXES as r, ChartArtifactView as s, type ChartLayout as t, ChartPanel as u, type ChartPanelProps as v, type ChartSeries as w, type ChartVariant as x, ConnectionRow as y, ConnectionRowList as z };

package/dist/chat.cjs

@@ -4383,6 +4383,28 @@ function TimbalChat({
 
 // src/chat/workforce-selector.tsx
 var import_lucide_react9 = require("lucide-react");
+
+// src/design/control-surface.ts
+var controlSurfaceClass = cn(
+  TIMBAL_V2_SECONDARY_CHROME,
+  "text-sm text-foreground outline-none",
+  "placeholder:text-muted-foreground/70",
+  "focus-visible:ring-2 focus-visible:ring-foreground/10",
+  "focus-within:ring-2 focus-within:ring-foreground/10",
+  "disabled:cursor-not-allowed disabled:opacity-50",
+  "data-[placeholder]:text-muted-foreground"
+);
+var overlayAnimationClass = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
+var overlaySurfaceClass = cn(
+  "z-[80] border border-border bg-popover text-popover-foreground shadow-card",
+  overlayAnimationClass
+);
+var overlayListPanelClass = cn(
+  overlaySurfaceClass,
+  "overflow-hidden rounded-lg p-0 outline-hidden"
+);
+
+// src/chat/workforce-selector.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var WorkforceSelector = ({
   workforces,
@@ -4399,8 +4421,8 @@ var WorkforceSelector = ({
     {
       className: cn(
         "aui-workforce-selector relative inline-flex items-center",
+        controlSurfaceClass,
         studioTopbarPillHeightClass,
-        studioSecondaryChromeClass,
         "rounded-full",
         className
       ),

package/dist/chat.esm.js

@@ -7,7 +7,7 @@ import {
 } from "./chunk-KC5QLVUG.esm.js";
 import {
   WorkforceSelector
-} from "./chunk-CFU3YDTV.esm.js";
+} from "./chunk-RZ6QC6RG.esm.js";
 import {
   Composer,
   ComposerAddAttachment,
@@ -24,8 +24,8 @@ import {
   useTimbalRuntime,
   useTimbalStream,
   useToolRunning
-} from "./chunk-5ZKLPWVN.esm.js";
-import "./chunk-QVAUCVQA.esm.js";
+} from "./chunk-SNLXVG7H.esm.js";
+import "./chunk-FOD67Z6G.esm.js";
 export {
   Composer,
   ComposerAddAttachment,

package/dist/{chunk-OISVICYF.esm.js → chunk-AYHOVAMI.esm.js}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-QVAUCVQA.esm.js";
+} from "./chunk-FOD67Z6G.esm.js";
 
 // src/ui/pill-segmented-tabs.tsx
 import {

package/dist/{chunk-VWHHKAHN.esm.js → chunk-C6IXFM4T.esm.js}

@@ -20,7 +20,7 @@ import {
 } from "./chunk-QIABF4KB.esm.js";
 import {
   WorkforceSelector
-} from "./chunk-CFU3YDTV.esm.js";
+} from "./chunk-RZ6QC6RG.esm.js";
 import {
   Composer,
   TimbalChat,
@@ -43,10 +43,10 @@ import {
   studioTopbarIconPillClass,
   studioTopbarPillHeightClass,
   useTimbalRuntime
-} from "./chunk-5ZKLPWVN.esm.js";
+} from "./chunk-SNLXVG7H.esm.js";
 import {
   PillSegmentedTabs
-} from "./chunk-OISVICYF.esm.js";
+} from "./chunk-AYHOVAMI.esm.js";
 import {
   Avatar,
   AvatarFallback,
@@ -56,7 +56,7 @@ import {
   TooltipContent,
   TooltipTrigger,
   cn
-} from "./chunk-QVAUCVQA.esm.js";
+} from "./chunk-FOD67Z6G.esm.js";
 
 // src/hooks/use-workforces.ts
 import { useEffect, useMemo, useRef, useState } from "react";

package/dist/{chunk-QVAUCVQA.esm.js → chunk-FOD67Z6G.esm.js}

@@ -311,6 +311,39 @@ function Button({
   );
 }
 
+// src/design/control-surface.ts
+var CONTROL_SIZE = {
+  sm: "h-9 px-3",
+  default: "h-10 px-3"
+};
+var CONTROL_SHAPE = {
+  field: "rounded-lg",
+  pill: "rounded-full"
+};
+var controlSurfaceClass = cn(
+  TIMBAL_V2_SECONDARY_CHROME,
+  "text-sm text-foreground outline-none",
+  "placeholder:text-muted-foreground/70",
+  "focus-visible:ring-2 focus-visible:ring-foreground/10",
+  "focus-within:ring-2 focus-within:ring-foreground/10",
+  "disabled:cursor-not-allowed disabled:opacity-50",
+  "data-[placeholder]:text-muted-foreground"
+);
+function controlClass(options = {}, className) {
+  const { size = "default", shape = "field" } = options;
+  return cn(controlSurfaceClass, CONTROL_SIZE[size], CONTROL_SHAPE[shape], className);
+}
+var overlayAnimationClass = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
+var overlaySurfaceClass = cn(
+  "z-[80] border border-border bg-popover text-popover-foreground shadow-card",
+  overlayAnimationClass
+);
+var overlayListPanelClass = cn(
+  overlaySurfaceClass,
+  "overflow-hidden rounded-lg p-0 outline-hidden"
+);
+var overlayItemClass = "relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
+
 // src/ui/tooltip.tsx
 import { Tooltip as TooltipPrimitive } from "radix-ui";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -587,13 +620,22 @@ var Shimmer = memo(ShimmerComponent);
 export {
   cn,
   TIMBAL_V2_ELEVATED_GRADIENT,
+  TIMBAL_V2_MODAL_SURFACE,
   TIMBAL_V2_SWITCH_TRACK_OFF,
   TIMBAL_V2_SWITCH_THUMB,
   TIMBAL_V2_ELEVATED_SURFACE,
   TIMBAL_V2_SECONDARY_CHROME,
   TIMBAL_V2_LOGO_TILE,
   TimbalV2Button,
+  buttonVariants,
   Button,
+  CONTROL_SIZE,
+  controlSurfaceClass,
+  controlClass,
+  overlayAnimationClass,
+  overlaySurfaceClass,
+  overlayListPanelClass,
+  overlayItemClass,
   TooltipProvider,
   Tooltip,
   TooltipTrigger,