ropav 0.2.0 → 0.3.0

package/dist/utils/dnd-data-transfer.js

@@ -0,0 +1,201 @@
+import { CUSTOM_DRAG_TYPE, DIRECTORY_DRAG_TYPE, GENERIC_TYPE, NATIVE_DRAG_TYPES } from "./dnd-constants.js";
+//#region src/utils/dnd-data-transfer.ts
+/**
+* Reading and writing the native `DataTransfer`, ported from React Aria's `dnd/utils.ts`.
+*
+* The native API is narrower than the one this library exposes: a `DataTransfer` holds at most one
+* entry per mime type, and only a handful of types survive a drag between applications. Both
+* limits are worked around by serializing the full item list into `CUSTOM_DRAG_TYPE` whenever
+* the native representation would lose information.
+*/
+/** `DataTransferItemList` is array-like but not iterable in every engine's type surface. */
+var toItemArray = (list) => {
+	const items = [];
+	for (let index = 0; index < list.length; index++) {
+		const item = list[index];
+		if (item) items.push(item);
+	}
+	return items;
+};
+/** Every mime type present across a set of drag items. */
+var getTypes = (items) => {
+	const types = /* @__PURE__ */ new Set();
+	for (const item of items) for (const type of Object.keys(item)) types.add(type);
+	return types;
+};
+/**
+* Write drag items onto a native `DataTransfer`.
+*
+* The native API cannot hold two items of one type, nor one item in two representations, so
+* both cases fall back to a JSON blob under `CUSTOM_DRAG_TYPE`. That blob is written *in
+* addition to* the native entries rather than instead of them, so a foreign application still
+* receives something it understands.
+*
+* Note that files are never written: `DataTransferItemList.add` accepts a `File`, but no browser
+* actually carries it out of the page, so dragging binary data to the desktop is not supported.
+*/
+var writeToDataTransfer = (dataTransfer, items) => {
+	const groupedByType = /* @__PURE__ */ new Map();
+	const customData = [];
+	let needsCustomData = false;
+	for (const item of items) {
+		const types = Object.keys(item);
+		if (types.length > 1) needsCustomData = true;
+		const dataByType = {};
+		for (const type of types) {
+			let typeItems = groupedByType.get(type);
+			if (typeItems) needsCustomData = true;
+			else {
+				typeItems = [];
+				groupedByType.set(type, typeItems);
+			}
+			const data = item[type] ?? "";
+			dataByType[type] = data;
+			typeItems.push(data);
+		}
+		customData.push(dataByType);
+	}
+	for (const [type, typeItems] of groupedByType) if (NATIVE_DRAG_TYPES.has(type)) dataTransfer.items.add(typeItems.join("\n"), type);
+	else {
+		const first = typeItems[0];
+		if (first !== void 0) dataTransfer.items.add(first, type);
+	}
+	if (needsCustomData) dataTransfer.items.add(JSON.stringify(customData), CUSTOM_DRAG_TYPE);
+};
+/**
+* The matching rules a drop target's type question is answered by.
+*
+* Shared rather than living on the class, because the same question is asked on the keyboard
+* path where there is no `DataTransfer` to build from — only a plain set of type strings. Both
+* paths have to answer identically, or a `getDropOperation` written with a wildcard would accept
+* a pointer drag and refuse the same drag driven from the keyboard.
+*/
+var matchesType = (types, includesUnknownTypes, type) => {
+	if (Array.isArray(type)) return type.some((candidate) => matchesType(types, includesUnknownTypes, candidate));
+	if (includesUnknownTypes || type === DIRECTORY_DRAG_TYPE && types.has("application/octet-stream") || type === "*/*") return true;
+	if (typeof type !== "string") return false;
+	if (type.endsWith("/*")) {
+		const prefix = type.slice(0, -2);
+		for (const key of types) if (key.startsWith(prefix)) return true;
+		return false;
+	}
+	return types.has(type);
+};
+/**
+* What a drag carries, as far as a drop target may know while the drag is still moving.
+*
+* Ported from React Aria's `DragTypes`. Built once per `dragenter`/`dragover` because a
+* `DataTransfer` is only readable for types — never values — until the drop actually fires.
+*/
+var DataTransferDragTypes = class {
+	types;
+	includesUnknownTypes;
+	constructor(dataTransfer) {
+		this.types = /* @__PURE__ */ new Set();
+		let hasFiles = false;
+		for (const item of toItemArray(dataTransfer.items)) {
+			if (item.type === "application/vnd.react-aria.items+json") continue;
+			if (item.kind === "file") hasFiles = true;
+			if (item.type) this.types.add(item.type);
+			else this.types.add(GENERIC_TYPE);
+		}
+		this.includesUnknownTypes = !hasFiles && dataTransfer.types.includes("Files");
+	}
+	has(type) {
+		return matchesType(this.types, this.includesUnknownTypes, type);
+	}
+};
+/**
+* The same question answered from a plain set of type strings.
+*
+* The keyboard drag session never touches a `DataTransfer` — it knows the dragged items directly
+* — so it holds the types as a `Set<string>`. React Aria hands that set straight to
+* `getDropOperation`, where it duck-types as `DragTypes` because a `Set` also has a `has`
+* method. That silently loses wildcard and directory matching on the keyboard path: `has("image/*")`
+* against a set containing `"image/png"` answers `false`. Wrapping restores parity between the
+* two paths.
+*/
+var dragTypesFromSet = (types) => ({ has: (type) => matchesType(types, false, type) });
+/**
+* Read drop items back off a native `DataTransfer`.
+*
+* Must be called synchronously from the `drop` handler: the browser empties the transfer as
+* soon as the handler returns, so every value is read here and handed out as a resolved promise
+* afterwards.
+*/
+var readFromDataTransfer = (dataTransfer) => {
+	const items = [];
+	if (!dataTransfer) return items;
+	let hasCustomType = false;
+	if (dataTransfer.types.includes("application/vnd.react-aria.items+json")) try {
+		const parsed = JSON.parse(dataTransfer.getData(CUSTOM_DRAG_TYPE));
+		for (const item of parsed) items.push({
+			getText: (type) => Promise.resolve(item[type] ?? ""),
+			kind: "text",
+			types: new Set(Object.keys(item))
+		});
+		hasCustomType = true;
+	} catch {}
+	if (!hasCustomType) {
+		const stringItems = /* @__PURE__ */ new Map();
+		for (const item of toItemArray(dataTransfer.items)) if (item.kind === "string") stringItems.set(item.type || "application/octet-stream", dataTransfer.getData(item.type));
+		else if (item.kind === "file") {
+			if (typeof item.webkitGetAsEntry === "function") {
+				const entry = item.webkitGetAsEntry();
+				if (!entry) continue;
+				if (entry.isFile) items.push(createFileItem(item.getAsFile()));
+				else if (entry.isDirectory) items.push(createDirectoryItem(entry));
+			} else items.push(createFileItem(item.getAsFile()));
+		}
+		if (stringItems.size > 0) items.push({
+			getText: (type) => Promise.resolve(stringItems.get(type) ?? ""),
+			kind: "text",
+			types: new Set(stringItems.keys())
+		});
+	}
+	return items;
+};
+var blobToString = (blob) => {
+	if (typeof blob.text === "function") return blob.text();
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(reader.result);
+		reader.onerror = reject;
+		reader.readAsText(blob);
+	});
+};
+var createFileItem = (file) => {
+	if (!file) throw new Error("No file provided");
+	return {
+		getFile: () => Promise.resolve(file),
+		getText: () => blobToString(file),
+		kind: "file",
+		name: file.name,
+		type: file.type || "application/octet-stream"
+	};
+};
+var createDirectoryItem = (entry) => ({
+	getEntries: () => getEntries(entry),
+	kind: "directory",
+	name: entry.name
+});
+/**
+* Walk a dropped directory.
+*
+* `readEntries` returns a bounded batch rather than the whole directory, so it is called until
+* it comes back empty — a single call silently truncates a large directory.
+*/
+async function* getEntries(item) {
+	const reader = item.createReader();
+	let entries;
+	do {
+		entries = await new Promise((resolve, reject) => {
+			reader.readEntries(resolve, reject);
+		});
+		for (const entry of entries) if (entry.isFile) yield createFileItem(await getEntryFile(entry));
+		else if (entry.isDirectory) yield createDirectoryItem(entry);
+	} while (entries.length > 0);
+}
+var getEntryFile = (entry) => new Promise((resolve, reject) => entry.file(resolve, reject));
+//#endregion
+export { DataTransferDragTypes, dragTypesFromSet, getTypes, readFromDataTransfer, writeToDataTransfer };

