dockview 1.7.5 → 1.8.0

package/dist/dockview.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.7.5
+ * @version 1.8.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -304,6 +304,31 @@ class MutableDisposable {
     }
 }
 
+function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
+    const Component = typeof componentName === 'string'
+        ? components[componentName]
+        : undefined;
+    const FrameworkComponent = typeof componentName === 'string'
+        ? frameworkComponents[componentName]
+        : undefined;
+    if (Component && FrameworkComponent) {
+        throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
+    }
+    if (FrameworkComponent) {
+        if (!createFrameworkComponent) {
+            throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
+        }
+        return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
+    }
+    if (!Component) {
+        if (fallback) {
+            return fallback();
+        }
+        throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
+    }
+    return new Component(id, componentName);
+}
+
 function watchElementResize(element, cb) {
     const observer = new ResizeObserver((entires) => {
         /**
@@ -417,31 +442,16 @@ class FocusTracker extends CompositeDisposable {
     refreshState() {
         this._refreshStateHandler();
     }
-}
-
-function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
-    const Component = typeof componentName === 'string'
-        ? components[componentName]
-        : undefined;
-    const FrameworkComponent = typeof componentName === 'string'
-        ? frameworkComponents[componentName]
-        : undefined;
-    if (Component && FrameworkComponent) {
-        throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
-    }
-    if (FrameworkComponent) {
-        if (!createFrameworkComponent) {
-            throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
-        }
-        return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
-    }
-    if (!Component) {
-        if (fallback) {
-            return fallback();
-        }
-        throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
-    }
-    return new Component(id, componentName);
+}
+// quasi: apparently, but not really; seemingly
+const QUASI_PREVENT_DEFAULT_KEY = 'dv-quasiPreventDefault';
+// mark an event directly for other listeners to check
+function quasiPreventDefault(event) {
+    event[QUASI_PREVENT_DEFAULT_KEY] = true;
+}
+// check if this event has been marked
+function quasiDefaultPrevented(event) {
+    return event[QUASI_PREVENT_DEFAULT_KEY];
 }
 
 function tail(arr) {
@@ -492,6 +502,14 @@ function firstIndex(array, fn) {
         }
     }
     return -1;
+}
+function remove(array, value) {
+    const index = array.findIndex((t) => t === value);
+    if (index > -1) {
+        array.splice(index, 1);
+        return true;
+    }
+    return false;
 }
 
 const clamp = (value, min, max) => {
@@ -921,7 +939,7 @@ class Splitview {
             //add sash
             const sash = document.createElement('div');
             sash.className = 'sash';
-            const onStart = (event) => {
+            const onPointerStart = (event) => {
                 for (const item of this.viewItems) {
                     item.enabled = false;
                 }
@@ -980,11 +998,10 @@ class Splitview {
                         size: snappedViewItem.size,
                     };
                 }
-                //
-                const mousemove = (mousemoveEvent) => {
+                const onPointerMove = (event) => {
                     const current = this._orientation === Orientation.HORIZONTAL
-                        ? mousemoveEvent.clientX
-                        : mousemoveEvent.clientY;
+                        ? event.clientX
+                        : event.clientY;
                     const delta = current - start;
                     this.resize(sashIndex, delta, sizes, undefined, undefined, minDelta, maxDelta, snapBefore, snapAfter);
                     this.distributeEmptySpace();
@@ -998,18 +1015,20 @@ class Splitview {
                         iframe.style.pointerEvents = 'auto';
                     }
                     this.saveProportions();
-                    document.removeEventListener('mousemove', mousemove);
-                    document.removeEventListener('mouseup', end);
+                    document.removeEventListener('pointermove', onPointerMove);
+                    document.removeEventListener('pointerup', end);
+                    document.removeEventListener('pointercancel', end);
                     this._onDidSashEnd.fire(undefined);
                 };
-                document.addEventListener('mousemove', mousemove);
-                document.addEventListener('mouseup', end);
+                document.addEventListener('pointermove', onPointerMove);
+                document.addEventListener('pointerup', end);
+                document.addEventListener('pointercancel', end);
             };
-            sash.addEventListener('mousedown', onStart);
+            sash.addEventListener('pointerdown', onPointerStart);
             const sashItem = {
                 container: sash,
                 disposable: () => {
-                    sash.removeEventListener('mousedown', onStart);
+                    sash.removeEventListener('pointerdown', onPointerStart);
                     this.sashContainer.removeChild(sash);
                 },
             };
@@ -1633,7 +1652,7 @@ class BranchNode extends CompositeDisposable {
                             : true,
                     };
                 }),
-                size: this.size,
+                size: this.orthogonalSize,
             };
             this.children = childDescriptors.map((c) => c.node);
             this.splitview = new Splitview(this.element, {
@@ -1696,7 +1715,7 @@ class BranchNode extends CompositeDisposable {
     layout(size, orthogonalSize) {
         this._size = orthogonalSize;
         this._orthogonalSize = size;
-        this.splitview.layout(this.size, this.orthogonalSize);
+        this.splitview.layout(orthogonalSize, size);
     }
     addChild(node, size, index, skipLayout) {
         if (index < 0 || index > this.children.length) {
@@ -1921,9 +1940,9 @@ class Gridview {
         this._deserialize(json.root, orientation, deserializer, height);
     }
     _deserialize(root, orientation, deserializer, orthogonalSize) {
-        this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize, true);
+        this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
     }
-    _deserializeNode(node, orientation, deserializer, orthogonalSize, isRoot = false) {
+    _deserializeNode(node, orientation, deserializer, orthogonalSize) {
         let result;
         if (node.type === 'branch') {
             const serializedChildren = node.data;
@@ -1933,9 +1952,9 @@ class Gridview {
                     visible: serializedChild.visible,
                 };
             });
-            // HORIZONTAL => height=orthogonalsize width=size
-            // VERTICAL => height=size width=orthogonalsize
-            result = new BranchNode(orientation, this.proportionalLayout, this.styles, isRoot ? orthogonalSize : node.size, isRoot ? node.size : orthogonalSize, children);
+            result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, // <- orthogonal size - flips at each depth
+            orthogonalSize, // <- size - flips at each depth
+            children);
         }
         else {
             result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
@@ -1968,7 +1987,8 @@ class Gridview {
         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) {
+        if (oldRoot.children.length === 0) ;
+        else if (oldRoot.children.length === 1) {
             // can remove one level of redundant branching if there is only a single child
             const childReference = oldRoot.children[0];
             const child = oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
@@ -2102,52 +2122,70 @@ class Gridview {
         if (!(parent instanceof BranchNode)) {
             throw new Error('Invalid location');
         }
-        const node = parent.children[index];
-        if (!(node instanceof LeafNode)) {
+        const nodeToRemove = parent.children[index];
+        if (!(nodeToRemove instanceof LeafNode)) {
             throw new Error('Invalid location');
         }
         parent.removeChild(index, sizing);
-        if (parent.children.length === 0) {
-            return node.view;
-        }
-        if (parent.children.length > 1) {
-            return node.view;
-        }
+        nodeToRemove.dispose();
+        if (parent.children.length !== 1) {
+            return nodeToRemove.view;
+        }
+        // if the parent has only one child and we know the parent is a BranchNode we can make the tree
+        // more efficiently spaced by replacing the parent BranchNode with the child.
+        // if that child is a LeafNode then we simply replace the BranchNode with the child otherwise if the child
+        // is a BranchNode too we should spread it's children into the grandparent.
+        // refer to the remaining child as the sibling
         const sibling = parent.children[0];
         if (pathToParent.length === 0) {
-            // parent is root
+            // if the parent is root
             if (sibling instanceof LeafNode) {
-                return node.view;
+                // if the sibling is a leaf node no action is required
+                return nodeToRemove.view;
             }
-            // we must promote sibling to be the new root
+            // otherwise the sibling is a branch node. since the parent is the root and the root has only one child
+            // which is a branch node we can just set this branch node to be the new root node
+            // for good housekeeping we'll removing the sibling from it's existing tree
             parent.removeChild(0, sizing);
+            // and set that sibling node to be root
             this.root = sibling;
-            return node.view;
+            return nodeToRemove.view;
         }
+        // otherwise the parent is apart of a large sub-tree
         const [grandParent, ..._] = [...pathToParent].reverse();
         const [parentIndex, ...__] = [...rest].reverse();
         const isSiblingVisible = parent.isChildVisible(0);
+        // either way we need to remove the sibling from it's existing tree
         parent.removeChild(0, sizing);
+        // note the sizes of all of the grandparents children
         const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i));
-        grandParent.removeChild(parentIndex, sizing);
+        // remove the parent from the grandparent since we are moving the sibling to take the parents place
+        // this parent is no longer used and can be disposed of
+        grandParent.removeChild(parentIndex, sizing).dispose();
         if (sibling instanceof BranchNode) {
+            // replace the parent with the siblings children
             sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
+            // and add those siblings to the grandparent
             for (let i = 0; i < sibling.children.length; i++) {
                 const child = sibling.children[i];
                 grandParent.addChild(child, child.size, parentIndex + i);
             }
         }
         else {
+            // otherwise create a new leaf node and add that to the grandparent
             const newSibling = new LeafNode(sibling.view, orthogonal(sibling.orientation), sibling.size);
             const siblingSizing = isSiblingVisible
                 ? sibling.orthogonalSize
                 : Sizing.Invisible(sibling.orthogonalSize);
             grandParent.addChild(newSibling, siblingSizing, parentIndex);
         }
+        // the containing node of the sibling is no longer required and can be disposed of
+        sibling.dispose();
+        // resize everything
         for (let i = 0; i < sizes.length; i++) {
             grandParent.resizeChild(i, sizes[i]);
         }
-        return node.view;
+        return nodeToRemove.view;
     }
     layout(width, height) {
         const [size, orthogonalSize] = this.root.orientation === Orientation.HORIZONTAL
@@ -2466,6 +2504,9 @@ class DockviewApi {
     addPanel(options) {
         return this.component.addPanel(options);
     }
+    removePanel(panel) {
+        this.component.removePanel(panel);
+    }
     addGroup(options) {
         return this.component.addGroup(options);
     }
@@ -2484,6 +2525,9 @@ class DockviewApi {
     getGroup(id) {
         return this.component.getPanel(id);
     }
+    addFloatingGroup(item, coord) {
+        return this.component.addFloatingGroup(item, coord);
+    }
     fromJSON(data) {
         this.component.fromJSON(data);
     }
@@ -2576,10 +2620,14 @@ class Droptarget extends CompositeDisposable {
         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._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
         this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
             onDragEnter: () => undefined,
             onDragOver: (e) => {
+                if (this._acceptedTargetZonesSet.size === 0) {
+                    this.removeDropTarget();
+                    return;
+                }
                 const width = this.element.clientWidth;
                 const height = this.element.clientHeight;
                 if (width === 0 || height === 0) {
@@ -2588,20 +2636,28 @@ class Droptarget extends CompositeDisposable {
                 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) {
+                const quadrant = this.calculateQuadrant(this._acceptedTargetZonesSet, x, y, width, height);
+                /**
+                 * If the event has already been used by another DropTarget instance
+                 * then don't show a second drop target, only one target should be
+                 * active at any one time
+                 */
+                if (this.isAlreadyUsed(e) || quadrant === null) {
                     // no drop target should be displayed
                     this.removeDropTarget();
                     return;
                 }
                 if (typeof this.options.canDisplayOverlay === 'boolean') {
                     if (!this.options.canDisplayOverlay) {
+                        this.removeDropTarget();
                         return;
                     }
                 }
                 else if (!this.options.canDisplayOverlay(e, quadrant)) {
+                    this.removeDropTarget();
                     return;
                 }
+                this.markAsUsed(e);
                 if (!this.targetElement) {
                     this.targetElement = document.createElement('div');
                     this.targetElement.className = 'drop-target-dropzone';
@@ -2612,12 +2668,6 @@ class Droptarget extends CompositeDisposable {
                     this.element.classList.add('drop-target');
                     this.element.append(this.targetElement);
                 }
-                if (this.options.acceptedTargetZones.length === 0) {
-                    return;
-                }
-                if (!this.targetElement || !this.overlayElement) {
-                    return;
-                }
                 this.toggleClasses(quadrant, width, height);
                 this.setState(quadrant);
             },
@@ -2640,10 +2690,26 @@ class Droptarget extends CompositeDisposable {
             },
         }));
     }
