dockview-core 6.2.2 → 6.3.0

package/dist/cjs/dockview/dockviewComponent.js

@@ -185,6 +185,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this._floatingGroups = [];
         _this._popoutGroups = [];
         _this._popoutRestorationPromise = Promise.resolve();
+        _this._popoutRestorationCleanups = new Set();
         _this._onDidRemoveGroup = new events_1.Emitter();
         _this.onDidRemoveGroup = _this._onDidRemoveGroup.event;
         _this._onDidAddGroup = new events_1.Emitter();
@@ -289,50 +290,68 @@ var DockviewComponent = /** @class */ (function (_super) {
         }), 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, e_3, _c;
-            var _d;
+            var e_1, _a, e_2, _b, e_3, _c, e_4, _d;
+            var _e;
             try {
-                // iterate over a copy of the array since .dispose() mutates the original array
-                for (var _e = __values(__spreadArray([], __read(_this._floatingGroups), false)), _f = _e.next(); !_f.done; _f = _e.next()) {
-                    var group = _f.value;
-                    group.dispose();
+                // Cancel any pending popout-restoration timers scheduled by
+                // fromJSON so they don't open new browser windows after
+                // dispose, and resolve their promises so callers awaiting
+                // popoutRestorationPromise don't hang. See issue #851.
+                for (var _f = __values(__spreadArray([], __read(_this._popoutRestorationCleanups), false)), _g = _f.next(); !_g.done; _g = _f.next()) {
+                    var cleanup = _g.value;
+                    cleanup();
                 }
             }
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
             finally {
                 try {
-                    if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
+                    if (_g && !_g.done && (_a = _f.return)) _a.call(_f);
                 }
                 finally { if (e_1) throw e_1.error; }
             }
+            _this._popoutRestorationCleanups.clear();
             try {
                 // iterate over a copy of the array since .dispose() mutates the original array
-                for (var _g = __values(__spreadArray([], __read(_this._popoutGroups), false)), _h = _g.next(); !_h.done; _h = _g.next()) {
-                    var group = _h.value;
-                    group.disposable.dispose();
+                for (var _h = __values(__spreadArray([], __read(_this._floatingGroups), false)), _j = _h.next(); !_j.done; _j = _h.next()) {
+                    var group = _j.value;
+                    group.dispose();
                 }
             }
             catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
                 try {
-                    if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
+                    if (_j && !_j.done && (_b = _h.return)) _b.call(_h);
                 }
                 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();
+                // iterate over a copy of the array since .dispose() mutates the original array
+                for (var _k = __values(__spreadArray([], __read(_this._popoutGroups), false)), _l = _k.next(); !_l.done; _l = _k.next()) {
+                    var group = _l.value;
+                    group.disposable.dispose();
                 }
             }
             catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
                 try {
-                    if (_k && !_k.done && (_c = _j.return)) _c.call(_j);
+                    if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
                 }
                 finally { if (e_3) throw e_3.error; }
             }
