@ixfx/components 0.8.7 → 0.8.9

package/dist/{tree-CozQj01a.js → tree-a14n9y7i.js}

@@ -3,22 +3,146 @@ import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrA
 import { t as themeFallbacks } from "./fallbacks-BcKGq-2F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, t as createTreeListSearchAdapter } from "./incr-search-C05WjbZh.js";
-import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-DuiwgN3l.js";
-import "./interaction-B9AAlsFO.js";
+import { t as ListNativeDragController } from "./list-native-drag-controller-DxD6Yjci.js";
+import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-BUoEKi5s.js";
+import "./interaction-BskmlA9t.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
 import { repeat } from "lit/directives/repeat.js";
-//#region src/common/tree-data-model.ts
+//#region src/common/tree-drop-apply.ts
 function findNode(root, key) {
 	if (root.item.key === key) return root;
-	if (!root.children) return void 0;
-	for (const child of root.children) {
+	for (const child of root.children ?? []) {
 		const found = findNode(child, key);
 		if (found) return found;
 	}
 }
+function findParent(root, key, parent = void 0) {
+	for (const child of root.children ?? []) {
+		if (child.item.key === key) return parent === void 0 ? root : parent;
+		const found = findParent(child, key, child);
+		if (found) return found;
+	}
+}
+/** True when `key` is `ancestorKey`, or a descendant of it. */
+function isSelfOrDescendant(root, ancestorKey, key) {
+	const ancestor = findNode(root, ancestorKey);
+	return ancestor !== void 0 && findNode(ancestor, key) !== void 0;
+}
+/** Remove every node whose key is in `keys` (with its whole subtree), in one pass. */
+function removeKeys(node, keys) {
+	if (!node.children) return node;
+	return {
+		...node,
+		children: node.children.filter((c) => !keys.has(c.item.key)).map((c) => removeKeys(c, keys))
+	};
+}
+function childrenOf(root, parentKey) {
+	if (parentKey === void 0) return root.children ?? [];
+	return findNode(root, parentKey)?.children ?? [];
+}
+/** Return a new root with `parentKey`'s children replaced (root itself when `parentKey` is undefined). */
+function withChildren(node, parentKey, children) {
+	if (parentKey === void 0) return {
+		...node,
+		children
+	};
+	if (node.item.key === parentKey) return {
+		...node,
+		children
+	};
+	if (!node.children) return node;
+	return {
+		...node,
+		children: node.children.map((c) => withChildren(c, parentKey, children))
+	};
+}
+function clamp$1(n, min, max) {
+	return Math.max(min, Math.min(max, n));
+}
+/**
+* Drop keys whose ancestor is also being dragged — only the top-most selected
+* nodes move; their subtrees travel with them. Preserves input order.
+*/
+function pruneDraggedDescendants(root, keys) {
+	const set = new Set(keys);
+	return keys.filter((key) => {
+		let parent = findParent(root, key);
+		while (parent) {
+			if (set.has(parent.item.key)) return false;
+			parent = findParent(root, parent.item.key);
+		}
+		return true;
+	});
+}
+/**
+* Framework-agnostic drop application. Given the current immutable `root` and a
+* resolved drop context, returns a **new** root with the drop applied, or the
+* unchanged `root` when the drop is invalid (dragged node into its own subtree,
+* missing reference, empty payload). Never throws, never mutates.
+*
+* The insertion point is re-derived from `target.referenceKey` + `target.position`
+* against the post-removal tree, so same-parent reorders are off-by-one-safe and
+* multi-node drops land as siblings in drag order. `target.index` is honoured only
+* for `position: 'inside'` (0 = first child, large = append).
+*/
+function applyTreeDrop(root, ctx) {
+	const { target, source } = ctx;
+	let nodes;
+	let removeSet = /* @__PURE__ */ new Set();
+	if (source === `internal`) {
+		const keys = pruneDraggedDescendants(root, [...ctx.draggedKeys]);
+		if (keys.length === 0) return root;
+		if (target.parentKey !== void 0) {
+			for (const key of keys) if (isSelfOrDescendant(root, key, target.parentKey)) return root;
+		}
+		if (target.position !== `inside`) {
+			for (const key of keys) if (isSelfOrDescendant(root, key, target.referenceKey)) return root;
+		}
+		const resolved = keys.map((k) => findNode(root, k));
+		if (resolved.includes(void 0)) return root;
+		nodes = resolved;
+		removeSet = new Set(keys);
+	} else {
+		nodes = (ctx.dragged ?? []).map((n) => ({ ...n }));
+		if (nodes.length === 0) return root;
+	}
+	const afterRemoval = removeSet.size > 0 ? removeKeys(root, removeSet) : root;
+	let parentKey;
+	let index;
+	if (target.position === `inside`) {
+		if (findNode(afterRemoval, target.referenceKey) === void 0) return root;
+		parentKey = target.referenceKey;
+		const kids = childrenOf(afterRemoval, parentKey);
+		index = clamp$1(target.index, 0, kids.length);
+	} else {
+		parentKey = findParent(afterRemoval, target.referenceKey)?.item.key;
+		const refIdx = childrenOf(afterRemoval, parentKey).findIndex((c) => c.item.key === target.referenceKey);
+		if (refIdx < 0) return root;
+		index = target.position === `before` ? refIdx : refIdx + 1;
+	}
+	const kids = [...childrenOf(afterRemoval, parentKey)];
+	const next = [
+		...kids.slice(0, index),
+		...nodes,
+		...kids.slice(index)
+	];
+	return withChildren(afterRemoval, parentKey, next);
+}
+/** Build a synthetic `TreeDropTarget` for programmatic moves (see `TreeDataModel`). */
+function dropTargetFor(referenceKey, position, index = position === `inside` ? Number.MAX_SAFE_INTEGER : 0) {
+	return {
+		referenceKey,
+		position,
+		index,
+		parentKey: position === `inside` ? referenceKey : void 0,
+		depth: 0
+	};
+}
+//#endregion
+//#region src/common/tree-data-model.ts
 /** Return a new root with the node at `key` replaced by `replacer(node)`. */
 function mapNode(root, key, replacer) {
 	if (root.item.key === key) return replacer(root);
@@ -43,11 +167,23 @@ function removeNodeFrom(root, key) {
 		children: root.children.filter((c) => c.item.key !== key).map((c) => removeNodeFrom(c, key))
 	};
 }
-/** Return a new root with the node at `key` moved to become a child of `newParentKey`. */
-function moveNodeTo(root, key, newParentKey) {
-	const target = findNode(root, key);
-	if (!target) return root;
-	return addChildTo(removeNodeFrom(root, key), newParentKey, target);
+/** Return a new root with `newChild` inserted at `index` among the children of `parentKey`. */
+function insertChildAt(root, parentKey, newChild, index) {
+	return mapNode(root, parentKey, (parent) => {
+		const children = parent.children ?? [];
+		const clampedIndex = Math.max(0, Math.min(index, children.length));
+		return {
+			item: parent.item,
+			children: [
+				...children.slice(0, clampedIndex),
+				newChild,
+				...children.slice(clampedIndex)
+			]
+		};
+	});
+}
+function getRootChildren(root) {
+	return root.children ?? [];
 }
 /**
 * Manages tree data for tree-like components.
@@ -175,10 +311,80 @@ var TreeDataModel = class {
 	}
 	/**
 	* Moves the node with the given key to become a child of `newParentKey`.
+	* When `index` is provided, inserts at that position; otherwise appends.
+	* Returns the new root (connected components are notified automatically).
+	*/
+	moveNode(key, newParentKey, index) {
+		const next = applyTreeDrop(this.#root, {
+			source: `internal`,
+			draggedKeys: [key],
+			target: dropTargetFor(newParentKey, `inside`, index ?? Number.MAX_SAFE_INTEGER)
+		});
+		if (next !== this.#root) {
+			this.#root = next;
+			this.#notify({
+				type: `root`,
+				root: this.#root
+			});
+		}
+		return this.#root;
+	}
+	/**
+	* Moves the node with the given key to become a sibling of `referenceKey`,
+	* positioned `before` or `after` it. A no-op (returns the unchanged root) when
+	* `key` is `referenceKey`, an ancestor of it, or either is missing.
+	* Returns the new root (connected components are notified automatically).
+	*/
+	moveNodeRelative(key, referenceKey, position) {
+		const next = applyTreeDrop(this.#root, {
+			source: `internal`,
+			draggedKeys: [key],
+			target: dropTargetFor(referenceKey, position)
+		});
+		if (next !== this.#root) {
+			this.#root = next;
+			this.#notify({
+				type: `root`,
+				root: this.#root
+			});
+		}
+		return this.#root;
+	}
+	/**
+	* Applies a resolved drop (from `ixfx-tree-list`'s `tree-drop` event or a
+	* hand-built context) to the current root. No-op when the drop is invalid.
+	* Returns the new root (connected components are notified automatically).
+	*/
+	applyDrop(ctx) {
+		const next = applyTreeDrop(this.#root, ctx);
+		if (next !== this.#root) {
+			this.#root = next;
+			this.#notify({
+				type: `root`,
+				root: this.#root
+			});
+		}
+		return this.#root;
+	}
+	/**
+	* Inserts `node` as a child of `parentKey` (or at the root level when `parentKey` is undefined).
+	* When `index` is provided, inserts at that position; otherwise appends.
 	* Returns the new root (connected components are notified automatically).
 	*/