package/dist/utils/dnd-drop-target-navigation.d.ts

@@ -0,0 +1,7 @@
+import type { DragCollection, DragKeyboardDelegate, DropTarget } from "./dnd-types";
+/**
+ * The drop target an arrow key moves to.
+ *
+ * @param wrap - Whether the ends join up through the collection's root, so the walk cycles.
+ */
+export declare const navigateDropTarget: (keyboardDelegate: DragKeyboardDelegate, collection: DragCollection, target: DropTarget | null | undefined, direction: "down" | "left" | "right" | "up", rtl?: boolean, wrap?: boolean) => DropTarget | null;

package/dist/utils/dnd-drop-target-navigation.js

@@ -0,0 +1,171 @@
+//#region src/utils/dnd-drop-target-navigation.ts
+/**
+* Moving the drop target with the arrow keys, ported from React Aria's
+* `DropTargetKeyboardNavigation`.
+*
+* A pointer picks a position directly; a keyboard has to walk one. Within a single item the walk
+* visits **before → on → after**, so every place a drop could land is reachable, and at the ends
+* of a subtree it steps into children or back out to the parent. That is why this is a tree walk
+* rather than a simple "next key".
+*/
+/** Whether a node is a real item, as opposed to a loader row or a section header. */
+var isItem = (collection, key) => key != null && (collection.getItem(key)?.type ?? "item") === "item";
+/**
+* The next key in document order that is actually an item.
+*
+* A collection may hold rows that are not drop targets, and stepping onto one would offer the
+* user somewhere they cannot drop.
+*/
+var getNextItem = (collection, key, getNextKey) => {
+	let nextKey = getNextKey(key);
+	while (nextKey != null && !isItem(collection, nextKey)) nextKey = getNextKey(nextKey);
+	return nextKey;
+};
+/**
+* The position after the last child of an expanded item, if it has one.
+*
+* There is no direct "is expanded" flag to read. A collapsed item's children are absent from
+* document order, so the test is whether the next row is deeper than this one.
+*/
+var getLastChild = (collection, key) => {
+	const targetNode = collection.getItem(key);
+	const nextKey = getNextItem(collection, key, (current) => collection.getKeyAfter(current));
+	const nextNode = nextKey != null ? collection.getItem(nextKey) : null;
+	if (!targetNode || !nextNode) return null;
+	if ((nextNode.level ?? 0) <= (targetNode.level ?? 0)) return null;
+	let lastChild = targetNode.lastChildKey != null ? collection.getItem(targetNode.lastChildKey) : null;
+	while (lastChild && (lastChild.type ?? "item") !== "item" && lastChild.prevKey != null) lastChild = collection.getItem(lastChild.prevKey) ?? null;
+	if (!lastChild) return null;
+	return {
+		dropPosition: "after",
+		key: lastChild.key,
+		type: "item"
+	};
+};
+var nextDropTarget = (keyboardDelegate, collection, target, wrap, horizontal) => {
+	if (!target) return { type: "root" };
+	if (target.type === "root") {
+		const nextKey = keyboardDelegate.getFirstKey?.() ?? null;
+		return nextKey != null ? {
+			dropPosition: "before",
+			key: nextKey,
+			type: "item"
+		} : null;
+	}
+	const nextKey = horizontal ? (horizontal === "right" ? keyboardDelegate.getKeyRightOf?.(target.key) : keyboardDelegate.getKeyLeftOf?.(target.key)) ?? null : keyboardDelegate.getKeyBelow?.(target.key) ?? null;
+	const nextCollectionKey = getNextItem(collection, target.key, (key) => collection.getKeyAfter(key));
+	if (nextKey != null && nextKey !== nextCollectionKey) return {
+		dropPosition: target.dropPosition,
+		key: nextKey,
+		type: "item"
+	};
+	if (target.dropPosition === "before") return {
+		dropPosition: "on",
+		key: target.key,
+		type: "item"
+	};
+	if (target.dropPosition === "on") {
+		const targetNode = collection.getItem(target.key);
+		const nextNode = nextKey != null ? collection.getItem(nextKey) : null;
+		if (targetNode && nextNode && (nextNode.level ?? 0) >= (targetNode.level ?? 0)) return {
+			dropPosition: "before",
+			key: nextNode.key,
+			type: "item"
+		};
+		return {
+			dropPosition: "after",
+			key: target.key,
+			type: "item"
+		};
+	}
+	const targetNode = collection.getItem(target.key);
+	let nextSibling = targetNode?.nextKey != null ? collection.getItem(targetNode.nextKey) : null;
+	while (nextSibling && (nextSibling.type ?? "item") !== "item" && nextSibling.nextKey != null) nextSibling = collection.getItem(nextSibling.nextKey) ?? null;
+	if (targetNode && nextSibling == null && targetNode.parentKey != null) {
+		const parentNode = collection.getItem(targetNode.parentKey);
+		const afterParent = parentNode?.nextKey != null ? collection.getItem(parentNode.nextKey) : null;
+		if ((afterParent?.type ?? "item") === "item" && afterParent) return {
+			dropPosition: "before",
+			key: afterParent.key,
+			type: "item"
+		};
+		if (parentNode && (parentNode.type ?? "item") === "item") return {
+			dropPosition: "after",
+			key: parentNode.key,
+			type: "item"
+		};
+	}
+	if (nextSibling) return {
+		dropPosition: "on",
+		key: nextSibling.key,
+		type: "item"
+	};
+	return wrap ? { type: "root" } : null;
+};
+var previousDropTarget = (keyboardDelegate, collection, target, wrap, horizontal) => {
+	if (!target || wrap && target.type === "root") {
+		let prevKey = null;
+		let lastKey = keyboardDelegate.getLastKey?.() ?? null;
+		while (lastKey != null) {
+			const node = collection.getItem(lastKey);
+			if (!node || (node.type ?? "item") !== "item") break;
+			prevKey = lastKey;
+			lastKey = node.parentKey ?? null;
+		}
+		return prevKey != null ? {
+			dropPosition: "after",
+			key: prevKey,
+			type: "item"
+		} : null;
+	}
+	if (target.type === "item") {
+		const prevKey = horizontal ? (horizontal === "left" ? keyboardDelegate.getKeyLeftOf?.(target.key) : keyboardDelegate.getKeyRightOf?.(target.key)) ?? null : keyboardDelegate.getKeyAbove?.(target.key) ?? null;
+		const prevCollectionKey = getNextItem(collection, target.key, (key) => collection.getKeyBefore(key));
+		if (prevKey != null && prevKey !== prevCollectionKey) return {
+			dropPosition: target.dropPosition,
+			key: prevKey,
+			type: "item"
+		};
+		if (target.dropPosition === "before") {
+			const targetNode = collection.getItem(target.key);
+			if (targetNode?.prevKey != null) {
+				const lastChild = getLastChild(collection, targetNode.prevKey);
+				if (lastChild) return lastChild;
+			}
+			if (prevKey != null) return {
+				dropPosition: "on",
+				key: prevKey,
+				type: "item"
+			};
+			return { type: "root" };
+		}
+		if (target.dropPosition === "on") return {
+			dropPosition: "before",
+			key: target.key,
+			type: "item"
+		};
+		const lastChild = getLastChild(collection, target.key);
+		if (lastChild) return lastChild;
+		return {
+			dropPosition: "on",
+			key: target.key,
+			type: "item"
+		};
+	}
+	return target.type !== "root" ? { type: "root" } : null;
+};
+/**
+* The drop target an arrow key moves to.
+*
+* @param wrap - Whether the ends join up through the collection's root, so the walk cycles.
+*/
+var navigateDropTarget = (keyboardDelegate, collection, target, direction, rtl = false, wrap = false) => {
+	switch (direction) {
+		case "left": return rtl ? nextDropTarget(keyboardDelegate, collection, target, wrap, "left") : previousDropTarget(keyboardDelegate, collection, target, wrap, "left");
+		case "right": return rtl ? previousDropTarget(keyboardDelegate, collection, target, wrap, "right") : nextDropTarget(keyboardDelegate, collection, target, wrap, "right");
+		case "up": return previousDropTarget(keyboardDelegate, collection, target, wrap, null);
+		case "down": return nextDropTarget(keyboardDelegate, collection, target, wrap, null);
+	}
+};
+//#endregion
+export { navigateDropTarget };

