dockview-core 6.6.1 → 7.0.3

package/dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -143,9 +143,6 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         _this.groupPanel = groupPanel;
         _this._isGroupActive = false;
         _this._locked = false;
-        _this._rightHeaderActionsDisposable = new lifecycle_1.MutableDisposable();
-        _this._leftHeaderActionsDisposable = new lifecycle_1.MutableDisposable();
-        _this._prefixHeaderActionsDisposable = new lifecycle_1.MutableDisposable();
         _this._location = { type: 'grid' };
         _this.mostRecentlyUsed = [];
         _this._overwriteRenderContainer = null;
@@ -180,8 +177,8 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         _this.onDidRemovePanel = _this._onDidRemovePanel.event;
         _this._onDidActivePanelChange = new events_1.Emitter();
         _this.onDidActivePanelChange = _this._onDidActivePanelChange.event;
-        _this._onUnhandledDragOverEvent = new events_1.Emitter();
-        _this.onUnhandledDragOverEvent = _this._onUnhandledDragOverEvent.event;
+        _this._onUnhandledDragOver = new events_1.Emitter();
+        _this.onUnhandledDragOver = _this._onUnhandledDragOver.event;
         _this._tabGroups = [];
         _this._tabGroupMap = new Map();
         _this._panelToTabGroup = new Map();
@@ -200,6 +197,9 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         _this._onDidTabGroupCollapsedChange = new events_1.Emitter();
         _this.onDidTabGroupCollapsedChange = _this._onDidTabGroupCollapsedChange.event;
         (0, dom_1.toggleClass)(_this.container, 'dv-groupview', true);
+        // Each group is a navigable region, labelled by its active panel
+        // (see `updateAccessibleLabel`, driven on activation / title change).
+        _this.container.setAttribute('role', 'region');
         _this._api = new component_api_1.DockviewApi(_this.accessor);
         _this.tabsContainer = new tabsContainer_1.TabsContainer(_this.accessor, _this.groupPanel);
         _this.contentContainer = new content_1.ContentContainer(_this.accessor, _this);
@@ -208,7 +208,12 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         _this.locked = (_a = options.locked) !== null && _a !== void 0 ? _a : false;
         _this.headerPosition =
             (_b = options.headerPosition) !== null && _b !== void 0 ? _b : accessor.defaultHeaderPosition;
