dockview-core 5.1.0 → 6.0.0

package/dist/esm/dockview/dockviewComponent.js

@@ -12,7 +12,7 @@ import { BaseGrid, toTarget, } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { Orientation } from '../splitview/splitview';
 import { DockviewDidDropEvent, DockviewWillDropEvent, } from './dockviewGroupPanelModel';
-import { DockviewWillShowOverlayLocationEvent } from './events';
+import { DockviewWillShowOverlayLocationEvent, } from './events';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelModel } from './dockviewPanelModel';
 import { getPanelData } from '../dnd/dataTransfer';
@@ -24,12 +24,21 @@ import { OverlayRenderContainer, } from '../overlay/overlayRenderContainer';
 import { PopoutWindow } from '../popoutWindow';
 import { StrictEventsSequencing } from './strictEventsSequencing';
 import { PopupService } from './components/popupService';
+import { ContextMenuController } from './contextMenu';
 import { DropTargetAnchorContainer } from '../dnd/dropTargetAnchorContainer';
 import { themeAbyss } from './theme';
+import { ShellManager, } from './dockviewShell';
+import { DEFAULT_TAB_GROUP_COLORS, TabGroupColorPalette, } from './tabGroupAccent';
 const DEFAULT_ROOT_OVERLAY_MODEL = {
     activationSize: { type: 'pixels', value: 10 },
     size: { type: 'pixels', value: 20 },
 };
