dockview-core 8.1.0 → 8.2.0

package/dist/package/main.esm.mjs

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 8.1.0
+ * @version 8.2.0
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -10520,7 +10520,11 @@ var DockviewGroupPanelModel = class extends CompositeDisposable {
 		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;
@@ -11485,7 +11489,7 @@ var DockviewPanelApiImpl = class extends GridviewPanelApiImpl {
 			this._group = value;
 			this._onDidGroupChange.fire({});
 			this.setupGroupEventListeners(oldGroup);
-			this._onDidLocationChange.fire({ location: this.group.api.location });
+			this.fireLocationChange();
 		}
 	}
 	get group() {
@@ -11561,6 +11565,23 @@ var DockviewPanelApiImpl = class extends GridviewPanelApiImpl {
 	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;
@@ -11569,9 +11590,9 @@ var DockviewPanelApiImpl = class extends GridviewPanelApiImpl {
 			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) {
@@ -13597,6 +13618,13 @@ var PositionCache = class {
 		});
 	}
 };
+/**
+* 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;
@@ -13609,12 +13637,13 @@ var OverlayRenderContainer = class extends CompositeDisposable {
 		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;
 		}));
@@ -13641,11 +13670,24 @@ var OverlayRenderContainer = class extends CompositeDisposable {
 		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;
 		}
@@ -13661,22 +13703,73 @@ var OverlayRenderContainer = class extends CompositeDisposable {
 				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);
@@ -13685,6 +13778,15 @@ var OverlayRenderContainer = class extends CompositeDisposable {
 				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`;
@@ -13713,11 +13815,30 @@ var OverlayRenderContainer = class extends CompositeDisposable {
 				} 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";
@@ -13940,7 +14061,17 @@ var PopoutWindow = class extends CompositeDisposable {
 				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
@@ -15358,6 +15489,7 @@ var DockviewComponent = class extends BaseGrid {
 		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();
@@ -15455,7 +15587,7 @@ var DockviewComponent = class extends BaseGrid {
 		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();
@@ -15529,7 +15661,7 @@ var DockviewComponent = class extends BaseGrid {
 		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() {
@@ -15626,15 +15758,32 @@ var DockviewComponent = class extends BaseGrid {
 				}
 			};
 			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);
@@ -15743,6 +15892,7 @@ var DockviewComponent = class extends BaseGrid {
 				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);
@@ -15820,6 +15970,16 @@ var DockviewComponent = class extends BaseGrid {
 		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(() => {
@@ -15830,12 +15990,21 @@ var DockviewComponent = class extends BaseGrid {
 				});
 				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)) {
@@ -15866,10 +16035,15 @@ var DockviewComponent = class extends BaseGrid {
 				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));
@@ -15878,7 +16052,15 @@ var DockviewComponent = class extends BaseGrid {
 		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, {
@@ -15887,6 +16069,10 @@ var DockviewComponent = class extends BaseGrid {
 				skipSetActiveGroup: true
 			}));
 			this.movingLock(() => group.model.openPanel(item, { skipSetGroupActive: true }));
+			movedPanels = [{
+				panel: item,
+				from: sourceGroup
+			}];
 		} else {
 			var _this$_popoutWindowSe8;
 			group = item;
@@ -15903,11 +16089,21 @@ var DockviewComponent = class extends BaseGrid {
 				});
 				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) {
@@ -15940,6 +16136,7 @@ var DockviewComponent = class extends BaseGrid {
 			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
@@ -16371,35 +16568,119 @@ var DockviewComponent = class extends BaseGrid {
 		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;
@@ -16431,9 +16712,10 @@ var DockviewComponent = class extends BaseGrid {
 					* 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]);
@@ -16463,7 +16745,7 @@ var DockviewComponent = class extends BaseGrid {
 				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);
@@ -16500,6 +16782,8 @@ var DockviewComponent = class extends BaseGrid {
 			* 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();
@@ -16522,7 +16806,7 @@ var DockviewComponent = class extends BaseGrid {
 			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 [
@@ -16552,13 +16836,40 @@ var DockviewComponent = class extends BaseGrid {
 			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
 					});
@@ -16982,22 +17293,100 @@ var DockviewComponent = class extends BaseGrid {
 	* 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).
@@ -17038,6 +17427,18 @@ var DockviewComponent = class extends BaseGrid {
 			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));
 	}
@@ -17098,10 +17499,7 @@ var DockviewComponent = class extends BaseGrid {
 				});
 			});
 			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
@@ -17120,10 +17518,7 @@ var DockviewComponent = class extends BaseGrid {
 					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;
 					}
 				}
@@ -17154,10 +17549,7 @@ var DockviewComponent = class extends BaseGrid {
 					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") {
@@ -17174,10 +17566,7 @@ var DockviewComponent = class extends BaseGrid {
 					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, {
@@ -17189,10 +17578,7 @@ var DockviewComponent = class extends BaseGrid {
 				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,
@@ -17207,10 +17593,7 @@ var DockviewComponent = class extends BaseGrid {
 				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);
 			}
 		}
 	}
@@ -17245,10 +17628,7 @@ var DockviewComponent = class extends BaseGrid {
 			});
 			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;
@@ -17269,10 +17649,12 @@ var DockviewComponent = class extends BaseGrid {
 		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) => ({
@@ -17290,6 +17672,7 @@ var DockviewComponent = class extends BaseGrid {
 					skipSetGroupActive: true
 				});
 			});
+			mergedPanels = panels;
 			for (const snapshot of tabGroupSnapshots) {
 				const newTabGroup = to.model.createTabGroup({
 					label: snapshot.label,
@@ -17379,11 +17762,8 @@ var DockviewComponent = class extends BaseGrid {
 				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) {