@timbal-ai/timbal-react 1.3.0 → 1.5.0

package/dist/app.d.cts

@@ -1,11 +1,13 @@
-import { A as AppDensity, a as AppDensityClassKey } from './chart-artifact-WDEW9dHT.cjs';
-export { b as APP_DENSITY_CHART_HEIGHT, c as APP_DENSITY_CLASSES, d as APP_KIT_AGENT_INSTRUCTIONS, e as AppChatPanel, f as AppChatPanelProps, g as AppConfirmDialog, h as AppConfirmDialogProps, i as AppCopilotContextValue, j as AppCopilotProvider, k as AppCopilotProviderProps, l as AppShell, m as AppShellChatControls, n as AppShellChatTrigger, o as AppShellChatTriggerProps, p as AppShellNavControls, q as AppShellProps, r as AppShellSidebarTrigger, s as AppShellSidebarTriggerProps, t as AppShellTopbar, u as AppShellTopbarProps, B as BreadcrumbEntry, v as BreadcrumbItem, w as Breadcrumbs, x as BreadcrumbsProps, C as CHART_PALETTE, y as COLOR_UTILITY_PREFIXES, z as ChartArtifactView, D as ChartLayout, E as ChartMargin, F as ChartPanel, G as ChartPanelProps, H as ChartSeries, I as ChartTooltipIndicator, J as ChartVariant, K as ConnectionRow, L as ConnectionRowList, M as ConnectionRowListProps, N as ConnectionRowProps, O as DangerZone, P as DangerZoneAction, Q as DangerZoneActionProps, R as DangerZoneProps, S as DataTable, T as DataTableColumn, U as DataTableProps, V as DataTableSort, W as DataTableSortDirection, X as DescriptionItem, Y as DescriptionList, Z as DescriptionListProps, _ as EmptyState, $ as EmptyStateProps, a0 as ExpandableSection, a1 as ExpandableSectionProps, a2 as Field, a3 as FieldInput, a4 as FieldInputProps, a5 as FieldProps, a6 as FieldRow, a7 as FieldRowProps, a8 as FieldSelect, a9 as FieldSelectProps, aa as FieldSwitch, ab as FieldSwitchProps, ac as FieldTextarea, ad as FieldTextareaProps, ae as FilterBar, af as FilterBarProps, ag as FilterField, ah as FilterFieldProps, ai as FloatingUnsavedChangesBar, aj as FloatingUnsavedChangesBarProps, ak as FormSection, al as FormSectionProps, am as HOUSE_RULES, an as HouseRule, ao as INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, ap as InfoCard, aq as InfoCardProps, ar as InfoCardTone, as as IntegrationCard, at as IntegrationCardProps, au as IntegrationCardStatus, av as IntegrationsEmptyState, aw as IntegrationsEmptyStateProps, ax as LineAreaChart, ay as LineAreaChartProps, az as LintFinding, aA as LintOptions, aB as LintResult, aC as LintSeverity, aD as MetricChartCard, aE as MetricChartCardProps, aF as MetricChartMetric, aG as MetricRow, aH as MetricRowItem, aI as MetricRowProps, aJ as MetricTile, aK as MetricTileProps, aL as Page, aM as PageHeader, aN as PageHeaderProps, aO as PageProps, aP as PieChart, aQ as PieChartProps, aR as PlanBadge, aS as PlanBadgeProps, aT as PlanBadgeTone, aU as RESERVED_GRADIENT_TOKENS, aV as RadarChart, aW as RadarChartProps, aX as RadialChart, aY as RadialChartProps, aZ as ResourceCard, a_ as ResourceCardProps, a$ as ReviewResult, b0 as SEMANTIC_COLOR_TOKENS, b1 as SLOP_BUDGETS, b2 as SearchInput, b3 as SearchInputProps, b4 as Section, b5 as SectionProps, b6 as SemanticColorToken, b7 as SettingsSection, b8 as SettingsSectionHeader, b9 as SettingsSectionHeaderProps, ba as SettingsSectionProps, bb as Sparkline, bc as SparklineProps, bd as StatTile, be as StatTileProps, bf as StatusBadge, bg as StatusBadgeProps, bh as StatusBadgeTone, bi as StatusDot, bj as StatusDotProps, bk as StatusDotTone, bl as SubNav, bm as SubNavItem, bn as SubNavProps, bo as SurfaceCard, bp as SurfaceCardProps, bq as TAILWIND_PALETTE_COLORS, br as THEME_AGENT_INSTRUCTIONS, bs as TIMBAL_THEME_PRESETS, bt as ThemeShadow, bu as ThemeToCssOptions, bv as ThemeTokenMap, bw as TimbalThemeIntent, bx as TimbalThemePreset, by as TimbalThemePresetId, bz as TimbalThemeStyle, bA as TimbalThemeStyleProps, bB as TimbalThemeTokens, bC as TimbalThemeTypography, bD as UI_REVIEW_AGENT_INSTRUCTIONS, bE as UseLiveQueryOptions, bF as UseLiveQueryResult, bG as appDensityClass, bH as applyThemePreset, bI as applyTimbalTheme, bJ as clearTimbalTheme, bK as connectionRowListClass, bL as createTimbalTheme, bM as ensureThemeFontLink, bN as flushBarCategoryGap, bO as flushLineAreaEdgeToEdge, bP as formatLintReport, bQ as getStoredThemePreset, bR as getThemePreset, bS as lintGeneratedUi, bT as resolveChartMargin, bU as resolveTooltipCategory, bV as reviewGeneratedUi, bW as themeToCss, bX as useAppCopilotContext, bY as useAppShellChat, bZ as useAppShellNav, b_ as useInterval, b$ as useLiveQuery } from './chart-artifact-WDEW9dHT.cjs';
+import { A as AppDensity, a as AppDensityClassKey, S as StatusBadgeTone } from './chart-artifact-CS3qyGIY.cjs';
+export { b as APP_DENSITY_CHART_HEIGHT, c as APP_DENSITY_CLASSES, d as APP_KIT_AGENT_INSTRUCTIONS, e as AppChatPanel, f as AppChatPanelProps, g as AppConfirmDialog, h as AppConfirmDialogProps, i as AppCopilotContextValue, j as AppCopilotProvider, k as AppCopilotProviderProps, l as AppPageWidth, m as AppShell, n as AppShellChatControls, o as AppShellChatTrigger, p as AppShellChatTriggerProps, q as AppShellNavControls, r as AppShellProps, s as AppShellSidebarTrigger, t as AppShellSidebarTriggerProps, B as BreadcrumbEntry, u as BreadcrumbItem, v as Breadcrumbs, w as BreadcrumbsProps, C as CHART_PALETTE, x as COLOR_UTILITY_PREFIXES, y as ChartArtifactView, z as ChartLayout, D as ChartMargin, E as ChartPanel, F as ChartPanelProps, G as ChartSeries, H as ChartTooltipIndicator, I as ChartVariant, J as ConnectionRow, K as ConnectionRowList, L as ConnectionRowListProps, M as ConnectionRowProps, N as ContactItem, O as DangerZone, P as DangerZoneAction, Q as DangerZoneActionProps, R as DangerZoneProps, T as DataTable, U as DataTableColumn, V as DataTableProps, W as DataTableSort, X as DataTableSortDirection, Y as DescriptionItem, Z as DescriptionList, _ as DescriptionListProps, $ as EmptyState, a0 as EmptyStateProps, a1 as ExpandableSection, a2 as ExpandableSectionProps, a3 as Field, a4 as FieldInput, a5 as FieldInputProps, a6 as FieldProps, a7 as FieldRow, a8 as FieldRowProps, a9 as FieldSelect, aa as FieldSelectProps, ab as FieldSwitch, ac as FieldSwitchProps, ad as FieldTextarea, ae as FieldTextareaProps, af as FilterBar, ag as FilterBarProps, ah as FilterDropdown, ai as FilterDropdownProps, aj as FilterField, ak as FilterFieldProps, al as FilterState, am as FloatingUnsavedChangesBar, an as FloatingUnsavedChangesBarProps, ao as FormSection, ap as FormSectionProps, aq as HOUSE_RULES, ar as HouseRule, as as INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, at as InfoCard, au as InfoCardProps, av as InfoCardTone, aw as IntegrationCard, ax as IntegrationCardProps, ay as IntegrationCardStatus, az as IntegrationsEmptyState, aA as IntegrationsEmptyStateProps, aB as LineAreaChart, aC as LineAreaChartProps, aD as LintFinding, aE as LintOptions, aF as LintResult, aG as LintSeverity, aH as MetricChartCard, aI as MetricChartCardProps, aJ as MetricChartMetric, aK as MetricRow, aL as MetricRowItem, aM as MetricRowProps, aN as MetricTile, aO as MetricTileProps, aP as Page, aQ as PageHeader, aR as PageHeaderProps, aS as PageProps, aT as PieChart, aU as PieChartProps, aV as PlanBadge, aW as PlanBadgeProps, aX as PlanBadgeTone, aY as RESERVED_GRADIENT_TOKENS, aZ as RadarChart, a_ as RadarChartProps, a$ as RadialChart, b0 as RadialChartProps, b1 as ResourceCard, b2 as ResourceCardProps, b3 as ReviewResult, b4 as SEMANTIC_COLOR_TOKENS, b5 as SLOP_BUDGETS, b6 as SearchInput, b7 as SearchInputProps, b8 as Section, b9 as SectionProps, ba as SemanticColorToken, bb as SettingsSection, bc as SettingsSectionHeader, bd as SettingsSectionHeaderProps, be as SettingsSectionProps, bf as Sparkline, bg as SparklineProps, bh as Stack, bi as StackAlign, bj as StackGap, bk as StackJustify, bl as StackProps, bm as StatTile, bn as StatTileProps, bo as StatTileTone, bp as StatusBadge, bq as StatusBadgeProps, br as StatusDot, bs as StatusDotProps, bt as StatusDotTone, bu as SubNav, bv as SubNavItem, bw as SubNavProps, bx as SurfaceCard, by as SurfaceCardProps, bz as SurfaceCardTone, bA as SurfaceCardVariant, bB as TAILWIND_PALETTE_COLORS, bC as THEME_AGENT_INSTRUCTIONS, bD as TIMBAL_THEME_PRESETS, bE as ThemeShadow, bF as ThemeToCssOptions, bG as ThemeTokenMap, bH as TimbalThemeIntent, bI as TimbalThemePreset, bJ as TimbalThemePresetId, bK as TimbalThemeStyle, bL as TimbalThemeStyleProps, bM as TimbalThemeTokens, bN as TimbalThemeTypography, bO as UI_REVIEW_AGENT_INSTRUCTIONS, bP as UseLiveQueryOptions, bQ as UseLiveQueryResult, bR as appDensityClass, bS as appFilterBarClass, bT as appPageColumnClass, bU as appSearchInputClass, bV as appShellInsetTopClass, bW as appShellTopbarInsetClass, bX as appStatTileClass, bY as appSurfaceCardClass, bZ as applyThemePreset, b_ as applyTimbalTheme, b$ as clearTimbalTheme, c0 as connectionRowListClass, c1 as createTimbalTheme, c2 as ensureThemeFontLink, c3 as flushBarCategoryGap, c4 as flushLineAreaEdgeToEdge, c5 as formatLintReport, c6 as getStoredThemePreset, c7 as getThemePreset, c8 as lintGeneratedUi, c9 as resolveChartMargin, ca as resolveTooltipCategory, cb as reviewGeneratedUi, cc as themeToCss, cd as useAppCopilotContext, ce as useAppShellChat, cf as useAppShellNav, cg as useInterval, ch as useLiveQuery } from './chart-artifact-CS3qyGIY.cjs';
 import { FC, ReactNode } from 'react';
