dockview-core 8.3.0 → 8.4.0

package/dist/dockview-core.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 8.3.0
+ * @version 8.4.0
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -387,7 +387,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			this._onDidBlur = new Emitter();
 			this.onDidBlur = this._onDidBlur.event;
 			this.addDisposables(this._onDidFocus, this._onDidBlur);
-			let hasFocus = isAncestor(document.activeElement, element);
+			let hasFocus = isAncestor(getActiveElement(element), element);
 			let loosingFocus = false;
 			const onFocus = () => {
 				loosingFocus = false;
@@ -409,7 +409,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				}
 			};
 			this._refreshStateHandler = () => {
-				if (isAncestor(document.activeElement, element) !== hasFocus) if (hasFocus) onBlur();
+				if (isAncestor(getActiveElement(element), element) !== hasFocus) if (hasFocus) onBlur();
 				else onFocus();
 			};
 			this.addDisposables(addDisposableListener(element, "focus", onFocus, true));
@@ -426,6 +426,49 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 	function quasiDefaultPrevented(event) {
 		return event[QUASI_PREVENT_DEFAULT_KEY];
 	}
+	/** Whether the event originated within any of `elements`. Checks the
+	*  composed path, so it also holds for elements inside a shadow root, which a
+	*  window or document listener sees retargeted to the shadow host. */
+	function isEventWithin(event, elements) {
+		var _event$composedPath, _event$composedPath2;
+		const path = (_event$composedPath = (_event$composedPath2 = event.composedPath) === null || _event$composedPath2 === void 0 ? void 0 : _event$composedPath2.call(event)) !== null && _event$composedPath !== void 0 ? _event$composedPath : [];
+		if (path.length > 0) return elements.some((el) => path.includes(el));
+		const target = event.target;
+		return target instanceof Node && elements.some((el) => el.contains(target));
+	}
+	/** Every shadow root between `element` and its document, innermost first. An
+	*  element in a component nested inside another component sits in more than
+	*  one, and an event is cut at each boundary. */
+	function shadowRootsOf(node) {
+		const roots = [];
+		let root = node.getRootNode();
+		while (isShadowRoot(root)) {
+			roots.push(root);
+			root = root.host.getRootNode();
+		}
+		return roots;
+	}
+	/**
+	* `element` as a listener rooted in `scope`'s tree sees it. A node in a shadow
+	* root *below* that tree is retargeted to its host there, repeatedly for
+	* nested roots; a node already in the same tree is returned unchanged. Omit
+	* `scope` (or pass a node in the document) for the document-level view, which
+	* is what a window listener gets.
+	*
+	* The scope matters: a layer living inside a shadow root must be able to tell
+	* its own elements apart, and retargeting everything out to the document would
+	* collapse them all onto the one host.
+	*/
+	function retargetInto(element, scope) {
+		const scopeRoot = scope === null || scope === void 0 ? void 0 : scope.getRootNode();
+		let current = element;
+		let root = current.getRootNode();
+		while (root !== scopeRoot && isShadowRoot(root)) {
+			current = root.host;
+			root = current.getRootNode();
+		}
+		return current;
+	}
 	function addStyles(document, styleSheetList, options = {}) {
 		const styleSheets = Array.from(styleSheetList);
 		const { nonce } = options;
@@ -436,6 +479,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				link.href = styleSheet.href;
 				link.type = styleSheet.type;
 				link.rel = "stylesheet";
+				if (resolvedNonce) link.setAttribute("nonce", resolvedNonce);
 				document.head.appendChild(link);
 				continue;
 			}
@@ -475,6 +519,23 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		else currentElement = currentElement.parentNode;
 		return false;
 	}
+	/** Duck-typed so it holds for a shadow root from another window's realm. */
+	function isShadowRoot(node) {
+		return !!node && node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && "host" in node && !!node.host;
+	}
+	/**
+	* The document or shadow root to hit-test (`elementFromPoint` /
+	* `elementsFromPoint`) against for `node`. Hit-testing on the document stops
+	* at a shadow host, so when dockview is mounted in a shadow root it has to go
+	* through that root to reach its own elements. Falls back to the owning
+	* document (which may be a popout's) for a detached node.
+	*/
+	function getHitTestRoot(node) {
+		var _node$ownerDocument;
+		const root = node.getRootNode();
+		if (root !== node && typeof root.elementsFromPoint === "function") return root;
+		return (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : document;
+	}
 	function addTestId(element, id) {
 		element.dataset.testid = id;
 	}
@@ -509,6 +570,38 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			iframes.splice(0, iframes.length);
 		} };
 	}
+	/**
+	* Suppress text selection for the duration of a pointer drag.
+	*
+	* A pointer drag is just a held button as far as the browser is concerned, so
+	* it selects text under the cursor as it travels. HTML5 drag-and-drop is
+	* exempt - the browser owns the gesture - which is why this is only needed on
+	* the pointer backend.
+	*
+	* `user-select: none` alone is not enough on WebKit: it starts the selection
+	* gesture from a mousedown on a `user-select: none` element unless that
+	* element is also natively draggable, then extends it into whatever the
+	* pointer crosses. Cancelling `selectstart` refuses that first extension,
+	* which ends the gesture for the rest of the drag.
+	*
+	* An existing selection is left alone: a mousedown on a `user-select: none`
+	* element does not clear one natively, and a pointer drag should not either.
+	*/
+	function disableTextSelection(rootNode = document) {
+		const doc = rootNode instanceof Document ? rootNode : rootNode.ownerDocument;
+		const root = doc === null || doc === void 0 ? void 0 : doc.documentElement;
+		if (!doc || !root) return { release: () => void 0 };
+		const properties = ["user-select", "-webkit-user-select"];
+		const previous = properties.map((name) => [name, root.style.getPropertyValue(name)]);
+		for (const name of properties) root.style.setProperty(name, "none");
+		const onSelectStart = (event) => event.preventDefault();
+		doc.addEventListener("selectstart", onSelectStart);
+		return { release: () => {
+			doc.removeEventListener("selectstart", onSelectStart);
+			for (const [name, value] of previous) if (value) root.style.setProperty(name, value);
+			else root.style.removeProperty(name);
+		} };
+	}
 	function getDockviewTheme(element) {
 		function toClassList(element) {
 			const list = [];
@@ -520,6 +613,11 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		while (parent !== null) {
 			theme = toClassList(parent).find((cls) => cls.startsWith("dockview-theme-"));
 			if (typeof theme === "string") break;
+			if (parent.parentElement === null) {
+				const root = parent.getRootNode();
+				parent = isShadowRoot(root) ? root.host : null;
+				continue;
+			}
 			parent = parent.parentElement;
 		}
 		return theme;
@@ -631,6 +729,285 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		}
 		return "";
 	}
+	/** The focused element as seen from `node`'s own tree. Unlike
+	*  `document.activeElement`, which is the shadow host when focus is inside a
+	*  shadow root, this reaches into the root `node` lives in (and a popout's
+	*  own document), while a web component nested inside that tree still
+	*  resolves to its host there. */
+	function getActiveElement(node) {
+		var _root$activeElement;
+		const root = node.getRootNode();
+		const doc = root.nodeType === Node.DOCUMENT_NODE ? root : node.ownerDocument;
+		if (doc && typeof doc.hasFocus === "function" && !doc.hasFocus()) return null;
+		return (_root$activeElement = root.activeElement) !== null && _root$activeElement !== void 0 ? _root$activeElement : null;
+	}
+	/** Where to append a floating element (e.g. a drag ghost) for `node`: its
+	*  shadow root when it lives in one, so styles scoped there still apply,
+	*  otherwise the body of its own document (which may be a popout's). */
+	function getOverlayParent(node) {
+		var _node$ownerDocument2;
+		const root = node.getRootNode();
+		if (isShadowRoot(root)) return root;
+		return ((_node$ownerDocument2 = node.ownerDocument) !== null && _node$ownerDocument2 !== void 0 ? _node$ownerDocument2 : document).body;
+	}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/asyncToGenerator.js
+	function asyncGeneratorStep(n, t, e, r, o, a, c) {
+		try {
+			var i = n[a](c), u = i.value;
+		} catch (n) {
+			e(n);
+			return;
+		}
+		i.done ? t(u) : Promise.resolve(u).then(r, o);
+	}
+	function _asyncToGenerator(n) {
+		return function() {
+			var t = this, e = arguments;
+			return new Promise(function(r, o) {
+				var a = n.apply(t, e);
+				function _next(n) {
+					asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+				}
+				function _throw(n) {
+					asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+				}
+				_next(void 0);
+			});
+		};
+	}
+
+//#endregion
+//#region src/popoutWindow.ts
+/**
+	* Throwing form of {@link getPopoutUrlError}, for callers with no way to
+	* recover from a refused URL.
+	*/
+	function assertSameOriginPopoutUrl(url) {
+		const error = getPopoutUrlError(url);
+		if (error) throw error;
+	}
+	/**
+	* Schemes a popout must never open: each runs script in a context the browser
+	* still associates with the opener, or (for `file:`) has no origin to check.
+	*/
+	const UNSAFE_POPOUT_PROTOCOLS = /* @__PURE__ */ new Set([
+		"javascript:",
+		"data:",
+		"blob:",
+		"vbscript:",
+		"file:"
+	]);
+	/** How often an open popout window's `closed` flag is checked. */
+	const CLOSED_POLL_INTERVAL_MS = 250;
+	/**
+	* The reason `url` is unusable as a popout target, or `undefined` if it is
+	* allowed. Rejects anything that isn't same-origin with the page (scheme and
+	* host, so a packaged webview's own scheme such as `tauri://` qualifies), and
+	* the `javascript:`, `data:`, `blob:`, `vbscript:` and `file:` schemes that
+	* would otherwise execute in a context the browser still associates with the
+	* opener via `window.opener`.
+	*
+	* Callers that can recover from a refusal use this rather than catching, so it
+	* can be handled without a rejected promise. `page` is what the URL resolves
+	* against, and defaults to this page.
+	*/
+	function getPopoutUrlError(url, page = globalThis.location) {
+		let resolved;
+		try {
+			resolved = new URL(url, page.href);
+		} catch (_unused) {
+			return /* @__PURE__ */ new Error(`dockview: invalid popout URL: ${url}`);
+		}
+		if (UNSAFE_POPOUT_PROTOCOLS.has(resolved.protocol)) return /* @__PURE__ */ new Error(`dockview: popout URL must not use the "${resolved.protocol}" protocol, which would run in the opener's context; got: ${url}`);
+		if (!(resolved.protocol === page.protocol && resolved.host === page.host)) return /* @__PURE__ */ new Error(`dockview: popout URL must be same-origin with the page (${page.protocol}//${page.host}); got: ${url}`);
+	}
+	var PopoutWindow = class extends CompositeDisposable {
+		get window() {
+			var _this$_window$value, _this$_window;
+			return (_this$_window$value = (_this$_window = this._window) === null || _this$_window === void 0 ? void 0 : _this$_window.value) !== null && _this$_window$value !== void 0 ? _this$_window$value : null;
+		}
+		/** Set when {@link open} resolved `null`, saying which way it failed. */
+		get failure() {
+			return this._failure;
+		}
+		constructor(target, className, options) {
+			super();
+			this.target = target;
+			this.className = className;
+			this.options = options;
+			this._onWillClose = new Emitter();
+			this.onWillClose = this._onWillClose.event;
+			this._onDidClose = new Emitter();
+			this.onDidClose = this._onDidClose.event;
+			this._window = null;
+			this.addDisposables(this._onWillClose, this._onDidClose, { dispose: () => {
+				this.close();
+			} });
+		}
+		dimensions() {
+			if (!this._window) return null;
+			const left = this._window.value.screenX;
+			return {
+				top: this._window.value.screenY,
+				left,
+				width: this._window.value.innerWidth,
+				height: this._window.value.innerHeight
+			};
+		}
+		close() {
+			var _this$options$onWillC, _this$options;
+			const current = this._window;
+			if (!current) return;
+			this._window = null;
+			this._onWillClose.fire();
+			(_this$options$onWillC = (_this$options = this.options).onWillClose) === null || _this$options$onWillC === void 0 || _this$options$onWillC.call(_this$options, {
+				id: this.target,
+				window: current.value
+			});
+			current.disposable.dispose();
+			this._onDidClose.fire();
+		}
+		open() {
+			var _this = this;
+			return _asyncToGenerator(function* () {
+				var _this$options$onDidOp, _this$options2;
+				if (_this._window) throw new Error("instance of popout window is already open");
+				const url = `${_this.options.url}`;
+				assertSameOriginPopoutUrl(url);
+				const features = Object.entries({
+					top: _this.options.top,
+					left: _this.options.left,
+					width: _this.options.width,
+					height: _this.options.height
+				}).map(([key, value]) => `${key}=${value}`).join(",");
+				/**
+				* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/open
+				*/
+				const externalWindow = window.open(url, _this.target, features);
+				if (!externalWindow) {
+					_this._failure = { reason: "blocked" };
+					return null;
+				}
+				const disposable = new CompositeDisposable();
+				_this._window = {
+					value: externalWindow,
+					disposable
+				};
+				disposable.addDisposables(Disposable.from(() => {
+					externalWindow.close();
+				}), _this.watchForClose(externalWindow), addDisposableListener(globalThis.window, "beforeunload", () => {
+					/**
+					* before the main window closes we should close this popup too
+					* to be good citizens
+					*
+					* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+					*/
+					_this.close();
+				}));
+				const container = _this.createPopoutWindowContainer();
+				if (_this.className) container.classList.add(_this.className);
+				(_this$options$onDidOp = (_this$options2 = _this.options).onDidOpen) === null || _this$options$onDidOp === void 0 || _this$options$onDidOp.call(_this$options2, {
+					id: _this.target,
+					window: externalWindow
+				});
+				return new Promise((resolve) => {
+					/**
+					* A host can answer `window.open` with a window in its own
+					* JavaScript context, which throws on first touch and cannot be
+					* filled with panel DOM. Settle as a blocked popup does, so the
+					* caller's fallback returns the group to the grid.
+					*/
+					const abandon = (err) => {
+						_this._failure = {
+							reason: "unscriptable",
+							error: err instanceof Error ? err : new Error(String(err))
+						};
+						_this.close();
+						resolve(null);
+					};
+					try {
+						externalWindow.addEventListener("unload", () => {});
+					} catch (err) {
+						abandon(err);
+						return;
+					}
+					/**
+					* `load` is the only event that resolves this promise with a
+					* container, so a window that goes away first would leave the
+					* caller awaiting a promise that never settles - and
+					* `addPopoutGroup` holds its layout transaction open until it does.
+					* Settle with `null` on close, the same signal a blocked popup
+					* gives and one the caller already handles. `resolve` after the
+					* fact is a no-op, so a `load` that arrived first still wins.
+					*/
+					disposable.addDisposables(_this.onWillClose(() => {
+						var _this$_failure;
+						(_this$_failure = _this._failure) !== null && _this$_failure !== void 0 || (_this._failure = { reason: "closed" });
+						resolve(null);
+					}));
+					externalWindow.addEventListener("load", () => {
+						/**
+						* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
+						*/
+						try {
+							var _globalThis$document$, _this$options$styleRo, _this$options3;
+							const externalDocument = externalWindow.document;
+							externalDocument.title = document.title;
+							externalDocument.body.appendChild(container);
+							addStyles(externalDocument, [...Array.from(globalThis.document.styleSheets), ...(_globalThis$document$ = globalThis.document.adoptedStyleSheets) !== null && _globalThis$document$ !== void 0 ? _globalThis$document$ : []], { nonce: _this.options.nonce });
+							const sheets = [];
+							for (let root = (_this$options$styleRo = (_this$options3 = _this.options).styleRoot) === null || _this$options$styleRo === void 0 ? void 0 : _this$options$styleRo.call(_this$options3); isShadowRoot(root); root = root.host.getRootNode()) {
+								var _root$styleSheets, _root$adoptedStyleShe;
+								sheets.push(...Array.from((_root$styleSheets = root.styleSheets) !== null && _root$styleSheets !== void 0 ? _root$styleSheets : []), ...(_root$adoptedStyleShe = root.adoptedStyleSheets) !== null && _root$adoptedStyleShe !== void 0 ? _root$adoptedStyleShe : []);
+							}
+							if (sheets.length > 0) addStyles(externalDocument, sheets, { nonce: _this.options.nonce });
+							/**
+							* beforeunload must be registered after load for reasons I could not determine
+							* otherwise the beforeunload event will not fire when the window is closed
+							*/
+							addDisposableListener(externalWindow, "beforeunload", () => {
+								/**
+								* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+								*/
+								_this.close();
+							});
+							resolve(container);
+						} catch (err) {
+							abandon(err);
+						}
+					});
+				});
+			})();
+		}
+		/**
+		* Backstop for the `beforeunload` signal, which a window torn down without
+		* running its unload handlers never sends: a native shell destroying the
+		* webview, or a browser discarding the page. `closed` is readable on any
+		* handle, cross-origin included. Whichever signal arrives first wins.
+		*/
+		watchForClose(externalWindow) {
+			if (typeof externalWindow.closed !== "boolean") return Disposable.NONE;
+			const handle = setInterval(() => {
+				if (externalWindow.closed) this.close();
+			}, CLOSED_POLL_INTERVAL_MS);
+			return Disposable.from(() => {
+				clearInterval(handle);
+			});
+		}
+		createPopoutWindowContainer() {
+			const el = document.createElement("div");
+			el.classList.add("dv-popout-window");
+			el.id = "dv-popout-window";
+			el.style.position = "absolute";
+			el.style.width = "100%";
+			el.style.height = "100%";
+			el.style.top = "0px";
+			el.style.left = "0px";
+			return el;
+		}
+	};
 
 //#endregion
 //#region src/array.ts
