dockview-core 5.1.0 → 6.0.0

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -7,6 +7,7 @@ import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
 import { ContentContainer, } from './components/panel/content';
 import { TabsContainer, } from './components/titlebar/tabsContainer';
 import { DockviewUnhandledDragOverEvent, } from './options';
+import { TabGroup, } from './tabGroup';
 export class DockviewDidDropEvent extends DockviewEvent {
     get nativeEvent() {
         return this.options.nativeEvent;
@@ -41,6 +42,9 @@ export class DockviewWillDropEvent extends DockviewDidDropEvent {
     }
 }
 export class DockviewGroupPanelModel extends CompositeDisposable {
+    get tabGroups() {
+        return this._tabGroups;
+    }
     get element() {
         throw new Error('dockview: not supported');
     }
@@ -108,6 +112,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this._location = value;
         toggleClass(this.container, 'dv-groupview-floating', false);
         toggleClass(this.container, 'dv-groupview-popout', false);
+        toggleClass(this.container, 'dv-groupview-edge', false);
         switch (value.type) {
             case 'grid':
                 this.contentContainer.dropTarget.setTargetZones([
@@ -129,6 +134,10 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
                 this.contentContainer.dropTarget.setTargetZones(['center']);
                 toggleClass(this.container, 'dv-groupview-popout', true);
                 break;
+            case 'edge':
+                this.contentContainer.dropTarget.setTargetZones(['center']);
+                toggleClass(this.container, 'dv-groupview-edge', true);
+                break;
         }
         this.groupPanel.api._onDidLocationChange.fire({
             location: this.location,
@@ -157,6 +166,8 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this._height = 0;
         this._panels = [];
         this._panelDisposables = new Map();
+        this._tabGroupDisposables = new Map();
+        this._pendingMicrotaskDisposables = new Set();
         this._onMove = new Emitter();
         this.onMove = this._onMove.event;
         this._onDidDrop = new Emitter();
@@ -181,6 +192,23 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
         this._onUnhandledDragOverEvent = new Emitter();
         this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+        this._tabGroups = [];
+        this._tabGroupMap = new Map();
+        this._panelToTabGroup = new Map();
+        this._tabGroupIdCounter = 0;
+        this._pendingTabGroupUpdate = false;
+        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;
         toggleClass(this.container, 'dv-groupview', true);
         this._api = new DockviewApi(this.accessor);
         this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
@@ -195,7 +223,38 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         }), this.tabsContainer.onGroupDragStart((event) => {
             this._onGroupDragStart.fire(event);
         }), this.tabsContainer.onDrop((event) => {
+            var _a;
+            // Capture panel data before handleDropEvent (which may trigger moves)
+            const dragData = getPanelData();
+            const draggedPanelId = (_a = dragData === null || dragData === void 0 ? void 0 : dragData.panelId) !== null && _a !== void 0 ? _a : null;
             this.handleDropEvent('header', event.event, 'center', event.index);
+            // Update tab group membership after the move completes
+            if (draggedPanelId && event.targetTabGroupId) {
+                // Compute the local index within the target tab group
+                // from the global panel index so the panel is inserted
+                // at the correct position, not just appended.
+                const tabGroup = this._tabGroupMap.get(event.targetTabGroupId);
+                let localIndex;
+                if (tabGroup) {
+                    const globalIdx = this._panels.findIndex((p) => p.id === draggedPanelId);
+                    if (globalIdx !== -1) {
+                        // Count how many of this group's panels
+                        // appear before the dragged panel
+                        localIndex = 0;
+                        for (const pid of tabGroup.panelIds) {
+                            const pidIdx = this._panels.findIndex((p) => p.id === pid);
+                            if (pidIdx < globalIdx) {
+                                localIndex++;
+                            }
+                        }
+                    }
+                }
+                this.addPanelToTabGroup(event.targetTabGroupId, draggedPanelId, localIndex);
+            }
+            else if (draggedPanelId && event.targetTabGroupId === null) {
+                // Dropped outside any group — remove from current group
+                this.removePanelFromTabGroup(draggedPanelId);
+            }
         }), this.contentContainer.onDidFocus(() => {
             this.accessor.doSetGroupActive(this.groupPanel);
         }), this.contentContainer.onDidBlur(() => {
@@ -212,7 +271,378 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
                 group: this.groupPanel,
                 getData: getPanelData,
             }));
-        }), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this._onUnhandledDragOverEvent, this._onDidPanelTitleChange, this._onDidPanelParametersChange);
+        }), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this._onUnhandledDragOverEvent, this._onDidPanelTitleChange, this._onDidPanelParametersChange, this._onDidCreateTabGroup, this._onDidDestroyTabGroup, this._onDidAddPanelToTabGroup, this._onDidRemovePanelFromTabGroup, this._onDidTabGroupChange, this._onDidTabGroupCollapsedChange, this._onDidCreateTabGroup.event(() => {
+            this._scheduleTabGroupUpdate();
+        }), this._onDidDestroyTabGroup.event(() => {
+            this._scheduleTabGroupUpdate();
+        }), this._onDidAddPanelToTabGroup.event(() => {
+            this._scheduleTabGroupUpdate();
+        }), this._onDidRemovePanelFromTabGroup.event(() => {
+            this._scheduleTabGroupUpdate();
+        }), this._onDidTabGroupChange.event(() => {
+            this._scheduleTabGroupUpdate();
+        }), this._onDidTabGroupCollapsedChange.event(() => {
+            this._scheduleTabGroupUpdate();
+        }));
+    }
+    _scheduleTabGroupUpdate() {
+        if (this._pendingTabGroupUpdate) {
+            return;
+        }
+        this._pendingTabGroupUpdate = true;
+        queueMicrotask(() => {
+            this._pendingTabGroupUpdate = false;
+            if (!this.isDisposed) {
+                this.tabsContainer.updateTabGroups();
+            }
+        });
+    }
+    createTabGroup(options) {
+        var _a;
+        const id = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : `tg-${this.id}-${this._tabGroupIdCounter++}`;
+        const tabGroup = new TabGroup(id, {
+            label: options === null || options === void 0 ? void 0 : options.label,
+            color: options === null || options === void 0 ? void 0 : options.color,
+            collapsed: options === null || options === void 0 ? void 0 : options.collapsed,
+            componentParams: options === null || options === void 0 ? void 0 : options.componentParams,
+        });
+        this._tabGroups.push(tabGroup);
+        this._tabGroupMap.set(id, tabGroup);
+        this._tabGroupDisposables.set(id, new CompositeDisposable(tabGroup.onDidChange(() => {
+            this._onDidTabGroupChange.fire({ tabGroup });
+        }), tabGroup.onDidCollapseChange((isCollapsed) => {
+            if (isCollapsed) {
+                this._handleGroupCollapse(tabGroup);
+            }
+            else {
+                this._handleGroupExpand(tabGroup);
+            }
+            this._onDidTabGroupCollapsedChange.fire({
+                tabGroup,
+            });
+        }), tabGroup.onDidDestroy(() => {
+            this._removeTabGroupInternal(tabGroup);
+        })));
+        this._onDidCreateTabGroup.fire({ tabGroup });
+        return tabGroup;
+    }
+    dissolveTabGroup(tabGroupId) {
+        const tabGroup = this._tabGroupMap.get(tabGroupId);
+        if (!tabGroup) {
+            return;
+        }
+        // Remove all panels from the group (they stay in the flat panel list)
+        const panelIds = [...tabGroup.panelIds];
+        for (const panelId of panelIds) {
+            tabGroup.removePanel(panelId);
+            this._panelToTabGroup.delete(panelId);
+            this._onDidRemovePanelFromTabGroup.fire({ tabGroup, panelId });
+        }
+        tabGroup.dispose();
+    }
+    addPanelToTabGroup(tabGroupId, panelId, index) {
+        const tabGroup = this._tabGroupMap.get(tabGroupId);
+        if (!tabGroup) {
+            return;
+        }
+        // Ensure the panel actually exists in this group model
+        if (!this._panels.some((p) => p.id === panelId)) {
+            return;
+        }
+        // Remove from any existing group first
+        const existingGroup = this.getTabGroupForPanel(panelId);
+        if (existingGroup) {
+            if (existingGroup.id === tabGroupId) {
+                return; // already in this group
+            }
+            this.removePanelFromTabGroup(panelId);
+        }
+        tabGroup.addPanel(panelId, index);
+        this._panelToTabGroup.set(panelId, tabGroup);
+        // Enforce contiguity: move the panel in the flat _panels array
+        // to the correct global position matching its group-local index
+        this._enforceContiguity(tabGroup, panelId);
+        this._onDidAddPanelToTabGroup.fire({ tabGroup, panelId });
+    }
+    /**
+     * Move a panel to a new index within its tab group.
+     * Updates both the group's panelIds order and the flat _panels array.
+     */
+    movePanelWithinGroup(tabGroupId, panelId, newIndex) {
+        const tabGroup = this._tabGroupMap.get(tabGroupId);
+        if (!tabGroup || !tabGroup.containsPanel(panelId)) {
+            return;
+        }
+        // Remove and re-add at new index within the group
+        tabGroup.removePanel(panelId);
+        tabGroup.addPanel(panelId, newIndex);
+        // Re-enforce contiguity in the flat array
+        this._enforceContiguity(tabGroup, panelId);
+        this.tabsContainer.updateTabGroups();
+    }
+    /**
+     * Move a panel from one tab group to another.
+     */
+    movePanelBetweenGroups(sourcePanelId, targetTabGroupId, targetIndex) {
+        const sourceGroup = this._findTabGroupForPanel(sourcePanelId);
+        const targetGroup = this._tabGroupMap.get(targetTabGroupId);
+        if (!targetGroup) {
+            return;
+        }
+        if (sourceGroup) {
+            sourceGroup.removePanel(sourcePanelId);
+            this._panelToTabGroup.delete(sourcePanelId);
+            this._onDidRemovePanelFromTabGroup.fire({
+                tabGroup: sourceGroup,
+                panelId: sourcePanelId,
+            });
+            // Auto-destroy empty source group
+            if (sourceGroup.isEmpty) {
+                sourceGroup.dispose();
+            }
+        }
+        targetGroup.addPanel(sourcePanelId, targetIndex);
+        this._panelToTabGroup.set(sourcePanelId, targetGroup);
+        this._enforceContiguity(targetGroup, sourcePanelId);
+        this._onDidAddPanelToTabGroup.fire({
+            tabGroup: targetGroup,
+            panelId: sourcePanelId,
+        });
+    }
+    /**
+     * Move an entire tab group to a new position in the tab bar.
+     * The group's internal panel order is preserved.
+     */
+    moveTabGroup(tabGroupId, targetIndex) {
+        const tabGroup = this._tabGroupMap.get(tabGroupId);
+        if (!tabGroup || tabGroup.panelIds.length === 0) {
+            return;
+        }
+        // Collect group panels in their current order
+        const groupPanelIds = new Set(tabGroup.panelIds);
+        const groupPanels = tabGroup.panelIds
+            .map((pid) => this._panels.find((p) => p.id === pid))
+            .filter((p) => p !== undefined);
+        if (groupPanels.length === 0) {
+            return;
+        }
+        // Count how many group panels sit before the target index so
+        // we can compensate after removing them from the array.
+        let groupPanelsBefore = 0;
+        for (let i = 0; i < Math.min(targetIndex, this._panels.length); i++) {
+            if (groupPanelIds.has(this._panels[i].id)) {
+                groupPanelsBefore++;
+            }
+        }
+        // Remove group panels from the flat array
+        for (const panel of groupPanels) {
+            const idx = this._panels.indexOf(panel);
+            if (idx !== -1) {
+                this._panels.splice(idx, 1);
+            }
+        }
+        // Adjust target index to account for removed panels
+        const adjustedIndex = targetIndex - groupPanelsBefore;
+        // Clamp target index to valid range after removal
+        const insertAt = Math.max(0, Math.min(adjustedIndex, this._panels.length));
+        // Insert group panels at the target position
+        this._panels.splice(insertAt, 0, ...groupPanels);
+        // Rebuild the tabs container to match new order
+        for (const panel of this._panels) {
+            this.tabsContainer.delete(panel.id);
+        }
+        for (let i = 0; i < this._panels.length; i++) {
+            this.tabsContainer.openPanel(this._panels[i], i);
+        }
+        this.tabsContainer.updateTabGroups();
+    }
+    /**
+     * Ensure a panel is at the correct global index in _panels
+     * to maintain contiguity of its tab group members.
+     */
+    _enforceContiguity(tabGroup, panelId) {
+        const panel = this._panels.find((p) => p.id === panelId);
+        if (!panel) {
+            return;
+        }
+        const localIndex = tabGroup.indexOfPanel(panelId);
+        const globalIndex = this._computeGlobalIndex(tabGroup, localIndex);
+        const currentIndex = this._panels.indexOf(panel);
+        if (currentIndex === globalIndex) {
+            return;
+        }
+        // Move panel in the flat array
+        this._panels.splice(currentIndex, 1);
+        const adjustedIndex = globalIndex > currentIndex ? globalIndex - 1 : globalIndex;
+        this._panels.splice(adjustedIndex, 0, panel);
+        // Reorder in the tabs container to match
+        this.tabsContainer.delete(panelId);
+        this.tabsContainer.openPanel(panel, adjustedIndex);
+    }
+    /**
+     * Compute the global index in _panels for a group-local index.
+     * Finds where the group's panels start in the flat array and offsets.
+     */
+    _computeGlobalIndex(tabGroup, localIndex) {
+        const groupPanelIds = tabGroup.panelIds;
+        if (groupPanelIds.length <= 1) {
+            // Only one panel (the one being added), keep current position
+            const panel = this._panels.find((p) => p.id === groupPanelIds[0]);
+            return panel ? this._panels.indexOf(panel) : this._panels.length;
+        }
+        // Find the first existing group member (other than the one at localIndex)
+        // to anchor the group position
+        for (let i = 0; i < groupPanelIds.length; i++) {
+            if (i === localIndex) {
+                continue;
+            }
+            const existingPanel = this._panels.find((p) => p.id === groupPanelIds[i]);
+            if (existingPanel) {
+                const existingGlobalIndex = this._panels.indexOf(existingPanel);
+                // Offset based on relative position within group
+                return Math.max(0, existingGlobalIndex + (localIndex - i));
+            }
+        }
+        return this._panels.length;
+    }
+    removePanelFromTabGroup(panelId) {
+        const tabGroup = this._findTabGroupForPanel(panelId);
+        if (!tabGroup) {
+            return;
+        }
+        tabGroup.removePanel(panelId);
+        this._panelToTabGroup.delete(panelId);
+        this._onDidRemovePanelFromTabGroup.fire({ tabGroup, panelId });
+        // Auto-destroy empty groups
+        if (tabGroup.isEmpty) {
+            tabGroup.dispose();
+        }
+    }
+    getTabGroups() {
+        return this._tabGroups;
+    }
+    updateTabGroups() {
+        this.tabsContainer.updateTabGroups();
+    }
+    refreshTabGroupAccent() {
+        this.tabsContainer.refreshTabGroupAccent();
+    }
+    getTabGroupForPanel(panelId) {
+        return this._findTabGroupForPanel(panelId);
+    }
+    _findTabGroupForPanel(panelId) {
+        return this._panelToTabGroup.get(panelId);
+    }
+    _removeTabGroupInternal(tabGroup) {
+        const index = this._tabGroups.indexOf(tabGroup);
+        if (index !== -1) {
+            this._tabGroups.splice(index, 1);
+            this._tabGroupMap.delete(tabGroup.id);
+            for (const panelId of tabGroup.panelIds) {
+                this._panelToTabGroup.delete(panelId);
+            }
+            this._onDidDestroyTabGroup.fire({ tabGroup });
+            // Dispose the external listeners (onDidChange, onDidCollapseChange)
+            // we registered on this group. We cannot dispose synchronously
+            // here because this method runs inside the onDidDestroy fire
+            // loop — disposing the CompositeDisposable that holds the
+            // onDidDestroy subscription would splice listeners mid-iteration.
+            // Schedule cleanup on the next microtask instead.
+            const tabGroupDisposable = this._tabGroupDisposables.get(tabGroup.id);
+            this._tabGroupDisposables.delete(tabGroup.id);
+            if (tabGroupDisposable) {
+                this._pendingMicrotaskDisposables.add(tabGroupDisposable);
+                queueMicrotask(() => {
+                    this._pendingMicrotaskDisposables.delete(tabGroupDisposable);
+                    tabGroupDisposable.dispose();
+                });
+            }
+        }
+    }
+    _handleGroupCollapse(tabGroup) {
+        if (!this._activePanel) {
+            return;
+        }
+        // Only act if the active panel belongs to the collapsed group
+        if (!tabGroup.containsPanel(this._activePanel.id)) {
+            return;
+        }
+        const activePanelIndex = this._panels.indexOf(this._activePanel);
+        // Search right first, then left, for a visible (non-collapsed-group) panel
+        for (let i = activePanelIndex + 1; i < this._panels.length; i++) {
+            const candidate = this._panels[i];
+            const candidateGroup = this._findTabGroupForPanel(candidate.id);
+            if (!candidateGroup || !candidateGroup.collapsed) {
+                this.doSetActivePanel(candidate);
+                this.updateContainer();
+                return;
+            }
+        }
+        for (let i = activePanelIndex - 1; i >= 0; i--) {
+            const candidate = this._panels[i];
+            const candidateGroup = this._findTabGroupForPanel(candidate.id);
+            if (!candidateGroup || !candidateGroup.collapsed) {
+                this.doSetActivePanel(candidate);
+                this.updateContainer();
+                return;
+            }
+        }
+        // All tabs are in collapsed groups — show watermark
+        this.contentContainer.closePanel();
+        this.doSetActivePanel(undefined);
+        this.updateContainer();
+    }
+    _handleGroupExpand(tabGroup) {
+        if (this._activePanel) {
+            return;
+        }
+        // Watermark is showing because all groups were collapsed.
+        // Activate the first panel in the newly expanded group.
+        const firstPanelId = tabGroup.panelIds[0];
+        if (firstPanelId) {
+            const panel = this._panels.find((p) => p.id === firstPanelId);
+            if (panel) {
+                this.doSetActivePanel(panel);
+                this.updateContainer();
+            }
+        }
+    }
+    /** Restore tab groups from serialized data (used by fromJSON) */
+    restoreTabGroups(serializedGroups) {
+        // Bump counter past any restored numeric suffixes to avoid ID collisions
+        for (const data of serializedGroups) {
+            const match = data.id.match(/-(\d+)$/);
+            if (match) {
+                const num = parseInt(match[1], 10) + 1;
+                if (num > this._tabGroupIdCounter) {
+                    this._tabGroupIdCounter = num;
+                }
+            }
+        }
+        for (const data of serializedGroups) {
+            const tabGroup = this.createTabGroup({
+                id: data.id,
+                label: data.label,
+                color: data.color,
+                componentParams: data.componentParams,
+            });
+            const concreteGroup = this._tabGroupMap.get(tabGroup.id);
+            for (const panelId of data.panelIds) {
+                // Only add panels that actually exist in this group model
+                if (this._panels.some((p) => p.id === panelId)) {
+                    tabGroup.addPanel(panelId);
+                    this._panelToTabGroup.set(panelId, concreteGroup);
+                    this._enforceContiguity(concreteGroup, panelId);
+                }
+            }
+            if (data.collapsed) {
+                tabGroup.collapse();
+            }
+            // Auto-destroy if no valid panels were added
+            if (tabGroup.isEmpty) {
+                tabGroup.dispose();
+            }
+        }
     }
     focusContent() {
         this.contentContainer.element.focus();
@@ -325,6 +755,9 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         if (this.headerPosition !== 'top') {
             result.headerPosition = this.headerPosition;
         }
+        if (this._tabGroups.length > 0) {
+            result.tabGroups = this._tabGroups.map((tg) => tg.toJSON());
+        }
         return result;
     }
     moveToNext(options) {
@@ -464,7 +897,13 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         toggleClass(this.container, 'dv-inactive-group', !isGroupActive);
         this.tabsContainer.setActive(this.isActive);
         if (!this._activePanel && this.panels.length > 0) {
-            this.doSetActivePanel(this.panels[0]);
+            const candidate = this._panels.find((p) => {
+                const tg = this._findTabGroupForPanel(p.id);
+                return !tg || !tg.collapsed;
+            });
+            if (candidate) {
+                this.doSetActivePanel(candidate);
+            }
         }
         this.updateContainer();
     }