+    setTargetZones(acceptedTargetZones) {
+        this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
+    }
     dispose() {
         this.removeDropTarget();
         super.dispose();
     }
+    /**
+     * Add a property to the event object for other potential listeners to check
+     */
+    markAsUsed(event) {
+        event[Droptarget.USED_EVENT_ID] = true;
+    }
+    /**
+     * Check is the event has already been used by another instance od DropTarget
+     */
+    isAlreadyUsed(event) {
+        const value = event[Droptarget.USED_EVENT_ID];
+        return typeof value === 'boolean' && value;
+    }
     toggleClasses(quadrant, width, height) {
         var _a, _b, _c, _d;
         if (!this.overlayElement) {
@@ -2738,6 +2804,7 @@ class Droptarget extends CompositeDisposable {
         }
     }
 }
+Droptarget.USED_EVENT_ID = '__dockview_droptarget_event_is_used__';
 function calculateQuadrantAsPercentage(overlayType, x, y, width, height, threshold) {
     const xp = (100 * x) / width;
     const yp = (100 * y) / height;
@@ -2867,8 +2934,15 @@ class DragHandler extends CompositeDisposable {
         this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
         this.configure();
     }
+    isCancelled(_event) {
+        return false;
+    }
     configure() {
         this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
+            if (this.isCancelled(event)) {
+                event.preventDefault();
+                return;
+            }
             const iframes = [
                 ...getElementsByTagName('iframe'),
                 ...getElementsByTagName('webview'),
@@ -2942,13 +3016,6 @@ class Tab extends CompositeDisposable {
             if (event.defaultPrevented) {
                 return;
             }
-            /**
-             * TODO: alternative to stopPropagation
-             *
-             * I need to stop the event propagation here since otherwise it'll be intercepted by event handlers
-             * on the tabs-container. I cannot use event.preventDefault() since I need the on DragStart event to occur
-             */
-            event.stopPropagation();
             this._onChanged.fire(event);
         }));
         this.droptarget = new Droptarget(this._element, {
@@ -3006,6 +3073,22 @@ class GroupDragHandler extends DragHandler {
         this.accessorId = accessorId;
         this.group = group;
         this.panelTransfer = LocalSelectionTransfer.getInstance();
+        this.addDisposables(addDisposableListener(element, 'mousedown', (e) => {
+            if (e.shiftKey) {
+                /**
+                 * You cannot call e.preventDefault() because that will prevent drag events from firing
+                 * but we also need to stop any group overlay drag events from occuring
+                 * Use a custom event marker that can be checked by the overlay drag events
+                 */
+                quasiPreventDefault(e);
+            }
+        }, true));
+    }
+    isCancelled(_event) {
+        if (this.group.api.isFloating && !_event.shiftKey) {
+            return true;
+        }
+        return false;
     }
     getData(dataTransfer) {
         this.panelTransfer.setData([new PanelTransfer(this.accessorId, this.group.id, null)], PanelTransfer.prototype);
@@ -3096,17 +3179,30 @@ class TabsContainer extends CompositeDisposable {
     hide() {
         this._element.style.display = 'none';
     }
-    setActionElement(element) {
-        if (this.actions === element) {
+    setRightActionsElement(element) {
+        if (this.rightActions === element) {
+            return;
+        }
+        if (this.rightActions) {
+            this.rightActions.remove();
+            this.rightActions = undefined;
+        }
+        if (element) {
+            this.rightActionsContainer.appendChild(element);
+            this.rightActions = element;
+        }
+    }
+    setLeftActionsElement(element) {
+        if (this.leftActions === element) {
             return;
         }
-        if (this.actions) {
-            this.actions.remove();
-            this.actions = undefined;
+        if (this.leftActions) {
+            this.leftActions.remove();
+            this.leftActions = undefined;
         }
         if (element) {
-            this.actionContainer.appendChild(element);
-            this.actions = element;
+            this.leftActionsContainer.appendChild(element);
+            this.leftActions = element;
         }
     }
     get element() {
@@ -3141,19 +3237,35 @@ class TabsContainer extends CompositeDisposable {
                 toggleClass(this._element, 'dv-single-tab', this.size === 1);
             }
         }));
-        this.actionContainer = document.createElement('div');
-        this.actionContainer.className = 'action-container';
+        this.rightActionsContainer = document.createElement('div');
+        this.rightActionsContainer.className = 'right-actions-container';
+        this.leftActionsContainer = document.createElement('div');
+        this.leftActionsContainer.className = 'left-actions-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.leftActionsContainer);
         this._element.appendChild(this.voidContainer.element);
-        this._element.appendChild(this.actionContainer);
+        this._element.appendChild(this.rightActionsContainer);
         this.addDisposables(this.voidContainer, this.voidContainer.onDrop((event) => {
             this._onDrop.fire({
                 event: event.nativeEvent,
                 index: this.tabs.length,
             });
+        }), addDisposableListener(this.voidContainer.element, 'mousedown', (event) => {
+            const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
+            if (isFloatingGroupsEnabled &&
+                event.shiftKey &&
+                !this.group.api.isFloating) {
+                event.preventDefault();
+                const { top, left } = this.element.getBoundingClientRect();
+                const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
+                this.accessor.addFloatingGroup(this.group, {
+                    x: left - rootLeft + 20,
+                    y: top - rootTop + 20,
+                }, { inDragMode: true });
+            }
         }), addDisposableListener(this.tabContainer, 'mousedown', (event) => {
             if (event.defaultPrevented) {
                 return;
@@ -3207,6 +3319,21 @@ class TabsContainer extends CompositeDisposable {
         tabToAdd.setContent(panel.view.tab);
         const disposable = CompositeDisposable.from(tabToAdd.onChanged((event) => {
             var _a;
+            const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
+            const isFloatingWithOnePanel = this.group.api.isFloating && this.size === 1;
+            if (isFloatingGroupsEnabled &&
+                !isFloatingWithOnePanel &&
+                event.shiftKey) {
+                event.preventDefault();
+                const panel = this.accessor.getGroupPanel(tabToAdd.panelId);
+                const { top, left } = tabToAdd.element.getBoundingClientRect();
+                const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
+                this.accessor.addFloatingGroup(panel, {
+                    x: left - rootLeft,
+                    y: top - rootTop,
+                }, { inDragMode: true });
+                return;
+            }
             const alreadyFocused = panel.id === ((_a = this.group.model.activePanel) === null || _a === void 0 ? void 0 : _a.id) &&
                 this.group.model.isContentFocused;
             const isLeftClick = event.button === 0;
@@ -3276,6 +3403,17 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         }
         return isAncestor(document.activeElement, this.contentContainer.element);
     }
+    get isFloating() {
+        return this._isFloating;
+    }
+    set isFloating(value) {
+        this._isFloating = value;
+        this.dropTarget.setTargetZones(value ? ['center'] : ['top', 'bottom', 'left', 'right', 'center']);
+        toggleClass(this.container, 'dv-groupview-floating', value);
+        this.groupPanel.api._onDidFloatingStateChange.fire({
+            isFloating: this.isFloating,
+        });
+    }
     constructor(container, accessor, id, options, groupPanel) {
         super();
         this.container = container;
@@ -3285,6 +3423,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this.groupPanel = groupPanel;
         this._isGroupActive = false;
         this._locked = false;
+        this._isFloating = false;
         this.mostRecentlyUsed = [];
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
@@ -3301,7 +3440,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this.onDidRemovePanel = this._onDidRemovePanel.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this.container.classList.add('groupview');
+        toggleClass(this.container, 'groupview', true);
         this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
         this.contentContainer = new ContentContainer();
         this.dropTarget = new Droptarget(this.contentContainer.element, {
@@ -3311,6 +3450,9 @@ class DockviewGroupPanelModel extends CompositeDisposable {
                     return false;
                 }
                 const data = getPanelData();
+                if (!data && event.shiftKey && !this.isFloating) {
+                    return false;
+                }
                 if (data && data.viewId === this.accessor.id) {
                     if (data.groupId === this.id) {
                         if (position === 'center') {
@@ -3355,14 +3497,25 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         // correctly initialized
         this.setActive(this.isActive, true, true);
         this.updateContainer();
-        if (this.accessor.options.createGroupControlElement) {
-            this._control = this.accessor.options.createGroupControlElement(this.groupPanel);
-            this.addDisposables(this._control);
-            this._control.init({
+        if (this.accessor.options.createRightHeaderActionsElement) {
+            this._rightHeaderActions =
+                this.accessor.options.createRightHeaderActionsElement(this.groupPanel);
+            this.addDisposables(this._rightHeaderActions);
+            this._rightHeaderActions.init({
+                containerApi: new DockviewApi(this.accessor),
+                api: this.groupPanel.api,
+            });
+            this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
+        }
+        if (this.accessor.options.createLeftHeaderActionsElement) {
+            this._leftHeaderActions =
+                this.accessor.options.createLeftHeaderActionsElement(this.groupPanel);
+            this.addDisposables(this._leftHeaderActions);
+            this._leftHeaderActions.init({
                 containerApi: new DockviewApi(this.accessor),
                 api: this.groupPanel.api,
             });
-            this.tabsContainer.setActionElement(this._control.element);
+            this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
         }
     }
     indexOf(panel) {
@@ -3495,7 +3648,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         return this._activePanel === panel;
     }
     updateActions(element) {
-        this.tabsContainer.setActionElement(element);
+        this.tabsContainer.setRightActionsElement(element);
     }
     setActive(isGroupActive, skipFocus = false, force = false) {
         var _a, _b, _c, _d;
@@ -3667,9 +3820,10 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         }
     }
     dispose() {
-        var _a, _b;
+        var _a, _b, _c;
         super.dispose();
-        (_b = (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+        (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.element.remove();
+        (_c = (_b = this.watermark) === null || _b === void 0 ? void 0 : _b.dispose) === null || _c === void 0 ? void 0 : _c.call(_b);
         for (const panel of this.panels) {
             panel.dispose();
         }
@@ -4463,8 +4617,8 @@ class GridviewPanel extends BasePanelView {
     get isActive() {
         return this.api.isActive;
     }
-    constructor(id, component, options) {
-        super(id, component, new GridviewPanelApiImpl(id));
+    constructor(id, component, options, api) {
+        super(id, component, api !== null && api !== void 0 ? api : new GridviewPanelApiImpl(id));
         this._evaluatedMinimumWidth = 0;
         this._evaluatedMaximumWidth = Number.MAX_SAFE_INTEGER;
         this._evaluatedMinimumHeight = 0;
@@ -4562,6 +4716,32 @@ class GridviewPanel extends BasePanelView {
     }
 }
 
+class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
+    get isFloating() {
+        if (!this._group) {
+            throw new Error(`DockviewGroupPanelApiImpl not initialized`);
+        }
+        return this._group.model.isFloating;
+    }
+    constructor(id, accessor) {
+        super(id);
+        this.accessor = accessor;
+        this._onDidFloatingStateChange = new Emitter();
+        this.onDidFloatingStateChange = this._onDidFloatingStateChange.event;
+        this.addDisposables(this._onDidFloatingStateChange);
+    }
+    moveTo(options) {
+        var _a;
+        if (!this._group) {
+            throw new Error(`DockviewGroupPanelApiImpl not initialized`);
+        }
+        this.accessor.moveGroupOrPanel(options.group, this._group.id, undefined, (_a = options.position) !== null && _a !== void 0 ? _a : 'center');
+    }
+    initialize(group) {
+        this._group = group;
+    }
+}
+
 class DockviewGroupPanel extends GridviewPanel {
     get panels() {
         return this._model.panels;
@@ -4588,7 +4768,8 @@ class DockviewGroupPanel extends GridviewPanel {
         super(id, 'groupview_default', {
             minimumHeight: 100,
             minimumWidth: 100,
-        });
+        }, new DockviewGroupPanelApiImpl(id, accessor));
+        this.api.initialize(this); // cannot use 'this' after after 'super' call
         this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
     }
     initialize() {
@@ -4606,7 +4787,6 @@ class DockviewGroupPanel extends GridviewPanel {
         return this._model;
     }
     toJSON() {
-        // TODO fix typing
         return this.model.toJSON();
     }
 }
@@ -4660,9 +4840,10 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
     get group() {
         return this._group;
     }
-    constructor(panel, group) {
+    constructor(panel, group, accessor) {
         super(panel.id);
         this.panel = panel;
+        this.accessor = accessor;
         this._onDidTitleChange = new Emitter();
         this.onDidTitleChange = this._onDidTitleChange.event;
         this._onDidActiveGroupChange = new Emitter();
@@ -4674,6 +4855,10 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         this._group = group;
         this.addDisposables(this.disposable, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
     }
+    moveTo(options) {
+        var _a;
+        this.accessor.moveGroupOrPanel(options.group, this._group.id, this.panel.id, (_a = options.position) !== null && _a !== void 0 ? _a : 'center', options.index);
+    }
     setTitle(title) {
         this.panel.setTitle(title);
     }
@@ -4698,7 +4883,7 @@ class DockviewPanel extends CompositeDisposable {
         this.containerApi = containerApi;
         this.view = view;
         this._group = group;
-        this.api = new DockviewPanelApiImpl(this, this._group);
+        this.api = new DockviewPanelApiImpl(this, this._group, accessor);
         this.addDisposables(this.api.onActiveChange(() => {
             accessor.setActivePanel(this);
         }), this.api.onDidSizeChange((event) => {
@@ -5039,6 +5224,296 @@ class Watermark extends CompositeDisposable {
     }
 }
 
+const bringElementToFront = (() => {
+    let previous = null;
+    function pushToTop(element) {
+        if (previous !== element && previous !== null) {
+            toggleClass(previous, 'dv-bring-to-front', false);
+        }
+        toggleClass(element, 'dv-bring-to-front', true);
+        previous = element;
+    }
+    return pushToTop;
+})();
+class Overlay extends CompositeDisposable {
+    constructor(options) {
+        super();
+        this.options = options;
+        this._element = document.createElement('div');
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this._onDidChangeEnd = new Emitter();
+        this.onDidChangeEnd = this._onDidChangeEnd.event;
+        this.addDisposables(this._onDidChange, this._onDidChangeEnd);
+        this._element.className = 'dv-resize-container';
+        this.setupResize('top');
+        this.setupResize('bottom');
+        this.setupResize('left');
+        this.setupResize('right');
+        this.setupResize('topleft');
+        this.setupResize('topright');
+        this.setupResize('bottomleft');
+        this.setupResize('bottomright');
+        this._element.appendChild(this.options.content);
+        this.options.container.appendChild(this._element);
+        // if input bad resize within acceptable boundaries
+        this.setBounds({
+            height: this.options.height,
+            width: this.options.width,
+            top: this.options.top,
+            left: this.options.left,
+        });
+    }
+    setBounds(bounds = {}) {
+        if (typeof bounds.height === 'number') {
+            this._element.style.height = `${bounds.height}px`;
+        }
+        if (typeof bounds.width === 'number') {
+            this._element.style.width = `${bounds.width}px`;
+        }
+        if (typeof bounds.top === 'number') {
+            this._element.style.top = `${bounds.top}px`;
+        }
+        if (typeof bounds.left === 'number') {
+            this._element.style.left = `${bounds.left}px`;
+        }
+        const containerRect = this.options.container.getBoundingClientRect();
+        const overlayRect = this._element.getBoundingClientRect();
+        // region: ensure bounds within allowable limits
+        // a minimum width of minimumViewportWidth must be inside the viewport
+        const xOffset = Math.max(0, overlayRect.width - this.options.minimumInViewportWidth);
+        // a minimum height of minimumViewportHeight must be inside the viewport
+        const yOffset = Math.max(0, overlayRect.height - this.options.minimumInViewportHeight);
+        const left = clamp(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+        const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+        this._element.style.left = `${left}px`;
+        this._element.style.top = `${top}px`;
+        this._onDidChange.fire();
+    }
+    toJSON() {
+        const container = this.options.container.getBoundingClientRect();
+        const element = this._element.getBoundingClientRect();
+        return {
+            top: element.top - container.top,
+            left: element.left - container.left,
+            width: element.width,
+            height: element.height,
+        };
+    }
+    setupDrag(dragTarget, options = { inDragMode: false }) {
+        const move = new MutableDisposable();
+        const track = () => {
+            let offset = null;
+            const iframes = [
+                ...getElementsByTagName('iframe'),
+                ...getElementsByTagName('webview'),
+            ];
+            for (const iframe of iframes) {
+                iframe.style.pointerEvents = 'none';
+            }
+            move.value = new CompositeDisposable({
+                dispose: () => {
+                    for (const iframe of iframes) {
+                        iframe.style.pointerEvents = 'auto';
+                    }
+                },
+            }, addDisposableWindowListener(window, 'mousemove', (e) => {
+                const containerRect = this.options.container.getBoundingClientRect();
+                const x = e.clientX - containerRect.left;
+                const y = e.clientY - containerRect.top;
+                toggleClass(this._element, 'dv-resize-container-dragging', true);
+                const overlayRect = this._element.getBoundingClientRect();
+                if (offset === null) {
+                    offset = {
+                        x: e.clientX - overlayRect.left,
+                        y: e.clientY - overlayRect.top,
+                    };
+                }
+                const xOffset = Math.max(0, overlayRect.width - this.options.minimumInViewportWidth);
+                const yOffset = Math.max(0, overlayRect.height -
+                    this.options.minimumInViewportHeight);
+                const left = clamp(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+                const top = clamp(y - offset.y, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+                this.setBounds({ top, left });
+            }), addDisposableWindowListener(window, 'mouseup', () => {
+                toggleClass(this._element, 'dv-resize-container-dragging', false);
+                move.dispose();
+                this._onDidChangeEnd.fire();
+            }));
+        };
+        this.addDisposables(move, addDisposableListener(dragTarget, 'mousedown', (event) => {
+            if (event.defaultPrevented) {
+                event.preventDefault();
+                return;
+            }
+            // if somebody has marked this event then treat as a defaultPrevented
+            // without actually calling event.preventDefault()
+            if (quasiDefaultPrevented(event)) {
+                return;
+            }
+            track();
+        }), addDisposableListener(this.options.content, 'mousedown', (event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            // if somebody has marked this event then treat as a defaultPrevented
+            // without actually calling event.preventDefault()
+            if (quasiDefaultPrevented(event)) {
+                return;
+            }
+            if (event.shiftKey) {
+                track();
+            }
+        }), addDisposableListener(this.options.content, 'mousedown', () => {
+            bringElementToFront(this._element);
+        }, true));
+        bringElementToFront(this._element);
+        if (options.inDragMode) {
+            track();
+        }
+    }
+    setupResize(direction) {
+        const resizeHandleElement = document.createElement('div');
+        resizeHandleElement.className = `dv-resize-handle-${direction}`;
+        this._element.appendChild(resizeHandleElement);
+        const move = new MutableDisposable();
+        this.addDisposables(move, addDisposableListener(resizeHandleElement, 'mousedown', (e) => {
+            e.preventDefault();
+            let startPosition = null;
+            const iframes = [
+                ...getElementsByTagName('iframe'),
+                ...getElementsByTagName('webview'),
+            ];
+            for (const iframe of iframes) {
+                iframe.style.pointerEvents = 'none';
+            }
+            move.value = new CompositeDisposable(addDisposableWindowListener(window, 'mousemove', (e) => {
+                const containerRect = this.options.container.getBoundingClientRect();
+                const overlayRect = this._element.getBoundingClientRect();
+                const y = e.clientY - containerRect.top;
+                const x = e.clientX - containerRect.left;
+                if (startPosition === null) {
+                    // record the initial dimensions since as all subsequence moves are relative to this
+                    startPosition = {
+                        originalY: y,
+                        originalHeight: overlayRect.height,
+                        originalX: x,
+                        originalWidth: overlayRect.width,
+                    };
+                }
+                let top = undefined;
+                let height = undefined;
+                let left = undefined;
+                let width = undefined;
+                const minimumInViewportHeight = this.options.minimumInViewportHeight;
+                const minimumInViewportWidth = this.options.minimumInViewportWidth;
+                function moveTop() {
+                    top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
+                        startPosition.originalHeight >
+                        containerRect.height
+                        ? containerRect.height -
+                            minimumInViewportHeight
+                        : Math.max(0, startPosition.originalY +
+                            startPosition.originalHeight -
+                            Overlay.MINIMUM_HEIGHT));
+                    height =
+                        startPosition.originalY +
+                            startPosition.originalHeight -
+                            top;
+                }
+                function moveBottom() {
+                    top =
+                        startPosition.originalY -
+                            startPosition.originalHeight;
+                    height = clamp(y - top, top < 0
+                        ? -top + minimumInViewportHeight
+                        : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
+                }
+                function moveLeft() {
+                    left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
+                        startPosition.originalWidth >
+                        containerRect.width
+                        ? containerRect.width -
+                            minimumInViewportWidth
+                        : Math.max(0, startPosition.originalX +
+                            startPosition.originalWidth -
+                            Overlay.MINIMUM_WIDTH));
+                    width =
+                        startPosition.originalX +
+                            startPosition.originalWidth -
+                            left;
+                }
+                function moveRight() {
+                    left =
+                        startPosition.originalX -
+                            startPosition.originalWidth;
+                    width = clamp(x - left, left < 0
+                        ? -left + minimumInViewportWidth
+                        : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
+                }
+                switch (direction) {
+                    case 'top':
+                        moveTop();
+                        break;
+                    case 'bottom':
+                        moveBottom();
+                        break;
+                    case 'left':
+                        moveLeft();
+                        break;
+                    case 'right':
+                        moveRight();
+                        break;
+                    case 'topleft':
+                        moveTop();
+                        moveLeft();
+                        break;
+                    case 'topright':
+                        moveTop();
+                        moveRight();
+                        break;
+                    case 'bottomleft':
+                        moveBottom();
+                        moveLeft();
+                        break;
+                    case 'bottomright':
+                        moveBottom();
+                        moveRight();
+                        break;
+                }
+                this.setBounds({ height, width, top, left });
+            }), {
+                dispose: () => {
+                    for (const iframe of iframes) {
+                        iframe.style.pointerEvents = 'auto';
+                    }
+                },
+            }, addDisposableWindowListener(window, 'mouseup', () => {
+                move.dispose();
+                this._onDidChangeEnd.fire();
+            }));
+        }));
+    }
+    dispose() {
+        this._element.remove();
+        super.dispose();
+    }
+}
+Overlay.MINIMUM_HEIGHT = 20;
+Overlay.MINIMUM_WIDTH = 20;
+
+class DockviewFloatingGroupPanel extends CompositeDisposable {
+    constructor(group, overlay) {
+        super();
+        this.group = group;
+        this.overlay = overlay;
+        this.addDisposables(overlay);
+    }
+    position(bounds) {
+        this.overlay.setBounds(bounds);
+    }
+}
+
 class DockviewComponent extends BaseGrid {
     get orientation() {
         return this.gridview.orientation;
@@ -5079,7 +5554,8 @@ class DockviewComponent extends BaseGrid {
         this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this.element.classList.add('dv-dockview');
+        this.floatingGroups = [];
+        toggleClass(this.gridview.element, 'dv-dockview', true);
         this.addDisposables(this._onDidDrop, Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
             this.updateWatermark();
         }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
@@ -5109,6 +5585,11 @@ class DockviewComponent extends BaseGrid {
                     if (data.viewId !== this.id) {
                         return false;
                     }
+                    if (position === 'center') {
+                        // center drop target is only allowed if there are no panels in the grid
+                        // floating panels are allowed
+                        return this.gridview.length === 0;
+                    }
                     return true;
                 }
                 if (this.options.showDndOverlay) {
@@ -5121,7 +5602,7 @@ class DockviewComponent extends BaseGrid {
                 }
                 return false;
             },
-            acceptedTargetZones: ['top', 'bottom', 'left', 'right'],
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             overlayModel: {
                 activationSize: { type: 'pixels', value: 10 },
                 size: { type: 'pixels', value: 20 },
@@ -5139,6 +5620,75 @@ class DockviewComponent extends BaseGrid {
         this._api = new DockviewApi(this);
         this.updateWatermark();
     }
+    addFloatingGroup(item, coord, options) {
+        var _a, _b;
+        let group;
+        if (item instanceof DockviewPanel) {
+            group = this.createGroup();
+            this.removePanel(item, {
+                removeEmptyGroup: true,
+                skipDispose: true,
+            });
+            group.model.openPanel(item);
+        }
+        else {
+            group = item;
+            const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
+                options.skipRemoveGroup;
+            if (!skip) {
+                this.doRemoveGroup(item, { skipDispose: true });
+            }
+        }
+        group.model.isFloating = true;
+        const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number' ? Math.max(coord.x, 0) : 100;
+        const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number' ? Math.max(coord.y, 0) : 100;
+        const overlay = new Overlay({
+            container: this.gridview.element,
+            content: group.element,
+            height: (_a = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _a !== void 0 ? _a : 300,
+            width: (_b = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _b !== void 0 ? _b : 300,
+            left: overlayLeft,
+            top: overlayTop,
+            minimumInViewportWidth: 100,
+            minimumInViewportHeight: 100,
+        });
+        const el = group.element.querySelector('.void-container');
+        if (!el) {
+            throw new Error('failed to find drag handle');
+        }
+        overlay.setupDrag(el, {
+            inDragMode: typeof (options === null || options === void 0 ? void 0 : options.inDragMode) === 'boolean'
+                ? options.inDragMode
+                : false,
+        });
+        const floatingGroupPanel = new DockviewFloatingGroupPanel(group, overlay);
+        const disposable = watchElementResize(group.element, (entry) => {
+            const { width, height } = entry.contentRect;
+            group.layout(width, height); // let the group know it's size is changing so it can fire events to the panel
+        });
+        floatingGroupPanel.addDisposables(overlay.onDidChange(() => {
+            // this is either a resize or a move
+            // to inform the panels .layout(...) the group with it's current size
+            // don't care about resize since the above watcher handles that
+            group.layout(group.height, group.width);
+        }), overlay.onDidChangeEnd(() => {
+            this._bufferOnDidLayoutChange.fire();
+        }), group.onDidChange((event) => {
+            overlay.setBounds({
+                height: event === null || event === void 0 ? void 0 : event.height,
+                width: event === null || event === void 0 ? void 0 : event.width,
+            });
+        }), {
+            dispose: () => {
+                disposable.dispose();
+                group.model.isFloating = false;
+                remove(this.floatingGroups, floatingGroupPanel);
+                this.updateWatermark();
+            },
+        });
+        this.floatingGroups.push(floatingGroupPanel);
+        this.updateWatermark();
+    }
     orthogonalize(position) {
         switch (position) {
             case 'top':
@@ -5161,6 +5711,7 @@ class DockviewComponent extends BaseGrid {
         switch (position) {
             case 'top':
             case 'left':
+            case 'center':
                 return this.createGroupAtLocation([0]); // insert into first position
             case 'bottom':
             case 'right':
@@ -5178,6 +5729,15 @@ class DockviewComponent extends BaseGrid {
         }
         this.layout(this.gridview.width, this.gridview.height, true);
     }
+    layout(width, height, forceResize) {
+        super.layout(width, height, forceResize);
+        if (this.floatingGroups) {
+            for (const floating of this.floatingGroups) {
+                // ensure floting groups stay within visible boundaries
+                floating.overlay.setBounds();
+            }
+        }
+    }
     focus() {
         var _a;
         (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
@@ -5240,51 +5800,81 @@ class DockviewComponent extends BaseGrid {
             collection[panel.id] = panel.toJSON();
             return collection;
         }, {});
-        return {
+        const floats = this.floatingGroups.map((floatingGroup) => {
+            return {
+                data: floatingGroup.group.toJSON(),
+                position: floatingGroup.overlay.toJSON(),
+            };
+        });
+        const result = {
             grid: data,
             panels,
             activeGroup: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
         };
+        if (floats.length > 0) {
+            result.floatingGroups = floats;
+        }
+        return result;
     }
     fromJSON(data) {
+        var _a;
         this.clear();
         const { grid, panels, activeGroup } = data;
         if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
             throw new Error('root must be of type branch');
         }
+        // take note of the existing dimensions
+        const width = this.width;
+        const height = this.height;
+        const createGroupFromSerializedState = (data) => {
+            const { id, locked, hideHeader, views, activeView } = data;
+            const group = this.createGroup({
+                id,
+                locked: !!locked,
+                hideHeader: !!hideHeader,
+            });
+            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;
+                group.model.openPanel(panel, {
+                    skipSetPanelActive: !isActive,
+                    skipSetGroupActive: true,
+                });
+            }
+            if (!group.activePanel && group.panels.length > 0) {
+                group.model.openPanel(group.panels[group.panels.length - 1], {
+                    skipSetGroupActive: true,
+                });
+            }
+            return group;
+        };
         this.gridview.deserialize(grid, {
             fromJSON: (node) => {
-                const { id, locked, hideHeader, views, activeView } = node.data;
-                const group = this.createGroup({
-                    id,
-                    locked: !!locked,
-                    hideHeader: !!hideHeader,
-                });
-                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;
-                    group.model.openPanel(panel, {
-                        skipSetPanelActive: !isActive,
-                        skipSetGroupActive: true,
-                    });
-                }
-                if (!group.activePanel && group.panels.length > 0) {
-                    group.model.openPanel(group.panels[group.panels.length - 1], {
-                        skipSetGroupActive: true,
-                    });
-                }
-                return group;
+                return createGroupFromSerializedState(node.data);
             },
         });
+        this.layout(width, height, true);
+        const serializedFloatingGroups = (_a = data.floatingGroups) !== null && _a !== void 0 ? _a : [];
+        for (const serializedFloatingGroup of serializedFloatingGroups) {
+            const { data, position } = serializedFloatingGroup;
+            const group = createGroupFromSerializedState(data);
+            this.addFloatingGroup(group, {
+                x: position.left,
+                y: position.top,
+                height: position.height,
+                width: position.width,
+            }, { skipRemoveGroup: true, inDragMode: false });
+        }
+        for (const floatingGroup of this.floatingGroups) {
+            floatingGroup.overlay.setBounds();
+        }
         if (typeof activeGroup === 'string') {
             const panel = this.getPanel(activeGroup);
             if (panel) {
                 this.doSetGroupActive(panel);
             }
         }
-        this.gridview.layout(this.width, this.height);
         this._onDidLayoutFromJSON.fire();
     }
     clear() {
@@ -5293,7 +5883,7 @@ class DockviewComponent extends BaseGrid {
         const hasActivePanel = !!this.activePanel;
         for (const group of groups) {
             // remove the group will automatically remove the panels
-            this.removeGroup(group, true);
+            this.removeGroup(group, { skipActive: true });
         }
         if (hasActiveGroup) {
             this.doSetGroupActive(undefined);
@@ -5315,6 +5905,9 @@ class DockviewComponent extends BaseGrid {
             throw new Error(`panel with id ${options.id} already exists`);
         }
         let referenceGroup;
+        if (options.position && options.floating) {
+            throw new Error('you can only provide one of: position, floating as arguments to .addPanel(...)');
+        }
         if (options.position) {
             if (isPanelOptionsWithPanel(options.position)) {
                 const referencePanel = typeof options.position.referencePanel === 'string'
@@ -5347,7 +5940,20 @@ class DockviewComponent extends BaseGrid {
         let panel;
         if (referenceGroup) {
             const target = toTarget(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
-            if (target === 'center') {
+            if (options.floating) {
+                const group = this.createGroup();
+                panel = this.createPanel(options, group);
+                group.model.openPanel(panel);
+                const o = typeof options.floating === 'object' &&
+                    options.floating !== null
+                    ? options.floating
+                    : {};
+                this.addFloatingGroup(group, o, {
+                    inDragMode: false,
+                    skipRemoveGroup: true,
+                });
+            }
+            else if (referenceGroup.api.isFloating || target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
                 referenceGroup.model.openPanel(panel);
             }
@@ -5359,6 +5965,19 @@ class DockviewComponent extends BaseGrid {
                 group.model.openPanel(panel);
             }
         }
+        else if (options.floating) {
+            const group = this.createGroup();
+            panel = this.createPanel(options, group);
+            group.model.openPanel(panel);
+            const o = typeof options.floating === 'object' &&
+                options.floating !== null
+                ? options.floating
+                : {};
+            this.addFloatingGroup(group, o, {
+                inDragMode: false,
+                skipRemoveGroup: true,
+            });
+        }
         else {
             const group = this.createGroupAtLocation();
             panel = this.createPanel(options, group);
@@ -5375,7 +5994,9 @@ class DockviewComponent extends BaseGrid {
             throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
         }
         group.model.removePanel(panel);
-        panel.dispose();
+        if (!options.skipDispose) {
+            panel.dispose();
+        }
         if (group.size === 0 && options.removeEmptyGroup) {
             this.removeGroup(group);
         }
@@ -5390,7 +6011,7 @@ class DockviewComponent extends BaseGrid {
     }
     updateWatermark() {
         var _a, _b;
-        if (this.groups.length === 0) {
+        if (this.groups.filter((x) => !x.api.isFloating).length === 0) {
             if (!this.watermark) {
                 this.watermark = this.createWatermarkComponent();
                 this.watermark.init({
@@ -5399,7 +6020,7 @@ class DockviewComponent extends BaseGrid {
                 const watermarkContainer = document.createElement('div');
                 watermarkContainer.className = 'dv-watermark-container';
                 watermarkContainer.appendChild(this.watermark.element);
-                this.element.appendChild(watermarkContainer);
+                this.gridview.element.appendChild(watermarkContainer);
             }
         }
         else if (this.watermark) {
@@ -5449,15 +6070,28 @@ class DockviewComponent extends BaseGrid {
             return group;
         }
     }
-    removeGroup(group, skipActive = false) {
+    removeGroup(group, options) {
+        var _a;
         const panels = [...group.panels]; // reassign since group panels will mutate
         for (const panel of panels) {
             this.removePanel(panel, {
                 removeEmptyGroup: false,
-                skipDispose: false,
+                skipDispose: (_a = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _a !== void 0 ? _a : false,
             });
         }
-        super.doRemoveGroup(group, { skipActive });
+        this.doRemoveGroup(group, options);
+    }
+    doRemoveGroup(group, options) {
+        const floatingGroup = this.floatingGroups.find((_) => _.group === group);
+        if (floatingGroup) {
+            if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                floatingGroup.group.dispose();
+                this._groups.delete(group.id);
+            }
+            floatingGroup.dispose();
+            return floatingGroup.group;
+        }
+        return super.doRemoveGroup(group, options);
     }
     moveGroupOrPanel(destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
         var _a;
@@ -5488,25 +6122,26 @@ class DockviewComponent extends BaseGrid {
             const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
             if (sourceGroup && sourceGroup.size < 2) {
                 const [targetParentLocation, to] = tail(targetLocation);
-                const sourceLocation = getGridLocation(sourceGroup.element);
-                const [sourceParentLocation, from] = tail(sourceLocation);
-                if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
-                    // special case when 'swapping' two views within same grid location
-                    // if a group has one tab - we are essentially moving the 'group'
-                    // which is equivalent to swapping two views in this case
-                    this.gridview.moveView(sourceParentLocation, from, to);
-                }
-                else {
-                    // source group will become empty so delete the group
-                    const targetGroup = this.doRemoveGroup(sourceGroup, {
-                        skipActive: true,
-                        skipDispose: true,
-                    });
-                    // after deleting the group we need to re-evaulate the ref location
-                    const updatedReferenceLocation = getGridLocation(destinationGroup.element);
-                    const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
-                    this.doAddGroup(targetGroup, location);
+                const isFloating = this.floatingGroups.find((x) => x.group === sourceGroup);
+                if (!isFloating) {
+                    const sourceLocation = getGridLocation(sourceGroup.element);
+                    const [sourceParentLocation, from] = tail(sourceLocation);
+                    if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
+                        // special case when 'swapping' two views within same grid location
+                        // if a group has one tab - we are essentially moving the 'group'
+                        // which is equivalent to swapping two views in this case
+                        this.gridview.moveView(sourceParentLocation, from, to);
+                    }
                 }
+                // source group will become empty so delete the group
+                const targetGroup = this.doRemoveGroup(sourceGroup, {
+                    skipActive: true,
+                    skipDispose: true,
+                });
+                // after deleting the group we need to re-evaulate the ref location
+                const updatedReferenceLocation = getGridLocation(destinationGroup.element);
+                const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
+                this.doAddGroup(targetGroup, location);
             }
             else {
                 const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) ||
@@ -5535,7 +6170,13 @@ class DockviewComponent extends BaseGrid {
                 }
             }
             else {
-                this.gridview.removeView(getGridLocation(sourceGroup.element));
+                const floatingGroup = this.floatingGroups.find((x) => x.group === sourceGroup);
+                if (floatingGroup) {
+                    floatingGroup.dispose();
+                }
+                else {
+                    this.gridview.removeView(getGridLocation(sourceGroup.element));
+                }
                 const referenceLocation = getGridLocation(referenceGroup.element);
                 const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
                 this.gridview.addView(sourceGroup, Sizing.Distribute, dropLocation);
@@ -5690,6 +6331,9 @@ class GridviewComponent extends BaseGrid {
         this.clear();
         const { grid, activePanel } = serializedGridview;
         const queue = [];
+        // take note of the existing dimensions
+        const width = this.width;
+        const height = this.height;
         this.gridview.deserialize(grid, {
             fromJSON: (node) => {
                 const { data } = node;
@@ -5715,7 +6359,7 @@ class GridviewComponent extends BaseGrid {
                 return view;
             },
         });
-        this.layout(this.width, this.height, true);
+        this.layout(width, height, true);
         queue.forEach((f) => f());
         if (typeof activePanel === 'string') {
             const panel = this.getPanel(activePanel);
@@ -6029,6 +6673,9 @@ class SplitviewComponent extends Resizable {
         this.clear();
         const { views, orientation, size, activeView } = serializedSplitview;
         const queue = [];
+        // take note of the existing dimensions
+        const width = this.width;
+        const height = this.height;
         this.splitview = new Splitview(this.element, {
             orientation,
             proportionalLayout: this.options.proportionalLayout,
@@ -6065,7 +6712,7 @@ class SplitviewComponent extends Resizable {
                 }),
             },
         });
-        this.layout(this.width, this.height);
+        this.layout(width, height);
         queue.forEach((f) => f());
         if (typeof activeView === 'string') {
             const panel = this.getPanel(activeView);
@@ -6332,6 +6979,9 @@ class PaneviewComponent extends Resizable {
         this.clear();
         const { views, size } = serializedPaneview;
         const queue = [];
+        // take note of the existing dimensions
+        const width = this.width;
+        const height = this.height;
         this.paneview = new Paneview(this.element, {
             orientation: Orientation.VERTICAL,
             descriptor: {
@@ -6387,7 +7037,7 @@ class PaneviewComponent extends Resizable {
                 }),
             },
         });
-        this.layout(this.width, this.height);
+        this.layout(width, height);
         queue.forEach((f) => f());
         this._onDidLayoutfromJSON.fire();
     }
@@ -6770,7 +7420,7 @@ class ReactWatermarkPart {
     }
 }
 
-class ReactGroupControlsRendererPart {
+class ReactHeaderActionsRendererPart {
     get element() {
         return this._element;
     }
@@ -6807,6 +7457,7 @@ class ReactGroupControlsRendererPart {
             panels: this._group.model.panels,
             activePanel: this._group.model.activePanel,
             isGroupActive: this._group.api.isActive,
+            group: this._group,
         });
     }
     update(event) {
@@ -6840,7 +7491,7 @@ class ReactGroupControlsRendererPart {
 function createGroupControlElement(component, store) {
     return component
         ? (groupPanel) => {
-            return new ReactGroupControlsRendererPart(component, store, groupPanel);
+            return new ReactHeaderActionsRendererPart(component, store, groupPanel);
         }
         : undefined;
 }
@@ -6897,8 +7548,10 @@ const DockviewReact = React.forwardRef((props, ref) => {
                 ? { separatorBorder: 'transparent' }
                 : undefined,
             showDndOverlay: props.showDndOverlay,
-            createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
+            createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
+            createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
             singleTabMode: props.singleTabMode,
+            disableFloatingGroups: props.disableFloatingGroups,
         });
         const { clientWidth, clientHeight } = domRef.current;
         dockview.layout(clientWidth, clientHeight);
@@ -6957,6 +7610,14 @@ const DockviewReact = React.forwardRef((props, ref) => {
             frameworkTabComponents: props.tabComponents,
         });
     }, [props.tabComponents]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            disableFloatingGroups: props.disableFloatingGroups,
+        });
+    }, [props.disableFloatingGroups]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
@@ -6978,9 +7639,17 @@ const DockviewReact = React.forwardRef((props, ref) => {
             return;
         }
         dockviewRef.current.updateOptions({
-            createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
+            createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
+        });
+    }, [props.rightHeaderActionsComponent]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
         });
-    }, [props.groupControlComponent]);
+    }, [props.leftHeaderActionsComponent]);
     return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 DockviewReact.displayName = 'DockviewComponent';
@@ -6999,6 +7668,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
 
 function __rest(s, e) {
     var t = {};
@@ -7010,7 +7681,12 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
     React.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
@@ -7282,4 +7958,5 @@ const PaneviewReact = React.forwardRef((props, ref) => {
 });
 PaneviewReact.displayName = 'PaneviewComponent';
 
-export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDefaultTab, DockviewDropTargets, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewReact, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, LayoutPriority, LocalSelectionTransfer, Orientation, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, createComponent, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, isReactElement, orthogonal, positionToDirection, toTarget, usePortalsLifecycle, watchElementResize };
+export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDefaultTab, DockviewDropTargets, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewReact, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, LayoutPriority, LocalSelectionTransfer, Orientation, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, createComponent, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, isReactElement, orthogonal, positionToDirection, toTarget, usePortalsLifecycle };
+//# sourceMappingURL=dockview.esm.js.map