package/dist/utils/dnd-list-drop-target-delegate.d.ts

@@ -0,0 +1,54 @@
+import type { DragCollection, DropTarget, DropTargetDelegate } from "./dnd-types";
+import type { ShallowRef } from "vue";
+export interface ListDropTargetDelegateOptions {
+    /** Whether items are arranged in a single line or wrap into a grid. @default "stack" */
+    layout?: "grid" | "stack";
+    /** The direction the collection scrolls. @default "vertical" */
+    orientation?: "horizontal" | "vertical";
+    /** @default "ltr" */
+    direction?: "ltr" | "rtl";
+}
+/**
+ * Resolves a pointer position to a drop target, ported from React Aria's
+ * `ListDropTargetDelegate`.
+ *
+ * Three axes are in play and keeping them straight is most of the work:
+ *
+ * - **Primary** — the direction the collection is arranged in, or for a grid the direction it
+ *   scrolls.
+ * - **Secondary** — the other one. Only a grid has it.
+ * - **Flow** — the direction items follow one another, which is what a "before"/"after" drop
+ *   position is relative to. For a stack that is the primary axis; for a grid it is the
+ *   secondary one, because a grid's items flow across a row before moving down.
+ */
+export declare class ListDropTargetDelegate implements DropTargetDelegate {
+    private collection;
+    private element;
+    private layout;
+    private orientation;
+    protected direction: "ltr" | "rtl";
+    constructor(collection: DragCollection, element: ShallowRef<HTMLElement | null>, options?: ListDropTargetDelegateOptions);
+    private getPrimaryStart;
+    private getPrimaryEnd;
+    private getSecondaryStart;
+    private getSecondaryEnd;
+    private getFlowStart;
+    private getFlowEnd;
+    getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget;
+    /**
+     * Which position within the item the pointer means.
+     *
+     * When dropping *on* the item is allowed, before/after only win within 5px of an edge — the
+     * body of the item stays a drop-on target. When it is not allowed, the item splits down the
+     * middle instead, so every pixel resolves to one side or the other.
+     */
+    private resolveWithinItem;
+    /**
+     * Map each item key to the element currently rendering it.
+     *
+     * Scoped by `data-collection` when the container declares one, so a nested collection's rows
+     * are not mistaken for this one's. Both attributes are already emitted by `ListBoxItem` and
+     * `TableRow`.
+     */
+    private buildElementMap;
+}

