dockview 1.5.2 → 1.6.0

package/dist/dockview.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.5.2
+ * @version 1.6.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -10,8 +10,7 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.dockview = {}, global.React, global.ReactDOM));
 })(this, (function (exports, React, ReactDOM) { 'use strict';
 
-    function _interopNamespace(e) {
-        if (e && e.__esModule) return e;
+    function _interopNamespaceDefault(e) {
         var n = Object.create(null);
         if (e) {
             Object.keys(e).forEach(function (k) {
@@ -24,12 +23,12 @@
                 }
             });
         }
-        n["default"] = e;
+        n.default = e;
         return Object.freeze(n);
     }
 
-    var React__namespace = /*#__PURE__*/_interopNamespace(React);
-    var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+    var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+    var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
 
     class TransferObject {
         constructor() {
@@ -199,12 +198,12 @@
         };
     })(Disposable || (Disposable = {}));
     class CompositeDisposable {
-        constructor(...args) {
-            this.disposables = args;
-        }
         static from(...args) {
             return new CompositeDisposable(...args);
         }
+        constructor(...args) {
+            this.disposables = args;
+        }
         addDisposables(...args) {
             args.forEach((arg) => this.disposables.push(arg));
         }
@@ -422,21 +421,6 @@
     }
 
     class ViewItem {
-        constructor(container, view, size, disposable) {
-            this.container = container;
-            this.view = view;
-            this.disposable = disposable;
-            this._cachedVisibleSize = undefined;
-            if (typeof size === 'number') {
-                this._size = size;
-                this._cachedVisibleSize = undefined;
-                container.classList.add('visible');
-            }
-            else {
-                this._size = 0;
-                this._cachedVisibleSize = size.cachedVisibleSize;
-            }
-        }
         set size(size) {
             this._size = size;
         }
@@ -489,6 +473,21 @@
         set enabled(enabled) {
             this.container.style.pointerEvents = enabled ? '' : 'none';
         }
+        constructor(container, view, size, disposable) {
+            this.container = container;
+            this.view = view;
+            this.disposable = disposable;
+            this._cachedVisibleSize = undefined;
+            if (typeof size === 'number') {
+                this._size = size;
+                this._cachedVisibleSize = undefined;
+                container.classList.add('visible');
+            }
+            else {
+                this._size = 0;
+                this._cachedVisibleSize = size.cachedVisibleSize;
+            }
+        }
         // layout(offset: number, layoutContext: TLayoutContext | undefined): void {
         //     this.layoutContainer(offset);
         //     this.view.layout(this.size, offset, layoutContext);
@@ -535,6 +534,65 @@
         Sizing.Invisible = Invisible;
     })(exports.Sizing || (exports.Sizing = {}));
     class Splitview {
+        get size() {
+            return this._size;
+        }
+        set size(value) {
+            this._size = value;
+        }
+        get orthogonalSize() {
+            return this._orthogonalSize;
+        }
+        set orthogonalSize(value) {
+            this._orthogonalSize = value;
+        }
+        get length() {
+            return this.views.length;
+        }
+        get proportions() {
+            return this._proportions ? [...this._proportions] : undefined;
+        }
+        get orientation() {
+            return this._orientation;
+        }
+        set orientation(value) {
+            this._orientation = value;
+            const tmp = this.size;
+            this.size = this.orthogonalSize;
+            this.orthogonalSize = tmp;
+            removeClasses(this.element, 'horizontal', 'vertical');
+            this.element.classList.add(this.orientation == exports.Orientation.HORIZONTAL
+                ? 'horizontal'
+                : 'vertical');
+        }
+        get minimumSize() {
+            return this.views.reduce((r, item) => r + item.minimumSize, 0);
+        }
+        get maximumSize() {
+            return this.length === 0
+                ? Number.POSITIVE_INFINITY
+                : this.views.reduce((r, item) => r + item.maximumSize, 0);
+        }
+        get startSnappingEnabled() {
+            return this._startSnappingEnabled;
+        }
+        set startSnappingEnabled(startSnappingEnabled) {
+            if (this._startSnappingEnabled === startSnappingEnabled) {
+                return;
+            }
+            this._startSnappingEnabled = startSnappingEnabled;
+            this.updateSashEnablement();
+        }
+        get endSnappingEnabled() {
+            return this._endSnappingEnabled;
+        }
+        set endSnappingEnabled(endSnappingEnabled) {
+            if (this._endSnappingEnabled === endSnappingEnabled) {
+                return;
+            }
+            this._endSnappingEnabled = endSnappingEnabled;
+            this.updateSashEnablement();
+        }
         constructor(container, options) {
             this.container = container;
             this.views = [];
@@ -664,65 +722,6 @@
                 this.saveProportions();
             }
         }
-        get size() {
-            return this._size;
-        }
-        set size(value) {
-            this._size = value;
-        }
-        get orthogonalSize() {
-            return this._orthogonalSize;
-        }
-        set orthogonalSize(value) {
-            this._orthogonalSize = value;
-        }
-        get length() {
-            return this.views.length;
-        }
-        get proportions() {
-            return this._proportions ? [...this._proportions] : undefined;
-        }
-        get orientation() {
-            return this._orientation;
-        }
-        set orientation(value) {
-            this._orientation = value;
-            const tmp = this.size;
-            this.size = this.orthogonalSize;
-            this.orthogonalSize = tmp;
-            removeClasses(this.element, 'horizontal', 'vertical');
-            this.element.classList.add(this.orientation == exports.Orientation.HORIZONTAL
-                ? 'horizontal'
-                : 'vertical');
-        }
-        get minimumSize() {
-            return this.views.reduce((r, item) => r + item.minimumSize, 0);
-        }
-        get maximumSize() {
-            return this.length === 0
-                ? Number.POSITIVE_INFINITY
-                : this.views.reduce((r, item) => r + item.maximumSize, 0);
-        }
-        get startSnappingEnabled() {
-            return this._startSnappingEnabled;
-        }
-        set startSnappingEnabled(startSnappingEnabled) {
-            if (this._startSnappingEnabled === startSnappingEnabled) {
-                return;
-            }
-            this._startSnappingEnabled = startSnappingEnabled;
-            this.updateSashEnablement();
-        }
-        get endSnappingEnabled() {
-            return this._endSnappingEnabled;
-        }
-        set endSnappingEnabled(endSnappingEnabled) {
-            if (this._endSnappingEnabled === endSnappingEnabled) {
-                return;
-            }
-            this._endSnappingEnabled = endSnappingEnabled;
-            this.updateSashEnablement();
-        }
         style(styles) {
             if ((styles === null || styles === void 0 ? void 0 : styles.separatorBorder) === 'transparent') {
                 removeClasses(this.element, 'separator-border');
@@ -1186,6 +1185,27 @@
     }
 
     class Paneview extends CompositeDisposable {
+        get onDidAddView() {
+            return this.splitview.onDidAddView;
+        }
+        get onDidRemoveView() {
+            return this.splitview.onDidRemoveView;
+        }
+        get minimumSize() {
+            return this.splitview.minimumSize;
+        }
+        get maximumSize() {
+            return this.splitview.maximumSize;
+        }
+        get orientation() {
+            return this.splitview.orientation;
+        }
+        get size() {
+            return this.splitview.size;
+        }
+        get orthogonalSize() {
+            return this.splitview.orthogonalSize;
+        }
         constructor(container, options) {
             var _a;
             super();
@@ -1228,27 +1248,6 @@
                 this._onDidChange.fire();
             }));
         }
