@ixfx/components 0.13.5 → 0.13.7

package/dist/miller.js

@@ -39,6 +39,8 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			}
 			return items;
 		} });
+		this.#selectOrigin = `user`;
+		this.#selectSilent = false;
 		this.#onKeyDown = (event) => {
 			if (this.search.isOpen) return;
 			const currentDepth = this.#getTickledDepthOrDefault();
@@ -403,14 +405,47 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 	* Programmatically navigate to a node by key path, relative to the current
 	* view root (rebased or full tree).
 	*/
-	navigateTo(keys) {
+	navigateTo(keys, options = {}) {
 		const display = this.#displayRoot;
 		if (!display?.children) return false;
+		const prevOrigin = this.#selectOrigin;
+		const prevSilent = this.#selectSilent;
+		this.#selectOrigin = `programmatic`;
+		this.#selectSilent = options.silent === true;
+		try {
+			return this.#navigateTo(display.children, keys, options.reveal ?? `edge`);
+		} finally {
+			this.#selectOrigin = prevOrigin;
+			this.#selectSilent = prevSilent;
+		}
+	}
+	/**
+	* Re-sync the element with children arrays patched in place (see
+	* `MillerTreeController.sync()`): columns whose selected node was removed are
+	* closed, selection entries for removed nodes are dropped, then it re-renders.
+	*/
+	invalidateStructure() {
+		const present = /* @__PURE__ */ new Set();
+		for (const col of this._columns) for (const n of col) present.add(n);
+		for (let depth = 0; depth < this._columns.length; depth++) {
+			const selected = this._selectedByDepth.get(depth);
+			if (selected && !this._columns[depth].includes(selected)) {
+				this._columns = this._columns.slice(0, depth + 1);
+				for (const d of [...this._selectedByDepth.keys()]) if (d >= depth) this._selectedByDepth.delete(d);
+				break;
+			}
+		}
+		for (const n of [...this._selectedNodes]) if (!present.has(n)) this._selectedNodes.delete(n);
+		this.requestUpdate();
+	}
+	#selectOrigin;
+	#selectSilent;
+	#navigateTo(rootColumn, keys, reveal) {
 		this.#abortPending();
 		this._selectedByDepth.clear();
 		this.tickled.clearTickled();
-		const newColumns = [display.children];
-		let currentColumn = display.children;
+		const newColumns = [rootColumn];
+		let currentColumn = rootColumn;
 		let success = true;
 		let lastNode;
 		let lastDepth = 0;
@@ -438,7 +473,7 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			if (leafKey) this._selectedKeys = /* @__PURE__ */ new Set([leafKey]);
 		}
 		this.requestUpdate();
-		this.#scrollNavigatedItemIntoView();
+		this.#scrollNavigatedItemIntoView(reveal === `center-if-hidden` ? `auto` : `smooth`, reveal);
 		return success;
 	}
 	/**
@@ -718,9 +753,11 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 		return true;
 	}
 	#dispatchSelectEvent(previous) {
+		if (this.#selectSilent) return;
 		const detail = {
 			selected: new Set(this._selectedNodes),
-			previous
+			previous,
+			origin: this.#selectOrigin
 		};
 		this.dispatchEvent(new CustomEvent(`select`, {
 			detail,
@@ -990,13 +1027,26 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			index
 		};
 	}
-	#scrollNavigatedItemIntoView(behavior = `smooth`) {
+	#scrollNavigatedItemIntoView(behavior = `smooth`, reveal = `edge`) {
 		requestAnimationFrame(() => {
 			const tickled = this.#getTickledNodeAndDepth();
 			if (!tickled) return;
 			const container = this.shadowRoot?.querySelectorAll(`.column`)[tickled.depth]?.querySelector(`.column-content`);
 			if (!container) return;
-			container.querySelectorAll(`.item`)[tickled.index]?.scrollIntoView({
+			const item = container.querySelectorAll(`.item`)[tickled.index];
+			if (!item) return;
+			if (reveal === `center-if-hidden`) {
+				const rect = item.getBoundingClientRect();
+				const box = container.getBoundingClientRect();
+				const hidden = rect.top < box.top || rect.bottom > box.bottom;
+				item.scrollIntoView({
+					block: hidden ? `center` : `nearest`,
+					inline: `nearest`,
+					behavior
+				});
+				return;
+			}
+			item.scrollIntoView({
 				block: `nearest`,
 				behavior
 			});
@@ -1562,6 +1612,10 @@ var MillerTreeController = class {
 	#options;
 	#nodeToTree = /* @__PURE__ */ new WeakMap();
 	#identityToMillerNode = /* @__PURE__ */ new Map();
