dockview 1.6.0 → 1.7.0

package/dist/dockview.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.6.0
+ * @version 1.7.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -56,7 +56,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".dockview-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: white;\n  --dv-tabs-and-actions-container-background-color: #f3f3f3;\n  --dv-activegroup-visiblepanel-tab-background-color: white;\n  --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-inactivegroup-visiblepanel-tab-background-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-tab-divider-color: white;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n  --dv-separator-border: rgba(128, 128, 128, 0.35);\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n  --dv-tabs-and-actions-container-background-color: #2d2d30;\n  --dv-tabs-and-actions-container-height: 20px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n  --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: white;\n  --dv-inactivegroup-visiblepanel-tab-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #000c18;\n  --dv-tabs-and-actions-container-background-color: #1c1c2a;\n  --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-tab-divider-color: #2b2b4a;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n  --dv-separator-border: #2b2b4a;\n  --dv-paneview-header-border-color: #2b2b4a;\n  --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-group-view-background-color: #282a36;\n  --dv-tabs-and-actions-container-background-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-tab-divider-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n  --dv-separator-border: #bd93f9;\n  --dv-paneview-header-border-color: #bd93f9;\n  --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #94527e;\n  z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  bottom: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #5e3d5a;\n  z-index: 999;\n}\n.actions-bar {\n  text-align: right;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.actions-bar .actions-container {\n  display: flex;\n  padding: 0px;\n  margin: 0px;\n  justify-content: flex-end;\n}\n.actions-bar .actions-container .close-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.actions-bar .actions-container .close-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.drop-target {\n  position: relative;\n}\n.drop-target > .drop-target-dropzone {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 10000;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n  position: relative;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-drag-over-background-color);\n  transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n  will-change: transform;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-top {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-bottom {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-left {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-right {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-dockview {\n  position: relative;\n  background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 100%;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dv-tab-dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.grid-view,\n.branch-node {\n  height: 100%;\n  width: 100%;\n}\n.groupview {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--dv-group-view-background-color);\n  overflow: hidden;\n}\n.groupview:focus {\n  outline: none;\n}\n.groupview.empty > .tabs-and-actions-container {\n  display: none;\n}\n.groupview > .content-container {\n  flex-grow: 1;\n  overflow: hidden;\n  outline: none;\n}\n.pane-container {\n  height: 100%;\n  width: 100%;\n}\n.pane-container.animated .view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.pane-container .view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n  background-color: var(--dv-group-view-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n  display: flex;\n  padding: 0px 8px;\n  cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pane-container .view .default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n  border-top: none !important;\n}\n.pane-container .pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.pane-container .pane .pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n  cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.tabs-and-actions-container {\n  display: flex;\n  background-color: var(--dv-tabs-and-actions-container-background-color);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  height: var(--dv-tabs-and-actions-container-height);\n  font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.tabs-and-actions-container.hidden {\n  display: none;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container {\n  flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container .tab {\n  flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .void-container {\n  flex-grow: 0;\n}\n.tabs-and-actions-container .void-container {\n  display: flex;\n  flex-grow: 1;\n  cursor: grab;\n}\n.tabs-and-actions-container .tabs-container {\n  display: flex;\n  overflow-x: overlay;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  /* Track */\n  /* Handle */\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar {\n  height: 3px;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {\n  background: var(--dv-tabs-container-scrollbar-color);\n}\n.tabs-and-actions-container .tabs-container .tab {\n  -webkit-user-drag: element;\n  outline: none;\n  min-width: 75px;\n  cursor: pointer;\n  position: relative;\n  box-sizing: border-box;\n}\n.tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-tab-divider-color);\n  width: 1px;\n  height: 100%;\n}\n.tab .dockview-react-tab {\n  display: flex;\n  padding: 0px 8px;\n  align-items: center;\n  height: 100%;\n}\n.tab .dockview-react-tab .dockview-react-tab-title {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .dockview-react-tab .dockview-react-tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .dockview-react-tab .dockview-react-tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tab.inactive-tab:not(:hover) .dockview-react-tab-action {\n  visibility: hidden;\n}\n.dockview-react-part {\n  height: 100%;\n  width: 100%;\n}\n.split-view-container {\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container.animation .view,\n.split-view-container.animation .sash {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.split-view-container.horizontal {\n  height: 100%;\n}\n.split-view-container.horizontal > .sash-container > .sash {\n  height: 100%;\n  width: 4px;\n}\n.split-view-container.horizontal > .sash-container > .sash.enabled {\n  cursor: ew-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.horizontal > .sash-container > .sash.maximum {\n  cursor: w-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.minimum {\n  cursor: e-resize;\n}\n.split-view-container.horizontal > .view-container > .view:not(:first-child)::before {\n  height: 100%;\n  width: 1px;\n}\n.split-view-container.vertical {\n  width: 100%;\n}\n.split-view-container.vertical > .sash-container > .sash {\n  width: 100%;\n  height: 4px;\n}\n.split-view-container.vertical > .sash-container > .sash.enabled {\n  cursor: ns-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.vertical > .sash-container > .sash.maximum {\n  cursor: n-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.minimum {\n  cursor: s-resize;\n}\n.split-view-container.vertical > .view-container > .view {\n  width: 100%;\n}\n.split-view-container.vertical > .view-container > .view:not(:first-child)::before {\n  height: 1px;\n  width: 100%;\n}\n.split-view-container .sash-container {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n}\n.split-view-container .sash-container .sash {\n  position: absolute;\n  z-index: 99;\n  outline: none;\n}\n.split-view-container .sash-container .sash:active {\n  transition: background-color 0.1s ease-in-out;\n  background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:hover {\n  background-color: var(--dv-active-sash-color, transparent);\n  transition: background-color 0.1s ease-in-out;\n  transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container .view-container .view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n  transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n  flex-shrink: 0;\n}\n.tab.dv-tab-dragging .tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab > .default-tab .tab-action {\n  visibility: visible;\n}\n.tab.inactive-tab > .default-tab .tab-action {\n  visibility: hidden;\n}\n.tab.inactive-tab > .default-tab:hover .tab-action {\n  visibility: visible;\n}\n.tab .default-tab {\n  position: relative;\n  height: 100%;\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  padding: 0px 8px;\n  white-space: nowrap;\n  text-overflow: elipsis;\n}\n.tab .default-tab .tab-content {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .default-tab .action-container {\n  text-align: right;\n  display: flex;\n}\n.tab .default-tab .action-container .tab-list {\n  display: flex;\n  padding: 0px;\n  margin: 0px;\n  justify-content: flex-end;\n}\n.tab .default-tab .action-container .tab-list .tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .default-tab .action-container .tab-list .tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.watermark {\n  display: flex;\n  width: 100%;\n}\n.watermark.has-actions .watermark-title .actions-bar {\n  display: none;\n}\n.watermark .watermark-title {\n  height: 35px;\n  width: 100%;\n  display: flex;\n}\n.watermark .watermark-content {\n  flex-grow: 1;\n}";
+var css_248z = "@import \"dockview-core/dist/styles/dockview.css\";\n.tab .dockview-react-tab {\n  display: flex;\n  padding: 0px 8px;\n  align-items: center;\n  height: 100%;\n}\n.tab .dockview-react-tab .dockview-react-tab-title {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .dockview-react-tab .dockview-react-tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .dockview-react-tab .dockview-react-tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tab.inactive-tab:not(:hover) .dockview-react-tab-action {\n  visibility: hidden;\n}\n.dockview-react-part {\n  height: 100%;\n  width: 100%;\n}";
 styleInject(css_248z);
 
 class TransferObject {
@@ -129,7 +129,7 @@ function getPaneData() {
     return paneTransfer.getData(PaneTransfer.prototype)[0];
 }
 
-exports.Event = void 0;
+exports.DockviewEvent = void 0;
 (function (Event) {
     Event.any = (...children) => {
         return (listener) => {
@@ -143,7 +143,7 @@ exports.Event = void 0;
             };
         };
     };
-})(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 {
@@ -370,16 +370,30 @@ class FocusTracker extends CompositeDisposable {
     }
 }
 
-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) {
@@ -421,6 +435,26 @@ function pushToEnd(arr, value) {
         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') {
@@ -439,15 +473,6 @@ const range = (from, to) => {
     }
     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) {
@@ -462,25 +487,6 @@ class ViewItem {
     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;
     }
@@ -517,11 +523,25 @@ class ViewItem {
             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;
@@ -630,14 +650,14 @@ class Splitview {
         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;
@@ -1532,10 +1552,10 @@ class BranchNode extends CompositeDisposable {
         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');
@@ -1656,7 +1676,7 @@ class BranchNode extends CompositeDisposable {
     }
     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
@@ -1794,6 +1814,35 @@ class Gridview {
     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 {
@@ -1840,17 +1889,6 @@ class Gridview {
         }
         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;
     }
@@ -1932,24 +1970,6 @@ class Gridview {
         }
         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;
@@ -2454,10 +2474,6 @@ class DragAndDropObserver extends CompositeDisposable {
     }
 }
 
-function isBooleanValue(value) {
-    return typeof value === 'boolean';
-}
-
 function numberOrFallback(maybeNumber, fallback) {
     return typeof maybeNumber === 'number' ? maybeNumber : fallback;
 }
@@ -2522,7 +2538,7 @@ class Droptarget extends CompositeDisposable {
                     this.removeDropTarget();
                     return;
                 }
-                if (isBooleanValue(this.options.canDisplayOverlay)) {
+                if (typeof this.options.canDisplayOverlay === 'boolean') {
                     if (!this.options.canDisplayOverlay) {
                         return;
                     }
@@ -2530,20 +2546,20 @@ class Droptarget extends CompositeDisposable {
                 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);
@@ -2557,10 +2573,12 @@ class Droptarget extends CompositeDisposable {
             },
             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 });
                 }
             },
@@ -2571,7 +2589,7 @@ class Droptarget extends CompositeDisposable {
     }
     toggleClasses(quadrant, width, height) {
         var _a, _b, _c, _d;
-        if (!this.overlay) {
+        if (!this.overlayElement) {
             return;
         }
         const isSmallX = width < 100;
@@ -2618,11 +2636,11 @@ class Droptarget extends CompositeDisposable {
         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) {
@@ -2654,11 +2672,11 @@ class Droptarget extends CompositeDisposable {
         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');
         }
     }
@@ -2805,6 +2823,16 @@ class DragHandler extends CompositeDisposable {
             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) {
@@ -2910,6 +2938,7 @@ function addGhostImage(dataTransfer, ghostElement) {
     document.body.appendChild(ghostElement);
     dataTransfer.setDragImage(ghostElement, 0, 0);
     setTimeout(() => {
+        removeClasses(ghostElement, 'dv-dragged');
         ghostElement.remove();
     }, 0);
 }
@@ -3045,10 +3074,6 @@ class TabsContainer extends CompositeDisposable {
         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);
     }
@@ -3170,7 +3195,7 @@ class TabsContainer extends CompositeDisposable {
     }
 }
 
-class Groupview extends CompositeDisposable {
+class DockviewGroupPanelModel extends CompositeDisposable {
     get element() {
         throw new Error('not supported');
     }
@@ -3196,18 +3221,6 @@ class Groupview extends CompositeDisposable {
     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));
     }
@@ -3380,8 +3393,8 @@ class Groupview extends CompositeDisposable {
         //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' ||
@@ -3442,10 +3455,10 @@ class Groupview extends CompositeDisposable {
         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;
         }
@@ -3459,7 +3472,7 @@ class Groupview extends CompositeDisposable {
         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);
             }
         }
     }
@@ -3530,15 +3543,14 @@ class Groupview extends CompositeDisposable {
         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', () => {
@@ -3552,7 +3564,7 @@ class Groupview extends CompositeDisposable {
         }
         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();
         }
@@ -3612,9 +3624,9 @@ class Groupview extends CompositeDisposable {
         }
     }
     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();
         }
