dockview-core 1.12.0 → 1.13.1

package/dist/dockview-core.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 1.12.0
+ * @version 1.13.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -224,18 +224,49 @@
             },
         };
     }
-    class TickDelayedEvent {
+    /**
+     *
+     * Event Emitter that fires events from a Microtask callback, only one event will fire per event-loop cycle.
+     *
+     * It's kind of like using an `asapScheduler` in RxJs with additional logic to only fire once per event-loop cycle.
+     * This implementation exists to avoid external dependencies.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/queueMicrotask
+     * @see https://rxjs.dev/api/index/const/asapScheduler
+     */
+    class AsapEvent {
         constructor() {
             this._onFired = new Emitter();
-            this.onEvent = this._onFired.event;
+            this._currentFireCount = 0;
+            this._queued = false;
+            this.onEvent = (e) => {
+                /**
+                 * when the event is first subscribed to take note of the current fire count
+                 */
+                const fireCountAtTimeOfEventSubscription = this._currentFireCount;
+                return this._onFired.event(() => {
+                    /**
+                     * if the current fire count is greater than the fire count at event subscription
+                     * then the event has been fired since we subscribed and it's ok to "on_next" the event.
+                     *
+                     * if the count is not greater then what we are recieving is an event from the microtask
+                     * queue that was triggered before we actually subscribed and therfore we should ignore it.
+                     */
+                    if (this._currentFireCount > fireCountAtTimeOfEventSubscription) {
+                        e();
+                    }
+                });
+            };
         }
         fire() {
-            if (this.timer) {
-                clearTimeout(this.timer);
+            this._currentFireCount++;
+            if (this._queued) {
+                return;
             }
-            this.timer = setTimeout(() => {
+            this._queued = true;
+            queueMicrotask(() => {
+                this._queued = false;
                 this._onFired.fire();
-                clearTimeout(this.timer);
             });
         }
         dispose() {
@@ -2442,143 +2473,394 @@
         }
     }
 
-    class SplitviewApi {
-        /**
-         * The minimum size  the component can reach where size is measured in the direction of orientation provided.
-         */
-        get minimumSize() {
-            return this.component.minimumSize;
+    class Resizable extends CompositeDisposable {
+        get element() {
+            return this._element;
         }
-        /**
-         * The maximum size the component can reach where size is measured in the direction of orientation provided.
-         */
-        get maximumSize() {
-            return this.component.maximumSize;
+        get disableResizing() {
+            return this._disableResizing;
         }
-        /**
-         * Width of the component.
-         */
-        get width() {
-            return this.component.width;
+        set disableResizing(value) {
+            this._disableResizing = value;
         }
-        /**
-         * Height of the component.
-         */
-        get height() {
-            return this.component.height;
+        constructor(parentElement, disableResizing = false) {
+            super();
+            this._disableResizing = disableResizing;
+            this._element = parentElement;
+            this.addDisposables(watchElementResize(this._element, (entry) => {
+                if (this.isDisposed) {
+                    /**
+                     * resize is delayed through requestAnimationFrame so there is a small chance
+                     * the component has already been disposed of
+                     */
+                    return;
+                }
+                if (this.disableResizing) {
+                    return;
+                }
+                if (!this._element.offsetParent) {
+                    /**
+                     * offsetParent === null is equivalent to display: none being set on the element or one
+                     * of it's parents. In the display: none case the size will become (0, 0) which we do
+                     * not want to propagate.
+                     *
+                     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
+                     *
+                     * You could use checkVisibility() but at the time of writing it's not supported across
+                     * all Browsers
+                     *
+                     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility
+                     */
+                    return;
+                }
+                if (!isInDocument(this._element)) {
+                    /**
+                     * since the event is dispatched through requestAnimationFrame there is a small chance
+                     * the component is no longer attached to the DOM, if that is the case the dimensions
+                     * are mostly likely all zero and meaningless. we should skip this case.
+                     */
+                    return;
+                }
+                const { width, height } = entry.contentRect;
+                this.layout(width, height);
+            }));
         }
-        /**
-         * The current number of panels.
-         */
-        get length() {
-            return this.component.length;
+    }
+
+    const nextLayoutId$1 = sequentialNumberGenerator();
+    function toTarget(direction) {
+        switch (direction) {
+            case 'left':
+                return 'left';
+            case 'right':
+                return 'right';
+            case 'above':
+                return 'top';
+            case 'below':
+                return 'bottom';
+            case 'within':
+            default:
+                return 'center';
         }
-        /**
-         * The current orientation of the component.
-         */
-        get orientation() {
-            return this.component.orientation;
+    }
+    class BaseGrid extends Resizable {
+        get id() {
+            return this._id;
         }
-        /**
-         * The list of current panels.
-         */
-        get panels() {
-            return this.component.panels;
+        get size() {
+            return this._groups.size;
         }
-        /**
-         * Invoked after a layout is loaded through the `fromJSON` method.
-         */
-        get onDidLayoutFromJSON() {
-            return this.component.onDidLayoutFromJSON;
+        get groups() {
+            return Array.from(this._groups.values()).map((_) => _.value);
         }
-        /**
-         * Invoked whenever any aspect of the layout changes.
-         * If listening to this event it may be worth debouncing ouputs.
-         */
-        get onDidLayoutChange() {
-            return this.component.onDidLayoutChange;
+        get width() {
+            return this.gridview.width;
         }
-        /**
-         * Invoked when a view is added.
-         */
-        get onDidAddView() {
-            return this.component.onDidAddView;
+        get height() {
+            return this.gridview.height;
         }
-        /**
-         * Invoked when a view is removed.
-         */
-        get onDidRemoveView() {
-            return this.component.onDidRemoveView;
+        get minimumHeight() {
+            return this.gridview.minimumHeight;
         }
-        constructor(component) {
-            this.component = component;
+        get maximumHeight() {
+            return this.gridview.maximumHeight;
         }
-        /**
-         * Update configuratable options.
-         */
-        updateOptions(options) {
-            this.component.updateOptions(options);
+        get minimumWidth() {
+            return this.gridview.minimumWidth;
         }
-        /**
-         * Removes an existing panel and optionally provide a `Sizing` method
-         * for the subsequent resize.
-         */
-        removePanel(panel, sizing) {
-            this.component.removePanel(panel, sizing);
+        get maximumWidth() {
+            return this.gridview.maximumWidth;
         }
-        /**
-         * Focus the component.
-         */
-        focus() {
-            this.component.focus();
+        get activeGroup() {
+            return this._activeGroup;
         }
-        /**
-         * Get the reference to a panel given it's `string` id.
-         */
-        getPanel(id) {
-            return this.component.getPanel(id);
+        get locked() {
+            return this.gridview.locked;
         }
-        /**
-         * Layout the panel with a width and height.
-         */
-        layout(width, height) {
-            return this.component.layout(width, height);
+        set locked(value) {
+            this.gridview.locked = value;
         }
-        /**
-         * Add a new panel and return the created instance.
-         */
-        addPanel(options) {
-            return this.component.addPanel(options);
+        constructor(options) {
+            super(document.createElement('div'), options.disableAutoResizing);
+            this._id = nextLayoutId$1.next();
+            this._groups = new Map();
+            this._onDidRemove = new Emitter();
+            this.onDidRemove = this._onDidRemove.event;
+            this._onDidAdd = new Emitter();
+            this.onDidAdd = this._onDidAdd.event;
+            this._onDidActiveChange = new Emitter();
+            this.onDidActiveChange = this._onDidActiveChange.event;
+            this._bufferOnDidLayoutChange = new AsapEvent();
+            this.onDidLayoutChange = this._bufferOnDidLayoutChange.onEvent;
+            this.element.style.height = '100%';
+            this.element.style.width = '100%';
+            options.parentElement.appendChild(this.element);
+            this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
+            this.gridview.locked = !!options.locked;
+            this.element.appendChild(this.gridview.element);
+            this.layout(0, 0, true); // set some elements height/widths
+            this.addDisposables(Disposable.from(() => {
+                var _a;
+                (_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.element);
+            }), this.gridview.onDidChange(() => {
+                this._bufferOnDidLayoutChange.fire();
+            }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove, this.onDidActiveChange)(() => {
+                this._bufferOnDidLayoutChange.fire();
+            }), this._bufferOnDidLayoutChange);
         }
-        /**
-         * Move a panel given it's current and desired index.
-         */
-        movePanel(from, to) {
-            this.component.movePanel(from, to);
+        setVisible(panel, visible) {
+            this.gridview.setViewVisible(getGridLocation(panel.element), visible);
+            this._bufferOnDidLayoutChange.fire();
         }
-        /**
-         * Deserialize a layout to built a splitivew.
-         */
-        fromJSON(data) {
-            this.component.fromJSON(data);
+        isVisible(panel) {
+            return this.gridview.isViewVisible(getGridLocation(panel.element));
         }
-        /** Serialize a layout */
-        toJSON() {
-            return this.component.toJSON();
+        maximizeGroup(panel) {
+            this.gridview.maximizeView(panel);
+            this.doSetGroupActive(panel);
         }
-        /**
-         * Remove all panels and clear the component.
-         */
-        clear() {
-            this.component.clear();
+        isMaximizedGroup(panel) {
+            return this.gridview.maximizedView() === panel;
         }
-    }
-    class PaneviewApi {
-        /**
-         * The minimum size  the component can reach where size is measured in the direction of orientation provided.
-         */
-        get minimumSize() {
-            return this.component.minimumSize;
+        exitMaximizedGroup() {
+            this.gridview.exitMaximizedView();
+        }
+        hasMaximizedGroup() {
+            return this.gridview.hasMaximizedView();
+        }
+        get onDidMaximizedGroupChange() {
+            return this.gridview.onDidMaximizedNodeChange;
+        }
+        doAddGroup(group, location = [0], size) {
+            this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
+            this._onDidAdd.fire(group);
+        }
+        doRemoveGroup(group, options) {
+            if (!this._groups.has(group.id)) {
+                throw new Error('invalid operation');
+            }
+            const item = this._groups.get(group.id);
+            const view = this.gridview.remove(group, exports.Sizing.Distribute);
+            if (item && !(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                item.disposable.dispose();
+                item.value.dispose();
+                this._groups.delete(group.id);
+                this._onDidRemove.fire(group);
+            }
+            if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
+                const groups = Array.from(this._groups.values());
+                this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+            }
+            return view;
+        }
+        getPanel(id) {
+            var _a;
+            return (_a = this._groups.get(id)) === null || _a === void 0 ? void 0 : _a.value;
+        }
+        doSetGroupActive(group) {
+            if (this._activeGroup === group) {
+                return;
+            }
+            if (this._activeGroup) {
+                this._activeGroup.setActive(false);
+            }
+            if (group) {
+                group.setActive(true);
+            }
+            this._activeGroup = group;
+            this._onDidActiveChange.fire(group);
+        }
+        removeGroup(group) {
+            this.doRemoveGroup(group);
+        }
+        moveToNext(options) {
+            var _a;
+            if (!options) {
+                options = {};
+            }
+            if (!options.group) {
+                if (!this.activeGroup) {
+                    return;
+                }
+                options.group = this.activeGroup;
+            }
+            const location = getGridLocation(options.group.element);
+            const next = (_a = this.gridview.next(location)) === null || _a === void 0 ? void 0 : _a.view;
+            this.doSetGroupActive(next);
+        }
+        moveToPrevious(options) {
+            var _a;
+            if (!options) {
+                options = {};
+            }
+            if (!options.group) {
+                if (!this.activeGroup) {
+                    return;
+                }
+                options.group = this.activeGroup;
+            }
+            const location = getGridLocation(options.group.element);
+            const next = (_a = this.gridview.previous(location)) === null || _a === void 0 ? void 0 : _a.view;
+            this.doSetGroupActive(next);
+        }
+        layout(width, height, forceResize) {
+            const different = forceResize !== null && forceResize !== void 0 ? forceResize : (width !== this.width || height !== this.height);
+            if (!different) {
+                return;
+            }
+            this.gridview.element.style.height = `${height}px`;
+            this.gridview.element.style.width = `${width}px`;
+            this.gridview.layout(width, height);
+        }
+        dispose() {
+            this._onDidActiveChange.dispose();
+            this._onDidAdd.dispose();
+            this._onDidRemove.dispose();
+            for (const group of this.groups) {
+                group.dispose();
+            }
+            this.gridview.dispose();
+            super.dispose();
+        }
+    }
+
+    class SplitviewApi {
+        /**
+         * The minimum size  the component can reach where size is measured in the direction of orientation provided.
+         */
+        get minimumSize() {
+            return this.component.minimumSize;
+        }
+        /**
+         * The maximum size the component can reach where size is measured in the direction of orientation provided.
+         */
+        get maximumSize() {
+            return this.component.maximumSize;
+        }
+        /**
+         * Width of the component.
+         */
+        get width() {
+            return this.component.width;
+        }
+        /**
+         * Height of the component.
+         */
+        get height() {
+            return this.component.height;
+        }
+        /**
+         * The current number of panels.
+         */
+        get length() {
+            return this.component.length;
+        }
+        /**
+         * The current orientation of the component.
+         */
+        get orientation() {
+            return this.component.orientation;
+        }
+        /**
+         * The list of current panels.
+         */
+        get panels() {
+            return this.component.panels;
+        }
+        /**
+         * Invoked after a layout is loaded through the `fromJSON` method.
+         */
+        get onDidLayoutFromJSON() {
+            return this.component.onDidLayoutFromJSON;
+        }
+        /**
+         * Invoked whenever any aspect of the layout changes.
+         * If listening to this event it may be worth debouncing ouputs.
+         */
+        get onDidLayoutChange() {
+            return this.component.onDidLayoutChange;
+        }
+        /**
+         * Invoked when a view is added.
+         */
+        get onDidAddView() {
+            return this.component.onDidAddView;
+        }
+        /**
+         * Invoked when a view is removed.
+         */
+        get onDidRemoveView() {
+            return this.component.onDidRemoveView;
+        }
+        constructor(component) {
+            this.component = component;
+        }
+        /**
+         * Update configuratable options.
+         */
+        updateOptions(options) {
+            this.component.updateOptions(options);
+        }
+        /**
+         * Removes an existing panel and optionally provide a `Sizing` method
+         * for the subsequent resize.
+         */
+        removePanel(panel, sizing) {
+            this.component.removePanel(panel, sizing);
+        }
+        /**
+         * Focus the component.
+         */
+        focus() {
+            this.component.focus();
+        }
+        /**
+         * Get the reference to a panel given it's `string` id.
+         */
+        getPanel(id) {
+            return this.component.getPanel(id);
+        }
+        /**
+         * Layout the panel with a width and height.
+         */
+        layout(width, height) {
+            return this.component.layout(width, height);
+        }
+        /**
+         * Add a new panel and return the created instance.
+         */
+        addPanel(options) {
+            return this.component.addPanel(options);
+        }
+        /**
+         * Move a panel given it's current and desired index.
+         */
+        movePanel(from, to) {
+            this.component.movePanel(from, to);
+        }
+        /**
+         * Deserialize a layout to built a splitivew.
+         */
+        fromJSON(data) {
+            this.component.fromJSON(data);
+        }
+        /** Serialize a layout */
+        toJSON() {
+            return this.component.toJSON();
+        }
+        /**
+         * Remove all panels and clear the component.
+         */
+        clear() {
+            this.component.clear();
+        }
+    }
+    class PaneviewApi {
+        /**
+         * The minimum size  the component can reach where size is measured in the direction of orientation provided.
+         */
+        get minimumSize() {
+            return this.component.minimumSize;
         }
         /**
          * The maximum size the component can reach where size is measured in the direction of orientation provided.
@@ -2984,6 +3266,9 @@
         get onWillDragPanel() {
             return this.component.onWillDragPanel;
         }
+        get onUnhandledDragOverEvent() {
+            return this.component.onUnhandledDragOverEvent;
+        }
         /**
          * All panel objects.
          */
@@ -3121,17 +3406,78 @@
         }
     }
 
-    class DragAndDropObserver extends CompositeDisposable {
-        constructor(element, callbacks) {
+    class DragHandler extends CompositeDisposable {
+        constructor(el) {
             super();
-            this.element = element;
-            this.callbacks = callbacks;
-            this.target = null;
-            this.registerListeners();
+            this.el = el;
+            this.dataDisposable = new MutableDisposable();
+            this.pointerEventsDisposable = new MutableDisposable();
+            this._onDragStart = new Emitter();
+            this.onDragStart = this._onDragStart.event;
+            this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
+            this.configure();
         }
-        onDragEnter(e) {
-            this.target = e.target;
-            this.callbacks.onDragEnter(e);
+        isCancelled(_event) {
+            return false;
+        }
+        configure() {
+            this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
+                if (event.defaultPrevented || this.isCancelled(event)) {
+                    event.preventDefault();
+                    return;
+                }
+                const iframes = [
+                    ...getElementsByTagName('iframe'),
+                    ...getElementsByTagName('webview'),
+                ];
+                this.pointerEventsDisposable.value = {
+                    dispose: () => {
+                        for (const iframe of iframes) {
+                            iframe.style.pointerEvents = 'auto';
+                        }
+                    },
+                };
+                for (const iframe of iframes) {
+                    iframe.style.pointerEvents = 'none';
+                }
+                this.el.classList.add('dv-dragged');
+                setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
+                this.dataDisposable.value = this.getData(event);
+                this._onDragStart.fire(event);
+                if (event.dataTransfer) {
+                    event.dataTransfer.effectAllowed = 'move';
+                    const hasData = event.dataTransfer.items.length > 0;
+                    if (!hasData) {
+                        /**
+                         * Although this is not used by dockview many third party dnd libraries will check
+                         * dataTransfer.types to determine valid drag events.
+                         *
+                         * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
+                         * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
+                         * dnd logic. You can see the code at
+                         * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
+                         */
+                        event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                    }
+                }
+            }), addDisposableListener(this.el, 'dragend', () => {
+                this.pointerEventsDisposable.dispose();
+                this.dataDisposable.dispose();
+            }));
+        }
+    }
+
+    class DragAndDropObserver extends CompositeDisposable {
+        constructor(element, callbacks) {
+            super();
+            this.element = element;
+            this.callbacks = callbacks;
+            this.target = null;
+            this.registerListeners();
+        }
+        onDragEnter(e) {
+            this.target = e.target;
+            this.callbacks.onDragEnter(e);
         }
         onDragOver(e) {
             e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
@@ -3265,6 +3611,10 @@
                         this.removeDropTarget();
                         return;
                     }
+                    if (!this.options.canDisplayOverlay(e, quadrant)) {
+                        this.removeDropTarget();
+                        return;
+                    }
                     const willShowOverlayEvent = new WillShowOverlayEvent({
                         nativeEvent: e,
                         position: quadrant,
@@ -3278,16 +3628,6 @@
                         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');
@@ -3478,2023 +3818,1758 @@
         return 'center';
     }
 
-    class ContentContainer extends CompositeDisposable {
-        get element() {
-            return this._element;
-        }
-        constructor(accessor, group) {
+    class WillFocusEvent extends DockviewEvent {
+        constructor() {
             super();
-            this.accessor = accessor;
-            this.group = group;
-            this.disposable = new MutableDisposable();
-            this._onDidFocus = new Emitter();
-            this.onDidFocus = this._onDidFocus.event;
-            this._onDidBlur = new Emitter();
-            this.onDidBlur = this._onDidBlur.event;
-            this._element = document.createElement('div');
-            this._element.className = 'content-container';
-            this._element.tabIndex = -1;
-            this.addDisposables(this._onDidFocus, this._onDidBlur);
-            this.dropTarget = new Droptarget(this.element, {
-                acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-                canDisplayOverlay: (event, position) => {
-                    if (this.group.locked === 'no-drop-target' ||
-                        (this.group.locked && position === 'center')) {
-                        return false;
-                    }
-                    const data = getPanelData();
-                    if (!data &&
-                        event.shiftKey &&
-                        this.group.location.type !== 'floating') {
-                        return false;
-                    }
-                    if (data && data.viewId === this.accessor.id) {
-                        if (data.groupId === this.group.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.group.panels.length === 1 &&
-                            data.groupId === this.group.id;
-                        return !groupHasOnePanelAndIsActiveDragElement;
-                    }
-                    return this.group.canDisplayOverlay(event, position, 'content');
-                },
-            });
-            this.addDisposables(this.dropTarget);
         }
-        show() {
-            this.element.style.display = '';
+    }
+    /**
+     * A core api implementation that should be used across all panel-like objects
+     */
+    class PanelApiImpl extends CompositeDisposable {
+        get isFocused() {
+            return this._isFocused;
         }
-        hide() {
-            this.element.style.display = 'none';
+        get isActive() {
+            return this._isActive;
         }
-        renderPanel(panel, options = { asActive: true }) {
-            const doRender = options.asActive ||
-                (this.panel && this.group.isPanelActive(this.panel));
-            if (this.panel &&
-                this.panel.view.content.element.parentElement === this._element) {
-                /**
-                 * If the currently attached panel is mounted directly to the content then remove it
-                 */
-                this._element.removeChild(this.panel.view.content.element);
-            }
-            this.panel = panel;
-            let container;
-            switch (panel.api.renderer) {
-                case 'onlyWhenVisible':
-                    this.group.renderContainer.detatch(panel);
-                    if (this.panel) {
-                        if (doRender) {
-                            this._element.appendChild(this.panel.view.content.element);
-                        }
-                    }
-                    container = this._element;
-                    break;
-                case 'always':
-                    if (panel.view.content.element.parentElement === this._element) {
-                        this._element.removeChild(panel.view.content.element);
-                    }
-                    container = this.group.renderContainer.attach({
-                        panel,
-                        referenceContainer: this,
-                    });
-                    break;
-            }
-            if (doRender) {
-                const _onDidFocus = panel.view.content.onDidFocus;
-                const _onDidBlur = panel.view.content.onDidBlur;
-                const focusTracker = trackFocus(container);
-                const disposable = new CompositeDisposable();
-                disposable.addDisposables(focusTracker, focusTracker.onDidFocus(() => this._onDidFocus.fire()), focusTracker.onDidBlur(() => this._onDidBlur.fire()));
-                if (_onDidFocus) {
-                    disposable.addDisposables(_onDidFocus(() => this._onDidFocus.fire()));
-                }
-                if (_onDidBlur) {
-                    disposable.addDisposables(_onDidBlur(() => this._onDidBlur.fire()));
-                }
-                this.disposable.value = disposable;
-            }
+        get isVisible() {
+            return this._isVisible;
         }
-        openPanel(panel) {
-            if (this.panel === panel) {
-                return;
-            }
-            this.renderPanel(panel);
+        get width() {
+            return this._width;
         }
-        layout(_width, _height) {
-            // noop
+        get height() {
+            return this._height;
         }
-        closePanel() {
-            var _a;
-            if (this.panel) {
-                if (this.panel.api.renderer === 'onlyWhenVisible') {
-                    (_a = this.panel.view.content.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.panel.view.content.element);
-                }
-            }
-            this.panel = undefined;
+        constructor(id, component) {
+            super();
+            this.id = id;
+            this.component = component;
+            this._isFocused = false;
+            this._isActive = false;
+            this._isVisible = true;
+            this._width = 0;
+            this._height = 0;
+            this._parameters = {};
+            this.panelUpdatesDisposable = new MutableDisposable();
+            this._onDidDimensionChange = new Emitter();
+            this.onDidDimensionsChange = this._onDidDimensionChange.event;
+            this._onDidChangeFocus = new Emitter();
+            this.onDidFocusChange = this._onDidChangeFocus.event;
+            //
+            this._onWillFocus = new Emitter();
+            this.onWillFocus = this._onWillFocus.event;
+            //
+            this._onDidVisibilityChange = new Emitter();
+            this.onDidVisibilityChange = this._onDidVisibilityChange.event;
+            this._onWillVisibilityChange = new Emitter();
+            this.onWillVisibilityChange = this._onWillVisibilityChange.event;
+            this._onDidActiveChange = new Emitter();
+            this.onDidActiveChange = this._onDidActiveChange.event;
+            this._onActiveChange = new Emitter();
+            this.onActiveChange = this._onActiveChange.event;
+            this._onDidParametersChange = new Emitter();
+            this.onDidParametersChange = this._onDidParametersChange.event;
+            this.addDisposables(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;
+            }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onWillFocus, this._onWillVisibilityChange, this._onDidParametersChange);
         }
-        dispose() {
-            this.disposable.dispose();
-            super.dispose();
+        getParameters() {
+            return this._parameters;
+        }
+        initialize(panel) {
+            this.panelUpdatesDisposable.value = this._onDidParametersChange.event((parameters) => {
+                this._parameters = parameters;
+                panel.update({
+                    params: parameters,
+                });
+            });
+        }
+        setVisible(isVisible) {
+            this._onWillVisibilityChange.fire({ isVisible });
+        }
+        setActive() {
+            this._onActiveChange.fire();
+        }
+        updateParameters(parameters) {
+            this._onDidParametersChange.fire(parameters);
         }
     }
 
-    class DragHandler extends CompositeDisposable {
-        constructor(el) {
-            super();
-            this.el = el;
-            this.dataDisposable = new MutableDisposable();
-            this.pointerEventsDisposable = new MutableDisposable();
-            this._onDragStart = new Emitter();
-            this.onDragStart = this._onDragStart.event;
-            this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
-            this.configure();
+    class SplitviewPanelApiImpl extends PanelApiImpl {
+        //
+        constructor(id, component) {
+            super(id, component);
+            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);
         }
-        isCancelled(_event) {
-            return false;
+        setConstraints(value) {
+            this._onDidConstraintsChangeInternal.fire(value);
         }
-        configure() {
-            this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-                if (event.defaultPrevented || this.isCancelled(event)) {
-                    event.preventDefault();
-                    return;
-                }
-                const iframes = [
-                    ...getElementsByTagName('iframe'),
-                    ...getElementsByTagName('webview'),
-                ];
-                this.pointerEventsDisposable.value = {
-                    dispose: () => {
-                        for (const iframe of iframes) {
-                            iframe.style.pointerEvents = 'auto';
-                        }
-                    },
-                };
-                for (const iframe of iframes) {
-                    iframe.style.pointerEvents = 'none';
-                }
-                this.el.classList.add('dv-dragged');
-                setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
-                this.dataDisposable.value = this.getData(event);
-                this._onDragStart.fire(event);
-                if (event.dataTransfer) {
-                    event.dataTransfer.effectAllowed = 'move';
-                    const hasData = event.dataTransfer.items.length > 0;
-                    if (!hasData) {
-                        /**
-                         * Although this is not used by dockview many third party dnd libraries will check
-                         * dataTransfer.types to determine valid drag events.
-                         *
-                         * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
-                         * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
-                         * dnd logic. You can see the code at
-                         * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
-                         */
-                        event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
-                    }
-                }
-            }), addDisposableListener(this.el, 'dragend', () => {
-                this.pointerEventsDisposable.dispose();
-                this.dataDisposable.dispose();
-            }));
+        setSize(event) {
+            this._onDidSizeChange.fire(event);
         }
     }
 
-    class TabDragHandler extends DragHandler {
-        constructor(element, accessor, group, panel) {
-            super(element);
-            this.accessor = accessor;
-            this.group = group;
-            this.panel = panel;
-            this.panelTransfer = LocalSelectionTransfer.getInstance();
+    class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
+        set pane(pane) {
+            this._pane = pane;
         }
-        getData(event) {
-            this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, this.panel.id)], PanelTransfer.prototype);
-            return {
-                dispose: () => {
-                    this.panelTransfer.clearData(PanelTransfer.prototype);
-                },
-            };
+        constructor(id, component) {
+            super(id, component);
+            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 Tab extends CompositeDisposable {
+
+    class BasePanelView extends CompositeDisposable {
         get element() {
             return this._element;
         }
-        constructor(panel, accessor, group) {
+        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.panel = panel;
-            this.accessor = accessor;
-            this.group = group;
-            this.content = undefined;
-            this._onChanged = new Emitter();
-            this.onChanged = this._onChanged.event;
-            this._onDropped = new Emitter();
-            this.onDrop = this._onDropped.event;
-            this._onDragStart = new Emitter();
-            this.onDragStart = this._onDragStart.event;
+            this.id = id;
+            this.component = component;
+            this.api = api;
+            this._height = 0;
+            this._width = 0;
             this._element = document.createElement('div');
-            this._element.className = 'tab';
-            this._element.tabIndex = 0;
-            this._element.draggable = true;
-            toggleClass(this.element, 'inactive-tab', true);
-            const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
-            this.dropTarget = new Droptarget(this._element, {
-                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.panel.id !== data.panelId;
-                    }
-                    return this.group.model.canDisplayOverlay(event, position, 'tab');
-                },
-            });
-            this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
-            this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
-                this._onDragStart.fire(event);
-            }), dragHandler, addDisposableListener(this._element, 'mousedown', (event) => {
-                if (event.defaultPrevented) {
-                    return;
+            this._element.tabIndex = -1;
+            this._element.style.outline = 'none';
+            this._element.style.height = '100%';
+            this._element.style.width = '100%';
+            this._element.style.overflow = 'hidden';
+            const focusTracker = trackFocus(this._element);
+            this.addDisposables(this.api, focusTracker.onDidFocus(() => {
+                this.api._onDidChangeFocus.fire({ isFocused: true });
+            }), focusTracker.onDidBlur(() => {
+                this.api._onDidChangeFocus.fire({ isFocused: false });
+            }), focusTracker);
+        }
+        focus() {
+            const event = new WillFocusEvent();
+            this.api._onWillFocus.fire(event);
+            if (event.defaultPrevented) {
+                return;
+            }
+            this._element.focus();
+        }
+        layout(width, height) {
+            this._width = width;
+            this._height = height;
+            this.api._onDidDimensionChange.fire({ width, height });
+            if (this.part) {
+                if (this._params) {
+                    this.part.update(this._params.params);
                 }
-                this._onChanged.fire(event);
-            }), this.dropTarget.onDrop((event) => {
-                this._onDropped.fire(event);
-            }), this.dropTarget);
+            }
         }
-        setActive(isActive) {
-            toggleClass(this.element, 'active-tab', isActive);
-            toggleClass(this.element, 'inactive-tab', !isActive);
+        init(parameters) {
+            this._params = parameters;
+            this.part = this.getComponent();
         }
-        setContent(part) {
-            if (this.content) {
-                this._element.removeChild(this.content.element);
+        update(event) {
+            var _a, _b;
+            // merge the new parameters with the existing parameters
+            this._params = Object.assign(Object.assign({}, this._params), { params: Object.assign(Object.assign({}, (_a = this._params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
+            /**
+             * delete new keys that have a value of undefined,
+             * allow values of null
+             */
+            for (const key of Object.keys(event.params)) {
+                if (event.params[key] === undefined) {
+                    delete this._params.params[key];
+                }
             }
-            this.content = part;
-            this._element.appendChild(this.content.element);
+            // update the view with the updated props
+            (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this._params.params });
+        }
+        toJSON() {
+            var _a, _b;
+            const params = (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {};
+            return {
+                id: this.id,
+                component: this.component,
+                params: Object.keys(params).length > 0 ? params : undefined,
+            };
         }
         dispose() {
+            var _a;
+            this.api.dispose();
+            (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
             super.dispose();
         }
     }
 
-    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(() => {
-            removeClasses(ghostElement, 'dv-dragged');
-            ghostElement.remove();
-        }, 0);
-    }
-
-    class GroupDragHandler extends DragHandler {
-        constructor(element, accessor, group) {
-            super(element);
-            this.accessor = accessor;
-            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));
+    class PaneviewPanel extends BasePanelView {
+        set orientation(value) {
+            this._orientation = value;
         }
-        isCancelled(_event) {
-            if (this.group.api.location.type === 'floating' && !_event.shiftKey) {
-                return true;
-            }
-            return false;
+        get orientation() {
+            return this._orientation;
         }
-        getData(dragEvent) {
-            const dataTransfer = dragEvent.dataTransfer;
-            this.panelTransfer.setData([new PanelTransfer(this.accessor.id, 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);
-                },
-            };
+        get minimumSize() {
+            const headerSize = this.headerSize;
+            const expanded = this.isExpanded();
+            const minimumBodySize = expanded ? this._minimumBodySize : 0;
+            return headerSize + minimumBodySize;
         }
-    }
-
-    class VoidContainer extends CompositeDisposable {
-        get element() {
-            return this._element;
+        get maximumSize() {
+            const headerSize = this.headerSize;
+            const expanded = this.isExpanded();
+            const maximumBodySize = expanded ? this._maximumBodySize : 0;
+            return headerSize + maximumBodySize;
         }
-        constructor(accessor, group) {
-            super();
-            this.accessor = accessor;
-            this.group = group;
-            this._onDrop = new Emitter();
-            this.onDrop = this._onDrop.event;
-            this._onDragStart = new Emitter();
-            this.onDragStart = this._onDragStart.event;
-            this._element = document.createElement('div');
-            this._element.className = 'void-container';
-            this._element.tabIndex = 0;
-            this._element.draggable = true;
-            this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'click', () => {
-                this.accessor.doSetGroupActive(this.group);
-            }));
-            const handler = new GroupDragHandler(this._element, accessor, group);
-            this.dropTraget = 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.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
-                    }
-                    return group.model.canDisplayOverlay(event, position, 'header_space');
-                },
-            });
-            this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
-            this.addDisposables(handler, handler.onDragStart((event) => {
-                this._onDragStart.fire(event);
-            }), this.dropTraget.onDrop((event) => {
-                this._onDrop.fire(event);
-            }), this.dropTraget);
+        get size() {
+            return this._size;
         }
-    }
-
-    class TabsContainer extends CompositeDisposable {
-        get panels() {
-            return this.tabs.map((_) => _.value.panel.id);
+        get orthogonalSize() {
+            return this._orthogonalSize;
         }
-        get size() {
-            return this.tabs.length;
+        set orthogonalSize(size) {
+            this._orthogonalSize = size;
         }
-        get hidden() {
-            return this._hidden;
+        get minimumBodySize() {
+            return this._minimumBodySize;
         }
-        set hidden(value) {
-            this._hidden = value;
-            this.element.style.display = value ? 'none' : '';
+        set minimumBodySize(value) {
+            this._minimumBodySize = typeof value === 'number' ? value : 0;
         }
-        show() {
-            if (!this.hidden) {
-                this.element.style.display = '';
-            }
+        get maximumBodySize() {
+            return this._maximumBodySize;
         }
-        hide() {
-            this._element.style.display = 'none';
+        set maximumBodySize(value) {
+            this._maximumBodySize =
+                typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
         }
-        setRightActionsElement(element) {
-            if (this.rightActions === element) {
+        get headerVisible() {
+            return this._headerVisible;
+        }
+        set headerVisible(value) {
+            this._headerVisible = value;
+            this.header.style.display = value ? '' : 'none';
+        }
+        constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
+            super(id, component, new PaneviewPanelApiImpl(id, component));
+            this.headerComponent = headerComponent;
+            this._onDidChangeExpansionState = new Emitter({ replay: true });
+            this.onDidChangeExpansionState = this._onDidChangeExpansionState.event;
+            this._onDidChange = new Emitter();
+            this.onDidChange = this._onDidChange.event;
+            this.headerSize = 22;
+            this._orthogonalSize = 0;
+            this._size = 0;
+            this._minimumBodySize = 100;
+            this._maximumBodySize = Number.POSITIVE_INFINITY;
+            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
+            this._orientation = orientation;
+            this.element.classList.add('pane');
+            this.addDisposables(this.api.onWillVisibilityChange((event) => {
+                const { isVisible } = event;
+                const { accessor } = this._params;
+                accessor.setVisible(this, isVisible);
+            }), this.api.onDidSizeChange((event) => {
+                this._onDidChange.fire({ size: event.size });
+            }), addDisposableListener(this.element, 'mouseenter', (ev) => {
+                this.api._onMouseEnter.fire(ev);
+            }), addDisposableListener(this.element, 'mouseleave', (ev) => {
+                this.api._onMouseLeave.fire(ev);
+            }));
+            this.addDisposables(this._onDidChangeExpansionState, this.onDidChangeExpansionState((isPanelExpanded) => {
+                this.api._onDidExpansionChange.fire({
+                    isExpanded: isPanelExpanded,
+                });
+            }), this.api.onDidFocusChange((e) => {
+                if (!this.header) {
+                    return;
+                }
+                if (e.isFocused) {
+                    addClasses(this.header, 'focused');
+                }
+                else {
+                    removeClasses(this.header, 'focused');
+                }
+            }));
+            this.renderOnce();
+        }
+        setVisible(isVisible) {
+            this.api._onDidVisibilityChange.fire({ isVisible });
+        }
+        setActive(isActive) {
+            this.api._onDidActiveChange.fire({ isActive });
+        }
+        isExpanded() {
+            return this._isExpanded;
+        }
+        setExpanded(expanded) {
+            if (this._isExpanded === expanded) {
                 return;
             }
-            if (this.rightActions) {
-                this.rightActions.remove();
-                this.rightActions = undefined;
+            this._isExpanded = expanded;
+            if (expanded) {
+                if (this.animationTimer) {
+                    clearTimeout(this.animationTimer);
+                }
+                if (this.body) {
+                    this.element.appendChild(this.body);
+                }
             }
-            if (element) {
-                this.rightActionsContainer.appendChild(element);
-                this.rightActions = element;
+            else {
+                this.animationTimer = setTimeout(() => {
+                    var _a;
+                    (_a = this.body) === null || _a === void 0 ? void 0 : _a.remove();
+                }, 200);
             }
+            this._onDidChange.fire(expanded ? { size: this.width } : {});
+            this._onDidChangeExpansionState.fire(expanded);
         }
-        setLeftActionsElement(element) {
-            if (this.leftActions === element) {
-                return;
-            }
-            if (this.leftActions) {
-                this.leftActions.remove();
-                this.leftActions = undefined;
-            }
-            if (element) {
-                this.leftActionsContainer.appendChild(element);
-                this.leftActions = element;
+        layout(size, orthogonalSize) {
+            this._size = size;
+            this._orthogonalSize = orthogonalSize;
+            const [width, height] = this.orientation === exports.Orientation.HORIZONTAL
+                ? [size, orthogonalSize]
+                : [orthogonalSize, size];
+            if (this.isExpanded()) {
+                this.expandedSize = width;
             }
+            super.layout(width, height);
         }
-        setPrefixActionsElement(element) {
-            if (this.preActions === element) {
-                return;
+        init(parameters) {
+            var _a, _b;
+            super.init(parameters);
+            if (typeof parameters.minimumBodySize === 'number') {
+                this.minimumBodySize = parameters.minimumBodySize;
             }
-            if (this.preActions) {
-                this.preActions.remove();
-                this.preActions = undefined;
+            if (typeof parameters.maximumBodySize === 'number') {
+                this.maximumBodySize = parameters.maximumBodySize;
             }
-            if (element) {
-                this.preActionsContainer.appendChild(element);
-                this.preActions = element;
+            this.bodyPart = this.getBodyComponent();
+            this.headerPart = this.getHeaderComponent();
+            this.bodyPart.init(Object.assign(Object.assign({}, parameters), { api: this.api }));
+            this.headerPart.init(Object.assign(Object.assign({}, parameters), { api: this.api }));
+            (_a = this.body) === null || _a === void 0 ? void 0 : _a.append(this.bodyPart.element);
+            (_b = this.header) === null || _b === void 0 ? void 0 : _b.append(this.headerPart.element);
+            if (typeof parameters.isExpanded === 'boolean') {
+                this.setExpanded(parameters.isExpanded);
             }
         }
-        get element() {
-            return this._element;
+        toJSON() {
+            const params = this._params;
+            return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
         }
-        isActive(tab) {
-            return (this.selectedIndex > -1 &&
-                this.tabs[this.selectedIndex].value === tab);
+        renderOnce() {
+            this.header = document.createElement('div');
+            this.header.tabIndex = 0;
+            this.header.className = 'pane-header';
+            this.header.style.height = `${this.headerSize}px`;
+            this.header.style.lineHeight = `${this.headerSize}px`;
+            this.header.style.minHeight = `${this.headerSize}px`;
+            this.header.style.maxHeight = `${this.headerSize}px`;
+            this.element.appendChild(this.header);
+            this.body = document.createElement('div');
+            this.body.className = 'pane-body';
+            this.element.appendChild(this.body);
         }
-        indexOf(id) {
-            return this.tabs.findIndex((tab) => tab.value.panel.id === id);
+        // TODO slightly hacky by-pass of the component to create a body and header component
+        getComponent() {
+            return {
+                update: (params) => {
+                    var _a, _b;
+                    (_a = this.bodyPart) === null || _a === void 0 ? void 0 : _a.update({ params });
+                    (_b = this.headerPart) === null || _b === void 0 ? void 0 : _b.update({ params });
+                },
+                dispose: () => {
+                    var _a, _b;
+                    (_a = this.bodyPart) === null || _a === void 0 ? void 0 : _a.dispose();
+                    (_b = this.headerPart) === null || _b === void 0 ? void 0 : _b.dispose();
+                },
+            };
         }
-        constructor(accessor, group) {
-            super();
+    }
+
+    class DraggablePaneviewPanel extends PaneviewPanel {
+        constructor(accessor, id, component, headerComponent, orientation, isExpanded, disableDnd) {
+            super(id, component, headerComponent, orientation, isExpanded, true);
             this.accessor = accessor;
-            this.group = group;
-            this.tabs = [];
-            this.selectedIndex = -1;
-            this._hidden = false;
-            this._onDrop = new Emitter();
-            this.onDrop = this._onDrop.event;
-            this._onTabDragStart = new Emitter();
-            this.onTabDragStart = this._onTabDragStart.event;
-            this._onGroupDragStart = new Emitter();
-            this.onGroupDragStart = this._onGroupDragStart.event;
-            this._onWillShowOverlay = new Emitter();
-            this.onWillShowOverlay = this._onWillShowOverlay.event;
-            this._element = document.createElement('div');
-            this._element.className = 'tabs-and-actions-container';
-            toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
-            this.rightActionsContainer = document.createElement('div');
-            this.rightActionsContainer.className = 'right-actions-container';
-            this.leftActionsContainer = document.createElement('div');
-            this.leftActionsContainer.className = 'left-actions-container';
-            this.preActionsContainer = document.createElement('div');
-            this.preActionsContainer.className = 'pre-actions-container';
-            this.tabContainer = document.createElement('div');
-            this.tabContainer.className = 'tabs-container';
-            this.voidContainer = new VoidContainer(this.accessor, this.group);
-            this._element.appendChild(this.preActionsContainer);
-            this._element.appendChild(this.tabContainer);
-            this._element.appendChild(this.leftActionsContainer);
-            this._element.appendChild(this.voidContainer.element);
-            this._element.appendChild(this.rightActionsContainer);
-            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._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
-                this._onGroupDragStart.fire({
-                    nativeEvent: event,
-                    group: this.group,
-                });
-            }), this.voidContainer.onDrop((event) => {
-                this._onDrop.fire({
-                    event: event.nativeEvent,
-                    index: this.tabs.length,
-                });
-            }), this.voidContainer.onWillShowOverlay((event) => {
-                this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
-                    kind: 'header_space',
-                    panel: this.group.activePanel,
-                    api: this.accessor.api,
-                    group: this.group,
-                    getData: getPanelData,
-                }));
-            }), addDisposableListener(this.voidContainer.element, 'mousedown', (event) => {
-                const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
-                if (isFloatingGroupsEnabled &&
-                    event.shiftKey &&
-                    this.group.api.location.type !== 'floating') {
-                    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;
-                }
-                const isLeftClick = event.button === 0;
-                if (isLeftClick) {
-                    this.accessor.doSetGroupActive(this.group);
-                }
-            }));
-        }
-        setActive(_isGroupActive) {
-            // noop
-        }
-        addTab(tab, index = this.tabs.length) {
-            if (index < 0 || index > this.tabs.length) {
-                throw new Error('invalid location');
-            }
-            this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
-            this.tabs = [
-                ...this.tabs.slice(0, index),
-                tab,
-                ...this.tabs.slice(index),
-            ];
-            if (this.selectedIndex < 0) {
-                this.selectedIndex = index;
+            this._onDidDrop = new Emitter();
+            this.onDidDrop = this._onDidDrop.event;
+            if (!disableDnd) {
+                this.initDragFeatures();
             }
         }
-        delete(id) {
-            const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
-            const tabToRemove = this.tabs.splice(index, 1)[0];
-            const { value, disposable } = tabToRemove;
-            disposable.dispose();
-            value.dispose();
-            value.element.remove();
-        }
-        setActivePanel(panel) {
-            this.tabs.forEach((tab) => {
-                const isActivePanel = panel.id === tab.value.panel.id;
-                tab.value.setActive(isActivePanel);
+        initDragFeatures() {
+            if (!this.header) {
+                return;
+            }
+            const id = this.id;
+            const accessorId = this.accessor.id;
+            this.header.draggable = true;
+            this.handler = new (class PaneDragHandler extends DragHandler {
+                getData() {
+                    LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
+                    return {
+                        dispose: () => {
+                            LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
+                        },
+                    };
+                }
+            })(this.header);
+            this.target = new Droptarget(this.element, {
+                acceptedTargetZones: ['top', 'bottom'],
+                overlayModel: {
+                    activationSize: { type: 'percentage', value: 50 },
+                },
+                canDisplayOverlay: (event) => {
+                    const data = getPaneData();
+                    if (data) {
+                        if (data.paneId !== this.id &&
+                            data.viewId === this.accessor.id) {
+                            return true;
+                        }
+                    }
+                    if (this.accessor.options.showDndOverlay) {
+                        return this.accessor.options.showDndOverlay({
+                            nativeEvent: event,
+                            getData: getPaneData,
+                            panel: this,
+                        });
+                    }
+                    return false;
+                },
             });
+            this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
+                this.onDrop(event);
+            }));
         }
-        openPanel(panel, index = this.tabs.length) {
-            var _a;
-            if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
+        onDrop(event) {
+            const data = getPaneData();
+            if (!data || data.viewId !== this.accessor.id) {
+                // if there is no local drag event for this panel
+                // or if the drag event was creating by another Paneview instance
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, api: new PaneviewApi(this.accessor), getData: getPaneData }));
                 return;
             }
-            const tab = new Tab(panel, this.accessor, this.group);
-            if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
-                throw new Error('invalid header component');
+            const containerApi = this._params
+                .containerApi;
+            const panelId = data.paneId;
+            const existingPanel = containerApi.getPanel(panelId);
+            if (!existingPanel) {
+                // if the panel doesn't exist
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: getPaneData, api: new PaneviewApi(this.accessor) }));
+                return;
             }
-            tab.setContent(panel.view.tab);
-            const disposable = new CompositeDisposable(tab.onDragStart((event) => {
-                this._onTabDragStart.fire({ nativeEvent: event, panel });
-            }), tab.onChanged((event) => {
-                const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
-                const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
-                    this.size === 1;
-                if (isFloatingGroupsEnabled &&
-                    !isFloatingWithOnePanel &&
-                    event.shiftKey) {
-                    event.preventDefault();
-                    const panel = this.accessor.getGroupPanel(tab.panel.id);
-                    const { top, left } = tab.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 isLeftClick = event.button === 0;
-                if (!isLeftClick || event.defaultPrevented) {
-                    return;
+            const allPanels = containerApi.panels;
+            const fromIndex = allPanels.indexOf(existingPanel);
+            let toIndex = containerApi.panels.indexOf(this);
+            if (event.position === 'left' || event.position === 'top') {
+                toIndex = Math.max(0, toIndex - 1);
+            }
+            if (event.position === 'right' || event.position === 'bottom') {
+                if (fromIndex > toIndex) {
+                    toIndex++;
                 }
-                if (this.group.activePanel !== panel) {
-                    this.group.model.openPanel(panel);
-                }
-            }), tab.onDrop((event) => {
-                this._onDrop.fire({
-                    event: event.nativeEvent,
-                    index: this.tabs.findIndex((x) => x.value === tab),
-                });
-            }), tab.onWillShowOverlay((event) => {
-                this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
-                    kind: 'tab',
-                    panel: this.group.activePanel,
-                    api: this.accessor.api,
-                    group: this.group,
-                    getData: getPanelData,
-                }));
-            }));
-            const value = { value: tab, disposable };
-            this.addTab(value, index);
-        }
-        closePanel(panel) {
-            this.delete(panel.id);
-        }
-        dispose() {
-            super.dispose();
-            for (const { value, disposable } of this.tabs) {
-                disposable.dispose();
-                value.dispose();
+                toIndex = Math.min(allPanels.length - 1, toIndex);
             }
-            this.tabs = [];
+            containerApi.movePanel(fromIndex, toIndex);
         }
     }
 
-    class DockviewDidDropEvent extends DockviewEvent {
-        get nativeEvent() {
-            return this.options.nativeEvent;
-        }
-        get position() {
-            return this.options.position;
-        }
-        get panel() {
-            return this.options.panel;
-        }
-        get group() {
-            return this.options.group;
-        }
-        get api() {
-            return this.options.api;
-        }
-        constructor(options) {
-            super();
-            this.options = options;
-        }
-        getData() {
-            return this.options.getData();
-        }
-    }
-    class DockviewWillDropEvent extends DockviewDidDropEvent {
-        get kind() {
-            return this._kind;
-        }
-        constructor(options) {
-            super(options);
-            this._kind = options.kind;
-        }
-    }
-    class WillShowOverlayLocationEvent {
-        get kind() {
-            return this.options.kind;
-        }
-        get nativeEvent() {
-            return this.event.nativeEvent;
-        }
-        get position() {
-            return this.event.position;
-        }
-        get defaultPrevented() {
-            return this.event.defaultPrevented;
-        }
-        get panel() {
-            return this.options.panel;
-        }
-        get api() {
-            return this.options.api;
-        }
-        get group() {
-            return this.options.group;
-        }
-        preventDefault() {
-            this.event.preventDefault();
-        }
-        getData() {
-            return this.options.getData();
-        }
-        constructor(event, options) {
-            this.event = event;
-            this.options = options;
-        }
-    }
-    class DockviewGroupPanelModel extends CompositeDisposable {
+    class ContentContainer extends CompositeDisposable {
         get element() {
-            throw new Error('not supported');
-        }
-        get activePanel() {
-            return this._activePanel;
-        }
-        get locked() {
-            return this._locked;
-        }
-        set locked(value) {
-            this._locked = value;
-            toggleClass(this.container, 'locked-groupview', value === 'no-drop-target' || value);
-        }
-        get isActive() {
-            return this._isGroupActive;
-        }
-        get panels() {
-            return this._panels;
-        }
-        get size() {
-            return this._panels.length;
-        }
-        get isEmpty() {
-            return this._panels.length === 0;
-        }
-        get hasWatermark() {
-            return !!(this.watermark && this.container.contains(this.watermark.element));
-        }
-        get header() {
-            return this.tabsContainer;
-        }
-        get isContentFocused() {
-            if (!document.activeElement) {
-                return false;
-            }
-            return isAncestor(document.activeElement, this.contentContainer.element);
-        }
-        get location() {
-            return this._location;
-        }
-        set location(value) {
-            this._location = value;
-            toggleClass(this.container, 'dv-groupview-floating', false);
-            toggleClass(this.container, 'dv-groupview-popout', false);
-            switch (value.type) {
-                case 'grid':
-                    this.contentContainer.dropTarget.setTargetZones([
-                        'top',
-                        'bottom',
-                        'left',
-                        'right',
-                        'center',
-                    ]);
-                    break;
-                case 'floating':
-                    this.contentContainer.dropTarget.setTargetZones(['center']);
-                    this.contentContainer.dropTarget.setTargetZones(value
-                        ? ['center']
-                        : ['top', 'bottom', 'left', 'right', 'center']);
-                    toggleClass(this.container, 'dv-groupview-floating', true);
-                    break;
-                case 'popout':
-                    this.contentContainer.dropTarget.setTargetZones(['center']);
-                    toggleClass(this.container, 'dv-groupview-popout', true);
-                    break;
-            }
-            this.groupPanel.api._onDidLocationChange.fire({
-                location: this.location,
-            });
+            return this._element;
         }
-        constructor(container, accessor, id, options, groupPanel) {
-            var _a;
+        constructor(accessor, group) {
             super();
-            this.container = container;
             this.accessor = accessor;
-            this.id = id;
-            this.options = options;
-            this.groupPanel = groupPanel;
-            this._isGroupActive = false;
-            this._locked = false;
-            this._location = { type: 'grid' };
-            this.mostRecentlyUsed = [];
-            this._onDidChange = new Emitter();
-            this.onDidChange = this._onDidChange.event;
-            this._width = 0;
-            this._height = 0;
-            this._panels = [];
-            this._panelDisposables = new Map();
-            this._onMove = new Emitter();
-            this.onMove = this._onMove.event;
-            this._onDidDrop = new Emitter();
-            this.onDidDrop = this._onDidDrop.event;
-            this._onWillDrop = new Emitter();
-            this.onWillDrop = this._onWillDrop.event;
-            this._onWillShowOverlay = new Emitter();
-            this.onWillShowOverlay = this._onWillShowOverlay.event;
-            this._onTabDragStart = new Emitter();
-            this.onTabDragStart = this._onTabDragStart.event;
-            this._onGroupDragStart = new Emitter();
-            this.onGroupDragStart = this._onGroupDragStart.event;
-            this._onDidAddPanel = new Emitter();
-            this.onDidAddPanel = this._onDidAddPanel.event;
-            this._onDidPanelTitleChange = new Emitter();
-            this.onDidPanelTitleChange = this._onDidPanelTitleChange.event;
-            this._onDidPanelParametersChange = new Emitter();
-            this.onDidPanelParametersChange = this._onDidPanelParametersChange.event;
-            this._onDidRemovePanel = new Emitter();
-            this.onDidRemovePanel = this._onDidRemovePanel.event;
-            this._onDidActivePanelChange = new Emitter();
-            this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-            this._overwriteRenderContainer = null;
-            toggleClass(this.container, 'groupview', true);
-            this._api = new DockviewApi(this.accessor);
-            this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
-            this.contentContainer = new ContentContainer(this.accessor, this);
-            container.append(this.tabsContainer.element, this.contentContainer.element);
-            this.header.hidden = !!options.hideHeader;
-            this.locked = (_a = options.locked) !== null && _a !== void 0 ? _a : false;
-            this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this._onWillShowOverlay, this.tabsContainer.onTabDragStart((event) => {
-                this._onTabDragStart.fire(event);
-            }), this.tabsContainer.onGroupDragStart((event) => {
-                this._onGroupDragStart.fire(event);
-            }), this.tabsContainer.onDrop((event) => {
-                this.handleDropEvent('header', event.event, 'center', event.index);
-            }), this.contentContainer.onDidFocus(() => {
-                this.accessor.doSetGroupActive(this.groupPanel);
-            }), this.contentContainer.onDidBlur(() => {
-                // noop
-            }), this.contentContainer.dropTarget.onDrop((event) => {
-                this.handleDropEvent('content', event.nativeEvent, event.position);
-            }), this.tabsContainer.onWillShowOverlay((event) => {
-                this._onWillShowOverlay.fire(event);
-            }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
-                this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
-                    kind: 'content',
-                    panel: this.activePanel,
-                    api: this._api,
-                    group: this.groupPanel,
-                    getData: getPanelData,
-                }));
-            }), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
-        }
-        focusContent() {
-            this.contentContainer.element.focus();
-        }
-        set renderContainer(value) {
-            this.panels.forEach((panel) => {
-                this.renderContainer.detatch(panel);
-            });
-            this._overwriteRenderContainer = value;
-            this.panels.forEach((panel) => {
-                this.rerender(panel);
-            });
-        }
-        get renderContainer() {
-            var _a;
-            return ((_a = this._overwriteRenderContainer) !== null && _a !== void 0 ? _a : this.accessor.overlayRenderContainer);
-        }
-        initialize() {
-            if (this.options.panels) {
-                this.options.panels.forEach((panel) => {
-                    this.doAddPanel(panel);
-                });
-            }
-            if (this.options.activePanel) {
-                this.openPanel(this.options.activePanel);
-            }
-            // must be run after the constructor otherwise this.parent may not be
-            // correctly initialized
-            this.setActive(this.isActive, true);
-            this.updateContainer();
-            if (this.accessor.options.createRightHeaderActionsElement) {
-                this._rightHeaderActions =
-                    this.accessor.options.createRightHeaderActionsElement(this.groupPanel);
-                this.addDisposables(this._rightHeaderActions);
-                this._rightHeaderActions.init({
-                    containerApi: this._api,
-                    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: this._api,
-                    api: this.groupPanel.api,
-                });
-                this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
-            }
-            if (this.accessor.options.createPrefixHeaderActionsElement) {
-                this._prefixHeaderActions =
-                    this.accessor.options.createPrefixHeaderActionsElement(this.groupPanel);
-                this.addDisposables(this._prefixHeaderActions);
-                this._prefixHeaderActions.init({
-                    containerApi: this._api,
-                    api: this.groupPanel.api,
-                });
-                this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
-            }
-        }
-        rerender(panel) {
-            this.contentContainer.renderPanel(panel, { asActive: false });
-        }
-        indexOf(panel) {
-            return this.tabsContainer.indexOf(panel.id);
-        }
-        toJSON() {
-            var _a;
-            const result = {
-                views: this.tabsContainer.panels,
-                activeView: (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.id,
-                id: this.id,
-            };
-            if (this.locked !== false) {
-                result.locked = this.locked;
-            }
-            if (this.header.hidden) {
-                result.hideHeader = true;
-            }
-            return result;
+            this.group = group;
+            this.disposable = new MutableDisposable();
+            this._onDidFocus = new Emitter();
+            this.onDidFocus = this._onDidFocus.event;
+            this._onDidBlur = new Emitter();
+            this.onDidBlur = this._onDidBlur.event;
+            this._element = document.createElement('div');
+            this._element.className = 'content-container';
+            this._element.tabIndex = -1;
+            this.addDisposables(this._onDidFocus, this._onDidBlur);
+            this.dropTarget = new Droptarget(this.element, {
+                acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
+                canDisplayOverlay: (event, position) => {
+                    if (this.group.locked === 'no-drop-target' ||
+                        (this.group.locked && position === 'center')) {
+                        return false;
+                    }
+                    const data = getPanelData();
+                    if (!data &&
+                        event.shiftKey &&
+                        this.group.location.type !== 'floating') {
+                        return false;
+                    }
+                    if (data && data.viewId === this.accessor.id) {
+                        if (data.groupId === this.group.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.group.panels.length === 1 &&
+                            data.groupId === this.group.id;
+                        return !groupHasOnePanelAndIsActiveDragElement;
+                    }
+                    return this.group.canDisplayOverlay(event, position, 'content');
+                },
+            });
+            this.addDisposables(this.dropTarget);
         }
-        moveToNext(options) {
-            if (!options) {
-                options = {};
-            }
-            if (!options.panel) {
-                options.panel = this.activePanel;
-            }
-            const index = options.panel ? this.panels.indexOf(options.panel) : -1;
-            let normalizedIndex;
-            if (index < this.panels.length - 1) {
-                normalizedIndex = index + 1;
+        show() {
+            this.element.style.display = '';
+        }
+        hide() {
+            this.element.style.display = 'none';
+        }
+        renderPanel(panel, options = { asActive: true }) {
+            const doRender = options.asActive ||
+                (this.panel && this.group.isPanelActive(this.panel));
+            if (this.panel &&
+                this.panel.view.content.element.parentElement === this._element) {
+                /**
+                 * If the currently attached panel is mounted directly to the content then remove it
+                 */
+                this._element.removeChild(this.panel.view.content.element);
             }
-            else if (!options.suppressRoll) {
-                normalizedIndex = 0;
+            this.panel = panel;
+            let container;
+            switch (panel.api.renderer) {
+                case 'onlyWhenVisible':
+                    this.group.renderContainer.detatch(panel);
+                    if (this.panel) {
+                        if (doRender) {
+                            this._element.appendChild(this.panel.view.content.element);
+                        }
+                    }
+                    container = this._element;
+                    break;
+                case 'always':
+                    if (panel.view.content.element.parentElement === this._element) {
+                        this._element.removeChild(panel.view.content.element);
+                    }
+                    container = this.group.renderContainer.attach({
+                        panel,
+                        referenceContainer: this,
+                    });
+                    break;
             }
-            else {
-                return;
+            if (doRender) {
+                const focusTracker = trackFocus(container);
+                const disposable = new CompositeDisposable();
+                disposable.addDisposables(focusTracker, focusTracker.onDidFocus(() => this._onDidFocus.fire()), focusTracker.onDidBlur(() => this._onDidBlur.fire()));
+                this.disposable.value = disposable;
             }
-            this.openPanel(this.panels[normalizedIndex]);
         }
-        moveToPrevious(options) {
-            if (!options) {
-                options = {};
-            }
-            if (!options.panel) {
-                options.panel = this.activePanel;
-            }
-            if (!options.panel) {
+        openPanel(panel) {
+            if (this.panel === panel) {
                 return;
             }
-            const index = this.panels.indexOf(options.panel);
-            let normalizedIndex;
-            if (index > 0) {
-                normalizedIndex = index - 1;
-            }
-            else if (!options.suppressRoll) {
-                normalizedIndex = this.panels.length - 1;
-            }
-            else {
-                return;
+            this.renderPanel(panel);
+        }
+        layout(_width, _height) {
+            // noop
+        }
+        closePanel() {
+            var _a;
+            if (this.panel) {
+                if (this.panel.api.renderer === 'onlyWhenVisible') {
+                    (_a = this.panel.view.content.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.panel.view.content.element);
+                }
             }
-            this.openPanel(this.panels[normalizedIndex]);
+            this.panel = undefined;
         }
-        containsPanel(panel) {
-            return this.panels.includes(panel);
+        dispose() {
+            this.disposable.dispose();
+            super.dispose();
         }
-        init(_params) {
-            //noop
+    }
+
+    class TabDragHandler extends DragHandler {
+        constructor(element, accessor, group, panel) {
+            super(element);
+            this.accessor = accessor;
+            this.group = group;
+            this.panel = panel;
+            this.panelTransfer = LocalSelectionTransfer.getInstance();
         }
-        update(_params) {
-            //noop
+        getData(event) {
+            this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, this.panel.id)], PanelTransfer.prototype);
+            return {
+                dispose: () => {
+                    this.panelTransfer.clearData(PanelTransfer.prototype);
+                },
+            };
         }
-        focus() {
-            var _a;
-            (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    class Tab extends CompositeDisposable {
+        get element() {
+            return this._element;
         }
-        openPanel(panel, options = {}) {
-            /**
-             * set the panel group
-             * add the panel
-             * check if group active
-             * check if panel active
-             */
-            if (typeof options.index !== 'number' ||
-                options.index > this.panels.length) {
-                options.index = this.panels.length;
-            }
-            const skipSetActive = !!options.skipSetActive;
-            // ensure the group is updated before we fire any events
-            panel.updateParentGroup(this.groupPanel, {
-                skipSetActive: options.skipSetActive,
-            });
-            this.doAddPanel(panel, options.index, {
-                skipSetActive: skipSetActive,
+        constructor(panel, accessor, group) {
+            super();
+            this.panel = panel;
+            this.accessor = accessor;
+            this.group = group;
+            this.content = undefined;
+            this._onChanged = new Emitter();
+            this.onChanged = this._onChanged.event;
+            this._onDropped = new Emitter();
+            this.onDrop = this._onDropped.event;
+            this._onDragStart = new Emitter();
+            this.onDragStart = this._onDragStart.event;
+            this._element = document.createElement('div');
+            this._element.className = 'tab';
+            this._element.tabIndex = 0;
+            this._element.draggable = true;
+            toggleClass(this.element, 'inactive-tab', true);
+            const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
+            this.dropTarget = new Droptarget(this._element, {
+                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.panel.id !== data.panelId;
+                    }
+                    return this.group.model.canDisplayOverlay(event, position, 'tab');
+                },
             });
-            if (this._activePanel === panel) {
-                this.contentContainer.renderPanel(panel, { asActive: true });
-                return;
-            }
-            if (!skipSetActive) {
-                this.doSetActivePanel(panel);
-            }
-            if (!options.skipSetGroupActive) {
-                this.accessor.doSetGroupActive(this.groupPanel);
-            }
-            if (!options.skipSetActive) {
-                this.updateContainer();
-            }
+            this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
+            this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
+                this._onDragStart.fire(event);
+            }), dragHandler, addDisposableListener(this._element, 'mousedown', (event) => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                this._onChanged.fire(event);
+            }), this.dropTarget.onDrop((event) => {
+                this._onDropped.fire(event);
+            }), this.dropTarget);
         }
-        removePanel(groupItemOrId, options = {
-            skipSetActive: false,
-        }) {
-            const id = typeof groupItemOrId === 'string'
-                ? groupItemOrId
-                : groupItemOrId.id;
-            const panelToRemove = this._panels.find((panel) => panel.id === id);
-            if (!panelToRemove) {
-                throw new Error('invalid operation');
+        setActive(isActive) {
+            toggleClass(this.element, 'active-tab', isActive);
+            toggleClass(this.element, 'inactive-tab', !isActive);
+        }
+        setContent(part) {
+            if (this.content) {
+                this._element.removeChild(this.content.element);
             }
-            return this._removePanel(panelToRemove, options);
+            this.content = part;
+            this._element.appendChild(this.content.element);
         }
-        closeAllPanels() {
-            if (this.panels.length > 0) {
-                // take a copy since we will be edting the array as we iterate through
-                const arrPanelCpy = [...this.panels];
-                for (const panel of arrPanelCpy) {
-                    this.doClose(panel);
+        dispose() {
+            super.dispose();
+        }
+    }
+
+    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(() => {
+            removeClasses(ghostElement, 'dv-dragged');
+            ghostElement.remove();
+        }, 0);
+    }
+
+    class GroupDragHandler extends DragHandler {
+        constructor(element, accessor, group) {
+            super(element);
+            this.accessor = accessor;
+            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.location.type === 'floating' && !_event.shiftKey) {
+                return true;
             }
-            else {
-                this.accessor.removeGroup(this.groupPanel);
-            }
+            return false;
         }
-        closePanel(panel) {
-            this.doClose(panel);
+        getData(dragEvent) {
+            const dataTransfer = dragEvent.dataTransfer;
+            this.panelTransfer.setData([new PanelTransfer(this.accessor.id, 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);
+                },
+            };
         }
-        doClose(panel) {
-            this.accessor.removePanel(panel);
+    }
+
+    class VoidContainer extends CompositeDisposable {
+        get element() {
+            return this._element;
         }
-        isPanelActive(panel) {
-            return this._activePanel === panel;
+        constructor(accessor, group) {
+            super();
+            this.accessor = accessor;
+            this.group = group;
+            this._onDrop = new Emitter();
+            this.onDrop = this._onDrop.event;
+            this._onDragStart = new Emitter();
+            this.onDragStart = this._onDragStart.event;
+            this._element = document.createElement('div');
+            this._element.className = 'void-container';
+            this._element.tabIndex = 0;
+            this._element.draggable = true;
+            this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'click', () => {
+                this.accessor.doSetGroupActive(this.group);
+            }));
+            const handler = new GroupDragHandler(this._element, accessor, group);
+            this.dropTraget = 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.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
+                    }
+                    return group.model.canDisplayOverlay(event, position, 'header_space');
+                },
+            });
+            this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
+            this.addDisposables(handler, handler.onDragStart((event) => {
+                this._onDragStart.fire(event);
+            }), this.dropTraget.onDrop((event) => {
+                this._onDrop.fire(event);
+            }), this.dropTraget);
         }
-        updateActions(element) {
-            this.tabsContainer.setRightActionsElement(element);
+    }
+
+    class TabsContainer extends CompositeDisposable {
+        get panels() {
+            return this.tabs.map((_) => _.value.panel.id);
         }
-        setActive(isGroupActive, force = false) {
-            if (!force && this.isActive === isGroupActive) {
-                return;
-            }
-            this._isGroupActive = isGroupActive;
-            toggleClass(this.container, 'active-group', isGroupActive);
-            toggleClass(this.container, 'inactive-group', !isGroupActive);
-            this.tabsContainer.setActive(this.isActive);
-            if (!this._activePanel && this.panels.length > 0) {
-                this.doSetActivePanel(this.panels[0]);
-            }
-            this.updateContainer();
+        get size() {
+            return this.tabs.length;
         }
-        layout(width, height) {
-            var _a;
-            this._width = width;
-            this._height = height;
-            this.contentContainer.layout(this._width, this._height);
-            if ((_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.layout) {
-                this._activePanel.layout(this._width, this._height);
-            }
+        get hidden() {
+            return this._hidden;
         }
-        _removePanel(panel, options) {
-            const isActivePanel = this._activePanel === panel;
-            this.doRemovePanel(panel);
-            if (isActivePanel && this.panels.length > 0) {
-                const nextPanel = this.mostRecentlyUsed[0];
-                this.openPanel(nextPanel, {
-                    skipSetActive: options.skipSetActive,
-                    skipSetGroupActive: options.skipSetActiveGroup,
-                });
-            }
-            if (this._activePanel && this.panels.length === 0) {
-                this.doSetActivePanel(undefined);
-            }
-            if (!options.skipSetActive) {
-                this.updateContainer();
-            }
-            return panel;
+        set hidden(value) {
+            this._hidden = value;
+            this.element.style.display = value ? 'none' : '';
         }
-        doRemovePanel(panel) {
-            const index = this.panels.indexOf(panel);
-            if (this._activePanel === panel) {
-                this.contentContainer.closePanel();
-            }
-            this.tabsContainer.delete(panel.id);
-            this._panels.splice(index, 1);
-            if (this.mostRecentlyUsed.includes(panel)) {
-                this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
-            }
-            const disposable = this._panelDisposables.get(panel.id);
-            if (disposable) {
-                disposable.dispose();
-                this._panelDisposables.delete(panel.id);
+        show() {
+            if (!this.hidden) {
+                this.element.style.display = '';
             }
-            this._onDidRemovePanel.fire({ panel });
         }
-        doAddPanel(panel, index = this.panels.length, options = { skipSetActive: false }) {
-            const existingPanel = this._panels.indexOf(panel);
-            const hasExistingPanel = existingPanel > -1;
-            this.tabsContainer.show();
-            this.contentContainer.show();
-            this.tabsContainer.openPanel(panel, index);
-            if (!options.skipSetActive) {
-                this.contentContainer.openPanel(panel);
-            }
-            if (hasExistingPanel) {
-                // TODO - need to ensure ordering hasn't changed and if it has need to re-order this.panels
-                return;
-            }
-            this.updateMru(panel);
-            this.panels.splice(index, 0, panel);
-            this._panelDisposables.set(panel.id, new CompositeDisposable(panel.api.onDidTitleChange((event) => this._onDidPanelTitleChange.fire(event)), panel.api.onDidParametersChange((event) => this._onDidPanelParametersChange.fire(event))));
-            this._onDidAddPanel.fire({ panel });
+        hide() {
+            this._element.style.display = 'none';
         }
-        doSetActivePanel(panel) {
-            if (this._activePanel === panel) {
+        setRightActionsElement(element) {
+            if (this.rightActions === element) {
                 return;
             }
-            this._activePanel = panel;
-            if (panel) {
-                this.tabsContainer.setActivePanel(panel);
-                panel.layout(this._width, this._height);
-                this.updateMru(panel);
-                this._onDidActivePanelChange.fire({
-                    panel,
-                });
-            }
-        }
-        updateMru(panel) {
-            if (this.mostRecentlyUsed.includes(panel)) {
-                this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
-            }
-            this.mostRecentlyUsed = [panel, ...this.mostRecentlyUsed];
-        }
-        updateContainer() {
-            var _a, _b;
-            toggleClass(this.container, 'empty', this.isEmpty);
-            this.panels.forEach((panel) => panel.runEvents());
-            if (this.isEmpty && !this.watermark) {
-                const watermark = this.accessor.createWatermarkComponent();
-                watermark.init({
-                    containerApi: this._api,
-                    group: this.groupPanel,
-                });
-                this.watermark = watermark;
-                addDisposableListener(this.watermark.element, 'click', () => {
-                    if (!this.isActive) {
-                        this.accessor.doSetGroupActive(this.groupPanel);
-                    }
-                });
-                this.tabsContainer.hide();
-                this.contentContainer.element.appendChild(this.watermark.element);
-                this.watermark.updateParentGroup(this.groupPanel, true);
-            }
-            if (!this.isEmpty && this.watermark) {
-                this.watermark.element.remove();
-                (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
-                this.watermark = undefined;
-                this.tabsContainer.show();
+            if (this.rightActions) {
+                this.rightActions.remove();
+                this.rightActions = undefined;
             }
-        }
-        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,
-                });
+            if (element) {
+                this.rightActionsContainer.appendChild(element);
+                this.rightActions = element;
             }
-            return false;
         }
-        handleDropEvent(type, event, position, index) {
-            if (this.locked === 'no-drop-target') {
-                return;
-            }
-            function getKind() {
-                switch (type) {
-                    case 'header':
-                        return typeof index === 'number' ? 'tab' : 'header_space';
-                    case 'content':
-                        return 'content';
-                }
-            }
-            const panel = typeof index === 'number' ? this.panels[index] : undefined;
-            const willDropEvent = new DockviewWillDropEvent({
-                nativeEvent: event,
-                position,
-                panel,
-                getData: () => getPanelData(),
-                kind: getKind(),
-                group: this.groupPanel,
-                api: this._api,
-            });
-            this._onWillDrop.fire(willDropEvent);
-            if (willDropEvent.defaultPrevented) {
+        setLeftActionsElement(element) {
+            if (this.leftActions === element) {
                 return;
             }
-            const data = getPanelData();
-            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;
-                }
-                const { groupId, panelId } = data;
-                const isSameGroup = this.id === groupId;
-                if (isSameGroup && !position) {
-                    const oldIndex = this.tabsContainer.indexOf(panelId);
-                    if (oldIndex === index) {
-                        return;
-                    }
-                }
-                this._onMove.fire({
-                    target: position,
-                    groupId: data.groupId,
-                    itemId: data.panelId,
-                    index,
-                });
+            if (this.leftActions) {
+                this.leftActions.remove();
+                this.leftActions = undefined;
             }
-            else {
-                this._onDidDrop.fire(new DockviewDidDropEvent({
-                    nativeEvent: event,
-                    position,
-                    panel,
-                    getData: () => getPanelData(),
-                    group: this.groupPanel,
-                    api: this._api,
-                }));
+            if (element) {
+                this.leftActionsContainer.appendChild(element);
+                this.leftActions = element;
             }
         }
-        dispose() {
-            var _a, _b, _c;
-            super.dispose();
-            (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.element.remove();
-            (_c = (_b = this.watermark) === null || _b === void 0 ? void 0 : _b.dispose) === null || _c === void 0 ? void 0 : _c.call(_b);
-            this.watermark = undefined;
-            for (const panel of this.panels) {
-                panel.dispose();
+        setPrefixActionsElement(element) {
+            if (this.preActions === element) {
+                return;
+            }
+            if (this.preActions) {
+                this.preActions.remove();
+                this.preActions = undefined;
+            }
+            if (element) {
+                this.preActionsContainer.appendChild(element);
+                this.preActions = element;
             }
-            this.tabsContainer.dispose();
-            this.contentContainer.dispose();
         }
-    }
-
-    class Resizable extends CompositeDisposable {
         get element() {
             return this._element;
         }
-        get disableResizing() {
-            return this._disableResizing;
+        isActive(tab) {
+            return (this.selectedIndex > -1 &&
+                this.tabs[this.selectedIndex].value === tab);
         }
-        set disableResizing(value) {
-            this._disableResizing = value;
+        indexOf(id) {
+            return this.tabs.findIndex((tab) => tab.value.panel.id === id);
         }
-        constructor(parentElement, disableResizing = false) {
+        constructor(accessor, group) {
             super();
-            this._disableResizing = disableResizing;
-            this._element = parentElement;
-            this.addDisposables(watchElementResize(this._element, (entry) => {
-                if (this.isDisposed) {
-                    /**
-                     * resize is delayed through requestAnimationFrame so there is a small chance
-                     * the component has already been disposed of
-                     */
-                    return;
+            this.accessor = accessor;
+            this.group = group;
+            this.tabs = [];
+            this.selectedIndex = -1;
+            this._hidden = false;
+            this._onDrop = new Emitter();
+            this.onDrop = this._onDrop.event;
+            this._onTabDragStart = new Emitter();
+            this.onTabDragStart = this._onTabDragStart.event;
+            this._onGroupDragStart = new Emitter();
+            this.onGroupDragStart = this._onGroupDragStart.event;
+            this._onWillShowOverlay = new Emitter();
+            this.onWillShowOverlay = this._onWillShowOverlay.event;
+            this._element = document.createElement('div');
+            this._element.className = 'tabs-and-actions-container';
+            toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
+            this.rightActionsContainer = document.createElement('div');
+            this.rightActionsContainer.className = 'right-actions-container';
+            this.leftActionsContainer = document.createElement('div');
+            this.leftActionsContainer.className = 'left-actions-container';
+            this.preActionsContainer = document.createElement('div');
+            this.preActionsContainer.className = 'pre-actions-container';
+            this.tabContainer = document.createElement('div');
+            this.tabContainer.className = 'tabs-container';
+            this.voidContainer = new VoidContainer(this.accessor, this.group);
+            this._element.appendChild(this.preActionsContainer);
+            this._element.appendChild(this.tabContainer);
+            this._element.appendChild(this.leftActionsContainer);
+            this._element.appendChild(this.voidContainer.element);
+            this._element.appendChild(this.rightActionsContainer);
+            this.addDisposables(this.accessor.onDidAddPanel((e) => {
+                if (e.api.group === this.group) {
+                    toggleClass(this._element, 'dv-single-tab', this.size === 1);
                 }
-                if (this.disableResizing) {
+            }), this.accessor.onDidRemovePanel((e) => {
+                if (e.api.group === this.group) {
+                    toggleClass(this._element, 'dv-single-tab', this.size === 1);
+                }
+            }), this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
+                this._onGroupDragStart.fire({
+                    nativeEvent: event,
+                    group: this.group,
+                });
+            }), this.voidContainer.onDrop((event) => {
+                this._onDrop.fire({
+                    event: event.nativeEvent,
+                    index: this.tabs.length,
+                });
+            }), this.voidContainer.onWillShowOverlay((event) => {
+                this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                    kind: 'header_space',
+                    panel: this.group.activePanel,
+                    api: this.accessor.api,
+                    group: this.group,
+                    getData: getPanelData,
+                }));
+            }), addDisposableListener(this.voidContainer.element, 'mousedown', (event) => {
+                const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
+                if (isFloatingGroupsEnabled &&
+                    event.shiftKey &&
+                    this.group.api.location.type !== 'floating') {
+                    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;
                 }
-                if (!this._element.offsetParent) {
-                    /**
-                     * offsetParent === null is equivalent to display: none being set on the element or one
-                     * of it's parents. In the display: none case the size will become (0, 0) which we do
-                     * not want to propagate.
-                     *
-                     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
-                     *
-                     * You could use checkVisibility() but at the time of writing it's not supported across
-                     * all Browsers
-                     *
-                     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility
-                     */
+                const isLeftClick = event.button === 0;
+                if (isLeftClick) {
+                    this.accessor.doSetGroupActive(this.group);
+                }
+            }));
+        }
+        setActive(_isGroupActive) {
+            // noop
+        }
+        addTab(tab, index = this.tabs.length) {
+            if (index < 0 || index > this.tabs.length) {
+                throw new Error('invalid location');
+            }
+            this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
+            this.tabs = [
+                ...this.tabs.slice(0, index),
+                tab,
+                ...this.tabs.slice(index),
+            ];
+            if (this.selectedIndex < 0) {
+                this.selectedIndex = index;
+            }
+        }
+        delete(id) {
+            const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
+            const tabToRemove = this.tabs.splice(index, 1)[0];
+            const { value, disposable } = tabToRemove;
+            disposable.dispose();
+            value.dispose();
+            value.element.remove();
+        }
+        setActivePanel(panel) {
+            this.tabs.forEach((tab) => {
+                const isActivePanel = panel.id === tab.value.panel.id;
+                tab.value.setActive(isActivePanel);
+            });
+        }
+        openPanel(panel, index = this.tabs.length) {
+            var _a;
+            if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
+                return;
+            }
+            const tab = new Tab(panel, this.accessor, this.group);
+            if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
+                throw new Error('invalid header component');
+            }
+            tab.setContent(panel.view.tab);
+            const disposable = new CompositeDisposable(tab.onDragStart((event) => {
+                this._onTabDragStart.fire({ nativeEvent: event, panel });
+            }), tab.onChanged((event) => {
+                const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
+                const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
+                    this.size === 1;
+                if (isFloatingGroupsEnabled &&
+                    !isFloatingWithOnePanel &&
+                    event.shiftKey) {
+                    event.preventDefault();
+                    const panel = this.accessor.getGroupPanel(tab.panel.id);
+                    const { top, left } = tab.element.getBoundingClientRect();
+                    const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
+                    this.accessor.addFloatingGroup(panel, {
+                        x: left - rootLeft,
+                        y: top - rootTop,
+                    }, { inDragMode: true });
                     return;
                 }
-                if (!isInDocument(this._element)) {
-                    /**
-                     * since the event is dispatched through requestAnimationFrame there is a small chance
-                     * the component is no longer attached to the DOM, if that is the case the dimensions
-                     * are mostly likely all zero and meaningless. we should skip this case.
-                     */
+                const isLeftClick = event.button === 0;
+                if (!isLeftClick || event.defaultPrevented) {
                     return;
                 }
-                const { width, height } = entry.contentRect;
-                this.layout(width, height);
+                if (this.group.activePanel !== panel) {
+                    this.group.model.openPanel(panel);
+                }
+            }), tab.onDrop((event) => {
+                this._onDrop.fire({
+                    event: event.nativeEvent,
+                    index: this.tabs.findIndex((x) => x.value === tab),
+                });
+            }), tab.onWillShowOverlay((event) => {
+                this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                    kind: 'tab',
+                    panel: this.group.activePanel,
+                    api: this.accessor.api,
+                    group: this.group,
+                    getData: getPanelData,
+                }));
             }));
+            const value = { value: tab, disposable };
+            this.addTab(value, index);
         }
-    }
-
-    const nextLayoutId$1 = sequentialNumberGenerator();
-    function toTarget(direction) {
-        switch (direction) {
-            case 'left':
-                return 'left';
-            case 'right':
-                return 'right';
-            case 'above':
-                return 'top';
-            case 'below':
-                return 'bottom';
-            case 'within':
-            default:
-                return 'center';
+        closePanel(panel) {
+            this.delete(panel.id);
+        }
+        dispose() {
+            super.dispose();
+            for (const { value, disposable } of this.tabs) {
+                disposable.dispose();
+                value.dispose();
+            }
+            this.tabs = [];
         }
     }
-    class BaseGrid extends Resizable {
-        get id() {
-            return this._id;
+
+    class DockviewUnhandledDragOverEvent {
+        get isAccepted() {
+            return this._isAccepted;
         }
-        get size() {
-            return this._groups.size;
+        constructor(nativeEvent, target, position, getData, group) {
+            this.nativeEvent = nativeEvent;
+            this.target = target;
+            this.position = position;
+            this.getData = getData;
+            this.group = group;
+            this._isAccepted = false;
         }
-        get groups() {
-            return Array.from(this._groups.values()).map((_) => _.value);
+        accept() {
+            this._isAccepted = true;
         }
-        get width() {
-            return this.gridview.width;
+    }
+    const PROPERTY_KEYS = (() => {
+        /**
+         * by readong the keys from an empty value object TypeScript will error
+         * when we add or remove new properties to `DockviewOptions`
+         */
+        const properties = {
+            disableAutoResizing: undefined,
+            hideBorders: undefined,
+            singleTabMode: undefined,
+            disableFloatingGroups: undefined,
+            floatingGroupBounds: undefined,
+            popoutUrl: undefined,
+            defaultRenderer: undefined,
+            debug: undefined,
+            rootOverlayModel: undefined,
+            locked: undefined,
+            disableDnd: undefined,
+        };
+        return Object.keys(properties);
+    })();
+    function isPanelOptionsWithPanel(data) {
+        if (data.referencePanel) {
+            return true;
         }
-        get height() {
-            return this.gridview.height;
+        return false;
+    }
+    function isPanelOptionsWithGroup(data) {
+        if (data.referenceGroup) {
+            return true;
         }
-        get minimumHeight() {
-            return this.gridview.minimumHeight;
+        return false;
+    }
+    function isGroupOptionsWithPanel(data) {
+        if (data.referencePanel) {
+            return true;
         }
-        get maximumHeight() {
-            return this.gridview.maximumHeight;
+        return false;
+    }
+    function isGroupOptionsWithGroup(data) {
+        if (data.referenceGroup) {
+            return true;
         }
-        get minimumWidth() {
-            return this.gridview.minimumWidth;
+        return false;
+    }
+
+    class DockviewDidDropEvent extends DockviewEvent {
+        get nativeEvent() {
+            return this.options.nativeEvent;
         }
-        get maximumWidth() {
-            return this.gridview.maximumWidth;
+        get position() {
+            return this.options.position;
         }
-        get activeGroup() {
-            return this._activeGroup;
+        get panel() {
+            return this.options.panel;
         }
-        get locked() {
-            return this.gridview.locked;
+        get group() {
+            return this.options.group;
         }
-        set locked(value) {
-            this.gridview.locked = value;
+        get api() {
+            return this.options.api;
         }
         constructor(options) {
-            super(document.createElement('div'), options.disableAutoResizing);
-            this._id = nextLayoutId$1.next();
-            this._groups = new Map();
-            this._onDidLayoutChange = new Emitter();
-            this.onDidLayoutChange = this._onDidLayoutChange.event;
-            this._onDidRemove = new Emitter();
-            this.onDidRemove = this._onDidRemove.event;
-            this._onDidAdd = new Emitter();
-            this.onDidAdd = this._onDidAdd.event;
-            this._onDidActiveChange = new Emitter();
-            this.onDidActiveChange = this._onDidActiveChange.event;
-            this._bufferOnDidLayoutChange = new TickDelayedEvent();
-            this.element.style.height = '100%';
-            this.element.style.width = '100%';
-            options.parentElement.appendChild(this.element);
-            this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
-            this.gridview.locked = !!options.locked;
-            this.element.appendChild(this.gridview.element);
-            this.layout(0, 0, true); // set some elements height/widths
-            this.addDisposables(Disposable.from(() => {
-                var _a;
-                (_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.element);
-            }), this.gridview.onDidChange(() => {
-                this._bufferOnDidLayoutChange.fire();
-            }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove, this.onDidActiveChange)(() => {
-                this._bufferOnDidLayoutChange.fire();
-            }), this._bufferOnDidLayoutChange.onEvent(() => {
-                this._onDidLayoutChange.fire();
-            }), this._bufferOnDidLayoutChange);
-        }
-        setVisible(panel, visible) {
-            this.gridview.setViewVisible(getGridLocation(panel.element), visible);
-            this._onDidLayoutChange.fire();
-        }
-        isVisible(panel) {
-            return this.gridview.isViewVisible(getGridLocation(panel.element));
-        }
-        maximizeGroup(panel) {
-            this.gridview.maximizeView(panel);
-            this.doSetGroupActive(panel);
-        }
-        isMaximizedGroup(panel) {
-            return this.gridview.maximizedView() === panel;
-        }
-        exitMaximizedGroup() {
-            this.gridview.exitMaximizedView();
-        }
-        hasMaximizedGroup() {
-            return this.gridview.hasMaximizedView();
-        }
-        get onDidMaximizedGroupChange() {
-            return this.gridview.onDidMaximizedNodeChange;
+            super();
+            this.options = options;
         }
-        doAddGroup(group, location = [0], size) {
-            this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
-            this._onDidAdd.fire(group);
+        getData() {
+            return this.options.getData();
         }
-        doRemoveGroup(group, options) {
-            if (!this._groups.has(group.id)) {
-                throw new Error('invalid operation');
-            }
-            const item = this._groups.get(group.id);
-            const view = this.gridview.remove(group, exports.Sizing.Distribute);
-            if (item && !(options === null || options === void 0 ? void 0 : options.skipDispose)) {
-                item.disposable.dispose();
-                item.value.dispose();
-                this._groups.delete(group.id);
-                this._onDidRemove.fire(group);
-            }
-            if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
-                const groups = Array.from(this._groups.values());
-                this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
-            }
-            return view;
+    }
+    class DockviewWillDropEvent extends DockviewDidDropEvent {
+        get kind() {
+            return this._kind;
         }
-        getPanel(id) {
-            var _a;
-            return (_a = this._groups.get(id)) === null || _a === void 0 ? void 0 : _a.value;
+        constructor(options) {
+            super(options);
+            this._kind = options.kind;
         }
-        doSetGroupActive(group) {
-            if (this._activeGroup === group) {
-                return;
-            }
-            if (this._activeGroup) {
-                this._activeGroup.setActive(false);
-            }
-            if (group) {
-                group.setActive(true);
-            }
-            this._activeGroup = group;
-            this._onDidActiveChange.fire(group);
+    }
+    class WillShowOverlayLocationEvent {
+        get kind() {
+            return this.options.kind;
         }
-        removeGroup(group) {
-            this.doRemoveGroup(group);
+        get nativeEvent() {
+            return this.event.nativeEvent;
         }
-        moveToNext(options) {
-            var _a;
-            if (!options) {
-                options = {};
-            }
-            if (!options.group) {
-                if (!this.activeGroup) {
-                    return;
-                }
-                options.group = this.activeGroup;
-            }
-            const location = getGridLocation(options.group.element);
-            const next = (_a = this.gridview.next(location)) === null || _a === void 0 ? void 0 : _a.view;
-            this.doSetGroupActive(next);
+        get position() {
+            return this.event.position;
         }
-        moveToPrevious(options) {
-            var _a;
-            if (!options) {
-                options = {};
-            }
-            if (!options.group) {
-                if (!this.activeGroup) {
-                    return;
-                }
-                options.group = this.activeGroup;
-            }
-            const location = getGridLocation(options.group.element);
-            const next = (_a = this.gridview.previous(location)) === null || _a === void 0 ? void 0 : _a.view;
-            this.doSetGroupActive(next);
+        get defaultPrevented() {
+            return this.event.defaultPrevented;
         }
-        layout(width, height, forceResize) {
-            const different = forceResize !== null && forceResize !== void 0 ? forceResize : (width !== this.width || height !== this.height);
-            if (!different) {
-                return;
-            }
-            this.gridview.element.style.height = `${height}px`;
-            this.gridview.element.style.width = `${width}px`;
-            this.gridview.layout(width, height);
+        get panel() {
+            return this.options.panel;
         }
-        dispose() {
-            this._onDidActiveChange.dispose();
-            this._onDidAdd.dispose();
-            this._onDidRemove.dispose();
-            this._onDidLayoutChange.dispose();
-            for (const group of this.groups) {
-                group.dispose();
-            }
-            this.gridview.dispose();
-            super.dispose();
+        get api() {
+            return this.options.api;
         }
-    }
-
-    class WillFocusEvent extends DockviewEvent {
-        constructor() {
-            super();
+        get group() {
+            return this.options.group;
         }
-    }
-    /**
-     * A core api implementation that should be used across all panel-like objects
-     */
-    class PanelApiImpl extends CompositeDisposable {
-        get isFocused() {
-            return this._isFocused;
+        preventDefault() {
+            this.event.preventDefault();
         }
-        get isActive() {
-            return this._isActive;
+        getData() {
+            return this.options.getData();
         }
-        get isVisible() {
-            return this._isVisible;
+        constructor(event, options) {
+            this.event = event;
+            this.options = options;
         }
-        get width() {
-            return this._width;
+    }
+    class DockviewGroupPanelModel extends CompositeDisposable {
+        get element() {
+            throw new Error('not supported');
         }
-        get height() {
-            return this._height;
+        get activePanel() {
+            return this._activePanel;
         }
-        constructor(id, component) {
-            super();
-            this.id = id;
-            this.component = component;
-            this._isFocused = false;
-            this._isActive = false;
-            this._isVisible = true;
-            this._width = 0;
-            this._height = 0;
-            this._parameters = {};
-            this.panelUpdatesDisposable = new MutableDisposable();
-            this._onDidDimensionChange = new Emitter();
-            this.onDidDimensionsChange = this._onDidDimensionChange.event;
-            this._onDidChangeFocus = new Emitter();
-            this.onDidFocusChange = this._onDidChangeFocus.event;
-            //
-            this._onWillFocus = new Emitter();
-            this.onWillFocus = this._onWillFocus.event;
-            //
-            this._onDidVisibilityChange = new Emitter();
-            this.onDidVisibilityChange = this._onDidVisibilityChange.event;
-            this._onWillVisibilityChange = new Emitter();
-            this.onWillVisibilityChange = this._onWillVisibilityChange.event;
-            this._onDidActiveChange = new Emitter();
-            this.onDidActiveChange = this._onDidActiveChange.event;
-            this._onActiveChange = new Emitter();
-            this.onActiveChange = this._onActiveChange.event;
-            this._onDidParametersChange = new Emitter();
-            this.onDidParametersChange = this._onDidParametersChange.event;
-            this.addDisposables(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;
-            }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onWillFocus, this._onWillVisibilityChange, this._onDidParametersChange);
+        get locked() {
+            return this._locked;
         }
-        getParameters() {
-            return this._parameters;
+        set locked(value) {
+            this._locked = value;
+            toggleClass(this.container, 'locked-groupview', value === 'no-drop-target' || value);
         }
-        initialize(panel) {
-            this.panelUpdatesDisposable.value = this._onDidParametersChange.event((parameters) => {
-                this._parameters = parameters;
-                panel.update({
-                    params: parameters,
-                });
-            });
+        get isActive() {
+            return this._isGroupActive;
         }
-        setVisible(isVisible) {
-            this._onWillVisibilityChange.fire({ isVisible });
+        get panels() {
+            return this._panels;
         }
-        setActive() {
-            this._onActiveChange.fire();
+        get size() {
+            return this._panels.length;
         }
-        updateParameters(parameters) {
-            this._onDidParametersChange.fire(parameters);
+        get isEmpty() {
+            return this._panels.length === 0;
         }
-    }
-
-    class SplitviewPanelApiImpl extends PanelApiImpl {
-        //
-        constructor(id, component) {
-            super(id, component);
-            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);
+        get hasWatermark() {
+            return !!(this.watermark && this.container.contains(this.watermark.element));
         }
-        setConstraints(value) {
-            this._onDidConstraintsChangeInternal.fire(value);
+        get header() {
+            return this.tabsContainer;
         }
-        setSize(event) {
-            this._onDidSizeChange.fire(event);
+        get isContentFocused() {
+            if (!document.activeElement) {
+                return false;
+            }
+            return isAncestor(document.activeElement, this.contentContainer.element);
         }
-    }
-
-    class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
-        set pane(pane) {
-            this._pane = pane;
+        get location() {
+            return this._location;
         }
-        constructor(id, component) {
-            super(id, component);
-            this._onDidExpansionChange = new Emitter({
-                replay: true,
+        set location(value) {
+            this._location = value;
+            toggleClass(this.container, 'dv-groupview-floating', false);
+            toggleClass(this.container, 'dv-groupview-popout', false);
+            switch (value.type) {
+                case 'grid':
+                    this.contentContainer.dropTarget.setTargetZones([
+                        'top',
+                        'bottom',
+                        'left',
+                        'right',
+                        'center',
+                    ]);
+                    break;
+                case 'floating':
+                    this.contentContainer.dropTarget.setTargetZones(['center']);
+                    this.contentContainer.dropTarget.setTargetZones(value
+                        ? ['center']
+                        : ['top', 'bottom', 'left', 'right', 'center']);
+                    toggleClass(this.container, 'dv-groupview-floating', true);
+                    break;
+                case 'popout':
+                    this.contentContainer.dropTarget.setTargetZones(['center']);
+                    toggleClass(this.container, 'dv-groupview-popout', true);
+                    break;
+            }
+            this.groupPanel.api._onDidLocationChange.fire({
+                location: this.location,
             });
-            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() {
+        constructor(container, accessor, id, options, groupPanel) {
             var _a;
-            return !!((_a = this._pane) === null || _a === void 0 ? void 0 : _a.isExpanded());
-        }
-    }
-
-    class BasePanelView extends CompositeDisposable {
-        get element() {
-            return this._element;
+            super();
+            this.container = container;
+            this.accessor = accessor;
+            this.id = id;
+            this.options = options;
+            this.groupPanel = groupPanel;
+            this._isGroupActive = false;
+            this._locked = false;
+            this._location = { type: 'grid' };
+            this.mostRecentlyUsed = [];
+            this._onDidChange = new Emitter();
+            this.onDidChange = this._onDidChange.event;
+            this._width = 0;
+            this._height = 0;
+            this._panels = [];
+            this._panelDisposables = new Map();
+            this._onMove = new Emitter();
+            this.onMove = this._onMove.event;
+            this._onDidDrop = new Emitter();
+            this.onDidDrop = this._onDidDrop.event;
+            this._onWillDrop = new Emitter();
+            this.onWillDrop = this._onWillDrop.event;
+            this._onWillShowOverlay = new Emitter();
+            this.onWillShowOverlay = this._onWillShowOverlay.event;
+            this._onTabDragStart = new Emitter();
+            this.onTabDragStart = this._onTabDragStart.event;
+            this._onGroupDragStart = new Emitter();
+            this.onGroupDragStart = this._onGroupDragStart.event;
+            this._onDidAddPanel = new Emitter();
+            this.onDidAddPanel = this._onDidAddPanel.event;
+            this._onDidPanelTitleChange = new Emitter();
+            this.onDidPanelTitleChange = this._onDidPanelTitleChange.event;
+            this._onDidPanelParametersChange = new Emitter();
+            this.onDidPanelParametersChange = this._onDidPanelParametersChange.event;
+            this._onDidRemovePanel = new Emitter();
+            this.onDidRemovePanel = this._onDidRemovePanel.event;
+            this._onDidActivePanelChange = new Emitter();
+            this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+            this._onUnhandledDragOverEvent = new Emitter();
+            this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+            this._overwriteRenderContainer = null;
+            toggleClass(this.container, 'groupview', true);
+            this._api = new DockviewApi(this.accessor);
+            this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
+            this.contentContainer = new ContentContainer(this.accessor, this);
+            container.append(this.tabsContainer.element, this.contentContainer.element);
+            this.header.hidden = !!options.hideHeader;
+            this.locked = (_a = options.locked) !== null && _a !== void 0 ? _a : false;
+            this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this._onWillShowOverlay, this.tabsContainer.onTabDragStart((event) => {
+                this._onTabDragStart.fire(event);
+            }), this.tabsContainer.onGroupDragStart((event) => {
+                this._onGroupDragStart.fire(event);
+            }), this.tabsContainer.onDrop((event) => {
+                this.handleDropEvent('header', event.event, 'center', event.index);
+            }), this.contentContainer.onDidFocus(() => {
+                this.accessor.doSetGroupActive(this.groupPanel);
+            }), this.contentContainer.onDidBlur(() => {
+                // noop
+            }), this.contentContainer.dropTarget.onDrop((event) => {
+                this.handleDropEvent('content', event.nativeEvent, event.position);
+            }), this.tabsContainer.onWillShowOverlay((event) => {
+                this._onWillShowOverlay.fire(event);
+            }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
+                this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                    kind: 'content',
+                    panel: this.activePanel,
+                    api: this._api,
+                    group: this.groupPanel,
+                    getData: getPanelData,
+                }));
+            }), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this._onUnhandledDragOverEvent);
         }
-        get width() {
-            return this._width;
+        focusContent() {
+            this.contentContainer.element.focus();
         }
-        get height() {
-            return this._height;
+        set renderContainer(value) {
+            this.panels.forEach((panel) => {
+                this.renderContainer.detatch(panel);
+            });
+            this._overwriteRenderContainer = value;
+            this.panels.forEach((panel) => {
+                this.rerender(panel);
+            });
         }
-        get params() {
+        get renderContainer() {
             var _a;
-            return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
-        }
-        constructor(id, component, api) {
-            super();
-            this.id = id;
-            this.component = component;
-            this.api = api;
-            this._height = 0;
-            this._width = 0;
-            this._element = document.createElement('div');
-            this._element.tabIndex = -1;
-            this._element.style.outline = 'none';
-            this._element.style.height = '100%';
-            this._element.style.width = '100%';
-            this._element.style.overflow = 'hidden';
-            const focusTracker = trackFocus(this._element);
-            this.addDisposables(this.api, focusTracker.onDidFocus(() => {
-                this.api._onDidChangeFocus.fire({ isFocused: true });
-            }), focusTracker.onDidBlur(() => {
-                this.api._onDidChangeFocus.fire({ isFocused: false });
-            }), focusTracker);
+            return ((_a = this._overwriteRenderContainer) !== null && _a !== void 0 ? _a : this.accessor.overlayRenderContainer);
         }
-        focus() {
-            const event = new WillFocusEvent();
-            this.api._onWillFocus.fire(event);
-            if (event.defaultPrevented) {
-                return;
+        initialize() {
+            if (this.options.panels) {
+                this.options.panels.forEach((panel) => {
+                    this.doAddPanel(panel);
+                });
             }
-            this._element.focus();
-        }
-        layout(width, height) {
-            this._width = width;
-            this._height = height;
-            this.api._onDidDimensionChange.fire({ width, height });
-            if (this.part) {
-                if (this._params) {
-                    this.part.update(this._params.params);
-                }
+            if (this.options.activePanel) {
+                this.openPanel(this.options.activePanel);
+            }
+            // must be run after the constructor otherwise this.parent may not be
+            // correctly initialized
+            this.setActive(this.isActive, true);
+            this.updateContainer();
+            if (this.accessor.options.createRightHeaderActionComponent) {
+                this._rightHeaderActions =
+                    this.accessor.options.createRightHeaderActionComponent(this.groupPanel);
+                this.addDisposables(this._rightHeaderActions);
+                this._rightHeaderActions.init({
+                    containerApi: this._api,
+                    api: this.groupPanel.api,
+                    group: this.groupPanel,
+                });
+                this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
+            }
+            if (this.accessor.options.createLeftHeaderActionComponent) {
+                this._leftHeaderActions =
+                    this.accessor.options.createLeftHeaderActionComponent(this.groupPanel);
+                this.addDisposables(this._leftHeaderActions);
+                this._leftHeaderActions.init({
+                    containerApi: this._api,
+                    api: this.groupPanel.api,
+                    group: this.groupPanel,
+                });
+                this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
+            }
+            if (this.accessor.options.createPrefixHeaderActionComponent) {
+                this._prefixHeaderActions =
+                    this.accessor.options.createPrefixHeaderActionComponent(this.groupPanel);
+                this.addDisposables(this._prefixHeaderActions);
+                this._prefixHeaderActions.init({
+                    containerApi: this._api,
+                    api: this.groupPanel.api,
+                    group: this.groupPanel,
+                });
+                this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
             }
         }
-        init(parameters) {
-            this._params = parameters;
-            this.part = this.getComponent();
+        rerender(panel) {
+            this.contentContainer.renderPanel(panel, { asActive: false });
         }
-        update(event) {
-            var _a, _b;
-            // merge the new parameters with the existing parameters
-            this._params = Object.assign(Object.assign({}, this._params), { params: Object.assign(Object.assign({}, (_a = this._params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
-            /**
-             * delete new keys that have a value of undefined,
-             * allow values of null
-             */
-            for (const key of Object.keys(event.params)) {
-                if (event.params[key] === undefined) {
-                    delete this._params.params[key];
-                }
-            }
-            // update the view with the updated props
-            (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this._params.params });
+        indexOf(panel) {
+            return this.tabsContainer.indexOf(panel.id);
         }
         toJSON() {
-            var _a, _b;
-            const params = (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {};
-            return {
+            var _a;
+            const result = {
+                views: this.tabsContainer.panels,
+                activeView: (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.id,
                 id: this.id,
-                component: this.component,
-                params: Object.keys(params).length > 0 ? params : undefined,
             };
+            if (this.locked !== false) {
+                result.locked = this.locked;
+            }
+            if (this.header.hidden) {
+                result.hideHeader = true;
+            }
+            return result;
         }
-        dispose() {
-            var _a;
-            this.api.dispose();
-            (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-            super.dispose();
-        }
-    }
-
-    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;
-        }
-        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';
+        moveToNext(options) {
+            if (!options) {
+                options = {};
+            }
+            if (!options.panel) {
+                options.panel = this.activePanel;
+            }
+            const index = options.panel ? this.panels.indexOf(options.panel) : -1;
+            let normalizedIndex;
+            if (index < this.panels.length - 1) {
+                normalizedIndex = index + 1;
+            }
+            else if (!options.suppressRoll) {
+                normalizedIndex = 0;
+            }
+            else {
+                return;
+            }
+            this.openPanel(this.panels[normalizedIndex]);
         }
-        constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
-            super(id, component, new PaneviewPanelApiImpl(id, component));
-            this.headerComponent = headerComponent;
-            this._onDidChangeExpansionState = new Emitter({ replay: true });
-            this.onDidChangeExpansionState = this._onDidChangeExpansionState.event;
-            this._onDidChange = new Emitter();
-            this.onDidChange = this._onDidChange.event;
-            this.headerSize = 22;
-            this._orthogonalSize = 0;
-            this._size = 0;
-            this._minimumBodySize = 100;
-            this._maximumBodySize = Number.POSITIVE_INFINITY;
-            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
-            this._orientation = orientation;
-            this.element.classList.add('pane');
-            this.addDisposables(this.api.onWillVisibilityChange((event) => {
-                const { isVisible } = event;
-                const { accessor } = this._params;
-                accessor.setVisible(this, isVisible);
-            }), this.api.onDidSizeChange((event) => {
-                this._onDidChange.fire({ size: event.size });
-            }), addDisposableListener(this.element, 'mouseenter', (ev) => {
-                this.api._onMouseEnter.fire(ev);
-            }), addDisposableListener(this.element, 'mouseleave', (ev) => {
-                this.api._onMouseLeave.fire(ev);
-            }));
-            this.addDisposables(this._onDidChangeExpansionState, this.onDidChangeExpansionState((isPanelExpanded) => {
-                this.api._onDidExpansionChange.fire({
-                    isExpanded: isPanelExpanded,
-                });
-            }), this.api.onDidFocusChange((e) => {
-                if (!this.header) {
-                    return;
-                }
-                if (e.isFocused) {
-                    addClasses(this.header, 'focused');
-                }
-                else {
-                    removeClasses(this.header, 'focused');
-                }
-            }));
-            this.renderOnce();
+        moveToPrevious(options) {
+            if (!options) {
+                options = {};
+            }
+            if (!options.panel) {
+                options.panel = this.activePanel;
+            }
+            if (!options.panel) {
+                return;
+            }
+            const index = this.panels.indexOf(options.panel);
+            let normalizedIndex;
+            if (index > 0) {
+                normalizedIndex = index - 1;
+            }
+            else if (!options.suppressRoll) {
+                normalizedIndex = this.panels.length - 1;
+            }
+            else {
+                return;
+            }
+            this.openPanel(this.panels[normalizedIndex]);
         }
-        setVisible(isVisible) {
-            this.api._onDidVisibilityChange.fire({ isVisible });
+        containsPanel(panel) {
+            return this.panels.includes(panel);
         }
-        setActive(isActive) {
-            this.api._onDidActiveChange.fire({ isActive });
+        init(_params) {
+            //noop
         }
-        isExpanded() {
-            return this._isExpanded;
+        update(_params) {
+            //noop
         }
-        setExpanded(expanded) {
-            if (this._isExpanded === expanded) {
+        focus() {
+            var _a;
+            (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        openPanel(panel, options = {}) {
+            /**
+             * set the panel group
+             * add the panel
+             * check if group active
+             * check if panel active
+             */
+            if (typeof options.index !== 'number' ||
+                options.index > this.panels.length) {
+                options.index = this.panels.length;
+            }
+            const skipSetActive = !!options.skipSetActive;
+            // ensure the group is updated before we fire any events
+            panel.updateParentGroup(this.groupPanel, {
+                skipSetActive: options.skipSetActive,
+            });
+            this.doAddPanel(panel, options.index, {
+                skipSetActive: skipSetActive,
+            });
+            if (this._activePanel === panel) {
+                this.contentContainer.renderPanel(panel, { asActive: true });
                 return;
             }
-            this._isExpanded = expanded;
-            if (expanded) {
-                if (this.animationTimer) {
-                    clearTimeout(this.animationTimer);
-                }
-                if (this.body) {
-                    this.element.appendChild(this.body);
+            if (!skipSetActive) {
+                this.doSetActivePanel(panel);
+            }
+            if (!options.skipSetGroupActive) {
+                this.accessor.doSetGroupActive(this.groupPanel);
+            }
+            if (!options.skipSetActive) {
+                this.updateContainer();
+            }
+        }
+        removePanel(groupItemOrId, options = {
+            skipSetActive: false,
+        }) {
+            const id = typeof groupItemOrId === 'string'
+                ? groupItemOrId
+                : groupItemOrId.id;
+            const panelToRemove = this._panels.find((panel) => panel.id === id);
+            if (!panelToRemove) {
+                throw new Error('invalid operation');
+            }
+            return this._removePanel(panelToRemove, options);
+        }
+        closeAllPanels() {
+            if (this.panels.length > 0) {
+                // take a copy since we will be edting the array as we iterate through
+                const arrPanelCpy = [...this.panels];
+                for (const panel of arrPanelCpy) {
+                    this.doClose(panel);
                 }
             }
             else {
-                this.animationTimer = setTimeout(() => {
-                    var _a;
-                    (_a = this.body) === null || _a === void 0 ? void 0 : _a.remove();
-                }, 200);
+                this.accessor.removeGroup(this.groupPanel);
             }
-            this._onDidChange.fire(expanded ? { size: this.width } : {});
-            this._onDidChangeExpansionState.fire(expanded);
         }
-        layout(size, orthogonalSize) {
-            this._size = size;
-            this._orthogonalSize = orthogonalSize;
-            const [width, height] = this.orientation === exports.Orientation.HORIZONTAL
-                ? [size, orthogonalSize]
-                : [orthogonalSize, size];
-            if (this.isExpanded()) {
-                this.expandedSize = width;
+        closePanel(panel) {
+            this.doClose(panel);
+        }
+        doClose(panel) {
+            this.accessor.removePanel(panel);
+        }
+        isPanelActive(panel) {
+            return this._activePanel === panel;
+        }
+        updateActions(element) {
+            this.tabsContainer.setRightActionsElement(element);
+        }
+        setActive(isGroupActive, force = false) {
+            if (!force && this.isActive === isGroupActive) {
+                return;
             }
-            super.layout(width, height);
+            this._isGroupActive = isGroupActive;
+            toggleClass(this.container, 'active-group', isGroupActive);
+            toggleClass(this.container, 'inactive-group', !isGroupActive);
+            this.tabsContainer.setActive(this.isActive);
+            if (!this._activePanel && this.panels.length > 0) {
+                this.doSetActivePanel(this.panels[0]);
+            }
+            this.updateContainer();
         }
-        init(parameters) {
-            var _a, _b;
-            super.init(parameters);
-            if (typeof parameters.minimumBodySize === 'number') {
-                this.minimumBodySize = parameters.minimumBodySize;
+        layout(width, height) {
+            var _a;
+            this._width = width;
+            this._height = height;
+            this.contentContainer.layout(this._width, this._height);
+            if ((_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.layout) {
+                this._activePanel.layout(this._width, this._height);
             }
-            if (typeof parameters.maximumBodySize === 'number') {
-                this.maximumBodySize = parameters.maximumBodySize;
+        }
+        _removePanel(panel, options) {
+            const isActivePanel = this._activePanel === panel;
+            this.doRemovePanel(panel);
+            if (isActivePanel && this.panels.length > 0) {
+                const nextPanel = this.mostRecentlyUsed[0];
+                this.openPanel(nextPanel, {
+                    skipSetActive: options.skipSetActive,
+                    skipSetGroupActive: options.skipSetActiveGroup,
+                });
             }
-            this.bodyPart = this.getBodyComponent();
-            this.headerPart = this.getHeaderComponent();
-            this.bodyPart.init(Object.assign(Object.assign({}, parameters), { api: this.api }));
-            this.headerPart.init(Object.assign(Object.assign({}, parameters), { api: this.api }));
-            (_a = this.body) === null || _a === void 0 ? void 0 : _a.append(this.bodyPart.element);
-            (_b = this.header) === null || _b === void 0 ? void 0 : _b.append(this.headerPart.element);
-            if (typeof parameters.isExpanded === 'boolean') {
-                this.setExpanded(parameters.isExpanded);
+            if (this._activePanel && this.panels.length === 0) {
+                this.doSetActivePanel(undefined);
+            }
+            if (!options.skipSetActive) {
+                this.updateContainer();
             }
+            return panel;
         }
-        toJSON() {
-            const params = this._params;
-            return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
+        doRemovePanel(panel) {
+            const index = this.panels.indexOf(panel);
+            if (this._activePanel === panel) {
+                this.contentContainer.closePanel();
+            }
+            this.tabsContainer.delete(panel.id);
+            this._panels.splice(index, 1);
+            if (this.mostRecentlyUsed.includes(panel)) {
+                const index = this.mostRecentlyUsed.indexOf(panel);
+                this.mostRecentlyUsed.splice(index, 1);
+            }
+            const disposable = this._panelDisposables.get(panel.id);
+            if (disposable) {
+                disposable.dispose();
+                this._panelDisposables.delete(panel.id);
+            }
+            this._onDidRemovePanel.fire({ panel });
         }
-        renderOnce() {
-            this.header = document.createElement('div');
-            this.header.tabIndex = 0;
-            this.header.className = 'pane-header';
-            this.header.style.height = `${this.headerSize}px`;
-            this.header.style.lineHeight = `${this.headerSize}px`;
-            this.header.style.minHeight = `${this.headerSize}px`;
-            this.header.style.maxHeight = `${this.headerSize}px`;
-            this.element.appendChild(this.header);
-            this.body = document.createElement('div');
-            this.body.className = 'pane-body';
-            this.element.appendChild(this.body);
+        doAddPanel(panel, index = this.panels.length, options = { skipSetActive: false }) {
+            const existingPanel = this._panels.indexOf(panel);
+            const hasExistingPanel = existingPanel > -1;
+            this.tabsContainer.show();
+            this.contentContainer.show();
+            this.tabsContainer.openPanel(panel, index);
+            if (!options.skipSetActive) {
+                this.contentContainer.openPanel(panel);
+            }
+            if (hasExistingPanel) {
+                // TODO - need to ensure ordering hasn't changed and if it has need to re-order this.panels
+                return;
+            }
+            this.updateMru(panel);
+            this.panels.splice(index, 0, panel);
+            this._panelDisposables.set(panel.id, new CompositeDisposable(panel.api.onDidTitleChange((event) => this._onDidPanelTitleChange.fire(event)), panel.api.onDidParametersChange((event) => this._onDidPanelParametersChange.fire(event))));
+            this._onDidAddPanel.fire({ panel });
         }
-        // TODO slightly hacky by-pass of the component to create a body and header component
-        getComponent() {
-            return {
-                update: (params) => {
-                    var _a, _b;
-                    (_a = this.bodyPart) === null || _a === void 0 ? void 0 : _a.update({ params });
-                    (_b = this.headerPart) === null || _b === void 0 ? void 0 : _b.update({ params });
-                },
-                dispose: () => {
-                    var _a, _b;
-                    (_a = this.bodyPart) === null || _a === void 0 ? void 0 : _a.dispose();
-                    (_b = this.headerPart) === null || _b === void 0 ? void 0 : _b.dispose();
-                },
-            };
+        doSetActivePanel(panel) {
+            if (this._activePanel === panel) {
+                return;
+            }
+            this._activePanel = panel;
+            if (panel) {
+                this.tabsContainer.setActivePanel(panel);
+                panel.layout(this._width, this._height);
+                this.updateMru(panel);
+                this._onDidActivePanelChange.fire({
+                    panel,
+                });
+            }
         }
-    }
-
-    class DraggablePaneviewPanel extends PaneviewPanel {
-        constructor(accessor, id, component, headerComponent, orientation, isExpanded, disableDnd) {
-            super(id, component, headerComponent, orientation, isExpanded, true);
-            this.accessor = accessor;
-            this._onDidDrop = new Emitter();
-            this.onDidDrop = this._onDidDrop.event;
-            if (!disableDnd) {
-                this.initDragFeatures();
+        updateMru(panel) {
+            if (this.mostRecentlyUsed.includes(panel)) {
+                this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
             }
+            this.mostRecentlyUsed = [panel, ...this.mostRecentlyUsed];
         }
-        initDragFeatures() {
-            if (!this.header) {
+        updateContainer() {
+            var _a, _b;
+            toggleClass(this.container, 'empty', this.isEmpty);
+            this.panels.forEach((panel) => panel.runEvents());
+            if (this.isEmpty && !this.watermark) {
+                const watermark = this.accessor.createWatermarkComponent();
+                watermark.init({
+                    containerApi: this._api,
+                    group: this.groupPanel,
+                });
+                this.watermark = watermark;
+                addDisposableListener(this.watermark.element, 'click', () => {
+                    if (!this.isActive) {
+                        this.accessor.doSetGroupActive(this.groupPanel);
+                    }
+                });
+                this.tabsContainer.hide();
+                this.contentContainer.element.appendChild(this.watermark.element);
+                this.watermark.updateParentGroup(this.groupPanel, true);
+            }
+            if (!this.isEmpty && this.watermark) {
+                this.watermark.element.remove();
+                (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+                this.watermark = undefined;
+                this.tabsContainer.show();
+            }
+        }
+        canDisplayOverlay(event, position, target) {
+            const firedEvent = new DockviewUnhandledDragOverEvent(event, target, position, getPanelData, this.accessor.getPanel(this.id));
+            this._onUnhandledDragOverEvent.fire(firedEvent);
+            return firedEvent.isAccepted;
+        }
+        handleDropEvent(type, event, position, index) {
+            if (this.locked === 'no-drop-target') {
                 return;
             }
-            const id = this.id;
-            const accessorId = this.accessor.id;
-            this.header.draggable = true;
-            this.handler = new (class PaneDragHandler extends DragHandler {
-                getData() {
-                    LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
-                    return {
-                        dispose: () => {
-                            LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
-                        },
-                    };
+            function getKind() {
+                switch (type) {
+                    case 'header':
+                        return typeof index === 'number' ? 'tab' : 'header_space';
+                    case 'content':
+                        return 'content';
                 }
-            })(this.header);
-            this.target = new Droptarget(this.element, {
-                acceptedTargetZones: ['top', 'bottom'],
-                overlayModel: {
-                    activationSize: { type: 'percentage', value: 50 },
-                },
-                canDisplayOverlay: (event) => {
-                    const data = getPaneData();
-                    if (data) {
-                        if (data.paneId !== this.id &&
-                            data.viewId === this.accessor.id) {
-                            return true;
-                        }
-                    }
-                    if (this.accessor.options.showDndOverlay) {
-                        return this.accessor.options.showDndOverlay({
-                            nativeEvent: event,
-                            getData: getPaneData,
-                            panel: this,
-                        });
-                    }
-                    return false;
-                },
+            }
+            const panel = typeof index === 'number' ? this.panels[index] : undefined;
+            const willDropEvent = new DockviewWillDropEvent({
+                nativeEvent: event,
+                position,
+                panel,
+                getData: () => getPanelData(),
+                kind: getKind(),
+                group: this.groupPanel,
+                api: this._api,
             });
-            this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
-                this.onDrop(event);
-            }));
-        }
-        onDrop(event) {
-            const data = getPaneData();
-            if (!data || data.viewId !== this.accessor.id) {
-                // if there is no local drag event for this panel
-                // or if the drag event was creating by another Paneview instance
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, api: new PaneviewApi(this.accessor), getData: getPaneData }));
+            this._onWillDrop.fire(willDropEvent);
+            if (willDropEvent.defaultPrevented) {
                 return;
             }
-            const containerApi = this._params
-                .containerApi;
-            const panelId = data.paneId;
-            const existingPanel = containerApi.getPanel(panelId);
-            if (!existingPanel) {
-                // if the panel doesn't exist
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: getPaneData, api: new PaneviewApi(this.accessor) }));
-                return;
+            const data = getPanelData();
+            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;
+                }
+                const { groupId, panelId } = data;
+                const isSameGroup = this.id === groupId;
+                if (isSameGroup && !position) {
+                    const oldIndex = this.tabsContainer.indexOf(panelId);
+                    if (oldIndex === index) {
+                        return;
+                    }
+                }
+                this._onMove.fire({
+                    target: position,
+                    groupId: data.groupId,
+                    itemId: data.panelId,
+                    index,
+                });
             }
-            const allPanels = containerApi.panels;
-            const fromIndex = allPanels.indexOf(existingPanel);
-            let toIndex = containerApi.panels.indexOf(this);
-            if (event.position === 'left' || event.position === 'top') {
-                toIndex = Math.max(0, toIndex - 1);
+            else {
+                this._onDidDrop.fire(new DockviewDidDropEvent({
+                    nativeEvent: event,
+                    position,
+                    panel,
+                    getData: () => getPanelData(),
+                    group: this.groupPanel,
+                    api: this._api,
+                }));
             }
-            if (event.position === 'right' || event.position === 'bottom') {
-                if (fromIndex > toIndex) {
-                    toIndex++;
-                }
-                toIndex = Math.min(allPanels.length - 1, toIndex);
+        }
+        dispose() {
+            var _a, _b, _c;
+            super.dispose();
+            (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.element.remove();
+            (_c = (_b = this.watermark) === null || _b === void 0 ? void 0 : _b.dispose) === null || _c === void 0 ? void 0 : _c.call(_b);
+            this.watermark = undefined;
+            for (const panel of this.panels) {
+                panel.dispose();
             }
-            containerApi.movePanel(fromIndex, toIndex);
+            this.tabsContainer.dispose();
+            this.contentContainer.dispose();
         }
     }
 
@@ -5681,9 +5756,12 @@
         constructor(id, accessor) {
             super(id, '__dockviewgroup__');
             this.accessor = accessor;
+            this._mutableDisposable = new MutableDisposable();
             this._onDidLocationChange = new Emitter();
             this.onDidLocationChange = this._onDidLocationChange.event;
-            this.addDisposables(this._onDidLocationChange);
+            this._onDidActivePanelChange = new Emitter();
+            this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+            this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange, this._mutableDisposable);
         }
         close() {
             if (!this._group) {
@@ -5741,6 +5819,19 @@
         }
         initialize(group) {
             this._group = group;
+            /**
+             * TODO: Annoying initialization order caveat
+             *
+             * Due to the order on initialization we know that the model isn't defined until later in the same stack-frame of setup.
+             * By queuing a microtask we can ensure the setup is completed within the same stack-frame, but after everything else has
+             * finished ensuring the `model` is defined.
+             */
+            queueMicrotask(() => {
+                this._mutableDisposable.value =
+                    this._group.model.onDidActivePanelChange((event) => {
+                        this._onDidActivePanelChange.fire(event);
+                    });
+            });
         }
     }
 
@@ -5801,31 +5892,6 @@
         }
     }
 
-    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;
-    }
-
     class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         get location() {
             return this.group.api.location;
@@ -6193,7 +6259,7 @@
             this._tab = this.createTabComponent(this.id, tabComponent);
         }
         init(params) {
-            this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
+            this.content.init(params);
             this.tab.init(params);
         }
         updateParentGroup(_group, _isPanelVisible) {
@@ -6214,20 +6280,29 @@
             (_d = (_c = this.tab).dispose) === null || _d === void 0 ? void 0 : _d.call(_c);
         }
         createContentComponent(id, componentName) {
-            var _a, _b;
-            return createComponent(id, componentName, (_a = this.accessor.options.components) !== null && _a !== void 0 ? _a : {}, this.accessor.options.frameworkComponents, (_b = this.accessor.options.frameworkComponentFactory) === null || _b === void 0 ? void 0 : _b.content);
+            return this.accessor.options.createComponent({
+                id,
+                name: componentName,
+            });
         }
         createTabComponent(id, componentName) {
-            var _a, _b;
-            if (componentName) {
-                return createComponent(id, componentName, this.accessor.options.tabComponents, this.accessor.options.frameworkTabComponents, (_a = this.accessor.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.tab, () => new DefaultTab());
-            }
-            else if (this.accessor.options.defaultTabComponent) {
-                return createComponent(id, this.accessor.options.defaultTabComponent, this.accessor.options.tabComponents, this.accessor.options.frameworkTabComponents, (_b = this.accessor.options.frameworkComponentFactory) === null || _b === void 0 ? void 0 : _b.tab, () => new DefaultTab());
-            }
-            else {
-                return new DefaultTab();
+            const name = componentName !== null && componentName !== void 0 ? componentName : this.accessor.options.defaultTabComponent;
+            if (name) {
+                if (this.accessor.options.createTabComponent) {
+                    const component = this.accessor.options.createTabComponent({
+                        id,
+                        name,
+                    });
+                    if (component) {
+                        return component;
+                    }
+                    else {
+                        return new DefaultTab();
+                    }
+                }
+                console.warn(`dockview: tabComponent '${componentName}' was not found. falling back to the default tab.`);
             }
+            return new DefaultTab();
         }
     }
 
@@ -6987,11 +7062,13 @@
             return this._api;
         }
         constructor(options) {
-            var _a, _b;
+            var _a;
             super({
                 proportionalLayout: true,
-                orientation: (_a = options.orientation) !== null && _a !== void 0 ? _a : exports.Orientation.HORIZONTAL,
-                styles: options.styles,
+                orientation: exports.Orientation.HORIZONTAL,
+                styles: options.hideBorders
+                    ? { separatorBorder: 'transparent' }
+                    : undefined,
                 parentElement: options.parentElement,
                 disableAutoResizing: options.disableAutoResizing,
                 locked: options.locked,
@@ -7009,6 +7086,8 @@
             this.onWillDrop = this._onWillDrop.event;
             this._onWillShowOverlay = new Emitter();
             this.onWillShowOverlay = this._onWillShowOverlay.event;
+            this._onUnhandledDragOverEvent = new Emitter();
+            this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
             this._onDidRemovePanel = new Emitter();
             this.onDidRemovePanel = this._onDidRemovePanel.event;
             this._onDidAddPanel = new Emitter();
@@ -7034,7 +7113,7 @@
             this.overlayRenderContainer = new OverlayRenderContainer(gready);
             toggleClass(this.gridview.element, 'dv-dockview', true);
             toggleClass(this.element, 'dv-debug', !!options.debug);
-            this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this.onDidAdd((event) => {
+            this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this.onDidAdd((event) => {
                 if (!this._moving) {
                     this._onDidAddGroup.fire(event);
                 }
@@ -7061,22 +7140,6 @@
                 }
             }));
             this._options = options;
-            if (!this.options.components) {
-                this.options.components = {};
-            }
-            if (!this.options.frameworkComponents) {
-                this.options.frameworkComponents = {};
-            }
-            if (!this.options.frameworkTabComponents) {
-                this.options.frameworkTabComponents = {};
-            }
-            if (!this.options.tabComponents) {
-                this.options.tabComponents = {};
-            }
-            if (!this.options.watermarkComponent &&
-                !this.options.watermarkFrameworkComponent) {
-                this.options.watermarkComponent = Watermark;
-            }
             this._rootDropTarget = new Droptarget(this.element, {
                 canDisplayOverlay: (event, position) => {
                     const data = getPanelData();
@@ -7091,26 +7154,20 @@
                         }
                         return true;
                     }
-                    if (this.options.showDndOverlay) {
-                        if (position === 'center' && this.gridview.length !== 0) {
-                            /**
-                             * for external events only show the four-corner drag overlays, disable
-                             * the center position so that external drag events can fall through to the group
-                             * and panel drop target handlers
-                             */
-                            return false;
-                        }
-                        return this.options.showDndOverlay({
-                            nativeEvent: event,
-                            position: position,
-                            target: 'edge',
-                            getData: getPanelData,
-                        });
+                    if (position === 'center' && this.gridview.length !== 0) {
+                        /**
+                         * for external events only show the four-corner drag overlays, disable
+                         * the center position so that external drag events can fall through to the group
+                         * and panel drop target handlers
+                         */
+                        return false;
                     }
-                    return false;
+                    const firedEvent = new DockviewUnhandledDragOverEvent(event, 'edge', position, getPanelData);
+                    this._onUnhandledDragOverEvent.fire(firedEvent);
+                    return firedEvent.isAccepted;
                 },
                 acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-                overlayModel: (_b = this.options.rootOverlayModel) !== null && _b !== void 0 ? _b : DEFAULT_ROOT_OVERLAY_MODEL,
+                overlayModel: (_a = this.options.rootOverlayModel) !== null && _a !== void 0 ? _a : DEFAULT_ROOT_OVERLAY_MODEL,
             });
             this.addDisposables(this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
                 if (this.gridview.length > 0 && event.position === 'center') {
@@ -7334,7 +7391,7 @@
                     skipDispose: true,
                     skipSetActiveGroup: true,
                 }));
-                group.model.openPanel(item, { skipSetGroupActive: true });
+                this.movingLock(() => group.model.openPanel(item, { skipSetGroupActive: true }));
             }
             else {
                 group = item;
@@ -7407,7 +7464,7 @@
                 // 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);
+                group.layout(group.width, group.height);
             }), overlay.onDidChangeEnd(() => {
                 this._bufferOnDidLayoutChange.fire();
             }), group.onDidChange((event) => {
@@ -7462,16 +7519,11 @@
         }
         updateOptions(options) {
             var _a, _b;
-            const changed_orientation = typeof options.orientation === 'string' &&
-                this.gridview.orientation !== options.orientation;
-            const changed_floatingGroupBounds = options.floatingGroupBounds !== undefined &&
+            const changed_floatingGroupBounds = 'floatingGroupBounds' in options &&
                 options.floatingGroupBounds !== this.options.floatingGroupBounds;
-            const changed_rootOverlayOptions = options.rootOverlayModel !== undefined &&
+            const changed_rootOverlayOptions = 'rootOverlayModel' in options &&
                 options.rootOverlayModel !== this.options.rootOverlayModel;
             this._options = Object.assign(Object.assign({}, this.options), options);
-            if (changed_orientation) {
-                this.gridview.orientation = options.orientation;
-            }
             if (changed_floatingGroupBounds) {
                 for (const group of this._floatingGroups) {
                     switch (this.options.floatingGroupBounds) {
@@ -7759,7 +7811,7 @@
                         ? this.getGroupPanel(options.position.referencePanel)
                         : options.position.referencePanel;
                     if (!referencePanel) {
-                        throw new Error(`referencePanel ${options.position.referencePanel} does not exist`);
+                        throw new Error(`referencePanel '${options.position.referencePanel}' does not exist`);
                     }
                     referenceGroup = this.findGroup(referencePanel);
                 }
@@ -7769,14 +7821,19 @@
                             ? (_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`);
+                        throw new Error(`referenceGroup '${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);
-                    this.doSetGroupAndPanelActive(group);
+                    group.model.openPanel(panel, {
+                        skipSetActive: options.inactive,
+                        skipSetGroupActive: options.inactive,
+                    });
+                    if (!options.inactive) {
+                        this.doSetGroupAndPanelActive(group);
+                    }
                     return panel;
                 }
             }
@@ -7799,43 +7856,64 @@
                         skipActiveGroup: true,
                     });
                     panel = this.createPanel(options, group);
-                    group.model.openPanel(panel);
+                    group.model.openPanel(panel, {
+                        skipSetActive: options.inactive,
+                        skipSetGroupActive: options.inactive,
+                    });
                 }
                 else if (referenceGroup.api.location.type === 'floating' ||
                     target === 'center') {
                     panel = this.createPanel(options, referenceGroup);
-                    referenceGroup.model.openPanel(panel);
-                    this.doSetGroupAndPanelActive(referenceGroup);
+                    referenceGroup.model.openPanel(panel, {
+                        skipSetActive: options.inactive,
+                        skipSetGroupActive: options.inactive,
+                    });
+                    if (!options.inactive) {
+                        this.doSetGroupAndPanelActive(referenceGroup);
+                    }
                 }
                 else {
                     const location = getGridLocation(referenceGroup.element);
                     const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
                     const group = this.createGroupAtLocation(relativeLocation);
                     panel = this.createPanel(options, group);
-                    group.model.openPanel(panel);
-                    this.doSetGroupAndPanelActive(group);
+                    group.model.openPanel(panel, {
+                        skipSetActive: options.inactive,
+                        skipSetGroupActive: options.inactive,
+                    });
+                    if (!options.inactive) {
+                        this.doSetGroupAndPanelActive(group);
+                    }
                 }
             }
             else if (options.floating) {
                 const group = this.createGroup();
                 this._onDidAddGroup.fire(group);
-                const o = typeof options.floating === 'object' &&
+                const coordinates = typeof options.floating === 'object' &&
                     options.floating !== null
                     ? options.floating
                     : {};
-                this.addFloatingGroup(group, o, {
+                this.addFloatingGroup(group, coordinates, {
                     inDragMode: false,
                     skipRemoveGroup: true,
                     skipActiveGroup: true,
                 });
                 panel = this.createPanel(options, group);
-                group.model.openPanel(panel);
+                group.model.openPanel(panel, {
+                    skipSetActive: options.inactive,
+                    skipSetGroupActive: options.inactive,
+                });
             }
             else {
                 const group = this.createGroupAtLocation();
                 panel = this.createPanel(options, group);
-                group.model.openPanel(panel);
-                this.doSetGroupAndPanelActive(group);
+                group.model.openPanel(panel, {
+                    skipSetActive: options.inactive,
+                    skipSetGroupActive: options.inactive,
+                });
+                if (!options.inactive) {
+                    this.doSetGroupAndPanelActive(group);
+                }
             }
             return panel;
         }
@@ -7859,12 +7937,10 @@
             }
         }
         createWatermarkComponent() {
-            var _a;
-            return createComponent('watermark-id', 'watermark-name', this.options.watermarkComponent
-                ? { 'watermark-name': this.options.watermarkComponent }
-                : {}, this.options.watermarkFrameworkComponent
-                ? { 'watermark-name': this.options.watermarkFrameworkComponent }
-                : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
+            if (this.options.createWatermarkComponent) {
+                return this.options.createWatermarkComponent();
+            }
+            return new Watermark();
         }
         updateWatermark() {
             var _a, _b;
@@ -7888,7 +7964,6 @@
         }
         addGroup(options) {
             var _a;
-            const group = this.createGroup(options);
             if (options) {
                 let referenceGroup;
                 if (isGroupOptionsWithPanel(options)) {
@@ -7922,6 +7997,7 @@
                 const target = toTarget(options.direction || 'within');
                 const location = getGridLocation(referenceGroup.element);
                 const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
+                const group = this.createGroup(options);
                 this.doAddGroup(group, relativeLocation);
                 if (!options.skipSetActive) {
                     this.doSetGroupAndPanelActive(group);
@@ -7929,6 +8005,7 @@
                 return group;
             }
             else {
+                const group = this.createGroup(options);
                 this.doAddGroup(group);
                 this.doSetGroupAndPanelActive(group);
                 return group;
@@ -8245,6 +8322,8 @@
                         return;
                     }
                     this._onWillShowOverlay.fire(event);
+                }), view.model.onUnhandledDragOverEvent((event) => {
+                    this._onUnhandledDragOverEvent.fire(event);
                 }), view.model.onDidAddPanel((event) => {
                     if (this._moving) {
                         return;
@@ -9278,6 +9357,7 @@
     exports.DockviewGroupPanelModel = DockviewGroupPanelModel;
     exports.DockviewMutableDisposable = MutableDisposable;
     exports.DockviewPanel = DockviewPanel;
+    exports.DockviewUnhandledDragOverEvent = DockviewUnhandledDragOverEvent;
     exports.DockviewWillDropEvent = DockviewWillDropEvent;
     exports.DraggablePaneviewPanel = DraggablePaneviewPanel;
     exports.Gridview = Gridview;
@@ -9285,6 +9365,7 @@
     exports.GridviewComponent = GridviewComponent;
     exports.GridviewPanel = GridviewPanel;
     exports.LocalSelectionTransfer = LocalSelectionTransfer;
+    exports.PROPERTY_KEYS = PROPERTY_KEYS;
     exports.PaneFramework = PaneFramework;
     exports.PaneTransfer = PaneTransfer;
     exports.PanelTransfer = PanelTransfer;