atomicuilibrary 0.0.1

package/dist/collection/components/tree/tree.js

@@ -0,0 +1,2509 @@
+import { Host, h } from "@stencil/core";
+export class Tree {
+    el;
+    // ─── Props ───────────────────────────────────────────────────────────────────
+    nodes = [];
+    orientation = 'vertical';
+    showLines = true;
+    showIcons = true;
+    expandable = true;
+    selectable = false;
+    multiSelect = false;
+    checkboxes = false;
+    checkboxSync = true;
+    enableDrag = false;
+    searchable = false;
+    animated = true;
+    indent = 24;
+    nodeHeight = 40;
+    expandAll = false;
+    collapseAll = false;
+    layout = 'tree';
+    variant = 'default';
+    size = 'md';
+    theme = 'light';
+    showGlow = false;
+    connectorWidth = 1;
+    connectorColor = '';
+    connectorOpacity = 1;
+    connectorShape = 'rounded';
+    iconLibrary = 'lucide';
+    inlineEdit = false;
+    contextMenuEnabled = false;
+    undoRedoEnabled = false;
+    lazyLoad = false;
+    virtualScroll = false;
+    virtualScrollHeight = 400;
+    showNodeActions = true;
+    showAvatars = true;
+    expandIconType = 'chevron';
+    expandedIcon = '';
+    collapsedIcon = '';
+    expandIconSize = '14px';
+    expandIconColor = '';
+    // ─── State ───────────────────────────────────────────────────────────────────
+    internalNodes = [];
+    selectedNodes = [];
+    searchTerm = '';
+    draggedNode = null;
+    focusedNodeId = null;
+    editingNodeId = null;
+    editingValue = '';
+    contextMenuVisible = false;
+    contextMenuNode = null;
+    contextMenuX = 0;
+    contextMenuY = 0;
+    undoStack = [];
+    redoStack = [];
+    dragOverNodeId = null;
+    dragPosition = 'inside';
+    _selectionPathIds = new Set();
+    // ─── Events ──────────────────────────────────────────────────────────────────
+    nodeClick;
+    nodeExpand;
+    nodeSelect;
+    nodeCheck;
+    nodeDragStart;
+    nodeDrop;
+    treeChange;
+    nodeAction;
+    nodeEdit;
+    nodeContextMenu;
+    nodeLazyLoad;
+    nodeAdd;
+    nodeRemove;
+    nodeMove;
+    // ─── Lifecycle ───────────────────────────────────────────────────────────────
+    componentWillLoad() {
+        this.parseNodes();
+        document.addEventListener('click', this.handleDocumentClick);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleDocumentClick);
+    }
+    // ─── Watchers ────────────────────────────────────────────────────────────────
+    parseNodes() {
+        let parsed = typeof this.nodes === 'string' ? JSON.parse(this.nodes) : this.nodes;
+        if (this.expandAll)
+            parsed = this._expandAllRecursive(parsed);
+        else if (this.collapseAll)
+            parsed = this._collapseAllRecursive(parsed);
+        this.internalNodes = parsed;
+    }
+    // ─── PUBLIC METHODS ──────────────────────────────────────────────────────────
+    async expandAllNodes() {
+        this._saveUndo();
+        this.internalNodes = this._expandAllRecursive(this.internalNodes);
+    }
+    async collapseAllNodes() {
+        this._saveUndo();
+        this.internalNodes = this._collapseAllRecursive(this.internalNodes);
+    }
+    async selectNode(id) {
+        this.internalNodes = this._selectById(id, this.internalNodes);
+    }
+    async getNodePath(id) {
+        return this._findPath(id, this.internalNodes) ?? [];
+    }
+    async getBreadcrumb(id) {
+        const path = await this.getNodePath(id);
+        return path.map(pid => {
+            const n = this._findNode(pid, this.internalNodes);
+            return { id: pid, label: n?.label ?? String(pid) };
+        });
+    }
+    async updateNode(id, data) {
+        this._saveUndo();
+        this.internalNodes = this._updateData(id, data, this.internalNodes);
+    }
+    async scrollToNode(id) {
+        const path = await this.getNodePath(id);
+        if (path.length > 1)
+            this.internalNodes = this._expandPath(path.slice(0, -1), this.internalNodes);
+        setTimeout(() => {
+            const nodeEl = this.el.querySelector(`[data-node-id="${id}"]`);
+            nodeEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }, 60);
+    }
+    async expandByPath(path) {
+        this.internalNodes = this._expandPath(path, this.internalNodes);
+    }
+    async selectByPath(path) {
+        if (!path.length)
+            return;
+        this.internalNodes = this._expandPath(path.slice(0, -1), this.internalNodes);
+        this.internalNodes = this._selectById(path[path.length - 1], this.internalNodes);
+    }
+    async getSelectedNodes() {
+        return this._dfs(this.internalNodes).filter(n => this.selectedNodes.includes(n.id));
+    }
+    async dfsTraversal(startId, order = 'pre') {
+        const roots = startId ? [this._findNode(startId, this.internalNodes)].filter((n) => n !== null) : this.internalNodes;
+        return order === 'post' ? this._dfsPost(roots) : this._dfs(roots);
+    }
+    async bfsTraversal(startId) {
+        const roots = startId ? [this._findNode(startId, this.internalNodes)].filter((n) => n !== null) : this.internalNodes;
+        return this._bfs(roots);
+    }
+    async flattenTree(nodes = this.internalNodes) {
+        const result = [];
+        const walk = (nodes, parentId, depth, path) => {
+            nodes.forEach((node, index) => {
+                const { children, ...rest } = node;
+                const np = [...path, node.id];
+                result.push({ ...rest, parentId, depth, index, path: np, hasChildren: !!(children?.length) });
+                if (node.expanded && children)
+                    walk(children, node.id, depth + 1, np);
+            });
+        };
+        walk(nodes, null, 0, []);
+        return result;
+    }
+    async addNode(parentId, node) {
+        this._saveUndo();
+        this.internalNodes = parentId === null
+            ? [...this.internalNodes, node]
+            : this._addToParent(parentId, node, this.internalNodes);
+        this.nodeAdd.emit({ parentId, node });
+    }
+    async removeNode(id) {
+        this._saveUndo();
+        const node = this._findNode(id, this.internalNodes);
+        this.internalNodes = this._removeNode(id, this.internalNodes);
+        if (node)
+            this.nodeRemove.emit({ node });
+    }
+    async moveNode(nodeId, targetId, position) {
+        this._saveUndo();
+        this.internalNodes = this._moveNode(nodeId, targetId, position, this.internalNodes);
+        this.nodeMove.emit({ nodeId, targetId, position });
+    }
+    async undo() {
+        if (!this.undoStack.length)
+            return;
+        const prev = this.undoStack[this.undoStack.length - 1];
+        this.redoStack = [...this.redoStack, JSON.stringify(this.internalNodes)];
+        this.undoStack = this.undoStack.slice(0, -1);
+        this.internalNodes = JSON.parse(prev);
+    }
+    async redo() {
+        if (!this.redoStack.length)
+            return;
+        const next = this.redoStack[this.redoStack.length - 1];
+        this.undoStack = [...this.undoStack, JSON.stringify(this.internalNodes)];
+        this.redoStack = this.redoStack.slice(0, -1);
+        this.internalNodes = JSON.parse(next);
+    }
+    async diffTrees(oldNodes, newNodes) {
+        const oldFlat = new Map(this._dfs(oldNodes).map(n => [n.id, n]));
+        const newFlat = new Map(this._dfs(newNodes).map(n => [n.id, n]));
+        const added = [];
+        const removed = [];
+        const modified = [];
+        newFlat.forEach((node, id) => {
+            if (!oldFlat.has(id))
+                added.push(node);
+            else if (JSON.stringify(oldFlat.get(id)) !== JSON.stringify(node))
+                modified.push({ id, oldNode: oldFlat.get(id), newNode: node });
+        });
+        oldFlat.forEach((node, id) => {
+            if (!newFlat.has(id))
+                removed.push(node);
+        });
+        return { added, removed, modified };
+    }
+    async getState() {
+        const expanded = [];
+        this._dfs(this.internalNodes).forEach(n => {
+            if (n.expanded)
+                expanded.push(n.id);
+        });
+        return { nodes: this.internalNodes, selectedNodes: this.selectedNodes, expandedNodes: expanded };
+    }
+    async restoreState(state) {
+        this._saveUndo();
+        this.internalNodes = state.nodes;
+        this.selectedNodes = state.selectedNodes;
+    }
+    // ─── PRIVATE HELPERS ────────────────────────────────────────────────────────
+    _saveUndo() {
+        if (!this.undoRedoEnabled)
+            return;
+        this.undoStack = [...this.undoStack.slice(-49), JSON.stringify(this.internalNodes)];
+        this.redoStack = [];
+    }
+    _expandAllRecursive(nodes) {
+        return nodes.map(n => ({ ...n, expanded: true, children: n.children ? this._expandAllRecursive(n.children) : undefined }));
+    }
+    _collapseAllRecursive(nodes) {
+        return nodes.map(n => ({ ...n, expanded: false, children: n.children ? this._collapseAllRecursive(n.children) : undefined }));
+    }
+    _findNode(id, nodes) {
+        for (const n of nodes) {
+            if (n.id === id)
+                return n;
+            if (n.children) {
+                const f = this._findNode(id, n.children);
+                if (f)
+                    return f;
+            }
+        }
+        return null;
+    }
+    _findPath(id, nodes, path = []) {
+        for (const n of nodes) {
+            const cur = [...path, n.id];
+            if (n.id === id)
+                return cur;
+            if (n.children) {
+                const f = this._findPath(id, n.children, cur);
+                if (f)
+                    return f;
+            }
+        }
+        return null;
+    }
+    _expandPath(path, nodes) {
+        return nodes.map(n => {
+            if (path.includes(n.id))
+                return { ...n, expanded: true, children: n.children ? this._expandPath(path, n.children) : undefined };
+            if (n.children)
+                return { ...n, children: this._expandPath(path, n.children) };
+            return n;
+        });
+    }
+    _selectById(id, nodes) {
+        return nodes.map(n => {
+            if (n.id === id) {
+                const sel = !n.selected;
+                if (this.multiSelect)
+                    this.selectedNodes = sel ? [...this.selectedNodes, id] : this.selectedNodes.filter(s => s !== id);
+                else
+                    this.selectedNodes = sel ? [id] : [];
+                this.nodeSelect.emit({ node: n, selected: sel });
+                this.treeChange.emit({ nodes: this.internalNodes, selectedNodes: this.selectedNodes });
+                return { ...n, selected: sel };
+            }
+            if (!this.multiSelect && n.selected && n.id !== id)
+                return { ...n, selected: false, children: n.children ? this._selectById(id, n.children) : undefined };
+            if (n.children)
+                return { ...n, children: this._selectById(id, n.children) };
+            return n;
+        });
+    }
+    _updateData(id, data, nodes) {
+        return nodes.map(n => {
+            if (n.id === id)
+                return { ...n, ...data };
+            if (n.children)
+                return { ...n, children: this._updateData(id, data, n.children) };
+            return n;
+        });
+    }
+    _addToParent(parentId, newNode, nodes) {
+        return nodes.map(n => {
+            if (n.id === parentId)
+                return { ...n, expanded: true, isLeaf: false, children: [...(n.children || []), newNode] };
+            if (n.children)
+                return { ...n, children: this._addToParent(parentId, newNode, n.children) };
+            return n;
+        });
+    }
+    _removeNode(id, nodes) {
+        return nodes.filter(n => n.id !== id).map(n => ({ ...n, children: n.children ? this._removeNode(id, n.children) : undefined }));
+    }
+    _moveNode(nodeId, targetId, position, nodes) {
+        const nodeToMove = this._findNode(nodeId, nodes);
+        if (!nodeToMove || nodeId === targetId)
+            return nodes;
+        const withoutNode = this._removeNode(nodeId, nodes);
+        if (position === 'inside')
+            return this._addToParent(targetId, nodeToMove, withoutNode);
+        return this._insertRelative(nodeToMove, targetId, position, withoutNode);
+    }
+    _insertRelative(node, targetId, pos, nodes) {
+        const result = [];
+        for (const n of nodes) {
+            if (n.id === targetId) {
+                if (pos === 'before') {
+                    result.push(node);
+                    result.push(n);
+                }
+                else {
+                    result.push(n);
+                    result.push(node);
+                }
+            }
+            else {
+                result.push(n.children ? { ...n, children: this._insertRelative(node, targetId, pos, n.children) } : n);
+            }
+        }
+        return result;
+    }
+    _dfs(nodes, result = []) {
+        for (const n of nodes) {
+            result.push(n);
+            if (n.children)
+                this._dfs(n.children, result);
+        }
+        return result;
+    }
+    _dfsPost(nodes, result = []) {
+        for (const n of nodes) {
+            if (n.children)
+                this._dfsPost(n.children, result);
+            result.push(n);
+        }
+        return result;
+    }
+    _bfs(roots) {
+        const result = [];
+        const queue = [...roots];
+        while (queue.length) {
+            const n = queue.shift();
+            if (!n)
+                break;
+            result.push(n);
+            if (n.children)
+                queue.push(...n.children);
+        }
+        return result;
+    }
+    // Checkbox indeterminate sync
+    _syncChildren(node, checked) {
+        return { ...node, checked, indeterminate: false, children: node.children?.map(c => this._syncChildren(c, checked)) };
+    }
+    _syncParent(node) {
+        if (!node.children?.length)
+            return node;
+        const kids = node.children.map(c => this._syncParent(c));
+        const ck = kids.filter(c => c.checked && !c.indeterminate).length;
+        const ind = kids.filter(c => c.indeterminate).length;
+        const all = kids.length;
+        return { ...node, children: kids, checked: ck === all, indeterminate: ck > 0 && ck < all || ind > 0 };
+    }
+    _applyCheckbox(targetId, checked, nodes) {
+        return nodes.map(n => {
+            if (n.id === targetId)
+                return { ...this._syncChildren(n, checked), checked, indeterminate: false };
+            if (n.children) {
+                const updatedKids = this._applyCheckbox(targetId, checked, n.children);
+                const updNode = { ...n, children: updatedKids };
+                return this.checkboxSync ? this._syncParent(updNode) : updNode;
+            }
+            return n;
+        });
+    }
+    _getSelectionPathIds() {
+        const pathIds = new Set();
+        const walk = (nodes, path) => {
+            for (const n of nodes) {
+                const p = [...path, n.id];
+                if (this.selectedNodes.includes(n.id))
+                    p.forEach(id => pathIds.add(id));
+                if (n.children)
+                    walk(n.children, p);
+            }
+        };
+        walk(this.internalNodes, []);
+        return pathIds;
+    }
+    _getVisibleNodes(nodes = this.internalNodes, result = []) {
+        for (const n of nodes) {
+            result.push(n);
+            if (n.expanded && n.children)
+                this._getVisibleNodes(n.children, result);
+        }
+        return result;
+    }
+    _findParent(id, nodes = this.internalNodes, parent = null) {
+        for (const n of nodes) {
+            if (n.id === id)
+                return parent;
+            if (n.children) {
+                const f = this._findParent(id, n.children, n);
+                if (f)
+                    return f;
+            }
+        }
+        return null;
+    }
+    _selectRange(startId, endId) {
+        const vis = this._getVisibleNodes();
+        const si = vis.findIndex(n => n.id === startId);
+        const ei = vis.findIndex(n => n.id === endId);
+        if (si === -1 || ei === -1)
+            return this.internalNodes;
+        const range = vis.slice(Math.min(si, ei), Math.max(si, ei) + 1).map(n => n.id);
+        this.selectedNodes = Array.from(new Set([...this.selectedNodes, ...range]));
+        return this._applySelection(this.internalNodes);
+    }
+    _applySelection(nodes) {
+        return nodes.map(n => ({ ...n, selected: this.selectedNodes.includes(n.id), children: n.children ? this._applySelection(n.children) : undefined }));
+    }
+    _toggleNode(nodeId, nodes = this.internalNodes) {
+        return nodes.map(n => {
+            if (n.id === nodeId) {
+                const newExp = !n.expanded;
+                this.nodeExpand.emit({ node: n, expanded: newExp });
+                if (newExp && this.lazyLoad && n.isLeaf === false && !n.children?.length) {
+                    this.nodeLazyLoad.emit({ node: n });
+                    return { ...n, expanded: newExp, loading: true };
+                }
+                return { ...n, expanded: newExp };
+            }
+            if (n.children)
+                return { ...n, children: this._toggleNode(nodeId, n.children) };
+            return n;
+        });
+    }
+    // ─── EVENT HANDLERS ─────────────────────────────────────────────────────────
+    handleNodeClick(node, path, event) {
+        if (node.disabled)
+            return;
+        const canExpand = !!(node.children?.length) || (this.lazyLoad && node.isLeaf === false);
+        if (this.expandable && canExpand)
+            this.internalNodes = this._toggleNode(node.id);
+        if (this.selectable) {
+            if (this.multiSelect && event) {
+                if (event.shiftKey && this.focusedNodeId)
+                    this.internalNodes = this._selectRange(this.focusedNodeId, node.id);
+                else if (event.ctrlKey || event.metaKey)
+                    this.internalNodes = this._selectById(node.id, this.internalNodes);
+                else {
+                    this.selectedNodes = [node.id];
+                    this.internalNodes = this._applySelection(this.internalNodes);
+                }
+            }
+            else {
+                this.internalNodes = this._selectById(node.id, this.internalNodes);
+            }
+        }
+        this.focusedNodeId = node.id;
+        this.nodeClick.emit({ node, path });
+    }
+    handleCheckboxChange(node, event) {
+        const checked = event.detail.checked;
+        if (this.checkboxSync)
+            this.internalNodes = this._applyCheckbox(node.id, checked, this.internalNodes);
+        else
+            this.internalNodes = this._updateData(node.id, { checked }, this.internalNodes);
+        const updated = this._findNode(node.id, this.internalNodes);
+        this.nodeCheck.emit({ node: updated ?? node, checked, indeterminate: updated?.indeterminate ?? false });
+        this.treeChange.emit({ nodes: this.internalNodes, selectedNodes: this.selectedNodes });
+    }
+    handleDragStart(node, event) {
+        if (!this.enableDrag || node.disabled)
+            return;
+        this.draggedNode = node;
+        event.dataTransfer.effectAllowed = 'move';
+        event.dataTransfer.setData('text/plain', String(node.id));
+        this.nodeDragStart.emit(node);
+    }
+    handleDragOver(targetNode, event) {
+        if (!this.enableDrag)
+            return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+        this.dragOverNodeId = targetNode.id;
+        const el = event.currentTarget;
+        const rect = el.getBoundingClientRect();
+        const pct = (event.clientY - rect.top) / rect.height;
+        this.dragPosition = pct < 0.25 ? 'before' : pct > 0.75 ? 'after' : 'inside';
+    }
+    handleDragLeave(event) {
+        const related = event.relatedTarget;
+        if (!this.el.contains(related))
+            this.dragOverNodeId = null;
+    }
+    handleDrop(targetNode, event) {
+        if (!this.enableDrag || !this.draggedNode)
+            return;
+        event.preventDefault();
+        const pos = this.dragPosition;
+        const src = this.draggedNode;
+        this.nodeDrop.emit({ draggedNode: src, targetNode, position: pos });
+        if (src.id !== targetNode.id) {
+            this._saveUndo();
+            this.internalNodes = this._moveNode(src.id, targetNode.id, pos, this.internalNodes);
+        }
+        this.draggedNode = null;
+        this.dragOverNodeId = null;
+    }
+    handleSearchInput(event) {
+        this.searchTerm = event.detail.toLowerCase();
+    }
+    handleDocumentClick = () => {
+        if (this.contextMenuVisible)
+            this.contextMenuVisible = false;
+    };
+    handleContextMenu(node, event) {
+        if (!this.contextMenuEnabled)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.contextMenuNode = node;
+        this.contextMenuX = event.clientX;
+        this.contextMenuY = event.clientY;
+        this.contextMenuVisible = true;
+        this.nodeContextMenu.emit({ node, x: event.clientX, y: event.clientY });
+    }
+    startEditing(node) {
+        this.editingNodeId = node.id;
+        this.editingValue = node.label ?? '';
+        setTimeout(() => {
+            const input = this.el.querySelector('.tree-edit-input');
+            if (input) {
+                input.focus();
+                input.select();
+            }
+        }, 40);
+    }
+    cancelEditing() { this.editingNodeId = null; this.editingValue = ''; }
+    commitEditing(node) {
+        const val = this.editingValue.trim();
+        if (!val) {
+            this.cancelEditing();
+            return;
+        }
+        const old = node.label;
+        this._saveUndo();
+        this.internalNodes = this._updateData(node.id, { label: val }, this.internalNodes);
+        this.nodeEdit.emit({ node, newLabel: val, oldLabel: old ?? '' });
+        this.cancelEditing();
+    }
+    handleKeyDown = (event) => {
+        const vis = this._getVisibleNodes();
+        const ci = vis.findIndex(n => n.id === this.focusedNodeId);
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (ci === -1 && vis.length)
+                    this.focusedNodeId = vis[0].id;
+                else if (ci < vis.length - 1)
+                    this.focusedNodeId = vis[ci + 1].id;
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (ci > 0)
+                    this.focusedNodeId = vis[ci - 1].id;
+                break;
+            case 'ArrowRight': {
+                event.preventDefault();
+                const n = vis[ci];
+                if (n?.children?.length && !n.expanded)
+                    this.internalNodes = this._toggleNode(n.id);
+                else if (n?.expanded && ci < vis.length - 1)
+                    this.focusedNodeId = vis[ci + 1].id;
+                break;
+            }
+            case 'ArrowLeft': {
+                event.preventDefault();
+                const n = vis[ci];
+                if (n?.expanded && n.children?.length)
+                    this.internalNodes = this._toggleNode(n.id);
+                else {
+                    const p = this._findParent(n?.id);
+                    if (p)
+                        this.focusedNodeId = p.id;
+                }
+                break;
+            }
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (vis[ci])
+                    this.handleNodeClick(vis[ci], []);
+                break;
+            case 'F2':
+                if (this.inlineEdit && this.focusedNodeId !== null) {
+                    const n = this._findNode(this.focusedNodeId, this.internalNodes);
+                    if (n && !n.disabled)
+                        this.startEditing(n);
+                }
+                break;
+            case 'Escape':
+                this.cancelEditing();
+                this.contextMenuVisible = false;
+                break;
+            case 'Home':
+                event.preventDefault();
+                if (vis.length)
+                    this.focusedNodeId = vis[0].id;
+                break;
+            case 'End':
+                event.preventDefault();
+                if (vis.length)
+                    this.focusedNodeId = vis[vis.length - 1].id;
+                break;
+            case 'z':
+            case 'Z':
+                if ((event.ctrlKey || event.metaKey) && this.undoRedoEnabled) {
+                    event.preventDefault();
+                    if (event.shiftKey)
+                        this.redo();
+                    else
+                        this.undo();
+                }
+                break;
+        }
+    };
+    // ─── FILTER / HIGHLIGHT ─────────────────────────────────────────────────────
+    filterNodes(nodes) {
+        if (!this.searchTerm)
+            return nodes;
+        return nodes.filter(n => {
+            const match = (n.label ?? '').toLowerCase().includes(this.searchTerm);
+            const childMatch = n.children && this.filterNodes(n.children).length > 0;
+            return match || childMatch;
+        }).map(n => ({ ...n, expanded: true, children: n.children ? this.filterNodes(n.children) : undefined }));
+    }
+    renderLabel(label) {
+        if (!this.searchTerm || !label.toLowerCase().includes(this.searchTerm))
+            return label;
+        const lower = label.toLowerCase();
+        const idx = lower.indexOf(this.searchTerm);
+        return [
+            label.substring(0, idx),
+            h("mark", { class: "tree-highlight" }, label.substring(idx, idx + this.searchTerm.length)),
+            label.substring(idx + this.searchTerm.length),
+        ];
+    }
+    _renderExpandIcon(isExpanded, node) {
+        let iconName = '';
+        let style = {};
+        const library = node.iconLibrary ?? this.iconLibrary;
+        if (this.expandIconType === 'custom') {
+            iconName = isExpanded ? (this.expandedIcon || 'chevron-down') : (this.collapsedIcon || 'chevron-right');
+        }
+        else {
+            switch (this.expandIconType) {
+                case 'plus-minus':
+                    iconName = isExpanded ? 'minus' : 'plus';
+                    break;
+                case 'arrow':
+                    iconName = isExpanded ? 'arrow-down' : 'arrow-right';
+                    break;
+                case 'caret':
+                    iconName = isExpanded ? 'caret-down' : 'caret-right';
+                    break;
+                case 'chevron':
+                default:
+                    iconName = 'chevron-right';
+                    style = { transform: `rotate(${isExpanded ? '90deg' : '0deg'})`, transition: 'transform 0.2s ease' };
+                    break;
+            }
+        }
+        if (this.expandIconColor) {
+            style.color = this.expandIconColor;
+        }
+        return (h("div", { class: "tree-expand-icon", onClick: (e) => { e.stopPropagation(); this.internalNodes = this._toggleNode(node.id); } }, h("ui-icon", { name: iconName, library: library, size: this.expandIconSize, style: style })));
+    }
+    renderNode(node, level = 0, path = [], isLast = false, parentPath = [], index = 0, groupHasIcons = false) {
+        const hasChildren = !!(node.children?.length);
+        const canExpand = hasChildren || (this.lazyLoad && node.isLeaf === false);
+        const isExpanded = !!node.expanded;
+        const isSelected = node.selected || this.selectedNodes.includes(node.id);
+        const isEditing = this.editingNodeId === node.id;
+        const isDragOver = this.dragOverNodeId === node.id;
+        const currentPath = [...path, node.id];
+        const depth = level;
+        const baseWidth = this.connectorWidth || 1.8;
+        const selPathIds = this._selectionPathIds || new Set();
+        // SVG connectors
+        const connectors = [];
+        if (this.showLines && this.layout === 'tree' && depth > 0) {
+            const vLines = [];
+            const hJunctions = [];
+            for (let i = 0; i < depth; i++) {
+                const segW = Math.max(0.6, baseWidth - i * 0.3);
+                const lx = i * this.indent + 12;
+                const isHL = selPathIds.has(currentPath[i + 1] ?? '');
+                const color = node.connectorColor || this.connectorColor || 'var(--tree-line-color-default)';
+                const opacity = this.connectorOpacity;
+                const showV = i < depth - 1 ? !parentPath[i + 1] : !isLast;
+                if (showV) {
+                    vLines.push(h("line", { x1: lx, y1: "0", x2: lx, y2: "100%", stroke: color, "stroke-width": segW, "stroke-opacity": isHL ? 1 : opacity, class: isHL ? 'path-highlight' : '', "vector-effect": "non-scaling-stroke" }));
+                }
+                if (i === depth - 1) {
+                    const cr = this.connectorShape === 'square' ? 0 : 8;
+                    const hy = this.nodeHeight / 2;
+                    const hx = (i + 1) * this.indent;
+                    const pd = cr > 0 ? `M ${lx} 0 L ${lx} ${hy - cr} Q ${lx} ${hy} ${lx + cr} ${hy} L ${hx} ${hy}` : `M ${lx} 0 L ${lx} ${hy} L ${hx} ${hy}`;
+                    hJunctions.push(h("path", { d: pd, fill: "none", stroke: color, "stroke-width": segW, "stroke-opacity": isHL ? 1 : opacity, "stroke-linecap": "round", class: isHL ? 'path-highlight' : '', "vector-effect": "non-scaling-stroke" }), h("circle", { cx: hx, cy: hy, r: "2.5", fill: color, opacity: isHL ? 1 : 0.8 }));
+                }
+            }
+            connectors.push(h("div", { class: "tree-connector-harness-group", style: { '--tree-indent-full': `${depth * this.indent}px` } }, h("div", { class: "tree-v-line-container" }, h("svg", { class: "tree-connectors-svg", width: "100%", height: "100%", preserveAspectRatio: "none" }, vLines)), h("div", { class: "tree-hook-container", style: { height: `${this.nodeHeight}px` } }, h("svg", { class: "tree-connectors-svg", width: "100%", height: "100%", viewBox: `0 0 ${depth * this.indent} ${this.nodeHeight}`, preserveAspectRatio: "xMinYMin meet" }, hJunctions))));
+        }
+        const nodeIcon = node.icon ?? (this.showIcons ? (canExpand ? (isExpanded ? 'folder-open' : 'folder') : 'file-text') : null);
+        const nodeClasses = {
+            'tree-node': true,
+            'tree-node-expanded': isExpanded,
+            'tree-node-collapsed': !isExpanded,
+            'tree-node-selected': isSelected,
+            'tree-node-disabled': !!node.disabled,
+            'tree-node-leaf': !canExpand,
+            'tree-node-branch': canExpand,
+            'tree-node-focused': this.focusedNodeId === node.id,
+            'tree-node-editing': isEditing,
+            'tree-node-loading': !!node.loading,
+            'tree-node-drag-over': isDragOver,
+            [`tree-drop-${this.dragPosition}`]: isDragOver,
+            [`tree-node-${node.color ?? 'default'}`]: true,
+            [`tree-node-${this.size}`]: true,
+            'has-checkbox': this.checkboxes,
+            'group-has-icons': groupHasIcons,
+        };
+        const ariaAttrs = {
+            role: 'treeitem',
+            'aria-expanded': canExpand ? String(isExpanded) : undefined,
+            'aria-selected': String(isSelected),
+            'aria-level': String(level + 1),
+            'aria-disabled': node.disabled ? 'true' : undefined,
+            tabindex: (this.focusedNodeId === node.id || (this.focusedNodeId === null && level === 0 && index === 0)) ? '0' : '-1',
+        };
+        const nodeContent = (h("div", { class: nodeClasses, key: node.id, "data-node-id": node.id, "data-depth": depth, style: { '--depth': String(depth) } }, this.layout === 'tree' && connectors, isDragOver && this.dragPosition === 'before' && h("div", { class: "tree-drop-indicator tree-drop-before-line" }), h("div", { class: "tree-node-content", style: this.layout === 'tree' ? { paddingLeft: `${(depth + 1) * this.indent}px`, minHeight: `${this.nodeHeight}px` } : { minHeight: `${this.nodeHeight}px` }, onClick: (e) => !isEditing && this.handleNodeClick(node, currentPath, e), onDblClick: () => this.inlineEdit && !node.disabled && this.startEditing(node), onContextMenu: (e) => this.handleContextMenu(node, e), draggable: this.enableDrag && !node.disabled, onDragStart: (e) => this.handleDragStart(node, e), onDragOver: (e) => this.handleDragOver(node, e), onDragLeave: (e) => this.handleDragLeave(e), onDrop: (e) => this.handleDrop(node, e), ...ariaAttrs }, this.expandable && canExpand
+            ? this._renderExpandIcon(isExpanded, node)
+            : h("div", { class: "tree-expand-spacer" }), this.checkboxes && (h("div", { class: "tree-checkbox" }, h("ui-checkbox", { checked: !!node.checked, disabled: !!node.disabled, indeterminate: !!node.indeterminate, onCheckboxChange: (e) => this.handleCheckboxChange(node, e), size: "sm" }))), this.showAvatars && (node.avatar || node.avatarInitials) && (h("div", { class: "tree-node-avatar" }, node.avatar
+            ? h("img", { src: node.avatar, alt: node.label })
+            : h("span", { class: `tree-node-avatar-initials tree-node-avatar-${node.color ?? 'primary'}` }, node.avatarInitials))), (nodeIcon || groupHasIcons) && (h("div", { class: `tree-node-icon${!nodeIcon ? ' tree-node-icon-spacer' : ''}` }, nodeIcon && !node.loading && (h("ui-icon", { name: nodeIcon, library: node.iconLibrary ?? this.iconLibrary, size: "16px", style: { color: node.color ? `var(--tree-${node.color})` : undefined } })), node.loading && h("ui-icon", { name: "loader-2", library: "lucide", spin: true, size: "16px" }))), h("div", { class: "tree-node-text-group" }, isEditing
+            ? (h("ui-input", { class: "tree-edit-input", type: "text", value: this.editingValue, onInputChange: (e) => { this.editingValue = e.detail; }, onInputKeydown: (e) => {
+                    if (e.detail.key === 'Enter')
+                        this.commitEditing(node);
+                    else if (e.detail.key === 'Escape')
+                        this.cancelEditing();
+                    e.detail.stopPropagation();
+                }, onInputBlur: () => this.commitEditing(node), autoFocus: true, size: "sm", fullWidth: true }))
+            : h("div", { class: "tree-node-label" }, this.renderLabel(node.label ?? '')), node.description && !isEditing && h("div", { class: "tree-node-description" }, node.description)), node.tag && h("div", { class: "tree-node-tag" }, node.tag), node.badge && h("div", { class: `tree-node-badge tree-node-badge-${node.color ?? 'primary'}` }, node.badge), node.counter !== undefined && h("div", { class: "tree-node-counter" }, node.counter), node.locked && (h("div", { class: "tree-node-lock", title: node.lockTooltip ?? 'Locked' }, h("ui-icon", { name: "lock", library: "fontawesome", size: "12px" }))), this.showNodeActions && (node.actions?.length ?? 0) > 0 && (h("div", { class: "tree-node-actions" }, node.actions.map((action) => (h("ui-button", { variant: "ghost", size: "sm", class: `tree-action-btn${action.color ? ` tree-action-${action.color}` : ''}`, icon: action.icon, iconLibrary: action.library ?? this.iconLibrary, iconSize: "13px", ariaLabel: action.tooltip, disabled: !!action.disabled, onClick: (e) => { e.stopPropagation(); this.nodeAction.emit({ node, action: String(action.id ?? '') }); } })))))), isDragOver && this.dragPosition === 'after' && h("div", { class: "tree-drop-indicator tree-drop-after-line" }), canExpand && isExpanded && this.layout === 'tree' && (h("div", { class: `tree-children${isDragOver && this.dragPosition === 'inside' ? ' tree-children-drop-target' : ''}` }, hasChildren && node.children.map((child, idx) => {
+            const childHasIcons = node.children.some(c => c.icon || this.showIcons);
+            return this.renderNode(child, level + 1, currentPath, idx === node.children.length - 1, [...parentPath, isLast], idx, childHasIcons);
+        })))));
+        if (this.layout === 'org-chart') {
+            return (h("div", { class: "tree-node-wrapper" }, nodeContent, canExpand && isExpanded && (h("div", { class: "tree-children" }, hasChildren && node.children.map((child, idx) => {
+                const childHasIcons = node.children.some(c => c.icon || this.showIcons);
+                return this.renderNode(child, level + 1, currentPath, idx === node.children.length - 1, [...parentPath, isLast], idx, childHasIcons);
+            })))));
+        }
+        return nodeContent;
+    }
+    // ─── CONTEXT MENU ───────────────────────────────────────────────────────────
+    renderContextMenu() {
+        if (!this.contextMenuEnabled || !this.contextMenuVisible || !this.contextMenuNode)
+            return null;
+        const n = this.contextMenuNode;
+        return (h("div", { class: "tree-context-menu", style: { position: 'fixed', left: `${this.contextMenuX}px`, top: `${this.contextMenuY}px` }, onClick: (e) => e.stopPropagation() }, this.selectable && (h("div", { class: "tree-context-item", onClick: () => { this.handleNodeClick(n, []); this.contextMenuVisible = false; } }, h("ui-icon", { name: "check", library: "fontawesome", size: "13px" }), " Select")), this.expandable && (n.children?.length ?? 0) > 0 && (h("div", { class: "tree-context-item", onClick: () => { this.internalNodes = this._toggleNode(n.id); this.contextMenuVisible = false; } }, h("ui-icon", { name: n.expanded ? 'chevron-up' : 'chevron-down', library: "lucide", size: "13px" }), n.expanded ? 'Collapse' : 'Expand')), this.inlineEdit && !n.disabled && (h("div", { class: "tree-context-item", onClick: () => { this.startEditing(n); this.contextMenuVisible = false; } }, h("ui-icon", { name: "pen", library: "lucide", size: "13px" }), " Rename")), h("div", { class: "tree-context-separator" }), h("div", { class: "tree-context-item", onClick: () => { this.expandAllNodes(); this.contextMenuVisible = false; } }, "Expand All"), h("div", { class: "tree-context-item", onClick: () => { this.collapseAllNodes(); this.contextMenuVisible = false; } }, "Collapse All"), this.undoRedoEnabled && [
+            h("div", { class: "tree-context-separator" }),
+            h("div", { class: `tree-context-item${!this.undoStack.length ? ' disabled' : ''}`, onClick: () => { this.undo(); this.contextMenuVisible = false; } }, "Undo"),
+            h("div", { class: "tree-context-item tree-context-item-danger", onClick: () => {
+                    this._saveUndo();
+                    const node = this._findNode(n.id, this.internalNodes);
+                    this.internalNodes = this._removeNode(n.id, this.internalNodes);
+                    if (node)
+                        this.nodeRemove.emit({ node });
+                    this.contextMenuVisible = false;
+                } }, "Delete"),
+        ]));
+    }
+    // ─── MAIN RENDER ────────────────────────────────────────────────────────────
+    render() {
+        this._selectionPathIds = this._getSelectionPathIds();
+        const filtered = this.searchable ? this.filterNodes(this.internalNodes) : this.internalNodes;
+        const topHasIcons = filtered.some(n => n.icon || this.showIcons);
+        const cls = {
+            'tree-container': true,
+            [`tree-orientation-${this.orientation}`]: true,
+            [`tree-layout-${this.layout}`]: true,
+            [`tree-variant-${this.variant}`]: true,
+            [`tree-theme-${this.theme}`]: true,
+            'tree-animated': this.animated,
+            'tree-show-lines': this.showLines,
+            'tree-hide-lines': !this.showLines,
+            'tree-selectable': this.selectable,
+            'tree-glow': this.showGlow,
+        };
+        return (h(Host, { key: 'dae18b9d9751a023555e848bb0b5aaebdd235770', class: cls, style: { '--tree-indent': `${this.indent}px`, '--tree-node-height': `${this.nodeHeight}px` }, onKeyDown: this.handleKeyDown, tabIndex: 0 }, h("div", { key: '9b15d92f21722bcd345733cfa44206e3c83a2fa9', class: "tree-inner", role: "tree", "aria-multiselectable": this.multiSelect ? 'true' : 'false' }, this.searchable && (h("div", { key: 'be71bda4e65cfcf704616ef2ae563630bffde2fa', class: "tree-search" }, h("ui-icon", { key: '53d76e4229942408bf50ab0c72d3ce6d1811fbd2', name: "search", library: "fontawesome", size: "13px", class: "tree-search-icon" }), h("ui-input", { key: 'b8edf92c3dda73600fd0a653739aa1206be64698', type: "text", placeholder: "Search tree...", value: this.searchTerm, onInputChange: (e) => this.handleSearchInput(e), ariaLabel: "Search tree", size: "sm", fullWidth: true }), this.searchTerm && (h("ui-button", { key: '66800256ed8fc8139dab93bd920d25a2a6219cdf', variant: "ghost", size: "sm", class: "tree-search-clear", icon: "times", iconLibrary: "fontawesome", iconSize: "11px", ariaLabel: "Clear search", onClick: () => { this.searchTerm = ''; } })))), this.undoRedoEnabled && (h("div", { key: 'a391e1e016e422fbdd2781a09daf176bf8fe58df', class: "tree-toolbar" }, h("ui-button", { key: '73de8c1affc18220f94912f546c7e992d81850ed', variant: "ghost", size: "sm", icon: "undo", iconLibrary: "fontawesome", iconSize: "13px", label: "Undo", ariaLabel: "Undo (Ctrl+Z)", disabled: !this.undoStack.length, onClick: () => this.undo() }), h("ui-button", { key: '0aebc8cafd66fb273eb7e39b682a29a24f73bfcc', variant: "ghost", size: "sm", icon: "redo", iconLibrary: "fontawesome", iconSize: "13px", label: "Redo", ariaLabel: "Redo (Ctrl+Shift+Z)", disabled: !this.redoStack.length, onClick: () => this.redo() }), h("div", { key: '5bf0083e6ccd220d480a29f0fce27e220dba4231', class: "tree-toolbar-sep" }), h("ui-button", { key: '4aee1b4dfa0e8a99770e2ea55670cf17a3491bfb', variant: "ghost", size: "sm", icon: "expand", iconLibrary: "fontawesome", iconSize: "13px", ariaLabel: "Expand all", onClick: () => this.expandAllNodes() }), h("ui-button", { key: '31c8f23735e0aabb53bee60f63f823f0facbf4c2', variant: "ghost", size: "sm", icon: "compress", iconLibrary: "fontawesome", iconSize: "13px", ariaLabel: "Collapse all", onClick: () => this.collapseAllNodes() }))), h("div", { key: 'c635c7a4205a04d0fbb29bbbf666d82e3799e76e', class: "tree-content", style: this.virtualScroll ? { height: `${this.virtualScrollHeight}px`, overflowY: 'auto' } : {}, onScroll: () => this.virtualScroll && this.el.forceUpdate() }, this.virtualScroll && this.layout === 'tree' ? ((() => {
+            const visibleNodes = this._getVisibleNodes(filtered);
+            const scrollTop = this.el.shadowRoot?.querySelector('.tree-content')?.scrollTop || 0;
+            const startIndex = Math.max(0, Math.floor(scrollTop / this.nodeHeight) - 2);
+            const endIndex = Math.min(visibleNodes.length, startIndex + Math.ceil(this.virtualScrollHeight / this.nodeHeight) + 4);
+            return (h("div", { class: "tree-virtual-scroller", style: { height: `${visibleNodes.length * this.nodeHeight}px`, position: 'relative' } }, h("div", { class: "tree-virtual-offset", style: { transform: `translateY(${startIndex * this.nodeHeight}px)` } }, visibleNodes.slice(startIndex, endIndex).map((node, _idx) => {
+                const path = this._findPath(node.id, this.internalNodes) || [];
+                const isLast = false; // Hard to determine in flat list without extra metadata
+                return this.renderNode(node, path.length - 1, path.slice(0, -1), isLast, [], 0, false);
+            }))));
+        })()) : (filtered.length > 0
+            ? filtered.map((node, idx) => this.renderNode(node, 0, [], idx === filtered.length - 1, [], idx, topHasIcons))
+            : (h("div", { class: "tree-empty" }, h("ui-icon", { name: "folder-open", library: "fontawesome", size: "40px" }), h("p", null, this.searchTerm ? 'No results found' : 'No items')))))), this.renderContextMenu()));
+    }
+    static get is() { return "ui-tree"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tree.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tree.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "nodes": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeNode[] | string",
+                    "resolved": "TreeNode[] | string",
+                    "references": {
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "nodes",
+                "defaultValue": "[]"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'vertical'"
+            },
+            "showLines": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-lines",
+                "defaultValue": "true"
+            },
+            "showIcons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icons",
+                "defaultValue": "true"
+            },
+            "expandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expandable",
+                "defaultValue": "true"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "false"
+            },
+            "multiSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multi-select",
+                "defaultValue": "false"
+            },
+            "checkboxes": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checkboxes",
+                "defaultValue": "false"
+            },
+            "checkboxSync": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checkbox-sync",
+                "defaultValue": "true"
+            },
+            "enableDrag": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-drag",
+                "defaultValue": "false"
+            },
+            "searchable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchable",
+                "defaultValue": "false"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "true"
+            },
+            "indent": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indent",
+                "defaultValue": "24"
+            },
+            "nodeHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "node-height",
+                "defaultValue": "40"
+            },
+            "expandAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-all",
+                "defaultValue": "false"
+            },
+            "collapseAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapse-all",
+                "defaultValue": "false"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'tree' | 'org-chart'",
+                    "resolved": "\"org-chart\" | \"tree\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'tree'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'bordered' | 'rounded' | 'minimal' | 'glass' | 'compact' | 'directory' | 'cards' | 'git-graph'",
+                    "resolved": "\"bordered\" | \"cards\" | \"compact\" | \"default\" | \"directory\" | \"git-graph\" | \"glass\" | \"minimal\" | \"rounded\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'light'"
+            },
+            "showGlow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-glow",
+                "defaultValue": "false"
+            },
+            "connectorWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "connector-width",
+                "defaultValue": "1"
+            },
+            "connectorColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "connector-color",
+                "defaultValue": "''"
+            },
+            "connectorOpacity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "connector-opacity",
+                "defaultValue": "1"
+            },
+            "connectorShape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rounded' | 'square'",
+                    "resolved": "\"rounded\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "connector-shape",
+                "defaultValue": "'rounded'"
+            },
+            "iconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'lucide'"
+            },
+            "inlineEdit": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inline-edit",
+                "defaultValue": "false"
+            },
+            "contextMenuEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "context-menu-enabled",
+                "defaultValue": "false"
+            },
+            "undoRedoEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "undo-redo-enabled",
+                "defaultValue": "false"
+            },
+            "lazyLoad": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lazy-load",
+                "defaultValue": "false"
+            },
+            "virtualScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "virtual-scroll",
+                "defaultValue": "false"
+            },
+            "virtualScrollHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "virtual-scroll-height",
+                "defaultValue": "400"
+            },
+            "showNodeActions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-node-actions",
+                "defaultValue": "true"
+            },
+            "showAvatars": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-avatars",
+                "defaultValue": "true"
+            },
+            "expandIconType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'chevron' | 'plus-minus' | 'arrow' | 'caret' | 'custom'",
+                    "resolved": "\"arrow\" | \"caret\" | \"chevron\" | \"custom\" | \"plus-minus\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-icon-type",
+                "defaultValue": "'chevron'"
+            },
+            "expandedIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expanded-icon",
+                "defaultValue": "''"
+            },
+            "collapsedIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsed-icon",
+                "defaultValue": "''"
+            },
+            "expandIconSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-icon-size",
+                "defaultValue": "'14px'"
+            },
+            "expandIconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-icon-color",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalNodes": {},
+            "selectedNodes": {},
+            "searchTerm": {},
+            "draggedNode": {},
+            "focusedNodeId": {},
+            "editingNodeId": {},
+            "editingValue": {},
+            "contextMenuVisible": {},
+            "contextMenuNode": {},
+            "contextMenuX": {},
+            "contextMenuY": {},
+            "undoStack": {},
+            "redoStack": {},
+            "dragOverNodeId": {},
+            "dragPosition": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "nodeClick",
+                "name": "nodeClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ node: TreeNode; path: (string | number)[] }",
+                    "resolved": "{ node: TreeNode; path: (string | number)[]; }",
+                    "references": {
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    }
+                }
+            }, {
+                "method": "nodeExpand",
+                "name": "nodeExpand",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ node: TreeNode; expanded: boolean }",
+                    "resolved": "{ node: TreeNode; expanded: boolean; }",
+                    "references": {
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    }
+                }
+            }, {
+                "method": "nodeSelect",
+                "name": "nodeSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ node: TreeNode; selected: boolean }",
+                    "resolved": "{ node: TreeNode; selected: boolean; }",
+                    "references": {
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    }
+                }
+            }, {
+                "method": "nodeCheck",
+                "name": "nodeCheck",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ node: TreeNode; checked: boolean; indeterminate: boolean }",
+                    "resolved": "{ node: TreeNode; checked: boolean; indeterminate: boolean; }",
+                    "references": {
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    }
+                }
+            }, {
+                "method": "nodeDragStart",
+                "name": "nodeDragStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "TreeNode",
+                    "resolved": "TreeNode",
+                    "references": {
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    }
+                }
+            }, {
+                "method": "nodeDrop",
+                "name": "nodeDrop",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "TreeDropEvent",
+                    "resolved": "TreeDropEvent",
+                    "references": {
+                        "TreeDropEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeDropEvent",
+                            "referenceLocation": "TreeDropEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "treeChange",
+                "name": "treeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ nodes: TreeNode[]; selectedNodes: (string | number)[] }",
+                    "resolved": "{ nodes: TreeNode[]; selectedNodes: (string | number)[]; }",
+                    "references": {
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    }
+                }
+            }, {
+                "method": "nodeAction",
+                "name": "nodeAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ node: TreeNode; action: string }",
+                    "resolved": "{ node: TreeNode; action: string; }",
+                    "references": {
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    }
+                }
+            }, {
+                "method": "nodeEdit",
+                "name": "nodeEdit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ node: TreeNode; newLabel: string; oldLabel: string }",
+                    "resolved": "{ node: TreeNode; newLabel: string; oldLabel: string; }",
+                    "references": {
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    }
+                }
+            }, {
+                "method": "nodeContextMenu",
+                "name": "nodeContextMenu",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ node: TreeNode; x: number; y: number }",
+                    "resolved": "{ node: TreeNode; x: number; y: number; }",
+                    "references": {
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    }
+                }
+            }, {
+                "method": "nodeLazyLoad",
+                "name": "nodeLazyLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ node: TreeNode }",
+                    "resolved": "{ node: TreeNode; }",
+                    "references": {
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    }
+                }
+            }, {
+                "method": "nodeAdd",
+                "name": "nodeAdd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ parentId: string | number | null; node: TreeNode }",
+                    "resolved": "{ parentId: string | number; node: TreeNode; }",
+                    "references": {
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    }
+                }
+            }, {
+                "method": "nodeRemove",
+                "name": "nodeRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ node: TreeNode }",
+                    "resolved": "{ node: TreeNode; }",
+                    "references": {
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    }
+                }
+            }, {
+                "method": "nodeMove",
+                "name": "nodeMove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ nodeId: string | number; targetId: string | number; position: 'before' | 'inside' | 'after' }",
+                    "resolved": "{ nodeId: string | number; targetId: string | number; position: \"after\" | \"before\" | \"inside\"; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "expandAllNodes": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "collapseAllNodes": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "selectNode": {
+                "complexType": {
+                    "signature": "(id: string | number) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string | number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getNodePath": {
+                "complexType": {
+                    "signature": "(id: string | number) => Promise<(string | number)[]>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string | number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<(string | number)[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getBreadcrumb": {
+                "complexType": {
+                    "signature": "(id: string | number) => Promise<TreeNodePath[]>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string | number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TreeNodePath": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNodePath",
+                            "referenceLocation": "TreeNodePath"
+                        }
+                    },
+                    "return": "Promise<TreeNodePath[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "updateNode": {
+                "complexType": {
+                    "signature": "(id: string | number, data: Partial<TreeNode>) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string | number",
+                            "docs": ""
+                        }, {
+                            "name": "data",
+                            "type": "{ id?: string | number; label?: string; key?: string | number; tag?: string; badge?: string; counter?: number; color?: StatusColor; expanded?: boolean; selected?: boolean; checked?: boolean; locked?: boolean; lockTooltip?: string; iconDate?: IconItem; avatar?: string; avatarInitials?: string; avatars?: { src?: string; label?: string; initials?: string; color?: string; }[]; isLeaf?: boolean; className?: string; customContent?: string; loading?: boolean; indeterminate?: boolean; actions?: TreeAction[]; connectorColor?: string; description?: string; href?: string; level?: number; path?: (string | number)[]; disabled?: boolean; icon?: string; iconLibrary?: IconLibrary; metadata?: Record<string, any>; children?: TreeNode[]; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "scrollToNode": {
+                "complexType": {
+                    "signature": "(id: string | number) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string | number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "expandByPath": {
+                "complexType": {
+                    "signature": "(path: (string | number)[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "path",
+                            "type": "(string | number)[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "selectByPath": {
+                "complexType": {
+                    "signature": "(path: (string | number)[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "path",
+                            "type": "(string | number)[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getSelectedNodes": {
+                "complexType": {
+                    "signature": "() => Promise<TreeNode[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    },
+                    "return": "Promise<TreeNode[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "dfsTraversal": {
+                "complexType": {
+                    "signature": "(startId?: string | number, order?: \"pre\" | \"post\") => Promise<TreeNode[]>",
+                    "parameters": [{
+                            "name": "startId",
+                            "type": "string | number",
+                            "docs": ""
+                        }, {
+                            "name": "order",
+                            "type": "\"pre\" | \"post\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    },
+                    "return": "Promise<TreeNode[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "bfsTraversal": {
+                "complexType": {
+                    "signature": "(startId?: string | number) => Promise<TreeNode[]>",
+                    "parameters": [{
+                            "name": "startId",
+                            "type": "string | number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    },
+                    "return": "Promise<TreeNode[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "flattenTree": {
+                "complexType": {
+                    "signature": "(nodes?: TreeNode[]) => Promise<FlatNode[]>",
+                    "parameters": [{
+                            "name": "nodes",
+                            "type": "TreeNode[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FlatNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::FlatNode",
+                            "referenceLocation": "FlatNode"
+                        },
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    },
+                    "return": "Promise<FlatNode[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "addNode": {
+                "complexType": {
+                    "signature": "(parentId: string | number | null, node: TreeNode) => Promise<void>",
+                    "parameters": [{
+                            "name": "parentId",
+                            "type": "string | number",
+                            "docs": ""
+                        }, {
+                            "name": "node",
+                            "type": "TreeNode",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "removeNode": {
+                "complexType": {
+                    "signature": "(id: string | number) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string | number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "moveNode": {
+                "complexType": {
+                    "signature": "(nodeId: string | number, targetId: string | number, position: \"before\" | \"inside\" | \"after\") => Promise<void>",
+                    "parameters": [{
+                            "name": "nodeId",
+                            "type": "string | number",
+                            "docs": ""
+                        }, {
+                            "name": "targetId",
+                            "type": "string | number",
+                            "docs": ""
+                        }, {
+                            "name": "position",
+                            "type": "\"after\" | \"before\" | \"inside\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "undo": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "redo": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "diffTrees": {
+                "complexType": {
+                    "signature": "(oldNodes: TreeNode[], newNodes: TreeNode[]) => Promise<TreeDiffResult>",
+                    "parameters": [{
+                            "name": "oldNodes",
+                            "type": "TreeNode[]",
+                            "docs": ""
+                        }, {
+                            "name": "newNodes",
+                            "type": "TreeNode[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TreeDiffResult": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeDiffResult",
+                            "referenceLocation": "TreeDiffResult"
+                        },
+                        "TreeNode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeNode",
+                            "referenceLocation": "TreeNode"
+                        }
+                    },
+                    "return": "Promise<TreeDiffResult>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getState": {
+                "complexType": {
+                    "signature": "() => Promise<TreeState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TreeState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeState",
+                            "referenceLocation": "TreeState"
+                        }
+                    },
+                    "return": "Promise<TreeState>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "restoreState": {
+                "complexType": {
+                    "signature": "(state: TreeState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "TreeState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TreeState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tree/types.ts::TreeState",
+                            "referenceLocation": "TreeState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "nodes",
+                "methodName": "parseNodes"
+            }, {
+                "propName": "expandAll",
+                "methodName": "parseNodes"
+            }, {
+                "propName": "collapseAll",
+                "methodName": "parseNodes"
+            }];
+    }
+}