dockview 1.12.0 → 1.13.0

package/dist/dockview.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.12.0
+ * @version 1.13.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -2469,6 +2469,261 @@ class Gridview {
     }
 }
 
+class Resizable extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
+    get disableResizing() {
+        return this._disableResizing;
+    }
+    set disableResizing(value) {
+        this._disableResizing = value;
+    }
+    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);
+        }));
+    }
+}
+
+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';
+    }
+}
+class BaseGrid extends Resizable {
+    get id() {
+        return this._id;
+    }
+    get size() {
+        return this._groups.size;
+    }
+    get groups() {
+        return Array.from(this._groups.values()).map((_) => _.value);
+    }
+    get width() {
+        return this.gridview.width;
+    }
+    get height() {
+        return this.gridview.height;
+    }
+    get minimumHeight() {
+        return this.gridview.minimumHeight;
+    }
+    get maximumHeight() {
+        return this.gridview.maximumHeight;
+    }
+    get minimumWidth() {
+        return this.gridview.minimumWidth;
+    }
+    get maximumWidth() {
+        return this.gridview.maximumWidth;
+    }
+    get activeGroup() {
+        return this._activeGroup;
+    }
+    get locked() {
+        return this.gridview.locked;
+    }
+    set locked(value) {
+        this.gridview.locked = value;
+    }
+    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;
+    }
+    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();
+        this._onDidLayoutChange.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.
@@ -3011,6 +3266,9 @@ class DockviewApi {
     get onWillDragPanel() {
         return this.component.onWillDragPanel;
     }
+    get onUnhandledDragOverEvent() {
+        return this.component.onUnhandledDragOverEvent;
+    }
     /**
      * All panel objects.
      */
@@ -3148,6 +3406,67 @@ class DockviewApi {
     }
 }
 
+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();
+    }
+    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();
@@ -3292,6 +3611,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,
@@ -3305,16 +3628,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');
@@ -3505,2023 +3818,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);
-        });
-    }
-    openPanel(panel, index = this.tabs.length) {
-        var _a;
-        if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
+    initDragFeatures() {
+        if (!this.header) {
             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;
-            }
-            const isLeftClick = event.button === 0;
-            if (!isLeftClick || event.defaultPrevented) {
-                return;
-            }
-            if (this.group.activePanel !== panel) {
-                this.group.model.openPanel(panel);
+        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);
+                    },
+                };
             }
-        }), 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();
-        }
-        this.tabs = [];
-    }
-}
-
-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 {
-    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,
-        });
-    }
-    constructor(container, accessor, id, options, groupPanel) {
-        var _a;
-        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;
-    }
-    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]);
-    }
-    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]);
-    }
-    containsPanel(panel) {
-        return this.panels.includes(panel);
-    }
-    init(_params) {
-        //noop
-    }
-    update(_params) {
-        //noop
-    }
-    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;
-        }
-        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.accessor.removeGroup(this.groupPanel);
-        }
-    }
-    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;
-        }
-        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();
-    }
-    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);
-        }
-    }
-    _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;
-    }
-    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);
-        }
-        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 });
-    }
-    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,
-            });
-        }
-    }
-    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.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,
+                    });
                 }
-            });
-            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) {
-        // 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,
-            });
-        }
-        return false;
+                return false;
+            },
+        });
+        this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
+            this.onDrop(event);
+        }));
     }
-    handleDropEvent(type, event, position, index) {
-        if (this.locked === 'no-drop-target') {
+    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;
         }
-        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) {
+        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,
-            });
-        }
-        else {
-            this._onDidDrop.fire(new DockviewDidDropEvent({
-                nativeEvent: event,
-                position,
-                panel,
-                getData: () => getPanelData(),
-                group: this.groupPanel,
-                api: this._api,
-            }));
+        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);
         }
-    }
-    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();
+        if (event.position === 'right' || event.position === 'bottom') {
+            if (fromIndex > toIndex) {
+                toIndex++;
+            }
+            toIndex = Math.min(allPanels.length - 1, toIndex);
         }
