dockview 1.4.0 → 1.4.3

package/dist/dockview.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.4.0
+ * @version 1.4.3
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -59,7 +59,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-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  cursor: pointer;\n}\n.pane-container .view .default-header .collapsed {\n  transform: rotate(-90deg);\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.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}";
 styleInject(css_248z);
 
 class TransferObject {
@@ -2308,18 +2308,12 @@ class SplitviewApi {
     removePanel(panel, sizing) {
         this.component.removePanel(panel, sizing);
     }
-    setVisible(panel, isVisible) {
-        this.component.setVisible(panel, isVisible);
-    }
     focus() {
         this.component.focus();
     }
     getPanel(id) {
         return this.component.getPanel(id);
     }
-    setActive(panel) {
-        this.component.setActive(panel);
-    }
     layout(width, height) {
         return this.component.layout(width, height);
     }
@@ -2335,6 +2329,9 @@ class SplitviewApi {
     toJSON() {
         return this.component.toJSON();
     }
+    clear() {
+        this.component.clear();
+    }
 }
 class PaneviewApi {
     constructor(component) {
@@ -2402,6 +2399,9 @@ class PaneviewApi {
     toJSON() {
         return this.component.toJSON();
     }
+    clear() {
+        this.component.clear();
+    }
 }
 class GridviewApi {
     constructor(component) {
@@ -2428,13 +2428,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() {
@@ -2467,21 +2467,15 @@ class GridviewApi {
     getPanel(id) {
         return this.component.getPanel(id);
     }
-    toggleVisibility(panel) {
-        this.component.toggleVisibility(panel);
-    }
-    setVisible(panel, visible) {
-        this.component.setVisible(panel, visible);
-    }
-    setActive(panel) {
-        this.component.setActive(panel);
-    }
     fromJSON(data) {
         return this.component.fromJSON(data);
     }
     toJSON() {
         return this.component.toJSON();
     }
+    clear() {
+        this.component.clear();
+    }
 }
 class DockviewApi {
     constructor(component) {
@@ -2530,7 +2524,7 @@ class DockviewApi {
         return this.component.onDidRemovePanel;
     }
     get onDidLayoutFromJSON() {
-        return this.component.onDidLayoutfromJSON;
+        return this.component.onDidLayoutFromJSON;
     }
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
@@ -2592,6 +2586,9 @@ class DockviewApi {
     toJSON() {
         return this.component.toJSON();
     }
+    clear() {
+        this.component.clear();
+    }
 }
 
 class ContentContainer extends CompositeDisposable {
@@ -2665,12 +2662,12 @@ class ContentContainer extends CompositeDisposable {
     }
 }
 
-var DockviewDropTargets;
+exports.DockviewDropTargets = void 0;
 (function (DockviewDropTargets) {
     DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab";
     DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel";
     DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
-})(DockviewDropTargets || (DockviewDropTargets = {}));
+})(exports.DockviewDropTargets || (exports.DockviewDropTargets = {}));
 
 class DragHandler extends CompositeDisposable {
     constructor(el) {
@@ -2712,7 +2709,7 @@ exports.MouseEventKind = void 0;
     MouseEventKind["CLICK"] = "CLICK";
     MouseEventKind["CONTEXT_MENU"] = "CONTEXT_MENU";
 })(exports.MouseEventKind || (exports.MouseEventKind = {}));
-class Tab$1 extends CompositeDisposable {
+class Tab extends CompositeDisposable {
     constructor(panelId, accessor, group) {
         super();
         this.panelId = panelId;
@@ -2726,6 +2723,7 @@ class Tab$1 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);
@@ -2768,7 +2766,7 @@ class Tab$1 extends CompositeDisposable {
                 if (data) {
                     return this.panelId !== data.panelId;
                 }
-                return this.group.model.canDisplayOverlay(event, DockviewDropTargets.Tab);
+                return this.group.model.canDisplayOverlay(event, exports.DockviewDropTargets.Tab);
             },
         });
         this.addDisposables(this.droptarget.onDrop((event) => {
@@ -2802,7 +2800,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;
@@ -2828,7 +2825,7 @@ class TabsContainer extends CompositeDisposable {
                     // 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;
                 }
-                return group.model.canDisplayOverlay(event, DockviewDropTargets.Panel);
+                return group.model.canDisplayOverlay(event, exports.DockviewDropTargets.Panel);
             },
         });
         this.addDisposables(this.voidDropTarget.onDrop((event) => {
@@ -2906,8 +2903,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) {
@@ -2941,7 +2938,7 @@ class TabsContainer extends CompositeDisposable {
         if (this.tabs.find((tab) => tab.value.panelId === panel.id)) {
             return;
         }
-        const tabToAdd = new Tab$1(panel.id, this.accessor, this.group);
+        const tabToAdd = new Tab(panel.id, this.accessor, this.group);
         if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
             throw new Error('invalid header component');
         }
@@ -2968,7 +2965,6 @@ class TabsContainer extends CompositeDisposable {
         }));
         const value = { value: tabToAdd, disposable };
         this.addTab(value, index);
-        this.activePanel = panel;
     }
     closePanel(panel) {
         this.delete(panel.id);
@@ -3027,7 +3023,7 @@ class Groupview extends CompositeDisposable {
                     const groupHasOnePanelAndIsActiveDragElement = this._panels.length === 1 && data.groupId === this.id;
                     return !groupHasOnePanelAndIsActiveDragElement;
                 }
-                return this.canDisplayOverlay(event, DockviewDropTargets.Panel);
+                return this.canDisplayOverlay(event, exports.DockviewDropTargets.Panel);
             },
         });
         container.append(this.tabsContainer.element, this.contentContainer.element);
@@ -3185,16 +3181,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();
@@ -3298,11 +3299,13 @@ class Groupview extends CompositeDisposable {
             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) {
@@ -3368,7 +3371,11 @@ 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),
+            });
         }
         return false;
     }
@@ -3451,7 +3458,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(exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
             this._bufferOnDidLayoutChange.fire();
@@ -3612,10 +3619,10 @@ class PanelApiImpl extends CompositeDisposable {
         this._isVisible = true;
         this._width = 0;
         this._height = 0;
-        this._onDidPanelDimensionChange = new Emitter({
+        this._onDidDimensionChange = new Emitter({
             replay: true,
         });
-        this.onDidDimensionsChange = this._onDidPanelDimensionChange.event;
+        this.onDidDimensionsChange = this._onDidDimensionChange.event;
         //
         this._onDidChangeFocus = new Emitter({
             replay: true,
@@ -3640,7 +3647,7 @@ class PanelApiImpl extends CompositeDisposable {
         //
         this._onActiveChange = new Emitter();
         this.onActiveChange = this._onActiveChange.event;
-        this.addDisposables(this._onDidPanelDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
+        this.addDisposables(this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
             this._isFocused = event.isFocused;
         }), this.onDidActiveChange((event) => {
             this._isActive = event.isActive;
@@ -3864,7 +3871,7 @@ class DockviewGroupPanel extends CompositeDisposable {
     layout(width, height) {
         var _a;
         // the obtain the correct dimensions of the content panel we must deduct the tab height
-        this.api._onDidPanelDimensionChange.fire({
+        this.api._onDidDimensionChange.fire({
             width,
             height: height - (this.group.model.header.height || 0),
         });
@@ -3961,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]
@@ -4014,53 +3993,6 @@ function createComponent(id, componentName, components = {}, frameworkComponents
     return new Component(id, componentName);
 }
 
-class WrappedTab {
-    constructor(renderer) {
-        this.renderer = renderer;
-        this._element = document.createElement('element');
-        this.show();
-    }
-    get innerRenderer() {
-        return this.renderer;
-    }
-    get element() {
-        return this._element;
-    }
-    get id() {
-        return this.renderer.id;
-    }
-    show() {
-        if (!this.renderer.element.parentElement) {
-            this._element.appendChild(this.renderer.element);
-        }
-    }
-    hide() {
-        if (this.renderer.element.parentElement) {
-            this.renderer.element.remove();
-        }
-    }
-    layout(width, height) {
-        this.renderer.layout(width, height);
-    }
-    update(event) {
-        this.renderer.update(event);
-    }
-    toJSON() {
-        return this.renderer.toJSON();
-    }
-    focus() {
-        this.renderer.focus();
-    }
-    init(parameters) {
-        this.renderer.init(parameters);
-    }
-    updateParentGroup(group, isPanelVisible) {
-        this.renderer.updateParentGroup(group, isPanelVisible);
-    }
-    dispose() {
-        this.renderer.dispose();
-    }
-}
 class DefaultTab extends CompositeDisposable {
     constructor() {
         super();
@@ -4123,15 +4055,21 @@ class DefaultTab extends CompositeDisposable {
         }
     }
     updateParentGroup(group, isPanelVisible) {
+        const changed = this._isPanelVisible !== isPanelVisible ||
+            this._isGroupActive !== group.isActive;
         this._isPanelVisible = isPanelVisible;
         this._isGroupActive = group.isActive;
-        this.render();
+        if (changed) {
+            this.render();
+        }
     }
     layout(_width, _height) {
         // noop
     }
     render() {
-        this._content.textContent = this.params.title;
+        if (this._content.textContent !== this.params.title) {
+            this._content.textContent = this.params.title;
+        }
     }
 }
 
@@ -4175,7 +4113,7 @@ class BasePanelView extends CompositeDisposable {
     layout(width, height) {
         this._width = width;
         this._height = height;
-        this.api._onDidPanelDimensionChange.fire({ width, height });
+        this.api._onDidDimensionChange.fire({ width, height });
         if (this.part) {
             if (this._params) {
                 this.part.update(this._params.params);
@@ -4224,11 +4162,11 @@ class GridviewPanel extends BasePanelView {
         this.onDidChange = this._onDidChange.event;
         this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
             const { isVisible } = event;
-            const { containerApi } = this._params;
-            containerApi.setVisible(this, isVisible);
+            const { accessor } = this._params;
+            accessor.setVisible(this, isVisible);
         }), this.api.onActiveChange(() => {
-            const { containerApi } = this._params;
-            containerApi.setActive(this);
+            const { accessor } = this._params;
+            accessor.setActive(this);
         }), this.api.onDidConstraintsChangeInternal((event) => {
             if (typeof event.minimumWidth === 'number' ||
                 typeof event.minimumWidth === 'function') {
@@ -4407,7 +4345,7 @@ class DefaultGroupPanelView {
     constructor(renderers) {
         var _a;
         this._content = renderers.content;
-        this._tab = new WrappedTab((_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab());
+        this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
         this._actions =
             renderers.actions ||
                 (this.content.actions
@@ -4447,9 +4385,7 @@ class DefaultGroupPanelView {
     toJSON() {
         return {
             content: this.content.toJSON(),
-            tab: this.tab.innerRenderer instanceof DefaultTab
-                ? undefined
-                : this.tab.toJSON(),
+            tab: this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(),
         };
     }
     dispose() {
@@ -4468,9 +4404,6 @@ class DockviewComponent extends BaseGrid {
             orientation: options.orientation || exports.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();
@@ -4479,11 +4412,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, exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+        this.addDisposables(this._onTabContextMenu, this._onDidDrop, exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
             this._bufferOnDidLayoutChange.fire();
         }));
         this._options = options;
@@ -4538,7 +4471,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;
@@ -4616,12 +4549,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');
         }
@@ -4632,12 +4560,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) {
@@ -4645,7 +4592,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()) {
@@ -4837,13 +4800,13 @@ class DockviewComponent extends BaseGrid {
             }
         }
         const view = new GroupPanel(this, id, options);
-        view.init({ params: {}, containerApi: null }); // required to initialized .part and allow for correct disposal of group
+        view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group
         if (!this._groups.has(view.id)) {
             const disposable = new CompositeDisposable(view.model.onMove((event) => {
                 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 }));
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: view }));
             }), view.model.onDidGroupChange((event) => {
                 switch (event.kind) {
                     case exports.GroupChangeKind2.ADD_PANEL:
@@ -4907,7 +4870,7 @@ class DockviewComponent extends BaseGrid {
         this._onDidActivePanelChange.dispose();
         this._onDidAddPanel.dispose();
         this._onDidRemovePanel.dispose();
-        this._onDidLayoutfromJSON.dispose();
+        this._onDidLayoutFromJSON.dispose();
     }
 }
 
@@ -4945,7 +4908,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;
@@ -4976,21 +4939,13 @@ class GridviewComponent extends BaseGrid {
             value.value.setActive(panel === value.value);
         });
     }
-    toggleVisibility(panel) {
-        this.setVisible(panel, !this.isVisible(panel));
-    }
     focus() {
         var _a;
         (_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) => {
@@ -5009,9 +4964,10 @@ class GridviewComponent extends BaseGrid {
                     maximumHeight: data.maximumHeight,
                     priority: data.priority,
                     snap: !!data.snap,
-                    containerApi: new GridviewApi(this),
+                    accessor: this,
                     isVisible: node.visible,
                 }));
+                this._onDidAddGroup.fire(view);
                 this.registerPanel(view);
                 return view;
             },
@@ -5026,6 +4982,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;
@@ -5075,7 +5043,7 @@ class GridviewComponent extends BaseGrid {
             maximumHeight: options.maximumHeight,
             priority: options.priority,
             snap: !!options.snap,
-            containerApi: new GridviewApi(this),
+            accessor: this,
             isVisible: true,
         });
         this.registerPanel(view);
@@ -5271,7 +5239,7 @@ class SplitviewComponent extends CompositeDisposable {
             maximumSize: options.maximumSize,
             snap: options.snap,
             priority: options.priority,
-            containerApi: new SplitviewApi(this),
+            accessor: this,
         });
         const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
         const index = typeof options.index === 'number' ? options.index : undefined;
@@ -5316,13 +5284,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,
@@ -5347,7 +5310,7 @@ class SplitviewComponent extends CompositeDisposable {
                             maximumSize: data.maximumSize,
                             snap: view.snap,
                             priority: view.priority,
-                            containerApi: new SplitviewApi(this),
+                            accessor: this,
                         });
                     });
                     panel.orientation = orientation;
@@ -5370,6 +5333,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();
@@ -5698,9 +5669,9 @@ class DefaultHeader extends CompositeDisposable {
         this.element.className = 'default-header';
         this._content = document.createElement('span');
         this._expander = document.createElement('a');
-        this.element.appendChild(this._content);
         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);
         }));
@@ -5711,9 +5682,10 @@ class DefaultHeader extends CompositeDisposable {
     init(params) {
         this.apiRef.api = params.api;
         this._content.textContent = params.title;
-        this._expander.textContent = params.api.isExpanded ? '<' : '>';
+        this._expander.textContent = '▼';
+        toggleClass(this._expander, 'collapsed', !params.api.isExpanded);
         this.disposable.value = params.api.onDidExpansionChange((e) => {
-            this._expander.textContent = e.isExpanded ? '<' : '>';
+            toggleClass(this._expander, 'collapsed', !e.isExpanded);
         });
     }
     update(_params) {
@@ -5889,13 +5861,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: exports.Orientation.VERTICAL,
             descriptor: {
@@ -5954,6 +5922,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);
@@ -5989,13 +5964,11 @@ class SplitviewPanel extends BasePanelView {
         this.onDidChange = this._onDidChange.event;
         this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
             const { isVisible } = event;
-            const { containerApi } = this
-                ._params;
-            containerApi.setVisible(this, isVisible);
+            const { accessor } = this._params;
+            accessor.setVisible(this, isVisible);
         }), this.api.onActiveChange(() => {
-            const { containerApi } = this
-                ._params;
-            containerApi.setActive(this);
+            const { accessor } = this._params;
+            accessor.setActive(this);
         }), this.api.onDidConstraintsChangeInternal((event) => {
             if (typeof event.minimumSize === 'number' ||
                 typeof event.minimumSize === 'function') {
@@ -6247,9 +6220,6 @@ class ReactPanelContentPart {
     layout(_width, _height) {
         // noop
     }
-    close() {
-        return Promise.resolve(true);
-    }
     dispose() {
         var _a, _b;
         this._onDidFocus.dispose();
@@ -6519,58 +6489,6 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
 });
 DockviewReact.displayName = 'DockviewComponent';
 
-const Tab = (props) => {
-    return React__namespace.createElement(React__namespace.Fragment, null, props.children);
-};
-const Content = (props) => {
-    return React__namespace.createElement(React__namespace.Fragment, null, props.children);
-};
-const Actions = (props) => {
-    return React__namespace.createElement(React__namespace.Fragment, null, props.children);
-};
-function isValidComponent(element) {
-    return [Content, Actions, Tab].find((comp) => element.type === comp);
-}
-const Panel = (props) => {
-    const context = React__namespace.useContext(ReactPartContext);
-    const sections = React__namespace.useMemo(() => {
-        var _a;
-        const childs = ((_a = React__namespace.Children.map(props.children, (_) => _)) === null || _a === void 0 ? void 0 : _a.filter(isReactElement)) || [];
-        const isInvalid = !!childs.find((_) => !isValidComponent(_));
-        if (isInvalid) {
-            throw new Error('Children of DockviewComponents.Panel must be one of the following: DockviewComponents.Content, DockviewComponents.Actions, DockviewComponents.Tab');
-        }
-        const body = childs.find((_) => _.type === Content);
-        const actions = childs.find((_) => _.type === Actions);
-        const tab = childs.find((_) => _.type === Tab);
-        return { body, actions, tab };
-    }, [props.children]);
-    React__namespace.useEffect(() => {
-        /**
-         * hide or show the default tab behavior based on whether we want to override
-         * with our own React tab.
-         */
-        if (sections.tab) {
-            context.tabPortalElement.hide();
-        }
-        else {
-            context.tabPortalElement.show();
-        }
-    }, [sections.tab]);
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        sections.actions &&
-            ReactDOM__namespace.createPortal(sections.actions, context.actionsPortalElement),
-        sections.tab &&
-            ReactDOM__namespace.createPortal(sections.tab, context.tabPortalElement.element),
-        sections.body || props.children));
-};
-const DockviewComponents = {
-    Tab,
-    Content,
-    Actions,
-    Panel,
-};
-
 class ReactPanelView extends SplitviewPanel {
     constructor(id, component, reactComponent, reactPortalStore) {
         super(id, component);
@@ -6582,8 +6500,7 @@ class ReactPanelView extends SplitviewPanel {
         return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
             params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
             api: this.api,
-            containerApi: this._params
-                .containerApi,
+            containerApi: new SplitviewApi(this._params.accessor),
         });
     }
 }
@@ -6659,8 +6576,7 @@ class ReactGridPanelView extends GridviewPanel {
         return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
             params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
             api: this.api,
-            containerApi: this._params
-                .containerApi,
+            containerApi: new GridviewApi(this._params.accessor),
         });
     }
 }
@@ -6854,7 +6770,6 @@ exports.BaseGrid = BaseGrid;
 exports.ContentContainer = ContentContainer;
 exports.DockviewApi = DockviewApi;
 exports.DockviewComponent = DockviewComponent;
-exports.DockviewComponents = DockviewComponents;
 exports.DockviewReact = DockviewReact;
 exports.Gridview = Gridview;
 exports.GridviewApi = GridviewApi;
@@ -6880,7 +6795,7 @@ exports.SplitviewApi = SplitviewApi;
 exports.SplitviewComponent = SplitviewComponent;
 exports.SplitviewPanel = SplitviewPanel;
 exports.SplitviewReact = SplitviewReact;
-exports.Tab = Tab$1;
+exports.Tab = Tab;
 exports.getDirectionOrientation = getDirectionOrientation;
 exports.getGridLocation = getGridLocation;
 exports.getLocationOrientation = getLocationOrientation;