@ixfx/components 0.8.7 → 0.8.9

package/bundle/index.js

@@ -5686,13 +5686,370 @@ __decorate([state()], RadioGroup.prototype, "_icons", void 0);
 __decorate([query(`slot`)], RadioGroup.prototype, "_slot", void 0);
 RadioGroup = __decorate([safeCustomElement(`ixfx-radio-group`)], RadioGroup);
 //#endregion
+//#region src/interaction/list-drag-preview-default.ts
+const CARD_DEFAULT = 72;
+const CARD_MIN = 48;
+const CARD_MAX = 96;
+const LIST_WIDTH = 220;
+const LIST_MAX_ROWS = 5;
+const MAX_CANVAS_DIM = 1024;
+function cssVar(style, name, fallback) {
+	try {
+		return style.getPropertyValue(name)?.trim() || fallback;
+	} catch {
+		return fallback;
+	}
+}
+function fontOf(style) {
+	try {
+		const font = style.font?.trim();
+		if (font) return font;
+	} catch {}
+	return `12px system-ui, sans-serif`;
+}
+/** Caption for a drag entry — element labels win, then string items, then common object fields, then the key. */
+function captionForEntry(entry) {
+	const el = entry.element ?? (entry.item instanceof Element ? entry.item : void 0);
+	if (el) {
+		const labelled = el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? el.getAttribute(`data-search-label`) ?? el.querySelector(`.cell`)?.textContent?.trim();
+		if (labelled) return labelled.slice(0, 80);
+		const text = el.textContent?.trim();
+		if (text) return text.slice(0, 80);
+	}
+	const item = entry.item;
+	if (typeof item === `string` && item.length > 0) return item.slice(0, 80);
+	if (item !== null && typeof item === `object` && !(item instanceof Element)) {
+		const record = item;
+		for (const field of [
+			`label`,
+			`name`,
+			`title`,
+			`text`
+		]) {
+			const value = record[field];
+			if (typeof value === `string` && value.length > 0) return value.slice(0, 80);
+		}
+	}
+	return entry.key;
+}
+function glyphFor(caption) {
+	const first = caption.trim().at(0);
+	return first ? first.toLocaleUpperCase() : `?`;
+}
+/** A decoded `<img>` ready for `drawImage`, if the entry's element has one. */
+function decodedImage(entry) {
+	const scope = entry.element ?? (entry.item instanceof Element ? entry.item : void 0);
+	if (!scope || typeof scope.querySelector !== `function`) return void 0;
+	if (scope instanceof HTMLImageElement) {
+		if (scope.complete && scope.naturalWidth > 0) return scope;
+		return;
+	}
+	try {
+		const img = scope.querySelector(`img`);
+		if (img instanceof HTMLImageElement && img.complete && img.naturalWidth > 0) return img;
+	} catch {}
+}
+function cardSize(metrics) {
+	if (metrics.itemSize !== void 0 && Number.isFinite(metrics.itemSize)) return Math.max(CARD_MIN, Math.min(CARD_MAX, Math.round(metrics.itemSize)));
+	return CARD_DEFAULT;
+}
+function rowHeight(metrics) {
+	const raw = metrics.rowHeight;
+	if (raw !== void 0 && Number.isFinite(raw)) return Math.max(24, Math.min(36, Math.round(raw)));
+	return 28;
+}
+function thumbCell(doc, caption, img, size) {
+	const well = doc.createElement(`div`);
+	well.setAttribute(`data-thumb`, ``);
+	well.style.cssText = `width:${size}px;height:${size}px;border-radius:4px;overflow:hidden;background:var(--surface-5, rgba(128,128,128,0.25));flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:${Math.round(size * .4)}px;font-weight:600;`;
+	if (img) try {
+		const clone = img.cloneNode(true);
+		clone.style.cssText = `width:100%;height:100%;object-fit:cover;`;
+		clone.removeAttribute(`id`);
+		well.appendChild(clone);
+	} catch {
+		well.textContent = glyphFor(caption);
+	}
+	else well.textContent = glyphFor(caption);
+	return well;
+}
+function buildCardsElement(ctx, captions, images) {
+	const doc = document;
+	const size = cardSize(ctx.metrics);
+	const gap = 6;
+	const pad = 8;
+	const root = doc.createElement(`div`);
+	root.setAttribute(`data-preview`, `cards`);
+	root.setAttribute(`part`, `drag-preview`);
+	root.style.cssText = `position:fixed;top:-9999px;left:-9999px;display:flex;flex-direction:row;gap:${gap}px;padding:${pad}px;background:var(--surface-4, #333);color:var(--surface-4-text, #fff);border:1px solid var(--border-subtle, #555);border-radius:var(--radius-m, 8px);box-shadow:0 4px 16px rgba(0,0,0,0.3);font-family:system-ui,sans-serif;font-size:11px;max-width:320px;z-index:999999;pointer-events:none;`;
+	const n = ctx.selected.length;
+	for (let i = 0; i < n; i++) {
+		const card = doc.createElement(`div`);
+		card.setAttribute(`data-card`, ``);
+		card.style.cssText = `display:flex;flex-direction:column;gap:4px;align-items:center;width:${size}px;`;
+		card.appendChild(thumbCell(doc, captions[i], images[i], Math.round(size * .72)));
+		const label = doc.createElement(`span`);
+		label.setAttribute(`data-caption`, ``);
+		label.style.cssText = `max-width:${size}px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0.9;`;
+		label.textContent = captions[i];
+		card.appendChild(label);
+		root.appendChild(card);
+	}
+	return root;
+}
+function buildListElement(ctx, captions, images) {
+	const doc = document;
+	const rh = rowHeight(ctx.metrics);
+	const thumb = Math.round(rh * .78);
+	const root = doc.createElement(`div`);
+	root.setAttribute(`data-preview`, `list`);
+	root.setAttribute(`part`, `drag-preview`);
+	root.style.cssText = `position:fixed;top:-9999px;left:-9999px;display:flex;flex-direction:column;gap:4px;padding:8px;background:var(--surface-4, #333);color:var(--surface-4-text, #fff);border:1px solid var(--border-subtle, #555);border-radius:var(--radius-m, 8px);box-shadow:0 4px 16px rgba(0,0,0,0.3);font-family:system-ui,sans-serif;font-size:12px;width:${LIST_WIDTH}px;max-width:${LIST_WIDTH}px;z-index:999999;pointer-events:none;`;
+	const header = doc.createElement(`div`);
+	header.setAttribute(`data-header`, ``);
+	header.style.cssText = `font-weight:600;padding-bottom:4px;border-bottom:1px solid var(--border-subtle, #555);margin-bottom:4px;`;
+	header.textContent = `${ctx.selected.length} items`;
+	root.appendChild(header);
+	for (let i = 0; i < Math.min(LIST_MAX_ROWS, captions.length); i++) {
+		const row = doc.createElement(`div`);
+		row.setAttribute(`data-row`, ``);
+		row.style.cssText = `display:flex;align-items:center;gap:6px;height:${rh}px;overflow:hidden;`;
+		row.appendChild(thumbCell(doc, captions[i], images[i], thumb));
+		const label = doc.createElement(`span`);
+		label.setAttribute(`data-caption`, ``);
+		label.style.cssText = `flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
+		label.textContent = captions[i];
+		row.appendChild(label);
+		root.appendChild(row);
+	}
+	if (captions.length > LIST_MAX_ROWS) {
+		const more = doc.createElement(`div`);
+		more.setAttribute(`data-more`, ``);
+		more.style.cssText = `opacity:0.6;text-align:center;`;
+		more.textContent = `+${captions.length - LIST_MAX_ROWS} more`;
+		root.appendChild(more);
+	}
+	return root;
+}
+function paletteOf(style) {
+	const bg = cssVar(style, `--surface-4`, `#333333`);
+	const fg = cssVar(style, `--surface-4-text`, `#ffffff`);
+	const subtle = cssVar(style, `--border-subtle`, `#555555`);
+	const accent = cssVar(style, `--accent`, `#4da3ff`);
+	const radiusRaw = cssVar(style, `--radius-m`, `8`);
+	return {
+		bg,
+		fg,
+		subtle,
+		accent,
+		radius: Number.parseFloat(radiusRaw) || 8,
+		font: fontOf(style)
+	};
+}
+function fitCanvas(canvas, cssW, cssH) {
+	let scale = Math.max(1, Math.min(3, typeof devicePixelRatio === `number` && devicePixelRatio > 0 ? devicePixelRatio : 1));
+	const maxScaleW = MAX_CANVAS_DIM / Math.max(1, cssW);
+	const maxScaleH = MAX_CANVAS_DIM / Math.max(1, cssH);
+	scale = Math.min(scale, maxScaleW, maxScaleH);
+	canvas.width = Math.max(1, Math.round(cssW * scale));
+	canvas.height = Math.max(1, Math.round(cssH * scale));
+	canvas.style.width = `${cssW}px`;
+	canvas.style.height = `${cssH}px`;
+	return {
+		scale,
+		dpr: scale
+	};
+}
+function roundRectPath(context, x, y, w, h, r) {
+	const radius = Math.max(0, Math.min(r, w / 2, h / 2));
+	if (typeof context.roundRect === `function`) {
+		context.beginPath();
+		context.roundRect(x, y, w, h, radius);
+		return;
+	}
+	context.beginPath();
+	context.moveTo(x + radius, y);
+	context.arcTo(x + w, y, x + w, y + h, radius);
+	context.arcTo(x + w, y + h, x, y + h, radius);
+	context.arcTo(x, y + h, x, y, radius);
+	context.arcTo(x, y, x + w, y, radius);
+	context.closePath();
+}
+function paintCards(context, scale, palette, captions, images, size, cssW, cssH) {
+	context.save();
+	context.scale(scale, scale);
+	roundRectPath(context, 0, 0, cssW, cssH, palette.radius);
+	context.fillStyle = palette.bg;
+	context.fill();
+	context.strokeStyle = palette.subtle;
+	context.lineWidth = 1;
+	context.stroke();
+	context.clip();
+	const gap = 6;
+	const pad = 8;
+	const wellSize = Math.round(size * .72);
+	context.font = palette.font;
+	context.textBaseline = `middle`;
+	for (let i = 0; i < captions.length; i++) {
+		const x = pad + i * (size + gap);
+		const wellX = x + (size - wellSize) / 2;
+		const wellY = pad;
+		roundRectPath(context, wellX, wellY, wellSize, wellSize, 4);
+		context.fillStyle = palette.subtle;
+		context.globalAlpha = .35;
+		context.fill();
+		context.globalAlpha = 1;
+		const img = images[i];
+		if (img) try {
+			context.save();
+			context.clip();
+			context.drawImage(img, wellX, wellY, wellSize, wellSize);
+			context.restore();
+		} catch {}
+		else {
+			context.fillStyle = palette.fg;
+			context.globalAlpha = .9;
+			context.font = `600 ${Math.round(wellSize * .4)}px system-ui, sans-serif`;
+			context.textAlign = `center`;
+			context.fillText(glyphFor(captions[i]), wellX + wellSize / 2, wellY + wellSize / 2 + 1);
+			context.globalAlpha = 1;
+			context.textAlign = `left`;
+			context.font = palette.font;
+		}
+		context.fillStyle = palette.fg;
+		context.globalAlpha = .9;
+		context.font = palette.font;
+		const label = captions[i].length > 12 ? `${captions[i].slice(0, 11)}…` : captions[i];
+		const textWidth = context.measureText(label).width;
+		context.fillText(label, x + (size - Math.min(size, textWidth)) / 2, wellY + wellSize + 10, size);
+		context.globalAlpha = 1;
+	}
+	context.restore();
+}
+function paintList(context, scale, palette, captions, images, rh, cssW, cssH) {
+	context.save();
+	context.scale(scale, scale);
+	roundRectPath(context, 0, 0, cssW, cssH, palette.radius);
+	context.fillStyle = palette.bg;
+	context.fill();
+	context.strokeStyle = palette.subtle;
+	context.lineWidth = 1;
+	context.stroke();
+	context.clip();
+	const pad = 8;
+	context.fillStyle = palette.fg;
+	context.font = `600 ${palette.font}`;
+	context.textBaseline = `middle`;
+	context.fillText(`${captions.length} items`, pad, 16, cssW - 16);
+	context.strokeStyle = palette.subtle;
+	context.beginPath();
+	context.moveTo(pad, 28);
+	context.lineTo(cssW - pad, 28);
+	context.stroke();
+	const thumb = Math.round(rh * .78);
+	const rows = Math.min(LIST_MAX_ROWS, captions.length);
+	context.font = palette.font;
+	for (let i = 0; i < rows; i++) {
+		const y = 32 + i * rh;
+		roundRectPath(context, pad, y + (rh - thumb) / 2, thumb, thumb, 4);
+		context.fillStyle = palette.subtle;
+		context.globalAlpha = .35;
+		context.fill();
+		context.globalAlpha = 1;
+		const img = images[i];
+		if (img) try {
+			context.save();
+			context.clip();
+			context.drawImage(img, pad, y + (rh - thumb) / 2, thumb, thumb);
+			context.restore();
+		} catch {}
+		else {
+			context.fillStyle = palette.fg;
+			context.font = `600 ${Math.round(thumb * .45)}px system-ui, sans-serif`;
+			context.textAlign = `center`;
+			context.fillText(glyphFor(captions[i]), pad + thumb / 2, y + rh / 2 + 1);
+			context.textAlign = `left`;
+			context.font = palette.font;
+		}
+		context.fillStyle = palette.fg;
+		context.globalAlpha = .92;
+		const maxText = cssW - 16 - thumb - 6;
+		context.fillText(captions[i], pad + thumb + 6, y + rh / 2 + 1, Math.max(8, maxText));
+		context.globalAlpha = 1;
+	}
+	if (captions.length > LIST_MAX_ROWS) {
+		context.fillStyle = palette.fg;
+		context.globalAlpha = .6;
+		context.textAlign = `center`;
+		context.fillText(`+${captions.length - LIST_MAX_ROWS} more`, cssW / 2, cssH - pad - 6, cssW - 16);
+		context.textAlign = `left`;
+		context.globalAlpha = 1;
+	}
+	context.restore();
+}
+/**
+* Uniform built-in HTML+canvas drag preview for all four list components.
+*
+* - ≤5 selected → a row of small cards (thumbnail well + caption).
+* - >5 selected → a compact list (`N items` header, up to 5 rows, `+N more`).
+*
+* Always returns an offscreen `element` for `DataTransfer.setDragImage()` and,
+* when a 2D context is available, a DPR-aware painted `canvas` for native
+* hosts. Colours track the active theme via `ctx.hostStyle` CSS variables.
+*/
+function createDefaultListDragPreview(ctx) {
+	const entries = ctx.selected;
+	const captions = entries.map((entry) => captionForEntry(entry));
+	const images = entries.map((entry) => decodedImage(entry));
+	const isCards = entries.length <= 5;
+	let element;
+	let cssW;
+	let cssH;
+	if (isCards) {
+		const size = cardSize(ctx.metrics);
+		cssW = entries.length * size + Math.max(0, entries.length - 1) * 6 + 16;
+		cssH = Math.round(size * .72) + 22 + 16;
+		element = buildCardsElement(ctx, captions, images);
+	} else {
+		const rh = rowHeight(ctx.metrics);
+		const rows = Math.min(LIST_MAX_ROWS, entries.length);
+		const more = entries.length > LIST_MAX_ROWS ? 18 : 0;
+		cssW = 236;
+		cssH = 40 + rows * rh + more;
+		element = buildListElement(ctx, captions, images);
+	}
+	let canvas;
+	try {
+		const candidate = document.createElement(`canvas`);
+		const paint = candidate.getContext(`2d`);
+		if (paint) {
+			const { scale } = fitCanvas(candidate, cssW, cssH);
+			const palette = paletteOf(ctx.hostStyle);
+			if (isCards) paintCards(paint, scale, palette, captions, images, cardSize(ctx.metrics), cssW, cssH);
+			else paintList(paint, scale, palette, captions, images, rowHeight(ctx.metrics), cssW, cssH);
+			canvas = candidate;
+		}
+	} catch {
+		canvas = void 0;
+	}
+	return {
+		element,
+		hotspot: {
+			x: 16,
+			y: 16
+		},
+		...canvas ? { canvas } : {},
+		dispose: () => {}
+	};
+}
+//#endregion
 //#region src/interaction/list-drag-select-controller.ts
 const DEFAULT_POINTER_TYPES = [`mouse`, `pen`];
 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.
 *
@@ -5958,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;
@@ -6075,25 +6432,251 @@ function animateListItemIn(el, options = {}) {
 		easing
 	});
 }
