/**
 * OrbPreviewNode
 *
 * React Flow node that renders a real OrbPreview inside it.
 * The canvas is always live and editable (like Figma). Clicking any
 * rendered UI element selects its pattern and shows props in the
 * TransitionPanel. No edit mode toggle needed.
 *
 * The header is the drag handle for React Flow. The content area
 * passes clicks through to the pattern elements.
 */
import React from 'react';
import { type NodeProps } from '@xyflow/react';
import type { PreviewNodeData, ScreenSize } from './avl-preview-types';
export declare const ScreenSizeContext: React.Context<ScreenSize>;
/** Selected pattern info, emitted when user clicks a UI element in the node. */
export interface SelectedPattern {
    /** The pattern type (e.g., "button", "input", "stack"). */
    patternType: string;
    /** The DOM element's data-pattern-id if available. */
    patternId?: string;
    /** The node this pattern belongs to. */
    nodeData: PreviewNodeData;
    /** The source trait for this slot content. */
    sourceTrait?: string;
    /** Bounding rect relative to the node for floating inspector positioning. */
    rect?: {
        top: number;
        left: number;
        width: number;
        height: number;
    };
}
export declare const PatternSelectionContext: React.Context<{
    selected: SelectedPattern | null;
    select: (pattern: SelectedPattern | null) => void;
}>;
export declare const OrbPreviewNode: React.NamedExoticComponent<NodeProps>;
