import { default as React, ReactNode } from 'react';
import { GraphPort, IGraphNode, IPoint } from '../../lib/graph';

export interface GraphNodeProps {
    /** The node to render. Position and size come from here. */
    node: IGraphNode;
    /** Node body. Anything — a label, a form, a chart. */
    children?: ReactNode;
    /**
     * Called with the new top-left position while dragging, and again on
     * release. The component never mutates the node — you apply the move, which
     * is what lets you snap, constrain or reject it.
     */
    onMove?: (id: string, position: IPoint) => void;
    /** Called when the drag ends, if the node actually moved. */
    onMoveEnd?: (id: string, position: IPoint) => void;
    /** Called on click. */
    onSelect?: (id: string, event: React.MouseEvent) => void;
    /** Called on double-click. Conventionally enters edit mode. */
    onActivate?: (id: string) => void;
    /** Called on right-click, with the client point for a context menu. */
    onContextMenu?: (id: string, point: IPoint, event: React.MouseEvent) => void;
    /**
     * Called when one of the node's ports is dragged, to begin a connection.
     * Providing it is what makes the ports appear.
     */
    onConnectStart?: (id: string, port: GraphPort) => void;
    /**
     * Called when a pointer is released over this node, with its id — the target
     * end of a connection started elsewhere.
     */
    onConnectEnd?: (targetId: string) => void;
    /** Draw as selected. */
    selected?: boolean;
    /**
     * Draw as focused — the keyboard cursor. Distinct from `selected`: focus is
     * where the next keystroke lands, selection is what an action applies to.
     */
    focused?: boolean;
    /** Show connection ports on hover and while focused. Defaults to `true`. */
    ports?: boolean;
    /** Allow dragging. Defaults to `true`. */
    draggable?: boolean;
    /** Extra classes merged onto the node element. */
    className?: string;
}
/**
 * A positioned, focusable node on a {@link GraphCanvas}.
 *
 * Provides placement, dragging, selection and focus affordances, and the four
 * edge ports. What the node *contains* is entirely yours — pass any children.
 *
 * Fully controlled: dragging reports positions through `onMove` but never moves
 * the node itself, so snapping, constraints and undo stay in your hands.
 *
 * @example
 * ```tsx
 * <GraphNode
 *   node={node}
 *   focused={node.id === focusedId}
 *   onMove={(id, position) => setNodes(move(nodes, id, position))}
 *   onActivate={(id) => setEditing(id)}
 * >
 *   <p className="text-xs font-medium">{node.data.label}</p>
 * </GraphNode>
 * ```
 */
export declare const GraphNode: ({ node, children, onMove, onMoveEnd, onSelect, onActivate, onContextMenu, onConnectStart, onConnectEnd, selected, focused, ports, draggable, className, }: GraphNodeProps) => import("react/jsx-runtime").JSX.Element;