dockview-core 5.2.0 → 6.0.0

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

@@ -1,10 +1,11 @@
-import { getPanelData } from '../../../dnd/dataTransfer';
-import { addClasses, isChildEntirelyVisibleWithinParent, OverflowObserver, removeClasses, toggleClass, } from '../../../dom';
+import { getPanelData, LocalSelectionTransfer, PanelTransfer, } from '../../../dnd/dataTransfer';
+import { addClasses, disableIframePointEvents, isChildEntirelyVisibleWithinParent, OverflowObserver, removeClasses, toggleClass, } from '../../../dom';
 import { addDisposableListener, Emitter } from '../../../events';
 import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
 import { Scrollbar } from '../../../scrollbar';
 import { DockviewWillShowOverlayLocationEvent } from '../../events';
 import { Tab } from '../tab/tab';
+import { TabGroupManager } from './tabGroups';
 export class Tabs extends CompositeDisposable {
     get showTabsOverflowControl() {
         return this._showTabsOverflowControl;
@@ -19,14 +20,57 @@ export class Tabs extends CompositeDisposable {
             this._observerDisposable.value = new CompositeDisposable(observer, observer.onDidChange((event) => {
                 const hasOverflow = event.hasScrollX || event.hasScrollY;
                 this.toggleDropdown({ reset: !hasOverflow });
+                if (this._tabGroupManager.groupUnderlines.size > 0) {
+                    this._tabGroupManager.positionUnderlines();
+                }
             }), addDisposableListener(this._tabsList, 'scroll', () => {
                 this.toggleDropdown({ reset: false });
+                if (this._tabGroupManager.groupUnderlines.size > 0) {
+                    this._tabGroupManager.positionUnderlines();
+                }
             }));
         }
     }
     get element() {
         return this._element;
     }
+    set voidContainer(el) {
+        var _a;
+        (_a = this._voidContainerListeners) === null || _a === void 0 ? void 0 : _a.dispose();
+        this._voidContainerListeners = null;
+        this._voidContainer = el;
+        if (el) {
+            this._voidContainerListeners = new CompositeDisposable(addDisposableListener(el, 'dragover', (event) => {
+                if (this._animState) {
+                    event.preventDefault();
+                }
+            }), addDisposableListener(el, 'drop', (event) => {
+                var _a;
+                if (((_a = this._animState) === null || _a === void 0 ? void 0 : _a.sourceTabGroupId) &&
+                    this._animState.currentInsertionIndex !== null) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.handleVoidDrop();
+                }
+            }));
+        }
+    }
+    /**
+     * Handle a drop that occurred on the void container (empty header
+     * space to the right of the tabs). Returns `true` if the drop was
+     * consumed by an active group drag, `false` otherwise.
+     */
+    handleVoidDrop() {
+        var _a, _b;
+        if (!((_a = this._animState) === null || _a === void 0 ? void 0 : _a.sourceTabGroupId)) {
+            return false;
+        }
+        const sourceTabGroupId = this._animState.sourceTabGroupId;
+        const insertionIndex = (_b = this._animState.currentInsertionIndex) !== null && _b !== void 0 ? _b : this._tabs.length;
+        this._animState = null;
+        this._commitGroupMove(sourceTabGroupId, insertionIndex);
+        return true;
+    }
     get panels() {
         return this._tabs.map((_) => _.value.panel.id);
     }
@@ -55,6 +99,9 @@ export class Tabs extends CompositeDisposable {
             removeClasses(this._tabsList, 'dv-tabs-container-vertical');
             addClasses(this._tabsList, 'dv-horizontal');
         }
