@ixfx/components 0.7.4 → 0.7.5

package/dist/miller.js

@@ -2,16 +2,19 @@ import { t as TickledController } from "./tickled-controller-C66DgJHl.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, t as createTreeListSearchAdapter } from "./incr-search-DpbSJtgj.js";
 import "./interaction-Cr13azbM.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
+import { createCommandRegistry } from "@clinth/ui-commands";
 //#region src/miller/miller-base.ts
 const EXPAND_DEBOUNCE_MS = 150;
 let MillerBaseElement = class MillerBaseElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.headers = false;
+		this.stretchLastColumn = false;
 		this.interactionMode = `standard`;
 		this.selectionFilter = `leaf`;
 		this.exclusivity = `none`;
@@ -23,6 +26,10 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 		this.#resizingDepth = -1;
 		this.#resizeStartX = 0;
 		this.#resizeStartWidth = 0;
+		this.search = new ListSearchController(this, { adapter: createTreeListSearchAdapter(this, {
+			labelSelector: `.label`,
+			highlightKey: `incr-search-highlight`
+		}) });
 		this.tickled = new TickledController(this, { getItems: () => {
 			const items = [];
 			for (let depth = 0; depth < this._columns.length; depth++) {
@@ -32,6 +39,7 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			return items;
 		} });
 		this.#onKeyDown = (event) => {
+			if (this.search.isOpen) return;
 			const currentDepth = this.#getTickledDepthOrDefault();
 			const col = this._columns[currentDepth];
 			if (!col || col.length === 0) {
@@ -238,9 +246,31 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 	#resizeStartX;
 	#resizeStartWidth;
 	#modelUnsubscribe;
+	#searchRegistry;
+	#unregisterSearchCommands;
+	/** Command registry carrying this component's `list.search.*` commands. */
+	get registry() {
+		return this.#searchRegistry;
+	}
+	#effectiveSearchModes() {
+		const raw = this.searchModes?.trim();
+		if (raw === void 0) return [...LIST_SEARCH_MODES];
+		const requested = new Set(raw.split(/\s+/));
+		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
+	}
+	#syncSearchCommands() {
+		if (!this.#searchRegistry) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = registerListSearchCommands(this.#searchRegistry, this.search);
+	}
 	#buildTickledId(node, depth) {
 		return `${depth}:${node.item.key}`;
 	}
+	/** The node column 0 renders the children of: `viewRoot` when rebased, else `root`. */
+	get #displayRoot() {
+		return this.viewRoot ?? this.root;
+	}
 	#getTickledDepth() {
 		const id = this.tickled.tickledId;
 		if (!id) return void 0;