-        this.tabsContainer.dispose();
-        this.contentContainer.dispose();
+        containerApi.movePanel(fromIndex, toIndex);
     }
 }
 
-class Resizable extends CompositeDisposable {
+class ContentContainer extends CompositeDisposable {
     get element() {
         return this._element;
     }
-    get disableResizing() {
-        return this._disableResizing;
+    constructor(accessor, group) {
+        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);
     }
-    set disableResizing(value) {
-        this._disableResizing = value;
+    show() {
+        this.element.style.display = '';
     }
-    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);
-        }));
+    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);
+        }
+        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 focusTracker = trackFocus(container);
+            const disposable = new CompositeDisposable();
+            disposable.addDisposables(focusTracker, focusTracker.onDidFocus(() => this._onDidFocus.fire()), focusTracker.onDidBlur(() => this._onDidBlur.fire()));
+            this.disposable.value = disposable;
+        }
     }
-}
-
-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';
+    openPanel(panel) {
+        if (this.panel === panel) {
+            return;
+        }
+        this.renderPanel(panel);
     }
-}
-class BaseGrid extends Resizable {
-    get id() {
-        return this._id;
+    layout(_width, _height) {
+        // noop
     }
-    get size() {
-        return this._groups.size;
+    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;
     }
-    get groups() {
-        return Array.from(this._groups.values()).map((_) => _.value);
+    dispose() {
+        this.disposable.dispose();
+        super.dispose();
     }
-    get width() {
-        return this.gridview.width;
+}
+
+class TabDragHandler extends DragHandler {
+    constructor(element, accessor, group, panel) {
+        super(element);
+        this.accessor = accessor;
+        this.group = group;
+        this.panel = panel;
+        this.panelTransfer = LocalSelectionTransfer.getInstance();
     }
-    get height() {
-        return this.gridview.height;
+    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);
+            },
+        };
     }
-    get minimumHeight() {
-        return this.gridview.minimumHeight;
+}
+class Tab extends CompositeDisposable {
+    get element() {
+        return this._element;
     }
-    get maximumHeight() {
-        return this.gridview.maximumHeight;
+    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');
+            },
+        });
+        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);
     }
-    get minimumWidth() {
-        return this.gridview.minimumWidth;
+    setActive(isActive) {
+        toggleClass(this.element, 'active-tab', isActive);
+        toggleClass(this.element, 'inactive-tab', !isActive);
     }
-    get maximumWidth() {
-        return this.gridview.maximumWidth;
+    setContent(part) {
+        if (this.content) {
+            this._element.removeChild(this.content.element);
+        }
+        this.content = part;
+        this._element.appendChild(this.content.element);
     }
-    get activeGroup() {
-        return this._activeGroup;
+    dispose() {
+        super.dispose();
     }
-    get locked() {
-        return this.gridview.locked;
+}
+
+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));
     }
-    set locked(value) {
-        this.gridview.locked = value;
+    isCancelled(_event) {
+        if (this.group.api.location.type === 'floating' && !_event.shiftKey) {
+            return true;
+        }
+        return false;
     }
-    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);
+    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);
+            },
+        };
     }
-    setVisible(panel, visible) {
-        this.gridview.setViewVisible(getGridLocation(panel.element), visible);
-        this._onDidLayoutChange.fire();
+}
+
+class VoidContainer extends CompositeDisposable {
+    get element() {
+        return this._element;
     }
-    isVisible(panel) {
-        return this.gridview.isViewVisible(getGridLocation(panel.element));
+    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);
     }