+	#keyToTreeNode = /* @__PURE__ */ new Map();
+	#identityToTree = /* @__PURE__ */ new Map();
+	/** `valueToItem` results per source node identity; replaced wholesale by `sync()`. */
+	#itemCache = /* @__PURE__ */ new WeakMap();
 	#connectSignal;
 	constructor(root, element, options) {
 		this.#root = root;
@@ -1575,18 +1629,19 @@ var MillerTreeController = class {
 	connect() {
 		this.disconnect();
 		this.#connectSignal = new AbortController();
-		const rootValue = this.#root.getValue();
-		const rootItem = this.#options.valueToItem(rootValue, this.#root);
-		const rootChildren = this.#childrenOf(this.#root);
-		this.#element.root = {
-			item: rootItem,
-			children: rootChildren
-		};
-		this.#element.loadChildren = ({ node }) => {
+		this.#itemCache = /* @__PURE__ */ new WeakMap();
+		this.#identityToMillerNode.clear();
+		this.#identityToTree.clear();
+		this.#keyToTreeNode.clear();
+		const rootNode = { item: this.#itemOf(this.#root) };
+		this.#nodeToTree.set(rootNode, this.#root);
+		rootNode.children = this.#childrenOf(this.#root);
+		this.#element.root = rootNode;
+		this.#element.loadChildren = this.#options.loadChildren ?? (({ node }) => {
 			const treeNode = this.#nodeToTree.get(node);
 			if (!treeNode) return [];
 			return this.#childrenOf(treeNode);
-		};
+		});
 	}
 	/** Remove all event listeners and release internal state. */
 	disconnect() {
@@ -1606,46 +1661,110 @@ var MillerTreeController = class {
 	*
 	* Returns `false` if no matching node is found.
 	*/
-	navigateToValue(predicate) {
+	navigateToValue(predicate, options) {
 		const treePath = this.#findTreePath(this.#root, predicate);
 		if (!treePath) return false;
+		return this.#navigateToPath(treePath, options);
+	}
+	/**
+	* Navigate using item keys **relative to the element's current view root**
+	* (the real root when not rebased). Ancestors with unloaded children are
+	* populated first. Returns `false` if a key is missing.
+	*/
+	navigateToKeyPath(keys, options) {
+		const base = this.#element.viewRoot ?? this.#element.root;
+		if (!base || keys.length === 0) return false;
+		this.#ensureChildren(base);
+		let column = base.children ?? [];
+		for (let i = 0; i < keys.length - 1; i++) {
+			const node = column.find((n) => n.item.key === keys[i]);
+			if (!node) return false;
+			this.#ensureChildren(node);
+			column = node.children ?? [];
+		}
+		return this.#element.navigateTo(keys, options);
+	}
+	/**
+	* Navigate to the source node with this identity. Returns `false` when it is
+	* unknown or lies outside a rebased view (keys are relative to the view root).
+	*/
+	navigateToIdentity(identity, options) {
+		const target = this.#treeNodeByIdentity(identity);
+		if (!target) return false;
+		const path = [];
+		const rootId = this.#root.getIdentity();
+		for (let n = target; n; n = n.getParent()) {
+			path.unshift(n);
+			if (n.getIdentity() === rootId) return this.#navigateToPath(path, options);
+		}
+		return false;
+	}
+	/** The source node whose item key is `key`, if it has been materialised. */
+	lookupByKey(key) {
+		return this.#keyToTreeNode.get(key);
+	}
+	/**
+	* Re-derive children for every already-materialised node from the source tree
+	* and patch them in place. Children arrays are mutated (not replaced) so open
+	* columns keep their references, and `MillerNode`s are reused by key so
+	* selection survives. A rebased `viewRoot` is reset only if its node was
+	* removed. `loadChildren` is left alone. Refreshes the element once.
+	*/
+	sync() {
+		const root = this.#element.root;
+		if (!root) return;
+		this.#itemCache = /* @__PURE__ */ new WeakMap();
+		this.#identityToMillerNode.clear();
+		this.#identityToTree.clear();
+		this.#keyToTreeNode.clear();
+		this.#nodeToTree.set(root, this.#root);
+		root.item = this.#itemOf(this.#root);
+		const kept = /* @__PURE__ */ new Set([root]);
+		if (root.children) this.#syncChildren(this.#root, root.children, kept);
+		const view = this.#element.viewRoot;
+		if (view && !kept.has(view)) this.#element.viewRoot = void 0;
+		this.#element.invalidateStructure();
+	}
+	#navigateToPath(treePath, options) {
 		const base = this.#element.viewRoot ?? this.#element.root;
 		if (!base) return false;
 		let startIndex = 1;
 		if (this.#element.viewRoot) {
 			const mappedBase = this.#nodeToTree.get(base);
 			if (!mappedBase) return false;
-			const baseIndex = treePath.indexOf(mappedBase);
+			const baseId = mappedBase.getIdentity();
+			const baseIndex = treePath.findIndex((n) => n.getIdentity() === baseId);
 			if (baseIndex < 0) return false;
 			startIndex = baseIndex + 1;
-			if (base.children === void 0) base.children = this.#childrenOf(mappedBase);
 		}
-		let currentColumn = base.children ?? [];
-		const keys = [];
-		for (let i = startIndex; i < treePath.length; i++) {
-			const treeNode = treePath[i];
-			const key = this.#options.valueToItem(treeNode.getValue(), treeNode).key;
-			keys.push(key);
-			if (i < treePath.length - 1) {
-				const millerNode = currentColumn.find((n) => n.item.key === key);
-				if (!millerNode) return false;
-				if (millerNode.children === void 0) {
-					const mapped = this.#nodeToTree.get(millerNode);
-					if (mapped) millerNode.children = this.#childrenOf(mapped);
-				}
-				currentColumn = millerNode.children ?? [];
-			}
+		if (startIndex >= treePath.length) return false;
+		return this.navigateToKeyPath(treePath.slice(startIndex).map((n) => this.#itemOf(n).key), options);
+	}
+	#ensureChildren(node) {
+		if (node.children !== void 0) return;
+		const mapped = this.#nodeToTree.get(node);
+		if (mapped) node.children = this.#childrenOf(mapped);
+	}
+	#treeNodeByIdentity(identity) {
+		return this.#identityToTree.get(identity);
+	}
+	#itemOf(treeNode) {
+		const id = treeNode.getIdentity();
+		let item = this.#itemCache.get(id);
+		if (!item) {
+			item = this.#options.valueToItem(treeNode.getValue(), treeNode);
+			this.#itemCache.set(id, item);
 		}
-		return this.#element.navigateTo(keys);
+		return item;
 	}
 	/** Convert a TraversableTree node's children to MillerNode[]. */
 	#childrenOf(treeNode) {
 		return Array.from(treeNode.children(), (child) => this.#toMillerNode(child));
 	}
 	#toMillerNode(treeNode) {
-		const value = treeNode.getValue();
 		const childList = [...treeNode.children()];
-		const userItem = this.#options.valueToItem(value, treeNode);
+		for (const child of childList) this.#identityToTree.set(child.getIdentity(), child);
+		const userItem = this.#itemOf(treeNode);
 		const isLeaf = userItem.isLeaf ?? childList.length === 0;
 		const millerNode = {
 			item: {
@@ -1654,10 +1773,35 @@ var MillerTreeController = class {
 			},
 			children: isLeaf ? [] : void 0
 		};
-		this.#nodeToTree.set(millerNode, treeNode);
-		this.#identityToMillerNode.set(treeNode.getIdentity(), millerNode);
+		this.#register(millerNode, treeNode);
 		return millerNode;
 	}
+	#register(node, treeNode) {
+		this.#nodeToTree.set(node, treeNode);
+		this.#identityToMillerNode.set(treeNode.getIdentity(), node);
+		this.#identityToTree.set(treeNode.getIdentity(), treeNode);
+		this.#keyToTreeNode.set(node.item.key, treeNode);
+	}
+	/** Patch `existing` (in place) to match the source children of `treeNode`; recurse into loaded nodes. */
+	#syncChildren(treeNode, existing, kept) {
+		const byKey = new Map(existing.map((n) => [n.item.key, n]));
+		const next = Array.from(treeNode.children(), (child) => {
+			const fresh = this.#toMillerNode(child);
+			const old = byKey.get(fresh.item.key);
+			if (!old) {
+				kept.add(fresh);
+				return fresh;
+			}
+			old.item = fresh.item;
+			this.#register(old, child);
+			kept.add(old);
+			if (fresh.item.isLeaf) old.children = [];
+			else if (old.children !== void 0) this.#syncChildren(child, old.children, kept);
+			else old.children = void 0;
+			return old;
+		});
+		existing.splice(0, existing.length, ...next);
+	}
 	/** DFS through the ixfx tree returning the path of nodes to the first match. */
 	#findTreePath(node, predicate, ancestors = []) {
 		const path = [...ancestors, node];