@@ -3694,7 +3706,7 @@ class BaseGrid extends CompositeDisposable {
         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();
@@ -3735,19 +3747,20 @@ class BaseGrid extends CompositeDisposable {
         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;
@@ -3808,31 +3821,6 @@ class BaseGrid extends CompositeDisposable {
     }
 }
 
-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
  */
@@ -3927,21 +3915,21 @@ class PanelApiImpl extends CompositeDisposable {
     }
 }
 
-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);
@@ -3951,450 +3939,401 @@ class GridviewPanelApiImpl extends PanelApiImpl {
     }
 }
 
-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);
     }
 }
 
@@ -4448,8 +4387,8 @@ class GridviewPanel extends BasePanelView {
     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;
@@ -4461,6 +4400,18 @@ class GridviewPanel extends BasePanelView {
         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;
@@ -4499,142 +4450,518 @@ class GridviewPanel extends BasePanelView {
     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);
     }
 }
 
@@ -4648,12 +4975,6 @@ class DockviewComponent extends BaseGrid {
     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;
     }
@@ -4680,6 +5001,7 @@ class DockviewComponent extends BaseGrid {
             styles: options.styles,
         });
         this.nextGroupId = sequentialNumberGenerator();
+        this._deserializer = new DefaultDockviewDeserialzier(this);
         this.watermark = null;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
