dockview-react 8.5.1 → 8.6.0

package/dist/dockview-react.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 8.5.1
+ * @version 8.6.0
  * @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.0
 	* @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];
@@ -3910,9 +3928,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.
@@ -6887,6 +6909,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,
@@ -11376,7 +11399,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 +11640,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 +11653,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;
@@ -14883,6 +14922,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 +14947,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 +14964,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 +14982,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 +14997,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 +15030,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 +15039,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 +15159,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 +15222,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 +15229,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 +15248,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 +15277,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 +15299,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 +15310,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 +15383,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 +15394,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 +15407,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 +15457,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 +15502,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 +16248,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 +16357,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 +16446,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 +16842,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 +16879,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 +16953,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 +17023,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 +17701,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 +17831,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 +17987,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 +18247,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 +18267,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 +18397,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 +18724,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;