package/dist/{tree-Df00opxv.js → tree-BjrfaX7d.js}

@@ -1027,6 +1027,19 @@ function treeScrollTopToReveal(params, index, scrollTop, topInset = 0) {
 	if (bottom > scrollTop + params.viewportHeight) return Math.max(0, bottom - params.viewportHeight);
 	return scrollTop;
 }
+/**
+* `scrollTop` that centres row `index` in the viewport, but only when the row is
+* not already fully visible (below `topInset` px of overlay). Otherwise returns
+* `scrollTop` unchanged.
+*/
+function treeScrollTopToCenterIfHidden(params, index, scrollTop, topInset = 0) {
+	if (index < 0 || index >= params.count) return scrollTop;
+	const top = treeRowTop(params, index);
+	const bottom = top + params.rowHeight;
+	if (top >= scrollTop + topInset && bottom <= scrollTop + params.viewportHeight) return scrollTop;
+	const centred = top + params.rowHeight / 2 - (params.viewportHeight + topInset) / 2;
+	return Math.max(0, centred);
+}
 /** Rows that fit one viewport (PageUp / PageDown step), at least 1. */
 function treePageSize(params) {
 	return Math.max(1, Math.floor(params.viewportHeight / treeStride(params)) - 1);
@@ -1166,6 +1179,8 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.#stickyDirty = true;
 		this.#stickyRaf = 0;
 		this.#stickyScrollBound = false;
+		this.#selectOrigin = `user`;
+		this.#selectSilent = false;
 		this.#revealToken = 0;
 		this.#onKeyDown = (event) => {
 			if (this.search.isOpen) return;
@@ -1467,12 +1482,12 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	* container's `scrollTop` and `_scrollTop` together, so the very next render
 	* already contains the target row — no frame where it is missing.
 	*/
-	#revealIndex(index) {
+	#revealIndex(index, mode = `edge`) {
 		const container = this.#container();
 		if (!container) return;
 		const params = this.#layoutParams(this.#getFlat().rows.length);
 		const inset = this.renderRoot.querySelector(`.sticky-headers`)?.getBoundingClientRect().height ?? 0;
-		const next = treeScrollTopToReveal(params, index, container.scrollTop, inset);
+		const next = (mode === `center-if-hidden` ? treeScrollTopToCenterIfHidden : treeScrollTopToReveal)(params, index, container.scrollTop, inset);
 		if (next === container.scrollTop && next === this._scrollTop) return;
 		container.scrollTop = next;
 		this._scrollTop = next;
@@ -2371,8 +2386,20 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.#dispatchSelect(prev);
 		this.requestUpdate();
 	}
