dockview-react 1.17.1 → 2.0.0

package/dist/dockview-react.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 1.17.1
+ * @version 2.0.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -33,7 +33,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
   }
 
-  var css_248z = ".dockview-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: white;\n  --dv-tabs-and-actions-container-background-color: #f3f3f3;\n  --dv-activegroup-visiblepanel-tab-background-color: white;\n  --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-inactivegroup-visiblepanel-tab-background-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-tab-divider-color: white;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n  --dv-separator-border: rgba(128, 128, 128, 0.35);\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n  --dv-tabs-and-actions-container-background-color: #2d2d30;\n  --dv-tabs-and-actions-container-height: 20px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n  --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: white;\n  --dv-inactivegroup-visiblepanel-tab-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #000c18;\n  --dv-tabs-and-actions-container-background-color: #1c1c2a;\n  --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-tab-divider-color: #2b2b4a;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n  --dv-separator-border: #2b2b4a;\n  --dv-paneview-header-border-color: #2b2b4a;\n  --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #282a36;\n  --dv-tabs-and-actions-container-background-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-tab-divider-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n  --dv-separator-border: #bd93f9;\n  --dv-paneview-header-border-color: #bd93f9;\n  --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #94527e;\n  z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  bottom: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #5e3d5a;\n  z-index: 999;\n}\n\n.dockview-theme-replit {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #ebeced;\n  --dv-tabs-and-actions-container-background-color: #fcfcfc;\n  --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-activegroup-hiddenpanel-tab-background-color: #fcfcfc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n  --dv-tab-divider-color: transparent;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-separator-border: transparent;\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n  --dv-background-color: #ebeced;\n  --dv-separator-handle-background-color: #cfd1d3;\n  --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-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  position: absolute;\n  z-index: 997;\n  border: 1px solid var(--dv-tab-divider-color);\n  box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-resize-container-dragging {\n  opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n  height: calc(100% - 8px);\n  width: 4px;\n  left: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n  height: calc(100% - 8px);\n  width: 4px;\n  right: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n  height: 4px;\n  width: 4px;\n  top: -2px;\n  left: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n  height: 4px;\n  width: 4px;\n  left: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: se-resize;\n}\n.dv-render-overlay {\n  position: absolute;\n  z-index: 1;\n  height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n  z-index: 998;\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-empty > .dv-tabs-and-actions-container {\n  display: 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-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  width: 100%;\n}\n.dv-watermark.dv-has-actions .dv-watermark-title .dv-actions-container {\n  display: none;\n}\n.dv-watermark .dv-watermark-title {\n  height: 35px;\n  width: 100%;\n  display: flex;\n}\n.dv-watermark .dv-watermark-content {\n  flex-grow: 1;\n}\n.dv-watermark .dv-actions-container {\n  display: flex;\n  align-items: center;\n  padding: 0px 8px;\n}\n.dv-watermark .dv-actions-container .dv-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.dv-watermark .dv-actions-container .dv-close-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}";
   styleInject(css_248z);
 
   class TransferObject {
@@ -354,31 +354,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
-  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) => {
           /**
@@ -847,10 +822,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           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);
@@ -1028,11 +1003,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       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);
               }
@@ -1102,7 +1077,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       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') {
@@ -1134,7 +1109,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           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;
@@ -1393,7 +1368,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               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
@@ -1504,27 +1480,27 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
       }
       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() {
@@ -1575,7 +1551,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           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,
@@ -1667,10 +1643,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               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() {
@@ -1895,7 +1871,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           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,
@@ -2106,7 +2082,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       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);
@@ -2454,7 +2430,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           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);
@@ -3676,7 +3652,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                        * 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', () => {
@@ -3850,12 +3826,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   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);
@@ -3993,7 +3969,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               this.element.removeChild(this.targetElement);
               this.targetElement = undefined;
               this.overlayElement = undefined;
-              this.element.classList.remove('drop-target');
+              this.element.classList.remove('dv-drop-target');
           }
       }
   }
@@ -4330,7 +4306,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           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;
@@ -4427,14 +4403,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       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
@@ -4555,7 +4531,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           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, {
@@ -4628,6 +4604,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       referenceContainer: this,
                   });
                   break;
+              default:
+                  throw new Error(`dockview: invalid renderer type '${panel.api.renderer}'`);
           }
           if (doRender) {
               const focusTracker = trackFocus(container);
@@ -4694,10 +4672,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           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'],
@@ -4730,8 +4708,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }), 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) {
@@ -4819,7 +4797,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._onDragStart = new Emitter();
           this.onDragStart = this._onDragStart.event;
           this._element = document.createElement('div');
-          this._element.className = 'void-container';
+          this._element.className = 'dv-void-container';
           this._element.tabIndex = 0;
           this._element.draggable = true;
           this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
@@ -4939,16 +4917,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           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);
@@ -5037,14 +5015,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           });
       }
       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 });
@@ -5234,7 +5208,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   }
   class DockviewGroupPanelModel extends CompositeDisposable {
       get element() {
-          throw new Error('not supported');
+          throw new Error('dockview: not supported');
       }
       get activePanel() {
           return this._activePanel;
@@ -5244,7 +5218,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       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;
@@ -5315,6 +5289,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._locked = false;
           this._location = { type: 'grid' };
           this.mostRecentlyUsed = [];
+          this._overwriteRenderContainer = null;
           this._onDidChange = new Emitter();
           this.onDidChange = this._onDidChange.event;
           this._width = 0;
@@ -5345,8 +5320,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           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);
@@ -5591,8 +5565,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               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]);
@@ -5684,7 +5658,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       updateContainer() {
           var _a, _b;
-          toggleClass(this.container, 'empty', this.isEmpty);
+          toggleClass(this.container, 'dv-empty', this.isEmpty);
           this.panels.forEach((panel) => panel.runEvents());
           if (this.isEmpty && !this.watermark) {
               const watermark = this.accessor.createWatermarkComponent();
@@ -5825,6 +5799,34 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           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;
@@ -5834,7 +5836,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           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;
@@ -5844,7 +5856,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           return height;
       }
-      get maximumHeight() {
+      __maximumHeight() {
           const height = typeof this._maximumHeight === 'function'
               ? this._maximumHeight()
               : this._maximumHeight;
@@ -5854,16 +5866,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           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;
       }
@@ -6014,6 +6016,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   position: options.group
                       ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center'
                       : 'center',
+                  index: options.index,
               },
           });
       }
@@ -6065,30 +6068,34 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       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;
@@ -6202,12 +6209,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           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,
               },
           });
@@ -6426,7 +6435,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       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);
@@ -6597,19 +6606,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       constructor() {
           super();
           this._element = document.createElement('div');
-          this._element.className = 'watermark';
+          this._element.className = 'dv-watermark';
           const title = document.createElement('div');
-          title.className = 'watermark-title';
+          title.className = 'dv-watermark-title';
           const emptySpace = document.createElement('span');
           emptySpace.style.flexGrow = '1';
           const content = document.createElement('div');
-          content.className = 'watermark-content';
+          content.className = 'dv-watermark-content';
           this._element.appendChild(title);
           this._element.appendChild(content);
           const actionsContainer = document.createElement('div');
-          actionsContainer.className = 'actions-container';
+          actionsContainer.className = 'dv-actions-container';
           const closeAnchor = document.createElement('div');
-          closeAnchor.className = 'close-action';
+          closeAnchor.className = 'dv-close-action';
           closeAnchor.appendChild(createCloseButton());
           actionsContainer.appendChild(closeAnchor);
           title.appendChild(emptySpace);
@@ -6629,11 +6638,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       render() {
           const isOneGroup = !!(this._api && this._api.size <= 1);
-          toggleClass(this.element, 'has-actions', isOneGroup);
+          toggleClass(this.element, 'dv-has-actions', isOneGroup);
       }
   }
 
-  const DEFAULT_OVERLAY_Z_INDEX = 999;
   class AriaLevelTracker {
       constructor() {
           this._orderedList = [];
@@ -6652,7 +6660,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       update() {
           for (let i = 0; i < this._orderedList.length; i++) {
               this._orderedList[i].setAttribute('aria-level', `${i}`);
-              this._orderedList[i].style.zIndex = `${DEFAULT_OVERLAY_Z_INDEX + i * 2}`;
+              this._orderedList[i].style.zIndex = `calc(var(--dv-overlay-z-index, 999) + ${i * 2})`;
           }
       }
   }
@@ -7109,7 +7117,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       const element = floatingGroup.overlay.element;
                       const update = () => {
                           const level = Number(element.getAttribute('aria-level'));
-                          focusContainer.style.zIndex = `${DEFAULT_OVERLAY_Z_INDEX + level * 2 + 1}`;
+                          focusContainer.style.zIndex = `calc(var(--dv-overlay-z-index, 999) + ${level * 2 + 1})`;
                       };
                       const observer = new MutationObserver(() => {
                           update();
@@ -7241,7 +7249,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   window: this._window.value,
               });
               this._window.disposable.dispose();
-              this._window.value.close();
               this._window = null;
               this._onDidClose.fire();
           }
@@ -7273,7 +7280,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               }
               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
@@ -7290,7 +7299,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   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();
@@ -7299,21 +7308,27 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       /**
                        * @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);
+                      }
                   });
               });
           });
@@ -7566,9 +7581,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           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',
@@ -7587,11 +7599,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               .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';
@@ -7600,30 +7612,40 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   ? 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 });
+              /**
+               * 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;
+              const group = !isGroupAddedToDom
+                  ? referenceGroup
+                  : (_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)) {
+              group.layout(_window.window.innerWidth, _window.window.innerHeight);
+              if (!this._groups.has(group.api.id)) {
                   this._onDidAddGroup.fire(group);
               }
-              if (itemToPopout instanceof DockviewPanel) {
-                  this.movingLock(() => {
-                      const panel = referenceGroup.model.removePanel(itemToPopout);
-                      group.model.openPanel(panel);
-                  });
-              }
-              else {
-                  this.movingLock(() => moveGroupWithoutDestroying({
-                      from: referenceGroup,
-                      to: group,
-                  }));
-                  switch (referenceLocation) {
-                      case 'grid':
-                          referenceGroup.api.setVisible(false);
-                          break;
-                      case 'floating':
-                      case 'popout':
-                          this.removeGroup(referenceGroup);
-                          break;
+              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');
@@ -7634,6 +7656,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   type: 'popout',
                   getWindow: () => _window.window,
               };
+              if (isGroupAddedToDom &&
+                  itemToPopout.api.location.type === 'grid') {
+                  itemToPopout.api.setVisible(false);
+              }
               this.doSetGroupAndPanelActive(group);
               popoutWindowDisposable.addDisposables(group.api.onDidActiveChange((event) => {
                   var _a;
@@ -7648,9 +7674,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               const value = {
                   window: _window,
                   popoutGroup: group,
-                  referenceGroup: this.getPanel(referenceGroup.id)
-                      ? referenceGroup.id
-                      : undefined,
+                  referenceGroup: !isGroupAddedToDom
+                      ? undefined
+                      : referenceGroup
+                          ? this.getPanel(referenceGroup.id)
+                              ? referenceGroup.id
+                              : undefined
+                          : undefined,
                   disposable: {
                       dispose: () => {
                           popoutWindowDisposable.dispose();
@@ -7665,9 +7695,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                * 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,
@@ -7682,21 +7713,27 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       }
                   }
                   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) {
@@ -7800,7 +7837,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   : (_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');
           }
@@ -8083,7 +8120,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   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
@@ -8101,6 +8137,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               }
           }
           catch (err) {
+              console.error('dockview: failed to deserialize layout. Reverting changes', err);
               /**
                * Takes all the successfully created groups and remove all of their panels.
                */
@@ -8168,11 +8205,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               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`);
                   }
@@ -8183,6 +8222,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       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`);
                   }
