dockview-react 8.5.1 → 8.6.1

package/dist/dockview-react.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 8.5.1
+ * @version 8.6.1
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -51,7 +51,7 @@ react_dom = __toESM(react_dom);
 //#region ../dockview-core/dist/package/main.esm.mjs
 /**
 	* dockview-core
-	* @version 8.5.1
+	* @version 8.6.1
 	* @link https://github.com/dockview/dockview
 	* @license MIT
 	*/
@@ -1169,8 +1169,9 @@ react_dom = __toESM(react_dom);
 			if (visible === this.visible) return;
 			if (visible) {
 				var _this$_cachedVisibleS;
-				this.size = clamp((_this$_cachedVisibleS = this._cachedVisibleSize) !== null && _this$_cachedVisibleS !== void 0 ? _this$_cachedVisibleS : 0, this.viewMinimumSize, this.viewMaximumSize);
+				const cachedVisibleSize = (_this$_cachedVisibleS = this._cachedVisibleSize) !== null && _this$_cachedVisibleS !== void 0 ? _this$_cachedVisibleS : 0;
 				this._cachedVisibleSize = void 0;
+				this.size = clamp(cachedVisibleSize, this.viewMinimumSize, this.viewMaximumSize);
 			} else {
 				this._cachedVisibleSize = typeof size === "number" ? size : this.size;
 				this.size = 0;
@@ -1303,6 +1304,15 @@ react_dom = __toESM(react_dom);
 		get margin() {
 			return this._margin;
 		}
+		/**
+		* The size each visible view gives up to the margins: `n` visible views
+		* are separated by `n - 1` margins, spread evenly over the `n`.
+		*/
+		get marginShare() {
+			let visibleViewCount = 0;
+			for (const item of this.viewItems) if (item.visible) visibleViewCount++;
+			return this.marginShareFor(visibleViewCount);
+		}
 		set margin(value) {
 			this._margin = value;
 			toggleClass(this.element, "dv-splitview-has-margin", value !== 0);
@@ -1599,6 +1609,7 @@ react_dom = __toESM(react_dom);
 			const previousSize = Math.max(this.size, this._contentSize);
 			this.size = size;
 			this.orthogonalSize = orthogonalSize;
+			if (!this._proportions) this.saveProportions();
 			if (this.proportions) {
 				let total = 0;
 				for (let i = 0; i < this.viewItems.length; i++) {
@@ -1655,7 +1666,10 @@ react_dom = __toESM(react_dom);
 			}
 		}
 		saveProportions() {
-			if (this.proportionalLayout && this._contentSize > 0) this._proportions = this.viewItems.map((i) => i.visible ? i.size / this._contentSize : void 0);
+			if (!this.proportionalLayout) return;
+			let contentSize = 0;
+			for (const item of this.viewItems) contentSize += item.size;
+			if (contentSize > 0) this._proportions = this.viewItems.map((i) => i.visible ? i.size / contentSize : void 0);
 		}
 		/**
 		* Margin explain:
@@ -1677,7 +1691,7 @@ react_dom = __toESM(react_dom);
 			this.updateSashEnablement();
 			if (this.viewItems.length === 0) return;
 			const sashCount = Math.max(0, visibleViewCount - 1);
-			const marginReducedSize = this.margin * sashCount / Math.max(1, visibleViewCount);
+			const marginReducedSize = this.marginShareFor(visibleViewCount);
 			let totalLeftOffset = 0;
 			const viewLeftOffsets = [];
 			const sashWidth = 4;
@@ -1707,9 +1721,13 @@ react_dom = __toESM(react_dom);
 					view.setContainerGeometry("width", "");
 					view.setContainerGeometry("left", "");
 				}
-				view.view.layout(view.size - marginReducedSize, this._orthogonalSize);
+				view.view.layout(size, this._orthogonalSize);
 			});
 		}
+		marginShareFor(visibleViewCount) {
+			const sashCount = Math.max(0, visibleViewCount - 1);
+			return this._margin * sashCount / Math.max(1, visibleViewCount);
+		}
 		findFirstSnapIndex(indexes) {
 			for (const index of indexes) {
 				const viewItem = this.viewItems[index];
@@ -2241,12 +2259,20 @@ react_dom = __toESM(react_dom);
 		if (candiateNode instanceof BranchNode) return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last);
 		throw new Error("invalid node");
 	}
+	/**
+	* The sizing to re-add a branch's child with, so a hidden child stays hidden
+	* (with its cached size) instead of coming back visible at size 0.
+	*/
+	function childSizing(node, index, size, scale = 1) {
+		const cachedVisibleSize = node.getChildCachedVisibleSize(index);
+		return cachedVisibleSize === void 0 ? size : Sizing.Invisible(Math.round(cachedVisibleSize * scale));
+	}
 	function cloneNode(node, size, orthogonalSize) {
 		if (node instanceof BranchNode) {
 			const result = new BranchNode(node.orientation, node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled, node.margin);
 			for (let i = node.children.length - 1; i >= 0; i--) {
 				const child = node.children[i];
-				result.addChild(cloneNode(child, child.size, child.orthogonalSize), child.size, 0, true);
+				result.addChild(cloneNode(child, child.size, child.orthogonalSize), childSizing(node, i, child.size), 0, true);
 			}
 			return result;
 		} else return new LeafNode(node.view, node.orientation, orthogonalSize);
@@ -2255,13 +2281,14 @@ react_dom = __toESM(react_dom);
 		if (node instanceof BranchNode) {
 			const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled, node.margin);
 			let totalSize = 0;
+			const cachedSizeScale = node.size === 0 ? 1 : size / node.size;
 			for (let i = node.children.length - 1; i >= 0; i--) {
 				const child = node.children[i];
 				const childSize = child instanceof BranchNode ? child.orthogonalSize : child.size;
 				let newSize = node.size === 0 ? 0 : Math.round(size * childSize / node.size);
 				totalSize += newSize;
 				if (i === 0) newSize += size - totalSize;
-				result.addChild(flipNode(child, orthogonalSize, newSize), newSize, 0, true);
+				result.addChild(flipNode(child, orthogonalSize, newSize), childSizing(node, i, newSize, cachedSizeScale), 0, true);
 			}
 			return result;
 		} else return new LeafNode(node.view, orthogonal(node.orientation), orthogonalSize);
@@ -2747,7 +2774,8 @@ react_dom = __toESM(react_dom);
 				sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
 				for (let i = 0; i < sibling.children.length; i++) {
 					const child = sibling.children[i];
-					grandParent.addChild(child, child.size, parentIndex + i);
+					const childSize = childSizing(sibling, i, child.size);
+					grandParent.addChild(child, !isSiblingVisible && typeof childSize === "number" ? Sizing.Invisible(childSize) : childSize, parentIndex + i);
 				}
 				/**
 				* clean down the branch node since we need to dipose of it and
@@ -3910,9 +3938,13 @@ react_dom = __toESM(react_dom);
 		}
 		/**
 		* Remove a panel given the panel object.
+		*
+		* `removeEmptyGroup` overrides the `closeEmptyGroups` option for this
+		* call: `false` keeps the group if the panel was its last one, `true`
+		* removes it.
 		*/
-		removePanel(panel) {
-			this.component.withOrigin("api", () => this.component.removePanel(panel));
+		removePanel(panel, options) {
+			this.component.withOrigin("api", () => this.component.removePanel(panel, options));
 		}
 		/**
 		* Add a group and return the created object.
@@ -5915,6 +5947,9 @@ react_dom = __toESM(react_dom);
 		get element() {
 			return this._element;
 		}
+		get dimensions() {
+			return this._dimensions;
+		}
 		constructor(accessor, group) {
 			var _this$accessor$resolv, _this$accessor, _this$accessor$resolv2, _this$accessor2, _this$accessor$onDidO, _this$accessor$onDidO2, _this$accessor3;
 			super();
@@ -5925,12 +5960,14 @@ react_dom = __toESM(react_dom);
 			this.onDidFocus = this._onDidFocus.event;
 			this._onDidBlur = new Emitter();
 			this.onDidBlur = this._onDidBlur.event;
+			this._onDidDimensionsChange = new Emitter();
+			this.onDidDimensionsChange = this._onDidDimensionsChange.event;
 			this._element = document.createElement("div");
 			this._element.className = "dv-content-container";
 			this._element.tabIndex = -1;
 			this._element.id = nextContentId();
 			this._element.setAttribute("role", "tabpanel");
-			this.addDisposables(this._onDidFocus, this._onDidBlur);
+			this.addDisposables(this._onDidFocus, this._onDidBlur, this._onDidDimensionsChange);
 			const getOverrideTarget = () => {
 				var _group$dropTargetCont;
 				return (_group$dropTargetCont = group.dropTargetContainer) === null || _group$dropTargetCont === void 0 ? void 0 : _group$dropTargetCont.model;
@@ -6039,7 +6076,15 @@ react_dom = __toESM(react_dom);
 			if (this.panel === panel) return;
 			this.renderPanel(panel);
 		}
-		layout(_width, _height) {}
+		layout(width, height) {
+			var _this$_dimensions;
+			if (((_this$_dimensions = this._dimensions) === null || _this$_dimensions === void 0 ? void 0 : _this$_dimensions.width) === width && this._dimensions.height === height) return;
+			this._dimensions = {
+				width,
+				height
+			};
+			this._onDidDimensionsChange.fire(this._dimensions);
+		}
 		closePanel() {
 			if (this.panel) {
 				if (this.panel.api.renderer === "onlyWhenVisible") {
@@ -6887,6 +6932,7 @@ react_dom = __toESM(react_dom);
 			dndStrategy: void 0,
 			className: void 0,
 			noPanelsOverlay: void 0,
+			closeEmptyGroups: void 0,
 			dndEdges: void 0,
 			dropPositionResolver: void 0,
 			dndCompass: void 0,
@@ -10503,7 +10549,6 @@ react_dom = __toESM(react_dom);
 			return (_this$_headerPosition = this._headerPosition) !== null && _this$_headerPosition !== void 0 ? _this$_headerPosition : "top";
 		}
 		set headerPosition(value) {
-			var _this$_activePanel;
 			this._headerPosition = value;
 			this.invalidateHeaderSize();
 			removeClasses(this.container, "dv-groupview-header-top", "dv-groupview-header-bottom", "dv-groupview-header-left", "dv-groupview-header-right");
@@ -10513,10 +10558,7 @@ react_dom = __toESM(react_dom);
 			this._headerDirection = direction;
 			this.tabsContainer.direction = direction;
 			this.header.direction = direction;
-			if ((_this$_activePanel = this._activePanel) === null || _this$_activePanel === void 0 ? void 0 : _this$_activePanel.layout) {
-				const { width, height } = this.contentDimensions();
-				this._activePanel.layout(width, height);
-			}
+			if (this.panels.length > 0) this.layoutContent();
 			this.updateHeaderActions();
 			if (previousDirection !== void 0 && previousDirection !== direction) {
 				var _this$groupPanel;
@@ -11019,10 +11061,7 @@ react_dom = __toESM(react_dom);
 			this.panels.forEach((panel) => {
 				this.rerender(panel);
 			});
-			if (this._activePanel) {
-				const { width, height } = this.contentDimensions();
-				this._activePanel.layout(width, height);
-			}
+			if (this.panels.length > 0) this.layoutContent();
 		}
 		get renderContainer() {
 			var _this$_overwriteRende;
@@ -11069,10 +11108,10 @@ react_dom = __toESM(react_dom);
 			return this.tabsContainer.indexOf(panel.id);
 		}
 		toJSON() {
-			var _this$_activePanel2;
+			var _this$_activePanel;
 			const result = {
 				views: this.tabsContainer.panels,
-				activeView: (_this$_activePanel2 = this._activePanel) === null || _this$_activePanel2 === void 0 ? void 0 : _this$_activePanel2.id,
+				activeView: (_this$_activePanel = this._activePanel) === null || _this$_activePanel === void 0 ? void 0 : _this$_activePanel.id,
 				id: this.id
 			};
 			if (this.locked !== false) result.locked = this.locked;
@@ -11110,8 +11149,8 @@ react_dom = __toESM(react_dom);
 		init(_params) {}
 		update(_params) {}
 		focus() {
-			var _this$_activePanel3;
-			(_this$_activePanel3 = this._activePanel) === null || _this$_activePanel3 === void 0 || _this$_activePanel3.focus();
+			var _this$_activePanel2;
+			(_this$_activePanel2 = this._activePanel) === null || _this$_activePanel2 === void 0 || _this$_activePanel2.focus();
 		}
 		openPanel(panel, options = {}) {
 			if (typeof options.index !== "number" || options.index > this.panels.length) options.index = this.panels.length;
@@ -11169,12 +11208,24 @@ react_dom = __toESM(react_dom);
 			this.updateContainer();
 		}
 		layout(width, height) {
-			var _this$_activePanel4;
 			this._width = width;
 			this._height = height;
-			const { width: contentWidth, height: contentHeight } = this.contentDimensions();
-			this.contentContainer.layout(contentWidth, contentHeight);
-			if ((_this$_activePanel4 = this._activePanel) === null || _this$_activePanel4 === void 0 ? void 0 : _this$_activePanel4.layout) this._activePanel.layout(contentWidth, contentHeight);
+			this.layoutContent();
+		}
+		/**
+		* Apply the current content box (group box minus header extent) to the
+		* content container and the active panel. Every path that can change that
+		* box goes through here so the container's recorded dimensions, which size
+		* overlay-rendered panels, never lag the active panel's. Callers other
+		* than `layout()` skip it for a group with no panels: there is nothing to
+		* size, and measuring the header of a group that is not in the document
+		* yet (the constructor sets `headerPosition`) would cache a zero extent.
+		*/
+		layoutContent() {
+			var _this$_activePanel3;
+			const { width, height } = this.contentDimensions();
+			this.contentContainer.layout(width, height);
+			if ((_this$_activePanel3 = this._activePanel) === null || _this$_activePanel3 === void 0 ? void 0 : _this$_activePanel3.layout) this._activePanel.layout(width, height);
 		}
 		/**
 		* Re-run the group's layout with its current dimensions. Used to propagate a
@@ -11267,8 +11318,7 @@ react_dom = __toESM(react_dom);
 				this.tabsContainer.setActivePanel(panel);
 				this.contentContainer.setLabelledBy(this.tabsContainer.getTabId(panel.id));
 				this.contentContainer.openPanel(panel);
-				const { width, height } = this.contentDimensions();
-				panel.layout(width, height);
+				this.layoutContent();
 				this.updateMru(panel);
 				this.contentContainer.refreshFocusState();
 				this._onDidActivePanelChange.fire({
@@ -11280,8 +11330,8 @@ react_dom = __toESM(react_dom);
 		}
 		/** Label the group region with its active panel's title (the WAI-ARIA region name). */
 		updateAccessibleLabel() {
-			var _this$_activePanel5;
-			const title = (_this$_activePanel5 = this._activePanel) === null || _this$_activePanel5 === void 0 ? void 0 : _this$_activePanel5.title;
+			var _this$_activePanel4;
+			const title = (_this$_activePanel4 = this._activePanel) === null || _this$_activePanel4 === void 0 ? void 0 : _this$_activePanel4.title;
 			if (title) this.container.setAttribute("aria-label", title);
 			else this.container.removeAttribute("aria-label");
 		}
@@ -11376,7 +11426,7 @@ react_dom = __toESM(react_dom);
 					});
 					return;
 				}