+        for (const tab of this._tabs) {
+            tab.value.setDirection(value);
+        }
     }
     constructor(group, accessor, options) {
         super();
@@ -63,10 +110,18 @@ export class Tabs extends CompositeDisposable {
         this._observerDisposable = new MutableDisposable();
         this._scrollbar = null;
         this._tabs = [];
+        this._tabMap = new Map();
         this.selectedIndex = -1;
         this._showTabsOverflowControl = false;
         this._direction = 'horizontal';
         this._animState = null;
+        this._pendingMarginCleanups = new Map();
+        this._pendingCollapse = false;
+        this._flipTransitionCleanup = null;
+        this._voidContainer = null;
+        this._voidContainerListeners = null;
+        this._extendedDropZone = null;
+        this._chipDragCleanup = null;
         this._onTabDragStart = new Emitter();
         this.onTabDragStart = this._onTabDragStart.event;
         this._onDrop = new Emitter();
@@ -87,7 +142,27 @@ export class Tabs extends CompositeDisposable {
             this._element = this._scrollbar.element;
             this.addDisposables(this._scrollbar);
         }
-        this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, addDisposableListener(this.element, 'pointerdown', (event) => {
+        this._tabGroupManager = new TabGroupManager({
+            group: this.group,
+            accessor: this.accessor,
+            tabsList: this._tabsList,
+            getTabs: () => this._tabs,
+            getTabMap: () => this._tabMap,
+            getDirection: () => this._direction,
+        }, {
+            onChipContextMenu: (tabGroup, event) => {
+                this.accessor.contextMenuController.showForChip(tabGroup, this.group, event);
+            },
+            onChipDragStart: (tabGroup, chip, event) => {
+                this._handleChipDragStart(tabGroup, chip, event);
+            },
+        });
+        this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, {
+            dispose: () => {
+                var _a;
+                (_a = this._flipTransitionCleanup) === null || _a === void 0 ? void 0 : _a.call(this);
+            },
+        }, addDisposableListener(this.element, 'pointerdown', (event) => {
             if (event.defaultPrevented) {
                 return;
             }
@@ -96,42 +171,128 @@ export class Tabs extends CompositeDisposable {
                 this.accessor.doSetGroupActive(this.group);
             }
         }), addDisposableListener(this._tabsList, 'dragover', (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) {
+                const data = getPanelData();
+                if ((data === null || data === void 0 ? void 0 : data.tabGroupId) &&
+                    data.groupId !== this.group.id &&
+                    this._animState.sourceTabGroupId !== data.tabGroupId) {
+                    this._animState = null;
+                }
+            }
             if (!this._animState) {
-                // Check for external drag from another group
-                if (this.accessor.options.tabAnimation !== 'smooth' ||
-                    this.accessor.options.disableDnd) {
+                const data = getPanelData();
+                // In default animation mode, individual tab drops
+                // are handled by per-tab Droptargets. But tab group
+                // chip drags still need tab-list-level handling so
+                // that drops on gaps / void space work.
+                if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) ===
+                    'default' &&
+                    !(data === null || data === void 0 ? void 0 : data.tabGroupId)) {
                     return;
                 }
-                const data = getPanelData();
                 if (data &&
-                    data.panelId &&
+                    (data.panelId || data.tabGroupId) &&
                     data.groupId !== this.group.id) {
-                    this._animState = {
-                        sourceTabId: data.panelId,
-                        sourceIndex: -1,
-                        tabPositions: this.snapshotTabPositions(),
-                        currentInsertionIndex: null,
-                    };
+                    const avgWidth = this.getAverageTabWidth();
+                    if (data.tabGroupId) {
+                        // External group drag — look up the
+                        // source tab group to size the gap
+                        const sourceGroup = this.accessor.getPanel(data.groupId);
+                        const sourceTg = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.getTabGroups().find((tg) => tg.id === data.tabGroupId);
+                        const panelCount = (_b = sourceTg === null || sourceTg === void 0 ? void 0 : sourceTg.panelIds.length) !== null && _b !== void 0 ? _b : 1;
+                        const groupGapWidth = avgWidth * panelCount + avgWidth;
+                        this._animState = {
+                            sourceTabId: '',
+                            sourceIndex: -1,
+                            tabPositions: this.snapshotTabPositions(),
+                            chipPositions: this._tabGroupManager.snapshotChipWidths(),
+                            currentInsertionIndex: null,
+                            targetTabGroupId: null,
+                            sourceTabGroupId: data.tabGroupId,
+                            sourceGroupPanelIds: sourceTg
+                                ? new Set(sourceTg.panelIds)
+                                : new Set(),
+                            sourceChipWidth: avgWidth,
+                            cursorOffsetFromDragLeft: groupGapWidth / 2,
+                            sourceGapWidth: groupGapWidth,
+                            containerLeft: this._tabsList.getBoundingClientRect()
+                                .left,
+                        };
+                    }
+                    else {
+                        this._animState = {
+                            sourceTabId: data.panelId,
+                            sourceIndex: -1,
+                            tabPositions: this.snapshotTabPositions(),
+                            chipPositions: this._tabGroupManager.snapshotChipWidths(),
+                            currentInsertionIndex: null,
+                            targetTabGroupId: null,
+                            sourceTabGroupId: null,
+                            sourceGroupPanelIds: null,
+                            sourceChipWidth: 0,
+                            cursorOffsetFromDragLeft: avgWidth / 2,
+                            sourceGapWidth: avgWidth,
+                            containerLeft: this._tabsList.getBoundingClientRect()
+                                .left,
+                        };
+                    }
                 }
                 else {
                     return;
                 }
             }
+            event.preventDefault(); // allow drop to fire on the container
+            // For intra-group drag (sourceIndex >= 0) the gap
+            // animation is the sole visual indicator — clear any
+            // stale anchor overlay that may have been set while the
+            // cursor was over the panel content area or another zone.
+            // External drags (sourceIndex === -1) leave the overlay
+            // to the individual tab Droptargets so cross-group
+            // animation is not disrupted.
+            if (this._animState.sourceIndex !== -1) {
+                (_d = (_c = this.group.model.dropTargetContainer) === null || _c === void 0 ? void 0 : _c.model) === null || _d === void 0 ? void 0 : _d.clear();
+            }
             this.handleDragOver(event);
         }, true), addDisposableListener(this._tabsList, 'dragleave', (event) => {
+            var _a, _b, _c;
             if (!this._animState) {
                 return;
             }
-            // Only handle if leaving the container itself, not moving between children
-            if (event.relatedTarget &&
-                this._tabsList.contains(event.relatedTarget)) {
+            const 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.
+            const rt = event.relatedTarget;
+            const 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 {
@@ -139,49 +300,72 @@ export class Tabs extends CompositeDisposable {
                 }
             }
         }, true), addDisposableListener(this._tabsList, 'dragend', () => {
-            // Only fires for cancel (not after successful drop, since
-            // source tab is removed from DOM and doesn't bubble)
             this.resetDragAnimation();
         }), addDisposableListener(this._tabsList, 'drop', (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();
             const animState = this._animState;
             this._animState = null;
+            this._pendingCollapse = false;
+            // Handle group drag (entire group repositioned)
+            if (animState.sourceTabGroupId) {
+                this._commitGroupMove(animState.sourceTabGroupId, animState.currentInsertionIndex);
+                return;
+            }
             const insertionIndex = animState.currentInsertionIndex;
             const sourceIndex = animState.sourceIndex;
-            // After the source tab is removed, indices after it shift
-            // down by one, so adjust the target index accordingly.
             const adjustedIndex = insertionIndex -
                 (sourceIndex !== -1 && sourceIndex < insertionIndex
                     ? 1
                     : 0);
-            // No-op: drop at the same position, nothing to animate
-            if (adjustedIndex === sourceIndex) {
+            const 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);
             const firstPositions = this.snapshotTabPositions();
             this.resetTabTransforms();
-            this._onDrop.fire({ event, index: adjustedIndex });
+            this._onDrop.fire({
+                event,
+                index: adjustedIndex,
+                targetTabGroupId: animState.targetTabGroupId,
+            });
             this.runFlipAnimation(firstPositions, animState.sourceTabId, animState.sourceIndex === -1, {
                 from: Math.min(sourceIndex, adjustedIndex),
                 to: Math.max(sourceIndex, adjustedIndex),
             });
         }, true), Disposable.from(() => {
+            var _a;
+            (_a = this._voidContainerListeners) === null || _a === void 0 ? void 0 : _a.dispose();
             this.resetDragAnimation();
+            this._tabGroupManager.disposeAll();
             for (const { value, disposable } of this._tabs) {
                 disposable.dispose();
                 value.dispose();
             }
             this._tabs = [];
+            this._tabMap.clear();
         }));
     }
     indexOf(id) {
@@ -192,37 +376,113 @@ export class Tabs extends CompositeDisposable {
             this._tabs[this.selectedIndex].value === tab);
     }
     setActivePanel(panel) {
-        let runningWidth = 0;
+        const isVertical = this._direction === 'vertical';
+        let running = 0;
         for (const tab of this._tabs) {
             const isActivePanel = panel.id === tab.value.panel.id;
             tab.value.setActive(isActivePanel);
             if (isActivePanel) {
                 const element = tab.value.element;
                 const parentElement = element.parentElement;
-                if (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;
+        }
+        // Reposition underlines so the wrap-around follows the new active tab
+        if (this._tabGroupManager.groupUnderlines.size > 0) {
+            this._tabGroupManager.positionUnderlines();
         }
     }
     openPanel(panel, index = this._tabs.length) {
-        if (this._tabs.find((tab) => tab.value.panel.id === panel.id)) {
+        if (this._tabMap.has(panel.id)) {
             return;
         }
         const tab = new Tab(panel, this.accessor, this.group);
         tab.setContent(panel.view.tab);
+        if (this._direction !== 'horizontal') {
+            tab.setDirection(this._direction);
+        }
         const disposable = new CompositeDisposable(tab.onDragStart((event) => {
+            var _a;
             this._onTabDragStart.fire({ nativeEvent: event, panel });
-            if (this.accessor.options.tabAnimation === 'smooth') {
+            if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
+                const tabWidth = tab.element.getBoundingClientRect().width;
+                const sourceIndex = this._tabs.findIndex((x) => x.value === tab);
                 this._animState = {
                     sourceTabId: panel.id,
-                    sourceIndex: this._tabs.findIndex((x) => x.value === tab),
+                    sourceIndex,
                     tabPositions: this.snapshotTabPositions(),
+                    chipPositions: this._tabGroupManager.snapshotChipWidths(),
                     currentInsertionIndex: null,
+                    targetTabGroupId: null,
+                    sourceTabGroupId: null,
+                    sourceGroupPanelIds: null,
+                    sourceChipWidth: 0,
+                    cursorOffsetFromDragLeft: tabWidth / 2,
+                    sourceGapWidth: tabWidth,
+                    containerLeft: this._tabsList.getBoundingClientRect().left,
                 };
+                // Collapse the source tab after the browser captures the
+                // drag image, then open the gap at the source position in
+                // the same paint frame — no visual jump.
+                // Both collapse and gap must be instant (no transition).
+                this._pendingCollapse = true;
+                requestAnimationFrame(() => {
+                    var _a;
+                    var _b;
+                    this._pendingCollapse = false;
+                    if (!this._animState) {
+                        return;
+                    }
+                    // Collapse source tab instantly (no transition)
+                    tab.element.style.transition = 'none';
+                    toggleClass(tab.element, 'dv-tab--dragging', true);
+                    void tab.element.offsetHeight; // force reflow
+                    (_a = (_b = this._animState).currentInsertionIndex) !== null && _a !== void 0 ? _a : (_b.currentInsertionIndex = sourceIndex);
+                    // Apply gap with transitions disabled on the target
+                    this.applyDragOverTransforms(true);
+                    // Re-enable transitions for subsequent moves
+                    tab.element.style.removeProperty('transition');
+                });
+            }
+        }), tab.onTabClick((event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            if (this.group.api.location.type !== 'edge') {
+                return;
+            }
+            if (this.group.activePanel === panel) {
+                // Clicking the active tab toggles expansion
+                if (this.group.api.isCollapsed()) {
+                    this.group.api.expand();
+                }
+                else {
+                    this.group.api.collapse();
+                }
+            }
+            else {
+                // Clicking a non-active tab switches the active tab.
+                // If the group is collapsed, also expand it.
+                this.group.model.openPanel(panel);
+                if (this.group.api.isCollapsed()) {
+                    this.group.api.expand();
+                }
             }
         }), tab.onPointerDown((event) => {
             if (event.defaultPrevented) {
@@ -246,34 +506,69 @@ export class Tabs extends CompositeDisposable {
                 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((event) => {
+            var _a, _b, _c, _d;
             const animState = this._animState;
             this._animState = null;
-            const dropIndex = this._tabs.findIndex((x) => x.value === tab);
+            this._pendingCollapse = false;
+            const tabIndex = this._tabs.findIndex((x) => x.value === tab);
             if (animState) {
+                const dropIndex = event.position === 'right' ? tabIndex + 1 : tabIndex;
+                if (animState.sourceTabGroupId) {
+                    this._commitGroupMove(animState.sourceTabGroupId, (_a = animState.currentInsertionIndex) !== null && _a !== void 0 ? _a : dropIndex);
+                    return;
+                }
+                this._uncollapsSourceTab(animState.sourceTabId);
                 const firstPositions = this.snapshotTabPositions();
                 this.resetTabTransforms();
                 this._onDrop.fire({
                     event: event.nativeEvent,
                     index: dropIndex,
+                    targetTabGroupId: animState.targetTabGroupId,
                 });
-                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.
+                const afterPosition = this._direction === 'vertical' ? 'bottom' : 'right';
+                const insertionIndex = event.position === afterPosition
+                    ? tabIndex + 1
+                    : tabIndex;
+                const data = getPanelData();
+                const sourceIndex = data
+                    ? this._tabs.findIndex((x) => x.value.panel.id === data.panelId)
+                    : -1;
+                const adjustedIndex = insertionIndex -
+                    (sourceIndex !== -1 && sourceIndex < insertionIndex
+                        ? 1
+                        : 0);
+                const targetTabGroupId = (_d = (_c = this.group.model.getTabGroupForPanel(tab.panel.id)) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : null;
                 this._onDrop.fire({
                     event: event.nativeEvent,
-                    index: dropIndex,
+                    index: adjustedIndex,
+                    targetTabGroupId,
                 });
             }
         }), tab.onWillShowOverlay((event) => {
@@ -287,9 +582,14 @@ export class Tabs extends CompositeDisposable {
         }));
         const value = { value: tab, disposable };
         this.addTab(value, index);
+        // A new tab may have been inserted between a chip and its
+        // group's first tab — reposition all chips to stay correct.
+        this._tabGroupManager.positionAllChips();
         // If a tab was added during active drag, refresh positions
         if (this._animState) {
             this._animState.tabPositions = this.snapshotTabPositions();
+            this._animState.chipPositions =
+                this._tabGroupManager.snapshotChipWidths();
             this.applyDragOverTransforms();
         }
     }
@@ -299,8 +599,11 @@ export class Tabs extends CompositeDisposable {
             this.resetTabTransforms();
             this._animState = null;
         }
+        // Force-clean any pending transitionend listener
+        this._tabGroupManager.cleanupTransition(id);
         const index = this.indexOf(id);
         const tabToRemove = this._tabs.splice(index, 1)[0];
+        this._tabMap.delete(id);
         const { value, disposable } = tabToRemove;
         disposable.dispose();
         value.dispose();
@@ -308,6 +611,8 @@ export class Tabs extends CompositeDisposable {
         // 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();
         }
     }
@@ -315,29 +620,217 @@ export class Tabs extends CompositeDisposable {
         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.
+        const refNode = index < this._tabs.length ? this._tabs[index].value.element : null;
+        this._tabsList.insertBefore(tab.value.element, refNode);
         this._tabs = [
             ...this._tabs.slice(0, index),
             tab,
             ...this._tabs.slice(index),
         ];
+        this._tabMap.set(tab.value.panel.id, tab);
         if (this.selectedIndex < 0) {
             this.selectedIndex = index;
         }
     }
     toggleDropdown(options) {
-        const tabs = options.reset
-            ? []
-            : this._tabs
-                .filter((tab) => !isChildEntirelyVisibleWithinParent(tab.value.element, this._tabsList))
-                .map((x) => x.value.panel.id);
-        this._onOverflowTabsChange.fire({ tabs, reset: options.reset });
+        if (options.reset) {
+            this._onOverflowTabsChange.fire({
+                tabs: [],
+                tabGroups: [],
+                reset: true,
+            });
+            return;
+        }
+        const tabs = this._tabs
+            .filter((tab) => !isChildEntirelyVisibleWithinParent(tab.value.element, this._tabsList))
+            .map((x) => x.value.panel.id);
+        // Detect tab groups whose chip is clipped or whose tabs are all
+        // in the overflow set (e.g. collapsed groups scrolled out of view).
+        const overflowTabSet = new Set(tabs);
+        const tabGroups = [];
+        for (const tg of this.group.model.getTabGroups()) {
+            const chipEntry = this._tabGroupManager.chipRenderers.get(tg.id);
+            const chipClipped = chipEntry &&
+                !isChildEntirelyVisibleWithinParent(chipEntry.chip.element, this._tabsList);
+            // A group is in overflow if its chip is clipped OR all its
+            // visible tabs are in the overflow set.
+            const allTabsOverflow = tg.panelIds.length > 0 &&
+                tg.panelIds.every((pid) => overflowTabSet.has(pid));
+            if (chipClipped || allTabsOverflow) {
+                tabGroups.push(tg.id);
+                // For collapsed groups whose chip is clipped, ensure all
+                // member tabs are included in the overflow list so they
+                // appear in the dropdown.
+                if (tg.collapsed) {
+                    for (const pid of tg.panelIds) {
+                        if (!overflowTabSet.has(pid)) {
+                            overflowTabSet.add(pid);
+                            tabs.push(pid);
+                        }
+                    }
+                }
+            }
+        }
+        this._onOverflowTabsChange.fire({ tabs, tabGroups, reset: false });
     }
     updateDragAndDropState() {
         for (const tab of this._tabs) {
             tab.value.updateDragAndDropState();
         }
     }
+    /**
+     * Synchronize chip elements and CSS classes for all tab groups
+     * in the parent group model. Call after any tab group mutation.
+     */
+    updateTabGroups() {
+        this._tabGroupManager.update();
+    }
+    refreshTabGroupAccent() {
+        this._tabGroupManager.refreshAccents();
+    }
+    _handleChipDragStart(tabGroup, chip, event) {
+        var _a;
+        const firstPanelId = tabGroup.panelIds[0];
+        const firstIdx = firstPanelId
+            ? this._tabs.findIndex((t) => t.value.panel.id === firstPanelId)
+            : -1;
+        const chipRect = chip.element.getBoundingClientRect();
+        // Compute total group width (chip + all tabs)
+        let groupGapWidth = chipRect.width;
+        for (const pid of tabGroup.panelIds) {
+            const tabEntry = this._tabMap.get(pid);
+            if (tabEntry) {
+                groupGapWidth +=
+                    tabEntry.value.element.getBoundingClientRect().width;
+            }
+        }
+        this._animState = {
+            sourceTabId: '',
+            sourceIndex: firstIdx,
+            tabPositions: this.snapshotTabPositions(),
+            chipPositions: this._tabGroupManager.snapshotChipWidths(),
+            currentInsertionIndex: null,
+            targetTabGroupId: null,
+            sourceTabGroupId: tabGroup.id,
+            sourceGroupPanelIds: new Set(tabGroup.panelIds),
+            sourceChipWidth: chipRect.width,
+            cursorOffsetFromDragLeft: event.clientX - chipRect.left,
+            sourceGapWidth: groupGapWidth,
+            containerLeft: this._tabsList.getBoundingClientRect().left,
+        };
+        // Set LocalSelectionTransfer so drop targets recognise this as
+        // an internal dockview drag.  panelId is null (group-level),
+        // tabGroupId identifies which tab group is being dragged.
+        const panelTransfer = LocalSelectionTransfer.getInstance();
+        panelTransfer.setData([
+            new PanelTransfer(this.accessor.id, this.group.id, null, tabGroup.id),
+        ], PanelTransfer.prototype);
+        const iframes = disableIframePointEvents();
+        this._chipDragCleanup = {
+            dispose: () => {
+                panelTransfer.clearData(PanelTransfer.prototype);
+                iframes.release();
+            },
+        };
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            if (event.dataTransfer.items.length === 0) {
+                event.dataTransfer.setData('text/plain', '');
+            }
+        }
+        if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
+            // Collapse group tabs + chip after the browser
+            // captures the drag image, then open the gap at the
+            // source position — all instant (no transitions).
+            const groupPanelIds = new Set(tabGroup.panelIds);
+            this._pendingCollapse = true;
+            requestAnimationFrame(() => {
+                var _a;
+                var _b;
+                this._pendingCollapse = false;
+                if (!this._animState) {
+                    return;
+                }
+                // Collapse all group tabs instantly
+                for (const t of this._tabs) {
+                    if (groupPanelIds.has(t.value.panel.id)) {
+                        t.value.element.style.transition = 'none';
+                        toggleClass(t.value.element, 'dv-tab--dragging', true);
+                    }
+                }
+                // Collapse the group chip instantly
+                const chipEntry = this._tabGroupManager.chipRenderers.get(tabGroup.id);
+                if (chipEntry) {
+                    chipEntry.chip.element.style.transition = 'none';
+                    toggleClass(chipEntry.chip.element, 'dv-tab-group-chip--dragging', true);
+                }
+                // Single reflow for the entire batch
+                void this._tabsList.offsetHeight;
+                const underline = this._tabGroupManager.groupUnderlines.get(tabGroup.id);
+                if (underline) {
+                    underline.style.display = 'none';
+                }
+                (_a = (_b = this._animState).currentInsertionIndex) !== null && _a !== void 0 ? _a : (_b.currentInsertionIndex = firstIdx);
+                // Apply gap with transitions disabled
+                this.applyDragOverTransforms(true);
+                // Re-enable transitions for subsequent moves
+                for (const t of this._tabs) {
+                    if (groupPanelIds.has(t.value.panel.id)) {
+                        t.value.element.style.removeProperty('transition');
+                    }
+                }
+                if (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.
+     */
+    setExtendedDropZone(el) {
+        this._extendedDropZone = el;
+    }
+    /**
+     * Allows external elements (e.g. void container, left actions) to push an
+     * insertion index into the animation while the cursor is outside the tabs
+     * list itself.  Pass `null` to clear the indicator.
+     */
+    setExternalInsertionIndex(index) {
+        if (!this._animState) {
+            return;
+        }
+        if (index === this._animState.currentInsertionIndex) {
+            return;
+        }
+        this._animState.currentInsertionIndex = index;
+        this.applyDragOverTransforms();
+    }
+    /**
+     * Called when the drag cursor leaves the entire header area (not just the
+     * tabs list).  Clears animation state for cross-group drags, which never
+     * receive a `dragend` event on this tab list.
+     */
+    clearExternalAnimState() {
+        if (!this._animState) {
+            return;
+        }
+        this.resetTabTransforms();
+        if (this._animState.sourceIndex === -1) {
+            this._animState = null;
+        }
+        else {
+            this._animState.currentInsertionIndex = null;
+        }
+    }
     snapshotTabPositions() {
         const positions = new Map();
         for (const tab of this._tabs) {
@@ -349,103 +842,505 @@ export class Tabs extends CompositeDisposable {
         if (this._tabs.length === 0) {
             return 0;
         }
-        let totalWidth = 0;
+        const isVertical = this._direction === 'vertical';
+        let total = 0;
         for (const tab of this._tabs) {
-            totalWidth += tab.value.element.getBoundingClientRect().width;
+            const rect = tab.value.element.getBoundingClientRect();
+            total += isVertical ? rect.height : rect.width;
         }
-        return totalWidth / this._tabs.length;
+        return total / this._tabs.length;
     }
     handleDragOver(event) {
+        var _a, _b, _c, _d, _e;
         if (!this._animState) {
             return;
         }
         const mouseX = event.clientX;
         let insertionIndex = null;
+        let targetTabGroupId = null;
+        const sourceGroupPanelIds = this._animState.sourceGroupPanelIds;
+        // Accumulation approach: compute where the drag image's left edge
+        // would be, then walk tabs left-to-right using their original widths.
+        // A tab fits to the left of the gap if the cumulative width of all
+        // preceding non-source tabs <= available space.
+        const dragLeftEdge = mouseX - this._animState.cursorOffsetFromDragLeft;
+        const availableSpace = dragLeftEdge - this._animState.containerLeft;
+        let accWidth = 0;
+        // Build lookup: first panel ID of each non-source group → group ID
+        // so we can add chip widths when we encounter a group's first tab.
+        const firstPanelToGroup = new Map();
+        if (this._tabGroupManager.chipRenderers.size > 0) {
+            const tabGroups = this.group.model.getTabGroups();
+            for (const tg of tabGroups) {
+                if (tg.id === this._animState.sourceTabGroupId) {
+                    continue;
+                }
+                if (tg.panelIds.length > 0) {
+                    firstPanelToGroup.set(tg.panelIds[0], tg.id);
+                }
+            }
+        }
         for (let i = 0; i < this._tabs.length; i++) {
             const tab = this._tabs[i].value;
             if (tab.panel.id === this._animState.sourceTabId) {
                 continue;
             }
-            const rect = tab.element.getBoundingClientRect();
-            const 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).
+            const groupId = firstPanelToGroup.get(tab.panel.id);
+            if (groupId) {
+                const chipWidth = (_a = this._animState.chipPositions.get(groupId)) !== null && _a !== void 0 ? _a : 0;
+                if (accWidth + chipWidth > availableSpace) {
+                    // Chip alone overflows — gap goes before this group
+                    insertionIndex !== null && insertionIndex !== void 0 ? insertionIndex : (insertionIndex = i);
+                    break;
+                }
+                accWidth += chipWidth;
+            }
+            // Use original width (before collapse/transforms)
+            const origRect = this._animState.tabPositions.get(tab.panel.id);
+            const tabWidth = origRect
+                ? origRect.width
+                : tab.element.getBoundingClientRect().width;
+            // Shift at the midpoint: a tab moves left once the drag image
+            // covers half of it (like Chrome's tab drag behavior).
+            if (accWidth + tabWidth / 2 <= availableSpace) {
+                accWidth += tabWidth;
+                insertionIndex = i + 1;
+            }
+            else {
+                insertionIndex !== null && insertionIndex !== void 0 ? insertionIndex : (insertionIndex = i);
                 break;
             }
-            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) {
+            const isGroupDrag = !!this._animState.sourceTabGroupId;
+            const tabGroups = this.group.model.getTabGroups();
+            // Rebuild the accumulated width up to insertionIndex so we know
+            // the original right edge of the chip (if any) that precedes it.
+            // We walk exactly the same way as the accumulation loop above.
+            let accUpTo = 0;
+            for (let i = 0; i < this._tabs.length; i++) {
+                const tab = this._tabs[i].value;
+                if (tab.panel.id === this._animState.sourceTabId) {
+                    continue;
+                }
+                if (sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(tab.panel.id)) {
+                    continue;
+                }
+                if (i >= insertionIndex) {
+                    break;
+                }
+                const gid = firstPanelToGroup.get(tab.panel.id);
+                if (gid) {
+                    accUpTo += (_b = this._animState.chipPositions.get(gid)) !== null && _b !== void 0 ? _b : 0;
+                }
+                const origRect = this._animState.tabPositions.get(tab.panel.id);
+                accUpTo += origRect
+                    ? origRect.width
+                    : tab.element.getBoundingClientRect().width;
+            }
+            for (const tg of tabGroups) {
+                // Build effective panel list: exclude the source tab
+                // so that dragging a tab out of its own group doesn't
+                // inflate the group's index range.
+                const effectivePanelIds = tg.panelIds.filter((pid) => pid !== this._animState.sourceTabId &&
+                    !(sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(pid)));
+                if (effectivePanelIds.length === 0) {
+                    continue;
+                }
+                const firstIdx = this._tabs.findIndex((t) => t.value.panel.id === effectivePanelIds[0]);
+                const lastIdx = this._tabs.findIndex((t) => t.value.panel.id ===
+                    effectivePanelIds[effectivePanelIds.length - 1]);
+                if (firstIdx === -1 || lastIdx === -1) {
+                    continue;
+                }
+                const isInsideRange = insertionIndex >= firstIdx && insertionIndex <= lastIdx;
+                const isJustBeforeGroup = !isInsideRange && insertionIndex === firstIdx - 1;
+                if (!isInsideRange && !isJustBeforeGroup) {
+                    continue;
+                }
+                if (isGroupDrag) {
+                    // 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.
+                    const groupMid = (firstIdx + lastIdx + 1) / 2;
+                    if (insertionIndex < groupMid) {
+                        insertionIndex = firstIdx;
+                    }
+                    else {
+                        insertionIndex = lastIdx + 1;
+                    }
+                    // targetTabGroupId stays null
+                    break;
+                }
+                if (isJustBeforeGroup) {
+                    // Check whether only the source tab (or source group
+                    // tabs) sits between insertionIndex and firstIdx.
+                    // If so, the source is being dragged away from that
+                    // slot, so we ARE effectively "just before" the group
+                    // and should still allow dropping into position 0.
+                    let allInBetweenAreSource = true;
+                    for (let j = insertionIndex; j < firstIdx; j++) {
+                        const pid = this._tabs[j].value.panel.id;
+                        if (pid !== this._animState.sourceTabId &&
+                            !(sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(pid))) {
+                            allInBetweenAreSource = false;
+                            break;
+                        }
+                    }
+                    if (!allInBetweenAreSource) {
+                        continue;
+                    }
+                    const chipWidth = (_c = this._animState.chipPositions.get(tg.id)) !== null && _c !== void 0 ? _c : 0;
+                    const threshold = tg.collapsed
+                        ? this._animState.containerLeft +
+                            accUpTo +
+                            chipWidth / 2
+                        : this._animState.containerLeft + accUpTo + chipWidth;
+                    if (mouseX >= threshold) {
+                        insertionIndex = firstIdx;
+                        targetTabGroupId = tg.id;
+                    }
+                    break;
+                }
+                if (isInsideRange) {
+                    const chipWidth = (_d = this._animState.chipPositions.get(tg.id)) !== null && _d !== void 0 ? _d : 0;
+                    const chipOriginalRight = this._animState.containerLeft + accUpTo + chipWidth;
+                    if (insertionIndex === firstIdx) {
+                        if (mouseX >= chipOriginalRight) {
+                            targetTabGroupId = tg.id;
+                        }
+                    }
+                    else {
+                        targetTabGroupId = tg.id;
+                    }
+                    break;
+                }
+            }
+        }
+        if (insertionIndex === this._animState.currentInsertionIndex &&
+            targetTabGroupId === this._animState.targetTabGroupId) {
             return;
         }
         this._animState.currentInsertionIndex = insertionIndex;
-        this.applyDragOverTransforms();
+        this._animState.targetTabGroupId = targetTabGroupId;
+        if (((_e = this.accessor.options.theme) === null || _e === void 0 ? void 0 : _e.tabAnimation) === 'smooth') {
+            this.applyDragOverTransforms();
+        }
+    }
+    /**
+     * Batch-remove a CSS class from multiple elements instantly,
+     * forcing only a single reflow for the entire batch.
+     */
+    _removeClassInstantlyBatch(elements, cls) {
+        const affected = [];
+        for (const el of elements) {
+            if (el.classList.contains(cls)) {
+                el.style.transition = 'none';
+                toggleClass(el, cls, false);
+                affected.push(el);
+            }
+        }
+        if (affected.length > 0) {
+            void affected[0].offsetHeight; // single reflow for entire batch
+            for (const el of affected) {
+                el.style.removeProperty('transition');
+            }
+        }
+    }
+    /**
+     * Remove `dv-tab--dragging` from the source tab instantly so it
+     * regains its real width before FLIP snapshots.
+     */
+    _uncollapsSourceTab(sourceTabId) {
+        const entry = this._tabMap.get(sourceTabId);
+        if (entry) {
+            this._removeClassInstantlyBatch([entry.value.element], 'dv-tab--dragging');
+        }
     }
-    applyDragOverTransforms() {
+    applyDragOverTransforms(skipTransition = false) {
         if (!this._animState ||
             this._animState.currentInsertionIndex === null) {
             this.resetTabTransforms();
             return;
         }
+        // Don't apply transforms until the source tab has been collapsed
+        // in the rAF callback — otherwise the gap + visible source = jump.
+        if (this._pendingCollapse) {
+            return;
+        }
         const insertionIndex = this._animState.currentInsertionIndex;
-        const sourceRect = this._animState.tabPositions.get(this._animState.sourceTabId);
-        const 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
+        let gapWidth;
+        const sourceGroupPanelIds = this._animState.sourceGroupPanelIds;
+        if (this._animState.sourceTabGroupId && sourceGroupPanelIds) {
+            gapWidth = this._animState.sourceGapWidth;
+        }
+        else {
+            const sourceRect = this._animState.tabPositions.get(this._animState.sourceTabId);
+            gapWidth = sourceRect
+                ? sourceRect.width
+                : this.getAverageTabWidth();
+        }
+        // When the insertion lands at or before a group's first tab, shift
+        // the chip so the gap appears before the entire group.
+        //
+        // Two cases:
+        // 1. targetTabGroupId is null (standalone drop) — always shift chip.
+        // 2. targetTabGroupId is set AND the group is collapsed — shift chip
+        //    because the collapsed tabs are invisible, so putting the gap on
+        //    them has no visual effect.
+        let chipToShift = null;
+        if (this._tabGroupManager.chipRenderers.size > 0) {
+            const tabGroups = this.group.model.getTabGroups();
+            for (const tg of tabGroups) {
+                if (tg.id === this._animState.sourceTabGroupId)
+                    continue;
+                // Skip the group that the dragged tab belongs to — the
+                // gap should appear after the chip (where the tab was),
+                // not before it.
+                if (tg.panelIds.includes(this._animState.sourceTabId))
+                    continue;
+                const effectivePids = tg.panelIds.filter((pid) => pid !== this._animState.sourceTabId &&
+                    !(sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(pid)));
+                if (effectivePids.length === 0)
+                    continue;
+                const firstIdx = this._tabs.findIndex((t) => t.value.panel.id === effectivePids[0]);
+                // Only consider chip-shifting when dropping outside the
+                // group, or when dropping inside a collapsed group (whose
+                // tabs are invisible).
+                const shouldShiftChip = !this._animState.targetTabGroupId ||
+                    (this._animState.targetTabGroupId === tg.id &&
+                        tg.collapsed);
+                if (!shouldShiftChip)
+                    continue;
+                if (firstIdx >= insertionIndex) {
+                    let hasTabs = false;
+                    for (let j = insertionIndex; j < firstIdx; j++) {
+                        const pid = this._tabs[j].value.panel.id;
+                        if (pid === this._animState.sourceTabId)
+                            continue;
+                        if (sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(pid))
+                            continue;
+                        hasTabs = true;
+                        break;
+                    }
+                    if (!hasTabs) {
+                        const chipEntry = this._tabGroupManager.chipRenderers.get(tg.id);
+                        if (chipEntry) {
+                            chipToShift = chipEntry.chip.element;
+                        }
+                    }
+                    break;
+                }
+            }
+        }
+        // Helper: pick the correct shifting class for tabs vs chips.
+        const shiftingClass = (el) => el.classList.contains('dv-tab-group-chip')
+            ? 'dv-tab-group-chip--shifting'
+            : 'dv-tab--shifting';
+        // Helper: apply a margin-left value to an element, optionally
+        // bypassing CSS transitions for instant positioning.
+        const setMargin = (el, value) => {
+            if (skipTransition) {
+                el.style.transition = 'none';
+                el.style.marginLeft = value;
+                void el.offsetHeight;
+                el.style.removeProperty('transition');
+            }
+            else {
+                el.style.marginLeft = value;
+            }
+            toggleClass(el, shiftingClass(el), true);
+        };
+        const clearMargin = (el) => {
+            const cls = shiftingClass(el);
+            // Remove any previous pending listener for this element
+            const prev = this._pendingMarginCleanups.get(el);
+            if (prev) {
+                prev();
+            }
+            if (skipTransition || !el.style.marginLeft) {
+                el.style.removeProperty('margin-left');
+                toggleClass(el, cls, false);
+            }
+            else {
+                el.style.marginLeft = '0px';
+                toggleClass(el, cls, true);
+                const onEnd = () => {
+                    el.style.removeProperty('margin-left');
+                    toggleClass(el, cls, false);
+                    el.removeEventListener('transitionend', onEnd);
+                    clearTimeout(fallbackTimer);
+                    this._pendingMarginCleanups.delete(el);
+                };
+                // Fallback in case transitionend never fires
+                // (e.g. element removed from DOM mid-transition)
+                const fallbackTimer = setTimeout(onEnd, 300);
+                this._pendingMarginCleanups.set(el, onEnd);
+                el.addEventListener('transitionend', onEnd);
+            }
+        };
         let gapApplied = false;
+        // Reset all non-source chip margins first
+        for (const [groupId, entry] of this._tabGroupManager.chipRenderers) {
+            if (groupId === this._animState.sourceTabGroupId)
+                continue;
+            clearMargin(entry.chip.element);
+        }
+        // Apply gap to chip if insertion is before a group
+        if (chipToShift) {
+            setMargin(chipToShift, `${gapWidth}px`);
+            gapApplied = true;
+        }
         for (let i = 0; i < this._tabs.length; i++) {
             const tab = this._tabs[i].value;
             if (tab.panel.id === this._animState.sourceTabId) {
                 continue;
             }
+            if (sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(tab.panel.id)) {
+                continue;
+            }
             if (!gapApplied && i >= insertionIndex) {
-                tab.element.style.marginLeft = `${gapWidth}px`;
-                toggleClass(tab.element, 'dv-tab--shifting', true);
+                setMargin(tab.element, `${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';
-                    toggleClass(tab.element, 'dv-tab--shifting', true);
-                    const onEnd = () => {
-                        tab.element.style.removeProperty('margin-left');
-                        toggleClass(tab.element, 'dv-tab--shifting', false);
-                        tab.element.removeEventListener('transitionend', onEnd);
-                    };
-                    tab.element.addEventListener('transitionend', onEnd);
-                }
-                else {
-                    toggleClass(tab.element, 'dv-tab--shifting', false);
-                }
+                clearMargin(tab.element);
             }
         }
+        // Reposition underlines to follow shifted chips/tabs
+        this._tabGroupManager.trackUnderlines();
     }
     resetTabTransforms() {
+        // Cancel any pending margin transitionend listeners
+        for (const [, cleanup] of this._pendingMarginCleanups) {
+            cleanup();
+        }
+        this._pendingMarginCleanups.clear();
         for (const tab of this._tabs) {
             tab.value.element.style.removeProperty('margin-left');
+            tab.value.element.style.removeProperty('margin-right');
+            tab.value.element.style.removeProperty('margin-top');
+            tab.value.element.style.removeProperty('margin-bottom');
             tab.value.element.style.removeProperty('transform');
             toggleClass(tab.value.element, 'dv-tab--shifting', false);
         }
+        for (const [, entry] of this._tabGroupManager.chipRenderers) {
+            entry.chip.element.style.removeProperty('margin-left');
+            toggleClass(entry.chip.element, 'dv-tab-group-chip--shifting', false);
+        }
+        this._tabGroupManager.positionUnderlines();
+    }
+    /**
+     * Commit a group-drag drop: clear drag classes, move the group
+     * in the model, and run a FLIP animation.
+     */
+    _commitGroupMove(sourceTabGroupId, insertionIndex) {
+        var _a, _b, _c;
+        // Read transfer data BEFORE disposing cleanup — disposing
+        // _chipDragCleanup clears the global LocalSelectionTransfer
+        // singleton which getPanelData() reads from.
+        const data = 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).
+        const isLocal = this.group.model
+            .getTabGroups()
+            .some((tg) => tg.id === sourceTabGroupId);
+        if (isLocal) {
+            if (((_b = this.accessor.options.theme) === null || _b === void 0 ? void 0 : _b.tabAnimation) === 'smooth') {
+                this._clearGroupDragClasses(sourceTabGroupId);
+                const firstPositions = this.snapshotTabPositions();
+                this.resetTabTransforms();
+                this.group.model.moveTabGroup(sourceTabGroupId, insertionIndex);
+                this.runFlipAnimation(firstPositions, '', false);
+            }
+            else {
+                this._tabGroupManager.skipNextCollapseAnimation = true;
+                this.group.model.moveTabGroup(sourceTabGroupId, insertionIndex);
+            }
+        }
+        else if (data) {
+            // Cross-group: delegate to the component-level move which
+            // handles panel transfer and tab group recreation.
+            // Use the REAL tab group ID from transfer data, not the
+            // potentially stale one from _animState.
+            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,
+                },
+            });
+        }
+    }
+    _clearGroupDragClasses(sourceTabGroupId) {
+        const chipEntry = this._tabGroupManager.chipRenderers.get(sourceTabGroupId);
+        if (chipEntry) {
+            this._removeClassInstantlyBatch([chipEntry.chip.element], 'dv-tab-group-chip--dragging');
+        }
+        this._removeClassInstantlyBatch(this._tabs.map((t) => t.value.element), 'dv-tab--dragging');
+        // Restore underline
+        const underline = this._tabGroupManager.groupUnderlines.get(sourceTabGroupId);
+        if (underline) {
+            underline.style.removeProperty('display');
+        }
+        // The subsequent moveTabGroup will re-create tabs and call
+        // updateTabGroups → _updateTabGroupClasses. For collapsed groups
+        // the new tabs don't have dv-tab--group-collapsed yet, which
+        // would trigger the collapse animation. Skip it.
+        this._tabGroupManager.skipNextCollapseAnimation = true;
     }
     resetDragAnimation() {
+        var _a, _b;
+        this._pendingCollapse = false;
         this.resetTabTransforms();
+        // Clear drag-collapse classes instantly (no transition)
+        if ((_a = this._animState) === null || _a === void 0 ? void 0 : _a.sourceTabGroupId) {
+            this._clearGroupDragClasses(this._animState.sourceTabGroupId);
+        }
+        else {
+            this._removeClassInstantlyBatch(this._tabs.map((t) => t.value.element), 'dv-tab--dragging');
+        }
         this._animState = null;
-        for (const tab of this._tabs) {
-            toggleClass(tab.value.element, 'dv-tab--dragging', false);
+        (_b = this._chipDragCleanup) === null || _b === void 0 ? void 0 : _b.dispose();
+        this._chipDragCleanup = null;
+        // Restore any hidden underlines from group drags
+        for (const [, el] of this._tabGroupManager.groupUnderlines) {
+            el.style.removeProperty('display');
         }
     }
     runFlipAnimation(firstPositions, sourceTabId, isCrossGroup = false, animRange) {
+        const isVertical = this._direction === 'vertical';
         let hasAnimation = false;
         for (let i = 0; i < this._tabs.length; i++) {
             const tab = this._tabs[i];
             const panelId = tab.value.panel.id;
             if (panelId === sourceTabId) {
                 if (isCrossGroup) {
-                    // Newly inserted tab: slide in from the right
+                    // Newly inserted tab: slide in from the end
                     const rect = tab.value.element.getBoundingClientRect();
-                    tab.value.element.style.transform = `translateX(${rect.width}px)`;
+                    tab.value.element.style.transform = isVertical
+                        ? `translateY(${rect.height}px)`
+                        : `translateX(${rect.width}px)`;
                     toggleClass(tab.value.element, 'dv-tab--shifting', true);
                     hasAnimation = true;
                 }
@@ -461,11 +1356,15 @@ export class Tabs extends CompositeDisposable {
                 continue;
             }
             const lastRect = tab.value.element.getBoundingClientRect();
-            const deltaX = firstRect.left - lastRect.left;
-            if (Math.abs(deltaX) < 1) {
+            const delta = isVertical
+                ? firstRect.top - lastRect.top
+                : firstRect.left - lastRect.left;
+            if (Math.abs(delta) < 1) {
                 continue;
             }
-            tab.value.element.style.transform = `translateX(${deltaX}px)`;
+            tab.value.element.style.transform = isVertical
+                ? `translateY(${delta}px)`
+                : `translateX(${delta}px)`;
             toggleClass(tab.value.element, 'dv-tab--shifting', true);
             hasAnimation = true;
         }
@@ -473,19 +1372,32 @@ export class Tabs extends CompositeDisposable {
             return;
         }
         requestAnimationFrame(() => {
+            var _a;
             for (const tab of this._tabs) {
                 if (tab.value.element.style.transform) {
                     tab.value.element.style.transform = '';
                 }
             }
+            // Track underlines during the FLIP transition so they
+            // follow tabs as they slide to their final positions.
+            this._tabGroupManager.trackUnderlines();
+            // Clean up any previous flip transition listener
+            (_a = this._flipTransitionCleanup) === null || _a === void 0 ? void 0 : _a.call(this);
             const onTransitionEnd = (event) => {
                 if (event.propertyName === 'transform') {
-                    this._tabsList.removeEventListener('transitionend', onTransitionEnd);
+                    cleanup();
                     for (const tab of this._tabs) {
                         toggleClass(tab.value.element, 'dv-tab--shifting', false);
                     }
+                    // Final reposition after animation settles
+                    this._tabGroupManager.positionUnderlines();
                 }
             };
+            const cleanup = () => {
+                this._tabsList.removeEventListener('transitionend', onTransitionEnd);
+                this._flipTransitionCleanup = null;
+            };
+            this._flipTransitionCleanup = cleanup;
             this._tabsList.addEventListener('transitionend', onTransitionEnd);
         });
     }