-    maximizeGroup(panel) {
-        this.gridview.maximizeView(panel);
-        this.doSetGroupActive(panel);
+}
+
+class TabsContainer extends CompositeDisposable {
+    get panels() {
+        return this.tabs.map((_) => _.value.panel.id);
     }
-    isMaximizedGroup(panel) {
-        return this.gridview.maximizedView() === panel;
+    get size() {
+        return this.tabs.length;
     }
-    exitMaximizedGroup() {
-        this.gridview.exitMaximizedView();
+    get hidden() {
+        return this._hidden;
     }
-    hasMaximizedGroup() {
-        return this.gridview.hasMaximizedView();
+    set hidden(value) {
+        this._hidden = value;
+        this.element.style.display = value ? 'none' : '';
     }
-    get onDidMaximizedGroupChange() {
-        return this.gridview.onDidMaximizedNodeChange;
+    show() {
+        if (!this.hidden) {
+            this.element.style.display = '';
+        }
     }
-    doAddGroup(group, location = [0], size) {
-        this.gridview.addView(group, size !== null && size !== void 0 ? size : Sizing.Distribute, location);
-        this._onDidAdd.fire(group);
+    hide() {
+        this._element.style.display = 'none';
     }
-    doRemoveGroup(group, options) {
-        if (!this._groups.has(group.id)) {
-            throw new Error('invalid operation');
+    setRightActionsElement(element) {
+        if (this.rightActions === element) {
+            return;
         }
-        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 (this.rightActions) {
+            this.rightActions.remove();
+            this.rightActions = undefined;
         }
-        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);
+        if (element) {
+            this.rightActionsContainer.appendChild(element);
+            this.rightActions = element;
         }
-        return view;
     }
-    getPanel(id) {
-        var _a;
-        return (_a = this._groups.get(id)) === null || _a === void 0 ? void 0 : _a.value;
+    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;
+        }
     }
-    doSetGroupActive(group) {
-        if (this._activeGroup === group) {
+    setPrefixActionsElement(element) {
+        if (this.preActions === element) {
             return;
         }
-        if (this._activeGroup) {
-            this._activeGroup.setActive(false);
+        if (this.preActions) {
+            this.preActions.remove();
+            this.preActions = undefined;
         }
-        if (group) {
-            group.setActive(true);
+        if (element) {
+            this.preActionsContainer.appendChild(element);
+            this.preActions = element;
         }
-        this._activeGroup = group;
-        this._onDidActiveChange.fire(group);
     }
-    removeGroup(group) {
-        this.doRemoveGroup(group);
+    get element() {
+        return this._element;
     }
-    moveToNext(options) {
+    isActive(tab) {
+        return (this.selectedIndex > -1 &&
+            this.tabs[this.selectedIndex].value === tab);
+    }
+    indexOf(id) {
+        return this.tabs.findIndex((tab) => tab.value.panel.id === id);
+    }
+    constructor(accessor, group) {
+        super();
+        this.accessor = accessor;
+        this.group = group;
+        this.tabs = [];
+        this.selectedIndex = -1;
+        this._hidden = false;
+        this._onDrop = new Emitter();
+        this.onDrop = this._onDrop.event;
+        this._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;
+        }
+    }
+    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 (!options) {
-            options = {};
+        if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
+            return;
         }
-        if (!options.group) {
-            if (!this.activeGroup) {
+        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;
             }
-            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) {
+            const isLeftClick = event.button === 0;
+            if (!isLeftClick || event.defaultPrevented) {
                 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);
+            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);
     }
-    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);
+    closePanel(panel) {
+        this.delete(panel.id);
     }
     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();
+        for (const { value, disposable } of this.tabs) {
+            disposable.dispose();
+            value.dispose();
+        }
+        this.tabs = [];
     }
 }
 
-class WillFocusEvent extends DockviewEvent {
-    constructor() {
-        super();
+class DockviewUnhandledDragOverEvent {
+    get isAccepted() {
+        return this._isAccepted;
+    }
+    constructor(nativeEvent, target, position, getData, group) {
+        this.nativeEvent = nativeEvent;
+        this.target = target;
+        this.position = position;
+        this.getData = getData;
+        this.group = group;
+        this._isAccepted = false;
+    }
+    accept() {
+        this._isAccepted = true;
     }
 }
-/**
- * A core api implementation that should be used across all panel-like objects
- */
-class PanelApiImpl extends CompositeDisposable {
-    get isFocused() {
-        return this._isFocused;
+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 isActive() {
-        return this._isActive;
+    return false;
+}
+function isPanelOptionsWithGroup(data) {
+    if (data.referenceGroup) {
+        return true;
     }
-    get isVisible() {
-        return this._isVisible;
+    return false;
+}
+function isGroupOptionsWithPanel(data) {
+    if (data.referencePanel) {
+        return true;
     }
-    get width() {
-        return this._width;
+    return false;
+}
+function isGroupOptionsWithGroup(data) {
+    if (data.referenceGroup) {
+        return true;
     }
-    get height() {
-        return this._height;
+    return false;
+}
+
+class DockviewDidDropEvent extends DockviewEvent {
+    get nativeEvent() {
+        return this.options.nativeEvent;
     }
-    constructor(id, component) {
+    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.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);
+        this.options = options;
     }
-    getParameters() {
-        return this._parameters;
+    getData() {
+        return this.options.getData();
     }
-    initialize(panel) {
-        this.panelUpdatesDisposable.value = this._onDidParametersChange.event((parameters) => {
-            this._parameters = parameters;
-            panel.update({
-                params: parameters,
-            });
-        });
+}
+class DockviewWillDropEvent extends DockviewDidDropEvent {
+    get kind() {
+        return this._kind;
     }
-    setVisible(isVisible) {
-        this._onWillVisibilityChange.fire({ isVisible });
+    constructor(options) {
+        super(options);
+        this._kind = options.kind;
     }
-    setActive() {
-        this._onActiveChange.fire();
+}
+class WillShowOverlayLocationEvent {
+    get kind() {
+        return this.options.kind;
     }
-    updateParameters(parameters) {
-        this._onDidParametersChange.fire(parameters);
+    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 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);
+class DockviewGroupPanelModel extends CompositeDisposable {
+    get element() {
+        throw new Error('not supported');
     }
-    setConstraints(value) {
-        this._onDidConstraintsChangeInternal.fire(value);
+    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;
     }
-    setSize(event) {
-        this._onDidSizeChange.fire(event);
+    get panels() {
+        return this._panels;
     }
-}
-
-class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
-    set pane(pane) {
-        this._pane = pane;
+    get size() {
+        return this._panels.length;
     }
-    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);
+    get isEmpty() {
+        return this._panels.length === 0;
     }
-    setExpanded(isExpanded) {
-        var _a;
-        (_a = this._pane) === null || _a === void 0 ? void 0 : _a.setExpanded(isExpanded);
+    get hasWatermark() {
+        return !!(this.watermark && this.container.contains(this.watermark.element));
     }
-    get isExpanded() {
-        var _a;
-        return !!((_a = this._pane) === null || _a === void 0 ? void 0 : _a.isExpanded());
+    get header() {
+        return this.tabsContainer;
     }
-}
-
-class BasePanelView extends CompositeDisposable {
-    get element() {
-        return this._element;
+    get isContentFocused() {
+        if (!document.activeElement) {
+            return false;
+        }
+        return isAncestor(document.activeElement, this.contentContainer.element);
     }
-    get width() {
-        return this._width;
+    get location() {
+        return this._location;
     }
-    get height() {
-        return this._height;
+    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,
+        });
     }
-    get params() {
+    constructor(container, accessor, id, options, groupPanel) {
         var _a;
-        return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
-    }
-    constructor(id, component, api) {
         super();
+        this.container = container;
+        this.accessor = accessor;
         this.id = id;
-        this.component = component;
-        this.api = api;
-        this._height = 0;
+        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._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);
+        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);
     }
-    focus() {
-        const event = new WillFocusEvent();
-        this.api._onWillFocus.fire(event);
-        if (event.defaultPrevented) {
-            return;
-        }
-        this._element.focus();
+    focusContent() {
+        this.contentContainer.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);
-            }
-        }
+    set renderContainer(value) {
+        this.panels.forEach((panel) => {
+            this.renderContainer.detatch(panel);
+        });
+        this._overwriteRenderContainer = value;
+        this.panels.forEach((panel) => {
+            this.rerender(panel);
+        });
     }
-    init(parameters) {
-        this._params = parameters;
-        this.part = this.getComponent();
+    get renderContainer() {
+        var _a;
+        return ((_a = this._overwriteRenderContainer) !== null && _a !== void 0 ? _a : this.accessor.overlayRenderContainer);
     }
-    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];
-            }
+    initialize() {
+        if (this.options.panels) {
+            this.options.panels.forEach((panel) => {
+                this.doAddPanel(panel);
+            });
         }
-        // update the view with the updated props
-        (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: 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);
+        }
+    }
+    rerender(panel) {
+        this.contentContainer.renderPanel(panel, { asActive: false });
+    }
+    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;
+    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]);
     }
-    get orientation() {
-        return this._orientation;
+    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]);
     }
-    get minimumSize() {
-        const headerSize = this.headerSize;
-        const expanded = this.isExpanded();
-        const minimumBodySize = expanded ? this._minimumBodySize : 0;
-        return headerSize + minimumBodySize;
+    containsPanel(panel) {
+        return this.panels.includes(panel);
     }
-    get maximumSize() {
-        const headerSize = this.headerSize;
-        const expanded = this.isExpanded();
-        const maximumBodySize = expanded ? this._maximumBodySize : 0;
-        return headerSize + maximumBodySize;
+    init(_params) {
+        //noop
     }
-    get size() {
-        return this._size;
+    update(_params) {
+        //noop
     }
-    get orthogonalSize() {
-        return this._orthogonalSize;
+    focus() {
+        var _a;
+        (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
     }
-    set orthogonalSize(size) {
-        this._orthogonalSize = size;
+    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;
+        }
+        if (!skipSetActive) {
+            this.doSetActivePanel(panel);
+        }
+        if (!options.skipSetGroupActive) {
+            this.accessor.doSetGroupActive(this.groupPanel);
+        }
+        if (!options.skipSetActive) {
+            this.updateContainer();
+        }
     }
-    get minimumBodySize() {
-        return this._minimumBodySize;
+    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);
     }
-    set minimumBodySize(value) {
-        this._minimumBodySize = typeof value === 'number' ? value : 0;
+    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.accessor.removeGroup(this.groupPanel);
+        }
     }
-    get maximumBodySize() {
-        return this._maximumBodySize;
+    closePanel(panel) {
+        this.doClose(panel);
     }
-    set maximumBodySize(value) {
-        this._maximumBodySize =
-            typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
+    doClose(panel) {
+        this.accessor.removePanel(panel);
     }
-    get headerVisible() {
-        return this._headerVisible;
+    isPanelActive(panel) {
+        return this._activePanel === panel;
     }
-    set headerVisible(value) {
-        this._headerVisible = value;
-        this.header.style.display = value ? '' : 'none';
+    updateActions(element) {
+        this.tabsContainer.setRightActionsElement(element);
     }
-    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();
+    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();
     }
-    setVisible(isVisible) {
-        this.api._onDidVisibilityChange.fire({ isVisible });
+    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);
+        }
     }
-    setActive(isActive) {
-        this.api._onDidActiveChange.fire({ isActive });
+    _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;
     }
-    isExpanded() {
-        return this._isExpanded;
+    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 });
     }
-    setExpanded(expanded) {
-        if (this._isExpanded === expanded) {
+    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._isExpanded = expanded;
-        if (expanded) {
-            if (this.animationTimer) {
-                clearTimeout(this.animationTimer);
-            }
-            if (this.body) {
-                this.element.appendChild(this.body);
-            }
+        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 });
+    }
+    doSetActivePanel(panel) {
+        if (this._activePanel === panel) {
+            return;
         }
-        else {
-            this.animationTimer = setTimeout(() => {
-                var _a;
-                (_a = this.body) === null || _a === void 0 ? void 0 : _a.remove();
-            }, 200);
+        this._activePanel = panel;
+        if (panel) {
+            this.tabsContainer.setActivePanel(panel);
+            panel.layout(this._width, this._height);
+            this.updateMru(panel);
+            this._onDidActivePanelChange.fire({
+                panel,
+            });
         }
-        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;
+    updateMru(panel) {
+        if (this.mostRecentlyUsed.includes(panel)) {
+            this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
         }
-        super.layout(width, height);
+        this.mostRecentlyUsed = [panel, ...this.mostRecentlyUsed];
     }
-    init(parameters) {
+    updateContainer() {
         var _a, _b;
-        super.init(parameters);
-        if (typeof parameters.minimumBodySize === 'number') {
-            this.minimumBodySize = parameters.minimumBodySize;
-        }
-        if (typeof parameters.maximumBodySize === 'number') {
-            this.maximumBodySize = parameters.maximumBodySize;
+        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);
         }
-        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.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();
         }
     }
-    toJSON() {
-        const params = this._params;
-        return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
-    }
-    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);
-    }
-    // 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();
-            },
-        };
-    }
-}
-
-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();
-        }
+    canDisplayOverlay(event, position, target) {
+        const firedEvent = new DockviewUnhandledDragOverEvent(event, target, position, getPanelData, this.accessor.getPanel(this.id));
+        this._onUnhandledDragOverEvent.fire(firedEvent);
+        return firedEvent.isAccepted;
     }
-    initDragFeatures() {
-        if (!this.header) {
+    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();
     }
 }
 
@@ -5708,9 +5756,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) {
@@ -5768,6 +5819,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);
+                });
+        });
     }
 }
 