package/dist/utils/dnd-list-drop-target-delegate.js

@@ -0,0 +1,154 @@
+//#region src/utils/dnd-list-drop-target-delegate.ts
+/**
+* Resolves a pointer position to a drop target, ported from React Aria's
+* `ListDropTargetDelegate`.
+*
+* Three axes are in play and keeping them straight is most of the work:
+*
+* - **Primary** — the direction the collection is arranged in, or for a grid the direction it
+*   scrolls.
+* - **Secondary** — the other one. Only a grid has it.
+* - **Flow** — the direction items follow one another, which is what a "before"/"after" drop
+*   position is relative to. For a stack that is the primary axis; for a grid it is the
+*   secondary one, because a grid's items flow across a row before moving down.
+*/
+var ListDropTargetDelegate = class {
+	collection;
+	element;
+	layout;
+	orientation;
+	direction;
+	constructor(collection, element, options = {}) {
+		this.collection = collection;
+		this.element = element;
+		this.layout = options.layout ?? "stack";
+		this.orientation = options.orientation ?? "vertical";
+		this.direction = options.direction ?? "ltr";
+	}
+	getPrimaryStart(rect) {
+		return this.orientation === "horizontal" ? rect.left : rect.top;
+	}
+	getPrimaryEnd(rect) {
+		return this.orientation === "horizontal" ? rect.right : rect.bottom;
+	}
+	getSecondaryStart(rect) {
+		return this.orientation === "horizontal" ? rect.top : rect.left;
+	}
+	getSecondaryEnd(rect) {
+		return this.orientation === "horizontal" ? rect.bottom : rect.right;
+	}
+	getFlowStart(rect) {
+		return this.layout === "stack" ? this.getPrimaryStart(rect) : this.getSecondaryStart(rect);
+	}
+	getFlowEnd(rect) {
+		return this.layout === "stack" ? this.getPrimaryEnd(rect) : this.getSecondaryEnd(rect);
+	}
+	getDropTargetFromPoint(x, y, isValidDropTarget) {
+		const container = this.element.value;
+		if (!container) return { type: "root" };
+		const items = [...this.collection.getKeys()].filter((key) => (this.collection.getItem(key)?.type ?? "item") === "item");
+		if (items.length < 1) return { type: "root" };
+		const containerRect = container.getBoundingClientRect();
+		let primary = this.orientation === "horizontal" ? x : y;
+		let secondary = this.orientation === "horizontal" ? y : x;
+		primary += this.getPrimaryStart(containerRect);
+		secondary += this.getSecondaryStart(containerRect);
+		const flow = this.layout === "stack" ? primary : secondary;
+		const isPrimaryRTL = this.orientation === "horizontal" && this.direction === "rtl";
+		const isSecondaryRTL = this.layout === "grid" && this.orientation === "vertical" && this.direction === "rtl";
+		const isFlowRTL = this.layout === "stack" ? isPrimaryRTL : isSecondaryRTL;
+		const elementMap = this.buildElementMap(container);
+		let low = 0;
+		let high = items.length;
+		while (low < high) {
+			const mid = Math.floor((low + high) / 2);
+			const key = items[mid];
+			if (key == null) break;
+			const element = elementMap.get(String(key));
+			if (!element) break;
+			const rect = element.getBoundingClientRect();
+			const update = (isGreater) => {
+				if (isGreater) low = mid + 1;
+				else high = mid;
+			};
+			if (primary < this.getPrimaryStart(rect)) update(isPrimaryRTL);
+			else if (primary > this.getPrimaryEnd(rect)) update(!isPrimaryRTL);
+			else if (secondary < this.getSecondaryStart(rect)) update(isSecondaryRTL);
+			else if (secondary > this.getSecondaryEnd(rect)) update(!isSecondaryRTL);
+			else return this.resolveWithinItem(key, rect, flow, isFlowRTL, isValidDropTarget);
+		}
+		const key = items[Math.min(low, items.length - 1)];
+		if (key == null) return { type: "root" };
+		const rect = elementMap.get(String(key))?.getBoundingClientRect();
+		return {
+			dropPosition: (rect != null && (primary < this.getPrimaryStart(rect) || Math.abs(flow - this.getFlowStart(rect)) < Math.abs(flow - this.getFlowEnd(rect)))) === isFlowRTL ? "after" : "before",
+			key,
+			type: "item"
+		};
+	}
+	/**
+	* Which position within the item the pointer means.
+	*
+	* When dropping *on* the item is allowed, before/after only win within 5px of an edge — the
+	* body of the item stays a drop-on target. When it is not allowed, the item splits down the
+	* middle instead, so every pixel resolves to one side or the other.
+	*/
+	resolveWithinItem(key, rect, flow, isFlowRTL, isValidDropTarget) {
+		const target = {
+			dropPosition: "on",
+			key,
+			type: "item"
+		};
+		const before = isFlowRTL ? "after" : "before";
+		const after = isFlowRTL ? "before" : "after";
+		if (isValidDropTarget(target)) {
+			if (flow <= this.getFlowStart(rect) + 5 && isValidDropTarget({
+				...target,
+				dropPosition: "before"
+			})) return {
+				...target,
+				dropPosition: before
+			};
+			if (flow >= this.getFlowEnd(rect) - 5 && isValidDropTarget({
+				...target,
+				dropPosition: "after"
+			})) return {
+				...target,
+				dropPosition: after
+			};
+			return target;
+		}
+		const middle = this.getFlowStart(rect) + (this.getFlowEnd(rect) - this.getFlowStart(rect)) / 2;
+		if (flow <= middle && isValidDropTarget({
+			...target,
+			dropPosition: "before"
+		})) return {
+			...target,
+			dropPosition: before
+		};
+		if (flow >= middle && isValidDropTarget({
+			...target,
+			dropPosition: "after"
+		})) return {
+			...target,
+			dropPosition: after
+		};
+		return target;
+	}
+	/**
+	* Map each item key to the element currently rendering it.
+	*
+	* Scoped by `data-collection` when the container declares one, so a nested collection's rows
+	* are not mistaken for this one's. Both attributes are already emitted by `ListBoxItem` and
+	* `TableRow`.
+	*/
+	buildElementMap(container) {
+		const collectionId = container.dataset["collection"];
+		const selector = collectionId ? `[data-collection="${CSS.escape(collectionId)}"]` : "[data-key]";
+		const map = /* @__PURE__ */ new Map();
+		for (const element of container.querySelectorAll(selector)) if (element instanceof HTMLElement && element.dataset["key"] != null) map.set(element.dataset["key"], element);
+		return map;
+	}
+};
+//#endregion
+export { ListDropTargetDelegate };

