dockview-core 8.1.0 → 8.3.0

package/dist/dockview-core.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 8.1.0
+ * @version 8.3.0
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -1063,8 +1063,14 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			container.appendChild(view.element);
 			let viewSize;
 			if (typeof size === "number") viewSize = size;
-			else if (size.type === "split") viewSize = this.getViewSize(size.index) / 2;
-			else if (size.type === "invisible") viewSize = { cachedVisibleSize: size.cachedVisibleSize };
+			else if (size.type === "split") {
+				const splitTarget = this.viewItems[size.index];
+				if (splitTarget) {
+					const half = Math.floor(splitTarget.size / 2);
+					viewSize = splitTarget.size - half;
+					splitTarget.size = half;
+				} else viewSize = this.getViewSize(size.index) / 2;
+			} else if (size.type === "invisible") viewSize = { cachedVisibleSize: size.cachedVisibleSize };
 			else viewSize = view.minimumSize;
 			const disposable = view.onDidChange((newSize) => this.onDidChange(viewItem, newSize.size));
 			const viewItem = new ViewItem(container, view, viewSize, { dispose: () => {
@@ -5809,7 +5815,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			};
 			case "auto":
 			case void 0:
-			default: return isCoarsePrimaryInput$1() ? {
+			default: return isCoarsePrimaryInput$2() ? {
 				html5: false,
 				pointer: true,
 				pointerHandlesMouse: true
@@ -5820,7 +5826,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			};
 		}
 	}
-	function isCoarsePrimaryInput$1() {
+	function isCoarsePrimaryInput$2() {
 		if (globalThis.window === void 0 || !globalThis.matchMedia) return false;
 		const coarse = globalThis.matchMedia("(pointer: coarse)").matches;
 		const fine = globalThis.matchMedia("(pointer: fine)").matches;
@@ -7975,11 +7981,28 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			if (this._voidContainer && related && (related === this._voidContainer || this._voidContainer.contains(related))) return;
 			this.resetTabTransforms();
 			if (this._animState.sourceIndex === -1) {
-				var _this$group$model$dro2;
-				(_this$group$model$dro2 = this.group.model.dropTargetContainer) === null || _this$group$model$dro2 === void 0 || (_this$group$model$dro2 = _this$group$model$dro2.model) === null || _this$group$model$dro2 === void 0 || _this$group$model$dro2.clear();
+				this.clearHeaderAnchorOverlay();
 				this._animState = null;
 			} else this._animState.currentInsertionIndex = null;
 		}
+		/**
+		* Clear the anchored overlay only when this header is what rendered it.
+		* The container is shared with the group's content drop target, which
+		* renders into it on the same frame the cursor leaves the strip: the
+		* pointer backend calls `handleDragOver` on the new target before the
+		* global `onDragMove` that reaches us (#1612).
+		*/
+		clearHeaderAnchorOverlay() {
+			var _container$model;
+			const container = this.group.model.dropTargetContainer;
+			const outline = container === null || container === void 0 ? void 0 : container.renderedOutline;
+			if (outline && ![
+				this._tabsList,
+				this._voidContainer,
+				this._extendedDropZone
+			].some((scope) => scope === null || scope === void 0 ? void 0 : scope.contains(outline))) return;
+			container === null || container === void 0 || (_container$model = container.model) === null || _container$model === void 0 || _container$model.clear();
+		}
 		handleDragOver(event) {
 			var _this$accessor$option2;
 			if (!this._animState) return;
@@ -10535,7 +10558,11 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			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;
@@ -11500,7 +11527,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				this._group = value;
 				this._onDidGroupChange.fire({});
 				this.setupGroupEventListeners(oldGroup);
-				this._onDidLocationChange.fire({ location: this.group.api.location });
+				this.fireLocationChange();
 			}
 		}
 		get group() {
@@ -11576,6 +11603,23 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		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;
@@ -11584,9 +11628,9 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				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) {
@@ -12388,7 +12432,6 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		"AdvancedOverflow",
 		"AutoEdgeGroup",
 		"AutoHideEdgeGroup",
-		"ContextMenu",
 		"DndCompass",
 		"KeyboardDocking",
 		"KeyboardNavigation",
@@ -12470,8 +12513,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 	* case: calling `undo()` having never set the option at all.
 	*
 	* Interaction handlers are queries in this sense too: a right-click reaching an
-	* absent ContextMenu module means the app never asked for one, so it stays
-	* silent (`?.`) and the browser's own menu shows. Options are where intent is
+	* absent module means the app never asked for that feature, so it stays silent
+	* (`?.`) and the browser's own behaviour applies. Options are where intent is
 	* declared; see `optionsModules.ts`.
 	*/
 	function assertModule(service, moduleName, context) {
@@ -12551,10 +12594,9 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 	*
 	* This is the "declared intent" diagnostic. It fires when the user asks for a
 	* feature via options, at construction and on every `updateOptions`. It
-	* deliberately does *not* fire on user interaction: right-clicking without the
-	* ContextMenu module stays silent (the browser's own menu shows), because the
-	* `?.` service-slot call sites can't tell a missing module from a feature the
-	* app never wanted.
+	* deliberately does *not* fire on user interaction: an interaction reaching an
+	* absent module stays silent, because the `?.` service-slot call sites can't
+	* tell a missing module from a feature the app never wanted.
 	*
 	* Rules are a flat list rather than a `Record<keyof DockviewOptions, ...>`
 	* because dockview's options are nested and value-gated: `overflow.mode:
@@ -12650,18 +12692,6 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			moduleName: "AutoEdgeGroup",
 			when: (o) => isAnyEdgeGroupEnabled(o.dockToEdgeGroups)
 		},
-		{
-			optionKey: "getTabContextMenuItems",
-			reason: "getTabContextMenuItems",
-			moduleName: "ContextMenu",
-			when: (o) => o.getTabContextMenuItems != null
-		},
-		{
-			optionKey: "getTabGroupChipContextMenuItems",
-			reason: "getTabGroupChipContextMenuItems",
-			moduleName: "ContextMenu",
-			when: (o) => o.getTabGroupChipContextMenuItems != null
-		},
 		{
 			optionKey: "dndCompass",
 			reason: "dndCompass",
@@ -13562,6 +13592,270 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		}
 	});
 
+//#endregion
+//#region src/dockview/contextMenuService.ts
+	function popoverZIndexFor(target, group) {
+		var _group$api, _group$api$isPeeking;
+		if ((_group$api = group.api) === null || _group$api === void 0 || (_group$api$isPeeking = _group$api.isPeeking) === null || _group$api$isPeeking === void 0 ? void 0 : _group$api$isPeeking.call(_group$api)) return "calc(var(--dv-overlay-z-index, 999) + 100)";
+		if (!(target instanceof HTMLElement)) return;
+		const relativeParent = findRelativeZIndexParent(target);
+		return (relativeParent === null || relativeParent === void 0 ? void 0 : relativeParent.style.zIndex) ? `calc(${relativeParent.style.zIndex} * 2)` : void 0;
+	}
+	let _nextId = 0;
+	const nextContextMenuItemId = () => `dv-ctx-menu-item-${_nextId++}`;
+	function isItemConfig(item) {
+		return typeof item === "object";
+	}
+	function buildItem(label, close, action, disabled) {
+		const el = document.createElement("div");
+		el.className = "dv-context-menu-item";
+		el.setAttribute("role", "menuitem");
+		if (disabled) {
+			el.classList.add("dv-context-menu-item--disabled");
+			el.setAttribute("aria-disabled", "true");
+		}
+		el.textContent = label;
+		if (!disabled) el.addEventListener("click", () => {
+			action();
+			close();
+		});
+		return el;
+	}
+	function buildSeparator() {
+		const el = document.createElement("div");
+		el.className = "dv-context-menu-separator";
+		el.setAttribute("role", "separator");
+		return el;
+	}
+	function isCoarsePrimaryInput$1() {
+		if (globalThis.window === void 0 || !globalThis.matchMedia) return false;
+		const coarse = globalThis.matchMedia("(pointer: coarse)").matches;
+		const fine = globalThis.matchMedia("(pointer: fine)").matches;
+		return coarse && !fine;
+	}
+	function buildRenameInput(tabGroup) {
+		const wrapper = document.createElement("div");
+		wrapper.className = "dv-context-menu-rename";
+		const input = document.createElement("input");
+		input.className = "dv-context-menu-rename-input";
+		input.type = "text";
+		input.placeholder = "Name This Group";
+		input.value = tabGroup.label;
+		input.addEventListener("input", () => {
+			tabGroup.setLabel(input.value);
+		});
+		input.addEventListener("keydown", (e) => {
+			if (e.key !== "Escape" && e.key !== "Enter") e.stopPropagation();
+		});
+		input.addEventListener("click", (e) => {
+			e.stopPropagation();
+		});
+		wrapper.appendChild(input);
+		if (!isCoarsePrimaryInput$1()) requestAnimationFrame(() => {
+			input.focus();
+			input.select();
+		});
+		return wrapper;
+	}
+	function buildColorPicker(tabGroup, palette) {
+		const wrapper = document.createElement("div");
+		wrapper.className = "dv-context-menu-color-picker";
+		if (!palette.enabled) return wrapper;
+		for (const entry of palette.entries()) {
+			const swatch = document.createElement("div");
+			swatch.className = "dv-context-menu-color-swatch";
+			swatch.style.setProperty("--dv-tab-group-color", entry.value);
+			if (entry.label) swatch.title = entry.label;
+			if (tabGroup.color === entry.id) swatch.classList.add("dv-context-menu-color-swatch--selected");
+			swatch.addEventListener("click", () => {
+				tabGroup.setColor(entry.id);
+			});
+			wrapper.appendChild(swatch);
+		}
+		return wrapper;
+	}
+	var ContextMenuController = class {
+		constructor(accessor) {
+			this.accessor = accessor;
+		}
+		/**
+		* A single maximize/restore toggle whose label and behaviour track the
+		* group's live state: it reads *Restore* + calls `exitMaximized` when the
+		* group is maximized, otherwise *Maximize* + `maximize`. Only grid groups
+		* can be maximized, so the item is disabled for floating / popout panels
+		* that are not already maximized.
+		*/
+		buildMaximizeItem(panel, close) {
+			const isMaximized = panel.api.isMaximized();
+			return buildItem(isMaximized ? "Restore" : "Maximize", close, isMaximized ? () => panel.api.exitMaximized() : () => panel.api.maximize(), !isMaximized && panel.api.location.type !== "grid");
+		}
+		/**
+		* A single collapse/expand toggle whose label tracks the tab group's live
+		* state: *Expand* when the group is already collapsed, otherwise *Collapse*.
+		*/
+		buildCollapseItem(tabGroup, close) {
+			return buildItem(tabGroup.collapsed ? "Expand" : "Collapse", close, () => tabGroup.toggle());
+		}
+		/**
+		* Whether to auto-inject the built-in Pin/Unpin item at the top of the tab
+		* menu. True only when the PinnedTabs module is registered, pinning is
+		* enabled, and the app has not opted out via `pinnedTabs.contextMenuItem:
+		* false` (the item is on by default). This keeps pinning reachable from the
+		* menu without the app having to return `'pin'` from
+		* `getTabContextMenuItems` itself.
+		*/
+		_shouldInjectPin() {
+			const pinnedTabs = this.accessor.options.pinnedTabs;
+			return !!this.accessor.pinnedTabsService && !!(pinnedTabs === null || pinnedTabs === void 0 ? void 0 : pinnedTabs.enabled) && pinnedTabs.contextMenuItem !== false;
+		}
+		/**
+		* The tab menu items: the app's own items (if any) with the built-in
+		* `'pin'` item prepended when {@link _shouldInjectPin} applies, so the app
+		* keeps full control of its list, and pinning is added without disturbing
+		* it. Reuses the existing `'pin'` token rendering below.
+		*/
+		_resolveTabItems(panel, group, event) {
+			var _this$accessor$option, _this$accessor$option2, _this$accessor$option3;
+			const appItems = (_this$accessor$option = (_this$accessor$option2 = (_this$accessor$option3 = this.accessor.options).getTabContextMenuItems) === null || _this$accessor$option2 === void 0 ? void 0 : _this$accessor$option2.call(_this$accessor$option3, {
+				panel,
+				group,
+				api: this.accessor.api,
+				event
+			})) !== null && _this$accessor$option !== void 0 ? _this$accessor$option : [];
+			return this._shouldInjectPin() ? ["pin", ...appItems] : appItems;
+		}
+		/**
+		* Render a custom `component` menu item and append it to `menuEl`. Builds
+		* the framework renderer via the host's `createContextMenuItemComponent`
+		* factory and initialises it. Shared by the tab menu and the chip menu,
+		* which differ only in `identity`: the tab menu passes the `panel`, the chip
+		* menu passes the `tabGroup`. No-op when no renderer could be created (no
+		* factory configured, or the factory declined the component).
+		*/
+		appendComponentItem(menuEl, item, identity, group, close) {
+			var _this$accessor$option4, _this$accessor$option5;
+			const renderer = (_this$accessor$option4 = (_this$accessor$option5 = this.accessor.options).createContextMenuItemComponent) === null || _this$accessor$option4 === void 0 ? void 0 : _this$accessor$option4.call(_this$accessor$option5, {
+				id: nextContextMenuItemId(),
+				component: item.component
+			});
+			if (!renderer) return;
+			renderer.init(_objectSpread2(_objectSpread2({}, identity), {}, {
+				group,
+				api: this.accessor.api,
+				close,
+				componentProps: item.componentProps
+			}));
+			menuEl.appendChild(renderer.element);
+		}
+		/**
+		* The element for one built-in tab item, or `undefined` for a token this
+		* version doesn't know (an app on a newer typings version, or plain JS):
+		* an unrecognised token renders nothing rather than throwing.
+		*/
+		buildBuiltInTabItem(item, panel, group, close) {
+			switch (item) {
+				case "separator": return buildSeparator();
+				case "close": return buildItem("Close", close, () => panel.api.close());
+				case "closeOthers": return buildItem("Close Others", close, () => {
+					group.panels.filter((p) => p !== panel).forEach((p) => p.api.close());
+				});
+				case "closeAll": return buildItem("Close All", close, () => {
+					[...group.panels].forEach((p) => p.api.close());
+				});
+				case "closeLeft": {
+					const index = group.panels.indexOf(panel);
+					return buildItem("Close to the Left", close, () => {
+						group.panels.filter((_, i) => i < index).forEach((p) => p.api.close());
+					}, index <= 0);
+				}
+				case "closeRight": {
+					const index = group.panels.indexOf(panel);
+					return buildItem("Close to the Right", close, () => {
+						group.panels.filter((_, i) => i > index).forEach((p) => p.api.close());
+					}, index === -1 || index >= group.panels.length - 1);
+				}
+				case "maximize": return this.buildMaximizeItem(panel, close);
+				case "float": return buildItem("Float", close, () => this.accessor.api.addFloatingGroup(panel), panel.api.location.type === "floating");
+				case "popout": return buildItem("Open in New Window", close, () => {
+					this.accessor.api.addPopoutGroup(panel);
+				}, panel.api.location.type === "popout");
+				case "pin": return buildItem(panel.api.isPinned ? "Unpin tab" : "Pin tab", close, () => panel.api.setPinned(!panel.api.isPinned));
+				default: return;
+			}
+		}
+		/**
+		* Append one app-supplied item. A raw `element` is used as-is, a
+		* `component` goes through the framework renderer, and a `label` builds the
+		* default row; an item carrying none of the three renders nothing. Shared
+		* by both menus, which differ only in `identity`.
+		*/
+		appendConfigItem(menuEl, item, identity, group, close) {
+			if (item.element) menuEl.appendChild(item.element);
+			else if (item.component) this.appendComponentItem(menuEl, item, identity, group, close);
+			else if (item.label) menuEl.appendChild(buildItem(item.label, close, () => {
+				var _item$action;
+				return (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(item);
+			}, item.disabled));
+		}
+		show(panel, group, event) {
+			const items = this._resolveTabItems(panel, group, event);
+			if (items.length === 0) return;
+			event.preventDefault();
+			const popupService = this.accessor.getPopupServiceForGroup(group);
+			const close = () => popupService.close();
+			const menuEl = document.createElement("div");
+			menuEl.className = "dv-context-menu";
+			menuEl.setAttribute("role", "menu");
+			for (const item of items) {
+				if (isItemConfig(item)) {
+					this.appendConfigItem(menuEl, item, { panel }, group, close);
+					continue;
+				}
+				const el = this.buildBuiltInTabItem(item, panel, group, close);
+				if (el) menuEl.appendChild(el);
+			}
+			popupService.openPopover(menuEl, {
+				x: event.clientX,
+				y: event.clientY,
+				zIndex: popoverZIndexFor(event.target, group)
+			});
+		}
+		showForChip(tabGroup, group, event) {
+			if (!this.accessor.options.getTabGroupChipContextMenuItems) return;
+			const items = this.accessor.options.getTabGroupChipContextMenuItems({
+				tabGroup,
+				group,
+				api: this.accessor.api,
+				event
+			});
+			if (items.length === 0) return;
+			event.preventDefault();
+			const popupService = this.accessor.getPopupServiceForGroup(group);
+			const close = () => popupService.close();
+			const menuEl = document.createElement("div");
+			menuEl.className = "dv-context-menu";
+			menuEl.setAttribute("role", "menu");
+			for (const item of items) if (item === "separator") menuEl.appendChild(buildSeparator());
+			else if (item === "rename") menuEl.appendChild(buildRenameInput(tabGroup));
+			else if (item === "colorPicker") menuEl.appendChild(buildColorPicker(tabGroup, this.accessor.tabGroupColorPalette));
+			else if (item === "collapse") menuEl.appendChild(this.buildCollapseItem(tabGroup, close));
+			else if (item === "close") menuEl.appendChild(buildItem("Close All", close, () => {
+				group.panels.filter((p) => tabGroup.containsPanel(p.id)).forEach((p) => p.api.close());
+			}));
+			else if (isItemConfig(item)) this.appendConfigItem(menuEl, item, { tabGroup }, group, close);
+			popupService.openPopover(menuEl, {
+				x: event.clientX,
+				y: event.clientY,
+				zIndex: popoverZIndexFor(event.target, group)
+			});
+		}
+	};
+	const ContextMenuModule = defineModule({
+		name: "ContextMenu",
+		serviceKey: "contextMenuService",
+		create: (host) => new ContextMenuController(host)
+	});
+
 //#endregion
 //#region src/dockview/allModules.ts
 /**
@@ -13579,7 +13873,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		HeaderActionsModule,
 		LiveRegionModule,
 		AdvancedDnDModule,
-		TabGroupChipsModule
+		TabGroupChipsModule,
+		ContextMenuModule
 	];
 
 //#endregion
@@ -13612,6 +13907,13 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			});
 		}
 	};
+	/**
+	* 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;
@@ -13624,12 +13926,13 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			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;
 			}));
@@ -13656,11 +13959,24 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			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;
 			}
@@ -13676,22 +13992,73 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					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);
@@ -13700,6 +14067,15 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					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`;
@@ -13728,11 +14104,30 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					} 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";
@@ -13955,7 +14350,17 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					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
@@ -14161,6 +14566,14 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 //#endregion
 //#region src/dnd/dropTargetAnchorContainer.ts
 	var DropTargetAnchorContainer = class extends CompositeDisposable {
+		/**
+		* The element the live overlay was rendered for, `undefined` when nothing
+		* is showing. The container is shared by every drop target, so a caller
+		* tearing down only its own overlay must check this before `clear()`.
+		*/
+		get renderedOutline() {
+			return this._model ? this._outline : void 0;
+		}
 		get disabled() {
 			return this._disabled;
 		}
@@ -14465,6 +14878,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			const index = position === "top" ? this._topIndex : this._bottomIndex;
 			if (index !== void 0) this._splitview.resizeView(index, size);
 		}
+		/** The inner splitview's primary-axis (height) extent; zero until laid out. */
+		get axisSize() {
+			return this._splitview.size;
+		}
 		updateMargin(gap) {
 			this._splitview.margin = gap;
 		}
@@ -14477,6 +14894,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		constructor(container, dockviewElement, layoutGrid, gap = 0, defaultCollapsedSize = 35) {
 			this._disposables = new CompositeDisposable();
 			this._viewConfigs = /* @__PURE__ */ new Map();
+			this._pendingSizes = /* @__PURE__ */ new Map();
 			this._currentWidth = 0;
 			this._currentHeight = 0;
 			this._gap = gap;
@@ -14567,11 +14985,13 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					break;
 			}
 			this._disposables.addDisposables(view);
+			if (!view.isCollapsed && !this._canResize(position)) this._pendingSizes.set(position, initialSize);
 			this.updateTheme(this._gap, this._defaultCollapsedSize);
 			return view;
 		}
 		layout(width, height) {
 			this._outerSplitview.layout(width, height);
+			this._flushPendingSizes();
 		}
 		/**
 		* Called when the active theme changes. Updates splitview margins and
@@ -14635,6 +15055,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			this._disposables.removeDisposable(view);
 			view.dispose();
 			this._viewConfigs.delete(position);
+			this._pendingSizes.delete(position);
 			this.updateTheme(this._gap, this._defaultCollapsedSize);
 		}
 		hasEdgeGroup(position) {
@@ -14658,6 +15079,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					this._middleColumn.setViewVisible(position, visible);
 					break;
 			}
+			if (visible) this._flushPendingSizes();
 		}
 		isEdgeGroupVisible(position) {
 			switch (position) {
@@ -14675,20 +15097,63 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			const view = this._getView(position);
 			if (!view) return;
 			view.setCollapsed(collapsed);
-			const targetSize = collapsed ? view.collapsedSize : view.lastExpandedSize;
+			if (collapsed) {
+				this._pendingSizes.delete(position);
+				this._resizeView(position, view.collapsedSize);
+			} else this.resizeEdgeGroup(position, view.lastExpandedSize);
+		}
+		/**
+		* Resize the edge group at `position` along its primary axis (width for
+		* `left`/`right`, height for `top`/`bottom`), clamped by the group's
+		* constraints and the space available. Where `groupApi.setSize` lands.
+		*
+		* The size becomes the group's expanded size, so a collapsed group keeps
+		* its strip and takes it on expand, and it survives a `toJSON` round-trip.
+		*/
+		resizeEdgeGroup(position, size) {
+			const view = this._getView(position);
+			if (!view || !Number.isFinite(size)) return;
+			const target = Math.round(size);
+			if (target <= 0) return;
+			view.restoreExpandedSize(target);
+			if (view.isCollapsed) {
+				this._pendingSizes.delete(position);
+				return;
+			}
+			if (this._canResize(position)) {
+				this._pendingSizes.delete(position);
+				this._resizeView(position, target);
+			} else this._pendingSizes.set(position, target);
+		}
+		/** A resize lands only on a visible view (a hidden one is pinned to zero)
+		*  whose splitview has extent to distribute. */
+		_canResize(position) {
+			if (!this.isEdgeGroupVisible(position)) return false;
+			return (position === "left" || position === "right" ? this._outerSplitview.size : this._middleColumn.axisSize) > 0;
+		}
+		_resizeView(position, size) {
 			switch (position) {
 				case "left":
-					if (this._leftIndex !== void 0) this._outerSplitview.resizeView(this._leftIndex, targetSize);
+					if (this._leftIndex !== void 0) this._outerSplitview.resizeView(this._leftIndex, size);
 					break;
 				case "right":
-					if (this._rightIndex !== void 0) this._outerSplitview.resizeView(this._rightIndex, targetSize);
+					if (this._rightIndex !== void 0) this._outerSplitview.resizeView(this._rightIndex, size);
 					break;
 				case "top":
 				case "bottom":
-					this._middleColumn.resizeView(position, targetSize);
+					this._middleColumn.resizeView(position, size);
 					break;
 			}
 		}
