@ixfx/components 0.2.6 → 0.3.1

package/dist/tree.js

@@ -1,1144 +1,2 @@
-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
+import { i as TreeDataModel, n as TreeController, r as TreeBaseElement, t as TreeListElement } from "./tree-CvvKbO-f.js";
 export { TreeBaseElement, TreeController, TreeDataModel, TreeListElement };
-
-//# sourceMappingURL=tree.js.map