dockview-core 6.3.0 → 6.5.0

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

@@ -1,8 +1,9 @@
-import { getPanelData, LocalSelectionTransfer, PanelTransfer, } from '../../../dnd/dataTransfer';
-import { addClasses, disableIframePointEvents, isChildEntirelyVisibleWithinParent, OverflowObserver, removeClasses, toggleClass, } from '../../../dom';
+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';
@@ -102,6 +103,7 @@ export class Tabs extends CompositeDisposable {
         for (const tab of this._tabs) {
             tab.value.setDirection(value);
         }
+        this._tabGroupManager.updateDirection();
     }
     constructor(group, accessor, options) {
         super();
@@ -121,7 +123,7 @@ export class Tabs extends CompositeDisposable {
         this._voidContainer = null;
         this._voidContainerListeners = null;
         this._extendedDropZone = null;
-        this._chipDragCleanup = null;
+        this._pointerInsideTabsList = false;
         this._onTabDragStart = new Emitter();
         this.onTabDragStart = this._onTabDragStart.event;
         this._onDrop = new Emitter();
@@ -156,13 +158,40 @@ export class Tabs extends CompositeDisposable {
             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);
             },
-        }, addDisposableListener(this.element, 'pointerdown', (event) => {
+        }, 
+        // 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;
             }
@@ -170,135 +199,60 @@ export class Tabs extends CompositeDisposable {
             if (isLeftClick) {
                 this.accessor.doSetGroupActive(this.group);
             }
-        }), addDisposableListener(this._tabsList, 'dragover', (event) => {
-            var _a, _b, _c, _d;
-            if (this.accessor.options.disableDnd) {
+        }), 
+        // 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;
             }