@@ -249,16 +279,20 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 		return Number(id.substring(0, colonIndex));
 	}
 	updated(changedProps) {
+		if (changedProps.has(`searchModes`)) this.#syncSearchCommands();
 		if (changedProps.has(`root`) && this.root) {
 			this.#abortPending();
-			this._columns = this.root.children ? [this.root.children] : [];
+			if (this.viewRoot !== void 0) this.viewRoot = void 0;
 			this._selectedByDepth.clear();
 			this._selectedKeys = /* @__PURE__ */ new Set();
 			this._selectedNodes.clear();
 			this.#lastSelectedNode = void 0;
 			this.#anchor = void 0;
 			this.tickled.clearTickled();
+			const display = this.#displayRoot;
+			this._columns = display?.children ? [display.children] : [];
 		}
+		if (changedProps.has(`viewRoot`)) this.#applyViewRoot();
 		if (changedProps.has(`model`)) {
 			this.#modelUnsubscribe?.();
 			this.#modelUnsubscribe = void 0;
@@ -300,10 +334,18 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			});
 		}
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#searchRegistry ??= createCommandRegistry();
+		this.#syncSearchCommands();
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#modelUnsubscribe?.();
 		this.#modelUnsubscribe = void 0;
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = void 0;
+		this.#searchRegistry = void 0;
 	}
 	getConfig() {
 		const columnWidths = {};
@@ -399,15 +441,17 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 		return results;
 	}
 	/**
-	* Programmatically navigate to a node by key path.
+	* Programmatically navigate to a node by key path, relative to the current
+	* view root (rebased or full tree).
 	*/
 	navigateTo(keys) {
-		if (!this.root?.children) return false;
+		const display = this.#displayRoot;
+		if (!display?.children) return false;
 		this.#abortPending();
 		this._selectedByDepth.clear();
 		this.tickled.clearTickled();
-		const newColumns = [this.root.children];
-		let currentColumn = this.root.children;
+		const newColumns = [display.children];
+		let currentColumn = display.children;
 		let success = true;
 		let lastNode;
 		let lastDepth = 0;
@@ -442,13 +486,51 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 	* Programmatically navigate to the first node (breadth-first) matching a predicate.
 	*/
 	navigateToNode(predicate) {
-		if (!this.root?.children) return false;
-		const keyPath = this.#findNodePath(this.root.children, predicate);
+		const display = this.#displayRoot;
+		if (!display?.children) return false;
+		const keyPath = this.#findNodePath(display.children, predicate);
 		if (!keyPath) return false;
 		return this.navigateTo(keyPath);
 	}
+	/** Open the columns down to `key` and move the cursor to it, without changing the selection (search "navigate" mode). */
+	revealKey(key) {
+		const display = this.#displayRoot;
+		if (!display?.children) return false;
+		const path = this.#findNodePath(display.children, (n) => n.item.key === key);
+		if (!path) return false;
+		const columns = [display.children];
+		let current = display.children;
+		let lastNode;
+		let lastDepth = 0;
+		for (let depth = 0; depth < path.length; depth++) {
+			const node = current.find((n) => n.item.key === path[depth]);
+			if (!node) return false;
+			lastNode = node;
+			lastDepth = depth;
+			if (node.children && node.children.length > 0) {
+				columns.push(node.children);
+				current = node.children;
+			} else break;
+		}
+		this._columns = columns;
+		if (lastNode) this.tickled.setTickled(this.#buildTickledId(lastNode, lastDepth));
+		this.requestUpdate();
+		this.#scrollNavigatedItemIntoView();
+		return true;
+	}
+	/** Replace the selection with `nodes` (search "select" mode). */
+	selectMany(nodes) {
+		const arr = this.selectionFilter === `none` ? [] : [...nodes];
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes = new Set(arr);
+		this._selectedKeys = new Set(arr.map((n) => n.item.key));
+		this.#lastSelectedNode = arr.at(-1);
+		this.#dispatchSelectEvent(prev);
+		this.requestUpdate();
+	}
 	getNodes() {
-		if (!this.root?.children) return [];
+		const display = this.#displayRoot;
+		if (!display?.children) return [];
 		const result = [];
 		const visit = (node, depth) => {
 			result.push({
@@ -457,7 +539,7 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			});
 			if (node.children) for (const child of node.children) visit(child, depth + 1);
 		};
-		for (const child of this.root.children) visit(child, 0);
+		for (const child of display.children) visit(child, 0);
 		return result;
 	}
 	#findNodePath(nodes, predicate, prefix = []) {
@@ -470,6 +552,124 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			}
 		}
 	}
