dockview-react 1.15.3 → 1.16.1

package/dist/dockview-react.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 1.15.3
+ * @version 1.16.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -33,7 +33,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
   }
 
-  var css_248z = ".dv-render-overlay {\n  position: absolute;\n  z-index: 1;\n  height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n  z-index: 999;\n}\n\n.dv-debug .dv-render-overlay {\n  outline: 1px solid red;\n  outline-offset: -1;\n}\n.dockview-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: white;\n  --dv-tabs-and-actions-container-background-color: #f3f3f3;\n  --dv-activegroup-visiblepanel-tab-background-color: white;\n  --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-inactivegroup-visiblepanel-tab-background-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-tab-divider-color: white;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n  --dv-separator-border: rgba(128, 128, 128, 0.35);\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n  --dv-tabs-and-actions-container-background-color: #2d2d30;\n  --dv-tabs-and-actions-container-height: 20px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n  --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: white;\n  --dv-inactivegroup-visiblepanel-tab-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #000c18;\n  --dv-tabs-and-actions-container-background-color: #1c1c2a;\n  --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-tab-divider-color: #2b2b4a;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n  --dv-separator-border: #2b2b4a;\n  --dv-paneview-header-border-color: #2b2b4a;\n  --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #282a36;\n  --dv-tabs-and-actions-container-background-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-tab-divider-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n  --dv-separator-border: #bd93f9;\n  --dv-paneview-header-border-color: #bd93f9;\n  --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #94527e;\n  z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  bottom: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #5e3d5a;\n  z-index: 999;\n}\n\n.dockview-theme-replit {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #ebeced;\n  --dv-tabs-and-actions-container-background-color: #fcfcfc;\n  --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-activegroup-hiddenpanel-tab-background-color: ##fcfcfc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n  --dv-tab-divider-color: transparent;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-separator-border: transparent;\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n  --dv-background-color: #ebeced;\n  --dv-separator-handle-background-color: #cfd1d3;\n  --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-resize-container:has(> .groupview) {\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview {\n  overflow: hidden;\n  border-radius: 10px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container {\n  border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab {\n  margin: 4px;\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab .dockview-svg {\n  height: 8px;\n  width: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab:hover {\n  background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .groupview .content-container {\n  background-color: #fcfcfc;\n}\n.dockview-theme-replit .groupview.active-group {\n  border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview.inactive-group {\n  border: 1px solid transparent;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash::after {\n  content: \"\";\n  height: 4px;\n  width: 40px;\n  border-radius: 2px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--dv-separator-handle-background-color);\n  position: absolute;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash::after {\n  content: \"\";\n  height: 40px;\n  width: 4px;\n  border-radius: 2px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--dv-separator-handle-background-color);\n  position: absolute;\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash:hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.drop-target {\n  position: relative;\n}\n.drop-target > .drop-target-dropzone {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1000;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n  position: relative;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-drag-over-background-color);\n  transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n  will-change: transform;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n  background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n  background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n  background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n  background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n  background-color: cyan;\n}\n\n.dv-resize-container {\n  position: absolute;\n  z-index: 997;\n  border: 1px solid var(--dv-tab-divider-color);\n  box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-bring-to-front {\n  z-index: 998;\n}\n.dv-resize-container.dv-resize-container-dragging {\n  opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n  height: calc(100% - 8px);\n  width: 4px;\n  left: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n  height: calc(100% - 8px);\n  width: 4px;\n  right: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n  height: 4px;\n  width: 4px;\n  top: -2px;\n  left: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n  height: 4px;\n  width: 4px;\n  left: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: se-resize;\n}\n.dv-dockview {\n  position: relative;\n  background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n  position: relative;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dv-tab-dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--dv-group-view-background-color);\n  overflow: hidden;\n}\n.groupview:focus {\n  outline: none;\n}\n.groupview.empty > .tabs-and-actions-container {\n  display: none;\n}\n.groupview > .content-container {\n  flex-grow: 1;\n  min-height: 0;\n  outline: none;\n}\n.dv-root-wrapper {\n  height: 100%;\n  width: 100%;\n}\n.grid-view,\n.branch-node {\n  height: 100%;\n  width: 100%;\n}\n.pane-container {\n  height: 100%;\n  width: 100%;\n}\n.pane-container.animated .view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.pane-container .view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n  background-color: var(--dv-group-view-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n  display: flex;\n  padding: 0px 8px;\n  cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pane-container .view .default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n  border-top: none !important;\n}\n.pane-container .pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.pane-container .pane .pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n  cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .split-view-container .sash-container .sash.enabled {\n  background-color: black;\n}\n.dv-debug .split-view-container .sash-container .sash.disabled {\n  background-color: orange;\n}\n.dv-debug .split-view-container .sash-container .sash.maximum {\n  background-color: green;\n}\n.dv-debug .split-view-container .sash-container .sash.minimum {\n  background-color: red;\n}\n\n.split-view-container {\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container.dv-splitview-disabled > .sash-container > .sash {\n  pointer-events: none;\n}\n.split-view-container.animation .view,\n.split-view-container.animation .sash {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.split-view-container.horizontal {\n  height: 100%;\n}\n.split-view-container.horizontal > .sash-container > .sash {\n  height: 100%;\n  width: 4px;\n}\n.split-view-container.horizontal > .sash-container > .sash.enabled {\n  cursor: ew-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.horizontal > .sash-container > .sash.maximum {\n  cursor: w-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.minimum {\n  cursor: e-resize;\n}\n.split-view-container.horizontal > .view-container > .view:not(:first-child)::before {\n  height: 100%;\n  width: 1px;\n}\n.split-view-container.vertical {\n  width: 100%;\n}\n.split-view-container.vertical > .sash-container > .sash {\n  width: 100%;\n  height: 4px;\n}\n.split-view-container.vertical > .sash-container > .sash.enabled {\n  cursor: ns-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.vertical > .sash-container > .sash.maximum {\n  cursor: n-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.minimum {\n  cursor: s-resize;\n}\n.split-view-container.vertical > .view-container > .view {\n  width: 100%;\n}\n.split-view-container.vertical > .view-container > .view:not(:first-child)::before {\n  height: 1px;\n  width: 100%;\n}\n.split-view-container .sash-container {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n}\n.split-view-container .sash-container .sash {\n  position: absolute;\n  z-index: 99;\n  outline: none;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  touch-action: none;\n}\n.split-view-container .sash-container .sash:not(.disabled):active {\n  transition: background-color 0.1s ease-in-out;\n  background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:not(.disabled):hover {\n  background-color: var(--dv-active-sash-color, transparent);\n  transition: background-color 0.1s ease-in-out;\n  transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-background-color);\n}\n.split-view-container .view-container .view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n  transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n  flex-shrink: 0;\n}\n.tab:focus-within, .tab:focus {\n  position: relative;\n}\n.tab:focus-within::after, .tab:focus::after {\n  position: absolute;\n  content: \"\";\n  height: 100%;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  pointer-events: none;\n  outline: 1px solid var(--dv-tab-divider-color) !important;\n  outline-offset: -1px;\n  z-index: 5;\n}\n.tab.dv-tab-dragging .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 = ".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}";
   styleInject(css_248z);
 
   class TransferObject {
@@ -561,6 +561,26 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   function addTestId(element, id) {
       element.setAttribute('data-testid', id);
   }
+  function disableIframePointEvents() {
+      const iframes = [
+          ...getElementsByTagName('iframe'),
+          ...getElementsByTagName('webview'),
+      ];
+      const original = new WeakMap(); // don't hold onto HTMLElement references longer than required
+      for (const iframe of iframes) {
+          original.set(iframe, iframe.style.pointerEvents);
+          iframe.style.pointerEvents = 'none';
+      }
+      return {
+          release: () => {
+              var _a;
+              for (const iframe of iframes) {
+                  iframe.style.pointerEvents = (_a = original.get(iframe)) !== null && _a !== void 0 ? _a : 'auto';
+              }
+              iframes.splice(0, iframes.length); // don't hold onto HTMLElement references longer than required
+          },
+      };
+  }
 
   function tail(arr) {
       if (arr.length === 0) {
@@ -1083,13 +1103,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   for (const item of this.viewItems) {
                       item.enabled = false;
                   }
-                  const iframes = [
-                      ...getElementsByTagName('iframe'),
-                      ...getElementsByTagName('webview'),
-                  ];
-                  for (const iframe of iframes) {
-                      iframe.style.pointerEvents = 'none';
-                  }
+                  const iframes = disableIframePointEvents();
                   const start = this._orientation === exports.Orientation.HORIZONTAL
                       ? event.clientX
                       : event.clientY;
@@ -1151,9 +1165,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       for (const item of this.viewItems) {
                           item.enabled = true;
                       }
-                      for (const iframe of iframes) {
-                          iframe.style.pointerEvents = 'auto';
-                      }
+                      iframes.release();
                       this.saveProportions();
                       document.removeEventListener('pointermove', onPointerMove);
                       document.removeEventListener('pointerup', end);
@@ -1320,29 +1332,47 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           if (this.viewItems.length === 0) {
               return;
           }
-          const sashCount = this.viewItems.length - 1;
-          const marginReducedSize = (this.margin * sashCount) / this.viewItems.length;
+          const visibleViewItems = this.viewItems.filter((i) => i.visible);
+          const sashCount = Math.max(0, visibleViewItems.length - 1);
+          const marginReducedSize = (this.margin * sashCount) / Math.max(1, visibleViewItems.length);
           let totalLeftOffset = 0;
           const viewLeftOffsets = [];
-          for (let i = 0; i < this.viewItems.length - 1; i++) {
-              totalLeftOffset += this.viewItems[i].size;
-              viewLeftOffsets.push(totalLeftOffset);
-              const offset = Math.min(Math.max(0, totalLeftOffset - 2), this.size - this.margin);
-              if (this._orientation === exports.Orientation.HORIZONTAL) {
-                  this.sashes[i].container.style.left = `${offset}px`;
-                  this.sashes[i].container.style.top = `0px`;
+          const sashWidth = 4; // hardcoded in css
+          const runningVisiblePanelCount = this.viewItems.reduce((arr, viewItem, i) => {
+              const flag = viewItem.visible ? 1 : 0;
+              if (i === 0) {
+                  arr.push(flag);
               }
-              if (this._orientation === exports.Orientation.VERTICAL) {
-                  this.sashes[i].container.style.left = `0px`;
-                  this.sashes[i].container.style.top = `${offset}px`;
+              else {
+                  arr.push(arr[i - 1] + flag);
               }
-          }
+              return arr;
+          }, []);
+          // calculate both view and cash positions
           this.viewItems.forEach((view, i) => {
-              const size = view.size - marginReducedSize;
-              const offset = i === 0
+              totalLeftOffset += this.viewItems[i].size;
+              viewLeftOffsets.push(totalLeftOffset);
+              const size = view.visible ? view.size - marginReducedSize : 0;
+              const visiblePanelsBeforeThisView = Math.max(0, runningVisiblePanelCount[i] - 1);
+              const offset = i === 0 || visiblePanelsBeforeThisView === 0
                   ? 0
                   : viewLeftOffsets[i - 1] +
-                      (i / sashCount) * marginReducedSize;
+                      (visiblePanelsBeforeThisView / sashCount) * marginReducedSize;
+              if (i < this.viewItems.length - 1) {
+                  // calculate sash position
+                  const newSize = view.visible
+                      ? offset + size - sashWidth / 2 + this.margin / 2
+                      : offset;
+                  if (this._orientation === exports.Orientation.HORIZONTAL) {
+                      this.sashes[i].container.style.left = `${newSize}px`;
+                      this.sashes[i].container.style.top = `0px`;
+                  }
+                  if (this._orientation === exports.Orientation.VERTICAL) {
+                      this.sashes[i].container.style.left = `0px`;
+                      this.sashes[i].container.style.top = `${newSize}px`;
+                  }
+              }
+              // calculate view position
               if (this._orientation === exports.Orientation.HORIZONTAL) {
                   view.container.style.width = `${size}px`;
                   view.container.style.left = `${offset}px`;
@@ -2671,6 +2701,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.gridview.locked = value;
       }
       constructor(options) {
+          var _a, _b;
           super(document.createElement('div'), options.disableAutoResizing);
           this._id = nextLayoutId$1.next();
           this._groups = new Map();
@@ -2684,8 +2715,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.onDidLayoutChange = this._bufferOnDidLayoutChange.onEvent;
           this._onDidViewVisibilityChangeMicroTaskQueue = new AsapEvent();
           this.onDidViewVisibilityChangeMicroTaskQueue = this._onDidViewVisibilityChangeMicroTaskQueue.onEvent;
+          this.classNames = [];
           this.element.style.height = '100%';
           this.element.style.width = '100%';
+          this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
+          for (const className of this.classNames) {
+              toggleClass(this.element, className, true);
+          }
           options.parentElement.appendChild(this.element);
           this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation, options.locked, options.margin);
           this.gridview.locked = !!options.locked;
@@ -2709,6 +2745,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       isVisible(panel) {
           return this.gridview.isViewVisible(getGridLocation(panel.element));
       }
+      updateOptions(options) {
+          var _a, _b;
+          if ('className' in options) {
+              for (const className of this.classNames) {
+                  toggleClass(this.element, className, false);
+              }
+              this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
+              for (const className of this.classNames) {
+                  toggleClass(this.element, className, true);
+              }
+          }
+      }
       maximizeGroup(panel) {
           this.gridview.maximizeView(panel);
           this.doSetGroupActive(panel);
@@ -2889,12 +2937,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       constructor(component) {
           this.component = component;
       }
-      /**
-       * Update configuratable options.
-       */
-      updateOptions(options) {
-          this.component.updateOptions(options);
-      }
       /**
        * Removes an existing panel and optionally provide a `Sizing` method
        * for the subsequent resize.
@@ -2948,6 +2990,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       clear() {
           this.component.clear();
       }
+      /**
+       * Update configuratable options.
+       */
+      updateOptions(options) {
+          this.component.updateOptions(options);
+      }
+      /**
+       * Release resources and teardown component. Do not call when using framework versions of dockview.
+       */
+      dispose() {
+          this.component.dispose();
+      }
   }
   class PaneviewApi {
       /**
@@ -3075,6 +3129,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       clear() {
           this.component.clear();
       }
+      /**
+       * Update configuratable options.
+       */
+      updateOptions(options) {
+          this.component.updateOptions(options);
+      }
+      /**
+       * Release resources and teardown component. Do not call when using framework versions of dockview.
+       */
+      dispose() {
+          this.component.dispose();
+      }
   }
   class GridviewApi {
       /**
@@ -3215,6 +3281,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       clear() {
           this.component.clear();
       }
+      updateOptions(options) {
+          this.component.updateOptions(options);
+      }
+      /**
+       * Release resources and teardown component. Do not call when using framework versions of dockview.
+       */
+      dispose() {
+          this.component.dispose();
+      }
   }
   class DockviewApi {
       /**
@@ -3507,6 +3582,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       setGap(gap) {
           this.component.updateOptions({ gap });
       }
+      updateOptions(options) {
+          this.component.updateOptions(options);
+      }
+      /**
+       * Release resources and teardown component. Do not call when using framework versions of dockview.
+       */
+      dispose() {
+          this.component.dispose();
+      }
   }
 
   class DragHandler extends CompositeDisposable {
@@ -3529,20 +3613,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   event.preventDefault();
                   return;
               }
-              const iframes = [
-                  ...getElementsByTagName('iframe'),
-                  ...getElementsByTagName('webview'),
-              ];
+              const iframes = disableIframePointEvents();
               this.pointerEventsDisposable.value = {
                   dispose: () => {
-                      for (const iframe of iframes) {
-                          iframe.style.pointerEvents = 'auto';
-                      }
+                      iframes.release();
                   },
               };
-              for (const iframe of iframes) {
-                  iframe.style.pointerEvents = 'none';
-              }
               this.el.classList.add('dv-dragged');
               setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
               this.dataDisposable.value = this.getData(event);
@@ -4706,7 +4782,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._element.className = 'void-container';
           this._element.tabIndex = 0;
           this._element.draggable = true;
-          this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'click', () => {
+          this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
               this.accessor.doSetGroupActive(this.group);
           }));
           const handler = new GroupDragHandler(this._element, accessor, group);
@@ -5021,6 +5097,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           locked: undefined,
           disableDnd: undefined,
           gap: undefined,
+          className: undefined,
       };
       return Object.keys(properties);
   })();
@@ -5576,7 +5653,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   group: this.groupPanel,
               });
               this.watermark = watermark;