@@ -5828,31 +5892,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;
@@ -6220,7 +6259,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) {
@@ -6241,20 +6280,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();
     }
 }
 
@@ -6991,11 +7039,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,
@@ -7013,6 +7063,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();
@@ -7038,7 +7090,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);
             }
@@ -7065,22 +7117,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();
@@ -7095,26 +7131,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') {
@@ -7338,7 +7368,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;
@@ -7411,7 +7441,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) => {
@@ -7466,16 +7496,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) {
@@ -7763,7 +7788,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);
             }
@@ -7773,14 +7798,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;
             }
         }
@@ -7803,43 +7833,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;
     }
@@ -7863,12 +7914,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;
@@ -8249,6 +8298,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;
@@ -9494,11 +9545,6 @@ class ReactWatermarkPart {
         this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
             group: parameters.group,
             containerApi: parameters.containerApi,
-            close: () => {
-                if (parameters.group) {
-                    parameters.containerApi.removeGroup(parameters.group);
-                }
-            },
         });
     }
     focus() {
@@ -9530,9 +9576,6 @@ class ReactHeaderActionsRendererPart {
     get part() {
         return this._part;
     }
-    get group() {
-        return this._group;
-    }
     constructor(component, reactPortalStore, _group) {
         this.component = component;
         this.reactPortalStore = reactPortalStore;
@@ -9543,9 +9586,6 @@ class ReactHeaderActionsRendererPart {
         this._element.style.height = '100%';
         this._element.style.width = '100%';
     }
-    focus() {
-        // TODO
-    }
     init(parameters) {
         this.mutableDisposable.value = new CompositeDisposable(this._group.model.onDidAddPanel(() => {
             this.updatePanels();
@@ -9565,15 +9605,15 @@ class ReactHeaderActionsRendererPart {
             group: this._group,
         });
     }
-    update(event) {
-        var _a;
-        (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
-    }
     dispose() {
         var _a;
         this.mutableDisposable.dispose();
         (_a = this._part) === null || _a === void 0 ? void 0 : _a.dispose();
     }
+    update(event) {
+        var _a;
+        (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
+    }
     updatePanels() {
         this.update({ params: { panels: this._group.model.panels } });
     }
@@ -9601,72 +9641,72 @@ function createGroupControlElement(component, store) {
         : undefined;
 }
 const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
+function extractCoreOptions(props) {
+    const coreOptions = PROPERTY_KEYS.reduce((obj, key) => {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
 const DockviewReact = React.forwardRef((props, ref) => {
     const domRef = React.useRef(null);
     const dockviewRef = React.useRef();
     const [portals, addPortal] = usePortalsLifecycle();
     React.useImperativeHandle(ref, () => domRef.current, []);
+    const prevProps = React.useRef({});
+    React.useEffect(() => {
+        const changes = {};
+        PROPERTY_KEYS.forEach((propKey) => {
+            const key = propKey;
+            const propValue = props[key];
+            if (key in props && propValue !== prevProps.current[key]) {
+                changes[key] = propValue;
+            }
+        });
+        if (dockviewRef.current) {
+            dockviewRef.current.updateOptions(changes);
+        }
+        prevProps.current = props;
+    }, PROPERTY_KEYS.map((key) => props[key]));
     React.useEffect(() => {
         var _a;
         if (!domRef.current) {
-            return () => {
-                // noop
-            };
+            return;
         }
-        const factory = {
-            content: {
-                createComponent: (_id, componentId, component) => {
-                    return new ReactPanelContentPart(componentId, component, {
-                        addPortal,
-                    });
-                },
-            },
-            tab: {
-                createComponent: (_id, componentId, component) => {
-                    return new ReactPanelHeaderPart(componentId, component, {
-                        addPortal,
-                    });
-                },
-            },
-            watermark: {
-                createComponent: (_id, componentId, component) => {
-                    return new ReactWatermarkPart(componentId, component, {
-                        addPortal,
-                    });
-                },
-            },
-        };
         const frameworkTabComponents = (_a = props.tabComponents) !== null && _a !== void 0 ? _a : {};
         if (props.defaultTabComponent) {
             frameworkTabComponents[DEFAULT_REACT_TAB] =
                 props.defaultTabComponent;
         }
-        const dockview = new DockviewComponent({
+        const frameworkOptions = {
+            createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
+            createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
+            createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
+            createComponent: (options) => {
+                return new ReactPanelContentPart(options.id, props.components[options.name], {
+                    addPortal,
+                });
+            },
+            createTabComponent(options) {
+                return new ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
+                    addPortal,
+                });
+            },
+            createWatermarkComponent: props.watermarkComponent
+                ? () => {
+                    return new ReactWatermarkPart('watermark', props.watermarkComponent, {
+                        addPortal,
+                    });
+                }
+                : undefined,
             parentElement: domRef.current,
-            frameworkComponentFactory: factory,
-            frameworkComponents: props.components,
-            disableAutoResizing: props.disableAutoResizing,
-            frameworkTabComponents,
-            watermarkFrameworkComponent: props.watermarkComponent,
             defaultTabComponent: props.defaultTabComponent
                 ? DEFAULT_REACT_TAB
                 : undefined,
-            styles: props.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : undefined,
-            showDndOverlay: props.showDndOverlay,
-            createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
-            createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
-            createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
-            singleTabMode: props.singleTabMode,
-            disableFloatingGroups: props.disableFloatingGroups,
-            floatingGroupBounds: props.floatingGroupBounds,
-            defaultRenderer: props.defaultRenderer,
-            debug: props.debug,
-            rootOverlayModel: props.rootOverlayModel,
-            locked: props.locked,
-            disableDnd: props.disableDnd,
-        });
+        };
+        const dockview = new DockviewComponent(Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
         const { clientWidth, clientHeight } = domRef.current;
         dockview.layout(clientWidth, clientHeight);
         if (props.onReady) {
@@ -9677,20 +9717,6 @@ const DockviewReact = React.forwardRef((props, ref) => {
             dockview.dispose();
         };
     }, []);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.locked = !!props.locked;
-    }, [props.locked]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            disableDnd: props.disableDnd,
-        });
-    }, [props.disableDnd]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
             return () => {
@@ -9712,63 +9738,43 @@ const DockviewReact = React.forwardRef((props, ref) => {
                 // noop
             };
         }
-        const disposable = dockviewRef.current.onWillDrop((event) => {
-            if (props.onWillDrop) {
-                props.onWillDrop(event);
+        const disposable = dockviewRef.current.onUnhandledDragOverEvent((event) => {
+            var _a;
+            if ((_a = props.showDndOverlay) === null || _a === void 0 ? void 0 : _a.call(props, event)) {
+                event.accept();
             }
         });
         return () => {
             disposable.dispose();
         };
-    }, [props.onWillDrop]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            frameworkComponents: props.components,
-        });
-    }, [props.components]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            floatingGroupBounds: props.floatingGroupBounds,
-        });
-    }, [props.floatingGroupBounds]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            watermarkFrameworkComponent: props.watermarkComponent,
-        });
-    }, [props.watermarkComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            showDndOverlay: props.showDndOverlay,
-        });
     }, [props.showDndOverlay]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
-            return;
+            return () => {
+                // noop
+            };
         }