+function outResult(finished, animation) {
+	return Object.assign(finished, { animation });
+}
 /**
-* Collapse + fade `el` out. Resolves once the animation finishes (or straight
-* away under reduced motion); the caller detaches the element after. The final
-* collapsed state is held (`fill: forwards`) so there's no flash back to full
-* size in the gap before removal.
+* Start the collapse + fade-out animation for `el` and return the handle.
+* Returns `undefined` when no animation was started (reduced motion or zero
+* size). The caller owns the handle and must `cancel()` it if the removal is
+* reversed — a retained `fill: forwards` frame otherwise keeps overriding the
+* element's ordinary CSS indefinitely.
 */
-function animateListItemOut(el, options = {}) {
-	if (prefersReducedMotion()) return Promise.resolve();
+function startListItemOutAnimation(el, options = {}) {
+	if (prefersReducedMotion()) return void 0;
 	const { axis = `block`, easing = `ease` } = options;
 	const duration = resolveDuration(el, options.duration);
 	const size = measure(el, axis);
-	if (size <= 0) return Promise.resolve();
+	if (size <= 0) return void 0;
 	return el.animate([fullFrame(size, axis), collapsedFrame(axis)], {
 		duration,
 		easing,
 		fill: `forwards`
-	}).finished.then(() => void 0, () => void 0);
+	});
+}
+/**
+* Collapse + fade `el` out. Resolves once the animation finishes (or straight
+* away under reduced motion); the caller detaches the element after. The final
+* collapsed state is held (`fill: forwards`) so there's no flash back to full
+* size in the gap before removal.
+*
+* The returned promise carries an `.animation` handle. If the removal is
+* reversed (the same key becomes visible again), cancel that handle so its
+* filled final frame stops overriding the reused element's style.
+*/
+function animateListItemOut(el, options = {}) {
+	const animation = startListItemOutAnimation(el, options);
+	if (!animation) return outResult(Promise.resolve(), void 0);
+	return outResult(animation.finished.then(() => void 0, () => void 0), animation);
 }
 //#endregion
