dockview-core 8.2.0 → 8.3.1

package/dist/package/main.esm.mjs

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 8.2.0
+ * @version 8.3.1
  * @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: () => {
@@ -4441,8 +4447,9 @@ var PointerDragController = class PointerDragController extends CompositeDisposa
 		for (const el of elements) {
 			let current = el;
 			while (current) {
+				var _target$isHitTestTran;
 				const target = this._targetByElement.get(current);
-				if (target) return target;
+				if (target && !((_target$isHitTestTran = target.isHitTestTransparent) === null || _target$isHitTestTran === void 0 ? void 0 : _target$isHitTestTran.call(target))) return target;
 				current = current.parentElement;
 			}
 		}
@@ -4538,10 +4545,14 @@ var PointerDropTarget = class extends CompositeDisposable {
 			element: this.element,
 			handleDragOver: (e) => this._onDragOver(e),
 			handleDragLeave: () => this._onDragLeave(),
-			handleDrop: (e) => this._onDropEvent(e)
+			handleDrop: (e) => this._onDropEvent(e),
+			isHitTestTransparent: options.isHitTestTransparent
 		};
 		this.addDisposables(this._onDrop, this._onWillShowOverlay, PointerDragController.getInstance().registerTarget(handle));
 	}
+	clearOverlay() {
+		this._clearOwnOverlay();
+	}
 	setTargetZones(zones) {
 		this._acceptedTargetZonesSet = new Set(zones);
 	}