+		_flushPendingSizes() {
+			if (this._pendingSizes.size === 0) return;
+			for (const [position, size] of this._pendingSizes) {
+				const view = this._getView(position);
+				if (!view || view.isCollapsed || !this._canResize(position)) continue;
+				this._pendingSizes.delete(position);
+				this._resizeView(position, size);
+			}
+		}
 		isEdgeGroupCollapsed(position) {
 			var _this$_getView$isColl, _this$_getView;
 			return (_this$_getView$isColl = (_this$_getView = this._getView(position)) === null || _this$_getView === void 0 ? void 0 : _this$_getView.isCollapsed) !== null && _this$_getView$isColl !== void 0 ? _this$_getView$isColl : false;
@@ -14714,15 +15179,17 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				maximumSize: Number.isFinite(view.configuredMaximumSize) ? view.configuredMaximumSize : void 0,
 				collapsedSize: view.configuredCollapsedSize
 			});
-			const expandedSize = (view, isVisible, liveSize, cachedVisibleSize) => {
+			const expandedSize = (view, position, isVisible, liveSize, cachedVisibleSize) => {
 				if (view.isCollapsed) return view.lastExpandedSize;
+				const pending = this._pendingSizes.get(position);
+				if (pending !== void 0) return pending;
 				if (!isVisible) return cachedVisibleSize !== null && cachedVisibleSize !== void 0 ? cachedVisibleSize : view.lastExpandedSize;
 				return liveSize;
 			};
 			if (this._leftView && this._leftIndex !== void 0) {
 				const visible = this._outerSplitview.isViewVisible(this._leftIndex);
 				edgeGroups.left = _objectSpread2({
-					size: expandedSize(this._leftView, visible, this._outerSplitview.getViewSize(this._leftIndex), this._outerSplitview.getViewCachedVisibleSize(this._leftIndex)),
+					size: expandedSize(this._leftView, "left", visible, this._outerSplitview.getViewSize(this._leftIndex), this._outerSplitview.getViewCachedVisibleSize(this._leftIndex)),
 					visible,
 					collapsed: this._leftView.isCollapsed || void 0
 				}, constraints(this._leftView));
@@ -14730,7 +15197,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			if (this._rightView && this._rightIndex !== void 0) {
 				const visible = this._outerSplitview.isViewVisible(this._rightIndex);
 				edgeGroups.right = _objectSpread2({
-					size: expandedSize(this._rightView, visible, this._outerSplitview.getViewSize(this._rightIndex), this._outerSplitview.getViewCachedVisibleSize(this._rightIndex)),
+					size: expandedSize(this._rightView, "right", visible, this._outerSplitview.getViewSize(this._rightIndex), this._outerSplitview.getViewCachedVisibleSize(this._rightIndex)),
 					visible,
 					collapsed: this._rightView.isCollapsed || void 0
 				}, constraints(this._rightView));
@@ -14738,7 +15205,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			if (this._topView) {
 				const visible = this._middleColumn.isViewVisible("top");
 				edgeGroups.top = _objectSpread2({
-					size: expandedSize(this._topView, visible, this._middleColumn.getViewSize("top"), this._middleColumn.getViewCachedVisibleSize("top")),
+					size: expandedSize(this._topView, "top", visible, this._middleColumn.getViewSize("top"), this._middleColumn.getViewCachedVisibleSize("top")),
 					visible,
 					collapsed: this._topView.isCollapsed || void 0
 				}, constraints(this._topView));
@@ -14746,7 +15213,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			if (this._bottomView) {
 				const visible = this._middleColumn.isViewVisible("bottom");
 				edgeGroups.bottom = _objectSpread2({
-					size: expandedSize(this._bottomView, visible, this._middleColumn.getViewSize("bottom"), this._middleColumn.getViewCachedVisibleSize("bottom")),
+					size: expandedSize(this._bottomView, "bottom", visible, this._middleColumn.getViewSize("bottom"), this._middleColumn.getViewCachedVisibleSize("bottom")),
 					visible,
 					collapsed: this._bottomView.isCollapsed || void 0
 				}, constraints(this._bottomView));
@@ -14754,33 +15221,23 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			return edgeGroups;
 		}
 		fromJSON(data) {
-			if (data.left && this._leftIndex !== void 0) {
-				var _this$_leftView2, _this$_leftView3, _data$left$collapsed, _this$_leftView$colla, _this$_leftView4;
-				(_this$_leftView2 = this._leftView) === null || _this$_leftView2 === void 0 || _this$_leftView2.restoreExpandedSize(data.left.size);
-				(_this$_leftView3 = this._leftView) === null || _this$_leftView3 === void 0 || _this$_leftView3.setCollapsed((_data$left$collapsed = data.left.collapsed) !== null && _data$left$collapsed !== void 0 ? _data$left$collapsed : false);
-				this._outerSplitview.resizeView(this._leftIndex, data.left.collapsed ? (_this$_leftView$colla = (_this$_leftView4 = this._leftView) === null || _this$_leftView4 === void 0 ? void 0 : _this$_leftView4.collapsedSize) !== null && _this$_leftView$colla !== void 0 ? _this$_leftView$colla : data.left.size : data.left.size);
-				if (!data.left.visible) this._outerSplitview.setViewVisible(this._leftIndex, false);
-			}
-			if (data.right && this._rightIndex !== void 0) {
-				var _this$_rightView2, _this$_rightView3, _data$right$collapsed, _this$_rightView$coll, _this$_rightView4;
-				(_this$_rightView2 = this._rightView) === null || _this$_rightView2 === void 0 || _this$_rightView2.restoreExpandedSize(data.right.size);
-				(_this$_rightView3 = this._rightView) === null || _this$_rightView3 === void 0 || _this$_rightView3.setCollapsed((_data$right$collapsed = data.right.collapsed) !== null && _data$right$collapsed !== void 0 ? _data$right$collapsed : false);
-				this._outerSplitview.resizeView(this._rightIndex, data.right.collapsed ? (_this$_rightView$coll = (_this$_rightView4 = this._rightView) === null || _this$_rightView4 === void 0 ? void 0 : _this$_rightView4.collapsedSize) !== null && _this$_rightView$coll !== void 0 ? _this$_rightView$coll : data.right.size : data.right.size);
-				if (!data.right.visible) this._outerSplitview.setViewVisible(this._rightIndex, false);
-			}
-			if (data.top) {
-				var _this$_topView2, _this$_topView3, _data$top$collapsed, _this$_topView$collap, _this$_topView4;
-				(_this$_topView2 = this._topView) === null || _this$_topView2 === void 0 || _this$_topView2.restoreExpandedSize(data.top.size);
-				(_this$_topView3 = this._topView) === null || _this$_topView3 === void 0 || _this$_topView3.setCollapsed((_data$top$collapsed = data.top.collapsed) !== null && _data$top$collapsed !== void 0 ? _data$top$collapsed : false);
-				this._middleColumn.resizeView("top", data.top.collapsed ? (_this$_topView$collap = (_this$_topView4 = this._topView) === null || _this$_topView4 === void 0 ? void 0 : _this$_topView4.collapsedSize) !== null && _this$_topView$collap !== void 0 ? _this$_topView$collap : data.top.size : data.top.size);
-				if (!data.top.visible) this._middleColumn.setViewVisible("top", false);
-			}
-			if (data.bottom) {
-				var _this$_bottomView2, _this$_bottomView3, _data$bottom$collapse, _this$_bottomView$col, _this$_bottomView4;
-				(_this$_bottomView2 = this._bottomView) === null || _this$_bottomView2 === void 0 || _this$_bottomView2.restoreExpandedSize(data.bottom.size);
-				(_this$_bottomView3 = this._bottomView) === null || _this$_bottomView3 === void 0 || _this$_bottomView3.setCollapsed((_data$bottom$collapse = data.bottom.collapsed) !== null && _data$bottom$collapse !== void 0 ? _data$bottom$collapse : false);
-				this._middleColumn.resizeView("bottom", data.bottom.collapsed ? (_this$_bottomView$col = (_this$_bottomView4 = this._bottomView) === null || _this$_bottomView4 === void 0 ? void 0 : _this$_bottomView4.collapsedSize) !== null && _this$_bottomView$col !== void 0 ? _this$_bottomView$col : data.bottom.size : data.bottom.size);
-				if (!data.bottom.visible) this._middleColumn.setViewVisible("bottom", false);
+			for (const position of [
+				"left",
+				"right",
+				"top",
+				"bottom"
+			]) {
+				var _state$collapsed;
+				const state = data[position];
+				const view = this._getView(position);
+				if (!state || !view) continue;
+				view.restoreExpandedSize(state.size);
+				view.setCollapsed((_state$collapsed = state.collapsed) !== null && _state$collapsed !== void 0 ? _state$collapsed : false);
+				if (state.collapsed) {
+					this._pendingSizes.delete(position);
+					this._resizeView(position, view.collapsedSize);
+				} else this.resizeEdgeGroup(position, state.size);
+				this.setEdgeGroupVisible(position, !!state.visible);
 			}
 		}
 		dispose() {
@@ -15373,6 +15830,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			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();
@@ -15470,7 +15928,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			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();
@@ -15544,7 +16002,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			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() {
@@ -15641,15 +16099,32 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					}
 				};
 				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);
@@ -15758,6 +16233,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					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);
@@ -15835,6 +16311,16 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			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(() => {
@@ -15845,12 +16331,21 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					});
 					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)) {
@@ -15881,10 +16376,15 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					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));
@@ -15893,7 +16393,15 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			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, {
@@ -15902,6 +16410,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					skipSetActiveGroup: true
 				}));
 				this.movingLock(() => group.model.openPanel(item, { skipSetGroupActive: true }));
