import type { ReactElement } from 'react';
import type { CustomAccentColorDto } from '@/services/api/adminApi';
import type { DataVizColors, ItemPaletteKey, BackgroundOverride } from '@/types/theme';
interface LivePreviewPanelProps {
    readonly displayName: string;
    readonly tagline: string;
    readonly subdomain: string;
    readonly defaultAccentColorKey: string;
    readonly defaultThemeMode: string;
    readonly defaultBorderRadius: Record<string, string>;
    /** Border thickness (px) used by the preview only. Scoped via `--border-width`
     *  on the preview container so the running app behind the editor is NOT
     *  affected — the active theme keeps its real border width until the user
     *  clicks Enregistrer. */
    readonly borderWidth?: number;
    readonly customAccentColors: CustomAccentColorDto[];
    readonly logoUrl?: string | null;
    readonly itemPaletteKey?: ItemPaletteKey;
    readonly backgroundOverride?: BackgroundOverride | null;
    /** When provided, replaces the generated palette's structural colors (theme editor mode). */
    readonly overridePalette?: {
        backgrounds?: Record<string, string>;
        text?: Record<string, string>;
        border?: Record<string, string>;
        status?: Record<string, {
            bg: string;
            text: string;
            border: string;
            dot: string;
        }>;
    };
    /** Typography settings to render inside the mock. Keeps the preview visually
     *  in sync with the Typography tab — all typography is scoped via inline
     *  styles so it never leaks to the rest of the app. */
    readonly typography?: {
        fontStack: string;
        baseSize: number;
        headingWeight: number;
        /** Modular scale ratio used to derive heading sizes. Required by the
         *  dedicated typography preview rendered when secondarySection='typography'. */
        scale?: number;
        /** Label of the font (shown in the preview header). */
        fontLabel?: string;
    };
    /** Toggle the right-hand panel content:
     *  - 'palettes' (default): show the generated color palettes
     *  - 'typography': show a typography sample (h1/h2/h3/body) instead — useful
     *    when the user is on the Typography tab where color palettes are noise.
     *  - 'dataviz': show a mini-dashboard preview (4 KPI cards + bar chart +
     *    sequential gradient) wired to the supplied {@link dataViz} colours —
     *    used by the new Dashboard tab in the theme/preset editors.
     *  - 'none': hide the section entirely (e.g. Spacing tab, where neither
     *    palettes nor a typography sample bring value). */
    readonly secondarySection?: 'palettes' | 'typography' | 'dataviz' | 'none';
    /** Required when `secondarySection='dataviz'` — palette previewed in the mock. */
    readonly dataViz?: DataVizColors;
}
export declare function LivePreviewPanel({ displayName, defaultAccentColorKey, defaultThemeMode, defaultBorderRadius, borderWidth, customAccentColors, logoUrl, itemPaletteKey, backgroundOverride, overridePalette, typography, secondarySection, dataViz, }: LivePreviewPanelProps): ReactElement;
export {};
//# sourceMappingURL=LivePreviewPanel.d.ts.map