-				if (this.tabsContainer.indexOf(data.panelId) !== -1 && this.tabsContainer.size === 1) return;
+				if (this.tabsContainer.indexOf(data.panelId) !== -1 && this.tabsContainer.size === 1 && this.accessor.options.closeEmptyGroups !== false) return;
 				const { groupId, panelId } = data;
 				if (this.id === groupId && !position) {
 					if (this.tabsContainer.indexOf(panelId) === index) return;
@@ -11617,6 +11667,7 @@ react_dom = __toESM(react_dom);
 		constructor(id, accessor) {
 			super(id, "__dockviewgroup__");
 			this.accessor = accessor;
+			this._isApplyingSize = false;
 			this._onDidLocationChange = new Emitter();
 			this.onDidLocationChange = this._onDidLocationChange.event;
 			this._onDidActivePanelChange = new Emitter();
@@ -11629,14 +11680,29 @@ react_dom = __toESM(react_dom);
 			this.onDidHeaderDirectionChange = this._onDidHeaderDirectionChange.event;
 			this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange, this._onDidCollapsedChange, this._onDidPeekChange, this._onDidHeaderDirectionChange, this._onDidVisibilityChange.event((event) => {
 				if (event.isVisible && this._pendingSize) {
-					super.setSize(this._pendingSize);
+					const pendingSize = this._pendingSize;
 					this._pendingSize = void 0;
+					super.setSize(pendingSize);
 				}
+			}), this.onDidDimensionsChange((event) => {
+				var _this$_reportedSize, _this$_reportedSize2;
+				const moved = event.width !== ((_this$_reportedSize = this._reportedSize) === null || _this$_reportedSize === void 0 ? void 0 : _this$_reportedSize.width) || event.height !== ((_this$_reportedSize2 = this._reportedSize) === null || _this$_reportedSize2 === void 0 ? void 0 : _this$_reportedSize2.height);
+				this._reportedSize = {
+					width: event.width,
+					height: event.height
+				};
+				if (moved && this.isVisible && !this._isApplyingSize) this._pendingSize = void 0;
 			}));
 		}
 		setSize(event) {
-			this._pendingSize = _objectSpread2$1({}, event);
-			super.setSize(event);
+			if (typeof event.width === "number" || typeof event.height === "number") this._pendingSize = _objectSpread2$1({}, event);
+			const wasApplyingSize = this._isApplyingSize;
+			this._isApplyingSize = true;
+			try {
+				super.setSize(event);
+			} finally {
+				this._isApplyingSize = wasApplyingSize;
+			}
 		}
 		close() {
 			if (!this._group) return;
@@ -14311,6 +14377,15 @@ react_dom = __toESM(react_dom);
 		element.tabIndex = -1;
 		return element;
 	}
