/**
 * Shared primitives for the per-model breakdown tables (ModelsTable,
 * BehaviorModelsTable). Each table still owns its column definitions, sort
 * order, sidebar contents and chart type — this module owns the surface
 * chrome, expand-row plumbing, theme palette, and the mini-sparkline plus
 * the shared plugin/scale config consumed by multi-line detail charts.
 */
export { MODEL_COLORS } from "./chart-shared";
export declare const TABLE_CHART_THEMES: {
    readonly dark: {
        readonly legendLabel: "#cbd5e1";
        readonly tooltipBackground: "#16161e";
        readonly tooltipTitle: "#f8fafc";
        readonly tooltipBody: "#94a3b8";
        readonly tooltipBorder: "rgba(255, 255, 255, 0.1)";
        readonly grid: "rgba(255, 255, 255, 0.06)";
        readonly tick: "#94a3b8";
    };
    readonly light: {
        readonly legendLabel: "#334155";
        readonly tooltipBackground: "#ffffff";
        readonly tooltipTitle: "#0f172a";
        readonly tooltipBody: "#334155";
        readonly tooltipBorder: "rgba(15, 23, 42, 0.18)";
        readonly grid: "rgba(15, 23, 42, 0.08)";
        readonly tick: "#475569";
    };
};
export type TableChartTheme = (typeof TABLE_CHART_THEMES)[keyof typeof TABLE_CHART_THEMES];
/** Style defaults for one line in a non-stacked detail chart. */
export declare function lineSeriesStyle(color: string): {
    borderColor: string;
    backgroundColor: string;
    tension: number;
    pointRadius: number;
    borderWidth: number;
};
/**
 * No-axis, no-legend single-series sparkline used in the trend cell of every
 * model row. Caller supplies the already-extracted numeric series so this
 * stays agnostic of the row's underlying data shape.
 */
export declare function MiniSparkline({ timestamps, values, color, }: {
    timestamps: number[];
    values: number[];
    color: string;
}): import("react/jsx-runtime").JSX.Element;
/**
 * Plugin block (legend + tooltip) shared by every multi-series detail chart
 * in the table expanded views.
 */
export declare function detailChartPlugins(chartTheme: TableChartTheme): {
    legend: {
        display: boolean;
        position: "top";
        labels: {
            color: "#334155" | "#cbd5e1";
            usePointStyle: boolean;
            padding: number;
            font: {
                size: number;
            };
        };
    };
    tooltip: {
        backgroundColor: "#16161e" | "#ffffff";
        titleColor: "#0f172a" | "#f8fafc";
        bodyColor: "#334155" | "#94a3b8";
        borderColor: "rgba(15, 23, 42, 0.18)" | "rgba(255, 255, 255, 0.1)";
        borderWidth: number;
        cornerRadius: number;
    };
};
/**
 * Single-Y-axis scales for a detail chart (used when every series shares a
 * unit, e.g. behavior counts). Min anchored at 0.
 */
export declare function detailChartScalesSingleAxis(chartTheme: TableChartTheme): {
    x: {
        grid: {
            color: "rgba(15, 23, 42, 0.08)" | "rgba(255, 255, 255, 0.06)";
        };
        ticks: {
            color: "#475569" | "#94a3b8";
            font: {
                size: number;
            };
        };
    };
    y: {
        grid: {
            color: "rgba(15, 23, 42, 0.08)" | "rgba(255, 255, 255, 0.06)";
        };
        ticks: {
            color: "#475569" | "#94a3b8";
            font: {
                size: number;
            };
        };
        min: number;
    };
};
/**
 * Dual-Y-axis scales for a detail chart with mixed units (e.g. TTFT seconds
 * on left, tokens/s on right). Right-axis grid is suppressed so it doesn't
 * collide with the left.
 */
export declare function detailChartScalesDualAxis(chartTheme: TableChartTheme): {
    x: {
        grid: {
            color: "rgba(15, 23, 42, 0.08)" | "rgba(255, 255, 255, 0.06)";
        };
        ticks: {
            color: "#475569" | "#94a3b8";
            font: {
                size: number;
            };
        };
    };
    y: {
        type: "linear";
        display: boolean;
        position: "left";
        grid: {
            color: "rgba(15, 23, 42, 0.08)" | "rgba(255, 255, 255, 0.06)";
        };
        ticks: {
            color: "#475569" | "#94a3b8";
            font: {
                size: number;
            };
        };
    };
    y1: {
        type: "linear";
        display: boolean;
        position: "right";
        grid: {
            drawOnChartArea: boolean;
        };
        ticks: {
            color: "#475569" | "#94a3b8";
            font: {
                size: number;
            };
        };
    };
};
export interface TableColumn {
    label: string;
    align?: "left" | "right" | "center";
}
/** Outer card + section title used by every model table. */
export declare function ModelTableShell({ title, subtitle, children, }: {
    title: string;
    subtitle?: string;
    children: React.ReactNode;
}): import("react/jsx-runtime").JSX.Element;
/** Sticky column-header row for a model table. */
export declare function ModelTableHeader({ columns, gridTemplate }: {
    columns: TableColumn[];
    gridTemplate: string;
}): import("react/jsx-runtime").JSX.Element;
/** Scroll wrapper for the row stack — capped to fit the dashboard viewport. */
export declare function ModelTableBody({ children }: {
    children: React.ReactNode;
}): import("react/jsx-runtime").JSX.Element;
/**
 * Two-line model identity cell (model name + provider) shared by every
 * per-model table. Kept as a stable named contract so callers don't restate
 * the same two divs and font-utility classes.
 */
export declare function ModelNameCell({ model, provider }: {
    model: string;
    provider: string;
}): import("react/jsx-runtime").JSX.Element;
/**
 * One expandable model row. `cells` matches the column order from
 * `ModelTableHeader` plus the trend cell at the end (caller controls the
 * sparkline / placeholder). `expandedContent` is the panel revealed on toggle.
 */
export declare function ExpandableModelRow({ gridTemplate, cells, trendCell, isExpanded, onToggle, expandedContent, }: {
    gridTemplate: string;
    cells: React.ReactNode[];
    trendCell: React.ReactNode;
    isExpanded: boolean;
    onToggle: () => void;
    expandedContent: React.ReactNode;
}): import("react/jsx-runtime").JSX.Element;
/** Placeholder shown in the trend cell when a model has no time-series data. */
export declare function TrendEmpty(): import("react/jsx-runtime").JSX.Element;
/** Placeholder shown in the expanded detail-chart slot when data is missing. */
export declare function DetailChartEmpty({ message }: {
    message?: string;
}): import("react/jsx-runtime").JSX.Element;