+				movedPanels = [{
+					panel: item,
+					from: sourceGroup
+				}];
 			} else {
 				var _this$_popoutWindowSe8;
 				group = item;
@@ -15918,11 +16430,21 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					});
 					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) {
@@ -15955,6 +16477,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				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
@@ -16099,6 +16622,13 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					position
 				};
 				group.model.headerPosition = position;
+				const resizeDisposable = group.onDidChange((event) => {
+					var _this$_shellManager3;
+					if (!event) return;
+					const size = position === "left" || position === "right" ? event.width : event.height;
+					if (typeof size !== "number") return;
+					(_this$_shellManager3 = this._shellManager) === null || _this$_shellManager3 === void 0 || _this$_shellManager3.resizeEdgeGroup(position, size);
+				});
 				const autoCollapseDisposable = group.model.onDidRemovePanel(() => {
 					if (!group.model.isEmpty) return;
 					if (service.isAutoReveal(group)) queueMicrotask(() => {
@@ -16107,7 +16637,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					});
 					else this.setEdgeGroupCollapsed(group, true);
 				});
-				service.add(position, group, autoCollapseDisposable);
+				service.add(position, group, new CompositeDisposable(autoCollapseDisposable, resizeDisposable));
 				if (options.autoHide !== void 0) service.setAutoHide(group, options.autoHide);
 				if (options.autoReveal !== void 0) service.setAutoReveal(group, options.autoReveal);
 				this._onDidAddGroup.fire(group);
