dockview-core 5.1.0 → 6.0.0

package/dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -14,6 +14,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -39,17 +50,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DockviewGroupPanelModel = exports.DockviewWillDropEvent = exports.DockviewDidDropEvent = void 0;
 var component_api_1 = require("../api/component.api");
@@ -61,6 +61,7 @@ var lifecycle_1 = require("../lifecycle");
 var content_1 = require("./components/panel/content");
 var tabsContainer_1 = require("./components/titlebar/tabsContainer");
 var options_1 = require("./options");
+var tabGroup_1 = require("./tabGroup");
 var DockviewDidDropEvent = /** @class */ (function (_super) {
     __extends(DockviewDidDropEvent, _super);
     function DockviewDidDropEvent(options) {
@@ -151,6 +152,8 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         _this._height = 0;
         _this._panels = [];
         _this._panelDisposables = new Map();
+        _this._tabGroupDisposables = new Map();
+        _this._pendingMicrotaskDisposables = new Set();
         _this._onMove = new events_1.Emitter();
         _this.onMove = _this._onMove.event;
         _this._onDidDrop = new events_1.Emitter();
@@ -175,6 +178,23 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         _this.onDidActivePanelChange = _this._onDidActivePanelChange.event;
         _this._onUnhandledDragOverEvent = new events_1.Emitter();
         _this.onUnhandledDragOverEvent = _this._onUnhandledDragOverEvent.event;
+        _this._tabGroups = [];
+        _this._tabGroupMap = new Map();
+        _this._panelToTabGroup = new Map();
+        _this._tabGroupIdCounter = 0;
+        _this._pendingTabGroupUpdate = false;
+        _this._onDidCreateTabGroup = new events_1.Emitter();
+        _this.onDidCreateTabGroup = _this._onDidCreateTabGroup.event;
+        _this._onDidDestroyTabGroup = new events_1.Emitter();
+        _this.onDidDestroyTabGroup = _this._onDidDestroyTabGroup.event;
+        _this._onDidAddPanelToTabGroup = new events_1.Emitter();
+        _this.onDidAddPanelToTabGroup = _this._onDidAddPanelToTabGroup.event;
+        _this._onDidRemovePanelFromTabGroup = new events_1.Emitter();
+        _this.onDidRemovePanelFromTabGroup = _this._onDidRemovePanelFromTabGroup.event;
+        _this._onDidTabGroupChange = new events_1.Emitter();
+        _this.onDidTabGroupChange = _this._onDidTabGroupChange.event;
+        _this._onDidTabGroupCollapsedChange = new events_1.Emitter();
+        _this.onDidTabGroupCollapsedChange = _this._onDidTabGroupCollapsedChange.event;
         (0, dom_1.toggleClass)(_this.container, 'dv-groupview', true);
         _this._api = new component_api_1.DockviewApi(_this.accessor);
         _this.tabsContainer = new tabsContainer_1.TabsContainer(_this.accessor, _this.groupPanel);
@@ -189,7 +209,52 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         }), _this.tabsContainer.onGroupDragStart(function (event) {
             _this._onGroupDragStart.fire(event);
         }), _this.tabsContainer.onDrop(function (event) {
+            var e_1, _a;
+            var _b;
+            // Capture panel data before handleDropEvent (which may trigger moves)
+            var dragData = (0, dataTransfer_1.getPanelData)();
+            var draggedPanelId = (_b = dragData === null || dragData === void 0 ? void 0 : dragData.panelId) !== null && _b !== void 0 ? _b : null;
             _this.handleDropEvent('header', event.event, 'center', event.index);
+            // Update tab group membership after the move completes
+            if (draggedPanelId && event.targetTabGroupId) {
+                // Compute the local index within the target tab group
+                // from the global panel index so the panel is inserted
+                // at the correct position, not just appended.
+                var tabGroup = _this._tabGroupMap.get(event.targetTabGroupId);
+                var localIndex = void 0;
+                if (tabGroup) {
+                    var globalIdx = _this._panels.findIndex(function (p) { return p.id === draggedPanelId; });
+                    if (globalIdx !== -1) {
+                        // Count how many of this group's panels
+                        // appear before the dragged panel
+                        localIndex = 0;
+                        var _loop_1 = function (pid) {
+                            var pidIdx = _this._panels.findIndex(function (p) { return p.id === pid; });
+                            if (pidIdx < globalIdx) {
+                                localIndex++;
+                            }
+                        };
+                        try {
+                            for (var _c = __values(tabGroup.panelIds), _d = _c.next(); !_d.done; _d = _c.next()) {
+                                var pid = _d.value;
+                                _loop_1(pid);
+                            }
+                        }
+                        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                        finally {
+                            try {
+                                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                        }
+                    }
+                }
+                _this.addPanelToTabGroup(event.targetTabGroupId, draggedPanelId, localIndex);
+            }
+            else if (draggedPanelId && event.targetTabGroupId === null) {
+                // Dropped outside any group — remove from current group
+                _this.removePanelFromTabGroup(draggedPanelId);
+            }
         }), _this.contentContainer.onDidFocus(function () {
             _this.accessor.doSetGroupActive(_this.groupPanel);
         }), _this.contentContainer.onDidBlur(function () {
@@ -206,9 +271,28 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
                 group: _this.groupPanel,
                 getData: dataTransfer_1.getPanelData,
             }));
-        }), _this._onMove, _this._onDidChange, _this._onDidDrop, _this._onWillDrop, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidActivePanelChange, _this._onUnhandledDragOverEvent, _this._onDidPanelTitleChange, _this._onDidPanelParametersChange);
+        }), _this._onMove, _this._onDidChange, _this._onDidDrop, _this._onWillDrop, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidActivePanelChange, _this._onUnhandledDragOverEvent, _this._onDidPanelTitleChange, _this._onDidPanelParametersChange, _this._onDidCreateTabGroup, _this._onDidDestroyTabGroup, _this._onDidAddPanelToTabGroup, _this._onDidRemovePanelFromTabGroup, _this._onDidTabGroupChange, _this._onDidTabGroupCollapsedChange, _this._onDidCreateTabGroup.event(function () {
+            _this._scheduleTabGroupUpdate();
+        }), _this._onDidDestroyTabGroup.event(function () {
+            _this._scheduleTabGroupUpdate();
+        }), _this._onDidAddPanelToTabGroup.event(function () {
+            _this._scheduleTabGroupUpdate();
+        }), _this._onDidRemovePanelFromTabGroup.event(function () {
+            _this._scheduleTabGroupUpdate();
+        }), _this._onDidTabGroupChange.event(function () {
+            _this._scheduleTabGroupUpdate();
+        }), _this._onDidTabGroupCollapsedChange.event(function () {
+            _this._scheduleTabGroupUpdate();
+        }));
         return _this;
     }