+            (_e = _this._shellManager) === null || _e === void 0 ? void 0 : _e.dispose();
+            try {
+                for (var _m = __values(_this._edgeGroupDisposables.values()), _o = _m.next(); !_o.done; _o = _m.next()) {
+                    var d = _o.value;
+                    d.dispose();
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (_o && !_o.done && (_d = _m.return)) _d.call(_m);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
             _this._edgeGroupDisposables.clear();
         }), _this._rootDropTarget, _this._rootDropTarget.onWillShowOverlay(function (event) {
             if (_this.gridview.length > 0 && event.position === 'center') {
@@ -509,7 +528,7 @@ var DockviewComponent = /** @class */ (function (_super) {
     };
     DockviewComponent.prototype.addPopoutGroup = function (itemToPopout, options) {
         var _this = this;
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         if (itemToPopout instanceof dockviewGroupPanel_1.DockviewGroupPanel &&
             itemToPopout.model.location.type === 'edge') {
             // edge groups are permanent structural elements and cannot be popped out
@@ -544,6 +563,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             height: box.height,
             onDidOpen: options === null || options === void 0 ? void 0 : options.onDidOpen,
             onWillClose: options === null || options === void 0 ? void 0 : options.onWillClose,
+            nonce: (_f = this.options) === null || _f === void 0 ? void 0 : _f.nonce,
         });
         var popoutWindowDisposable = new lifecycle_1.CompositeDisposable(_window, _window.onDidClose(function () {
             popoutWindowDisposable.dispose();
@@ -978,13 +998,13 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
     };
     DockviewComponent.prototype.updateOptions = function (options) {
-        var e_4, _a, e_5, _b, e_6, _c;
-        var _d, _e, _f;
+        var e_5, _a, e_6, _b, e_7, _c, e_8, _d;
+        var _e, _f, _g, _h, _j;
         _super.prototype.updateOptions.call(this, options);
         if ('floatingGroupBounds' in options) {
             try {
-                for (var _g = __values(this._floatingGroups), _h = _g.next(); !_h.done; _h = _g.next()) {
-                    var group = _h.value;
+                for (var _k = __values(this._floatingGroups), _l = _k.next(); !_l.done; _l = _k.next()) {
+                    var group = _l.value;
                     switch (options.floatingGroupBounds) {
                         case 'boundedWithinViewport':
                             group.overlay.minimumInViewportHeight = undefined;
@@ -998,19 +1018,19 @@ var DockviewComponent = /** @class */ (function (_super) {
                             break;
                         default:
                             group.overlay.minimumInViewportHeight =
-                                (_d = options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport;
+                                (_e = options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport;
                             group.overlay.minimumInViewportWidth =
-                                (_e = options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumWidthWithinViewport;
+                                (_f = options.floatingGroupBounds) === null || _f === void 0 ? void 0 : _f.minimumWidthWithinViewport;
                     }
                     group.overlay.setBounds();
                 }
             }
-            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 && (_a = _g.return)) _a.call(_g);
+                    if (_l && !_l.done && (_a = _k.return)) _a.call(_k);
                 }
-                finally { if (e_4) throw e_4.error; }
+                finally { if (e_5) throw e_5.error; }
             }
         }
         this.updateDropTargetModel(options);
@@ -1027,42 +1047,63 @@ var DockviewComponent = /** @class */ (function (_super) {
             'createLeftHeaderActionComponent' in options ||
             'createPrefixHeaderActionComponent' in options) {
             try {
-                for (var _j = __values(this.groups), _k = _j.next(); !_k.done; _k = _j.next()) {
-                    var group = _k.value;
+                for (var _m = __values(this.groups), _o = _m.next(); !_o.done; _o = _m.next()) {
+                    var group = _o.value;
                     group.model.updateHeaderActions();
                 }
             }
-            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            catch (e_6_1) { e_6 = { error: e_6_1 }; }
             finally {
                 try {
-                    if (_k && !_k.done && (_b = _j.return)) _b.call(_j);
+                    if (_o && !_o.done && (_b = _m.return)) _b.call(_m);
                 }
-                finally { if (e_5) throw e_5.error; }
+                finally { if (e_6) throw e_6.error; }
+            }
+        }
+        if ('createWatermarkComponent' in options) {
+            if (this._watermark) {
+                this._watermark.element.parentElement.remove();
+                (_h = (_g = this._watermark).dispose) === null || _h === void 0 ? void 0 : _h.call(_g);
+                this._watermark = null;
+            }
+            this.updateWatermark();
+            try {
+                for (var _p = __values(this.groups), _q = _p.next(); !_q.done; _q = _p.next()) {
+                    var group = _q.value;
+                    group.model.refreshWatermark();
+                }
+            }
+            catch (e_7_1) { e_7 = { error: e_7_1 }; }
+            finally {
+                try {
+                    if (_q && !_q.done && (_c = _p.return)) _c.call(_p);
+                }
+                finally { if (e_7) throw e_7.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.setEntries((_j = this._options.tabGroupColors) !== null && _j !== void 0 ? _j : 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;
+                for (var _r = __values(this.groups), _s = _r.next(); !_s.done; _s = _r.next()) {
+                    var group = _s.value;
                     group.model.refreshTabGroupAccent();
                 }
             }
-            catch (e_6_1) { e_6 = { error: e_6_1 }; }
+            catch (e_8_1) { e_8 = { error: e_8_1 }; }
             finally {
                 try {
-                    if (_m && !_m.done && (_c = _l.return)) _c.call(_l);
+                    if (_s && !_s.done && (_d = _r.return)) _d.call(_r);
                 }
-                finally { if (e_6) throw e_6.error; }
+                finally { if (e_8) throw e_8.error; }
             }
         }
         this._onDidOptionsChange.fire();
         this._layoutFromShell(this.gridview.width, this.gridview.height);
     };
     DockviewComponent.prototype.layout = function (width, height, forceResize) {
-        var e_7, _a;
+        var e_9, _a;
         if (this._shellManager && !this._inShellLayout) {
             this._shellManager.layout(width, height);
         }
@@ -1078,12 +1119,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     floating.overlay.setBounds();
                 }
             }
-            catch (e_7_1) { e_7 = { error: e_7_1 }; }
+            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_7) throw e_7.error; }
+                finally { if (e_9) throw e_9.error; }
             }
         }
     };
@@ -1143,7 +1184,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         return this._shellManager.isEdgeGroupVisible(position);
     };
     DockviewComponent.prototype.removeEdgeGroup = function (position) {
-        var e_8, _a;
+        var e_10, _a;
         var _b;
         var group = this._edgeGroups.get(position);
         if (!group) {
@@ -1159,12 +1200,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 });
             }
         }
-        catch (e_8_1) { e_8 = { error: e_8_1 }; }
+        catch (e_10_1) { e_10 = { error: e_10_1 }; }
         finally {
             try {
                 if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
             }
-            finally { if (e_8) throw e_8.error; }
+            finally { if (e_10) throw e_10.error; }
         }
         // Dispose the auto-collapse listener
         (_b = this._edgeGroupDisposables.get(position)) === null || _b === void 0 ? void 0 : _b.dispose();
@@ -1178,7 +1219,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this._onDidRemoveGroup.fire(group);
     };
     DockviewComponent.prototype.setEdgeGroupCollapsed = function (group, collapsed) {
-        var e_9, _a;
+        var e_11, _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];
@@ -1198,16 +1239,16 @@ var DockviewComponent = /** @class */ (function (_super) {
                 }
             }
         }
-        catch (e_9_1) { e_9 = { error: e_9_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_9) throw e_9.error; }
+            finally { if (e_11) throw e_11.error; }
         }
     };
     DockviewComponent.prototype.isEdgeGroupCollapsed = function (group) {
-        var e_10, _a;
+        var e_12, _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];
@@ -1216,17 +1257,17 @@ var DockviewComponent = /** @class */ (function (_super) {
                 }
             }
         }