-        get onDidAddView() {
-            return this.splitview.onDidAddView;
-        }
-        get onDidRemoveView() {
-            return this.splitview.onDidRemoveView;
-        }
-        get minimumSize() {
-            return this.splitview.minimumSize;
-        }
-        get maximumSize() {
-            return this.splitview.maximumSize;
-        }
-        get orientation() {
-            return this.splitview.orientation;
-        }
-        get size() {
-            return this.splitview.size;
-        }
-        get orthogonalSize() {
-            return this.splitview.orthogonalSize;
-        }
         addPane(pane, size, index = this.splitview.length, skipLayout = false) {
             const disposable = pane.onDidChangeExpansionState(() => {
                 this.setupAnimation();
@@ -1327,243 +1326,16 @@
         }
     }
 
-    class DragAndDropObserver extends CompositeDisposable {
-        constructor(element, callbacks) {
-            super();
-            this.element = element;
-            this.callbacks = callbacks;
-            // A helper to fix issues with repeated DRAG_ENTER / DRAG_LEAVE
-            // calls see https://github.com/microsoft/vscode/issues/14470
-            // when the element has child elements where the events are fired
-            // repeadedly.
-            this.counter = 0;
-            this.registerListeners();
+    /*---------------------------------------------------------------------------------------------
+     * 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
+     *--------------------------------------------------------------------------------------------*/
+    class LeafNode {
+        get minimumWidth() {
+            return this.view.minimumWidth;
         }
-        registerListeners() {
-            this.addDisposables(addDisposableListener(this.element, 'dragenter', (e) => {
-                this.counter++;
-                this.callbacks.onDragEnter(e);
-            }));
-            this.addDisposables(addDisposableListener(this.element, 'dragover', (e) => {
-                e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
-                if (this.callbacks.onDragOver) {
-                    this.callbacks.onDragOver(e);
-                }
-            }));
-            this.addDisposables(addDisposableListener(this.element, 'dragleave', (e) => {
-                this.counter--;
-                if (this.counter === 0) {
-                    this.callbacks.onDragLeave(e);
-                }
-            }));
-            this.addDisposables(addDisposableListener(this.element, 'dragend', (e) => {
-                this.counter = 0;
-                this.callbacks.onDragEnd(e);
-            }));
-            this.addDisposables(addDisposableListener(this.element, 'drop', (e) => {
-                this.counter = 0;
-                this.callbacks.onDrop(e);
-            }));
-        }
-    }
-
-    exports.Position = void 0;
-    (function (Position) {
-        Position["Top"] = "Top";
-        Position["Left"] = "Left";
-        Position["Bottom"] = "Bottom";
-        Position["Right"] = "Right";
-        Position["Center"] = "Center";
-    })(exports.Position || (exports.Position = {}));
-    function isBooleanValue(canDisplayOverlay) {
-        return typeof canDisplayOverlay === 'boolean';
-    }
-    class Droptarget extends CompositeDisposable {
-        constructor(element, options) {
-            super();
-            this.element = element;
-            this.options = options;
-            this._onDrop = new Emitter();
-            this.onDrop = this._onDrop.event;
-            this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
-                onDragEnter: () => undefined,
-                onDragOver: (e) => {
-                    const width = this.element.clientWidth;
-                    const height = this.element.clientHeight;
-                    if (width === 0 || height === 0) {
-                        return; // avoid div!0
-                    }
-                    const x = e.offsetX;
-                    const y = e.offsetY;
-                    const xp = (100 * x) / width;
-                    const yp = (100 * y) / height;
-                    const quadrant = this.calculateQuadrant(this.options.validOverlays, xp, yp);
-                    if (isBooleanValue(this.options.canDisplayOverlay)) {
-                        if (!this.options.canDisplayOverlay) {
-                            return;
-                        }
-                    }
-                    else if (!this.options.canDisplayOverlay(e, quadrant)) {
-                        return;
-                    }
-                    if (!this.target) {
-                        this.target = document.createElement('div');
-                        this.target.className = 'drop-target-dropzone';
-                        this.overlay = document.createElement('div');
-                        this.overlay.className = 'drop-target-selection';
-                        this._state = exports.Position.Center;
-                        this.target.appendChild(this.overlay);
-                        this.element.classList.add('drop-target');
-                        this.element.append(this.target);
-                    }
-                    if (this.options.validOverlays === 'none') {
-                        return;
-                    }
-                    if (!this.target || !this.overlay) {
-                        return;
-                    }
-                    const isSmallX = width < 100;
-                    const isSmallY = height < 100;
-                    this.toggleClasses(quadrant, isSmallX, isSmallY);
-                    this.setState(quadrant);
-                },
-                onDragLeave: () => {
-                    this.removeDropTarget();
-                },
-                onDragEnd: () => {
-                    this.removeDropTarget();
-                },
-                onDrop: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    const state = this._state;
-                    this.removeDropTarget();
-                    if (state) {
-                        this._onDrop.fire({ position: state, nativeEvent: e });
-                    }
-                },
-            }));
-        }
-        get state() {
-            return this._state;
-        }
-        set validOverlays(value) {
-            this.options.validOverlays = value;
-        }
-        set canDisplayOverlay(value) {
-            this.options.canDisplayOverlay = value;
-        }
-        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;
-                this.element.removeChild(this.target);
-                this.target = undefined;
-                this.element.classList.remove('drop-target');
-            }
-        }
-    }
-
-    /*---------------------------------------------------------------------------------------------
-     * 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
-     *--------------------------------------------------------------------------------------------*/
-    class LeafNode {
-        constructor(view, orientation, orthogonalSize, size = 0) {
-            this.view = view;
-            this.orientation = orientation;
-            this._onDidChange = new Emitter();
-            this.onDidChange = this._onDidChange.event;
-            this._orthogonalSize = orthogonalSize;
-            this._size = size;
-            this._disposable = this.view.onDidChange((event) => {
-                if (event) {
-                    this._onDidChange.fire({
-                        size: this.orientation === exports.Orientation.VERTICAL
-                            ? event.width
-                            : event.height,
-                        orthogonalSize: this.orientation === exports.Orientation.VERTICAL
-                            ? event.height
-                            : event.width,
-                    });
-                }
-                else {
-                    this._onDidChange.fire({});
-                }
-            });
-        }
-        get minimumWidth() {
-            return this.view.minimumWidth;
-        }
-        get maximumWidth() {
-            return this.view.maximumWidth;
+        get maximumWidth() {
+            return this.view.maximumWidth;
         }
         get minimumHeight() {
             return this.view.minimumHeight;
@@ -1616,6 +1388,29 @@
                 ? this.size
                 : this.orthogonalSize;
         }
+        constructor(view, orientation, orthogonalSize, size = 0) {
+            this.view = view;
+            this.orientation = orientation;
+            this._onDidChange = new Emitter();
+            this.onDidChange = this._onDidChange.event;
+            this._orthogonalSize = orthogonalSize;
+            this._size = size;
+            this._disposable = this.view.onDidChange((event) => {
+                if (event) {
+                    this._onDidChange.fire({
+                        size: this.orientation === exports.Orientation.VERTICAL
+                            ? event.width
+                            : event.height,
+                        orthogonalSize: this.orientation === exports.Orientation.VERTICAL
+                            ? event.height
+                            : event.width,
+                    });
+                }
+                else {
+                    this._onDidChange.fire({});
+                }
+            });
+        }
         setVisible(visible) {
             if (this.view.setVisible) {
                 this.view.setVisible(visible);
@@ -1638,53 +1433,6 @@
      * https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid
      *--------------------------------------------------------------------------------------------*/
     class BranchNode extends CompositeDisposable {
-        constructor(orientation, proportionalLayout, styles, size, orthogonalSize, childDescriptors) {
-            super();
-            this.orientation = orientation;
-            this.proportionalLayout = proportionalLayout;
-            this.styles = styles;
-            this.children = [];
-            this._onDidChange = new Emitter();
-            this.onDidChange = this._onDidChange.event;
-            this._childrenDisposable = Disposable.NONE;
-            this._orthogonalSize = orthogonalSize;
-            this._size = size;
-            this.element = document.createElement('div');
-            this.element.className = 'branch-node';
-            if (!childDescriptors) {
-                this.splitview = new Splitview(this.element, {
-                    orientation: this.orientation,
-                    proportionalLayout,
-                    styles,
-                });
-                this.splitview.layout(this.size, this.orthogonalSize);
-            }
-            else {
-                const descriptor = {
-                    views: childDescriptors.map((childDescriptor) => {
-                        return {
-                            view: childDescriptor.node,
-                            size: childDescriptor.node.size,
-                            visible: childDescriptor.node instanceof LeafNode &&
-                                childDescriptor.visible !== undefined
-                                ? childDescriptor.visible
-                                : true,
-                        };
-                    }),
-                    size: this.size,
-                };
-                this.children = childDescriptors.map((c) => c.node);
-                this.splitview = new Splitview(this.element, {
-                    orientation: this.orientation,
-                    descriptor,
-                    proportionalLayout,
-                });
-            }
-            this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
-                this._onDidChange.fire({});
-            }));
-            this.setupChildrenEvents();
-        }
         get width() {
             return this.orientation === exports.Orientation.HORIZONTAL
                 ? this.size
@@ -1750,6 +1498,53 @@
             }
             return exports.LayoutPriority.Normal;
         }
+        constructor(orientation, proportionalLayout, styles, size, orthogonalSize, childDescriptors) {
+            super();
+            this.orientation = orientation;
+            this.proportionalLayout = proportionalLayout;
+            this.styles = styles;
+            this.children = [];
+            this._onDidChange = new Emitter();
+            this.onDidChange = this._onDidChange.event;
+            this._childrenDisposable = Disposable.NONE;
+            this._orthogonalSize = orthogonalSize;
+            this._size = size;
+            this.element = document.createElement('div');
+            this.element.className = 'branch-node';
+            if (!childDescriptors) {
+                this.splitview = new Splitview(this.element, {
+                    orientation: this.orientation,
+                    proportionalLayout,
+                    styles,
+                });
+                this.splitview.layout(this.size, this.orthogonalSize);
+            }
+            else {
+                const descriptor = {
+                    views: childDescriptors.map((childDescriptor) => {
+                        return {
+                            view: childDescriptor.node,
+                            size: childDescriptor.node.size,
+                            visible: childDescriptor.node instanceof LeafNode &&
+                                childDescriptor.visible !== undefined
+                                ? childDescriptor.visible
+                                : true,
+                        };
+                    }),
+                    size: this.size,
+                };
+                this.children = childDescriptors.map((c) => c.node);
+                this.splitview = new Splitview(this.element, {
+                    orientation: this.orientation,
+                    descriptor,
+                    proportionalLayout,
+                });
+            }
+            this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
+                this._onDidChange.fire({});
+            }));
+            this.setupChildrenEvents();
+        }
         setVisible(visible) {
             for (const child of this.children) {
                 child.setVisible(visible);
@@ -1921,20 +1716,18 @@
         if (orientation === directionOrientation) {
             const [rest, _index] = tail(location);
             let index = _index;
-            if (direction === exports.Position.Right || direction === exports.Position.Bottom) {
+            if (direction === 'right' || direction === 'bottom') {
                 index += 1;
             }
             return [...rest, index];
         }
         else {
-            const index = direction === exports.Position.Right || direction === exports.Position.Bottom
-                ? 1
-                : 0;
+            const index = direction === 'right' || direction === 'bottom' ? 1 : 0;
             return [...location, index];
         }
     }
     function getDirectionOrientation(direction) {
-        return direction === exports.Position.Top || direction === exports.Position.Bottom
+        return direction === 'top' || direction === 'bottom'
             ? exports.Orientation.VERTICAL
             : exports.Orientation.HORIZONTAL;
     }
@@ -1969,15 +1762,8 @@
         };
     };
     class Gridview {
-        constructor(proportionalLayout, styles, orientation) {
-            this.proportionalLayout = proportionalLayout;
-            this.styles = styles;
-            this.disposable = new MutableDisposable();
-            this._onDidChange = new Emitter();
-            this.onDidChange = this._onDidChange.event;
-            this.element = document.createElement('div');
-            this.element.className = 'grid-view';
-            this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0);
+        get length() {
+            return this._root ? this._root.children.length : 0;
         }
         serialize() {
             const root = serializeBranchNode(this.getView(), this.orientation);
@@ -2051,6 +1837,32 @@
                 this._onDidChange.fire(e);
             });
         }
+        /**
+         * If the root is orientated as a VERTICAL node then nest the existing root within a new HORIZIONTAL root node
+         * If the root is orientated as a HORIZONTAL node then nest the existing root within a new VERITCAL root node
+         */
+        insertOrthogonalSplitviewAtRoot() {
+            if (!this._root) {
+                return;
+            }
+            const oldRoot = this.root;
+            oldRoot.element.remove();
+            this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size);
+            if (oldRoot.children.length === 1) {
+                // can remove one level of redundant branching if there is only a single child
+                const childReference = oldRoot.children[0];
+                oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
+                oldRoot.dispose();
+                this._root.addChild(childReference, exports.Sizing.Distribute, 0);
+            }
+            else {
+                this._root.addChild(oldRoot, exports.Sizing.Distribute, 0);
+            }
+            this.element.appendChild(this._root.element);
+            this.disposable.value = this._root.onDidChange((e) => {
+                this._onDidChange.fire(e);
+            });
+        }
         next(location) {
             return this.progmaticSelect(location);
         }
@@ -2109,6 +1921,16 @@
         get maximumHeight() {
             return this.root.maximumHeight;
         }
+        constructor(proportionalLayout, styles, orientation) {
+            this.proportionalLayout = proportionalLayout;
+            this.styles = styles;
+            this.disposable = new MutableDisposable();
+            this._onDidChange = new Emitter();
+            this.onDidChange = this._onDidChange.event;
+            this.element = document.createElement('div');
+            this.element.className = 'grid-view';
+            this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0);
+        }
         isViewVisible(location) {
             const [rest, index] = tail(location);
             const [, parent] = this.getNode(rest);
@@ -2240,9 +2062,6 @@
     }
 
     class SplitviewApi {
-        constructor(component) {
-            this.component = component;
-        }
         get minimumSize() {
             return this.component.minimumSize;
         }
@@ -2276,6 +2095,9 @@
         get onDidRemoveView() {
             return this.component.onDidRemoveView;
         }
+        constructor(component) {
+            this.component = component;
+        }
         updateOptions(options) {
             this.component.updateOptions(options);
         }
@@ -2308,9 +2130,6 @@
         }
     }
     class PaneviewApi {
-        constructor(component) {
-            this.component = component;
-        }
         get minimumSize() {
             return this.component.minimumSize;
         }
@@ -2349,6 +2168,9 @@
             };
             return emitter.event;
         }
+        constructor(component) {
+            this.component = component;
+        }
         removePanel(panel) {
             this.component.removePanel(panel);
         }