+	/**
+	* Write an inline pixel length only when it differs from what is already set,
+	* so a pass that re-derives geometry already in place leaves the element's
+	* style clean and the next measurement does not relayout the overlay subtree.
+	*/
+	function setPixels(style, property, value) {
+		const next = `${value}px`;
+		if (style[property] !== next) style[property] = next;
+	}
 	var OverlayRenderContainer = class extends CompositeDisposable {
 		constructor(element, accessor) {
 			super();
@@ -14429,6 +14504,32 @@ react_dom = __toESM(react_dom);
 			const generation = mapEntry.generation;
 			const focusContainer = mapEntry.element;
 			const contentElement = panel.view.content.element;
+			/**
+			* Size the overlay from the layout engine's numbers (the content box
+			* the group model also hands to `panel.layout()`): a style write with
+			* no forced layout, so the content has its real box before anything
+			* can measure it, and `.dv-render-overlay`'s 100%/100% default is never
+			* observed. Hidden panels are sized too: their content is laid out
+			* (hidden by `visibility`) and must not keep the root's box.
+			*
+			* Only while the overlay is not on screen at a measured position,
+			* i.e. hidden or not yet positioned. Once it is, the frame pass owns
+			* the whole box: size and position must change together, and group
+			* layouts driven from an animation frame would otherwise paint one
+			* frame at the new size and the old position. Likewise not while the
+			* peek force-shows the overlay, whose geometry belongs to
+			* `repositionPanelOverlay`: the collapsed group's own layouts describe
+			* the strip, not the peek. A zero box (a container awaiting layout) is
+			* skipped too: whether 0x0 is a real collapse is the frame pass's call.
+			*/
+			const applySize = (size) => {
+				if (!size || size.width <= 0 || size.height <= 0) return;
+				const entry = this.map[panel.api.id];
+				if (!entry || entry.forceVisible || entry.positioned && panel.api.isVisible) return;
+				setPixels(focusContainer.style, "width", size.width);
+				setPixels(focusContainer.style, "height", size.height);
+			};
+			applySize(referenceContainer.dimensions);
 			if (contentElement.parentElement !== focusContainer) focusContainer.appendChild(contentElement);
 			if (focusContainer.parentElement !== this.element) this.element.appendChild(focusContainer);
 			const resize = () => {
@@ -14468,10 +14569,10 @@ react_dom = __toESM(react_dom);
 					}
 					entry.retainPreviousGeometry = false;
 					entry.positioned = true;
-					focusContainer.style.left = `${left}px`;
-					focusContainer.style.top = `${top}px`;
-					focusContainer.style.width = `${width}px`;
-					focusContainer.style.height = `${height}px`;
+					setPixels(focusContainer.style, "left", left);
+					setPixels(focusContainer.style, "top", top);
+					setPixels(focusContainer.style, "width", width);
+					setPixels(focusContainer.style, "height", height);
 					if (panel.api.isVisible || forceVisible) {
 						focusContainer.style.visibility = "";
 						focusContainer.style.pointerEvents = "";
@@ -14587,6 +14688,9 @@ react_dom = __toESM(react_dom);
 					if (!panel.api.isVisible) return;
 					resize();
 				}),
+				referenceContainer.onDidDimensionsChange((size) => {
+					applySize(size);
+				}),
 				panel.api.onDidLocationChange(() => {
 					correctLayerPosition();
 				})
@@ -14883,6 +14987,20 @@ react_dom = __toESM(react_dom);
 			return el;
 		}
 	};
