dockview-core 8.2.0 → 8.3.0

package/dist/package/main.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 8.2.0
+ * @version 8.3.0
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -1050,8 +1050,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: () => {
@@ -5796,7 +5802,7 @@ function resolveDndCapabilities(options) {
 		};
 		case "auto":
 		case void 0:
-		default: return isCoarsePrimaryInput$1() ? {
+		default: return isCoarsePrimaryInput$2() ? {
 			html5: false,
 			pointer: true,
 			pointerHandlesMouse: true
@@ -5807,7 +5813,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;
@@ -7962,11 +7968,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;
@@ -12396,7 +12419,6 @@ const ENTERPRISE_MODULE_NAMES = /* @__PURE__ */ new Set([
 	"AdvancedOverflow",
 	"AutoEdgeGroup",
 	"AutoHideEdgeGroup",
-	"ContextMenu",
 	"DndCompass",
 	"KeyboardDocking",
 	"KeyboardNavigation",
@@ -12478,8 +12500,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) {
@@ -12559,10 +12581,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:
@@ -12658,18 +12679,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",
@@ -13570,6 +13579,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
 /**
@@ -13587,7 +13860,8 @@ const AllModules = [
 	HeaderActionsModule,
 	LiveRegionModule,
 	AdvancedDnDModule,
-	TabGroupChipsModule
+	TabGroupChipsModule,
+	ContextMenuModule
 ];
 
 //#endregion
@@ -14279,6 +14553,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;
 	}
@@ -14583,6 +14865,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;
 	}
@@ -14595,6 +14881,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;
@@ -14685,11 +14972,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
@@ -14753,6 +15042,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) {
@@ -14776,6 +15066,7 @@ var ShellManager = class {
 				this._middleColumn.setViewVisible(position, visible);
 				break;
 		}
+		if (visible) this._flushPendingSizes();
 	}
 	isEdgeGroupVisible(position) {
 		switch (position) {
@@ -14793,20 +15084,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;
@@ -14832,15 +15166,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));
@@ -14848,7 +15184,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));
@@ -14856,7 +15192,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));
@@ -14864,7 +15200,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));
@@ -14872,33 +15208,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() {
@@ -16283,6 +16609,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(() => {
@@ -16291,7 +16624,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);
@@ -16386,8 +16719,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
@@ -17548,7 +17881,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);
@@ -17565,7 +17898,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);
@@ -17577,7 +17910,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);
@@ -17592,7 +17925,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);
@@ -17636,7 +17969,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);
@@ -17687,6 +18020,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
@@ -17752,13 +18100,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);
@@ -17883,6 +18228,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);
@@ -17942,22 +18297,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":
@@ -18860,6 +19215,8 @@ exports.AdvancedDnDModule = AdvancedDnDModule;
 exports.AdvancedDnDService = AdvancedDnDService;
 exports.BaseGrid = BaseGrid;
 exports.ContentContainer = ContentContainer;
+exports.ContextMenuController = ContextMenuController;
+exports.ContextMenuModule = ContextMenuModule;
 exports.DEFAULT_TAB_GROUP_COLORS = DEFAULT_TAB_GROUP_COLORS;
 exports.DefaultDockviewDeserialzier = DefaultDockviewDeserialzier;
 exports.DefaultTab = DefaultTab;