dockview 1.11.0 → 1.13.0

package/dist/dockview.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.11.0
+ * @version 1.13.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -2471,6 +2471,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();
+        }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove, this.onDidActiveChange)(() => {
+            this._bufferOnDidLayoutChange.fire();
+        }), this._bufferOnDidLayoutChange.onEvent(() => {
+            this._onDidLayoutChange.fire();
+        }), this._bufferOnDidLayoutChange);
+    }
+    setVisible(panel, visible) {
+        this.gridview.setViewVisible(getGridLocation(panel.element), visible);
+        this._onDidLayoutChange.fire();
+    }
+    isVisible(panel) {
+        return this.gridview.isViewVisible(getGridLocation(panel.element));
+    }
+    maximizeGroup(panel) {
+        this.gridview.maximizeView(panel);
+        this.doSetGroupActive(panel);
+    }
+    isMaximizedGroup(panel) {
+        return this.gridview.maximizedView() === panel;
+    }
+    exitMaximizedGroup() {
+        this.gridview.exitMaximizedView();
+    }
+    hasMaximizedGroup() {
+        return this.gridview.hasMaximizedView();
+    }
+    get onDidMaximizedGroupChange() {
+        return this.gridview.onDidMaximizedNodeChange;
+    }
+    doAddGroup(group, location = [0], size) {
+        this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
+        this._onDidAdd.fire(group);
+    }
+    doRemoveGroup(group, options) {
+        if (!this._groups.has(group.id)) {
+            throw new Error('invalid operation');
+        }
+        const item = this._groups.get(group.id);
+        const view = this.gridview.remove(group, exports.Sizing.Distribute);
+        if (item && !(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+            item.disposable.dispose();
+            item.value.dispose();
+            this._groups.delete(group.id);
+            this._onDidRemove.fire(group);
+        }
+        if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
+            const groups = Array.from(this._groups.values());
+            this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+        }
+        return view;
+    }
+    getPanel(id) {
+        var _a;
+        return (_a = this._groups.get(id)) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    doSetGroupActive(group) {
+        if (this._activeGroup === group) {
+            return;
+        }
+        if (this._activeGroup) {
+            this._activeGroup.setActive(false);
+        }
+        if (group) {
+            group.setActive(true);
+        }
+        this._activeGroup = group;
+        this._onDidActiveChange.fire(group);
+    }
+    removeGroup(group) {
+        this.doRemoveGroup(group);
+    }
+    moveToNext(options) {
+        var _a;
+        if (!options) {
+            options = {};
+        }
+        if (!options.group) {
+            if (!this.activeGroup) {
+                return;
+            }
+            options.group = this.activeGroup;
+        }
+        const location = getGridLocation(options.group.element);
+        const next = (_a = this.gridview.next(location)) === null || _a === void 0 ? void 0 : _a.view;
+        this.doSetGroupActive(next);
+    }
+    moveToPrevious(options) {
+        var _a;
+        if (!options) {
+            options = {};
+        }
+        if (!options.group) {
+            if (!this.activeGroup) {
+                return;
+            }
+            options.group = this.activeGroup;
+        }
+        const location = getGridLocation(options.group.element);
+        const next = (_a = this.gridview.previous(location)) === null || _a === void 0 ? void 0 : _a.view;
+        this.doSetGroupActive(next);
+    }
+    layout(width, height, forceResize) {
+        const different = forceResize !== null && forceResize !== void 0 ? forceResize : (width !== this.width || height !== this.height);
+        if (!different) {
+            return;
+        }
+        this.gridview.element.style.height = `${height}px`;
+        this.gridview.element.style.width = `${width}px`;
+        this.gridview.layout(width, height);
+    }
+    dispose() {
+        this._onDidActiveChange.dispose();
+        this._onDidAdd.dispose();
+        this._onDidRemove.dispose();
+        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.
@@ -3013,6 +3268,9 @@ class DockviewApi {
     get onWillDragPanel() {
         return this.component.onWillDragPanel;
     }
+    get onUnhandledDragOverEvent() {
+        return this.component.onUnhandledDragOverEvent;
+    }
     /**
      * All panel objects.
      */
@@ -3150,6 +3408,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();
@@ -3294,6 +3613,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,
@@ -3307,16 +3630,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');
@@ -3507,1997 +3820,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 'onlyWhenVisibile':
-                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 === 'onlyWhenVisibile') {
-                (_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) {
-            return;
-        }
-        if (this.rightActions) {
-            this.rightActions.remove();
-            this.rightActions = undefined;
-        }
-        if (element) {
-            this.rightActionsContainer.appendChild(element);
-            this.rightActions = element;
-        }
+    get headerVisible() {
+        return this._headerVisible;
     }
-    setLeftActionsElement(element) {
-        if (this.leftActions === element) {
+    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.leftActions) {
-            this.leftActions.remove();
-            this.leftActions = undefined;
+        this._isExpanded = expanded;
+        if (expanded) {
+            if (this.animationTimer) {
+                clearTimeout(this.animationTimer);
+            }
+            if (this.body) {
+                this.element.appendChild(this.body);
+            }
         }
-        if (element) {
-            this.leftActionsContainer.appendChild(element);
-            this.leftActions = 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);
     }
-    setPrefixActionsElement(element) {
-        if (this.preActions === element) {
-            return;
+    layout(size, orthogonalSize) {
+        this._size = size;
+        this._orthogonalSize = orthogonalSize;
+        const [width, height] = this.orientation === exports.Orientation.HORIZONTAL
+            ? [size, orthogonalSize]
+            : [orthogonalSize, size];
+        if (this.isExpanded()) {
+            this.expandedSize = width;
         }
-        if (this.preActions) {
-            this.preActions.remove();
-            this.preActions = undefined;
+        super.layout(width, height);
+    }
+    init(parameters) {
+        var _a, _b;
+        super.init(parameters);
+        if (typeof parameters.minimumBodySize === 'number') {
+            this.minimumBodySize = parameters.minimumBodySize;
         }
-        if (element) {
-            this.preActionsContainer.appendChild(element);
-            this.preActions = element;
+        if (typeof parameters.maximumBodySize === 'number') {
+            this.maximumBodySize = parameters.maximumBodySize;
         }
-    }
-    get element() {
-        return this._element;
-    }
-    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',
-            }));
-        }), 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.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);
         }
     }
