import { Drops } from "./drops.js";
/** respond to user dragging-and-dropping things around on a webpage */
export declare class DragAndDrops<Draggy, Droppy> {
    private params;
    /** what is currently being dragged */
    $draggy: import("@e280/strata").Signal<Draggy | undefined>;
    /** what dropzone are we curently hovering over */
    $droppy: import("@e280/strata").Signal<Droppy | undefined>;
    constructor(params: {
        /** accept a dropped item that was declared within this system */
        acceptDrop: (event: DragEvent, draggy: Draggy, droppy: Droppy) => void;
        /** also accept drops on the side */
        backchannelDrops?: Drops;
    });
    get dragging(): Draggy | undefined;
    get hovering(): Droppy | undefined;
    /** make event listeners to attach to your dragzone(s) */
    dragzone: (getDraggy: () => Draggy) => {
        draggable: string;
        dragstart: (_: DragEvent) => void;
        dragend: (_: DragEvent) => void;
    };
    /** make event listeners to attach to your dropzones(s) */
    dropzone: (getDroppy: () => Droppy) => {
        dragenter: (_: DragEvent) => void;
        dragover: (event: DragEvent) => void;
        dragleave: (event: DragEvent) => void;
        drop: (event: DragEvent) => void;
    };
}