-        dockviewRef.current.updateOptions({
-            frameworkTabComponents: props.tabComponents,
+        const disposable = dockviewRef.current.onWillDrop((event) => {
+            if (props.onWillDrop) {
+                props.onWillDrop(event);
+            }
         });
-    }, [props.tabComponents]);
+        return () => {
+            disposable.dispose();
+        };
+    }, [props.onWillDrop]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
         dockviewRef.current.updateOptions({
-            disableFloatingGroups: props.disableFloatingGroups,
+            createComponent: (options) => {
+                return new ReactPanelContentPart(options.id, props.components[options.name], {
+                    addPortal,
+                });
+            },
         });
-    }, [props.disableFloatingGroups]);
+    }, [props.components]);
     React.useEffect(() => {
         var _a;
         if (!dockviewRef.current) {
@@ -9783,39 +9789,49 @@ const DockviewReact = React.forwardRef((props, ref) => {
             defaultTabComponent: props.defaultTabComponent
                 ? DEFAULT_REACT_TAB
                 : undefined,
-            frameworkTabComponents,
+            createTabComponent(options) {
+                return new ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
+                    addPortal,
+                });
+            },
         });
-    }, [props.defaultTabComponent]);
+    }, [props.tabComponents, props.defaultTabComponent]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
         dockviewRef.current.updateOptions({
-            createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
+            createWatermarkComponent: props.watermarkComponent
+                ? () => {
+                    return new ReactWatermarkPart('watermark', props.watermarkComponent, {
+                        addPortal,
+                    });
+                }
+                : undefined,
         });
