dockview 1.4.1 → 1.5.0

package/dist/dockview.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.4.1
+ * @version 1.5.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -34,7 +34,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".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-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>');\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-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-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>');\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-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-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>');\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-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-activegroup-visiblepanel-tab-background-color: dodgerblue;\n  --dv-tabs-and-actions-container-height: 18px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\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 a:active {\n  -webkit-mask-size: 100% 100% !important;\n  mask-size: 100% 100% !important;\n}\n.actions-bar .actions-container .close-action {\n  background-color: white;\n  height: 16px;\n  width: 16px;\n  display: block;\n  -webkit-mask: var(--dv-tab-close-icon) 50% 50%/90% 90% no-repeat;\n  mask: var(--dv-tab-close-icon) 50% 50%/90% 90% no-repeat;\n  margin-right: \"0.5em\";\n  cursor: pointer;\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.left {\n  transform: translateX(-25%) scaleX(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.right {\n  transform: translateX(25%) scaleX(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.top {\n  transform: translateY(-25%) scaleY(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.bottom {\n  transform: translateY(25%) scaleY(0.5);\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.custom-dragging {\n  height: 24px;\n  line-height: 24px;\n  font-size: 11px;\n  width: 100px;\n  background-color: dodgerblue;\n  color: ghostwhite;\n  border-radius: 11px;\n  position: absolute;\n  padding-left: 10px;\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.active-tab .tab-action {\n  background-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.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab .tab-action {\n  background-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.active-tab .tab-action {\n  background-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.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab .tab-action {\n  background-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.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}\n.pane-container .view .default-header > span {\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 .void-container {\n  display: flex;\n  flex-grow: 1;\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.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.dragged {\n  transform: translate3d(0px, 0px, 0px);\n  /* 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.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-left: 10px;\n  white-space: nowrap;\n  text-overflow: elipsis;\n}\n.tab .default-tab .tab-content {\n  flex-grow: 1;\n}\n.tab .default-tab .action-container {\n  text-align: right;\n  width: 28px;\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 a:active:hover {\n  -webkit-mask-size: 100% 100% !important;\n  mask-size: 100% 100% !important;\n}\n.tab .default-tab .action-container .tab-list .tab-action {\n  height: 16px;\n  width: 16px;\n  display: block;\n  -webkit-mask: var(--dv-tab-close-icon) 50% 50%/90% 90% no-repeat;\n  mask: var(--dv-tab-close-icon) 50% 50%/90% 90% no-repeat;\n  margin-right: \"0.5em\";\n}\n.tab .default-tab .action-container .tab-list .tab-action.disable-close {\n  display: none;\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 = ".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.left {\n  transform: translateX(-25%) scaleX(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.right {\n  transform: translateX(25%) scaleX(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.top {\n  transform: translateY(-25%) scaleY(0.5);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.bottom {\n  transform: translateY(25%) scaleY(0.5);\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.custom-dragging {\n  height: 24px;\n  line-height: 24px;\n  font-size: 11px;\n  width: 100px;\n  background-color: dodgerblue;\n  color: ghostwhite;\n  border-radius: 11px;\n  position: absolute;\n  padding-left: 10px;\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.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 .void-container {\n  display: flex;\n  flex-grow: 1;\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.dragged {\n  transform: translate3d(0px, 0px, 0px);\n  /* 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.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.tab .default-tab .action-container .tab-list .tab-action.disable-close {\n  display: none;\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}";
 styleInject(css_248z);
 
 class TransferObject {
@@ -2304,6 +2304,9 @@ class SplitviewApi {
     toJSON() {
         return this.component.toJSON();
     }
+    clear() {
+        this.component.clear();
+    }
 }
 class PaneviewApi {
     constructor(component) {
@@ -2371,6 +2374,9 @@ class PaneviewApi {
     toJSON() {
         return this.component.toJSON();
     }
+    clear() {
+        this.component.clear();
+    }
 }
 class GridviewApi {
     constructor(component) {
@@ -2397,13 +2403,13 @@ class GridviewApi {
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
     }
-    get onDidAddGroup() {
+    get onDidAddPanel() {
         return this.component.onDidAddGroup;
     }
-    get onDidRemoveGroup() {
+    get onDidRemovePanel() {
         return this.component.onDidRemoveGroup;
     }
-    get onDidActiveGroupChange() {
+    get onDidActivePanelChange() {
         return this.component.onDidActiveGroupChange;
     }
     get onDidLayoutFromJSON() {
@@ -2442,6 +2448,9 @@ class GridviewApi {
     toJSON() {
         return this.component.toJSON();
     }
+    clear() {
+        this.component.clear();
+    }
 }
 class DockviewApi {
     constructor(component) {
@@ -2490,7 +2499,7 @@ class DockviewApi {
         return this.component.onDidRemovePanel;
     }
     get onDidLayoutFromJSON() {
-        return this.component.onDidLayoutfromJSON;
+        return this.component.onDidLayoutFromJSON;
     }
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
@@ -2552,6 +2561,9 @@ class DockviewApi {
     toJSON() {
         return this.component.toJSON();
     }
+    clear() {
+        this.component.clear();
+    }
 }
 
 class ContentContainer extends CompositeDisposable {
@@ -2676,6 +2688,7 @@ class Tab extends CompositeDisposable {
     constructor(panelId, accessor, group) {
         super();
         this.panelId = panelId;
+        this.accessor = accessor;
         this.group = group;
         this._onChanged = new Emitter();
         this.onChanged = this._onChanged.event;
@@ -2686,6 +2699,7 @@ class Tab extends CompositeDisposable {
         this._element.className = 'tab';
         this._element.tabIndex = 0;
         this._element.draggable = true;
+        toggleClass(this.element, 'inactive-tab', true);
         this.addDisposables(new (class Handler extends DragHandler {
             constructor() {
                 super(...arguments);
@@ -2725,7 +2739,7 @@ class Tab extends CompositeDisposable {
             validOverlays: 'none',
             canDisplayOverlay: (event) => {
                 const data = getPanelData();
-                if (data) {
+                if (data && this.accessor.id === data.viewId) {
                     return this.panelId !== data.panelId;
                 }
                 return this.group.model.canDisplayOverlay(event, DockviewDropTargets.Tab);
@@ -2762,7 +2776,6 @@ class TabsContainer extends CompositeDisposable {
         this.group = group;
         this.tabs = [];
         this.selectedIndex = -1;
-        this.active = false;
         this._hidden = false;
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
@@ -2784,7 +2797,7 @@ class TabsContainer extends CompositeDisposable {
             canDisplayOverlay: (event) => {
                 var _a;
                 const data = getPanelData();
-                if (data) {
+                if (data && this.accessor.id === data.viewId) {
                     // don't show the overlay if the tab being dragged is the last panel of this group
                     return ((_a = last(this.tabs)) === null || _a === void 0 ? void 0 : _a.value.panelId) !== data.panelId;
                 }
@@ -2866,8 +2879,8 @@ class TabsContainer extends CompositeDisposable {
     indexOf(id) {
         return this.tabs.findIndex((tab) => tab.value.panelId === id);
     }
-    setActive(isGroupActive) {
-        this.active = isGroupActive;
+    setActive(_isGroupActive) {
+        // noop
     }
     addTab(tab, index = this.tabs.length) {
         if (index < 0 || index > this.tabs.length) {
@@ -2928,7 +2941,6 @@ class TabsContainer extends CompositeDisposable {
         }));
         const value = { value: tabToAdd, disposable };
         this.addTab(value, index);
-        this.activePanel = panel;
     }
     closePanel(panel) {
         this.delete(panel.id);
@@ -2942,12 +2954,6 @@ class TabsContainer extends CompositeDisposable {
     }
 }
 
-var GroupChangeKind2;
-(function (GroupChangeKind2) {
-    GroupChangeKind2["ADD_PANEL"] = "ADD_PANEL";
-    GroupChangeKind2["REMOVE_PANEL"] = "REMOVE_PANEL";
-    GroupChangeKind2["PANEL_ACTIVE"] = "PANEL_ACTIVE";
-})(GroupChangeKind2 || (GroupChangeKind2 = {}));
 class Groupview extends CompositeDisposable {
     constructor(container, accessor, id, options, parent) {
         super();
@@ -2966,12 +2972,15 @@ class Groupview extends CompositeDisposable {
         this._panels = [];
         this._onMove = new Emitter();
         this.onMove = this._onMove.event;
-        this._onDidGroupChange = new Emitter();
-        this.onDidGroupChange = this._onDidGroupChange.event;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
+        this._onDidAddPanel = new Emitter();
+        this.onDidAddPanel = this._onDidAddPanel.event;
+        this._onDidRemovePanel = new Emitter();
+        this.onDidRemovePanel = this._onDidRemovePanel.event;
+        this._onDidActivePanelChange = new Emitter();
+        this.onDidActivePanelChange = this._onDidActivePanelChange.event;
         this.container.classList.add('groupview');
-        this.addDisposables(this._onMove, this._onDidGroupChange, this._onDidChange, this._onDidDrop);
         this.tabsContainer = new TabsContainer(this.accessor, this.parent, {
             tabHeight: options.tabHeight,
         });
@@ -2983,7 +2992,7 @@ class Groupview extends CompositeDisposable {
                     return false;
                 }
                 const data = getPanelData();
-                if (data) {
+                if (data && data.viewId === this.accessor.id) {
                     const groupHasOnePanelAndIsActiveDragElement = this._panels.length === 1 && data.groupId === this.id;
                     return !groupHasOnePanelAndIsActiveDragElement;
                 }
@@ -2993,7 +3002,7 @@ class Groupview extends CompositeDisposable {
         container.append(this.tabsContainer.element, this.contentContainer.element);
         this.header.hidden = !!options.hideHeader;
         this.locked = !!options.locked;
-        this.addDisposables(this._onMove, this._onDidGroupChange, this.tabsContainer.onDrop((event) => {
+        this.addDisposables(this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this.tabsContainer.onDrop((event) => {
             this.handleDropEvent(event.event, Position.Center, event.index);
         }), this.contentContainer.onDidFocus(() => {
             this.accessor.doSetGroupActive(this.parent, true);
@@ -3065,6 +3074,15 @@ class Groupview extends CompositeDisposable {
         // correctly initialized
         this.setActive(this.isActive, true, true);
         this.updateContainer();
+        if (this.accessor.options.createGroupControlElement) {
+            this._control = this.accessor.options.createGroupControlElement(this.parent);
+            this.addDisposables(this._control);
+            this._control.init({
+                containerApi: new DockviewApi(this.accessor),
+                api: this.parent.api,
+            });
+            this.tabsContainer.setActionElement(this._control.element);
+        }
     }
     indexOf(panel) {
         return this.tabsContainer.indexOf(panel.id);
@@ -3145,16 +3163,21 @@ class Groupview extends CompositeDisposable {
             options.index > this.panels.length) {
             options.index = this.panels.length;
         }
-        const skipSetActive = !!options.skipSetActive;
+        const skipSetPanelActive = !!options.skipSetPanelActive;
+        const skipSetGroupActive = !!options.skipSetGroupActive;
         // ensure the group is updated before we fire any events
         panel.updateParentGroup(this.parent, true);
-        if (!skipSetActive && this._activePanel === panel) {
-            this.accessor.doSetGroupActive(this.parent);
+        if (this._activePanel === panel) {
+            if (!skipSetGroupActive) {
+                this.accessor.doSetGroupActive(this.parent);
+            }
             return;
         }
-        this.doAddPanel(panel, options.index);
-        if (!skipSetActive) {
+        this.doAddPanel(panel, options.index, skipSetPanelActive);
+        if (!skipSetPanelActive) {
             this.doSetActivePanel(panel);
+        }
+        if (!skipSetGroupActive) {
             this.accessor.doSetGroupActive(this.parent, !!options.skipFocus);
         }
         this.updateContainer();
@@ -3190,14 +3213,8 @@ class Groupview extends CompositeDisposable {
     isPanelActive(panel) {
         return this._activePanel === panel;
     }
-    updateActions() {
-        var _a, _b;
-        if (this.isActive && ((_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.actions)) {
-            this.tabsContainer.setActionElement(this._activePanel.view.actions.element);
-        }
-        else {
-            this.tabsContainer.setActionElement(undefined);
-        }
+    updateActions(element) {
+        this.tabsContainer.setActionElement(element);
     }
     setActive(isGroupActive, skipFocus = false, force = false) {
         var _a, _b;
@@ -3253,16 +3270,15 @@ class Groupview extends CompositeDisposable {
         if (this.mostRecentlyUsed.includes(panel)) {
             this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
         }
-        this._onDidGroupChange.fire({
-            kind: GroupChangeKind2.REMOVE_PANEL,
-            panel,
-        });
+        this._onDidRemovePanel.fire({ panel });
     }
-    doAddPanel(panel, index = this.panels.length) {
+    doAddPanel(panel, index = this.panels.length, skipSetActive = false) {
         const existingPanel = this._panels.indexOf(panel);
         const hasExistingPanel = existingPanel > -1;
         this.tabsContainer.openPanel(panel, index);
-        this.contentContainer.openPanel(panel);
+        if (!skipSetActive) {
+            this.contentContainer.openPanel(panel);
+        }
         this.tabsContainer.show();
         this.contentContainer.show();
         if (hasExistingPanel) {
@@ -3271,10 +3287,7 @@ class Groupview extends CompositeDisposable {
         }
         this.updateMru(panel);
         this.panels.splice(index, 0, panel);
-        this._onDidGroupChange.fire({
-            kind: GroupChangeKind2.ADD_PANEL,
-            panel,
-        });
+        this._onDidAddPanel.fire({ panel });
     }
     doSetActivePanel(panel) {
         this._activePanel = panel;
@@ -3282,10 +3295,7 @@ class Groupview extends CompositeDisposable {
             this.tabsContainer.setActivePanel(panel);
             panel.layout(this._width, this._height);
             this.updateMru(panel);
-            this._onDidGroupChange.fire({
-                kind: GroupChangeKind2.PANEL_ACTIVE,
-                panel,
-            });
+            this._onDidActivePanelChange.fire({ panel });
         }
     }
     updateMru(panel) {
@@ -3295,7 +3305,6 @@ class Groupview extends CompositeDisposable {
         this.mostRecentlyUsed = [panel, ...this.mostRecentlyUsed];
     }
     updateContainer() {
-        this.updateActions();
         toggleClass(this.container, 'empty', this.isEmpty);
         this.panels.forEach((panel) => panel.updateParentGroup(this.parent, this.isActive));
         if (this.isEmpty && !this.watermark) {
@@ -3328,7 +3337,12 @@ class Groupview extends CompositeDisposable {
     canDisplayOverlay(event, target) {
         // custom overlay handler
         if (this.accessor.options.showDndOverlay) {
-            return this.accessor.options.showDndOverlay(event, target);
+            return this.accessor.options.showDndOverlay({
+                nativeEvent: event,
+                target,
+                group: this.accessor.getPanel(this.id),
+                getData: getPanelData,
+            });
         }
         return false;
     }
@@ -3376,7 +3390,7 @@ class Groupview extends CompositeDisposable {
     }
 }
 
-const nextLayoutId = sequentialNumberGenerator();
+const nextLayoutId$1 = sequentialNumberGenerator();
 function toTarget(direction) {
     switch (direction) {
         case 'left':
@@ -3396,7 +3410,7 @@ class BaseGrid extends CompositeDisposable {
     constructor(_element, options) {
         super();
         this._element = _element;
-        this._id = nextLayoutId.next();
+        this._id = nextLayoutId$1.next();
         this._groups = new Map();
         this._onDidLayoutChange = new Emitter();
         this.onDidLayoutChange = this._onDidLayoutChange.event;
@@ -3411,7 +3425,7 @@ class BaseGrid extends CompositeDisposable {
         this.element.appendChild(this.gridview.element);
         this.layout(0, 0, true); // set some elements height/widths
         this.addDisposables(this.gridview.onDidChange(() => {
-            this._onDidLayoutChange.fire();
+            this._bufferOnDidLayoutChange.fire();
         }));
         this.addDisposables(Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
             this._bufferOnDidLayoutChange.fire();
@@ -3856,6 +3870,38 @@ class ActionContainer {
     }
 }
 
+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 {
     constructor() {
         super();
@@ -3872,8 +3918,9 @@ class Watermark extends CompositeDisposable {
         const actions = new ActionContainer();
         title.appendChild(emptySpace);
         title.appendChild(actions.element);
-        const closeAnchor = document.createElement('a');
+        const closeAnchor = document.createElement('div');
         closeAnchor.className = 'close-action';
+        closeAnchor.appendChild(createCloseButton());
         actions.add(closeAnchor);
         this.addDisposables(addDisposableListener(closeAnchor, 'click', (ev) => {
             var _a;
@@ -3921,34 +3968,6 @@ class Watermark extends CompositeDisposable {
     }
 }
 
-class DefaultDeserializer {
-    constructor(layout, panelDeserializer) {
-        this.layout = layout;
-        this.panelDeserializer = panelDeserializer;
-    }
-    fromJSON(node) {
-        const data = node.data;
-        const children = data.views;
-        const active = data.activeView;
-        const group = this.layout.createGroup({
-            id: data.id,
-            locked: !!data.locked,
-            hideHeader: !!data.hideHeader,
-        });
-        for (const child of children) {
-            const panel = this.panelDeserializer.createPanel(child, group);
-            const isActive = typeof active === 'string' && active === panel.id;
-            group.model.openPanel(panel, {
-                skipSetActive: !isActive,
-            });
-        }
-        if (!group.activePanel && group.panels.length > 0) {
-            group.model.openPanel(group.panels[group.panels.length - 1]);
-        }
-        return group;
-    }
-}
-
 function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
     const Component = typeof componentName === 'string'
         ? components[componentName]
@@ -3974,6 +3993,7 @@ function createComponent(id, componentName, components = {}, frameworkComponents
     return new Component(id, componentName);
 }
 
+const DEFAULT_TAB_IDENTIFIER = '__default__tab__';
 class DefaultTab extends CompositeDisposable {
     constructor() {
         super();
@@ -3993,8 +4013,9 @@ class DefaultTab extends CompositeDisposable {
         this._list = document.createElement('ul');
         this._list.className = 'tab-list';
         //
-        this.action = document.createElement('a');
+        this.action = document.createElement('div');
         this.action.className = 'tab-action';
+        this.action.appendChild(createCloseButton());
         //
         this._element.appendChild(this._content);
         this._element.appendChild(this._actionContainer);
@@ -4010,7 +4031,7 @@ class DefaultTab extends CompositeDisposable {
         return this._element;
     }
     get id() {
-        return '__DEFAULT_TAB__';
+        return DEFAULT_TAB_IDENTIFIER;
     }
     update(event) {
         this.params = Object.assign(Object.assign({}, this.params), event.params);
@@ -4327,16 +4348,6 @@ class DefaultGroupPanelView {
         var _a;
         this._content = renderers.content;
         this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
-        this._actions =
-            renderers.actions ||
-                (this.content.actions
-                    ? {
-                        element: this.content.actions,
-                        dispose: () => {
-                            //
-                        },
-                    }
-                    : undefined);
     }
     get content() {
         return this._content;
@@ -4344,9 +4355,6 @@ class DefaultGroupPanelView {
     get tab() {
         return this._tab;
     }
-    get actions() {
-        return this._actions;
-    }
     init(params) {
         this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
         this.tab.init(params);
@@ -4364,16 +4372,18 @@ class DefaultGroupPanelView {
         this.tab.update(event);
     }
     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: this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(),
+            tab,
         };
     }
     dispose() {
-        var _a;
         this.content.dispose();
         this.tab.dispose();
-        (_a = this.actions) === null || _a === void 0 ? void 0 : _a.dispose();
     }
 }
 
@@ -4385,9 +4395,6 @@ class DockviewComponent extends BaseGrid {
             orientation: options.orientation || Orientation.HORIZONTAL,
             styles: options.styles,
         });
-        // events
-        this._onTabInteractionEvent = new Emitter();
-        this.onTabInteractionEvent = this._onTabInteractionEvent.event;
         this._onTabContextMenu = new Emitter();
         this.onTabContextMenu = this._onTabContextMenu.event;
         this._onDidDrop = new Emitter();
@@ -4396,11 +4403,11 @@ class DockviewComponent extends BaseGrid {
         this.onDidRemovePanel = this._onDidRemovePanel.event;
         this._onDidAddPanel = new Emitter();
         this.onDidAddPanel = this._onDidAddPanel.event;
-        this._onDidLayoutfromJSON = new Emitter();
-        this.onDidLayoutfromJSON = this._onDidLayoutfromJSON.event;
+        this._onDidLayoutFromJSON = new Emitter();
+        this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop, Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+        this.addDisposables(this._onTabContextMenu, this._onDidDrop, Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
             this._bufferOnDidLayoutChange.fire();
         }));
         this._options = options;
@@ -4455,7 +4462,7 @@ class DockviewComponent extends BaseGrid {
     }
     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.gridview.orientation = options.orientation;
@@ -4533,12 +4540,7 @@ class DockviewComponent extends BaseGrid {
         };
     }
     fromJSON(data) {
-        const groups = Array.from(this._groups.values()).map((_) => _.value);
-        for (const group of groups) {
-            // remove the group will automatically remove the panels
-            this.removeGroup(group, true);
-        }
-        this.gridview.clear();
+        this.clear();
         if (!this.deserializer) {
             throw new Error('invalid deserializer');
         }
@@ -4549,12 +4551,31 @@ class DockviewComponent extends BaseGrid {
         if (!this.deserializer) {
             throw new Error('no deserializer provided');
         }
-        this.gridview.deserialize(grid, new DefaultDeserializer(this, {
-            createPanel: (id, group) => {
-                const panelData = panels[id];
-                return this.deserializer.fromJSON(panelData, group);
-            },
-        }));
+        this.gridview.deserialize(grid, {
+            fromJSON: (node) => {
+                const { id, locked, hideHeader, views, activeView } = node.data;
+                const group = this.createGroup({
+                    id,
+                    locked: !!locked,
+                    hideHeader: !!hideHeader,
+                });
+                this._onDidAddGroup.fire(group);
+                for (const child of views) {
+                    const panel = this.deserializer.fromJSON(panels[child], group);
+                    const isActive = typeof activeView === 'string' && activeView === panel.id;
+                    group.model.openPanel(panel, {
+                        skipSetPanelActive: !isActive,
+                        skipSetGroupActive: true
+                    });
+                }
+                if (!group.activePanel && group.panels.length > 0) {
+                    group.model.openPanel(group.panels[group.panels.length - 1], {
+                        skipSetGroupActive: true
+                    });
+                }
+                return group;
+            }
+        });
         if (typeof activeGroup === 'string') {
             const panel = this.getPanel(activeGroup);
             if (panel) {
@@ -4562,7 +4583,23 @@ class DockviewComponent extends BaseGrid {
             }
         }
         this.gridview.layout(this.width, this.height);
-        this._onDidLayoutfromJSON.fire();
+        this._onDidLayoutFromJSON.fire();
+    }
+    clear() {
+        const groups = Array.from(this._groups.values()).map((_) => _.value);
+        const hasActiveGroup = !!this.activeGroup;
+        const hasActivePanel = !!this.activePanel;
+        for (const group of groups) {
+            // remove the group will automatically remove the panels
+            this.removeGroup(group, true);
+        }
+        if (hasActiveGroup) {
+            this.doSetGroupActive(undefined);
+        }
+        if (hasActivePanel) {
+            this._onDidActivePanelChange.fire(undefined);
+        }
+        this.gridview.clear();
     }
     closeAllGroups() {
         for (const entry of this._groups.entries()) {
@@ -4760,23 +4797,13 @@ class DockviewComponent extends BaseGrid {
                 const { groupId, itemId, target, index } = event;
                 this.moveGroupOrPanel(view, groupId, itemId, target, index);
             }), view.model.onDidDrop((event) => {
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api }));
-            }), view.model.onDidGroupChange((event) => {
-                switch (event.kind) {
-                    case GroupChangeKind2.ADD_PANEL:
-                        if (event.panel) {
-                            this._onDidAddPanel.fire(event.panel);
-                        }
-                        break;
-                    case GroupChangeKind2.REMOVE_PANEL:
-                        if (event.panel) {
-                            this._onDidRemovePanel.fire(event.panel);
-                        }
-                        break;
-                    case GroupChangeKind2.PANEL_ACTIVE:
-                        this._onDidActivePanelChange.fire(event.panel);
-                        break;
-                }
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: view }));
+            }), view.model.onDidAddPanel((event) => {
+                this._onDidAddPanel.fire(event.panel);
+            }), 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 });
         }
@@ -4791,7 +4818,7 @@ class DockviewComponent extends BaseGrid {
     createPanel(options, group) {
         const view = new DefaultGroupPanelView({
             content: this.createContentComponent(options.id, options.component),
-            tab: this.createTabComponent(options.id, options.tabComponent),
+            tab: this.createTabComponent(options.id, options.tabComponent || this.options.defaultTabComponent),
         });
         const panel = new DockviewGroupPanel(options.id, this, this._api, group);
         panel.init({
@@ -4824,7 +4851,7 @@ class DockviewComponent extends BaseGrid {
         this._onDidActivePanelChange.dispose();
         this._onDidAddPanel.dispose();
         this._onDidRemovePanel.dispose();
-        this._onDidLayoutfromJSON.dispose();
+        this._onDidLayoutFromJSON.dispose();
     }
 }
 
@@ -4862,7 +4889,7 @@ class GridviewComponent extends BaseGrid {
     }
     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.gridview.orientation = options.orientation;
@@ -4898,13 +4925,8 @@ class GridviewComponent extends BaseGrid {
         (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
     }
     fromJSON(serializedGridview) {
+        this.clear();
         const { grid, activePanel } = serializedGridview;
-        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.gridview.clear();
         const queue = [];
         this.gridview.deserialize(grid, {
             fromJSON: (node) => {
@@ -4926,6 +4948,7 @@ class GridviewComponent extends BaseGrid {
                     accessor: this,
                     isVisible: node.visible,
                 }));
+                this._onDidAddGroup.fire(view);
                 this.registerPanel(view);
                 return view;
             },
@@ -4940,6 +4963,18 @@ class GridviewComponent extends BaseGrid {
         }
         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;
@@ -5230,13 +5265,8 @@ class SplitviewComponent extends CompositeDisposable {
         };
     }
     fromJSON(serializedSplitview) {
+        this.clear();
         const { views, orientation, size, activeView } = serializedSplitview;
-        for (const [_, value] of this._panels.entries()) {
-            value.disposable.dispose();
-            value.value.dispose();
-        }
-        this._panels.clear();
-        this.splitview.dispose();
         const queue = [];
         this.splitview = new Splitview(this.element, {
             orientation,
@@ -5284,6 +5314,14 @@ class SplitviewComponent extends CompositeDisposable {
         }
         this._onDidLayoutfromJSON.fire();
     }
+    clear() {
+        for (const [_, value] of this._panels.entries()) {
+            value.disposable.dispose();
+            value.value.dispose();
+        }
+        this._panels.clear();
+        this.splitview.dispose();
+    }
     dispose() {
         for (const [_, value] of this._panels.entries()) {
             value.disposable.dispose();
@@ -5533,8 +5571,9 @@ class PaneviewPanel extends BasePanelView {
 }
 
 class DraggablePaneviewPanel extends PaneviewPanel {
-    constructor(id, component, headerComponent, orientation, isExpanded, disableDnd) {
+    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) {
@@ -5546,10 +5585,11 @@ class DraggablePaneviewPanel extends PaneviewPanel {
             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('paneview', id)], PaneTransfer.prototype);
+                LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
                 return {
                     dispose: () => {
                         LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
@@ -5559,12 +5599,22 @@ class DraggablePaneviewPanel extends PaneviewPanel {
         })(this.header);
         this.target = new Droptarget(this.element, {
             validOverlays: 'vertical',
-            canDisplayOverlay: () => {
+            canDisplayOverlay: (event) => {
                 const data = getPaneData();
-                if (!data) {
-                    return true;
+                if (data) {
+                    if (data.paneId !== this.id &&
+                        data.viewId === this.accessor.id) {
+                        return true;
+                    }
                 }
-                return data.paneId !== this.id;
+                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) => {
@@ -5573,8 +5623,10 @@ class DraggablePaneviewPanel extends PaneviewPanel {
     }
     onDrop(event) {
         const data = getPaneData();
-        if (!data) {
-            this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => 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
@@ -5582,7 +5634,8 @@ class DraggablePaneviewPanel extends PaneviewPanel {
         const panelId = data.paneId;
         const existingPanel = containerApi.getPanel(panelId);
         if (!existingPanel) {
-            this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+            // if the panel doesn't exist
+            this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: getPaneData }));
             return;
         }
         const allPanels = containerApi.panels;
@@ -5606,15 +5659,18 @@ class DraggablePaneviewPanel extends PaneviewPanel {
 class DefaultHeader extends CompositeDisposable {
     constructor() {
         super();
+        this._expandedIcon = createExpandMoreButton();
+        this._collapsedIcon = createChevronRightButton();
         this.disposable = new MutableDisposable();
         this.apiRef = { api: null };
         this._element = document.createElement('div');
         this.element.className = 'default-header';
         this._content = document.createElement('span');
-        this._expander = document.createElement('a');
-        this.element.appendChild(this._content);
+        this._expander = document.createElement('div');
+        this._expander.className = 'dockview-pane-header-icon';
         this.element.appendChild(this._expander);
-        this.addDisposables(addDisposableListener(this._expander, 'click', () => {
+        this.element.appendChild(this._content);
+        this.addDisposables(addDisposableListener(this._element, 'click', () => {
             var _a;
             (_a = this.apiRef.api) === null || _a === void 0 ? void 0 : _a.setExpanded(!this.apiRef.api.isExpanded);
         }));
@@ -5625,11 +5681,32 @@ class DefaultHeader extends CompositeDisposable {
     init(params) {
         this.apiRef.api = params.api;
         this._content.textContent = params.title;
-        this._expander.textContent = params.api.isExpanded ? '<' : '>';
-        this.disposable.value = params.api.onDidExpansionChange((e) => {
-            this._expander.textContent = e.isExpanded ? '<' : '>';
+        this.updateIcon();
+        this.disposable.value = params.api.onDidExpansionChange(() => {
+            this.updateIcon();
         });
     }
+    updateIcon() {
+        var _a;
+        const isExpanded = !!((_a = this.apiRef.api) === null || _a === void 0 ? void 0 : _a.isExpanded);
+        toggleClass(this._expander, 'collapsed', !isExpanded);
+        if (isExpanded) {
+            if (this._expander.contains(this._collapsedIcon)) {
+                this._collapsedIcon.remove();
+            }
+            if (!this._expander.contains(this._expandedIcon)) {
+                this._expander.appendChild(this._expandedIcon);
+            }
+        }
+        else {
+            if (this._expander.contains(this._expandedIcon)) {
+                this._expandedIcon.remove();
+            }
+            if (!this._expander.contains(this._collapsedIcon)) {
+                this._expander.appendChild(this._collapsedIcon);
+            }
+        }
+    }
     update(_params) {
         //
     }
@@ -5639,9 +5716,10 @@ class DefaultHeader extends CompositeDisposable {
     }
 }
 
+const nextLayoutId = sequentialNumberGenerator();
 class PaneFramework extends DraggablePaneviewPanel {
     constructor(options) {
-        super(options.id, options.component, options.headerComponent, options.orientation, options.isExpanded, options.disableDnd);
+        super(options.accessor, options.id, options.component, options.headerComponent, options.orientation, options.isExpanded, options.disableDnd);
         this.options = options;
     }
     getBodyComponent() {
@@ -5655,6 +5733,7 @@ class PaneviewComponent extends CompositeDisposable {
     constructor(element, options) {
         super();
         this.element = element;
+        this._id = nextLayoutId.next();
         this._disposable = new MutableDisposable();
         this._viewDisposables = new Map();
         this._onDidLayoutfromJSON = new Emitter();
@@ -5681,6 +5760,9 @@ class PaneviewComponent extends CompositeDisposable {
         });
         this.addDisposables(this._disposable);
     }
+    get id() {
+        return this._id;
+    }
     get panels() {
         return this.paneview.getPanes();
     }
@@ -5745,6 +5827,7 @@ class PaneviewComponent extends CompositeDisposable {
             orientation: Orientation.VERTICAL,
             isExpanded: !!options.isExpanded,
             disableDnd: !!this.options.disableDnd,
+            accessor: this,
         });
         this.doAddPanel(view);
         const size = typeof options.size === 'number' ? options.size : Sizing.Distribute;
@@ -5803,13 +5886,9 @@ class PaneviewComponent extends CompositeDisposable {
         };
     }
     fromJSON(serializedPaneview) {
+        this.clear();
         const { views, size } = serializedPaneview;
         const queue = [];
-        for (const [_, value] of this._viewDisposables.entries()) {
-            value.dispose();
-        }
-        this._viewDisposables.clear();
-        this.paneview.dispose();
         this.paneview = new Paneview(this.element, {
             orientation: Orientation.VERTICAL,
             descriptor: {
@@ -5843,6 +5922,7 @@ class PaneviewComponent extends CompositeDisposable {
                         orientation: Orientation.VERTICAL,
                         isExpanded: !!view.expanded,
                         disableDnd: !!this.options.disableDnd,
+                        accessor: this,
                     });
                     this.doAddPanel(panel);
                     queue.push(() => {
@@ -5868,6 +5948,13 @@ class PaneviewComponent extends CompositeDisposable {
         queue.forEach((f) => f());
         this._onDidLayoutfromJSON.fire();
     }
+    clear() {
+        for (const [_, value] of this._viewDisposables.entries()) {
+            value.dispose();
+        }
+        this._viewDisposables.clear();
+        this.paneview.dispose();
+    }
     doAddPanel(panel) {
         const disposable = panel.onDidDrop((event) => {
             this._onDidDrop.fire(event);
@@ -6035,15 +6122,21 @@ class ReactPart {
         this.component = component;
         this.parameters = parameters;
         this.context = context;
+        this._initialProps = {};
         this.disposed = false;
         this.createPortal();
     }
     update(props) {
-        var _a;
         if (this.disposed) {
             throw new Error('invalid operation: resource is already disposed');
         }
-        (_a = this.componentInstance) === null || _a === void 0 ? void 0 : _a.update(props);
+        if (!this.componentInstance) {
+            // if the component is yet to be mounted store the props
+            this._initialProps = Object.assign(Object.assign({}, this._initialProps), props);
+        }
+        else {
+            this.componentInstance.update(props);
+        }
     }
     createPortal() {
         if (this.disposed) {
@@ -6063,6 +6156,10 @@ class ReactPart {
             componentProps: this.parameters,
             ref: (element) => {
                 this.componentInstance = element;
+                if (Object.keys(this._initialProps).length > 0) {
+                    this.componentInstance.update(this._initialProps);
+                    this._initialProps = {}; // don't keep a reference to the users object once no longer required
+                }
             },
         });
         const node = this.context
@@ -6119,30 +6216,19 @@ class ReactPanelContentPart {
         this.onDidBlur = this._onDidBlur.event;
         this._element = document.createElement('div');
         this._element.className = 'dockview-react-part';
-        this._actionsElement = document.createElement('div');
-        this._actionsElement.className = 'dockview-react-part';
     }
     get element() {
         return this._element;
     }
-    get actions() {
-        return this._actionsElement;
-    }
     focus() {
         // TODO
     }
     init(parameters) {
-        const context = {
-            api: parameters.api,
-            containerApi: parameters.containerApi,
-            actionsPortalElement: this._actionsElement,
-            tabPortalElement: parameters.tab,
-        };
         this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
             params: parameters.params,
             api: parameters.api,
             containerApi: parameters.containerApi,
-        }, context);
+        });
     }
     toJSON() {
         return {
@@ -6160,11 +6246,10 @@ class ReactPanelContentPart {
         // noop
     }
     dispose() {
-        var _a, _b;
+        var _a;
         this._onDidFocus.dispose();
         this._onDidBlur.dispose();
         (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-        (_b = this.actionsPart) === null || _b === void 0 ? void 0 : _b.dispose();
     }
 }
 
@@ -6194,6 +6279,9 @@ class ReactPanelHeaderPart {
         (_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,
         };
@@ -6215,17 +6303,25 @@ class ReactPanelDeserialzier {
         this.layout = layout;
     }
     fromJSON(panelData, group) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const panelId = panelData.id;
         const params = panelData.params;
         const title = panelData.title;
         const suppressClosable = panelData.suppressClosable;
         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, (_a = this.layout.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.content),
-            tab: ((_b = viewData.tab) === null || _b === void 0 ? void 0 : _b.id)
-                ? createComponent(viewData.tab.id, viewData.tab.id, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_c = this.layout.options.frameworkComponentFactory) === null || _c === void 0 ? void 0 : _c.tab)
-                : new DefaultTab(),
+            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 DockviewGroupPanel(panelId, this.layout, new DockviewApi(this.layout), group);
         panel.init({
@@ -6293,6 +6389,80 @@ class ReactWatermarkPart {
     }
 }
 
+class ReactGroupControlsRendererPart {
+    constructor(component, reactPortalStore, _group) {
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._group = _group;
+        this.mutableDisposable = new MutableDisposable();
+        this._element = document.createElement('div');
+        this._element.className = 'dockview-react-part';
+    }
+    get element() {
+        return this._element;
+    }
+    get part() {
+        return this._part;
+    }
+    get group() {
+        return this._group;
+    }
+    focus() {
+        // TODO
+    }
+    init(parameters) {
+        this.mutableDisposable.value = new CompositeDisposable(this._group.model.onDidAddPanel(() => {
+            this.updatePanels();
+        }), this._group.model.onDidRemovePanel(() => {
+            this.updatePanels();
+        }), this._group.model.onDidActivePanelChange(() => {
+            this.updateActivePanel();
+        }), parameters.api.onDidActiveChange(() => {
+            this.updateGroupActive();
+        }));
+        this._part = new ReactPart(this.element, this.reactPortalStore, this.component, {
+            api: parameters.api,
+            containerApi: parameters.containerApi,
+            panels: this._group.model.panels,
+            activePanel: this._group.model.activePanel,
+            isGroupActive: this._group.api.isActive,
+        });
+    }
+    update(event) {
+        var _a;
+        (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
+    }
+    dispose() {
+        var _a;
+        this.mutableDisposable.dispose();
+        (_a = this._part) === null || _a === void 0 ? void 0 : _a.dispose();
+    }
+    updatePanels() {
+        this.update({ params: { panels: this._group.model.panels } });
+    }
+    updateActivePanel() {
+        this.update({
+            params: {
+                activePanel: this._group.model.activePanel,
+            },
+        });
+    }
+    updateGroupActive() {
+        this.update({
+            params: {
+                isGroupActive: this._group.api.isActive,
+            },
+        });
+    }
+}
+
+function createGroupControlElement(component, store) {
+    return component
+        ? (groupPanel) => {
+            return new ReactGroupControlsRendererPart(component, store, groupPanel);
+        }
+        : undefined;
+}
 const DockviewReact = React.forwardRef((props, ref) => {
     const domRef = React.useRef(null);
     const dockviewRef = React.useRef();
@@ -6342,12 +6512,15 @@ const DockviewReact = React.forwardRef((props, ref) => {
         const dockview = new DockviewComponent(element, {
             frameworkComponentFactory: factory,
             frameworkComponents: props.components,
-            frameworkTabComponents: props.tabComponents,
+            frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
             tabHeight: props.tabHeight,
             watermarkFrameworkComponent: props.watermarkComponent,
+            defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
             styles: props.hideBorders
                 ? { separatorBorder: 'transparent' }
                 : undefined,
+            showDndOverlay: props.showDndOverlay,
+            createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
         });
         (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
         dockview.deserializer = new ReactPanelDeserialzier(dockview);
@@ -6424,10 +6597,79 @@ const DockviewReact = React.forwardRef((props, ref) => {
             disposable.dispose();
         };
     }, [props.onTabContextMenu]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
+            frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
+        });
+    }, [props.defaultTabComponent]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
+        });
+    }, [props.groupControlComponent]);
     return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 DockviewReact.displayName = 'DockviewComponent';
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
+    React.createElement("path", { d: "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 DockviewDefaultTab = (_a) => {
+    var { api, containerApi: _containerApi, params: _params } = _a, rest = __rest(_a, ["api", "containerApi", "params"]);
+    const onClose = React.useCallback((event) => {
+        event.stopPropagation();
+        api.close();
+    }, [api]);
+    const onClick = React.useCallback((event) => {
+        api.setActive();
+        if (rest.onClick) {
+            rest.onClick(event);
+        }
+    }, [api, rest.onClick]);
+    const iconClassname = React.useMemo(() => {
+        const cn = ['dockview-react-tab-action'];
+        return cn.join(',');
+    }, [api.suppressClosable]);
+    return (React.createElement("div", Object.assign({}, rest, { onClick: onClick, className: "dockview-react-tab" }),
+        React.createElement("span", { className: "dockview-react-tab-title" }, api.title),
+        React.createElement("div", { className: iconClassname, onClick: onClose },
+            React.createElement(CloseButton, null))));
+};
+
 class ReactPanelView extends SplitviewPanel {
     constructor(id, component, reactComponent, reactPortalStore) {
         super(id, component);
@@ -6657,6 +6899,7 @@ const PaneviewReact = React.forwardRef((props, ref) => {
                     createComponent,
                 },
             },
+            showDndOverlay: props.showDndOverlay,
         });
         const api = new PaneviewApi(paneview);
         const { clientWidth, clientHeight } = domRef.current;
@@ -6701,8 +6944,16 @@ const PaneviewReact = React.forwardRef((props, ref) => {
             disposable.dispose();
         };
     }, [props.onDidDrop]);
+    React.useEffect(() => {
+        if (!paneviewRef.current) {
+            return;
+        }
+        paneviewRef.current.updateOptions({
+            showDndOverlay: props.showDndOverlay,
+        });
+    }, [props.showDndOverlay]);
     return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 PaneviewReact.displayName = 'PaneviewComponent';
 
-export { BaseGrid, ContentContainer, DockviewApi, DockviewComponent, DockviewReact, Event, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, GroupChangeKind2, Groupview, LayoutPriority, LocalSelectionTransfer, MouseEventKind, Orientation, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, Position, ReactPanelContentPart, ReactPanelHeaderPart, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isReactElement, orthogonal, toTarget, usePortalsLifecycle };
+export { BaseGrid, ContentContainer, DockviewApi, DockviewComponent, DockviewDefaultTab, DockviewDropTargets, DockviewReact, Event, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, Groupview, LayoutPriority, LocalSelectionTransfer, MouseEventKind, Orientation, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, Position, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isReactElement, orthogonal, toTarget, usePortalsLifecycle };