+	/**
+	* Re-render the columns for the current `#displayRoot`, clearing selection.
+	* Runs on every `viewRoot` change.
+	*/
+	#applyViewRoot() {
+		this.#abortPending();
+		const prev = new Set(this._selectedNodes);
+		this._selectedByDepth.clear();
+		this._selectedKeys = /* @__PURE__ */ new Set();
+		this._selectedNodes.clear();
+		this.#lastSelectedNode = void 0;
+		this.#anchor = void 0;
+		this.tickled.clearTickled();
+		const display = this.#displayRoot;
+		if (display?.children !== void 0) {
+			this._columns = display.children ? [display.children] : [];
+			this._loadingDepth = void 0;
+		} else if (display) {
+			this._columns = [];
+			this.#loadUnloadedChildren(display, -1, false);
+		} else {
+			this._columns = [];
+			this._loadingDepth = void 0;
+		}
+		if (prev.size > 0) this.#dispatchSelectEvent(prev);
+	}
+	/**
+	* Rebase the view to show `target`'s children in column 0 (Finder column-view
+	* behavior on double-click), keeping the full tree in `root`.
+	*
+	* - Pass a `MillerNode` (used as-is) or a key (looked up in the full tree).
+	* - Pass `undefined` to restore the full-tree view.
+	* - Rebasing to the true root is equivalent to restoring the full view.
+	* - Leaves are refused (returns `false`).
+	*
+	* Selection is cleared; all depths, headers, and key paths are relative to
+	* the new view root. Fires a `rebase` event when the view actually changes.
+	* Returns `false` when nothing changed (unknown key, leaf, or same view).
+	*/
+	rebaseTo(target) {
+		if (target === void 0) return this.#clearViewRoot();
+		const node = typeof target === `string` ? this.#findNodeByKey(target) : target;
+		if (!node || node.item.isLeaf === true) return false;
+		if (node === this.viewRoot || node.item.key === this.viewRoot?.item.key) return false;
+		if (node === this.root || !this.viewRoot && node.item.key === this.root?.item.key) return this.#clearViewRoot();
+		this.viewRoot = node;
+		this.#dispatchRebaseEvent();
+		return true;
+	}
+	/**
+	* Rebase one level up from the current view root (no-op at the full tree).
+	* Fires a `rebase` event when the view actually changes.
+	*/
+	rebaseUp() {
+		if (!this.viewRoot) return false;
+		const parent = this.#findParentOf(this.viewRoot);
+		if (!parent) return false;
+		if (parent === this.root) return this.#clearViewRoot();
+		this.viewRoot = parent;
+		this.#dispatchRebaseEvent();
+		return true;
+	}
+	#clearViewRoot() {
+		if (this.viewRoot === void 0) return false;
+		this.viewRoot = void 0;
+		this.#dispatchRebaseEvent();
+		return true;
+	}
+	#dispatchRebaseEvent() {
+		const viewRoot = this.viewRoot;
+		const detail = {
+			viewRoot,
+			path: viewRoot ? this.#pathToRoot(viewRoot) : []
+		};
+		this.dispatchEvent(new CustomEvent(`rebase`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#findNodeByKey(key) {
+		if (!this.root) return void 0;
+		if (this.root.item.key === key) return this.root;
+		return this.#findNodeIn(this.root.children ?? [], key);
+	}
+	#findNodeIn(nodes, key) {
+		for (const node of nodes) {
+			if (node.item.key === key) return node;
+			if (node.children) {
+				const found = this.#findNodeIn(node.children, key);
+				if (found) return found;
+			}
+		}
+	}
+	/** Find the parent of `target` (by reference, falling back to key) in the full tree. */
+	#findParentOf(target) {
+		if (!this.root || target === this.root) return void 0;
+		return this.#findParentIn(this.root, target);
+	}
+	#findParentIn(node, target) {
+		if (!node.children) return void 0;
+		for (const child of node.children) {
+			if (child === target || child.item.key === target.item.key) return node;
+			const found = this.#findParentIn(child, target);
+			if (found) return found;
+		}
+	}
+	/** Ancestry chain from the true root down to and including `target`. */
+	#pathToRoot(target) {
+		const chain = [target];
+		let current = this.#findParentOf(target);
+		while (current) {
+			chain.unshift(current);
+			if (current === this.root) break;
+			current = this.#findParentOf(current);
+		}
+		return chain;
+	}
 	renderColumnContent(nodes, depth) {
 		console.warn(`ixfx-miller-base: renderColumnContent not overridden. depth=${depth}, nodes=${nodes.length}`);
 		return nothing;
@@ -596,7 +796,7 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 	*/
 	#buildPath(depth) {
 		const path = [];
-		if (this.root) path.push(this.root);
+		if (this.#displayRoot) path.push(this.#displayRoot);
 		for (let d = 0; d < depth; d++) {
 			const sel = this._selectedByDepth.get(d);
 			if (sel) path.push(sel);
@@ -699,57 +899,8 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			this.requestUpdate();
 			return;
 		}
-		if (node.children === void 0) {
-			this._columns = this._columns.slice(0, depth + 1);
-			this._loadingDepth = depth + 1;
-			this.#pendingNode = node;
-			const controller = new AbortController();
-			this.#pendingController = controller;
-			this.dispatchEvent(new CustomEvent(`expand`, {
-				detail: {
-					node,
-					depth
-				},
-				bubbles: true,
-				composed: true
-			}));
-			const applyChildren = (children) => {
-				if (controller.signal.aborted) return;
-				node.children = children;
-				this.#pendingNode = void 0;
-				this.#pendingController = void 0;
-				this._loadingDepth = void 0;
-				const cols = this._columns.slice(0, depth + 1);
-				if (children.length > 0) cols.push(children);
-				this._columns = cols;
-			};
-			const handleError = (err) => {
-				if (err.name !== `AbortError`) console.error(err);
-				node.children = [];
-				this.#pendingNode = void 0;
-				this.#pendingController = void 0;
-				this._loadingDepth = void 0;
-				this.requestUpdate();
-			};
-			if (this.model || this.loadChildren) {
-				if (this.#expandTimer !== void 0) clearTimeout(this.#expandTimer);
-				this.#expandTimer = setTimeout(() => {
-					this.#expandTimer = void 0;
-					if (this.#pendingNode !== node) return;
-					(this.model ? this.model.getChildren(node, depth, controller.signal) : collectDataResult(this.loadChildren({
-						node,
-						depth
-					}, controller.signal), controller.signal)).then((children) => applyChildren([...children])).catch(handleError);
-				}, EXPAND_DEBOUNCE_MS);
-			} else {
-				this._loadingDepth = void 0;
-				this.#pendingNode = void 0;
-				this.#pendingController = void 0;
-				const newColumns = this._columns.slice(0, depth + 1);
-				newColumns.push([]);
-				this._columns = newColumns;
-			}
-		} else {
+		if (node.children === void 0) this.#loadUnloadedChildren(node, depth, true);
+		else {
 			const newColumns = this._columns.slice(0, depth + 1);
 			newColumns.push(node.children);
 			this._columns = newColumns;
@@ -763,6 +914,68 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			}));
 		}
 	}