-        catch (e_10_1) { e_10 = { error: e_10_1 }; }
+        catch (e_12_1) { e_12 = { error: e_12_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_10) throw e_10.error; }
+            finally { if (e_12) throw e_12.error; }
         }
         return false;
     };
     DockviewComponent.prototype.updateDragAndDropState = function () {
-        var e_11, _a;
+        var e_13, _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()) {
@@ -1234,12 +1275,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.model.updateDragAndDropState();
             }
         }
-        catch (e_11_1) { e_11 = { error: e_11_1 }; }
+        catch (e_13_1) { e_13 = { error: e_13_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_11) throw e_11.error; }
+            finally { if (e_13) throw e_13.error; }
         }
     };
     DockviewComponent.prototype.focus = function () {
@@ -1300,7 +1341,7 @@ var DockviewComponent = /** @class */ (function (_super) {
      * @returns A JSON respresentation of the layout
      */
     DockviewComponent.prototype.toJSON = function () {
-        var e_12, _a;
+        var e_14, _a;
         var _b;
         var data = this.gridview.serialize();
         var panels = this.panels.reduce(function (collection, panel) {
@@ -1346,19 +1387,19 @@ var DockviewComponent = /** @class */ (function (_super) {
                     }
                 }
             }
-            catch (e_12_1) { e_12 = { error: e_12_1 }; }
+            catch (e_14_1) { e_14 = { error: e_14_1 }; }
             finally {
                 try {
                     if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
                 }
-                finally { if (e_12) throw e_12.error; }
+                finally { if (e_14) throw e_14.error; }
             }
             result.edgeGroups = shellSerialized;
         }
         return result;
     };
     DockviewComponent.prototype.fromJSON = function (data, options) {
-        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 e_15, _a, e_16, _b, e_17, _c, e_18, _d, e_19, _e, e_20, _f, e_21, _g, e_22, _h, e_23, _j, e_24, _k;
         var _this = this;
         var _l, _m, _o;
         var existingPanels = new Map();
@@ -1381,12 +1422,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     }
                 }
             }
-            catch (e_13_1) { e_13 = { error: e_13_1 }; }
+            catch (e_15_1) { e_15 = { error: e_15_1 }; }
             finally {
                 try {
                     if (_q && !_q.done && (_a = _p.return)) _a.call(_p);
                 }
-                finally { if (e_13) throw e_13.error; }
+                finally { if (e_15) throw e_15.error; }
             }
             this.movingLock(function () {
                 Array.from(existingPanels.values()).forEach(function (panel) {
@@ -1417,7 +1458,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             var width = this.width;
             var height = this.height;
             var createGroupFromSerializedState_1 = function (data) {
-                var e_23, _a;
+                var e_25, _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');
@@ -1455,12 +1496,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                         _loop_1(child);
                     }
                 }
-                catch (e_23_1) { e_23 = { error: e_23_1 }; }
+                catch (e_25_1) { e_25 = { error: e_25_1 }; }
                 finally {
                     try {
                         if (views_2_1 && !views_2_1.done && (_a = views_2.return)) _a.call(views_2);
                     }
-                    finally { if (e_23) throw e_23.error; }
+                    finally { if (e_25) throw e_25.error; }
                 }
                 var _loop_2 = function (i) {
                     var panel = createdPanels[i];
@@ -1523,12 +1564,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                         }
                     }
                 }
-                catch (e_14_1) { e_14 = { error: e_14_1 }; }
+                catch (e_16_1) { e_16 = { error: e_16_1 }; }
                 finally {
                     try {
                         if (_s && !_s.done && (_b = _r.return)) _b.call(_r);
                     }
-                    finally { if (e_14) throw e_14.error; }
+                    finally { if (e_16) throw e_16.error; }
                 }
                 try {
                     // Restore panel contents of edge groups
@@ -1540,7 +1581,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                             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()) {
+                                for (var views_1 = (e_18 = 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);
@@ -1548,12 +1589,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                                     }
                                 }
                             }
-                            catch (e_16_1) { e_16 = { error: e_16_1 }; }
+                            catch (e_18_1) { e_18 = { error: e_18_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; }
+                                finally { if (e_18) throw e_18.error; }
                             }
                             for (var i = 0; i < createdPanels.length; i++) {
                                 var panel = createdPanels[i];
@@ -1575,12 +1616,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                         }
                     }
                 }