+//#region src/interaction/list-native-drag-controller.ts
+/**
+* Shared native item/row drag-out for list components.
+*
+* Owns capture-phase `dragstart` / `dragend` listeners on the host and its
+* render root, a `MutationObserver` that keeps light-DOM / slotted item `draggable`
+* attributes in sync, and a single post-dispatch disposal on
+* `requestAnimationFrame`. All DOM / selection knowledge lives in the host
+* config callbacks.
+*/
+var ListNativeDragController = class {
+	#host;
+	#config;
+	#dragging = false;
+	#boundRoot;
+	#boundHost = false;
+	#seenDragStarts = /* @__PURE__ */ new WeakSet();
+	#observer;
+	constructor(host, config) {
+		this.#host = host;
+		this.#config = config;
+		host.addController(this);
+	}
+	get isDragging() {
+		return this.#dragging;
+	}
+	/** `"true"` when enabled, else `"false"` — for shadow-row template bindings. */
+	get draggableAttr() {
+		try {
+			return this.#config.isEnabled() ? `true` : `false`;
+		} catch {
+			return `false`;
+		}
+	}
+	/** Re-run the light-DOM `draggable` sync (e.g. after `itemsDraggable` flips). */
+	refreshDraggable() {
+		try {
+			this.#config.syncLightDomDraggable?.();
+		} catch {}
+	}
+	hostConnected() {
+		this.#bind();
+		this.#observer ??= new MutationObserver(() => this.refreshDraggable());
+		try {
+			this.#observer.observe(this.#host, {
+				childList: true,
+				subtree: true
+			});
+		} 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 {
+			this.#observer?.disconnect();
+		} catch {}
+		this.#dragging = false;
+	}
+	#renderRoot() {
+		return this.#host.renderRoot ?? this.#host;
+	}
+	#bind() {
+		const root = this.#renderRoot();
+		if (root !== this.#boundRoot) {
+			this.#unbind();
+			this.#boundRoot = root;
+			root.addEventListener(`dragstart`, this.#onDragStart, { capture: true });
+			root.addEventListener(`dragend`, this.#onDragEnd, { capture: true });
+		}
+		if (!this.#boundHost) {
+			this.#boundHost = true;
+			this.#host.addEventListener(`dragstart`, this.#onDragStart, { capture: true });
+			this.#host.addEventListener(`dragend`, this.#onDragEnd, { capture: true });
+		}
+	}
+	#unbind() {
+		this.#boundRoot?.removeEventListener(`dragstart`, this.#onDragStart, { capture: true });
+		this.#boundRoot?.removeEventListener(`dragend`, this.#onDragEnd, { capture: true });
+		this.#boundRoot = void 0;
+		if (this.#boundHost) {
+			this.#boundHost = false;
+			this.#host.removeEventListener(`dragstart`, this.#onDragStart, { capture: true });
+			this.#host.removeEventListener(`dragend`, this.#onDragEnd, { capture: true });
+		}
+	}
+	#onDragStart = (event) => {
+		if (!(event instanceof DragEvent)) return;
+		if (this.#seenDragStarts.has(event)) return;
+		let enabled = false;
+		try {
+			enabled = this.#config.isEnabled();
+		} catch {
+			return;
+		}
+		if (!enabled) return;
+		let originKey;
+		try {
+			originKey = this.#config.resolveEventToKey(event.target);
+		} catch {
+			return;
+		}
+		if (originKey) this.#seenDragStarts.add(event);
+		if (!originKey) return;
+		let prepared;
+		try {
+			prepared = this.#config.prepareSelection(originKey);
+		} catch {
+			return;
+		}
+		if (!prepared || prepared.selected.length === 0) return;
+		const { origin, selected } = prepared;
+		let hostStyle;
+		try {
+			hostStyle = getComputedStyle(this.#host);
+		} catch {
+			hostStyle = document.createElement(`div`).style;
+		}
+		let metrics = {};
+		try {
+			metrics = this.#config.getMetrics() ?? {};
+		} catch {
+			metrics = {};
+		}
+		const context = {
+			source: this.#config.source,
+			origin,
+			selected,
+			metrics,
+			hostStyle
+		};
+		let renderer;
+		try {
+			renderer = this.#config.getRenderer();
+		} catch {
+			renderer = void 0;
+		}
+		let preview;
+		try {
+			preview = renderer ? renderer(context) : createDefaultListDragPreview(context);
+		} catch {
+			preview = createDefaultListDragPreview(context);
+		}
+		try {
+			document.body.appendChild(preview.element);
+		} catch {}
+		const detail = {
+			key: origin.key,
+			index: origin.index,
+			item: origin.item,
+			selectedKeys: selected.map((entry) => entry.key),
+			selected,
+			preview
+		};
+		let notCancelled = true;
+		try {
+			notCancelled = this.#config.dispatch(detail);
+		} catch {
+			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
+			};
+			try {
+				event.dataTransfer?.setDragImage(preview.element, hotspot.x, hotspot.y);
+			} catch {}
+		} else try {
+			event.preventDefault();
+		} catch {}
+		this.#dragging = true;
+		try {
+			this.#config.onActiveChange(true, origin.key);
+		} catch {}
+		requestAnimationFrame(() => {
+			try {
+				preview.element.remove();
+			} catch {}
+			try {
+				preview.dispose?.();
+			} catch {}
+		});
+	};
+	#onDragEnd = () => {
+		if (!this.#dragging) return;
+		this.#dragging = false;
+		try {
+			this.#config.onActiveChange(false);
+		} catch {}
+		try {
+			this.#config.onEnd();
+		} catch {}
+	};
+};
+//#endregion
 //#region src/interaction/list-selection-controller.ts
 /** Whether the interaction mode allows building a multi-item selection. */
 function isMultiMode(mode) {
@@ -9165,15 +9748,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);
@@ -9198,11 +9904,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.
@@ -9330,10 +10048,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
@@ -13115,6 +13903,7 @@ let DataGridElement = class DataGridElement extends i {
 		this.allowGrouping = false;
 		this.crossGroupSelection = false;
 		this.columnMenu = `auto`;
+		this.itemsDraggable = false;
 		this._columnFormatters = /* @__PURE__ */ new Map();
 		this._selectedKeys = /* @__PURE__ */ new Set();
 		this._scrollTop = 0;
@@ -13132,7 +13921,45 @@ let DataGridElement = class DataGridElement extends i {
 				id: k,
 				enabled: true
 			})),