@@ -850,6 +1227,15 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		get proportions() {
 			return this._proportions ? [...this._proportions] : void 0;
 		}
+		get proportionalLayout() {
+			return this._proportionalLayout;
+		}
+		set proportionalLayout(value) {
+			if (this._proportionalLayout === value) return;
+			this._proportionalLayout = value;
+			if (value) this.saveProportions();
+			else this._proportions = void 0;
+		}
 		get orientation() {
 			return this._orientation;
 		}
@@ -974,7 +1360,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			this._orientation = (_options$orientation = options.orientation) !== null && _options$orientation !== void 0 ? _options$orientation : "VERTICAL";
 			this.element = this.createContainer();
 			this.margin = (_options$margin = options.margin) !== null && _options$margin !== void 0 ? _options$margin : 0;
-			this.proportionalLayout = options.proportionalLayout === void 0 ? true : !!options.proportionalLayout;
+			this._proportionalLayout = options.proportionalLayout === void 0 ? true : !!options.proportionalLayout;
 			this.viewContainer = this.createViewContainer();
 			this.sashContainer = this.createSashContainer();
 			this.element.appendChild(this.sashContainer);
@@ -1698,10 +2084,18 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				if (child instanceof BranchNode) child.margin = value;
 			});
 		}
+		get proportionalLayout() {
+			return this.splitview.proportionalLayout;
+		}
+		set proportionalLayout(value) {
+			this.splitview.proportionalLayout = value;
+			this.children.forEach((child) => {
+				if (child instanceof BranchNode) child.proportionalLayout = value;
+			});
+		}
 		constructor(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, margin, childDescriptors) {
 			super();
 			this.orientation = orientation;
-			this.proportionalLayout = proportionalLayout;
 			this.styles = styles;
 			this._childrenDisposable = Disposable.NONE;
 			this.children = [];
@@ -2243,8 +2637,13 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			}
 			return findLeaf(this.root, reverse);
 		}
+		get proportionalLayout() {
+			return this.root.proportionalLayout;
+		}
+		set proportionalLayout(value) {
+			this.root.proportionalLayout = value;
+		}
 		constructor(proportionalLayout, styles, orientation, locked, margin) {
-			this.proportionalLayout = proportionalLayout;
 			this.styles = styles;
 			this._locked = false;
 			this._margin = 0;
@@ -2438,6 +2837,25 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				this.layout(width, height);
 			}));
 		}
+		/**
+		* Lay out from the element's current size.
+		*
+		* The ResizeObserver above only reports asynchronously, so between
+		* construction and its first callback the component believes it has no
+		* size - and anything built in that window (panels added right after
+		* `createDockview`, say) resolves its sizes against zero and collapses to
+		* minimums. Concrete components call this once they are fully constructed
+		* so that work sees the real size. The same guards as the observer apply:
+		* a detached or hidden element has no size worth propagating.
+		*/
+		layoutFromElement() {
+			if (this.disableResizing || !this._element.offsetParent) return;
+			if (!isInDocument(this._element)) return;
+			const width = Math.round(this._element.clientWidth);
+			const height = Math.round(this._element.clientHeight);
+			if (width === 0 || height === 0) return;
+			this.layout(width, height);
+		}
 	};
 
 //#endregion
