dockview-core 6.6.1 → 7.0.2

package/dist/cjs/dockview/dockviewComponent.js

@@ -65,7 +65,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DockviewComponent = void 0;
 var gridview_1 = require("../gridview/gridview");
 var droptarget_1 = require("../dnd/droptarget");
-var backend_1 = require("../dnd/backend");
 var array_1 = require("../array");
 var dockviewPanel_1 = require("./dockviewPanel");
 var lifecycle_1 = require("../lifecycle");
@@ -84,21 +83,18 @@ var dockviewPanelModel_1 = require("./dockviewPanelModel");
 var dataTransfer_1 = require("../dnd/dataTransfer");
 var overlay_1 = require("../overlay/overlay");
 var dom_1 = require("../dom");
-var dockviewFloatingGroupPanel_1 = require("./dockviewFloatingGroupPanel");
+var floatingTitleBar_1 = require("./components/titlebar/floatingTitleBar");
+var modules_1 = require("./modules");
+var allModules_1 = require("./allModules");
 var constants_1 = require("../constants");
 var overlayRenderContainer_1 = require("../overlay/overlayRenderContainer");
 var popoutWindow_1 = require("../popoutWindow");
 var strictEventsSequencing_1 = require("./strictEventsSequencing");
 var popupService_1 = require("./components/popupService");
-var contextMenu_1 = require("./contextMenu");
 var dropTargetAnchorContainer_1 = require("../dnd/dropTargetAnchorContainer");
 var theme_1 = require("./theme");
 var dockviewShell_1 = require("./dockviewShell");
 var tabGroupAccent_1 = require("./tabGroupAccent");
-var DEFAULT_ROOT_OVERLAY_MODEL = {
-    activationSize: { type: 'pixels', value: 10 },
-    size: { type: 'pixels', value: 20 },
-};
 function buildTabGroupColorPalette(options) {
     var _a;
     var entries = (_a = options.tabGroupColors) !== null && _a !== void 0 ? _a : tabGroupAccent_1.DEFAULT_TAB_GROUP_COLORS;
@@ -119,10 +115,37 @@ function moveGroupWithoutDestroying(options) {
         });
     });
 }