-	moveNode(key, newParentKey) {
-		this.#root = moveNodeTo(this.#root, key, newParentKey);
+	insertNode(parentKey, node, index) {
+		if (parentKey === void 0) {
+			const children = getRootChildren(this.#root);
+			const clampedIndex = Math.max(0, Math.min(index ?? children.length, children.length));
+			this.#root = {
+				...this.#root,
+				children: [
+					...children.slice(0, clampedIndex),
+					node,
+					...children.slice(clampedIndex)
+				]
+			};
+		} else if (index !== void 0) this.#root = insertChildAt(this.#root, parentKey, node, index);
+		else this.#root = addChildTo(this.#root, parentKey, node);
 		this.#notify({
 			type: `root`,
 			root: this.#root
@@ -200,6 +406,360 @@ var TreeDataModel = class {
 	}
 };
 //#endregion
+//#region src/tree/tree-drag-registry.ts
+const TREE_DRAG_MIME = `application/x-ixfx-tree`;
+const registry = /* @__PURE__ */ new Map();
+const weakRefs = /* @__PURE__ */ new Map();
+/**
+* The source id of the drag currently in flight, if any. There is only ever one
+* native drag at a time, so a drop target can resolve the dragged nodes during
+* `dragover` — when `DataTransfer.getData()` is unreadable (protected mode) — by
+* looking this up in the registry.
+*/
+let currentSourceId;
+let sourceIdCounter = 0;
+function treeDragGenerateSourceId() {
+	return `tree-drag-${++sourceIdCounter}-${Date.now()}`;
+}
+function treeDragRegister(sourceId, element, nodes, keys) {
+	registry.set(sourceId, {
+		sourceId,
+		nodes,
+		keys
+	});
+	weakRefs.set(sourceId, new WeakRef(element));
+	currentSourceId = sourceId;
+}
+function treeDragUnregister(sourceId) {
+	registry.delete(sourceId);
+	weakRefs.delete(sourceId);
+	if (currentSourceId === sourceId) currentSourceId = void 0;
+}
+/** The in-flight drag's `{ keys, nodes, element }`, or `undefined` when nothing is dragging. */
+function treeDragCurrent() {
+	if (currentSourceId === void 0) return void 0;
+	const entry = registry.get(currentSourceId);
+	if (!entry) return void 0;
+	return {
+		sourceId: currentSourceId,
+		keys: entry.keys,
+		nodes: entry.nodes,
+		element: weakRefs.get(currentSourceId)?.deref()
+	};
+}
+//#endregion
+//#region src/tree/tree-drop-controller.ts
+const EDGE_ZONE_PX = 24;
+const MAX_SCROLL_SPEED = 16;
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(max, value));
+}
+var TreeDropController = class {
+	#host;
+	#config;
+	#active = false;
+	#current;
+	#source = `internal`;
+	#dragKeys = [];
+	#dragNodes = [];
+	#expandTimer;
+	#expandPendingKey;
+	#scrollRaf = 0;
+	#pointerX = 0;
+	#pointerY = 0;
+	#boundContainer;
+	constructor(host, config) {
+		this.#host = host;
+		this.#config = config;
+		host.addController(this);
+	}
+	/** A drag is currently over this tree. */
+	get isDragging() {
+		return this.#active;
+	}
+	/** A drag is over this tree but the current position is not a valid drop. */
+	get isRejected() {
+		return this.#active && this.#current === void 0;
+	}
+	get dropState() {
+		return this.#current;
+	}
+	hostConnected() {
+		this.#bind();
+	}
+	/** Bind once the shadow `#container` exists (it does not yet at `hostConnected`). */
+	hostUpdated() {
+		this.#bind();
+	}
+	#bind() {
+		const container = this.#config.getScrollContainer();
+		if (!container || container === this.#boundContainer) return;
+		this.#unbind();
+		this.#boundContainer = container;
+		container.addEventListener(`dragenter`, this.#onDragEnter);
+		container.addEventListener(`dragover`, this.#onDragOver);
+		container.addEventListener(`dragleave`, this.#onDragLeave);
+		container.addEventListener(`drop`, this.#onDrop);
+	}
+	#unbind() {
+		const c = this.#boundContainer;
+		if (!c) return;
+		c.removeEventListener(`dragenter`, this.#onDragEnter);
+		c.removeEventListener(`dragover`, this.#onDragOver);
+		c.removeEventListener(`dragleave`, this.#onDragLeave);
+		c.removeEventListener(`drop`, this.#onDrop);
+		this.#boundContainer = void 0;
+	}
+	hostDisconnected() {
+		this.#unbind();
+		this.#clearExpand();
+		this.#stopScroll();
+		this.#active = false;
+		this.#current = void 0;
+	}
+	#onDragEnter = (event) => {
+		if (this.#config.getDndMode() === `none` || !event.dataTransfer) return;
+		if (this.#config.resolveDrag(event.dataTransfer, `hover`) === void 0) return;
+		event.preventDefault();
+		if (!this.#active) {
+			this.#active = true;
+			this.#config.onActiveChange(true);
+		}
+	};
+	#onDragOver = (event) => {
+		if (this.#config.getDndMode() === `none` || !event.dataTransfer) return;
+		this.#pointerX = event.clientX;
+		this.#pointerY = event.clientY;
+		const drag = this.#config.resolveDrag(event.dataTransfer, `hover`);
+		if (!drag) {
+			this.#reject(event);
+			return;
+		}
+		if (!this.#active) {
+			this.#active = true;
+			this.#config.onActiveChange(true);
+		}
+		this.#source = drag.source;
+		this.#dragKeys = drag.keys;
+		this.#dragNodes = drag.nodes;
+		const rows = this.#config.getVisibleRows();
+		this.#handleExpandHover(this.#rowAtPointer(rows, event.clientY));
+		this.#kickScroll();
+		const target = this.#resolveIntent(event, rows, drag.source);
+		if (!target) {
+			this.#reject(event, false);
+			return;
+		}
+		const ctx = {
+			source: drag.source,
+			dragged: drag.nodes.length > 0 ? drag.nodes : void 0,
+			draggedKeys: drag.keys,
+			target,
+			dataTransfer: event.dataTransfer
+		};
+		if (!this.#config.vet(ctx)) {
+			this.#reject(event, false);
+			return;
+		}
+		event.preventDefault();
+		event.dataTransfer.dropEffect = drag.source === `internal` ? `move` : `copy`;
+		this.#setDropState(target);
+	};
+	/** Not a valid drop here: keep the drag active for feedback but accept nothing. */
+	#reject(event, clearHover = true) {
+		if (event.dataTransfer) event.dataTransfer.dropEffect = `none`;
+		this.#setDropState(void 0);
+		if (clearHover) this.#clearExpand();
+	}
+	#onDragLeave = (event) => {
+		const container = this.#config.getScrollContainer();
+		const related = event.relatedTarget;
+		if (container && related && container.contains(related)) return;
+		this.#endHover();
+	};
+	#onDrop = (event) => {
+		if (!event.dataTransfer) {
+			this.#endHover();
+			return;
+		}
+		event.preventDefault();
+		this.#stopScroll();
+		this.#clearExpand();
+		const finish = (dropped) => {
+			this.#current = void 0;
+			this.#active = false;
+			this.#config.onDropStateChange(void 0);
+			this.#config.onActiveChange(false);
+			this.#config.onDragEnd(dropped);
+		};
+		if (this.#config.getDndMode() === `none`) {
+			finish(false);
+			return;
+		}
+		const drag = this.#config.resolveDrag(event.dataTransfer, `drop`);
+		if (!drag) {
+			finish(false);
+			return;
+		}
+		this.#dragKeys = drag.keys;
+		this.#dragNodes = drag.nodes;
+		const target = this.#resolveIntent(event, this.#config.getVisibleRows(), drag.source);
+		if (!target) {
+			finish(false);
+			return;
+		}
+		const ctx = {
+			source: drag.source,
+			dragged: drag.nodes.length > 0 ? drag.nodes : void 0,
+			draggedKeys: drag.keys,
+			target,
+			dataTransfer: event.dataTransfer
+		};
+		if (!this.#config.vet(ctx)) {
+			finish(false);
+			return;
+		}
+		const detail = {
+			...ctx,
+			external: drag.source === `external` ? drag.nodes : void 0
+		};
+		finish(this.#config.commitDrop(detail));
+	};
+	#endHover() {
+		this.#clearExpand();
+		this.#stopScroll();
+		if (this.#current !== void 0) {
+			this.#current = void 0;
+			this.#config.onDropStateChange(void 0);
+		}
+		if (this.#active) {
+			this.#active = false;
+			this.#config.onActiveChange(false);
+		}
+	}
+	#rowAtPointer(rows, clientY) {
+		if (rows.length === 0) return void 0;
+		if (clientY < rows[0].rect.top) return rows[0];
+		if (clientY > rows[rows.length - 1].rect.bottom) return rows[rows.length - 1];
+		return rows.find((r) => clientY >= r.rect.top && clientY <= r.rect.bottom) ?? rows[rows.length - 1];
+	}
+	#parentRow(rows, index) {
+		const target = rows[index];
+		for (let i = index - 1; i >= 0; i--) if (rows[i].depth === target.depth - 1) return rows[i];
+	}
+	#resolveIntent(event, rows, source) {
+		if (rows.length === 0) return void 0;
+		const row = this.#rowAtPointer(rows, event.clientY);
+		if (!row) return void 0;
+		const rowIndex = rows.indexOf(row);
+		const f = clamp((event.clientY - row.rect.top) / row.rect.height, 0, 1);
+		let position = f < .25 ? `before` : f > .75 ? `after` : `inside`;
+		const isLeaf = row.node.item.isLeaf === true;
+		if (position === `inside` && isLeaf) position = `after`;
+		let insideFromExpandedAfter = false;
+		if (position === `after` && !isLeaf && this.#config.isExpanded(row.key)) {
+			position = `inside`;
+			insideFromExpandedAfter = true;
+		}
+		let parentKey;
+		let referenceKey;
+		let depth;
+		let index;
+		if (position === `inside`) {
+			parentKey = row.key;
+			referenceKey = row.key;
+			depth = row.depth + 1;
+			index = insideFromExpandedAfter ? 0 : row.node.children?.length ?? 0;
+		} else {
+			const indent = this.#config.getIndentPx() || 1;
+			const treeLeft = rows[0].rect.left;
+			const effDepth = clamp(Math.round((event.clientX - treeLeft) / indent), 0, row.depth);
+			let anchorIndex = rowIndex;
+			for (let up = row.depth - effDepth; up > 0; up--) {
+				const parent = this.#parentRow(rows, anchorIndex);
+				if (!parent) break;
+				anchorIndex = rows.indexOf(parent);
+			}
+			const anchor = rows[anchorIndex];
+			referenceKey = anchor.key;
+			depth = anchor.depth;
+			const parent = this.#parentRow(rows, anchorIndex);
+			parentKey = parent?.key;
+			const refIdx = (parent ? parent.node.children ?? [] : rows.filter((r) => r.depth === 0).map((r) => r.node)).findIndex((n) => n.item.key === anchor.key);
+			index = (refIdx < 0 ? 0 : refIdx) + (position === `after` ? 1 : 0);
+		}
+		if (source === `internal`) {
+			for (const key of this.#dragKeys) {
+				if (key === parentKey || key === referenceKey) return void 0;
+				if (parentKey !== void 0 && this.#config.isSelfOrDescendant(key, parentKey)) return void 0;
+				if (position !== `inside` && this.#config.isSelfOrDescendant(key, referenceKey)) return void 0;
+			}
+			if (this.#dragKeys.length > 0 && !this.#config.isReorderAllowed()) {
+				if (!this.#dragKeys.some((k) => this.#config.getParentKey(k) !== parentKey)) return void 0;
+			}
+		}
+		return {
+			parentKey,
+			index,
+			referenceKey,
+			position,
+			depth
+		};
+	}
+	#handleExpandHover(row) {
+		if (!row || row.node.item.isLeaf === true || this.#config.isExpanded(row.key)) {
+			this.#clearExpand();
+			return;
+		}
+		if (row.key === this.#expandPendingKey) return;
+		this.#clearExpand();
+		const key = this.#expandPendingKey = row.key;
+		this.#expandTimer = setTimeout(() => {
+			this.#expandTimer = void 0;
+			if (this.#expandPendingKey === key) {
+				this.#expandPendingKey = void 0;
+				this.#config.expandKey(key);
+			}
+		}, Math.max(0, this.#config.getExpandHoverMs()));
+	}
+	#clearExpand() {
+		if (this.#expandTimer !== void 0) {
+			clearTimeout(this.#expandTimer);
+			this.#expandTimer = void 0;
+		}
+		this.#expandPendingKey = void 0;
+	}
+	#kickScroll() {
+		if (this.#scrollRaf === 0) this.#scrollRaf = requestAnimationFrame(this.#scrollTick);
+	}
+	#scrollTick = () => {
+		this.#scrollRaf = 0;
+		if (!this.#active) return;
+		const container = this.#config.getScrollContainer();
+		if (!container) return;
+		const rect = container.getBoundingClientRect();
+		const y = this.#pointerY - rect.top;
+		let dy = 0;
+		if (y < EDGE_ZONE_PX) dy = -Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, y) / EDGE_ZONE_PX));
+		else if (y > rect.height - EDGE_ZONE_PX) dy = Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, rect.height - y) / EDGE_ZONE_PX));
+		if (dy !== 0 && this.#pointerX >= rect.left && this.#pointerX <= rect.right) {
+			container.scrollTop += dy;
+			this.#kickScroll();
+		}
+	};
+	#stopScroll() {
+		if (this.#scrollRaf !== 0) {
+			cancelAnimationFrame(this.#scrollRaf);
+			this.#scrollRaf = 0;
+		}
+	}
+	#setDropState(state) {
+		const unchanged = state === void 0 ? this.#current === void 0 : state.referenceKey === this.#current?.referenceKey && state.position === this.#current?.position && state.depth === this.#current?.depth && state.index === this.#current?.index;
+		this.#current = state;
+		if (!unchanged || this.#active) this.#config.onDropStateChange(state);
+	}
+};
+//#endregion
 //#region src/tree/tree-base.ts
 /** Above this many rows entering / leaving at once, skip the animation entirely. */
 const MAX_ANIMATED_ROWS = 50;
