dockview-core 5.2.0 → 6.0.1

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

@@ -59,6 +59,7 @@ var lifecycle_1 = require("../../../lifecycle");
 var scrollbar_1 = require("../../../scrollbar");
 var events_2 = require("../../events");
 var tab_1 = require("../tab/tab");
+var tabGroups_1 = require("./tabGroups");
 var Tabs = /** @class */ (function (_super) {
     __extends(Tabs, _super);
     function Tabs(group, accessor, options) {
@@ -68,10 +69,18 @@ var Tabs = /** @class */ (function (_super) {
         _this._observerDisposable = new lifecycle_1.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._chipDragCleanup = null;
         _this._onTabDragStart = new events_1.Emitter();
         _this.onTabDragStart = _this._onTabDragStart.event;
         _this._onDrop = new events_1.Emitter();
@@ -92,7 +101,27 @@ var Tabs = /** @class */ (function (_super) {
             _this._element = _this._scrollbar.element;
             _this.addDisposables(_this._scrollbar);
         }
-        _this.addDisposables(_this._onOverflowTabsChange, _this._observerDisposable, _this._onWillShowOverlay, _this._onDrop, _this._onTabDragStart, (0, events_1.addDisposableListener)(_this.element, 'pointerdown', function (event) {
+        _this._tabGroupManager = new tabGroups_1.TabGroupManager({
+            group: _this.group,
+            accessor: _this.accessor,
+            tabsList: _this._tabsList,
+            getTabs: function () { return _this._tabs; },
+            getTabMap: function () { return _this._tabMap; },
+            getDirection: function () { return _this._direction; },
+        }, {
+            onChipContextMenu: function (tabGroup, event) {
+                _this.accessor.contextMenuController.showForChip(tabGroup, _this.group, event);
+            },
+            onChipDragStart: function (tabGroup, chip, event) {
+                _this._handleChipDragStart(tabGroup, chip, 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) {
             if (event.defaultPrevented) {
                 return;
             }
@@ -101,42 +130,128 @@ var Tabs = /** @class */ (function (_super) {
                 _this.accessor.doSetGroupActive(_this.group);
             }
         }), (0, events_1.addDisposableListener)(_this._tabsList, 'dragover', function (event) {
+            var _a, _b, _c, _d;
+            if (_this.accessor.options.disableDnd) {
+                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) {
-                // Check for external drag from another group
-                if (_this.accessor.options.tabAnimation !== 'smooth' ||
-                    _this.accessor.options.disableDnd) {
+                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;
                 }
-                var data = (0, dataTransfer_1.getPanelData)();
-                if (data &&
-                    data.panelId &&
-                    data.groupId !== _this.group.id) {
-                    _this._animState = {
-                        sourceTabId: data.panelId,
-                        sourceIndex: -1,
-                        tabPositions: _this.snapshotTabPositions(),
-                        currentInsertionIndex: null,
-                    };
+                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) {
                 return;
             }
-            // Only handle if leaving the container itself, not moving between children
-            if (event.relatedTarget &&
-                _this._tabsList.contains(event.relatedTarget)) {
+            var related = event.relatedTarget;
+            // Ignore moves between children of the tabs list
+            if (related && _this._tabsList.contains(related)) {
+                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;
+            }
+            // 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;
             }
             _this.resetTabTransforms();
             if (_this._animState) {
                 if (_this._animState.sourceIndex === -1) {
-                    // External drag left — clear state entirely
-                    // (no dragend will fire on this tab list)
+                    (_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 {
@@ -144,48 +259,70 @@ var Tabs = /** @class */ (function (_super) {
                 }
             }
         }, true), (0, events_1.addDisposableListener)(_this._tabsList, 'dragend', function () {
-            // Only fires for cancel (not after successful drop, since
-            // source tab is removed from DOM and doesn't bubble)
             _this.resetDragAnimation();
         }), (0, events_1.addDisposableListener)(_this._tabsList, 'drop', function (event) {
-            if (_this.accessor.options.tabAnimation !== 'smooth' ||
-                !_this._animState ||
+            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();
             var 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;
+            }
             var insertionIndex = animState.currentInsertionIndex;
             var sourceIndex = animState.sourceIndex;
-            // After the source tab is removed, indices after it shift
-            // down by one, so adjust the target index accordingly.
             var adjustedIndex = insertionIndex -
                 (sourceIndex !== -1 && sourceIndex < insertionIndex
                     ? 1
                     : 0);
-            // No-op: drop at the same position, nothing to animate
-            if (adjustedIndex === sourceIndex) {
+            var sourceCurrentGroup = _this.group.model.getTabGroupForPanel(animState.sourceTabId);
+            if (adjustedIndex === sourceIndex &&
+                !animState.targetTabGroupId &&
+                !sourceCurrentGroup) {
+                _this._uncollapsSourceTab(animState.sourceTabId);
                 _this.resetTabTransforms();
                 return;
             }
-            // Snapshot current visual positions (with margins still applied)
-            // before resetting transforms, so FLIP starts from what the
-            // user currently sees — not from a teleported state.
+            _this._uncollapsSourceTab(animState.sourceTabId);
             var firstPositions = _this.snapshotTabPositions();
             _this.resetTabTransforms();
-            _this._onDrop.fire({ event: event, index: adjustedIndex });
+            _this._onDrop.fire({
+                event: 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), lifecycle_1.Disposable.from(function () {
             var e_1, _a;
+            var _b;
+            (_b = _this._voidContainerListeners) === null || _b === void 0 ? void 0 : _b.dispose();
             _this.resetDragAnimation();
+            _this._tabGroupManager.disposeAll();
             try {
-                for (var _b = __values(_this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var _d = _c.value, value = _d.value, disposable = _d.disposable;
+                for (var _c = __values(_this._tabs), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var _e = _d.value, value = _e.value, disposable = _e.disposable;
                     disposable.dispose();
                     value.dispose();
                 }
@@ -193,11 +330,12 @@ var Tabs = /** @class */ (function (_super) {
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
             finally {
                 try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
                 }
                 finally { if (e_1) throw e_1.error; }
             }
             _this._tabs = [];
+            _this._tabMap.clear();
         }));
         return _this;
     }
@@ -216,8 +354,14 @@ var Tabs = /** @class */ (function (_super) {
                 this._observerDisposable.value = new lifecycle_1.CompositeDisposable(observer, observer.onDidChange(function (event) {
                     var hasOverflow = event.hasScrollX || event.hasScrollY;
                     _this.toggleDropdown({ reset: !hasOverflow });
+                    if (_this._tabGroupManager.groupUnderlines.size > 0) {
+                        _this._tabGroupManager.positionUnderlines();
+                    }
                 }), (0, events_1.addDisposableListener)(this._tabsList, 'scroll', function () {
                     _this.toggleDropdown({ reset: false });
+                    if (_this._tabGroupManager.groupUnderlines.size > 0) {
+                        _this._tabGroupManager.positionUnderlines();
+                    }
                 }));
             }
         },
@@ -231,6 +375,48 @@ var Tabs = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Tabs.prototype, "voidContainer", {
+        set: function (el) {
+            var _this = this;
+            var _a;
+            (_a = this._voidContainerListeners) === null || _a === void 0 ? void 0 : _a.dispose();
+            this._voidContainerListeners = null;
+            this._voidContainer = el;
+            if (el) {
+                this._voidContainerListeners = new lifecycle_1.CompositeDisposable((0, events_1.addDisposableListener)(el, 'dragover', function (event) {
+                    if (_this._animState) {
+                        event.preventDefault();
+                    }
+                }), (0, events_1.addDisposableListener)(el, 'drop', function (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();
+                    }
+                }));
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * 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.
+     */
+    Tabs.prototype.handleVoidDrop = function () {
+        var _a, _b;
+        if (!((_a = this._animState) === null || _a === void 0 ? void 0 : _a.sourceTabGroupId)) {
+            return false;
+        }
+        var sourceTabGroupId = this._animState.sourceTabGroupId;
+        var insertionIndex = (_b = this._animState.currentInsertionIndex) !== null && _b !== void 0 ? _b : this._tabs.length;
+        this._animState = null;
+        this._commitGroupMove(sourceTabGroupId, insertionIndex);
+        return true;
+    };
     Object.defineProperty(Tabs.prototype, "panels", {
         get: function () {
             return this._tabs.map(function (_) { return _.value.panel.id; });
@@ -257,6 +443,7 @@ var Tabs = /** @class */ (function (_super) {
             return this._direction;
         },
         set: function (value) {
+            var e_2, _a;
             if (this._direction === value) {
                 return;
             }
@@ -272,6 +459,19 @@ var Tabs = /** @class */ (function (_super) {
                 (0, dom_1.removeClasses)(this._tabsList, 'dv-tabs-container-vertical');
                 (0, dom_1.addClasses)(this._tabsList, 'dv-horizontal');
             }
+            try {
+                for (var _b = __values(this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var tab = _c.value;
+                    tab.value.setDirection(value);
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
         },
         enumerable: false,
         configurable: true
@@ -284,8 +484,9 @@ var Tabs = /** @class */ (function (_super) {
             this._tabs[this.selectedIndex].value === tab);
     };
     Tabs.prototype.setActivePanel = function (panel) {
-        var e_2, _a;
-        var runningWidth = 0;
+        var e_3, _a;
+        var isVertical = this._direction === 'vertical';
+        var running = 0;
         try {
             for (var _b = __values(this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var tab = _c.value;
@@ -294,40 +495,115 @@ var Tabs = /** @class */ (function (_super) {
                 if (isActivePanel) {
                     var element = tab.value.element;
                     var parentElement = element.parentElement;
-                    if (runningWidth < parentElement.scrollLeft ||
-                        runningWidth + element.clientWidth >
-                            parentElement.scrollLeft + parentElement.clientWidth) {
-                        parentElement.scrollLeft = runningWidth;
+                    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;
+                        }
                     }
                 }
-                runningWidth += tab.value.element.clientWidth;
+                running += isVertical
+                    ? tab.value.element.clientHeight
+                    : tab.value.element.clientWidth;
             }
         }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_2) throw e_2.error; }
+            finally { if (e_3) throw e_3.error; }
+        }
+        // Reposition underlines so the wrap-around follows the new active tab
+        if (this._tabGroupManager.groupUnderlines.size > 0) {
+            this._tabGroupManager.positionUnderlines();
         }
     };
     Tabs.prototype.openPanel = function (panel, index) {
         var _this = this;
         if (index === void 0) { index = this._tabs.length; }
-        if (this._tabs.find(function (tab) { return tab.value.panel.id === panel.id; })) {
+        if (this._tabMap.has(panel.id)) {
             return;
         }
         var tab = new tab_1.Tab(panel, this.accessor, this.group);
         tab.setContent(panel.view.tab);
+        if (this._direction !== 'horizontal') {
+            tab.setDirection(this._direction);
+        }
         var disposable = new lifecycle_1.CompositeDisposable(tab.onDragStart(function (event) {
+            var _a;
             _this._onTabDragStart.fire({ nativeEvent: event, panel: panel });
-            if (_this.accessor.options.tabAnimation === 'smooth') {
+            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; });
                 _this._animState = {
                     sourceTabId: panel.id,
-                    sourceIndex: _this._tabs.findIndex(function (x) { return x.value === tab; }),
+                    sourceIndex: sourceIndex_1,
                     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(function () {
+                    var _a;
+                    var _b;
+                    _this._pendingCollapse = false;
+                    if (!_this._animState) {
+                        return;
+                    }
+                    // Collapse source tab instantly (no transition)
+                    tab.element.style.transition = 'none';
+                    (0, dom_1.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_1);
+                    // Apply gap with transitions disabled on the target
+                    _this.applyDragOverTransforms(true);
+                    // Re-enable transitions for subsequent moves
+                    tab.element.style.removeProperty('transition');
+                });
+            }
+        }), tab.onTabClick(function (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(function (event) {
             if (event.defaultPrevented) {
@@ -351,34 +627,69 @@ var Tabs = /** @class */ (function (_super) {
                 return;
             }
             switch (event.button) {
-                case 0: // left click or touch
-                    if (_this.group.activePanel !== panel) {
-                        _this.group.model.openPanel(panel);
+                case 0:
+                    if (_this.group.api.location.type === 'edge') {
+                        // All tab interaction for edge groups is handled by
+                        // onTabClick to avoid race conditions with active panel state
+                    }
+                    else {
+                        if (_this.group.activePanel !== panel) {
+                            _this.group.model.openPanel(panel);
+                        }
                     }
                     break;
             }
         }), tab.onDrop(function (event) {
+            var _a, _b, _c, _d;
             var animState = _this._animState;
             _this._animState = null;
-            var dropIndex = _this._tabs.findIndex(function (x) { return x.value === tab; });
+            _this._pendingCollapse = false;
+            var tabIndex = _this._tabs.findIndex(function (x) { return x.value === tab; });
             if (animState) {
+                var 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);
                 var firstPositions = _this.snapshotTabPositions();
                 _this.resetTabTransforms();
                 _this._onDrop.fire({
                     event: event.nativeEvent,
                     index: dropIndex,
+                    targetTabGroupId: animState.targetTabGroupId,
                 });
-                _this.runFlipAnimation(firstPositions, animState.sourceTabId, animState.sourceIndex === -1, animState.sourceIndex !== -1
-                    ? {
-                        from: Math.min(animState.sourceIndex, dropIndex),
-                        to: Math.max(animState.sourceIndex, dropIndex),
-                    }
-                    : undefined);
+                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
+                        ? {
+                            from: Math.min(animState.sourceIndex, dropIndex),
+                            to: Math.max(animState.sourceIndex, dropIndex),
+                        }
+                        : undefined);
+                }
             }
             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.
+                var afterPosition = _this._direction === 'vertical' ? 'bottom' : 'right';
+                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; })
+                    : -1;
+                var adjustedIndex = insertionIndex -
+                    (sourceIndex !== -1 && sourceIndex < insertionIndex
+                        ? 1
+                        : 0);
+                var 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: dropIndex,
+                    index: adjustedIndex,
+                    targetTabGroupId: targetTabGroupId,
                 });
             }
         }), tab.onWillShowOverlay(function (event) {
@@ -392,9 +703,14 @@ var Tabs = /** @class */ (function (_super) {
         }));
         var value = { value: tab, disposable: 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();
         }
     };
@@ -404,8 +720,11 @@ var Tabs = /** @class */ (function (_super) {
             this.resetTabTransforms();
             this._animState = null;
         }
+        // Force-clean any pending transitionend listener
+        this._tabGroupManager.cleanupTransition(id);
         var index = this.indexOf(id);
         var tabToRemove = this._tabs.splice(index, 1)[0];
+        this._tabMap.delete(id);
         var value = tabToRemove.value, disposable = tabToRemove.disposable;
         disposable.dispose();
         value.dispose();
@@ -413,6 +732,8 @@ var Tabs = /** @class */ (function (_super) {
         // 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();
         }
     };
@@ -421,43 +742,285 @@ var Tabs = /** @class */ (function (_super) {
         if (index < 0 || index > this._tabs.length) {
             throw new Error('invalid location');
         }
-        this._tabsList.insertBefore(tab.value.element, this._tabsList.children[index]);
+        // 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.
+        var refNode = index < this._tabs.length ? this._tabs[index].value.element : null;
+        this._tabsList.insertBefore(tab.value.element, refNode);
         this._tabs = __spreadArray(__spreadArray(__spreadArray([], __read(this._tabs.slice(0, index)), false), [
             tab
         ], false), __read(this._tabs.slice(index)), false);
+        this._tabMap.set(tab.value.panel.id, tab);
         if (this.selectedIndex < 0) {
             this.selectedIndex = index;
         }
     };
     Tabs.prototype.toggleDropdown = function (options) {
+        var e_4, _a, e_5, _b;
         var _this = this;
-        var tabs = options.reset
-            ? []
-            : this._tabs
-                .filter(function (tab) {
-                return !(0, dom_1.isChildEntirelyVisibleWithinParent)(tab.value.element, _this._tabsList);
-            })
-                .map(function (x) { return x.value.panel.id; });
-        this._onOverflowTabsChange.fire({ tabs: tabs, reset: options.reset });
+        if (options.reset) {
+            this._onOverflowTabsChange.fire({
+                tabs: [],
+                tabGroups: [],
+                reset: true,
+            });
+            return;
+        }
+        var tabs = this._tabs
+            .filter(function (tab) {
+            return !(0, dom_1.isChildEntirelyVisibleWithinParent)(tab.value.element, _this._tabsList);
+        })
+            .map(function (x) { return 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).
+        var overflowTabSet = new Set(tabs);
+        var tabGroups = [];
+        try {
+            for (var _c = __values(this.group.model.getTabGroups()), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var tg = _d.value;
+                var chipEntry = this._tabGroupManager.chipRenderers.get(tg.id);
+                var chipClipped = chipEntry &&
+                    !(0, dom_1.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.
+                var allTabsOverflow = tg.panelIds.length > 0 &&
+                    tg.panelIds.every(function (pid) { return 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) {
+                        try {
+                            for (var _e = (e_5 = void 0, __values(tg.panelIds)), _f = _e.next(); !_f.done; _f = _e.next()) {
+                                var pid = _f.value;
+                                if (!overflowTabSet.has(pid)) {
+                                    overflowTabSet.add(pid);
+                                    tabs.push(pid);
+                                }
+                            }
+                        }
+                        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                        finally {
+                            try {
+                                if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                            }
+                            finally { if (e_5) throw e_5.error; }
+                        }
+                    }
+                }
+            }
+        }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            }
+            finally { if (e_4) throw e_4.error; }
+        }
+        this._onOverflowTabsChange.fire({ tabs: tabs, tabGroups: tabGroups, reset: false });
     };
     Tabs.prototype.updateDragAndDropState = function () {
-        var e_3, _a;
+        var e_6, _a;
         try {
             for (var _b = __values(this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var tab = _c.value;
                 tab.value.updateDragAndDropState();
             }
         }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_3) throw e_3.error; }
+            finally { if (e_6) throw e_6.error; }
+        }
+    };
+    /**
+     * Synchronize chip elements and CSS classes for all tab groups
+     * in the parent group model. Call after any tab group mutation.
+     */
+    Tabs.prototype.updateTabGroups = function () {
+        this._tabGroupManager.update();
+    };
+    Tabs.prototype.refreshTabGroupAccent = function () {
+        this._tabGroupManager.refreshAccents();
+    };
+    Tabs.prototype._handleChipDragStart = function (tabGroup, chip, event) {
+        var e_7, _a;
+        var _this = this;
+        var _b;
+        var firstPanelId = tabGroup.panelIds[0];
+        var firstIdx = firstPanelId
+            ? this._tabs.findIndex(function (t) { return t.value.panel.id === firstPanelId; })
+            : -1;
+        var chipRect = chip.element.getBoundingClientRect();
+        // Compute total group width (chip + all tabs)
+        var groupGapWidth = chipRect.width;
+        try {
+            for (var _c = __values(tabGroup.panelIds), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var pid = _d.value;
+                var tabEntry = this._tabMap.get(pid);
+                if (tabEntry) {
+                    groupGapWidth +=
+                        tabEntry.value.element.getBoundingClientRect().width;
+                }
+            }
+        }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            }
+            finally { if (e_7) throw e_7.error; }
+        }
+        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,
+        };
+        // 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)();
+        this._chipDragCleanup = {
+            dispose: function () {
+                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);
+                    }
+                    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);
+                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');
+                        }
+                    }
+                }
+                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');
+                }
+            });
+        }
+        // Build a composite drag image showing chip + group tabs
+        this._tabGroupManager.setGroupDragImage(event, tabGroup, chip.element);
+    };
+    /**
+     * 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.
+     */
+    Tabs.prototype.setExtendedDropZone = function (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.
+     */
+    Tabs.prototype.setExternalInsertionIndex = function (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.
+     */
+    Tabs.prototype.clearExternalAnimState = function () {
+        if (!this._animState) {
+            return;
+        }
+        this.resetTabTransforms();
+        if (this._animState.sourceIndex === -1) {
+            this._animState = null;
+        }
+        else {
+            this._animState.currentInsertionIndex = null;
         }
     };
     Tabs.prototype.snapshotTabPositions = function () {
-        var e_4, _a;
+        var e_10, _a;
         var positions = new Map();
         try {
             for (var _b = __values(this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -465,155 +1028,658 @@ var Tabs = /** @class */ (function (_super) {
                 positions.set(tab.value.panel.id, tab.value.element.getBoundingClientRect());
             }
         }
-        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        catch (e_10_1) { e_10 = { error: e_10_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_4) throw e_4.error; }
+            finally { if (e_10) throw e_10.error; }
         }
         return positions;
     };
     Tabs.prototype.getAverageTabWidth = function () {
-        var e_5, _a;
+        var e_11, _a;
         if (this._tabs.length === 0) {
             return 0;
         }
-        var totalWidth = 0;
+        var isVertical = this._direction === 'vertical';
+        var total = 0;
         try {
             for (var _b = __values(this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var tab = _c.value;
-                totalWidth += tab.value.element.getBoundingClientRect().width;
+                var rect = tab.value.element.getBoundingClientRect();
+                total += isVertical ? rect.height : rect.width;
             }
         }
-        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        catch (e_11_1) { e_11 = { error: e_11_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_5) throw e_5.error; }
+            finally { if (e_11) throw e_11.error; }
         }
-        return totalWidth / this._tabs.length;
+        return total / this._tabs.length;
     };
     Tabs.prototype.handleDragOver = function (event) {
+        var e_12, _a, e_13, _b;
+        var _this = this;
+        var _c, _d, _e, _f, _g;
         if (!this._animState) {
             return;
         }
         var mouseX = event.clientX;
         var insertionIndex = null;
+        var targetTabGroupId = null;
+        var 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.
+        var dragLeftEdge = mouseX - this._animState.cursorOffsetFromDragLeft;
+        var availableSpace = dragLeftEdge - this._animState.containerLeft;
+        var 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.
+        var firstPanelToGroup = new Map();
+        if (this._tabGroupManager.chipRenderers.size > 0) {
+            var tabGroups = this.group.model.getTabGroups();
+            try {
+                for (var tabGroups_2 = __values(tabGroups), tabGroups_2_1 = tabGroups_2.next(); !tabGroups_2_1.done; tabGroups_2_1 = tabGroups_2.next()) {
+                    var tg = tabGroups_2_1.value;
+                    if (tg.id === this._animState.sourceTabGroupId) {
+                        continue;
+                    }
+                    if (tg.panelIds.length > 0) {
+                        firstPanelToGroup.set(tg.panelIds[0], tg.id);
+                    }
+                }
+            }
+            catch (e_12_1) { e_12 = { error: e_12_1 }; }
+            finally {
+                try {
+                    if (tabGroups_2_1 && !tabGroups_2_1.done && (_a = tabGroups_2.return)) _a.call(tabGroups_2);
+                }
+                finally { if (e_12) throw e_12.error; }
+            }
+        }
         for (var i = 0; i < this._tabs.length; i++) {
             var tab = this._tabs[i].value;
             if (tab.panel.id === this._animState.sourceTabId) {
                 continue;
             }
-            var rect = tab.element.getBoundingClientRect();
-            var midpoint = rect.left + rect.width / 2;
-            if (mouseX < midpoint) {
-                insertionIndex = i;
+            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).
+            var groupId = firstPanelToGroup.get(tab.panel.id);
+            if (groupId) {
+                var chipWidth = (_c = this._animState.chipPositions.get(groupId)) !== null && _c !== void 0 ? _c : 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)
+            var origRect = this._animState.tabPositions.get(tab.panel.id);
+            var 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;
             }
-            insertionIndex = i + 1;
         }
-        if (insertionIndex === this._animState.currentInsertionIndex) {
+        // 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) {
+            var isGroupDrag = !!this._animState.sourceTabGroupId;
+            var 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.
+            var accUpTo = 0;
+            for (var i = 0; i < this._tabs.length; i++) {
+                var 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;
+                }
+                var gid = firstPanelToGroup.get(tab.panel.id);
+                if (gid) {
+                    accUpTo += (_d = this._animState.chipPositions.get(gid)) !== null && _d !== void 0 ? _d : 0;
+                }
+                var origRect = this._animState.tabPositions.get(tab.panel.id);
+                accUpTo += origRect
+                    ? origRect.width
+                    : tab.element.getBoundingClientRect().width;
+            }
+            var _loop_1 = function (tg) {
+                // 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.
+                var effectivePanelIds = tg.panelIds.filter(function (pid) {
+                    return pid !== _this._animState.sourceTabId &&
+                        !(sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(pid));
+                });
+                if (effectivePanelIds.length === 0) {
+                    return "continue";
+                }
+                var firstIdx = this_1._tabs.findIndex(function (t) { return t.value.panel.id === effectivePanelIds[0]; });
+                var lastIdx = this_1._tabs.findIndex(function (t) {
+                    return t.value.panel.id ===
+                        effectivePanelIds[effectivePanelIds.length - 1];
+                });
+                if (firstIdx === -1 || lastIdx === -1) {
+                    return "continue";
+                }
+                var isInsideRange = insertionIndex >= firstIdx && insertionIndex <= lastIdx;
+                var isJustBeforeGroup = !isInsideRange && insertionIndex === firstIdx - 1;
+                if (!isInsideRange && !isJustBeforeGroup) {
+                    return "continue";
+                }
+                if (isGroupDrag) {
+                    // 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.
+                    var groupMid = (firstIdx + lastIdx + 1) / 2;
+                    if (insertionIndex < groupMid) {
+                        insertionIndex = firstIdx;
+                    }
+                    else {
+                        insertionIndex = lastIdx + 1;
+                    }
+                    return "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.
+                    var allInBetweenAreSource = true;
+                    for (var j = insertionIndex; j < firstIdx; j++) {
+                        var pid = this_1._tabs[j].value.panel.id;
+                        if (pid !== this_1._animState.sourceTabId &&
+                            !(sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(pid))) {
+                            allInBetweenAreSource = false;
+                            break;
+                        }
+                    }
+                    if (!allInBetweenAreSource) {
+                        return "continue";
+                    }
+                    var chipWidth = (_e = this_1._animState.chipPositions.get(tg.id)) !== null && _e !== void 0 ? _e : 0;
+                    var threshold = tg.collapsed
+                        ? this_1._animState.containerLeft +
+                            accUpTo +
+                            chipWidth / 2
+                        : this_1._animState.containerLeft + accUpTo + chipWidth;
+                    if (mouseX >= threshold) {
+                        insertionIndex = firstIdx;
+                        targetTabGroupId = tg.id;
+                    }
+                    return "break";
+                }
+                if (isInsideRange) {
+                    var chipWidth = (_f = this_1._animState.chipPositions.get(tg.id)) !== null && _f !== void 0 ? _f : 0;
+                    var chipOriginalRight = this_1._animState.containerLeft + accUpTo + chipWidth;
+                    if (insertionIndex === firstIdx) {
+                        if (mouseX >= chipOriginalRight) {
+                            targetTabGroupId = tg.id;
+                        }
+                    }
+                    else {
+                        targetTabGroupId = tg.id;
+                    }
+                    return "break";
+                }
+            };
+            var this_1 = this;
+            try {
+                for (var tabGroups_3 = __values(tabGroups), tabGroups_3_1 = tabGroups_3.next(); !tabGroups_3_1.done; tabGroups_3_1 = tabGroups_3.next()) {
+                    var tg = tabGroups_3_1.value;
+                    var state_1 = _loop_1(tg);
+                    if (state_1 === "break")
+                        break;
+                }
+            }
+            catch (e_13_1) { e_13 = { error: e_13_1 }; }
+            finally {
+                try {
+                    if (tabGroups_3_1 && !tabGroups_3_1.done && (_b = tabGroups_3.return)) _b.call(tabGroups_3);
+                }
+                finally { if (e_13) throw e_13.error; }
+            }
+        }
+        if (insertionIndex === this._animState.currentInsertionIndex &&
+            targetTabGroupId === this._animState.targetTabGroupId) {
             return;
         }
         this._animState.currentInsertionIndex = insertionIndex;
-        this.applyDragOverTransforms();
+        this._animState.targetTabGroupId = targetTabGroupId;
+        if (((_g = this.accessor.options.theme) === null || _g === void 0 ? void 0 : _g.tabAnimation) === 'smooth') {
+            this.applyDragOverTransforms();
+        }
+    };
+    /**
+     * Batch-remove a CSS class from multiple elements instantly,
+     * forcing only a single reflow for the entire batch.
+     */
+    Tabs.prototype._removeClassInstantlyBatch = function (elements, cls) {
+        var e_14, _a, e_15, _b;
+        var affected = [];
+        try {
+            for (var elements_1 = __values(elements), elements_1_1 = elements_1.next(); !elements_1_1.done; elements_1_1 = elements_1.next()) {
+                var el = elements_1_1.value;
+                if (el.classList.contains(cls)) {
+                    el.style.transition = 'none';
+                    (0, dom_1.toggleClass)(el, cls, false);
+                    affected.push(el);
+                }
+            }
+        }
+        catch (e_14_1) { e_14 = { error: e_14_1 }; }
+        finally {
+            try {
+                if (elements_1_1 && !elements_1_1.done && (_a = elements_1.return)) _a.call(elements_1);
+            }
+            finally { if (e_14) throw e_14.error; }
+        }
+        if (affected.length > 0) {
+            void affected[0].offsetHeight; // single reflow for entire batch
+            try {
+                for (var affected_1 = __values(affected), affected_1_1 = affected_1.next(); !affected_1_1.done; affected_1_1 = affected_1.next()) {
+                    var el = affected_1_1.value;
+                    el.style.removeProperty('transition');
+                }
+            }
+            catch (e_15_1) { e_15 = { error: e_15_1 }; }
+            finally {
+                try {
+                    if (affected_1_1 && !affected_1_1.done && (_b = affected_1.return)) _b.call(affected_1);
+                }
+                finally { if (e_15) throw e_15.error; }
+            }
+        }
+    };
+    /**
+     * Remove `dv-tab--dragging` from the source tab instantly so it
+     * regains its real width before FLIP snapshots.
+     */
+    Tabs.prototype._uncollapsSourceTab = function (sourceTabId) {
+        var entry = this._tabMap.get(sourceTabId);
+        if (entry) {
+            this._removeClassInstantlyBatch([entry.value.element], 'dv-tab--dragging');
+        }
     };
-    Tabs.prototype.applyDragOverTransforms = function () {
+    Tabs.prototype.applyDragOverTransforms = function (skipTransition) {
+        var e_16, _a, e_17, _b;
+        var _this = this;
+        if (skipTransition === void 0) { 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;
+        }
         var insertionIndex = this._animState.currentInsertionIndex;
-        var sourceRect = this._animState.tabPositions.get(this._animState.sourceTabId);
-        var gapWidth = sourceRect
-            ? sourceRect.width
-            : this.getAverageTabWidth();
-        // Find the first non-source tab at insertionIndex to receive the gap margin
+        // For group drags, gap = sum of all group member widths
+        var gapWidth;
+        var sourceGroupPanelIds = this._animState.sourceGroupPanelIds;
+        if (this._animState.sourceTabGroupId && sourceGroupPanelIds) {
+            gapWidth = this._animState.sourceGapWidth;
+        }
+        else {
+            var 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.
+        var chipToShift = null;
+        if (this._tabGroupManager.chipRenderers.size > 0) {
+            var tabGroups = this.group.model.getTabGroups();
+            var _loop_2 = function (tg) {
+                if (tg.id === this_2._animState.sourceTabGroupId)
+                    return "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_2._animState.sourceTabId))
+                    return "continue";
+                var effectivePids = tg.panelIds.filter(function (pid) {
+                    return pid !== _this._animState.sourceTabId &&
+                        !(sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(pid));
+                });
+                if (effectivePids.length === 0)
+                    return "continue";
+                var firstIdx = this_2._tabs.findIndex(function (t) { return 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).
+                var shouldShiftChip = !this_2._animState.targetTabGroupId ||
+                    (this_2._animState.targetTabGroupId === tg.id &&
+                        tg.collapsed);
+                if (!shouldShiftChip)
+                    return "continue";
+                if (firstIdx >= insertionIndex) {
+                    var hasTabs = false;
+                    for (var j = insertionIndex; j < firstIdx; j++) {
+                        var pid = this_2._tabs[j].value.panel.id;
+                        if (pid === this_2._animState.sourceTabId)
+                            continue;
+                        if (sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(pid))
+                            continue;
+                        hasTabs = true;
+                        break;
+                    }
+                    if (!hasTabs) {
+                        var chipEntry = this_2._tabGroupManager.chipRenderers.get(tg.id);
+                        if (chipEntry) {
+                            chipToShift = chipEntry.chip.element;
+                        }
+                    }
+                    return "break";
+                }
+            };
+            var this_2 = this;
+            try {
+                for (var tabGroups_4 = __values(tabGroups), tabGroups_4_1 = tabGroups_4.next(); !tabGroups_4_1.done; tabGroups_4_1 = tabGroups_4.next()) {
+                    var tg = tabGroups_4_1.value;
+                    var state_2 = _loop_2(tg);
+                    if (state_2 === "break")
+                        break;
+                }
+            }
+            catch (e_16_1) { e_16 = { error: e_16_1 }; }
+            finally {
+                try {
+                    if (tabGroups_4_1 && !tabGroups_4_1.done && (_a = tabGroups_4.return)) _a.call(tabGroups_4);
+                }
+                finally { if (e_16) throw e_16.error; }
+            }
+        }
+        // Helper: pick the correct shifting class for tabs vs chips.
+        var shiftingClass = function (el) {
+            return 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.
+        var setMargin = function (el, value) {
+            if (skipTransition) {
+                el.style.transition = 'none';
+                el.style.marginLeft = value;
+                void el.offsetHeight;
+                el.style.removeProperty('transition');
+            }
+            else {
+                el.style.marginLeft = value;
+            }
+            (0, dom_1.toggleClass)(el, shiftingClass(el), true);
+        };
+        var clearMargin = function (el) {
+            var cls = shiftingClass(el);
+            // Remove any previous pending listener for this element
+            var prev = _this._pendingMarginCleanups.get(el);
+            if (prev) {
+                prev();
+            }
+            if (skipTransition || !el.style.marginLeft) {
+                el.style.removeProperty('margin-left');
+                (0, dom_1.toggleClass)(el, cls, false);
+            }
+            else {
+                el.style.marginLeft = '0px';
+                (0, dom_1.toggleClass)(el, cls, true);
+                var onEnd_1 = function () {
+                    el.style.removeProperty('margin-left');
+                    (0, dom_1.toggleClass)(el, cls, false);
+                    el.removeEventListener('transitionend', onEnd_1);
+                    clearTimeout(fallbackTimer_1);
+                    _this._pendingMarginCleanups.delete(el);
+                };
+                // Fallback in case transitionend never fires
+                // (e.g. element removed from DOM mid-transition)
+                var fallbackTimer_1 = setTimeout(onEnd_1, 300);
+                _this._pendingMarginCleanups.set(el, onEnd_1);
+                el.addEventListener('transitionend', onEnd_1);
+            }
+        };
         var gapApplied = false;
-        var _loop_1 = function (i) {
-            var tab = this_1._tabs[i].value;
-            if (tab.panel.id === this_1._animState.sourceTabId) {
-                return "continue";
+        try {
+            // Reset all non-source chip margins first
+            for (var _c = __values(this._tabGroupManager.chipRenderers), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var _e = __read(_d.value, 2), groupId = _e[0], entry = _e[1];
+                if (groupId === this._animState.sourceTabGroupId)
+                    continue;
+                clearMargin(entry.chip.element);
+            }
+        }
+        catch (e_17_1) { e_17 = { error: e_17_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+            }
+            finally { if (e_17) throw e_17.error; }
+        }
+        // Apply gap to chip if insertion is before a group
+        if (chipToShift) {
+            setMargin(chipToShift, "".concat(gapWidth, "px"));
+            gapApplied = true;
+        }
+        for (var i = 0; i < this._tabs.length; i++) {
+            var 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) {
-                tab.element.style.marginLeft = "".concat(gapWidth, "px");
-                (0, dom_1.toggleClass)(tab.element, 'dv-tab--shifting', true);
+                setMargin(tab.element, "".concat(gapWidth, "px"));
                 gapApplied = true;
             }
             else {
-                // Keep shifting class while margin animates back to 0,
-                // then remove both once the transition ends
-                if (tab.element.style.marginLeft) {
-                    tab.element.style.marginLeft = '0px';
-                    (0, dom_1.toggleClass)(tab.element, 'dv-tab--shifting', true);
-                    var onEnd_1 = function () {
-                        tab.element.style.removeProperty('margin-left');
-                        (0, dom_1.toggleClass)(tab.element, 'dv-tab--shifting', false);
-                        tab.element.removeEventListener('transitionend', onEnd_1);
-                    };
-                    tab.element.addEventListener('transitionend', onEnd_1);
-                }
-                else {
-                    (0, dom_1.toggleClass)(tab.element, 'dv-tab--shifting', false);
-                }
+                clearMargin(tab.element);
             }
-        };
-        var this_1 = this;
-        for (var i = 0; i < this._tabs.length; i++) {
-            _loop_1(i);
         }
+        // Reposition underlines to follow shifted chips/tabs
+        this._tabGroupManager.trackUnderlines();
     };
     Tabs.prototype.resetTabTransforms = function () {
-        var e_6, _a;
+        var e_18, _a, e_19, _b, e_20, _c;
         try {
-            for (var _b = __values(this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var tab = _c.value;
+            // Cancel any pending margin transitionend listeners
+            for (var _d = __values(this._pendingMarginCleanups), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var _f = __read(_e.value, 2), cleanup = _f[1];
+                cleanup();
+            }
+        }
+        catch (e_18_1) { e_18 = { error: e_18_1 }; }
+        finally {
+            try {
+                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+            }
+            finally { if (e_18) throw e_18.error; }
+        }
+        this._pendingMarginCleanups.clear();
+        try {
+            for (var _g = __values(this._tabs), _h = _g.next(); !_h.done; _h = _g.next()) {
+                var tab = _h.value;
                 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');
                 (0, dom_1.toggleClass)(tab.value.element, 'dv-tab--shifting', false);
             }
         }
-        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        catch (e_19_1) { e_19 = { error: e_19_1 }; }
         finally {
             try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
             }
-            finally { if (e_6) throw e_6.error; }
+            finally { if (e_19) throw e_19.error; }
+        }
+        try {
+            for (var _j = __values(this._tabGroupManager.chipRenderers), _k = _j.next(); !_k.done; _k = _j.next()) {
+                var _l = __read(_k.value, 2), entry = _l[1];
+                entry.chip.element.style.removeProperty('margin-left');
+                (0, dom_1.toggleClass)(entry.chip.element, 'dv-tab-group-chip--shifting', false);
+            }
+        }
+        catch (e_20_1) { e_20 = { error: e_20_1 }; }
+        finally {
+            try {
+                if (_k && !_k.done && (_c = _j.return)) _c.call(_j);
+            }
+            finally { if (e_20) throw e_20.error; }
+        }
+        this._tabGroupManager.positionUnderlines();
+    };
+    /**
+     * Commit a group-drag drop: clear drag classes, move the group
+     * 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 data = (0, dataTransfer_1.getPanelData)();
+        (_a = this._chipDragCleanup) === null || _a === void 0 ? void 0 : _a.dispose();
+        this._chipDragCleanup = null;
+        // 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') {
+                this._clearGroupDragClasses(sourceTabGroupId);
+                var 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.
+            this.accessor.moveGroupOrPanel({
+                from: {
+                    groupId: data.groupId,
+                    tabGroupId: (_c = data.tabGroupId) !== null && _c !== void 0 ? _c : sourceTabGroupId,
+                },
+                to: {
+                    group: this.group,
+                    position: 'center',
+                    index: insertionIndex,
+                },
+            });
         }
     };
+    Tabs.prototype._clearGroupDragClasses = function (sourceTabGroupId) {
+        var chipEntry = this._tabGroupManager.chipRenderers.get(sourceTabGroupId);
+        if (chipEntry) {
+            this._removeClassInstantlyBatch([chipEntry.chip.element], 'dv-tab-group-chip--dragging');
+        }
+        this._removeClassInstantlyBatch(this._tabs.map(function (t) { return t.value.element; }), 'dv-tab--dragging');
+        // Restore underline
+        var 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;
+    };
     Tabs.prototype.resetDragAnimation = function () {
-        var e_7, _a;
+        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 {
-            for (var _b = __values(this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var tab = _c.value;
-                (0, dom_1.toggleClass)(tab.value.element, 'dv-tab--dragging', false);
+            // 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');
             }
         }
-        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        catch (e_21_1) { e_21 = { error: e_21_1 }; }
         finally {
             try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
             }
-            finally { if (e_7) throw e_7.error; }
+            finally { if (e_21) throw e_21.error; }
         }
     };
     Tabs.prototype.runFlipAnimation = function (firstPositions, sourceTabId, isCrossGroup, animRange) {
         var _this = this;
         if (isCrossGroup === void 0) { isCrossGroup = false; }
+        var isVertical = this._direction === 'vertical';
         var hasAnimation = false;
         for (var i = 0; i < this._tabs.length; i++) {
             var tab = this._tabs[i];
             var panelId = tab.value.panel.id;
             if (panelId === sourceTabId) {
                 if (isCrossGroup) {
-                    // Newly inserted tab: slide in from the right
+                    // Newly inserted tab: slide in from the end
                     var rect = tab.value.element.getBoundingClientRect();
-                    tab.value.element.style.transform = "translateX(".concat(rect.width, "px)");
+                    tab.value.element.style.transform = isVertical
+                        ? "translateY(".concat(rect.height, "px)")
+                        : "translateX(".concat(rect.width, "px)");
                     (0, dom_1.toggleClass)(tab.value.element, 'dv-tab--shifting', true);
                     hasAnimation = true;
                 }
@@ -629,11 +1695,15 @@ var Tabs = /** @class */ (function (_super) {
                 continue;
             }
             var lastRect = tab.value.element.getBoundingClientRect();
-            var deltaX = firstRect.left - lastRect.left;
-            if (Math.abs(deltaX) < 1) {
+            var delta = isVertical
+                ? firstRect.top - lastRect.top
+                : firstRect.left - lastRect.left;
+            if (Math.abs(delta) < 1) {
                 continue;
             }
-            tab.value.element.style.transform = "translateX(".concat(deltaX, "px)");
+            tab.value.element.style.transform = isVertical
+                ? "translateY(".concat(delta, "px)")
+                : "translateX(".concat(delta, "px)");
             (0, dom_1.toggleClass)(tab.value.element, 'dv-tab--shifting', true);
             hasAnimation = true;
         }
@@ -641,41 +1711,54 @@ var Tabs = /** @class */ (function (_super) {
             return;
         }
         requestAnimationFrame(function () {
-            var e_8, _a;
+            var e_22, _a;
+            var _b;
             try {
-                for (var _b = __values(_this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var tab = _c.value;
+                for (var _c = __values(_this._tabs), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var tab = _d.value;
                     if (tab.value.element.style.transform) {
                         tab.value.element.style.transform = '';
                     }
                 }
             }
-            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+            catch (e_22_1) { e_22 = { error: e_22_1 }; }
             finally {
                 try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
                 }
-                finally { if (e_8) throw e_8.error; }
+                finally { if (e_22) throw e_22.error; }
             }
+            // 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
+            (_b = _this._flipTransitionCleanup) === null || _b === void 0 ? void 0 : _b.call(_this);
             var onTransitionEnd = function (event) {
-                var e_9, _a;
+                var e_23, _a;
                 if (event.propertyName === 'transform') {
-                    _this._tabsList.removeEventListener('transitionend', onTransitionEnd);
+                    cleanup();
                     try {
                         for (var _b = __values(_this._tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
                             var tab = _c.value;
                             (0, dom_1.toggleClass)(tab.value.element, 'dv-tab--shifting', false);
                         }
                     }
-                    catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                    catch (e_23_1) { e_23 = { error: e_23_1 }; }
                     finally {
                         try {
                             if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                         }
-                        finally { if (e_9) throw e_9.error; }
+                        finally { if (e_23) throw e_23.error; }
                     }
+                    // Final reposition after animation settles
+                    _this._tabGroupManager.positionUnderlines();
                 }
             };
+            var cleanup = function () {
+                _this._tabsList.removeEventListener('transitionend', onTransitionEnd);
+                _this._flipTransitionCleanup = null;
+            };
+            _this._flipTransitionCleanup = cleanup;
             _this._tabsList.addEventListener('transitionend', onTransitionEnd);
         });
     };