dockview-react 8.7.0 → 8.8.0

package/dist/cjs/paneview/view.d.ts

@@ -14,6 +14,6 @@ export declare class PanePanelSection implements IPanePart {
     toJSON(): {
         id: string;
     };
-    update(params: PanelUpdateEvent): void;
+    update(event: PanelUpdateEvent): void;
     dispose(): void;
 }

package/dist/dockview-react.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 8.7.0
+ * @version 8.8.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.7.0
+	* @version 8.8.0
 	* @link https://github.com/dockview/dockview
 	* @license MIT
 	*/
@@ -165,6 +165,7 @@ react_dom = __toESM(react_dom);
 	};
 	let Event;
 	(function(_Event) {
+		_Event.map = (event, fn) => (listener) => event((e) => listener(fn(e)));
 		_Event.any = (...children) => {
 			return (listener) => {
 				const disposables = children.map((child) => child(listener));
@@ -323,31 +324,25 @@ react_dom = __toESM(react_dom);
 		constructor() {
 			this._onFired = new Emitter();
 			this._currentFireCount = 0;
+			this._pending = /* @__PURE__ */ new Set();
 			this._queued = false;
-			this.onEvent = (e) => {
-				/**
-				* when the event is first subscribed to take note of the current fire count
-				*/
+			this.onEvent = (listener) => {
 				const fireCountAtTimeOfEventSubscription = this._currentFireCount;
-				return this._onFired.event(() => {
-					/**
-					* if the current fire count is greater than the fire count at event subscription
-					* then the event has been fired since we subscribed and it's ok to "on_next" the event.
-					*
-					* if the count is not greater then what we are recieving is an event from the microtask
-					* queue that was triggered before we actually subscribed and therfore we should ignore it.
-					*/
-					if (this._currentFireCount > fireCountAtTimeOfEventSubscription) e();
+				return this._onFired.event((values) => {
+					if (this._currentFireCount > fireCountAtTimeOfEventSubscription) listener(values);
 				});
 			};
 		}
-		fire() {
+		fire(value) {
 			this._currentFireCount++;
+			this._pending.add(value);
 			if (this._queued) return;
 			this._queued = true;
 			queueMicrotask(() => {
 				this._queued = false;
-				this._onFired.fire();
+				const values = this._pending;
+				this._pending = /* @__PURE__ */ new Set();
+				this._onFired.fire(values);
 			});
 		}
 		dispose() {
@@ -878,9 +873,16 @@ react_dom = __toESM(react_dom);
 			this._onDidClose = new Emitter();
 			this.onDidClose = this._onDidClose.event;
 			this._window = null;
-			this.addDisposables(this._onWillClose, this._onDidClose, { dispose: () => {
-				this.close();
-			} });
+			this.addDisposables(this._onWillClose, this._onDidClose);
+		}
+		/**
+		* Close before `super.dispose()` kills the close emitters, so an explicit
+		* dispose still fires `onWillClose` / `onDidClose` (the component's
+		* per-window teardown hangs off them). A closed window is a no-op.
+		*/
+		dispose() {
+			this.close();
+			super.dispose();
 		}
 		dimensions() {
 			if (!this._window) return null;
@@ -2272,7 +2274,8 @@ react_dom = __toESM(react_dom);
 			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), childSizing(node, i, child.size), 0, true);
+				const childSize = child instanceof BranchNode ? child.orthogonalSize : child.size;
+				result.addChild(cloneNode(child, child.size, child.orthogonalSize), childSizing(node, i, childSize), 0, true);
 			}
 			return result;
 		} else return new LeafNode(node.view, node.orientation, orthogonalSize);
@@ -2771,10 +2774,11 @@ react_dom = __toESM(react_dom);
 			const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i));
 			grandParent.removeChild(parentIndex, sizing).dispose();
 			if (sibling instanceof BranchNode) {
-				sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
+				const childSizes = sibling.children.map((c) => c instanceof BranchNode ? c.orthogonalSize : c.size);
+				sizes.splice(parentIndex, 1, ...childSizes);
 				for (let i = 0; i < sibling.children.length; i++) {
 					const child = sibling.children[i];
-					const childSize = childSizing(sibling, i, child.size);
+					const childSize = childSizing(sibling, i, childSizes[i]);
 					grandParent.addChild(child, !isSiblingVisible && typeof childSize === "number" ? Sizing.Invisible(childSize) : childSize, parentIndex + i);
 				}
 				/**
@@ -2949,7 +2953,7 @@ react_dom = __toESM(react_dom);
 			this._onDidActiveChange = new Emitter();
 			this.onDidActiveChange = this._onDidActiveChange.event;
 			this._bufferOnDidLayoutChange = new AsapEvent();
-			this.onDidLayoutChange = this._bufferOnDidLayoutChange.onEvent;
+			this.onDidLayoutChange = Event.map(this._bufferOnDidLayoutChange.onEvent, (reasons) => ({ reasons }));
 			this._onDidViewVisibilityChangeMicroTaskQueue = new AsapEvent();
 			this.onDidViewVisibilityChangeMicroTaskQueue = this._onDidViewVisibilityChangeMicroTaskQueue.onEvent;
 			this.element.style.height = "100%";
@@ -2971,14 +2975,18 @@ react_dom = __toESM(react_dom);
 			}), Disposable.from(() => {
 				this.element.remove();
 			}), this.gridview.onDidChange(() => {
-				this._bufferOnDidLayoutChange.fire();
-			}), Event.any(this.onDidAdd, this.onDidRemove, this.onDidActiveChange)(() => {
-				this._bufferOnDidLayoutChange.fire();
+				this._bufferOnDidLayoutChange.fire("geometry");
+			}), Event.any(this.onDidAdd, this.onDidRemove)(() => {
+				this._bufferOnDidLayoutChange.fire("structure");
+			}), this.onDidActiveChange(() => {
+				this._bufferOnDidLayoutChange.fire("activePanel");
+			}), this.onDidMaximizedChange(() => {
+				this._bufferOnDidLayoutChange.fire("geometry");
 			}), this._onDidMaximizedChange, this._onDidViewVisibilityChangeMicroTaskQueue, this._bufferOnDidLayoutChange);
 		}
 		setVisible(panel, visible) {
 			this.gridview.setViewVisible(getGridLocation(panel.element), visible);
-			this._bufferOnDidLayoutChange.fire();
+			this._bufferOnDidLayoutChange.fire("geometry");
 		}
 		isVisible(panel) {
 			return this.gridview.isViewVisible(getGridLocation(panel.element));
@@ -3226,6 +3234,7 @@ react_dom = __toESM(react_dom);
 		/**
 		* Invoked whenever any aspect of the layout changes.
 		* If listening to this event it may be worth debouncing ouputs.
+		* The event carries the `reasons` for the change.
 		*/
 		get onDidLayoutChange() {
 			return this.component.onDidLayoutChange;
@@ -3344,6 +3353,7 @@ react_dom = __toESM(react_dom);
 		}
 		/**
 		* Invoked when any layout change occures, an aggregation of many events.
+		* The event carries the `reasons` for the change.
 		*/
 		get onDidLayoutChange() {
 			return this.component.onDidLayoutChange;
@@ -3484,6 +3494,7 @@ react_dom = __toESM(react_dom);
 		}
 		/**
 		* Invoked when any layout change occures, an aggregation of many events.
+		* The event carries the `reasons` for the change.
 		*/
 		get onDidLayoutChange() {
 			return this.component.onDidLayoutChange;
@@ -3714,6 +3725,7 @@ react_dom = __toESM(react_dom);
 		}
 		/**
 		* Invoked when any layout change occures, an aggregation of many events.
+		* The event carries the `reasons` for the change.
 		*/
 		get onDidLayoutChange() {
 			return this.component.onDidLayoutChange;
@@ -5312,7 +5324,9 @@ react_dom = __toESM(react_dom);
 			var _this$_startEvent, _this$options$onDragS, _this$options2, _this$options$createG, _this$options3;
 			const startEvent = (_this$_startEvent = this._startEvent) !== null && _this$_startEvent !== void 0 ? _this$_startEvent : triggerEvent;
 			this._cancelPending();
+			const wasPrevented = startEvent.defaultPrevented;
 			(_this$options$onDragS = (_this$options2 = this.options).onDragStart) === null || _this$options$onDragS === void 0 || _this$options$onDragS.call(_this$options2, startEvent);
+			if (startEvent.defaultPrevented && !wasPrevented) return;
 			const ghost = (_this$options$createG = (_this$options3 = this.options).createGhost) === null || _this$options$createG === void 0 ? void 0 : _this$options$createG.call(_this$options3, startEvent);
 			PointerDragController.getInstance().beginDrag({
 				pointerEvent: triggerEvent,
@@ -5383,10 +5397,10 @@ react_dom = __toESM(react_dom);
 		}
 	};
 	/**
-	* HTML5 drag source. Listens for the native `dragstart` event, calls
-	* `getData` to populate transfer, optionally renders the ghost via
-	* `setDragImage`, fires `onDragStart` / `onDragEnd`, and tears down the
-	* transfer disposer after `dragend`.
+	* HTML5 drag source. Listens for the native `dragstart` event, fires
+	* `onDragStart` (the consumer's chance to veto via `preventDefault()`), then
+	* calls `getData` to populate transfer, optionally renders the ghost via
+	* `setDragImage`, and tears down the transfer disposer after `dragend`.
 	*/
 	var Html5DragSource = class extends CompositeDisposable {
 		constructor(el, opts) {
@@ -5397,17 +5411,19 @@ react_dom = __toESM(react_dom);
 			this._pointerEventsDisposable = new MutableDisposable();
 			this._disabled = !!opts.disabled;
 			this.addDisposables(this._dataDisposable, this._pointerEventsDisposable, addDisposableListener(this.el, "dragstart", (event) => {
-				var _this$opts$isCancelle, _this$opts, _this$el$ownerDocumen, _this$opts$createGhos, _this$opts2, _this$opts$onDragStar, _this$opts3;
+				var _this$opts$isCancelle, _this$opts, _this$opts$onDragStar, _this$opts2, _this$el$ownerDocumen, _this$opts$createGhos, _this$opts3;
 				if (event.defaultPrevented || this._disabled || ((_this$opts$isCancelle = (_this$opts = this.opts).isCancelled) === null || _this$opts$isCancelle === void 0 ? void 0 : _this$opts$isCancelle.call(_this$opts, event))) {
 					event.preventDefault();
 					return;
 				}
+				(_this$opts$onDragStar = (_this$opts2 = this.opts).onDragStart) === null || _this$opts$onDragStar === void 0 || _this$opts$onDragStar.call(_this$opts2, event);
+				if (event.defaultPrevented) return;
 				const iframes = disableIframePointEvents((_this$el$ownerDocumen = this.el.ownerDocument) !== null && _this$el$ownerDocumen !== void 0 ? _this$el$ownerDocumen : document);
 				this._pointerEventsDisposable.value = { dispose: () => iframes.release() };
 				this.el.classList.add("dv-dragged");
 				setTimeout(() => this.el.classList.remove("dv-dragged"), 0);
 				this._dataDisposable.value = this.opts.getData(event);
-				const ghost = (_this$opts$createGhos = (_this$opts2 = this.opts).createGhost) === null || _this$opts$createGhos === void 0 ? void 0 : _this$opts$createGhos.call(_this$opts2, event);
+				const ghost = (_this$opts$createGhos = (_this$opts3 = this.opts).createGhost) === null || _this$opts$createGhos === void 0 ? void 0 : _this$opts$createGhos.call(_this$opts3, event);
 				if (ghost && event.dataTransfer) {
 					var _ghost$offsetX, _ghost$offsetY, _this$el$ownerDocumen2;
 					addGhostImage(event.dataTransfer, ghost.element, {
@@ -5425,7 +5441,6 @@ react_dom = __toESM(react_dom);
 					event.dataTransfer.effectAllowed = "move";
 					if (event.dataTransfer.items.length === 0) event.dataTransfer.setData("text/plain", "");
 				}
-				(_this$opts$onDragStar = (_this$opts3 = this.opts).onDragStart) === null || _this$opts$onDragStar === void 0 || _this$opts$onDragStar.call(_this$opts3, event);
 			}), addDisposableListener(this.el, "dragend", (event) => {
 				var _this$opts$onDragEnd, _this$opts4;
 				this._pointerEventsDisposable.dispose();
@@ -5682,7 +5697,7 @@ react_dom = __toESM(react_dom);
 				height
 			});
 			if (this.part) {
-				if (this._params) this.part.update(this._params.params);
+				if (this._params) this.part.update({ params: this._params.params });
 			}
 		}
 		init(parameters) {
@@ -5863,10 +5878,10 @@ react_dom = __toESM(react_dom);
 		}
 		getComponent() {
 			return {
-				update: (params) => {
+				update: (event) => {
 					var _this$bodyPart, _this$headerPart;
-					(_this$bodyPart = this.bodyPart) === null || _this$bodyPart === void 0 || _this$bodyPart.update({ params });
-					(_this$headerPart = this.headerPart) === null || _this$headerPart === void 0 || _this$headerPart.update({ params });
+					(_this$bodyPart = this.bodyPart) === null || _this$bodyPart === void 0 || _this$bodyPart.update(event);
+					(_this$headerPart = this.headerPart) === null || _this$headerPart === void 0 || _this$headerPart.update(event);
 				},
 				dispose: () => {
 					var _this$bodyPart2, _this$headerPart2;
@@ -6382,7 +6397,7 @@ react_dom = __toESM(react_dom);
 				onDragStart: (event) => {
 					var _this$accessor$option2;
 					this._onDragStart.fire(event);
-					if (!(event instanceof PointerEvent) && ((_this$accessor$option2 = this.accessor.options.theme) === null || _this$accessor$option2 === void 0 ? void 0 : _this$accessor$option2.tabAnimation) === "smooth") requestAnimationFrame(() => {
+					if (!event.defaultPrevented && !(event instanceof PointerEvent) && ((_this$accessor$option2 = this.accessor.options.theme) === null || _this$accessor$option2 === void 0 ? void 0 : _this$accessor$option2.tabAnimation) === "smooth") requestAnimationFrame(() => {
 						toggleClass(this.element, "dv-tab--dragging", true);
 					});
 				},
@@ -6661,8 +6676,10 @@ react_dom = __toESM(react_dom);
 				},
 				onDragStart: (event) => {
 					var _this$getFloatingOver;
-					(_this$getFloatingOver = this.getFloatingOverlay()) === null || _this$getFloatingOver === void 0 || _this$getFloatingOver.cancelPendingDrag();
+					const wasPrevented = event.defaultPrevented;
 					this._onDragStart.fire(event);
+					if (event.defaultPrevented && !wasPrevented) return;
+					(_this$getFloatingOver = this.getFloatingOverlay()) === null || _this$getFloatingOver === void 0 || _this$getFloatingOver.cancelPendingDrag();
 				}
 			}));
 			const overlayMoveSub = new MutableDisposable();
@@ -9566,10 +9583,12 @@ react_dom = __toESM(react_dom);
 				value: tab,
 				disposable: new CompositeDisposable(tab.onDragStart((event) => {
 					var _this$accessor$option2;
+					const wasPrevented = event.defaultPrevented;
 					this._onTabDragStart.fire({
 						nativeEvent: event,
 						panel
 					});
+					if (event.defaultPrevented && !wasPrevented) return;
 					if (((_this$accessor$option2 = this.accessor.options.theme) === null || _this$accessor$option2 === void 0 ? void 0 : _this$accessor$option2.tabAnimation) === "smooth") {
 						const tabSize = mainAxisSize(tab.element.getBoundingClientRect(), this._direction);
 						const sourceIndex = this._tabs.findIndex((x) => x.value === tab);
@@ -13321,7 +13340,7 @@ react_dom = __toESM(react_dom);
 			floatingGroupPanel.addDisposables(group.api.onDidActivePanelChange(() => updateDialogLabel()), overlay.onDidChange(() => {
 				gridview.layout(gridview.width, gridview.height);
 			}), overlay.onDidChangeEnd(() => {
-				this._host.fireLayoutChange();
+				this._host.fireLayoutChange("geometry");
 			}), group.onDidChange((event) => {
 				overlay.setBounds({
 					height: typeof (event === null || event === void 0 ? void 0 : event.height) === "number" ? event.height + overlay.headerHeight : event === null || event === void 0 ? void 0 : event.height,
@@ -15121,6 +15140,8 @@ react_dom = __toESM(react_dom);
 			const strip = this._group.element.querySelector(".dv-tabs-and-actions-container");
 			if (!strip) return;
 			this._tabSizeDisposables.addDisposables(watchElementResize(strip, () => {
+				const { headerPosition } = this._group;
+				if ((headerPosition === "left" || headerPosition === "right") !== (this._orientation === "horizontal")) return;
 				this._applyMeasuredTabSize(this._orientation === "vertical" ? strip.offsetHeight : strip.offsetWidth);
 			}));
 		}
@@ -16227,8 +16248,9 @@ react_dom = __toESM(react_dom);
 		hasVisibleGridGroup() {
 			return this.groups.some((group) => group.api.location.type === "grid" && group.api.isVisible);
 		}
-		fireLayoutChange() {
-			this._bufferOnDidLayoutChange.fire();
+		/** Ping `onDidLayoutChange` (coalesced) with why the layout changed. */
+		fireLayoutChange(reason) {
+			this._bufferOnDidLayoutChange.fire(reason);
 		}
 		/**
 		* Promise that resolves when all popout groups from the last fromJSON call are restored.
@@ -16379,8 +16401,10 @@ react_dom = __toESM(react_dom);
 				* Debounced to avoid multiple calls when moving groups with multiple panels.
 				*/
 				this.debouncedUpdateAllPositions();
-			}), this._onDidAddGroup, this._onDidRemoveGroup, this._onDidEdgeGroupAutoHideChange, this._onDidActiveGroupChange, this._onUnhandledDragOver, this._onDidMaximizedGroupChange, this._onDidPopoutGroupSizeChange, this._onDidPopoutGroupPositionChange, this._onDidAddPopoutGroup, this._onDidRemovePopoutGroup, this._onDidChangePopouts, this._onDidAddPopoutGroup.event(() => this._onDidChangePopouts.fire()), this._onDidRemovePopoutGroup.event(() => this._onDidChangePopouts.fire()), this._onDidOpenPopoutWindowFail, this._onDidStartFloatingGroupDrag, this._onDidEndFloatingGroupDrag, this._onDidCreateTabGroup, this._onDidDestroyTabGroup, this._onDidAddPanelToTabGroup, this._onDidRemovePanelFromTabGroup, this._onDidTabGroupChange, this._onDidTabGroupCollapsedChange, Event.any(this.onDidPopoutGroupSizeChange, this.onDidPopoutGroupPositionChange, this.onDidCreateTabGroup, this.onDidDestroyTabGroup, this.onDidAddPanelToTabGroup, this.onDidRemovePanelFromTabGroup, this.onDidTabGroupChange, this.onDidTabGroupCollapsedChange)(() => {
-				this.fireLayoutChange();
+			}), this._onDidAddGroup, this._onDidRemoveGroup, this._onDidEdgeGroupAutoHideChange, this._onDidActiveGroupChange, this._onUnhandledDragOver, this._onDidMaximizedGroupChange, this._onDidPopoutGroupSizeChange, this._onDidPopoutGroupPositionChange, this._onDidAddPopoutGroup, this._onDidRemovePopoutGroup, this._onDidChangePopouts, this._onDidAddPopoutGroup.event(() => this._onDidChangePopouts.fire()), this._onDidRemovePopoutGroup.event(() => this._onDidChangePopouts.fire()), this._onDidOpenPopoutWindowFail, this._onDidStartFloatingGroupDrag, this._onDidEndFloatingGroupDrag, this._onDidCreateTabGroup, this._onDidDestroyTabGroup, this._onDidAddPanelToTabGroup, this._onDidRemovePanelFromTabGroup, this._onDidTabGroupChange, this._onDidTabGroupCollapsedChange, Event.any(this.onDidPopoutGroupSizeChange, this.onDidPopoutGroupPositionChange)(() => {
+				this.fireLayoutChange("geometry");
+			}), Event.any(this.onDidCreateTabGroup, this.onDidDestroyTabGroup, this.onDidAddPanelToTabGroup, this.onDidRemovePanelFromTabGroup, this.onDidTabGroupChange, this.onDidTabGroupCollapsedChange)(() => {
+				this.fireLayoutChange("structure");
 			}), this._onDidOptionsChange, this.onDidAdd((event) => {
 				if (!this._moving) this._onDidAddGroup.fire(event);
 			}), this.onDidRemove((event) => {
@@ -16392,8 +16416,10 @@ react_dom = __toESM(react_dom);
 					group: event.panel,
 					isMaximized: event.isMaximized
 				});
-			}), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidRemoveGroup, this.onDidMovePanel, this.onDidActivePanelChange)(() => {
-				this._bufferOnDidLayoutChange.fire();
+			}), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidRemoveGroup, this.onDidMovePanel)(() => {
+				this._bufferOnDidLayoutChange.fire("structure");
+			}), this.onDidActivePanelChange(() => {
+				this._bufferOnDidLayoutChange.fire("activePanel");
 			}), Disposable.from(() => {
 				var _this$_shellManager2;
 				this._moduleRegistry.dispose();
@@ -16764,10 +16790,13 @@ react_dom = __toESM(react_dom);
 		}
 		/**
 		* Teardown for a popout window's `popoutWindowDisposable`. Runs when the
-		* window closes (by user, by `removeGroup`, or by component disposal):
-		* relocates every member group back to the main grid (or to a floating
-		* window when the anchor came from one), then disposes the nested gridview.
-		* `closeResult.returnedGroup` is read by the entry's `dispose()` contract.
+		* window closes (by user, by `removeGroup` / `moveGroup`, or by component
+		* disposal). On a genuine close it relocates every member group back to
+		* the main grid (or to a floating window when the anchor came from one),
+		* then disposes the nested gridview. On an explicit removal it only hands
+		* the anchor back and disposes the nested gridview: the remover places the
+		* group itself. `closeResult.returnedGroup` is read by the entry's
+		* `dispose()` contract.
 		*/
 		disposePopoutWindow(params) {
 			var _this$_popoutWindowSe7;
@@ -16780,6 +16809,15 @@ react_dom = __toESM(react_dom);
 			const members = this.groups.filter((candidate) => popoutGridview.element.contains(candidate.element));
 			const anchorPresent = members.includes(group);
 			const anchorIsSoleMember = anchorPresent && members.length === 1;
+			if (!genuineClose) {
+				if (anchorPresent && this.getPanel(group.id)) {
+					group.model.renderContainer = this.overlayRenderContainer;
+					group.model.dropTargetContainer = this.rootDropTargetContainer;
+					closeResult.returnedGroup = group;
+				}
+				disposePopoutGridview();
+				return;
+			}
 			/**
 			* Popping a group out fires `onDidMovePanel` per panel, so closing the
 			* window owes the caller the same: every panel in it is rehomed, into
@@ -16790,7 +16828,7 @@ react_dom = __toESM(react_dom);
 			* their final group and location.
 			*/
 			const movedPanels = [];
-			if (genuineClose) for (const member of members) {
+			for (const member of members) {
 				if (member === group) continue;
 				this.movingLock(() => {
 					this.doRemoveGroup(member, {
@@ -16821,15 +16859,6 @@ react_dom = __toESM(react_dom);
 				group.model.renderContainer = this.overlayRenderContainer;
 				group.model.dropTargetContainer = this.rootDropTargetContainer;
 				closeResult.returnedGroup = group;
-				if (!genuineClose) {
-					/**
-					* If this popout group was explicitly removed then we shouldn't run the additional
-					* steps. The explicit remover re-docks the returned group itself; here we only hand
-					* it back (above) and tear down the nested gridview.
-					*/
-					disposePopoutGridview();
-					return;
-				}
 				if (floatingBox && anchorIsSoleMember) this.addFloatingGroup(group, {
 					height: floatingBox.height,
 					width: floatingBox.width,
@@ -17146,7 +17175,14 @@ react_dom = __toESM(react_dom);
 				if (options.autoHide !== void 0) service.setAutoHide(group, options.autoHide);
 				if (options.autoReveal !== void 0) service.setAutoReveal(group, options.autoReveal);
 				this._onDidAddGroup.fire(group);
-				this._shellManager.addEdgeView(position, options, group);
+				const host = {
+					element: group.element,
+					get headerPosition() {
+						return group.model.headerPosition;
+					},
+					layout: (width, height) => group.layout(width, height)
+				};
+				this._shellManager.addEdgeView(position, options, host);
 				return group.api;
 			});
 		}
@@ -17616,16 +17652,33 @@ react_dom = __toESM(react_dom);
 				console.error("dockview: failed to deserialize layout. Reverting changes", err);
 				/**
 				* Takes all the successfully created groups and remove all of their panels.
+				*
+				* `group.panels` is the group's live array and `removePanel`
+				* splices it, so iterate a copy — walking the live array skips
+				* every other panel, leaving it attached to the overlay render
+				* container and its `onDidRemovePanel` never fired.
 				*/
-				for (const group of this.groups) for (const panel of group.panels) this.removePanel(panel, {
+				for (const group of this.groups) for (const panel of group.panels.slice()) this.removePanel(panel, {
 					removeEmptyGroup: false,
 					skipDispose: false
 				});
 				/**
 				* To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
 				* the underlying HTMLElement existing in the Gridview.
+				*
+				* Edge groups are structural (owned by the edge-group service and
+				* the shell, not the grid), so they are skipped here exactly as
+				* `_doClear` and `doRemoveGroup` skip them. Disposing one would
+				* leave the service holding a dead group: `addEdgeGroup` at that
+				* position reports it as existing, `addPanel` against it fails,
+				* and a later good `fromJSON` restores nothing into it. The panel
+				* loop above has already emptied them and the `clear()` below
+				* keeps them registered: the same state a successful restore of a
+				* layout without that edge group leaves them in.
 				*/
 				for (const group of this.groups) {
+					var _this$_edgeGroupServi9;
+					if ((_this$_edgeGroupServi9 = this._edgeGroupService) === null || _this$_edgeGroupServi9 === void 0 ? void 0 : _this$_edgeGroupServi9.includes(group)) continue;
 					group.dispose();
 					this._groups.delete(group.id);
 					this._onDidRemoveGroup.fire(group);
@@ -17795,8 +17848,8 @@ react_dom = __toESM(react_dom);
 			const groups = Array.from(this._groups.values()).map((_) => _.value);
 			const hasActiveGroup = !!this.activeGroup;
 			for (const group of groups) {
-				var _this$_edgeGroupServi9;
-				if ((_this$_edgeGroupServi9 = this._edgeGroupService) === null || _this$_edgeGroupServi9 === void 0 ? void 0 : _this$_edgeGroupServi9.includes(group)) {
+				var _this$_edgeGroupServi10;
+				if ((_this$_edgeGroupServi10 = this._edgeGroupService) === null || _this$_edgeGroupServi10 === void 0 ? void 0 : _this$_edgeGroupServi10.includes(group)) {
 					const panels = [...group.panels];
 					for (const panel of panels) this.removePanel(panel, { removeEmptyGroup: false });
 					continue;
@@ -18227,8 +18280,8 @@ react_dom = __toESM(react_dom);
 			}
 		}
 		doRemoveGroup(group, options) {
-			var _this$_edgeGroupServi10;
-			if ((_this$_edgeGroupServi10 = this._edgeGroupService) === null || _this$_edgeGroupServi10 === void 0 ? void 0 : _this$_edgeGroupServi10.includes(group)) return group;
+			var _this$_edgeGroupServi11;
+			if ((_this$_edgeGroupServi11 = this._edgeGroupService) === null || _this$_edgeGroupServi11 === void 0 ? void 0 : _this$_edgeGroupServi11.includes(group)) return group;
 			const panels = [...group.panels];
 			if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) for (const panel of panels) {
 				var _options$skipDispose;
@@ -18915,8 +18968,10 @@ react_dom = __toESM(react_dom);
 					if (this._moving) return;
 					if (event.panel !== this.activePanel) return;
 					if (((_this$_onDidActivePan3 = this._onDidActivePanelChange.value) === null || _this$_onDidActivePan3 === void 0 ? void 0 : _this$_onDidActivePan3.panel) !== event.panel) this.fireActivePanelChange(event.panel);
-				}), Event.any(view.model.onDidPanelTitleChange, view.model.onDidPanelParametersChange)(() => {
-					this._bufferOnDidLayoutChange.fire();
+				}), view.model.onDidPanelTitleChange(() => {
+					this._bufferOnDidLayoutChange.fire("panelTitle");
+				}), view.model.onDidPanelParametersChange(() => {
+					this._bufferOnDidLayoutChange.fire("panelParameters");
 				}));
 				this._groups.set(view.id, {
 					value: view,
@@ -19290,7 +19345,7 @@ react_dom = __toESM(react_dom);
 			if (this._splitview) this._splitview.dispose();
 			this._splitview = value;
 			this._splitviewChangeDisposable.value = new CompositeDisposable(this._splitview.onDidSashEnd(() => {
-				this._onDidLayoutChange.fire(void 0);
+				this._onDidLayoutChange.fire({ reasons: /* @__PURE__ */ new Set(["geometry"]) });
 			}), this._splitview.onDidAddView((e) => this._onDidAddView.fire(e)), this._splitview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
 		}
 		get minimumSize() {
@@ -19574,7 +19629,7 @@ react_dom = __toESM(react_dom);
 		set paneview(value) {
 			this._paneview = value;
 			this._disposable.value = new CompositeDisposable(this._paneview.onDidChange(() => {
-				this._onDidLayoutChange.fire(void 0);
+				this._onDidLayoutChange.fire({ reasons: /* @__PURE__ */ new Set(["geometry"]) });
 			}), this._paneview.onDidAddView((e) => this._onDidAddView.fire(e)), this._paneview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
 		}
 		get paneview() {
@@ -20866,9 +20921,9 @@ react_dom = __toESM(react_dom);
 		toJSON() {
 			return { id: this.id };
 		}
-		update(params) {
+		update(event) {
 			var _this$part;
-			(_this$part = this.part) === null || _this$part === void 0 || _this$part.update(params.params);
+			(_this$part = this.part) === null || _this$part === void 0 || _this$part.update({ params: event.params });
 		}
 		dispose() {
 			var _this$part2;