dockview-core 6.2.2 → 6.3.0

package/dist/cjs/dockview/dockviewGroupPanelModel.d.ts

@@ -272,6 +272,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     getTabGroups(): readonly ITabGroup[];
     updateTabGroups(): void;
     refreshTabGroupAccent(): void;
+    refreshWatermark(): void;
     getTabGroupForPanel(panelId: string): ITabGroup | undefined;
     private _findTabGroupForPanel;
     private _removeTabGroupInternal;

package/dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -721,6 +721,15 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
     DockviewGroupPanelModel.prototype.refreshTabGroupAccent = function () {
         this.tabsContainer.refreshTabGroupAccent();
     };
+    DockviewGroupPanelModel.prototype.refreshWatermark = function () {
+        var _a, _b;
+        if (this.watermark) {
+            this.watermark.element.remove();
+            (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.watermark = undefined;
+        }
+        this.updateContainer();
+    };
     DockviewGroupPanelModel.prototype.getTabGroupForPanel = function (panelId) {
         return this._findTabGroupForPanel(panelId);
     };

package/dist/cjs/dockview/dockviewPanel.js

@@ -159,6 +159,11 @@ var DockviewPanel = /** @class */ (function (_super) {
         var didTitleChange = title !== this.title;
         if (didTitleChange) {
             this._title = title;
+            // keep the view-model's cached init params in sync so that tab
+            // renderers constructed lazily (e.g. the header overflow
+            // dropdown via createTabRenderer) see the updated title
+            // (#914).
+            this.view.setTitle(title);
             this.api._onDidTitleChange.fire({ title: title });
         }
     };

package/dist/cjs/dockview/dockviewPanelModel.d.ts

@@ -12,6 +12,7 @@ export interface IDockviewPanelModel extends IDisposable {
     layout(width: number, height: number): void;
     init(params: GroupPanelPartInitParameters): void;
     createTabRenderer(tabLocation: TabLocation): ITabRenderer;
+    setTitle(title: string): void;
 }
 export declare class DockviewPanelModel implements IDockviewPanelModel {
     private readonly accessor;
@@ -27,6 +28,7 @@ export declare class DockviewPanelModel implements IDockviewPanelModel {
     constructor(accessor: IDockviewComponent, id: string, contentComponent: string, tabComponent?: string | undefined);
     createTabRenderer(tabLocation: TabLocation): ITabRenderer;
     init(params: GroupPanelPartInitParameters): void;
+    setTitle(title: string): void;
     layout(width: number, height: number): void;
     update(event: PanelUpdateEvent): void;
     dispose(): void;

package/dist/cjs/dockview/dockviewPanelModel.js

@@ -52,6 +52,14 @@ var DockviewPanelModel = /** @class */ (function () {
         this.content.init(params);
         this.tab.init(__assign(__assign({}, params), { tabLocation: 'header' }));
     };
+    DockviewPanelModel.prototype.setTitle = function (title) {
+        // keep the cached init params in sync so that tab renderers created
+        // lazily after the title changes (e.g. for the header overflow
+        // dropdown) see the current title rather than the stale original.
+        if (this._params) {
+            this._params.title = title;
+        }
+    };
     DockviewPanelModel.prototype.layout = function (width, height) {
         var _a, _b;
         (_b = (_a = this.content).layout) === null || _b === void 0 ? void 0 : _b.call(_a, width, height);

package/dist/cjs/dockview/framework.d.ts

@@ -55,3 +55,11 @@ export interface ITabGroupChipRenderer {
     }): void;
     dispose(): void;
 }
+export interface IGroupDragGhostRenderer {
+    readonly element: HTMLElement;
+    init(params: {
+        group: IDockviewGroupPanel;
+        api: DockviewApi;
+    }): void;
+    dispose?(): void;
+}

package/dist/cjs/dockview/options.d.ts

@@ -11,12 +11,14 @@ import { GroupOptions } from './dockviewGroupPanelModel';
 import { DockviewGroupDropLocation } from './events';
 import { IDockviewPanel } from './dockviewPanel';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
-import { IGroupHeaderProps, ITabGroupChipRenderer } from './framework';
+import { IGroupDragGhostRenderer, IGroupHeaderProps, ITabGroupChipRenderer } from './framework';
 import { FloatingGroupOptions } from './dockviewComponent';
 import { Contraints } from '../gridview/gridviewPanel';
 import { AcceptableEvent, IAcceptableEvent } from '../events';
 import { DockviewTheme } from './theme';
 import { ITabGroup } from './tabGroup';
+import { CspNonceProvider } from '../dom';
+export { CspNonceProvider };
 import { DockviewTabGroupColorEntry } from './tabGroupAccent';
 export interface IHeaderActionsRenderer extends IDisposable {
     readonly element: HTMLElement;
@@ -89,6 +91,7 @@ export interface DockviewOptions {
         minimumWidthWithinViewport?: number;
     };
     popoutUrl?: string;
+    nonce?: CspNonceProvider;
     defaultRenderer?: DockviewPanelRenderer;
     defaultHeaderPosition?: DockviewHeaderPosition;
     debug?: boolean;
@@ -140,6 +143,15 @@ export interface DockviewOptions {
      * If not provided, the default chip renderer is used.
      */
     createTabGroupChipComponent?: (tabGroup: ITabGroup) => ITabGroupChipRenderer;
+    /**
+     * Factory to create the custom ghost element shown while dragging a
+     * group of panels (the small floating chip that follows the cursor).
+     *
+     * If not provided, a default ghost rendering `"Multiple Panels (N)"`
+     * is used. Supplying a factory replaces the entire default ghost,
+     * enabling i18n / custom visuals.
+     */
+    createGroupDragGhostComponent?: (group: DockviewGroupPanel) => IGroupDragGhostRenderer;
     /**
      * Replace the built-in tab group color palette with a user-defined list.
      *
@@ -292,4 +304,3 @@ export interface MovementOptions extends MovementOptions2 {
     includePanel?: boolean;
     group?: DockviewGroupPanel;
 }
-export {};

package/dist/cjs/dockview/options.js

@@ -47,6 +47,7 @@ exports.PROPERTY_KEYS_DOCKVIEW = (function () {
         disableFloatingGroups: undefined,
         floatingGroupBounds: undefined,
         popoutUrl: undefined,
+        nonce: undefined,
         defaultRenderer: undefined,
         defaultHeaderPosition: undefined,
         debug: undefined,
@@ -62,6 +63,7 @@ exports.PROPERTY_KEYS_DOCKVIEW = (function () {
         getTabContextMenuItems: undefined,
         getTabGroupChipContextMenuItems: undefined,
         createTabGroupChipComponent: undefined,
+        createGroupDragGhostComponent: undefined,
         tabGroupColors: undefined,
         tabGroupAccent: undefined,
     };

package/dist/cjs/dom.d.ts

@@ -24,7 +24,11 @@ export interface IFocusTracker extends IDisposable {
 export declare function trackFocus(element: HTMLElement): IFocusTracker;
 export declare function quasiPreventDefault(event: Event): void;
 export declare function quasiDefaultPrevented(event: Event): boolean;
-export declare function addStyles(document: Document, styleSheetList: StyleSheetList): void;
+export type CspNonceProvider = string | ((targetDocument: Document) => string | undefined);
+export interface AddStylesOptions {
+    nonce?: CspNonceProvider;
+}
+export declare function addStyles(document: Document, styleSheetList: StyleSheetList, options?: AddStylesOptions): void;
 export declare function getDomNodePagePosition(domNode: Element): {
     left: number;
     top: number;

package/dist/cjs/dom.js

@@ -218,9 +218,12 @@ function quasiPreventDefault(event) {
 function quasiDefaultPrevented(event) {
     return event[QUASI_PREVENT_DEFAULT_KEY];
 }
-function addStyles(document, styleSheetList) {
+function addStyles(document, styleSheetList, options) {
     var e_3, _a, e_4, _b;
+    if (options === void 0) { options = {}; }
     var styleSheets = Array.from(styleSheetList);
+    var nonce = options.nonce;
+    var resolvedNonce = typeof nonce === 'function' ? nonce(document) : nonce;
     try {
         for (var styleSheets_1 = __values(styleSheets), styleSheets_1_1 = styleSheets_1.next(); !styleSheets_1_1.done; styleSheets_1_1 = styleSheets_1.next()) {
             var styleSheet = styleSheets_1_1.value;
@@ -230,6 +233,10 @@ function addStyles(document, styleSheetList) {
                 link.type = styleSheet.type;
                 link.rel = 'stylesheet';
                 document.head.appendChild(link);
+                // The <link> will load and apply its rules in the target
+                // document. Reading cssRules here would duplicate them
+                // (and throws for cross-origin sheets).
+                continue;
             }
             var cssTexts = [];
             try {
@@ -240,12 +247,16 @@ function addStyles(document, styleSheetList) {
             catch (err) {
                 console.warn('dockview: failed to access stylesheet rules due to security restrictions', err);
             }
+            var fragment = document.createDocumentFragment();
             try {
                 for (var cssTexts_1 = (e_4 = void 0, __values(cssTexts)), cssTexts_1_1 = cssTexts_1.next(); !cssTexts_1_1.done; cssTexts_1_1 = cssTexts_1.next()) {
                     var rule = cssTexts_1_1.value;
                     var style = document.createElement('style');
+                    if (resolvedNonce) {
+                        style.setAttribute('nonce', resolvedNonce);
+                    }
                     style.appendChild(document.createTextNode(rule));
-                    document.head.appendChild(style);
+                    fragment.appendChild(style);
                 }
             }
             catch (e_4_1) { e_4 = { error: e_4_1 }; }
@@ -255,6 +266,7 @@ function addStyles(document, styleSheetList) {
                 }
                 finally { if (e_4) throw e_4.error; }
             }
+            document.head.appendChild(fragment);
         }
     }
     catch (e_3_1) { e_3 = { error: e_3_1 }; }

package/dist/cjs/index.d.ts

@@ -21,7 +21,7 @@ export { DockviewWillShowOverlayLocationEvent, DockviewTabGroupChangeEvent, Dock
 export { TabDragEvent, GroupDragEvent, } from './dockview/components/titlebar/tabsContainer';
 export * from './dockview/types';
 export * from './dockview/dockviewGroupPanel';
-export { IGroupPanelBaseProps, IDockviewPanelHeaderProps, IDockviewPanelProps, IDockviewHeaderActionsProps, IGroupHeaderProps, IWatermarkPanelProps, DockviewReadyEvent, ITabGroupChipRenderer, } from './dockview/framework';
+export { IGroupPanelBaseProps, IDockviewPanelHeaderProps, IDockviewPanelProps, IDockviewHeaderActionsProps, IGroupHeaderProps, IWatermarkPanelProps, DockviewReadyEvent, ITabGroupChipRenderer, IGroupDragGhostRenderer, } from './dockview/framework';
 export * from './dockview/options';
 export * from './dockview/theme';
 export * from './dockview/dockviewPanel';

package/dist/cjs/popoutWindow.d.ts

@@ -1,3 +1,4 @@
+import { CspNonceProvider } from './dom';
 import { CompositeDisposable } from './lifecycle';
 import { Box } from './types';
 export type PopoutWindowOptions = {
@@ -10,6 +11,7 @@ export type PopoutWindowOptions = {
         id: string;
         window: Window;
     }) => void;
+    nonce?: CspNonceProvider;
 } & Box;
 /**
  * Reject popout URLs that aren't same-origin http(s). Blocks `javascript:`,

package/dist/cjs/popoutWindow.js

@@ -204,7 +204,9 @@ var PopoutWindow = /** @class */ (function (_super) {
                                 var externalDocument = externalWindow.document;
                                 externalDocument.title = document.title;
                                 externalDocument.body.appendChild(container);
-                                (0, dom_1.addStyles)(externalDocument, window.document.styleSheets);
+                                (0, dom_1.addStyles)(externalDocument, window.document.styleSheets, {
+                                    nonce: _this.options.nonce,
+                                });
                                 /**
                                  * beforeunload must be registered after load for reasons I could not determine
                                  * otherwise the beforeunload event will not fire when the window is closed

package/dist/dockview-core.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 6.2.2
+ * @version 6.3.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -508,8 +508,10 @@
   function quasiDefaultPrevented(event) {
       return event[QUASI_PREVENT_DEFAULT_KEY];
   }
-  function addStyles(document, styleSheetList) {
+  function addStyles(document, styleSheetList, options = {}) {
       const styleSheets = Array.from(styleSheetList);
+      const { nonce } = options;
+      const resolvedNonce = typeof nonce === 'function' ? nonce(document) : nonce;
       for (const styleSheet of styleSheets) {
           if (styleSheet.href) {
               const link = document.createElement('link');
@@ -517,6 +519,10 @@
               link.type = styleSheet.type;
               link.rel = 'stylesheet';
               document.head.appendChild(link);
+              // The <link> will load and apply its rules in the target
+              // document. Reading cssRules here would duplicate them
+              // (and throws for cross-origin sheets).
+              continue;
           }
           let cssTexts = [];
           try {
@@ -527,11 +533,16 @@
           catch (err) {
               console.warn('dockview: failed to access stylesheet rules due to security restrictions', err);
           }
+          const fragment = document.createDocumentFragment();
           for (const rule of cssTexts) {
               const style = document.createElement('style');
+              if (resolvedNonce) {
+                  style.setAttribute('nonce', resolvedNonce);
+              }
               style.appendChild(document.createTextNode(rule));
-              document.head.appendChild(style);
+              fragment.appendChild(style);
           }
+          document.head.appendChild(fragment);
       }
   }
   function getDomNodePagePosition(domNode) {
@@ -5523,19 +5534,41 @@
           const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
           const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
           if (dataTransfer) {
-              const ghostElement = document.createElement('div');
-              ghostElement.style.backgroundColor = bgColor;
-              ghostElement.style.color = color;
-              ghostElement.style.padding = '2px 8px';
-              ghostElement.style.height = '24px';
-              ghostElement.style.fontSize = '11px';
-              ghostElement.style.lineHeight = '20px';
-              ghostElement.style.borderRadius = '12px';
-              ghostElement.style.position = 'absolute';
-              ghostElement.style.pointerEvents = 'none';
-              ghostElement.style.top = '-9999px';
-              ghostElement.textContent = `Multiple Panels (${this.group.size})`;
+              const createGhost = this.accessor.options.createGroupDragGhostComponent;
+              let ghostElement;
+              let customRenderer;
+              if (createGhost) {
+                  customRenderer = createGhost(this.group);
+                  customRenderer.init({
+                      group: this.group,
+                      api: this.accessor.api,
+                  });
+                  ghostElement = customRenderer.element;
+                  ghostElement.style.position = 'absolute';
+                  ghostElement.style.pointerEvents = 'none';
+                  ghostElement.style.top = '-9999px';
+              }
+              else {
+                  ghostElement = document.createElement('div');
+                  ghostElement.style.backgroundColor = bgColor;
+                  ghostElement.style.color = color;
+                  ghostElement.style.padding = '2px 8px';
+                  ghostElement.style.height = '24px';
+                  ghostElement.style.fontSize = '11px';
+                  ghostElement.style.lineHeight = '20px';
+                  ghostElement.style.borderRadius = '12px';
+                  ghostElement.style.position = 'absolute';
+                  ghostElement.style.pointerEvents = 'none';
+                  ghostElement.style.top = '-9999px';
+                  ghostElement.textContent = `Multiple Panels (${this.group.size})`;
+              }
               addGhostImage(dataTransfer, ghostElement, { y: -10, x: 30 });
+              if (customRenderer === null || customRenderer === void 0 ? void 0 : customRenderer.dispose) {
+                  // addGhostImage removes the element from the DOM on the next
+                  // tick; dispose the framework renderer on the same schedule.
+                  const renderer = customRenderer;
+                  setTimeout(() => { var _a; return (_a = renderer.dispose) === null || _a === void 0 ? void 0 : _a.call(renderer); }, 0);
+              }
           }
           return {
               dispose: () => {
@@ -5568,6 +5601,12 @@
           this.dropTarget = new Droptarget(this._element, {
               acceptedTargetZones: ['center'],
               canDisplayOverlay: (event, position) => {
+                  if (this.group.api.locked) {
+                      // Dropping on the void/header space adds the panel
+                      // to this group, which `locked` is meant to prevent
+                      // (both `true` and `'no-drop-target'`).
+                      return false;
+                  }
                   const data = getPanelData();
                   if (data && this.accessor.id === data.viewId) {
                       return true;
@@ -6149,7 +6188,7 @@
           let svg = underline.firstElementChild;
           let path;
           if (!svg || svg.tagName !== 'svg') {
-              underline.innerHTML = '';
+              underline.replaceChildren();
               svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
               svg.style.display = 'block';
               path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
@@ -6247,7 +6286,7 @@
           underline.style.display = '';
           // Clear any SVG content left over from a mode switch
           if (underline.firstElementChild) {
-              underline.innerHTML = '';
+              underline.replaceChildren();
           }
           underline.style.backgroundColor = color;
           if (isVertical) {
@@ -7640,11 +7679,15 @@
                   if (!isInsideRange && !isJustBeforeGroup) {
                       continue;
                   }
-                  if (isGroupDrag) {
+                  if (isGroupDrag && isInsideRange) {
                       // A group cannot be dropped inside another group.
                       // Snap the insertion index to just before or just
                       // after this group based on cursor position relative
-                      // to the group's midpoint.
+                      // to the group's midpoint. Only applies when the
+                      // insertion would land *inside* the group — for
+                      // `isJustBeforeGroup`, the index is already outside
+                      // (immediately left of the group) and is a valid
+                      // drop position, so leave it untouched (issue #1264).
                       const groupMid = (firstIdx + lastIdx + 1) / 2;
                       if (insertionIndex < groupMid) {
                           insertionIndex = firstIdx;
@@ -7655,6 +7698,12 @@
                       // targetTabGroupId stays null
                       break;
                   }
+                  if (isGroupDrag && isJustBeforeGroup) {
+                      // Cursor is just before the group — accept this
+                      // index as-is. Groups can be dropped at the slot
+                      // immediately left of another group's first tab.
+                      break;
+                  }
                   if (isJustBeforeGroup) {
                       // Check whether only the source tab (or source group
                       // tabs) sits between insertionIndex and firstIdx.
@@ -8496,6 +8545,7 @@
           disableFloatingGroups: undefined,
           floatingGroupBounds: undefined,
           popoutUrl: undefined,
+          nonce: undefined,
           defaultRenderer: undefined,
           defaultHeaderPosition: undefined,
           debug: undefined,
@@ -8511,6 +8561,7 @@
           getTabContextMenuItems: undefined,
           getTabGroupChipContextMenuItems: undefined,
           createTabGroupChipComponent: undefined,
+          createGroupDragGhostComponent: undefined,
           tabGroupColors: undefined,
           tabGroupAccent: undefined,
       };
@@ -9203,6 +9254,15 @@
       refreshTabGroupAccent() {
           this.tabsContainer.refreshTabGroupAccent();
       }
+      refreshWatermark() {
+          var _a, _b;
+          if (this.watermark) {
+              this.watermark.element.remove();
+              (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+              this.watermark = undefined;
+          }
+          this.updateContainer();
+      }
       getTabGroupForPanel(panelId) {
           return this._findTabGroupForPanel(panelId);
       }
@@ -10033,6 +10093,18 @@
           }
           return this._group.model.location;
       }
+      get locked() {
+          if (!this._group) {
+              throw new Error(NOT_INITIALIZED_MESSAGE);
+          }
+          return this._group.locked;
+      }
+      set locked(value) {
+          if (!this._group) {
+              throw new Error(NOT_INITIALIZED_MESSAGE);
+          }
+          this._group.locked = value;
+      }
       constructor(id, accessor) {
           super(id, '__dockviewgroup__');
           this.accessor = accessor;
@@ -10623,6 +10695,11 @@
           const didTitleChange = title !== this.title;
           if (didTitleChange) {
               this._title = title;
+              // keep the view-model's cached init params in sync so that tab
+              // renderers constructed lazily (e.g. the header overflow
+              // dropdown via createTabRenderer) see the updated title
+              // (#914).
+              this.view.setTitle(title);
               this.api._onDidTitleChange.fire({ title });
           }
       }
@@ -10783,6 +10860,14 @@
           this.content.init(params);
           this.tab.init(Object.assign(Object.assign({}, params), { tabLocation: 'header' }));
       }
+      setTitle(title) {
+          // keep the cached init params in sync so that tab renderers created
+          // lazily after the title changes (e.g. for the header overflow
+          // dropdown) see the current title rather than the stale original.
+          if (this._params) {
+              this._params.title = title;
+          }
+      }
       layout(width, height) {
           var _a, _b;
           (_b = (_a = this.content).layout) === null || _b === void 0 ? void 0 : _b.call(_a, width, height);
@@ -11702,7 +11787,9 @@
                           const externalDocument = externalWindow.document;
                           externalDocument.title = document.title;
                           externalDocument.body.appendChild(container);
-                          addStyles(externalDocument, window.document.styleSheets);
+                          addStyles(externalDocument, window.document.styleSheets, {
+                              nonce: this.options.nonce,
+                          });
                           /**
                            * beforeunload must be registered after load for reasons I could not determine
                            * otherwise the beforeunload event will not fire when the window is closed
@@ -12892,6 +12979,7 @@
           this._floatingGroups = [];
           this._popoutGroups = [];
           this._popoutRestorationPromise = Promise.resolve();
+          this._popoutRestorationCleanups = new Set();
           this._onDidRemoveGroup = new Emitter();
           this.onDidRemoveGroup = this._onDidRemoveGroup.event;
           this._onDidAddGroup = new Emitter();
@@ -12997,6 +13085,14 @@
               this._bufferOnDidLayoutChange.fire();
           }), exports.DockviewDisposable.from(() => {
               var _a;
+              // 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 (const cleanup of [...this._popoutRestorationCleanups]) {
+                  cleanup();
+              }
+              this._popoutRestorationCleanups.clear();
               // iterate over a copy of the array since .dispose() mutates the original array
               for (const group of [...this._floatingGroups]) {
                   group.dispose();
@@ -13093,7 +13189,7 @@
           return (_a = this._popoutPopupServices.get(group.id)) !== null && _a !== void 0 ? _a : this.popupService;
       }
       addPopoutGroup(itemToPopout, options) {
-          var _a, _b, _c, _d, _e;
+          var _a, _b, _c, _d, _e, _f;
           if (itemToPopout instanceof DockviewGroupPanel &&
               itemToPopout.model.location.type === 'edge') {
               // edge groups are permanent structural elements and cannot be popped out
@@ -13128,6 +13224,7 @@
               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,
           });
           const popoutWindowDisposable = new CompositeDisposable(_window, _window.onDidClose(() => {
               popoutWindowDisposable.dispose();
@@ -13545,7 +13642,7 @@
           }
       }
       updateOptions(options) {
-          var _a, _b, _c;
+          var _a, _b, _c, _d, _e;
           super.updateOptions(options);
           if ('floatingGroupBounds' in options) {
               for (const group of this._floatingGroups) {
@@ -13586,8 +13683,19 @@
                   group.model.updateHeaderActions();
               }
           }
+          if ('createWatermarkComponent' in options) {
+              if (this._watermark) {
+                  this._watermark.element.parentElement.remove();
+                  (_d = (_c = this._watermark).dispose) === null || _d === void 0 ? void 0 : _d.call(_c);
+                  this._watermark = null;
+              }
+              this.updateWatermark();
+              for (const group of this.groups) {
+                  group.model.refreshWatermark();
+              }
+          }
           if ('tabGroupColors' in options || 'tabGroupAccent' in options) {
-              this._tabGroupColorPalette.setEntries((_c = this._options.tabGroupColors) !== null && _c !== void 0 ? _c : DEFAULT_TAB_GROUP_COLORS);
+              this._tabGroupColorPalette.setEntries((_e = this._options.tabGroupColors) !== null && _e !== void 0 ? _e : DEFAULT_TAB_GROUP_COLORS);
               this._tabGroupColorPalette.enabled =
                   this._options.tabGroupAccent !== 'off';
               for (const group of this.groups) {
@@ -14013,7 +14121,23 @@
                   const group = createGroupFromSerializedState(data);
                   // Add a small delay for each popup after the first to avoid browser popup blocking
                   const popoutPromise = new Promise((resolve) => {
-                      setTimeout(() => {
+                      const cleanup = () => {
+                          this._popoutRestorationCleanups.delete(cleanup);
+                          clearTimeout(handle);
+                          resolve();
+                      };
+                      const handle = setTimeout(() => {
+                          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
@@ -14026,6 +14150,7 @@
                           });
                           resolve();
                       }, index * DESERIALIZATION_POPOUT_DELAY_MS); // 100ms delay between each popup
+                      this._popoutRestorationCleanups.add(cleanup);
                   });
                   popoutPromises.push(popoutPromise);
               });
@@ -14556,8 +14681,11 @@
                        * 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
                        */
                       const popoutGroup = this._popoutGroups.find((group) => group.popoutGroup === sourceGroup);
                       const removedPanel = this.movingLock(() => popoutGroup.popoutGroup.model.removePanel(popoutGroup.popoutGroup.panels[0], {
@@ -14565,7 +14693,8 @@
                           skipSetActiveGroup: true,
                       }));
                       this.doRemoveGroup(sourceGroup, { skipActive: true });
-                      const newGroup = this.createGroupAtLocation(targetLocation);
+                      const updatedTargetLocation = getRelativeLocation(this.gridview.orientation, getGridLocation(destinationGroup.element), destinationTarget);
+                      const newGroup = this.createGroupAtLocation(updatedTargetLocation);
                       this.movingLock(() => newGroup.model.openPanel(removedPanel, {
                           skipSetActive: true,
                       }));