dockview-core 6.2.2 → 6.4.0

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

@@ -57,6 +57,7 @@ var dom_1 = require("../../../dom");
 var events_1 = require("../../../events");
 var lifecycle_1 = require("../../../lifecycle");
 var scrollbar_1 = require("../../../scrollbar");
+var pointerDragController_1 = require("../../../dnd/pointer/pointerDragController");
 var events_2 = require("../../events");
 var tab_1 = require("../tab/tab");
 var tabGroups_1 = require("./tabGroups");
@@ -80,7 +81,7 @@ var Tabs = /** @class */ (function (_super) {
         _this._voidContainer = null;
         _this._voidContainerListeners = null;
         _this._extendedDropZone = null;
-        _this._chipDragCleanup = null;
+        _this._pointerInsideTabsList = false;
         _this._onTabDragStart = new events_1.Emitter();
         _this.onTabDragStart = _this._onTabDragStart.event;
         _this._onDrop = new events_1.Emitter();
@@ -115,13 +116,40 @@ var Tabs = /** @class */ (function (_super) {
             onChipDragStart: function (tabGroup, chip, event) {
                 _this._handleChipDragStart(tabGroup, chip, event);
             },
+            onChipDragEnd: function () {
+                // 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: function (tabGroup, event) {
+                _this._handleChipDrop(tabGroup, event);
+            },
         });
         _this.addDisposables(_this._onOverflowTabsChange, _this._observerDisposable, _this._onWillShowOverlay, _this._onDrop, _this._onTabDragStart, {
             dispose: function () {
                 var _a;
                 (_a = _this._flipTransitionCleanup) === null || _a === void 0 ? void 0 : _a.call(_this);
             },
-        }, (0, events_1.addDisposableListener)(_this.element, 'pointerdown', function (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_1.PointerDragController.getInstance().onDragEnd(function () {
+            _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_1.PointerDragController.getInstance().onDragMove(function (e) {
+            _this._handlePointerDragMove(e.clientX, e.clientY);
+        }), (0, events_1.addDisposableListener)(_this.element, 'pointerdown', function (event) {
             if (event.defaultPrevented) {
                 return;
             }
@@ -129,135 +157,60 @@ var Tabs = /** @class */ (function (_super) {
             if (isLeftClick) {
                 _this.accessor.doSetGroupActive(_this.group);
             }
-        }), (0, events_1.addDisposableListener)(_this._tabsList, 'dragover', function (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().
+        (0, events_1.addDisposableListener)(_this._tabsList, 'wheel', function (event) {
+            var isVertical = _this._direction === 'vertical';
+            var 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) {
-                var data = (0, dataTransfer_1.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) {
-                var data_1 = (0, dataTransfer_1.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_1 === null || data_1 === void 0 ? void 0 : data_1.tabGroupId)) {
-                    return;
-                }
-                if (data_1 &&
-                    (data_1.panelId || data_1.tabGroupId) &&
-                    data_1.groupId !== _this.group.id) {
-                    var avgWidth = _this.getAverageTabWidth();
-                    if (data_1.tabGroupId) {
-                        // External group drag — look up the
-                        // source tab group to size the gap
-                        var sourceGroup = _this.accessor.getPanel(data_1.groupId);
-                        var sourceTg = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.getTabGroups().find(function (tg) { return tg.id === data_1.tabGroupId; });
-                        var panelCount = (_b = sourceTg === null || sourceTg === void 0 ? void 0 : sourceTg.panelIds.length) !== null && _b !== void 0 ? _b : 1;
-                        var groupGapWidth = avgWidth * panelCount + avgWidth;
-                        _this._animState = {
-                            sourceTabId: '',
-                            sourceIndex: -1,
-                            tabPositions: _this.snapshotTabPositions(),
-                            chipPositions: _this._tabGroupManager.snapshotChipWidths(),
-                            currentInsertionIndex: null,
-                            targetTabGroupId: null,
-                            sourceTabGroupId: data_1.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_1.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), (0, events_1.addDisposableListener)(_this._tabsList, 'dragleave', function (event) {
-            var _a, _b, _c;
-            if (!_this._animState) {
+            var max = isVertical
+                ? _this._tabsList.scrollHeight -
+                    _this._tabsList.clientHeight
+                : _this._tabsList.scrollWidth -
+                    _this._tabsList.clientWidth;
+            if (max <= 0) {
                 return;
             }
-            var related = event.relatedTarget;
-            // Ignore moves between children of the tabs list
-            if (related && _this._tabsList.contains(related)) {
+            var 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.
-            var rt = event.relatedTarget;
-            var 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 }), (0, events_1.addDisposableListener)(_this._tabsList, 'dragover', function (event) {
+            if (_this._processDragOver(event.clientX)) {
+                // Allow `drop` to fire on the tabs list container.
+                event.preventDefault();
             }
+        }, true), (0, events_1.addDisposableListener)(_this._tabsList, 'dragleave', function (event) {
+            _this._processDragLeave(event.relatedTarget);
         }, true), (0, events_1.addDisposableListener)(_this._tabsList, 'dragend', function () {
             _this.resetDragAnimation();
         }), (0, events_1.addDisposableListener)(_this._tabsList, 'drop', function (event) {
@@ -472,6 +425,7 @@ var Tabs = /** @class */ (function (_super) {
                 }
                 finally { if (e_2) throw e_2.error; }
             }
+            this._tabGroupManager.updateDirection();
         },
         enumerable: false,
         configurable: true
@@ -541,6 +495,9 @@ var Tabs = /** @class */ (function (_super) {
         var disposable = new lifecycle_1.CompositeDisposable(tab.onDragStart(function (event) {
             var _a;
             _this._onTabDragStart.fire({ nativeEvent: event, panel: 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') {
                 var tabWidth = tab.element.getBoundingClientRect().width;
                 var sourceIndex_1 = _this._tabs.findIndex(function (x) { return x.value === tab; });
@@ -677,9 +634,9 @@ var Tabs = /** @class */ (function (_super) {
                 var insertionIndex = event.position === afterPosition
                     ? tabIndex + 1
                     : tabIndex;
-                var data_2 = (0, dataTransfer_1.getPanelData)();
-                var sourceIndex = data_2
-                    ? _this._tabs.findIndex(function (x) { return x.value.panel.id === data_2.panelId; })
+                var data_1 = (0, dataTransfer_1.getPanelData)();
+                var sourceIndex = data_1
+                    ? _this._tabs.findIndex(function (x) { return x.value.panel.id === data_1.panelId; })
                     : -1;
                 var adjustedIndex = insertionIndex -
                     (sourceIndex !== -1 && sourceIndex < insertionIndex
@@ -837,6 +794,7 @@ var Tabs = /** @class */ (function (_super) {
             }
             finally { if (e_6) throw e_6.error; }
         }
+        this._tabGroupManager.updateDragAndDropState();
     };
     /**
      * Synchronize chip elements and CSS classes for all tab groups
@@ -848,6 +806,13 @@ var Tabs = /** @class */ (function (_super) {
     Tabs.prototype.refreshTabGroupAccent = function () {
         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.
+     */
     Tabs.prototype._handleChipDragStart = function (tabGroup, chip, event) {
         var e_7, _a;
         var _this = this;
@@ -890,110 +855,100 @@ var Tabs = /** @class */ (function (_super) {
             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.
-        var panelTransfer = dataTransfer_1.LocalSelectionTransfer.getInstance();
-        panelTransfer.setData([
-            new dataTransfer_1.PanelTransfer(this.accessor.id, this.group.id, null, tabGroup.id),
-        ], dataTransfer_1.PanelTransfer.prototype);
-        var iframes = (0, dom_1.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.)
-        var chipElement = chip.element;
-        var onChipDragEnd = function () {
-            chipElement.removeEventListener('dragend', onChipDragEnd);
-            _this.resetDragAnimation();
-        };
-        chipElement.addEventListener('dragend', onChipDragEnd);
-        this._chipDragCleanup = {
-            dispose: function () {
-                chipElement.removeEventListener('dragend', onChipDragEnd);
-                panelTransfer.clearData(dataTransfer_1.PanelTransfer.prototype);
-                iframes.release();
-            },
-        };
-        if (event.dataTransfer) {
-            event.dataTransfer.effectAllowed = 'move';
-            if (event.dataTransfer.items.length === 0) {
-                event.dataTransfer.setData('text/plain', '');
-            }
-        }
-        if (((_b = this.accessor.options.theme) === null || _b === void 0 ? void 0 : _b.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).
-            var groupPanelIds_1 = new Set(tabGroup.panelIds);
-            this._pendingCollapse = true;
-            requestAnimationFrame(function () {
-                var e_8, _a, e_9, _b;
-                var _c;
-                var _d;
-                _this._pendingCollapse = false;
-                if (!_this._animState) {
-                    return;
-                }
-                try {
-                    // Collapse all group tabs instantly
-                    for (var _e = __values(_this._tabs), _f = _e.next(); !_f.done; _f = _e.next()) {
-                        var t = _f.value;
-                        if (groupPanelIds_1.has(t.value.panel.id)) {
-                            t.value.element.style.transition = 'none';
-                            (0, dom_1.toggleClass)(t.value.element, 'dv-tab--dragging', true);
-                        }
-                    }
-                }
-                catch (e_8_1) { e_8 = { error: e_8_1 }; }
-                finally {
-                    try {
-                        if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
+        if (((_b = this.accessor.options.theme) === null || _b === void 0 ? void 0 : _b.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).
+        var groupPanelIds = new Set(tabGroup.panelIds);
+        this._pendingCollapse = true;
+        requestAnimationFrame(function () {
+            var e_8, _a, e_9, _b;
+            var _c;
+            var _d;
+            _this._pendingCollapse = false;
+            if (!_this._animState) {
+                return;
+            }
+            try {
+                // Collapse all group tabs instantly
+                for (var _e = __values(_this._tabs), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var t = _f.value;
+                    if (groupPanelIds.has(t.value.panel.id)) {
+                        t.value.element.style.transition = 'none';
+                        (0, dom_1.toggleClass)(t.value.element, 'dv-tab--dragging', true);
                     }
-                    finally { if (e_8) throw e_8.error; }
-                }
-                // Collapse the group chip instantly
-                var chipEntry = _this._tabGroupManager.chipRenderers.get(tabGroup.id);
-                if (chipEntry) {
-                    chipEntry.chip.element.style.transition = 'none';
-                    (0, dom_1.toggleClass)(chipEntry.chip.element, 'dv-tab-group-chip--dragging', true);
-                }
-                // Single reflow for the entire batch
-                void _this._tabsList.offsetHeight;
-                var underline = _this._tabGroupManager.groupUnderlines.get(tabGroup.id);
-                if (underline) {
-                    underline.style.display = 'none';
                 }
-                (_c = (_d = _this._animState).currentInsertionIndex) !== null && _c !== void 0 ? _c : (_d.currentInsertionIndex = firstIdx);
-                // Apply gap with transitions disabled
-                _this.applyDragOverTransforms(true);
+            }
+            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+            finally {
                 try {
-                    // Re-enable transitions for subsequent moves
-                    for (var _g = __values(_this._tabs), _h = _g.next(); !_h.done; _h = _g.next()) {
-                        var t = _h.value;
-                        if (groupPanelIds_1.has(t.value.panel.id)) {
-                            t.value.element.style.removeProperty('transition');
-                        }
-                    }
+                    if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
                 }
-                catch (e_9_1) { e_9 = { error: e_9_1 }; }
-                finally {
-                    try {
-                        if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
+                finally { if (e_8) throw e_8.error; }
+            }
+            // Collapse the group chip instantly
+            var chipEntry = _this._tabGroupManager.chipRenderers.get(tabGroup.id);
+            if (chipEntry) {
+                chipEntry.chip.element.style.transition = 'none';
+                (0, dom_1.toggleClass)(chipEntry.chip.element, 'dv-tab-group-chip--dragging', true);
+            }
+            // Single reflow for the entire batch
+            void _this._tabsList.offsetHeight;
+            var underline = _this._tabGroupManager.groupUnderlines.get(tabGroup.id);
+            if (underline) {
+                underline.style.display = 'none';
+            }
+            (_c = (_d = _this._animState).currentInsertionIndex) !== null && _c !== void 0 ? _c : (_d.currentInsertionIndex = firstIdx);
+            _this.applyDragOverTransforms(true);
+            try {
+                for (var _g = __values(_this._tabs), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var t = _h.value;
+                    if (groupPanelIds.has(t.value.panel.id)) {
+                        t.value.element.style.removeProperty('transition');
                     }
-                    finally { if (e_9) throw e_9.error; }
                 }
-                if (chipEntry) {
-                    chipEntry.chip.element.style.removeProperty('transition');
+            }
+            catch (e_9_1) { e_9 = { error: e_9_1 }; }
+            finally {
+                try {
+                    if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
                 }
-            });
+                finally { if (e_9) throw e_9.error; }
+            }
+            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.
+     */
+    Tabs.prototype._handleChipDrop = function (tabGroup, event) {
+        var firstPanelId = tabGroup.panelIds[0];
+        if (!firstPanelId) {
+            return;
         }
-        // Build a composite drag image showing chip + group tabs
-        this._tabGroupManager.setGroupDragImage(event, tabGroup, chip.element);
+        var insertionIndex = this._tabs.findIndex(function (x) { return x.value.panel.id === firstPanelId; });
+        if (insertionIndex === -1) {
+            return;
+        }
+        var data = (0, dataTransfer_1.getPanelData)();
+        var sourceIndex = data && data.groupId === this.group.id && data.panelId
+            ? this._tabs.findIndex(function (x) { return x.value.panel.id === data.panelId; })
+            : -1;
+        var 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
@@ -1077,6 +1032,164 @@ var Tabs = /** @class */ (function (_super) {
         }
         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.
+     */
+    Tabs.prototype._handlePointerDragMove = function (clientX, clientY) {
+        var _a;
+        var sourceDoc = (_a = this._tabsList.ownerDocument) !== null && _a !== void 0 ? _a : document;
+        var elAtPoint = sourceDoc.elementFromPoint(clientX, clientY);
+        var 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()`.
+     */
+    Tabs.prototype._processDragOver = function (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) {
+            var data = (0, dataTransfer_1.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) {
+            var data_2 = (0, dataTransfer_1.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_2 === null || data_2 === void 0 ? void 0 : data_2.tabGroupId)) {
+                return false;
+            }
+            if (data_2 &&
+                (data_2.panelId || data_2.tabGroupId) &&
+                data_2.groupId !== this.group.id) {
+                var avgWidth = this.getAverageTabWidth();
+                if (data_2.tabGroupId) {
+                    // External group drag — look up the source group to
+                    // size the gap.
+                    var sourceGroup = this.accessor.getPanel(data_2.groupId);
+                    var sourceTg = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.getTabGroups().find(function (tg) { return tg.id === data_2.tabGroupId; });
+                    var panelCount = (_b = sourceTg === null || sourceTg === void 0 ? void 0 : sourceTg.panelIds.length) !== null && _b !== void 0 ? _b : 1;
+                    var groupGapWidth = avgWidth * panelCount + avgWidth;
+                    this._animState = {
+                        sourceTabId: '',
+                        sourceIndex: -1,
+                        tabPositions: this.snapshotTabPositions(),
+                        chipPositions: this._tabGroupManager.snapshotChipWidths(),
+                        currentInsertionIndex: null,
+                        targetTabGroupId: null,
+                        sourceTabGroupId: data_2.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_2.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: 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.
+     */
+    Tabs.prototype._processDragLeave = function (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.
+        var 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;
+        }
+    };
     Tabs.prototype.handleDragOver = function (event) {
         var e_12, _a, e_13, _b;
         var _this = this;
@@ -1213,11 +1326,15 @@ var Tabs = /** @class */ (function (_super) {
                 if (!isInsideRange && !isJustBeforeGroup) {
                     return "continue";
                 }
-                if (isGroupDrag) {
+                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.
+                    // 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).
                     var groupMid = (firstIdx + lastIdx + 1) / 2;
                     if (insertionIndex < groupMid) {
                         insertionIndex = firstIdx;
@@ -1227,6 +1344,9 @@ var Tabs = /** @class */ (function (_super) {
                     }
                     return "break";
                 }
+                if (isGroupDrag && isJustBeforeGroup) {
+                    return "break";
+                }
                 if (isJustBeforeGroup) {
                     // Check whether only the source tab (or source group
                     // tabs) sits between insertionIndex and firstIdx.
@@ -1592,20 +1712,23 @@ var Tabs = /** @class */ (function (_super) {
      * in the model, and run a FLIP animation.
      */
     Tabs.prototype._commitGroupMove = function (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.
         var data = (0, dataTransfer_1.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).
         var isLocal = this.group.model
             .getTabGroups()
             .some(function (tg) { return 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);
                 var firstPositions = this.snapshotTabPositions();
                 this.resetTabTransforms();
@@ -1633,7 +1756,7 @@ var Tabs = /** @class */ (function (_super) {
             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,
@@ -1662,32 +1785,37 @@ var Tabs = /** @class */ (function (_super) {
     };
     Tabs.prototype.resetDragAnimation = function () {
         var e_21, _a;
-        var _b, _c;
         this._pendingCollapse = false;
-        this.resetTabTransforms();
-        // Clear drag-collapse classes instantly (no transition)
-        if ((_b = this._animState) === null || _b === void 0 ? void 0 : _b.sourceTabGroupId) {
-            this._clearGroupDragClasses(this._animState.sourceTabGroupId);
-        }
-        else {
-            this._removeClassInstantlyBatch(this._tabs.map(function (t) { return t.value.element; }), 'dv-tab--dragging');
-        }
-        this._animState = null;
-        (_c = this._chipDragCleanup) === null || _c === void 0 ? void 0 : _c.dispose();
-        this._chipDragCleanup = null;
-        try {
-            // Restore any hidden underlines from group drags
-            for (var _d = __values(this._tabGroupManager.groupUnderlines), _e = _d.next(); !_e.done; _e = _d.next()) {
-                var _f = __read(_e.value, 2), el = _f[1];
-                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);
             }
-        }
-        catch (e_21_1) { e_21 = { error: e_21_1 }; }
-        finally {
+            else {
+                this._removeClassInstantlyBatch(this._tabs.map(function (t) { return t.value.element; }), 'dv-tab--dragging');
+            }
+            this._animState = null;
             try {
-                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+                // Restore any hidden underlines from group drags.
+                for (var _b = __values(this._tabGroupManager.groupUnderlines), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var _d = __read(_c.value, 2), el = _d[1];
+                    el.style.removeProperty('display');
+                }
+            }
+            catch (e_21_1) { e_21 = { error: e_21_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_21) throw e_21.error; }
             }
-            finally { if (e_21) throw e_21.error; }
         }
     };
     Tabs.prototype.runFlipAnimation = function (firstPositions, sourceTabId, isCrossGroup, animRange) {