dockview-core 7.0.4 → 8.1.0

package/dist/esm/dockview/components/titlebar/tabs.js

@@ -1,1653 +0,0 @@
-import { getPanelData } from '../../../dnd/dataTransfer';
-import { addClasses, isChildEntirelyVisibleWithinParent, OverflowObserver, removeClasses, toggleClass, } from '../../../dom';
-import { addDisposableListener, Emitter } from '../../../events';
-import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
-import { Scrollbar } from '../../../scrollbar';
-import { PointerDragController } from '../../../dnd/pointer/pointerDragController';
-import { DockviewWillShowOverlayLocationEvent } from '../../events';
-import { Tab } from '../tab/tab';
-import { TabGroupManager } from './tabGroups';
-export class Tabs extends CompositeDisposable {
-    get showTabsOverflowControl() {
-        return this._showTabsOverflowControl;
-    }
-    set showTabsOverflowControl(value) {
-        if (this._showTabsOverflowControl == value) {
-            return;
-        }
-        this._showTabsOverflowControl = value;
-        if (value) {
-            const observer = new OverflowObserver(this._tabsList);
-            this._observerDisposable.value = new CompositeDisposable(observer, observer.onDidChange((event) => {
-                const hasOverflow = event.hasScrollX || event.hasScrollY;
-                this.toggleDropdown({ reset: !hasOverflow });
-                if (this._tabGroupManager.groupUnderlines.size > 0) {
-                    this._tabGroupManager.positionUnderlines();
-                }
-            }), addDisposableListener(this._tabsList, 'scroll', () => {
-                this.toggleDropdown({ reset: false });
-                if (this._tabGroupManager.groupUnderlines.size > 0) {
-                    this._tabGroupManager.positionUnderlines();
-                }
-            }));
-        }
-    }
-    get element() {
-        return this._element;
-    }
-    set voidContainer(el) {
-        var _a;
-        (_a = this._voidContainerListeners) === null || _a === void 0 ? void 0 : _a.dispose();
-        this._voidContainerListeners = null;
-        this._voidContainer = el;
-        if (el) {
-            this._voidContainerListeners = new CompositeDisposable(addDisposableListener(el, 'dragover', (event) => {
-                if (this._animState) {
-                    event.preventDefault();
-                }
-            }), addDisposableListener(el, 'drop', (event) => {
-                var _a;
-                if (((_a = this._animState) === null || _a === void 0 ? void 0 : _a.sourceTabGroupId) &&
-                    this._animState.currentInsertionIndex !== null) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    this.handleVoidDrop();
-                }
-            }));
-        }
-    }
-    /**
-     * Handle a drop that occurred on the void container (empty header
-     * space to the right of the tabs). Returns `true` if the drop was
-     * consumed by an active group drag, `false` otherwise.
-     */
-    handleVoidDrop() {
-        var _a, _b;
-        if (!((_a = this._animState) === null || _a === void 0 ? void 0 : _a.sourceTabGroupId)) {
-            return false;
-        }
-        const sourceTabGroupId = this._animState.sourceTabGroupId;
-        const insertionIndex = (_b = this._animState.currentInsertionIndex) !== null && _b !== void 0 ? _b : this._tabs.length;
-        this._animState = null;
-        this._commitGroupMove(sourceTabGroupId, insertionIndex);
-        return true;
-    }
-    get panels() {
-        return this._tabs.map((_) => _.value.panel.id);
-    }
-    get size() {
-        return this._tabs.length;
-    }
-    get tabs() {
-        return this._tabs.map((_) => _.value);
-    }
-    get direction() {
-        return this._direction;
-    }
-    set direction(value) {
-        if (this._direction === value) {
-            return;
-        }
-        this._direction = value;
-        this._tabsList.setAttribute('aria-orientation', value === 'vertical' ? 'vertical' : 'horizontal');
-        if (this._scrollbar) {
-            this._scrollbar.orientation = value;
-        }
-        removeClasses(this._tabsList, 'dv-horizontal', 'dv-vertical');
-        if (value === 'vertical') {
-            addClasses(this._tabsList, 'dv-tabs-container-vertical', 'dv-vertical');
-        }
-        else {
-            removeClasses(this._tabsList, 'dv-tabs-container-vertical');
-            addClasses(this._tabsList, 'dv-horizontal');
-        }
-        for (const tab of this._tabs) {
-            tab.value.setDirection(value);
-        }
-        this._tabGroupManager.updateDirection();
-    }
-    constructor(group, accessor, options) {
-        super();
-        this.group = group;
-        this.accessor = accessor;
-        this._observerDisposable = new MutableDisposable();
-        this._scrollbar = null;
-        this._tabs = [];
-        this._tabMap = new Map();
-        this.selectedIndex = -1;
-        this._showTabsOverflowControl = false;
-        this._direction = 'horizontal';
-        this._animState = null;
-        this._pendingMarginCleanups = new Map();
-        this._pendingCollapse = false;
-        this._flipTransitionCleanup = null;
-        this._voidContainer = null;
-        this._voidContainerListeners = null;
-        this._extendedDropZone = null;
-        this._pointerInsideTabsList = false;
-        this._onTabDragStart = new Emitter();
-        this.onTabDragStart = this._onTabDragStart.event;
-        this._onDrop = new Emitter();
-        this.onDrop = this._onDrop.event;
-        this._onWillShowOverlay = new Emitter();
-        this.onWillShowOverlay = this._onWillShowOverlay.event;
-        this._onOverflowTabsChange = new Emitter();
-        this.onOverflowTabsChange = this._onOverflowTabsChange.event;
-        this._tabsList = document.createElement('div');
-        this._tabsList.className = 'dv-tabs-container';
-        // WAI-ARIA Tabs pattern: the strip of tabs is the tablist.
-        this._tabsList.setAttribute('role', 'tablist');
-        this._tabsList.setAttribute('aria-orientation', this._direction === 'vertical' ? 'vertical' : 'horizontal');
-        this.showTabsOverflowControl = options.showTabsOverflowControl;
-        if (accessor.options.scrollbars === 'native') {
-            this._element = this._tabsList;
-        }
-        else {
-            this._scrollbar = new Scrollbar(this._tabsList);
-            this._scrollbar.orientation = this.direction;
-            this._element = this._scrollbar.element;
-            this.addDisposables(this._scrollbar);
-        }
-        this._tabGroupManager = new TabGroupManager({
-            group: this.group,
-            accessor: this.accessor,
-            tabsList: this._tabsList,
-            getTabs: () => this._tabs,
-            getTabMap: () => this._tabMap,
-            getDirection: () => this._direction,
-        }, {
-            onChipContextMenu: (tabGroup, event) => {
-                var _a;
-                (_a = this.accessor.contextMenuService) === null || _a === void 0 ? void 0 : _a.showForChip(tabGroup, this.group, event);
-            },
-            onChipDragStart: (tabGroup, chip, event) => {
-                this._handleChipDragStart(tabGroup, chip, event);
-            },
-            onChipDragEnd: () => {
-                // HTML5 chip dragend (incl. cancels). The Html5DragSource
-                // owns the listener on the chip element, so this fires
-                // even if the chip was detached cross-group — the
-                // element keeps its listeners until the source is
-                // disposed. resetDragAnimation is a no-op after a
-                // successful drop (anim state already null) thanks to
-                // the gating inside it.
-                this.resetDragAnimation();
-            },
-            onChipDrop: (tabGroup, event) => {
-                this._handleChipDrop(tabGroup, event);
-            },
-        });
-        this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, {
-            dispose: () => {
-                var _a;
-                (_a = this._flipTransitionCleanup) === null || _a === void 0 ? void 0 : _a.call(this);
-            },
-        }, 
-        // Pointer-side cleanup: when any pointer drag ends, tear
-        // down smooth-reorder anim state the dragover bridge may
-        // have installed. The chip's pointer drag source handles
-        // its own transfer payload + iframe-shield cleanup.
-        PointerDragController.getInstance().onDragEnd(() => {
-            this._pointerInsideTabsList = false;
-            this.resetDragAnimation();
-        }), 
-        // Pointer-event mirror of the HTML5 dragover / dragleave handlers
-        // below. Drives smooth-reorder for `dndStrategy: 'pointer'` and
-        // for touch drags in `'auto'`.
-        PointerDragController.getInstance().onDragMove((e) => {
-            this._handlePointerDragMove(e.clientX, e.clientY);
-        }), addDisposableListener(this.element, 'pointerdown', (event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            const isLeftClick = event.button === 0;
-            if (isLeftClick) {
-                this.accessor.doSetGroupActive(this.group);
-            }
-        }), 
-        // Trackpad / wheel forwarding. The strip scrolls along its own
-        // axis (x for horizontal headers, y for vertical), so deltaY
-        // from a plain mouse wheel maps onto the strip's axis too —
-        // this gives the VS Code-style "scroll over tab bar to page
-        // through tabs" feel. We only consume the event when the strip
-        // is actually overflowing in the direction the user wheeled in,
-        // so a wheel at the edge of a non-overflowing strip still
-        // bubbles up and scrolls the page. `{ passive: false }` is
-        // required because we call preventDefault().
-        addDisposableListener(this._tabsList, 'wheel', (event) => {
-            const isVertical = this._direction === 'vertical';
-            const primary = isVertical
-                ? event.deltaY || event.deltaX
-                : event.deltaX || event.deltaY;
-            if (primary === 0) {
-                return;
-            }
-            const max = isVertical
-                ? this._tabsList.scrollHeight -
-                    this._tabsList.clientHeight
-                : this._tabsList.scrollWidth -
-                    this._tabsList.clientWidth;
-            if (max <= 0) {
-                return;
-            }
-            const current = isVertical
-                ? this._tabsList.scrollTop
-                : this._tabsList.scrollLeft;
-            // At the edge in the wheel direction: let the page
-            // scroll instead of trapping the gesture.
-            if ((primary < 0 && current <= 0) ||
-                (primary > 0 && current >= max)) {
-                return;
-            }
-            event.preventDefault();
-            // Custom-scrollbar mode wraps the tabs list and installs
-            // its own wheel listener that rewrites scrollLeft from a
-            // deltaY-only tracker. Without stopPropagation that
-            // handler would clobber our deltaX-aware update.
-            event.stopPropagation();
-            if (isVertical) {
-                this._tabsList.scrollTop = current + primary;
-            }
-            else {
-                this._tabsList.scrollLeft = current + primary;
-            }
-        }, { passive: false }), 
-        // WAI-ARIA Tabs keyboard pattern: arrow keys move the roving
-        // focus along the strip, Home/End jump to the ends, and
-        // Enter/Space activate the focused tab (manual activation, so
-        // arrowing through tabs doesn't switch panels until committed).
-        addDisposableListener(this._tabsList, 'keydown', (event) => {
-            this._onKeyDown(event);
-        }), addDisposableListener(this._tabsList, 'dragover', (event) => {
-            if (this._processDragOver(event.clientX)) {
-                // Allow `drop` to fire on the tabs list container.
-                event.preventDefault();
-            }
-        }, true), addDisposableListener(this._tabsList, 'dragleave', (event) => {
-            this._processDragLeave(event.relatedTarget);
-        }, true), addDisposableListener(this._tabsList, 'dragend', () => {
-            this.resetDragAnimation();
-        }), addDisposableListener(this._tabsList, 'drop', (event) => {
-            var _a, _b, _c;
-            if (!this._animState ||
-                this._animState.currentInsertionIndex === null) {
-                return;
-            }
-            // In non-smooth mode only handle group drags here;
-            // individual tab drops are handled by tab Droptargets.
-            if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) !==
-                'smooth' &&
-                !this._animState.sourceTabGroupId) {
-                return;
-            }
-            event.stopPropagation();
-            event.preventDefault();
-            // The capturing stopPropagation above prevents the
-            // individual tab's Droptarget.onDrop from firing, so
-            // the anchor overlay won't be cleared by that path.
-            // Clear it explicitly here before processing the drop.
-            (_c = (_b = this.group.model.dropTargetContainer) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.clear();
-            const animState = this._animState;
-            this._animState = null;
-            this._pendingCollapse = false;
-            // Handle group drag (entire group repositioned)
-            if (animState.sourceTabGroupId) {
-                this._commitGroupMove(animState.sourceTabGroupId, animState.currentInsertionIndex);
-                return;
-            }
-            const insertionIndex = animState.currentInsertionIndex;
-            const sourceIndex = animState.sourceIndex;
-            const adjustedIndex = insertionIndex -
-                (sourceIndex !== -1 && sourceIndex < insertionIndex
-                    ? 1
-                    : 0);
-            const sourceCurrentGroup = this.group.model.getTabGroupForPanel(animState.sourceTabId);
-            if (adjustedIndex === sourceIndex &&
-                !animState.targetTabGroupId &&
-                !sourceCurrentGroup) {
-                this._uncollapsSourceTab(animState.sourceTabId);
-                this.resetTabTransforms();
-                return;
-            }
-            this._uncollapsSourceTab(animState.sourceTabId);
-            const firstPositions = this.snapshotTabPositions();
-            this.resetTabTransforms();
-            this._onDrop.fire({
-                event,
-                index: adjustedIndex,
-                targetTabGroupId: animState.targetTabGroupId,
-            });
-            this.runFlipAnimation(firstPositions, animState.sourceTabId, animState.sourceIndex === -1, {
-                from: Math.min(sourceIndex, adjustedIndex),
-                to: Math.max(sourceIndex, adjustedIndex),
-            });
-        }, true), Disposable.from(() => {
-            var _a;
-            (_a = this._voidContainerListeners) === null || _a === void 0 ? void 0 : _a.dispose();
-            this.resetDragAnimation();
-            this._tabGroupManager.disposeAll();
-            for (const { value, disposable } of this._tabs) {
-                disposable.dispose();
-                value.dispose();
-            }
-            this._tabs = [];
-            this._tabMap.clear();
-        }));
-    }
-    indexOf(id) {
-        return this._tabs.findIndex((tab) => tab.value.panel.id === id);
-    }
-    /** DOM id of the tab element for a panel — for the tabpanel's `aria-labelledby`. */
-    getTabId(panelId) {
-        var _a;
-        return (_a = this._tabMap.get(panelId)) === null || _a === void 0 ? void 0 : _a.value.element.id;
-    }
-    isActive(tab) {
-        return (this.selectedIndex > -1 &&
-            this._tabs[this.selectedIndex].value === tab);
-    }
-    _onKeyDown(event) {
-        // Only handle when a tab element itself is focused — never hijack keys
-        // typed inside a custom tab renderer's own controls (inputs etc.).
-        const index = this._tabs.findIndex((tab) => tab.value.element === event.target);
-        if (index === -1) {
-            return;
-        }
-        const isVertical = this._direction === 'vertical';
-        const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
-        const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
-        const last = this._tabs.length - 1;
-        switch (event.key) {
-            case nextKey:
-                event.preventDefault();
-                this._focusTab(Math.min(index + 1, last));
-                break;
-            case prevKey:
-                event.preventDefault();
-                this._focusTab(Math.max(index - 1, 0));
-                break;
-            case 'Home':
-                event.preventDefault();
-                this._focusTab(0);
-                break;
-            case 'End':
-                event.preventDefault();
-                this._focusTab(last);
-                break;
-            case 'Enter':
-            case ' ':
-                // Manual activation of the focused tab.
-                event.preventDefault();
-                this.accessor.withOrigin('user', () => this._tabs[index].value.panel.api.setActive());
-                break;
-            case 'Delete':
-            case 'Backspace':
-                // Close the focused tab (Backspace covers macOS, where the
-                // primary delete key reports as Backspace).
-                event.preventDefault();
-                this._closeTab(index);
-                break;
-        }
-    }
-    /**
-     * Close the tab at `index` and move roving focus to a neighbouring tab so
-     * keyboard focus stays in the tablist.
-     */
-    _closeTab(index) {
-        var _a, _b, _c, _d, _e;
-        const tab = (_a = this._tabs[index]) === null || _a === void 0 ? void 0 : _a.value;
-        if (!tab) {
-            return;
-        }
-        // Resolve the post-close focus target before closing mutates the list:
-        // prefer the next tab, otherwise the previous.
-        const neighbourId = (_e = ((_c = (_b = this._tabs[index + 1]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : (_d = this._tabs[index - 1]) === null || _d === void 0 ? void 0 : _d.value)) === null || _e === void 0 ? void 0 : _e.panel.id;
-        tab.panel.api.close();
-        if (neighbourId !== undefined) {
-            const nextIndex = this._tabs.findIndex((t) => t.value.panel.id === neighbourId);
-            if (nextIndex > -1) {
-                this._focusTab(nextIndex);
-            }
-        }
-    }
-    /** Move the roving focus to the tab at `index` (updates tabindex + DOM focus). */
-    _focusTab(index) {
-        for (let i = 0; i < this._tabs.length; i++) {
-            this._tabs[i].value.element.tabIndex = i === index ? 0 : -1;
-        }
-        this._tabs[index].value.element.focus();
-    }
-    /** Move DOM focus to the active tab — the entry point into the tablist. */
-    focusActiveTab() {
-        var _a;
-        if (this._tabs.length === 0) {
-            return;
-        }
-        const activeId = (_a = this.group.activePanel) === null || _a === void 0 ? void 0 : _a.id;
-        const activeIndex = activeId
-            ? this._tabs.findIndex((t) => t.value.panel.id === activeId)
-            : -1;
-        this._focusTab(activeIndex > -1 ? activeIndex : 0);
-    }
-    setActivePanel(panel) {
-        const isVertical = this._direction === 'vertical';
-        let running = 0;
-        for (const tab of this._tabs) {
-            const isActivePanel = panel.id === tab.value.panel.id;
-            tab.value.setActive(isActivePanel);
-            if (isActivePanel) {
-                const element = tab.value.element;
-                const parentElement = element.parentElement;
-                if (isVertical) {
-                    if (running < parentElement.scrollTop ||
-                        running + element.clientHeight >
-                            parentElement.scrollTop + parentElement.clientHeight) {
-                        parentElement.scrollTop = running;
-                    }
-                }
-                else if (running < parentElement.scrollLeft ||
-                    running + element.clientWidth >
-                        parentElement.scrollLeft + parentElement.clientWidth) {
-                    parentElement.scrollLeft = running;
-                }
-            }
-            running += isVertical
-                ? tab.value.element.clientHeight
-                : tab.value.element.clientWidth;
-        }
-        // Reposition underlines so the wrap-around follows the new active tab
-        if (this._tabGroupManager.groupUnderlines.size > 0) {
-            this._tabGroupManager.positionUnderlines();
-        }
-    }
-    openPanel(panel, index = this._tabs.length) {
-        if (this._tabMap.has(panel.id)) {
-            return;
-        }
-        const tab = new Tab(panel, this.accessor, this.group);
-        tab.setContent(panel.view.tab);
-        if (this._direction !== 'horizontal') {
-            tab.setDirection(this._direction);
-        }
-        const disposable = new CompositeDisposable(tab.onDragStart((event) => {
-            var _a;
-            this._onTabDragStart.fire({ nativeEvent: event, panel });
-            // Both HTML5 and pointer drags initialize _animState. Cleanup
-            // is wired in both paths: HTML5 via dragend/drop on _tabsList,
-            // pointer via PointerDragController.onDragEnd subscriptions.
-            if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
-                const tabWidth = tab.element.getBoundingClientRect().width;
-                const sourceIndex = this._tabs.findIndex((x) => x.value === tab);
-                this._animState = {
-                    sourceTabId: panel.id,
-                    sourceIndex,
-                    tabPositions: this.snapshotTabPositions(),
-                    chipPositions: this._tabGroupManager.snapshotChipWidths(),
-                    currentInsertionIndex: null,
-                    targetTabGroupId: null,
-                    sourceTabGroupId: null,
-                    sourceGroupPanelIds: null,
-                    sourceChipWidth: 0,
-                    cursorOffsetFromDragLeft: tabWidth / 2,
-                    sourceGapWidth: tabWidth,
-                    containerLeft: this._tabsList.getBoundingClientRect().left,
-                };
-                // Collapse the source tab after the browser captures the
-                // drag image, then open the gap at the source position in
-                // the same paint frame — no visual jump.
-                // Both collapse and gap must be instant (no transition).
-                this._pendingCollapse = true;
-                requestAnimationFrame(() => {
-                    var _a;
-                    var _b;
-                    this._pendingCollapse = false;
-                    if (!this._animState) {
-                        return;
-                    }
-                    // Collapse source tab instantly (no transition)
-                    tab.element.style.transition = 'none';
-                    toggleClass(tab.element, 'dv-tab--dragging', true);
-                    void tab.element.offsetHeight; // force reflow
-                    (_a = (_b = this._animState).currentInsertionIndex) !== null && _a !== void 0 ? _a : (_b.currentInsertionIndex = sourceIndex);
-                    // Apply gap with transitions disabled on the target
-                    this.applyDragOverTransforms(true);
-                    // Re-enable transitions for subsequent moves
-                    tab.element.style.removeProperty('transition');
-                });
-            }
-        }), tab.onTabClick((event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            if (this.group.api.location.type !== 'edge') {
-                return;
-            }
-            if (this.group.activePanel === panel) {
-                // Clicking the active tab toggles expansion
-                if (this.group.api.isCollapsed()) {
-                    this.group.api.expand();
-                }
-                else {
-                    this.group.api.collapse();
-                }
-            }
-            else {
-                // Clicking a non-active tab switches the active tab.
-                // If the group is collapsed, also expand it.
-                this.group.model.openPanel(panel);
-                if (this.group.api.isCollapsed()) {
-                    this.group.api.expand();
-                }
-            }
-        }), tab.onPointerDown((event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
-            const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
-                this.size === 1;
-            if (isFloatingGroupsEnabled &&
-                !isFloatingWithOnePanel &&
-                event.shiftKey) {
-                event.preventDefault();
-                const panel = this.accessor.getGroupPanel(tab.panel.id);
-                const { top, left } = tab.element.getBoundingClientRect();
-                const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
-                this.accessor.addFloatingGroup(panel, {
-                    x: left - rootLeft,
-                    y: top - rootTop,
-                    inDragMode: true,
-                });
-                return;
-            }
-            // Edge groups are skipped here: all their tab interaction
-            // is handled by onTabClick to avoid race conditions with
-            // active panel state.
-            if (event.button === 0 &&
-                this.group.api.location.type !== 'edge' &&
-                this.group.activePanel !== panel) {
-                this.group.model.openPanel(panel);
-            }
-        }), tab.onDrop((event) => {
-            var _a, _b, _c, _d;
-            const animState = this._animState;
-            this._animState = null;
-            this._pendingCollapse = false;
-            const tabIndex = this._tabs.findIndex((x) => x.value === tab);
-            if (animState) {
-                const dropIndex = event.position === 'right' ? tabIndex + 1 : tabIndex;
-                if (animState.sourceTabGroupId) {
-                    this._commitGroupMove(animState.sourceTabGroupId, (_a = animState.currentInsertionIndex) !== null && _a !== void 0 ? _a : dropIndex);
-                    return;
-                }
-                this._uncollapsSourceTab(animState.sourceTabId);
-                const firstPositions = this.snapshotTabPositions();
-                this.resetTabTransforms();
-                this._onDrop.fire({
-                    event: event.nativeEvent,
-                    index: dropIndex,
-                    targetTabGroupId: animState.targetTabGroupId,
-                });
-                if (((_b = this.accessor.options.theme) === null || _b === void 0 ? void 0 : _b.tabAnimation) === 'smooth') {
-                    this.runFlipAnimation(firstPositions, animState.sourceTabId, animState.sourceIndex === -1, animState.sourceIndex === -1
-                        ? undefined
-                        : {
-                            from: Math.min(animState.sourceIndex, dropIndex),
-                            to: Math.max(animState.sourceIndex, dropIndex),
-                        });
-                }
-            }
-            else {
-                // Compute insertion index based on which half of the tab
-                // the pointer is over, then adjust for same-group removal:
-                // when the source tab sits before the insertion point,
-                // removing it shifts all subsequent indices down by one.
-                const afterPosition = this._direction === 'vertical' ? 'bottom' : 'right';
-                const insertionIndex = event.position === afterPosition
-                    ? tabIndex + 1
-                    : tabIndex;
-                const data = getPanelData();
-                const sourceIndex = data
-                    ? this._tabs.findIndex((x) => x.value.panel.id === data.panelId)
-                    : -1;
-                const adjustedIndex = insertionIndex -
-                    (sourceIndex !== -1 && sourceIndex < insertionIndex
-                        ? 1
-                        : 0);
-                const targetTabGroupId = (_d = (_c = this.group.model.getTabGroupForPanel(tab.panel.id)) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : null;
-                this._onDrop.fire({
-                    event: event.nativeEvent,
-                    index: adjustedIndex,
-                    targetTabGroupId,
-                });
-            }
-        }), tab.onWillShowOverlay((event) => {
-            this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
-                kind: 'tab',
-                panel: this.group.activePanel,
-                api: this.accessor.api,
-                group: this.group,
-                getData: getPanelData,
-            }));
-        }));
-        const value = { value: tab, disposable };
-        this.addTab(value, index);
-        // A new tab may have been inserted between a chip and its
-        // group's first tab — reposition all chips to stay correct.
-        this._tabGroupManager.positionAllChips();
-        // If a tab was added during active drag, refresh positions
-        if (this._animState) {
-            this._animState.tabPositions = this.snapshotTabPositions();
-            this._animState.chipPositions =
-                this._tabGroupManager.snapshotChipWidths();
-            this.applyDragOverTransforms();
-        }
-    }
-    delete(id) {
-        var _a;
-        if (((_a = this._animState) === null || _a === void 0 ? void 0 : _a.sourceTabId) === id) {
-            this.resetTabTransforms();
-            this._animState = null;
-        }
-        // Force-clean any pending transitionend listener
-        this._tabGroupManager.cleanupTransition(id);
-        const index = this.indexOf(id);
-        const tabToRemove = this._tabs.splice(index, 1)[0];
-        this._tabMap.delete(id);
-        if (tabToRemove) {
-            const { value, disposable } = tabToRemove;
-            disposable.dispose();
-            value.dispose();
-            value.element.remove();
-        }
-        // If a non-source tab was removed during active drag, refresh positions
-        if (this._animState) {
-            this._animState.tabPositions = this.snapshotTabPositions();
-            this._animState.chipPositions =
-                this._tabGroupManager.snapshotChipWidths();
-            this.applyDragOverTransforms();
-        }
-    }
-    addTab(tab, index = this._tabs.length) {
-        if (index < 0 || index > this._tabs.length) {
-            throw new Error('invalid location');
-        }
-        // Use the tab element at `index` as the reference node rather than
-        // `children[index]`, because `_tabsList` may contain non-tab children
-        // (e.g. group chips, underlines) that shift the DOM indices.
-        const refNode = index < this._tabs.length ? this._tabs[index].value.element : null;
-        this._tabsList.insertBefore(tab.value.element, refNode);
-        this._tabs = [
-            ...this._tabs.slice(0, index),
-            tab,
-            ...this._tabs.slice(index),
-        ];
-        this._tabMap.set(tab.value.panel.id, tab);
-        if (this.selectedIndex < 0) {
-            this.selectedIndex = index;
-        }
-    }
-    toggleDropdown(options) {
-        if (options.reset) {
-            this._onOverflowTabsChange.fire({
-                tabs: [],
-                tabGroups: [],
-                reset: true,
-            });
-            return;
-        }
-        const tabs = this._tabs
-            .filter((tab) => !isChildEntirelyVisibleWithinParent(tab.value.element, this._tabsList))
-            .map((x) => x.value.panel.id);
-        // Detect tab groups whose chip is clipped or whose tabs are all
-        // in the overflow set (e.g. collapsed groups scrolled out of view).
-        const overflowTabSet = new Set(tabs);
-        const tabGroups = [];
-        for (const tg of this.group.model.getTabGroups()) {
-            const chipEntry = this._tabGroupManager.chipRenderers.get(tg.id);
-            const chipClipped = chipEntry &&
-                !isChildEntirelyVisibleWithinParent(chipEntry.chip.element, this._tabsList);
-            // A group is in overflow if its chip is clipped OR all its
-            // visible tabs are in the overflow set.
-            const allTabsOverflow = tg.panelIds.length > 0 &&
-                tg.panelIds.every((pid) => overflowTabSet.has(pid));
-            if (chipClipped || allTabsOverflow) {
-                tabGroups.push(tg.id);
-                // For collapsed groups whose chip is clipped, ensure all
-                // member tabs are included in the overflow list so they
-                // appear in the dropdown.
-                if (tg.collapsed) {
-                    for (const pid of tg.panelIds) {
-                        if (!overflowTabSet.has(pid)) {
-                            overflowTabSet.add(pid);
-                            tabs.push(pid);
-                        }
-                    }
-                }
-            }
-        }
-        this._onOverflowTabsChange.fire({ tabs, tabGroups, reset: false });
-    }
-    updateDragAndDropState() {
-        for (const tab of this._tabs) {
-            tab.value.updateDragAndDropState();
-        }
-        this._tabGroupManager.updateDragAndDropState();
-    }
-    /**
-     * Synchronize chip elements and CSS classes for all tab groups
-     * in the parent group model. Call after any tab group mutation.
-     */
-    updateTabGroups() {
-        this._tabGroupManager.update();
-    }
-    refreshTabGroupAccent() {
-        this._tabGroupManager.refreshAccents();
-    }
-    /**
-     * Tabs-list-specific side effects of a chip drag start. The chip's
-     * drag sources (constructed by `TabGroupManager`) own the transfer
-     * payload, iframe shielding, dataTransfer setup, and the HTML5 drag
-     * image. This method just sets up the smooth-reorder anim state and
-     * collapses the source-group tabs in the tabs list.
-     */
-    _handleChipDragStart(tabGroup, chip, event) {
-        var _a;
-        const firstPanelId = tabGroup.panelIds[0];
-        const firstIdx = firstPanelId
-            ? this._tabs.findIndex((t) => t.value.panel.id === firstPanelId)
-            : -1;
-        const chipRect = chip.element.getBoundingClientRect();
-        // Compute total group width (chip + all tabs)
-        let groupGapWidth = chipRect.width;
-        for (const pid of tabGroup.panelIds) {
-            const tabEntry = this._tabMap.get(pid);
-            if (tabEntry) {
-                groupGapWidth +=
-                    tabEntry.value.element.getBoundingClientRect().width;
-            }
-        }
-        this._animState = {
-            sourceTabId: '',
-            sourceIndex: firstIdx,
-            tabPositions: this.snapshotTabPositions(),
-            chipPositions: this._tabGroupManager.snapshotChipWidths(),
-            currentInsertionIndex: null,
-            targetTabGroupId: null,
-            sourceTabGroupId: tabGroup.id,
-            sourceGroupPanelIds: new Set(tabGroup.panelIds),
-            sourceChipWidth: chipRect.width,
-            cursorOffsetFromDragLeft: event.clientX - chipRect.left,
-            sourceGapWidth: groupGapWidth,
-            containerLeft: this._tabsList.getBoundingClientRect().left,
-        };
-        if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) !== 'smooth') {
-            return;
-        }
-        // Collapse group tabs + chip after the browser captures the drag
-        // image, then open the gap at the source position — all instant
-        // (no transitions).
-        const groupPanelIds = new Set(tabGroup.panelIds);
-        this._pendingCollapse = true;
-        requestAnimationFrame(() => {
-            var _a;
-            var _b;
-            this._pendingCollapse = false;
-            if (!this._animState) {
-                return;
-            }
-            // Collapse all group tabs instantly
-            for (const t of this._tabs) {
-                if (groupPanelIds.has(t.value.panel.id)) {
-                    t.value.element.style.transition = 'none';
-                    toggleClass(t.value.element, 'dv-tab--dragging', true);
-                }
-            }
-            // Collapse the group chip instantly
-            const chipEntry = this._tabGroupManager.chipRenderers.get(tabGroup.id);
-            if (chipEntry) {
-                chipEntry.chip.element.style.transition = 'none';
-                toggleClass(chipEntry.chip.element, 'dv-tab-group-chip--dragging', true);
-            }
-            // Single reflow for the entire batch
-            void this._tabsList.offsetHeight;
-            const underline = this._tabGroupManager.groupUnderlines.get(tabGroup.id);
-            if (underline) {
-                underline.style.display = 'none';
-            }
-            (_a = (_b = this._animState).currentInsertionIndex) !== null && _a !== void 0 ? _a : (_b.currentInsertionIndex = firstIdx);
-            this.applyDragOverTransforms(true);
-            for (const t of this._tabs) {
-                if (groupPanelIds.has(t.value.panel.id)) {
-                    t.value.element.style.removeProperty('transition');
-                }
-            }
-            if (chipEntry) {
-                chipEntry.chip.element.style.removeProperty('transition');
-            }
-        });
-    }
-    /**
-     * A drop on a tab group chip means "insert before this group". Resolve to
-     * the index of the group's first tab, adjusting for same-group removal
-     * (when the source tab is currently to the left of the target slot, its
-     * removal shifts the insertion index down by one). Always clears
-     * `targetTabGroupId` so the dropped tab lands outside the group.
-     */
-    _handleChipDrop(tabGroup, event) {
-        const firstPanelId = tabGroup.panelIds[0];
-        if (!firstPanelId) {
-            return;
-        }
-        const insertionIndex = this._tabs.findIndex((x) => x.value.panel.id === firstPanelId);
-        if (insertionIndex === -1) {
-            return;
-        }
-        const data = getPanelData();
-        const sourceIndex = (data === null || data === void 0 ? void 0 : data.groupId) === this.group.id && (data === null || data === void 0 ? void 0 : data.panelId)
-            ? this._tabs.findIndex((x) => x.value.panel.id === data.panelId)
-            : -1;
-        const adjustedIndex = insertionIndex -
-            (sourceIndex !== -1 && sourceIndex < insertionIndex ? 1 : 0);
-        this._onDrop.fire({
-            event: event.nativeEvent,
-            index: adjustedIndex,
-            targetTabGroupId: null,
-        });
-    }
-    /**
-     * Sets the broader container that is part of the same logical drop surface
-     * as this tab list (e.g. the full header element).  When a dragleave from
-     * the tabs list lands inside this container, `_animState` is preserved so
-     * that external dragover listeners can continue the animation.
-     */
-    setExtendedDropZone(el) {
-        this._extendedDropZone = el;
-    }
-    /**
-     * Allows external elements (e.g. void container, left actions) to push an
-     * insertion index into the animation while the cursor is outside the tabs
-     * list itself.  Pass `null` to clear the indicator.
-     */
-    setExternalInsertionIndex(index) {
-        if (!this._animState) {
-            return;
-        }
-        if (index === this._animState.currentInsertionIndex) {
-            return;
-        }
-        this._animState.currentInsertionIndex = index;
-        this.applyDragOverTransforms();
-    }
-    /**
-     * Called when the drag cursor leaves the entire header area (not just the
-     * tabs list).  Clears animation state for cross-group drags, which never
-     * receive a `dragend` event on this tab list.
-     */
-    clearExternalAnimState() {
-        if (!this._animState) {
-            return;
-        }
-        this.resetTabTransforms();
-        if (this._animState.sourceIndex === -1) {
-            this._animState = null;
-        }
-        else {
-            this._animState.currentInsertionIndex = null;
-        }
-    }
-    snapshotTabPositions() {
-        const positions = new Map();
-        for (const tab of this._tabs) {
-            positions.set(tab.value.panel.id, tab.value.element.getBoundingClientRect());
-        }
-        return positions;
-    }
-    getAverageTabWidth() {
-        if (this._tabs.length === 0) {
-            return 0;
-        }
-        const isVertical = this._direction === 'vertical';
-        let total = 0;
-        for (const tab of this._tabs) {
-            const rect = tab.value.element.getBoundingClientRect();
-            total += isVertical ? rect.height : rect.width;
-        }
-        return total / this._tabs.length;
-    }
-    /**
-     * Pointer-event entry point. The HTML5 path enters via the per-element
-     * `dragover` listener; this one hit-tests the global pointer-drag
-     * position against the tabs list and routes through the same shared
-     * `_processDragOver` / `_processDragLeave` helpers.
-     */
-    _handlePointerDragMove(clientX, clientY) {
-        var _a;
-        const sourceDoc = (_a = this._tabsList.ownerDocument) !== null && _a !== void 0 ? _a : document;
-        const elAtPoint = sourceDoc.elementFromPoint(clientX, clientY);
-        const inside = !!elAtPoint &&
-            (this._tabsList.contains(elAtPoint) ||
-                (!!this._extendedDropZone &&
-                    this._extendedDropZone.contains(elAtPoint)));
-        if (!inside) {
-            if (this._pointerInsideTabsList) {
-                this._pointerInsideTabsList = false;
-                this._processDragLeave(elAtPoint);
-            }
-            return;
-        }
-        this._pointerInsideTabsList = true;
-        this._processDragOver(clientX);
-    }
-    /**
-     * Shared body of the dragover entry point. Refreshes stale anim state
-     * for a changed drag identity, initializes anim state for incoming
-     * cross-group drags, and dispatches to the gap-following math in
-     * `handleDragOver`. Returns true when this tabs list has taken
-     * ownership of the drag — HTML5 callers use this to gate
-     * `event.preventDefault()`.
-     */
-    _processDragOver(clientX) {
-        var _a, _b, _c, _d;
-        if (this.accessor.options.disableDnd) {
-            return false;
-        }
-        // Stale-state guard: if a previous drag's anim state is still here
-        // but the current drag is a different identity, drop the stale one
-        // so the new drag starts from a clean slate.
-        if (this._animState) {
-            const data = getPanelData();
-            if ((data === null || data === void 0 ? void 0 : data.tabGroupId) &&
-                data.groupId !== this.group.id &&
-                this._animState.sourceTabGroupId !== data.tabGroupId) {
-                this._animState = null;
-            }
-        }
-        if (!this._animState) {
-            const data = getPanelData();
-            // In default animation mode, individual tab drops are handled
-            // by per-tab Droptargets; only chip drags need tabs-list-level
-            // handling so drops on void space still work.
-            if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'default' &&
-                !(data === null || data === void 0 ? void 0 : data.tabGroupId)) {
-                return false;
-            }
-            if (data &&
-                (data.panelId || data.tabGroupId) &&
-                data.groupId !== this.group.id) {
-                const avgWidth = this.getAverageTabWidth();
-                if (data.tabGroupId) {
-                    // External group drag — look up the source group to
-                    // size the gap.
-                    const sourceGroup = this.accessor.getPanel(data.groupId);
-                    const sourceTg = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.getTabGroups().find((tg) => tg.id === data.tabGroupId);
-                    const panelCount = (_b = sourceTg === null || sourceTg === void 0 ? void 0 : sourceTg.panelIds.length) !== null && _b !== void 0 ? _b : 1;
-                    const groupGapWidth = avgWidth * panelCount + avgWidth;
-                    this._animState = {
-                        sourceTabId: '',
-                        sourceIndex: -1,
-                        tabPositions: this.snapshotTabPositions(),
-                        chipPositions: this._tabGroupManager.snapshotChipWidths(),
-                        currentInsertionIndex: null,
-                        targetTabGroupId: null,
-                        sourceTabGroupId: data.tabGroupId,
-                        sourceGroupPanelIds: sourceTg
-                            ? new Set(sourceTg.panelIds)
-                            : new Set(),
-                        sourceChipWidth: avgWidth,
-                        cursorOffsetFromDragLeft: groupGapWidth / 2,
-                        sourceGapWidth: groupGapWidth,
-                        containerLeft: this._tabsList.getBoundingClientRect().left,
-                    };
-                }
-                else {
-                    this._animState = {
-                        sourceTabId: data.panelId,
-                        sourceIndex: -1,
-                        tabPositions: this.snapshotTabPositions(),
-                        chipPositions: this._tabGroupManager.snapshotChipWidths(),
-                        currentInsertionIndex: null,
-                        targetTabGroupId: null,
-                        sourceTabGroupId: null,
-                        sourceGroupPanelIds: null,
-                        sourceChipWidth: 0,
-                        cursorOffsetFromDragLeft: avgWidth / 2,
-                        sourceGapWidth: avgWidth,
-                        containerLeft: this._tabsList.getBoundingClientRect().left,
-                    };
-                }
-            }
-            else {
-                return false;
-            }
-        }
-        // For intra-group drag (sourceIndex >= 0) the gap animation is the
-        // sole visual indicator — clear any stale anchor overlay that may
-        // have been set while the cursor was over the panel content area or
-        // another zone. External drags (sourceIndex === -1) leave the
-        // overlay to the individual tab Droptargets so cross-group
-        // animation is not disrupted.
-        if (this._animState.sourceIndex !== -1) {
-            (_d = (_c = this.group.model.dropTargetContainer) === null || _c === void 0 ? void 0 : _c.model) === null || _d === void 0 ? void 0 : _d.clear();
-        }
-        this.handleDragOver({ clientX });
-        return true;
-    }
-    /**
-     * Shared body of the dragleave entry point. Preserves anim state when
-     * the drag moves between tabs-list children, into the extended drop
-     * zone, or into the void container; tears it down otherwise.
-     */
-    _processDragLeave(related) {
-        var _a, _b, _c;
-        if (!this._animState) {
-            return;
-        }
-        // Moves between children of the tabs list aren't real leaves.
-        if (related && this._tabsList.contains(related)) {
-            return;
-        }
-        // Moving into the broader drop zone (e.g. void container, left
-        // actions) — keep anim state alive so external listeners can
-        // continue the gap animation.
-        if (related && ((_a = this._extendedDropZone) === null || _a === void 0 ? void 0 : _a.contains(related))) {
-            this.resetTabTransforms();
-            this._animState.currentInsertionIndex = null;
-            return;
-        }
-        // Leaving toward the void container (empty header space to the
-        // right): keep anim state so a drop can still land at the end.
-        const isVoid = this._voidContainer &&
-            related &&
-            (related === this._voidContainer ||
-                this._voidContainer.contains(related));
-        if (isVoid) {
-            return;
-        }
-        this.resetTabTransforms();
-        if (this._animState.sourceIndex === -1) {
-            (_c = (_b = this.group.model.dropTargetContainer) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.clear();
-            this._animState = null;
-        }
-        else {
-            this._animState.currentInsertionIndex = null;
-        }
-    }
-    handleDragOver(event) {
-        var _a, _b, _c, _d, _e;
-        if (!this._animState) {
-            return;
-        }
-        const mouseX = event.clientX;
-        let insertionIndex = null;
-        let targetTabGroupId = null;
-        const sourceGroupPanelIds = this._animState.sourceGroupPanelIds;
-        // Accumulation approach: compute where the drag image's left edge
-        // would be, then walk tabs left-to-right using their original widths.
-        // A tab fits to the left of the gap if the cumulative width of all
-        // preceding non-source tabs <= available space.
-        const dragLeftEdge = mouseX - this._animState.cursorOffsetFromDragLeft;
-        const availableSpace = dragLeftEdge - this._animState.containerLeft;
-        let accWidth = 0;
-        // Build lookup: first panel ID of each non-source group → group ID
-        // so we can add chip widths when we encounter a group's first tab.
-        const firstPanelToGroup = new Map();
-        if (this._tabGroupManager.chipRenderers.size > 0) {
-            const tabGroups = this.group.model.getTabGroups();
-            for (const tg of tabGroups) {
-                if (tg.id === this._animState.sourceTabGroupId) {
-                    continue;
-                }
-                if (tg.panelIds.length > 0) {
-                    firstPanelToGroup.set(tg.panelIds[0], tg.id);
-                }
-            }
-        }
-        for (let i = 0; i < this._tabs.length; i++) {
-            const tab = this._tabs[i].value;
-            if (tab.panel.id === this._animState.sourceTabId) {
-                continue;
-            }
-            if (sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(tab.panel.id)) {
-                continue;
-            }
-            // If this tab is the first of a non-source group, include
-            // the chip width (which sits before it in the DOM).
-            const groupId = firstPanelToGroup.get(tab.panel.id);
-            if (groupId) {
-                const chipWidth = (_a = this._animState.chipPositions.get(groupId)) !== null && _a !== void 0 ? _a : 0;
-                if (accWidth + chipWidth > availableSpace) {
-                    // Chip alone overflows — gap goes before this group
-                    insertionIndex !== null && insertionIndex !== void 0 ? insertionIndex : (insertionIndex = i);
-                    break;
-                }
-                accWidth += chipWidth;
-            }
-            // Use original width (before collapse/transforms)
-            const origRect = this._animState.tabPositions.get(tab.panel.id);
-            const tabWidth = origRect
-                ? origRect.width
-                : tab.element.getBoundingClientRect().width;
-            // Shift at the midpoint: a tab moves left once the drag image
-            // covers half of it (like Chrome's tab drag behavior).
-            if (accWidth + tabWidth / 2 <= availableSpace) {
-                accWidth += tabWidth;
-                insertionIndex = i + 1;
-            }
-            else {
-                insertionIndex !== null && insertionIndex !== void 0 ? insertionIndex : (insertionIndex = i);
-                break;
-            }
-        }
-        // Determine which tab group (if any) the insertion index falls within.
-        //
-        // We use snapshot-based positions (accWidth from the accumulation loop
-        // above) to compute original chip boundaries.  This avoids reading
-        // getBoundingClientRect() on chips whose live position is shifted by
-        // the drag gap margin, which caused oscillation / visual jumps.
-        if (insertionIndex !== null &&
-            this._tabGroupManager.chipRenderers.size > 0) {
-            const isGroupDrag = !!this._animState.sourceTabGroupId;
-            const tabGroups = this.group.model.getTabGroups();
-            // Rebuild the accumulated width up to insertionIndex so we know
-            // the original right edge of the chip (if any) that precedes it.
-            // We walk exactly the same way as the accumulation loop above.
-            let accUpTo = 0;
-            for (let i = 0; i < this._tabs.length; i++) {
-                const tab = this._tabs[i].value;
-                if (tab.panel.id === this._animState.sourceTabId) {
-                    continue;
-                }
-                if (sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(tab.panel.id)) {
-                    continue;
-                }
-                if (i >= insertionIndex) {
-                    break;
-                }
-                const gid = firstPanelToGroup.get(tab.panel.id);
-                if (gid) {
-                    accUpTo += (_b = this._animState.chipPositions.get(gid)) !== null && _b !== void 0 ? _b : 0;
-                }
-                const origRect = this._animState.tabPositions.get(tab.panel.id);
-                accUpTo += origRect
-                    ? origRect.width
-                    : tab.element.getBoundingClientRect().width;
-            }
-            for (const tg of tabGroups) {
-                // Build effective panel list: exclude the source tab
-                // so that dragging a tab out of its own group doesn't
-                // inflate the group's index range.
-                const effectivePanelIds = tg.panelIds.filter((pid) => pid !== this._animState.sourceTabId &&
-                    !(sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(pid)));
-                if (effectivePanelIds.length === 0) {
-                    continue;
-                }
-                const firstIdx = this._tabs.findIndex((t) => t.value.panel.id === effectivePanelIds[0]);
-                const lastIdx = this._tabs.findIndex((t) => t.value.panel.id ===
-                    effectivePanelIds[effectivePanelIds.length - 1]);
-                if (firstIdx === -1 || lastIdx === -1) {
-                    continue;
-                }
-                const isInsideRange = insertionIndex >= firstIdx && insertionIndex <= lastIdx;
-                const isJustBeforeGroup = !isInsideRange && insertionIndex === firstIdx - 1;
-                if (!isInsideRange && !isJustBeforeGroup) {
-                    continue;
-                }
-                if (isGroupDrag && isInsideRange) {
-                    // A group cannot be dropped inside another group.
-                    // Snap the insertion index to just before or just
-                    // after this group based on cursor position relative
-                    // to the group's midpoint. Only applies when the
-                    // insertion would land *inside* the group — for
-                    // `isJustBeforeGroup`, the index is already outside
-                    // (immediately left of the group) and is a valid
-                    // drop position, so leave it untouched (issue #1264).
-                    const groupMid = (firstIdx + lastIdx + 1) / 2;
-                    if (insertionIndex < groupMid) {
-                        insertionIndex = firstIdx;
-                    }
-                    else {
-                        insertionIndex = lastIdx + 1;
-                    }
-                    // targetTabGroupId stays null
-                    break;
-                }
-                if (isGroupDrag && isJustBeforeGroup) {
-                    // Cursor is just before the group — accept this
-                    // index as-is. Groups can be dropped at the slot
-                    // immediately left of another group's first tab.
-                    break;
-                }
-                if (isJustBeforeGroup) {
-                    // Check whether only the source tab (or source group
-                    // tabs) sits between insertionIndex and firstIdx.
-                    // If so, the source is being dragged away from that
-                    // slot, so we ARE effectively "just before" the group
-                    // and should still allow dropping into position 0.
-                    let allInBetweenAreSource = true;
-                    for (let j = insertionIndex; j < firstIdx; j++) {
-                        const pid = this._tabs[j].value.panel.id;
-                        if (pid !== this._animState.sourceTabId &&
-                            !(sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(pid))) {
-                            allInBetweenAreSource = false;
-                            break;
-                        }
-                    }
-                    if (!allInBetweenAreSource) {
-                        continue;
-                    }
-                    const chipWidth = (_c = this._animState.chipPositions.get(tg.id)) !== null && _c !== void 0 ? _c : 0;
-                    const threshold = tg.collapsed
-                        ? this._animState.containerLeft +
-                            accUpTo +
-                            chipWidth / 2
-                        : this._animState.containerLeft + accUpTo + chipWidth;
-                    if (mouseX >= threshold) {
-                        insertionIndex = firstIdx;
-                        targetTabGroupId = tg.id;
-                    }
-                    break;
-                }
-                if (isInsideRange) {
-                    const chipWidth = (_d = this._animState.chipPositions.get(tg.id)) !== null && _d !== void 0 ? _d : 0;
-                    const chipOriginalRight = this._animState.containerLeft + accUpTo + chipWidth;
-                    if (insertionIndex === firstIdx) {
-                        if (mouseX >= chipOriginalRight) {
-                            targetTabGroupId = tg.id;
-                        }
-                    }
-                    else {
-                        targetTabGroupId = tg.id;
-                    }
-                    break;
-                }
-            }
-        }
-        if (insertionIndex === this._animState.currentInsertionIndex &&
-            targetTabGroupId === this._animState.targetTabGroupId) {
-            return;
-        }
-        this._animState.currentInsertionIndex = insertionIndex;
-        this._animState.targetTabGroupId = targetTabGroupId;
-        if (((_e = this.accessor.options.theme) === null || _e === void 0 ? void 0 : _e.tabAnimation) === 'smooth') {
-            this.applyDragOverTransforms();
-        }
-    }
-    /**
-     * Batch-remove a CSS class from multiple elements instantly,
-     * forcing only a single reflow for the entire batch.
-     */
-    _removeClassInstantlyBatch(elements, cls) {
-        const affected = [];
-        for (const el of elements) {
-            if (el.classList.contains(cls)) {
-                el.style.transition = 'none';
-                toggleClass(el, cls, false);
-                affected.push(el);
-            }
-        }
-        if (affected.length > 0) {
-            void affected[0].offsetHeight; // single reflow for entire batch
-            for (const el of affected) {
-                el.style.removeProperty('transition');
-            }
-        }
-    }
-    /**
-     * Remove `dv-tab--dragging` from the source tab instantly so it
-     * regains its real width before FLIP snapshots.
-     */
-    _uncollapsSourceTab(sourceTabId) {
-        const entry = this._tabMap.get(sourceTabId);
-        if (entry) {
-            this._removeClassInstantlyBatch([entry.value.element], 'dv-tab--dragging');
-        }
-    }
-    applyDragOverTransforms(skipTransition = false) {
-        if (!this._animState ||
-            this._animState.currentInsertionIndex === null) {
-            this.resetTabTransforms();
-            return;
-        }
-        // Don't apply transforms until the source tab has been collapsed
-        // in the rAF callback — otherwise the gap + visible source = jump.
-        if (this._pendingCollapse) {
-            return;
-        }
-        const insertionIndex = this._animState.currentInsertionIndex;
-        // For group drags, gap = sum of all group member widths
-        let gapWidth;
-        const sourceGroupPanelIds = this._animState.sourceGroupPanelIds;
-        if (this._animState.sourceTabGroupId && sourceGroupPanelIds) {
-            gapWidth = this._animState.sourceGapWidth;
-        }
-        else {
-            const sourceRect = this._animState.tabPositions.get(this._animState.sourceTabId);
-            gapWidth = sourceRect
-                ? sourceRect.width
-                : this.getAverageTabWidth();
-        }
-        // When the insertion lands at or before a group's first tab, shift
-        // the chip so the gap appears before the entire group.
-        //
-        // Two cases:
-        // 1. targetTabGroupId is null (standalone drop) — always shift chip.
-        // 2. targetTabGroupId is set AND the group is collapsed — shift chip
-        //    because the collapsed tabs are invisible, so putting the gap on
-        //    them has no visual effect.
-        let chipToShift = null;
-        if (this._tabGroupManager.chipRenderers.size > 0) {
-            const tabGroups = this.group.model.getTabGroups();
-            for (const tg of tabGroups) {
-                if (tg.id === this._animState.sourceTabGroupId)
-                    continue;
-                // Skip the group that the dragged tab belongs to — the
-                // gap should appear after the chip (where the tab was),
-                // not before it.
-                if (tg.panelIds.includes(this._animState.sourceTabId))
-                    continue;
-                const effectivePids = tg.panelIds.filter((pid) => pid !== this._animState.sourceTabId &&
-                    !(sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(pid)));
-                if (effectivePids.length === 0)
-                    continue;
-                const firstIdx = this._tabs.findIndex((t) => t.value.panel.id === effectivePids[0]);
-                // Only consider chip-shifting when dropping outside the
-                // group, or when dropping inside a collapsed group (whose
-                // tabs are invisible).
-                const shouldShiftChip = !this._animState.targetTabGroupId ||
-                    (this._animState.targetTabGroupId === tg.id &&
-                        tg.collapsed);
-                if (!shouldShiftChip)
-                    continue;
-                if (firstIdx >= insertionIndex) {
-                    let hasTabs = false;
-                    for (let j = insertionIndex; j < firstIdx; j++) {
-                        const pid = this._tabs[j].value.panel.id;
-                        if (pid === this._animState.sourceTabId)
-                            continue;
-                        if (sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(pid))
-                            continue;
-                        hasTabs = true;
-                        break;
-                    }
-                    if (!hasTabs) {
-                        const chipEntry = this._tabGroupManager.chipRenderers.get(tg.id);
-                        if (chipEntry) {
-                            chipToShift = chipEntry.chip.element;
-                        }
-                    }
-                    break;
-                }
-            }
-        }
-        // Helper: pick the correct shifting class for tabs vs chips.
-        const shiftingClass = (el) => el.classList.contains('dv-tab-group-chip')
-            ? 'dv-tab-group-chip--shifting'
-            : 'dv-tab--shifting';
-        // Helper: apply a margin-left value to an element, optionally
-        // bypassing CSS transitions for instant positioning.
-        const setMargin = (el, value) => {
-            if (skipTransition) {
-                el.style.transition = 'none';
-                el.style.marginLeft = value;
-                void el.offsetHeight;
-                el.style.removeProperty('transition');
-            }
-            else {
-                el.style.marginLeft = value;
-            }
-            toggleClass(el, shiftingClass(el), true);
-        };
-        const clearMargin = (el) => {
-            const cls = shiftingClass(el);
-            // Remove any previous pending listener for this element
-            const prev = this._pendingMarginCleanups.get(el);
-            if (prev) {
-                prev();
-            }
-            if (skipTransition || !el.style.marginLeft) {
-                el.style.removeProperty('margin-left');
-                toggleClass(el, cls, false);
-            }
-            else {
-                el.style.marginLeft = '0px';
-                toggleClass(el, cls, true);
-                const onEnd = () => {
-                    el.style.removeProperty('margin-left');
-                    toggleClass(el, cls, false);
-                    el.removeEventListener('transitionend', onEnd);
-                    clearTimeout(fallbackTimer);
-                    this._pendingMarginCleanups.delete(el);
-                };
-                // Fallback in case transitionend never fires
-                // (e.g. element removed from DOM mid-transition)
-                const fallbackTimer = setTimeout(onEnd, 300);
-                this._pendingMarginCleanups.set(el, onEnd);
-                el.addEventListener('transitionend', onEnd);
-            }
-        };
-        let gapApplied = false;
-        // Reset all non-source chip margins first
-        for (const [groupId, entry] of this._tabGroupManager.chipRenderers) {
-            if (groupId === this._animState.sourceTabGroupId)
-                continue;
-            clearMargin(entry.chip.element);
-        }
-        // Apply gap to chip if insertion is before a group
-        if (chipToShift) {
-            setMargin(chipToShift, `${gapWidth}px`);
-            gapApplied = true;
-        }
-        for (let i = 0; i < this._tabs.length; i++) {
-            const tab = this._tabs[i].value;
-            if (tab.panel.id === this._animState.sourceTabId) {
-                continue;
-            }
-            if (sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(tab.panel.id)) {
-                continue;
-            }
-            if (!gapApplied && i >= insertionIndex) {
-                setMargin(tab.element, `${gapWidth}px`);
-                gapApplied = true;
-            }
-            else {
-                clearMargin(tab.element);
-            }
-        }
-        // Reposition underlines to follow shifted chips/tabs
-        this._tabGroupManager.trackUnderlines();
-    }
-    resetTabTransforms() {
-        // Cancel any pending margin transitionend listeners
-        for (const [, cleanup] of this._pendingMarginCleanups) {
-            cleanup();
-        }
-        this._pendingMarginCleanups.clear();
-        for (const tab of this._tabs) {
-            tab.value.element.style.removeProperty('margin-left');
-            tab.value.element.style.removeProperty('margin-right');
-            tab.value.element.style.removeProperty('margin-top');
-            tab.value.element.style.removeProperty('margin-bottom');
-            tab.value.element.style.removeProperty('transform');
-            toggleClass(tab.value.element, 'dv-tab--shifting', false);
-        }
-        for (const [, entry] of this._tabGroupManager.chipRenderers) {
-            entry.chip.element.style.removeProperty('margin-left');
-            toggleClass(entry.chip.element, 'dv-tab-group-chip--shifting', false);
-        }
-        this._tabGroupManager.positionUnderlines();
-    }
-    /**
-     * Commit a group-drag drop: clear drag classes, move the group
-     * in the model, and run a FLIP animation.
-     */
-    _commitGroupMove(sourceTabGroupId, insertionIndex) {
-        var _a, _b;
-        // Read transfer data first.
-        const data = getPanelData();
-        // Synchronously dispose the source chip's drag sources, which
-        // clears the panelTransfer payload + iframe shield. Cross-group
-        // moves dissolve the source chip on a microtask, which is too
-        // late: a synchronous `getPanelData()` after this method (or any
-        // sibling dragover handler firing in the same tick) would
-        // otherwise see stale data still referencing the old tabGroupId.
-        this._tabGroupManager.disposeChipDrag(sourceTabGroupId);
-        // Check if the tab group exists in this group (within-group reorder)
-        // or in another group (cross-group move).
-        const isLocal = this.group.model
-            .getTabGroups()
-            .some((tg) => tg.id === sourceTabGroupId);
-        if (isLocal) {
-            if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
-                this._clearGroupDragClasses(sourceTabGroupId);
-                const firstPositions = this.snapshotTabPositions();
-                this.resetTabTransforms();
-                this.group.model.moveTabGroup(sourceTabGroupId, insertionIndex);
-                this.runFlipAnimation(firstPositions, '', false);
-            }
-            else {
-                this._tabGroupManager.skipNextCollapseAnimation = true;
-                this.group.model.moveTabGroup(sourceTabGroupId, insertionIndex);
-            }
-        }
-        else if (data) {
-            // Cross-group: delegate to the component-level move which
-            // handles panel transfer and tab group recreation.
-            // Use the REAL tab group ID from transfer data, not the
-            // potentially stale one from _animState.
-            //
-            // Clear any inline gap margin / shifting class applied to
-            // destination tabs during dragover. Cross-group moves don't
-            // run the FLIP path, and `moveGroupOrPanel` only inserts new
-            // panels — it doesn't recreate existing destination tabs, so
-            // their inline `margin-left` would otherwise persist as a
-            // visible gap (issue #1243).
-            this.resetTabTransforms();
-            this.accessor.moveGroupOrPanel({
-                from: {
-                    groupId: data.groupId,
-                    tabGroupId: (_b = data.tabGroupId) !== null && _b !== void 0 ? _b : sourceTabGroupId,
-                },
-                to: {
-                    group: this.group,
-                    position: 'center',
-                    index: insertionIndex,
-                },
-            });
-        }
-    }
-    _clearGroupDragClasses(sourceTabGroupId) {
-        const chipEntry = this._tabGroupManager.chipRenderers.get(sourceTabGroupId);
-        if (chipEntry) {
-            this._removeClassInstantlyBatch([chipEntry.chip.element], 'dv-tab-group-chip--dragging');
-        }
-        this._removeClassInstantlyBatch(this._tabs.map((t) => t.value.element), 'dv-tab--dragging');
-        // Restore underline
-        const underline = this._tabGroupManager.groupUnderlines.get(sourceTabGroupId);
-        if (underline) {
-            underline.style.removeProperty('display');
-        }
-        // The subsequent moveTabGroup will re-create tabs and call
-        // updateTabGroups → _updateTabGroupClasses. For collapsed groups
-        // the new tabs don't have dv-tab--group-collapsed yet, which
-        // would trigger the collapse animation. Skip it.
-        this._tabGroupManager.skipNextCollapseAnimation = true;
-    }
-    resetDragAnimation() {
-        this._pendingCollapse = false;
-        // After a drop, `tab.onDrop` consumes _animState (sets it to null)
-        // and immediately calls `runFlipAnimation`, which sets transforms
-        // and queues an rAF to trigger the CSS transition. dragend fires
-        // synchronously on the source element BEFORE that rAF runs — if
-        // we cleared transforms here we'd clobber the in-flight FLIP, so
-        // gate the cleanup on _animState still being set (i.e. drag was
-        // cancelled rather than dropped).
-        if (this._animState) {
-            this.resetTabTransforms();
-            if (this._animState.sourceTabGroupId) {
-                this._clearGroupDragClasses(this._animState.sourceTabGroupId);
-            }
-            else {
-                this._removeClassInstantlyBatch(this._tabs.map((t) => t.value.element), 'dv-tab--dragging');
-            }
-            this._animState = null;
-            // Restore any hidden underlines from group drags.
-            for (const [, el] of this._tabGroupManager.groupUnderlines) {
-                el.style.removeProperty('display');
-            }
-        }
-    }
-    runFlipAnimation(firstPositions, sourceTabId, isCrossGroup = false, animRange) {
-        const isVertical = this._direction === 'vertical';
-        let hasAnimation = false;
-        for (let i = 0; i < this._tabs.length; i++) {
-            const tab = this._tabs[i];
-            const panelId = tab.value.panel.id;
-            if (panelId === sourceTabId) {
-                if (isCrossGroup) {
-                    // Newly inserted tab: slide in from the end
-                    const rect = tab.value.element.getBoundingClientRect();
-                    tab.value.element.style.transform = isVertical
-                        ? `translateY(${rect.height}px)`
-                        : `translateX(${rect.width}px)`;
-                    toggleClass(tab.value.element, 'dv-tab--shifting', true);
-                    hasAnimation = true;
-                }
-                continue;
-            }
-            // Skip tabs outside the affected range (they don't logically move)
-            if (animRange !== undefined &&
-                (i < animRange.from || i > animRange.to)) {
-                continue;
-            }
-            const firstRect = firstPositions.get(panelId);
-            if (!firstRect) {
-                continue;
-            }
-            const lastRect = tab.value.element.getBoundingClientRect();
-            const delta = isVertical
-                ? firstRect.top - lastRect.top
-                : firstRect.left - lastRect.left;
-            if (Math.abs(delta) < 1) {
-                continue;
-            }
-            tab.value.element.style.transform = isVertical
-                ? `translateY(${delta}px)`
-                : `translateX(${delta}px)`;
-            toggleClass(tab.value.element, 'dv-tab--shifting', true);
-            hasAnimation = true;
-        }
-        if (!hasAnimation) {
-            return;
-        }
-        requestAnimationFrame(() => {
-            var _a;
-            for (const tab of this._tabs) {
-                if (tab.value.element.style.transform) {
-                    tab.value.element.style.transform = '';
-                }
-            }
-            // Track underlines during the FLIP transition so they
-            // follow tabs as they slide to their final positions.
-            this._tabGroupManager.trackUnderlines();
-            // Clean up any previous flip transition listener
-            (_a = this._flipTransitionCleanup) === null || _a === void 0 ? void 0 : _a.call(this);
-            const onTransitionEnd = (event) => {
-                if (event.propertyName === 'transform') {
-                    cleanup();
-                    for (const tab of this._tabs) {
-                        toggleClass(tab.value.element, 'dv-tab--shifting', false);
-                    }
-                    // Final reposition after animation settles
-                    this._tabGroupManager.positionUnderlines();
-                }
-            };
-            const cleanup = () => {
-                this._tabsList.removeEventListener('transitionend', onTransitionEnd);
-                this._flipTransitionCleanup = null;
-            };
-            this._flipTransitionCleanup = cleanup;
-            this._tabsList.addEventListener('transitionend', onTransitionEnd);
-        });
-    }
-}