@@ -212,6 +772,10 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this._selectedNodes = /* @__PURE__ */ new Set();
 		this.disableKeyboardNavigation = false;
 		this.registry = void 0;
+		this.itemDnd = `none`;
+		this.dndExpandHoverMs = 500;
+		this.reorderable = true;
+		this.applyInternalDrop = true;
 		this._expandedKeys = /* @__PURE__ */ new Set();
 		this.tickled = new TickledController(this, {
 			getItems: () => {
@@ -220,6 +784,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 					enabled: true
 				}));
 			},
+			hoverDisabled: () => this.#drop?.isDragging === true || this.#nativeDrag?.isDragging === true,
 			onStateChange: () => {
 				this.setAttribute(`data-input-mode`, this.tickled.inputMode);
 			}
@@ -234,8 +799,14 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.#lastNodeByKey = /* @__PURE__ */ new Map();
 		this.#enteringKeys = /* @__PURE__ */ new Set();
 		this.#leaving = /* @__PURE__ */ new Map();
-		this.#leavingAnimating = /* @__PURE__ */ new Set();
+		this.#leavingAnimations = /* @__PURE__ */ new Map();
 		this.#treeAnimReady = false;
+		this.#dragSourceId = ``;
+		this.#nativeDragKeys = /* @__PURE__ */ new Set();
+		this.#internalDropHandled = false;
+		this.#onContainerScroll = () => {
+			this.#rowsCache = void 0;
+		};
 		this.#onKeyDown = (event) => {
 			if (this.search.isOpen) return;
 			const nodes = this.#getAllNodes();