@@ -511,6 +950,8 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             disposable.dispose();
             this._panelDisposables.delete(panel.id);
         }
+        // Remove panel from its tab group (auto-destroys empty groups)
+        this.removePanelFromTabGroup(panel.id);
         this._onDidRemovePanel.fire({ panel });
     }
     doAddPanel(panel, index = this.panels.length, options = { skipSetActive: false }) {
@@ -560,7 +1001,8 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
     updateContainer() {
         var _a, _b;
         this.panels.forEach((panel) => panel.runEvents());
-        if (this.isEmpty && !this.watermark) {
+        const shouldShowWatermark = this.isEmpty || !this._activePanel;
+        if (shouldShowWatermark && !this.watermark) {
             const watermark = this.accessor.createWatermarkComponent();
             watermark.init({
                 containerApi: this._api,
@@ -574,7 +1016,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             });
             this.contentContainer.element.appendChild(this.watermark.element);
         }
-        if (!this.isEmpty && this.watermark) {
+        if (!shouldShowWatermark && this.watermark) {
             this.watermark.element.remove();
             (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
             this.watermark = undefined;
@@ -639,6 +1081,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
                     target: position,
                     groupId: groupId,
                     index,
+                    tabGroupId: data.tabGroupId,
                 });
                 return;
             }
@@ -681,6 +1124,19 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.element.remove();
         (_c = (_b = this.watermark) === null || _b === void 0 ? void 0 : _b.dispose) === null || _c === void 0 ? void 0 : _c.call(_b);
         this.watermark = undefined;
+        // Dispose all tab groups
+        for (const tabGroup of [...this._tabGroups]) {
+            tabGroup.dispose();
+        }
+        for (const disposable of this._tabGroupDisposables.values()) {
+            disposable.dispose();
+        }
+        this._tabGroupDisposables.clear();
+        // Dispose any microtask-deferred disposables that haven't run yet
+        for (const disposable of this._pendingMicrotaskDisposables) {
+            disposable.dispose();
+        }
+        this._pendingMicrotaskDisposables.clear();
         for (const panel of this.panels) {
             panel.dispose();
         }

package/dist/esm/dockview/dockviewShell.d.ts

@@ -0,0 +1,128 @@
+import { Event } from '../events';
+import { IDisposable } from '../lifecycle';
+import { IView, LayoutPriority } from '../splitview/splitview';
+export type EdgeGroupPosition = 'top' | 'bottom' | 'left' | 'right';
+export interface EdgeGroupOptions {
+    id: string;
+    initialSize?: number;
+    minimumSize?: number;
+    maximumSize?: number;
+    collapsedSize?: number;
+    collapsed?: boolean;
+}
+export interface SerializedEdgeGroups {
+    top?: {
+        size: number;
+        visible: boolean;
+        collapsed?: boolean;
+        group?: unknown;
+    };
+    bottom?: {
+        size: number;
+        visible: boolean;
+        collapsed?: boolean;
+        group?: unknown;
+    };
+    left?: {
+        size: number;
+        visible: boolean;
+        collapsed?: boolean;
+        group?: unknown;
+    };
+    right?: {
+        size: number;
+        visible: boolean;
+        collapsed?: boolean;
+        group?: unknown;
+    };
+}
+/**
+ * Minimal interface for a edge group host.
+ * Avoids circular imports by not referencing DockviewGroupPanel directly.
+ */
+export interface IEdgeGroupHost {
+    readonly element: HTMLElement;
+    layout(width: number, height: number): void;
+}
+export declare class EdgeGroupView implements IView {
+    private readonly _group;
+    private readonly _orientation;
+    private readonly _onDidChange;
+    readonly onDidChange: Event<{
+        size?: number;
+        orthogonalSize?: number;
+    }>;
+    readonly snap = false;
+    readonly priority = LayoutPriority.Low;
+    private _isCollapsed;
+    private _lastExpandedSize;
+    private _collapsedSize;
+    private _expandedMinimumSize;
+    private readonly _expandedMaximumSize;
+    get minimumSize(): number;
+    get maximumSize(): number;
+    get element(): HTMLElement;
+    get isCollapsed(): boolean;
+    get lastExpandedSize(): number;
+    get collapsedSize(): number;
+    constructor(options: EdgeGroupOptions, group: IEdgeGroupHost, orientation: 'horizontal' | 'vertical');
+    layout(size: number, orthogonalSize: number): void;
+    setCollapsed(collapsed: boolean): void;
+    setVisible(_visible: boolean): void;
+    /**
+     * Restore the last-expanded size from serialized state without triggering
+     * a layout. Must be called before setCollapsed(true) during fromJSON so
+     * that expanding after deserialization restores the correct size.
+     */
+    restoreExpandedSize(size: number): void;
+    /**
+     * Apply new effective collapsed and expanded-minimum sizes after a theme
+     * or gap change. The caller (ShellManager) is responsible for computing
+     * the correct values from the original config and the new gap.
+     */
+    updateCollapsedSize(newCollapsedSize: number, newExpandedMinimumSize: number): void;
+    dispose(): void;
+}
+export declare class ShellManager implements IDisposable {
+    private readonly _outerSplitview;
+    private readonly _middleColumn;
+    private readonly _shellElement;
+    private _topView;
+    private _bottomView;
+    private _leftView;
+    private _rightView;
+    private _leftIndex;
+    private _middleIndex;
+    private _rightIndex;
+    private readonly _disposables;
+    private readonly _viewConfigs;
+    private _currentWidth;
+    private _currentHeight;
+    private _gap;
+    private _defaultCollapsedSize;
+    constructor(container: HTMLElement, dockviewElement: HTMLElement, layoutGrid: (width: number, height: number) => void, gap?: number, defaultCollapsedSize?: number);
+    get element(): HTMLElement;
+    /**
+     * Add an edge group view at the given position. The view wraps the
+     * provided group element inside the shell's splitview layout.
+     * Throws if a group at this position is already registered.
+     */
+    addEdgeView(position: EdgeGroupPosition, options: EdgeGroupOptions, group: IEdgeGroupHost): EdgeGroupView;
+    layout(width: number, height: number): void;
+    /**
+     * Called when the active theme changes. Updates splitview margins and
+     * edge-group collapsed sizes so the layout matches the new theme's gap
+     * and tab-strip dimensions.
+     */
+    updateTheme(gap: number, defaultCollapsedSize: number): void;
+    removeEdgeView(position: EdgeGroupPosition): void;
+    hasEdgeGroup(position: EdgeGroupPosition): boolean;
+    setEdgeGroupVisible(position: EdgeGroupPosition, visible: boolean): void;
+    isEdgeGroupVisible(position: EdgeGroupPosition): boolean;
+    setEdgeGroupCollapsed(position: EdgeGroupPosition, collapsed: boolean): void;
+    isEdgeGroupCollapsed(position: EdgeGroupPosition): boolean;
+    private _getView;
+    toJSON(): SerializedEdgeGroups;
+    fromJSON(data: SerializedEdgeGroups): void;
+    dispose(): void;
+}