@@ -4692,9 +5014,9 @@ class DockviewComponent extends BaseGrid {
         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;
@@ -4861,9 +5183,6 @@ class DockviewComponent extends BaseGrid {
     }
     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;
@@ -4881,7 +5200,7 @@ class DockviewComponent extends BaseGrid {
                 });
                 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, {
@@ -5008,14 +5327,12 @@ class DockviewComponent extends BaseGrid {
             : {}, (_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';
@@ -5025,7 +5342,7 @@ class DockviewComponent extends BaseGrid {
         }
         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;
         }
     }
@@ -5187,7 +5504,7 @@ class DockviewComponent extends BaseGrid {
                 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) => {
@@ -5200,857 +5517,522 @@ class DockviewComponent extends BaseGrid {
             }), 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();
     }
 }
 
@@ -6193,7 +6175,7 @@ class PaneviewComponent extends CompositeDisposable {
         this.addDisposables(this._disposable);
     }
     focus() {
-        //
+        //noop
     }
     updateOptions(options) {
         this._options = Object.assign(Object.assign({}, this.options), options);
@@ -6512,7 +6494,10 @@ ReactComponentBridge.displayName = 'DockviewReactJsBridge';
  * 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) {
@@ -6629,18 +6614,10 @@ class ReactPanelContentPart {
             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
     }
@@ -6677,60 +6654,15 @@ class ReactPanelHeaderPart {
         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;
@@ -6739,21 +6671,16 @@ class ReactWatermarkPart {
         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);
                 }
             },
         });