@@ -387,8 +958,40 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	#lastNodeByKey;
 	#enteringKeys;
 	#leaving;
-	#leavingAnimating;
+	#leavingAnimations;
 	#treeAnimReady;
+	#dragSourceId;
+	#postDragSuppressTimer;
+	#dropState;
+	#drop;
+	#nativeDrag;
+	/** Keys of the nodes currently being dragged out (for `.dragging` styling). */
+	#nativeDragKeys;
+	/** Set by `commitDrop` for a same-tree internal drop, read by the native `onEnd` to avoid a duplicate `tree-drag-end`. */
+	#internalDropHandled;
+	/** Per-drag cache of measured rows; invalidated on scroll / update. */
+	#rowsCache;
+	#onContainerScroll;
+	get nativeDrag() {
+		return this.#nativeDrag;
+	}
+	get dropState() {
+		return this.#dropState;
+	}
+	/** Keys of the nodes currently being dragged out of this tree. */
+	get nativeDragKeys() {
+		return this.#nativeDragKeys;
+	}
+	#cancelLeavingAnimation(key) {
+		this.#leavingAnimations.get(key)?.cancel();
+		this.#leavingAnimations.delete(key);
+	}
+	#cancelAllLeavingAnimations() {
+		for (const animation of this.#leavingAnimations.values()) try {
+			animation.cancel();
+		} catch {}
+		this.#leavingAnimations.clear();
+	}
 	willUpdate(changedProps) {
 		super.willUpdate(changedProps);
 		this.#diffVisibleNodes();
@@ -407,12 +1010,12 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			}
 		}
 		for (const key of [...this.#leaving.keys()]) if (nowKeys.has(key)) {
+			this.#cancelLeavingAnimation(key);
 			this.#leaving.delete(key);
-			this.#leavingAnimating.delete(key);
 		}
 		if (this.#leaving.size > MAX_ANIMATED_ROWS) {
+			this.#cancelAllLeavingAnimations();
 			this.#leaving.clear();
-			this.#leavingAnimating.clear();
 		}
 	}
 	/** True while `node` is a fading ghost row (removed / collapsed, still animating out). */