@@ -2378,9 +2200,6 @@
         }
     }
     class GridviewApi {
-        constructor(component) {
-            this.component = component;
-        }
         get minimumHeight() {
             return this.component.minimumHeight;
         }
@@ -2423,6 +2242,9 @@
         set orientation(value) {
             this.component.updateOptions({ orientation: value });
         }
+        constructor(component) {
+            this.component = component;
+        }
         focus() {
             this.component.focus();
         }
@@ -2452,8 +2274,8 @@
         }
     }
     class DockviewApi {
-        constructor(component) {
-            this.component = component;
+        get id() {
+            return this.component.id;
         }
         get width() {
             return this.component.width;
@@ -2518,6 +2340,9 @@
         get activeGroup() {
             return this.component.activeGroup;
         }
+        constructor(component) {
+            this.component = component;
+        }
         getTabHeight() {
             return this.component.tabHeight;
         }
@@ -2536,8 +2361,8 @@
         addPanel(options) {
             return this.component.addPanel(options);
         }
-        addEmptyGroup(options) {
-            this.component.addEmptyGroup(options);
+        addGroup(options) {
+            return this.component.addGroup(options);
         }
         moveToNext(options) {
             this.component.moveToNext(options);
@@ -2565,7 +2390,293 @@
         }
     }
 
+    class DragAndDropObserver extends CompositeDisposable {
+        constructor(element, callbacks) {
+            super();
+            this.element = element;
+            this.callbacks = callbacks;
+            this.target = null;
+            this.registerListeners();
+        }
+        registerListeners() {
+            this.addDisposables(addDisposableListener(this.element, 'dragenter', (e) => {
+                this.target = e.target;
+                this.callbacks.onDragEnter(e);
+            }, true));
+            this.addDisposables(addDisposableListener(this.element, 'dragover', (e) => {
+                e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
+                if (this.callbacks.onDragOver) {
+                    this.callbacks.onDragOver(e);
+                }
+            }, true));
+            this.addDisposables(addDisposableListener(this.element, 'dragleave', (e) => {
+                if (this.target === e.target) {
+                    this.target = null;
+                    this.callbacks.onDragLeave(e);
+                }
+            }));
+            this.addDisposables(addDisposableListener(this.element, 'dragend', (e) => {
+                this.target = null;
+                this.callbacks.onDragEnd(e);
+            }));
+            this.addDisposables(addDisposableListener(this.element, 'drop', (e) => {
+                this.callbacks.onDrop(e);
+            }));
+        }
+    }
+
+    function isBooleanValue(value) {
+        return typeof value === 'boolean';
+    }
+
+    function numberOrFallback(maybeNumber, fallback) {
+        return typeof maybeNumber === 'number' ? maybeNumber : fallback;
+    }
+    function directionToPosition(direction) {
+        switch (direction) {
+            case 'above':
+                return 'top';
+            case 'below':
+                return 'bottom';
+            case 'left':
+                return 'left';
+            case 'right':
+                return 'right';
+            case 'within':
+                return 'center';
+            default:
+                throw new Error(`invalid direction '${direction}'`);
+        }
+    }
+    function positionToDirection(position) {
+        switch (position) {
+            case 'top':
+                return 'above';
+            case 'bottom':
+                return 'below';
+            case 'left':
+                return 'left';
+            case 'right':
+                return 'right';
+            case 'center':
+                return 'within';
+            default:
+                throw new Error(`invalid position '${position}'`);
+        }
+    }
+    class Droptarget extends CompositeDisposable {
+        get state() {
+            return this._state;
+        }
+        constructor(element, options) {
+            super();
+            this.element = element;
+            this.options = options;
+            this._onDrop = new Emitter();
+            this.onDrop = this._onDrop.event;
+            // use a set to take advantage of #<set>.has
+            const acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
+            this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
+                onDragEnter: () => undefined,
+                onDragOver: (e) => {
+                    const width = this.element.clientWidth;
+                    const height = this.element.clientHeight;
+                    if (width === 0 || height === 0) {
+                        return; // avoid div!0
+                    }
+                    const rect = e.currentTarget.getBoundingClientRect();
+                    const x = e.clientX - rect.left;
+                    const y = e.clientY - rect.top;
+                    const quadrant = this.calculateQuadrant(acceptedTargetZonesSet, x, y, width, height);
+                    if (quadrant === null) {
+                        // no drop target should be displayed
+                        this.removeDropTarget();
+                        return;
+                    }
+                    if (isBooleanValue(this.options.canDisplayOverlay)) {
+                        if (!this.options.canDisplayOverlay) {
+                            return;
+                        }
+                    }
+                    else if (!this.options.canDisplayOverlay(e, quadrant)) {
+                        return;
+                    }
+                    if (!this.target) {
+                        this.target = document.createElement('div');
+                        this.target.className = 'drop-target-dropzone';
+                        this.overlay = document.createElement('div');
+                        this.overlay.className = 'drop-target-selection';
+                        this._state = 'center';
+                        this.target.appendChild(this.overlay);
+                        this.element.classList.add('drop-target');
+                        this.element.append(this.target);
+                    }
+                    if (this.options.acceptedTargetZones.length === 0) {
+                        return;
+                    }
+                    if (!this.target || !this.overlay) {
+                        return;
+                    }
+                    this.toggleClasses(quadrant, width, height);
+                    this.setState(quadrant);
+                },
+                onDragLeave: () => {
+                    this.removeDropTarget();
+                },
+                onDragEnd: () => {
+                    this.removeDropTarget();
+                },
+                onDrop: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const state = this._state;
+                    this.removeDropTarget();
+                    if (state) {
+                        this._onDrop.fire({ position: state, nativeEvent: e });
+                    }
+                },
+            }));
+        }
+        dispose() {
+            this.removeDropTarget();
+        }
+        toggleClasses(quadrant, width, height) {
+            var _a, _b, _c, _d;
+            if (!this.overlay) {
+                return;
+            }
+            const isSmallX = width < 100;
+            const isSmallY = height < 100;
+            const isLeft = quadrant === 'left';
+            const isRight = quadrant === 'right';
+            const isTop = quadrant === 'top';
+            const isBottom = quadrant === 'bottom';
+            const rightClass = !isSmallX && isRight;
+            const leftClass = !isSmallX && isLeft;
+            const topClass = !isSmallY && isTop;
+            const bottomClass = !isSmallY && isBottom;
+            let size = 0.5;
+            if (((_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.type) === 'percentage') {
+                size = clamp(this.options.overlayModel.size.value, 0, 100) / 100;
+            }
+            if (((_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) === null || _d === void 0 ? void 0 : _d.type) === 'pixels') {
+                if (rightClass || leftClass) {
+                    size =
+                        clamp(0, this.options.overlayModel.size.value, width) /
+                            width;
+                }
+                if (topClass || bottomClass) {
+                    size =
+                        clamp(0, this.options.overlayModel.size.value, height) /
+                            height;
+                }
+            }
+            const translate = (1 - size) / 2;
+            const scale = size;
+            let transform;
+            if (rightClass) {
+                transform = `translateX(${100 * translate}%) scaleX(${scale})`;
+            }
+            else if (leftClass) {
+                transform = `translateX(-${100 * translate}%) scaleX(${scale})`;
+            }
+            else if (topClass) {
+                transform = `translateY(-${100 * translate}%) scaleY(${scale})`;
+            }
+            else if (bottomClass) {
+                transform = `translateY(${100 * translate}%) scaleY(${scale})`;
+            }
+            else {
+                transform = '';
+            }
+            this.overlay.style.transform = transform;
+            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 = 'top';
+                    break;
+                case 'left':
+                    this._state = 'left';
+                    break;
+                case 'bottom':
+                    this._state = 'bottom';
+                    break;
+                case 'right':
+                    this._state = 'right';
+                    break;
+                case 'center':
+                    this._state = 'center';
+                    break;
+            }
+        }
+        calculateQuadrant(overlayType, x, y, width, height) {
+            var _a, _b, _c, _d, _e, _f;
+            const isPercentage = ((_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) === undefined ||
+                ((_c = (_b = this.options.overlayModel) === null || _b === void 0 ? void 0 : _b.activationSize) === null || _c === void 0 ? void 0 : _c.type) === 'percentage';
+            const value = numberOrFallback((_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.overlayModel) === null || _e === void 0 ? void 0 : _e.activationSize) === null || _f === void 0 ? void 0 : _f.value, 20);
+            if (isPercentage) {
+                return calculateQuadrantAsPercentage(overlayType, x, y, width, height, value);
+            }
+            return calculateQuadrantAsPixels(overlayType, x, y, width, height, value);
+        }
+        removeDropTarget() {
+            if (this.target) {
+                this._state = undefined;
+                this.element.removeChild(this.target);
+                this.target = undefined;
+                this.overlay = undefined;
+                this.element.classList.remove('drop-target');
+            }
+        }
+    }
+    function calculateQuadrantAsPercentage(overlayType, x, y, width, height, threshold) {
+        const xp = (100 * x) / width;
+        const yp = (100 * y) / height;
+        if (overlayType.has('left') && xp < threshold) {
+            return 'left';
+        }
+        if (overlayType.has('right') && xp > 100 - threshold) {
+            return 'right';
+        }
+        if (overlayType.has('top') && yp < threshold) {
+            return 'top';
+        }
+        if (overlayType.has('bottom') && yp > 100 - threshold) {
+            return 'bottom';
+        }
+        if (!overlayType.has('center')) {
+            return null;
+        }
+        return 'center';
+    }
+    function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold) {
+        if (overlayType.has('left') && x < threshold) {
+            return 'left';
+        }
+        if (overlayType.has('right') && x > width - threshold) {
+            return 'right';
+        }
+        if (overlayType.has('top') && y < threshold) {
+            return 'top';
+        }
+        if (overlayType.has('bottom') && y > height - threshold) {
+            return 'bottom';
+        }
+        if (!overlayType.has('center')) {
+            return null;
+        }
+        return 'center';
+    }
+
     class ContentContainer extends CompositeDisposable {
+        get element() {
+            return this._element;
+        }
         constructor() {
             super();
             this.disposable = new MutableDisposable();
@@ -2583,9 +2694,6 @@
             // 3) register dragEnd events
             // 4) register mouseMove events (if no buttons are present we take this as a dragEnd event)
         }
-        get element() {
-            return this._element;
-        }
         show() {
             this.element.style.display = '';
         }
@@ -2641,6 +2749,7 @@
         DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab";
         DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel";
         DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
+        DockviewDropTargets[DockviewDropTargets["Edge"] = 3] = "Edge";
     })(exports.DockviewDropTargets || (exports.DockviewDropTargets = {}));
 
     class DragHandler extends CompositeDisposable {
@@ -2662,9 +2771,9 @@
                 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();
+                this.el.classList.add('dv-dragged');
+                setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
+                this.disposable.value = this.getData(event.dataTransfer);
                 if (event.dataTransfer) {
                     event.dataTransfer.effectAllowed = 'move';
                 }
@@ -2678,11 +2787,10 @@
         }
     }
 
-    exports.MouseEventKind = void 0;
-    (function (MouseEventKind) {
-        MouseEventKind["CLICK"] = "CLICK";
-    })(exports.MouseEventKind || (exports.MouseEventKind = {}));
     class Tab extends CompositeDisposable {
+        get element() {
+            return this._element;
+        }
         constructor(panelId, accessor, group) {
             super();
             this.panelId = panelId;
@@ -2726,25 +2834,30 @@
                  * on the tabs-container. I cannot use event.preventDefault() since I need the on DragStart event to occur
                  */
                 event.stopPropagation();
-                this._onChanged.fire({ kind: exports.MouseEventKind.CLICK, event });
+                this._onChanged.fire(event);
             }));
             this.droptarget = new Droptarget(this._element, {
-                validOverlays: 'none',
-                canDisplayOverlay: (event) => {
+                acceptedTargetZones: ['center'],
+                canDisplayOverlay: (event, position) => {
+                    if (this.group.locked) {
+                        return false;
+                    }
                     const data = getPanelData();
                     if (data && this.accessor.id === data.viewId) {
+                        if (data.panelId === null &&
+                            data.groupId === this.group.id) {
+                            // don't allow group move to drop on self
+                            return false;
+                        }
                         return this.panelId !== data.panelId;
                     }
-                    return this.group.model.canDisplayOverlay(event, exports.DockviewDropTargets.Tab);
+                    return this.group.model.canDisplayOverlay(event, position, exports.DockviewDropTargets.Tab);
                 },
             });
             this.addDisposables(this.droptarget.onDrop((event) => {
                 this._onDropped.fire(event);
             }));
         }
-        get element() {
-            return this._element;
-        }
         setActive(isActive) {
             toggleClass(this.element, 'active-tab', isActive);
             toggleClass(this.element, 'inactive-tab', !isActive);
@@ -2762,56 +2875,94 @@
         }
     }
 
