dockview 1.6.0 → 1.7.0

package/dist/dockview.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.6.0
+ * @version 1.7.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -100,7 +100,7 @@
         return paneTransfer.getData(PaneTransfer.prototype)[0];
     }
 
-    exports.Event = void 0;
+    exports.DockviewEvent = void 0;
     (function (Event) {
         Event.any = (...children) => {
             return (listener) => {
@@ -114,7 +114,7 @@
                 };
             };
         };
-    })(exports.Event || (exports.Event = {}));
+    })(exports.DockviewEvent || (exports.DockviewEvent = {}));
     // dumb event emitter with better typings than nodes event emitter
     // https://github.com/microsoft/vscode/blob/master/src/vs/base/common/event.ts
     class Emitter {
@@ -341,16 +341,30 @@
         }
     }
 
-    const clamp = (value, min, max) => {
-        if (min > max) {
-            throw new Error(`${min} > ${max} is an invalid condition`);
+    function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
+        const Component = typeof componentName === 'string'
+            ? components[componentName]
+            : undefined;
+        const FrameworkComponent = typeof componentName === 'string'
+            ? frameworkComponents[componentName]
+            : undefined;
+        if (Component && FrameworkComponent) {
+            throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
         }
-        return Math.min(max, Math.max(value, min));
-    };
-    const sequentialNumberGenerator = () => {
-        let value = 1;
-        return { next: () => (value++).toString() };
-    };
+        if (FrameworkComponent) {
+            if (!createFrameworkComponent) {
+                throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
+            }
+            return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
+        }
+        if (!Component) {
+            if (fallback) {
+                return fallback();
+            }
+            throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
+        }
+        return new Component(id, componentName);
+    }
 
     function tail(arr) {
         if (arr.length === 0) {
@@ -392,6 +406,26 @@
             arr.push(value);
         }
     }