-            // If _animState exists but belongs to a different
-            // drag (stale from a previous operation), replace it
-            // so the current drag is handled correctly.
-            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. But tab group
-                // chip drags still need tab-list-level handling so
-                // that drops on gaps / void space 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;
-                }
-                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 tab 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;
-                }
-            }
-            event.preventDefault(); // allow drop to fire on the container
-            // 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(event);
-        }, true), addDisposableListener(this._tabsList, 'dragleave', (event) => {
-            var _a, _b, _c;
-            if (!this._animState) {
+            const max = isVertical
+                ? this._tabsList.scrollHeight -
+                    this._tabsList.clientHeight
+                : this._tabsList.scrollWidth -
+                    this._tabsList.clientWidth;
+            if (max <= 0) {
                 return;
             }
-            const related = event.relatedTarget;
-            // Ignore moves between children of the tabs list
-            if (related && this._tabsList.contains(related)) {
+            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;
             }
-            // If moving into the broader drop zone (e.g. void container,
-            // left actions), keep _animState alive so the external
-            // dragover 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;
+            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;
             }
-            // When leaving toward the void container (empty header space
-            // to the right), keep the animation state so the drop can
-            // still land at the end position.
-            const rt = event.relatedTarget;
-            const isVoid = this._voidContainer &&
-                rt &&
-                (rt === this._voidContainer ||
-                    this._voidContainer.contains(rt));
-            if (isVoid) {
-                return;
+            else {
+                this._tabsList.scrollLeft = current + primary;
             }
-            this.resetTabTransforms();
-            if (this._animState) {
-                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;
-                }
+        }, { passive: false }), 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) => {
@@ -420,6 +374,9 @@ export class Tabs extends CompositeDisposable {
         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);
@@ -682,6 +639,7 @@ export class Tabs extends CompositeDisposable {
         for (const tab of this._tabs) {
             tab.value.updateDragAndDropState();
         }
+        this._tabGroupManager.updateDragAndDropState();
     }
     /**
      * Synchronize chip elements and CSS classes for all tab groups
@@ -693,6 +651,13 @@ export class Tabs extends CompositeDisposable {
     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];
@@ -723,89 +688,79 @@ export class Tabs extends CompositeDisposable {
             sourceGapWidth: groupGapWidth,
             containerLeft: this._tabsList.getBoundingClientRect().left,
         };
-        // Set LocalSelectionTransfer so drop targets recognise this as
-        // an internal dockview drag.  panelId is null (group-level),
-        // tabGroupId identifies which tab group is being dragged.
-        const panelTransfer = LocalSelectionTransfer.getInstance();
-        panelTransfer.setData([
-            new PanelTransfer(this.accessor.id, this.group.id, null, tabGroup.id),
-        ], PanelTransfer.prototype);
-        const iframes = disableIframePointEvents();
-        // The dragend listener on `_tabsList` is unreachable for chip
-        // drags because cross-group drops detach the chip from the DOM
-        // before dragend fires (the source tab group becomes empty, so
-        // `_positionChipForGroup` removes the chip element). Without
-        // bubbling, the tabsList listener never runs and `_animState`,
-        // `_chipDragCleanup`, and the dragging CSS classes leak. Listen
-        // directly on the chip element so cleanup happens regardless of
-        // whether it's still attached.  (Issue #1254.)
-        const chipElement = chip.element;
-        const onChipDragEnd = () => {
-            chipElement.removeEventListener('dragend', onChipDragEnd);
-            this.resetDragAnimation();
-        };
-        chipElement.addEventListener('dragend', onChipDragEnd);
-        this._chipDragCleanup = {
-            dispose: () => {
-                chipElement.removeEventListener('dragend', onChipDragEnd);
-                panelTransfer.clearData(PanelTransfer.prototype);
-                iframes.release();
-            },
-        };
-        if (event.dataTransfer) {
-            event.dataTransfer.effectAllowed = 'move';
-            if (event.dataTransfer.items.length === 0) {
-                event.dataTransfer.setData('text/plain', '');
-            }
-        }
-        if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
-            // 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);
-                // Apply gap with transitions disabled
-                this.applyDragOverTransforms(true);
-                // Re-enable transitions for subsequent moves
-                for (const t of this._tabs) {
-                    if (groupPanelIds.has(t.value.panel.id)) {
-                        t.value.element.style.removeProperty('transition');
-                    }
+        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);
                 }
-                if (chipEntry) {
-                    chipEntry.chip.element.style.removeProperty('transition');
+            }
+            // 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;
         }
-        // Build a composite drag image showing chip + group tabs
-        this._tabGroupManager.setGroupDragImage(event, tabGroup, chip.element);
+        const data = getPanelData();
+        const sourceIndex = data && data.groupId === this.group.id && 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
@@ -867,6 +822,164 @@ export class Tabs extends CompositeDisposable {
         }
         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) {
@@ -1276,20 +1389,23 @@ export class Tabs extends CompositeDisposable {
      * in the model, and run a FLIP animation.
      */
     _commitGroupMove(sourceTabGroupId, insertionIndex) {
-        var _a, _b, _c;
-        // Read transfer data BEFORE disposing cleanup — disposing
-        // _chipDragCleanup clears the global LocalSelectionTransfer
-        // singleton which getPanelData() reads from.
+        var _a, _b;
+        // Read transfer data first.
         const data = getPanelData();
-        (_a = this._chipDragCleanup) === null || _a === void 0 ? void 0 : _a.dispose();
-        this._chipDragCleanup = null;
+        // 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 (((_b = this.accessor.options.theme) === null || _b === void 0 ? void 0 : _b.tabAnimation) === 'smooth') {
+            if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
                 this._clearGroupDragClasses(sourceTabGroupId);
                 const firstPositions = this.snapshotTabPositions();
                 this.resetTabTransforms();
@@ -1317,7 +1433,7 @@ export class Tabs extends CompositeDisposable {
             this.accessor.moveGroupOrPanel({
                 from: {
                     groupId: data.groupId,
-                    tabGroupId: (_c = data.tabGroupId) !== null && _c !== void 0 ? _c : sourceTabGroupId,
+                    tabGroupId: (_b = data.tabGroupId) !== null && _b !== void 0 ? _b : sourceTabGroupId,
                 },
                 to: {
                     group: this.group,
@@ -1345,22 +1461,27 @@ export class Tabs extends CompositeDisposable {
         this._tabGroupManager.skipNextCollapseAnimation = true;
     }
     resetDragAnimation() {
-        var _a, _b;
         this._pendingCollapse = false;
-        this.resetTabTransforms();
-        // Clear drag-collapse classes instantly (no transition)
-        if ((_a = this._animState) === null || _a === void 0 ? void 0 : _a.sourceTabGroupId) {
-            this._clearGroupDragClasses(this._animState.sourceTabGroupId);
-        }
-        else {
-            this._removeClassInstantlyBatch(this._tabs.map((t) => t.value.element), 'dv-tab--dragging');
-        }
-        this._animState = null;
-        (_b = this._chipDragCleanup) === null || _b === void 0 ? void 0 : _b.dispose();
-        this._chipDragCleanup = null;
-        // Restore any hidden underlines from group drags
-        for (const [, el] of this._tabGroupManager.groupUnderlines) {
-            el.style.removeProperty('display');
+        // 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) {