-export { B as Button } from './button-BoyX5pM_.cjs';
+export { A as Avatar, a as AvatarFallback, b as AvatarImage, c as AvatarVariant, B as Banner, d as BannerProps, e as Button, f as ButtonColor, K as Kanban, g as KanbanCardData, h as KanbanCardVariant, i as KanbanColumnData, j as KanbanDensity, k as KanbanDragHandleProps, l as KanbanLocation, m as KanbanMoveEvent, n as KanbanProps, o as KanbanRenderCardContext, p as KanbanTone, T as Timeline, q as TimelineItem, r as TimelineProps, U as UntitledButton, s as UntitledButtonColor, t as UntitledButtonProps, u as UntitledButtonSize } from './kanban-U5xNe9py.cjs';
 export { C as ChartArtifact, a as ChartSeriesConfig, T as ThreadVariant, b as TimbalChat, c as TimbalChatProps } from './chat-ClmzWzCX.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
+import 'radix-ui';
+import '@dnd-kit/core';
 import '@assistant-ui/react';
 
 interface AppDensityProviderProps {
@@ -19,35 +21,78 @@ declare function useAppDensity(): AppDensity;
 /** Resolved layout class for the active density (or an explicit override). */
 declare function useAppDensityClass(key: AppDensityClassKey, override?: AppDensity): string;
 
+interface AlertCardProps {
+    /** The primary title/heading of the alert. */
+    title: ReactNode;
+    /** Detailed description or content of the alert. */
+    description?: ReactNode;
+    /** Optional category badge/tag label. */
+    category?: ReactNode;
+    /** Tone for the category badge. Default `"default"`. */
+    categoryTone?: StatusBadgeTone;
+    /** Optional status badge/tag label. */
+    status?: ReactNode;
+    /** Tone for the status badge. Default `"default"`. */
+    statusTone?: StatusBadgeTone;
+    /** Optional guided action description. If provided, renders with a bold "Action:" prefix at the bottom. */
+    action?: ReactNode;
+    /** Custom trailing element on the right. If omitted and `onClick` is provided, a chevron-right is rendered. */
+    trailing?: ReactNode;
+    /** Whole-card click handler. When provided, the card is rendered as an interactive button. */
+    onClick?: () => void;
+    /** Accessible name for the card button when interactive. */
+    ariaLabel?: string;
+    className?: string;
+}
 /**
- * Class composites for the `app` kit (dashboards, settings, data views).
- * Colours via semantic tokens in styles.css — no hardcoded palette literals.
- */
-/**
- * App page column — centered within the shell content area (right of the
- * sidebar inset). Wide cap so dashboards use the available width instead of
- * leaving large side gutters; the cap only kicks in on ultra-wide displays.
- */
-declare const appPageColumnClass = "mx-auto w-full max-w-[100rem] px-4 md:px-6 lg:px-8";
-/**
- * Topbar horizontal inset — full content width (no `max-w-6xl`), same side
- * padding as the page column so controls sit closer to the viewport edges.
+ * Standardized Alert / Action card component.
+ *
+ * Admits category and status tags, clear titles, descriptive bodies, and automated action
+ * footers, keeping generated UIs beautiful and highly guided.
+ * Fully interactive with safe, neutral-colored hover transitions.
  */
-declare const appShellTopbarInsetClass = "w-full px-4 md:px-6";
-/** Top breathing room for `AppShell` — matches timbal-platform list pages (`pt-4 md:pt-6`). */
-declare const appShellInsetTopClass = "pt-4 md:pt-6";
-/** Card surface — same elevated integration look as in-thread artifacts. */
-declare const appSurfaceCardClass: string;
-/** Metric / stat tile. */
-declare const appStatTileClass: string;
+declare const AlertCard: FC<AlertCardProps>;
+
+interface CatalogCardProps {
+    /** The primary title of the catalog item. */
+    title: ReactNode;
+    /** Sub-title, author, or publisher (e.g., "google"). */
+    subtitle?: ReactNode;
+    /** Logo or icon node, rendered in the top-left next to the title. */
+    logo?: ReactNode;
+    /** External URL for the title link. If provided, renders an external link icon next to the title. */
+    href?: string;
+    /** Header category tag or status badge (e.g., `<StatusBadge>Text Generation</StatusBadge>`). */
+    badge?: ReactNode;
+    /** Main description or body content. */
+    description?: ReactNode;
+    /** Horizontal list of metadata tags, badges, or text strings right above the footer. */
+    tags?: ReactNode[];
+    /** Optional custom links rendered on the bottom-left of the footer. */
+    footerLinks?: Array<{
+        label: ReactNode;
+        href: string;
+    }>;
+    /** Value to copy when clicking the copy button in the bottom-right footer. */
+    copyValue?: string;
+    /** Label for the copy button. Default `"Copy ID"`. */
+    copyLabel?: ReactNode;
+    /** Custom footer actions, rendered at the bottom-right of the footer (replaces copy button if provided). */
+    actions?: ReactNode;
+    /** Whole-card click handler. When provided, the card renders as a focusable button with neutral hover highlight. */
+    onClick?: () => void;
+    /** Accessible name for the card button. */
+    ariaLabel?: string;
+    className?: string;
+}
 /**
- * Filter bar chrome — horizontal controls row.
- * Bottom-aligns children so an unlabeled `SearchInput` lines up with the
- * control in a labeled `Field` + `Select` (labels extend upward).
+ * Standardized high-fidelity Catalog / Model Card component.
+ *
+ * Designed to represent sophisticated marketplace and routing catalog cards (models, datasets, tools).
+ * Features structured headers with logos, links, sub-headers, multiline descriptions, metadata row,
+ * and a separated footer with link lists and automatic copy actions.
+ * Interactive cards have safe, neutral-colored hover animations.
  */
-declare const appFilterBarClass = "flex flex-wrap items-end gap-2";
-/** Search inputs in filter bars — shared control skin (field shape), so a
- *  search field and a dropdown placed side by side match exactly. */
-declare const appSearchInputClass: string;
+declare const CatalogCard: FC<CatalogCardProps>;
 
-export { AppDensity, AppDensityClassKey, AppDensityProvider, type AppDensityProviderProps, appFilterBarClass, appPageColumnClass, appSearchInputClass, appShellInsetTopClass, appShellTopbarInsetClass, appStatTileClass, appSurfaceCardClass, useAppDensity, useAppDensityClass };
+export { AlertCard, type AlertCardProps, AppDensity, AppDensityClassKey, AppDensityProvider, type AppDensityProviderProps, CatalogCard, type CatalogCardProps, StatusBadgeTone, useAppDensity, useAppDensityClass };

package/dist/app.d.ts

@@ -1,11 +1,13 @@
-import { A as AppDensity, a as AppDensityClassKey } from './chart-artifact-Q5QgMtbj.js';
-export { b as APP_DENSITY_CHART_HEIGHT, c as APP_DENSITY_CLASSES, d as APP_KIT_AGENT_INSTRUCTIONS, e as AppChatPanel, f as AppChatPanelProps, g as AppConfirmDialog, h as AppConfirmDialogProps, i as AppCopilotContextValue, j as AppCopilotProvider, k as AppCopilotProviderProps, l as AppShell, m as AppShellChatControls, n as AppShellChatTrigger, o as AppShellChatTriggerProps, p as AppShellNavControls, q as AppShellProps, r as AppShellSidebarTrigger, s as AppShellSidebarTriggerProps, t as AppShellTopbar, u as AppShellTopbarProps, B as BreadcrumbEntry, v as BreadcrumbItem, w as Breadcrumbs, x as BreadcrumbsProps, C as CHART_PALETTE, y as COLOR_UTILITY_PREFIXES, z as ChartArtifactView, D as ChartLayout, E as ChartMargin, F as ChartPanel, G as ChartPanelProps, H as ChartSeries, I as ChartTooltipIndicator, J as ChartVariant, K as ConnectionRow, L as ConnectionRowList, M as ConnectionRowListProps, N as ConnectionRowProps, O as DangerZone, P as DangerZoneAction, Q as DangerZoneActionProps, R as DangerZoneProps, S as DataTable, T as DataTableColumn, U as DataTableProps, V as DataTableSort, W as DataTableSortDirection, X as DescriptionItem, Y as DescriptionList, Z as DescriptionListProps, _ as EmptyState, $ as EmptyStateProps, a0 as ExpandableSection, a1 as ExpandableSectionProps, a2 as Field, a3 as FieldInput, a4 as FieldInputProps, a5 as FieldProps, a6 as FieldRow, a7 as FieldRowProps, a8 as FieldSelect, a9 as FieldSelectProps, aa as FieldSwitch, ab as FieldSwitchProps, ac as FieldTextarea, ad as FieldTextareaProps, ae as FilterBar, af as FilterBarProps, ag as FilterField, ah as FilterFieldProps, ai as FloatingUnsavedChangesBar, aj as FloatingUnsavedChangesBarProps, ak as FormSection, al as FormSectionProps, am as HOUSE_RULES, an as HouseRule, ao as INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, ap as InfoCard, aq as InfoCardProps, ar as InfoCardTone, as as IntegrationCard, at as IntegrationCardProps, au as IntegrationCardStatus, av as IntegrationsEmptyState, aw as IntegrationsEmptyStateProps, ax as LineAreaChart, ay as LineAreaChartProps, az as LintFinding, aA as LintOptions, aB as LintResult, aC as LintSeverity, aD as MetricChartCard, aE as MetricChartCardProps, aF as MetricChartMetric, aG as MetricRow, aH as MetricRowItem, aI as MetricRowProps, aJ as MetricTile, aK as MetricTileProps, aL as Page, aM as PageHeader, aN as PageHeaderProps, aO as PageProps, aP as PieChart, aQ as PieChartProps, aR as PlanBadge, aS as PlanBadgeProps, aT as PlanBadgeTone, aU as RESERVED_GRADIENT_TOKENS, aV as RadarChart, aW as RadarChartProps, aX as RadialChart, aY as RadialChartProps, aZ as ResourceCard, a_ as ResourceCardProps, a$ as ReviewResult, b0 as SEMANTIC_COLOR_TOKENS, b1 as SLOP_BUDGETS, b2 as SearchInput, b3 as SearchInputProps, b4 as Section, b5 as SectionProps, b6 as SemanticColorToken, b7 as SettingsSection, b8 as SettingsSectionHeader, b9 as SettingsSectionHeaderProps, ba as SettingsSectionProps, bb as Sparkline, bc as SparklineProps, bd as StatTile, be as StatTileProps, bf as StatusBadge, bg as StatusBadgeProps, bh as StatusBadgeTone, bi as StatusDot, bj as StatusDotProps, bk as StatusDotTone, bl as SubNav, bm as SubNavItem, bn as SubNavProps, bo as SurfaceCard, bp as SurfaceCardProps, bq as TAILWIND_PALETTE_COLORS, br as THEME_AGENT_INSTRUCTIONS, bs as TIMBAL_THEME_PRESETS, bt as ThemeShadow, bu as ThemeToCssOptions, bv as ThemeTokenMap, bw as TimbalThemeIntent, bx as TimbalThemePreset, by as TimbalThemePresetId, bz as TimbalThemeStyle, bA as TimbalThemeStyleProps, bB as TimbalThemeTokens, bC as TimbalThemeTypography, bD as UI_REVIEW_AGENT_INSTRUCTIONS, bE as UseLiveQueryOptions, bF as UseLiveQueryResult, bG as appDensityClass, bH as applyThemePreset, bI as applyTimbalTheme, bJ as clearTimbalTheme, bK as connectionRowListClass, bL as createTimbalTheme, bM as ensureThemeFontLink, bN as flushBarCategoryGap, bO as flushLineAreaEdgeToEdge, bP as formatLintReport, bQ as getStoredThemePreset, bR as getThemePreset, bS as lintGeneratedUi, bT as resolveChartMargin, bU as resolveTooltipCategory, bV as reviewGeneratedUi, bW as themeToCss, bX as useAppCopilotContext, bY as useAppShellChat, bZ as useAppShellNav, b_ as useInterval, b$ as useLiveQuery } from './chart-artifact-Q5QgMtbj.js';
+import { A as AppDensity, a as AppDensityClassKey, S as StatusBadgeTone } from './chart-artifact-2OTDTRwM.js';
+export { b as APP_DENSITY_CHART_HEIGHT, c as APP_DENSITY_CLASSES, d as APP_KIT_AGENT_INSTRUCTIONS, e as AppChatPanel, f as AppChatPanelProps, g as AppConfirmDialog, h as AppConfirmDialogProps, i as AppCopilotContextValue, j as AppCopilotProvider, k as AppCopilotProviderProps, l as AppPageWidth, m as AppShell, n as AppShellChatControls, o as AppShellChatTrigger, p as AppShellChatTriggerProps, q as AppShellNavControls, r as AppShellProps, s as AppShellSidebarTrigger, t as AppShellSidebarTriggerProps, B as BreadcrumbEntry, u as BreadcrumbItem, v as Breadcrumbs, w as BreadcrumbsProps, C as CHART_PALETTE, x as COLOR_UTILITY_PREFIXES, y as ChartArtifactView, z as ChartLayout, D as ChartMargin, E as ChartPanel, F as ChartPanelProps, G as ChartSeries, H as ChartTooltipIndicator, I as ChartVariant, J as ConnectionRow, K as ConnectionRowList, L as ConnectionRowListProps, M as ConnectionRowProps, N as ContactItem, O as DangerZone, P as DangerZoneAction, Q as DangerZoneActionProps, R as DangerZoneProps, T as DataTable, U as DataTableColumn, V as DataTableProps, W as DataTableSort, X as DataTableSortDirection, Y as DescriptionItem, Z as DescriptionList, _ as DescriptionListProps, $ as EmptyState, a0 as EmptyStateProps, a1 as ExpandableSection, a2 as ExpandableSectionProps, a3 as Field, a4 as FieldInput, a5 as FieldInputProps, a6 as FieldProps, a7 as FieldRow, a8 as FieldRowProps, a9 as FieldSelect, aa as FieldSelectProps, ab as FieldSwitch, ac as FieldSwitchProps, ad as FieldTextarea, ae as FieldTextareaProps, af as FilterBar, ag as FilterBarProps, ah as FilterDropdown, ai as FilterDropdownProps, aj as FilterField, ak as FilterFieldProps, al as FilterState, am as FloatingUnsavedChangesBar, an as FloatingUnsavedChangesBarProps, ao as FormSection, ap as FormSectionProps, aq as HOUSE_RULES, ar as HouseRule, as as INTEGRATION_CATALOG_CARD_HEIGHT_CLASS, at as InfoCard, au as InfoCardProps, av as InfoCardTone, aw as IntegrationCard, ax as IntegrationCardProps, ay as IntegrationCardStatus, az as IntegrationsEmptyState, aA as IntegrationsEmptyStateProps, aB as LineAreaChart, aC as LineAreaChartProps, aD as LintFinding, aE as LintOptions, aF as LintResult, aG as LintSeverity, aH as MetricChartCard, aI as MetricChartCardProps, aJ as MetricChartMetric, aK as MetricRow, aL as MetricRowItem, aM as MetricRowProps, aN as MetricTile, aO as MetricTileProps, aP as Page, aQ as PageHeader, aR as PageHeaderProps, aS as PageProps, aT as PieChart, aU as PieChartProps, aV as PlanBadge, aW as PlanBadgeProps, aX as PlanBadgeTone, aY as RESERVED_GRADIENT_TOKENS, aZ as RadarChart, a_ as RadarChartProps, a$ as RadialChart, b0 as RadialChartProps, b1 as ResourceCard, b2 as ResourceCardProps, b3 as ReviewResult, b4 as SEMANTIC_COLOR_TOKENS, b5 as SLOP_BUDGETS, b6 as SearchInput, b7 as SearchInputProps, b8 as Section, b9 as SectionProps, ba as SemanticColorToken, bb as SettingsSection, bc as SettingsSectionHeader, bd as SettingsSectionHeaderProps, be as SettingsSectionProps, bf as Sparkline, bg as SparklineProps, bh as Stack, bi as StackAlign, bj as StackGap, bk as StackJustify, bl as StackProps, bm as StatTile, bn as StatTileProps, bo as StatTileTone, bp as StatusBadge, bq as StatusBadgeProps, br as StatusDot, bs as StatusDotProps, bt as StatusDotTone, bu as SubNav, bv as SubNavItem, bw as SubNavProps, bx as SurfaceCard, by as SurfaceCardProps, bz as SurfaceCardTone, bA as SurfaceCardVariant, bB as TAILWIND_PALETTE_COLORS, bC as THEME_AGENT_INSTRUCTIONS, bD as TIMBAL_THEME_PRESETS, bE as ThemeShadow, bF as ThemeToCssOptions, bG as ThemeTokenMap, bH as TimbalThemeIntent, bI as TimbalThemePreset, bJ as TimbalThemePresetId, bK as TimbalThemeStyle, bL as TimbalThemeStyleProps, bM as TimbalThemeTokens, bN as TimbalThemeTypography, bO as UI_REVIEW_AGENT_INSTRUCTIONS, bP as UseLiveQueryOptions, bQ as UseLiveQueryResult, bR as appDensityClass, bS as appFilterBarClass, bT as appPageColumnClass, bU as appSearchInputClass, bV as appShellInsetTopClass, bW as appShellTopbarInsetClass, bX as appStatTileClass, bY as appSurfaceCardClass, bZ as applyThemePreset, b_ as applyTimbalTheme, b$ as clearTimbalTheme, c0 as connectionRowListClass, c1 as createTimbalTheme, c2 as ensureThemeFontLink, c3 as flushBarCategoryGap, c4 as flushLineAreaEdgeToEdge, c5 as formatLintReport, c6 as getStoredThemePreset, c7 as getThemePreset, c8 as lintGeneratedUi, c9 as resolveChartMargin, ca as resolveTooltipCategory, cb as reviewGeneratedUi, cc as themeToCss, cd as useAppCopilotContext, ce as useAppShellChat, cf as useAppShellNav, cg as useInterval, ch as useLiveQuery } from './chart-artifact-2OTDTRwM.js';
 import { FC, ReactNode } from 'react';
-export { B as Button } from './button-BoyX5pM_.js';
+export { A as Avatar, a as AvatarFallback, b as AvatarImage, c as AvatarVariant, B as Banner, d as BannerProps, e as Button, f as ButtonColor, K as Kanban, g as KanbanCardData, h as KanbanCardVariant, i as KanbanColumnData, j as KanbanDensity, k as KanbanDragHandleProps, l as KanbanLocation, m as KanbanMoveEvent, n as KanbanProps, o as KanbanRenderCardContext, p as KanbanTone, T as Timeline, q as TimelineItem, r as TimelineProps, U as UntitledButton, s as UntitledButtonColor, t as UntitledButtonProps, u as UntitledButtonSize } from './kanban-U5xNe9py.js';
 export { C as ChartArtifact, a as ChartSeriesConfig, T as ThreadVariant, b as TimbalChat, c as TimbalChatProps } from './chat-ClmzWzCX.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
+import 'radix-ui';
+import '@dnd-kit/core';
 import '@assistant-ui/react';
 
 interface AppDensityProviderProps {
@@ -19,35 +21,78 @@ declare function useAppDensity(): AppDensity;
 /** Resolved layout class for the active density (or an explicit override). */
 declare function useAppDensityClass(key: AppDensityClassKey, override?: AppDensity): string;
 
+interface AlertCardProps {
+    /** The primary title/heading of the alert. */
+    title: ReactNode;
+    /** Detailed description or content of the alert. */
+    description?: ReactNode;
+    /** Optional category badge/tag label. */
+    category?: ReactNode;
+    /** Tone for the category badge. Default `"default"`. */
+    categoryTone?: StatusBadgeTone;
+    /** Optional status badge/tag label. */
+    status?: ReactNode;
+    /** Tone for the status badge. Default `"default"`. */
+    statusTone?: StatusBadgeTone;
+    /** Optional guided action description. If provided, renders with a bold "Action:" prefix at the bottom. */
+    action?: ReactNode;
+    /** Custom trailing element on the right. If omitted and `onClick` is provided, a chevron-right is rendered. */
+    trailing?: ReactNode;
+    /** Whole-card click handler. When provided, the card is rendered as an interactive button. */
+    onClick?: () => void;
+    /** Accessible name for the card button when interactive. */
+    ariaLabel?: string;
+    className?: string;
+}
 /**
- * Class composites for the `app` kit (dashboards, settings, data views).
- * Colours via semantic tokens in styles.css — no hardcoded palette literals.
- */
-/**
- * App page column — centered within the shell content area (right of the
- * sidebar inset). Wide cap so dashboards use the available width instead of
- * leaving large side gutters; the cap only kicks in on ultra-wide displays.
- */
-declare const appPageColumnClass = "mx-auto w-full max-w-[100rem] px-4 md:px-6 lg:px-8";
-/**
- * Topbar horizontal inset — full content width (no `max-w-6xl`), same side
- * padding as the page column so controls sit closer to the viewport edges.
+ * Standardized Alert / Action card component.
+ *
+ * Admits category and status tags, clear titles, descriptive bodies, and automated action
+ * footers, keeping generated UIs beautiful and highly guided.
+ * Fully interactive with safe, neutral-colored hover transitions.
  */
-declare const appShellTopbarInsetClass = "w-full px-4 md:px-6";
-/** Top breathing room for `AppShell` — matches timbal-platform list pages (`pt-4 md:pt-6`). */
-declare const appShellInsetTopClass = "pt-4 md:pt-6";
-/** Card surface — same elevated integration look as in-thread artifacts. */
-declare const appSurfaceCardClass: string;
-/** Metric / stat tile. */
-declare const appStatTileClass: string;
+declare const AlertCard: FC<AlertCardProps>;
+
+interface CatalogCardProps {
+    /** The primary title of the catalog item. */
+    title: ReactNode;
+    /** Sub-title, author, or publisher (e.g., "google"). */
+    subtitle?: ReactNode;
+    /** Logo or icon node, rendered in the top-left next to the title. */
+    logo?: ReactNode;
+    /** External URL for the title link. If provided, renders an external link icon next to the title. */
+    href?: string;
+    /** Header category tag or status badge (e.g., `<StatusBadge>Text Generation</StatusBadge>`). */
+    badge?: ReactNode;
+    /** Main description or body content. */
+    description?: ReactNode;
+    /** Horizontal list of metadata tags, badges, or text strings right above the footer. */
+    tags?: ReactNode[];
+    /** Optional custom links rendered on the bottom-left of the footer. */
+    footerLinks?: Array<{
+        label: ReactNode;
+        href: string;
+    }>;
+    /** Value to copy when clicking the copy button in the bottom-right footer. */
+    copyValue?: string;
+    /** Label for the copy button. Default `"Copy ID"`. */
+    copyLabel?: ReactNode;
+    /** Custom footer actions, rendered at the bottom-right of the footer (replaces copy button if provided). */
+    actions?: ReactNode;
+    /** Whole-card click handler. When provided, the card renders as a focusable button with neutral hover highlight. */
+    onClick?: () => void;
+    /** Accessible name for the card button. */
+    ariaLabel?: string;
+    className?: string;
+}
 /**
- * Filter bar chrome — horizontal controls row.
- * Bottom-aligns children so an unlabeled `SearchInput` lines up with the
- * control in a labeled `Field` + `Select` (labels extend upward).
+ * Standardized high-fidelity Catalog / Model Card component.
+ *
+ * Designed to represent sophisticated marketplace and routing catalog cards (models, datasets, tools).
+ * Features structured headers with logos, links, sub-headers, multiline descriptions, metadata row,
+ * and a separated footer with link lists and automatic copy actions.
+ * Interactive cards have safe, neutral-colored hover animations.
  */
-declare const appFilterBarClass = "flex flex-wrap items-end gap-2";
-/** Search inputs in filter bars — shared control skin (field shape), so a
- *  search field and a dropdown placed side by side match exactly. */
-declare const appSearchInputClass: string;
+declare const CatalogCard: FC<CatalogCardProps>;
 
-export { AppDensity, AppDensityClassKey, AppDensityProvider, type AppDensityProviderProps, appFilterBarClass, appPageColumnClass, appSearchInputClass, appShellInsetTopClass, appShellTopbarInsetClass, appStatTileClass, appSurfaceCardClass, useAppDensity, useAppDensityClass };
+export { AlertCard, type AlertCardProps, AppDensity, AppDensityClassKey, AppDensityProvider, type AppDensityProviderProps, CatalogCard, type CatalogCardProps, StatusBadgeTone, useAppDensity, useAppDensityClass };

package/dist/app.esm.js

@@ -2,6 +2,7 @@ import {
   APP_DENSITY_CHART_HEIGHT,
   APP_DENSITY_CLASSES,
   APP_KIT_AGENT_INSTRUCTIONS,
+  AlertCard,
   AppChatPanel,
   AppConfirmDialog,
   AppCopilotProvider,
@@ -9,9 +10,9 @@ import {
   AppShell,
   AppShellChatTrigger,
   AppShellSidebarTrigger,
-  AppShellTopbar,
   Breadcrumbs,
   COLOR_UTILITY_PREFIXES,
+  CatalogCard,
   ChartPanel,
   ConnectionRow,
   ConnectionRowList,
@@ -28,6 +29,7 @@ import {
   FieldSwitch,
   FieldTextarea,
   FilterBar,
+  FilterDropdown,
   FilterField,
   FloatingUnsavedChangesBar,
   FormSection,
@@ -51,6 +53,7 @@ import {
   SettingsSection,
   SettingsSectionHeader,
   Sparkline,
+  Stack,
   StatTile,
   StatusBadge,
   StatusDot,
@@ -88,7 +91,7 @@ import {
   useAppShellNav,
   useInterval,
   useLiveQuery
-} from "./chunk-YCXN67SD.esm.js";
+} from "./chunk-SZDYIRMB.esm.js";
 import "./chunk-QIABF4KB.esm.js";
 import {
   CHART_PALETTE,
@@ -102,16 +105,26 @@ import {
   flushLineAreaEdgeToEdge,
   resolveChartMargin,
   resolveTooltipCategory
-} from "./chunk-GQBYZRD7.esm.js";
-import "./chunk-UCGVL7ZY.esm.js";
-import "./chunk-VXMM2HX7.esm.js";
+} from "./chunk-IGHBLJV3.esm.js";
 import {
+  Banner,
+  Kanban,
+  Timeline,
+  UntitledButton
+} from "./chunk-5ECRZ5O7.esm.js";
+import "./chunk-ZNYAETFD.esm.js";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
   Button
-} from "./chunk-QU7ET55D.esm.js";
+} from "./chunk-AZL2WANO.esm.js";
+import "./chunk-EDEKQYSU.esm.js";
 export {
   APP_DENSITY_CHART_HEIGHT,
   APP_DENSITY_CLASSES,
   APP_KIT_AGENT_INSTRUCTIONS,
+  AlertCard,
   AppChatPanel,
   AppConfirmDialog,
   AppCopilotProvider,
@@ -119,11 +132,15 @@ export {
   AppShell,
   AppShellChatTrigger,
   AppShellSidebarTrigger,
-  AppShellTopbar,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Banner,
   Breadcrumbs,
   Button,
   CHART_PALETTE,
   COLOR_UTILITY_PREFIXES,
+  CatalogCard,
   ChartArtifactView,
   ChartPanel,
   ConnectionRow,
@@ -141,6 +158,7 @@ export {
   FieldSwitch,
   FieldTextarea,
   FilterBar,
+  FilterDropdown,
   FilterField,
   FloatingUnsavedChangesBar,
   FormSection,
@@ -149,6 +167,7 @@ export {
   InfoCard,
   IntegrationCard,
   IntegrationsEmptyState,
+  Kanban,
   LineAreaChart,
   MetricChartCard,
   MetricRow,
@@ -168,6 +187,7 @@ export {
   SettingsSection,
   SettingsSectionHeader,
   Sparkline,
+  Stack,
   StatTile,
   StatusBadge,
   StatusDot,
@@ -178,7 +198,9 @@ export {
   TIMBAL_THEME_PRESETS,
   TimbalChat,
   TimbalThemeStyle,
+  Timeline,
   UI_REVIEW_AGENT_INSTRUCTIONS,
+  UntitledButton,
   appDensityClass,
   appFilterBarClass,
   appPageColumnClass,