+	const EDGE_POSITIONS = [
+		"left",
+		"right",
+		"top",
+		"bottom"
+	];
+	function isHorizontal(position) {
+		return position === "left" || position === "right";
+	}
+	/** A view outside a shell: no gap, and every layout is real. */
+	const UNBOUNDED_AXIS = {
+		marginShare: 0,
+		size: Number.POSITIVE_INFINITY
+	};
 	var EdgeGroupView = class {
 		/**
 		* The effective (pre-gap) collapsed size: the measured tab-strip size when
@@ -14894,7 +15012,7 @@ react_dom = __toESM(react_dom);
 		}
 		get minimumSize() {
 			if (this._isCollapsed) return this.collapsedSize;
-			return this._baseMinimumSize !== void 0 ? this._baseMinimumSize + this._gapAdd : this._effectiveBaseCollapsed + 50 + this._gapAdd;
+			return this._baseMinimumSize !== void 0 ? this._baseMinimumSize + this._axis.marginShare : this._effectiveBaseCollapsed + 50 + this._axis.marginShare;
 		}
 		get maximumSize() {
 			return this._isCollapsed ? this.collapsedSize : this._expandedMaximumSize;
@@ -14911,10 +15029,10 @@ react_dom = __toESM(react_dom);
 		}
 		/** Without the gap share. */
 		get lastExpandedContentSize() {
-			return this._lastExpandedSize - this._gapAdd;
+			return this._lastExpandedSize - this._axis.marginShare;
 		}
 		get collapsedSize() {
-			return this._effectiveBaseCollapsed + this._gapAdd;
+			return this._effectiveBaseCollapsed + this._axis.marginShare;
 		}
 		/** The user-configured (pre-gap) geometry constraints, for serialization.
 		*  These are the raw values passed to `addEdgeGroup`, unlike the effective
@@ -14929,13 +15047,14 @@ react_dom = __toESM(react_dom);
 		get configuredCollapsedSize() {
 			return this._baseCollapsedSize;
 		}
-		constructor(options, group, orientation, gapAdd = 0) {
+		constructor(options, group, orientation, axis = UNBOUNDED_AXIS) {
 			var _options$collapsedSiz, _options$maximumSize, _options$initialSize;
 			this._onDidChange = new Emitter();
 			this.onDidChange = this._onDidChange.event;
 			this.snap = false;
 			this.priority = "low";
 			this._isCollapsed = false;
+			this._isVisible = true;
 			this._tabSizeDisposables = new CompositeDisposable();
 			this._group = group;
 			this._orientation = orientation;
@@ -14943,7 +15062,7 @@ react_dom = __toESM(react_dom);
 			group.element.dataset.testid = `dv-edge-group-${options.id}`;
 			this._baseCollapsedSize = (_options$collapsedSiz = options.collapsedSize) !== null && _options$collapsedSiz !== void 0 ? _options$collapsedSiz : 35;
 			this._baseMinimumSize = options.minimumSize;
-			this._gapAdd = gapAdd;
+			this._axis = axis;
 			this._expandedMaximumSize = (_options$maximumSize = options.maximumSize) !== null && _options$maximumSize !== void 0 ? _options$maximumSize : Number.POSITIVE_INFINITY;
 			this._lastExpandedSize = (_options$initialSize = options.initialSize) !== null && _options$initialSize !== void 0 ? _options$initialSize : 200;
 			if (options.collapsed) {
@@ -14976,7 +15095,7 @@ react_dom = __toESM(react_dom);
 			if (this._isCollapsed) this._onDidChange.fire({ size: this.collapsedSize });
 		}
 		layout(size, orthogonalSize) {
-			if (!this._isCollapsed) this._lastExpandedSize = size + this._gapAdd;
+			if (!this._isCollapsed && this._isVisible && this._axis.size > 0) this._lastExpandedSize = size + this._axis.marginShare;
 			if (this._orientation === "horizontal") this._group.layout(size, orthogonalSize);
 			else this._group.layout(orthogonalSize, size);
 		}
@@ -14985,25 +15104,25 @@ react_dom = __toESM(react_dom);
 			this._isCollapsed = collapsed;
 			this._group.element.classList.toggle("dv-edge-collapsed", collapsed);
 		}
-		setVisible(_visible) {}
+		setVisible(visible) {
+			this._isVisible = visible;
+		}
 		/**
-		* Restore the last-expanded size from serialized state without triggering
-		* a layout. Must be called before setCollapsed(true) during fromJSON so
-		* that expanding after deserialization restores the correct size.
+		* Set the expanded size without triggering a layout: from serialized
+		* state (before setCollapsed(true) during fromJSON, so that expanding
+		* restores the right size) or from an explicit resize.
 		*/
 		restoreExpandedSize(size) {
 			this._lastExpandedSize = size;
 		}
 		/**
-		* Apply a new base (pre-gap) collapsed size, base minimum size and gap
-		* contribution after a theme or gap change. Base values come from the
-		* original config; the ShellManager owns the gap arithmetic. A live
-		* measured tab size (if any) continues to win over the base collapsed size.
+		* Apply a new base (pre-gap) collapsed size and base minimum size after a
+		* theme change. Base values come from the original config. A live measured
+		* tab size (if any) continues to win over the base collapsed size.
 		*/
-		updateSizing(baseCollapsedSize, baseMinimumSize, gapAdd) {
+		updateSizing(baseCollapsedSize, baseMinimumSize) {
 			this._baseCollapsedSize = baseCollapsedSize;
 			this._baseMinimumSize = baseMinimumSize;
-			this._gapAdd = gapAdd;
 		}
 		dispose() {
 			this._tabSizeDisposables.dispose();
@@ -15105,13 +15224,20 @@ react_dom = __toESM(react_dom);
 			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;
+		/** The inner splitview, as the axis its edge views read. */
+		get axis() {
+			return this._splitview;
 		}
 		updateMargin(gap) {
 			this._splitview.margin = gap;
 		}
+		/** Disables the sashes of the top/bottom edge groups. */
+		get disabled() {
+			return this._splitview.disabled;
+		}
+		set disabled(value) {
+			this._splitview.disabled = value;
+		}
 		dispose() {
 			this._onDidChange.dispose();
 			this._splitview.dispose();
@@ -15161,8 +15287,6 @@ react_dom = __toESM(react_dom);
 				const width = Math.round(entry.contentRect.width);
 				const height = Math.round(entry.contentRect.height);
 				if (width === this._currentWidth && height === this._currentHeight) return;
-				this._currentWidth = width;
-				this._currentHeight = height;
 				this.layout(width, height);
 			}), this._outerSplitview, this._middleColumn, centerView);
 		}