@@ -449,18 +1052,38 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		if (this.#enteringKeys.size > 0) {
 			for (const el of this.renderRoot.querySelectorAll(`.item`)) {
 				const key = el.dataset.key;
-				if (key !== void 0 && this.#enteringKeys.has(key)) animateListItemIn(el);
+				if (key === void 0 || !this.#enteringKeys.has(key)) continue;
+				if (this.#leavingAnimations.has(key)) this.#cancelLeavingAnimation(key);
+				else for (const animation of el.getAnimations()) animation.cancel();
+				animateListItemIn(el);
 			}
 			this.#enteringKeys.clear();
 		}
 		if (this.#leaving.size > 0) for (const el of this.renderRoot.querySelectorAll(`.item.leaving`)) {
 			const key = el.dataset.key;
-			if (key === void 0 || this.#leavingAnimating.has(key)) continue;
-			this.#leavingAnimating.add(key);
-			animateListItemOut(el).then(() => {
+			if (key === void 0 || this.#leavingAnimations.has(key)) continue;
+			const result = animateListItemOut(el);
+			const animation = result.animation;
+			if (!animation) {
+				result.then(() => {
+					if (!this.#leaving.has(key)) return;
+					this.#leaving.delete(key);
+					this.requestUpdate();
+				});
+				continue;
+			}
+			this.#cancelLeavingAnimation(key);
+			this.#leavingAnimations.set(key, animation);
+			result.then(() => {
+				if (this.#leavingAnimations.get(key) !== animation) return;
+				this.#leavingAnimations.delete(key);
 				this.#leaving.delete(key);
-				this.#leavingAnimating.delete(key);
 				this.requestUpdate();
+				this.updateComplete.then(() => {
+					try {
+						animation.cancel();
+					} catch {}
+				});
 			});
 		}
 		const visible = this.root ? this.#getAllNodes() : [];
@@ -470,12 +1093,16 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.#treeAnimReady = true;
 	}
 	updated(changedProps) {
+		this.#rowsCache = void 0;
 		if (changedProps.has(`root`) && this.root) {
 			this.#abortPending();
 			this._expandedKeys.clear();
 			this.#clearSelectionInternal();
 			this.tickled.clearTickled();
 			this._focusedDepth = 0;
+			this.#cancelAllLeavingAnimations();
+			this.#leaving.clear();
+			this.#enteringKeys.clear();
 		}
 		if (changedProps.has(`model`)) {
 			this.#modelUnsubscribe?.();
@@ -523,13 +1150,307 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		});
 		this.registry = registry;
 		this.#syncSearchCommands();
+		this.#initDnd();
+	}
+	#initDnd() {
+		this.#dragSourceId = treeDragGenerateSourceId();
+		this.#nativeDrag = new ListNativeDragController(this, {
+			source: `tree-list`,
+			isEnabled: () => this.itemDnd !== `none` && this.#anyRowDraggable(),
+			resolveEventToKey: (target) => {
+				if (!(target instanceof Element)) return void 0;
+				return target.closest(`li[data-key]`)?.getAttribute(`data-key`) ?? void 0;
+			},
+			prepareSelection: (originKey) => {
+				const allNodes = this.#getAllNodes();
+				const originEntry = allNodes.find((n) => n.node.item.key === originKey);
+				if (!originEntry) return void 0;
+				const selectedNodes = new Set(this._selectedNodes);
+				if (!selectedNodes.has(originEntry.node)) selectedNodes.clear();
+				selectedNodes.add(originEntry.node);
+				const orderedKeys = allNodes.filter((n) => selectedNodes.has(n.node)).map((n) => n.node.item.key);
+				const topKeys = new Set(this.root ? pruneDraggedDescendants(this.root, orderedKeys) : orderedKeys);
+				const selected = allNodes.filter((n) => topKeys.has(n.node.item.key)).map((n, i) => ({
+					key: n.node.item.key,
+					index: i,
+					item: n.node,
+					element: this.shadowRoot?.querySelector(`li[data-key="${CSS.escape(n.node.item.key)}"]`) ?? void 0
+				}));
+				const origin = selected.find((e) => e.key === originKey) ?? {
+					key: originKey,
+					index: 0,
+					item: originEntry.node,
+					element: void 0
+				};
+				if (!selected.some((e) => e.key === origin.key)) selected.unshift(origin);
+				return {
+					origin,
+					selected
+				};
+			},
+			getMetrics: () => ({ rowHeight: this.#getItemHeight() }),
+			getRenderer: () => this.dragPreviewRenderer,
+			dispatch: (detail) => {
+				const keys = detail.selected.map((e) => e.key);
+				const nodes = detail.selected.map((e) => e.item);
+				const evt = new CustomEvent(`list-native-drag-start`, {
+					detail,
+					bubbles: true,
+					composed: true,
+					cancelable: true
+				});
+				const notCancelled = this.dispatchEvent(evt);
+				if (notCancelled) {
+					this.#nativeDragKeys = new Set(keys);
+					this.#internalDropHandled = false;
+					if (this.itemDnd === `internal` || this.itemDnd === `both`) treeDragRegister(this.#dragSourceId, this, nodes, keys);
+					this.dispatchEvent(new CustomEvent(`tree-drag-start`, {
+						detail: {
+							nodes,
+							keys
+						},
+						bubbles: true,
+						composed: true
+					}));
+				}
+				return notCancelled;
+			},
+			writeDataTransfer: (dataTransfer, detail) => {
+				if (this.itemDnd !== `internal` && this.itemDnd !== `both`) return;
+				const keys = detail.selected.map((e) => e.key);
+				const nodes = detail.selected.map((e) => e.item);
+				try {
+					dataTransfer.setData(TREE_DRAG_MIME, JSON.stringify({
+						sourceId: this.#dragSourceId,
+						keys,
+						nodes
+					}));
+					dataTransfer.setData(`text/plain`, nodes.map((n) => n.item.label).join(`\n`));
+				} catch {}
+			},
+			onActiveChange: (active) => {
+				this.toggleAttribute(`data-native-dragging`, active);
+				if (!active) this.#nativeDragKeys = /* @__PURE__ */ new Set();
+				this.requestUpdate();
+			},
+			onEnd: () => {
+				treeDragUnregister(this.#dragSourceId);
+				this.#nativeDragKeys = /* @__PURE__ */ new Set();
+				this.#postDragSuppressTimer = setTimeout(() => {
+					this.#postDragSuppressTimer = void 0;
+				}, 150);
+				if (!this.#internalDropHandled) this.dispatchEvent(new CustomEvent(`tree-drag-end`, {
+					detail: { dropped: false },
+					bubbles: true,
+					composed: true
+				}));
+				this.#internalDropHandled = false;
+			}
+		});
+		this.#drop = new TreeDropController(this, {
+			getDndMode: () => this.itemDnd,
+			getExpandHoverMs: () => this.dndExpandHoverMs,
+			getVisibleRows: () => this.#getVisibleRows(),
+			getIndentPx: () => this.#getIndentPx(),
+			getScrollContainer: () => this.#container(),
+			isSelfOrDescendant: (ancestorKey, key) => this.#isSelfOrDescendant(ancestorKey, key),
+			isExpanded: (key) => this._expandedKeys.has(key),
+			isReorderAllowed: () => this.reorderable,
+			getParentKey: (key) => this.#findParentByKey(key)?.item.key,
+			resolveDrag: (dataTransfer, phase) => this.#resolveDrag(dataTransfer, phase),
+			vet: (ctx) => {
+				if (this.canDrop && !this.canDrop(ctx)) return false;
+				const evt = new CustomEvent(`tree-drag-over`, {
+					detail: ctx,
+					bubbles: true,
+					composed: true,
+					cancelable: true
+				});
+				return this.dispatchEvent(evt);
+			},
+			expandKey: (key) => this.#springLoadExpand(key),
+			onDropStateChange: (state) => {
+				this.#dropState = state;
+				this.toggleAttribute(`data-drop-rejected`, this.#drop.isDragging && state === void 0);
+				this.requestUpdate();
+			},
+			onActiveChange: (active) => {
+				if (active) {
+					this.#rowsCache = void 0;
+					this.#container()?.addEventListener(`scroll`, this.#onContainerScroll, { passive: true });
+				} else {
+					this.#container()?.removeEventListener(`scroll`, this.#onContainerScroll);
+					this.#rowsCache = void 0;
+					this.toggleAttribute(`data-drop-rejected`, false);
+				}
+				this.requestUpdate();
+			},
+			commitDrop: (detail) => {
+				if (!this.dispatchEvent(new CustomEvent(`tree-drop`, {
+					detail,
+					bubbles: true,
+					composed: true,
+					cancelable: true
+				}))) return false;
+				if (this.applyInternalDrop && detail.source === `internal` && this.model) this.model.applyDrop({
+					source: `internal`,
+					draggedKeys: detail.draggedKeys,
+					target: detail.target
+				});
+				this.#internalDropHandled = true;
+				return true;
+			},
+			onDragEnd: (dropped) => {
+				this.#dropState = void 0;
+				this.toggleAttribute(`data-drop-rejected`, false);
+				this.requestUpdate();
+				this.dispatchEvent(new CustomEvent(`tree-drag-end`, {
+					detail: { dropped },
+					bubbles: true,
+					composed: true
+				}));
+			}
+		});
+	}
+	#container() {
+		return this.shadowRoot?.querySelector(`#container`) ?? void 0;
+	}
+	#getIndentPx() {
+		const parsed = Number.parseInt(getComputedStyle(this).getPropertyValue(`--tree-indent`), 10);
+		return Number.isNaN(parsed) ? 20 : parsed;
+	}
+	#getItemHeight() {
+		const parsed = Number.parseInt(getComputedStyle(this).getPropertyValue(`--tree-item-height`), 10);
+		return Number.isNaN(parsed) ? 30 : parsed;
+	}
+	/** Measured rows, cached for the duration of a drag and invalidated on scroll / update. */
+	#getVisibleRows() {
+		if (this.#rowsCache) return this.#rowsCache;
+		const rows = [];
+		for (const { node, depth } of this.#getAllNodes()) {
+			const li = this.shadowRoot?.querySelector(`li[data-key="${CSS.escape(node.item.key)}"]`);
+			if (li) rows.push({
+				key: node.item.key,
+				node,
+				depth,
+				rect: li.getBoundingClientRect()
+			});
+		}
+		this.#rowsCache = rows;
+		return rows;
+	}
+	/** Route spring-load through the real expand path so lazy children load and `expand` fires with the right depth. */
+	#springLoadExpand(key) {
+		if (this._expandedKeys.has(key)) return;
+		const entry = this.#getAllNodes().find((n) => n.node.item.key === key);
+		if (!entry || entry.node.item.isLeaf === true) return;
+		this.#toggleExpand(entry.node, entry.depth);
+		this.#rowsCache = void 0;
+		this.requestUpdate();
+	}
+	#isSelfOrDescendant(ancestorKey, key) {
+		if (ancestorKey === key) return true;
+		let node = this.#getAllNodes().find((n) => n.node.item.key === key)?.node;
+		let parent = node ? this.#findParentByKey(node.item.key) : void 0;
+		while (parent) {
+			if (parent.item.key === ancestorKey) return true;
+			node = parent;
+			parent = this.#findParentByKey(node.item.key);
+		}
+		return false;
+	}
+	#findParentByKey(key) {
+		for (const { node } of this.#getAllNodes()) if (node.children?.some((c) => c.item.key === key)) return node;
+	}
+	/**
+	* Decide whether a DataTransfer is acceptable and resolve the dragged set.
+	* During `hover` the DataTransfer is read-protected, so an internal drag is
+	* recovered from the module-level drag registry (there is only one at a time).
+	*/
+	#resolveDrag(dataTransfer, phase) {
+		const mode = this.itemDnd;
+		if (mode === `none`) return void 0;
+		const canInternal = mode === `internal` || mode === `both`;
+		const canExternal = mode === `external` || mode === `both`;
+		let types = [];
+		try {
+			types = Array.from(dataTransfer.types);
+		} catch {}
+		const current = treeDragCurrent();
+		const looksInternal = types.includes(TREE_DRAG_MIME) || current !== void 0;
+		if (canInternal && looksInternal) {
+			if (current && current.keys.length > 0) {
+				const keys = this.root ? pruneDraggedDescendants(this.root, current.keys) : current.keys;
+				return {
+					source: `internal`,
+					keys,
+					nodes: keys.map((k) => this.#getAllNodes().find((n) => n.node.item.key === k)?.node).filter((n) => n !== void 0)
+				};
+			}
+			if (phase === `drop`) try {
+				const raw = dataTransfer.getData(TREE_DRAG_MIME);
+				if (raw) {
+					const payload = JSON.parse(raw);
+					return {
+						source: `internal`,
+						keys: payload.keys ?? [],
+						nodes: payload.nodes ?? []
+					};
+				}
+			} catch {}
+			return {
+				source: `internal`,
+				keys: [],
+				nodes: []
+			};
+		}
+		if (canExternal && !looksInternal) {
+			if (this.acceptDropTypes !== void 0) {
+				const accepted = this.acceptDropTypes.trim().split(/\s+/).filter(Boolean);
+				const present = Array.from(dataTransfer.types);
+				if (accepted.length > 0 && !accepted.some((t) => present.includes(t))) return void 0;
+			}
+			if (phase === `drop`) {
+				const nodes = this.parseExternalDrop?.(dataTransfer);
+				if (!nodes || nodes.length === 0) return void 0;
+				return {
+					source: `external`,
+					keys: nodes.map((n) => n.item.key),
+					nodes
+				};
+			}
+			return this.parseExternalDrop ? {
+				source: `external`,
+				keys: [],
+				nodes: []
+			} : void 0;
+		}
+	}
+	#anyRowDraggable() {
+		if (this.itemDnd === `none`) return false;
+		const allNodes = this.#getAllNodes();
+		if (allNodes.length === 0) return false;
+		if (!this.canDrag) return true;
+		return allNodes.some(({ node }) => this.canDrag({
+			nodes: [node],
+			keys: [node.item.key]
+		}));
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this.#cancelAllLeavingAnimations();
+		this.#leaving.clear();
+		this.#enteringKeys.clear();
 		this.#modelUnsubscribe?.();
 		this.#modelUnsubscribe = void 0;
 		this.#unregisterSearchCommands?.();
 		this.#unregisterSearchCommands = void 0;
