dockview-core 8.1.0 → 8.3.0

package/dist/package/main.esm.mjs

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 8.1.0
+ * @version 8.3.0
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -1048,8 +1048,14 @@ var Splitview = class {
 		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: () => {
@@ -5794,7 +5800,7 @@ function resolveDndCapabilities(options) {
 		};
 		case "auto":
 		case void 0:
-		default: return isCoarsePrimaryInput$1() ? {
+		default: return isCoarsePrimaryInput$2() ? {
 			html5: false,
 			pointer: true,
 			pointerHandlesMouse: true
@@ -5805,7 +5811,7 @@ function resolveDndCapabilities(options) {
 		};
 	}
 }
-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;
@@ -7960,11 +7966,28 @@ var TabReorderController = class extends CompositeDisposable {
 		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;
@@ -10520,7 +10543,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 +11512,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 +11588,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 +11613,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) {
@@ -12373,7 +12417,6 @@ const ENTERPRISE_MODULE_NAMES = /* @__PURE__ */ new Set([
 	"AdvancedOverflow",
 	"AutoEdgeGroup",
 	"AutoHideEdgeGroup",
-	"ContextMenu",
 	"DndCompass",
 	"KeyboardDocking",
 	"KeyboardNavigation",
@@ -12455,8 +12498,8 @@ function logMissingModule(moduleName, reason) {
 * 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) {
@@ -12536,10 +12579,9 @@ function clearRegisteredModules() {
 *
 * 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:
@@ -12635,18 +12677,6 @@ const OPTION_MODULE_RULES = [
 		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",
@@ -13547,6 +13577,270 @@ const TabGroupChipsModule = defineModule({
 	}
 });
 
+//#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
 /**
@@ -13564,7 +13858,8 @@ const AllModules = [
 	HeaderActionsModule,
 	LiveRegionModule,
 	AdvancedDnDModule,
-	TabGroupChipsModule
+	TabGroupChipsModule,
+	ContextMenuModule
 ];
 
 //#endregion
@@ -13597,6 +13892,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 +13911,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 +13944,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 +13977,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 +14052,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 +14089,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 +14335,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
@@ -14146,6 +14551,14 @@ var PopupService = class extends CompositeDisposable {
 //#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;
 	}
@@ -14450,6 +14863,10 @@ var MiddleColumnView = class {
 		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;
 	}
@@ -14462,6 +14879,7 @@ var ShellManager = class {
 	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;
@@ -14552,11 +14970,13 @@ var ShellManager = class {
 				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
@@ -14620,6 +15040,7 @@ var ShellManager = class {
 		this._disposables.removeDisposable(view);
 		view.dispose();
 		this._viewConfigs.delete(position);
+		this._pendingSizes.delete(position);
 		this.updateTheme(this._gap, this._defaultCollapsedSize);
 	}
 	hasEdgeGroup(position) {
@@ -14643,6 +15064,7 @@ var ShellManager = class {
 				this._middleColumn.setViewVisible(position, visible);
 				break;
 		}
+		if (visible) this._flushPendingSizes();
 	}
 	isEdgeGroupVisible(position) {
 		switch (position) {
@@ -14660,20 +15082,63 @@ var ShellManager = class {
 		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;
@@ -14699,15 +15164,17 @@ var ShellManager = class {
 			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));
@@ -14715,7 +15182,7 @@ var ShellManager = class {
 		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));
@@ -14723,7 +15190,7 @@ var ShellManager = class {
 		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));
@@ -14731,7 +15198,7 @@ var ShellManager = class {
 		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));
@@ -14739,33 +15206,23 @@ var ShellManager = class {
 		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() {
@@ -15358,6 +15815,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 +15913,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 +15987,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 +16084,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 +16218,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 +16296,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 +16316,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 +16361,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 +16378,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 +16395,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 +16415,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 +16462,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
@@ -16084,6 +16607,13 @@ var DockviewComponent = class extends BaseGrid {
 				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(() => {
@@ -16092,7 +16622,7 @@ var DockviewComponent = class extends BaseGrid {
 				});
 				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);
@@ -16187,8 +16717,8 @@ var DockviewComponent = class extends BaseGrid {
 	}
 	/** 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
@@ -16371,35 +16901,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 +17045,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 +17078,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 +17115,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 +17139,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 +17169,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 +17626,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 +17760,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 +17832,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 +17851,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;
 					}
 				}
@@ -17151,13 +17879,10 @@ var DockviewComponent = class extends BaseGrid {
 					}));
 					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") {
@@ -17171,13 +17896,10 @@ var DockviewComponent = class extends BaseGrid {
 						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, {
@@ -17186,13 +17908,10 @@ var DockviewComponent = class extends BaseGrid {
 				}));
 				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,
@@ -17204,13 +17923,10 @@ var DockviewComponent = class extends BaseGrid {
 				}));
 				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);
 			}
 		}
 	}
@@ -17245,16 +17961,13 @@ 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;
 		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);
@@ -17269,10 +17982,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 +18005,7 @@ var DockviewComponent = class extends BaseGrid {
 					skipSetGroupActive: true
 				});
 			});
+			mergedPanels = panels;
 			for (const snapshot of tabGroupSnapshots) {
 				const newTabGroup = to.model.createTabGroup({
 					label: snapshot.label,
@@ -17302,6 +18018,21 @@ var DockviewComponent = class extends BaseGrid {
 			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
@@ -17367,23 +18098,17 @@ var DockviewComponent = class extends BaseGrid {
 				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) {
@@ -17501,6 +18226,16 @@ var DockviewComponent = class extends BaseGrid {
 		});
 		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);
@@ -17560,22 +18295,22 @@ var DockviewComponent = class extends BaseGrid {
 		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":
@@ -18474,4 +19209,4 @@ function createPaneview(element, options) {
 }
 
 //#endregion
-export { AdvancedDnDModule, AdvancedDnDService, BaseGrid, ContentContainer, DEFAULT_TAB_GROUP_COLORS, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDidDropEvent, Disposable as DockviewDisposable, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DockviewWillShowOverlayLocationEvent, DraggablePaneviewPanel, EdgeGroupModule, FloatingGroupModule, Gridview, GridviewApi, GridviewComponent, GridviewPanel, LayoutPriority, LiveRegionModule, LocalSelectionTransfer, OVERFLOW_MAX_TAB_ROWS_VARIABLE, OVERFLOW_WRAP_TABS_CAPPED_CLASS, OVERFLOW_WRAP_TABS_CLASS, OVERFLOW_WRAP_TABS_VERTICAL_TAB_HEIGHT_VARIABLE, Orientation, PROPERTY_KEYS_DOCKVIEW, PROPERTY_KEYS_GRIDVIEW, PROPERTY_KEYS_PANEVIEW, PROPERTY_KEYS_SPLITVIEW, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewUnhandledDragOverEvent, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, Tab, TabGroupChipsModule, TabGroupChipsService, TabGroupColorPalette, applyTabGroupAccent, clearRegisteredModules, createCloseButton, createDismissableLayer, createDockview, createGridview, createPaneview, createPinButton, createSplitview, defineModule, directionToPosition, findRelativeZIndexParent, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRegisteredModules, getRelativeLocation, indexInParent, isAnyEdgeGroupEnabled, isEdgeGroupEnabled, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, orthogonal, positionToDirection, prefersReducedMotion, registerModules, resolveMessages, resolveOpaqueBackground, resolveTabGroupAccent, themeAbyss, themeAbyssSpaced, themeCatppuccinMocha, themeCatppuccinMochaSpaced, themeDark, themeDracula, themeGithubDark, themeGithubDarkSpaced, themeGithubLight, themeGithubLightSpaced, themeLight, themeLightSpaced, themeMonokai, themeNord, themeNordSpaced, themeSolarizedLight, themeSolarizedLightSpaced, themeVisualStudio, toTarget };
+export { AdvancedDnDModule, AdvancedDnDService, BaseGrid, ContentContainer, ContextMenuController, ContextMenuModule, DEFAULT_TAB_GROUP_COLORS, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDidDropEvent, Disposable as DockviewDisposable, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DockviewWillShowOverlayLocationEvent, DraggablePaneviewPanel, EdgeGroupModule, FloatingGroupModule, Gridview, GridviewApi, GridviewComponent, GridviewPanel, LayoutPriority, LiveRegionModule, LocalSelectionTransfer, OVERFLOW_MAX_TAB_ROWS_VARIABLE, OVERFLOW_WRAP_TABS_CAPPED_CLASS, OVERFLOW_WRAP_TABS_CLASS, OVERFLOW_WRAP_TABS_VERTICAL_TAB_HEIGHT_VARIABLE, Orientation, PROPERTY_KEYS_DOCKVIEW, PROPERTY_KEYS_GRIDVIEW, PROPERTY_KEYS_PANEVIEW, PROPERTY_KEYS_SPLITVIEW, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewUnhandledDragOverEvent, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, Tab, TabGroupChipsModule, TabGroupChipsService, TabGroupColorPalette, applyTabGroupAccent, clearRegisteredModules, createCloseButton, createDismissableLayer, createDockview, createGridview, createPaneview, createPinButton, createSplitview, defineModule, directionToPosition, findRelativeZIndexParent, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRegisteredModules, getRelativeLocation, indexInParent, isAnyEdgeGroupEnabled, isEdgeGroupEnabled, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, orthogonal, positionToDirection, prefersReducedMotion, registerModules, resolveMessages, resolveOpaqueBackground, resolveTabGroupAccent, themeAbyss, themeAbyssSpaced, themeCatppuccinMocha, themeCatppuccinMochaSpaced, themeDark, themeDracula, themeGithubDark, themeGithubDarkSpaced, themeGithubLight, themeGithubLightSpaced, themeLight, themeLightSpaced, themeMonokai, themeNord, themeNordSpaced, themeSolarizedLight, themeSolarizedLightSpaced, themeVisualStudio, toTarget };