@@ -15170,6 +15294,18 @@ react_dom = __toESM(react_dom);
 			return this._shellElement;
 		}
 		/**
+		* The dock's `locked` option. The edge groups are resized with the sashes
+		* of the shell's own splitviews (left/right in the outer one, top/bottom
+		* in the middle column), so locking disables both.
+		*/
+		get locked() {
+			return this._outerSplitview.disabled;
+		}
+		set locked(value) {
+			this._outerSplitview.disabled = value;
+			this._middleColumn.disabled = value;
+		}
+		/**
 		* Add an edge group view at the given position. The view wraps the
 		* provided group element inside the shell's splitview layout.
 		* Throws if a group at this position is already registered.
@@ -15177,14 +15313,7 @@ react_dom = __toESM(react_dom);
 		addEdgeView(position, options, group) {
 			if (this.hasEdgeGroup(position)) throw new Error(`dockview: edge group already registered at position '${position}'`);
 			this._viewConfigs.set(position, options);
-			const outerN = 1 + (this._viewConfigs.has("left") ? 1 : 0) + (this._viewConfigs.has("right") ? 1 : 0);
-			const innerN = 1 + (this._viewConfigs.has("top") ? 1 : 0) + (this._viewConfigs.has("bottom") ? 1 : 0);
-			const outerGapAdd = outerN > 1 ? this._gap * (outerN - 1) / outerN : 0;
-			const innerGapAdd = innerN > 1 ? this._gap * (innerN - 1) / innerN : 0;
-			const isHorizontal = position === "left" || position === "right";
-			const gapAdd = isHorizontal ? outerGapAdd : innerGapAdd;
-			const orientation = isHorizontal ? "horizontal" : "vertical";
-			const view = new EdgeGroupView(_objectSpread2$1({ collapsedSize: this._defaultCollapsedSize }, options), group, orientation, gapAdd);
+			const view = new EdgeGroupView(_objectSpread2$1({ collapsedSize: this._defaultCollapsedSize }, options), group, isHorizontal(position) ? "horizontal" : "vertical", this._axisFor(position));
 			const initialSize = view.isCollapsed ? view.collapsedSize : view.lastExpandedSize;
 			switch (position) {
 				case "left":
@@ -15213,7 +15342,7 @@ react_dom = __toESM(react_dom);
 			}
 			this._disposables.addDisposables(view);
 			if (!view.isCollapsed && !this._canResize(position)) this._pendingSizes.set(position, initialSize);
-			this.updateTheme(this._gap, this._defaultCollapsedSize);
+			this._relayout();
 			return view;
 		}
 		/**
@@ -15235,6 +15364,8 @@ react_dom = __toESM(react_dom);
 			this.layout(width, height);
 		}
 		layout(width, height) {
+			this._currentWidth = width;
+			this._currentHeight = height;
 			this._outerSplitview.layout(width, height);
 			this._flushPendingSizes();
 		}
@@ -15244,34 +15375,50 @@ react_dom = __toESM(react_dom);
 		* and tab-strip dimensions.
 		*/
 		updateTheme(gap, defaultCollapsedSize) {
-			var _this$_leftView, _this$_rightView, _this$_topView, _this$_bottomView;
 			this._gap = gap;
 			this._defaultCollapsedSize = defaultCollapsedSize;
-			const outerN = 1 + (this._viewConfigs.has("left") ? 1 : 0) + (this._viewConfigs.has("right") ? 1 : 0);
-			const innerN = 1 + (this._viewConfigs.has("top") ? 1 : 0) + (this._viewConfigs.has("bottom") ? 1 : 0);
-			const outerGapAdd = outerN > 1 ? gap * (outerN - 1) / outerN : 0;
-			const innerGapAdd = innerN > 1 ? gap * (innerN - 1) / innerN : 0;
 			this._outerSplitview.margin = gap;
 			this._middleColumn.updateMargin(gap);
-			const updateView = (view, baseCfg, gapAdd) => {
-				var _baseCfg$collapsedSiz;
-				const baseCS = (_baseCfg$collapsedSiz = baseCfg.collapsedSize) !== null && _baseCfg$collapsedSiz !== void 0 ? _baseCfg$collapsedSiz : defaultCollapsedSize;
-				view.updateSizing(baseCS, baseCfg.minimumSize, gapAdd);
-			};
-			const topCfg = this._viewConfigs.get("top");
-			if (this._topView && topCfg) updateView(this._topView, topCfg, innerGapAdd);
-			const bottomCfg = this._viewConfigs.get("bottom");
-			if (this._bottomView && bottomCfg) updateView(this._bottomView, bottomCfg, innerGapAdd);
-			const leftCfg = this._viewConfigs.get("left");
-			if (this._leftView && leftCfg) updateView(this._leftView, leftCfg, outerGapAdd);
-			const rightCfg = this._viewConfigs.get("right");
-			if (this._rightView && rightCfg) updateView(this._rightView, rightCfg, outerGapAdd);
-			if (((_this$_leftView = this._leftView) === null || _this$_leftView === void 0 ? void 0 : _this$_leftView.isCollapsed) && this._leftIndex !== void 0) this._outerSplitview.resizeView(this._leftIndex, this._leftView.collapsedSize);
-			if (((_this$_rightView = this._rightView) === null || _this$_rightView === void 0 ? void 0 : _this$_rightView.isCollapsed) && this._rightIndex !== void 0) this._outerSplitview.resizeView(this._rightIndex, this._rightView.collapsedSize);
-			if ((_this$_topView = this._topView) === null || _this$_topView === void 0 ? void 0 : _this$_topView.isCollapsed) this._middleColumn.resizeView("top", this._topView.collapsedSize);
-			if ((_this$_bottomView = this._bottomView) === null || _this$_bottomView === void 0 ? void 0 : _this$_bottomView.isCollapsed) this._middleColumn.resizeView("bottom", this._bottomView.collapsedSize);
+			this._applyThemeSizing();
+			this._relayout();
+		}
+		/** Whether the other edge of `position`'s axis holds a view. */
+		_hasSiblingOn(position) {
+			return isHorizontal(position) ? this._leftView !== void 0 && this._rightView !== void 0 : this._topView !== void 0 && this._bottomView !== void 0;
+		}
+		/** The splitview `position`'s view sits in, as its edge axis. */
+		_axisFor(position) {
+			return isHorizontal(position) ? this._outerSplitview : this._middleColumn.axis;
+		}
+		/** Re-derive every edge view's base sizing from its original config and
+		*  the current defaults. */
+		_applyThemeSizing() {
+			for (const position of EDGE_POSITIONS) {
+				const view = this._getView(position);
+				const baseCfg = this._viewConfigs.get(position);
+				if (view && baseCfg) {
+					var _baseCfg$collapsedSiz;
+					view.updateSizing((_baseCfg$collapsedSiz = baseCfg.collapsedSize) !== null && _baseCfg$collapsedSiz !== void 0 ? _baseCfg$collapsedSiz : this._defaultCollapsedSize, baseCfg.minimumSize);
+				}
+			}
+		}
+		/**
+		* Lay the shell out again at its current size, once it has one. The
+		* splitviews clamp every view to its current constraints, which is how a
+		* collapsed strip or a group at its minimum follows a moved gap share.
+		*/
+		_relayout() {
 			if (this._currentWidth > 0 && this._currentHeight > 0) this.layout(this._currentWidth, this._currentHeight);
 		}