+var _hasWarnedUsingCoreDirectly = false;
+/**
+ * `dockview-core` is an internal package. The public `dockview` package calls
+ * `markDockviewPackageLoaded()` on import; if that marker is absent the consumer
+ * is using `dockview-core` directly, so emit a one-time console warning
+ * steering them to `dockview`.
+ *
+ * Suppressed in production builds: it is a development-time nudge and most
+ * bundlers inline `process.env.NODE_ENV` so the branch is dropped entirely. The
+ * `typeof process` guard keeps this safe in plain browser/UMD contexts where
+ * `process` is undefined.
+ */
+function warnIfUsingCoreDirectly() {
+    if (typeof process !== 'undefined' &&
+        process.env &&
+        process.env.NODE_ENV === 'production') {
+        return;
+    }
+    if (_hasWarnedUsingCoreDirectly || (0, modules_1.isDockviewPackageLoaded)()) {
+        return;
+    }
+    _hasWarnedUsingCoreDirectly = true;
+    console.warn('dockview: do not use "dockview-core" directly — it is an internal ' +
+        'package. Use the "dockview" package, the JavaScript version of ' +
+        'dockview, instead. This notice is shown once.');
+}
 var DockviewComponent = /** @class */ (function (_super) {
     __extends(DockviewComponent, _super);
     function DockviewComponent(container, options) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var e_1, _a;
+        var _b, _c, _d, _e, _f;
         var _this = _super.call(this, container, {
             proportionalLayout: true,
             orientation: splitview_1.Orientation.HORIZONTAL,
@@ -131,13 +154,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 : undefined,
             disableAutoResizing: options.disableAutoResizing,
             locked: options.locked,
-            margin: (_b = (_a = options.theme) === null || _a === void 0 ? void 0 : _a.gap) !== null && _b !== void 0 ? _b : 0,
+            margin: (_c = (_b = options.theme) === null || _b === void 0 ? void 0 : _b.gap) !== null && _c !== void 0 ? _c : 0,
             className: options.className,
         }) || this;
         _this.nextGroupId = (0, math_1.sequentialNumberGenerator)();
         _this._deserializer = new deserializer_1.DefaultDockviewDeserialzier(_this);
-        _this._watermark = null;
-        _this._popoutPopupServices = new Map();
+        _this._moduleRegistry = new modules_1.ModuleRegistry();
         _this._onWillDragPanel = new events_1.Emitter();
         _this.onWillDragPanel = _this._onWillDragPanel.event;
         _this._onWillDragGroup = new events_1.Emitter();
@@ -146,10 +168,25 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this.onDidDrop = _this._onDidDrop.event;
         _this._onWillDrop = new events_1.Emitter();
         _this.onWillDrop = _this._onWillDrop.event;
+        // Transaction boundary bracketing each top-level structural mutation.
+        // Compound operations (e.g. a drag that relocates a panel) nest via the
+        // depth counter and bracket as a single transaction. See `mutation()`.
+        _this._mutationDepth = 0;
+        // Current operation origin. Defaults to `'user'`; the DockviewApi boundary
+        // flips it to `'api'` for the duration of a programmatic call via
+        // `withOrigin`. Nested operations inherit the outermost origin (tracked by
+        // `_originDepth`, independent of mutation bracketing so it also covers
+        // active-panel changes that are not structural mutations).
+        _this._origin = 'user';
+        _this._originDepth = 0;
+        _this._onWillMutateLayout = new events_1.Emitter();
+        _this.onWillMutateLayout = _this._onWillMutateLayout.event;
+        _this._onDidMutateLayout = new events_1.Emitter();
+        _this.onDidMutateLayout = _this._onDidMutateLayout.event;
         _this._onWillShowOverlay = new events_1.Emitter();
         _this.onWillShowOverlay = _this._onWillShowOverlay.event;
-        _this._onUnhandledDragOverEvent = new events_1.Emitter();
-        _this.onUnhandledDragOverEvent = _this._onUnhandledDragOverEvent.event;
+        _this._onUnhandledDragOver = new events_1.Emitter();
+        _this.onUnhandledDragOver = _this._onUnhandledDragOver.event;
         _this._onDidRemovePanel = new events_1.Emitter();
         _this.onDidRemovePanel = _this._onDidRemovePanel.event;
         _this._onDidAddPanel = new events_1.Emitter();
@@ -158,6 +195,10 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this.onDidPopoutGroupSizeChange = _this._onDidPopoutGroupSizeChange.event;
         _this._onDidPopoutGroupPositionChange = new events_1.Emitter();
         _this.onDidPopoutGroupPositionChange = _this._onDidPopoutGroupPositionChange.event;
+        _this._onDidAddPopoutGroup = new events_1.Emitter();
+        _this.onDidAddPopoutGroup = _this._onDidAddPopoutGroup.event;
+        _this._onDidRemovePopoutGroup = new events_1.Emitter();
+        _this.onDidRemovePopoutGroup = _this._onDidRemovePopoutGroup.event;
         _this._onDidOpenPopoutWindowFail = new events_1.Emitter();
         _this.onDidOpenPopoutWindowFail = _this._onDidOpenPopoutWindowFail.event;
         _this._onDidLayoutFromJSON = new events_1.Emitter();
@@ -181,12 +222,6 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this._onDidMaximizedGroupChange = new events_1.Emitter();
         _this.onDidMaximizedGroupChange = _this._onDidMaximizedGroupChange.event;
         _this._inShellLayout = false;
-        _this._edgeGroups = new Map();
-        _this._edgeGroupDisposables = new Map();
-        _this._floatingGroups = [];
-        _this._popoutGroups = [];
-        _this._popoutRestorationPromise = Promise.resolve();
-        _this._popoutRestorationCleanups = new Set();
         _this._onDidRemoveGroup = new events_1.Emitter();
         _this.onDidRemoveGroup = _this._onDidRemoveGroup.event;
         _this._onDidAddGroup = new events_1.Emitter();
@@ -198,14 +233,51 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this._moving = false;
         _this._options = options;
         _this._tabGroupColorPalette = buildTabGroupColorPalette(options);
+        // Internal seam: defaults to the full set, but tests can supply a
+        // subset to assert every module is independently removable (and the
+        // opt-in module API will build on this later). Not part of the public
+        // options surface.
+        var explicitModules = options
+            .modules;
+        var modules = explicitModules !== null && explicitModules !== void 0 ? explicitModules : __spreadArray(__spreadArray([], __read(allModules_1.AllModules), false), __read((0, modules_1.getRegisteredModules)()), false);
+        try {
+            for (var modules_2 = __values(modules), modules_2_1 = modules_2.next(); !modules_2_1.done; modules_2_1 = modules_2.next()) {
+                var module_1 = modules_2_1.value;
+                _this._moduleRegistry.register(module_1);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (modules_2_1 && !modules_2_1.done && (_a = modules_2.return)) _a.call(modules_2);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        _this._moduleRegistry.initialize(_this);
+        // Surface popout removal symmetrically with `onDidAddPopoutGroup`. The
+        // service is the single point every removal path funnels through — a
+        // genuine window close and an explicit removal alike — and it suppresses
+        // the event during component teardown.
+        var popoutWindowService = _this._popoutWindowService;
+        if (popoutWindowService) {
+            _this.addDisposables(popoutWindowService.onDidRemove(function (entry) {
+                _this._onDidRemovePopoutGroup.fire({
+                    id: entry.popoutGroup.id,
+                    group: entry.popoutGroup,
+                    window: entry.getWindow(),
+                });
+            }));
+        }
+        // Purely a developer warning (no functional effect): nudge anyone using
+        // the internal `dockview-core` package directly towards `dockview`.
+        warnIfUsingCoreDirectly();
         _this.popupService = new popupService_1.PopupService(_this.element);
-        _this.contextMenuController = new contextMenu_1.ContextMenuController(_this);
         _this._api = new component_api_1.DockviewApi(_this);
         // The shell always wraps the dockview element so edge groups can be
         // added at any time via addEdgeGroup() without re-parenting the DOM.
         _this.disableResizing = true;
         container.removeChild(_this.element);
-        _this._shellManager = new dockviewShell_1.ShellManager(container, _this.element, function (w, h) { return _this._layoutFromShell(w, h); }, (_d = (_c = options.theme) === null || _c === void 0 ? void 0 : _c.gap) !== null && _d !== void 0 ? _d : 0, (_e = options.theme) === null || _e === void 0 ? void 0 : _e.edgeGroupCollapsedSize);
+        _this._shellManager = new dockviewShell_1.ShellManager(container, _this.element, function (w, h) { return _this._layoutFromShell(w, h); }, (_e = (_d = options.theme) === null || _d === void 0 ? void 0 : _d.gap) !== null && _e !== void 0 ? _e : 0, (_f = options.theme) === null || _f === void 0 ? void 0 : _f.edgeGroupCollapsedSize);
         // The shell wraps the dockview element, so move the popup anchor
         // into the shell so overflow dropdowns in edge groups position correctly
         _this.popupService.updateRoot(_this._shellManager.element);
@@ -221,69 +293,23 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this._floatingOverlayHost = document.createElement('div');
         _this._floatingOverlayHost.className = 'dv-floating-overlay-host';
         _this._shellManager.element.appendChild(_this._floatingOverlayHost);
-        var rootCanDisplayOverlay = function (event, position) {
-            var data = (0, dataTransfer_1.getPanelData)();
-            if (data) {
-                if (data.viewId !== _this.id) {
-                    return false;
-                }
-                if (position === 'center') {
-                    // center drop target is only allowed if there are no panels in the grid
-                    // floating panels are allowed
-                    return _this.gridview.length === 0;
-                }
-                return true;
-            }
-            if (position === 'center' && _this.gridview.length !== 0) {
-                /**
-                 * for external events only show the four-corner drag overlays, disable
-                 * the center position so that external drag events can fall through to the group
-                 * and panel drop target handlers
-                 */
-                return false;
-            }
-            var firedEvent = new options_1.DockviewUnhandledDragOverEvent(event, 'edge', position, dataTransfer_1.getPanelData);
-            _this._onUnhandledDragOverEvent.fire(firedEvent);
-            return firedEvent.isAccepted;
-        };
-        _this._rootDropTarget = backend_1.html5Backend.createDropTarget(_this.element, {
-            className: 'dv-drop-target-edge',
-            canDisplayOverlay: rootCanDisplayOverlay,
-            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-            overlayModel: (_f = options.rootOverlayModel) !== null && _f !== void 0 ? _f : DEFAULT_ROOT_OVERLAY_MODEL,
-            getOverrideTarget: function () { var _a; return (_a = _this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
-        });
-        _this._rootPointerDropTarget = backend_1.pointerBackend.createDropTarget(_this.element, {
-            className: 'dv-drop-target-edge',
-            canDisplayOverlay: rootCanDisplayOverlay,
-            acceptedTargetZones: [
-                'top',
-                'bottom',
-                'left',
-                'right',
-                'center',
-            ],
-            overlayModel: (_g = options.rootOverlayModel) !== null && _g !== void 0 ? _g : DEFAULT_ROOT_OVERLAY_MODEL,
-            getOverrideTarget: function () { var _a; return (_a = _this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
-        });
-        _this.updateDropTargetModel(options);
         (0, dom_1.toggleClass)(_this.gridview.element, 'dv-dockview', true);
         (0, dom_1.toggleClass)(_this.element, 'dv-debug', !!options.debug);
         _this.updateTheme();
-        _this.updateWatermark();
         if (options.debug) {
             _this.addDisposables(new strictEventsSequencing_1.StrictEventsSequencing(_this));
         }
-        _this.addDisposables(_this.rootDropTargetContainer, _this.overlayRenderContainer, _this._onWillDragPanel, _this._onWillDragGroup, _this._onWillShowOverlay, _this._onDidActivePanelChange, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidLayoutFromJSON, _this._onDidDrop, _this._onWillDrop, _this._onDidMovePanel, _this._onDidMovePanel.event(function () {
+        _this.addDisposables(_this.rootDropTargetContainer, _this.overlayRenderContainer, _this._onWillDragPanel, _this._onWillDragGroup, _this._onWillShowOverlay, _this._onDidActivePanelChange, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidLayoutFromJSON, _this._onDidDrop, _this._onWillDrop, _this._onWillMutateLayout, _this._onDidMutateLayout, _this._onDidMovePanel, _this._onDidMovePanel.event(function () {
             /**
              * Update overlay positions after DOM layout completes to prevent 0×0 dimensions.
              * With defaultRenderer="always" this results in panel content not showing after move operations.
              * Debounced to avoid multiple calls when moving groups with multiple panels.
              */
             _this.debouncedUpdateAllPositions();
-        }), _this._onDidAddGroup, _this._onDidRemoveGroup, _this._onDidActiveGroupChange, _this._onUnhandledDragOverEvent, _this._onDidMaximizedGroupChange, _this._onDidOptionsChange, _this._onDidPopoutGroupSizeChange, _this._onDidPopoutGroupPositionChange, _this._onDidOpenPopoutWindowFail, _this._onDidCreateTabGroup, _this._onDidDestroyTabGroup, _this._onDidAddPanelToTabGroup, _this._onDidRemovePanelFromTabGroup, _this._onDidTabGroupChange, _this._onDidTabGroupCollapsedChange, _this.onDidViewVisibilityChangeMicroTaskQueue(function () {
-            _this.updateWatermark();
-        }), _this.onDidAdd(function (event) {
+        }), _this._onDidAddGroup, _this._onDidRemoveGroup, _this._onDidActiveGroupChange, _this._onUnhandledDragOver, _this._onDidMaximizedGroupChange, _this._onDidPopoutGroupSizeChange, _this._onDidPopoutGroupPositionChange, _this._onDidAddPopoutGroup, _this._onDidRemovePopoutGroup, _this._onDidOpenPopoutWindowFail, _this._onDidCreateTabGroup, _this._onDidDestroyTabGroup, _this._onDidAddPanelToTabGroup, _this._onDidRemovePanelFromTabGroup, _this._onDidTabGroupChange, _this._onDidTabGroupCollapsedChange, events_1.Event.any(_this.onDidPopoutGroupSizeChange, _this.onDidPopoutGroupPositionChange, _this.onDidCreateTabGroup, _this.onDidDestroyTabGroup, _this.onDidAddPanelToTabGroup, _this.onDidRemovePanelFromTabGroup, _this.onDidTabGroupChange, _this.onDidTabGroupCollapsedChange)(function () {
+            // Popout size/position and tab-group mutations persist as layout changes.
+            _this.fireLayoutChange();
+        }), _this._onDidOptionsChange, _this.onDidAdd(function (event) {
             if (!_this._moving) {
                 _this._onDidAddGroup.fire(event);
             }
@@ -300,127 +326,100 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group: event.panel,
                 isMaximized: event.isMaximized,
             });
-        }), events_1.Event.any(_this.onDidAdd, _this.onDidRemove)(function () {
-            _this.updateWatermark();
-        }), events_1.Event.any(_this.onDidAddPanel, _this.onDidRemovePanel, _this.onDidAddGroup, _this.onDidRemove, _this.onDidRemoveGroup, _this.onDidMovePanel, _this.onDidActivePanelChange, _this.onDidPopoutGroupPositionChange, _this.onDidPopoutGroupSizeChange, _this.onDidCreateTabGroup, _this.onDidDestroyTabGroup, _this.onDidAddPanelToTabGroup, _this.onDidRemovePanelFromTabGroup, _this.onDidTabGroupChange, _this.onDidTabGroupCollapsedChange)(function () {
+        }), events_1.Event.any(_this.onDidAddPanel, _this.onDidRemovePanel, _this.onDidAddGroup, _this.onDidRemove, _this.onDidRemoveGroup, _this.onDidMovePanel, _this.onDidActivePanelChange)(function () {
             _this._bufferOnDidLayoutChange.fire();
         }), lifecycle_1.Disposable.from(function () {
-            var e_1, _a, e_2, _b, e_3, _c, e_4, _d;
-            var _e;
-            try {
-                // Cancel any pending popout-restoration timers scheduled by
-                // fromJSON so they don't open new browser windows after
-                // dispose, and resolve their promises so callers awaiting
-                // popoutRestorationPromise don't hang. See issue #851.
-                for (var _f = __values(__spreadArray([], __read(_this._popoutRestorationCleanups), false)), _g = _f.next(); !_g.done; _g = _f.next()) {
-                    var cleanup = _g.value;
-                    cleanup();
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (_g && !_g.done && (_a = _f.return)) _a.call(_f);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-            _this._popoutRestorationCleanups.clear();
-            try {
-                // iterate over a copy of the array since .dispose() mutates the original array
-                for (var _h = __values(__spreadArray([], __read(_this._floatingGroups), false)), _j = _h.next(); !_j.done; _j = _h.next()) {
-                    var group = _j.value;
-                    group.dispose();
-                }
-            }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
-            finally {
-                try {
-                    if (_j && !_j.done && (_b = _h.return)) _b.call(_h);
-                }
-                finally { if (e_2) throw e_2.error; }
-            }
-            try {
-                // iterate over a copy of the array since .dispose() mutates the original array
-                for (var _k = __values(__spreadArray([], __read(_this._popoutGroups), false)), _l = _k.next(); !_l.done; _l = _k.next()) {
-                    var group = _l.value;
-                    group.disposable.dispose();
-                }
-            }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-            finally {
-                try {
-                    if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
-                }
-                finally { if (e_3) throw e_3.error; }
-            }
-            (_e = _this._shellManager) === null || _e === void 0 ? void 0 : _e.dispose();
-            try {
-                for (var _m = __values(_this._edgeGroupDisposables.values()), _o = _m.next(); !_o.done; _o = _m.next()) {
-                    var d = _o.value;
-                    d.dispose();
-                }
-            }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
-            finally {
-                try {
-                    if (_o && !_o.done && (_d = _m.return)) _d.call(_m);
-                }
-                finally { if (e_4) throw e_4.error; }
-            }
-            _this._edgeGroupDisposables.clear();
-        }), _this._rootDropTarget, _this._rootPointerDropTarget, events_1.Event.any(_this._rootDropTarget.onWillShowOverlay, _this._rootPointerDropTarget.onWillShowOverlay)(function (event) {
-            if (_this.gridview.length > 0 && event.position === 'center') {
-                // option only available when no panels in primary grid
-                return;
-            }
-            _this._onWillShowOverlay.fire(new events_2.DockviewWillShowOverlayLocationEvent(event, {
-                kind: 'edge',
-                panel: undefined,
-                api: _this._api,
-                group: undefined,
-                getData: dataTransfer_1.getPanelData,
-            }));
-        }), events_1.Event.any(_this._rootDropTarget.onDrop, _this._rootPointerDropTarget.onDrop)(function (event) {
             var _a;
-            var willDropEvent = new dockviewGroupPanelModel_1.DockviewWillDropEvent({
-                nativeEvent: event.nativeEvent,
-                position: event.position,
-                panel: undefined,
-                api: _this._api,
-                group: undefined,
-                getData: dataTransfer_1.getPanelData,
-                kind: 'edge',
-            });
-            _this._onWillDrop.fire(willDropEvent);
-            if (willDropEvent.defaultPrevented) {
-                return;
-            }
-            var data = (0, dataTransfer_1.getPanelData)();
-            if (data) {
-                _this.moveGroupOrPanel({
-                    from: {
-                        groupId: data.groupId,
-                        panelId: (_a = data.panelId) !== null && _a !== void 0 ? _a : undefined,
-                    },
-                    to: {
-                        group: _this.orthogonalize(event.position),
-                        position: 'center',
-                    },
-                });
-            }
-            else {
-                _this._onDidDrop.fire(new dockviewGroupPanelModel_1.DockviewDidDropEvent({
+            // Registry disposes init() subscriptions then every module
+            // service that implements IDisposable. The order matters so
+            // init handlers stop firing into services about to be torn
+            // down. Includes popout-restoration timer cancellation that
+            // resolves promises so awaiters of popoutRestorationPromise
+            // don't hang. See issue #851.
+            _this._moduleRegistry.dispose();
+            (_a = _this._shellManager) === null || _a === void 0 ? void 0 : _a.dispose();
+        }));
+        // Root edge-drop wiring lives with its (optional) module — guard it so
+        // the module is independently removable.
+        var rootDropTarget = _this._rootDropTargetService;
+        if (rootDropTarget) {
+            _this.addDisposables(rootDropTarget.onWillShowOverlay(function (event) {
+                if (_this.gridview.length > 0 &&
+                    event.position === 'center') {
+                    // option only available when no panels in primary grid
+                    return;
+                }
+                _this._onWillShowOverlay.fire(new events_2.DockviewWillShowOverlayLocationEvent(event, {
+                    kind: 'edge',
+                    panel: undefined,
+                    api: _this._api,
+                    group: undefined,
+                    getData: dataTransfer_1.getPanelData,
+                }));
+            }), rootDropTarget.onDrop(function (event) {
+                var _a;
+                var willDropEvent = new dockviewGroupPanelModel_1.DockviewWillDropEvent({
                     nativeEvent: event.nativeEvent,
                     position: event.position,
                     panel: undefined,
                     api: _this._api,
                     group: undefined,
                     getData: dataTransfer_1.getPanelData,
-                }));
-            }
-        }));
+                    kind: 'edge',
+                });
+                _this._onWillDrop.fire(willDropEvent);
+                if (willDropEvent.defaultPrevented) {
+                    return;
+                }
+                var data = (0, dataTransfer_1.getPanelData)();
+                if (data) {
+                    _this.moveGroupOrPanel({
+                        from: {
+                            groupId: data.groupId,
+                            panelId: (_a = data.panelId) !== null && _a !== void 0 ? _a : undefined,
+                        },
+                        to: {
+                            group: _this.orthogonalize(event.position),
+                            position: 'center',
+                        },
+                    });
+                }
+                else {
+                    _this._onDidDrop.fire(new dockviewGroupPanelModel_1.DockviewDidDropEvent({
+                        nativeEvent: event.nativeEvent,
+                        position: event.position,
+                        panel: undefined,
+                        api: _this._api,
+                        group: undefined,
+                        getData: dataTransfer_1.getPanelData,
+                    }));
+                }
+            }));
+        }
+        // Final module wiring: runs after the host is fully constructed.
+        // Modules subscribe to host events here so the component doesn't
+        // need to manually invoke them at scattered call sites.
+        _this._moduleRegistry.postConstruct(_this);
         return _this;
     }
+    DockviewComponent.prototype.fireDidCreateTabGroup = function (event) {
+        this._onDidCreateTabGroup.fire(event);
+    };
+    DockviewComponent.prototype.fireDidDestroyTabGroup = function (event) {
+        this._onDidDestroyTabGroup.fire(event);
+    };
+    DockviewComponent.prototype.fireDidAddPanelToTabGroup = function (event) {
+        this._onDidAddPanelToTabGroup.fire(event);
+    };
+    DockviewComponent.prototype.fireDidRemovePanelFromTabGroup = function (event) {
+        this._onDidRemovePanelFromTabGroup.fire(event);
+    };
+    DockviewComponent.prototype.fireDidTabGroupChange = function (event) {
+        this._onDidTabGroupChange.fire(event);
+    };
+    DockviewComponent.prototype.fireDidTabGroupCollapsedChange = function (event) {
+        this._onDidTabGroupCollapsedChange.fire(event);
+    };
     Object.defineProperty(DockviewComponent.prototype, "orientation", {
         get: function () {
             return this.gridview.orientation;
@@ -492,18 +491,262 @@ var DockviewComponent = /** @class */ (function (_super) {
     });
     Object.defineProperty(DockviewComponent.prototype, "floatingGroups", {
         get: function () {
-            return this._floatingGroups;
+            var _a, _b, _c;
+            return ((_c = (_b = (_a = this._moduleRegistry) === null || _a === void 0 ? void 0 : _a.services.floatingGroupService) === null || _b === void 0 ? void 0 : _b.floatingGroups) !== null && _c !== void 0 ? _c : []);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Boxes of the floating groups other than `exclude`, in coordinates
+     * relative to the floating overlay container. Supplied to a
+     * `transformFloatingGroupDrag` callback as `context.others` so it can
+     * align the dragged float against its siblings.
+     */
+    DockviewComponent.prototype._gatherFloatingGroupBoxes = function (exclude) {
+        var _a;
+        var container = (_a = this._floatingOverlayHost) !== null && _a !== void 0 ? _a : this.gridview.element;
+        var containerRect = container.getBoundingClientRect();
+        return this.floatingGroups
+            .filter(function (floating) { return floating.group !== exclude; })
+            .map(function (floating) {
+            var rect = floating.overlay.element.getBoundingClientRect();
+            return {
+                left: rect.left - containerRect.left,
+                top: rect.top - containerRect.top,
+                width: rect.width,
+                height: rect.height,
+            };
+        });
+    };
+    Object.defineProperty(DockviewComponent.prototype, "_floatingGroupService", {
+        get: function () {
+            return this._moduleRegistry.services.floatingGroupService;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewComponent.prototype, "_popoutWindowService", {
+        get: function () {
+            return this._moduleRegistry.services.popoutWindowService;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewComponent.prototype, "_watermarkService", {
+        get: function () {
+            // Tier 1 module — optional. Callers must `?.`-guard so the module
+            // can be removed from AllModules without crashing the component.
+            return this._moduleRegistry.services.watermarkService;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewComponent.prototype, "_edgeGroupService", {
+        get: function () {
+            return this._moduleRegistry.services.edgeGroupService;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewComponent.prototype, "_rootDropTargetService", {
+        get: function () {
+            // Optional like every other module service — RootDropTargetModule can be
+            // removed from the registered set without crashing the component.
+            return this._moduleRegistry.services.rootDropTargetService;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewComponent.prototype, "_advancedDnDService", {
+        get: function () {
+            // Optional — callers `?.`-guard so the module can be removed from
+            // AllModules. Absent ⇒ the onWill* hooks simply don't fire (≡ no
+            // subscriber), which is invisible to apps not customising DnD.
+            return this._moduleRegistry.services.advancedDnDService;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewComponent.prototype, "headerActionsService", {
+        get: function () {
+            return this._moduleRegistry.services.headerActionsService;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DockviewComponent.prototype.isGridEmpty = function () {
+        return this.gridview.length === 0;
+    };
+    DockviewComponent.prototype.rootDropTargetOverrideTarget = function () {
+        var _a;
+        return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model;
+    };
+    DockviewComponent.prototype.dispatchUnhandledDragOver = function (nativeEvent, position) {
+        var event = new options_1.DockviewUnhandledDragOverEvent(nativeEvent, 'edge', position, dataTransfer_1.getPanelData);
+        this._onUnhandledDragOver.fire(event);
+        return event.isAccepted;
+    };
+    // IAdvancedDnDHost — the emitters stay here so the public onWill* event
+    // shape is unchanged; AdvancedDnDService routes the per-group fires
+    // through these. Engine guards (e.g. disableDnd) run on the component
+    // ahead of the dispatch.
+    DockviewComponent.prototype.fireWillDragPanel = function (event) {
+        this._onWillDragPanel.fire(event);
+    };
+    DockviewComponent.prototype.fireWillDragGroup = function (event) {
+        this._onWillDragGroup.fire(event);
+    };
+    DockviewComponent.prototype.fireWillDrop = function (event) {
+        this._onWillDrop.fire(event);
+    };
+    DockviewComponent.prototype.fireWillShowOverlay = function (event) {
+        this._onWillShowOverlay.fire(event);
+    };
+    /**
+     * Resolve the custom group drag ghost (via the AdvancedDnD module), or
+     * `undefined` to fall back to the default chip. Returns `undefined` when
+     * the module is absent — the default ghost then renders.
+     */
+    DockviewComponent.prototype.buildGroupDragGhost = function (group) {
+        var _a;
+        return (_a = this._advancedDnDService) === null || _a === void 0 ? void 0 : _a.buildGroupDragGhost(group);
+    };
+    /**
+     * Resolve the app-supplied drop overlay model (via the AdvancedDnD module)
+     * for a group drop target, or `undefined` to keep the target's default.
+     */
+    DockviewComponent.prototype.resolveDropOverlayModel = function (location, group) {
+        var _a;
+        return (_a = this._advancedDnDService) === null || _a === void 0 ? void 0 : _a.resolveOverlayModel(location, group);
+    };
+    Object.defineProperty(DockviewComponent.prototype, "rootElement", {
+        // IAccessibilityHost — keyboard docking reaches the AdvancedDnD preview +
+        // LiveRegion announcer through these so the service stays decoupled.
+        /** Outermost element — the shell (incl. edge groups) once built, else the gridview. */
+        get: function () {
+            var _a, _b;
+            return (_b = (_a = this._shellManager) === null || _a === void 0 ? void 0 : _a.element) !== null && _b !== void 0 ? _b : this.element;
         },
         enumerable: false,
         configurable: true
     });
+    /**
+     * The next / previous group in gridview (spatial) order, wrapping round.
+     * The keyboard accessibility module's focus navigation is built on this
+     * primitive — the only piece that needs the grid internals; the rest of
+     * the navigation logic lives in the AccessibilityService.
+     */
+    DockviewComponent.prototype.adjacentGroup = function (group, reverse) {
+        var _a;
+        // gridview traversal only covers grid groups; a floating/popout group
+        // isn't in the grid, so there's no adjacent grid group to step to.
+        if (group.api.location.type !== 'grid') {
+            return undefined;
+        }
+        var location = (0, gridview_1.getGridLocation)(group.element);
+        return ((_a = (reverse
+            ? this.gridview.previous(location)
+            : this.gridview.next(location))) === null || _a === void 0 ? void 0 : _a.view);
+    };
+    /**
+     * The nearest grid group in a spatial direction from `group`, by
+     * comparing group centre points. Floating and popout groups sit outside
+     * the grid's geometry and are ignored. Returns `undefined` when there is
+     * no group in that direction.
+     */
+    DockviewComponent.prototype.adjacentGroupInDirection = function (group, direction) {
+        var e_2, _a;
+        if (group.api.location.type !== 'grid') {
+            return undefined;
+        }
+        var from = group.element.getBoundingClientRect();
+        var fromX = from.left + from.width / 2;
+        var fromY = from.top + from.height / 2;
+        var best;
+        var bestDistance = Number.POSITIVE_INFINITY;
+        try {
+            for (var _b = __values(this.groups), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var candidate = _c.value;
+                if (candidate === group || candidate.api.location.type !== 'grid') {
+                    continue;
+                }
+                var rect = candidate.element.getBoundingClientRect();
+                var dx = rect.left + rect.width / 2 - fromX;
+                var dy = rect.top + rect.height / 2 - fromY;
+                // Require the candidate to sit predominantly in the asked-for
+                // direction (dominant axis), so 'left' ignores a group that's
+                // mostly above/below.
+                var inDirection = direction === 'left'
+                    ? dx < 0 && Math.abs(dx) >= Math.abs(dy)
+                    : direction === 'right'
+                        ? dx > 0 && Math.abs(dx) >= Math.abs(dy)
+                        : direction === 'up'
+                            ? dy < 0 && Math.abs(dy) >= Math.abs(dx)
+                            : dy > 0 && Math.abs(dy) >= Math.abs(dx);
+                if (!inDirection) {
+                    continue;
+                }
+                var distance = dx * dx + dy * dy;
+                if (distance < bestDistance) {
+                    bestDistance = distance;
+                    best = candidate;
+                }
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        return best;
+    };
+    DockviewComponent.prototype.showDropPreview = function (group, position) {
+        var _a, _b;
+        return ((_b = (_a = this._advancedDnDService) === null || _a === void 0 ? void 0 : _a.showPreviewOverlay(group, position)) !== null && _b !== void 0 ? _b : lifecycle_1.Disposable.NONE);
+    };
+    DockviewComponent.prototype.announce = function (message) {
+        var _a;
+        (_a = this._moduleRegistry.services.liveRegionService) === null || _a === void 0 ? void 0 : _a.announce(message);
+    };
+    DockviewComponent.prototype.dockPanel = function (panel, group, position) {
+        this.moveGroupOrPanel({
+            from: { groupId: panel.group.id, panelId: panel.id },
+            to: { group: group, position: position },
+        });
+    };
+    Object.defineProperty(DockviewComponent.prototype, "contextMenuService", {
+        get: function () {
+            // Owned by ContextMenuModule — undefined when the module is not
+            // registered, so callers must `?.`-guard.
+            return this._moduleRegistry.services.contextMenuService;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewComponent.prototype, "mountElement", {
+        get: function () {
+            return this.gridview.element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DockviewComponent.prototype.hasVisibleGridGroup = function () {
+        return this.groups.some(function (group) { return group.api.location.type === 'grid' && group.api.isVisible; });
+    };
+    DockviewComponent.prototype.fireLayoutChange = function () {
+        this._bufferOnDidLayoutChange.fire();
+    };
     Object.defineProperty(DockviewComponent.prototype, "popoutRestorationPromise", {
         /**
          * Promise that resolves when all popout groups from the last fromJSON call are restored.
          * Useful for tests that need to wait for delayed popout creation.
          */
         get: function () {
-            return this._popoutRestorationPromise;
+            var _a, _b;
+            return ((_b = (_a = this._popoutWindowService) === null || _a === void 0 ? void 0 : _a.restorationPromise) !== null && _b !== void 0 ? _b : Promise.resolve());
         },
         enumerable: false,
         configurable: true
@@ -538,12 +781,33 @@ var DockviewComponent = /** @class */ (function (_super) {
      * and dismisses on events from that window.
      */
     DockviewComponent.prototype.getPopupServiceForGroup = function (group) {
-        var _a;
-        return (_a = this._popoutPopupServices.get(group.id)) !== null && _a !== void 0 ? _a : this.popupService;
+        var _a, _b;
+        return ((_b = (_a = this._popoutWindowService) === null || _a === void 0 ? void 0 : _a.getPopupService(group.id)) !== null && _b !== void 0 ? _b : this.popupService);
     };
     DockviewComponent.prototype.addPopoutGroup = function (itemToPopout, options) {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f;
+        // The transaction brackets the synchronous structural change; the
+        // popout window opens asynchronously after it resolves.
+        return this.mutation('popout', function () {
+            return _this._doAddPopoutGroup(itemToPopout, options);
+        });
+    };
+    /** Enumerate the popout groups currently open in their own windows. */
+    DockviewComponent.prototype.getPopouts = function () {
+        var _a, _b;
+        return ((_b = (_a = this._popoutWindowService) === null || _a === void 0 ? void 0 : _a.entries.map(function (entry) { return ({
+            id: entry.popoutGroup.id,
+            group: entry.popoutGroup,
+            window: entry.getWindow(),
+        }); })) !== null && _b !== void 0 ? _b : []);
+    };
+    DockviewComponent.prototype._doAddPopoutGroup = function (itemToPopout, options) {
+        var _this = this;
+        var _a, _b, _c, _d, _e;
+        var service = (0, modules_1.assertModule)(this._popoutWindowService, 'PopoutWindow', 'api.addPopoutGroup');
+        if (!service) {
+            return Promise.resolve(false);
+        }
         if (itemToPopout instanceof dockviewGroupPanel_1.DockviewGroupPanel &&
             itemToPopout.model.location.type === 'edge') {
             // edge groups are permanent structural elements and cannot be popped out
@@ -569,16 +833,21 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
         var box = getBox();
         var groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId();
+        // Resolve the configured popout URL once (per-call override → global
+        // option). Recorded on the entry / group locations so it survives
+        // serialization; the '/popout.html' default is applied only when
+        // actually opening the window, not baked into saved layouts.
+        var resolvedPopoutUrl = (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : (_d = this.options) === null || _d === void 0 ? void 0 : _d.popoutUrl;
         var _window = new popoutWindow_1.PopoutWindow("".concat(this.id, "-").concat(groupId), // unique id
         theme !== null && theme !== void 0 ? theme : '', {
-            url: (_e = (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : (_d = this.options) === null || _d === void 0 ? void 0 : _d.popoutUrl) !== null && _e !== void 0 ? _e : '/popout.html',
+            url: resolvedPopoutUrl !== null && resolvedPopoutUrl !== void 0 ? resolvedPopoutUrl : '/popout.html',
             left: window.screenX + box.left,
             top: window.screenY + 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: (_f = this.options) === null || _f === void 0 ? void 0 : _f.nonce,
+            nonce: (_e = this.options) === null || _e === void 0 ? void 0 : _e.nonce,
         });
         var popoutWindowDisposable = new lifecycle_1.CompositeDisposable(_window, _window.onDidClose(function () {
             popoutWindowDisposable.dispose();
@@ -586,7 +855,8 @@ var DockviewComponent = /** @class */ (function (_super) {
         return _window
             .open()
             .then(function (popoutContainer) {
-            var _a;
+            var e_3, _a;
+            var _b, _c, _d;
             if (_window.isDisposed) {
                 return false;
             }
@@ -602,7 +872,12 @@ var DockviewComponent = /** @class */ (function (_super) {
              */
             var isGroupAddedToDom = referenceGroup.element.parentElement !== null;
             var group;
-            if (!isGroupAddedToDom) {
+            if (options === null || options === void 0 ? void 0 : options.overridePopoutGridview) {
+                // Restoring a multi-group window: the anchor group is
+                // already built inside the supplied gridview.
+                group = (_b = options.overridePopoutGroup) !== null && _b !== void 0 ? _b : referenceGroup;
+            }
+            else if (!isGroupAddedToDom) {
                 group = referenceGroup;
             }
             else if (options === null || options === void 0 ? void 0 : options.overridePopoutGroup) {
@@ -615,29 +890,46 @@ var DockviewComponent = /** @class */ (function (_super) {
                 }
             }
             if (popoutContainer === null) {
-                console.error('dockview: failed to create popout. perhaps you need to allow pop-ups for this website');
-                popoutWindowDisposable.dispose();
-                _this._onDidOpenPopoutWindowFail.fire();
-                // if the popout window was blocked, we need to move the group back to the reference group
-                // and set it to visible
-                _this.movingLock(function () {
-                    return moveGroupWithoutDestroying({
-                        from: group,
-                        to: referenceGroup,
-                    });
+                _this.handleBlockedPopout({
+                    group: group,
+                    referenceGroup: referenceGroup,
+                    options: options,
+                    popoutWindowDisposable: popoutWindowDisposable,
                 });
-                if (!referenceGroup.api.isVisible) {
-                    referenceGroup.api.setVisible(true);
-                }
                 return false;
             }
             var gready = document.createElement('div');
             gready.className = 'dv-overlay-render-container';
             var overlayRenderContainer = new overlayRenderContainer_1.OverlayRenderContainer(gready, _this);
             group.model.renderContainer = overlayRenderContainer;
-            group.layout(_window.window.innerWidth, _window.window.innerHeight);
+            // The popout window hosts its own gridview so it can grow into
+            // a nested splitview layout. The window starts with the single
+            // anchor group; further groups arrive via drag-and-drop. On
+            // restore a pre-populated gridview is supplied instead.
+            var popoutGridview = (_c = options === null || options === void 0 ? void 0 : options.overridePopoutGridview) !== null && _c !== void 0 ? _c : _this.createNestedGridview();
+            if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGridview)) {
+                popoutGridview.addView(group, splitview_1.Sizing.Distribute, [0]);
+            }
+            // Fill the popout window. Unlike the main grid (explicit px) and
+            // floating windows (CSS inside .dv-resize-container), the popout
+            // gridview has no sizing context, so without this it collapses
+            // to 0 height and nothing renders.
+            popoutGridview.element.style.width = '100%';
+            popoutGridview.element.style.height = '100%';
+            popoutGridview.layout(_window.window.innerWidth, _window.window.innerHeight);
+            // Guarded so the teardown's re-entrant paths (window close
+            // re-enters via the anchor's doRemoveGroup) never double-dispose.
+            var popoutGridviewDisposed = false;
+            var disposePopoutGridview = function () {
+                if (!popoutGridviewDisposed) {
+                    popoutGridviewDisposed = true;
+                    popoutGridview.dispose();
+                }
+            };
             var floatingBox;
-            if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup) && isGroupAddedToDom) {
+            if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup) &&
+                !(options === null || options === void 0 ? void 0 : options.overridePopoutGridview) &&
+                isGroupAddedToDom) {
                 if (itemToPopout instanceof dockviewPanel_1.DockviewPanel) {
                     _this.movingLock(function () {
                         var panel = referenceGroup.model.removePanel(itemToPopout);
@@ -657,11 +949,11 @@ var DockviewComponent = /** @class */ (function (_super) {
                             break;
                         case 'floating':
                         case 'popout':
-                            floatingBox = (_a = _this._floatingGroups
+                            floatingBox = (_d = _this.floatingGroups
                                 .find(function (value) {
                                 return value.group.api.id ===
                                     itemToPopout.api.id;
-                            })) === null || _a === void 0 ? void 0 : _a.overlay.toJSON();
+                            })) === null || _d === void 0 ? void 0 : _d.overlay.toJSON();
                             _this.removeGroup(referenceGroup);
                             break;
                     }
@@ -670,7 +962,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             popoutContainer.classList.add('dv-dockview');
             popoutContainer.style.overflow = 'hidden';
             popoutContainer.appendChild(gready);
-            popoutContainer.appendChild(group.element);
+            popoutContainer.appendChild(popoutGridview.element);
             var anchor = document.createElement('div');
             var dropTargetContainer = new dropTargetAnchorContainer_1.DropTargetAnchorContainer(anchor, { disabled: _this.rootDropTargetContainer.disabled });
             popoutContainer.appendChild(anchor);
@@ -681,20 +973,54 @@ var DockviewComponent = /** @class */ (function (_super) {
             // their pointerdown/keydown listeners fire on the right
             // window for outside-click and Escape dismissal.
             var popoutPopupService = new popupService_1.PopupService(popoutContainer, _window.window);
-            _this._popoutPopupServices.set(group.id, popoutPopupService);
+            service.setPopupService(group.id, popoutPopupService);
             popoutWindowDisposable.addDisposables(popoutPopupService, lifecycle_1.Disposable.from(function () {
-                _this._popoutPopupServices.delete(group.id);
+                service.deletePopupService(group.id);
             }));
             group.model.location = {
                 type: 'popout',
                 getWindow: function () { return _window.window; },
-                popoutUrl: options === null || options === void 0 ? void 0 : options.popoutUrl,
+                popoutUrl: resolvedPopoutUrl,
             };
+            if (options === null || options === void 0 ? void 0 : options.overridePopoutGridview) {
+                // Restored multi-group window. Wire every member (including
+                // the anchor) to this window's containers and popout
+                // location now that the gridview is attached and laid out —
+                // re-setting renderContainer forces a re-render at the right
+                // time so 'always'-rendered content positions in this
+                // window rather than where it was first created.
+                var members = _this.groups.filter(function (candidate) {
+                    return popoutGridview.element.contains(candidate.element);
+                });
+                try {
+                    for (var members_1 = __values(members), members_1_1 = members_1.next(); !members_1_1.done; members_1_1 = members_1.next()) {
+                        var member = members_1_1.value;
+                        member.model.renderContainer = overlayRenderContainer;
+                        member.model.dropTargetContainer = dropTargetContainer;
+                        member.model.location = {
+                            type: 'popout',
+                            getWindow: function () { return _window.window; },
+                            popoutUrl: resolvedPopoutUrl,
+                        };
+                    }
+                }
+                catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                finally {
+                    try {
+                        if (members_1_1 && !members_1_1.done && (_a = members_1.return)) _a.call(members_1);
+                    }
+                    finally { if (e_3) throw e_3.error; }
+                }
+            }
             if (isGroupAddedToDom &&
                 itemToPopout.api.location.type === 'grid') {
                 itemToPopout.api.setVisible(false);
             }
             _this.doSetGroupAndPanelActive(group);
+            var resizeObserverDisposable = service.observeGridviewSize(_window, popoutGridview, overlayRenderContainer);
+            if (resizeObserverDisposable) {
+                popoutWindowDisposable.addDisposables(resizeObserverDisposable);
+            }
             popoutWindowDisposable.addDisposables(group.api.onDidActiveChange(function (event) {
                 var _a;
                 if (event.isActive) {
@@ -704,20 +1030,28 @@ var DockviewComponent = /** @class */ (function (_super) {
                 var _a;
                 (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
             }));
-            var returnedGroup;
+            // Holder so the close teardown (extracted below) can publish
+            // the group that was returned to the main grid back to the
+            // entry's `dispose()` contract.
+            var closeResult = {};
             var isValidReferenceGroup = isGroupAddedToDom &&
                 referenceGroup &&
                 _this.getPanel(referenceGroup.id);
             var value = {
                 window: _window,
                 popoutGroup: group,
+                gridview: popoutGridview,
+                overlayRenderContainer: overlayRenderContainer,
+                dropTargetContainer: dropTargetContainer,
+                getWindow: function () { return _window.window; },
+                popoutUrl: resolvedPopoutUrl,
                 referenceGroup: isValidReferenceGroup
                     ? referenceGroup.id
                     : undefined,
                 disposable: {
                     dispose: function () {
                         popoutWindowDisposable.dispose();
-                        return returnedGroup;
+                        return closeResult.returnedGroup;
                     },
                 },
             };
@@ -734,75 +1068,25 @@ var DockviewComponent = /** @class */ (function (_super) {
                     screenY: _window.window.screenX,
                     group: group,
                 });
-            }), 
-            /**
-             * ResizeObserver seems slow here, I do not know why but we don't need it
-             * since we can reply on the window resize event as we will occupy the full
-             * window dimensions
-             */
-            (0, events_1.addDisposableListener)(_window.window, 'resize', function () {
-                group.layout(_window.window.innerWidth, _window.window.innerHeight);
+            }), (0, events_1.addDisposableListener)(_window.window, 'resize', function () {
+                popoutGridview.layout(_window.window.innerWidth, _window.window.innerHeight);
             }), overlayRenderContainer, lifecycle_1.Disposable.from(function () {
-                if (_this.isDisposed) {
-                    return; // cleanup may run after instance is disposed
-                }
-                if (isGroupAddedToDom &&
-                    _this.getPanel(referenceGroup.id)) {
-                    _this.movingLock(function () {
-                        return moveGroupWithoutDestroying({
-                            from: group,
-                            to: referenceGroup,
-                        });
-                    });
-                    if (!referenceGroup.api.isVisible) {
-                        referenceGroup.api.setVisible(true);
-                    }
-                    if (_this.getPanel(group.id)) {
-                        _this.doRemoveGroup(group, {
-                            skipPopoutAssociated: true,
-                        });
-                    }
-                }
-                else if (_this.getPanel(group.id)) {
-                    group.model.renderContainer =
-                        _this.overlayRenderContainer;
-                    group.model.dropTargetContainer =
-                        _this.rootDropTargetContainer;
-                    returnedGroup = group;
-                    var alreadyRemoved = !_this._popoutGroups.find(function (p) { return p.popoutGroup === group; });
-                    if (alreadyRemoved) {
-                        /**
-                         * If this popout group was explicitly removed then we shouldn't run the additional
-                         * steps. To tell if the running of this disposable is the result of this popout group
-                         * being explicitly removed we can check if this popout group is still referenced in
-                         * the `this._popoutGroups` list.
-                         */
-                        return;
-                    }
-                    if (floatingBox) {
-                        _this.addFloatingGroup(group, {
-                            height: floatingBox.height,
-                            width: floatingBox.width,
-                            position: floatingBox,
-                        });
-                    }
-                    else {
-                        _this.doRemoveGroup(group, {
-                            skipDispose: true,
-                            skipActive: true,
-                            skipPopoutReturn: true,
-                        });
-                        group.model.location = { type: 'grid' };
-                        _this.movingLock(function () {
-                            // suppress group add events since the group already exists
-                            _this.doAddGroup(group, [0]);
-                        });
-                    }
-                    _this.doSetGroupAndPanelActive(group);
-                }
+                return _this.disposePopoutWindow({
+                    group: group,
+                    referenceGroup: referenceGroup,
+                    popoutGridview: popoutGridview,
+                    isGroupAddedToDom: isGroupAddedToDom,
+                    floatingBox: floatingBox,
+                    disposePopoutGridview: disposePopoutGridview,
+                    closeResult: closeResult,
+                });
             }));
-            _this._popoutGroups.push(value);
-            _this.updateWatermark();
+            service.add(value);
+            _this._onDidAddPopoutGroup.fire({
+                id: value.popoutGroup.id,
+                group: value.popoutGroup,
+                window: value.getWindow(),
+            });
             return true;
         })
             .catch(function (err) {
@@ -810,9 +1094,231 @@ var DockviewComponent = /** @class */ (function (_super) {
             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().
+     */
+    DockviewComponent.prototype.handleBlockedPopout = function (params) {
+        var e_4, _a;
+        var _this = this;
+        var group = params.group, referenceGroup = params.referenceGroup, options = params.options, popoutWindowDisposable = params.popoutWindowDisposable;
+        console.error('dockview: failed to create popout. perhaps you need to allow pop-ups for this website');
+        popoutWindowDisposable.dispose();
+        this._onDidOpenPopoutWindowFail.fire();
+        if (options === null || options === void 0 ? void 0 : options.overridePopoutGridview) {
+            // Restoring a multi-group popout window: its nested gridview was
+            // built up-front but never attached to a window. Dock every member
+            // into the main grid so no group is lost, then discard the
+            // detached gridview.
+            var blockedGridview_1 = options.overridePopoutGridview;
+            var members = this.groups.filter(function (candidate) {
+                return blockedGridview_1.element.contains(candidate.element);
+            });
+            var _loop_1 = function (member) {
+                this_1.movingLock(function () {
+                    blockedGridview_1.remove(member);
+                    _this.redockGroupToMainGrid(member);
+                });
+            };
+            var this_1 = this;
+            try {
+                for (var members_2 = __values(members), members_2_1 = members_2.next(); !members_2_1.done; members_2_1 = members_2.next()) {
+                    var member = members_2_1.value;
+                    _loop_1(member);
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (members_2_1 && !members_2_1.done && (_a = members_2.return)) _a.call(members_2);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+            blockedGridview_1.dispose();
+            if (referenceGroup && !referenceGroup.api.isVisible) {
+                referenceGroup.api.setVisible(true);
+            }
+            return;
+        }
+        if (group === referenceGroup) {
+            // No separate grid group to return to (e.g. restoring a popout
+            // straight from JSON) — dock this group into the main grid.
+            if (!this.gridview.element.contains(group.element)) {
+                this.movingLock(function () { return _this.doAddGroup(group, [0]); });
+                group.model.location = { type: 'grid' };
+            }
+        }
+        else {
+            // A fresh group was created for the popout — return its panels to
+            // the reference group and discard the now-empty popout group so it
+            // doesn't linger as an orphan.
+            this.movingLock(function () {
+                return moveGroupWithoutDestroying({
+                    from: group,
+                    to: referenceGroup,
+                });
+            });
+            if (group.model.size === 0 && this._groups.has(group.id)) {
+                group.dispose();
+                this._groups.delete(group.id);
+                this._onDidRemoveGroup.fire(group);
+            }
+        }
+        if (!referenceGroup.api.isVisible) {
+            referenceGroup.api.setVisible(true);
+        }
+    };
+    /**
+     * Wire a group that has been displaced from a floating / popout window back
+     * to the main grid's render & drop-target containers and dock it at the
+     * root. The caller is responsible for first detaching it from its old
+     * gridview — the detach strategy differs between the window-teardown path
+     * (`doRemoveGroup`) and the blocked-window path (`gridview.remove`).
+     */
+    DockviewComponent.prototype.redockGroupToMainGrid = function (group) {
+        group.model.renderContainer = this.overlayRenderContainer;
+        group.model.dropTargetContainer = this.rootDropTargetContainer;
+        group.model.location = { type: 'grid' };
+        this.doAddGroup(group, [0]);
+    };
+    /**
+     * Teardown for a popout window's `popoutWindowDisposable`. Runs when the
+     * window closes (by user, by `removeGroup`, or by component disposal):
+     * relocates every member group back to the main grid (or to a floating
+     * window when the anchor came from one), then disposes the nested gridview.
+     * `closeResult.returnedGroup` is read by the entry's `dispose()` contract.
+     */
+    DockviewComponent.prototype.disposePopoutWindow = function (params) {
+        var e_5, _a;
+        var _this = this;
+        var _b;
+        var group = params.group, referenceGroup = params.referenceGroup, popoutGridview = params.popoutGridview, isGroupAddedToDom = params.isGroupAddedToDom, floatingBox = params.floatingBox, disposePopoutGridview = params.disposePopoutGridview, closeResult = params.closeResult;
+        if (this.isDisposed) {
+            // cleanup may run after instance is disposed; just tear down the
+            // nested gridview.
+            disposePopoutGridview();
+            return;
+        }
+        // Distinguish a genuine window close from an explicit `removeGroup`:
+        // the explicit-removal paths remove the service entry *before* this
+        // disposable runs. Key off the stable `popoutGridview` rather than the
+        // captured `group`, which may no longer be the window's anchor (it can
+        // have been dragged out, promoting another member to anchor).
+        var genuineClose = !!((_b = this._popoutWindowService) === null || _b === void 0 ? void 0 : _b.entries.find(function (entry) { return entry.gridview === popoutGridview; }));
+        // The groups still living in this window, resolved from the gridview so
+        // a reassigned anchor doesn't hide surviving members.
+        var members = this.groups.filter(function (candidate) {
+            return popoutGridview.element.contains(candidate.element);
+        });
+        var anchorPresent = members.includes(group);
+        var anchorIsSoleMember = anchorPresent && members.length === 1;
+        // On a genuine close, relocate every member that ISN'T the captured
+        // anchor back to the main grid. The captured anchor (if still here) gets
+        // the reference-return / re-float treatment below. Explicit removal
+        // relocates via its own path, so the loop is skipped for it.
+        if (genuineClose) {
+            var _loop_2 = function (member) {
+                if (member === group) {
+                    return "continue";
+                }
+                this_2.movingLock(function () {
+                    _this.doRemoveGroup(member, {
+                        skipDispose: true,
+                        skipActive: true,
+                        skipPopoutReturn: true,
+                    });
+                    _this.redockGroupToMainGrid(member);
+                });
+            };
+            var this_2 = this;
+            try {
+                for (var members_3 = __values(members), members_3_1 = members_3.next(); !members_3_1.done; members_3_1 = members_3.next()) {
+                    var member = members_3_1.value;
+                    _loop_2(member);
+                }
+            }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            finally {
+                try {
+                    if (members_3_1 && !members_3_1.done && (_a = members_3.return)) _a.call(members_3);
+                }
+                finally { if (e_5) throw e_5.error; }
+            }
+        }
+        if (anchorPresent &&
+            isGroupAddedToDom &&
+            this.getPanel(referenceGroup.id)) {
+            this.movingLock(function () {
+                return moveGroupWithoutDestroying({
+                    from: group,
+                    to: referenceGroup,
+                });
+            });
+            if (!referenceGroup.api.isVisible) {
+                referenceGroup.api.setVisible(true);
+            }
+            if (this.getPanel(group.id)) {
+                this.doRemoveGroup(group, {
+                    skipPopoutAssociated: true,
+                });
+            }
+        }
+        else if (anchorPresent && this.getPanel(group.id)) {
+            group.model.renderContainer = this.overlayRenderContainer;
+            group.model.dropTargetContainer = this.rootDropTargetContainer;
+            closeResult.returnedGroup = group;
+            if (!genuineClose) {
+                /**
+                 * If this popout group was explicitly removed then we shouldn't run the additional
+                 * steps. The explicit remover re-docks the returned group itself; here we only hand
+                 * it back (above) and tear down the nested gridview.
+                 */
+                disposePopoutGridview();
+                return;
+            }
+            // Re-float only restores the pre-popout state of a SINGLE popped-out
+            // group. A multi-group window must not be split (anchor re-floats
+            // while the rest dock to the grid), so dock the anchor to the grid
+            // alongside the other members once they're no longer alone.
+            if (floatingBox && anchorIsSoleMember) {
+                this.addFloatingGroup(group, {
+                    height: floatingBox.height,
+                    width: floatingBox.width,
+                    position: floatingBox,
+                });
+            }
+            else {
+                this.doRemoveGroup(group, {
+                    skipDispose: true,
+                    skipActive: true,
+                    skipPopoutReturn: true,
+                });
+                group.model.location = { type: 'grid' };
+                this.movingLock(function () {
+                    // suppress group add events since the group already exists
+                    _this.doAddGroup(group, [0]);
+                });
+            }
+            this.doSetGroupAndPanelActive(group);
+        }
+        // All members have been relocated out; tear down the window's nested
+        // gridview (does not dispose the leaf views — their lifecycle stays
+        // with `_groups`).
+        disposePopoutGridview();
+    };
     DockviewComponent.prototype.addFloatingGroup = function (item, options) {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f;
+        this.mutation('float', function () { return _this._doAddFloatingGroup(item, options); });
+    };
+    DockviewComponent.prototype._doAddFloatingGroup = function (item, options) {
+        var _this = this;
+        var _a;
+        var service = (0, modules_1.assertModule)(this._floatingGroupService, 'FloatingGroup', 'api.addFloatingGroup');
+        if (!service) {
+            return;
+        }
         if (item instanceof dockviewGroupPanel_1.DockviewGroupPanel &&
             item.model.location.type === 'edge') {
             // edge groups are permanent structural elements and cannot be floated
@@ -835,7 +1341,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
         else {
             group = item;
-            var popoutReferenceGroupId = (_a = this._popoutGroups.find(function (_) { return _.popoutGroup === group; })) === null || _a === void 0 ? void 0 : _a.referenceGroup;
+            var popoutReferenceGroupId = (_a = this._popoutWindowService) === null || _a === void 0 ? void 0 : _a.findReferenceGroupId(group);
             var popoutReferenceGroup_1 = popoutReferenceGroupId
                 ? this.getPanel(popoutReferenceGroupId)
                 : undefined;
@@ -917,66 +1423,105 @@ var DockviewComponent = /** @class */ (function (_super) {
                     : constants_1.DEFAULT_FLOATING_GROUP_POSITION.height,
             };
         }
-        var anchoredBox = getAnchoredBox();
-        var overlay = new overlay_1.Overlay(__assign(__assign({ container: (_b = this._floatingOverlayHost) !== null && _b !== void 0 ? _b : this.gridview.element, content: group.element }, anchoredBox), { minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
+        var anchoredBox = getAnchoredBox();
+        // The floating window hosts its own gridview so it can grow into a
+        // nested splitview layout. The window starts with the single anchor
+        // group; further groups are added via drag-and-drop.
+        var floatingGridview = this.createNestedGridview();
+        floatingGridview.addView(group, splitview_1.Sizing.Distribute, [0]);
+        this.mountFloatingWindow(floatingGridview, group, [group], anchoredBox, {
+            dragHandle: options === null || options === void 0 ? void 0 : options.dragHandle,
+            inDragMode: options === null || options === void 0 ? void 0 : options.inDragMode,
+            skipActiveGroup: options === null || options === void 0 ? void 0 : options.skipActiveGroup,
+        });
+    };
+    /**
+     * Build an empty gridview configured to match the main grid's styling, for
+     * hosting a nested layout inside a floating or popout window.
+     */
+    DockviewComponent.prototype.createNestedGridview = function (orientation) {
+        var _a, _b;
+        if (orientation === void 0) { orientation = splitview_1.Orientation.HORIZONTAL; }
+        return new gridview_1.Gridview(true, this.options.hideBorders
+            ? { separatorBorder: 'transparent' }
+            : undefined, orientation, false, (_b = (_a = this.options.theme) === null || _a === void 0 ? void 0 : _a.gap) !== null && _b !== void 0 ? _b : 0);
+    };
+    /**
+     * Wrap a (populated) floating gridview in an overlay window: title bar /
+     * move handle, drag wiring, the floating-group service entry and the
+     * `floating` location tag for every member group.
+     */
+    DockviewComponent.prototype.mountFloatingWindow = function (floatingGridview, anchorGroup, members, anchoredBox, options) {
+        var e_6, _a;
+        var _this = this;
+        var _b, _c, _d, _e, _f, _g, _h, _j;
+        var service = (0, modules_1.assertModule)(this._floatingGroupService, 'FloatingGroup', 'api.addFloatingGroup');
+        if (!service) {
+            return;
+        }
+        var dragHandleMode = (_c = (_b = options === null || options === void 0 ? void 0 : options.dragHandle) !== null && _b !== void 0 ? _b : this.options.floatingGroupDragHandle) !== null && _c !== void 0 ? _c : 'titlebar';
+        // `'titlebar'` renders a dedicated grab bar above the tab bar and uses
+        // it as the move handle; `'tabbar'` falls back to moving via the
+        // tab-bar void container.
+        var titleBar = dragHandleMode === 'titlebar'
+            ? new floatingTitleBar_1.FloatingTitleBar(this, anchorGroup)
+            : undefined;
+        var overlay = new overlay_1.Overlay(__assign(__assign({ container: (_d = this._floatingOverlayHost) !== null && _d !== void 0 ? _d : this.gridview.element, content: floatingGridview.element, header: titleBar === null || titleBar === void 0 ? void 0 : titleBar.element }, anchoredBox), { minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : ((_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE), minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                : ((_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumWidthWithinViewport) !== null && _f !== void 0 ? _f : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE), minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : ((_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE) }));
-        var el = group.element.querySelector('.dv-void-container');
-        if (!el) {
+                : ((_h = (_g = this.options.floatingGroupBounds) === null || _g === void 0 ? void 0 : _g.minimumHeightWithinViewport) !== null && _h !== void 0 ? _h : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE), transformDragPosition: this.options.transformFloatingGroupDrag
+                ? function (context) {
+                    return _this.options.transformFloatingGroupDrag({
+                        group: anchorGroup,
+                        proposed: context.proposed,
+                        container: context.container,
+                        others: context.others,
+                    });
+                }
+                : undefined, getSiblingBoxes: function () { return _this._gatherFloatingGroupBoxes(anchorGroup); } }));
+        var dragHandle = (_j = titleBar === null || titleBar === void 0 ? void 0 : titleBar.element) !== null && _j !== void 0 ? _j : anchorGroup.element.querySelector('.dv-void-container');
+        if (!dragHandle) {
             throw new Error('dockview: failed to find drag handle');
         }
-        overlay.setupDrag(el, {
+        overlay.setupDrag(dragHandle, {
             inDragMode: typeof (options === null || options === void 0 ? void 0 : options.inDragMode) === 'boolean'
                 ? options.inDragMode
                 : false,
         });
-        var floatingGroupPanel = new dockviewFloatingGroupPanel_1.DockviewFloatingGroupPanel(group, overlay);
-        var disposable = new lifecycle_1.CompositeDisposable(group.api.onDidActiveChange(function (event) {
-            if (event.isActive) {
-                overlay.bringToFront();
-            }
-        }), (function () {
-            var lastWidth = -1;
-            var lastHeight = -1;
-            return (0, dom_1.watchElementResize)(group.element, function (entry) {
-                var width = Math.round(entry.contentRect.width);
-                var height = Math.round(entry.contentRect.height);
-                if (width === lastWidth && height === lastHeight) {
-                    return;
-                }
-                lastWidth = width;
-                lastHeight = height;
-                group.layout(width, height); // let the group know it's size is changing so it can fire events to the panel
-            });
-        })());
-        floatingGroupPanel.addDisposables(overlay.onDidChange(function () {
-            // this is either a resize or a move
-            // to inform the panels .layout(...) the group with it's current size
-            // don't care about resize since the above watcher handles that
-            group.layout(group.width, group.height);
-        }), overlay.onDidChangeEnd(function () {
-            _this._bufferOnDidLayoutChange.fire();
-        }), group.onDidChange(function (event) {
-            overlay.setBounds({
-                height: event === null || event === void 0 ? void 0 : event.height,
-                width: event === null || event === void 0 ? void 0 : event.width,
-            });
-        }), {
-            dispose: function () {
-                disposable.dispose();
-                (0, array_1.remove)(_this._floatingGroups, floatingGroupPanel);
-                group.model.location = { type: 'grid' };
-                _this.updateWatermark();
-            },
-        });
-        this._floatingGroups.push(floatingGroupPanel);
-        group.model.location = { type: 'floating' };
+        var floatingGroupPanel = service.add(anchorGroup, overlay, floatingGridview);
+        if (titleBar) {
+            // Tie the title bar's lifetime to the floating window and surface
+            // its redock drag through the same public `onWillDragGroup` event
+            // the tab-bar handle uses. Register it so anchor reassignment (when
+            // the original anchor leaves a multi-group window) retargets the
+            // bar at a group that still lives here.
+            floatingGroupPanel.setTitleBar(titleBar);
+            floatingGroupPanel.addDisposables(titleBar, lifecycle_1.Disposable.from(function () {
+                return floatingGroupPanel.setTitleBar(undefined);
+            }), titleBar.onDragStart(function (event) {
+                _this._onWillDragGroup.fire({
+                    nativeEvent: event,
+                    group: floatingGroupPanel.group,
+                });
+            }));
+        }
+        try {
+            for (var members_4 = __values(members), members_4_1 = members_4.next(); !members_4_1.done; members_4_1 = members_4.next()) {
+                var member = members_4_1.value;
+                member.model.location = { type: 'floating' };
+            }
+        }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        finally {
+            try {
+                if (members_4_1 && !members_4_1.done && (_a = members_4.return)) _a.call(members_4);
+            }
+            finally { if (e_6) throw e_6.error; }
+        }
         if (!(options === null || options === void 0 ? void 0 : options.skipActiveGroup)) {
-            this.doSetGroupAndPanelActive(group);
+            this.doSetGroupAndPanelActive(anchorGroup);
         }
-        this.updateWatermark();
     };
     DockviewComponent.prototype.orthogonalize = function (position, options) {
         this.gridview.normalize();
@@ -1013,42 +1558,11 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
     };
     DockviewComponent.prototype.updateOptions = function (options) {
-        var e_5, _a, e_6, _b, e_7, _c, e_8, _d;
-        var _e, _f, _g, _h, _j;
+        var e_7, _a, e_8, _b;
+        var _c, _d, _e, _f, _g;
         _super.prototype.updateOptions.call(this, options);
-        if ('floatingGroupBounds' in options) {
-            try {
-                for (var _k = __values(this._floatingGroups), _l = _k.next(); !_l.done; _l = _k.next()) {
-                    var group = _l.value;
-                    switch (options.floatingGroupBounds) {
-                        case 'boundedWithinViewport':
-                            group.overlay.minimumInViewportHeight = undefined;
-                            group.overlay.minimumInViewportWidth = undefined;
-                            break;
-                        case undefined:
-                            group.overlay.minimumInViewportHeight =
-                                constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
-                            group.overlay.minimumInViewportWidth =
-                                constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
-                            break;
-                        default:
-                            group.overlay.minimumInViewportHeight =
-                                (_e = options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport;
-                            group.overlay.minimumInViewportWidth =
-                                (_f = options.floatingGroupBounds) === null || _f === void 0 ? void 0 : _f.minimumWidthWithinViewport;
-                    }
-                    group.overlay.setBounds();
-                }
-            }
-            catch (e_5_1) { e_5 = { error: e_5_1 }; }
-            finally {
-                try {
-                    if (_l && !_l.done && (_a = _k.return)) _a.call(_k);
-                }
-                finally { if (e_5) throw e_5.error; }
-            }
-        }
-        this.updateDropTargetModel(options);
+        (_c = this._floatingGroupService) === null || _c === void 0 ? void 0 : _c.updateBounds(options);
+        (_d = this._rootDropTargetService) === null || _d === void 0 ? void 0 : _d.setOptions(options);
         var oldDisableDnd = this.options.disableDnd;
         var oldDndStrategy = this.options.dndStrategy;
         this._options = __assign(__assign({}, this.options), options);
@@ -1064,55 +1578,38 @@ var DockviewComponent = /** @class */ (function (_super) {
         if ('createRightHeaderActionComponent' in options ||
             'createLeftHeaderActionComponent' in options ||
             'createPrefixHeaderActionComponent' in options) {
-            try {
-                for (var _m = __values(this.groups), _o = _m.next(); !_o.done; _o = _m.next()) {
-                    var group = _o.value;
-                    group.model.updateHeaderActions();
-                }
-            }
-            catch (e_6_1) { e_6 = { error: e_6_1 }; }
-            finally {
-                try {
-                    if (_o && !_o.done && (_b = _m.return)) _b.call(_m);
-                }
-                finally { if (e_6) throw e_6.error; }
-            }
+            (_e = this.headerActionsService) === null || _e === void 0 ? void 0 : _e.refreshAll();
         }
         if ('createWatermarkComponent' in options) {
-            if (this._watermark) {
-                this._watermark.element.parentElement.remove();
-                (_h = (_g = this._watermark).dispose) === null || _h === void 0 ? void 0 : _h.call(_g);
-                this._watermark = null;
-            }
-            this.updateWatermark();
+            (_f = this._watermarkService) === null || _f === void 0 ? void 0 : _f.refresh();
             try {
-                for (var _p = __values(this.groups), _q = _p.next(); !_q.done; _q = _p.next()) {
-                    var group = _q.value;
+                for (var _h = __values(this.groups), _j = _h.next(); !_j.done; _j = _h.next()) {
+                    var group = _j.value;
                     group.model.refreshWatermark();
                 }
             }
             catch (e_7_1) { e_7 = { error: e_7_1 }; }
             finally {
                 try {
-                    if (_q && !_q.done && (_c = _p.return)) _c.call(_p);
+                    if (_j && !_j.done && (_a = _h.return)) _a.call(_h);
                 }
                 finally { if (e_7) throw e_7.error; }
             }
         }
         if ('tabGroupColors' in options || 'tabGroupAccent' in options) {
-            this._tabGroupColorPalette.setEntries((_j = this._options.tabGroupColors) !== null && _j !== void 0 ? _j : tabGroupAccent_1.DEFAULT_TAB_GROUP_COLORS);
+            this._tabGroupColorPalette.setEntries((_g = this._options.tabGroupColors) !== null && _g !== void 0 ? _g : tabGroupAccent_1.DEFAULT_TAB_GROUP_COLORS);
             this._tabGroupColorPalette.enabled =
                 this._options.tabGroupAccent !== 'off';
             try {
-                for (var _r = __values(this.groups), _s = _r.next(); !_s.done; _s = _r.next()) {
-                    var group = _s.value;
+                for (var _k = __values(this.groups), _l = _k.next(); !_l.done; _l = _k.next()) {
+                    var group = _l.value;
                     group.model.refreshTabGroupAccent();
                 }
             }
             catch (e_8_1) { e_8 = { error: e_8_1 }; }
             finally {
                 try {
-                    if (_s && !_s.done && (_d = _r.return)) _d.call(_r);
+                    if (_l && !_l.done && (_b = _k.return)) _b.call(_k);
                 }
                 finally { if (e_8) throw e_8.error; }
             }
@@ -1121,7 +1618,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this._layoutFromShell(this.gridview.width, this.gridview.height);
     };
     DockviewComponent.prototype.layout = function (width, height, forceResize) {
-        var e_9, _a;
+        var _a, _b;
         if (this._shellManager && !this._inShellLayout) {
             this._shellManager.layout(width, height);
         }
@@ -1129,22 +1626,9 @@ var DockviewComponent = /** @class */ (function (_super) {
             _super.prototype.layout.call(this, width, height, forceResize);
         }
         this._syncFloatingOverlayHost();
-        if (this._floatingGroups) {
-            try {
-                for (var _b = __values(this._floatingGroups), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var floating = _c.value;
-                    // ensure floting groups stay within visible boundaries
-                    floating.overlay.setBounds();
-                }
-            }
-            catch (e_9_1) { e_9 = { error: e_9_1 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                }
-                finally { if (e_9) throw e_9.error; }
-            }
-        }
+        // floatingGroupService may be undefined during super() (BaseGrid calls
+        // layout(0, 0) before subclass field initialisers run).
+        (_b = (_a = this._moduleRegistry) === null || _a === void 0 ? void 0 : _a.services.floatingGroupService) === null || _b === void 0 ? void 0 : _b.constrainBounds();
     };
     DockviewComponent.prototype._syncFloatingOverlayHost = function () {
         if (!this._floatingOverlayHost || !this._shellManager) {
@@ -1173,27 +1657,32 @@ var DockviewComponent = /** @class */ (function (_super) {
     };
     DockviewComponent.prototype.addEdgeGroup = function (position, options) {
         var _this = this;
-        if (this._edgeGroups.has(position)) {
+        var service = (0, modules_1.assertModule)(this._edgeGroupService, 'EdgeGroup', 'api.addEdgeGroup');
+        if (!service) {
+            throw new Error("dockview: EdgeGroup module is not registered");
+        }
+        if (service.has(position)) {
             throw new Error("dockview: edge group already exists at position '".concat(position, "'"));
         }
-        var group = this.createGroup({ id: options.id });
-        group.model.location = { type: 'edge', position: position };
-        group.model.headerPosition = position;
-        this._edgeGroups.set(position, group);
-        this._onDidAddGroup.fire(group);
-        // Collapse when the group becomes empty
-        var autoCollapseDisposable = group.model.onDidRemovePanel(function () {
-            if (group.model.isEmpty) {
-                _this.setEdgeGroupCollapsed(group, true);
-            }
+        return this.mutation('add', function () {
+            var group = _this.createGroup({ id: options.id });
+            group.model.location = { type: 'edge', position: position };
+            group.model.headerPosition = position;
+            // Collapse when the group becomes empty
+            var autoCollapseDisposable = group.model.onDidRemovePanel(function () {
+                if (group.model.isEmpty) {
+                    _this.setEdgeGroupCollapsed(group, true);
+                }
+            });
+            service.add(position, group, autoCollapseDisposable);
+            _this._onDidAddGroup.fire(group);
+            _this._shellManager.addEdgeView(position, options, group);
+            return group.api;
         });
-        this._edgeGroupDisposables.set(position, autoCollapseDisposable);
-        this._shellManager.addEdgeView(position, options, group);
-        return group.api;
     };
     DockviewComponent.prototype.getEdgeGroup = function (position) {
-        var _a;
-        return (_a = this._edgeGroups.get(position)) === null || _a === void 0 ? void 0 : _a.api;
+        var _a, _b;
+        return (_b = (_a = this._edgeGroupService) === null || _a === void 0 ? void 0 : _a.get(position)) === null || _b === void 0 ? void 0 : _b.api;
     };
     DockviewComponent.prototype.setEdgeGroupVisible = function (position, visible) {
         this._shellManager.setEdgeGroupVisible(position, visible);
@@ -1202,90 +1691,69 @@ var DockviewComponent = /** @class */ (function (_super) {
         return this._shellManager.isEdgeGroupVisible(position);
     };
     DockviewComponent.prototype.removeEdgeGroup = function (position) {
-        var e_10, _a;
-        var _b;
-        var group = this._edgeGroups.get(position);
+        var _this = this;
+        var service = (0, modules_1.assertModule)(this._edgeGroupService, 'EdgeGroup', 'api.removeEdgeGroup');
+        if (!service) {
+            return;
+        }
+        var group = service.get(position);
         if (!group) {
             throw new Error("dockview: no edge group exists at position '".concat(position, "'"));
         }
-        try {
-            // Remove panels inside the group first
-            for (var _c = __values(__spreadArray([], __read(group.panels), false)), _d = _c.next(); !_d.done; _d = _c.next()) {
-                var panel = _d.value;
-                this.removePanel(panel, {
-                    removeEmptyGroup: false,
-                    skipDispose: false,
-                });
-            }
-        }
-        catch (e_10_1) { e_10 = { error: e_10_1 }; }
-        finally {
+        // One transaction — the per-panel removals below nest via the depth
+        // counter, so consumers see a single edge-group removal.
+        this.mutation('remove', function () {
+            var e_9, _a;
             try {
-                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
-            }
-            finally { if (e_10) throw e_10.error; }
-        }
-        // Dispose the auto-collapse listener
-        (_b = this._edgeGroupDisposables.get(position)) === null || _b === void 0 ? void 0 : _b.dispose();
-        this._edgeGroupDisposables.delete(position);
-        // Remove from the shell splitview
-        this._shellManager.removeEdgeView(position);
-        // Clean up group state
-        this._edgeGroups.delete(position);
-        group.dispose();
-        this._groups.delete(group.id);
-        this._onDidRemoveGroup.fire(group);
-    };
-    DockviewComponent.prototype.setEdgeGroupCollapsed = function (group, collapsed) {
-        var e_11, _a;
-        try {
-            for (var _b = __values(this._edgeGroups), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var _d = __read(_c.value, 2), position = _d[0], edgeGroup = _d[1];
-                if (edgeGroup === group) {
-                    if (this._shellManager.isEdgeGroupCollapsed(position) ===
-                        collapsed) {
-                        // Skip the splitview resize on a no-op: with non-zero
-                        // theme gap, redundant resizeView calls accumulate
-                        // rounding drift that gradually shrinks the group.
-                        return;
-                    }
-                    this._shellManager.setEdgeGroupCollapsed(position, collapsed);
-                    edgeGroup.api._onDidCollapsedChange.fire({
-                        isCollapsed: collapsed,
+                // Remove panels inside the group first
+                for (var _b = __values(__spreadArray([], __read(group.panels), false)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var panel = _c.value;
+                    _this.removePanel(panel, {
+                        removeEmptyGroup: false,
+                        skipDispose: false,
                     });
-                    return;
                 }
             }
-        }
-        catch (e_11_1) { e_11 = { error: e_11_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_11) throw e_11.error; }
-        }
-    };
-    DockviewComponent.prototype.isEdgeGroupCollapsed = function (group) {
-        var e_12, _a;
-        try {
-            for (var _b = __values(this._edgeGroups), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var _d = __read(_c.value, 2), position = _d[0], edgeGroup = _d[1];
-                if (edgeGroup === group) {
-                    return this._shellManager.isEdgeGroupCollapsed(position);
+            catch (e_9_1) { e_9 = { error: e_9_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
+                finally { if (e_9) throw e_9.error; }
             }
+            // Remove from the shell splitview
+            _this._shellManager.removeEdgeView(position);
+            // Clean up service-tracked state + group itself
+            service.remove(position);
+            group.dispose();
+            _this._groups.delete(group.id);
+            _this._onDidRemoveGroup.fire(group);
+        });
+    };
+    DockviewComponent.prototype.setEdgeGroupCollapsed = function (group, collapsed) {
+        var _a;
+        var position = (_a = this._edgeGroupService) === null || _a === void 0 ? void 0 : _a.findPositionOf(group);
+        if (!position) {
+            return;
         }
-        catch (e_12_1) { e_12 = { error: e_12_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_12) throw e_12.error; }
+        if (this._shellManager.isEdgeGroupCollapsed(position) === collapsed) {
+            // Skip the splitview resize on a no-op: with non-zero theme gap,
+            // redundant resizeView calls accumulate rounding drift that
+            // gradually shrinks the group.
+            return;
         }
-        return false;
+        this._shellManager.setEdgeGroupCollapsed(position, collapsed);
+        group.api._onDidCollapsedChange.fire({ isCollapsed: collapsed });
+    };
+    DockviewComponent.prototype.isEdgeGroupCollapsed = function (group) {
+        var _a;
+        var position = (_a = this._edgeGroupService) === null || _a === void 0 ? void 0 : _a.findPositionOf(group);
+        return position
+            ? this._shellManager.isEdgeGroupCollapsed(position)
+            : false;
     };
     DockviewComponent.prototype.updateDragAndDropState = function () {
-        var e_13, _a;
+        var e_10, _a;
         try {
             // Update draggable state for all tabs and void containers
             for (var _b = __values(this.groups), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -1293,12 +1761,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.model.updateDragAndDropState();
             }
         }
-        catch (e_13_1) { e_13 = { error: e_13_1 }; }
+        catch (e_10_1) { e_10 = { error: e_10_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_13) throw e_13.error; }
+            finally { if (e_10) throw e_10.error; }
         }
     };
     DockviewComponent.prototype.focus = function () {
@@ -1359,33 +1827,19 @@ var DockviewComponent = /** @class */ (function (_super) {
      * @returns A JSON respresentation of the layout
      */
     DockviewComponent.prototype.toJSON = function () {
-        var e_14, _a;
-        var _b;
+        var e_11, _a;
+        var _b, _c, _d, _e, _f, _g, _h, _j;
         var data = this.gridview.serialize();
         var panels = this.panels.reduce(function (collection, panel) {
             collection[panel.id] = panel.toJSON();
             return collection;
         }, {});
-        var floats = this._floatingGroups.map(function (group) {
-            return {
-                data: group.group.toJSON(),
-                position: group.overlay.toJSON(),
-            };
-        });
-        var popoutGroups = this._popoutGroups.map(function (group) {
-            return {
-                data: group.popoutGroup.toJSON(),
-                gridReferenceGroup: group.referenceGroup,
-                position: group.window.dimensions(),
-                url: group.popoutGroup.api.location.type === 'popout'
-                    ? group.popoutGroup.api.location.popoutUrl
-                    : undefined,
-            };
-        });
+        var floats = (_c = (_b = this._floatingGroupService) === null || _b === void 0 ? void 0 : _b.serialize()) !== null && _c !== void 0 ? _c : [];
+        var popoutGroups = (_e = (_d = this._popoutWindowService) === null || _d === void 0 ? void 0 : _d.serialize()) !== null && _e !== void 0 ? _e : [];
         var result = {
             grid: data,
             panels: panels,
-            activeGroup: (_b = this.activeGroup) === null || _b === void 0 ? void 0 : _b.id,
+            activeGroup: (_f = this.activeGroup) === null || _f === void 0 ? void 0 : _f.id,
         };
         if (floats.length > 0) {
             result.floatingGroups = floats;
@@ -1393,53 +1847,47 @@ var DockviewComponent = /** @class */ (function (_super) {
         if (popoutGroups.length > 0) {
             result.popoutGroups = popoutGroups;
         }
-        if (this._edgeGroups.size > 0) {
+        var edgeEntries = (_h = (_g = this._edgeGroupService) === null || _g === void 0 ? void 0 : _g.entries()) !== null && _h !== void 0 ? _h : [];
+        if ((_j = this._edgeGroupService) === null || _j === void 0 ? void 0 : _j.hasAny()) {
             var shellSerialized = this._shellManager.toJSON();
             try {
                 // Augment each entry with the serialized group state
-                for (var _c = __values(this._edgeGroups), _d = _c.next(); !_d.done; _d = _c.next()) {
-                    var _e = __read(_d.value, 2), position = _e[0], group = _e[1];
+                for (var edgeEntries_1 = __values(edgeEntries), edgeEntries_1_1 = edgeEntries_1.next(); !edgeEntries_1_1.done; edgeEntries_1_1 = edgeEntries_1.next()) {
+                    var _k = __read(edgeEntries_1_1.value, 2), position = _k[0], group = _k[1];
                     var entry = shellSerialized[position];
                     if (entry) {
                         entry.group = group.toJSON();
                     }
                 }
             }
-            catch (e_14_1) { e_14 = { error: e_14_1 }; }
+            catch (e_11_1) { e_11 = { error: e_11_1 }; }
             finally {
                 try {
-                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                    if (edgeEntries_1_1 && !edgeEntries_1_1.done && (_a = edgeEntries_1.return)) _a.call(edgeEntries_1);
                 }
-                finally { if (e_14) throw e_14.error; }
+                finally { if (e_11) throw e_11.error; }
             }
             result.edgeGroups = shellSerialized;
         }
         return result;
     };
     DockviewComponent.prototype.fromJSON = function (data, options) {
-        var e_15, _a, e_16, _b, e_17, _c, e_18, _d, e_19, _e, e_20, _f, e_21, _g, e_22, _h, e_23, _j, e_24, _k, e_25, _l;
         var _this = this;
-        var _m, _o, _p;
-        try {
-            // Cancel any popout-restoration timers queued by a previous fromJSON
-            // that haven't fired yet. Each cleanup also disposes the orphan group
-            // that was registered in _groups synchronously but never parented
-            // into a popout window — otherwise the upcoming clear() would call
-            // gridview.remove() on an unparented element and throw
-            // "Invalid grid element". See issue #1304.
-            for (var _q = __values(__spreadArray([], __read(this._popoutRestorationCleanups), false)), _r = _q.next(); !_r.done; _r = _q.next()) {
-                var cleanup = _r.value;
-                cleanup();
-            }
-        }
-        catch (e_15_1) { e_15 = { error: e_15_1 }; }
-        finally {
-            try {
-                if (_r && !_r.done && (_a = _q.return)) _a.call(_q);
-            }
-            finally { if (e_15) throw e_15.error; }
-        }
-        this._popoutRestorationCleanups.clear();
+        // One 'load' transaction for the whole deserialization — the many
+        // nested add/remove mutations join it via the depth counter.
+        this.mutation('load', function () { return _this._doFromJSON(data, options); });
+    };
+    DockviewComponent.prototype._doFromJSON = function (data, options) {
+        var e_12, _a, e_13, _b, e_14, _c, e_15, _d;
+        var _this = this;
+        var _e, _f, _g, _h, _j, _k, _l;
+        // Cancel any popout-restoration timers queued by a previous fromJSON
+        // that haven't fired yet. The cancel path also disposes orphan groups
+        // registered in _groups synchronously but never parented into a popout
+        // window — otherwise the upcoming clear() would call gridview.remove()
+        // on an unparented element and throw "Invalid grid element". See
+        // issue #1304.
+        (_e = this._popoutWindowService) === null || _e === void 0 ? void 0 : _e.cancelPendingRestorations();
         var existingPanels = new Map();
         var tempGroup;
         if (options === null || options === void 0 ? void 0 : options.reuseExistingPanels) {
@@ -1453,19 +1901,19 @@ var DockviewComponent = /** @class */ (function (_super) {
             this._groups.delete(tempGroup.api.id);
             var newPanels = Object.keys(data.panels);
             try {
-                for (var _s = __values(this.panels), _t = _s.next(); !_t.done; _t = _s.next()) {
-                    var panel = _t.value;
+                for (var _m = __values(this.panels), _o = _m.next(); !_o.done; _o = _m.next()) {
+                    var panel = _o.value;
                     if (newPanels.includes(panel.api.id)) {
                         existingPanels.set(panel.api.id, panel);
                     }
                 }
             }
-            catch (e_16_1) { e_16 = { error: e_16_1 }; }
+            catch (e_12_1) { e_12 = { error: e_12_1 }; }
             finally {
                 try {
-                    if (_t && !_t.done && (_b = _s.return)) _b.call(_s);
+                    if (_o && !_o.done && (_a = _m.return)) _a.call(_m);
                 }
-                finally { if (e_16) throw e_16.error; }
+                finally { if (e_12) throw e_12.error; }
             }
             this.movingLock(function () {
                 Array.from(existingPanels.values()).forEach(function (panel) {
@@ -1496,7 +1944,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             var width = this.width;
             var height = this.height;
             var createGroupFromSerializedState_1 = function (data) {
-                var e_26, _a;
+                var e_16, _a;
                 var id = data.id, locked = data.locked, hideHeader = data.hideHeader, headerPosition = data.headerPosition, views = data.views, activeView = data.activeView;
                 if (typeof id !== 'string') {
                     throw new Error('dockview: group id must be of type string');
@@ -1509,7 +1957,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 });
                 _this._onDidAddGroup.fire(group);
                 var createdPanels = [];
-                var _loop_1 = function (child) {
+                var _loop_3 = function (child) {
                     /**
                      * Run the deserializer step seperately since this may fail to due corrupted external state.
                      * In running this section first we avoid firing lots of 'add' events in the event of a failure
@@ -1529,19 +1977,19 @@ var DockviewComponent = /** @class */ (function (_super) {
                     }
                 };
                 try {
-                    for (var views_2 = __values(views), views_2_1 = views_2.next(); !views_2_1.done; views_2_1 = views_2.next()) {
-                        var child = views_2_1.value;
-                        _loop_1(child);
+                    for (var views_1 = __values(views), views_1_1 = views_1.next(); !views_1_1.done; views_1_1 = views_1.next()) {
+                        var child = views_1_1.value;
+                        _loop_3(child);
                     }
                 }
-                catch (e_26_1) { e_26 = { error: e_26_1 }; }
+                catch (e_16_1) { e_16 = { error: e_16_1 }; }
                 finally {
                     try {
-                        if (views_2_1 && !views_2_1.done && (_a = views_2.return)) _a.call(views_2);
+                        if (views_1_1 && !views_1_1.done && (_a = views_1.return)) _a.call(views_1);
                     }
-                    finally { if (e_26) throw e_26.error; }
+                    finally { if (e_16) throw e_16.error; }
                 }
-                var _loop_2 = function (i) {
+                var _loop_4 = function (i) {
                     var panel = createdPanels[i];
                     var isActive = typeof activeView === 'string' &&
                         activeView === panel.id;
@@ -1562,7 +2010,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                     }
                 };
                 for (var i = 0; i < views.length; i++) {
-                    _loop_2(i);
+                    _loop_4(i);
                 }
                 // Restore tab groups before activating a fallback panel so
                 // that collapsed groups can clear the active panel correctly.
@@ -1583,199 +2031,23 @@ var DockviewComponent = /** @class */ (function (_super) {
             });
             this._layoutFromShell(width, height);
             if (data.edgeGroups) {
-                try {
-                    // Auto-create edge groups for positions in the serialized state
-                    // that don't already have a group registered (e.g. when fromJSON
-                    // is called before the user has called addEdgeGroup).
-                    for (var _u = __values([
-                        'top',
-                        'bottom',
-                        'left',
-                        'right',
-                    ]), _v = _u.next(); !_v.done; _v = _u.next()) {
-                        var _position = _v.value;
-                        var fixedData = data.edgeGroups[_position];
-                        if (fixedData && !this._edgeGroups.has(_position)) {
-                            var groupState = fixedData.group;
-                            var id = (_m = groupState === null || groupState === void 0 ? void 0 : groupState.id) !== null && _m !== void 0 ? _m : "".concat(_position, "-group");
-                            this.addEdgeGroup(_position, { id: id });
-                        }
-                    }
-                }
-                catch (e_17_1) { e_17 = { error: e_17_1 }; }
-                finally {
-                    try {
-                        if (_v && !_v.done && (_c = _u.return)) _c.call(_u);
-                    }
-                    finally { if (e_17) throw e_17.error; }
-                }
-                try {
-                    // Restore panel contents of edge groups
-                    for (var _w = __values(this._edgeGroups), _x = _w.next(); !_x.done; _x = _w.next()) {
-                        var _y = __read(_x.value, 2), position = _y[0], edgeGroup = _y[1];
-                        var edgeData = data.edgeGroups[position];
-                        var groupState = edgeData === null || edgeData === void 0 ? void 0 : edgeData.group;
-                        if (groupState) {
-                            var views = groupState.views, activeView = groupState.activeView;
-                            var createdPanels = [];
-                            try {
-                                for (var views_1 = (e_19 = void 0, __values(views)), views_1_1 = views_1.next(); !views_1_1.done; views_1_1 = views_1.next()) {
-                                    var panelId = views_1_1.value;
-                                    if (panels[panelId]) {
-                                        var panel = this._deserializer.fromJSON(panels[panelId], edgeGroup);
-                                        createdPanels.push(panel);
-                                    }
-                                }
-                            }
-                            catch (e_19_1) { e_19 = { error: e_19_1 }; }
-                            finally {
-                                try {
-                                    if (views_1_1 && !views_1_1.done && (_e = views_1.return)) _e.call(views_1);
-                                }
-                                finally { if (e_19) throw e_19.error; }
-                            }
-                            for (var i = 0; i < createdPanels.length; i++) {
-                                var panel = createdPanels[i];
-                                var isActive = activeView === panel.id;
-                                edgeGroup.model.openPanel(panel, {
-                                    skipSetActive: !isActive,
-                                    skipSetGroupActive: true,
-                                });
-                            }
-                            // Restore tab groups before activating a fallback panel
-                            if (groupState.tabGroups &&
-                                groupState.tabGroups.length > 0) {
-                                edgeGroup.model.restoreTabGroups(groupState.tabGroups);
-                            }
-                            if (!edgeGroup.activePanel &&
-                                edgeGroup.panels.length > 0) {
-                                edgeGroup.model.openPanel(edgeGroup.panels[edgeGroup.panels.length - 1], { skipSetGroupActive: true });
-                            }
-                        }
-                    }
-                }
-                catch (e_18_1) { e_18 = { error: e_18_1 }; }
-                finally {
-                    try {
-                        if (_x && !_x.done && (_d = _w.return)) _d.call(_w);
-                    }
-                    finally { if (e_18) throw e_18.error; }
-                }
-                this._shellManager.fromJSON(data.edgeGroups);
-            }
-            var serializedFloatingGroups = (_o = data.floatingGroups) !== null && _o !== void 0 ? _o : [];
-            try {
-                for (var serializedFloatingGroups_1 = __values(serializedFloatingGroups), serializedFloatingGroups_1_1 = serializedFloatingGroups_1.next(); !serializedFloatingGroups_1_1.done; serializedFloatingGroups_1_1 = serializedFloatingGroups_1.next()) {
-                    var serializedFloatingGroup = serializedFloatingGroups_1_1.value;
-                    var data_1 = serializedFloatingGroup.data, position = serializedFloatingGroup.position;
-                    var group = createGroupFromSerializedState_1(data_1);
-                    this.addFloatingGroup(group, {
-                        position: position,
-                        width: position.width,
-                        height: position.height,
-                        skipRemoveGroup: true,
-                        inDragMode: false,
-                    });
-                }
-            }
-            catch (e_20_1) { e_20 = { error: e_20_1 }; }
-            finally {
-                try {
-                    if (serializedFloatingGroups_1_1 && !serializedFloatingGroups_1_1.done && (_f = serializedFloatingGroups_1.return)) _f.call(serializedFloatingGroups_1);
-                }
-                finally { if (e_20) throw e_20.error; }
-            }
-            var serializedPopoutGroups = (_p = data.popoutGroups) !== null && _p !== void 0 ? _p : [];
-            // Create a promise that resolves when all popout groups are created
-            var popoutPromises_1 = [];
-            // Queue popup group creation with delays to avoid browser blocking
-            serializedPopoutGroups.forEach(function (serializedPopoutGroup, index) {
-                var data = serializedPopoutGroup.data, position = serializedPopoutGroup.position, gridReferenceGroup = serializedPopoutGroup.gridReferenceGroup, url = serializedPopoutGroup.url;
-                var group = createGroupFromSerializedState_1(data);
-                // Add a small delay for each popup after the first to avoid browser popup blocking
-                var popoutPromise = new Promise(function (resolve) {
-                    var cleanup = function () {
-                        var e_27, _a;
-                        _this._popoutRestorationCleanups.delete(cleanup);
-                        clearTimeout(handle);
-                        // The group was registered in _groups synchronously
-                        // but the timer that would parent it into the popout
-                        // window never ran. Dispose the orphan here so the
-                        // next clear() doesn't trip over an unparented
-                        // element. See issue #1304.
-                        if (!_this.isDisposed &&
-                            _this._groups.has(group.id) &&
-                            group.element.parentElement === null) {
-                            try {
-                                for (var _b = __values(__spreadArray([], __read(group.panels), false)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                                    var panel = _c.value;
-                                    _this.removePanel(panel, {
-                                        removeEmptyGroup: false,
-                                    });
-                                }
-                            }
-                            catch (e_27_1) { e_27 = { error: e_27_1 }; }
-                            finally {
-                                try {
-                                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                                }
-                                finally { if (e_27) throw e_27.error; }
-                            }
-                            group.dispose();
-                            _this._groups.delete(group.id);
-                            _this._onDidRemoveGroup.fire(group);
-                        }
-                        resolve();
-                    };
-                    var handle = setTimeout(function () {
-                        _this._popoutRestorationCleanups.delete(cleanup);
-                        // Guard against the component being disposed before
-                        // this timer fires. Under React StrictMode the
-                        // component is mounted -> disposed -> remounted, and
-                        // without this guard the first instance's queued
-                        // restoration would open a second popout window.
-                        // See issue #851.
-                        if (_this.isDisposed) {
-                            resolve();
-                            return;
-                        }
-                        _this.addPopoutGroup(group, {
-                            position: position !== null && position !== void 0 ? position : undefined,
-                            overridePopoutGroup: gridReferenceGroup
-                                ? group
-                                : undefined,
-                            referenceGroup: gridReferenceGroup
-                                ? _this.getPanel(gridReferenceGroup)
-                                : undefined,
-                            popoutUrl: url,
-                        });
-                        resolve();
-                    }, index * constants_1.DESERIALIZATION_POPOUT_DELAY_MS); // 100ms delay between each popup
-                    _this._popoutRestorationCleanups.add(cleanup);
-                });
-                popoutPromises_1.push(popoutPromise);
-            });
-            // Store the promise for tests to wait on
-            this._popoutRestorationPromise = Promise.all(popoutPromises_1).then(function () { return void 0; });
-            try {
-                for (var _z = __values(this._floatingGroups), _0 = _z.next(); !_0.done; _0 = _z.next()) {
-                    var floatingGroup = _0.value;
-                    floatingGroup.overlay.setBounds();
-                }
-            }
-            catch (e_21_1) { e_21 = { error: e_21_1 }; }
-            finally {
-                try {
-                    if (_0 && !_0.done && (_g = _z.return)) _g.call(_z);
-                }
-                finally { if (e_21) throw e_21.error; }
+                this.deserializeEdgeGroups(data.edgeGroups, panels);
             }
+            this.deserializeFloatingWindows((_f = data.floatingGroups) !== null && _f !== void 0 ? _f : [], createGroupFromSerializedState_1);
+            var popoutPromises = this.deserializePopoutWindows((_g = data.popoutGroups) !== null && _g !== void 0 ? _g : [], createGroupFromSerializedState_1);
+            (_h = this._popoutWindowService) === null || _h === void 0 ? void 0 : _h.finishRestoration(popoutPromises);
+            (_j = this._floatingGroupService) === null || _j === void 0 ? void 0 : _j.constrainBounds();
             if (typeof activeGroup === 'string') {
                 var panel = this.getPanel(activeGroup);
                 if (panel) {
                     this.doSetGroupAndPanelActive(panel);
                 }
             }
+            // `gridview.deserialize()` rebuilds the grid without firing the
+            // BaseGrid add events the watermark module reacts to, so the
+            // watermark mounted during `clear()` would otherwise persist over
+            // the restored layout. Re-evaluate now the layout is in place.
+            (_k = this._watermarkService) === null || _k === void 0 ? void 0 : _k.update();
         }
         catch (err) {
             console.error('dockview: failed to deserialize layout. Reverting changes', err);
@@ -1783,102 +2055,317 @@ var DockviewComponent = /** @class */ (function (_super) {
                 /**
                  * Takes all the successfully created groups and remove all of their panels.
                  */
-                for (var _1 = __values(this.groups), _2 = _1.next(); !_2.done; _2 = _1.next()) {
-                    var group = _2.value;
+                for (var _p = __values(this.groups), _q = _p.next(); !_q.done; _q = _p.next()) {
+                    var group = _q.value;
                     try {
-                        for (var _3 = (e_23 = void 0, __values(group.panels)), _4 = _3.next(); !_4.done; _4 = _3.next()) {
-                            var panel = _4.value;
+                        for (var _r = (e_14 = void 0, __values(group.panels)), _s = _r.next(); !_s.done; _s = _r.next()) {
+                            var panel = _s.value;
                             this.removePanel(panel, {
                                 removeEmptyGroup: false,
                                 skipDispose: false,
                             });
                         }
                     }
-                    catch (e_23_1) { e_23 = { error: e_23_1 }; }
+                    catch (e_14_1) { e_14 = { error: e_14_1 }; }
                     finally {
                         try {
-                            if (_4 && !_4.done && (_j = _3.return)) _j.call(_3);
+                            if (_s && !_s.done && (_c = _r.return)) _c.call(_r);
                         }
-                        finally { if (e_23) throw e_23.error; }
+                        finally { if (e_14) throw e_14.error; }
                     }
                 }
             }
-            catch (e_22_1) { e_22 = { error: e_22_1 }; }
+            catch (e_13_1) { e_13 = { error: e_13_1 }; }
             finally {
                 try {
-                    if (_2 && !_2.done && (_h = _1.return)) _h.call(_1);
+                    if (_q && !_q.done && (_b = _p.return)) _b.call(_p);
                 }
-                finally { if (e_22) throw e_22.error; }
+                finally { if (e_13) throw e_13.error; }
             }
             try {
                 /**
                  * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
                  * the underlying HTMLElement existing in the Gridview.
                  */
-                for (var _5 = __values(this.groups), _6 = _5.next(); !_6.done; _6 = _5.next()) {
-                    var group = _6.value;
+                for (var _t = __values(this.groups), _u = _t.next(); !_u.done; _u = _t.next()) {
+                    var group = _u.value;
                     group.dispose();
                     this._groups.delete(group.id);
                     this._onDidRemoveGroup.fire(group);
                 }
             }
-            catch (e_24_1) { e_24 = { error: e_24_1 }; }
+            catch (e_15_1) { e_15 = { error: e_15_1 }; }
             finally {
                 try {
-                    if (_6 && !_6.done && (_k = _5.return)) _k.call(_5);
+                    if (_u && !_u.done && (_d = _t.return)) _d.call(_t);
+                }
+                finally { if (e_15) throw e_15.error; }
+            }
+            (_l = this._floatingGroupService) === null || _l === void 0 ? void 0 : _l.disposeAll();
+            // fires clean-up events and clears the underlying HTML gridview.
+            this.clear();
+            /**
+             * even though we have cleaned-up we still want to inform the caller of their error
+             * and we'll do this through re-throwing the original error since afterall you would
+             * expect trying to load a corrupted layout to result in an error and not silently fail...
+             */
+            throw err;
+        }
+        // Force position updates for always visible panels after DOM layout is complete
+        this.debouncedUpdateAllPositions();
+        this._onDidLayoutFromJSON.fire();
+    };
+    /**
+     * Rebuild a floating / popout window's nested gridview from its serialized
+     * tree, collecting the member groups (in deserialization order) so the
+     * caller can mount or restore the window.
+     */
+    DockviewComponent.prototype.deserializeNestedGridview = function (grid, createGroup) {
+        var gridview = this.createNestedGridview(grid.orientation);
+        var members = [];
+        gridview.deserialize(grid, {
+            fromJSON: function (node) {
+                var group = createGroup(node.data);
+                members.push(group);
+                return group;
+            },
+        });
+        return { gridview: gridview, members: members };
+    };
+    DockviewComponent.prototype.deserializeEdgeGroups = function (edgeGroups, panels) {
+        var e_17, _a, e_18, _b, e_19, _c;
+        var _d;
+        var edgeService = (0, modules_1.assertModule)(this._edgeGroupService, 'EdgeGroup', 'fromJSON edge restoration');
+        if (!edgeService) {
+            return;
+        }
+        try {
+            // Auto-create edge groups for positions in the serialized state that
+            // don't already have a group registered (e.g. when fromJSON is called
+            // before the user has called addEdgeGroup).
+            for (var _e = __values([
+                'top',
+                'bottom',
+                'left',
+                'right',
+            ]), _f = _e.next(); !_f.done; _f = _e.next()) {
+                var _position = _f.value;
+                var fixedData = edgeGroups[_position];
+                if (fixedData && !edgeService.has(_position)) {
+                    var groupState = fixedData.group;
+                    var id = (_d = groupState === null || groupState === void 0 ? void 0 : groupState.id) !== null && _d !== void 0 ? _d : "".concat(_position, "-group");
+                    this.addEdgeGroup(_position, { id: id });
+                }
+            }
+        }
+        catch (e_17_1) { e_17 = { error: e_17_1 }; }
+        finally {
+            try {
+                if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
+            }
+            finally { if (e_17) throw e_17.error; }
+        }
+        try {
+            // Restore panel contents of edge groups
+            for (var _g = __values(edgeService.entries()), _h = _g.next(); !_h.done; _h = _g.next()) {
+                var _j = __read(_h.value, 2), position = _j[0], edgeGroup = _j[1];
+                var edgeData = edgeGroups[position];
+                var groupState = edgeData === null || edgeData === void 0 ? void 0 : edgeData.group;
+                if (groupState) {
+                    var views = groupState.views, activeView = groupState.activeView;
+                    var createdPanels = [];
+                    try {
+                        for (var views_2 = (e_19 = void 0, __values(views)), views_2_1 = views_2.next(); !views_2_1.done; views_2_1 = views_2.next()) {
+                            var panelId = views_2_1.value;
+                            if (panels[panelId]) {
+                                var panel = this._deserializer.fromJSON(panels[panelId], edgeGroup);
+                                createdPanels.push(panel);
+                            }
+                        }
+                    }
+                    catch (e_19_1) { e_19 = { error: e_19_1 }; }
+                    finally {
+                        try {
+                            if (views_2_1 && !views_2_1.done && (_c = views_2.return)) _c.call(views_2);
+                        }
+                        finally { if (e_19) throw e_19.error; }
+                    }
+                    for (var i = 0; i < createdPanels.length; i++) {
+                        var panel = createdPanels[i];
+                        var isActive = activeView === panel.id;
+                        edgeGroup.model.openPanel(panel, {
+                            skipSetActive: !isActive,
+                            skipSetGroupActive: true,
+                        });
+                    }
+                    // Restore tab groups before activating a fallback panel
+                    if (groupState.tabGroups && groupState.tabGroups.length > 0) {
+                        edgeGroup.model.restoreTabGroups(groupState.tabGroups);
+                    }
+                    if (!edgeGroup.activePanel && edgeGroup.panels.length > 0) {
+                        edgeGroup.model.openPanel(edgeGroup.panels[edgeGroup.panels.length - 1], { skipSetGroupActive: true });
+                    }
                 }
-                finally { if (e_24) throw e_24.error; }
             }
+        }
+        catch (e_18_1) { e_18 = { error: e_18_1 }; }
+        finally {
             try {
-                // iterate over a reassigned array since original array will be modified
-                for (var _7 = __values(__spreadArray([], __read(this._floatingGroups), false)), _8 = _7.next(); !_8.done; _8 = _7.next()) {
-                    var floatingGroup = _8.value;
-                    floatingGroup.dispose();
-                }
+                if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
             }
-            catch (e_25_1) { e_25 = { error: e_25_1 }; }
-            finally {
-                try {
-                    if (_8 && !_8.done && (_l = _7.return)) _l.call(_7);
+            finally { if (e_18) throw e_18.error; }
+        }
+        this._shellManager.fromJSON(edgeGroups);
+    };
+    DockviewComponent.prototype.deserializeFloatingWindows = function (serialized, createGroup) {
+        var e_20, _a;
+        try {
+            for (var serialized_1 = __values(serialized), serialized_1_1 = serialized_1.next(); !serialized_1_1.done; serialized_1_1 = serialized_1.next()) {
+                var serializedFloatingGroup = serialized_1_1.value;
+                var data = serializedFloatingGroup.data, grid = serializedFloatingGroup.grid, position = serializedFloatingGroup.position;
+                if (grid) {
+                    // Multi-group window: rebuild the window's nested gridview from
+                    // its serialized tree.
+                    var _b = this.deserializeNestedGridview(grid, createGroup), floatingGridview = _b.gridview, members = _b.members;
+                    if (members.length === 0) {
+                        continue;
+                    }
+                    this.mountFloatingWindow(floatingGridview, members[0], members, position, { inDragMode: false });
+                }
+                else if (data) {
+                    var group = createGroup(data);
+                    this.addFloatingGroup(group, {
+                        position: position,
+                        width: position.width,
+                        height: position.height,
+                        skipRemoveGroup: true,
+                        inDragMode: false,
+                    });
                 }
-                finally { if (e_25) throw e_25.error; }
             }
-            // fires clean-up events and clears the underlying HTML gridview.
-            this.clear();
-            /**
-             * even though we have cleaned-up we still want to inform the caller of their error
-             * and we'll do this through re-throwing the original error since afterall you would
-             * expect trying to load a corrupted layout to result in an error and not silently fail...
-             */
-            throw err;
         }
-        this.updateWatermark();
-        // Force position updates for always visible panels after DOM layout is complete
-        this.debouncedUpdateAllPositions();
-        this._onDidLayoutFromJSON.fire();
+        catch (e_20_1) { e_20 = { error: e_20_1 }; }
+        finally {
+            try {
+                if (serialized_1_1 && !serialized_1_1.done && (_a = serialized_1.return)) _a.call(serialized_1);
+            }
+            finally { if (e_20) throw e_20.error; }
+        }
+    };
+    DockviewComponent.prototype.deserializePopoutWindows = function (serialized, createGroup) {
+        var _this = this;
+        var popoutService = serialized.length > 0
+            ? (0, modules_1.assertModule)(this._popoutWindowService, 'PopoutWindow', 'fromJSON popout restoration')
+            : this._popoutWindowService;
+        if (!popoutService) {
+            return [];
+        }
+        // Queue popup group creation with delays to avoid browser blocking
+        return serialized.flatMap(function (serializedPopoutGroup, index) {
+            var data = serializedPopoutGroup.data, grid = serializedPopoutGroup.grid, position = serializedPopoutGroup.position, gridReferenceGroup = serializedPopoutGroup.gridReferenceGroup, url = serializedPopoutGroup.url;
+            // Multi-group popout windows rebuild their nested gridview from the
+            // serialized tree; single-group windows use the legacy single-group
+            // path.
+            var overridePopoutGridview;
+            var members = [];
+            if (grid) {
+                var built = _this.deserializeNestedGridview(grid, createGroup);
+                overridePopoutGridview = built.gridview;
+                members = built.members;
+                if (members.length === 0) {
+                    // A serialized window with no groups: nothing to restore.
+                    // Mirror the floating path's guard and discard the empty
+                    // gridview rather than passing an undefined anchor to
+                    // addPopoutGroup.
+                    overridePopoutGridview.dispose();
+                    return [];
+                }
+            }
+            var group = grid ? members[0] : createGroup(data);
+            return popoutService.scheduleRestoration(index * constants_1.DESERIALIZATION_POPOUT_DELAY_MS, function () {
+                _this.addPopoutGroup(group, {
+                    position: position !== null && position !== void 0 ? position : undefined,
+                    overridePopoutGroup: gridReferenceGroup
+                        ? group
+                        : undefined,
+                    overridePopoutGridview: overridePopoutGridview,
+                    referenceGroup: gridReferenceGroup
+                        ? _this.getPanel(gridReferenceGroup)
+                        : undefined,
+                    popoutUrl: url,
+                });
+            }, function () {
+                var e_21, _a, e_22, _b;
+                try {
+                    // The group was registered in _groups synchronously but the
+                    // timer that would parent it into the popout window never
+                    // ran. Dispose the orphan here so the next clear() doesn't
+                    // trip over an unparented element. See issue #1304.
+                    for (var _c = __values(members.length > 0
+                        ? members
+                        : [group]), _d = _c.next(); !_d.done; _d = _c.next()) {
+                        var orphan = _d.value;
+                        if (!_this.isDisposed &&
+                            _this._groups.has(orphan.id) &&
+                            orphan.element.parentElement === null) {
+                            try {
+                                for (var _e = (e_22 = void 0, __values(__spreadArray([], __read(orphan.panels), false))), _f = _e.next(); !_f.done; _f = _e.next()) {
+                                    var panel = _f.value;
+                                    _this.removePanel(panel, {
+                                        removeEmptyGroup: false,
+                                    });
+                                }
+                            }
+                            catch (e_22_1) { e_22 = { error: e_22_1 }; }
+                            finally {
+                                try {
+                                    if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                                }
+                                finally { if (e_22) throw e_22.error; }
+                            }
+                            orphan.dispose();
+                            _this._groups.delete(orphan.id);
+                            _this._onDidRemoveGroup.fire(orphan);
+                        }
+                    }
+                }
+                catch (e_21_1) { e_21 = { error: e_21_1 }; }
+                finally {
+                    try {
+                        if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                    }
+                    finally { if (e_21) throw e_21.error; }
+                }
+            });
+        });
     };
     DockviewComponent.prototype.clear = function () {
-        var e_28, _a, e_29, _b;
+        var _this = this;
+        this.mutation('clear', function () { return _this._doClear(); });
+    };
+    DockviewComponent.prototype._doClear = function () {
+        var e_23, _a, e_24, _b;
+        var _c;
         var groups = Array.from(this._groups.values()).map(function (_) { return _.value; });
         var hasActiveGroup = !!this.activeGroup;
         try {
             for (var groups_1 = __values(groups), groups_1_1 = groups_1.next(); !groups_1_1.done; groups_1_1 = groups_1.next()) {
                 var group = groups_1_1.value;
-                if (__spreadArray([], __read(this._edgeGroups.values()), false).includes(group)) {
+                if ((_c = this._edgeGroupService) === null || _c === void 0 ? void 0 : _c.includes(group)) {
                     // Edge groups are structural - only clear their panels, not the group itself
                     var panels = __spreadArray([], __read(group.panels), false);
                     try {
-                        for (var panels_1 = (e_29 = void 0, __values(panels)), panels_1_1 = panels_1.next(); !panels_1_1.done; panels_1_1 = panels_1.next()) {
+                        for (var panels_1 = (e_24 = void 0, __values(panels)), panels_1_1 = panels_1.next(); !panels_1_1.done; panels_1_1 = panels_1.next()) {
                             var panel = panels_1_1.value;
                             this.removePanel(panel, { removeEmptyGroup: false });
                         }
                     }
-                    catch (e_29_1) { e_29 = { error: e_29_1 }; }
+                    catch (e_24_1) { e_24 = { error: e_24_1 }; }
                     finally {
                         try {
                             if (panels_1_1 && !panels_1_1.done && (_b = panels_1.return)) _b.call(panels_1);
                         }
-                        finally { if (e_29) throw e_29.error; }
+                        finally { if (e_24) throw e_24.error; }
                     }
                     continue;
                 }
@@ -1886,12 +2373,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 this.removeGroup(group, { skipActive: true });
             }
         }
-        catch (e_28_1) { e_28 = { error: e_28_1 }; }
+        catch (e_23_1) { e_23 = { error: e_23_1 }; }
         finally {
             try {
                 if (groups_1_1 && !groups_1_1.done && (_a = groups_1.return)) _a.call(groups_1);
             }
-            finally { if (e_28) throw e_28.error; }
+            finally { if (e_23) throw e_23.error; }
         }
         if (hasActiveGroup) {
             this.doSetGroupAndPanelActive(undefined);
@@ -1899,23 +2386,32 @@ var DockviewComponent = /** @class */ (function (_super) {
         this.gridview.clear();
     };
     DockviewComponent.prototype.closeAllGroups = function () {
-        var e_30, _a;
-        try {
-            for (var _b = __values(this._groups.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var entry = _c.value;
-                var _d = __read(entry, 2), _ = _d[0], group = _d[1];
-                group.value.model.closeAllPanels();
-            }
-        }
-        catch (e_30_1) { e_30 = { error: e_30_1 }; }
-        finally {
+        var _this = this;
+        // One transaction — the per-panel removals inside nest via the depth
+        // counter, so consumers (undo, announcements) see a single mutation.
+        this.mutation('remove', function () {
+            var e_25, _a;
             try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                for (var _b = __values(_this._groups.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var entry = _c.value;
+                    var _d = __read(entry, 2), _ = _d[0], group = _d[1];
+                    group.value.model.closeAllPanels();
+                }
             }
-            finally { if (e_30) throw e_30.error; }
-        }
+            catch (e_25_1) { e_25 = { error: e_25_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_25) throw e_25.error; }
+            }
+        });
     };
     DockviewComponent.prototype.addPanel = function (options) {
+        var _this = this;
+        return this.mutation('add', function () { return _this._doAddPanel(options); });
+    };
+    DockviewComponent.prototype._doAddPanel = function (options) {
         var _a, _b;
         if (this.panels.find(function (_) { return _.id === options.id; })) {
             throw new Error("dockview: panel with id ".concat(options.id, " already exists"));
@@ -2056,6 +2552,13 @@ var DockviewComponent = /** @class */ (function (_super) {
         return panel;
     };
     DockviewComponent.prototype.removePanel = function (panel, options) {
+        var _this = this;
+        if (options === void 0) { options = {
+            removeEmptyGroup: true,
+        }; }
+        this.mutation('remove', function () { return _this._doRemovePanel(panel, options); });
+    };
+    DockviewComponent.prototype._doRemovePanel = function (panel, options) {
         if (options === void 0) { options = {
             removeEmptyGroup: true,
         }; }
@@ -2080,28 +2583,11 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
         return new watermark_1.Watermark();
     };
-    DockviewComponent.prototype.updateWatermark = function () {
-        var _a, _b;
-        if (this.groups.filter(function (x) { return x.api.location.type === 'grid' && x.api.isVisible; }).length === 0) {
-            if (!this._watermark) {
-                this._watermark = this.createWatermarkComponent();
-                this._watermark.init({
-                    containerApi: new component_api_1.DockviewApi(this),
-                });
-                var watermarkContainer = document.createElement('div');
-                watermarkContainer.className = 'dv-watermark-container';
-                (0, dom_1.addTestId)(watermarkContainer, 'watermark-component');
-                watermarkContainer.appendChild(this._watermark.element);
-                this.gridview.element.appendChild(watermarkContainer);
-            }
-        }
-        else if (this._watermark) {
-            this._watermark.element.parentElement.remove();
-            (_b = (_a = this._watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
-            this._watermark = null;
-        }
-    };
     DockviewComponent.prototype.addGroup = function (options) {
+        var _this = this;
+        return this.mutation('add', function () { return _this._doAddGroup(options); });
+    };
+    DockviewComponent.prototype._doAddGroup = function (options) {
         var _a;
         if (options) {
             var referenceGroup = void 0;
@@ -2161,13 +2647,73 @@ var DockviewComponent = /** @class */ (function (_super) {
             : splitview_1.Orientation.VERTICAL;
     };
     DockviewComponent.prototype.removeGroup = function (group, options) {
-        this.doRemoveGroup(group, options);
+        var _this = this;
+        this.mutation('remove', function () { return _this.doRemoveGroup(group, options); });
+    };
+    /**
+     * Detach a single group from the nested gridview of its floating / popout
+     * window, keeping the window and its remaining members alive, and reassign
+     * the window's anchor if the detached group was it.
+     *
+     * @returns `true` if the group was detached from a multi-member window;
+     * `false` if `group` is not in a nested window, or is the window's only
+     * member — in which case the caller is responsible for disposing the whole
+     * window.
+     */
+    DockviewComponent.prototype.detachFromNestedWindow = function (group) {
+        var _a, _b;
+        var floating = (_a = this._floatingGroupService) === null || _a === void 0 ? void 0 : _a.findByGroup(group);
+        if (floating) {
+            var members = this.nestedWindowMembers(group);
+            if (members.length <= 1) {
+                return false;
+            }
+            floating.gridview.remove(group);
+            if (floating.group === group) {
+                // The anchor left; promote a remaining member.
+                floating.setAnchorGroup(members.find(function (m) { return m !== group; }));
+            }
+            return true;
+        }
+        var popout = (_b = this._popoutWindowService) === null || _b === void 0 ? void 0 : _b.findByGroup(group);
+        if (popout) {
+            var members = this.nestedWindowMembers(group);
+            if (members.length <= 1) {
+                return false;
+            }
+            popout.gridview.remove(group);
+            if (popout.popoutGroup === group) {
+                // The anchor left; promote a remaining member.
+                popout.popoutGroup = members.find(function (m) { return m !== group; });
+            }
+            return true;
+        }
+        return false;
+    };
+    /**
+     * Dispose a group and forget it: remove it from `_groups` and fire the
+     * removed event.
+     */
+    DockviewComponent.prototype.disposeGroupRecord = function (group) {
+        group.dispose();
+        this._groups.delete(group.id);
+        this._onDidRemoveGroup.fire(group);
+    };
+    /**
+     * When `removed` was the active group, fall the active selection back to
+     * the first remaining group (or clear it when none remain).
+     */
+    DockviewComponent.prototype.activateFallbackGroupIfRemoved = function (removed, skipActive) {
+        if (!skipActive && this._activeGroup === removed) {
+            var groups = Array.from(this._groups.values());
+            this.doSetGroupAndPanelActive(groups.length > 0 ? groups[0].value : undefined);
+        }
     };
     DockviewComponent.prototype.doRemoveGroup = function (group, options) {
-        var e_31, _a;
-        var _b;
+        var e_26, _a;
+        var _b, _c, _d, _e, _f;
         // Edge groups are permanent structural elements - never remove them from the layout
-        if (__spreadArray([], __read(this._edgeGroups.values()), false).includes(group)) {
+        if ((_b = this._edgeGroupService) === null || _b === void 0 ? void 0 : _b.includes(group)) {
             return group;
         }
         var panels = __spreadArray([], __read(group.panels), false); // reassign since group panels will mutate
@@ -2177,72 +2723,107 @@ var DockviewComponent = /** @class */ (function (_super) {
                     var panel = panels_2_1.value;
                     this.removePanel(panel, {
                         removeEmptyGroup: false,
-                        skipDispose: (_b = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _b !== void 0 ? _b : false,
+                        skipDispose: (_c = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _c !== void 0 ? _c : false,
                     });
                 }
             }
-            catch (e_31_1) { e_31 = { error: e_31_1 }; }
+            catch (e_26_1) { e_26 = { error: e_26_1 }; }
             finally {
                 try {
                     if (panels_2_1 && !panels_2_1.done && (_a = panels_2.return)) _a.call(panels_2);
                 }
-                finally { if (e_31) throw e_31.error; }
+                finally { if (e_26) throw e_26.error; }
             }
         }
         var activePanel = this.activePanel;
         if (group.api.location.type === 'floating') {
-            var floatingGroup = this._floatingGroups.find(function (_) { return _.group === group; });
-            if (floatingGroup) {
+            var floatingGroup = (_d = this._floatingGroupService) === null || _d === void 0 ? void 0 : _d.findByGroup(group);
+            if (!floatingGroup) {
+                throw new Error('dockview: failed to find floating group');
+            }
+            if (this.detachFromNestedWindow(group)) {
+                // The floating window hosts other groups and stays alive —
+                // finalize just this group.
                 if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
-                    floatingGroup.group.dispose();
-                    this._groups.delete(group.id);
-                    this._onDidRemoveGroup.fire(group);
+                    this.disposeGroupRecord(group);
                 }
-                (0, array_1.remove)(this._floatingGroups, floatingGroup);
-                floatingGroup.dispose();
-                if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
-                    var groups = Array.from(this._groups.values());
-                    this.doSetGroupAndPanelActive(groups.length > 0 ? groups[0].value : undefined);
+                else {
+                    // Relocation: reset location so the destination root can
+                    // re-tag it.
+                    group.model.location = { type: 'grid' };
                 }
-                return floatingGroup.group;
+                this.activateFallbackGroupIfRemoved(group, options === null || options === void 0 ? void 0 : options.skipActive);
+                return group;
             }
-            throw new Error('dockview: failed to find floating group');
+            // Last group leaving — dispose the whole floating window.
+            if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                this.disposeGroupRecord(group);
+            }
+            // floatingGroup.dispose() removes itself from the service array
+            floatingGroup.dispose();
+            this.activateFallbackGroupIfRemoved(group, options === null || options === void 0 ? void 0 : options.skipActive);
+            return group;
         }
         if (group.api.location.type === 'popout') {
-            var selectedGroup = this._popoutGroups.find(function (_) { return _.popoutGroup === group; });
-            if (selectedGroup) {
+            var selectedGroup = (_e = this._popoutWindowService) === null || _e === void 0 ? void 0 : _e.findByGroup(group);
+            if (!selectedGroup) {
+                throw new Error('dockview: failed to find popout group');
+            }
+            if (this.detachFromNestedWindow(group)) {
+                // The popout window hosts other groups and stays alive —
+                // finalize just this group.
                 if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
-                    if (!(options === null || options === void 0 ? void 0 : options.skipPopoutAssociated)) {
-                        var refGroup = selectedGroup.referenceGroup
-                            ? this.getPanel(selectedGroup.referenceGroup)
-                            : undefined;
-                        if (refGroup && refGroup.panels.length === 0) {
-                            this.removeGroup(refGroup);
-                        }
-                    }
-                    selectedGroup.popoutGroup.dispose();
-                    this._groups.delete(group.id);
-                    this._onDidRemoveGroup.fire(group);
-                }
-                (0, array_1.remove)(this._popoutGroups, selectedGroup);
-                var removedGroup = selectedGroup.disposable.dispose();
-                if (!(options === null || options === void 0 ? void 0 : options.skipPopoutReturn) && removedGroup) {
-                    this.doAddGroup(removedGroup, [0]);
-                    this.doSetGroupAndPanelActive(removedGroup);
+                    this.disposeGroupRecord(group);
                 }
-                if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
-                    var groups = Array.from(this._groups.values());
-                    this.doSetGroupAndPanelActive(groups.length > 0 ? groups[0].value : undefined);
+                else {
+                    // Relocation: reset location so the destination root can
+                    // re-tag it.
+                    group.model.location = { type: 'grid' };
                 }
-                this.updateWatermark();
-                return selectedGroup.popoutGroup;
+                this.activateFallbackGroupIfRemoved(group, options === null || options === void 0 ? void 0 : options.skipActive);
+                return group;
             }
-            throw new Error('dockview: failed to find popout group');
+            // Last group leaving — tear the whole popout window down.
+            if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                if (!(options === null || options === void 0 ? void 0 : options.skipPopoutAssociated)) {
+                    var refGroup = selectedGroup.referenceGroup
+                        ? this.getPanel(selectedGroup.referenceGroup)
+                        : undefined;
+                    if (refGroup && refGroup.panels.length === 0) {
+                        this.removeGroup(refGroup);
+                    }
+                }
+                selectedGroup.popoutGroup.dispose();
+                this._groups.delete(group.id);
+                this._onDidRemoveGroup.fire(group);
+            }
+            (_f = this._popoutWindowService) === null || _f === void 0 ? void 0 : _f.remove(selectedGroup);
+            var removedGroup = selectedGroup.disposable.dispose();
+            if (!(options === null || options === void 0 ? void 0 : options.skipPopoutReturn) && removedGroup) {
+                this.doAddGroup(removedGroup, [0]);
+                this.doSetGroupAndPanelActive(removedGroup);
+            }
+            this.activateFallbackGroupIfRemoved(group, options === null || options === void 0 ? void 0 : options.skipActive);
+            return selectedGroup.popoutGroup;
+        }
+        // A `grid`-location group whose element isn't actually in the gridview
+        // is an orphan — e.g. a popout-destined group created during fromJSON
+        // whose window hasn't opened yet, swept up by clear()/a re-entrant
+        // fromJSON. `gridview.remove()` would throw "Invalid grid element", so
+        // dispose it directly.
+        if (!this.gridview.element.contains(group.element)) {
+            if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                var item = this._groups.get(group.id);
+                item === null || item === void 0 ? void 0 : item.disposable.dispose();
+                this.disposeGroupRecord(group);
+            }
+            this.activateFallbackGroupIfRemoved(group, options === null || options === void 0 ? void 0 : options.skipActive);
+            return group;
         }
         var re = _super.prototype.doRemoveGroup.call(this, group, options);
         if (!(options === null || options === void 0 ? void 0 : options.skipActive)) {
             if (this.activePanel !== activePanel) {
-                this._onDidActivePanelChange.fire(this.activePanel);
+                this.fireActivePanelChange(this.activePanel);
             }
         }
         return re;
@@ -2253,8 +2834,26 @@ var DockviewComponent = /** @class */ (function (_super) {
             cancelAnimationFrame(this._updatePositionsFrameId);
         }
         this._updatePositionsFrameId = requestAnimationFrame(function () {
+            var e_27, _a;
+            var _b, _c;
             _this._updatePositionsFrameId = undefined;
             _this.overlayRenderContainer.updateAllPositions();
+            try {
+                // Popout windows have their own render containers; reposition those
+                // too so panels moved/split within a popout are laid out (the main
+                // container only covers grid + floating, which share it).
+                for (var _d = __values((_c = (_b = _this._popoutWindowService) === null || _b === void 0 ? void 0 : _b.entries) !== null && _c !== void 0 ? _c : []), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var entry = _e.value;
+                    entry.overlayRenderContainer.updateAllPositions();
+                }
+            }
+            catch (e_27_1) { e_27 = { error: e_27_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+                }
+                finally { if (e_27) throw e_27.error; }
+            }
         });
     };
     DockviewComponent.prototype.movingLock = function (func) {
@@ -2267,9 +2866,76 @@ var DockviewComponent = /** @class */ (function (_super) {
             this._moving = isMoving;
         }
     };
+    /**
+     * Bracket a structural mutation with `onWillMutateLayout` /
+     * `onDidMutateLayout`. Re-entrant: nested calls (a compound operation such
+     * as a drag that relocates a panel) join the outermost transaction, so the
+     * events fire exactly once around the whole operation. `kind` reflects the
+     * outermost mutation.
+     */
+    DockviewComponent.prototype.mutation = function (kind, func) {
+        var outer = this._mutationDepth === 0;
+        var origin = this._origin;
+        if (outer) {
+            this._onWillMutateLayout.fire({ kind: kind, origin: origin });
+        }
+        this._mutationDepth++;
+        try {
+            return func();
+        }
+        finally {
+            this._mutationDepth--;
+            if (outer) {
+                this._onDidMutateLayout.fire({ kind: kind, origin: origin });
+            }
+        }
+    };
+    /**
+     * The origin of the operation currently in progress (`'user'` by default).
+     * Read inside a `mutation()` or active-panel change to learn whether the
+     * change was driven by application code (via the {@link DockviewApi}) or a
+     * user gesture.
+     */
+    DockviewComponent.prototype.currentOrigin = function () {
+        return this._origin;
+    };
+    /**
+     * Run `func` with the operation origin set to `origin`, restoring the
+     * previous value afterwards. Used by the DockviewApi boundary to tag
+     * programmatic operations as `'api'`, and by user-gesture handlers to tag
+     * `'user'`. Only the outermost caller sets the origin — a nested call (or a
+     * call made while a mutation is already in flight) keeps whatever the
+     * enclosing operation established, so the trigger always wins.
+     */
+    DockviewComponent.prototype.withOrigin = function (origin, func) {
+        if (this._originDepth > 0 || this._mutationDepth > 0) {
+            return func();
+        }
+        var previous = this._origin;
+        this._origin = origin;
+        this._originDepth++;
+        try {
+            return func();
+        }
+        finally {
+            this._originDepth--;
+            this._origin = previous;
+        }
+    };
+    /**
+     * Fire `onDidActivePanelChange` with the panel and the current operation
+     * {@link DockviewOrigin}. Callers keep their own dedupe guards.
+     */
+    DockviewComponent.prototype.fireActivePanelChange = function (panel) {
+        this._onDidActivePanelChange.fire({ panel: panel, origin: this._origin });
+    };
     DockviewComponent.prototype.moveGroupOrPanel = function (options) {
         var _this = this;
-        var _a;
+        this.mutation('move', function () { return _this._doMoveGroupOrPanel(options); });
+    };
+    DockviewComponent.prototype._doMoveGroupOrPanel = function (options) {
+        var _this = this;
+        var _a, _b;
         var destinationGroup = options.to.group;
         var sourceGroupId = options.from.groupId;
         var sourceItemId = options.from.panelId;
@@ -2352,17 +3018,22 @@ var DockviewComponent = /** @class */ (function (_super) {
              * Dropping a panel to the extremities of a group which will place that panel
              * into an adjacent group
              */
+            // The destination group may live in the main grid or in a floating
+            // window's nested gridview — resolve which root we are dropping
+            // into so locations/orientation are computed against it.
+            var destinationGridview_1 = this.getGridviewForGroup(destinationGroup);
             var referenceLocation = (0, gridview_1.getGridLocation)(destinationGroup.element);
-            var targetLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, destinationTarget);
+            var targetLocation = (0, gridview_1.getRelativeLocation)(destinationGridview_1.orientation, referenceLocation, destinationTarget);
             if (sourceGroup.size < 2) {
                 /**
                  * If we are moving from a group which only has one panel left we will consider
                  * moving the group itself rather than moving the panel into a newly created group
                  */
-                var _b = __read((0, array_1.tail)(targetLocation), 2), targetParentLocation = _b[0], to = _b[1];
-                if (sourceGroup.api.location.type === 'grid') {
+                var _c = __read((0, array_1.tail)(targetLocation), 2), targetParentLocation = _c[0], to = _c[1];
+                if (sourceGroup.api.location.type === 'grid' &&
+                    destinationGridview_1 === this.gridview) {
                     var sourceLocation = (0, gridview_1.getGridLocation)(sourceGroup.element);
-                    var _c = __read((0, array_1.tail)(sourceLocation), 2), sourceParentLocation = _c[0], from = _c[1];
+                    var _d = __read((0, array_1.tail)(sourceLocation), 2), sourceParentLocation = _d[0], from = _d[1];
                     if ((0, array_1.sequenceEquals)(sourceParentLocation, targetParentLocation)) {
                         // special case when 'swapping' two views within same grid location
                         // if a group has one tab - we are essentially moving the 'group'
@@ -2375,9 +3046,11 @@ var DockviewComponent = /** @class */ (function (_super) {
                         return;
                     }
                 }
-                if (sourceGroup.api.location.type === 'popout') {
+                if (sourceGroup.api.location.type === 'popout' &&
+                    this.nestedWindowMembers(sourceGroup).length <= 1) {
                     /**
-                     * the source group is a popout group with a single panel
+                     * the source group is the only group in a popout window and
+                     * has a single panel
                      *
                      * 1. remove the panel from the group without triggering any events
                      * 2. remove the popout group — this may cascade-remove the empty
@@ -2385,8 +3058,14 @@ var DockviewComponent = /** @class */ (function (_super) {
                      *    doRemoveGroup for popout groups), which can shift grid indices
                      * 3. recompute the target location now that the grid is stable
                      * 4. create a new group at the recomputed location and add that panel
+                     *
+                     * Multi-group popout windows fall through to the generic
+                     * detach-and-re-add path so the window stays alive.
                      */
-                    var popoutGroup_1 = this._popoutGroups.find(function (group) { return group.popoutGroup === sourceGroup; });
+                    var popoutGroup_1 = (_b = this._popoutWindowService) === null || _b === void 0 ? void 0 : _b.findByGroup(sourceGroup);
+                    if (!popoutGroup_1) {
+                        return;
+                    }
                     var removedPanel_2 = this.movingLock(function () {
                         return popoutGroup_1.popoutGroup.model.removePanel(popoutGroup_1.popoutGroup.panels[0], {
                             skipSetActive: true,
@@ -2394,8 +3073,8 @@ var DockviewComponent = /** @class */ (function (_super) {
                         });
                     });
                     this.doRemoveGroup(sourceGroup, { skipActive: true });
-                    var updatedTargetLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, (0, gridview_1.getGridLocation)(destinationGroup.element), destinationTarget);
-                    var newGroup_1 = this.createGroupAtLocation(updatedTargetLocation);
+                    var updatedTargetLocation = (0, gridview_1.getRelativeLocation)(destinationGridview_1.orientation, (0, gridview_1.getGridLocation)(destinationGroup.element), destinationTarget);
+                    var newGroup_1 = this.createGroupAtLocation(updatedTargetLocation, undefined, undefined, destinationGridview_1);
                     this.movingLock(function () {
                         return newGroup_1.model.openPanel(removedPanel_2, {
                             skipSetActive: true,
@@ -2423,7 +3102,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                     if (!removedPanel_3) {
                         throw new Error("dockview: No panel with id ".concat(sourceItemId));
                     }
-                    var newGroup_2 = this.createGroupAtLocation(targetLocation);
+                    var newGroup_2 = this.createGroupAtLocation(targetLocation, undefined, undefined, destinationGridview_1);
                     this.movingLock(function () {
                         return newGroup_2.model.openPanel(removedPanel_3, {
                             skipSetGroupActive: true,
@@ -2445,8 +3124,11 @@ var DockviewComponent = /** @class */ (function (_super) {
                 });
                 // after deleting the group we need to re-evaulate the ref location
                 var updatedReferenceLocation = (0, gridview_1.getGridLocation)(destinationGroup.element);
-                var location_3 = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
-                this.movingLock(function () { return _this.doAddGroup(targetGroup_1, location_3); });
+                var location_3 = (0, gridview_1.getRelativeLocation)(destinationGridview_1.orientation, updatedReferenceLocation, destinationTarget);
+                this.movingLock(function () {
+                    return _this.doAddGroup(targetGroup_1, location_3, undefined, destinationGridview_1);
+                });
+                this.setGroupLocationForRoot(targetGroup_1, destinationGridview_1);
                 this.doSetGroupAndPanelActive(targetGroup_1);
                 this._onDidMovePanel.fire({
                     panel: this.getGroupPanel(sourceItemId),
@@ -2467,8 +3149,8 @@ var DockviewComponent = /** @class */ (function (_super) {
                 if (!removedPanel_4) {
                     throw new Error("dockview: No panel with id ".concat(sourceItemId));
                 }
-                var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, destinationTarget);
-                var group_2 = this.createGroupAtLocation(dropLocation);
+                var dropLocation = (0, gridview_1.getRelativeLocation)(destinationGridview_1.orientation, referenceLocation, destinationTarget);
+                var group_2 = this.createGroupAtLocation(dropLocation, undefined, undefined, destinationGridview_1);
                 this.movingLock(function () {
                     return group_2.model.openPanel(removedPanel_4, {
                         skipSetGroupActive: true,
@@ -2518,9 +3200,9 @@ var DockviewComponent = /** @class */ (function (_super) {
             return;
         }
         var addPanelsToGroup = function (targetGroup) {
-            var e_32, _a, e_33, _b;
+            var e_28, _a, e_29, _b;
             _this.movingLock(function () {
-                var e_34, _a;
+                var e_30, _a;
                 try {
                     for (var removedPanels_3 = __values(removedPanels), removedPanels_3_1 = removedPanels_3.next(); !removedPanels_3_1.done; removedPanels_3_1 = removedPanels_3.next()) {
                         var panel = removedPanels_3_1.value;
@@ -2531,12 +3213,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                         });
                     }
                 }
-                catch (e_34_1) { e_34 = { error: e_34_1 }; }
+                catch (e_30_1) { e_30 = { error: e_30_1 }; }
                 finally {
                     try {
                         if (removedPanels_3_1 && !removedPanels_3_1.done && (_a = removedPanels_3.return)) _a.call(removedPanels_3);
                     }
-                    finally { if (e_34) throw e_34.error; }
+                    finally { if (e_30) throw e_30.error; }
                 }
             });
             // Recreate the tab group in the destination
@@ -2552,12 +3234,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     targetGroup.model.addPanelToTabGroup(newTabGroup.id, panel.id);
                 }
             }
-            catch (e_32_1) { e_32 = { error: e_32_1 }; }
+            catch (e_28_1) { e_28 = { error: e_28_1 }; }
             finally {
                 try {
                     if (removedPanels_1_1 && !removedPanels_1_1.done && (_a = removedPanels_1.return)) _a.call(removedPanels_1);
                 }
-                finally { if (e_32) throw e_32.error; }
+                finally { if (e_28) throw e_28.error; }
             }
             if (!options.skipSetActive) {
                 _this.doSetGroupAndPanelActive(targetGroup);
@@ -2571,12 +3253,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     });
                 }
             }
-            catch (e_33_1) { e_33 = { error: e_33_1 }; }
+            catch (e_29_1) { e_29 = { error: e_29_1 }; }
             finally {
                 try {
                     if (removedPanels_2_1 && !removedPanels_2_1.done && (_b = removedPanels_2.return)) _b.call(removedPanels_2);
                 }
-                finally { if (e_33) throw e_33.error; }
+                finally { if (e_29) throw e_29.error; }
             }
         };
         var targetGroup;
@@ -2602,8 +3284,26 @@ var DockviewComponent = /** @class */ (function (_super) {
         addPanelsToGroup(targetGroup);
     };
     DockviewComponent.prototype.moveGroup = function (options) {
-        var e_35, _a, e_36, _b, e_37, _c, e_38, _d;
         var _this = this;
+        this.mutation('move', function () { return _this._doMoveGroup(options); });
+    };
+    // Bracket maximize/restore as a 'maximize' transaction. The maximized node
+    // is serialized by the gridview (`SerializedGridview.maximizedNode`), so
+    // the state round-trips through toJSON/fromJSON and is restorable on undo.
+    // When the exit is a side-effect of another bracketed operation (e.g. a
+    // move that activates a different group) the depth counter folds it in.
+    DockviewComponent.prototype.maximizeGroup = function (panel) {
+        var _this = this;
+        this.mutation('maximize', function () { return _super.prototype.maximizeGroup.call(_this, panel); });
+    };
+    DockviewComponent.prototype.exitMaximizedGroup = function () {
+        var _this = this;
+        this.mutation('maximize', function () { return _super.prototype.exitMaximizedGroup.call(_this); });
+    };
+    DockviewComponent.prototype._doMoveGroup = function (options) {
+        var e_31, _a, e_32, _b, e_33, _c, e_34, _d;
+        var _this = this;
+        var _e, _f, _g;
         var from = options.from.group;
         var to = options.to.group;
         var target = options.to.position;
@@ -2634,7 +3334,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 this.doRemoveGroup(from, { skipActive: true });
             }
             this.movingLock(function () {
-                var e_39, _a;
+                var e_35, _a;
                 try {
                     for (var panels_4 = __values(panels_3), panels_4_1 = panels_4.next(); !panels_4_1.done; panels_4_1 = panels_4.next()) {
                         var panel = panels_4_1.value;
@@ -2644,12 +3344,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                         });
                     }
                 }
-                catch (e_39_1) { e_39 = { error: e_39_1 }; }
+                catch (e_35_1) { e_35 = { error: e_35_1 }; }
                 finally {
                     try {
                         if (panels_4_1 && !panels_4_1.done && (_a = panels_4.return)) _a.call(panels_4);
                     }
-                    finally { if (e_39) throw e_39.error; }
+                    finally { if (e_35) throw e_35.error; }
                 }
             });
             try {
@@ -2662,26 +3362,26 @@ var DockviewComponent = /** @class */ (function (_super) {
                         componentParams: snapshot.componentParams,
                     });
                     try {
-                        for (var _e = (e_36 = void 0, __values(snapshot.panelIds)), _f = _e.next(); !_f.done; _f = _e.next()) {
-                            var panelId = _f.value;
+                        for (var _h = (e_32 = void 0, __values(snapshot.panelIds)), _j = _h.next(); !_j.done; _j = _h.next()) {
+                            var panelId = _j.value;
                             to.model.addPanelToTabGroup(newTabGroup.id, panelId);
                         }
                     }
-                    catch (e_36_1) { e_36 = { error: e_36_1 }; }
+                    catch (e_32_1) { e_32 = { error: e_32_1 }; }
                     finally {
                         try {
-                            if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                            if (_j && !_j.done && (_b = _h.return)) _b.call(_h);
                         }
-                        finally { if (e_36) throw e_36.error; }
+                        finally { if (e_32) throw e_32.error; }
                     }
                 }
             }
-            catch (e_35_1) { e_35 = { error: e_35_1 }; }
+            catch (e_31_1) { e_31 = { error: e_31_1 }; }
             finally {
                 try {
                     if (tabGroupSnapshots_1_1 && !tabGroupSnapshots_1_1.done && (_a = tabGroupSnapshots_1.return)) _a.call(tabGroupSnapshots_1);
                 }
-                finally { if (e_35) throw e_35.error; }
+                finally { if (e_31) throw e_31.error; }
             }
             // Ensure group becomes active after move
             if (options.skipSetActive !== true) {
@@ -2723,8 +3423,15 @@ var DockviewComponent = /** @class */ (function (_super) {
                     });
                 });
                 source = this.createGroup();
+                // The new source group enters the layout via gridview.addView
+                // below, which bypasses doAddGroup and so doesn't fire
+                // BaseGrid._onDidAdd. Modules (TabGroupChips, etc.) drive
+                // per-group attachment off _onDidAddGroup, so we fire it
+                // explicitly here — matches the pattern in addFloatingGroup
+                // and addEdgeGroup.
+                this._onDidAddGroup.fire(source);
                 this.movingLock(function () {
-                    var e_40, _a;
+                    var e_36, _a;
                     try {
                         for (var movedPanels_2 = __values(movedPanels_1), movedPanels_2_1 = movedPanels_2.next(); !movedPanels_2_1.done; movedPanels_2_1 = movedPanels_2.next()) {
                             var panel = movedPanels_2_1.value;
@@ -2734,12 +3441,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                             });
                         }
                     }
-                    catch (e_40_1) { e_40 = { error: e_40_1 }; }
+                    catch (e_36_1) { e_36 = { error: e_36_1 }; }
                     finally {
                         try {
                             if (movedPanels_2_1 && !movedPanels_2_1.done && (_a = movedPanels_2.return)) _a.call(movedPanels_2);
                         }
-                        finally { if (e_40) throw e_40.error; }
+                        finally { if (e_36) throw e_36.error; }
                     }
                 });
                 try {
@@ -2752,26 +3459,26 @@ var DockviewComponent = /** @class */ (function (_super) {
                             componentParams: snapshot.componentParams,
                         });
                         try {
-                            for (var _g = (e_38 = void 0, __values(snapshot.panelIds)), _h = _g.next(); !_h.done; _h = _g.next()) {
-                                var panelId = _h.value;
+                            for (var _k = (e_34 = void 0, __values(snapshot.panelIds)), _l = _k.next(); !_l.done; _l = _k.next()) {
+                                var panelId = _l.value;
                                 source.model.addPanelToTabGroup(newTabGroup.id, panelId);
                             }
                         }
-                        catch (e_38_1) { e_38 = { error: e_38_1 }; }
+                        catch (e_34_1) { e_34 = { error: e_34_1 }; }
                         finally {
                             try {
-                                if (_h && !_h.done && (_d = _g.return)) _d.call(_g);
+                                if (_l && !_l.done && (_d = _k.return)) _d.call(_k);
                             }
-                            finally { if (e_38) throw e_38.error; }
+                            finally { if (e_34) throw e_34.error; }
                         }
                     }
                 }
-                catch (e_37_1) { e_37 = { error: e_37_1 }; }
+                catch (e_33_1) { e_33 = { error: e_33_1 }; }
                 finally {
                     try {
                         if (tabGroupSnapshots_2_1 && !tabGroupSnapshots_2_1.done && (_c = tabGroupSnapshots_2.return)) _c.call(tabGroupSnapshots_2);
                     }
-                    finally { if (e_37) throw e_37.error; }
+                    finally { if (e_33) throw e_33.error; }
                 }
             }
             else {
@@ -2780,23 +3487,34 @@ var DockviewComponent = /** @class */ (function (_super) {
                         this.gridview.removeView((0, gridview_1.getGridLocation)(from.element));
                         break;
                     case 'floating': {
-                        var selectedFloatingGroup = this._floatingGroups.find(function (x) { return x.group === from; });
+                        var selectedFloatingGroup = (_e = this._floatingGroupService) === null || _e === void 0 ? void 0 : _e.findByGroup(from);
                         if (!selectedFloatingGroup) {
                             throw new Error('dockview: failed to find floating group');
                         }
-                        selectedFloatingGroup.dispose();
+                        // Detach just this group from the floating window's
+                        // nested gridview, keeping the window (and its other
+                        // groups) alive. If it was the only member, dispose the
+                        // whole window.
+                        if (!this.detachFromNestedWindow(from)) {
+                            selectedFloatingGroup.dispose();
+                        }
                         break;
                     }
                     case 'popout': {
-                        var selectedPopoutGroup = this._popoutGroups.find(function (x) { return x.popoutGroup === from; });
+                        var selectedPopoutGroup = (_f = this._popoutWindowService) === null || _f === void 0 ? void 0 : _f.findByGroup(from);
                         if (!selectedPopoutGroup) {
                             throw new Error('dockview: failed to find popout group');
                         }
-                        // Remove from popout groups list to prevent automatic restoration
-                        var index = this._popoutGroups.indexOf(selectedPopoutGroup);
-                        if (index >= 0) {
-                            this._popoutGroups.splice(index, 1);
+                        // Detach just this group from the popout window's
+                        // nested gridview, keeping the window + its other groups
+                        // alive. Destination containers/location are applied by
+                        // the placement block below.
+                        if (this.detachFromNestedWindow(from)) {
+                            break;
                         }
+                        // Last group leaving — tear the window down. Remove from
+                        // the service first to prevent automatic restoration.
+                        (_g = this._popoutWindowService) === null || _g === void 0 ? void 0 : _g.remove(selectedPopoutGroup);
                         // Clean up the reference group (ghost) if it exists and is hidden
                         if (selectedPopoutGroup.referenceGroup) {
                             var referenceGroup = this.getPanel(selectedPopoutGroup.referenceGroup);
@@ -2807,34 +3525,25 @@ var DockviewComponent = /** @class */ (function (_super) {
                                 });
                             }
                         }
-                        // Manually dispose the window without triggering restoration
+                        // Dispose the window without triggering restoration. The
+                        // placement block below applies the destination
+                        // location and containers to `from`.
                         selectedPopoutGroup.window.dispose();
-                        // Update group's location and containers for target
-                        if (to.api.location.type === 'grid') {
-                            from.model.renderContainer =
-                                this.overlayRenderContainer;
-                            from.model.dropTargetContainer =
-                                this.rootDropTargetContainer;
-                            from.model.location = { type: 'grid' };
-                        }
-                        else if (to.api.location.type === 'floating') {
-                            from.model.renderContainer =
-                                this.overlayRenderContainer;
-                            from.model.dropTargetContainer =
-                                this.rootDropTargetContainer;
-                            from.model.location = { type: 'floating' };
-                        }
                         break;
                     }
                 }
             }
-            // For moves to grid locations
-            if (to.api.location.type === 'grid') {
+            // Place `source` next to `to`, in whichever gridview root `to`
+            // lives in. When `to` is inside a floating / popout window this
+            // splits that window's nested layout rather than spawning a new one.
+            if (to.api.location.type === 'grid' ||
+                to.api.location.type === 'floating' ||
+                to.api.location.type === 'popout') {
+                var destGridview = this.getGridviewForGroup(to);
                 var referenceLocation = (0, gridview_1.getGridLocation)(to.element);
-                var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target);
-                // Add to grid for all moves targeting grid location
+                var dropLocation = (0, gridview_1.getRelativeLocation)(destGridview.orientation, referenceLocation, target);
                 var size = void 0;
-                switch (this.gridview.orientation) {
+                switch (destGridview.orientation) {
                     case splitview_1.Orientation.VERTICAL:
                         size =
                             referenceLocation.length % 2 == 0
@@ -2848,43 +3557,8 @@ var DockviewComponent = /** @class */ (function (_super) {
                                 : from.api.width;
                         break;
                 }
-                this.gridview.addView(source, size, dropLocation);
-            }
-            else if (to.api.location.type === 'floating') {
-                // For moves to floating locations, add as floating group
-                // Get the position/size from the target floating group
-                var targetFloatingGroup = this._floatingGroups.find(function (x) { return x.group === to; });
-                if (targetFloatingGroup) {
-                    var box = targetFloatingGroup.overlay.toJSON();
-                    // Calculate position based on available properties
-                    var left = void 0, top_1;
-                    if ('left' in box) {
-                        left = box.left + 50;
-                    }
-                    else if ('right' in box) {
-                        left = Math.max(0, box.right - box.width - 50);
-                    }
-                    else {
-                        left = 50; // Default fallback
-                    }
-                    if ('top' in box) {
-                        top_1 = box.top + 50;
-                    }
-                    else if ('bottom' in box) {
-                        top_1 = Math.max(0, box.bottom - box.height - 50);
-                    }
-                    else {
-                        top_1 = 50; // Default fallback
-                    }
-                    this.addFloatingGroup(source, {
-                        height: box.height,
-                        width: box.width,
-                        position: {
-                            left: left,
-                            top: top_1,
-                        },
-                    });
-                }
+                destGridview.addView(source, size, dropLocation);
+                this.setGroupLocationForRoot(source, destGridview);
             }
         }
         source.panels.forEach(function (panel) {
@@ -2905,14 +3579,16 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
     };
     DockviewComponent.prototype.doSetGroupActive = function (group) {
+        var _a;
         _super.prototype.doSetGroupActive.call(this, group);
         var activePanel = this.activePanel;
         if (!this._moving &&
-            activePanel !== this._onDidActivePanelChange.value) {
-            this._onDidActivePanelChange.fire(activePanel);
+            activePanel !== ((_a = this._onDidActivePanelChange.value) === null || _a === void 0 ? void 0 : _a.panel)) {
+            this.fireActivePanelChange(activePanel);
         }
     };
     DockviewComponent.prototype.doSetGroupAndPanelActive = function (group) {
+        var _a;
         _super.prototype.doSetGroupActive.call(this, group);
         var activePanel = this.activePanel;
         if (group &&
@@ -2921,8 +3597,8 @@ var DockviewComponent = /** @class */ (function (_super) {
             this.exitMaximizedGroup();
         }
         if (!this._moving &&
-            activePanel !== this._onDidActivePanelChange.value) {
-            this._onDidActivePanelChange.fire(activePanel);
+            activePanel !== ((_a = this._onDidActivePanelChange.value) === null || _a === void 0 ? void 0 : _a.panel)) {
+            this.fireActivePanelChange(activePanel);
         }
     };
     DockviewComponent.prototype.getNextGroupId = function () {
@@ -2952,9 +3628,11 @@ var DockviewComponent = /** @class */ (function (_super) {
         view.init({ params: {}, accessor: this });
         if (!this._groups.has(view.id)) {
             var disposable = new lifecycle_1.CompositeDisposable(view.model.onTabDragStart(function (event) {
-                _this._onWillDragPanel.fire(event);
+                var _a;
+                (_a = _this._advancedDnDService) === null || _a === void 0 ? void 0 : _a.dispatchWillDragPanel(event);
             }), view.model.onGroupDragStart(function (event) {
-                _this._onWillDragGroup.fire(event);
+                var _a;
+                (_a = _this._advancedDnDService) === null || _a === void 0 ? void 0 : _a.dispatchWillDragGroup(event);
             }), view.model.onMove(function (event) {
                 var groupId = event.groupId, itemId = event.itemId, target = event.target, index = event.index, tabGroupId = event.tabGroupId;
                 _this.moveGroupOrPanel({
@@ -2972,15 +3650,19 @@ var DockviewComponent = /** @class */ (function (_super) {
             }), view.model.onDidDrop(function (event) {
                 _this._onDidDrop.fire(event);
             }), view.model.onWillDrop(function (event) {
-                _this._onWillDrop.fire(event);
+                var _a;
+                (_a = _this._advancedDnDService) === null || _a === void 0 ? void 0 : _a.dispatchWillDrop(event);
             }), view.model.onWillShowOverlay(function (event) {
+                var _a;
                 if (_this.options.disableDnd) {
+                    // Engine policy — stays in core, ahead of any
+                    // customisation dispatch.
                     event.preventDefault();
                     return;
                 }
-                _this._onWillShowOverlay.fire(event);
-            }), view.model.onUnhandledDragOverEvent(function (event) {
-                _this._onUnhandledDragOverEvent.fire(event);
+                (_a = _this._advancedDnDService) === null || _a === void 0 ? void 0 : _a.dispatchWillShowOverlay(event);
+            }), view.model.onUnhandledDragOver(function (event) {
+                _this._onUnhandledDragOver.fire(event);
             }), view.model.onDidAddPanel(function (event) {
                 if (_this._moving) {
                     return;
@@ -2992,27 +3674,17 @@ var DockviewComponent = /** @class */ (function (_super) {
                 }
                 _this._onDidRemovePanel.fire(event.panel);
             }), view.model.onDidActivePanelChange(function (event) {
+                var _a;
                 if (_this._moving) {
                     return;
                 }
                 if (event.panel !== _this.activePanel) {
                     return;
                 }
-                if (_this._onDidActivePanelChange.value !== event.panel) {
-                    _this._onDidActivePanelChange.fire(event.panel);
-                }
-            }), view.model.onDidCreateTabGroup(function (e) {
-                _this._onDidCreateTabGroup.fire(e);
-            }), view.model.onDidDestroyTabGroup(function (e) {
-                _this._onDidDestroyTabGroup.fire(e);
-            }), view.model.onDidAddPanelToTabGroup(function (e) {
-                _this._onDidAddPanelToTabGroup.fire(e);
-            }), view.model.onDidRemovePanelFromTabGroup(function (e) {
-                _this._onDidRemovePanelFromTabGroup.fire(e);
-            }), view.model.onDidTabGroupChange(function (e) {
-                _this._onDidTabGroupChange.fire(e);
-            }), view.model.onDidTabGroupCollapsedChange(function (e) {
-                _this._onDidTabGroupCollapsedChange.fire(e);
+                if (((_a = _this._onDidActivePanelChange.value) === null || _a === void 0 ? void 0 : _a.panel) !==
+                    event.panel) {
+                    _this.fireActivePanelChange(event.panel);
+                }
             }), events_1.Event.any(view.model.onDidPanelTitleChange, view.model.onDidPanelParametersChange)(function () {
                 _this._bufferOnDidLayoutChange.fire();
             }));
@@ -3040,11 +3712,76 @@ var DockviewComponent = /** @class */ (function (_super) {
         });
         return panel;
     };
-    DockviewComponent.prototype.createGroupAtLocation = function (location, size, options) {
+    DockviewComponent.prototype.createGroupAtLocation = function (location, size, options, gridview) {
+        if (gridview === void 0) { gridview = this.gridview; }
         var group = this.createGroup(options);
-        this.doAddGroup(group, location, size);
+        this.doAddGroup(group, location, size, gridview);
+        this.setGroupLocationForRoot(group, gridview);
         return group;
     };
+    /**
+     * Tag a group with the location and render / drop-target containers
+     * matching the gridview root it now lives in: the main grid, a floating
+     * window (shares the main containers), or a popout window (uses its own
+     * window-local containers).
+     */
+    DockviewComponent.prototype.setGroupLocationForRoot = function (group, gridview) {
+        var _a;
+        var popout = (_a = this._popoutWindowService) === null || _a === void 0 ? void 0 : _a.entries.find(function (entry) { return entry.gridview === gridview; });
+        if (popout) {
+            if (group.model.renderContainer !== popout.overlayRenderContainer) {
+                group.model.renderContainer = popout.overlayRenderContainer;
+            }
+            group.model.dropTargetContainer = popout.dropTargetContainer;
+            group.model.location = {
+                type: 'popout',
+                getWindow: popout.getWindow,
+                popoutUrl: popout.popoutUrl,
+            };
+            return;
+        }
+        // grid / floating both render through the main containers
+        if (group.model.renderContainer !== this.overlayRenderContainer) {
+            group.model.renderContainer = this.overlayRenderContainer;
+        }
+        group.model.dropTargetContainer = this.rootDropTargetContainer;
+        group.model.location =
+            gridview === this.gridview
+                ? { type: 'grid' }
+                : { type: 'floating' };
+    };
+    /**
+     * Resolve which gridview root currently owns a group: the main grid, or
+     * the nested gridview of the floating / popout window it lives in.
+     */
+    DockviewComponent.prototype.getGridviewForGroup = function (group) {
+        var _a, _b;
+        var floating = (_a = this._floatingGroupService) === null || _a === void 0 ? void 0 : _a.findByGroup(group);
+        if (floating) {
+            return floating.gridview;
+        }
+        // Use findByGroup (anchor-identity OR containment) for symmetry with
+        // the floating branch — it also resolves an anchor whose element is
+        // briefly detached from the gridview during a move/restore.
+        var popout = (_b = this._popoutWindowService) === null || _b === void 0 ? void 0 : _b.findByGroup(group);
+        if (popout) {
+            return popout.gridview;
+        }
+        return this.gridview;
+    };
+    /**
+     * The groups that live within the same floating / popout window as `group`
+     * (including `group` itself). Empty when `group` is in the main grid.
+     */
+    DockviewComponent.prototype.nestedWindowMembers = function (group) {
+        var gridview = this.getGridviewForGroup(group);
+        if (gridview === this.gridview) {
+            return [];
+        }
+        return this.groups.filter(function (candidate) {
+            return gridview.element.contains(candidate.element);
+        });
+    };
     DockviewComponent.prototype.findGroup = function (panel) {
         var _a;
         return (_a = Array.from(this._groups.values()).find(function (group) {
@@ -3057,44 +3794,53 @@ var DockviewComponent = /** @class */ (function (_super) {
             ? rootOrientation
             : (0, gridview_1.orthogonal)(rootOrientation);
     };
-    DockviewComponent.prototype.updateDropTargetModel = function (options) {
-        if ('dndEdges' in options) {
-            var disabled = typeof options.dndEdges === 'boolean' &&
-                options.dndEdges === false;
-            this._rootDropTarget.disabled = disabled;
-            this._rootPointerDropTarget.disabled = disabled;
-            if (typeof options.dndEdges === 'object' &&
-                options.dndEdges !== null) {
-                this._rootDropTarget.setOverlayModel(options.dndEdges);
-                this._rootPointerDropTarget.setOverlayModel(options.dndEdges);
-            }
-            else {
-                this._rootDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
-                this._rootPointerDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
-            }
-        }
-        if ('rootOverlayModel' in options) {
-            this.updateDropTargetModel({ dndEdges: options.dndEdges });
-        }
-    };
     DockviewComponent.prototype.updateTheme = function () {
-        var e_41, _a;
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        var theme = (_b = this._options.theme) !== null && _b !== void 0 ? _b : theme_1.themeAbyss;
+        var e_37, _a, e_38, _b, e_39, _c;
+        var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var theme = (_d = this._options.theme) !== null && _d !== void 0 ? _d : theme_1.themeAbyss;
         // Apply the theme class only to the shell so edge groups and the
         // main grid both inherit its CSS custom properties via the cascade.
         // Re-declaring it on `.dv-dockview` would block consumer overrides
         // set on the shell from reaching the dockview subtree.
-        (_c = this._shellThemeClassnames) === null || _c === void 0 ? void 0 : _c.setClassNames(theme.className);
-        this.gridview.margin = (_d = theme.gap) !== null && _d !== void 0 ? _d : 0;
-        (_e = this._shellManager) === null || _e === void 0 ? void 0 : _e.updateTheme((_f = theme.gap) !== null && _f !== void 0 ? _f : 0, (_g = theme.edgeGroupCollapsedSize) !== null && _g !== void 0 ? _g : 35);
+        (_e = this._shellThemeClassnames) === null || _e === void 0 ? void 0 : _e.setClassNames(theme.className);
+        var gap = (_f = theme.gap) !== null && _f !== void 0 ? _f : 0;
+        this.gridview.margin = gap;
+        try {
+            // Floating / popout windows host their own nested gridviews; keep their
+            // gap in sync with the main grid when the theme changes at runtime.
+            for (var _p = __values(this.floatingGroups), _q = _p.next(); !_q.done; _q = _p.next()) {
+                var floating = _q.value;
+                floating.gridview.margin = gap;
+            }
+        }
+        catch (e_37_1) { e_37 = { error: e_37_1 }; }
+        finally {
+            try {
+                if (_q && !_q.done && (_a = _p.return)) _a.call(_p);
+            }
+            finally { if (e_37) throw e_37.error; }
+        }
+        try {
+            for (var _r = __values((_h = (_g = this._popoutWindowService) === null || _g === void 0 ? void 0 : _g.entries) !== null && _h !== void 0 ? _h : []), _s = _r.next(); !_s.done; _s = _r.next()) {
+                var entry = _s.value;
+                entry.gridview.margin = gap;
+            }
+        }
+        catch (e_38_1) { e_38 = { error: e_38_1 }; }
+        finally {
+            try {
+                if (_s && !_s.done && (_b = _r.return)) _b.call(_r);
+            }
+            finally { if (e_38) throw e_38.error; }
+        }
+        (_j = this._shellManager) === null || _j === void 0 ? void 0 : _j.updateTheme(gap, (_k = theme.edgeGroupCollapsedSize) !== null && _k !== void 0 ? _k : 35);
         if (theme.dndOverlayBorder !== undefined) {
             this.element.style.setProperty('--dv-drag-over-border', theme.dndOverlayBorder);
-            (_h = this._shellManager) === null || _h === void 0 ? void 0 : _h.element.style.setProperty('--dv-drag-over-border', theme.dndOverlayBorder);
+            (_l = this._shellManager) === null || _l === void 0 ? void 0 : _l.element.style.setProperty('--dv-drag-over-border', theme.dndOverlayBorder);
         }
         else {
             this.element.style.removeProperty('--dv-drag-over-border');
-            (_j = this._shellManager) === null || _j === void 0 ? void 0 : _j.element.style.removeProperty('--dv-drag-over-border');
+            (_m = this._shellManager) === null || _m === void 0 ? void 0 : _m.element.style.removeProperty('--dv-drag-over-border');
         }
         switch (theme.dndOverlayMounting) {
             case 'absolute':
@@ -3107,24 +3853,24 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
         // Toggle a CSS class so theme stylesheets can scope pure-CSS
         // tab group indicator rules to the 'none' mode only.
-        var indicatorNone = ((_k = theme.tabGroupIndicator) !== null && _k !== void 0 ? _k : 'wrap') === 'none';
+        var indicatorNone = ((_o = theme.tabGroupIndicator) !== null && _o !== void 0 ? _o : 'wrap') === 'none';
         (0, dom_1.toggleClass)(this.element, 'dv-tab-group-indicator-none', indicatorNone);
         if (this._shellManager) {
             (0, dom_1.toggleClass)(this._shellManager.element, 'dv-tab-group-indicator-none', indicatorNone);
         }
         try {
             // Re-render tab group indicators so the new tabGroupIndicator mode takes effect
-            for (var _l = __values(this.groups), _m = _l.next(); !_m.done; _m = _l.next()) {
-                var group = _m.value;
+            for (var _t = __values(this.groups), _u = _t.next(); !_u.done; _u = _t.next()) {
+                var group = _u.value;
                 group.model.updateTabGroups();
             }
         }
-        catch (e_41_1) { e_41 = { error: e_41_1 }; }
+        catch (e_39_1) { e_39 = { error: e_39_1 }; }
         finally {
             try {
-                if (_m && !_m.done && (_a = _l.return)) _a.call(_l);
+                if (_u && !_u.done && (_c = _t.return)) _c.call(_t);
             }
-            finally { if (e_41) throw e_41.error; }
+            finally { if (e_39) throw e_39.error; }
         }
     };
     return DockviewComponent;