dockview-core 1.8.5 → 1.9.1

package/dist/dockview-core.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 1.8.5
+ * @version 1.9.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -33,7 +33,7 @@ define(['exports'], (function (exports) { 'use strict';
     }
   }
 
-  var css_248z = ".dockview-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-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.small-top {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-bottom {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-left {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.small-right {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-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\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  overflow: hidden;\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:active {\n  transition: background-color 0.1s ease-in-out;\n  background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:hover {\n  background-color: var(--dv-active-sash-color, transparent);\n  transition: background-color 0.1s ease-in-out;\n  transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  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.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-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}";
   styleInject(css_248z);
 
   class TransferObject {
@@ -262,6 +262,14 @@ define(['exports'], (function (exports) { 'use strict';
               // noop
           },
       };
+      function from(func) {
+          return {
+              dispose: () => {
+                  func();
+              },
+          };
+      }
+      Disposable.from = from;
   })(Disposable || (Disposable = {}));
   class CompositeDisposable {
       get isDisposed() {
@@ -446,6 +454,61 @@ define(['exports'], (function (exports) { 'use strict';
   function quasiDefaultPrevented(event) {
       return event[QUASI_PREVENT_DEFAULT_KEY];
   }
+  function addStyles(document, styleSheetList) {
+      const styleSheets = Array.from(styleSheetList);
+      for (const styleSheet of styleSheets) {
+          if (styleSheet.href) {
+              const link = document.createElement('link');
+              link.href = styleSheet.href;
+              link.type = styleSheet.type;
+              link.rel = 'stylesheet';
+              document.head.appendChild(link);
+          }
+          let cssTexts = [];
+          try {
+              if (styleSheet.cssRules) {
+                  cssTexts = Array.from(styleSheet.cssRules).map((rule) => rule.cssText);
+              }
+          }
+          catch (err) {
+              // security errors (lack of permissions), ignore
+          }
+          for (const rule of cssTexts) {
+              const style = document.createElement('style');
+              style.appendChild(document.createTextNode(rule));
+              document.head.appendChild(style);
+          }
+      }
+  }
+  function getDomNodePagePosition(domNode) {
+      const { left, top, width, height } = domNode.getBoundingClientRect();
+      return {
+          left: left + window.scrollX,
+          top: top + window.scrollY,
+          width: width,
+          height: height,
+      };
+  }
+  /**
+   * Check whether an element is in the DOM (including the Shadow DOM)
+   * @see https://terodox.tech/how-to-tell-if-an-element-is-in-the-dom-including-the-shadow-dom/
+   */
+  function isInDocument(element) {
+      let currentElement = element;
+      while (currentElement === null || currentElement === void 0 ? void 0 : currentElement.parentNode) {
+          if (currentElement.parentNode === document) {
+              return true;
+          }
+          else if (currentElement.parentNode instanceof DocumentFragment) {
+              // handle shadow DOMs
+              currentElement = currentElement.parentNode.host;
+          }
+          else {
+              currentElement = currentElement.parentNode;
+          }
+      }
+      return false;
+  }
 
   function tail(arr) {
       if (arr.length === 0) {
@@ -643,6 +706,9 @@ define(['exports'], (function (exports) { 'use strict';
       Sizing.Invisible = Invisible;
   })(exports.Sizing || (exports.Sizing = {}));
   class Splitview {
+      get contentSize() {
+          return this._contentSize;
+      }
       get size() {
           return this._size;
       }
@@ -708,7 +774,7 @@ define(['exports'], (function (exports) { 'use strict';
           this.sashes = [];
           this._size = 0;
           this._orthogonalSize = 0;
-          this.contentSize = 0;
+          this._contentSize = 0;
           this._proportions = undefined;
           this._startSnappingEnabled = true;
           this._endSnappingEnabled = true;
@@ -827,7 +893,7 @@ define(['exports'], (function (exports) { 'use strict';
                   );
               });
               // Initialize content size and proportions for first layout
-              this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
+              this._contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
               this.saveProportions();
           }
       }
@@ -1101,7 +1167,7 @@ define(['exports'], (function (exports) { 'use strict';
           this.addView(view, sizing, to);
       }
       layout(size, orthogonalSize) {
-          const previousSize = Math.max(this.size, this.contentSize);
+          const previousSize = Math.max(this.size, this._contentSize);
           this.size = size;
           this.orthogonalSize = orthogonalSize;
           if (!this.proportions) {
@@ -1111,9 +1177,23 @@ define(['exports'], (function (exports) { 'use strict';
               this.resize(this.viewItems.length - 1, size - previousSize, undefined, lowPriorityIndexes, highPriorityIndexes);
           }
           else {
+              let total = 0;
               for (let i = 0; i < this.viewItems.length; i++) {
                   const item = this.viewItems[i];
-                  item.size = clamp(Math.round(this.proportions[i] * size), item.minimumSize, item.maximumSize);
+                  const proportion = this.proportions[i];
+                  if (typeof proportion === 'number') {
+                      total += proportion;
+                  }
+                  else {
+                      size -= item.size;
+                  }
+              }
+              for (let i = 0; i < this.viewItems.length; i++) {
+                  const item = this.viewItems[i];
+                  const proportion = this.proportions[i];
+                  if (typeof proportion === 'number' && total > 0) {
+                      item.size = clamp(Math.round((proportion * size) / total), item.minimumSize, item.maximumSize);
+                  }
               }
           }
           this.distributeEmptySpace();
@@ -1150,12 +1230,12 @@ define(['exports'], (function (exports) { 'use strict';
           }
       }
       saveProportions() {
-          if (this.proportionalLayout && this.contentSize > 0) {
-              this._proportions = this.viewItems.map((i) => i.size / this.contentSize);
+          if (this.proportionalLayout && this._contentSize > 0) {
+              this._proportions = this.viewItems.map((i) => i.visible ? i.size / this._contentSize : undefined);
           }
       }
       layoutViews() {
-          this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
+          this._contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
           let sum = 0;
           const x = [];
           this.updateSashEnablement();
@@ -1249,7 +1329,7 @@ define(['exports'], (function (exports) { 'use strict';
                   }
                   else if (snappedAfter &&
                       collapsesDown[index] &&
-                      (position < this.contentSize || this.endSnappingEnabled)) {
+                      (position < this._contentSize || this.endSnappingEnabled)) {
                       this.updateSash(sash, exports.SashState.MAXIMUM);
                   }
                   else {
@@ -1538,7 +1618,6 @@ define(['exports'], (function (exports) { 'use strict';
       setVisible(visible) {
           if (this.view.setVisible) {
               this.view.setVisible(visible);
-              this._onDidChange.fire({});
           }
       }
       layout(size, orthogonalSize) {
@@ -1570,10 +1649,14 @@ define(['exports'], (function (exports) { 'use strict';
       get minimumSize() {
           return this.children.length === 0
               ? 0
-              : Math.max(...this.children.map((c) => c.minimumOrthogonalSize));
+              : Math.max(...this.children.map((c, index) => this.splitview.isViewVisible(index)
+                  ? c.minimumOrthogonalSize
+                  : 0));
       }
       get maximumSize() {
-          return Math.min(...this.children.map((c) => c.maximumOrthogonalSize));
+          return Math.min(...this.children.map((c, index) => this.splitview.isViewVisible(index)
+              ? c.maximumOrthogonalSize
+              : Number.POSITIVE_INFINITY));
       }
       get minimumOrthogonalSize() {
           return this.splitview.minimumSize;
@@ -1631,6 +1714,8 @@ define(['exports'], (function (exports) { 'use strict';
           this.children = [];
           this._onDidChange = new Emitter();
           this.onDidChange = this._onDidChange.event;
+          this._onDidVisibilityChange = new Emitter();
+          this.onDidVisibilityChange = this._onDidVisibilityChange.event;
           this._orthogonalSize = orthogonalSize;
           this._size = size;
           this.element = document.createElement('div');
@@ -1665,7 +1750,7 @@ define(['exports'], (function (exports) { 'use strict';
                   styles,
               });
           }
-          this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
+          this.addDisposables(this._onDidChange, this._onDidVisibilityChange, this.splitview.onDidSashEnd(() => {
               this._onDidChange.fire({});
           }));
           this.setupChildrenEvents();
@@ -1688,7 +1773,15 @@ define(['exports'], (function (exports) { 'use strict';
           if (this.splitview.isViewVisible(index) === visible) {
               return;
           }
+          const wereAllChildrenHidden = this.splitview.contentSize === 0;
           this.splitview.setViewVisible(index, visible);
+          const areAllChildrenHidden = this.splitview.contentSize === 0;
+          // If all children are hidden then the parent should hide the entire splitview
+          // If the entire splitview is hidden then the parent should show the splitview when a child is shown
+          if ((visible && wereAllChildrenHidden) ||
+              (!visible && areAllChildrenHidden)) {
+              this._onDidVisibilityChange.fire(visible);
+          }
       }
       moveChild(from, to) {
           if (from === to) {
@@ -1752,13 +1845,20 @@ define(['exports'], (function (exports) { 'use strict';
       }
       setupChildrenEvents() {
           this._childrenDisposable.dispose();
-          this._childrenDisposable = exports.DockviewEvent.any(...this.children.map((c) => c.onDidChange))((e) => {
+          this._childrenDisposable = new CompositeDisposable(exports.DockviewEvent.any(...this.children.map((c) => c.onDidChange))((e) => {
               /**
                * indicate a change has occured to allows any re-rendering but don't bubble
                * event because that was specific to this branch
                */
               this._onDidChange.fire({ size: e.orthogonalSize });
-          });
+          }), ...this.children.map((c, i) => {
+              if (c instanceof BranchNode) {
+                  return c.onDidVisibilityChange((visible) => {
+                      this.setChildVisible(i, visible);
+                  });
+              }
+              return Disposable.NONE;
+          }));
       }
       dispose() {
           this._childrenDisposable.dispose();
@@ -1919,7 +2019,69 @@ define(['exports'], (function (exports) { 'use strict';
       get maximumHeight() {
           return this.root.maximumHeight;
       }
+      maximizedView() {
+          var _a;
+          return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.view;
+      }
+      hasMaximizedView() {
+          return this._maximizedNode !== undefined;
+      }
+      maximizeView(view) {
+          const location = getGridLocation(view.element);
+          const [_, node] = this.getNode(location);
+          if (!(node instanceof LeafNode)) {
+              return;
+          }
+          if (this._maximizedNode === node) {
+              return;
+          }
+          if (this.hasMaximizedView()) {
+              this.exitMaximizedView();
+          }
+          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);
+                      }
+                  }
+                  else {
+                      hideAllViewsBut(child, exclude);
+                  }
+              }
+          }
+          hideAllViewsBut(this.root, node);
+          this._maximizedNode = node;
+          this._onDidMaxmizedNodeChange.fire();
+      }
+      exitMaximizedView() {
+          if (!this._maximizedNode) {
+              return;
+          }
+          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);
+                  }
+                  else {
+                      showViewsInReverseOrder(child);
+                  }
+              }
+          }
+          showViewsInReverseOrder(this.root);
+          this._maximizedNode = undefined;
+          this._onDidMaxmizedNodeChange.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
+               */
+              this.exitMaximizedView();
+          }
           const root = serializeBranchNode(this.getView(), this.orientation);
           return {
               root,
@@ -1931,7 +2093,9 @@ define(['exports'], (function (exports) { 'use strict';
       dispose() {
           this.disposable.dispose();
           this._onDidChange.dispose();
+          this._onDidMaxmizedNodeChange.dispose();
           this.root.dispose();
+          this._maximizedNode = undefined;
           this.element.remove();
       }
       clear() {
@@ -1972,6 +2136,7 @@ define(['exports'], (function (exports) { 'use strict';
           const oldRoot = this._root;
           if (oldRoot) {
               oldRoot.dispose();
+              this._maximizedNode = undefined;
               this.element.removeChild(oldRoot.element);
           }
           this._root = root;
@@ -2058,9 +2223,12 @@ define(['exports'], (function (exports) { 'use strict';
       constructor(proportionalLayout, styles, orientation) {
           this.proportionalLayout = proportionalLayout;
           this.styles = styles;
+          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.element = document.createElement('div');
           this.element.className = 'grid-view';
           this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0);
@@ -2074,6 +2242,9 @@ define(['exports'], (function (exports) { 'use strict';
           return parent.isChildVisible(index);
       }
       setViewVisible(location, visible) {
+          if (this.hasMaximizedView()) {
+              this.exitMaximizedView();
+          }
           const [rest, index] = tail(location);
           const [, parent] = this.getNode(rest);
           if (!(parent instanceof BranchNode)) {
@@ -2082,6 +2253,9 @@ define(['exports'], (function (exports) { 'use strict';
           parent.setChildVisible(index, visible);
       }
       moveView(parentLocation, from, to) {
+          if (this.hasMaximizedView()) {
+              this.exitMaximizedView();
+          }
           const [, parent] = this.getNode(parentLocation);
           if (!(parent instanceof BranchNode)) {
               throw new Error('Invalid location');
@@ -2089,6 +2263,9 @@ define(['exports'], (function (exports) { 'use strict';
           parent.moveChild(from, to);
       }
       addView(view, size, location) {
+          if (this.hasMaximizedView()) {
+              this.exitMaximizedView();
+          }
           const [rest, index] = tail(location);
           const [pathToParent, parent] = this.getNode(rest);
           if (parent instanceof BranchNode) {
@@ -2121,6 +2298,9 @@ define(['exports'], (function (exports) { 'use strict';
           return this.removeView(location, sizing);
       }
       removeView(location, sizing) {
+          if (this.hasMaximizedView()) {
+              this.exitMaximizedView();
+          }
           const [rest, index] = tail(location);
           const [pathToParent, parent] = this.getNode(rest);
           if (!(parent instanceof BranchNode)) {
@@ -2858,6 +3038,24 @@ define(['exports'], (function (exports) { 'use strict';
       moveToPrevious(options) {
           this.component.moveToPrevious(options);
       }
+      maximizeGroup(panel) {
+          this.component.maximizeGroup(panel.group);
+      }
+      hasMaximizedGroup() {
+          return this.component.hasMaximizedGroup();
+      }
+      exitMaxmizedGroup() {
+          this.component.exitMaximizedGroup();
+      }
+      get onDidMaxmizedGroupChange() {
+          return this.component.onDidMaxmizedGroupChange;
+      }
+      /**
+       * Add a popout group in a new Window
+       */
+      addPopoutGroup(item, options) {
+          this.component.addPopoutGroup(item, options);
+      }
   }
 
   class DragAndDropObserver extends CompositeDisposable {
@@ -2868,36 +3066,48 @@ define(['exports'], (function (exports) { 'use strict';
           this.target = null;
           this.registerListeners();
       }
+      onDragEnter(e) {
+          this.target = e.target;
+          this.callbacks.onDragEnter(e);
+      }
+      onDragOver(e) {
+          e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
+          if (this.callbacks.onDragOver) {
+              this.callbacks.onDragOver(e);
+          }
+      }
+      onDragLeave(e) {
+          if (this.target === e.target) {
+              this.target = null;
+              this.callbacks.onDragLeave(e);
+          }
+      }
+      onDragEnd(e) {
+          this.target = null;
+          this.callbacks.onDragEnd(e);
+      }
+      onDrop(e) {
+          this.callbacks.onDrop(e);
+      }
       registerListeners() {
           this.addDisposables(addDisposableListener(this.element, 'dragenter', (e) => {
-              this.target = e.target;
-              this.callbacks.onDragEnter(e);
+              this.onDragEnter(e);
           }, true));
           this.addDisposables(addDisposableListener(this.element, 'dragover', (e) => {
-              e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
-              if (this.callbacks.onDragOver) {
-                  this.callbacks.onDragOver(e);
-              }
+              this.onDragOver(e);
           }, true));
           this.addDisposables(addDisposableListener(this.element, 'dragleave', (e) => {
-              if (this.target === e.target) {
-                  this.target = null;
-                  this.callbacks.onDragLeave(e);
-              }
+              this.onDragLeave(e);
           }));
           this.addDisposables(addDisposableListener(this.element, 'dragend', (e) => {
-              this.target = null;
-              this.callbacks.onDragEnd(e);
+              this.onDragEnd(e);
           }));
           this.addDisposables(addDisposableListener(this.element, 'drop', (e) => {
-              this.callbacks.onDrop(e);
+              this.onDrop(e);
           }));
       }
   }
 
-  function numberOrFallback(maybeNumber, fallback) {
-      return typeof maybeNumber === 'number' ? maybeNumber : fallback;
-  }
   function directionToPosition(direction) {
       switch (direction) {
           case 'above':
@@ -2930,6 +3140,16 @@ define(['exports'], (function (exports) { 'use strict';
               throw new Error(`invalid position '${position}'`);
       }
   }
+  const DEFAULT_ACTIVATION_SIZE = {
+      value: 20,
+      type: 'percentage',
+  };
+  const DEFAULT_SIZE = {
+      value: 50,
+      type: 'percentage',
+  };
+  const SMALL_WIDTH_BOUNDARY = 100;
+  const SMALL_HEIGHT_BOUNDARY = 100;
   class Droptarget extends CompositeDisposable {
       get state() {
           return this._state;
@@ -2942,7 +3162,7 @@ define(['exports'], (function (exports) { 'use strict';
           this.onDrop = this._onDrop.event;
           // use a set to take advantage of #<set>.has
           this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
-          this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
+          this.dnd = new DragAndDropObserver(this.element, {
               onDragEnter: () => undefined,
               onDragOver: (e) => {
                   if (this._acceptedTargetZonesSet.size === 0) {
@@ -2990,7 +3210,7 @@ define(['exports'], (function (exports) { 'use strict';
                       this.element.append(this.targetElement);
                   }
                   this.toggleClasses(quadrant, width, height);
-                  this.setState(quadrant);
+                  this._state = quadrant;
               },
               onDragLeave: () => {
                   this.removeDropTarget();
@@ -3009,11 +3229,15 @@ define(['exports'], (function (exports) { 'use strict';
                       this._onDrop.fire({ position: state, nativeEvent: e });
                   }
               },
-          }));
+          });
+          this.addDisposables(this._onDrop, this.dnd);
       }
       setTargetZones(acceptedTargetZones) {
           this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
       }
+      setOverlayModel(model) {
+          this.options.overlayModel = model;
+      }
       dispose() {
           this.removeDropTarget();
           super.dispose();
@@ -3025,19 +3249,19 @@ define(['exports'], (function (exports) { 'use strict';
           event[Droptarget.USED_EVENT_ID] = true;
       }
       /**
-       * Check is the event has already been used by another instance od DropTarget
+       * Check is the event has already been used by another instance of DropTarget
        */
       isAlreadyUsed(event) {
           const value = event[Droptarget.USED_EVENT_ID];
           return typeof value === 'boolean' && value;
       }
       toggleClasses(quadrant, width, height) {
-          var _a, _b, _c, _d;
+          var _a, _b;
           if (!this.overlayElement) {
               return;
           }
-          const isSmallX = width < 100;
-          const isSmallY = height < 100;
+          const isSmallX = width < SMALL_WIDTH_BOUNDARY;
+          const isSmallY = height < SMALL_HEIGHT_BOUNDARY;
           const isLeft = quadrant === 'left';
           const isRight = quadrant === 'right';
           const isTop = quadrant === 'top';
@@ -3046,20 +3270,17 @@ define(['exports'], (function (exports) { 'use strict';
           const leftClass = !isSmallX && isLeft;
           const topClass = !isSmallY && isTop;
           const bottomClass = !isSmallY && isBottom;
-          let size = 0.5;
-          if (((_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.type) === 'percentage') {
-              size = clamp(this.options.overlayModel.size.value, 0, 100) / 100;
+          let size = 1;
+          const sizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : DEFAULT_SIZE;
+          if (sizeOptions.type === 'percentage') {
+              size = clamp(sizeOptions.value, 0, 100) / 100;
           }
-          if (((_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) === null || _d === void 0 ? void 0 : _d.type) === 'pixels') {
+          else {
               if (rightClass || leftClass) {
-                  size =
-                      clamp(0, this.options.overlayModel.size.value, width) /
-                          width;
+                  size = clamp(0, sizeOptions.value, width) / width;
               }
               if (topClass || bottomClass) {
-                  size =
-                      clamp(0, this.options.overlayModel.size.value, height) /
-                          height;
+                  size = clamp(0, sizeOptions.value, height) / height;
               }
           }
           const translate = (1 - size) / 2;
@@ -3081,39 +3302,22 @@ define(['exports'], (function (exports) { 'use strict';
               transform = '';
           }
           this.overlayElement.style.transform = transform;
-          toggleClass(this.overlayElement, 'small-right', isSmallX && isRight);
-          toggleClass(this.overlayElement, 'small-left', isSmallX && isLeft);
-          toggleClass(this.overlayElement, 'small-top', isSmallY && isTop);
-          toggleClass(this.overlayElement, 'small-bottom', isSmallY && isBottom);
-      }
-      setState(quadrant) {
-          switch (quadrant) {
-              case 'top':
-                  this._state = 'top';
-                  break;
-              case 'left':
-                  this._state = 'left';
-                  break;
-              case 'bottom':
-                  this._state = 'bottom';
-                  break;
-              case 'right':
-                  this._state = 'right';
-                  break;
-              case 'center':
-                  this._state = 'center';
-                  break;
-          }
+          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);
+          toggleClass(this.overlayElement, 'dv-drop-target-right', isRight);
+          toggleClass(this.overlayElement, 'dv-drop-target-top', isTop);
+          toggleClass(this.overlayElement, 'dv-drop-target-bottom', isBottom);
+          toggleClass(this.overlayElement, 'dv-drop-target-center', quadrant === 'center');
       }
       calculateQuadrant(overlayType, x, y, width, height) {
-          var _a, _b, _c, _d, _e, _f;
-          const isPercentage = ((_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) === undefined ||
-              ((_c = (_b = this.options.overlayModel) === null || _b === void 0 ? void 0 : _b.activationSize) === null || _c === void 0 ? void 0 : _c.type) === 'percentage';
-          const value = numberOrFallback((_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.overlayModel) === null || _e === void 0 ? void 0 : _e.activationSize) === null || _f === void 0 ? void 0 : _f.value, 20);
+          var _a, _b;
+          const activationSizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) !== null && _b !== void 0 ? _b : DEFAULT_ACTIVATION_SIZE;
+          const isPercentage = activationSizeOptions.type === 'percentage';
           if (isPercentage) {
-              return calculateQuadrantAsPercentage(overlayType, x, y, width, height, value);
+              return calculateQuadrantAsPercentage(overlayType, x, y, width, height, activationSizeOptions.value);
           }
-          return calculateQuadrantAsPixels(overlayType, x, y, width, height, value);
+          return calculateQuadrantAsPixels(overlayType, x, y, width, height, activationSizeOptions.value);
       }
       removeDropTarget() {
           if (this.targetElement) {
@@ -3165,12 +3369,22 @@ define(['exports'], (function (exports) { 'use strict';
       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;
       }
-      constructor() {
+      constructor(accessor, group) {
           super();
+          this.accessor = accessor;
+          this.group = group;
           this.disposable = new MutableDisposable();
           this._onDidFocus = new Emitter();
           this.onDidFocus = this._onDidFocus.event;
@@ -3180,11 +3394,38 @@ define(['exports'], (function (exports) { 'use strict';
           this._element.className = 'content-container';
           this._element.tabIndex = -1;
           this.addDisposables(this._onDidFocus, this._onDidBlur);
-          // for hosted containers
-          // 1) register a drop target on the host
-          // 2) register window dragStart events to disable pointer events
-          // 3) register dragEnd events
-          // 4) register mouseMove events (if no buttons are present we take this as a dragEnd event)
+          this.dropTarget = new Droptarget(this.element, {
+              acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
+              canDisplayOverlay: (event, position) => {
+                  if (this.group.locked === 'no-drop-target' ||
+                      (this.group.locked && position === 'center')) {
+                      return false;
+                  }
+                  const data = getPanelData();
+                  if (!data &&
+                      event.shiftKey &&
+                      this.group.location !== 'floating') {
+                      return false;
+                  }
+                  if (data && data.viewId === this.accessor.id) {
+                      if (data.groupId === this.group.id) {
+                          if (position === 'center') {
+                              // don't allow to drop on self for center position
+                              return false;
+                          }
+                          if (data.panelId === null) {
+                              // don't allow group move to drop anywhere on self
+                              return false;
+                          }
+                      }
+                      const groupHasOnePanelAndIsActiveDragElement = this.group.panels.length === 1 &&
+                          data.groupId === this.group.id;
+                      return !groupHasOnePanelAndIsActiveDragElement;
+                  }
+                  return this.group.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
+              },
+          });
+          this.addDisposables(this.dropTarget);
       }
       show() {
           this.element.style.display = '';
@@ -3192,23 +3433,43 @@ define(['exports'], (function (exports) { 'use strict';
       hide() {
           this.element.style.display = 'none';
       }
-      openPanel(panel) {
-          var _a;
-          if (this.panel === panel) {
-              return;
-          }
-          if (this.panel) {
-              if ((_a = this.panel.view) === null || _a === void 0 ? void 0 : _a.content) {
-                  this._element.removeChild(this.panel.view.content.element);
-              }
-              this.panel = undefined;
+      renderPanel(panel, options = { asActive: true }) {
+          const doRender = options.asActive ||
+              (this.panel && this.group.isPanelActive(this.panel));
+          if (this.panel &&
+              this.panel.view.content.element.parentElement === this._element) {
+              /**
+               * If the currently attached panel is mounted directly to the content then remove it
+               */
+              this._element.removeChild(this.panel.view.content.element);
           }
           this.panel = panel;
-          const disposable = new CompositeDisposable();
-          if (this.panel.view) {
-              const _onDidFocus = this.panel.view.content.onDidFocus;
-              const _onDidBlur = this.panel.view.content.onDidBlur;
-              const focusTracker = trackFocus(this._element);
+          let container;
+          switch (panel.api.renderer) {
+              case 'onlyWhenVisibile':
+                  this.accessor.overlayRenderContainer.detatch(panel);
+                  if (this.panel) {
+                      if (doRender) {
+                          this._element.appendChild(this.panel.view.content.element);
+                      }
+                  }
+                  container = this._element;
+                  break;
+              case 'always':
+                  if (panel.view.content.element.parentElement === this._element) {
+                      this._element.removeChild(panel.view.content.element);
+                  }
+                  container = this.accessor.overlayRenderContainer.attach({
+                      panel,
+                      referenceContainer: this,
+                  });
+                  break;
+          }
+          if (doRender) {
+              const _onDidFocus = panel.view.content.onDidFocus;
+              const _onDidBlur = panel.view.content.onDidBlur;
+              const focusTracker = trackFocus(container);
+              const disposable = new CompositeDisposable();
               disposable.addDisposables(focusTracker, focusTracker.onDidFocus(() => this._onDidFocus.fire()), focusTracker.onDidBlur(() => this._onDidBlur.fire()));
               if (_onDidFocus) {
                   disposable.addDisposables(_onDidFocus(() => this._onDidFocus.fire()));
@@ -3216,17 +3477,23 @@ define(['exports'], (function (exports) { 'use strict';
               if (_onDidBlur) {
                   disposable.addDisposables(_onDidBlur(() => this._onDidBlur.fire()));
               }
-              this._element.appendChild(this.panel.view.content.element);
+              this.disposable.value = disposable;
+          }
+      }
+      openPanel(panel) {
+          if (this.panel === panel) {
+              return;
           }
-          this.disposable.value = disposable;
+          this.renderPanel(panel);
       }
       layout(_width, _height) {
           // noop
       }
       closePanel() {
-          var _a, _b, _c;
-          if ((_c = (_b = (_a = this.panel) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.element) {
-              this._element.removeChild(this.panel.view.content.element);
+          if (this.panel) {
+              if (this.accessor.options.defaultRenderer === 'onlyWhenVisibile') {
+                  this._element.removeChild(this.panel.view.content.element);
+              }
               this.panel = undefined;
           }
       }
@@ -3236,14 +3503,6 @@ define(['exports'], (function (exports) { 'use strict';
       }
   }
 
-  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 DragHandler extends CompositeDisposable {
       constructor(el) {
           super();
@@ -3418,7 +3677,7 @@ define(['exports'], (function (exports) { 'use strict';
           }, true));
       }
       isCancelled(_event) {
-          if (this.group.api.isFloating && !_event.shiftKey) {
+          if (this.group.api.location === 'floating' && !_event.shiftKey) {
               return true;
           }
           return false;
@@ -3620,7 +3879,7 @@ define(['exports'], (function (exports) { 'use strict';
               const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
               if (isFloatingGroupsEnabled &&
                   event.shiftKey &&
-                  !this.group.api.isFloating) {
+                  this.group.api.location !== 'floating') {
                   event.preventDefault();
                   const { top, left } = this.element.getBoundingClientRect();
                   const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
@@ -3685,7 +3944,7 @@ define(['exports'], (function (exports) { 'use strict';
           }), tab.onChanged((event) => {
               var _a;
               const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
-              const isFloatingWithOnePanel = this.group.api.isFloating && this.size === 1;
+              const isFloatingWithOnePanel = this.group.api.location === 'floating' && this.size === 1;
               if (isFloatingGroupsEnabled &&
                   !isFloatingWithOnePanel &&
                   event.shiftKey) {
@@ -3768,15 +4027,37 @@ define(['exports'], (function (exports) { 'use strict';
           }
           return isAncestor(document.activeElement, this.contentContainer.element);
       }
-      get isFloating() {
-          return this._isFloating;
-      }
-      set isFloating(value) {
-          this._isFloating = value;
-          this.dropTarget.setTargetZones(value ? ['center'] : ['top', 'bottom', 'left', 'right', 'center']);
-          toggleClass(this.container, 'dv-groupview-floating', value);
-          this.groupPanel.api._onDidFloatingStateChange.fire({
-              isFloating: this.isFloating,
+      get location() {
+          return this._location;
+      }
+      set location(value) {
+          this._location = value;
+          toggleClass(this.container, 'dv-groupview-floating', false);
+          toggleClass(this.container, 'dv-groupview-popout', false);
+          switch (value) {
+              case 'grid':
+                  this.contentContainer.dropTarget.setTargetZones([
+                      'top',
+                      'bottom',
+                      'left',
+                      'right',
+                      'center',
+                  ]);
+                  break;
+              case 'floating':
+                  this.contentContainer.dropTarget.setTargetZones(['center']);
+                  this.contentContainer.dropTarget.setTargetZones(value
+                      ? ['center']
+                      : ['top', 'bottom', 'left', 'right', 'center']);
+                  toggleClass(this.container, 'dv-groupview-floating', true);
+                  break;
+              case 'popout':
+                  this.contentContainer.dropTarget.setTargetZones(['center']);
+                  toggleClass(this.container, 'dv-groupview-popout', true);
+                  break;
+          }
+          this.groupPanel.api._onDidLocationChange.fire({
+              location: this.location,
           });
       }
       constructor(container, accessor, id, options, groupPanel) {
@@ -3789,7 +4070,7 @@ define(['exports'], (function (exports) { 'use strict';
           this.groupPanel = groupPanel;
           this._isGroupActive = false;
           this._locked = false;
-          this._isFloating = false;
+          this._location = 'grid';
           this.mostRecentlyUsed = [];
           this._onDidChange = new Emitter();
           this.onDidChange = this._onDidChange.event;
@@ -3812,35 +4093,7 @@ define(['exports'], (function (exports) { 'use strict';
           this.onDidActivePanelChange = this._onDidActivePanelChange.event;
           toggleClass(this.container, 'groupview', true);
           this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
-          this.contentContainer = new ContentContainer();
-          this.dropTarget = new Droptarget(this.contentContainer.element, {
-              acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-              canDisplayOverlay: (event, position) => {
-                  if (this.locked === 'no-drop-target' ||
-                      (this.locked && position === 'center')) {
-                      return false;
-                  }
-                  const data = getPanelData();
-                  if (!data && event.shiftKey && !this.isFloating) {
-                      return false;
-                  }
-                  if (data && data.viewId === this.accessor.id) {
-                      if (data.groupId === this.id) {
-                          if (position === 'center') {
-                              // don't allow to drop on self for center position
-                              return false;
-                          }
-                          if (data.panelId === null) {
-                              // don't allow group move to drop anywhere on self
-                              return false;
-                          }
-                      }
-                      const groupHasOnePanelAndIsActiveDragElement = this._panels.length === 1 && data.groupId === this.id;
-                      return !groupHasOnePanelAndIsActiveDragElement;
-                  }
-                  return this.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
-              },
-          });
+          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;
@@ -3854,7 +4107,7 @@ define(['exports'], (function (exports) { 'use strict';
               this.accessor.doSetGroupActive(this.groupPanel, true);
           }), this.contentContainer.onDidBlur(() => {
               // noop
-          }), this.dropTarget.onDrop((event) => {
+          }), this.contentContainer.dropTarget.onDrop((event) => {
               this.handleDropEvent(event.nativeEvent, event.position);
           }), this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
       }
@@ -3903,6 +4156,9 @@ define(['exports'], (function (exports) { 'use strict';
               this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
           }
       }
+      rerender(panel) {
+          this.contentContainer.renderPanel(panel, { asActive: false });
+      }
       indexOf(panel) {
           return this.tabsContainer.indexOf(panel.id);
       }
@@ -4094,12 +4350,12 @@ define(['exports'], (function (exports) { 'use strict';
       doAddPanel(panel, index = this.panels.length, 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) {
               this.contentContainer.openPanel(panel);
           }
-          this.tabsContainer.show();
-          this.contentContainer.show();
           if (hasExistingPanel) {
               // TODO - need to ensure ordering hasn't changed and if it has need to re-order this.panels
               return;
@@ -4215,7 +4471,6 @@ define(['exports'], (function (exports) { 'use strict';
           for (const panel of this.panels) {
               panel.dispose();
           }
-          this.dropTarget.dispose();
           this.tabsContainer.dispose();
           this.contentContainer.dispose();
       }
@@ -4254,7 +4509,22 @@ define(['exports'], (function (exports) { 'use strict';
               if (this.disableResizing) {
                   return;
               }
-              if (!document.body.contains(this._element)) {
+              if (!this._element.offsetParent) {
+                  /**
+                   * offsetParent === null is equivalent to display: none being set on the element or one
+                   * of it's parents. In the display: none case the size will become (0, 0) which we do
+                   * not want to propagate.
+                   *
+                   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
+                   *
+                   * You could use checkVisibility() but at the time of writing it's not supported across
+                   * all Browsers
+                   *
+                   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility
+                   */
+                  return;
+              }
+              if (!isInDocument(this._element)) {
                   /**
                    * since the event is dispatched through requestAnimationFrame there is a small chance
                    * the component is no longer attached to the DOM, if that is the case the dimensions
@@ -4346,6 +4616,21 @@ define(['exports'], (function (exports) { 'use strict';
       isVisible(panel) {
           return this.gridview.isViewVisible(getGridLocation(panel.element));
       }
+      maximizeGroup(panel) {
+          this.gridview.maximizeView(panel);
+      }
+      isMaximizedGroup(panel) {
+          return this.gridview.maximizedView() === panel;
+      }
+      exitMaximizedGroup() {
+          this.gridview.exitMaximizedView();
+      }
+      hasMaximizedGroup() {
+          return this.gridview.hasMaximizedView();
+      }
+      get onDidMaxmizedGroupChange() {
+          return this.gridview.onDidMaxmizedNodeChange;
+      }
       doAddGroup(group, location = [0], size) {
           this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
           this._onDidAddGroup.fire(group);
@@ -5122,32 +5407,63 @@ define(['exports'], (function (exports) { 'use strict';
       }
   }
 
+  // TODO find a better way to initialize and avoid needing null checks
+  const NOT_INITIALIZED_MESSAGE = 'DockviewGroupPanelApiImpl not initialized';
   class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
-      get isFloating() {
+      get location() {
           if (!this._group) {
-              throw new Error(`DockviewGroupPanelApiImpl not initialized`);
+              throw new Error(NOT_INITIALIZED_MESSAGE);
           }
-          return this._group.model.isFloating;
+          return this._group.model.location;
       }
       constructor(id, accessor) {
           super(id);
           this.accessor = accessor;
-          this._onDidFloatingStateChange = new Emitter();
-          this.onDidFloatingStateChange = this._onDidFloatingStateChange.event;
-          this.addDisposables(this._onDidFloatingStateChange);
+          this._onDidLocationChange = new Emitter();
+          this.onDidLocationChange = this._onDidLocationChange.event;
+          this.addDisposables(this._onDidLocationChange);
       }
       moveTo(options) {
-          var _a;
+          var _a, _b, _c;
+          if (!this._group) {
+              throw new Error(NOT_INITIALIZED_MESSAGE);
+          }
+          const group = (_a = options.group) !== null && _a !== void 0 ? _a : this.accessor.addGroup({
+              direction: positionToDirection((_b = options.position) !== null && _b !== void 0 ? _b : 'right'),
+          });
+          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') {
+              // only grid groups can be maximized
+              return;
+          }
+          this.accessor.maximizeGroup(this._group);
+      }
+      isMaximized() {
           if (!this._group) {
-              throw new Error(`DockviewGroupPanelApiImpl not initialized`);
+              throw new Error(NOT_INITIALIZED_MESSAGE);
+          }
+          return this.accessor.isMaximizedGroup(this._group);
+      }
+      exitMaximized() {
+          if (!this._group) {
+              throw new Error(NOT_INITIALIZED_MESSAGE);
+          }
+          if (this.isMaximized()) {
+              this.accessor.exitMaximizedGroup();
           }
-          this.accessor.moveGroupOrPanel(options.group, this._group.id, undefined, (_a = options.position) !== null && _a !== void 0 ? _a : 'center');
       }
       initialize(group) {
           this._group = group;
       }
   }
 
+  const MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH = 100;
+  const MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT = 100;
   class DockviewGroupPanel extends GridviewPanel {
       get panels() {
           return this._model.panels;
@@ -5172,8 +5488,8 @@ define(['exports'], (function (exports) { 'use strict';
       }
       constructor(accessor, id, options) {
           super(id, 'groupview_default', {
-              minimumHeight: 100,
-              minimumWidth: 100,
+              minimumHeight: MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT,
+              minimumWidth: MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH,
           }, new DockviewGroupPanelApiImpl(id, accessor));
           this.api.initialize(this); // cannot use 'this' after after 'super' call
           this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
@@ -5227,8 +5543,10 @@ define(['exports'], (function (exports) { 'use strict';
           return this.panel.title;
       }
       get isGroupActive() {
-          var _a;
-          return !!((_a = this.group) === null || _a === void 0 ? void 0 : _a.isActive);
+          return this.group.isActive;
+      }
+      get renderer() {
+          return this.panel.renderer;
       }
       set group(value) {
           const isOldGroupActive = this.isGroupActive;
@@ -5256,10 +5574,12 @@ define(['exports'], (function (exports) { 'use strict';
           this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
           this._onDidGroupChange = new Emitter();
           this.onDidGroupChange = this._onDidGroupChange.event;
+          this._onDidRendererChange = new Emitter();
+          this.onDidRendererChange = this._onDidRendererChange.event;
           this.disposable = new MutableDisposable();
           this.initialize(panel);
           this._group = group;
-          this.addDisposables(this.disposable, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
+          this.addDisposables(this.disposable, this._onDidRendererChange, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
       }
       moveTo(options) {
           var _a;
@@ -5268,9 +5588,21 @@ define(['exports'], (function (exports) { 'use strict';
       setTitle(title) {
           this.panel.setTitle(title);
       }
+      setRenderer(renderer) {
+          this.panel.setRenderer(renderer);
+      }
       close() {
           this.group.model.closePanel(this.panel);
       }
+      maximize() {
+          this.group.api.maximize();
+      }
+      isMaximized() {
+          return this.group.api.isMaximized();
+      }
+      exitMaximized() {
+          this.group.api.exitMaximized();
+      }
   }
 
   class DockviewPanel extends CompositeDisposable {
@@ -5283,11 +5615,17 @@ define(['exports'], (function (exports) { 'use strict';
       get group() {
           return this._group;
       }
-      constructor(id, accessor, containerApi, group, view) {
+      get renderer() {
+          var _a;
+          return (_a = this._renderer) !== null && _a !== void 0 ? _a : this.accessor.renderer;
+      }
+      constructor(id, accessor, containerApi, group, view, options) {
           super();
           this.id = id;
+          this.accessor = accessor;
           this.containerApi = containerApi;
           this.view = view;
+          this._renderer = options.renderer;
           this._group = group;
           this.api = new DockviewPanelApiImpl(this, this._group, accessor);
           this.addDisposables(this.api.onActiveChange(() => {
@@ -5296,6 +5634,8 @@ define(['exports'], (function (exports) { 'use strict';
               // forward the resize event to the group since if you want to resize a panel
               // you are actually just resizing the panels parent which is the group
               this.group.api.setSize(event);
+          }), this.api.onDidRendererChange((event) => {
+              this.group.model.rerender(this);
           }));
       }
       init(params) {
@@ -5315,6 +5655,7 @@ define(['exports'], (function (exports) { 'use strict';
                   ? this._params
                   : undefined,
               title: this.title,
+              renderer: this._renderer,
           };
       }
       setTitle(title) {
@@ -5330,6 +5671,15 @@ define(['exports'], (function (exports) { 'use strict';
               this.api._onDidTitleChange.fire({ title });
           }
       }
+      setRenderer(renderer) {
+          const didChange = renderer !== this.renderer;
+          if (didChange) {
+              this._renderer = renderer;
+              this.api._onDidRendererChange.fire({
+                  renderer: renderer,
+              });
+          }
+      }
       update(event) {
           var _a;
           // merge the new parameters with the existing parameters
@@ -5548,8 +5898,8 @@ define(['exports'], (function (exports) { 'use strict';
   }
 
   class DefaultDockviewDeserialzier {
-      constructor(layout) {
-          this.layout = layout;
+      constructor(accessor) {
+          this.accessor = accessor;
       }
       fromJSON(panelData, group) {
           var _a, _b;
@@ -5563,8 +5913,10 @@ define(['exports'], (function (exports) { 'use strict';
           const tabComponent = viewData
               ? (_b = viewData.tab) === null || _b === void 0 ? void 0 : _b.id
               : panelData.tabComponent;
-          const view = new DockviewPanelModel(this.layout, panelId, contentComponent, tabComponent);
-          const panel = new DockviewPanel(panelId, this.layout, new DockviewApi(this.layout), group, view);
+          const view = new DockviewPanelModel(this.accessor, panelId, contentComponent, tabComponent);
+          const panel = new DockviewPanel(panelId, this.accessor, new DockviewApi(this.accessor), group, view, {
+              renderer: panelData.renderer,
+          });
           panel.init({
               title: title !== null && title !== void 0 ? title : panelId,
               params: params !== null && params !== void 0 ? params : {},
@@ -5944,7 +6296,265 @@ define(['exports'], (function (exports) { 'use strict';
       }
   }
 
+  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 };
+
+  function createFocusableElement() {
+      const element = document.createElement('div');
+      element.tabIndex = -1;
+      return element;
+  }
+  class OverlayRenderContainer extends CompositeDisposable {
+      constructor(element) {
+          super();
+          this.element = element;
+          this.map = {};
+          this.addDisposables(Disposable.from(() => {
+              for (const value of Object.values(this.map)) {
+                  value.disposable.dispose();
+                  value.destroy.dispose();
+              }
+          }));
+      }
+      detatch(panel) {
+          if (this.map[panel.api.id]) {
+              const { disposable, destroy } = this.map[panel.api.id];
+              disposable.dispose();
+              destroy.dispose();
+              delete this.map[panel.api.id];
+              return true;
+          }
+          return false;
+      }
+      attach(options) {
+          const { panel, referenceContainer } = options;
+          if (!this.map[panel.api.id]) {
+              const element = createFocusableElement();
+              element.className = 'dv-render-overlay';
+              this.map[panel.api.id] = {
+                  panel,
+                  disposable: Disposable.NONE,
+                  destroy: Disposable.NONE,
+                  element,
+              };
+          }
+          const focusContainer = this.map[panel.api.id].element;
+          if (panel.view.content.element.parentElement !== focusContainer) {
+              focusContainer.appendChild(panel.view.content.element);
+          }
+          if (focusContainer.parentElement !== this.element) {
+              this.element.appendChild(focusContainer);
+          }
+          const resize = () => {
+              // TODO propagate position to avoid getDomNodePagePosition calls, possible performance bottleneck?
+              const box = getDomNodePagePosition(referenceContainer.element);
+              const box2 = getDomNodePagePosition(this.element);
+              focusContainer.style.left = `${box.left - box2.left}px`;
+              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');
+          };
+          const visibilityChanged = () => {
+              if (panel.api.isVisible) {
+                  resize();
+              }
+              focusContainer.style.display = panel.api.isVisible ? '' : 'none';
+          };
+          const disposable = new CompositeDisposable(
+          /**
+           * since container is positioned absoutely we must explicitly forward
+           * the dnd events for the expect behaviours to continue to occur in terms of dnd
+           *
+           * the dnd observer does not need to be conditional on whether the panel is visible since
+           * non-visible panels are 'display: none' and in such case the dnd observer will not fire.
+           */
+          new DragAndDropObserver(focusContainer, {
+              onDragEnd: (e) => {
+                  referenceContainer.dropTarget.dnd.onDragEnd(e);
+              },
+              onDragEnter: (e) => {
+                  referenceContainer.dropTarget.dnd.onDragEnter(e);
+              },
+              onDragLeave: (e) => {
+                  referenceContainer.dropTarget.dnd.onDragLeave(e);
+              },
+              onDrop: (e) => {
+                  referenceContainer.dropTarget.dnd.onDrop(e);
+              },
+              onDragOver: (e) => {
+                  referenceContainer.dropTarget.dnd.onDragOver(e);
+              },
+          }), panel.api.onDidVisibilityChange((event) => {
+              /**
+               * Control the visibility of the content, however even when not visible (display: none)
+               * the content is still maintained within the DOM hence DOM specific attributes
+               * such as scroll position are maintained when next made visible.
+               */
+              visibilityChanged();
+          }), panel.api.onDidDimensionsChange(() => {
+              if (!panel.api.isVisible) {
+                  return;
+              }
+              resize();
+          }));
+          this.map[panel.api.id].destroy = Disposable.from(() => {
+              focusContainer.removeChild(panel.view.content.element);
+              this.element.removeChild(focusContainer);
+          });
+          queueMicrotask(() => {
+              if (this.isDisposed) {
+                  return;
+              }
+              /**
+               * wait until everything has finished in the current stack-frame call before
+               * calling the first resize as other size-altering events may still occur before
+               * the end of the stack-frame.
+               */
+              visibilityChanged();
+          });
+          // dispose of logic asoccciated with previous reference-container
+          this.map[panel.api.id].disposable.dispose();
+          // and reset the disposable to the active reference-container
+          this.map[panel.api.id].disposable = disposable;
+          return focusContainer;
+      }
+  }
+
+  const DEFAULT_ROOT_OVERLAY_MODEL = {
+      activationSize: { type: 'pixels', value: 10 },
+      size: { type: 'pixels', value: 20 },
+  };
+  function getTheme(element) {
+      function toClassList(element) {
+          const list = [];
+          for (let i = 0; i < element.classList.length; i++) {
+              list.push(element.classList.item(i));
+          }
+          return list;
+      }
+      let theme = undefined;
+      let parent = element;
+      while (parent !== null) {
+          theme = toClassList(parent).find((cls) => cls.startsWith('dockview-theme-'));
+          if (typeof theme === 'string') {
+              break;
+          }
+          parent = parent.parentElement;
+      }
+      return theme;
+  }
   class DockviewComponent extends BaseGrid {
       get orientation() {
           return this.gridview.orientation;
@@ -5965,8 +6575,12 @@ define(['exports'], (function (exports) { 'use strict';
           }
           return activeGroup.activePanel;
       }
-      constructor(options) {
+      get renderer() {
           var _a;
+          return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisibile';
+      }
+      constructor(options) {
+          var _a, _b;
           super({
               proportionalLayout: true,
               orientation: (_a = options.orientation) !== null && _a !== void 0 ? _a : exports.Orientation.HORIZONTAL,
@@ -5991,12 +6605,27 @@ define(['exports'], (function (exports) { 'use strict';
           this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
           this._onDidActivePanelChange = new Emitter();
           this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-          this.floatingGroups = [];
+          this._floatingGroups = [];
+          this._popoutGroups = [];
+          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);
-          this.addDisposables(this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+          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.updateWatermark();
           }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
               this._bufferOnDidLayoutChange.fire();
+          }), Disposable.from(() => {
+              // iterate over a copy of the array since .dispose() mutates the original array
+              for (const group of [...this._floatingGroups]) {
+                  group.dispose();
+              }
+              // iterate over a copy of the array since .dispose() mutates the original array
+              for (const group of [...this._popoutGroups]) {
+                  group.dispose();
+              }
           }));
           this._options = options;
           if (!this.options.components) {
@@ -6015,7 +6644,7 @@ define(['exports'], (function (exports) { 'use strict';
               !this.options.watermarkFrameworkComponent) {
               this.options.watermarkComponent = Watermark;
           }
-          const dropTarget = new Droptarget(this.element, {
+          this._rootDropTarget = new Droptarget(this.element, {
               canDisplayOverlay: (event, position) => {
                   const data = getPanelData();
                   if (data) {
@@ -6048,12 +6677,9 @@ define(['exports'], (function (exports) { 'use strict';
                   return false;
               },
               acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-              overlayModel: {
-                  activationSize: { type: 'pixels', value: 10 },
-                  size: { type: 'pixels', value: 20 },
-              },
+              overlayModel: (_b = this.options.rootOverlayModel) !== null && _b !== void 0 ? _b : DEFAULT_ROOT_OVERLAY_MODEL,
           });
-          this.addDisposables(dropTarget.onDrop((event) => {
+          this.addDisposables(this._rootDropTarget.onDrop((event) => {
               var _a;
               const data = getPanelData();
               if (data) {
@@ -6062,10 +6688,59 @@ define(['exports'], (function (exports) { 'use strict';
               else {
                   this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: null, getData: getPanelData }));
               }
-          }), dropTarget);
+          }), 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();
+              }
+          }
+          else {
+              group = item;
+              if (!box) {
+                  box = group.element.getBoundingClientRect();
+              }
+              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,
+              },
+          });
+          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;
           let group;
@@ -6085,9 +6760,13 @@ define(['exports'], (function (exports) { 'use strict';
                   this.doRemoveGroup(item, { skipDispose: true });
               }
           }
-          group.model.isFloating = true;
-          const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number' ? Math.max(coord.x, 0) : 100;
-          const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number' ? Math.max(coord.y, 0) : 100;
+          group.model.location = 'floating';
+          const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number'
+              ? Math.max(coord.x, 0)
+              : DEFAULT_FLOATING_GROUP_POSITION.left;
+          const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number'
+              ? Math.max(coord.y, 0)
+              : DEFAULT_FLOATING_GROUP_POSITION.top;
           const overlay = new Overlay({
               container: this.gridview.element,
               content: group.element,
@@ -6131,12 +6810,12 @@ define(['exports'], (function (exports) { 'use strict';
           }), {
               dispose: () => {
                   disposable.dispose();
-                  group.model.isFloating = false;
-                  remove(this.floatingGroups, floatingGroupPanel);
+                  group.model.location = 'grid';
+                  remove(this._floatingGroups, floatingGroupPanel);
                   this.updateWatermark();
               },
           });
-          this.floatingGroups.push(floatingGroupPanel);
+          this._floatingGroups.push(floatingGroupPanel);
           this.updateWatermark();
       }
       orthogonalize(position) {
@@ -6172,16 +6851,18 @@ define(['exports'], (function (exports) { 'use strict';
       }
       updateOptions(options) {
           var _a, _b;
-          const hasOrientationChanged = typeof options.orientation === 'string' &&
+          const changed_orientation = typeof options.orientation === 'string' &&
               this.gridview.orientation !== options.orientation;
-          const hasFloatingGroupOptionsChanged = options.floatingGroupBounds !== undefined &&
+          const changed_floatingGroupBounds = options.floatingGroupBounds !== undefined &&
               options.floatingGroupBounds !== this.options.floatingGroupBounds;
+          const changed_rootOverlayOptions = options.rootOverlayModel !== undefined &&
+              options.rootOverlayModel !== this.options.rootOverlayModel;
           this._options = Object.assign(Object.assign({}, this.options), options);
-          if (hasOrientationChanged) {
+          if (changed_orientation) {
               this.gridview.orientation = options.orientation;
           }
-          if (hasFloatingGroupOptionsChanged) {
-              for (const group of this.floatingGroups) {
+          if (changed_floatingGroupBounds) {
+              for (const group of this._floatingGroups) {
                   switch (this.options.floatingGroupBounds) {
                       case 'boundedWithinViewport':
                           group.overlay.minimumInViewportHeight = undefined;
@@ -6202,12 +6883,15 @@ define(['exports'], (function (exports) { 'use strict';
                   group.overlay.setBounds({});
               }
           }
+          if (changed_rootOverlayOptions) {
+              this._rootDropTarget.setOverlayModel(options.rootOverlayModel);
+          }
           this.layout(this.gridview.width, this.gridview.height, true);
       }
       layout(width, height, forceResize) {
           super.layout(width, height, forceResize);
-          if (this.floatingGroups) {
-              for (const floating of this.floatingGroups) {
+          if (this._floatingGroups) {
+              for (const floating of this._floatingGroups) {
                   // ensure floting groups stay within visible boundaries
                   floating.overlay.setBounds();
               }
@@ -6275,10 +6959,16 @@ define(['exports'], (function (exports) { 'use strict';
               collection[panel.id] = panel.toJSON();
               return collection;
           }, {});
-          const floats = this.floatingGroups.map((floatingGroup) => {
+          const floats = this._floatingGroups.map((group) => {
               return {
-                  data: floatingGroup.group.toJSON(),
-                  position: floatingGroup.overlay.toJSON(),
+                  data: group.group.toJSON(),
+                  position: group.overlay.toJSON(),
+              };
+          });
+          const popoutGroups = this._popoutGroups.map((group) => {
+              return {
+                  data: group.group.toJSON(),
+                  position: group.window.dimensions(),
               };
           });
           const result = {
@@ -6289,10 +6979,13 @@ define(['exports'], (function (exports) { 'use strict';
           if (floats.length > 0) {
               result.floatingGroups = floats;
           }
+          if (popoutGroups.length > 0) {
+              result.popoutGroups = popoutGroups;
+          }
           return result;
       }
       fromJSON(data) {
-          var _a;
+          var _a, _b;
           this.clear();
           if (typeof data !== 'object' || data === null) {
               throw new Error('serialized layout must be a non-null object');
@@ -6359,7 +7052,16 @@ define(['exports'], (function (exports) { 'use strict';
                       width: position.width,
                   }, { skipRemoveGroup: true, inDragMode: false });
               }
-              for (const floatingGroup of this.floatingGroups) {
+              const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
+              for (const serializedPopoutGroup of serializedPopoutGroups) {
+                  const { data, position } = serializedPopoutGroup;
+                  const group = createGroupFromSerializedState(data);
+                  this.addPopoutGroup(group, {
+                      skipRemoveGroup: true,
+                      position: position !== null && position !== void 0 ? position : undefined,
+                  });
+              }
+              for (const floatingGroup of this._floatingGroups) {
                   floatingGroup.overlay.setBounds();
               }
               if (typeof activeGroup === 'string') {
@@ -6391,7 +7093,7 @@ define(['exports'], (function (exports) { 'use strict';
                   this._onDidRemoveGroup.fire(group);
               }
               // iterate over a reassigned array since original array will be modified
-              for (const floatingGroup of [...this.floatingGroups]) {
+              for (const floatingGroup of [...this._floatingGroups]) {
                   floatingGroup.dispose();
               }
               // fires clean-up events and clears the underlying HTML gridview.
@@ -6483,7 +7185,8 @@ define(['exports'], (function (exports) { 'use strict';
                   group.model.openPanel(panel);
                   this.doSetGroupAndPanelActive(group);
               }
-              else if (referenceGroup.api.isFloating || target === 'center') {
+              else if (referenceGroup.api.location === 'floating' ||
+                  target === 'center') {
                   panel = this.createPanel(options, referenceGroup);
                   referenceGroup.model.openPanel(panel);
               }
@@ -6527,6 +7230,7 @@ define(['exports'], (function (exports) { 'use strict';
           }
           group.model.removePanel(panel);
           if (!options.skipDispose) {
+              this.overlayRenderContainer.detatch(panel);
               panel.dispose();
           }
           if (group.size === 0 && options.removeEmptyGroup) {
@@ -6543,7 +7247,7 @@ define(['exports'], (function (exports) { 'use strict';
       }
       updateWatermark() {
           var _a, _b;
-          if (this.groups.filter((x) => !x.api.isFloating).length === 0) {
+          if (this.groups.filter((x) => x.api.location === 'grid').length === 0) {
               if (!this.watermark) {
                   this.watermark = this.createWatermarkComponent();
                   this.watermark.init({
@@ -6618,19 +7322,40 @@ define(['exports'], (function (exports) { 'use strict';
           }
       }
       doRemoveGroup(group, options) {
-          const floatingGroup = this.floatingGroups.find((_) => _.group === group);
-          if (floatingGroup) {
-              if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
-                  floatingGroup.group.dispose();
-                  this._groups.delete(group.id);
-                  this._onDidRemoveGroup.fire(group);
+          if (group.api.location === 'floating') {
+              const floatingGroup = this._floatingGroups.find((_) => _.group === group);
+              if (floatingGroup) {
+                  if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                      floatingGroup.group.dispose();
+                      this._groups.delete(group.id);
+                      this._onDidRemoveGroup.fire(group);
+                  }
+                  remove(this._floatingGroups, floatingGroup);
+                  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);
+                  }
+                  return floatingGroup.group;
               }
-              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);
+              throw new Error('failed to find floating group');
+          }
+          if (group.api.location === 'popout') {
+              const selectedGroup = this._popoutGroups.find((_) => _.group === group);
+              if (selectedGroup) {
+                  if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                      selectedGroup.group.dispose();
+                      this._groups.delete(group.id);
+                      this._onDidRemoveGroup.fire(group);
+                  }
+                  selectedGroup.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);
+                  }
+                  return selectedGroup.group;
               }
-              return floatingGroup.group;
+              throw new Error('failed to find popout group');
           }
           return super.doRemoveGroup(group, options);
       }
@@ -6662,8 +7387,7 @@ define(['exports'], (function (exports) { 'use strict';
               const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
               if (sourceGroup && sourceGroup.size < 2) {
                   const [targetParentLocation, to] = tail(targetLocation);
-                  const isFloating = this.floatingGroups.find((x) => x.group === sourceGroup);
-                  if (!isFloating) {
+                  if (sourceGroup.api.location === 'grid') {
                       const sourceLocation = getGridLocation(sourceGroup.element);
                       const [sourceParentLocation, from] = tail(sourceLocation);
                       if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
@@ -6709,12 +7433,25 @@ define(['exports'], (function (exports) { 'use strict';
                   }
               }
               else {
-                  const floatingGroup = this.floatingGroups.find((x) => x.group === sourceGroup);
-                  if (floatingGroup) {
-                      floatingGroup.dispose();
-                  }
-                  else {
-                      this.gridview.removeView(getGridLocation(sourceGroup.element));
+                  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;
+                      }
+                      case 'popout': {
+                          const selectedPopoutGroup = this._popoutGroups.find((x) => x.group === sourceGroup);
+                          if (!selectedPopoutGroup) {
+                              throw new Error('failed to find popout group');
+                          }
+                          selectedPopoutGroup.dispose();
+                      }
                   }
                   const referenceLocation = getGridLocation(referenceGroup.element);
                   const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
@@ -6776,7 +7513,7 @@ define(['exports'], (function (exports) { 'use strict';
           const contentComponent = options.component;
           const tabComponent = (_a = options.tabComponent) !== null && _a !== void 0 ? _a : this.options.defaultTabComponent;
           const view = new DockviewPanelModel(this, options.id, contentComponent, tabComponent);
-          const panel = new DockviewPanel(options.id, this, this._api, group, view);
+          const panel = new DockviewPanel(options.id, this, this._api, group, view, { renderer: options.renderer });
           panel.init({
               title: (_b = options.title) !== null && _b !== void 0 ? _b : options.id,
               params: (_c = options === null || options === void 0 ? void 0 : options.params) !== null && _c !== void 0 ? _c : {},