dockview-core 1.9.2 → 1.10.0

package/dist/dockview-core.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 1.9.2
+ * @version 1.10.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -33,7 +33,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".dv-render-overlay {\n  position: absolute;\n  z-index: 1;\n  height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n  z-index: 999;\n}\n\n.dv-debug .dv-render-overlay {\n  outline: 1px solid red;\n  outline-offset: -1;\n}\n.dockview-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\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-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\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-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n  --dv-tabs-and-actions-container-background-color: #2d2d30;\n  --dv-tabs-and-actions-container-height: 20px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n  --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: white;\n  --dv-inactivegroup-visiblepanel-tab-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #000c18;\n  --dv-tabs-and-actions-container-background-color: #1c1c2a;\n  --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-tab-divider-color: #2b2b4a;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n  --dv-separator-border: #2b2b4a;\n  --dv-paneview-header-border-color: #2b2b4a;\n  --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #282a36;\n  --dv-tabs-and-actions-container-background-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-tab-divider-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n  --dv-separator-border: #bd93f9;\n  --dv-paneview-header-border-color: #bd93f9;\n  --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #94527e;\n  z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  bottom: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #5e3d5a;\n  z-index: 999;\n}\n\n.dockview-theme-replit {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #ebeced;\n  --dv-tabs-and-actions-container-background-color: #fcfcfc;\n  --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-activegroup-hiddenpanel-tab-background-color: ##fcfcfc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n  --dv-tab-divider-color: transparent;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-separator-border: transparent;\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n  --dv-background-color: #ebeced;\n  --dv-separator-handle-background-color: #cfd1d3;\n  --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit.dv-dockview {\n  padding: 3px;\n}\n.dockview-theme-replit .view:has(> .groupview) {\n  padding: 3px;\n}\n.dockview-theme-replit .dv-resize-container:has(> .groupview) {\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview {\n  overflow: hidden;\n  border-radius: 10px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container {\n  border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab {\n  margin: 4px;\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab .dockview-svg {\n  height: 8px;\n  width: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab:hover {\n  background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .groupview .content-container {\n  background-color: #fcfcfc;\n}\n.dockview-theme-replit .groupview.active-group {\n  border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview.inactive-group {\n  border: 1px solid transparent;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash::after {\n  content: \"\";\n  height: 4px;\n  width: 40px;\n  border-radius: 2px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--dv-separator-handle-background-color);\n  position: absolute;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash::after {\n  content: \"\";\n  height: 40px;\n  width: 4px;\n  border-radius: 2px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--dv-separator-handle-background-color);\n  position: absolute;\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash:hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.drop-target {\n  position: relative;\n}\n.drop-target > .drop-target-dropzone {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1000;\n  pointer-events: none;\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.dv-drop-target-top.dv-drop-target-small-vertical {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n  background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n  background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n  background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n  background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n  background-color: cyan;\n}\n\n.dv-resize-container {\n  position: absolute;\n  z-index: 997;\n  border: 1px solid var(--dv-tab-divider-color);\n  box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-bring-to-front {\n  z-index: 998;\n}\n.dv-resize-container.dv-resize-container-dragging {\n  opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n  height: calc(100% - 8px);\n  width: 4px;\n  left: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n  height: calc(100% - 8px);\n  width: 4px;\n  right: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n  height: 4px;\n  width: 4px;\n  top: -2px;\n  left: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n  height: 4px;\n  width: 4px;\n  left: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: se-resize;\n}\n.dv-dockview {\n  position: relative;\n  background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n  position: relative;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dv-tab-dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.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  min-height: 0;\n  outline: none;\n}\n.grid-view,\n.branch-node {\n  height: 100%;\n  width: 100%;\n}\n.pane-container {\n  height: 100%;\n  width: 100%;\n}\n.pane-container.animated .view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.pane-container .view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n  background-color: var(--dv-group-view-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n  display: flex;\n  padding: 0px 8px;\n  cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pane-container .view .default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n  border-top: none !important;\n}\n.pane-container .pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.pane-container .pane .pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n  cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .split-view-container .sash-container .sash.enabled {\n  background-color: black;\n}\n.dv-debug .split-view-container .sash-container .sash.disabled {\n  background-color: orange;\n}\n.dv-debug .split-view-container .sash-container .sash.maximum {\n  background-color: green;\n}\n.dv-debug .split-view-container .sash-container .sash.minimum {\n  background-color: red;\n}\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  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  touch-action: none;\n}\n.split-view-container .sash-container .sash:not(.disabled):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:not(.disabled):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  background-color: var(--dv-background-color);\n}\n.split-view-container .view-container .view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n  transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n  flex-shrink: 0;\n}\n.tab:focus-within, .tab:focus {\n  position: relative;\n}\n.tab:focus-within::after, .tab:focus::after {\n  position: absolute;\n  content: \"\";\n  height: 100%;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  pointer-events: none;\n  outline: 1px solid var(--dv-tab-divider-color) !important;\n  outline-offset: -1px;\n  z-index: 5;\n}\n.tab.dv-tab-dragging .tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab > .default-tab .tab-action {\n  visibility: visible;\n}\n.tab.inactive-tab > .default-tab .tab-action {\n  visibility: hidden;\n}\n.tab.inactive-tab > .default-tab:hover .tab-action {\n  visibility: visible;\n}\n.tab .default-tab {\n  position: relative;\n  height: 100%;\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  padding: 0px 8px;\n  white-space: nowrap;\n  text-overflow: elipsis;\n}\n.tab .default-tab .tab-content {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .default-tab .action-container {\n  text-align: right;\n  display: flex;\n}\n.tab .default-tab .action-container .tab-list {\n  display: flex;\n  padding: 0px;\n  margin: 0px;\n  justify-content: flex-end;\n}\n.tab .default-tab .action-container .tab-list .tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .default-tab .action-container .tab-list .tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tabs-and-actions-container {\n  display: flex;\n  background-color: var(--dv-tabs-and-actions-container-background-color);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  height: var(--dv-tabs-and-actions-container-height);\n  font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.tabs-and-actions-container.hidden {\n  display: none;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container {\n  flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container .tab {\n  flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .void-container {\n  flex-grow: 0;\n}\n.tabs-and-actions-container .void-container {\n  display: flex;\n  flex-grow: 1;\n  cursor: grab;\n}\n.tabs-and-actions-container .tabs-container {\n  display: flex;\n  overflow-x: overlay;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  /* Track */\n  /* Handle */\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar {\n  height: 3px;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {\n  background: var(--dv-tabs-container-scrollbar-color);\n}\n.tabs-and-actions-container .tabs-container .tab {\n  -webkit-user-drag: element;\n  outline: none;\n  min-width: 75px;\n  cursor: pointer;\n  position: relative;\n  box-sizing: border-box;\n}\n.tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-tab-divider-color);\n  width: 1px;\n  height: 100%;\n}\n.watermark {\n  display: flex;\n  width: 100%;\n}\n.watermark.has-actions .watermark-title .actions-container {\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}\n.watermark .actions-container {\n  display: flex;\n  align-items: center;\n  padding: 0px 8px;\n}\n.watermark .actions-container .close-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.watermark .actions-container .close-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}";
+var css_248z = ".dv-render-overlay {\n  position: absolute;\n  z-index: 1;\n  height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n  z-index: 999;\n}\n\n.dv-debug .dv-render-overlay {\n  outline: 1px solid red;\n  outline-offset: -1;\n}\n.dockview-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\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-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\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-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n  --dv-tabs-and-actions-container-background-color: #2d2d30;\n  --dv-tabs-and-actions-container-height: 20px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n  --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: white;\n  --dv-inactivegroup-visiblepanel-tab-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #000c18;\n  --dv-tabs-and-actions-container-background-color: #1c1c2a;\n  --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-tab-divider-color: #2b2b4a;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n  --dv-separator-border: #2b2b4a;\n  --dv-paneview-header-border-color: #2b2b4a;\n  --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #282a36;\n  --dv-tabs-and-actions-container-background-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-tab-divider-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n  --dv-separator-border: #bd93f9;\n  --dv-paneview-header-border-color: #bd93f9;\n  --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #94527e;\n  z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  bottom: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #5e3d5a;\n  z-index: 999;\n}\n\n.dockview-theme-replit {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-gap-size: 3px;\n  --dv-group-view-background-color: #ebeced;\n  --dv-tabs-and-actions-container-background-color: #fcfcfc;\n  --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-activegroup-hiddenpanel-tab-background-color: ##fcfcfc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n  --dv-tab-divider-color: transparent;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-separator-border: transparent;\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n  --dv-background-color: #ebeced;\n  --dv-separator-handle-background-color: #cfd1d3;\n  --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-resize-container:has(> .groupview) {\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview {\n  overflow: hidden;\n  border-radius: 10px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container {\n  border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab {\n  margin: 4px;\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab .dockview-svg {\n  height: 8px;\n  width: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab:hover {\n  background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .groupview .content-container {\n  background-color: #fcfcfc;\n}\n.dockview-theme-replit .groupview.active-group {\n  border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview.inactive-group {\n  border: 1px solid transparent;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash::after {\n  content: \"\";\n  height: 4px;\n  width: 40px;\n  border-radius: 2px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--dv-separator-handle-background-color);\n  position: absolute;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash::after {\n  content: \"\";\n  height: 40px;\n  width: 4px;\n  border-radius: 2px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--dv-separator-handle-background-color);\n  position: absolute;\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash:hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.drop-target {\n  position: relative;\n}\n.drop-target > .drop-target-dropzone {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1000;\n  pointer-events: none;\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.dv-drop-target-top.dv-drop-target-small-vertical {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n  background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n  background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n  background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n  background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n  background-color: cyan;\n}\n\n.dv-resize-container {\n  position: absolute;\n  z-index: 997;\n  border: 1px solid var(--dv-tab-divider-color);\n  box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-bring-to-front {\n  z-index: 998;\n}\n.dv-resize-container.dv-resize-container-dragging {\n  opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n  height: calc(100% - 8px);\n  width: 4px;\n  left: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n  height: calc(100% - 8px);\n  width: 4px;\n  right: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n  height: 4px;\n  width: 4px;\n  top: -2px;\n  left: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n  height: 4px;\n  width: 4px;\n  left: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: se-resize;\n}\n.dv-dockview {\n  position: relative;\n  background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n  position: relative;\n}\n.dv-dockview .split-view-container.horizontal > .view-container > .view:not(:last-child) {\n  border-right: var(--dv-group-gap-size) solid transparent;\n}\n.dv-dockview .split-view-container.horizontal > .view-container > .view:not(:first-child) {\n  border-left: var(--dv-group-gap-size) solid transparent;\n}\n.dv-dockview .split-view-container.vertical > .view-container > .view:not(:last-child) {\n  border-bottom: var(--dv-group-gap-size) solid transparent;\n}\n.dv-dockview .split-view-container.vertical > .view-container > .view:not(:first-child) {\n  border-top: var(--dv-group-gap-size) solid transparent;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dv-tab-dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.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  min-height: 0;\n  outline: none;\n}\n.dv-root-wrapper {\n  height: 100%;\n  width: 100%;\n}\n.grid-view,\n.branch-node {\n  height: 100%;\n  width: 100%;\n}\n.pane-container {\n  height: 100%;\n  width: 100%;\n}\n.pane-container.animated .view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.pane-container .view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n  background-color: var(--dv-group-view-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n  display: flex;\n  padding: 0px 8px;\n  cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pane-container .view .default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n  border-top: none !important;\n}\n.pane-container .pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.pane-container .pane .pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n  cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .split-view-container .sash-container .sash.enabled {\n  background-color: black;\n}\n.dv-debug .split-view-container .sash-container .sash.disabled {\n  background-color: orange;\n}\n.dv-debug .split-view-container .sash-container .sash.maximum {\n  background-color: green;\n}\n.dv-debug .split-view-container .sash-container .sash.minimum {\n  background-color: red;\n}\n\n.split-view-container {\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container.dv-splitview-disabled > .sash-container > .sash {\n  pointer-events: none;\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  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  touch-action: none;\n}\n.split-view-container .sash-container .sash:not(.disabled):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:not(.disabled):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  background-color: var(--dv-background-color);\n}\n.split-view-container .view-container .view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n  transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n  flex-shrink: 0;\n}\n.tab:focus-within, .tab:focus {\n  position: relative;\n}\n.tab:focus-within::after, .tab:focus::after {\n  position: absolute;\n  content: \"\";\n  height: 100%;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  pointer-events: none;\n  outline: 1px solid var(--dv-tab-divider-color) !important;\n  outline-offset: -1px;\n  z-index: 5;\n}\n.tab.dv-tab-dragging .tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab > .default-tab .tab-action {\n  visibility: visible;\n}\n.tab.inactive-tab > .default-tab .tab-action {\n  visibility: hidden;\n}\n.tab.inactive-tab > .default-tab:hover .tab-action {\n  visibility: visible;\n}\n.tab .default-tab {\n  position: relative;\n  height: 100%;\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  padding: 0px 8px;\n  white-space: nowrap;\n  text-overflow: elipsis;\n}\n.tab .default-tab .tab-content {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .default-tab .action-container {\n  text-align: right;\n  display: flex;\n}\n.tab .default-tab .action-container .tab-list {\n  display: flex;\n  padding: 0px;\n  margin: 0px;\n  justify-content: flex-end;\n}\n.tab .default-tab .action-container .tab-list .tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .default-tab .action-container .tab-list .tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tabs-and-actions-container {\n  display: flex;\n  background-color: var(--dv-tabs-and-actions-container-background-color);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  height: var(--dv-tabs-and-actions-container-height);\n  font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.tabs-and-actions-container.hidden {\n  display: none;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container {\n  flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container .tab {\n  flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .void-container {\n  flex-grow: 0;\n}\n.tabs-and-actions-container .void-container {\n  display: flex;\n  flex-grow: 1;\n  cursor: grab;\n}\n.tabs-and-actions-container .tabs-container {\n  display: flex;\n  overflow-x: overlay;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  /* Track */\n  /* Handle */\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar {\n  height: 3px;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {\n  background: var(--dv-tabs-container-scrollbar-color);\n}\n.tabs-and-actions-container .tabs-container .tab {\n  -webkit-user-drag: element;\n  outline: none;\n  min-width: 75px;\n  cursor: pointer;\n  position: relative;\n  box-sizing: border-box;\n}\n.tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-tab-divider-color);\n  width: 1px;\n  height: 100%;\n}\n.watermark {\n  display: flex;\n  width: 100%;\n}\n.watermark.has-actions .watermark-title .actions-container {\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}\n.watermark .actions-container {\n  display: flex;\n  align-items: center;\n  padding: 0px 8px;\n}\n.watermark .actions-container .close-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.watermark .actions-container .close-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}";
 styleInject(css_248z);
 
 class TransferObject {
@@ -118,6 +118,17 @@ exports.DockviewEvent = void 0;
         };
     };
 })(exports.DockviewEvent || (exports.DockviewEvent = {}));