-                catch (e_15_1) { e_15 = { error: e_15_1 }; }
+                catch (e_17_1) { e_17 = { error: e_17_1 }; }
                 finally {
                     try {
                         if (_u && !_u.done && (_c = _t.return)) _c.call(_t);
                     }
-                    finally { if (e_15) throw e_15.error; }
+                    finally { if (e_17) throw e_17.error; }
                 }
                 this._shellManager.fromJSON(data.edgeGroups);
             }
@@ -1599,12 +1640,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     });
                 }
             }
-            catch (e_17_1) { e_17 = { error: e_17_1 }; }
+            catch (e_19_1) { e_19 = { error: e_19_1 }; }
             finally {
                 try {
                     if (serializedFloatingGroups_1_1 && !serializedFloatingGroups_1_1.done && (_e = serializedFloatingGroups_1.return)) _e.call(serializedFloatingGroups_1);
                 }
-                finally { if (e_17) throw e_17.error; }
+                finally { if (e_19) throw e_19.error; }
             }
             var serializedPopoutGroups = (_o = data.popoutGroups) !== null && _o !== void 0 ? _o : [];
             // Create a promise that resolves when all popout groups are created
@@ -1615,7 +1656,23 @@ var DockviewComponent = /** @class */ (function (_super) {
                 var group = createGroupFromSerializedState_1(data);
                 // Add a small delay for each popup after the first to avoid browser popup blocking
                 var popoutPromise = new Promise(function (resolve) {
-                    setTimeout(function () {
+                    var cleanup = function () {
+                        _this._popoutRestorationCleanups.delete(cleanup);
+                        clearTimeout(handle);
+                        resolve();
+                    };
+                    var handle = setTimeout(function () {
+                        _this._popoutRestorationCleanups.delete(cleanup);
+                        // Guard against the component being disposed before
+                        // this timer fires. Under React StrictMode the
+                        // component is mounted -> disposed -> remounted, and
+                        // without this guard the first instance's queued
+                        // restoration would open a second popout window.
+                        // See issue #851.
+                        if (_this.isDisposed) {
+                            resolve();
+                            return;
+                        }
                         _this.addPopoutGroup(group, {
                             position: position !== null && position !== void 0 ? position : undefined,
                             overridePopoutGroup: gridReferenceGroup
@@ -1628,6 +1685,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                         });
                         resolve();
                     }, index * constants_1.DESERIALIZATION_POPOUT_DELAY_MS); // 100ms delay between each popup
+                    _this._popoutRestorationCleanups.add(cleanup);
                 });
                 popoutPromises_1.push(popoutPromise);
             });
@@ -1639,12 +1697,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     floatingGroup.overlay.setBounds();
                 }
             }
