dockview-core 8.3.1 → 8.4.1

package/dist/package/main.esm.mjs

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 8.3.1
+ * @version 8.4.1
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -331,21 +331,29 @@ var OverflowObserver = class extends CompositeDisposable {
 	}
 };
 function watchElementResize(element, cb) {
+	const pendingFrames = /* @__PURE__ */ new Set();
 	const observer = new ResizeObserver((entires) => {
 		/**
 		* Fast browser window resize produces Error: ResizeObserver loop limit exceeded.
 		* The error isn't visible in browser console, doesn't affect functionality, but degrades performance.
 		* See https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded/58701523#58701523
 		*/
-		requestAnimationFrame(() => {
+		let ran = false;
+		let frame;
+		frame = requestAnimationFrame(() => {
+			ran = true;
+			if (frame !== void 0) pendingFrames.delete(frame);
 			const firstEntry = entires[0];
 			cb(firstEntry);
 		});
+		if (!ran) pendingFrames.add(frame);
 	});
 	observer.observe(element);
 	return { dispose: () => {
 		observer.unobserve(element);
 		observer.disconnect();
+		for (const frame of pendingFrames) cancelAnimationFrame(frame);
+		pendingFrames.clear();
 	} };
 }
 const removeClasses = (element, ...classes) => {
@@ -380,7 +388,7 @@ var FocusTracker = class extends CompositeDisposable {
 		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;
@@ -402,7 +410,7 @@ var FocusTracker = class extends CompositeDisposable {
 			}
 		};
 		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));
@@ -419,6 +427,49 @@ function quasiPreventDefault(event) {
 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;
@@ -429,6 +480,7 @@ function addStyles(document, styleSheetList, options = {}) {
 			link.href = styleSheet.href;
 			link.type = styleSheet.type;
 			link.rel = "stylesheet";
+			if (resolvedNonce) link.setAttribute("nonce", resolvedNonce);
 			document.head.appendChild(link);
 			continue;
 		}
@@ -468,6 +520,23 @@ function isInDocument(element) {
 	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;
 }
@@ -502,6 +571,38 @@ function disableIframePointEvents(rootNode = document) {
 		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 = [];
@@ -513,6 +614,11 @@ function getDockviewTheme(element) {
 	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;
@@ -624,6 +730,285 @@ function resolveOpaqueBackground(element) {
 	}
 	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
@@ -843,6 +1228,15 @@ var Splitview = class {
 	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;
 	}
@@ -967,7 +1361,7 @@ var Splitview = class {
 		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);
@@ -1691,10 +2085,18 @@ var BranchNode = class BranchNode extends CompositeDisposable {
 			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 = [];
@@ -2236,8 +2638,13 @@ var Gridview = class {
 		}
 		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;
@@ -2431,6 +2838,25 @@ var Resizable = class extends CompositeDisposable {
 			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
@@ -2531,7 +2957,10 @@ var BaseGrid = class extends Resizable {
 		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) {
@@ -3340,6 +3769,15 @@ var DockviewApi = class {
 	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;
 	}
@@ -3362,9 +3800,27 @@ var DockviewApi = class {
 	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();
@@ -4331,7 +4787,8 @@ function addGhostImage(dataTransfer, ghostElement, options) {
 	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");
@@ -4383,7 +4840,7 @@ var PointerDragController = class PointerDragController extends CompositeDisposa
 		} };
 	}
 	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();
@@ -4399,13 +4856,14 @@ var PointerDragController = class PointerDragController extends CompositeDisposa
 		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;
@@ -4442,8 +4900,7 @@ var PointerDragController = class PointerDragController extends CompositeDisposa
 		}
 	}
 	_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) {
@@ -4493,7 +4950,7 @@ var PointerDragController = class PointerDragController extends CompositeDisposa
 		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;
@@ -4503,6 +4960,8 @@ var PointerDragController = class PointerDragController extends CompositeDisposa
 		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();
@@ -4771,9 +5230,10 @@ var PointerDragSource = class extends CompositeDisposable {
 		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;
@@ -4789,7 +5249,7 @@ var PointerDragSource = class extends CompositeDisposable {
 		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;
@@ -4815,7 +5275,9 @@ var PointerDragSource = class extends CompositeDisposable {
 		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);
@@ -4860,29 +5322,51 @@ var PointerDragSource = class extends CompositeDisposable {
 */
 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();
 	}
 };
 
@@ -4919,7 +5403,8 @@ var Html5DragSource = class extends CompositeDisposable {
 				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;
@@ -5755,8 +6240,7 @@ var LongPressDetector = class extends CompositeDisposable {
 		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();
 			}
@@ -5872,7 +6356,7 @@ var Tab = class extends CompositeDisposable {
 			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 && this.group.model.getTabGroupForPanel(this.panel.id)) 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");
@@ -6485,6 +6969,7 @@ var DockviewUnhandledDragOverEvent = class extends AcceptableEvent {
 const PROPERTY_KEYS_DOCKVIEW = (() => {
 	return Object.keys({
 		disableAutoResizing: void 0,
+		proportionalLayout: void 0,
 		hideBorders: void 0,
 		singleTabMode: void 0,
 		disableFloatingGroups: void 0,
@@ -7338,10 +7823,16 @@ var TabGroupManager = class {
 			(_entry$pointerDropTar = entry.pointerDropTarget) === null || _entry$pointerDropTar === void 0 || _entry$pointerDropTar.clearOverlay();
 		}
 	}
-	snapshotChipWidths() {
-		const widths = /* @__PURE__ */ new Map();
-		for (const [groupId, entry] of this._chipRenderers) widths.set(groupId, entry.chip.element.getBoundingClientRect().width);
-		return widths;
+	/** 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;
@@ -7733,6 +8224,22 @@ var TabGroupManager = class {
 //#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
@@ -7827,14 +8334,30 @@ var TabReorderController = class extends CompositeDisposable {
 		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;
 	}
 	/**
@@ -7844,8 +8367,7 @@ var TabReorderController = class extends CompositeDisposable {
 	* `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;
@@ -7874,8 +8396,7 @@ var TabReorderController = class extends CompositeDisposable {
 		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
@@ -7939,46 +8460,46 @@ var TabReorderController = class extends CompositeDisposable {
 		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())
 		};
 	}
 	/**
@@ -8021,19 +8542,19 @@ var TabReorderController = class extends CompositeDisposable {
 		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;
 		}
@@ -8057,14 +8578,15 @@ var TabReorderController = class extends CompositeDisposable {
 		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;
@@ -8072,19 +8594,19 @@ var TabReorderController = class extends CompositeDisposable {
 			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;
@@ -8095,11 +8617,12 @@ var TabReorderController = class extends CompositeDisposable {
 		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;
@@ -8110,11 +8633,11 @@ var TabReorderController = class extends CompositeDisposable {
 			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;
 	}
@@ -8122,11 +8645,11 @@ var TabReorderController = class extends CompositeDisposable {
 	* 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 {
@@ -8140,7 +8663,7 @@ var TabReorderController = class extends CompositeDisposable {
 	* 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;
@@ -8148,7 +8671,7 @@ var TabReorderController = class extends CompositeDisposable {
 		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
@@ -8183,13 +8706,13 @@ var TabReorderController = class extends CompositeDisposable {
 	}
 	/** 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
 			};
@@ -8198,10 +8721,10 @@ var TabReorderController = class extends CompositeDisposable {
 				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,
@@ -8364,17 +8887,17 @@ var TabReorderController = class extends CompositeDisposable {
 		}
 		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
@@ -8418,7 +8941,7 @@ var TabReorderController = class extends CompositeDisposable {
 	}
 	/** 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;
@@ -8427,7 +8950,7 @@ var TabReorderController = class extends CompositeDisposable {
 			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++) {
@@ -8435,7 +8958,7 @@ var TabReorderController = class extends CompositeDisposable {
 			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);
 		}
@@ -8445,31 +8968,33 @@ var TabReorderController = class extends CompositeDisposable {
 	_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);
@@ -8494,6 +9019,7 @@ var TabReorderController = class extends CompositeDisposable {
 		}
 		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();
@@ -9088,21 +9614,21 @@ var Tabs = class extends CompositeDisposable {
 					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(() => {
@@ -9198,7 +9724,7 @@ var Tabs = class extends CompositeDisposable {
 		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();
 		}
 	}
@@ -9220,7 +9746,7 @@ var Tabs = class extends CompositeDisposable {
 		}
 		if (this._animState) {
 			this._animState.tabPositions = this.snapshotTabPositions();
-			this._animState.chipPositions = this._tabGroupManager.snapshotChipWidths();
+			this._animState.chipSizes = this._tabGroupManager.snapshotChipSizes();
 			this.applyDragOverTransforms();
 		}
 	}
@@ -9298,24 +9824,24 @@ var Tabs = class extends CompositeDisposable {
 		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);
@@ -9696,16 +10222,21 @@ var TabsContainer = class extends CompositeDisposable {
 				y: event.clientY,
 				zIndex: (relativeParent === null || relativeParent === void 0 ? void 0 : relativeParent.style.zIndex) ? `calc(${relativeParent.style.zIndex} * 2)` : void 0
 			};
-			const context = this.createOverflowRenderContext(root, anchor);
+			const { context, rowRenderers } = this.createOverflowRenderContext(root, anchor);
 			const advancedOverflow = this.accessor.advancedOverflowService;
-			if (advancedOverflow) advancedOverflow.renderOverflow({
-				group: this.group,
-				overflowTabs: [...this._overflowTabs],
-				overflowTabGroups: [...this._overflowTabGroups],
-				pinnedOverflowTabs: [...this._overflowPinnedTabs],
-				context
-			});
-			else context.open(this.renderFreeOverflowList(context));
+			try {
+				if (advancedOverflow) advancedOverflow.renderOverflow({
+					group: this.group,
+					overflowTabs: [...this._overflowTabs],
+					overflowTabGroups: [...this._overflowTabGroups],
+					pinnedOverflowTabs: [...this._overflowPinnedTabs],
+					context
+				});
+				else context.open(this.renderFreeOverflowList(context));
+			} catch (err) {
+				rowRenderers.dispose();
+				throw err;
+			}
 		}));
 	}
 	/**
@@ -9726,6 +10257,7 @@ var TabsContainer = class extends CompositeDisposable {
 			if (overflowGroupSet.has(tg.id)) for (const pid of tg.panelIds) panelToGroup.set(pid, tg);
 		}
 		const popup = () => this.accessor.getPopupServiceForGroup(this.group);
+		const rowRenderers = new CompositeDisposable();
 		const buildGroupHeader = (tg) => {
 			const groupHeader = document.createElement("div");
 			groupHeader.className = "dv-tabs-overflow-group-header";
@@ -9755,69 +10287,87 @@ var TabsContainer = class extends CompositeDisposable {
 			return groupHeader;
 		};
 		return {
-			overflowGroupIdForPanel: (panelId) => {
-				var _panelToGroup$get;
-				return (_panelToGroup$get = panelToGroup.get(panelId)) === null || _panelToGroup$get === void 0 ? void 0 : _panelToGroup$get.id;
-			},
-			buildGroupHeader: (tabGroupId) => {
-				const tg = groupById.get(tabGroupId);
-				if (!tg || !overflowGroupSet.has(tg.id)) return;
-				return buildGroupHeader(tg);
-			},
-			buildPinnedHeader: () => {
-				const header = document.createElement("div");
-				header.className = "dv-tabs-overflow-group-header dv-tabs-overflow-pinned-header";
-				const glyph = createPinButton();
-				glyph.classList.add("dv-tabs-overflow-pinned-icon");
-				header.appendChild(glyph);
-				const labelSpan = document.createElement("span");
-				labelSpan.className = "dv-tabs-overflow-group-label";
-				labelSpan.textContent = "Pinned";
-				header.appendChild(labelSpan);
-				return header;
-			},
-			buildRow: (panelId) => {
-				const panel = this.group.panels.find((p) => p.id === panelId);
-				if (!panel) return;
-				const tab = this.tabs.tabs.find((t) => t.panel.id === panelId);
-				const tg = panelToGroup.get(panelId);
-				const child = panel.view.createTabRenderer("headerOverflow").element;
-				const wrapper = document.createElement("div");
-				toggleClass(wrapper, "dv-tab", true);
-				toggleClass(wrapper, "dv-active-tab", panel.api.isActive);
-				toggleClass(wrapper, "dv-inactive-tab", !panel.api.isActive);
-				if (tg) toggleClass(wrapper, "dv-tab--grouped", true);
-				const doActivate = () => {
-					if (tg === null || tg === void 0 ? void 0 : tg.collapsed) tg.expand();
-					tab === null || tab === void 0 || tab.element.scrollIntoView({
-						block: "nearest",
-						inline: "nearest"
+			context: {
+				overflowGroupIdForPanel: (panelId) => {
+					var _panelToGroup$get;
+					return (_panelToGroup$get = panelToGroup.get(panelId)) === null || _panelToGroup$get === void 0 ? void 0 : _panelToGroup$get.id;
+				},
+				buildGroupHeader: (tabGroupId) => {
+					const tg = groupById.get(tabGroupId);
+					if (!tg || !overflowGroupSet.has(tg.id)) return;
+					return buildGroupHeader(tg);
+				},
+				buildPinnedHeader: () => {
+					const header = document.createElement("div");
+					header.className = "dv-tabs-overflow-group-header dv-tabs-overflow-pinned-header";
+					const glyph = createPinButton();
+					glyph.classList.add("dv-tabs-overflow-pinned-icon");
+					header.appendChild(glyph);
+					const labelSpan = document.createElement("span");
+					labelSpan.className = "dv-tabs-overflow-group-label";
+					labelSpan.textContent = "Pinned";
+					header.appendChild(labelSpan);
+					return header;
+				},
+				buildRow: (panelId) => {
+					const panel = this.group.panels.find((p) => p.id === panelId);
+					if (!panel) return;
+					const tab = this.tabs.tabs.find((t) => t.panel.id === panelId);
+					const tg = panelToGroup.get(panelId);
+					const tabComponent = panel.view.createTabRenderer("headerOverflow");
+					let rowDisposed = false;
+					const disposeRow = Disposable.from(() => {
+						if (!rowDisposed) {
+							var _tabComponent$dispose;
+							rowDisposed = true;
+							(_tabComponent$dispose = tabComponent.dispose) === null || _tabComponent$dispose === void 0 || _tabComponent$dispose.call(tabComponent);
+						}
 					});
-					this.accessor.withOrigin("user", () => panel.api.setActive());
-				};
-				wrapper.addEventListener("click", (event) => {
-					popup().close();
-					if (event.defaultPrevented) return;
-					doActivate();
-				});
-				wrapper.appendChild(child);
-				return {
-					element: wrapper,
-					panel,
-					activate: () => {
+					if (rowRenderers.isDisposed) disposeRow.dispose();
+					else rowRenderers.addDisposables(disposeRow);
+					const child = tabComponent.element;
+					const wrapper = document.createElement("div");
+					toggleClass(wrapper, "dv-tab", true);
+					toggleClass(wrapper, "dv-active-tab", panel.api.isActive);
+					toggleClass(wrapper, "dv-inactive-tab", !panel.api.isActive);
+					if (tg) toggleClass(wrapper, "dv-tab--grouped", true);
+					const doActivate = () => {
+						if (tg === null || tg === void 0 ? void 0 : tg.collapsed) tg.expand();
+						tab === null || tab === void 0 || tab.element.scrollIntoView({
+							block: "nearest",
+							inline: "nearest"
+						});
+						this.accessor.withOrigin("user", () => panel.api.setActive());
+					};
+					wrapper.addEventListener("click", (event) => {
 						popup().close();
+						if (event.defaultPrevented) return;
 						doActivate();
-					}
-				};
-			},
-			open: (body) => {
-				popup().openPopover(body, anchor);
+					});
+					wrapper.appendChild(child);
+					return {
+						element: wrapper,
+						panel,
+						activate: () => {
+							popup().close();
+							doActivate();
+						},
+						dispose: () => {
+							rowRenderers.removeDisposable(disposeRow);
+							disposeRow.dispose();
+						}
+					};
+				},
+				open: (body) => {
+					popup().openPopover(body, anchor, { onClose: () => rowRenderers.dispose() });
+				},
+				close: () => popup().close(),
+				focusTrigger: () => {
+					root.tabIndex = -1;
+					root.focus();
+				}
 			},
-			close: () => popup().close(),
-			focusTrigger: () => {
-				root.tabIndex = -1;
-				root.focus();
-			}
+			rowRenderers
 		};
 	}
 	/**
@@ -10073,8 +10623,10 @@ var DockviewGroupPanelModel = class extends CompositeDisposable {
 		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;
@@ -10732,6 +11284,7 @@ var DockviewGroupPanelModel = class extends CompositeDisposable {
 		this.tabsContainer.setRightActionsElement(element);
 	}
 	setActive(isGroupActive, force = false) {
+		if (this.isDisposed) return;
 		if (!force && this.isActive === isGroupActive) return;
 		this._isGroupActive = isGroupActive;
 		toggleClass(this.container, "dv-active-group", isGroupActive);
@@ -12985,6 +13538,12 @@ var PopoutWindowService = class {
 		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 = () => {
@@ -12999,8 +13558,7 @@ var PopoutWindowService = class {
 					resolve();
 					return;
 				}
-				work();
-				resolve();
+				Promise.resolve(work()).then(() => resolve(), () => resolve());
 			}, delayMs);
 			this._restorationCleanups.add(cleanup);
 		});
@@ -13771,13 +14329,14 @@ var ContextMenuController = class {
 	* menu passes the `tabGroup`. No-op when no renderer could be created (no
 	* factory configured, or the factory declined the component).
 	*/
-	appendComponentItem(menuEl, item, identity, group, close) {
+	appendComponentItem(menuEl, item, identity, group, close, renderers) {
 		var _this$accessor$option4, _this$accessor$option5;
 		const renderer = (_this$accessor$option4 = (_this$accessor$option5 = this.accessor.options).createContextMenuItemComponent) === null || _this$accessor$option4 === void 0 ? void 0 : _this$accessor$option4.call(_this$accessor$option5, {
 			id: nextContextMenuItemId(),
 			component: item.component
 		});
 		if (!renderer) return;
+		renderers.addDisposables(renderer);
 		renderer.init(_objectSpread2(_objectSpread2({}, identity), {}, {
 			group,
 			api: this.accessor.api,
@@ -13828,9 +14387,9 @@ var ContextMenuController = class {
 	* default row; an item carrying none of the three renders nothing. Shared
 	* by both menus, which differ only in `identity`.
 	*/
-	appendConfigItem(menuEl, item, identity, group, close) {
+	appendConfigItem(menuEl, item, identity, group, close, renderers) {
 		if (item.element) menuEl.appendChild(item.element);
-		else if (item.component) this.appendComponentItem(menuEl, item, identity, group, close);
+		else if (item.component) this.appendComponentItem(menuEl, item, identity, group, close, renderers);
 		else if (item.label) menuEl.appendChild(buildItem(item.label, close, () => {
 			var _item$action;
 			return (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(item);
@@ -13842,22 +14401,28 @@ var ContextMenuController = class {
 		event.preventDefault();
 		const popupService = this.accessor.getPopupServiceForGroup(group);
 		const close = () => popupService.close();
+		const renderers = new CompositeDisposable();
 		const menuEl = document.createElement("div");
 		menuEl.className = "dv-context-menu";
 		menuEl.setAttribute("role", "menu");
-		for (const item of items) {
-			if (isItemConfig(item)) {
-				this.appendConfigItem(menuEl, item, { panel }, group, close);
-				continue;
+		try {
+			for (const item of items) {
+				if (isItemConfig(item)) {
+					this.appendConfigItem(menuEl, item, { panel }, group, close, renderers);
+					continue;
+				}
+				const el = this.buildBuiltInTabItem(item, panel, group, close);
+				if (el) menuEl.appendChild(el);
 			}
-			const el = this.buildBuiltInTabItem(item, panel, group, close);
-			if (el) menuEl.appendChild(el);
+		} catch (err) {
+			renderers.dispose();
+			throw err;
 		}
 		popupService.openPopover(menuEl, {
 			x: event.clientX,
 			y: event.clientY,
 			zIndex: popoverZIndexFor(event.target, group)
-		});
+		}, { onClose: () => renderers.dispose() });
 	}
 	showForChip(tabGroup, group, event) {
 		if (!this.accessor.options.getTabGroupChipContextMenuItems) return;
@@ -13871,22 +14436,28 @@ var ContextMenuController = class {
 		event.preventDefault();
 		const popupService = this.accessor.getPopupServiceForGroup(group);
 		const close = () => popupService.close();
+		const renderers = new CompositeDisposable();
 		const menuEl = document.createElement("div");
 		menuEl.className = "dv-context-menu";
 		menuEl.setAttribute("role", "menu");
-		for (const item of items) if (item === "separator") menuEl.appendChild(buildSeparator());
-		else if (item === "rename") menuEl.appendChild(buildRenameInput(tabGroup));
-		else if (item === "colorPicker") menuEl.appendChild(buildColorPicker(tabGroup, this.accessor.tabGroupColorPalette));
-		else if (item === "collapse") menuEl.appendChild(this.buildCollapseItem(tabGroup, close));
-		else if (item === "close") menuEl.appendChild(buildItem("Close All", close, () => {
-			group.panels.filter((p) => tabGroup.containsPanel(p.id)).forEach((p) => p.api.close());
-		}));
-		else if (isItemConfig(item)) this.appendConfigItem(menuEl, item, { tabGroup }, group, close);
+		try {
+			for (const item of items) if (item === "separator") menuEl.appendChild(buildSeparator());
+			else if (item === "rename") menuEl.appendChild(buildRenameInput(tabGroup));
+			else if (item === "colorPicker") menuEl.appendChild(buildColorPicker(tabGroup, this.accessor.tabGroupColorPalette));
+			else if (item === "collapse") menuEl.appendChild(this.buildCollapseItem(tabGroup, close));
+			else if (item === "close") menuEl.appendChild(buildItem("Close All", close, () => {
+				group.panels.filter((p) => tabGroup.containsPanel(p.id)).forEach((p) => p.api.close());
+			}));
+			else if (isItemConfig(item)) this.appendConfigItem(menuEl, item, { tabGroup }, group, close, renderers);
+		} catch (err) {
+			renderers.dispose();
+			throw err;
+		}
 		popupService.openPopover(menuEl, {
 			x: event.clientX,
 			y: event.clientY,
 			zIndex: popoverZIndexFor(event.target, group)
-		});
+		}, { onClose: () => renderers.dispose() });
 	}
 };
 const ContextMenuModule = defineModule({
@@ -14176,6 +14747,7 @@ var OverlayRenderContainer = class extends CompositeDisposable {
 		const observerDisposable = new MutableDisposable();
 		const correctLayerPosition = () => {
 			if (panel.api.location.type === "floating") queueMicrotask(() => {
+				if (disposable.isDisposed) return;
 				const floatingGroup = this.accessor.getFloatingWindowForGroup(panel.api.group);
 				if (!floatingGroup) return;
 				const element = floatingGroup.overlay.element;
@@ -14258,188 +14830,6 @@ var OverlayRenderContainer = class extends CompositeDisposable {
 	}
 };
 
-//#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 {
@@ -14483,8 +14873,8 @@ function isCoarsePrimaryInput(win) {
 * 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
@@ -14504,9 +14894,7 @@ function createDismissableLayer(options) {
 	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();
@@ -14525,17 +14913,45 @@ function createDismissableLayer(options) {
 		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;
 }
@@ -14566,7 +14982,7 @@ var PopupService = class extends CompositeDisposable {
 		newRoot.prepend(this._element);
 		this._root = newRoot;
 	}
-	openPopover(element, position) {
+	openPopover(element, position, options) {
 		var _position$zIndex;
 		this.close();
 		const wrapper = this._window.document.createElement("div");
@@ -14581,14 +14997,14 @@ var PopupService = class extends CompositeDisposable {
 		this._element.appendChild(wrapper);
 		this._active = wrapper;
 		const POINTERDOWN_GRACE_MS = 200;
-		this._activeDisposable.value = createDismissableLayer({
+		this._activeDisposable.value = new CompositeDisposable(createDismissableLayer({
 			window: this._window,
 			onDismiss: () => this.close(),
 			elements: () => this._active ? [this._active] : [],
 			keys: ["Enter"],
 			pointerDownGraceMs: POINTERDOWN_GRACE_MS,
 			resize: true
-		});
+		}), (options === null || options === void 0 ? void 0 : options.onClose) ? Disposable.from(options.onClose) : Disposable.NONE);
 		this._window.requestAnimationFrame(() => {
 			shiftAbsoluteElementIntoView(wrapper, this._root);
 		});
@@ -15028,6 +15444,24 @@ var ShellManager = class {
 		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();
@@ -15287,6 +15721,15 @@ var ShellManager = class {
 
 //#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");
@@ -15338,6 +15781,10 @@ var DockviewComponent = class extends BaseGrid {
 	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;
 	}
@@ -15847,9 +16294,9 @@ var DockviewComponent = class extends BaseGrid {
 		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,
@@ -15869,7 +16316,9 @@ var DockviewComponent = class extends BaseGrid {
 		this._onWillDrop = new Emitter();
 		this.onWillDrop = this._onWillDrop.event;
 		this._mutationDepth = 0;
+		this._syncMutationDepth = 0;
 		this._pendingLocationChanges = /* @__PURE__ */ new Map();
+		this._openingPopoutWindows = /* @__PURE__ */ new Set();
 		this._origin = "user";
 		this._originDepth = 0;
 		this._onWillMutateLayout = new Emitter();
@@ -15896,6 +16345,8 @@ var DockviewComponent = class extends BaseGrid {
 		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();
@@ -15951,6 +16402,10 @@ var DockviewComponent = class extends BaseGrid {
 			});
 		}));
 		this.popupService = new PopupService(this.element);
+		this.addDisposables(this.popupService, Disposable.from(() => {
+			for (const opening of this._openingPopoutWindows) opening.dispose();
+			this._openingPopoutWindows.clear();
+		}));
 		this._api = new DockviewApi(this);
 		this.disableResizing = true;
 		this.element.remove();
@@ -15997,7 +16452,7 @@ var DockviewComponent = class extends BaseGrid {
 			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;
@@ -16010,6 +16465,7 @@ var DockviewComponent = class extends BaseGrid {
 			}));
 		}), rootDropTarget.onDrop((event) => this.dockToLayoutEdge(event.nativeEvent, event.position)));
 		this._moduleRegistry.postConstruct(this);
+		this._shellManager.layoutFromElement();
 	}
 	setVisible(panel, visible) {
 		switch (panel.api.location.type) {
@@ -16079,22 +16535,42 @@ var DockviewComponent = class extends BaseGrid {
 		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) => {
+		this._openingPopoutWindows.add(popoutWindowDisposable);
+		const openError = getPopoutUrlError(popoutUrl);
+		return (openError ? Promise.resolve(null) : _window.open()).then((popoutContainer) => {
 			var _options$referenceGro, _options$overridePopo4;
-			if (_window.isDisposed) return false;
+			this._openingPopoutWindows.delete(popoutWindowDisposable);
+			if (this.isDisposed) {
+				popoutWindowDisposable.dispose();
+				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;
 			/**
@@ -16113,11 +16589,16 @@ var DockviewComponent = class extends BaseGrid {
 				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;
 			}
@@ -16275,21 +16756,23 @@ var DockviewComponent = class extends BaseGrid {
 			for (const { panel, from } of movedPanels) this.fireDidMovePanel(panel, from);
 			return true;
 		}).catch((err) => {
+			this._openingPopoutWindows.delete(popoutWindowDisposable);
 			console.error("dockview: failed to create popout.", err);
 			return false;
 		});
 	}
 	/**
-	* 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));
@@ -16523,12 +17006,13 @@ var DockviewComponent = class extends BaseGrid {
 		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 /
@@ -16601,6 +17085,12 @@ var DockviewComponent = class extends BaseGrid {
 		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;
@@ -16806,6 +17296,7 @@ var DockviewComponent = class extends BaseGrid {
 			group.dispose();
 			this._groups.delete(group.id);
 			this._onDidRemoveGroup.fire(group);
+			this.activateFallbackGroupIfRemoved(group);
 		});
 	}
 	setEdgeGroupCollapsed(group, collapsed) {
@@ -16908,14 +17399,14 @@ var DockviewComponent = class extends BaseGrid {
 	* @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,
@@ -16954,8 +17445,8 @@ var DockviewComponent = class extends BaseGrid {
 		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();
@@ -17002,6 +17493,7 @@ var DockviewComponent = class extends BaseGrid {
 				const record = this._groups.get(temporaryGroup.api.id);
 				this._groups.delete(temporaryGroup.api.id);
 				temporaryGroupDisposables.push(Disposable.from(() => {
+					var _this$headerActionsSe2;
 					/**
 					* Reclaim the group's own resources, never its panels.
 					* Staging is driven by the ids in `data.panels` while
@@ -17019,6 +17511,7 @@ var DockviewComponent = class extends BaseGrid {
 						for (const panel of temporaryGroup.panels.slice()) temporaryGroup.model.removePanel(panel);
 					});
 					record === null || record === void 0 || record.disposable.dispose();
+					(_this$headerActionsSe2 = this.headerActionsService) === null || _this$headerActionsSe2 === void 0 || _this$headerActionsSe2.disposeGroup(temporaryGroup);
 					temporaryGroup.dispose();
 				}));
 				return temporaryGroup;
@@ -17074,7 +17567,7 @@ var DockviewComponent = class extends BaseGrid {
 		} 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) => {
@@ -17139,7 +17632,7 @@ var DockviewComponent = class extends BaseGrid {
 			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);
@@ -17307,15 +17800,13 @@ var DockviewComponent = class extends BaseGrid {
 				}
 			}
 			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();
@@ -17550,7 +18041,7 @@ var DockviewComponent = class extends BaseGrid {
 	* 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);
@@ -17559,7 +18050,7 @@ var DockviewComponent = class extends BaseGrid {
 			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;
@@ -17616,8 +18107,8 @@ var DockviewComponent = class extends BaseGrid {
 			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" };
@@ -17634,7 +18125,7 @@ var DockviewComponent = class extends BaseGrid {
 				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]);
@@ -17661,10 +18152,10 @@ var DockviewComponent = class extends BaseGrid {
 	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) {
@@ -17685,9 +18176,12 @@ var DockviewComponent = class extends BaseGrid {
 	*/
 	mutation(kind, func) {
 		const close = this.openMutation(kind);
+		this._syncMutationDepth++;
 		try {
 			return func();
 		} finally {
+			this._syncMutationDepth--;
+			if (this._syncMutationDepth === 0) this.releaseDisposedActiveGroup();
 			close();
 		}
 	}
@@ -17734,6 +18228,7 @@ var DockviewComponent = class extends BaseGrid {
 		return () => {
 			this._mutationDepth--;
 			if (this._mutationDepth === 0) {
+				this.releaseDisposedActiveGroup();
 				this.flushLocationChanges();
 				this._onDidMutateLayout.fire({
 					kind,
@@ -17742,6 +18237,11 @@ var DockviewComponent = class extends BaseGrid {
 			}
 		};
 	}
+	/** Covers removals with `skipActive` that disposed the active group. */
+	releaseDisposedActiveGroup() {
+		var _this$_activeGroup;
+		if (!this.isDisposed && ((_this$_activeGroup = this._activeGroup) === null || _this$_activeGroup === void 0 ? void 0 : _this$_activeGroup.model.isDisposed)) this.activateFallbackGroupIfRemoved(this._activeGroup);
+	}
 	/**
 	* Coalesce a panel's `onDidLocationChange` to the end of the enclosing
 	* transaction, or fire it immediately when no transaction is in flight.
@@ -17879,7 +18379,7 @@ var DockviewComponent = class extends BaseGrid {
 				skipSetActiveGroup: true
 			}));
 			if (!removedPanel) throw new Error(`dockview: No panel with id ${sourceItemId}`);
-			if (!options.keepEmptyGroups && sourceGroup.model.size === 0) this.doRemoveGroup(sourceGroup, { skipActive: true });
+			if (!options.keepEmptyGroups && sourceGroup.model.size === 0 && sourceGroup !== destinationGroup) this.doRemoveGroup(sourceGroup, { skipActive: true });
 			const isDestinationGroupEmpty = destinationGroup.model.size === 0;
 			this.movingLock(() => {
 				var _options$skipSetActiv;
@@ -17914,7 +18414,7 @@ var DockviewComponent = class extends BaseGrid {
 					}
 				}
 				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
@@ -17929,7 +18429,7 @@ var DockviewComponent = class extends BaseGrid {
 					* 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,
@@ -18044,6 +18544,7 @@ var DockviewComponent = class extends BaseGrid {
 		const from = options.from.group;
 		const to = options.to.group;
 		const target = options.to.position;
+		if (target === "center" && from === to) return;
 		let source = from;
 		let mergedPanels;
 		if (target === "center") {
@@ -18138,11 +18639,11 @@ var DockviewComponent = class extends BaseGrid {
 					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 });
@@ -18307,8 +18808,8 @@ var DockviewComponent = class extends BaseGrid {
 	* 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;
@@ -18328,10 +18829,10 @@ var DockviewComponent = class extends BaseGrid {
 	* 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;
 	}
@@ -18353,13 +18854,13 @@ var DockviewComponent = class extends BaseGrid {
 		return location.length % 2 == 1 ? rootOrientation : orthogonal(rootOrientation);
 	}
 	updateTheme() {
-		var _this$_options$theme, _this$_shellThemeClas, _theme$gap, _this$_popoutWindowSe23, _this$_popoutWindowSe24, _this$_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;
@@ -18428,6 +18929,7 @@ var GridviewComponent = class extends BaseGrid {
 		}), this.onDidActiveChange((event) => {
 			this._onDidActiveGroupChange.fire(event);
 		}));
+		this.layoutFromElement();
 	}
 	updateOptions(options) {
 		super.updateOptions(options);
@@ -18673,6 +19175,7 @@ var SplitviewComponent = class extends Resizable {
 		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) {
@@ -19073,6 +19576,7 @@ var PaneviewComponent = class extends Resizable {
 		const queue = [];
 		const width = this.width;
 		const height = this.height;
+		this.paneview.dispose();
 		this.paneview = new Paneview(this.element, {
 			orientation: "VERTICAL",
 			descriptor: {
@@ -19136,7 +19640,11 @@ var PaneviewComponent = class extends Resizable {
 	clear() {
 		for (const [_, value] of this._viewDisposables.entries()) value.dispose();
 		this._viewDisposables.clear();
+		const width = this.width;
+		const height = this.height;
 		this.paneview.dispose();
+		this.paneview = new Paneview(this.element, { orientation: "VERTICAL" });
+		this.layout(width, height);
 	}
 	doAddPanel(panel) {
 		const disposable = new CompositeDisposable(panel.onDidDrop((event) => {
@@ -19267,4 +19775,4 @@ function createPaneview(element, options) {
 }
 
 //#endregion
-export { AdvancedDnDModule, AdvancedDnDService, BaseGrid, ContentContainer, ContextMenuController, ContextMenuModule, DEFAULT_TAB_GROUP_COLORS, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDidDropEvent, Disposable as DockviewDisposable, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DockviewWillShowOverlayLocationEvent, DraggablePaneviewPanel, EdgeGroupModule, FloatingGroupModule, Gridview, GridviewApi, GridviewComponent, GridviewPanel, LayoutPriority, LiveRegionModule, LocalSelectionTransfer, OVERFLOW_MAX_TAB_ROWS_VARIABLE, OVERFLOW_WRAP_TABS_CAPPED_CLASS, OVERFLOW_WRAP_TABS_CLASS, OVERFLOW_WRAP_TABS_VERTICAL_TAB_HEIGHT_VARIABLE, Orientation, PROPERTY_KEYS_DOCKVIEW, PROPERTY_KEYS_GRIDVIEW, PROPERTY_KEYS_PANEVIEW, PROPERTY_KEYS_SPLITVIEW, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewUnhandledDragOverEvent, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, Tab, TabGroupChipsModule, TabGroupChipsService, TabGroupColorPalette, applyTabGroupAccent, clearRegisteredModules, createCloseButton, createDismissableLayer, createDockview, createGridview, createPaneview, createPinButton, createSplitview, defineModule, directionToPosition, findRelativeZIndexParent, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRegisteredModules, getRelativeLocation, indexInParent, isAnyEdgeGroupEnabled, isEdgeGroupEnabled, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, orthogonal, positionToDirection, prefersReducedMotion, registerModules, resolveMessages, resolveOpaqueBackground, resolveTabGroupAccent, themeAbyss, themeAbyssSpaced, themeCatppuccinMocha, themeCatppuccinMochaSpaced, themeDark, themeDracula, themeGithubDark, themeGithubDarkSpaced, themeGithubLight, themeGithubLightSpaced, themeLight, themeLightSpaced, themeMonokai, themeNord, themeNordSpaced, themeSolarizedLight, themeSolarizedLightSpaced, themeVisualStudio, toTarget };
+export { AdvancedDnDModule, AdvancedDnDService, BaseGrid, ContentContainer, ContextMenuController, ContextMenuModule, DEFAULT_TAB_GROUP_COLORS, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDidDropEvent, Disposable as DockviewDisposable, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DockviewWillShowOverlayLocationEvent, DraggablePaneviewPanel, EdgeGroupModule, FloatingGroupModule, Gridview, GridviewApi, GridviewComponent, GridviewPanel, LayoutPriority, LiveRegionModule, LocalSelectionTransfer, OVERFLOW_MAX_TAB_ROWS_VARIABLE, OVERFLOW_WRAP_TABS_CAPPED_CLASS, OVERFLOW_WRAP_TABS_CLASS, OVERFLOW_WRAP_TABS_VERTICAL_TAB_HEIGHT_VARIABLE, Orientation, PROPERTY_KEYS_DOCKVIEW, PROPERTY_KEYS_GRIDVIEW, PROPERTY_KEYS_PANEVIEW, PROPERTY_KEYS_SPLITVIEW, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewUnhandledDragOverEvent, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, Tab, TabGroupChipsModule, TabGroupChipsService, TabGroupColorPalette, applyTabGroupAccent, clearRegisteredModules, createCloseButton, createDismissableLayer, createDockview, createGridview, createPaneview, createPinButton, createSplitview, defineModule, directionToPosition, findRelativeZIndexParent, getActiveElement, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getPopoutUrlError, getRegisteredModules, getRelativeLocation, indexInParent, isAnyEdgeGroupEnabled, isEdgeGroupEnabled, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, orthogonal, positionToDirection, prefersReducedMotion, registerModules, resolveMessages, resolveOpaqueBackground, resolveTabGroupAccent, themeAbyss, themeAbyssSpaced, themeCatppuccinMocha, themeCatppuccinMochaSpaced, themeDark, themeDracula, themeGithubDark, themeGithubDarkSpaced, themeGithubLight, themeGithubLightSpaced, themeLight, themeLightSpaced, themeMonokai, themeNord, themeNordSpaced, themeSolarizedLight, themeSolarizedLightSpaced, themeVisualStudio, toTarget };