-        _this.addDisposables(_this._onTabDragStart, _this._onGroupDragStart, _this._onWillShowOverlay, _this._rightHeaderActionsDisposable, _this._leftHeaderActionsDisposable, _this._prefixHeaderActionsDisposable, _this.tabsContainer.onTabDragStart(function (event) {
+        _this.addDisposables(
+        // Keep the region's accessible name in sync when the active
+        // panel's title changes (no-op when a non-active title changes).
+        _this._onDidPanelTitleChange.event(function () {
+            return _this.updateAccessibleLabel();
+        }), _this._onTabDragStart, _this._onGroupDragStart, _this._onWillShowOverlay, _this.tabsContainer.onTabDragStart(function (event) {
             _this._onTabDragStart.fire(event);
         }), _this.tabsContainer.onGroupDragStart(function (event) {
             _this._onGroupDragStart.fire(event);
@@ -285,7 +290,7 @@ 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._onDidCreateTabGroup, _this._onDidDestroyTabGroup, _this._onDidAddPanelToTabGroup, _this._onDidRemovePanelFromTabGroup, _this._onDidTabGroupChange, _this._onDidTabGroupCollapsedChange, _this._onDidCreateTabGroup.event(function () {
+        }), _this._onMove, _this._onDidChange, _this._onDidDrop, _this._onWillDrop, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidActivePanelChange, _this._onUnhandledDragOver, _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();
@@ -321,6 +326,22 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DockviewGroupPanelModel.prototype, "contentContainerId", {
+        /** DOM id of the content container (the group's tabpanel), referenced by each tab's `aria-controls`. */
+        get: function () {
+            return this.contentContainer.element.id;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewGroupPanelModel.prototype, "contentDropTarget", {
+        /** The group's content drop target — lets keyboard docking preview a drop here. */
+        get: function () {
+            return this.contentContainer.dropTarget;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DockviewGroupPanelModel.prototype, "locked", {
         get: function () {
             return this._locked;
@@ -402,11 +423,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             if ((_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.layout) {
                 this._activePanel.layout(this._width, this._height);
             }
-            if (this._leftHeaderActions ||
-                this._rightHeaderActions ||
-                this._prefixHeaderActions) {
-                this.updateHeaderActions();
-            }
+            this.updateHeaderActions();
         },
         enumerable: false,
         configurable: true
@@ -431,14 +448,15 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
                     applyZones(['top', 'bottom', 'left', 'right', 'center']);
                     break;
                 case 'floating':
-                    applyZones(['center']);
-                    applyZones(value
-                        ? ['center']
-                        : ['top', 'bottom', 'left', 'right', 'center']);
+                    // Floating windows host their own nested gridview, so an edge
+                    // drop splits the window's layout just like the main grid.
+                    applyZones(['top', 'bottom', 'left', 'right', 'center']);
                     (0, dom_1.toggleClass)(this.container, 'dv-groupview-floating', true);
                     break;
                 case 'popout':
-                    applyZones(['center']);
+                    // Popout windows host their own nested gridview, so an edge
+                    // drop splits the window's layout just like the main grid.
+                    applyZones(['top', 'bottom', 'left', 'right', 'center']);
                     (0, dom_1.toggleClass)(this.container, 'dv-groupview-popout', true);
                     break;
                 case 'edge':
@@ -466,7 +484,25 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             }
         });
     };
+    /**
+     * Bracket a tab-group mutation as a layout transaction. `accessor` is
+     * always a full {@link DockviewComponent} in production; the optional-call
+     * fallback keeps partial test doubles (which omit `mutation`) working.
+     * When nested inside a larger operation (a drag-driven move, fromJSON
+     * restore) the component's depth counter folds it into the outer one.
+     */
+    DockviewGroupPanelModel.prototype._bracketTabGroupMutation = function (func) {
+        return this.accessor.mutation
+            ? this.accessor.mutation('tab-group', func)
+            : func();
+    };
     DockviewGroupPanelModel.prototype.createTabGroup = function (options) {
+        var _this = this;
+        return this._bracketTabGroupMutation(function () {
+            return _this._doCreateTabGroup(options);
+        });
+    };
+    DockviewGroupPanelModel.prototype._doCreateTabGroup = 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++);
@@ -497,31 +533,35 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         return tabGroup;
     };
     DockviewGroupPanelModel.prototype.dissolveTabGroup = function (tabGroupId) {
-        var e_2, _a;
+        var _this = this;
         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 {
+        this._bracketTabGroupMutation(function () {
+            var e_2, _a;
+            // Remove all panels from the group (they stay in the flat panel list)
+            var panelIds = __spreadArray([], __read(tabGroup.panelIds), false);
             try {
-                if (panelIds_1_1 && !panelIds_1_1.done && (_a = panelIds_1.return)) _a.call(panelIds_1);
+                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 });
+                }
             }
-            finally { if (e_2) throw e_2.error; }
-        }
-        tabGroup.dispose();
+            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 _this = this;
         var tabGroup = this._tabGroupMap.get(tabGroupId);
         if (!tabGroup) {
             return;
@@ -532,18 +572,20 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         }
         // 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);
+        if ((existingGroup === null || existingGroup === void 0 ? void 0 : existingGroup.id) === tabGroupId) {
+            return; // already in this group — no mutation
         }
-        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 });
+        this._bracketTabGroupMutation(function () {
+            if (existingGroup) {
+                _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.
@@ -551,7 +593,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
      */
     DockviewGroupPanelModel.prototype.movePanelWithinGroup = function (tabGroupId, panelId, newIndex) {
         var tabGroup = this._tabGroupMap.get(tabGroupId);
-        if (!tabGroup || !tabGroup.containsPanel(panelId)) {
+        if (!(tabGroup === null || tabGroup === void 0 ? void 0 : tabGroup.containsPanel(panelId))) {
             return;
         }
         // Remove and re-add at new index within the group
@@ -714,17 +756,20 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         return this._panels.length;
     };
     DockviewGroupPanelModel.prototype.removePanelFromTabGroup = function (panelId) {
+        var _this = this;
         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();
-        }
+        this._bracketTabGroupMutation(function () {
+            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;
@@ -801,7 +846,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         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) {
+            if (!(candidateGroup === null || candidateGroup === void 0 ? void 0 : candidateGroup.collapsed)) {
                 this.doSetActivePanel(candidate);
                 this.updateContainer();
                 return;
@@ -810,7 +855,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         for (var i = activePanelIndex - 1; i >= 0; i--) {
             var candidate = this._panels[i];
             var candidateGroup = this._findTabGroupForPanel(candidate.id);
-            if (!candidateGroup || !candidateGroup.collapsed) {
+            if (!(candidateGroup === null || candidateGroup === void 0 ? void 0 : candidateGroup.collapsed)) {
                 this.doSetActivePanel(candidate);
                 this.updateContainer();
                 return;
@@ -843,9 +888,9 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             // 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+)$/);
+                var match = /-(\d+)$/.exec(data.id);
                 if (match) {
-                    var num = parseInt(match[1], 10) + 1;
+                    var num = Number.parseInt(match[1], 10) + 1;
                     if (num > this._tabGroupIdCounter) {
                         this._tabGroupIdCounter = num;
                     }
@@ -911,6 +956,9 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
     DockviewGroupPanelModel.prototype.focusContent = function () {
         this.contentContainer.element.focus();
     };
+    DockviewGroupPanelModel.prototype.focusActiveTab = function () {
+        this.tabsContainer.focusActiveTab();
+    };
     Object.defineProperty(DockviewGroupPanelModel.prototype, "renderContainer", {
         get: function () {
             var _a;
@@ -957,54 +1005,20 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         this.updateHeaderActions();
     };
     DockviewGroupPanelModel.prototype.updateHeaderActions = function () {
-        if (this.accessor.options.createRightHeaderActionComponent) {
-            this._rightHeaderActions =
-                this.accessor.options.createRightHeaderActionComponent(this.groupPanel);
-            this._rightHeaderActionsDisposable.value = this._rightHeaderActions;
-            this._rightHeaderActions.init({
-                containerApi: this._api,
-                api: this.groupPanel.api,
-                group: this.groupPanel,
-            });
-            this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
-        }
-        else {
-            this._rightHeaderActions = undefined;
-            this._rightHeaderActionsDisposable.dispose();
-            this.tabsContainer.setRightActionsElement(undefined);
-        }
-        if (this.accessor.options.createLeftHeaderActionComponent) {
-            this._leftHeaderActions =
-                this.accessor.options.createLeftHeaderActionComponent(this.groupPanel);
-            this._leftHeaderActionsDisposable.value = this._leftHeaderActions;
-            this._leftHeaderActions.init({
-                containerApi: this._api,
-                api: this.groupPanel.api,
-                group: this.groupPanel,
-            });
-            this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
-        }
-        else {
-            this._leftHeaderActions = undefined;
-            this._leftHeaderActionsDisposable.dispose();
-            this.tabsContainer.setLeftActionsElement(undefined);
-        }
-        if (this.accessor.options.createPrefixHeaderActionComponent) {
-            this._prefixHeaderActions =
-                this.accessor.options.createPrefixHeaderActionComponent(this.groupPanel);
-            this._prefixHeaderActionsDisposable.value =
-                this._prefixHeaderActions;
-            this._prefixHeaderActions.init({
-                containerApi: this._api,
-                api: this.groupPanel.api,
-                group: this.groupPanel,
-            });
-            this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
-        }
-        else {
-            this._prefixHeaderActions = undefined;
-            this._prefixHeaderActionsDisposable.dispose();
-            this.tabsContainer.setPrefixActionsElement(undefined);
+        var _a;
+        (_a = this.accessor.headerActionsService) === null || _a === void 0 ? void 0 : _a.refresh(this.groupPanel);
+    };
+    DockviewGroupPanelModel.prototype.attachHeaderAction = function (slot, element) {
+        switch (slot) {
+            case 'left':
+                this.tabsContainer.setLeftActionsElement(element);
+                break;
+            case 'right':
+                this.tabsContainer.setRightActionsElement(element);
+                break;
+            case 'prefix':
+                this.tabsContainer.setPrefixActionsElement(element);
+                break;
         }
     };
     DockviewGroupPanelModel.prototype.rerender = function (panel) {
@@ -1035,32 +1049,26 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         return result;
     };
     DockviewGroupPanelModel.prototype.moveToNext = function (options) {
-        if (!options) {
-            options = {};
-        }
-        if (!options.panel) {
-            options.panel = this.activePanel;
-        }
+        var _a;
+        options !== null && options !== void 0 ? options : (options = {});
+        (_a = options.panel) !== null && _a !== void 0 ? _a : (options.panel = this.activePanel);
         var index = options.panel ? this.panels.indexOf(options.panel) : -1;
         var normalizedIndex;
         if (index < this.panels.length - 1) {
             normalizedIndex = index + 1;
         }
-        else if (!options.suppressRoll) {
-            normalizedIndex = 0;
+        else if (options.suppressRoll) {
+            return;
         }
         else {
-            return;
+            normalizedIndex = 0;
         }
         this.openPanel(this.panels[normalizedIndex]);
     };
     DockviewGroupPanelModel.prototype.moveToPrevious = function (options) {
-        if (!options) {
-            options = {};
-        }
-        if (!options.panel) {
-            options.panel = this.activePanel;
-        }
+        var _a;
+        options !== null && options !== void 0 ? options : (options = {});
+        (_a = options.panel) !== null && _a !== void 0 ? _a : (options.panel = this.activePanel);
         if (!options.panel) {
             return;
         }
@@ -1069,11 +1077,11 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         if (index > 0) {
             normalizedIndex = index - 1;
         }
-        else if (!options.suppressRoll) {
-            normalizedIndex = this.panels.length - 1;
+        else if (options.suppressRoll) {
+            return;
         }
         else {
-            return;
+            normalizedIndex = this.panels.length - 1;
         }
         this.openPanel(this.panels[normalizedIndex]);
     };
@@ -1188,7 +1196,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         if (!this._activePanel && this.panels.length > 0) {
             var candidate = this._panels.find(function (p) {
                 var tg = _this._findTabGroupForPanel(p.id);
-                return !tg || !tg.collapsed;
+                return !(tg === null || tg === void 0 ? void 0 : tg.collapsed);
             });
             if (candidate) {
                 this.doSetActivePanel(candidate);
@@ -1272,12 +1280,15 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         this._onDidAddPanel.fire({ panel: panel });
     };
     DockviewGroupPanelModel.prototype.doSetActivePanel = function (panel) {
+        var _a, _b, _c;
         if (this._activePanel === panel) {
             return;
         }
         this._activePanel = panel;
         if (panel) {
             this.tabsContainer.setActivePanel(panel);
+            // Point the tabpanel's `aria-labelledby` at the now-active tab.
+            this.contentContainer.setLabelledBy(this.tabsContainer.getTabId(panel.id));
             this.contentContainer.openPanel(panel);
             panel.layout(this._width, this._height);
             this.updateMru(panel);
@@ -1285,8 +1296,23 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             this.contentContainer.refreshFocusState();
             this._onDidActivePanelChange.fire({
                 panel: panel,
+                // `currentOrigin` is always present on the real component;
+                // default to 'user' for minimal test accessors.
+                origin: (_c = (_b = (_a = this.accessor).currentOrigin) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : 'user',
             });
         }
+        this.updateAccessibleLabel();
+    };
+    /** Label the group region with its active panel's title (the WAI-ARIA region name). */
+    DockviewGroupPanelModel.prototype.updateAccessibleLabel = function () {
+        var _a;
+        var title = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.title;
+        if (title) {
+            this.container.setAttribute('aria-label', title);
+        }
+        else {
+            this.container.removeAttribute('aria-label');
+        }
     };
     DockviewGroupPanelModel.prototype.updateMru = function (panel) {
         if (this.mostRecentlyUsed.includes(panel)) {
@@ -1321,7 +1347,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
     };
     DockviewGroupPanelModel.prototype.canDisplayOverlay = function (event, position, target) {
         var firedEvent = new options_1.DockviewUnhandledDragOverEvent(event, target, position, dataTransfer_1.getPanelData, this.accessor.getPanel(this.id));
-        this._onUnhandledDragOverEvent.fire(firedEvent);
+        this._onUnhandledDragOver.fire(firedEvent);
         return firedEvent.isAccepted;
     };
     DockviewGroupPanelModel.prototype.handleDropEvent = function (type, event, position, index) {

package/dist/cjs/dockview/dockviewPanel.d.ts

@@ -7,7 +7,7 @@ import { IPanel, PanelUpdateEvent, Parameters } from '../panel/types';
 import { IDockviewPanelModel } from './dockviewPanelModel';
 import { DockviewComponent } from './dockviewComponent';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
-import { Contraints } from '../gridview/gridviewPanel';
+import { Constraints } from '../gridview/gridviewPanel';
 export interface IDockviewPanel extends IDisposable, IPanel {
     readonly view: IDockviewPanelModel;
     readonly group: DockviewGroupPanel;
@@ -52,7 +52,7 @@ export declare class DockviewPanel extends CompositeDisposable implements IDockv
     get maximumHeight(): number | undefined;
     constructor(id: string, component: string, tabComponent: string | undefined, accessor: DockviewComponent, containerApi: DockviewApi, group: DockviewGroupPanel, view: IDockviewPanelModel, options: {
         renderer?: DockviewPanelRenderer;
-    } & Partial<Contraints>);
+    } & Partial<Constraints>);
     init(params: IGroupPanelInitParameters): void;
     focus(): void;
     toJSON(): GroupviewPanelState;

package/dist/cjs/dockview/dockviewPanel.js

@@ -178,16 +178,15 @@ var DockviewPanel = /** @class */ (function (_super) {
     };
     DockviewPanel.prototype.update = function (event) {
         var e_1, _a;
-        var _b;
         // merge the new parameters with the existing parameters
-        this._params = __assign(__assign({}, ((_b = this._params) !== null && _b !== void 0 ? _b : {})), event.params);
+        this._params = __assign(__assign({}, this._params), event.params);
         try {
             /**
              * delete new keys that have a value of undefined,
              * allow values of null
              */
-            for (var _c = __values(Object.keys(event.params)), _d = _c.next(); !_d.done; _d = _c.next()) {
-                var key = _d.value;
+            for (var _b = __values(Object.keys(event.params)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var key = _c.value;
                 if (event.params[key] === undefined) {
                     delete this._params[key];
                 }
@@ -196,7 +195,7 @@ var DockviewPanel = /** @class */ (function (_super) {
         catch (e_1_1) { e_1 = { error: e_1_1 }; }
         finally {
             try {
-                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
             finally { if (e_1) throw e_1.error; }
         }

package/dist/cjs/dockview/dockviewShell.d.ts

@@ -56,16 +56,37 @@ export declare class EdgeGroupView implements IView {
     readonly priority = LayoutPriority.Low;
     private _isCollapsed;
     private _lastExpandedSize;
-    private _collapsedSize;
-    private _expandedMinimumSize;
+    private _baseCollapsedSize;
+    private _baseMinimumSize;
+    private _gapAdd;
     private readonly _expandedMaximumSize;
+    private _measuredTabSize;
+    private readonly _tabSizeDisposables;
+    /**
+     * The effective (pre-gap) collapsed size: the measured tab-strip size when
+     * available, otherwise the configured/theme base.
+     */
+    private get _effectiveBaseCollapsed();
     get minimumSize(): number;
     get maximumSize(): number;
     get element(): HTMLElement;
     get isCollapsed(): boolean;
     get lastExpandedSize(): number;
     get collapsedSize(): number;
-    constructor(options: EdgeGroupOptions, group: IEdgeGroupHost, orientation: 'horizontal' | 'vertical');
+    constructor(options: EdgeGroupOptions, group: IEdgeGroupHost, orientation: 'horizontal' | 'vertical', gapAdd?: number);
+    /**
+     * Watch the group's tab strip so the collapsed size follows the live tab
+     * height. The strip's cross-axis size (height for top/bottom, width for
+     * left/right) is exactly what a collapsed edge group should occupy; a
+     * ResizeObserver keeps them in sync when the tab height changes at runtime.
+     */
+    private _observeTabStrip;
+    /**
+     * Apply a freshly-measured tab-strip cross size. When the group is
+     * collapsed this resizes it in the parent splitview so the collapsed strip
+     * always shows the full tab height.
+     */
+    private _applyMeasuredTabSize;
     layout(size: number, orthogonalSize: number): void;
     setCollapsed(collapsed: boolean): void;
     setVisible(_visible: boolean): void;
@@ -76,11 +97,12 @@ export declare class EdgeGroupView implements IView {
      */
     restoreExpandedSize(size: number): void;
     /**
-     * Apply new effective collapsed and expanded-minimum sizes after a theme
-     * or gap change. The caller (ShellManager) is responsible for computing
-     * the correct values from the original config and the new gap.
+     * Apply a new base (pre-gap) collapsed size, base minimum size and gap
+     * contribution after a theme or gap change. Base values come from the
+     * original config; the ShellManager owns the gap arithmetic. A live
+     * measured tab size (if any) continues to win over the base collapsed size.
      */
-    updateCollapsedSize(newCollapsedSize: number, newExpandedMinimumSize: number): void;
+    updateSizing(baseCollapsedSize: number, baseMinimumSize: number | undefined, gapAdd: number): void;
     dispose(): void;
 }
 export declare class ShellManager implements IDisposable {