+		/** The view's slot in its splitview: its laid-out size plus the gap share. */
+		_slotSize(position) {
+			switch (position) {
+				case "left": return this._leftIndex === void 0 ? 0 : this._outerSplitview.getViewSize(this._leftIndex);
+				case "right": return this._rightIndex === void 0 ? 0 : this._outerSplitview.getViewSize(this._rightIndex);
+				case "top":
+				case "bottom": return this._middleColumn.getViewSize(position);
+			}
+		}
 		removeEdgeView(position) {
 			const view = this._getView(position);
 			if (!view) return;
@@ -15301,7 +15448,7 @@ react_dom = __toESM(react_dom);
 			view.dispose();
 			this._viewConfigs.delete(position);
 			this._pendingSizes.delete(position);
-			this.updateTheme(this._gap, this._defaultCollapsedSize);
+			this._relayout();
 		}
 		hasEdgeGroup(position) {
 			switch (position) {
@@ -15312,6 +15459,7 @@ react_dom = __toESM(react_dom);
 			}
 		}
 		setEdgeGroupVisible(position, visible) {
+			const changes = this._getView(position) !== void 0 && visible !== this.isEdgeGroupVisible(position);
 			switch (position) {
 				case "left":
 					if (this._leftIndex !== void 0) this._outerSplitview.setViewVisible(this._leftIndex, visible);
@@ -15324,6 +15472,7 @@ react_dom = __toESM(react_dom);
 					this._middleColumn.setViewVisible(position, visible);
 					break;
 			}
+			if (changes && this._gap > 0 && this._hasSiblingOn(position)) this._relayout();
 			if (visible) this._flushPendingSizes();
 		}
 		isEdgeGroupVisible(position) {
@@ -15373,8 +15522,7 @@ react_dom = __toESM(react_dom);
 		/** 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;
+			return this.isEdgeGroupVisible(position) && this._axisFor(position).size > 0;
 		}
 		_resizeView(position, size) {
 			switch (position) {
@@ -15419,59 +15567,45 @@ react_dom = __toESM(react_dom);
 		}
 		toJSON() {
 			const edgeGroups = {};
-			const constraints = (view) => ({
-				minimumSize: view.configuredMinimumSize,
-				maximumSize: Number.isFinite(view.configuredMaximumSize) ? view.configuredMaximumSize : void 0,
-				collapsedSize: view.configuredCollapsedSize
-			});
-			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$1({
-					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));
-			}
-			if (this._rightView && this._rightIndex !== void 0) {
-				const visible = this._outerSplitview.isViewVisible(this._rightIndex);
-				edgeGroups.right = _objectSpread2$1({
-					size: expandedSize(this._rightView, "right", visible, this._outerSplitview.getViewSize(this._rightIndex), this._outerSplitview.getViewCachedVisibleSize(this._rightIndex)),
+			for (const position of EDGE_POSITIONS) {
+				const view = this._getView(position);
+				if (!view) continue;
+				const visible = this.isEdgeGroupVisible(position);
+				edgeGroups[position] = {
+					size: this._expandedSize(view, position, visible),
 					visible,
-					collapsed: this._rightView.isCollapsed || void 0
-				}, constraints(this._rightView));
+					collapsed: view.isCollapsed || void 0,
+					minimumSize: view.configuredMinimumSize,
+					maximumSize: Number.isFinite(view.configuredMaximumSize) ? view.configuredMaximumSize : void 0,
+					collapsedSize: view.configuredCollapsedSize
+				};
 			}
-			if (this._topView) {
-				const visible = this._middleColumn.isViewVisible("top");
-				edgeGroups.top = _objectSpread2$1({
-					size: expandedSize(this._topView, "top", visible, this._middleColumn.getViewSize("top"), this._middleColumn.getViewCachedVisibleSize("top")),
-					visible,
-					collapsed: this._topView.isCollapsed || void 0
-				}, constraints(this._topView));
+			return edgeGroups;
+		}
+		/** The size to restore the group to. An expanded-but-hidden group has a
+		*  slot of 0, so fall back to its cached visible size (then
+		*  lastExpandedSize); otherwise re-showing snaps to minimumSize. */
+		_expandedSize(view, position, visible) {
+			if (view.isCollapsed) return view.lastExpandedSize;
+			const pending = this._pendingSizes.get(position);
+			if (pending !== void 0) return pending;
+			if (!visible) {
+				var _this$_cachedVisibleS;
+				return (_this$_cachedVisibleS = this._cachedVisibleSize(position)) !== null && _this$_cachedVisibleS !== void 0 ? _this$_cachedVisibleS : view.lastExpandedSize;
 			}
-			if (this._bottomView) {
-				const visible = this._middleColumn.isViewVisible("bottom");
-				edgeGroups.bottom = _objectSpread2$1({
-					size: expandedSize(this._bottomView, "bottom", visible, this._middleColumn.getViewSize("bottom"), this._middleColumn.getViewCachedVisibleSize("bottom")),
-					visible,
-					collapsed: this._bottomView.isCollapsed || void 0
-				}, constraints(this._bottomView));
+			return this._slotSize(position);
+		}
+		/** The slot a hidden view had when it was last visible. */
+		_cachedVisibleSize(position) {
+			switch (position) {
+				case "left": return this._leftIndex === void 0 ? void 0 : this._outerSplitview.getViewCachedVisibleSize(this._leftIndex);
+				case "right": return this._rightIndex === void 0 ? void 0 : this._outerSplitview.getViewCachedVisibleSize(this._rightIndex);
+				case "top":
+				case "bottom": return this._middleColumn.getViewCachedVisibleSize(position);
 			}
-			return edgeGroups;
 		}
 		fromJSON(data) {
-			for (const position of [
-				"left",
-				"right",
-				"top",
-				"bottom"
-			]) {
+			for (const position of EDGE_POSITIONS) {
 				var _state$collapsed;
 				const state = data[position];
 				const view = this._getView(position);
@@ -16179,6 +16313,7 @@ react_dom = __toESM(react_dom);
 			this.disableResizing = true;
 			this.element.remove();
 			this._shellManager = new ShellManager(container, this.element, (w, h) => this._layoutFromShell(w, h), (_options$theme$gap2 = (_options$theme2 = options.theme) === null || _options$theme2 === void 0 ? void 0 : _options$theme2.gap) !== null && _options$theme$gap2 !== void 0 ? _options$theme$gap2 : 0, (_options$theme3 = options.theme) === null || _options$theme3 === void 0 ? void 0 : _options$theme3.edgeGroupCollapsedSize);
+			this._shellManager.locked = !!options.locked;
 			this.popupService.updateRoot(this._shellManager.element);
 			this._shellThemeClassnames = new Classnames(this._shellManager.element);
 			this.rootDropTargetContainer = new DropTargetAnchorContainer(this._shellManager.element, { disabled: true });
@@ -16287,7 +16422,7 @@ react_dom = __toESM(react_dom);
 			const service = assertModule(this._popoutWindowService, "PopoutWindow", "api.addPopoutGroup");
 			if (!service) return Promise.resolve(false);
 			if (itemToPopout instanceof DockviewGroupPanel && itemToPopout.model.location.type === "edge") return Promise.resolve(false);
-			if (itemToPopout instanceof DockviewPanel && itemToPopout.group.size === 1) return this.addPopoutGroup(itemToPopout.group, options);
+			if (itemToPopout instanceof DockviewPanel && itemToPopout.group.size === 1 && this.closeEmptyGroups) return this.addPopoutGroup(itemToPopout.group, options);
 			const theme = getDockviewTheme(this.gridview.element);
 			const element = this.element;
 			function getBox() {
@@ -16376,7 +16511,8 @@ react_dom = __toESM(react_dom);
 				const overlayRenderContainer = new OverlayRenderContainer(gready, this);
 				group.model.renderContainer = overlayRenderContainer;
 				const popoutGridview = (_options$overridePopo4 = options === null || options === void 0 ? void 0 : options.overridePopoutGridview) !== null && _options$overridePopo4 !== void 0 ? _options$overridePopo4 : this.createNestedGridview();
-				if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGridview)) popoutGridview.addView(group, Sizing.Distribute, [0]);
+				if (options === null || options === void 0 ? void 0 : options.overridePopoutGridview) popoutGridview.locked = this.gridview.locked;
+				else popoutGridview.addView(group, Sizing.Distribute, [0]);
 				popoutGridview.element.style.width = "100%";
 				popoutGridview.element.style.height = "100%";
 				popoutGridview.layout(_window.window.innerWidth, _window.window.innerHeight);
@@ -16771,8 +16907,35 @@ react_dom = __toESM(react_dom);
 			});
 			for (const { panel, from } of movedPanels) this.fireDidMovePanel(panel, from);
 		}
+		/** The `closeEmptyGroups` option: remove a group once it empties. */
+		get closeEmptyGroups() {
+			return this.options.closeEmptyGroups !== false;
+		}
+		/** Whether a move leaves its emptied source group in place. */
+		keepEmptyGroups(options) {
+			var _options$keepEmptyGro;
+			return (_options$keepEmptyGro = options.keepEmptyGroups) !== null && _options$keepEmptyGro !== void 0 ? _options$keepEmptyGro : !this.closeEmptyGroups;
+		}
 		removeGroupIfEmpty(group) {
-			if (group.model.size === 0) this.doRemoveGroup(group, { skipActive: true });
+			if (group.model.size === 0 && this.closeEmptyGroups) this.doRemoveGroup(group, { skipActive: true });
+		}
+		/**
+		* Locks the main grid, the shell whose splitviews host the edge groups,
+		* and the nested gridviews of floating and popout windows. The base
+		* setter stops at the main grid; `updateOptions` reaches this override.
+		*/
+		get locked() {
+			return this.gridview.locked;
+		}
+		set locked(value) {
+			this.gridview.locked = value;
+			if (this._shellManager) this._shellManager.locked = value;
+			for (const gridview of this.nestedGridviews()) gridview.locked = value;
+		}
+		/** The gridviews hosted by open floating and popout windows. */
+		nestedGridviews() {
+			var _this$_popoutWindowSe9, _this$_popoutWindowSe10;
+			return [...this.floatingGroups.map((floating) => floating.gridview), ...((_this$_popoutWindowSe9 = (_this$_popoutWindowSe10 = this._popoutWindowService) === null || _this$_popoutWindowSe10 === void 0 ? void 0 : _this$_popoutWindowSe10.entries) !== null && _this$_popoutWindowSe9 !== void 0 ? _this$_popoutWindowSe9 : []).map((entry) => entry.gridview)];
 		}
 		/**
 		* Build an empty gridview configured to match the main grid's styling and
@@ -16781,7 +16944,7 @@ react_dom = __toESM(react_dom);
 		*/
 		createNestedGridview(orientation = "HORIZONTAL") {
 			var _this$options$theme$g, _this$options$theme2;
-			return new Gridview(this.gridview.proportionalLayout, this.options.hideBorders ? { separatorBorder: "transparent" } : void 0, orientation, false, (_this$options$theme$g = (_this$options$theme2 = this.options.theme) === null || _this$options$theme2 === void 0 ? void 0 : _this$options$theme2.gap) !== null && _this$options$theme$g !== void 0 ? _this$options$theme$g : 0);
+			return new Gridview(this.gridview.proportionalLayout, this.options.hideBorders ? { separatorBorder: "transparent" } : void 0, orientation, this.gridview.locked, (_this$options$theme$g = (_this$options$theme2 = this.options.theme) === null || _this$options$theme2 === void 0 ? void 0 : _this$options$theme2.gap) !== null && _this$options$theme$g !== void 0 ? _this$options$theme$g : 0);
 		}
 		/**
 		* Wrap a (populated) floating gridview in an overlay window: title bar /
@@ -16855,10 +17018,8 @@ react_dom = __toESM(react_dom);
 			const newDndStrategy = this.options.dndStrategy;
 			if (oldDisableDnd !== newDisableDnd || oldDndStrategy !== newDndStrategy) this.updateDragAndDropState();
 			if ("proportionalLayout" in options) {
-				var _this$_popoutWindowSe9, _this$_popoutWindowSe10;
 				const proportionalLayout = this.gridview.proportionalLayout;
-				for (const floating of this.floatingGroups) floating.gridview.proportionalLayout = proportionalLayout;
-				for (const entry of (_this$_popoutWindowSe9 = (_this$_popoutWindowSe10 = this._popoutWindowService) === null || _this$_popoutWindowSe10 === void 0 ? void 0 : _this$_popoutWindowSe10.entries) !== null && _this$_popoutWindowSe9 !== void 0 ? _this$_popoutWindowSe9 : []) entry.gridview.proportionalLayout = proportionalLayout;
+				for (const gridview of this.nestedGridviews()) gridview.proportionalLayout = proportionalLayout;
 			}
 			if ("theme" in options) this.updateTheme();
 			if ("createRightHeaderActionComponent" in options || "createLeftHeaderActionComponent" in options || "createPrefixHeaderActionComponent" in options) {
@@ -16927,7 +17088,7 @@ react_dom = __toESM(react_dom);
 				const resizeDisposable = group.onDidChange((event) => {
 					var _this$_shellManager3;
 					if (!event) return;
-					const size = position === "left" || position === "right" ? event.width : event.height;
+					const size = isHorizontal(position) ? event.width : event.height;
 					if (typeof size !== "number") return;
 					(_this$_shellManager3 = this._shellManager) === null || _this$_shellManager3 === void 0 || _this$_shellManager3.resizeEdgeGroup(position, size);
 				});
@@ -17605,9 +17766,12 @@ react_dom = __toESM(react_dom);
 		}
 		closeAllGroups() {
 			this.mutation("remove", () => {
-				for (const entry of this._groups.entries()) {
-					const [_, group] = entry;
-					group.value.model.closeAllPanels();
+				const groups = Array.from(this._groups.values()).map((_) => _.value);
+				for (const group of groups) {
+					if (!this._groups.has(group.id)) continue;
+					group.model.closeAllPanels();
+					const keepLast = this.options.noPanelsOverlay === "emptyGroup" && this._groups.size === 1;
+					if (!this.closeEmptyGroups && !keepLast && this._groups.has(group.id) && group.model.size === 0) this.removeGroup(group, { skipActive: true });
 				}
 			});
 		}
@@ -17732,7 +17896,7 @@ react_dom = __toESM(react_dom);
 			this.mutation("remove", () => {
 				var _options$removeEmptyG;
 				return this._doRemovePanel(panel, {
-					removeEmptyGroup: (_options$removeEmptyG = options === null || options === void 0 ? void 0 : options.removeEmptyGroup) !== null && _options$removeEmptyG !== void 0 ? _options$removeEmptyG : true,
+					removeEmptyGroup: (_options$removeEmptyG = options === null || options === void 0 ? void 0 : options.removeEmptyGroup) !== null && _options$removeEmptyG !== void 0 ? _options$removeEmptyG : this.closeEmptyGroups,
 					skipDispose: options === null || options === void 0 ? void 0 : options.skipDispose,
 					skipSetActiveGroup: options === null || options === void 0 ? void 0 : options.skipSetActiveGroup
 				});
@@ -17888,7 +18052,7 @@ react_dom = __toESM(react_dom);
 				if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
 					if (!(options === null || options === void 0 ? void 0 : options.skipPopoutAssociated)) {
 						const refGroup = selectedGroup.referenceGroup ? this.getPanel(selectedGroup.referenceGroup) : void 0;
-						if ((refGroup === null || refGroup === void 0 ? void 0 : refGroup.panels.length) === 0) this.removeGroup(refGroup);
+						if ((refGroup === null || refGroup === void 0 ? void 0 : refGroup.panels.length) === 0 && (this.closeEmptyGroups || !refGroup.api.isVisible)) this.removeGroup(refGroup);
 					}
 					selectedGroup.popoutGroup.dispose();
 					this._groups.delete(group.id);
@@ -18148,7 +18312,7 @@ react_dom = __toESM(react_dom);
 					skipSetActiveGroup: true
 				}));
 				if (!removedPanel) throw new Error(`dockview: No panel with id ${sourceItemId}`);
-				if (!options.keepEmptyGroups && sourceGroup.model.size === 0 && sourceGroup !== destinationGroup) this.doRemoveGroup(sourceGroup, { skipActive: true });
+				if (!this.keepEmptyGroups(options) && sourceGroup.model.size === 0 && sourceGroup !== destinationGroup) this.doRemoveGroup(sourceGroup, { skipActive: true });
 				const isDestinationGroupEmpty = destinationGroup.model.size === 0;
 				this.movingLock(() => {
 					var _options$skipSetActiv;
@@ -18168,10 +18332,12 @@ react_dom = __toESM(react_dom);
 				const destinationGridview = this.getGridviewForGroup(destinationGroup);
 				const referenceLocation = getGridLocation(destinationGroup.element);
 				const targetLocation = getRelativeLocation(destinationGridview.orientation, referenceLocation, destinationTarget);
-				if (sourceGroup.size < 2) {
+				if (sourceGroup.size < 2 && !this.keepEmptyGroups(options)) {
 					/**
 					* If we are moving from a group which only has one panel left we will consider
-					* moving the group itself rather than moving the panel into a newly created group
+					* moving the group itself rather than moving the panel into a newly created group.
+					* When empty groups are kept the group must stay where it is, so the panel is
+					* moved into a newly created group like any other panel.
 					*/
 					const [targetParentLocation, to] = tail(targetLocation);
 					if (sourceGroup.api.location.type === "grid" && destinationGridview === this.gridview) {
@@ -18296,7 +18462,7 @@ react_dom = __toESM(react_dom);
 				const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
 				targetGroup = this.createGroupAtLocation(dropLocation, this.dropSizing(referenceLocation));
 			}
-			if (!options.keepEmptyGroups && sourceGroup.model.size === 0 && sourceGroup !== targetGroup) this.doRemoveGroup(sourceGroup, { skipActive: true });
+			if (!this.keepEmptyGroups(options) && sourceGroup.model.size === 0 && sourceGroup !== targetGroup) this.doRemoveGroup(sourceGroup, { skipActive: true });
 			addPanelsToGroup(targetGroup);
 		}
 		moveGroup(options) {
@@ -18623,13 +18789,12 @@ react_dom = __toESM(react_dom);
 			return location.length % 2 == 1 ? rootOrientation : orthogonal(rootOrientation);
 		}
 		updateTheme() {
-			var _this$_options$theme, _this$_shellThemeClas, _theme$gap, _this$_popoutWindowSe25, _this$_popoutWindowSe26, _this$_shellManager5, _theme$edgeGroupColla, _theme$tabGroupIndica;
+			var _this$_options$theme, _this$_shellThemeClas, _theme$gap, _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$_popoutWindowSe25 = (_this$_popoutWindowSe26 = this._popoutWindowService) === null || _this$_popoutWindowSe26 === void 0 ? void 0 : _this$_popoutWindowSe26.entries) !== null && _this$_popoutWindowSe25 !== void 0 ? _this$_popoutWindowSe25 : []) entry.gridview.margin = gap;
+			for (const gridview of this.nestedGridviews()) gridview.margin = gap;
 			(_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$_shellManager6;