-    delete(id) {
-        const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
-        const tabToRemove = this.tabs.splice(index, 1)[0];
-        const { value, disposable } = tabToRemove;
-        disposable.dispose();
-        value.dispose();
-        value.element.remove();
-    }
-    setActivePanel(panel) {
-        this.tabs.forEach((tab) => {
-            const isActivePanel = panel.id === tab.value.panel.id;
-            tab.value.setActive(isActivePanel);
-        });
-    }
-    openPanel(panel, index = this.tabs.length) {
-        var _a;
-        if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
-            return;
-        }
-        const tab = new Tab(panel, this.accessor, this.group);
-        if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
-            throw new Error('invalid header component');
-        }
-        tab.setContent(panel.view.tab);
-        const disposable = new CompositeDisposable(tab.onDragStart((event) => {
-            this._onTabDragStart.fire({ nativeEvent: event, panel });
-        }), tab.onChanged((event) => {
-            const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
-            const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
-                this.size === 1;
-            if (isFloatingGroupsEnabled &&
-                !isFloatingWithOnePanel &&
-                event.shiftKey) {
-                event.preventDefault();
-                const panel = this.accessor.getGroupPanel(tab.panel.id);
-                const { top, left } = tab.element.getBoundingClientRect();
-                const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
-                this.accessor.addFloatingGroup(panel, {
-                    x: left - rootLeft,
-                    y: top - rootTop,
-                }, { inDragMode: true });
-                return;
-            }
-            const isLeftClick = event.button === 0;
-            if (!isLeftClick || event.defaultPrevented) {
-                return;
-            }
-            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' }));
-        }));
-        const value = { value: tab, disposable };
-        this.addTab(value, index);
+    toJSON() {
+        const params = this._params;
+        return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
     }
-    closePanel(panel) {
-        this.delete(panel.id);
+    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);
     }
-    dispose() {
-        super.dispose();
-        for (const { value, disposable } of this.tabs) {
-            disposable.dispose();
-            value.dispose();
-        }
-        this.tabs = [];
+    // 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 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._kind;
-    }
-    get nativeEvent() {
-        return this.event.nativeEvent;
+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();
+        }
     }