-            catch (e_18_1) { e_18 = { error: e_18_1 }; }
+            catch (e_20_1) { e_20 = { error: e_20_1 }; }
             finally {
                 try {
                     if (_x && !_x.done && (_f = _w.return)) _f.call(_w);
                 }
-                finally { if (e_18) throw e_18.error; }
+                finally { if (e_20) throw e_20.error; }
             }
             if (typeof activeGroup === 'string') {
                 var panel = this.getPanel(activeGroup);
@@ -1662,7 +1720,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 for (var _y = __values(this.groups), _z = _y.next(); !_z.done; _z = _y.next()) {
                     var group = _z.value;
                     try {
-                        for (var _0 = (e_20 = void 0, __values(group.panels)), _1 = _0.next(); !_1.done; _1 = _0.next()) {
+                        for (var _0 = (e_22 = void 0, __values(group.panels)), _1 = _0.next(); !_1.done; _1 = _0.next()) {
                             var panel = _1.value;
                             this.removePanel(panel, {
                                 removeEmptyGroup: false,
@@ -1670,21 +1728,21 @@ var DockviewComponent = /** @class */ (function (_super) {
                             });
                         }
                     }
-                    catch (e_20_1) { e_20 = { error: e_20_1 }; }
+                    catch (e_22_1) { e_22 = { error: e_22_1 }; }
                     finally {
                         try {
                             if (_1 && !_1.done && (_h = _0.return)) _h.call(_0);
                         }
-                        finally { if (e_20) throw e_20.error; }
+                        finally { if (e_22) throw e_22.error; }
                     }
                 }
             }
-            catch (e_19_1) { e_19 = { error: e_19_1 }; }
+            catch (e_21_1) { e_21 = { error: e_21_1 }; }
             finally {
                 try {
                     if (_z && !_z.done && (_g = _y.return)) _g.call(_y);
                 }
-                finally { if (e_19) throw e_19.error; }
+                finally { if (e_21) throw e_21.error; }
             }
             try {
                 /**
@@ -1698,12 +1756,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     this._onDidRemoveGroup.fire(group);
                 }
             }
-            catch (e_21_1) { e_21 = { error: e_21_1 }; }
+            catch (e_23_1) { e_23 = { error: e_23_1 }; }
             finally {
                 try {
                     if (_3 && !_3.done && (_j = _2.return)) _j.call(_2);
                 }
-                finally { if (e_21) throw e_21.error; }
+                finally { if (e_23) throw e_23.error; }
             }
             try {
                 // iterate over a reassigned array since original array will be modified
@@ -1712,12 +1770,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     floatingGroup.dispose();
                 }
             }
-            catch (e_22_1) { e_22 = { error: e_22_1 }; }
+            catch (e_24_1) { e_24 = { error: e_24_1 }; }
             finally {
                 try {
                     if (_5 && !_5.done && (_k = _4.return)) _k.call(_4);
                 }
-                finally { if (e_22) throw e_22.error; }
+                finally { if (e_24) throw e_24.error; }
             }
             // fires clean-up events and clears the underlying HTML gridview.
             this.clear();
@@ -1734,7 +1792,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this._onDidLayoutFromJSON.fire();
     };
     DockviewComponent.prototype.clear = function () {
-        var e_24, _a, e_25, _b;
+        var e_26, _a, e_27, _b;
         var groups = Array.from(this._groups.values()).map(function (_) { return _.value; });
         var hasActiveGroup = !!this.activeGroup;
         try {
@@ -1744,17 +1802,17 @@ var DockviewComponent = /** @class */ (function (_super) {
                     // 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()) {
+                        for (var panels_1 = (e_27 = 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 }; }
+                    catch (e_27_1) { e_27 = { error: e_27_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; }
+                        finally { if (e_27) throw e_27.error; }
                     }
                     continue;
                 }
@@ -1762,12 +1820,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 this.removeGroup(group, { skipActive: true });
             }
         }
-        catch (e_24_1) { e_24 = { error: e_24_1 }; }
+        catch (e_26_1) { e_26 = { error: e_26_1 }; }
         finally {
             try {
                 if (groups_1_1 && !groups_1_1.done && (_a = groups_1.return)) _a.call(groups_1);
             }
-            finally { if (e_24) throw e_24.error; }
+            finally { if (e_26) throw e_26.error; }
         }
         if (hasActiveGroup) {
             this.doSetGroupAndPanelActive(undefined);
@@ -1775,7 +1833,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this.gridview.clear();
     };
     DockviewComponent.prototype.closeAllGroups = function () {
-        var e_26, _a;
+        var e_28, _a;
         try {
             for (var _b = __values(this._groups.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var entry = _c.value;
@@ -1783,12 +1841,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.value.model.closeAllPanels();
             }
         }
-        catch (e_26_1) { e_26 = { error: e_26_1 }; }
+        catch (e_28_1) { e_28 = { error: e_28_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_26) throw e_26.error; }
+            finally { if (e_28) throw e_28.error; }
         }
     };
     DockviewComponent.prototype.addPanel = function (options) {
@@ -2040,7 +2098,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this.doRemoveGroup(group, options);
     };
     DockviewComponent.prototype.doRemoveGroup = function (group, options) {
-        var e_27, _a;
+        var e_29, _a;
         var _b;
         // Edge groups are permanent structural elements - never remove them from the layout
         if (__spreadArray([], __read(this._edgeGroups.values()), false).includes(group)) {
@@ -2057,12 +2115,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     });
                 }
             }
-            catch (e_27_1) { e_27 = { error: e_27_1 }; }
+            catch (e_29_1) { e_29 = { error: e_29_1 }; }
             finally {
                 try {
                     if (panels_2_1 && !panels_2_1.done && (_a = panels_2.return)) _a.call(panels_2);
                 }
-                finally { if (e_27) throw e_27.error; }
+                finally { if (e_29) throw e_29.error; }
             }
         }
         var activePanel = this.activePanel;
