dockview 1.0.3 → 1.3.0

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.0.3
+ * @version 1.3.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -27,6 +27,76 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 
+    class TransferObject {
+        constructor() {
+            //
+        }
+    }
+    class PanelTransfer extends TransferObject {
+        constructor(viewId, groupId, panelId) {
+            super();
+            this.viewId = viewId;
+            this.groupId = groupId;
+            this.panelId = panelId;
+        }
+    }
+    class PaneTransfer extends TransferObject {
+        constructor(viewId, paneId) {
+            super();
+            this.viewId = viewId;
+            this.paneId = paneId;
+        }
+    }
+    /**
+     * A singleton to store transfer data during drag & drop operations that are only valid within the application.
+     */
+    class LocalSelectionTransfer {
+        constructor() {
+            // protect against external instantiation
+        }
+        static getInstance() {
+            return LocalSelectionTransfer.INSTANCE;
+        }
+        hasData(proto) {
+            return proto && proto === this.proto;
+        }
+        clearData(proto) {
+            if (this.hasData(proto)) {
+                this.proto = undefined;
+                this.data = undefined;
+            }
+        }
+        getData(proto) {
+            if (this.hasData(proto)) {
+                return this.data;
+            }
+            return undefined;
+        }
+        setData(data, proto) {
+            if (proto) {
+                this.data = data;
+                this.proto = proto;
+            }
+        }
+    }
+    LocalSelectionTransfer.INSTANCE = new LocalSelectionTransfer();
+    function getPanelData() {
+        const panelTransfer = LocalSelectionTransfer.getInstance();
+        const isPanelEvent = panelTransfer.hasData(PanelTransfer.prototype);
+        if (!isPanelEvent) {
+            return undefined;
+        }
+        return panelTransfer.getData(PanelTransfer.prototype)[0];
+    }
+    function getPaneData() {
+        const paneTransfer = LocalSelectionTransfer.getInstance();
+        const isPanelEvent = paneTransfer.hasData(PaneTransfer.prototype);
+        if (!isPanelEvent) {
+            return undefined;
+        }
+        return paneTransfer.getData(PaneTransfer.prototype)[0];
+    }
+
     exports.Event = void 0;
     (function (Event) {
         Event.any = (...children) => {
@@ -57,7 +127,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.replay) && this._last !== undefined) {
                         listener(this._last);
                     }
-                    this._listeners.length === 0;
                     this._listeners.push(listener);
                     return {
                         dispose: () => {
@@ -73,9 +142,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         fire(e) {
             this._last = e;
-            this._listeners.forEach((listener) => {
+            for (const listener of this._listeners) {
                 listener(e);
-            });
+            }
         }
         dispose() {
             this._listeners = [];
@@ -117,164 +186,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    exports.Disposable = void 0;
-    (function (Disposable) {
-        Disposable.NONE = {
-            dispose: () => {
-                // noop
-            },
-        };
-    })(exports.Disposable || (exports.Disposable = {}));
-    class CompositeDisposable {
-        constructor(...args) {
-            this.disposables = args;
-        }
-        static from(...args) {
-            return new CompositeDisposable(...args);
-        }
-        addDisposables(...args) {
-            args === null || args === void 0 ? void 0 : args.forEach((arg) => this.disposables.push(arg));
-        }
-        dispose() {
-            this.disposables.forEach((arg) => arg.dispose());
-        }
-    }
-    class MutableDisposable {
-        constructor() {
-            this._disposable = exports.Disposable.NONE;
-        }
-        set value(disposable) {
-            if (this._disposable) {
-                this._disposable.dispose();
-            }
-            this._disposable = disposable;
-        }
-        dispose() {
-            if (this._disposable) {
-                this._disposable.dispose();
-            }
-        }
-    }
-
-    function tryParseJSON(text, reviver) {
-        try {
-            return JSON.parse(text, reviver);
-        }
-        catch (err) {
-            console.warn('failed to parse JSON');
-            return undefined;
-        }
-    }
-
-    class TransferObject {
-        constructor() {
-            //
-        }
-    }
-    class PanelTransfer extends TransferObject {
-        constructor(viewId, groupId, panelId) {
-            super();
-            this.viewId = viewId;
-            this.groupId = groupId;
-            this.panelId = panelId;
-        }
-    }
-    class PaneTransfer extends TransferObject {
-        constructor(viewId, paneId) {
-            super();
-            this.viewId = viewId;
-            this.paneId = paneId;
-        }
-    }
-    const DATA_KEY = 'splitview/transfer';
-    const isPanelTransferEvent = (event) => {
-        if (!event.dataTransfer) {
-            return false;
-        }
-        return event.dataTransfer.types.includes(DATA_KEY);
-    };
-    exports.DragType = void 0;
-    (function (DragType) {
-        DragType["DOCKVIEW_TAB"] = "dockview_tab";
-        DragType["EXTERNAL"] = "external_group_drag";
-    })(exports.DragType || (exports.DragType = {}));
-    /**
-     * Determine whether this data belong to that of an event that was started by
-     * dragging a tab component
-     */
-    const isTabDragEvent = (data) => {
-        return data.type === exports.DragType.DOCKVIEW_TAB;
-    };
-    /**
-     * Determine whether this data belong to that of an event that was started by
-     * a custom drag-enable component
-     */
-    const isCustomDragEvent = (data) => {
-        return data.type === exports.DragType.EXTERNAL;
-    };
-    const extractData = (event) => {
-        if (!event.dataTransfer) {
-            return null;
-        }
-        const data = tryParseJSON(event.dataTransfer.getData(DATA_KEY));
-        if (!data) {
-            console.warn(`[dragEvent] ${DATA_KEY} data is missing`);
-        }
-        if (typeof data.type !== 'string') {
-            console.warn(`[dragEvent] invalid type ${data.type}`);
-        }
-        return data;
-    };
-    /**
-     * A singleton to store transfer data during drag & drop operations that are only valid within the application.
-     */
-    class LocalSelectionTransfer {
-        constructor() {
-            // protect against external instantiation
-        }
-        static getInstance() {
-            return LocalSelectionTransfer.INSTANCE;
-        }
-        hasData(proto) {
-            return proto && proto === this.proto;
-        }
-        clearData(proto) {
-            if (this.hasData(proto)) {
-                this.proto = undefined;
-                this.data = undefined;
-            }
-        }
-        getData(proto) {
-            if (this.hasData(proto)) {
-                return this.data;
-            }
-            return undefined;
-        }
-        setData(data, proto) {
-            if (proto) {
-                this.data = data;
-                this.proto = proto;
-            }
-        }
-    }
-    LocalSelectionTransfer.INSTANCE = new LocalSelectionTransfer();
-    function getPanelData() {
-        const panelTransfer = LocalSelectionTransfer.getInstance();
-        const isPanelEvent = panelTransfer.hasData(PanelTransfer.prototype);
-        if (!isPanelEvent) {
-            return undefined;
-        }
-        return panelTransfer.getData(PanelTransfer.prototype)[0];
-    }
-    function getPaneData() {
-        const paneTransfer = LocalSelectionTransfer.getInstance();
-        const isPanelEvent = paneTransfer.hasData(PaneTransfer.prototype);
-        if (!isPanelEvent) {
-            return undefined;
-        }
-        return paneTransfer.getData(PaneTransfer.prototype)[0];
-    }
-
     class SplitviewApi {
         constructor(component) {
             this.component = component;
@@ -294,6 +205,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get length() {
             return this.component.length;
         }
+        get orientation() {
+            return this.component.orientation;
+        }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
@@ -303,9 +217,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get onDidRemoveView() {
             return this.component.onDidRemoveView;
         }
-        get orientation() {
-            return this.component.orientation;
-        }
         updateOptions(options) {
             this.component.updateOptions(options);
         }
@@ -350,18 +261,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(component) {
             this.component = component;
         }
-        get width() {
-            return this.component.width;
-        }
-        get height() {
-            return this.component.height;
-        }
         get minimumSize() {
             return this.component.minimumSize;
         }
         get maximumSize() {
             return this.component.maximumSize;
         }
+        get height() {
+            return this.component.height;
+        }
+        get width() {
+            return this.component.width;
+        }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
@@ -401,7 +312,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.component.layout(width, height);
         }
         addPanel(options) {
-            return this.component.addPanel(options);
+            this.component.addPanel(options);
         }
         resizeToFit() {
             this.component.resizeToFit();
@@ -417,12 +328,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(component) {
             this.component = component;
         }
-        get width() {
-            return this.component.width;
-        }
-        get height() {
-            return this.component.height;
-        }
         get minimumHeight() {
             return this.component.minimumHeight;
         }
@@ -435,12 +340,27 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get maximumWidth() {
             return this.component.maximumWidth;
         }
-        get onGridEvent() {
-            return this.component.onGridEvent;
+        get width() {
+            return this.component.width;
+        }
+        get height() {
+            return this.component.height;
         }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
+        get onDidAddGroup() {
+            return this.component.onDidAddGroup;
+        }
+        get onDidRemoveGroup() {
+            return this.component.onDidRemoveGroup;
+        }
+        get onDidActiveGroupChange() {
+            return this.component.onDidActiveGroupChange;
+        }
+        get onDidLayoutFromJSON() {
+            return this.component.onDidLayoutFromJSON;
+        }
         get panels() {
             return this.component.groups;
         }
@@ -515,8 +435,26 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get totalPanels() {
             return this.component.totalPanels;
         }
-        get onGridEvent() {
-            return this.component.onGridEvent;
+        get onDidActiveGroupChange() {
+            return this.component.onDidActiveGroupChange;
+        }
+        get onDidAddGroup() {
+            return this.component.onDidAddGroup;
+        }
+        get onDidRemoveGroup() {
+            return this.component.onDidRemoveGroup;
+        }
+        get onDidActivePanelChange() {
+            return this.component.onDidActivePanelChange;
+        }
+        get onDidAddPanel() {
+            return this.component.onDidAddPanel;
+        }
+        get onDidRemovePanel() {
+            return this.component.onDidRemovePanel;
+        }
+        get onDidLayoutfromJSON() {
+            return this.component.onDidLayoutfromJSON;
         }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
@@ -545,18 +483,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         getPanel(id) {
             return this.component.getGroupPanel(id);
         }
-        setActivePanel(panel) {
-            this.component.setActivePanel(panel);
-        }
         layout(width, height, force = false) {
             this.component.layout(width, height, force);
         }
         addPanel(options) {
             return this.component.addPanel(options);
         }
-        removePanel(panel) {
-            this.component.removePanel(panel);
-        }
         addEmptyGroup(options) {
             this.component.addEmptyGroup(options);
         }
@@ -586,6 +518,46 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
+    var Disposable;
+    (function (Disposable) {
+        Disposable.NONE = {
+            dispose: () => {
+                // noop
+            },
+        };
+    })(Disposable || (Disposable = {}));
+    class CompositeDisposable {
+        constructor(...args) {
+            this.disposables = args;
+        }
+        static from(...args) {
+            return new CompositeDisposable(...args);
+        }
+        addDisposables(...args) {
+            args.forEach((arg) => this.disposables.push(arg));
+        }
+        dispose() {
+            this.disposables.forEach((arg) => arg.dispose());
+        }
+    }
+    class MutableDisposable {
+        constructor() {
+            this._disposable = Disposable.NONE;
+        }
+        set value(disposable) {
+            if (this._disposable) {
+                this._disposable.dispose();
+            }
+            this._disposable = disposable;
+        }
+        dispose() {
+            if (this._disposable) {
+                this._disposable.dispose();
+                this._disposable = Disposable.NONE;
+            }
+        }
+    }
+
     function watchElementResize(element, cb) {
         const observer = new ResizeObserver((entires) => {
             const firstEntry = entires[0];
@@ -1531,13 +1503,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onDidSashEnd.dispose();
             this._onDidAddView.dispose();
             this._onDidRemoveView.dispose();
-            this.element.remove();
             for (let i = 0; i < this.element.children.length; i++) {
                 if (this.element.children.item(i) === this.element) {
                     this.element.removeChild(this.element);
                     break;
                 }
             }
+            this.element.remove();
         }
     }
 
@@ -1560,7 +1532,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             // if we've added views from the descriptor we need to
             // add the panes to our Pane array and setup animation
-            this.getPanes().forEach((pane, index) => {
+            this.getPanes().forEach((pane) => {
                 const disposable = new CompositeDisposable(pane.onDidChangeExpansionState(() => {
                     this.setupAnimation();
                     this._onDidChange.fire(undefined);
@@ -1576,7 +1548,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 this.paneItems.push(paneItem);
                 pane.orthogonalSize = this.splitview.orthogonalSize;
             });
-            this.addDisposables(this.splitview.onDidSashEnd(() => {
+            this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
                 this._onDidChange.fire(undefined);
             }), this.splitview.onDidAddView(() => {
                 this._onDidChange.fire();
@@ -1628,17 +1600,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         getPanes() {
             return this.splitview.getViews();
         }
-        removePane(index) {
+        removePane(index, options = { skipDispose: false }) {
             const paneItem = this.paneItems.splice(index, 1)[0];
             this.splitview.removeView(index);
-            paneItem.disposable.dispose();
+            if (!options.skipDispose) {
+                paneItem.disposable.dispose();
+                paneItem.pane.dispose();
+            }
             return paneItem;
         }
         moveView(from, to) {
             if (from === to) {
                 return;
             }
-            const view = this.removePane(from);
+            const view = this.removePane(from, { skipDispose: true });
             this.skipAnimation = true;
             try {
                 this.addPane(view.pane, view.pane.size, to, false);
@@ -1666,15 +1641,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         dispose() {
             super.dispose();
-            this.splitview.dispose();
             if (this.animationTimer) {
                 clearTimeout(this.animationTimer);
                 this.animationTimer = undefined;
             }
             this.paneItems.forEach((paneItem) => {
                 paneItem.disposable.dispose();
+                paneItem.pane.dispose();
             });
             this.paneItems = [];
+            this.splitview.dispose();
             this.element.remove();
         }
     }
@@ -1737,8 +1713,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.options = options;
             this._onDrop = new Emitter();
             this.onDrop = this._onDrop.event;
-            this.addDisposables(new DragAndDropObserver(this.element, {
-                onDragEnter: (e) => undefined,
+            this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
+                onDragEnter: () => undefined,
                 onDragOver: (e) => {
                     if (isBooleanValue(this.options.canDisplayOverlay)) {
                         if (!this.options.canDisplayOverlay) {
@@ -1773,56 +1749,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     const y = e.offsetY;
                     const xp = (100 * x) / width;
                     const yp = (100 * y) / height;
-                    let isRight = false;
-                    let isLeft = false;
-                    let isTop = false;
-                    let isBottom = false;
-                    switch (this.options.validOverlays) {
-                        case 'all':
-                            isRight = xp > 80;
-                            isLeft = xp < 20;
-                            isTop = !isRight && !isLeft && yp < 20;
-                            isBottom = !isRight && !isLeft && yp > 80;
-                            break;
-                        case 'vertical':
-                            isTop = yp < 50;
-                            isBottom = yp >= 50;
-                            break;
-                        case 'horizontal':
-                            isLeft = xp < 50;
-                            isRight = xp >= 50;
-                            break;
-                    }
+                    const quadrant = this.calculateQuadrant(this.options.validOverlays, xp, yp);
                     const isSmallX = width < 100;
                     const isSmallY = height < 100;
-                    toggleClass(this.overlay, 'right', !isSmallX && isRight);
-                    toggleClass(this.overlay, 'left', !isSmallX && isLeft);
-                    toggleClass(this.overlay, 'top', !isSmallY && isTop);
-                    toggleClass(this.overlay, 'bottom', !isSmallY && isBottom);
-                    toggleClass(this.overlay, 'small-right', isSmallX && isRight);
-                    toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
-                    toggleClass(this.overlay, 'small-top', isSmallY && isTop);
-                    toggleClass(this.overlay, 'small-bottom', isSmallY && isBottom);
-                    if (isRight) {
-                        this._state = exports.Position.Right;
-                    }
-                    else if (isLeft) {
-                        this._state = exports.Position.Left;
-                    }
-                    else if (isTop) {
-                        this._state = exports.Position.Top;
-                    }
-                    else if (isBottom) {
-                        this._state = exports.Position.Bottom;
-                    }
-                    else {
-                        this._state = exports.Position.Center;
-                    }
+                    this.toggleClasses(quadrant, isSmallX, isSmallY);
+                    this.setState(quadrant);
                 },
-                onDragLeave: (e) => {
+                onDragLeave: () => {
                     this.removeDropTarget();
                 },
-                onDragEnd: (e) => {
+                onDragEnd: () => {
                     this.removeDropTarget();
                 },
                 onDrop: (e) => {
@@ -1846,9 +1782,73 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.options.canDisplayOverlay = value;
         }
         dispose() {
-            this._onDrop.dispose();
             this.removeDropTarget();
         }
+        toggleClasses(quadrant, isSmallX, isSmallY) {
+            if (!this.overlay) {
+                return;
+            }
+            const isLeft = quadrant === 'left';
+            const isRight = quadrant === 'right';
+            const isTop = quadrant === 'top';
+            const isBottom = quadrant === 'bottom';
+            toggleClass(this.overlay, 'right', !isSmallX && isRight);
+            toggleClass(this.overlay, 'left', !isSmallX && isLeft);
+            toggleClass(this.overlay, 'top', !isSmallY && isTop);
+            toggleClass(this.overlay, 'bottom', !isSmallY && isBottom);
+            toggleClass(this.overlay, 'small-right', isSmallX && isRight);
+            toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
+            toggleClass(this.overlay, 'small-top', isSmallY && isTop);
+            toggleClass(this.overlay, 'small-bottom', isSmallY && isBottom);
+        }
+        setState(quadrant) {
+            switch (quadrant) {
+                case 'top':
+                    this._state = exports.Position.Top;
+                    break;
+                case 'left':
+                    this._state = exports.Position.Left;
+                    break;
+                case 'bottom':
+                    this._state = exports.Position.Bottom;
+                    break;
+                case 'right':
+                    this._state = exports.Position.Right;
+                    break;
+                default:
+                    this._state = exports.Position.Center;
+                    break;
+            }
+        }
+        calculateQuadrant(overlayType, xp, yp) {
+            switch (overlayType) {
+                case 'all':
+                    if (xp < 20) {
+                        return 'left';
+                    }
+                    if (xp > 80) {
+                        return 'right';
+                    }
+                    if (yp < 20) {
+                        return 'top';
+                    }
+                    if (yp > 80) {
+                        return 'bottom';
+                    }
+                    break;
+                case 'vertical':
+                    if (yp < 50) {
+                        return 'top';
+                    }
+                    return 'bottom';
+                case 'horizontal':
+                    if (xp < 50) {
+                        return 'left';
+                    }
+                    return 'right';
+            }
+            return null;
+        }
         removeDropTarget() {
             if (this.target) {
                 this._state = undefined;
@@ -1951,6 +1951,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.view.layout(this.width, this.height);
         }
         dispose() {
+            this._onDidChange.dispose();
             this._disposable.dispose();
         }
     }
@@ -1968,7 +1969,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.children = [];
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
-            this._childrenDisposable = exports.Disposable.NONE;
+            this._childrenDisposable = Disposable.NONE;
             this._orthogonalSize = orthogonalSize;
             this._size = size;
             this.element = document.createElement('div');
@@ -1993,7 +1994,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                                 : true,
                         };
                     }),
-                    size: this.orthogonalSize,
+                    size: this.size,
                 };
                 this.children = childDescriptors.map((c) => c.node);
                 this.splitview = new Splitview(this.element, {
@@ -2002,7 +2003,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     proportionalLayout,
                 });
             }
-            this.addDisposables(this.splitview.onDidSashEnd(() => {
+            this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
                 this._onDidChange.fire(undefined);
             }));
             this.setupChildrenEvents();
@@ -2154,7 +2155,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         setupChildrenEvents() {
             this._childrenDisposable.dispose();
-            this._childrenDisposable = exports.Event.any(...this.children.map((c) => c.onDidChange))((e) => {
+            this._childrenDisposable = exports.Event.any(...this.children.map((c) => c.onDidChange))(() => {
                 /**
                  * indicate a change has occured to allows any re-rendering but don't bubble
                  * event because that was specific to this branch
@@ -2174,6 +2175,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
      * Accreditation: This file is largly based upon the MIT licenced VSCode sourcecode found at:
      * https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid
      *--------------------------------------------------------------------------------------------*/
+    function findLeaf(candiateNode, last) {
+        if (candiateNode instanceof LeafNode) {
+            return candiateNode;
+        }
+        if (candiateNode instanceof BranchNode) {
+            return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last);
+        }
+        throw new Error('invalid node');
+    }
     function flipNode(node, size, orthogonalSize) {
         if (node instanceof BranchNode) {
             const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize);
@@ -2305,6 +2315,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.disposable.dispose();
             this._onDidChange.dispose();
             this.root.dispose();
+            this.element.remove();
         }
         clear() {
             const orientation = this.root.orientation;
@@ -2312,13 +2323,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         deserialize(json, deserializer) {
             const orientation = json.orientation;
-            const height = json.height;
+            const height = orientation === exports.Orientation.VERTICAL ? json.height : json.width;
             this._deserialize(json.root, orientation, deserializer, height);
         }
         _deserialize(root, orientation, deserializer, orthogonalSize) {
-            this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
+            this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize, true);
         }
-        _deserializeNode(node, orientation, deserializer, orthogonalSize) {
+        _deserializeNode(node, orientation, deserializer, orthogonalSize, isRoot = false) {
             let result;
             if (node.type === 'branch') {
                 const serializedChildren = node.data;
@@ -2328,7 +2339,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         visible: serializedChild.visible,
                     };
                 });
-                result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, orthogonalSize, children);
+                // HORIZONTAL => height=orthogonalsize width=size
+                // VERTICAL => height=size width=orthogonalsize
+                result = new BranchNode(orientation, this.proportionalLayout, this.styles, isRoot ? orthogonalSize : node.size, isRoot ? node.size : orthogonalSize, children);
             }
             else {
                 result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
@@ -2389,15 +2402,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (!(node instanceof LeafNode)) {
                 throw new Error('invalid location');
             }
-            const findLeaf = (candiateNode, last) => {
-                if (candiateNode instanceof LeafNode) {
-                    return candiateNode;
-                }
-                if (candiateNode instanceof BranchNode) {
-                    return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last);
-                }
-                throw new Error('invalid node');
-            };
             for (let i = path.length - 1; i > -1; i--) {
                 const n = path[i];
                 const l = location[i] || 0;
@@ -2499,9 +2503,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (parent.children.length > 1) {
                 return node.view;
             }
+            const sibling = parent.children[0];
             if (pathToParent.length === 0) {
                 // parent is root
-                const sibling = parent.children[0];
                 if (sibling instanceof LeafNode) {
                     return node.view;
                 }
@@ -2512,10 +2516,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             const [grandParent, ..._] = [...pathToParent].reverse();
             const [parentIndex, ...__] = [...rest].reverse();
-            const sibling = parent.children[0];
             const isSiblingVisible = parent.isChildVisible(0);
             parent.removeChild(0, sizing);
-            const sizes = grandParent.children.map((size, i) => grandParent.getChildSize(i));
+            const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i));
             grandParent.removeChild(parentIndex, sizing);
             if (sibling instanceof BranchNode) {
                 sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
@@ -2559,31 +2562,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-
     class ContentContainer extends CompositeDisposable {
         constructor() {
             super();
@@ -2595,6 +2573,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._element = document.createElement('div');
             this._element.className = 'content-container';
             this._element.tabIndex = -1;
+            this.addDisposables(this._onDidFocus, this._onDidBlur);
             // for hosted containers
             // 1) register a drop target on the host
             // 2) register window dragStart events to disable pointer events
@@ -2638,7 +2617,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             this.disposable.value = disposable;
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop
         }
         closePanel() {
@@ -2661,6 +2640,41 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
     })(DockviewDropTargets || (DockviewDropTargets = {}));
 
+    class DragHandler extends CompositeDisposable {
+        constructor(el) {
+            super();
+            this.el = el;
+            this.disposable = new MutableDisposable();
+            this._onDragStart = new Emitter();
+            this.onDragStart = this._onDragStart.event;
+            this.iframes = [];
+            this.configure();
+        }
+        configure() {
+            this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
+                this.iframes = [
+                    ...getElementsByTagName('iframe'),
+                    ...getElementsByTagName('webview'),
+                ];
+                for (const iframe of this.iframes) {
+                    iframe.style.pointerEvents = 'none';
+                }
+                this.el.classList.add('dragged');
+                setTimeout(() => this.el.classList.remove('dragged'), 0);
+                this.disposable.value = this.getData();
+                if (event.dataTransfer) {
+                    event.dataTransfer.effectAllowed = 'move';
+                }
+            }), addDisposableListener(this.el, 'dragend', () => {
+                for (const iframe of this.iframes) {
+                    iframe.style.pointerEvents = 'auto';
+                }
+                this.iframes = [];
+                this.disposable.dispose();
+            }));
+        }
+    }
+
     exports.MouseEventKind = void 0;
     (function (MouseEventKind) {
         MouseEventKind["CLICK"] = "CLICK";
@@ -2670,42 +2684,34 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(panelId, accessor, group) {
             super();
             this.panelId = panelId;
-            this.accessor = accessor;
             this.group = group;
             this._onChanged = new Emitter();
             this.onChanged = this._onChanged.event;
             this._onDropped = new Emitter();
             this.onDrop = this._onDropped.event;
-            this.panelTransfer = LocalSelectionTransfer.getInstance();
-            this.iframes = [];
             this.addDisposables(this._onChanged, this._onDropped);
             this._element = document.createElement('div');
             this._element.className = 'tab';
             this._element.tabIndex = 0;
             this._element.draggable = true;
-            this.addDisposables(addDisposableListener(this._element, 'dragstart', (event) => {
-                this.iframes = [
-                    ...getElementsByTagName('iframe'),
-                    ...getElementsByTagName('webview'),
-                ];
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'none';
+            this.addDisposables(new (class Handler extends DragHandler {
+                constructor() {
+                    super(...arguments);
+                    this.panelTransfer = LocalSelectionTransfer.getInstance();
                 }
-                this.element.classList.add('dragged');
-                setTimeout(() => this.element.classList.remove('dragged'), 0);
-                this.panelTransfer.setData([
-                    new PanelTransfer(this.accessor.id, this.group.id, this.panelId),
-                ], PanelTransfer.prototype);
-                if (event.dataTransfer) {
-                    event.dataTransfer.effectAllowed = 'move';
+                getData() {
+                    this.panelTransfer.setData([new PanelTransfer(accessor.id, group.id, panelId)], PanelTransfer.prototype);
+                    return {
+                        dispose: () => {
+                            this.panelTransfer.clearData(PanelTransfer.prototype);
+                        },
+                    };
                 }
-            }), addDisposableListener(this._element, 'dragend', (ev) => {
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'auto';
+                dispose() {
+                    //
                 }
-                this.iframes = [];
-                this.panelTransfer.clearData(PanelTransfer.prototype);
-            }), addDisposableListener(this._element, 'mousedown', (event) => {
+            })(this._element));
+            this.addDisposables(addDisposableListener(this._element, 'mousedown', (event) => {
                 if (event.defaultPrevented) {
                     return;
                 }
@@ -2907,12 +2913,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 if (!isLeftClick || event.event.defaultPrevented) {
                     return;
                 }
-                switch (event.kind) {
-                    case exports.MouseEventKind.CLICK:
-                        this.group.model.openPanel(panel, {
-                            skipFocus: alreadyFocused,
-                        });
-                        break;
+                if (event.kind === exports.MouseEventKind.CLICK) {
+                    this.group.model.openPanel(panel, {
+                        skipFocus: alreadyFocused,
+                    });
                 }
             }), tabToAdd.onDrop((event) => {
                 this._onDrop.fire({
@@ -2941,7 +2945,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         GroupChangeKind2["ADD_PANEL"] = "ADD_PANEL";
         GroupChangeKind2["REMOVE_PANEL"] = "REMOVE_PANEL";
         GroupChangeKind2["PANEL_ACTIVE"] = "PANEL_ACTIVE";
-        GroupChangeKind2["GROUP_ACTIVE"] = "GROUP_ACTIVE";
     })(exports.GroupChangeKind2 || (exports.GroupChangeKind2 = {}));
     class Groupview extends CompositeDisposable {
         constructor(container, accessor, id, options, parent) {
@@ -2962,15 +2965,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onMove = this._onMove.event;
             this._onDidGroupChange = new Emitter();
             this.onDidGroupChange = this._onDidGroupChange.event;
-            this.closePanel = (panel) => __awaiter(this, void 0, void 0, function* () {
-                if (panel.close && !(yield panel.close())) {
-                    return false;
-                }
-                this.doClose(panel);
-                return true;
-            });
+            this._onDidDrop = new Emitter();
+            this.onDidDrop = this._onDidDrop.event;
             this.container.classList.add('groupview');
-            this.addDisposables(this._onMove, this._onDidGroupChange);
+            this.addDisposables(this._onMove, this._onDidGroupChange, this._onDidChange, this._onDidDrop);
             this.tabsContainer = new TabsContainer(this.accessor, this.parent, {
                 tabHeight: options.tabHeight,
             });
@@ -3034,6 +3032,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get maximumWidth() {
             return Number.MAX_SAFE_INTEGER;
         }
+        get hasWatermark() {
+            return !!(this.watermark && this.container.contains(this.watermark.element));
+        }
         initialize() {
             var _a, _b;
             if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.panels) {
@@ -3112,10 +3113,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         containsPanel(panel) {
             return this.panels.includes(panel);
         }
-        init(params) {
+        init(_params) {
             //noop
         }
-        update(params) {
+        update(_params) {
             //noop
         }
         focus() {
@@ -3127,6 +3128,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 options.index > this.panels.length) {
                 options.index = this.panels.length;
             }
+            // ensure the group is updated before we fire any events
+            panel.updateParentGroup(this.parent, true);
             if (this._activePanel === panel) {
                 this.accessor.doSetGroupActive(this.parent);
                 return;
@@ -3147,43 +3150,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return this._removePanel(panelToRemove);
         }
         closeAllPanels() {
-            var _a;
-            return __awaiter(this, void 0, void 0, function* () {
-                const index = this._activePanel
-                    ? this.panels.indexOf(this._activePanel)
-                    : -1;
-                if (this._activePanel && index > -1) {
-                    if (this.panels.indexOf(this._activePanel) < 0) {
-                        console.warn('active panel not tracked');
-                    }
-                    const canClose = !((_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.close) || (yield this._activePanel.close());
-                    if (!canClose) {
-                        return false;
-                    }
-                }
-                for (let i = 0; i < this.panels.length; i++) {
-                    if (i === index) {
-                        continue;
-                    }
-                    const panel = this.panels[i];
-                    this.openPanel(panel);
-                    if (panel.close) {
-                        const canClose = yield panel.close();
-                        if (!canClose) {
-                            return false;
-                        }
-                    }
-                }
-                if (this.panels.length > 0) {
-                    // take a copy since we will be edting the array as we iterate through
-                    const arrPanelCpy = [...this.panels];
-                    yield Promise.all(arrPanelCpy.map((p) => this.doClose(p)));
+            if (this.panels.length > 0) {
+                // take a copy since we will be edting the array as we iterate through
+                const arrPanelCpy = [...this.panels];
+                for (const panel of arrPanelCpy) {
+                    this.doClose(panel);
                 }
-                else {
-                    this.accessor.removeGroup(this.parent);
-                }
-                return true;
-            });
+            }
+            else {
+                this.accessor.removeGroup(this.parent);
+            }
+        }
+        closePanel(panel) {
+            this.doClose(panel);
         }
         doClose(panel) {
             this.accessor.removePanel(panel);
@@ -3326,8 +3305,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 this.tabsContainer.show();
             }
         }
-        canDisplayOverlay(dragOverEvent, target) {
+        canDisplayOverlay(event, target) {
             // custom overlay handler
+            if (this.accessor.options.showDndOverlay) {
+                return this.accessor.options.showDndOverlay(event, target);
+            }
             return false;
         }
         handleDropEvent(event, position, index) {
@@ -3352,31 +3334,23 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     index,
                 });
             }
+            else {
+                this._onDidDrop.fire({ nativeEvent: event, position, index });
+            }
         }
         dispose() {
+            var _a;
+            super.dispose();
+            (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.dispose();
             for (const panel of this.panels) {
                 panel.dispose();
             }
-            super.dispose();
             this.dropTarget.dispose();
             this.tabsContainer.dispose();
             this.contentContainer.dispose();
         }
     }
 
-    exports.GroupChangeKind = void 0;
-    (function (GroupChangeKind) {
-        GroupChangeKind["ADD_PANEL"] = "ADD_PANEL";
-        GroupChangeKind["REMOVE_PANEL"] = "REMOVE_PANEL";
-        GroupChangeKind["PANEL_ACTIVE"] = "PANEL_ACTIVE";
-        //
-        GroupChangeKind["GROUP_ACTIVE"] = "GROUP_ACTIVE";
-        GroupChangeKind["ADD_GROUP"] = "ADD_GROUP";
-        GroupChangeKind["REMOVE_GROUP"] = "REMOVE_GROUP";
-        //
-        GroupChangeKind["LAYOUT_FROM_JSON"] = "LAYOUT_FROM_JSON";
-        GroupChangeKind["LAYOUT"] = "LAYOUT";
-    })(exports.GroupChangeKind || (exports.GroupChangeKind = {}));
     const nextLayoutId = sequentialNumberGenerator();
     function toTarget(direction) {
         switch (direction) {
@@ -3399,36 +3373,26 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._element = _element;
             this._id = nextLayoutId.next();
             this._groups = new Map();
-            //
-            this._onGridEvent = new Emitter();
-            this.onGridEvent = this._onGridEvent.event;
             this._onDidLayoutChange = new Emitter();
             this.onDidLayoutChange = this._onDidLayoutChange.event;
+            this._onDidRemoveGroup = new Emitter();
+            this.onDidRemoveGroup = this._onDidRemoveGroup.event;
+            this._onDidAddGroup = new Emitter();
+            this.onDidAddGroup = this._onDidAddGroup.event;
+            this._onDidActiveGroupChange = new Emitter();
+            this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+            this._bufferOnDidLayoutChange = new TickDelayedEvent();
             this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
             this.element.appendChild(this.gridview.element);
-            // TODO for some reason this is required before anything will layout correctly
-            this.layout(0, 0, true);
+            this.layout(0, 0, true); // set some elements height/widths
             this.addDisposables(this.gridview.onDidChange(() => {
-                this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT });
+                this._onDidLayoutChange.fire();
             }));
-            this.addDisposables((() => {
-                const tickDelayedEvent = new TickDelayedEvent();
-                return new CompositeDisposable(this.onGridEvent((event) => {
-                    if ([
-                        exports.GroupChangeKind.ADD_GROUP,
-                        exports.GroupChangeKind.REMOVE_GROUP,
-                        exports.GroupChangeKind.ADD_PANEL,
-                        exports.GroupChangeKind.REMOVE_PANEL,
-                        exports.GroupChangeKind.GROUP_ACTIVE,
-                        exports.GroupChangeKind.PANEL_ACTIVE,
-                        exports.GroupChangeKind.LAYOUT,
-                    ].includes(event.kind)) {
-                        tickDelayedEvent.fire();
-                    }
-                }), tickDelayedEvent.onEvent(() => {
-                    this._onDidLayoutChange.fire();
-                }), tickDelayedEvent);
-            })());
+            this.addDisposables(exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+                this._bufferOnDidLayoutChange.fire();
+            }), this._bufferOnDidLayoutChange.onEvent(() => {
+                this._onDidLayoutChange.fire();
+            }), this._bufferOnDidLayoutChange);
         }
         get id() {
             return this._id;
@@ -3465,14 +3429,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         setVisible(panel, visible) {
             this.gridview.setViewVisible(getGridLocation(panel.element), visible);
-            this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT });
+            this._onDidLayoutChange.fire();
         }
         isVisible(panel) {
             return this.gridview.isViewVisible(getGridLocation(panel.element));
         }
         doAddGroup(group, location = [0], size) {
             this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
-            this._onGridEvent.fire({ kind: exports.GroupChangeKind.ADD_GROUP });
+            this._onDidAddGroup.fire(group);
             this.doSetGroupActive(group);
         }
         doRemoveGroup(group, options) {
@@ -3483,9 +3447,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const view = this.gridview.remove(group, exports.Sizing.Distribute);
             if (item && !(options === null || options === void 0 ? void 0 : options.skipDispose)) {
                 item.disposable.dispose();
+                item.value.dispose();
                 this._groups.delete(group.id);
             }
-            this._onGridEvent.fire({ kind: exports.GroupChangeKind.REMOVE_GROUP });
+            this._onDidRemoveGroup.fire(group);
             if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
                 const groups = Array.from(this._groups.values());
                 this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
@@ -3513,9 +3478,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
             this._activeGroup = group;
-            this._onGridEvent.fire({
-                kind: exports.GroupChangeKind.GROUP_ACTIVE,
-            });
+            this._onDidActiveGroupChange.fire(group);
         }
         removeGroup(group) {
             this.doRemoveGroup(group);
@@ -3571,7 +3534,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         dispose() {
             super.dispose();
-            this._onGridEvent.dispose();
+            this._onDidActiveGroupChange.dispose();
+            this._onDidAddGroup.dispose();
+            this._onDidRemoveGroup.dispose();
+            this._onDidLayoutChange.dispose();
+            for (const group of this.groups) {
+                group.dispose();
+            }
             this.gridview.dispose();
         }
     }
@@ -3583,15 +3552,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(id) {
             super();
             this.id = id;
-            this._state = {};
             this._isFocused = false;
             this._isActive = false;
             this._isVisible = true;
             this._width = 0;
             this._height = 0;
-            this._onDidStateChange = new Emitter();
-            this.onDidStateChange = this._onDidStateChange.event;
-            //
             this._onDidPanelDimensionChange = new Emitter({
                 replay: true,
             });
@@ -3620,7 +3585,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             //
             this._onActiveChange = new Emitter();
             this.onActiveChange = this._onActiveChange.event;
-            this.addDisposables(this._onDidStateChange, this._onDidPanelDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this.onDidFocusChange((event) => {
+            this.addDisposables(this._onDidPanelDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
                 this._isFocused = event.isFocused;
             }), this.onDidActiveChange((event) => {
                 this._isActive = event.isActive;
@@ -3653,21 +3618,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         setActive() {
             this._onActiveChange.fire();
         }
-        setState(key, value) {
-            if (typeof key === 'object') {
-                this._state = key;
-            }
-            else if (typeof value !== undefined) {
-                this._state[key] = value;
-            }
-            this._onDidStateChange.fire(undefined);
-        }
-        getState() {
-            return this._state;
-        }
-        getStateKey(key) {
-            return this._state[key];
-        }
         dispose() {
             super.dispose();
         }
@@ -3687,6 +3637,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             //
             this._onDidSizeChange = new Emitter();
             this.onDidSizeChange = this._onDidSizeChange.event;
+            this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
         }
         setConstraints(value) {
             this._onDidConstraintsChangeInternal.fire(value);
@@ -3700,19 +3651,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(panel, group) {
             super(panel.id);
             this.panel = panel;
-            this._onDidDirtyChange = new Emitter();
-            this.onDidDirtyChange = this._onDidDirtyChange.event;
             this._onDidTitleChange = new Emitter();
             this.onDidTitleChange = this._onDidTitleChange.event;
             this._titleChanged = new Emitter();
             this.titleChanged = this._titleChanged.event;
             this._suppressClosableChanged = new Emitter();
             this.suppressClosableChanged = this._suppressClosableChanged.event;
-            this._group = group;
-            this.addDisposables(this._onDidDirtyChange);
-        }
-        get tryClose() {
-            return this._interceptor;
+            this._onDidActiveGroupChange = new Emitter();
+            this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+            this._onDidGroupChange = new Emitter();
+            this.onDidGroupChange = this._onDidGroupChange.event;
+            this.disposable = new MutableDisposable();
+            this.group = group;
+            this.addDisposables(this.disposable, this._onDidTitleChange, this._titleChanged, this._suppressClosableChanged, this._onDidGroupChange, this._onDidActiveGroupChange);
         }
         get title() {
             return this.panel.title;
@@ -3725,7 +3676,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return !!((_a = this.group) === null || _a === void 0 ? void 0 : _a.isActive);
         }
         set group(value) {
+            const isOldGroupActive = this.isGroupActive;
             this._group = value;
+            this._onDidGroupChange.fire();
+            if (this._group) {
+                this.disposable.value = this._group.api.onDidActiveChange(() => {
+                    this._onDidActiveGroupChange.fire();
+                });
+                if (this.isGroupActive !== isOldGroupActive) {
+                    this._onDidActiveGroupChange.fire();
+                }
+            }
         }
         get group() {
             return this._group;
@@ -3739,16 +3700,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             return this.group.model.closePanel(this.panel);
         }
-        interceptOnCloseAction(interceptor) {
-            this._interceptor = interceptor;
-        }
-        dispose() {
-            super.dispose();
-        }
     }
 
     class DockviewGroupPanel extends CompositeDisposable {
-        constructor(id, containerApi) {
+        constructor(id, accessor, containerApi) {
             super();
             this.id = id;
             this.containerApi = containerApi;
@@ -3756,14 +3711,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._suppressClosable = false;
             this._title = '';
             this.api = new DockviewPanelApiImpl(this, this._group);
-            this.onDidStateChange = this.api.onDidStateChange;
             this.addDisposables(this.api.onActiveChange(() => {
-                this.containerApi.setActivePanel(this);
+                accessor.setActivePanel(this);
             }), this.api.onDidTitleChange((event) => {
                 const title = event.title;
                 this.update({ params: { title } });
             }));
         }
+        get params() {
+            var _a;
+            return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+        }
         get title() {
             return this._title;
         }
@@ -3782,32 +3740,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._view = params.view;
             this.setTitle(params.title);
             this.setSuppressClosable(params.suppressClosable || false);
-            if (params.state) {
-                this.api.setState(params.state);
-            }
             (_a = this.view) === null || _a === void 0 ? void 0 : _a.init(Object.assign(Object.assign({}, params), { api: this.api, containerApi: this.containerApi }));
         }
         focus() {
             this.api._onFocusEvent.fire();
         }
-        setDirty(isDirty) {
-            this.api._onDidDirtyChange.fire(isDirty);
-        }
-        close() {
-            if (this.api.tryClose) {
-                return this.api.tryClose();
-            }
-            return Promise.resolve(true);
-        }
         toJSON() {
-            const state = this.api.getState();
             return {
                 id: this.id,
                 view: this.view.toJSON(),
                 params: Object.keys(this._params || {}).length > 0
                     ? this._params
                     : undefined,
-                state: state && Object.keys(state).length > 0 ? state : undefined,
                 suppressClosable: this.suppressClosable || undefined,
                 title: this.title,
             };
@@ -3852,18 +3796,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             var _a;
             this._group = group;
             this.api.group = group;
-            this.mutableDisposable.value = this._group.model.onDidGroupChange((ev) => {
-                var _a;
-                if (ev.kind === exports.GroupChangeKind2.GROUP_ACTIVE) {
-                    const isVisible = !!((_a = this._group) === null || _a === void 0 ? void 0 : _a.model.isPanelActive(this));
-                    this.api._onDidActiveChange.fire({
-                        isActive: isGroupActive && isVisible,
-                    });
-                    this.api._onDidVisibilityChange.fire({
-                        isVisible,
-                    });
-                }
-            });
             const isPanelVisible = this._group.model.isPanelActive(this);
             this.api._onDidActiveChange.fire({
                 isActive: isGroupActive && isPanelVisible,
@@ -3938,7 +3870,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get id() {
             return 'watermark';
         }
-        update(event) {
+        update(_event) {
             // noop
         }
         focus() {
@@ -3947,17 +3879,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         toJSON() {
             return {};
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop
         }
         init(params) {
             this.params = params;
-            this.addDisposables(this.params.containerApi.onDidLayoutChange((event) => {
+            this.addDisposables(this.params.containerApi.onDidLayoutChange(() => {
                 this.render();
             }));
             this.render();
         }
-        updateParentGroup(group, visible) {
+        updateParentGroup(group, _visible) {
             this.group = group;
             this.render();
         }
@@ -3973,15 +3905,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    function debounce(cb, wait) {
-        let timeout;
-        const callable = (...args) => {
-            clearTimeout(timeout);
-            timeout = setTimeout(() => cb(...args), wait);
-        };
-        return callable;
-    }
-
     class DefaultDeserializer {
         constructor(layout, panelDeserializer) {
             this.layout = layout;
@@ -4082,9 +4005,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._isGroupActive = false;
             //
             this.params = {};
-            //
-            this.isDirtyDisposable = new MutableDisposable();
-            this.addDisposables(this.isDirtyDisposable);
             this._element = document.createElement('div');
             this._element.className = 'default-tab';
             //
@@ -4129,10 +4049,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         init(params) {
             this.params = params;
             this._content.textContent = params.title;
-            this.isDirtyDisposable.value = this.params.api.onDidDirtyChange((event) => {
-                const isDirty = event;
-                toggleClass(this.action, 'dirty', isDirty);
-            });
             if (!this.params.suppressClosable) {
                 addDisposableListener(this.action, 'click', (ev) => {
                     ev.preventDefault(); //
@@ -4148,7 +4064,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._isGroupActive = group.isActive;
             this.render();
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop
         }
         render() {
@@ -4186,6 +4102,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get height() {
             return this._height;
         }
+        get params() {
+            var _a;
+            return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+        }
         focus() {
             this.api._onFocusEvent.fire();
         }
@@ -4194,34 +4114,34 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._height = height;
             this.api._onDidPanelDimensionChange.fire({ width, height });
             if (this.part) {
-                if (this.params) {
-                    this.part.update(this.params.params);
+                if (this._params) {
+                    this.part.update(this._params.params);
                 }
             }
         }
         init(parameters) {
-            this.params = parameters;
+            this._params = parameters;
             this.part = this.getComponent();
         }
         update(event) {
             var _a, _b;
-            this.params = Object.assign(Object.assign({}, this.params), { params: Object.assign(Object.assign({}, (_a = this.params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
-            (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this.params.params });
+            this._params = Object.assign(Object.assign({}, this._params), { params: Object.assign(Object.assign({}, (_a = this._params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
+            (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this._params.params });
         }
         toJSON() {
             var _a, _b;
-            const state = this.api.getState();
-            const params = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {};
+            const params = (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {};
             return {
                 id: this.id,
                 component: this.component,
                 params: Object.keys(params).length > 0 ? params : undefined,
-                state: Object.keys(state).length === 0 ? undefined : state,
             };
         }
         dispose() {
+            var _a;
             super.dispose();
             this.api.dispose();
+            (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
         }
     }
 
@@ -4239,12 +4159,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._snap = false;
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
-            this.addDisposables(this.api.onVisibilityChange((event) => {
+            this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
                 const { isVisible } = event;
-                const { containerApi } = this.params;
+                const { containerApi } = this._params;
                 containerApi.setVisible(this, isVisible);
             }), this.api.onActiveChange(() => {
-                const { containerApi } = this.params;
+                const { containerApi } = this._params;
                 containerApi.setActive(this);
             }), this.api.onDidConstraintsChangeInternal((event) => {
                 if (typeof event.minimumWidth === 'number' ||
@@ -4359,9 +4279,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const minimum = (value) => (value <= 0 ? undefined : value);
             return Object.assign(Object.assign({}, state), { minimumHeight: minimum(this.minimumHeight), maximumHeight: maximum(this.maximumHeight), minimumWidth: minimum(this.minimumWidth), maximumWidth: maximum(this.maximumWidth), snap: this.snap, priority: this.priority });
         }
-        dispose() {
-            super.dispose();
-        }
     }
 
     class GroupviewPanel extends GridviewPanel {
@@ -4468,15 +4385,24 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 orientation: options.orientation || exports.Orientation.HORIZONTAL,
                 styles: options.styles,
             });
-            this._panels = new Map();
-            this.dirtyPanels = new Set();
-            this.debouncedDeque = debounce(this.syncConfigs.bind(this), 5000);
             // events
             this._onTabInteractionEvent = new Emitter();
             this.onTabInteractionEvent = this._onTabInteractionEvent.event;
             this._onTabContextMenu = new Emitter();
             this.onTabContextMenu = this._onTabContextMenu.event;
-            this.panelState = {};
+            this._onDidDrop = new Emitter();
+            this.onDidDrop = this._onDidDrop.event;
+            this._onDidRemovePanel = new Emitter();
+            this.onDidRemovePanel = this._onDidRemovePanel.event;
+            this._onDidAddPanel = new Emitter();
+            this.onDidAddPanel = this._onDidAddPanel.event;
+            this._onDidLayoutfromJSON = new Emitter();
+            this.onDidLayoutfromJSON = this._onDidLayoutfromJSON.event;
+            this._onDidActivePanelChange = new Emitter();
+            this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+            this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop, exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+                this._bufferOnDidLayoutChange.fire();
+            }));
             this._options = options;
             if (!this.options.components) {
                 this.options.components = {};
@@ -4497,10 +4423,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._api = new DockviewApi(this);
         }
         get totalPanels() {
-            return this._panels.size;
+            return this.panels.length;
         }
         get panels() {
-            return Array.from(this._panels.values()).map((_) => _.value);
+            return this.groups.flatMap((group) => group.model.panels);
         }
         get deserializer() {
             return this._deserializer;
@@ -4530,10 +4456,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         updateOptions(options) {
             const hasOrientationChanged = typeof options.orientation === 'string' &&
                 this.options.orientation !== options.orientation;
-            // TODO support style update
-            // const hasStylesChanged =
-            //     typeof options.styles === 'object' &&
-            //     this.options.styles !== options.styles;
             this._options = Object.assign(Object.assign({}, this.options), options);
             if (hasOrientationChanged) {
                 this.gridview.orientation = options.orientation;
@@ -4545,8 +4467,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
         }
         getGroupPanel(id) {
-            var _a;
-            return (_a = this._panels.get(id)) === null || _a === void 0 ? void 0 : _a.value;
+            return this.panels.find((panel) => panel.id === id);
         }
         setActivePanel(panel) {
             if (!panel.group) {
@@ -4595,24 +4516,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 this.doSetGroupActive(next);
             }
         }
-        registerPanel(panel) {
-            if (this._panels.has(panel.id)) {
-                throw new Error(`panel ${panel.id} already exists`);
-            }
-            const disposable = new CompositeDisposable(panel.onDidStateChange(() => this.addDirtyPanel(panel)));
-            this._panels.set(panel.id, { value: panel, disposable });
-        }
-        unregisterPanel(panel) {
-            if (!this._panels.has(panel.id)) {
-                throw new Error(`panel ${panel.id} doesn't exist`);
-            }
-            const item = this._panels.get(panel.id);
-            if (item) {
-                item.disposable.dispose();
-                item.value.dispose();
-            }
-            this._panels.delete(panel.id);
-        }
         /**
          * Serialize the current state of the layout
          *
@@ -4620,12 +4523,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
          */
         toJSON() {
             var _a;
-            this.syncConfigs();
             const data = this.gridview.serialize();
-            const panels = Array.from(this._panels.values()).reduce((collection, panel) => {
-                if (!this.panelState[panel.value.id]) {
-                    collection[panel.value.id] = panel.value.toJSON();
-                }
+            const panels = this.panels.reduce((collection, panel) => {
+                collection[panel.id] = panel.toJSON();
                 return collection;
             }, {});
             return {
@@ -4636,13 +4536,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             };
         }
         fromJSON(data) {
+            const groups = Array.from(this._groups.values()).map((_) => _.value);
+            for (const group of groups) {
+                // remove the group will automatically remove the panels
+                this.removeGroup(group, true);
+            }
             this.gridview.clear();
-            this._panels.forEach((panel) => {
-                panel.disposable.dispose();
-                panel.value.dispose();
-            });
-            this._panels.clear();
-            this._groups.clear();
             if (!this.deserializer) {
                 throw new Error('invalid deserializer');
             }
@@ -4656,9 +4555,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.gridview.deserialize(grid, new DefaultDeserializer(this, {
                 createPanel: (id) => {
                     const panelData = panels[id];
-                    const panel = this.deserializer.fromJSON(panelData);
-                    this.registerPanel(panel);
-                    return panel;
+                    return this.deserializer.fromJSON(panelData);
                 },
             }));
             if (typeof activeGroup === 'string') {
@@ -4668,36 +4565,31 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
             this.gridview.layout(this.width, this.height);
-            this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT_FROM_JSON });
+            this._onDidLayoutfromJSON.fire();
         }
         closeAllGroups() {
-            return __awaiter(this, void 0, void 0, function* () {
-                for (const entry of this._groups.entries()) {
-                    const [_, group] = entry;
-                    const didCloseAll = yield group.value.model.closeAllPanels();
-                    if (!didCloseAll) {
-                        return false;
-                    }
-                }
-                return true;
-            });
+            for (const entry of this._groups.entries()) {
+                const [_, group] = entry;
+                group.value.model.closeAllPanels();
+            }
         }
         fireMouseEvent(event) {
-            switch (event.kind) {
-                case exports.MouseEventKind.CONTEXT_MENU:
-                    if (event.tab && event.panel) {
-                        this._onTabContextMenu.fire({
-                            event: event.event,
-                            api: this._api,
-                            panel: event.panel,
-                        });
-                    }
-                    break;
+            if (event.kind === exports.MouseEventKind.CONTEXT_MENU) {
+                if (event.tab && event.panel) {
+                    this._onTabContextMenu.fire({
+                        event: event.event,
+                        api: this._api,
+                        panel: event.panel,
+                    });
+                }
             }
         }
         addPanel(options) {
             var _a, _b;
-            const panel = this._addPanel(options);
+            if (this.panels.find((_) => _.id === options.id)) {
+                throw new Error(`panel with id ${options.id} already exists`);
+            }
+            const panel = this.createPanel(options);
             let referenceGroup;
             if ((_a = options.position) === null || _a === void 0 ? void 0 : _a.referencePanel) {
                 const referencePanel = this.getGroupPanel(options.position.referencePanel);
@@ -4725,14 +4617,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             return panel;
         }
-        removePanel(panel) {
-            this.unregisterPanel(panel);
+        removePanel(panel, options = {
+            removeEmptyGroup: true,
+            skipDispose: false,
+        }) {
             const group = panel.group;
             if (!group) {
                 throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
             }
             group.model.removePanel(panel);
-            if (group.model.size === 0) {
+            panel.dispose();
+            const retainGroupForWatermark = this.size === 1;
+            if (!retainGroupForWatermark &&
+                group.model.size === 0 &&
+                options.removeEmptyGroup) {
                 this.removeGroup(group);
             }
         }
@@ -4745,10 +4643,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
         }
         addEmptyGroup(options) {
-            var _a;
             const group = this.createGroup();
             if (options) {
-                const referencePanel = (_a = this._panels.get(options.referencePanel)) === null || _a === void 0 ? void 0 : _a.value;
+                const referencePanel = this.panels.find((panel) => panel.id === options.referencePanel);
                 if (!referencePanel) {
                     throw new Error(`reference panel ${options.referencePanel} does not exist`);
                 }
@@ -4765,25 +4662,24 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 this.doAddGroup(group);
             }
         }
-        removeGroup(group) {
+        removeGroup(group, skipActive = false) {
             const panels = [...group.model.panels]; // reassign since group panels will mutate
-            panels.forEach((panel) => {
-                this.removePanel(panel);
-            });
-            if (this._groups.size === 1) {
-                this._activeGroup = group;
-                return;
+            for (const panel of panels) {
+                this.removePanel(panel, {
+                    removeEmptyGroup: false,
+                    skipDispose: false,
+                });
             }
-            super.removeGroup(group);
+            super.doRemoveGroup(group, { skipActive });
         }
         moveGroupOrPanel(referenceGroup, groupId, itemId, target, index) {
-            var _a, _b, _c;
+            var _a;
             const sourceGroup = groupId
                 ? (_a = this._groups.get(groupId)) === null || _a === void 0 ? void 0 : _a.value
                 : undefined;
             if (!target || target === exports.Position.Center) {
                 const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
-                    ((_b = this._panels.get(itemId)) === null || _b === void 0 ? void 0 : _b.value);
+                    this.panels.find((panel) => panel.id === itemId);
                 if (!groupItem) {
                     throw new Error(`No panel with id ${itemId}`);
                 }
@@ -4819,7 +4715,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 else {
                     const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
-                        ((_c = this._panels.get(itemId)) === null || _c === void 0 ? void 0 : _c.value);
+                        this.panels.find((panel) => panel.id === itemId);
                     if (!groupItem) {
                         throw new Error(`No panel with id ${itemId}`);
                     }
@@ -4833,10 +4729,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const isGroupAlreadyFocused = this._activeGroup === group;
             super.doSetGroupActive(group, skipFocus);
             if (!isGroupAlreadyFocused && ((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.model.activePanel)) {
-                this._onGridEvent.fire({
-                    kind: exports.GroupChangeKind.PANEL_ACTIVE,
-                    panel: (_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel,
-                });
+                this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel);
             }
         }
         createGroup(options) {
@@ -4858,35 +4751,27 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
             const view = new GroupviewPanel(this, id, options);
+            view.init({ params: {}, containerApi: null }); // required to initialized .part and allow for correct disposal of group
             if (!this._groups.has(view.id)) {
                 const disposable = new CompositeDisposable(view.model.onMove((event) => {
                     const { groupId, itemId, target, index } = event;
                     this.moveGroupOrPanel(view, groupId, itemId, target, index);
+                }), view.model.onDidDrop((event) => {
+                    this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api }));
                 }), view.model.onDidGroupChange((event) => {
                     switch (event.kind) {
                         case exports.GroupChangeKind2.ADD_PANEL:
-                            this._onGridEvent.fire({
-                                kind: exports.GroupChangeKind.ADD_PANEL,
-                                panel: event.panel,
-                            });
-                            break;
-                        case exports.GroupChangeKind2.GROUP_ACTIVE:
-                            this._onGridEvent.fire({
-                                kind: exports.GroupChangeKind.GROUP_ACTIVE,
-                                panel: event.panel,
-                            });
+                            if (event.panel) {
+                                this._onDidAddPanel.fire(event.panel);
+                            }
                             break;
                         case exports.GroupChangeKind2.REMOVE_PANEL:
-                            this._onGridEvent.fire({
-                                kind: exports.GroupChangeKind.REMOVE_PANEL,
-                                panel: event.panel,
-                            });
+                            if (event.panel) {
+                                this._onDidRemovePanel.fire(event.panel);
+                            }
                             break;
                         case exports.GroupChangeKind2.PANEL_ACTIVE:
-                            this._onGridEvent.fire({
-                                kind: exports.GroupChangeKind.PANEL_ACTIVE,
-                                panel: event.panel,
-                            });
+                            this._onDidActivePanelChange.fire(event.panel);
                             break;
                     }
                 }));
@@ -4900,44 +4785,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             return view;
         }
-        dispose() {
-            super.dispose();
-            this._onGridEvent.dispose();
-        }
-        /**
-         * Ensure the local copy of the layout state is up-to-date
-         */
-        syncConfigs() {
-            const dirtyPanels = Array.from(this.dirtyPanels);
-            if (dirtyPanels.length === 0) ;
-            this.dirtyPanels.clear();
-            const partialPanelState = dirtyPanels
-                .map((panel) => this._panels.get(panel.id))
-                .filter((_) => !!_)
-                .reduce((collection, panel) => {
-                collection[panel.value.id] = panel.value.toJSON();
-                return collection;
-            }, {});
-            this.panelState = Object.assign(Object.assign({}, this.panelState), partialPanelState);
-            dirtyPanels
-                .filter((p) => this._panels.has(p.id))
-                .forEach((panel) => {
-                panel.setDirty(false);
-            });
-        }
-        _addPanel(options) {
+        createPanel(options) {
             const view = new DefaultGroupPanelView({
                 content: this.createContentComponent(options.id, options.component),
                 tab: this.createTabComponent(options.id, options.tabComponent),
             });
-            const panel = new DockviewGroupPanel(options.id, this._api);
+            const panel = new DockviewGroupPanel(options.id, this, this._api);
             panel.init({
                 view,
                 title: options.title || options.id,
                 suppressClosable: options === null || options === void 0 ? void 0 : options.suppressClosable,
                 params: (options === null || options === void 0 ? void 0 : options.params) || {},
             });
-            this.registerPanel(panel);
             return panel;
         }
         createContentComponent(id, componentName) {
@@ -4957,10 +4816,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             var _a;
             return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
         }
-        addDirtyPanel(panel) {
-            this.dirtyPanels.add(panel);
-            panel.setDirty(true);
-            this.debouncedDeque();
+        dispose() {
+            super.dispose();
+            this._onDidActivePanelChange.dispose();
+            this._onDidAddPanel.dispose();
+            this._onDidRemovePanel.dispose();
+            this._onDidLayoutfromJSON.dispose();
         }
     }
 
@@ -4971,6 +4832,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 orientation: options.orientation,
                 styles: options.styles,
             });
+            this._onDidLayoutfromJSON = new Emitter();
+            this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
             this._options = options;
             if (!this.options.components) {
                 this.options.components = {};
@@ -5023,7 +4886,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.gridview.setViewVisible(getGridLocation(panel.element), visible);
         }
         setActive(panel) {
-            this._groups.forEach((value, key) => {
+            this._groups.forEach((value, _key) => {
                 value.value.setActive(panel === value.value);
             });
         }
@@ -5036,8 +4899,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         fromJSON(serializedGridview, deferComponentLayout) {
             const { grid, activePanel } = serializedGridview;
+            const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
+            for (const group of groups) {
+                group.disposable.dispose();
+                this.doRemoveGroup(group.value, { skipActive: true });
+            }
             this.gridview.clear();
-            this._groups.clear();
             const queue = [];
             this.gridview.deserialize(grid, {
                 fromJSON: (node) => {
@@ -5078,7 +4945,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     this.doSetGroupActive(panel);
                 }
             }
-            this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT_FROM_JSON });
+            this._onDidLayoutfromJSON.fire();
         }
         movePanel(panel, options) {
             var _a;
@@ -5134,7 +5001,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             this.registerPanel(view);
             this.doAddGroup(view, relativeLocation, options.size);
-            return { api: view.api };
         }
         registerPanel(panel) {
             const disposable = new CompositeDisposable(panel.api.onDidFocusChange((event) => {
@@ -5185,14 +5051,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         removeGroup(group) {
             super.removeGroup(group);
-            const panel = this._groups.get(group.id);
-            if (panel) {
-                panel.disposable.dispose();
-                this._groups.delete(group.id);
-            }
         }
         dispose() {
             super.dispose();
+            this._onDidLayoutfromJSON.dispose();
         }
     }
 
@@ -5219,7 +5081,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 options.frameworkComponents = {};
             }
             this.splitview = new Splitview(this.element, options);
-            this.addDisposables(this._disposable);
+            this.addDisposables(this._disposable, this._onDidAddView, this._onDidRemoveView, this._onDidLayoutChange);
         }
         get options() {
             return this._options;
@@ -5295,7 +5157,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         removePanel(panel, sizing) {
             const disposable = this.panels.get(panel.id);
-            disposable === null || disposable === void 0 ? void 0 : disposable.dispose();
+            if (!disposable) {
+                throw new Error(`unknown splitview panel ${panel.id}`);
+            }
+            disposable.disposable.dispose();
+            disposable.value.dispose();
             this.panels.delete(panel.id);
             const index = this.getPanels().findIndex((_) => _ === panel);
             this.splitview.removeView(index, sizing);
@@ -5354,7 +5220,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 this.setActive(view, true);
             });
-            this.panels.set(view.id, disposable);
+            this.panels.set(view.id, { disposable, value: view });
         }
         toJSON() {
             var _a;
@@ -5378,6 +5244,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         fromJSON(serializedSplitview, deferComponentLayout = false) {
             const { views, orientation, size, activeView } = serializedSplitview;
+            for (const [_, value] of this.panels.entries()) {
+                value.disposable.dispose();
+                value.value.dispose();
+            }
+            this.panels.clear();
             this.splitview.dispose();
             const queue = [];
             this.splitview = new Splitview(this.element, {
@@ -5433,49 +5304,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         dispose() {
-            Array.from(this.panels.values()).forEach((value) => {
-                value.dispose();
-            });
+            for (const [_, value] of this.panels.entries()) {
+                value.disposable.dispose();
+                value.value.dispose();
+            }
             this.panels.clear();
+            this.splitview.dispose();
             super.dispose();
         }
     }
 
-    class DragHandler extends CompositeDisposable {
-        constructor(el) {
-            super();
-            this.el = el;
-            this.iframes = [];
-            this._onDragStart = new Emitter();
-            this.onDragStart = this._onDragStart.event;
-            this.configure();
-        }
-        configure() {
-            this.addDisposables(addDisposableListener(this.el, 'dragstart', (event) => {
-                var _a;
-                this.iframes = [
-                    ...getElementsByTagName('iframe'),
-                    ...getElementsByTagName('webview'),
-                ];
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'none';
-                }
-                this.el.classList.add('dragged');
-                setTimeout(() => this.el.classList.remove('dragged'), 0);
-                (_a = this.disposable) === null || _a === void 0 ? void 0 : _a.dispose();
-                this.disposable = this.getData();
-            }), addDisposableListener(this.el, 'dragend', (ev) => {
-                var _a;
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'auto';
-                }
-                this.iframes = [];
-                (_a = this.disposable) === null || _a === void 0 ? void 0 : _a.dispose();
-                this.disposable = undefined;
-            }));
-        }
-    }
-
     class SplitviewPanelApiImpl extends PanelApiImpl {
         //
         constructor(id) {
@@ -5490,6 +5328,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             //
             this._onDidSizeChange = new Emitter();
             this.onDidSizeChange = this._onDidSizeChange.event;
+            this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
         }
         setConstraints(value) {
             this._onDidConstraintsChangeInternal.fire(value);
@@ -5497,11 +5336,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         setSize(event) {
             this._onDidSizeChange.fire(event);
         }
-        dispose() {
-            super.dispose();
-            this._onDidConstraintsChange.dispose();
-            this._onDidSizeChange.dispose();
-        }
     }
 
     class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
@@ -5515,6 +5349,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onMouseEnter = this._onMouseEnter.event;
             this._onMouseLeave = new Emitter({});
             this.onMouseLeave = this._onMouseLeave.event;
+            this.addDisposables(this._onDidExpansionChange, this._onMouseEnter, this._onMouseLeave);
         }
         set pane(pane) {
             this._pane = pane;
@@ -5683,7 +5518,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         toJSON() {
-            const params = this.params;
+            const params = this._params;
             return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
         }
         renderOnce() {
@@ -5743,7 +5578,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             })(this.header);
             this.target = new Droptarget(this.element, {
                 validOverlays: 'vertical',
-                canDisplayOverlay: (event) => {
+                canDisplayOverlay: () => {
                     const data = getPaneData();
                     if (!data) {
                         return true;
@@ -5752,36 +5587,39 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 },
             });
             this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
-                const data = getPaneData();
-                if (!data) {
-                    this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
-                    return;
-                }
-                const containerApi = this.params
-                    .containerApi;
-                const panelId = data.paneId;
-                const existingPanel = containerApi.getPanel(panelId);
-                if (!existingPanel) {
-                    this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
-                    return;
-                }
-                const allPanels = containerApi.getPanels();
-                const fromIndex = allPanels.indexOf(existingPanel);
-                let toIndex = containerApi.getPanels().indexOf(this);
-                if (event.position === exports.Position.Left ||
-                    event.position === exports.Position.Top) {
-                    toIndex = Math.max(0, toIndex - 1);
-                }
-                if (event.position === exports.Position.Right ||
-                    event.position === exports.Position.Bottom) {
-                    if (fromIndex > toIndex) {
-                        toIndex++;
-                    }
-                    toIndex = Math.min(allPanels.length - 1, toIndex);
-                }
-                containerApi.movePanel(fromIndex, toIndex);
+                this.onDrop(event);
             }));
         }
+        onDrop(event) {
+            const data = getPaneData();
+            if (!data) {
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+                return;
+            }
+            const containerApi = this._params
+                .containerApi;
+            const panelId = data.paneId;
+            const existingPanel = containerApi.getPanel(panelId);
+            if (!existingPanel) {
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+                return;
+            }
+            const allPanels = containerApi.getPanels();
+            const fromIndex = allPanels.indexOf(existingPanel);
+            let toIndex = containerApi.getPanels().indexOf(this);
+            if (event.position === exports.Position.Left ||
+                event.position === exports.Position.Top) {
+                toIndex = Math.max(0, toIndex - 1);
+            }
+            if (event.position === exports.Position.Right ||
+                event.position === exports.Position.Bottom) {
+                if (fromIndex > toIndex) {
+                    toIndex++;
+                }
+                toIndex = Math.min(allPanels.length - 1, toIndex);
+            }
+            containerApi.movePanel(fromIndex, toIndex);
+        }
     }
 
     class DefaultHeader extends CompositeDisposable {
@@ -5811,7 +5649,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 this._expander.textContent = e.isExpanded ? '<' : '>';
             });
         }
-        update(params) {
+        update(_params) {
             //
         }
         dispose() {
@@ -5837,6 +5675,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             super();
             this.element = element;
             this._disposable = new MutableDisposable();
+            this._viewDisposables = new Map();
             this._onDidLayoutChange = new Emitter();
             this.onDidLayoutChange = this._onDidLayoutChange.event;
             this._onDidDrop = new Emitter();
@@ -5845,6 +5684,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidAddView = this._onDidAddView.event;
             this._onDidRemoveView = new Emitter();
             this.onDidRemoveView = this._onDidRemoveView.event;
+            this.addDisposables(this._onDidLayoutChange, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
             this._options = options;
             if (!options.components) {
                 options.components = {};
@@ -5920,9 +5760,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 isExpanded: !!options.isExpanded,
                 disableDnd: !!this.options.disableDnd,
             });
-            const disposable = new CompositeDisposable(view.onDidDrop((event) => {
-                this._onDidDrop.fire(event);
-            }));
+            this.doAddPanel(view);
             const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
             const index = typeof options.index === 'number' ? options.index : undefined;
             view.init({
@@ -5935,7 +5773,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             this.paneview.addPane(view, size, index);
             view.orientation = this.paneview.orientation;
-            return disposable;
+            return view;
         }
         getPanels() {
             return this.paneview.getPanes();
@@ -5944,6 +5782,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const views = this.getPanels();
             const index = views.findIndex((_) => _ === panel);
             this.paneview.removePane(index);
+            this.doRemovePanel(panel);
         }
         movePanel(from, to) {
             this.paneview.moveView(from, to);
@@ -5993,6 +5832,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         fromJSON(serializedPaneview, deferComponentLayout) {
             const { views, size } = serializedPaneview;
             const queue = [];
+            for (const [_, value] of this._viewDisposables.entries()) {
+                value.dispose();
+            }
+            this._viewDisposables.clear();
             this.paneview.dispose();
             this.paneview = new Paneview(this.element, {
                 orientation: exports.Orientation.VERTICAL,
@@ -6028,9 +5871,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             isExpanded: !!view.expanded,
                             disableDnd: !!this.options.disableDnd,
                         });
-                        panel.onDidDrop((event) => {
-                            this._onDidDrop.fire(event);
-                        });
+                        this.doAddPanel(panel);
                         queue.push(() => {
                             panel.init({
                                 params: data.params || {},
@@ -6060,6 +5901,27 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 queue.forEach((f) => f());
             }
         }
+        doAddPanel(panel) {
+            const disposable = panel.onDidDrop((event) => {
+                this._onDidDrop.fire(event);
+            });
+            this._viewDisposables.set(panel.id, disposable);
+        }
+        doRemovePanel(panel) {
+            const disposable = this._viewDisposables.get(panel.id);
+            if (disposable) {
+                disposable.dispose();
+                this._viewDisposables.delete(panel.id);
+            }
+        }
+        dispose() {
+            super.dispose();
+            for (const [_, value] of this._viewDisposables.entries()) {
+                value.dispose();
+            }
+            this._viewDisposables.clear();
+            this.paneview.dispose();
+        }
     }
 
     class SplitviewPanel extends BasePanelView {
@@ -6072,12 +5934,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._snap = false;
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
-            this.addDisposables(this.api.onVisibilityChange((event) => {
+            this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
                 const { isVisible } = event;
-                const { containerApi } = this.params;
+                const { containerApi } = this
+                    ._params;
                 containerApi.setVisible(this, isVisible);
             }), this.api.onActiveChange(() => {
-                const { containerApi } = this.params;
+                const { containerApi } = this
+                    ._params;
                 containerApi.setActive(this);
             }), this.api.onDidConstraintsChangeInternal((event) => {
                 if (typeof event.minimumSize === 'number' ||
@@ -6220,14 +6084,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (this.disposed) {
                 throw new Error('invalid operation: resource is already disposed');
             }
-            // TODO use a better check for isReactFunctionalComponent
             if (typeof this.component !== 'function') {
                 /**
                  * we know this isn't a React.FunctionComponent so throw an error here.
                  * if we do not intercept this the React library will throw a very obsure error
                  * for the same reason, at least at this point we will emit a sensible stacktrace.
                  */
-                throw new Error('invalid operation: only functional components are supported');
+                throw new Error('Invalid Operation. dockview only supports React Functional Components.');
             }
             const bridgeComponent = React__namespace.createElement(React__namespace.forwardRef(ReactComponentBridge), {
                 component: this
@@ -6285,22 +6148,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.id = id;
             this.component = component;
             this.reactPortalStore = reactPortalStore;
-            // private hostedContainer: HostedContainer;
             this._onDidFocus = new Emitter();
             this.onDidFocus = this._onDidFocus.event;
             this._onDidBlur = new Emitter();
             this.onDidBlur = this._onDidBlur.event;
             this._element = document.createElement('div');
-            this._element.style.height = '100%';
-            this._element.style.width = '100%';
-            // this.hostedContainer = new HostedContainer({
-            //     id,
-            // });
-            // this.hostedContainer.onDidFocus(() => this._onDidFocus.fire());
-            // this.hostedContainer.onDidBlur(() => this._onDidBlur.fire());
+            this._element.className = 'dockview-react-part';
             this._actionsElement = document.createElement('div');
-            this._actionsElement.style.height = '100%';
-            this._actionsElement.style.width = '100%';
+            this._actionsElement.className = 'dockview-react-part';
         }
         get element() {
             return this._element;
@@ -6333,23 +6188,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             var _a;
             (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
         }
-        updateParentGroup(group, isPanelVisible) {
+        updateParentGroup(group, _isPanelVisible) {
             this._group = group;
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop
-            // this.hostedContainer.layout(
-            //     this.element
-            //     // { width, height }
-            // );
         }
         close() {
             return Promise.resolve(true);
         }
         dispose() {
             var _a, _b;
+            this._onDidFocus.dispose();
+            this._onDidBlur.dispose();
             (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-            // this.hostedContainer?.dispose();
             (_b = this.actionsPart) === null || _b === void 0 ? void 0 : _b.dispose();
         }
     }
@@ -6360,6 +6212,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.component = component;
             this.reactPortalStore = reactPortalStore;
             this._element = document.createElement('div');
+            this._element.className = 'dockview-react-part';
         }
         get element() {
             return this._element;
@@ -6383,10 +6236,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 id: this.id,
             };
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop - retrieval from api
         }
-        updateParentGroup(group, isPanelVisible) {
+        updateParentGroup(_group, _isPanelVisible) {
             // noop - retrieval from api
         }
         dispose() {
@@ -6404,7 +6257,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const panelId = panelData.id;
             const params = panelData.params;
             const title = panelData.title;
-            const state = panelData.state;
             const suppressClosable = panelData.suppressClosable;
             const viewData = panelData.view;
             const view = new DefaultGroupPanelView({
@@ -6413,13 +6265,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     ? createComponent(viewData.tab.id, viewData.tab.id, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_c = this.layout.options.frameworkComponentFactory) === null || _c === void 0 ? void 0 : _c.tab)
                     : new DefaultTab(),
             });
-            const panel = new DockviewGroupPanel(panelId, new DockviewApi(this.layout));
+            const panel = new DockviewGroupPanel(panelId, this.layout, new DockviewApi(this.layout));
             panel.init({
                 view,
                 title,
                 suppressClosable,
                 params: params || {},
-                state: state || {},
             });
             return panel;
         }
@@ -6434,8 +6285,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 value: undefined,
             };
             this._element = document.createElement('div');
-            this._element.style.height = '100%';
-            this._element.style.width = '100%';
+            this._element.className = 'dockview-react-part';
         }
         get element() {
             return this._element;
@@ -6468,10 +6318,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 id: this.id,
             };
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop - retrieval from api
         }
-        updateParentGroup(group, isPanelVisible) {
+        updateParentGroup(group, _isPanelVisible) {
             // noop - retrieval from api
             this._groupRef.value = group;
         }
@@ -6505,21 +6355,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             var _a;
             const factory = {
                 content: {
-                    createComponent: (id, componentId, component) => {
+                    createComponent: (_id, componentId, component) => {
                         return new ReactPanelContentPart(componentId, component, {
                             addPortal,
                         });
                     },
                 },
                 tab: {
-                    createComponent: (id, componentId, component) => {
+                    createComponent: (_id, componentId, component) => {
                         return new ReactPanelHeaderPart(componentId, component, {
                             addPortal,
                         });
                     },
                 },
                 watermark: {
-                    createComponent: (id, componentId, component) => {
+                    createComponent: (_id, componentId, component) => {
                         return new ReactWatermarkPart(componentId, component, {
                             addPortal,
                         });
@@ -6533,7 +6383,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 frameworkTabComponents: props.tabComponents,
                 tabHeight: props.tabHeight,
                 debug: props.debug,
-                enableExternalDragEvents: props.enableExternalDragEvents,
                 watermarkFrameworkComponent: props.watermarkComponent,
                 styles: props.hideBorders
                     ? { separatorBorder: 'transparent' }
@@ -6549,8 +6398,24 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             dockviewRef.current = dockview;
             return () => {
                 dockview.dispose();
+                element.remove();
             };
         }, []);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return () => {
+                    // noop
+                };
+            }
+            const disposable = dockviewRef.current.onDidDrop((event) => {
+                if (props.onDidDrop) {
+                    props.onDidDrop(event);
+                }
+            });
+            return () => {
+                disposable.dispose();
+            };
+        }, [props.onDidDrop]);
         React__namespace.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
@@ -6559,6 +6424,22 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 frameworkComponents: props.components,
             });
         }, [props.components]);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                watermarkFrameworkComponent: props.watermarkComponent,
+            });
+        }, [props.watermarkComponent]);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                showDndOverlay: props.showDndOverlay,
+            });
+        }, [props.showDndOverlay]);
         React__namespace.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
@@ -6647,9 +6528,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         getComponent() {
             var _a;
             return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-                params: ((_a = this.params) === null || _a === void 0 ? void 0 : _a.params) || {},
+                params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
                 api: this.api,
-                containerApi: this.params
+                containerApi: this._params
                     .containerApi,
             });
         }
@@ -6686,7 +6567,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         });
                     },
                 },
-                proportionalLayout: props.proportionalLayout,
+                proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                    ? props.proportionalLayout
+                    : true,
                 styles: props.hideBorders
                     ? { separatorBorder: 'transparent' }
                     : undefined,
@@ -6722,9 +6605,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         getComponent() {
             var _a;
             return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-                params: ((_a = this.params) === null || _a === void 0 ? void 0 : _a.params) || {},
+                params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
                 api: this.api,
-                containerApi: this.params
+                containerApi: this._params
                     .containerApi,
             });
         }
@@ -6754,7 +6637,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             var _a;
             const element = document.createElement('div');
             const gridview = new GridviewComponent(element, {
-                proportionalLayout: !!props.proportionalLayout,
+                proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                    ? props.proportionalLayout
+                    : true,
                 orientation: props.orientation,
                 frameworkComponents: props.components,
                 frameworkComponentFactory: {
@@ -6777,6 +6662,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             gridviewRef.current = gridview;
             return () => {
                 gridview.dispose();
+                element.remove();
             };
         }, []);
         React__namespace.useEffect(() => {
@@ -6847,7 +6733,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             };
         }, [props.disableAutoResizing]);
         React__namespace.useEffect(() => {
-            const createComponent = (id, componentId, component) => new PanePanelSection(id, component, {
+            const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
                 addPortal,
             });
             const paneview = new PaneviewComponent(domRef.current, {
@@ -6913,14 +6799,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     PaneviewReact.displayName = 'PaneviewComponent';
 
     exports.BaseGrid = BaseGrid;
-    exports.CompositeDisposable = CompositeDisposable;
     exports.ContentContainer = ContentContainer;
-    exports.DATA_KEY = DATA_KEY;
     exports.DockviewApi = DockviewApi;
     exports.DockviewComponent = DockviewComponent;
     exports.DockviewComponents = DockviewComponents;
     exports.DockviewReact = DockviewReact;
-    exports.Emitter = Emitter;
     exports.Gridview = Gridview;
     exports.GridviewApi = GridviewApi;
     exports.GridviewComponent = GridviewComponent;
@@ -6928,7 +6811,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.GridviewReact = GridviewReact;
     exports.Groupview = Groupview;
     exports.LocalSelectionTransfer = LocalSelectionTransfer;
-    exports.MutableDisposable = MutableDisposable;
     exports.PaneFramework = PaneFramework;
     exports.PaneTransfer = PaneTransfer;
     exports.PanelTransfer = PanelTransfer;
@@ -6947,10 +6829,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.SplitviewPanel = SplitviewPanel;
     exports.SplitviewReact = SplitviewReact;
     exports.Tab = Tab$1;
-    exports.TickDelayedEvent = TickDelayedEvent;
-    exports.addDisposableListener = addDisposableListener;
-    exports.addDisposableWindowListener = addDisposableWindowListener;
-    exports.extractData = extractData;
     exports.getDirectionOrientation = getDirectionOrientation;
     exports.getGridLocation = getGridLocation;
     exports.getLocationOrientation = getLocationOrientation;
@@ -6958,11 +6836,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.getPanelData = getPanelData;
     exports.getRelativeLocation = getRelativeLocation;
     exports.indexInParent = indexInParent;
-    exports.isCustomDragEvent = isCustomDragEvent;
     exports.isGridBranchNode = isGridBranchNode;
-    exports.isPanelTransferEvent = isPanelTransferEvent;
     exports.isReactElement = isReactElement;
-    exports.isTabDragEvent = isTabDragEvent;
     exports.orthogonal = orthogonal;
     exports.toTarget = toTarget;
     exports.usePortalsLifecycle = usePortalsLifecycle;