-    get position() {
-        return this.event.position;
-    }
-    get defaultPrevented() {
-        return this.event.defaultPrevented;
-    }
-    preventDefault() {
-        this.event.preventDefault();
-    }
-    constructor(event, options) {
-        this.event = event;
-        this._kind = options.kind;
-    }
-}
-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',
-            }));
-        }), 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.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;
-    }
-    handleDropEvent(type, event, position, index) {
-        if (this.locked === 'no-drop-target') {
+    initDragFeatures() {
+        if (!this.header) {
             return;
         }
-        function getKind() {
-            switch (type) {
-                case 'header':
-                    return typeof index === 'number' ? 'tab' : 'header_space';
-                case 'content':
-                    return 'content';
+        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);
+                    },
+                };
             }
-        }
-        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.header);
+        this.target = new Droptarget(this.element, {
+            acceptedTargetZones: ['top', 'bottom'],
+            overlayModel: {
+                activationSize: { type: 'percentage', value: 50 },
+            },
+            canDisplayOverlay: (event) => {
+                const data = getPaneData();
+                if (data) {
+                    if (data.paneId !== this.id &&
+                        data.viewId === this.accessor.id) {
+                        return true;
+                    }
+                }
+                if (this.accessor.options.showDndOverlay) {
+                    return this.accessor.options.showDndOverlay({
+                        nativeEvent: event,
+                        getData: getPaneData,
+                        panel: this,
+                    });
+                }
+                return false;
+            },
         });
-        this._onWillDrop.fire(willDropEvent);
-        if (willDropEvent.defaultPrevented) {
+        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 }));
             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 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;
         }
