dockview-core 7.0.3 → 8.0.0

package/dist/esm/dockview/dockviewComponent.js

@@ -1,3214 +0,0 @@
-import { getRelativeLocation, getGridLocation, orthogonal, Gridview, } from '../gridview/gridview';
-import { directionToPosition, } from '../dnd/droptarget';
-import { tail, sequenceEquals } from '../array';
-import { DockviewPanel } from './dockviewPanel';
-import { CompositeDisposable, Disposable } from '../lifecycle';
-import { Event, Emitter, addDisposableListener } from '../events';
-import { Watermark } from './components/watermark/watermark';
-import { sequentialNumberGenerator } from '../math';
-import { DefaultDockviewDeserialzier } from './deserializer';
-import { DockviewUnhandledDragOverEvent, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, } from './options';
-import { BaseGrid, toTarget, } from '../gridview/baseComponentGridview';
-import { DockviewApi } from '../api/component.api';
-import { Orientation, Sizing } from '../splitview/splitview';
-import { DockviewDidDropEvent, DockviewWillDropEvent, } from './dockviewGroupPanelModel';
-import { DockviewWillShowOverlayLocationEvent, } from './events';
-import { DockviewGroupPanel } from './dockviewGroupPanel';
-import { DockviewPanelModel } from './dockviewPanelModel';
-import { getPanelData } from '../dnd/dataTransfer';
-import { Overlay } from '../overlay/overlay';
-import { Classnames, getDockviewTheme, onDidWindowResizeEnd, onDidWindowMoveEnd, toggleClass, } from '../dom';
-import { FloatingTitleBar } from './components/titlebar/floatingTitleBar';
-import { assertModule, getRegisteredModules, isDockviewPackageLoaded, ModuleRegistry, } from './modules';
-import { AllModules } from './allModules';
-import { DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, DEFAULT_FLOATING_GROUP_POSITION, DESERIALIZATION_POPOUT_DELAY_MS, } from '../constants';
-import { OverlayRenderContainer, } from '../overlay/overlayRenderContainer';
-import { PopoutWindow } from '../popoutWindow';
-import { StrictEventsSequencing } from './strictEventsSequencing';
-import { PopupService } from './components/popupService';
-import { DropTargetAnchorContainer } from '../dnd/dropTargetAnchorContainer';
-import { themeAbyss } from './theme';
-import { ShellManager, } from './dockviewShell';
-import { DEFAULT_TAB_GROUP_COLORS, TabGroupColorPalette, } from './tabGroupAccent';
-function buildTabGroupColorPalette(options) {
-    var _a;
-    const entries = (_a = options.tabGroupColors) !== null && _a !== void 0 ? _a : DEFAULT_TAB_GROUP_COLORS;
-    const enabled = options.tabGroupAccent !== 'off';
-    return new TabGroupColorPalette(entries, enabled);
-}
-function moveGroupWithoutDestroying(options) {
-    const activePanel = options.from.activePanel;
-    const panels = [...options.from.panels].map((panel) => {
-        const removedPanel = options.from.model.removePanel(panel);
-        options.from.model.renderContainer.detatch(panel);
-        return removedPanel;
-    });
-    panels.forEach((panel) => {
-        options.to.model.openPanel(panel, {
-            skipSetActive: activePanel !== panel,
-            skipSetGroupActive: true,
-        });
-    });
-}
-let _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() {
-    var _a;
-    if (typeof process !== 'undefined' &&
-        ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'production') {
-        return;
-    }
-    if (_hasWarnedUsingCoreDirectly || 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.');
-}
-export class DockviewComponent extends BaseGrid {
-    fireDidCreateTabGroup(event) {
-        this._onDidCreateTabGroup.fire(event);
-    }
-    fireDidDestroyTabGroup(event) {
-        this._onDidDestroyTabGroup.fire(event);
-    }
-    fireDidAddPanelToTabGroup(event) {
-        this._onDidAddPanelToTabGroup.fire(event);
-    }
-    fireDidRemovePanelFromTabGroup(event) {
-        this._onDidRemovePanelFromTabGroup.fire(event);
-    }
-    fireDidTabGroupChange(event) {
-        this._onDidTabGroupChange.fire(event);
-    }
-    fireDidTabGroupCollapsedChange(event) {
-        this._onDidTabGroupCollapsedChange.fire(event);
-    }
-    get orientation() {
-        return this.gridview.orientation;
-    }
-    get totalPanels() {
-        return this.panels.length;
-    }
-    get panels() {
-        return this.groups.flatMap((group) => group.panels);
-    }
-    get options() {
-        return this._options;
-    }
-    get tabGroupColorPalette() {
-        return this._tabGroupColorPalette;
-    }
-    get activePanel() {
-        const activeGroup = this.activeGroup;
-        if (!activeGroup) {
-            return undefined;
-        }
-        return activeGroup.activePanel;
-    }
-    get renderer() {
-        var _a;
-        return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisible';
-    }
-    get defaultHeaderPosition() {
-        var _a;
-        return (_a = this.options.defaultHeaderPosition) !== null && _a !== void 0 ? _a : 'top';
-    }
-    get api() {
-        return this._api;
-    }
-    get 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 : []);
-    }
-    /**
-     * 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.
-     */
-    _gatherFloatingGroupBoxes(exclude) {
-        var _a;
-        const container = (_a = this._floatingOverlayHost) !== null && _a !== void 0 ? _a : this.gridview.element;
-        const containerRect = container.getBoundingClientRect();
-        return this.floatingGroups
-            .filter((floating) => floating.group !== exclude)
-            .map((floating) => {
-            const rect = floating.overlay.element.getBoundingClientRect();
-            return {
-                left: rect.left - containerRect.left,
-                top: rect.top - containerRect.top,
-                width: rect.width,
-                height: rect.height,
-            };
-        });
-    }
-    get _floatingGroupService() {
-        return this._moduleRegistry.services.floatingGroupService;
-    }
-    get _popoutWindowService() {
-        return this._moduleRegistry.services.popoutWindowService;
-    }
-    get _watermarkService() {
-        // Tier 1 module — optional. Callers must `?.`-guard so the module
-        // can be removed from AllModules without crashing the component.
-        return this._moduleRegistry.services.watermarkService;
-    }
-    get _edgeGroupService() {
-        return this._moduleRegistry.services.edgeGroupService;
-    }
-    get _rootDropTargetService() {
-        // Optional like every other module service — RootDropTargetModule can be
-        // removed from the registered set without crashing the component.
-        return this._moduleRegistry.services.rootDropTargetService;
-    }
-    get _advancedDnDService() {
-        // 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;
-    }
-    get headerActionsService() {
-        return this._moduleRegistry.services.headerActionsService;
-    }
-    isGridEmpty() {
-        return this.gridview.length === 0;
-    }
-    rootDropTargetOverrideTarget() {
-        var _a;
-        return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model;
-    }
-    dispatchUnhandledDragOver(nativeEvent, position) {
-        const event = new DockviewUnhandledDragOverEvent(nativeEvent, 'edge', position, 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.
-    fireWillDragPanel(event) {
-        this._onWillDragPanel.fire(event);
-    }
-    fireWillDragGroup(event) {
-        this._onWillDragGroup.fire(event);
-    }
-    fireWillDrop(event) {
-        this._onWillDrop.fire(event);
-    }
-    fireWillShowOverlay(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.
-     */
-    buildGroupDragGhost(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.
-     */
-    resolveDropOverlayModel(location, group) {
-        var _a;
-        return (_a = this._advancedDnDService) === null || _a === void 0 ? void 0 : _a.resolveOverlayModel(location, group);
-    }
-    // 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 rootElement() {
-        var _a, _b;
-        return (_b = (_a = this._shellManager) === null || _a === void 0 ? void 0 : _a.element) !== null && _b !== void 0 ? _b : this.element;
-    }
-    /**
-     * 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.
-     */
-    adjacentGroup(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;
-        }
-        const location = 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.
-     */
-    adjacentGroupInDirection(group, direction) {
-        if (group.api.location.type !== 'grid') {
-            return undefined;
-        }
-        const from = group.element.getBoundingClientRect();
-        const fromX = from.left + from.width / 2;
-        const fromY = from.top + from.height / 2;
-        let best;
-        let bestDistance = Number.POSITIVE_INFINITY;
-        for (const candidate of this.groups) {
-            if (candidate === group || candidate.api.location.type !== 'grid') {
-                continue;
-            }
-            const rect = candidate.element.getBoundingClientRect();
-            const dx = rect.left + rect.width / 2 - fromX;
-            const 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.
-            const 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;
-            }
-            const distance = dx * dx + dy * dy;
-            if (distance < bestDistance) {
-                bestDistance = distance;
-                best = candidate;
-            }
-        }
-        return best;
-    }
-    showDropPreview(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 : Disposable.NONE);
-    }
-    announce(message) {
-        var _a;
-        (_a = this._moduleRegistry.services.liveRegionService) === null || _a === void 0 ? void 0 : _a.announce(message);
-    }
-    dockPanel(panel, group, position) {
-        this.moveGroupOrPanel({
-            from: { groupId: panel.group.id, panelId: panel.id },
-            to: { group, position },
-        });
-    }
-    get contextMenuService() {
-        // Owned by ContextMenuModule — undefined when the module is not
-        // registered, so callers must `?.`-guard.
-        return this._moduleRegistry.services.contextMenuService;
-    }
-    get mountElement() {
-        return this.gridview.element;
-    }
-    hasVisibleGridGroup() {
-        return this.groups.some((group) => group.api.location.type === 'grid' && group.api.isVisible);
-    }
-    fireLayoutChange() {
-        this._bufferOnDidLayoutChange.fire();
-    }
-    /**
-     * 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 popoutRestorationPromise() {
-        var _a, _b;
-        return ((_b = (_a = this._popoutWindowService) === null || _a === void 0 ? void 0 : _a.restorationPromise) !== null && _b !== void 0 ? _b : Promise.resolve());
-    }
-    constructor(container, options) {
-        var _a, _b, _c, _d, _e;
-        super(container, {
-            proportionalLayout: true,
-            orientation: Orientation.HORIZONTAL,
-            styles: options.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : 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,
-            className: options.className,
-        });
-        this.nextGroupId = sequentialNumberGenerator();
-        this._deserializer = new DefaultDockviewDeserialzier(this);
-        this._moduleRegistry = new ModuleRegistry();
-        this._onWillDragPanel = new Emitter();
-        this.onWillDragPanel = this._onWillDragPanel.event;
-        this._onWillDragGroup = new Emitter();
-        this.onWillDragGroup = this._onWillDragGroup.event;
-        this._onDidDrop = new Emitter();
-        this.onDidDrop = this._onDidDrop.event;
-        this._onWillDrop = new 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 Emitter();
-        this.onWillMutateLayout = this._onWillMutateLayout.event;
-        this._onDidMutateLayout = new Emitter();
-        this.onDidMutateLayout = this._onDidMutateLayout.event;
-        this._onWillShowOverlay = new Emitter();
-        this.onWillShowOverlay = this._onWillShowOverlay.event;
-        this._onUnhandledDragOver = new Emitter();
-        this.onUnhandledDragOver = this._onUnhandledDragOver.event;
-        this._onDidRemovePanel = new Emitter();
-        this.onDidRemovePanel = this._onDidRemovePanel.event;
-        this._onDidAddPanel = new Emitter();
-        this.onDidAddPanel = this._onDidAddPanel.event;
-        this._onDidPopoutGroupSizeChange = new Emitter();
-        this.onDidPopoutGroupSizeChange = this._onDidPopoutGroupSizeChange.event;
-        this._onDidPopoutGroupPositionChange = new Emitter();
-        this.onDidPopoutGroupPositionChange = this._onDidPopoutGroupPositionChange.event;
-        this._onDidAddPopoutGroup = new Emitter();
-        this.onDidAddPopoutGroup = this._onDidAddPopoutGroup.event;
-        this._onDidRemovePopoutGroup = new Emitter();
-        this.onDidRemovePopoutGroup = this._onDidRemovePopoutGroup.event;
-        this._onDidOpenPopoutWindowFail = new Emitter();
-        this.onDidOpenPopoutWindowFail = this._onDidOpenPopoutWindowFail.event;
-        this._onDidLayoutFromJSON = new Emitter();
-        this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
-        this._onDidActivePanelChange = new Emitter({ replay: true });
-        this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this._onDidMovePanel = new Emitter();
-        this.onDidMovePanel = this._onDidMovePanel.event;
-        this._onDidCreateTabGroup = new Emitter();
-        this.onDidCreateTabGroup = this._onDidCreateTabGroup.event;
-        this._onDidDestroyTabGroup = new Emitter();
-        this.onDidDestroyTabGroup = this._onDidDestroyTabGroup.event;
-        this._onDidAddPanelToTabGroup = new Emitter();
-        this.onDidAddPanelToTabGroup = this._onDidAddPanelToTabGroup.event;
-        this._onDidRemovePanelFromTabGroup = new Emitter();
-        this.onDidRemovePanelFromTabGroup = this._onDidRemovePanelFromTabGroup.event;
-        this._onDidTabGroupChange = new Emitter();
-        this.onDidTabGroupChange = this._onDidTabGroupChange.event;
-        this._onDidTabGroupCollapsedChange = new Emitter();
-        this.onDidTabGroupCollapsedChange = this._onDidTabGroupCollapsedChange.event;
-        this._onDidMaximizedGroupChange = new Emitter();
-        this.onDidMaximizedGroupChange = this._onDidMaximizedGroupChange.event;
-        this._inShellLayout = false;
-        this._onDidRemoveGroup = new Emitter();
-        this.onDidRemoveGroup = this._onDidRemoveGroup.event;
-        this._onDidAddGroup = new Emitter();
-        this.onDidAddGroup = this._onDidAddGroup.event;
-        this._onDidOptionsChange = new Emitter();
-        this.onDidOptionsChange = this._onDidOptionsChange.event;
-        this._onDidActiveGroupChange = new Emitter();
-        this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
-        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.
-        const explicitModules = options
-            .modules;
-        const modules = explicitModules !== null && explicitModules !== void 0 ? explicitModules : [
-            ...AllModules,
-            ...getRegisteredModules(),
-        ];
-        for (const module of modules) {
-            this._moduleRegistry.register(module);
-        }
-        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.
-        const popoutWindowService = this._popoutWindowService;
-        if (popoutWindowService) {
-            this.addDisposables(popoutWindowService.onDidRemove((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(this.element);
-        this._api = new 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;
-        this.element.remove();
-        this._shellManager = new ShellManager(container, this.element, (w, h) => 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);
-        // 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);
-        this._shellThemeClassnames = new Classnames(this._shellManager.element);
-        // Anchor the overlay container to the shell element so that edge groups
-        // (which live outside this.element in the shell layout) are covered when
-        // dndOverlayMounting is 'absolute'.
-        this.rootDropTargetContainer = new DropTargetAnchorContainer(this._shellManager.element, { disabled: true });
-        this.overlayRenderContainer = new OverlayRenderContainer(this._shellManager.element, this);
-        // Hosted in the shell (not inside `.dv-dockview`) so floating overlays
-        // share a stacking context with `dv-render-overlay` panels; sized to
-        // mirror the gridview rect so saved positions remain valid.
-        this._floatingOverlayHost = document.createElement('div');
-        this._floatingOverlayHost.className = 'dv-floating-overlay-host';
-        this._shellManager.element.appendChild(this._floatingOverlayHost);
-        toggleClass(this.gridview.element, 'dv-dockview', true);
-        toggleClass(this.element, 'dv-debug', !!options.debug);
-        this.updateTheme();
-        if (options.debug) {
-            this.addDisposables(new 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._onWillMutateLayout, this._onDidMutateLayout, this._onDidMovePanel, this._onDidMovePanel.event(() => {
-            /**
-             * 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._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, Event.any(this.onDidPopoutGroupSizeChange, this.onDidPopoutGroupPositionChange, this.onDidCreateTabGroup, this.onDidDestroyTabGroup, this.onDidAddPanelToTabGroup, this.onDidRemovePanelFromTabGroup, this.onDidTabGroupChange, this.onDidTabGroupCollapsedChange)(() => {
-            // Popout size/position and tab-group mutations persist as layout changes.
-            this.fireLayoutChange();
-        }), this._onDidOptionsChange, this.onDidAdd((event) => {
-            if (!this._moving) {
-                this._onDidAddGroup.fire(event);
-            }
-        }), this.onDidRemove((event) => {
-            if (!this._moving) {
-                this._onDidRemoveGroup.fire(event);
-            }
-        }), this.onDidActiveChange((event) => {
-            if (!this._moving) {
-                this._onDidActiveGroupChange.fire(event);
-            }
-        }), this.onDidMaximizedChange((event) => {
-            this._onDidMaximizedGroupChange.fire({
-                group: event.panel,
-                isMaximized: event.isMaximized,
-            });
-        }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidRemoveGroup, this.onDidMovePanel, this.onDidActivePanelChange)(() => {
-            this._bufferOnDidLayoutChange.fire();
-        }), Disposable.from(() => {
-            var _a;
-            // 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.
-        const rootDropTarget = this._rootDropTargetService;
-        if (rootDropTarget) {
-            this.addDisposables(rootDropTarget.onWillShowOverlay((event) => {
-                if (this.gridview.length > 0 &&
-                    event.position === 'center') {
-                    // option only available when no panels in primary grid
-                    return;
-                }
-                this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
-                    kind: 'edge',
-                    panel: undefined,
-                    api: this._api,
-                    group: undefined,
-                    getData: getPanelData,
-                }));
-            }), rootDropTarget.onDrop((event) => {
-                var _a;
-                const willDropEvent = new DockviewWillDropEvent({
-                    nativeEvent: event.nativeEvent,
-                    position: event.position,
-                    panel: undefined,
-                    api: this._api,
-                    group: undefined,
-                    getData: getPanelData,
-                    kind: 'edge',
-                });
-                this._onWillDrop.fire(willDropEvent);
-                if (willDropEvent.defaultPrevented) {
-                    return;
-                }
-                const data = 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 DockviewDidDropEvent({
-                        nativeEvent: event.nativeEvent,
-                        position: event.position,
-                        panel: undefined,
-                        api: this._api,
-                        group: undefined,
-                        getData: 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);
-    }
-    setVisible(panel, visible) {
-        switch (panel.api.location.type) {
-            case 'grid':
-                super.setVisible(panel, visible);
-                break;
-            case 'floating': {
-                const item = this.floatingGroups.find((floatingGroup) => floatingGroup.group === panel);
-                if (item) {
-                    item.overlay.setVisible(visible);
-                    panel.api._onDidVisibilityChange.fire({
-                        isVisible: visible,
-                    });
-                }
-                break;
-            }
-            case 'popout':
-                console.warn('dockview: You cannot hide a group that is in a popout window');
-                break;
-            case 'edge':
-                // Edge group visibility is managed via setEdgeGroupVisible
-                break;
-        }
-    }
-    /**
-     * Returns the {@link PopupService} that should host popovers (context
-     * menus, tab overflow menus) for the given group. Popout groups have their
-     * own service rooted in their popout window so the popover renders there
-     * and dismisses on events from that window.
-     */
-    getPopupServiceForGroup(group) {
-        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);
-    }
-    addPopoutGroup(itemToPopout, options) {
-        // The transaction brackets the synchronous structural change; the
-        // popout window opens asynchronously after it resolves.
-        return this.mutation('popout', () => this._doAddPopoutGroup(itemToPopout, options));
-    }
-    /** Enumerate the popout groups currently open in their own windows. */
-    getPopouts() {
-        var _a, _b;
-        return ((_b = (_a = this._popoutWindowService) === null || _a === void 0 ? void 0 : _a.entries.map((entry) => ({
-            id: entry.popoutGroup.id,
-            group: entry.popoutGroup,
-            window: entry.getWindow(),
-        }))) !== null && _b !== void 0 ? _b : []);
-    }
-    _doAddPopoutGroup(itemToPopout, options) {
-        var _a, _b, _c, _d, _e;
-        const service = assertModule(this._popoutWindowService, 'PopoutWindow', 'api.addPopoutGroup');
-        if (!service) {
-            return Promise.resolve(false);
-        }
-        if (itemToPopout instanceof DockviewGroupPanel &&
-            itemToPopout.model.location.type === 'edge') {
-            // edge groups are permanent structural elements and cannot be popped out
-            return Promise.resolve(false);
-        }
-        if (itemToPopout instanceof DockviewPanel &&
-            itemToPopout.group.size === 1) {
-            return this.addPopoutGroup(itemToPopout.group, options);
-        }
-        const theme = getDockviewTheme(this.gridview.element);
-        const element = this.element;
-        function getBox() {
-            if (options === null || options === void 0 ? void 0 : options.position) {
-                return options.position;
-            }
-            if (itemToPopout instanceof DockviewGroupPanel) {
-                return itemToPopout.element.getBoundingClientRect();
-            }
-            if (itemToPopout.group) {
-                return itemToPopout.group.element.getBoundingClientRect();
-            }
-            return element.getBoundingClientRect();
-        }
-        const box = getBox();
-        const 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.
-        const 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;
-        const _window = new PopoutWindow(`${this.id}-${groupId}`, // unique id
-        theme !== null && theme !== void 0 ? theme : '', {
-            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: (_e = this.options) === null || _e === void 0 ? void 0 : _e.nonce,
-        });
-        const popoutWindowDisposable = new CompositeDisposable(_window, _window.onDidClose(() => {
-            popoutWindowDisposable.dispose();
-        }));
-        return _window
-            .open()
-            .then((popoutContainer) => {
-            var _a, _b, _c, _d;
-            if (_window.isDisposed) {
-                return false;
-            }
-            const referenceGroup = (_a = options === null || options === void 0 ? void 0 : options.referenceGroup) !== null && _a !== void 0 ? _a : (itemToPopout instanceof DockviewPanel
-                ? itemToPopout.group
-                : itemToPopout);
-            const referenceLocation = itemToPopout.api.location.type;
-            /**
-             * The group that is being added doesn't already exist within the DOM, the most likely occurrence
-             * of this case is when being called from the `fromJSON(...)` method
-             */
-            const isGroupAddedToDom = referenceGroup.element.parentElement !== null;
-            let group;
-            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) {
-                group = options.overridePopoutGroup;
-            }
-            else {
-                group = this.createGroup({ id: groupId });
-                if (popoutContainer) {
-                    this._onDidAddGroup.fire(group);
-                }
-            }
-            if (popoutContainer === null) {
-                this.handleBlockedPopout({
-                    group,
-                    referenceGroup,
-                    options,
-                    popoutWindowDisposable,
-                });
-                return false;
-            }
-            const gready = document.createElement('div');
-            gready.className = 'dv-overlay-render-container';
-            const overlayRenderContainer = new OverlayRenderContainer(gready, this);
-            group.model.renderContainer = overlayRenderContainer;
-            // 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.
-            const 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, 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.
-            let popoutGridviewDisposed = false;
-            const disposePopoutGridview = () => {
-                if (!popoutGridviewDisposed) {
-                    popoutGridviewDisposed = true;
-                    popoutGridview.dispose();
-                }
-            };
-            let floatingBox;
-            if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup) &&
-                !(options === null || options === void 0 ? void 0 : options.overridePopoutGridview) &&
-                isGroupAddedToDom) {
-                if (itemToPopout instanceof DockviewPanel) {
-                    this.movingLock(() => {
-                        const panel = referenceGroup.model.removePanel(itemToPopout);
-                        group.model.openPanel(panel);
-                    });
-                }
-                else {
-                    this.movingLock(() => moveGroupWithoutDestroying({
-                        from: referenceGroup,
-                        to: group,
-                    }));
-                    switch (referenceLocation) {
-                        case 'grid':
-                            referenceGroup.api.setVisible(false);
-                            break;
-                        case 'floating':
-                        case 'popout':
-                            floatingBox = (_d = this.floatingGroups
-                                .find((value) => value.group.api.id ===
-                                itemToPopout.api.id)) === null || _d === void 0 ? void 0 : _d.overlay.toJSON();
-                            this.removeGroup(referenceGroup);
-                            break;
-                    }
-                }
-            }
-            popoutContainer.classList.add('dv-dockview');
-            popoutContainer.style.overflow = 'hidden';
-            popoutContainer.appendChild(gready);
-            popoutContainer.appendChild(popoutGridview.element);
-            const anchor = document.createElement('div');
-            const dropTargetContainer = new DropTargetAnchorContainer(anchor, { disabled: this.rootDropTargetContainer.disabled });
-            popoutContainer.appendChild(anchor);
-            group.model.dropTargetContainer = dropTargetContainer;
-            // Each popout group needs its own popover service so that
-            // tab context menus, chip menus, and tab overflow menus
-            // render in the popout window (not the main window) and
-            // their pointerdown/keydown listeners fire on the right
-            // window for outside-click and Escape dismissal.
-            const popoutPopupService = new PopupService(popoutContainer, _window.window);
-            service.setPopupService(group.id, popoutPopupService);
-            popoutWindowDisposable.addDisposables(popoutPopupService, Disposable.from(() => {
-                service.deletePopupService(group.id);
-            }));
-            group.model.location = {
-                type: 'popout',
-                getWindow: () => _window.window,
-                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.
-                const members = this.groups.filter((candidate) => popoutGridview.element.contains(candidate.element));
-                for (const member of members) {
-                    member.model.renderContainer = overlayRenderContainer;
-                    member.model.dropTargetContainer = dropTargetContainer;
-                    member.model.location = {
-                        type: 'popout',
-                        getWindow: () => _window.window,
-                        popoutUrl: resolvedPopoutUrl,
-                    };
-                }
-            }
-            if (isGroupAddedToDom &&
-                itemToPopout.api.location.type === 'grid') {
-                itemToPopout.api.setVisible(false);
-            }
-            this.doSetGroupAndPanelActive(group);
-            const resizeObserverDisposable = service.observeGridviewSize(_window, popoutGridview, overlayRenderContainer);
-            if (resizeObserverDisposable) {
-                popoutWindowDisposable.addDisposables(resizeObserverDisposable);
-            }
-            popoutWindowDisposable.addDisposables(group.api.onDidActiveChange((event) => {
-                var _a;
-                if (event.isActive) {
-                    (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
-                }
-            }), group.api.onWillFocus(() => {
-                var _a;
-                (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
-            }));
-            // 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.
-            const closeResult = {};
-            const isValidReferenceGroup = isGroupAddedToDom &&
-                referenceGroup &&
-                this.getPanel(referenceGroup.id);
-            const value = {
-                window: _window,
-                popoutGroup: group,
-                gridview: popoutGridview,
-                overlayRenderContainer,
-                dropTargetContainer,
-                getWindow: () => _window.window,
-                popoutUrl: resolvedPopoutUrl,
-                referenceGroup: isValidReferenceGroup
-                    ? referenceGroup.id
-                    : undefined,
-                disposable: {
-                    dispose: () => {
-                        popoutWindowDisposable.dispose();
-                        return closeResult.returnedGroup;
-                    },
-                },
-            };
-            const _onDidWindowPositionChange = onDidWindowMoveEnd(_window.window);
-            popoutWindowDisposable.addDisposables(_onDidWindowPositionChange, onDidWindowResizeEnd(_window.window, () => {
-                this._onDidPopoutGroupSizeChange.fire({
-                    width: _window.window.innerWidth,
-                    height: _window.window.innerHeight,
-                    group,
-                });
-            }), _onDidWindowPositionChange.event(() => {
-                this._onDidPopoutGroupPositionChange.fire({
-                    screenX: _window.window.screenX,
-                    screenY: _window.window.screenX,
-                    group,
-                });
-            }), addDisposableListener(_window.window, 'resize', () => {
-                popoutGridview.layout(_window.window.innerWidth, _window.window.innerHeight);
-            }), overlayRenderContainer, Disposable.from(() => this.disposePopoutWindow({
-                group,
-                referenceGroup,
-                popoutGridview,
-                isGroupAddedToDom,
-                floatingBox,
-                disposePopoutGridview,
-                closeResult,
-            })));
-            service.add(value);
-            this._onDidAddPopoutGroup.fire({
-                id: value.popoutGroup.id,
-                group: value.popoutGroup,
-                window: value.getWindow(),
-            });
-            return true;
-        })
-            .catch((err) => {
-            console.error('dockview: failed to create popout.', err);
-            return false;
-        });
-    }
-    /**
-     * The popout window was blocked (e.g. by the browser's popup blocker —
-     * common when restoring popouts on load). Fall back gracefully so the
-     * group(s) end up valid and visible in the main grid rather than as
-     * orphans that later crash clear()/remove().
-     */
-    handleBlockedPopout(params) {
-        const { group, referenceGroup, options, popoutWindowDisposable } = params;
-        console.error('dockview: failed to create popout. perhaps you need to allow pop-ups for this website');
-        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.
-            const blockedGridview = options.overridePopoutGridview;
-            const members = this.groups.filter((candidate) => blockedGridview.element.contains(candidate.element));
-            for (const member of members) {
-                this.movingLock(() => {
-                    blockedGridview.remove(member);
-                    this.redockGroupToMainGrid(member);
-                });
-            }
-            blockedGridview.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(() => 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(() => 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`).
-     */
-    redockGroupToMainGrid(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.
-     */
-    disposePopoutWindow(params) {
-        var _a;
-        const { group, referenceGroup, popoutGridview, isGroupAddedToDom, floatingBox, disposePopoutGridview, closeResult, } = params;
-        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).
-        const genuineClose = !!((_a = this._popoutWindowService) === null || _a === void 0 ? void 0 : _a.entries.find((entry) => entry.gridview === popoutGridview));
-        // The groups still living in this window, resolved from the gridview so
-        // a reassigned anchor doesn't hide surviving members.
-        const members = this.groups.filter((candidate) => popoutGridview.element.contains(candidate.element));
-        const anchorPresent = members.includes(group);
-        const 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) {
-            for (const member of members) {
-                if (member === group) {
-                    continue;
-                }
-                this.movingLock(() => {
-                    this.doRemoveGroup(member, {
-                        skipDispose: true,
-                        skipActive: true,
-                        skipPopoutReturn: true,
-                    });
-                    this.redockGroupToMainGrid(member);
-                });
-            }
-        }
-        if (anchorPresent &&
-            isGroupAddedToDom &&
-            this.getPanel(referenceGroup.id)) {
-            this.movingLock(() => 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(() => {
-                    // 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();
-    }
-    addFloatingGroup(item, options) {
-        this.mutation('float', () => this._doAddFloatingGroup(item, options));
-    }
-    _doAddFloatingGroup(item, options) {
-        var _a;
-        const service = assertModule(this._floatingGroupService, 'FloatingGroup', 'api.addFloatingGroup');
-        if (!service) {
-            return;
-        }
-        if (item instanceof DockviewGroupPanel &&
-            item.model.location.type === 'edge') {
-            // edge groups are permanent structural elements and cannot be floated
-            return;
-        }
-        let group;
-        if (item instanceof DockviewPanel) {
-            group = this.createGroup();
-            this._onDidAddGroup.fire(group);
-            this.movingLock(() => this.removePanel(item, {
-                removeEmptyGroup: true,
-                skipDispose: true,
-                skipSetActiveGroup: true,
-            }));
-            this.movingLock(() => group.model.openPanel(item, { skipSetGroupActive: true }));
-        }
-        else {
-            group = item;
-            const popoutReferenceGroupId = (_a = this._popoutWindowService) === null || _a === void 0 ? void 0 : _a.findReferenceGroupId(group);
-            const popoutReferenceGroup = popoutReferenceGroupId
-                ? this.getPanel(popoutReferenceGroupId)
-                : undefined;
-            const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
-                options.skipRemoveGroup;
-            if (!skip) {
-                if (popoutReferenceGroup) {
-                    this.movingLock(() => moveGroupWithoutDestroying({
-                        from: item,
-                        to: popoutReferenceGroup,
-                    }));
-                    this.doRemoveGroup(item, {
-                        skipPopoutReturn: true,
-                        skipPopoutAssociated: true,
-                    });
-                    this.doRemoveGroup(popoutReferenceGroup, {
-                        skipDispose: true,
-                    });
-                    group = popoutReferenceGroup;
-                }
-                else {
-                    this.doRemoveGroup(item, {
-                        skipDispose: true,
-                        skipPopoutReturn: true,
-                        skipPopoutAssociated: false,
-                    });
-                }
-            }
-        }
-        function getAnchoredBox() {
-            if (options === null || options === void 0 ? void 0 : options.position) {
-                const result = {};
-                if ('left' in options.position) {
-                    result.left = Math.max(options.position.left, 0);
-                }
-                else if ('right' in options.position) {
-                    result.right = Math.max(options.position.right, 0);
-                }
-                else {
-                    result.left = DEFAULT_FLOATING_GROUP_POSITION.left;
-                }
-                if ('top' in options.position) {
-                    result.top = Math.max(options.position.top, 0);
-                }
-                else if ('bottom' in options.position) {
-                    result.bottom = Math.max(options.position.bottom, 0);
-                }
-                else {
-                    result.top = DEFAULT_FLOATING_GROUP_POSITION.top;
-                }
-                if (typeof options.width === 'number') {
-                    result.width = Math.max(options.width, 0);
-                }
-                else {
-                    result.width = DEFAULT_FLOATING_GROUP_POSITION.width;
-                }
-                if (typeof options.height === 'number') {
-                    result.height = Math.max(options.height, 0);
-                }
-                else {
-                    result.height = DEFAULT_FLOATING_GROUP_POSITION.height;
-                }
-                return result;
-            }
-            return {
-                left: typeof (options === null || options === void 0 ? void 0 : options.x) === 'number'
-                    ? Math.max(options.x, 0)
-                    : DEFAULT_FLOATING_GROUP_POSITION.left,
-                top: typeof (options === null || options === void 0 ? void 0 : options.y) === 'number'
-                    ? Math.max(options.y, 0)
-                    : DEFAULT_FLOATING_GROUP_POSITION.top,
-                width: typeof (options === null || options === void 0 ? void 0 : options.width) === 'number'
-                    ? Math.max(options.width, 0)
-                    : DEFAULT_FLOATING_GROUP_POSITION.width,
-                height: typeof (options === null || options === void 0 ? void 0 : options.height) === 'number'
-                    ? Math.max(options.height, 0)
-                    : DEFAULT_FLOATING_GROUP_POSITION.height,
-            };
-        }
-        const 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.
-        const floatingGridview = this.createNestedGridview();
-        floatingGridview.addView(group, 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.
-     */
-    createNestedGridview(orientation = Orientation.HORIZONTAL) {
-        var _a, _b;
-        return new 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.
-     */
-    mountFloatingWindow(floatingGridview, anchorGroup, members, anchoredBox, options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const service = assertModule(this._floatingGroupService, 'FloatingGroup', 'api.addFloatingGroup');
-        if (!service) {
-            return;
-        }
-        const dragHandleMode = (_b = (_a = options === null || options === void 0 ? void 0 : options.dragHandle) !== null && _a !== void 0 ? _a : this.options.floatingGroupDragHandle) !== null && _b !== void 0 ? _b : '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.
-        const titleBar = dragHandleMode === 'titlebar'
-            ? new FloatingTitleBar(this, anchorGroup)
-            : undefined;
-        const overlay = new Overlay(Object.assign(Object.assign({ container: (_c = this._floatingOverlayHost) !== null && _c !== void 0 ? _c : this.gridview.element, content: floatingGridview.element, header: titleBar === null || titleBar === void 0 ? void 0 : titleBar.element }, anchoredBox), { minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
-                ? undefined
-                : ((_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumWidthWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE), minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
-                ? undefined
-                : ((_g = (_f = this.options.floatingGroupBounds) === null || _f === void 0 ? void 0 : _f.minimumHeightWithinViewport) !== null && _g !== void 0 ? _g : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE), transformDragPosition: this.options.transformFloatingGroupDrag
-                ? (context) => this.options.transformFloatingGroupDrag({
-                    group: anchorGroup,
-                    proposed: context.proposed,
-                    container: context.container,
-                    others: context.others,
-                })
-                : undefined, getSiblingBoxes: () => this._gatherFloatingGroupBoxes(anchorGroup) }));
-        const dragHandle = (_h = titleBar === null || titleBar === void 0 ? void 0 : titleBar.element) !== null && _h !== void 0 ? _h : anchorGroup.element.querySelector('.dv-void-container');
-        if (!dragHandle) {
-            throw new Error('dockview: failed to find drag handle');
-        }
-        overlay.setupDrag(dragHandle, {
-            inDragMode: typeof (options === null || options === void 0 ? void 0 : options.inDragMode) === 'boolean'
-                ? options.inDragMode
-                : false,
-        });
-        const 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, Disposable.from(() => floatingGroupPanel.setTitleBar(undefined)), titleBar.onDragStart((event) => {
-                this._onWillDragGroup.fire({
-                    nativeEvent: event,
-                    group: floatingGroupPanel.group,
-                });
-            }));
-        }
-        for (const member of members) {
-            member.model.location = { type: 'floating' };
-        }
-        if (!(options === null || options === void 0 ? void 0 : options.skipActiveGroup)) {
-            this.doSetGroupAndPanelActive(anchorGroup);
-        }
-    }
-    orthogonalize(position, options) {
-        this.gridview.normalize();
-        switch (position) {
-            case 'top':
-            case 'bottom':
-                if (this.gridview.orientation === Orientation.HORIZONTAL) {
-                    // we need to add to a vertical splitview but the current root is a horizontal splitview.
-                    // insert a vertical splitview at the root level and add the existing view as a child
-                    this.gridview.insertOrthogonalSplitviewAtRoot();
-                }
-                break;
-            case 'left':
-            case 'right':
-                if (this.gridview.orientation === Orientation.VERTICAL) {
-                    // we need to add to a horizontal splitview but the current root is a vertical splitview.
-                    // insert a horiziontal splitview at the root level and add the existing view as a child
-                    this.gridview.insertOrthogonalSplitviewAtRoot();
-                }
-                break;
-            default:
-                break;
-        }
-        switch (position) {
-            case 'top':
-            case 'left':
-            case 'center':
-                return this.createGroupAtLocation([0], undefined, options); // insert into first position
-            case 'bottom':
-            case 'right':
-                return this.createGroupAtLocation([this.gridview.length], undefined, options); // insert into last position
-            default:
-                throw new Error(`dockview: unsupported position ${position}`);
-        }
-    }
-    updateOptions(options) {
-        var _a, _b, _c, _d, _e;
-        super.updateOptions(options);
-        (_a = this._floatingGroupService) === null || _a === void 0 ? void 0 : _a.updateBounds(options);
-        (_b = this._rootDropTargetService) === null || _b === void 0 ? void 0 : _b.setOptions(options);
-        const oldDisableDnd = this.options.disableDnd;
-        const oldDndStrategy = this.options.dndStrategy;
-        this._options = Object.assign(Object.assign({}, this.options), options);
-        const newDisableDnd = this.options.disableDnd;
-        const newDndStrategy = this.options.dndStrategy;
-        if (oldDisableDnd !== newDisableDnd ||
-            oldDndStrategy !== newDndStrategy) {
-            this.updateDragAndDropState();
-        }
-        if ('theme' in options) {
-            this.updateTheme();
-        }
-        if ('createRightHeaderActionComponent' in options ||
-            'createLeftHeaderActionComponent' in options ||
-            'createPrefixHeaderActionComponent' in options) {
-            (_c = this.headerActionsService) === null || _c === void 0 ? void 0 : _c.refreshAll();
-        }
-        if ('createWatermarkComponent' in options) {
-            (_d = this._watermarkService) === null || _d === void 0 ? void 0 : _d.refresh();
-            for (const group of this.groups) {
-                group.model.refreshWatermark();
-            }
-        }
-        if ('tabGroupColors' in options || 'tabGroupAccent' in options) {
-            this._tabGroupColorPalette.setEntries((_e = this._options.tabGroupColors) !== null && _e !== void 0 ? _e : DEFAULT_TAB_GROUP_COLORS);
-            this._tabGroupColorPalette.enabled =
-                this._options.tabGroupAccent !== 'off';
-            for (const group of this.groups) {
-                group.model.refreshTabGroupAccent();
-            }
-        }
-        this._onDidOptionsChange.fire();
-        this._layoutFromShell(this.gridview.width, this.gridview.height);
-    }
-    layout(width, height, forceResize) {
-        var _a, _b;
-        if (this._shellManager && !this._inShellLayout) {
-            this._shellManager.layout(width, height);
-        }
-        else {
-            super.layout(width, height, forceResize);
-        }
-        this._syncFloatingOverlayHost();
-        // 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();
-    }
-    _syncFloatingOverlayHost() {
-        if (!this._floatingOverlayHost || !this._shellManager) {
-            return;
-        }
-        const shellRect = this._shellManager.element.getBoundingClientRect();
-        const gridRect = this.element.getBoundingClientRect();
-        const host = this._floatingOverlayHost;
-        host.style.left = `${gridRect.left - shellRect.left}px`;
-        host.style.top = `${gridRect.top - shellRect.top}px`;
-        host.style.width = `${gridRect.width}px`;
-        host.style.height = `${gridRect.height}px`;
-    }
-    _layoutFromShell(width, height) {
-        this._inShellLayout = true;
-        this.layout(width, height, true);
-        this._inShellLayout = false;
-    }
-    forceRelayout() {
-        if (this._shellManager) {
-            this._layoutFromShell(this.width, this.height);
-        }
-        else {
-            super.forceRelayout();
-        }
-    }
-    addEdgeGroup(position, options) {
-        const service = 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 '${position}'`);
-        }
-        return this.mutation('add', () => {
-            const group = this.createGroup({ id: options.id });
-            group.model.location = { type: 'edge', position };
-            group.model.headerPosition = position;
-            // Collapse when the group becomes empty
-            const autoCollapseDisposable = group.model.onDidRemovePanel(() => {
-                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;
-        });
-    }
-    getEdgeGroup(position) {
-        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;
-    }
-    setEdgeGroupVisible(position, visible) {
-        this._shellManager.setEdgeGroupVisible(position, visible);
-    }
-    isEdgeGroupVisible(position) {
-        return this._shellManager.isEdgeGroupVisible(position);
-    }
-    removeEdgeGroup(position) {
-        const service = assertModule(this._edgeGroupService, 'EdgeGroup', 'api.removeEdgeGroup');
-        if (!service) {
-            return;
-        }
-        const group = service.get(position);
-        if (!group) {
-            throw new Error(`dockview: no edge group exists at position '${position}'`);
-        }
-        // One transaction — the per-panel removals below nest via the depth
-        // counter, so consumers see a single edge-group removal.
-        this.mutation('remove', () => {
-            // Remove panels inside the group first
-            for (const panel of [...group.panels]) {
-                this.removePanel(panel, {
-                    removeEmptyGroup: false,
-                    skipDispose: false,
-                });
-            }
-            // 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);
-        });
-    }
-    setEdgeGroupCollapsed(group, collapsed) {
-        var _a;
-        const position = (_a = this._edgeGroupService) === null || _a === void 0 ? void 0 : _a.findPositionOf(group);
-        if (!position) {
-            return;
-        }
-        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);
-        group.api._onDidCollapsedChange.fire({ isCollapsed: collapsed });
-    }
-    isEdgeGroupCollapsed(group) {
-        var _a;
-        const position = (_a = this._edgeGroupService) === null || _a === void 0 ? void 0 : _a.findPositionOf(group);
-        return position
-            ? this._shellManager.isEdgeGroupCollapsed(position)
-            : false;
-    }
-    updateDragAndDropState() {
-        // Update draggable state for all tabs and void containers
-        for (const group of this.groups) {
-            group.model.updateDragAndDropState();
-        }
-    }
-    focus() {
-        var _a;
-        (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    getGroupPanel(id) {
-        return this.panels.find((panel) => panel.id === id);
-    }
-    setActivePanel(panel) {
-        panel.group.model.openPanel(panel);
-        this.doSetGroupAndPanelActive(panel.group);
-    }
-    moveToNext(options = {}) {
-        var _a;
-        if (!options.group) {
-            if (!this.activeGroup) {
-                return;
-            }
-            options.group = this.activeGroup;
-        }
-        if (options.includePanel && options.group) {
-            if (options.group.activePanel !==
-                options.group.panels[options.group.panels.length - 1]) {
-                options.group.model.moveToNext({ suppressRoll: true });
-                return;
-            }
-        }
-        const location = getGridLocation(options.group.element);
-        const next = (_a = this.gridview.next(location)) === null || _a === void 0 ? void 0 : _a.view;
-        this.doSetGroupAndPanelActive(next);
-    }
-    moveToPrevious(options = {}) {
-        var _a;
-        if (!options.group) {
-            if (!this.activeGroup) {
-                return;
-            }
-            options.group = this.activeGroup;
-        }
-        if (options.includePanel && options.group) {
-            if (options.group.activePanel !== options.group.panels[0]) {
-                options.group.model.moveToPrevious({ suppressRoll: true });
-                return;
-            }
-        }
-        const location = getGridLocation(options.group.element);
-        const next = (_a = this.gridview.previous(location)) === null || _a === void 0 ? void 0 : _a.view;
-        if (next) {
-            this.doSetGroupAndPanelActive(next);
-        }
-    }
-    /**
-     * Serialize the current state of the layout
-     *
-     * @returns A JSON respresentation of the layout
-     */
-    toJSON() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const data = this.gridview.serialize();
-        const panels = this.panels.reduce((collection, panel) => {
-            collection[panel.id] = panel.toJSON();
-            return collection;
-        }, {});
-        const floats = (_b = (_a = this._floatingGroupService) === null || _a === void 0 ? void 0 : _a.serialize()) !== null && _b !== void 0 ? _b : [];
-        const popoutGroups = (_d = (_c = this._popoutWindowService) === null || _c === void 0 ? void 0 : _c.serialize()) !== null && _d !== void 0 ? _d : [];
-        const result = {
-            grid: data,
-            panels,
-            activeGroup: (_e = this.activeGroup) === null || _e === void 0 ? void 0 : _e.id,
-        };
-        if (floats.length > 0) {
-            result.floatingGroups = floats;
-        }
-        if (popoutGroups.length > 0) {
-            result.popoutGroups = popoutGroups;
-        }
-        const edgeEntries = (_g = (_f = this._edgeGroupService) === null || _f === void 0 ? void 0 : _f.entries()) !== null && _g !== void 0 ? _g : [];
-        if ((_h = this._edgeGroupService) === null || _h === void 0 ? void 0 : _h.hasAny()) {
-            const shellSerialized = this._shellManager.toJSON();
-            // Augment each entry with the serialized group state
-            for (const [position, group] of edgeEntries) {
-                const entry = shellSerialized[position];
-                if (entry) {
-                    entry.group = group.toJSON();
-                }
-            }
-            result.edgeGroups = shellSerialized;
-        }
-        return result;
-    }
-    fromJSON(data, options) {
-        // One 'load' transaction for the whole deserialization — the many
-        // nested add/remove mutations join it via the depth counter.
-        this.mutation('load', () => this._doFromJSON(data, options));
-    }
-    _doFromJSON(data, options) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        // 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.
-        (_a = this._popoutWindowService) === null || _a === void 0 ? void 0 : _a.cancelPendingRestorations();
-        const existingPanels = new Map();
-        let tempGroup;
-        if (options === null || options === void 0 ? void 0 : options.reuseExistingPanels) {
-            /**
-             * What are we doing here?
-             *
-             * 1. Create a temporary group to hold any panels that currently exist and that also exist in the new layout
-             * 2. Remove that temporary group from the group mapping so that it doesn't get cleared when we clear the layout
-             */
-            tempGroup = this.createGroup();
-            this._groups.delete(tempGroup.api.id);
-            const newPanels = Object.keys(data.panels);
-            for (const panel of this.panels) {
-                if (newPanels.includes(panel.api.id)) {
-                    existingPanels.set(panel.api.id, panel);
-                }
-            }
-            this.movingLock(() => {
-                Array.from(existingPanels.values()).forEach((panel) => {
-                    this.moveGroupOrPanel({
-                        from: {
-                            groupId: panel.api.group.api.id,
-                            panelId: panel.api.id,
-                        },
-                        to: {
-                            group: tempGroup,
-                            position: 'center',
-                        },
-                        keepEmptyGroups: true,
-                    });
-                });
-            });
-        }
-        this.clear();
-        if (typeof data !== 'object' || data === null) {
-            throw new Error('dockview: serialized layout must be a non-null object');
-        }
-        const { grid, panels, activeGroup } = data;
-        if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
-            throw new Error('dockview: root must be of type branch');
-        }
-        try {
-            // take note of the existing dimensions
-            const width = this.width;
-            const height = this.height;
-            const createGroupFromSerializedState = (data) => {
-                const { id, locked, hideHeader, headerPosition, views, activeView, } = data;
-                if (typeof id !== 'string') {
-                    throw new TypeError('dockview: group id must be of type string');
-                }
-                const group = this.createGroup({
-                    id,
-                    locked: !!locked,
-                    hideHeader: !!hideHeader,
-                    headerPosition,
-                });
-                this._onDidAddGroup.fire(group);
-                const createdPanels = [];
-                for (const child of views) {
-                    /**
-                     * 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
-                     * due to a corruption of input data.
-                     */
-                    const existingPanel = existingPanels.get(child);
-                    if (tempGroup && existingPanel) {
-                        this.movingLock(() => {
-                            tempGroup.model.removePanel(existingPanel);
-                        });
-                        createdPanels.push(existingPanel);
-                        existingPanel.updateFromStateModel(panels[child]);
-                    }
-                    else {
-                        const panel = this._deserializer.fromJSON(panels[child], group);
-                        createdPanels.push(panel);
-                    }
-                }
-                for (let i = 0; i < views.length; i++) {
-                    const panel = createdPanels[i];
-                    const isActive = typeof activeView === 'string' &&
-                        activeView === panel.id;
-                    const hasExisting = existingPanels.has(panel.api.id);
-                    if (hasExisting) {
-                        this.movingLock(() => {
-                            group.model.openPanel(panel, {
-                                skipSetActive: !isActive,
-                                skipSetGroupActive: true,
-                            });
-                        });
-                    }
-                    else {
-                        group.model.openPanel(panel, {
-                            skipSetActive: !isActive,
-                            skipSetGroupActive: true,
-                        });
-                    }
-                }
-                // Restore tab groups before activating a fallback panel so
-                // that collapsed groups can clear the active panel correctly.
-                if (data.tabGroups && data.tabGroups.length > 0) {
-                    group.model.restoreTabGroups(data.tabGroups);
-                }
-                if (!group.activePanel && group.panels.length > 0) {
-                    group.model.openPanel(group.panels[group.panels.length - 1], {
-                        skipSetGroupActive: true,
-                    });
-                }
-                return group;
-            };
-            this.gridview.deserialize(grid, {
-                fromJSON: (node) => {
-                    return createGroupFromSerializedState(node.data);
-                },
-            });
-            this._layoutFromShell(width, height);
-            if (data.edgeGroups) {
-                this.deserializeEdgeGroups(data.edgeGroups, panels);
-            }
-            this.deserializeFloatingWindows((_b = data.floatingGroups) !== null && _b !== void 0 ? _b : [], createGroupFromSerializedState);
-            const popoutPromises = this.deserializePopoutWindows((_c = data.popoutGroups) !== null && _c !== void 0 ? _c : [], createGroupFromSerializedState);
-            (_d = this._popoutWindowService) === null || _d === void 0 ? void 0 : _d.finishRestoration(popoutPromises);
-            (_e = this._floatingGroupService) === null || _e === void 0 ? void 0 : _e.constrainBounds();
-            if (typeof activeGroup === 'string') {
-                const 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.
-            (_f = this._watermarkService) === null || _f === void 0 ? void 0 : _f.update();
-        }
-        catch (err) {
-            console.error('dockview: failed to deserialize layout. Reverting changes', err);
-            /**
-             * Takes all the successfully created groups and remove all of their panels.
-             */
-            for (const group of this.groups) {
-                for (const panel of group.panels) {
-                    this.removePanel(panel, {
-                        removeEmptyGroup: false,
-                        skipDispose: false,
-                    });
-                }
-            }
-            /**
-             * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
-             * the underlying HTMLElement existing in the Gridview.
-             */
-            for (const group of this.groups) {
-                group.dispose();
-                this._groups.delete(group.id);
-                this._onDidRemoveGroup.fire(group);
-            }
-            (_g = this._floatingGroupService) === null || _g === void 0 ? void 0 : _g.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.
-     */
-    deserializeNestedGridview(grid, createGroup) {
-        const gridview = this.createNestedGridview(grid.orientation);
-        const members = [];
-        gridview.deserialize(grid, {
-            fromJSON: (node) => {
-                const group = createGroup(node.data);
-                members.push(group);
-                return group;
-            },
-        });
-        return { gridview, members };
-    }
-    deserializeEdgeGroups(edgeGroups, panels) {
-        var _a;
-        const edgeService = assertModule(this._edgeGroupService, 'EdgeGroup', 'fromJSON edge restoration');
-        if (!edgeService) {
-            return;
-        }
-        // 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 (const _position of [
-            'top',
-            'bottom',
-            'left',
-            'right',
-        ]) {
-            const fixedData = edgeGroups[_position];
-            if (fixedData && !edgeService.has(_position)) {
-                const groupState = fixedData.group;
-                const id = (_a = groupState === null || groupState === void 0 ? void 0 : groupState.id) !== null && _a !== void 0 ? _a : `${_position}-group`;
-                this.addEdgeGroup(_position, { id });
-            }
-        }
-        // Restore panel contents of edge groups
-        for (const [position, edgeGroup] of edgeService.entries()) {
-            const edgeData = edgeGroups[position];
-            const groupState = edgeData === null || edgeData === void 0 ? void 0 : edgeData.group;
-            if (groupState) {
-                const { views, activeView } = groupState;
-                const createdPanels = [];
-                for (const panelId of views) {
-                    if (panels[panelId]) {
-                        const panel = this._deserializer.fromJSON(panels[panelId], edgeGroup);
-                        createdPanels.push(panel);
-                    }
-                }
-                for (const panel of createdPanels) {
-                    const 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 });
-                }
-            }
-        }
-        this._shellManager.fromJSON(edgeGroups);
-    }
-    deserializeFloatingWindows(serialized, createGroup) {
-        for (const serializedFloatingGroup of serialized) {
-            const { data, grid, position } = serializedFloatingGroup;
-            if (grid) {
-                // Multi-group window: rebuild the window's nested gridview from
-                // its serialized tree.
-                const { gridview: floatingGridview, members } = this.deserializeNestedGridview(grid, createGroup);
-                if (members.length === 0) {
-                    continue;
-                }
-                this.mountFloatingWindow(floatingGridview, members[0], members, position, { inDragMode: false });
-            }
-            else if (data) {
-                const group = createGroup(data);
-                this.addFloatingGroup(group, {
-                    position: position,
-                    width: position.width,
-                    height: position.height,
-                    skipRemoveGroup: true,
-                    inDragMode: false,
-                });
-            }
-        }
-    }
-    deserializePopoutWindows(serialized, createGroup) {
-        const popoutService = serialized.length > 0
-            ? 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((serializedPopoutGroup, index) => {
-            const { data, grid, position, gridReferenceGroup, url } = serializedPopoutGroup;
-            // Multi-group popout windows rebuild their nested gridview from the
-            // serialized tree; single-group windows use the legacy single-group
-            // path.
-            let overridePopoutGridview;
-            let members = [];
-            if (grid) {
-                const 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 [];
-                }
-            }
-            const group = grid ? members[0] : createGroup(data);
-            return popoutService.scheduleRestoration(index * DESERIALIZATION_POPOUT_DELAY_MS, () => {
-                this.addPopoutGroup(group, {
-                    position: position !== null && position !== void 0 ? position : undefined,
-                    overridePopoutGroup: gridReferenceGroup
-                        ? group
-                        : undefined,
-                    overridePopoutGridview,
-                    referenceGroup: gridReferenceGroup
-                        ? this.getPanel(gridReferenceGroup)
-                        : undefined,
-                    popoutUrl: url,
-                });
-            }, () => {
-                // 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 (const orphan of members.length > 0
-                    ? members
-                    : [group]) {
-                    if (!this.isDisposed &&
-                        this._groups.has(orphan.id) &&
-                        orphan.element.parentElement === null) {
-                        for (const panel of [...orphan.panels]) {
-                            this.removePanel(panel, {
-                                removeEmptyGroup: false,
-                            });
-                        }
-                        orphan.dispose();
-                        this._groups.delete(orphan.id);
-                        this._onDidRemoveGroup.fire(orphan);
-                    }
-                }
-            });
-        });
-    }
-    clear() {
-        this.mutation('clear', () => this._doClear());
-    }
-    _doClear() {
-        var _a;
-        const groups = Array.from(this._groups.values()).map((_) => _.value);
-        const hasActiveGroup = !!this.activeGroup;
-        for (const group of groups) {
-            if ((_a = this._edgeGroupService) === null || _a === void 0 ? void 0 : _a.includes(group)) {
-                // Edge groups are structural - only clear their panels, not the group itself
-                const panels = [...group.panels];
-                for (const panel of panels) {
-                    this.removePanel(panel, { removeEmptyGroup: false });
-                }
-                continue;
-            }
-            // remove the group will automatically remove the panels
-            this.removeGroup(group, { skipActive: true });
-        }
-        if (hasActiveGroup) {
-            this.doSetGroupAndPanelActive(undefined);
-        }
-        this.gridview.clear();
-    }
-    closeAllGroups() {
-        // One transaction — the per-panel removals inside nest via the depth
-        // counter, so consumers (undo, announcements) see a single mutation.
-        this.mutation('remove', () => {
-            for (const entry of this._groups.entries()) {
-                const [_, group] = entry;
-                group.value.model.closeAllPanels();
-            }
-        });
-    }
-    addPanel(options) {
-        return this.mutation('add', () => this._doAddPanel(options));
-    }
-    _doAddPanel(options) {
-        var _a, _b, _c, _d;
-        if (this.panels.some((_) => _.id === options.id)) {
-            throw new Error(`dockview: panel with id ${options.id} already exists`);
-        }
-        let referenceGroup;
-        if (options.position && options.floating) {
-            throw new Error('dockview: you can only provide one of: position, floating as arguments to .addPanel(...)');
-        }
-        const initial = {
-            width: options.initialWidth,
-            height: options.initialHeight,
-        };
-        let index;
-        if (options.position) {
-            if (isPanelOptionsWithPanel(options.position)) {
-                const referencePanel = typeof options.position.referencePanel === 'string'
-                    ? this.getGroupPanel(options.position.referencePanel)
-                    : options.position.referencePanel;
-                index = options.position.index;
-                if (!referencePanel) {
-                    const referenceId = typeof options.position.referencePanel === 'string'
-                        ? options.position.referencePanel
-                        : (_a = options.position.referencePanel) === null || _a === void 0 ? void 0 : _a.id;
-                    throw new Error(`dockview: referencePanel '${referenceId}' does not exist`);
-                }
-                referenceGroup = this.findGroup(referencePanel);
-            }
-            else if (isPanelOptionsWithGroup(options.position)) {
-                referenceGroup =
-                    typeof options.position.referenceGroup === 'string'
-                        ? (_b = this._groups.get(options.position.referenceGroup)) === null || _b === void 0 ? void 0 : _b.value
-                        : options.position.referenceGroup;
-                index = options.position.index;
-                if (!referenceGroup) {
-                    const referenceId = typeof options.position.referenceGroup === 'string'
-                        ? options.position.referenceGroup
-                        : (_c = options.position.referenceGroup) === null || _c === void 0 ? void 0 : _c.id;
-                    throw new Error(`dockview: referenceGroup '${referenceId}' does not exist`);
-                }
-            }
-            else {
-                const group = this.orthogonalize(directionToPosition(options.position.direction));
-                const panel = this.createPanel(options, group);
-                group.model.openPanel(panel, {
-                    skipSetActive: options.inactive,
-                    skipSetGroupActive: options.inactive,
-                    index,
-                });
-                if (!options.inactive) {
-                    this.doSetGroupAndPanelActive(group);
-                }
-                group.api.setSize({
-                    height: initial === null || initial === void 0 ? void 0 : initial.height,
-                    width: initial === null || initial === void 0 ? void 0 : initial.width,
-                });
-                return panel;
-            }
-        }
-        else {
-            referenceGroup = this.activeGroup;
-        }
-        let panel;
-        if (referenceGroup) {
-            const target = toTarget(((_d = options.position) === null || _d === void 0 ? void 0 : _d.direction) || 'within');
-            if (options.floating) {
-                const group = this.createGroup();
-                this._onDidAddGroup.fire(group);
-                const floatingGroupOptions = typeof options.floating === 'object' &&
-                    options.floating !== null
-                    ? options.floating
-                    : {};
-                this.addFloatingGroup(group, Object.assign(Object.assign({}, floatingGroupOptions), { inDragMode: false, skipRemoveGroup: true, skipActiveGroup: true }));
-                panel = this.createPanel(options, group);
-                group.model.openPanel(panel, {
-                    skipSetActive: options.inactive,
-                    skipSetGroupActive: options.inactive,
-                    index,
-                });
-            }
-            else if (referenceGroup.api.location.type === 'floating' ||
-                referenceGroup.api.location.type === 'edge' ||
-                target === 'center') {
-                panel = this.createPanel(options, referenceGroup);
-                referenceGroup.model.openPanel(panel, {
-                    skipSetActive: options.inactive,
-                    skipSetGroupActive: options.inactive,
-                    index,
-                });
-                referenceGroup.api.setSize({
-                    width: initial === null || initial === void 0 ? void 0 : initial.width,
-                    height: initial === null || initial === void 0 ? void 0 : initial.height,
-                });
-                if (!options.inactive) {
-                    this.doSetGroupAndPanelActive(referenceGroup);
-                }
-            }
-            else {
-                const location = getGridLocation(referenceGroup.element);
-                const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
-                const group = this.createGroupAtLocation(relativeLocation, this.orientationAtLocation(relativeLocation) ===
-                    Orientation.VERTICAL
-                    ? initial === null || initial === void 0 ? void 0 : initial.height
-                    : initial === null || initial === void 0 ? void 0 : initial.width);
-                panel = this.createPanel(options, group);
-                group.model.openPanel(panel, {
-                    skipSetActive: options.inactive,
-                    skipSetGroupActive: options.inactive,
-                    index,
-                });
-                if (!options.inactive) {
-                    this.doSetGroupAndPanelActive(group);
-                }
-            }
-        }
-        else if (options.floating) {
-            const group = this.createGroup();
-            this._onDidAddGroup.fire(group);
-            const coordinates = typeof options.floating === 'object' &&
-                options.floating !== null
-                ? options.floating
-                : {};
-            this.addFloatingGroup(group, Object.assign(Object.assign({}, coordinates), { inDragMode: false, skipRemoveGroup: true, skipActiveGroup: true }));
-            panel = this.createPanel(options, group);
-            group.model.openPanel(panel, {
-                skipSetActive: options.inactive,
-                skipSetGroupActive: options.inactive,
-                index,
-            });
-        }
-        else {
-            const group = this.createGroupAtLocation([0], this.gridview.orientation === Orientation.VERTICAL
-                ? initial === null || initial === void 0 ? void 0 : initial.height
-                : initial === null || initial === void 0 ? void 0 : initial.width);
-            panel = this.createPanel(options, group);
-            group.model.openPanel(panel, {
-                skipSetActive: options.inactive,
-                skipSetGroupActive: options.inactive,
-                index,
-            });
-            if (!options.inactive) {
-                this.doSetGroupAndPanelActive(group);
-            }
-        }
-        return panel;
-    }
-    removePanel(panel, options) {
-        this.mutation('remove', () => {
-            var _a;
-            return this._doRemovePanel(panel, {
-                removeEmptyGroup: (_a = options === null || options === void 0 ? void 0 : options.removeEmptyGroup) !== null && _a !== void 0 ? _a : true,
-                skipDispose: options === null || options === void 0 ? void 0 : options.skipDispose,
-                skipSetActiveGroup: options === null || options === void 0 ? void 0 : options.skipSetActiveGroup,
-            });
-        });
-    }
-    _doRemovePanel(panel, options) {
-        const group = panel.group;
-        if (!group) {
-            throw new Error(`dockview: cannot remove panel ${panel.id}. it's missing a group.`);
-        }
-        group.model.removePanel(panel, {
-            skipSetActiveGroup: options.skipSetActiveGroup,
-        });
-        if (!options.skipDispose) {
-            panel.group.model.renderContainer.detatch(panel);
-            panel.dispose();
-        }
-        if (group.size === 0 && options.removeEmptyGroup) {
-            this.removeGroup(group, { skipActive: options.skipSetActiveGroup });
-        }
-    }
-    createWatermarkComponent() {
-        if (this.options.createWatermarkComponent) {
-            return this.options.createWatermarkComponent();
-        }
-        return new Watermark();
-    }
-    addGroup(options) {
-        return this.mutation('add', () => this._doAddGroup(options));
-    }
-    _doAddGroup(options) {
-        var _a, _b, _c;
-        if (options) {
-            let referenceGroup;
-            if (isGroupOptionsWithPanel(options)) {
-                const referencePanel = typeof options.referencePanel === 'string'
-                    ? this.panels.find((panel) => panel.id === options.referencePanel)
-                    : options.referencePanel;
-                const referencePanelId = typeof options.referencePanel === 'string'
-                    ? options.referencePanel
-                    : (_a = options.referencePanel) === null || _a === void 0 ? void 0 : _a.id;
-                if (!referencePanel) {
-                    throw new Error(`dockview: reference panel ${referencePanelId} does not exist`);
-                }
-                referenceGroup = this.findGroup(referencePanel);
-                if (!referenceGroup) {
-                    throw new Error(`dockview: reference group for reference panel ${referencePanelId} does not exist`);
-                }
-            }
-            else if (isGroupOptionsWithGroup(options)) {
-                referenceGroup =
-                    typeof options.referenceGroup === 'string'
-                        ? (_b = this._groups.get(options.referenceGroup)) === null || _b === void 0 ? void 0 : _b.value
-                        : options.referenceGroup;
-                if (!referenceGroup) {
-                    const referenceId = typeof options.referenceGroup === 'string'
-                        ? options.referenceGroup
-                        : (_c = options.referenceGroup) === null || _c === void 0 ? void 0 : _c.id;
-                    throw new Error(`dockview: reference group ${referenceId} does not exist`);
-                }
-            }
-            else {
-                const group = this.orthogonalize(directionToPosition(options.direction), options);
-                if (!options.skipSetActive) {
-                    this.doSetGroupAndPanelActive(group);
-                }
-                return group;
-            }
-            const target = toTarget(options.direction || 'within');
-            const location = getGridLocation(referenceGroup.element);
-            const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
-            const group = this.createGroup(options);
-            const size = this.getLocationOrientation(relativeLocation) ===
-                Orientation.VERTICAL
-                ? options.initialHeight
-                : options.initialWidth;
-            this.doAddGroup(group, relativeLocation, size);
-            if (!options.skipSetActive) {
-                this.doSetGroupAndPanelActive(group);
-            }
-            return group;
-        }
-        else {
-            const group = this.createGroup(options);
-            this.doAddGroup(group);
-            this.doSetGroupAndPanelActive(group);
-            return group;
-        }
-    }
-    getLocationOrientation(location) {
-        return location.length % 2 == 0 &&
-            this.gridview.orientation === Orientation.HORIZONTAL
-            ? Orientation.HORIZONTAL
-            : Orientation.VERTICAL;
-    }
-    removeGroup(group, options) {
-        this.mutation('remove', () => 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.
-     */
-    detachFromNestedWindow(group) {
-        var _a, _b;
-        const floating = (_a = this._floatingGroupService) === null || _a === void 0 ? void 0 : _a.findByGroup(group);
-        if (floating) {
-            const 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((m) => m !== group));
-            }
-            return true;
-        }
-        const popout = (_b = this._popoutWindowService) === null || _b === void 0 ? void 0 : _b.findByGroup(group);
-        if (popout) {
-            const 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((m) => m !== group);
-            }
-            return true;
-        }
-        return false;
-    }
-    /**
-     * Dispose a group and forget it: remove it from `_groups` and fire the
-     * removed event.
-     */
-    disposeGroupRecord(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).
-     */
-    activateFallbackGroupIfRemoved(removed, skipActive) {
-        if (!skipActive && this._activeGroup === removed) {
-            const groups = Array.from(this._groups.values());
-            this.doSetGroupAndPanelActive(groups.length > 0 ? groups[0].value : undefined);
-        }
-    }
-    doRemoveGroup(group, options) {
-        var _a, _b, _c, _d, _e;
-        // Edge groups are permanent structural elements - never remove them from the layout
-        if ((_a = this._edgeGroupService) === null || _a === void 0 ? void 0 : _a.includes(group)) {
-            return group;
-        }
-        const panels = [...group.panels]; // reassign since group panels will mutate
-        if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
-            for (const panel of panels) {
-                this.removePanel(panel, {
-                    removeEmptyGroup: false,
-                    skipDispose: (_b = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _b !== void 0 ? _b : false,
-                });
-            }
-        }
-        const activePanel = this.activePanel;
-        if (group.api.location.type === 'floating') {
-            const floatingGroup = (_c = this._floatingGroupService) === null || _c === void 0 ? void 0 : _c.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) {
-                    // Relocation: reset location so the destination root can
-                    // re-tag it.
-                    group.model.location = { type: 'grid' };
-                }
-                else {
-                    this.disposeGroupRecord(group);
-                }
-                this.activateFallbackGroupIfRemoved(group, options === null || options === void 0 ? void 0 : options.skipActive);
-                return 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') {
-            const selectedGroup = (_d = this._popoutWindowService) === null || _d === void 0 ? void 0 : _d.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) {
-                    // Relocation: reset location so the destination root can
-                    // re-tag it.
-                    group.model.location = { type: 'grid' };
-                }
-                else {
-                    this.disposeGroupRecord(group);
-                }
-                this.activateFallbackGroupIfRemoved(group, options === null || options === void 0 ? void 0 : options.skipActive);
-                return 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)) {
-                    const refGroup = selectedGroup.referenceGroup
-                        ? this.getPanel(selectedGroup.referenceGroup)
-                        : undefined;
-                    if ((refGroup === null || refGroup === void 0 ? void 0 : refGroup.panels.length) === 0) {
-                        this.removeGroup(refGroup);
-                    }
-                }
-                selectedGroup.popoutGroup.dispose();
-                this._groups.delete(group.id);
-                this._onDidRemoveGroup.fire(group);
-            }
-            (_e = this._popoutWindowService) === null || _e === void 0 ? void 0 : _e.remove(selectedGroup);
-            const 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)) {
-                const 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;
-        }
-        const re = super.doRemoveGroup(group, options);
-        if (!(options === null || options === void 0 ? void 0 : options.skipActive)) {
-            if (this.activePanel !== activePanel) {
-                this.fireActivePanelChange(this.activePanel);
-            }
-        }
-        return re;
-    }
-    debouncedUpdateAllPositions() {
-        if (this._updatePositionsFrameId !== undefined) {
-            cancelAnimationFrame(this._updatePositionsFrameId);
-        }
-        this._updatePositionsFrameId = requestAnimationFrame(() => {
-            var _a, _b;
-            this._updatePositionsFrameId = undefined;
-            this.overlayRenderContainer.updateAllPositions();
-            // 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 (const entry of (_b = (_a = this._popoutWindowService) === null || _a === void 0 ? void 0 : _a.entries) !== null && _b !== void 0 ? _b : []) {
-                entry.overlayRenderContainer.updateAllPositions();
-            }
-        });
-    }
-    movingLock(func) {
-        const isMoving = this._moving;
-        try {
-            this._moving = true;
-            return func();
-        }
-        finally {
-            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.
-     */
-    mutation(kind, func) {
-        const outer = this._mutationDepth === 0;
-        const origin = this._origin;
-        if (outer) {
-            this._onWillMutateLayout.fire({ kind, origin });
-        }
-        this._mutationDepth++;
-        try {
-            return func();
-        }
-        finally {
-            this._mutationDepth--;
-            if (outer) {
-                this._onDidMutateLayout.fire({ kind, 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.
-     */
-    currentOrigin() {
-        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.
-     */
-    withOrigin(origin, func) {
-        if (this._originDepth > 0 || this._mutationDepth > 0) {
-            return func();
-        }
-        const 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.
-     */
-    fireActivePanelChange(panel) {
-        this._onDidActivePanelChange.fire({ panel, origin: this._origin });
-    }
-    moveGroupOrPanel(options) {
-        this.mutation('move', () => this._doMoveGroupOrPanel(options));
-    }
-    _doMoveGroupOrPanel(options) {
-        var _a, _b;
-        const destinationGroup = options.to.group;
-        const sourceGroupId = options.from.groupId;
-        const sourceItemId = options.from.panelId;
-        const destinationTarget = options.to.position;
-        const destinationIndex = options.to.index;
-        const sourceGroup = sourceGroupId
-            ? (_a = this._groups.get(sourceGroupId)) === null || _a === void 0 ? void 0 : _a.value
-            : undefined;
-        if (!sourceGroup) {
-            throw new Error(`dockview: Failed to find group id ${sourceGroupId}`);
-        }
-        if (sourceItemId === undefined) {
-            if (options.from.tabGroupId) {
-                /**
-                 * Moving a tab group (subset of panels) into another group
-                 */
-                this.moveTabGroupToGroup({
-                    sourceGroup,
-                    tabGroupId: options.from.tabGroupId,
-                    destinationGroup,
-                    destinationTarget,
-                    destinationIndex,
-                    skipSetActive: options.skipSetActive,
-                    keepEmptyGroups: options.keepEmptyGroups,
-                });
-            }
-            else {
-                /**
-                 * Moving an entire group into another group
-                 */
-                this.moveGroup({
-                    from: { group: sourceGroup },
-                    to: {
-                        group: destinationGroup,
-                        position: destinationTarget,
-                    },
-                    skipSetActive: options.skipSetActive,
-                });
-            }
-            return;
-        }
-        if (!destinationTarget || destinationTarget === 'center') {
-            /**
-             * Dropping a panel within another group
-             */
-            const removedPanel = this.movingLock(() => sourceGroup.model.removePanel(sourceItemId, {
-                skipSetActive: false,
-                skipSetActiveGroup: true,
-            }));
-            if (!removedPanel) {
-                throw new Error(`dockview: No panel with id ${sourceItemId}`);
-            }
-            if (!options.keepEmptyGroups && sourceGroup.model.size === 0) {
-                // remove the group and do not set a new group as active
-                this.doRemoveGroup(sourceGroup, { skipActive: true });
-            }
-            // Check if destination group is empty - if so, force render the component
-            const isDestinationGroupEmpty = destinationGroup.model.size === 0;
-            this.movingLock(() => {
-                var _a;
-                return destinationGroup.model.openPanel(removedPanel, {
-                    index: destinationIndex,
-                    skipSetActive: ((_a = options.skipSetActive) !== null && _a !== void 0 ? _a : false) &&
-                        !isDestinationGroupEmpty,
-                    skipSetGroupActive: true,
-                });
-            });
-            if (!options.skipSetActive) {
-                this.doSetGroupAndPanelActive(destinationGroup);
-            }
-            this._onDidMovePanel.fire({
-                panel: removedPanel,
-                from: sourceGroup,
-            });
-        }
-        else {
-            /**
-             * 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.
-            const destinationGridview = this.getGridviewForGroup(destinationGroup);
-            const referenceLocation = getGridLocation(destinationGroup.element);
-            const targetLocation = getRelativeLocation(destinationGridview.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
-                 */
-                const [targetParentLocation, to] = tail(targetLocation);
-                if (sourceGroup.api.location.type === 'grid' &&
-                    destinationGridview === this.gridview) {
-                    const sourceLocation = getGridLocation(sourceGroup.element);
-                    const [sourceParentLocation, from] = tail(sourceLocation);
-                    if (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'
-                        // which is equivalent to swapping two views in this case
-                        this.gridview.moveView(sourceParentLocation, from, to);
-                        this._onDidMovePanel.fire({
-                            panel: this.getGroupPanel(sourceItemId),
-                            from: sourceGroup,
-                        });
-                        return;
-                    }
-                }
-                if (sourceGroup.api.location.type === 'popout' &&
-                    this.nestedWindowMembers(sourceGroup).length <= 1) {
-                    /**
-                     * 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
-                     *    reference group it left behind in the main grid (see
-                     *    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.
-                     */
-                    const popoutGroup = (_b = this._popoutWindowService) === null || _b === void 0 ? void 0 : _b.findByGroup(sourceGroup);
-                    if (!popoutGroup) {
-                        return;
-                    }
-                    const removedPanel = this.movingLock(() => popoutGroup.popoutGroup.model.removePanel(popoutGroup.popoutGroup.panels[0], {
-                        skipSetActive: true,
-                        skipSetActiveGroup: true,
-                    }));
-                    this.doRemoveGroup(sourceGroup, { skipActive: true });
-                    const updatedTargetLocation = getRelativeLocation(destinationGridview.orientation, getGridLocation(destinationGroup.element), destinationTarget);
-                    const newGroup = this.createGroupAtLocation(updatedTargetLocation, undefined, undefined, destinationGridview);
-                    this.movingLock(() => newGroup.model.openPanel(removedPanel, {
-                        skipSetActive: true,
-                    }));
-                    this.doSetGroupAndPanelActive(newGroup);
-                    this._onDidMovePanel.fire({
-                        panel: this.getGroupPanel(sourceItemId),
-                        from: sourceGroup,
-                    });
-                    return;
-                }
-                if (sourceGroup.api.location.type === 'edge') {
-                    /**
-                     * Edge groups are permanent structural elements — never move the
-                     * group itself. Instead extract the panel and create a new grid group,
-                     * leaving the edge slot intact (same behaviour as the size >= 2 path).
-                     */
-                    const removedPanel = this.movingLock(() => sourceGroup.model.removePanel(sourceItemId, {
-                        skipSetActive: false,
-                        skipSetActiveGroup: true,
-                    }));
-                    if (!removedPanel) {
-                        throw new Error(`dockview: No panel with id ${sourceItemId}`);
-                    }
-                    const newGroup = this.createGroupAtLocation(targetLocation, undefined, undefined, destinationGridview);
-                    this.movingLock(() => newGroup.model.openPanel(removedPanel, {
-                        skipSetGroupActive: true,
-                    }));
-                    this.doSetGroupAndPanelActive(newGroup);
-                    this._onDidMovePanel.fire({
-                        panel: removedPanel,
-                        from: sourceGroup,
-                    });
-                    return;
-                }
-                // source group will become empty so delete the group
-                const targetGroup = this.movingLock(() => this.doRemoveGroup(sourceGroup, {
-                    skipActive: true,
-                    skipDispose: true,
-                }));
-                // after deleting the group we need to re-evaulate the ref location
-                const updatedReferenceLocation = getGridLocation(destinationGroup.element);
-                const location = getRelativeLocation(destinationGridview.orientation, updatedReferenceLocation, destinationTarget);
-                this.movingLock(() => this.doAddGroup(targetGroup, location, undefined, destinationGridview));
-                this.setGroupLocationForRoot(targetGroup, destinationGridview);
-                this.doSetGroupAndPanelActive(targetGroup);
-                this._onDidMovePanel.fire({
-                    panel: this.getGroupPanel(sourceItemId),
-                    from: sourceGroup,
-                });
-            }
-            else {
-                /**
-                 * The group we are removing from has many panels, we need to remove the panels we are moving,
-                 * create a new group, add the panels to that new group and add the new group in an appropiate position
-                 */
-                const removedPanel = this.movingLock(() => sourceGroup.model.removePanel(sourceItemId, {
-                    skipSetActive: false,
-                    skipSetActiveGroup: true,
-                }));
-                if (!removedPanel) {
-                    throw new Error(`dockview: No panel with id ${sourceItemId}`);
-                }
-                const dropLocation = getRelativeLocation(destinationGridview.orientation, referenceLocation, destinationTarget);
-                const group = this.createGroupAtLocation(dropLocation, undefined, undefined, destinationGridview);
-                this.movingLock(() => group.model.openPanel(removedPanel, {
-                    skipSetGroupActive: true,
-                }));
-                this.doSetGroupAndPanelActive(group);
-                this._onDidMovePanel.fire({
-                    panel: removedPanel,
-                    from: sourceGroup,
-                });
-            }
-        }
-    }
-    moveTabGroupToGroup(options) {
-        const { sourceGroup, tabGroupId, destinationGroup, destinationTarget, destinationIndex, } = options;
-        const tabGroup = sourceGroup.model
-            .getTabGroups()
-            .find((tg) => tg.id === tabGroupId);
-        if (!tabGroup || tabGroup.panelIds.length === 0) {
-            return;
-        }
-        // Snapshot tab group metadata before removing panels
-        const label = tabGroup.label;
-        const color = tabGroup.color;
-        const collapsed = tabGroup.collapsed;
-        const componentParams = tabGroup.componentParams;
-        const panelIds = [...tabGroup.panelIds];
-        // Capture the destination's grid location BEFORE potentially
-        // removing the source group, in case source === destination and
-        // the source becomes empty after panel removal.
-        const referenceLocation = destinationTarget && destinationTarget !== 'center'
-            ? getGridLocation(destinationGroup.element)
-            : undefined;
-        // Remove panels from the source group
-        const removedPanels = this.movingLock(() => panelIds
-            .map((pid) => sourceGroup.model.removePanel(pid, {
-            skipSetActive: false,
-            skipSetActiveGroup: true,
-        }))
-            .filter((p) => p !== undefined));
-        if (removedPanels.length === 0) {
-            return;
-        }
-        const addPanelsToGroup = (targetGroup) => {
-            this.movingLock(() => {
-                for (const panel of removedPanels) {
-                    targetGroup.model.openPanel(panel, {
-                        index: destinationIndex,
-                        skipSetActive: true,
-                        skipSetGroupActive: true,
-                    });
-                }
-            });
-            // Recreate the tab group in the destination
-            const newTabGroup = targetGroup.model.createTabGroup({
-                label,
-                color,
-                collapsed,
-                componentParams,
-            });
-            for (const panel of removedPanels) {
-                targetGroup.model.addPanelToTabGroup(newTabGroup.id, panel.id);
-            }
-            if (!options.skipSetActive) {
-                this.doSetGroupAndPanelActive(targetGroup);
-            }
-            for (const panel of removedPanels) {
-                this._onDidMovePanel.fire({
-                    panel,
-                    from: sourceGroup,
-                });
-            }
-        };
-        let targetGroup;
-        if (!destinationTarget ||
-            destinationTarget === 'center' ||
-            !referenceLocation) {
-            targetGroup = destinationGroup;
-        }
-        else {
-            const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
-            targetGroup = this.createGroupAtLocation(dropLocation);
-        }
-        // Remove the source group if it became empty. We compare against
-        // the actual targetGroup (which is a freshly-created group for
-        // edge drops) rather than the originally-passed destinationGroup,
-        // so a tab-group drag onto its own group's edge still cleans up
-        // the now-empty source.
-        if (!options.keepEmptyGroups &&
-            sourceGroup.model.size === 0 &&
-            sourceGroup !== targetGroup) {
-            this.doRemoveGroup(sourceGroup, { skipActive: true });
-        }
-        addPanelsToGroup(targetGroup);
-    }
-    moveGroup(options) {
-        this.mutation('move', () => 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.
-    maximizeGroup(panel) {
-        this.mutation('maximize', () => super.maximizeGroup(panel));
-    }
-    exitMaximizedGroup() {
-        this.mutation('maximize', () => super.exitMaximizedGroup());
-    }
-    _doMoveGroup(options) {
-        var _a, _b, _c;
-        const from = options.from.group;
-        const to = options.to.group;
-        const target = options.to.position;
-        // The group whose panels end up at the target. For non-edge moves
-        // we relocate `from` itself; for edge moves we move panels into a
-        // freshly created group so the edge slot stays anchored.
-        let source = from;
-        if (target === 'center') {
-            const activePanel = from.activePanel;
-            // Snapshot tab group metadata before removing panels so we
-            // can recreate the tab groups in the destination after the
-            // panels are merged in.
-            const tabGroupSnapshots = from.model.getTabGroups().map((tg) => ({
-                label: tg.label,
-                color: tg.color,
-                collapsed: tg.collapsed,
-                componentParams: tg.componentParams,
-                panelIds: [...tg.panelIds],
-            }));
-            const panels = this.movingLock(() => [...from.panels].map((p) => from.model.removePanel(p.id, {
-                skipSetActive: true,
-            })));
-            if ((from === null || from === void 0 ? void 0 : from.model.size) === 0) {
-                this.doRemoveGroup(from, { skipActive: true });
-            }
-            this.movingLock(() => {
-                for (const panel of panels) {
-                    to.model.openPanel(panel, {
-                        skipSetActive: panel !== activePanel,
-                        skipSetGroupActive: true,
-                    });
-                }
-            });
-            for (const snapshot of tabGroupSnapshots) {
-                const newTabGroup = to.model.createTabGroup({
-                    label: snapshot.label,
-                    color: snapshot.color,
-                    collapsed: snapshot.collapsed,
-                    componentParams: snapshot.componentParams,
-                });
-                for (const panelId of snapshot.panelIds) {
-                    to.model.addPanelToTabGroup(newTabGroup.id, panelId);
-                }
-            }
-            // Ensure group becomes active after move
-            if (options.skipSetActive !== true) {
-                // For center moves (merges), we need to ensure the target group is active
-                // unless explicitly told not to (skipSetActive: true)
-                this.doSetGroupAndPanelActive(to);
-            }
-            else if (!this.activePanel) {
-                // Even with skipSetActive: true, ensure there's an active panel if none exists
-                // This maintains basic functionality while respecting skipSetActive
-                this.doSetGroupAndPanelActive(to);
-            }
-        }
-        else {
-            if (from.api.location.type === 'edge') {
-                /**
-                 * Edge groups are permanent structural elements and must
-                 * stay anchored in their edge slot. Move the panels into a
-                 * new group; the auto-collapse listener registered in
-                 * addEdgeGroup will collapse the now-empty edge slot once
-                 * the last panel leaves. The placement code below then
-                 * positions `source` like any other moved group.
-                 */
-                const activePanel = from.activePanel;
-                // Snapshot tab group metadata so the new group inherits
-                // the tab grouping from the edge slot.
-                const tabGroupSnapshots = from.model
-                    .getTabGroups()
-                    .map((tg) => ({
-                    label: tg.label,
-                    color: tg.color,
-                    collapsed: tg.collapsed,
-                    componentParams: tg.componentParams,
-                    panelIds: [...tg.panelIds],
-                }));
-                const movedPanels = this.movingLock(() => [...from.panels].map((p) => from.model.removePanel(p.id, { skipSetActive: true })));
-                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(() => {
-                    for (const panel of movedPanels) {
-                        source.model.openPanel(panel, {
-                            skipSetActive: panel !== activePanel,
-                            skipSetGroupActive: true,
-                        });
-                    }
-                });
-                for (const snapshot of tabGroupSnapshots) {
-                    const newTabGroup = source.model.createTabGroup({
-                        label: snapshot.label,
-                        color: snapshot.color,
-                        collapsed: snapshot.collapsed,
-                        componentParams: snapshot.componentParams,
-                    });
-                    for (const panelId of snapshot.panelIds) {
-                        source.model.addPanelToTabGroup(newTabGroup.id, panelId);
-                    }
-                }
-            }
-            else {
-                switch (from.api.location.type) {
-                    case 'grid':
-                        this.gridview.removeView(getGridLocation(from.element));
-                        break;
-                    case 'floating': {
-                        const selectedFloatingGroup = (_a = this._floatingGroupService) === null || _a === void 0 ? void 0 : _a.findByGroup(from);
-                        if (!selectedFloatingGroup) {
-                            throw new Error('dockview: failed to find floating group');
-                        }
-                        // 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': {
-                        const selectedPopoutGroup = (_b = this._popoutWindowService) === null || _b === void 0 ? void 0 : _b.findByGroup(from);
-                        if (!selectedPopoutGroup) {
-                            throw new Error('dockview: failed to find popout group');
-                        }
-                        // 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.
-                        (_c = this._popoutWindowService) === null || _c === void 0 ? void 0 : _c.remove(selectedPopoutGroup);
-                        // Clean up the reference group (ghost) if it exists and is hidden
-                        if (selectedPopoutGroup.referenceGroup) {
-                            const referenceGroup = this.getPanel(selectedPopoutGroup.referenceGroup);
-                            if (referenceGroup &&
-                                !referenceGroup.api.isVisible) {
-                                this.doRemoveGroup(referenceGroup, {
-                                    skipActive: true,
-                                });
-                            }
-                        }
-                        // Dispose the window without triggering restoration. The
-                        // placement block below applies the destination
-                        // location and containers to `from`.
-                        selectedPopoutGroup.window.dispose();
-                        break;
-                    }
-                }
-            }
-            // 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') {
-                const destGridview = this.getGridviewForGroup(to);
-                const referenceLocation = getGridLocation(to.element);
-                const dropLocation = getRelativeLocation(destGridview.orientation, referenceLocation, target);
-                let size;
-                switch (destGridview.orientation) {
-                    case Orientation.VERTICAL:
-                        size =
-                            referenceLocation.length % 2 == 0
-                                ? from.api.width
-                                : from.api.height;
-                        break;
-                    case Orientation.HORIZONTAL:
-                        size =
-                            referenceLocation.length % 2 == 0
-                                ? from.api.height
-                                : from.api.width;
-                        break;
-                }
-                destGridview.addView(source, size, dropLocation);
-                this.setGroupLocationForRoot(source, destGridview);
-            }
-        }
-        source.panels.forEach((panel) => {
-            this._onDidMovePanel.fire({ panel, from });
-        });
-        this.debouncedUpdateAllPositions();
-        // Ensure group becomes active after move
-        if (options.skipSetActive === false) {
-            // Only activate when explicitly requested (skipSetActive: false)
-            // Use 'to' group for non-center moves since 'from' may have been destroyed
-            const targetGroup = to !== null && to !== void 0 ? to : from;
-            this.doSetGroupAndPanelActive(targetGroup);
-        }
-        else if (source !== from && options.skipSetActive !== true) {
-            // Edge group moves create a fresh `source` group; activate it
-            // by default so the moved panels receive focus.
-            this.doSetGroupAndPanelActive(source);
-        }
-    }
-    doSetGroupActive(group) {
-        var _a;
-        super.doSetGroupActive(group);
-        const activePanel = this.activePanel;
-        if (!this._moving &&
-            activePanel !== ((_a = this._onDidActivePanelChange.value) === null || _a === void 0 ? void 0 : _a.panel)) {
-            this.fireActivePanelChange(activePanel);
-        }
-    }
-    doSetGroupAndPanelActive(group) {
-        var _a;
-        super.doSetGroupActive(group);
-        const activePanel = this.activePanel;
-        if (group &&
-            this.hasMaximizedGroup() &&
-            !this.isMaximizedGroup(group)) {
-            this.exitMaximizedGroup();
-        }
-        if (!this._moving &&
-            activePanel !== ((_a = this._onDidActivePanelChange.value) === null || _a === void 0 ? void 0 : _a.panel)) {
-            this.fireActivePanelChange(activePanel);
-        }
-    }
-    getNextGroupId() {
-        let id = this.nextGroupId.next();
-        while (this._groups.has(id)) {
-            id = this.nextGroupId.next();
-        }
-        return id;
-    }
-    createGroup(options) {
-        options !== null && options !== void 0 ? options : (options = {});
-        let id = options === null || options === void 0 ? void 0 : options.id;
-        if (id && this._groups.has(options.id)) {
-            console.warn(`dockview: Duplicate group id ${options === null || options === void 0 ? void 0 : options.id}. reassigning group id to avoid errors`);
-            id = undefined;
-        }
-        if (!id) {
-            id = this.nextGroupId.next();
-            while (this._groups.has(id)) {
-                id = this.nextGroupId.next();
-            }
-        }
-        const view = new DockviewGroupPanel(this, id, options);
-        view.init({ params: {}, accessor: this });
-        if (!this._groups.has(view.id)) {
-            const disposable = new CompositeDisposable(view.model.onTabDragStart((event) => {
-                var _a;
-                (_a = this._advancedDnDService) === null || _a === void 0 ? void 0 : _a.dispatchWillDragPanel(event);
-            }), view.model.onGroupDragStart((event) => {
-                var _a;
-                (_a = this._advancedDnDService) === null || _a === void 0 ? void 0 : _a.dispatchWillDragGroup(event);
-            }), view.model.onMove((event) => {
-                const { groupId, itemId, target, index, tabGroupId } = event;
-                this.moveGroupOrPanel({
-                    from: {
-                        groupId: groupId,
-                        panelId: itemId,
-                        tabGroupId,
-                    },
-                    to: {
-                        group: view,
-                        position: target,
-                        index,
-                    },
-                });
-            }), view.model.onDidDrop((event) => {
-                this._onDidDrop.fire(event);
-            }), view.model.onWillDrop((event) => {
-                var _a;
-                (_a = this._advancedDnDService) === null || _a === void 0 ? void 0 : _a.dispatchWillDrop(event);
-            }), view.model.onWillShowOverlay((event) => {
-                var _a;
-                if (this.options.disableDnd) {
-                    // Engine policy — stays in core, ahead of any
-                    // customisation dispatch.
-                    event.preventDefault();
-                    return;
-                }
-                (_a = this._advancedDnDService) === null || _a === void 0 ? void 0 : _a.dispatchWillShowOverlay(event);
-            }), view.model.onUnhandledDragOver((event) => {
-                this._onUnhandledDragOver.fire(event);
-            }), view.model.onDidAddPanel((event) => {
-                if (this._moving) {
-                    return;
-                }
-                this._onDidAddPanel.fire(event.panel);
-            }), view.model.onDidRemovePanel((event) => {
-                if (this._moving) {
-                    return;
-                }
-                this._onDidRemovePanel.fire(event.panel);
-            }), view.model.onDidActivePanelChange((event) => {
-                var _a;
-                if (this._moving) {
-                    return;
-                }
-                if (event.panel !== this.activePanel) {
-                    return;
-                }
-                if (((_a = this._onDidActivePanelChange.value) === null || _a === void 0 ? void 0 : _a.panel) !==
-                    event.panel) {
-                    this.fireActivePanelChange(event.panel);
-                }
-            }), Event.any(view.model.onDidPanelTitleChange, view.model.onDidPanelParametersChange)(() => {
-                this._bufferOnDidLayoutChange.fire();
-            }));
-            this._groups.set(view.id, { value: view, disposable });
-        }
-        // TODO: must be called after the above listeners have been setup, not an ideal pattern
-        view.initialize();
-        return view;
-    }
-    createPanel(options, group) {
-        var _a, _b, _c;
-        const contentComponent = options.component;
-        const tabComponent = (_a = options.tabComponent) !== null && _a !== void 0 ? _a : this.options.defaultTabComponent;
-        const view = new DockviewPanelModel(this, options.id, contentComponent, tabComponent);
-        const panel = new DockviewPanel(options.id, contentComponent, tabComponent, this, this._api, group, view, {
-            renderer: options.renderer,
-            minimumWidth: options.minimumWidth,
-            minimumHeight: options.minimumHeight,
-            maximumWidth: options.maximumWidth,
-            maximumHeight: options.maximumHeight,
-        });
-        panel.init({
-            title: (_b = options.title) !== null && _b !== void 0 ? _b : options.id,
-            params: (_c = options === null || options === void 0 ? void 0 : options.params) !== null && _c !== void 0 ? _c : {},
-        });
-        return panel;
-    }
-    createGroupAtLocation(location, size, options, gridview = this.gridview) {
-        const group = this.createGroup(options);
-        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).
-     */
-    setGroupLocationForRoot(group, gridview) {
-        var _a;
-        const popout = (_a = this._popoutWindowService) === null || _a === void 0 ? void 0 : _a.entries.find((entry) => 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.
-     */
-    getGridviewForGroup(group) {
-        var _a, _b;
-        const 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.
-        const 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.
-     */
-    nestedWindowMembers(group) {
-        const gridview = this.getGridviewForGroup(group);
-        if (gridview === this.gridview) {
-            return [];
-        }
-        return this.groups.filter((candidate) => gridview.element.contains(candidate.element));
-    }
-    findGroup(panel) {
-        var _a;
-        return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
-    }
-    orientationAtLocation(location) {
-        const rootOrientation = this.gridview.orientation;
-        return location.length % 2 == 1
-            ? rootOrientation
-            : orthogonal(rootOrientation);
-    }
-    updateTheme() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        const theme = (_a = this._options.theme) !== null && _a !== void 0 ? _a : 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.
-        (_b = this._shellThemeClassnames) === null || _b === void 0 ? void 0 : _b.setClassNames(theme.className);
-        const gap = (_c = theme.gap) !== null && _c !== void 0 ? _c : 0;
-        this.gridview.margin = gap;
-        // Floating / popout windows host their own nested gridviews; keep their
-        // gap in sync with the main grid when the theme changes at runtime.
-        for (const floating of this.floatingGroups) {
-            floating.gridview.margin = gap;
-        }
-        for (const entry of (_e = (_d = this._popoutWindowService) === null || _d === void 0 ? void 0 : _d.entries) !== null && _e !== void 0 ? _e : []) {
-            entry.gridview.margin = gap;
-        }
-        (_f = this._shellManager) === null || _f === void 0 ? void 0 : _f.updateTheme(gap, (_g = theme.edgeGroupCollapsedSize) !== null && _g !== void 0 ? _g : 35);
-        if (theme.dndOverlayBorder === undefined) {
-            this.element.style.removeProperty('--dv-drag-over-border');
-            (_h = this._shellManager) === null || _h === void 0 ? void 0 : _h.element.style.removeProperty('--dv-drag-over-border');
-        }
-        else {
-            this.element.style.setProperty('--dv-drag-over-border', theme.dndOverlayBorder);
-            (_j = this._shellManager) === null || _j === void 0 ? void 0 : _j.element.style.setProperty('--dv-drag-over-border', theme.dndOverlayBorder);
-        }
-        switch (theme.dndOverlayMounting) {
-            case 'absolute':
-                this.rootDropTargetContainer.disabled = false;
-                break;
-            case 'relative':
-            default:
-                this.rootDropTargetContainer.disabled = true;
-                break;
-        }
-        // Toggle a CSS class so theme stylesheets can scope pure-CSS
-        // tab group indicator rules to the 'none' mode only.
-        const indicatorNone = ((_k = theme.tabGroupIndicator) !== null && _k !== void 0 ? _k : 'wrap') === 'none';
-        toggleClass(this.element, 'dv-tab-group-indicator-none', indicatorNone);
-        if (this._shellManager) {
-            toggleClass(this._shellManager.element, 'dv-tab-group-indicator-none', indicatorNone);
-        }
-        // Re-render tab group indicators so the new tabGroupIndicator mode takes effect
-        for (const group of this.groups) {
-            group.model.updateTabGroups();
-        }
-    }
-}