+class DockviewEvent {
+    constructor() {
+        this._defaultPrevented = false;
+    }
+    get defaultPrevented() {
+        return this._defaultPrevented;
+    }
+    preventDefault() {
+        this._defaultPrevented = true;
+    }
+}
 class LeakageMonitor {
     constructor() {
         this.events = new Map();
@@ -161,6 +172,9 @@ class Emitter {
         }
         Emitter.ENABLE_TRACKING = isEnabled;
     }
+    get value() {
+        return this._last;
+    }
     constructor(options) {
         this.options = options;
         this._listeners = [];
@@ -283,8 +297,12 @@ class CompositeDisposable {
         args.forEach((arg) => this._disposables.push(arg));
     }
     dispose() {
-        this._disposables.forEach((arg) => arg.dispose());
+        if (this._isDisposed) {
+            return;
+        }
         this._isDisposed = true;
+        this._disposables.forEach((arg) => arg.dispose());
+        this._disposables = [];
     }
 }
 class MutableDisposable {
@@ -768,6 +786,13 @@ class Splitview {
         this._endSnappingEnabled = endSnappingEnabled;
         this.updateSashEnablement();
     }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        toggleClass(this.element, 'dv-splitview-disabled', value);
+    }
     constructor(container, options) {
         this.container = container;
         this.viewItems = [];
@@ -778,6 +803,7 @@ class Splitview {
         this._proportions = undefined;
         this._startSnappingEnabled = true;
         this._endSnappingEnabled = true;
+        this._disabled = false;
         this._onDidSashEnd = new Emitter();
         this.onDidSashEnd = this._onDidSashEnd.event;
         this._onDidAddView = new Emitter();
@@ -1705,7 +1731,13 @@ class BranchNode extends CompositeDisposable {
         }
         return exports.LayoutPriority.Normal;
     }
-    constructor(orientation, proportionalLayout, styles, size, orthogonalSize, childDescriptors) {
+    get disabled() {
+        return this.splitview.disabled;
+    }
+    set disabled(value) {
+        this.splitview.disabled = value;
+    }
+    constructor(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, childDescriptors) {
         super();
         this.orientation = orientation;
         this.proportionalLayout = proportionalLayout;
@@ -1750,6 +1782,7 @@ class BranchNode extends CompositeDisposable {
                 styles,
             });
         }
+        this.disabled = disabled;
         this.addDisposables(this._onDidChange, this._onDidVisibilityChange, this.splitview.onDidSashEnd(() => {
             this._onDidChange.fire({});
         }));
@@ -1883,7 +1916,7 @@ function findLeaf(candiateNode, last) {
 }
 function flipNode(node, size, orthogonalSize) {
     if (node instanceof BranchNode) {
-        const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize);
+        const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled);
         let totalSize = 0;
         for (let i = node.children.length - 1; i >= 0; i--) {
             const child = node.children[i];
@@ -2019,31 +2052,57 @@ class Gridview {
     get maximumHeight() {
         return this.root.maximumHeight;
     }
+    get locked() {
+        return this._locked;
+    }
+    set locked(value) {
+        this._locked = value;
+        const branch = [this.root];
+        /**
+         * simple depth-first-search to cover all nodes
+         *
+         * @see https://en.wikipedia.org/wiki/Depth-first_search
+         */
+        while (branch.length > 0) {
+            const node = branch.pop();
+            if (node instanceof BranchNode) {
+                node.disabled = value;
+                branch.push(...node.children);
+            }
+        }
+    }
     maximizedView() {
         var _a;
-        return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.view;
+        return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.leaf.view;
     }
     hasMaximizedView() {
         return this._maximizedNode !== undefined;
     }
     maximizeView(view) {
+        var _a;
         const location = getGridLocation(view.element);
         const [_, node] = this.getNode(location);
         if (!(node instanceof LeafNode)) {
             return;
         }
-        if (this._maximizedNode === node) {
+        if (((_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.leaf) === node) {
             return;
         }
         if (this.hasMaximizedView()) {
             this.exitMaximizedView();
         }
+        const hiddenOnMaximize = [];
         function hideAllViewsBut(parent, exclude) {
             for (let i = 0; i < parent.children.length; i++) {
                 const child = parent.children[i];
                 if (child instanceof LeafNode) {
                     if (child !== exclude) {
-                        parent.setChildVisible(i, false);
+                        if (parent.isChildVisible(i)) {
+                            parent.setChildVisible(i, false);
+                        }
+                        else {
+                            hiddenOnMaximize.push(child);
+                        }
                     }
                 }
                 else {
@@ -2052,18 +2111,21 @@ class Gridview {
             }
         }
         hideAllViewsBut(this.root, node);
-        this._maximizedNode = node;
-        this._onDidMaxmizedNodeChange.fire();
+        this._maximizedNode = { leaf: node, hiddenOnMaximize };
+        this._onDidMaximizedNodeChange.fire();
     }
     exitMaximizedView() {
         if (!this._maximizedNode) {
             return;
         }
+        const hiddenOnMaximize = this._maximizedNode.hiddenOnMaximize;
         function showViewsInReverseOrder(parent) {
             for (let index = parent.children.length - 1; index >= 0; index--) {
                 const child = parent.children[index];
                 if (child instanceof LeafNode) {
-                    parent.setChildVisible(index, true);
+                    if (!hiddenOnMaximize.includes(child)) {
+                        parent.setChildVisible(index, true);
+                    }
                 }
                 else {
                     showViewsInReverseOrder(child);
@@ -2072,13 +2134,13 @@ class Gridview {
         }
         showViewsInReverseOrder(this.root);
         this._maximizedNode = undefined;
-        this._onDidMaxmizedNodeChange.fire();
+        this._onDidMaximizedNodeChange.fire();
     }
     serialize() {
         if (this.hasMaximizedView()) {
             /**
-             * do not persist maximized view state but we must first exit any maximized views
-             * before serialization to ensure the correct dimensions are persisted
+             * do not persist maximized view state
+             * firstly exit any maximized views to ensure the correct dimensions are persisted
              */
             this.exitMaximizedView();
         }
@@ -2093,14 +2155,14 @@ class Gridview {
     dispose() {
         this.disposable.dispose();
         this._onDidChange.dispose();
-        this._onDidMaxmizedNodeChange.dispose();
+        this._onDidMaximizedNodeChange.dispose();
         this.root.dispose();
         this._maximizedNode = undefined;
         this.element.remove();
     }
     clear() {
         const orientation = this.root.orientation;
-        this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize);
+        this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this._locked);
     }
     deserialize(json, deserializer) {
         const orientation = json.orientation;
@@ -2121,8 +2183,8 @@ class Gridview {
                 };
             });
             result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, // <- orthogonal size - flips at each depth
-            orthogonalSize, // <- size - flips at each depth
-            children);
+            orthogonalSize, // <- size - flips at each depth,
+            this._locked, children);
         }
         else {
             result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
@@ -2155,7 +2217,7 @@ class Gridview {
         }
         const oldRoot = this.root;
         oldRoot.element.remove();
-        this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size);
+        this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size, this._locked);
         if (oldRoot.children.length === 0) ;
         else if (oldRoot.children.length === 1) {
             // can remove one level of redundant branching if there is only a single child
@@ -2223,15 +2285,16 @@ class Gridview {
     constructor(proportionalLayout, styles, orientation) {
         this.proportionalLayout = proportionalLayout;
         this.styles = styles;
+        this._locked = false;
         this._maximizedNode = undefined;
         this.disposable = new MutableDisposable();
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
-        this._onDidMaxmizedNodeChange = new Emitter();
-        this.onDidMaxmizedNodeChange = this._onDidMaxmizedNodeChange.event;
+        this._onDidMaximizedNodeChange = new Emitter();
+        this.onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event;
         this.element = document.createElement('div');
         this.element.className = 'grid-view';
-        this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0);
+        this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this._locked);
     }
     isViewVisible(location) {
         const [rest, index] = tail(location);
@@ -2282,7 +2345,7 @@ class Gridview {
             }
             const child = grandParent.removeChild(parentIndex);
             child.dispose();
-            const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize);
+            const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this._locked);
             grandParent.addChild(newParent, parent.size, parentIndex);
             const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size);
             newParent.addChild(newSibling, newSiblingSize, 0);
@@ -2909,6 +2972,21 @@ class DockviewApi {
     get onDidDrop() {
         return this.component.onDidDrop;
     }
+    /**
+     * Invoked when a Drag'n'Drop event occurs but before dockview handles it giving the user an opportunity to intecept and
+     * prevent the event from occuring using the standard `preventDefault()` syntax.
+     *
+     * Preventing certain events may causes unexpected behaviours, use carefully.
+     */
+    get onWillDrop() {
+        return this.component.onWillDrop;
+    }
+    /**
+     *
+     */
+    get onWillShowOverlay() {
+        return this.component.onWillShowOverlay;
+    }
     /**
      * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
      */
@@ -3044,17 +3122,17 @@ class DockviewApi {
     hasMaximizedGroup() {
         return this.component.hasMaximizedGroup();
     }
-    exitMaxmizedGroup() {
+    exitMaximizedGroup() {
         this.component.exitMaximizedGroup();
     }
-    get onDidMaxmizedGroupChange() {
-        return this.component.onDidMaxmizedGroupChange;
+    get onDidMaximizedGroupChange() {
+        return this.component.onDidMaximizedGroupChange;
     }
     /**
      * Add a popout group in a new Window
      */
     addPopoutGroup(item, options) {
-        this.component.addPopoutGroup(item, options);
+        return this.component.addPopoutGroup(item, options);
     }
 }
 
@@ -3108,6 +3186,18 @@ class DragAndDropObserver extends CompositeDisposable {
     }
 }
 
+class WillShowOverlayEvent extends DockviewEvent {
+    get nativeEvent() {
+        return this.options.nativeEvent;
+    }
+    get position() {
+        return this.options.position;
+    }
+    constructor(options) {
+        super();
+        this.options = options;
+    }
+}
 function directionToPosition(direction) {
     switch (direction) {
         case 'above':
@@ -3160,6 +3250,8 @@ class Droptarget extends CompositeDisposable {
         this.options = options;
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
+        this._onWillShowOverlay = new Emitter();
+        this.onWillShowOverlay = this._onWillShowOverlay.event;
         // use a set to take advantage of #<set>.has
         this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
         this.dnd = new DragAndDropObserver(this.element, {
@@ -3188,6 +3280,19 @@ class Droptarget extends CompositeDisposable {
                     this.removeDropTarget();
                     return;
                 }
+                const willShowOverlayEvent = new WillShowOverlayEvent({
+                    nativeEvent: e,
+                    position: quadrant,
+                });
+                /**
+                 * Provide an opportunity to prevent the overlay appearing and in turn
+                 * any dnd behaviours
+                 */
+                this._onWillShowOverlay.fire(willShowOverlayEvent);
+                if (willShowOverlayEvent.defaultPrevented) {
+                    this.removeDropTarget();
+                    return;
+                }
                 if (typeof this.options.canDisplayOverlay === 'boolean') {
                     if (!this.options.canDisplayOverlay) {
                         this.removeDropTarget();
@@ -3230,7 +3335,7 @@ class Droptarget extends CompositeDisposable {
                 }
             },
         });
-        this.addDisposables(this._onDrop, this.dnd);
+        this.addDisposables(this._onDrop, this._onWillShowOverlay, this.dnd);
     }
     setTargetZones(acceptedTargetZones) {
         this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
@@ -3283,25 +3388,44 @@ class Droptarget extends CompositeDisposable {
                 size = clamp(0, sizeOptions.value, height) / height;
             }
         }
-        const translate = (1 - size) / 2;
-        const scale = size;
-        let transform;
+        const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
+        /**
+         * You can also achieve the overlay placement using the transform CSS property
+         * to translate and scale the element however this has the undesired effect of
+         * 'skewing' the element. Comment left here for anybody that ever revisits this.
+         *
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform
+         *
+         * right
+         * translateX(${100 * (1 - size) / 2}%) scaleX(${scale})
+         *
+         * left
+         * translateX(-${100 * (1 - size) / 2}%) scaleX(${scale})
+         *
+         * top
+         * translateY(-${100 * (1 - size) / 2}%) scaleY(${scale})
+         *
+         * bottom
+         * translateY(${100 * (1 - size) / 2}%) scaleY(${scale})
+         */
         if (rightClass) {
-            transform = `translateX(${100 * translate}%) scaleX(${scale})`;
+            box.left = `${100 * (1 - size)}%`;
+            box.width = `${100 * size}%`;
         }
         else if (leftClass) {
-            transform = `translateX(-${100 * translate}%) scaleX(${scale})`;
+            box.width = `${100 * size}%`;
         }
         else if (topClass) {
-            transform = `translateY(-${100 * translate}%) scaleY(${scale})`;
+            box.height = `${100 * size}%`;
         }
         else if (bottomClass) {
-            transform = `translateY(${100 * translate}%) scaleY(${scale})`;
-        }
-        else {
-            transform = '';
+            box.top = `${100 * (1 - size)}%`;
+            box.height = `${100 * size}%`;
         }
-        this.overlayElement.style.transform = transform;
+        this.overlayElement.style.top = box.top;
+        this.overlayElement.style.left = box.left;
+        this.overlayElement.style.width = box.width;
+        this.overlayElement.style.height = box.height;
         toggleClass(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
         toggleClass(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
         toggleClass(this.overlayElement, 'dv-drop-target-left', isLeft);
@@ -3369,14 +3493,6 @@ function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold)
     return 'center';
 }
 
-exports.DockviewDropTargets = void 0;
-(function (DockviewDropTargets) {
-    DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab";
-    DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel";
-    DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
-    DockviewDropTargets[DockviewDropTargets["Edge"] = 3] = "Edge";
-})(exports.DockviewDropTargets || (exports.DockviewDropTargets = {}));
-
 class ContentContainer extends CompositeDisposable {
     get element() {
         return this._element;
@@ -3404,7 +3520,7 @@ class ContentContainer extends CompositeDisposable {
                 const data = getPanelData();
                 if (!data &&
                     event.shiftKey &&
-                    this.group.location !== 'floating') {
+                    this.group.location.type !== 'floating') {
                     return false;
                 }
                 if (data && data.viewId === this.accessor.id) {
@@ -3422,7 +3538,7 @@ class ContentContainer extends CompositeDisposable {
                         data.groupId === this.group.id;
                     return !groupHasOnePanelAndIsActiveDragElement;
                 }
-                return this.group.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
+                return this.group.canDisplayOverlay(event, position, 'panel');
             },
         });
         this.addDisposables(this.dropTarget);
@@ -3447,7 +3563,7 @@ class ContentContainer extends CompositeDisposable {
         let container;
         switch (panel.api.renderer) {
             case 'onlyWhenVisibile':
-                this.accessor.overlayRenderContainer.detatch(panel);
+                this.group.renderContainer.detatch(panel);
                 if (this.panel) {
                     if (doRender) {
                         this._element.appendChild(this.panel.view.content.element);
@@ -3459,7 +3575,7 @@ class ContentContainer extends CompositeDisposable {
                 if (panel.view.content.element.parentElement === this._element) {
                     this._element.removeChild(panel.view.content.element);
                 }
-                container = this.accessor.overlayRenderContainer.attach({
+                container = this.group.renderContainer.attach({
                     panel,
                     referenceContainer: this,
                 });
@@ -3490,9 +3606,10 @@ class ContentContainer extends CompositeDisposable {
         // noop
     }
     closePanel() {
+        var _a;
         if (this.panel) {
             if (this.panel.api.renderer === 'onlyWhenVisibile') {
-                this._element.removeChild(this.panel.view.content.element);
+                (_a = this.panel.view.content.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.panel.view.content.element);
             }
         }
         this.panel = undefined;
@@ -3603,7 +3720,7 @@ class Tab extends CompositeDisposable {
         this._element.draggable = true;
         toggleClass(this.element, 'inactive-tab', true);
         const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
-        this.droptarget = new Droptarget(this._element, {
+        this.dropTarget = new Droptarget(this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: (event, position) => {
                 if (this.group.locked) {
@@ -3618,9 +3735,10 @@ class Tab extends CompositeDisposable {
                     }
                     return this.panel.id !== data.panelId;
                 }
-                return this.group.model.canDisplayOverlay(event, position, exports.DockviewDropTargets.Tab);
+                return this.group.model.canDisplayOverlay(event, position, 'tab');
             },
         });
+        this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
         this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
             this._onDragStart.fire(event);
         }), dragHandler, addDisposableListener(this._element, 'mousedown', (event) => {
@@ -3628,9 +3746,9 @@ class Tab extends CompositeDisposable {
                 return;
             }
             this._onChanged.fire(event);
-        }), this.droptarget.onDrop((event) => {
+        }), this.dropTarget.onDrop((event) => {
             this._onDropped.fire(event);
-        }), this.droptarget);
+        }), this.dropTarget);
     }
     setActive(isActive) {
         toggleClass(this.element, 'active-tab', isActive);
@@ -3677,7 +3795,7 @@ class GroupDragHandler extends DragHandler {
         }, true));
     }
     isCancelled(_event) {
-        if (this.group.api.location === 'floating' && !_event.shiftKey) {
+        if (this.group.api.location.type === 'floating' && !_event.shiftKey) {
             return true;
         }
         return false;
@@ -3729,7 +3847,7 @@ class VoidContainer extends CompositeDisposable {
             this.accessor.doSetGroupActive(this.group);
         }));
         const handler = new GroupDragHandler(this._element, accessor, group);
-        this.voidDropTarget = new Droptarget(this._element, {
+        this.dropTraget = new Droptarget(this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: (event, position) => {
                 var _a;
@@ -3743,14 +3861,15 @@ class VoidContainer extends CompositeDisposable {
                     // don't show the overlay if the tab being dragged is the last panel of this group
                     return ((_a = last(this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
                 }
-                return group.model.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
+                return group.model.canDisplayOverlay(event, position, 'panel');
             },
         });
+        this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
         this.addDisposables(handler, handler.onDragStart((event) => {
             this._onDragStart.fire(event);
-        }), this.voidDropTarget.onDrop((event) => {
+        }), this.dropTraget.onDrop((event) => {
             this._onDrop.fire(event);
-        }), this.voidDropTarget);
+        }), this.dropTraget);
     }
 }
 
@@ -3838,19 +3957,11 @@ class TabsContainer extends CompositeDisposable {
         this.onTabDragStart = this._onTabDragStart.event;
         this._onGroupDragStart = new Emitter();
         this.onGroupDragStart = this._onGroupDragStart.event;
-        this.addDisposables(this._onDrop, this._onTabDragStart, this._onGroupDragStart);
+        this._onWillShowOverlay = new Emitter();
+        this.onWillShowOverlay = this._onWillShowOverlay.event;
         this._element = document.createElement('div');
         this._element.className = 'tabs-and-actions-container';
         toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
-        this.addDisposables(this.accessor.onDidAddPanel((e) => {
-            if (e.api.group === this.group) {
-                toggleClass(this._element, 'dv-single-tab', this.size === 1);
-            }
-        }), this.accessor.onDidRemovePanel((e) => {
-            if (e.api.group === this.group) {
-                toggleClass(this._element, 'dv-single-tab', this.size === 1);
-            }
-        }));
         this.rightActionsContainer = document.createElement('div');
         this.rightActionsContainer.className = 'right-actions-container';
         this.leftActionsContainer = document.createElement('div');
@@ -3865,7 +3976,15 @@ class TabsContainer extends CompositeDisposable {
         this._element.appendChild(this.leftActionsContainer);
         this._element.appendChild(this.voidContainer.element);
         this._element.appendChild(this.rightActionsContainer);
-        this.addDisposables(this.voidContainer, this.voidContainer.onDragStart((event) => {
+        this.addDisposables(this.accessor.onDidAddPanel((e) => {
+            if (e.api.group === this.group) {
+                toggleClass(this._element, 'dv-single-tab', this.size === 1);
+            }
+        }), this.accessor.onDidRemovePanel((e) => {
+            if (e.api.group === this.group) {
+                toggleClass(this._element, 'dv-single-tab', this.size === 1);
+            }
+        }), this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
             this._onGroupDragStart.fire({
                 nativeEvent: event,
                 group: this.group,
@@ -3875,11 +3994,15 @@ class TabsContainer extends CompositeDisposable {
                 event: event.nativeEvent,
                 index: this.tabs.length,
             });
+        }), this.voidContainer.onWillShowOverlay((event) => {
+            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                kind: 'header_space',
+            }));
         }), addDisposableListener(this.voidContainer.element, 'mousedown', (event) => {
             const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
             if (isFloatingGroupsEnabled &&
                 event.shiftKey &&
-                this.group.api.location !== 'floating') {
+                this.group.api.location.type !== 'floating') {
                 event.preventDefault();
                 const { top, left } = this.element.getBoundingClientRect();
                 const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
@@ -3942,9 +4065,9 @@ class TabsContainer extends CompositeDisposable {
         const disposable = new CompositeDisposable(tab.onDragStart((event) => {
             this._onTabDragStart.fire({ nativeEvent: event, panel });
         }), tab.onChanged((event) => {
-            var _a;
             const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
-            const isFloatingWithOnePanel = this.group.api.location === 'floating' && this.size === 1;
+            const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
+                this.size === 1;
             if (isFloatingGroupsEnabled &&
                 !isFloatingWithOnePanel &&
                 event.shiftKey) {
@@ -3958,20 +4081,20 @@ class TabsContainer extends CompositeDisposable {
                 }, { inDragMode: true });
                 return;
             }
-            const alreadyFocused = panel.id === ((_a = this.group.model.activePanel) === null || _a === void 0 ? void 0 : _a.id) &&
-                this.group.model.isContentFocused;
             const isLeftClick = event.button === 0;
             if (!isLeftClick || event.defaultPrevented) {
                 return;
             }
-            this.group.model.openPanel(panel, {
-                skipFocus: alreadyFocused,
-            });
+            if (this.group.activePanel !== panel) {
+                this.group.model.openPanel(panel);
+            }
         }), tab.onDrop((event) => {
             this._onDrop.fire({
                 event: event.nativeEvent,
                 index: this.tabs.findIndex((x) => x.value === tab),
             });
+        }), tab.onWillShowOverlay((event) => {
+            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, { kind: 'tab' }));
         }));
         const value = { value: tab, disposable };
         this.addTab(value, index);
@@ -3989,6 +4112,60 @@ class TabsContainer extends CompositeDisposable {
     }
 }
 
+class DockviewDidDropEvent extends DockviewEvent {
+    get nativeEvent() {
+        return this.options.nativeEvent;
+    }
+    get position() {
+        return this.options.position;
+    }
+    get panel() {
+        return this.options.panel;
+    }
+    get group() {
+        return this.options.group;
+    }
+    get api() {
+        return this.options.api;
+    }
+    constructor(options) {
+        super();
+        this.options = options;
+    }
+    getData() {
+        return this.options.getData();
+    }
+}
+class DockviewWillDropEvent extends DockviewDidDropEvent {
+    get kind() {
+        return this._kind;
+    }
+    constructor(options) {
+        super(options);
+        this._kind = options.kind;
+    }
+}
+class WillShowOverlayLocationEvent {
+    get kind() {
+        return this._kind;
+    }
+    get nativeEvent() {
+        return this.event.nativeEvent;
+    }
+    get position() {
+        return this.event.position;
+    }
+    get defaultPrevented() {
+        return this.event.defaultPrevented;
+    }
+    preventDefault() {
+        this.event.preventDefault();
+    }
+    constructor(event, options) {
+        this.event = event;
+        this._kind = options.kind;
+    }
+}
 class DockviewGroupPanelModel extends CompositeDisposable {
     get element() {
         throw new Error('not supported');
@@ -4034,7 +4211,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this._location = value;
         toggleClass(this.container, 'dv-groupview-floating', false);
         toggleClass(this.container, 'dv-groupview-popout', false);
-        switch (value) {
+        switch (value.type) {
             case 'grid':
                 this.contentContainer.dropTarget.setTargetZones([
                     'top',
@@ -4070,7 +4247,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this.groupPanel = groupPanel;
         this._isGroupActive = false;
         this._locked = false;
-        this._location = 'grid';
+        this._location = { type: 'grid' };
         this.mostRecentlyUsed = [];
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
@@ -4081,6 +4258,10 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this.onMove = this._onMove.event;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
+        this._onWillDrop = new Emitter();
+        this.onWillDrop = this._onWillDrop.event;
+        this._onWillShowOverlay = new Emitter();
+        this.onWillShowOverlay = this._onWillShowOverlay.event;
         this._onTabDragStart = new Emitter();
         this.onTabDragStart = this._onTabDragStart.event;
         this._onGroupDragStart = new Emitter();
@@ -4091,46 +4272,69 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this.onDidRemovePanel = this._onDidRemovePanel.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+        this._overwriteRenderContainer = null;
         toggleClass(this.container, 'groupview', true);
+        this._api = new DockviewApi(this.accessor);
         this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
         this.contentContainer = new ContentContainer(this.accessor, this);
         container.append(this.tabsContainer.element, this.contentContainer.element);
         this.header.hidden = !!options.hideHeader;
         this.locked = (_a = options.locked) !== null && _a !== void 0 ? _a : false;
-        this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this.tabsContainer.onTabDragStart((event) => {
+        this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this._onWillShowOverlay, this.tabsContainer.onTabDragStart((event) => {
             this._onTabDragStart.fire(event);
         }), this.tabsContainer.onGroupDragStart((event) => {
             this._onGroupDragStart.fire(event);
         }), this.tabsContainer.onDrop((event) => {
-            this.handleDropEvent(event.event, 'center', event.index);
+            this.handleDropEvent('header', event.event, 'center', event.index);
         }), this.contentContainer.onDidFocus(() => {
-            this.accessor.doSetGroupActive(this.groupPanel, true);
+            this.accessor.doSetGroupActive(this.groupPanel);
         }), this.contentContainer.onDidBlur(() => {
             // noop
         }), this.contentContainer.dropTarget.onDrop((event) => {
-            this.handleDropEvent(event.nativeEvent, event.position);
-        }), this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
+            this.handleDropEvent('content', event.nativeEvent, event.position);
+        }), this.tabsContainer.onWillShowOverlay((event) => {
+            this._onWillShowOverlay.fire(event);
+        }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
+            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                kind: 'content',
+            }));
+        }), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
+    }
+    focusContent() {
+        this.contentContainer.element.focus();
+    }
+    set renderContainer(value) {
+        this.panels.forEach((panel) => {
+            this.renderContainer.detatch(panel);
+        });
+        this._overwriteRenderContainer = value;
+        this.panels.forEach((panel) => {
+            this.rerender(panel);
+        });
+    }
+    get renderContainer() {
+        var _a;
+        return ((_a = this._overwriteRenderContainer) !== null && _a !== void 0 ? _a : this.accessor.overlayRenderContainer);
     }
     initialize() {
-        var _a, _b;
-        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.panels) {
+        if (this.options.panels) {
             this.options.panels.forEach((panel) => {
                 this.doAddPanel(panel);
             });
         }
-        if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.activePanel) {
+        if (this.options.activePanel) {
             this.openPanel(this.options.activePanel);
         }
         // must be run after the constructor otherwise this.parent may not be
         // correctly initialized
-        this.setActive(this.isActive, true, true);
+        this.setActive(this.isActive, true);
         this.updateContainer();
         if (this.accessor.options.createRightHeaderActionsElement) {
             this._rightHeaderActions =
                 this.accessor.options.createRightHeaderActionsElement(this.groupPanel);
             this.addDisposables(this._rightHeaderActions);
             this._rightHeaderActions.init({
-                containerApi: new DockviewApi(this.accessor),
+                containerApi: this._api,
                 api: this.groupPanel.api,
             });
             this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
@@ -4140,7 +4344,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
                 this.accessor.options.createLeftHeaderActionsElement(this.groupPanel);
             this.addDisposables(this._leftHeaderActions);
             this._leftHeaderActions.init({
-                containerApi: new DockviewApi(this.accessor),
+                containerApi: this._api,
                 api: this.groupPanel.api,
             });
             this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
@@ -4150,7 +4354,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
                 this.accessor.options.createPrefixHeaderActionsElement(this.groupPanel);
             this.addDisposables(this._prefixHeaderActions);
             this._prefixHeaderActions.init({
-                containerApi: new DockviewApi(this.accessor),
+                containerApi: this._api,
                 api: this.groupPanel.api,
             });
             this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
@@ -4230,35 +4434,45 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         //noop
     }
     focus() {
-        var _a, _b;
-        (_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        var _a;
+        (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
     }
     openPanel(panel, options = {}) {
+        /**
+         * set the panel group
+         * add the panel
+         * check if group active
+         * check if panel active
+         */
         if (typeof options.index !== 'number' ||
             options.index > this.panels.length) {
             options.index = this.panels.length;
         }
-        const skipSetPanelActive = !!options.skipSetPanelActive;
-        const skipSetGroupActive = !!options.skipSetGroupActive;
+        const skipSetActive = !!options.skipSetActive;
         // ensure the group is updated before we fire any events
-        panel.updateParentGroup(this.groupPanel, true);
+        panel.updateParentGroup(this.groupPanel, {
+            skipSetActive: options.skipSetActive,
+        });
+        this.doAddPanel(panel, options.index, {
+            skipSetActive: skipSetActive,
+        });
         if (this._activePanel === panel) {
-            if (!skipSetGroupActive) {
-                this.accessor.doSetGroupActive(this.groupPanel);
-            }
             this.contentContainer.renderPanel(panel, { asActive: true });
             return;
         }
-        this.doAddPanel(panel, options.index, skipSetPanelActive);
-        if (!skipSetPanelActive) {
+        if (!skipSetActive) {
             this.doSetActivePanel(panel);
         }
-        if (!skipSetGroupActive) {
-            this.accessor.doSetGroupActive(this.groupPanel, !!options.skipFocus);
+        if (!options.skipSetGroupActive) {
+            this.accessor.doSetGroupActive(this.groupPanel);
+        }
+        if (!options.skipSetActive) {
+            this.updateContainer();
         }
-        this.updateContainer();
     }
-    removePanel(groupItemOrId) {
+    removePanel(groupItemOrId, options = {
+        skipSetActive: false,
+    }) {
         const id = typeof groupItemOrId === 'string'
             ? groupItemOrId
             : groupItemOrId.id;
@@ -4266,7 +4480,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         if (!panelToRemove) {
             throw new Error('invalid operation');
         }
-        return this._removePanel(panelToRemove);
+        return this._removePanel(panelToRemove, options);
     }
     closeAllPanels() {
         if (this.panels.length > 0) {
@@ -4292,12 +4506,8 @@ class DockviewGroupPanelModel extends CompositeDisposable {
     updateActions(element) {
         this.tabsContainer.setRightActionsElement(element);
     }
-    setActive(isGroupActive, skipFocus = false, force = false) {
-        var _a, _b, _c, _d;
+    setActive(isGroupActive, force = false) {
         if (!force && this.isActive === isGroupActive) {
-            if (!skipFocus) {
-                (_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-            }
             return;
         }
         this._isGroupActive = isGroupActive;
@@ -4308,11 +4518,6 @@ class DockviewGroupPanelModel extends CompositeDisposable {
             this.doSetActivePanel(this.panels[0]);
         }
         this.updateContainer();
-        if (isGroupActive) {
-            if (!skipFocus) {
-                (_d = (_c = this._activePanel) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.call(_c);
-            }
-        }
     }
     layout(width, height) {
         var _a;
@@ -4323,17 +4528,22 @@ class DockviewGroupPanelModel extends CompositeDisposable {
             this._activePanel.layout(this._width, this._height);
         }
     }
-    _removePanel(panel) {
+    _removePanel(panel, options) {
         const isActivePanel = this._activePanel === panel;
         this.doRemovePanel(panel);
         if (isActivePanel && this.panels.length > 0) {
             const nextPanel = this.mostRecentlyUsed[0];
-            this.openPanel(nextPanel);
+            this.openPanel(nextPanel, {
+                skipSetActive: options.skipSetActive,
+                skipSetGroupActive: options.skipSetActiveGroup,
+            });
         }
         if (this._activePanel && this.panels.length === 0) {
             this.doSetActivePanel(undefined);
         }
-        this.updateContainer();
+        if (!options.skipSetActive) {
+            this.updateContainer();
+        }
         return panel;
     }
     doRemovePanel(panel) {
@@ -4348,13 +4558,13 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         }
         this._onDidRemovePanel.fire({ panel });
     }
-    doAddPanel(panel, index = this.panels.length, skipSetActive = false) {
+    doAddPanel(panel, index = this.panels.length, options = { skipSetActive: false }) {
         const existingPanel = this._panels.indexOf(panel);
         const hasExistingPanel = existingPanel > -1;
         this.tabsContainer.show();
         this.contentContainer.show();
         this.tabsContainer.openPanel(panel, index);
-        if (!skipSetActive) {
+        if (!options.skipSetActive) {
             this.contentContainer.openPanel(panel);
         }
         if (hasExistingPanel) {
@@ -4366,12 +4576,17 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this._onDidAddPanel.fire({ panel });
     }
     doSetActivePanel(panel) {
+        if (this._activePanel === panel) {
+            return;
+        }
         this._activePanel = panel;
         if (panel) {
             this.tabsContainer.setActivePanel(panel);
             panel.layout(this._width, this._height);
             this.updateMru(panel);
-            this._onDidActivePanelChange.fire({ panel });
+            this._onDidActivePanelChange.fire({
+                panel,
+            });
         }
     }
     updateMru(panel) {
@@ -4383,11 +4598,11 @@ class DockviewGroupPanelModel extends CompositeDisposable {
     updateContainer() {
         var _a, _b;
         toggleClass(this.container, 'empty', this.isEmpty);
-        this.panels.forEach((panel) => panel.updateParentGroup(this.groupPanel, this.isActive));
+        this.panels.forEach((panel) => panel.runEvents());
         if (this.isEmpty && !this.watermark) {
             const watermark = this.accessor.createWatermarkComponent();
             watermark.init({
-                containerApi: new DockviewApi(this.accessor),
+                containerApi: this._api,
                 group: this.groupPanel,
             });
             this.watermark = watermark;
@@ -4420,10 +4635,32 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         }
         return false;
     }
-    handleDropEvent(event, position, index) {
+    handleDropEvent(type, event, position, index) {
         if (this.locked === 'no-drop-target') {
             return;
         }
+        function getKind() {
+            switch (type) {
+                case 'header':
+                    return typeof index === 'number' ? 'tab' : 'header_space';
+                case 'content':
+                    return 'content';
+            }
+        }
+        const panel = typeof index === 'number' ? this.panels[index] : undefined;
+        const willDropEvent = new DockviewWillDropEvent({
+            nativeEvent: event,
+            position,
+            panel,
+            getData: () => getPanelData(),
+            kind: getKind(),
+            group: this.groupPanel,
+            api: this._api,
+        });
+        this._onWillDrop.fire(willDropEvent);
+        if (willDropEvent.defaultPrevented) {
+            return;
+        }
         const data = getPanelData();
         if (data && data.viewId === this.accessor.id) {
             if (data.panelId === null) {
@@ -4456,12 +4693,14 @@ class DockviewGroupPanelModel extends CompositeDisposable {
             });
         }
         else {
-            this._onDidDrop.fire({
+            this._onDidDrop.fire(new DockviewDidDropEvent({
                 nativeEvent: event,
                 position,
-                index,
+                panel,
                 getData: () => getPanelData(),
-            });
+                group: this.groupPanel,
+                api: this._api,
+            }));
         }
     }
     dispose() {
@@ -4469,6 +4708,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         super.dispose();
         (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.element.remove();
         (_c = (_b = this.watermark) === null || _b === void 0 ? void 0 : _b.dispose) === null || _c === void 0 ? void 0 : _c.call(_b);
+        this.watermark = undefined;
         for (const panel of this.panels) {
             panel.dispose();
         }
@@ -4490,15 +4730,7 @@ class Resizable extends CompositeDisposable {
     constructor(parentElement, disableResizing = false) {
         super();
         this._disableResizing = disableResizing;
-        if (parentElement) {
-            this._element = parentElement;
-        }
-        else {
-            this._element = document.createElement('div');
-            this._element.style.height = '100%';
-            this._element.style.width = '100%';
-            this._element.className = 'dv-resizable-container';
-        }
+        this._element = parentElement;
         this.addDisposables(watchElementResize(this._element, (entry) => {
             if (this.isDisposed) {
                 /**
@@ -4586,25 +4818,38 @@ class BaseGrid extends Resizable {
     get activeGroup() {
         return this._activeGroup;
     }
+    get locked() {
+        return this.gridview.locked;
+    }
+    set locked(value) {
+        this.gridview.locked = value;
+    }
     constructor(options) {
-        super(options.parentElement, options.disableAutoResizing);
+        super(document.createElement('div'), options.disableAutoResizing);
         this._id = nextLayoutId$1.next();
         this._groups = new Map();
         this._onDidLayoutChange = new Emitter();
         this.onDidLayoutChange = this._onDidLayoutChange.event;
-        this._onDidRemoveGroup = new Emitter();
-        this.onDidRemoveGroup = this._onDidRemoveGroup.event;
-        this._onDidAddGroup = new Emitter();
-        this.onDidAddGroup = this._onDidAddGroup.event;
-        this._onDidActiveGroupChange = new Emitter();
-        this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+        this._onDidRemove = new Emitter();
+        this.onDidRemove = this._onDidRemove.event;
+        this._onDidAdd = new Emitter();
+        this.onDidAdd = this._onDidAdd.event;
+        this._onDidActiveChange = new Emitter();
+        this.onDidActiveChange = this._onDidActiveChange.event;
         this._bufferOnDidLayoutChange = new TickDelayedEvent();
+        this.element.style.height = '100%';
+        this.element.style.width = '100%';
+        options.parentElement.appendChild(this.element);
         this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
+        this.gridview.locked = !!options.locked;
         this.element.appendChild(this.gridview.element);
         this.layout(0, 0, true); // set some elements height/widths
-        this.addDisposables(this.gridview.onDidChange(() => {
+        this.addDisposables(Disposable.from(() => {
+            var _a;
+            (_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.element);
+        }), this.gridview.onDidChange(() => {
             this._bufferOnDidLayoutChange.fire();
-        }), exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+        }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove, this.onDidActiveChange)(() => {
             this._bufferOnDidLayoutChange.fire();
         }), this._bufferOnDidLayoutChange.onEvent(() => {
             this._onDidLayoutChange.fire();
@@ -4619,6 +4864,7 @@ class BaseGrid extends Resizable {
     }
     maximizeGroup(panel) {
         this.gridview.maximizeView(panel);
+        this.doSetGroupActive(panel);
     }
     isMaximizedGroup(panel) {
         return this.gridview.maximizedView() === panel;
@@ -4629,13 +4875,12 @@ class BaseGrid extends Resizable {
     hasMaximizedGroup() {
         return this.gridview.hasMaximizedView();
     }
-    get onDidMaxmizedGroupChange() {
-        return this.gridview.onDidMaxmizedNodeChange;
+    get onDidMaximizedGroupChange() {
+        return this.gridview.onDidMaximizedNodeChange;
     }
     doAddGroup(group, location = [0], size) {
         this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
-        this._onDidAddGroup.fire(group);
-        this.doSetGroupActive(group);
+        this._onDidAdd.fire(group);
     }
     doRemoveGroup(group, options) {
         if (!this._groups.has(group.id)) {
@@ -4647,8 +4892,8 @@ class BaseGrid extends Resizable {
             item.disposable.dispose();
             item.value.dispose();
             this._groups.delete(group.id);
+            this._onDidRemove.fire(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());
             this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
@@ -4659,25 +4904,18 @@ class BaseGrid extends Resizable {
         var _a;
         return (_a = this._groups.get(id)) === null || _a === void 0 ? void 0 : _a.value;
     }
-    doSetGroupActive(group, skipFocus) {
-        var _a, _b, _c;
+    doSetGroupActive(group) {
         if (this._activeGroup === group) {
             return;
         }
         if (this._activeGroup) {
             this._activeGroup.setActive(false);
-            if (!skipFocus) {
-                (_b = (_a = this._activeGroup).focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-            }
         }
         if (group) {
             group.setActive(true);
-            if (!skipFocus) {
-                (_c = group.focus) === null || _c === void 0 ? void 0 : _c.call(group);
-            }
         }
         this._activeGroup = group;
-        this._onDidActiveGroupChange.fire(group);
+        this._onDidActiveChange.fire(group);
     }
     removeGroup(group) {
         this.doRemoveGroup(group);
@@ -4722,9 +4960,9 @@ class BaseGrid extends Resizable {
         this.gridview.layout(width, height);
     }
     dispose() {
-        this._onDidActiveGroupChange.dispose();
-        this._onDidAddGroup.dispose();
-        this._onDidRemoveGroup.dispose();
+        this._onDidActiveChange.dispose();
+        this._onDidAdd.dispose();
+        this._onDidRemove.dispose();
         this._onDidLayoutChange.dispose();
         for (const group of this.groups) {
             group.dispose();
@@ -4734,11 +4972,15 @@ class BaseGrid extends Resizable {
     }
 }
 
+class WillFocusEvent extends DockviewEvent {
+    constructor() {
+        super();
+    }
+}
 /**
  * A core api implementation that should be used across all panel-like objects
  */
 class PanelApiImpl extends CompositeDisposable {
-    //
     get isFocused() {
         return this._isFocused;
     }
@@ -4748,6 +4990,9 @@ class PanelApiImpl extends CompositeDisposable {
     get isVisible() {
         return this._isVisible;
     }
+    get isHidden() {
+        return this._isHidden;
+    }
     get width() {
         return this._width;
     }
@@ -4760,38 +5005,26 @@ class PanelApiImpl extends CompositeDisposable {
         this._isFocused = false;
         this._isActive = false;
         this._isVisible = true;
+        this._isHidden = false;
         this._width = 0;
         this._height = 0;
         this.panelUpdatesDisposable = new MutableDisposable();
-        this._onDidDimensionChange = new Emitter({
-            replay: true,
-        });
+        this._onDidDimensionChange = new Emitter();
         this.onDidDimensionsChange = this._onDidDimensionChange.event;
-        //
-        this._onDidChangeFocus = new Emitter({
-            replay: true,
-        });
+        this._onDidChangeFocus = new Emitter();
         this.onDidFocusChange = this._onDidChangeFocus.event;
         //
-        this._onFocusEvent = new Emitter();
-        this.onFocusEvent = this._onFocusEvent.event;
+        this._onWillFocus = new Emitter();
+        this.onWillFocus = this._onWillFocus.event;
         //
-        this._onDidVisibilityChange = new Emitter({
-            replay: true,
-        });
+        this._onDidVisibilityChange = new Emitter();
         this.onDidVisibilityChange = this._onDidVisibilityChange.event;
-        //
-        this._onVisibilityChange = new Emitter();
-        this.onVisibilityChange = this._onVisibilityChange.event;
-        //
-        this._onDidActiveChange = new Emitter({
-            replay: true,
-        });
+        this._onDidHiddenChange = new Emitter();
+        this.onDidHiddenChange = this._onDidHiddenChange.event;
+        this._onDidActiveChange = new Emitter();
         this.onDidActiveChange = this._onDidActiveChange.event;
-        //
         this._onActiveChange = new Emitter();
         this.onActiveChange = this._onActiveChange.event;
-        //
         this._onUpdateParameters = new Emitter();
         this.onUpdateParameters = this._onUpdateParameters.event;
         this.addDisposables(this.onDidFocusChange((event) => {
@@ -4800,10 +5033,12 @@ class PanelApiImpl extends CompositeDisposable {
             this._isActive = event.isActive;
         }), this.onDidVisibilityChange((event) => {
             this._isVisible = event.isVisible;
+        }), this.onDidHiddenChange((event) => {
+            this._isHidden = event.isHidden;
         }), this.onDidDimensionsChange((event) => {
             this._width = event.width;
             this._height = event.height;
-        }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this._onUpdateParameters);
+        }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onUpdateParameters, this._onWillFocus, this._onDidHiddenChange, this._onUpdateParameters);
     }
     initialize(panel) {
         this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
@@ -4812,8 +5047,8 @@ class PanelApiImpl extends CompositeDisposable {
             });
         });
     }
-    setVisible(isVisible) {
-        this._onVisibilityChange.fire({ isVisible });
+    setHidden(isHidden) {
+        this._onDidHiddenChange.fire({ isHidden });
     }
     setActive() {
         this._onActiveChange.fire();
@@ -4821,9 +5056,6 @@ class PanelApiImpl extends CompositeDisposable {
     updateParameters(parameters) {
         this._onUpdateParameters.fire(parameters);
     }
-    dispose() {
-        super.dispose();
-    }
 }
 
 class SplitviewPanelApiImpl extends PanelApiImpl {
@@ -4911,7 +5143,12 @@ class BasePanelView extends CompositeDisposable {
         }), focusTracker);
     }
     focus() {
-        this.api._onFocusEvent.fire();
+        const event = new WillFocusEvent();
+        this.api._onWillFocus.fire(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        this._element.focus();
     }
     layout(width, height) {
         this._width = width;
@@ -5240,9 +5477,7 @@ class GridviewPanelApiImpl extends PanelApiImpl {
         super(id);
         this._onDidConstraintsChangeInternal = new Emitter();
         this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
-        this._onDidConstraintsChange = new Emitter({
-            replay: true,
-        });
+        this._onDidConstraintsChange = new Emitter();
         this.onDidConstraintsChange = this._onDidConstraintsChange.event;
         this._onDidSizeChange = new Emitter();
         this.onDidSizeChange = this._onDidSizeChange.event;
@@ -5335,13 +5570,13 @@ class GridviewPanel extends BasePanelView {
             this._maximumHeight = options.maximumHeight;
         }
         this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
-        this.addDisposables(this.api.onVisibilityChange((event) => {
-            const { isVisible } = event;
+        this.addDisposables(this.api.onDidHiddenChange((event) => {
+            const { isHidden } = event;
             const { accessor } = this._params;
-            accessor.setVisible(this, isVisible);
+            accessor.setVisible(this, !isHidden);
         }), this.api.onActiveChange(() => {
             const { accessor } = this._params;
-            accessor.setActive(this);
+            accessor.doSetGroupActive(this);
         }), this.api.onDidConstraintsChangeInternal((event) => {
             if (typeof event.minimumWidth === 'number' ||
                 typeof event.minimumWidth === 'function') {
@@ -5424,6 +5659,17 @@ class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
         this.onDidLocationChange = this._onDidLocationChange.event;
         this.addDisposables(this._onDidLocationChange);
     }
+    close() {
+        if (!this._group) {
+            return;
+        }
+        return this.accessor.removeGroup(this._group);
+    }
+    getWindow() {
+        return this.location.type === 'popout'
+            ? this.location.getWindow()
+            : window;
+    }
     moveTo(options) {
         var _a, _b, _c;
         if (!this._group) {
@@ -5431,14 +5677,23 @@ class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
         }
         const group = (_a = options.group) !== null && _a !== void 0 ? _a : this.accessor.addGroup({
             direction: positionToDirection((_b = options.position) !== null && _b !== void 0 ? _b : 'right'),
+            skipSetActive: true,
+        });
+        this.accessor.moveGroupOrPanel({
+            from: { groupId: this._group.id },
+            to: {
+                group,
+                position: options.group
+                    ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center'
+                    : 'center',
+            },
         });
-        this.accessor.moveGroupOrPanel(group, this._group.id, undefined, options.group ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center' : 'center');
     }
     maximize() {
         if (!this._group) {
             throw new Error(NOT_INITIALIZED_MESSAGE);
         }
-        if (this.location !== 'grid') {
+        if (this.location.type !== 'grid') {
             // only grid groups can be maximized
             return;
         }
@@ -5495,6 +5750,12 @@ class DockviewGroupPanel extends GridviewPanel {
         this.api.initialize(this); // cannot use 'this' after after 'super' call
         this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
     }
+    focus() {
+        if (!this.api.isActive) {
+            this.api.setActive();
+        }
+        super.focus();
+    }
     initialize() {
         this._model.initialize();
     }
@@ -5540,6 +5801,9 @@ function isGroupOptionsWithGroup(data) {
 }
 
 class DockviewPanelApiImpl extends GridviewPanelApiImpl {
+    get location() {
+        return this.group.api.location;
+    }
     get title() {
         return this.panel.title;
     }
@@ -5551,15 +5815,34 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
     }
     set group(value) {
         const isOldGroupActive = this.isGroupActive;
-        this._group = value;
-        this._onDidGroupChange.fire();
-        if (this._group) {
-            this.disposable.value = this._group.api.onDidActiveChange(() => {
-                this._onDidActiveGroupChange.fire();
+        if (this._group !== value) {
+            this._group = value;
+            this._onDidGroupChange.fire({});
+            let _trackGroupActive = isOldGroupActive; // prevent duplicate events with same state
+            this.groupEventsDisposable.value = new CompositeDisposable(this.group.api.onDidLocationChange((event) => {
+                if (this.group !== this.panel.group) {
+                    return;
+                }
+                this._onDidLocationChange.fire(event);
+            }), this.group.api.onDidActiveChange(() => {
+                if (this.group !== this.panel.group) {
+                    return;
+                }
+                if (_trackGroupActive !== this.isGroupActive) {
+                    _trackGroupActive = this.isGroupActive;
+                    this._onDidActiveGroupChange.fire({
+                        isActive: this.isGroupActive,
+                    });
+                }
+            }));
+            // if (this.isGroupActive !== isOldGroupActive) {
+            //     this._onDidActiveGroupChange.fire({
+            //         isActive: this.isGroupActive,
+            //     });
+            // }
+            this._onDidLocationChange.fire({
+                location: this.group.api.location,
             });
-            if (this.isGroupActive !== isOldGroupActive) {
-                this._onDidActiveGroupChange.fire();
-            }
         }
     }
     get group() {
@@ -5577,14 +5860,26 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         this.onDidGroupChange = this._onDidGroupChange.event;
         this._onDidRendererChange = new Emitter();
         this.onDidRendererChange = this._onDidRendererChange.event;
-        this.disposable = new MutableDisposable();
+        this._onDidLocationChange = new Emitter();
+        this.onDidLocationChange = this._onDidLocationChange.event;
+        this.groupEventsDisposable = new MutableDisposable();
         this.initialize(panel);
         this._group = group;
-        this.addDisposables(this.disposable, this._onDidRendererChange, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
+        this.addDisposables(this.groupEventsDisposable, this._onDidRendererChange, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange, this._onDidLocationChange);
+    }
+    getWindow() {
+        return this.group.api.getWindow();
     }
     moveTo(options) {
         var _a;
-        this.accessor.moveGroupOrPanel(options.group, this._group.id, this.panel.id, (_a = options.position) !== null && _a !== void 0 ? _a : 'center', options.index);
+        this.accessor.moveGroupOrPanel({
+            from: { groupId: this._group.id, panelId: this.panel.id },
+            to: {
+                group: options.group,
+                position: (_a = options.position) !== null && _a !== void 0 ? _a : 'center',
+                index: options.index,
+            },
+        });
     }
     setTitle(title) {
         this.panel.setTitle(title);
@@ -5645,7 +5940,14 @@ class DockviewPanel extends CompositeDisposable {
         this.setTitle(params.title);
     }
     focus() {
-        this.api._onFocusEvent.fire();
+        const event = new WillFocusEvent();
+        this.api._onWillFocus.fire(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        if (!this.api.isActive) {
+            this.api.setActive();
+        }
     }
     toJSON() {
         return {
@@ -5702,20 +6004,40 @@ class DockviewPanel extends CompositeDisposable {
             },
         });
     }
-    updateParentGroup(group, isGroupActive) {
+    updateParentGroup(group, options) {
         this._group = group;
-        this.api.group = group;
+        this.api.group = this._group;
         const isPanelVisible = this._group.model.isPanelActive(this);
-        this.api._onDidActiveChange.fire({
-            isActive: isGroupActive && isPanelVisible,
-        });
-        this.api._onDidVisibilityChange.fire({
-            isVisible: isPanelVisible,
-        });
-        this.view.updateParentGroup(this._group, this._group.model.isPanelActive(this));
+        const isActive = this.group.api.isActive && isPanelVisible;
+        if (!(options === null || options === void 0 ? void 0 : options.skipSetActive)) {
+            if (this.api.isActive !== isActive) {
+                this.api._onDidActiveChange.fire({
+                    isActive: this.group.api.isActive && isPanelVisible,
+                });
+            }
+        }
+        if (this.api.isVisible !== isPanelVisible) {
+            this.api._onDidVisibilityChange.fire({
+                isVisible: isPanelVisible,
+            });
+        }
+    }
+    runEvents() {
+        const isPanelVisible = this._group.model.isPanelActive(this);
+        const isActive = this.group.api.isActive && isPanelVisible;
+        if (this.api.isActive !== isActive) {
+            this.api._onDidActiveChange.fire({
+                isActive: this.group.api.isActive && isPanelVisible,
+            });
+        }
+        if (this.api.isVisible !== isPanelVisible) {
+            this.api._onDidVisibilityChange.fire({
+                isVisible: isPanelVisible,
+            });
+        }
     }
     layout(width, height) {
-        // the obtain the correct dimensions of the content panel we must deduct the tab height
+        // TODO: Can we somehow do height without header height or indicate what the header height is?
         this.api._onDidDimensionChange.fire({
             width,
             height: height,
@@ -5837,8 +6159,6 @@ class DockviewPanelModel {
         this.id = id;
         this.contentComponent = contentComponent;
         this.tabComponent = tabComponent;
-        this._group = null;
-        this._isPanelVisible = null;
         this._content = this.createContentComponent(this.id, contentComponent);
         this._tab = this.createTabComponent(this.id, tabComponent);
     }
@@ -5846,25 +6166,8 @@ class DockviewPanelModel {
         this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
         this.tab.init(params);
     }
-    updateParentGroup(group, isPanelVisible) {
-        if (group !== this._group) {
-            this._group = group;
-            if (this._content.onGroupChange) {
-                this._content.onGroupChange(group);
-            }
-            if (this._tab.onGroupChange) {
-                this._tab.onGroupChange(group);
-            }
-        }
-        if (isPanelVisible !== this._isPanelVisible) {
-            this._isPanelVisible = isPanelVisible;
-            if (this._content.onPanelVisibleChange) {
-                this._content.onPanelVisibleChange(isPanelVisible);
-            }
-            if (this._tab.onPanelVisibleChange) {
-                this._tab.onPanelVisibleChange(isPanelVisible);
-            }
-        }
+    updateParentGroup(_group, _isPanelVisible) {
+        // noop
     }
     layout(width, height) {
         var _a, _b;
@@ -6297,117 +6600,6 @@ class DockviewFloatingGroupPanel extends CompositeDisposable {
     }
 }
 
-class PopoutWindow extends CompositeDisposable {
-    constructor(id, className, options) {
-        super();
-        this.id = id;
-        this.className = className;
-        this.options = options;
-        this._onDidClose = new Emitter();
-        this.onDidClose = this._onDidClose.event;
-        this._window = null;
-        this.addDisposables(this._onDidClose, {
-            dispose: () => {
-                this.close();
-            },
-        });
-    }
-    dimensions() {
-        if (!this._window) {
-            return null;
-        }
-        const left = this._window.value.screenX;
-        const top = this._window.value.screenY;
-        const width = this._window.value.innerWidth;
-        const height = this._window.value.innerHeight;
-        return { top, left, width, height };
-    }
-    close() {
-        if (this._window) {
-            this._window.disposable.dispose();
-            this._window.value.close();
-            this._window = null;
-        }
-    }
-    open(content) {
-        if (this._window) {
-            throw new Error('instance of popout window is already open');
-        }
-        const url = `${this.options.url}`;
-        const features = Object.entries({
-            top: this.options.top,
-            left: this.options.left,
-            width: this.options.width,
-            height: this.options.height,
-        })
-            .map(([key, value]) => `${key}=${value}`)
-            .join(',');
-        // https://developer.mozilla.org/en-US/docs/Web/API/Window/open
-        const externalWindow = window.open(url, this.id, features);
-        if (!externalWindow) {
-            return;
-        }
-        const disposable = new CompositeDisposable();
-        this._window = { value: externalWindow, disposable };
-        const cleanUp = () => {
-            this._onDidClose.fire();
-            this._window = null;
-        };
-        // prevent any default content from loading
-        // externalWindow.document.body.replaceWith(document.createElement('div'));
-        disposable.addDisposables(addDisposableWindowListener(window, 'beforeunload', () => {
-            cleanUp();
-            this.close();
-        }));
-        externalWindow.addEventListener('load', () => {
-            const externalDocument = externalWindow.document;
-            externalDocument.title = document.title;
-            const div = document.createElement('div');
-            div.classList.add('dv-popout-window');
-            div.style.position = 'absolute';
-            div.style.width = '100%';
-            div.style.height = '100%';
-            div.style.top = '0px';
-            div.style.left = '0px';
-            div.classList.add(this.className);
-            div.appendChild(content);
-            externalDocument.body.replaceChildren(div);
-            externalDocument.body.classList.add(this.className);
-            addStyles(externalDocument, window.document.styleSheets);
-            externalWindow.addEventListener('beforeunload', () => {
-                // TODO: indicate external window is closing
-                cleanUp();
-            });
-        });
-    }
-}
-
-class DockviewPopoutGroupPanel extends CompositeDisposable {
-    constructor(id, group, options) {
-        var _a;
-        super();
-        this.id = id;
-        this.group = group;
-        this.options = options;
-        this.window = new PopoutWindow(id, (_a = options.className) !== null && _a !== void 0 ? _a : '', {
-            url: this.options.popoutUrl,
-            left: this.options.box.left,
-            top: this.options.box.top,
-            width: this.options.box.width,
-            height: this.options.box.height,
-        });
-        group.model.location = 'popout';
-        this.addDisposables(this.window, {
-            dispose: () => {
-                group.model.location = 'grid';
-            },
-        }, this.window.onDidClose(() => {
-            this.dispose();
-        }));
-        this.window.open(group.element);
-    }
-}
-
 const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
 const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100 };
 
@@ -6421,11 +6613,13 @@ class OverlayRenderContainer extends CompositeDisposable {
         super();
         this.element = element;
         this.map = {};
+        this._disposed = false;
         this.addDisposables(Disposable.from(() => {
             for (const value of Object.values(this.map)) {
                 value.disposable.dispose();
                 value.destroy.dispose();
             }
+            this._disposed = true;
         }));
     }
     detatch(panel) {
@@ -6465,7 +6659,7 @@ class OverlayRenderContainer extends CompositeDisposable {
             focusContainer.style.top = `${box.top - box2.top}px`;
             focusContainer.style.width = `${box.width}px`;
             focusContainer.style.height = `${box.height}px`;
-            toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.location === 'floating');
+            toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.location.type === 'floating');
         };
         const visibilityChanged = () => {
             if (panel.api.isVisible) {
@@ -6511,8 +6705,11 @@ class OverlayRenderContainer extends CompositeDisposable {
             resize();
         }));
         this.map[panel.api.id].destroy = Disposable.from(() => {
-            focusContainer.removeChild(panel.view.content.element);
-            this.element.removeChild(focusContainer);
+            var _a;
+            if (panel.view.content.element.parentElement === focusContainer) {
+                focusContainer.removeChild(panel.view.content.element);
+            }
+            (_a = focusContainer.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(focusContainer);
         });
         queueMicrotask(() => {
             if (this.isDisposed) {
@@ -6533,11 +6730,187 @@ class OverlayRenderContainer extends CompositeDisposable {
     }
 }
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+class PopoutWindow extends CompositeDisposable {
+    get window() {
+        var _a, _b;
+        return (_b = (_a = this._window) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
+    }
+    constructor(target, className, options) {
+        super();
+        this.target = target;
+        this.className = className;
+        this.options = options;
+        this._onWillClose = new Emitter();
+        this.onWillClose = this._onWillClose.event;
+        this._onDidClose = new Emitter();
+        this.onDidClose = this._onDidClose.event;
+        this._window = null;
+        this.addDisposables(this._onWillClose, this._onDidClose, {
+            dispose: () => {
+                this.close();
+            },
+        });
+    }
+    dimensions() {
+        if (!this._window) {
+            return null;
+        }
+        const left = this._window.value.screenX;
+        const top = this._window.value.screenY;
+        const width = this._window.value.innerWidth;
+        const height = this._window.value.innerHeight;
+        return { top, left, width, height };
+    }
+    close() {
+        var _a, _b;
+        if (this._window) {
+            this._onWillClose.fire();
+            (_b = (_a = this.options).onWillClose) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                id: this.target,
+                window: this._window.value,
+            });
+            this._window.disposable.dispose();
+            this._window.value.close();
+            this._window = null;
+            this._onDidClose.fire();
+        }
+    }
+    open() {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._window) {
+                throw new Error('instance of popout window is already open');
+            }
+            const url = `${this.options.url}`;
+            const features = Object.entries({
+                top: this.options.top,
+                left: this.options.left,
+                width: this.options.width,
+                height: this.options.height,
+            })
+                .map(([key, value]) => `${key}=${value}`)
+                .join(',');
+            /**
+             * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/open
+             */
+            const externalWindow = window.open(url, this.target, features);
+            if (!externalWindow) {
+                /**
+                 * Popup blocked
+                 */
+                return null;
+            }
+            const disposable = new CompositeDisposable();
+            this._window = { value: externalWindow, disposable };
+            disposable.addDisposables(addDisposableWindowListener(window, 'beforeunload', () => {
+                /**
+                 * before the main window closes we should close this popup too
+                 * to be good citizens
+                 *
+                 * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+                 */
+                this.close();
+            }));
+            const container = this.createPopoutWindowContainer();
+            if (this.className) {
+                container.classList.add(this.className);
+            }
+            (_b = (_a = this.options).onDidOpen) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                id: this.target,
+                window: externalWindow,
+            });
+            return new Promise((resolve) => {
+                externalWindow.addEventListener('unload', (e) => {
+                    // if page fails to load before unloading
+                    // this.close();
+                });
+                externalWindow.addEventListener('load', () => {
+                    /**
+                     * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
+                     */
+                    const externalDocument = externalWindow.document;
+                    externalDocument.title = document.title;
+                    externalDocument.body.appendChild(container);
+                    addStyles(externalDocument, window.document.styleSheets);
+                    /**
+                     * beforeunload must be registered after load for reasons I could not determine
+                     * otherwise the beforeunload event will not fire when the window is closed
+                     */
+                    addDisposableWindowListener(externalWindow, 'beforeunload', () => {
+                        /**
+                         * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+                         */
+                        this.close();
+                    });
+                    resolve(container);
+                });
+            });
+        });
+    }
+    createPopoutWindowContainer() {
+        const el = document.createElement('div');
+        el.classList.add('dv-popout-window');
+        el.id = 'dv-popout-window';
+        el.style.position = 'absolute';
+        el.style.width = '100%';
+        el.style.height = '100%';
+        el.style.top = '0px';
+        el.style.left = '0px';
+        return el;
+    }
+}
+
 const DEFAULT_ROOT_OVERLAY_MODEL = {
     activationSize: { type: 'pixels', value: 10 },
     size: { type: 'pixels', value: 20 },
 };
-function getTheme(element) {
+function moveGroupWithoutDestroying(options) {
+    const activePanel = options.from.activePanel;
+    const panels = [...options.from.panels].map((panel) => {
+        const removedPanel = options.from.model.removePanel(panel);
+        options.from.model.renderContainer.detatch(panel);
+        return removedPanel;
+    });
+    panels.forEach((panel) => {
+        options.to.model.openPanel(panel, {
+            skipSetActive: activePanel !== panel,
+            skipSetGroupActive: true,
+        });
+    });
+}
+function getDockviewTheme(element) {
     function toClassList(element) {
         const list = [];
         for (let i = 0; i < element.classList.length; i++) {
@@ -6588,6 +6961,7 @@ class DockviewComponent extends BaseGrid {
             styles: options.styles,
             parentElement: options.parentElement,
             disableAutoResizing: options.disableAutoResizing,
+            locked: options.locked,
         });
         this.nextGroupId = sequentialNumberGenerator();
         this._deserializer = new DefaultDockviewDeserialzier(this);
@@ -6598,6 +6972,10 @@ class DockviewComponent extends BaseGrid {
         this.onWillDragGroup = this._onWillDragGroup.event;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
+        this._onWillDrop = new Emitter();
+        this.onWillDrop = this._onWillDrop.event;
+        this._onWillShowOverlay = new Emitter();
+        this.onWillShowOverlay = this._onWillShowOverlay.event;
         this._onDidRemovePanel = new Emitter();
         this.onDidRemovePanel = this._onDidRemovePanel.event;
         this._onDidAddPanel = new Emitter();
@@ -6606,15 +6984,36 @@ class DockviewComponent extends BaseGrid {
         this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+        this._onDidMovePanel = new Emitter();
         this._floatingGroups = [];
         this._popoutGroups = [];
+        this._ignoreEvents = 0;
+        this._onDidRemoveGroup = new Emitter();
+        this.onDidRemoveGroup = this._onDidRemoveGroup.event;
+        this._onDidAddGroup = new Emitter();
+        this.onDidAddGroup = this._onDidAddGroup.event;
+        this._onDidActiveGroupChange = new Emitter();
+        this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+        this._moving = false;
         const gready = document.createElement('div');
         gready.className = 'dv-overlay-render-container';
         this.gridview.element.appendChild(gready);
         this.overlayRenderContainer = new OverlayRenderContainer(gready);
         toggleClass(this.gridview.element, 'dv-dockview', true);
         toggleClass(this.element, 'dv-debug', !!options.debug);
-        this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+        this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this.onDidAdd((event) => {
+            if (!this._moving) {
+                this._onDidAddGroup.fire(event);
+            }
+        }), this.onDidRemove((event) => {
+            if (!this._moving) {
+                this._onDidRemoveGroup.fire(event);
+            }
+        }), this.onDidActiveChange((event) => {
+            if (!this._moving) {
+                this._onDidActiveGroupChange.fire(event);
+            }
+        }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove)(() => {
             this.updateWatermark();
         }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
             this._bufferOnDidLayoutChange.fire();
@@ -6625,7 +7024,7 @@ class DockviewComponent extends BaseGrid {
             }
             // iterate over a copy of the array since .dispose() mutates the original array
             for (const group of [...this._popoutGroups]) {
-                group.dispose();
+                group.disposable.dispose();
             }
         }));
         this._options = options;
@@ -6671,7 +7070,7 @@ class DockviewComponent extends BaseGrid {
                     return this.options.showDndOverlay({
                         nativeEvent: event,
                         position: position,
-                        target: exports.DockviewDropTargets.Edge,
+                        target: 'edge',
                         getData: getPanelData,
                     });
                 }
@@ -6682,86 +7081,249 @@ class DockviewComponent extends BaseGrid {
         });
         this.addDisposables(this._rootDropTarget.onDrop((event) => {
             var _a;
+            const willDropEvent = new DockviewWillDropEvent({
+                nativeEvent: event.nativeEvent,
+                position: event.position,
+                panel: undefined,
+                api: this._api,
+                group: undefined,
+                getData: getPanelData,
+                kind: 'content',
+            });
+            this._onWillDrop.fire(willDropEvent);
+            if (willDropEvent.defaultPrevented) {
+                return;
+            }
             const data = getPanelData();
             if (data) {
-                this.moveGroupOrPanel(this.orthogonalize(event.position), data.groupId, (_a = data.panelId) !== null && _a !== void 0 ? _a : undefined, 'center');
+                this.moveGroupOrPanel({
+                    from: {
+                        groupId: data.groupId,
+                        panelId: (_a = data.panelId) !== null && _a !== void 0 ? _a : undefined,
+                    },
+                    to: {
+                        group: this.orthogonalize(event.position),
+                        position: 'center',
+                    },
+                });
             }
             else {
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: null, getData: getPanelData }));
+                this._onDidDrop.fire(new DockviewDidDropEvent({
+                    nativeEvent: event.nativeEvent,
+                    position: event.position,
+                    panel: undefined,
+                    api: this._api,
+                    group: undefined,
+                    getData: getPanelData,
+                }));
             }
         }), this._rootDropTarget);
         this._api = new DockviewApi(this);
         this.updateWatermark();
     }
-    addPopoutGroup(item, options) {
-        var _a;
-        let group;
-        let box = options === null || options === void 0 ? void 0 : options.position;
-        if (item instanceof DockviewPanel) {
-            group = this.createGroup();
-            this.removePanel(item, {
-                removeEmptyGroup: true,
-                skipDispose: true,
-            });
-            group.model.openPanel(item);
-            if (!box) {
-                box = this.element.getBoundingClientRect();
+    addPopoutGroup(itemToPopout, options) {
+        var _a, _b, _c;
+        if (itemToPopout instanceof DockviewPanel &&
+            itemToPopout.group.size === 1) {
+            return this.addPopoutGroup(itemToPopout.group);
+        }
+        const theme = getDockviewTheme(this.gridview.element);
+        const element = this.element;
+        function getBox() {
+            if (options === null || options === void 0 ? void 0 : options.position) {
+                return options.position;
+            }
+            if (itemToPopout instanceof DockviewGroupPanel) {
+                return itemToPopout.element.getBoundingClientRect();
+            }
+            if (itemToPopout.group) {
+                return itemToPopout.group.element.getBoundingClientRect();
+            }
+            return element.getBoundingClientRect();
+        }
+        const box = getBox();
+        const groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId(); //item.id;
+        if (itemToPopout.api.location.type === 'grid') {
+            itemToPopout.api.setHidden(true);
+        }
+        const _window = new PopoutWindow(`${this.id}-${groupId}`, // unique id
+        theme !== null && theme !== void 0 ? theme : '', {
+            url: (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : '/popout.html',
+            left: window.screenX + box.left,
+            top: window.screenY + box.top,
+            width: box.width,
+            height: box.height,
+            onDidOpen: options === null || options === void 0 ? void 0 : options.onDidOpen,
+            onWillClose: options === null || options === void 0 ? void 0 : options.onWillClose,
+        });
+        const popoutWindowDisposable = new CompositeDisposable(_window, _window.onDidClose(() => {
+            popoutWindowDisposable.dispose();
+        }));
+        return _window
+            .open()
+            .then((popoutContainer) => {
+            var _a;
+            if (_window.isDisposed) {
+                return;
             }
-        }
-        else {
-            group = item;
-            if (!box) {
-                box = group.element.getBoundingClientRect();
+            if (popoutContainer === null) {
+                popoutWindowDisposable.dispose();
+                return;
             }
-            const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
-                options.skipRemoveGroup;
-            if (!skip) {
-                this.doRemoveGroup(item, { skipDispose: true });
-            }
-        }
-        const theme = getTheme(this.gridview.element);
-        const popoutWindow = new DockviewPopoutGroupPanel(`${this.id}-${group.id}`, // globally unique within dockview
-        group, {
-            className: theme !== null && theme !== void 0 ? theme : '',
-            popoutUrl: (_a = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _a !== void 0 ? _a : '/popout.html',
-            box: {
-                left: window.screenX + box.left,
-                top: window.screenY + box.top,
-                width: box.width,
-                height: box.height,
-            },
+            const gready = document.createElement('div');
+            gready.className = 'dv-overlay-render-container';
+            const overlayRenderContainer = new OverlayRenderContainer(gready);
+            const referenceGroup = itemToPopout instanceof DockviewPanel
+                ? itemToPopout.group
+                : itemToPopout;
+            const referenceLocation = itemToPopout.api.location.type;
+            const group = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) !== null && _a !== void 0 ? _a : this.createGroup({ id: groupId });
+            group.model.renderContainer = overlayRenderContainer;
+            if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup)) {
+                this._onDidAddGroup.fire(group);
+            }
+            if (itemToPopout instanceof DockviewPanel) {
+                this.movingLock(() => {
+                    const panel = referenceGroup.model.removePanel(itemToPopout);
+                    group.model.openPanel(panel);
+                });
+            }
+            else {
+                this.movingLock(() => moveGroupWithoutDestroying({
+                    from: referenceGroup,
+                    to: group,
+                }));
+                switch (referenceLocation) {
+                    case 'grid':
+                        referenceGroup.api.setHidden(true);
+                        break;
+                    case 'floating':
+                    case 'popout':
+                        this.removeGroup(referenceGroup);
+                        break;
+                }
+            }
+            popoutContainer.classList.add('dv-dockview');
+            popoutContainer.style.overflow = 'hidden';
+            popoutContainer.appendChild(gready);
+            popoutContainer.appendChild(group.element);
+            group.model.location = {
+                type: 'popout',
+                getWindow: () => _window.window,
+            };
+            this.doSetGroupAndPanelActive(group);
+            popoutWindowDisposable.addDisposables(group.api.onDidActiveChange((event) => {
+                var _a;
+                if (event.isActive) {
+                    (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+            }), group.api.onWillFocus(() => {
+                var _a;
+                (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
+            }));
+            let returnedGroup;
+            const value = {
+                window: _window,
+                popoutGroup: group,
+                referenceGroup: this.getPanel(referenceGroup.id)
+                    ? referenceGroup.id
+                    : undefined,
+                disposable: {
+                    dispose: () => {
+                        popoutWindowDisposable.dispose();
+                        return returnedGroup;
+                    },
+                },
+            };
+            popoutWindowDisposable.addDisposables(
+            /**
+             * ResizeObserver seems slow here, I do not know why but we don't need it
+             * since we can reply on the window resize event as we will occupy the full
+             * window dimensions
+             */
+            addDisposableWindowListener(_window.window, 'resize', () => {
+                group.layout(window.innerWidth, window.innerHeight);
+            }), overlayRenderContainer, Disposable.from(() => {
+                if (this.getPanel(referenceGroup.id)) {
+                    this.movingLock(() => moveGroupWithoutDestroying({
+                        from: group,
+                        to: referenceGroup,
+                    }));
+                    if (referenceGroup.api.isHidden) {
+                        referenceGroup.api.setHidden(false);
+                    }
+                    if (this.getPanel(group.id)) {
+                        this.doRemoveGroup(group, {
+                            skipPopoutAssociated: true,
+                        });
+                    }
+                }
+                else {
+                    if (this.getPanel(group.id)) {
+                        const removedGroup = this.doRemoveGroup(group, {
+                            skipDispose: true,
+                            skipActive: true,
+                        });
+                        removedGroup.model.renderContainer =
+                            this.overlayRenderContainer;
+                        removedGroup.model.location = { type: 'grid' };
+                        returnedGroup = removedGroup;
+                    }
+                }
+            }));
+            this._popoutGroups.push(value);
+            this.updateWatermark();
+        })
+            .catch((err) => {
+            console.error(err);
         });
-        popoutWindow.addDisposables({
-            dispose: () => {
-                remove(this._popoutGroups, popoutWindow);
-                this.updateWatermark();
-            },
-        }, popoutWindow.window.onDidClose(() => {
-            this.doAddGroup(group, [0]);
-        }));
-        this._popoutGroups.push(popoutWindow);
-        this.updateWatermark();
     }
     addFloatingGroup(item, coord, options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         let group;
         if (item instanceof DockviewPanel) {
             group = this.createGroup();
-            this.removePanel(item, {
+            this._onDidAddGroup.fire(group);
+            this.movingLock(() => this.removePanel(item, {
                 removeEmptyGroup: true,
                 skipDispose: true,
-            });
-            group.model.openPanel(item);
+                skipSetActiveGroup: true,
+            }));
+            group.model.openPanel(item, { skipSetGroupActive: true });
         }
         else {
             group = item;
+            const popoutReferenceGroupId = (_a = this._popoutGroups.find((_) => _.popoutGroup === group)) === null || _a === void 0 ? void 0 : _a.referenceGroup;
+            const popoutReferenceGroup = popoutReferenceGroupId
+                ? this.getPanel(popoutReferenceGroupId)
+                : undefined;
             const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
                 options.skipRemoveGroup;
             if (!skip) {
-                this.doRemoveGroup(item, { skipDispose: true });
+                if (popoutReferenceGroup) {
+                    this.movingLock(() => moveGroupWithoutDestroying({
+                        from: item,
+                        to: popoutReferenceGroup,
+                    }));
+                    this.doRemoveGroup(item, {
+                        skipPopoutReturn: true,
+                        skipPopoutAssociated: true,
+                    });
+                    this.doRemoveGroup(popoutReferenceGroup, {
+                        skipDispose: true,
+                    });
+                    group = popoutReferenceGroup;
+                }
+                else {
+                    this.doRemoveGroup(item, {
+                        skipDispose: true,
+                        skipPopoutReturn: true,
+                        skipPopoutAssociated: !!popoutReferenceGroup,
+                    });
+                }
             }
         }
-        group.model.location = 'floating';
+        group.model.location = { type: 'floating' };
         const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number'
             ? Math.max(coord.x, 0)
             : DEFAULT_FLOATING_GROUP_POSITION.left;
@@ -6771,16 +7333,16 @@ class DockviewComponent extends BaseGrid {
         const overlay = new Overlay({
             container: this.gridview.element,
             content: group.element,
-            height: (_a = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _a !== void 0 ? _a : 300,
-            width: (_b = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _b !== void 0 ? _b : 300,
+            height: (_b = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _b !== void 0 ? _b : 300,
+            width: (_c = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _c !== void 0 ? _c : 300,
             left: overlayLeft,
             top: overlayTop,
             minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : (_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+                : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumWidthWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
             minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+                : (_g = (_f = this.options.floatingGroupBounds) === null || _f === void 0 ? void 0 : _f.minimumHeightWithinViewport) !== null && _g !== void 0 ? _g : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
         });
         const el = group.element.querySelector('.void-container');
         if (!el) {
@@ -6811,12 +7373,15 @@ class DockviewComponent extends BaseGrid {
         }), {
             dispose: () => {
                 disposable.dispose();
-                group.model.location = 'grid';
+                group.model.location = { type: 'grid' };
                 remove(this._floatingGroups, floatingGroupPanel);
                 this.updateWatermark();
             },
         });
         this._floatingGroups.push(floatingGroupPanel);
+        if (!(options === null || options === void 0 ? void 0 : options.skipActiveGroup)) {
+            this.doSetGroupAndPanelActive(group);
+        }
         this.updateWatermark();
     }
     orthogonalize(position) {
@@ -6906,8 +7471,8 @@ class DockviewComponent extends BaseGrid {
         return this.panels.find((panel) => panel.id === id);
     }
     setActivePanel(panel) {
-        this.doSetGroupActive(panel.group);
         panel.group.model.openPanel(panel);
+        this.doSetGroupAndPanelActive(panel.group);
     }
     moveToNext(options = {}) {
         var _a;
@@ -6968,7 +7533,8 @@ class DockviewComponent extends BaseGrid {
         });
         const popoutGroups = this._popoutGroups.map((group) => {
             return {
-                data: group.group.toJSON(),
+                data: group.popoutGroup.toJSON(),
+                gridReferenceGroup: group.referenceGroup,
                 position: group.window.dimensions(),
             };
         });
@@ -6986,7 +7552,7 @@ class DockviewComponent extends BaseGrid {
         return result;
     }
     fromJSON(data) {
-        var _a, _b;
+        var _a, _b, _c;
         this.clear();
         if (typeof data !== 'object' || data === null) {
             throw new Error('serialized layout must be a non-null object');
@@ -7025,7 +7591,7 @@ class DockviewComponent extends BaseGrid {
                     const isActive = typeof activeView === 'string' &&
                         activeView === panel.id;
                     group.model.openPanel(panel, {
-                        skipSetPanelActive: !isActive,
+                        skipSetActive: !isActive,
                         skipSetGroupActive: true,
                     });
                 }
@@ -7055,11 +7621,16 @@ class DockviewComponent extends BaseGrid {
             }
             const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
             for (const serializedPopoutGroup of serializedPopoutGroups) {
-                const { data, position } = serializedPopoutGroup;
+                const { data, position, gridReferenceGroup } = serializedPopoutGroup;
                 const group = createGroupFromSerializedState(data);
-                this.addPopoutGroup(group, {
+                this.addPopoutGroup((_c = (gridReferenceGroup
+                    ? this.getPanel(gridReferenceGroup)
+                    : undefined)) !== null && _c !== void 0 ? _c : group, {
                     skipRemoveGroup: true,
                     position: position !== null && position !== void 0 ? position : undefined,
+                    overridePopoutGroup: gridReferenceGroup
+                        ? group
+                        : undefined,
                 });
             }
             for (const floatingGroup of this._floatingGroups) {
@@ -7106,12 +7677,13 @@ class DockviewComponent extends BaseGrid {
              */
             throw err;
         }
+        this.updateWatermark();
         this._onDidLayoutFromJSON.fire();
     }
     clear() {
         const groups = Array.from(this._groups.values()).map((_) => _.value);
         const hasActiveGroup = !!this.activeGroup;
-        const hasActivePanel = !!this.activePanel;
+        !!this.activePanel;
         for (const group of groups) {
             // remove the group will automatically remove the panels
             this.removeGroup(group, { skipActive: true });
@@ -7119,9 +7691,6 @@ class DockviewComponent extends BaseGrid {
         if (hasActiveGroup) {
             this.doSetGroupAndPanelActive(undefined);
         }
-        if (hasActivePanel) {
-            this._onDidActivePanelChange.fire(undefined);
-        }
         this.gridview.clear();
     }
     closeAllGroups() {
@@ -7162,6 +7731,7 @@ class DockviewComponent extends BaseGrid {
                 const group = this.orthogonalize(directionToPosition(options.position.direction));
                 const panel = this.createPanel(options, group);
                 group.model.openPanel(panel);
+                this.doSetGroupAndPanelActive(group);
                 return panel;
             }
         }
@@ -7173,6 +7743,7 @@ class DockviewComponent extends BaseGrid {
             const target = toTarget(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
             if (options.floating) {
                 const group = this.createGroup();
+                this._onDidAddGroup.fire(group);
                 const o = typeof options.floating === 'object' &&
                     options.floating !== null
                     ? options.floating
@@ -7180,16 +7751,16 @@ class DockviewComponent extends BaseGrid {
                 this.addFloatingGroup(group, o, {
                     inDragMode: false,
                     skipRemoveGroup: true,
+                    skipActiveGroup: true,
                 });
-                this._onDidAddGroup.fire(group);
                 panel = this.createPanel(options, group);
                 group.model.openPanel(panel);
-                this.doSetGroupAndPanelActive(group);
             }
-            else if (referenceGroup.api.location === 'floating' ||
+            else if (referenceGroup.api.location.type === 'floating' ||
                 target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
                 referenceGroup.model.openPanel(panel);
+                this.doSetGroupAndPanelActive(referenceGroup);
             }
             else {
                 const location = getGridLocation(referenceGroup.element);
@@ -7197,10 +7768,12 @@ class DockviewComponent extends BaseGrid {
                 const group = this.createGroupAtLocation(relativeLocation);
                 panel = this.createPanel(options, group);
                 group.model.openPanel(panel);
+                this.doSetGroupAndPanelActive(group);
             }
         }
         else if (options.floating) {
             const group = this.createGroup();
+            this._onDidAddGroup.fire(group);
             const o = typeof options.floating === 'object' &&
                 options.floating !== null
                 ? options.floating
@@ -7208,16 +7781,16 @@ class DockviewComponent extends BaseGrid {
             this.addFloatingGroup(group, o, {
                 inDragMode: false,
                 skipRemoveGroup: true,
+                skipActiveGroup: true,
             });
-            this._onDidAddGroup.fire(group);
             panel = this.createPanel(options, group);
             group.model.openPanel(panel);
-            this.doSetGroupAndPanelActive(group);
         }
         else {
             const group = this.createGroupAtLocation();
             panel = this.createPanel(options, group);
             group.model.openPanel(panel);
+            this.doSetGroupAndPanelActive(group);
         }
         return panel;
     }
@@ -7229,13 +7802,15 @@ class DockviewComponent extends BaseGrid {
         if (!group) {
             throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
         }
-        group.model.removePanel(panel);
+        group.model.removePanel(panel, {
+            skipSetActiveGroup: options.skipSetActiveGroup,
+        });
         if (!options.skipDispose) {
-            this.overlayRenderContainer.detatch(panel);
+            panel.group.model.renderContainer.detatch(panel);
             panel.dispose();
         }
         if (group.size === 0 && options.removeEmptyGroup) {
-            this.removeGroup(group);
+            this.removeGroup(group, { skipActive: options.skipSetActiveGroup });
         }
     }
     createWatermarkComponent() {
@@ -7248,7 +7823,7 @@ class DockviewComponent extends BaseGrid {
     }
     updateWatermark() {
         var _a, _b;
-        if (this.groups.filter((x) => x.api.location === 'grid').length === 0) {
+        if (this.groups.filter((x) => x.api.location.type === 'grid' && !x.api.isHidden).length === 0) {
             if (!this.watermark) {
                 this.watermark = this.createWatermarkComponent();
                 this.watermark.init({
@@ -7294,36 +7869,42 @@ class DockviewComponent extends BaseGrid {
             }
             else {
                 const group = this.orthogonalize(directionToPosition(options.direction));
+                if (!options.skipSetActive) {
+                    this.doSetGroupAndPanelActive(group);
+                }
                 return group;
             }
             const target = toTarget(options.direction || 'within');
             const location = getGridLocation(referenceGroup.element);
             const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
             this.doAddGroup(group, relativeLocation);
+            if (!options.skipSetActive) {
+                this.doSetGroupAndPanelActive(group);
+            }
             return group;
         }
         else {
             this.doAddGroup(group);
+            this.doSetGroupAndPanelActive(group);
             return group;
         }
     }
     removeGroup(group, options) {
+        this.doRemoveGroup(group, options);
+    }
+    doRemoveGroup(group, options) {
         var _a;
         const panels = [...group.panels]; // reassign since group panels will mutate
-        for (const panel of panels) {
-            this.removePanel(panel, {
-                removeEmptyGroup: false,
-                skipDispose: (_a = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _a !== void 0 ? _a : false,
-            });
+        if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+            for (const panel of panels) {
+                this.removePanel(panel, {
+                    removeEmptyGroup: false,
+                    skipDispose: (_a = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _a !== void 0 ? _a : false,
+                });
+            }
         }
         const activePanel = this.activePanel;
-        this.doRemoveGroup(group, options);
-        if (this.activePanel !== activePanel) {
-            this._onDidActivePanelChange.fire(this.activePanel);
-        }
-    }
-    doRemoveGroup(group, options) {
-        if (group.api.location === 'floating') {
+        if (group.api.location.type === 'floating') {
             const floatingGroup = this._floatingGroups.find((_) => _.group === group);
             if (floatingGroup) {
                 if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
@@ -7335,60 +7916,124 @@ class DockviewComponent extends BaseGrid {
                 floatingGroup.dispose();
                 if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
                     const groups = Array.from(this._groups.values());
-                    this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+                    this.doSetGroupAndPanelActive(groups.length > 0 ? groups[0].value : undefined);
                 }
                 return floatingGroup.group;
             }
             throw new Error('failed to find floating group');
         }
-        if (group.api.location === 'popout') {
-            const selectedGroup = this._popoutGroups.find((_) => _.group === group);
+        if (group.api.location.type === 'popout') {
+            const selectedGroup = this._popoutGroups.find((_) => _.popoutGroup === group);
             if (selectedGroup) {
                 if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
-                    selectedGroup.group.dispose();
+                    if (!(options === null || options === void 0 ? void 0 : options.skipPopoutAssociated)) {
+                        const refGroup = selectedGroup.referenceGroup
+                            ? this.getPanel(selectedGroup.referenceGroup)
+                            : undefined;
+                        if (refGroup) {
+                            this.removeGroup(refGroup);
+                        }
+                    }
+                    selectedGroup.popoutGroup.dispose();
                     this._groups.delete(group.id);
                     this._onDidRemoveGroup.fire(group);
                 }
-                selectedGroup.dispose();
+                const removedGroup = selectedGroup.disposable.dispose();
+                if (!(options === null || options === void 0 ? void 0 : options.skipPopoutReturn) && removedGroup) {
+                    this.doAddGroup(removedGroup, [0]);
+                    this.doSetGroupAndPanelActive(removedGroup);
+                }
                 if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
                     const groups = Array.from(this._groups.values());
-                    this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+                    this.doSetGroupAndPanelActive(groups.length > 0 ? groups[0].value : undefined);
                 }
-                return selectedGroup.group;
+                this.updateWatermark();
+                return selectedGroup.popoutGroup;
             }
             throw new Error('failed to find popout group');
         }
-        return super.doRemoveGroup(group, options);
+        const re = super.doRemoveGroup(group, options);
+        if (!(options === null || options === void 0 ? void 0 : options.skipActive)) {
+            if (this.activePanel !== activePanel) {
+                this._onDidActivePanelChange.fire(this.activePanel);
+            }
+        }
+        return re;
     }
-    moveGroupOrPanel(destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
-        var _a, _b, _c;
+    movingLock(func) {
+        const isMoving = this._moving;
+        try {
+            this._moving = true;
+            return func();
+        }
+        finally {
+            this._moving = isMoving;
+        }
+    }
+    moveGroupOrPanel(options) {
+        var _a;
+        const destinationGroup = options.to.group;
+        const sourceGroupId = options.from.groupId;
+        const sourceItemId = options.from.panelId;
+        const destinationTarget = options.to.position;
+        const destinationIndex = options.to.index;
         const sourceGroup = sourceGroupId
             ? (_a = this._groups.get(sourceGroupId)) === null || _a === void 0 ? void 0 : _a.value
             : undefined;
+        if (!sourceGroup) {
+            throw new Error(`Failed to find group id ${sourceGroupId}`);
+        }
         if (sourceItemId === undefined) {
-            if (sourceGroup) {
-                this.moveGroup(sourceGroup, destinationGroup, destinationTarget);
-            }
+            /**
+             * Moving an entire group into another group
+             */
+            this.moveGroup({
+                from: { group: sourceGroup },
+                to: {
+                    group: destinationGroup,
+                    position: destinationTarget,
+                },
+            });
             return;
         }
         if (!destinationTarget || destinationTarget === 'center') {
-            const groupItem = (_b = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) !== null && _b !== void 0 ? _b : this.panels.find((panel) => panel.id === sourceItemId);
-            if (!groupItem) {
+            /**
+             * Dropping a panel within another group
+             */
+            const removedPanel = this.movingLock(() => sourceGroup.model.removePanel(sourceItemId, {
+                skipSetActive: false,
+                skipSetActiveGroup: true,
+            }));
+            if (!removedPanel) {
                 throw new Error(`No panel with id ${sourceItemId}`);
             }
-            if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
-                this.doRemoveGroup(sourceGroup);
+            if (sourceGroup.model.size === 0) {
+                // remove the group and do not set a new group as active
+                this.doRemoveGroup(sourceGroup, { skipActive: true });
             }
-            destinationGroup.model.openPanel(groupItem, {
+            this.movingLock(() => destinationGroup.model.openPanel(removedPanel, {
                 index: destinationIndex,
+                skipSetGroupActive: true,
+            }));
+            this.doSetGroupAndPanelActive(destinationGroup);
+            this._onDidMovePanel.fire({
+                panel: removedPanel,
             });
         }
         else {
+            /**
+             * Dropping a panel to the extremities of a group which will place that panel
+             * into an adjacent group
+             */
             const referenceLocation = getGridLocation(destinationGroup.element);
             const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
-            if (sourceGroup && sourceGroup.size < 2) {
+            if (sourceGroup.size < 2) {
+                /**
+                 * If we are moving from a group which only has one panel left we will consider
+                 * moving the group itself rather than moving the panel into a newly created group
+                 */
                 const [targetParentLocation, to] = tail(targetLocation);
-                if (sourceGroup.api.location === 'grid') {
+                if (sourceGroup.api.location.type === 'grid') {
                     const sourceLocation = getGridLocation(sourceGroup.element);
                     const [sourceParentLocation, from] = tail(sourceLocation);
                     if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
@@ -7396,78 +8041,123 @@ class DockviewComponent extends BaseGrid {
                         // if a group has one tab - we are essentially moving the 'group'
                         // which is equivalent to swapping two views in this case
                         this.gridview.moveView(sourceParentLocation, from, to);
+                        return;
                     }
                 }
                 // source group will become empty so delete the group
-                const targetGroup = this.doRemoveGroup(sourceGroup, {
+                const targetGroup = this.movingLock(() => this.doRemoveGroup(sourceGroup, {
                     skipActive: true,
                     skipDispose: true,
-                });
+                }));
                 // after deleting the group we need to re-evaulate the ref location
                 const updatedReferenceLocation = getGridLocation(destinationGroup.element);
                 const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
-                this.doAddGroup(targetGroup, location);
+                this.movingLock(() => this.doAddGroup(targetGroup, location));
+                this.doSetGroupAndPanelActive(targetGroup);
             }
             else {
-                const groupItem = (_c = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) !== null && _c !== void 0 ? _c : this.panels.find((panel) => panel.id === sourceItemId);
-                if (!groupItem) {
+                /**
+                 * The group we are removing from has many panels, we need to remove the panels we are moving,
+                 * create a new group, add the panels to that new group and add the new group in an appropiate position
+                 */
+                const removedPanel = this.movingLock(() => sourceGroup.model.removePanel(sourceItemId, {
+                    skipSetActive: false,
+                    skipSetActiveGroup: true,
+                }));
+                if (!removedPanel) {
                     throw new Error(`No panel with id ${sourceItemId}`);
                 }
                 const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
                 const group = this.createGroupAtLocation(dropLocation);
-                group.model.openPanel(groupItem);
+                this.movingLock(() => group.model.openPanel(removedPanel, {
+                    skipSetGroupActive: true,
+                }));
+                this.doSetGroupAndPanelActive(group);
             }
         }
     }
-    moveGroup(sourceGroup, referenceGroup, target) {
-        if (sourceGroup) {
-            if (!target || target === 'center') {
-                const activePanel = sourceGroup.activePanel;
-                const panels = [...sourceGroup.panels].map((p) => sourceGroup.model.removePanel(p.id));
-                if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
-                    this.doRemoveGroup(sourceGroup);
-                }
+    moveGroup(options) {
+        const from = options.from.group;
+        const to = options.to.group;
+        const target = options.to.position;
+        if (target === 'center') {
+            const activePanel = from.activePanel;
+            const panels = this.movingLock(() => [...from.panels].map((p) => from.model.removePanel(p.id, {
+                skipSetActive: true,
+            })));
+            if ((from === null || from === void 0 ? void 0 : from.model.size) === 0) {
+                this.doRemoveGroup(from, { skipActive: true });
+            }
+            this.movingLock(() => {
                 for (const panel of panels) {
-                    referenceGroup.model.openPanel(panel, {
-                        skipSetPanelActive: panel !== activePanel,
+                    to.model.openPanel(panel, {
+                        skipSetActive: panel !== activePanel,
+                        skipSetGroupActive: true,
                     });
                 }
-            }
-            else {
-                switch (sourceGroup.api.location) {
-                    case 'grid':
-                        this.gridview.removeView(getGridLocation(sourceGroup.element));
-                        break;
-                    case 'floating': {
-                        const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === sourceGroup);
-                        if (!selectedFloatingGroup) {
-                            throw new Error('failed to find floating group');
-                        }
-                        selectedFloatingGroup.dispose();
-                        break;
+            });
+            this.doSetGroupAndPanelActive(to);
+            panels.forEach((panel) => {
+                this._onDidMovePanel.fire({ panel });
+            });
+        }
+        else {
+            switch (from.api.location.type) {
+                case 'grid':
+                    this.gridview.removeView(getGridLocation(from.element));
+                    break;
+                case 'floating': {
+                    const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === from);
+                    if (!selectedFloatingGroup) {
+                        throw new Error('failed to find floating group');
                     }
-                    case 'popout': {
-                        const selectedPopoutGroup = this._popoutGroups.find((x) => x.group === sourceGroup);
-                        if (!selectedPopoutGroup) {
-                            throw new Error('failed to find popout group');
-                        }
-                        selectedPopoutGroup.dispose();
+                    selectedFloatingGroup.dispose();
+                    break;
+                }
+                case 'popout': {
+                    const selectedPopoutGroup = this._popoutGroups.find((x) => x.popoutGroup === from);
+                    if (!selectedPopoutGroup) {
+                        throw new Error('failed to find popout group');
                     }
+                    selectedPopoutGroup.disposable.dispose();
                 }
-                const referenceLocation = getGridLocation(referenceGroup.element);
-                const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
-                this.gridview.addView(sourceGroup, exports.Sizing.Distribute, dropLocation);
             }
+            const referenceLocation = getGridLocation(to.element);
+            const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+            this.gridview.addView(from, exports.Sizing.Distribute, dropLocation);
+            from.panels.forEach((panel) => {
+                this._onDidMovePanel.fire({ panel });
+            });
         }
     }
-    doSetGroupAndPanelActive(group, skipFocus) {
-        var _a, _b;
+    doSetGroupActive(group) {
+        super.doSetGroupActive(group);
+        const activePanel = this.activePanel;
+        if (!this._moving &&
+            activePanel !== this._onDidActivePanelChange.value) {
+            this._onDidActivePanelChange.fire(activePanel);
+        }
+    }
+    doSetGroupAndPanelActive(group) {
+        super.doSetGroupActive(group);
         const activePanel = this.activePanel;
-        super.doSetGroupActive(group, skipFocus);
-        if (((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.activePanel) !== activePanel) {
-            this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.activePanel);
+        if (group &&
+            this.hasMaximizedGroup() &&
+            !this.isMaximizedGroup(group)) {
+            this.exitMaximizedGroup();
+        }
+        if (!this._moving &&
+            activePanel !== this._onDidActivePanelChange.value) {
+            this._onDidActivePanelChange.fire(activePanel);
         }
     }
+    getNextGroupId() {
+        let id = this.nextGroupId.next();
+        while (this._groups.has(id)) {
+            id = this.nextGroupId.next();
+        }
+        return id;
+    }
     createGroup(options) {
         if (!options) {
             options = {};
@@ -7484,7 +8174,7 @@ class DockviewComponent extends BaseGrid {
             }
         }
         const view = new DockviewGroupPanel(this, id, options);
-        view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group
+        view.init({ params: {}, accessor: this });
         if (!this._groups.has(view.id)) {
             const disposable = new CompositeDisposable(view.model.onTabDragStart((event) => {
                 this._onWillDragPanel.fire(event);
@@ -7492,20 +8182,48 @@ class DockviewComponent extends BaseGrid {
                 this._onWillDragGroup.fire(event);
             }), view.model.onMove((event) => {
                 const { groupId, itemId, target, index } = event;
-                this.moveGroupOrPanel(view, groupId, itemId, target, index);
+                this.moveGroupOrPanel({
+                    from: { groupId: groupId, panelId: itemId },
+                    to: {
+                        group: view,
+                        position: target,
+                        index,
+                    },
+                });
             }), view.model.onDidDrop((event) => {
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: view }));
+                this._onDidDrop.fire(event);
+            }), view.model.onWillDrop((event) => {
+                this._onWillDrop.fire(event);
+            }), view.model.onWillShowOverlay((event) => {
+                if (this.options.disableDnd) {
+                    event.preventDefault();
+                    return;
+                }
+                this._onWillShowOverlay.fire(event);
             }), view.model.onDidAddPanel((event) => {
+                if (this._moving) {
+                    return;
+                }
                 this._onDidAddPanel.fire(event.panel);
             }), view.model.onDidRemovePanel((event) => {
+                if (this._moving) {
+                    return;
+                }
                 this._onDidRemovePanel.fire(event.panel);
             }), view.model.onDidActivePanelChange((event) => {
-                this._onDidActivePanelChange.fire(event.panel);
+                if (this._moving) {
+                    return;
+                }
+                if (event.panel !== this.activePanel) {
+                    return;
+                }
+                if (this._onDidActivePanelChange.value !== event.panel) {
+                    this._onDidActivePanelChange.fire(event.panel);
+                }
             }));
             this._groups.set(view.id, { value: view, disposable });
         }
-        // TODO: must be called after the above listeners have been setup,
-        // not an ideal pattern
+        // TODO: must be called after the above listeners have been setup, not an ideal pattern
         view.initialize();
         return view;
     }
@@ -7558,7 +8276,20 @@ class GridviewComponent extends BaseGrid {
         });
         this._onDidLayoutfromJSON = new Emitter();
         this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
+        this._onDidRemoveGroup = new Emitter();
+        this.onDidRemoveGroup = this._onDidRemoveGroup.event;
+        this._onDidAddGroup = new Emitter();
+        this.onDidAddGroup = this._onDidAddGroup.event;
+        this._onDidActiveGroupChange = new Emitter();
+        this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
         this._options = options;
+        this.addDisposables(this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this.onDidAdd((event) => {
+            this._onDidAddGroup.fire(event);
+        }), this.onDidRemove((event) => {
+            this._onDidRemoveGroup.fire(event);
+        }), this.onDidActiveChange((event) => {
+            this._onDidActiveGroupChange.fire(event);
+        }));
         if (!this.options.components) {
             this.options.components = {};
         }
@@ -7733,6 +8464,7 @@ class GridviewComponent extends BaseGrid {
         });
         this.registerPanel(view);
         this.doAddGroup(view, relativeLocation, options.size);
+        this.doSetGroupActive(view);
         return view;
     }
     registerPanel(panel) {
@@ -8418,10 +9150,10 @@ class SplitviewPanel extends BasePanelView {
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
         this.api.initialize(this);
-        this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
-            const { isVisible } = event;
+        this.addDisposables(this._onDidChange, this.api.onDidHiddenChange((event) => {
+            const { isHidden } = event;
             const { accessor } = this._params;
-            accessor.setVisible(this, isVisible);
+            accessor.setVisible(this, !isHidden);
         }), this.api.onActiveChange(() => {
             const { accessor } = this._params;
             accessor.setActive(this);
@@ -8487,11 +9219,13 @@ exports.DefaultTab = DefaultTab;
 exports.DockviewApi = DockviewApi;
 exports.DockviewComponent = DockviewComponent;
 exports.DockviewCompositeDisposable = CompositeDisposable;
+exports.DockviewDidDropEvent = DockviewDidDropEvent;
 exports.DockviewEmitter = Emitter;
 exports.DockviewGroupPanel = DockviewGroupPanel;
 exports.DockviewGroupPanelModel = DockviewGroupPanelModel;
 exports.DockviewMutableDisposable = MutableDisposable;
 exports.DockviewPanel = DockviewPanel;
+exports.DockviewWillDropEvent = DockviewWillDropEvent;
 exports.DraggablePaneviewPanel = DraggablePaneviewPanel;
 exports.Gridview = Gridview;
 exports.GridviewApi = GridviewApi;
@@ -8510,6 +9244,7 @@ exports.SplitviewApi = SplitviewApi;
 exports.SplitviewComponent = SplitviewComponent;
 exports.SplitviewPanel = SplitviewPanel;
 exports.Tab = Tab;
+exports.WillShowOverlayLocationEvent = WillShowOverlayLocationEvent;
 exports.createComponent = createComponent;
 exports.directionToPosition = directionToPosition;
 exports.getDirectionOrientation = getDirectionOrientation;