-              addDisposableListener(this.watermark.element, 'click', () => {
+              addDisposableListener(this.watermark.element, 'pointerdown', () => {
                   if (!this.isActive) {
                       this.accessor.doSetGroupActive(this.groupPanel);
                   }
@@ -6141,7 +6218,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               // forward the resize event to the group since if you want to resize a panel
               // you are actually just resizing the panels parent which is the group
               this.group.api.setSize(event);
-          }), this.api.onDidRendererChange((event) => {
+          }), this.api.onDidRendererChange(() => {
               this.group.model.rerender(this);
           }));
       }
@@ -6477,17 +6554,30 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
-  const bringElementToFront = (() => {
-      let previous = null;
-      function pushToTop(element) {
-          if (previous !== element && previous !== null) {
-              toggleClass(previous, 'dv-bring-to-front', false);
+  const DEFAULT_OVERLAY_Z_INDEX = 999;
+  class AriaLevelTracker {
+      constructor() {
+          this._orderedList = [];
+      }
+      push(element) {
+          this._orderedList = [
+              ...this._orderedList.filter((item) => item !== element),
+              element,
+          ];
+          this.update();
+      }
+      destroy(element) {
+          this._orderedList = this._orderedList.filter((item) => item !== element);
+          this.update();
+      }
+      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}`;
           }
-          toggleClass(element, 'dv-bring-to-front', true);
-          previous = element;
       }
-      return pushToTop;
-  })();
+  }
+  const arialLevelTracker = new AriaLevelTracker();
   class Overlay extends CompositeDisposable {
       set minimumInViewportWidth(value) {
           this.options.minimumInViewportWidth = value;
@@ -6495,6 +6585,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       set minimumInViewportHeight(value) {
           this.options.minimumInViewportHeight = value;
       }
+      get element() {
+          return this._element;
+      }
       constructor(options) {
           super();
           this.options = options;
@@ -6517,6 +6610,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.options.container.appendChild(this._element);
           // if input bad resize within acceptable boundaries
           this.setBounds(Object.assign(Object.assign(Object.assign(Object.assign({ height: this.options.height, width: this.options.width }, ('top' in this.options && { top: this.options.top })), ('bottom' in this.options && { bottom: this.options.bottom })), ('left' in this.options && { left: this.options.left })), ('right' in this.options && { right: this.options.right })));
+          arialLevelTracker.push(this._element);
+      }
+      bringToFront() {
+          arialLevelTracker.push(this._element);
       }
       setBounds(bounds = {}) {
           if (typeof bounds.height === 'number') {
@@ -6604,18 +6701,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           const move = new MutableDisposable();
           const track = () => {
               let offset = null;
-              const iframes = [
-                  ...getElementsByTagName('iframe'),
-                  ...getElementsByTagName('webview'),
-              ];
-              for (const iframe of iframes) {
-                  iframe.style.pointerEvents = 'none';
-              }
+              const iframes = disableIframePointEvents();
               move.value = new CompositeDisposable({
                   dispose: () => {
-                      for (const iframe of iframes) {
-                          iframe.style.pointerEvents = 'auto';
-                      }
+                      iframes.release();
                   },
               }, addDisposableWindowListener(window, 'mousemove', (e) => {
                   const containerRect = this.options.container.getBoundingClientRect();
@@ -6684,9 +6773,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   track();
               }
           }), addDisposableListener(this.options.content, 'mousedown', () => {
-              bringElementToFront(this._element);
+              arialLevelTracker.push(this._element);
           }, true));
-          bringElementToFront(this._element);
           if (options.inDragMode) {
               track();
           }
@@ -6699,13 +6787,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.addDisposables(move, addDisposableListener(resizeHandleElement, 'mousedown', (e) => {
               e.preventDefault();
               let startPosition = null;
-              const iframes = [
-                  ...getElementsByTagName('iframe'),
-                  ...getElementsByTagName('webview'),
-              ];
-              for (const iframe of iframes) {
-                  iframe.style.pointerEvents = 'none';
-              }
+              const iframes = disableIframePointEvents();
               move.value = new CompositeDisposable(addDisposableWindowListener(window, 'mousemove', (e) => {
                   const containerRect = this.options.container.getBoundingClientRect();
                   const overlayRect = this._element.getBoundingClientRect();
@@ -6828,9 +6910,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   this.setBounds(bounds);
               }), {
                   dispose: () => {
-                      for (const iframe of iframes) {
-                          iframe.style.pointerEvents = 'auto';
-                      }
+                      iframes.release();
                   },
               }, addDisposableWindowListener(window, 'mouseup', () => {
                   move.dispose();
@@ -6851,6 +6931,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           return 0;
       }
       dispose() {
+          arialLevelTracker.destroy(this._element);
           this._element.remove();
           super.dispose();
       }
@@ -6879,9 +6960,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       return element;
   }
   class OverlayRenderContainer extends CompositeDisposable {
-      constructor(element) {
+      constructor(element, accessor) {
           super();
           this.element = element;
+          this.accessor = accessor;
           this.map = {};
           this._disposed = false;
           this.addDisposables(exports.DockviewDisposable.from(() => {
@@ -6937,7 +7019,35 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               }
               focusContainer.style.display = panel.api.isVisible ? '' : 'none';
           };
-          const disposable = new CompositeDisposable(
+          const observerDisposable = new MutableDisposable();
+          const correctLayerPosition = () => {
+              if (panel.api.location.type === 'floating') {
+                  queueMicrotask(() => {
+                      const floatingGroup = this.accessor.floatingGroups.find((group) => group.group === panel.api.group);
+                      if (!floatingGroup) {
+                          return;
+                      }
+                      const element = floatingGroup.overlay.element;
+                      const update = () => {
+                          const level = Number(element.getAttribute('aria-level'));
+                          focusContainer.style.zIndex = `${DEFAULT_OVERLAY_Z_INDEX + level * 2 + 1}`;
+                      };
+                      const observer = new MutationObserver(() => {
+                          update();
+                      });
+                      observerDisposable.value = exports.DockviewDisposable.from(() => observer.disconnect());
+                      observer.observe(element, {
+                          attributeFilter: ['aria-level'],
+                          attributes: true,
+                      });
+                      update();
+                  });
+              }
+              else {
+                  focusContainer.style.zIndex = ''; // reset the z-index, perhaps CSS will take over here
+              }
+          };
+          const disposable = new CompositeDisposable(observerDisposable, 
           /**
            * since container is positioned absoutely we must explicitly forward
            * the dnd events for the expect behaviours to continue to occur in terms of dnd
@@ -6961,7 +7071,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               onDragOver: (e) => {
                   referenceContainer.dropTarget.dnd.onDragOver(e);
               },
-          }), panel.api.onDidVisibilityChange((event) => {
+          }), panel.api.onDidVisibilityChange(() => {
               /**
                * Control the visibility of the content, however even when not visible (display: none)
                * the content is still maintained within the DOM hence DOM specific attributes
@@ -6973,6 +7083,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   return;
               }
               resize();
+          }), panel.api.onDidLocationChange(() => {
+              correctLayerPosition();
           }));
           this.map[panel.api.id].destroy = exports.DockviewDisposable.from(() => {
               var _a;
@@ -6981,6 +7093,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               }
               (_a = focusContainer.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(focusContainer);
           });
+          correctLayerPosition();
           queueMicrotask(() => {
               if (this.isDisposed) {
                   return;
@@ -7206,7 +7319,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get gap() {
           return this.gridview.margin;
       }
-      constructor(options) {
+      get floatingGroups() {
+          return this._floatingGroups;
+      }
+      constructor(parentElement, options) {
           var _a;
           super({
               proportionalLayout: true,
@@ -7214,10 +7330,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               styles: options.hideBorders
                   ? { separatorBorder: 'transparent' }
                   : undefined,
-              parentElement: options.parentElement,
+              parentElement: parentElement,
               disableAutoResizing: options.disableAutoResizing,
               locked: options.locked,
               margin: options.gap,
+              className: options.className,
           });
           this.nextGroupId = sequentialNumberGenerator();
           this._deserializer = new DefaultDockviewDeserialzier(this);
@@ -7253,10 +7370,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._onDidActiveGroupChange = new Emitter();
           this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
           this._moving = false;
-          const gready = document.createElement('div');
-          gready.className = 'dv-overlay-render-container';
-          this.gridview.element.appendChild(gready);
-          this.overlayRenderContainer = new OverlayRenderContainer(gready);
+          // const gready = document.createElement('div');
+          // gready.className = 'dv-overlay-render-container';
+          // this.gridview.element.appendChild(gready);
+          this.overlayRenderContainer = new OverlayRenderContainer(this.gridview.element, this);
           toggleClass(this.gridview.element, 'dv-dockview', true);
           toggleClass(this.element, 'dv-debug', !!options.debug);
           this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
@@ -7422,7 +7539,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               }
               const gready = document.createElement('div');
               gready.className = 'dv-overlay-render-container';
-              const overlayRenderContainer = new OverlayRenderContainer(gready);
+              const overlayRenderContainer = new OverlayRenderContainer(gready, this);
               const referenceGroup = itemToPopout instanceof DockviewPanel
                   ? itemToPopout.group
                   : itemToPopout;
@@ -7571,7 +7688,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   }
               }
           }
-          group.model.location = { type: 'floating' };
           function getAnchoredBox() {
               if (options === null || options === void 0 ? void 0 : options.position) {
                   const result = {};
@@ -7638,10 +7754,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   : false,
           });
           const floatingGroupPanel = new DockviewFloatingGroupPanel(group, overlay);
-          const disposable = watchElementResize(group.element, (entry) => {
+          const disposable = new CompositeDisposable(group.api.onDidActiveChange((event) => {
+              if (event.isActive) {
+                  overlay.bringToFront();
+              }
+          }), watchElementResize(group.element, (entry) => {
               const { width, height } = entry.contentRect;
               group.layout(width, height); // let the group know it's size is changing so it can fire events to the panel
-          });
+          }));
           floatingGroupPanel.addDisposables(overlay.onDidChange(() => {
               // this is either a resize or a move
               // to inform the panels .layout(...) the group with it's current size
@@ -7657,12 +7777,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }), {
               dispose: () => {
                   disposable.dispose();
-                  group.model.location = { type: 'grid' };
                   remove(this._floatingGroups, floatingGroupPanel);
+                  group.model.location = { type: 'grid' };
                   this.updateWatermark();
               },
           });
           this._floatingGroups.push(floatingGroupPanel);
+          group.model.location = { type: 'floating' };
           if (!(options === null || options === void 0 ? void 0 : options.skipActiveGroup)) {
               this.doSetGroupAndPanelActive(group);
           }
@@ -7701,6 +7822,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       updateOptions(options) {
           var _a, _b;
+          super.updateOptions(options);
           const changed_floatingGroupBounds = 'floatingGroupBounds' in options &&
               options.floatingGroupBounds !== this.options.floatingGroupBounds;
           const changed_rootOverlayOptions = 'rootOverlayModel' in options &&
@@ -8244,6 +8366,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       this._groups.delete(group.id);
                       this._onDidRemoveGroup.fire(group);
                   }
+                  remove(this._popoutGroups, selectedGroup);
                   const removedGroup = selectedGroup.disposable.dispose();
                   if (!(options === null || options === void 0 ? void 0 : options.skipPopoutReturn) && removedGroup) {
                       this.doAddGroup(removedGroup, [0]);
@@ -8355,6 +8478,31 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                           return;
                       }
                   }
+                  if (sourceGroup.api.location.type === 'popout') {
+                      /**
+                       * the source group is a popout group with a single panel
+                       *
+                       * 1. remove the panel from the group without triggering any events
+                       * 2. remove the popout group
+                       * 3. create a new group at the requested location and add that panel
+                       */
+                      const popoutGroup = this._popoutGroups.find((group) => group.popoutGroup === sourceGroup);
+                      const removedPanel = this.movingLock(() => popoutGroup.popoutGroup.model.removePanel(popoutGroup.popoutGroup.panels[0], {
+                          skipSetActive: true,
+                          skipSetActiveGroup: true,
+                      }));
+                      this.doRemoveGroup(sourceGroup, { skipActive: true });
+                      const newGroup = this.createGroupAtLocation(targetLocation);
+                      this.movingLock(() => newGroup.model.openPanel(removedPanel, {
+                          skipSetActive: true,
+                      }));
+                      this.doSetGroupAndPanelActive(newGroup);
+                      this._onDidMovePanel.fire({
+                          panel: this.getGroupPanel(sourceItemId),
+                          from: sourceGroup,
+                      });
+                      return;
+                  }
                   // source group will become empty so delete the group
                   const targetGroup = this.movingLock(() => this.doRemoveGroup(sourceGroup, {
                       skipActive: true,
@@ -8586,13 +8734,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       set deserializer(value) {
           this._deserializer = value;
       }
-      constructor(options) {
+      constructor(parentElement, options) {
           super({
-              parentElement: options.parentElement,
+              parentElement: parentElement,
               proportionalLayout: options.proportionalLayout,
               orientation: options.orientation,
               styles: options.styles,
               disableAutoResizing: options.disableAutoResizing,
+              className: options.className,
           });
           this._onDidLayoutfromJSON = new Emitter();
           this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
@@ -8618,6 +8767,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
       }
       updateOptions(options) {
+          super.updateOptions(options);
           const hasOrientationChanged = typeof options.orientation === 'string' &&
               this.gridview.orientation !== options.orientation;
           this._options = Object.assign(Object.assign({}, this.options), options);
@@ -8884,8 +9034,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               ? this.splitview.size
               : this.splitview.orthogonalSize;
       }
-      constructor(options) {
-          super(options.parentElement, options.disableAutoResizing);
+      constructor(parentElement, options) {
+          var _a, _b;
+          super(parentElement, options.disableAutoResizing);
           this._splitviewChangeDisposable = new MutableDisposable();
           this._panels = new Map();
           this._onDidLayoutfromJSON = new Emitter();
@@ -8896,6 +9047,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.onDidRemoveView = this._onDidRemoveView.event;
           this._onDidLayoutChange = new Emitter();
           this.onDidLayoutChange = this._onDidLayoutChange.event;
+          this.classNames = [];
+          this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
+          for (const className of this.classNames) {
+              toggleClass(this.element, className, true);
+          }
           this._options = options;
           if (!options.components) {
               options.components = {};
@@ -8907,6 +9063,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.addDisposables(this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
       }
       updateOptions(options) {
+          var _a, _b;
+          if ('className' in options) {
+              for (const className of this.classNames) {
+                  toggleClass(this.element, className, false);
+              }
+              this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
+              for (const className of this.classNames) {
+                  toggleClass(this.element, className, true);
+              }
+          }
           const hasOrientationChanged = typeof options.orientation === 'string' &&
               this.options.orientation !== options.orientation;
           this._options = Object.assign(Object.assign({}, this.options), options);
@@ -9208,8 +9374,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get options() {
           return this._options;
       }
-      constructor(options) {
-          super(options.parentElement, options.disableAutoResizing);
+      constructor(parentElement, options) {
+          var _a, _b;
+          super(parentElement, options.disableAutoResizing);
           this._id = nextLayoutId.next();
           this._disposable = new MutableDisposable();
           this._viewDisposables = new Map();
@@ -9223,7 +9390,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.onDidAddView = this._onDidAddView.event;
           this._onDidRemoveView = new Emitter();
           this.onDidRemoveView = this._onDidRemoveView.event;
+          this.classNames = [];
           this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
+          this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
+          for (const className of this.classNames) {
+              toggleClass(this.element, className, true);
+          }
           this._options = options;
           if (!options.components) {
               options.components = {};
@@ -9245,6 +9417,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           //noop
       }
       updateOptions(options) {
+          var _a, _b;
+          if ('className' in options) {
+              for (const className of this.classNames) {
+                  toggleClass(this.element, className, false);
+              }
+              this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
+              for (const className of this.classNames) {
+                  toggleClass(this.element, className, true);
+              }
+          }
           this._options = Object.assign(Object.assign({}, this.options), options);
       }
       addPanel(options) {
@@ -9538,6 +9720,23 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
+  function createDockview(element, options) {
+      const component = new DockviewComponent(element, options);
+      return component.api;
+  }
+  function createSplitview(element, options) {
+      const component = new SplitviewComponent(element, options);
+      return new SplitviewApi(component);
+  }
+  function createGridview(element, options) {
+      const component = new GridviewComponent(element, options);
+      return new GridviewApi(component);
+  }
+  function createPaneview(element, options) {
+      const component = new PaneviewComponent(element, options);
+      return new PaneviewApi(component);
+  }
+
   /**
    * This component is intended to interface between vanilla-js and React hence we need to be
    * creative in how we update props.
@@ -9917,20 +10116,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       });
                   }
                   : undefined,
-              parentElement: domRef.current,
               defaultTabComponent: props.defaultTabComponent
                   ? DEFAULT_REACT_TAB
                   : undefined,
           };
-          const dockview = new DockviewComponent(Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
+          const api = createDockview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
           const { clientWidth, clientHeight } = domRef.current;
-          dockview.layout(clientWidth, clientHeight);
+          api.layout(clientWidth, clientHeight);
           if (props.onReady) {
-              props.onReady({ api: new DockviewApi(dockview) });
+              props.onReady({ api });
           }
-          dockviewRef.current = dockview;
+          dockviewRef.current = api;
           return () => {
-              dockview.dispose();
+              api.dispose();
           };
       }, []);
       React.useEffect(() => {
@@ -10133,8 +10331,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       React.useImperativeHandle(ref, () => domRef.current, []);
       React.useEffect(() => {
           var _a;
-          const splitview = new SplitviewComponent({
-              parentElement: domRef.current,
+          const api = createSplitview(domRef.current, {
               disableAutoResizing: props.disableAutoResizing,
               orientation: (_a = props.orientation) !== null && _a !== void 0 ? _a : exports.Orientation.HORIZONTAL,
               frameworkComponents: props.components,
@@ -10153,13 +10350,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   : undefined,
           });
           const { clientWidth, clientHeight } = domRef.current;
-          splitview.layout(clientWidth, clientHeight);
+          api.layout(clientWidth, clientHeight);
           if (props.onReady) {
-              props.onReady({ api: new SplitviewApi(splitview) });
+              props.onReady({ api });
           }
-          splitviewRef.current = splitview;
+          splitviewRef.current = api;
           return () => {
-              splitview.dispose();
+              api.dispose();
           };
       }, []);
       React.useEffect(() => {
@@ -10204,8 +10401,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   // noop
               };
           }
-          const gridview = new GridviewComponent({
-              parentElement: domRef.current,
+          const api = createGridview(domRef.current, {
               disableAutoResizing: props.disableAutoResizing,
               proportionalLayout: typeof props.proportionalLayout === 'boolean'
                   ? props.proportionalLayout
@@ -10224,13 +10420,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   : undefined,
           });
           const { clientWidth, clientHeight } = domRef.current;
-          gridview.layout(clientWidth, clientHeight);
+          api.layout(clientWidth, clientHeight);
           if (props.onReady) {
-              props.onReady({ api: new GridviewApi(gridview) });
+              props.onReady({ api });
           }
-          gridviewRef.current = gridview;
+          gridviewRef.current = api;
           return () => {
-              gridview.dispose();
+              api.dispose();
           };
       }, []);
       React.useEffect(() => {
@@ -10289,8 +10485,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
               addPortal,
           });
-          const paneview = new PaneviewComponent({
-              parentElement: domRef.current,
+          const api = createPaneview(domRef.current, {
               disableAutoResizing: props.disableAutoResizing,
               frameworkComponents: props.components,
               components: {},
@@ -10307,15 +10502,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               },
               showDndOverlay: props.showDndOverlay,
           });
-          const api = new PaneviewApi(paneview);
           const { clientWidth, clientHeight } = domRef.current;
-          paneview.layout(clientWidth, clientHeight);
+          api.layout(clientWidth, clientHeight);
           if (props.onReady) {
               props.onReady({ api });
           }
-          paneviewRef.current = paneview;
+          paneviewRef.current = api;
           return () => {
-              paneview.dispose();
+              api.dispose();
           };
       }, []);
       React.useEffect(() => {
@@ -10340,10 +10534,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   //
               };
           }
-          const paneview = paneviewRef.current;
-          const disposable = paneview.onDidDrop((event) => {
+          const api = paneviewRef.current;
+          const disposable = api.onDidDrop((event) => {
               if (props.onDidDrop) {
-                  props.onDidDrop(Object.assign(Object.assign({}, event), { api: new PaneviewApi(paneview) }));
+                  props.onDidDrop(Object.assign(Object.assign({}, event), { api }));
               }
           });
           return () => {
@@ -10405,6 +10599,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   exports.Tab = Tab;
   exports.WillShowOverlayLocationEvent = WillShowOverlayLocationEvent;
   exports.createComponent = createComponent;
+  exports.createDockview = createDockview;
+  exports.createGridview = createGridview;
+  exports.createPaneview = createPaneview;
+  exports.createSplitview = createSplitview;
   exports.directionToPosition = directionToPosition;
   exports.getDirectionOrientation = getDirectionOrientation;
   exports.getGridLocation = getGridLocation;