@ixfx/components 0.2.4 → 0.2.6

package/dist/miller.js

@@ -0,0 +1,1343 @@
+import { n as tickledStyles, r as TickledController, t as tickledItemStyles } from "./tickled-styles-Bg3QbcrD.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
+import "./interaction-CQDQJf2Q.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+//#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.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.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.#onKeyDown = (event) => {
+			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();
+					const current = this.#getTickledNodeAndDepth();
+					let targetIndex = 0;
+					if (current && current.depth === currentDepth) targetIndex = Math.min(current.index + 1, col.length - 1);
+					const targetNode = col[targetIndex];
+					if (!targetNode) break;
+					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();
+					break;
+				}
+				case `ArrowUp`: {
+					event.preventDefault();
+					const current = this.#getTickledNodeAndDepth();
+					let targetIndex = 0;
+					if (current && current.depth === currentDepth) targetIndex = Math.max(current.index - 1, 0);
+					const targetNode = col[targetIndex];
+					if (!targetNode) break;
+					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();
+					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();
+					}
+					break;
+			}
+		};
+		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.#onResizeMove = (event) => {
+			if (this.#resizingDepth < 0) return;
+			const delta = event.clientX - this.#resizeStartX;
+			const newWidth = Math.max(32, this.#resizeStartWidth + delta);
+			this.#columnWidths.set(this.#resizingDepth, newWidth);
+			this.requestUpdate();
+		};
+		this.#onResizeEnd = () => {
+			this.#resizingDepth = -1;
+			window.removeEventListener(`pointermove`, this.#onResizeMove);
+			window.removeEventListener(`pointerup`, this.#onResizeEnd);
+		};
+	}
+	#lastSelectedNode;
+	#anchor;
+	#columnWidths;
+	#pendingNode;
+	#pendingController;
+	#expandTimer;
+	#resizingDepth;
+	#resizeStartX;
+	#resizeStartWidth;
+	#modelUnsubscribe;
+	#buildTickledId(node, depth) {
+		return `${depth}:${node.item.key}`;
+	}
+	#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(`root`) && this.root) {
+			this.#abortPending();
+			this._columns = this.root.children ? [this.root.children] : [];
+			this._selectedByDepth.clear();
+			this._selectedKeys = /* @__PURE__ */ new Set();
+			this._selectedNodes.clear();
+			this.#lastSelectedNode = void 0;
+			this.#anchor = void 0;
+			this.tickled.clearTickled();
+		}
+		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`
+			});
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#modelUnsubscribe?.();
+		this.#modelUnsubscribe = 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 = 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();
+	}
+	/**
+	* 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.
+	*/
+	navigateTo(keys) {
+		if (!this.root?.children) return false;
+		this.#abortPending();
+		this._selectedByDepth.clear();
+		this.tickled.clearTickled();
+		const newColumns = [this.root.children];
+		let currentColumn = this.root.children;
+		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 = new Set([leafKey]);
+		}
+		this.requestUpdate();
+		this.#scrollNavigatedItemIntoView();
+		return success;
+	}
+	/**
+	* Programmatically navigate to the first node (breadth-first) matching a predicate.
+	*/
+	navigateToNode(predicate) {
+		if (!this.root?.children) return false;
+		const keyPath = this.#findNodePath(this.root.children, predicate);
+		if (!keyPath) return false;
+		return this.navigateTo(keyPath);
+	}
+	getNodes() {
+		if (!this.root?.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 this.root.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;
+			}
+		}
+	}
+	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) {
+		const detail = {
+			selected: new Set(this._selectedNodes),
+			previous
+		};
+		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.root) path.push(this.root);
+		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);
+				break;
+		}
+	}
+	#handleImplicitClick(node, depth) {
+		const previous = new Set(this._selectedNodes);
+		this._selectedByDepth.set(depth, node);
+		this.#lastSelectedNode = node;
+		this._selectedKeys = new Set([node.item.key]);
+		this._selectedNodes.clear();
+		this._selectedNodes.add(node);
+		this.#expandNode(node, depth);
+		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 = new Set([node.item.key]);
+		this._selectedNodes = 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);
+		if (!previous.has(node) || previous.size !== 1) this.#dispatchSelectEvent(previous);
+	}
+	#expandNode(node, depth) {
+		if (node.item.isLeaf) {
+			this._columns = this._columns.slice(0, depth + 1);
+			this.requestUpdate();
+			return;
+		}
+		if (node.children === void 0) {
+			this._columns = this._columns.slice(0, depth + 1);
+			this._loadingDepth = depth + 1;
+			this.#pendingNode = node;
+			const controller = new AbortController();
+			this.#pendingController = controller;
+			this.dispatchEvent(new CustomEvent(`expand`, {
+				detail: {
+					node,
+					depth
+				},
+				bubbles: true,
+				composed: true
+			}));
+			const applyChildren = (children) => {
+				if (controller.signal.aborted) return;
+				node.children = children;
+				this.#pendingNode = void 0;
+				this.#pendingController = void 0;
+				this._loadingDepth = void 0;
+				const cols = this._columns.slice(0, depth + 1);
+				if (children.length > 0) cols.push(children);
+				this._columns = cols;
+			};
+			const handleError = (err) => {
+				if (err.name !== `AbortError`) console.error(err);
+				node.children = [];
+				this.#pendingNode = void 0;
+				this.#pendingController = void 0;
+				this._loadingDepth = void 0;
+				this.requestUpdate();
+			};
+			const loadFn = this.model ? (n, d, s) => this.model.getChildren(n, d, s) : this.loadChildren;
+			if (loadFn) {
+				if (this.#expandTimer !== void 0) clearTimeout(this.#expandTimer);
+				this.#expandTimer = setTimeout(() => {
+					this.#expandTimer = void 0;
+					if (this.#pendingNode !== node) return;
+					const result = loadFn(node, depth, controller.signal);
+					if (result instanceof Promise) result.then(applyChildren).catch(handleError);
+					else applyChildren(result);
+				}, EXPAND_DEBOUNCE_MS);
+			} else {
+				this._loadingDepth = void 0;
+				this.#pendingNode = void 0;
+				this.#pendingController = void 0;
+				const newColumns = this._columns.slice(0, depth + 1);
+				newColumns.push([]);
+				this._columns = newColumns;
+			}
+		} else {
+			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
+			}));
+		}
+	}
+	#onCheckboxClick(node) {
+		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();
+	}
+	#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() {
+		requestAnimationFrame(() => {
+			const tickled = this.#getTickledNodeAndDepth();
+			if (!tickled) return;
+			const container = this.shadowRoot?.querySelectorAll(`.column`)[tickled.depth]?.querySelector(`.column-content`);
+			if (!container) return;
+			container.querySelectorAll(`.item`)[tickled.index]?.scrollIntoView({
+				block: `nearest`,
+				behavior: `smooth`
+			});
+		});
+	}
+	#setTickledNode(node, depth) {
+		this.tickled.setTickled(this.#buildTickledId(node, depth));
+		this.dispatchEvent(new CustomEvent(`tickle`, {
+			detail: {
+				node,
+				depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#onKeyDown;
+	#onResizeStart;
+	#onResizeMove;
+	#onResizeEnd;
+	#getColumnHeader(depth) {
+		if (depth === 0) return this.root?.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 ``;
+	}
+	#columnStyle(depth) {
+		const w = this.#columnWidths.get(depth);
+		return w !== void 0 ? `width:${w}px;flex-shrink:0` : `width:max-content`;
+	}
+	#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;
+		return html`
+      <div class="column loading-column" style=${this.#columnStyle(depth)}>
+        ${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;
+			return html`
+          <div class="column" style=${this.#columnStyle(depth)}>
+            ${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>
+    `;
+	}
+	_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 = [tickledStyles, 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;
+    }
+
+    .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: 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([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
+/**
+* Recursively 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) {
+	if (node.item.isLeaf || !node.children?.length) return selectedKeys.has(node.item.key) ? `checked` : `unchecked`;
+	const childStates = node.children.map((c) => computeCheckboxState(c, selectedKeys));
+	const allChecked = childStates.every((s) => s === `checked`);
+	const allUnchecked = childStates.every((s) => s === `unchecked`);
+	if (allChecked) return `checked`;
+	if (allUnchecked) 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 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}"></ixfx-icon>` : nothing}
+        <span class="label">${node.item.label}</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 = [
+			...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;
+      }
+
+      .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();
+	#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();
+		const rootValue = this.#root.getValue();
+		const rootItem = this.#options.valueToItem(rootValue, this.#root);
+		const rootChildren = this.#childrenOf(this.#root);
+		this.#element.root = {
+			item: rootItem,
+			children: rootChildren
+		};
+		this.#element.loadChildren = (node, _depth, _signal) => {
+			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()`.
+	*
+	* Returns `false` if no matching node is found.
+	*/
+	navigateToValue(predicate) {
+		const treePath = this.#findTreePath(this.#root, predicate);
+		if (!treePath) return false;
+		let currentColumn = this.#element.root?.children ?? [];
+		const keys = [];
+		for (let i = 1; i < treePath.length; i++) {
+			const treeNode = treePath[i];
+			const key = this.#options.valueToItem(treeNode.getValue(), treeNode).key;
+			keys.push(key);
+			if (i < treePath.length - 1) {
+				const millerNode = currentColumn.find((n) => n.item.key === key);
+				if (!millerNode) return false;
+				if (millerNode.children === void 0) {
+					const mapped = this.#nodeToTree.get(millerNode);
+					if (mapped) millerNode.children = this.#childrenOf(mapped);
+				}
+				currentColumn = millerNode.children ?? [];
+			}
+		}
+		return this.#element.navigateTo(keys);
+	}
+	/** Convert a TraversableTree node's children to MillerNode[]. */
+	#childrenOf(treeNode) {
+		return Array.from(treeNode.children(), (child) => this.#toMillerNode(child));
+	}
+	#toMillerNode(treeNode) {
+		const value = treeNode.getValue();
+		const childList = [...treeNode.children()];
+		const userItem = this.#options.valueToItem(value, treeNode);
+		const isLeaf = userItem.isLeaf ?? childList.length === 0;
+		const millerNode = {
+			item: {
+				...userItem,
+				isLeaf
+			},
+			children: isLeaf ? [] : void 0
+		};
+		this.#nodeToTree.set(millerNode, treeNode);
+		this.#identityToMillerNode.set(treeNode.getIdentity(), millerNode);
+		return millerNode;
+	}
+	/** 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 { MillerBaseElement, MillerListElement, MillerTreeController };
+
+//# sourceMappingURL=miller.js.map