-    class TabsContainer extends CompositeDisposable {
-        constructor(accessor, group, options) {
+    function addGhostImage(dataTransfer, ghostElement) {
+        // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
+        addClasses(ghostElement, 'dv-dragged');
+        document.body.appendChild(ghostElement);
+        dataTransfer.setDragImage(ghostElement, 0, 0);
+        setTimeout(() => {
+            ghostElement.remove();
+        }, 0);
+    }
+
+    class GroupDragHandler extends DragHandler {
+        constructor(element, accessorId, group) {
+            super(element);
+            this.accessorId = accessorId;
+            this.group = group;
+            this.panelTransfer = LocalSelectionTransfer.getInstance();
+        }
+        getData(dataTransfer) {
+            this.panelTransfer.setData([new PanelTransfer(this.accessorId, this.group.id, null)], PanelTransfer.prototype);
+            const style = window.getComputedStyle(this.el);
+            const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
+            const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
+            if (dataTransfer) {
+                const ghostElement = document.createElement('div');
+                ghostElement.style.backgroundColor = bgColor;
+                ghostElement.style.color = color;
+                ghostElement.style.padding = '2px 8px';
+                ghostElement.style.height = '24px';
+                ghostElement.style.fontSize = '11px';
+                ghostElement.style.lineHeight = '20px';
+                ghostElement.style.borderRadius = '12px';
+                ghostElement.style.position = 'absolute';
+                ghostElement.textContent = `Multiple Panels (${this.group.size})`;
+                addGhostImage(dataTransfer, ghostElement);
+            }
+            return {
+                dispose: () => {
+                    this.panelTransfer.clearData(PanelTransfer.prototype);
+                },
+            };
+        }
+        dispose() {
+            //
+        }
+    }
+
+    class VoidContainer extends CompositeDisposable {
+        get element() {
+            return this._element;
+        }
+        constructor(accessor, group) {
             super();
             this.accessor = accessor;
             this.group = group;
-            this.tabs = [];
-            this.selectedIndex = -1;
-            this._hidden = false;
             this._onDrop = new Emitter();
             this.onDrop = this._onDrop.event;
-            this.addDisposables(this._onDrop);
             this._element = document.createElement('div');
-            this._element.className = 'tabs-and-actions-container';
-            this.height = options.tabHeight;
-            this.actionContainer = document.createElement('div');
-            this.actionContainer.className = 'action-container';
-            this.tabContainer = document.createElement('div');
-            this.tabContainer.className = 'tabs-container';
-            this.voidContainer = document.createElement('div');
-            this.voidContainer.className = 'void-container';
-            this._element.appendChild(this.tabContainer);
-            this._element.appendChild(this.voidContainer);
-            this._element.appendChild(this.actionContainer);
-            this.voidDropTarget = new Droptarget(this.voidContainer, {
-                validOverlays: 'none',
-                canDisplayOverlay: (event) => {
+            this._element.className = 'void-container';
+            this._element.tabIndex = 0;
+            this._element.draggable = true;
+            this.addDisposables(this._onDrop, addDisposableListener(this._element, 'click', () => {
+                this.accessor.doSetGroupActive(this.group);
+            }));
+            const handler = new GroupDragHandler(this._element, accessor.id, group);
+            this.voidDropTarget = new Droptarget(this._element, {
+                acceptedTargetZones: ['center'],
+                canDisplayOverlay: (event, position) => {
                     var _a;
                     const data = getPanelData();
                     if (data && this.accessor.id === data.viewId) {
+                        if (data.panelId === null &&
+                            data.groupId === this.group.id) {
+                            // don't allow group move to drop on self
+                            return false;
+                        }
                         // don't show the overlay if the tab being dragged is the last panel of this group
-                        return ((_a = last(this.tabs)) === null || _a === void 0 ? void 0 : _a.value.panelId) !== data.panelId;
+                        return ((_a = last(this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
                     }
-                    return group.model.canDisplayOverlay(event, exports.DockviewDropTargets.Panel);
+                    return group.model.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
                 },
             });
-            this.addDisposables(this.voidDropTarget.onDrop((event) => {
-                this._onDrop.fire({
-                    event: event.nativeEvent,
-                    index: this.tabs.length,
-                });
-            }), this.voidDropTarget, addDisposableListener(this.tabContainer, 'mousedown', (event) => {
-                if (event.defaultPrevented) {
-                    return;
-                }
-                const isLeftClick = event.button === 0;
-                if (isLeftClick) {
-                    this.accessor.doSetGroupActive(this.group);
-                }
-            }));
+            this.addDisposables(handler, this.voidDropTarget.onDrop((event) => {
+                this._onDrop.fire(event);
+            }), this.voidDropTarget);
         }
+    }
+
+    class TabsContainer extends CompositeDisposable {
         get panels() {
             return this.tabs.map((_) => _.value.panelId);
         }
@@ -2872,6 +3023,52 @@
         indexOf(id) {
             return this.tabs.findIndex((tab) => tab.value.panelId === id);
         }
+        constructor(accessor, group) {
+            super();
+            this.accessor = accessor;
+            this.group = group;
+            this.tabs = [];
+            this.selectedIndex = -1;
+            this._hidden = false;
+            this._onDrop = new Emitter();
+            this.onDrop = this._onDrop.event;
+            this.addDisposables(this._onDrop);
+            this._element = document.createElement('div');
+            this._element.className = 'tabs-and-actions-container';
+            this.height = accessor.options.tabHeight;
+            toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
+            this.addDisposables(this.accessor.onDidAddPanel((e) => {
+                if (e.api.group === this.group) {
+                    toggleClass(this._element, 'dv-single-tab', this.size === 1);
+                }
+            }), this.accessor.onDidRemovePanel((e) => {
+                if (e.api.group === this.group) {
+                    toggleClass(this._element, 'dv-single-tab', this.size === 1);
+                }
+            }));
+            this.actionContainer = document.createElement('div');
+            this.actionContainer.className = 'action-container';
+            this.tabContainer = document.createElement('div');
+            this.tabContainer.className = 'tabs-container';
+            this.voidContainer = new VoidContainer(this.accessor, this.group);
+            this._element.appendChild(this.tabContainer);
+            this._element.appendChild(this.voidContainer.element);
+            this._element.appendChild(this.actionContainer);
+            this.addDisposables(this.voidContainer, this.voidContainer.onDrop((event) => {
+                this._onDrop.fire({
+                    event: event.nativeEvent,
+                    index: this.tabs.length,
+                });
+            }), addDisposableListener(this.tabContainer, 'mousedown', (event) => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                const isLeftClick = event.button === 0;
+                if (isLeftClick) {
+                    this.accessor.doSetGroupActive(this.group);
+                }
+            }));
+        }
         setActive(_isGroupActive) {
             // noop
         }
@@ -2916,15 +3113,13 @@
                 var _a;
                 const alreadyFocused = panel.id === ((_a = this.group.model.activePanel) === null || _a === void 0 ? void 0 : _a.id) &&
                     this.group.model.isContentFocused;
-                const isLeftClick = event.event.button === 0;
-                if (!isLeftClick || event.event.defaultPrevented) {
+                const isLeftClick = event.button === 0;
+                if (!isLeftClick || event.defaultPrevented) {
                     return;
                 }
-                if (event.kind === exports.MouseEventKind.CLICK) {
-                    this.group.model.openPanel(panel, {
-                        skipFocus: alreadyFocused,
-                    });
-                }
+                this.group.model.openPanel(panel, {
+                    skipFocus: alreadyFocused,
+                });
             }), tabToAdd.onDrop((event) => {
                 this._onDrop.fire({
                     event: event.nativeEvent,
@@ -2947,63 +3142,6 @@
     }
 
     class Groupview extends CompositeDisposable {
-        constructor(container, accessor, id, options, parent) {
-            super();
-            this.container = container;
-            this.accessor = accessor;
-            this.id = id;
-            this.options = options;
-            this.parent = parent;
-            this._isGroupActive = false;
-            this._locked = false;
-            this.mostRecentlyUsed = [];
-            this._onDidChange = new Emitter();
-            this.onDidChange = this._onDidChange.event;
-            this._width = 0;
-            this._height = 0;
-            this._panels = [];
-            this._onMove = new Emitter();
-            this.onMove = this._onMove.event;
-            this._onDidDrop = new Emitter();
-            this.onDidDrop = this._onDidDrop.event;
-            this._onDidAddPanel = new Emitter();
-            this.onDidAddPanel = this._onDidAddPanel.event;
-            this._onDidRemovePanel = new Emitter();
-            this.onDidRemovePanel = this._onDidRemovePanel.event;
-            this._onDidActivePanelChange = new Emitter();
-            this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-            this.container.classList.add('groupview');
-            this.tabsContainer = new TabsContainer(this.accessor, this.parent, {
-                tabHeight: options.tabHeight,
-            });
-            this.contentContainer = new ContentContainer();
-            this.dropTarget = new Droptarget(this.contentContainer.element, {
-                validOverlays: 'all',
-                canDisplayOverlay: (event, quadrant) => {
-                    if (this.locked && !quadrant) {
-                        return false;
-                    }
-                    const data = getPanelData();
-                    if (data && data.viewId === this.accessor.id) {
-                        const groupHasOnePanelAndIsActiveDragElement = this._panels.length === 1 && data.groupId === this.id;
-                        return !groupHasOnePanelAndIsActiveDragElement;
-                    }
-                    return this.canDisplayOverlay(event, exports.DockviewDropTargets.Panel);
-                },
-            });
-            container.append(this.tabsContainer.element, this.contentContainer.element);
-            this.header.hidden = !!options.hideHeader;
-            this.locked = !!options.locked;
-            this.addDisposables(this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this.tabsContainer.onDrop((event) => {
-                this.handleDropEvent(event.event, exports.Position.Center, event.index);
-            }), this.contentContainer.onDidFocus(() => {
-                this.accessor.doSetGroupActive(this.parent, true);
-            }), this.contentContainer.onDidBlur(() => {
-                // noop
-            }), this.dropTarget.onDrop((event) => {
-                this.handleDropEvent(event.nativeEvent, event.position);
-            }));
-        }
         get element() {
             throw new Error('not supported');
         }
@@ -3015,6 +3153,7 @@
         }
         set locked(value) {
             this._locked = value;
+            toggleClass(this.container, 'locked-groupview', value);
         }
         get isActive() {
             return this._isGroupActive;
@@ -3052,6 +3191,71 @@
             }
             return isAncestor(document.activeElement, this.contentContainer.element);
         }
+        constructor(container, accessor, id, options, groupPanel) {
+            super();
+            this.container = container;
+            this.accessor = accessor;
+            this.id = id;
+            this.options = options;
+            this.groupPanel = groupPanel;
+            this._isGroupActive = false;
+            this._locked = false;
+            this.mostRecentlyUsed = [];
+            this._onDidChange = new Emitter();
+            this.onDidChange = this._onDidChange.event;
+            this._width = 0;
+            this._height = 0;
+            this._panels = [];
+            this._onMove = new Emitter();
+            this.onMove = this._onMove.event;
+            this._onDidDrop = new Emitter();
+            this.onDidDrop = this._onDidDrop.event;
+            this._onDidAddPanel = new Emitter();
+            this.onDidAddPanel = this._onDidAddPanel.event;
+            this._onDidRemovePanel = new Emitter();
+            this.onDidRemovePanel = this._onDidRemovePanel.event;
+            this._onDidActivePanelChange = new Emitter();
+            this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+            this.container.classList.add('groupview');
+            this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
+            this.contentContainer = new ContentContainer();
+            this.dropTarget = new Droptarget(this.contentContainer.element, {
+                acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
+                canDisplayOverlay: (event, position) => {
+                    if (this.locked && position === 'center') {
+                        return false;
+                    }
+                    const data = getPanelData();
+                    if (data && data.viewId === this.accessor.id) {
+                        if (data.groupId === this.id) {
+                            if (position === 'center') {
+                                // don't allow to drop on self for center position
+                                return false;
+                            }
+                            if (data.panelId === null) {
+                                // don't allow group move to drop anywhere on self
+                                return false;
+                            }
+                        }
+                        const groupHasOnePanelAndIsActiveDragElement = this._panels.length === 1 && data.groupId === this.id;
+                        return !groupHasOnePanelAndIsActiveDragElement;
+                    }
+                    return this.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
+                },
+            });
+            container.append(this.tabsContainer.element, this.contentContainer.element);
+            this.header.hidden = !!options.hideHeader;
+            this.locked = !!options.locked;
+            this.addDisposables(this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this.tabsContainer.onDrop((event) => {
+                this.handleDropEvent(event.event, 'center', event.index);
+            }), this.contentContainer.onDidFocus(() => {
+                this.accessor.doSetGroupActive(this.groupPanel, true);
+            }), this.contentContainer.onDidBlur(() => {
+                // noop
+            }), this.dropTarget.onDrop((event) => {
+                this.handleDropEvent(event.nativeEvent, event.position);
+            }));
+        }
         initialize() {
             var _a, _b;
             if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.panels) {
@@ -3067,11 +3271,11 @@
             this.setActive(this.isActive, true, true);
             this.updateContainer();
             if (this.accessor.options.createGroupControlElement) {
-                this._control = this.accessor.options.createGroupControlElement(this.parent);
+                this._control = this.accessor.options.createGroupControlElement(this.groupPanel);
                 this.addDisposables(this._control);
                 this._control.init({
                     containerApi: new DockviewApi(this.accessor),
-                    api: this.parent.api,
+                    api: this.groupPanel.api,
                 });
                 this.tabsContainer.setActionElement(this._control.element);
             }
@@ -3158,10 +3362,10 @@
             const skipSetPanelActive = !!options.skipSetPanelActive;
             const skipSetGroupActive = !!options.skipSetGroupActive;
             // ensure the group is updated before we fire any events
-            panel.updateParentGroup(this.parent, true);
+            panel.updateParentGroup(this.groupPanel, true);
             if (this._activePanel === panel) {
                 if (!skipSetGroupActive) {
-                    this.accessor.doSetGroupActive(this.parent);
+                    this.accessor.doSetGroupActive(this.groupPanel);
                 }
                 return;
             }
@@ -3170,7 +3374,7 @@
                 this.doSetActivePanel(panel);
             }
             if (!skipSetGroupActive) {
-                this.accessor.doSetGroupActive(this.parent, !!options.skipFocus);
+                this.accessor.doSetGroupActive(this.groupPanel, !!options.skipFocus);
             }
             this.updateContainer();
         }
@@ -3193,7 +3397,7 @@
                 }
             }
             else {
-                this.accessor.removeGroup(this.parent);
+                this.accessor.removeGroup(this.groupPanel);
             }
         }
         closePanel(panel) {
@@ -3298,7 +3502,7 @@
         }
         updateContainer() {
             toggleClass(this.container, 'empty', this.isEmpty);
-            this.panels.forEach((panel) => panel.updateParentGroup(this.parent, this.isActive));
+            this.panels.forEach((panel) => panel.updateParentGroup(this.groupPanel, this.isActive));
             if (this.isEmpty && !this.watermark) {
                 const watermark = this.accessor.createWatermarkComponent();
                 watermark.init({
@@ -3310,29 +3514,28 @@
                 this.watermark = watermark;
                 addDisposableListener(this.watermark.element, 'click', () => {
                     if (!this.isActive) {
-                        this.accessor.doSetGroupActive(this.parent);
+                        this.accessor.doSetGroupActive(this.groupPanel);
                     }
                 });
-                this.contentContainer.hide();
                 this.tabsContainer.hide();
-                this.container.appendChild(this.watermark.element);
-                this.watermark.updateParentGroup(this.parent, true);
+                this.contentContainer.element.appendChild(this.watermark.element);
+                this.watermark.updateParentGroup(this.groupPanel, true);
             }
             if (!this.isEmpty && this.watermark) {
                 this.watermark.element.remove();
                 this.watermark.dispose();
                 this.watermark = undefined;
-                this.contentContainer.show();
                 this.tabsContainer.show();
             }
         }
-        canDisplayOverlay(event, target) {
+        canDisplayOverlay(event, position, target) {
             // custom overlay handler
             if (this.accessor.options.showDndOverlay) {
                 return this.accessor.options.showDndOverlay({
                     nativeEvent: event,
                     target,
                     group: this.accessor.getPanel(this.id),
+                    position,
                     getData: getPanelData,
                 });
             }
@@ -3340,7 +3543,17 @@
         }
         handleDropEvent(event, position, index) {
             const data = getPanelData();
-            if (data) {
+            if (data && data.viewId === this.accessor.id) {
+                if (data.panelId === null) {
+                    // this is a group move dnd event
+                    const { groupId } = data;
+                    this._onMove.fire({
+                        target: position,
+                        groupId: groupId,
+                        index,
+                    });
+                    return;
+                }
                 const fromSameGroup = this.tabsContainer.indexOf(data.panelId) !== -1;
                 if (fromSameGroup && this.tabsContainer.size === 1) {
                     return;
@@ -3386,45 +3599,19 @@
     function toTarget(direction) {
         switch (direction) {
             case 'left':
-                return exports.Position.Left;
+                return 'left';
             case 'right':
-                return exports.Position.Right;
+                return 'right';
             case 'above':
-                return exports.Position.Top;
+                return 'top';
             case 'below':
-                return exports.Position.Bottom;
+                return 'bottom';
             case 'within':
             default:
-                return exports.Position.Center;
+                return 'center';
         }
     }
     class BaseGrid extends CompositeDisposable {
-        constructor(_element, options) {
-            super();
-            this._element = _element;
-            this._id = nextLayoutId$1.next();
-            this._groups = new Map();
-            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);
-            this.layout(0, 0, true); // set some elements height/widths
-            this.addDisposables(this.gridview.onDidChange(() => {
-                this._bufferOnDidLayoutChange.fire();
-            }));
-            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;
         }
@@ -3458,6 +3645,32 @@
         get activeGroup() {
             return this._activeGroup;
         }
+        constructor(_element, options) {
+            super();
+            this._element = _element;
+            this._id = nextLayoutId$1.next();
+            this._groups = new Map();
+            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);
+            this.layout(0, 0, true); // set some elements height/widths
+            this.addDisposables(this.gridview.onDidChange(() => {
+                this._bufferOnDidLayoutChange.fire();
+            }));
+            this.addDisposables(exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+                this._bufferOnDidLayoutChange.fire();
+            }), this._bufferOnDidLayoutChange.onEvent(() => {
+                this._onDidLayoutChange.fire();
+            }), this._bufferOnDidLayoutChange);
+        }
         setVisible(panel, visible) {
             this.gridview.setViewVisible(getGridLocation(panel.element), visible);
             this._onDidLayoutChange.fire();
@@ -3566,10 +3779,51 @@
         }
     }
 
+    function isPanelOptionsWithPanel(data) {
+        if (data.referencePanel) {
+            return true;
+        }
+        return false;
+    }
+    function isPanelOptionsWithGroup(data) {
+        if (data.referenceGroup) {
+            return true;
+        }
+        return false;
+    }
+    function isGroupOptionsWithPanel(data) {
+        if (data.referencePanel) {
+            return true;
+        }
+        return false;
+    }
+    function isGroupOptionsWithGroup(data) {
+        if (data.referenceGroup) {
+            return true;
+        }
+        return false;
+    }
+
     /**
      * A core api implementation that should be used across all panel-like objects
      */
     class PanelApiImpl extends CompositeDisposable {
+        //
+        get isFocused() {
+            return this._isFocused;
+        }
+        get isActive() {
+            return this._isActive;
+        }
+        get isVisible() {
+            return this._isVisible;
+        }
+        get width() {
+            return this._width;
+        }
+        get height() {
+            return this._height;
+        }
         constructor(id) {
             super();
             this.id = id;
@@ -3578,6 +3832,7 @@
             this._isVisible = true;
             this._width = 0;
             this._height = 0;
+            this.panelUpdatesDisposable = new MutableDisposable();
             this._onDidDimensionChange = new Emitter({
                 replay: true,
             });
@@ -3606,32 +3861,28 @@
             //
             this._onActiveChange = new Emitter();
             this.onActiveChange = this._onActiveChange.event;
-            this.addDisposables(this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
+            //
+            this._onUpdateParameters = new Emitter();
+            this.onUpdateParameters = this._onUpdateParameters.event;
+            this.addDisposables(this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this._onUpdateParameters, this.onDidFocusChange((event) => {
                 this._isFocused = event.isFocused;
             }), this.onDidActiveChange((event) => {
                 this._isActive = event.isActive;
             }), this.onDidVisibilityChange((event) => {
                 this._isVisible = event.isVisible;
-            }), this.onDidDimensionsChange((event) => {
-                this._width = event.width;
-                this._height = event.height;
-            }));
-        }
-        //
-        get isFocused() {
-            return this._isFocused;
-        }
-        get isActive() {
-            return this._isActive;
-        }
-        get isVisible() {
-            return this._isVisible;
-        }
-        get width() {
-            return this._width;
+            }), this.onDidDimensionsChange((event) => {
+                this._width = event.width;
+                this._height = event.height;
+            }));
         }
-        get height() {
-            return this._height;
+        initialize(panel) {
+            this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
+                panel.update({
+                    params: {
+                        params: parameters,
+                    },
+                });
+            });
         }
         setVisible(isVisible) {
             this._onVisibilityChange.fire({ isVisible });
@@ -3639,26 +3890,29 @@
         setActive() {
             this._onActiveChange.fire();
         }
+        updateParameters(parameters) {
+            this._onUpdateParameters.fire(parameters);
+        }
         dispose() {
             super.dispose();
         }
     }
 
     class GridviewPanelApiImpl extends PanelApiImpl {
-        //
-        constructor(id) {
+        constructor(id, panel) {
             super(id);
             this._onDidConstraintsChangeInternal = new Emitter();
             this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
-            //
             this._onDidConstraintsChange = new Emitter({
                 replay: true,
             });
             this.onDidConstraintsChange = this._onDidConstraintsChange.event;
-            //
             this._onDidSizeChange = new Emitter();
             this.onDidSizeChange = this._onDidSizeChange.event;
             this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
+            if (panel) {
+                this.initialize(panel);
+            }
         }
         setConstraints(value) {
             this._onDidConstraintsChangeInternal.fire(value);
@@ -3669,19 +3923,6 @@
     }
 
     class DockviewPanelApiImpl extends GridviewPanelApiImpl {
-        constructor(panel, group) {
-            super(panel.id);
-            this.panel = panel;
-            this._onDidTitleChange = new Emitter();
-            this.onDidTitleChange = this._onDidTitleChange.event;
-            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._onDidGroupChange, this._onDidActiveGroupChange);
-        }
         get title() {
             return this.panel.title;
         }
@@ -3705,30 +3946,29 @@
         get group() {
             return this._group;
         }
+        constructor(panel, group) {
+            super(panel.id);
+            this.panel = panel;
+            this._onDidTitleChange = new Emitter();
+            this.onDidTitleChange = this._onDidTitleChange.event;
+            this._onDidActiveGroupChange = new Emitter();
+            this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+            this._onDidGroupChange = new Emitter();
+            this.onDidGroupChange = this._onDidGroupChange.event;
+            this.disposable = new MutableDisposable();
+            this.initialize(panel);
+            this._group = group;
+            this.addDisposables(this.disposable, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
+        }
         setTitle(title) {
-            this._onDidTitleChange.fire({ title });
+            this.panel.update({ params: { title } });
         }
         close() {
-            if (!this.group) {
-                throw new Error(`panel ${this.id} has no group`);
-            }
-            return this.group.model.closePanel(this.panel);
+            this.group.model.closePanel(this.panel);
         }
     }
 
-    class DockviewGroupPanel extends CompositeDisposable {
-        constructor(id, accessor, containerApi, group) {
-            super();
-            this.id = id;
-            this.containerApi = containerApi;
-            this.mutableDisposable = new MutableDisposable();
-            this._title = '';
-            this._group = group;
-            this.api = new DockviewPanelApiImpl(this, this._group);
-            this.addDisposables(this.api.onActiveChange(() => {
-                accessor.setActivePanel(this);
-            }));
-        }
+    class DockviewPanel extends CompositeDisposable {
         get params() {
             return this._params;
         }
@@ -3741,6 +3981,22 @@
         get view() {
             return this._view;
         }
+        constructor(id, accessor, containerApi, group) {
+            super();
+            this.id = id;
+            this.containerApi = containerApi;
+            this.mutableDisposable = new MutableDisposable();
+            this._title = '';
+            this._group = group;
+            this.api = new DockviewPanelApiImpl(this, this._group);
+            this.addDisposables(this.api.onActiveChange(() => {
+                accessor.setActivePanel(this);
+            }), this.api.onDidSizeChange((event) => {
+                // forward the resize event to the group since if you want to resize a panel
+                // you are actually just resizing the panels parent which is the group
+                this.group.api.setSize(event);
+            }));
+        }
         init(params) {
             var _a;
             this._params = params.params;
@@ -3823,6 +4079,9 @@
     }
 
     class ActionContainer {
+        get element() {
+            return this._element;
+        }
         constructor() {
             this._element = document.createElement('div');
             this._element.className = 'actions-bar';
@@ -3830,9 +4089,6 @@
             this._list.className = 'actions-container';
             this._element.appendChild(this._list);
         }
-        get element() {
-            return this._element;
-        }
         add(element) {
             const listItem = document.createElement('li');
             listItem.className = 'action-item';
@@ -3873,6 +4129,9 @@
     });
 
     class Watermark extends CompositeDisposable {
+        get id() {
+            return 'watermark';
+        }
         constructor() {
             super();
             this._element = document.createElement('div');
@@ -3900,9 +4159,6 @@
                 }
             }));
         }
-        get id() {
-            return 'watermark';
-        }
         update(_event) {
             // noop
         }
@@ -3965,6 +4221,12 @@
 
     const DEFAULT_TAB_IDENTIFIER = '__default__tab__';
     class DefaultTab extends CompositeDisposable {
+        get element() {
+            return this._element;
+        }
+        get id() {
+            return DEFAULT_TAB_IDENTIFIER;
+        }
         constructor() {
             super();
             this._isPanelVisible = false;
@@ -3997,12 +4259,6 @@
             }));
             this.render();
         }
-        get element() {
-            return this._element;
-        }
-        get id() {
-            return DEFAULT_TAB_IDENTIFIER;
-        }
         update(event) {
             this.params = Object.assign(Object.assign({}, this.params), event.params);
             this.render();
@@ -4041,6 +4297,19 @@
     }
 
     class BasePanelView extends CompositeDisposable {
+        get element() {
+            return this._element;
+        }
+        get width() {
+            return this._width;
+        }
+        get height() {
+            return this._height;
+        }
+        get params() {
+            var _a;
+            return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+        }
         constructor(id, component, api) {
             super();
             this.id = id;
@@ -4061,19 +4330,6 @@
                 this.api._onDidChangeFocus.fire({ isFocused: false });
             }));
         }
-        get element() {
-            return this._element;
-        }
-        get width() {
-            return this._width;
-        }
-        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();
         }
@@ -4114,50 +4370,6 @@
     }
 
     class GridviewPanel extends BasePanelView {
-        constructor(id, component, api = new GridviewPanelApiImpl(id)) {
-            super(id, component, api);
-            this._evaluatedMinimumWidth = 0;
-            this._evaluatedMaximumWidth = Number.MAX_SAFE_INTEGER;
-            this._evaluatedMinimumHeight = 0;
-            this._evaluatedMaximumHeight = Number.MAX_SAFE_INTEGER;
-            this._minimumWidth = 0;
-            this._minimumHeight = 0;
-            this._maximumWidth = Number.MAX_SAFE_INTEGER;
-            this._maximumHeight = Number.MAX_SAFE_INTEGER;
-            this._snap = false;
-            this._onDidChange = new Emitter();
-            this.onDidChange = this._onDidChange.event;
-            this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
-                const { isVisible } = event;
-                const { accessor } = this._params;
-                accessor.setVisible(this, isVisible);
-            }), this.api.onActiveChange(() => {
-                const { accessor } = this._params;
-                accessor.setActive(this);
-            }), this.api.onDidConstraintsChangeInternal((event) => {
-                if (typeof event.minimumWidth === 'number' ||
-                    typeof event.minimumWidth === 'function') {
-                    this._minimumWidth = event.minimumWidth;
-                }
-                if (typeof event.minimumHeight === 'number' ||
-                    typeof event.minimumHeight === 'function') {
-                    this._minimumHeight = event.minimumHeight;
-                }
-                if (typeof event.maximumWidth === 'number' ||
-                    typeof event.maximumWidth === 'function') {
-                    this._maximumWidth = event.maximumWidth;
-                }
-                if (typeof event.maximumHeight === 'number' ||
-                    typeof event.maximumHeight === 'function') {
-                    this._maximumHeight = event.maximumHeight;
-                }
-            }), this.api.onDidSizeChange((event) => {
-                this._onDidChange.fire({
-                    height: event.height,
-                    width: event.width,
-                });
-            }));
-        }
         get priority() {
             return this._priority;
         }