@@ -2256,8 +2314,11 @@ var DockviewComponent = /** @class */ (function (_super) {
                      * the source group is a popout group with a single panel
                      *
                      * 1. remove the panel from the group without triggering any events
-                     * 2. remove the popout group
-                     * 3. create a new group at the requested location and add that panel
+                     * 2. remove the popout group — this may cascade-remove the empty
+                     *    reference group it left behind in the main grid (see
+                     *    doRemoveGroup for popout groups), which can shift grid indices
+                     * 3. recompute the target location now that the grid is stable
+                     * 4. create a new group at the recomputed location and add that panel
                      */
                     var popoutGroup_1 = this._popoutGroups.find(function (group) { return group.popoutGroup === sourceGroup; });
                     var removedPanel_2 = this.movingLock(function () {
@@ -2267,7 +2328,8 @@ var DockviewComponent = /** @class */ (function (_super) {
                         });
                     });
                     this.doRemoveGroup(sourceGroup, { skipActive: true });
-                    var newGroup_1 = this.createGroupAtLocation(targetLocation);
+                    var updatedTargetLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, (0, gridview_1.getGridLocation)(destinationGroup.element), destinationTarget);
+                    var newGroup_1 = this.createGroupAtLocation(updatedTargetLocation);
                     this.movingLock(function () {
                         return newGroup_1.model.openPanel(removedPanel_2, {
                             skipSetActive: true,
@@ -2390,9 +2452,9 @@ var DockviewComponent = /** @class */ (function (_super) {
             return;
         }
         var addPanelsToGroup = function (targetGroup) {
-            var e_28, _a, e_29, _b;
+            var e_30, _a, e_31, _b;
             _this.movingLock(function () {
-                var e_30, _a;
+                var e_32, _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;
@@ -2403,12 +2465,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                         });
                     }
                 }
-                catch (e_30_1) { e_30 = { error: e_30_1 }; }
+                catch (e_32_1) { e_32 = { error: e_32_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; }
+                    finally { if (e_32) throw e_32.error; }
                 }
             });
             // Recreate the tab group in the destination
@@ -2424,12 +2486,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     targetGroup.model.addPanelToTabGroup(newTabGroup.id, panel.id);
                 }
             }
-            catch (e_28_1) { e_28 = { error: e_28_1 }; }
+            catch (e_30_1) { e_30 = { error: e_30_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; }
+                finally { if (e_30) throw e_30.error; }
             }
             if (!options.skipSetActive) {
                 _this.doSetGroupAndPanelActive(targetGroup);
@@ -2443,12 +2505,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     });
                 }
             }
