@acarmisc/backstage-plugin-litellm 0.28.0 → 0.29.0

package/dist/api.d.ts

@@ -1,5 +1,10 @@
-import { FetchApi } from '@backstage/core-plugin-api';
+import { type FetchApi, type DiscoveryApi } from '@backstage/frontend-plugin-api';
 import { UserInfo, VirtualKey, ModelInfo, UsageMetrics, TeamInfo, GenerateKeyRequest, GenerateKeyResponse, UpdateKeyRequest, AuditLogsParams, PaginatedAuditLogs, LiteLlmConfig, VectorStoreInfo, McpServerInfo, CreateTeamRequest, CreateTeamResponse, UpdateTeamRequest } from './types';
+export declare class ApiError extends Error {
+    body: unknown;
+    status: number;
+    constructor(message: string, status: number, body: unknown);
+}
 export interface LiteLlmApiInterface {
     getUserInfo(): Promise<UserInfo>;
     listKeys(): Promise<VirtualKey[]>;
@@ -13,6 +18,11 @@ export interface LiteLlmApiInterface {
     resetKeySpend(keyId: string): Promise<void>;
     pruneExpiredKeys(): Promise<{
         pruned: number;
+        failed: number;
+        failures?: {
+            keyId: string;
+            error: string;
+        }[];
     }>;
     listModels(): Promise<ModelInfo[]>;
     getTeams(): Promise<TeamInfo[]>;
@@ -33,13 +43,20 @@ export interface LiteLlmApiInterface {
     createTeam(request: CreateTeamRequest): Promise<CreateTeamResponse>;
     updateTeam(teamId: string, request: UpdateTeamRequest): Promise<TeamInfo>;
 }
-export declare const liteLlmApiRef: import("@backstage/core-plugin-api").ApiRef<LiteLlmApiInterface>;
+export declare const liteLlmApiRef: import("@backstage/frontend-plugin-api").ApiRef<LiteLlmApiInterface> & {
+    readonly $$type: "@backstage/ApiRef";
+};
 export type ExpiryStatus = 'expired' | 'soon' | 'ok';
 export declare function expiryStatus(expiresAt?: string): ExpiryStatus | null;
 export declare class LiteLlmApi implements LiteLlmApiInterface {
     private fetchApi;
+    private base;
+    /**
+     * @param base A DiscoveryApi (the plugin base URL is resolved per request via
+     * `discoveryApi.getBaseUrl('litellm')`) or a fixed base URL/path string.
+     */
+    constructor(fetchApi: FetchApi, base?: string | DiscoveryApi);
     private basePath;
-    constructor(fetchApi: FetchApi, basePath?: string);
     private throwIfNotOk;
     private get;
     private post;
@@ -58,6 +75,11 @@ export declare class LiteLlmApi implements LiteLlmApiInterface {
     resetKeySpend(keyId: string): Promise<void>;
     pruneExpiredKeys(): Promise<{
         pruned: number;
+        failed: number;
+        failures?: {
+            keyId: string;
+            error: string;
+        }[];
     }>;
     getAuditLogs(params: AuditLogsParams): Promise<PaginatedAuditLogs>;
     listModels(): Promise<ModelInfo[]>;

package/dist/budget.d.ts

@@ -89,3 +89,27 @@ export declare function budgetHeadline(summary: BudgetSummary): {
 export declare function fmtBudgetDuration(duration?: string): string | null;
 /** status pill tone + meter tone for a budget at `pct`. */
 export declare function budgetTone(pct: number): Tone;
+/** Budget status for the signed-in user's overall spend vs their cap. */
+export interface UserBudgetKpi {
+    /** Total spend in the active budget window (lifetime or reset period). */
+    spend: number;
+    /** The budget cap, or null if unlimited. */
+    max: number | null;
+    /** max - spend, clamped at >= 0 for display. Null if unlimited. */
+    remaining: number | null;
+    /** spend / max * 100, or null if unlimited. Unclamped (can be > 100). */
+    pct: number | null;
+    /** 'capped' when a budget exists, 'unlimited' otherwise. */
+    kind: 'capped' | 'unlimited';
+    /**
+     * Caption for the KPI. When capped: "resets {formatted reset_at}" if reset_at
+     * exists and budget_duration is set, else "lifetime cap". Null if unlimited.
+     */
+    resetLabel: string | null;
+}
+/**
+ * Compute the user's budget status: spend vs their personal cap.
+ * Returns { spend, max, remaining, pct, kind, resetLabel } where remaining
+ * is clamped at >= 0 for display purposes but pct and kind reflect the real status.
+ */
+export declare function userBudgetKpi(userInfo: UserInfo | null): UserBudgetKpi;

package/dist/components/AuditLog.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { LiteLlmApiInterface } from '../api';
 interface AuditLogProps {
     api: LiteLlmApiInterface;
 }
-export declare const AuditLog: React.FC<AuditLogProps>;
+export declare const AuditLog: FC<AuditLogProps>;
 export {};

package/dist/components/BudgetLimitList.d.ts

@@ -4,22 +4,22 @@
  * `LiteLLMBudgetGauges` (expanded "all limits" view). Keeping the card in one
  * place means a limit reads identically wherever it is shown.
  */
-import React from 'react';
+import { FC, ReactNode } from 'react';
 import type { Theme } from '@mui/material/styles';
 import { BudgetLimit } from '../budget';
 import { Tone } from './ui';
 /** Semantic colour for a tone, from the host theme. */
 export declare function levelToneColor(tone: Tone | undefined, theme: Theme): string;
 /** Spend-vs-cap meter card for a single limit. */
-export declare const LimitCard: React.FC<{
+export declare const LimitCard: FC<{
     limit: BudgetLimit;
 }>;
 /** A LimitCard prefixed with a small KEY / USER / TEAM tag. */
-export declare const TaggedLimit: React.FC<{
+export declare const TaggedLimit: FC<{
     limit: BudgetLimit;
 }>;
 /** A key-budget note under a limit list — plain text when no href is given. */
-export declare const MoreKeysNote: React.FC<{
+export declare const MoreKeysNote: FC<{
     count: number;
     href?: string;
     label?: string;
@@ -29,13 +29,13 @@ export declare const MoreKeysNote: React.FC<{
  * Used by the condensed gauges card's expanded view; the full widget renders
  * its own grouped-by-level rail instead.
  */
-export declare const BudgetLimitList: React.FC<{
+export declare const BudgetLimitList: FC<{
     limits: BudgetLimit[];
     /** Keys beyond the supplied limits — rendered as a trailing note. */
     hiddenKeyCount?: number;
     keysHref?: string;
 }>;
 /** Inset panel used to hold a nested list of limits inside a card. */
-export declare const LimitListPanel: React.FC<{
-    children: React.ReactNode;
+export declare const LimitListPanel: FC<{
+    children: ReactNode;
 }>;

package/dist/components/DashboardHeader.d.ts

@@ -1,13 +1,15 @@
-import React from 'react';
+import { FC, ReactNode } from 'react';
 import { UserInfo, TeamInfo, VirtualKey } from '../types';
 interface DashboardHeaderProps {
     userInfo: UserInfo;
     teams: TeamInfo[];
     keys: VirtualKey[];
     loading: boolean;
+    keysError?: Error;
     onGenerateKeyClick: () => void;
+    onNavigateToFilter?: (filter: 'expired' | 'expiring') => void;
     /** Page tab bar, rendered flush with the bottom edge of the header card. */
-    tabs?: React.ReactNode;
+    tabs?: ReactNode;
 }
-export declare const DashboardHeader: React.FC<DashboardHeaderProps>;
+export declare const DashboardHeader: FC<DashboardHeaderProps>;
 export {};

package/dist/components/GenerateKeyButton.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 /**
  * The single "create a key" call-to-action used everywhere in the plugin —
  * the plugin page (header, keys table) and the homepage budget card all
@@ -19,4 +19,4 @@ export interface GenerateKeyButtonProps {
     /** Disabled state (e.g. until the account data loads). A disabled `to` renders inert. */
     disabled?: boolean;
 }
-export declare const GenerateKeyButton: React.FC<GenerateKeyButtonProps>;
+export declare const GenerateKeyButton: FC<GenerateKeyButtonProps>;

package/dist/components/GenerateKeyDialog.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import { FC } from 'react';
 import { GenerateKeyRequest, GenerateKeyResponse, LiteLlmConfig, ModelInfo, TeamInfo, VirtualKey } from '../types';
 /**
  * @deprecated Use {@link KeyFormDialog} with `mode="create"` instead — this
  * wrapper only forwards props for backwards compatibility with the public
  * entrypoint and will be removed in a future release.
  */
-export declare const GenerateKeyDialog: React.FC<{
+export declare const GenerateKeyDialog: FC<{
     open: boolean;
     onClose: () => void;
     keys: VirtualKey[];

package/dist/components/KeyFormDialog.d.ts

@@ -1,19 +1,5 @@
-import React from 'react';
+import { FC } from 'react';
 import { VirtualKey, ModelInfo, TeamInfo, GenerateKeyRequest, GenerateKeyResponse, UpdateKeyRequest, LiteLlmConfig } from '../types';
-/**
- * Single form dialog for both key creation (`mode="create"`) and key editing
- * (`mode="edit"`).
- *
- * Create mode: alias (pre-filled), team, models, duration, budget (+unlimited
- * when gated on), TPM/RPM in the Advanced accordion, and the post-generation
- * screen with copyable key + starter snippets.
- *
- * Edit mode: the same shared fields but no duration (expiry is immutable after
- * creation) and no team switch (LiteLLM /key/update semantics); adds a masked
- * key header and the Danger Zone (reset spend). Budget validation, the
- * unlimited toggle and the team-scoped model filtering behave exactly as they
- * do at creation time.
- */
 export type KeyFormDialogMode = 'create' | 'edit';
 export interface KeyFormDialogProps {
     open: boolean;
@@ -24,6 +10,8 @@ export interface KeyFormDialogProps {
     keyToEdit?: VirtualKey | null;
     keys: VirtualKey[];
     models: ModelInfo[];
+    modelsError?: Error;
+    onRetryModels?: () => void;
     teams: TeamInfo[];
     /** Current user's LiteLLM user id, used to pre-fill a default key alias. */
     username?: string;
@@ -37,6 +25,6 @@ export interface KeyFormDialogProps {
     onResetKeySpend?: (keyId: string) => Promise<void>;
     onGetConfig: () => Promise<LiteLlmConfig>;
 }
-export declare const KeyFormDialog: React.FC<KeyFormDialogProps>;
+export declare const KeyFormDialog: FC<KeyFormDialogProps>;
 export declare function fmtCost(perToken?: number): string | null;
 export declare function formatContextWindow(maxInput?: number, maxOutput?: number): string | null;

package/dist/components/KeySnippets.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+export interface Snippets {
+    curl: string;
+    openai: string;
+    opencode: string;
+    pi: string;
+    claudeCode: string;
+    publicEndpoint: string;
+}
+export declare function buildSnippets(baseUrl: string | null, key: string, model: string): Snippets;
+interface SnippetTabsProps {
+    snippets: Snippets;
+    model: string;
+    copyState: {
+        copy: (text: string) => Promise<boolean>;
+        copied: boolean;
+    };
+}
+export declare const SnippetTabs: FC<SnippetTabsProps>;
+export {};

package/dist/components/KeysTable.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import { FC } from 'react';
+import { type KeyFilterType } from '../keyFilter';
 import { VirtualKey } from '../types';
 interface KeysTableProps {
     keys: VirtualKey[];
@@ -13,6 +14,8 @@ interface KeysTableProps {
     onPruneExpiredKeys: () => Promise<{
         pruned: number;
     }>;
+    filter?: KeyFilterType;
+    onClearFilter?: () => void;
 }
-export declare const KeysTable: React.FC<KeysTableProps>;
+export declare const KeysTable: FC<KeysTableProps>;
 export {};

package/dist/components/LiteLLMBudgetGauges.d.ts

@@ -22,19 +22,18 @@
  * `new-key` CTA renders the shared `GenerateKeyButton`, identical to the
  * one on the plugin page.
  */
-import React from 'react';
-/** Preset action-bar buttons. `label` overrides the default copy. */
-export type BudgetCtaKind = 'new-key' | 'module' | 'all-limits';
-export interface BudgetCtaSpec {
-    kind: BudgetCtaKind;
-    /** Override the default label. */
-    label?: string;
-}
-/** Either a bare kind (`'module'`) or a spec object (`{ kind: 'module' }`). */
-export type BudgetCta = BudgetCtaKind | BudgetCtaSpec;
+import { FC, ReactNode } from 'react';
+import { UserInfo, TeamInfo, VirtualKey } from '../types';
+import { type BudgetCta } from '../ctas';
+export type { BudgetCtaKind, BudgetCtaSpec, BudgetCta } from '../ctas';
 export interface LiteLLMBudgetGaugesProps {
     /** Optional title override. Defaults to 'Budget'. */
     title?: string;
+    /**
+     * Render without the card's own chrome and title, for hosts (such as the
+     * home page grid) that already provide a titled card. Defaults to false.
+     */
+    bare?: boolean;
     /** Ring diameter in px. Defaults to 72. */
     size?: number;
     /** Where the "+N more" key link points. Defaults to the Keys tab. */
@@ -49,7 +48,7 @@ export interface LiteLLMBudgetGaugesProps {
     onCreateKey?: () => void;
     /**
      * Action-bar buttons to render, in order. Defaults to
-     * `['new-key', 'module', 'all-limits']`. Pass `[]` to hide the bar; the
+     * `['module', 'all-limits']`; 'new-key' is added automatically for users with no keys. Pass `[]` to hide the bar; the
      * `all-limits` entry is dropped automatically when the user has no limits.
      */
     ctas?: BudgetCta[];
@@ -62,11 +61,14 @@ export interface LiteLLMBudgetGaugesProps {
     /** Notified whenever the expanded state changes. */
     onExpandedChange?: (expanded: boolean) => void;
     /** Fully custom node pinned below the CTAs, below a divider. */
-    action?: React.ReactNode;
+    action?: ReactNode;
+    /**
+     * Optional preloaded data to use instead of fetching via the hook.
+     * When provided, the component uses these values directly without refetching.
+     */
+    userInfo?: UserInfo | null;
+    teams?: TeamInfo[];
+    keys?: VirtualKey[];
 }
-/** Month-to-date range as `YYYY-MM-DD` strings: the 1st of the current month through today. */
-export declare function monthToDateRange(now?: Date): {
-    startDate: string;
-    endDate: string;
-};
-export declare const LiteLLMBudgetGauges: React.FC<LiteLLMBudgetGaugesProps>;
+export { monthToDateRange } from '../dates';
+export declare const LiteLLMBudgetGauges: FC<LiteLLMBudgetGaugesProps>;

package/dist/components/LiteLLMBudgetWidget.d.ts

@@ -18,8 +18,12 @@
  *   - `collapsible` folds the body under a one-line summary header.
  * `action` renders a host-supplied node (e.g. a button) pinned to the card
  * bottom, always visible.
+ *
+ * When user data is passed via props (userInfo, teams, keys), they are used
+ * directly without refetching. Otherwise, the hook fetches them.
  */
-import React from 'react';
+import { FC, ReactNode } from 'react';
+import { UserInfo, TeamInfo, VirtualKey } from '../types';
 export interface LiteLLMBudgetWidgetProps {
     /** Optional title override. Defaults to 'Budget Policy'. */
     title?: string;
@@ -39,6 +43,13 @@ export interface LiteLLMBudgetWidgetProps {
      * collapsible region so it stays visible when collapsed — e.g. a
      * "create key" button.
      */
-    action?: React.ReactNode;
+    action?: ReactNode;
+    /**
+     * Optional preloaded data to use instead of fetching via the hook.
+     * When provided, the component uses these values directly without refetching.
+     */
+    userInfo?: UserInfo | null;
+    teams?: TeamInfo[];
+    keys?: VirtualKey[];
 }
-export declare const LiteLLMBudgetWidget: React.FC<LiteLLMBudgetWidgetProps>;
+export declare const LiteLLMBudgetWidget: FC<LiteLLMBudgetWidgetProps>;

package/dist/components/LiteLLMHomeWidget.d.ts

@@ -1,8 +1,13 @@
-import React from 'react';
+import { FC } from 'react';
 export interface LiteLLMHomeWidgetProps {
     /** Default period when the widget mounts. Defaults to '7d'. */
     defaultPeriod?: 'today' | '7d' | '30d';
     /** Optional title override. Defaults to 'LiteLLM Usage'. */
     title?: string;
+    /**
+     * Render without the widget's own card chrome and title, for hosts (such as
+     * the home page grid) that already provide a titled card. Defaults to false.
+     */
+    bare?: boolean;
 }
-export declare const LiteLLMHomeWidget: React.FC<LiteLLMHomeWidgetProps>;
+export declare const LiteLLMHomeWidget: FC<LiteLLMHomeWidgetProps>;

package/dist/components/LiteLLMPage.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
-export declare const LiteLLMPage: React.FC;
+import { FC } from 'react';
+export declare const LiteLLMPage: FC;

package/dist/components/ModelsTable.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import { FC } from 'react';
 import { ModelInfo, TeamInfo } from '../types';
 interface ModelsTableProps {
     allModels: ModelInfo[];
     teams: TeamInfo[];
     loading: boolean;
 }
-export declare const ModelsTable: React.FC<ModelsTableProps>;
+export declare const ModelsTable: FC<ModelsTableProps>;
 export {};

package/dist/components/TeamUsage.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { TeamInfo, UsageMetrics } from '../types';
 interface TeamUsageProps {
     teams: TeamInfo[];
@@ -10,6 +10,8 @@ interface TeamUsageProps {
     /** When true (with `onCreateTeam`), a "Create Team" action renders in the section header. */
     canCreate?: boolean;
     onCreateTeam?: () => void;
+    /** Called when a team card is expanded to trigger data loading. */
+    onTeamExpand?: (team: TeamInfo) => void;
 }
-export declare const TeamUsage: React.FC<TeamUsageProps>;
+export declare const TeamUsage: FC<TeamUsageProps>;
 export {};

package/dist/components/UsageStats.d.ts

@@ -1,7 +1,9 @@
-import React from 'react';
+import { FC } from 'react';
 import { DateRange, UsageMetrics, ModelInfo, UserInfo } from '../types';
 interface UsageStatsProps {
     usage: UsageMetrics | null;
+    usageError?: Error;
+    onRetryUsage?: () => void;
     models: ModelInfo[];
     dateRange: DateRange;
     currentPreset: DatePreset;
@@ -10,5 +12,5 @@ interface UsageStatsProps {
     userInfo?: UserInfo;
 }
 type DatePreset = 'today' | '24h' | '7d' | '30d';
-export declare const UsageStats: React.FC<UsageStatsProps>;
+export declare const UsageStats: FC<UsageStatsProps>;
 export {};

package/dist/components/keyFormHelpers.d.ts

@@ -0,0 +1,14 @@
+import { VirtualKey, ModelInfo, GenerateKeyRequest, UpdateKeyRequest } from '../types';
+export declare const generateDefaultAlias: (username?: string) => string;
+export declare const createForm: (username?: string) => GenerateKeyRequest;
+export declare const editForm: (k: VirtualKey) => UpdateKeyRequest;
+export declare function isModelAllowedByTeam(model: ModelInfo, teamModels?: string[]): boolean;
+export declare function aliasHelperText(aliasError: boolean, aliasDuplicate: boolean): string | undefined;
+export declare function teamHelperText(teamError: boolean, teamRequired: boolean): string;
+export declare function budgetHelperText(budgetInvalid: boolean, budgetEstimate: number | null, unlimited: boolean): string | undefined;
+/**
+ * The fields of an edit that actually changed. Sending only these means an
+ * untouched field (say a legacy budget above the current ceiling) can't make an
+ * unrelated edit fail server-side validation. Returns `{}` when nothing changed.
+ */
+export declare function changedEditFields(original: UpdateKeyRequest, current: UpdateKeyRequest, unlimitedBudget: boolean): UpdateKeyRequest;

package/dist/components/ui/Gauge.d.ts

@@ -0,0 +1,24 @@
+import { FC, ReactNode } from 'react';
+import { type Tone } from './tokens';
+/**
+ * Ring gauge for at-a-glance ratios. Hand-drawn SVG rather than MUI's
+ * `CircularProgress`: the track has to stay a neutral hairline (MUI tints it
+ * from the bar colour, so an empty ring reads as full), and the value may
+ * legitimately exceed 100% — the arc clamps at a full turn while the centre
+ * label keeps the real number.
+ */
+export declare const Gauge: FC<{
+    /** Share consumed, 0..100+ (unclamped for the label). */
+    value: number;
+    tone?: Tone;
+    /** Outer diameter in px. */
+    size?: number;
+    /** Ring thickness in px. */
+    thickness?: number;
+    /** Centre content; defaults to the rounded percentage. */
+    label?: ReactNode;
+    /** Small caption under the value, inside the ring. */
+    caption?: ReactNode;
+    /** Optional aria-label for accessibility. */
+    ariaLabel?: string;
+}>;

package/dist/components/ui/Meter.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { type Tone } from './tokens';
+/**
+ * Progress meter with an explicitly drawn track. MUI's `LinearProgress` tints
+ * its track from the bar colour, which makes an empty bar look full.
+ */
+export declare const Meter: FC<{
+    value: number;
+    tone?: Tone;
+    height?: number;
+    /** Optional aria-label for accessibility. */
+    ariaLabel?: string;
+}>;

package/dist/components/ui/charts.d.ts

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+interface ChartTooltipProps {
+    active?: boolean;
+    label?: string | number;
+    payload?: Array<{
+        name?: string;
+        value?: number;
+        color?: string;
+        dataKey?: string | number;
+    }>;
+    /** Formats each series value; defaults to a localised integer. */
+    valueFormatter?: (value: number) => string;
+    /** Formats the header; defaults to the short date form. */
+    labelFormatter?: (label: string) => string;
+    /** Drop zero-valued series — useful for stacked charts with many series. */
+    hideZero?: boolean;
+}
+/**
+ * Recharts' default tooltip is an opaque white card with a hard border — it
+ * disappears on dark themes. This one uses the theme's own surface tokens.
+ */
+export declare const ChartTooltip: FC<ChartTooltipProps>;
+/**
+ * Colour key rendered outside the SVG. Recharts' own `<Legend>` cannot ellipsize,
+ * so a handful of fully-qualified model names ("bedrock/eu.anthropic.…") wrap
+ * into a ragged block that eats the plot area.
+ */
+export declare const SeriesLegend: FC<{
+    series: Array<{
+        name: string;
+        color: string;
+    }>;
+}>;
+export {};

package/dist/components/ui/index.d.ts

@@ -0,0 +1,6 @@
+export * from './tokens';
+export * from './charts';
+export * from './pills';
+export * from './surfaces';
+export * from './Meter';
+export * from './Gauge';

package/dist/components/ui/pills.d.ts

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from 'react';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { type Tone } from './tokens';
+/**
+ * A soft status badge. Deliberately *not* MUI's filled `Chip` — host themes
+ * tend to render those as saturated pills, and a table with one screaming
+ * orange pill per row is unreadable. Tinted background, hairline border,
+ * squared-off corners.
+ */
+export declare const StatusPill: FC<{
+    label: ReactNode;
+    tone?: Tone;
+    /** Show the leading tone dot. */
+    dot?: boolean;
+    title?: string;
+    sx?: SxProps<Theme>;
+}>;
+/** Quiet monospace tag for identifiers: model names, team slugs, roles. */
+export declare const TagChip: FC<{
+    label: ReactNode;
+    title?: string;
+    mono?: boolean;
+}>;

package/dist/components/ui/surfaces.d.ts

@@ -0,0 +1,65 @@
+import { FC, ReactNode } from 'react';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { type Tone } from './tokens';
+/** Page-level surface with a consistent title row. */
+export declare const SectionCard: FC<{
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    actions?: ReactNode;
+    /** Set when the body renders its own edge-to-edge content (e.g. a table). */
+    flush?: boolean;
+    children: ReactNode;
+}>;
+/** Bordered frame around a single chart, with its own caption row. */
+export declare const ChartCard: FC<{
+    title: ReactNode;
+    meta?: ReactNode;
+    height?: number;
+    children: ReactNode;
+}>;
+export interface MetricDef {
+    label: string;
+    value: string;
+    hint?: string;
+    tone?: Tone;
+}
+/**
+ * KPI row rendered as one framed strip divided into cells, rather than four
+ * loose cards. Cells share a baseline grid so the numbers line up even when
+ * only some of them carry a hint.
+ */
+export declare const MetricStrip: FC<{
+    metrics: MetricDef[];
+}>;
+/** Label + value pair used inside cards. */
+export declare const Stat: FC<{
+    label: string;
+    value: ReactNode;
+}>;
+/**
+ * Secondary navigation inside a card. Hand-rolled rather than a second set of
+ * `Tabs` so it reads as subordinate to the page tabs instead of competing
+ * with them, and so host theme overrides on `MuiTab` don't leak in.
+ */
+export declare function SegmentedControl<T extends string>({ value, onChange, options, }: {
+    value: T;
+    onChange: (value: T) => void;
+    options: Array<{
+        value: T;
+        label: string;
+    }>;
+}): import("react").JSX.Element;
+/**
+ * Shared table chrome: quiet uppercase headers, hairline row rules, a hover
+ * highlight, and tabular figures so numeric columns align.
+ */
+export declare const dataTableSx: SxProps<Theme>;
+/** Muted icon button that only picks up its semantic colour on hover. */
+export declare const quietIconButtonSx: (tone?: Tone) => SxProps<Theme>;
+/** Centered empty / loading state for a card body. */
+export declare const EmptyState: FC<{
+    message: string;
+    hint?: string;
+    height?: number;
+    action?: ReactNode;
+}>;