/**
 * MergePreviewRenderer Component
 *
 * Renders diff-highlighted content in side-by-side, overlay, or slider mode.
 * Uses Puck's Render component with highlighted configs for visual comparison.
 *
 * All visual styling uses inline React styles. BEM class names are retained
 * as secondary identifiers for DOM querying and test assertions.
 */
import React from 'react';
import type { PuckData } from '@pantheon-systems/css-client';
import type { ComponentDiffWithPosition } from '../../../core/types.js';
import type { ViewMode } from './ViewModeSelector.js';
/**
 * Props for the MergePreviewRenderer component.
 */
export interface MergePreviewRendererProps {
    /** The "before" side of `diffs` (the baseline), drawn in the left panel. */
    sourceData: PuckData;
    /** The "after" side of `diffs` (the changed version), drawn in the right panel. */
    targetData: PuckData;
    /** Component-level diffs with position information. */
    diffs: ComponentDiffWithPosition[];
    /** Puck configuration for rendering components. */
    config: any;
    /** Per-panel config overrides, e.g. to resolve each side against its own branch. */
    sourceConfig?: any;
    targetConfig?: any;
    /** The current view mode. */
    viewMode: ViewMode;
    /** Name of the source branch. */
    sourceBranchName: string;
    /** Name of the target branch. */
    targetBranchName: string;
    /** Replaces the plain branch-name labels of the side-by-side panels. */
    panelHeaders?: {
        source: React.ReactNode;
        target: React.ReactNode;
    };
    /**
     * When false, renders both panels without the added/removed/modified
     * highlight overlays — `diffs` still decides whether there's anything to
     * compare at all. Defaults to true.
     */
    highlightChanges?: boolean;
    /** Whether to render the "N added, M removed, ..." summary line above the panels. Defaults to true. */
    showSummary?: boolean;
    /**
     * Replaces one panel's rendered frame with a text message — for a page
     * that only exists on the other branch, where there's nothing to diff.
     */
    panelPlaceholder?: {
        side: 'source' | 'target';
        message: string;
    };
    /** Which panel, if any, holds the version the reviewer chose to keep. */
    selectedPanel?: 'source' | 'target';
}
/**
 * Renders diff-highlighted content in the selected view mode.
 *
 * Supports three modes:
 * - **side-by-side**: Two panels showing source and target with diff highlights
 * - **overlay**: Layered view of both versions
 * - **slider**: Range slider to blend between source and target
 *
 * @param props - {@link MergePreviewRendererProps}
 * @returns A React element rendering the diff-highlighted comparison in the chosen view mode.
 *
 * @example
 * ```tsx
 * <MergePreviewRenderer
 *   sourceData={sourceData}
 *   targetData={targetData}
 *   diffs={diffs}
 *   config={puckConfig}
 *   viewMode="side-by-side"
 *   sourceBranchName="feature"
 *   targetBranchName="main"
 * />
 * ```
 */
export declare function MergePreviewRenderer({ sourceData, targetData, diffs, config, sourceConfig, targetConfig, viewMode, sourceBranchName, targetBranchName, panelHeaders, highlightChanges, showSummary, panelPlaceholder, selectedPanel, }: MergePreviewRendererProps): React.ReactElement;