-            catch (e_29_1) { e_29 = { error: e_29_1 }; }
+            catch (e_31_1) { e_31 = { error: e_31_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; }
+                finally { if (e_31) throw e_31.error; }
             }
         };
         var targetGroup;
@@ -2474,7 +2536,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         addPanelsToGroup(targetGroup);
     };
     DockviewComponent.prototype.moveGroup = function (options) {
-        var e_31, _a, e_32, _b, e_33, _c, e_34, _d;
+        var e_33, _a, e_34, _b, e_35, _c, e_36, _d;
         var _this = this;
         var from = options.from.group;
         var to = options.to.group;
@@ -2506,7 +2568,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 this.doRemoveGroup(from, { skipActive: true });
             }
             this.movingLock(function () {
-                var e_35, _a;
+                var e_37, _a;
                 try {
                     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;
@@ -2516,12 +2578,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                         });
                     }
                 }
-                catch (e_35_1) { e_35 = { error: e_35_1 }; }
+                catch (e_37_1) { e_37 = { error: e_37_1 }; }
                 finally {
                     try {
                         if (panels_4_1 && !panels_4_1.done && (_a = panels_4.return)) _a.call(panels_4);
                     }
-                    finally { if (e_35) throw e_35.error; }
+                    finally { if (e_37) throw e_37.error; }
                 }
             });
             try {
@@ -2534,26 +2596,26 @@ var DockviewComponent = /** @class */ (function (_super) {
                         componentParams: snapshot.componentParams,
                     });
                     try {
-                        for (var _e = (e_32 = void 0, __values(snapshot.panelIds)), _f = _e.next(); !_f.done; _f = _e.next()) {
+                        for (var _e = (e_34 = void 0, __values(snapshot.panelIds)), _f = _e.next(); !_f.done; _f = _e.next()) {
                             var panelId = _f.value;
                             to.model.addPanelToTabGroup(newTabGroup.id, panelId);
                         }
                     }
-                    catch (e_32_1) { e_32 = { error: e_32_1 }; }
+                    catch (e_34_1) { e_34 = { error: e_34_1 }; }
                     finally {
                         try {
                             if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
                         }
-                        finally { if (e_32) throw e_32.error; }
+                        finally { if (e_34) throw e_34.error; }
                     }
                 }
             }
