@ixfx/components 0.2.4 → 0.2.5

package/dist/tree/tree-base.js

@@ -1,1028 +0,0 @@
-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