-			onStateChange: () => this.requestUpdate()
+			onStateChange: () => this.requestUpdate(),
+			hoverDisabled: () => this.#nativeDrag.isDragging
+		});
+		this.#nativeDragging = false;
+		this.#postDragSuppressTimer = 0;
+		this.#nativeDrag = new ListNativeDragController(this, {
+			source: `data-grid`,
+			isEnabled: () => this.itemsDraggable && this.selectionMode !== `none` && this._flat.some((f) => f.type === `row`),
+			resolveEventToKey: (target) => {
+				if (!(target instanceof Element)) return void 0;
+				if (target.closest?.(`.header-cell`)) return void 0;
+				return (target.closest?.(`.row`))?.dataset.key;
+			},
+			prepareSelection: (originKey) => this.#prepareNativeDrag(originKey),
+			getMetrics: () => ({ rowHeight: this.rowHeight }),
+			getRenderer: () => this.dragPreviewRenderer,
+			dispatch: (detail) => this.dispatchEvent(new CustomEvent(`list-native-drag-start`, {
+				detail,
+				bubbles: true,
+				composed: true,
+				cancelable: true
+			})),
+			onActiveChange: (active, originKey) => {
+				this.#nativeDragging = active;
+				this.#dragOriginKey = active ? originKey : void 0;
+				this.toggleAttribute(`data-native-dragging`, active);
+				if (active) {
+					const count = this._selectedKeys.size;
+					this.setAttribute(`aria-label`, count <= 1 ? `Dragging 1 item` : `Dragging ${count} items`);
+				} else this.removeAttribute(`aria-label`);
+				this.requestUpdate();
+			},
+			onEnd: () => {
+				this.#nativeDragging = false;
+				this.#dragOriginKey = void 0;
+				this.toggleAttribute(`data-native-dragging`, false);
+				this.removeAttribute(`aria-label`);
+				this.#startPostDragSuppressTimer();
+			}
 		});
 		this._sortedRows = [];
 		this._flat = [];