-        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();
-        }), exports.DockviewEvent.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 : exports.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, exports.Sizing.Distribute);
-        if (item && !(options === null || options === void 0 ? void 0 : options.skipDispose)) {
-            item.disposable.dispose();
-            item.value.dispose();
-            this._groups.delete(group.id);
-            this._onDidRemove.fire(group);
+        if (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) {
-        super();
-        this.id = id;
-        this.component = component;
-        this._isFocused = false;
-        this._isActive = false;
-        this._isVisible = true;
-        this._width = 0;
-        this._height = 0;
-        this._parameters = {};
-        this.panelUpdatesDisposable = new MutableDisposable();
-        this._onDidDimensionChange = new Emitter();
-        this.onDidDimensionsChange = this._onDidDimensionChange.event;
-        this._onDidChangeFocus = new Emitter();
-        this.onDidFocusChange = this._onDidChangeFocus.event;
-        //
-        this._onWillFocus = new Emitter();
-        this.onWillFocus = this._onWillFocus.event;
-        //
-        this._onDidVisibilityChange = new Emitter();
-        this.onDidVisibilityChange = this._onDidVisibilityChange.event;
-        this._onWillVisibilityChange = new Emitter();
-        this.onWillVisibilityChange = this._onWillVisibilityChange.event;
-        this._onDidActiveChange = new Emitter();
-        this.onDidActiveChange = this._onDidActiveChange.event;
-        this._onActiveChange = new Emitter();
-        this.onActiveChange = this._onActiveChange.event;
-        this._onDidParametersChange = new Emitter();
-        this.onDidParametersChange = this._onDidParametersChange.event;
-        this.addDisposables(this.onDidFocusChange((event) => {
-            this._isFocused = event.isFocused;
-        }), this.onDidActiveChange((event) => {
-            this._isActive = event.isActive;
-        }), this.onDidVisibilityChange((event) => {
-            this._isVisible = event.isVisible;
-        }), this.onDidDimensionsChange((event) => {
-            this._width = event.width;
-            this._height = event.height;
-        }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onWillFocus, this._onWillVisibilityChange, this._onDidParametersChange);
+    get position() {
+        return this.options.position;
     }
-    getParameters() {
-        return this._parameters;
+    get panel() {
+        return this.options.panel;
     }
-    initialize(panel) {
-        this.panelUpdatesDisposable.value = this._onDidParametersChange.event((parameters) => {
-            this._parameters = parameters;
-            panel.update({
-                params: parameters,
-            });
-        });
+    get group() {
+        return this.options.group;
     }
-    setVisible(isVisible) {
-        this._onWillVisibilityChange.fire({ isVisible });
+    get api() {
+        return this.options.api;
     }
-    setActive() {
-        this._onActiveChange.fire();
+    constructor(options) {
+        super();
+        this.options = options;
     }
-    updateParameters(parameters) {
-        this._onDidParametersChange.fire(parameters);
+    getData() {
+        return this.options.getData();
     }
 }
-
-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);
-    }
-    setConstraints(value) {
-        this._onDidConstraintsChangeInternal.fire(value);
+class DockviewWillDropEvent extends DockviewDidDropEvent {
+    get kind() {
+        return this._kind;
     }
-    setSize(event) {
-        this._onDidSizeChange.fire(event);
+    constructor(options) {
+        super(options);
+        this._kind = options.kind;
     }
 }
-
-class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
-    set pane(pane) {
-        this._pane = pane;
+class WillShowOverlayLocationEvent {
+    get kind() {
+        return this.options.kind;
     }
-    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 nativeEvent() {
+        return this.event.nativeEvent;
     }
-    setExpanded(isExpanded) {
-        var _a;
-        (_a = this._pane) === null || _a === void 0 ? void 0 : _a.setExpanded(isExpanded);
+    get position() {
+        return this.event.position;
     }
-    get isExpanded() {
-        var _a;
-        return !!((_a = this._pane) === null || _a === void 0 ? void 0 : _a.isExpanded());
+    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 BasePanelView extends CompositeDisposable {
+class DockviewGroupPanelModel extends CompositeDisposable {
     get element() {
-        return this._element;
+        throw new Error('not supported');
     }
-    get width() {
-        return this._width;
+    get activePanel() {
+        return this._activePanel;
     }
-    get height() {
-        return this._height;
+    get locked() {
+        return this._locked;
     }
-    get params() {
-        var _a;
-        return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+    set locked(value) {
+        this._locked = value;
+        toggleClass(this.container, 'locked-groupview', value === 'no-drop-target' || value);
     }
-    constructor(id, component, api) {
-        super();
-        this.id = id;
-        this.component = component;
-        this.api = api;
-        this._height = 0;
-        this._width = 0;
-        this._element = document.createElement('div');
-        this._element.tabIndex = -1;
-        this._element.style.outline = 'none';
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-        this._element.style.overflow = 'hidden';
-        const focusTracker = trackFocus(this._element);
-        this.addDisposables(this.api, focusTracker.onDidFocus(() => {
-            this.api._onDidChangeFocus.fire({ isFocused: true });
-        }), focusTracker.onDidBlur(() => {
-            this.api._onDidChangeFocus.fire({ isFocused: false });
-        }), focusTracker);
+    get isActive() {
+        return this._isGroupActive;
     }
-    focus() {
-        const event = new WillFocusEvent();
-        this.api._onWillFocus.fire(event);
-        if (event.defaultPrevented) {
-            return;
-        }
-        this._element.focus();
+    get panels() {
+        return this._panels;
     }
-    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);
-            }
-        }
+    get size() {
+        return this._panels.length;
     }
-    init(parameters) {
-        this._params = parameters;
-        this.part = this.getComponent();
+    get isEmpty() {
+        return this._panels.length === 0;
     }
-    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];
-            }
+    get hasWatermark() {
+        return !!(this.watermark && this.container.contains(this.watermark.element));
+    }
+    get header() {
+        return this.tabsContainer;
+    }
+    get isContentFocused() {
+        if (!document.activeElement) {
+            return false;
         }
-        // update the view with the updated props
-        (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this._params.params });
+        return isAncestor(document.activeElement, this.contentContainer.element);
     }
-    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,
-        };
+    get location() {
+        return this._location;
     }
-    dispose() {
+    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;
-        this.api.dispose();
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-        super.dispose();
+        super();
+        this.container = container;
+        this.accessor = accessor;
+        this.id = id;
+        this.options = options;
+        this.groupPanel = groupPanel;
+        this._isGroupActive = false;
+        this._locked = false;
+        this._location = { type: 'grid' };
+        this.mostRecentlyUsed = [];
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this._width = 0;
+        this._height = 0;
+        this._panels = [];
+        this._panelDisposables = new Map();
+        this._onMove = new Emitter();
+        this.onMove = this._onMove.event;
+        this._onDidDrop = new Emitter();
+        this.onDidDrop = this._onDidDrop.event;
+        this._onWillDrop = new Emitter();
+        this.onWillDrop = this._onWillDrop.event;
+        this._onWillShowOverlay = new Emitter();
+        this.onWillShowOverlay = this._onWillShowOverlay.event;
+        this._onTabDragStart = new Emitter();
+        this.onTabDragStart = this._onTabDragStart.event;
+        this._onGroupDragStart = new Emitter();
+        this.onGroupDragStart = this._onGroupDragStart.event;
+        this._onDidAddPanel = new Emitter();
+        this.onDidAddPanel = this._onDidAddPanel.event;
+        this._onDidPanelTitleChange = new Emitter();
+        this.onDidPanelTitleChange = this._onDidPanelTitleChange.event;
+        this._onDidPanelParametersChange = new Emitter();
+        this.onDidPanelParametersChange = this._onDidPanelParametersChange.event;
+        this._onDidRemovePanel = new Emitter();
+        this.onDidRemovePanel = this._onDidRemovePanel.event;
+        this._onDidActivePanelChange = new Emitter();
+        this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+        this._onUnhandledDragOverEvent = new Emitter();
+        this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+        this._overwriteRenderContainer = null;
+        toggleClass(this.container, 'groupview', true);
+        this._api = new DockviewApi(this.accessor);
+        this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
+        this.contentContainer = new ContentContainer(this.accessor, this);
+        container.append(this.tabsContainer.element, this.contentContainer.element);
+        this.header.hidden = !!options.hideHeader;
+        this.locked = (_a = options.locked) !== null && _a !== void 0 ? _a : false;
+        this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this._onWillShowOverlay, this.tabsContainer.onTabDragStart((event) => {
+            this._onTabDragStart.fire(event);
+        }), this.tabsContainer.onGroupDragStart((event) => {
+            this._onGroupDragStart.fire(event);
+        }), this.tabsContainer.onDrop((event) => {
+            this.handleDropEvent('header', event.event, 'center', event.index);
+        }), this.contentContainer.onDidFocus(() => {
+            this.accessor.doSetGroupActive(this.groupPanel);
+        }), this.contentContainer.onDidBlur(() => {
+            // noop
+        }), this.contentContainer.dropTarget.onDrop((event) => {
+            this.handleDropEvent('content', event.nativeEvent, event.position);
+        }), this.tabsContainer.onWillShowOverlay((event) => {
+            this._onWillShowOverlay.fire(event);
+        }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
+            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                kind: 'content',
+                panel: this.activePanel,
+                api: this._api,
+                group: this.groupPanel,
+                getData: getPanelData,
+            }));
+        }), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this._onUnhandledDragOverEvent);
     }
-}
-
-class PaneviewPanel extends BasePanelView {
-    set orientation(value) {
-        this._orientation = value;
+    focusContent() {
+        this.contentContainer.element.focus();
     }
-    get orientation() {
-        return this._orientation;
+    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.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);
+        }
     }
-    get minimumSize() {
-        const headerSize = this.headerSize;
-        const expanded = this.isExpanded();
-        const minimumBodySize = expanded ? this._minimumBodySize : 0;
-        return headerSize + minimumBodySize;
+    rerender(panel) {
+        this.contentContainer.renderPanel(panel, { asActive: false });
     }
-    get maximumSize() {
-        const headerSize = this.headerSize;
-        const expanded = this.isExpanded();
-        const maximumBodySize = expanded ? this._maximumBodySize : 0;
-        return headerSize + maximumBodySize;
+    indexOf(panel) {
+        return this.tabsContainer.indexOf(panel.id);
     }
-    get size() {
-        return this._size;
+    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;
     }
-    get orthogonalSize() {
-        return this._orthogonalSize;
+    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]);
     }
-    set orthogonalSize(size) {
-        this._orthogonalSize = size;
+    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 minimumBodySize() {
-        return this._minimumBodySize;
+    containsPanel(panel) {
+        return this.panels.includes(panel);
     }
-    set minimumBodySize(value) {
-        this._minimumBodySize = typeof value === 'number' ? value : 0;
+    init(_params) {
+        //noop
     }
-    get maximumBodySize() {
-        return this._maximumBodySize;
+    update(_params) {
+        //noop
     }
-    set maximumBodySize(value) {
-        this._maximumBodySize =
-            typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
+    focus() {
+        var _a;
+        (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
     }
-    get headerVisible() {
-        return this._headerVisible;
+    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();
+        }
     }
-    set headerVisible(value) {
-        this._headerVisible = value;
-        this.header.style.display = value ? '' : 'none';
+    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);
     }
-    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');
+    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);
             }
-        }));
-        this.renderOnce();
+        }
+        else {
+            this.accessor.removeGroup(this.groupPanel);
+        }
     }
-    setVisible(isVisible) {
-        this.api._onDidVisibilityChange.fire({ isVisible });
+    closePanel(panel) {
+        this.doClose(panel);
     }
-    setActive(isActive) {
-        this.api._onDidActiveChange.fire({ isActive });
+    doClose(panel) {
+        this.accessor.removePanel(panel);
     }
-    isExpanded() {
-        return this._isExpanded;
+    isPanelActive(panel) {
+        return this._activePanel === panel;
     }
-    setExpanded(expanded) {
-        if (this._isExpanded === expanded) {
+    updateActions(element) {
+        this.tabsContainer.setRightActionsElement(element);
+    }
+    setActive(isGroupActive, force = false) {
+        if (!force && this.isActive === isGroupActive) {
             return;
         }
-        this._isExpanded = expanded;
-        if (expanded) {
-            if (this.animationTimer) {
-                clearTimeout(this.animationTimer);
-            }
-            if (this.body) {
-                this.element.appendChild(this.body);
-            }
+        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]);
         }
-        else {
-            this.animationTimer = setTimeout(() => {
-                var _a;
-                (_a = this.body) === null || _a === void 0 ? void 0 : _a.remove();
-            }, 200);
+        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);
         }
-        this._onDidChange.fire(expanded ? { size: this.width } : {});
-        this._onDidChangeExpansionState.fire(expanded);
     }
-    layout(size, orthogonalSize) {
-        this._size = size;
-        this._orthogonalSize = orthogonalSize;
-        const [width, height] = this.orientation === exports.Orientation.HORIZONTAL
-            ? [size, orthogonalSize]
-            : [orthogonalSize, size];
-        if (this.isExpanded()) {
-            this.expandedSize = width;
+    _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,
+            });
         }
-        super.layout(width, height);
+        if (this._activePanel && this.panels.length === 0) {
+            this.doSetActivePanel(undefined);
+        }
+        if (!options.skipSetActive) {
+            this.updateContainer();
+        }
+        return panel;
     }
-    init(parameters) {
-        var _a, _b;
-        super.init(parameters);
-        if (typeof parameters.minimumBodySize === 'number') {
-            this.minimumBodySize = parameters.minimumBodySize;
+    doRemovePanel(panel) {
+        const index = this.panels.indexOf(panel);
+        if (this._activePanel === panel) {
+            this.contentContainer.closePanel();
         }
-        if (typeof parameters.maximumBodySize === 'number') {
-            this.maximumBodySize = parameters.maximumBodySize;
+        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);
         }
-        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);
+        const disposable = this._panelDisposables.get(panel.id);
+        if (disposable) {
+            disposable.dispose();
+            this._panelDisposables.delete(panel.id);
         }
+        this._onDidRemovePanel.fire({ panel });
     }
-    toJSON() {
-        const params = this._params;
-        return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
+    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 });
     }
-    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);
+    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,
+            });
+        }
     }
