dockview 1.1.0 → 1.3.1

package/dist/dockview.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.1.0
+ * @version 1.3.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -54,9 +54,79 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
   }
 
-  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  pointer-events: none;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-drag-over-background-color);\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.left, .drop-target > .drop-target-dropzone > .drop-target-selection.right {\n  width: 50%;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.right {\n  transform: translate(100%, 0%);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.bottom {\n  transform: translate(0%, 100%);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.top, .drop-target > .drop-target-dropzone > .drop-target-selection.bottom {\n  height: 50%;\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}\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}";
   styleInject(css_248z);
 
+  class TransferObject {
+      constructor() {
+          //
+      }
+  }
+  class PanelTransfer extends TransferObject {
+      constructor(viewId, groupId, panelId) {
+          super();
+          this.viewId = viewId;
+          this.groupId = groupId;
+          this.panelId = panelId;
+      }
+  }
+  class PaneTransfer extends TransferObject {
+      constructor(viewId, paneId) {
+          super();
+          this.viewId = viewId;
+          this.paneId = paneId;
+      }
+  }
+  /**
+   * A singleton to store transfer data during drag & drop operations that are only valid within the application.
+   */
+  class LocalSelectionTransfer {
+      constructor() {
+          // protect against external instantiation
+      }
+      static getInstance() {
+          return LocalSelectionTransfer.INSTANCE;
+      }
+      hasData(proto) {
+          return proto && proto === this.proto;
+      }
+      clearData(proto) {
+          if (this.hasData(proto)) {
+              this.proto = undefined;
+              this.data = undefined;
+          }
+      }
+      getData(proto) {
+          if (this.hasData(proto)) {
+              return this.data;
+          }
+          return undefined;
+      }
+      setData(data, proto) {
+          if (proto) {
+              this.data = data;
+              this.proto = proto;
+          }
+      }
+  }
+  LocalSelectionTransfer.INSTANCE = new LocalSelectionTransfer();
+  function getPanelData() {
+      const panelTransfer = LocalSelectionTransfer.getInstance();
+      const isPanelEvent = panelTransfer.hasData(PanelTransfer.prototype);
+      if (!isPanelEvent) {
+          return undefined;
+      }
+      return panelTransfer.getData(PanelTransfer.prototype)[0];
+  }
+  function getPaneData() {
+      const paneTransfer = LocalSelectionTransfer.getInstance();
+      const isPanelEvent = paneTransfer.hasData(PaneTransfer.prototype);
+      if (!isPanelEvent) {
+          return undefined;
+      }
+      return paneTransfer.getData(PaneTransfer.prototype)[0];
+  }
+
   exports.Event = void 0;
   (function (Event) {
       Event.any = (...children) => {
@@ -146,116 +216,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
-  exports.Disposable = void 0;
-  (function (Disposable) {
-      Disposable.NONE = {
-          dispose: () => {
-              // noop
-          },
-      };
-  })(exports.Disposable || (exports.Disposable = {}));
-  class CompositeDisposable {
-      constructor(...args) {
-          this.disposables = args;
-      }
-      static from(...args) {
-          return new CompositeDisposable(...args);
-      }
-      addDisposables(...args) {
-          args.forEach((arg) => this.disposables.push(arg));
-      }
-      dispose() {
-          this.disposables.forEach((arg) => arg.dispose());
-      }
-  }
-  class MutableDisposable {
-      constructor() {
-          this._disposable = exports.Disposable.NONE;
-      }
-      set value(disposable) {
-          if (this._disposable) {
-              this._disposable.dispose();
-          }
-          this._disposable = disposable;
-      }
-      dispose() {
-          if (this._disposable) {
-              this._disposable.dispose();
-              this._disposable = exports.Disposable.NONE;
-          }
-      }
-  }
-
-  class TransferObject {
-      constructor() {
-          //
-      }
-  }
-  class PanelTransfer extends TransferObject {
-      constructor(viewId, groupId, panelId) {
-          super();
-          this.viewId = viewId;
-          this.groupId = groupId;
-          this.panelId = panelId;
-      }
-  }
-  class PaneTransfer extends TransferObject {
-      constructor(viewId, paneId) {
-          super();
-          this.viewId = viewId;
-          this.paneId = paneId;
-      }
-  }
-  /**
-   * A singleton to store transfer data during drag & drop operations that are only valid within the application.
-   */
-  class LocalSelectionTransfer {
-      constructor() {
-          // protect against external instantiation
-      }
-      static getInstance() {
-          return LocalSelectionTransfer.INSTANCE;
-      }
-      hasData(proto) {
-          return proto && proto === this.proto;
-      }
-      clearData(proto) {
-          if (this.hasData(proto)) {
-              this.proto = undefined;
-              this.data = undefined;
-          }
-      }
-      getData(proto) {
-          if (this.hasData(proto)) {
-              return this.data;
-          }
-          return undefined;
-      }
-      setData(data, proto) {
-          if (proto) {
-              this.data = data;
-              this.proto = proto;
-          }
-      }
-  }
-  LocalSelectionTransfer.INSTANCE = new LocalSelectionTransfer();
-  function getPanelData() {
-      const panelTransfer = LocalSelectionTransfer.getInstance();
-      const isPanelEvent = panelTransfer.hasData(PanelTransfer.prototype);
-      if (!isPanelEvent) {
-          return undefined;
-      }
-      return panelTransfer.getData(PanelTransfer.prototype)[0];
-  }
-  function getPaneData() {
-      const paneTransfer = LocalSelectionTransfer.getInstance();
-      const isPanelEvent = paneTransfer.hasData(PaneTransfer.prototype);
-      if (!isPanelEvent) {
-          return undefined;
-      }
-      return paneTransfer.getData(PaneTransfer.prototype)[0];
-  }
-
   class SplitviewApi {
       constructor(component) {
           this.component = component;
@@ -278,6 +238,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get orientation() {
           return this.component.orientation;
       }
+      get onDidLayoutFromJSON() {
+          return this.component.onDidLayoutFromJSON;
+      }
       get onDidLayoutChange() {
           return this.component.onDidLayoutChange;
       }
@@ -320,8 +283,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       movePanel(from, to) {
           this.component.movePanel(from, to);
       }
-      fromJSON(data, deferComponentLayout) {
-          this.component.fromJSON(data, deferComponentLayout);
+      fromJSON(data) {
+          this.component.fromJSON(data);
       }
       toJSON() {
           return this.component.toJSON();
@@ -346,6 +309,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get onDidLayoutChange() {
           return this.component.onDidLayoutChange;
       }
+      get onDidLayoutFromJSON() {
+          return this.component.onDidLayoutFromJSON;
+      }
       get onDidAddView() {
           return this.component.onDidAddView;
       }
@@ -382,13 +348,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.component.layout(width, height);
       }
       addPanel(options) {
-          return this.component.addPanel(options);
+          this.component.addPanel(options);
       }
       resizeToFit() {
           this.component.resizeToFit();
       }
-      fromJSON(data, deferComponentLayout) {
-          this.component.fromJSON(data, deferComponentLayout);
+      fromJSON(data) {
+          this.component.fromJSON(data);
       }
       toJSON() {
           return this.component.toJSON();
@@ -416,9 +382,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get height() {
           return this.component.height;
       }
-      get onGridEvent() {
-          return this.component.onGridEvent;
-      }
       get onDidLayoutChange() {
           return this.component.onDidLayoutChange;
       }
@@ -473,8 +436,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       setActive(panel) {
           this.component.setActive(panel);
       }
-      fromJSON(data, deferComponentLayout) {
-          return this.component.fromJSON(data, deferComponentLayout);
+      fromJSON(data) {
+          return this.component.fromJSON(data);
       }
       toJSON() {
           return this.component.toJSON();
@@ -508,9 +471,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get totalPanels() {
           return this.component.totalPanels;
       }
-      get onGridEvent() {
-          return this.component.onGridEvent;
-      }
       get onDidActiveGroupChange() {
           return this.component.onDidActiveGroupChange;
       }
@@ -529,7 +489,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get onDidRemovePanel() {
           return this.component.onDidRemovePanel;
       }
-      get onDidLayoutfromJSON() {
+      get onDidLayoutFromJSON() {
           return this.component.onDidLayoutfromJSON;
       }
       get onDidLayoutChange() {
@@ -594,6 +554,46 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
+  var Disposable;
+  (function (Disposable) {
+      Disposable.NONE = {
+          dispose: () => {
+              // noop
+          },
+      };
+  })(Disposable || (Disposable = {}));
+  class CompositeDisposable {
+      constructor(...args) {
+          this.disposables = args;
+      }
+      static from(...args) {
+          return new CompositeDisposable(...args);
+      }
+      addDisposables(...args) {
+          args.forEach((arg) => this.disposables.push(arg));
+      }
+      dispose() {
+          this.disposables.forEach((arg) => arg.dispose());
+      }
+  }
+  class MutableDisposable {
+      constructor() {
+          this._disposable = Disposable.NONE;
+      }
+      set value(disposable) {
+          if (this._disposable) {
+              this._disposable.dispose();
+          }
+          this._disposable = disposable;
+      }
+      dispose() {
+          if (this._disposable) {
+              this._disposable.dispose();
+              this._disposable = Disposable.NONE;
+          }
+      }
+  }
+
   function watchElementResize(element, cb) {
       const observer = new ResizeObserver((entires) => {
           const firstEntry = entires[0];
@@ -1539,13 +1539,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._onDidSashEnd.dispose();
           this._onDidAddView.dispose();
           this._onDidRemoveView.dispose();
-          this.element.remove();
           for (let i = 0; i < this.element.children.length; i++) {
               if (this.element.children.item(i) === this.element) {
                   this.element.removeChild(this.element);
                   break;
               }
           }
+          this.element.remove();
       }
   }
 
@@ -1568,7 +1568,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           });
           // if we've added views from the descriptor we need to
           // add the panes to our Pane array and setup animation
-          this.getPanes().forEach((pane, index) => {
+          this.getPanes().forEach((pane) => {
               const disposable = new CompositeDisposable(pane.onDidChangeExpansionState(() => {
                   this.setupAnimation();
                   this._onDidChange.fire(undefined);
@@ -1636,17 +1636,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       getPanes() {
           return this.splitview.getViews();
       }
-      removePane(index) {
+      removePane(index, options = { skipDispose: false }) {
           const paneItem = this.paneItems.splice(index, 1)[0];
           this.splitview.removeView(index);
-          paneItem.disposable.dispose();
+          if (!options.skipDispose) {
+              paneItem.disposable.dispose();
+              paneItem.pane.dispose();
+          }
           return paneItem;
       }
       moveView(from, to) {
           if (from === to) {
               return;
           }
-          const view = this.removePane(from);
+          const view = this.removePane(from, { skipDispose: true });
           this.skipAnimation = true;
           try {
               this.addPane(view.pane, view.pane.size, to, false);
@@ -1674,15 +1677,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       dispose() {
           super.dispose();
-          this.splitview.dispose();
           if (this.animationTimer) {
               clearTimeout(this.animationTimer);
               this.animationTimer = undefined;
           }
           this.paneItems.forEach((paneItem) => {
               paneItem.disposable.dispose();
+              paneItem.pane.dispose();
           });
           this.paneItems = [];
+          this.splitview.dispose();
           this.element.remove();
       }
   }
@@ -1746,7 +1750,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._onDrop = new Emitter();
           this.onDrop = this._onDrop.event;
           this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
-              onDragEnter: (e) => undefined,
+              onDragEnter: () => undefined,
               onDragOver: (e) => {
                   if (isBooleanValue(this.options.canDisplayOverlay)) {
                       if (!this.options.canDisplayOverlay) {
@@ -1787,10 +1791,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   this.toggleClasses(quadrant, isSmallX, isSmallY);
                   this.setState(quadrant);
               },
-              onDragLeave: (e) => {
+              onDragLeave: () => {
                   this.removeDropTarget();
               },
-              onDragEnd: (e) => {
+              onDragEnd: () => {
                   this.removeDropTarget();
               },
               onDrop: (e) => {
@@ -2001,7 +2005,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.children = [];
           this._onDidChange = new Emitter();
           this.onDidChange = this._onDidChange.event;
-          this._childrenDisposable = exports.Disposable.NONE;
+          this._childrenDisposable = Disposable.NONE;
           this._orthogonalSize = orthogonalSize;
           this._size = size;
           this.element = document.createElement('div');
@@ -2026,7 +2030,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                               : true,
                       };
                   }),
-                  size: this.orthogonalSize,
+                  size: this.size,
               };
               this.children = childDescriptors.map((c) => c.node);
               this.splitview = new Splitview(this.element, {
@@ -2187,7 +2191,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       setupChildrenEvents() {
           this._childrenDisposable.dispose();
-          this._childrenDisposable = exports.Event.any(...this.children.map((c) => c.onDidChange))((e) => {
+          this._childrenDisposable = exports.Event.any(...this.children.map((c) => c.onDidChange))(() => {
               /**
                * indicate a change has occured to allows any re-rendering but don't bubble
                * event because that was specific to this branch
@@ -2347,6 +2351,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.disposable.dispose();
           this._onDidChange.dispose();
           this.root.dispose();
+          this.element.remove();
       }
       clear() {
           const orientation = this.root.orientation;
@@ -2549,7 +2554,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           const [parentIndex, ...__] = [...rest].reverse();
           const isSiblingVisible = parent.isChildVisible(0);
           parent.removeChild(0, sizing);
-          const sizes = grandParent.children.map((size, i) => grandParent.getChildSize(i));
+          const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i));
           grandParent.removeChild(parentIndex, sizing);
           if (sibling instanceof BranchNode) {
               sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
@@ -2648,7 +2653,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           this.disposable.value = disposable;
       }
-      layout(width, height) {
+      layout(_width, _height) {
           // noop
       }
       closePanel() {
@@ -2696,7 +2701,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               if (event.dataTransfer) {
                   event.dataTransfer.effectAllowed = 'move';
               }
-          }), addDisposableListener(this.el, 'dragend', (ev) => {
+          }), addDisposableListener(this.el, 'dragend', () => {
               for (const iframe of this.iframes) {
                   iframe.style.pointerEvents = 'auto';
               }
@@ -3063,6 +3068,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get maximumWidth() {
           return Number.MAX_SAFE_INTEGER;
       }
+      get hasWatermark() {
+          return !!(this.watermark && this.container.contains(this.watermark.element));
+      }
       initialize() {
           var _a, _b;
           if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.panels) {
@@ -3141,10 +3149,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       containsPanel(panel) {
           return this.panels.includes(panel);
       }
-      init(params) {
+      init(_params) {
           //noop
       }
-      update(params) {
+      update(_params) {
           //noop
       }
       focus() {
@@ -3367,29 +3375,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
       }
       dispose() {
+          var _a;
+          super.dispose();
+          (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.dispose();
           for (const panel of this.panels) {
               panel.dispose();
           }
-          super.dispose();
           this.dropTarget.dispose();
           this.tabsContainer.dispose();
           this.contentContainer.dispose();
       }
   }
 
-  exports.GroupChangeKind = void 0;
-  (function (GroupChangeKind) {
-      GroupChangeKind["ADD_PANEL"] = "ADD_PANEL";
-      GroupChangeKind["REMOVE_PANEL"] = "REMOVE_PANEL";
-      GroupChangeKind["PANEL_ACTIVE"] = "PANEL_ACTIVE";
-      //
-      GroupChangeKind["GROUP_ACTIVE"] = "GROUP_ACTIVE";
-      GroupChangeKind["ADD_GROUP"] = "ADD_GROUP";
-      GroupChangeKind["REMOVE_GROUP"] = "REMOVE_GROUP";
-      //
-      GroupChangeKind["LAYOUT_FROM_JSON"] = "LAYOUT_FROM_JSON";
-      GroupChangeKind["LAYOUT"] = "LAYOUT";
-  })(exports.GroupChangeKind || (exports.GroupChangeKind = {}));
   const nextLayoutId = sequentialNumberGenerator();
   function toTarget(direction) {
       switch (direction) {
@@ -3412,9 +3409,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._element = _element;
           this._id = nextLayoutId.next();
           this._groups = new Map();
-          //
-          this._onGridEvent = new Emitter();
-          this.onGridEvent = this._onGridEvent.event;
           this._onDidLayoutChange = new Emitter();
           this.onDidLayoutChange = this._onDidLayoutChange.event;
           this._onDidRemoveGroup = new Emitter();
@@ -3423,30 +3417,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.onDidAddGroup = this._onDidAddGroup.event;
           this._onDidActiveGroupChange = new Emitter();
           this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+          this._bufferOnDidLayoutChange = new TickDelayedEvent();
           this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
           this.element.appendChild(this.gridview.element);
           this.layout(0, 0, true); // set some elements height/widths
           this.addDisposables(this.gridview.onDidChange(() => {
-              this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT });
+              this._onDidLayoutChange.fire();
           }));
-          this.addDisposables((() => {
-              const tickDelayedEvent = new TickDelayedEvent();
-              return new CompositeDisposable(this.onGridEvent((event) => {
-                  if ([
-                      exports.GroupChangeKind.ADD_GROUP,
-                      exports.GroupChangeKind.REMOVE_GROUP,
-                      exports.GroupChangeKind.ADD_PANEL,
-                      exports.GroupChangeKind.REMOVE_PANEL,
-                      exports.GroupChangeKind.GROUP_ACTIVE,
-                      exports.GroupChangeKind.PANEL_ACTIVE,
-                      exports.GroupChangeKind.LAYOUT,
-                  ].includes(event.kind)) {
-                      tickDelayedEvent.fire();
-                  }
-              }), tickDelayedEvent.onEvent(() => {
-                  this._onDidLayoutChange.fire();
-              }), tickDelayedEvent);
-          })());
+          this.addDisposables(exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+              this._bufferOnDidLayoutChange.fire();
+          }), this._bufferOnDidLayoutChange.onEvent(() => {
+              this._onDidLayoutChange.fire();
+          }), this._bufferOnDidLayoutChange);
       }
       get id() {
           return this._id;
@@ -3483,14 +3465,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       setVisible(panel, visible) {
           this.gridview.setViewVisible(getGridLocation(panel.element), visible);
-          this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT });
+          this._onDidLayoutChange.fire();
       }
       isVisible(panel) {
           return this.gridview.isViewVisible(getGridLocation(panel.element));
       }
       doAddGroup(group, location = [0], size) {
           this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
-          this._onGridEvent.fire({ kind: exports.GroupChangeKind.ADD_GROUP });
           this._onDidAddGroup.fire(group);
           this.doSetGroupActive(group);
       }
@@ -3502,9 +3483,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           const view = this.gridview.remove(group, exports.Sizing.Distribute);
           if (item && !(options === null || options === void 0 ? void 0 : options.skipDispose)) {
               item.disposable.dispose();
+              item.value.dispose();
               this._groups.delete(group.id);
           }
-          this._onGridEvent.fire({ kind: exports.GroupChangeKind.REMOVE_GROUP });
           this._onDidRemoveGroup.fire(group);
           if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
               const groups = Array.from(this._groups.values());
@@ -3533,9 +3514,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               }
           }
           this._activeGroup = group;
-          this._onGridEvent.fire({
-              kind: exports.GroupChangeKind.GROUP_ACTIVE,
-          });
           this._onDidActiveGroupChange.fire(group);
       }
       removeGroup(group) {
@@ -3592,11 +3570,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       dispose() {
           super.dispose();
-          this._onGridEvent.dispose();
           this._onDidActiveGroupChange.dispose();
           this._onDidAddGroup.dispose();
           this._onDidRemoveGroup.dispose();
           this._onDidLayoutChange.dispose();
+          for (const group of this.groups) {
+              group.dispose();
+          }
           this.gridview.dispose();
       }
   }
@@ -3774,6 +3754,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               this.update({ params: { title } });
           }));
       }
+      get params() {
+          var _a;
+          return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+      }
       get title() {
           return this._title;
       }
@@ -3922,7 +3906,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get id() {
           return 'watermark';
       }
-      update(event) {
+      update(_event) {
           // noop
       }
       focus() {
@@ -3931,17 +3915,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       toJSON() {
           return {};
       }
-      layout(width, height) {
+      layout(_width, _height) {
           // noop
       }
       init(params) {
           this.params = params;
-          this.addDisposables(this.params.containerApi.onDidLayoutChange((event) => {
+          this.addDisposables(this.params.containerApi.onDidLayoutChange(() => {
               this.render();
           }));
           this.render();
       }
-      updateParentGroup(group, visible) {
+      updateParentGroup(group, _visible) {
           this.group = group;
           this.render();
       }
@@ -4116,7 +4100,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._isGroupActive = group.isActive;
           this.render();
       }
-      layout(width, height) {
+      layout(_width, _height) {
           // noop
       }
       render() {
@@ -4190,8 +4174,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           };
       }
       dispose() {
+          var _a;
           super.dispose();
           this.api.dispose();
+          (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
       }
   }
 
@@ -4450,7 +4436,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.onDidLayoutfromJSON = this._onDidLayoutfromJSON.event;
           this._onDidActivePanelChange = new Emitter();
           this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-          this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop);
+          this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop, exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+              this._bufferOnDidLayoutChange.fire();
+          }));
           this._options = options;
           if (!this.options.components) {
               this.options.components = {};
@@ -4584,11 +4572,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           };
       }
       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.panels.forEach((panel) => {
-              panel.dispose();
-          });
-          this._groups.clear();
           if (!this.deserializer) {
               throw new Error('invalid deserializer');
           }
@@ -4612,7 +4601,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               }
           }
           this.gridview.layout(this.width, this.height);
-          this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT_FROM_JSON });
           this._onDidLayoutfromJSON.fire();
       }
       closeAllGroups() {
@@ -4634,7 +4622,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       addPanel(options) {
           var _a, _b;
-          const panel = this._addPanel(options);
+          if (this.panels.find((_) => _.id === options.id)) {
+              throw new Error(`panel with id ${options.id} already exists`);
+          }
+          const panel = this.createPanel(options);
           let referenceGroup;
           if ((_a = options.position) === null || _a === void 0 ? void 0 : _a.referencePanel) {
               const referencePanel = this.getGroupPanel(options.position.referencePanel);
@@ -4662,13 +4653,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           return panel;
       }
-      removePanel(panel) {
+      removePanel(panel, options = {
+          removeEmptyGroup: true,
+          skipDispose: false,
+      }) {
           const group = panel.group;
           if (!group) {
               throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
           }
           group.model.removePanel(panel);
-          if (group.model.size === 0) {
+          panel.dispose();
+          const retainGroupForWatermark = this.size === 1;
+          if (!retainGroupForWatermark &&
+              group.model.size === 0 &&
+              options.removeEmptyGroup) {
               this.removeGroup(group);
           }
       }
@@ -4700,16 +4698,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               this.doAddGroup(group);
           }
       }
-      removeGroup(group) {
+      removeGroup(group, skipActive = false) {
           const panels = [...group.model.panels]; // reassign since group panels will mutate
-          panels.forEach((panel) => {
-              this.removePanel(panel);
-          });
-          if (this._groups.size === 1) {
-              this._activeGroup = group;
-              return;
+          for (const panel of panels) {
+              this.removePanel(panel, {
+                  removeEmptyGroup: false,
+                  skipDispose: false,
+              });
           }
-          super.removeGroup(group);
+          super.doRemoveGroup(group, { skipActive });
       }
       moveGroupOrPanel(referenceGroup, groupId, itemId, target, index) {
           var _a;
@@ -4764,15 +4761,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
       }
       doSetGroupActive(group, skipFocus) {
-          var _a, _b, _c;
+          var _a, _b;
           const isGroupAlreadyFocused = this._activeGroup === group;
           super.doSetGroupActive(group, skipFocus);
           if (!isGroupAlreadyFocused && ((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.model.activePanel)) {
-              this._onGridEvent.fire({
-                  kind: exports.GroupChangeKind.PANEL_ACTIVE,
-                  panel: (_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel,
-              });
-              this._onDidActivePanelChange.fire((_c = this._activeGroup) === null || _c === void 0 ? void 0 : _c.model.activePanel);
+              this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel);
           }
       }
       createGroup(options) {
@@ -4794,6 +4787,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               }
           }
           const view = new GroupviewPanel(this, id, options);
+          view.init({ params: {}, containerApi: 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;
@@ -4803,28 +4797,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               }), view.model.onDidGroupChange((event) => {
                   switch (event.kind) {
                       case exports.GroupChangeKind2.ADD_PANEL:
-                          this._onGridEvent.fire({
-                              kind: exports.GroupChangeKind.ADD_PANEL,
-                              panel: event.panel,
-                          });
                           if (event.panel) {
                               this._onDidAddPanel.fire(event.panel);
                           }
                           break;
                       case exports.GroupChangeKind2.REMOVE_PANEL:
-                          this._onGridEvent.fire({
-                              kind: exports.GroupChangeKind.REMOVE_PANEL,
-                              panel: event.panel,
-                          });
                           if (event.panel) {
                               this._onDidRemovePanel.fire(event.panel);
                           }
                           break;
                       case exports.GroupChangeKind2.PANEL_ACTIVE:
-                          this._onGridEvent.fire({
-                              kind: exports.GroupChangeKind.PANEL_ACTIVE,
-                              panel: event.panel,
-                          });
                           this._onDidActivePanelChange.fire(event.panel);
                           break;
                   }
@@ -4839,7 +4821,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           return view;
       }
-      _addPanel(options) {
+      createPanel(options) {
           const view = new DefaultGroupPanelView({
               content: this.createContentComponent(options.id, options.component),
               tab: this.createTabComponent(options.id, options.tabComponent),
@@ -4940,7 +4922,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.gridview.setViewVisible(getGridLocation(panel.element), visible);
       }
       setActive(panel) {
-          this._groups.forEach((value, key) => {
+          this._groups.forEach((value, _key) => {
               value.value.setActive(panel === value.value);
           });
       }
@@ -4951,10 +4933,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           var _a;
           (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
       }
-      fromJSON(serializedGridview, deferComponentLayout) {
+      fromJSON(serializedGridview) {
           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();
-          this._groups.clear();
           const queue = [];
           this.gridview.deserialize(grid, {
               fromJSON: (node) => {
@@ -4981,21 +4967,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               },
           });
           this.layout(this.width, this.height, true);
-          if (deferComponentLayout) {
-              setTimeout(() => {
-                  queue.forEach((f) => f());
-              }, 0);
-          }
-          else {
-              queue.forEach((f) => f());
-          }
+          queue.forEach((f) => f());
           if (typeof activePanel === 'string') {
               const panel = this.getPanel(activePanel);
               if (panel) {
                   this.doSetGroupActive(panel);
               }
           }
-          this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT_FROM_JSON });
           this._onDidLayoutfromJSON.fire();
       }
       movePanel(panel, options) {
@@ -5052,7 +5030,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           });
           this.registerPanel(view);
           this.doAddGroup(view, relativeLocation, options.size);
-          return { api: view.api };
       }
       registerPanel(panel) {
           const disposable = new CompositeDisposable(panel.api.onDidFocusChange((event) => {
@@ -5103,11 +5080,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       removeGroup(group) {
           super.removeGroup(group);
-          const panel = this._groups.get(group.id);
-          if (panel) {
-              panel.disposable.dispose();
-              this._groups.delete(group.id);
-          }
       }
       dispose() {
           super.dispose();
@@ -5124,6 +5096,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.element = element;
           this._disposable = new MutableDisposable();
           this.panels = new Map();
+          this._onDidLayoutfromJSON = new Emitter();
+          this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
           this._onDidAddView = new Emitter();
           this.onDidAddView = this._onDidAddView.event;
           this._onDidRemoveView = new Emitter();
@@ -5138,7 +5112,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               options.frameworkComponents = {};
           }
           this.splitview = new Splitview(this.element, options);
-          this.addDisposables(this._disposable, this._onDidAddView, this._onDidRemoveView, this._onDidLayoutChange);
+          this.addDisposables(this._disposable, this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
       }
       get options() {
           return this._options;
@@ -5214,7 +5188,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       removePanel(panel, sizing) {
           const disposable = this.panels.get(panel.id);
-          disposable === null || disposable === void 0 ? void 0 : disposable.dispose();
+          if (!disposable) {
+              throw new Error(`unknown splitview panel ${panel.id}`);
+          }
+          disposable.disposable.dispose();
+          disposable.value.dispose();
           this.panels.delete(panel.id);
           const index = this.getPanels().findIndex((_) => _ === panel);
           this.splitview.removeView(index, sizing);
@@ -5273,7 +5251,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               }
               this.setActive(view, true);
           });
-          this.panels.set(view.id, disposable);
+          this.panels.set(view.id, { disposable, value: view });
       }
       toJSON() {
           var _a;
@@ -5295,8 +5273,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               orientation: this.splitview.orientation,
           };
       }
-      fromJSON(serializedSplitview, deferComponentLayout = false) {
+      fromJSON(serializedSplitview) {
           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, {
@@ -5336,26 +5319,22 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               },
           });
           this.layout(this.width, this.height);
-          if (deferComponentLayout) {
-              setTimeout(() => {
-                  queue.forEach((f) => f());
-              }, 0);
-          }
-          else {
-              queue.forEach((f) => f());
-          }
+          queue.forEach((f) => f());
           if (typeof activeView === 'string') {
               const panel = this.getPanel(activeView);
               if (panel) {
                   this.setActive(panel);
               }
           }
+          this._onDidLayoutfromJSON.fire();
       }
       dispose() {
-          Array.from(this.panels.values()).forEach((value) => {
-              value.dispose();
-          });
+          for (const [_, value] of this.panels.entries()) {
+              value.disposable.dispose();
+              value.value.dispose();
+          }
           this.panels.clear();
+          this.splitview.dispose();
           super.dispose();
       }
   }
@@ -5624,7 +5603,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           })(this.header);
           this.target = new Droptarget(this.element, {
               validOverlays: 'vertical',
-              canDisplayOverlay: (event) => {
+              canDisplayOverlay: () => {
                   const data = getPaneData();
                   if (!data) {
                       return true;
@@ -5695,7 +5674,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               this._expander.textContent = e.isExpanded ? '<' : '>';
           });
       }
-      update(params) {
+      update(_params) {
           //
       }
       dispose() {
@@ -5721,6 +5700,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           super();
           this.element = element;
           this._disposable = new MutableDisposable();
+          this._viewDisposables = new Map();
+          this._onDidLayoutfromJSON = new Emitter();
+          this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
           this._onDidLayoutChange = new Emitter();
           this.onDidLayoutChange = this._onDidLayoutChange.event;
           this._onDidDrop = new Emitter();
@@ -5729,7 +5711,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.onDidAddView = this._onDidAddView.event;
           this._onDidRemoveView = new Emitter();
           this.onDidRemoveView = this._onDidRemoveView.event;
-          this.addDisposables(this._onDidLayoutChange, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
+          this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
           this._options = options;
           if (!options.components) {
               options.components = {};
@@ -5805,9 +5787,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               isExpanded: !!options.isExpanded,
               disableDnd: !!this.options.disableDnd,
           });
-          const disposable = new CompositeDisposable(view.onDidDrop((event) => {
-              this._onDidDrop.fire(event);
-          }));
+          this.doAddPanel(view);
           const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
           const index = typeof options.index === 'number' ? options.index : undefined;
           view.init({
@@ -5820,7 +5800,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           });
           this.paneview.addPane(view, size, index);
           view.orientation = this.paneview.orientation;
-          return disposable;
+          return view;
       }
       getPanels() {
           return this.paneview.getPanes();
@@ -5829,6 +5809,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           const views = this.getPanels();
           const index = views.findIndex((_) => _ === panel);
           this.paneview.removePane(index);
+          this.doRemovePanel(panel);
       }
       movePanel(from, to) {
           this.paneview.moveView(from, to);
@@ -5875,9 +5856,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               size: this.paneview.size,
           };
       }
-      fromJSON(serializedPaneview, deferComponentLayout) {
+      fromJSON(serializedPaneview) {
           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,
@@ -5913,9 +5898,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                           isExpanded: !!view.expanded,
                           disableDnd: !!this.options.disableDnd,
                       });
-                      panel.onDidDrop((event) => {
-                          this._onDidDrop.fire(event);
-                      });
+                      this.doAddPanel(panel);
                       queue.push(() => {
                           panel.init({
                               params: data.params || {},
@@ -5936,14 +5919,29 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               },
           });
           this.layout(this.width, this.height);
-          if (deferComponentLayout) {
-              setTimeout(() => {
-                  queue.forEach((f) => f());
-              }, 0);
+          queue.forEach((f) => f());
+          this._onDidLayoutfromJSON.fire();
+      }
+      doAddPanel(panel) {
+          const disposable = panel.onDidDrop((event) => {
+              this._onDidDrop.fire(event);
+          });
+          this._viewDisposables.set(panel.id, disposable);
+      }
+      doRemovePanel(panel) {
+          const disposable = this._viewDisposables.get(panel.id);
+          if (disposable) {
+              disposable.dispose();
+              this._viewDisposables.delete(panel.id);
           }
-          else {
-              queue.forEach((f) => f());
+      }
+      dispose() {
+          super.dispose();
+          for (const [_, value] of this._viewDisposables.entries()) {
+              value.dispose();
           }
+          this._viewDisposables.clear();
+          this.paneview.dispose();
       }
   }
 
@@ -6171,18 +6169,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.id = id;
           this.component = component;
           this.reactPortalStore = reactPortalStore;
-          // private hostedContainer: HostedContainer;
           this._onDidFocus = new Emitter();
           this.onDidFocus = this._onDidFocus.event;
           this._onDidBlur = new Emitter();
           this.onDidBlur = this._onDidBlur.event;
           this._element = document.createElement('div');
           this._element.className = 'dockview-react-part';
-          // this.hostedContainer = new HostedContainer({
-          //     id,
-          // });
-          // this.hostedContainer.onDidFocus(() => this._onDidFocus.fire());
-          // this.hostedContainer.onDidBlur(() => this._onDidBlur.fire());
           this._actionsElement = document.createElement('div');
           this._actionsElement.className = 'dockview-react-part';
       }
@@ -6217,15 +6209,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           var _a;
           (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
       }
-      updateParentGroup(group, isPanelVisible) {
+      updateParentGroup(group, _isPanelVisible) {
           this._group = group;
       }
-      layout(width, height) {
+      layout(_width, _height) {
           // noop
-          // this.hostedContainer.layout(
-          //     this.element
-          //     // { width, height }
-          // );
       }
       close() {
           return Promise.resolve(true);
@@ -6235,7 +6223,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._onDidFocus.dispose();
           this._onDidBlur.dispose();
           (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-          // this.hostedContainer?.dispose();
           (_b = this.actionsPart) === null || _b === void 0 ? void 0 : _b.dispose();
       }
   }
@@ -6270,10 +6257,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               id: this.id,
           };
       }
-      layout(width, height) {
+      layout(_width, _height) {
           // noop - retrieval from api
       }
-      updateParentGroup(group, isPanelVisible) {
+      updateParentGroup(_group, _isPanelVisible) {
           // noop - retrieval from api
       }
       dispose() {
@@ -6352,10 +6339,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               id: this.id,
           };
       }
-      layout(width, height) {
+      layout(_width, _height) {
           // noop - retrieval from api
       }
-      updateParentGroup(group, isPanelVisible) {
+      updateParentGroup(group, _isPanelVisible) {
           // noop - retrieval from api
           this._groupRef.value = group;
       }
@@ -6389,21 +6376,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           var _a;
           const factory = {
               content: {
-                  createComponent: (id, componentId, component) => {
+                  createComponent: (_id, componentId, component) => {
                       return new ReactPanelContentPart(componentId, component, {
                           addPortal,
                       });
                   },
               },
               tab: {
-                  createComponent: (id, componentId, component) => {
+                  createComponent: (_id, componentId, component) => {
                       return new ReactPanelHeaderPart(componentId, component, {
                           addPortal,
                       });
                   },
               },
               watermark: {
-                  createComponent: (id, componentId, component) => {
+                  createComponent: (_id, componentId, component) => {
                       return new ReactWatermarkPart(componentId, component, {
                           addPortal,
                       });
@@ -6422,11 +6409,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   ? { separatorBorder: 'transparent' }
                   : undefined,
           });
-          const disposable = dockview.onDidDrop((event) => {
-              if (props.onDidDrop) {
-                  props.onDidDrop(event);
-              }
-          });
           (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
           dockview.deserializer = new ReactPanelDeserialzier(dockview);
           const { clientWidth, clientHeight } = domRef.current;
@@ -6436,10 +6418,25 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           dockviewRef.current = dockview;
           return () => {
-              disposable.dispose();
               dockview.dispose();
+              element.remove();
           };
       }, []);
+      React__namespace.useEffect(() => {
+          if (!dockviewRef.current) {
+              return () => {
+                  // noop
+              };
+          }
+          const disposable = dockviewRef.current.onDidDrop((event) => {
+              if (props.onDidDrop) {
+                  props.onDidDrop(event);
+              }
+          });
+          return () => {
+              disposable.dispose();
+          };
+      }, [props.onDidDrop]);
       React__namespace.useEffect(() => {
           if (!dockviewRef.current) {
               return;
@@ -6448,6 +6445,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               frameworkComponents: props.components,
           });
       }, [props.components]);
+      React__namespace.useEffect(() => {
+          if (!dockviewRef.current) {
+              return;
+          }
+          dockviewRef.current.updateOptions({
+              watermarkFrameworkComponent: props.watermarkComponent,
+          });
+      }, [props.watermarkComponent]);
       React__namespace.useEffect(() => {
           if (!dockviewRef.current) {
               return;
@@ -6583,7 +6588,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       });
                   },
               },
-              proportionalLayout: props.proportionalLayout,
+              proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                  ? props.proportionalLayout
+                  : true,
               styles: props.hideBorders
                   ? { separatorBorder: 'transparent' }
                   : undefined,
@@ -6651,7 +6658,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           var _a;
           const element = document.createElement('div');
           const gridview = new GridviewComponent(element, {
-              proportionalLayout: !!props.proportionalLayout,
+              proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                  ? props.proportionalLayout
+                  : true,
               orientation: props.orientation,
               frameworkComponents: props.components,
               frameworkComponentFactory: {
@@ -6674,6 +6683,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           gridviewRef.current = gridview;
           return () => {
               gridview.dispose();
+              element.remove();
           };
       }, []);
       React__namespace.useEffect(() => {
@@ -6744,7 +6754,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           };
       }, [props.disableAutoResizing]);
       React__namespace.useEffect(() => {
-          const createComponent = (id, componentId, component) => new PanePanelSection(id, component, {
+          const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
               addPortal,
           });
           const paneview = new PaneviewComponent(domRef.current, {
@@ -6810,13 +6820,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   PaneviewReact.displayName = 'PaneviewComponent';
 
   exports.BaseGrid = BaseGrid;
-  exports.CompositeDisposable = CompositeDisposable;
   exports.ContentContainer = ContentContainer;
   exports.DockviewApi = DockviewApi;
   exports.DockviewComponent = DockviewComponent;
   exports.DockviewComponents = DockviewComponents;
   exports.DockviewReact = DockviewReact;
-  exports.Emitter = Emitter;
   exports.Gridview = Gridview;
   exports.GridviewApi = GridviewApi;
   exports.GridviewComponent = GridviewComponent;
@@ -6824,7 +6832,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   exports.GridviewReact = GridviewReact;
   exports.Groupview = Groupview;
   exports.LocalSelectionTransfer = LocalSelectionTransfer;
-  exports.MutableDisposable = MutableDisposable;
   exports.PaneFramework = PaneFramework;
   exports.PaneTransfer = PaneTransfer;
   exports.PanelTransfer = PanelTransfer;
@@ -6843,9 +6850,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   exports.SplitviewPanel = SplitviewPanel;
   exports.SplitviewReact = SplitviewReact;
   exports.Tab = Tab$1;
-  exports.TickDelayedEvent = TickDelayedEvent;
-  exports.addDisposableListener = addDisposableListener;
-  exports.addDisposableWindowListener = addDisposableWindowListener;
   exports.getDirectionOrientation = getDirectionOrientation;
   exports.getGridLocation = getGridLocation;
   exports.getLocationOrientation = getLocationOrientation;