dockview 1.10.1 → 1.11.0

package/dist/dockview.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.10.1
+ * @version 1.11.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -9,26 +9,6 @@
 var React = require('react');
 var ReactDOM = require('react-dom');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
-
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -56,7 +36,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "@import \"dockview-core/dist/styles/dockview.css\";\n.tab .dockview-react-tab {\n  display: flex;\n  padding: 0px 8px;\n  align-items: center;\n  height: 100%;\n}\n.tab .dockview-react-tab .dockview-react-tab-title {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .dockview-react-tab .dv-react-tab-close-btn {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .dockview-react-tab .dv-react-tab-close-btn:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tab.inactive-tab:not(:hover) .dv-react-tab-close-btn {\n  visibility: hidden;\n}\n.dockview-react-part {\n  height: 100%;\n  width: 100%;\n}";
+var css_248z = ".dv-render-overlay {\n  position: absolute;\n  z-index: 1;\n  height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n  z-index: 999;\n}\n\n.dv-debug .dv-render-overlay {\n  outline: 1px solid red;\n  outline-offset: -1;\n}\n.dockview-svg {\n  display: inline-block;\n  fill: currentcolor;\n  line-height: 1;\n  stroke: currentcolor;\n  stroke-width: 0;\n}\n.dockview-theme-dark {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: white;\n  --dv-tabs-and-actions-container-background-color: #f3f3f3;\n  --dv-activegroup-visiblepanel-tab-background-color: white;\n  --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-inactivegroup-visiblepanel-tab-background-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n  --dv-tab-divider-color: white;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n  --dv-separator-border: rgba(128, 128, 128, 0.35);\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #1e1e1e;\n  --dv-tabs-and-actions-container-background-color: #252526;\n  --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n  --dv-tab-divider-color: #1e1e1e;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: #969696;\n  --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n  --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n  --dv-separator-border: rgb(68, 68, 68);\n  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n  --dv-tabs-and-actions-container-background-color: #2d2d30;\n  --dv-tabs-and-actions-container-height: 20px;\n  --dv-tabs-and-actions-container-font-size: 11px;\n  --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: white;\n  --dv-inactivegroup-visiblepanel-tab-color: white;\n  --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n  box-sizing: content-box;\n  border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #000c18;\n  --dv-tabs-and-actions-container-background-color: #1c1c2a;\n  --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n  --dv-tab-divider-color: #2b2b4a;\n  --dv-activegroup-visiblepanel-tab-color: white;\n  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n  --dv-separator-border: #2b2b4a;\n  --dv-paneview-header-border-color: #2b2b4a;\n  --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-view-background-color: #282a36;\n  --dv-tabs-and-actions-container-background-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n  --dv-tab-divider-color: #191a21;\n  --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n  --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n  --dv-separator-border: #bd93f9;\n  --dv-paneview-header-border-color: #bd93f9;\n  --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #94527e;\n  z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n  position: absolute;\n  left: 0px;\n  bottom: 0px;\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  background-color: #5e3d5a;\n  z-index: 999;\n}\n\n.dockview-theme-replit {\n  --dv-background-color: black;\n  --dv-paneview-active-outline-color: dodgerblue;\n  --dv-tabs-and-actions-container-font-size: 13px;\n  --dv-tabs-and-actions-container-height: 35px;\n  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n  --dv-drag-over-border-color: white;\n  --dv-tabs-container-scrollbar-color: #888;\n  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n  --dv-group-gap-size: 3px;\n  --dv-group-view-background-color: #ebeced;\n  --dv-tabs-and-actions-container-background-color: #fcfcfc;\n  --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-activegroup-hiddenpanel-tab-background-color: ##fcfcfc;\n  --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n  --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n  --dv-tab-divider-color: transparent;\n  --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n  --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n  --dv-separator-border: transparent;\n  --dv-paneview-header-border-color: rgb(51, 51, 51);\n  --dv-background-color: #ebeced;\n  --dv-separator-handle-background-color: #cfd1d3;\n  --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-resize-container:has(> .groupview) {\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview {\n  overflow: hidden;\n  border-radius: 10px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container {\n  border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab {\n  margin: 4px;\n  border-radius: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab .dockview-svg {\n  height: 8px;\n  width: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab:hover {\n  background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .groupview .content-container {\n  background-color: #fcfcfc;\n}\n.dockview-theme-replit .groupview.active-group {\n  border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview.inactive-group {\n  border: 1px solid transparent;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash::after {\n  content: \"\";\n  height: 4px;\n  width: 40px;\n  border-radius: 2px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--dv-separator-handle-background-color);\n  position: absolute;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash::after {\n  content: \"\";\n  height: 40px;\n  width: 4px;\n  border-radius: 2px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--dv-separator-handle-background-color);\n  position: absolute;\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash:hover::after {\n  background-color: var(--dv-separator-handle-hover-background-color);\n}\n.drop-target {\n  position: relative;\n}\n.drop-target > .drop-target-dropzone {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1000;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n  position: relative;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-drag-over-background-color);\n  transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n  will-change: transform;\n  pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n  border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n  border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n  border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n  border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n  background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n  background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n  background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n  background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n  background-color: cyan;\n}\n\n.dv-resize-container {\n  position: absolute;\n  z-index: 997;\n  border: 1px solid var(--dv-tab-divider-color);\n  box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-bring-to-front {\n  z-index: 998;\n}\n.dv-resize-container.dv-resize-container-dragging {\n  opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n  height: 4px;\n  width: calc(100% - 8px);\n  left: 4px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n  height: calc(100% - 8px);\n  width: 4px;\n  left: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n  height: calc(100% - 8px);\n  width: 4px;\n  right: -2px;\n  top: 4px;\n  z-index: 999;\n  position: absolute;\n  cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n  height: 4px;\n  width: 4px;\n  top: -2px;\n  left: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  top: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n  height: 4px;\n  width: 4px;\n  left: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n  height: 4px;\n  width: 4px;\n  right: -2px;\n  bottom: -2px;\n  z-index: 999;\n  position: absolute;\n  cursor: se-resize;\n}\n.dv-dockview {\n  position: relative;\n  background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n  position: relative;\n}\n.dv-dockview .split-view-container.horizontal > .view-container > .view:not(:last-child) {\n  border-right: var(--dv-group-gap-size) solid transparent;\n}\n.dv-dockview .split-view-container.horizontal > .view-container > .view:not(:first-child) {\n  border-left: var(--dv-group-gap-size) solid transparent;\n}\n.dv-dockview .split-view-container.vertical > .view-container > .view:not(:last-child) {\n  border-bottom: var(--dv-group-gap-size) solid transparent;\n}\n.dv-dockview .split-view-container.vertical > .view-container > .view:not(:first-child) {\n  border-top: var(--dv-group-gap-size) solid transparent;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n  color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n  color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dv-tab-dragging {\n  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--dv-group-view-background-color);\n  overflow: hidden;\n}\n.groupview:focus {\n  outline: none;\n}\n.groupview.empty > .tabs-and-actions-container {\n  display: none;\n}\n.groupview > .content-container {\n  flex-grow: 1;\n  min-height: 0;\n  outline: none;\n}\n.dv-root-wrapper {\n  height: 100%;\n  width: 100%;\n}\n.grid-view,\n.branch-node {\n  height: 100%;\n  width: 100%;\n}\n.pane-container {\n  height: 100%;\n  width: 100%;\n}\n.pane-container.animated .view {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.pane-container .view {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n  background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n  border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n  background-color: var(--dv-group-view-background-color);\n  color: var(--dv-activegroup-visiblepanel-tab-color);\n  display: flex;\n  padding: 0px 8px;\n  cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pane-container .view .default-header > span {\n  padding-left: 8px;\n  flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n  border-top: none !important;\n}\n.pane-container .pane {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  height: 100%;\n}\n.pane-container .pane .pane-header {\n  box-sizing: border-box;\n  user-select: none;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n  cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-grow: 1;\n  position: relative;\n  outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  content: \"\";\n  pointer-events: none;\n  outline: 1px solid;\n  outline-width: -1px;\n  outline-style: solid;\n  outline-offset: -1px;\n  outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .split-view-container .sash-container .sash.enabled {\n  background-color: black;\n}\n.dv-debug .split-view-container .sash-container .sash.disabled {\n  background-color: orange;\n}\n.dv-debug .split-view-container .sash-container .sash.maximum {\n  background-color: green;\n}\n.dv-debug .split-view-container .sash-container .sash.minimum {\n  background-color: red;\n}\n\n.split-view-container {\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n}\n.split-view-container.dv-splitview-disabled > .sash-container > .sash {\n  pointer-events: none;\n}\n.split-view-container.animation .view,\n.split-view-container.animation .sash {\n  transition-duration: 0.15s;\n  transition-timing-function: ease-out;\n}\n.split-view-container.horizontal {\n  height: 100%;\n}\n.split-view-container.horizontal > .sash-container > .sash {\n  height: 100%;\n  width: 4px;\n}\n.split-view-container.horizontal > .sash-container > .sash.enabled {\n  cursor: ew-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.horizontal > .sash-container > .sash.maximum {\n  cursor: w-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.minimum {\n  cursor: e-resize;\n}\n.split-view-container.horizontal > .view-container > .view:not(:first-child)::before {\n  height: 100%;\n  width: 1px;\n}\n.split-view-container.vertical {\n  width: 100%;\n}\n.split-view-container.vertical > .sash-container > .sash {\n  width: 100%;\n  height: 4px;\n}\n.split-view-container.vertical > .sash-container > .sash.enabled {\n  cursor: ns-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.disabled {\n  cursor: default;\n}\n.split-view-container.vertical > .sash-container > .sash.maximum {\n  cursor: n-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.minimum {\n  cursor: s-resize;\n}\n.split-view-container.vertical > .view-container > .view {\n  width: 100%;\n}\n.split-view-container.vertical > .view-container > .view:not(:first-child)::before {\n  height: 1px;\n  width: 100%;\n}\n.split-view-container .sash-container {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n}\n.split-view-container .sash-container .sash {\n  position: absolute;\n  z-index: 99;\n  outline: none;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  touch-action: none;\n}\n.split-view-container .sash-container .sash:not(.disabled):active {\n  transition: background-color 0.1s ease-in-out;\n  background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:not(.disabled):hover {\n  background-color: var(--dv-active-sash-color, transparent);\n  transition: background-color 0.1s ease-in-out;\n  transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--dv-background-color);\n}\n.split-view-container .view-container .view {\n  height: 100%;\n  box-sizing: border-box;\n  overflow: auto;\n  position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  pointer-events: none;\n  background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n  transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n  flex-shrink: 0;\n}\n.tab:focus-within, .tab:focus {\n  position: relative;\n}\n.tab:focus-within::after, .tab:focus::after {\n  position: absolute;\n  content: \"\";\n  height: 100%;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  pointer-events: none;\n  outline: 1px solid var(--dv-tab-divider-color) !important;\n  outline-offset: -1px;\n  z-index: 5;\n}\n.tab.dv-tab-dragging .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: elipsis;\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 {
@@ -4288,6 +4268,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this._width = 0;
         this._height = 0;
         this._panels = [];