-    }, [props.rightHeaderActionsComponent]);
+    }, [props.watermarkComponent]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
         dockviewRef.current.updateOptions({
-            createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
+            createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
         });
-    }, [props.leftHeaderActionsComponent]);
+    }, [props.rightHeaderActionsComponent]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
         dockviewRef.current.updateOptions({
-            rootOverlayModel: props.rootOverlayModel,
+            createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
         });
-    }, [props.rootOverlayModel]);
+    }, [props.leftHeaderActionsComponent]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
         dockviewRef.current.updateOptions({
-            createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
+            createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
         });
     }, [props.prefixHeaderActionsComponent]);
     return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
@@ -10140,5 +10156,5 @@ const PaneviewReact = React.forwardRef((props, ref) => {
 });
 PaneviewReact.displayName = 'PaneviewComponent';
 
-export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDefaultTab, DockviewDidDropEvent, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewReact, DockviewWillDropEvent, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, LayoutPriority, LocalSelectionTransfer, Orientation, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, WillShowOverlayLocationEvent, createComponent, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, isReactComponent, orthogonal, positionToDirection, toTarget, usePortalsLifecycle };
+export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDefaultTab, DockviewDidDropEvent, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewReact, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, LayoutPriority, LocalSelectionTransfer, Orientation, PROPERTY_KEYS, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, WillShowOverlayLocationEvent, createComponent, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, isReactComponent, orthogonal, positionToDirection, toTarget, usePortalsLifecycle };
 //# sourceMappingURL=dockview.esm.js.map