dockview-core 6.6.0 → 7.0.2

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

@@ -1,14 +1,45 @@
 import { Overlay } from '../overlay/overlay';
 import { CompositeDisposable } from '../lifecycle';
+import { Gridview } from '../gridview/gridview';
 import { AnchoredBox } from '../types';
 import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
 export interface IDockviewFloatingGroupPanel {
     readonly group: IDockviewGroupPanel;
     position(bounds: Partial<AnchoredBox>): void;
 }
+/**
+ * The subset of the dedicated floating title bar this panel needs to keep in
+ * sync. Declared structurally to avoid a circular import on `FloatingTitleBar`.
+ */
+export interface IAnchorTrackingTitleBar {
+    setGroup(group: DockviewGroupPanel): void;
+}
 export declare class DockviewFloatingGroupPanel extends CompositeDisposable implements IDockviewFloatingGroupPanel {
-    readonly group: DockviewGroupPanel;
     readonly overlay: Overlay;
-    constructor(group: DockviewGroupPanel, overlay: Overlay);
+    /**
+     * The floating window hosts its own gridview so it can hold a nested
+     * splitview layout of groups, not just a single group.
+     */
+    readonly gridview: Gridview;
+    private _group;
+    private _titleBar;
+    /**
+     * The window's representative/anchor group. A floating window can host a
+     * nested layout of several groups; the anchor is used for back-compat
+     * single-group APIs and is reassigned if it leaves the window.
+     */
+    get group(): DockviewGroupPanel;
+    /**
+     * Register the dedicated title bar (if any) so anchor reassignment keeps
+     * its drag handle pointed at a group that still lives in this window.
+     */
+    setTitleBar(titleBar: IAnchorTrackingTitleBar | undefined): void;
+    setAnchorGroup(group: DockviewGroupPanel): void;
+    constructor(group: DockviewGroupPanel, overlay: Overlay, 
+    /**
+     * The floating window hosts its own gridview so it can hold a nested
+     * splitview layout of groups, not just a single group.
+     */
+    gridview: Gridview);
     position(bounds: Partial<AnchoredBox>): void;
 }

package/dist/cjs/dockview/dockviewFloatingGroupPanel.js