+        this._panelDisposables = new Map();
         this._onMove = new Emitter();
         this.onMove = this._onMove.event;
         this._onDidDrop = new Emitter();
@@ -4302,6 +4283,10 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this.onGroupDragStart = this._onGroupDragStart.event;
         this._onDidAddPanel = new Emitter();
         this.onDidAddPanel = this._onDidAddPanel.event;
+        this._onDidPanelTitleChange = new Emitter();
+        this.onDidPanelTitleChange = this._onDidPanelTitleChange.event;
+        this._onDidPanelParametersChange = new Emitter();
+        this.onDidPanelParametersChange = this._onDidPanelParametersChange.event;
         this._onDidRemovePanel = new Emitter();
         this.onDidRemovePanel = this._onDidRemovePanel.event;
         this._onDidActivePanelChange = new Emitter();
@@ -4590,6 +4575,11 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         if (this.mostRecentlyUsed.includes(panel)) {
             this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
         }
+        const disposable = this._panelDisposables.get(panel.id);
+        if (disposable) {
+            disposable.dispose();
+            this._panelDisposables.delete(panel.id);
+        }
         this._onDidRemovePanel.fire({ panel });
     }
     doAddPanel(panel, index = this.panels.length, options = { skipSetActive: false }) {
@@ -4607,6 +4597,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         }
         this.updateMru(panel);
         this.panels.splice(index, 0, panel);