@@ -16202,8 +16732,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		}
 		/** The size an edge group expands to (pre-collapse); sizes the peek. */
 		getEdgeGroupExpandedSize(position) {
-			var _this$_shellManager$g, _this$_shellManager3;
-			return (_this$_shellManager$g = (_this$_shellManager3 = this._shellManager) === null || _this$_shellManager3 === void 0 ? void 0 : _this$_shellManager3.getEdgeGroupExpandedSize(position)) !== null && _this$_shellManager$g !== void 0 ? _this$_shellManager$g : 0;
+			var _this$_shellManager$g, _this$_shellManager4;
+			return (_this$_shellManager$g = (_this$_shellManager4 = this._shellManager) === null || _this$_shellManager4 === void 0 ? void 0 : _this$_shellManager4.getEdgeGroupExpandedSize(position)) !== null && _this$_shellManager$g !== void 0 ? _this$_shellManager$g : 0;
 		}
 		/** Reposition a single `renderer:'always'` panel's overlay over its
 		*  reference container, optionally forcing it visible (the auto-hide peek
@@ -16386,35 +16916,119 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			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;
@@ -16446,9 +17060,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 						* 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]);
@@ -16478,7 +17093,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					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);
@@ -16515,6 +17130,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				* 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();
@@ -16537,7 +17154,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				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 [
@@ -16567,13 +17184,40 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				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
 						});
@@ -16997,22 +17641,100 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		* 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).
@@ -17053,6 +17775,18 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				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));
 		}
@@ -17113,10 +17847,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					});
 				});
 				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
@@ -17135,10 +17866,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 						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;
 						}
 					}
@@ -17166,13 +17894,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 						}));
 						this.doRemoveGroup(sourceGroup, { skipActive: true });
 						const updatedTargetLocation = getRelativeLocation(destinationGridview.orientation, getGridLocation(destinationGroup.element), destinationTarget);
-						const newGroup = this.createGroupAtLocation(updatedTargetLocation, void 0, void 0, destinationGridview);
+						const newGroup = this.createGroupAtLocation(updatedTargetLocation, this.dropSizing(getGridLocation(destinationGroup.element)), 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") {
@@ -17186,13 +17911,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 							skipSetActiveGroup: true
 						}));
 						if (!removedPanel) throw new Error(`dockview: No panel with id ${sourceItemId}`);
-						const newGroup = this.createGroupAtLocation(targetLocation, void 0, void 0, destinationGridview);
+						const newGroup = this.createGroupAtLocation(targetLocation, this.dropSizing(referenceLocation), 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, {
@@ -17201,13 +17923,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					}));
 					const updatedReferenceLocation = getGridLocation(destinationGroup.element);
 					const location = getRelativeLocation(destinationGridview.orientation, updatedReferenceLocation, destinationTarget);
-					this.movingLock(() => this.doAddGroup(targetGroup, location, void 0, destinationGridview));
+					this.movingLock(() => this.doAddGroup(targetGroup, location, this.dropSizing(updatedReferenceLocation), 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,
@@ -17219,13 +17938,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					}));
 					if (!removedPanel) throw new Error(`dockview: No panel with id ${sourceItemId}`);
 					const dropLocation = getRelativeLocation(destinationGridview.orientation, referenceLocation, destinationTarget);
-					const group = this.createGroupAtLocation(dropLocation, void 0, void 0, destinationGridview);
+					const group = this.createGroupAtLocation(dropLocation, this.dropSizing(referenceLocation), 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);
 				}
 			}
 		}
@@ -17260,16 +17976,13 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				});
 				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;
 			else {
 				const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
-				targetGroup = this.createGroupAtLocation(dropLocation);
+				targetGroup = this.createGroupAtLocation(dropLocation, this.dropSizing(referenceLocation));
 			}
 			if (!options.keepEmptyGroups && sourceGroup.model.size === 0 && sourceGroup !== targetGroup) this.doRemoveGroup(sourceGroup, { skipActive: true });
 			addPanelsToGroup(targetGroup);
@@ -17284,10 +17997,12 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			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) => ({
@@ -17305,6 +18020,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 						skipSetGroupActive: true
 					});
 				});
+				mergedPanels = panels;
 				for (const snapshot of tabGroupSnapshots) {
 					const newTabGroup = to.model.createTabGroup({
 						label: snapshot.label,
@@ -17317,6 +18033,21 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				if (options.skipSetActive !== true) this.doSetGroupAndPanelActive(to);
 				else if (!this.activePanel) this.doSetGroupAndPanelActive(to);
 			} else {
+				const isReorderWithinBranch = (() => {
+					if (from.api.location.type === "edge" || to.api.location.type === "edge") return false;
+					const root = this.getGridviewForGroup(from);
+					if (root !== this.getGridviewForGroup(to)) return false;
+					let fromLocation;
+					let toLocation;
+					try {
+						fromLocation = getGridLocation(from.element);
+						toLocation = getGridLocation(to.element);
+					} catch (_unused) {
+						return false;
+					}
+					if (fromLocation.length === 0 || toLocation.length === 0) return false;
+					return sequenceEquals(tail(fromLocation)[0], tail(toLocation)[0]) && getLocationOrientation(root.orientation, toLocation) === getDirectionOrientation(target);
+				})();
 				if (from.api.location.type === "edge") {
 					/**
 					* Edge groups are permanent structural elements and must
@@ -17382,23 +18113,17 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					const referenceLocation = getGridLocation(to.element);
 					const dropLocation = getRelativeLocation(destGridview.orientation, referenceLocation, target);
 					let size;
-					switch (destGridview.orientation) {
-						case "VERTICAL":
-							size = referenceLocation.length % 2 == 0 ? from.api.width : from.api.height;
-							break;
-						case "HORIZONTAL":
-							size = referenceLocation.length % 2 == 0 ? from.api.height : from.api.width;
-							break;
+					if (isReorderWithinBranch) size = getDirectionOrientation(target) === "HORIZONTAL" ? from.api.width : from.api.height;
+					else {
+						var _referenceLocation;
+						size = Sizing.Split((_referenceLocation = referenceLocation[referenceLocation.length - 1]) !== null && _referenceLocation !== void 0 ? _referenceLocation : 0);
 					}
 					destGridview.addView(source, size, dropLocation);
 					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) {
@@ -17516,6 +18241,16 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			});
 			return panel;
 		}
+		/**
+		* Sizing for a group created by a drop next to `referenceLocation`: half
+		* of the group the overlay was drawn over, leaving its siblings alone, so
+		* the panel lands in the region the overlay indicated (#1612). Gridview
+		* rewrites the index to 0 when a cross-axis drop wraps the reference in a
+		* new branch, so one value serves both paths.
+		*/
+		dropSizing(referenceLocation) {
+			return Sizing.Split(referenceLocation.length === 0 ? 0 : referenceLocation[referenceLocation.length - 1]);
+		}
 		createGroupAtLocation(location, size, options, gridview = this.gridview) {
 			const group = this.createGroup(options);
 			this.doAddGroup(group, location, size, gridview);
@@ -17575,22 +18310,22 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			return location.length % 2 == 1 ? rootOrientation : orthogonal(rootOrientation);
 		}
 		updateTheme() {
-			var _this$_options$theme, _this$_shellThemeClas, _theme$gap, _this$_popoutWindowSe23, _this$_popoutWindowSe24, _this$_shellManager4, _theme$edgeGroupColla, _theme$tabGroupIndica;
+			var _this$_options$theme, _this$_shellThemeClas, _theme$gap, _this$_popoutWindowSe23, _this$_popoutWindowSe24, _this$_shellManager5, _theme$edgeGroupColla, _theme$tabGroupIndica;
 			const theme = (_this$_options$theme = this._options.theme) !== null && _this$_options$theme !== void 0 ? _this$_options$theme : themeAbyss;
 			(_this$_shellThemeClas = this._shellThemeClassnames) === null || _this$_shellThemeClas === void 0 || _this$_shellThemeClas.setClassNames(theme.className);
 			const gap = (_theme$gap = theme.gap) !== null && _theme$gap !== void 0 ? _theme$gap : 0;
 			this.gridview.margin = gap;
 			for (const floating of this.floatingGroups) floating.gridview.margin = gap;
 			for (const entry of (_this$_popoutWindowSe23 = (_this$_popoutWindowSe24 = this._popoutWindowService) === null || _this$_popoutWindowSe24 === void 0 ? void 0 : _this$_popoutWindowSe24.entries) !== null && _this$_popoutWindowSe23 !== void 0 ? _this$_popoutWindowSe23 : []) entry.gridview.margin = gap;
-			(_this$_shellManager4 = this._shellManager) === null || _this$_shellManager4 === void 0 || _this$_shellManager4.updateTheme(gap, (_theme$edgeGroupColla = theme.edgeGroupCollapsedSize) !== null && _theme$edgeGroupColla !== void 0 ? _theme$edgeGroupColla : 35);
+			(_this$_shellManager5 = this._shellManager) === null || _this$_shellManager5 === void 0 || _this$_shellManager5.updateTheme(gap, (_theme$edgeGroupColla = theme.edgeGroupCollapsedSize) !== null && _theme$edgeGroupColla !== void 0 ? _theme$edgeGroupColla : 35);
 			if (theme.dndOverlayBorder === void 0) {
-				var _this$_shellManager5;
+				var _this$_shellManager6;
 				this.element.style.removeProperty("--dv-drag-over-border");
-				(_this$_shellManager5 = this._shellManager) === null || _this$_shellManager5 === void 0 || _this$_shellManager5.element.style.removeProperty("--dv-drag-over-border");
+				(_this$_shellManager6 = this._shellManager) === null || _this$_shellManager6 === void 0 || _this$_shellManager6.element.style.removeProperty("--dv-drag-over-border");
 			} else {
-				var _this$_shellManager6;
+				var _this$_shellManager7;
 				this.element.style.setProperty("--dv-drag-over-border", theme.dndOverlayBorder);
-				(_this$_shellManager6 = this._shellManager) === null || _this$_shellManager6 === void 0 || _this$_shellManager6.element.style.setProperty("--dv-drag-over-border", theme.dndOverlayBorder);
+				(_this$_shellManager7 = this._shellManager) === null || _this$_shellManager7 === void 0 || _this$_shellManager7.element.style.setProperty("--dv-drag-over-border", theme.dndOverlayBorder);
 			}
 			switch (theme.dndOverlayMounting) {
 				case "absolute":
@@ -18493,6 +19228,8 @@ exports.AdvancedDnDModule = AdvancedDnDModule;
 exports.AdvancedDnDService = AdvancedDnDService;
 exports.BaseGrid = BaseGrid;
 exports.ContentContainer = ContentContainer;
+exports.ContextMenuController = ContextMenuController;
+exports.ContextMenuModule = ContextMenuModule;
 exports.DEFAULT_TAB_GROUP_COLORS = DEFAULT_TAB_GROUP_COLORS;
 exports.DefaultDockviewDeserialzier = DefaultDockviewDeserialzier;
 exports.DefaultTab = DefaultTab;