@@ -19,13 +19,49 @@ exports.DockviewFloatingGroupPanel = void 0;
 var lifecycle_1 = require("../lifecycle");
 var DockviewFloatingGroupPanel = /** @class */ (function (_super) {
     __extends(DockviewFloatingGroupPanel, _super);
-    function DockviewFloatingGroupPanel(group, overlay) {
+    function DockviewFloatingGroupPanel(group, overlay, 
+    /**
+     * The floating window hosts its own gridview so it can hold a nested
+     * splitview layout of groups, not just a single group.
+     */
+    gridview) {
         var _this = _super.call(this) || this;
-        _this.group = group;
         _this.overlay = overlay;
-        _this.addDisposables(overlay);
+        _this.gridview = gridview;
+        _this._group = group;
+        _this.addDisposables(overlay, {
+            // The gridview owns the floating window's DOM subtree (mounted as
+            // the overlay's content). Disposing it tears down the splitview;
+            // it does NOT dispose the leaf views (groups) — their lifecycle is
+            // owned by the component's `_groups` map.
+            dispose: function () { return _this.gridview.dispose(); },
+        });
         return _this;
     }
+    Object.defineProperty(DockviewFloatingGroupPanel.prototype, "group", {
+        /**
+         * The window's representative/anchor group. A floating window can host a
+         * nested layout of several groups; the anchor is used for back-compat
+         * single-group APIs and is reassigned if it leaves the window.
+         */
+        get: function () {
+            return this._group;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Register the dedicated title bar (if any) so anchor reassignment keeps
+     * its drag handle pointed at a group that still lives in this window.
+     */
+    DockviewFloatingGroupPanel.prototype.setTitleBar = function (titleBar) {
+        this._titleBar = titleBar;
+    };
+    DockviewFloatingGroupPanel.prototype.setAnchorGroup = function (group) {
+        var _a;
+        this._group = group;
+        (_a = this._titleBar) === null || _a === void 0 ? void 0 : _a.setGroup(group);
+    };
     DockviewFloatingGroupPanel.prototype.position = function (bounds) {
         this.overlay.setBounds(bounds);
     };

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

@@ -11,7 +11,6 @@ export interface IDockviewGroupPanel extends IGridviewPanel<DockviewGroupPanelAp
     readonly panels: IDockviewPanel[];
     readonly activePanel: IDockviewPanel | undefined;
 }
-export type IDockviewGroupPanelPublic = IDockviewGroupPanel;
 export declare class DockviewGroupPanel extends GridviewPanel<DockviewGroupPanelApiImpl> implements IDockviewGroupPanel {
     private readonly _model;
     private _explicitConstraints;

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

@@ -1,7 +1,7 @@
 import { DockviewApi } from '../api/component.api';
 import { PanelTransfer } from '../dnd/dataTransfer';
-import { Position } from '../dnd/droptarget';
-import { DockviewComponent } from './dockviewComponent';
+import { Droptarget, Position } from '../dnd/droptarget';
+import { DockviewComponent, DockviewOrigin } from './dockviewComponent';
 import { DockviewEvent, Event } from '../events';
 import { DockviewGroupDropLocation, DockviewWillShowOverlayLocationEvent } from './events';
 import { IViewSize } from '../gridview/gridview';
@@ -13,7 +13,7 @@ import { IDockviewPanel } from './dockviewPanel';
 import { DockviewDndOverlayEvent, DockviewHeaderDirection, DockviewHeaderPosition } from './options';
 import { OverlayRenderContainer } from '../overlay/overlayRenderContainer';
 import { TitleEvent } from '../api/dockviewPanelApi';
-import { Contraints } from '../gridview/gridviewPanel';
+import { Constraints } from '../gridview/gridviewPanel';
 import { DropTargetAnchorContainer } from '../dnd/dropTargetAnchorContainer';
 import { ITabGroup, SerializedTabGroup, TabGroupOptions } from './tabGroup';
 import { EdgeGroupPosition } from './dockviewShell';
@@ -29,7 +29,7 @@ interface CoreGroupOptions {
     hideHeader?: boolean;
     headerPosition?: 'top' | 'bottom' | 'left' | 'right';
     skipSetActive?: boolean;
-    constraints?: Partial<Contraints>;
+    constraints?: Partial<Constraints>;
     initialWidth?: number;
     initialHeight?: number;
 }
@@ -47,6 +47,15 @@ export interface GroupPanelViewState extends CoreGroupOptions {
 export interface DockviewGroupChangeEvent {
     readonly panel: IDockviewPanel;
 }
+/**
+ * Payload for the group-level `onDidActivePanelChange`. Extends
+ * {@link DockviewGroupChangeEvent} with the {@link DockviewOrigin} so it mirrors
+ * the component-level `DockviewActivePanelChangeEvent` — both report whether the
+ * change came from a user gesture or an API call.
+ */
+export interface DockviewGroupActivePanelChangeEvent extends DockviewGroupChangeEvent {
+    readonly origin: DockviewOrigin;
+}
 export interface CreateTabGroupOptions extends TabGroupOptions {
     id?: string;
 }
@@ -100,7 +109,7 @@ export interface IDockviewGroupPanelModel extends IPanel {
     readonly onWillDrop: Event<DockviewWillDropEvent>;
     readonly onDidAddPanel: Event<DockviewGroupChangeEvent>;
     readonly onDidRemovePanel: Event<DockviewGroupChangeEvent>;
-    readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
+    readonly onDidActivePanelChange: Event<DockviewGroupActivePanelChangeEvent>;
     readonly onMove: Event<GroupMoveEvent>;
     locked: DockviewGroupPanelLocked;
     headerPosition: DockviewHeaderPosition;
@@ -127,6 +136,8 @@ export interface IDockviewGroupPanelModel extends IPanel {
         suppressRoll?: boolean;
     }): void;
     canDisplayOverlay(event: DragEvent | PointerEvent, position: Position, target: DockviewGroupDropLocation): boolean;
+    updateHeaderActions(): void;
+    attachHeaderAction(slot: 'left' | 'right' | 'prefix', element: HTMLElement | undefined): void;
 }
 export type DockviewGroupLocation = {
     type: 'grid';
@@ -152,12 +163,6 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private watermark?;
     private _isGroupActive;
     private _locked;
-    private _rightHeaderActions;
-    private _leftHeaderActions;
-    private _prefixHeaderActions;
-    private readonly _rightHeaderActionsDisposable;
-    private readonly _leftHeaderActionsDisposable;
-    private readonly _prefixHeaderActionsDisposable;
     private _headerPosition;
     private _location;
     private mostRecentlyUsed;
@@ -192,9 +197,9 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private readonly _onDidRemovePanel;
     readonly onDidRemovePanel: Event<DockviewGroupChangeEvent>;
     private readonly _onDidActivePanelChange;
-    readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
-    private readonly _onUnhandledDragOverEvent;
-    readonly onUnhandledDragOverEvent: Event<DockviewDndOverlayEvent>;
+    readonly onDidActivePanelChange: Event<DockviewGroupActivePanelChangeEvent>;
+    private readonly _onUnhandledDragOver;
+    readonly onUnhandledDragOver: Event<DockviewDndOverlayEvent>;
     private readonly _tabGroups;
     private readonly _tabGroupMap;
     private readonly _panelToTabGroup;
@@ -230,6 +235,10 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     get tabGroups(): readonly ITabGroup[];
     get element(): HTMLElement;
     get activePanel(): IDockviewPanel | undefined;
+    /** DOM id of the content container (the group's tabpanel), referenced by each tab's `aria-controls`. */
+    get contentContainerId(): string;
+    /** The group's content drop target — lets keyboard docking preview a drop here. */
+    get contentDropTarget(): Droptarget;
     get locked(): DockviewGroupPanelLocked;
     set locked(value: DockviewGroupPanelLocked);
     get isActive(): boolean;
@@ -245,7 +254,16 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     set location(value: DockviewGroupLocation);
     constructor(container: HTMLElement, accessor: DockviewComponent, id: string, options: GroupOptions, groupPanel: DockviewGroupPanel);
     private _scheduleTabGroupUpdate;
+    /**
+     * 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.
+     */
+    private _bracketTabGroupMutation;
     createTabGroup(options?: CreateTabGroupOptions): ITabGroup;
+    private _doCreateTabGroup;
     dissolveTabGroup(tabGroupId: string): void;
     addPanelToTabGroup(tabGroupId: string, panelId: string, index?: number): void;
     /**
@@ -285,12 +303,14 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     /** Restore tab groups from serialized data (used by fromJSON) */
     restoreTabGroups(serializedGroups: SerializedTabGroup[]): void;
     focusContent(): void;
+    focusActiveTab(): void;
     set renderContainer(value: OverlayRenderContainer | null);
     get renderContainer(): OverlayRenderContainer;
     set dropTargetContainer(value: DropTargetAnchorContainer | null);
     get dropTargetContainer(): DropTargetAnchorContainer | null;
     initialize(): void;
     updateHeaderActions(): void;
+    attachHeaderAction(slot: 'left' | 'right' | 'prefix', element: HTMLElement | undefined): void;
     rerender(panel: IDockviewPanel): void;
     indexOf(panel: IDockviewPanel): number;
     toJSON(): GroupPanelViewState;
@@ -326,6 +346,8 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private doRemovePanel;
     private doAddPanel;
     private doSetActivePanel;
+    /** Label the group region with its active panel's title (the WAI-ARIA region name). */
+    private updateAccessibleLabel;
     private updateMru;
     private updateContainer;
     canDisplayOverlay(event: DragEvent | PointerEvent, position: Position, target: DockviewGroupDropLocation): boolean;

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 && 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.
@@ -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;
@@ -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) {
@@ -1272,12 +1286,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 +1302,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 +1353,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;