import { JSX, PointerEvent as ReactPointerEvent, ReactNode } from 'react';
import { ContentItem } from '../schema/index.ts';
import { DropEdge } from '../dragSort';
/** What is being dragged, and how to turn it into an item once it lands. */
export interface InsertPayload {
    /** What the chip under the pointer says while the element is in the air. */
    label: string;
    /** The picker row's icon, so the chip is recognisably the row that was grabbed. */
    icon?: JSX.Element;
    /**
     * Builds the item on drop, from the form's items as they stand. Deferred to
     * the drop rather than made on the press so a cancelled drag creates nothing,
     * and so the new item's order is read off the list it is actually joining.
     */
    make: (items: ContentItem[]) => ContentItem;
}
/** Where a drop would land: beside `targetId`, or above/below it. */
export interface InsertTarget {
    targetId: string;
    edge: DropEdge;
}
/**
 * What the canvas is told to draw. Non-null only while the drag is over the
 * form: `overId` null then means the pointer is on the form but not on any
 * item, so the element would land at the end of the open step.
 */
export interface DropHint {
    overId: string | null;
    edge: DropEdge | null;
}
export interface InsertDrag {
    /** Arm a drag on a picker row, from its `onPointerDown`. */
    press: (payload: InsertPayload, e: ReactPointerEvent) => void;
    /** True once a press has travelled far enough to be a drag. */
    dragging: boolean;
    /** What is in the air, for the chip that follows the pointer. */
    payload: InsertPayload | null;
    /** Where a drop would land right now, handed to the canvas to draw. */
    dropHint: DropHint | null;
    /** The canvas body, handed over by the renderer so drops can be aimed at it. */
    canvasRef: (el: HTMLElement | null) => void;
    /** The chip's own element, positioned straight from the pointer. */
    ghostRef: (el: HTMLDivElement | null) => void;
    /**
     * Whether the click now arriving is the tail of a drag that just ended, in
     * which case the row must not also add the element. Pressing and releasing on
     * the same row without travelling is still an ordinary click, which is the
     * click-to-add path the picker keeps.
     */
    consumeClick: () => boolean;
}
export declare function InsertDragProvider({ drag, children }: {
    drag: InsertDrag;
    children: ReactNode;
}): JSX.Element;
/** The running drag, for a surface that can start one (the picker). */
export declare function useInsertSource(): InsertDrag | null;
/**
 * Run the insert drag. `onInsert` is called once, on a drop that landed on the
 * form; a drag released anywhere else is a cancel, and adds nothing.
 */
export declare function useInsertDrag(onInsert: (payload: InsertPayload, at: InsertTarget | null) => void): InsertDrag;
/**
 * The chip that follows the pointer while an element is in the air. Rendered
 * inline in the editor rather than portalled to `document.body`, because the
 * editor ships inside a shadow root and a portal would leave its styles behind.
 */
export declare function InsertGhost({ drag }: {
    drag: InsertDrag;
}): JSX.Element | null;