@ixfx/components 0.2.4 → 0.2.6

package/dist/tree.js

@@ -0,0 +1,1144 @@
+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 { t as TreeDataModel } from "./tree-data-model-DGvRVOFY.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+//#region src/tree/tree-base.ts
+let TreeBaseElement = class TreeBaseElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.exclusivity = `none`;
+		this.selectionFilter = `all`;
+		this.interactionMode = `standard`;
+		this._selectedNodes = /* @__PURE__ */ new Set();
+		this.disableKeyboardNavigation = false;
+		this._expandedKeys = /* @__PURE__ */ new Set();
+		this.tickled = new TickledController(this, {
+			getItems: () => {
+				return this.#getAllNodes().map(({ node }) => ({
+					id: node.item.key,
+					enabled: true
+				}));
+			},
+			onStateChange: () => {
+				this.setAttribute(`data-input-mode`, this.tickled.inputMode);
+			}
+		});
+		this._focusedDepth = 0;
+		this.#config = { indent: 20 };
+		this.#onKeyDown = (event) => {
+			const nodes = this.#getAllNodes();
+			if (nodes.length === 0) return;
+			if ([
+				`ArrowDown`,
+				`ArrowUp`,
+				`ArrowLeft`,
+				`ArrowRight`,
+				`Enter`,
+				` `
+			].includes(event.key)) this.tickled.setInputMode(`keyboard`);
+			const currentIdx = this.#getFocusedIndex();
+			switch (event.key) {
+				case `ArrowDown`: {
+					event.preventDefault();
+					const nextIdx = Math.min(currentIdx + 1, nodes.length - 1);
+					if (this.interactionMode === `implicit`) this.select(nodes[nextIdx].node);
+					this.#setFocusedIndex(nextIdx);
+					if (event.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode`)) this.#extendRangeSelection(nodes, currentIdx, nextIdx);
+					else if (this.interactionMode === `vscode`) this.#anchor = void 0;
+					this.requestUpdate();
+					break;
+				}
+				case `ArrowUp`: {
+					event.preventDefault();
+					const prevIdx = Math.max(currentIdx - 1, 0);
+					if (this.interactionMode === `implicit`) this.select(nodes[prevIdx].node);
+					this.#setFocusedIndex(prevIdx);
+					if (event.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode`)) this.#extendRangeSelection(nodes, currentIdx, prevIdx);
+					else if (this.interactionMode === `vscode`) this.#anchor = void 0;
+					this.requestUpdate();
+					break;
+				}
+				case `ArrowRight`: {
+					event.preventDefault();
+					const current = nodes[currentIdx];
+					if (current && current.node.item.isLeaf !== true) {
+						if (!this._expandedKeys.has(current.node.item.key)) this.#toggleExpand(current.node, current.depth);
+						else if (currentIdx + 1 < nodes.length) this.#setFocusedIndex(currentIdx + 1);
+					}
+					this.requestUpdate();
+					break;
+				}
+				case `ArrowLeft`: {
+					event.preventDefault();
+					const current = nodes[currentIdx];
+					if (current && this._expandedKeys.has(current.node.item.key)) {
+						this._expandedKeys.delete(current.node.item.key);
+						this.dispatchEvent(new CustomEvent(`collapse`, {
+							detail: {
+								node: current.node,
+								depth: current.depth
+							},
+							bubbles: true,
+							composed: true
+						}));
+					} else if (current.depth > 1) {
+						const parentDepth = current.depth - 1;
+						for (let i = currentIdx - 1; i >= 0; i--) if (nodes[i].depth === parentDepth) {
+							this.#setFocusedIndex(i);
+							break;
+						}
+					}
+					this.requestUpdate();
+					break;
+				}
+				case `Enter`: {
+					event.preventDefault();
+					const current = nodes[currentIdx];
+					if (current) {
+						if (this.interactionMode !== `manual` && this.interactionMode !== `checked`) this.select(current.node);
+						this.dispatchEvent(new CustomEvent(`activate`, {
+							detail: {
+								node: current.node,
+								depth: current.depth
+							},
+							bubbles: true,
+							composed: true
+						}));
+						this.requestUpdate();
+					}
+					break;
+				}
+				case ` `: {
+					event.preventDefault();
+					const current = nodes[currentIdx];
+					if (!current) break;
+					if (this.interactionMode === `checked`) this._handleCheckboxClick(new MouseEvent("click"), current.node, current.depth);
+					else if (this.interactionMode === `standard` || this.interactionMode === `vscode` || this.interactionMode === `manual`) this.#toggleSelection(current.node, current.depth);
+					break;
+				}
+				case `Escape`:
+					event.preventDefault();
+					this.#abortPending();
+					break;
+			}
+		};
+		this.#onDblClick = (e) => {
+			const li = e.target.closest(`li`);
+			if (!li) return;
+			const key = li.dataset.key;
+			if (!key) return;
+			const node = this.#getAllNodes().find((n) => n.node.item.key === key);
+			if (!node) return;
+			this.dispatchEvent(new CustomEvent(`activate`, {
+				detail: {
+					node: node.node,
+					depth: node.depth
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	get selectedNodes() {
+		return this._selectedNodes;
+	}
+	#pendingNode;
+	#pendingController;
+	#modelUnsubscribe;
+	#anchor;
+	#config;
+	updated(changedProps) {
+		if (changedProps.has(`root`) && this.root) {
+			this.#abortPending();
+			this._expandedKeys.clear();
+			this.#clearSelectionInternal();
+			this.tickled.clearTickled();
+			this._focusedDepth = 0;
+		}
+		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`) {
+						if (this._expandedKeys.has(event.key)) {
+							this._expandedKeys.delete(event.key);
+							this.requestUpdate();
+						}
+					}
+				});
+			}
+		}
+		if (changedProps.has(`interactionMode`)) {
+			this.#anchor = void 0;
+			this.clearSelection();
+		}
+		if (changedProps.has(`selectedNode`) && this.selectedNode) {
+			if (changedProps.get(`selectedNode`) !== this.selectedNode) this.tickled.setTickled(this.selectedNode.item.key);
+		}
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute(`data-input-mode`, `mouse`);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#modelUnsubscribe?.();
+		this.#modelUnsubscribe = void 0;
+	}
+	getConfig() {
+		return { ...this.#config };
+	}
+	setConfig(config) {
+		this.#config = {
+			...this.#config,
+			...config
+		};
+		this.requestUpdate();
+	}
+	select(node) {
+		if (!this.#canSelect(node)) return;
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes.clear();
+		this._selectedNodes.add(node);
+		this.selectedNode = node;
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	deselect(node) {
+		if (!this._selectedNodes.has(node)) return;
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes.delete(node);
+		if (this.selectedNode === node) this.selectedNode = [...this._selectedNodes].at(-1);
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	clearSelection() {
+		if (this._selectedNodes.size === 0) return;
+		const prev = new Set(this._selectedNodes);
+		this.#clearSelectionInternal();
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	navigateTo(keys) {
+		if (!this.root?.children) return false;
+		this.#abortPending();
+		this.#clearSelectionInternal();
+		this.tickled.clearTickled();
+		this._focusedDepth = 0;
+		let currentNode = this.root;
+		for (const key of keys) {
+			const children = currentNode?.children;
+			if (!children) return false;
+			const found = children.find((n) => n.item.key === key);
+			if (!found) return false;
+			this.#applyExclusivity(found.item.key);
+			this._expandedKeys.add(found.item.key);
+			if (key === keys.at(-1)) {
+				this.select(found);
+				this.tickled.setTickled(found.item.key);
+			}
+			currentNode = found;
+		}
+		this.requestUpdate();
+		this.#scrollKeyIntoView(keys.at(-1));
+		return true;
+	}
+	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;
+	}
+	#canSelect(node) {
+		if (this.selectionFilter === `none`) return false;
+		if (this.selectionFilter === `leaf`) return node.item.isLeaf === true;
+		if (this.selectionFilter === `branch`) return node.item.isLeaf === false || node.children !== void 0 && node.children.length > 0;
+		return true;
+	}
+	#clearSelectionInternal() {
+		this._selectedNodes.clear();
+		this.selectedNode = void 0;
+	}
+	#dispatchSelect(previous) {
+		const detail = {
+			selected: new Set(this._selectedNodes),
+			previous
+		};
+		this.dispatchEvent(new CustomEvent(`select`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#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;
+			}
+		}
+	}
+	renderNodeContent(node, _depth) {
+		const isBranch = node.item.isLeaf !== true;
+		const isExpanded = this._isExpanded(node);
+		return html`
+      <span class="tree-caret">
+        ${isBranch ? html`<ixfx-icon class="caret-icon" name="chevron-down" .rotate=${isExpanded ? nothing : `-90deg`}></ixfx-icon>` : ``}
+      </span>
+      <span class="tree-label">${node.item.label}</span>
+    `;
+	}
+	_handleItemClick(node, depth, event) {
+		if (this.#pendingNode && this._expandedKeys.has(this.#pendingNode.item.key)) this.#abortPending();
+		this.tickled.handlePointerEnter(node.item.key);
+		this._focusedDepth = 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`:
+				this.#handleManualClick(node, depth, event);
+				break;
+			case `checked`:
+				this.#handleExpandOnly(node, depth);
+				break;
+		}
+		this.requestUpdate();
+	}
+	#handleImplicitClick(node, depth) {
+		if (this.#canSelect(node)) {
+			const prev = new Set(this._selectedNodes);
+			this._selectedNodes.clear();
+			this._selectedNodes.add(node);
+			this.selectedNode = node;
+			if (!prev.has(node) || prev.size !== 1) this.#dispatchSelect(prev);
+		}
+		this.#toggleExpand(node, depth);
+	}
+	#handleStandardClick(node, depth, event) {
+		const isMeta = event ? event.metaKey || event.ctrlKey : false;
+		const isShift = event ? event.shiftKey : false;
+		if (isMeta) {
+			if (this.#canSelect(node)) {
+				const prev = new Set(this._selectedNodes);
+				if (this._selectedNodes.has(node)) {
+					this._selectedNodes.delete(node);
+					if (this.selectedNode === node) this.selectedNode = [...this._selectedNodes].at(-1);
+				} else {
+					this._selectedNodes.add(node);
+					this.selectedNode = node;
+					this.#anchor = {
+						node,
+						flatIndex: this.#getFlatIndexOf(node)
+					};
+				}
+				this.#dispatchSelect(prev);
+			}
+			return;
+		}
+		if (isShift && this.#anchor) {
+			const visible = this.#getAllNodes();
+			const anchorIdx = visible.findIndex((n) => n.node === this.#anchor.node);
+			const targetIdx = visible.findIndex((n) => n.node === node);
+			if (anchorIdx >= 0 && targetIdx >= 0) {
+				const prev = new Set(this._selectedNodes);
+				const from = Math.min(anchorIdx, targetIdx);
+				const to = Math.max(anchorIdx, targetIdx);
+				const rangeNodes = visible.slice(from, to + 1).map((n) => n.node).filter((n) => this.#canSelect(n));
+				this._selectedNodes = new Set(rangeNodes);
+				this.selectedNode = node;
+				this.#dispatchSelect(prev);
+			}
+			return;
+		}
+		if (this.#canSelect(node)) {
+			const prev = new Set(this._selectedNodes);
+			this._selectedNodes.clear();
+			this._selectedNodes.add(node);
+			this.selectedNode = node;
+			this.#anchor = {
+				node,
+				flatIndex: this.#getFlatIndexOf(node)
+			};
+			if (!prev.has(node) || prev.size !== 1) this.#dispatchSelect(prev);
+		}
+		this.#toggleExpand(node, depth);
+	}
+	#handleExpandOnly(node, depth) {
+		this.#toggleExpand(node, depth);
+	}
+	#handleManualClick(node, depth, event) {
+		const isMeta = event ? event.metaKey || event.ctrlKey : false;
+		const isShift = event ? event.shiftKey : false;
+		if (isMeta) {
+			if (this.#canSelect(node)) {
+				const prev = new Set(this._selectedNodes);
+				if (this._selectedNodes.has(node)) {
+					this._selectedNodes.delete(node);
+					if (this.selectedNode === node) this.selectedNode = [...this._selectedNodes].at(-1);
+				} else {
+					this._selectedNodes.add(node);
+					this.selectedNode = node;
+					this.#anchor = {
+						node,
+						flatIndex: this.#getFlatIndexOf(node)
+					};
+				}
+				this.#dispatchSelect(prev);
+			}
+			return;
+		}
+		if (isShift && this.#anchor) {
+			const visible = this.#getAllNodes();
+			const anchorIdx = visible.findIndex((n) => n.node === this.#anchor.node);
+			const targetIdx = visible.findIndex((n) => n.node === node);
+			if (anchorIdx >= 0 && targetIdx >= 0) {
+				const prev = new Set(this._selectedNodes);
+				const from = Math.min(anchorIdx, targetIdx);
+				const to = Math.max(anchorIdx, targetIdx);
+				const rangeNodes = visible.slice(from, to + 1).map((n) => n.node).filter((n) => this.#canSelect(n));
+				this._selectedNodes = new Set(rangeNodes);
+				this.selectedNode = node;
+				this.#dispatchSelect(prev);
+			}
+			return;
+		}
+		this.#toggleExpand(node, depth);
+	}
+	#toggleSelection(node, _depth) {
+		if (!this.#canSelect(node)) return;
+		const prev = new Set(this._selectedNodes);
+		if (this._selectedNodes.has(node)) {
+			this._selectedNodes.delete(node);
+			if (this.selectedNode === node) this.selectedNode = [...this._selectedNodes].at(-1);
+		} else {
+			this._selectedNodes.add(node);
+			this.selectedNode = node;
+			this.#anchor = {
+				node,
+				flatIndex: this.#getFlatIndexOf(node)
+			};
+		}
+		this.#dispatchSelect(prev);
+	}
+	_handleCheckboxClick(event, node, _depth) {
+		event.stopPropagation();
+		const prev = new Set(this._selectedNodes);
+		const allSelected = this.#allDescendantsSelected(node);
+		this.#applyCheckedToggle(node, !allSelected);
+		if (this.selectedNode === void 0 || !this._selectedNodes.has(this.selectedNode)) this.selectedNode = [...this._selectedNodes].at(-1);
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
+	#toggleExpand(node, depth) {
+		if (this._expandedKeys.has(node.item.key)) {
+			this._expandedKeys.delete(node.item.key);
+			this.dispatchEvent(new CustomEvent(`collapse`, {
+				detail: {
+					node,
+					depth
+				},
+				bubbles: true,
+				composed: true
+			}));
+		} else if (node.children === void 0) {
+			if (node.item.isLeaf !== false) return;
+			if (this.model ?? (this.loadChildren ? this : void 0)) {
+				this.#pendingNode = node;
+				const controller = new AbortController();
+				this.#pendingController = controller;
+				this.#invokeLoadChildren(node, depth, controller).catch(() => {});
+			}
+		} else {
+			this.#applyExclusivity(node.item.key);
+			this._expandedKeys.add(node.item.key);
+			this.dispatchEvent(new CustomEvent(`expand`, {
+				detail: {
+					node,
+					depth
+				},
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	#allDescendantsSelected(node) {
+		if (!this._selectedNodes.has(node)) return false;
+		if (!node.children?.length) return true;
+		return node.children.every((child) => this.#allDescendantsSelected(child));
+	}
+	#applyCheckedToggle(node, selected) {
+		if (this.#canSelect(node)) if (selected) this._selectedNodes.add(node);
+		else this._selectedNodes.delete(node);
+		if (node.children) for (const child of node.children) this.#applyCheckedToggle(child, selected);
+	}
+	#getFlatIndexOf(node) {
+		return this.#getAllNodes().findIndex((n) => n.node === node);
+	}
+	#extendRangeSelection(nodes, fromIdx, toIdx) {
+		if (!this.#anchor) {
+			const anchorNode = nodes[fromIdx]?.node;
+			if (anchorNode) this.#anchor = {
+				node: anchorNode,
+				flatIndex: fromIdx
+			};
+		}
+		if (!this.#anchor) return;
+		const anchorIdx = nodes.findIndex((n) => n.node === this.#anchor.node);
+		if (anchorIdx < 0) return;
+		const from = Math.min(anchorIdx, toIdx);
+		const to = Math.max(anchorIdx, toIdx);
+		if (this.interactionMode === `vscode`) {
+			if (!this.#anchor.selectionSnapshot) this.#anchor = {
+				...this.#anchor,
+				selectionSnapshot: new Set(this._selectedNodes)
+			};
+			const snap = this.#anchor.selectionSnapshot;
+			const rangeNodes = nodes.slice(from, to + 1).map((n) => n.node).filter((n) => this.#canSelect(n));
+			const next = new Set(snap);
+			for (const n of rangeNodes) if (snap.has(n)) next.delete(n);
+			else next.add(n);
+			const prev = new Set(this._selectedNodes);
+			this._selectedNodes = next;
+			this.selectedNode = nodes[toIdx]?.node ?? this.selectedNode;
+			this.#dispatchSelect(prev);
+		} else {
+			const prev = new Set(this._selectedNodes);
+			const rangeNodes = nodes.slice(from, to + 1).map((n) => n.node).filter((n) => this.#canSelect(n));
+			this._selectedNodes = new Set(rangeNodes);
+			this.selectedNode = nodes[toIdx]?.node ?? this.selectedNode;
+			this.#dispatchSelect(prev);
+		}
+	}
+	async #invokeLoadChildren(node, depth, controller) {
+		try {
+			let children;
+			if (this.model) children = await this.model.getChildren(node, depth, controller.signal);
+			else {
+				const result = this.loadChildren(node, depth, controller.signal);
+				children = result instanceof Promise ? await result : result;
+			}
+			if (controller.signal.aborted) return;
+			node.children = children;
+			this.#applyExclusivity(node.item.key);
+			this._expandedKeys.add(node.item.key);
+			this.#pendingNode = void 0;
+			this.#pendingController = void 0;
+			this.dispatchEvent(new CustomEvent(`expand`, {
+				detail: {
+					node,
+					depth
+				},
+				bubbles: true,
+				composed: true
+			}));
+			this.requestUpdate();
+		} catch (err) {
+			if (controller.signal.aborted) return;
+			node.children = [];
+			this.#pendingNode = void 0;
+			this.#pendingController = void 0;
+			this.requestUpdate();
+		}
+	}
+	_isSelected(node) {
+		return this._selectedNodes.has(node);
+	}
+	_isFocused(node) {
+		return this.tickled.isTickled(node.item.key);
+	}
+	_isExpanded(node) {
+		if (this._expandedKeys.has(node.item.key)) return true;
+		if (this.filterPredicate && node.children) return node.children.some((child) => this.#matchesFilter(child, 0));
+		return false;
+	}
+	#matchesFilter(node, depth) {
+		if (!this.filterPredicate) return true;
+		if (this.filterPredicate(node, depth)) return true;
+		return node.children?.some((child) => this.#matchesFilter(child, depth + 1)) ?? false;
+	}
+	get _pendingNode() {
+		return this.#pendingNode;
+	}
+	#scrollKeyIntoView(key) {
+		requestAnimationFrame(() => {
+			const el = this.shadowRoot?.querySelector(`[data-key="${CSS.escape(key)}"]`);
+			if (!el) return;
+			const elRect = el.getBoundingClientRect();
+			const hostRect = this.getBoundingClientRect();
+			const relativeTop = elRect.top - hostRect.top;
+			const relativeBottom = relativeTop + elRect.height;
+			if (relativeTop < 0) this.scrollTop += relativeTop;
+			else if (relativeBottom > this.clientHeight) this.scrollTop += relativeBottom - this.clientHeight;
+		});
+	}
+	#abortPending() {
+		if (this.#pendingController) {
+			this.#pendingController.abort();
+			this.#pendingController = void 0;
+			this.#pendingNode = void 0;
+		}
+	}
+	/** Apply exclusivity rules when a node is about to be expanded. */
+	#applyExclusivity(expandKey) {
+		if (this.exclusivity === `none`) return;
+		if (this.exclusivity === `depth`) this.#collapseSiblingsAtDepth(expandKey);
+		else if (this.exclusivity === `global`) {
+			const ancestorKeys = this.#findAncestorKeys(expandKey);
+			for (const key of [...this._expandedKeys]) if (!ancestorKeys.has(key) && key !== expandKey) this._expandedKeys.delete(key);
+		}
+	}
+	#collapseSiblingsAtDepth(expandKey) {
+		if (!this.root) return;
+		const parent = this.#findParent(this.root, expandKey);
+		if (!parent?.children) return;
+		for (const child of parent.children) if (child.item.key !== expandKey && this._expandedKeys.has(child.item.key)) this._expandedKeys.delete(child.item.key);
+	}
+	#findAncestorKeys(targetKey) {
+		const keys = /* @__PURE__ */ new Set();
+		const walk = (node) => {
+			if (node.item.key === targetKey) return true;
+			if (!node.children) return false;
+			for (const child of node.children) if (walk(child)) {
+				keys.add(node.item.key);
+				return true;
+			}
+			return false;
+		};
+		if (this.root) walk(this.root);
+		return keys;
+	}
+	#findParent(node, targetKey, parent = void 0) {
+		if (!node.children) return void 0;
+		for (const child of node.children) {
+			if (child.item.key === targetKey) return parent ?? node;
+			const found = this.#findParent(child, targetKey, child);
+			if (found) return found;
+		}
+	}
+	#getVisibleNodes(node, depth) {
+		const result = [];
+		const visit = (n, d) => {
+			result.push({
+				node: n,
+				depth: d
+			});
+			if (this._expandedKeys.has(n.item.key) && n.children) for (const child of n.children) visit(child, d + 1);
+		};
+		if (node.children) for (const child of node.children) visit(child, depth + 1);
+		return result;
+	}
+	#getAllNodes() {
+		if (!this.root) return [];
+		return this.#getVisibleNodes(this.root, 0);
+	}
+	#getFocusedIndex() {
+		const nodes = this.#getAllNodes();
+		const tickledKey = this.tickled.tickledId;
+		if (!tickledKey) return 0;
+		return nodes.findIndex((n) => n.node.item.key === tickledKey);
+	}
+	#setFocusedIndex(index) {
+		const nodes = this.#getAllNodes();
+		if (index < 0 || index >= nodes.length) return;
+		const { node, depth } = nodes[index];
+		this.tickled.setTickled(node.item.key);
+		this._focusedDepth = depth;
+		this.dispatchEvent(new CustomEvent(`tickle`, {
+			detail: {
+				node,
+				depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this.requestUpdate();
+		this.updateComplete.then(() => this.#scrollTickledIntoView());
+	}
+	#scrollTickledIntoView() {
+		const tickledKey = this.tickled.tickledId;
+		if (tickledKey === void 0) return;
+		(this.shadowRoot?.querySelector(`[data-key="${tickledKey}"]`))?.scrollIntoView({
+			block: `nearest`,
+			behavior: `smooth`
+		});
+	}
+	#onKeyDown;
+	renderLoadingIndicator() {
+		return html`<span class="loading-spinner"></span>`;
+	}
+	render() {
+		const nodes = this.#getAllNodes();
+		return html`
+      <div
+        id="container"
+        data-input-mode=${this.tickled.inputMode}
+        @keydown=${this.#onKeyDown}
+        @dblclick=${this.#onDblClick}
+        @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}
+        tabindex="0"
+      >
+        ${this.root ? this.#renderNodes(nodes) : nothing}
+      </div>
+    `;
+	}
+	#onDblClick;
+	#renderNodes(nodes) {
+		if (nodes.length === 0 && this.#pendingNode) return html`
+        <div class="tree-loading">
+          ${this.renderLoadingIndicator()}
+        </div>
+      `;
+		return html`
+      <ul class="tree-list" role="tree">
+        ${nodes.map(({ node, depth }) => this._renderNode(node, depth))}
+      </ul>
+    `;
+	}
+	_renderNode(node, depth) {
+		const selected = this._isSelected(node);
+		const tickled = this._isFocused(node);
+		const isBranch = node.item.isLeaf !== true;
+		const isExpanded = this._isExpanded(node);
+		const isPending = this.#pendingNode === node;
+		const isFiltered = this.filterPredicate !== void 0 && !this.#matchesFilter(node, depth);
+		return html`
+      <li
+        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${isFiltered ? `filtered` : ``}"
+        role="treeitem"
+        aria-selected=${selected}
+        aria-expanded=${isBranch ? isExpanded : nothing}
+        aria-level=${depth + 1}
+        data-key=${node.item.key}
+        style=${`--depth: ${depth}`}
+        @click=${(e) => this._handleItemClick(node, depth, e)}
+        @pointerenter=${() => {
+			this.tickled.handlePointerEnter(node.item.key);
+			this.dispatchEvent(new CustomEvent(`tickle`, {
+				detail: {
+					node,
+					depth
+				},
+				bubbles: true,
+				composed: true
+			}));
+		}}
+      >
+        ${this.renderNodeContent(node, depth)}
+        ${isPending ? this.renderLoadingIndicator() : nothing}
+      </li>
+    `;
+	}
+	static {
+		this.styles = [
+			tickledStyles,
+			tickledItemStyles,
+			css`
+      :host {
+      --tree-bg: var(--surface-3);
+      --tree-text: var(--surface-3-text);
+      --tree-muted-text: var(--surface-muted-text);
+      --tree-indent: 1ch;
+      --tree-item-height: 28px;
+      --tree-caret-size: 10px;
+      --tree-radius: var(--radius-s);
+
+      display: block;
+      overflow: auto;
+      box-sizing: border-box;
+      background: var(--tree-bg);
+      color: var(--tree-text);
+    }
+
+    #container {
+      outline: none;
+      min-height: 100%;
+    }
+
+    .tree-list {
+      list-style: none;
+      margin: 0;
+      padding: var(--space-xs);
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      height: var(--tree-item-height);
+      padding-left: calc(var(--tree-indent) * var(--depth, 0));
+      cursor: pointer;
+      user-select: none;
+      font-family: var(--font-family);
+      font-size: var(--text-m);
+      border-radius: var(--tree-radius);
+      transition: background var(--transition, 0.15s ease-out);
+      margin: 1px 0;
+    }
+
+    .tree-caret {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--tree-caret-size);
+      height: var(--tree-caret-size);
+      flex-shrink: 0;
+      margin-right: var(--space-xs);
+    }
+
+    .caret-icon {
+      width: var(--tree-caret-size);
+      height: var(--tree-caret-size);
+      color: var(--tree-muted-text);
+      transition: transform var(--transition, 0.15s ease-out);
+    }
+
+    .item.selected .caret-icon {
+      color: var(--accent-text);
+    }
+
+    .tree-label {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .tree-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--space-m);
+    }
+
+    .loading-spinner {
+      width: 16px;
+      height: 16px;
+      border: 2px solid var(--surface-5);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: tree-spin 0.7s linear infinite;
+    }
+
+    @keyframes tree-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    .item.filtered {
+      display: none;
+    }
+
+    ::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 })], TreeBaseElement.prototype, "root", void 0);
+__decorate([property({ attribute: false })], TreeBaseElement.prototype, "model", void 0);
+__decorate([property({ attribute: false })], TreeBaseElement.prototype, "loadChildren", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `exclusivity`
+})], TreeBaseElement.prototype, "exclusivity", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `selection-filter`
+})], TreeBaseElement.prototype, "selectionFilter", void 0);
+__decorate([property({
+	type: String,
+	attribute: `interaction-mode`
+})], TreeBaseElement.prototype, "interactionMode", void 0);
+__decorate([property({ attribute: false })], TreeBaseElement.prototype, "selectedNode", void 0);
+__decorate([state()], TreeBaseElement.prototype, "_selectedNodes", void 0);
+__decorate([property({ attribute: false })], TreeBaseElement.prototype, "filterPredicate", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disable-keyboard-navigation`
+})], TreeBaseElement.prototype, "disableKeyboardNavigation", void 0);
+__decorate([state()], TreeBaseElement.prototype, "_expandedKeys", void 0);
+__decorate([state()], TreeBaseElement.prototype, "_focusedDepth", void 0);
+TreeBaseElement = __decorate([safeCustomElement(`ixfx-tree-base`)], TreeBaseElement);
+//#endregion
+//#region src/tree/tree-controller.ts
+var TreeController = class {
+	#root;
+	#element;
+	#options;
+	#nodeToTree = /* @__PURE__ */ new WeakMap();
+	#identityToTreeNode = /* @__PURE__ */ new Map();
+	#connectSignal;
+	constructor(root, element, options) {
+		this.#root = root;
+		this.#element = element;
+		this.#options = options;
+	}
+	connect() {
+		this.disconnect();
+		this.#connectSignal = new AbortController();
+		const { signal } = this.#connectSignal;
+		const rootValue = this.#root.getValue();
+		const rootItem = this.#options.valueToItem(rootValue, this.#root);
+		const rootChildren = this.#childrenOf(this.#root);
+		this.#element.root = {
+			item: rootItem,
+			children: rootChildren
+		};
+		this.#element.addEventListener(`expand`, (e) => {
+			const { node } = e.detail;
+			const treeNode = this.#nodeToTree.get(node);
+			if (!treeNode) return;
+			node.children = this.#childrenOf(treeNode);
+			this.#element.requestUpdate();
+		}, { signal });
+		this.#element.addEventListener(`collapse`, (_e) => {}, { signal });
+	}
+	disconnect() {
+		this.#connectSignal?.abort();
+		this.#connectSignal = void 0;
+	}
+	navigateToValue(predicate) {
+		const treePath = this.#findTreePath(this.#root, predicate);
+		if (!treePath) return false;
+		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 currentChildren = i === 1 ? this.#element.root?.children ?? [] : this.#findInChildren(this.#element.root?.children ?? [], keys);
+				const treeNodeMap = this.#nodeToTree;
+				const node = currentChildren.find((n) => n.item.key === key);
+				if (!node) return false;
+				if (node.children === void 0) {
+					const mapped = treeNodeMap.get(node);
+					if (mapped) node.children = this.#childrenOf(mapped);
+				}
+			}
+		}
+		return this.#element.navigateTo(keys);
+	}
+	#findInChildren(children, keys) {
+		if (keys.length === 0) return children;
+		const key = keys[0];
+		return children.find((n) => n.item.key === key)?.children ?? [];
+	}
+	#childrenOf(treeNode) {
+		return Array.from(treeNode.children(), (child) => this.#toTreeNode(child));
+	}
+	#toTreeNode(treeNode) {
+		const value = treeNode.getValue();
+		const childList = [...treeNode.children()];
+		const userItem = this.#options.valueToItem(value, treeNode);
+		const isLeaf = userItem.isLeaf ?? childList.length === 0;
+		const treeNodeMap = { item: {
+			...userItem,
+			isLeaf
+		} };
+		this.#nodeToTree.set(treeNodeMap, treeNode);
+		this.#identityToTreeNode.set(treeNode.getIdentity(), treeNode);
+		return treeNodeMap;
+	}
+	#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
+//#region src/tree/tree-list.ts
+function computeCheckboxState(node, selectedNodes) {
+	if (node.item.isLeaf || !node.children?.length) return selectedNodes.has(node) ? `checked` : `unchecked`;
+	const childStates = node.children.map((c) => computeCheckboxState(c, selectedNodes));
+	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 TreeListElement = class TreeListElement extends TreeBaseElement {
+	#depthsWithIcons = /* @__PURE__ */ new Set();
+	render() {
+		this.#detectIcons();
+		return super.render();
+	}
+	#detectIcons() {
+		this.#depthsWithIcons.clear();
+		const visit = (node, depth) => {
+			if (node.item.icon) this.#depthsWithIcons.add(depth);
+			if (node.children) for (const child of node.children) visit(child, depth + 1);
+		};
+		if (this.root) visit(this.root, 0);
+	}
+	renderNodeContent(node, depth) {
+		const isBranch = node.item.isLeaf !== true;
+		const isExpanded = this._isExpanded(node);
+		const icon = node.item.icon;
+		const tooltip = node.item.tooltip;
+		const caretAndLabel = html`
+      <span class="tree-caret">
+        ${isBranch ? html`<ixfx-icon class="caret-icon" name="chevron-down" .rotate=${isExpanded ? nothing : `-90deg`}></ixfx-icon>` : ``}
+      </span>
+      ${icon ? html`<ixfx-icon class="tree-icon" name="${icon}"></ixfx-icon>` : nothing}
+      <span class="tree-label">
+        ${node.item.label}
+        ${tooltip ? html`<ixfx-tooltip class="tree-tooltip" anchor="--tooltip-tree-${node.item.key}" .value=${tooltip}></ixfx-tooltip>` : nothing}
+      </span>
+    `;
+		if (this.interactionMode === `checked`) {
+			const state = computeCheckboxState(node, this._selectedNodes);
+			return html`
+        <input
+          type="checkbox"
+          class="tree-checkbox"
+          .checked=${state === `checked`}
+          .indeterminate=${state === `indeterminate`}
+          aria-label="Select ${node.item.label}"
+          @click=${(e) => this._handleCheckboxClick(e, node, depth)}
+        />${caretAndLabel}`;
+		}
+		return caretAndLabel;
+	}
+	_renderNode(node, depth) {
+		const selected = this._isSelected(node);
+		const tickled = this._isFocused(node);
+		const isBranch = node.item.isLeaf !== true;
+		const isExpanded = this._isExpanded(node);
+		const isPending = this._pendingNode === node;
+		const hasIconAtDepth = this.#depthsWithIcons.has(depth);
+		return html`
+      <li
+        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${hasIconAtDepth ? `has-icon-at-depth` : ``}"
+        data-key=${node.item.key}
+        role="treeitem"
+        aria-selected=${selected}
+        aria-expanded=${isBranch ? isExpanded : nothing}
+        aria-level=${depth + 1}
+        style=${`--depth: ${depth}`}
+        @click=${(e) => this._handleItemClick(node, depth, e)}
+        @pointerenter=${() => this.tickled.handlePointerEnter(node.item.key)}
+      >
+        ${this.renderNodeContent(node, depth)}
+        ${isPending ? this.renderLoadingIndicator() : nothing}
+      </li>
+    `;
+	}
+	static {
+		this.styles = [...TreeBaseElement.styles, css`
+      .tree-caret {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--tree-caret-size);
+        height: var(--tree-caret-size);
+        flex-shrink: 0;
+        margin-right: var(--space-xs);
+      }
+
+      .caret-icon {
+        width: var(--tree-caret-size);
+        height: var(--tree-caret-size);
+        color: var(--tree-muted-text);
+        transition: transform var(--transition, 0.15s ease-out);
+      }
+
+      .item.selected .caret-icon {
+        color: var(--accent-text);
+      }
+
+      .tree-icon {
+        flex-shrink: 0;
+        width: var(--icon-size, 1em);
+        height: var(--icon-size, 1em);
+        margin-right: var(--icon-spacing, 0.3em);
+      }
+
+      .item:not(.has-icon-at-depth) .tree-icon {
+        display: none;
+      }
+
+      .item.has-icon-at-depth .tree-label {
+        margin-left: var(--icon-size, 1em);
+      }
+
+      .tree-tooltip {
+        position: absolute;
+        anchor-name: --tooltip-tree;
+      }
+
+      .tree-checkbox {
+        flex-shrink: 0;
+        margin-right: var(--space-xs, 3px);
+        cursor: pointer;
+        accent-color: var(--accent);
+        pointer-events: auto;
+      }
+
+      /* In checked mode the checkbox communicates selection state —
+         suppress the row highlight so it doesn't double-signal */
+      :host([interaction-mode="checked"]) .item.selected {
+        background: transparent;
+        color: inherit;
+        outline: none;
+      }
+
+      
+
+      .tree-label {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        position: relative;
+      }
+    `];
+	}
+};
+TreeListElement = __decorate([safeCustomElement(`ixfx-tree-list`)], TreeListElement);
+//#endregion
+export { TreeBaseElement, TreeController, TreeDataModel, TreeListElement };
+
+//# sourceMappingURL=tree.js.map