+    Object.defineProperty(DockviewGroupPanelModel.prototype, "tabGroups", {
+        get: function () {
+            return this._tabGroups;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DockviewGroupPanelModel.prototype, "element", {
         get: function () {
             throw new Error('dockview: not supported');
@@ -321,6 +405,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             this._location = value;
             (0, dom_1.toggleClass)(this.container, 'dv-groupview-floating', false);
             (0, dom_1.toggleClass)(this.container, 'dv-groupview-popout', false);
+            (0, dom_1.toggleClass)(this.container, 'dv-groupview-edge', false);
             switch (value.type) {
                 case 'grid':
                     this.contentContainer.dropTarget.setTargetZones([
@@ -342,6 +427,10 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
                     this.contentContainer.dropTarget.setTargetZones(['center']);
                     (0, dom_1.toggleClass)(this.container, 'dv-groupview-popout', true);
                     break;
+                case 'edge':
+                    this.contentContainer.dropTarget.setTargetZones(['center']);
+                    (0, dom_1.toggleClass)(this.container, 'dv-groupview-edge', true);
+                    break;
             }
             this.groupPanel.api._onDidLocationChange.fire({
                 location: this.location,
@@ -350,6 +439,452 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    DockviewGroupPanelModel.prototype._scheduleTabGroupUpdate = function () {
+        var _this = this;
+        if (this._pendingTabGroupUpdate) {
+            return;
+        }
+        this._pendingTabGroupUpdate = true;
+        queueMicrotask(function () {
+            _this._pendingTabGroupUpdate = false;
+            if (!_this.isDisposed) {
+                _this.tabsContainer.updateTabGroups();
+            }
+        });
+    };
+    DockviewGroupPanelModel.prototype.createTabGroup = function (options) {
+        var _this = this;
+        var _a;
+        var id = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : "tg-".concat(this.id, "-").concat(this._tabGroupIdCounter++);
+        var tabGroup = new tabGroup_1.TabGroup(id, {
+            label: options === null || options === void 0 ? void 0 : options.label,
+            color: options === null || options === void 0 ? void 0 : options.color,
+            collapsed: options === null || options === void 0 ? void 0 : options.collapsed,
+            componentParams: options === null || options === void 0 ? void 0 : options.componentParams,
+        });
+        this._tabGroups.push(tabGroup);
+        this._tabGroupMap.set(id, tabGroup);
+        this._tabGroupDisposables.set(id, new lifecycle_1.CompositeDisposable(tabGroup.onDidChange(function () {
+            _this._onDidTabGroupChange.fire({ tabGroup: tabGroup });
+        }), tabGroup.onDidCollapseChange(function (isCollapsed) {
+            if (isCollapsed) {
+                _this._handleGroupCollapse(tabGroup);
+            }
+            else {
+                _this._handleGroupExpand(tabGroup);
+            }
+            _this._onDidTabGroupCollapsedChange.fire({
+                tabGroup: tabGroup,
+            });
+        }), tabGroup.onDidDestroy(function () {
+            _this._removeTabGroupInternal(tabGroup);
+        })));
+        this._onDidCreateTabGroup.fire({ tabGroup: tabGroup });
+        return tabGroup;
+    };
+    DockviewGroupPanelModel.prototype.dissolveTabGroup = function (tabGroupId) {
+        var e_2, _a;
+        var tabGroup = this._tabGroupMap.get(tabGroupId);
+        if (!tabGroup) {
+            return;
+        }
+        // Remove all panels from the group (they stay in the flat panel list)
+        var panelIds = __spreadArray([], __read(tabGroup.panelIds), false);
+        try {
+            for (var panelIds_1 = __values(panelIds), panelIds_1_1 = panelIds_1.next(); !panelIds_1_1.done; panelIds_1_1 = panelIds_1.next()) {
+                var panelId = panelIds_1_1.value;
+                tabGroup.removePanel(panelId);
+                this._panelToTabGroup.delete(panelId);
+                this._onDidRemovePanelFromTabGroup.fire({ tabGroup: tabGroup, panelId: panelId });
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (panelIds_1_1 && !panelIds_1_1.done && (_a = panelIds_1.return)) _a.call(panelIds_1);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        tabGroup.dispose();
+    };
+    DockviewGroupPanelModel.prototype.addPanelToTabGroup = function (tabGroupId, panelId, index) {
+        var tabGroup = this._tabGroupMap.get(tabGroupId);
+        if (!tabGroup) {
+            return;
+        }
+        // Ensure the panel actually exists in this group model
+        if (!this._panels.some(function (p) { return p.id === panelId; })) {
+            return;
+        }
+        // Remove from any existing group first
+        var existingGroup = this.getTabGroupForPanel(panelId);
+        if (existingGroup) {
+            if (existingGroup.id === tabGroupId) {
+                return; // already in this group
+            }
+            this.removePanelFromTabGroup(panelId);
+        }
+        tabGroup.addPanel(panelId, index);
+        this._panelToTabGroup.set(panelId, tabGroup);
+        // Enforce contiguity: move the panel in the flat _panels array
+        // to the correct global position matching its group-local index
+        this._enforceContiguity(tabGroup, panelId);
+        this._onDidAddPanelToTabGroup.fire({ tabGroup: tabGroup, panelId: panelId });
+    };
+    /**
+     * Move a panel to a new index within its tab group.
+     * Updates both the group's panelIds order and the flat _panels array.
+     */
+    DockviewGroupPanelModel.prototype.movePanelWithinGroup = function (tabGroupId, panelId, newIndex) {
+        var tabGroup = this._tabGroupMap.get(tabGroupId);
+        if (!tabGroup || !tabGroup.containsPanel(panelId)) {
+            return;
+        }
+        // Remove and re-add at new index within the group
+        tabGroup.removePanel(panelId);
+        tabGroup.addPanel(panelId, newIndex);
+        // Re-enforce contiguity in the flat array
+        this._enforceContiguity(tabGroup, panelId);
+        this.tabsContainer.updateTabGroups();
+    };
+    /**
+     * Move a panel from one tab group to another.
+     */
+    DockviewGroupPanelModel.prototype.movePanelBetweenGroups = function (sourcePanelId, targetTabGroupId, targetIndex) {
+        var sourceGroup = this._findTabGroupForPanel(sourcePanelId);
+        var targetGroup = this._tabGroupMap.get(targetTabGroupId);
+        if (!targetGroup) {
+            return;
+        }
+        if (sourceGroup) {
+            sourceGroup.removePanel(sourcePanelId);
+            this._panelToTabGroup.delete(sourcePanelId);
+            this._onDidRemovePanelFromTabGroup.fire({
+                tabGroup: sourceGroup,
+                panelId: sourcePanelId,
+            });
+            // Auto-destroy empty source group
+            if (sourceGroup.isEmpty) {
+                sourceGroup.dispose();
+            }
+        }
+        targetGroup.addPanel(sourcePanelId, targetIndex);
+        this._panelToTabGroup.set(sourcePanelId, targetGroup);
+        this._enforceContiguity(targetGroup, sourcePanelId);
+        this._onDidAddPanelToTabGroup.fire({
+            tabGroup: targetGroup,
+            panelId: sourcePanelId,
+        });
+    };
+    /**
+     * Move an entire tab group to a new position in the tab bar.
+     * The group's internal panel order is preserved.
+     */
+    DockviewGroupPanelModel.prototype.moveTabGroup = function (tabGroupId, targetIndex) {
+        var e_3, _a, _b, e_4, _c;
+        var _this = this;
+        var tabGroup = this._tabGroupMap.get(tabGroupId);
+        if (!tabGroup || tabGroup.panelIds.length === 0) {
+            return;
+        }
+        // Collect group panels in their current order
+        var groupPanelIds = new Set(tabGroup.panelIds);
+        var groupPanels = tabGroup.panelIds
+            .map(function (pid) { return _this._panels.find(function (p) { return p.id === pid; }); })
+            .filter(function (p) { return p !== undefined; });
+        if (groupPanels.length === 0) {
+            return;
+        }
+        // Count how many group panels sit before the target index so
+        // we can compensate after removing them from the array.
+        var groupPanelsBefore = 0;
+        for (var i = 0; i < Math.min(targetIndex, this._panels.length); i++) {
+            if (groupPanelIds.has(this._panels[i].id)) {
+                groupPanelsBefore++;
+            }
+        }
+        try {
+            // Remove group panels from the flat array
+            for (var groupPanels_1 = __values(groupPanels), groupPanels_1_1 = groupPanels_1.next(); !groupPanels_1_1.done; groupPanels_1_1 = groupPanels_1.next()) {
+                var panel = groupPanels_1_1.value;
+                var idx = this._panels.indexOf(panel);
+                if (idx !== -1) {
+                    this._panels.splice(idx, 1);
+                }
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (groupPanels_1_1 && !groupPanels_1_1.done && (_a = groupPanels_1.return)) _a.call(groupPanels_1);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+        // Adjust target index to account for removed panels
+        var adjustedIndex = targetIndex - groupPanelsBefore;
+        // Clamp target index to valid range after removal
+        var insertAt = Math.max(0, Math.min(adjustedIndex, this._panels.length));
+        // Insert group panels at the target position
+        (_b = this._panels).splice.apply(_b, __spreadArray([insertAt, 0], __read(groupPanels), false));
+        try {
+            // Rebuild the tabs container to match new order
+            for (var _d = __values(this._panels), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var panel = _e.value;
+                this.tabsContainer.delete(panel.id);
+            }
+        }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        finally {
+            try {
+                if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+            }
+            finally { if (e_4) throw e_4.error; }
+        }
+        for (var i = 0; i < this._panels.length; i++) {
+            this.tabsContainer.openPanel(this._panels[i], i);
+        }
+        this.tabsContainer.updateTabGroups();
+    };
+    /**
+     * Ensure a panel is at the correct global index in _panels
+     * to maintain contiguity of its tab group members.
+     */
+    DockviewGroupPanelModel.prototype._enforceContiguity = function (tabGroup, panelId) {
+        var panel = this._panels.find(function (p) { return p.id === panelId; });
+        if (!panel) {
+            return;
+        }
+        var localIndex = tabGroup.indexOfPanel(panelId);
+        var globalIndex = this._computeGlobalIndex(tabGroup, localIndex);
+        var currentIndex = this._panels.indexOf(panel);
+        if (currentIndex === globalIndex) {
+            return;
+        }
+        // Move panel in the flat array
+        this._panels.splice(currentIndex, 1);
+        var adjustedIndex = globalIndex > currentIndex ? globalIndex - 1 : globalIndex;
+        this._panels.splice(adjustedIndex, 0, panel);
+        // Reorder in the tabs container to match
+        this.tabsContainer.delete(panelId);
+        this.tabsContainer.openPanel(panel, adjustedIndex);
+    };
+    /**
+     * Compute the global index in _panels for a group-local index.
+     * Finds where the group's panels start in the flat array and offsets.
+     */
+    DockviewGroupPanelModel.prototype._computeGlobalIndex = function (tabGroup, localIndex) {
+        var groupPanelIds = tabGroup.panelIds;
+        if (groupPanelIds.length <= 1) {
+            // Only one panel (the one being added), keep current position
+            var panel = this._panels.find(function (p) { return p.id === groupPanelIds[0]; });
+            return panel ? this._panels.indexOf(panel) : this._panels.length;
+        }
+        var _loop_2 = function (i) {
+            if (i === localIndex) {
+                return "continue";
+            }
+            var existingPanel = this_1._panels.find(function (p) { return p.id === groupPanelIds[i]; });
+            if (existingPanel) {
+                var existingGlobalIndex = this_1._panels.indexOf(existingPanel);
+                return { value: Math.max(0, existingGlobalIndex + (localIndex - i)) };
+            }
+        };
+        var this_1 = this;
+        // Find the first existing group member (other than the one at localIndex)
+        // to anchor the group position
+        for (var i = 0; i < groupPanelIds.length; i++) {
+            var state_1 = _loop_2(i);
+            if (typeof state_1 === "object")
+                return state_1.value;
+        }
+        return this._panels.length;
+    };
+    DockviewGroupPanelModel.prototype.removePanelFromTabGroup = function (panelId) {
+        var tabGroup = this._findTabGroupForPanel(panelId);
+        if (!tabGroup) {
+            return;
+        }
+        tabGroup.removePanel(panelId);
+        this._panelToTabGroup.delete(panelId);
+        this._onDidRemovePanelFromTabGroup.fire({ tabGroup: tabGroup, panelId: panelId });
+        // Auto-destroy empty groups
+        if (tabGroup.isEmpty) {
+            tabGroup.dispose();
+        }
+    };
+    DockviewGroupPanelModel.prototype.getTabGroups = function () {
+        return this._tabGroups;
+    };
+    DockviewGroupPanelModel.prototype.updateTabGroups = function () {
+        this.tabsContainer.updateTabGroups();
+    };
+    DockviewGroupPanelModel.prototype.refreshTabGroupAccent = function () {
+        this.tabsContainer.refreshTabGroupAccent();
+    };
+    DockviewGroupPanelModel.prototype.getTabGroupForPanel = function (panelId) {
+        return this._findTabGroupForPanel(panelId);
+    };
+    DockviewGroupPanelModel.prototype._findTabGroupForPanel = function (panelId) {
+        return this._panelToTabGroup.get(panelId);
+    };
+    DockviewGroupPanelModel.prototype._removeTabGroupInternal = function (tabGroup) {
+        var e_5, _a;
+        var _this = this;
+        var index = this._tabGroups.indexOf(tabGroup);
+        if (index !== -1) {
+            this._tabGroups.splice(index, 1);
+            this._tabGroupMap.delete(tabGroup.id);
+            try {
+                for (var _b = __values(tabGroup.panelIds), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var panelId = _c.value;
+                    this._panelToTabGroup.delete(panelId);
+                }
+            }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_5) throw e_5.error; }
+            }
+            this._onDidDestroyTabGroup.fire({ tabGroup: tabGroup });
+            // Dispose the external listeners (onDidChange, onDidCollapseChange)
+            // we registered on this group. We cannot dispose synchronously
+            // here because this method runs inside the onDidDestroy fire
+            // loop — disposing the CompositeDisposable that holds the
+            // onDidDestroy subscription would splice listeners mid-iteration.
+            // Schedule cleanup on the next microtask instead.
+            var tabGroupDisposable_1 = this._tabGroupDisposables.get(tabGroup.id);
+            this._tabGroupDisposables.delete(tabGroup.id);
+            if (tabGroupDisposable_1) {
+                this._pendingMicrotaskDisposables.add(tabGroupDisposable_1);
+                queueMicrotask(function () {
+                    _this._pendingMicrotaskDisposables.delete(tabGroupDisposable_1);
+                    tabGroupDisposable_1.dispose();
+                });
+            }
+        }
+    };
+    DockviewGroupPanelModel.prototype._handleGroupCollapse = function (tabGroup) {
+        if (!this._activePanel) {
+            return;
+        }
+        // Only act if the active panel belongs to the collapsed group
+        if (!tabGroup.containsPanel(this._activePanel.id)) {
+            return;
+        }
+        var activePanelIndex = this._panels.indexOf(this._activePanel);
+        // Search right first, then left, for a visible (non-collapsed-group) panel
+        for (var i = activePanelIndex + 1; i < this._panels.length; i++) {
+            var candidate = this._panels[i];
+            var candidateGroup = this._findTabGroupForPanel(candidate.id);
+            if (!candidateGroup || !candidateGroup.collapsed) {
+                this.doSetActivePanel(candidate);
+                this.updateContainer();
+                return;
+            }
+        }
+        for (var i = activePanelIndex - 1; i >= 0; i--) {
+            var candidate = this._panels[i];
+            var candidateGroup = this._findTabGroupForPanel(candidate.id);
+            if (!candidateGroup || !candidateGroup.collapsed) {
+                this.doSetActivePanel(candidate);
+                this.updateContainer();
+                return;
+            }
+        }
+        // All tabs are in collapsed groups — show watermark
+        this.contentContainer.closePanel();
+        this.doSetActivePanel(undefined);
+        this.updateContainer();
+    };
+    DockviewGroupPanelModel.prototype._handleGroupExpand = function (tabGroup) {
+        if (this._activePanel) {
+            return;
+        }
+        // Watermark is showing because all groups were collapsed.
+        // Activate the first panel in the newly expanded group.
+        var firstPanelId = tabGroup.panelIds[0];
+        if (firstPanelId) {
+            var panel = this._panels.find(function (p) { return p.id === firstPanelId; });
+            if (panel) {
+                this.doSetActivePanel(panel);
+                this.updateContainer();
+            }
+        }
+    };
+    /** Restore tab groups from serialized data (used by fromJSON) */
+    DockviewGroupPanelModel.prototype.restoreTabGroups = function (serializedGroups) {
+        var e_6, _a, e_7, _b, e_8, _c;
+        try {
+            // Bump counter past any restored numeric suffixes to avoid ID collisions
+            for (var serializedGroups_1 = __values(serializedGroups), serializedGroups_1_1 = serializedGroups_1.next(); !serializedGroups_1_1.done; serializedGroups_1_1 = serializedGroups_1.next()) {
+                var data = serializedGroups_1_1.value;
+                var match = data.id.match(/-(\d+)$/);
+                if (match) {
+                    var num = parseInt(match[1], 10) + 1;
+                    if (num > this._tabGroupIdCounter) {
+                        this._tabGroupIdCounter = num;
+                    }
+                }
+            }
+        }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        finally {
+            try {
+                if (serializedGroups_1_1 && !serializedGroups_1_1.done && (_a = serializedGroups_1.return)) _a.call(serializedGroups_1);
+            }
+            finally { if (e_6) throw e_6.error; }
+        }
+        try {
+            for (var serializedGroups_2 = __values(serializedGroups), serializedGroups_2_1 = serializedGroups_2.next(); !serializedGroups_2_1.done; serializedGroups_2_1 = serializedGroups_2.next()) {
+                var data = serializedGroups_2_1.value;
+                var tabGroup = this.createTabGroup({
+                    id: data.id,
+                    label: data.label,
+                    color: data.color,
+                    componentParams: data.componentParams,
+                });
+                var concreteGroup = this._tabGroupMap.get(tabGroup.id);
+                var _loop_3 = function (panelId) {
+                    // Only add panels that actually exist in this group model
+                    if (this_2._panels.some(function (p) { return p.id === panelId; })) {
+                        tabGroup.addPanel(panelId);
+                        this_2._panelToTabGroup.set(panelId, concreteGroup);
+                        this_2._enforceContiguity(concreteGroup, panelId);
+                    }
+                };
+                var this_2 = this;
+                try {
+                    for (var _d = (e_8 = void 0, __values(data.panelIds)), _e = _d.next(); !_e.done; _e = _d.next()) {
+                        var panelId = _e.value;
+                        _loop_3(panelId);
+                    }
+                }
+                catch (e_8_1) { e_8 = { error: e_8_1 }; }
+                finally {
+                    try {
+                        if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+                    }
+                    finally { if (e_8) throw e_8.error; }
+                }
+                if (data.collapsed) {
+                    tabGroup.collapse();
+                }
+                // Auto-destroy if no valid panels were added
+                if (tabGroup.isEmpty) {
+                    tabGroup.dispose();
+                }
+            }
+        }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        finally {
+            try {
+                if (serializedGroups_2_1 && !serializedGroups_2_1.done && (_b = serializedGroups_2.return)) _b.call(serializedGroups_2);
+            }
+            finally { if (e_7) throw e_7.error; }
+        }
+    };
     DockviewGroupPanelModel.prototype.focusContent = function () {
         this.contentContainer.element.focus();
     };
@@ -471,6 +1006,9 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         if (this.headerPosition !== 'top') {
             result.headerPosition = this.headerPosition;
         }
+        if (this._tabGroups.length > 0) {
+            result.tabGroups = this._tabGroups.map(function (tg) { return tg.toJSON(); });
+        }
         return result;
     };
     DockviewGroupPanelModel.prototype.moveToNext = function (options) {
@@ -577,7 +1115,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         return this._removePanel(panelToRemove, options);
     };
     DockviewGroupPanelModel.prototype.closeAllPanels = function () {
-        var e_1, _a;
+        var e_9, _a;
         if (this.panels.length > 0) {
             // take a copy since we will be edting the array as we iterate through
             var arrPanelCpy = __spreadArray([], __read(this.panels), false);
@@ -587,12 +1125,12 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
                     this.doClose(panel);
                 }
             }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            catch (e_9_1) { e_9 = { error: e_9_1 }; }
             finally {
                 try {
                     if (arrPanelCpy_1_1 && !arrPanelCpy_1_1.done && (_a = arrPanelCpy_1.return)) _a.call(arrPanelCpy_1);
                 }
-                finally { if (e_1) throw e_1.error; }
+                finally { if (e_9) throw e_9.error; }
             }
         }
         else {
@@ -615,6 +1153,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         this.tabsContainer.setRightActionsElement(element);
     };
     DockviewGroupPanelModel.prototype.setActive = function (isGroupActive, force) {
+        var _this = this;
         if (force === void 0) { force = false; }
         if (!force && this.isActive === isGroupActive) {
             return;
@@ -624,7 +1163,13 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         (0, dom_1.toggleClass)(this.container, 'dv-inactive-group', !isGroupActive);
         this.tabsContainer.setActive(this.isActive);
         if (!this._activePanel && this.panels.length > 0) {
-            this.doSetActivePanel(this.panels[0]);
+            var candidate = this._panels.find(function (p) {
+                var tg = _this._findTabGroupForPanel(p.id);
+                return !tg || !tg.collapsed;
+            });
+            if (candidate) {
+                this.doSetActivePanel(candidate);
+            }
         }
         this.updateContainer();
     };
@@ -671,6 +1216,8 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             disposable.dispose();
             this._panelDisposables.delete(panel.id);
         }
+        // Remove panel from its tab group (auto-destroys empty groups)
+        this.removePanelFromTabGroup(panel.id);
         this._onDidRemovePanel.fire({ panel: panel });
     };
     DockviewGroupPanelModel.prototype.doAddPanel = function (panel, index, options) {
@@ -728,7 +1275,8 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         var _this = this;
         var _a, _b;
         this.panels.forEach(function (panel) { return panel.runEvents(); });
-        if (this.isEmpty && !this.watermark) {
+        var shouldShowWatermark = this.isEmpty || !this._activePanel;
+        if (shouldShowWatermark && !this.watermark) {
             var watermark = this.accessor.createWatermarkComponent();
             watermark.init({
                 containerApi: this._api,
@@ -742,7 +1290,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             });
             this.contentContainer.element.appendChild(this.watermark.element);
         }
-        if (!this.isEmpty && this.watermark) {
+        if (!shouldShowWatermark && this.watermark) {
             this.watermark.element.remove();
             (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
             this.watermark = undefined;
@@ -807,6 +1355,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
                     target: position,
                     groupId: groupId_1,
                     index: index,
+                    tabGroupId: data.tabGroupId,
                 });
                 return;
             }
@@ -844,24 +1393,67 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         this.tabsContainer.updateDragAndDropState();
     };
     DockviewGroupPanelModel.prototype.dispose = function () {
-        var e_2, _a;
-        var _b, _c, _d;
+        var e_10, _a, e_11, _b, e_12, _c, e_13, _d;
+        var _e, _f, _g;
         _super.prototype.dispose.call(this);
-        (_b = this.watermark) === null || _b === void 0 ? void 0 : _b.element.remove();
-        (_d = (_c = this.watermark) === null || _c === void 0 ? void 0 : _c.dispose) === null || _d === void 0 ? void 0 : _d.call(_c);
+        (_e = this.watermark) === null || _e === void 0 ? void 0 : _e.element.remove();
+        (_g = (_f = this.watermark) === null || _f === void 0 ? void 0 : _f.dispose) === null || _g === void 0 ? void 0 : _g.call(_f);
         this.watermark = undefined;
         try {
-            for (var _e = __values(this.panels), _f = _e.next(); !_f.done; _f = _e.next()) {
-                var panel = _f.value;
+            // Dispose all tab groups
+            for (var _h = __values(__spreadArray([], __read(this._tabGroups), false)), _j = _h.next(); !_j.done; _j = _h.next()) {
+                var tabGroup = _j.value;
+                tabGroup.dispose();
+            }
+        }
+        catch (e_10_1) { e_10 = { error: e_10_1 }; }
+        finally {
+            try {
+                if (_j && !_j.done && (_a = _h.return)) _a.call(_h);
+            }
+            finally { if (e_10) throw e_10.error; }
+        }
+        try {
+            for (var _k = __values(this._tabGroupDisposables.values()), _l = _k.next(); !_l.done; _l = _k.next()) {
+                var disposable = _l.value;
+                disposable.dispose();
+            }
+        }
+        catch (e_11_1) { e_11 = { error: e_11_1 }; }
+        finally {
+            try {
+                if (_l && !_l.done && (_b = _k.return)) _b.call(_k);
+            }
+            finally { if (e_11) throw e_11.error; }
+        }
+        this._tabGroupDisposables.clear();
+        try {
+            // Dispose any microtask-deferred disposables that haven't run yet
+            for (var _m = __values(this._pendingMicrotaskDisposables), _o = _m.next(); !_o.done; _o = _m.next()) {
+                var disposable = _o.value;
+                disposable.dispose();
+            }
+        }
+        catch (e_12_1) { e_12 = { error: e_12_1 }; }
+        finally {
+            try {
+                if (_o && !_o.done && (_c = _m.return)) _c.call(_m);
+            }
+            finally { if (e_12) throw e_12.error; }
+        }
+        this._pendingMicrotaskDisposables.clear();
+        try {
+            for (var _p = __values(this.panels), _q = _p.next(); !_q.done; _q = _p.next()) {
+                var panel = _q.value;
                 panel.dispose();
             }
         }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        catch (e_13_1) { e_13 = { error: e_13_1 }; }
         finally {
             try {
-                if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
+                if (_q && !_q.done && (_d = _p.return)) _d.call(_p);
             }
-            finally { if (e_2) throw e_2.error; }
+            finally { if (e_13) throw e_13.error; }
         }
         this.tabsContainer.dispose();
         this.contentContainer.dispose();