@@ -4207,6 +4419,51 @@
         get isActive() {
             return this.api.isActive;
         }
+        constructor(id, component, api) {
+            super(id, component, api);
+            this._evaluatedMinimumWidth = 0;
+            this._evaluatedMaximumWidth = Number.MAX_SAFE_INTEGER;
+            this._evaluatedMinimumHeight = 0;
+            this._evaluatedMaximumHeight = Number.MAX_SAFE_INTEGER;
+            this._minimumWidth = 0;
+            this._minimumHeight = 0;
+            this._maximumWidth = Number.MAX_SAFE_INTEGER;
+            this._maximumHeight = Number.MAX_SAFE_INTEGER;
+            this._snap = false;
+            this._onDidChange = new Emitter();
+            this.onDidChange = this._onDidChange.event;
+            this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
+            this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
+                const { isVisible } = event;
+                const { accessor } = this._params;
+                accessor.setVisible(this, isVisible);
+            }), this.api.onActiveChange(() => {
+                const { accessor } = this._params;
+                accessor.setActive(this);
+            }), this.api.onDidConstraintsChangeInternal((event) => {
+                if (typeof event.minimumWidth === 'number' ||
+                    typeof event.minimumWidth === 'function') {
+                    this._minimumWidth = event.minimumWidth;
+                }
+                if (typeof event.minimumHeight === 'number' ||
+                    typeof event.minimumHeight === 'function') {
+                    this._minimumHeight = event.minimumHeight;
+                }
+                if (typeof event.maximumWidth === 'number' ||
+                    typeof event.maximumWidth === 'function') {
+                    this._maximumWidth = event.maximumWidth;
+                }
+                if (typeof event.maximumHeight === 'number' ||
+                    typeof event.maximumHeight === 'function') {
+                    this._maximumHeight = event.maximumHeight;
+                }
+            }), this.api.onDidSizeChange((event) => {
+                this._onDidChange.fire({
+                    height: event.height,
+                    width: event.width,
+                });
+            }));
+        }
         setVisible(isVisible) {
             this.api._onDidVisibilityChange.fire({ isVisible });
         }