-            catch (e_31_1) { e_31 = { error: e_31_1 }; }
+            catch (e_33_1) { e_33 = { error: e_33_1 }; }
             finally {
                 try {
                     if (tabGroupSnapshots_1_1 && !tabGroupSnapshots_1_1.done && (_a = tabGroupSnapshots_1.return)) _a.call(tabGroupSnapshots_1);
                 }
-                finally { if (e_31) throw e_31.error; }
+                finally { if (e_33) throw e_33.error; }
             }
             // Ensure group becomes active after move
             if (options.skipSetActive !== true) {
@@ -2596,7 +2658,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 });
                 source = this.createGroup();
                 this.movingLock(function () {
-                    var e_36, _a;
+                    var e_38, _a;
                     try {
                         for (var movedPanels_2 = __values(movedPanels_1), movedPanels_2_1 = movedPanels_2.next(); !movedPanels_2_1.done; movedPanels_2_1 = movedPanels_2.next()) {
                             var panel = movedPanels_2_1.value;
@@ -2606,12 +2668,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                             });
                         }
                     }
-                    catch (e_36_1) { e_36 = { error: e_36_1 }; }
+                    catch (e_38_1) { e_38 = { error: e_38_1 }; }
                     finally {
                         try {
                             if (movedPanels_2_1 && !movedPanels_2_1.done && (_a = movedPanels_2.return)) _a.call(movedPanels_2);
                         }
-                        finally { if (e_36) throw e_36.error; }
+                        finally { if (e_38) throw e_38.error; }
                     }
                 });
                 try {
@@ -2624,26 +2686,26 @@ var DockviewComponent = /** @class */ (function (_super) {
                             componentParams: snapshot.componentParams,
                         });
                         try {
-                            for (var _g = (e_34 = void 0, __values(snapshot.panelIds)), _h = _g.next(); !_h.done; _h = _g.next()) {
+                            for (var _g = (e_36 = void 0, __values(snapshot.panelIds)), _h = _g.next(); !_h.done; _h = _g.next()) {
                                 var panelId = _h.value;
                                 source.model.addPanelToTabGroup(newTabGroup.id, panelId);
                             }
                         }
-                        catch (e_34_1) { e_34 = { error: e_34_1 }; }
+                        catch (e_36_1) { e_36 = { error: e_36_1 }; }
                         finally {
                             try {
                                 if (_h && !_h.done && (_d = _g.return)) _d.call(_g);
                             }
-                            finally { if (e_34) throw e_34.error; }
+                            finally { if (e_36) throw e_36.error; }
                         }
                     }
                 }
-                catch (e_33_1) { e_33 = { error: e_33_1 }; }
+                catch (e_35_1) { e_35 = { error: e_35_1 }; }
                 finally {
                     try {
                         if (tabGroupSnapshots_2_1 && !tabGroupSnapshots_2_1.done && (_c = tabGroupSnapshots_2.return)) _c.call(tabGroupSnapshots_2);
                     }
-                    finally { if (e_33) throw e_33.error; }
+                    finally { if (e_35) throw e_35.error; }
                 }
             }
             else {
@@ -2947,7 +3009,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
     };
     DockviewComponent.prototype.updateTheme = function () {
-        var e_37, _a;
+        var e_39, _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
@@ -2988,12 +3050,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.model.updateTabGroups();
             }
         }
-        catch (e_37_1) { e_37 = { error: e_37_1 }; }
+        catch (e_39_1) { e_39 = { error: e_39_1 }; }
         finally {
             try {
                 if (_m && !_m.done && (_a = _l.return)) _a.call(_l);
             }
-            finally { if (e_37) throw e_37.error; }
+            finally { if (e_39) throw e_39.error; }
         }
     };
     return DockviewComponent;