+function buildTabGroupColorPalette(options) {
+    var _a;
+    const entries = (_a = options.tabGroupColors) !== null && _a !== void 0 ? _a : DEFAULT_TAB_GROUP_COLORS;
+    const enabled = options.tabGroupAccent !== 'off';
+    return new TabGroupColorPalette(entries, enabled);
+}
 function moveGroupWithoutDestroying(options) {
     const activePanel = options.from.activePanel;
     const panels = [...options.from.panels].map((panel) => {
@@ -57,6 +66,9 @@ export class DockviewComponent extends BaseGrid {
     get options() {
         return this._options;
     }
+    get tabGroupColorPalette() {
+        return this._tabGroupColorPalette;
+    }
     get activePanel() {
         const activeGroup = this.activeGroup;
         if (!activeGroup) {
@@ -86,7 +98,7 @@ export class DockviewComponent extends BaseGrid {
         return this._popoutRestorationPromise;
     }
     constructor(container, options) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         super(container, {
             proportionalLayout: true,
             orientation: Orientation.HORIZONTAL,
@@ -101,6 +113,7 @@ export class DockviewComponent extends BaseGrid {
         this.nextGroupId = sequentialNumberGenerator();
         this._deserializer = new DefaultDockviewDeserialzier(this);
         this._watermark = null;
+        this._popoutPopupServices = new Map();
         this._onWillDragPanel = new Emitter();
         this.onWillDragPanel = this._onWillDragPanel.event;
         this._onWillDragGroup = new Emitter();
@@ -129,8 +142,23 @@ export class DockviewComponent extends BaseGrid {
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
         this._onDidMovePanel = new Emitter();
         this.onDidMovePanel = this._onDidMovePanel.event;
+        this._onDidCreateTabGroup = new Emitter();
+        this.onDidCreateTabGroup = this._onDidCreateTabGroup.event;
+        this._onDidDestroyTabGroup = new Emitter();
+        this.onDidDestroyTabGroup = this._onDidDestroyTabGroup.event;
+        this._onDidAddPanelToTabGroup = new Emitter();
+        this.onDidAddPanelToTabGroup = this._onDidAddPanelToTabGroup.event;
+        this._onDidRemovePanelFromTabGroup = new Emitter();
+        this.onDidRemovePanelFromTabGroup = this._onDidRemovePanelFromTabGroup.event;
+        this._onDidTabGroupChange = new Emitter();
+        this.onDidTabGroupChange = this._onDidTabGroupChange.event;
+        this._onDidTabGroupCollapsedChange = new Emitter();
+        this.onDidTabGroupCollapsedChange = this._onDidTabGroupCollapsedChange.event;
         this._onDidMaximizedGroupChange = new Emitter();
         this.onDidMaximizedGroupChange = this._onDidMaximizedGroupChange.event;
+        this._inShellLayout = false;
+        this._edgeGroups = new Map();
+        this._edgeGroupDisposables = new Map();
         this._floatingGroups = [];
         this._popoutGroups = [];
         this._popoutRestorationPromise = Promise.resolve();
@@ -144,11 +172,30 @@ export class DockviewComponent extends BaseGrid {
         this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
         this._moving = false;
         this._options = options;
+        this._tabGroupColorPalette = buildTabGroupColorPalette(options);
         this.popupService = new PopupService(this.element);
-        this._themeClassnames = new Classnames(this.element);
+        this.contextMenuController = new ContextMenuController(this);
         this._api = new DockviewApi(this);
-        this.rootDropTargetContainer = new DropTargetAnchorContainer(this.element, { disabled: true });
-        this.overlayRenderContainer = new OverlayRenderContainer(this.gridview.element, this);
+        // The shell always wraps the dockview element so edge groups can be
+        // added at any time via addEdgeGroup() without re-parenting the DOM.
+        this.disableResizing = true;
+        container.removeChild(this.element);
+        this._shellManager = new ShellManager(container, this.element, (w, h) => this._layoutFromShell(w, h), (_d = (_c = options.theme) === null || _c === void 0 ? void 0 : _c.gap) !== null && _d !== void 0 ? _d : 0, (_e = options.theme) === null || _e === void 0 ? void 0 : _e.edgeGroupCollapsedSize);
+        // The shell wraps the dockview element, so move the popup anchor
+        // into the shell so overflow dropdowns in edge groups position correctly
+        this.popupService.updateRoot(this._shellManager.element);
+        this._shellThemeClassnames = new Classnames(this._shellManager.element);
+        // Anchor the overlay container to the shell element so that edge groups
+        // (which live outside this.element in the shell layout) are covered when
+        // dndOverlayMounting is 'absolute'.
+        this.rootDropTargetContainer = new DropTargetAnchorContainer(this._shellManager.element, { disabled: true });
+        this.overlayRenderContainer = new OverlayRenderContainer(this._shellManager.element, this);
+        // Hosted in the shell (not inside `.dv-dockview`) so floating overlays
+        // share a stacking context with `dv-render-overlay` panels; sized to
+        // mirror the gridview rect so saved positions remain valid.
+        this._floatingOverlayHost = document.createElement('div');
+        this._floatingOverlayHost.className = 'dv-floating-overlay-host';
+        this._shellManager.element.appendChild(this._floatingOverlayHost);
         this._rootDropTarget = new Droptarget(this.element, {
             className: 'dv-drop-target-edge',
             canDisplayOverlay: (event, position) => {
@@ -177,7 +224,7 @@ export class DockviewComponent extends BaseGrid {
                 return firedEvent.isAccepted;
             },
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-            overlayModel: (_c = options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL,
+            overlayModel: (_f = options.rootOverlayModel) !== null && _f !== void 0 ? _f : DEFAULT_ROOT_OVERLAY_MODEL,
             getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
         this.updateDropTargetModel(options);
@@ -195,7 +242,7 @@ export class DockviewComponent extends BaseGrid {
              * Debounced to avoid multiple calls when moving groups with multiple panels.
              */
             this.debouncedUpdateAllPositions();
-        }), this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this._onDidOptionsChange, this._onDidPopoutGroupSizeChange, this._onDidPopoutGroupPositionChange, this._onDidOpenPopoutWindowFail, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+        }), this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this._onDidOptionsChange, this._onDidPopoutGroupSizeChange, this._onDidPopoutGroupPositionChange, this._onDidOpenPopoutWindowFail, this._onDidCreateTabGroup, this._onDidDestroyTabGroup, this._onDidAddPanelToTabGroup, this._onDidRemovePanelFromTabGroup, this._onDidTabGroupChange, this._onDidTabGroupCollapsedChange, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
             this.updateWatermark();
         }), this.onDidAdd((event) => {
             if (!this._moving) {
@@ -216,9 +263,10 @@ export class DockviewComponent extends BaseGrid {
             });
         }), Event.any(this.onDidAdd, this.onDidRemove)(() => {
             this.updateWatermark();
-        }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidMovePanel, this.onDidActivePanelChange, this.onDidPopoutGroupPositionChange, this.onDidPopoutGroupSizeChange)(() => {
+        }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidRemoveGroup, this.onDidMovePanel, this.onDidActivePanelChange, this.onDidPopoutGroupPositionChange, this.onDidPopoutGroupSizeChange, this.onDidCreateTabGroup, this.onDidDestroyTabGroup, this.onDidAddPanelToTabGroup, this.onDidRemovePanelFromTabGroup, this.onDidTabGroupChange, this.onDidTabGroupCollapsedChange)(() => {
             this._bufferOnDidLayoutChange.fire();
         }), Disposable.from(() => {
+            var _a;
             // iterate over a copy of the array since .dispose() mutates the original array
             for (const group of [...this._floatingGroups]) {
                 group.dispose();
@@ -227,6 +275,11 @@ export class DockviewComponent extends BaseGrid {
             for (const group of [...this._popoutGroups]) {
                 group.disposable.dispose();
             }
+            (_a = this._shellManager) === null || _a === void 0 ? void 0 : _a.dispose();
+            for (const d of this._edgeGroupDisposables.values()) {
+                d.dispose();
+            }
+            this._edgeGroupDisposables.clear();
         }), this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
             if (this.gridview.length > 0 && event.position === 'center') {
                 // option only available when no panels in primary grid
@@ -297,10 +350,28 @@ export class DockviewComponent extends BaseGrid {
             case 'popout':
                 console.warn('dockview: You cannot hide a group that is in a popout window');
                 break;
+            case 'edge':
+                // Edge group visibility is managed via setEdgeGroupVisible
+                break;
         }
     }
+    /**
+     * 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) {
+        var _a;
+        return (_a = this._popoutPopupServices.get(group.id)) !== null && _a !== void 0 ? _a : this.popupService;
+    }
     addPopoutGroup(itemToPopout, options) {
         var _a, _b, _c, _d, _e;
+        if (itemToPopout instanceof DockviewGroupPanel &&
+            itemToPopout.model.location.type === 'edge') {
+            // edge groups are permanent structural elements and cannot be popped out
+            return Promise.resolve(false);
+        }
         if (itemToPopout instanceof DockviewPanel &&
             itemToPopout.group.size === 1) {
             return this.addPopoutGroup(itemToPopout.group, options);
@@ -420,6 +491,16 @@ export class DockviewComponent extends BaseGrid {
             const dropTargetContainer = new DropTargetAnchorContainer(anchor, { disabled: this.rootDropTargetContainer.disabled });
             popoutContainer.appendChild(anchor);
             group.model.dropTargetContainer = dropTargetContainer;
+            // Each popout group needs its own popover service so that
+            // tab context menus, chip menus, and tab overflow menus
+            // render in the popout window (not the main window) and
+            // their pointerdown/keydown listeners fire on the right
+            // window for outside-click and Escape dismissal.
+            const popoutPopupService = new PopupService(popoutContainer, _window.window);
+            this._popoutPopupServices.set(group.id, popoutPopupService);
+            popoutWindowDisposable.addDisposables(popoutPopupService, Disposable.from(() => {
+                this._popoutPopupServices.delete(group.id);
+            }));
             group.model.location = {
                 type: 'popout',
                 getWindow: () => _window.window,
@@ -544,7 +625,12 @@ export class DockviewComponent extends BaseGrid {
         });
     }
     addFloatingGroup(item, options) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
+        if (item instanceof DockviewGroupPanel &&
+            item.model.location.type === 'edge') {
+            // edge groups are permanent structural elements and cannot be floated
+            return;
+        }
         let group;
         if (item instanceof DockviewPanel) {
             group = this.createGroup();
@@ -639,11 +725,11 @@ export class DockviewComponent extends BaseGrid {
             };
         }
         const anchoredBox = getAnchoredBox();
-        const overlay = new Overlay(Object.assign(Object.assign({ container: this.gridview.element, content: group.element }, anchoredBox), { minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
+        const overlay = new Overlay(Object.assign(Object.assign({ container: (_b = this._floatingOverlayHost) !== null && _b !== void 0 ? _b : this.gridview.element, content: group.element }, anchoredBox), { minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : ((_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE), minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                : ((_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE), minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : ((_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE) }));
+                : ((_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE) }));
         const el = group.element.querySelector('.dv-void-container');
         if (!el) {
             throw new Error('dockview: failed to find drag handle');
@@ -724,7 +810,7 @@ export class DockviewComponent extends BaseGrid {
         }
     }
     updateOptions(options) {
-        var _a, _b;
+        var _a, _b, _c;
         super.updateOptions(options);
         if ('floatingGroupBounds' in options) {
             for (const group of this._floatingGroups) {
@@ -765,10 +851,25 @@ export class DockviewComponent extends BaseGrid {
                 group.model.updateHeaderActions();
             }
         }
-        this.layout(this.gridview.width, this.gridview.height, true);
+        if ('tabGroupColors' in options || 'tabGroupAccent' in options) {
+            this._tabGroupColorPalette.setEntries((_c = this._options.tabGroupColors) !== null && _c !== void 0 ? _c : DEFAULT_TAB_GROUP_COLORS);
+            this._tabGroupColorPalette.enabled =
+                this._options.tabGroupAccent !== 'off';
+            for (const group of this.groups) {
+                group.model.refreshTabGroupAccent();
+            }
+        }
+        this._onDidOptionsChange.fire();
+        this._layoutFromShell(this.gridview.width, this.gridview.height);
     }
     layout(width, height, forceResize) {
-        super.layout(width, height, forceResize);
+        if (this._shellManager && !this._inShellLayout) {
+            this._shellManager.layout(width, height);
+        }
+        else {
+            super.layout(width, height, forceResize);
+        }
+        this._syncFloatingOverlayHost();
         if (this._floatingGroups) {
             for (const floating of this._floatingGroups) {
                 // ensure floting groups stay within visible boundaries
@@ -776,6 +877,103 @@ export class DockviewComponent extends BaseGrid {
             }
         }
     }
+    _syncFloatingOverlayHost() {
+        if (!this._floatingOverlayHost || !this._shellManager) {
+            return;
+        }
+        const shellRect = this._shellManager.element.getBoundingClientRect();
+        const gridRect = this.element.getBoundingClientRect();
+        const host = this._floatingOverlayHost;
+        host.style.left = `${gridRect.left - shellRect.left}px`;
+        host.style.top = `${gridRect.top - shellRect.top}px`;
+        host.style.width = `${gridRect.width}px`;
+        host.style.height = `${gridRect.height}px`;
+    }
+    _layoutFromShell(width, height) {
+        this._inShellLayout = true;
+        this.layout(width, height, true);
+        this._inShellLayout = false;
+    }
+    forceRelayout() {
+        if (this._shellManager) {
+            this._layoutFromShell(this.width, this.height);
+        }
+        else {
+            super.forceRelayout();
+        }
+    }
+    addEdgeGroup(position, options) {
+        if (this._edgeGroups.has(position)) {
+            throw new Error(`dockview: edge group already exists at position '${position}'`);
+        }
+        const group = this.createGroup({ id: options.id });
+        group.model.location = { type: 'edge', position };
+        group.model.headerPosition = position;
+        this._edgeGroups.set(position, group);
+        this._onDidAddGroup.fire(group);
+        // Collapse when the group becomes empty
+        const autoCollapseDisposable = group.model.onDidRemovePanel(() => {
+            if (group.model.isEmpty) {
+                this._shellManager.setEdgeGroupCollapsed(position, true);
+            }
+        });
+        this._edgeGroupDisposables.set(position, autoCollapseDisposable);
+        this._shellManager.addEdgeView(position, options, group);
+        return group.api;
+    }
+    getEdgeGroup(position) {
+        var _a;
+        return (_a = this._edgeGroups.get(position)) === null || _a === void 0 ? void 0 : _a.api;
+    }
+    setEdgeGroupVisible(position, visible) {
+        this._shellManager.setEdgeGroupVisible(position, visible);
+    }
+    isEdgeGroupVisible(position) {
+        return this._shellManager.isEdgeGroupVisible(position);
+    }
+    removeEdgeGroup(position) {
+        var _a;
+        const group = this._edgeGroups.get(position);
+        if (!group) {
+            throw new Error(`dockview: no edge group exists at position '${position}'`);
+        }
+        // Remove panels inside the group first
+        for (const panel of [...group.panels]) {
+            this.removePanel(panel, {
+                removeEmptyGroup: false,
+                skipDispose: false,
+            });
+        }
+        // Dispose the auto-collapse listener
+        (_a = this._edgeGroupDisposables.get(position)) === null || _a === void 0 ? void 0 : _a.dispose();
+        this._edgeGroupDisposables.delete(position);
+        // Remove from the shell splitview
+        this._shellManager.removeEdgeView(position);
+        // Clean up group state
+        this._edgeGroups.delete(position);
+        group.dispose();
+        this._groups.delete(group.id);
+        this._onDidRemoveGroup.fire(group);
+    }
+    setEdgeGroupCollapsed(group, collapsed) {
+        for (const [position, edgeGroup] of this._edgeGroups) {
+            if (edgeGroup === group) {
+                this._shellManager.setEdgeGroupCollapsed(position, collapsed);
+                edgeGroup.api._onDidCollapsedChange.fire({
+                    isCollapsed: collapsed,
+                });
+                return;
+            }
+        }
+    }
+    isEdgeGroupCollapsed(group) {
+        for (const [position, edgeGroup] of this._edgeGroups) {
+            if (edgeGroup === group) {
+                return this._shellManager.isEdgeGroupCollapsed(position);
+            }
+        }
+        return false;
+    }
     updateDragAndDropState() {
         // Update draggable state for all tabs and void containers
         for (const group of this.groups) {
@@ -871,10 +1069,21 @@ export class DockviewComponent extends BaseGrid {
         if (popoutGroups.length > 0) {
             result.popoutGroups = popoutGroups;
         }
+        if (this._edgeGroups.size > 0) {
+            const shellSerialized = this._shellManager.toJSON();
+            // Augment each entry with the serialized group state
+            for (const [position, group] of this._edgeGroups) {
+                const entry = shellSerialized[position];
+                if (entry) {
+                    entry.group = group.toJSON();
+                }
+            }
+            result.edgeGroups = shellSerialized;
+        }
         return result;
     }
     fromJSON(data, options) {
-        var _a, _b;
+        var _a, _b, _c;
         const existingPanels = new Map();
         let tempGroup;
         if (options === null || options === void 0 ? void 0 : options.reuseExistingPanels) {
@@ -972,6 +1181,11 @@ export class DockviewComponent extends BaseGrid {
                         });
                     }
                 }
+                // Restore tab groups before activating a fallback panel so
+                // that collapsed groups can clear the active panel correctly.
+                if (data.tabGroups && data.tabGroups.length > 0) {
+                    group.model.restoreTabGroups(data.tabGroups);
+                }
                 if (!group.activePanel && group.panels.length > 0) {
                     group.model.openPanel(group.panels[group.panels.length - 1], {
                         skipSetGroupActive: true,
@@ -984,8 +1198,59 @@ export class DockviewComponent extends BaseGrid {
                     return createGroupFromSerializedState(node.data);
                 },
             });
-            this.layout(width, height, true);
-            const serializedFloatingGroups = (_a = data.floatingGroups) !== null && _a !== void 0 ? _a : [];
+            this._layoutFromShell(width, height);
+            if (data.edgeGroups) {
+                // Auto-create edge groups for positions in the serialized state
+                // that don't already have a group registered (e.g. when fromJSON
+                // is called before the user has called addEdgeGroup).
+                for (const _position of [
+                    'top',
+                    'bottom',
+                    'left',
+                    'right',
+                ]) {
+                    const fixedData = data.edgeGroups[_position];
+                    if (fixedData && !this._edgeGroups.has(_position)) {
+                        const groupState = fixedData.group;
+                        const id = (_a = groupState === null || groupState === void 0 ? void 0 : groupState.id) !== null && _a !== void 0 ? _a : `${_position}-group`;
+                        this.addEdgeGroup(_position, { id });
+                    }
+                }
+                // Restore panel contents of edge groups
+                for (const [position, edgeGroup] of this._edgeGroups) {
+                    const edgeData = data.edgeGroups[position];
+                    const groupState = edgeData === null || edgeData === void 0 ? void 0 : edgeData.group;
+                    if (groupState) {
+                        const { views, activeView } = groupState;
+                        const createdPanels = [];
+                        for (const panelId of views) {
+                            if (panels[panelId]) {
+                                const panel = this._deserializer.fromJSON(panels[panelId], edgeGroup);
+                                createdPanels.push(panel);
+                            }
+                        }
+                        for (let i = 0; i < createdPanels.length; i++) {
+                            const panel = createdPanels[i];
+                            const isActive = activeView === panel.id;
+                            edgeGroup.model.openPanel(panel, {
+                                skipSetActive: !isActive,
+                                skipSetGroupActive: true,
+                            });
+                        }
+                        // Restore tab groups before activating a fallback panel
+                        if (groupState.tabGroups &&
+                            groupState.tabGroups.length > 0) {
+                            edgeGroup.model.restoreTabGroups(groupState.tabGroups);
+                        }
+                        if (!edgeGroup.activePanel &&
+                            edgeGroup.panels.length > 0) {
+                            edgeGroup.model.openPanel(edgeGroup.panels[edgeGroup.panels.length - 1], { skipSetGroupActive: true });
+                        }
+                    }
+                }
+                this._shellManager.fromJSON(data.edgeGroups);
+            }
+            const serializedFloatingGroups = (_b = data.floatingGroups) !== null && _b !== void 0 ? _b : [];
             for (const serializedFloatingGroup of serializedFloatingGroups) {
                 const { data, position } = serializedFloatingGroup;
                 const group = createGroupFromSerializedState(data);
@@ -997,7 +1262,7 @@ export class DockviewComponent extends BaseGrid {
                     inDragMode: false,
                 });
             }
-            const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
+            const serializedPopoutGroups = (_c = data.popoutGroups) !== null && _c !== void 0 ? _c : [];
             // Create a promise that resolves when all popout groups are created
             const popoutPromises = [];
             // Queue popup group creation with delays to avoid browser blocking
@@ -1078,6 +1343,14 @@ export class DockviewComponent extends BaseGrid {
         const groups = Array.from(this._groups.values()).map((_) => _.value);
         const hasActiveGroup = !!this.activeGroup;
         for (const group of groups) {
+            if ([...this._edgeGroups.values()].includes(group)) {
+                // Edge groups are structural - only clear their panels, not the group itself
+                const panels = [...group.panels];
+                for (const panel of panels) {
+                    this.removePanel(panel, { removeEmptyGroup: false });
+                }
+                continue;
+            }
             // remove the group will automatically remove the panels
             this.removeGroup(group, { skipActive: true });
         }
@@ -1167,6 +1440,7 @@ export class DockviewComponent extends BaseGrid {
                 });
             }
             else if (referenceGroup.api.location.type === 'floating' ||
+                referenceGroup.api.location.type === 'edge' ||
                 target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
                 referenceGroup.model.openPanel(panel, {
@@ -1340,6 +1614,10 @@ export class DockviewComponent extends BaseGrid {
     }
     doRemoveGroup(group, options) {
         var _a;
+        // Edge groups are permanent structural elements - never remove them from the layout
+        if ([...this._edgeGroups.values()].includes(group)) {
+            return group;
+        }
         const panels = [...group.panels]; // reassign since group panels will mutate
         if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
             for (const panel of panels) {
@@ -1440,17 +1718,33 @@ export class DockviewComponent extends BaseGrid {
             throw new Error(`dockview: Failed to find group id ${sourceGroupId}`);
         }
         if (sourceItemId === undefined) {
-            /**
-             * Moving an entire group into another group
-             */
-            this.moveGroup({
-                from: { group: sourceGroup },
-                to: {
-                    group: destinationGroup,
-                    position: destinationTarget,
-                },
-                skipSetActive: options.skipSetActive,
-            });
+            if (options.from.tabGroupId) {
+                /**
+                 * Moving a tab group (subset of panels) into another group
+                 */
+                this.moveTabGroupToGroup({
+                    sourceGroup,
+                    tabGroupId: options.from.tabGroupId,
+                    destinationGroup,
+                    destinationTarget,
+                    destinationIndex,
+                    skipSetActive: options.skipSetActive,
+                    keepEmptyGroups: options.keepEmptyGroups,
+                });
+            }
+            else {
+                /**
+                 * Moving an entire group into another group
+                 */
+                this.moveGroup({
+                    from: { group: sourceGroup },
+                    to: {
+                        group: destinationGroup,
+                        position: destinationTarget,
+                    },
+                    skipSetActive: options.skipSetActive,
+                });
+            }
             return;
         }
         if (!destinationTarget || destinationTarget === 'center') {
@@ -1540,6 +1834,30 @@ export class DockviewComponent extends BaseGrid {
                     });
                     return;
                 }
+                if (sourceGroup.api.location.type === 'edge') {
+                    /**
+                     * Edge groups are permanent structural elements — never move the
+                     * group itself. Instead extract the panel and create a new grid group,
+                     * leaving the edge slot intact (same behaviour as the size >= 2 path).
+                     */
+                    const removedPanel = this.movingLock(() => sourceGroup.model.removePanel(sourceItemId, {
+                        skipSetActive: false,
+                        skipSetActiveGroup: true,
+                    }));
+                    if (!removedPanel) {
+                        throw new Error(`dockview: No panel with id ${sourceItemId}`);
+                    }
+                    const newGroup = this.createGroupAtLocation(targetLocation);
+                    this.movingLock(() => newGroup.model.openPanel(removedPanel, {
+                        skipSetGroupActive: true,
+                    }));
+                    this.doSetGroupAndPanelActive(newGroup);
+                    this._onDidMovePanel.fire({
+                        panel: removedPanel,
+                        from: sourceGroup,
+                    });
+                    return;
+                }
                 // source group will become empty so delete the group
                 const targetGroup = this.movingLock(() => this.doRemoveGroup(sourceGroup, {
                     skipActive: true,
@@ -1580,6 +1898,73 @@ export class DockviewComponent extends BaseGrid {
             }
         }
     }
+    moveTabGroupToGroup(options) {
+        const { sourceGroup, tabGroupId, destinationGroup, destinationTarget, destinationIndex, } = options;
+        const tabGroup = sourceGroup.model
+            .getTabGroups()
+            .find((tg) => tg.id === tabGroupId);
+        if (!tabGroup || tabGroup.panelIds.length === 0) {
+            return;
+        }
+        // Snapshot tab group metadata before removing panels
+        const label = tabGroup.label;
+        const color = tabGroup.color;
+        const collapsed = tabGroup.collapsed;
+        const panelIds = [...tabGroup.panelIds];
+        // Remove panels from the source group
+        const removedPanels = this.movingLock(() => panelIds
+            .map((pid) => sourceGroup.model.removePanel(pid, {
+            skipSetActive: false,
+            skipSetActiveGroup: true,
+        }))
+            .filter((p) => p !== undefined));
+        if (removedPanels.length === 0) {
+            return;
+        }
+        if (!options.keepEmptyGroups &&
+            sourceGroup.model.size === 0 &&
+            sourceGroup !== destinationGroup) {
+            this.doRemoveGroup(sourceGroup, { skipActive: true });
+        }
+        const addPanelsToGroup = (targetGroup) => {
+            this.movingLock(() => {
+                for (const panel of removedPanels) {
+                    targetGroup.model.openPanel(panel, {
+                        index: destinationIndex,
+                        skipSetActive: true,
+                        skipSetGroupActive: true,
+                    });
+                }
+            });
+            // Recreate the tab group in the destination
+            const newTabGroup = targetGroup.model.createTabGroup({
+                label,
+                color,
+                collapsed,
+            });
+            for (const panel of removedPanels) {
+                targetGroup.model.addPanelToTabGroup(newTabGroup.id, panel.id);
+            }
+            if (!options.skipSetActive) {
+                this.doSetGroupAndPanelActive(targetGroup);
+            }
+            for (const panel of removedPanels) {
+                this._onDidMovePanel.fire({
+                    panel,
+                    from: sourceGroup,
+                });
+            }
+        };
+        if (!destinationTarget || destinationTarget === 'center') {
+            addPanelsToGroup(destinationGroup);
+        }
+        else {
+            const referenceLocation = getGridLocation(destinationGroup.element);
+            const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
+            const newGroup = this.createGroupAtLocation(dropLocation);
+            addPanelsToGroup(newGroup);
+        }
+    }
     moveGroup(options) {
         const from = options.from.group;
         const to = options.to.group;
@@ -1786,9 +2171,13 @@ export class DockviewComponent extends BaseGrid {
             }), view.model.onGroupDragStart((event) => {
                 this._onWillDragGroup.fire(event);
             }), view.model.onMove((event) => {
-                const { groupId, itemId, target, index } = event;
+                const { groupId, itemId, target, index, tabGroupId } = event;
                 this.moveGroupOrPanel({
-                    from: { groupId: groupId, panelId: itemId },
+                    from: {
+                        groupId: groupId,
+                        panelId: itemId,
+                        tabGroupId,
+                    },
                     to: {
                         group: view,
                         position: target,
@@ -1827,6 +2216,18 @@ export class DockviewComponent extends BaseGrid {
                 if (this._onDidActivePanelChange.value !== event.panel) {
                     this._onDidActivePanelChange.fire(event.panel);
                 }
+            }), view.model.onDidCreateTabGroup((e) => {
+                this._onDidCreateTabGroup.fire(e);
+            }), view.model.onDidDestroyTabGroup((e) => {
+                this._onDidDestroyTabGroup.fire(e);
+            }), view.model.onDidAddPanelToTabGroup((e) => {
+                this._onDidAddPanelToTabGroup.fire(e);
+            }), view.model.onDidRemovePanelFromTabGroup((e) => {
+                this._onDidRemovePanelFromTabGroup.fire(e);
+            }), view.model.onDidTabGroupChange((e) => {
+                this._onDidTabGroupChange.fire(e);
+            }), view.model.onDidTabGroupCollapsedChange((e) => {
+                this._onDidTabGroupCollapsedChange.fire(e);
             }), Event.any(view.model.onDidPanelTitleChange, view.model.onDidPanelParametersChange)(() => {
                 this._bufferOnDidLayoutChange.fire();
             }));
@@ -1887,10 +2288,23 @@ export class DockviewComponent extends BaseGrid {
         }
     }
     updateTheme() {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const theme = (_a = this._options.theme) !== null && _a !== void 0 ? _a : themeAbyss;
-        this._themeClassnames.setClassNames(theme.className);
-        this.gridview.margin = (_b = theme.gap) !== null && _b !== void 0 ? _b : 0;
+        // Apply the theme class only to the shell so edge groups and the
+        // main grid both inherit its CSS custom properties via the cascade.
+        // Re-declaring it on `.dv-dockview` would block consumer overrides
+        // set on the shell from reaching the dockview subtree.
+        (_b = this._shellThemeClassnames) === null || _b === void 0 ? void 0 : _b.setClassNames(theme.className);
+        this.gridview.margin = (_c = theme.gap) !== null && _c !== void 0 ? _c : 0;
+        (_d = this._shellManager) === null || _d === void 0 ? void 0 : _d.updateTheme((_e = theme.gap) !== null && _e !== void 0 ? _e : 0, (_f = theme.edgeGroupCollapsedSize) !== null && _f !== void 0 ? _f : 35);
+        if (theme.dndOverlayBorder !== undefined) {
+            this.element.style.setProperty('--dv-drag-over-border', theme.dndOverlayBorder);
+            (_g = this._shellManager) === null || _g === void 0 ? void 0 : _g.element.style.setProperty('--dv-drag-over-border', theme.dndOverlayBorder);
+        }
+        else {
+            this.element.style.removeProperty('--dv-drag-over-border');
+            (_h = this._shellManager) === null || _h === void 0 ? void 0 : _h.element.style.removeProperty('--dv-drag-over-border');
+        }
         switch (theme.dndOverlayMounting) {
             case 'absolute':
                 this.rootDropTargetContainer.disabled = false;
@@ -1900,5 +2314,16 @@ export class DockviewComponent extends BaseGrid {
                 this.rootDropTargetContainer.disabled = true;
                 break;
         }
+        // Toggle a CSS class so theme stylesheets can scope pure-CSS
+        // tab group indicator rules to the 'none' mode only.
+        const indicatorNone = ((_j = theme.tabGroupIndicator) !== null && _j !== void 0 ? _j : 'wrap') === 'none';
+        toggleClass(this.element, 'dv-tab-group-indicator-none', indicatorNone);
+        if (this._shellManager) {
+            toggleClass(this._shellManager.element, 'dv-tab-group-indicator-none', indicatorNone);
+        }
+        // Re-render tab group indicators so the new tabGroupIndicator mode takes effect
+        for (const group of this.groups) {
+            group.model.updateTabGroups();
+        }
     }
 }