@@ -4252,10 +4509,6 @@
     class GroupviewApi extends GridviewPanelApiImpl {
     }
     class GroupPanel extends GridviewPanel {
-        constructor(accessor, id, options) {
-            super(id, 'groupview_default', new GroupviewApi(id));
-            this._model = new Groupview(this.element, accessor, id, options, this);
-        }
         get panels() {
             return this._model.panels;
         }
@@ -4289,6 +4542,10 @@
         get header() {
             return this._model.header;
         }
+        constructor(accessor, id, options) {
+            super(id, 'groupview_default', new GroupviewApi(id));
+            this._model = new Groupview(this.element, accessor, id, options, this);
+        }
         initialize() {
             this._model.initialize();
         }
@@ -4309,17 +4566,17 @@
     }
 
     class DefaultGroupPanelView {
-        constructor(renderers) {
-            var _a;
-            this._content = renderers.content;
-            this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
-        }
         get content() {
             return this._content;
         }
         get tab() {
             return this._tab;
         }
+        constructor(renderers) {
+            var _a;
+            this._content = renderers.content;
+            this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
+        }
         init(params) {
             this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
             this.tab.init(params);
@@ -4341,25 +4598,60 @@
             if (tab && Object.keys(tab).length === 0) {
                 tab = undefined;
             }
-            return {
-                content: this.content.toJSON(),
-                tab,
-            };
+            return {
+                content: this.content.toJSON(),
+                tab,
+            };
+        }
+        dispose() {
+            this.content.dispose();
+            this.tab.dispose();
+        }
+    }
+
+    class DockviewComponent extends BaseGrid {
+        get orientation() {
+            return this.gridview.orientation;
+        }
+        get totalPanels() {
+            return this.panels.length;
+        }
+        get panels() {
+            return this.groups.flatMap((group) => group.panels);
+        }
+        get deserializer() {
+            return this._deserializer;
+        }
+        set deserializer(value) {
+            this._deserializer = value;
+        }
+        get options() {
+            return this._options;
+        }
+        get activePanel() {
+            const activeGroup = this.activeGroup;
+            if (!activeGroup) {
+                return undefined;
+            }
+            return activeGroup.activePanel;
         }
-        dispose() {
-            this.content.dispose();
-            this.tab.dispose();
+        set tabHeight(height) {
+            this.options.tabHeight = height;
+            this._groups.forEach((value) => {
+                value.value.model.header.height = height;
+            });
+        }
+        get tabHeight() {
+            return this.options.tabHeight;
         }
-    }
-
-    const nextGroupId = sequentialNumberGenerator();
-    class DockviewComponent extends BaseGrid {
         constructor(element, options) {
             super(element, {
                 proportionalLayout: true,
                 orientation: options.orientation || exports.Orientation.HORIZONTAL,
                 styles: options.styles,
             });
+            this.nextGroupId = sequentialNumberGenerator();
+            this.watermark = null;
             this._onDidDrop = new Emitter();
             this.onDidDrop = this._onDidDrop.event;
             this._onDidRemovePanel = new Emitter();
@@ -4370,7 +4662,10 @@
             this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
             this._onDidActivePanelChange = new Emitter();
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-            this.addDisposables(this._onDidDrop, exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+            this.element.classList.add('dv-dockview');
+            this.addDisposables(this._onDidDrop, exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+                this.updateWatermark();
+            }), exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
                 this._bufferOnDidLayoutChange.fire();
             }));
             this._options = options;
@@ -4390,38 +4685,72 @@
                 !this.options.watermarkFrameworkComponent) {
                 this.options.watermarkComponent = Watermark;
             }
+            const dropTarget = new Droptarget(this.element, {
+                canDisplayOverlay: (event, position) => {
+                    const data = getPanelData();
+                    if (data) {
+                        if (data.viewId !== this.id) {
+                            return false;
+                        }
+                        return true;
+                    }
+                    if (this.options.showDndOverlay) {
+                        return this.options.showDndOverlay({
+                            nativeEvent: event,
+                            position: position,
+                            target: exports.DockviewDropTargets.Edge,
+                            getData: getPanelData,
+                        });
+                    }
+                    return false;
+                },
+                acceptedTargetZones: ['top', 'bottom', 'left', 'right'],
+                overlayModel: {
+                    activationSize: { type: 'pixels', value: 10 },
+                    size: { type: 'pixels', value: 20 },
+                },
+            });
+            this.addDisposables(dropTarget, dropTarget.onDrop((event) => {
+                const data = getPanelData();
+                if (data) {
+                    this.moveGroupOrPanel(this.orthogonalize(event.position), data.groupId, data.panelId || undefined, 'center');
+                }
+                else {
+                    this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: null, getData: getPanelData }));
+                }
+            }));
             this._api = new DockviewApi(this);
+            this.updateWatermark();
         }
