@vue-dnd-kit/core 2.4.7 → 3.0.0-beta.2

package/dist/index.d.ts

@@ -1,2 +1,2425 @@
-export * from './external/index'
-export {}
+import { App } from 'vue';
+import { Component } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { ComponentPublicInstance } from 'vue';
+import { ComputedRef } from 'vue';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+import { RendererElement } from 'vue';
+import { RendererNode } from 'vue';
+import { SlotsType } from 'vue';
+import { TransitionProps } from 'vue';
+import { VNode } from 'vue';
+import { WritableComputedRef } from 'vue';
+
+/** What a function `accept` rule is asked with. */
+export declare interface AcceptContext {
+    /** The drag. */
+    active: Active;
+    /** Every dragged item. */
+    items: DragItem[];
+    /** The types of every dragged item, together. */
+    types: string[];
+}
+
+/** `'all'`: every dragged item must match; `'some'`: at least one (the rest can be rejected in `onBeforeDrop`). */
+export declare type AcceptMode = 'all' | 'some';
+
+/** `'*'` or omitted accepts everything. Untyped items fit any string rule (v2 `groups: []` parity). */
+export declare type AcceptRule = '*' | string | string[] | ((context: AcceptContext) => boolean);
+
+/**
+ * What a press must do before it becomes a drag: travel `distance`, or be held for `delay`,
+ * whichever comes first. Nothing set: the drag starts at once.
+ */
+export declare interface ActivationConstraint {
+    /** Pixels the pointer must travel before the drag starts. */
+    distance?: number;
+    /** Milliseconds the pointer must be held before the drag starts. */
+    delay?: number;
+    /** With `delay`: movement in px that aborts activation, so the page can scroll. */
+    tolerance?: number;
+}
+
+/** Per pointer kind. Defaults: mouse `{ distance: 4 }` (immediate on a handle), pen `{ distance: 4 }`, touch `{ delay: 200, tolerance: 5 }`. */
+export declare type ActivationOptions = Partial<Record<PointerKind, ActivationConstraint>>;
+
+/** The running drag: the item it started from, and every item it carries. */
+export declare interface Active<T = unknown> {
+    /** Id of the item the drag started from. */
+    id: Key;
+    /** Every dragged id, the primary one first (multi-drag). */
+    ids: Key[];
+    /** Every dragged item, the primary one first. */
+    items: DragItem<T>[];
+    /** The `data` of the item the drag started from. */
+    data: unknown;
+    /** The `label` of the item the drag started from, what people call it. */
+    label?: string;
+    /** The normalized `type` of the item the drag started from; empty means it fits any drop target. */
+    type: string[];
+    /** Element the drag started from. It may get detached (virtual lists, cross-list moves). */
+    element: HTMLElement;
+    /** Layout rect of `element` at drag start. */
+    rect: Rect;
+    /** How the drag moves: `'pointer'` follows points, `'keyboard'` moves by items (`SensorActivation.type`). */
+    sensor: SensorType;
+    /**
+     * A drag from outside the page (files, a link, text, or items from another window of the
+     * app): what it carries. Its `items` are made for it (`element` is a stand-in).
+     */
+    external?: ExternalData;
+    /** The browser's own drag (`native`, or one from outside): the browser draws the dragged image, and there is no overlay. */
+    native?: boolean;
+}
+
+/** The timing of an animation. What is left out keeps the default of that animation. */
+export declare interface AnimationOptions {
+    /** In ms. Default 200 for layout moves, 250 for the drop; `0` turns the animation off. */
+    duration?: number;
+    /** A CSS easing (`'ease-out'`, `cubic-bezier(…)`). */
+    easing?: string;
+}
+
+/** A place in a sortable list or tree (its visible rows): `index` counts from 0, out of `length`. */
+export declare interface AnnouncedPosition {
+    /** Id of the list or tree. */
+    list: Key;
+    /** The list's `label`, what people call it. */
+    label?: string;
+    /** The place, from 0: the built-in texts say `index + 1`. */
+    index: number;
+    /** How many places the list has. */
+    length: number;
+}
+
+/**
+ * What an announcement is about, beyond the event: for texts of your own (another
+ * language, other words) that say what the built-in ones say.
+ */
+export declare interface AnnouncementContext {
+    /**
+     * In a sortable list or tree: where the dragged items are. At the start, where they
+     * were picked up; while moving, where they would land (none outside the lists); at the
+     * end, where they landed, or where they went back to.
+     */
+    position?: AnnouncedPosition;
+    /** A swap: the item exchanged with the dragged one, and where it is now. */
+    partner?: {
+        key: Key;
+        label?: string;
+        position: AnnouncedPosition;
+    };
+    /** How many items the drag carries. */
+    count: number;
+    /** The drag copies (`group.pull: 'clone'`, the copy modifier). */
+    copy: boolean;
+}
+
+/**
+ * Texts for screen readers, per event. Return `undefined` for the built-in text, `''` for
+ * none. `context` has the positions the built-in texts of sortable lists speak.
+ *
+ * A text is spoken by the provider's live region (moves once the drag rests for 500 ms);
+ * `undefined` leaves the event to the next source (the texts of integrations such as
+ * sortable positions, then the defaults). A move isn't announced for the target found at
+ * pickup: nothing moved yet.
+ */
+export declare interface Announcements {
+    /** A drag started. */
+    onDragStart(event: DnDEvent, context: AnnouncementContext): string | undefined;
+    /** The drag moved over another target, or to another place in a list (once it rests for 500 ms). */
+    onDragOver(event: DnDEvent, context: AnnouncementContext): string | undefined;
+    /** The drop went through, or the drag ended outside every target. */
+    onDragEnd(event: DnDEndEvent, context: AnnouncementContext): string | undefined;
+    /** The drag was cancelled, or its drop refused. */
+    onDragCancel(event: DnDEvent, context: AnnouncementContext): string | undefined;
+    /** `onBeforeDrop` answered `'continue'`: the drag goes on. */
+    onDragResume(event: DnDEvent, context: AnnouncementContext): string | undefined;
+}
+
+/**
+ * Animates changes of a list's (or tree's) items that no drag made: items added, removed,
+ * moved (a sort, a shuffle, a move between lists of one group) or filtered. Off by default
+ * (`false`); `true` animates moves, entering and leaving items with the default timing.
+ * Drags keep their own animations (`animation`, `dropAnimation`). With
+ * `prefers-reduced-motion: reduce` the default animations don't run; functions of yours
+ * still do (with `reducedMotion: true`). Only items near the visible area animate
+ * (unmounted rows of a virtual list are skipped).
+ */
+export declare type AutoAnimation = boolean | AutoAnimationOptions;
+
+/**
+ * `animateChanges` with its parts: `duration` and `easing` for all of them, and per kind of
+ * change `true`, options (over the shared ones), `false`, or a function of your own.
+ */
+export declare interface AutoAnimationOptions extends AnimationOptions {
+    /** Items that changed places (the default FLIP, as `animation`'s; a function replaces it). */
+    move?: LayoutAnimation;
+    /** Items that appeared. Default: they fade in where they are. */
+    enter?: EnterAnimation;
+    /** Items that left. Default: a copy of the item fades out where it was, shrinking a little. */
+    leave?: LeaveAnimation;
+}
+
+/** How containers scroll when a drag nears their edges (the provider's `autoScroll`). */
+export declare interface AutoScrollOptions {
+    /** Edge zone as a fraction of the container size. Default 0.2 (clamped to 24–96px). */
+    threshold?: number;
+    /** Maximum speed in px per 16ms frame. */
+    maxSpeed?: number;
+    /**
+     * Speed in px per frame with the pointer at the container's edge: slower inside the edge
+     * zone, faster past the edge, up to `maxSpeed`. Default 10.
+     */
+    acceleration?: number;
+}
+
+/**
+ * What `onBeforeDrop` decides:
+ * - `'accept'` (or `true`, or nothing): the drop goes through;
+ * - `'reject'` (or `false`): no drop, the items fly back;
+ * - a list of ids: only those items are accepted, the others fly back;
+ * - `'continue'`: no drop, and the drag goes on. With a pointer the item follows it again
+ *   (no button held) and the next release drops it, a click does; a touch takes it again;
+ *   the keyboard moves it as before. Escape cancels it. The drop asks `onBeforeDrop` again.
+ */
+export declare type BeforeDropResult = boolean | void | Key[] | 'accept' | 'reject' | 'continue';
+
+/** Every target, by distance between centers. */
+export declare const closestCenter: CollisionDetection;
+
+/** Every target, by summed distance between corners (good for stacked targets such as kanban columns). */
+export declare const closestCorners: CollisionDetection;
+
+/** What a collision detection gets, on every move of the drag. */
+export declare interface CollisionArgs {
+    /** Pointer in viewport coordinates, after modifiers. */
+    pointer: Coordinates;
+    /** Rect of the dragged box (the overlay, or the element itself with `overlay: false`) where the drag has moved it. */
+    overlayRect: Rect | null;
+    /** Every drop target the drag could go to, whether its `accept` rule takes the drag or not. */
+    candidates: CollisionCandidate[];
+    /** Drop targets under the pointer from hit-testing (respects z-order and shadow roots), best first. */
+    hits: Key[];
+}
+
+/** A drop target a collision detection can pick: enabled, on the page and not fully clipped. */
+export declare interface CollisionCandidate {
+    /** Id of the drop target. */
+    id: Key;
+    /** Visible part of the target: clipped by its scroll containers and the viewport. */
+    rect: Rect;
+    /** The target's `priority` (default 0): higher wins when targets overlap without nesting. Sortable items beat containers. */
+    priority: number;
+    /** Nesting level among drop targets: 0 at the top, deeper targets have higher values. */
+    depth?: number;
+}
+
+/** Returns candidate ids, best first. */
+export declare type CollisionDetection = (args: CollisionArgs) => Key[];
+
+/**
+ * A component instance as a template ref gives it. Only `$el` is read: Vue's full
+ * `ComponentPublicInstance` would reject every component that declares typed emits
+ * (its `$emit` takes any event name), which is most UI kit components.
+ */
+declare type ComponentRef = Pick<ComponentPublicInstance, '$el'>;
+
+/**
+ * A point or an offset, in px: a position from the viewport's top-left corner, or an offset
+ * from where the drag started (`delta`, `transform`).
+ */
+export declare interface Coordinates {
+    /** Horizontal, growing to the right. */
+    x: number;
+    /** Vertical, growing downward. */
+    y: number;
+}
+
+/** Defines a sensor (see `Sensor`): it only helps with the types and returns its argument. */
+export declare const defineSensor: (sensor: Sensor) => Sensor;
+
+/**
+ * A provider as `useDnDContext()` returns it, to hand to `provideDnDContext()`: another
+ * Vue app (e.g. one mounted in a shadow root) then works with the same provider. Opaque:
+ * it has no public members, so it never changes with the library's internals.
+ */
+export declare interface DnDContext {
+    readonly [dndContext]: true;
+}
+
+declare const dndContext: unique symbol;
+
+/** What `onDragEnd` (and the target's `onDrop`) gets: the event of the drop, and how it went. */
+export declare interface DnDEndEvent<T = unknown> extends DnDEvent<T> {
+    /** False when the drag ended outside every drop target. */
+    dropped: boolean;
+    /** Ids accepted by `onBeforeDrop` (all dragged ids unless a subset was returned). */
+    accepted: Key[];
+    /** The other dragged ids: `onBeforeDrop` left them out, and they fly back. Empty when it took them all. */
+    rejected: Key[];
+    /**
+     * A drag out of the page (`native`) dropped somewhere else: what that place did with it.
+     * `'move'` takes the items out of their sortable list here; `'copy'` and `'link'` leave them.
+     */
+    droppedOutside?: 'move' | 'copy' | 'link';
+}
+
+/** What drag events carry: monitors, the provider's events and the hooks of drop targets get it. */
+export declare interface DnDEvent<T = unknown> {
+    /** The drag. */
+    active: Active<T>;
+    /** The drop target under the drag; `null` over nothing. */
+    over: Over | null;
+    /** Pointer in viewport coordinates, after modifiers. */
+    pointer: Coordinates;
+    /** Offset from the drag start, after modifiers. */
+    delta: Coordinates;
+    /**
+     * Where the dragged box's top-left corner is in `over`, from its padding edge and with
+     * its scroll: the `left`/`top` that put an absolutely positioned item where it was
+     * dropped (a note on a board). `null` over nothing. Of the overlay box, or of the
+     * element itself with `overlay: false`.
+     */
+    readonly position: Coordinates | null;
+    /**
+     * What a drop would do: `'move'`, `'copy'` (a list's `pull: 'clone'`, or the copy
+     * modifier held over items whose list can `clone`), `'swap'` or `'insert'`. A plain drop
+     * target reads it to copy instead of moving.
+     */
+    mode: DragMode;
+    /** Present when the dragged items come from a sortable list. */
+    source?: DragSource;
+    /** A drag from outside the page: what it carries (`active.external`). Its data comes at the drop. */
+    external?: ExternalData;
+}
+
+/** Hooks for every drag under the provider (`useDnDMonitor`). */
+export declare interface DnDMonitor {
+    /** A drag started, after its activation. */
+    onDragStart?(event: DnDEvent): void;
+    /** The drag moved (once per frame at most). */
+    onDragMove?(event: DnDEvent): void;
+    /** The target under the drag changed. */
+    onDragOver?(event: DnDEvent): void;
+    /** Runs before the drop is committed (see `BeforeDropResult`): `'reject'` refuses it, ids accept a subset. */
+    onBeforeDrop?(event: DnDEvent): MaybePromise<BeforeDropResult>;
+    /** A notification once the drop is done: sortable lists have run their `onDrop` and written it. */
+    onDragEnd?(event: DnDEndEvent): void;
+    /** The drag was cancelled, or its drop refused: the items fly back. */
+    onDragCancel?(event: DnDEvent): void;
+    /** `onBeforeDrop` answered `'continue'`: there was no drop, and the drag goes on. */
+    onDragResume?(event: DnDEvent): void;
+    /**
+     * The overlay of an ended drag has landed: after its drop animation (or the flight back
+     * of a cancel), with the event `onDragEnd` (a `DnDEndEvent`) or `onDragCancel` got.
+     * The next drag may have started meanwhile: drags don't wait for landings.
+     */
+    onDragSettle?(event: DnDEvent | DnDEndEvent): void;
+    /** Keyboard drags: next pointer position for an arrow key (e.g. the next sortable slot). */
+    getKeyboardCoordinates?(event: KeyboardEvent, context: KeyboardMoveContext): MaybePromise<Coordinates | undefined>;
+}
+
+/**
+ * Owns the drags of everything rendered inside it: input, the overlay, the selection,
+ * auto-scroll and the screen reader announcements (see `DnDProviderProps`).
+ */
+export declare const DnDProvider: DefineComponent<ExtractPropTypes<    {
+collision: PropType<CollisionDetection>;
+modifiers: PropType<Modifier[]>;
+animation: {
+type: PropType<LayoutAnimation>;
+default: undefined;
+};
+dropAnimation: {
+type: PropType<DropAnimation>;
+default: undefined;
+};
+animateChanges: {
+type: PropType<AutoAnimation>;
+default: undefined;
+};
+autoScroll: {
+type: PropType<boolean | AutoScrollOptions>;
+default: boolean;
+};
+activation: PropType<ActivationOptions>;
+keyboard: {
+type: PropType<KeyboardOptions | false>;
+default: undefined;
+};
+sensors: PropType<Sensor[]>;
+haptics: {
+type: PropType<boolean | HapticsOptions>;
+default: undefined;
+};
+copyModifier: {
+type: PropType<string | null>;
+default: string;
+};
+overlayTo: {
+type: PropType<string | HTMLElement>;
+default: string;
+};
+overlayFit: {
+type: PropType<"slot" | "source">;
+default: string;
+};
+overlayPreviews: {
+type: PropType<number | "all">;
+default: number;
+};
+overlayTransition: {
+type: PropType<boolean | TransitionProps>;
+default: boolean;
+};
+overlayClass: {
+type: PropType<DnDProviderProps["overlayClass"]>;
+default: undefined;
+};
+announcements: {
+type: PropType<Partial<Announcements> | false>;
+default: undefined;
+};
+screenReaderInstructions: StringConstructor;
+defaultStyles: {
+type: BooleanConstructor;
+default: boolean;
+};
+}>, () => (VNode<RendererNode, RendererElement, {
+[key: string]: any;
+}> | VNode<RendererNode, RendererElement, {
+[key: string]: any;
+}>[] | null | undefined)[], {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+dragStart: (_event: DnDEvent) => true;
+dragMove: (_event: DnDEvent) => true;
+dragOver: (_event: DnDEvent) => true;
+dragEnd: (_event: DnDEndEvent) => true;
+dragCancel: (_event: DnDEvent) => true;
+dragResume: (_event: DnDEvent) => true;
+dragSettle: (_event: DnDEvent | DnDEndEvent) => true;
+}, string, PublicProps, Readonly<ExtractPropTypes<    {
+collision: PropType<CollisionDetection>;
+modifiers: PropType<Modifier[]>;
+animation: {
+type: PropType<LayoutAnimation>;
+default: undefined;
+};
+dropAnimation: {
+type: PropType<DropAnimation>;
+default: undefined;
+};
+animateChanges: {
+type: PropType<AutoAnimation>;
+default: undefined;
+};
+autoScroll: {
+type: PropType<boolean | AutoScrollOptions>;
+default: boolean;
+};
+activation: PropType<ActivationOptions>;
+keyboard: {
+type: PropType<KeyboardOptions | false>;
+default: undefined;
+};
+sensors: PropType<Sensor[]>;
+haptics: {
+type: PropType<boolean | HapticsOptions>;
+default: undefined;
+};
+copyModifier: {
+type: PropType<string | null>;
+default: string;
+};
+overlayTo: {
+type: PropType<string | HTMLElement>;
+default: string;
+};
+overlayFit: {
+type: PropType<"slot" | "source">;
+default: string;
+};
+overlayPreviews: {
+type: PropType<number | "all">;
+default: number;
+};
+overlayTransition: {
+type: PropType<boolean | TransitionProps>;
+default: boolean;
+};
+overlayClass: {
+type: PropType<DnDProviderProps["overlayClass"]>;
+default: undefined;
+};
+announcements: {
+type: PropType<Partial<Announcements> | false>;
+default: undefined;
+};
+screenReaderInstructions: StringConstructor;
+defaultStyles: {
+type: BooleanConstructor;
+default: boolean;
+};
+}>> & Readonly<{
+onDragStart?: ((_event: DnDEvent<unknown>) => any) | undefined;
+onDragMove?: ((_event: DnDEvent<unknown>) => any) | undefined;
+onDragOver?: ((_event: DnDEvent<unknown>) => any) | undefined;
+onDragEnd?: ((_event: DnDEndEvent<unknown>) => any) | undefined;
+onDragCancel?: ((_event: DnDEvent<unknown>) => any) | undefined;
+onDragResume?: ((_event: DnDEvent<unknown>) => any) | undefined;
+onDragSettle?: ((_event: DnDEvent<unknown> | DnDEndEvent<unknown>) => any) | undefined;
+}>, {
+keyboard: false | KeyboardOptions;
+animation: LayoutAnimation;
+dropAnimation: DropAnimation;
+animateChanges: AutoAnimation;
+autoScroll: boolean | AutoScrollOptions;
+haptics: boolean | HapticsOptions;
+copyModifier: string | null;
+overlayTo: string | HTMLElement;
+overlayFit: "slot" | "source";
+overlayPreviews: number | "all";
+overlayTransition: boolean | TransitionProps;
+overlayClass: string | Record<string, boolean> | (string | Record<string, boolean>)[] | undefined;
+announcements: false | Partial<Announcements>;
+defaultStyles: boolean;
+}, SlotsType<{
+default?: () => VNode[];
+/**
+* Overlay for drags without an `overlay` component of their own (item, list or
+* tree option). Rendering nothing (`v-if`) falls back to the clone.
+*/
+overlay?: (props: OverlaySlotProps) => VNode[];
+}>, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Props of `DnDProvider`. Most are read when the provider needs them: change one, and the
+ * next drag uses it.
+ */
+export declare interface DnDProviderProps {
+    /** How the target under the drag is chosen. Default `pointerFirst`; another built-in (`closestCorners`) or your own. */
+    collision?: CollisionDetection;
+    /** Modifiers for every drag, applied first: those of drag areas, draggables and lists come after. */
+    modifiers?: Modifier[];
+    /** Default FLIP animation for sortable lists. */
+    animation?: LayoutAnimation;
+    /**
+     * How the overlay lands on drop and flies back on cancel, when nothing closer sets one:
+     * the drop target's `overDropAnimation` comes first, then the dragged item's own (or its
+     * list's), then this one.
+     */
+    dropAnimation?: DropAnimation;
+    /** Default `animateChanges` of sortable lists and trees: changes of their items that no drag made. Off by default. */
+    animateChanges?: AutoAnimation;
+    /**
+     * Scrolls containers and the page when a drag nears their edges. Default `true`; options
+     * tune it, `false` turns it off. Lists, trees and drag areas can override it.
+     */
+    autoScroll?: boolean | AutoScrollOptions;
+    /**
+     * What a press must do before it becomes a drag, per pointer kind (see
+     * `ActivationOptions` for the defaults). Drag areas, lists, trees, items and draggables
+     * can override it.
+     */
+    activation?: ActivationOptions;
+    /** Keyboard drags: their keys and step. `false` turns them off; Escape still cancels any drag. */
+    keyboard?: KeyboardOptions | false;
+    /**
+     * What turns input into drags. Default `[pointerSensor, keyboardSensor]`: leave one out,
+     * wrap or replace it, or add your own (`defineSensor`). The keyboard sensor also cancels
+     * any drag with Escape; `keyboard: false` turns its drags off but keeps that. The list
+     * may change at any time: sensors that leave it stop, cancelling their drag.
+     */
+    sensors?: Sensor[];
+    /**
+     * Vibration for touch drags. Default: a short one when a drag starts after the long
+     * press; an object adds others (`enter`, `drop`, `refuse`); `false` turns them all off.
+     */
+    haptics?: boolean | HapticsOptions;
+    /** Key (KeyboardEvent.key) that turns a move into a copy. Default `'Alt'`; `null` disables. */
+    copyModifier?: string | null;
+    /**
+     * Where the overlay renders: a selector or an element. Default `'body'`. A modal
+     * `<dialog>` sits above the rest of the page: drags inside one need it there.
+     */
+    overlayTo?: string | HTMLElement;
+    /**
+     * Overlay size while dragging. `'slot'` (default): it follows the slot the item will
+     * land in, so over another list it takes the size of that list's items, and the drop
+     * needs no resize. It resizes around the pointer, which stays at the same fraction of
+     * the box. `'source'`: it keeps the dragged element's size. The default overlay
+     * content re-lays out at the new size; it is never scaled.
+     */
+    overlayFit?: 'slot' | 'source';
+    /**
+     * Multi-drag: how many dragged items get a clone at pickup, the grabbed one and the
+     * others next to it in drop order. Default 5; `'all'` clones every one that is rendered.
+     * The default overlay shows the clones and counts the rest (`+N`); in a layout of your
+     * own, `DragPreview` renders its slot for an item without one. Every clone flies: back to
+     * its item on a cancel, to its slot on a drop, into the zone a drop goes into, one after
+     * another. The clones are taken together, one layout per snapshot pass for all, but each
+     * costs reading its styles: mind long items on slow phones.
+     */
+    overlayPreviews?: number | 'all';
+    /**
+     * How the overlay changes from one component to another during a drag (a drop target's
+     * `overOverlay` takes over, an `overlay` ref is switched): `true` (default) crossfades them
+     * in 150 ms, `false` swaps them at once, and an object is the props of a Vue
+     * `<Transition>` around the content's root (`name`, `mode`, JS hooks for GSAP or
+     * motion). Without `mode: 'out-in'` both show at once: give the leaving one
+     * `position: absolute` (`.<name>-leave-active`) so they stack in the box.
+     */
+    overlayTransition?: boolean | TransitionProps;
+    /**
+     * Classes for the overlay's content (`[data-dnd-overlay-content]`), the element that
+     * fills the overlay box: the one to animate as a whole while the library moves and
+     * sizes the box. A transition on it runs from `@starting-style` as the drag picks up,
+     * and back as it lands (`[data-dnd-overlay='dropping']`): the drop waits for it. Plain
+     * CSS reaches it outside `<style scoped>` (or with `:global(...)`), Tailwind with
+     * `starting:` and `in-data-[dnd-overlay=dragging]:`.
+     */
+    overlayClass?: string | Record<string, boolean> | Array<string | Record<string, boolean>>;
+    /** Own texts for some events (see `Announcements`); `false` keeps the live region silent. */
+    announcements?: Partial<Announcements> | false;
+    /**
+     * How to drag with the keyboard, read out by screen readers for every draggable (its
+     * `aria-describedby`). Default: English instructions for Space, Enter, the arrows and Escape.
+     */
+    screenReaderInstructions?: string;
+    /**
+     * Inject the default looks: zero-specificity, layered CSS that dims placeholders and the
+     * items a multi-drag leaves in place (`opacity: 0.4`). Default `true`; `false` leaves
+     * the looks to you. What drags need is injected either way: no text selection and no
+     * scroll anchoring while dragging (virtual lists rely on it), the drag cursor
+     * (`--dnd-cursor`), and no link callout on a long press on iOS.
+     */
+    defaultStyles?: boolean;
+}
+
+/**
+ * The selected draggables, by id: a drag of one of them carries them all (multi-drag). Kept
+ * by id, a selection survives unmounts (virtual lists).
+ */
+export declare interface DnDSelection {
+    /** The selected ids, reactive. */
+    readonly ids: ReadonlySet<Key>;
+    /** Whether `id` is selected. */
+    has(id: Key): boolean;
+    /** Selects these ids. */
+    add(...ids: Key[]): void;
+    /** Deselects these ids. */
+    delete(...ids: Key[]): void;
+    /** Selects `id` or deselects it; `force: true` selects it, `false` deselects it. */
+    toggle(id: Key, force?: boolean): void;
+    /** Selects these ids and no others. */
+    set(ids: Iterable<Key>): void;
+    /** Deselects every id. */
+    clear(): void;
+}
+
+/**
+ * The drag state ends when the drop is decided: `active`, `over` and `pointer` read
+ * `null` (and droppables stop accepting) while the overlay still animates into place.
+ * Derived UI never mixes the old drag with the new data. While an async `onBeforeDrop`
+ * decides, the state is kept as it was at release, but the page is out of drag mode: its
+ * own cursor and text selection are back (a confirmation dialog works normally), and the
+ * overlay waits where it was dropped.
+ *
+ * `status` is `'dragging'` while a drag runs, else `'dropping'` while a drop is decided or
+ * an overlay still lands, else `'idle'` (`'activating'` and `'selecting'` aside). A new drag
+ * doesn't wait for the landings: it starts at once, and they finish around it.
+ */
+export declare interface DnDState {
+    /** What the provider is doing (see `DnDStatus`). */
+    status: Readonly<Ref<DnDStatus>>;
+    /** The running drag; `null` without one, and as soon as its drop is decided. */
+    active: Readonly<Ref<Active | null>>;
+    /** The drop target under the drag; `null` over nothing. */
+    over: Readonly<Ref<Over | null>>;
+    /** Pointer in viewport coordinates, after modifiers; `null` without a drag. */
+    pointer: Readonly<Ref<Coordinates | null>>;
+    /**
+     * Where the dragged box's top-left corner is in `over`, live: `DnDEvent.position` on every
+     * move. `null` over nothing. An overlay component reads it to show where it would land
+     * (a time on a calendar).
+     */
+    position: Readonly<Ref<Coordinates | null>>;
+    /**
+     * `progress`: how far a press has come toward its activation constraint, from 0 to 1,
+     * while `status` is `'activating'`: e.g. a ring that fills during a long press.
+     */
+    activation: {
+        progress: Readonly<Ref<number>>;
+    };
+    /** Auto-scroll is moving a container. */
+    isAutoScrolling: Readonly<Ref<boolean>>;
+    /** The selected draggables (see `DnDSelection`). */
+    selection: DnDSelection;
+    /** Cancels the drag (it flies back), or the pending activation. */
+    cancel(): void;
+}
+
+/**
+ * What the provider is doing:
+ * - `'idle'`: nothing;
+ * - `'activating'`: a press waits for its activation constraint (a distance, a long press);
+ * - `'dragging'`: a drag runs;
+ * - `'dropping'`: a drop is decided (an async `onBeforeDrop`), or an overlay still lands;
+ * - `'selecting'`: a selection area draws its band.
+ */
+export declare type DnDStatus = 'idle' | 'activating' | 'dragging' | 'dropping' | 'selecting';
+
+/**
+ * Options of `makeDragArea`: rules for the drags that start inside the area's element
+ * (draggables and sortable items alike), so one provider can serve the whole app while
+ * parts of the page drag their own way. The closest area wins when areas are nested.
+ *
+ * Every option takes a value, a ref or a getter and is read when it is needed: when a
+ * press starts (`activation`, `disabled`) or when the drag starts.
+ */
+export declare interface DragAreaOptions {
+    /**
+     * Locks the drags to one axis, after the modifiers. A draggable's own `axis` (or its
+     * list's) wins.
+     */
+    axis?: MaybeReadonlyRefOrGetter<'x' | 'y' | undefined>;
+    /**
+     * Modifiers for the drags, after the provider's and before the draggable's own (or its
+     * list's): e.g. `[snapToGrid(20)]` for a board.
+     */
+    modifiers?: MaybeReadonlyRefOrGetter<Modifier[] | undefined>;
+    /** `true`: the drags stay inside the area's element (after the modifiers, before the axis lock). */
+    restrictToArea?: MaybeReadonlyRefOrGetter<boolean | undefined>;
+    /**
+     * Overrides the provider's `autoScroll` for the area's scroll container: the element
+     * itself, or its closest scrollable ancestor. `false` turns it off there. Unlike the other
+     * options it applies to every drag that scrolls the container, wherever it started.
+     */
+    autoScroll?: MaybeReadonlyRefOrGetter<boolean | AutoScrollOptions | undefined>;
+    /**
+     * Activation of the drags per pointer kind, between the draggable's own (which wins)
+     * and the provider's: e.g. a longer touch press in a scrolling feed.
+     */
+    activation?: MaybeReadonlyRefOrGetter<ActivationOptions | undefined>;
+    /**
+     * `true`: no drag starts in the area, nor in the areas inside it (unlike the other
+     * options, which come from the closest area). Its draggables report `aria-disabled`.
+     */
+    disabled?: MaybeReadonlyRefOrGetter<boolean | undefined>;
+}
+
+/** What `makeDragArea` returns. */
+export declare interface DragAreaReturn {
+    /** A drag that started in this area is running (until its drop is decided). */
+    isDragging: ComputedRef<boolean>;
+    /** Auto-scroll is moving the area's scroll container (the element, or its closest scrollable ancestor). */
+    isAutoScrolling: ComputedRef<boolean>;
+}
+
+/**
+ * Options of `makeDraggable`. Every option but `canDrag` takes a value, a ref or a
+ * getter (`overlay`, `dropAnimation`: a value or a ref) and is read when it is needed,
+ * so a change applies to the next drag at the latest.
+ */
+export declare interface DraggableOptions<TData = unknown> {
+    /**
+     * Stable id. Pass a getter in virtual lists, where elements are recycled. Default:
+     * `useId()`, stable between server and client render but new for every component
+     * instance.
+     */
+    id?: MaybeReadonlyRefOrGetter<Key>;
+    /** Anything the drag should carry: events and drop targets read it as `active.data`. */
+    data?: MaybeReadonlyRefOrGetter<TData>;
+    /**
+     * What people call it: screen reader texts say it instead of the id (`Picked up Tomato`).
+     * Events carry it as `active.label` and in `items`.
+     */
+    label?: MaybeReadonlyRefOrGetter<string | undefined>;
+    /** Its type or types, matched by the `accept` rules of drop targets. Without one it fits any target. */
+    type?: MaybeReadonlyRefOrGetter<string | string[] | undefined>;
+    /** `true`: it can't be dragged (it reports `aria-disabled`). */
+    disabled?: MaybeReadonlyRefOrGetter<boolean>;
+    /** Element or selector inside the draggable that starts the drag (and gets the attributes). */
+    handle?: MaybeReadonlyRefOrGetter<MaybeElement | string>;
+    /** Overrides the provider's `activation`. Read when a press starts. */
+    activation?: MaybeReadonlyRefOrGetter<ActivationOptions | undefined>;
+    /** Extra gate, e.g. drag only while a key is held. */
+    canDrag?: (event: PointerEvent | KeyboardEvent) => boolean;
+    /**
+     * `true` (default): an overlay follows the pointer, rendered by the provider's
+     * `#overlay` slot or as a clone of the element. A component: the overlay renders it
+     * with `OverlayProps`, before the slot. `false`: no overlay, the element itself moves
+     * via the returned `transform`. A value or a ref (a function is a functional
+     * component, so `(props) => <Card {...props} />` works). Whether there is an overlay
+     * is decided when the drag starts; a ref switched mid-drag swaps the component at once
+     * (see the provider's `overlayTransition`). A drop target's `overOverlay` wins while
+     * the drag is over it. The clone leaves out the press effects of UI kits (ripples) and
+     * any element inside marked `data-dnd-no-clone`.
+     */
+    overlay?: MaybeReadonlyRef<boolean | Component | undefined>;
+    /**
+     * How the overlay lands when a drag of this element ends, instead of the provider's
+     * `dropAnimation`; a drop target's `overDropAnimation` wins. A value or a ref (a function
+     * is the animation), read at the drop.
+     */
+    dropAnimation?: MaybeReadonlyRef<DropAnimation | undefined>;
+    /**
+     * Modifiers for drags that start here, applied after the provider's `modifiers`: e.g.
+     * `[restrictToVerticalAxis]` for one element on a page where other drags move freely.
+     * Read when the drag starts.
+     */
+    modifiers?: MaybeReadonlyRefOrGetter<Modifier[] | undefined>;
+    /**
+     * Locks drags that start here to one axis: `'x'` moves only horizontally, `'y'` only
+     * vertically. The lock comes after `modifiers` (`restrictToHorizontalAxis` /
+     * `restrictToVerticalAxis` last), so it holds whatever they do. Read when the drag starts.
+     */
+    axis?: MaybeReadonlyRefOrGetter<'x' | 'y' | undefined>;
+    /**
+     * Arrow keys in free drags: move by pixels (default) or jump between accepting drop
+     * targets. Read on every arrow press.
+     */
+    keyboardMode?: MaybeReadonlyRefOrGetter<'pixels' | 'droppables' | undefined>;
+    /**
+     * Set role/tabindex/aria-* attributes (default `true`), never overriding the user's
+     * own. The provider's instructions id joins an existing `aria-describedby` as one more
+     * token (a UI kit tooltip on the same element keeps its own), and only that token is
+     * ever removed. Live: turning it off removes what the library set.
+     */
+    attributes?: MaybeReadonlyRefOrGetter<boolean | undefined>;
+    /**
+     * A mouse drag of it is the browser's own drag, which can leave the page: onto the
+     * desktop, into another app or tab, into another window of the app. On the page it works
+     * as usual (targets, lists that make room), but the browser draws the dragged image
+     * instead of the overlay. Touch and keyboard drags stay the library's. `true` carries
+     * the `label` as text. Read when a press starts. `canDrag` is asked at the press; the
+     * browser decides how far a mouse moves before its drag starts (`activation` doesn't
+     * apply to it).
+     */
+    native?: MaybeReadonlyRefOrGetter<boolean | NativeDragOptions | undefined>;
+}
+
+/** What `makeDraggable` returns. */
+export declare interface DraggableReturn {
+    /** The draggable's id: the `id` option, or the one made for it. */
+    id: ComputedRef<Key>;
+    /** It is being dragged (also as another item of a multi-drag), or its overlay is still landing. */
+    isDragging: ComputedRef<boolean>;
+    /**
+     * Offset to apply when `overlay: false`: the drag's, less how far the content the
+     * element is in has moved since the start (the page or a container scrolled), so the
+     * element stays under the pointer.
+     */
+    transform: ComputedRef<Coordinates | null>;
+    /** It is in the provider's selection: a drag of one selected item carries them all. Set it to select or deselect. */
+    selected: WritableComputedRef<boolean>;
+}
+
+/** One dragged item: the one the drag started from, or another one of a multi-drag. */
+export declare interface DragItem<T = unknown> {
+    /** Id of its draggable (the key of a sortable item). */
+    id: Key;
+    /** Item object when the drag comes from a sortable list. */
+    item?: T;
+    /** Its `data` option. */
+    data: unknown;
+    /** Its `label`, what people call it. */
+    label?: string;
+    /** Normalized `type` of the draggable; empty means it fits any drop target. */
+    type: string[];
+}
+
+/**
+ * What a drop does: `'move'`, `'copy'` (the items stay, copies of them go in), `'swap'`
+ * (`behavior: 'swap'`: two items exchange places) or `'insert'` (a plain draggable goes into
+ * a list as the item its `createItem` made).
+ */
+export declare type DragMode = 'move' | 'copy' | 'swap' | 'insert';
+
+/**
+ * The default clone of one dragged item (see `DragPreviewProps`). Custom overlays use
+ * it to lay out several items themselves; the default overlay shows a multi-drag with it.
+ */
+export declare const DragPreview: DefineComponent<ExtractPropTypes<    {
+id: {
+type: PropType<DragPreviewProps["id"]>;
+required: true;
+};
+}>, () => VNode<RendererNode, RendererElement, {
+[key: string]: any;
+}> | null, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
+id: {
+type: PropType<DragPreviewProps["id"]>;
+required: true;
+};
+}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Props of `DragPreview`: the default clone of one dragged item, for custom overlays (an
+ * `overlay` component or the provider's `#overlay` slot) that lay out several items
+ * themselves, e.g. `<DragPreview v-for="item in items" :key="item.id" :id="item.id" />`.
+ *
+ * Clones are taken at pickup, of the grabbed item and of the others next to it in drop
+ * order, as many as the provider's `overlayPreviews` (5 by default; those that are rendered
+ * then). For any other item `DragPreview` renders its
+ * default slot in an element that takes `class` and `style` as a clone's does, or nothing
+ * without one. The clone fills the element, which has the item's size at
+ * pickup, set inline: change it with `style` (`:style="{ width: '100%', height: '100%' }"`),
+ * which falls through; a class can't override it.
+ *
+ * In a sortable multi-drag (`multiple: 'group'` or `'gaps'`), the preview of an item other
+ * than the grabbed one lands on that item's slot with the drop (back on its place when
+ * cancelled), from wherever the layout put it: wrappers turned or scaled with `transform`
+ * are undone on the way, its size animates as width and height. Style the preview itself
+ * (corners, shadow): its wrappers stay in the box. Items without a clone fade in instead.
+ * Dropped into a zone (not a list), the previews go into it one after another, the box
+ * last.
+ */
+export declare interface DragPreviewProps {
+    /** Id of a dragged item: one of `items` in `OverlayProps`. */
+    id: Key;
+}
+
+/** Where the dragged items come from, when that is a sortable list. */
+export declare interface DragSource {
+    /** Sortable list the dragged items come from. */
+    list: Key;
+    /** Removes the dragged items from their list (trash zones). */
+    remove(): void;
+}
+
+/**
+ * How the overlay lands on a drop and flies back on a cancel: `true` (default timing),
+ * options, `false` (no flight: it ends where it was let go), or a function that animates
+ * `overlay` from `from` to `to` and returns its `Animation`, a promise that settles when it
+ * ends, or nothing.
+ */
+export declare type DropAnimation = boolean | AnimationOptions | ((context: DropAnimationContext) => Animation | Promise<unknown> | void);
+
+/** What a drop animation function gets: the overlay, where it is and where it lands. */
+export declare interface DropAnimationContext {
+    /**
+     * The overlay box; it lands on the active item's slot. In a multi-drag the clones of the
+     * other items riding inside it (the default overlay's, the `DragPreview`s of a custom
+     * one) land on their own slots by themselves (with the default timing when this is a
+     * custom function).
+     */
+    overlay: HTMLElement;
+    /** Where the overlay is when the drag ends. */
+    from: Rect;
+    /** Final rect of the dropped item; `null` when it isn't rendered or visible (the overlay fades out). */
+    to: Rect | null;
+    /**
+     * The item isn't shown after a drop on a zone (not a sortable list), e.g. it was dropped
+     * into another item (a folder) or a trash zone: the zone's visible rect. The default
+     * animation shrinks the overlay into it as it fades out, instead of fading in place.
+     */
+    into: Rect | null;
+    /** `'drop'`: the overlay lands where the drop put the item. `'cancel'`: it flies back to where the item was. */
+    reason: 'drop' | 'cancel';
+    /** The drag that ended. */
+    active: Active;
+    /** The target the drop lands on (a list, a zone); `null` on a cancel. */
+    over: Over | null;
+    /** The timing the options give, defaults filled in. */
+    options: Required<AnimationOptions>;
+    /**
+     * `prefers-reduced-motion: reduce` is set. The library's own animations don't run then;
+     * functions of yours always do, and decide with this (skip, or keep a fade).
+     */
+    reducedMotion: boolean;
+}
+
+/**
+ * Where a drop would put the dragged items: a place in a sortable list or tree, as the
+ * drop event's `to` will say (the overlay's `to` prop, live).
+ */
+export declare interface DropDestination {
+    /** Id of the list or tree. */
+    list: Key;
+    /** Index the dragged items take: in the list, or among the siblings under `parentKey` in a tree. */
+    index: number;
+    /** Trees: the node they go under; `null` at the root. */
+    parentKey?: Key | null;
+    /** Trees: the depth they go at (roots are 0). */
+    depth?: number;
+}
+
+/**
+ * What a drop outside every target does: `'placeholder'` keeps the items where their slot
+ * is, `'cancel'` sends them back, `'remove'` takes them out of their list.
+ */
+export declare type DropOutside = 'placeholder' | 'cancel' | 'remove';
+
+/**
+ * Options of `makeDroppable`.
+ *
+ * **Drop into an item.** A drop target on a sortable item's element (or inside it) works
+ * as everywhere else, with one rule while that item's list would sort the drag: it counts
+ * only while the pointer is in the middle of the item (25–75% along the list's axis; x in
+ * grids), where the drop goes into the target and the list doesn't move for it. Near the
+ * item's edges the list sorts as usual. A target whose `accept` refuses the drag is left
+ * out, so the list sorts over the item like over any other (no need to disable it). The
+ * keyboard stops on such a target before moving past its item. A drag never targets what
+ * it carries: no target in (or on) a dragged item, nor in the slot one lands in. To move the
+ * items out of their list in `onDrop`, call `e.source.remove()`.
+ *
+ * Every option but the callbacks takes a value, a ref or a getter (`accept`, `overOverlay`,
+ * `overDropAnimation`: a value or a ref) and is read live, while a drag looks for its target.
+ */
+export declare interface DroppableOptions<TData = unknown> {
+    /** Default: `useId()`, stable between server and client render. */
+    id?: MaybeReadonlyRefOrGetter<Key>;
+    /** Anything to tell about the target: events carry it as `over.data`. */
+    data?: MaybeReadonlyRefOrGetter<TData>;
+    /** What people call it: screen reader texts say it instead of the id (`over Trash`); events carry it as `over.label`. */
+    label?: MaybeReadonlyRefOrGetter<string | undefined>;
+    /**
+     * What this target takes. Inside a sortable item, one that refuses the drag lets the
+     * list sort over it. A value or a ref: a function is a rule.
+     */
+    accept?: MaybeReadonlyRef<AcceptRule | undefined>;
+    /** Default `'all'`. */
+    acceptMode?: MaybeReadonlyRefOrGetter<AcceptMode | undefined>;
+    /** `true`: drags pass over it as if it weren't there. */
+    disabled?: MaybeReadonlyRefOrGetter<boolean>;
+    /** Higher wins when targets overlap without nesting (default 0). Sortable items beat containers. */
+    priority?: MaybeReadonlyRefOrGetter<number | undefined>;
+    /**
+     * What the overlay shows while a drag this target accepts is over it: a component that
+     * gets `OverlayProps`, rendered instead of the drag's own overlay (the dragged item's
+     * component, the provider's slot or the clone), which it gets as its default slot to
+     * wrap or leave out (`<slot />`). It stays while the drop lands here. Drags without an
+     * overlay (`overlay: false`) keep none. A value or a ref, read live; the change of
+     * component animates with the provider's `overlayTransition`. (On draggables, items and
+     * lists, `overlay` is the drag's own overlay; sortable lists and trees take this one as
+     * `overOverlay` too.)
+     */
+    overOverlay?: MaybeReadonlyRef<Component | undefined>;
+    /**
+     * How the overlay lands when it is dropped here, instead of the dragged item's and the
+     * provider's `dropAnimation`: `false` leaves it where it was dropped (an overlay
+     * component's own animation, a splash, plays there), a function animates it. A value or
+     * a ref, read at the drop.
+     */
+    overDropAnimation?: MaybeReadonlyRef<DropAnimation | undefined>;
+    /** A drag came over this target, whether it accepts the drag or not (`event.over.accepted`). */
+    onDragEnter?(event: DnDEvent): void;
+    /** The drag left this target. */
+    onDragLeave?(event: DnDEvent): void;
+    /**
+     * Asked before a drop on this target goes through, after the monitors' `onBeforeDrop`,
+     * if it accepts the drag (see `BeforeDropResult`). May be async: the overlay waits where
+     * it was dropped. An error rejects the drop.
+     */
+    onBeforeDrop?(event: DnDEvent): MaybePromise<BeforeDropResult>;
+    /**
+     * A drop on this target went through: do what it means (move the item, upload the file).
+     * When an `onBeforeDrop` took only some of the dragged items, `event.accepted` has their
+     * ids and `event.rejected` the others, which fly back; `active` is still the whole drag.
+     */
+    onDrop?(event: DnDEndEvent): void;
+    /**
+     * Takes drags from outside the page: files from the desktop, a link or text from another
+     * app or tab (the browser's drag and drop). They work as the library's drags do (`isOver`,
+     * `isAccepting`, the events), and `e.external` has their data at the drop. Targets
+     * without `external` ignore them. A value, a ref or a getter, read live.
+     */
+    external?: MaybeReadonlyRefOrGetter<ExternalAccept | undefined>;
+}
+
+/** What `makeDroppable` returns. */
+export declare interface DroppableReturn {
+    /** The target's id: the `id` option, or the one made for it. */
+    id: ComputedRef<Key>;
+    /** A drag is over it (one from outside the page too, with `external`). */
+    isOver: ComputedRef<boolean>;
+    /** Something is being dragged and this target accepts it. */
+    isAccepting: ComputedRef<boolean>;
+    /** Pointer position relative to the target's halves while it is hovered. */
+    placement: ComputedRef<Placement | null>;
+}
+
+/** `true`, options, `false` (the item just appears), or a function that animates it in. */
+export declare type EnterAnimation = boolean | AnimationOptions | ((context: EnterAnimationContext) => Animation | Promise<unknown> | void);
+
+/** An item that appeared in a list with `animateChanges` on: added, or shown again (a filter, an expanded tree node). */
+export declare interface EnterAnimationContext {
+    /** Key of the item. */
+    key: Key;
+    /** The item's element, already in its place. */
+    element: HTMLElement;
+    /** Where it appeared (layout rect). */
+    to: Rect;
+    /** The timing the options give, defaults filled in. */
+    options: Required<AnimationOptions>;
+    /**
+     * `prefers-reduced-motion: reduce` is set. The library's own animations don't run then;
+     * functions of yours always do, and decide with this (skip, or keep a fade).
+     */
+    reducedMotion: boolean;
+}
+
+/**
+ * What a drop target, list or tree takes from drags that come from outside the page: files
+ * from the desktop, a link or text from another app or tab (`external`).
+ */
+export declare interface ExternalAccept {
+    /**
+     * Files: `true` takes any. Or as `<input accept>` has it: MIME types (`image/*`,
+     * `application/pdf`) and extensions (`.md`), a string with commas or a list; extensions
+     * are checked at the drop. Or a function asked about each file (`false` refuses it).
+     * Folders are never taken.
+     */
+    files?: boolean | string | readonly string[] | ((file: ExternalFile) => boolean);
+    /** Several files at once (default `true`); `false` refuses a drag of more than one. */
+    multiple?: boolean;
+    /** Links (`text/uri-list`): an address dragged from another tab, a link from a page. */
+    links?: boolean;
+    /** Plain text (`text/plain`): a selection dragged from another app. */
+    text?: boolean;
+    /** Other MIME types it takes, exactly as other apps offer them. */
+    types?: readonly string[];
+}
+
+/**
+ * A drag from outside the page (`Active.external`, `DnDEvent.external`). While it is held
+ * the browser tells what it carries, not the data: the files, links and text come at the
+ * drop (`ready`).
+ */
+export declare interface ExternalData {
+    /** The MIME types it offers (`Files`, `text/uri-list`, `text/plain`, an app's own). */
+    types: readonly string[];
+    /** The MIME types of its files, one per file (`''` when the browser can't tell). */
+    fileTypes: readonly string[];
+    /** At the drop: the files the target takes (folders and refused files left out). */
+    files: readonly File[];
+    /** At the drop: its links (`text/uri-list`). */
+    urls: readonly string[];
+    /** At the drop: its plain text. */
+    text: string;
+    /** At the drop: its HTML. */
+    html: string;
+    /** At the drop: the data of any type it offers (`''` before, and for a type it doesn't offer). */
+    getData(type: string): string;
+    /** It was dropped: the data above is there. */
+    ready: boolean;
+    /**
+     * Items of the library dragged in from another window of the app (`native`): the name of
+     * their sortable group. The lists of that group take them as if they came from one of
+     * their own lists; `active.items` has them.
+     */
+    group?: string;
+}
+
+/**
+ * A file of a drag from outside, as `ExternalAccept.files` is asked about it. While the
+ * files are held over the page the browser tells their types only: `name` and `size`
+ * come at the drop.
+ */
+export declare interface ExternalFile {
+    /** Its MIME type (`image/png`); `''` when the browser can't tell. */
+    type: string;
+    /** Its name with the extension (`notes.md`), at the drop. */
+    name?: string;
+    /** Its size in bytes, at the drop. */
+    size?: number;
+}
+
+/** A visible node of a tree, as the tree's `items` list it: render them in order, indented by `depth`. */
+export declare interface FlatNode<T> {
+    /** The node's key (`getKey`). */
+    key: Key;
+    /** Your node. */
+    item: T;
+    /** Its depth: roots are 0. The dragged node has its projected depth. */
+    depth: number;
+    /** Key of its parent; `null` for a root. */
+    parentKey: Key | null;
+    /** Index among siblings. */
+    index: number;
+    /** It has children, shown or not. */
+    hasChildren: boolean;
+    /** Its children are hidden (its key is in `collapsed`). */
+    collapsed: boolean;
+}
+
+/**
+ * A vibration (`navigator.vibrate`): its length in ms or an on/off pattern. `true` is the
+ * default one (10ms; `[20, 40, 20]` for `refuse`), `false` or `0` none.
+ */
+export declare type HapticPattern = boolean | number | number[];
+
+/**
+ * When touch drags vibrate. Only drags started by touch do; where the browser can't
+ * vibrate (iOS Safari) or blocks it (no tap on the page yet), nothing happens.
+ */
+export declare interface HapticsOptions {
+    /** The drag starts, after the long press. Default `true`. */
+    start?: HapticPattern;
+    /** The drag enters a drop target (a list, a zone) that accepts it. Default `false`. */
+    enter?: HapticPattern;
+    /** The drop goes through. Default `false`. */
+    drop?: HapticPattern;
+    /** The drop is refused (by a target or `onBeforeDrop`) and the items fly back. Default `false`. */
+    refuse?: HapticPattern;
+}
+
+/** An id or a key: of a draggable, a drop target, a list, an item of a list. */
+export declare type Key = string | number;
+
+/** What `getKeyboardCoordinates` is asked with, for an arrow key. */
+export declare interface KeyboardMoveContext {
+    /** The drag. */
+    active: Active;
+    /** Where the drag is now, in viewport coordinates. */
+    pointer: Coordinates;
+    /** Unit vector of the pressed arrow key. */
+    direction: Coordinates;
+}
+
+/** Keyboard drags (the provider's `keyboard`): their keys, and the step of free drags. */
+export declare interface KeyboardOptions {
+    /**
+     * The keys that pick up (`start`), drop and cancel, as `KeyboardEvent.code` (`'Space'`,
+     * `'KeyW'`) or `.key` (`'Enter'`, `'w'`). Default: Space and Enter pick up and drop,
+     * Escape cancels. The arrows always move.
+     */
+    keys?: {
+        start?: string[];
+        drop?: string[];
+        cancel?: string[];
+    };
+    /** Pixels per arrow press for free (non-sortable) drags. Default 25. */
+    step?: number;
+}
+
+/**
+ * Space/Enter, arrows and Escape (rebound with the provider's `keyboard` option). In
+ * `sensors` by default; it also cancels pointer and custom drags with Escape, even with
+ * `keyboard: false`.
+ */
+export declare const keyboardSensor: Sensor;
+
+/**
+ * How items move to their new places: `true` (default timing), options, `false` (they
+ * jump), or a function that animates one item from `from` to `to` and returns its
+ * `Animation`, a promise that settles when it ends, or nothing.
+ */
+export declare type LayoutAnimation = boolean | AnimationOptions | ((context: LayoutAnimationContext) => Animation | Promise<unknown> | void);
+
+/** What a layout animation function gets, for one item that moves to its new place. */
+export declare interface LayoutAnimationContext {
+    /** Key of the item. */
+    key: Key;
+    /** The item's element, already in its new place. */
+    element: HTMLElement;
+    /** Visual rect before the change (where a running animation showed the item). */
+    from: Rect;
+    /** Layout rect after the change. */
+    to: Rect;
+    /** The timing the options give, defaults filled in. */
+    options: Required<AnimationOptions>;
+    /**
+     * What moved the item: a drag (`'drag'`: sorting, the drop, a cancel), or a change of
+     * your data that no drag made (`'change'`, with the list's `animateChanges` on).
+     */
+    reason: 'drag' | 'change';
+    /**
+     * Aborted when the library interrupts the animation: the item moves again before it
+     * ends (the next animation starts where it is shown), or animations are turned off. A
+     * returned `Animation` is cancelled for you. Stop anything else here and undo the styles
+     * it set, at once: the layout is measured right after.
+     */
+    signal: AbortSignal;
+    /**
+     * `prefers-reduced-motion: reduce` is set. The library's own animations don't run then;
+     * functions of yours always do, and decide with this (skip, or keep a fade).
+     */
+    reducedMotion: boolean;
+}
+
+/**
+ * `true`, options, `false` (the item just disappears), or a function that animates out the
+ * copy left in its place: return its `Animation` or a promise, and the copy is removed
+ * when it ends (at once when the function returns nothing).
+ */
+export declare type LeaveAnimation = boolean | AnimationOptions | ((context: LeaveAnimationContext) => Animation | Promise<unknown> | void);
+
+/** An item that left a list with `animateChanges` on: removed, or hidden (a filter, a collapsed tree node). */
+export declare interface LeaveAnimationContext {
+    /** Key of the item. */
+    key: Key;
+    /**
+     * A copy of the item's element, shown where the item was (the item itself is gone):
+     * positioned absolutely in its old parent, ignoring the pointer, marked
+     * `data-dnd-leaving`. The library removes it when your animation ends.
+     */
+    element: HTMLElement;
+    /** Where the item was. */
+    from: Rect;
+    /** The timing the options give, defaults filled in. */
+    options: Required<AnimationOptions>;
+    /**
+     * `prefers-reduced-motion: reduce` is set. The library's own animations don't run then;
+     * functions of yours always do, and decide with this (skip, or keep a fade).
+     */
+    reducedMotion: boolean;
+}
+
+/**
+ * Makes an element a drag area: the drags that start inside it (draggables and sortable
+ * items) follow its rules, see `DragAreaOptions`. One provider can then serve the whole
+ * app, with boards, canvases and feeds that drag their own way. The closest area wins
+ * when areas are nested.
+ */
+export declare function makeDragArea(target: MaybeElementRef, options?: DragAreaOptions): DragAreaReturn;
+
+/** Makes an element draggable. Free drag by default; sortable lists build on top of it. */
+export declare function makeDraggable<TData = unknown>(target: MaybeElementRef, options?: DraggableOptions<TData>): DraggableReturn;
+
+/** Makes an element a drop target. */
+export declare function makeDroppable<TData = unknown>(target: MaybeElementRef, options?: DroppableOptions<TData>): DroppableReturn;
+
+/**
+ * Makes an element a rubber-band selection area for the draggables inside it.
+ * Render the rectangle yourself: `<div v-if="isSelecting" class="band" :style="style" />`.
+ */
+export declare function makeSelectionArea(target: MaybeElementRef, options?: SelectionAreaOptions): SelectionAreaReturn;
+
+/**
+ * Makes an element a row of a sortable list or tree: it drags, makes room and lands in
+ * its slot. Call it in a component rendered inside the one that called `makeSortableList`
+ * (or `makeSortableTree`); of several lists made there, the row joins the innermost one
+ * whose element holds it. Identify the row with `item` (keyed by the list's `getKey`,
+ * `item.id` by default) or `id`.
+ */
+export declare function makeSortableItem<TData = unknown>(target: MaybeElementRef, options: SortableItemOptions<TData>): SortableItemReturn;
+
+/**
+ * Makes a container a sortable list. Render the returned `items` (the draft order), not
+ * your array: the drop is written back to `options.items`, after `onDrop`, unless
+ * `event.preventDefault()` leaves `event.result` to you.
+ */
+export declare function makeSortableList<T>(target: MaybeElementRef, options: SortableListOptions<T>): SortableListReturn<T>;
+
+/**
+ * Makes a container a sortable tree. Render the returned `items` (visible nodes in
+ * draft order, indented by `depth`) with a row component that calls `makeSortableItem`.
+ * On drop, after `onDrop`, the moved nodes (with their subtrees) are written into
+ * `options.items`, unless `event.preventDefault()` leaves `event.result` to you.
+ */
+export declare function makeSortableTree<T>(target: MaybeElementRef, options: SortableTreeOptions<T>): SortableTreeReturn<T>;
+
+/**
+ * An element: an HTML or SVG element, or a component instance (its root element, `$el`),
+ * as a template ref gives them. `null` or `undefined` while there is none (not mounted yet).
+ */
+export declare type MaybeElement = HTMLElement | SVGElement | ComponentRef | null | undefined;
+
+/**
+ * The element a composable works on (`makeDraggable(target)`): the element, a template ref
+ * (`useTemplateRef`) or a getter. It may change (a `v-if`): the library follows it.
+ */
+export declare type MaybeElementRef = MaybeReadonlyRefOrGetter<MaybeElement>;
+
+/** A value, or a promise of it: what a hook that may be async returns (`onBeforeDrop`). */
+export declare type MaybePromise<T> = T | Promise<T>;
+
+/**
+ * A value or any ref, for options where a function is a value of its own (an overlay
+ * component, an accept rule, a custom animation), so a getter can't be told apart.
+ * Hold components in a `shallowRef` (or a computed): Vue must not make them reactive.
+ */
+export declare type MaybeReadonlyRef<T> = T | Readonly<Ref<T>>;
+
+/**
+ * A value, a getter or any ref (writable, shallow, computed, readonly — e.g. from
+ * `useTemplateRef`) that the library only reads. Unlike Vue's `MaybeRefOrGetter`
+ * it accepts `Ref<string>` where `string | number` is expected.
+ */
+export declare type MaybeReadonlyRefOrGetter<T> = T | Readonly<Ref<T>> | (() => T);
+
+/** Changes where the dragged item goes: takes the drag's offset (`transform`) and returns a new one. */
+export declare type Modifier = (args: ModifierArgs) => Coordinates;
+
+/** What a modifier gets, on every move of the drag. */
+export declare interface ModifierArgs {
+    /** Offset from the drag start, as modified by the previous modifiers. */
+    transform: Coordinates;
+    /** The drag. */
+    active: Active;
+    /** Rect of the dragged element at drag start. */
+    activeRect: Rect;
+    /**
+     * Rect of the overlay box if it were moved by `transform`, at the size it has now. With
+     * `overlayFit: 'slot'` the box resizes around the pointer, so it isn't always
+     * `activeRect` moved by `transform`.
+     */
+    overlayRect: Rect;
+    /** Pointer position at drag start. */
+    origin: Coordinates;
+    /** Sortable list container (or parent element) of the dragged item, where it is now (it follows scrolling). */
+    containerRect: Rect | null;
+    /**
+     * How far the content the drag started in has moved on screen since the start: the
+     * container moved (the page or a container around it scrolled, the layout shifted), and
+     * its content scrolled inside it. Axis locks hold the other axis there, so the drag
+     * stays on its row or column of that content.
+     */
+    containerShift: Coordinates;
+    /** Rect of the window (the viewport). */
+    windowRect: Rect;
+    /** The drop target under the drag, as last found; `null` over nothing. */
+    over: Over | null;
+}
+
+/**
+ * What the other selected items do in a multi-drag:
+ * - `'group'`: they leave their places and travel with the active item as contiguous
+ *   placeholders, so while hovering the list already shows the result of the drop;
+ * - `'gaps'`: they stay in place until the drop;
+ * - `'stack'`: they collapse into the overlay.
+ *
+ * The default overlay shows the dragged items in a column along the list (`'group'`,
+ * `'gaps'`; a row in horizontal lists, a pile behind the active one in grids), or the active
+ * one with a count (`'stack'`).
+ */
+export declare type MultipleMode = 'group' | 'gaps' | 'stack';
+
+/**
+ * A draggable or sortable item that a mouse can drag out of the page (`native`): onto the
+ * desktop, into another app, another tab, another window of the app.
+ */
+export declare interface NativeDragOptions {
+    /**
+     * What other apps and pages get: text by MIME type, as
+     * `{ 'text/plain': title, 'text/uri-list': url }`. Read when the drag starts. Sortable
+     * items also carry themselves, for the lists of their group in another window of the app.
+     */
+    data?: (active: Active) => Record<string, string>;
+    /**
+     * What the drag lets the place it is dropped on do (`effectAllowed`). Default
+     * `'copyMove'`: a move takes the items out of their list here, a copy leaves them.
+     */
+    effect?: 'copy' | 'move' | 'link' | 'copyMove' | 'copyLink' | 'linkMove' | 'all';
+}
+
+/** The drop target under the drag. */
+export declare interface Over {
+    /** Id of the drop target. */
+    id: Key;
+    /** The target's `data` option. */
+    data: unknown;
+    /** The target's `label`, what people call it. */
+    label?: string;
+    /** The target's element. */
+    element: HTMLElement;
+    /** The rect of `element`, measured during the drag. */
+    rect: Rect;
+    /** Whether the target's `accept` rule accepts the dragged items. */
+    accepted: boolean;
+}
+
+/**
+ * Props of an overlay component, for `defineProps<OverlayProps>()`.
+ *
+ * The component renders inside the overlay box, which follows the slot size
+ * (`overlayFit: 'slot'`) and animates it on drop. Give the root `width: 100%` (and
+ * `height: 100%`) to follow that size; a fixed size keeps the component's own.
+ */
+export declare type OverlayProps = OverlaySlotProps;
+
+/**
+ * What the overlay shows: the props of the provider's `#overlay` slot and of overlay
+ * components (`overlay` option of draggables, sortable items, lists and trees).
+ */
+export declare interface OverlaySlotProps {
+    /** The drag. */
+    active: Active;
+    /** Every dragged item, the primary one first: one overlay for the whole multi-drag. */
+    items: DragItem[];
+    /**
+     * The drop target under the drag. While a decided drop animates, the target it lands
+     * on (as it was at the drop); `null` while a cancelled drag flies back.
+     */
+    over: Over | null;
+    /** Whether `over` accepts the dragged items; `false` when over nothing. */
+    accepted: boolean;
+    /** `'dragging'`, then `'dropping'` while the overlay lands (or flies back). */
+    status: DnDStatus;
+    /** What a drop would do now (see `DnDEvent.mode`): e.g. show a plus while it copies. */
+    mode: DragMode;
+    /**
+     * Where a drop would put the dragged items now, in a sortable list or tree: e.g. tint
+     * the overlay by the folder a tree drag would go into. Outside every target it is the
+     * slot's place, where `dropOutside: 'placeholder'` (the default) keeps them. `null` when
+     * the drop would put them in no list: over a plain drop target, over a list that refuses
+     * them, outside with `dropOutside: 'cancel'` or `'remove'`. While a decided drop
+     * animates, the place it lands on.
+     */
+    to: DropDestination | null;
+}
+
+/** Which halves of a hovered drop target the pointer is in (`DroppableReturn.placement`). */
+export declare interface Placement {
+    /** In its top half. */
+    top: boolean;
+    /** In its right half. */
+    right: boolean;
+    /** In its bottom half. */
+    bottom: boolean;
+    /** In its left half. */
+    left: boolean;
+}
+
+/** Default: what is under the pointer, else what the overlay overlaps. */
+export declare const pointerFirst: CollisionDetection;
+
+/** The kind of pointer that pressed (`PointerEvent.pointerType`): activation is set per kind. */
+export declare type PointerKind = 'mouse' | 'touch' | 'pen';
+
+/** Mouse, touch and pen via Pointer Events. In `sensors` by default. */
+export declare const pointerSensor: Sensor;
+
+/** Targets under the pointer, from hit-testing: respects z-order, overlays and shadow roots. */
+export declare const pointerWithin: CollisionDetection;
+
+/** Shares a provider (from `useDnDContext()`) with another Vue app, e.g. one mounted inside a shadow root. */
+export declare const provideDnDContext: (app: App, context: DnDContext) => void;
+
+/** A box in px, in viewport coordinates, as `getBoundingClientRect()` gives it. */
+export declare interface Rect {
+    /** Its top edge, from the top of the viewport. */
+    top: number;
+    /** Its left edge, from the left of the viewport. */
+    left: number;
+    /** Its width. */
+    width: number;
+    /** Its height. */
+    height: number;
+    /** Its right edge, from the left of the viewport: `left + width`. */
+    right: number;
+    /** Its bottom edge, from the top of the viewport: `top + height`. */
+    bottom: number;
+}
+
+/** Targets overlapping the overlay: higher priority, then deeper nesting, then intersection over union. */
+export declare const rectIntersection: CollisionDetection;
+
+/** Keeps the overlay inside an element: the element, a ref or a getter. */
+export declare const restrictToElement: (target: MaybeElementRef) => Modifier;
+
+/** Keeps the overlay inside the first scrollable ancestor of the dragged element. */
+export declare const restrictToFirstScrollableAncestor: Modifier;
+
+/**
+ * Moves only horizontally: vertically it stays with the content it started in
+ * (`containerShift`), however the page scrolls. The `axis: 'x'` option does the same, last.
+ */
+export declare const restrictToHorizontalAxis: Modifier;
+
+/**
+ * Keeps the overlay inside the container the drag started in: the sortable list
+ * (not its DOM parent) or, for plain draggables, the parent element.
+ */
+export declare const restrictToParent: Modifier;
+
+/**
+ * Moves only vertically: horizontally it stays with the content it started in
+ * (`containerShift`), however the page scrolls. The `axis: 'y'` option does the same, last.
+ */
+export declare const restrictToVerticalAxis: Modifier;
+
+/** Keeps the overlay inside the window. */
+export declare const restrictToWindowEdges: Modifier;
+
+/**
+ * Options of `makeSelectionArea`. The band selects into the provider's selection, the one
+ * multi-drag and `selected` read (`useDnD().selection`). `modifier`, `strategy`, `accept`
+ * and `disabled` take a value, a ref or a getter (`accept`: a value or a ref, a function
+ * is a rule) and are read when a press starts a band; turning `disabled` on also cancels
+ * a running one.
+ */
+export declare interface SelectionAreaOptions {
+    /** Keys that must be held for a press to draw a band. Default: none, any press on the empty space draws. */
+    modifier?: MaybeReadonlyRefOrGetter<SelectionModifier | undefined>;
+    /** Default `'toggle'`. */
+    strategy?: MaybeReadonlyRefOrGetter<SelectionStrategy | undefined>;
+    /** Which draggables the band selects; the matcher of drop targets. */
+    accept?: MaybeReadonlyRef<AcceptRule | undefined>;
+    /** `true`: presses draw no band. */
+    disabled?: MaybeReadonlyRefOrGetter<boolean>;
+    /** The band ended: gets every id selected now. */
+    onSelected?: (ids: Key[]) => void;
+}
+
+/** What `makeSelectionArea` returns. */
+export declare interface SelectionAreaReturn {
+    /** A band is being drawn: render it then. */
+    isSelecting: ComputedRef<boolean>;
+    /** Style for the selection rectangle element (absolute, container-relative). */
+    style: ComputedRef<Record<string, string>>;
+}
+
+/**
+ * Keys (`KeyboardEvent.key` or `.code`) that must be held for a press to draw a band:
+ * every one of them, or `'some'` of them.
+ */
+export declare interface SelectionModifier {
+    /** The keys, as `KeyboardEvent.key` (`'Shift'`) or `.code` (`'KeyA'`). None: any press draws. */
+    keys: string[];
+    /** `'every'`: all of `keys` must be held; `'some'`: one of them is enough. */
+    method: 'every' | 'some';
+}
+
+/**
+ * - `'toggle'`: items the band crosses flip their state from before the band;
+ * - `'select'`: only the items inside the band are selected.
+ */
+export declare type SelectionStrategy = 'toggle' | 'select';
+
+/**
+ * Input that starts drags: pointer, keyboard, or your own (a gamepad, an on-screen
+ * joystick, voice, scripted drags). `setup` runs once per provider, in the browser only,
+ * inside an effect scope that ends with the provider (or when the sensor leaves
+ * `sensors`, or the component that called `useSensor` unmounts). Register listeners
+ * with `useEventListener` or return a cleanup; a drag still running then is cancelled.
+ *
+ * To wrap a sensor, run its `setup` with a context of your own. `Object.create(context, {
+ * activate: { value: … } })` keeps the live getters (`status`, `drag`, `props`): a spread
+ * would freeze them.
+ */
+export declare interface Sensor {
+    /** For debugging. */
+    name?: string;
+    /**
+     * Starts listening to the input, once per provider: call `context.activate()` when it
+     * wants to drag. May return a cleanup, run when the sensor stops.
+     */
+    setup(context: SensorContext): void | (() => void);
+}
+
+/** What a sensor asks for when its input wants to drag (`SensorContext.activate()`). */
+export declare interface SensorActivation {
+    /**
+     * Where the input landed: an element inside a draggable, or the id of a draggable.
+     * An element must belong to this provider; for `'pointer'` drags it must be on the
+     * handle when there is one and not on an interactive child (a button, an input), for
+     * `'keyboard'` drags it must be the draggable's focus target (the handle, else the
+     * draggable itself) and not an editable field. An id skips these checks: the drag
+     * starts from the item wherever the input was.
+     */
+    target: Element | Key;
+    /**
+     * How the drag moves. `'pointer'` (default): it follows the points given to `move()`,
+     * targets are hit-tested there, containers auto-scroll at their edges and the page
+     * shows the grabbing cursor. `'keyboard'`: it moves by items with `step()` and
+     * `place()` as arrow keys do, targets are revealed instead of auto-scrolled, and the
+     * focus goes back to the item when it ends. `Active.sensor` tells which.
+     */
+    type?: SensorType;
+    /** Where the drag starts, in viewport coordinates. Default: the center of the draggable. */
+    point?: Coordinates;
+    /**
+     * The input event. It is handed to the draggable's `canDrag`: without one (a gamepad,
+     * a programmatic drag), `canDrag` isn't asked. A `pointerType` of `'touch'` makes the
+     * drag a touch drag (`haptics`).
+     */
+    event?: PointerEvent | KeyboardEvent;
+    /**
+     * What the drag waits for before it starts (`useDnD().status` is `'activating'` until
+     * then, with its progress). A pointer kind reads the draggable's `activation` option
+     * for it, then the provider's, then the defaults (mouse 4px, at once on a handle; pen
+     * 4px; touch a 200ms long press with 5px tolerance). A constraint is used as it
+     * is. Default: none, the drag starts at once.
+     */
+    activation?: PointerKind | ActivationConstraint;
+    /** The drag started, after its activation: e.g. capture the pointer. */
+    onStart?(drag: SensorDrag): void;
+    /** The drag is over: its activation was aborted, or it dropped or was cancelled (by anyone). */
+    onEnd?(drag: SensorDrag): void;
+    /**
+     * The drop the sensor asked for didn't happen and the drag goes on (`onBeforeDrop`
+     * answered `'continue'`): `move`, `drop` and `cancel` apply again. A pointer sensor
+     * lets the item follow the pointer until the next release.
+     */
+    onResume?(drag: SensorDrag): void;
+}
+
+/** What a sensor gets from the provider it runs in. */
+export declare interface SensorContext {
+    /** The provider's props (e.g. `activation`, `keyboard`). Read them when needed: they may change. */
+    readonly props: Readonly<DnDProviderProps>;
+    /** The provider's drag status, whichever sensor runs the drag. */
+    readonly status: DnDStatus;
+    /**
+     * The provider's drag, pending or dragging, whichever sensor started it; `null` when
+     * there is none. Sensors may drive each other's drags: the keyboard sensor moves and
+     * drops every keyboard drag, e.g. one a "Move" button picked up (`@vue-dnd-kit/actions`).
+     */
+    readonly drag: SensorDrag | null;
+    /**
+     * Asks to drag an item. The provider checks that it is idle (one drag at a time, none
+     * while a drop lands), that the target is a draggable of its own that isn't disabled,
+     * where the input landed (see `target`) and the draggable's `canDrag`, then waits for
+     * the activation constraint and starts the drag. Returns the drag (pending, or already
+     * dragging when there is nothing to wait for), or `null` when no drag may start.
+     */
+    activate(activation: SensorActivation): SensorDrag | null;
+    /** Cancels the provider's drag or pending activation, whichever sensor runs it (Escape, a hidden tab). */
+    cancel(): void;
+}
+
+/** Arrow of a keyboard step. */
+export declare type SensorDirection = 'up' | 'down' | 'left' | 'right';
+
+/**
+ * One drag of a sensor, from `activate()` until it ends. Every call is ignored once it
+ * no longer applies: moves before the start or after the end, a second `drop()`.
+ */
+export declare interface SensorDrag {
+    /** Id of the dragged item. */
+    readonly id: Key;
+    /** How the drag moves, as `activate()` asked (`SensorActivation.type`). */
+    readonly type: SensorType;
+    /** Where the drag is: waiting for its activation, dragging, or ended. */
+    readonly state: SensorDragState;
+    /** The drag started, even if it has ended since (the pointer sensor swallows the click that follows it). */
+    readonly started: boolean;
+    /**
+     * The input moved. While pending, the activation constraint is checked (moving past its
+     * tolerance aborts it); while dragging, the drag goes there. Pointer drags take one
+     * position per frame; keyboard drags move at once, after the steps before them.
+     */
+    move(point: Coordinates): void;
+    /**
+     * Keyboard drags: one arrow step, as the keyboard sensor's arrow keys do (the next item
+     * of a list, the next accepting target in `'droppables'` mode, or `keyboard.step`
+     * pixels). Steps queue: each runs once the one before has rendered, and a repeated key
+     * (`event.repeat`) is skipped while one still resolves. Pointer drags ignore it.
+     */
+    step(direction: SensorDirection, options?: SensorStepOptions): Promise<void>;
+    /**
+     * Puts the item at a position of a sortable list, as keyboard moves do (other lists
+     * take it only if they accept it), and moves the drag to its new place. Resolves
+     * `false` when no list takes it there. Queued like `step()` in keyboard drags.
+     */
+    place(position: SortablePosition): Promise<boolean>;
+    /**
+     * Drops: a pending activation is aborted instead. Resolves once the drag has ended and
+     * landed: `true` when the drop went through, `false` when it was refused (a target,
+     * `onBeforeDrop`) or there was nothing to drop.
+     */
+    drop(): Promise<boolean>;
+    /** Cancels the drag (it flies back), or aborts a pending activation. */
+    cancel(): void;
+}
+
+/**
+ * - `'pending'`: waiting for the activation constraint;
+ * - `'dragging'`: from the start until the drop is decided or the drag is cancelled;
+ * - `'ended'`: the activation was aborted, or the drag dropped or was cancelled, by the
+ *   sensor or by anything else (Escape, a hidden tab, `useDnD().cancel()`, the provider
+ *   unmounting).
+ */
+export declare type SensorDragState = 'pending' | 'dragging' | 'ended';
+
+/** Options of `SensorDrag.step()`. */
+export declare interface SensorStepOptions {
+    /** The key press, handed to monitors' `getKeyboardCoordinates`. Default: a keydown of the arrow key. */
+    event?: KeyboardEvent;
+    /** A bigger step in free drags (as Shift). Default: `event.shiftKey`. */
+    fast?: boolean;
+}
+
+/**
+ * How a drag moves, whichever sensor drives it (`SensorActivation.type`): `'pointer'`
+ * follows points, `'keyboard'` moves by items.
+ */
+export declare type SensorType = 'pointer' | 'keyboard';
+
+/** A width and a height, in px. */
+export declare interface Size {
+    /** Width in px. */
+    width: number;
+    /** Height in px. */
+    height: number;
+}
+
+/** Centers the overlay under the pointer instead of keeping the grab offset. */
+export declare const snapCenterToCursor: Modifier;
+
+/**
+ * Snaps the overlay to a grid, to the nearest cell: a number is the size of square cells;
+ * options set each axis, where the grid starts and a glide between cells (`SnapToGridOptions`).
+ */
+export declare const snapToGrid: (size: number | SnapToGridOptions) => Modifier;
+
+/** Options of `snapToGrid`. */
+export declare interface SnapToGridOptions {
+    /** The cell's width in px. Without one (or 0), the drag moves freely along x. */
+    x?: number;
+    /** The cell's height in px. Without one (or 0), the drag moves freely along y: `{ y: 15 }` snaps the time of a calendar event only. */
+    y?: number;
+    /**
+     * `'container'` (default): the overlay's top-left lands on grid lines drawn from the
+     * container's top-left (`containerRect`: the sortable list or the parent element).
+     * `'delta'`: the drag offset is rounded, keeping where the item started off-grid.
+     */
+    origin?: 'container' | 'delta';
+    /**
+     * Glide the overlay between snapped positions (default 80ms). Collision still
+     * uses the snapped position at once.
+     */
+    smooth?: boolean | AnimationOptions;
+}
+
+/** What hovering an item does: `'sort'` makes room (the items between shift), `'swap'` exchanges the two items. */
+export declare type SortableBehavior = 'sort' | 'swap';
+
+/**
+ * A drop on a sortable list or tree. Its hooks run in order: `onBeforeDrop` decides,
+ * `onDrop` is told, then the default action writes `result` into the `items` of every
+ * list it names, and the overlay lands. `preventDefault()` in either hook skips that
+ * write, so you can apply `result` yourself.
+ */
+export declare interface SortableDropEvent<T = unknown> {
+    /** Keys of the dragged items. */
+    keys: Key[];
+    /** The items that land: the dragged ones, their copies (`mode: 'copy'`), or the item `createItem` made (`'insert'`). */
+    items: T[];
+    /** Keys that go through: all of them, unless the list or `onBeforeDrop` takes only some. */
+    accepted: Key[];
+    /** Keys that fly back to where they were. */
+    rejected: Key[];
+    /** Where the drag started: the list and index of the active item. `list` is `null` for a plain draggable from outside. */
+    from: {
+        list: Key | null;
+        index: number;
+    };
+    /** `index` is -1 when nothing landed: the items left their lists (`e.source.remove()`, `dropOutside: 'remove'`). */
+    to: {
+        list: Key;
+        index: number;
+    };
+    /** The drop stays in the list the drag started from. */
+    sameList: boolean;
+    /** What the drop does (see `DragMode`). */
+    mode: DragMode;
+    /**
+     * `mode: 'swap'`: the item the dragged one was exchanged with. It moved the other way,
+     * `from` the place the dragged item took (`to` above) `to` the one the dragged item
+     * started at (`from` above); between lists, into the dragged item's list.
+     */
+    partner?: {
+        key: Key;
+        item: T;
+        from: {
+            list: Key;
+            index: number;
+        };
+        to: {
+            list: Key;
+            index: number;
+        };
+    };
+    /**
+     * The new items of every list the drop changes, by list id: exactly what the default
+     * write puts in their `items`, as new arrays. Moves, copies, created items, a partial
+     * accept, both sides of a swap and items removed (`e.source.remove()` in a target
+     * inside an item, a trash zone, `dropOutside: 'remove'`) are all in it; a list the drop
+     * leaves as it is isn't. A tree's entry is a new root array: the nodes on the changed
+     * paths are copies (`withChildren`), untouched subtrees are shared, your nodes are never
+     * mutated. In `onBeforeDrop` it is the drop as it stands before the hook answers
+     * (returning some keys changes it); `onDrop` gets the final one.
+     */
+    result: ReadonlyMap<Key, T[]>;
+    /**
+     * Skips the default write, into every list in `result` (writing only some would lose
+     * or duplicate items). Apply `result` yourself in `onDrop`, or before an async
+     * `onBeforeDrop` resolves, and the overlay lands in the new order. Applied nowhere,
+     * the lists stay as they were and the overlay flies back (copies and created items,
+     * which have no place yet, fade out).
+     */
+    preventDefault(): void;
+    /** `preventDefault()` was called, in `onBeforeDrop` or `onDrop`. */
+    readonly defaultPrevented: boolean;
+    /** A drag from outside the page (`external`): what it carried, with its data (it was dropped). */
+    external?: ExternalData;
+}
+
+/** A list's group: the lists that exchange items, and whether items may leave and enter this one. */
+export declare interface SortableGroupOptions<T = unknown> {
+    /** Lists and trees with the same name exchange items. */
+    name: string;
+    /** Can items leave this list: move, copy (`'clone'`, a palette) or not at all. */
+    pull?: boolean | 'clone';
+    /**
+     * Can items enter this list: `true` (default), `false`, a type or types the items must
+     * have (as a drop target's `accept`: with `acceptMode`, all of them or some), or a
+     * function of the drag.
+     */
+    put?: boolean | string | string[] | ((context: SortablePutContext<T>) => boolean);
+}
+
+/** Where the drop goes with `placeholder: 'indicator'`: the list doesn't move, you draw the line. */
+export declare interface SortableIndicator {
+    /** Id of the list (or tree) the drop goes into. */
+    list: Key;
+    /** Insertion position in the list as rendered. */
+    index: number;
+    /** Item the indicator is attached to; `null` in an empty list. */
+    key: Key | null;
+    /**
+     * Side of `key` the line goes on. `'inside'` (trees): the middle of a row that takes
+     * the dragged nodes is hovered, the drop goes into it as its first child. `'swap'`
+     * (`behavior: 'swap'`): `key` is the item the drop exchanges with; mark the item itself.
+     */
+    side: 'before' | 'after' | 'inside' | 'swap';
+    /** Trees: depth the dropped nodes get (roots are 0), e.g. to indent the line. */
+    depth?: number;
+    /** Trees: parent the dropped nodes get, `null` at the root level. */
+    parentKey?: Key | null;
+}
+
+/**
+ * Pass `id` or `item` (`id` wins when both are given). Sortable keys must come from the
+ * data: an automatic id would change whenever the component is recreated (moved to
+ * another list, recycled by a virtual list), and the drag would lose the item.
+ *
+ * Options but `canDrag` take a value, a ref or a getter (`overlay`, `dropAnimation`: a
+ * value or a ref) and mean what they mean on `makeDraggable`. There is no `keyboardMode`:
+ * the keyboard moves a sortable item by slots.
+ */
+export declare interface SortableItemOptions<TData = unknown> {
+    /** Key of the item in its list. A getter keeps it current in virtual lists. */
+    id?: MaybeReadonlyRefOrGetter<Key>;
+    /**
+     * The item this element renders, e.g. `() => props.task`. Its key comes from the
+     * owning list's (or tree's) `getKey`, by default `item.id`.
+     */
+    item?: MaybeReadonlyRefOrGetter<unknown>;
+    /** Overlay component for this item; wins over the list's `overlay`. A ref switched mid-drag swaps it at once. */
+    overlay?: MaybeReadonlyRef<Component | undefined>;
+    /** How the overlay lands when a drag of this item ends; wins over the list's `dropAnimation`. Read at the drop. */
+    dropAnimation?: MaybeReadonlyRef<DropAnimation | undefined>;
+    /** Modifiers for drags of this item, after the provider's; win over the list's `modifiers`. */
+    modifiers?: MaybeReadonlyRefOrGetter<Modifier[] | undefined>;
+    /** Locks drags of this item to one axis (`'x'`, `'y'`); wins over the list's `axis`. */
+    axis?: MaybeReadonlyRefOrGetter<'x' | 'y' | undefined>;
+    /** Element or selector inside the item that starts the drag (and gets the attributes). */
+    handle?: MaybeReadonlyRefOrGetter<MaybeElement | string>;
+    /** `true`: the item can't be dragged (as every item of a disabled list). */
+    disabled?: MaybeReadonlyRefOrGetter<boolean>;
+    /** Its type or types, for `group.put` rules and drop targets' `accept`. Default: the name of its list's group. */
+    type?: MaybeReadonlyRefOrGetter<string | string[] | undefined>;
+    /** Anything the drag should carry: events and drop targets read it as `active.data`. */
+    data?: MaybeReadonlyRefOrGetter<TData>;
+    /**
+     * What people call the item: screen reader texts say it instead of its key (`Picked up
+     * Tomato at position 2 of 5 in Garden`). Events carry it as `active.label` and in `items`.
+     */
+    label?: MaybeReadonlyRefOrGetter<string | undefined>;
+    /** Overrides its list's (or tree's) `activation` and the provider's. Read when a press starts. */
+    activation?: MaybeReadonlyRefOrGetter<ActivationOptions | undefined>;
+    /** Extra gate, e.g. drag only while a key is held. */
+    canDrag?: (event: PointerEvent | KeyboardEvent) => boolean;
+    /**
+     * Set role/tabindex/aria-* attributes (default `true`), never overriding the user's
+     * own. Live: turning it off removes what the library set.
+     */
+    attributes?: MaybeReadonlyRefOrGetter<boolean | undefined>;
+    /**
+     * A mouse drag of it is the browser's own drag, which can leave the page (see
+     * `DraggableOptions.native`). It carries the item too: the lists of its group in another
+     * window of the app take it, and when one does, it leaves this list (`'move'`).
+     */
+    native?: MaybeReadonlyRefOrGetter<boolean | NativeDragOptions | undefined>;
+}
+
+/** What `makeSortableItem` returns. */
+export declare interface SortableItemReturn {
+    /** This item is being dragged (also true for the other items of a multi-drag), or its overlay is still landing. */
+    isDragging: ComputedRef<boolean>;
+    /**
+     * This element is a slot a dragged item will land in: the active item's, and in
+     * multi-drag `'group'` mode the slots of the items travelling with it.
+     */
+    isPlaceholder: ComputedRef<boolean>;
+    /** It is in the provider's selection: a drag of one selected item carries them all. Set it to select or deselect. */
+    selected: WritableComputedRef<boolean>;
+    /**
+     * Indicator mode: the list's `indicator` while it is attached to this item, `null`
+     * otherwise. `side` says where the line goes; in trees `depth` and `parentKey` say
+     * where the drop lands (`side: 'inside'`: into this item).
+     */
+    indicator: ComputedRef<SortableIndicator | null>;
+    /** Index in the rendered draft, -1 when unknown. */
+    index: ComputedRef<number>;
+}
+
+/**
+ * A source of sortable items. A writable ref: the library writes each drop into it. A
+ * read-only one (a getter, a readonly ref, a computed: an immutable store, server state,
+ * a store changed only through actions): you apply each drop from `event.result`, after
+ * `event.preventDefault()` (see `SortableDropEvent`).
+ */
+export declare type SortableItems<T> = Ref<T[]> | Readonly<Ref<readonly T[]>> | (() => readonly T[]);
+
+/**
+ * Options of `makeSortableList`. A component may make several lists (and trees): each
+ * item rendered in it joins the innermost one whose element holds it.
+ *
+ * Options take a value, a ref or a getter (`overlay`, `overOverlay`, `dropAnimation`,
+ * `overDropAnimation`, `animation`: a value or a ref) and are read when the list needs
+ * them, so a change applies to the next drag at the latest.
+ * Exceptions: `id` and `group` are read once, when the list is created; `items` is the
+ * model itself; functions (`getKey`, `filter`, `clone`, `createItem`, the callbacks) are
+ * passed as they are.
+ */
+export declare interface SortableListOptions<T> {
+    /**
+     * Source of truth. A writable ref takes the new array on drop, right after `onDrop`.
+     * A read-only source (a getter, a readonly ref, a computed) can't: call
+     * `event.preventDefault()` and apply `event.result` yourself. Development builds warn
+     * about a drop left to the library there, which then changes nothing.
+     */
+    items: SortableItems<T>;
+    /** Default: `item.id`, or the item itself for primitives. Also keys `makeSortableItem({ item })`. */
+    getKey?: (item: T) => Key;
+    /**
+     * Shows only the items it returns `true` for (a search, a tag): `items` (the returned
+     * one) has them, and a drag sorts among them. The others keep their places in the source:
+     * a drop writes the whole array, each hidden item still after the shown one it followed
+     * (after the nearest that stayed, when that one moved). Reactive: what it reads (a query
+     * ref) applies at once. `e.to.index` and `activeIndex` count the shown items.
+     */
+    filter?: (item: T) => boolean;
+    /** Default: `useId()`, stable between server and client render. Read once. */
+    id?: Key;
+    /** What people call the list: screen reader texts say it instead of its id (`position 2 of 5 in Garden`). */
+    label?: MaybeReadonlyRefOrGetter<string | undefined>;
+    /** Anything to tell about the list as a drop target: events carry it as `over.data` while a drag is over it. */
+    data?: MaybeReadonlyRefOrGetter<unknown>;
+    /**
+     * How a press on this list's items starts a drag, instead of the provider's `activation`
+     * (an item's own wins). Read when a press starts.
+     */
+    activation?: MaybeReadonlyRefOrGetter<ActivationOptions | undefined>;
+    /**
+     * Overlay component for this list's items (an item's own `overlay` wins). It receives
+     * `OverlayProps` and stays for the whole drag, also over other lists, unless the target
+     * under the drag has an overlay of its own (`overOverlay`). A ref switched mid-drag
+     * swaps it at once.
+     */
+    overlay?: MaybeReadonlyRef<Component | undefined>;
+    /**
+     * What the overlay shows while a drag this list accepts is over it, whatever list it
+     * comes from: a component that gets `OverlayProps` and the drag's own overlay as its
+     * default slot (see `DroppableOptions.overOverlay`). Read live.
+     */
+    overOverlay?: MaybeReadonlyRef<Component | undefined>;
+    /**
+     * How the overlay lands when a drag of this list's items ends, instead of the
+     * provider's `dropAnimation` (an item's own wins; a drop target's wins over both).
+     * Read at the drop.
+     */
+    dropAnimation?: MaybeReadonlyRef<DropAnimation | undefined>;
+    /**
+     * How the overlay lands when it is dropped into this list, whatever list it comes from:
+     * wins over the dragged item's and the provider's `dropAnimation`. Read at the drop.
+     */
+    overDropAnimation?: MaybeReadonlyRef<DropAnimation | undefined>;
+    /**
+     * Modifiers for drags of this list's items, applied after the provider's `modifiers`
+     * (an item's own `modifiers` win): e.g. `[restrictToVerticalAxis]` to keep a vertical
+     * list's items on their axis. Read when the drag starts.
+     */
+    modifiers?: MaybeReadonlyRefOrGetter<Modifier[] | undefined>;
+    /**
+     * Locks drags of this list's items to one axis: `'y'` for a vertical list, `'x'` for a
+     * horizontal one (an item's own `axis` wins). The lock comes after the modifiers, so it
+     * holds whatever they do. Read when the drag starts.
+     */
+    axis?: MaybeReadonlyRefOrGetter<'x' | 'y' | undefined>;
+    /** Lists with the same group name exchange items. Default: a group of its own. Read once. */
+    group?: string | SortableGroupOptions<T>;
+    /** Multi-drag of items of several types: `'all'` (default) or `'some'` must be accepted (`group.put`). */
+    acceptMode?: MaybeReadonlyRefOrGetter<AcceptMode | undefined>;
+    /** Default `'vertical'`. */
+    strategy?: MaybeReadonlyRefOrGetter<SortableStrategy | undefined>;
+    /**
+     * `'swap'`: the dragged item exchanges places with the hovered one, live; moving back
+     * onto it or off the lists reverts. Lists of one group that both swap exchange items
+     * between them: the hovered item moves into the dragged one's place, so it must be
+     * able to leave its list (`group.pull: true`) and enter the dragged item's
+     * (`group.put`). Multi-drag sorts instead. Default `'sort'`.
+     */
+    behavior?: MaybeReadonlyRefOrGetter<SortableBehavior | undefined>;
+    /** `'indicator'`: the list doesn't move, `indicator` says where the drop goes. Default `'item'`. */
+    placeholder?: MaybeReadonlyRefOrGetter<SortablePlaceholder | undefined>;
+    /** Multi-drag mode of drags that start in this list. Default `'group'`. Read when the drag starts. */
+    multiple?: MaybeReadonlyRefOrGetter<MultipleMode | undefined>;
+    /** `false`: items can't be reordered inside this list (palettes). */
+    sort?: MaybeReadonlyRefOrGetter<boolean | undefined>;
+    /** Creates copies (`pull: 'clone'`, copy modifier key). Required for copying. */
+    clone?: (item: T) => T;
+    /**
+     * Accepts plain draggables from outside: creates the item to insert. With the keyboard,
+     * an arrow toward the list takes the draggable in (level with it, as moves between
+     * lists go), and the created item then moves by slots like any other.
+     *
+     * A drag from outside the page (`external`) is asked twice: while it is held, for the
+     * item that shows where it goes (only `active.external.fileTypes` and `types` are known
+     * then), and at the drop, with its data (`active.external.ready`), for what is
+     * inserted. A list of items inserts them all where the slot was: a file each.
+     */
+    createItem?: (active: Active) => T | T[] | undefined;
+    /**
+     * Takes drags from outside the page: files, links, text (see `ExternalAccept`). The list
+     * makes room for them as for a plain draggable, with `createItem`, which it needs. Items
+     * of its group dragged in from another window of the app (`native`) need neither option:
+     * they come in as themselves. A value, a ref or a getter, read live.
+     */
+    external?: MaybeReadonlyRefOrGetter<ExternalAccept | undefined>;
+    /**
+     * A drop outside every target: keep the items where the placeholder is, cancel, or
+     * remove them. Default `'placeholder'` (`'cancel'` with `placeholder: 'indicator'`).
+     * Read at the drop.
+     */
+    dropOutside?: MaybeReadonlyRefOrGetter<DropOutside | undefined>;
+    /** FLIP animation of this list; default: the provider's `animation`. A value or a ref (a function is a custom animation). */
+    animation?: MaybeReadonlyRef<LayoutAnimation | undefined>;
+    /**
+     * Animates changes of `items` that no drag made: added, removed, moved and filtered
+     * items (see `AutoAnimation`). Default: the provider's `animateChanges`, off unless set
+     * there. Read when `items` changes.
+     */
+    animateChanges?: MaybeReadonlyRefOrGetter<AutoAnimation | undefined>;
+    /**
+     * The list's own size follows its items: when a drag brings an item in or takes one out
+     * (and at the drop, and for the changes `animateChanges` shows), it grows or shrinks to its new
+     * size with `animation`'s duration and easing instead of jumping, and what is around it
+     * moves along. Default `true`; `false` lets it jump. Read on every change.
+     */
+    animateSize?: MaybeReadonlyRefOrGetter<boolean | undefined>;
+    /** Overrides the provider's `autoScroll` for this list's scroll container. Read when the drag starts. */
+    autoScroll?: MaybeReadonlyRefOrGetter<boolean | AutoScrollOptions | undefined>;
+    /**
+     * The element that takes drops for the list, default the list element itself: e.g. the
+     * whole column around a short list of cards, so a card let go below the last one still
+     * lands in the list (at its end). The items stay in the list element.
+     */
+    dropzone?: MaybeElementRef;
+    /** `true`: its items can't be dragged, and it takes no items. */
+    disabled?: MaybeReadonlyRefOrGetter<boolean>;
+    /**
+     * Asked before a drop into this list, and before `dropOutside: 'remove'` takes its items
+     * out: `false` rejects it (the items fly back), some keys accept only those. May be
+     * async: the overlay waits where it was dropped. An error rejects the drop too. See
+     * `SortableDropEvent` for `result` and `preventDefault`.
+     */
+    onBeforeDrop?: (event: SortableDropEvent<T>) => MaybePromise<BeforeDropResult>;
+    /**
+     * Called once a drop into this list is accepted, before it is written: `items` still
+     * holds the old order, `event.result` the new one. Synchronous: the write follows as it
+     * returns, unless it called `event.preventDefault()`. Also called on the list the items
+     * came from when they are removed (`to.index` is -1).
+     */
+    onDrop?: (event: SortableDropEvent<T>) => void;
+}
+
+/** What `makeSortableList` returns. */
+export declare interface SortableListReturn<T> {
+    /** The list's id: the `id` option, or the one made for it. */
+    id: Key;
+    /** Draft order: render this, not the source array. */
+    items: ComputedRef<T[]>;
+    /** A drag is over the list. */
+    isOver: ComputedRef<boolean>;
+    /** Something is being dragged and this list takes it. */
+    isAccepting: ComputedRef<boolean>;
+    /** Indicator mode: where the drop goes in this list; `null` when not here. */
+    indicator: ComputedRef<SortableIndicator | null>;
+    /**
+     * The row a virtualizer must keep mounted: the slot while it is in this list (a copy, a
+     * created item), otherwise the dragged item; `null` without a drag.
+     */
+    activeKey: ComputedRef<Key | null>;
+    /** Index of the active item in this list's draft, -1 when it isn't here. */
+    activeIndex: ComputedRef<number>;
+    /** Size of the dragged item at drag start: e.g. for the size of a virtual row it holds. */
+    activeSize: ComputedRef<Size | null>;
+    /** Animates layout changes the library didn't cause (e.g. a virtualizer re-measure). */
+    captureLayout(): void;
+}
+
+/**
+ * How a drag shows where it goes: `'item'`, the dragged item's slot moves through the list;
+ * `'indicator'`, the list stays as it is and `indicator` says where the drop goes (you draw the line).
+ */
+export declare type SortablePlaceholder = 'item' | 'indicator';
+
+/**
+ * A position in a sortable list, for `SensorDrag.place()` (and `moveItem` of
+ * `@vue-dnd-kit/actions`). Lists only: trees place items by their own keys.
+ */
+export declare interface SortablePosition {
+    /** Id of the list (`SortableListOptions.id`). Default: the list the item is in. */
+    list?: Key;
+    /**
+     * Index the item ends up at, counted without the item itself (a multi-drag block
+     * counts once). Clamped to the list; default: the end.
+     */
+    index?: number;
+}
+
+/** What a function `group.put` is asked with: the items that would enter the list. */
+export declare interface SortablePutContext<T = unknown> {
+    /** Keys of the items. */
+    keys: Key[];
+    /** The items (for a plain draggable, the item `createItem` made). */
+    items: T[];
+    /** The types of the items, together. */
+    types: string[];
+    /** Source list, `null` for external draggables. */
+    from: Key | null;
+    /** Id of the list asked. */
+    to: Key;
+}
+
+/** How a list lays out its items: a column (`'vertical'`), a row (`'horizontal'`) or a grid that wraps (`'grid'`). */
+export declare type SortableStrategy = 'vertical' | 'horizontal' | 'grid';
+
+/**
+ * Drop event of a tree. `index` is the position among the siblings under `parentKey`
+ * (`from`: before the move; `to`: after it, with the node already removed from its
+ * old place). `from.parentKey` is `null` for root nodes and for items from another list.
+ * A multi-drag moves `keys` (each with its subtree) side by side: `from` is where the
+ * node leading the drag was (the grabbed one, or the selected node it rides in), `to`
+ * where the first of them lands. A copy (`mode: 'copy'`) leaves the nodes where they are
+ * and inserts `items`, their copies; a plain draggable (`mode: 'insert'`) the node
+ * `createItem` made.
+ */
+export declare interface SortableTreeDropEvent<T = unknown> extends SortableDropEvent<T> {
+    /** Where the node leading the drag was: its tree, its index among its siblings, its parent. */
+    from: {
+        list: Key | null;
+        index: number;
+        parentKey: Key | null;
+    };
+    /** Where the first dropped node lands: its tree, its index among its new siblings, its new parent. */
+    to: {
+        list: Key;
+        index: number;
+        parentKey: Key | null;
+    };
+}
+
+/**
+ * Options of `makeSortableTree`. A multi-drag moves the selected nodes as one block, each
+ * with its subtree, to one place and depth (in document order); a selected node inside
+ * another selected one rides along in its subtree. That goes for the grabbed node too
+ * (as in VS Code): it stays inside the selected node it is in, which moves with its
+ * subtree, while the overlay stays on the grabbed row. `canNest` and `maxDepth` apply to
+ * the whole block.
+ *
+ * The other options mean what they mean on `makeSortableList`. They take a value, a ref
+ * or a getter (`overlay`, `overOverlay`, `animation`, `dropAnimation`,
+ * `overDropAnimation`: a value or a ref) and are read when the tree needs
+ * them, so a change applies to the next drag at the latest. Exceptions: `id` and `group`
+ * are read once, when the tree is created; `items` is the model itself; functions
+ * (`getKey`, `getChildren`, `setChildren`, `canNest`, `clone`, `createItem`, the
+ * callbacks) are passed as they are.
+ */
+export declare interface SortableTreeOptions<T> {
+    /**
+     * The root nodes. A writable ref: on drop the library gives the changed nodes their new
+     * children (`setChildren`) and writes a new root array. A read-only source (a getter, a
+     * readonly ref, a computed): call `event.preventDefault()` and apply `event.result`
+     * yourself (as in `SortableListOptions.items`).
+     */
+    items: SortableItems<T>;
+    /** Default: `node.id`. Also keys `makeSortableItem({ item })`, copies and created nodes. */
+    getKey?: (node: T) => Key;
+    /** The children of a node. Default: `node.children`. */
+    getChildren?: (node: T) => T[] | undefined;
+    /** How the default write gives a node its new children. Default: `node.children = children`. */
+    setChildren?: (node: T, children: T[]) => void;
+    /**
+     * A copy of `node` with `children`, for `event.result`: a new tree that leaves your
+     * nodes as they are (the default write still goes through `setChildren`). Default:
+     * `{ ...node }` given the children through `setChildren` (`{ ...node, children }`
+     * without a `setChildren`). Pass it for class instances and nodes that need more
+     * than a shallow copy.
+     */
+    withChildren?: (node: T, children: T[]) => T;
+    /** Default: `useId()`, stable between server and client render. Read once. */
+    id?: Key;
+    /** What people call the tree: screen reader texts say it instead of its id. */
+    label?: MaybeReadonlyRefOrGetter<string | undefined>;
+    /** Anything to tell about the tree as a drop target: events carry it as `over.data` while a drag is over it. */
+    data?: MaybeReadonlyRefOrGetter<unknown>;
+    /** How a press on this tree's rows starts a drag, instead of the provider's `activation` (a row's own wins). */
+    activation?: MaybeReadonlyRefOrGetter<ActivationOptions | undefined>;
+    /** Overlay component for this tree's rows (a row's own `overlay` wins). A ref switched mid-drag swaps it at once. */
+    overlay?: MaybeReadonlyRef<Component | undefined>;
+    /**
+     * What the overlay shows while a drag this tree accepts is over it (see
+     * `SortableListOptions.overOverlay`). Its `to` prop says where the drop would nest.
+     */
+    overOverlay?: MaybeReadonlyRef<Component | undefined>;
+    /** How the overlay lands when a drag of this tree's rows ends (see `SortableListOptions.dropAnimation`). */
+    dropAnimation?: MaybeReadonlyRef<DropAnimation | undefined>;
+    /** How the overlay lands when it is dropped into this tree (see `SortableListOptions.overDropAnimation`). */
+    overDropAnimation?: MaybeReadonlyRef<DropAnimation | undefined>;
+    /**
+     * Modifiers for drags of this tree's rows, applied after the provider's `modifiers` (a
+     * row's own `modifiers` win): e.g. `[restrictToVerticalAxis]`. Read when the drag starts.
+     * A locked axis still nests: the depth then comes from hovering the middle of a row.
+     */
+    modifiers?: MaybeReadonlyRefOrGetter<Modifier[] | undefined>;
+    /**
+     * Locks drags of this tree's rows to one axis (a row's own `axis` wins), after the
+     * modifiers. With `'y'` rows still nest: the depth then comes from hovering the middle of
+     * a row. Read when the drag starts.
+     */
+    axis?: MaybeReadonlyRefOrGetter<'x' | 'y' | undefined>;
+    /** Lists and trees with the same group name exchange items. Default: a group of its own. Read once. */
+    group?: string | SortableGroupOptions<T>;
+    /** Multi-drag of items of several types: `'all'` (default) or `'some'` must be accepted (`group.put`). */
+    acceptMode?: MaybeReadonlyRefOrGetter<AcceptMode | undefined>;
+    /** Pixels of horizontal offset per depth level. Default 24. */
+    indentation?: MaybeReadonlyRefOrGetter<number | undefined>;
+    /** How the depth is chosen: horizontal offset, hovering the middle of a row, or both (default). */
+    nesting?: MaybeReadonlyRefOrGetter<TreeNesting | undefined>;
+    /**
+     * `'item'` (default): the dragged node moves through the rows at its projected depth.
+     * `'indicator'`: the tree doesn't move; `indicator` (on the tree and on each row's
+     * `makeSortableItem`) says where the drop goes, with its `depth` and `parentKey`, and
+     * you draw the line. Dropping outside then cancels.
+     */
+    placeholder?: MaybeReadonlyRefOrGetter<SortablePlaceholder | undefined>;
+    /** Deepest allowed depth (roots are 0). The dragged nodes' own descendants count. */
+    maxDepth?: MaybeReadonlyRefOrGetter<number | undefined>;
+    /** Whether `node` may go under `parent`; a multi-drag asks for every dragged node. */
+    canNest?: (node: T, parent: T) => boolean;
+    /** Keys of the nodes whose children are hidden. */
+    collapsed?: MaybeReadonlyRefOrGetter<ReadonlySet<Key> | undefined>;
+    /**
+     * Creates copies (`group.pull: 'clone'`, the copy modifier key). Required for copying.
+     * Return the copy with its whole subtree: a copied folder keeps its children. The copy
+     * and each of its descendants need keys of their own (read with `getKey`), as every
+     * node of a tree does.
+     */
+    clone?: (node: T) => T;
+    /**
+     * Accepts plain draggables from outside: creates the node to insert, at the projected
+     * position and depth (`canNest` and `maxDepth` apply to it). With the keyboard, an arrow
+     * toward the tree takes the draggable in, level with the row it goes before, and the
+     * arrow keys then move the node like any other. A drag from outside the page (`external`)
+     * is asked twice, while it is held and at the drop (see the list's `createItem`); a
+     * folder node with a child per file holds several files.
+     */
+    createItem?: (active: Active) => T | undefined;
+    /**
+     * Takes drags from outside the page: files, links, text (see `ExternalAccept`), with
+     * `createItem`. Nodes of its group dragged in from another window of the app come in as
+     * themselves. A value, a ref or a getter, read live.
+     */
+    external?: MaybeReadonlyRefOrGetter<ExternalAccept | undefined>;
+    /**
+     * A drop outside every target: keep the nodes where the placeholder is, cancel, or
+     * remove them. Default `'placeholder'` (`'cancel'` with `placeholder: 'indicator'`).
+     * Read at the drop.
+     */
+    dropOutside?: MaybeReadonlyRefOrGetter<DropOutside | undefined>;
+    /** FLIP animation of this tree; default: the provider's `animation`. A value or a ref (a function is a custom animation). */
+    animation?: MaybeReadonlyRef<LayoutAnimation | undefined>;
+    /**
+     * As in `SortableListOptions`, for the visible rows: nodes added, removed or moved, and
+     * the rows a node shows or hides as it expands or collapses (`collapsed`).
+     */
+    animateChanges?: MaybeReadonlyRefOrGetter<AutoAnimation | undefined>;
+    /** The tree's own size follows its rows, as a list's does (`animateSize`). Default `true`. */
+    animateSize?: MaybeReadonlyRefOrGetter<boolean | undefined>;
+    /** Overrides the provider's `autoScroll` for this tree's scroll container. Read when the drag starts. */
+    autoScroll?: MaybeReadonlyRefOrGetter<boolean | AutoScrollOptions | undefined>;
+    /** As in `SortableListOptions`: the element that takes drops for the tree, default the tree's own. */
+    dropzone?: MaybeElementRef;
+    /** `true`: its rows can't be dragged, and it takes no items. */
+    disabled?: MaybeReadonlyRefOrGetter<boolean>;
+    /** As in `SortableListOptions`. */
+    onBeforeDrop?: (event: SortableTreeDropEvent<T>) => MaybePromise<BeforeDropResult>;
+    /** As in `SortableListOptions`: before the write, which `event.preventDefault()` skips. */
+    onDrop?: (event: SortableTreeDropEvent<T>) => void;
+}
+
+/** What `makeSortableTree` returns. */
+export declare interface SortableTreeReturn<T> {
+    /** The tree's id: the `id` option, or the one made for it. */
+    id: Key;
+    /** Visible nodes in draft order; the active node carries its projected depth. */
+    items: ComputedRef<FlatNode<T>[]>;
+    /** Where the active node would land, `null` when it isn't in this tree. */
+    projected: ComputedRef<TreeProjection | null>;
+    /** Indicator mode: where the drop goes, with its `depth` and `parentKey`; `null` when not here. */
+    indicator: ComputedRef<SortableIndicator | null>;
+    /** A drag is over the tree. */
+    isOver: ComputedRef<boolean>;
+    /** Something is being dragged and this tree takes it. */
+    isAccepting: ComputedRef<boolean>;
+    /**
+     * The row a virtualizer must keep mounted: the slot while it is in this tree (the
+     * dragged node, the selected node the grabbed one rides in, a copy, a created node),
+     * otherwise the dragged node.
+     */
+    activeKey: ComputedRef<Key | null>;
+    /** Index of `activeKey` in `items`, -1 when it isn't here. */
+    activeIndex: ComputedRef<number>;
+    /** Size of the dragged row at drag start. */
+    activeSize: ComputedRef<Size | null>;
+    /** Animates layout changes the library didn't cause (e.g. a virtualizer re-measure). */
+    captureLayout(): void;
+}
+
+/**
+ * How a tree drag chooses its depth: `'offset'`, by how far it moves sideways
+ * (`indentation` per level); `'hover'`, by hovering the middle of a row, which takes it as a
+ * child; `'both'`.
+ */
+export declare type TreeNesting = 'offset' | 'hover' | 'both';
+
+/** Where the dragged node would land in a tree. */
+export declare interface TreeProjection {
+    /** The depth it would get (roots are 0). */
+    depth: number;
+    /** The node it would go under; `null` at the root. */
+    parentKey: Key | null;
+}
+
+/** Read-only drag state for custom UI (valid-target highlighting, spinners, progress). */
+export declare const useDnD: () => DnDState;
+
+/**
+ * The provider above this component, as an opaque handle for `provideDnDContext`: it
+ * bridges the provider into shadow roots and separate Vue apps.
+ */
+export declare const useDnDContext: () => DnDContext;
+
+/** Subscribes to the events of every drag under the provider, for as long as the calling component (or effect scope) lives. */
+export declare const useDnDMonitor: (monitor: DnDMonitor) => void;
+
+/**
+ * Runs a sensor in the provider above for as long as the calling component (or effect
+ * scope) lives, next to the provider's `sensors`. Its drag is cancelled when it unmounts.
+ */
+export declare function useSensor(sensor: Sensor): void;
+
+export { }