-    // 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();
-            },
-        };
+    updateMru(panel) {
+        if (this.mostRecentlyUsed.includes(panel)) {
+            this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
+        }
+        this.mostRecentlyUsed = [panel, ...this.mostRecentlyUsed];
     }
-}
-
-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();
+    updateContainer() {
+        var _a, _b;
+        toggleClass(this.container, 'empty', this.isEmpty);
+        this.panels.forEach((panel) => panel.runEvents());
+        if (this.isEmpty && !this.watermark) {
+            const watermark = this.accessor.createWatermarkComponent();
+            watermark.init({
+                containerApi: this._api,
+                group: this.groupPanel,
+            });
+            this.watermark = watermark;
+            addDisposableListener(this.watermark.element, 'click', () => {
+                if (!this.isActive) {
+                    this.accessor.doSetGroupActive(this.groupPanel);
+                }
+            });
+            this.tabsContainer.hide();
+            this.contentContainer.element.appendChild(this.watermark.element);
+            this.watermark.updateParentGroup(this.groupPanel, true);
+        }
+        if (!this.isEmpty && this.watermark) {
+            this.watermark.element.remove();
+            (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.watermark = undefined;
+            this.tabsContainer.show();
         }
     }
-    initDragFeatures() {
-        if (!this.header) {
+    canDisplayOverlay(event, position, target) {
+        const firedEvent = new DockviewUnhandledDragOverEvent(event, target, position, getPanelData, this.accessor.getPanel(this.id));
+        this._onUnhandledDragOverEvent.fire(firedEvent);
+        return firedEvent.isAccepted;
+    }
+    handleDropEvent(type, event, position, index) {
+        if (this.locked === 'no-drop-target') {
             return;
         }
-        const id = this.id;
-        const accessorId = this.accessor.id;
-        this.header.draggable = true;
-        this.handler = new (class PaneDragHandler extends DragHandler {
-            getData() {
-                LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
-                return {
-                    dispose: () => {
-                        LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
-                    },
-                };
+        function getKind() {
+            switch (type) {
+                case 'header':
+                    return typeof index === 'number' ? 'tab' : 'header_space';
+                case 'content':
+                    return 'content';
             }
-        })(this.header);
-        this.target = new Droptarget(this.element, {
-            acceptedTargetZones: ['top', 'bottom'],
-            overlayModel: {
-                activationSize: { type: 'percentage', value: 50 },
-            },
-            canDisplayOverlay: (event) => {
-                const data = getPaneData();
-                if (data) {
-                    if (data.paneId !== this.id &&
-                        data.viewId === this.accessor.id) {
-                        return true;
-                    }
-                }
-                if (this.accessor.options.showDndOverlay) {
-                    return this.accessor.options.showDndOverlay({
-                        nativeEvent: event,
-                        getData: getPaneData,
-                        panel: this,
-                    });
-                }
-                return false;
-            },
+        }
+        const panel = typeof index === 'number' ? this.panels[index] : undefined;
+        const willDropEvent = new DockviewWillDropEvent({
+            nativeEvent: event,
+            position,
+            panel,
+            getData: () => getPanelData(),
+            kind: getKind(),
+            group: this.groupPanel,
+            api: this._api,
         });
-        this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
-            this.onDrop(event);
-        }));
-    }
-    onDrop(event) {
-        const data = getPaneData();
-        if (!data || data.viewId !== this.accessor.id) {
-            // if there is no local drag event for this panel
-            // or if the drag event was creating by another Paneview instance
-            this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, api: new PaneviewApi(this.accessor), getData: getPaneData }));
+        this._onWillDrop.fire(willDropEvent);
+        if (willDropEvent.defaultPrevented) {
             return;
         }
-        const containerApi = this._params
-            .containerApi;
-        const panelId = data.paneId;
-        const existingPanel = containerApi.getPanel(panelId);
-        if (!existingPanel) {
-            // if the panel doesn't exist
-            this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: getPaneData, api: new PaneviewApi(this.accessor) }));
-            return;
+        const data = getPanelData();
+        if (data && data.viewId === this.accessor.id) {
+            if (data.panelId === null) {
+                // this is a group move dnd event
+                const { groupId } = data;
+                this._onMove.fire({
+                    target: position,
+                    groupId: groupId,
+                    index,
+                });
+                return;
+            }
+            const fromSameGroup = this.tabsContainer.indexOf(data.panelId) !== -1;
+            if (fromSameGroup && this.tabsContainer.size === 1) {
+                return;
+            }
+            const { groupId, panelId } = data;
+            const isSameGroup = this.id === groupId;
+            if (isSameGroup && !position) {
+                const oldIndex = this.tabsContainer.indexOf(panelId);
+                if (oldIndex === index) {
+                    return;
+                }
+            }
+            this._onMove.fire({
+                target: position,
+                groupId: data.groupId,
+                itemId: data.panelId,
+                index,
+            });
         }
