@ixfx/components 0.15.5 → 0.16.0

package/dist/miller-BFRfn0ve.js

@@ -0,0 +1,2237 @@
+import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
+import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
+import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.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-JIhwB49y.js";
+import { a as capKeys, d as partitionKeys, l as keysToArray, n as EMPTY_KEYS } from "./pending-BGidHppL.js";
+import "./interaction-E-uMGHkJ.js";
+import { t as collectDataResult } from "./data-provider-35TyWclX.js";
+import { a as restoreElementScroll, i as onUserScrollIntent, o as scrollToOffset, r as captureElementScroll, t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
+import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.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-view-state.ts
+/** Keys of the node in each column whose children are the next column. */
+function openPathKeys(columns) {
+	const keys = [];
+	for (let depth = 0; depth < columns.length - 1; depth++) {
+		const next = columns[depth + 1];
+		const parent = columns[depth].find((n) => n.children === next);
+		if (!parent) break;
+		keys.push(parent.item.key);
+	}
+	return keys;
+}
+/**
+* Walk `keys` down from `rootColumn`. Stops at a key that isn't present
+* (state stays pending for it), at a branch whose children are unloaded
+* (`blocked`), or at a leaf (`done` — a leaf can never open).
+*/
+function resolveOpenPath(rootColumn, keys) {
+	const columns = [rootColumn];
+	const nodes = [];
+	let current = rootColumn;
+	for (const key of keys) {
+		const node = current.find((n) => n.item.key === key);
+		if (!node) return {
+			columns,
+			nodes,
+			blocked: void 0,
+			done: false
+		};
+		nodes.push(node);
+		if (node.item.isLeaf === true) return {
+			columns,
+			nodes,
+			blocked: void 0,
+			done: true
+		};
+		if (node.children === void 0) return {
+			columns,
+			nodes,
+			blocked: node,
+			done: false
+		};
+		columns.push(node.children);
+		current = node.children;
+	}
+	return {
+		columns,
+		nodes,
+		blocked: void 0,
+		done: true
+	};
+}
+/** JSON `columnWidths` → depth → px. Entries that aren't a depth and a positive width are dropped. */
+function widthsFromRecord(record) {
+	const out = /* @__PURE__ */ new Map();
+	for (const [depth, width] of Object.entries(record)) {
+		const d = Number(depth);
+		if (Number.isInteger(d) && d >= 0 && typeof width === `number` && Number.isFinite(width) && width > 0) out.set(d, width);
+	}
+	return out;
+}
+/** Same columns, by array identity. */
+function sameColumns(a, b) {
+	return a.length === b.length && a.every((col, i) => col === b[i]);
+}
+/** Depth of the column containing `key`, or -1. */
+function columnDepthOf(columns, key) {
+	return columns.findIndex((col) => col.some((n) => n.item.key === key));
+}
+/** Key → node for every loaded node under `nodes`. */
+function indexLoaded(nodes) {
+	const index = /* @__PURE__ */ new Map();
+	const stack = [...nodes];
+	while (stack.length > 0) {
+		const node = stack.pop();
+		index.set(node.item.key, node);
+		if (node.children) stack.push(...node.children);
+	}
+	return index;
+}
+/**
+* Selected keys no longer loaded go pending (deselected silently); pending
+* keys now loaded are selected. With `single`, a restored key replaces the
+* selection and nothing else may come back later.
+*/
+function reconcileSelectedKeys(live, pending, has, single) {
+	const gone = [...live].filter((key) => !has(key));
+	const { present, missing } = partitionKeys(pending, has);
+	if (gone.length === 0 && present.length === 0) return {
+		live,
+		pending,
+		restored: [],
+		changed: false
+	};
+	if (single && present.length > 0) {
+		const winner = present.at(-1);
+		return {
+			live: /* @__PURE__ */ new Set([winner]),
+			pending: EMPTY_KEYS,
+			restored: [winner],
+			changed: true
+		};
+	}
+	return {
+		live: /* @__PURE__ */ new Set([...[...live].filter(has), ...present]),
+		pending: capKeys(gone.length === 0 ? missing : /* @__PURE__ */ new Set([...missing, ...gone])),
+		restored: present,
+		changed: true
+	};
+}
+/**
+* Plan applying the pending `keys` to the columns. While `loading` (the
+* branch whose load is in flight) is the blocking node, nothing changes.
+* Per-depth selection follows the path, keeping the selection inside the
+* deepest open column.
+*/
+function planOpenPath(rootColumn, keys, columns, selectedByDepth, loading) {
+	const r = resolveOpenPath(rootColumn, keys);
+	const waiting = r.blocked !== void 0 && r.blocked === loading;
+	const change = !waiting && !sameColumns(r.columns, columns);
+	let byDepth;
+	if (change) {
+		byDepth = new Map(r.nodes.map((node, depth) => [depth, node]));
+		const tail = selectedByDepth.get(r.nodes.length);
+		if (tail && r.columns[r.nodes.length]?.includes(tail)) byDepth.set(r.nodes.length, tail);
+	}
+	return {
+		columns: change ? r.columns : void 0,
+		selectedByDepth: byDepth,
+		pending: r.done ? void 0 : keys,
+		load: r.blocked && !waiting && r.blocked.item.isLeaf !== true ? {
+			node: r.blocked,
+			depth: r.nodes.length - 1
+		} : void 0
+	};
+}
+/**
+* Re-key the selection onto the loaded tree (`index`). Returns `undefined`
+* when nothing changes (same keys, same node objects).
+*/
+function planSelection(keys, pending, current, last, index, columns, single) {
+	const sel = reconcileSelectedKeys(keys, pending, (k) => index.has(k), single);
+	const nodes = [...sel.live].map((k) => index.get(k));
+	if (!sel.changed && nodes.length === current.size && nodes.every((n) => current.has(n))) return void 0;
+	const lastKey = sel.restored.at(-1) ?? last?.item.key;
+	const placed = [];
+	for (const key of sel.restored) {
+		const depth = columnDepthOf(columns, key);
+		if (depth >= 0) placed.push([depth, index.get(key)]);
+	}
+	return {
+		keys: new Set(sel.live),
+		nodes: new Set(nodes),
+		pending: sel.pending,
+		last: (lastKey === void 0 ? void 0 : index.get(lastKey)) ?? nodes.at(-1),
+		placed,
+		restored: sel.restored.length > 0
+	};
+}
+/** Cursor gone → pending (when it was a keyboard cursor); pending cursor visible → placed. */
+function planFocus(cursor, keyboard, pending, index, columns) {
+	const clear = cursor !== void 0 && !index.has(cursor);
+	const want = pending ?? (clear && keyboard ? cursor : void 0);
+	const depth = want === void 0 ? -1 : columnDepthOf(columns, want);
+	if (depth < 0) return {
+		clear,
+		pending: want,
+		tickle: void 0
+	};
+	return {
+		clear,
+		pending: void 0,
+		tickle: {
+			node: columns[depth].find((n) => n.item.key === want),
+			depth
+		}
+	};
+}
+/**
+* The rendered columns' `.column-content` elements, the key each column is
+* keyed by (its parent node's) and the row keys per column.
+*/
+function columnScrollDom(root, columns, displayKey, filter) {
+	return {
+		contents: [...root?.querySelectorAll(`.column:not(.loading-column) > .column-content`) ?? []],
+		parentKeys: displayKey === void 0 ? [] : [displayKey, ...openPathKeys(columns)],
+		keysAt: (depth) => (columns[depth] ?? []).filter((n) => !filter || filter(n, depth)).map((n) => n.item.key)
+	};
+}
+/**
+* Scroll of each scrolled column, keyed by `parentKeys[depth]`. `contents`
+* are the `.column-content` elements in depth order.
+*/
+function captureColumnScrolls(contents, parentKeys, keysAt) {
+	const out = {};
+	contents.forEach((content, depth) => {
+		const parent = parentKeys[depth];
+		if (parent === void 0 || content.scrollTop === 0 && content.scrollLeft === 0) return;
+		const items = [...content.querySelectorAll(`.item`)];
+		const keys = keysAt(depth);
+		out[parent] = captureElementScroll(content, items, (el) => keys[items.indexOf(el)]);
+	});
+	return out;
+}
+/** Apply pending column scrolls whose column is rendered. Returns those still pending. */
+function applyColumnScrolls(pending, contents, parentKeys, keysAt) {
+	let next;
+	for (const [parent, scroll] of pending) {
+		const depth = parentKeys.indexOf(parent);
+		const content = contents[depth];
+		if (depth < 0 || !content) continue;
+		let reached;
+		if (scroll.anchor) {
+			const index = keysAt(depth).indexOf(scroll.anchor.key);
+			const item = index < 0 ? void 0 : content.querySelectorAll(`.item`)[index];
+			reached = item ? restoreElementScroll(content, item, scroll.anchor.offset) : false;
+		} else reached = scrollToOffset(content, scroll.top);
+		if (reached) {
+			next ??= new Map(pending);
+			next.delete(parent);
+		}
+	}
+	return next ?? pending;
+}
+//#endregion
+//#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`;
+		this._columns = [];
+		this._selectedByDepth = /* @__PURE__ */ new Map();
+		this._selectedKeys = /* @__PURE__ */ new Set();
+		this._selectedNodes = /* @__PURE__ */ new Set();
+		this.#columnWidths = /* @__PURE__ */ new Map();
+		this.#resizingDepth = -1;
+		this.#resizeStartX = 0;
+		this.#resizeStartWidth = 0;
+		this.restoreLoads = true;
+		this.#viewState = new ViewStateController(this, {
+			kind: `miller-list`,
+			capture: () => this.getViewState()
+		});
+		this.#pendingSelected = EMPTY_KEYS;
+		this.#pendingColumnScroll = /* @__PURE__ */ new Map();
+		this.#keyboardFocus = false;
+		this.#columnsSeen = [];
+		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++) {
+				const col = this._columns[depth];
+				if (col) for (const node of col) items.push({ id: this.#buildTickledId(node, depth) });
+			}
+			return items;
+		} });
+		this.#onColumnScroll = (event) => {
+			if (this.#pendingColumnScroll.size === 0 && event.target.classList?.contains(`column-content`)) this.#viewState.notify();
+		};
+		this.#selectOrigin = `user`;
+		this.#selectSilent = false;
+		this.#onKeyDown = (event) => {
+			if (this.search.isOpen) return;
+			const currentDepth = this.#getTickledDepthOrDefault();
+			const col = this._columns[currentDepth];
+			if (!col || col.length === 0) {
+				const depth0Col = this._columns[0];
+				if (depth0Col && depth0Col.length > 0) {
+					this.tickled.setTickled(this.#buildTickledId(depth0Col[0], 0));
+					this.requestUpdate();
+				}
+				return;
+			}
+			switch (event.key) {
+				case `ArrowDown`:
+					event.preventDefault();
+					this.#moveCursor(col, currentDepth, event, (current) => Math.min(current + 1, col.length - 1));
+					break;
+				case `ArrowUp`:
+					event.preventDefault();
+					this.#moveCursor(col, currentDepth, event, (current) => Math.max(current - 1, 0));
+					break;
+				case `Home`:
+					event.preventDefault();
+					this.#moveCursor(col, currentDepth, event, () => 0, true);
+					break;
+				case `End`:
+					event.preventDefault();
+					this.#moveCursor(col, currentDepth, event, () => col.length - 1, true);
+					break;
+				case `PageUp`:
+					event.preventDefault();
+					this.#moveCursor(col, currentDepth, event, (current) => Math.max(current - this.#pageSize(currentDepth), 0), true);
+					break;
+				case `PageDown`:
+					event.preventDefault();
+					this.#moveCursor(col, currentDepth, event, (current) => Math.min(current + this.#pageSize(currentDepth), col.length - 1), true);
+					break;
+				case `ArrowRight`: {
+					event.preventDefault();
+					const tickled = this.#getTickledNodeAndDepth();
+					if (!tickled) {
+						if (col.length > 0) {
+							this.#setTickledNode(col[0], currentDepth);
+							this.requestUpdate();
+						}
+						return;
+					}
+					const { node, depth } = tickled;
+					if (this.interactionMode === `vscode` || this.interactionMode === `standard`) {
+						this._selectedByDepth.set(depth, node);
+						this.#expandNode(node, depth);
+					} else this.#onItemClick(node, depth);
+					if (this._columns.length > depth + 1) {
+						const nextCol = this._columns[depth + 1];
+						if (nextCol && nextCol.length > 0) this.#setTickledNode(nextCol[0], depth + 1);
+					}
+					this.requestUpdate();
+					break;
+				}
+				case `ArrowLeft`:
+					event.preventDefault();
+					if (currentDepth > 0) {
+						this.#abortPending();
+						this.#pendingPath = void 0;
+						this._columns = this._columns.slice(0, currentDepth);
+						const prevCol = this._columns[currentDepth - 1];
+						if (prevCol && prevCol.length > 0) {
+							const selectedNode = this._selectedByDepth.get(currentDepth - 1);
+							const targetNode = selectedNode && prevCol.includes(selectedNode) ? selectedNode : prevCol[0];
+							this.#setTickledNode(targetNode, currentDepth - 1);
+						}
+						this.requestUpdate();
+					}
+					break;
+				case `Enter`: {
+					event.preventDefault();
+					const tickled = this.#getTickledNodeAndDepth();
+					if (!tickled) return;
+					const { node, depth, index } = tickled;
+					if (this.interactionMode === `standard` || this.interactionMode === `vscode`) {
+						if (event.shiftKey && this.#anchor?.depth === depth) {
+							const from = Math.min(this.#anchor.index, index);
+							const to = Math.max(this.#anchor.index, index);
+							this._selectedKeys = new Set(col.slice(from, to + 1).map((n) => n.item.key));
+						} else {
+							this._selectedKeys.add(node.item.key);
+							this.#anchor = {
+								key: node.item.key,
+								depth,
+								index
+							};
+						}
+						this.#selectionChanged();
+					} else this._selectedByDepth.set(depth, node);
+					this.dispatchEvent(new CustomEvent(`activate`, {
+						detail: {
+							node,
+							depth
+						},
+						bubbles: true,
+						composed: true
+					}));
+					this.requestUpdate();
+					break;
+				}
+				case `Escape`:
+					event.preventDefault();
+					this.#abortPending();
+					if (this._columns.length > 1) {
+						this.#pendingPath = void 0;
+						this._columns = this._columns.slice(0, -1);
+						const newDepth = Math.max(0, currentDepth - 1);
+						const prevCol = this._columns[newDepth];
+						if (prevCol && prevCol.length > 0) {
+							const selectedNode = this._selectedByDepth.get(newDepth);
+							const targetNode = selectedNode && prevCol.includes(selectedNode) ? selectedNode : prevCol[0];
+							this.#setTickledNode(targetNode, newDepth);
+						}
+						this.requestUpdate();
+					}
+			}
+		};
+		this.#onResizeStart = (event, depth) => {
+			event.preventDefault();
+			event.stopPropagation();
+			this.#resizingDepth = depth;
+			this.#resizeStartX = event.clientX;
+			const el = this.shadowRoot?.querySelectorAll(`.column`)[depth];
+			this.#resizeStartWidth = el ? el.getBoundingClientRect().width : 200;
+			window.addEventListener(`pointermove`, this.#onResizeMove);
+			window.addEventListener(`pointerup`, this.#onResizeEnd);
+		};
+		this.#resizeRaf = null;
+		this.#resizePendingWidth = 0;
+		this.#onResizeMove = (event) => {
+			if (this.#resizingDepth < 0) return;
+			this.#resizePendingWidth = Math.max(32, this.#resizeStartWidth + (event.clientX - this.#resizeStartX));
+			this.#resizeRaf ??= requestAnimationFrame(this.#applyResizeWidth);
+		};
+		this.#applyResizeWidth = () => {
+			this.#resizeRaf = null;
+			if (this.#resizingDepth < 0) return;
+			(this.shadowRoot?.querySelectorAll(`.column`)[this.#resizingDepth])?.setAttribute(`style`, this.#explicitWidthStyle(this.#resizePendingWidth));
+		};
+		this.#onResizeEnd = () => {
+			if (this.#resizeRaf !== null) {
+				cancelAnimationFrame(this.#resizeRaf);
+				this.#resizeRaf = null;
+			}
+			if (this.#resizingDepth >= 0 && this.#resizePendingWidth > 0) {
+				this.#columnWidths.set(this.#resizingDepth, this.#resizePendingWidth);
+				this.#viewState.notify();
+				this.requestUpdate();
+			}
+			this.#resizePendingWidth = 0;
+			this.#resizingDepth = -1;
+			window.removeEventListener(`pointermove`, this.#onResizeMove);
+			window.removeEventListener(`pointerup`, this.#onResizeEnd);
+		};
+	}
+	#lastSelectedNode;
+	#anchor;
+	#columnWidths;
+	#pendingNode;
+	#pendingController;
+	#expandTimer;
+	#resizingDepth;
+	#resizeStartX;
+	#resizeStartWidth;
+	#modelUnsubscribe;
+	#viewState;
+	/** Saved open path still being applied (keys not loaded / present yet). */
+	#pendingPath;
+	#pendingSelected;
+	#pendingFocus;
+	#pendingColumnScroll;
+	/** The cursor was last placed by keyboard (only then is it recorded as `focus`). */
+	#keyboardFocus;
+	/** Columns last reported through `view-state-change`. */
+	#columnsSeen;
+	#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;
+		const colonIndex = id.indexOf(`:`);
+		if (colonIndex < 0) return void 0;
+		return Number(id.substring(0, colonIndex));
+	}
+	willUpdate(_changedProps) {
+		if (!sameColumns(this._columns, this.#columnsSeen)) {
+			this.#columnsSeen = this._columns;
+			this.#viewState.notify();
+		}
+	}
+	updated(changedProps) {
+		if (changedProps.has(`searchModes`)) this.#syncSearchCommands();
+		if (changedProps.has(`root`) && this.root) {
+			const rebased = this.viewRoot !== void 0;
+			const path = rebased ? [] : openPathKeys(this._columns);
+			const focus = this.#focusKey();
+			this.#abortPending();
+			if (rebased) {
+				this.viewRoot = void 0;
+				this._selectedKeys = /* @__PURE__ */ new Set();
+				this._selectedNodes = /* @__PURE__ */ new Set();
+			}
+			this._selectedByDepth.clear();
+			this.#lastSelectedNode = void 0;
+			this.#anchor = void 0;
+			this.tickled.clearTickled();
+			const display = this.#displayRoot;
+			this._columns = display?.children ? [display.children] : [];
+			this.#columnsSeen = this._columns;
+			if (path.length > 0) this.#pendingPath ??= path;
+			if (focus !== void 0) this.#pendingFocus ??= focus;
+			this.#reconcileViewState();
+		}
+		if (changedProps.has(`viewRoot`)) this.#applyViewRoot();
+		if (changedProps.has(`model`)) {
+			this.#modelUnsubscribe?.();
+			this.#modelUnsubscribe = void 0;
+			const model = this.model;
+			if (model) {
+				this.root = model.root;
+				this.#modelUnsubscribe = model._subscribe((event) => {
+					if (event.type === `root`) {
+						this.root = event.root;
+						this.requestUpdate();
+					} else if (event.type === `invalidate`) {
+						for (let depth = 0; depth < this._columns.length - 1; depth++) if (this._columns[depth]?.some((n) => n.item.key === event.key)) {
+							this._columns = this._columns.slice(0, depth + 1);
+							this.requestUpdate();
+							break;
+						}
+					}
+				});
+			}
+		}
+		if (this.#pendingNode?.children !== void 0 && this._loadingDepth !== void 0) {
+			const loadingDepth = this._loadingDepth;
+			const resolvedChildren = this.#pendingNode.children;
+			this.#pendingNode = void 0;
+			this.#pendingController = void 0;
+			this._loadingDepth = void 0;
+			const cols = this._columns.slice(0, loadingDepth);
+			if (resolvedChildren.length > 0) cols.push(resolvedChildren);
+			this._columns = cols;
+			if (this.#hasPendingViewState()) this.#reconcileViewState();
+		}
+		if (this.#pendingColumnScroll.size > 0) {
+			const { contents, parentKeys, keysAt } = this.#columnScrollDom();
+			this.#pendingColumnScroll = applyColumnScrolls(this.#pendingColumnScroll, contents, parentKeys, keysAt);
+		}
+		const prevColumns = changedProps.get(`_columns`);
+		const columnAdded = changedProps.has(`_columns`) && (prevColumns?.length ?? 0) < this._columns.length;
+		const loadingAppeared = changedProps.has(`_loadingDepth`) && this._loadingDepth !== void 0;
+		if (columnAdded || loadingAppeared) {
+			const container = this.shadowRoot?.querySelector(`#container`);
+			container?.scrollTo({
+				left: container.scrollWidth,
+				behavior: `smooth`
+			});
+		}
+	}
+	firstUpdated() {
+		const container = this.shadowRoot?.querySelector(`#container`);
+		if (container) onUserScrollIntent(container, () => {
+			this.#pendingColumnScroll = /* @__PURE__ */ new Map();
+		});
+		this.renderRoot.addEventListener(`scroll`, this.#onColumnScroll, {
+			capture: true,
+			passive: true
+		});
+	}
+	#onColumnScroll;
+	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;
+	}
+	/**
+	* Snapshot the open path, selection, keyboard cursor, column widths and
+	* column scroll as plain JSON, keyed by `item.key`. Includes pending state
+	* for keys not currently loaded.
+	*/
+	getViewState(options) {
+		const withPending = options?.includePending ?? true;
+		const { contents, parentKeys, keysAt } = this.#columnScrollDom();
+		return this.#viewState.shape({
+			selected: keysToArray(this._selectedKeys, withPending ? this.#pendingSelected : []),
+			path: (withPending ? this.#pendingPath : void 0) ?? openPathKeys(this._columns),
+			focus: this.#focusKey() ?? (withPending ? this.#pendingFocus : void 0),
+			columnWidths: Object.fromEntries(this.#columnWidths),
+			columnScroll: {
+				...captureColumnScrolls(contents, parentKeys, keysAt),
+				...withPending ? Object.fromEntries(this.#pendingColumnScroll) : {}
+			}
+		}, options);
+	}
+	/**
+	* Apply saved view state. Fields present replace the current ones; keys not
+	* loaded yet are applied as they appear — including via `loadChildren` /
+	* `model` for the saved path when `restoreLoads`.
+	*/
+	setViewState(state) {
+		if (!this.#viewState.accepts(state)) return;
+		this.#viewState.restoring(() => {
+			if (state.path) this.#pendingPath = [...state.path];
+			if (state.selected) {
+				this.#pendingSelected = capKeys(new Set(state.selected));
+				const prev = new Set(this._selectedNodes);
+				this._selectedKeys = /* @__PURE__ */ new Set();
+				this._selectedNodes = /* @__PURE__ */ new Set();
+				this.#lastSelectedNode = void 0;
+				this.#anchor = void 0;
+				if (prev.size > 0) this.#dispatchSelectEvent(prev);
+			}
+			if (state.focus !== void 0) this.#pendingFocus = state.focus;
+			if (state.columnWidths) {
+				this.#columnWidths = widthsFromRecord(state.columnWidths);
+				this.#viewState.notify();
+			}
+			if (state.columnScroll) this.#pendingColumnScroll = new Map(Object.entries(state.columnScroll));
+			this.#reconcileViewState();
+		});
+		this.requestUpdate();
+	}
+	clearPendingViewState() {
+		this.#pendingPath = void 0;
+		this.#pendingSelected = EMPTY_KEYS;
+		this.#pendingFocus = void 0;
+		this.#pendingColumnScroll = /* @__PURE__ */ new Map();
+	}
+	/** An explicit selection change supersedes a saved one still waiting. */
+	#selectionChanged() {
+		if (!this.#viewState.isRestoring) this.#pendingSelected = EMPTY_KEYS;
+		this.#viewState.notify();
+	}
+	#hasPendingViewState() {
+		return this.#pendingPath !== void 0 || this.#pendingSelected.size > 0 || this.#pendingFocus !== void 0;
+	}
+	#tickledKey() {
+		const id = this.tickled.tickledId;
+		const colon = id?.indexOf(`:`) ?? -1;
+		return id === void 0 || colon < 0 ? void 0 : id.substring(colon + 1);
+	}
+	#focusKey() {
+		return this.#keyboardFocus ? this.#tickledKey() : void 0;
+	}
+	#columnScrollDom() {
+		return columnScrollDom(this.shadowRoot, this._columns, this.#displayRoot?.item.key, this.filterPredicate);
+	}
+	/**
+	* Move state whose keys are no longer loaded to pending; apply pending state
+	* whose keys now are (pure plans in miller-view-state.ts). Runs on every
+	* data change and on `setViewState()`.
+	*/
+	#reconcileViewState() {
+		const rootColumn = this.#displayRoot?.children;
+		if (!rootColumn) return;
+		const index = indexLoaded(rootColumn);
+		this.#viewState.restoring(() => {
+			if (this.#pendingPath) this.#applyPathPlan(planOpenPath(rootColumn, this.#pendingPath, this._columns, this._selectedByDepth, this.#pendingNode));
+			const sel = planSelection(this._selectedKeys, this.#pendingSelected, this._selectedNodes, this.#lastSelectedNode, index, this._columns, this.interactionMode === `implicit`);
+			if (sel) this.#applySelectionPlan(sel);
+			const focus = planFocus(this.#tickledKey(), this.#keyboardFocus, this.#pendingFocus, index, this._columns);
+			if (focus.clear) this.tickled.clearTickled();
+			this.#pendingFocus = focus.pending;
+			if (focus.tickle) {
+				this.tickled.setTickled(this.#buildTickledId(focus.tickle.node, focus.tickle.depth));
+				this.#keyboardFocus = true;
+				this.#viewState.notify();
+			}
+		});
+	}
+	#applyPathPlan(plan) {
+		if (plan.columns) {
+			if (this.#pendingNode) this.#abortPending();
+			this._columns = plan.columns;
+			this._selectedByDepth = plan.selectedByDepth;
+		}
+		this.#pendingPath = plan.pending;
+		if (plan.load && this.restoreLoads && (this.model || this.loadChildren)) this.#loadUnloadedChildren(plan.load.node, plan.load.depth, true, true);
+		if (!sameColumns(this._columns, this.#columnsSeen)) {
+			this.#columnsSeen = this._columns;
+			this.#viewState.notify();
+		}
+	}
+	#applySelectionPlan(plan) {
+		const prev = this._selectedNodes;
+		this._selectedKeys = plan.keys;
+		this._selectedNodes = plan.nodes;
+		this.#pendingSelected = plan.pending;
+		this.#lastSelectedNode = plan.last;
+		if (this.interactionMode === `implicit`) for (const [depth, node] of plan.placed) this._selectedByDepth.set(depth, node);
+		if (!plan.restored) {
+			this.#viewState.notify();
+			return;
+		}
+		const origin = this.#selectOrigin;
+		this.#selectOrigin = `programmatic`;
+		try {
+			this.#dispatchSelectEvent(prev);
+		} finally {
+			this.#selectOrigin = origin;
+		}
+	}
+	/** Read current selection as an immutable set of item keys. */
+	get selectedKeys() {
+		return this._selectedKeys;
+	}
+	/** Replace entire selection and trigger a re-render. */
+	set selectedKeys(keys) {
+		this._selectedKeys = new Set(keys);
+		this.#selectionChanged();
+		this.requestUpdate();
+	}
+	/** The most recently selected node. */
+	get selectedNode() {
+		return this.#lastSelectedNode;
+	}
+	set selectedNode(node) {
+		this.#lastSelectedNode = node;
+		if (node) {
+			if (this.interactionMode === `implicit` || this.interactionMode === `standard`) {
+				this._selectedKeys = /* @__PURE__ */ new Set([node.item.key]);
+				this.#selectionChanged();
+			}
+		}
+		this.requestUpdate();
+	}
+	/** Full selection set (implements TreeComponent interface). */
+	get selectedNodes() {
+		return this._selectedNodes;
+	}
+	/** Add `node` to the selection (respects selectionFilter). Dispatches `select` event. */
+	select(node) {
+		if (!this.#canSelect(node)) return;
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes.add(node);
+		this._selectedKeys.add(node.item.key);
+		this.#lastSelectedNode = node;
+		this.#dispatchSelectEvent(prev);
+		this.requestUpdate();
+	}
+	/** Remove `node` from the selection. Dispatches `select` event. */
+	deselect(node) {
+		if (!this._selectedNodes.has(node)) return;
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes.delete(node);
+		this._selectedKeys.delete(node.item.key);
+		if (this.#lastSelectedNode === node) this.#lastSelectedNode = [...this._selectedNodes].at(-1);
+		this.#dispatchSelectEvent(prev);
+		this.requestUpdate();
+	}
+	/**
+	* Clear all selection and trigger a re-render.
+	*/
+	clearSelection() {
+		this.#selectionChanged();
+		const prev = new Set(this._selectedNodes);
+		this._selectedKeys = /* @__PURE__ */ new Set();
+		this._selectedNodes.clear();
+		this.#lastSelectedNode = void 0;
+		if (prev.size > 0) this.#dispatchSelectEvent(prev);
+		this.requestUpdate();
+	}
+	/** Not implemented on miller-list. */
+	selectAll() {}
+	/** Not implemented on miller-list. */
+	deselectAll() {}
+	/**
+	* Select or deselect a single node by key.
+	* In `checked` interactionMode this also recursively selects/deselects all loaded descendants.
+	*/
+	setSelected(node, selected) {
+		if (this.interactionMode === `checked`) this.#applyCheckedToggle(node, selected);
+		else if (selected) {
+			this._selectedKeys.add(node.item.key);
+			this._selectedNodes.add(node);
+		} else {
+			this._selectedKeys.delete(node.item.key);
+			this._selectedNodes.delete(node);
+		}
+		this.#selectionChanged();
+		this.requestUpdate();
+	}
+	/**
+	* Return all MillerNodes whose key is in `_selectedKeys`, searching only
+	* the currently visible columns.
+	*/
+	getSelected() {
+		const results = [];
+		for (const col of this._columns) for (const node of col) if (this._selectedKeys.has(node.item.key)) results.push(node);
+		return results;
+	}
+	/**
+	* Programmatically navigate to a node by key path, relative to the current
+	* view root (rebased or full tree).
+	*/
+	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 path = openPathKeys(this._columns);
+		if (path.length > 0) this.#pendingPath ??= path;
+		this.#reconcileViewState();
+		this.requestUpdate();
+	}
+	#selectOrigin;
+	#selectSilent;
+	#navigateTo(rootColumn, keys, reveal) {
+		this.#abortPending();
+		this.#pendingPath = void 0;
+		this._selectedByDepth.clear();
+		this.tickled.clearTickled();
+		const newColumns = [rootColumn];
+		let currentColumn = rootColumn;
+		let success = true;
+		let lastNode;
+		let lastDepth = 0;
+		for (let depth = 0; depth < keys.length; depth++) {
+			const idx = currentColumn.findIndex((n) => n.item.key === keys[depth]);
+			if (idx < 0) {
+				success = false;
+				break;
+			}
+			const node = currentColumn[idx];
+			this._selectedByDepth.set(depth, node);
+			lastNode = node;
+			lastDepth = depth;
+			if (node.item.isLeaf || !node.children || node.children.length === 0) {
+				if (depth < keys.length - 1) success = false;
+				break;
+			}
+			newColumns.push(node.children);
+			currentColumn = node.children;
+		}
+		this._columns = newColumns;
+		if (lastNode) this.tickled.setTickled(this.#buildTickledId(lastNode, lastDepth));
+		if (this.interactionMode !== `implicit` && this.interactionMode !== `manual`) {
+			const leafKey = keys.at(-1);
+			if (leafKey) {
+				this._selectedKeys = /* @__PURE__ */ new Set([leafKey]);
+				this.#selectionChanged();
+			}
+		}
+		this.requestUpdate();
+		this.#scrollNavigatedItemIntoView(reveal === `center-if-hidden` ? `auto` : `smooth`, reveal);
+		return success;
+	}
+	/**
+	* Programmatically navigate to the first node (breadth-first) matching a predicate.
+	*/
+	navigateToNode(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;
+		this.#pendingPath = void 0;
+		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() {
+		const display = this.#displayRoot;
+		if (!display?.children) return [];
+		const result = [];
+		const visit = (node, depth) => {
+			result.push({
+				node,
+				depth
+			});
+			if (node.children) for (const child of node.children) visit(child, depth + 1);
+		};
+		for (const child of display.children) visit(child, 0);
+		return result;
+	}
+	#findNodePath(nodes, predicate, prefix = []) {
+		for (const node of nodes) {
+			const path = [...prefix, node.item.key];
+			if (predicate(node)) return path;
+			if (node.children?.length) {
+				const result = this.#findNodePath(node.children, predicate, path);
+				if (result) return result;
+			}
+		}
+	}
+	/**
+	* 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);
+		if (this.#hasPendingViewState()) this.#reconcileViewState();
+	}
+	/**
+	* 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() {
+		this.#pendingPath = void 0;
+		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;
+	}
+	_handleItemClick(node, depth, event) {
+		this.#onItemClick(node, depth, event);
+	}
+	/**
+	* Called by subclasses (in `checked` interactionMode) when a checkbox is clicked.
+	*/
+	_handleCheckboxClick(event, node, _depth) {
+		event.stopPropagation();
+		this.#onCheckboxClick(node);
+	}
+	/**
+	* Called by subclasses when an item is double-clicked.
+	*/
+	_handleItemDblClick(node, depth, _event) {
+		this.dispatchEvent(new CustomEvent(`item-dblclick`, {
+			detail: {
+				node,
+				depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* Called by subclasses when an item is right-clicked.
+	*/
+	_handleItemRightClick(node, depth, event) {
+		this.dispatchEvent(new CustomEvent(`item-rightclick`, {
+			detail: {
+				node,
+				depth,
+				mouseEvent: event
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* Called by subclasses when a column header is right-clicked.
+	*/
+	_handleHeaderRightClick(event, depth) {
+		const label = this.#getColumnHeader(depth);
+		const path = this.#buildPath(depth);
+		this.dispatchEvent(new CustomEvent(`header-rightclick`, {
+			detail: {
+				depth,
+				label,
+				path,
+				mouseEvent: event
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_isSelected(node, depth) {
+		if (this.interactionMode === `implicit`) return this._selectedByDepth.get(depth) === node;
+		return this._selectedKeys.has(node.item.key);
+	}
+	#isAncestor(node, depth) {
+		const nextCol = this._columns[depth + 1];
+		return nextCol !== void 0 && node.children === nextCol;
+	}
+	_isOpen(node, depth) {
+		return this.#isAncestor(node, depth);
+	}
+	/**
+	* Return the display state for an item identified by key at a given depth.
+	*/
+	getItemState(key, depth) {
+		const node = this._columns[depth]?.find((n) => n.item.key === key);
+		if (!node) return void 0;
+		return {
+			selected: this._isSelected(node, depth),
+			open: this.#isAncestor(node, depth),
+			focused: this._isFocused(node, depth),
+			isLeaf: node.item.isLeaf ?? false
+		};
+	}
+	#canSelect(node) {
+		if (this.selectionFilter === `none`) return false;
+		if (this.selectionFilter === `leaf`) return node.item.isLeaf !== false;
+		if (this.selectionFilter === `branch`) return node.item.isLeaf === false || node.children !== void 0 && node.children.length > 0;
+		return true;
+	}
+	#dispatchSelectEvent(previous) {
+		this.#selectionChanged();
+		if (this.#selectSilent) return;
+		const detail = {
+			selected: new Set(this._selectedNodes),
+			previous,
+			origin: this.#selectOrigin
+		};
+		this.dispatchEvent(new CustomEvent(`select`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#abortPending() {
+		if (this.#expandTimer !== void 0) {
+			clearTimeout(this.#expandTimer);
+			this.#expandTimer = void 0;
+		}
+		if (this.#pendingController) {
+			const node = this.#pendingNode;
+			const depth = this._loadingDepth;
+			this.#pendingController.abort();
+			this.#pendingController = void 0;
+			this.#pendingNode = void 0;
+			this._loadingDepth = void 0;
+			if (node && depth !== void 0) this.dispatchEvent(new CustomEvent(`collapse`, {
+				detail: {
+					node,
+					depth
+				},
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	/**
+	* Build the ancestry path for a given column depth.
+	*/
+	#buildPath(depth) {
+		const path = [];
+		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);
+		}
+		return path;
+	}
+	#onHeaderClick(depth) {
+		const detail = {
+			depth,
+			label: this.#getColumnHeader(depth),
+			path: this.#buildPath(depth)
+		};
+		this.dispatchEvent(new CustomEvent(`header-click`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#onItemClick(node, depth, event) {
+		if (this._loadingDepth !== void 0 && this._loadingDepth > depth) this.#abortPending();
+		this.tickled.setTickled(this.#buildTickledId(node, depth));
+		this.#keyboardFocus = false;
+		this.#pendingFocus = void 0;
+		this.dispatchEvent(new CustomEvent(`item-click`, {
+			detail: {
+				node,
+				depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		switch (this.interactionMode) {
+			case `implicit`:
+				this.#handleImplicitClick(node, depth);
+				break;
+			case `standard`:
+				this.#handleStandardClick(node, depth, event);
+				break;
+			case `vscode`:
+				this.#handleStandardClick(node, depth, event);
+				break;
+			case `manual`: break;
+			case `checked`: this.#expandNode(node, depth, true);
+		}
+	}
+	#handleImplicitClick(node, depth) {
+		const previous = new Set(this._selectedNodes);
+		this._selectedByDepth.set(depth, node);
+		this.#lastSelectedNode = node;
+		this._selectedKeys = /* @__PURE__ */ new Set([node.item.key]);
+		this._selectedNodes.clear();
+		this._selectedNodes.add(node);
+		this.#expandNode(node, depth, true);
+		if (!previous.has(node)) this.#dispatchSelectEvent(previous);
+	}
+	#handleStandardClick(node, depth, event) {
+		const col = this._columns[depth];
+		const index = col ? col.indexOf(node) : -1;
+		const isMeta = event ? event.metaKey || event.ctrlKey : false;
+		const isShift = event ? event.shiftKey : false;
+		if (isMeta) {
+			if (this._selectedKeys.has(node.item.key)) {
+				this._selectedKeys.delete(node.item.key);
+				this._selectedNodes.delete(node);
+			} else {
+				this._selectedKeys.add(node.item.key);
+				this._selectedNodes.add(node);
+			}
+			this.#anchor = index >= 0 ? {
+				key: node.item.key,
+				depth,
+				index
+			} : this.#anchor;
+			this.#selectionChanged();
+			this.requestUpdate();
+			return;
+		}
+		if (isShift && this.#anchor && this.#anchor.depth === depth && col) {
+			const from = Math.min(this.#anchor.index, index);
+			const to = Math.max(this.#anchor.index, index);
+			const rangeNodes = col.slice(from, to + 1);
+			this._selectedKeys = new Set(rangeNodes.map((n) => n.item.key));
+			this._selectedNodes = new Set(rangeNodes);
+			this.#selectionChanged();
+			this.requestUpdate();
+			return;
+		}
+		const previous = new Set(this._selectedNodes);
+		this._selectedKeys = /* @__PURE__ */ new Set([node.item.key]);
+		this._selectedNodes = /* @__PURE__ */ new Set([node]);
+		this.#anchor = index >= 0 ? {
+			key: node.item.key,
+			depth,
+			index
+		} : void 0;
+		this._selectedByDepth.set(depth, node);
+		this.#lastSelectedNode = node;
+		this.#expandNode(node, depth, true);
+		if (!previous.has(node) || previous.size !== 1) this.#dispatchSelectEvent(previous);
+	}
+	/**
+	* Open the column for `node`. `immediate` skips the lazy-load debounce: use
+	* it for deliberate clicks, where the user has committed to this node. The
+	* debounce is kept for keyboard navigation, which can sweep over many
+	* branches in quick succession.
+	*/
+	#expandNode(node, depth, immediate = false) {
+		this.#pendingPath = void 0;
+		if (node.item.isLeaf) {
+			this._columns = this._columns.slice(0, depth + 1);
+			this.requestUpdate();
+			return;
+		}
+		if (node.children === void 0) this.#loadUnloadedChildren(node, depth, true, immediate);
+		else {
+			const newColumns = this._columns.slice(0, depth + 1);
+			newColumns.push(node.children);
+			this._columns = newColumns;
+			this.dispatchEvent(new CustomEvent(`expand`, {
+				detail: {
+					node,
+					depth
+				},
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	/**
+	* 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, immediate = false) {
+		const nodeDepth = parentDepth + 1;
+		this._columns = this._columns.slice(0, nodeDepth);
+		this._loadingDepth = nodeDepth;
+		this.#pendingController?.abort();
+		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;
+			if (this.#hasPendingViewState()) this.#reconcileViewState();
+		};
+		const handleError = (err) => {
+			if (err.name !== `AbortError`) console.error(err);
+			node.children = [];
+			this.#pendingNode = void 0;
+			this.#pendingController = void 0;
+			this._loadingDepth = void 0;
+			if (this.#hasPendingViewState()) this.#reconcileViewState();
+			this.requestUpdate();
+		};
+		if (this.model || this.loadChildren) {
+			if (this.#expandTimer !== void 0) {
+				clearTimeout(this.#expandTimer);
+				this.#expandTimer = void 0;
+			}
+			const load = () => {
+				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);
+			};
+			if (immediate) load();
+			else this.#expandTimer = setTimeout(load, 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 previous = new Set(this._selectedNodes);
+		const currentlySelected = this._selectedKeys.has(node.item.key);
+		if (!!node.children?.length ? this.#allDescendantsSelected(node) : currentlySelected) this.#applyCheckedToggle(node, false);
+		else this.#applyCheckedToggle(node, true);
+		this.requestUpdate();
+		this.#dispatchSelectEvent(previous);
+	}
+	#allDescendantsSelected(node) {
+		if (!this._selectedKeys.has(node.item.key)) return false;
+		if (!node.children?.length) return true;
+		return node.children.every((child) => this.#allDescendantsSelected(child));
+	}
+	#applyCheckedToggle(node, selected) {
+		if (selected) {
+			this._selectedKeys.add(node.item.key);
+			this._selectedNodes.add(node);
+		} else {
+			this._selectedKeys.delete(node.item.key);
+			this._selectedNodes.delete(node);
+		}
+		if (node.children) for (const child of node.children) this.#applyCheckedToggle(child, selected);
+	}
+	#getTickledDepthOrDefault() {
+		return this.#getTickledDepth() ?? 0;
+	}
+	#getTickledNodeAndDepth() {
+		const id = this.tickled.tickledId;
+		if (!id) return void 0;
+		const colonIndex = id.indexOf(`:`);
+		if (colonIndex < 0) return void 0;
+		const depth = Number(id.substring(0, colonIndex));
+		const key = id.substring(colonIndex + 1);
+		const col = this._columns[depth];
+		if (!col) return void 0;
+		const index = col.findIndex((n) => n.item.key === key);
+		if (index < 0) return void 0;
+		return {
+			node: col[index],
+			depth,
+			index
+		};
+	}
+	#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;
+			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
+			});
+		});
+	}
+	#setTickledNode(node, depth) {
+		this.tickled.setTickled(this.#buildTickledId(node, depth));
+		this.#keyboardFocus = true;
+		this.#pendingFocus = void 0;
+		this.#viewState.notify();
+		this.dispatchEvent(new CustomEvent(`tickle`, {
+			detail: {
+				node,
+				depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* Number of items a PageUp/PageDown moves: how many rows fit in the column's
+	* visible area, less one so the previous page's last row stays in view.
+	*/
+	#pageSize(depth) {
+		const content = this.shadowRoot?.querySelectorAll(`.column`)[depth]?.querySelector(`.column-content`);
+		const item = content?.querySelector(`.item`);
+		if (!content || !item || item.offsetHeight === 0) return 10;
+		return Math.max(1, Math.floor(content.clientHeight / item.offsetHeight) - 1);
+	}
+	/**
+	* Move the cursor within column `col` to the index returned by `target`
+	* (given the current cursor index, or -1 when the cursor isn't in this
+	* column, which behaves as "before the first item"). Handles Shift range
+	* extension and anchor seating for `standard` / `vscode` modes.
+	* `scroll` brings the new item into view (for jumps larger than one row).
+	*/
+	#moveCursor(col, currentDepth, event, target, scroll = false) {
+		const current = this.#getTickledNodeAndDepth();
+		const targetIndex = target(current !== void 0 && current.depth === currentDepth ? current.index : -1);
+		const targetNode = col[targetIndex];
+		if (!targetNode) return;
+		this.#setTickledNode(targetNode, currentDepth);
+		if (this.interactionMode === `standard` || this.interactionMode === `vscode`) {
+			const prevIndex = current?.index ?? 0;
+			if (event.shiftKey) {
+				if (!this.#anchor || this.#anchor.depth !== currentDepth) {
+					const anchorNode = col[prevIndex];
+					if (anchorNode) this.#anchor = {
+						key: anchorNode.item.key,
+						depth: currentDepth,
+						index: prevIndex,
+						selectionSnapshot: this.interactionMode === `vscode` ? new Set(this._selectedKeys) : void 0
+					};
+				}
+				if (this.#anchor) {
+					const from = Math.min(this.#anchor.index, targetIndex);
+					const to = Math.max(this.#anchor.index, targetIndex);
+					const rangeKeys = col.slice(from, to + 1).map((n) => n.item.key);
+					if (this.interactionMode === `vscode`) {
+						const snap = this.#anchor.selectionSnapshot;
+						for (const k of rangeKeys) if (snap.has(k)) this._selectedKeys.delete(k);
+						else this._selectedKeys.add(k);
+					} else this._selectedKeys = new Set(rangeKeys);
+					this.#selectionChanged();
+				}
+			} else if (this.interactionMode === `standard`) this.#anchor = {
+				key: targetNode.item.key,
+				depth: currentDepth,
+				index: targetIndex
+			};
+			else this.#anchor = void 0;
+		}
+		this.requestUpdate();
+		if (scroll) this.#scrollNavigatedItemIntoView(`auto`);
+	}
+	#onKeyDown;
+	#onResizeStart;
+	#resizeRaf;
+	#resizePendingWidth;
+	#onResizeMove;
+	#applyResizeWidth;
+	#onResizeEnd;
+	#getColumnHeader(depth) {
+		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];
+		const thisCol = this._columns[depth];
+		if (prevCol && thisCol) {
+			const parent = prevCol.find((n) => n.children === thisCol);
+			if (parent) return parent.item.label;
+		}
+		return ``;
+	}
+	#explicitWidthStyle(width) {
+		return `width:${width}px;flex-grow:0;flex-shrink:0;flex-basis:auto;max-width:none`;
+	}
+	#columnStyle(depth, isLast) {
+		const w = this.#columnWidths.get(depth);
+		if (w !== void 0) return this.#explicitWidthStyle(w);
+		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));
+	}
+	/**
+	* Override to provide a custom loading indicator.
+	*/
+	renderLoadingIndicator() {
+		return html`<div class="loading-spinner"></div>`;
+	}
+	#renderLoadingColumn() {
+		const depth = this._loadingDepth;
+		const stretched = this.stretchLastColumn && this.#columnWidths.get(depth) === void 0;
+		return html`
+      <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}
+        <div class="column-content loading-content">
+          ${this.renderLoadingIndicator()}
+        </div>
+      </div>
+    `;
+	}
+	render() {
+		return html`
+      <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 ${stretched ? `stretch-last` : ``}" style=${this.#columnStyle(depth, isLast)}>
+            ${this.headers ? html`
+              <div class="column-header"
+                @click=${() => this.#onHeaderClick(depth)}
+                @contextmenu=${(e) => this._handleHeaderRightClick(e, depth)}>
+                ${this.#getColumnHeader(depth)}
+              </div>
+            ` : nothing}
+            <div class="column-content">
+              ${this.renderColumnContent(visibleNodes, depth)}
+            </div>
+            <div class="resize-handle"
+              @pointerdown=${(e) => this.#onResizeStart(e, depth)}>
+            </div>
+          </div>
+        `;
+		})}
+        ${this._loadingDepth !== void 0 ? this.#renderLoadingColumn() : nothing}
+      </div>
+      ${this.search.renderField()}
+    `;
+	}
+	_getFocusedIndex(depth) {
+		const tickled = this.#getTickledNodeAndDepth();
+		if (tickled && tickled.depth === depth) return tickled.index;
+		return 0;
+	}
+	_isFocused(node, depth) {
+		return this.#isFocused(node, depth);
+	}
+	/**
+	* Called by subclasses when pointer enters an item.
+	* Fires tickle event and switches to mouse mode.
+	*/
+	_handleItemPointerEnter(node, depth) {
+		const id = this.#buildTickledId(node, depth);
+		this.tickled.handlePointerEnter(id);
+		if (this.tickled.tickledId === id) this.#keyboardFocus = false;
+		this.dispatchEvent(new CustomEvent(`tickle`, {
+			detail: {
+				node,
+				depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* Called by subclasses when pointer leaves the column container.
+	*/
+	_handleColumnPointerLeave() {
+		this.tickled.handlePointerLeave(new PointerEvent(`pointerleave`));
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			tickledStyles,
+			listSearchStyles,
+			css`
+    :host {
+      --column-bg: var(--surface-3);
+      --column-header-bg: var(--surface-2);
+      --column-header-text: var(--surface-muted-text);
+      --column-separator: var(--surface-5);
+      --column-resize-handle: var(--surface-5);
+      --column-resize-handle-hover: var(--accent);
+      --column-resize-width: 4px;
+      --item-hover-bg: var(--item-bg-tickled);
+      --item-open-bg: color-mix(in oklch, var(--accent, oklch(60% 0.15 140)) 15%, transparent);
+      --item-selected-bg: var(--item-bg-selected);
+      --item-selected-text: var(--item-text-selected);
+
+      display: block;
+      overflow: hidden;
+      position: relative;
+      box-sizing: border-box;
+    }
+
+    #container {
+      display: flex;
+      height: 100%;
+      overflow-x: auto;
+      outline: none;
+    }
+
+    .column {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      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 {
+      background: var(--column-header-bg);
+      color: var(--column-header-text);
+      font-size: var(--text-s, 11px);
+      font-family: var(--font-family, system-ui, sans-serif);
+      font-weight: var(--font-weight-bold, 600);
+      padding: var(--space-xs, 3px) var(--space-m, 8px);
+      border-bottom: 1px solid var(--column-separator);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex-shrink: 0;
+      cursor: pointer;
+      user-select: none;
+      transition: background var(--transition, 0.15s ease-out),
+                  color var(--transition, 0.15s ease-out);
+    }
+
+    .column-header:hover {
+      background: var(--item-hover-bg);
+      color: var(--surface-2-text, #fff);
+    }
+
+    .column-content {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: visible;
+    }
+
+    .resize-handle {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: var(--column-resize-width);
+      height: 100%;
+      background: var(--column-resize-handle);
+      cursor: ew-resize;
+      z-index: 1;
+      transition: background var(--transition, 0.15s ease-out);
+    }
+
+    .resize-handle:hover {
+      background: var(--column-resize-handle-hover);
+    }
+
+    .loading-column {
+      min-width: 60px;
+    }
+
+    .loading-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .loading-spinner {
+      width: 22px;
+      height: 22px;
+      border: 2px solid var(--column-separator);
+      border-top-color: var(--accent, oklch(60% 0.15 140));
+      border-radius: 50%;
+      animation: miller-spin 0.7s linear infinite;
+    }
+
+    @keyframes miller-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    ::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;
+    }
+  `
+		];
+	}
+};
+__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,
+	attribute: `selection-filter`
+})], MillerBaseElement.prototype, "selectionFilter", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `exclusivity`
+})], 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);
+__decorate([property({ attribute: false })], MillerBaseElement.prototype, "restoreLoads", void 0);
+MillerBaseElement = __decorate([safeCustomElement(`ixfx-miller-base`)], MillerBaseElement);
+//#endregion
+//#region src/miller/miller-list.ts
+const HAS_CHECKED = 1;
+const HAS_UNCHECKED = 2;
+/**
+* Walk the loaded subtree under `node`, returning which kinds of leaf were
+* seen (`HAS_CHECKED` | `HAS_UNCHECKED`). Stops as soon as both have been
+* seen, since the result can no longer change.
+*/
+function scanCheckState(node, selectedKeys) {
+	if (node.item.isLeaf || !node.children?.length) return selectedKeys.has(node.item.key) ? HAS_CHECKED : HAS_UNCHECKED;
+	let seen = 0;
+	for (const child of node.children) {
+		seen |= scanCheckState(child, selectedKeys);
+		if (seen === 3) break;
+	}
+	return seen;
+}
+/**
+* Compute the checkbox state for a node based on `selectedKeys`.
+*
+* - Unloaded branch (`children === undefined`): treated as a leaf — we can only
+*   report on what is known.
+* - Leaf or confirmed-empty branch: checked iff its key is in `selectedKeys`.
+* - Loaded branch: checked if ALL descendants are checked; unchecked if NONE are;
+*   indeterminate otherwise.
+*/
+function computeCheckboxState(node, selectedKeys) {
+	const seen = scanCheckState(node, selectedKeys);
+	if (seen === HAS_CHECKED) return `checked`;
+	if (seen === HAS_UNCHECKED) return `unchecked`;
+	return `indeterminate`;
+}
+let MillerListElement = class MillerListElement extends MillerBaseElement {
+	renderColumnContent(nodes, depth) {
+		const hasIcons = nodes.some((node) => !!node.item.icon);
+		const isCheckedMode = this.interactionMode === `checked`;
+		return html`
+      <ul
+        class="item-list ${hasIcons ? `has-icons` : ``} ${isCheckedMode ? `checked-mode` : ``}"
+        role="listbox"
+        aria-label="Column ${depth}"
+        @pointerleave=${() => this._handleColumnPointerLeave()}
+      >
+        ${nodes.map((node) => this.#renderListItem(node, depth))}
+      </ul>
+    `;
+	}
+	#renderListItem(node, depth) {
+		const selected = this._isSelected(node, depth);
+		const tickled = this._isFocused(node, depth);
+		const open = this._isOpen(node, depth);
+		const isBranch = node.item.isLeaf !== true;
+		const icon = node.item.icon;
+		const iconColor = appearanceColor(node.item.iconColor);
+		const textColor = appearanceColor(node.item.textColor);
+		const badge = appearanceAbsent(node.item.badge) ? void 0 : node.item.badge;
+		const tooltip = node.item.tooltip;
+		const isCheckedMode = this.interactionMode === `checked`;
+		let checkboxTpl = nothing;
+		if (isCheckedMode) {
+			const state = computeCheckboxState(node, this._selectedKeys);
+			checkboxTpl = html`
+        <input
+          type="checkbox"
+          class="item-checkbox"
+          .checked=${state === `checked`}
+          .indeterminate=${state === `indeterminate`}
+          aria-label="Select ${node.item.label}"
+          @click=${(e) => this._handleCheckboxClick(e, node, depth)}
+        />
+      `;
+		}
+		return html`
+      <li
+        class="item ${selected ? `selected` : ``} ${open ? `open` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`}"
+        role="option"
+        aria-selected=${selected}
+        @click=${(e) => this._handleItemClick(node, depth, e)}
+        @dblclick=${(e) => this._handleItemDblClick(node, depth, e)}
+        @contextmenu=${(e) => this._handleItemRightClick(node, depth, e)}
+        @pointerenter=${() => this._handleItemPointerEnter(node, depth)}
+      >
+        ${checkboxTpl}
+        ${icon ? html`<ixfx-icon class="item-icon" name="${icon}" style=${iconColor ? `color:${iconColor}` : nothing}></ixfx-icon>` : nothing}
+        <span class="label" style=${textColor ? `color:${textColor}` : nothing}>${node.item.label}</span>
+        ${badge === void 0 ? nothing : html`<span class="item-badge" part="badge">${badge}</span>`}
+        ${tooltip ? html`<ixfx-tooltip class="item-tooltip" anchor="--tooltip-miller-${depth}-${node.item.key}" .value=${tooltip}></ixfx-tooltip>` : nothing}
+        ${isBranch ? html`<span class="caret" aria-hidden="true">›</span>` : nothing}
+      </li>
+    `;
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			...MillerBaseElement.styles,
+			tickledItemStyles,
+			css`
+      .item-list {
+        list-style: none;
+        margin: 0;
+        padding: var(--space-xs, 3px) 0;
+      }
+
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .item.selected {
+        background: var(--item-selected-bg);
+        color: var(--item-selected-text, #fff);
+        outline: 2px dashed var(--surface-3, #333);
+        outline-offset: -2px;
+      }
+
+      /* Item is on the currently open path (ancestor of deepest column) */
+      .item.open:not(.selected) {
+        background: var(--item-open-bg);
+      }
+
+      .item-icon {
+        flex-shrink: 0;
+        width: var(--icon-size, 1em);
+        height: var(--icon-size, 1em);
+        margin-right: var(--icon-spacing, 0.3em);
+      }
+
+      /* Align text on icon-less rows with icon rows in a mixed list */
+      .item-list.has-icons .item:not(:has(.item-icon)) .label {
+        margin-left: calc(var(--icon-size, 1em) + var(--icon-spacing, 0.3em));
+      }
+
+      .label {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      /* Finder-style badge: sits between the label and the caret, flush to
+         the right edge of the row. The label is flex:1, so the gap opens up
+         ahead of the badge automatically. */
+      .item-badge {
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+        margin-inline-start: auto;
+        padding-inline-start: var(--miller-list-badge-gap, 0.5em);
+      }
+
+      .item-tooltip {
+        position: absolute;
+      }
+
+      .caret {
+        flex-shrink: 0;
+        margin-left: var(--space-s, 4px);
+        color: var(--surface-muted-text);
+        font-size: var(--text-l, 13px);
+      }
+
+      .item.selected .caret {
+        color: var(--item-selected-text, #fff);
+      }
+
+      /* ---- checked mode ---- */
+
+      .item-checkbox {
+        flex-shrink: 0;
+        margin-right: var(--space-xs, 3px);
+        cursor: pointer;
+        accent-color: var(--accent);
+        /* Prevent the checkbox click from also triggering item styles */
+        pointer-events: auto;
+      }
+
+      /* In checked mode the item row itself is not highlighted on selection —
+         the checkbox communicates state instead. */
+      .item-list.checked-mode .item.selected {
+        background: transparent;
+        color: var(--surface-3-text, #fff);
+      }
+
+      
+    `
+		];
+	}
+};
+MillerListElement = __decorate([safeCustomElement(`ixfx-miller-list`)], MillerListElement);
+//#endregion
+//#region src/miller/miller-tree-controller.ts
+/**
+* Bridges an `ixfx` `TraversableTree<T>` with an `ixfx-miller-*` component.
+*
+* Usage:
+* ```ts
+* import { Trees } from '@ixfx/collections';
+* import { MillerTreeController } from 'ixfx-components/miller';
+*
+* const root = Trees.Mutable.createNode({ key: 'root', label: 'Root' });
+* Trees.Mutable.addValue({ key: 'a', label: 'Alpha' }, root);
+*
+* const ctrl = new MillerTreeController(
+*   Trees.Mutable.asDynamicTraversable(root),
+*   document.querySelector('ixfx-miller-list'),
+*   { valueToItem: v => ({ key: v.key, label: v.label }) }
+* );
+* ctrl.connect();
+* ```
+*
+* Children are populated lazily: the controller provides a `loadChildren`
+* callback that synchronously reads from the underlying tree.
+*
+* Call `disconnect()` to remove all event listeners and release resources.
+*/
+var MillerTreeController = class {
+	#root;
+	#element;
+	#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;
+		this.#element = element;
+		this.#options = options;
+	}
+	/**
+	* Wire up the controller: sets `element.root` and provides `loadChildren` callback.
+	* Safe to call again after `disconnect()`.
+	*/
+	connect() {
+		this.disconnect();
+		this.#connectSignal = new AbortController();
+		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() {
+		this.#connectSignal?.abort();
+		this.#connectSignal = void 0;
+		this.#element.loadChildren = void 0;
+	}
+	/**
+	* Navigate the component to the first node (depth-first) in the ixfx tree
+	* whose value satisfies `predicate`.
+	*
+	* 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, 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 baseId = mappedBase.getIdentity();
+			const baseIndex = treePath.findIndex((n) => n.getIdentity() === baseId);
+			if (baseIndex < 0) return false;
+			startIndex = baseIndex + 1;
+		}
+		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 item;
+	}
+	/** Convert a TraversableTree node's children to MillerNode[]. */
+	#childrenOf(treeNode) {
+		return Array.from(treeNode.children(), (child) => this.#toMillerNode(child));
+	}
+	#toMillerNode(treeNode) {
+		const childList = [...treeNode.children()];
+		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: {
+				...userItem,
+				isLeaf
+			},
+			children: isLeaf ? [] : void 0
+		};
+		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];
+		if (predicate(node.getValue())) return path;
+		for (const child of node.children()) {
+			const result = this.#findTreePath(child, predicate, path);
+			if (result) return result;
+		}
+	}
+};
+//#endregion
+export { MillerListElement as n, MillerBaseElement as r, MillerTreeController as t };