+    function firstIndex(array, fn) {
+        for (let i = 0; i < array.length; i++) {
+            const element = array[i];
+            if (fn(element)) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    const clamp = (value, min, max) => {
+        if (min > max) {
+            throw new Error(`${min} > ${max} is an invalid condition`);
+        }
+        return Math.min(max, Math.max(value, min));
+    };
+    const sequentialNumberGenerator = () => {
+        let value = 1;
+        return { next: () => (value++).toString() };
+    };
     const range = (from, to) => {
         const result = [];
         if (typeof to !== 'number') {
@@ -410,15 +444,6 @@
         }
         return result;
     };
-    function firstIndex(array, fn) {
-        for (let i = 0; i < array.length; i++) {
-            const element = array[i];
-            if (fn(element)) {
-                return i;
-            }
-        }
-        return -1;
-    }
 
     class ViewItem {
         set size(size) {
@@ -433,25 +458,6 @@
         get visible() {
             return typeof this._cachedVisibleSize === 'undefined';
         }
-        setVisible(visible, size) {
-            var _a;
-            if (visible === this.visible) {
-                return;
-            }
-            if (visible) {
-                this.size = clamp((_a = this._cachedVisibleSize) !== null && _a !== void 0 ? _a : 0, this.viewMinimumSize, this.viewMaximumSize);
-                this._cachedVisibleSize = undefined;
-            }
-            else {
-                this._cachedVisibleSize =
-                    typeof size === 'number' ? size : this.size;
-                this.size = 0;
-            }
-            this.container.classList.toggle('visible', visible);
-            if (this.view.setVisible) {
-                this.view.setVisible(visible);
-            }
-        }
         get minimumSize() {
             return this.visible ? this.view.minimumSize : 0;
         }
@@ -488,11 +494,25 @@
                 this._cachedVisibleSize = size.cachedVisibleSize;
             }
         }
-        // layout(offset: number, layoutContext: TLayoutContext | undefined): void {
-        //     this.layoutContainer(offset);
-        //     this.view.layout(this.size, offset, layoutContext);
-        // }
-        // abstract layoutContainer(offset: number): void;
+        setVisible(visible, size) {
+            var _a;
+            if (visible === this.visible) {
+                return;
+            }
+            if (visible) {
+                this.size = clamp((_a = this._cachedVisibleSize) !== null && _a !== void 0 ? _a : 0, this.viewMinimumSize, this.viewMaximumSize);
+                this._cachedVisibleSize = undefined;
+            }
+            else {
+                this._cachedVisibleSize =
+                    typeof size === 'number' ? size : this.size;
+                this.size = 0;
+            }
+            this.container.classList.toggle('visible', visible);
+            if (this.view.setVisible) {
+                this.view.setVisible(visible);
+            }
+        }
         dispose() {
             this.disposable.dispose();
             return this.view;
@@ -601,14 +621,14 @@
             this._orthogonalSize = 0;
             this.contentSize = 0;
             this._proportions = undefined;
+            this._startSnappingEnabled = true;
+            this._endSnappingEnabled = true;
             this._onDidSashEnd = new Emitter();
             this.onDidSashEnd = this._onDidSashEnd.event;
             this._onDidAddView = new Emitter();
             this.onDidAddView = this._onDidAddView.event;
             this._onDidRemoveView = new Emitter();
             this.onDidRemoveView = this._onDidRemoveView.event;
-            this._startSnappingEnabled = true;
-            this._endSnappingEnabled = true;
             this.resize = (index, delta, sizes = this.views.map((x) => x.size), lowPriorityIndexes, highPriorityIndexes, overloadMinDelta = Number.NEGATIVE_INFINITY, overloadMaxDelta = Number.POSITIVE_INFINITY, snapBefore, snapAfter) => {
                 if (index < 0 || index > this.views.length) {
                     return 0;
@@ -1503,10 +1523,10 @@
             this.orientation = orientation;
             this.proportionalLayout = proportionalLayout;
             this.styles = styles;
+            this._childrenDisposable = Disposable.NONE;
             this.children = [];
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
-            this._childrenDisposable = Disposable.NONE;
             this._orthogonalSize = orthogonalSize;
             this._size = size;
             this.element = document.createElement('div');
@@ -1627,7 +1647,7 @@
         }
         setupChildrenEvents() {
             this._childrenDisposable.dispose();
-            this._childrenDisposable = exports.Event.any(...this.children.map((c) => c.onDidChange))((e) => {
+            this._childrenDisposable = exports.DockviewEvent.any(...this.children.map((c) => c.onDidChange))((e) => {
                 /**
                  * indicate a change has occured to allows any re-rendering but don't bubble
                  * event because that was specific to this branch
@@ -1765,6 +1785,35 @@
         get length() {
             return this._root ? this._root.children.length : 0;
         }
+        get orientation() {
+            return this.root.orientation;
+        }
+        set orientation(orientation) {
+            if (this.root.orientation === orientation) {
+                return;
+            }
+            const { size, orthogonalSize } = this.root;
+            this.root = flipNode(this.root, orthogonalSize, size);
+            this.root.layout(size, orthogonalSize);
+        }
+        get width() {
+            return this.root.width;
+        }
+        get height() {
+            return this.root.height;
+        }
+        get minimumWidth() {
+            return this.root.minimumWidth;
+        }
+        get minimumHeight() {
+            return this.root.minimumHeight;
+        }
+        get maximumWidth() {
+            return this.root.maximumHeight;
+        }
+        get maximumHeight() {
+            return this.root.maximumHeight;
+        }
         serialize() {
             const root = serializeBranchNode(this.getView(), this.orientation);
             return {
@@ -1811,17 +1860,6 @@
             }
             return result;
         }
-        get orientation() {
-            return this.root.orientation;
-        }
-        set orientation(orientation) {
-            if (this.root.orientation === orientation) {
-                return;
-            }
-            const { size, orthogonalSize } = this.root;
-            this.root = flipNode(this.root, orthogonalSize, size);
-            this.root.layout(size, orthogonalSize);
-        }
         get root() {
             return this._root;
         }
@@ -1903,24 +1941,6 @@
             }
             return findLeaf(this.root, reverse);
         }
-        get width() {
-            return this.root.width;
-        }
-        get height() {
-            return this.root.height;
-        }
-        get minimumWidth() {
-            return this.root.minimumWidth;
-        }
-        get minimumHeight() {
-            return this.root.minimumHeight;
-        }
-        get maximumWidth() {
-            return this.root.maximumHeight;
-        }
-        get maximumHeight() {
-            return this.root.maximumHeight;
-        }
         constructor(proportionalLayout, styles, orientation) {
             this.proportionalLayout = proportionalLayout;
             this.styles = styles;
@@ -2425,10 +2445,6 @@
         }
     }
 
-    function isBooleanValue(value) {
-        return typeof value === 'boolean';
-    }
-
     function numberOrFallback(maybeNumber, fallback) {
         return typeof maybeNumber === 'number' ? maybeNumber : fallback;
     }
@@ -2493,7 +2509,7 @@
                         this.removeDropTarget();
                         return;
                     }
-                    if (isBooleanValue(this.options.canDisplayOverlay)) {
+                    if (typeof this.options.canDisplayOverlay === 'boolean') {
                         if (!this.options.canDisplayOverlay) {
                             return;
                         }
@@ -2501,20 +2517,20 @@
                     else if (!this.options.canDisplayOverlay(e, quadrant)) {
                         return;
                     }
-                    if (!this.target) {
-                        this.target = document.createElement('div');
-                        this.target.className = 'drop-target-dropzone';
-                        this.overlay = document.createElement('div');
-                        this.overlay.className = 'drop-target-selection';
+                    if (!this.targetElement) {
+                        this.targetElement = document.createElement('div');
+                        this.targetElement.className = 'drop-target-dropzone';
+                        this.overlayElement = document.createElement('div');
+                        this.overlayElement.className = 'drop-target-selection';
                         this._state = 'center';
-                        this.target.appendChild(this.overlay);
+                        this.targetElement.appendChild(this.overlayElement);
                         this.element.classList.add('drop-target');
-                        this.element.append(this.target);
+                        this.element.append(this.targetElement);
                     }
                     if (this.options.acceptedTargetZones.length === 0) {
                         return;
                     }
-                    if (!this.target || !this.overlay) {
+                    if (!this.targetElement || !this.overlayElement) {
                         return;
                     }
                     this.toggleClasses(quadrant, width, height);
@@ -2528,10 +2544,12 @@
                 },
                 onDrop: (e) => {
                     e.preventDefault();
-                    e.stopPropagation();
                     const state = this._state;
                     this.removeDropTarget();
                     if (state) {
+                        // only stop the propagation of the event if we are dealing with it
+                        // which is only when the target has state
+                        e.stopPropagation();
                         this._onDrop.fire({ position: state, nativeEvent: e });
                     }
                 },
@@ -2542,7 +2560,7 @@
         }
         toggleClasses(quadrant, width, height) {
             var _a, _b, _c, _d;
-            if (!this.overlay) {
+            if (!this.overlayElement) {
                 return;
             }
             const isSmallX = width < 100;
@@ -2589,11 +2607,11 @@
             else {
                 transform = '';
             }
-            this.overlay.style.transform = transform;
-            toggleClass(this.overlay, 'small-right', isSmallX && isRight);
-            toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
-            toggleClass(this.overlay, 'small-top', isSmallY && isTop);
-            toggleClass(this.overlay, 'small-bottom', isSmallY && isBottom);
+            this.overlayElement.style.transform = transform;
+            toggleClass(this.overlayElement, 'small-right', isSmallX && isRight);
+            toggleClass(this.overlayElement, 'small-left', isSmallX && isLeft);
+            toggleClass(this.overlayElement, 'small-top', isSmallY && isTop);
+            toggleClass(this.overlayElement, 'small-bottom', isSmallY && isBottom);
         }
         setState(quadrant) {
             switch (quadrant) {
@@ -2625,11 +2643,11 @@
             return calculateQuadrantAsPixels(overlayType, x, y, width, height, value);
         }
         removeDropTarget() {
-            if (this.target) {
+            if (this.targetElement) {
                 this._state = undefined;
-                this.element.removeChild(this.target);
-                this.target = undefined;
-                this.overlay = undefined;
+                this.element.removeChild(this.targetElement);
+                this.targetElement = undefined;
+                this.overlayElement = undefined;
                 this.element.classList.remove('drop-target');
             }
         }
@@ -2776,6 +2794,16 @@
                 this.disposable.value = this.getData(event.dataTransfer);
                 if (event.dataTransfer) {
                     event.dataTransfer.effectAllowed = 'move';
+                    /**
+                     * 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', () => {
                 for (const iframe of this.iframes) {
@@ -2881,6 +2909,7 @@
         document.body.appendChild(ghostElement);
         dataTransfer.setDragImage(ghostElement, 0, 0);
         setTimeout(() => {
+            removeClasses(ghostElement, 'dv-dragged');
             ghostElement.remove();
         }, 0);
     }
@@ -3016,10 +3045,6 @@
             return (this.selectedIndex > -1 &&
                 this.tabs[this.selectedIndex].value === tab);
         }
-        at(index) {
-            var _a;
-            return (_a = this.tabs[index]) === null || _a === void 0 ? void 0 : _a.value;
-        }
         indexOf(id) {
             return this.tabs.findIndex((tab) => tab.value.panelId === id);
         }
@@ -3141,7 +3166,7 @@
         }
     }
 
-    class Groupview extends CompositeDisposable {
+    class DockviewGroupPanelModel extends CompositeDisposable {
         get element() {
             throw new Error('not supported');
         }
@@ -3167,18 +3192,6 @@
         get isEmpty() {
             return this._panels.length === 0;
         }
-        get minimumHeight() {
-            return 100;
-        }
-        get maximumHeight() {
-            return Number.MAX_SAFE_INTEGER;
-        }
-        get minimumWidth() {
-            return 100;
-        }
-        get maximumWidth() {
-            return Number.MAX_SAFE_INTEGER;
-        }
         get hasWatermark() {
             return !!(this.watermark && this.container.contains(this.watermark.element));
         }
@@ -3351,8 +3364,8 @@
             //noop
         }
         focus() {
-            var _a;
-            (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
+            var _a, _b;
+            (_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
         }
         openPanel(panel, options = {}) {
             if (typeof options.index !== 'number' ||
@@ -3413,10 +3426,10 @@
             this.tabsContainer.setActionElement(element);
         }
         setActive(isGroupActive, skipFocus = false, force = false) {
-            var _a, _b;
+            var _a, _b, _c, _d;
             if (!force && this.isActive === isGroupActive) {
                 if (!skipFocus) {
-                    (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
+                    (_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
                 }
                 return;
             }
@@ -3430,7 +3443,7 @@
             this.updateContainer();
             if (isGroupActive) {
                 if (!skipFocus) {
-                    (_b = this._activePanel) === null || _b === void 0 ? void 0 : _b.focus();
+                    (_d = (_c = this._activePanel) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.call(_c);
                 }
             }
         }
@@ -3501,15 +3514,14 @@
             this.mostRecentlyUsed = [panel, ...this.mostRecentlyUsed];
         }
         updateContainer() {
+            var _a, _b;
             toggleClass(this.container, 'empty', this.isEmpty);
             this.panels.forEach((panel) => panel.updateParentGroup(this.groupPanel, this.isActive));
             if (this.isEmpty && !this.watermark) {
                 const watermark = this.accessor.createWatermarkComponent();
                 watermark.init({
                     containerApi: new DockviewApi(this.accessor),
-                    params: {},
-                    title: '',
-                    api: null,
+                    group: this.groupPanel,
                 });
                 this.watermark = watermark;
                 addDisposableListener(this.watermark.element, 'click', () => {
@@ -3523,7 +3535,7 @@
             }
             if (!this.isEmpty && this.watermark) {
                 this.watermark.element.remove();
-                this.watermark.dispose();
+                (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
                 this.watermark = undefined;
                 this.tabsContainer.show();
             }
@@ -3583,9 +3595,9 @@
             }
         }
         dispose() {
-            var _a;
+            var _a, _b;
             super.dispose();
-            (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.dispose();
+            (_b = (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
             for (const panel of this.panels) {
                 panel.dispose();
             }
@@ -3665,7 +3677,7 @@
             this.addDisposables(this.gridview.onDidChange(() => {
                 this._bufferOnDidLayoutChange.fire();
             }));
-            this.addDisposables(exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+            this.addDisposables(exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
                 this._bufferOnDidLayoutChange.fire();
             }), this._bufferOnDidLayoutChange.onEvent(() => {
                 this._onDidLayoutChange.fire();
@@ -3706,19 +3718,20 @@
             return (_a = this._groups.get(id)) === null || _a === void 0 ? void 0 : _a.value;
         }
         doSetGroupActive(group, skipFocus) {
+            var _a, _b, _c;
             if (this._activeGroup === group) {
                 return;
             }
             if (this._activeGroup) {
                 this._activeGroup.setActive(false);
                 if (!skipFocus) {
-                    this._activeGroup.focus();
+                    (_b = (_a = this._activeGroup).focus) === null || _b === void 0 ? void 0 : _b.call(_a);
                 }
             }
             if (group) {
                 group.setActive(true);
                 if (!skipFocus) {
-                    group.focus();
+                    (_c = group.focus) === null || _c === void 0 ? void 0 : _c.call(group);
                 }
             }
             this._activeGroup = group;
@@ -3779,31 +3792,6 @@
         }
     }
 
-    function isPanelOptionsWithPanel(data) {
-        if (data.referencePanel) {
-            return true;
-        }
-        return false;
-    }
-    function isPanelOptionsWithGroup(data) {
-        if (data.referenceGroup) {
-            return true;
-        }
-        return false;
-    }
-    function isGroupOptionsWithPanel(data) {
-        if (data.referencePanel) {
-            return true;
-        }
-        return false;
-    }
-    function isGroupOptionsWithGroup(data) {
-        if (data.referenceGroup) {
-            return true;
-        }
-        return false;
-    }
-
     /**
      * A core api implementation that should be used across all panel-like objects
      */
@@ -3898,21 +3886,21 @@
         }
     }
 
-    class GridviewPanelApiImpl extends PanelApiImpl {
-        constructor(id, panel) {
+    class SplitviewPanelApiImpl extends PanelApiImpl {
+        //
+        constructor(id) {
             super(id);
             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);
-            if (panel) {
-                this.initialize(panel);
-            }
         }
         setConstraints(value) {
             this._onDidConstraintsChangeInternal.fire(value);
@@ -3922,450 +3910,401 @@
         }
     }
 
-    class DockviewPanelApiImpl extends GridviewPanelApiImpl {
-        get title() {
-            return this.panel.title;
+    class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
+        set pane(pane) {
+            this._pane = pane;
         }
-        get isGroupActive() {
+        constructor(id) {
+            super(id);
+            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;
-            return !!((_a = this.group) === null || _a === void 0 ? void 0 : _a.isActive);
+            (_a = this._pane) === null || _a === void 0 ? void 0 : _a.setExpanded(isExpanded);
         }
-        set group(value) {
-            const isOldGroupActive = this.isGroupActive;
-            this._group = value;
-            this._onDidGroupChange.fire();
-            if (this._group) {
-                this.disposable.value = this._group.api.onDidActiveChange(() => {
-                    this._onDidActiveGroupChange.fire();
-                });
-                if (this.isGroupActive !== isOldGroupActive) {
-                    this._onDidActiveGroupChange.fire();
-                }
-            }
-        }
-        get group() {
-            return this._group;
-        }
-        constructor(panel, group) {
-            super(panel.id);
-            this.panel = panel;
-            this._onDidTitleChange = new Emitter();
-            this.onDidTitleChange = this._onDidTitleChange.event;
-            this._onDidActiveGroupChange = new Emitter();
-            this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
-            this._onDidGroupChange = new Emitter();
-            this.onDidGroupChange = this._onDidGroupChange.event;
-            this.disposable = new MutableDisposable();
-            this.initialize(panel);
-            this._group = group;
-            this.addDisposables(this.disposable, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
-        }
-        setTitle(title) {
-            this.panel.update({ params: { title } });
-        }
-        close() {
-            this.group.model.closePanel(this.panel);
+        get isExpanded() {
+            var _a;
+            return !!((_a = this._pane) === null || _a === void 0 ? void 0 : _a.isExpanded());
         }
     }
 
-    class DockviewPanel extends CompositeDisposable {
-        get params() {
-            return this._params;
+    class BasePanelView extends CompositeDisposable {
+        get element() {
+            return this._element;
         }
-        get title() {
-            return this._title;
+        get width() {
+            return this._width;
         }
-        get group() {
-            return this._group;
+        get height() {
+            return this._height;
         }
-        get view() {
-            return this._view;
+        get params() {
+            var _a;
+            return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
         }
-        constructor(id, accessor, containerApi, group) {
+        constructor(id, component, api) {
             super();
             this.id = id;
-            this.containerApi = containerApi;
-            this.mutableDisposable = new MutableDisposable();
-            this._title = '';
-            this._group = group;
-            this.api = new DockviewPanelApiImpl(this, this._group);
-            this.addDisposables(this.api.onActiveChange(() => {
-                accessor.setActivePanel(this);
-            }), this.api.onDidSizeChange((event) => {
-                // forward the resize event to the group since if you want to resize a panel
-                // you are actually just resizing the panels parent which is the group
-                this.group.api.setSize(event);
+            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 { onDidFocus, onDidBlur } = trackFocus(this._element);
+            this.addDisposables(this.api, onDidFocus(() => {
+                this.api._onDidChangeFocus.fire({ isFocused: true });
+            }), onDidBlur(() => {
+                this.api._onDidChangeFocus.fire({ isFocused: false });
             }));
         }
-        init(params) {
-            var _a;
-            this._params = params.params;
-            this._view = params.view;
-            this.setTitle(params.title);
-            (_a = this.view) === null || _a === void 0 ? void 0 : _a.init(Object.assign(Object.assign({}, params), { api: this.api, containerApi: this.containerApi }));
-        }
         focus() {
             this.api._onFocusEvent.fire();
         }
-        toJSON() {
-            return {
-                id: this.id,
-                view: this.view.toJSON(),
-                params: Object.keys(this._params || {}).length > 0
-                    ? this._params
-                    : undefined,
-                title: this.title,
-            };
-        }
-        setTitle(title) {
-            var _a, _b;
-            const didTitleChange = title !== ((_a = this._params) === null || _a === void 0 ? void 0 : _a.title);
-            if (didTitleChange) {
-                this._title = title;
-                (_b = this.view) === null || _b === void 0 ? void 0 : _b.update({
-                    params: {
-                        params: this._params,
-                        title: this.title,
-                    },
-                });
-                this.api._onDidTitleChange.fire({ title });
-            }
-        }
-        update(event) {
-            var _a;
-            const params = event.params;
-            this._params = Object.assign(Object.assign({}, (this._params || {})), event.params.params);
-            if (typeof params.title === 'string') {
-                if (params.title !== this.title) {
-                    this._title = params.title;
-                    this.api._onDidTitleChange.fire({ title: this.title });
+        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);
                 }
             }
-            (_a = this.view) === null || _a === void 0 ? void 0 : _a.update({
-                params: {
-                    params: this._params,
-                    title: this.title,
-                },
-            });
         }
-        updateParentGroup(group, isGroupActive) {
-            var _a;
-            this._group = group;
-            this.api.group = group;
-            const isPanelVisible = this._group.model.isPanelActive(this);
-            this.api._onDidActiveChange.fire({
-                isActive: isGroupActive && isPanelVisible,
-            });
-            this.api._onDidVisibilityChange.fire({
-                isVisible: isPanelVisible,
-            });
-            (_a = this.view) === null || _a === void 0 ? void 0 : _a.updateParentGroup(this._group, this._group.model.isPanelActive(this));
+        init(parameters) {
+            this._params = parameters;
+            this.part = this.getComponent();
         }
-        layout(width, height) {
-            var _a;
-            // the obtain the correct dimensions of the content panel we must deduct the tab height
-            this.api._onDidDimensionChange.fire({
-                width,
-                height: height - (this.group.model.header.height || 0),
-            });
-            (_a = this.view) === null || _a === void 0 ? void 0 : _a.layout(width, height);
+        update(event) {
+            var _a, _b;
+            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) });
+            (_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;
+            super.dispose();
             this.api.dispose();
-            this.mutableDisposable.dispose();
-            (_a = this.view) === null || _a === void 0 ? void 0 : _a.dispose();
+            (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
         }
     }
 
-    class ActionContainer {
-        get element() {
-            return this._element;
+    class PaneviewPanel extends BasePanelView {
+        set orientation(value) {
+            this._orientation = value;
         }
-        constructor() {
-            this._element = document.createElement('div');
-            this._element.className = 'actions-bar';
-            this._list = document.createElement('ul');
-            this._list.className = 'actions-container';
-            this._element.appendChild(this._list);
+        get orientation() {
+            return this._orientation;
         }
-        add(element) {
-            const listItem = document.createElement('li');
-            listItem.className = 'action-item';
-            this._list.appendChild(element);
+        get minimumSize() {
+            const headerSize = this.headerSize;
+            const expanded = this.isExpanded();
+            const minimumBodySize = expanded ? this._minimumBodySize : 0;
+            return headerSize + minimumBodySize;
         }
-    }
-
-    const createSvgElementFromPath = (params) => {
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttributeNS(null, 'height', params.height);
-        svg.setAttributeNS(null, 'width', params.width);
-        svg.setAttributeNS(null, 'viewBox', params.viewbox);
-        svg.setAttributeNS(null, 'aria-hidden', 'false');
-        svg.setAttributeNS(null, 'focusable', 'false');
-        svg.classList.add('dockview-svg');
-        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        path.setAttributeNS(null, 'd', params.path);
-        svg.appendChild(path);
-        return svg;
-    };
-    const createCloseButton = () => createSvgElementFromPath({
-        width: '11',
-        height: '11',
-        viewbox: '0 0 28 28',
-        path: 'M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z',
-    });
-    const createExpandMoreButton = () => createSvgElementFromPath({
-        width: '11',
-        height: '11',
-        viewbox: '0 0 24 15',
-        path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
-    });
-    const createChevronRightButton = () => createSvgElementFromPath({
-        width: '11',
-        height: '11',
-        viewbox: '0 0 15 25',
-        path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
-    });
-
-    class Watermark extends CompositeDisposable {
-        get id() {
-            return 'watermark';
+        get maximumSize() {
+            const headerSize = this.headerSize;
+            const expanded = this.isExpanded();
+            const maximumBodySize = expanded ? this._maximumBodySize : 0;
+            return headerSize + maximumBodySize;
         }
-        constructor() {
-            super();
-            this._element = document.createElement('div');
-            this._element.className = 'watermark';
-            const title = document.createElement('div');
-            title.className = 'watermark-title';
-            const emptySpace = document.createElement('span');
-            emptySpace.style.flexGrow = '1';
-            const content = document.createElement('div');
-            content.className = 'watermark-content';
-            this._element.appendChild(title);
-            this._element.appendChild(content);
-            const actions = new ActionContainer();
-            title.appendChild(emptySpace);
-            title.appendChild(actions.element);
-            const closeAnchor = document.createElement('div');
-            closeAnchor.className = 'close-action';
-            closeAnchor.appendChild(createCloseButton());
-            actions.add(closeAnchor);
-            this.addDisposables(addDisposableListener(closeAnchor, 'click', (ev) => {
-                var _a;
-                ev.preventDefault();
-                if (this.group) {
-                    (_a = this.params) === null || _a === void 0 ? void 0 : _a.containerApi.removeGroup(this.group);
-                }
-            }));
+        get size() {
+            return this._size;
         }
-        update(_event) {
-            // noop
+        get orthogonalSize() {
+            return this._orthogonalSize;
         }
-        focus() {
-            // noop
+        set orthogonalSize(size) {
+            this._orthogonalSize = size;
         }
-        toJSON() {
-            return {};
+        get minimumBodySize() {
+            return this._minimumBodySize;
         }
-        layout(_width, _height) {
-            // noop
+        set minimumBodySize(value) {
+            this._minimumBodySize = typeof value === 'number' ? value : 0;
         }
-        init(params) {
-            this.params = params;
-            this.addDisposables(this.params.containerApi.onDidLayoutChange(() => {
-                this.render();
-            }));
-            this.render();
+        get maximumBodySize() {
+            return this._maximumBodySize;
         }
-        updateParentGroup(group, _visible) {
-            this.group = group;
-            this.render();
-        }
-        get element() {
-            return this._element;
-        }
-        render() {
-            const isOneGroup = !!(this.params && this.params.containerApi.size <= 1);
-            toggleClass(this.element, 'has-actions', isOneGroup);
-        }
-        dispose() {
-            super.dispose();
-        }
-    }
-
-    function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
-        const Component = typeof componentName === 'string'
-            ? components[componentName]
-            : undefined;
-        const FrameworkComponent = typeof componentName === 'string'
-            ? frameworkComponents[componentName]
-            : undefined;
-        if (Component && FrameworkComponent) {
-            throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
-        }
-        if (FrameworkComponent) {
-            if (!createFrameworkComponent) {
-                throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
-            }
-            return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
-        }
-        if (!Component) {
-            if (fallback) {
-                return fallback();
-            }
-            throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
+        set maximumBodySize(value) {
+            this._maximumBodySize =
+                typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
         }
-        return new Component(id, componentName);
-    }
-
-    const DEFAULT_TAB_IDENTIFIER = '__default__tab__';
-    class DefaultTab extends CompositeDisposable {
-        get element() {
-            return this._element;
+        get headerVisible() {
+            return this._headerVisible;
         }
-        get id() {
-            return DEFAULT_TAB_IDENTIFIER;
+        set headerVisible(value) {
+            this._headerVisible = value;
+            this.header.style.display = value ? '' : 'none';
         }
-        constructor() {
-            super();
-            this._isPanelVisible = false;
-            this._isGroupActive = false;
-            //
-            this.params = {};
-            this._element = document.createElement('div');
-            this._element.className = 'default-tab';
-            //
-            this._content = document.createElement('div');
-            this._content.className = 'tab-content';
-            //
-            this._actionContainer = document.createElement('div');
-            this._actionContainer.className = 'action-container';
-            //
-            this._list = document.createElement('ul');
-            this._list.className = 'tab-list';
-            //
-            this.action = document.createElement('div');
-            this.action.className = 'tab-action';
-            this.action.appendChild(createCloseButton());
-            //
-            this._element.appendChild(this._content);
-            this._element.appendChild(this._actionContainer);
-            this._actionContainer.appendChild(this._list);
-            this._list.appendChild(this.action);
-            //
-            this.addDisposables(addDisposableListener(this._actionContainer, 'mousedown', (ev) => {
-                ev.preventDefault();
+        constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
+            super(id, component, new PaneviewPanelApiImpl(id));
+            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.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.render();
-        }
-        update(event) {
-            this.params = Object.assign(Object.assign({}, this.params), event.params);
-            this.render();
+            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();
         }
-        toJSON() {
-            return { id: this.id };
+        setVisible(isVisible) {
+            this.api._onDidVisibilityChange.fire({ isVisible });
         }
-        focus() {
-            //noop
+        setActive(isActive) {
+            this.api._onDidActiveChange.fire({ isActive });
         }
-        init(params) {
-            this.params = params;
-            this._content.textContent = params.title;
-            addDisposableListener(this.action, 'click', (ev) => {
-                ev.preventDefault(); //
-                this.params.api.close();
-            });
+        isExpanded() {
+            return this._isExpanded;
         }
-        updateParentGroup(group, isPanelVisible) {
-            const changed = this._isPanelVisible !== isPanelVisible ||
-                this._isGroupActive !== group.isActive;
-            this._isPanelVisible = isPanelVisible;
-            this._isGroupActive = group.isActive;
-            if (changed) {
-                this.render();
+        setExpanded(expanded) {
+            if (this._isExpanded === expanded) {
+                return;
+            }
+            this._isExpanded = expanded;
+            if (expanded) {
+                if (this.animationTimer) {
+                    clearTimeout(this.animationTimer);
+                }
+                if (this.body) {
+                    this.element.appendChild(this.body);
+                }
             }
+            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);
         }
-        layout(_width, _height) {
-            // noop
+        layout(size, orthogonalSize) {
+            this._size = size;
+            this._orthogonalSize = orthogonalSize;
+            const [width, height] = this.orientation === exports.Orientation.HORIZONTAL
+                ? [size, orthogonalSize]
+                : [orthogonalSize, size];
+            if (this.isExpanded()) {
+                this.expandedSize = width;
+            }
+            super.layout(width, height);
         }
-        render() {
-            if (this._content.textContent !== this.params.title) {
-                this._content.textContent = this.params.title;
+        init(parameters) {
+            var _a, _b;
+            super.init(parameters);
+            if (typeof parameters.minimumBodySize === 'number') {
+                this.minimumBodySize = parameters.minimumBodySize;
+            }
+            if (typeof parameters.maximumBodySize === 'number') {
+                this.maximumBodySize = parameters.maximumBodySize;
+            }
+            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);
             }
         }
-    }
-
-    class BasePanelView extends CompositeDisposable {
-        get element() {
-            return this._element;
+        toJSON() {
+            const params = this._params;
+            return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
         }
-        get width() {
-            return this._width;
+        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);
         }
-        get height() {
-            return this._height;
+        // 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();
+                },
+            };
         }
-        get params() {
-            var _a;
-            return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+    }
+
+    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();
+            }
         }
-        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 { onDidFocus, onDidBlur } = trackFocus(this._element);
-            this.addDisposables(this.api, onDidFocus(() => {
-                this.api._onDidChangeFocus.fire({ isFocused: true });
-            }), onDidBlur(() => {
-                this.api._onDidChangeFocus.fire({ isFocused: false });
+        initDragFeatures() {
+            if (!this.header) {
+                return;
+            }
+            const id = this.id;
+            const accessorId = this.accessor.id;
+            this.header.draggable = true;
+            this.handler = new (class PaneDragHandler extends DragHandler {
+                getData() {
+                    LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
+                    return {
+                        dispose: () => {
+                            LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
+                        },
+                    };
+                }
+            })(this.header);
+            this.target = new Droptarget(this.element, {
+                acceptedTargetZones: ['top', 'bottom'],
+                overlayModel: {
+                    activationSize: { type: 'percentage', value: 50 },
+                },
+                canDisplayOverlay: (event) => {
+                    const data = getPaneData();
+                    if (data) {
+                        if (data.paneId !== this.id &&
+                            data.viewId === this.accessor.id) {
+                            return true;
+                        }
+                    }
+                    if (this.accessor.options.showDndOverlay) {
+                        return this.accessor.options.showDndOverlay({
+                            nativeEvent: event,
+                            getData: getPaneData,
+                            panel: this,
+                        });
+                    }
+                    return false;
+                },
+            });
+            this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
+                this.onDrop(event);
             }));
         }
-        focus() {
-            this.api._onFocusEvent.fire();
-        }
-        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);
+        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 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 allPanels = containerApi.panels;
+            const fromIndex = allPanels.indexOf(existingPanel);
+            let toIndex = containerApi.panels.indexOf(this);
+            if (event.position === 'left' || event.position === 'top') {
+                toIndex = Math.max(0, toIndex - 1);
+            }
+            if (event.position === 'right' || event.position === 'bottom') {
+                if (fromIndex > toIndex) {
+                    toIndex++;
                 }
+                toIndex = Math.min(allPanels.length - 1, toIndex);
             }
+            containerApi.movePanel(fromIndex, toIndex);
         }
-        init(parameters) {
-            this._params = parameters;
-            this.part = this.getComponent();
-        }
-        update(event) {
-            var _a, _b;
-            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) });
-            (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this._params.params });
+    }
+
+    class GridviewPanelApiImpl extends PanelApiImpl {
+        constructor(id, panel) {
+            super(id);
+            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);
+            if (panel) {
+                this.initialize(panel);
+            }
         }
-        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,
-            };
+        setConstraints(value) {
+            this._onDidConstraintsChangeInternal.fire(value);
         }
-        dispose() {
-            var _a;
-            super.dispose();
-            this.api.dispose();
-            (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+        setSize(event) {
+            this._onDidSizeChange.fire(event);
         }
     }
 
@@ -4419,8 +4358,8 @@
         get isActive() {
             return this.api.isActive;
         }
-        constructor(id, component, api) {
-            super(id, component, api);
+        constructor(id, component, options) {
+            super(id, component, new GridviewPanelApiImpl(id));
             this._evaluatedMinimumWidth = 0;
             this._evaluatedMaximumWidth = Number.MAX_SAFE_INTEGER;
             this._evaluatedMinimumHeight = 0;
@@ -4432,6 +4371,18 @@
             this._snap = false;
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
+            if (typeof (options === null || options === void 0 ? void 0 : options.minimumWidth) === 'number') {
+                this._minimumWidth = options.minimumWidth;
+            }
+            if (typeof (options === null || options === void 0 ? void 0 : options.maximumWidth) === 'number') {
+                this._maximumWidth = options.maximumWidth;
+            }
+            if (typeof (options === null || options === void 0 ? void 0 : options.minimumHeight) === 'number') {
+                this._minimumHeight = options.minimumHeight;
+            }
+            if (typeof (options === null || options === void 0 ? void 0 : options.maximumHeight) === 'number') {
+                this._maximumHeight = options.maximumHeight;
+            }
             this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
             this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
                 const { isVisible } = event;
@@ -4470,142 +4421,518 @@
         setActive(isActive) {
             this.api._onDidActiveChange.fire({ isActive });
         }
-        init(parameters) {
-            if (parameters.maximumHeight) {
-                this._maximumHeight = parameters.maximumHeight;
-            }
-            if (parameters.minimumHeight) {
-                this._minimumHeight = parameters.minimumHeight;
-            }
-            if (parameters.maximumWidth) {
-                this._maximumWidth = parameters.maximumWidth;
-            }
-            if (parameters.minimumWidth) {
-                this._minimumWidth = parameters.minimumWidth;
+        init(parameters) {
+            if (parameters.maximumHeight) {
+                this._maximumHeight = parameters.maximumHeight;
+            }
+            if (parameters.minimumHeight) {
+                this._minimumHeight = parameters.minimumHeight;
+            }
+            if (parameters.maximumWidth) {
+                this._maximumWidth = parameters.maximumWidth;
+            }
+            if (parameters.minimumWidth) {
+                this._minimumWidth = parameters.minimumWidth;
+            }
+            this._priority = parameters.priority;
+            this._snap = !!parameters.snap;
+            super.init(parameters);
+            if (typeof parameters.isVisible === 'boolean') {
+                this.setVisible(parameters.isVisible);
+            }
+        }
+        updateConstraints() {
+            this.api._onDidConstraintsChange.fire({
+                minimumWidth: this._evaluatedMinimumWidth,
+                maximumWidth: this._evaluatedMaximumWidth,
+                minimumHeight: this._evaluatedMinimumHeight,
+                maximumHeight: this._evaluatedMaximumHeight,
+            });
+        }
+        toJSON() {
+            const state = super.toJSON();
+            const maximum = (value) => value === Number.MAX_SAFE_INTEGER ? undefined : value;
+            const minimum = (value) => (value <= 0 ? undefined : value);
+            return Object.assign(Object.assign({}, state), { minimumHeight: minimum(this.minimumHeight), maximumHeight: maximum(this.maximumHeight), minimumWidth: minimum(this.minimumWidth), maximumWidth: maximum(this.maximumWidth), snap: this.snap, priority: this.priority });
+        }
+    }
+
+    class DockviewGroupPanel extends GridviewPanel {
+        get panels() {
+            return this._model.panels;
+        }
+        get activePanel() {
+            return this._model.activePanel;
+        }
+        get size() {
+            return this._model.size;
+        }
+        get model() {
+            return this._model;
+        }
+        get locked() {
+            return this._model.locked;
+        }
+        set locked(value) {
+            this._model.locked = value;
+        }
+        get header() {
+            return this._model.header;
+        }
+        constructor(accessor, id, options) {
+            super(id, 'groupview_default', {
+                minimumHeight: 100,
+                minimumWidth: 100,
+            });
+            this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
+        }
+        initialize() {
+            this._model.initialize();
+        }
+        setActive(isActive) {
+            super.setActive(isActive);
+            this.model.setActive(isActive);
+        }
+        layout(width, height) {
+            super.layout(width, height);
+            this.model.layout(width, height);
+        }
+        getComponent() {
+            return this._model;
+        }
+        toJSON() {
+            // TODO fix typing
+            return this.model.toJSON();
+        }
+    }
+
+    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 title() {
+            return this.panel.title;
+        }
+        get isGroupActive() {
+            var _a;
+            return !!((_a = this.group) === null || _a === void 0 ? void 0 : _a.isActive);
+        }
+        set group(value) {
+            const isOldGroupActive = this.isGroupActive;
+            this._group = value;
+            this._onDidGroupChange.fire();
+            if (this._group) {
+                this.disposable.value = this._group.api.onDidActiveChange(() => {
+                    this._onDidActiveGroupChange.fire();
+                });
+                if (this.isGroupActive !== isOldGroupActive) {
+                    this._onDidActiveGroupChange.fire();
+                }
+            }
+        }
+        get group() {
+            return this._group;
+        }
+        constructor(panel, group) {
+            super(panel.id);
+            this.panel = panel;
+            this._onDidTitleChange = new Emitter();
+            this.onDidTitleChange = this._onDidTitleChange.event;
+            this._onDidActiveGroupChange = new Emitter();
+            this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+            this._onDidGroupChange = new Emitter();
+            this.onDidGroupChange = this._onDidGroupChange.event;
+            this.disposable = new MutableDisposable();
+            this.initialize(panel);
+            this._group = group;
+            this.addDisposables(this.disposable, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
+        }
+        setTitle(title) {
+            this.panel.update({ params: { title } });
+        }
+        close() {
+            this.group.model.closePanel(this.panel);
+        }
+    }
+
+    class DockviewPanel extends CompositeDisposable {
+        get params() {
+            return this._params;
+        }
+        get title() {
+            return this._title;
+        }
+        get group() {
+            return this._group;
+        }
+        constructor(id, accessor, containerApi, group, view) {
+            super();
+            this.id = id;
+            this.containerApi = containerApi;
+            this.view = view;
+            this._title = '';
+            this._group = group;
+            this.api = new DockviewPanelApiImpl(this, this._group);
+            this.addDisposables(this.api.onActiveChange(() => {
+                accessor.setActivePanel(this);
+            }), this.api.onDidSizeChange((event) => {
+                // forward the resize event to the group since if you want to resize a panel
+                // you are actually just resizing the panels parent which is the group
+                this.group.api.setSize(event);
+            }));
+        }
+        init(params) {
+            var _a;
+            this._params = params.params;
+            this.setTitle(params.title);
+            (_a = this.view) === null || _a === void 0 ? void 0 : _a.init(Object.assign(Object.assign({}, params), { api: this.api, containerApi: this.containerApi }));
+        }
+        focus() {
+            this.api._onFocusEvent.fire();
+        }
+        toJSON() {
+            return {
+                id: this.id,
+                contentComponent: this.view.contentComponent,
+                tabComponent: this.view.tabComponent,
+                params: Object.keys(this._params || {}).length > 0
+                    ? this._params
+                    : undefined,
+                title: this.title,
+            };
+        }
+        setTitle(title) {
+            var _a, _b;
+            const didTitleChange = title !== ((_a = this._params) === null || _a === void 0 ? void 0 : _a.title);
+            if (didTitleChange) {
+                this._title = title;
+                (_b = this.view) === null || _b === void 0 ? void 0 : _b.update({
+                    params: {
+                        params: this._params,
+                        title: this.title,
+                    },
+                });
+                this.api._onDidTitleChange.fire({ title });
             }
-            this._priority = parameters.priority;
-            this._snap = !!parameters.snap;
-            super.init(parameters);
-            if (typeof parameters.isVisible === 'boolean') {
-                this.setVisible(parameters.isVisible);
+        }
+        update(event) {
+            var _a;
+            const params = event.params;
+            this._params = Object.assign(Object.assign({}, (this._params || {})), event.params.params);
+            if (params.title !== this.title) {
+                this._title = params.title;
+                this.api._onDidTitleChange.fire({ title: this.title });
             }
+            (_a = this.view) === null || _a === void 0 ? void 0 : _a.update({
+                params: {
+                    params: this._params,
+                    title: this.title,
+                },
+            });
         }
-        updateConstraints() {
-            this.api._onDidConstraintsChange.fire({
-                minimumWidth: this._evaluatedMinimumWidth,
-                maximumWidth: this._evaluatedMaximumWidth,
-                minimumHeight: this._evaluatedMinimumHeight,
-                maximumHeight: this._evaluatedMaximumHeight,
+        updateParentGroup(group, isGroupActive) {
+            this._group = group;
+            this.api.group = group;
+            const isPanelVisible = this._group.model.isPanelActive(this);
+            this.api._onDidActiveChange.fire({
+                isActive: isGroupActive && isPanelVisible,
+            });
+            this.api._onDidVisibilityChange.fire({
+                isVisible: isPanelVisible,
             });
+            this.view.updateParentGroup(this._group, this._group.model.isPanelActive(this));
         }
-        toJSON() {
-            const state = super.toJSON();
-            const maximum = (value) => value === Number.MAX_SAFE_INTEGER ? undefined : value;
-            const minimum = (value) => (value <= 0 ? undefined : value);
-            return Object.assign(Object.assign({}, state), { minimumHeight: minimum(this.minimumHeight), maximumHeight: maximum(this.maximumHeight), minimumWidth: minimum(this.minimumWidth), maximumWidth: maximum(this.maximumWidth), snap: this.snap, priority: this.priority });
+        layout(width, height) {
+            var _a;
+            // the obtain the correct dimensions of the content panel we must deduct the tab height
+            this.api._onDidDimensionChange.fire({
+                width,
+                height: height - (this.group.model.header.height || 0),
+            });
+            (_a = this.view) === null || _a === void 0 ? void 0 : _a.layout(width, height);
+        }
+        dispose() {
+            var _a;
+            this.api.dispose();
+            (_a = this.view) === null || _a === void 0 ? void 0 : _a.dispose();
         }
     }
 
-    class GroupviewApi extends GridviewPanelApiImpl {
-    }
-    class GroupPanel extends GridviewPanel {
-        get panels() {
-            return this._model.panels;
+    const createSvgElementFromPath = (params) => {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttributeNS(null, 'height', params.height);
+        svg.setAttributeNS(null, 'width', params.width);
+        svg.setAttributeNS(null, 'viewBox', params.viewbox);
+        svg.setAttributeNS(null, 'aria-hidden', 'false');
+        svg.setAttributeNS(null, 'focusable', 'false');
+        svg.classList.add('dockview-svg');
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttributeNS(null, 'd', params.path);
+        svg.appendChild(path);
+        return svg;
+    };
+    const createCloseButton = () => createSvgElementFromPath({
+        width: '11',
+        height: '11',
+        viewbox: '0 0 28 28',
+        path: 'M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z',
+    });
+    const createExpandMoreButton = () => createSvgElementFromPath({
+        width: '11',
+        height: '11',
+        viewbox: '0 0 24 15',
+        path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
+    });
+    const createChevronRightButton = () => createSvgElementFromPath({
+        width: '11',
+        height: '11',
+        viewbox: '0 0 15 25',
+        path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
+    });
+
+    class DefaultTab extends CompositeDisposable {
+        get element() {
+            return this._element;
         }
-        get activePanel() {
-            return this._model.activePanel;
+        constructor() {
+            super();
+            //
+            this.params = {};
+            this._element = document.createElement('div');
+            this._element.className = 'default-tab';
+            //
+            this._content = document.createElement('div');
+            this._content.className = 'tab-content';
+            //
+            this._actionContainer = document.createElement('div');
+            this._actionContainer.className = 'action-container';
+            //
+            this._list = document.createElement('ul');
+            this._list.className = 'tab-list';
+            //
+            this.action = document.createElement('div');
+            this.action.className = 'tab-action';
+            this.action.appendChild(createCloseButton());
+            //
+            this._element.appendChild(this._content);
+            this._element.appendChild(this._actionContainer);
+            this._actionContainer.appendChild(this._list);
+            this._list.appendChild(this.action);
+            //
+            this.addDisposables(addDisposableListener(this._actionContainer, 'mousedown', (ev) => {
+                ev.preventDefault();
+            }));
+            this.render();
         }
-        get size() {
-            return this._model.size;
+        update(event) {
+            this.params = Object.assign(Object.assign({}, this.params), event.params);
+            this.render();
         }
-        get model() {
-            return this._model;
+        focus() {
+            //noop
         }
-        get minimumHeight() {
-            return this._model.minimumHeight;
+        init(params) {
+            this.params = params;
+            this._content.textContent = params.title;
+            addDisposableListener(this.action, 'click', (ev) => {
+                ev.preventDefault(); //
+                this.params.api.close();
+            });
         }
-        get maximumHeight() {
-            return this._model.maximumHeight;
+        onGroupChange(_group) {
+            this.render();
         }
-        get minimumWidth() {
-            return this._model.minimumWidth;
+        onPanelVisibleChange(_isPanelVisible) {
+            this.render();
         }
-        get maximumWidth() {
-            return this._model.maximumWidth;
+        layout(_width, _height) {
+            // noop
         }
-        get locked() {
-            return this._model.locked;
+        render() {
+            if (this._content.textContent !== this.params.title) {
+                this._content.textContent = this.params.title;
+            }
         }
-        set locked(value) {
-            this._model.locked = value;
+    }
+
+    class DockviewPanelModel {
+        get content() {
+            return this._content;
         }
-        get header() {
-            return this._model.header;
+        get tab() {
+            return this._tab;
         }
-        constructor(accessor, id, options) {
-            super(id, 'groupview_default', new GroupviewApi(id));
-            this._model = new Groupview(this.element, accessor, id, options, this);
+        constructor(accessor, id, contentComponent, tabComponent) {
+            var _a;
+            this.accessor = accessor;
+            this.id = id;
+            this.contentComponent = contentComponent;
+            this.tabComponent = tabComponent;
+            this._group = null;
+            this._isPanelVisible = null;
+            this._content = this.createContentComponent(this.id, contentComponent);
+            this._tab =
+                (_a = this.createTabComponent(this.id, tabComponent)) !== null && _a !== void 0 ? _a : new DefaultTab();
         }
-        initialize() {
-            this._model.initialize();
+        init(params) {
+            this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
+            this.tab.init(params);
         }
-        setActive(isActive) {
-            super.setActive(isActive);
-            this.model.setActive(isActive);
+        updateParentGroup(group, isPanelVisible) {
+            if (group !== this._group) {
+                this._group = group;
+                if (this._content.onGroupChange) {
+                    this._content.onGroupChange(group);
+                }
+                if (this._tab.onGroupChange) {
+                    this._tab.onGroupChange(group);
+                }
+            }
+            if (isPanelVisible !== this._isPanelVisible) {
+                this._isPanelVisible = isPanelVisible;
+                if (this._content.onPanelVisibleChange) {
+                    this._content.onPanelVisibleChange(isPanelVisible);
+                }
+                if (this._tab.onPanelVisibleChange) {
+                    this._tab.onPanelVisibleChange(isPanelVisible);
+                }
+            }
         }
         layout(width, height) {
-            super.layout(width, height);
-            this.model.layout(width, height);
+            var _a, _b;
+            (_b = (_a = this.content).layout) === null || _b === void 0 ? void 0 : _b.call(_a, width, height);
         }
-        getComponent() {
-            return this._model;
+        update(event) {
+            var _a, _b, _c, _d;
+            (_b = (_a = this.content).update) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            (_d = (_c = this.tab).update) === null || _d === void 0 ? void 0 : _d.call(_c, event);
         }
-        toJSON() {
-            return this.model.toJSON();
+        dispose() {
+            var _a, _b, _c, _d;
+            (_b = (_a = this.content).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_d = (_c = this.tab).dispose) === null || _d === void 0 ? void 0 : _d.call(_c);
+        }
+        createContentComponent(id, componentName) {
+            var _a;
+            return createComponent(id, componentName, this.accessor.options.components || {}, this.accessor.options.frameworkComponents, (_a = this.accessor.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.content);
+        }
+        createTabComponent(id, componentName) {
+            var _a;
+            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());
         }
     }
 
-    class DefaultGroupPanelView {
-        get content() {
-            return this._content;
+    class DefaultDockviewDeserialzier {
+        constructor(layout) {
+            this.layout = layout;
         }
-        get tab() {
-            return this._tab;
+        fromJSON(panelData, group) {
+            var _a, _b, _c;
+            const panelId = panelData.id;
+            const params = panelData.params;
+            const title = panelData.title;
+            const viewData = panelData.view;
+            const contentComponent = viewData
+                ? viewData.content.id
+                : panelData.contentComponent || 'unknown';
+            const tabComponent = viewData
+                ? (_a = viewData.tab) === null || _a === void 0 ? void 0 : _a.id
+                : panelData.tabComponent;
+            if (tabComponent) {
+                createComponent(panelId, tabComponent, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_b = this.layout.options.frameworkComponentFactory) === null || _b === void 0 ? void 0 : _b.tab, () => new DefaultTab());
+            }
+            else if (this.layout.options.defaultTabComponent) {
+                createComponent(panelId, this.layout.options.defaultTabComponent, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_c = this.layout.options.frameworkComponentFactory) === null || _c === void 0 ? void 0 : _c.tab, () => new DefaultTab());
+            }
+            else {
+                new DefaultTab();
+            }
+            const view = new DockviewPanelModel(this.layout, panelId, contentComponent, tabComponent);
+            const panel = new DockviewPanel(panelId, this.layout, new DockviewApi(this.layout), group, view);
+            panel.init({
+                title: title || panelId,
+                params: params || {},
+            });
+            return panel;
         }
-        constructor(renderers) {
-            var _a;
-            this._content = renderers.content;
-            this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
+    }
+
+    class Watermark extends CompositeDisposable {
+        get element() {
+            return this._element;
+        }
+        constructor() {
+            super();
+            this._element = document.createElement('div');
+            this._element.className = 'watermark';
+            const title = document.createElement('div');
+            title.className = 'watermark-title';
+            const emptySpace = document.createElement('span');
+            emptySpace.style.flexGrow = '1';
+            const content = document.createElement('div');
+            content.className = 'watermark-content';
+            this._element.appendChild(title);
+            this._element.appendChild(content);
+            const actionsContainer = document.createElement('div');
+            actionsContainer.className = 'actions-container';
+            const closeAnchor = document.createElement('div');
+            closeAnchor.className = 'close-action';
+            closeAnchor.appendChild(createCloseButton());
+            actionsContainer.appendChild(closeAnchor);
+            title.appendChild(emptySpace);
+            title.appendChild(actionsContainer);
+            this.addDisposables(addDisposableListener(closeAnchor, 'click', (ev) => {
+                var _a;
+                ev.preventDefault();
+                if (this.group) {
+                    (_a = this.params) === null || _a === void 0 ? void 0 : _a.containerApi.removeGroup(this.group);
+                }
+            }));
         }
-        init(params) {
-            this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
-            this.tab.init(params);
+        update(_event) {
+            // noop
         }
-        updateParentGroup(group, isPanelVisible) {
-            var _a;
-            this._content.updateParentGroup(group, isPanelVisible);
-            (_a = this._tab) === null || _a === void 0 ? void 0 : _a.updateParentGroup(group, isPanelVisible);
+        focus() {
+            // noop
         }
-        layout(width, height) {
-            this.content.layout(width, height);
+        layout(_width, _height) {
+            // noop
         }
-        update(event) {
-            this.content.update(event);
-            this.tab.update(event);
+        init(_params) {
+            this.render();
         }
-        toJSON() {
-            let tab = this.tab instanceof DefaultTab ? undefined : this.tab.toJSON();
-            if (tab && Object.keys(tab).length === 0) {
-                tab = undefined;
-            }
-            return {
-                content: this.content.toJSON(),
-                tab,
-            };
+        updateParentGroup(group, _visible) {
+            this.group = group;
+            this.render();
         }
         dispose() {
-            this.content.dispose();
-            this.tab.dispose();
+            super.dispose();
+        }
+        render() {
+            const isOneGroup = !!(this.params && this.params.containerApi.size <= 1);
+            toggleClass(this.element, 'has-actions', isOneGroup);
         }
     }
 
@@ -4619,12 +4946,6 @@
         get panels() {
             return this.groups.flatMap((group) => group.panels);
         }
-        get deserializer() {
-            return this._deserializer;
-        }
-        set deserializer(value) {
-            this._deserializer = value;
-        }
         get options() {
             return this._options;
         }
@@ -4651,6 +4972,7 @@
                 styles: options.styles,
             });
             this.nextGroupId = sequentialNumberGenerator();
+            this._deserializer = new DefaultDockviewDeserialzier(this);
             this.watermark = null;
             this._onDidDrop = new Emitter();
             this.onDidDrop = this._onDidDrop.event;
@@ -4663,9 +4985,9 @@
             this._onDidActivePanelChange = new Emitter();
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
             this.element.classList.add('dv-dockview');
-            this.addDisposables(this._onDidDrop, exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+            this.addDisposables(this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
                 this.updateWatermark();
-            }), exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+            }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
                 this._bufferOnDidLayoutChange.fire();
             }));
             this._options = options;
@@ -4832,9 +5154,6 @@
         }
         fromJSON(data) {
             this.clear();
-            if (!this.deserializer) {
-                throw new Error('no deserializer provided');
-            }
             const { grid, panels, options, activeGroup } = data;
             if (typeof (options === null || options === void 0 ? void 0 : options.tabHeight) === 'number') {
                 this.tabHeight = options.tabHeight;
@@ -4852,7 +5171,7 @@
                     });
                     this._onDidAddGroup.fire(group);
                     for (const child of views) {
-                        const panel = this.deserializer.fromJSON(panels[child], group);
+                        const panel = this._deserializer.fromJSON(panels[child], group);
                         const isActive = typeof activeView === 'string' &&
                             activeView === panel.id;
                         group.model.openPanel(panel, {
@@ -4979,14 +5298,12 @@
                 : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
         }
         updateWatermark() {
+            var _a, _b;
             if (this.groups.length === 0) {
                 if (!this.watermark) {
                     this.watermark = this.createWatermarkComponent();
                     this.watermark.init({
                         containerApi: new DockviewApi(this),
-                        params: {},
-                        title: '',
-                        api: null,
                     });
                     const watermarkContainer = document.createElement('div');
                     watermarkContainer.className = 'dv-watermark-container';
@@ -4996,7 +5313,7 @@
             }
             else if (this.watermark) {
                 this.watermark.element.parentElement.remove();
-                this.watermark.dispose();
+                (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
                 this.watermark = null;
             }
         }
@@ -5158,7 +5475,7 @@
                     id = this.nextGroupId.next();
                 }
             }
-            const view = new GroupPanel(this, id, options);
+            const view = new DockviewGroupPanel(this, id, options);
             view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group
             if (!this._groups.has(view.id)) {
                 const disposable = new CompositeDisposable(view.model.onMove((event) => {
@@ -5171,857 +5488,522 @@
                 }), view.model.onDidRemovePanel((event) => {
                     this._onDidRemovePanel.fire(event.panel);
                 }), view.model.onDidActivePanelChange((event) => {
-                    this._onDidActivePanelChange.fire(event.panel);
-                }));
-                this._groups.set(view.id, { value: view, disposable });
-            }
-            // TODO: must be called after the above listeners have been setup,
-            // not an ideal pattern
-            view.initialize();
-            if (typeof this.options.tabHeight === 'number') {
-                view.model.header.height = this.options.tabHeight;
-            }
-            return view;
-        }
-        createPanel(options, group) {
-            const view = new DefaultGroupPanelView({
-                content: this.createContentComponent(options.id, options.component),
-                tab: this.createTabComponent(options.id, options.tabComponent || this.options.defaultTabComponent),
-            });
-            const panel = new DockviewPanel(options.id, this, this._api, group);
-            panel.init({
-                view,
-                title: options.title || options.id,
-                params: (options === null || options === void 0 ? void 0 : options.params) || {},
-            });
-            return panel;
-        }
-        createContentComponent(id, componentName) {
-            var _a;
-            return createComponent(id, componentName, this.options.components || {}, this.options.frameworkComponents, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.content);
-        }
-        createTabComponent(id, componentName) {
-            var _a;
-            return createComponent(id, componentName, this.options.tabComponents || {}, this.options.frameworkTabComponents, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.tab, () => new DefaultTab());
-        }
-        createGroupAtLocation(location = [0]) {
-            const group = this.createGroup();
-            this.doAddGroup(group, location);
-            return group;
-        }
-        findGroup(panel) {
-            var _a;
-            return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
-        }
-        dispose() {
-            super.dispose();
-            this._onDidActivePanelChange.dispose();
-            this._onDidAddPanel.dispose();
-            this._onDidRemovePanel.dispose();
-            this._onDidLayoutFromJSON.dispose();
-        }
-    }
-
-    class GridviewComponent extends BaseGrid {
-        get orientation() {
-            return this.gridview.orientation;
-        }
-        set orientation(value) {
-            this.gridview.orientation = value;
-        }
-        get options() {
-            return this._options;
-        }
-        get deserializer() {
-            return this._deserializer;
-        }
-        set deserializer(value) {
-            this._deserializer = value;
-        }
-        constructor(element, options) {
-            super(element, {
-                proportionalLayout: options.proportionalLayout,
-                orientation: options.orientation,
-                styles: options.styles,
-            });
-            this._onDidLayoutfromJSON = new Emitter();
-            this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
-            this._options = options;
-            if (!this.options.components) {
-                this.options.components = {};
-            }
-            if (!this.options.frameworkComponents) {
-                this.options.frameworkComponents = {};
-            }
-        }
-        updateOptions(options) {
-            const hasOrientationChanged = typeof options.orientation === 'string' &&
-                this.gridview.orientation !== options.orientation;
-            this._options = Object.assign(Object.assign({}, this.options), options);
-            if (hasOrientationChanged) {
-                this.gridview.orientation = options.orientation;
-            }
-            this.layout(this.gridview.width, this.gridview.height, true);
-        }
-        removePanel(panel) {
-            this.removeGroup(panel);
-        }
-        /**
-         * Serialize the current state of the layout
-         *
-         * @returns A JSON respresentation of the layout
-         */
-        toJSON() {
-            var _a;
-            const data = this.gridview.serialize();
-            return {
-                grid: data,
-                activePanel: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
-            };
-        }
-        setVisible(panel, visible) {
-            this.gridview.setViewVisible(getGridLocation(panel.element), visible);
-        }
-        setActive(panel) {
-            this._groups.forEach((value, _key) => {
-                value.value.setActive(panel === value.value);
-            });
-        }
-        focus() {
-            var _a;
-            (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        fromJSON(serializedGridview) {
-            this.clear();
-            const { grid, activePanel } = serializedGridview;
-            const queue = [];
-            this.gridview.deserialize(grid, {
-                fromJSON: (node) => {
-                    const { data } = node;
-                    const view = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkComponentFactory
-                        ? {
-                            createComponent: this.options.frameworkComponentFactory
-                                .createComponent,
-                        }
-                        : undefined);
-                    queue.push(() => view.init({
-                        params: data.params,
-                        minimumWidth: data.minimumWidth,
-                        maximumWidth: data.maximumWidth,
-                        minimumHeight: data.minimumHeight,
-                        maximumHeight: data.maximumHeight,
-                        priority: data.priority,
-                        snap: !!data.snap,
-                        accessor: this,
-                        isVisible: node.visible,
-                    }));
-                    this._onDidAddGroup.fire(view);
-                    this.registerPanel(view);
-                    return view;
-                },
-            });
-            this.layout(this.width, this.height, true);
-            queue.forEach((f) => f());
-            if (typeof activePanel === 'string') {
-                const panel = this.getPanel(activePanel);
-                if (panel) {
-                    this.doSetGroupActive(panel);
-                }
-            }
-            this._onDidLayoutfromJSON.fire();
-        }
-        clear() {
-            const hasActiveGroup = this.activeGroup;
-            const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
-            for (const group of groups) {
-                group.disposable.dispose();
-                this.doRemoveGroup(group.value, { skipActive: true });
-            }
-            if (hasActiveGroup) {
-                this.doSetGroupActive(undefined);
-            }
-            this.gridview.clear();
-        }
-        movePanel(panel, options) {
-            var _a;
-            let relativeLocation;
-            const removedPanel = this.gridview.remove(panel);
-            const referenceGroup = (_a = this._groups.get(options.reference)) === null || _a === void 0 ? void 0 : _a.value;
-            if (!referenceGroup) {
-                throw new Error(`reference group ${options.reference} does not exist`);
-            }
-            const target = toTarget(options.direction);
-            if (target === 'center') {
-                throw new Error(`${target} not supported as an option`);
-            }
-            else {
-                const location = getGridLocation(referenceGroup.element);
-                relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
-            }
-            this.doAddGroup(removedPanel, relativeLocation, options.size);
-        }
-        addPanel(options) {
-            var _a, _b;
-            let relativeLocation = options.location || [0];
-            if ((_a = options.position) === null || _a === void 0 ? void 0 : _a.referencePanel) {
-                const referenceGroup = (_b = this._groups.get(options.position.referencePanel)) === null || _b === void 0 ? void 0 : _b.value;
-                if (!referenceGroup) {
-                    throw new Error(`reference group ${options.position.referencePanel} does not exist`);
-                }
-                const target = toTarget(options.position.direction);
-                if (target === 'center') {
-                    throw new Error(`${target} not supported as an option`);
-                }
-                else {
-                    const location = getGridLocation(referenceGroup.element);
-                    relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
-                }
+                    this._onDidActivePanelChange.fire(event.panel);
+                }));
+                this._groups.set(view.id, { value: view, disposable });
+            }
+            // TODO: must be called after the above listeners have been setup,
+            // not an ideal pattern
+            view.initialize();
+            if (typeof this.options.tabHeight === 'number') {
+                view.model.header.height = this.options.tabHeight;
             }
-            const view = createComponent(options.id, options.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkComponentFactory
-                ? {
-                    createComponent: this.options.frameworkComponentFactory
-                        .createComponent,
-                }
-                : undefined);
-            view.init({
-                params: options.params || {},
-                minimumWidth: options.minimumWidth,
-                maximumWidth: options.maximumWidth,
-                minimumHeight: options.minimumHeight,
-                maximumHeight: options.maximumHeight,
-                priority: options.priority,
-                snap: !!options.snap,
-                accessor: this,
-                isVisible: true,
-            });
-            this.registerPanel(view);
-            this.doAddGroup(view, relativeLocation, options.size);
             return view;
         }
-        registerPanel(panel) {
-            const disposable = new CompositeDisposable(panel.api.onDidFocusChange((event) => {
-                if (!event.isFocused) {
-                    return;
-                }
-                this._groups.forEach((groupItem) => {
-                    const group = groupItem.value;
-                    if (group !== panel) {
-                        group.setActive(false);
-                    }
-                    else {
-                        group.setActive(true);
-                    }
-                });
-            }));
-            this._groups.set(panel.id, {
-                value: panel,
-                disposable,
+        createPanel(options, group) {
+            const contentComponent = options.component;
+            const tabComponent = options.tabComponent || this.options.defaultTabComponent;
+            const view = new DockviewPanelModel(this, options.id, contentComponent, tabComponent);
+            const panel = new DockviewPanel(options.id, this, this._api, group, view);
+            panel.init({
+                title: options.title || options.id,
+                params: (options === null || options === void 0 ? void 0 : options.params) || {},
             });
+            return panel;
         }
-        moveGroup(referenceGroup, groupId, target) {
-            const sourceGroup = this.getPanel(groupId);
-            if (!sourceGroup) {
-                throw new Error('invalid operation');
-            }
-            const referenceLocation = getGridLocation(referenceGroup.element);
-            const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
-            const [targetParentLocation, to] = tail(targetLocation);
-            const sourceLocation = getGridLocation(sourceGroup.element);
-            const [sourceParentLocation, from] = tail(sourceLocation);
-            if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
-                // special case when 'swapping' two views within same grid location
-                // if a group has one tab - we are essentially moving the 'group'
-                // which is equivalent to swapping two views in this case
-                this.gridview.moveView(sourceParentLocation, from, to);
-                return;
-            }
-            // source group will become empty so delete the group
-            const targetGroup = this.doRemoveGroup(sourceGroup, {
-                skipActive: true,
-                skipDispose: true,
-            });
-            // after deleting the group we need to re-evaulate the ref location
-            const updatedReferenceLocation = getGridLocation(referenceGroup.element);
-            const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, target);
-            this.doAddGroup(targetGroup, location);
+        createGroupAtLocation(location = [0]) {
+            const group = this.createGroup();
+            this.doAddGroup(group, location);
+            return group;
         }
-        removeGroup(group) {
-            super.removeGroup(group);
+        findGroup(panel) {
+            var _a;
+            return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
         }
         dispose() {
             super.dispose();
-            this._onDidLayoutfromJSON.dispose();
+            this._onDidActivePanelChange.dispose();
+            this._onDidAddPanel.dispose();
+            this._onDidRemovePanel.dispose();
+            this._onDidLayoutFromJSON.dispose();
         }
     }
 
-    /**
-     * A high-level implementation of splitview that works using 'panels'
-     */
-    class SplitviewComponent extends CompositeDisposable {
-        get panels() {
-            return this.splitview.getViews();
-        }
-        get options() {
-            return this._options;
-        }
-        get length() {
-            return this._panels.size;
-        }
+    class GridviewComponent extends BaseGrid {
         get orientation() {
-            return this.splitview.orientation;
-        }
-        get splitview() {
-            return this._splitview;
-        }
-        set splitview(value) {
-            this._splitview = value;
-            this._disposable.value = new CompositeDisposable(this._splitview.onDidSashEnd(() => {
-                this._onDidLayoutChange.fire(undefined);
-            }), this._splitview.onDidAddView((e) => this._onDidAddView.fire(e)), this._splitview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
+            return this.gridview.orientation;
         }
-        get minimumSize() {
-            return this.splitview.minimumSize;
+        set orientation(value) {
+            this.gridview.orientation = value;
         }
-        get maximumSize() {
-            return this.splitview.maximumSize;
+        get options() {
+            return this._options;
         }
-        get height() {
-            return this.splitview.orientation === exports.Orientation.HORIZONTAL
-                ? this.splitview.orthogonalSize
-                : this.splitview.size;
+        get deserializer() {
+            return this._deserializer;
         }
-        get width() {
-            return this.splitview.orientation === exports.Orientation.HORIZONTAL
-                ? this.splitview.size
-                : this.splitview.orthogonalSize;
+        set deserializer(value) {
+            this._deserializer = value;
         }
         constructor(element, options) {
-            super();
-            this.element = element;
-            this._disposable = new MutableDisposable();
-            this._panels = new Map();
+            super(element, {
+                proportionalLayout: options.proportionalLayout,
+                orientation: options.orientation,
+                styles: options.styles,
+            });
             this._onDidLayoutfromJSON = new Emitter();
             this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
-            this._onDidAddView = new Emitter();
-            this.onDidAddView = this._onDidAddView.event;
-            this._onDidRemoveView = new Emitter();
-            this.onDidRemoveView = this._onDidRemoveView.event;
-            this._onDidLayoutChange = new Emitter();
-            this.onDidLayoutChange = this._onDidLayoutChange.event;
             this._options = options;
-            if (!options.components) {
-                options.components = {};
+            if (!this.options.components) {
+                this.options.components = {};
             }
-            if (!options.frameworkComponents) {
-                options.frameworkComponents = {};
+            if (!this.options.frameworkComponents) {
+                this.options.frameworkComponents = {};
             }
-            this.splitview = new Splitview(this.element, options);
-            this.addDisposables(this._disposable, this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
         }
         updateOptions(options) {
             const hasOrientationChanged = typeof options.orientation === 'string' &&
-                this.options.orientation !== options.orientation;
+                this.gridview.orientation !== options.orientation;
             this._options = Object.assign(Object.assign({}, this.options), options);
             if (hasOrientationChanged) {
-                this.splitview.orientation = options.orientation;
-            }
-            this.splitview.layout(this.splitview.size, this.splitview.orthogonalSize);
-        }
-        focus() {
-            var _a;
-            (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        movePanel(from, to) {
-            this.splitview.moveView(from, to);
-        }
-        setVisible(panel, visible) {
-            const index = this.panels.indexOf(panel);
-            this.splitview.setViewVisible(index, visible);
-        }
-        setActive(view, skipFocus) {
-            this._activePanel = view;
-            this.panels
-                .filter((v) => v !== view)
-                .forEach((v) => {
-                v.api._onDidActiveChange.fire({ isActive: false });
-                if (!skipFocus) {
-                    v.focus();
-                }
-            });
-            view.api._onDidActiveChange.fire({ isActive: true });
-            if (!skipFocus) {
-                view.focus();
-            }
-        }
-        removePanel(panel, sizing) {
-            const disposable = this._panels.get(panel.id);
-            if (!disposable) {
-                throw new Error(`unknown splitview panel ${panel.id}`);
-            }
-            disposable.disposable.dispose();
-            disposable.value.dispose();
-            this._panels.delete(panel.id);
-            const index = this.panels.findIndex((_) => _ === panel);
-            this.splitview.removeView(index, sizing);
-            const panels = this.panels;
-            if (panels.length > 0) {
-                this.setActive(panels[panels.length - 1]);
-            }
-        }
-        getPanel(id) {
-            return this.panels.find((view) => view.id === id);
-        }
-        addPanel(options) {
-            if (this._panels.has(options.id)) {
-                throw new Error(`panel ${options.id} already exists`);
+                this.gridview.orientation = options.orientation;
             }
-            const view = createComponent(options.id, options.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkWrapper
-                ? {
-                    createComponent: this.options.frameworkWrapper.createComponent,
-                }
-                : undefined);
-            view.orientation = this.splitview.orientation;
-            view.init({
-                params: options.params || {},
-                minimumSize: options.minimumSize,
-                maximumSize: options.maximumSize,
-                snap: options.snap,
-                priority: options.priority,
-                accessor: this,
-            });
-            const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
-            const index = typeof options.index === 'number' ? options.index : undefined;
-            this.splitview.addView(view, size, index);
-            this.doAddView(view);
-            this.setActive(view);
-            return view;
-        }
-        layout(width, height) {
-            const [size, orthogonalSize] = this.splitview.orientation === exports.Orientation.HORIZONTAL
-                ? [width, height]
-                : [height, width];
-            this.splitview.layout(size, orthogonalSize);
+            this.layout(this.gridview.width, this.gridview.height, true);
         }
-        doAddView(view) {
-            const disposable = view.api.onDidFocusChange((event) => {
-                if (!event.isFocused) {
-                    return;
-                }
-                this.setActive(view, true);
-            });
-            this._panels.set(view.id, { disposable, value: view });
+        removePanel(panel) {
+            this.removeGroup(panel);
         }
+        /**
+         * Serialize the current state of the layout
+         *
+         * @returns A JSON respresentation of the layout
+         */
         toJSON() {
             var _a;
-            const views = this.splitview
-                .getViews()
-                .map((view, i) => {
-                const size = this.splitview.getViewSize(i);
-                return {
-                    size,
-                    data: view.toJSON(),
-                    snap: !!view.snap,
-                    priority: view.priority,
-                };
-            });
+            const data = this.gridview.serialize();
             return {
-                views,
-                activeView: (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.id,
-                size: this.splitview.size,
-                orientation: this.splitview.orientation,
+                grid: data,
+                activePanel: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
             };
         }
-        fromJSON(serializedSplitview) {
+        setVisible(panel, visible) {
+            this.gridview.setViewVisible(getGridLocation(panel.element), visible);
+        }
+        setActive(panel) {
+            this._groups.forEach((value, _key) => {
+                value.value.setActive(panel === value.value);
+            });
+        }
+        focus() {
+            var _a;
+            (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        fromJSON(serializedGridview) {
             this.clear();
-            const { views, orientation, size, activeView } = serializedSplitview;
+            const { grid, activePanel } = serializedGridview;
             const queue = [];
-            this.splitview = new Splitview(this.element, {
-                orientation,
-                proportionalLayout: this.options.proportionalLayout,
-                descriptor: {
-                    size,
-                    views: views.map((view) => {
-                        const data = view.data;
-                        if (this._panels.has(data.id)) {
-                            throw new Error(`panel ${data.id} already exists`);
+            this.gridview.deserialize(grid, {
+                fromJSON: (node) => {
+                    const { data } = node;
+                    const view = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkComponentFactory
+                        ? {
+                            createComponent: this.options.frameworkComponentFactory
+                                .createComponent,
                         }
-                        const panel = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkWrapper
-                            ? {
-                                createComponent: this.options.frameworkWrapper
-                                    .createComponent,
-                            }
-                            : undefined);
-                        queue.push(() => {
-                            panel.init({
-                                params: data.params || {},
-                                minimumSize: data.minimumSize,
-                                maximumSize: data.maximumSize,
-                                snap: view.snap,
-                                priority: view.priority,
-                                accessor: this,
-                            });
-                        });
-                        panel.orientation = orientation;
-                        this.doAddView(panel);
-                        setTimeout(() => {
-                            // the original onDidAddView events are missed since they are fired before we can subcribe to them
-                            this._onDidAddView.fire(panel);
-                        }, 0);
-                        return { size: view.size, view: panel };
-                    }),
+                        : undefined);
+                    queue.push(() => view.init({
+                        params: data.params,
+                        minimumWidth: data.minimumWidth,
+                        maximumWidth: data.maximumWidth,
+                        minimumHeight: data.minimumHeight,
+                        maximumHeight: data.maximumHeight,
+                        priority: data.priority,
+                        snap: !!data.snap,
+                        accessor: this,
+                        isVisible: node.visible,
+                    }));
+                    this._onDidAddGroup.fire(view);
+                    this.registerPanel(view);
+                    return view;
                 },
             });
-            this.layout(this.width, this.height);
+            this.layout(this.width, this.height, true);
             queue.forEach((f) => f());
-            if (typeof activeView === 'string') {
-                const panel = this.getPanel(activeView);
+            if (typeof activePanel === 'string') {
+                const panel = this.getPanel(activePanel);
                 if (panel) {
-                    this.setActive(panel);
+                    this.doSetGroupActive(panel);
                 }
             }
             this._onDidLayoutfromJSON.fire();
         }
         clear() {
-            for (const [_, value] of this._panels.entries()) {
-                value.disposable.dispose();
-                value.value.dispose();
+            const hasActiveGroup = this.activeGroup;
+            const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
+            for (const group of groups) {
+                group.disposable.dispose();
+                this.doRemoveGroup(group.value, { skipActive: true });
             }
-            this._panels.clear();
-            this.splitview.dispose();
+            if (hasActiveGroup) {
+                this.doSetGroupActive(undefined);
+            }
+            this.gridview.clear();
         }
-        dispose() {
-            for (const [_, value] of this._panels.entries()) {
-                value.disposable.dispose();
-                value.value.dispose();
+        movePanel(panel, options) {
+            var _a;
+            let relativeLocation;
+            const removedPanel = this.gridview.remove(panel);
+            const referenceGroup = (_a = this._groups.get(options.reference)) === null || _a === void 0 ? void 0 : _a.value;
+            if (!referenceGroup) {
+                throw new Error(`reference group ${options.reference} does not exist`);
             }
-            this._panels.clear();
-            this.splitview.dispose();
-            super.dispose();
+            const target = toTarget(options.direction);
+            if (target === 'center') {
+                throw new Error(`${target} not supported as an option`);
+            }
+            else {
+                const location = getGridLocation(referenceGroup.element);
+                relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
+            }
+            this.doAddGroup(removedPanel, relativeLocation, options.size);
         }
-    }
-
-    class SplitviewPanelApiImpl extends PanelApiImpl {
-        //
-        constructor(id) {
-            super(id);
-            this._onDidConstraintsChangeInternal = new Emitter();
-            this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
-            //
-            this._onDidConstraintsChange = new Emitter({
-                replay: true,
+        addPanel(options) {
+            var _a, _b;
+            let relativeLocation = options.location || [0];
+            if ((_a = options.position) === null || _a === void 0 ? void 0 : _a.referencePanel) {
+                const referenceGroup = (_b = this._groups.get(options.position.referencePanel)) === null || _b === void 0 ? void 0 : _b.value;
+                if (!referenceGroup) {
+                    throw new Error(`reference group ${options.position.referencePanel} does not exist`);
+                }
+                const target = toTarget(options.position.direction);
+                if (target === 'center') {
+                    throw new Error(`${target} not supported as an option`);
+                }
+                else {
+                    const location = getGridLocation(referenceGroup.element);
+                    relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
+                }
+            }
+            const view = createComponent(options.id, options.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkComponentFactory
+                ? {
+                    createComponent: this.options.frameworkComponentFactory
+                        .createComponent,
+                }
+                : undefined);
+            view.init({
+                params: options.params || {},
+                minimumWidth: options.minimumWidth,
+                maximumWidth: options.maximumWidth,
+                minimumHeight: options.minimumHeight,
+                maximumHeight: options.maximumHeight,
+                priority: options.priority,
+                snap: !!options.snap,
+                accessor: this,
+                isVisible: 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);
-        }
-        setSize(event) {
-            this._onDidSizeChange.fire(event);
+            this.registerPanel(view);
+            this.doAddGroup(view, relativeLocation, options.size);
+            return view;
         }
-    }
-
-    class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
-        set pane(pane) {
-            this._pane = pane;
+        registerPanel(panel) {
+            const disposable = new CompositeDisposable(panel.api.onDidFocusChange((event) => {
+                if (!event.isFocused) {
+                    return;
+                }
+                this._groups.forEach((groupItem) => {
+                    const group = groupItem.value;
+                    if (group !== panel) {
+                        group.setActive(false);
+                    }
+                    else {
+                        group.setActive(true);
+                    }
+                });
+            }));
+            this._groups.set(panel.id, {
+                value: panel,
+                disposable,
+            });
         }
-        constructor(id) {
-            super(id);
-            this._onDidExpansionChange = new Emitter({
-                replay: true,
+        moveGroup(referenceGroup, groupId, target) {
+            const sourceGroup = this.getPanel(groupId);
+            if (!sourceGroup) {
+                throw new Error('invalid operation');
+            }
+            const referenceLocation = getGridLocation(referenceGroup.element);
+            const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+            const [targetParentLocation, to] = tail(targetLocation);
+            const sourceLocation = getGridLocation(sourceGroup.element);
+            const [sourceParentLocation, from] = tail(sourceLocation);
+            if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
+                // special case when 'swapping' two views within same grid location
+                // if a group has one tab - we are essentially moving the 'group'
+                // which is equivalent to swapping two views in this case
+                this.gridview.moveView(sourceParentLocation, from, to);
+                return;
+            }
+            // source group will become empty so delete the group
+            const targetGroup = this.doRemoveGroup(sourceGroup, {
+                skipActive: true,
+                skipDispose: 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);
+            // after deleting the group we need to re-evaulate the ref location
+            const updatedReferenceLocation = getGridLocation(referenceGroup.element);
+            const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, target);
+            this.doAddGroup(targetGroup, location);
         }
-        setExpanded(isExpanded) {
-            var _a;
-            (_a = this._pane) === null || _a === void 0 ? void 0 : _a.setExpanded(isExpanded);
+        removeGroup(group) {
+            super.removeGroup(group);
         }
-        get isExpanded() {
-            var _a;
-            return !!((_a = this._pane) === null || _a === void 0 ? void 0 : _a.isExpanded());
+        dispose() {
+            super.dispose();
+            this._onDidLayoutfromJSON.dispose();
         }
     }
 
-    class PaneviewPanel extends BasePanelView {
-        set orientation(value) {
-            this._orientation = value;
-        }
-        get orientation() {
-            return this._orientation;
-        }
-        get minimumSize() {
-            const headerSize = this.headerSize;
-            const expanded = this.isExpanded();
-            const minimumBodySize = expanded ? this._minimumBodySize : 0;
-            return headerSize + minimumBodySize;
+    /**
+     * A high-level implementation of splitview that works using 'panels'
+     */
+    class SplitviewComponent extends CompositeDisposable {
+        get panels() {
+            return this.splitview.getViews();
         }
-        get maximumSize() {
-            const headerSize = this.headerSize;
-            const expanded = this.isExpanded();
-            const maximumBodySize = expanded ? this._maximumBodySize : 0;
-            return headerSize + maximumBodySize;
+        get options() {
+            return this._options;
         }
-        get size() {
-            return this._size;
+        get length() {
+            return this._panels.size;
         }
-        get orthogonalSize() {
-            return this._orthogonalSize;
+        get orientation() {
+            return this.splitview.orientation;
         }
-        set orthogonalSize(size) {
-            this._orthogonalSize = size;
+        get splitview() {
+            return this._splitview;
         }
-        get minimumBodySize() {
-            return this._minimumBodySize;
+        set splitview(value) {
+            this._splitview = value;
+            this._disposable.value = new CompositeDisposable(this._splitview.onDidSashEnd(() => {
+                this._onDidLayoutChange.fire(undefined);
+            }), this._splitview.onDidAddView((e) => this._onDidAddView.fire(e)), this._splitview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
         }
-        set minimumBodySize(value) {
-            this._minimumBodySize = typeof value === 'number' ? value : 0;
+        get minimumSize() {
+            return this.splitview.minimumSize;
         }
-        get maximumBodySize() {
-            return this._maximumBodySize;
+        get maximumSize() {
+            return this.splitview.maximumSize;
         }
-        set maximumBodySize(value) {
-            this._maximumBodySize =
-                typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
+        get height() {
+            return this.splitview.orientation === exports.Orientation.HORIZONTAL
+                ? this.splitview.orthogonalSize
+                : this.splitview.size;
         }
-        get headerVisible() {
-            return this._headerVisible;
+        get width() {
+            return this.splitview.orientation === exports.Orientation.HORIZONTAL
+                ? this.splitview.size
+                : this.splitview.orthogonalSize;
         }
-        set headerVisible(value) {
-            this._headerVisible = value;
-            this.header.style.display = value ? '' : 'none';
+        constructor(element, options) {
+            super();
+            this.element = element;
+            this._disposable = new MutableDisposable();
+            this._panels = new Map();
+            this._onDidLayoutfromJSON = new Emitter();
+            this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
+            this._onDidAddView = new Emitter();
+            this.onDidAddView = this._onDidAddView.event;
+            this._onDidRemoveView = new Emitter();
+            this.onDidRemoveView = this._onDidRemoveView.event;
+            this._onDidLayoutChange = new Emitter();
+            this.onDidLayoutChange = this._onDidLayoutChange.event;
+            this._options = options;
+            if (!options.components) {
+                options.components = {};
+            }
+            if (!options.frameworkComponents) {
+                options.frameworkComponents = {};
+            }
+            this.splitview = new Splitview(this.element, options);
+            this.addDisposables(this._disposable, this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
         }
-        constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
-            super(id, component, new PaneviewPanelApiImpl(id));
-            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.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();
+        updateOptions(options) {
+            const hasOrientationChanged = typeof options.orientation === 'string' &&
+                this.options.orientation !== options.orientation;
+            this._options = Object.assign(Object.assign({}, this.options), options);
+            if (hasOrientationChanged) {
+                this.splitview.orientation = options.orientation;
+            }
+            this.splitview.layout(this.splitview.size, this.splitview.orthogonalSize);
         }
-        setVisible(isVisible) {
-            this.api._onDidVisibilityChange.fire({ isVisible });
+        focus() {
+            var _a;
+            (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
         }
-        setActive(isActive) {
-            this.api._onDidActiveChange.fire({ isActive });
+        movePanel(from, to) {
+            this.splitview.moveView(from, to);
         }
-        isExpanded() {
-            return this._isExpanded;
+        setVisible(panel, visible) {
+            const index = this.panels.indexOf(panel);
+            this.splitview.setViewVisible(index, visible);
         }
-        setExpanded(expanded) {
-            if (this._isExpanded === expanded) {
-                return;
-            }
-            this._isExpanded = expanded;
-            if (expanded) {
-                if (this.animationTimer) {
-                    clearTimeout(this.animationTimer);
-                }
-                if (this.body) {
-                    this.element.appendChild(this.body);
+        setActive(view, skipFocus) {
+            this._activePanel = view;
+            this.panels
+                .filter((v) => v !== view)
+                .forEach((v) => {
+                v.api._onDidActiveChange.fire({ isActive: false });
+                if (!skipFocus) {
+                    v.focus();
                 }
+            });
+            view.api._onDidActiveChange.fire({ isActive: true });
+            if (!skipFocus) {
+                view.focus();
             }
-            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);
-        }
-        layout(size, orthogonalSize) {
-            this._size = size;
-            this._orthogonalSize = orthogonalSize;
-            const [width, height] = this.orientation === exports.Orientation.HORIZONTAL
-                ? [size, orthogonalSize]
-                : [orthogonalSize, size];
-            if (this.isExpanded()) {
-                this.expandedSize = width;
-            }
-            super.layout(width, height);
         }
-        init(parameters) {
-            var _a, _b;
-            super.init(parameters);
-            if (typeof parameters.minimumBodySize === 'number') {
-                this.minimumBodySize = parameters.minimumBodySize;
+        removePanel(panel, sizing) {
+            const disposable = this._panels.get(panel.id);
+            if (!disposable) {
+                throw new Error(`unknown splitview panel ${panel.id}`);
             }
-            if (typeof parameters.maximumBodySize === 'number') {
-                this.maximumBodySize = parameters.maximumBodySize;
+            disposable.disposable.dispose();
+            disposable.value.dispose();
+            this._panels.delete(panel.id);
+            const index = this.panels.findIndex((_) => _ === panel);
+            this.splitview.removeView(index, sizing);
+            const panels = this.panels;
+            if (panels.length > 0) {
+                this.setActive(panels[panels.length - 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);
+        }
+        getPanel(id) {
+            return this.panels.find((view) => view.id === id);
+        }
+        addPanel(options) {
+            if (this._panels.has(options.id)) {
+                throw new Error(`panel ${options.id} already exists`);
             }
+            const view = createComponent(options.id, options.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkWrapper
+                ? {
+                    createComponent: this.options.frameworkWrapper.createComponent,
+                }
+                : undefined);
+            view.orientation = this.splitview.orientation;
+            view.init({
+                params: options.params || {},
+                minimumSize: options.minimumSize,
+                maximumSize: options.maximumSize,
+                snap: options.snap,
+                priority: options.priority,
+                accessor: this,
+            });
+            const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
+            const index = typeof options.index === 'number' ? options.index : undefined;
+            this.splitview.addView(view, size, index);
+            this.doAddView(view);
+            this.setActive(view);
+            return view;
         }
-        toJSON() {
-            const params = this._params;
-            return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
+        layout(width, height) {
+            const [size, orthogonalSize] = this.splitview.orientation === exports.Orientation.HORIZONTAL
+                ? [width, height]
+                : [height, width];
+            this.splitview.layout(size, orthogonalSize);
         }
-        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);
+        doAddView(view) {
+            const disposable = view.api.onDidFocusChange((event) => {
+                if (!event.isFocused) {
+                    return;
+                }
+                this.setActive(view, true);
+            });
+            this._panels.set(view.id, { disposable, value: view });
         }
-        // TODO slightly hacky by-pass of the component to create a body and header component
-        getComponent() {
+        toJSON() {
+            var _a;
+            const views = this.splitview
+                .getViews()
+                .map((view, i) => {
+                const size = this.splitview.getViewSize(i);
+                return {
+                    size,
+                    data: view.toJSON(),
+                    snap: !!view.snap,
+                    priority: view.priority,
+                };
+            });
             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();
-                },
+                views,
+                activeView: (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.id,
+                size: this.splitview.size,
+                orientation: this.splitview.orientation,
             };
         }
-    }
-
-    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();
-            }
-        }
-        initDragFeatures() {
-            if (!this.header) {
-                return;
-            }
-            const id = this.id;
-            const accessorId = this.accessor.id;
-            this.header.draggable = true;
-            this.handler = new (class PaneDragHandler extends DragHandler {
-                getData() {
-                    LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
-                    return {
-                        dispose: () => {
-                            LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
-                        },
-                    };
-                }
-            })(this.header);
-            this.target = new Droptarget(this.element, {
-                acceptedTargetZones: ['top', 'bottom'],
-                overlayModel: {
-                    activationSize: { type: 'percentage', value: 50 },
-                },
-                canDisplayOverlay: (event) => {
-                    const data = getPaneData();
-                    if (data) {
-                        if (data.paneId !== this.id &&
-                            data.viewId === this.accessor.id) {
-                            return true;
+        fromJSON(serializedSplitview) {
+            this.clear();
+            const { views, orientation, size, activeView } = serializedSplitview;
+            const queue = [];
+            this.splitview = new Splitview(this.element, {
+                orientation,
+                proportionalLayout: this.options.proportionalLayout,
+                descriptor: {
+                    size,
+                    views: views.map((view) => {
+                        const data = view.data;
+                        if (this._panels.has(data.id)) {
+                            throw new Error(`panel ${data.id} already exists`);
                         }
-                    }
-                    if (this.accessor.options.showDndOverlay) {
-                        return this.accessor.options.showDndOverlay({
-                            nativeEvent: event,
-                            getData: getPaneData,
-                            panel: this,
+                        const panel = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkWrapper
+                            ? {
+                                createComponent: this.options.frameworkWrapper
+                                    .createComponent,
+                            }
+                            : undefined);
+                        queue.push(() => {
+                            panel.init({
+                                params: data.params || {},
+                                minimumSize: data.minimumSize,
+                                maximumSize: data.maximumSize,
+                                snap: view.snap,
+                                priority: view.priority,
+                                accessor: this,
+                            });
                         });
-                    }
-                    return false;
+                        panel.orientation = orientation;
+                        this.doAddView(panel);
+                        setTimeout(() => {
+                            // the original onDidAddView events are missed since they are fired before we can subcribe to them
+                            this._onDidAddView.fire(panel);
+                        }, 0);
+                        return { size: view.size, view: panel };
+                    }),
                 },
             });
-            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, getData: getPaneData }));
-                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 }));
-                return;
+            this.layout(this.width, this.height);
+            queue.forEach((f) => f());
+            if (typeof activeView === 'string') {
+                const panel = this.getPanel(activeView);
+                if (panel) {
+                    this.setActive(panel);
+                }
             }
-            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);
+            this._onDidLayoutfromJSON.fire();
+        }
+        clear() {
+            for (const [_, value] of this._panels.entries()) {
+                value.disposable.dispose();
+                value.value.dispose();
             }
-            if (event.position === 'right' || event.position === 'bottom') {
-                if (fromIndex > toIndex) {
-                    toIndex++;
-                }
-                toIndex = Math.min(allPanels.length - 1, toIndex);
+            this._panels.clear();
+            this.splitview.dispose();
+        }
+        dispose() {
+            for (const [_, value] of this._panels.entries()) {
+                value.disposable.dispose();
+                value.value.dispose();
             }
-            containerApi.movePanel(fromIndex, toIndex);
+            this._panels.clear();
+            this.splitview.dispose();
+            super.dispose();
         }
     }
 
@@ -6164,7 +6146,7 @@
             this.addDisposables(this._disposable);
         }
         focus() {
-            //
+            //noop
         }
         updateOptions(options) {
             this._options = Object.assign(Object.assign({}, this.options), options);
@@ -6483,7 +6465,10 @@
      * require a key property like any other React element rendered in an array
      * to prevent excessive re-rendering
      */
-    const uniquePortalKeyGenerator = sequentialNumberGenerator();
+    const uniquePortalKeyGenerator = (() => {
+        let value = 1;
+        return { next: () => `dockview_react_portal_key_${(value++).toString()}` };
+    })();
     const ReactPartContext = React__namespace.createContext({});
     class ReactPart {
         constructor(parent, portalStore, component, parameters, context) {
@@ -6600,18 +6585,10 @@
                 containerApi: parameters.containerApi,
             });
         }
-        toJSON() {
-            return {
-                id: this.id,
-            };
-        }
         update(event) {
             var _a;
             (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
         }
-        updateParentGroup(group, _isPanelVisible) {
-            this._group = group;
-        }
         layout(_width, _height) {
             // noop
         }
@@ -6648,60 +6625,15 @@
             var _a;
             (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
         }
-        toJSON() {
-            if (this.id === DEFAULT_TAB_IDENTIFIER) {
-                return {};
-            }
-            return {
-                id: this.id,
-            };
-        }
         layout(_width, _height) {
             // noop - retrieval from api
         }
-        updateParentGroup(_group, _isPanelVisible) {
-            // noop - retrieval from api
-        }
         dispose() {
             var _a;
             (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
         }
     }
 
-    class ReactPanelDeserialzier {
-        constructor(layout) {
-            this.layout = layout;
-        }
-        fromJSON(panelData, group) {
-            var _a, _b, _c, _d;
-            const panelId = panelData.id;
-            const params = panelData.params;
-            const title = panelData.title;
-            const viewData = panelData.view;
-            let tab;
-            if ((_a = viewData.tab) === null || _a === void 0 ? void 0 : _a.id) {
-                tab = createComponent(viewData.tab.id, viewData.tab.id, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_b = this.layout.options.frameworkComponentFactory) === null || _b === void 0 ? void 0 : _b.tab, () => new DefaultTab());
-            }
-            else if (this.layout.options.defaultTabComponent) {
-                tab = createComponent(this.layout.options.defaultTabComponent, this.layout.options.defaultTabComponent, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_c = this.layout.options.frameworkComponentFactory) === null || _c === void 0 ? void 0 : _c.tab, () => new DefaultTab());
-            }
-            else {
-                tab = new DefaultTab();
-            }
-            const view = new DefaultGroupPanelView({
-                content: createComponent(viewData.content.id, viewData.content.id, this.layout.options.components, this.layout.options.frameworkComponents, (_d = this.layout.options.frameworkComponentFactory) === null || _d === void 0 ? void 0 : _d.content),
-                tab,
-            });
-            const panel = new DockviewPanel(panelId, this.layout, new DockviewApi(this.layout), group);
-            panel.init({
-                view,
-                title,
-                params: params || {},
-            });
-            return panel;
-        }
-    }
-
     class ReactWatermarkPart {
         get element() {
             return this._element;
@@ -6710,21 +6642,16 @@
             this.id = id;
             this.component = component;
             this.reactPortalStore = reactPortalStore;
-            this._groupRef = {
-                value: undefined,
-            };
             this._element = document.createElement('div');
             this._element.className = 'dockview-react-part';
         }
         init(parameters) {
-            this.parameters = parameters;
             this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-                params: parameters.params,
-                api: parameters.api,
+                group: parameters.group,
                 containerApi: parameters.containerApi,
                 close: () => {
-                    if (this._groupRef.value) {
-                        parameters.containerApi.removeGroup(this._groupRef.value);
+                    if (parameters.group) {
+                        parameters.containerApi.removeGroup(parameters.group);
                     }
                 },
             });
@@ -6739,17 +6666,11 @@
             }
             (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: ((_b = this.parameters) === null || _b === void 0 ? void 0 : _b.params) || {} });
         }
-        toJSON() {
-            return {
-                id: this.id,
-            };
-        }
         layout(_width, _height) {
             // noop - retrieval from api
         }
-        updateParentGroup(group, _isPanelVisible) {
-            // noop - retrieval from api
-            this._groupRef.value = group;
+        updateParentGroup(_group, _isPanelVisible) {
+            // noop
         }
         dispose() {
             var _a;
@@ -6831,6 +6752,7 @@
             }
             : undefined;
     }
+    const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
     const DockviewReact = React__namespace.forwardRef((props, ref) => {
         const domRef = React__namespace.useRef(null);
         const dockviewRef = React__namespace.useRef();
@@ -6877,13 +6799,20 @@
                 },
             };
             const element = document.createElement('div');
+            const frameworkTabComponents = props.tabComponents || {};
+            if (props.defaultTabComponent) {
+                frameworkTabComponents[DEFAULT_REACT_TAB] =
+                    props.defaultTabComponent;
+            }
             const dockview = new DockviewComponent(element, {
                 frameworkComponentFactory: factory,
                 frameworkComponents: props.components,
-                frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
+                frameworkTabComponents,
                 tabHeight: props.tabHeight,
                 watermarkFrameworkComponent: props.watermarkComponent,
-                defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
+                defaultTabComponent: props.defaultTabComponent
+                    ? DEFAULT_REACT_TAB
+                    : undefined,
                 styles: props.hideBorders
                     ? { separatorBorder: 'transparent' }
                     : undefined,
@@ -6892,7 +6821,6 @@
                 singleTabMode: props.singleTabMode,
             });
             (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
-            dockview.deserializer = new ReactPanelDeserialzier(dockview);
             const { clientWidth, clientHeight } = domRef.current;
             dockview.layout(clientWidth, clientHeight);
             if (props.onReady) {
@@ -6955,9 +6883,16 @@
             if (!dockviewRef.current) {
                 return;
             }
+            const frameworkTabComponents = props.tabComponents || {};
+            if (props.defaultTabComponent) {
+                frameworkTabComponents[DEFAULT_REACT_TAB] =
+                    props.defaultTabComponent;
+            }
             dockviewRef.current.updateOptions({
-                defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
-                frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
+                defaultTabComponent: props.defaultTabComponent
+                    ? DEFAULT_REACT_TAB
+                    : undefined,
+                frameworkTabComponents,
             });
         }, [props.defaultTabComponent]);
         React__namespace.useEffect(() => {
@@ -7102,7 +7037,7 @@
 
     class ReactGridPanelView extends GridviewPanel {
         constructor(id, component, reactComponent, reactPortalStore) {
-            super(id, component, new GridviewPanelApiImpl(id));
+            super(id, component);
             this.reactComponent = reactComponent;
             this.reactPortalStore = reactPortalStore;
         }
@@ -7312,16 +7247,24 @@
 
     exports.BaseGrid = BaseGrid;
     exports.ContentContainer = ContentContainer;
+    exports.DefaultDockviewDeserialzier = DefaultDockviewDeserialzier;
+    exports.DefaultTab = DefaultTab;
     exports.DockviewApi = DockviewApi;
     exports.DockviewComponent = DockviewComponent;
+    exports.DockviewCompositeDisposable = CompositeDisposable;
     exports.DockviewDefaultTab = DockviewDefaultTab;
+    exports.DockviewEmitter = Emitter;
+    exports.DockviewGroupPanel = DockviewGroupPanel;
+    exports.DockviewGroupPanelModel = DockviewGroupPanelModel;
+    exports.DockviewMutableDisposable = MutableDisposable;
+    exports.DockviewPanel = DockviewPanel;
     exports.DockviewReact = DockviewReact;
+    exports.DraggablePaneviewPanel = DraggablePaneviewPanel;
     exports.Gridview = Gridview;
     exports.GridviewApi = GridviewApi;
     exports.GridviewComponent = GridviewComponent;
     exports.GridviewPanel = GridviewPanel;
     exports.GridviewReact = GridviewReact;
-    exports.Groupview = Groupview;
     exports.LocalSelectionTransfer = LocalSelectionTransfer;
     exports.PaneFramework = PaneFramework;
     exports.PaneTransfer = PaneTransfer;
@@ -7339,6 +7282,7 @@
     exports.SplitviewPanel = SplitviewPanel;
     exports.SplitviewReact = SplitviewReact;
     exports.Tab = Tab;
+    exports.createComponent = createComponent;
     exports.directionToPosition = directionToPosition;
     exports.getDirectionOrientation = getDirectionOrientation;
     exports.getGridLocation = getGridLocation;
@@ -7357,5 +7301,6 @@
     exports.positionToDirection = positionToDirection;
     exports.toTarget = toTarget;
     exports.usePortalsLifecycle = usePortalsLifecycle;
+    exports.watchElementResize = watchElementResize;
 
 }));