@ixfx/components 0.15.4 → 0.16.0

package/dist/miller.js

@@ -1,1816 +1,2 @@
-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 "./interaction-E-uMGHkJ.js";
-import { t as collectDataResult } from "./data-provider-35TyWclX.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-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.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.#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._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
-							};
-						}
-					} 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._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.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;
-	#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));
-	}
-	updated(changedProps) {
-		if (changedProps.has(`searchModes`)) this.#syncSearchCommands();
-		if (changedProps.has(`root`) && this.root) {
-			this.#abortPending();
-			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;
-			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;
-		}
-		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`
-			});
-		}
-	}
-	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 = {};
-		for (const [depth, width] of this.#columnWidths) columnWidths[depth] = width;
-		return { columnWidths };
-	}
-	setConfig(config) {
-		this.#columnWidths.clear();
-		for (const [depth, width] of Object.entries(config.columnWidths)) this.#columnWidths.set(Number(depth), width);
-		this.requestUpdate();
-	}
-	/** 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.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.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() {
-		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.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 present = /* @__PURE__ */ new Set();
-		for (const col of this._columns) for (const n of col) present.add(n);
-		for (let depth = 0; depth < this._columns.length; depth++) {
-			const selected = this._selectedByDepth.get(depth);
-			if (selected && !this._columns[depth].includes(selected)) {
-				this._columns = this._columns.slice(0, depth + 1);
-				for (const d of [...this._selectedByDepth.keys()]) if (d >= depth) this._selectedByDepth.delete(d);
-				break;
-			}
-		}
-		for (const n of [...this._selectedNodes]) if (!present.has(n)) this._selectedNodes.delete(n);
-		this.requestUpdate();
-	}
-	#selectOrigin;
-	#selectSilent;
-	#navigateTo(rootColumn, keys, reveal) {
-		this.#abortPending();
-		this._selectedByDepth.clear();
-		this.tickled.clearTickled();
-		const newColumns = [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.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;
-		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);
-	}
-	/**
-	* 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;
-	}
-	_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) {
-		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.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.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.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) {
-		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;
-		};
-		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 = 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.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);
-				}
-			} 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) {
-		this.tickled.handlePointerEnter(this.#buildTickledId(node, depth));
-		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);
-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
+import { n as MillerListElement, r as MillerBaseElement, t as MillerTreeController } from "./miller-BFRfn0ve.js";
 export { MillerBaseElement, MillerListElement, MillerTreeController };