+	/**
+	* Fetch children for a node whose `children === undefined` and show them as
+	* the column after `parentDepth` (with the loading placeholder meanwhile).
+	* Shared by branch expansion (`parentDepth` = the branch's column) and view
+	* rebasing (`parentDepth` = -1, so the children become column 0).
+	*
+	* The `depth` reported to `loadChildren`/`model.getChildren` is the node's
+	* own depth: its column for expansions, -1 for a view root (it sits above
+	* column 0, so loaders computing child depth as `depth + 1` stay correct).
+	*/
+	#loadUnloadedChildren(node, parentDepth, fireExpandEvent) {
+		const nodeDepth = parentDepth + 1;
+		this._columns = this._columns.slice(0, nodeDepth);
+		this._loadingDepth = nodeDepth;
+		this.#pendingNode = node;
+		const controller = new AbortController();
+		this.#pendingController = controller;
+		if (fireExpandEvent) this.dispatchEvent(new CustomEvent(`expand`, {
+			detail: {
+				node,
+				depth: parentDepth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		const applyChildren = (children) => {
+			if (controller.signal.aborted) return;
+			node.children = children;
+			this.#pendingNode = void 0;
+			this.#pendingController = void 0;
+			this._loadingDepth = void 0;
+			const cols = this._columns.slice(0, nodeDepth);
+			if (children.length > 0) cols.push(children);
+			this._columns = cols;
+		};
+		const handleError = (err) => {
+			if (err.name !== `AbortError`) console.error(err);
+			node.children = [];
+			this.#pendingNode = void 0;
+			this.#pendingController = void 0;
+			this._loadingDepth = void 0;
+			this.requestUpdate();
+		};
+		if (this.model || this.loadChildren) {
+			if (this.#expandTimer !== void 0) clearTimeout(this.#expandTimer);
+			this.#expandTimer = setTimeout(() => {
+				this.#expandTimer = void 0;
+				if (this.#pendingNode !== node) return;
+				(this.model ? this.model.getChildren(node, nodeDepth - 1, controller.signal) : collectDataResult(this.loadChildren({
+					node,
+					depth: nodeDepth - 1
+				}, controller.signal), controller.signal)).then((children) => applyChildren([...children])).catch(handleError);
+			}, EXPAND_DEBOUNCE_MS);
+		} else {
+			this._loadingDepth = void 0;
+			this.#pendingNode = void 0;
+			this.#pendingController = void 0;
+			const newColumns = this._columns.slice(0, nodeDepth);
+			newColumns.push([]);
+			this._columns = newColumns;
+		}
+	}
 	#onCheckboxClick(node) {
 		const currentlySelected = this._selectedKeys.has(node.item.key);
 		if (!!node.children?.length ? this.#allDescendantsSelected(node) : currentlySelected) this.#applyCheckedToggle(node, false);
@@ -832,7 +1045,7 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 	#onResizeMove;
 	#onResizeEnd;
 	#getColumnHeader(depth) {
-		if (depth === 0) return this.root?.item.label ?? ``;
+		if (depth === 0) return this.#displayRoot?.item.label ?? ``;
 		const explicit = this._selectedByDepth.get(depth - 1);
 		if (explicit) return explicit.item.label;
 		const prevCol = this._columns[depth - 1];
@@ -843,9 +1056,11 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 		}
 		return ``;
 	}
-	#columnStyle(depth) {
+	#columnStyle(depth, isLast) {
 		const w = this.#columnWidths.get(depth);
-		return w !== void 0 ? `width:${w}px;flex-shrink:0` : `width:max-content`;
+		if (w !== void 0) return `width:${w}px;flex-grow:0;flex-shrink:0;flex-basis:auto;max-width:none`;
+		if (this.stretchLastColumn && isLast) return `width:max-content;flex-grow:1;flex-shrink:0;flex-basis:auto;min-width:0`;
+		return `width:max-content;flex-grow:0;flex-shrink:0;flex-basis:auto`;
 	}
 	#isFocused(node, depth) {
 		return this.tickled.isTickled(this.#buildTickledId(node, depth));
@@ -858,8 +1073,9 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 	}
 	#renderLoadingColumn() {
 		const depth = this._loadingDepth;
+		const stretched = this.stretchLastColumn && this.#columnWidths.get(depth) === void 0;
 		return html`
-      <div class="column loading-column" style=${this.#columnStyle(depth)}>
+      <div class="column loading-column ${stretched ? `stretch-last` : ``}" style=${this.#columnStyle(depth, true)}>
         ${this.headers ? html`
           <div class="column-header">${this.#getColumnHeader(depth)}</div>
         ` : nothing}
@@ -874,8 +1090,10 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
       <div id="container" @keydown=${this.#onKeyDown} tabindex="0">
         ${this._columns.map((nodes, depth) => {
 			const visibleNodes = this.filterPredicate ? nodes.filter((n) => this.filterPredicate(n, depth)) : nodes;
+			const isLast = depth === this._columns.length - 1 && this._loadingDepth === void 0;
+			const stretched = this.stretchLastColumn && isLast && this.#columnWidths.get(depth) === void 0;
 			return html`
-          <div class="column" style=${this.#columnStyle(depth)}>
+          <div class="column ${stretched ? `stretch-last` : ``}" style=${this.#columnStyle(depth, isLast)}>
             ${this.headers ? html`
               <div class="column-header"
                 @click=${() => this.#onHeaderClick(depth)}
@@ -894,6 +1112,7 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 		})}
         ${this._loadingDepth !== void 0 ? this.#renderLoadingColumn() : nothing}
       </div>
+      ${this.search.renderField()}
     `;
 	}
 	_getFocusedIndex(depth) {
@@ -929,6 +1148,7 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 		this.styles = [
 			themeFallbacks,
 			tickledStyles,
+			listSearchStyles,
 			css`
     :host {
       --column-bg: var(--surface-3);
@@ -963,6 +1183,20 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
       background: var(--column-bg);
       border-right: 1px solid var(--column-separator);
       flex-shrink: 0;
+      /* Content-sized columns never grow wider than 80% of the available
+         width — pathological labels truncate with ellipsis instead of
+         pushing every other column out of view */
+      max-width: 80%;
+      /* Smoothly animate the last column stretching to fill remaining
+         space and shrinking back to content width when it stops being last */
+      transition: flex-grow var(--transition, 0.2s ease-out);
+    }
+
+    .column.stretch-last {
+      min-width: 0;
+      /* Stretching fills remaining space by definition, so it is exempt
+         from the 80% auto-size cap */
+      max-width: none;
     }
 
     .column-header {
@@ -1046,6 +1280,12 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 __decorate([property({ type: Object })], MillerBaseElement.prototype, "root", void 0);
 __decorate([property({ attribute: false })], MillerBaseElement.prototype, "model", void 0);
 __decorate([property({ type: Boolean })], MillerBaseElement.prototype, "headers", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `stretch-last-column`,
+	reflect: true
+})], MillerBaseElement.prototype, "stretchLastColumn", void 0);
+__decorate([property({ attribute: false })], MillerBaseElement.prototype, "viewRoot", void 0);
 __decorate([property({ type: String })], MillerBaseElement.prototype, "interactionMode", void 0);
 __decorate([property({
 	reflect: true,
@@ -1057,6 +1297,11 @@ __decorate([property({
 })], MillerBaseElement.prototype, "exclusivity", void 0);
 __decorate([property({ type: Object })], MillerBaseElement.prototype, "loadChildren", void 0);
 __decorate([property({ attribute: false })], MillerBaseElement.prototype, "filterPredicate", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], MillerBaseElement.prototype, "searchModes", void 0);
 __decorate([state()], MillerBaseElement.prototype, "_columns", void 0);
 __decorate([state()], MillerBaseElement.prototype, "_loadingDepth", void 0);
 __decorate([state()], MillerBaseElement.prototype, "_selectedNodes", void 0);
@@ -1294,14 +1539,28 @@ var MillerTreeController = class {
 	* Any ancestor `MillerNode`s with unloaded children are populated
 	* synchronously before calling `element.navigateTo()`.
 	*
+	* Key paths are relative to the element's current view root: when the view
+	* is rebased, only matches at or below the view root can be reached.
+	*
 	* Returns `false` if no matching node is found.
 	*/
 	navigateToValue(predicate) {
 		const treePath = this.#findTreePath(this.#root, predicate);
 		if (!treePath) return false;
-		let currentColumn = this.#element.root?.children ?? [];
+		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);
+			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 = 1; i < treePath.length; i++) {
+		for (let i = startIndex; i < treePath.length; i++) {
 			const treeNode = treePath[i];
 			const key = this.#options.valueToItem(treeNode.getValue(), treeNode).key;
 			keys.push(key);