@@ -5794,7 +5805,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 +5816,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;
@@ -5861,6 +5872,7 @@ var Tab = class extends CompositeDisposable {
 			if (this.accessor.id === (data === null || data === void 0 ? void 0 : data.viewId)) {
 				var _this$accessor$option;
 				if (((_this$accessor$option = this.accessor.options.theme) === null || _this$accessor$option === void 0 ? void 0 : _this$accessor$option.tabAnimation) === "smooth") return false;
+				if (data.tabGroupId && this.group.model.getTabGroupForPanel(this.panel.id)) return false;
 				return true;
 			}
 			return this.group.model.canDisplayOverlay(event, position, "tab");
@@ -7308,7 +7320,23 @@ var TabGroupManager = class {
 	}
 	updateDirection() {
 		const isVertical = this._ctx.getDirection() === "vertical";
-		for (const [, entry] of this._chipRenderers) entry.dropTarget.setTargetZones(isVertical ? ["top"] : ["left"]);
+		for (const [, entry] of this._chipRenderers) {
+			const zones = isVertical ? ["top"] : ["left"];
+			entry.dropTarget.setTargetZones(zones);
+			entry.pointerDropTarget.setTargetZones(zones);
+		}
+	}
+	/**
+	* Drop any overlay the chips are showing. A group move is committed by a
+	* capturing listener on the tabs list that stops the event, so the chip
+	* target under the cursor never sees the drop that would clear its own.
+	*/
+	clearChipDropOverlays() {
+		for (const [, entry] of this._chipRenderers) {
+			var _entry$dropTarget, _entry$pointerDropTar;
+			(_entry$dropTarget = entry.dropTarget) === null || _entry$dropTarget === void 0 || _entry$dropTarget.clearOverlay();
+			(_entry$pointerDropTar = entry.pointerDropTarget) === null || _entry$pointerDropTar === void 0 || _entry$pointerDropTar.clearOverlay();
+		}
 	}
 	snapshotChipWidths() {
 		const widths = /* @__PURE__ */ new Map();
@@ -7557,9 +7585,8 @@ var TabGroupManager = class {
 		};
 		if (chip instanceof TabGroupChip) disposables.push(chip.onContextMenu(onContextMenu));
 		else disposables.push(new LongPressDetector(chip.element, { onLongPress: onContextMenu }), addDisposableListener(chip.element, "contextmenu", onContextMenu));
-		const isVertical = this._ctx.getDirection() === "vertical";
-		const dropTarget = new Droptarget(chip.element, {
-			acceptedTargetZones: isVertical ? ["top"] : ["left"],
+		const dropTargetOptions = {
+			acceptedTargetZones: this._ctx.getDirection() === "vertical" ? ["top"] : ["left"],
 			overlayModel: { activationSize: {
 				value: 100,
 				type: "percentage"
@@ -7570,15 +7597,18 @@ var TabGroupManager = class {
 				const data = getPanelData();
 				if (this._ctx.accessor.id === (data === null || data === void 0 ? void 0 : data.viewId)) {
 					var _this$_ctx$accessor$o3;
-					if (((_this$_ctx$accessor$o3 = this._ctx.accessor.options.theme) === null || _this$_ctx$accessor$o3 === void 0 ? void 0 : _this$_ctx$accessor$o3.tabAnimation) === "smooth") return false;
+					if (((_this$_ctx$accessor$o3 = this._ctx.accessor.options.theme) === null || _this$_ctx$accessor$o3 === void 0 ? void 0 : _this$_ctx$accessor$o3.tabAnimation) === "smooth" && !data.tabGroupId) return false;
 					return true;
 				}
 				return this._ctx.group.model.canDisplayOverlay(event, position, "tab");
 			}
-		});
-		disposables.push(dropTarget, dropTarget.onDrop((event) => {
+		};
+		const dropTarget = html5Backend.createDropTarget(chip.element, dropTargetOptions);
+		const pointerDropTarget = pointerBackend.createDropTarget(chip.element, dropTargetOptions);
+		const onDrop = (event) => {
 			this._callbacks.onChipDrop(tabGroup, event);
-		}));
+		};
+		disposables.push(dropTarget, dropTarget.onDrop(onDrop), pointerDropTarget, pointerDropTarget.onDrop(onDrop));
 		const disposable = new CompositeDisposable(...disposables);
 		this._chipRenderers.set(tabGroup.id, {
 			chip,
@@ -7586,7 +7616,8 @@ var TabGroupManager = class {
 			pointerDragSource: dragSources.pointerDragSource,
 			dragSourcesDisposable: dragSources.disposable,
 			disposable,
-			dropTarget
+			dropTarget,
+			pointerDropTarget
 		});
 		if (tabGroup.collapsed) this._skipNextCollapseAnimation = true;
 	}
@@ -7831,7 +7862,14 @@ var TabReorderController = class extends CompositeDisposable {
 	* dragover bridge may have installed.
 	*/
 	handlePointerDragEnd(e) {
-		if (e && this._animState && this._animState.sourceIndex !== -1 && !this._animState.sourceTabGroupId && this._animState.currentInsertionIndex !== null && this.isPointInsideTabsList(e.clientX, e.clientY)) this.commitPointerReorder(e.pointerEvent);
+		if (e && this._animState && this._animState.sourceIndex !== -1 && this._animState.currentInsertionIndex !== null && this.isPointInsideTabsList(e.clientX, e.clientY)) {
+			const sourceTabGroupId = this._animState.sourceTabGroupId;
+			if (sourceTabGroupId) {
+				const insertionIndex = this._animState.currentInsertionIndex;
+				this._animState = null;
+				this.commitGroupMove(sourceTabGroupId, insertionIndex);
+			} else this.commitPointerReorder(e.pointerEvent);
+		}
 		this._pointerInsideTabsList = false;
 		this.resetDragAnimation();
 	}
@@ -7960,11 +7998,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;
@@ -8450,6 +8505,7 @@ var TabReorderController = class extends CompositeDisposable {
 	commitGroupMove(sourceTabGroupId, insertionIndex) {
 		const data = getPanelData();
 		this._tabGroupManager.disposeChipDrag(sourceTabGroupId);
+		this._tabGroupManager.clearChipDropOverlays();
 		if (this.group.model.getTabGroups().some((tg) => tg.id === sourceTabGroupId)) {
 			var _this$accessor$option3;
 			if (((_this$accessor$option3 = this.accessor.options.theme) === null || _this$accessor$option3 === void 0 ? void 0 : _this$accessor$option3.tabAnimation) === "smooth") {
@@ -8807,7 +8863,16 @@ var Tabs = class extends CompositeDisposable {
 			}
 		});
 		this._reorder = new TabReorderController(this);
-		this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, this._pointerActivation, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._reorder, PointerDragController.getInstance().onDragEnd((e) => {
+		const tabsListPointerTarget = pointerBackend.createDropTarget(this._tabsList, {
+			acceptedTargetZones: ["center"],
+			canDisplayOverlay: () => false,
+			isHitTestTransparent: () => {
+				const data = getPanelData();
+				if ((data === null || data === void 0 ? void 0 : data.viewId) !== this.accessor.id || data.groupId !== this.group.id) return true;
+				return data.panelId === null && !data.tabGroupId;
+			}
+		});
+		this.addDisposables(tabsListPointerTarget, this._onOverflowTabsChange, this._observerDisposable, this._pointerActivation, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._reorder, PointerDragController.getInstance().onDragEnd((e) => {
 			this._reorder.handlePointerDragEnd(e);
 		}), PointerDragController.getInstance().onDragMove((e) => {
 			this._reorder.handlePointerDragMove(e.clientX, e.clientY);
@@ -9283,6 +9348,10 @@ var Tabs = class extends CompositeDisposable {
 	* (when the source tab is currently to the left of the target slot, its
 	* removal shifts the insertion index down by one). Always clears
 	* `targetTabGroupId` so the dropped tab lands outside the group.
+	*
+	* A chip dropped on a chip is a group move: the panel path would route it
+	* through the cross-group machinery, which rebuilds the tab group under a
+	* new id.
 	*/
 	_handleChipDrop(tabGroup, event) {
 		const firstPanelId = tabGroup.panelIds[0];
@@ -9290,6 +9359,14 @@ var Tabs = class extends CompositeDisposable {
 		const insertionIndex = this._tabs.findIndex((x) => x.value.panel.id === firstPanelId);
 		if (insertionIndex === -1) return;
 		const data = getPanelData();
+		if (data === null || data === void 0 ? void 0 : data.tabGroupId) {
+			var _animState$currentIns2;
+			const animState = this._animState;
+			this._animState = null;
+			this._pendingCollapse = false;
+			this._commitGroupMove(data.tabGroupId, (_animState$currentIns2 = animState === null || animState === void 0 ? void 0 : animState.currentInsertionIndex) !== null && _animState$currentIns2 !== void 0 ? _animState$currentIns2 : insertionIndex);
+			return;
+		}
 		const sourceIndex = (data === null || data === void 0 ? void 0 : data.groupId) === this.group.id && (data === null || data === void 0 ? void 0 : data.panelId) ? this._tabs.findIndex((x) => x.value.panel.id === data.panelId) : -1;
 		const adjustedIndex = insertionIndex - (sourceIndex !== -1 && sourceIndex < insertionIndex ? 1 : 0);
 		this._onDrop.fire({
@@ -12394,7 +12471,6 @@ const ENTERPRISE_MODULE_NAMES = /* @__PURE__ */ new Set([
 	"AdvancedOverflow",
 	"AutoEdgeGroup",
 	"AutoHideEdgeGroup",
-	"ContextMenu",
 	"DndCompass",
 	"KeyboardDocking",
 	"KeyboardNavigation",
@@ -12476,8 +12552,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) {
@@ -12557,10 +12633,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:
@@ -12656,18 +12731,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",
@@ -13568,6 +13631,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
 /**
@@ -13585,7 +13912,8 @@ const AllModules = [
 	HeaderActionsModule,
 	LiveRegionModule,
 	AdvancedDnDModule,
-	TabGroupChipsModule
+	TabGroupChipsModule,
+	ContextMenuModule
 ];
 
 //#endregion
@@ -14277,6 +14605,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;
 	}
@@ -14581,6 +14917,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;
 	}
@@ -14593,6 +14933,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;
@@ -14683,11 +15024,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
@@ -14751,6 +15094,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) {
@@ -14774,6 +15118,7 @@ var ShellManager = class {
 				this._middleColumn.setViewVisible(position, visible);
 				break;
 		}
+		if (visible) this._flushPendingSizes();
 	}
 	isEdgeGroupVisible(position) {
 		switch (position) {
@@ -14791,20 +15136,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;
@@ -14830,15 +15218,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));
@@ -14846,7 +15236,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));
@@ -14854,7 +15244,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));
@@ -14862,7 +15252,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));
@@ -14870,33 +15260,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() {
@@ -16064,10 +16444,11 @@ var DockviewComponent = class extends BaseGrid {
 			group = this.createGroup();
 			this._onDidAddGroup.fire(group);
 			this.movingLock(() => this.removePanel(item, {
-				removeEmptyGroup: true,
+				removeEmptyGroup: false,
 				skipDispose: true,
 				skipSetActiveGroup: true
 			}));
+			this.removeGroupIfEmpty(sourceGroup);
 			this.movingLock(() => group.model.openPanel(item, { skipSetGroupActive: true }));
 			movedPanels = [{
 				panel: item,
@@ -16138,6 +16519,9 @@ var DockviewComponent = class extends BaseGrid {
 		});
 		for (const { panel, from } of movedPanels) this.fireDidMovePanel(panel, from);
 	}
+	removeGroupIfEmpty(group) {
+		if (group.model.size === 0) this.doRemoveGroup(group, { skipActive: true });
+	}
 	/**
 	* Build an empty gridview configured to match the main grid's styling, for
 	* hosting a nested layout inside a floating or popout window.
@@ -16281,6 +16665,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(() => {
@@ -16289,7 +16680,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);
@@ -16384,8 +16775,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
@@ -17546,7 +17937,7 @@ 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.fireDidMovePanel(this.getGroupPanel(sourceItemId), sourceGroup);
@@ -17563,7 +17954,7 @@ 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.fireDidMovePanel(removedPanel, sourceGroup);
@@ -17575,7 +17966,7 @@ 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.fireDidMovePanel(this.getGroupPanel(sourceItemId), sourceGroup);
@@ -17590,7 +17981,7 @@ 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.fireDidMovePanel(removedPanel, sourceGroup);
@@ -17634,7 +18025,7 @@ var DockviewComponent = class extends BaseGrid {
 		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);
@@ -17685,6 +18076,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
@@ -17750,13 +18156,10 @@ 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);
@@ -17881,6 +18284,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);
@@ -17940,22 +18353,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":
@@ -18854,4 +19267,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 };