+		if (this.#postDragSuppressTimer !== void 0) {
+			clearTimeout(this.#postDragSuppressTimer);
+			this.#postDragSuppressTimer = void 0;
+		}
+		this.#container()?.removeEventListener(`scroll`, this.#onContainerScroll);
+		treeDragUnregister(this.#dragSourceId);
 		if (this.#ownedRegistry) {
 			this.#ownedRegistry.unregister(`select-all`);
 			this.#ownedRegistry.unregister(`deselect-all`);
@@ -704,6 +1625,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
     `;
 	}
 	_handleItemClick(node, depth, event) {
+		if (this.#drop?.isDragging || this.#nativeDrag?.isDragging || this.#postDragSuppressTimer !== void 0) return;
 		if (event && event.detail >= 2) return;
 		if (this.#pendingNode && this._expandedKeys.has(this.#pendingNode.item.key)) this.#abortPending();
 		this.tickled.handlePointerEnter(node.item.key);
@@ -1138,6 +2060,23 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
       </ul>
     `;
 	}
+	/** Shared drag-and-drop render state for a row, used by every `_renderNode` variant. */
+	_dndRowState(node) {
+		const draggable = this.itemDnd !== `none` && (this.root?.children?.length ?? 0) > 0 && (this.itemDnd === `internal` || this.itemDnd === `both` || this.itemDnd === `external`) && (this.canDrag?.({
+			nodes: [node],
+			keys: [node.item.key]
+		}) ?? true);
+		const dragging = this.#nativeDragKeys.has(node.item.key);
+		const state = this.#dropState;
+		const dropTarget = state !== void 0 && state.referenceKey === node.item.key;
+		return {
+			draggable,
+			dragging,
+			dropTarget,
+			dropPosition: dropTarget ? state.position : void 0,
+			dropDepth: dropTarget ? state.depth : void 0
+		};
+	}
 	_renderNode(node, depth) {
 		const selected = this._isSelected(node);
 		const tickled = this._isFocused(node);
@@ -1146,9 +2085,10 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		const isPending = this.#pendingNode === node;
 		const isFiltered = this._isFilteredOut(node, depth);
 		const isLeaving = this._isLeaving(node);
+		const dnd = this._dndRowState(node);
 		return html`
       <li
-        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${isFiltered ? `filtered` : ``} ${isLeaving ? `leaving` : ``}"
+        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${isFiltered ? `filtered` : ``} ${isLeaving ? `leaving` : ``} ${dnd.dragging ? `dragging` : ``} ${dnd.dropTarget && dnd.dropPosition === `inside` ? `drop-into` : ``}"
         role="treeitem"
         aria-selected=${selected}
         aria-expanded=${isBranch ? isExpanded : nothing}
@@ -1156,6 +2096,8 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
         aria-level=${depth + 1}
         data-key=${node.item.key}
         style=${`--depth: ${depth}`}
+        draggable=${dnd.draggable ? `true` : nothing}
+        part=${dnd.dropTarget ? `drop-target` : nothing}
         @click=${(e) => this._handleItemClick(node, depth, e)}
         @pointerenter=${() => {
 			this.tickled.handlePointerEnter(node.item.key);
@@ -1169,6 +2111,11 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			}));
 		}}
       >
+        ${dnd.dropTarget && (dnd.dropPosition === `before` || dnd.dropPosition === `after`) ? html`<div
+            class="drop-line drop-line-${dnd.dropPosition}"
+            style="--drop-depth: ${dnd.dropDepth ?? depth}"
+            part="drop-indicator"
+          ></div>` : nothing}
         ${this.renderNodeContent(node, depth)}
         ${isPending ? this.renderLoadingIndicator() : nothing}
       </li>
@@ -1186,9 +2133,13 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
       --tree-text: var(--surface-3-text);
       --tree-muted-text: var(--surface-muted-text);
       --tree-indent: 1ch;
-      --tree-item-height: 2ch;
+      --tree-item-height: 30px;
       --tree-caret-size: 30px;
       --tree-radius: var(--radius-s);
+      --tree-drop-line: var(--accent);
+      --tree-drop-nub-size: 5px;
+      --tree-drop-into-outline: 2px solid var(--accent);
+      --tree-drop-into-bg: color-mix(in srgb, var(--accent) 14%, transparent);
 
       position: relative;
       display: block;
@@ -1216,10 +2167,11 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
     }
 
     .item {
+      position: relative; /* anchor for the .drop-line before/after indicator */
       display: flex;
       align-items: center;
       height: var(--tree-item-height);
-      padding-left: calc(var(--tree-indent) * var(--depth, 0) + var(--space-s));
+      padding-left: calc(var(--tree-indent) * var(--depth, 0));
       cursor: pointer;
       user-select: none;
       font-family: var(--font-family);
@@ -1291,11 +2243,49 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
       overflow: hidden;
     }
 
-    ::highlight(incr-search-highlight) {
-      background: var(--search-highlight-bg, var(--accent));
-      color: var(--search-highlight-color, var(--accent-text, #fff));
-      border-radius: 2px;
-      padding: 0 1px;
+    /* Drag and drop styles */
+    .item.dragging {
+      opacity: 0.4;
+    }
+
+    .item.drop-into {
+      outline: var(--tree-drop-into-outline);
+      outline-offset: -2px;
+      background: var(--tree-drop-into-bg);
+    }
+
+    .drop-line {
+      position: absolute;
+      left: calc(var(--tree-indent) * var(--drop-depth, 0) + var(--space-xs));
+      right: var(--space-xs);
+      height: 2px;
+      background: var(--tree-drop-line);
+      pointer-events: none;
+      z-index: 10;
+    }
+
+    /* Nub at the left end of the insertion line (VS Code style). */
+    .drop-line::before {
+      content: "";
+      position: absolute;
+      left: calc(-1 * var(--tree-drop-nub-size) / 2);
+      top: calc(50% - var(--tree-drop-nub-size) / 2);
+      width: var(--tree-drop-nub-size);
+      height: var(--tree-drop-nub-size);
+      border-radius: 50%;
+      background: var(--tree-drop-line);
+    }
+
+    .drop-line-before {
+      top: -1px;
+    }
+
+    .drop-line-after {
+      bottom: -1px;
+    }
+
+    :host([data-drop-rejected]) {
+      cursor: not-allowed;
     }
   `
 		];
@@ -1329,6 +2319,31 @@ __decorate([property({
 	attribute: `search-modes`,
 	reflect: true
 })], TreeBaseElement.prototype, "searchModes", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `item-dnd`
+})], TreeBaseElement.prototype, "itemDnd", void 0);
+__decorate([property({
+	type: String,
+	attribute: `accept-drop-types`
+})], TreeBaseElement.prototype, "acceptDropTypes", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `dnd-expand-hover-ms`
+})], TreeBaseElement.prototype, "dndExpandHoverMs", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `reorderable`,
+	converter: {
+		fromAttribute: (value) => value !== `false`,
+		toAttribute: (value) => value ? null : `false`
+	}
+})], TreeBaseElement.prototype, "reorderable", void 0);
+__decorate([property({ attribute: false })], TreeBaseElement.prototype, "dragPreviewRenderer", void 0);
+__decorate([property({ attribute: false })], TreeBaseElement.prototype, "canDrag", void 0);
+__decorate([property({ attribute: false })], TreeBaseElement.prototype, "canDrop", void 0);
+__decorate([property({ attribute: false })], TreeBaseElement.prototype, "parseExternalDrop", void 0);
+__decorate([property({ attribute: false })], TreeBaseElement.prototype, "applyInternalDrop", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_expandedKeys", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_focusedDepth", void 0);
 TreeBaseElement = __decorate([safeCustomElement(`ixfx-tree-base`)], TreeBaseElement);
