@timbal-ai/timbal-react 0.6.0 → 0.7.0

package/dist/chart-artifact-BFDz8Tf9.d.ts

@@ -0,0 +1,756 @@
+import { FC, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes } from 'react';
+import { w as TimbalRuntimeProviderProps, q as ThreadProps, C as ChartArtifact } from './chat-CWtQWDtJ.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Copy-paste into a workforce agent system prompt (or codegen tool context) so the
+ * model knows which app-kit components exist and how to compose them — without
+ * copying a single reference layout.
+ *
+ * @example
+ * ```ts
+ * import { APP_KIT_AGENT_INSTRUCTIONS } from "@timbal-ai/timbal-react/app";
+ *
+ * const systemPrompt = `${basePrompt}\n\n${APP_KIT_AGENT_INSTRUCTIONS}`;
+ * ```
+ */
+declare const APP_KIT_AGENT_INSTRUCTIONS: string;
+
+interface AppShellProps {
+    /** Primary navigation (e.g. StudioSidebar or custom rail). */
+    sidebar?: ReactNode;
+    /**
+     * Global top bar (login, theme, account) — spans the full shell width (not
+     * the page `max-w-6xl` column). Use `<AppShellTopbar start actions />`.
+     */
+    topbar?: ReactNode;
+    /** @deprecated Use `topbar`. */
+    header?: ReactNode;
+    /** Main routed content. */
+    children: ReactNode;
+    /**
+     * Floating copilot panel (e.g. `<AppChatPanel />`). Overlays the dashboard;
+     * does not shrink the main column.
+     */
+    chat?: ReactNode;
+    /** Floating panel width. Default: `24rem`. */
+    chatWidth?: string;
+    /**
+     * Floating panel height. Omit to stretch between vertical shell insets
+     * (full page height with `top` / `bottom` margins).
+     */
+    chatHeight?: string;
+    /** Controlled open state for the floating panel. */
+    chatOpen?: boolean;
+    /** Uncontrolled initial open state. Default: `false`. */
+    defaultChatOpen?: boolean;
+    onChatOpenChange?: (open: boolean) => void;
+    /** Show floating open/close control. Default: `true`. */
+    chatCollapsible?: boolean;
+    /** Label on the floating open trigger. Default: `Assistant`. */
+    chatTriggerLabel?: string;
+    /** Hide the built-in floating trigger (use your own + `useAppShellChat`). */
+    hideChatTrigger?: boolean;
+    className?: string;
+    mainClassName?: string;
+}
+/**
+ * App-first layout: sidebar + topbar + main, with optional **floating** copilot.
+ */
+declare const AppShell: FC<AppShellProps>;
+
+interface AppShellTopbarProps {
+    /** Leading cluster — mobile menu, product mark, org switcher. */
+    start?: ReactNode;
+    /** Trailing cluster — theme toggle, login, account menu. */
+    actions?: ReactNode;
+    /** Optional center content between start and actions. */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * Global app chrome row inside `AppShell` — auth, theme, and account actions.
+ * Spans the full shell width via the shell’s `topbar` slot (wider than `<Page />`).
+ */
+declare const AppShellTopbar: FC<AppShellTopbarProps>;
+
+interface AppShellChatTriggerProps {
+    className?: string;
+    label?: string;
+    /**
+     * `floating` — primary pill fixed bottom-right (matches shell default).
+     * `inline` — for topbar/actions rows; text only, no icons.
+     */
+    placement?: "floating" | "inline";
+}
+/** Opens the floating copilot. Text only — no icons. */
+declare const AppShellChatTrigger: FC<AppShellChatTriggerProps>;
+
+interface AppShellChatControls {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    toggle: () => void;
+    collapsible: boolean;
+}
+declare function useAppShellChat(): AppShellChatControls | null;
+
+interface PageHeaderProps {
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}
+declare const PageHeader: FC<PageHeaderProps>;
+
+interface PageProps extends PageHeaderProps {
+    children: ReactNode;
+    /** Slot above the title (breadcrumbs). */
+    breadcrumbs?: ReactNode;
+    className?: string;
+}
+declare const Page: FC<PageProps>;
+
+interface SectionProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+declare const Section: FC<SectionProps>;
+
+type AppCopilotContextValue = Record<string, unknown>;
+interface AppCopilotProviderProps {
+    value: AppCopilotContextValue;
+    children: ReactNode;
+}
+/** Supplies page/dashboard context for `AppChatPanel` and agent tools. */
+declare const AppCopilotProvider: FC<AppCopilotProviderProps>;
+declare function useAppCopilotContext(): AppCopilotContextValue;
+
+interface AppChatPanelProps extends Omit<TimbalRuntimeProviderProps, "children">, Omit<ThreadProps, "variant" | "maxWidth"> {
+    className?: string;
+}
+/**
+ * Floating copilot body — `TimbalRuntimeProvider` + compact `Thread`.
+ * Render inside `AppShell` `chat`; open/close via shell trigger or `useAppShellChat`.
+ */
+declare const AppChatPanel: FC<AppChatPanelProps>;
+
+interface SurfaceCardProps {
+    children: ReactNode;
+    className?: string;
+}
+declare const SurfaceCard: FC<SurfaceCardProps>;
+
+interface StatTileProps {
+    label: ReactNode;
+    value: ReactNode;
+    hint?: ReactNode;
+    className?: string;
+}
+declare const StatTile: FC<StatTileProps>;
+
+interface EmptyStateProps {
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+}
+declare const EmptyState: FC<EmptyStateProps>;
+
+declare const statusBadgeToneClass: {
+    readonly default: "bg-muted text-foreground";
+    readonly primary: "bg-primary/10 text-primary";
+    readonly success: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400";
+    readonly warn: "bg-amber-500/10 text-amber-600 dark:text-amber-400";
+    readonly muted: "bg-muted/80 text-muted-foreground";
+};
+type StatusBadgeTone = keyof typeof statusBadgeToneClass;
+interface StatusBadgeProps {
+    children: ReactNode;
+    tone?: StatusBadgeTone;
+    className?: string;
+}
+declare const StatusBadge: FC<StatusBadgeProps>;
+
+interface AppConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm: () => void;
+    destructive?: boolean;
+    className?: string;
+}
+/**
+ * Confirm/cancel dialog for app flows (delete row, discard changes, etc.).
+ */
+declare const AppConfirmDialog: FC<AppConfirmDialogProps>;
+
+type InfoCardTone = "neutral" | "info" | "success" | "warn" | "danger";
+interface InfoCardProps {
+    title?: ReactNode;
+    children?: ReactNode;
+    /** Leading icon node. */
+    icon?: ReactNode;
+    /** Trailing CTA / action. */
+    action?: ReactNode;
+    tone?: InfoCardTone;
+    className?: string;
+}
+/**
+ * Soft info / callout panel with optional icon, title, body and CTA. For tips,
+ * empty hints, upsell nudges, and read-only notices.
+ */
+declare const InfoCard: FC<InfoCardProps>;
+
+type StatusDotTone = "online" | "busy" | "offline" | "error" | "neutral";
+interface StatusDotProps {
+    tone?: StatusDotTone;
+    /** Optional label rendered to the right of the dot. */
+    label?: ReactNode;
+    /** Soft pulse halo for live/online states. */
+    pulse?: boolean;
+    className?: string;
+}
+/** Tiny status indicator dot, optionally labeled and pulsing. */
+declare const StatusDot: FC<StatusDotProps>;
+
+interface DescriptionItem {
+    label: ReactNode;
+    value: ReactNode;
+}
+interface DescriptionListProps {
+    items: DescriptionItem[];
+    /** Stack label above value instead of two columns. */
+    stacked?: boolean;
+    className?: string;
+}
+/** Read-only key/value metadata list (resource details, settings summaries). */
+declare const DescriptionList: FC<DescriptionListProps>;
+
+interface ExpandableSectionProps {
+    title: ReactNode;
+    /** Leading icon node. */
+    icon?: ReactNode;
+    /** Small count / badge after the title. */
+    count?: ReactNode;
+    children: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+/** Collapsible section with an animated body. Controlled or uncontrolled. */
+declare const ExpandableSection: FC<ExpandableSectionProps>;
+
+interface ResourceCardProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Logo / icon node, rendered in a rounded tile. */
+    media?: ReactNode;
+    /** Status pill or badge (top-right). */
+    badge?: ReactNode;
+    /** Footer metadata (e.g. last updated, owner). */
+    footer?: ReactNode;
+    /** Trailing action in the footer (e.g. sparkline, menu). */
+    action?: ReactNode;
+    /** Whole-card click — makes the card a button. */
+    onClick?: () => void;
+    /** Accessible name when `title` is not plain text. */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * Project / agent / dataset card — same elevated surface as integration catalog tiles.
+ */
+declare const ResourceCard: FC<ResourceCardProps>;
+
+interface SettingsSectionHeaderProps {
+    title: ReactNode;
+    description?: ReactNode;
+    className?: string;
+}
+/** Title + description block shared across settings pages. */
+declare const SettingsSectionHeader: FC<SettingsSectionHeaderProps>;
+interface SettingsSectionProps {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Rendered under the description in the left rail (e.g. a primary CTA). */
+    descriptionFooter?: ReactNode;
+    children: ReactNode;
+    /** Drop the top divider (first section in a stack). */
+    noBorderTop?: boolean;
+    className?: string;
+}
+/**
+ * Two-column settings block: a compact title/description rail on the left and
+ * the controls on the right. Stacks on small screens. The canonical settings
+ * page grammar from the platform — purely presentational.
+ */
+declare const SettingsSection: FC<SettingsSectionProps>;
+
+interface FieldRowProps {
+    label: ReactNode;
+    /** The control(s) — input, switch, select, button, etc. */
+    children: ReactNode;
+    description?: ReactNode;
+    /** Place the control inline to the right of the label (good for switches). */
+    inline?: boolean;
+    htmlFor?: string;
+    className?: string;
+}
+/**
+ * Labeled settings row: label + optional description on one side, control(s)
+ * on the other. `inline` puts the control to the right (toggles); stacked
+ * otherwise (inputs/textareas).
+ */
+declare const FieldRow: FC<FieldRowProps>;
+
+interface FloatingUnsavedChangesBarProps {
+    visible: boolean;
+    /** Message on the left (e.g. "Unsaved changes"). */
+    message?: ReactNode;
+    discardLabel?: ReactNode;
+    saveLabel?: ReactNode;
+    isSaving?: boolean;
+    saveDisabled?: boolean;
+    onDiscard?: () => void;
+    onSave?: () => void;
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * Viewport-fixed discard/save pill, portaled to `document.body` so parent
+ * transforms and overflow scrollers never clip it. Springs in from the bottom.
+ */
+declare const FloatingUnsavedChangesBar: FC<FloatingUnsavedChangesBarProps>;
+
+interface DangerZoneActionProps {
+    title: ReactNode;
+    description?: ReactNode;
+    /** The destructive control (e.g. a delete Button). */
+    action: ReactNode;
+    className?: string;
+}
+/** A single destructive row inside `DangerZone`. */
+declare const DangerZoneAction: FC<DangerZoneActionProps>;
+interface DangerZoneProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Destructive-actions container with a destructive-tinted border. Wrap one or
+ * more `DangerZoneAction` rows (delete project, transfer ownership, etc.).
+ */
+declare const DangerZone: FC<DangerZoneProps>;
+
+type IntegrationCardStatus = "available" | "connected" | "disabled" | "locked";
+/** Catalog grid height — matches timbal-platform `INTEGRATION_CATALOG_CARD_HEIGHT_CLASS`. */
+declare const INTEGRATION_CATALOG_CARD_HEIGHT_CLASS = "h-[12.25rem] min-h-[12.25rem] max-h-[12.25rem]";
+interface IntegrationCardProps {
+    name: ReactNode;
+    description?: ReactNode;
+    /** Logo node — an <img>, icon, or lettermark. Rendered in a rounded tile. */
+    logo?: ReactNode;
+    /** Trailing header slot (e.g. a `PlanBadge`). */
+    badge?: ReactNode;
+    status?: IntegrationCardStatus;
+    /** Footer action — use `<Button variant="secondary" size="sm">` for platform parity. */
+    action?: ReactNode;
+    /** Whole-card click — makes the card a button (omit when using `action`). */
+    onClick?: () => void;
+    /** Accessible name when `name` is not plain text, or for whole-card buttons. */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * Catalog card for an integration / connector — elevated secondary chrome (same
+ * surface as bordered buttons), logo tile, and optional footer CTA.
+ */
+declare const IntegrationCard: FC<IntegrationCardProps>;
+
+interface IntegrationsEmptyStateProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Decorative icon / illustration node. */
+    icon?: ReactNode;
+    /** Primary CTA (e.g. a "Browse catalog" button). */
+    action?: ReactNode;
+    className?: string;
+}
+/** Centered empty hero — same elevated chrome as catalog cards. */
+declare const IntegrationsEmptyState: FC<IntegrationsEmptyStateProps>;
+
+type PlanBadgeTone = "free" | "pro" | "enterprise" | "beta" | "soon";
+interface PlanBadgeProps {
+    /** Kept for API compatibility; styling is neutral for all tiers. */
+    tone?: PlanBadgeTone;
+    children: ReactNode;
+    className?: string;
+}
+/** Small plan / tier chip on integration catalog cards. */
+declare const PlanBadge: FC<PlanBadgeProps>;
+
+interface ConnectionRowProps {
+    name: ReactNode;
+    /** Logo / icon node, rendered in a small rounded tile. */
+    logo?: ReactNode;
+    /** Secondary line under the name (account, scope, last sync…). */
+    meta?: ReactNode;
+    /** Status / type pill on the right (e.g. a `StatusBadge` or `PlanBadge`). */
+    badge?: ReactNode;
+    /** Trailing action(s) — manage, disconnect, overflow menu. */
+    action?: ReactNode;
+    onClick?: () => void;
+    /** Accessible name when `name` is not plain text. */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * One connected provider as a horizontal row. Wrap rows in a container with
+ * `TIMBAL_V2_SECONDARY_CHROME` + `divide-y divide-border` for a single elevated panel.
+ */
+declare const ConnectionRow: FC<ConnectionRowProps>;
+/** List shell for stacked `ConnectionRow`s — one elevated secondary surface. */
+declare const connectionRowListClass: string;
+
+interface ConnectionRowListProps {
+    children: ReactNode;
+    /** Accessible name for the list region. */
+    "aria-label"?: string;
+    className?: string;
+}
+/**
+ * Elevated panel for stacked `ConnectionRow`s — prefer this over hand-rolling
+ * `connectionRowListClass` + dividers.
+ */
+declare const ConnectionRowList: FC<ConnectionRowListProps>;
+
+interface SubNavItem {
+    id: string;
+    label: ReactNode;
+}
+interface SubNavProps {
+    items: SubNavItem[];
+    activeId: string;
+    onChange: (id: string) => void;
+    className?: string;
+    "aria-label"?: string;
+    /** Passed to the underlying pill control for shared-layout animation. */
+    layoutId?: string;
+}
+/**
+ * Section tabs using the same pill segmented control as timbal-platform
+ * (Build/Manage, dashboard section bars).
+ */
+declare const SubNav: FC<SubNavProps>;
+
+interface BreadcrumbItem {
+    label: ReactNode;
+    href?: string;
+    onClick?: () => void;
+}
+interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    className?: string;
+}
+declare const Breadcrumbs: FC<BreadcrumbsProps>;
+
+interface FieldProps {
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    htmlFor?: string;
+}
+declare const Field: FC<FieldProps>;
+interface FieldInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    fieldClassName?: string;
+}
+declare const FieldInput: FC<FieldInputProps>;
+
+interface FieldTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label: FieldProps["label"];
+    hint?: FieldProps["hint"];
+    error?: FieldProps["error"];
+    fieldClassName?: string;
+}
+declare const FieldTextarea: FC<FieldTextareaProps>;
+
+interface FieldSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    label: FieldProps["label"];
+    hint?: FieldProps["hint"];
+    error?: FieldProps["error"];
+    fieldClassName?: string;
+    children: ReactNode;
+}
+declare const FieldSelect: FC<FieldSelectProps>;
+
+interface FieldSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label: ReactNode;
+    description?: ReactNode;
+    className?: string;
+}
+declare const FieldSwitch: FC<FieldSwitchProps>;
+
+interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    className?: string;
+}
+declare const SearchInput: FC<SearchInputProps>;
+
+interface FormSectionProps {
+    title?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+declare const FormSection: FC<FormSectionProps>;
+
+interface FilterBarProps {
+    children: ReactNode;
+    className?: string;
+}
+declare const FilterBar: FC<FilterBarProps>;
+
+type DataTableSortDirection = "asc" | "desc";
+interface DataTableSort {
+    columnId: string;
+    direction: DataTableSortDirection;
+}
+interface DataTableColumn<T> {
+    id: string;
+    header: ReactNode;
+    cell: (row: T) => ReactNode;
+    className?: string;
+    headerClassName?: string;
+    align?: "left" | "center" | "right";
+    sortable?: boolean;
+    /** Value used when sorting; defaults to stringifying `cell(row)`. */
+    sortValue?: (row: T) => string | number | boolean | Date | null | undefined;
+}
+interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    rows: T[];
+    getRowKey: (row: T) => string;
+    emptyTitle?: ReactNode;
+    emptyDescription?: ReactNode;
+    /** When `inline`, keeps the table chrome and shows an in-body empty message. */
+    emptyMode?: "replace" | "inline";
+    className?: string;
+    sort?: DataTableSort | null;
+    defaultSort?: DataTableSort | null;
+    onSortChange?: (sort: DataTableSort | null) => void;
+    showRowCount?: boolean;
+    rowCountLabel?: (count: number) => ReactNode;
+    footer?: ReactNode;
+    onRowClick?: (row: T) => void;
+    stickyHeader?: boolean;
+    dense?: boolean;
+    caption?: string;
+}
+declare function DataTable<T>({ columns, rows, getRowKey, emptyTitle, emptyDescription, emptyMode, className, sort: sortProp, defaultSort, onSortChange, showRowCount, rowCountLabel, footer, onRowClick, stickyHeader, dense, caption, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ChartPanelProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Built-in SVG chart — alternative to custom `children`. */
+    artifact?: ChartArtifact;
+    children?: ReactNode;
+    actions?: ReactNode;
+    /** Plot height in px. Default 300 (same as `MetricChartCard`). */
+    height?: number;
+    className?: string;
+}
+/**
+ * Chart shell matching `MetricChartCard` — title row with side padding, flush
+ * plot edge-to-edge with only top inset on the chart region.
+ */
+declare const ChartPanel: FC<ChartPanelProps>;
+
+interface MetricTileProps {
+    label: ReactNode;
+    value: ReactNode;
+    /** Small unit suffix next to the value (e.g. "ms", "%"). */
+    unit?: ReactNode;
+    /** Optional trend pill (e.g. "+8%"). */
+    trend?: ReactNode;
+    trendTone?: "up" | "down" | "neutral";
+    /** Selected state — draws the bottom accent bar (for selectable rows). */
+    active?: boolean;
+    /** Right divider between cells in a metrics row. */
+    showDivider?: boolean;
+    /** Makes the tile a button. Omit for a static tile. */
+    onSelect?: () => void;
+    /** Override the default accessible name (use when `label` is not plain text). */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * Single KPI cell — matches timbal-platform `MetricsRowCard` / `MetricCell`.
+ * Use inside `MetricRow` or `MetricChartCard`, or standalone.
+ */
+declare const MetricTile: FC<MetricTileProps>;
+
+interface MetricCardHeaderProps {
+    title?: ReactNode;
+    /** Hook for `aria-labelledby` on the parent card `<section>`. */
+    titleId?: string;
+    description?: ReactNode;
+    actions?: ReactNode;
+}
+
+interface MetricRowItem {
+    id: string;
+    label: MetricTileProps["label"];
+    value: MetricTileProps["value"];
+    unit?: MetricTileProps["unit"];
+    trend?: MetricTileProps["trend"];
+    trendTone?: MetricTileProps["trendTone"];
+}
+interface MetricRowProps extends MetricCardHeaderProps {
+    metrics: MetricRowItem[];
+    /** When set, tiles are selectable and call `onMetricChange`. */
+    activeMetricId?: string;
+    defaultActiveMetricId?: string;
+    onMetricChange?: (id: string) => void;
+    /** Accessible name for the KPI tile group (when tiles are selectable). */
+    metricsAriaLabel?: string;
+    className?: string;
+}
+/**
+ * Platform-style KPI strip in one elevated card — no chart.
+ * Use for overview rows; pair with `MetricChartCard` when you need the plot below.
+ */
+declare const MetricRow: FC<MetricRowProps>;
+
+/** Theme-aware default series palette. Primary uses the app's `--primary` token. */
+declare const CHART_PALETTE: readonly ["var(--primary, #6366f1)", "#10b981", "#f59e0b", "#06b6d4", "#a855f7", "#ef4444"];
+interface ChartSeries {
+    dataKey: string;
+    label?: string;
+    /** CSS color (token or literal). Defaults to the palette by index. */
+    color?: string;
+}
+type ChartVariant = "area" | "line" | "bar";
+/** `flush` — plot edge-to-edge (no side/bottom inset); axes/legend off by default. */
+type ChartLayout = "default" | "flush";
+interface LineAreaChartProps {
+    data: Array<Record<string, unknown>>;
+    /** Category / x-axis key. Inferred from the first non-numeric field if omitted. */
+    xKey?: string;
+    /** Series to plot. Strings are shorthand for `{ dataKey }`. Inferred if omitted. */
+    series?: Array<ChartSeries | string>;
+    variant?: ChartVariant;
+    /** Plot height in px (width is responsive). Default 240. */
+    height?: number;
+    /** Appended to axis ticks and tooltip values (e.g. "ms", "%"). */
+    unit?: string;
+    /** Fix the y-domain max (e.g. 100 for percentages). */
+    yMax?: number;
+    /** `flush` fills the container width/height except top inset (for `MetricChartCard`). */
+    layout?: ChartLayout;
+    showGrid?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    /** Series legend below the plot. Default: on when `layout` is `default` and multiple series. */
+    showLegend?: boolean;
+    showTooltip?: boolean;
+    formatValue?: (value: number) => string;
+    formatX?: (raw: unknown, index: number) => string;
+    className?: string;
+    /** Accessible label for the chart image. */
+    ariaLabel?: string;
+}
+/**
+ * Polished, dependency-free chart: smooth monotone curves, gradient area fill,
+ * faded dashed gridlines, hover crosshair + floating tooltip, and a cheap
+ * clip-path grow-in animation. Renders crisp at the container's pixel width.
+ */
+declare const LineAreaChart: FC<LineAreaChartProps>;
+
+interface MetricChartMetric {
+    id: string;
+    label: ReactNode;
+    value: ReactNode;
+    unit?: ReactNode;
+    trend?: ReactNode;
+    trendTone?: MetricTileProps["trendTone"];
+    /** Time-series for this metric, shown in the chart when selected. */
+    data?: Array<Record<string, unknown>>;
+    /** Value field within `data`. Default "value". */
+    dataKey?: string;
+    /** Line/area color for this metric. Defaults to the chart palette. */
+    color?: string;
+}
+interface MetricChartCardProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Trailing header control (e.g. a "See detail" link/button). */
+    actions?: ReactNode;
+    metrics: MetricChartMetric[];
+    /** Controlled selected metric id. */
+    activeMetricId?: string;
+    defaultActiveMetricId?: string;
+    onMetricChange?: (id: string) => void;
+    /** x-axis key shared across metric series. Default "date". */
+    xKey?: string;
+    variant?: ChartVariant;
+    /** Chart plot height in px. Default 300 (platform overview). */
+    height?: number;
+    formatX?: (raw: unknown, index: number) => string;
+    formatValue?: (value: number) => string;
+    /** Shown when the active metric has no data. */
+    emptyLabel?: ReactNode;
+    /** Accessible name for the selectable KPI tile group. */
+    metricsAriaLabel?: string;
+    className?: string;
+}
+/**
+ * Analytics card: selectable KPI row over a flush area chart —
+ * timbal-platform `MetricsRowCard` / Studio analytics pattern.
+ */
+declare const MetricChartCard: FC<MetricChartCardProps>;
+
+interface SparklineProps {
+    /** Numeric values, or objects from which `dataKey` is read. */
+    data: Array<number | Record<string, unknown>>;
+    dataKey?: string;
+    color?: string;
+    /** Show a soft gradient fill under the line. Default true. */
+    area?: boolean;
+    width?: number;
+    height?: number;
+    strokeWidth?: number;
+    className?: string;
+    ariaLabel?: string;
+}
+/** Tiny inline trend line — no axes, no chrome. For table cells and stat tiles. */
+declare const Sparkline: FC<SparklineProps>;
+
+interface ChartArtifactViewProps {
+    artifact: ChartArtifact;
+    /**
+     * Skip `ArtifactCard` chrome — used by `ChartPanel` which supplies the
+     * analytics-style shell (title row + flush plot).
+     */
+    embedded?: boolean;
+    /** Plot height when `embedded`. Default 300 (matches `MetricChartCard`). */
+    height?: number;
+}
+/**
+ * Renders a `chart` artifact. Bar / line / area go through the shared
+ * `LineAreaChart` engine (smooth curves, gradient fill, hover tooltip); pie
+ * stays a small inline SVG.
+ */
+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 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, connectionRowListClass as aY, useAppCopilotContext as aZ, useAppShellChat 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, 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 };