@@ -13404,6 +14231,7 @@ let DataGridElement = class DataGridElement extends i {
     .row.item.tickled { background: var(--item-bg-tickled); border: var(--item-border-tickled); color: var(--item-text-tickled); }
     .row.item.selected { background: var(--item-bg-selected); border: var(--item-border-selected); color: var(--item-text-selected); }
     .row.item.selected.tickled { background: var(--item-bg-selected-tickled); }
+    .row.item.dragging-origin { opacity: 0.6; }
 
     /* Insertion / removal animation. Only while [reflowing] — the ~0.3s after
        the row set changes — do rows slide (their top transitions) to make or
@@ -13449,6 +14277,43 @@ let DataGridElement = class DataGridElement extends i {
   `
 		];
 	}
+	#nativeDragging;
+	#dragOriginKey;
+	#postDragSuppressTimer;
+	#nativeDrag;
+	#prepareNativeDrag(originKey) {
+		const rows = this._flat.filter((f) => f.type === `row`);
+		if (!rows.some((f) => f.key === originKey)) return void 0;
+		if (!this._selectedKeys.has(originKey)) this._replaceSelection(originKey);
+		const selected = [];
+		let displayIndex = 0;
+		for (const entry of rows) {
+			if (!this._selectedKeys.has(entry.key)) {
+				displayIndex++;
+				continue;
+			}
+			const rowEl = this.renderRoot.querySelector(`.row[data-key="${CSS.escape(entry.key)}"]`) ?? void 0;
+			selected.push({
+				key: entry.key,
+				index: displayIndex,
+				item: entry.row,
+				...rowEl ? { element: rowEl } : {}
+			});
+			displayIndex++;
+		}
+		const origin = selected.find((entry) => entry.key === originKey);
+		if (!origin) return void 0;
+		return {
+			origin,
+			selected
+		};
+	}
+	#startPostDragSuppressTimer() {
+		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
+		this.#postDragSuppressTimer = window.setTimeout(() => {
+			this.#postDragSuppressTimer = 0;
+		}, 0);
+	}
 	#searchRegistry;
 	#unregisterSearchCommands;
 	#searchKeyByRow;
@@ -13525,6 +14390,10 @@ let DataGridElement = class DataGridElement extends i {
 			clearTimeout(this.#rowReflowTimer);
 			this.#rowReflowTimer = 0;
 		}
+		if (this.#postDragSuppressTimer) {
+			clearTimeout(this.#postDragSuppressTimer);
+			this.#postDragSuppressTimer = 0;
+		}
 	}
 	/**
 	* Dispatch a command to this grid — routes through the command registry so
@@ -13707,6 +14576,7 @@ let DataGridElement = class DataGridElement extends i {
 		}));
 	}
 	_onRowClick(rowKey, col, e) {
+		if (this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
 		if (col && col.selectable === false) return;
 		if (this.selectionMode === `none` && this.interactionMode !== `checked` && this.interactionMode !== `sticky`) return;
 		if (this.interactionMode === `manual`) return;
@@ -14366,8 +15236,9 @@ let DataGridElement = class DataGridElement extends i {
 			const selected = this._selectedKeys.has(rowKey);
 			const tickled = this._tickled.isTickled(rowKey);
 			return b`
-                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
+                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``} ${this.#nativeDragging && rowKey === this.#dragOriginKey ? `dragging-origin` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
                   data-key=${rowKey}
+                  draggable=${this.#nativeDrag.draggableAttr}
                   @click=${(e) => {
 				this._onRowClick(rowKey, null, e);
 				this.dispatchEvent(new CustomEvent(`datagrid-cell-click`, {
@@ -14550,6 +15421,12 @@ __decorate([property({
 	attribute: `search-modes`,
 	reflect: true
 })], DataGridElement.prototype, "searchModes", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-draggable`,
+	reflect: true
+})], DataGridElement.prototype, "itemsDraggable", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "dragPreviewRenderer", void 0);
 __decorate([state()], DataGridElement.prototype, "_selectedKeys", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollTop", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollLeft", void 0);
@@ -14584,6 +15461,7 @@ let DataTableElement = class DataTableElement extends i {
 		this.styles = [
 			tickledStyles,
 			tickledItemStyles,
+			popupSurfaceStyles,
 			i$3`
       :host {
         display: block;
@@ -14723,7 +15601,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;
@@ -14802,7 +15679,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({
@@ -14846,6 +15723,7 @@ let DetailListElement = class DetailListElement extends i {
 		this.iconProperty = ``;
 		this.keyProperty = ``;
 		this.itemWrap = `stop`;
+		this.itemsDraggable = false;
 		this.#itemData = /* @__PURE__ */ new WeakMap();
 		this.#grid = [];
 		this.#positions = /* @__PURE__ */ new Map();
@@ -14881,7 +15759,41 @@ let DetailListElement = class DetailListElement extends i {
 			},
 			onStateChange: () => this._syncItemStates(),
 			itemWrap: this.itemWrap,
-			hoverDisabled: () => this.#dragSelect.isDragging
+			hoverDisabled: () => this.#dragSelect.isDragging || this.#nativeDrag.isDragging
+		});
+		this.#nativeDragging = false;
+		this.#postDragSuppressTimer = 0;
+		this.#nativeDrag = new ListNativeDragController(this, {
+			source: `detail-list`,
+			isEnabled: () => this.itemsDraggable && this.selectionMode !== `none` && this._getVisibleItems().length > 0,
+			resolveEventToKey: (target) => {
+				if (!(target instanceof Element)) return void 0;
+				const li = target.closest?.(`li`);
+				if (!li || !this.contains(li)) return void 0;
+				return keyForElement(li);
+			},
+			prepareSelection: (originKey) => this.#prepareNativeDrag(originKey),
+			getMetrics: () => ({}),
+			getRenderer: () => this.dragPreviewRenderer,
+			dispatch: (detail) => this._dispatchCancelable(`list-native-drag-start`, detail),
+			onActiveChange: (active, originKey) => {
+				this.#nativeDragging = active;
+				this.toggleAttribute(`data-native-dragging`, active);
+				for (const el of this.querySelectorAll(`li`)) el.toggleAttribute(`data-drag-origin`, active && originKey !== void 0 && keyForElement(el) === originKey);
+				if (active) {
+					const count = this.selection.selected.size;
+					this.setAttribute(`aria-label`, count <= 1 ? `Dragging 1 item` : `Dragging ${count} items`);
+				} else this.removeAttribute(`aria-label`);
+				this.requestUpdate();
+			},
+			onEnd: () => {
+				this.#nativeDragging = false;
+				this.toggleAttribute(`data-native-dragging`, false);
+				this.removeAttribute(`aria-label`);
+				for (const el of this.querySelectorAll(`li`)) el.removeAttribute(`data-drag-origin`);
+				this.#startPostDragSuppressTimer();
+			},
+			syncLightDomDraggable: () => this._syncNativeDraggable()
 		});
 		this.#dragSelect = new ListDragSelectController(this, {
 			getSurface: () => this.renderRoot.querySelector(`.container`),
@@ -14978,7 +15890,7 @@ let DetailListElement = class DetailListElement extends i {
 			}
 		};
 		this._onClick = (e) => {
-			if (this.#dragSelect.isDragging) return;
+			if (this.#dragSelect.isDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
 			const item = this._findListItem(e.composedPath());
 			if (!item) return;
 			this.focus();
@@ -15005,6 +15917,42 @@ let DetailListElement = class DetailListElement extends i {
 	#builtFromProvider;
 	#providerBuilt;
 	#data;
+	#nativeDragging;
+	#postDragSuppressTimer;
+	#nativeDrag;
+	#prepareNativeDrag(originKey) {
+		const visible = this._getVisibleItems();
+		const originEl = visible.find((el) => keyForElement(el) === originKey);
+		if (!originEl || !this._isCheckable(originEl)) return void 0;
+		if (!this.selection.selected.has(originEl)) this.selection.replace(originEl);
+		const selected = [];
+		visible.forEach((el, index) => {
+			if (!this.selection.selected.has(el)) return;
+			const key = keyForElement(el) ?? originKey;
+			selected.push({
+				key,
+				index,
+				item: this.#itemData.get(el) ?? el,
+				element: el
+			});
+		});
+		const origin = selected.find((entry) => entry.key === originKey);
+		if (!origin) return void 0;
+		return {
+			origin,
+			selected
+		};
+	}
+	_syncNativeDraggable() {
+		if (!this.isConnected) return;
+		for (const el of this.querySelectorAll(`li`)) if (el instanceof HTMLElement) el.draggable = this.itemsDraggable && this._isCheckable(el);
+	}
+	#startPostDragSuppressTimer() {
+		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
+		this.#postDragSuppressTimer = window.setTimeout(() => {
+			this.#postDragSuppressTimer = 0;
+		}, 0);
+	}
 	/** Live drag-select preview rect (surface-relative); the covered items carry `data-marquee`. */
 	#marqueeRect;
 	#dragSelect;
@@ -15107,11 +16055,16 @@ let DetailListElement = class DetailListElement extends i {
 		this.#unregisterSearchCommands?.();
 		this.#unregisterSearchCommands = void 0;
 		this.#searchRegistry = void 0;
+		if (this.#postDragSuppressTimer) {
+			clearTimeout(this.#postDragSuppressTimer);
+			this.#postDragSuppressTimer = 0;
+		}
 	}
 	firstUpdated() {
 		this.#processChildren();
 		if (this.filterPredicate) this.#applyFilterPredicate();
 		this.#recomputeGeometry();
+		this._syncNativeDraggable();
 	}
 	updated(changed) {
 		super.updated(changed);
@@ -15135,7 +16088,12 @@ let DetailListElement = class DetailListElement extends i {
 		if (changed.has(`interactionMode`)) {
 			this.selection.clearAnchor();
 			this._syncItemStates();
+			this._syncNativeDraggable();
 		} else if (changed.has(`checkboxRenderer`) && this.interactionMode === `checked`) this._syncCheckboxes();
+		if (changed.has(`itemsDraggable`)) {
+			this._syncNativeDraggable();
+			this.#nativeDrag.refreshDraggable();
+		}
 	}
 	/** The most recently selected item, or `undefined` if nothing is selected. */
 	get selectedItem() {
@@ -15700,6 +16658,14 @@ let DetailListElement = class DetailListElement extends i {
 			composed: true
 		}));
 	}
