dockview-react 1.17.2 → 2.1.0

package/dist/dockview-react.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 1.17.2
+ * @version 2.1.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -36,7 +36,7 @@ function styleInject(css, ref) {
   }
 }
 
-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-overlay-z-index: 999;\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-overlay-z-index: 999;\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-overlay-z-index: 999;\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-overlay-z-index: 999;\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-overlay-z-index: 999;\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-overlay-z-index: 999;\n  --dv-group-view-background-color: #ebeced;\n  --dv-tabs-and-actions-container-background-color: #fcfcfc;\n  --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-activegroup-hiddenpanel-tab-background-color: #fcfcfc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n  --dv-tab-divider-color: transparent;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-separator-border: transparent;\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n  --dv-background-color: #ebeced;\n  --dv-separator-handle-background-color: #cfd1d3;\n  --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-resize-container:has(> .groupview) {\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview {\n  overflow: hidden;\n  border-radius: 10px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container {\n  border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab {\n  margin: 4px;\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab .dockview-svg {\n  height: 8px;\n  width: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab:hover {\n  background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .groupview .content-container {\n  background-color: #fcfcfc;\n}\n.dockview-theme-replit .groupview.active-group {\n  border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview.inactive-group {\n  border: 1px solid transparent;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled)::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:not(.disabled):hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash:not(.disabled)::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:not(.disabled):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-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.dv-root-wrapper {\n  height: 100%;\n  width: 100%;\n}\n.grid-view,\n.branch-node {\n  height: 100%;\n  width: 100%;\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  --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n  position: absolute;\n  z-index: calc(var(--dv-overlay-z-index) - 2);\n  border: 1px solid var(--dv-tab-divider-color);\n  box-shadow: var(--dv-floating-box-shadow);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\n  position: absolute;\n  cursor: se-resize;\n}\n.dv-render-overlay {\n  --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n  position: absolute;\n  z-index: 1;\n  height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n  z-index: calc(var(--dv-overlay-z-index) - 1);\n}\n\n.dv-debug .dv-render-overlay {\n  outline: 1px solid red;\n  outline-offset: -1;\n}\n.pane-container {\n  height: 100%;\n  width: 100%;\n}\n.pane-container.animated .view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.pane-container .view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n  background-color: var(--dv-group-view-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n  display: flex;\n  padding: 0px 8px;\n  cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pane-container .view .default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n  border-top: none !important;\n}\n.pane-container .pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.pane-container .pane .pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n  cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .split-view-container .sash-container .sash.enabled {\n  background-color: black;\n}\n.dv-debug .split-view-container .sash-container .sash.disabled {\n  background-color: orange;\n}\n.dv-debug .split-view-container .sash-container .sash.maximum {\n  background-color: green;\n}\n.dv-debug .split-view-container .sash-container .sash.minimum {\n  background-color: red;\n}\n\n.split-view-container {\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container.dv-splitview-disabled > .sash-container > .sash {\n  pointer-events: none;\n}\n.split-view-container.animation .view,\n.split-view-container.animation .sash {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.split-view-container.horizontal {\n  height: 100%;\n}\n.split-view-container.horizontal > .sash-container > .sash {\n  height: 100%;\n  width: 4px;\n}\n.split-view-container.horizontal > .sash-container > .sash.enabled {\n  cursor: ew-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.horizontal > .sash-container > .sash.maximum {\n  cursor: w-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.minimum {\n  cursor: e-resize;\n}\n.split-view-container.horizontal > .view-container > .view:not(:first-child)::before {\n  height: 100%;\n  width: 1px;\n}\n.split-view-container.vertical {\n  width: 100%;\n}\n.split-view-container.vertical > .sash-container > .sash {\n  width: 100%;\n  height: 4px;\n}\n.split-view-container.vertical > .sash-container > .sash.enabled {\n  cursor: ns-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.vertical > .sash-container > .sash.maximum {\n  cursor: n-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.minimum {\n  cursor: s-resize;\n}\n.split-view-container.vertical > .view-container > .view {\n  width: 100%;\n}\n.split-view-container.vertical > .view-container > .view:not(:first-child)::before {\n  height: 1px;\n  width: 100%;\n}\n.split-view-container .sash-container {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n}\n.split-view-container .sash-container .sash {\n  position: absolute;\n  z-index: 99;\n  outline: none;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  touch-action: none;\n}\n.split-view-container .sash-container .sash:not(.disabled):active {\n  transition: background-color 0.1s ease-in-out;\n  background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:not(.disabled):hover {\n  background-color: var(--dv-active-sash-color, transparent);\n  transition: background-color 0.1s ease-in-out;\n  transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-background-color);\n}\n.split-view-container .view-container .view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n  transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n  flex-shrink: 0;\n}\n.tab:focus-within, .tab:focus {\n  position: relative;\n}\n.tab:focus-within::after, .tab:focus::after {\n  position: absolute;\n  content: \"\";\n  height: 100%;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  pointer-events: none;\n  outline: 1px solid var(--dv-tab-divider-color) !important;\n  outline-offset: -1px;\n  z-index: 5;\n}\n.tab.dv-tab-dragging .dv-default-tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab .dv-default-tab .dv-default-tab-action {\n  visibility: visible;\n}\n.tab.inactive-tab .dv-default-tab .dv-default-tab-action {\n  visibility: hidden;\n}\n.tab.inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n  visibility: visible;\n}\n.tab .dv-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: ellipsis;\n}\n.tab .dv-default-tab .dv-default-tab-content {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .dv-default-tab .dv-default-tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .dv-default-tab .dv-default-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-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-overlay-z-index: 999;\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-overlay-z-index: 999;\n  --dv-group-view-background-color: white;\n  --dv-tabs-and-actions-container-background-color: #f3f3f3;\n  --dv-activegroup-visiblepanel-tab-background-color: white;\n  --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-inactivegroup-visiblepanel-tab-background-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-tab-divider-color: white;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n  --dv-separator-border: rgba(128, 128, 128, 0.35);\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-overlay-z-index: 999;\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 .dv-groupview.dv-active-group > .dv-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 .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-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 .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-overlay-z-index: 999;\n  --dv-group-view-background-color: #000c18;\n  --dv-tabs-and-actions-container-background-color: #1c1c2a;\n  --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-tab-divider-color: #2b2b4a;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n  --dv-separator-border: #2b2b4a;\n  --dv-paneview-header-border-color: #2b2b4a;\n  --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-overlay-z-index: 999;\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 .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-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 .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-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-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-overlay-z-index: 999;\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-separator-handle-background-color: #cfd1d3;\n  --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-resize-container:has(> .dv-groupview) {\n  border-radius: 8px;\n}\n.dockview-theme-replit .dv-groupview {\n  overflow: hidden;\n  border-radius: 10px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container {\n  border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab {\n  margin: 4px;\n  border-radius: 8px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab .dv-svg {\n  height: 8px;\n  width: 8px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab:hover {\n  background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .dv-groupview .dv-content-container {\n  background-color: #fcfcfc;\n}\n.dockview-theme-replit .dv-groupview.dv-active-group {\n  border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .dv-groupview.dv-inactive-group {\n  border: 1px solid transparent;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled)::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:not(.disabled):hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled)::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 .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dv-drop-target {\n  position: relative;\n}\n.dv-drop-target > .dv-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.dv-drop-target > .dv-drop-target-dropzone > .dv-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.dv-drop-target > .dv-drop-target-dropzone > .dv-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.dv-drop-target > .dv-drop-target-dropzone > .dv-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.dv-drop-target > .dv-drop-target-dropzone > .dv-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.dv-drop-target > .dv-drop-target-dropzone > .dv-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-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.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-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.dv-tab.dv-tab-dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-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.dv-groupview:focus {\n  outline: none;\n}\n.dv-groupview > .dv-content-container {\n  flex-grow: 1;\n  min-height: 0;\n  outline: none;\n}\n.dv-root-wrapper {\n  height: 100%;\n  width: 100%;\n}\n.dv-grid-view,\n.dv-branch-node {\n  height: 100%;\n  width: 100%;\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  --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n  position: absolute;\n  z-index: calc(var(--dv-overlay-z-index) - 2);\n  border: 1px solid var(--dv-tab-divider-color);\n  box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-hidden {\n  display: none;\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\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: var(--dv-overlay-z-index);\n  position: absolute;\n  cursor: se-resize;\n}\n.dv-render-overlay {\n  --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n  position: absolute;\n  z-index: 1;\n  height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n  z-index: calc(var(--dv-overlay-z-index) - 1);\n}\n\n.dv-debug .dv-render-overlay {\n  outline: 1px solid red;\n  outline-offset: -1;\n}\n.dv-pane-container {\n  height: 100%;\n  width: 100%;\n}\n.dv-pane-container.dv-animated .dv-view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.dv-pane-container .dv-view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.dv-pane-container .dv-view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.dv-pane-container .dv-view:not(:first-child) .dv-pane > .dv-pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.dv-pane-container .dv-view .dv-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.dv-pane-container .dv-view .dv-default-header .dv-pane-header-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.dv-pane-container .dv-view .dv-default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.dv-pane-container:first-of-type > .dv-pane > .dv-pane-header {\n  border-top: none !important;\n}\n.dv-pane-container .dv-pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.dv-pane-container .dv-pane .dv-pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-header.dv-pane-draggable {\n  cursor: pointer;\n}\n.dv-pane-container .dv-pane .dv-pane-header:focus:before, .dv-pane-container .dv-pane .dv-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.dv-pane-container .dv-pane .dv-pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-body:focus:before, .dv-pane-container .dv-pane .dv-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 .dv-split-view-container .dv-sash-container .dv-sash.dv-enabled {\n  background-color: black;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-disabled {\n  background-color: orange;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-maximum {\n  background-color: green;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-minimum {\n  background-color: red;\n}\n\n.dv-split-view-container {\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n}\n.dv-split-view-container.dv-splitview-disabled > .dv-sash-container > .dv-sash {\n  pointer-events: none;\n}\n.dv-split-view-container.dv-animation .dv-view,\n.dv-split-view-container.dv-animation .dv-sash {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.dv-split-view-container.dv-horizontal {\n  height: 100%;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash {\n  height: 100%;\n  width: 4px;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-enabled {\n  cursor: ew-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-disabled {\n  cursor: default;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-maximum {\n  cursor: w-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-minimum {\n  cursor: e-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-view-container > .dv-view:not(:first-child)::before {\n  height: 100%;\n  width: 1px;\n}\n.dv-split-view-container.dv-vertical {\n  width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash {\n  width: 100%;\n  height: 4px;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-enabled {\n  cursor: ns-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-disabled {\n  cursor: default;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-maximum {\n  cursor: n-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-minimum {\n  cursor: s-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view {\n  width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view:not(:first-child)::before {\n  height: 1px;\n  width: 100%;\n}\n.dv-split-view-container .dv-sash-container {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n}\n.dv-split-view-container .dv-sash-container .dv-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.dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):active {\n  transition: background-color 0.1s ease-in-out;\n  background-color: var(--dv-active-sash-color, transparent);\n}\n.dv-split-view-container .dv-sash-container .dv-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.dv-split-view-container .dv-view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n}\n.dv-split-view-container .dv-view-container .dv-view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.dv-split-view-container.dv-separator-border .dv-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.dv-tab {\n  flex-shrink: 0;\n}\n.dv-tab:focus-within, .dv-tab:focus {\n  position: relative;\n}\n.dv-tab:focus-within::after, .dv-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.dv-tab.dv-tab-dragging .dv-default-tab-action {\n  background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-tab.dv-active-tab .dv-default-tab .dv-default-tab-action {\n  visibility: visible;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {\n  visibility: hidden;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n  visibility: visible;\n}\n.dv-tab .dv-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: ellipsis;\n}\n.dv-tab .dv-default-tab .dv-default-tab-content {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.dv-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.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container {\n  flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container .dv-tab {\n  flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-void-container {\n  flex-grow: 0;\n}\n.dv-tabs-and-actions-container .dv-void-container {\n  display: flex;\n  flex-grow: 1;\n  cursor: grab;\n}\n.dv-tabs-and-actions-container .dv-tabs-container {\n  display: flex;\n  overflow-x: overlay;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  /* Track */\n  /* Handle */\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar {\n  height: 3px;\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-thumb {\n  background: var(--dv-tabs-container-scrollbar-color);\n}\n.dv-tabs-and-actions-container .dv-tabs-container .dv-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.dv-tabs-and-actions-container .dv-tabs-container .dv-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.dv-watermark {\n  display: flex;\n  height: 100%;\n}";
 styleInject(css_248z);
 
 class TransferObject {
@@ -357,31 +357,6 @@ class MutableDisposable {
     }
 }
 