-        const allPanels = containerApi.panels;
-        const fromIndex = allPanels.indexOf(existingPanel);
-        let toIndex = containerApi.panels.indexOf(this);
-        if (event.position === 'left' || event.position === 'top') {
-            toIndex = Math.max(0, toIndex - 1);
+        else {
+            this._onDidDrop.fire(new DockviewDidDropEvent({
+                nativeEvent: event,
+                position,
+                panel,
+                getData: () => getPanelData(),
+                group: this.groupPanel,
+                api: this._api,
+            }));
         }
-        if (event.position === 'right' || event.position === 'bottom') {
-            if (fromIndex > toIndex) {
-                toIndex++;
-            }
-            toIndex = Math.min(allPanels.length - 1, toIndex);
+    }
+    dispose() {
+        var _a, _b, _c;
+        super.dispose();
+        (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.element.remove();
+        (_c = (_b = this.watermark) === null || _b === void 0 ? void 0 : _b.dispose) === null || _c === void 0 ? void 0 : _c.call(_b);
+        this.watermark = undefined;
+        for (const panel of this.panels) {
+            panel.dispose();
         }
-        containerApi.movePanel(fromIndex, toIndex);
+        this.tabsContainer.dispose();
+        this.contentContainer.dispose();
     }
 }
 
@@ -5684,9 +5758,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) {
@@ -5744,6 +5821,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);
+                });
+        });
     }
 }
 