@@ -6768,17 +6695,11 @@ class ReactWatermarkPart {
         }
         (_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;
@@ -6860,6 +6781,7 @@ function createGroupControlElement(component, store) {
         }
         : 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();
@@ -6906,13 +6828,20 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             },
         };
         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,
@@ -6921,7 +6850,6 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             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) {
@@ -6984,9 +6912,16 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
         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(() => {
@@ -7131,7 +7066,7 @@ SplitviewReact.displayName = 'SplitviewComponent';
 
 class ReactGridPanelView extends GridviewPanel {
     constructor(id, component, reactComponent, reactPortalStore) {
-        super(id, component, new GridviewPanelApiImpl(id));
+        super(id, component);
         this.reactComponent = reactComponent;
         this.reactPortalStore = reactPortalStore;
     }
@@ -7341,16 +7276,24 @@ PaneviewReact.displayName = 'PaneviewComponent';
 
 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;
@@ -7368,6 +7311,7 @@ exports.SplitviewComponent = SplitviewComponent;
 exports.SplitviewPanel = SplitviewPanel;
 exports.SplitviewReact = SplitviewReact;
 exports.Tab = Tab;
+exports.createComponent = createComponent;
 exports.directionToPosition = directionToPosition;
 exports.getDirectionOrientation = getDirectionOrientation;
 exports.getGridLocation = getGridLocation;
@@ -7386,3 +7330,4 @@ exports.orthogonal = orthogonal;
 exports.positionToDirection = positionToDirection;
 exports.toTarget = toTarget;
 exports.usePortalsLifecycle = usePortalsLifecycle;
+exports.watchElementResize = watchElementResize;