-	navigateTo(keys) {
+	navigateTo(keys, options = {}) {
 		if (!this.root?.children) return false;
+		const prevOrigin = this.#selectOrigin;
+		const prevSilent = this.#selectSilent;
+		this.#selectOrigin = `programmatic`;
+		this.#selectSilent = options.silent === true;
+		try {
+			return this.#navigateTo(keys, options.reveal ?? `edge`);
+		} finally {
+			this.#selectOrigin = prevOrigin;
+			this.#selectSilent = prevSilent;
+		}
+	}
+	#navigateTo(keys, reveal) {
 		this.#abortPending();
 		this.#clearSelectionInternal();
 		this.tickled.clearTickled();
@@ -2393,7 +2420,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		}
 		this.#stickyDirty = true;
 		this.requestUpdate();
-		this.#scrollKeyIntoView(keys.at(-1));
+		this.#scrollKeyIntoView(keys.at(-1), reveal);
 		return true;
 	}
 	navigateToNode(predicate) {
@@ -2449,11 +2476,15 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this._selectedNodes.clear();
 		this.selectedNode = void 0;
 	}
+	#selectOrigin;
+	#selectSilent;
 	#dispatchSelect(previous) {
 		this._selectionVersion++;
+		if (this.#selectSilent) return;
 		const detail = {
 			selected: new Set(this._selectedNodes),
-			previous
+			previous,
+			origin: this.#selectOrigin
 		};
 		this.dispatchEvent(new CustomEvent(`select`, {
 			detail,
@@ -2788,7 +2819,15 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	get _pendingNode() {
 		return this.#pendingNode;
 	}
-	#scrollKeyIntoView(key) {
+	#scrollKeyIntoView(key, mode = `edge`) {
+		if (mode === `center-if-hidden`) {
+			this.updateComplete.then(() => {
+				this.#measureMetrics();
+				const idx = this.#getFlat().indexByKey.get(key);
+				if (idx !== void 0) this.#revealIndex(idx, mode);
+			});
+			return;
+		}
 		if (this.#virtualActive()) {
 			this.updateComplete.then(() => {
 				const idx = this.#getFlat().indexByKey.get(key);
@@ -3553,6 +3592,9 @@ var TreeController = class {
 	#options;
 	#nodeToTree = /* @__PURE__ */ new WeakMap();
 	#identityToTreeNode = /* @__PURE__ */ new Map();
+	#keyToTreeNode = /* @__PURE__ */ new Map();
+	/** `valueToItem` results per source node identity; replaced wholesale by `sync()`. */
+	#itemCache = /* @__PURE__ */ new WeakMap();
 	#connectSignal;
 	constructor(root, element, options) {
 		this.#root = root;
@@ -3563,13 +3605,13 @@ var TreeController = class {
 		this.disconnect();
 		this.#connectSignal = new AbortController();
 		const { signal } = this.#connectSignal;
-		const rootValue = this.#root.getValue();
-		const rootItem = this.#options.valueToItem(rootValue, this.#root);
-		const rootChildren = this.#childrenOf(this.#root);
-		this.#element.root = {
-			item: rootItem,
-			children: rootChildren
-		};
+		this.#itemCache = /* @__PURE__ */ new WeakMap();
+		this.#identityToTreeNode.clear();
+		this.#keyToTreeNode.clear();
+		const rootNode = { item: this.#itemOf(this.#root) };
+		this.#nodeToTree.set(rootNode, this.#root);
+		rootNode.children = this.#childrenOf(this.#root);
+		this.#element.root = rootNode;
 		this.#element.addEventListener(`expand`, (e) => {
 			const { node } = e.detail;
 			const treeNode = this.#nodeToTree.get(node);
@@ -3583,45 +3625,101 @@ var TreeController = class {
 		this.#connectSignal?.abort();
 		this.#connectSignal = void 0;
 	}
-	navigateToValue(predicate) {
-		const treePath = this.#findTreePath(this.#root, predicate);
-		if (!treePath) return false;
+	/**
+	* Re-derive children for every already-materialised node from the source tree
+	* and patch them in place. Existing `TreeNode` objects are reused by key, so
+	* expansion and selection survive; only added and removed nodes change. Calls
+	* `invalidateStructure()` once.
+	*/
+	sync() {
+		const root = this.#element.root;
+		if (!root) return;
+		this.#itemCache = /* @__PURE__ */ new WeakMap();
+		this.#identityToTreeNode.clear();
+		this.#keyToTreeNode.clear();
+		this.#nodeToTree.set(root, this.#root);
+		root.item = this.#itemOf(this.#root);
+		root.children = this.#syncChildren(this.#root, root.children ?? []);
+		this.#element.invalidateStructure();
+	}
+	/** The source node whose item key is `key`, if it has been materialised. */
+	lookupByKey(key) {
+		return this.#keyToTreeNode.get(key);
+	}
+	/** Navigate using item keys (root excluded), without searching the source tree. */
+	navigateToKeyPath(keys, options) {
+		if (keys.length === 0) return false;
 		let currentColumn = this.#element.root?.children ?? [];
-		const keys = [];
-		for (let i = 1; i < treePath.length; i++) {
-			const treeNode = treePath[i];
-			const key = this.#options.valueToItem(treeNode.getValue(), treeNode).key;
-			keys.push(key);
-			if (i < treePath.length - 1) {
-				const node = currentColumn.find((n) => n.item.key === key);
-				if (!node) return false;
-				if (node.children === void 0) {
-					const mapped = this.#nodeToTree.get(node);
-					if (mapped) {
-						node.children = this.#childrenOf(mapped);
-						this.#element.invalidateStructure();
-					}
+		for (let i = 0; i < keys.length - 1; i++) {
+			const node = currentColumn.find((n) => n.item.key === keys[i]);
+			if (!node) return false;
+			if (node.children === void 0) {
+				const mapped = this.#nodeToTree.get(node);
+				if (mapped) {
+					node.children = this.#childrenOf(mapped);
+					this.#element.invalidateStructure();
 				}
-				currentColumn = node.children ?? [];
 			}
+			currentColumn = node.children ?? [];
+		}
+		return this.#element.navigateTo(keys, options);
+	}
+	/** Navigate to the source node with this identity, walking up via `getParent()`. */
+	navigateToIdentity(identity, options) {
+		let node = this.#identityToTreeNode.get(identity);
+		if (!node) return false;
+		const keys = [];
+		const rootId = this.#root.getIdentity();
+		while (node && node.getIdentity() !== rootId) {
+			keys.unshift(this.#itemOf(node).key);
+			node = node.getParent();
 		}
-		return this.#element.navigateTo(keys);
+		return node !== void 0 && this.navigateToKeyPath(keys, options);
+	}
+	navigateToValue(predicate, options) {
+		const treePath = this.#findTreePath(this.#root, predicate);
+		if (!treePath) return false;
+		return this.navigateToKeyPath(treePath.slice(1).map((n) => this.#itemOf(n).key), options);
+	}
+	#itemOf(treeNode, isLeaf) {
+		const id = treeNode.getIdentity();
+		let userItem = this.#itemCache.get(id);
+		if (!userItem) {
+			userItem = this.#options.valueToItem(treeNode.getValue(), treeNode);
+			this.#itemCache.set(id, userItem);
+		}
+		return isLeaf === void 0 ? userItem : {
+			...userItem,
+			isLeaf: userItem.isLeaf ?? isLeaf
+		};
 	}
 	#childrenOf(treeNode) {
 		return Array.from(treeNode.children(), (child) => this.#toTreeNode(child));
 	}
+	#register(node, treeNode) {
+		this.#nodeToTree.set(node, treeNode);
+		this.#identityToTreeNode.set(treeNode.getIdentity(), treeNode);
+		this.#keyToTreeNode.set(node.item.key, treeNode);
+	}
 	#toTreeNode(treeNode) {
-		const value = treeNode.getValue();
 		const childList = [...treeNode.children()];
-		const userItem = this.#options.valueToItem(value, treeNode);
-		const isLeaf = userItem.isLeaf ?? childList.length === 0;
-		const treeNodeMap = { item: {
-			...userItem,
-			isLeaf
-		} };
-		this.#nodeToTree.set(treeNodeMap, treeNode);
-		this.#identityToTreeNode.set(treeNode.getIdentity(), treeNode);
-		return treeNodeMap;
+		for (const child of childList) this.#identityToTreeNode.set(child.getIdentity(), child);
+		const node = { item: this.#itemOf(treeNode, childList.length === 0) };
+		this.#register(node, treeNode);
+		return node;
+	}
+	/** Patch `existing` to match the source children of `treeNode`; recurse into materialised nodes. */
+	#syncChildren(treeNode, existing) {
+		const byKey = new Map(existing.map((n) => [n.item.key, n]));
+		return Array.from(treeNode.children(), (child) => {
+			const fresh = this.#toTreeNode(child);
+			const old = byKey.get(fresh.item.key);
+			if (!old) return fresh;
+			old.item = fresh.item;
+			this.#register(old, child);
+			if (old.children !== void 0) old.children = this.#syncChildren(child, old.children);
+			return old;
+		});
 	}
 	#findTreePath(node, predicate, ancestors = []) {
 		const path = [...ancestors, node];

package/dist/{tree-component-Cj8V3uar.d.ts → tree-component-Tslymyyl.d.ts}

@@ -213,6 +213,14 @@ type TreeDropEvent = CustomEvent<TreeDropDetail>;
 type TreeDragEndEvent = CustomEvent<{
   dropped: boolean;
 }>;
+/** How `navigateTo` scrolls its target: edge-align it, or centre it when it is off screen. */
+type TreeRevealMode = `edge` | `center-if-hidden`;
+type TreeNavigateOptions = {
+  /** Scroll behaviour for the target (default `edge`). */
+  reveal?: TreeRevealMode;
+  /** Suppress the `select` event this navigation would otherwise fire. */
+  silent?: boolean;
+};
 /**
  * Fired when the selection set changes by any means (click, keyboard, programmatic).
  * Event name: `select`
@@ -222,6 +230,11 @@ type TreeSelectDetail = {
   readonly selected: ReadonlySet<TreeNode>;
   /** The previous selection set (empty set if there was no prior selection). */
   readonly previous: ReadonlySet<TreeNode>;
+  /**
+   * What caused the change: `programmatic` for `navigateTo` and friends, `user`
+   * otherwise. Absent on components that do not distinguish the two.
+   */
+  readonly origin?: `user` | `programmatic`;
 };
 /**
  * Fired when an item enters cursor focus — either the pointer hovers over it, or
@@ -408,4 +421,4 @@ interface TreeSearchHost extends TreeComponent {
   readonly updateComplete: Promise<boolean>;
 }
 //#endregion
-export { TreeDataModelOptions as A, TreeItemDblClickEvent as C, TreeTickleDetail as D, TreeSelectEvent as E, ListDragPreviewSourceResolver as F, ListDragSource as I, ListNativeDragStartDetail as L, ListDragPreview as M, ListDragPreviewContext as N, TreeTickleEvent as O, ListDragPreviewRenderer as P, ListNativeDragStartEvent as R, TreeItemDblClickDetail as S, TreeSelectDetail as T, TreeDropTarget as _, TreeComponent as a, TreeItemClickDetail as b, TreeDragContext as c, TreeDragStartEvent as d, TreeDropApplyContext as f, TreeDropPosition as g, TreeDropEvent as h, TreeCollapseEvent as i, ListDragEntry as j, TreeDataModel as k, TreeDragEndEvent as l, TreeDropDetail as m, TreeActivateEvent as n, TreeComponentEventMap as o, TreeDropContext as p, TreeCollapseDetail as r, TreeDndMode as s, TreeActivateDetail as t, TreeDragOverEvent as u, TreeExpandDetail as v, TreeSearchHost as w, TreeItemClickEvent as x, TreeExpandEvent as y };
+export { TreeTickleEvent as A, ListNativeDragStartEvent as B, TreeItemDblClickEvent as C, TreeSelectDetail as D, TreeSearchHost as E, ListDragPreviewContext as F, ListDragPreviewRenderer as I, ListDragPreviewSourceResolver as L, TreeDataModelOptions as M, ListDragEntry as N, TreeSelectEvent as O, ListDragPreview as P, ListDragSource as R, TreeItemDblClickDetail as S, TreeRevealMode as T, TreeDropTarget as _, TreeComponent as a, TreeItemClickDetail as b, TreeDragContext as c, TreeDragStartEvent as d, TreeDropApplyContext as f, TreeDropPosition as g, TreeDropEvent as h, TreeCollapseEvent as i, TreeDataModel as j, TreeTickleDetail as k, TreeDragEndEvent as l, TreeDropDetail as m, TreeActivateEvent as n, TreeComponentEventMap as o, TreeDropContext as p, TreeCollapseDetail as r, TreeDndMode as s, TreeActivateDetail as t, TreeDragOverEvent as u, TreeExpandDetail as v, TreeNavigateOptions as w, TreeItemClickEvent as x, TreeExpandEvent as y, ListNativeDragStartDetail as z };

package/dist/tree.d.ts

@@ -1,4 +1,4 @@
-import { A as TreeDataModelOptions, D as TreeTickleDetail, E as TreeSelectEvent, O as TreeTickleEvent, T as TreeSelectDetail, _ as TreeDropTarget, b as TreeItemClickDetail, c as TreeDragContext, d as TreeDragStartEvent, g as TreeDropPosition, h as TreeDropEvent, i as TreeCollapseEvent, k as TreeDataModel, l as TreeDragEndEvent, m as TreeDropDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeDropContext, r as TreeCollapseDetail, s as TreeDndMode, t as TreeActivateDetail, u as TreeDragOverEvent, v as TreeExpandDetail, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-Cj8V3uar.js";
+import { A as TreeTickleEvent, D as TreeSelectDetail, M as TreeDataModelOptions, O as TreeSelectEvent, T as TreeRevealMode, _ as TreeDropTarget, b as TreeItemClickDetail, c as TreeDragContext, d as TreeDragStartEvent, g as TreeDropPosition, h as TreeDropEvent, i as TreeCollapseEvent, j as TreeDataModel, k as TreeTickleDetail, l as TreeDragEndEvent, m as TreeDropDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeDropContext, r as TreeCollapseDetail, s as TreeDndMode, t as TreeActivateDetail, u as TreeDragOverEvent, v as TreeExpandDetail, w as TreeNavigateOptions, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-Tslymyyl.js";
 import { a as TreeItem, n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-DQ7KOUIj.js";
-import { a as TreeDropVisibleRow, c as TreeListElement, d as TreeBaseElementEventMap, f as TreeVirtualize, i as TreeDropRowInfo, l as TreeCheckboxState, n as TreeDropControllerConfig, o as TreeController, p as TreeConfig, r as TreeDropResolvedDrag, s as TreeControllerOptions, t as TreeDropController, u as TreeBaseElement } from "./index-CCC0G1nO.js";
-export { type LoadChildrenCallback, type TreeActivateDetail, type TreeActivateEvent, TreeBaseElement, TreeBaseElementEventMap, type TreeCheckboxState, type TreeCollapseDetail, type TreeCollapseEvent, type TreeComponentEventMap, TreeConfig, TreeController, TreeControllerOptions, TreeDataModel, type TreeDataModelOptions, type TreeDndMode, type TreeDragContext, type TreeDragEndEvent, type TreeDragOverEvent, type TreeDragStartEvent, type TreeDropContext, TreeDropController, TreeDropControllerConfig, type TreeDropDetail, type TreeDropEvent, type TreeDropPosition, TreeDropResolvedDrag, TreeDropRowInfo, type TreeDropTarget, TreeDropVisibleRow, type TreeExclusivity, type TreeExpandDetail, type TreeExpandEvent, type TreeFilterPredicate, type TreeItem, type TreeItemClickDetail, type TreeItemClickEvent, TreeListElement, type TreeNode, type TreeSelectDetail, type TreeSelectEvent, type TreeSelectionFilter, type TreeTickleDetail, type TreeTickleEvent, TreeVirtualize };
+import { a as TreeDropVisibleRow, c as TreeListElement, d as TreeBaseElementEventMap, f as TreeVirtualize, i as TreeDropRowInfo, l as TreeCheckboxState, n as TreeDropControllerConfig, o as TreeController, p as TreeConfig, r as TreeDropResolvedDrag, s as TreeControllerOptions, t as TreeDropController, u as TreeBaseElement } from "./index-BG8E13J5.js";
+export { type LoadChildrenCallback, type TreeActivateDetail, type TreeActivateEvent, TreeBaseElement, TreeBaseElementEventMap, type TreeCheckboxState, type TreeCollapseDetail, type TreeCollapseEvent, type TreeComponentEventMap, TreeConfig, TreeController, TreeControllerOptions, TreeDataModel, type TreeDataModelOptions, type TreeDndMode, type TreeDragContext, type TreeDragEndEvent, type TreeDragOverEvent, type TreeDragStartEvent, type TreeDropContext, TreeDropController, TreeDropControllerConfig, type TreeDropDetail, type TreeDropEvent, type TreeDropPosition, TreeDropResolvedDrag, TreeDropRowInfo, type TreeDropTarget, TreeDropVisibleRow, type TreeExclusivity, type TreeExpandDetail, type TreeExpandEvent, type TreeFilterPredicate, type TreeItem, type TreeItemClickDetail, type TreeItemClickEvent, TreeListElement, type TreeNavigateOptions, type TreeNode, type TreeRevealMode, type TreeSelectDetail, type TreeSelectEvent, type TreeSelectionFilter, type TreeTickleDetail, type TreeTickleEvent, TreeVirtualize };

package/dist/tree.js

@@ -1,2 +1,2 @@
-import { a as TreeDataModel, i as TreeDropController, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-Df00opxv.js";
+import { a as TreeDataModel, i as TreeDropController, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-BjrfaX7d.js";
 export { TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeListElement };

package/dist/{vertical-list-m7GJtXwv.d.ts → vertical-list-B1Fq06xr.d.ts}

@@ -1,6 +1,6 @@
-import { F as ListDragPreviewSourceResolver, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent } from "./tree-component-Cj8V3uar.js";
+import { B as ListNativeDragStartEvent, I as ListDragPreviewRenderer, L as ListDragPreviewSourceResolver } from "./tree-component-Tslymyyl.js";
 import { n as ListViewportChangeEvent } from "./list-viewport-types-BRZsLcvp.js";
-import { S as ListSearchController } from "./index-BYIRgv49.js";
+import { S as ListSearchController } from "./index-CO6m-YC0.js";
 import { i as ListInteractionMode, l as ListSelectionMode, r as ListElementEventMap } from "./list-selection-types-PjKdhF-a.js";
 import "./editable-label-rzXkjf1H.js";
 import { LitElement, PropertyValues } from "lit";

package/dist/vertical-list.d.ts

@@ -1,5 +1,5 @@
-import { I as ListDragSource, L as ListNativeDragStartDetail, M as ListDragPreview, N as ListDragPreviewContext, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent, j as ListDragEntry } from "./tree-component-Cj8V3uar.js";
+import { B as ListNativeDragStartEvent, F as ListDragPreviewContext, I as ListDragPreviewRenderer, N as ListDragEntry, P as ListDragPreview, R as ListDragSource, z as ListNativeDragStartDetail } from "./tree-component-Tslymyyl.js";
 import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
 import { a as ListItemClickDetail, c as ListSelectEvent, d as ListTickleEvent, i as ListInteractionMode, l as ListSelectionMode, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, s as ListSelectDetail, t as ListActivateDetail, u as ListTickleDetail } from "./list-selection-types-PjKdhF-a.js";
-import { a as ListContextMenuDetail, c as ListDragLeaveEvent, d as ListDropEvent, f as ListEditCancelDetail, h as ListEditCommitEvent, i as VerticalListElementEventMap, l as ListDragOverEvent, m as ListEditCommitDetail, n as CustomCheckboxOptions, o as ListContextMenuEvent, p as ListEditCancelEvent, r as VerticalListElement, s as ListDragLeaveDetail, t as AddItemOptions, u as ListDropDetail } from "./vertical-list-m7GJtXwv.js";
+import { a as ListContextMenuDetail, c as ListDragLeaveEvent, d as ListDropEvent, f as ListEditCancelDetail, h as ListEditCommitEvent, i as VerticalListElementEventMap, l as ListDragOverEvent, m as ListEditCommitDetail, n as CustomCheckboxOptions, o as ListContextMenuEvent, p as ListEditCancelEvent, r as VerticalListElement, s as ListDragLeaveDetail, t as AddItemOptions, u as ListDropDetail } from "./vertical-list-B1Fq06xr.js";
 export { AddItemOptions, CustomCheckboxOptions, type ListActivateDetail, type ListActivateEvent, type ListContextMenuDetail, type ListContextMenuEvent, type ListDragEntry, type ListDragLeaveDetail, type ListDragLeaveEvent, type ListDragOverEvent, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListDropDetail, type ListDropEvent, type ListEditCancelDetail, type ListEditCancelEvent, type ListEditCommitDetail, type ListEditCommitEvent, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, type ListViewportChangeDetail, type ListViewportChangeEvent, VerticalListElement, VerticalListElementEventMap };