@@ -5804,31 +5894,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;
@@ -6196,7 +6261,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) {
@@ -6217,20 +6282,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();
     }
 }
 
@@ -6961,14 +7035,19 @@ class DockviewComponent extends BaseGrid {
     }
     get renderer() {
         var _a;
-        return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisibile';
+        return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisible';
+    }
+    get api() {
+        return this._api;
     }
     constructor(options) {
-        var _a, _b;
+        var _a;
         super({
             proportionalLayout: true,
-            orientation: (_a = options.orientation) !== null && _a !== void 0 ? _a : exports.Orientation.HORIZONTAL,
-            styles: options.styles,
+            orientation: exports.Orientation.HORIZONTAL,
+            styles: options.hideBorders
+                ? { separatorBorder: 'transparent' }
+                : undefined,
             parentElement: options.parentElement,
             disableAutoResizing: options.disableAutoResizing,
             locked: options.locked,
@@ -6986,6 +7065,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();
@@ -7011,7 +7092,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);
             }
@@ -7038,22 +7119,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();
@@ -7068,26 +7133,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') {
@@ -7096,6 +7155,10 @@ class DockviewComponent extends BaseGrid {
             }
             this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
                 kind: 'edge',
+                panel: undefined,
+                api: this._api,
+                group: undefined,
+                getData: getPanelData,
             }));
         }), this._rootDropTarget.onDrop((event) => {
             var _a;
@@ -7307,7 +7370,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;
@@ -7380,7 +7443,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) => {
@@ -7435,16 +7498,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) {
@@ -7732,7 +7790,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);
             }