@@ -1410,9 +2425,10 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
 		const hasIconAtDepth = this.#depthsWithIcons.has(depth);
 		const isLeaving = this._isLeaving(node);
 		const isFiltered = this._isFilteredOut(node, depth);
+		const dnd = this._dndRowState(node);
 		return html`
       <li
-        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${hasIconAtDepth ? `has-icon-at-depth` : ``} ${isLeaving ? `leaving` : ``} ${isFiltered ? `filtered` : ``}"
+        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${hasIconAtDepth ? `has-icon-at-depth` : ``} ${isLeaving ? `leaving` : ``} ${isFiltered ? `filtered` : ``} ${dnd.dragging ? `dragging` : ``} ${dnd.dropTarget && dnd.dropPosition === `inside` ? `drop-into` : ``}"
         data-key=${node.item.key}
         role="treeitem"
         aria-selected=${selected}
@@ -1420,9 +2436,16 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
         aria-hidden=${isLeaving ? `true` : nothing}
         aria-level=${depth + 1}
         style=${`--depth: ${depth}`}
+        draggable=${dnd.draggable ? `true` : nothing}
+        part=${dnd.dropTarget ? `drop-target` : nothing}
         @click=${(e) => this._handleItemClick(node, depth, e)}
         @pointerenter=${() => this.tickled.handlePointerEnter(node.item.key)}
       >
+        ${dnd.dropTarget && (dnd.dropPosition === `before` || dnd.dropPosition === `after`) ? html`<div
+            class="drop-line drop-line-${dnd.dropPosition}"
+            style="--drop-depth: ${dnd.dropDepth ?? depth}"
+            part="drop-indicator"
+          ></div>` : nothing}
         ${this.renderNodeContent(node, depth)}
         ${isPending ? this.renderLoadingIndicator() : nothing}
       </li>
@@ -1605,6 +2628,6 @@ var TreeController = class {
 	}
 };
 //#endregion
-export { TreeDataModel as i, TreeListElement as n, TreeBaseElement as r, TreeController as t };
+export { TreeDataModel as a, pruneDraggedDescendants as c, TreeDropController as i, TreeListElement as n, applyTreeDrop as o, TreeBaseElement as r, dropTargetFor as s, TreeController as t };
 
-//# sourceMappingURL=tree-CozQj01a.js.map
+//# sourceMappingURL=tree-a14n9y7i.js.map