dockview-core 1.12.0 → 1.13.1

package/dist/dockview-core.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 1.12.0
+ * @version 1.13.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -248,18 +248,49 @@ function addDisposableListener(element, type, listener, options) {
         },
     };
 }
-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() {
@@ -2466,143 +2497,394 @@ class Gridview {
     }
 }
 
-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();
+        }), Event.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 : 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, 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.
@@ -3008,6 +3290,9 @@ class DockviewApi {
     get onWillDragPanel() {
         return this.component.onWillDragPanel;
     }
+    get onUnhandledDragOverEvent() {
+        return this.component.onUnhandledDragOverEvent;
+    }
     /**
      * All panel objects.
      */
@@ -3145,17 +3430,78 @@ class DockviewApi {
     }
 }
 
-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)
@@ -3289,6 +3635,10 @@ class Droptarget extends CompositeDisposable {
                     this.removeDropTarget();
                     return;
                 }
+                if (!this.options.canDisplayOverlay(e, quadrant)) {
+                    this.removeDropTarget();
+                    return;
+                }
                 const willShowOverlayEvent = new WillShowOverlayEvent({
                     nativeEvent: e,
                     position: quadrant,
@@ -3302,16 +3652,6 @@ class Droptarget extends CompositeDisposable {
                     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');
@@ -3502,2023 +3842,1758 @@ function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold)
     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 === 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();
-        }), Event.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 : 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, 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 === 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();
     }
 }
 
@@ -5705,9 +5780,12 @@ class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     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) {
@@ -5765,6 +5843,19 @@ class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     }
     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);
+                });
+        });
     }
 }
 
@@ -5825,31 +5916,6 @@ class DockviewGroupPanel extends GridviewPanel {
     }
 }
 
-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;
@@ -6217,7 +6283,7 @@ class DockviewPanelModel {
         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) {
@@ -6238,20 +6304,29 @@ class DockviewPanelModel {
         (_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();
     }
 }
 
@@ -7011,11 +7086,13 @@ class DockviewComponent extends BaseGrid {
         return this._api;
     }
     constructor(options) {
-        var _a, _b;
+        var _a;
         super({
             proportionalLayout: true,
-            orientation: (_a = options.orientation) !== null && _a !== void 0 ? _a : Orientation.HORIZONTAL,
-            styles: options.styles,
+            orientation: Orientation.HORIZONTAL,
+            styles: options.hideBorders
+                ? { separatorBorder: 'transparent' }
+                : undefined,
             parentElement: options.parentElement,
             disableAutoResizing: options.disableAutoResizing,
             locked: options.locked,
@@ -7033,6 +7110,8 @@ class DockviewComponent extends BaseGrid {
         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();
@@ -7058,7 +7137,7 @@ class DockviewComponent extends BaseGrid {
         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);
             }
@@ -7085,22 +7164,6 @@ class DockviewComponent extends BaseGrid {
             }
         }));
         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();
@@ -7115,26 +7178,20 @@ class DockviewComponent extends BaseGrid {
                     }
                     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') {
@@ -7358,7 +7415,7 @@ class DockviewComponent extends BaseGrid {
                 skipDispose: true,
                 skipSetActiveGroup: true,
             }));
-            group.model.openPanel(item, { skipSetGroupActive: true });
+            this.movingLock(() => group.model.openPanel(item, { skipSetGroupActive: true }));
         }
         else {
             group = item;
@@ -7431,7 +7488,7 @@ class DockviewComponent extends BaseGrid {
             // 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) => {
@@ -7486,16 +7543,11 @@ class DockviewComponent extends BaseGrid {
     }
     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) {
@@ -7783,7 +7835,7 @@ class DockviewComponent extends BaseGrid {
                     ? 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);
             }
@@ -7793,14 +7845,19 @@ class DockviewComponent extends BaseGrid {
                         ? (_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;
             }
         }
@@ -7823,43 +7880,64 @@ class DockviewComponent extends BaseGrid {
                     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;
     }
@@ -7883,12 +7961,10 @@ class DockviewComponent extends BaseGrid {
         }
     }
     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;
@@ -7912,7 +7988,6 @@ class DockviewComponent extends BaseGrid {
     }
     addGroup(options) {
         var _a;
-        const group = this.createGroup(options);
         if (options) {
             let referenceGroup;
             if (isGroupOptionsWithPanel(options)) {
@@ -7946,6 +8021,7 @@ class DockviewComponent extends BaseGrid {
             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);
@@ -7953,6 +8029,7 @@ class DockviewComponent extends BaseGrid {
             return group;
         }
         else {
+            const group = this.createGroup(options);
             this.doAddGroup(group);
             this.doSetGroupAndPanelActive(group);
             return group;
@@ -8269,6 +8346,8 @@ class DockviewComponent extends BaseGrid {
                     return;
                 }
                 this._onWillShowOverlay.fire(event);
+            }), view.model.onUnhandledDragOverEvent((event) => {
+                this._onUnhandledDragOverEvent.fire(event);
             }), view.model.onDidAddPanel((event) => {
                 if (this._moving) {
                     return;
@@ -9289,5 +9368,5 @@ class SplitviewPanel extends BasePanelView {
     }
 }
 
-export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDidDropEvent, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewWillDropEvent, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, LayoutPriority, LocalSelectionTransfer, Orientation, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, Tab, WillShowOverlayLocationEvent, createComponent, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, orthogonal, positionToDirection, toTarget };
+export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDidDropEvent, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, LayoutPriority, LocalSelectionTransfer, Orientation, PROPERTY_KEYS, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, Tab, WillShowOverlayLocationEvent, createComponent, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, orthogonal, positionToDirection, toTarget };
 //# sourceMappingURL=dockview-core.esm.js.map