dockview-react 1.17.2 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/dockview-react.amd.js +241 -185
  2. package/dist/dockview-react.amd.js.map +1 -1
  3. package/dist/dockview-react.amd.min.js +2 -2
  4. package/dist/dockview-react.amd.min.js.map +1 -1
  5. package/dist/dockview-react.amd.min.noStyle.js +2 -2
  6. package/dist/dockview-react.amd.min.noStyle.js.map +1 -1
  7. package/dist/dockview-react.amd.noStyle.js +240 -184
  8. package/dist/dockview-react.amd.noStyle.js.map +1 -1
  9. package/dist/dockview-react.cjs.js +241 -185
  10. package/dist/dockview-react.cjs.js.map +1 -1
  11. package/dist/dockview-react.esm.js +242 -184
  12. package/dist/dockview-react.esm.js.map +1 -1
  13. package/dist/dockview-react.esm.min.js +2 -2
  14. package/dist/dockview-react.esm.min.js.map +1 -1
  15. package/dist/dockview-react.js +241 -185
  16. package/dist/dockview-react.js.map +1 -1
  17. package/dist/dockview-react.min.js +2 -2
  18. package/dist/dockview-react.min.js.map +1 -1
  19. package/dist/dockview-react.min.noStyle.js +2 -2
  20. package/dist/dockview-react.min.noStyle.js.map +1 -1
  21. package/dist/dockview-react.noStyle.js +240 -184
  22. package/dist/dockview-react.noStyle.js.map +1 -1
  23. package/dist/styles/dockview.css +114 -125
  24. package/package.json +2 -2
package/dist/dockview-react.esm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * dockview-react
3
- * @version 1.17.2
3
+ * @version 2.0.0
4
4
  * @link https://github.com/mathuo/dockview
5
5
  * @license MIT
6
6
  */
@@ -34,7 +34,7 @@ function styleInject(css, ref) {
34
34
  }
35
35
  }
36
36
 