+	_dispatchCancelable(name, detail) {
+		return this.dispatchEvent(new CustomEvent(name, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
 	_activateItem(item) {
 		if (this.interactionMode !== `manual`) this.selection.replace(item);
 		this._dispatch(`list-activate`, { item });
@@ -15817,6 +16783,10 @@ let DetailListElement = class DetailListElement extends i {
       color: var(--item-text-selected);
     }
 
+    ::slotted([data-drag-origin]) {
+      opacity: 0.6;
+    }
+
     /* checked mode: the injected checkbox communicates selection — suppress bg */
     :host([interaction-mode="checked"]) ::slotted([data-selected]) {
       background: transparent;
@@ -15906,6 +16876,12 @@ __decorate([property({
 	attribute: `search-modes`,
 	reflect: true
 })], DetailListElement.prototype, "searchModes", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-draggable`,
+	reflect: true
+})], DetailListElement.prototype, "itemsDraggable", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "dragPreviewRenderer", void 0);
 __decorate([query(`ul`)], DetailListElement.prototype, "_listEl", void 0);
 DetailListElement = __decorate([safeCustomElement(`ixfx-detail-list`)], DetailListElement);
 //#endregion
@@ -21944,12 +22920,50 @@ let GridListElement = class GridListElement extends i {
 			},
 			onStateChange: () => this._syncItemStates(),
 			itemWrap: this.#itemWrap,
-			hoverDisabled: () => this.disableHoverTickle || this.#dragSelect.isDragging
+			hoverDisabled: () => this.disableHoverTickle || this.#dragSelect.isDragging || this.#nativeDrag.isDragging
 		});
 		this.#marqueePreview = /* @__PURE__ */ new Set();
 		this.#nativeDragging = false;
 		this.#dragOriginKey = void 0;
 		this.#postDragSuppressTimer = 0;
+		this.#nativeDrag = new ListNativeDragController(this, {
+			source: `grid-list`,
+			isEnabled: () => this.itemsDraggable && this.selectionMode !== `none` && this.#source.count > 0,
+			resolveEventToKey: (target) => {
+				if (target instanceof Element) {
+					const key = (target.closest?.(`.cell`))?.dataset.key;
+					if (key) return key;
+					const keyed = (target.closest?.(`[data-key]`))?.dataset.key ?? target.dataset?.key ?? keyForElement(target);
+					if (keyed) return keyed;
+				}
+			},
+			prepareSelection: (originKey) => this.#prepareNativeDrag(originKey),
+			getMetrics: () => ({
+				itemSize: this.itemSize,
+				captionStyle: this.captionStyle,
+				captionHeight: this.captionHeight,
+				rowHeight: this.#rowHeight()
+			}),
+			getRenderer: () => this.dragPreviewRenderer,
+			dispatch: (detail) => this._dispatch(`list-native-drag-start`, detail, true),
+			onActiveChange: (active, originKey) => {
+				this.#nativeDragging = active;
+				this.#dragOriginKey = active ? originKey : void 0;
+				this.toggleAttribute(`data-native-dragging`, active);
+				if (active) {
+					const count = [...this.selection.selectedKeys].filter((k) => !isSyntheticKey(k)).length;
+					this.setAttribute(`aria-label`, count <= 1 ? `Dragging 1 item` : `Dragging ${count} items`);
+				} else this.removeAttribute(`aria-label`);
+				this.requestUpdate();
+			},
+			onEnd: () => {
+				this.#clearNativeDragState();
+				this.#startPostDragSuppressTimer();
+			},
+			syncLightDomDraggable: () => {
+				for (const child of this.children) if (child instanceof HTMLElement) child.draggable = this.itemsDraggable;
+			}
+		});
 		this.#activeCaptionPan = null;
 		this.#dragSelect = new ListDragSelectController(this, {
 			getSurface: () => this.#viewportRef.value,
@@ -21995,23 +23009,6 @@ let GridListElement = class GridListElement extends i {
 				this.#emitViewportChange();
 			});
 		};
-		this.#onDragStart = (e, key) => {
-			this.#doDragStart(key, () => e.preventDefault(), e);
-		};
-		this.#onSlottedDragStart = (e) => {
-			if (!this.itemsDraggable) return;
-			let cell = e.composedPath().find((n) => n instanceof Element && n.classList.contains(`cell`));
-			if (!cell && e.target instanceof Element) cell = e.target.closest?.(`.cell`);
-			if (!cell) return;
-			const key = cell.dataset.key;
-			if (!key) return;
-			if (e instanceof DragEvent) this.#doDragStart(key, () => e.preventDefault(), e);
-			else this.#doDragStart(key, () => {});
-		};
-		this.#onDragEnd = () => {
-			this.#clearNativeDragState();
-			this.#startPostDragSuppressTimer();
-		};
 		this._onKeyDown = (e) => {
 			if ((e.ctrlKey || e.metaKey) && e.key === `f`) return;
 			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
@@ -22448,6 +23445,35 @@ let GridListElement = class GridListElement extends i {
 	#dragOriginKey;
 	/** Timer handle for post-drag click suppression. */
 	#postDragSuppressTimer;
+	#nativeDrag;
+	/** Origin rule + display-ordered entry resolution for native drag-out (both modes). */
+	#prepareNativeDrag(originKey) {
+		const index = this.#source.indexOfKey(originKey);
+		if (index < 0 || !this.#source.isSelectable(index)) return void 0;
+		if (!this.selection.selectedKeys.has(originKey)) this.selection.replace(originKey);
+		const ordered = this.#source.keys().filter((k) => !isSyntheticKey(k) && this.selection.selectedKeys.has(k));
+		const selected = [];
+		for (const key of ordered) {
+			const entryIndex = this.#source.indexOfKey(key);
+			if (entryIndex < 0) continue;
+			const data = this.#source.resolveKeyToData(key);
+			const element = this.#source.resolveKeyToElement(key);
+			const item = data ?? element;
+			if (item === void 0) continue;
+			selected.push({
+				key,
+				index: entryIndex,
+				item,
+				...element ? { element } : {}
+			});
+		}
+		const origin = selected.find((entry) => entry.key === originKey);
+		if (!origin) return void 0;
+		return {
+			origin,
+			selected
+		};
+	}
 	/**
 	* The single caption pan-text currently scrolling. At most one caption is
 	* a pan-text in loop mode at a time — when tickle moves, the old one is
@@ -22580,7 +23606,7 @@ let GridListElement = class GridListElement extends i {
 			clearTimeout(this.#reflowTimer);
 			this.#reflowTimer = 0;
 		}
-		if (this.#nativeDragging) this.#clearNativeDragState();
+		if (this.#nativeDragging || this.#nativeDrag.isDragging) this.#clearNativeDragState();
 	}
 	#onChildrenChanged(records) {
 		const previousLength = this.#items.length;
@@ -22661,7 +23687,7 @@ let GridListElement = class GridListElement extends i {
 		this.#measureViewport(false);
 		this.#syncItems();
 		this.requestUpdate();
-		this.#initSlottedDragInterceptor();
+		this.#nativeDrag.refreshDraggable();
 	}
 	/** (Re)construct {@link #source} for the current mode and re-apply the filters. */
 	#rebuildSource() {
@@ -22751,7 +23777,7 @@ let GridListElement = class GridListElement extends i {
 			this.selection.clearAnchor();
 			this.#syncAriaMultiselectable();
 		}
-		if (changed.has(`itemsDraggable`)) this.#syncSlottedDraggable();
+		if (changed.has(`itemsDraggable`)) this.#nativeDrag.refreshDraggable();
 		if (changed.has(`orientation`)) {
 			const vp = this.#viewportRef.value;
 			if (vp) {
@@ -23170,8 +24196,6 @@ let GridListElement = class GridListElement extends i {
         @click=${(e) => this.#onCellClick(e, key)}
         @dblclick=${() => this.#onCellActivate(key)}
         @pointerenter=${() => this.tickled.handlePointerEnter(key)}
-        @dragstart=${(e) => this.#onDragStart(e, key)}
-        @dragend=${() => this.#onDragEnd()}
       >
         <div class="content" part="content">${this.#source.renderCellContent(index)}</div>
         ${showCaption ? this.#renderCaption(caption, captionCss, tickled) : ``}
@@ -23256,8 +24280,6 @@ let GridListElement = class GridListElement extends i {
         @click=${(e) => this.#onCellClick(e, key)}
         @dblclick=${() => this.#onCellActivate(key)}
         @pointerenter=${() => this.tickled.handlePointerEnter(key)}
-        @dragstart=${(e) => this.#onDragStart(e, key)}
-        @dragend=${() => this.#onDragEnd()}
       >
         <div class="thumb" part="thumb" style=${thumbStyle}>
           ${this.#source.renderCellContent(index)}
@@ -23274,145 +24296,10 @@ let GridListElement = class GridListElement extends i {
 		}
 	}
 	#onCellClick(e, key) {
-		if (this.#dragSelect.isDragging || this.#nativeDragging || this.#postDragSuppressTimer !== 0) return;
+		if (this.#dragSelect.isDragging || this.#nativeDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
 		this.selection.handleClick(key, e);
 		this.#emitItemEvent(`list-item-click`, key);
 	}
-	#doDragStart(key, cancelled, dragEvent) {
-		if (!this.itemsDraggable) return false;
-		const index = this.#source.indexOfKey(key);
-		if (index < 0 || !this.#source.isSelectable(index)) return false;
-		if (!this.selection.selectedKeys.has(key)) this.selection.replace(key);
-		const selectedKeys = this.#source.keys().filter((k) => !isSyntheticKey(k)).filter((k) => this.selection.selectedKeys.has(k));
-		const detail = {
-			key,
-			index: this.#source.indexOfKey(key),
-			item: this.#source.resolveKeyToData(key) ?? this.#source.resolveKeyToElement(key),
-			selectedKeys
-		};
-		if (!this._dispatch(`grid-list-native-drag-start`, detail, true)) {
-			cancelled();
-			return false;
-		}
-		this.#nativeDragging = true;
-		this.#dragOriginKey = key;
-		this.toggleAttribute(`data-native-dragging`, true);
-		const count = selectedKeys.length;
-		this.setAttribute(`aria-label`, count === 1 ? `Dragging 1 item` : `Dragging ${count} items`);
-		if (dragEvent && count > 1) this.#setMultiItemDragImage(dragEvent, selectedKeys);
-		return true;
-	}
-	#setMultiItemDragImage(e, selectedKeys) {
-		const preview = this.#createMultiItemPreview(selectedKeys);
-		document.body.appendChild(preview);
-		const rect = preview.getBoundingClientRect();
-		e.dataTransfer?.setDragImage(preview, rect.width / 2, rect.height / 2);
-		requestAnimationFrame(() => preview.remove());
-	}
-	#createMultiItemPreview(selectedKeys) {
-		const preview = document.createElement(`div`);
-		preview.style.cssText = `
-      position: fixed;
-      top: -9999px;
-      left: -9999px;
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      padding: 8px;
-      background: var(--surface-4, #333);
-      border: 1px solid var(--border, #555);
-      border-radius: 8px;
-      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
-      font-family: system-ui, sans-serif;
-      font-size: 12px;
-      color: var(--surface-text, #fff);
-      max-width: 200px;
-      z-index: 999999;
-    `;
-		const header = document.createElement(`div`);
-		header.style.cssText = `
-      font-weight: 600;
-      padding-bottom: 4px;
-      border-bottom: 1px solid var(--border, #555);
-      margin-bottom: 4px;
-    `;
-		header.textContent = `${selectedKeys.length} items`;
-		preview.appendChild(header);
-		for (const key of selectedKeys.slice(0, 5)) {
-			const row = this.#createPreviewRow(key);
-			if (row) preview.appendChild(row);
-		}
-		if (selectedKeys.length > 5) {
-			const more = document.createElement(`div`);
-			more.style.cssText = `opacity: 0.6; text-align: center;`;
-			more.textContent = `+${selectedKeys.length - 5} more`;
-			preview.appendChild(more);
-		}
-		return preview;
-	}
-	#createPreviewRow(key) {
-		const el = this.#source.resolveKeyToElement(key);
-		if (!el) return null;
-		const row = document.createElement(`div`);
-		row.style.cssText = `
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    `;
-		const thumb = document.createElement(`div`);
-		thumb.style.cssText = `
-      width: 32px;
-      height: 32px;
-      border-radius: 4px;
-      overflow: hidden;
-      background: var(--surface-5, #444);
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    `;
-		const slottedImg = el.querySelector(`img`);
-		const slottedSvg = el.querySelector(`svg`);
-		const slottedPlaceholder = el.querySelector(`.placeholder`);
-		if (slottedImg) {
-			const img = slottedImg.cloneNode(true);
-			img.style.cssText = `width: 100%; height: 100%; object-fit: cover;`;
-			thumb.appendChild(img);
-		} else if (slottedSvg) {
-			const svg = slottedSvg.cloneNode(true);
-			svg.style.cssText = `width: 70%; height: 70%; opacity: 0.8;`;
-			thumb.appendChild(svg);
-		} else if (slottedPlaceholder) thumb.textContent = slottedPlaceholder.textContent || `?`;
-		const label = document.createElement(`span`);
-		label.style.cssText = `
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `;
-		label.textContent = el.getAttribute(`data-label`) || key;
-		row.appendChild(thumb);
-		row.appendChild(label);
-		return row;
-	}
-	#onDragStart;
-	#onSlottedDragStart;
-	#initSlottedDragInterceptor() {
-		this.renderRoot.addEventListener(`dragstart`, this.#onSlottedDragStart, { capture: true });
-		const observer = new MutationObserver(() => this.#syncSlottedDraggable());
-		observer.observe(this, {
-			childList: true,
-			subtree: true
-		});
-		this.#slottedDragObserver = observer;
-		this.#syncSlottedDraggable();
-	}
-	#slottedDragObserver;
-	#syncSlottedDraggable() {
-		const draggable = this.itemsDraggable;
-		for (const child of this.children) if (child instanceof HTMLElement) child.draggable = draggable;
-	}
-	#onDragEnd;
 	#startPostDragSuppressTimer() {
 		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
 		this.#postDragSuppressTimer = window.setTimeout(() => {
@@ -23487,6 +24374,7 @@ __decorate([property({
 	attribute: `items-draggable`,
 	reflect: true
 })], GridListElement.prototype, "itemsDraggable", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "dragPreviewRenderer", void 0);
 __decorate([property({
 	type: String,
 	attribute: `search-modes`,
@@ -23881,6 +24769,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;
@@ -23893,6 +25135,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: () => {
@@ -23901,6 +25147,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);
 			}
@@ -23915,8 +25162,14 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		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();
@@ -24068,8 +25321,40 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	#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();
@@ -24088,12 +25373,12 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			}
 		}
 		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). */
@@ -24130,18 +25415,38 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		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() : [];
@@ -24151,12 +25456,16 @@ 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();
 			this.#clearSelectionInternal();
 			this.tickled.clearTickled();
 			this._focusedDepth = 0;
+			this.#cancelAllLeavingAnimations();
+			this.#leaving.clear();
+			this.#enteringKeys.clear();
 		}
 		if (changedProps.has(`model`)) {
 			this.#modelUnsubscribe?.();
@@ -24204,13 +25513,307 @@ 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();
+		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`);
@@ -24385,6 +25988,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);
@@ -24819,6 +26423,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);
@@ -24827,9 +26448,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}
@@ -24837,6 +26459,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);
@@ -24850,6 +26474,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>
@@ -24867,9 +26496,13 @@ let TreeBaseElement = class TreeBaseElement extends i {
       --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;
@@ -24897,10 +26530,11 @@ 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);
-      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);
@@ -24972,11 +26606,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;
     }
   `
 		];
@@ -25010,6 +26682,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);
@@ -25091,9 +26788,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}
@@ -25101,9 +26799,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>
@@ -25371,6 +27076,7 @@ let VerticalListElement = class VerticalListElement extends i {
 		this.selectionMode = `single`;
 		this.interactionMode = `standard`;
 		this.itemWrap = `stop`;
+		this.itemsDraggable = false;
 		this.#customWrappers = /* @__PURE__ */ new Map();
 		this.#wrappedElements = /* @__PURE__ */ new Set();
 		this.#animatedItems = /* @__PURE__ */ new WeakSet();
@@ -25401,7 +27107,41 @@ let VerticalListElement = class VerticalListElement extends i {
 			},
 			onStateChange: () => this._syncItemStates(),
 			itemWrap: this.itemWrap,
-			hoverDisabled: () => this.#dragSelect.isDragging
+			hoverDisabled: () => this.#dragSelect.isDragging || this.#nativeDrag.isDragging
+		});
+		this.#nativeDragging = false;
+		this.#postDragSuppressTimer = 0;
+		this.#nativeDrag = new ListNativeDragController(this, {
+			source: `vertical-list`,
+			isEnabled: () => this.itemsDraggable && this.selectionMode !== `none` && this._getVisibleItems().length > 0,
+			resolveEventToKey: (target) => {
+				if (!(target instanceof Element)) return void 0;
+				const item = target.closest?.(ITEM_SELECTOR);
+				if (!item || !this.contains(item) || this.#wrappedElements.has(item)) return void 0;
+				return keyForElement(item);
+			},
+			prepareSelection: (originKey) => this.#prepareNativeDrag(originKey),
+			getMetrics: () => ({}),
+			getRenderer: () => this.dragPreviewRenderer,
+			dispatch: (detail) => this._dispatchCancelable(`list-native-drag-start`, detail),
+			onActiveChange: (active, originKey) => {
+				this.#nativeDragging = active;
+				this.toggleAttribute(`data-native-dragging`, active);
+				for (const el of this._getVisibleItems()) el.toggleAttribute(`data-drag-origin`, active && originKey !== void 0 && keyForElement(el) === originKey);
+				if (active) {
+					const count = this.selection.selected.size;
+					this.setAttribute(`aria-label`, count <= 1 ? `Dragging 1 item` : `Dragging ${count} items`);
+				} else this.removeAttribute(`aria-label`);
+				this.requestUpdate();
+			},
+			onEnd: () => {
+				this.#nativeDragging = false;
+				this.toggleAttribute(`data-native-dragging`, false);
+				this.removeAttribute(`aria-label`);
+				for (const el of this._getVisibleItems()) el.removeAttribute(`data-drag-origin`);
+				this.#startPostDragSuppressTimer();
+			},
+			syncLightDomDraggable: () => this._syncNativeDraggable()
 		});
 		this.#dragSelect = new ListDragSelectController(this, {
 			getSurface: () => this.renderRoot.querySelector(`.container`),
@@ -25483,7 +27223,7 @@ let VerticalListElement = class VerticalListElement extends i {
 			}
 		};
 		this._onClick = (e) => {
-			if (this.#dragSelect.isDragging) return;
+			if (this.#dragSelect.isDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
 			const item = this._findListItem(e.composedPath());
 			if (!item) return;
 			this._dispatch(`list-item-click`, { item });
@@ -25500,6 +27240,44 @@ let VerticalListElement = class VerticalListElement extends i {
 	#itemObserver;
 	/** Items that have already played (or been skipped for) their enter animation. */
 	#animatedItems;
+	#nativeDragging;
+	#postDragSuppressTimer;
+	#nativeDrag;
+	#prepareNativeDrag(originKey) {
+		const visible = this._getVisibleItems();
+		const originEl = visible.find((el) => keyForElement(el) === originKey);
+		if (!originEl || !this._isCheckable(originEl)) return void 0;
+		if (!this.selection.selected.has(originEl)) this.selection.replace(originEl);
+		const selected = [];
+		visible.forEach((el, index) => {
+			if (!this.selection.selected.has(el)) return;
+			selected.push({
+				key: keyForElement(el) ?? originKey,
+				index,
+				item: el,
+				element: el
+			});
+		});
+		const origin = selected.find((entry) => entry.key === originKey);
+		if (!origin) return void 0;
+		return {
+			origin,
+			selected
+		};
+	}
+	_syncNativeDraggable() {
+		if (!this.isConnected) return;
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
+			if (this.#wrappedElements.has(el)) continue;
+			if (el instanceof HTMLElement) el.draggable = this.itemsDraggable && this._isCheckable(el);
+		}
+	}
+	#startPostDragSuppressTimer() {
+		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
+		this.#postDragSuppressTimer = window.setTimeout(() => {
+			this.#postDragSuppressTimer = 0;
+		}, 0);
+	}
 	/** Live drag-select preview rect (surface-relative); the covered items carry `data-marquee`. */
 	#marqueeRect;
 	#dragSelect;
@@ -25567,6 +27345,10 @@ let VerticalListElement = class VerticalListElement extends i {
 		this.#unregisterSearchCommands?.();
 		this.#unregisterSearchCommands = void 0;
 		this.#searchRegistry = void 0;
+		if (this.#postDragSuppressTimer) {
+			clearTimeout(this.#postDragSuppressTimer);
+			this.#postDragSuppressTimer = 0;
+		}
 	}
 	/**
 	* Animate in items appended to the light DOM (however they got there —
@@ -25606,6 +27388,10 @@ let VerticalListElement = class VerticalListElement extends i {
 			}
 			this._syncItemStates();
 		} else if (changed.has(`checkboxRenderer`) && this.interactionMode === `checked`) this._syncCheckboxes();
+		if (changed.has(`itemsDraggable`) || changed.has(`interactionMode`)) {
+			this._syncNativeDraggable();
+			this.#nativeDrag.refreshDraggable();
+		}
 	}
 	/** The most recently selected item, or `undefined` if nothing is selected. */
 	get selectedItem() {
@@ -25875,6 +27661,14 @@ let VerticalListElement = class VerticalListElement extends i {
 			composed: true
 		}));
 	}
+	_dispatchCancelable(name, detail) {
+		return this.dispatchEvent(new CustomEvent(name, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
 	_activateItem(item) {
 		if (this.interactionMode !== `manual`) this.selection.replace(item);
 		this._dispatch(`list-activate`, { item });
@@ -26010,6 +27804,10 @@ let VerticalListElement = class VerticalListElement extends i {
       color: var(--item-text-selected);
     }
 
+    ::slotted([data-drag-origin]) {
+      opacity: 0.6;
+    }
+
     /* checked mode: checkbox (injected into li) communicates selection — suppress bg highlight */
     :host([interaction-mode="checked"]) ::slotted([data-selected]) {
       background: transparent;
@@ -26056,6 +27854,12 @@ __decorate([property({
 	attribute: `search-modes`,
 	reflect: true
 })], VerticalListElement.prototype, "searchModes", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-draggable`,
+	reflect: true
+})], VerticalListElement.prototype, "itemsDraggable", void 0);
+__decorate([property({ attribute: false })], VerticalListElement.prototype, "dragPreviewRenderer", void 0);
 VerticalListElement = __decorate([safeCustomElement(`ixfx-vertical-list`)], VerticalListElement);
 //#endregion
 //#region src/grouped-item-lister/vertical-list-adapter.ts
@@ -28542,6 +30346,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". */
@@ -29455,14 +31330,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;
@@ -29539,10 +31410,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) {
@@ -33161,7 +35032,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;
@@ -42587,6 +44458,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, 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, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createDataListSearchAdapter, 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, 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