@@ -2538,7 +2956,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			return this.gridview.isViewVisible(getGridLocation(panel.element));
 		}
 		updateOptions(options) {
-			if (typeof options.proportionalLayout === "boolean") {}
+			if ("proportionalLayout" in options) {
+				var _options$proportional;
+				this.gridview.proportionalLayout = (_options$proportional = options.proportionalLayout) !== null && _options$proportional !== void 0 ? _options$proportional : true;
+			}
 			if (options.orientation) this.gridview.orientation = options.orientation;
 			if ("styles" in options) {}
 			if ("disableAutoResizing" in options) {
@@ -3347,6 +3768,15 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		get onUnhandledDragOver() {
 			return this.component.onUnhandledDragOver;
 		}
+		/**
+		* The drag-and-drop backends currently live: `dndStrategy` resolved against
+		* this device, which `'auto'` reads from the primary input device. Only an
+		* HTML5 drag can leave the window it started in, so check `html5` before
+		* relying on a drag between a popout window and the main window.
+		*/
+		get dndCapabilities() {
+			return this.component.dndCapabilities;
+		}
 		get onDidPopoutGroupSizeChange() {
 			return this.component.onDidPopoutGroupSizeChange;
 		}
@@ -3369,9 +3799,27 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		get onDidRemovePopoutGroup() {
 			return this.component.onDidRemovePopoutGroup;
 		}
+		/**
+		* Fires when a popout window could not be used, carrying which way it
+		* failed: the URL was refused, the browser blocked the window, the host
+		* returned a window whose document the opener cannot reach, or it closed
+		* before loading. The group stays in (or returns to) the main grid.
+		*/
 		get onDidOpenPopoutWindowFail() {
 			return this.component.onDidOpenPopoutWindowFail;
 		}
+		/**
+		* Fires as dockview lets go of a popout window, while that window is still
+		* open, carrying its live `Window` handle. Covers every popout the component
+		* opened and every reason for closing one, disposal included;
+		* {@link onDidAddPopoutGroup} is the opening half.
+		*
+		* For hosts that own their windows: in a desktop webview the page's own
+		* `close()` can be a no-op, so the shell has to be told.
+		*/
+		get onWillClosePopoutWindow() {
+			return this.component.onWillClosePopoutWindow;
+		}
 		/** Enumerate the popout groups currently open in their own windows. */
 		getPopouts() {
 			return this.component.getPopouts();
@@ -4338,7 +4786,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		var _options$ownerDocumen, _options$x, _options$y;
 		addClasses(ghostElement, "dv-dragged");
 		ghostElement.style.top = "-9999px";
-		((_options$ownerDocumen = options === null || options === void 0 ? void 0 : options.ownerDocument) !== null && _options$ownerDocumen !== void 0 ? _options$ownerDocumen : document).body.appendChild(ghostElement);
+		ghostElement.style.position = "absolute";
+		((options === null || options === void 0 ? void 0 : options.owner) ? getOverlayParent(options.owner) : ((_options$ownerDocumen = options === null || options === void 0 ? void 0 : options.ownerDocument) !== null && _options$ownerDocumen !== void 0 ? _options$ownerDocumen : document).body).appendChild(ghostElement);
 		dataTransfer.setDragImage(ghostElement, (_options$x = options === null || options === void 0 ? void 0 : options.x) !== null && _options$x !== void 0 ? _options$x : 0, (_options$y = options === null || options === void 0 ? void 0 : options.y) !== null && _options$y !== void 0 ? _options$y : 0);
 		setTimeout(() => {
 			removeClasses(ghostElement, "dv-dragged");
@@ -4390,7 +4839,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			} };
 		}
 		beginDrag(args) {
-			var _source$ownerDocument, _source$ownerDocument2, _source$ownerDocument3;
+			var _source$ownerDocument, _source$ownerDocument2, _source$ownerDocument3, _source$ownerDocument4;
 			if (this._active) this.cancel();
 			const { pointerEvent, source } = args;
 			const dataDisposable = args.getData();
@@ -4406,13 +4855,14 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			this._dataDisposable = dataDisposable;
 			this._ghost = args.ghost;
 			this._iframeShield = disableIframePointEvents((_source$ownerDocument = source.ownerDocument) !== null && _source$ownerDocument !== void 0 ? _source$ownerDocument : document);
+			this._selectionShield = disableTextSelection((_source$ownerDocument2 = source.ownerDocument) !== null && _source$ownerDocument2 !== void 0 ? _source$ownerDocument2 : document);
 			const startEvent = {
 				clientX: pointerEvent.clientX,
 				clientY: pointerEvent.clientY,
 				pointerEvent
 			};
 			this._onDragStart.fire(startEvent);
-			const targetWindow = (_source$ownerDocument2 = (_source$ownerDocument3 = source.ownerDocument) === null || _source$ownerDocument3 === void 0 ? void 0 : _source$ownerDocument3.defaultView) !== null && _source$ownerDocument2 !== void 0 ? _source$ownerDocument2 : globalThis.window;
+			const targetWindow = (_source$ownerDocument3 = (_source$ownerDocument4 = source.ownerDocument) === null || _source$ownerDocument4 === void 0 ? void 0 : _source$ownerDocument4.defaultView) !== null && _source$ownerDocument3 !== void 0 ? _source$ownerDocument3 : globalThis.window;
 			this._moveListener = addDisposableListener(targetWindow, "pointermove", (e) => {
 				var _this$_active;
 				if (e.pointerId !== ((_this$_active = this._active) === null || _this$_active === void 0 ? void 0 : _this$_active.pointerId)) return;
@@ -4449,13 +4899,13 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			}
 		}
 		_findTargetUnder(x, y) {
-			var _this$_active$source$, _this$_active4;
-			const elements = ((_this$_active$source$ = (_this$_active4 = this._active) === null || _this$_active4 === void 0 ? void 0 : _this$_active4.source.ownerDocument) !== null && _this$_active$source$ !== void 0 ? _this$_active$source$ : document).elementsFromPoint(x, y);
+			const elements = (this._active ? getHitTestRoot(this._active.source) : document).elementsFromPoint(x, y);
 			for (const el of elements) {
 				let current = el;
 				while (current) {
+					var _target$isHitTestTran;
 					const target = this._targetByElement.get(current);
-					if (target) return target;
+					if (target && !((_target$isHitTestTran = target.isHitTestTransparent) === null || _target$isHitTestTran === void 0 ? void 0 : _target$isHitTestTran.call(target))) return target;
 					current = current.parentElement;
 				}
 			}
@@ -4499,7 +4949,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			this._onDragEnd.fire(dragEvent);
 		}
 		_teardown() {
-			var _this$_ghost2, _this$_iframeShield, _this$_moveListener, _this$_upListener, _this$_cancelListener;
+			var _this$_ghost2, _this$_iframeShield, _this$_selectionShiel, _this$_moveListener, _this$_upListener, _this$_cancelListener;
 			this._currentTarget = void 0;
 			this._active = void 0;
 			this._lastPointerEvent = void 0;
@@ -4509,6 +4959,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			this._ghost = void 0;
 			(_this$_iframeShield = this._iframeShield) === null || _this$_iframeShield === void 0 || _this$_iframeShield.release();
 			this._iframeShield = void 0;
+			(_this$_selectionShiel = this._selectionShield) === null || _this$_selectionShiel === void 0 || _this$_selectionShiel.release();
+			this._selectionShield = void 0;
 			(_this$_moveListener = this._moveListener) === null || _this$_moveListener === void 0 || _this$_moveListener.dispose();
 			(_this$_upListener = this._upListener) === null || _this$_upListener === void 0 || _this$_upListener.dispose();
 			(_this$_cancelListener = this._cancelListener) === null || _this$_cancelListener === void 0 || _this$_cancelListener.dispose();
@@ -4551,10 +5003,14 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				element: this.element,
 				handleDragOver: (e) => this._onDragOver(e),
 				handleDragLeave: () => this._onDragLeave(),
-				handleDrop: (e) => this._onDropEvent(e)
+				handleDrop: (e) => this._onDropEvent(e),
+				isHitTestTransparent: options.isHitTestTransparent
 			};
 			this.addDisposables(this._onDrop, this._onWillShowOverlay, PointerDragController.getInstance().registerTarget(handle));
 		}
+		clearOverlay() {
+			this._clearOwnOverlay();
+		}
 		setTargetZones(zones) {
 			this._acceptedTargetZonesSet = new Set(zones);
 		}
@@ -4773,9 +5229,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			return true;
 		}
 		_onPointerDown(event) {
-			var _ref, _this$options$thresho, _ref2, _this$element$ownerDo, _this$element$ownerDo2;
+			var _this$element$ownerDo, _ref, _this$options$thresho, _ref2, _this$element$ownerDo2, _this$element$ownerDo3;
 			if (!this._shouldHandle(event)) return;
 			this._cancelPending();
+			this._selectionShield = disableTextSelection((_this$element$ownerDo = this.element.ownerDocument) !== null && _this$element$ownerDo !== void 0 ? _this$element$ownerDo : document);
 			this._pendingPointerId = event.pointerId;
 			this._startX = event.clientX;
 			this._startY = event.clientY;
@@ -4791,7 +5248,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			const threshold = (_this$options$thresho = this.options.threshold) !== null && _this$options$thresho !== void 0 ? _this$options$thresho : DEFAULT_THRESHOLD;
 			const pressToleranceOpt = this.options.pressTolerance;
 			const pressTolerance = (_ref2 = typeof pressToleranceOpt === "function" ? pressToleranceOpt() : pressToleranceOpt) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_PRESS_TOLERANCE;
-			const targetWindow = (_this$element$ownerDo = (_this$element$ownerDo2 = this.element.ownerDocument) === null || _this$element$ownerDo2 === void 0 ? void 0 : _this$element$ownerDo2.defaultView) !== null && _this$element$ownerDo !== void 0 ? _this$element$ownerDo : globalThis.window;
+			const targetWindow = (_this$element$ownerDo2 = (_this$element$ownerDo3 = this.element.ownerDocument) === null || _this$element$ownerDo3 === void 0 ? void 0 : _this$element$ownerDo3.defaultView) !== null && _this$element$ownerDo2 !== void 0 ? _this$element$ownerDo2 : globalThis.window;
 			this._pendingMoveListener = addDisposableListener(targetWindow, "pointermove", (moveEvent) => {
 				if (moveEvent.pointerId !== this._pendingPointerId) return;
 				const dx = moveEvent.clientX - this._startX;
@@ -4817,7 +5274,9 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			this._cancelPending();
 		}
 		_cancelPending() {
-			var _this$_pendingMoveLis, _this$_pendingUpListe, _this$_pendingCancelL;
+			var _this$_selectionShiel, _this$_pendingMoveLis, _this$_pendingUpListe, _this$_pendingCancelL;
+			(_this$_selectionShiel = this._selectionShield) === null || _this$_selectionShiel === void 0 || _this$_selectionShiel.release();
+			this._selectionShield = void 0;
 			this._pendingPointerId = void 0;
 			if (this._armTimer !== void 0) {
 				clearTimeout(this._armTimer);
@@ -4862,29 +5321,51 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 	*/
 	var PointerGhost = class {
 		constructor(opts) {
-			var _opts$offsetX, _opts$offsetY, _opts$opacity, _opts$owner$ownerDocu, _opts$owner;
+			var _opts$offsetX, _opts$offsetY, _popover, _opts$opacity;
 			this._disposed = false;
 			this.element = opts.element;
 			this.offsetX = (_opts$offsetX = opts.offsetX) !== null && _opts$offsetX !== void 0 ? _opts$offsetX : 0;
 			this.offsetY = (_opts$offsetY = opts.offsetY) !== null && _opts$offsetY !== void 0 ? _opts$offsetY : 0;
-			this.element.style.position = "fixed";
-			this.element.style.left = "0px";
-			this.element.style.top = "0px";
-			this.element.style.pointerEvents = "none";
-			this.element.style.zIndex = "99999";
-			this.element.style.opacity = String((_opts$opacity = opts.opacity) !== null && _opts$opacity !== void 0 ? _opts$opacity : .8);
-			this.element.style.willChange = "transform";
-			this.element.style.transform = `translate3d(${opts.initialX - this.offsetX}px, ${opts.initialY - this.offsetY}px, 0)`;
-			((_opts$owner$ownerDocu = (_opts$owner = opts.owner) === null || _opts$owner === void 0 ? void 0 : _opts$owner.ownerDocument) !== null && _opts$owner$ownerDocu !== void 0 ? _opts$owner$ownerDocu : document).body.appendChild(this.element);
+			const parent = opts.owner ? getOverlayParent(opts.owner) : document.body;
+			let popover;
+			if (isShadowRoot(parent) && typeof this.element.showPopover === "function") {
+				popover = this.element.ownerDocument.createElement("div");
+				popover.popover = "manual";
+				Object.assign(popover.style, {
+					inset: "auto",
+					margin: "0",
+					padding: "0",
+					border: "0",
+					background: "transparent",
+					color: "inherit",
+					overflow: "visible"
+				});
+				popover.appendChild(this.element);
+				this.element.style.pointerEvents = "none";
+				this.element.style.transform = "none";
+			}
+			this.container = (_popover = popover) !== null && _popover !== void 0 ? _popover : this.element;
+			const style = this.container.style;
+			style.position = "fixed";
+			style.left = "0px";
+			style.top = "0px";
+			style.pointerEvents = "none";
+			style.zIndex = "99999";
+			style.opacity = String((_opts$opacity = opts.opacity) !== null && _opts$opacity !== void 0 ? _opts$opacity : .8);
+			style.willChange = "transform";
+			style.transform = `translate3d(${opts.initialX - this.offsetX}px, ${opts.initialY - this.offsetY}px, 0)`;
+			parent.appendChild(this.container);
+			popover === null || popover === void 0 || popover.showPopover();
 		}
 		update(clientX, clientY) {
 			if (this._disposed) return;
-			this.element.style.transform = `translate3d(${clientX - this.offsetX}px, ${clientY - this.offsetY}px, 0)`;
+			this.container.style.transform = `translate3d(${clientX - this.offsetX}px, ${clientY - this.offsetY}px, 0)`;
 		}
 		dispose() {
 			if (this._disposed) return;
 			this._disposed = true;
 			this.element.remove();
+			if (this.container !== this.element) this.container.remove();
 		}
 	};
 
@@ -4921,7 +5402,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					addGhostImage(event.dataTransfer, ghost.element, {
 						x: (_ghost$offsetX = ghost.offsetX) !== null && _ghost$offsetX !== void 0 ? _ghost$offsetX : 0,
 						y: (_ghost$offsetY = ghost.offsetY) !== null && _ghost$offsetY !== void 0 ? _ghost$offsetY : 0,
-						ownerDocument: (_this$el$ownerDocumen2 = this.el.ownerDocument) !== null && _this$el$ownerDocumen2 !== void 0 ? _this$el$ownerDocumen2 : void 0
+						ownerDocument: (_this$el$ownerDocumen2 = this.el.ownerDocument) !== null && _this$el$ownerDocumen2 !== void 0 ? _this$el$ownerDocumen2 : void 0,
+						owner: this.el
 					});
 					if (ghost.dispose) {
 						const disposeGhost = ghost.dispose;
@@ -5757,8 +6239,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			let guard;
 			const timeout = setTimeout(() => guard === null || guard === void 0 ? void 0 : guard.dispose(), 500);
 			guard = addDisposableListener(targetWindow, "click", (event) => {
-				const target = event.target;
-				if (target && this.element.contains(target)) {
+				if (isEventWithin(event, [this.element])) {
 					event.preventDefault();
 					event.stopPropagation();
 				}
@@ -5874,6 +6355,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				if (this.accessor.id === (data === null || data === void 0 ? void 0 : data.viewId)) {
 					var _this$accessor$option;
 					if (((_this$accessor$option = this.accessor.options.theme) === null || _this$accessor$option === void 0 ? void 0 : _this$accessor$option.tabAnimation) === "smooth") return false;
+					if (data.tabGroupId && data.groupId === this.group.id && this.group.model.getTabGroupForPanel(this.panel.id)) return false;
 					return true;
 				}
 				return this.group.model.canDisplayOverlay(event, position, "tab");
@@ -6486,6 +6968,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 	const PROPERTY_KEYS_DOCKVIEW = (() => {
 		return Object.keys({
 			disableAutoResizing: void 0,
+			proportionalLayout: void 0,
 			hideBorders: void 0,
 			singleTabMode: void 0,
 			disableFloatingGroups: void 0,
@@ -7321,12 +7804,34 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		}
 		updateDirection() {
 			const isVertical = this._ctx.getDirection() === "vertical";
-			for (const [, entry] of this._chipRenderers) entry.dropTarget.setTargetZones(isVertical ? ["top"] : ["left"]);
+			for (const [, entry] of this._chipRenderers) {
+				const zones = isVertical ? ["top"] : ["left"];
+				entry.dropTarget.setTargetZones(zones);
+				entry.pointerDropTarget.setTargetZones(zones);
+			}
 		}
-		snapshotChipWidths() {
-			const widths = /* @__PURE__ */ new Map();
-			for (const [groupId, entry] of this._chipRenderers) widths.set(groupId, entry.chip.element.getBoundingClientRect().width);
-			return widths;
+		/**
+		* Drop any overlay the chips are showing. A group move is committed by a
+		* capturing listener on the tabs list that stops the event, so the chip
+		* target under the cursor never sees the drop that would clear its own.
+		*/
+		clearChipDropOverlays() {
+			for (const [, entry] of this._chipRenderers) {
+				var _entry$dropTarget, _entry$pointerDropTar;
+				(_entry$dropTarget = entry.dropTarget) === null || _entry$dropTarget === void 0 || _entry$dropTarget.clearOverlay();
+				(_entry$pointerDropTar = entry.pointerDropTarget) === null || _entry$pointerDropTar === void 0 || _entry$pointerDropTar.clearOverlay();
+			}
+		}
+		/** Each chip's extent along the strip's main axis: width for a horizontal
+		*  header, height for a vertical one. */
+		snapshotChipSizes() {
+			const isVertical = this._ctx.getDirection() === "vertical";
+			const sizes = /* @__PURE__ */ new Map();
+			for (const [groupId, entry] of this._chipRenderers) {
+				const rect = entry.chip.element.getBoundingClientRect();
+				sizes.set(groupId, isVertical ? rect.height : rect.width);
+			}
+			return sizes;
 		}
 		positionUnderlines() {
 			var _this$_indicator2;
@@ -7570,9 +8075,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			};
 			if (chip instanceof TabGroupChip) disposables.push(chip.onContextMenu(onContextMenu));
 			else disposables.push(new LongPressDetector(chip.element, { onLongPress: onContextMenu }), addDisposableListener(chip.element, "contextmenu", onContextMenu));
-			const isVertical = this._ctx.getDirection() === "vertical";
-			const dropTarget = new Droptarget(chip.element, {
-				acceptedTargetZones: isVertical ? ["top"] : ["left"],
+			const dropTargetOptions = {
+				acceptedTargetZones: this._ctx.getDirection() === "vertical" ? ["top"] : ["left"],
 				overlayModel: { activationSize: {
 					value: 100,
 					type: "percentage"
@@ -7583,15 +8087,18 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					const data = getPanelData();
 					if (this._ctx.accessor.id === (data === null || data === void 0 ? void 0 : data.viewId)) {
 						var _this$_ctx$accessor$o3;
-						if (((_this$_ctx$accessor$o3 = this._ctx.accessor.options.theme) === null || _this$_ctx$accessor$o3 === void 0 ? void 0 : _this$_ctx$accessor$o3.tabAnimation) === "smooth") return false;
+						if (((_this$_ctx$accessor$o3 = this._ctx.accessor.options.theme) === null || _this$_ctx$accessor$o3 === void 0 ? void 0 : _this$_ctx$accessor$o3.tabAnimation) === "smooth" && !data.tabGroupId) return false;
 						return true;
 					}
 					return this._ctx.group.model.canDisplayOverlay(event, position, "tab");
 				}
-			});
-			disposables.push(dropTarget, dropTarget.onDrop((event) => {
+			};
+			const dropTarget = html5Backend.createDropTarget(chip.element, dropTargetOptions);
+			const pointerDropTarget = pointerBackend.createDropTarget(chip.element, dropTargetOptions);
+			const onDrop = (event) => {
 				this._callbacks.onChipDrop(tabGroup, event);
-			}));
+			};
+			disposables.push(dropTarget, dropTarget.onDrop(onDrop), pointerDropTarget, pointerDropTarget.onDrop(onDrop));
 			const disposable = new CompositeDisposable(...disposables);
 			this._chipRenderers.set(tabGroup.id, {
 				chip,
@@ -7599,7 +8106,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				pointerDragSource: dragSources.pointerDragSource,
 				dragSourcesDisposable: dragSources.disposable,
 				disposable,
-				dropTarget
+				dropTarget,
+				pointerDropTarget
 			});
 			if (tabGroup.collapsed) this._skipNextCollapseAnimation = true;
 		}
@@ -7715,6 +8223,22 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 //#endregion
 //#region src/dockview/components/titlebar/tabReorderController.ts
 /**
+	* Main-axis extent of a rect. Tabs flow along x in a horizontal header
+	* (top/bottom) and along y in a vertical one (the left/right edge groups),
+	* so the reorder math reads every size through this.
+	*/
+	function mainAxisSize(rect, direction) {
+		return direction === "vertical" ? rect.height : rect.width;
+	}
+	/** Leading edge of a rect along the main axis. */
+	function mainAxisStart(rect, direction) {
+		return direction === "vertical" ? rect.top : rect.left;
+	}
+	/** A cursor position projected onto the main axis. */
+	function mainAxisCursor(event, direction) {
+		return direction === "vertical" ? event.clientY : event.clientX;
+	}
+	/**
 	* Tab drag-reorder + FLIP animation subsystem extracted from `Tabs`. The DOM
 	* event wiring remains in `Tabs` and delegates the reorder/animation logic to
 	* this controller. All access back into `Tabs` goes through
@@ -7809,14 +8333,30 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			for (const tab of this._tabs) positions.set(tab.value.panel.id, tab.value.element.getBoundingClientRect());
 			return positions;
 		}
-		getAverageTabWidth() {
+		/** Main-axis extent of a rect for this header's orientation. */
+		_mainAxisSize(rect) {
+			return mainAxisSize(rect, this._direction);
+		}
+		/** Main-axis leading edge of a rect for this header's orientation. */
+		_mainAxisStart(rect) {
+			return mainAxisStart(rect, this._direction);
+		}
+		/** The cursor coordinate along the main axis. */
+		_mainAxisCoord(clientX, clientY) {
+			return mainAxisCursor({
+				clientX,
+				clientY
+			}, this._direction);
+		}
+		/** The margin that opens the insertion gap. It must run along the main
+		*  axis, so a vertical header pushes tabs down rather than sideways. */
+		get _gapMarginProperty() {
+			return this._direction === "vertical" ? "margin-top" : "margin-left";
+		}
+		getAverageTabSize() {
 			if (this._tabs.length === 0) return 0;
-			const isVertical = this._direction === "vertical";
 			let total = 0;
-			for (const tab of this._tabs) {
-				const rect = tab.value.element.getBoundingClientRect();
-				total += isVertical ? rect.height : rect.width;
-			}
+			for (const tab of this._tabs) total += this._mainAxisSize(tab.value.element.getBoundingClientRect());
 			return total / this._tabs.length;
 		}
 		/**
@@ -7826,8 +8366,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		* `processDragOver` / `processDragLeave` helpers.
 		*/
 		handlePointerDragMove(clientX, clientY) {
-			var _this$_tabsList$owner;
-			const elAtPoint = ((_this$_tabsList$owner = this._tabsList.ownerDocument) !== null && _this$_tabsList$owner !== void 0 ? _this$_tabsList$owner : document).elementFromPoint(clientX, clientY);
+			const elAtPoint = getHitTestRoot(this._tabsList).elementFromPoint(clientX, clientY);
 			if (!(!!elAtPoint && (this._tabsList.contains(elAtPoint) || !!this._extendedDropZone && this._extendedDropZone.contains(elAtPoint)))) {
 				if (this._pointerInsideTabsList) {
 					this._pointerInsideTabsList = false;
@@ -7844,13 +8383,19 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		* dragover bridge may have installed.
 		*/
 		handlePointerDragEnd(e) {
-			if (e && this._animState && this._animState.sourceIndex !== -1 && !this._animState.sourceTabGroupId && this._animState.currentInsertionIndex !== null && this.isPointInsideTabsList(e.clientX, e.clientY)) this.commitPointerReorder(e.pointerEvent);
+			if (e && this._animState && this._animState.sourceIndex !== -1 && this._animState.currentInsertionIndex !== null && this.isPointInsideTabsList(e.clientX, e.clientY)) {
+				const sourceTabGroupId = this._animState.sourceTabGroupId;
+				if (sourceTabGroupId) {
+					const insertionIndex = this._animState.currentInsertionIndex;
+					this._animState = null;
+					this.commitGroupMove(sourceTabGroupId, insertionIndex);
+				} else this.commitPointerReorder(e.pointerEvent);
+			}
 			this._pointerInsideTabsList = false;
 			this.resetDragAnimation();
 		}
 		isPointInsideTabsList(clientX, clientY) {
-			var _this$_tabsList$owner2;
-			const el = ((_this$_tabsList$owner2 = this._tabsList.ownerDocument) !== null && _this$_tabsList$owner2 !== void 0 ? _this$_tabsList$owner2 : document).elementFromPoint(clientX, clientY);
+			const el = getHitTestRoot(this._tabsList).elementFromPoint(clientX, clientY);
 			return !!el && this._tabsList.contains(el);
 		}
 		/** Commit a smooth-mode intra-group reorder from the current insertion
@@ -7914,46 +8459,46 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			const data = getPanelData();
 			if (((_this$accessor$option = this.accessor.options.theme) === null || _this$accessor$option === void 0 ? void 0 : _this$accessor$option.tabAnimation) === "default" && !(data === null || data === void 0 ? void 0 : data.tabGroupId)) return false;
 			if (!data || !(data.panelId || data.tabGroupId) || data.groupId === this.group.id) return false;
-			const avgWidth = this.getAverageTabWidth();
-			this._animState = data.tabGroupId ? this._makeGroupDragAnimState(data, avgWidth) : this._makeTabDragAnimState(data, avgWidth);
+			const avgSize = this.getAverageTabSize();
+			this._animState = data.tabGroupId ? this._makeGroupDragAnimState(data, avgSize) : this._makeTabDragAnimState(data, avgSize);
 			return true;
 		}
 		/** Anim state for an external group-chip drag (gap sized to the group). */
-		_makeGroupDragAnimState(data, avgWidth) {
+		_makeGroupDragAnimState(data, avgSize) {
 			var _sourceTg$panelIds$le;
 			const sourceGroup = this.accessor.getPanel(data.groupId);
 			const sourceTg = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.getTabGroups().find((tg) => tg.id === data.tabGroupId);
-			const groupGapWidth = avgWidth * ((_sourceTg$panelIds$le = sourceTg === null || sourceTg === void 0 ? void 0 : sourceTg.panelIds.length) !== null && _sourceTg$panelIds$le !== void 0 ? _sourceTg$panelIds$le : 1) + avgWidth;
+			const groupGapSize = avgSize * ((_sourceTg$panelIds$le = sourceTg === null || sourceTg === void 0 ? void 0 : sourceTg.panelIds.length) !== null && _sourceTg$panelIds$le !== void 0 ? _sourceTg$panelIds$le : 1) + avgSize;
 			return {
 				sourceTabId: "",
 				sourceIndex: -1,
 				tabPositions: this.snapshotTabPositions(),
-				chipPositions: this._tabGroupManager.snapshotChipWidths(),
+				chipSizes: this._tabGroupManager.snapshotChipSizes(),
 				currentInsertionIndex: null,
 				targetTabGroupId: null,
 				sourceTabGroupId: data.tabGroupId,
 				sourceGroupPanelIds: sourceTg ? new Set(sourceTg.panelIds) : /* @__PURE__ */ new Set(),
-				sourceChipWidth: avgWidth,
-				cursorOffsetFromDragLeft: groupGapWidth / 2,
-				sourceGapWidth: groupGapWidth,
-				containerLeft: this._tabsList.getBoundingClientRect().left
+				sourceChipSize: avgSize,
+				cursorOffsetFromDragStart: groupGapSize / 2,
+				sourceGapSize: groupGapSize,
+				containerStart: this._mainAxisStart(this._tabsList.getBoundingClientRect())
 			};
 		}
 		/** Anim state for an external single-tab drag. */
-		_makeTabDragAnimState(data, avgWidth) {
+		_makeTabDragAnimState(data, avgSize) {
 			return {
 				sourceTabId: data.panelId,
 				sourceIndex: -1,
 				tabPositions: this.snapshotTabPositions(),
-				chipPositions: this._tabGroupManager.snapshotChipWidths(),
+				chipSizes: this._tabGroupManager.snapshotChipSizes(),
 				currentInsertionIndex: null,
 				targetTabGroupId: null,
 				sourceTabGroupId: null,
 				sourceGroupPanelIds: null,
-				sourceChipWidth: 0,
-				cursorOffsetFromDragLeft: avgWidth / 2,
-				sourceGapWidth: avgWidth,
-				containerLeft: this._tabsList.getBoundingClientRect().left
+				sourceChipSize: 0,
+				cursorOffsetFromDragStart: avgSize / 2,
+				sourceGapSize: avgSize,
+				containerStart: this._mainAxisStart(this._tabsList.getBoundingClientRect())
 			};
 		}
 		/**
@@ -7996,19 +8541,19 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			container === null || container === void 0 || (_container$model = container.model) === null || _container$model === void 0 || _container$model.clear();
 		}
 		handleDragOver(event) {
-			var _this$accessor$option2;
+			var _event$clientY2, _this$accessor$option2;
 			if (!this._animState) return;
 			if (this._wrapMode && !this._animState.sourceTabGroupId) {
 				var _event$clientY;
 				this.handleWrappedDragOver(event.clientX, (_event$clientY = event.clientY) !== null && _event$clientY !== void 0 ? _event$clientY : 0);
 				return;
 			}
-			const mouseX = event.clientX;
+			const mousePos = this._mainAxisCoord(event.clientX, (_event$clientY2 = event.clientY) !== null && _event$clientY2 !== void 0 ? _event$clientY2 : 0);
 			const firstPanelToGroup = this._buildFirstPanelToGroupMap();
-			let insertionIndex = this._computeDragOverInsertionIndex(mouseX, firstPanelToGroup);
+			let insertionIndex = this._computeDragOverInsertionIndex(mousePos, firstPanelToGroup);
 			let targetTabGroupId = null;
 			if (insertionIndex !== null && this._tabGroupManager.chipRenderers.size > 0) {
-				const resolved = this._resolveInsertionAgainstTabGroups(mouseX, insertionIndex, firstPanelToGroup);
+				const resolved = this._resolveInsertionAgainstTabGroups(mousePos, insertionIndex, firstPanelToGroup);
 				insertionIndex = resolved.insertionIndex;
 				targetTabGroupId = resolved.targetTabGroupId;
 			}
@@ -8032,14 +8577,15 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			return firstPanelToGroup;
 		}
 		/**
-		* Walk the tabs left-to-right by their original widths and return the
-		* insertion slot for the drag image's left edge (null if no slot fits).
+		* Walk the tabs in flow order by their original main-axis sizes and return
+		* the insertion slot for the drag image's leading edge (null if no slot
+		* fits).
 		*/
-		_computeDragOverInsertionIndex(mouseX, firstPanelToGroup) {
+		_computeDragOverInsertionIndex(mousePos, firstPanelToGroup) {
 			const animState = this._animState;
 			const sourceGroupPanelIds = animState.sourceGroupPanelIds;
-			const availableSpace = mouseX - animState.cursorOffsetFromDragLeft - animState.containerLeft;
-			let accWidth = 0;
+			const availableSpace = mousePos - animState.cursorOffsetFromDragStart - animState.containerStart;
+			let accSize = 0;
 			let insertionIndex = null;
 			for (let i = 0; i < this._tabs.length; i++) {
 				const tab = this._tabs[i].value;
@@ -8047,19 +8593,19 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				if (sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(tab.panel.id)) continue;
 				const groupId = firstPanelToGroup.get(tab.panel.id);
 				if (groupId) {
-					var _animState$chipPositi;
-					const chipWidth = (_animState$chipPositi = animState.chipPositions.get(groupId)) !== null && _animState$chipPositi !== void 0 ? _animState$chipPositi : 0;
-					if (accWidth + chipWidth > availableSpace) {
+					var _animState$chipSizes$;
+					const chipSize = (_animState$chipSizes$ = animState.chipSizes.get(groupId)) !== null && _animState$chipSizes$ !== void 0 ? _animState$chipSizes$ : 0;
+					if (accSize + chipSize > availableSpace) {
 						var _insertionIndex;
 						(_insertionIndex = insertionIndex) !== null && _insertionIndex !== void 0 || (insertionIndex = i);
 						break;
 					}
-					accWidth += chipWidth;
+					accSize += chipSize;
 				}
 				const origRect = animState.tabPositions.get(tab.panel.id);
-				const tabWidth = origRect ? origRect.width : tab.element.getBoundingClientRect().width;
-				if (accWidth + tabWidth / 2 <= availableSpace) {
-					accWidth += tabWidth;
+				const tabSize = this._mainAxisSize(origRect !== null && origRect !== void 0 ? origRect : tab.element.getBoundingClientRect());
+				if (accSize + tabSize / 2 <= availableSpace) {
+					accSize += tabSize;
 					insertionIndex = i + 1;
 				} else {
 					var _insertionIndex2;
@@ -8070,11 +8616,12 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			return insertionIndex;
 		}
 		/**
-		* Rebuild the accumulated original width up to `insertionIndex`, walking the
-		* tabs exactly the way the accumulation loop does, so callers know the
-		* original right edge of the chip (if any) that precedes the insertion slot.
+		* Rebuild the accumulated original main-axis size up to `insertionIndex`,
+		* walking the tabs exactly the way the accumulation loop does, so callers
+		* know the original trailing edge of the chip (if any) that precedes the
+		* insertion slot.
 		*/
-		_accumulatedWidthUpTo(insertionIndex, firstPanelToGroup) {
+		_accumulatedSizeUpTo(insertionIndex, firstPanelToGroup) {
 			const animState = this._animState;
 			const sourceGroupPanelIds = animState.sourceGroupPanelIds;
 			let accUpTo = 0;
@@ -8085,11 +8632,11 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				if (i >= insertionIndex) break;
 				const gid = firstPanelToGroup.get(tab.panel.id);
 				if (gid) {
-					var _animState$chipPositi2;
-					accUpTo += (_animState$chipPositi2 = animState.chipPositions.get(gid)) !== null && _animState$chipPositi2 !== void 0 ? _animState$chipPositi2 : 0;
+					var _animState$chipSizes$2;
+					accUpTo += (_animState$chipSizes$2 = animState.chipSizes.get(gid)) !== null && _animState$chipSizes$2 !== void 0 ? _animState$chipSizes$2 : 0;
 				}
 				const origRect = animState.tabPositions.get(tab.panel.id);
-				accUpTo += origRect ? origRect.width : tab.element.getBoundingClientRect().width;
+				accUpTo += this._mainAxisSize(origRect !== null && origRect !== void 0 ? origRect : tab.element.getBoundingClientRect());
 			}
 			return accUpTo;
 		}
@@ -8097,11 +8644,11 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		* Given a raw insertion index, snap it out of / into any tab group it falls
 		* within and resolve the target group (if the drop should merge into one).
 		*/
-		_resolveInsertionAgainstTabGroups(mouseX, insertionIndex, firstPanelToGroup) {
+		_resolveInsertionAgainstTabGroups(mousePos, insertionIndex, firstPanelToGroup) {
 			const isGroupDrag = !!this._animState.sourceTabGroupId;
-			const accUpTo = this._accumulatedWidthUpTo(insertionIndex, firstPanelToGroup);
+			const accUpTo = this._accumulatedSizeUpTo(insertionIndex, firstPanelToGroup);
 			for (const tg of this.group.model.getTabGroups()) {
-				const resolved = this._evaluateTabGroupForInsertion(tg, mouseX, insertionIndex, accUpTo, isGroupDrag);
+				const resolved = this._evaluateTabGroupForInsertion(tg, mousePos, insertionIndex, accUpTo, isGroupDrag);
 				if (resolved) return resolved;
 			}
 			return {
@@ -8115,7 +8662,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		* group governs the slot (the caller stops iterating), or `null` when the
 		* group is irrelevant and the caller should keep looking.
 		*/
-		_evaluateTabGroupForInsertion(tg, mouseX, insertionIndex, accUpTo, isGroupDrag) {
+		_evaluateTabGroupForInsertion(tg, mousePos, insertionIndex, accUpTo, isGroupDrag) {
 			const range = this._resolveGroupRange(tg);
 			if (!range) return null;
 			const { firstIdx, lastIdx } = range;
@@ -8123,7 +8670,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			const isJustBeforeGroup = !isInsideRange && insertionIndex === firstIdx - 1;
 			if (!isInsideRange && !isJustBeforeGroup) return null;
 			if (isGroupDrag) return this._resolveGroupDragTarget(insertionIndex, firstIdx, lastIdx, isInsideRange);
-			return this._resolveTabDragTarget(tg, mouseX, insertionIndex, accUpTo, firstIdx, isJustBeforeGroup);
+			return this._resolveTabDragTarget(tg, mousePos, insertionIndex, accUpTo, firstIdx, isJustBeforeGroup);
 		}
 		/**
 		* The index range this group occupies in the live tab list, excluding the
@@ -8158,13 +8705,13 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		}
 		/** Insertion target for a single-tab drag against a group: decide whether
 		*  the drop merges into the group based on the cursor vs the chip edge. */
-		_resolveTabDragTarget(tg, mouseX, insertionIndex, accUpTo, firstIdx, isJustBeforeGroup) {
-			var _animState$chipPositi3;
+		_resolveTabDragTarget(tg, mousePos, insertionIndex, accUpTo, firstIdx, isJustBeforeGroup) {
+			var _animState$chipSizes$3;
 			const animState = this._animState;
-			const chipWidth = (_animState$chipPositi3 = animState.chipPositions.get(tg.id)) !== null && _animState$chipPositi3 !== void 0 ? _animState$chipPositi3 : 0;
+			const chipSize = (_animState$chipSizes$3 = animState.chipSizes.get(tg.id)) !== null && _animState$chipSizes$3 !== void 0 ? _animState$chipSizes$3 : 0;
 			if (isJustBeforeGroup) {
 				if (!this._onlySourceBetween(insertionIndex, firstIdx)) return null;
-				if (mouseX >= (tg.collapsed ? animState.containerLeft + accUpTo + chipWidth / 2 : animState.containerLeft + accUpTo + chipWidth)) return {
+				if (mousePos >= (tg.collapsed ? animState.containerStart + accUpTo + chipSize / 2 : animState.containerStart + accUpTo + chipSize)) return {
 					insertionIndex: firstIdx,
 					targetTabGroupId: tg.id
 				};
@@ -8173,10 +8720,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					targetTabGroupId: null
 				};
 			}
-			const chipOriginalRight = animState.containerLeft + accUpTo + chipWidth;
+			const chipOriginalEnd = animState.containerStart + accUpTo + chipSize;
 			if (insertionIndex === firstIdx) return {
 				insertionIndex,
-				targetTabGroupId: mouseX >= chipOriginalRight ? tg.id : null
+				targetTabGroupId: mousePos >= chipOriginalEnd ? tg.id : null
 			};
 			return {
 				insertionIndex,
@@ -8339,17 +8886,17 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			}
 			if (this._pendingCollapse) return;
 			const insertionIndex = this._animState.currentInsertionIndex;
-			const gapWidth = this._computeGapWidth();
+			const gapSize = this._computeGapSize();
 			const chipToShift = this._computeChipToShift(insertionIndex);
-			this._applyGapMargins(insertionIndex, gapWidth, chipToShift, skipTransition);
+			this._applyGapMargins(insertionIndex, gapSize, chipToShift, skipTransition);
 		}
-		/** Gap width for the current drag: the whole group's span for a group
-		*  drag, otherwise the source tab's own width. */
-		_computeGapWidth() {
+		/** Gap size for the current drag: the whole group's span for a group
+		*  drag, otherwise the source tab's own main-axis size. */
+		_computeGapSize() {
 			const animState = this._animState;
-			if (animState.sourceTabGroupId && animState.sourceGroupPanelIds) return animState.sourceGapWidth;
+			if (animState.sourceTabGroupId && animState.sourceGroupPanelIds) return animState.sourceGapSize;
 			const sourceRect = animState.tabPositions.get(animState.sourceTabId);
-			return sourceRect ? sourceRect.width : this.getAverageTabWidth();
+			return sourceRect ? this._mainAxisSize(sourceRect) : this.getAverageTabSize();
 		}
 		/**
 		* When the insertion lands at or before a group's first tab, the chip is
@@ -8393,7 +8940,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		}
 		/** Reset non-source chip margins, then apply the gap margin to the chip or
 		*  the first tab at/after the insertion index. */
-		_applyGapMargins(insertionIndex, gapWidth, chipToShift, skipTransition) {
+		_applyGapMargins(insertionIndex, gapSize, chipToShift, skipTransition) {
 			const animState = this._animState;
 			const sourceGroupPanelIds = animState.sourceGroupPanelIds;
 			let gapApplied = false;
@@ -8402,7 +8949,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				this._clearMargin(entry.chip.element, skipTransition);
 			}
 			if (chipToShift) {
-				this._setMargin(chipToShift, `${gapWidth}px`, skipTransition);
+				this._setMargin(chipToShift, `${gapSize}px`, skipTransition);
 				gapApplied = true;
 			}
 			for (let i = 0; i < this._tabs.length; i++) {
@@ -8410,7 +8957,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				if (tab.panel.id === animState.sourceTabId) continue;
 				if (sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(tab.panel.id)) continue;
 				if (!gapApplied && i >= insertionIndex) {
-					this._setMargin(tab.element, `${gapWidth}px`, skipTransition);
+					this._setMargin(tab.element, `${gapSize}px`, skipTransition);
 					gapApplied = true;
 				} else this._clearMargin(tab.element, skipTransition);
 			}
@@ -8420,31 +8967,33 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		_shiftingClass(el) {
 			return el.classList.contains("dv-tab-group-chip") ? "dv-tab-group-chip--shifting" : "dv-tab--shifting";
 		}
-		/** Apply a margin-left value to an element, optionally bypassing CSS
+		/** Apply the main-axis gap margin to an element, optionally bypassing CSS
 		*  transitions for instant positioning. */
 		_setMargin(el, value, skipTransition) {
+			const property = this._gapMarginProperty;
 			if (skipTransition) {
 				el.style.transition = "none";
-				el.style.marginLeft = value;
+				el.style.setProperty(property, value);
 				el.getBoundingClientRect();
 				el.style.removeProperty("transition");
-			} else el.style.marginLeft = value;
+			} else el.style.setProperty(property, value);
 			toggleClass(el, this._shiftingClass(el), true);
 		}
 		/** Clear an element's gap margin, animating it back to zero unless
 		*  transitions are skipped. */
 		_clearMargin(el, skipTransition) {
 			const cls = this._shiftingClass(el);
+			const property = this._gapMarginProperty;
 			const prev = this._pendingMarginCleanups.get(el);
 			if (prev) prev();
-			if (skipTransition || !el.style.marginLeft) {
-				el.style.removeProperty("margin-left");
+			if (skipTransition || !el.style.getPropertyValue(property)) {
+				el.style.removeProperty(property);
 				toggleClass(el, cls, false);
 			} else {
-				el.style.marginLeft = "0px";
+				el.style.setProperty(property, "0px");
 				toggleClass(el, cls, true);
 				const onEnd = () => {
-					el.style.removeProperty("margin-left");
+					el.style.removeProperty(property);
 					toggleClass(el, cls, false);
 					el.removeEventListener("transitionend", onEnd);
 					clearTimeout(fallbackTimer);
@@ -8469,6 +9018,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			}
 			for (const [, entry] of this._tabGroupManager.chipRenderers) {
 				entry.chip.element.style.removeProperty("margin-left");
+				entry.chip.element.style.removeProperty("margin-top");
 				toggleClass(entry.chip.element, "dv-tab-group-chip--shifting", false);
 			}
 			this._tabGroupManager.positionUnderlines();
@@ -8480,6 +9030,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		commitGroupMove(sourceTabGroupId, insertionIndex) {
 			const data = getPanelData();
 			this._tabGroupManager.disposeChipDrag(sourceTabGroupId);
+			this._tabGroupManager.clearChipDropOverlays();
 			if (this.group.model.getTabGroups().some((tg) => tg.id === sourceTabGroupId)) {
 				var _this$accessor$option3;
 				if (((_this$accessor$option3 = this.accessor.options.theme) === null || _this$accessor$option3 === void 0 ? void 0 : _this$accessor$option3.tabAnimation) === "smooth") {
@@ -8837,7 +9388,16 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				}
 			});
 			this._reorder = new TabReorderController(this);
-			this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, this._pointerActivation, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._reorder, PointerDragController.getInstance().onDragEnd((e) => {
+			const tabsListPointerTarget = pointerBackend.createDropTarget(this._tabsList, {
+				acceptedTargetZones: ["center"],
+				canDisplayOverlay: () => false,
+				isHitTestTransparent: () => {
+					const data = getPanelData();
+					if ((data === null || data === void 0 ? void 0 : data.viewId) !== this.accessor.id || data.groupId !== this.group.id) return true;
+					return data.panelId === null && !data.tabGroupId;
+				}
+			});
+			this.addDisposables(tabsListPointerTarget, this._onOverflowTabsChange, this._observerDisposable, this._pointerActivation, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._reorder, PointerDragController.getInstance().onDragEnd((e) => {
 				this._reorder.handlePointerDragEnd(e);
 			}), PointerDragController.getInstance().onDragMove((e) => {
 				this._reorder.handlePointerDragMove(e.clientX, e.clientY);
@@ -9053,21 +9613,21 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 						panel
 					});
 					if (((_this$accessor$option2 = this.accessor.options.theme) === null || _this$accessor$option2 === void 0 ? void 0 : _this$accessor$option2.tabAnimation) === "smooth") {
-						const tabWidth = tab.element.getBoundingClientRect().width;
+						const tabSize = mainAxisSize(tab.element.getBoundingClientRect(), this._direction);
 						const sourceIndex = this._tabs.findIndex((x) => x.value === tab);
 						this._animState = {
 							sourceTabId: panel.id,
 							sourceIndex,
 							tabPositions: this.snapshotTabPositions(),
-							chipPositions: this._tabGroupManager.snapshotChipWidths(),
+							chipSizes: this._tabGroupManager.snapshotChipSizes(),
 							currentInsertionIndex: null,
 							targetTabGroupId: null,
 							sourceTabGroupId: null,
 							sourceGroupPanelIds: null,
-							sourceChipWidth: 0,
-							cursorOffsetFromDragLeft: tabWidth / 2,
-							sourceGapWidth: tabWidth,
-							containerLeft: this._tabsList.getBoundingClientRect().left
+							sourceChipSize: 0,
+							cursorOffsetFromDragStart: tabSize / 2,
+							sourceGapSize: tabSize,
+							containerStart: mainAxisStart(this._tabsList.getBoundingClientRect(), this._direction)
 						};
 						this._pendingCollapse = true;
 						requestAnimationFrame(() => {
@@ -9163,7 +9723,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			this._tabGroupManager.positionAllChips();
 			if (this._animState) {
 				this._animState.tabPositions = this.snapshotTabPositions();
-				this._animState.chipPositions = this._tabGroupManager.snapshotChipWidths();
+				this._animState.chipSizes = this._tabGroupManager.snapshotChipSizes();
 				this.applyDragOverTransforms();
 			}
 		}
@@ -9185,7 +9745,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			}
 			if (this._animState) {
 				this._animState.tabPositions = this.snapshotTabPositions();
-				this._animState.chipPositions = this._tabGroupManager.snapshotChipWidths();
+				this._animState.chipSizes = this._tabGroupManager.snapshotChipSizes();
 				this.applyDragOverTransforms();
 			}
 		}
@@ -9263,24 +9823,24 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			const firstPanelId = tabGroup.panelIds[0];
 			const firstIdx = firstPanelId ? this._tabs.findIndex((t) => t.value.panel.id === firstPanelId) : -1;
 			const chipRect = chip.element.getBoundingClientRect();
-			let groupGapWidth = chipRect.width;
+			let groupGapSize = mainAxisSize(chipRect, this._direction);
 			for (const pid of tabGroup.panelIds) {
 				const tabEntry = this._tabMap.get(pid);
-				if (tabEntry) groupGapWidth += tabEntry.value.element.getBoundingClientRect().width;
+				if (tabEntry) groupGapSize += mainAxisSize(tabEntry.value.element.getBoundingClientRect(), this._direction);
 			}
 			this._animState = {
 				sourceTabId: "",
 				sourceIndex: firstIdx,
 				tabPositions: this.snapshotTabPositions(),
-				chipPositions: this._tabGroupManager.snapshotChipWidths(),
+				chipSizes: this._tabGroupManager.snapshotChipSizes(),
 				currentInsertionIndex: null,
 				targetTabGroupId: null,
 				sourceTabGroupId: tabGroup.id,
 				sourceGroupPanelIds: new Set(tabGroup.panelIds),
-				sourceChipWidth: chipRect.width,
-				cursorOffsetFromDragLeft: event.clientX - chipRect.left,
-				sourceGapWidth: groupGapWidth,
-				containerLeft: this._tabsList.getBoundingClientRect().left
+				sourceChipSize: mainAxisSize(chipRect, this._direction),
+				cursorOffsetFromDragStart: mainAxisCursor(event, this._direction) - mainAxisStart(chipRect, this._direction),
+				sourceGapSize: groupGapSize,
+				containerStart: mainAxisStart(this._tabsList.getBoundingClientRect(), this._direction)
 			};
 			if (((_this$accessor$option4 = this.accessor.options.theme) === null || _this$accessor$option4 === void 0 ? void 0 : _this$accessor$option4.tabAnimation) !== "smooth") return;
 			const groupPanelIds = new Set(tabGroup.panelIds);
@@ -9313,6 +9873,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		* (when the source tab is currently to the left of the target slot, its
 		* removal shifts the insertion index down by one). Always clears
 		* `targetTabGroupId` so the dropped tab lands outside the group.
+		*
+		* A chip dropped on a chip is a group move: the panel path would route it
+		* through the cross-group machinery, which rebuilds the tab group under a
+		* new id.
 		*/
 		_handleChipDrop(tabGroup, event) {
 			const firstPanelId = tabGroup.panelIds[0];
@@ -9320,6 +9884,14 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			const insertionIndex = this._tabs.findIndex((x) => x.value.panel.id === firstPanelId);
 			if (insertionIndex === -1) return;
 			const data = getPanelData();
+			if (data === null || data === void 0 ? void 0 : data.tabGroupId) {
+				var _animState$currentIns2;
+				const animState = this._animState;
+				this._animState = null;
+				this._pendingCollapse = false;
+				this._commitGroupMove(data.tabGroupId, (_animState$currentIns2 = animState === null || animState === void 0 ? void 0 : animState.currentInsertionIndex) !== null && _animState$currentIns2 !== void 0 ? _animState$currentIns2 : insertionIndex);
+				return;
+			}
 			const sourceIndex = (data === null || data === void 0 ? void 0 : data.groupId) === this.group.id && (data === null || data === void 0 ? void 0 : data.panelId) ? this._tabs.findIndex((x) => x.value.panel.id === data.panelId) : -1;
 			const adjustedIndex = insertionIndex - (sourceIndex !== -1 && sourceIndex < insertionIndex ? 1 : 0);
 			this._onDrop.fire({
@@ -10026,8 +10598,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			return this.tabsContainer.getPanelForTab(element);
 		}
 		get isContentFocused() {
-			if (!document.activeElement) return false;
-			return isAncestor(document.activeElement, this.contentContainer.element);
+			const element = this.contentContainer.element;
+			const activeElement = getActiveElement(element);
+			if (!activeElement) return false;
+			return isAncestor(activeElement, element);
 		}
 		get headerPosition() {
 			var _this$_headerPosition;
@@ -12938,6 +13512,12 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			observer.observe(gridview.element);
 			return { dispose: () => observer.disconnect() };
 		}
+		/**
+		* Runs `work` after `delayMs`, resolving once it has finished. Work that
+		* returns a promise is awaited, so a caller holding
+		* `restorationPromise` waits for the popout window itself rather than
+		* only for the timer that starts it.
+		*/
 		scheduleRestoration(delayMs, work, onCancel) {
 			return new Promise((resolve) => {
 				const cleanup = () => {
@@ -12952,8 +13532,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 						resolve();
 						return;
 					}
-					work();
-					resolve();
+					Promise.resolve(work()).then(() => resolve(), () => resolve());
 				}, delayMs);
 				this._restorationCleanups.add(cleanup);
 			});
@@ -14211,188 +14790,6 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		}
 	};
 
-//#endregion
-//#region \0@oxc-project+runtime@0.139.0/helpers/esm/asyncToGenerator.js
-	function asyncGeneratorStep(n, t, e, r, o, a, c) {
-		try {
-			var i = n[a](c), u = i.value;
-		} catch (n) {
-			e(n);
-			return;
-		}
-		i.done ? t(u) : Promise.resolve(u).then(r, o);
-	}
-	function _asyncToGenerator(n) {
-		return function() {
-			var t = this, e = arguments;
-			return new Promise(function(r, o) {
-				var a = n.apply(t, e);
-				function _next(n) {
-					asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
-				}
-				function _throw(n) {
-					asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
-				}
-				_next(void 0);
-			});
-		};
-	}
-
-//#endregion
-//#region src/popoutWindow.ts
-/**
-	* Reject popout URLs that aren't same-origin http(s). Blocks `javascript:`,
-	* `data:`, `blob:`, `vbscript:`, and cross-origin URLs that would otherwise
-	* execute in a context the browser still associates with the opener via
-	* `window.opener`.
-	*/
-	function assertSameOriginPopoutUrl(url) {
-		let resolved;
-		try {
-			resolved = new URL(url, globalThis.location.href);
-		} catch (_unused) {
-			throw new Error(`dockview: invalid popout URL: ${url}`);
-		}
-		if (!(resolved.protocol === "http:" || resolved.protocol === "https:") || resolved.origin !== globalThis.location.origin) throw new Error(`dockview: popout URL must be same-origin http(s); got: ${url}`);
-	}
-	var PopoutWindow = class extends CompositeDisposable {
-		get window() {
-			var _this$_window$value, _this$_window;
-			return (_this$_window$value = (_this$_window = this._window) === null || _this$_window === void 0 ? void 0 : _this$_window.value) !== null && _this$_window$value !== void 0 ? _this$_window$value : null;
-		}
-		constructor(target, className, options) {
-			super();
-			this.target = target;
-			this.className = className;
-			this.options = options;
-			this._onWillClose = new Emitter();
-			this.onWillClose = this._onWillClose.event;
-			this._onDidClose = new Emitter();
-			this.onDidClose = this._onDidClose.event;
-			this._window = null;
-			this.addDisposables(this._onWillClose, this._onDidClose, { dispose: () => {
-				this.close();
-			} });
-		}
-		dimensions() {
-			if (!this._window) return null;
-			const left = this._window.value.screenX;
-			return {
-				top: this._window.value.screenY,
-				left,
-				width: this._window.value.innerWidth,
-				height: this._window.value.innerHeight
-			};
-		}
-		close() {
-			if (this._window) {
-				var _this$options$onWillC, _this$options;
-				this._onWillClose.fire();
-				(_this$options$onWillC = (_this$options = this.options).onWillClose) === null || _this$options$onWillC === void 0 || _this$options$onWillC.call(_this$options, {
-					id: this.target,
-					window: this._window.value
-				});
-				this._window.disposable.dispose();
-				this._window = null;
-				this._onDidClose.fire();
-			}
-		}
-		open() {
-			var _this = this;
-			return _asyncToGenerator(function* () {
-				var _this$options$onDidOp, _this$options2;
-				if (_this._window) throw new Error("instance of popout window is already open");
-				const url = `${_this.options.url}`;
-				assertSameOriginPopoutUrl(url);
-				const features = Object.entries({
-					top: _this.options.top,
-					left: _this.options.left,
-					width: _this.options.width,
-					height: _this.options.height
-				}).map(([key, value]) => `${key}=${value}`).join(",");
-				/**
-				* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/open
-				*/
-				const externalWindow = window.open(url, _this.target, features);
-				if (!externalWindow)
- /**
-				* Popup blocked
-				*/
-				return null;
-				const disposable = new CompositeDisposable();
-				_this._window = {
-					value: externalWindow,
-					disposable
-				};
-				disposable.addDisposables(Disposable.from(() => {
-					externalWindow.close();
-				}), addDisposableListener(globalThis.window, "beforeunload", () => {
-					/**
-					* before the main window closes we should close this popup too
-					* to be good citizens
-					*
-					* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
-					*/
-					_this.close();
-				}));
-				const container = _this.createPopoutWindowContainer();
-				if (_this.className) container.classList.add(_this.className);
-				(_this$options$onDidOp = (_this$options2 = _this.options).onDidOpen) === null || _this$options$onDidOp === void 0 || _this$options$onDidOp.call(_this$options2, {
-					id: _this.target,
-					window: externalWindow
-				});
-				return new Promise((resolve, reject) => {
-					externalWindow.addEventListener("unload", () => {});
-					/**
-					* `load` is the only event that resolves this promise with a
-					* container, so a window that goes away first would leave the
-					* caller awaiting a promise that never settles - and
-					* `addPopoutGroup` holds its layout transaction open until it does.
-					* Settle with `null` on close, the same signal a blocked popup
-					* gives and one the caller already handles. `resolve` after the
-					* fact is a no-op, so a `load` that arrived first still wins.
-					*/
-					disposable.addDisposables(_this.onWillClose(() => resolve(null)));
-					externalWindow.addEventListener("load", () => {
-						/**
-						* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
-						*/
-						try {
-							const externalDocument = externalWindow.document;
-							externalDocument.title = document.title;
-							externalDocument.body.appendChild(container);
-							addStyles(externalDocument, globalThis.document.styleSheets, { nonce: _this.options.nonce });
-							/**
-							* beforeunload must be registered after load for reasons I could not determine
-							* otherwise the beforeunload event will not fire when the window is closed
-							*/
-							addDisposableListener(externalWindow, "beforeunload", () => {
-								/**
-								* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
-								*/
-								_this.close();
-							});
-							resolve(container);
-						} catch (err) {
-							reject(err);
-						}
-					});
-				});
-			})();
-		}
-		createPopoutWindowContainer() {
-			const el = document.createElement("div");
-			el.classList.add("dv-popout-window");
-			el.id = "dv-popout-window";
-			el.style.position = "absolute";
-			el.style.width = "100%";
-			el.style.height = "100%";
-			el.style.top = "0px";
-			el.style.left = "0px";
-			return el;
-		}
-	};
-
 //#endregion
 //#region src/dockview/strictEventsSequencing.ts
 	var StrictEventsSequencing = class extends CompositeDisposable {
@@ -14436,8 +14833,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 	* peeks): while it lives it watches a configurable set of dismiss signals
 	* (Escape / extra keys, outside-pointerdown with an optional grace window,
 	* window resize, focus moving outside) and calls `onDismiss`. Inside/outside is
-	* decided by an `isInside` predicate (geometry) or a `contains` check against
-	* `elements`. Dispose to detach every listener.
+	* decided by an `isInside` predicate (geometry) or by checking the event's
+	* composed path against `elements`. Dispose to detach every listener.
 	*
 	* It owns only the *signals*, not the surface element, its position, or any
 	* hover/keep-open policy, so callers keep their own element lifecycle and
@@ -14457,9 +14854,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		const isInside = (event) => {
 			var _options$elements, _options$elements2;
 			if (options.isInside) return options.isInside(event);
-			const target = event.target;
-			if (!(target instanceof Node)) return false;
-			return ((_options$elements = (_options$elements2 = options.elements) === null || _options$elements2 === void 0 ? void 0 : _options$elements2.call(options)) !== null && _options$elements !== void 0 ? _options$elements : []).some((el) => el.contains(target));
+			return isEventWithin(event, (_options$elements = (_options$elements2 = options.elements) === null || _options$elements2 === void 0 ? void 0 : _options$elements2.call(options)) !== null && _options$elements !== void 0 ? _options$elements : []);
 		};
 		if (escape || keys.length > 0) disposables.addDisposables(addDisposableListener(win, "keydown", (event) => {
 			if (escape && event.key === "Escape" || keys.includes(event.key)) options.onDismiss();
@@ -14478,17 +14873,45 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			options.onDismiss();
 		}));
 		if (options.focusOut) {
-			const isFocusInside = (focused) => {
-				var _options$elements3, _options$elements4;
-				if (options.isFocusInside) return options.isFocusInside(focused);
-				return ((_options$elements3 = (_options$elements4 = options.elements) === null || _options$elements4 === void 0 ? void 0 : _options$elements4.call(options)) !== null && _options$elements3 !== void 0 ? _options$elements3 : []).some((el) => el.contains(focused));
+			/** A node in the layer's own tree, to scope retargeting and to locate
+			*  the shadow roots to listen on. */
+			const layerScope = () => {
+				var _options$anchor, _options$anchor2, _options$elements3;
+				return (_options$anchor = (_options$anchor2 = options.anchor) === null || _options$anchor2 === void 0 ? void 0 : _options$anchor2.call(options)) !== null && _options$anchor !== void 0 ? _options$anchor : (_options$elements3 = options.elements) === null || _options$elements3 === void 0 ? void 0 : _options$elements3.call(options)[0];
 			};
+			const seen = /* @__PURE__ */ new WeakSet();
 			const onFocusIn = (event) => {
+				var _options$elements4, _options$elements5;
+				if (seen.has(event)) return;
+				seen.add(event);
 				const target = event.target;
-				if (target instanceof Element && !isFocusInside(target)) options.onDismiss();
+				if (!(target instanceof Element)) return;
+				if (!(options.isFocusInside ? options.isFocusInside(retargetInto(target, layerScope())) : isEventWithin(event, (_options$elements4 = (_options$elements5 = options.elements) === null || _options$elements5 === void 0 ? void 0 : _options$elements5.call(options)) !== null && _options$elements4 !== void 0 ? _options$elements4 : []))) options.onDismiss();
 			};
-			win.addEventListener("focusin", onFocusIn, capture);
-			disposables.addDisposables({ dispose: () => win.removeEventListener("focusin", onFocusIn, capture) });
+			const bound = /* @__PURE__ */ new Map();
+			const syncShadowRoots = () => {
+				var _options$anchor3, _options$elements6, _options$elements7;
+				const wanted = /* @__PURE__ */ new Set();
+				const anchor = (_options$anchor3 = options.anchor) === null || _options$anchor3 === void 0 ? void 0 : _options$anchor3.call(options);
+				const sources = [...(_options$elements6 = (_options$elements7 = options.elements) === null || _options$elements7 === void 0 ? void 0 : _options$elements7.call(options)) !== null && _options$elements6 !== void 0 ? _options$elements6 : [], ...anchor ? [anchor] : []];
+				for (const node of sources) for (const root of shadowRootsOf(node)) wanted.add(root);
+				for (const [root, listener] of bound) if (!wanted.has(root)) {
+					listener.dispose();
+					bound.delete(root);
+				}
+				for (const root of wanted) {
+					if (bound.has(root)) continue;
+					bound.set(root, addDisposableListener(root, "focusin", onFocusIn, capture));
+				}
+			};
+			disposables.addDisposables(addDisposableListener(win, "focusin", (event) => {
+				syncShadowRoots();
+				onFocusIn(event);
+			}, capture), { dispose: () => {
+				for (const [, listener] of bound) listener.dispose();
+				bound.clear();
+			} });
+			syncShadowRoots();
 		}
 		return disposables;
 	}
@@ -14981,6 +15404,24 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			this.updateTheme(this._gap, this._defaultCollapsedSize);
 			return view;
 		}
+		/**
+		* Lay out from the shell's current size.
+		*
+		* The ResizeObserver above only reports asynchronously, so between
+		* construction and its first callback the shell believes it has no size -
+		* and any layout built in that window (panels added straight after
+		* `createDockview`, say) resolves its sizes against zero and collapses to
+		* minimums, permanently. Seeding the size synchronously gives that work
+		* the real dimensions. Same guards as the observer: a detached or hidden
+		* shell has no size worth propagating.
+		*/
+		layoutFromElement() {
+			if (!this._shellElement.offsetParent || !isInDocument(this._shellElement)) return;
+			const width = Math.round(this._shellElement.clientWidth);
+			const height = Math.round(this._shellElement.clientHeight);
+			if (width === 0 || height === 0) return;
+			this.layout(width, height);
+		}
 		layout(width, height) {
 			this._outerSplitview.layout(width, height);
 			this._flushPendingSizes();
@@ -15240,6 +15681,15 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 
 //#endregion
 //#region src/dockview/dockviewComponent.ts
+/**
+	* An error says the most about why, so it wins; a blocked window has none, and
+	* its usual cause is more useful than its name.
+	*/
+	function logFailedPopout(failure) {
+		if (failure.error) console.error("dockview: failed to create popout.", failure.error);
+		else if (failure.reason === "blocked") console.error("dockview: failed to create popout. perhaps you need to allow pop-ups for this website");
+		else console.error(`dockview: failed to create popout (${failure.reason}).`);
+	}
 	function buildTabGroupColorPalette(options) {
 		var _options$tabGroupColo;
 		return new TabGroupColorPalette((_options$tabGroupColo = options.tabGroupColors) !== null && _options$tabGroupColo !== void 0 ? _options$tabGroupColo : DEFAULT_TAB_GROUP_COLORS, options.tabGroupAccent !== "off");
@@ -15291,6 +15741,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		get panels() {
 			return this.groups.flatMap((group) => group.panels);
 		}
+		/** `dndStrategy` resolved against this device; see `DockviewApi`. */
+		get dndCapabilities() {
+			return resolveDndCapabilities(this.options);
+		}
 		get options() {
 			return this._options;
 		}
@@ -15800,9 +16254,9 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			return (_this$_popoutWindowSe = (_this$_popoutWindowSe2 = this._popoutWindowService) === null || _this$_popoutWindowSe2 === void 0 ? void 0 : _this$_popoutWindowSe2.restorationPromise) !== null && _this$_popoutWindowSe !== void 0 ? _this$_popoutWindowSe : Promise.resolve();
 		}
 		constructor(container, options) {
-			var _options$theme$gap, _options$theme, _options$theme$gap2, _options$theme2, _options$theme3;
+			var _options$proportional, _options$theme$gap, _options$theme, _options$theme$gap2, _options$theme2, _options$theme3;
 			super(container, {
-				proportionalLayout: true,
+				proportionalLayout: (_options$proportional = options.proportionalLayout) !== null && _options$proportional !== void 0 ? _options$proportional : true,
 				orientation: "HORIZONTAL",
 				styles: options.hideBorders ? { separatorBorder: "transparent" } : void 0,
 				disableAutoResizing: options.disableAutoResizing,
@@ -15849,6 +16303,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			this.onDidChangePopouts = this._onDidChangePopouts.event;
 			this._onDidOpenPopoutWindowFail = new Emitter();
 			this.onDidOpenPopoutWindowFail = this._onDidOpenPopoutWindowFail.event;
+			this._onWillClosePopoutWindow = new Emitter();
+			this.onWillClosePopoutWindow = this._onWillClosePopoutWindow.event;
 			this._onDidStartFloatingGroupDrag = new Emitter();
 			this.onDidStartFloatingGroupDrag = this._onDidStartFloatingGroupDrag.event;
 			this._onDidEndFloatingGroupDrag = new Emitter();
@@ -15950,7 +16406,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				var _this$_shellManager2;
 				this._moduleRegistry.dispose();
 				(_this$_shellManager2 = this._shellManager) === null || _this$_shellManager2 === void 0 || _this$_shellManager2.dispose();
-			}));
+			}), this._onWillClosePopoutWindow);
 			const rootDropTarget = this._rootDropTargetService;
 			if (rootDropTarget) this.addDisposables(rootDropTarget.onWillShowOverlay((event) => {
 				if (this.gridview.length > 0 && event.position === "center") return;
@@ -15963,6 +16419,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				}));
 			}), rootDropTarget.onDrop((event) => this.dockToLayoutEdge(event.nativeEvent, event.position)));
 			this._moduleRegistry.postConstruct(this);
+			this._shellManager.layoutFromElement();
 		}
 		setVisible(panel, visible) {
 			switch (panel.api.location.type) {
@@ -16032,22 +16489,36 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			const box = getBox();
 			const groupId = (_options$overridePopo = options === null || options === void 0 || (_options$overridePopo2 = options.overridePopoutGroup) === null || _options$overridePopo2 === void 0 ? void 0 : _options$overridePopo2.id) !== null && _options$overridePopo !== void 0 ? _options$overridePopo : this.getNextGroupId();
 			const resolvedPopoutUrl = (_options$popoutUrl = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _options$popoutUrl !== void 0 ? _options$popoutUrl : (_this$options = this.options) === null || _this$options === void 0 ? void 0 : _this$options.popoutUrl;
+			const popoutUrl = resolvedPopoutUrl !== null && resolvedPopoutUrl !== void 0 ? resolvedPopoutUrl : "/popout.html";
 			const _window = new PopoutWindow(`${this.id}-${groupId}`, theme !== null && theme !== void 0 ? theme : "", {
-				url: resolvedPopoutUrl !== null && resolvedPopoutUrl !== void 0 ? resolvedPopoutUrl : "/popout.html",
+				url: popoutUrl,
 				left: box.left,
 				top: box.top,
 				width: box.width,
 				height: box.height,
 				onDidOpen: options === null || options === void 0 ? void 0 : options.onDidOpen,
-				onWillClose: options === null || options === void 0 ? void 0 : options.onWillClose,
-				nonce: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.nonce
+				onWillClose: (event) => {
+					var _options$onWillClose;
+					options === null || options === void 0 || (_options$onWillClose = options.onWillClose) === null || _options$onWillClose === void 0 || _options$onWillClose.call(options, event);
+					this._onWillClosePopoutWindow.fire(event);
+				},
+				nonce: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.nonce,
+				styleRoot: () => this.element.getRootNode()
 			});
 			const popoutWindowDisposable = new CompositeDisposable(_window, _window.onDidClose(() => {
 				popoutWindowDisposable.dispose();
 			}));
-			return _window.open().then((popoutContainer) => {
+			const openError = getPopoutUrlError(popoutUrl);
+			return (openError ? Promise.resolve(null) : _window.open()).then((popoutContainer) => {
 				var _options$referenceGro, _options$overridePopo4;
-				if (_window.isDisposed) return false;
+				if (_window.isDisposed) {
+					const failure = _window.failure;
+					if (failure && !this.isDisposed) {
+						logFailedPopout(failure);
+						this._onDidOpenPopoutWindowFail.fire(failure);
+					}
+					return false;
+				}
 				const referenceGroup = (_options$referenceGro = options === null || options === void 0 ? void 0 : options.referenceGroup) !== null && _options$referenceGro !== void 0 ? _options$referenceGro : itemToPopout instanceof DockviewPanel ? itemToPopout.group : itemToPopout;
 				const referenceLocation = itemToPopout.api.location.type;
 				/**
@@ -16066,11 +16537,16 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					if (popoutContainer) this._onDidAddGroup.fire(group);
 				}
 				if (popoutContainer === null) {
+					var _window$failure;
 					this.handleBlockedPopout({
 						group,
 						referenceGroup,
 						options,
-						popoutWindowDisposable
+						popoutWindowDisposable,
+						failure: openError ? {
+							reason: "url-refused",
+							error: openError
+						} : (_window$failure = _window.failure) !== null && _window$failure !== void 0 ? _window$failure : { reason: "blocked" }
 					});
 					return false;
 				}
@@ -16233,16 +16709,17 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			});
 		}
 		/**
-		* The popout window was blocked (e.g. by the browser's popup blocker,
-		* common when restoring popouts on load). Fall back gracefully so the
-		* group(s) end up valid and visible in the main grid rather than as
-		* orphans that later crash clear()/remove().
+		* The popout window never opened - blocked by the browser's popup blocker
+		* (common when restoring popouts on load), or refused outright because its
+		* URL failed the same-origin guard. Fall back gracefully so the group(s)
+		* end up valid and visible in the main grid rather than as orphans that
+		* render nothing and later crash clear()/remove().
 		*/
 		handleBlockedPopout(params) {
-			const { group, referenceGroup, options, popoutWindowDisposable } = params;
-			console.error("dockview: failed to create popout. perhaps you need to allow pop-ups for this website");
+			const { group, referenceGroup, options, popoutWindowDisposable, failure } = params;
+			logFailedPopout(failure);
 			popoutWindowDisposable.dispose();
-			this._onDidOpenPopoutWindowFail.fire();
+			this._onDidOpenPopoutWindowFail.fire(failure);
 			if (options === null || options === void 0 ? void 0 : options.overridePopoutGridview) {
 				const blockedGridview = options.overridePopoutGridview;
 				const members = this.groups.filter((candidate) => blockedGridview.element.contains(candidate.element));
@@ -16397,10 +16874,11 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				group = this.createGroup();
 				this._onDidAddGroup.fire(group);
 				this.movingLock(() => this.removePanel(item, {
-					removeEmptyGroup: true,
+					removeEmptyGroup: false,
 					skipDispose: true,
 					skipSetActiveGroup: true
 				}));
+				this.removeGroupIfEmpty(sourceGroup);
 				this.movingLock(() => group.model.openPanel(item, { skipSetGroupActive: true }));
 				movedPanels = [{
 					panel: item,
@@ -16471,13 +16949,17 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			});
 			for (const { panel, from } of movedPanels) this.fireDidMovePanel(panel, from);
 		}
+		removeGroupIfEmpty(group) {
+			if (group.model.size === 0) this.doRemoveGroup(group, { skipActive: true });
+		}
 		/**
-		* Build an empty gridview configured to match the main grid's styling, for
-		* hosting a nested layout inside a floating or popout window.
+		* Build an empty gridview configured to match the main grid's styling and
+		* resize behaviour, for hosting a nested layout inside a floating or popout
+		* window.
 		*/
 		createNestedGridview(orientation = "HORIZONTAL") {
 			var _this$options$theme$g, _this$options$theme2;
-			return new Gridview(true, 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, 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);
 		}
 		/**
 		* Wrap a (populated) floating gridview in an overlay window: title bar /
@@ -16550,6 +17032,12 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			const newDisableDnd = this.options.disableDnd;
 			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;
+			}
 			if ("theme" in options) this.updateTheme();
 			if ("createRightHeaderActionComponent" in options || "createLeftHeaderActionComponent" in options || "createPrefixHeaderActionComponent" in options) {
 				var _this$headerActionsSe;
@@ -16857,14 +17345,14 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		* @returns A JSON respresentation of the layout
 		*/
 		toJSON() {
-			var _this$_floatingGroupS3, _this$_floatingGroupS4, _this$_popoutWindowSe9, _this$_popoutWindowSe10, _this$activeGroup2;
+			var _this$_floatingGroupS3, _this$_floatingGroupS4, _this$_popoutWindowSe11, _this$_popoutWindowSe12, _this$activeGroup2;
 			const data = this.gridview.serialize();
 			const panels = this.panels.reduce((collection, panel) => {
 				collection[panel.id] = panel.toJSON();
 				return collection;
 			}, {});
 			const floats = (_this$_floatingGroupS3 = (_this$_floatingGroupS4 = this._floatingGroupService) === null || _this$_floatingGroupS4 === void 0 ? void 0 : _this$_floatingGroupS4.serialize()) !== null && _this$_floatingGroupS3 !== void 0 ? _this$_floatingGroupS3 : [];
-			const popoutGroups = (_this$_popoutWindowSe9 = (_this$_popoutWindowSe10 = this._popoutWindowService) === null || _this$_popoutWindowSe10 === void 0 ? void 0 : _this$_popoutWindowSe10.serialize()) !== null && _this$_popoutWindowSe9 !== void 0 ? _this$_popoutWindowSe9 : [];
+			const popoutGroups = (_this$_popoutWindowSe11 = (_this$_popoutWindowSe12 = this._popoutWindowService) === null || _this$_popoutWindowSe12 === void 0 ? void 0 : _this$_popoutWindowSe12.serialize()) !== null && _this$_popoutWindowSe11 !== void 0 ? _this$_popoutWindowSe11 : [];
 			const result = {
 				grid: data,
 				panels,
@@ -16903,8 +17391,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			this.mutation("load", () => this._doFromJSON(data, options));
 		}
 		_doFromJSON(data, options) {
-			var _this$_popoutWindowSe11, _data$grid$root;
-			(_this$_popoutWindowSe11 = this._popoutWindowService) === null || _this$_popoutWindowSe11 === void 0 || _this$_popoutWindowSe11.cancelPendingRestorations();
+			var _this$_popoutWindowSe13, _data$grid$root;
+			(_this$_popoutWindowSe13 = this._popoutWindowService) === null || _this$_popoutWindowSe13 === void 0 || _this$_popoutWindowSe13.cancelPendingRestorations();
 			if (typeof data !== "object" || data === null) throw new Error("dockview: serialized layout must be a non-null object");
 			if (!data.grid || ((_data$grid$root = data.grid.root) === null || _data$grid$root === void 0 ? void 0 : _data$grid$root.type) !== "branch" || !Array.isArray(data.grid.root.data)) throw new Error("dockview: root must be of type branch");
 			const existingPanels = /* @__PURE__ */ new Map();
@@ -17023,7 +17511,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			} else this.clear();
 			const { grid, panels, activeGroup } = data;
 			try {
-				var _data$floatingGroups, _data$popoutGroups, _this$_popoutWindowSe12, _this$_floatingGroupS5, _this$_watermarkServi2;
+				var _data$floatingGroups, _data$popoutGroups, _this$_popoutWindowSe14, _this$_floatingGroupS5, _this$_watermarkServi2;
 				const width = this.width;
 				const height = this.height;
 				const createGroupFromSerializedState = (data) => {
@@ -17088,7 +17576,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				if (data.edgeGroups) this.deserializeEdgeGroups(data.edgeGroups, panels, existingPanels, temporaryGroups);
 				this.deserializeFloatingWindows((_data$floatingGroups = data.floatingGroups) !== null && _data$floatingGroups !== void 0 ? _data$floatingGroups : [], createGroupFromSerializedState);
 				const popoutPromises = this.deserializePopoutWindows((_data$popoutGroups = data.popoutGroups) !== null && _data$popoutGroups !== void 0 ? _data$popoutGroups : [], createGroupFromSerializedState);
-				(_this$_popoutWindowSe12 = this._popoutWindowService) === null || _this$_popoutWindowSe12 === void 0 || _this$_popoutWindowSe12.finishRestoration(popoutPromises);
+				(_this$_popoutWindowSe14 = this._popoutWindowService) === null || _this$_popoutWindowSe14 === void 0 || _this$_popoutWindowSe14.finishRestoration(popoutPromises);
 				(_this$_floatingGroupS5 = this._floatingGroupService) === null || _this$_floatingGroupS5 === void 0 || _this$_floatingGroupS5.constrainBounds();
 				if (typeof activeGroup === "string") {
 					const panel = this.getPanel(activeGroup);
@@ -17256,15 +17744,13 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					}
 				}
 				const group = grid ? members[0] : createGroup(data);
-				return popoutService.scheduleRestoration(index * 100, () => {
-					this.addPopoutGroup(group, {
-						position: position !== null && position !== void 0 ? position : void 0,
-						overridePopoutGroup: gridReferenceGroup ? group : void 0,
-						overridePopoutGridview,
-						referenceGroup: gridReferenceGroup ? this.getPanel(gridReferenceGroup) : void 0,
-						popoutUrl: url
-					});
-				}, () => {
+				return popoutService.scheduleRestoration(index * 100, () => this.addPopoutGroup(group, {
+					position: position !== null && position !== void 0 ? position : void 0,
+					overridePopoutGroup: gridReferenceGroup ? group : void 0,
+					overridePopoutGridview,
+					referenceGroup: gridReferenceGroup ? this.getPanel(gridReferenceGroup) : void 0,
+					popoutUrl: url
+				}), () => {
 					for (const orphan of members.length > 0 ? members : [group]) if (!this.isDisposed && this._groups.has(orphan.id) && orphan.element.parentElement === null) {
 						for (const panel of [...orphan.panels]) this.removePanel(panel, { removeEmptyGroup: false });
 						orphan.dispose();
@@ -17499,7 +17985,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		* window.
 		*/
 		detachFromNestedWindow(group) {
-			var _this$_floatingGroupS7, _this$_popoutWindowSe13;
+			var _this$_floatingGroupS7, _this$_popoutWindowSe15;
 			const floating = (_this$_floatingGroupS7 = this._floatingGroupService) === null || _this$_floatingGroupS7 === void 0 ? void 0 : _this$_floatingGroupS7.findByGroup(group);
 			if (floating) {
 				const members = this.nestedWindowMembers(group);
@@ -17508,7 +17994,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				if (floating.group === group) floating.setAnchorGroup(members.find((m) => m !== group));
 				return true;
 			}
-			const popout = (_this$_popoutWindowSe13 = this._popoutWindowService) === null || _this$_popoutWindowSe13 === void 0 ? void 0 : _this$_popoutWindowSe13.findByGroup(group);
+			const popout = (_this$_popoutWindowSe15 = this._popoutWindowService) === null || _this$_popoutWindowSe15 === void 0 ? void 0 : _this$_popoutWindowSe15.findByGroup(group);
 			if (popout) {
 				const members = this.nestedWindowMembers(group);
 				if (members.length <= 1) return false;
@@ -17565,8 +18051,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				return group;
 			}
 			if (group.api.location.type === "popout") {
-				var _this$_popoutWindowSe14, _this$_popoutWindowSe15;
-				const selectedGroup = (_this$_popoutWindowSe14 = this._popoutWindowService) === null || _this$_popoutWindowSe14 === void 0 ? void 0 : _this$_popoutWindowSe14.findByGroup(group);
+				var _this$_popoutWindowSe16, _this$_popoutWindowSe17;
+				const selectedGroup = (_this$_popoutWindowSe16 = this._popoutWindowService) === null || _this$_popoutWindowSe16 === void 0 ? void 0 : _this$_popoutWindowSe16.findByGroup(group);
 				if (!selectedGroup) throw new Error("dockview: failed to find popout group");
 				if (this.detachFromNestedWindow(group)) {
 					if (options === null || options === void 0 ? void 0 : options.skipDispose) group.model.location = { type: "grid" };
@@ -17583,7 +18069,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					this._groups.delete(group.id);
 					this._onDidRemoveGroup.fire(group);
 				}
-				(_this$_popoutWindowSe15 = this._popoutWindowService) === null || _this$_popoutWindowSe15 === void 0 || _this$_popoutWindowSe15.remove(selectedGroup);
+				(_this$_popoutWindowSe17 = this._popoutWindowService) === null || _this$_popoutWindowSe17 === void 0 || _this$_popoutWindowSe17.remove(selectedGroup);
 				const removedGroup = selectedGroup.disposable.dispose();
 				if (!(options === null || options === void 0 ? void 0 : options.skipPopoutReturn) && removedGroup) {
 					this.doAddGroup(removedGroup, [0]);
@@ -17610,10 +18096,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		debouncedUpdateAllPositions() {
 			if (this._updatePositionsFrameId !== void 0) cancelAnimationFrame(this._updatePositionsFrameId);
 			this._updatePositionsFrameId = requestAnimationFrame(() => {
-				var _this$_popoutWindowSe16, _this$_popoutWindowSe17;
+				var _this$_popoutWindowSe18, _this$_popoutWindowSe19;
 				this._updatePositionsFrameId = void 0;
 				this.overlayRenderContainer.updateAllPositions();
-				for (const entry of (_this$_popoutWindowSe16 = (_this$_popoutWindowSe17 = this._popoutWindowService) === null || _this$_popoutWindowSe17 === void 0 ? void 0 : _this$_popoutWindowSe17.entries) !== null && _this$_popoutWindowSe16 !== void 0 ? _this$_popoutWindowSe16 : []) entry.overlayRenderContainer.updateAllPositions();
+				for (const entry of (_this$_popoutWindowSe18 = (_this$_popoutWindowSe19 = this._popoutWindowService) === null || _this$_popoutWindowSe19 === void 0 ? void 0 : _this$_popoutWindowSe19.entries) !== null && _this$_popoutWindowSe18 !== void 0 ? _this$_popoutWindowSe18 : []) entry.overlayRenderContainer.updateAllPositions();
 			});
 		}
 		movingLock(func) {
@@ -17863,7 +18349,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 						}
 					}
 					if (sourceGroup.api.location.type === "popout" && this.nestedWindowMembers(sourceGroup).length <= 1) {
-						var _this$_popoutWindowSe18;
+						var _this$_popoutWindowSe20;
 						/**
 						* the source group is the only group in a popout window and
 						* has a single panel
@@ -17878,7 +18364,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 						* Multi-group popout windows fall through to the generic
 						* detach-and-re-add path so the window stays alive.
 						*/
-						const popoutGroup = (_this$_popoutWindowSe18 = this._popoutWindowService) === null || _this$_popoutWindowSe18 === void 0 ? void 0 : _this$_popoutWindowSe18.findByGroup(sourceGroup);
+						const popoutGroup = (_this$_popoutWindowSe20 = this._popoutWindowService) === null || _this$_popoutWindowSe20 === void 0 ? void 0 : _this$_popoutWindowSe20.findByGroup(sourceGroup);
 						if (!popoutGroup) return;
 						const removedPanel = this.movingLock(() => popoutGroup.popoutGroup.model.removePanel(popoutGroup.popoutGroup.panels[0], {
 							skipSetActive: true,
@@ -18087,11 +18573,11 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 						break;
 					}
 					case "popout": {
-						var _this$_popoutWindowSe19, _this$_popoutWindowSe20;
-						const selectedPopoutGroup = (_this$_popoutWindowSe19 = this._popoutWindowService) === null || _this$_popoutWindowSe19 === void 0 ? void 0 : _this$_popoutWindowSe19.findByGroup(from);
+						var _this$_popoutWindowSe21, _this$_popoutWindowSe22;
+						const selectedPopoutGroup = (_this$_popoutWindowSe21 = this._popoutWindowService) === null || _this$_popoutWindowSe21 === void 0 ? void 0 : _this$_popoutWindowSe21.findByGroup(from);
 						if (!selectedPopoutGroup) throw new Error("dockview: failed to find popout group");
 						if (this.detachFromNestedWindow(from)) break;
-						(_this$_popoutWindowSe20 = this._popoutWindowService) === null || _this$_popoutWindowSe20 === void 0 || _this$_popoutWindowSe20.remove(selectedPopoutGroup);
+						(_this$_popoutWindowSe22 = this._popoutWindowService) === null || _this$_popoutWindowSe22 === void 0 || _this$_popoutWindowSe22.remove(selectedPopoutGroup);
 						if (selectedPopoutGroup.referenceGroup) {
 							const referenceGroup = this.getPanel(selectedPopoutGroup.referenceGroup);
 							if (referenceGroup && !referenceGroup.api.isVisible) this.doRemoveGroup(referenceGroup, { skipActive: true });
@@ -18256,8 +18742,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		* window-local containers).
 		*/
 		setGroupLocationForRoot(group, gridview) {
-			var _this$_popoutWindowSe21;
-			const popout = (_this$_popoutWindowSe21 = this._popoutWindowService) === null || _this$_popoutWindowSe21 === void 0 ? void 0 : _this$_popoutWindowSe21.entries.find((entry) => entry.gridview === gridview);
+			var _this$_popoutWindowSe23;
+			const popout = (_this$_popoutWindowSe23 = this._popoutWindowService) === null || _this$_popoutWindowSe23 === void 0 ? void 0 : _this$_popoutWindowSe23.entries.find((entry) => entry.gridview === gridview);
 			if (popout) {
 				if (group.model.renderContainer !== popout.overlayRenderContainer) group.model.renderContainer = popout.overlayRenderContainer;
 				group.model.dropTargetContainer = popout.dropTargetContainer;
@@ -18277,10 +18763,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		* the nested gridview of the floating / popout window it lives in.
 		*/
 		getGridviewForGroup(group) {
-			var _this$_floatingGroupS10, _this$_popoutWindowSe22;
+			var _this$_floatingGroupS10, _this$_popoutWindowSe24;
 			const floating = (_this$_floatingGroupS10 = this._floatingGroupService) === null || _this$_floatingGroupS10 === void 0 ? void 0 : _this$_floatingGroupS10.findByGroup(group);
 			if (floating) return floating.gridview;
-			const popout = (_this$_popoutWindowSe22 = this._popoutWindowService) === null || _this$_popoutWindowSe22 === void 0 ? void 0 : _this$_popoutWindowSe22.findByGroup(group);
+			const popout = (_this$_popoutWindowSe24 = this._popoutWindowService) === null || _this$_popoutWindowSe24 === void 0 ? void 0 : _this$_popoutWindowSe24.findByGroup(group);
 			if (popout) return popout.gridview;
 			return this.gridview;
 		}
@@ -18302,13 +18788,13 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			return location.length % 2 == 1 ? rootOrientation : orthogonal(rootOrientation);
 		}
 		updateTheme() {
-			var _this$_options$theme, _this$_shellThemeClas, _theme$gap, _this$_popoutWindowSe23, _this$_popoutWindowSe24, _this$_shellManager5, _theme$edgeGroupColla, _theme$tabGroupIndica;
+			var _this$_options$theme, _this$_shellThemeClas, _theme$gap, _this$_popoutWindowSe25, _this$_popoutWindowSe26, _this$_shellManager5, _theme$edgeGroupColla, _theme$tabGroupIndica;
 			const theme = (_this$_options$theme = this._options.theme) !== null && _this$_options$theme !== void 0 ? _this$_options$theme : themeAbyss;
 			(_this$_shellThemeClas = this._shellThemeClassnames) === null || _this$_shellThemeClas === void 0 || _this$_shellThemeClas.setClassNames(theme.className);
 			const gap = (_theme$gap = theme.gap) !== null && _theme$gap !== void 0 ? _theme$gap : 0;
 			this.gridview.margin = gap;
 			for (const floating of this.floatingGroups) floating.gridview.margin = gap;
-			for (const entry of (_this$_popoutWindowSe23 = (_this$_popoutWindowSe24 = this._popoutWindowService) === null || _this$_popoutWindowSe24 === void 0 ? void 0 : _this$_popoutWindowSe24.entries) !== null && _this$_popoutWindowSe23 !== void 0 ? _this$_popoutWindowSe23 : []) entry.gridview.margin = gap;
+			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;
 			(_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;
@@ -18377,6 +18863,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			}), this.onDidActiveChange((event) => {
 				this._onDidActiveGroupChange.fire(event);
 			}));
+			this.layoutFromElement();
 		}
 		updateOptions(options) {
 			super.updateOptions(options);
@@ -18622,6 +19109,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			this._options = options;
 			this.splitview = new Splitview(this.element, options);
 			this.addDisposables(this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
+			this.layoutFromElement();
 		}
 		updateOptions(options) {
 			if ("className" in options) {
@@ -19303,11 +19791,13 @@ exports.createSplitview = createSplitview;
 exports.defineModule = defineModule;
 exports.directionToPosition = directionToPosition;
 exports.findRelativeZIndexParent = findRelativeZIndexParent;
+exports.getActiveElement = getActiveElement;
 exports.getDirectionOrientation = getDirectionOrientation;
 exports.getGridLocation = getGridLocation;
 exports.getLocationOrientation = getLocationOrientation;
 exports.getPaneData = getPaneData;
 exports.getPanelData = getPanelData;
+exports.getPopoutUrlError = getPopoutUrlError;
 exports.getRegisteredModules = getRegisteredModules;
 exports.getRelativeLocation = getRelativeLocation;
 exports.indexInParent = indexInParent;