@haiyue/ui 0.1.0

package/dist/tree.js

@@ -0,0 +1,942 @@
+import { GETreeModel } from './tree-model.js';
+import { GETreeNode } from './tree-node.js';
+export { GETreeNode } from './tree-node.js';
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const TREE_TOGGLE_ICON_PATHS = [
+    'M318.57 223.95l322.99 322.99c21.87 21.87 57.33 21.87 79.2 0 21.87-21.87 21.87-57.33 0-79.2l-323-322.99c-21.87-21.87-57.33-21.87-79.2 0-21.86 21.87-21.86 57.33 0.01 79.2z',
+    'M729.75 555.95L406.76 878.93c-21.87 21.87-57.33 21.87-79.2 0-21.87-21.87-21.87-57.33 0-79.2l322.99-322.99c21.87-21.87 57.33-21.87 79.2 0 21.87 21.88 21.87 57.34 0 79.21z',
+];
+const HIERARCHY_MEASURE_PREFIX = 'editor.hierarchy.';
+function measureHierarchyTreeStage(stage, operation) {
+    const startedAt = performance.now();
+    try {
+        return operation();
+    }
+    finally {
+        const name = `${HIERARCHY_MEASURE_PREFIX}${stage}`;
+        performance.clearMeasures(name);
+        performance.measure(name, { start: startedAt, end: performance.now() });
+    }
+}
+function createTreeToggleIconSvg() {
+    const svg = document.createElementNS(SVG_NAMESPACE, 'svg');
+    svg.setAttribute('class', 'toggle-icon');
+    svg.setAttribute('viewBox', '0 0 1024 1024');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('focusable', 'false');
+    for (const pathData of TREE_TOGGLE_ICON_PATHS) {
+        const path = document.createElementNS(SVG_NAMESPACE, 'path');
+        path.setAttribute('d', pathData);
+        path.setAttribute('fill', 'currentColor');
+        svg.append(path);
+    }
+    return svg;
+}
+export class GETree extends HTMLElement {
+    static VIRTUALIZATION_THRESHOLD = 160;
+    static ROW_HEIGHT = 28;
+    static OVERSCAN_ROWS = 8;
+    _root;
+    _style = document.createElement('style');
+    _list = document.createElement('div');
+    _rowCache = new Map();
+    _clipboard = [];
+    _data = [];
+    _selectedId = null;
+    _selectedIds = new Set();
+    _selectionAnchorId = null;
+    _activeId = null;
+    _expandedIds = new Set();
+    _model = new GETreeModel(this._expandedIds);
+    _dragNodeId = null;
+    _syncingSelectionAttributes = false;
+    _resizeObserver = null;
+    static get observedAttributes() {
+        return ['data', 'selected-id', 'selected-ids', 'allow-drag'];
+    }
+    constructor() {
+        super();
+        this._root = this.attachShadow({ mode: 'open' });
+        this._style.textContent = `
+      :host {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        justify-content: flex-start;
+        width: 100%;
+        min-height: 0;
+        color: var(--ge-tree-text-color, var(--ge-text-color, #c8d3e4));
+        background: var(--ge-panel-bg-color, #171d28);
+        font: 12px system-ui, sans-serif;
+        text-align: left;
+        user-select: none;
+        overflow: auto;
+      }
+      .list {
+        box-sizing: border-box;
+        width: 100%;
+        flex: 0 0 auto;
+        padding: 4px;
+      }
+      .row {
+        height: 28px;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        border-radius: 4px;
+        color: var(--ge-tree-text-color, var(--ge-text-color, #c8d3e4));
+        cursor: default;
+      }
+      .virtual-spacer {
+        width: 1px;
+        pointer-events: none;
+      }
+      .row:hover {
+        background: var(--ge-hover-bg-color, #222b3a);
+      }
+      .row.selected {
+        background: var(--ge-selected-bg-color, var(--ge-accent-strong-color, #255a91));
+        color: var(--ge-selected-text-color, #fff);
+      }
+      .row.active:not(.selected) {
+        background: var(--ge-tree-active-bg-color, var(--ge-hover-bg-color, #222b3a));
+        color: var(--ge-tree-active-text-color, var(--ge-tree-text-color, #dce8fb));
+      }
+      .row.active {
+        outline: var(--ge-tree-active-ring-width, 1px) solid var(--ge-tree-active-ring-color, var(--ge-focus-border-color, #3d6fa8));
+        outline-offset: -1px;
+      }
+      .toggle {
+        width: 18px;
+        height: 18px;
+        flex: 0 0 18px;
+        border: 0;
+        padding: 0;
+        background: transparent;
+        color: var(--ge-tree-icon-color, var(--ge-secondary-text-color, #8fa7c8));
+        cursor: pointer;
+        display: inline-grid;
+        place-items: center;
+      }
+      .toggle.empty {
+        cursor: default;
+        visibility: hidden;
+      }
+      .toggle-icon {
+        width: 12px;
+        height: 12px;
+        color: var(--ge-tree-icon-color, var(--ge-secondary-text-color, #8fa7c8));
+        transition: transform 0.16s ease, color 0.16s ease;
+      }
+      .toggle.expanded .toggle-icon {
+        transform: rotate(90deg);
+        color: var(--ge-tree-icon-active-color, #b9d4ff);
+      }
+      .row:hover .toggle-icon {
+        color: var(--ge-tree-icon-active-color, #b9d4ff);
+      }
+      .content {
+        min-width: 0;
+        flex: 1 1 auto;
+      }
+      .row.drop-before {
+        box-shadow: inset 0 2px 0 var(--ge-drop-indicator-color, #62a8ff);
+      }
+      .row.drop-after {
+        box-shadow: inset 0 -2px 0 var(--ge-drop-indicator-color, #62a8ff);
+      }
+      .row.drop-inside {
+        outline: 1px solid var(--ge-drop-indicator-color, #62a8ff);
+        background: var(--ge-drop-target-bg-color, #223650);
+      }
+    `;
+        this._list.className = 'list';
+        this._root.append(this._style, this._list);
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('tabindex'))
+            this.tabIndex = 0;
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'tree');
+        this._syncFromAttributes();
+        this.addEventListener('keydown', this._onKeyDown);
+        this._list.addEventListener('click', this._onListClick);
+        this._list.addEventListener('contextmenu', this._onListContextMenu);
+        this._list.addEventListener('dragstart', this._onListDragStart);
+        this._list.addEventListener('dragover', this._onListDragOver);
+        this._list.addEventListener('dragleave', this._onListDragLeave);
+        this._list.addEventListener('drop', this._onListDrop);
+        this._list.addEventListener('dragend', this._onListDragEnd);
+        this.addEventListener('scroll', this._onScroll, { passive: true });
+        if (typeof ResizeObserver !== 'undefined') {
+            this._resizeObserver = new ResizeObserver(() => this._render());
+            this._resizeObserver.observe(this);
+        }
+        this._render();
+    }
+    disconnectedCallback() {
+        this.removeEventListener('keydown', this._onKeyDown);
+        this._list.removeEventListener('click', this._onListClick);
+        this._list.removeEventListener('contextmenu', this._onListContextMenu);
+        this._list.removeEventListener('dragstart', this._onListDragStart);
+        this._list.removeEventListener('dragover', this._onListDragOver);
+        this._list.removeEventListener('dragleave', this._onListDragLeave);
+        this._list.removeEventListener('drop', this._onListDrop);
+        this._list.removeEventListener('dragend', this._onListDragEnd);
+        this.removeEventListener('scroll', this._onScroll);
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
+    }
+    attributeChangedCallback(name) {
+        if (name === 'data')
+            this._readDataAttribute();
+        if (this._syncingSelectionAttributes)
+            return;
+        if (!this._syncingSelectionAttributes) {
+            if (name === 'selected-id')
+                this._setSelectionFromSelectedIdAttribute();
+            if (name === 'selected-ids')
+                this._setSelectionFromSelectedIdsAttribute();
+        }
+        this._render();
+    }
+    get data() {
+        return this._data;
+    }
+    set data(value) {
+        this._data = Array.isArray(value) ? value : [];
+        this._seedExpanded(this._data);
+        this._model.setData(this._data);
+        this._render();
+    }
+    get selectedId() {
+        return this._selectedId;
+    }
+    set selectedId(value) {
+        this._setSelection(value ? [value] : [], value, false);
+    }
+    get selectedIds() {
+        return [...this._selectedIds];
+    }
+    set selectedIds(value) {
+        const ids = Array.isArray(value) ? value : [];
+        this._setSelection(ids, ids[ids.length - 1] ?? null, false);
+    }
+    get allowDrag() {
+        return this.hasAttribute('allow-drag');
+    }
+    set allowDrag(value) {
+        if (value)
+            this.setAttribute('allow-drag', '');
+        else
+            this.removeAttribute('allow-drag');
+    }
+    updateData(value) {
+        this.data = value;
+    }
+    expand(id) {
+        this._expandedIds.add(id);
+        this._model.invalidateVisibility();
+        this._render();
+    }
+    collapse(id) {
+        this._expandedIds.delete(id);
+        this._model.invalidateVisibility();
+        this._render();
+    }
+    toggle(id) {
+        if (this._expandedIds.has(id))
+            this._expandedIds.delete(id);
+        else
+            this._expandedIds.add(id);
+        this._model.invalidateVisibility();
+        this._render();
+    }
+    reveal(id) {
+        const indexed = this._model.getIndexedNode(id);
+        if (!indexed)
+            return false;
+        for (const ancestorId of indexed.ancestorIds)
+            this._expandedIds.add(ancestorId);
+        this._model.invalidateVisibility();
+        this._render();
+        this._setActiveId(id, true);
+        return this._model.visibleIndex.has(id);
+    }
+    copySelection() {
+        return this._copySelection();
+    }
+    pasteClipboard() {
+        return this._pasteClipboard();
+    }
+    deleteSelection() {
+        return this._deleteSelection();
+    }
+    cutSelection() {
+        if (!this._copySelection())
+            return false;
+        return this._deleteSelection();
+    }
+    _syncFromAttributes() {
+        this._readDataAttribute();
+        if (this.hasAttribute('selected-ids'))
+            this._setSelectionFromSelectedIdsAttribute();
+        else
+            this._setSelectionFromSelectedIdAttribute();
+    }
+    _readDataAttribute() {
+        const raw = this.getAttribute('data');
+        if (!raw) {
+            this._data = [];
+            this._model.setData(this._data);
+            return;
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            this._data = Array.isArray(parsed) ? parsed : [];
+            this._seedExpanded(this._data);
+            this._model.setData(this._data);
+        }
+        catch (error) {
+            console.warn('Invalid ge-tree data attribute.', error);
+        }
+    }
+    _seedExpanded(nodes) {
+        const visit = (items) => {
+            for (const node of items) {
+                if (node.expanded)
+                    this._expandedIds.add(node.id);
+                if (node.children)
+                    visit(node.children);
+            }
+        };
+        visit(nodes);
+    }
+    _render() {
+        this._ensureActiveVisible();
+        const visible = this._getVisibleFlatNodes();
+        const window = this._getRenderWindow(visible.length);
+        const visibleIds = new Set();
+        const fragment = document.createDocumentFragment();
+        if (window.start > 0)
+            fragment.append(this._createVirtualSpacer(window.start * GETree.ROW_HEIGHT));
+        for (let index = window.start; index < window.end; index++) {
+            const item = visible[index];
+            if (!item)
+                continue;
+            visibleIds.add(item.node.id);
+            const rendered = this._getOrCreateRow(item.node.id);
+            this._syncRow(rendered, item);
+            fragment.append(rendered.row);
+        }
+        if (window.end < visible.length) {
+            fragment.append(this._createVirtualSpacer((visible.length - window.end) * GETree.ROW_HEIGHT));
+        }
+        for (const [id, rendered] of this._rowCache) {
+            if (visibleIds.has(id))
+                continue;
+            rendered.row.remove();
+            this._rowCache.delete(id);
+        }
+        this._list.replaceChildren(fragment);
+    }
+    _getRenderWindow(itemCount) {
+        const viewportHeight = this.clientHeight;
+        if (itemCount < GETree.VIRTUALIZATION_THRESHOLD || viewportHeight <= 0)
+            return { start: 0, end: itemCount };
+        const first = Math.floor(this.scrollTop / GETree.ROW_HEIGHT);
+        const last = Math.ceil((this.scrollTop + viewportHeight) / GETree.ROW_HEIGHT);
+        return {
+            start: Math.max(0, first - GETree.OVERSCAN_ROWS),
+            end: Math.min(itemCount, last + GETree.OVERSCAN_ROWS),
+        };
+    }
+    _createVirtualSpacer(height) {
+        const spacer = document.createElement('div');
+        spacer.className = 'virtual-spacer';
+        spacer.style.height = `${height}px`;
+        spacer.setAttribute('aria-hidden', 'true');
+        return spacer;
+    }
+    _getVisibleFlatNodes() {
+        return this._model.getVisibleNodes();
+    }
+    _getVisibleIds() {
+        return this._model.getVisibleIds();
+    }
+    _getOrCreateRow(id) {
+        const cached = this._rowCache.get(id);
+        if (cached)
+            return cached;
+        const row = document.createElement('div');
+        const toggle = document.createElement('button');
+        const content = document.createElement('div');
+        const renderer = document.createElement('ge-tree-node');
+        row.className = 'row';
+        row.dataset.id = id;
+        toggle.type = 'button';
+        toggle.append(createTreeToggleIconSvg());
+        content.className = 'content';
+        content.append(renderer);
+        row.append(toggle, content);
+        const rendered = { row, toggle, content, renderer, rendererTag: 'ge-tree-node' };
+        this._rowCache.set(id, rendered);
+        return rendered;
+    }
+    _syncRow(rendered, item) {
+        const { node, depth } = item;
+        const hasChildren = Boolean(node.children?.length);
+        const expanded = this._expandedIds.has(node.id);
+        const selected = this._selectedIds.has(node.id);
+        const active = this._activeId === node.id;
+        const rendererTag = this._getRendererTag(node);
+        const { row, toggle, content } = rendered;
+        row.className = `row${selected ? ' selected' : ''}${active ? ' active' : ''}`;
+        row.dataset.id = node.id;
+        row.style.paddingLeft = `${depth * 16 + 4}px`;
+        row.draggable = this.allowDrag;
+        toggle.className = `${hasChildren ? 'toggle' : 'toggle empty'}${expanded ? ' expanded' : ''}`;
+        toggle.disabled = !hasChildren;
+        toggle.setAttribute('aria-hidden', hasChildren ? 'false' : 'true');
+        toggle.tabIndex = hasChildren ? 0 : -1;
+        if (rendered.rendererTag !== rendererTag) {
+            rendered.renderer = document.createElement(rendererTag);
+            rendered.rendererTag = rendererTag;
+            content.replaceChildren(rendered.renderer);
+        }
+        this._syncRenderer(rendered.renderer, node, depth, expanded, hasChildren, selected);
+    }
+    _getRendererTag(node) {
+        return typeof node.renderer === 'string' && node.renderer ? node.renderer : 'ge-tree-node';
+    }
+    _syncRenderer(el, node, depth, expanded, hasChildren, selected) {
+        el.node = node;
+        el.depth = depth;
+        el.selected = selected;
+        el.expanded = expanded;
+        el.hasChildren = hasChildren;
+        el.id = this._getTreeItemElementId(node.id);
+        if (!el.hasAttribute('role'))
+            el.setAttribute('role', 'treeitem');
+        el.setAttribute('aria-level', String(depth + 1));
+        if (hasChildren)
+            el.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+        else
+            el.removeAttribute('aria-expanded');
+        el.setAttribute('label', String(node.label ?? node.id));
+        if (node.icon)
+            el.setAttribute('icon', String(node.icon));
+        else
+            el.removeAttribute('icon');
+        if (selected) {
+            el.setAttribute('selected', '');
+            el.setAttribute('aria-selected', 'true');
+        }
+        else {
+            el.removeAttribute('selected');
+            el.setAttribute('aria-selected', 'false');
+        }
+    }
+    _syncRenderedSelection() {
+        for (const [id, rendered] of this._rowCache) {
+            const selected = this._selectedIds.has(id);
+            rendered.row.classList.toggle('selected', selected);
+            rendered.renderer.selected = selected;
+            if (selected) {
+                rendered.renderer.setAttribute('selected', '');
+                rendered.renderer.setAttribute('aria-selected', 'true');
+            }
+            else {
+                rendered.renderer.removeAttribute('selected');
+                rendered.renderer.setAttribute('aria-selected', 'false');
+            }
+        }
+    }
+    _syncRenderedActive() {
+        for (const [id, rendered] of this._rowCache) {
+            rendered.row.classList.toggle('active', this._activeId === id);
+        }
+        this._syncActiveDescendant();
+    }
+    _select(id, event) {
+        const visibleIds = this._getVisibleIds();
+        let ids;
+        if (event.shiftKey && this._selectionAnchorId) {
+            ids = this._getRangeSelection(visibleIds, this._selectionAnchorId, id);
+        }
+        else if (event.metaKey || event.ctrlKey) {
+            const next = new Set(this._selectedIds);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            ids = [...next];
+            this._selectionAnchorId = id;
+        }
+        else {
+            ids = [id];
+            this._selectionAnchorId = id;
+        }
+        this._setSelection(ids, id, true);
+    }
+    _setSelection(ids, selectedId, emit) {
+        const uniqueIds = [...new Set(ids)].filter(id => this._model.index.has(id));
+        this._selectedIds = new Set(uniqueIds);
+        this._selectedId = selectedId && this._selectedIds.has(selectedId)
+            ? selectedId
+            : uniqueIds[uniqueIds.length - 1] ?? null;
+        if (this._selectedId && !this._selectionAnchorId)
+            this._selectionAnchorId = this._selectedId;
+        this._setActiveId(this._selectedId, false);
+        this._syncSelectionAttributes();
+        if (this._model.isVisibilityDirty)
+            this._render();
+        else
+            this._syncRenderedSelection();
+        if (!emit)
+            return;
+        const node = this._selectedId ? this._model.getIndexedNode(this._selectedId)?.node ?? null : null;
+        const nodes = uniqueIds
+            .map(id => this._model.getIndexedNode(id)?.node ?? null)
+            .filter((item) => item !== null);
+        this.dispatchEvent(new CustomEvent('selection-change', {
+            detail: { selectedId: this._selectedId, node, selectedIds: uniqueIds, nodes },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _syncSelectionAttributes() {
+        this._syncingSelectionAttributes = true;
+        if (this._selectedId === null)
+            this.removeAttribute('selected-id');
+        else
+            this.setAttribute('selected-id', this._selectedId);
+        if (this._selectedIds.size === 0)
+            this.removeAttribute('selected-ids');
+        else
+            this.setAttribute('selected-ids', JSON.stringify([...this._selectedIds]));
+        this._syncingSelectionAttributes = false;
+    }
+    _setSelectionFromSelectedIdAttribute() {
+        const id = this.getAttribute('selected-id');
+        this._selectedIds = id ? new Set([id]) : new Set();
+        this._selectedId = id;
+        this._selectionAnchorId = id;
+        this._activeId = id;
+    }
+    _setSelectionFromSelectedIdsAttribute() {
+        const raw = this.getAttribute('selected-ids');
+        if (!raw) {
+            this._setSelectionFromSelectedIdAttribute();
+            return;
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            const ids = Array.isArray(parsed) ? parsed.map(String) : [];
+            this._selectedIds = new Set(ids);
+            this._selectedId = ids[ids.length - 1] ?? null;
+            this._selectionAnchorId = this._selectedId;
+            this._activeId = this._selectedId;
+        }
+        catch (error) {
+            console.warn('Invalid ge-tree selected-ids attribute.', error);
+            this._setSelectionFromSelectedIdAttribute();
+        }
+    }
+    _getRangeSelection(visibleIds, fromId, toId) {
+        this._getVisibleFlatNodes();
+        const fromIndex = this._model.visibleIndex.get(fromId) ?? -1;
+        const toIndex = this._model.visibleIndex.get(toId) ?? -1;
+        if (fromIndex < 0 || toIndex < 0)
+            return [toId];
+        const start = Math.min(fromIndex, toIndex);
+        const end = Math.max(fromIndex, toIndex);
+        return visibleIds.slice(start, end + 1);
+    }
+    _getEventRow(target) {
+        if (!(target instanceof Element))
+            return null;
+        const row = target.closest('.row');
+        return row && this._list.contains(row) ? row : null;
+    }
+    _getRowNode(row) {
+        const id = row.dataset.id;
+        return id ? this._model.getIndexedNode(id)?.node ?? null : null;
+    }
+    _onListClick = (event) => {
+        const row = this._getEventRow(event.target);
+        if (!row)
+            return;
+        const node = this._getRowNode(row);
+        if (!node)
+            return;
+        const toggle = event.target instanceof Element ? event.target.closest('.toggle') : null;
+        if (toggle && row.contains(toggle)) {
+            event.stopPropagation();
+            if (node.children?.length)
+                this.toggle(node.id);
+            return;
+        }
+        this.focus();
+        this._setActiveId(node.id, false);
+        this._select(node.id, event);
+    };
+    _onListContextMenu = (event) => {
+        const row = this._getEventRow(event.target);
+        if (!row)
+            return;
+        const node = this._getRowNode(row);
+        if (!node)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.focus();
+        this._setActiveId(node.id, false);
+        if (!this._selectedIds.has(node.id))
+            this._setSelection([node.id], node.id, true);
+        this.dispatchEvent(new CustomEvent('node-context-menu', {
+            detail: {
+                id: node.id,
+                node,
+                selectedIds: this.selectedIds,
+                clientX: event.clientX,
+                clientY: event.clientY,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    };
+    _onListDragStart = (event) => {
+        const row = this._getEventRow(event.target);
+        if (!row || !this.allowDrag || !row.dataset.id)
+            return;
+        this._onDragStart(event, row.dataset.id);
+    };
+    _onListDragOver = (event) => {
+        const row = this._getEventRow(event.target);
+        if (!row || !this.allowDrag)
+            return;
+        this._onDragOver(event, row);
+    };
+    _onListDragLeave = (event) => {
+        const row = this._getEventRow(event.target);
+        if (row)
+            this._clearDropClass(row);
+    };
+    _onListDrop = (event) => {
+        const row = this._getEventRow(event.target);
+        if (!row || !this.allowDrag || !row.dataset.id)
+            return;
+        this._onDrop(event, row, row.dataset.id);
+    };
+    _onListDragEnd = () => {
+        this._clearAllDropClasses();
+    };
+    _onDragStart(event, id) {
+        this._dragNodeId = id;
+        event.dataTransfer?.setData('text/plain', id);
+        if (event.dataTransfer)
+            event.dataTransfer.effectAllowed = 'move';
+    }
+    _onDragOver(event, row) {
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'move';
+        this._clearAllDropClasses();
+        row.classList.add(this._getDropClass(event, row));
+    }
+    _onDrop(event, row, targetId) {
+        performance.clearMarks(`${HIERARCHY_MEASURE_PREFIX}input-start`);
+        performance.mark(`${HIERARCHY_MEASURE_PREFIX}input-start`);
+        event.preventDefault();
+        const sourceId = this._dragNodeId ?? event.dataTransfer?.getData('text/plain') ?? null;
+        this._clearAllDropClasses();
+        this._dragNodeId = null;
+        if (!sourceId || sourceId === targetId)
+            return;
+        const position = this._getDropPosition(event, row);
+        if (measureHierarchyTreeStage('index-update', () => this._model.moveNode(sourceId, targetId, position))) {
+            measureHierarchyTreeStage('tree-rebuild', () => this._render());
+            this.dispatchEvent(new CustomEvent('data-change', {
+                detail: { data: this._data, action: 'drop', sourceId, targetId, dropPosition: position },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    _onKeyDown = (event) => {
+        if (event.defaultPrevented || this._isEditableTarget(event.target))
+            return;
+        const key = event.key.toLowerCase();
+        const command = event.metaKey || event.ctrlKey;
+        if (command && key === 'c') {
+            if (this._copySelection())
+                event.preventDefault();
+            return;
+        }
+        if (command && key === 'v') {
+            if (this._pasteClipboard())
+                event.preventDefault();
+            return;
+        }
+        if (event.key === 'Delete' || event.key === 'Backspace') {
+            if (this._deleteSelection())
+                event.preventDefault();
+            return;
+        }
+        if (this._handleNavigationKey(event))
+            event.preventDefault();
+    };
+    _handleNavigationKey(event) {
+        if (event.altKey || event.metaKey || event.ctrlKey)
+            return false;
+        const visibleIds = this._getVisibleIds();
+        if (visibleIds.length === 0)
+            return false;
+        const activeId = this._getActiveVisibleId() ?? visibleIds[0];
+        if (activeId === undefined)
+            return false;
+        const activeIndex = this._model.visibleIndex.get(activeId) ?? 0;
+        if (event.key === 'ArrowDown') {
+            this._setActiveId(visibleIds[Math.min(activeIndex + 1, visibleIds.length - 1)] ?? activeId);
+            return true;
+        }
+        if (event.key === 'ArrowUp') {
+            this._setActiveId(visibleIds[Math.max(activeIndex - 1, 0)] ?? activeId);
+            return true;
+        }
+        if (event.key === 'Home') {
+            this._setActiveId(visibleIds[0] ?? activeId);
+            return true;
+        }
+        if (event.key === 'End') {
+            this._setActiveId(visibleIds[visibleIds.length - 1] ?? activeId);
+            return true;
+        }
+        if (event.key === 'ArrowRight') {
+            return this._moveActiveRight(activeId);
+        }
+        if (event.key === 'ArrowLeft') {
+            return this._moveActiveLeft(activeId);
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            this._setSelection([activeId], activeId, true);
+            return true;
+        }
+        return false;
+    }
+    _moveActiveRight(activeId) {
+        const indexed = this._model.getIndexedNode(activeId);
+        if (!indexed?.node.children?.length)
+            return false;
+        if (!this._expandedIds.has(activeId)) {
+            this._expandedIds.add(activeId);
+            this._model.invalidateVisibility();
+            this._render();
+            this._scrollActiveIntoView();
+            return true;
+        }
+        const visibleIds = this._getVisibleIds();
+        const activeIndex = this._model.visibleIndex.get(activeId) ?? -1;
+        const nextId = visibleIds[activeIndex + 1];
+        if (nextId)
+            this._setActiveId(nextId);
+        return Boolean(nextId);
+    }
+    _moveActiveLeft(activeId) {
+        const indexed = this._model.getIndexedNode(activeId);
+        if (!indexed)
+            return false;
+        if (indexed.node.children?.length && this._expandedIds.has(activeId)) {
+            this._expandedIds.delete(activeId);
+            this._model.invalidateVisibility();
+            this._render();
+            this._scrollActiveIntoView();
+            return true;
+        }
+        const parentId = indexed.parent?.id;
+        if (parentId)
+            this._setActiveId(parentId);
+        return Boolean(parentId);
+    }
+    _getActiveVisibleId() {
+        this._getVisibleFlatNodes();
+        if (this._activeId && this._model.visibleIndex.has(this._activeId))
+            return this._activeId;
+        if (this._selectedId && this._model.visibleIndex.has(this._selectedId))
+            return this._selectedId;
+        return null;
+    }
+    _ensureActiveVisible() {
+        const visibleIds = this._getVisibleIds();
+        if (this._activeId && this._model.visibleIndex.has(this._activeId)) {
+            this._syncActiveDescendant();
+            return;
+        }
+        this._activeId = this._selectedId && this._model.visibleIndex.has(this._selectedId)
+            ? this._selectedId
+            : visibleIds[0] ?? null;
+        this._syncActiveDescendant();
+    }
+    _setActiveId(id, scroll = true) {
+        this._getVisibleFlatNodes();
+        const nextId = id && this._model.visibleIndex.has(id) ? id : this._getActiveVisibleId();
+        if (this._activeId === nextId) {
+            if (scroll)
+                this._scrollActiveIntoView();
+            return;
+        }
+        this._activeId = nextId;
+        this._syncRenderedActive();
+        if (scroll)
+            this._scrollActiveIntoView();
+    }
+    _syncActiveDescendant() {
+        if (this._activeId)
+            this.setAttribute('aria-activedescendant', this._getTreeItemElementId(this._activeId));
+        else
+            this.removeAttribute('aria-activedescendant');
+    }
+    _getTreeItemElementId(id) {
+        return `ge-tree-item-${encodeURIComponent(id)}`;
+    }
+    _scrollActiveIntoView() {
+        if (!this._activeId)
+            return;
+        let rendered = this._rowCache.get(this._activeId);
+        if (!rendered && this.clientHeight > 0) {
+            this._getVisibleFlatNodes();
+            const index = this._model.visibleIndex.get(this._activeId);
+            if (index !== undefined) {
+                const rowTop = index * GETree.ROW_HEIGHT;
+                const rowBottom = rowTop + GETree.ROW_HEIGHT;
+                if (rowTop < this.scrollTop)
+                    this.scrollTop = rowTop;
+                else if (rowBottom > this.scrollTop + this.clientHeight)
+                    this.scrollTop = rowBottom - this.clientHeight;
+                this._render();
+                rendered = this._rowCache.get(this._activeId);
+            }
+        }
+        rendered?.row.scrollIntoView({ block: 'nearest' });
+    }
+    _onScroll = () => {
+        if (this._getVisibleFlatNodes().length >= GETree.VIRTUALIZATION_THRESHOLD)
+            this._render();
+    };
+    _isEditableTarget(target) {
+        if (!(target instanceof HTMLElement))
+            return false;
+        const tag = target.tagName.toLowerCase();
+        return tag === 'input' || tag === 'textarea' || tag === 'select' || target.isContentEditable;
+    }
+    _copySelection() {
+        const nodes = this._getSelectedTopLevelNodes();
+        if (nodes.length === 0)
+            return false;
+        this._clipboard = nodes.map(node => this._cloneNode(node));
+        return true;
+    }
+    _pasteClipboard() {
+        if (this._clipboard.length === 0)
+            return false;
+        const target = this._selectedId ? this._model.findNode(this._selectedId) : null;
+        const targetList = target ? (target.node.children ??= []) : this._data;
+        if (target) {
+            this._expandedIds.add(target.node.id);
+        }
+        const existingIds = new Set(this._model.index.keys());
+        const pastedNodes = this._clipboard.map(node => this._cloneNodeWithUniqueIds(node, existingIds));
+        targetList.push(...pastedNodes);
+        this._model.setData(this._data);
+        const pastedIds = pastedNodes.map(node => node.id);
+        this._setSelection(pastedIds, pastedIds[pastedIds.length - 1] ?? null, true);
+        this.dispatchEvent(new CustomEvent('data-change', {
+            detail: { data: this._data, action: 'paste', targetId: target?.node.id ?? null, pastedNodes },
+            bubbles: true,
+            composed: true,
+        }));
+        return true;
+    }
+    _deleteSelection() {
+        const ids = this._getTopLevelSelectedIds();
+        if (ids.length === 0)
+            return false;
+        const deletedIds = [];
+        for (const id of ids) {
+            if (this._model.removeNode(id))
+                deletedIds.push(id);
+        }
+        if (deletedIds.length === 0)
+            return false;
+        this._model.setData(this._data);
+        this._setSelection([], null, true);
+        this.dispatchEvent(new CustomEvent('data-change', {
+            detail: { data: this._data, action: 'delete', deletedIds },
+            bubbles: true,
+            composed: true,
+        }));
+        return true;
+    }
+    _cloneNode(node) {
+        return typeof structuredClone === 'function'
+            ? structuredClone(node)
+            : JSON.parse(JSON.stringify(node));
+    }
+    _cloneNodeWithUniqueIds(node, existingIds) {
+        const clone = this._cloneNode(node);
+        const assignIds = (item) => {
+            item.id = this._makeUniqueId(item.id, existingIds);
+            existingIds.add(item.id);
+            item.children?.forEach(assignIds);
+        };
+        assignIds(clone);
+        return clone;
+    }
+    _makeUniqueId(baseId, existingIds) {
+        const base = `${baseId}-copy`;
+        if (!existingIds.has(base))
+            return base;
+        let index = 2;
+        while (existingIds.has(`${base}-${index}`))
+            index++;
+        return `${base}-${index}`;
+    }
+    _getSelectedTopLevelNodes() {
+        return this._getTopLevelSelectedIds()
+            .map(id => this._model.getIndexedNode(id)?.node ?? null)
+            .filter((node) => node !== null);
+    }
+    _getTopLevelSelectedIds() {
+        return this._model.topLevelSelection(this._selectedIds);
+    }
+    _getDropPosition(event, row) {
+        const rect = row.getBoundingClientRect();
+        const y = event.clientY - rect.top;
+        if (y < rect.height * 0.28)
+            return 'before';
+        if (y > rect.height * 0.72)
+            return 'after';
+        return 'inside';
+    }
+    _getDropClass(event, row) {
+        const position = this._getDropPosition(event, row);
+        return `drop-${position}`;
+    }
+    _clearDropClass(row) {
+        row.classList.remove('drop-before', 'drop-after', 'drop-inside');
+    }
+    _clearAllDropClasses() {
+        this._list.querySelectorAll('.row').forEach(row => this._clearDropClass(row));
+    }
+}
+export function defineTreeComponents() {
+    if (!customElements.get('ge-tree-node')) {
+        customElements.define('ge-tree-node', GETreeNode);
+    }
+    if (!customElements.get('ge-tree')) {
+        customElements.define('ge-tree', GETree);
+    }
+}
+//# sourceMappingURL=tree.js.map