37
- var css_248z = ".dockview-svg {\n display: inline-block;\n fill: currentcolor;\n line-height: 1;\n stroke: currentcolor;\n stroke-width: 0;\n}\n.dockview-theme-dark {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: white;\n --dv-tabs-and-actions-container-background-color: #f3f3f3;\n --dv-activegroup-visiblepanel-tab-background-color: white;\n --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-inactivegroup-visiblepanel-tab-background-color: white;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-tab-divider-color: white;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n --dv-separator-border: rgba(128, 128, 128, 0.35);\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n --dv-tabs-and-actions-container-background-color: #2d2d30;\n --dv-tabs-and-actions-container-height: 20px;\n --dv-tabs-and-actions-container-font-size: 11px;\n --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: white;\n --dv-inactivegroup-visiblepanel-tab-color: white;\n --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #000c18;\n --dv-tabs-and-actions-container-background-color: #1c1c2a;\n --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n --dv-tab-divider-color: #2b2b4a;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n --dv-separator-border: #2b2b4a;\n --dv-paneview-header-border-color: #2b2b4a;\n --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #282a36;\n --dv-tabs-and-actions-container-background-color: #191a21;\n --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-tab-divider-color: #191a21;\n --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n --dv-separator-border: #bd93f9;\n --dv-paneview-header-border-color: #bd93f9;\n --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n position: absolute;\n left: 0px;\n top: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #94527e;\n z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #5e3d5a;\n z-index: 999;\n}\n\n.dockview-theme-replit {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #ebeced;\n --dv-tabs-and-actions-container-background-color: #fcfcfc;\n --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n --dv-activegroup-hiddenpanel-tab-background-color: #fcfcfc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n --dv-tab-divider-color: transparent;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n --dv-separator-border: transparent;\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-background-color: #ebeced;\n --dv-separator-handle-background-color: #cfd1d3;\n --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-resize-container:has(> .groupview) {\n border-radius: 8px;\n}\n.dockview-theme-replit .groupview {\n overflow: hidden;\n border-radius: 10px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container {\n border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab {\n margin: 4px;\n border-radius: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab .dockview-svg {\n height: 8px;\n width: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab:hover {\n background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .groupview .content-container {\n background-color: #fcfcfc;\n}\n.dockview-theme-replit .groupview.active-group {\n border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview.inactive-group {\n border: 1px solid transparent;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled)::after {\n content: \"\";\n height: 4px;\n width: 40px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-separator-handle-background-color);\n position: absolute;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled):hover::after {\n background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash:not(.disabled)::after {\n content: \"\";\n height: 40px;\n width: 4px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-separator-handle-background-color);\n position: absolute;\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash:not(.disabled):hover::after {\n background-color: var(--dv-separator-handle-hover-background-color);\n}\n.drop-target {\n position: relative;\n}\n.drop-target > .drop-target-dropzone {\n position: absolute;\n left: 0px;\n top: 0px;\n height: 100%;\n width: 100%;\n z-index: 1000;\n pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n position: relative;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n background-color: var(--dv-drag-over-background-color);\n transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n will-change: transform;\n pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-dockview {\n position: relative;\n background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n position: absolute;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n position: relative;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dv-tab-dragging {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--dv-group-view-background-color);\n overflow: hidden;\n}\n.groupview:focus {\n outline: none;\n}\n.groupview.empty > .tabs-and-actions-container {\n display: none;\n}\n.groupview > .content-container {\n flex-grow: 1;\n min-height: 0;\n outline: none;\n}\n.dv-root-wrapper {\n height: 100%;\n width: 100%;\n}\n.grid-view,\n.branch-node {\n height: 100%;\n width: 100%;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n background-color: cyan;\n}\n\n.dv-resize-container {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: calc(var(--dv-overlay-z-index) - 2);\n border: 1px solid var(--dv-tab-divider-color);\n box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-resize-container-dragging {\n opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n height: calc(100% - 8px);\n width: 4px;\n left: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n height: calc(100% - 8px);\n width: 4px;\n right: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n height: 4px;\n width: 4px;\n top: -2px;\n left: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n height: 4px;\n width: 4px;\n right: -2px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n height: 4px;\n width: 4px;\n left: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n height: 4px;\n width: 4px;\n right: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: se-resize;\n}\n.dv-render-overlay {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: 1;\n height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n z-index: calc(var(--dv-overlay-z-index) - 1);\n}\n\n.dv-debug .dv-render-overlay {\n outline: 1px solid red;\n outline-offset: -1;\n}\n.pane-container {\n height: 100%;\n width: 100%;\n}\n.pane-container.animated .view {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.pane-container .view {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n background-color: var(--dv-group-view-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n display: flex;\n padding: 0px 8px;\n cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.pane-container .view .default-header > span {\n padding-left: 8px;\n flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n border-top: none !important;\n}\n.pane-container .pane {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n height: 100%;\n}\n.pane-container .pane .pane-header {\n box-sizing: border-box;\n user-select: none;\n position: relative;\n outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n overflow-y: auto;\n overflow-x: hidden;\n flex-grow: 1;\n position: relative;\n outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .split-view-container .sash-container .sash.enabled {\n background-color: black;\n}\n.dv-debug .split-view-container .sash-container .sash.disabled {\n background-color: orange;\n}\n.dv-debug .split-view-container .sash-container .sash.maximum {\n background-color: green;\n}\n.dv-debug .split-view-container .sash-container .sash.minimum {\n background-color: red;\n}\n\n.split-view-container {\n position: relative;\n overflow: hidden;\n height: 100%;\n width: 100%;\n}\n.split-view-container.dv-splitview-disabled > .sash-container > .sash {\n pointer-events: none;\n}\n.split-view-container.animation .view,\n.split-view-container.animation .sash {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.split-view-container.horizontal {\n height: 100%;\n}\n.split-view-container.horizontal > .sash-container > .sash {\n height: 100%;\n width: 4px;\n}\n.split-view-container.horizontal > .sash-container > .sash.enabled {\n cursor: ew-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.disabled {\n cursor: default;\n}\n.split-view-container.horizontal > .sash-container > .sash.maximum {\n cursor: w-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.minimum {\n cursor: e-resize;\n}\n.split-view-container.horizontal > .view-container > .view:not(:first-child)::before {\n height: 100%;\n width: 1px;\n}\n.split-view-container.vertical {\n width: 100%;\n}\n.split-view-container.vertical > .sash-container > .sash {\n width: 100%;\n height: 4px;\n}\n.split-view-container.vertical > .sash-container > .sash.enabled {\n cursor: ns-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.disabled {\n cursor: default;\n}\n.split-view-container.vertical > .sash-container > .sash.maximum {\n cursor: n-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.minimum {\n cursor: s-resize;\n}\n.split-view-container.vertical > .view-container > .view {\n width: 100%;\n}\n.split-view-container.vertical > .view-container > .view:not(:first-child)::before {\n height: 1px;\n width: 100%;\n}\n.split-view-container .sash-container {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.split-view-container .sash-container .sash {\n position: absolute;\n z-index: 99;\n outline: none;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n touch-action: none;\n}\n.split-view-container .sash-container .sash:not(.disabled):active {\n transition: background-color 0.1s ease-in-out;\n background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:not(.disabled):hover {\n background-color: var(--dv-active-sash-color, transparent);\n transition: background-color 0.1s ease-in-out;\n transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--dv-background-color);\n}\n.split-view-container .view-container .view {\n height: 100%;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n flex-shrink: 0;\n}\n.tab:focus-within, .tab:focus {\n position: relative;\n}\n.tab:focus-within::after, .tab:focus::after {\n position: absolute;\n content: \"\";\n height: 100%;\n width: 100%;\n top: 0px;\n left: 0px;\n pointer-events: none;\n outline: 1px solid var(--dv-tab-divider-color) !important;\n outline-offset: -1px;\n z-index: 5;\n}\n.tab.dv-tab-dragging .dv-default-tab-action {\n background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab .dv-default-tab .dv-default-tab-action {\n visibility: visible;\n}\n.tab.inactive-tab .dv-default-tab .dv-default-tab-action {\n visibility: hidden;\n}\n.tab.inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n visibility: visible;\n}\n.tab .dv-default-tab {\n position: relative;\n height: 100%;\n display: flex;\n min-width: 80px;\n align-items: center;\n padding: 0px 8px;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.tab .dv-default-tab .dv-default-tab-content {\n padding: 0px 8px;\n flex-grow: 1;\n}\n.tab .dv-default-tab .dv-default-tab-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n.tab .dv-default-tab .dv-default-tab-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}\n.tabs-and-actions-container {\n display: flex;\n background-color: var(--dv-tabs-and-actions-container-background-color);\n flex-shrink: 0;\n box-sizing: border-box;\n height: var(--dv-tabs-and-actions-container-height);\n font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.tabs-and-actions-container.hidden {\n display: none;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container {\n flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container .tab {\n flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .void-container {\n flex-grow: 0;\n}\n.tabs-and-actions-container .void-container {\n display: flex;\n flex-grow: 1;\n cursor: grab;\n}\n.tabs-and-actions-container .tabs-container {\n display: flex;\n overflow-x: overlay;\n overflow-y: hidden;\n scrollbar-width: thin;\n /* Track */\n /* Handle */\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar {\n height: 3px;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {\n background: var(--dv-tabs-container-scrollbar-color);\n}\n.tabs-and-actions-container .tabs-container .tab {\n -webkit-user-drag: element;\n outline: none;\n min-width: 75px;\n cursor: pointer;\n position: relative;\n box-sizing: border-box;\n}\n.tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-tab-divider-color);\n width: 1px;\n height: 100%;\n}\n.watermark {\n display: flex;\n width: 100%;\n}\n.watermark.has-actions .watermark-title .actions-container {\n display: none;\n}\n.watermark .watermark-title {\n height: 35px;\n width: 100%;\n display: flex;\n}\n.watermark .watermark-content {\n flex-grow: 1;\n}\n.watermark .actions-container {\n display: flex;\n align-items: center;\n padding: 0px 8px;\n}\n.watermark .actions-container .close-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n cursor: pointer;\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.watermark .actions-container .close-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}";
37
+ var css_248z = ".dv-svg {\n display: inline-block;\n fill: currentcolor;\n line-height: 1;\n stroke: currentcolor;\n stroke-width: 0;\n}\n.dockview-theme-dark {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: white;\n --dv-tabs-and-actions-container-background-color: #f3f3f3;\n --dv-activegroup-visiblepanel-tab-background-color: white;\n --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-inactivegroup-visiblepanel-tab-background-color: white;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-tab-divider-color: white;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n --dv-separator-border: rgba(128, 128, 128, 0.35);\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n --dv-tabs-and-actions-container-background-color: #2d2d30;\n --dv-tabs-and-actions-container-height: 20px;\n --dv-tabs-and-actions-container-font-size: 11px;\n --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: white;\n --dv-inactivegroup-visiblepanel-tab-color: white;\n --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #000c18;\n --dv-tabs-and-actions-container-background-color: #1c1c2a;\n --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n --dv-tab-divider-color: #2b2b4a;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n --dv-separator-border: #2b2b4a;\n --dv-paneview-header-border-color: #2b2b4a;\n --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #282a36;\n --dv-tabs-and-actions-container-background-color: #191a21;\n --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-tab-divider-color: #191a21;\n --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n --dv-separator-border: #bd93f9;\n --dv-paneview-header-border-color: #bd93f9;\n --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n top: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #94527e;\n z-index: 999;\n}\n.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #5e3d5a;\n z-index: 999;\n}\n\n.dockview-theme-replit {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #ebeced;\n --dv-tabs-and-actions-container-background-color: #fcfcfc;\n --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n --dv-activegroup-hiddenpanel-tab-background-color: #fcfcfc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n --dv-tab-divider-color: transparent;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n --dv-separator-border: transparent;\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-separator-handle-background-color: #cfd1d3;\n --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-replit .dv-groupview {\n overflow: hidden;\n border-radius: 10px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container {\n border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab {\n margin: 4px;\n border-radius: 8px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab .dv-svg {\n height: 8px;\n width: 8px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab:hover {\n background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .dv-groupview .dv-content-container {\n background-color: #fcfcfc;\n}\n.dockview-theme-replit .dv-groupview.dv-active-group {\n border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .dv-groupview.dv-inactive-group {\n border: 1px solid transparent;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled)::after {\n content: \"\";\n height: 4px;\n width: 40px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-separator-handle-background-color);\n position: absolute;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled):hover::after {\n background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled)::after {\n content: \"\";\n height: 40px;\n width: 4px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-separator-handle-background-color);\n position: absolute;\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover::after {\n background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dv-drop-target {\n position: relative;\n}\n.dv-drop-target > .dv-drop-target-dropzone {\n position: absolute;\n left: 0px;\n top: 0px;\n height: 100%;\n width: 100%;\n z-index: 1000;\n pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection {\n position: relative;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n background-color: var(--dv-drag-over-background-color);\n transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n will-change: transform;\n pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-dockview {\n position: relative;\n background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n position: absolute;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n position: relative;\n}\n\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {\n background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.dv-tab.dv-tab-dragging {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--dv-group-view-background-color);\n overflow: hidden;\n}\n.dv-groupview:focus {\n outline: none;\n}\n.dv-groupview.dv-empty > .dv-tabs-and-actions-container {\n display: none;\n}\n.dv-groupview > .dv-content-container {\n flex-grow: 1;\n min-height: 0;\n outline: none;\n}\n.dv-root-wrapper {\n height: 100%;\n width: 100%;\n}\n.dv-grid-view,\n.dv-branch-node {\n height: 100%;\n width: 100%;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n background-color: cyan;\n}\n\n.dv-resize-container {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: calc(var(--dv-overlay-z-index) - 2);\n border: 1px solid var(--dv-tab-divider-color);\n box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-resize-container-dragging {\n opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n height: calc(100% - 8px);\n width: 4px;\n left: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n height: calc(100% - 8px);\n width: 4px;\n right: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n height: 4px;\n width: 4px;\n top: -2px;\n left: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n height: 4px;\n width: 4px;\n right: -2px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n height: 4px;\n width: 4px;\n left: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n height: 4px;\n width: 4px;\n right: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: se-resize;\n}\n.dv-render-overlay {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: 1;\n height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n z-index: calc(var(--dv-overlay-z-index) - 1);\n}\n\n.dv-debug .dv-render-overlay {\n outline: 1px solid red;\n outline-offset: -1;\n}\n.dv-pane-container {\n height: 100%;\n width: 100%;\n}\n.dv-pane-container.dv-animated .dv-view {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.dv-pane-container .dv-view {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n padding: 0px !important;\n}\n.dv-pane-container .dv-view:not(:first-child)::before {\n background-color: transparent !important;\n}\n.dv-pane-container .dv-view:not(:first-child) .dv-pane > .dv-pane-header {\n border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.dv-pane-container .dv-view .dv-default-header {\n background-color: var(--dv-group-view-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n display: flex;\n padding: 0px 8px;\n cursor: pointer;\n}\n.dv-pane-container .dv-view .dv-default-header .dv-pane-header-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.dv-pane-container .dv-view .dv-default-header > span {\n padding-left: 8px;\n flex-grow: 1;\n}\n.dv-pane-container:first-of-type > .dv-pane > .dv-pane-header {\n border-top: none !important;\n}\n.dv-pane-container .dv-pane {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n height: 100%;\n}\n.dv-pane-container .dv-pane .dv-pane-header {\n box-sizing: border-box;\n user-select: none;\n position: relative;\n outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-header.dv-pane-draggable {\n cursor: pointer;\n}\n.dv-pane-container .dv-pane .dv-pane-header:focus:before, .dv-pane-container .dv-pane .dv-pane-header:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-pane-container .dv-pane .dv-pane-body {\n overflow-y: auto;\n overflow-x: hidden;\n flex-grow: 1;\n position: relative;\n outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-body:focus:before, .dv-pane-container .dv-pane .dv-pane-body:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-enabled {\n background-color: black;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-disabled {\n background-color: orange;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-maximum {\n background-color: green;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-minimum {\n background-color: red;\n}\n\n.dv-split-view-container {\n position: relative;\n overflow: hidden;\n height: 100%;\n width: 100%;\n}\n.dv-split-view-container.dv-splitview-disabled > .dv-sash-container > .dv-sash {\n pointer-events: none;\n}\n.dv-split-view-container.dv-animation .dv-view,\n.dv-split-view-container.dv-animation .dv-sash {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.dv-split-view-container.dv-horizontal {\n height: 100%;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash {\n height: 100%;\n width: 4px;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ew-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: w-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: e-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 100%;\n width: 1px;\n}\n.dv-split-view-container.dv-vertical {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash {\n width: 100%;\n height: 4px;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ns-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: n-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: s-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 1px;\n width: 100%;\n}\n.dv-split-view-container .dv-sash-container {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.dv-split-view-container .dv-sash-container .dv-sash {\n position: absolute;\n z-index: 99;\n outline: none;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n touch-action: none;\n}\n.dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):active {\n transition: background-color 0.1s ease-in-out;\n background-color: var(--dv-active-sash-color, transparent);\n}\n.dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):hover {\n background-color: var(--dv-active-sash-color, transparent);\n transition: background-color 0.1s ease-in-out;\n transition-delay: 0.5s;\n}\n.dv-split-view-container .dv-view-container {\n position: relative;\n height: 100%;\n width: 100%;\n}\n.dv-split-view-container .dv-view-container .dv-view {\n height: 100%;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n}\n.dv-split-view-container.dv-separator-border .dv-view:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.dv-tab {\n flex-shrink: 0;\n}\n.dv-tab:focus-within, .dv-tab:focus {\n position: relative;\n}\n.dv-tab:focus-within::after, .dv-tab:focus::after {\n position: absolute;\n content: \"\";\n height: 100%;\n width: 100%;\n top: 0px;\n left: 0px;\n pointer-events: none;\n outline: 1px solid var(--dv-tab-divider-color) !important;\n outline-offset: -1px;\n z-index: 5;\n}\n.dv-tab.dv-tab-dragging .dv-default-tab-action {\n background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-tab.dv-active-tab .dv-default-tab .dv-default-tab-action {\n visibility: visible;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {\n visibility: hidden;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n visibility: visible;\n}\n.dv-tab .dv-default-tab {\n position: relative;\n height: 100%;\n display: flex;\n min-width: 80px;\n align-items: center;\n padding: 0px 8px;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.dv-tab .dv-default-tab .dv-default-tab-content {\n padding: 0px 8px;\n flex-grow: 1;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}\n.dv-tabs-and-actions-container {\n display: flex;\n background-color: var(--dv-tabs-and-actions-container-background-color);\n flex-shrink: 0;\n box-sizing: border-box;\n height: var(--dv-tabs-and-actions-container-height);\n font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container {\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container .dv-tab {\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-void-container {\n flex-grow: 0;\n}\n.dv-tabs-and-actions-container .dv-void-container {\n display: flex;\n flex-grow: 1;\n cursor: grab;\n}\n.dv-tabs-and-actions-container .dv-tabs-container {\n display: flex;\n overflow-x: overlay;\n overflow-y: hidden;\n scrollbar-width: thin;\n /* Track */\n /* Handle */\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar {\n height: 3px;\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-thumb {\n background: var(--dv-tabs-container-scrollbar-color);\n}\n.dv-tabs-and-actions-container .dv-tabs-container .dv-tab {\n -webkit-user-drag: element;\n outline: none;\n min-width: 75px;\n cursor: pointer;\n position: relative;\n box-sizing: border-box;\n}\n.dv-tabs-and-actions-container .dv-tabs-container .dv-tab:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-tab-divider-color);\n width: 1px;\n height: 100%;\n}\n.dv-watermark {\n display: flex;\n width: 100%;\n}\n.dv-watermark.dv-has-actions .dv-watermark-title .dv-actions-container {\n display: none;\n}\n.dv-watermark .dv-watermark-title {\n height: 35px;\n width: 100%;\n display: flex;\n}\n.dv-watermark .dv-watermark-content {\n flex-grow: 1;\n}\n.dv-watermark .dv-actions-container {\n display: flex;\n align-items: center;\n padding: 0px 8px;\n}\n.dv-watermark .dv-actions-container .dv-close-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n cursor: pointer;\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-watermark .dv-actions-container .dv-close-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}";
38
38
  styleInject(css_248z);
