dockview-core 5.1.0 → 6.0.0

package/dist/esm/dockview/components/titlebar/tabsContainer.d.ts

@@ -9,6 +9,7 @@ import { DockviewHeaderDirection } from '../../options';
 export interface TabDropIndexEvent {
     readonly event: DragEvent;
     readonly index: number;
+    readonly targetTabGroupId?: string | null;
 }
 export interface TabDragEvent {
     readonly nativeEvent: DragEvent;
@@ -41,6 +42,8 @@ export interface ITabsContainer extends IDisposable {
     show(): void;
     hide(): void;
     updateDragAndDropState(): void;
+    updateTabGroups(): void;
+    refreshTabGroupAccent(): void;
 }
 export declare class TabsContainer extends CompositeDisposable implements ITabsContainer {
     private readonly accessor;
@@ -58,6 +61,7 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     private _direction;
     private dropdownPart;
     private _overflowTabs;
+    private _overflowTabGroups;
     private readonly _dropdownDisposable;
     private readonly _onDrop;
     readonly onDrop: Event<TabDropIndexEvent>;
@@ -89,4 +93,6 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     private updateClassnames;
     private toggleDropdown;
     updateDragAndDropState(): void;
+    updateTabGroups(): void;
+    refreshTabGroupAccent(): void;
 }

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

@@ -6,6 +6,7 @@ import { DockviewWillShowOverlayLocationEvent } from '../../events';
 import { getPanelData } from '../../../dnd/dataTransfer';
 import { Tabs } from './tabs';
 import { createDropdownElementHandle, } from './tabOverflowControl';
+import { applyTabGroupAccent } from '../../tabGroupAccent';
 export class TabsContainer extends CompositeDisposable {
     get onTabDragStart() {
         return this.tabs.onTabDragStart;
@@ -50,6 +51,7 @@ export class TabsContainer extends CompositeDisposable {
         this._direction = 'horizontal';
         this.dropdownPart = null;
         this._overflowTabs = [];
+        this._overflowTabGroups = [];
         this._dropdownDisposable = new MutableDisposable();
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
@@ -70,11 +72,13 @@ export class TabsContainer extends CompositeDisposable {
             showTabsOverflowControl: !accessor.options.disableTabsOverflowList,
         });
         this.voidContainer = new VoidContainer(this.accessor, this.group);
+        this.tabs.voidContainer = this.voidContainer.element;
         this._element.appendChild(this.preActionsContainer);
         this._element.appendChild(this.tabs.element);
         this._element.appendChild(this.leftActionsContainer);
         this._element.appendChild(this.voidContainer.element);
         this._element.appendChild(this.rightActionsContainer);
+        this.tabs.setExtendedDropZone(this._element);
         this.addDisposables(this.tabs.onDrop((e) => this._onDrop.fire(e)), this.tabs.onWillShowOverlay((e) => this._onWillShowOverlay.fire(e)), accessor.onDidOptionsChange(() => {
             this.tabs.showTabsOverflowControl =
                 !accessor.options.disableTabsOverflowList;
@@ -86,6 +90,10 @@ export class TabsContainer extends CompositeDisposable {
                 group: this.group,
             });
         }), this.voidContainer.onDrop((event) => {
+            // If an active group drag is in progress, let Tabs handle it
+            if (this.tabs.handleVoidDrop()) {
+                return;
+            }
             this._onDrop.fire({
                 event: event.nativeEvent,
                 index: this.tabs.size,
@@ -98,6 +106,25 @@ export class TabsContainer extends CompositeDisposable {
                 group: this.group,
                 getData: getPanelData,
             }));
+        }), addDisposableListener(this.leftActionsContainer, 'dragleave', (event) => {
+            const related = event.relatedTarget;
+            if (!this.leftActionsContainer.contains(related) &&
+                !this._element.contains(related)) {
+                // Left the header entirely
+                this.tabs.clearExternalAnimState();
+            }
+        }), addDisposableListener(this.voidContainer.element, 'dragleave', (event) => {
+            const related = event.relatedTarget;
+            if (!this.voidContainer.element.contains(related)) {
+                if (this._element.contains(related)) {
+                    // Moved to another part of the header — keep state
+                    this.tabs.setExternalInsertionIndex(null);
+                }
+                else {
+                    // Left the header entirely
+                    this.tabs.clearExternalAnimState();
+                }
+            }
         }), addDisposableListener(this.voidContainer.element, 'pointerdown', (event) => {
             if (event.defaultPrevented) {
                 return;
@@ -105,7 +132,8 @@ export class TabsContainer extends CompositeDisposable {
             const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
             if (isFloatingGroupsEnabled &&
                 event.shiftKey &&
-                this.group.api.location.type !== 'floating') {
+                this.group.api.location.type !== 'floating' &&
+                this.group.api.location.type !== 'edge') {
                 event.preventDefault();
                 const { top, left } = this.element.getBoundingClientRect();
                 const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
@@ -192,19 +220,22 @@ export class TabsContainer extends CompositeDisposable {
     }
     toggleDropdown(options) {
         const tabs = options.reset ? [] : options.tabs;
+        const tabGroups = options.reset ? [] : options.tabGroups;
         this._overflowTabs = tabs;
-        if (this._overflowTabs.length > 0 && this.dropdownPart) {
-            this.dropdownPart.update({ tabs: tabs.length });
+        this._overflowTabGroups = tabGroups;
+        const totalCount = this._overflowTabs.length;
+        if (totalCount > 0 && this.dropdownPart) {
+            this.dropdownPart.update({ tabs: totalCount });
             return;
         }
-        if (this._overflowTabs.length === 0) {
+        if (totalCount === 0) {
             this._dropdownDisposable.dispose();
             return;
         }
         const root = document.createElement('div');
         root.className = 'dv-tabs-overflow-dropdown-root';
         const part = createDropdownElementHandle();
-        part.update({ tabs: tabs.length });
+        part.update({ tabs: totalCount });
         this.dropdownPart = part;
         root.appendChild(part.element);
         this.rightActionsContainer.prepend(root);
@@ -219,7 +250,58 @@ export class TabsContainer extends CompositeDisposable {
             const el = document.createElement('div');
             el.style.overflow = 'auto';
             el.className = 'dv-tabs-overflow-container';
+            // Build lookup: panelId → tabGroup for overflow groups
+            const overflowGroupSet = new Set(this._overflowTabGroups);
+            const allTabGroups = this.group.model.getTabGroups();
+            const panelToGroup = new Map();
+            for (const tg of allTabGroups) {
+                if (overflowGroupSet.has(tg.id)) {
+                    for (const pid of tg.panelIds) {
+                        panelToGroup.set(pid, tg);
+                    }
+                }
+            }
+            // Track which groups have already been rendered
+            const renderedGroups = new Set();
             for (const tab of this.tabs.tabs.filter((tab) => this._overflowTabs.includes(tab.panel.id))) {
+                const tg = panelToGroup.get(tab.panel.id);
+                // If this tab belongs to an overflow group, render the
+                // group header before its first member tab.
+                if (tg && !renderedGroups.has(tg.id)) {
+                    renderedGroups.add(tg.id);
+                    const groupHeader = document.createElement('div');
+                    groupHeader.className = 'dv-tabs-overflow-group-header';
+                    const colorDot = document.createElement('span');
+                    colorDot.className = 'dv-tabs-overflow-group-color';
+                    applyTabGroupAccent(colorDot, tg.color, this.accessor.tabGroupColorPalette);
+                    groupHeader.appendChild(colorDot);
+                    const labelSpan = document.createElement('span');
+                    labelSpan.className = 'dv-tabs-overflow-group-label';
+                    labelSpan.textContent = tg.label || tg.id;
+                    groupHeader.appendChild(labelSpan);
+                    if (tg.collapsed) {
+                        const badge = document.createElement('span');
+                        badge.className =
+                            'dv-tabs-overflow-group-collapsed-badge';
+                        badge.textContent = `${tg.panelIds.length}`;
+                        groupHeader.appendChild(badge);
+                    }
+                    groupHeader.addEventListener('click', () => {
+                        this.accessor
+                            .getPopupServiceForGroup(this.group)
+                            .close();
+                        if (tg.collapsed) {
+                            tg.expand();
+                        }
+                        // Activate the first panel in the group
+                        const firstPanelId = tg.panelIds[0];
+                        if (firstPanelId) {
+                            const panel = this.group.panels.find((p) => p.id === firstPanelId);
+                            panel === null || panel === void 0 ? void 0 : panel.api.setActive();
+                        }
+                    });
+                    el.appendChild(groupHeader);
+                }
                 const panelObject = this.group.panels.find((panel) => panel === tab.panel);
                 const tabComponent = panelObject.view.createTabRenderer('headerOverflow');
                 const child = tabComponent.element;
@@ -227,11 +309,19 @@ export class TabsContainer extends CompositeDisposable {
                 toggleClass(wrapper, 'dv-tab', true);
                 toggleClass(wrapper, 'dv-active-tab', panelObject.api.isActive);
                 toggleClass(wrapper, 'dv-inactive-tab', !panelObject.api.isActive);
+                if (tg) {
+                    toggleClass(wrapper, 'dv-tab--grouped', true);
+                }
                 wrapper.addEventListener('click', (event) => {
-                    this.accessor.popupService.close();
+                    this.accessor
+                        .getPopupServiceForGroup(this.group)
+                        .close();
                     if (event.defaultPrevented) {
                         return;
                     }
+                    if (tg === null || tg === void 0 ? void 0 : tg.collapsed) {
+                        tg.expand();
+                    }
                     tab.element.scrollIntoView();
                     tab.panel.api.setActive();
                 });
@@ -239,7 +329,9 @@ export class TabsContainer extends CompositeDisposable {
                 el.appendChild(wrapper);
             }
             const relativeParent = findRelativeZIndexParent(root);
-            this.accessor.popupService.openPopover(el, {
+            this.accessor
+                .getPopupServiceForGroup(this.group)
+                .openPopover(el, {
                 x: event.clientX,
                 y: event.clientY,
                 zIndex: (relativeParent === null || relativeParent === void 0 ? void 0 : relativeParent.style.zIndex)
@@ -252,4 +344,10 @@ export class TabsContainer extends CompositeDisposable {
         this.tabs.updateDragAndDropState();
         this.voidContainer.updateDragAndDropState();
     }
+    updateTabGroups() {
+        this.tabs.updateTabGroups();
+    }
+    refreshTabGroupAccent() {
+        this.tabs.refreshTabGroupAccent();
+    }
 }

package/dist/esm/dockview/contextMenu.d.ts

@@ -0,0 +1,10 @@
+import { DockviewComponent } from './dockviewComponent';
+import { DockviewGroupPanel } from './dockviewGroupPanel';
+import { IDockviewPanel } from './dockviewPanel';
+import { ITabGroup } from './tabGroup';
+export declare class ContextMenuController {
+    private readonly accessor;
+    constructor(accessor: DockviewComponent);
+    show(panel: IDockviewPanel, group: DockviewGroupPanel, event: MouseEvent): void;
+    showForChip(tabGroup: ITabGroup, group: DockviewGroupPanel, event: MouseEvent): void;
+}

package/dist/esm/dockview/contextMenu.js

@@ -0,0 +1,213 @@
+import { findRelativeZIndexParent } from '../dom';
+function popoverZIndexFor(target) {
+    if (!(target instanceof HTMLElement)) {
+        return undefined;
+    }
+    // Floating overlays live in the shell as siblings of the popover anchor
+    // and the AriaLevelTracker sets their inline z-index. Without this, a
+    // popover opened from inside a floating group would render behind it
+    // because they share the shell stacking context.
+    const relativeParent = findRelativeZIndexParent(target);
+    return (relativeParent === null || relativeParent === void 0 ? void 0 : relativeParent.style.zIndex)
+        ? `calc(${relativeParent.style.zIndex} * 2)`
+        : undefined;
+}
+let _nextId = 0;
+const nextContextMenuItemId = () => `dv-ctx-menu-item-${_nextId++}`;
+function isItemConfig(item) {
+    return typeof item === 'object';
+}
+function buildItem(label, close, action, disabled) {
+    const el = document.createElement('div');
+    el.className = 'dv-context-menu-item';
+    el.setAttribute('role', 'menuitem');
+    if (disabled) {
+        el.classList.add('dv-context-menu-item--disabled');
+        el.setAttribute('aria-disabled', 'true');
+    }
+    el.textContent = label;
+    if (!disabled) {
+        el.addEventListener('click', () => {
+            action();
+            close();
+        });
+    }
+    return el;
+}
+function buildSeparator() {
+    const el = document.createElement('div');
+    el.className = 'dv-context-menu-separator';
+    el.setAttribute('role', 'separator');
+    return el;
+}
+function buildRenameInput(tabGroup) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'dv-context-menu-rename';
+    const input = document.createElement('input');
+    input.className = 'dv-context-menu-rename-input';
+    input.type = 'text';
+    input.placeholder = 'Name This Group';
+    input.value = tabGroup.label;
+    input.addEventListener('input', () => {
+        tabGroup.setLabel(input.value);
+    });
+    input.addEventListener('keydown', (e) => {
+        if (e.key !== 'Escape' && e.key !== 'Enter') {
+            e.stopPropagation();
+        }
+    });
+    input.addEventListener('click', (e) => {
+        e.stopPropagation();
+    });
+    wrapper.appendChild(input);
+    requestAnimationFrame(() => {
+        input.focus();
+        input.select();
+    });
+    return wrapper;
+}
+function buildColorPicker(tabGroup, palette) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'dv-context-menu-color-picker';
+    if (!palette.enabled) {
+        // Opt-out: render no swatches. Returning a wrapper rather than null
+        // keeps the call site simple; the wrapper is empty and visually inert.
+        return wrapper;
+    }
+    for (const entry of palette.entries()) {
+        const swatch = document.createElement('div');
+        swatch.className = 'dv-context-menu-color-swatch';
+        // Use a CSS custom property rather than setting `backgroundColor`
+        // directly: the IDL setter validates the value against a color
+        // grammar and rejects `var(...)` references in some environments
+        // (notably jsdom; some browsers have historically had similar
+        // quirks). The matching SCSS rule reads the var at use time.
+        swatch.style.setProperty('--dv-tab-group-color', entry.value);
+        if (entry.label) {
+            swatch.title = entry.label;
+        }
+        if (tabGroup.color === entry.id) {
+            swatch.classList.add('dv-context-menu-color-swatch--selected');
+        }
+        swatch.addEventListener('click', () => {
+            tabGroup.setColor(entry.id);
+        });
+        wrapper.appendChild(swatch);
+    }
+    return wrapper;
+}
+export class ContextMenuController {
+    constructor(accessor) {
+        this.accessor = accessor;
+    }
+    show(panel, group, event) {
+        var _a, _b;
+        if (!this.accessor.options.getTabContextMenuItems) {
+            return;
+        }
+        const items = this.accessor.options.getTabContextMenuItems({
+            panel,
+            group,
+            api: this.accessor.api,
+            event,
+        });
+        if (items.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        const popupService = this.accessor.getPopupServiceForGroup(group);
+        const close = () => popupService.close();
+        const menuEl = document.createElement('div');
+        menuEl.className = 'dv-context-menu';
+        menuEl.setAttribute('role', 'menu');
+        for (const item of items) {
+            if (item === 'separator') {
+                menuEl.appendChild(buildSeparator());
+            }
+            else if (item === 'close') {
+                menuEl.appendChild(buildItem('Close', close, () => panel.api.close()));
+            }
+            else if (item === 'closeOthers') {
+                menuEl.appendChild(buildItem('Close Others', close, () => {
+                    group.panels
+                        .filter((p) => p !== panel)
+                        .forEach((p) => p.api.close());
+                }));
+            }
+            else if (item === 'closeAll') {
+                menuEl.appendChild(buildItem('Close All', close, () => {
+                    [...group.panels].forEach((p) => p.api.close());
+                }));
+            }
+            else if (isItemConfig(item) && item.element) {
+                menuEl.appendChild(item.element);
+            }
+            else if (isItemConfig(item) && item.component) {
+                const renderer = (_b = (_a = this.accessor.options).createContextMenuItemComponent) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                    id: nextContextMenuItemId(),
+                    component: item.component,
+                });
+                if (renderer) {
+                    renderer.init({
+                        panel,
+                        group,
+                        api: this.accessor.api,
+                        close,
+                        componentProps: item.componentProps,
+                    });
+                    menuEl.appendChild(renderer.element);
+                }
+            }
+            else if (isItemConfig(item) && item.label) {
+                menuEl.appendChild(buildItem(item.label, close, () => { var _a; return (_a = item.action) === null || _a === void 0 ? void 0 : _a.call(item); }, item.disabled));
+            }
+        }
+        popupService.openPopover(menuEl, {
+            x: event.clientX,
+            y: event.clientY,
+            zIndex: popoverZIndexFor(event.target),
+        });
+    }
+    showForChip(tabGroup, group, event) {
+        if (!this.accessor.options.getTabGroupChipContextMenuItems) {
+            return;
+        }
+        const items = this.accessor.options.getTabGroupChipContextMenuItems({
+            tabGroup,
+            group,
+            api: this.accessor.api,
+            event,
+        });
+        if (items.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        const popupService = this.accessor.getPopupServiceForGroup(group);
+        const close = () => popupService.close();
+        const menuEl = document.createElement('div');
+        menuEl.className = 'dv-context-menu';
+        menuEl.setAttribute('role', 'menu');
+        for (const item of items) {
+            if (item === 'separator') {
+                menuEl.appendChild(buildSeparator());
+            }
+            else if (item === 'rename') {
+                menuEl.appendChild(buildRenameInput(tabGroup));
+            }
+            else if (item === 'colorPicker') {
+                menuEl.appendChild(buildColorPicker(tabGroup, this.accessor.tabGroupColorPalette));
+            }
+            else if (isItemConfig(item) && item.element) {
+                menuEl.appendChild(item.element);
+            }
+            else if (isItemConfig(item) && item.label) {
+                menuEl.appendChild(buildItem(item.label, close, () => { var _a; return (_a = item.action) === null || _a === void 0 ? void 0 : _a.call(item); }, item.disabled));
+            }
+        }
+        popupService.openPopover(menuEl, {
+            x: event.clientX,
+            y: event.clientY,
+            zIndex: popoverZIndexFor(event.target),
+        });
+    }
+}

package/dist/esm/dockview/dockviewComponent.d.ts

@@ -8,7 +8,7 @@ import { BaseGrid, IBaseGrid } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { Orientation } from '../splitview/splitview';
 import { GroupOptions, GroupPanelViewState, DockviewDidDropEvent, DockviewWillDropEvent } from './dockviewGroupPanelModel';
-import { DockviewWillShowOverlayLocationEvent } from './events';
+import { DockviewWillShowOverlayLocationEvent, DockviewTabGroupChangeEvent, DockviewTabGroupCollapsedChangeEvent, DockviewTabGroupPanelChangeEvent } from './events';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { Parameters } from '../panel/types';
 import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
@@ -16,7 +16,11 @@ import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContaine
 import { AnchoredBox, AnchorPosition, Box } from '../types';
 import { DockviewPanelRenderer, OverlayRenderContainer } from '../overlay/overlayRenderContainer';
 import { PopupService } from './components/popupService';
+import { ContextMenuController } from './contextMenu';
 import { DropTargetAnchorContainer } from '../dnd/dropTargetAnchorContainer';
+import { EdgeGroupPosition, EdgeGroupOptions, SerializedEdgeGroups } from './dockviewShell';
+import { DockviewGroupPanelApi } from '../api/dockviewGroupPanelApi';
+import { TabGroupColorPalette } from './tabGroupAccent';
 export interface DockviewPopoutGroupOptions {
     /**
      * The position of the popout group
@@ -68,6 +72,7 @@ export interface SerializedDockview {
     activeGroup?: string;
     floatingGroups?: SerializedFloatingGroup[];
     popoutGroups?: SerializedPopoutGroup[];
+    edgeGroups?: SerializedEdgeGroups;
 }
 export interface MovePanelEvent {
     panel: IDockviewPanel;
@@ -87,6 +92,7 @@ type MoveGroupOrPanelOptions = {
     from: {
         groupId: string;
         panelId?: string;
+        tabGroupId?: string;
     };
     to: {
         group: DockviewGroupPanel;
@@ -103,7 +109,7 @@ export interface FloatingGroupOptions {
     width?: number;
     position?: AnchorPosition;
 }
-export interface FloatingGroupOptionsInternal extends FloatingGroupOptions {
+interface FloatingGroupOptionsInternal extends FloatingGroupOptions {
     skipRemoveGroup?: boolean;
     inDragMode?: boolean;
     skipActiveGroup?: boolean;
@@ -145,7 +151,14 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly onDidPopoutGroupSizeChange: Event<PopoutGroupChangeSizeEvent>;
     readonly onDidPopoutGroupPositionChange: Event<PopoutGroupChangePositionEvent>;
     readonly onDidOpenPopoutWindowFail: Event<void>;
+    readonly onDidCreateTabGroup: Event<DockviewTabGroupChangeEvent>;
+    readonly onDidDestroyTabGroup: Event<DockviewTabGroupChangeEvent>;
+    readonly onDidAddPanelToTabGroup: Event<DockviewTabGroupPanelChangeEvent>;
+    readonly onDidRemovePanelFromTabGroup: Event<DockviewTabGroupPanelChangeEvent>;
+    readonly onDidTabGroupChange: Event<DockviewTabGroupChangeEvent>;
+    readonly onDidTabGroupCollapsedChange: Event<DockviewTabGroupCollapsedChangeEvent>;
     readonly options: DockviewComponentOptions;
+    readonly tabGroupColorPalette: TabGroupColorPalette;
     updateOptions(options: DockviewOptions): void;
     moveGroupOrPanel(options: MoveGroupOrPanelOptions): void;
     moveGroup(options: MoveGroupOptions): void;
@@ -179,16 +192,24 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     fromJSON(data: any, options?: {
         reuseExistingPanels: boolean;
     }): void;
+    addEdgeGroup(position: EdgeGroupPosition, options: EdgeGroupOptions): DockviewGroupPanelApi;
+    getEdgeGroup(position: EdgeGroupPosition): DockviewGroupPanelApi | undefined;
+    setEdgeGroupVisible(position: EdgeGroupPosition, visible: boolean): void;
+    isEdgeGroupVisible(position: EdgeGroupPosition): boolean;
+    removeEdgeGroup(position: EdgeGroupPosition): void;
 }
 export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> implements IDockviewComponent {
     private readonly nextGroupId;
     private readonly _deserializer;
     private readonly _api;
     private _options;
+    private _tabGroupColorPalette;
     private _watermark;
-    private readonly _themeClassnames;
+    private _shellThemeClassnames;
     readonly overlayRenderContainer: OverlayRenderContainer;
     readonly popupService: PopupService;
+    private readonly _popoutPopupServices;
+    readonly contextMenuController: ContextMenuController;
     readonly rootDropTargetContainer: DropTargetAnchorContainer;
     private readonly _onWillDragPanel;
     readonly onWillDragPanel: Event<TabDragEvent>;
@@ -218,8 +239,25 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
     private readonly _onDidMovePanel;
     readonly onDidMovePanel: Event<MovePanelEvent>;
+    private readonly _onDidCreateTabGroup;
+    readonly onDidCreateTabGroup: Event<DockviewTabGroupChangeEvent>;
+    private readonly _onDidDestroyTabGroup;
+    readonly onDidDestroyTabGroup: Event<DockviewTabGroupChangeEvent>;
+    private readonly _onDidAddPanelToTabGroup;
+    readonly onDidAddPanelToTabGroup: Event<DockviewTabGroupPanelChangeEvent>;
+    private readonly _onDidRemovePanelFromTabGroup;
+    readonly onDidRemovePanelFromTabGroup: Event<DockviewTabGroupPanelChangeEvent>;
+    private readonly _onDidTabGroupChange;
+    readonly onDidTabGroupChange: Event<DockviewTabGroupChangeEvent>;
+    private readonly _onDidTabGroupCollapsedChange;
+    readonly onDidTabGroupCollapsedChange: Event<DockviewTabGroupChangeEvent>;
     private readonly _onDidMaximizedGroupChange;
     readonly onDidMaximizedGroupChange: Event<DockviewMaximizedGroupChanged>;
+    private _shellManager;
+    private _floatingOverlayHost;
+    private _inShellLayout;
+    private readonly _edgeGroups;
+    private readonly _edgeGroupDisposables;
     private readonly _floatingGroups;
     private readonly _popoutGroups;
     private readonly _rootDropTarget;
@@ -236,6 +274,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get totalPanels(): number;
     get panels(): IDockviewPanel[];
     get options(): DockviewComponentOptions;
+    get tabGroupColorPalette(): TabGroupColorPalette;
     get activePanel(): IDockviewPanel | undefined;
     get renderer(): DockviewPanelRenderer;
     get defaultHeaderPosition(): DockviewHeaderPosition;
@@ -248,11 +287,28 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get popoutRestorationPromise(): Promise<void>;
     constructor(container: HTMLElement, options: DockviewComponentOptions);
     setVisible(panel: DockviewGroupPanel, visible: boolean): void;
+    /**
+     * Returns the {@link PopupService} that should host popovers (context
+     * menus, tab overflow menus) for the given group. Popout groups have their
+     * own service rooted in their popout window so the popover renders there
+     * and dismisses on events from that window.
+     */
+    getPopupServiceForGroup(group: DockviewGroupPanel): PopupService;
     addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: DockviewPopoutGroupOptions): Promise<boolean>;
     addFloatingGroup(item: DockviewPanel | DockviewGroupPanel, options?: FloatingGroupOptionsInternal): void;
     private orthogonalize;
     updateOptions(options: Partial<DockviewComponentOptions>): void;
     layout(width: number, height: number, forceResize?: boolean | undefined): void;
+    private _syncFloatingOverlayHost;
+    private _layoutFromShell;
+    protected forceRelayout(): void;
+    addEdgeGroup(position: EdgeGroupPosition, options: EdgeGroupOptions): DockviewGroupPanelApi;
+    getEdgeGroup(position: EdgeGroupPosition): DockviewGroupPanelApi | undefined;
+    setEdgeGroupVisible(position: EdgeGroupPosition, visible: boolean): void;
+    isEdgeGroupVisible(position: EdgeGroupPosition): boolean;
+    removeEdgeGroup(position: EdgeGroupPosition): void;
+    setEdgeGroupCollapsed(group: DockviewGroupPanel, collapsed: boolean): void;
+    isEdgeGroupCollapsed(group: DockviewGroupPanel): boolean;
     private updateDragAndDropState;
     focus(): void;
     getGroupPanel(id: string): IDockviewPanel | undefined;
@@ -297,6 +353,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private debouncedUpdateAllPositions;
     movingLock<T>(func: () => T): T;
     moveGroupOrPanel(options: MoveGroupOrPanelOptions): void;
+    private moveTabGroupToGroup;
     moveGroup(options: MoveGroupOptions): void;
     doSetGroupActive(group: DockviewGroupPanel | undefined): void;
     doSetGroupAndPanelActive(group: DockviewGroupPanel | undefined): void;