package/dist/utils/dnd-state.d.ts

@@ -0,0 +1,52 @@
+import type { DropOperationMask } from "./dnd-constants";
+import type { DragKey, DropEffect } from "./dnd-types";
+import type { ShallowRef } from "vue";
+/**
+ * State shared by every collection taking part in the drag currently in flight.
+ *
+ * Ported from the module-level globals in React Aria's `dnd/utils.ts`, and deliberately **not**
+ * reactive. A drag is a single global gesture — there is exactly one at a time in a document —
+ * and the questions asked of it ("did this drag start in the collection I am dropping on?") are
+ * asked from inside event handlers, where the answer must be the one that is true *now* rather
+ * than the one a render happened to capture.
+ *
+ * The Vue shape differs from React's in one place: a collection is identified by a
+ * `ShallowRef<HTMLElement | null>` read through `.value`, where React uses a `RefObject` read
+ * through `.current`. That matches how every collection in this package already holds its own
+ * element (`shallowRef<HTMLElement | null>(null)`).
+ */
+export interface DnDState {
+    /** The collection the dragged items came from, if the drag started inside one. */
+    draggingCollectionRef?: ShallowRef<HTMLElement | null>;
+    /** Keys currently being dragged. Empty when the drag came from outside any collection. */
+    draggingKeys: Set<DragKey>;
+    /** The collection currently targeted for a drop, if any. */
+    dropCollectionRef?: ShallowRef<HTMLElement | null>;
+}
+export declare let globalDndState: DnDState;
+export declare const setDraggingCollectionRef: (ref: ShallowRef<HTMLElement | null>) => void;
+export declare const setDraggingKeys: (keys: Set<DragKey>) => void;
+export declare const setDropCollectionRef: (ref?: ShallowRef<HTMLElement | null>) => void;
+export declare const clearGlobalDnDState: () => void;
+export declare const setGlobalDnDState: (state: DnDState) => void;
+/**
+ * Whether the drag in flight started in the same collection it is now over.
+ *
+ * This is the question that separates a reorder from an insert, and it cannot be answered from
+ * the `DataTransfer` — a drag from another app and a drag from the list next door look identical
+ * on the wire. Takes an optional ref for the case where the drop collection has not registered
+ * itself globally yet, which happens on the very first `dragenter`.
+ */
+export declare const isInternalDropOperation: (ref?: ShallowRef<HTMLElement | null>) => boolean;
+/**
+ * The `dropEffect` the drop target settled on, read back after the drag ends.
+ *
+ * Separate from the state object above because it outlives it: `dragend` fires after the drop
+ * target has already torn its own state down, and the drag source still needs to know whether
+ * to delete the items it just handed over.
+ */
+export declare let globalDropEffect: DropEffect | undefined;
+export declare const setGlobalDropEffect: (dropEffect: DropEffect | undefined) => void;
+/** Operations the drag source said it would accept, as a `DROP_OPERATION` bitmask. */
+export declare let globalAllowedDropOperations: DropOperationMask;
+export declare const setGlobalAllowedDropOperations: (operations: DropOperationMask) => void;