-        get totalPanels() {
-            return this.panels.length;
-        }
-        get panels() {
-            return this.groups.flatMap((group) => group.panels);
-        }
-        get deserializer() {
-            return this._deserializer;
-        }
-        set deserializer(value) {
-            this._deserializer = value;
-        }
-        get options() {
-            return this._options;
-        }
-        get activePanel() {
-            const activeGroup = this.activeGroup;
-            if (!activeGroup) {
-                return undefined;
+        orthogonalize(position) {
+            switch (position) {
+                case 'top':
+                case 'bottom':
+                    if (this.gridview.orientation === exports.Orientation.HORIZONTAL) {
+                        // we need to add to a vertical splitview but the current root is a horizontal splitview.
+                        // insert a vertical splitview at the root level and add the existing view as a child
+                        this.gridview.insertOrthogonalSplitviewAtRoot();
+                    }
+                    break;
+                case 'left':
+                case 'right':
+                    if (this.gridview.orientation === exports.Orientation.VERTICAL) {
+                        // we need to add to a horizontal splitview but the current root is a vertical splitview.
+                        // insert a horiziontal splitview at the root level and add the existing view as a child
+                        this.gridview.insertOrthogonalSplitviewAtRoot();
+                    }
+                    break;
+            }
+            switch (position) {
+                case 'top':
+                case 'left':
+                    return this.createGroupAtLocation([0]); // insert into first position
+                case 'bottom':
+                case 'right':
+                    return this.createGroupAtLocation([this.gridview.length]); // insert into last position
+                default:
+                    throw new Error(`unsupported position ${position}`);
             }
-            return activeGroup.activePanel;
-        }
-        set tabHeight(height) {
-            this.options.tabHeight = height;
-            this._groups.forEach((value) => {
-                value.value.model.header.height = height;
-            });
-        }
-        get tabHeight() {
-            return this.options.tabHeight;
         }
         updateOptions(options) {
             const hasOrientationChanged = typeof options.orientation === 'string' &&
@@ -4471,8 +4800,7 @@
                 options.group = this.activeGroup;
             }
             if (options.includePanel && options.group) {
-                if (options.group.activePanel !==
-                    options.group.panels[0]) {
+                if (options.group.activePanel !== options.group.panels[0]) {
                     options.group.model.moveToPrevious({ suppressRoll: true });
                     return;
                 }
@@ -4505,14 +4833,14 @@
         fromJSON(data) {
             this.clear();
             if (!this.deserializer) {
-                throw new Error('invalid deserializer');
+                throw new Error('no deserializer provided');
             }
             const { grid, panels, options, activeGroup } = data;
             if (typeof (options === null || options === void 0 ? void 0 : options.tabHeight) === 'number') {
                 this.tabHeight = options.tabHeight;
             }
-            if (!this.deserializer) {
-                throw new Error('no deserializer provided');
+            if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
+                throw new Error('root must be of type branch');
             }
             this.gridview.deserialize(grid, {
                 fromJSON: (node) => {
@@ -4525,19 +4853,20 @@
                     this._onDidAddGroup.fire(group);
                     for (const child of views) {
                         const panel = this.deserializer.fromJSON(panels[child], group);
-                        const isActive = typeof activeView === 'string' && activeView === panel.id;
+                        const isActive = typeof activeView === 'string' &&
+                            activeView === panel.id;
                         group.model.openPanel(panel, {
                             skipSetPanelActive: !isActive,
-                            skipSetGroupActive: true
+                            skipSetGroupActive: true,
                         });
                     }
                     if (!group.activePanel && group.panels.length > 0) {
                         group.model.openPanel(group.panels[group.panels.length - 1], {
-                            skipSetGroupActive: true
+                            skipSetGroupActive: true,
                         });
                     }
                     return group;
-                }
+                },
             });
             if (typeof activeGroup === 'string') {
                 const panel = this.getPanel(activeGroup);
@@ -4576,12 +4905,31 @@
                 throw new Error(`panel with id ${options.id} already exists`);
             }
             let referenceGroup;
-            if ((_a = options.position) === null || _a === void 0 ? void 0 : _a.referencePanel) {
-                const referencePanel = this.getGroupPanel(options.position.referencePanel);
-                if (!referencePanel) {
-                    throw new Error(`referencePanel ${options.position.referencePanel} does not exist`);
+            if (options.position) {
+                if (isPanelOptionsWithPanel(options.position)) {
+                    const referencePanel = typeof options.position.referencePanel === 'string'
+                        ? this.getGroupPanel(options.position.referencePanel)
+                        : options.position.referencePanel;
+                    if (!referencePanel) {
+                        throw new Error(`referencePanel ${options.position.referencePanel} does not exist`);
+                    }
+                    referenceGroup = this.findGroup(referencePanel);
+                }
+                else if (isPanelOptionsWithGroup(options.position)) {
+                    referenceGroup =
+                        typeof options.position.referenceGroup === 'string'
+                            ? (_a = this._groups.get(options.position.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
+                            : options.position.referenceGroup;
+                    if (!referenceGroup) {
+                        throw new Error(`referencePanel ${options.position.referenceGroup} does not exist`);
+                    }
+                }
+                else {
+                    const group = this.orthogonalize(directionToPosition(options.position.direction));
+                    const panel = this.createPanel(options, group);
+                    group.model.openPanel(panel);
+                    return panel;
                 }
-                referenceGroup = this.findGroup(referencePanel);
             }
             else {
                 referenceGroup = this.activeGroup;
@@ -4589,7 +4937,7 @@
             let panel;
             if (referenceGroup) {
                 const target = toTarget(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
-                if (target === exports.Position.Center) {
+                if (target === 'center') {
                     panel = this.createPanel(options, referenceGroup);
                     referenceGroup.model.openPanel(panel);
                 }
@@ -4618,10 +4966,7 @@
             }
             group.model.removePanel(panel);
             panel.dispose();
-            const retainGroupForWatermark = this.size === 1;
-            if (!retainGroupForWatermark &&
-                group.size === 0 &&
-                options.removeEmptyGroup) {
+            if (group.size === 0 && options.removeEmptyGroup) {
                 this.removeGroup(group);
             }
         }
@@ -4633,24 +4978,67 @@
                 ? { 'watermark-name': this.options.watermarkFrameworkComponent }
                 : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
         }
-        addEmptyGroup(options) {
+        updateWatermark() {
+            if (this.groups.length === 0) {
+                if (!this.watermark) {
+                    this.watermark = this.createWatermarkComponent();
+                    this.watermark.init({
+                        containerApi: new DockviewApi(this),
+                        params: {},
+                        title: '',
+                        api: null,
+                    });
+                    const watermarkContainer = document.createElement('div');
+                    watermarkContainer.className = 'dv-watermark-container';
+                    watermarkContainer.appendChild(this.watermark.element);
+                    this.element.appendChild(watermarkContainer);
+                }
+            }
+            else if (this.watermark) {
+                this.watermark.element.parentElement.remove();
+                this.watermark.dispose();
+                this.watermark = null;
+            }
+        }
+        addGroup(options) {
+            var _a;
             const group = this.createGroup();
             if (options) {
-                const referencePanel = this.panels.find((panel) => panel.id === options.referencePanel);
-                if (!referencePanel) {
-                    throw new Error(`reference panel ${options.referencePanel} does not exist`);
+                let referenceGroup;
+                if (isGroupOptionsWithPanel(options)) {
+                    const referencePanel = typeof options.referencePanel === 'string'
+                        ? this.panels.find((panel) => panel.id === options.referencePanel)
+                        : options.referencePanel;
+                    if (!referencePanel) {
+                        throw new Error(`reference panel ${options.referencePanel} does not exist`);
+                    }
+                    referenceGroup = this.findGroup(referencePanel);
+                    if (!referenceGroup) {
+                        throw new Error(`reference group for reference panel ${options.referencePanel} does not exist`);
+                    }
                 }
-                const referenceGroup = this.findGroup(referencePanel);
-                if (!referenceGroup) {
-                    throw new Error(`reference group for reference panel ${options.referencePanel} does not exist`);
+                else if (isGroupOptionsWithGroup(options)) {
+                    referenceGroup =
+                        typeof options.referenceGroup === 'string'
+                            ? (_a = this._groups.get(options.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
+                            : options.referenceGroup;
+                    if (!referenceGroup) {
+                        throw new Error(`reference group ${options.referenceGroup} does not exist`);
+                    }
+                }
+                else {
+                    const group = this.orthogonalize(directionToPosition(options.direction));
+                    return group;
                 }
                 const target = toTarget(options.direction || 'within');
                 const location = getGridLocation(referenceGroup.element);
                 const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
                 this.doAddGroup(group, relativeLocation);
+                return group;
             }
             else {
                 this.doAddGroup(group);
+                return group;
             }
         }
         removeGroup(group, skipActive = false) {
@@ -4668,7 +5056,13 @@
             const sourceGroup = groupId
                 ? (_a = this._groups.get(groupId)) === null || _a === void 0 ? void 0 : _a.value
                 : undefined;
-            if (!target || target === exports.Position.Center) {
+            if (itemId === undefined) {
+                if (sourceGroup) {
+                    this.moveGroup(sourceGroup, referenceGroup, target);
+                }
+                return;
+            }
+            if (!target || target === 'center') {
                 const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
                     this.panels.find((panel) => panel.id === itemId);
                 if (!groupItem) {
@@ -4716,6 +5110,28 @@
                 }
             }
         }
+        moveGroup(sourceGroup, referenceGroup, target) {
+            if (sourceGroup) {
+                if (!target || target === 'center') {
+                    const activePanel = sourceGroup.activePanel;
+                    const panels = [...sourceGroup.panels].map((p) => sourceGroup.model.removePanel(p.id));
+                    if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
+                        this.doRemoveGroup(sourceGroup);
+                    }
+                    for (const panel of panels) {
+                        referenceGroup.model.openPanel(panel, {
+                            skipSetPanelActive: panel !== activePanel,
+                        });
+                    }
+                }
+                else {
+                    this.gridview.removeView(getGridLocation(sourceGroup.element));
+                    const referenceLocation = getGridLocation(referenceGroup.element);
+                    const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+                    this.gridview.addView(sourceGroup, exports.Sizing.Distribute, dropLocation);
+                }
+            }
+        }
         doSetGroupActive(group, skipFocus) {
             var _a, _b;
             const isGroupAlreadyFocused = this._activeGroup === group;
@@ -4737,9 +5153,9 @@
                 id = undefined;
             }
             if (!id) {
-                id = nextGroupId.next();
+                id = this.nextGroupId.next();
                 while (this._groups.has(id)) {
-                    id = nextGroupId.next();
+                    id = this.nextGroupId.next();
                 }
             }
             const view = new GroupPanel(this, id, options);
@@ -4772,7 +5188,7 @@
                 content: this.createContentComponent(options.id, options.component),
                 tab: this.createTabComponent(options.id, options.tabComponent || this.options.defaultTabComponent),
             });
-            const panel = new DockviewGroupPanel(options.id, this, this._api, group);
+            const panel = new DockviewPanel(options.id, this, this._api, group);
             panel.init({
                 view,
                 title: options.title || options.id,
@@ -4807,6 +5223,21 @@
     }
 
     class GridviewComponent extends BaseGrid {
+        get orientation() {
+            return this.gridview.orientation;
+        }
+        set orientation(value) {
+            this.gridview.orientation = value;
+        }
+        get options() {
+            return this._options;
+        }
+        get deserializer() {
+            return this._deserializer;
+        }
+        set deserializer(value) {
+            this._deserializer = value;
+        }
         constructor(element, options) {
             super(element, {
                 proportionalLayout: options.proportionalLayout,
@@ -4823,21 +5254,6 @@
                 this.options.frameworkComponents = {};
             }
         }
-        get orientation() {
-            return this.gridview.orientation;
-        }
-        set orientation(value) {
-            this.gridview.orientation = value;
-        }
-        get options() {
-            return this._options;
-        }
-        get deserializer() {
-            return this._deserializer;
-        }
-        set deserializer(value) {
-            this._deserializer = value;
-        }
         updateOptions(options) {
             const hasOrientationChanged = typeof options.orientation === 'string' &&
                 this.gridview.orientation !== options.orientation;
@@ -4935,7 +5351,7 @@
                 throw new Error(`reference group ${options.reference} does not exist`);
             }
             const target = toTarget(options.direction);
-            if (target === exports.Position.Center) {
+            if (target === 'center') {
                 throw new Error(`${target} not supported as an option`);
             }
             else {
@@ -4953,7 +5369,7 @@
                     throw new Error(`reference group ${options.position.referencePanel} does not exist`);
                 }
                 const target = toTarget(options.position.direction);
-                if (target === exports.Position.Center) {
+                if (target === 'center') {
                     throw new Error(`${target} not supported as an option`);
                 }
                 else {
@@ -5042,29 +5458,6 @@
      * A high-level implementation of splitview that works using 'panels'
      */
     class SplitviewComponent extends CompositeDisposable {
-        constructor(element, options) {
-            super();
-            this.element = element;
-            this._disposable = new MutableDisposable();
-            this._panels = new Map();
-            this._onDidLayoutfromJSON = new Emitter();
-            this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
-            this._onDidAddView = new Emitter();
-            this.onDidAddView = this._onDidAddView.event;
-            this._onDidRemoveView = new Emitter();
-            this.onDidRemoveView = this._onDidRemoveView.event;
-            this._onDidLayoutChange = new Emitter();
-            this.onDidLayoutChange = this._onDidLayoutChange.event;
-            this._options = options;
-            if (!options.components) {
-                options.components = {};
-            }
-            if (!options.frameworkComponents) {
-                options.frameworkComponents = {};
-            }
-            this.splitview = new Splitview(this.element, options);
-            this.addDisposables(this._disposable, this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
-        }
         get panels() {
             return this.splitview.getViews();
         }
@@ -5102,6 +5495,29 @@
                 ? this.splitview.size
                 : this.splitview.orthogonalSize;
         }
+        constructor(element, options) {
+            super();
+            this.element = element;
+            this._disposable = new MutableDisposable();
+            this._panels = new Map();
+            this._onDidLayoutfromJSON = new Emitter();
+            this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
+            this._onDidAddView = new Emitter();
+            this.onDidAddView = this._onDidAddView.event;
+            this._onDidRemoveView = new Emitter();
+            this.onDidRemoveView = this._onDidRemoveView.event;
+            this._onDidLayoutChange = new Emitter();
+            this.onDidLayoutChange = this._onDidLayoutChange.event;
+            this._options = options;
+            if (!options.components) {
+                options.components = {};
+            }
+            if (!options.frameworkComponents) {
+                options.frameworkComponents = {};
+            }
+            this.splitview = new Splitview(this.element, options);
+            this.addDisposables(this._disposable, this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
+        }
         updateOptions(options) {
             const hasOrientationChanged = typeof options.orientation === 'string' &&
                 this.options.orientation !== options.orientation;
@@ -5303,38 +5719,85 @@
         setConstraints(value) {
             this._onDidConstraintsChangeInternal.fire(value);
         }
-        setSize(event) {
-            this._onDidSizeChange.fire(event);
+        setSize(event) {
+            this._onDidSizeChange.fire(event);
+        }
+    }
+
+    class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
+        set pane(pane) {
+            this._pane = pane;
+        }
+        constructor(id) {
+            super(id);
+            this._onDidExpansionChange = new Emitter({
+                replay: true,
+            });
+            this.onDidExpansionChange = this._onDidExpansionChange.event;
+            this._onMouseEnter = new Emitter({});
+            this.onMouseEnter = this._onMouseEnter.event;
+            this._onMouseLeave = new Emitter({});
+            this.onMouseLeave = this._onMouseLeave.event;
+            this.addDisposables(this._onDidExpansionChange, this._onMouseEnter, this._onMouseLeave);
+        }
+        setExpanded(isExpanded) {
+            var _a;
+            (_a = this._pane) === null || _a === void 0 ? void 0 : _a.setExpanded(isExpanded);
+        }
+        get isExpanded() {
+            var _a;
+            return !!((_a = this._pane) === null || _a === void 0 ? void 0 : _a.isExpanded());
+        }
+    }
+
+    class PaneviewPanel extends BasePanelView {
+        set orientation(value) {
+            this._orientation = value;
+        }
+        get orientation() {
+            return this._orientation;
+        }
+        get minimumSize() {
+            const headerSize = this.headerSize;
+            const expanded = this.isExpanded();
+            const minimumBodySize = expanded ? this._minimumBodySize : 0;
+            return headerSize + minimumBodySize;
+        }
+        get maximumSize() {
+            const headerSize = this.headerSize;
+            const expanded = this.isExpanded();
+            const maximumBodySize = expanded ? this._maximumBodySize : 0;
+            return headerSize + maximumBodySize;
+        }
+        get size() {
+            return this._size;
+        }
+        get orthogonalSize() {
+            return this._orthogonalSize;
+        }
+        set orthogonalSize(size) {
+            this._orthogonalSize = size;
+        }
+        get minimumBodySize() {
+            return this._minimumBodySize;
+        }
+        set minimumBodySize(value) {
+            this._minimumBodySize = typeof value === 'number' ? value : 0;
         }
-    }
-
-    class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
-        constructor(id) {
-            super(id);
-            this._onDidExpansionChange = new Emitter({
-                replay: true,
-            });
-            this.onDidExpansionChange = this._onDidExpansionChange.event;
-            this._onMouseEnter = new Emitter({});
-            this.onMouseEnter = this._onMouseEnter.event;
-            this._onMouseLeave = new Emitter({});
-            this.onMouseLeave = this._onMouseLeave.event;
-            this.addDisposables(this._onDidExpansionChange, this._onMouseEnter, this._onMouseLeave);
+        get maximumBodySize() {
+            return this._maximumBodySize;
         }
-        set pane(pane) {
-            this._pane = pane;
+        set maximumBodySize(value) {
+            this._maximumBodySize =
+                typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
         }
-        setExpanded(isExpanded) {
-            var _a;
-            (_a = this._pane) === null || _a === void 0 ? void 0 : _a.setExpanded(isExpanded);
+        get headerVisible() {
+            return this._headerVisible;
         }
-        get isExpanded() {
-            var _a;
-            return !!((_a = this._pane) === null || _a === void 0 ? void 0 : _a.isExpanded());
+        set headerVisible(value) {
+            this._headerVisible = value;
+            this.header.style.display = value ? '' : 'none';
         }
-    }
-
-    class PaneviewPanel extends BasePanelView {
         constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
             super(id, component, new PaneviewPanelApiImpl(id));
             this.headerComponent = headerComponent;
@@ -5350,6 +5813,7 @@
             this._isExpanded = false;
             this.expandedSize = 0;
             this.api.pane = this; // TODO cannot use 'this' before 'super'
+            this.api.initialize(this);
             this._isExpanded = isExpanded;
             this._headerVisible = isHeaderVisible;
             this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
@@ -5379,53 +5843,6 @@
             }));
             this.renderOnce();
         }
-        set orientation(value) {
-            this._orientation = value;
-        }
-        get orientation() {
-            return this._orientation;
-        }
-        get minimumSize() {
-            const headerSize = this.headerSize;
-            const expanded = this.isExpanded();
-            const minimumBodySize = expanded ? this._minimumBodySize : 0;
-            return headerSize + minimumBodySize;
-        }
-        get maximumSize() {
-            const headerSize = this.headerSize;
-            const expanded = this.isExpanded();
-            const maximumBodySize = expanded ? this._maximumBodySize : 0;
-            return headerSize + maximumBodySize;
-        }
-        get size() {
-            return this._size;
-        }
-        get orthogonalSize() {
-            return this._orthogonalSize;
-        }
-        set orthogonalSize(size) {
-            this._orthogonalSize = size;
-        }
-        get minimumBodySize() {
-            return this._minimumBodySize;
-        }
-        set minimumBodySize(value) {
-            this._minimumBodySize = typeof value === 'number' ? value : 0;
-        }
-        get maximumBodySize() {
-            return this._maximumBodySize;
-        }
-        set maximumBodySize(value) {
-            this._maximumBodySize =
-                typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
-        }
-        get headerVisible() {
-            return this._headerVisible;
-        }
-        set headerVisible(value) {
-            this._headerVisible = value;
-            this.header.style.display = value ? '' : 'none';
-        }
         setVisible(isVisible) {
             this.api._onDidVisibilityChange.fire({ isVisible });
         }
@@ -5549,7 +5966,10 @@
                 }
             })(this.header);
             this.target = new Droptarget(this.element, {
-                validOverlays: 'vertical',
+                acceptedTargetZones: ['top', 'bottom'],
+                overlayModel: {
+                    activationSize: { type: 'percentage', value: 50 },
+                },
                 canDisplayOverlay: (event) => {
                     const data = getPaneData();
                     if (data) {
@@ -5592,12 +6012,10 @@
             const allPanels = containerApi.panels;
             const fromIndex = allPanels.indexOf(existingPanel);
             let toIndex = containerApi.panels.indexOf(this);
-            if (event.position === exports.Position.Left ||
-                event.position === exports.Position.Top) {
+            if (event.position === 'left' || event.position === 'top') {
                 toIndex = Math.max(0, toIndex - 1);
             }
-            if (event.position === exports.Position.Right ||
-                event.position === exports.Position.Bottom) {
+            if (event.position === 'right' || event.position === 'bottom') {
                 if (fromIndex > toIndex) {
                     toIndex++;
                 }
@@ -5608,6 +6026,9 @@
     }
 
     class DefaultHeader extends CompositeDisposable {
+        get element() {
+            return this._element;
+        }
         constructor() {
             super();
             this._expandedIcon = createExpandMoreButton();
@@ -5626,9 +6047,6 @@
                 (_a = this.apiRef.api) === null || _a === void 0 ? void 0 : _a.setExpanded(!this.apiRef.api.isExpanded);
             }));
         }
-        get element() {
-            return this._element;
-        }
         init(params) {
             this.apiRef.api = params.api;
             this._content.textContent = params.title;
@@ -5681,36 +6099,6 @@
         }
     }
     class PaneviewComponent extends CompositeDisposable {
-        constructor(element, options) {
-            super();
-            this.element = element;
-            this._id = nextLayoutId.next();
-            this._disposable = new MutableDisposable();
-            this._viewDisposables = new Map();
-            this._onDidLayoutfromJSON = new Emitter();
-            this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
-            this._onDidLayoutChange = new Emitter();
-            this.onDidLayoutChange = this._onDidLayoutChange.event;
-            this._onDidDrop = new Emitter();
-            this.onDidDrop = this._onDidDrop.event;
-            this._onDidAddView = new Emitter();
-            this.onDidAddView = this._onDidAddView.event;
-            this._onDidRemoveView = new Emitter();
-            this.onDidRemoveView = this._onDidRemoveView.event;
-            this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
-            this._options = options;
-            if (!options.components) {
-                options.components = {};
-            }
-            if (!options.frameworkComponents) {
-                options.frameworkComponents = {};
-            }
-            this.paneview = new Paneview(this.element, {
-                // only allow paneview in the vertical orientation for now
-                orientation: exports.Orientation.VERTICAL,
-            });
-            this.addDisposables(this._disposable);
-        }
         get id() {
             return this._id;
         }
@@ -5745,6 +6133,36 @@
         get options() {
             return this._options;
         }
+        constructor(element, options) {
+            super();
+            this.element = element;
+            this._id = nextLayoutId.next();
+            this._disposable = new MutableDisposable();
+            this._viewDisposables = new Map();
+            this._onDidLayoutfromJSON = new Emitter();
+            this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
+            this._onDidLayoutChange = new Emitter();
+            this.onDidLayoutChange = this._onDidLayoutChange.event;
+            this._onDidDrop = new Emitter();
+            this.onDidDrop = this._onDidDrop.event;
+            this._onDidAddView = new Emitter();
+            this.onDidAddView = this._onDidAddView.event;
+            this._onDidRemoveView = new Emitter();
+            this.onDidRemoveView = this._onDidRemoveView.event;
+            this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
+            this._options = options;
+            if (!options.components) {
+                options.components = {};
+            }
+            if (!options.frameworkComponents) {
+                options.frameworkComponents = {};
+            }
+            this.paneview = new Paneview(this.element, {
+                // only allow paneview in the vertical orientation for now
+                orientation: exports.Orientation.VERTICAL,
+            });
+            this.addDisposables(this._disposable);
+        }
         focus() {
             //
         }
@@ -5930,36 +6348,6 @@
     }
 
     class SplitviewPanel extends BasePanelView {
-        constructor(id, componentName) {
-            super(id, componentName, new SplitviewPanelApiImpl(id));
-            this._evaluatedMinimumSize = 0;
-            this._evaluatedMaximumSize = Number.POSITIVE_INFINITY;
-            this._minimumSize = 0;
-            this._maximumSize = Number.POSITIVE_INFINITY;
-            this._snap = false;
-            this._onDidChange = new Emitter();
-            this.onDidChange = this._onDidChange.event;
-            this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
-                const { isVisible } = event;
-                const { accessor } = this._params;
-                accessor.setVisible(this, isVisible);
-            }), this.api.onActiveChange(() => {
-                const { accessor } = this._params;
-                accessor.setActive(this);
-            }), this.api.onDidConstraintsChangeInternal((event) => {
-                if (typeof event.minimumSize === 'number' ||
-                    typeof event.minimumSize === 'function') {
-                    this._minimumSize = event.minimumSize;
-                }
-                if (typeof event.maximumSize === 'number' ||
-                    typeof event.maximumSize === 'function') {
-                    this._maximumSize = event.maximumSize;
-                }
-                this.updateConstraints();
-            }), this.api.onDidSizeChange((event) => {
-                this._onDidChange.fire({ size: event.size });
-            }));
-        }
         get priority() {
             return this._priority;
         }
@@ -5992,6 +6380,37 @@
         get snap() {
             return this._snap;
         }
+        constructor(id, componentName) {
+            super(id, componentName, new SplitviewPanelApiImpl(id));
+            this._evaluatedMinimumSize = 0;
+            this._evaluatedMaximumSize = Number.POSITIVE_INFINITY;
+            this._minimumSize = 0;
+            this._maximumSize = Number.POSITIVE_INFINITY;
+            this._snap = false;
+            this._onDidChange = new Emitter();
+            this.onDidChange = this._onDidChange.event;
+            this.api.initialize(this);
+            this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
+                const { isVisible } = event;
+                const { accessor } = this._params;
+                accessor.setVisible(this, isVisible);
+            }), this.api.onActiveChange(() => {
+                const { accessor } = this._params;
+                accessor.setActive(this);
+            }), this.api.onDidConstraintsChangeInternal((event) => {
+                if (typeof event.minimumSize === 'number' ||
+                    typeof event.minimumSize === 'function') {
+                    this._minimumSize = event.minimumSize;
+                }
+                if (typeof event.maximumSize === 'number' ||
+                    typeof event.maximumSize === 'function') {
+                    this._maximumSize = event.maximumSize;
+                }
+                this.updateConstraints();
+            }), this.api.onDidSizeChange((event) => {
+                this._onDidChange.fire({ size: event.size });
+            }));
+        }
         setVisible(isVisible) {
             this.api._onDidVisibilityChange.fire({ isVisible });
         }
@@ -6157,6 +6576,9 @@
     }
 
     class ReactPanelContentPart {
+        get element() {
+            return this._element;
+        }
         constructor(id, component, reactPortalStore) {
             this.id = id;
             this.component = component;
@@ -6168,9 +6590,6 @@
             this._element = document.createElement('div');
             this._element.className = 'dockview-react-part';
         }
-        get element() {
-            return this._element;
-        }
         focus() {
             // TODO
         }
@@ -6205,6 +6624,9 @@
     }
 
     class ReactPanelHeaderPart {
+        get element() {
+            return this._element;
+        }
         constructor(id, component, reactPortalStore) {
             this.id = id;
             this.component = component;
@@ -6212,9 +6634,6 @@
             this._element = document.createElement('div');
             this._element.className = 'dockview-react-part';
         }
-        get element() {
-            return this._element;
-        }
         focus() {
             //noop
         }
@@ -6273,7 +6692,7 @@
                 content: createComponent(viewData.content.id, viewData.content.id, this.layout.options.components, this.layout.options.frameworkComponents, (_d = this.layout.options.frameworkComponentFactory) === null || _d === void 0 ? void 0 : _d.content),
                 tab,
             });
-            const panel = new DockviewGroupPanel(panelId, this.layout, new DockviewApi(this.layout), group);
+            const panel = new DockviewPanel(panelId, this.layout, new DockviewApi(this.layout), group);
             panel.init({
                 view,
                 title,
@@ -6284,6 +6703,9 @@
     }
 
     class ReactWatermarkPart {
+        get element() {
+            return this._element;
+        }
         constructor(id, component, reactPortalStore) {
             this.id = id;
             this.component = component;
@@ -6294,9 +6716,6 @@
             this._element = document.createElement('div');
             this._element.className = 'dockview-react-part';
         }
-        get element() {
-            return this._element;
-        }
         init(parameters) {
             this.parameters = parameters;
             this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
@@ -6339,14 +6758,6 @@
     }
 
     class ReactGroupControlsRendererPart {
-        constructor(component, reactPortalStore, _group) {
-            this.component = component;
-            this.reactPortalStore = reactPortalStore;
-            this._group = _group;
-            this.mutableDisposable = new MutableDisposable();
-            this._element = document.createElement('div');
-            this._element.className = 'dockview-react-part';
-        }
         get element() {
             return this._element;
         }
@@ -6356,6 +6767,14 @@
         get group() {
             return this._group;
         }
+        constructor(component, reactPortalStore, _group) {
+            this.component = component;
+            this.reactPortalStore = reactPortalStore;
+            this._group = _group;
+            this.mutableDisposable = new MutableDisposable();
+            this._element = document.createElement('div');
+            this._element.className = 'dockview-react-part';
+        }
         focus() {
             // TODO
         }
@@ -6470,6 +6889,7 @@
                     : undefined,
                 showDndOverlay: props.showDndOverlay,
                 createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
+                singleTabMode: props.singleTabMode,
             });
             (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
             dockview.deserializer = new ReactPanelDeserialzier(dockview);
@@ -6682,7 +7102,7 @@
 
     class ReactGridPanelView extends GridviewPanel {
         constructor(id, component, reactComponent, reactPortalStore) {
-            super(id, component);
+            super(id, component, new GridviewPanelApiImpl(id));
             this.reactComponent = reactComponent;
             this.reactPortalStore = reactPortalStore;
         }
@@ -6761,6 +7181,9 @@
     GridviewReact.displayName = 'GridviewComponent';
 
     class PanePanelSection {
+        get element() {
+            return this._element;
+        }
         constructor(id, component, reactPortalStore) {
             this.id = id;
             this.component = component;
@@ -6769,9 +7192,6 @@
             this._element.style.height = '100%';
             this._element.style.width = '100%';
         }
-        get element() {
-            return this._element;
-        }
         init(parameters) {
             this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
                 params: parameters.params,
@@ -6919,6 +7339,7 @@
     exports.SplitviewPanel = SplitviewPanel;
     exports.SplitviewReact = SplitviewReact;
     exports.Tab = Tab;
+    exports.directionToPosition = directionToPosition;
     exports.getDirectionOrientation = getDirectionOrientation;
     exports.getGridLocation = getGridLocation;
     exports.getLocationOrientation = getLocationOrientation;
@@ -6927,11 +7348,14 @@
     exports.getRelativeLocation = getRelativeLocation;
     exports.indexInParent = indexInParent;
     exports.isGridBranchNode = isGridBranchNode;
+    exports.isGroupOptionsWithGroup = isGroupOptionsWithGroup;
+    exports.isGroupOptionsWithPanel = isGroupOptionsWithPanel;
+    exports.isPanelOptionsWithGroup = isPanelOptionsWithGroup;
+    exports.isPanelOptionsWithPanel = isPanelOptionsWithPanel;
     exports.isReactElement = isReactElement;
     exports.orthogonal = orthogonal;
+    exports.positionToDirection = positionToDirection;
     exports.toTarget = toTarget;
     exports.usePortalsLifecycle = usePortalsLifecycle;
 
-    Object.defineProperty(exports, '__esModule', { value: true });
-
 }));