@@ -7742,14 +7800,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;
             }
         }
@@ -7772,43 +7835,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;
     }
@@ -7832,12 +7916,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;
@@ -8218,6 +8300,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;
@@ -9463,11 +9547,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() {
@@ -9499,9 +9578,6 @@ class ReactHeaderActionsRendererPart {
     get part() {
         return this._part;
     }
-    get group() {
-        return this._group;
-    }
     constructor(component, reactPortalStore, _group) {
         this.component = component;
         this.reactPortalStore = reactPortalStore;
@@ -9512,9 +9588,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();
@@ -9534,15 +9607,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 } });
     }
@@ -9570,72 +9643,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) {
@@ -9646,20 +9719,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 () => {
@@ -9681,63 +9740,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) {
@@ -9752,39 +9791,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));
@@ -10124,6 +10173,7 @@ exports.DockviewGroupPanelModel = DockviewGroupPanelModel;
 exports.DockviewMutableDisposable = MutableDisposable;
 exports.DockviewPanel = DockviewPanel;
 exports.DockviewReact = DockviewReact;
+exports.DockviewUnhandledDragOverEvent = DockviewUnhandledDragOverEvent;
 exports.DockviewWillDropEvent = DockviewWillDropEvent;
 exports.DraggablePaneviewPanel = DraggablePaneviewPanel;
 exports.Gridview = Gridview;
@@ -10132,6 +10182,7 @@ exports.GridviewComponent = GridviewComponent;
 exports.GridviewPanel = GridviewPanel;
 exports.GridviewReact = GridviewReact;
 exports.LocalSelectionTransfer = LocalSelectionTransfer;
+exports.PROPERTY_KEYS = PROPERTY_KEYS;
 exports.PaneFramework = PaneFramework;
 exports.PaneTransfer = PaneTransfer;
 exports.PanelTransfer = PanelTransfer;