@@ -8193,6 +8233,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   group.model.openPanel(panel, {
                       skipSetActive: options.inactive,
                       skipSetGroupActive: options.inactive,
+                      index,
                   });
                   if (!options.inactive) {
                       this.doSetGroupAndPanelActive(group);
@@ -8222,6 +8263,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   group.model.openPanel(panel, {
                       skipSetActive: options.inactive,
                       skipSetGroupActive: options.inactive,
+                      index,
                   });
               }
               else if (referenceGroup.api.location.type === 'floating' ||
@@ -8230,6 +8272,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   referenceGroup.model.openPanel(panel, {
                       skipSetActive: options.inactive,
                       skipSetGroupActive: options.inactive,
+                      index,
                   });
                   referenceGroup.api.setSize({
                       width: initial === null || initial === void 0 ? void 0 : initial.width,
@@ -8250,6 +8293,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   group.model.openPanel(panel, {
                       skipSetActive: options.inactive,
                       skipSetGroupActive: options.inactive,
+                      index,
                   });
                   if (!options.inactive) {
                       this.doSetGroupAndPanelActive(group);
@@ -8268,6 +8312,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               group.model.openPanel(panel, {
                   skipSetActive: options.inactive,
                   skipSetGroupActive: options.inactive,
+                  index,
               });
           }
           else {
@@ -8278,6 +8323,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               group.model.openPanel(panel, {
                   skipSetActive: options.inactive,
                   skipSetGroupActive: options.inactive,
+                  index,
               });
               if (!options.inactive) {
                   this.doSetGroupAndPanelActive(group);
@@ -8818,6 +8864,31 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
+  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;
@@ -9366,12 +9437,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           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', () => {
@@ -10228,22 +10301,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               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 () => {
@@ -10661,7 +10718,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   exports.GridviewComponent = GridviewComponent;
   exports.GridviewPanel = GridviewPanel;
   exports.GridviewReact = GridviewReact;
-  exports.LocalSelectionTransfer = LocalSelectionTransfer;
   exports.PROPERTY_KEYS = PROPERTY_KEYS;
   exports.PaneFramework = PaneFramework;
   exports.PaneTransfer = PaneTransfer;
@@ -10680,7 +10736,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   exports.SplitviewReact = SplitviewReact;
   exports.Tab = Tab;
   exports.WillShowOverlayLocationEvent = WillShowOverlayLocationEvent;
-  exports.createComponent = createComponent;
   exports.createDockview = createDockview;
   exports.createGridview = createGridview;
   exports.createPaneview = createPaneview;