+        this._panelDisposables.set(panel.id, new CompositeDisposable(panel.api.onDidTitleChange((event) => this._onDidPanelTitleChange.fire(event)), panel.api.onDidParametersChange((event) => this._onDidPanelParametersChange.fire(event))));
         this._onDidAddPanel.fire({ panel });
     }
     doSetActivePanel(panel) {
@@ -5030,14 +5021,16 @@ class PanelApiImpl extends CompositeDisposable {
     get height() {
         return this._height;
     }
-    constructor(id) {
+    constructor(id, component) {
         super();
         this.id = id;
+        this.component = component;
         this._isFocused = false;
         this._isActive = false;
         this._isVisible = true;
         this._width = 0;
         this._height = 0;
+        this._parameters = {};
         this.panelUpdatesDisposable = new MutableDisposable();
         this._onDidDimensionChange = new Emitter();
         this.onDidDimensionsChange = this._onDidDimensionChange.event;
@@ -5055,8 +5048,8 @@ class PanelApiImpl extends CompositeDisposable {
         this.onDidActiveChange = this._onDidActiveChange.event;
         this._onActiveChange = new Emitter();
         this.onActiveChange = this._onActiveChange.event;
-        this._onUpdateParameters = new Emitter();
-        this.onUpdateParameters = this._onUpdateParameters.event;
+        this._onDidParametersChange = new Emitter();
+        this.onDidParametersChange = this._onDidParametersChange.event;
         this.addDisposables(this.onDidFocusChange((event) => {
             this._isFocused = event.isFocused;
         }), this.onDidActiveChange((event) => {
@@ -5066,10 +5059,14 @@ class PanelApiImpl extends CompositeDisposable {
         }), this.onDidDimensionsChange((event) => {
             this._width = event.width;
             this._height = event.height;
-        }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onUpdateParameters, this._onWillFocus, this._onWillVisibilityChange, this._onUpdateParameters);
+        }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onWillFocus, this._onWillVisibilityChange, this._onDidParametersChange);
+    }
+    getParameters() {
+        return this._parameters;
     }
     initialize(panel) {
-        this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
+        this.panelUpdatesDisposable.value = this._onDidParametersChange.event((parameters) => {
+            this._parameters = parameters;
             panel.update({
                 params: parameters,
             });
@@ -5082,14 +5079,14 @@ class PanelApiImpl extends CompositeDisposable {
         this._onActiveChange.fire();
     }
     updateParameters(parameters) {
-        this._onUpdateParameters.fire(parameters);
+        this._onDidParametersChange.fire(parameters);
     }
 }
 
 class SplitviewPanelApiImpl extends PanelApiImpl {
     //
-    constructor(id) {
-        super(id);
+    constructor(id, component) {
+        super(id, component);
         this._onDidConstraintsChangeInternal = new Emitter();
         this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
         //
@@ -5114,8 +5111,8 @@ class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
     set pane(pane) {
         this._pane = pane;
     }
-    constructor(id) {
-        super(id);
+    constructor(id, component) {
+        super(id, component);
         this._onDidExpansionChange = new Emitter({
             replay: true,
         });
@@ -5274,7 +5271,7 @@ class PaneviewPanel extends BasePanelView {
         this.header.style.display = value ? '' : 'none';
     }
     constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
-        super(id, component, new PaneviewPanelApiImpl(id));
+        super(id, component, new PaneviewPanelApiImpl(id, component));
         this.headerComponent = headerComponent;
         this._onDidChangeExpansionState = new Emitter({ replay: true });
         this.onDidChangeExpansionState = this._onDidChangeExpansionState.event;
@@ -5505,8 +5502,8 @@ class DraggablePaneviewPanel extends PaneviewPanel {
 }
 
 class GridviewPanelApiImpl extends PanelApiImpl {
-    constructor(id, panel) {
-        super(id);
+    constructor(id, component, panel) {
+        super(id, component);
         this._onDidConstraintsChangeInternal = new Emitter();
         this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
         this._onDidConstraintsChange = new Emitter();
@@ -5577,7 +5574,7 @@ class GridviewPanel extends BasePanelView {
         return this.api.isActive;
     }
     constructor(id, component, options, api) {
-        super(id, component, api !== null && api !== void 0 ? api : new GridviewPanelApiImpl(id));
+        super(id, component, api !== null && api !== void 0 ? api : new GridviewPanelApiImpl(id, component));
         this._evaluatedMinimumWidth = 0;
         this._evaluatedMaximumWidth = Number.MAX_SAFE_INTEGER;
         this._evaluatedMinimumHeight = 0;
@@ -5685,7 +5682,7 @@ class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
         return this._group.model.location;
     }
     constructor(id, accessor) {
-        super(id);
+        super(id, '__dockviewgroup__');
         this.accessor = accessor;
         this._onDidLocationChange = new Emitter();
         this.onDidLocationChange = this._onDidLocationChange.event;
@@ -5859,8 +5856,11 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
     get group() {
         return this._group;
     }
-    constructor(panel, group, accessor) {
-        super(panel.id);
+    get tabComponent() {
+        return this._tabComponent;
+    }
+    constructor(panel, group, accessor, component, tabComponent) {
+        super(panel.id, component);
         this.panel = panel;
         this.accessor = accessor;
         this._onDidTitleChange = new Emitter();
@@ -5874,6 +5874,7 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         this._onDidLocationChange = new Emitter();
         this.onDidLocationChange = this._onDidLocationChange.event;
         this.groupEventsDisposable = new MutableDisposable();
+        this._tabComponent = tabComponent;
         this.initialize(panel);
         this._group = group;
         this.setupGroupEventListeners();
@@ -5956,7 +5957,7 @@ class DockviewPanel extends CompositeDisposable {
         var _a;
         return (_a = this._renderer) !== null && _a !== void 0 ? _a : this.accessor.renderer;
     }
-    constructor(id, accessor, containerApi, group, view, options) {
+    constructor(id, component, tabComponent, accessor, containerApi, group, view, options) {
         super();
         this.id = id;
         this.accessor = accessor;
@@ -5964,7 +5965,7 @@ class DockviewPanel extends CompositeDisposable {
         this.view = view;
         this._renderer = options.renderer;
         this._group = group;
-        this.api = new DockviewPanelApiImpl(this, this._group, accessor);
+        this.api = new DockviewPanelApiImpl(this, this._group, accessor, component, tabComponent);
         this.addDisposables(this.api.onActiveChange(() => {
             accessor.setActivePanel(this);
         }), this.api.onDidSizeChange((event) => {
@@ -6132,27 +6133,18 @@ class DefaultTab extends CompositeDisposable {
         //
         this.params = {};
         this._element = document.createElement('div');
-        this._element.className = 'default-tab';
+        this._element.className = 'dv-default-tab';
         //
         this._content = document.createElement('div');
-        this._content.className = 'tab-content';
-        //
-        this._actionContainer = document.createElement('div');
-        this._actionContainer.className = 'action-container';
-        //
-        this._list = document.createElement('ul');
-        this._list.className = 'tab-list';
-        //
+        this._content.className = 'dv-default-tab-content';
         this.action = document.createElement('div');
-        this.action.className = 'tab-action';
+        this.action.className = 'dv-default-tab-action';
         this.action.appendChild(createCloseButton());
         //
         this._element.appendChild(this._content);
-        this._element.appendChild(this._actionContainer);
-        this._actionContainer.appendChild(this._list);
-        this._list.appendChild(this.action);
+        this._element.appendChild(this.action);
         //
-        this.addDisposables(addDisposableListener(this._actionContainer, 'mousedown', (ev) => {
+        this.addDisposables(addDisposableListener(this.action, 'mousedown', (ev) => {
             ev.preventDefault();
         }));
         this.render();
@@ -6259,7 +6251,7 @@ class DefaultDockviewDeserialzier {
             ? (_b = viewData.tab) === null || _b === void 0 ? void 0 : _b.id
             : panelData.tabComponent;
         const view = new DockviewPanelModel(this.accessor, panelId, contentComponent, tabComponent);
-        const panel = new DockviewPanel(panelId, this.accessor, new DockviewApi(this.accessor), group, view, {
+        const panel = new DockviewPanel(panelId, contentComponent, tabComponent, this.accessor, new DockviewApi(this.accessor), group, view, {
             renderer: panelData.renderer,
         });
         panel.init({
@@ -8246,6 +8238,8 @@ class DockviewComponent extends BaseGrid {
                 if (this._onDidActivePanelChange.value !== event.panel) {
                     this._onDidActivePanelChange.fire(event.panel);
                 }
+            }), exports.DockviewEvent.any(view.model.onDidPanelTitleChange, view.model.onDidPanelParametersChange)(() => {
+                this._bufferOnDidLayoutChange.fire();
             }));
             this._groups.set(view.id, { value: view, disposable });
         }
@@ -8258,7 +8252,7 @@ class DockviewComponent extends BaseGrid {
         const contentComponent = options.component;
         const tabComponent = (_a = options.tabComponent) !== null && _a !== void 0 ? _a : this.options.defaultTabComponent;
         const view = new DockviewPanelModel(this, options.id, contentComponent, tabComponent);
-        const panel = new DockviewPanel(options.id, this, this._api, group, view, { renderer: options.renderer });
+        const panel = new DockviewPanel(options.id, contentComponent, tabComponent, this, this._api, group, view, { renderer: options.renderer });
         panel.init({
             title: (_b = options.title) !== null && _b !== void 0 ? _b : options.id,
             params: (_c = options === null || options === void 0 ? void 0 : options.params) !== null && _c !== void 0 ? _c : {},
@@ -9173,7 +9167,7 @@ class SplitviewPanel extends BasePanelView {
         return this._snap;
     }
     constructor(id, componentName) {
-        super(id, componentName, new SplitviewPanelApiImpl(id));
+        super(id, componentName, new SplitviewPanelApiImpl(id, componentName));
         this._evaluatedMinimumSize = 0;
         this._evaluatedMaximumSize = Number.POSITIVE_INFINITY;
         this._minimumSize = 0;
@@ -9253,9 +9247,9 @@ class SplitviewPanel extends BasePanelView {
  * component
  */
 const ReactComponentBridge = (props, ref) => {
-    const [_, triggerRender] = React__namespace.useState();
-    const _props = React__namespace.useRef(props.componentProps);
-    React__namespace.useImperativeHandle(ref, () => ({
+    const [_, triggerRender] = React.useState();
+    const _props = React.useRef(props.componentProps);
+    React.useImperativeHandle(ref, () => ({
         update: (componentProps) => {
             _props.current = Object.assign(Object.assign({}, _props.current), componentProps);
             /**
@@ -9267,7 +9261,7 @@ const ReactComponentBridge = (props, ref) => {
             triggerRender(Date.now());
         },
     }), []);
-    return React__namespace.createElement(props.component, _props.current);
+    return React.createElement(props.component, _props.current);
 };
 ReactComponentBridge.displayName = 'DockviewReactJsBridge';
 /**
@@ -9279,7 +9273,7 @@ const uniquePortalKeyGenerator = (() => {
     let value = 1;
     return { next: () => `dockview_react_portal_key_${(value++).toString()}` };
 })();
-const ReactPartContext = React__namespace.createContext({});
+const ReactPartContext = React.createContext({});
 class ReactPart {
     constructor(parent, portalStore, component, parameters, context) {
         this.parent = parent;
@@ -9315,7 +9309,7 @@ class ReactPart {
              */
             throw new Error('Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components');
         }
-        const bridgeComponent = React__namespace.createElement(React__namespace.forwardRef(ReactComponentBridge), {
+        const bridgeComponent = React.createElement(React.forwardRef(ReactComponentBridge), {
             component: this
                 .component,
             componentProps: this.parameters,
@@ -9328,9 +9322,9 @@ class ReactPart {
             },
         });
         const node = this.context
-            ? React__namespace.createElement(ReactPartContext.Provider, { value: this.context }, bridgeComponent)
+            ? React.createElement(ReactPartContext.Provider, { value: this.context }, bridgeComponent)
             : bridgeComponent;
-        const portal = ReactDOM__namespace.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
+        const portal = ReactDOM.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
         this.ref = {
             portal,
             disposable: this.portalStore.addPortal(portal),
@@ -9348,9 +9342,9 @@ class ReactPart {
  * portal array
  */
 const usePortalsLifecycle = () => {
-    const [portals, setPortals] = React__namespace.useState([]);
-    React__namespace.useDebugValue(`Portal count: ${portals.length}`);
-    const addPortal = React__namespace.useCallback((portal) => {
+    const [portals, setPortals] = React.useState([]);
+    React.useDebugValue(`Portal count: ${portals.length}`);
+    const addPortal = React.useCallback((portal) => {
         setPortals((existingPortals) => [...existingPortals, portal]);
         let disposed = false;
         return {
@@ -9388,6 +9382,8 @@ class ReactPanelContentPart {
         this.onDidBlur = this._onDidBlur.event;
         this._element = document.createElement('div');
         this._element.className = 'dockview-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
     }
     focus() {
         // TODO
@@ -9424,6 +9420,8 @@ class ReactPanelHeaderPart {
         this.reactPortalStore = reactPortalStore;
         this._element = document.createElement('div');
         this._element.className = 'dockview-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
     }
     focus() {
         //noop
@@ -9458,6 +9456,8 @@ class ReactWatermarkPart {
         this.reactPortalStore = reactPortalStore;
         this._element = document.createElement('div');
         this._element.className = 'dockview-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
     }
     init(parameters) {
         this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
@@ -9509,6 +9509,8 @@ class ReactHeaderActionsRendererPart {
         this.mutableDisposable = new MutableDisposable();
         this._element = document.createElement('div');
         this._element.className = 'dockview-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
     }
     focus() {
         // TODO
@@ -9568,12 +9570,12 @@ function createGroupControlElement(component, store) {
         : undefined;
 }
 const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
-const DockviewReact = React__namespace.forwardRef((props, ref) => {
-    const domRef = React__namespace.useRef(null);
-    const dockviewRef = React__namespace.useRef();
+const DockviewReact = React.forwardRef((props, ref) => {
+    const domRef = React.useRef(null);
+    const dockviewRef = React.useRef();
     const [portals, addPortal] = usePortalsLifecycle();
-    React__namespace.useImperativeHandle(ref, () => domRef.current, []);
-    React__namespace.useEffect(() => {
+    React.useImperativeHandle(ref, () => domRef.current, []);
+    React.useEffect(() => {
         var _a;
         if (!domRef.current) {
             return () => {
@@ -9644,13 +9646,13 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             dockview.dispose();
         };
     }, []);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
         dockviewRef.current.locked = !!props.locked;
     }, [props.locked]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
@@ -9658,7 +9660,7 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             disableDnd: props.disableDnd,
         });
     }, [props.disableDnd]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!dockviewRef.current) {
             return () => {
                 // noop
@@ -9673,7 +9675,7 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             disposable.dispose();
         };
     }, [props.onDidDrop]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!dockviewRef.current) {
             return () => {
                 // noop
@@ -9688,7 +9690,7 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             disposable.dispose();
         };
     }, [props.onWillDrop]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
@@ -9696,7 +9698,7 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             frameworkComponents: props.components,
         });
     }, [props.components]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
@@ -9704,7 +9706,7 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             floatingGroupBounds: props.floatingGroupBounds,
         });
     }, [props.floatingGroupBounds]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
@@ -9712,7 +9714,7 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             watermarkFrameworkComponent: props.watermarkComponent,
         });
     }, [props.watermarkComponent]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
@@ -9720,7 +9722,7 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             showDndOverlay: props.showDndOverlay,
         });
     }, [props.showDndOverlay]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
@@ -9728,7 +9730,7 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             frameworkTabComponents: props.tabComponents,
         });
     }, [props.tabComponents]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
@@ -9736,7 +9738,7 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             disableFloatingGroups: props.disableFloatingGroups,
         });
     }, [props.disableFloatingGroups]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         var _a;
         if (!dockviewRef.current) {
             return;
@@ -9753,7 +9755,7 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             frameworkTabComponents,
         });
     }, [props.defaultTabComponent]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
@@ -9761,7 +9763,7 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
         });
     }, [props.rightHeaderActionsComponent]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
@@ -9769,7 +9771,7 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
         });
     }, [props.leftHeaderActionsComponent]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
@@ -9777,7 +9779,7 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             rootOverlayModel: props.rootOverlayModel,
         });
     }, [props.rootOverlayModel]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
         }
@@ -9785,7 +9787,7 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
         });
     }, [props.prefixHeaderActionsComponent]);
-    return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 DockviewReact.displayName = 'DockviewComponent';
 
@@ -9823,12 +9825,12 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const CloseButton = () => (React__namespace.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
-    React__namespace.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
+const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
+    React.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
 
 const DockviewDefaultTab = (_a) => {
     var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride"]);
-    const onClose = React__namespace.useCallback((event) => {
+    const onClose = React.useCallback((event) => {
         event.preventDefault();
         if (closeActionOverride) {
             closeActionOverride();
@@ -9837,10 +9839,10 @@ const DockviewDefaultTab = (_a) => {
             api.close();
         }
     }, [api, closeActionOverride]);
-    const onMouseDown = React__namespace.useCallback((e) => {
+    const onMouseDown = React.useCallback((e) => {
         e.preventDefault();
     }, []);
-    const onClick = React__namespace.useCallback((event) => {
+    const onClick = React.useCallback((event) => {
         if (event.defaultPrevented) {
             return;
         }
@@ -9849,10 +9851,10 @@ const DockviewDefaultTab = (_a) => {
             rest.onClick(event);
         }
     }, [api, rest.onClick]);
-    return (React__namespace.createElement("div", Object.assign({ "data-testid": "dockview-default-tab" }, rest, { onClick: onClick, className: "dockview-react-tab" }),
-        React__namespace.createElement("span", { className: "dockview-react-tab-title" }, api.title),
-        !hideClose && (React__namespace.createElement("div", { className: "dv-react-tab-close-btn", onMouseDown: onMouseDown, onClick: onClose },
-            React__namespace.createElement(CloseButton, null)))));
+    return (React.createElement("div", Object.assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onClick: onClick, className: "dv-default-tab" }),
+        React.createElement("span", { className: "dv-default-tab-content" }, api.title),
+        !hideClose && (React.createElement("div", { className: "dv-default-tab-action", onMouseDown: onMouseDown, onClick: onClose },
+            React.createElement(CloseButton, null)))));
 };
 
 class ReactPanelView extends SplitviewPanel {
@@ -9871,12 +9873,12 @@ class ReactPanelView extends SplitviewPanel {
     }
 }
 
-const SplitviewReact = React__namespace.forwardRef((props, ref) => {
-    const domRef = React__namespace.useRef(null);
-    const splitviewRef = React__namespace.useRef();
+const SplitviewReact = React.forwardRef((props, ref) => {
+    const domRef = React.useRef(null);
+    const splitviewRef = React.useRef();
     const [portals, addPortal] = usePortalsLifecycle();
-    React__namespace.useImperativeHandle(ref, () => domRef.current, []);
-    React__namespace.useEffect(() => {
+    React.useImperativeHandle(ref, () => domRef.current, []);
+    React.useEffect(() => {
         var _a;
         const splitview = new SplitviewComponent({
             parentElement: domRef.current,
@@ -9907,7 +9909,7 @@ const SplitviewReact = React__namespace.forwardRef((props, ref) => {
             splitview.dispose();
         };
     }, []);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!splitviewRef.current) {
             return;
         }
@@ -9915,7 +9917,7 @@ const SplitviewReact = React__namespace.forwardRef((props, ref) => {
             frameworkComponents: props.components,
         });
     }, [props.components]);
-    return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 SplitviewReact.displayName = 'SplitviewComponent';
 
@@ -9937,12 +9939,12 @@ class ReactGridPanelView extends GridviewPanel {
     }
 }
 
-const GridviewReact = React__namespace.forwardRef((props, ref) => {
-    const domRef = React__namespace.useRef(null);
-    const gridviewRef = React__namespace.useRef();
+const GridviewReact = React.forwardRef((props, ref) => {
+    const domRef = React.useRef(null);
+    const gridviewRef = React.useRef();
     const [portals, addPortal] = usePortalsLifecycle();
-    React__namespace.useImperativeHandle(ref, () => domRef.current, []);
-    React__namespace.useEffect(() => {
+    React.useImperativeHandle(ref, () => domRef.current, []);
+    React.useEffect(() => {
         var _a;
         if (!domRef.current) {
             return () => {
@@ -9978,7 +9980,7 @@ const GridviewReact = React__namespace.forwardRef((props, ref) => {
             gridview.dispose();
         };
     }, []);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!gridviewRef.current) {
             return;
         }
@@ -9986,7 +9988,7 @@ const GridviewReact = React__namespace.forwardRef((props, ref) => {
             frameworkComponents: props.components,
         });
     }, [props.components]);
-    return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 GridviewReact.displayName = 'GridviewComponent';
 
@@ -10025,12 +10027,12 @@ class PanePanelSection {
     }
 }
 
-const PaneviewReact = React__namespace.forwardRef((props, ref) => {
-    const domRef = React__namespace.useRef(null);
-    const paneviewRef = React__namespace.useRef();
+const PaneviewReact = React.forwardRef((props, ref) => {
+    const domRef = React.useRef(null);
+    const paneviewRef = React.useRef();
     const [portals, addPortal] = usePortalsLifecycle();
-    React__namespace.useImperativeHandle(ref, () => domRef.current, []);
-    React__namespace.useEffect(() => {
+    React.useImperativeHandle(ref, () => domRef.current, []);
+    React.useEffect(() => {
         const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
             addPortal,
         });
@@ -10063,7 +10065,7 @@ const PaneviewReact = React__namespace.forwardRef((props, ref) => {
             paneview.dispose();
         };
     }, []);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!paneviewRef.current) {
             return;
         }
@@ -10071,7 +10073,7 @@ const PaneviewReact = React__namespace.forwardRef((props, ref) => {
             frameworkComponents: props.components,
         });
     }, [props.components]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!paneviewRef.current) {
             return;
         }
@@ -10079,7 +10081,7 @@ const PaneviewReact = React__namespace.forwardRef((props, ref) => {
             headerframeworkComponents: props.headerComponents,
         });
     }, [props.headerComponents]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!paneviewRef.current) {
             return () => {
                 //
@@ -10095,7 +10097,7 @@ const PaneviewReact = React__namespace.forwardRef((props, ref) => {
             disposable.dispose();
         };
     }, [props.onDidDrop]);
-    React__namespace.useEffect(() => {
+    React.useEffect(() => {
         if (!paneviewRef.current) {
             return;
         }
@@ -10103,7 +10105,7 @@ const PaneviewReact = React__namespace.forwardRef((props, ref) => {
             showDndOverlay: props.showDndOverlay,
         });
     }, [props.showDndOverlay]);
-    return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 PaneviewReact.displayName = 'PaneviewComponent';