@ixfx/components 0.8.8 → 0.9.1

package/bundle/index.js

@@ -6049,7 +6049,7 @@ const DEFAULT_THRESHOLD = 4;
 /** Pointer distance (px) from an edge that triggers auto-scroll. */
 const EDGE_ZONE = 28;
 /** Max auto-scroll speed in px per frame. */
-const MAX_SCROLL_SPEED = 16;
+const MAX_SCROLL_SPEED$1 = 16;
 /**
 * Shared pointer-drag (marquee / rubber-band) selection for list components.
 *
@@ -6315,10 +6315,10 @@ var ListDragSelectController = class {
 		const py = this.#currentClientY - box.top;
 		let dx = 0;
 		let dy = 0;
-		if (px < EDGE_ZONE) dx = -Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, px) / EDGE_ZONE));
-		else if (px > box.width - EDGE_ZONE) dx = Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, box.width - px) / EDGE_ZONE));
-		if (py < EDGE_ZONE) dy = -Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, py) / EDGE_ZONE));
-		else if (py > box.height - EDGE_ZONE) dy = Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, box.height - py) / EDGE_ZONE));
+		if (px < EDGE_ZONE) dx = -Math.ceil(MAX_SCROLL_SPEED$1 * (1 - Math.max(0, px) / EDGE_ZONE));
+		else if (px > box.width - EDGE_ZONE) dx = Math.ceil(MAX_SCROLL_SPEED$1 * (1 - Math.max(0, box.width - px) / EDGE_ZONE));
+		if (py < EDGE_ZONE) dy = -Math.ceil(MAX_SCROLL_SPEED$1 * (1 - Math.max(0, py) / EDGE_ZONE));
+		else if (py > box.height - EDGE_ZONE) dy = Math.ceil(MAX_SCROLL_SPEED$1 * (1 - Math.max(0, box.height - py) / EDGE_ZONE));
 		if (dx === 0 && dy === 0) return;
 		const autoScroll = this.#config.autoScroll;
 		if (!autoScroll) return;
@@ -6521,6 +6521,10 @@ var ListNativeDragController = class {
 		} catch {}
 		this.refreshDraggable();
 	}
+	/** `renderRoot` does not exist yet at `hostConnected` for a shadow-DOM host — rebind once it does. */
+	hostUpdated() {
+		this.#bind();
+	}
 	hostDisconnected() {
 		this.#unbind();
 		try {
@@ -6558,7 +6562,20 @@ var ListNativeDragController = class {
 	#onDragStart = (event) => {
 		if (!(event instanceof DragEvent)) return;
 		if (this.#seenDragStarts.has(event)) return;
-		this.#seenDragStarts.add(event);
+		if (this.#config.shouldStart) {
+			let ok = true;
+			try {
+				ok = this.#config.shouldStart(event);
+			} catch {
+				ok = false;
+			}
+			if (!ok) {
+				try {
+					event.preventDefault();
+				} catch {}
+				return;
+			}
+		}
 		let enabled = false;
 		try {
 			enabled = this.#config.isEnabled();
@@ -6572,6 +6589,7 @@ var ListNativeDragController = class {
 		} catch {
 			return;
 		}
+		if (originKey) this.#seenDragStarts.add(event);
 		if (!originKey) return;
 		let prepared;
 		try {
@@ -6630,6 +6648,14 @@ var ListNativeDragController = class {
 			notCancelled = true;
 		}
 		if (notCancelled) {
+			if (event.dataTransfer) {
+				try {
+					if (event.dataTransfer.effectAllowed === `none` || event.dataTransfer.effectAllowed === `uninitialized`) event.dataTransfer.effectAllowed = `copyMove`;
+				} catch {}
+				try {
+					this.#config.writeDataTransfer?.(event.dataTransfer, detail);
+				} catch {}
+			}
 			const hotspot = preview.hotspot ?? {
 				x: 16,
 				y: 16
@@ -9736,15 +9762,138 @@ async function collectDataResult(result, signal) {
 	return result;
 }
 //#endregion
-//#region src/common/tree-data-model.ts
+//#region src/common/tree-drop-apply.ts
 function findNode$1(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$1(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$1(root, ancestorKey);
+	return ancestor !== void 0 && findNode$1(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$1(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$5(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$1(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$1(afterRemoval, target.referenceKey) === void 0) return root;
+		parentKey = target.referenceKey;
+		const kids = childrenOf(afterRemoval, parentKey);
+		index = clamp$5(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);
@@ -9769,11 +9918,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$1(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.
@@ -9901,10 +10062,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) {
-		this.#root = moveNodeTo(this.#root, key, newParentKey);
+	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).
+	*/
+	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
@@ -15244,6 +15475,7 @@ let DataTableElement = class DataTableElement extends i {
 		this.styles = [
 			tickledStyles,
 			tickledItemStyles,
+			popupSurfaceStyles,
 			i$3`
       :host {
         display: block;
@@ -15383,7 +15615,6 @@ let DataTableElement = class DataTableElement extends i {
         width: max-content;
         max-width: 100cqi;
         padding: var(--space-xs);
-        background: var(--surface-2);
         visibility: hidden;
         transform: translateY(-4px);
         pointer-events: none;
@@ -15462,7 +15693,7 @@ let DataTableElement = class DataTableElement extends i {
           ?data-full=${r.fullWidth}
           @pointerenter=${() => this.#handlePointerEnter(i)}
           @click=${() => this.#select(i)}
-        ><div class="key">${r.label}</div><div class="value"><span class="value-text">${typeof r.value === `boolean` ? r.value ? `Yes` : `No` : r.value}</span>${r.detail === void 0 ? A : b`<div class="detail" part="detail">${r.detail}</div>`}</div></div>`)}</div>`;
+        ><div class="key">${r.label}</div><div class="value"><span class="value-text">${typeof r.value === `boolean` ? r.value ? `Yes` : `No` : r.value}</span>${r.detail === void 0 ? A : b`<div class="detail popup-surface" part="detail">${r.detail}</div>`}</div></div>`)}</div>`;
 	}
 };
 __decorate([property({
@@ -18289,6 +18520,7 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
         width: 100%;
         height: 100%;
         --split-gutter-size: 6px;
+        --split-gutter-hit-size: 12px;
         --split-gutter-color: transparent;
         --split-gutter-hover-color: var(--surface-6);
         --split-gutter-active-color: var(--accent);
@@ -18331,6 +18563,14 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
         display: flex;
         align-items: center;
         justify-content: center;
+        position: relative;
+      }
+
+      .gutter::before {
+        content: '';
+        position: absolute;
+        pointer-events: auto;
+        background: transparent;
       }
 
       :host([direction="row"]) .gutter {
@@ -18339,12 +18579,26 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
         min-height: 100%;
       }
 
+      :host([direction="row"]) .gutter::before {
+        width: var(--split-gutter-hit-size, 12px);
+        height: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
       :host([direction="column"]) .gutter {
         height: var(--split-gutter-size);
         cursor: ns-resize;
         min-width: 100%;
       }
 
+      :host([direction="column"]) .gutter::before {
+        height: var(--split-gutter-hit-size, 12px);
+        width: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
       .gutter:hover,
       .gutter[data-active] {
         background: var(--split-gutter-hover-color);
@@ -20645,7 +20899,7 @@ let DockHostElement = class DockHostElement extends i {
         class="split"
         direction=${node.direction}
         size=${size === void 0 ? A : String(size)}
-        style=${`--split-gutter-size: var(--dock-split-bar-size, 2px)`}
+        style=${`--split-gutter-size: var(--dock-split-bar-size, 2px); --split-collapsed-size: var(--dock-collapsed-size, 40px)`}
         data-dock-path=${pathStr}
         @ixfx-split-resize=${this._onSplitWeightsChanged}
         @ixfx-split-change=${this._onSplitWeightsChanged}
@@ -22662,6 +22916,7 @@ let GridListElement = class GridListElement extends i {
 		this.captionHeight = 24;
 		this.itemWrap = `stop`;
 		this.itemsDraggable = false;
+		this.marqueeFromCellBlank = false;
 		this.items = [];
 		this._scrollTop = 0;
 		this._scrollLeft = 0;
@@ -22745,7 +23000,8 @@ let GridListElement = class GridListElement extends i {
 			},
 			syncLightDomDraggable: () => {
 				for (const child of this.children) if (child instanceof HTMLElement) child.draggable = this.itemsDraggable;
-			}
+			},
+			shouldStart: (event) => !(this.marqueeFromCellBlank && this.#isCellBlankPress(event))
 		});
 		this.#activeCaptionPan = null;
 		this.#dragSelect = new ListDragSelectController(this, {
@@ -22777,6 +23033,7 @@ let GridListElement = class GridListElement extends i {
 				}
 			},
 			shouldStart: (event) => {
+				if (this.marqueeFromCellBlank && this.#isCellBlankPress(event)) return true;
 				for (const node of event.composedPath()) if (node instanceof Element && node.classList.contains(`cell`)) return false;
 				return true;
 			}
@@ -22883,6 +23140,7 @@ let GridListElement = class GridListElement extends i {
         --grid-list-item-bg: var(--item-bg);
         --grid-list-radius: var(--radius-m);
         --grid-list-gap: var(--space-xs);
+        --grid-list-padding: var(--space-xs);
         position: relative;
         display: block;
         height: 100%;
@@ -22903,6 +23161,7 @@ let GridListElement = class GridListElement extends i {
         height: 100%;
         overflow-y: auto;
         overflow-x: hidden;
+        padding: var(--grid-list-padding);
         /* Consumer control over the native scrollbar (both orientations): set
            --grid-list-scrollbar-width to "none" to hide it or "thin" to slim it.
            The container is also exposed as ::part(viewport). */
@@ -23053,6 +23312,11 @@ let GridListElement = class GridListElement extends i {
         border-top: 1px solid var(--border, rgba(128, 128, 128, 0.3));
         background: var(--surface-4, transparent);
       }
+      :host([caption-style="under"][caption-position="top"]) .caption {
+        order: -1;
+        border-top: none;
+        border-bottom: 1px solid var(--border, rgba(128, 128, 128, 0.3));
+      }
 
       /* overlaid: caption floats over the content */
       :host([caption-style="overlaid"]) .caption {
@@ -23119,6 +23383,11 @@ let GridListElement = class GridListElement extends i {
       }
       :host([caption-style="separate"][caption-align="left"]) .caption { align-self: flex-start; }
       :host([caption-style="separate"][caption-align="right"]) .caption { align-self: flex-end; }
+      :host([caption-style="separate"][caption-position="top"]) .caption {
+        order: -1;
+        margin-top: 0;
+        margin-bottom: 4px;
+      }
       /* Inset the selection ring (negative offset) so it is never clipped by the
          scroll viewport's overflow when the cell sits against an edge. */
       :host([caption-style="separate"]) .cell.selected .thumb {
@@ -23265,6 +23534,22 @@ let GridListElement = class GridListElement extends i {
 	#activeCaptionPan;
 	#dragSelect;
 	/**
+	* True when a pointer / drag event landed on a cell's blank well: the composed
+	* path reaches `.thumb` without first crossing a slotted node (the item's own
+	* content), the `.caption`, or an interactive control.
+	*/
+	#isCellBlankPress(event) {
+		for (const node of event.composedPath()) {
+			if (!(node instanceof Element)) continue;
+			if (node.assignedSlot) return false;
+			if (node.matches?.(`input,button,a,select,textarea,[contenteditable]`)) return false;
+			if (node.classList.contains(`caption`)) return false;
+			if (node.classList.contains(`thumb`)) return true;
+			if (node.classList.contains(`cell`)) return false;
+		}
+		return false;
+	}
+	/**
 	* Map a surface-relative (viewport-visible) rect to covered item keys using
 	* the same `computeGridWindow` geometry the renderer uses — pure arithmetic,
 	* so virtualized off-screen items are covered without DOM measurement.
@@ -24157,6 +24442,11 @@ __decorate([property({
 	attribute: `items-draggable`,
 	reflect: true
 })], GridListElement.prototype, "itemsDraggable", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `marquee-from-cell-blank`,
+	reflect: true
+})], GridListElement.prototype, "marqueeFromCellBlank", void 0);
 __decorate([property({ attribute: false })], GridListElement.prototype, "dragPreviewRenderer", void 0);
 __decorate([property({
 	type: String,
@@ -24552,6 +24842,360 @@ __decorate([property({
 })], GroupedItemListerElement.prototype, "crossGroupSelection", void 0);
 GroupedItemListerElement = __decorate([safeCustomElement(`ixfx-grouped-item-lister`)], GroupedItemListerElement);
 //#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$1 = 24;
+const MAX_SCROLL_SPEED = 16;
+function clamp$4(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$4((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$4(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$1) dy = -Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, y) / EDGE_ZONE_PX$1));
+		else if (y > rect.height - EDGE_ZONE_PX$1) dy = Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, rect.height - y) / EDGE_ZONE_PX$1));
+		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;
@@ -24564,6 +25208,10 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		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: () => {
@@ -24572,6 +25220,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 					enabled: true
 				}));
 			},
+			hoverDisabled: () => this.#drop?.isDragging === true || this.#nativeDrag?.isDragging === true,
 			onStateChange: () => {
 				this.setAttribute(`data-input-mode`, this.tickled.inputMode);
 			}
@@ -24588,6 +25237,12 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		this.#leaving = /* @__PURE__ */ new Map();
 		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();
@@ -24741,6 +25396,28 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	#leaving;
 	#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);
@@ -24852,6 +25529,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		this.#treeAnimReady = true;
 	}
 	updated(changedProps) {
+		this.#rowsCache = void 0;
 		if (changedProps.has(`root`) && this.root) {
 			this.#abortPending();
 			this._expandedKeys.clear();
@@ -24908,6 +25586,291 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		});
 		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();
@@ -24918,6 +25881,12 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		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`);
@@ -25092,6 +26061,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
     `;
 	}
 	_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);
@@ -25526,6 +26496,23 @@ let TreeBaseElement = class TreeBaseElement extends i {
       </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);
@@ -25534,9 +26521,10 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		const isPending = this.#pendingNode === node;
 		const isFiltered = this._isFilteredOut(node, depth);
 		const isLeaving = this._isLeaving(node);
+		const dnd = this._dndRowState(node);
 		return b`
       <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 : A}
@@ -25544,6 +26532,8 @@ let TreeBaseElement = class TreeBaseElement extends i {
         aria-level=${depth + 1}
         data-key=${node.item.key}
         style=${`--depth: ${depth}`}
+        draggable=${dnd.draggable ? `true` : A}
+        part=${dnd.dropTarget ? `drop-target` : A}
         @click=${(e) => this._handleItemClick(node, depth, e)}
         @pointerenter=${() => {
 			this.tickled.handlePointerEnter(node.item.key);
@@ -25557,6 +26547,11 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			}));
 		}}
       >
+        ${dnd.dropTarget && (dnd.dropPosition === `before` || dnd.dropPosition === `after`) ? b`<div
+            class="drop-line drop-line-${dnd.dropPosition}"
+            style="--drop-depth: ${dnd.dropDepth ?? depth}"
+            part="drop-indicator"
+          ></div>` : A}
         ${this.renderNodeContent(node, depth)}
         ${isPending ? this.renderLoadingIndicator() : A}
       </li>
@@ -25577,6 +26572,10 @@ let TreeBaseElement = class TreeBaseElement extends i {
       --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;
@@ -25604,6 +26603,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
     }
 
     .item {
+      position: relative; /* anchor for the .drop-line before/after indicator */
       display: flex;
       align-items: center;
       height: var(--tree-item-height);
@@ -25679,11 +26679,49 @@ let TreeBaseElement = class TreeBaseElement extends i {
       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;
     }
   `
 		];
@@ -25717,6 +26755,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);
@@ -25798,9 +26861,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 b`
       <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}
@@ -25808,9 +26872,16 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
         aria-hidden=${isLeaving ? `true` : A}
         aria-level=${depth + 1}
         style=${`--depth: ${depth}`}
+        draggable=${dnd.draggable ? `true` : A}
+        part=${dnd.dropTarget ? `drop-target` : A}
         @click=${(e) => this._handleItemClick(node, depth, e)}
         @pointerenter=${() => this.tickled.handlePointerEnter(node.item.key)}
       >
+        ${dnd.dropTarget && (dnd.dropPosition === `before` || dnd.dropPosition === `after`) ? b`<div
+            class="drop-line drop-line-${dnd.dropPosition}"
+            style="--drop-depth: ${dnd.dropDepth ?? depth}"
+            part="drop-indicator"
+          ></div>` : A}
         ${this.renderNodeContent(node, depth)}
         ${isPending ? this.renderLoadingIndicator() : A}
       </li>
@@ -29348,6 +30419,77 @@ function valueToRelative(value, min, max) {
 const HANDLE_HIT_RADIUS = .06;
 const DEFAULT_VALUE_MIN_FRACTION = .01;
 const CHANGE_DEBOUNCE_MS = 150;
+/**
+* Evaluate a simple arithmetic expression (decimal numbers, `+ - * /` and
+* parentheses). Returns `undefined` when the string contains anything else.
+* Used for CSS `calc()`-derived values — a safe substitute for `new Function`.
+*/
+function evaluateArithmetic(source) {
+	let pos = 0;
+	const skipSpaces = () => {
+		while (pos < source.length) {
+			const c = source[pos];
+			if (c !== ` ` && c !== `\t` && c !== `\n` && c !== `\r`) break;
+			pos++;
+		}
+	};
+	function parseNumber() {
+		skipSpaces();
+		const match = /^(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?/i.exec(source.slice(pos));
+		if (!match) return void 0;
+		pos += match[0].length;
+		return Number.parseFloat(match[0]);
+	}
+	function parseFactor() {
+		skipSpaces();
+		const c = source[pos];
+		if (c === `+` || c === `-`) {
+			pos++;
+			const value = parseFactor();
+			return value === void 0 ? void 0 : c === `-` ? -value : value;
+		}
+		if (c === `(`) {
+			pos++;
+			const value = parseSum();
+			if (value === void 0) return void 0;
+			skipSpaces();
+			if (source[pos] !== `)`) return void 0;
+			pos++;
+			return value;
+		}
+		return parseNumber();
+	}
+	function parseProduct() {
+		let value = parseFactor();
+		if (value === void 0) return void 0;
+		while (true) {
+			skipSpaces();
+			const op = source[pos];
+			if (op !== `*` && op !== `/`) return value;
+			pos++;
+			const rhs = parseFactor();
+			if (rhs === void 0) return void 0;
+			value = op === `*` ? value * rhs : value / rhs;
+		}
+	}
+	function parseSum() {
+		let value = parseProduct();
+		if (value === void 0) return void 0;
+		while (true) {
+			skipSpaces();
+			const op = source[pos];
+			if (op !== `+` && op !== `-`) return value;
+			pos++;
+			const rhs = parseProduct();
+			if (rhs === void 0) return void 0;
+			value = op === `+` ? value + rhs : value - rhs;
+		}
+	}
+	const value = parseSum();
+	if (value === void 0) return void 0;
+	skipSpaces();
+	return pos === source.length ? value : void 0;
+}
 let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 	#lanes;
 	/** Raw pole values: independent of which is "low" or "high". */
@@ -30261,14 +31403,10 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 				const parsed = Number.parseFloat(val.replace(/[^0-9.-]/g, ``));
 				return Number.isNaN(parsed) ? defaultValue : parsed;
 			}
-			const evalStr = val.replace(/var\(--value-relative\)/g, valueRelative);
-			try {
-				const result = new Function(`return ${evalStr.replace(/calc\s*\(([^)]+)\)/g, `$1`)}`)();
-				return typeof result === `number` && !Number.isNaN(result) ? result : defaultValue;
-			} catch {
-				const parsed = Number.parseFloat(val.replace(/[^0-9.-]/g, ``));
-				return Number.isNaN(parsed) ? defaultValue : parsed;
-			}
+			const result = evaluateArithmetic(val.replace(/var\(--value-relative\)/g, valueRelative).replace(/calc\s*\(([^)]+)\)/g, `$1`));
+			if (result !== void 0) return Number.isNaN(result) ? defaultValue : result;
+			const parsed = Number.parseFloat(val.replace(/[^0-9.-]/g, ``));
+			return Number.isNaN(parsed) ? defaultValue : parsed;
 		}
 		const parsed = Number.parseFloat(val);
 		return Number.isNaN(parsed) ? defaultValue : parsed;
@@ -30345,10 +31483,10 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 			proposedHigh = clamp$1(proposedHigh, this.min, this.max);
 		}
 		const lowKey = this.#lengthDragLowKey ?? this.#lowKey();
-		this.#lengthDragHighKey ?? this.#highKey();
+		const highKey = this.#lengthDragHighKey ?? this.#highKey();
 		const previous = this.#poles();
 		const newPoleA = lowKey === `a` ? proposedLow : proposedHigh;
-		const newPoleB = lowKey === `b` ? proposedLow : proposedHigh;
+		const newPoleB = highKey === `b` ? proposedHigh : proposedLow;
 		this.#poleA = newPoleA;
 		this.#poleB = newPoleB;
 		if (this.valueMode === `triple` && this.#poleC !== void 0) {
@@ -33967,7 +35105,7 @@ function getScaleSteps(palette) {
 function resolveCssVariable(el, prop) {
 	const style = getComputedStyle(el);
 	let value = style.getPropertyValue(prop).trim();
-	const varRegex = /var\((--[\w-]+)(?:,\s*(.*))?\)/g;
+	const varRegex = /var\((--[\w-]+)(?:,(.*))?\)/g;
 	for (let i = 0; i < 5 && value.includes(`var(`); i++) value = value.replace(varRegex, (_, varName, fallback) => {
 		const resolved = style.getPropertyValue(varName).trim();
 		if (resolved) return resolved;
@@ -43393,6 +44531,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeKeyboardNavController, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map