-function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
-    const Component = typeof componentName === 'string'
-        ? components[componentName]
-        : undefined;
-    const FrameworkComponent = typeof componentName === 'string'
-        ? frameworkComponents[componentName]
-        : undefined;
-    if (Component && FrameworkComponent) {
-        throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
-    }
-    if (FrameworkComponent) {
-        if (!createFrameworkComponent) {
-            throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
-        }
-        return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
-    }
-    if (!Component) {
-        if (fallback) {
-            return fallback();
-        }
-        throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
-    }
-    return new Component(id, componentName);
-}
-
 function watchElementResize(element, cb) {
     const observer = new ResizeObserver((entires) => {
         /**
@@ -850,10 +825,10 @@ class Splitview {
         const tmp = this.size;
         this.size = this.orthogonalSize;
         this.orthogonalSize = tmp;
-        removeClasses(this.element, 'horizontal', 'vertical');
+        removeClasses(this.element, 'dv-horizontal', 'dv-vertical');
         this.element.classList.add(this.orientation == exports.Orientation.HORIZONTAL
-            ? 'horizontal'
-            : 'vertical');
+            ? 'dv-horizontal'
+            : 'dv-vertical');
     }
     get minimumSize() {
         return this.viewItems.reduce((r, item) => r + item.minimumSize, 0);
@@ -1031,11 +1006,11 @@ class Splitview {
     }
     style(styles) {
         if ((styles === null || styles === void 0 ? void 0 : styles.separatorBorder) === 'transparent') {
-            removeClasses(this.element, 'separator-border');
+            removeClasses(this.element, 'dv-separator-border');
             this.element.style.removeProperty('--dv-separator-border');
         }
         else {
-            addClasses(this.element, 'separator-border');
+            addClasses(this.element, 'dv-separator-border');
             if (styles === null || styles === void 0 ? void 0 : styles.separatorBorder) {
                 this.element.style.setProperty('--dv-separator-border', styles.separatorBorder);
             }
@@ -1105,7 +1080,7 @@ class Splitview {
     }
     addView(view, size = { type: 'distribute' }, index = this.viewItems.length, skipLayout) {
         const container = document.createElement('div');
-        container.className = 'view';
+        container.className = 'dv-view';
         container.appendChild(view.element);
         let viewSize;
         if (typeof size === 'number') {
@@ -1137,7 +1112,7 @@ class Splitview {
         if (this.viewItems.length > 1) {
             //add sash
             const sash = document.createElement('div');
-            sash.className = 'sash';
+            sash.className = 'dv-sash';
             const onPointerStart = (event) => {
                 for (const item of this.viewItems) {
                     item.enabled = false;
@@ -1396,7 +1371,8 @@ class Splitview {
             const offset = i === 0 || visiblePanelsBeforeThisView === 0
                 ? 0
                 : viewLeftOffsets[i - 1] +
-                    (visiblePanelsBeforeThisView / sashCount) * marginReducedSize;
+                    (visiblePanelsBeforeThisView / sashCount) *
+                        marginReducedSize;
             if (i < this.viewItems.length - 1) {
                 // calculate sash position
                 const newSize = view.visible
@@ -1507,27 +1483,27 @@ class Splitview {
         }
     }
     updateSash(sash, state) {
-        toggleClass(sash.container, 'disabled', state === exports.SashState.DISABLED);
-        toggleClass(sash.container, 'enabled', state === exports.SashState.ENABLED);
-        toggleClass(sash.container, 'maximum', state === exports.SashState.MAXIMUM);
-        toggleClass(sash.container, 'minimum', state === exports.SashState.MINIMUM);
+        toggleClass(sash.container, 'dv-disabled', state === exports.SashState.DISABLED);
+        toggleClass(sash.container, 'dv-enabled', state === exports.SashState.ENABLED);
+        toggleClass(sash.container, 'dv-maximum', state === exports.SashState.MAXIMUM);
+        toggleClass(sash.container, 'dv-minimum', state === exports.SashState.MINIMUM);
     }
     createViewContainer() {
         const element = document.createElement('div');
-        element.className = 'view-container';
+        element.className = 'dv-view-container';
         return element;
     }
     createSashContainer() {
         const element = document.createElement('div');
-        element.className = 'sash-container';
+        element.className = 'dv-sash-container';
         return element;
     }
     createContainer() {
         const element = document.createElement('div');
         const orientationClassname = this._orientation === exports.Orientation.HORIZONTAL
-            ? 'horizontal'
-            : 'vertical';
-        element.className = `split-view-container ${orientationClassname}`;
+            ? 'dv-horizontal'
+            : 'dv-vertical';
+        element.className = `dv-split-view-container ${orientationClassname}`;
         return element;
     }
     dispose() {
@@ -1578,7 +1554,7 @@ class Paneview extends CompositeDisposable {
         this.onDidChange = this._onDidChange.event;
         this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : exports.Orientation.VERTICAL;
         this.element = document.createElement('div');
-        this.element.className = 'pane-container';
+        this.element.className = 'dv-pane-container';
         container.appendChild(this.element);
         this.splitview = new Splitview(this.element, {
             orientation: this._orientation,
@@ -1670,10 +1646,10 @@ class Paneview extends CompositeDisposable {
             clearTimeout(this.animationTimer);
             this.animationTimer = undefined;
         }
-        addClasses(this.element, 'animated');
+        addClasses(this.element, 'dv-animated');
         this.animationTimer = setTimeout(() => {
             this.animationTimer = undefined;
-            removeClasses(this.element, 'animated');
+            removeClasses(this.element, 'dv-animated');
         }, 200);
     }
     dispose() {
@@ -1898,7 +1874,7 @@ class BranchNode extends CompositeDisposable {
         this._orthogonalSize = orthogonalSize;
         this._size = size;
         this.element = document.createElement('div');
-        this.element.className = 'branch-node';
+        this.element.className = 'dv-branch-node';
         if (!childDescriptors) {
             this.splitview = new Splitview(this.element, {
                 orientation: this.orientation,
@@ -2109,7 +2085,7 @@ function getGridLocation(element) {
     if (!parentElement) {
         throw new Error('Invalid grid element');
     }
-    if (/\bgrid-view\b/.test(parentElement.className)) {
+    if (/\bdv-grid-view\b/.test(parentElement.className)) {
         return [];
     }
     const index = indexInParent(parentElement);
@@ -2246,6 +2222,7 @@ class Gridview {
         if (this.hasMaximizedView()) {
             this.exitMaximizedView();
         }
+        serializeBranchNode(this.getView(), this.orientation);
         const hiddenOnMaximize = [];
         function hideAllViewsBut(parent, exclude) {
             for (let i = 0; i < parent.children.length; i++) {
@@ -2267,7 +2244,10 @@ class Gridview {
         }
         hideAllViewsBut(this.root, node);
         this._maximizedNode = { leaf: node, hiddenOnMaximize };
-        this._onDidMaximizedNodeChange.fire();
+        this._onDidMaximizedNodeChange.fire({
+            view: node.view,
+            isMaximized: true,
+        });
     }
     exitMaximizedView() {
         if (!this._maximizedNode) {
@@ -2288,24 +2268,51 @@ class Gridview {
             }
         }
         showViewsInReverseOrder(this.root);
+        const tmp = this._maximizedNode.leaf;
         this._maximizedNode = undefined;
-        this._onDidMaximizedNodeChange.fire();
+        this._onDidMaximizedNodeChange.fire({
+            view: tmp.view,
+            isMaximized: false,
+        });
     }
     serialize() {
+        const maximizedView = this.maximizedView();
+        let maxmizedViewLocation;
+        if (maximizedView) {
+            /**
+             * The minimum information we can get away with in order to serialize a maxmized view is it's location within the grid
+             * which is represented as a branch of indices
+             */
+            maxmizedViewLocation = getGridLocation(maximizedView.element);
+        }
         if (this.hasMaximizedView()) {
             /**
-             * do not persist maximized view state
-             * firstly exit any maximized views to ensure the correct dimensions are persisted
+             * the saved layout cannot be in its maxmized state otherwise all of the underlying
+             * view dimensions will be wrong
+             *
+             * To counteract this we temporaily remove the maximized view to compute the serialized output
+             * of the grid before adding back the maxmized view as to not alter the layout from the users
+             * perspective when `.toJSON()` is called
              */
             this.exitMaximizedView();
         }
         const root = serializeBranchNode(this.getView(), this.orientation);
-        return {
+        const resullt = {
             root,
             width: this.width,
             height: this.height,
             orientation: this.orientation,
         };
+        if (maxmizedViewLocation) {
+            resullt.maximizedNode = {
+                location: maxmizedViewLocation,
+            };
+        }
+        if (maximizedView) {
+            // replace any maximzied view that was removed for serialization purposes
+            this.maximizeView(maximizedView);
+        }
+        return resullt;
     }
     dispose() {
         this.disposable.dispose();
@@ -2324,6 +2331,19 @@ class Gridview {
         const orientation = json.orientation;
         const height = orientation === exports.Orientation.VERTICAL ? json.height : json.width;
         this._deserialize(json.root, orientation, deserializer, height);
+        /**
+         * The deserialied layout must be positioned through this.layout(...)
+         * before any maximizedNode can be positioned
+         */
+        this.layout(json.width, json.height);
+        if (json.maximizedNode) {
+            const location = json.maximizedNode.location;
+            const [_, node] = this.getNode(location);
+            if (!(node instanceof LeafNode)) {
+                return;
+            }
+            this.maximizeView(node.view);
+        }
     }
     _deserialize(root, orientation, deserializer, orthogonalSize) {
         this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
@@ -2457,7 +2477,7 @@ class Gridview {
         this._onDidMaximizedNodeChange = new Emitter();
         this.onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event;
         this.element = document.createElement('div');
-        this.element.className = 'grid-view';
+        this.element.className = 'dv-grid-view';
         this._locked = locked !== null && locked !== void 0 ? locked : false;
         this._margin = margin !== null && margin !== void 0 ? margin : 0;
         this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this.locked, this.margin);
@@ -2748,6 +2768,8 @@ class BaseGrid extends Resizable {
         this.onDidRemove = this._onDidRemove.event;
         this._onDidAdd = new Emitter();
         this.onDidAdd = this._onDidAdd.event;
+        this._onDidMaximizedChange = new Emitter();
+        this.onDidMaximizedChange = this._onDidMaximizedChange.event;
         this._onDidActiveChange = new Emitter();
         this.onDidActiveChange = this._onDidActiveChange.event;
         this._bufferOnDidLayoutChange = new AsapEvent();
@@ -2763,7 +2785,12 @@ class BaseGrid extends Resizable {
         this.gridview.locked = !!options.locked;
         this.element.appendChild(this.gridview.element);
         this.layout(0, 0, true); // set some elements height/widths
-        this.addDisposables(this.gridview.onDidViewVisibilityChange(() => this._onDidViewVisibilityChangeMicroTaskQueue.fire()), this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+        this.addDisposables(this.gridview.onDidMaximizedNodeChange((event) => {
+            this._onDidMaximizedChange.fire({
+                panel: event.view,
+                isMaximized: event.isMaximized,
+            });
+        }), this.gridview.onDidViewVisibilityChange(() => this._onDidViewVisibilityChangeMicroTaskQueue.fire()), this.onDidViewVisibilityChangeMicroTaskQueue(() => {
             this.layout(this.width, this.height, true);
         }), exports.DockviewDisposable.from(() => {
             var _a;
@@ -2813,9 +2840,6 @@ class BaseGrid extends Resizable {
     hasMaximizedGroup() {
         return this.gridview.hasMaximizedView();
     }
-    get onDidMaximizedGroupChange() {
-        return this.gridview.onDidMaximizedNodeChange;
-    }
     doAddGroup(group, location = [0], size) {
         this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
         this._onDidAdd.fire(group);
@@ -3679,7 +3703,7 @@ class DragHandler extends CompositeDisposable {
                      * dnd logic. You can see the code at
                      * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
                      */
-                    event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                    event.dataTransfer.setData('text/plain', '');
                 }
             }
         }), addDisposableListener(this.el, 'dragend', () => {
@@ -3853,12 +3877,12 @@ class Droptarget extends CompositeDisposable {
                 this.markAsUsed(e);
                 if (!this.targetElement) {
                     this.targetElement = document.createElement('div');
-                    this.targetElement.className = 'drop-target-dropzone';
+                    this.targetElement.className = 'dv-drop-target-dropzone';
                     this.overlayElement = document.createElement('div');
-                    this.overlayElement.className = 'drop-target-selection';
+                    this.overlayElement.className = 'dv-drop-target-selection';
                     this._state = 'center';
                     this.targetElement.appendChild(this.overlayElement);
-                    this.element.classList.add('drop-target');
+                    this.element.classList.add('dv-drop-target');
                     this.element.append(this.targetElement);
                 }
                 this.toggleClasses(quadrant, width, height);
@@ -3996,7 +4020,7 @@ class Droptarget extends CompositeDisposable {
             this.element.removeChild(this.targetElement);
             this.targetElement = undefined;
             this.overlayElement = undefined;
-            this.element.classList.remove('drop-target');
+            this.element.classList.remove('dv-drop-target');
         }
     }
 }
@@ -4333,7 +4357,7 @@ class PaneviewPanel extends BasePanelView {
         this._headerVisible = isHeaderVisible;
         this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
         this._orientation = orientation;
-        this.element.classList.add('pane');
+        this.element.classList.add('dv-pane');
         this.addDisposables(this.api.onWillVisibilityChange((event) => {
             const { isVisible } = event;
             const { accessor } = this._params;
@@ -4430,14 +4454,14 @@ class PaneviewPanel extends BasePanelView {
     renderOnce() {
         this.header = document.createElement('div');
         this.header.tabIndex = 0;
-        this.header.className = 'pane-header';
+        this.header.className = 'dv-pane-header';
         this.header.style.height = `${this.headerSize}px`;
         this.header.style.lineHeight = `${this.headerSize}px`;
         this.header.style.minHeight = `${this.headerSize}px`;
         this.header.style.maxHeight = `${this.headerSize}px`;
         this.element.appendChild(this.header);
         this.body = document.createElement('div');
-        this.body.className = 'pane-body';
+        this.body.className = 'dv-pane-body';
         this.element.appendChild(this.body);
     }
     // TODO slightly hacky by-pass of the component to create a body and header component
@@ -4558,7 +4582,7 @@ class ContentContainer extends CompositeDisposable {
         this._onDidBlur = new Emitter();
         this.onDidBlur = this._onDidBlur.event;
         this._element = document.createElement('div');
-        this._element.className = 'content-container';
+        this._element.className = 'dv-content-container';
         this._element.tabIndex = -1;
         this.addDisposables(this._onDidFocus, this._onDidBlur);
         this.dropTarget = new Droptarget(this.element, {
@@ -4631,6 +4655,8 @@ class ContentContainer extends CompositeDisposable {
                     referenceContainer: this,
                 });
                 break;
+            default:
+                throw new Error(`dockview: invalid renderer type '${panel.api.renderer}'`);
         }
         if (doRender) {
             const focusTracker = trackFocus(container);
@@ -4697,10 +4723,10 @@ class Tab extends CompositeDisposable {
         this._onDragStart = new Emitter();
         this.onDragStart = this._onDragStart.event;
         this._element = document.createElement('div');
-        this._element.className = 'tab';
+        this._element.className = 'dv-tab';
         this._element.tabIndex = 0;
         this._element.draggable = true;
-        toggleClass(this.element, 'inactive-tab', true);
+        toggleClass(this.element, 'dv-inactive-tab', true);
         const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
         this.dropTarget = new Droptarget(this._element, {
             acceptedTargetZones: ['center'],
@@ -4733,8 +4759,8 @@ class Tab extends CompositeDisposable {
         }), this.dropTarget);
     }
     setActive(isActive) {
-        toggleClass(this.element, 'active-tab', isActive);
-        toggleClass(this.element, 'inactive-tab', !isActive);
+        toggleClass(this.element, 'dv-active-tab', isActive);
+        toggleClass(this.element, 'dv-inactive-tab', !isActive);
     }
     setContent(part) {
         if (this.content) {
@@ -4822,8 +4848,7 @@ class VoidContainer extends CompositeDisposable {
         this._onDragStart = new Emitter();
         this.onDragStart = this._onDragStart.event;
         this._element = document.createElement('div');
-        this._element.className = 'void-container';
-        this._element.tabIndex = 0;
+        this._element.className = 'dv-void-container';
         this._element.draggable = true;
         this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
             this.accessor.doSetGroupActive(this.group);
@@ -4942,16 +4967,16 @@ class TabsContainer extends CompositeDisposable {
         this._onWillShowOverlay = new Emitter();
         this.onWillShowOverlay = this._onWillShowOverlay.event;
         this._element = document.createElement('div');
-        this._element.className = 'tabs-and-actions-container';
+        this._element.className = 'dv-tabs-and-actions-container';
         toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
         this.rightActionsContainer = document.createElement('div');
-        this.rightActionsContainer.className = 'right-actions-container';
+        this.rightActionsContainer.className = 'dv-right-actions-container';
         this.leftActionsContainer = document.createElement('div');
-        this.leftActionsContainer.className = 'left-actions-container';
+        this.leftActionsContainer.className = 'dv-left-actions-container';
         this.preActionsContainer = document.createElement('div');
-        this.preActionsContainer.className = 'pre-actions-container';
+        this.preActionsContainer.className = 'dv-pre-actions-container';
         this.tabContainer = document.createElement('div');
-        this.tabContainer.className = 'tabs-container';
+        this.tabContainer.className = 'dv-tabs-container';
         this.voidContainer = new VoidContainer(this.accessor, this.group);
         this._element.appendChild(this.preActionsContainer);
         this._element.appendChild(this.tabContainer);
@@ -5040,14 +5065,10 @@ class TabsContainer extends CompositeDisposable {
         });
     }
     openPanel(panel, index = this.tabs.length) {
-        var _a;
         if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
             return;
         }
         const tab = new Tab(panel, this.accessor, this.group);
-        if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
-            throw new Error('invalid header component');
-        }
         tab.setContent(panel.view.tab);
         const disposable = new CompositeDisposable(tab.onDragStart((event) => {
             this._onTabDragStart.fire({ nativeEvent: event, panel });
@@ -5141,6 +5162,7 @@ const PROPERTY_KEYS = (() => {
         disableDnd: undefined,
         gap: undefined,
         className: undefined,
+        noPanelsOverlay: undefined,
     };
     return Object.keys(properties);
 })();
@@ -5237,7 +5259,7 @@ class WillShowOverlayLocationEvent {
 }
 class DockviewGroupPanelModel extends CompositeDisposable {
     get element() {
-        throw new Error('not supported');
+        throw new Error('dockview: not supported');
     }
     get activePanel() {
         return this._activePanel;
@@ -5247,7 +5269,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
     }
     set locked(value) {
         this._locked = value;
-        toggleClass(this.container, 'locked-groupview', value === 'no-drop-target' || value);
+        toggleClass(this.container, 'dv-locked-groupview', value === 'no-drop-target' || value);
     }
     get isActive() {
         return this._isGroupActive;
@@ -5318,6 +5340,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this._locked = false;
         this._location = { type: 'grid' };
         this.mostRecentlyUsed = [];
+        this._overwriteRenderContainer = null;
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
         this._width = 0;
@@ -5348,8 +5371,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
         this._onUnhandledDragOverEvent = new Emitter();
         this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
-        this._overwriteRenderContainer = null;
-        toggleClass(this.container, 'groupview', true);
+        toggleClass(this.container, 'dv-groupview', true);
         this._api = new DockviewApi(this.accessor);
         this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
         this.contentContainer = new ContentContainer(this.accessor, this);
@@ -5581,7 +5603,10 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this.doClose(panel);
     }
     doClose(panel) {
-        this.accessor.removePanel(panel);
+        const isLast = this.panels.length === 1 && this.accessor.groups.length === 1;
+        this.accessor.removePanel(panel, isLast && this.accessor.options.noPanelsOverlay === 'emptyGroup'
+            ? { removeEmptyGroup: false }
+            : undefined);
     }
     isPanelActive(panel) {
         return this._activePanel === panel;
@@ -5594,8 +5619,8 @@ class DockviewGroupPanelModel extends CompositeDisposable {
             return;
         }
         this._isGroupActive = isGroupActive;
-        toggleClass(this.container, 'active-group', isGroupActive);
-        toggleClass(this.container, 'inactive-group', !isGroupActive);
+        toggleClass(this.container, 'dv-active-group', isGroupActive);
+        toggleClass(this.container, 'dv-inactive-group', !isGroupActive);
         this.tabsContainer.setActive(this.isActive);
         if (!this._activePanel && this.panels.length > 0) {
             this.doSetActivePanel(this.panels[0]);
@@ -5687,7 +5712,6 @@ class DockviewGroupPanelModel extends CompositeDisposable {
     }
     updateContainer() {
         var _a, _b;
-        toggleClass(this.container, 'empty', this.isEmpty);
         this.panels.forEach((panel) => panel.runEvents());
         if (this.isEmpty && !this.watermark) {
             const watermark = this.accessor.createWatermarkComponent();
@@ -5701,14 +5725,12 @@ class DockviewGroupPanelModel extends CompositeDisposable {
                     this.accessor.doSetGroupActive(this.groupPanel);
                 }
             });
-            this.tabsContainer.hide();
             this.contentContainer.element.appendChild(this.watermark.element);
         }
         if (!this.isEmpty && this.watermark) {
             this.watermark.element.remove();
             (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
             this.watermark = undefined;
-            this.tabsContainer.show();
         }
     }
     canDisplayOverlay(event, position, target) {
@@ -5828,6 +5850,34 @@ class GridviewPanel extends BasePanelView {
         return this._snap;
     }
     get minimumWidth() {
+        /**
+         * defer to protected function to allow subclasses to override easily.
+         * see https://github.com/microsoft/TypeScript/issues/338
+         */
+        return this.__minimumWidth();
+    }
+    get minimumHeight() {
+        /**
+         * defer to protected function to allow subclasses to override easily.
+         * see https://github.com/microsoft/TypeScript/issues/338
+         */
+        return this.__minimumHeight();
+    }
+    get maximumHeight() {
+        /**
+         * defer to protected function to allow subclasses to override easily.
+         * see https://github.com/microsoft/TypeScript/issues/338
+         */
+        return this.__maximumHeight();
+    }
+    get maximumWidth() {
+        /**
+         * defer to protected function to allow subclasses to override easily.
+         * see https://github.com/microsoft/TypeScript/issues/338
+         */
+        return this.__maximumWidth();
+    }
+    __minimumWidth() {
         const width = typeof this._minimumWidth === 'function'
             ? this._minimumWidth()
             : this._minimumWidth;
@@ -5837,7 +5887,17 @@ class GridviewPanel extends BasePanelView {
         }
         return width;
     }
-    get minimumHeight() {
+    __maximumWidth() {
+        const width = typeof this._maximumWidth === 'function'
+            ? this._maximumWidth()
+            : this._maximumWidth;
+        if (width !== this._evaluatedMaximumWidth) {
+            this._evaluatedMaximumWidth = width;
+            this.updateConstraints();
+        }
+        return width;
+    }
+    __minimumHeight() {
         const height = typeof this._minimumHeight === 'function'
             ? this._minimumHeight()
             : this._minimumHeight;
@@ -5847,7 +5907,7 @@ class GridviewPanel extends BasePanelView {
         }
         return height;
     }
-    get maximumHeight() {
+    __maximumHeight() {
         const height = typeof this._maximumHeight === 'function'
             ? this._maximumHeight()
             : this._maximumHeight;
@@ -5857,16 +5917,6 @@ class GridviewPanel extends BasePanelView {
         }
         return height;
     }
-    get maximumWidth() {
-        const width = typeof this._maximumWidth === 'function'
-            ? this._maximumWidth()
-            : this._maximumWidth;
-        if (width !== this._evaluatedMaximumWidth) {
-            this._evaluatedMaximumWidth = width;
-            this.updateConstraints();
-        }
-        return width;
-    }
     get isActive() {
         return this.api.isActive;
     }
@@ -6017,6 +6067,7 @@ class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
                 position: options.group
                     ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center'
                     : 'center',
+                index: options.index,
             },
         });
     }
@@ -6068,30 +6119,34 @@ class DockviewGroupPanel extends GridviewPanel {
     get minimumWidth() {
         var _a;
         const activePanelMinimumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumWidth;
-        return typeof activePanelMinimumWidth === 'number'
-            ? activePanelMinimumWidth
-            : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH;
+        if (typeof activePanelMinimumWidth === 'number') {
+            return activePanelMinimumWidth;
+        }
+        return super.__minimumWidth();
     }
     get minimumHeight() {
         var _a;
         const activePanelMinimumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumHeight;
-        return typeof activePanelMinimumHeight === 'number'
-            ? activePanelMinimumHeight
-            : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT;
+        if (typeof activePanelMinimumHeight === 'number') {
+            return activePanelMinimumHeight;
+        }
+        return super.__minimumHeight();
     }
     get maximumWidth() {
         var _a;
         const activePanelMaximumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumWidth;
-        return typeof activePanelMaximumWidth === 'number'
-            ? activePanelMaximumWidth
-            : Number.MAX_SAFE_INTEGER;
+        if (typeof activePanelMaximumWidth === 'number') {
+            return activePanelMaximumWidth;
+        }
+        return super.__maximumWidth();
     }
     get maximumHeight() {
         var _a;
         const activePanelMaximumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumHeight;
-        return typeof activePanelMaximumHeight === 'number'
-            ? activePanelMaximumHeight
-            : Number.MAX_SAFE_INTEGER;
+        if (typeof activePanelMaximumHeight === 'number') {
+            return activePanelMaximumHeight;
+        }
+        return super.__maximumHeight();
     }
     get panels() {
         return this._model.panels;
@@ -6205,12 +6260,14 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         return this.group.api.getWindow();
     }
     moveTo(options) {
-        var _a;
+        var _a, _b;
         this.accessor.moveGroupOrPanel({
             from: { groupId: this._group.id, panelId: this.panel.id },
             to: {
-                group: options.group,
-                position: (_a = options.position) !== null && _a !== void 0 ? _a : 'center',
+                group: (_a = options.group) !== null && _a !== void 0 ? _a : this._group,
+                position: options.group
+                    ? (_b = options.position) !== null && _b !== void 0 ? _b : 'center'
+                    : 'center',
                 index: options.index,
             },
         });
@@ -6429,7 +6486,7 @@ const createSvgElementFromPath = (params) => {
     svg.setAttributeNS(null, 'viewBox', params.viewbox);
     svg.setAttributeNS(null, 'aria-hidden', 'false');
     svg.setAttributeNS(null, 'focusable', 'false');
-    svg.classList.add('dockview-svg');
+    svg.classList.add('dv-svg');
     const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
     path.setAttributeNS(null, 'd', params.path);
     svg.appendChild(path);
@@ -6600,39 +6657,10 @@ class Watermark extends CompositeDisposable {
     constructor() {
         super();
         this._element = document.createElement('div');
-        this._element.className = 'watermark';
-        const title = document.createElement('div');
-        title.className = 'watermark-title';
-        const emptySpace = document.createElement('span');
-        emptySpace.style.flexGrow = '1';
-        const content = document.createElement('div');
-        content.className = 'watermark-content';
-        this._element.appendChild(title);
-        this._element.appendChild(content);
-        const actionsContainer = document.createElement('div');
-        actionsContainer.className = 'actions-container';
-        const closeAnchor = document.createElement('div');
-        closeAnchor.className = 'close-action';
-        closeAnchor.appendChild(createCloseButton());
-        actionsContainer.appendChild(closeAnchor);
-        title.appendChild(emptySpace);
-        title.appendChild(actionsContainer);
-        this.addDisposables(addDisposableListener(closeAnchor, 'click', (event) => {
-            var _a;
-            event.preventDefault();
-            if (this._group) {
-                (_a = this._api) === null || _a === void 0 ? void 0 : _a.removeGroup(this._group);
-            }
-        }));
+        this._element.className = 'dv-watermark';
     }
     init(_params) {
-        this._api = _params.containerApi;
-        this._group = _params.group;
-        this.render();
-    }
-    render() {
-        const isOneGroup = !!(this._api && this._api.size <= 1);
-        toggleClass(this.element, 'has-actions', isOneGroup);
+        // noop
     }
 }
 
@@ -6669,6 +6697,9 @@ class Overlay extends CompositeDisposable {
     get element() {
         return this._element;
     }
+    get isVisible() {
+        return this._isVisible;
+    }
     constructor(options) {
         super();
         this.options = options;
@@ -6679,6 +6710,7 @@ class Overlay extends CompositeDisposable {
         this.onDidChangeEnd = this._onDidChangeEnd.event;
         this.addDisposables(this._onDidChange, this._onDidChangeEnd);
         this._element.className = 'dv-resize-container';
+        this._isVisible = true;
         this.setupResize('top');
         this.setupResize('bottom');
         this.setupResize('left');
@@ -6693,6 +6725,13 @@ class Overlay extends CompositeDisposable {
         this.setBounds(Object.assign(Object.assign(Object.assign(Object.assign({ height: this.options.height, width: this.options.width }, ('top' in this.options && { top: this.options.top })), ('bottom' in this.options && { bottom: this.options.bottom })), ('left' in this.options && { left: this.options.left })), ('right' in this.options && { right: this.options.right })));
         arialLevelTracker.push(this._element);
     }
+    setVisible(isVisible) {
+        if (isVisible === this.isVisible) {
+            return;
+        }
+        this._isVisible = isVisible;
+        toggleClass(this.element, 'dv-hidden', !this.isVisible);
+    }
     bringToFront() {
         arialLevelTracker.push(this._element);
     }
@@ -7243,7 +7282,6 @@ class PopoutWindow extends CompositeDisposable {
                 window: this._window.value,
             });
             this._window.disposable.dispose();
-            this._window.value.close();
             this._window = null;
             this._onDidClose.fire();
         }
@@ -7275,7 +7313,9 @@ class PopoutWindow extends CompositeDisposable {
             }
             const disposable = new CompositeDisposable();
             this._window = { value: externalWindow, disposable };
-            disposable.addDisposables(addDisposableWindowListener(window, 'beforeunload', () => {
+            disposable.addDisposables(exports.DockviewDisposable.from(() => {
+                externalWindow.close();
+            }), addDisposableWindowListener(window, 'beforeunload', () => {
                 /**
                  * before the main window closes we should close this popup too
                  * to be good citizens
@@ -7292,7 +7332,7 @@ class PopoutWindow extends CompositeDisposable {
                 id: this.target,
                 window: externalWindow,
             });
-            return new Promise((resolve) => {
+            return new Promise((resolve, reject) => {
                 externalWindow.addEventListener('unload', (e) => {
                     // if page fails to load before unloading
                     // this.close();
@@ -7301,21 +7341,27 @@ class PopoutWindow extends CompositeDisposable {
                     /**
                      * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
                      */
-                    const externalDocument = externalWindow.document;
-                    externalDocument.title = document.title;
-                    externalDocument.body.appendChild(container);
-                    addStyles(externalDocument, window.document.styleSheets);
-                    /**
-                     * beforeunload must be registered after load for reasons I could not determine
-                     * otherwise the beforeunload event will not fire when the window is closed
-                     */
-                    addDisposableWindowListener(externalWindow, 'beforeunload', () => {
+                    try {
+                        const externalDocument = externalWindow.document;
+                        externalDocument.title = document.title;
+                        externalDocument.body.appendChild(container);
+                        addStyles(externalDocument, window.document.styleSheets);
                         /**
-                         * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+                         * beforeunload must be registered after load for reasons I could not determine
+                         * otherwise the beforeunload event will not fire when the window is closed
                          */
-                        this.close();
-                    });
-                    resolve(container);
+                        addDisposableWindowListener(externalWindow, 'beforeunload', () => {
+                            /**
+                             * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+                             */
+                            this.close();
+                        });
+                        resolve(container);
+                    }
+                    catch (err) {
+                        // only except this is the DOM isn't setup. e.g. in a in correctly configured test
+                        reject(err);
+                    }
                 });
             });
         });
@@ -7422,6 +7468,8 @@ class DockviewComponent extends BaseGrid {
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
         this._onDidMovePanel = new Emitter();
         this.onDidMovePanel = this._onDidMovePanel.event;
+        this._onDidMaximizedGroupChange = new Emitter();
+        this.onDidMaximizedGroupChange = this._onDidMaximizedGroupChange.event;
         this._floatingGroups = [];
         this._popoutGroups = [];
         this._onDidRemoveGroup = new Emitter();
@@ -7448,6 +7496,11 @@ class DockviewComponent extends BaseGrid {
             if (!this._moving) {
                 this._onDidActiveGroupChange.fire(event);
             }
+        }), this.onDidMaximizedChange((event) => {
+            this._onDidMaximizedGroupChange.fire({
+                group: event.panel,
+                isMaximized: event.isMaximized,
+            });
         }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove)(() => {
             this.updateWatermark();
         }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidMovePanel, this.onDidActivePanelChange)(() => {
@@ -7546,8 +7599,28 @@ class DockviewComponent extends BaseGrid {
         this._api = new DockviewApi(this);
         this.updateWatermark();
     }
+    setVisible(panel, visible) {
+        switch (panel.api.location.type) {
+            case 'grid':
+                super.setVisible(panel, visible);
+                break;
+            case 'floating': {
+                const item = this.floatingGroups.find((floatingGroup) => floatingGroup.group === panel);
+                if (item) {
+                    item.overlay.setVisible(visible);
+                    panel.api._onDidVisibilityChange.fire({
+                        isVisible: visible,
+                    });
+                }
+                break;
+            }
+            case 'popout':
+                console.warn('dockview: You cannot hide a group that is in a popout window');
+                break;
+        }
+    }
     addPopoutGroup(itemToPopout, options) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         if (itemToPopout instanceof DockviewPanel &&
             itemToPopout.group.size === 1) {
             return this.addPopoutGroup(itemToPopout.group, options);
@@ -7568,12 +7641,9 @@ class DockviewComponent extends BaseGrid {
         }
         const box = getBox();
         const groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId();
-        if (itemToPopout.api.location.type === 'grid') {
-            itemToPopout.api.setVisible(false);
-        }
         const _window = new PopoutWindow(`${this.id}-${groupId}`, // unique id
         theme !== null && theme !== void 0 ? theme : '', {
-            url: (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : '/popout.html',
+            url: (_e = (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : (_d = this.options) === null || _d === void 0 ? void 0 : _d.popoutUrl) !== null && _e !== void 0 ? _e : '/popout.html',
             left: window.screenX + box.left,
             top: window.screenY + box.top,
             width: box.width,
@@ -7587,13 +7657,12 @@ class DockviewComponent extends BaseGrid {
         return _window
             .open()
             .then((popoutContainer) => {
-            var _a;
             if (_window.isDisposed) {
-                return;
+                return false;
             }
             if (popoutContainer === null) {
                 popoutWindowDisposable.dispose();
-                return;
+                return false;
             }
             const gready = document.createElement('div');
             gready.className = 'dv-overlay-render-container';
@@ -7602,30 +7671,45 @@ class DockviewComponent extends BaseGrid {
                 ? itemToPopout.group
                 : itemToPopout;
             const referenceLocation = itemToPopout.api.location.type;
-            const group = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) !== null && _a !== void 0 ? _a : this.createGroup({ id: groupId });
-            group.model.renderContainer = overlayRenderContainer;
-            if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup)) {
-                this._onDidAddGroup.fire(group);
+            /**
+             * The group that is being added doesn't already exist within the DOM, the most likely occurance
+             * of this case is when being called from the `fromJSON(...)` method
+             */
+            const isGroupAddedToDom = referenceGroup.element.parentElement !== null;
+            let group;
+            if (!isGroupAddedToDom) {
+                group = referenceGroup;
             }
-            if (itemToPopout instanceof DockviewPanel) {
-                this.movingLock(() => {
-                    const panel = referenceGroup.model.removePanel(itemToPopout);
-                    group.model.openPanel(panel);
-                });
+            else if (options === null || options === void 0 ? void 0 : options.overridePopoutGroup) {
+                group = options.overridePopoutGroup;
             }
             else {
-                this.movingLock(() => moveGroupWithoutDestroying({
-                    from: referenceGroup,
-                    to: group,
-                }));
-                switch (referenceLocation) {
-                    case 'grid':
-                        referenceGroup.api.setVisible(false);
-                        break;
-                    case 'floating':
-                    case 'popout':
-                        this.removeGroup(referenceGroup);
-                        break;
+                group = this.createGroup({ id: groupId });
+                this._onDidAddGroup.fire(group);
+            }
+            group.model.renderContainer = overlayRenderContainer;
+            group.layout(_window.window.innerWidth, _window.window.innerHeight);
+            if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup) && isGroupAddedToDom) {
+                if (itemToPopout instanceof DockviewPanel) {
+                    this.movingLock(() => {
+                        const panel = referenceGroup.model.removePanel(itemToPopout);
+                        group.model.openPanel(panel);
+                    });
+                }
+                else {
+                    this.movingLock(() => moveGroupWithoutDestroying({
+                        from: referenceGroup,
+                        to: group,
+                    }));
+                    switch (referenceLocation) {
+                        case 'grid':
+                            referenceGroup.api.setVisible(false);
+                            break;
+                        case 'floating':
+                        case 'popout':
+                            this.removeGroup(referenceGroup);
+                            break;
+                    }
                 }
             }
             popoutContainer.classList.add('dv-dockview');
@@ -7635,7 +7719,12 @@ class DockviewComponent extends BaseGrid {
             group.model.location = {
                 type: 'popout',
                 getWindow: () => _window.window,
+                popoutUrl: options === null || options === void 0 ? void 0 : options.popoutUrl,
             };
+            if (isGroupAddedToDom &&
+                itemToPopout.api.location.type === 'grid') {
+                itemToPopout.api.setVisible(false);
+            }
             this.doSetGroupAndPanelActive(group);
             popoutWindowDisposable.addDisposables(group.api.onDidActiveChange((event) => {
                 var _a;
@@ -7647,10 +7736,13 @@ class DockviewComponent extends BaseGrid {
                 (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
             }));
             let returnedGroup;
+            const isValidReferenceGroup = isGroupAddedToDom &&
+                referenceGroup &&
+                this.getPanel(referenceGroup.id);
             const value = {
                 window: _window,
                 popoutGroup: group,
-                referenceGroup: this.getPanel(referenceGroup.id)
+                referenceGroup: isValidReferenceGroup
                     ? referenceGroup.id
                     : undefined,
                 disposable: {
@@ -7667,9 +7759,10 @@ class DockviewComponent extends BaseGrid {
              * window dimensions
              */
             addDisposableWindowListener(_window.window, 'resize', () => {
-                group.layout(window.innerWidth, window.innerHeight);
+                group.layout(_window.window.innerWidth, _window.window.innerHeight);
             }), overlayRenderContainer, exports.DockviewDisposable.from(() => {
-                if (this.getPanel(referenceGroup.id)) {
+                if (isGroupAddedToDom &&
+                    this.getPanel(referenceGroup.id)) {
                     this.movingLock(() => moveGroupWithoutDestroying({
                         from: group,
                         to: referenceGroup,
@@ -7684,21 +7777,27 @@ class DockviewComponent extends BaseGrid {
                     }
                 }
                 else if (this.getPanel(group.id)) {
-                    const removedGroup = this.doRemoveGroup(group, {
+                    this.doRemoveGroup(group, {
                         skipDispose: true,
                         skipActive: true,
+                        skipPopoutReturn: true,
                     });
+                    const removedGroup = group;
                     removedGroup.model.renderContainer =
                         this.overlayRenderContainer;
                     removedGroup.model.location = { type: 'grid' };
                     returnedGroup = removedGroup;
+                    this.doAddGroup(removedGroup, [0]);
+                    this.doSetGroupAndPanelActive(removedGroup);
                 }
             }));
             this._popoutGroups.push(value);
             this.updateWatermark();
+            return true;
         })
             .catch((err) => {
             console.error('dockview: failed to create popout window', err);
+            return false;
         });
     }
     addFloatingGroup(item, options) {
@@ -7802,7 +7901,7 @@ class DockviewComponent extends BaseGrid {
                 : (_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
                 : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
-        const el = group.element.querySelector('.void-container');
+        const el = group.element.querySelector('.dv-void-container');
         if (!el) {
             throw new Error('failed to find drag handle');
         }
@@ -7994,6 +8093,9 @@ class DockviewComponent extends BaseGrid {
                 data: group.popoutGroup.toJSON(),
                 gridReferenceGroup: group.referenceGroup,
                 position: group.window.dimensions(),
+                url: group.popoutGroup.api.location.type === 'popout'
+                    ? group.popoutGroup.api.location.popoutUrl
+                    : undefined,
             };
         });
         const result = {
@@ -8080,16 +8182,16 @@ class DockviewComponent extends BaseGrid {
             }
             const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
             for (const serializedPopoutGroup of serializedPopoutGroups) {
-                const { data, position, gridReferenceGroup } = serializedPopoutGroup;
+                const { data, position, gridReferenceGroup, url } = serializedPopoutGroup;
                 const group = createGroupFromSerializedState(data);
                 this.addPopoutGroup((_c = (gridReferenceGroup
                     ? this.getPanel(gridReferenceGroup)
                     : undefined)) !== null && _c !== void 0 ? _c : group, {
-                    skipRemoveGroup: true,
                     position: position !== null && position !== void 0 ? position : undefined,
                     overridePopoutGroup: gridReferenceGroup
                         ? group
                         : undefined,
+                    popoutUrl: url,
                 });
             }
             for (const floatingGroup of this._floatingGroups) {
@@ -8103,6 +8205,7 @@ class DockviewComponent extends BaseGrid {
             }
         }
         catch (err) {
+            console.error('dockview: failed to deserialize layout. Reverting changes', err);
             /**
              * Takes all the successfully created groups and remove all of their panels.
              */
@@ -8170,11 +8273,13 @@ class DockviewComponent extends BaseGrid {
             width: options.initialWidth,
             height: options.initialHeight,
         };
+        let index;
         if (options.position) {
             if (isPanelOptionsWithPanel(options.position)) {
                 const referencePanel = typeof options.position.referencePanel === 'string'
                     ? this.getGroupPanel(options.position.referencePanel)
                     : options.position.referencePanel;
+                index = options.position.index;
                 if (!referencePanel) {
                     throw new Error(`referencePanel '${options.position.referencePanel}' does not exist`);
                 }
@@ -8185,6 +8290,7 @@ class DockviewComponent extends BaseGrid {
                     typeof options.position.referenceGroup === 'string'
                         ? (_a = this._groups.get(options.position.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
                         : options.position.referenceGroup;
+                index = options.position.index;
                 if (!referenceGroup) {
                     throw new Error(`referenceGroup '${options.position.referenceGroup}' does not exist`);
                 }
@@ -8195,6 +8301,7 @@ class DockviewComponent extends BaseGrid {
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
                 if (!options.inactive) {
                     this.doSetGroupAndPanelActive(group);
@@ -8224,6 +8331,7 @@ class DockviewComponent extends BaseGrid {
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
             }
             else if (referenceGroup.api.location.type === 'floating' ||
@@ -8232,6 +8340,7 @@ class DockviewComponent extends BaseGrid {
                 referenceGroup.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
                 referenceGroup.api.setSize({
                     width: initial === null || initial === void 0 ? void 0 : initial.width,
@@ -8252,6 +8361,7 @@ class DockviewComponent extends BaseGrid {
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
                 if (!options.inactive) {
                     this.doSetGroupAndPanelActive(group);
@@ -8270,6 +8380,7 @@ class DockviewComponent extends BaseGrid {
             group.model.openPanel(panel, {
                 skipSetActive: options.inactive,
                 skipSetGroupActive: options.inactive,
+                index,
             });
         }
         else {
@@ -8280,6 +8391,7 @@ class DockviewComponent extends BaseGrid {
             group.model.openPanel(panel, {
                 skipSetActive: options.inactive,
                 skipSetGroupActive: options.inactive,
+                index,
             });
             if (!options.inactive) {
                 this.doSetGroupAndPanelActive(group);
@@ -8289,7 +8401,6 @@ class DockviewComponent extends BaseGrid {
     }
     removePanel(panel, options = {
         removeEmptyGroup: true,
-        skipDispose: false,
     }) {
         const group = panel.group;
         if (!group) {
@@ -8820,6 +8931,31 @@ class DockviewComponent extends BaseGrid {
     }
 }
 
+function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
+    const Component = typeof componentName === 'string'
+        ? components[componentName]
+        : undefined;
+    const FrameworkComponent = typeof componentName === 'string'
+        ? frameworkComponents[componentName]
+        : undefined;
+    if (Component && FrameworkComponent) {
+        throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
+    }
+    if (FrameworkComponent) {
+        if (!createFrameworkComponent) {
+            throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
+        }
+        return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
+    }
+    if (!Component) {
+        if (fallback) {
+            return fallback();
+        }
+        throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
+    }
+    return new Component(id, componentName);
+}
+
 class GridviewComponent extends BaseGrid {
     get orientation() {
         return this.gridview.orientation;
@@ -9368,12 +9504,14 @@ class DefaultHeader extends CompositeDisposable {
         this._expandedIcon = createExpandMoreButton();
         this._collapsedIcon = createChevronRightButton();
         this.disposable = new MutableDisposable();
-        this.apiRef = { api: null };
+        this.apiRef = {
+            api: null,
+        };
         this._element = document.createElement('div');
-        this.element.className = 'default-header';
+        this.element.className = 'dv-default-header';
         this._content = document.createElement('span');
         this._expander = document.createElement('div');
-        this._expander.className = 'dockview-pane-header-icon';
+        this._expander.className = 'dv-pane-header-icon';
         this.element.appendChild(this._expander);
         this.element.appendChild(this._content);
         this.addDisposables(addDisposableListener(this._element, 'click', () => {
@@ -10230,22 +10368,6 @@ const DockviewReact = React.forwardRef((props, ref) => {
             disposable.dispose();
         };
     }, [props.onDidDrop]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return () => {
-                // noop
-            };
-        }
-        const disposable = dockviewRef.current.onUnhandledDragOverEvent((event) => {
-            var _a;
-            if ((_a = props.showDndOverlay) === null || _a === void 0 ? void 0 : _a.call(props, event)) {
-                event.accept();
-            }
-        });
-        return () => {
-            disposable.dispose();
-        };
-    }, [props.showDndOverlay]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
             return () => {
@@ -10663,7 +10785,6 @@ exports.GridviewApi = GridviewApi;
 exports.GridviewComponent = GridviewComponent;
 exports.GridviewPanel = GridviewPanel;
 exports.GridviewReact = GridviewReact;
-exports.LocalSelectionTransfer = LocalSelectionTransfer;
 exports.PROPERTY_KEYS = PROPERTY_KEYS;
 exports.PaneFramework = PaneFramework;
 exports.PaneTransfer = PaneTransfer;
@@ -10682,7 +10803,6 @@ exports.SplitviewPanel = SplitviewPanel;
 exports.SplitviewReact = SplitviewReact;
 exports.Tab = Tab;
 exports.WillShowOverlayLocationEvent = WillShowOverlayLocationEvent;
-exports.createComponent = createComponent;
 exports.createDockview = createDockview;
 exports.createGridview = createGridview;
 exports.createPaneview = createPaneview;