@ixfx/components 0.2.3 → 0.2.4

package/dist/tree/tree-base.js

@@ -0,0 +1,1028 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { tickledStyles, tickledItemStyles } from '../interaction/index.js';
+import { TickledController } from '../interaction/tickled-controller.js';
+let TreeBaseElement = class TreeBaseElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.exclusivity = `none`;
+        this.selectionFilter = `all`;
+        /** Controls how pointer/keyboard gestures map to selection changes. Default: `'standard'`. */
+        this.interactionMode = `standard`;
+        this._selectedNodes = new Set();
+        this.disableKeyboardNavigation = false;
+        this._expandedKeys = new Set();
+        this.tickled = new TickledController(this, {
+            getItems: () => {
+                const nodes = this.#getAllNodes();
+                return nodes.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;
+            // Switch to keyboard mode for any navigation key
+            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 = undefined; // clear snapshot on plain navigation
+                    }
+                    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 = undefined; // clear snapshot on plain navigation
+                    }
+                    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 target = e.target;
+            const li = target.closest(`li`);
+            if (!li)
+                return;
+            const key = li.dataset.key;
+            if (!key)
+                return;
+            const nodes = this.#getAllNodes();
+            const node = nodes.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;
+    // Range-select anchor: the flat-list index and node from which a Shift-range is measured.
+    #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 = undefined;
+            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 the invalidated node is currently expanded, collapse it
+                        if (this._expandedKeys.has(event.key)) {
+                            this._expandedKeys.delete(event.key);
+                            this.requestUpdate();
+                        }
+                    }
+                });
+            }
+        }
+        if (changedProps.has(`interactionMode`)) {
+            this.#anchor = undefined;
+            this.clearSelection();
+        }
+        // When selectedNode is set externally, sync focus to match
+        if (changedProps.has(`selectedNode`) && this.selectedNode) {
+            const prev = changedProps.get(`selectedNode`);
+            if (prev !== 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 = undefined;
+    }
+    getConfig() {
+        return { ...this.#config };
+    }
+    setConfig(config) {
+        this.#config = { ...this.#config, ...config };
+        this.requestUpdate();
+    }
+    // --- Programmatic selection ---
+    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();
+    }
+    // --- Navigation ---
+    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;
+    }
+    // --- Internal helpers ---
+    #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 !== undefined && node.children.length > 0);
+        return true;
+    }
+    #clearSelectionInternal() {
+        this._selectedNodes.clear();
+        this.selectedNode = undefined;
+    }
+    #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;
+            }
+        }
+        return undefined;
+    }
+    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; // no expand on Ctrl+click
+        }
+        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; // no expand on Shift+click
+        }
+        // Plain click: select + toggle expand
+        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; // no expand on Meta+click
+        }
+        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; // no expand on Shift+click
+        }
+        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 === undefined || !this._selectedNodes.has(this.selectedNode)) {
+            this.selectedNode = [...this._selectedNodes].at(-1);
+        }
+        this.#dispatchSelect(prev);
+        this.requestUpdate();
+    }
+    #toggleExpand(node, depth) {
+        const isExpanded = this._expandedKeys.has(node.item.key);
+        if (isExpanded) {
+            this._expandedKeys.delete(node.item.key);
+            this.dispatchEvent(new CustomEvent(`collapse`, {
+                detail: { node, depth },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        else {
+            if (node.children === undefined) {
+                if (node.item.isLeaf !== false)
+                    return;
+                const loader = this.model ?? (this.loadChildren ? this : undefined);
+                if (loader) {
+                    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) {
+        // Set anchor at `fromIdx` if not already anchored
+        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`) {
+            // On first Shift+arrow: snapshot current selection
+            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));
+            // Toggle: items in snapshot stay toggled based on presence in snapshot
+            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 {
+            // standard: range replaces selection
+            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 = undefined;
+            this.#pendingController = undefined;
+            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 = undefined;
+            this.#pendingController = undefined;
+            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 = undefined;
+            this.#pendingNode = undefined;
+        }
+    }
+    /** 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`) {
+            // Collapse all expanded nodes except direct ancestors of the expanding node
+            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 = 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 = undefined) {
+        if (!node.children)
+            return undefined;
+        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;
+        }
+        return undefined;
+    }
+    #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;
+        // Emit tickle for keyboard cursor movement
+        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 === undefined)
+            return;
+        const item = this.shadowRoot?.querySelector(`[data-key="${tickledKey}"]`);
+        item?.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 !== undefined && !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([
+    customElement(`ixfx-tree-base`)
+], TreeBaseElement);
+export { TreeBaseElement };
+//# sourceMappingURL=tree-base.js.map