dockview-core 6.6.1 → 7.0.2

package/dist/esm/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/esm/dockview/dockviewFloatingGroupPanel.js

@@ -1,10 +1,42 @@
 import { CompositeDisposable } from '../lifecycle';
 export class DockviewFloatingGroupPanel extends CompositeDisposable {
-    constructor(group, overlay) {
+    /**
+     * 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() {
+        return this._group;
+    }
+    /**
+     * 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) {
+        this._titleBar = titleBar;
+    }
+    setAnchorGroup(group) {
+        var _a;
+        this._group = group;
+        (_a = this._titleBar) === null || _a === void 0 ? void 0 : _a.setGroup(group);
+    }
+    constructor(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) {
         super();
-        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: () => this.gridview.dispose(),
+        });
     }
     position(bounds) {
         this.overlay.setBounds(bounds);

package/dist/esm/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/esm/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/esm/dockview/dockviewGroupPanelModel.js

@@ -3,7 +3,7 @@ import { getPanelData } from '../dnd/dataTransfer';
 import { addClasses, isAncestor, removeClasses, toggleClass } from '../dom';
 import { addDisposableListener, DockviewEvent, Emitter, } from '../events';
 import { DockviewWillShowOverlayLocationEvent, } from './events';
-import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
+import { CompositeDisposable } from '../lifecycle';
 import { ContentContainer, } from './components/panel/content';
 import { TabsContainer, } from './components/titlebar/tabsContainer';
 import { DockviewUnhandledDragOverEvent, } from './options';
@@ -55,6 +55,14 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
     get activePanel() {
         return this._activePanel;
     }
+    /** DOM id of the content container (the group's tabpanel), referenced by each tab's `aria-controls`. */
+    get contentContainerId() {
+        return this.contentContainer.element.id;
+    }
+    /** The group's content drop target — lets keyboard docking preview a drop here. */
+    get contentDropTarget() {
+        return this.contentContainer.dropTarget;
+    }
     get locked() {
         return this._locked;
     }
@@ -103,11 +111,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         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();
     }
     get location() {
         return this._location;
@@ -127,14 +131,15 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
                 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']);
                 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']);
                 toggleClass(this.container, 'dv-groupview-popout', true);
                 break;
             case 'edge':
@@ -156,9 +161,6 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this.groupPanel = groupPanel;
         this._isGroupActive = false;
         this._locked = false;
-        this._rightHeaderActionsDisposable = new MutableDisposable();
-        this._leftHeaderActionsDisposable = new MutableDisposable();
-        this._prefixHeaderActionsDisposable = new MutableDisposable();
         this._location = { type: 'grid' };
         this.mostRecentlyUsed = [];
         this._overwriteRenderContainer = null;
@@ -193,8 +195,8 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this.onDidRemovePanel = this._onDidRemovePanel.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this._onUnhandledDragOverEvent = new Emitter();
-        this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+        this._onUnhandledDragOver = new Emitter();
+        this.onUnhandledDragOver = this._onUnhandledDragOver.event;
         this._tabGroups = [];
         this._tabGroupMap = new Map();
         this._panelToTabGroup = new Map();
@@ -213,6 +215,9 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this._onDidTabGroupCollapsedChange = new Emitter();
         this.onDidTabGroupCollapsedChange = this._onDidTabGroupCollapsedChange.event;
         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 DockviewApi(this.accessor);
         this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
         this.contentContainer = new ContentContainer(this.accessor, this);
@@ -221,7 +226,10 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         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((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(() => this.updateAccessibleLabel()), this._onTabDragStart, this._onGroupDragStart, this._onWillShowOverlay, this.tabsContainer.onTabDragStart((event) => {
             this._onTabDragStart.fire(event);
         }), this.tabsContainer.onGroupDragStart((event) => {
             this._onGroupDragStart.fire(event);
@@ -284,7 +292,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
                 group: this.groupPanel,
                 getData: 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(() => {
+        }), 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(() => {
             this._scheduleTabGroupUpdate();
         }), this._onDidDestroyTabGroup.event(() => {
             this._scheduleTabGroupUpdate();
@@ -310,7 +318,22 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             }
         });
     }
+    /**
+     * 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.
+     */
+    _bracketTabGroupMutation(func) {
+        return this.accessor.mutation
+            ? this.accessor.mutation('tab-group', func)
+            : func();
+    }
     createTabGroup(options) {
+        return this._bracketTabGroupMutation(() => this._doCreateTabGroup(options));
+    }
+    _doCreateTabGroup(options) {
         var _a;
         const id = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : `tg-${this.id}-${this._tabGroupIdCounter++}`;
         const tabGroup = new TabGroup(id, {
@@ -344,14 +367,16 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         if (!tabGroup) {
             return;
         }
-        // Remove all panels from the group (they stay in the flat panel list)
-        const panelIds = [...tabGroup.panelIds];
-        for (const panelId of panelIds) {
-            tabGroup.removePanel(panelId);
-            this._panelToTabGroup.delete(panelId);
-            this._onDidRemovePanelFromTabGroup.fire({ tabGroup, panelId });
-        }
-        tabGroup.dispose();
+        this._bracketTabGroupMutation(() => {
+            // Remove all panels from the group (they stay in the flat panel list)
+            const panelIds = [...tabGroup.panelIds];
+            for (const panelId of panelIds) {
+                tabGroup.removePanel(panelId);
+                this._panelToTabGroup.delete(panelId);
+                this._onDidRemovePanelFromTabGroup.fire({ tabGroup, panelId });
+            }
+            tabGroup.dispose();
+        });
     }
     addPanelToTabGroup(tabGroupId, panelId, index) {
         const tabGroup = this._tabGroupMap.get(tabGroupId);
@@ -364,18 +389,20 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         }
         // Remove from any existing group first
         const 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, panelId });
+        this._bracketTabGroupMutation(() => {
+            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, panelId });
+        });
     }
     /**
      * Move a panel to a new index within its tab group.
@@ -523,13 +550,15 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         if (!tabGroup) {
             return;
         }
-        tabGroup.removePanel(panelId);
-        this._panelToTabGroup.delete(panelId);
-        this._onDidRemovePanelFromTabGroup.fire({ tabGroup, panelId });
-        // Auto-destroy empty groups
-        if (tabGroup.isEmpty) {
-            tabGroup.dispose();
-        }
+        this._bracketTabGroupMutation(() => {
+            tabGroup.removePanel(panelId);
+            this._panelToTabGroup.delete(panelId);
+            this._onDidRemovePanelFromTabGroup.fire({ tabGroup, panelId });
+            // Auto-destroy empty groups
+            if (tabGroup.isEmpty) {
+                tabGroup.dispose();
+            }
+        });
     }
     getTabGroups() {
         return this._tabGroups;
@@ -669,6 +698,9 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
     focusContent() {
         this.contentContainer.element.focus();
     }
+    focusActiveTab() {
+        this.tabsContainer.focusActiveTab();
+    }
     set renderContainer(value) {
         this.panels.forEach((panel) => {
             this.renderContainer.detatch(panel);
@@ -705,54 +737,20 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this.updateHeaderActions();
     }
     updateHeaderActions() {
-        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);
+    }
+    attachHeaderAction(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;
         }
     }
     rerender(panel) {
@@ -998,12 +996,15 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this._onDidAddPanel.fire({ panel });
     }
     doSetActivePanel(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);
@@ -1011,8 +1012,23 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             this.contentContainer.refreshFocusState();
             this._onDidActivePanelChange.fire({
                 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). */
+    updateAccessibleLabel() {
+        var _a;
+        const 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');
+        }
     }
     updateMru(panel) {
         if (this.mostRecentlyUsed.includes(panel)) {
@@ -1046,7 +1062,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
     }
     canDisplayOverlay(event, position, target) {
         const firedEvent = new DockviewUnhandledDragOverEvent(event, target, position, getPanelData, this.accessor.getPanel(this.id));
-        this._onUnhandledDragOverEvent.fire(firedEvent);
+        this._onUnhandledDragOver.fire(firedEvent);
         return firedEvent.isAccepted;
     }
     handleDropEvent(type, event, position, index) {

package/dist/esm/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/esm/dockview/edgeGroupService.d.ts

@@ -0,0 +1,38 @@
+import { IDisposable } from '../lifecycle';
+import { DockviewGroupPanel } from './dockviewGroupPanel';
+import { EdgeGroupPosition } from './dockviewShell';
+/**
+ * EdgeGroupService is a pure registry: it tracks which positions are
+ * occupied and owns each edge group's per-instance cleanup disposable.
+ *
+ * The ShellManager (layout infrastructure) and the addEdgeGroup
+ * orchestration remain on DockviewComponent.
+ */
+export interface IEdgeGroupServiceHost {
+}
+export interface IEdgeGroupService extends IDisposable {
+    add(position: EdgeGroupPosition, group: DockviewGroupPanel, autoCollapseDisposable: IDisposable): void;
+    remove(position: EdgeGroupPosition): void;
+    get(position: EdgeGroupPosition): DockviewGroupPanel | undefined;
+    has(position: EdgeGroupPosition): boolean;
+    hasAny(): boolean;
+    entries(): IterableIterator<[EdgeGroupPosition, DockviewGroupPanel]>;
+    includes(group: DockviewGroupPanel): boolean;
+    findPositionOf(group: DockviewGroupPanel): EdgeGroupPosition | undefined;
+    disposeAll(): void;
+}
+export declare class EdgeGroupService implements IEdgeGroupService {
+    private readonly _edgeGroups;
+    private readonly _edgeGroupDisposables;
+    add(position: EdgeGroupPosition, group: DockviewGroupPanel, autoCollapseDisposable: IDisposable): void;
+    remove(position: EdgeGroupPosition): void;
+    get(position: EdgeGroupPosition): DockviewGroupPanel | undefined;
+    has(position: EdgeGroupPosition): boolean;
+    hasAny(): boolean;
+    entries(): IterableIterator<[EdgeGroupPosition, DockviewGroupPanel]>;
+    includes(group: DockviewGroupPanel): boolean;
+    findPositionOf(group: DockviewGroupPanel): EdgeGroupPosition | undefined;
+    disposeAll(): void;
+    dispose(): void;
+}
+export declare const EdgeGroupModule: import("./modules").DockviewModule<IEdgeGroupServiceHost>;