39
39
 
40
40
  class TransferObject {
@@ -355,31 +355,6 @@ class MutableDisposable {
355
355
  }
356
356
  }
357
357
 
358
- function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
359
- const Component = typeof componentName === 'string'
360
- ? components[componentName]
361
- : undefined;
362
- const FrameworkComponent = typeof componentName === 'string'
363
- ? frameworkComponents[componentName]
364
- : undefined;
365
- if (Component && FrameworkComponent) {
366
- throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
367
- }
368
- if (FrameworkComponent) {
369
- if (!createFrameworkComponent) {
370
- throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
371
- }
372
- return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
373
- }
374
- if (!Component) {
375
- if (fallback) {
376
- return fallback();
377
- }
378
- throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
379
- }
380
- return new Component(id, componentName);
381
- }
382
-
383
358
  function watchElementResize(element, cb) {
384
359
  const observer = new ResizeObserver((entires) => {
385
360
  /**
@@ -848,10 +823,10 @@ class Splitview {
848
823
  const tmp = this.size;
849
824
  this.size = this.orthogonalSize;
850
825
  this.orthogonalSize = tmp;
851
- removeClasses(this.element, 'horizontal', 'vertical');
826
+ removeClasses(this.element, 'dv-horizontal', 'dv-vertical');
852
827
  this.element.classList.add(this.orientation == Orientation.HORIZONTAL
853
- ? 'horizontal'
854
- : 'vertical');
828
+ ? 'dv-horizontal'
829
+ : 'dv-vertical');
855
830
  }
856
831
  get minimumSize() {
857
832
  return this.viewItems.reduce((r, item) => r + item.minimumSize, 0);
@@ -1029,11 +1004,11 @@ class Splitview {
1029
1004
  }
1030
1005
  style(styles) {
1031
1006
  if ((styles === null || styles === void 0 ? void 0 : styles.separatorBorder) === 'transparent') {
1032
- removeClasses(this.element, 'separator-border');
1007
+ removeClasses(this.element, 'dv-separator-border');
1033
1008
  this.element.style.removeProperty('--dv-separator-border');
1034
1009
  }
1035
1010
  else {
1036
- addClasses(this.element, 'separator-border');
1011
+ addClasses(this.element, 'dv-separator-border');
1037
1012
  if (styles === null || styles === void 0 ? void 0 : styles.separatorBorder) {
1038
1013
  this.element.style.setProperty('--dv-separator-border', styles.separatorBorder);
1039
1014
  }
@@ -1103,7 +1078,7 @@ class Splitview {
1103
1078
  }
1104
1079
  addView(view, size = { type: 'distribute' }, index = this.viewItems.length, skipLayout) {
1105
1080
  const container = document.createElement('div');
1106
- container.className = 'view';
1081
+ container.className = 'dv-view';
1107
1082
  container.appendChild(view.element);
1108
1083
  let viewSize;
1109
1084
  if (typeof size === 'number') {
@@ -1135,7 +1110,7 @@ class Splitview {
1135
1110
  if (this.viewItems.length > 1) {
1136
1111
  //add sash
1137
1112
  const sash = document.createElement('div');
1138
- sash.className = 'sash';
1113
+ sash.className = 'dv-sash';
1139
1114
  const onPointerStart = (event) => {
1140
1115
  for (const item of this.viewItems) {
1141
1116
  item.enabled = false;
@@ -1394,7 +1369,8 @@ class Splitview {
1394
1369
  const offset = i === 0 || visiblePanelsBeforeThisView === 0
1395
1370
  ? 0
1396
1371
  : viewLeftOffsets[i - 1] +
1397
- (visiblePanelsBeforeThisView / sashCount) * marginReducedSize;
1372
+ (visiblePanelsBeforeThisView / sashCount) *
1373
+ marginReducedSize;
1398
1374
  if (i < this.viewItems.length - 1) {
1399
1375
  // calculate sash position
1400
1376
  const newSize = view.visible
@@ -1505,27 +1481,27 @@ class Splitview {
1505
1481
  }
1506
1482
  }
1507
1483
  updateSash(sash, state) {
1508
- toggleClass(sash.container, 'disabled', state === SashState.DISABLED);
1509
- toggleClass(sash.container, 'enabled', state === SashState.ENABLED);
1510
- toggleClass(sash.container, 'maximum', state === SashState.MAXIMUM);
1511
- toggleClass(sash.container, 'minimum', state === SashState.MINIMUM);
1484
+ toggleClass(sash.container, 'dv-disabled', state === SashState.DISABLED);
1485
+ toggleClass(sash.container, 'dv-enabled', state === SashState.ENABLED);
1486
+ toggleClass(sash.container, 'dv-maximum', state === SashState.MAXIMUM);
1487
+ toggleClass(sash.container, 'dv-minimum', state === SashState.MINIMUM);
1512
1488
  }
1513
1489
  createViewContainer() {
1514
1490
  const element = document.createElement('div');
1515
- element.className = 'view-container';
1491
+ element.className = 'dv-view-container';
1516
1492
  return element;
1517
1493
  }
1518
1494
  createSashContainer() {
1519
1495
  const element = document.createElement('div');
1520
- element.className = 'sash-container';
1496
+ element.className = 'dv-sash-container';
1521
1497
  return element;
1522
1498
  }
1523
1499
  createContainer() {
1524
1500
  const element = document.createElement('div');
1525
1501
  const orientationClassname = this._orientation === Orientation.HORIZONTAL
1526
- ? 'horizontal'
1527
- : 'vertical';
1528
- element.className = `split-view-container ${orientationClassname}`;
1502
+ ? 'dv-horizontal'
1503
+ : 'dv-vertical';
1504
+ element.className = `dv-split-view-container ${orientationClassname}`;
1529
1505
  return element;
1530
1506
  }
1531
1507
  dispose() {
@@ -1576,7 +1552,7 @@ class Paneview extends CompositeDisposable {
1576
1552
  this.onDidChange = this._onDidChange.event;
1577
1553
  this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : Orientation.VERTICAL;
1578
1554
  this.element = document.createElement('div');
1579
- this.element.className = 'pane-container';
1555
+ this.element.className = 'dv-pane-container';
1580
1556
  container.appendChild(this.element);
1581
1557
  this.splitview = new Splitview(this.element, {
1582
1558
  orientation: this._orientation,
@@ -1668,10 +1644,10 @@ class Paneview extends CompositeDisposable {
1668
1644
  clearTimeout(this.animationTimer);
1669
1645
  this.animationTimer = undefined;
1670
1646
  }
1671
- addClasses(this.element, 'animated');
1647
+ addClasses(this.element, 'dv-animated');
1672
1648
  this.animationTimer = setTimeout(() => {
1673
1649
  this.animationTimer = undefined;
1674
- removeClasses(this.element, 'animated');
1650
+ removeClasses(this.element, 'dv-animated');
1675
1651
  }, 200);
1676
1652
  }
1677
1653
  dispose() {
@@ -1896,7 +1872,7 @@ class BranchNode extends CompositeDisposable {
1896
1872
  this._orthogonalSize = orthogonalSize;
1897
1873
  this._size = size;
1898
1874
  this.element = document.createElement('div');
1899
- this.element.className = 'branch-node';
1875
+ this.element.className = 'dv-branch-node';
1900
1876
  if (!childDescriptors) {
1901
1877
  this.splitview = new Splitview(this.element, {
1902
1878
  orientation: this.orientation,
@@ -2107,7 +2083,7 @@ function getGridLocation(element) {
2107
2083
  if (!parentElement) {
2108
2084
  throw new Error('Invalid grid element');
2109
2085
  }
2110
- if (/\bgrid-view\b/.test(parentElement.className)) {
2086
+ if (/\bdv-grid-view\b/.test(parentElement.className)) {
2111
2087
  return [];
2112
2088
  }
2113
2089
  const index = indexInParent(parentElement);
@@ -2455,7 +2431,7 @@ class Gridview {
2455
2431
  this._onDidMaximizedNodeChange = new Emitter();
2456
2432
  this.onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event;
2457
2433
  this.element = document.createElement('div');
2458
- this.element.className = 'grid-view';
2434
+ this.element.className = 'dv-grid-view';
2459
2435
  this._locked = locked !== null && locked !== void 0 ? locked : false;
2460
2436
  this._margin = margin !== null && margin !== void 0 ? margin : 0;
2461
2437
  this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this.locked, this.margin);
@@ -3677,7 +3653,7 @@ class DragHandler extends CompositeDisposable {
3677
3653
  * dnd logic. You can see the code at
3678
3654
  * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
3679
3655
  */
3680
- event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
3656
+ event.dataTransfer.setData('text/plain', '');
3681
3657
  }
3682
3658
  }
3683
3659
  }), addDisposableListener(this.el, 'dragend', () => {
@@ -3851,12 +3827,12 @@ class Droptarget extends CompositeDisposable {
3851
3827
  this.markAsUsed(e);
3852
3828
  if (!this.targetElement) {
3853
3829
  this.targetElement = document.createElement('div');
3854
- this.targetElement.className = 'drop-target-dropzone';
3830
+ this.targetElement.className = 'dv-drop-target-dropzone';
3855
3831
  this.overlayElement = document.createElement('div');
3856
- this.overlayElement.className = 'drop-target-selection';
3832
+ this.overlayElement.className = 'dv-drop-target-selection';
3857
3833
  this._state = 'center';
3858
3834
  this.targetElement.appendChild(this.overlayElement);
3859
- this.element.classList.add('drop-target');
3835
+ this.element.classList.add('dv-drop-target');
3860
3836
  this.element.append(this.targetElement);
3861
3837
  }
3862
3838
  this.toggleClasses(quadrant, width, height);
@@ -3994,7 +3970,7 @@ class Droptarget extends CompositeDisposable {
3994
3970
  this.element.removeChild(this.targetElement);
3995
3971
  this.targetElement = undefined;
3996
3972
  this.overlayElement = undefined;
3997
- this.element.classList.remove('drop-target');
3973
+ this.element.classList.remove('dv-drop-target');
3998
3974
  }
3999
3975
  }
4000
3976
  }
@@ -4331,7 +4307,7 @@ class PaneviewPanel extends BasePanelView {
4331
4307
  this._headerVisible = isHeaderVisible;
4332
4308
  this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
4333
4309
  this._orientation = orientation;
4334
- this.element.classList.add('pane');
4310
+ this.element.classList.add('dv-pane');
4335
4311
  this.addDisposables(this.api.onWillVisibilityChange((event) => {
4336
4312
  const { isVisible } = event;
4337
4313
  const { accessor } = this._params;
@@ -4428,14 +4404,14 @@ class PaneviewPanel extends BasePanelView {
4428
4404
  renderOnce() {
4429
4405
  this.header = document.createElement('div');
4430
4406
  this.header.tabIndex = 0;
4431
- this.header.className = 'pane-header';
4407
+ this.header.className = 'dv-pane-header';
4432
4408
  this.header.style.height = `${this.headerSize}px`;
4433
4409
  this.header.style.lineHeight = `${this.headerSize}px`;
4434
4410
  this.header.style.minHeight = `${this.headerSize}px`;
4435
4411
  this.header.style.maxHeight = `${this.headerSize}px`;
4436
4412
  this.element.appendChild(this.header);
4437
4413
  this.body = document.createElement('div');
4438
- this.body.className = 'pane-body';
4414
+ this.body.className = 'dv-pane-body';
4439
4415
  this.element.appendChild(this.body);
4440
4416
  }
4441
4417
  // TODO slightly hacky by-pass of the component to create a body and header component
@@ -4556,7 +4532,7 @@ class ContentContainer extends CompositeDisposable {
4556
4532
  this._onDidBlur = new Emitter();
4557
4533
  this.onDidBlur = this._onDidBlur.event;
4558
4534
  this._element = document.createElement('div');
4559
- this._element.className = 'content-container';
4535
+ this._element.className = 'dv-content-container';
4560
4536
  this._element.tabIndex = -1;
4561
4537
  this.addDisposables(this._onDidFocus, this._onDidBlur);
4562
4538
  this.dropTarget = new Droptarget(this.element, {
@@ -4629,6 +4605,8 @@ class ContentContainer extends CompositeDisposable {
4629
4605
  referenceContainer: this,
4630
4606
  });
4631
4607
  break;
4608
+ default:
4609
+ throw new Error(`dockview: invalid renderer type '${panel.api.renderer}'`);
4632
4610
  }
4633
4611
  if (doRender) {
4634
4612
  const focusTracker = trackFocus(container);
@@ -4695,10 +4673,10 @@ class Tab extends CompositeDisposable {
4695
4673
  this._onDragStart = new Emitter();
4696
4674
  this.onDragStart = this._onDragStart.event;
4697
4675
  this._element = document.createElement('div');
4698
- this._element.className = 'tab';
4676
+ this._element.className = 'dv-tab';
4699
4677
  this._element.tabIndex = 0;
4700
4678
  this._element.draggable = true;
4701
- toggleClass(this.element, 'inactive-tab', true);
4679
+ toggleClass(this.element, 'dv-inactive-tab', true);
4702
4680
  const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
4703
4681
  this.dropTarget = new Droptarget(this._element, {
4704
4682
  acceptedTargetZones: ['center'],
@@ -4731,8 +4709,8 @@ class Tab extends CompositeDisposable {
4731
4709
  }), this.dropTarget);
4732
4710
  }
4733
4711
  setActive(isActive) {
4734
- toggleClass(this.element, 'active-tab', isActive);
4735
- toggleClass(this.element, 'inactive-tab', !isActive);
4712
+ toggleClass(this.element, 'dv-active-tab', isActive);
4713
+ toggleClass(this.element, 'dv-inactive-tab', !isActive);
4736
4714
  }
4737
4715
  setContent(part) {
4738
4716
  if (this.content) {
@@ -4820,7 +4798,7 @@ class VoidContainer extends CompositeDisposable {
4820
4798
  this._onDragStart = new Emitter();
4821
4799
  this.onDragStart = this._onDragStart.event;
4822
4800
  this._element = document.createElement('div');
4823
- this._element.className = 'void-container';
4801
+ this._element.className = 'dv-void-container';
4824
4802
  this._element.tabIndex = 0;
4825
4803
  this._element.draggable = true;
4826
4804
  this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
@@ -4940,16 +4918,16 @@ class TabsContainer extends CompositeDisposable {
4940
4918
  this._onWillShowOverlay = new Emitter();
4941
4919
  this.onWillShowOverlay = this._onWillShowOverlay.event;
4942
4920
  this._element = document.createElement('div');
4943
- this._element.className = 'tabs-and-actions-container';
4921
+ this._element.className = 'dv-tabs-and-actions-container';
4944
4922
  toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
4945
4923
  this.rightActionsContainer = document.createElement('div');
4946
- this.rightActionsContainer.className = 'right-actions-container';
4924
+ this.rightActionsContainer.className = 'dv-right-actions-container';
4947
4925
  this.leftActionsContainer = document.createElement('div');
4948
- this.leftActionsContainer.className = 'left-actions-container';
4926
+ this.leftActionsContainer.className = 'dv-left-actions-container';
4949
4927
  this.preActionsContainer = document.createElement('div');
4950
- this.preActionsContainer.className = 'pre-actions-container';
4928
+ this.preActionsContainer.className = 'dv-pre-actions-container';
4951
4929
  this.tabContainer = document.createElement('div');
4952
- this.tabContainer.className = 'tabs-container';
4930
+ this.tabContainer.className = 'dv-tabs-container';
4953
4931
  this.voidContainer = new VoidContainer(this.accessor, this.group);
4954
4932
  this._element.appendChild(this.preActionsContainer);
4955
4933
  this._element.appendChild(this.tabContainer);
@@ -5038,14 +5016,10 @@ class TabsContainer extends CompositeDisposable {
5038
5016
  });
5039
5017
  }
5040
5018
  openPanel(panel, index = this.tabs.length) {
5041
- var _a;
5042
5019
  if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
5043
5020
  return;
5044
5021
  }
5045
5022
  const tab = new Tab(panel, this.accessor, this.group);
5046
- if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
5047
- throw new Error('invalid header component');
5048
- }
5049
5023
  tab.setContent(panel.view.tab);
5050
5024
  const disposable = new CompositeDisposable(tab.onDragStart((event) => {
5051
5025
  this._onTabDragStart.fire({ nativeEvent: event, panel });
@@ -5235,7 +5209,7 @@ class WillShowOverlayLocationEvent {
5235
5209
  }
5236
5210
  class DockviewGroupPanelModel extends CompositeDisposable {
5237
5211
  get element() {
5238
- throw new Error('not supported');
5212
+ throw new Error('dockview: not supported');
5239
5213
  }
5240
5214
  get activePanel() {
5241
5215
  return this._activePanel;
@@ -5245,7 +5219,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
5245
5219
  }
5246
5220
  set locked(value) {
5247
5221
  this._locked = value;
5248
- toggleClass(this.container, 'locked-groupview', value === 'no-drop-target' || value);
5222
+ toggleClass(this.container, 'dv-locked-groupview', value === 'no-drop-target' || value);
5249
5223
  }
5250
5224
  get isActive() {
5251
5225
  return this._isGroupActive;
@@ -5316,6 +5290,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
5316
5290
  this._locked = false;
5317
5291
  this._location = { type: 'grid' };
5318
5292
  this.mostRecentlyUsed = [];
5293
+ this._overwriteRenderContainer = null;
5319
5294
  this._onDidChange = new Emitter();
5320
5295
  this.onDidChange = this._onDidChange.event;
5321
5296
  this._width = 0;
@@ -5346,8 +5321,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
5346
5321
  this.onDidActivePanelChange = this._onDidActivePanelChange.event;
5347
5322
  this._onUnhandledDragOverEvent = new Emitter();
5348
5323
  this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
5349
- this._overwriteRenderContainer = null;
5350
- toggleClass(this.container, 'groupview', true);
5324
+ toggleClass(this.container, 'dv-groupview', true);
5351
5325
  this._api = new DockviewApi(this.accessor);
5352
5326
  this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
5353
5327
  this.contentContainer = new ContentContainer(this.accessor, this);
@@ -5592,8 +5566,8 @@ class DockviewGroupPanelModel extends CompositeDisposable {
5592
5566
  return;
5593
5567
  }
5594
5568
  this._isGroupActive = isGroupActive;
5595
- toggleClass(this.container, 'active-group', isGroupActive);
5596
- toggleClass(this.container, 'inactive-group', !isGroupActive);
5569
+ toggleClass(this.container, 'dv-active-group', isGroupActive);
5570
+ toggleClass(this.container, 'dv-inactive-group', !isGroupActive);
5597
5571
  this.tabsContainer.setActive(this.isActive);
5598
5572
  if (!this._activePanel && this.panels.length > 0) {
5599
5573
  this.doSetActivePanel(this.panels[0]);
@@ -5685,7 +5659,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
5685
5659
  }
5686
5660
  updateContainer() {
5687
5661
  var _a, _b;
5688
- toggleClass(this.container, 'empty', this.isEmpty);
5662
+ toggleClass(this.container, 'dv-empty', this.isEmpty);
5689
5663
  this.panels.forEach((panel) => panel.runEvents());
5690
5664
  if (this.isEmpty && !this.watermark) {
5691
5665
  const watermark = this.accessor.createWatermarkComponent();
@@ -5826,6 +5800,34 @@ class GridviewPanel extends BasePanelView {
5826
5800
  return this._snap;
5827
5801
  }
5828
5802
  get minimumWidth() {
5803
+ /**
5804
+ * defer to protected function to allow subclasses to override easily.
5805
+ * see https://github.com/microsoft/TypeScript/issues/338
5806
+ */
5807
+ return this.__minimumWidth();
5808
+ }
5809
+ get minimumHeight() {
5810
+ /**
5811
+ * defer to protected function to allow subclasses to override easily.
5812
+ * see https://github.com/microsoft/TypeScript/issues/338
5813
+ */
5814
+ return this.__minimumHeight();
5815
+ }
5816
+ get maximumHeight() {
5817
+ /**
5818
+ * defer to protected function to allow subclasses to override easily.
5819
+ * see https://github.com/microsoft/TypeScript/issues/338
5820
+ */
5821
+ return this.__maximumHeight();
5822
+ }
5823
+ get maximumWidth() {
5824
+ /**
5825
+ * defer to protected function to allow subclasses to override easily.
5826
+ * see https://github.com/microsoft/TypeScript/issues/338
5827
+ */
5828
+ return this.__maximumWidth();
5829
+ }
5830
+ __minimumWidth() {
5829
5831
  const width = typeof this._minimumWidth === 'function'
5830
5832
  ? this._minimumWidth()
5831
5833
  : this._minimumWidth;
@@ -5835,7 +5837,17 @@ class GridviewPanel extends BasePanelView {
5835
5837
  }
5836
5838
  return width;
5837
5839
  }
5838
- get minimumHeight() {
5840
+ __maximumWidth() {
5841
+ const width = typeof this._maximumWidth === 'function'
5842
+ ? this._maximumWidth()
5843
+ : this._maximumWidth;
5844
+ if (width !== this._evaluatedMaximumWidth) {
5845
+ this._evaluatedMaximumWidth = width;
5846
+ this.updateConstraints();
5847
+ }
5848
+ return width;
5849
+ }
5850
+ __minimumHeight() {
5839
5851
  const height = typeof this._minimumHeight === 'function'
5840
5852
  ? this._minimumHeight()
5841
5853
  : this._minimumHeight;
@@ -5845,7 +5857,7 @@ class GridviewPanel extends BasePanelView {
5845
5857
  }
5846
5858
  return height;
5847
5859
  }
5848
- get maximumHeight() {
5860
+ __maximumHeight() {
5849
5861
  const height = typeof this._maximumHeight === 'function'
5850
5862
  ? this._maximumHeight()
5851
5863
  : this._maximumHeight;
@@ -5855,16 +5867,6 @@ class GridviewPanel extends BasePanelView {
5855
5867
  }
5856
5868
  return height;
5857
5869
  }
5858
- get maximumWidth() {
5859
- const width = typeof this._maximumWidth === 'function'
5860
- ? this._maximumWidth()
5861
- : this._maximumWidth;
5862
- if (width !== this._evaluatedMaximumWidth) {
5863
- this._evaluatedMaximumWidth = width;
5864
- this.updateConstraints();
5865
- }
5866
- return width;
5867
- }
5868
5870
  get isActive() {
5869
5871
  return this.api.isActive;
5870
5872
  }
@@ -6015,6 +6017,7 @@ class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
6015
6017
  position: options.group
6016
6018
  ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center'
6017
6019
  : 'center',
6020
+ index: options.index,
6018
6021
  },
6019
6022
  });
6020
6023
  }
@@ -6066,30 +6069,34 @@ class DockviewGroupPanel extends GridviewPanel {
6066
6069
  get minimumWidth() {
6067
6070
  var _a;
6068
6071
  const activePanelMinimumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumWidth;
6069
- return typeof activePanelMinimumWidth === 'number'
6070
- ? activePanelMinimumWidth
6071
- : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH;
6072
+ if (typeof activePanelMinimumWidth === 'number') {
6073
+ return activePanelMinimumWidth;
6074
+ }
6075
+ return super.__minimumWidth();
6072
6076
  }
6073
6077
  get minimumHeight() {
6074
6078
  var _a;
6075
6079
  const activePanelMinimumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumHeight;
6076
- return typeof activePanelMinimumHeight === 'number'
6077
- ? activePanelMinimumHeight
6078
- : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT;
6080
+ if (typeof activePanelMinimumHeight === 'number') {
6081
+ return activePanelMinimumHeight;
6082
+ }
6083
+ return super.__minimumHeight();
6079
6084
  }
6080
6085
  get maximumWidth() {
6081
6086
  var _a;
6082
6087
  const activePanelMaximumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumWidth;
6083
- return typeof activePanelMaximumWidth === 'number'
6084
- ? activePanelMaximumWidth
6085
- : Number.MAX_SAFE_INTEGER;
6088
+ if (typeof activePanelMaximumWidth === 'number') {
6089
+ return activePanelMaximumWidth;
6090
+ }
6091
+ return super.__maximumWidth();
6086
6092
  }
6087
6093
  get maximumHeight() {
6088
6094
  var _a;
6089
6095
  const activePanelMaximumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumHeight;
6090
- return typeof activePanelMaximumHeight === 'number'
6091
- ? activePanelMaximumHeight
6092
- : Number.MAX_SAFE_INTEGER;
6096
+ if (typeof activePanelMaximumHeight === 'number') {
6097
+ return activePanelMaximumHeight;
6098
+ }
6099
+ return super.__maximumHeight();
6093
6100
  }
6094
6101
  get panels() {
6095
6102
  return this._model.panels;
@@ -6203,12 +6210,14 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
6203
6210
  return this.group.api.getWindow();
6204
6211
  }
6205
6212
  moveTo(options) {
6206
- var _a;
6213
+ var _a, _b;
6207
6214
  this.accessor.moveGroupOrPanel({
6208
6215
  from: { groupId: this._group.id, panelId: this.panel.id },
6209
6216
  to: {
6210
- group: options.group,
6211
- position: (_a = options.position) !== null && _a !== void 0 ? _a : 'center',
6217
+ group: (_a = options.group) !== null && _a !== void 0 ? _a : this._group,
6218
+ position: options.group
6219
+ ? (_b = options.position) !== null && _b !== void 0 ? _b : 'center'
6220
+ : 'center',
6212
6221
  index: options.index,
6213
6222
  },
6214
6223
  });
@@ -6427,7 +6436,7 @@ const createSvgElementFromPath = (params) => {
6427
6436
  svg.setAttributeNS(null, 'viewBox', params.viewbox);
6428
6437
  svg.setAttributeNS(null, 'aria-hidden', 'false');
6429
6438
  svg.setAttributeNS(null, 'focusable', 'false');
6430
- svg.classList.add('dockview-svg');
6439
+ svg.classList.add('dv-svg');
6431
6440
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
6432
6441
  path.setAttributeNS(null, 'd', params.path);
6433
6442
  svg.appendChild(path);
@@ -6598,19 +6607,19 @@ class Watermark extends CompositeDisposable {
6598
6607
  constructor() {
6599
6608
  super();
6600
6609
  this._element = document.createElement('div');
6601
- this._element.className = 'watermark';
6610
+ this._element.className = 'dv-watermark';
6602
6611
  const title = document.createElement('div');
6603
- title.className = 'watermark-title';
6612
+ title.className = 'dv-watermark-title';
6604
6613
  const emptySpace = document.createElement('span');
6605
6614
  emptySpace.style.flexGrow = '1';
6606
6615
  const content = document.createElement('div');
6607
- content.className = 'watermark-content';
6616
+ content.className = 'dv-watermark-content';
6608
6617
  this._element.appendChild(title);
6609
6618
  this._element.appendChild(content);
6610
6619
  const actionsContainer = document.createElement('div');
6611
- actionsContainer.className = 'actions-container';
6620
+ actionsContainer.className = 'dv-actions-container';
6612
6621
  const closeAnchor = document.createElement('div');
6613
- closeAnchor.className = 'close-action';
6622
+ closeAnchor.className = 'dv-close-action';
6614
6623
  closeAnchor.appendChild(createCloseButton());
6615
6624
  actionsContainer.appendChild(closeAnchor);
6616
6625
  title.appendChild(emptySpace);
@@ -6630,7 +6639,7 @@ class Watermark extends CompositeDisposable {
6630
6639
  }
6631
6640
  render() {
6632
6641
  const isOneGroup = !!(this._api && this._api.size <= 1);
6633
- toggleClass(this.element, 'has-actions', isOneGroup);
6642
+ toggleClass(this.element, 'dv-has-actions', isOneGroup);
6634
6643
  }
6635
6644
  }
6636
6645
 
@@ -7241,7 +7250,6 @@ class PopoutWindow extends CompositeDisposable {
7241
7250
  window: this._window.value,
7242
7251
  });
7243
7252
  this._window.disposable.dispose();
7244
- this._window.value.close();
7245
7253
  this._window = null;
7246
7254
  this._onDidClose.fire();
7247
7255
  }
@@ -7273,7 +7281,9 @@ class PopoutWindow extends CompositeDisposable {
7273
7281
  }
7274
7282
  const disposable = new CompositeDisposable();
7275
7283
  this._window = { value: externalWindow, disposable };
7276
- disposable.addDisposables(addDisposableWindowListener(window, 'beforeunload', () => {
7284
+ disposable.addDisposables(Disposable.from(() => {
7285
+ externalWindow.close();
7286
+ }), addDisposableWindowListener(window, 'beforeunload', () => {
7277
7287
  /**
7278
7288
  * before the main window closes we should close this popup too
7279
7289
  * to be good citizens
@@ -7290,7 +7300,7 @@ class PopoutWindow extends CompositeDisposable {
7290
7300
  id: this.target,
7291
7301
  window: externalWindow,
7292
7302
  });
7293
- return new Promise((resolve) => {
7303
+ return new Promise((resolve, reject) => {
7294
7304
  externalWindow.addEventListener('unload', (e) => {
7295
7305
  // if page fails to load before unloading
7296
7306
  // this.close();
@@ -7299,21 +7309,27 @@ class PopoutWindow extends CompositeDisposable {
7299
7309
  /**
7300
7310
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
7301
7311
  */
7302
- const externalDocument = externalWindow.document;
7303
- externalDocument.title = document.title;
7304
- externalDocument.body.appendChild(container);
7305
- addStyles(externalDocument, window.document.styleSheets);
7306
- /**
7307
- * beforeunload must be registered after load for reasons I could not determine
7308
- * otherwise the beforeunload event will not fire when the window is closed
7309
- */
7310
- addDisposableWindowListener(externalWindow, 'beforeunload', () => {
7312
+ try {
7313
+ const externalDocument = externalWindow.document;
7314
+ externalDocument.title = document.title;
7315
+ externalDocument.body.appendChild(container);
7316
+ addStyles(externalDocument, window.document.styleSheets);
7311
7317
  /**
7312
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
7318
+ * beforeunload must be registered after load for reasons I could not determine
7319
+ * otherwise the beforeunload event will not fire when the window is closed
7313
7320
  */
7314
- this.close();
7315
- });
7316
- resolve(container);
7321
+ addDisposableWindowListener(externalWindow, 'beforeunload', () => {
7322
+ /**
7323
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
7324
+ */
7325
+ this.close();
7326
+ });
7327
+ resolve(container);
7328
+ }
7329
+ catch (err) {
7330
+ // only except this is the DOM isn't setup. e.g. in a in correctly configured test
7331
+ reject(err);
7332
+ }
7317
7333
  });
7318
7334
  });
7319
7335
  });
@@ -7566,9 +7582,6 @@ class DockviewComponent extends BaseGrid {
7566
7582
  }
7567
7583
  const box = getBox();
7568
7584
  const groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId();
7569
- if (itemToPopout.api.location.type === 'grid') {
7570
- itemToPopout.api.setVisible(false);
7571
- }
7572
7585
  const _window = new PopoutWindow(`${this.id}-${groupId}`, // unique id
7573
7586
  theme !== null && theme !== void 0 ? theme : '', {
7574
7587
  url: (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : '/popout.html',
@@ -7587,11 +7600,11 @@ class DockviewComponent extends BaseGrid {
7587
7600
  .then((popoutContainer) => {
7588
7601
  var _a;
7589
7602
  if (_window.isDisposed) {
7590
- return;
7603
+ return false;
7591
7604
  }
7592
7605
  if (popoutContainer === null) {
7593
7606
  popoutWindowDisposable.dispose();
7594
- return;
7607
+ return false;
7595
7608
  }
7596
7609
  const gready = document.createElement('div');
7597
7610
  gready.className = 'dv-overlay-render-container';
@@ -7600,30 +7613,40 @@ class DockviewComponent extends BaseGrid {
7600
7613
  ? itemToPopout.group
7601
7614
  : itemToPopout;
7602
7615
  const referenceLocation = itemToPopout.api.location.type;
7603
- const group = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) !== null && _a !== void 0 ? _a : this.createGroup({ id: groupId });
7616
+ /**
7617
+ * The group that is being added doesn't already exist within the DOM, the most likely occurance
7618
+ * of this case is when being called from the `fromJSON(...)` method
7619
+ */
7620
+ const isGroupAddedToDom = referenceGroup.element.parentElement !== null;
7621
+ const group = !isGroupAddedToDom
7622
+ ? referenceGroup
7623
+ : (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) !== null && _a !== void 0 ? _a : this.createGroup({ id: groupId });
7604
7624
  group.model.renderContainer = overlayRenderContainer;
7605
- if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup)) {
7625
+ group.layout(_window.window.innerWidth, _window.window.innerHeight);
7626
+ if (!this._groups.has(group.api.id)) {
7606
7627
  this._onDidAddGroup.fire(group);
7607
7628
  }
7608
- if (itemToPopout instanceof DockviewPanel) {
7609
- this.movingLock(() => {
7610
- const panel = referenceGroup.model.removePanel(itemToPopout);
7611
- group.model.openPanel(panel);
7612
- });
7613
- }
7614
- else {
7615
- this.movingLock(() => moveGroupWithoutDestroying({
7616
- from: referenceGroup,
7617
- to: group,
7618
- }));
7619
- switch (referenceLocation) {
7620
- case 'grid':
7621
- referenceGroup.api.setVisible(false);
7622
- break;
7623
- case 'floating':
7624
- case 'popout':
7625
- this.removeGroup(referenceGroup);
7626
- break;
7629
+ if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup) && isGroupAddedToDom) {
7630
+ if (itemToPopout instanceof DockviewPanel) {
7631
+ this.movingLock(() => {
7632
+ const panel = referenceGroup.model.removePanel(itemToPopout);
7633
+ group.model.openPanel(panel);
7634
+ });
7635
+ }
7636
+ else {
7637
+ this.movingLock(() => moveGroupWithoutDestroying({
7638
+ from: referenceGroup,
7639
+ to: group,
7640
+ }));
7641
+ switch (referenceLocation) {
7642
+ case 'grid':
7643
+ referenceGroup.api.setVisible(false);
7644
+ break;
7645
+ case 'floating':
7646
+ case 'popout':
7647
+ this.removeGroup(referenceGroup);
7648
+ break;
7649
+ }
7627
7650
  }
7628
7651
  }
7629
7652
  popoutContainer.classList.add('dv-dockview');
@@ -7634,6 +7657,10 @@ class DockviewComponent extends BaseGrid {
7634
7657
  type: 'popout',
7635
7658
  getWindow: () => _window.window,
7636
7659
  };
7660
+ if (isGroupAddedToDom &&
7661
+ itemToPopout.api.location.type === 'grid') {
7662
+ itemToPopout.api.setVisible(false);
7663
+ }
7637
7664
  this.doSetGroupAndPanelActive(group);
7638
7665
  popoutWindowDisposable.addDisposables(group.api.onDidActiveChange((event) => {
7639
7666
  var _a;
@@ -7648,9 +7675,13 @@ class DockviewComponent extends BaseGrid {
7648
7675
  const value = {
7649
7676
  window: _window,
7650
7677
  popoutGroup: group,
7651
- referenceGroup: this.getPanel(referenceGroup.id)
7652
- ? referenceGroup.id
7653
- : undefined,
7678
+ referenceGroup: !isGroupAddedToDom
7679
+ ? undefined
7680
+ : referenceGroup
7681
+ ? this.getPanel(referenceGroup.id)
7682
+ ? referenceGroup.id
7683
+ : undefined
7684
+ : undefined,
7654
7685
  disposable: {
7655
7686
  dispose: () => {
7656
7687
  popoutWindowDisposable.dispose();
@@ -7665,9 +7696,10 @@ class DockviewComponent extends BaseGrid {
7665
7696
  * window dimensions
7666
7697
  */
7667
7698
  addDisposableWindowListener(_window.window, 'resize', () => {
7668
- group.layout(window.innerWidth, window.innerHeight);
7699
+ group.layout(_window.window.innerWidth, _window.window.innerHeight);
7669
7700
  }), overlayRenderContainer, Disposable.from(() => {
7670
- if (this.getPanel(referenceGroup.id)) {
7701
+ if (isGroupAddedToDom &&
7702
+ this.getPanel(referenceGroup.id)) {
7671
7703
  this.movingLock(() => moveGroupWithoutDestroying({
7672
7704
  from: group,
7673
7705
  to: referenceGroup,
@@ -7682,21 +7714,27 @@ class DockviewComponent extends BaseGrid {
7682
7714
  }
7683
7715
  }
7684
7716
  else if (this.getPanel(group.id)) {
7685
- const removedGroup = this.doRemoveGroup(group, {
7717
+ this.doRemoveGroup(group, {
7686
7718
  skipDispose: true,
7687
7719
  skipActive: true,
7720
+ skipPopoutReturn: true,
7688
7721
  });
7722
+ const removedGroup = group;
7689
7723
  removedGroup.model.renderContainer =
7690
7724
  this.overlayRenderContainer;
7691
7725
  removedGroup.model.location = { type: 'grid' };
7692
7726
  returnedGroup = removedGroup;
7727
+ this.doAddGroup(removedGroup, [0]);
7728
+ this.doSetGroupAndPanelActive(removedGroup);
7693
7729
  }
7694
7730
  }));
7695
7731
  this._popoutGroups.push(value);
7696
7732
  this.updateWatermark();
7733
+ return true;
7697
7734
  })
7698
7735
  .catch((err) => {
7699
7736
  console.error('dockview: failed to create popout window', err);
7737
+ return false;
7700
7738
  });
7701
7739
  }
7702
7740
  addFloatingGroup(item, options) {
@@ -7800,7 +7838,7 @@ class DockviewComponent extends BaseGrid {
7800
7838
  : (_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
7801
7839
  ? undefined
7802
7840
  : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
7803
- const el = group.element.querySelector('.void-container');
7841
+ const el = group.element.querySelector('.dv-void-container');
7804
7842
  if (!el) {
7805
7843
  throw new Error('failed to find drag handle');
7806
7844
  }
@@ -8083,7 +8121,6 @@ class DockviewComponent extends BaseGrid {
8083
8121
  this.addPopoutGroup((_c = (gridReferenceGroup
8084
8122
  ? this.getPanel(gridReferenceGroup)
8085
8123
  : undefined)) !== null && _c !== void 0 ? _c : group, {
8086
- skipRemoveGroup: true,
8087
8124
  position: position !== null && position !== void 0 ? position : undefined,
8088
8125
  overridePopoutGroup: gridReferenceGroup
8089
8126
  ? group
@@ -8101,6 +8138,7 @@ class DockviewComponent extends BaseGrid {
8101
8138
  }
8102
8139
  }
8103
8140
  catch (err) {
8141
+ console.error('dockview: failed to deserialize layout. Reverting changes', err);
8104
8142
  /**
8105
8143
  * Takes all the successfully created groups and remove all of their panels.
8106
8144
  */
@@ -8168,11 +8206,13 @@ class DockviewComponent extends BaseGrid {
8168
8206
  width: options.initialWidth,
8169
8207
  height: options.initialHeight,
8170
8208
  };
8209
+ let index;
8171
8210
  if (options.position) {
8172
8211
  if (isPanelOptionsWithPanel(options.position)) {
8173
8212
  const referencePanel = typeof options.position.referencePanel === 'string'
8174
8213
  ? this.getGroupPanel(options.position.referencePanel)
8175
8214
  : options.position.referencePanel;
8215
+ index = options.position.index;
8176
8216
  if (!referencePanel) {
8177
8217
  throw new Error(`referencePanel '${options.position.referencePanel}' does not exist`);
8178
8218
  }
@@ -8183,6 +8223,7 @@ class DockviewComponent extends BaseGrid {
8183
8223
  typeof options.position.referenceGroup === 'string'
8184
8224
  ? (_a = this._groups.get(options.position.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
8185
8225
  : options.position.referenceGroup;
8226
+ index = options.position.index;
8186
8227
  if (!referenceGroup) {
8187
8228
  throw new Error(`referenceGroup '${options.position.referenceGroup}' does not exist`);
8188
8229
  }
@@ -8193,6 +8234,7 @@ class DockviewComponent extends BaseGrid {
8193
8234
  group.model.openPanel(panel, {
8194
8235
  skipSetActive: options.inactive,
8195
8236
  skipSetGroupActive: options.inactive,
8237
+ index,
8196
8238
  });
8197
8239
  if (!options.inactive) {
8198
8240
  this.doSetGroupAndPanelActive(group);
@@ -8222,6 +8264,7 @@ class DockviewComponent extends BaseGrid {
8222
8264
  group.model.openPanel(panel, {
8223
8265
  skipSetActive: options.inactive,
8224
8266
  skipSetGroupActive: options.inactive,
8267
+ index,
8225
8268
  });
8226
8269
  }
8227
8270
  else if (referenceGroup.api.location.type === 'floating' ||
@@ -8230,6 +8273,7 @@ class DockviewComponent extends BaseGrid {
8230
8273
  referenceGroup.model.openPanel(panel, {
8231
8274
  skipSetActive: options.inactive,
8232
8275
  skipSetGroupActive: options.inactive,
8276
+ index,
8233
8277
  });
8234
8278
  referenceGroup.api.setSize({
8235
8279
  width: initial === null || initial === void 0 ? void 0 : initial.width,
@@ -8250,6 +8294,7 @@ class DockviewComponent extends BaseGrid {
8250
8294
  group.model.openPanel(panel, {
8251
8295
  skipSetActive: options.inactive,
8252
8296
  skipSetGroupActive: options.inactive,
8297
+ index,
8253
8298
  });
8254
8299
  if (!options.inactive) {
8255
8300
  this.doSetGroupAndPanelActive(group);
@@ -8268,6 +8313,7 @@ class DockviewComponent extends BaseGrid {
8268
8313
  group.model.openPanel(panel, {
8269
8314
  skipSetActive: options.inactive,
8270
8315
  skipSetGroupActive: options.inactive,
8316
+ index,
8271
8317
  });
8272
8318
  }
8273
8319
  else {
@@ -8278,6 +8324,7 @@ class DockviewComponent extends BaseGrid {
8278
8324
  group.model.openPanel(panel, {
8279
8325
  skipSetActive: options.inactive,
8280
8326
  skipSetGroupActive: options.inactive,
8327
+ index,
8281
8328
  });
8282
8329
  if (!options.inactive) {
8283
8330
  this.doSetGroupAndPanelActive(group);
@@ -8818,6 +8865,31 @@ class DockviewComponent extends BaseGrid {
8818
8865
  }
8819
8866
  }
8820
8867
 
8868
+ function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
8869
+ const Component = typeof componentName === 'string'
8870
+ ? components[componentName]
8871
+ : undefined;
8872
+ const FrameworkComponent = typeof componentName === 'string'
8873
+ ? frameworkComponents[componentName]
8874
+ : undefined;
8875
+ if (Component && FrameworkComponent) {
8876
+ throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
8877
+ }
8878
+ if (FrameworkComponent) {
8879
+ if (!createFrameworkComponent) {
8880
+ throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
8881
+ }
8882
+ return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
8883
+ }
8884
+ if (!Component) {
8885
+ if (fallback) {
8886
+ return fallback();
8887
+ }
8888
+ throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
8889
+ }
8890
+ return new Component(id, componentName);
8891
+ }
8892
+
8821
8893
  class GridviewComponent extends BaseGrid {
8822
8894
  get orientation() {
8823
8895
  return this.gridview.orientation;
@@ -9366,12 +9438,14 @@ class DefaultHeader extends CompositeDisposable {
9366
9438
  this._expandedIcon = createExpandMoreButton();
9367
9439
  this._collapsedIcon = createChevronRightButton();
9368
9440
  this.disposable = new MutableDisposable();
9369
- this.apiRef = { api: null };
9441
+ this.apiRef = {
9442
+ api: null,
9443
+ };
9370
9444
  this._element = document.createElement('div');
9371
- this.element.className = 'default-header';
9445
+ this.element.className = 'dv-default-header';
9372
9446
  this._content = document.createElement('span');
9373
9447
  this._expander = document.createElement('div');
9374
- this._expander.className = 'dockview-pane-header-icon';
9448
+ this._expander.className = 'dv-pane-header-icon';
9375
9449
  this.element.appendChild(this._expander);
9376
9450
  this.element.appendChild(this._content);
9377
9451
  this.addDisposables(addDisposableListener(this._element, 'click', () => {
@@ -10228,22 +10302,6 @@ const DockviewReact = React.forwardRef((props, ref) => {
10228
10302
  disposable.dispose();
10229
10303
  };
10230
10304
  }, [props.onDidDrop]);
10231
- React.useEffect(() => {
10232
- if (!dockviewRef.current) {
10233
- return () => {
10234
- // noop
10235
- };
10236
- }
10237
- const disposable = dockviewRef.current.onUnhandledDragOverEvent((event) => {
10238
- var _a;
10239
- if ((_a = props.showDndOverlay) === null || _a === void 0 ? void 0 : _a.call(props, event)) {
10240
- event.accept();
10241
- }
10242
- });
10243
- return () => {
10244
- disposable.dispose();
10245
- };
10246
- }, [props.showDndOverlay]);
10247
10305
  React.useEffect(() => {
10248
10306
  if (!dockviewRef.current) {
10249
10307
  return () => {
@@ -10638,5 +10696,5 @@ const PaneviewReact = React.forwardRef((props, ref) => {
10638
10696
  });
10639
10697
  PaneviewReact.displayName = 'PaneviewComponent';
10640
10698
 
10641
- export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDefaultTab, DockviewDidDropEvent, Disposable as DockviewDisposable, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewReact, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, LayoutPriority, LocalSelectionTransfer, Orientation, PROPERTY_KEYS, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, WillShowOverlayLocationEvent, createComponent, createDockview, createGridview, createPaneview, createSplitview, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, isReactComponent, orthogonal, positionToDirection, toTarget, usePortalsLifecycle };
10699
+ export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDefaultTab, DockviewDidDropEvent, Disposable as DockviewDisposable, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewReact, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, LayoutPriority, Orientation, PROPERTY_KEYS, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, WillShowOverlayLocationEvent, createDockview, createGridview, createPaneview, createSplitview, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, isReactComponent, orthogonal, positionToDirection, toTarget, usePortalsLifecycle };
10642
10700
  //# sourceMappingURL=dockview-react.esm.js.map