import { default as React } from 'react';
import { Theme } from '@principal-ade/industry-theme';
export interface PanelDefinition {
    id: string;
    label: string;
    preview?: React.ReactNode;
    icon?: React.ReactNode;
}
export type PanelSlot = string | null | PanelGroup;
export interface PanelGroup {
    type: 'tabs' | 'tiles';
    panels: string[];
    config?: TabsConfig | TilesConfig;
}
export interface TabsConfig {
    defaultActiveTab?: number;
    tabPosition?: 'top' | 'bottom' | 'left' | 'right';
    centered?: boolean;
    hideTabList?: boolean;
    activeTabIndex?: number;
    onTabChange?: (index: number) => void;
}
export interface TilesConfig {
    direction?: 'horizontal' | 'vertical' | 'grid';
    columns?: number;
    rows?: number;
    tileSizes?: number[];
}
export interface PanelLayout {
    left?: PanelSlot;
    middle?: PanelSlot;
    right?: PanelSlot;
}
export interface PanelConfiguratorProps {
    /** Available panels that can be placed in slots */
    availablePanels: PanelDefinition[];
    /** Current layout configuration */
    currentLayout: PanelLayout;
    /** Callback when layout changes */
    onChange: (layout: PanelLayout) => void;
    /** Optional class name for the container */
    className?: string;
    /** Optional theme override (uses context theme by default) */
    theme?: Theme;
}
/**
 * PanelConfigurator - Interactive UI for configuring panel layout
 *
 * Interaction modes:
 * - Click slot → click panel: Assigns panel to slot
 * - Click panel → click slot: Assigns panel to slot
 * - Click slot → click slot: Swaps their content
 */
export declare const PanelConfigurator: React.FC<PanelConfiguratorProps>;
//# sourceMappingURL=PanelConfigurator.d.ts.map