dockview-react 8.0.0 → 8.2.0

package/dist/dockview-react.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 8.0.0
+ * @version 8.2.0
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -51,12 +51,14 @@ react_dom = __toESM(react_dom);
 //#region ../dockview-core/dist/package/main.esm.mjs
 /**
 	* dockview-core
-	* @version 8.0.0
+	* @version 8.2.0
 	* @link https://github.com/dockview/dockview
 	* @license MIT
 	*/
 	var _LocalSelectionTransfer;
-	var TransferObject = class {};
+	var TransferObject = class {
+		constructor() {}
+	};
 	var PanelTransfer = class extends TransferObject {
 		constructor(viewId, groupId, panelId, tabGroupId) {
 			super();
@@ -243,7 +245,6 @@ react_dom = __toESM(react_dom);
 			this.options = options;
 			this._listeners = [];
 			this._disposed = false;
-			this._pauseTokens = /* @__PURE__ */ new Set();
 		}
 		get event() {
 			if (!this._event) {
@@ -264,14 +265,26 @@ react_dom = __toESM(react_dom);
 		}
 		fire(e) {
 			var _this$options2;
-			if (this._pauseTokens.size > 0) return;
+			if (this._pauseTokens !== void 0 && this._pauseTokens.size > 0) return;
 			if ((_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.replay) this._last = e;
-			for (const listener of this._listeners.slice()) listener.callback(e);
+			const listeners = this._listeners;
+			const length = listeners.length;
+			if (length === 0) return;
+			if (length === 1) {
+				listeners[0].callback(e);
+				return;
+			}
+			for (const listener of listeners.slice()) listener.callback(e);
 		}
 		pause() {
+			var _this$_pauseTokens;
 			const token = {};
+			(_this$_pauseTokens = this._pauseTokens) !== null && _this$_pauseTokens !== void 0 || (this._pauseTokens = /* @__PURE__ */ new Set());
 			this._pauseTokens.add(token);
-			return Disposable.from(() => this._pauseTokens.delete(token));
+			return Disposable.from(() => {
+				var _this$_pauseTokens2;
+				return (_this$_pauseTokens2 = this._pauseTokens) === null || _this$_pauseTokens2 === void 0 ? void 0 : _this$_pauseTokens2.delete(token);
+			});
 		}
 		dispose() {
 			if (!this._disposed) {
@@ -571,8 +584,10 @@ react_dom = __toESM(react_dom);
 		let previousScreenX = window.screenX;
 		let previousScreenY = window.screenY;
 		let timeout;
+		let rafHandle = 0;
+		let stopped = false;
 		const checkMovement = () => {
-			if (window.closed) return;
+			if (stopped || window.closed) return;
 			const currentScreenX = window.screenX;
 			const currentScreenY = window.screenY;
 			if (currentScreenX !== previousScreenX || currentScreenY !== previousScreenY) {
@@ -583,9 +598,18 @@ react_dom = __toESM(react_dom);
 				previousScreenX = currentScreenX;
 				previousScreenY = currentScreenY;
 			}
-			requestAnimationFrame(checkMovement);
+			rafHandle = requestAnimationFrame(checkMovement);
 		};
 		checkMovement();
+		const disposeEmitter = emitter.dispose.bind(emitter);
+		emitter.dispose = () => {
+			if (!stopped) {
+				stopped = true;
+				cancelAnimationFrame(rafHandle);
+				clearTimeout(timeout);
+			}
+			disposeEmitter();
+		};
 		return emitter;
 	}
 	function onDidWindowResizeEnd(element, cb) {
@@ -712,6 +736,11 @@ react_dom = __toESM(react_dom);
 		set size(size) {
 			this._size = size;
 		}
+		setContainerGeometry(prop, value) {
+			if (this._appliedStyles[prop] === value) return;
+			this._appliedStyles[prop] = value;
+			this.container.style[prop] = value;
+		}
 		get size() {
 			return this._size;
 		}
@@ -747,6 +776,7 @@ react_dom = __toESM(react_dom);
 			this.view = view;
 			this.disposable = disposable;
 			this._cachedVisibleSize = void 0;
+			this._appliedStyles = {};
 			if (typeof size === "number") {
 				this._size = size;
 				this._cachedVisibleSize = void 0;
@@ -792,6 +822,16 @@ react_dom = __toESM(react_dom);
 		LayoutPriority["Normal"] = "normal";
 		return LayoutPriority;
 	}({});
+	function setSashPosition(sash, left, top) {
+		if (sash.appliedLeft !== left) {
+			sash.appliedLeft = left;
+			sash.container.style.left = left;
+		}
+		if (sash.appliedTop !== top) {
+			sash.appliedTop = top;
+			sash.container.style.top = top;
+		}
+	}
 	let Sizing;
 	(function(_Sizing) {
 		_Sizing.Distribute = { type: "distribute" };
@@ -910,10 +950,6 @@ react_dom = __toESM(react_dom);
 					pushToEnd(upIndexes, i);
 					pushToEnd(downIndexes, i);
 				}
-				const upItems = upIndexes.map((i) => this.viewItems[i]);
-				const upSizes = upIndexes.map((i) => sizes[i]);
-				const downItems = downIndexes.map((i) => this.viewItems[i]);
-				const downSizes = downIndexes.map((i) => sizes[i]);
 				const minDeltaUp = upIndexes.reduce((_, i) => _ + this.viewItems[i].minimumSize - sizes[i], 0);
 				const maxDeltaUp = upIndexes.reduce((_, i) => _ + this.viewItems[i].maximumSize - sizes[i], 0);
 				const maxDeltaDown = downIndexes.length === 0 ? Number.POSITIVE_INFINITY : downIndexes.reduce((_, i) => _ + sizes[i] - this.viewItems[i].minimumSize, 0);
@@ -937,19 +973,21 @@ react_dom = __toESM(react_dom);
 				const tentativeDelta = clamp(delta, minDelta, maxDelta);
 				let actualDelta = 0;
 				let deltaUp = tentativeDelta;
-				for (let i = 0; i < upItems.length; i++) {
-					const item = upItems[i];
-					const size = clamp(upSizes[i] + deltaUp, item.minimumSize, item.maximumSize);
-					const viewDelta = size - upSizes[i];
+				for (const upIndex of upIndexes) {
+					const item = this.viewItems[upIndex];
+					const priorSize = sizes[upIndex];
+					const size = clamp(priorSize + deltaUp, item.minimumSize, item.maximumSize);
+					const viewDelta = size - priorSize;
 					actualDelta += viewDelta;
 					deltaUp -= viewDelta;
 					item.size = size;
 				}
 				let deltaDown = actualDelta;
-				for (let i = 0; i < downItems.length; i++) {
-					const item = downItems[i];
-					const size = clamp(downSizes[i] - deltaDown, item.minimumSize, item.maximumSize);
-					const viewDelta = size - downSizes[i];
+				for (const downIndex of downIndexes) {
+					const item = this.viewItems[downIndex];
+					const priorSize = sizes[downIndex];
+					const size = clamp(priorSize - deltaDown, item.minimumSize, item.maximumSize);
+					const viewDelta = size - priorSize;
 					deltaDown += viewDelta;
 					item.size = size;
 				}
@@ -1197,13 +1235,22 @@ react_dom = __toESM(react_dom);
 			this.saveProportions();
 		}
 		distributeEmptySpace(lowPriorityIndex) {
-			const contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
+			let contentSize = 0;
+			for (const item of this.viewItems) contentSize += item.size;
 			let emptyDelta = this.size - contentSize;
+			if (emptyDelta === 0) return;
 			const indexes = range(this.viewItems.length - 1, -1);
-			const lowPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === "low");
-			const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === "high");
-			for (const index of highPriorityIndexes) pushToStart(indexes, index);
-			for (const index of lowPriorityIndexes) pushToEnd(indexes, index);
+			let hasPriority = false;
+			for (const item of this.viewItems) if (item.priority === "low" || item.priority === "high") {
+				hasPriority = true;
+				break;
+			}
+			if (hasPriority) {
+				const lowPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === "low");
+				const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === "high");
+				for (const index of highPriorityIndexes) pushToStart(indexes, index);
+				for (const index of lowPriorityIndexes) pushToEnd(indexes, index);
+			}
 			if (typeof lowPriorityIndex === "number") pushToEnd(indexes, lowPriorityIndex);
 			for (let i = 0; emptyDelta !== 0 && i < indexes.length; i++) {
 				const item = this.viewItems[indexes[i]];
@@ -1226,49 +1273,45 @@ react_dom = __toESM(react_dom);
 		* For each view `i` the offet must be adjusted by `m * i/(n - 1)`.
 		*/
 		layoutViews() {
-			this._contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
+			let contentSize = 0;
+			let visibleViewCount = 0;
+			for (const item of this.viewItems) {
+				contentSize += item.size;
+				if (item.visible) visibleViewCount++;
+			}
+			this._contentSize = contentSize;
 			this.updateSashEnablement();
 			if (this.viewItems.length === 0) return;
-			const visibleViewItems = this.viewItems.filter((i) => i.visible);
-			const sashCount = Math.max(0, visibleViewItems.length - 1);
-			const marginReducedSize = this.margin * sashCount / Math.max(1, visibleViewItems.length);
+			const sashCount = Math.max(0, visibleViewCount - 1);
+			const marginReducedSize = this.margin * sashCount / Math.max(1, visibleViewCount);
 			let totalLeftOffset = 0;
 			const viewLeftOffsets = [];
 			const sashWidth = 4;
-			const runningVisiblePanelCount = this.viewItems.reduce((arr, viewItem, i) => {
-				const flag = viewItem.visible ? 1 : 0;
-				if (i === 0) arr.push(flag);
-				else arr.push(arr[i - 1] + flag);
-				return arr;
-			}, []);
+			let runningVisiblePanelCount = 0;
 			this.viewItems.forEach((view, i) => {
 				totalLeftOffset += this.viewItems[i].size;
 				viewLeftOffsets.push(totalLeftOffset);
+				runningVisiblePanelCount += view.visible ? 1 : 0;
 				const size = view.visible ? view.size - marginReducedSize : 0;
-				const visiblePanelsBeforeThisView = Math.max(0, runningVisiblePanelCount[i] - 1);
+				const visiblePanelsBeforeThisView = Math.max(0, runningVisiblePanelCount - 1);
 				const offset = i === 0 || visiblePanelsBeforeThisView === 0 ? 0 : viewLeftOffsets[i - 1] + visiblePanelsBeforeThisView / sashCount * marginReducedSize;
 				if (i < this.viewItems.length - 1) {
 					const newSize = view.visible ? offset + size - sashWidth / 2 + this.margin / 2 : offset;
-					if (this._orientation === "HORIZONTAL") {
-						this.sashes[i].container.style.left = `${newSize}px`;
-						this.sashes[i].container.style.top = `0px`;
-					}
-					if (this._orientation === "VERTICAL") {
-						this.sashes[i].container.style.left = `0px`;
-						this.sashes[i].container.style.top = `${newSize}px`;
-					}
+					const sash = this.sashes[i];
+					if (this._orientation === "HORIZONTAL") setSashPosition(sash, `${newSize}px`, `0px`);
+					if (this._orientation === "VERTICAL") setSashPosition(sash, `0px`, `${newSize}px`);
 				}
 				if (this._orientation === "HORIZONTAL") {
-					view.container.style.width = `${size}px`;
-					view.container.style.left = `${offset}px`;
-					view.container.style.top = "";
-					view.container.style.height = "";
+					view.setContainerGeometry("width", `${size}px`);
+					view.setContainerGeometry("left", `${offset}px`);
+					view.setContainerGeometry("top", "");
+					view.setContainerGeometry("height", "");
 				}
 				if (this._orientation === "VERTICAL") {
-					view.container.style.height = `${size}px`;
-					view.container.style.top = `${offset}px`;
-					view.container.style.width = "";
-					view.container.style.left = "";
+					view.setContainerGeometry("height", `${size}px`);
+					view.setContainerGeometry("top", `${offset}px`);
+					view.setContainerGeometry("width", "");
+					view.setContainerGeometry("left", "");
 				}
 				view.view.layout(view.size - marginReducedSize, this._orthogonalSize);
 			});
@@ -1286,6 +1329,7 @@ react_dom = __toESM(react_dom);
 			}
 		}
 		updateSashEnablement() {
+			if (this.sashes.length === 0) return;
 			let previous = false;
 			const collapsesDown = this.viewItems.map((i) => previous = i.size - i.minimumSize > 0 || previous);
 			previous = false;
@@ -1580,10 +1624,20 @@ react_dom = __toESM(react_dom);
 			return this.orientation === "HORIZONTAL" ? this.orthogonalSize : this.size;
 		}
 		get minimumSize() {
-			return this.children.length === 0 ? 0 : Math.max(...this.children.map((c, index) => this.splitview.isViewVisible(index) ? c.minimumOrthogonalSize : 0));
+			if (this._cachedMinimumSize === void 0) {
+				let value = 0;
+				for (let index = 0; index < this.children.length; index++) if (this.splitview.isViewVisible(index)) value = Math.max(value, this.children[index].minimumOrthogonalSize);
+				this._cachedMinimumSize = value;
+			}
+			return this._cachedMinimumSize;
 		}
 		get maximumSize() {
-			return Math.min(...this.children.map((c, index) => this.splitview.isViewVisible(index) ? c.maximumOrthogonalSize : Number.POSITIVE_INFINITY));
+			if (this._cachedMaximumSize === void 0) {
+				let value = Number.POSITIVE_INFINITY;
+				for (let index = 0; index < this.children.length; index++) if (this.splitview.isViewVisible(index)) value = Math.min(value, this.children[index].maximumOrthogonalSize);
+				this._cachedMaximumSize = value;
+			}
+			return this._cachedMaximumSize;
 		}
 		get minimumOrthogonalSize() {
 			return this.splitview.minimumSize;
@@ -1610,15 +1664,29 @@ react_dom = __toESM(react_dom);
 			return this.orientation === "HORIZONTAL" ? this.maximumSize : this.maximumOrthogonalSize;
 		}
 		get priority() {
+			var _this$_cachedPriority;
+			(_this$_cachedPriority = this._cachedPriority) !== null && _this$_cachedPriority !== void 0 || (this._cachedPriority = this.computePriority());
+			return this._cachedPriority;
+		}
+		computePriority() {
 			if (this.children.length === 0) return "normal";
-			const priorities = new Set(this.children.map((c) => {
-				var _c$priority;
-				return (_c$priority = c.priority) !== null && _c$priority !== void 0 ? _c$priority : "normal";
-			}));
-			if (priorities.has("high")) return "high";
-			else if (priorities.has("low")) return "low";
+			let hasHigh = false;
+			let hasLow = false;
+			for (const child of this.children) {
+				var _child$priority;
+				const priority = (_child$priority = child.priority) !== null && _child$priority !== void 0 ? _child$priority : "normal";
+				if (priority === "high") hasHigh = true;
+				else if (priority === "low") hasLow = true;
+			}
+			if (hasHigh) return "high";
+			else if (hasLow) return "low";
 			return "normal";
 		}
+		invalidateCachedSizes() {
+			this._cachedMinimumSize = void 0;
+			this._cachedMaximumSize = void 0;
+			this._cachedPriority = void 0;
+		}
 		get disabled() {
 			return this.splitview.disabled;
 		}
@@ -1694,6 +1762,7 @@ react_dom = __toESM(react_dom);
 			if (this.splitview.isViewVisible(index) === visible) return;
 			const wereAllChildrenHidden = this.splitview.contentSize === 0;
 			this.splitview.setViewVisible(index, visible);
+			this.invalidateCachedSizes();
 			const areAllChildrenHidden = this.splitview.contentSize === 0;
 			if (visible && wereAllChildrenHidden || !visible && areAllChildrenHidden) this._onDidVisibilityChange.fire({ visible });
 		}
@@ -1742,12 +1811,14 @@ react_dom = __toESM(react_dom);
 			return child;
 		}
 		setupChildrenEvents() {
+			this.invalidateCachedSizes();
 			this._childrenDisposable.dispose();
 			this._childrenDisposable = new CompositeDisposable(Event.any(...this.children.map((c) => c.onDidChange))((e) => {
 				/**
 				* indicate a change has occured to allows any re-rendering but don't bubble
 				* event because that was specific to this branch
 				*/
+				this.invalidateCachedSizes();
 				this._onDidChange.fire({ size: e.orthogonalSize });
 			}), ...this.children.map((c, i) => {
 				if (c instanceof BranchNode) return c.onDidVisibilityChange(({ visible }) => {
@@ -3391,7 +3462,7 @@ react_dom = __toESM(react_dom);
 		* Add a group and return the created object.
 		*/
 		addGroup(options) {
-			return this.component.addGroup(options);
+			return this.component.withOrigin("api", () => this.component.addGroup(options));
 		}
 		/**
 		* Close all groups and panels.
@@ -3529,13 +3600,13 @@ react_dom = __toESM(react_dom);
 			this.activatePrevious(options);
 		}
 		maximizeGroup(panel) {
-			this.component.maximizeGroup(panel.group);
+			this.component.withOrigin("api", () => this.component.maximizeGroup(panel.group));
 		}
 		hasMaximizedGroup() {
 			return this.component.hasMaximizedGroup();
 		}
 		exitMaximizedGroup() {
-			this.component.exitMaximizedGroup();
+			this.component.withOrigin("api", () => this.component.exitMaximizedGroup());
 		}
 		get onDidMaximizedGroupChange() {
 			return this.component.onDidMaximizedGroupChange;
@@ -5439,9 +5510,6 @@ react_dom = __toESM(react_dom);
 			const doRender = ((_options$asActive = options === null || options === void 0 ? void 0 : options.asActive) !== null && _options$asActive !== void 0 ? _options$asActive : true) || this.panel && this.group.isPanelActive(this.panel);
 			if (((_this$panel = this.panel) === null || _this$panel === void 0 ? void 0 : _this$panel.view.content.element.parentElement) === this._element) {
 				var _this$panel$view$cont, _this$panel$view$cont2;
-				/**
-				* If the currently attached panel is mounted directly to the content then remove it
-				*/
 				this.panel.view.content.element.remove();
 				(_this$panel$view$cont = (_this$panel$view$cont2 = this.panel.view.content).onHide) === null || _this$panel$view$cont === void 0 || _this$panel$view$cont.call(_this$panel$view$cont2);
 			}
@@ -6157,7 +6225,7 @@ react_dom = __toESM(react_dom);
 			this.element.appendChild(this._scrollbar);
 			this.addDisposables(addDisposableListener(this.element, "wheel", (event) => {
 				this._scrollOffset += event.deltaY * Scrollbar.MouseWheelSpeed;
-				this.calculateScrollbarStyles();
+				this.scheduleStyleUpdate();
 			}), addDisposableListener(this._scrollbar, "pointerdown", (event) => {
 				var _this$_scrollbar$owne;
 				event.preventDefault();
@@ -6169,7 +6237,7 @@ react_dom = __toESM(react_dom);
 					const delta = this._orientation === "horizontal" ? event.clientX - originalClient : event.clientY - originalClient;
 					const p = (this._orientation === "horizontal" ? this.element.clientWidth : this.element.clientHeight) / (this._orientation === "horizontal" ? this.scrollableElement.scrollWidth : this.scrollableElement.scrollHeight);
 					this._scrollOffset = originalScrollOffset + delta / p;
-					this.calculateScrollbarStyles();
+					this.scheduleStyleUpdate();
 				};
 				const onEnd = () => {
 					toggleClass(this.element, "dv-scrollable-scrolling", false);
@@ -6181,10 +6249,10 @@ react_dom = __toESM(react_dom);
 				doc.addEventListener("pointerup", onEnd);
 				doc.addEventListener("pointercancel", onEnd);
 			}), addDisposableListener(this.element, "scroll", () => {
-				this.calculateScrollbarStyles();
+				this.scheduleStyleUpdate();
 			}), addDisposableListener(this.scrollableElement, "scroll", () => {
 				this._scrollOffset = this._orientation === "horizontal" ? this.scrollableElement.scrollLeft : this.scrollableElement.scrollTop;
-				this.calculateScrollbarStyles();
+				this.scheduleStyleUpdate();
 			}), watchElementResize(this.element, () => {
 				toggleClass(this.element, "dv-scrollable-resizing", true);
 				if (this._animationTimer) clearTimeout(this._animationTimer);
@@ -6192,9 +6260,29 @@ react_dom = __toESM(react_dom);
 					clearTimeout(this._animationTimer);
 					toggleClass(this.element, "dv-scrollable-resizing", false);
 				}, 500);
-				this.calculateScrollbarStyles();
+				this.scheduleStyleUpdate();
+			}), Disposable.from(() => {
+				if (this._pendingStyleFrame !== void 0) {
+					cancelAnimationFrame(this._pendingStyleFrame);
+					this._pendingStyleFrame = void 0;
+				}
 			}));
 		}
+		/**
+		* Coalesce the scrollbar restyle to one pass per animation frame. The
+		* wheel / scroll / pointermove handlers can each fire many times per frame,
+		* and `calculateScrollbarStyles` both reads layout (`clientWidth`/
+		* `scrollWidth`) and writes styles + `scrollLeft`/`scrollTop`; running it
+		* synchronously per event caused repeated read→write→read reflow. Batching
+		* to a frame keeps a burst of events to a single measure+write.
+		*/
+		scheduleStyleUpdate() {
+			if (this._pendingStyleFrame !== void 0) return;
+			this._pendingStyleFrame = requestAnimationFrame(() => {
+				this._pendingStyleFrame = void 0;
+				this.calculateScrollbarStyles();
+			});
+		}
 		calculateScrollbarStyles() {
 			const clientSize = this._orientation === "horizontal" ? this.element.clientWidth : this.element.clientHeight;
 			const scrollSize = this._orientation === "horizontal" ? this.scrollableElement.scrollWidth : this.scrollableElement.scrollHeight;
@@ -8634,8 +8722,8 @@ react_dom = __toESM(react_dom);
 			}, true), addDisposableListener(this._tabsList, "dragend", () => {
 				this._reorder.resetDragAnimation();
 			}), addDisposableListener(this._tabsList, "drop", (event) => {
-				var _this$accessor$option, _this$group$model$dro;
-				if (!this._animState || this._animState.currentInsertionIndex === null) return;
+				var _this$_animState3, _this$accessor$option, _this$group$model$dro;
+				if (((_this$_animState3 = this._animState) === null || _this$_animState3 === void 0 ? void 0 : _this$_animState3.currentInsertionIndex) == null) return;
 				if (((_this$accessor$option = this.accessor.options.theme) === null || _this$accessor$option === void 0 ? void 0 : _this$accessor$option.tabAnimation) !== "smooth" && !this._animState.sourceTabGroupId) return;
 				event.stopPropagation();
 				event.preventDefault();
@@ -8840,7 +8928,7 @@ react_dom = __toESM(react_dom);
 						};
 						this._pendingCollapse = true;
 						requestAnimationFrame(() => {
-							var _this$_animState3, _this$_animState3$cur;
+							var _this$_animState4, _this$_animState4$cur;
 							this._pendingCollapse = false;
 							if (!this._animState) return;
 							if (!this._tabsList.classList.contains("dv-tabs-container--wrap")) {
@@ -8848,7 +8936,7 @@ react_dom = __toESM(react_dom);
 								toggleClass(tab.element, "dv-tab--dragging", true);
 								tab.element.offsetHeight;
 							}
-							(_this$_animState3$cur = (_this$_animState3 = this._animState).currentInsertionIndex) !== null && _this$_animState3$cur !== void 0 || (_this$_animState3.currentInsertionIndex = sourceIndex);
+							(_this$_animState4$cur = (_this$_animState4 = this._animState).currentInsertionIndex) !== null && _this$_animState4$cur !== void 0 || (_this$_animState4.currentInsertionIndex = sourceIndex);
 							this.applyDragOverTransforms(true);
 							tab.element.style.removeProperty("transition");
 						});
@@ -8937,8 +9025,8 @@ react_dom = __toESM(react_dom);
 			}
 		}
 		delete(id) {
-			var _this$_animState4;
-			if (((_this$_animState4 = this._animState) === null || _this$_animState4 === void 0 ? void 0 : _this$_animState4.sourceTabId) === id) {
+			var _this$_animState5;
+			if (((_this$_animState5 = this._animState) === null || _this$_animState5 === void 0 ? void 0 : _this$_animState5.sourceTabId) === id) {
 				this.resetTabTransforms();
 				this._animState = null;
 			}
@@ -9055,7 +9143,7 @@ react_dom = __toESM(react_dom);
 			const groupPanelIds = new Set(tabGroup.panelIds);
 			this._pendingCollapse = true;
 			requestAnimationFrame(() => {
-				var _this$_animState5, _this$_animState5$cur;
+				var _this$_animState6, _this$_animState6$cur;
 				this._pendingCollapse = false;
 				if (!this._animState) return;
 				for (const t of this._tabs) if (groupPanelIds.has(t.value.panel.id)) {
@@ -9070,7 +9158,7 @@ react_dom = __toESM(react_dom);
 				this._tabsList.offsetHeight;
 				const underline = this._tabGroupManager.groupUnderlines.get(tabGroup.id);
 				if (underline) underline.style.display = "none";
-				(_this$_animState5$cur = (_this$_animState5 = this._animState).currentInsertionIndex) !== null && _this$_animState5$cur !== void 0 || (_this$_animState5.currentInsertionIndex = firstIdx);
+				(_this$_animState6$cur = (_this$_animState6 = this._animState).currentInsertionIndex) !== null && _this$_animState6$cur !== void 0 || (_this$_animState6.currentInsertionIndex = firstIdx);
 				this.applyDragOverTransforms(true);
 				for (const t of this._tabs) if (groupPanelIds.has(t.value.panel.id)) t.value.element.style.removeProperty("transition");
 				if (chipEntry) chipEntry.chip.element.style.removeProperty("transition");
@@ -9793,6 +9881,7 @@ react_dom = __toESM(react_dom);
 		set headerPosition(value) {
 			var _this$_activePanel;
 			this._headerPosition = value;
+			this.invalidateHeaderSize();
 			removeClasses(this.container, "dv-groupview-header-top", "dv-groupview-header-bottom", "dv-groupview-header-left", "dv-groupview-header-right");
 			addClasses(this.container, `dv-groupview-header-${value}`);
 			const direction = value === "top" || value === "bottom" ? "horizontal" : "vertical";
@@ -9934,7 +10023,14 @@ react_dom = __toESM(react_dom);
 			this.header.hidden = !!options.hideHeader;
 			this.locked = (_options$locked = options.locked) !== null && _options$locked !== void 0 ? _options$locked : false;
 			this.headerPosition = (_options$headerPositi = options.headerPosition) !== null && _options$headerPositi !== void 0 ? _options$headerPositi : accessor.defaultHeaderPosition;
-			this.addDisposables(this._onDidPanelTitleChange.event(() => this.updateAccessibleLabel()), this._onTabDragStart, this._onGroupDragStart, this._onWillShowOverlay, this.tabsContainer.onTabDragStart((event) => {
+			this.addDisposables(watchElementResize(this.tabsContainer.element, () => {
+				if (this.isDisposed) return;
+				const size = this.measureHeaderSize();
+				if (size !== this._cachedHeaderSize) {
+					this._cachedHeaderSize = size;
+					this.layout(this._width, this._height);
+				}
+			}), this._onDidPanelTitleChange.event(() => this.updateAccessibleLabel()), this._onTabDragStart, this._onGroupDragStart, this._onWillShowOverlay, this.tabsContainer.onTabDragStart((event) => {
 				this._onTabDragStart.fire(event);
 			}), this.tabsContainer.onGroupDragStart((event) => {
 				this._onGroupDragStart.fire(event);
@@ -10299,7 +10395,11 @@ react_dom = __toESM(react_dom);
 			this.panels.forEach((panel) => {
 				this.rerender(panel);
 			});
-			if (this._activePanel) this.contentContainer.renderPanel(this._activePanel, { asActive: true });
+			if (this._activePanel) {
+				this.contentContainer.renderPanel(this._activePanel, { asActive: true });
+				const { width, height } = this.contentDimensions();
+				this._activePanel.layout(width, height);
+			}
 		}
 		get renderContainer() {
 			var _this$_overwriteRende;
@@ -10391,16 +10491,11 @@ react_dom = __toESM(react_dom);
 			(_this$_activePanel3 = this._activePanel) === null || _this$_activePanel3 === void 0 || _this$_activePanel3.focus();
 		}
 		openPanel(panel, options = {}) {
-			/**
-			* set the panel group
-			* add the panel
-			* check if group active
-			* check if panel active
-			*/
 			if (typeof options.index !== "number" || options.index > this.panels.length) options.index = this.panels.length;
 			const skipSetActive = !!options.skipSetActive;
 			panel.updateParentGroup(this.groupPanel, { skipSetActive: options.skipSetActive });
 			this.doAddPanel(panel, options.index, { skipSetActive });
+			this.invalidateHeaderSize();
 			if (this._activePanel === panel) {
 				this.contentContainer.renderPanel(panel, { asActive: true });
 				return;
@@ -10463,6 +10558,7 @@ react_dom = __toESM(react_dom);
 		* changing) down to the content + active panel.
 		*/
 		relayout() {
+			this.invalidateHeaderSize();
 			this.layout(this._width, this._height);
 		}
 		/**
@@ -10472,17 +10568,32 @@ react_dom = __toESM(react_dom);
 		* width); a hidden header has `display:none` so its `offset*` is 0 and
 		* nothing is subtracted.
 		*/
-		contentDimensions() {
+		/**
+		* Measure the header's extent along its occupied axis. This is the single
+		* forced-reflow read; it now runs only on a cache miss (first layout after
+		* a header change) and inside the header's ResizeObserver — not on every
+		* layout frame.
+		*/
+		measureHeaderSize() {
 			const headerEl = this.tabsContainer.element;
+			return this.headerPosition === "top" || this.headerPosition === "bottom" ? headerEl.offsetHeight : headerEl.offsetWidth;
+		}
+		invalidateHeaderSize() {
+			this._cachedHeaderSize = void 0;
+		}
+		contentDimensions() {
+			var _this$_cachedHeaderSi;
 			const horizontal = this.headerPosition === "top" || this.headerPosition === "bottom";
+			const headerSize = (_this$_cachedHeaderSi = this._cachedHeaderSize) !== null && _this$_cachedHeaderSi !== void 0 ? _this$_cachedHeaderSi : this._cachedHeaderSize = this.measureHeaderSize();
 			return {
-				width: horizontal ? this._width : Math.max(0, this._width - headerEl.offsetWidth),
-				height: horizontal ? Math.max(0, this._height - headerEl.offsetHeight) : this._height
+				width: horizontal ? this._width : Math.max(0, this._width - headerSize),
+				height: horizontal ? Math.max(0, this._height - headerSize) : this._height
 			};
 		}
 		_removePanel(panel, options) {
 			const isActivePanel = this._activePanel === panel;
 			this.doRemovePanel(panel);
+			this.invalidateHeaderSize();
 			if (isActivePanel && this.panels.length > 0) {
 				const nextPanel = this.mostRecentlyUsed[0];
 				this.openPanel(nextPanel, {
@@ -10802,6 +10913,7 @@ react_dom = __toESM(react_dom);
 				if (typeof event.minimumHeight === "number" || typeof event.minimumHeight === "function") this._minimumHeight = event.minimumHeight;
 				if (typeof event.maximumWidth === "number" || typeof event.maximumWidth === "function") this._maximumWidth = event.maximumWidth;
 				if (typeof event.maximumHeight === "number" || typeof event.maximumHeight === "function") this._maximumHeight = event.maximumHeight;
+				this._onDidChange.fire(void 0);
 			}), this.api.onDidSizeChange((event) => {
 				this._onDidChange.fire({
 					height: event.height,
@@ -10918,20 +11030,22 @@ react_dom = __toESM(react_dom);
 			return this._group.model.headerPosition;
 		}
 		moveTo(options) {
-			var _options$group, _options$position, _options$skipSetActiv, _options$position2;
 			if (!this._group) throw new Error(NOT_INITIALIZED_MESSAGE);
-			const group = (_options$group = options.group) !== null && _options$group !== void 0 ? _options$group : this.accessor.addGroup({
-				direction: positionToDirection((_options$position = options.position) !== null && _options$position !== void 0 ? _options$position : "right"),
-				skipSetActive: (_options$skipSetActiv = options.skipSetActive) !== null && _options$skipSetActiv !== void 0 ? _options$skipSetActiv : false
-			});
-			this.accessor.moveGroupOrPanel({
-				from: { groupId: this._group.id },
-				to: {
-					group,
-					position: options.group ? (_options$position2 = options.position) !== null && _options$position2 !== void 0 ? _options$position2 : "center" : "center",
-					index: options.index
-				},
-				skipSetActive: options.skipSetActive
+			this.accessor.withOrigin("api", () => {
+				var _options$group, _options$position, _options$skipSetActiv, _options$position2;
+				const group = (_options$group = options.group) !== null && _options$group !== void 0 ? _options$group : this.accessor.addGroup({
+					direction: positionToDirection((_options$position = options.position) !== null && _options$position !== void 0 ? _options$position : "right"),
+					skipSetActive: (_options$skipSetActiv = options.skipSetActive) !== null && _options$skipSetActiv !== void 0 ? _options$skipSetActiv : false
+				});
+				this.accessor.moveGroupOrPanel({
+					from: { groupId: this._group.id },
+					to: {
+						group,
+						position: options.group ? (_options$position2 = options.position) !== null && _options$position2 !== void 0 ? _options$position2 : "center" : "center",
+						index: options.index
+					},
+					skipSetActive: options.skipSetActive
+				});
 			});
 		}
 		maximize() {
@@ -11232,7 +11346,7 @@ react_dom = __toESM(react_dom);
 				this._group = value;
 				this._onDidGroupChange.fire({});
 				this.setupGroupEventListeners(oldGroup);
-				this._onDidLocationChange.fire({ location: this.group.api.location });
+				this.fireLocationChange();
 			}
 		}
 		get group() {
@@ -11271,18 +11385,20 @@ react_dom = __toESM(react_dom);
 			this.accessor.withOrigin("api", () => super.setActive());
 		}
 		moveTo(options) {
-			var _options$group, _options$position;
-			this.accessor.moveGroupOrPanel({
-				from: {
-					groupId: this._group.id,
-					panelId: this.panel.id
-				},
-				to: {
-					group: (_options$group = options.group) !== null && _options$group !== void 0 ? _options$group : this._group,
-					position: options.group ? (_options$position = options.position) !== null && _options$position !== void 0 ? _options$position : "center" : "center",
-					index: options.index
-				},
-				skipSetActive: options.skipSetActive
+			this.accessor.withOrigin("api", () => {
+				var _options$group, _options$position;
+				return this.accessor.moveGroupOrPanel({
+					from: {
+						groupId: this._group.id,
+						panelId: this.panel.id
+					},
+					to: {
+						group: (_options$group = options.group) !== null && _options$group !== void 0 ? _options$group : this._group,
+						position: options.group ? (_options$position = options.position) !== null && _options$position !== void 0 ? _options$position : "center" : "center",
+						index: options.index
+					},
+					skipSetActive: options.skipSetActive
+				});
 			});
 		}
 		setTitle(title) {
@@ -11306,6 +11422,23 @@ react_dom = __toESM(react_dom);
 		exitMaximized() {
 			this.group.api.exitMaximized();
 		}
+		/**
+		* Report that this panel's location may have moved.
+		*
+		* A relocation touches the location more than once - the panel is
+		* reparented into the destination group, then that group is tagged with
+		* the location it ends up at - so the event is coalesced to the end of the
+		* enclosing layout mutation and reports where the panel actually settled.
+		* Firing each signal as it happened surfaced an intermediate `grid`
+		* location the panel was never in, at a point where it was in neither
+		* group's panel list. Outside a mutation this fires straight away.
+		*/
+		fireLocationChange() {
+			this.accessor.deferLocationChange(this, () => {
+				if (this.isDisposed) return;
+				this._onDidLocationChange.fire({ location: this.location });
+			});
+		}
 		setupGroupEventListeners(previousGroup) {
 			var _previousGroup$isActi;
 			let _trackGroupActive = (_previousGroup$isActi = previousGroup === null || previousGroup === void 0 ? void 0 : previousGroup.isActive) !== null && _previousGroup$isActi !== void 0 ? _previousGroup$isActi : false;
@@ -11314,9 +11447,9 @@ react_dom = __toESM(react_dom);
 				const hasBecomeVisible = event.isVisible && !this.isVisible;
 				const isActivePanel = this.group.model.isPanelActive(this.panel);
 				if (hasBecomeHidden || hasBecomeVisible && isActivePanel) this._onDidVisibilityChange.fire(event);
-			}), this.group.api.onDidLocationChange((event) => {
+			}), this.group.api.onDidLocationChange(() => {
 				if (this.group !== this.panel.group) return;
-				this._onDidLocationChange.fire(event);
+				this.fireLocationChange();
 			}), this.group.api.onDidActiveChange(() => {
 				if (this.group !== this.panel.group) return;
 				if (_trackGroupActive !== this.isGroupActive) {
@@ -12365,12 +12498,6 @@ react_dom = __toESM(react_dom);
 			moduleName: "ContextMenu",
 			when: (o) => o.getTabGroupChipContextMenuItems != null
 		},
-		{
-			optionKey: "createContextMenuItemComponent",
-			reason: "createContextMenuItemComponent",
-			moduleName: "ContextMenu",
-			when: (o) => o.createContextMenuItemComponent != null
-		},
 		{
 			optionKey: "dndCompass",
 			reason: "dndCompass",
@@ -13072,7 +13199,18 @@ react_dom = __toESM(react_dom);
 				prev = next;
 				const panel = group.activePanel;
 				if (!panel) return;
-				const kind = next === "floating" ? "float" : next === "popout" ? "popout" : "dock";
+				let kind;
+				switch (next) {
+					case "floating":
+						kind = "float";
+						break;
+					case "popout":
+						kind = "popout";
+						break;
+					default:
+						kind = "dock";
+						break;
+				}
 				this._announce(panel, kind);
 			});
 			this._locationSubs.set(group.id, sub);
@@ -13121,29 +13259,14 @@ react_dom = __toESM(react_dom);
 		serviceKey: "liveRegionService",
 		create: (host) => new LiveRegionService(host)
 	});
-	/** Cursor offset of the group drag ghost, matched to the long-shipped default. */
+	/** Cursor offset of the group drag ghost. */
 	const GROUP_DRAG_GHOST_OFFSET_X = 30;
 	const GROUP_DRAG_GHOST_OFFSET_Y = -10;
 	/**
-	* The narrow surface the {@link AdvancedDnDService} needs from the host
-	* (the `DockviewComponent`).
-	*
-	* The `onWill*` emitters stay on the component so the public event shape is
-	* unchanged whether or not this module is registered; the service is only the
-	* dispatch point those fires are routed through. Engine policy (e.g. the
-	* `disableDnd` guard) stays on the component, ahead of the dispatch.
-	*/
-	/**
 	* Owns the dispatch of the advanced drag-and-drop hooks: `onWillDragPanel`,
-	* `onWillDragGroup`, `onWillDrop` and `onWillShowOverlay`.
-	*
-	* At this stage the service is a thin dispatcher that forwards to the host's
-	* emitters; the customisation surface it gates (custom drop overlays, custom
-	* group drag ghosts, hook veto/transform behaviour) is currently inlined in
-	* core and is extracted into this service in later phases. Routing the
-	* dispatch through a module slot is what lets that customisation layer move
-	* into a separately-distributed package in a future major version without
-	* changing the public event surface.
+	* `onWillDragGroup`, `onWillDrop` and `onWillShowOverlay`, forwarding each to
+	* the host's emitters so the public event shape is unchanged whether or not
+	* this module is registered.
 	*
 	* The service holds no drag state of its own. The gesture is driven by the
 	* DnD backends, and the per-group subscriptions live on the component's group
@@ -13260,7 +13383,7 @@ react_dom = __toESM(react_dom);
 	];
 	var PositionCache = class {
 		constructor() {
-			this.cache = /* @__PURE__ */ new Map();
+			this.cache = /* @__PURE__ */ new WeakMap();
 			this.currentFrameId = 0;
 			this.rafId = null;
 		}
@@ -13286,6 +13409,13 @@ react_dom = __toESM(react_dom);
 			});
 		}
 	};
+	/**
+	* Placeholder handle marking "a reposition frame has been requested but the
+	* real handle is not known yet". Never passed to `cancelAnimationFrame` in
+	* practice — it is replaced within the same synchronous block — and harmless
+	* if it were, since no frame carries this id.
+	*/
+	const SCHEDULED = -1;
 	function createFocusableElement() {
 		const element = document.createElement("div");
 		element.tabIndex = -1;
@@ -13298,12 +13428,13 @@ react_dom = __toESM(react_dom);
 			this.accessor = accessor;
 			this.map = {};
 			this._disposed = false;
+			this._generation = 0;
 			this.positionCache = new PositionCache();
-			this.pendingUpdates = /* @__PURE__ */ new Set();
 			this.addDisposables(Disposable.from(() => {
 				for (const value of Object.values(this.map)) {
 					value.disposable.dispose();
 					value.destroy.dispose();
+					this.cancelPendingUpdate(value);
 				}
 				this._disposed = true;
 			}));
@@ -13330,11 +13461,24 @@ react_dom = __toESM(react_dom);
 			this.positionCache.invalidate();
 			(_entry$resize = entry.resize) === null || _entry$resize === void 0 || _entry$resize.call(entry);
 		}
+		/**
+		* Drop the reposition frame queued for a panel, if any. A queued frame is
+		* bound to the reference container that was current when it was scheduled,
+		* so it must be discarded whenever that container stops being the one the
+		* overlay should track.
+		*/
+		cancelPendingUpdate(entry) {
+			if (entry.pendingUpdate !== void 0) {
+				cancelAnimationFrame(entry.pendingUpdate);
+				entry.pendingUpdate = void 0;
+			}
+		}
 		detatch(panel) {
 			if (this.map[panel.api.id]) {
-				const { disposable, destroy } = this.map[panel.api.id];
-				disposable.dispose();
-				destroy.dispose();
+				const entry = this.map[panel.api.id];
+				entry.disposable.dispose();
+				entry.destroy.dispose();
+				this.cancelPendingUpdate(entry);
 				delete this.map[panel.api.id];
 				return true;
 			}
@@ -13350,22 +13494,73 @@ react_dom = __toESM(react_dom);
 					panel,
 					disposable: Disposable.NONE,
 					destroy: Disposable.NONE,
-					element
+					element,
+					retainPreviousGeometry: false,
+					positioned: false,
+					generation: ++this._generation
 				};
 			}
-			const focusContainer = this.map[panel.api.id].element;
+			const mapEntry = this.map[panel.api.id];
+			/**
+			* A *change* of reference container supersedes the previous `attach`:
+			* take a fresh generation so its `resize` closure can no longer run,
+			* and drop the frame it queued against the old container. During
+			* `fromJSON({ reuseExistingPanels: true })` that old container is a
+			* detached staging group measuring 0x0, so leaving its frame in flight
+			* both wastes the update and delays the reposition against the real one.
+			*
+			* Re-attaching over the *same* container (re-open, active panel change)
+			* deliberately leaves scheduled work alone: `repositionPanelOverlay`
+			* (the auto-hide peek) schedules a frame carrying the sticky
+			* `forceVisible`/`clip` state which `attach` does not re-apply, and a
+			* peeked panel's `api.isVisible` is false — so discarding that frame
+			* leaves `visibilityChanged` to hide the overlay and the peek renders
+			* nothing. A newly created entry already holds a fresh generation, so
+			* the stale closures a `detatch` left behind are fenced off either way.
+			*/
+			if (mapEntry.referenceContainer !== referenceContainer) {
+				mapEntry.generation = ++this._generation;
+				this.cancelPendingUpdate(mapEntry);
+				mapEntry.referenceContainer = referenceContainer;
+				/**
+				* Arm the retain flag only here: it means "a replacement reference
+				* container is awaiting layout", so the 0x0 early-return below
+				* holds the last good box rather than blanking the panel mid-move.
+				* Arming it on every re-attach instead would make a container that
+				* genuinely collapses to zero keep its stale geometry forever.
+				*
+				* Gated on `positioned` because an overlay that has never been
+				* positioned has no left/top/width/height, and `.dv-render-overlay`
+				* defaults to 100%/100% — retaining "previous" geometry there would
+				* pin the content over the whole container.
+				*/
+				mapEntry.retainPreviousGeometry = mapEntry.positioned;
+			}
+			const generation = mapEntry.generation;
+			const focusContainer = mapEntry.element;
 			const contentElement = panel.view.content.element;
 			if (contentElement.parentElement !== focusContainer) focusContainer.appendChild(contentElement);
 			if (focusContainer.parentElement !== this.element) this.element.appendChild(focusContainer);
 			const resize = () => {
 				const panelId = panel.api.id;
-				if (this.pendingUpdates.has(panelId)) return;
-				this.pendingUpdates.add(panelId);
-				requestAnimationFrame(() => {
+				const scheduling = this.map[panelId];
+				if ((scheduling === null || scheduling === void 0 ? void 0 : scheduling.generation) !== generation) return;
+				if (scheduling.pendingUpdate !== void 0) return;
+				/**
+				* Claim the slot *before* scheduling. `requestAnimationFrame` is
+				* shimmed to run inline by some hosts (and by several suites here),
+				* in which case the callback below clears `pendingUpdate` while
+				* this call is still on the stack — assigning the handle afterwards
+				* would resurrect a slot that is already spent and block every
+				* later reposition. The sentinel is replaced by the real handle
+				* only if the frame has not already run.
+				*/
+				scheduling.pendingUpdate = SCHEDULED;
+				const handle = requestAnimationFrame(() => {
 					var _entry$forceVisible;
-					this.pendingUpdates.delete(panelId);
 					const entry = this.map[panelId];
-					if (this.isDisposed || !entry) return;
+					if (entry) entry.pendingUpdate = void 0;
+					if (this.isDisposed || (entry === null || entry === void 0 ? void 0 : entry.generation) !== generation) return;
 					const forceVisible = (_entry$forceVisible = entry.forceVisible) !== null && _entry$forceVisible !== void 0 ? _entry$forceVisible : false;
 					const clip = entry.clip;
 					const box = this.positionCache.getPosition(referenceContainer.element);
@@ -13374,6 +13569,15 @@ react_dom = __toESM(react_dom);
 					const top = box.top - box2.top;
 					const width = box.width;
 					const height = box.height;
+					if (entry.retainPreviousGeometry && (width === 0 || height === 0)) {
+						if (!panel.api.isVisible && !forceVisible) {
+							focusContainer.style.visibility = "hidden";
+							focusContainer.style.pointerEvents = "none";
+						}
+						return;
+					}
+					entry.retainPreviousGeometry = false;
+					entry.positioned = true;
 					focusContainer.style.left = `${left}px`;
 					focusContainer.style.top = `${top}px`;
 					focusContainer.style.width = `${width}px`;
@@ -13402,11 +13606,30 @@ react_dom = __toESM(react_dom);
 					} else focusContainer.style.clipPath = "";
 					toggleClass(focusContainer, "dv-render-overlay-float", panel.group.api.location.type === "floating");
 				});
+				if (scheduling.pendingUpdate === SCHEDULED) scheduling.pendingUpdate = handle;
 			};
 			const visibilityChanged = () => {
 				if (panel.api.isVisible) {
+					var _this$map$panel$api$i;
 					this.positionCache.invalidate();
 					resize();
+					/**
+					* Existing geometry is safe to show while its replacement lays
+					* out. `retainPreviousGeometry` is only set when geometry has
+					* actually been written (see `attach`), so this can never
+					* un-hide an overlay whose left/top/width/height are unset —
+					* `.dv-render-overlay` is 100%/100% by default and would
+					* otherwise cover the whole dock.
+					*
+					* The retained geometry is the panel's position in the previous
+					* layout, so restoring a layout that moves the panel does paint
+					* it at stale coordinates until the reposition lands. That is
+					* bounded to the next frame now that a superseded `attach` can
+					* no longer swallow the reposition (see `attach`); showing
+					* stale-but-real geometry for a frame is the deliberate
+					* trade-off against blanking the panel for the whole rebuild.
+					*/
+					if ((_this$map$panel$api$i = this.map[panel.api.id]) === null || _this$map$panel$api$i === void 0 ? void 0 : _this$map$panel$api$i.retainPreviousGeometry) focusContainer.style.visibility = "";
 					focusContainer.style.pointerEvents = "";
 				} else {
 					focusContainer.style.visibility = "hidden";
@@ -13623,7 +13846,17 @@ react_dom = __toESM(react_dom);
 					window: externalWindow
 				});
 				return new Promise((resolve, reject) => {
-					externalWindow.addEventListener("unload", (e) => {});
+					externalWindow.addEventListener("unload", () => {});
+					/**
+					* `load` is the only event that resolves this promise with a
+					* container, so a window that goes away first would leave the
+					* caller awaiting a promise that never settles - and
+					* `addPopoutGroup` holds its layout transaction open until it does.
+					* Settle with `null` on close, the same signal a blocked popup
+					* gives and one the caller already handles. `resolve` after the
+					* fact is a no-op, so a `load` that arrived first still wins.
+					*/
+					disposable.addDisposables(_this.onWillClose(() => resolve(null)));
 					externalWindow.addEventListener("load", () => {
 						/**
 						* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
@@ -14905,7 +15138,22 @@ react_dom = __toESM(react_dom);
 				const rect = candidate.element.getBoundingClientRect();
 				const dx = rect.left + rect.width / 2 - fromX;
 				const dy = rect.top + rect.height / 2 - fromY;
-				if (!(direction === "left" ? dx < 0 && Math.abs(dx) >= Math.abs(dy) : direction === "right" ? dx > 0 && Math.abs(dx) >= Math.abs(dy) : direction === "up" ? dy < 0 && Math.abs(dy) >= Math.abs(dx) : dy > 0 && Math.abs(dy) >= Math.abs(dx))) continue;
+				let inDirection;
+				switch (direction) {
+					case "left":
+						inDirection = dx < 0 && Math.abs(dx) >= Math.abs(dy);
+						break;
+					case "right":
+						inDirection = dx > 0 && Math.abs(dx) >= Math.abs(dy);
+						break;
+					case "up":
+						inDirection = dy < 0 && Math.abs(dy) >= Math.abs(dx);
+						break;
+					default:
+						inDirection = dy > 0 && Math.abs(dy) >= Math.abs(dx);
+						break;
+				}
+				if (!inDirection) continue;
 				const distance = dx * dx + dy * dy;
 				if (distance < bestDistance) {
 					bestDistance = distance;
@@ -15008,6 +15256,7 @@ react_dom = __toESM(react_dom);
 			this._onWillDrop = new Emitter();
 			this.onWillDrop = this._onWillDrop.event;
 			this._mutationDepth = 0;
+			this._pendingLocationChanges = /* @__PURE__ */ new Map();
 			this._origin = "user";
 			this._originDepth = 0;
 			this._onWillMutateLayout = new Emitter();
@@ -15105,7 +15354,7 @@ react_dom = __toESM(react_dom);
 			toggleClass(this.element, "dv-debug", !!options.debug);
 			this.updateTheme();
 			if (options.debug) this.addDisposables(new StrictEventsSequencing(this));
-			this.addDisposables(this.rootDropTargetContainer, this.floatingDropTargetContainer, addDisposableListener(this._shellManager.element, "dragend", () => {
+			this.addDisposables(Disposable.from(() => this._pendingLocationChanges.clear()), this.rootDropTargetContainer, this.floatingDropTargetContainer, addDisposableListener(this._shellManager.element, "dragend", () => {
 				var _this$rootDropTargetC2, _this$floatingDropTar;
 				(_this$rootDropTargetC2 = this.rootDropTargetContainer.model) === null || _this$rootDropTargetC2 === void 0 || _this$rootDropTargetC2.clear();
 				(_this$floatingDropTar = this.floatingDropTargetContainer.model) === null || _this$floatingDropTar === void 0 || _this$floatingDropTar.clear();
@@ -15179,7 +15428,7 @@ react_dom = __toESM(react_dom);
 			return (_this$_popoutWindowSe3 = (_this$_popoutWindowSe4 = this._popoutWindowService) === null || _this$_popoutWindowSe4 === void 0 || (_this$_popoutWindowSe4 = _this$_popoutWindowSe4.findByGroup(group)) === null || _this$_popoutWindowSe4 === void 0 ? void 0 : _this$_popoutWindowSe4.popupService) !== null && _this$_popoutWindowSe3 !== void 0 ? _this$_popoutWindowSe3 : this.popupService;
 		}
 		addPopoutGroup(itemToPopout, options) {
-			return this.mutation("popout", () => this._doAddPopoutGroup(itemToPopout, options));
+			return this.mutationAsync("popout", () => this._doAddPopoutGroup(itemToPopout, options));
 		}
 		/** Enumerate the popout groups currently open in their own windows. */
 		getPopouts() {
@@ -15276,15 +15525,32 @@ react_dom = __toESM(react_dom);
 					}
 				};
 				let floatingBox;
-				if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup) && !(options === null || options === void 0 ? void 0 : options.overridePopoutGridview) && isGroupAddedToDom) if (itemToPopout instanceof DockviewPanel) this.movingLock(() => {
-					const panel = referenceGroup.model.removePanel(itemToPopout);
-					group.model.openPanel(panel);
-				});
-				else {
+				/**
+				* Popping out rehomes panels into `group`, so like the floating
+				* case it owes the caller an `onDidMovePanel` per panel. The
+				* events are deferred until the window is wired up so listeners
+				* observe the panels' final `popout` location.
+				*/
+				let movedPanels = [];
+				if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup) && !(options === null || options === void 0 ? void 0 : options.overridePopoutGridview) && isGroupAddedToDom) if (itemToPopout instanceof DockviewPanel) {
+					const sourceGroup = itemToPopout.group;
+					this.movingLock(() => {
+						const panel = referenceGroup.model.removePanel(itemToPopout);
+						group.model.openPanel(panel);
+					});
+					movedPanels = [{
+						panel: itemToPopout,
+						from: sourceGroup
+					}];
+				} else {
 					this.movingLock(() => moveGroupWithoutDestroying({
 						from: referenceGroup,
 						to: group
 					}));
+					movedPanels = group.panels.map((panel) => ({
+						panel,
+						from: referenceGroup
+					}));
 					switch (referenceLocation) {
 						case "grid":
 							referenceGroup.api.setVisible(false);
@@ -15393,6 +15659,7 @@ react_dom = __toESM(react_dom);
 					group: value.popoutGroup,
 					window: value.getWindow()
 				});
+				for (const { panel, from } of movedPanels) this.fireDidMovePanel(panel, from);
 				return true;
 			}).catch((err) => {
 				console.error("dockview: failed to create popout.", err);
@@ -15470,6 +15737,16 @@ react_dom = __toESM(react_dom);
 			const members = this.groups.filter((candidate) => popoutGridview.element.contains(candidate.element));
 			const anchorPresent = members.includes(group);
 			const anchorIsSoleMember = anchorPresent && members.length === 1;
+			/**
+			* Popping a group out fires `onDidMovePanel` per panel, so closing the
+			* window owes the caller the same: every panel in it is rehomed, into
+			* the reference group the popout left behind or into a fresh grid slot.
+			* `movingLock` suppresses onDidAddPanel / onDidRemovePanel on these
+			* paths, so `onDidMovePanel` is the only event that can carry it. The
+			* events are deferred to the end so listeners observe the panels at
+			* their final group and location.
+			*/
+			const movedPanels = [];
 			if (genuineClose) for (const member of members) {
 				if (member === group) continue;
 				this.movingLock(() => {
@@ -15480,12 +15757,21 @@ react_dom = __toESM(react_dom);
 					});
 					this.redockGroupToMainGrid(member);
 				});
+				for (const panel of member.panels) movedPanels.push({
+					panel,
+					from: member
+				});
 			}
 			if (anchorPresent && isGroupAddedToDom && this.getPanel(referenceGroup.id)) {
+				const rehomed = [...group.panels];
 				this.movingLock(() => moveGroupWithoutDestroying({
 					from: group,
 					to: referenceGroup
 				}));
+				for (const panel of rehomed) movedPanels.push({
+					panel,
+					from: group
+				});
 				if (!referenceGroup.api.isVisible) referenceGroup.api.setVisible(true);
 				if (this.getPanel(group.id)) this.doRemoveGroup(group, { skipPopoutAssociated: true });
 			} else if (anchorPresent && this.getPanel(group.id)) {
@@ -15516,10 +15802,15 @@ react_dom = __toESM(react_dom);
 					this.movingLock(() => {
 						this.doAddGroup(group, [0]);
 					});
+					for (const panel of group.panels) movedPanels.push({
+						panel,
+						from: group
+					});
 				}
 				this.doSetGroupAndPanelActive(group);
 			}
 			disposePopoutGridview();
+			for (const { panel, from } of movedPanels) this.fireDidMovePanel(panel, from);
 		}
 		addFloatingGroup(item, options) {
 			this.mutation("float", () => this._doAddFloatingGroup(item, options));
@@ -15528,7 +15819,15 @@ react_dom = __toESM(react_dom);
 			if (!assertModule(this._floatingGroupService, "FloatingGroup", "api.addFloatingGroup")) return;
 			if (item instanceof DockviewGroupPanel && item.model.location.type === "edge") return;
 			let group;
+			/**
+			* Floating relocates panels exactly like a drop onto the grid does, so
+			* it owes the caller an `onDidMovePanel` per panel. The events are
+			* deferred until the window is mounted below: only then do the panels
+			* report their final `floating` location.
+			*/
+			let movedPanels = [];
 			if (item instanceof DockviewPanel) {
+				const sourceGroup = item.group;
 				group = this.createGroup();
 				this._onDidAddGroup.fire(group);
 				this.movingLock(() => this.removePanel(item, {
@@ -15537,6 +15836,10 @@ react_dom = __toESM(react_dom);
 					skipSetActiveGroup: true
 				}));
 				this.movingLock(() => group.model.openPanel(item, { skipSetGroupActive: true }));
+				movedPanels = [{
+					panel: item,
+					from: sourceGroup
+				}];
 			} else {
 				var _this$_popoutWindowSe8;
 				group = item;
@@ -15553,11 +15856,21 @@ react_dom = __toESM(react_dom);
 					});
 					this.doRemoveGroup(popoutReferenceGroup, { skipDispose: true });
 					group = popoutReferenceGroup;
-				} else this.doRemoveGroup(item, {
-					skipDispose: true,
-					skipPopoutReturn: true,
-					skipPopoutAssociated: false
-				});
+					movedPanels = group.panels.map((panel) => ({
+						panel,
+						from: item
+					}));
+				} else {
+					this.doRemoveGroup(item, {
+						skipDispose: true,
+						skipPopoutReturn: true,
+						skipPopoutAssociated: false
+					});
+					movedPanels = group.panels.map((panel) => ({
+						panel,
+						from: group
+					}));
+				}
 			}
 			function getAnchoredBox() {
 				if (options === null || options === void 0 ? void 0 : options.position) {
@@ -15590,6 +15903,7 @@ react_dom = __toESM(react_dom);
 				skipActiveGroup: options === null || options === void 0 ? void 0 : options.skipActiveGroup,
 				disableSmartGuides: options === null || options === void 0 ? void 0 : options.disableSmartGuides
 			});
+			for (const { panel, from } of movedPanels) this.fireDidMovePanel(panel, from);
 		}
 		/**
 		* Build an empty gridview configured to match the main grid's styling, for
@@ -15753,11 +16067,15 @@ react_dom = __toESM(react_dom);
 		/**
 		* Reveal (create-or-fill) the edge group at `position` and move the dragged
 		* item described by `data` into it. A newly created edge group is created
-		* collapsed and flagged `autoReveal` so it tears down to zero footprint when
-		* later emptied. If an edge group already exists there it is reused: the
-		* panel is added to its tabs and its collapsed/toggled state is left as-is
-		* (never re-created; `addEdgeGroup` throws on a duplicate position). No-op if
-		* the EdgeGroup module is absent.
+		* collapsed, flagged `autoReveal` so it tears down to zero footprint when
+		* later emptied, and takes its auto-hide state from `options.autoHide`. If an
+		* edge group already exists there it is reused: the panel is added to its
+		* tabs and its collapsed/toggled *and auto-hide* state are left as-is (never
+		* re-created; `addEdgeGroup` throws on a duplicate position). This keeps a
+		* drag-reveal from silently converting a static edge group into an
+		* auto-hiding one; to change an existing group's auto-hide, call
+		* `api.getEdgeGroup(position)?.setAutoHide(...)` directly. No-op if the
+		* EdgeGroup module is absent.
 		*
 		* This is the primitive behind the dock-to-edge groups: the two-band
 		* drag-reveal affordance routes its outer-band drops here.
@@ -15776,7 +16094,7 @@ react_dom = __toESM(react_dom);
 						collapsed: true
 					});
 					group = service.get(position);
-				} else if ((options === null || options === void 0 ? void 0 : options.autoHide) !== void 0) this.setEdgeGroupAutoHide(group, options.autoHide);
+				}
 				if (!group) return;
 				this.moveGroupOrPanel({
 					from: {
@@ -16017,35 +16335,119 @@ react_dom = __toESM(react_dom);
 			if (typeof data !== "object" || data === null) throw new Error("dockview: serialized layout must be a non-null object");
 			if (!data.grid || ((_data$grid$root = data.grid.root) === null || _data$grid$root === void 0 ? void 0 : _data$grid$root.type) !== "branch" || !Array.isArray(data.grid.root.data)) throw new Error("dockview: root must be of type branch");
 			const existingPanels = /* @__PURE__ */ new Map();
-			let tempGroup;
+			const temporaryGroups = /* @__PURE__ */ new Map();
+			const stagedPanels = [];
+			const temporaryGroupDisposables = [];
+			/**
+			* The staging groups are detached from `_groups` and never enter the
+			* grid, so nothing else will ever tear them down.
+			*
+			* `dispose()` reaches consumer `IContentRenderer.dispose()`, so one
+			* throwing renderer must not abort the rest of the cleanup — that would
+			* re-introduce the very leak this reclaims — nor replace the
+			* deserialization error the caller is being given. Draining the list
+			* also makes this safe to call more than once.
+			*/
+			const disposeTemporaryGroups = () => {
+				for (const disposable of temporaryGroupDisposables) try {
+					disposable.dispose();
+				} catch (err) {
+					console.error("dockview: failed to dispose a temporary group created for reuseExistingPanels", err);
+				}
+				temporaryGroupDisposables.length = 0;
+			};
 			if (options === null || options === void 0 ? void 0 : options.reuseExistingPanels) {
 				/**
-				* What are we doing here?
-				*
-				* 1. Create a temporary group to hold any panels that currently exist and that also exist in the new layout
-				* 2. Remove that temporary group from the group mapping so that it doesn't get cleared when we clear the layout
+				* Visible, always-rendered panels need individual staging groups
+				* to remain active. Other reused panels can share a staging group.
+				* The staging groups are excluded from the layout clear below.
 				*/
-				tempGroup = this.createGroup();
-				this._groups.delete(tempGroup.api.id);
 				const newPanels = Object.keys(data.panels);
-				for (const panel of this.panels) if (newPanels.includes(panel.api.id)) existingPanels.set(panel.api.id, panel);
-				this.movingLock(() => {
-					Array.from(existingPanels.values()).forEach((panel) => {
-						this.moveGroupOrPanel({
-							from: {
-								groupId: panel.api.group.api.id,
-								panelId: panel.api.id
-							},
-							to: {
-								group: tempGroup,
-								position: "center"
-							},
-							keepEmptyGroups: true
+				let sharedTemporaryGroup;
+				const createTemporaryGroup = () => {
+					const temporaryGroup = this.createGroup();
+					/**
+					* Removing the group from `_groups` also drops the record's
+					* `CompositeDisposable`, so capture it first and tear both it
+					* and the group down in the `finally` below. Left undisposed a
+					* staging group leaks its `ResizeObserver`, its
+					* `onDidOptionsChange` subscription (retained by this
+					* component's emitter) and the watermark its model mounts when
+					* the group empties — once per reused panel, per `fromJSON`.
+					*/
+					const record = this._groups.get(temporaryGroup.api.id);
+					this._groups.delete(temporaryGroup.api.id);
+					temporaryGroupDisposables.push(Disposable.from(() => {
+						/**
+						* Reclaim the group's own resources, never its panels.
+						* Staging is driven by the ids in `data.panels` while
+						* reclaiming is driven by the group `views` that
+						* reference them, so a panel whose state is present but
+						* unreferenced is still staged here — and `dispose()`
+						* on a non-empty group reaches the consumer's
+						* `IContentRenderer.dispose()`. Emptying the group
+						* first leaves those panels exactly as they were before
+						* this teardown existed, which also keeps this safe
+						* against any future path that rebuilds a panel under
+						* an id that is live in the new layout.
+						*/
+						this.movingLock(() => {
+							for (const panel of temporaryGroup.panels.slice()) temporaryGroup.model.removePanel(panel);
+						});
+						record === null || record === void 0 || record.disposable.dispose();
+						temporaryGroup.dispose();
+					}));
+					return temporaryGroup;
+				};
+				/**
+				* Staging and the clear below run before the deserialization
+				* `try`, so a throw here (a consumer `onDidRemovePanel` handler, a
+				* renderer teardown during `clear`) would escape without reclaiming
+				* the staging groups already created.
+				*
+				* The creation loop is inside the guard too, not just the moves and
+				* the clear: `createGroup()` reaches consumer code of its own —
+				* `initialize()` mounts the watermark through
+				* `createWatermarkComponent()` — so a throw on the n-th panel would
+				* otherwise strand the n-1 staging groups already built.
+				*/
+				try {
+					for (const panel of this.panels) if (newPanels.includes(panel.api.id)) {
+						existingPanels.set(panel.api.id, panel);
+						let temporaryGroup;
+						if (panel.api.renderer === "always" && panel.api.isVisible) temporaryGroup = createTemporaryGroup();
+						else {
+							var _sharedTemporaryGroup;
+							(_sharedTemporaryGroup = sharedTemporaryGroup) !== null && _sharedTemporaryGroup !== void 0 || (sharedTemporaryGroup = createTemporaryGroup());
+							temporaryGroup = sharedTemporaryGroup;
+						}
+						temporaryGroups.set(panel.api.id, temporaryGroup);
+						stagedPanels.push({
+							panel,
+							temporaryGroup
+						});
+					}
+					this.movingLock(() => {
+						stagedPanels.forEach(({ panel, temporaryGroup }) => {
+							this.moveGroupOrPanel({
+								from: {
+									groupId: panel.api.group.api.id,
+									panelId: panel.api.id
+								},
+								to: {
+									group: temporaryGroup,
+									position: "center"
+								},
+								keepEmptyGroups: true
+							});
 						});
 					});
-				});
-			}
-			this.clear();
+					this.clear();
+				} catch (err) {
+					disposeTemporaryGroups();
+					throw err;
+				}
+			} else this.clear();
 			const { grid, panels, activeGroup } = data;
 			try {
 				var _data$floatingGroups, _data$popoutGroups, _this$_popoutWindowSe12, _this$_floatingGroupS5, _this$_watermarkServi2;
@@ -16077,9 +16479,10 @@ react_dom = __toESM(react_dom);
 						* due to a corruption of input data.
 						*/
 						const existingPanel = existingPanels.get(child);
-						if (tempGroup && existingPanel) {
+						const temporaryGroup = temporaryGroups.get(child);
+						if (temporaryGroup && existingPanel) {
 							this.movingLock(() => {
-								tempGroup.model.removePanel(existingPanel);
+								temporaryGroup.model.removePanel(existingPanel);
 							});
 							createdPanels.push(existingPanel);
 							existingPanel.updateFromStateModel(panels[child]);
@@ -16109,7 +16512,7 @@ react_dom = __toESM(react_dom);
 					return createGroupFromSerializedState(node.data);
 				} });
 				this._layoutFromShell(width, height);
-				if (data.edgeGroups) this.deserializeEdgeGroups(data.edgeGroups, panels);
+				if (data.edgeGroups) this.deserializeEdgeGroups(data.edgeGroups, panels, existingPanels, temporaryGroups);
 				this.deserializeFloatingWindows((_data$floatingGroups = data.floatingGroups) !== null && _data$floatingGroups !== void 0 ? _data$floatingGroups : [], createGroupFromSerializedState);
 				const popoutPromises = this.deserializePopoutWindows((_data$popoutGroups = data.popoutGroups) !== null && _data$popoutGroups !== void 0 ? _data$popoutGroups : [], createGroupFromSerializedState);
 				(_this$_popoutWindowSe12 = this._popoutWindowService) === null || _this$_popoutWindowSe12 === void 0 || _this$_popoutWindowSe12.finishRestoration(popoutPromises);
@@ -16146,6 +16549,8 @@ react_dom = __toESM(react_dom);
 				* expect trying to load a corrupted layout to result in an error and not silently fail...
 				*/
 				throw err;
+			} finally {
+				disposeTemporaryGroups();
 			}
 			this.debouncedUpdateAllPositions();
 			this._onDidLayoutFromJSON.fire();
@@ -16168,7 +16573,7 @@ react_dom = __toESM(react_dom);
 				members
 			};
 		}
-		deserializeEdgeGroups(edgeGroups, panels) {
+		deserializeEdgeGroups(edgeGroups, panels, existingPanels, temporaryGroups) {
 			const edgeService = assertModule(this._edgeGroupService, "EdgeGroup", "fromJSON edge restoration");
 			if (!edgeService) return;
 			for (const _position of [
@@ -16198,13 +16603,40 @@ react_dom = __toESM(react_dom);
 				if (groupState) {
 					const { views, activeView } = groupState;
 					const createdPanels = [];
-					for (const panelId of views) if (panels[panelId]) {
-						const panel = this._deserializer.fromJSON(panels[panelId], edgeGroup);
-						createdPanels.push(panel);
+					for (const panelId of views) {
+						if (!panels[panelId]) continue;
+						/**
+						* Reclaim a staged panel rather than rebuilding it, the
+						* same way the grid path does. Deserializing here instead
+						* would honour `reuseExistingPanels` everywhere except edge
+						* groups: the live panel keeps sitting in its staging group
+						* while a second panel is built under the same id, so the
+						* consumer's renderer for the original is orphaned — never
+						* disposed, and its element left inside the id-keyed
+						* overlay entry the replacement now shares.
+						*/
+						const existingPanel = existingPanels.get(panelId);
+						const temporaryGroup = temporaryGroups.get(panelId);
+						if (temporaryGroup && existingPanel) {
+							this.movingLock(() => {
+								temporaryGroup.model.removePanel(existingPanel);
+							});
+							createdPanels.push(existingPanel);
+							existingPanel.updateFromStateModel(panels[panelId]);
+						} else {
+							const panel = this._deserializer.fromJSON(panels[panelId], edgeGroup);
+							createdPanels.push(panel);
+						}
 					}
 					for (const panel of createdPanels) {
 						const isActive = activeView === panel.id;
-						edgeGroup.model.openPanel(panel, {
+						if (existingPanels.has(panel.api.id)) this.movingLock(() => {
+							edgeGroup.model.openPanel(panel, {
+								skipSetActive: !isActive,
+								skipSetGroupActive: true
+							});
+						});
+						else edgeGroup.model.openPanel(panel, {
 							skipSetActive: !isActive,
 							skipSetGroupActive: true
 						});
@@ -16307,6 +16739,7 @@ react_dom = __toESM(react_dom);
 				height: options.initialHeight
 			};
 			let index;
+			const shouldSkipSetActive = (group) => !!options.inactive && group.model.size > 0;
 			if (options.position) if (isPanelOptionsWithPanel(options.position)) {
 				const referencePanel = typeof options.position.referencePanel === "string" ? this.getGroupPanel(options.position.referencePanel) : options.position.referencePanel;
 				index = options.position.index;
@@ -16329,7 +16762,7 @@ react_dom = __toESM(react_dom);
 				const group = this.orthogonalize(directionToPosition(options.position.direction));
 				const panel = this.createPanel(options, group);
 				group.model.openPanel(panel, {
-					skipSetActive: options.inactive,
+					skipSetActive: shouldSkipSetActive(group),
 					skipSetGroupActive: options.inactive,
 					index
 				});
@@ -16356,14 +16789,14 @@ react_dom = __toESM(react_dom);
 					}));
 					panel = this.createPanel(options, group);
 					group.model.openPanel(panel, {
-						skipSetActive: options.inactive,
+						skipSetActive: shouldSkipSetActive(group),
 						skipSetGroupActive: options.inactive,
 						index
 					});
 				} else if (referenceGroup.api.location.type === "floating" || referenceGroup.api.location.type === "edge" || target === "center") {
 					panel = this.createPanel(options, referenceGroup);
 					referenceGroup.model.openPanel(panel, {
-						skipSetActive: options.inactive,
+						skipSetActive: shouldSkipSetActive(referenceGroup),
 						skipSetGroupActive: options.inactive,
 						index
 					});
@@ -16378,7 +16811,7 @@ react_dom = __toESM(react_dom);
 					const group = this.createGroupAtLocation(relativeLocation, this.orientationAtLocation(relativeLocation) === "VERTICAL" ? initial === null || initial === void 0 ? void 0 : initial.height : initial === null || initial === void 0 ? void 0 : initial.width);
 					panel = this.createPanel(options, group);
 					group.model.openPanel(panel, {
-						skipSetActive: options.inactive,
+						skipSetActive: shouldSkipSetActive(group),
 						skipSetGroupActive: options.inactive,
 						index
 					});
@@ -16395,7 +16828,7 @@ react_dom = __toESM(react_dom);
 				}));
 				panel = this.createPanel(options, group);
 				group.model.openPanel(panel, {
-					skipSetActive: options.inactive,
+					skipSetActive: shouldSkipSetActive(group),
 					skipSetGroupActive: options.inactive,
 					index
 				});
@@ -16403,7 +16836,7 @@ react_dom = __toESM(react_dom);
 				const group = this.createGroupAtLocation([0], this.gridview.orientation === "VERTICAL" ? initial === null || initial === void 0 ? void 0 : initial.height : initial === null || initial === void 0 ? void 0 : initial.width);
 				panel = this.createPanel(options, group);
 				group.model.openPanel(panel, {
-					skipSetActive: options.inactive,
+					skipSetActive: shouldSkipSetActive(group),
 					skipSetGroupActive: options.inactive,
 					index
 				});
@@ -16627,22 +17060,100 @@ react_dom = __toESM(react_dom);
 		* outermost mutation.
 		*/
 		mutation(kind, func) {
-			const outer = this._mutationDepth === 0;
+			const close = this.openMutation(kind);
+			try {
+				return func();
+			} finally {
+				close();
+			}
+		}
+		/**
+		* `mutation()` for an operation whose work continues after the synchronous
+		* call returns. The transaction stays open until the returned promise
+		* settles, so everything the operation does - the group it adds, the panels
+		* it relocates - lands inside the bracket, matching the synchronous
+		* move / float paths.
+		*/
+		mutationAsync(kind, func) {
+			var _this = this;
+			return _asyncToGenerator(function* () {
+				const close = _this.openMutation(kind);
+				try {
+					return yield func();
+				} finally {
+					close();
+				}
+			})();
+		}
+		/**
+		* Open a transaction and return the function that closes it. Shared by the
+		* synchronous and asynchronous brackets; the returned function must be
+		* called exactly once.
+		*
+		* Both ends key off the depth counter reaching zero rather than off which
+		* bracket opened first. For synchronous nesting the two are the same thing
+		* - brackets close in the order they opened - but asynchronous transactions
+		* can *overlap* rather than nest (two `addPopoutGroup` calls in flight at
+		* once, or a restore staggering several), and there the first to open is
+		* not the last to close. Reporting on the opener would fire `didMutate`
+		* while the other transaction was still doing structural work, which is the
+		* very thing the async bracket exists to prevent. Overlapping transactions
+		* therefore report as one, tagged with the kind of the last to finish.
+		*/
+		openMutation(kind) {
 			const origin = this._origin;
-			if (outer) this._onWillMutateLayout.fire({
+			if (this._mutationDepth === 0) this._onWillMutateLayout.fire({
 				kind,
 				origin
 			});
 			this._mutationDepth++;
-			try {
-				return func();
-			} finally {
+			return () => {
 				this._mutationDepth--;
-				if (outer) this._onDidMutateLayout.fire({
-					kind,
-					origin
-				});
+				if (this._mutationDepth === 0) {
+					this.flushLocationChanges();
+					this._onDidMutateLayout.fire({
+						kind,
+						origin
+					});
+				}
+			};
+		}
+		/**
+		* Coalesce a panel's `onDidLocationChange` to the end of the enclosing
+		* transaction, or fire it immediately when no transaction is in flight.
+		*
+		* Relocating a panel touches its location twice: once as it is reparented
+		* into the destination group - which, when that group has just been created
+		* for a floating or popout window, has not been told where it lives yet -
+		* and once as the group is tagged with its final location. Reporting each
+		* signal as it happens therefore leaks an intermediate `grid` location the
+		* panel was never in, at a moment when it belongs to neither group's panel
+		* list and so is missing from `api.panels`.
+		*
+		* Deferring collapses those signals into a single event carrying the
+		* settled location. Note the signals are deliberately *not* compared
+		* against the panel's previous location: a panel can move between two
+		* floating windows without its location type changing, and this event is
+		* the only signal `OverlayRenderContainer` has to re-resolve the panel's
+		* z-index against its new host window.
+		*/
+		deferLocationChange(key, fire) {
+			if (this._mutationDepth === 0) {
+				fire();
+				return;
 			}
+			this._pendingLocationChanges.set(key, fire);
+		}
+		/**
+		* Report every panel whose location moved during the transaction that has
+		* just closed. Each callback reads the panel's location at this point, so
+		* what it reports is where the panel ended up.
+		*/
+		flushLocationChanges() {
+			if (this._pendingLocationChanges.size === 0) return;
+			const pending = Array.from(this._pendingLocationChanges.values());
+			this._pendingLocationChanges.clear();
+			for (const fire of pending) fire();
 		}
 		/**
 		* The origin of the operation currently in progress (`'user'` by default).
@@ -16683,6 +17194,18 @@ react_dom = __toESM(react_dom);
 				origin: this._origin
 			});
 		}
+		/**
+		* Announce that `panel` has finished relocating. Must be called once the
+		* move has settled: `to` is read from the panel's current group, so an
+		* early call would report the source group as the destination.
+		*/
+		fireDidMovePanel(panel, from) {
+			this._onDidMovePanel.fire({
+				panel,
+				from,
+				to: panel.group
+			});
+		}
 		moveGroupOrPanel(options) {
 			this.mutation("move", () => this._doMoveGroupOrPanel(options));
 		}
@@ -16743,10 +17266,7 @@ react_dom = __toESM(react_dom);
 					});
 				});
 				if (!options.skipSetActive) this.doSetGroupAndPanelActive(destinationGroup);
-				this._onDidMovePanel.fire({
-					panel: removedPanel,
-					from: sourceGroup
-				});
+				this.fireDidMovePanel(removedPanel, sourceGroup);
 			} else {
 				/**
 				* Dropping a panel to the extremities of a group which will place that panel
@@ -16765,10 +17285,7 @@ react_dom = __toESM(react_dom);
 						const [sourceParentLocation, from] = tail(getGridLocation(sourceGroup.element));
 						if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
 							this.gridview.moveView(sourceParentLocation, from, to);
-							this._onDidMovePanel.fire({
-								panel: this.getGroupPanel(sourceItemId),
-								from: sourceGroup
-							});
+							this.fireDidMovePanel(this.getGroupPanel(sourceItemId), sourceGroup);
 							return;
 						}
 					}
@@ -16799,10 +17316,7 @@ react_dom = __toESM(react_dom);
 						const newGroup = this.createGroupAtLocation(updatedTargetLocation, void 0, void 0, destinationGridview);
 						this.movingLock(() => newGroup.model.openPanel(removedPanel, { skipSetActive: true }));
 						this.doSetGroupAndPanelActive(newGroup);
-						this._onDidMovePanel.fire({
-							panel: this.getGroupPanel(sourceItemId),
-							from: sourceGroup
-						});
+						this.fireDidMovePanel(this.getGroupPanel(sourceItemId), sourceGroup);
 						return;
 					}
 					if (sourceGroup.api.location.type === "edge") {
@@ -16819,10 +17333,7 @@ react_dom = __toESM(react_dom);
 						const newGroup = this.createGroupAtLocation(targetLocation, void 0, void 0, destinationGridview);
 						this.movingLock(() => newGroup.model.openPanel(removedPanel, { skipSetGroupActive: true }));
 						this.doSetGroupAndPanelActive(newGroup);
-						this._onDidMovePanel.fire({
-							panel: removedPanel,
-							from: sourceGroup
-						});
+						this.fireDidMovePanel(removedPanel, sourceGroup);
 						return;
 					}
 					const targetGroup = this.movingLock(() => this.doRemoveGroup(sourceGroup, {
@@ -16834,10 +17345,7 @@ react_dom = __toESM(react_dom);
 					this.movingLock(() => this.doAddGroup(targetGroup, location, void 0, destinationGridview));
 					this.setGroupLocationForRoot(targetGroup, destinationGridview);
 					this.doSetGroupAndPanelActive(targetGroup);
-					this._onDidMovePanel.fire({
-						panel: this.getGroupPanel(sourceItemId),
-						from: sourceGroup
-					});
+					this.fireDidMovePanel(this.getGroupPanel(sourceItemId), sourceGroup);
 				} else {
 					/**
 					* The group we are removing from has many panels, we need to remove the panels we are moving,
@@ -16852,10 +17360,7 @@ react_dom = __toESM(react_dom);
 					const group = this.createGroupAtLocation(dropLocation, void 0, void 0, destinationGridview);
 					this.movingLock(() => group.model.openPanel(removedPanel, { skipSetGroupActive: true }));
 					this.doSetGroupAndPanelActive(group);
-					this._onDidMovePanel.fire({
-						panel: removedPanel,
-						from: sourceGroup
-					});
+					this.fireDidMovePanel(removedPanel, sourceGroup);
 				}
 			}
 		}
@@ -16890,10 +17395,7 @@ react_dom = __toESM(react_dom);
 				});
 				for (const panel of removedPanels) targetGroup.model.addPanelToTabGroup(newTabGroup.id, panel.id);
 				if (!options.skipSetActive) this.doSetGroupAndPanelActive(targetGroup);
-				for (const panel of removedPanels) this._onDidMovePanel.fire({
-					panel,
-					from: sourceGroup
-				});
+				for (const panel of removedPanels) this.fireDidMovePanel(panel, sourceGroup);
 			};
 			let targetGroup;
 			if (!destinationTarget || destinationTarget === "center" || !referenceLocation) targetGroup = destinationGroup;
@@ -16914,10 +17416,12 @@ react_dom = __toESM(react_dom);
 			this.mutation("maximize", () => super.exitMaximizedGroup());
 		}
 		_doMoveGroup(options) {
+			var _mergedPanels;
 			const from = options.from.group;
 			const to = options.to.group;
 			const target = options.to.position;
 			let source = from;
+			let mergedPanels;
 			if (target === "center") {
 				const activePanel = from.activePanel;
 				const tabGroupSnapshots = from.model.getTabGroups().map((tg) => ({
@@ -16935,6 +17439,7 @@ react_dom = __toESM(react_dom);
 						skipSetGroupActive: true
 					});
 				});
+				mergedPanels = panels;
 				for (const snapshot of tabGroupSnapshots) {
 					const newTabGroup = to.model.createTabGroup({
 						label: snapshot.label,
@@ -17024,11 +17529,8 @@ react_dom = __toESM(react_dom);
 					this.setGroupLocationForRoot(source, destGridview);
 				}
 			}
-			source.panels.forEach((panel) => {
-				this._onDidMovePanel.fire({
-					panel,
-					from
-				});
+			((_mergedPanels = mergedPanels) !== null && _mergedPanels !== void 0 ? _mergedPanels : source.panels).forEach((panel) => {
+				this.fireDidMovePanel(panel, from);
 			});
 			this.debouncedUpdateAllPositions();
 			if (options.skipSetActive === false) {