dockview-core 5.2.0 → 6.0.0

package/dist/cjs/dockview/dockviewComponent.js

@@ -89,12 +89,21 @@ var overlayRenderContainer_1 = require("../overlay/overlayRenderContainer");
 var popoutWindow_1 = require("../popoutWindow");
 var strictEventsSequencing_1 = require("./strictEventsSequencing");
 var popupService_1 = require("./components/popupService");
+var contextMenu_1 = require("./contextMenu");
 var dropTargetAnchorContainer_1 = require("../dnd/dropTargetAnchorContainer");
 var theme_1 = require("./theme");
+var dockviewShell_1 = require("./dockviewShell");
+var tabGroupAccent_1 = require("./tabGroupAccent");
 var DEFAULT_ROOT_OVERLAY_MODEL = {
     activationSize: { type: 'pixels', value: 10 },
     size: { type: 'pixels', value: 20 },
 };
+function buildTabGroupColorPalette(options) {
+    var _a;
+    var entries = (_a = options.tabGroupColors) !== null && _a !== void 0 ? _a : tabGroupAccent_1.DEFAULT_TAB_GROUP_COLORS;
+    var enabled = options.tabGroupAccent !== 'off';
+    return new tabGroupAccent_1.TabGroupColorPalette(entries, enabled);
+}
 function moveGroupWithoutDestroying(options) {
     var activePanel = options.from.activePanel;
     var panels = __spreadArray([], __read(options.from.panels), false).map(function (panel) {
@@ -112,7 +121,7 @@ function moveGroupWithoutDestroying(options) {
 var DockviewComponent = /** @class */ (function (_super) {
     __extends(DockviewComponent, _super);
     function DockviewComponent(container, options) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         var _this = _super.call(this, container, {
             proportionalLayout: true,
             orientation: splitview_1.Orientation.HORIZONTAL,
@@ -127,6 +136,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this.nextGroupId = (0, math_1.sequentialNumberGenerator)();
         _this._deserializer = new deserializer_1.DefaultDockviewDeserialzier(_this);
         _this._watermark = null;
+        _this._popoutPopupServices = new Map();
         _this._onWillDragPanel = new events_1.Emitter();
         _this.onWillDragPanel = _this._onWillDragPanel.event;
         _this._onWillDragGroup = new events_1.Emitter();
@@ -155,8 +165,23 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this.onDidActivePanelChange = _this._onDidActivePanelChange.event;
         _this._onDidMovePanel = new events_1.Emitter();
         _this.onDidMovePanel = _this._onDidMovePanel.event;
+        _this._onDidCreateTabGroup = new events_1.Emitter();
+        _this.onDidCreateTabGroup = _this._onDidCreateTabGroup.event;
+        _this._onDidDestroyTabGroup = new events_1.Emitter();
+        _this.onDidDestroyTabGroup = _this._onDidDestroyTabGroup.event;
+        _this._onDidAddPanelToTabGroup = new events_1.Emitter();
+        _this.onDidAddPanelToTabGroup = _this._onDidAddPanelToTabGroup.event;
+        _this._onDidRemovePanelFromTabGroup = new events_1.Emitter();
+        _this.onDidRemovePanelFromTabGroup = _this._onDidRemovePanelFromTabGroup.event;
+        _this._onDidTabGroupChange = new events_1.Emitter();
+        _this.onDidTabGroupChange = _this._onDidTabGroupChange.event;
+        _this._onDidTabGroupCollapsedChange = new events_1.Emitter();
+        _this.onDidTabGroupCollapsedChange = _this._onDidTabGroupCollapsedChange.event;
         _this._onDidMaximizedGroupChange = new events_1.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();
@@ -170,11 +195,30 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this.onDidActiveGroupChange = _this._onDidActiveGroupChange.event;
         _this._moving = false;
         _this._options = options;
+        _this._tabGroupColorPalette = buildTabGroupColorPalette(options);
         _this.popupService = new popupService_1.PopupService(_this.element);
-        _this._themeClassnames = new dom_1.Classnames(_this.element);
+        _this.contextMenuController = new contextMenu_1.ContextMenuController(_this);
         _this._api = new component_api_1.DockviewApi(_this);
-        _this.rootDropTargetContainer = new dropTargetAnchorContainer_1.DropTargetAnchorContainer(_this.element, { disabled: true });
-        _this.overlayRenderContainer = new overlayRenderContainer_1.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 dockviewShell_1.ShellManager(container, _this.element, function (w, h) { return _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 dom_1.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_1.DropTargetAnchorContainer(_this._shellManager.element, { disabled: true });
+        _this.overlayRenderContainer = new overlayRenderContainer_1.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_1.Droptarget(_this.element, {
             className: 'dv-drop-target-edge',
             canDisplayOverlay: function (event, position) {
@@ -203,7 +247,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 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: function () { var _a; return (_a = _this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
         _this.updateDropTargetModel(options);
@@ -221,7 +265,7 @@ var DockviewComponent = /** @class */ (function (_super) {
              * 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(function () {
+        }), _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(function () {
             _this.updateWatermark();
         }), _this.onDidAdd(function (event) {
             if (!_this._moving) {
@@ -242,38 +286,54 @@ var DockviewComponent = /** @class */ (function (_super) {
             });
         }), events_1.Event.any(_this.onDidAdd, _this.onDidRemove)(function () {
             _this.updateWatermark();
-        }), events_1.Event.any(_this.onDidAddPanel, _this.onDidRemovePanel, _this.onDidAddGroup, _this.onDidRemove, _this.onDidMovePanel, _this.onDidActivePanelChange, _this.onDidPopoutGroupPositionChange, _this.onDidPopoutGroupSizeChange)(function () {
+        }), events_1.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)(function () {
             _this._bufferOnDidLayoutChange.fire();
         }), lifecycle_1.Disposable.from(function () {
-            var e_1, _a, e_2, _b;
+            var e_1, _a, e_2, _b, e_3, _c;
+            var _d;
             try {
                 // iterate over a copy of the array since .dispose() mutates the original array
-                for (var _c = __values(__spreadArray([], __read(_this._floatingGroups), false)), _d = _c.next(); !_d.done; _d = _c.next()) {
-                    var group = _d.value;
+                for (var _e = __values(__spreadArray([], __read(_this._floatingGroups), false)), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var group = _f.value;
                     group.dispose();
                 }
             }
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
             finally {
                 try {
-                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                    if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
                 }
                 finally { if (e_1) throw e_1.error; }
             }
             try {
                 // iterate over a copy of the array since .dispose() mutates the original array
-                for (var _e = __values(__spreadArray([], __read(_this._popoutGroups), false)), _f = _e.next(); !_f.done; _f = _e.next()) {
-                    var group = _f.value;
+                for (var _g = __values(__spreadArray([], __read(_this._popoutGroups), false)), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var group = _h.value;
                     group.disposable.dispose();
                 }
             }
             catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
                 try {
-                    if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                    if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
                 }
                 finally { if (e_2) throw e_2.error; }
             }
+            (_d = _this._shellManager) === null || _d === void 0 ? void 0 : _d.dispose();
+            try {
+                for (var _j = __values(_this._edgeGroupDisposables.values()), _k = _j.next(); !_k.done; _k = _j.next()) {
+                    var d = _k.value;
+                    d.dispose();
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_k && !_k.done && (_c = _j.return)) _c.call(_j);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+            _this._edgeGroupDisposables.clear();
         }), _this._rootDropTarget, _this._rootDropTarget.onWillShowOverlay(function (event) {
             if (_this.gridview.length > 0 && event.position === 'center') {
                 // option only available when no panels in primary grid
@@ -355,6 +415,13 @@ var DockviewComponent = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DockviewComponent.prototype, "tabGroupColorPalette", {
+        get: function () {
+            return this._tabGroupColorPalette;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DockviewComponent.prototype, "activePanel", {
         get: function () {
             var activeGroup = this.activeGroup;
@@ -425,11 +492,29 @@ var DockviewComponent = /** @class */ (function (_super) {
             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.
+     */
+    DockviewComponent.prototype.getPopupServiceForGroup = function (group) {
+        var _a;
+        return (_a = this._popoutPopupServices.get(group.id)) !== null && _a !== void 0 ? _a : this.popupService;
+    };
     DockviewComponent.prototype.addPopoutGroup = function (itemToPopout, options) {
         var _this = this;
         var _a, _b, _c, _d, _e;
+        if (itemToPopout instanceof dockviewGroupPanel_1.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_1.DockviewPanel &&
             itemToPopout.group.size === 1) {
             return this.addPopoutGroup(itemToPopout.group, options);
@@ -555,6 +640,16 @@ var DockviewComponent = /** @class */ (function (_super) {
             var dropTargetContainer = new dropTargetAnchorContainer_1.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.
+            var popoutPopupService = new popupService_1.PopupService(popoutContainer, _window.window);
+            _this._popoutPopupServices.set(group.id, popoutPopupService);
+            popoutWindowDisposable.addDisposables(popoutPopupService, lifecycle_1.Disposable.from(function () {
+                _this._popoutPopupServices.delete(group.id);
+            }));
             group.model.location = {
                 type: 'popout',
                 getWindow: function () { return _window.window; },
@@ -682,7 +777,12 @@ var DockviewComponent = /** @class */ (function (_super) {
     };
     DockviewComponent.prototype.addFloatingGroup = function (item, options) {
         var _this = this;
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
+        if (item instanceof dockviewGroupPanel_1.DockviewGroupPanel &&
+            item.model.location.type === 'edge') {
+            // edge groups are permanent structural elements and cannot be floated
+            return;
+        }
         var group;
         if (item instanceof dockviewPanel_1.DockviewPanel) {
             group = this.createGroup();
@@ -783,11 +883,11 @@ var DockviewComponent = /** @class */ (function (_super) {
             };
         }
         var anchoredBox = getAnchoredBox();
-        var overlay = new overlay_1.Overlay(__assign(__assign({ container: this.gridview.element, content: group.element }, anchoredBox), { minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
+        var overlay = new overlay_1.Overlay(__assign(__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 : constants_1.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 : constants_1.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 : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE) }));
+                : ((_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE) }));
         var el = group.element.querySelector('.dv-void-container');
         if (!el) {
             throw new Error('dockview: failed to find drag handle');
@@ -868,13 +968,13 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
     };
     DockviewComponent.prototype.updateOptions = function (options) {
-        var e_3, _a, e_4, _b;
-        var _c, _d;
+        var e_4, _a, e_5, _b, e_6, _c;
+        var _d, _e, _f;
         _super.prototype.updateOptions.call(this, options);
         if ('floatingGroupBounds' in options) {
             try {
-                for (var _e = __values(this._floatingGroups), _f = _e.next(); !_f.done; _f = _e.next()) {
-                    var group = _f.value;
+                for (var _g = __values(this._floatingGroups), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var group = _h.value;
                     switch (options.floatingGroupBounds) {
                         case 'boundedWithinViewport':
                             group.overlay.minimumInViewportHeight = undefined;
@@ -888,19 +988,19 @@ var DockviewComponent = /** @class */ (function (_super) {
                             break;
                         default:
                             group.overlay.minimumInViewportHeight =
-                                (_c = options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumHeightWithinViewport;
+                                (_d = options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport;
                             group.overlay.minimumInViewportWidth =
-                                (_d = options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumWidthWithinViewport;
+                                (_e = options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumWidthWithinViewport;
                     }
                     group.overlay.setBounds();
                 }
             }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
             finally {
                 try {
-                    if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
+                    if (_h && !_h.done && (_a = _g.return)) _a.call(_g);
                 }
-                finally { if (e_3) throw e_3.error; }
+                finally { if (e_4) throw e_4.error; }
             }
         }
         this.updateDropTargetModel(options);
@@ -917,24 +1017,49 @@ var DockviewComponent = /** @class */ (function (_super) {
             'createLeftHeaderActionComponent' in options ||
             'createPrefixHeaderActionComponent' in options) {
             try {
-                for (var _g = __values(this.groups), _h = _g.next(); !_h.done; _h = _g.next()) {
-                    var group = _h.value;
+                for (var _j = __values(this.groups), _k = _j.next(); !_k.done; _k = _j.next()) {
+                    var group = _k.value;
                     group.model.updateHeaderActions();
                 }
             }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
             finally {
                 try {
-                    if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
+                    if (_k && !_k.done && (_b = _j.return)) _b.call(_j);
+                }
+                finally { if (e_5) throw e_5.error; }
+            }
+        }
+        if ('tabGroupColors' in options || 'tabGroupAccent' in options) {
+            this._tabGroupColorPalette.setEntries((_f = this._options.tabGroupColors) !== null && _f !== void 0 ? _f : tabGroupAccent_1.DEFAULT_TAB_GROUP_COLORS);
+            this._tabGroupColorPalette.enabled =
+                this._options.tabGroupAccent !== 'off';
+            try {
+                for (var _l = __values(this.groups), _m = _l.next(); !_m.done; _m = _l.next()) {
+                    var group = _m.value;
+                    group.model.refreshTabGroupAccent();
                 }
-                finally { if (e_4) throw e_4.error; }
+            }
+            catch (e_6_1) { e_6 = { error: e_6_1 }; }
+            finally {
+                try {
+                    if (_m && !_m.done && (_c = _l.return)) _c.call(_l);
+                }
+                finally { if (e_6) throw e_6.error; }
             }
         }
-        this.layout(this.gridview.width, this.gridview.height, true);
+        this._onDidOptionsChange.fire();
+        this._layoutFromShell(this.gridview.width, this.gridview.height);
     };
     DockviewComponent.prototype.layout = function (width, height, forceResize) {
-        var e_5, _a;
-        _super.prototype.layout.call(this, width, height, forceResize);
+        var e_7, _a;
+        if (this._shellManager && !this._inShellLayout) {
+            this._shellManager.layout(width, height);
+        }
+        else {
+            _super.prototype.layout.call(this, width, height, forceResize);
+        }
+        this._syncFloatingOverlayHost();
         if (this._floatingGroups) {
             try {
                 for (var _b = __values(this._floatingGroups), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -943,17 +1068,148 @@ var DockviewComponent = /** @class */ (function (_super) {
                     floating.overlay.setBounds();
                 }
             }
-            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            catch (e_7_1) { e_7 = { error: e_7_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_5) throw e_5.error; }
+                finally { if (e_7) throw e_7.error; }
             }
         }
     };
+    DockviewComponent.prototype._syncFloatingOverlayHost = function () {
+        if (!this._floatingOverlayHost || !this._shellManager) {
+            return;
+        }
+        var shellRect = this._shellManager.element.getBoundingClientRect();
+        var gridRect = this.element.getBoundingClientRect();
+        var host = this._floatingOverlayHost;
+        host.style.left = "".concat(gridRect.left - shellRect.left, "px");
+        host.style.top = "".concat(gridRect.top - shellRect.top, "px");
+        host.style.width = "".concat(gridRect.width, "px");
+        host.style.height = "".concat(gridRect.height, "px");
+    };
+    DockviewComponent.prototype._layoutFromShell = function (width, height) {
+        this._inShellLayout = true;
+        this.layout(width, height, true);
+        this._inShellLayout = false;
+    };
+    DockviewComponent.prototype.forceRelayout = function () {
+        if (this._shellManager) {
+            this._layoutFromShell(this.width, this.height);
+        }
+        else {
+            _super.prototype.forceRelayout.call(this);
+        }
+    };
+    DockviewComponent.prototype.addEdgeGroup = function (position, options) {
+        var _this = this;
+        if (this._edgeGroups.has(position)) {
+            throw new Error("dockview: edge group already exists at position '".concat(position, "'"));
+        }
+        var group = this.createGroup({ id: options.id });
+        group.model.location = { type: 'edge', position: position };
+        group.model.headerPosition = position;
+        this._edgeGroups.set(position, group);
+        this._onDidAddGroup.fire(group);
+        // Collapse when the group becomes empty
+        var autoCollapseDisposable = group.model.onDidRemovePanel(function () {
+            if (group.model.isEmpty) {
+                _this._shellManager.setEdgeGroupCollapsed(position, true);
+            }
+        });
+        this._edgeGroupDisposables.set(position, autoCollapseDisposable);
+        this._shellManager.addEdgeView(position, options, group);
+        return group.api;
+    };
+    DockviewComponent.prototype.getEdgeGroup = function (position) {
+        var _a;
+        return (_a = this._edgeGroups.get(position)) === null || _a === void 0 ? void 0 : _a.api;
+    };
+    DockviewComponent.prototype.setEdgeGroupVisible = function (position, visible) {
+        this._shellManager.setEdgeGroupVisible(position, visible);
+    };
+    DockviewComponent.prototype.isEdgeGroupVisible = function (position) {
+        return this._shellManager.isEdgeGroupVisible(position);
+    };
+    DockviewComponent.prototype.removeEdgeGroup = function (position) {
+        var e_8, _a;
+        var _b;
+        var group = this._edgeGroups.get(position);
+        if (!group) {
+            throw new Error("dockview: no edge group exists at position '".concat(position, "'"));
+        }
+        try {
+            // Remove panels inside the group first
+            for (var _c = __values(__spreadArray([], __read(group.panels), false)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var panel = _d.value;
+                this.removePanel(panel, {
+                    removeEmptyGroup: false,
+                    skipDispose: false,
+                });
+            }
+        }
+        catch (e_8_1) { e_8 = { error: e_8_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            }
+            finally { if (e_8) throw e_8.error; }
+        }
+        // Dispose the auto-collapse listener
+        (_b = this._edgeGroupDisposables.get(position)) === null || _b === void 0 ? void 0 : _b.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);
+    };
+    DockviewComponent.prototype.setEdgeGroupCollapsed = function (group, collapsed) {
+        var e_9, _a;
+        try {
+            for (var _b = __values(this._edgeGroups), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var _d = __read(_c.value, 2), position = _d[0], edgeGroup = _d[1];
+                if (edgeGroup === group) {
+                    this._shellManager.setEdgeGroupCollapsed(position, collapsed);
+                    edgeGroup.api._onDidCollapsedChange.fire({
+                        isCollapsed: collapsed,
+                    });
+                    return;
+                }
+            }
+        }
+        catch (e_9_1) { e_9 = { error: e_9_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_9) throw e_9.error; }
+        }
+    };
+    DockviewComponent.prototype.isEdgeGroupCollapsed = function (group) {
+        var e_10, _a;
+        try {
+            for (var _b = __values(this._edgeGroups), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var _d = __read(_c.value, 2), position = _d[0], edgeGroup = _d[1];
+                if (edgeGroup === group) {
+                    return this._shellManager.isEdgeGroupCollapsed(position);
+                }
+            }
+        }
+        catch (e_10_1) { e_10 = { error: e_10_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_10) throw e_10.error; }
+        }
+        return false;
+    };
     DockviewComponent.prototype.updateDragAndDropState = function () {
-        var e_6, _a;
+        var e_11, _a;
         try {
             // Update draggable state for all tabs and void containers
             for (var _b = __values(this.groups), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -961,12 +1217,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.model.updateDragAndDropState();
             }
         }
-        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        catch (e_11_1) { e_11 = { error: e_11_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_6) throw e_6.error; }
+            finally { if (e_11) throw e_11.error; }
         }
     };
     DockviewComponent.prototype.focus = function () {
@@ -1027,7 +1283,8 @@ var DockviewComponent = /** @class */ (function (_super) {
      * @returns A JSON respresentation of the layout
      */
     DockviewComponent.prototype.toJSON = function () {
-        var _a;
+        var e_12, _a;
+        var _b;
         var data = this.gridview.serialize();
         var panels = this.panels.reduce(function (collection, panel) {
             collection[panel.id] = panel.toJSON();
@@ -1052,7 +1309,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         var result = {
             grid: data,
             panels: panels,
-            activeGroup: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
+            activeGroup: (_b = this.activeGroup) === null || _b === void 0 ? void 0 : _b.id,
         };
         if (floats.length > 0) {
             result.floatingGroups = floats;
@@ -1060,12 +1317,33 @@ var DockviewComponent = /** @class */ (function (_super) {
         if (popoutGroups.length > 0) {
             result.popoutGroups = popoutGroups;
         }
+        if (this._edgeGroups.size > 0) {
+            var shellSerialized = this._shellManager.toJSON();
+            try {
+                // Augment each entry with the serialized group state
+                for (var _c = __values(this._edgeGroups), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var _e = __read(_d.value, 2), position = _e[0], group = _e[1];
+                    var entry = shellSerialized[position];
+                    if (entry) {
+                        entry.group = group.toJSON();
+                    }
+                }
+            }
+            catch (e_12_1) { e_12 = { error: e_12_1 }; }
+            finally {
+                try {
+                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                }
+                finally { if (e_12) throw e_12.error; }
+            }
+            result.edgeGroups = shellSerialized;
+        }
         return result;
     };
     DockviewComponent.prototype.fromJSON = function (data, options) {
-        var e_7, _a, e_8, _b, e_9, _c, e_10, _d, e_11, _e, e_12, _f, e_13, _g;
+        var e_13, _a, e_14, _b, e_15, _c, e_16, _d, e_17, _e, e_18, _f, e_19, _g, e_20, _h, e_21, _j, e_22, _k;
         var _this = this;
-        var _h, _j;
+        var _l, _m, _o;
         var existingPanels = new Map();
         var tempGroup;
         if (options === null || options === void 0 ? void 0 : options.reuseExistingPanels) {
@@ -1079,19 +1357,19 @@ var DockviewComponent = /** @class */ (function (_super) {
             this._groups.delete(tempGroup.api.id);
             var newPanels = Object.keys(data.panels);
             try {
-                for (var _k = __values(this.panels), _l = _k.next(); !_l.done; _l = _k.next()) {
-                    var panel = _l.value;
+                for (var _p = __values(this.panels), _q = _p.next(); !_q.done; _q = _p.next()) {
+                    var panel = _q.value;
                     if (newPanels.includes(panel.api.id)) {
                         existingPanels.set(panel.api.id, panel);
                     }
                 }
             }
-            catch (e_7_1) { e_7 = { error: e_7_1 }; }
+            catch (e_13_1) { e_13 = { error: e_13_1 }; }
             finally {
                 try {
-                    if (_l && !_l.done && (_a = _k.return)) _a.call(_k);
+                    if (_q && !_q.done && (_a = _p.return)) _a.call(_p);
                 }
-                finally { if (e_7) throw e_7.error; }
+                finally { if (e_13) throw e_13.error; }
             }
             this.movingLock(function () {
                 Array.from(existingPanels.values()).forEach(function (panel) {
@@ -1122,7 +1400,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             var width = this.width;
             var height = this.height;
             var createGroupFromSerializedState_1 = function (data) {
-                var e_14, _a;
+                var e_23, _a;
                 var id = data.id, locked = data.locked, hideHeader = data.hideHeader, headerPosition = data.headerPosition, views = data.views, activeView = data.activeView;
                 if (typeof id !== 'string') {
                     throw new Error('dockview: group id must be of type string');
@@ -1155,17 +1433,17 @@ var DockviewComponent = /** @class */ (function (_super) {
                     }
                 };
                 try {
-                    for (var views_1 = __values(views), views_1_1 = views_1.next(); !views_1_1.done; views_1_1 = views_1.next()) {
-                        var child = views_1_1.value;
+                    for (var views_2 = __values(views), views_2_1 = views_2.next(); !views_2_1.done; views_2_1 = views_2.next()) {
+                        var child = views_2_1.value;
                         _loop_1(child);
                     }
                 }
-                catch (e_14_1) { e_14 = { error: e_14_1 }; }
+                catch (e_23_1) { e_23 = { error: e_23_1 }; }
                 finally {
                     try {
-                        if (views_1_1 && !views_1_1.done && (_a = views_1.return)) _a.call(views_1);
+                        if (views_2_1 && !views_2_1.done && (_a = views_2.return)) _a.call(views_2);
                     }
-                    finally { if (e_14) throw e_14.error; }
+                    finally { if (e_23) throw e_23.error; }
                 }
                 var _loop_2 = function (i) {
                     var panel = createdPanels[i];
@@ -1190,6 +1468,11 @@ var DockviewComponent = /** @class */ (function (_super) {
                 for (var i = 0; i < views.length; i++) {
                     _loop_2(i);
                 }
+                // 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,
@@ -1202,8 +1485,89 @@ var DockviewComponent = /** @class */ (function (_super) {
                     return createGroupFromSerializedState_1(node.data);
                 },
             });
-            this.layout(width, height, true);
-            var serializedFloatingGroups = (_h = data.floatingGroups) !== null && _h !== void 0 ? _h : [];
+            this._layoutFromShell(width, height);
+            if (data.edgeGroups) {
+                try {
+                    // 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 (var _r = __values([
+                        'top',
+                        'bottom',
+                        'left',
+                        'right',
+                    ]), _s = _r.next(); !_s.done; _s = _r.next()) {
+                        var _position = _s.value;
+                        var fixedData = data.edgeGroups[_position];
+                        if (fixedData && !this._edgeGroups.has(_position)) {
+                            var groupState = fixedData.group;
+                            var id = (_l = groupState === null || groupState === void 0 ? void 0 : groupState.id) !== null && _l !== void 0 ? _l : "".concat(_position, "-group");
+                            this.addEdgeGroup(_position, { id: id });
+                        }
+                    }
+                }
+                catch (e_14_1) { e_14 = { error: e_14_1 }; }
+                finally {
+                    try {
+                        if (_s && !_s.done && (_b = _r.return)) _b.call(_r);
+                    }
+                    finally { if (e_14) throw e_14.error; }
+                }
+                try {
+                    // Restore panel contents of edge groups
+                    for (var _t = __values(this._edgeGroups), _u = _t.next(); !_u.done; _u = _t.next()) {
+                        var _v = __read(_u.value, 2), position = _v[0], edgeGroup = _v[1];
+                        var edgeData = data.edgeGroups[position];
+                        var groupState = edgeData === null || edgeData === void 0 ? void 0 : edgeData.group;
+                        if (groupState) {
+                            var views = groupState.views, activeView = groupState.activeView;
+                            var createdPanels = [];
+                            try {
+                                for (var views_1 = (e_16 = void 0, __values(views)), views_1_1 = views_1.next(); !views_1_1.done; views_1_1 = views_1.next()) {
+                                    var panelId = views_1_1.value;
+                                    if (panels[panelId]) {
+                                        var panel = this._deserializer.fromJSON(panels[panelId], edgeGroup);
+                                        createdPanels.push(panel);
+                                    }
+                                }
+                            }
+                            catch (e_16_1) { e_16 = { error: e_16_1 }; }
+                            finally {
+                                try {
+                                    if (views_1_1 && !views_1_1.done && (_d = views_1.return)) _d.call(views_1);
+                                }
+                                finally { if (e_16) throw e_16.error; }
+                            }
+                            for (var i = 0; i < createdPanels.length; i++) {
+                                var panel = createdPanels[i];
+                                var 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 });
+                            }
+                        }
+                    }
+                }
+                catch (e_15_1) { e_15 = { error: e_15_1 }; }
+                finally {
+                    try {
+                        if (_u && !_u.done && (_c = _t.return)) _c.call(_t);
+                    }
+                    finally { if (e_15) throw e_15.error; }
+                }
+                this._shellManager.fromJSON(data.edgeGroups);
+            }
+            var serializedFloatingGroups = (_m = data.floatingGroups) !== null && _m !== void 0 ? _m : [];
             try {
                 for (var serializedFloatingGroups_1 = __values(serializedFloatingGroups), serializedFloatingGroups_1_1 = serializedFloatingGroups_1.next(); !serializedFloatingGroups_1_1.done; serializedFloatingGroups_1_1 = serializedFloatingGroups_1.next()) {
                     var serializedFloatingGroup = serializedFloatingGroups_1_1.value;
@@ -1218,14 +1582,14 @@ var DockviewComponent = /** @class */ (function (_super) {
                     });
                 }
             }
-            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+            catch (e_17_1) { e_17 = { error: e_17_1 }; }
             finally {
                 try {
-                    if (serializedFloatingGroups_1_1 && !serializedFloatingGroups_1_1.done && (_b = serializedFloatingGroups_1.return)) _b.call(serializedFloatingGroups_1);
+                    if (serializedFloatingGroups_1_1 && !serializedFloatingGroups_1_1.done && (_e = serializedFloatingGroups_1.return)) _e.call(serializedFloatingGroups_1);
                 }
-                finally { if (e_8) throw e_8.error; }
+                finally { if (e_17) throw e_17.error; }
             }
-            var serializedPopoutGroups = (_j = data.popoutGroups) !== null && _j !== void 0 ? _j : [];
+            var serializedPopoutGroups = (_o = data.popoutGroups) !== null && _o !== void 0 ? _o : [];
             // Create a promise that resolves when all popout groups are created
             var popoutPromises_1 = [];
             // Queue popup group creation with delays to avoid browser blocking
@@ -1253,17 +1617,17 @@ var DockviewComponent = /** @class */ (function (_super) {
             // Store the promise for tests to wait on
             this._popoutRestorationPromise = Promise.all(popoutPromises_1).then(function () { return void 0; });
             try {
-                for (var _m = __values(this._floatingGroups), _o = _m.next(); !_o.done; _o = _m.next()) {
-                    var floatingGroup = _o.value;
+                for (var _w = __values(this._floatingGroups), _x = _w.next(); !_x.done; _x = _w.next()) {
+                    var floatingGroup = _x.value;
                     floatingGroup.overlay.setBounds();
                 }
             }
-            catch (e_9_1) { e_9 = { error: e_9_1 }; }
+            catch (e_18_1) { e_18 = { error: e_18_1 }; }
             finally {
                 try {
-                    if (_o && !_o.done && (_c = _m.return)) _c.call(_m);
+                    if (_x && !_x.done && (_f = _w.return)) _f.call(_w);
                 }
-                finally { if (e_9) throw e_9.error; }
+                finally { if (e_18) throw e_18.error; }
             }
             if (typeof activeGroup === 'string') {
                 var panel = this.getPanel(activeGroup);
@@ -1278,65 +1642,65 @@ var DockviewComponent = /** @class */ (function (_super) {
                 /**
                  * Takes all the successfully created groups and remove all of their panels.
                  */
-                for (var _p = __values(this.groups), _q = _p.next(); !_q.done; _q = _p.next()) {
-                    var group = _q.value;
+                for (var _y = __values(this.groups), _z = _y.next(); !_z.done; _z = _y.next()) {
+                    var group = _z.value;
                     try {
-                        for (var _r = (e_11 = void 0, __values(group.panels)), _s = _r.next(); !_s.done; _s = _r.next()) {
-                            var panel = _s.value;
+                        for (var _0 = (e_20 = void 0, __values(group.panels)), _1 = _0.next(); !_1.done; _1 = _0.next()) {
+                            var panel = _1.value;
                             this.removePanel(panel, {
                                 removeEmptyGroup: false,
                                 skipDispose: false,
                             });
                         }
                     }
-                    catch (e_11_1) { e_11 = { error: e_11_1 }; }
+                    catch (e_20_1) { e_20 = { error: e_20_1 }; }
                     finally {
                         try {
-                            if (_s && !_s.done && (_e = _r.return)) _e.call(_r);
+                            if (_1 && !_1.done && (_h = _0.return)) _h.call(_0);
                         }
-                        finally { if (e_11) throw e_11.error; }
+                        finally { if (e_20) throw e_20.error; }
                     }
                 }
             }
-            catch (e_10_1) { e_10 = { error: e_10_1 }; }
+            catch (e_19_1) { e_19 = { error: e_19_1 }; }
             finally {
                 try {
-                    if (_q && !_q.done && (_d = _p.return)) _d.call(_p);
+                    if (_z && !_z.done && (_g = _y.return)) _g.call(_y);
                 }
-                finally { if (e_10) throw e_10.error; }
+                finally { if (e_19) throw e_19.error; }
             }
             try {
                 /**
                  * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
                  * the underlying HTMLElement existing in the Gridview.
                  */
-                for (var _t = __values(this.groups), _u = _t.next(); !_u.done; _u = _t.next()) {
-                    var group = _u.value;
+                for (var _2 = __values(this.groups), _3 = _2.next(); !_3.done; _3 = _2.next()) {
+                    var group = _3.value;
                     group.dispose();
                     this._groups.delete(group.id);
                     this._onDidRemoveGroup.fire(group);
                 }
             }
-            catch (e_12_1) { e_12 = { error: e_12_1 }; }
+            catch (e_21_1) { e_21 = { error: e_21_1 }; }
             finally {
                 try {
-                    if (_u && !_u.done && (_f = _t.return)) _f.call(_t);
+                    if (_3 && !_3.done && (_j = _2.return)) _j.call(_2);
                 }
-                finally { if (e_12) throw e_12.error; }
+                finally { if (e_21) throw e_21.error; }
             }
             try {
                 // iterate over a reassigned array since original array will be modified
-                for (var _v = __values(__spreadArray([], __read(this._floatingGroups), false)), _w = _v.next(); !_w.done; _w = _v.next()) {
-                    var floatingGroup = _w.value;
+                for (var _4 = __values(__spreadArray([], __read(this._floatingGroups), false)), _5 = _4.next(); !_5.done; _5 = _4.next()) {
+                    var floatingGroup = _5.value;
                     floatingGroup.dispose();
                 }
             }
-            catch (e_13_1) { e_13 = { error: e_13_1 }; }
+            catch (e_22_1) { e_22 = { error: e_22_1 }; }
             finally {
                 try {
-                    if (_w && !_w.done && (_g = _v.return)) _g.call(_v);
+                    if (_5 && !_5.done && (_k = _4.return)) _k.call(_4);
                 }
-                finally { if (e_13) throw e_13.error; }
+                finally { if (e_22) throw e_22.error; }
             }
             // fires clean-up events and clears the underlying HTML gridview.
             this.clear();
@@ -1353,22 +1717,40 @@ var DockviewComponent = /** @class */ (function (_super) {
         this._onDidLayoutFromJSON.fire();
     };
     DockviewComponent.prototype.clear = function () {
-        var e_15, _a;
+        var e_24, _a, e_25, _b;
         var groups = Array.from(this._groups.values()).map(function (_) { return _.value; });
         var hasActiveGroup = !!this.activeGroup;
         try {
             for (var groups_1 = __values(groups), groups_1_1 = groups_1.next(); !groups_1_1.done; groups_1_1 = groups_1.next()) {
                 var group = groups_1_1.value;
+                if (__spreadArray([], __read(this._edgeGroups.values()), false).includes(group)) {
+                    // Edge groups are structural - only clear their panels, not the group itself
+                    var panels = __spreadArray([], __read(group.panels), false);
+                    try {
+                        for (var panels_1 = (e_25 = void 0, __values(panels)), panels_1_1 = panels_1.next(); !panels_1_1.done; panels_1_1 = panels_1.next()) {
+                            var panel = panels_1_1.value;
+                            this.removePanel(panel, { removeEmptyGroup: false });
+                        }
+                    }
+                    catch (e_25_1) { e_25 = { error: e_25_1 }; }
+                    finally {
+                        try {
+                            if (panels_1_1 && !panels_1_1.done && (_b = panels_1.return)) _b.call(panels_1);
+                        }
+                        finally { if (e_25) throw e_25.error; }
+                    }
+                    continue;
+                }
                 // remove the group will automatically remove the panels
                 this.removeGroup(group, { skipActive: true });
             }
         }
-        catch (e_15_1) { e_15 = { error: e_15_1 }; }
+        catch (e_24_1) { e_24 = { error: e_24_1 }; }
         finally {
             try {
                 if (groups_1_1 && !groups_1_1.done && (_a = groups_1.return)) _a.call(groups_1);
             }
-            finally { if (e_15) throw e_15.error; }
+            finally { if (e_24) throw e_24.error; }
         }
         if (hasActiveGroup) {
             this.doSetGroupAndPanelActive(undefined);
@@ -1376,7 +1758,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this.gridview.clear();
     };
     DockviewComponent.prototype.closeAllGroups = function () {
-        var e_16, _a;
+        var e_26, _a;
         try {
             for (var _b = __values(this._groups.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var entry = _c.value;
@@ -1384,12 +1766,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.value.model.closeAllPanels();
             }
         }
-        catch (e_16_1) { e_16 = { error: e_16_1 }; }
+        catch (e_26_1) { e_26 = { error: e_26_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_16) throw e_16.error; }
+            finally { if (e_26) throw e_26.error; }
         }
     };
     DockviewComponent.prototype.addPanel = function (options) {
@@ -1467,6 +1849,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 });
             }
             else if (referenceGroup.api.location.type === 'floating' ||
+                referenceGroup.api.location.type === 'edge' ||
                 target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
                 referenceGroup.model.openPanel(panel, {
@@ -1640,25 +2023,29 @@ var DockviewComponent = /** @class */ (function (_super) {
         this.doRemoveGroup(group, options);
     };
     DockviewComponent.prototype.doRemoveGroup = function (group, options) {
-        var e_17, _a;
+        var e_27, _a;
         var _b;
+        // Edge groups are permanent structural elements - never remove them from the layout
+        if (__spreadArray([], __read(this._edgeGroups.values()), false).includes(group)) {
+            return group;
+        }
         var panels = __spreadArray([], __read(group.panels), false); // reassign since group panels will mutate
         if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
             try {
-                for (var panels_1 = __values(panels), panels_1_1 = panels_1.next(); !panels_1_1.done; panels_1_1 = panels_1.next()) {
-                    var panel = panels_1_1.value;
+                for (var panels_2 = __values(panels), panels_2_1 = panels_2.next(); !panels_2_1.done; panels_2_1 = panels_2.next()) {
+                    var panel = panels_2_1.value;
                     this.removePanel(panel, {
                         removeEmptyGroup: false,
                         skipDispose: (_b = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _b !== void 0 ? _b : false,
                     });
                 }
             }
-            catch (e_17_1) { e_17 = { error: e_17_1 }; }
+            catch (e_27_1) { e_27 = { error: e_27_1 }; }
             finally {
                 try {
-                    if (panels_1_1 && !panels_1_1.done && (_a = panels_1.return)) _a.call(panels_1);
+                    if (panels_2_1 && !panels_2_1.done && (_a = panels_2.return)) _a.call(panels_2);
                 }
-                finally { if (e_17) throw e_17.error; }
+                finally { if (e_27) throw e_27.error; }
             }
         }
         var activePanel = this.activePanel;
@@ -1754,17 +2141,33 @@ var DockviewComponent = /** @class */ (function (_super) {
             throw new Error("dockview: Failed to find group id ".concat(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: sourceGroup,
+                    tabGroupId: options.from.tabGroupId,
+                    destinationGroup: destinationGroup,
+                    destinationTarget: destinationTarget,
+                    destinationIndex: 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') {
@@ -1860,6 +2263,34 @@ var DockviewComponent = /** @class */ (function (_super) {
                     });
                     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).
+                     */
+                    var removedPanel_3 = this.movingLock(function () {
+                        return sourceGroup.model.removePanel(sourceItemId, {
+                            skipSetActive: false,
+                            skipSetActiveGroup: true,
+                        });
+                    });
+                    if (!removedPanel_3) {
+                        throw new Error("dockview: No panel with id ".concat(sourceItemId));
+                    }
+                    var newGroup_2 = this.createGroupAtLocation(targetLocation);
+                    this.movingLock(function () {
+                        return newGroup_2.model.openPanel(removedPanel_3, {
+                            skipSetGroupActive: true,
+                        });
+                    });
+                    this.doSetGroupAndPanelActive(newGroup_2);
+                    this._onDidMovePanel.fire({
+                        panel: removedPanel_3,
+                        from: sourceGroup,
+                    });
+                    return;
+                }
                 // source group will become empty so delete the group
                 var targetGroup_1 = this.movingLock(function () {
                     return _this.doRemoveGroup(sourceGroup, {
@@ -1882,30 +2313,134 @@ var DockviewComponent = /** @class */ (function (_super) {
                  * The group we are removing from has many panels, we need to remove the panels we are moving,
                  * create a new group, add the panels to that new group and add the new group in an appropiate position
                  */
-                var removedPanel_3 = this.movingLock(function () {
+                var removedPanel_4 = this.movingLock(function () {
                     return sourceGroup.model.removePanel(sourceItemId, {
                         skipSetActive: false,
                         skipSetActiveGroup: true,
                     });
                 });
-                if (!removedPanel_3) {
+                if (!removedPanel_4) {
                     throw new Error("dockview: No panel with id ".concat(sourceItemId));
                 }
                 var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, destinationTarget);
                 var group_2 = this.createGroupAtLocation(dropLocation);
                 this.movingLock(function () {
-                    return group_2.model.openPanel(removedPanel_3, {
+                    return group_2.model.openPanel(removedPanel_4, {
                         skipSetGroupActive: true,
                     });
                 });
                 this.doSetGroupAndPanelActive(group_2);
                 this._onDidMovePanel.fire({
-                    panel: removedPanel_3,
+                    panel: removedPanel_4,
                     from: sourceGroup,
                 });
             }
         }
     };
+    DockviewComponent.prototype.moveTabGroupToGroup = function (options) {
+        var _this = this;
+        var sourceGroup = options.sourceGroup, tabGroupId = options.tabGroupId, destinationGroup = options.destinationGroup, destinationTarget = options.destinationTarget, destinationIndex = options.destinationIndex;
+        var tabGroup = sourceGroup.model
+            .getTabGroups()
+            .find(function (tg) { return tg.id === tabGroupId; });
+        if (!tabGroup || tabGroup.panelIds.length === 0) {
+            return;
+        }
+        // Snapshot tab group metadata before removing panels
+        var label = tabGroup.label;
+        var color = tabGroup.color;
+        var collapsed = tabGroup.collapsed;
+        var panelIds = __spreadArray([], __read(tabGroup.panelIds), false);
+        // Remove panels from the source group
+        var removedPanels = this.movingLock(function () {
+            return panelIds
+                .map(function (pid) {
+                return sourceGroup.model.removePanel(pid, {
+                    skipSetActive: false,
+                    skipSetActiveGroup: true,
+                });
+            })
+                .filter(function (p) { return p !== undefined; });
+        });
+        if (removedPanels.length === 0) {
+            return;
+        }
+        if (!options.keepEmptyGroups &&
+            sourceGroup.model.size === 0 &&
+            sourceGroup !== destinationGroup) {
+            this.doRemoveGroup(sourceGroup, { skipActive: true });
+        }
+        var addPanelsToGroup = function (targetGroup) {
+            var e_28, _a, e_29, _b;
+            _this.movingLock(function () {
+                var e_30, _a;
+                try {
+                    for (var removedPanels_3 = __values(removedPanels), removedPanels_3_1 = removedPanels_3.next(); !removedPanels_3_1.done; removedPanels_3_1 = removedPanels_3.next()) {
+                        var panel = removedPanels_3_1.value;
+                        targetGroup.model.openPanel(panel, {
+                            index: destinationIndex,
+                            skipSetActive: true,
+                            skipSetGroupActive: true,
+                        });
+                    }
+                }
+                catch (e_30_1) { e_30 = { error: e_30_1 }; }
+                finally {
+                    try {
+                        if (removedPanels_3_1 && !removedPanels_3_1.done && (_a = removedPanels_3.return)) _a.call(removedPanels_3);
+                    }
+                    finally { if (e_30) throw e_30.error; }
+                }
+            });
+            // Recreate the tab group in the destination
+            var newTabGroup = targetGroup.model.createTabGroup({
+                label: label,
+                color: color,
+                collapsed: collapsed,
+            });
+            try {
+                for (var removedPanels_1 = __values(removedPanels), removedPanels_1_1 = removedPanels_1.next(); !removedPanels_1_1.done; removedPanels_1_1 = removedPanels_1.next()) {
+                    var panel = removedPanels_1_1.value;
+                    targetGroup.model.addPanelToTabGroup(newTabGroup.id, panel.id);
+                }
+            }
+            catch (e_28_1) { e_28 = { error: e_28_1 }; }
+            finally {
+                try {
+                    if (removedPanels_1_1 && !removedPanels_1_1.done && (_a = removedPanels_1.return)) _a.call(removedPanels_1);
+                }
+                finally { if (e_28) throw e_28.error; }
+            }
+            if (!options.skipSetActive) {
+                _this.doSetGroupAndPanelActive(targetGroup);
+            }
+            try {
+                for (var removedPanels_2 = __values(removedPanels), removedPanels_2_1 = removedPanels_2.next(); !removedPanels_2_1.done; removedPanels_2_1 = removedPanels_2.next()) {
+                    var panel = removedPanels_2_1.value;
+                    _this._onDidMovePanel.fire({
+                        panel: panel,
+                        from: sourceGroup,
+                    });
+                }
+            }
+            catch (e_29_1) { e_29 = { error: e_29_1 }; }
+            finally {
+                try {
+                    if (removedPanels_2_1 && !removedPanels_2_1.done && (_b = removedPanels_2.return)) _b.call(removedPanels_2);
+                }
+                finally { if (e_29) throw e_29.error; }
+            }
+        };
+        if (!destinationTarget || destinationTarget === 'center') {
+            addPanelsToGroup(destinationGroup);
+        }
+        else {
+            var referenceLocation = (0, gridview_1.getGridLocation)(destinationGroup.element);
+            var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, destinationTarget);
+            var newGroup = this.createGroupAtLocation(dropLocation);
+            addPanelsToGroup(newGroup);
+        }
+    };
     DockviewComponent.prototype.moveGroup = function (options) {
         var _this = this;
         var from = options.from.group;
@@ -1913,7 +2448,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         var target = options.to.position;
         if (target === 'center') {
             var activePanel_1 = from.activePanel;
-            var panels_2 = this.movingLock(function () {
+            var panels_3 = this.movingLock(function () {
                 return __spreadArray([], __read(from.panels), false).map(function (p) {
                     return from.model.removePanel(p.id, {
                         skipSetActive: true,
@@ -1924,22 +2459,22 @@ var DockviewComponent = /** @class */ (function (_super) {
                 this.doRemoveGroup(from, { skipActive: true });
             }
             this.movingLock(function () {
-                var e_18, _a;
+                var e_31, _a;
                 try {
-                    for (var panels_3 = __values(panels_2), panels_3_1 = panels_3.next(); !panels_3_1.done; panels_3_1 = panels_3.next()) {
-                        var panel = panels_3_1.value;
+                    for (var panels_4 = __values(panels_3), panels_4_1 = panels_4.next(); !panels_4_1.done; panels_4_1 = panels_4.next()) {
+                        var panel = panels_4_1.value;
                         to.model.openPanel(panel, {
                             skipSetActive: panel !== activePanel_1,
                             skipSetGroupActive: true,
                         });
                     }
                 }
-                catch (e_18_1) { e_18 = { error: e_18_1 }; }
+                catch (e_31_1) { e_31 = { error: e_31_1 }; }
                 finally {
                     try {
-                        if (panels_3_1 && !panels_3_1.done && (_a = panels_3.return)) _a.call(panels_3);
+                        if (panels_4_1 && !panels_4_1.done && (_a = panels_4.return)) _a.call(panels_4);
                     }
-                    finally { if (e_18) throw e_18.error; }
+                    finally { if (e_31) throw e_31.error; }
                 }
             });
             // Ensure group becomes active after move
@@ -2129,9 +2664,13 @@ var DockviewComponent = /** @class */ (function (_super) {
             }), view.model.onGroupDragStart(function (event) {
                 _this._onWillDragGroup.fire(event);
             }), view.model.onMove(function (event) {
-                var groupId = event.groupId, itemId = event.itemId, target = event.target, index = event.index;
+                var groupId = event.groupId, itemId = event.itemId, target = event.target, index = event.index, tabGroupId = event.tabGroupId;
                 _this.moveGroupOrPanel({
-                    from: { groupId: groupId, panelId: itemId },
+                    from: {
+                        groupId: groupId,
+                        panelId: itemId,
+                        tabGroupId: tabGroupId,
+                    },
                     to: {
                         group: view,
                         position: target,
@@ -2170,6 +2709,18 @@ var DockviewComponent = /** @class */ (function (_super) {
                 if (_this._onDidActivePanelChange.value !== event.panel) {
                     _this._onDidActivePanelChange.fire(event.panel);
                 }
+            }), view.model.onDidCreateTabGroup(function (e) {
+                _this._onDidCreateTabGroup.fire(e);
+            }), view.model.onDidDestroyTabGroup(function (e) {
+                _this._onDidDestroyTabGroup.fire(e);
+            }), view.model.onDidAddPanelToTabGroup(function (e) {
+                _this._onDidAddPanelToTabGroup.fire(e);
+            }), view.model.onDidRemovePanelFromTabGroup(function (e) {
+                _this._onDidRemovePanelFromTabGroup.fire(e);
+            }), view.model.onDidTabGroupChange(function (e) {
+                _this._onDidTabGroupChange.fire(e);
+            }), view.model.onDidTabGroupCollapsedChange(function (e) {
+                _this._onDidTabGroupCollapsedChange.fire(e);
             }), events_1.Event.any(view.model.onDidPanelTitleChange, view.model.onDidPanelParametersChange)(function () {
                 _this._bufferOnDidLayoutChange.fire();
             }));
@@ -2232,10 +2783,24 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
     };
     DockviewComponent.prototype.updateTheme = function () {
-        var _a, _b;
-        var theme = (_a = this._options.theme) !== null && _a !== void 0 ? _a : theme_1.themeAbyss;
-        this._themeClassnames.setClassNames(theme.className);
-        this.gridview.margin = (_b = theme.gap) !== null && _b !== void 0 ? _b : 0;
+        var e_32, _a;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var theme = (_b = this._options.theme) !== null && _b !== void 0 ? _b : theme_1.themeAbyss;
+        // 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.
+        (_c = this._shellThemeClassnames) === null || _c === void 0 ? void 0 : _c.setClassNames(theme.className);
+        this.gridview.margin = (_d = theme.gap) !== null && _d !== void 0 ? _d : 0;
+        (_e = this._shellManager) === null || _e === void 0 ? void 0 : _e.updateTheme((_f = theme.gap) !== null && _f !== void 0 ? _f : 0, (_g = theme.edgeGroupCollapsedSize) !== null && _g !== void 0 ? _g : 35);
+        if (theme.dndOverlayBorder !== undefined) {
+            this.element.style.setProperty('--dv-drag-over-border', theme.dndOverlayBorder);
+            (_h = this._shellManager) === null || _h === void 0 ? void 0 : _h.element.style.setProperty('--dv-drag-over-border', theme.dndOverlayBorder);
+        }
+        else {
+            this.element.style.removeProperty('--dv-drag-over-border');
+            (_j = this._shellManager) === null || _j === void 0 ? void 0 : _j.element.style.removeProperty('--dv-drag-over-border');
+        }
         switch (theme.dndOverlayMounting) {
             case 'absolute':
                 this.rootDropTargetContainer.disabled = false;
@@ -2245,6 +2810,27 @@ var DockviewComponent = /** @class */ (function (_super) {
                 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.
+        var indicatorNone = ((_k = theme.tabGroupIndicator) !== null && _k !== void 0 ? _k : 'wrap') === 'none';
+        (0, dom_1.toggleClass)(this.element, 'dv-tab-group-indicator-none', indicatorNone);
+        if (this._shellManager) {
+            (0, dom_1.toggleClass)(this._shellManager.element, 'dv-tab-group-indicator-none', indicatorNone);
+        }
+        try {
+            // Re-render tab group indicators so the new tabGroupIndicator mode takes effect
+            for (var _l = __values(this.groups), _m = _l.next(); !_m.done; _m = _l.next()) {
+                var group = _m.value;
+                group.model.updateTabGroups();
+            }
+        }
+        catch (e_32_1) { e_32 = { error: e_32_1 }; }
+        finally {
+            try {
+                if (_m && !_m.done && (_a = _l.return)) _a.call(_l);
+            }
+            finally { if (e_32) throw e_32.error; }
+        }
     };
     return DockviewComponent;
 }(baseComponentGridview_1.BaseGrid));