dockview-react 3.2.0 → 4.0.1

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 +934 -296
  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 +933 -295
  8. package/dist/dockview-react.amd.noStyle.js.map +1 -1
  9. package/dist/dockview-react.cjs.js +934 -296
  10. package/dist/dockview-react.cjs.js.map +1 -1
  11. package/dist/dockview-react.esm.js +927 -297
  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 +934 -296
  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 +933 -295
  22. package/dist/dockview-react.noStyle.js.map +1 -1
  23. package/dist/styles/dockview.css +423 -69
  24. package/package.json +2 -2
package/dist/dockview-react.amd.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * dockview-react
3
- * @version 3.2.0
3
+ * @version 4.0.1
4
4
  * @link https://github.com/mathuo/dockview
5
5
  * @license MIT
6
6
  */
@@ -33,7 +33,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
33
33
  }
34
34
  }
35
35
 
36
- 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-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\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-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\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-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\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-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\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-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\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-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\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 .dv-vertical > .dv-sash-container > .dv-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 .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover::after {\n background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled)::after {\n content: \"\";\n height: 40px;\n width: 4px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-separator-handle-background-color);\n position: absolute;\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover::after {\n background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dv-drop-target {\n position: relative;\n}\n.dv-drop-target > .dv-drop-target-dropzone {\n position: absolute;\n left: 0px;\n top: 0px;\n height: 100%;\n width: 100%;\n z-index: 1000;\n pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection {\n position: relative;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n background-color: var(--dv-drag-over-background-color);\n transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n will-change: transform;\n pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-dockview {\n position: relative;\n background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n position: absolute;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n position: relative;\n}\n\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {\n background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.dv-tab.dv-tab-dragging {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--dv-group-view-background-color);\n overflow: hidden;\n}\n.dv-groupview:focus {\n outline: none;\n}\n.dv-groupview > .dv-content-container {\n flex-grow: 1;\n min-height: 0;\n outline: none;\n}\n.dv-root-wrapper {\n height: 100%;\n width: 100%;\n}\n.dv-grid-view,\n.dv-branch-node {\n height: 100%;\n width: 100%;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n background-color: cyan;\n}\n\n.dv-resize-container {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: calc(var(--dv-overlay-z-index) - 2);\n border: 1px solid var(--dv-tab-divider-color);\n box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-hidden {\n display: none;\n}\n.dv-resize-container.dv-resize-container-dragging {\n opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n height: calc(100% - 8px);\n width: 4px;\n left: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n height: calc(100% - 8px);\n width: 4px;\n right: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n height: 4px;\n width: 4px;\n top: -2px;\n left: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n height: 4px;\n width: 4px;\n right: -2px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n height: 4px;\n width: 4px;\n left: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n height: 4px;\n width: 4px;\n right: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: se-resize;\n}\n.dv-render-overlay {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: 1;\n height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n z-index: calc(var(--dv-overlay-z-index) - 1);\n}\n\n.dv-debug .dv-render-overlay {\n outline: 1px solid red;\n outline-offset: -1;\n}\n.dv-pane-container {\n height: 100%;\n width: 100%;\n}\n.dv-pane-container.dv-animated .dv-view {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.dv-pane-container .dv-view {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n padding: 0px !important;\n}\n.dv-pane-container .dv-view:not(:first-child)::before {\n background-color: transparent !important;\n}\n.dv-pane-container .dv-view:not(:first-child) .dv-pane > .dv-pane-header {\n border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.dv-pane-container .dv-view .dv-default-header {\n background-color: var(--dv-group-view-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n display: flex;\n padding: 0px 8px;\n cursor: pointer;\n}\n.dv-pane-container .dv-view .dv-default-header .dv-pane-header-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.dv-pane-container .dv-view .dv-default-header > span {\n padding-left: 8px;\n flex-grow: 1;\n}\n.dv-pane-container:first-of-type > .dv-pane > .dv-pane-header {\n border-top: none !important;\n}\n.dv-pane-container .dv-pane {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n height: 100%;\n}\n.dv-pane-container .dv-pane .dv-pane-header {\n box-sizing: border-box;\n user-select: none;\n position: relative;\n outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-header.dv-pane-draggable {\n cursor: pointer;\n}\n.dv-pane-container .dv-pane .dv-pane-header:focus:before, .dv-pane-container .dv-pane .dv-pane-header:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-pane-container .dv-pane .dv-pane-body {\n overflow-y: auto;\n overflow-x: hidden;\n flex-grow: 1;\n position: relative;\n outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-body:focus:before, .dv-pane-container .dv-pane .dv-pane-body:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-enabled {\n background-color: black;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-disabled {\n background-color: orange;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-maximum {\n background-color: green;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-minimum {\n background-color: red;\n}\n\n.dv-split-view-container {\n position: relative;\n overflow: hidden;\n height: 100%;\n width: 100%;\n}\n.dv-split-view-container.dv-splitview-disabled > .dv-sash-container > .dv-sash {\n pointer-events: none;\n}\n.dv-split-view-container.dv-animation .dv-view,\n.dv-split-view-container.dv-animation .dv-sash {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.dv-split-view-container.dv-horizontal {\n height: 100%;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash {\n height: 100%;\n width: 4px;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ew-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: w-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: e-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 100%;\n width: 1px;\n}\n.dv-split-view-container.dv-vertical {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash {\n width: 100%;\n height: 4px;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ns-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: n-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: s-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 1px;\n width: 100%;\n}\n.dv-split-view-container .dv-sash-container {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.dv-split-view-container .dv-sash-container .dv-sash {\n position: absolute;\n z-index: 99;\n outline: none;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n touch-action: none;\n}\n.dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):active, .dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):hover {\n background-color: var(--dv-active-sash-color, transparent);\n transition-property: background-color;\n transition-timing-function: ease-in-out;\n transition-duration: var(--dv-active-sash-transition-duration, 0.1s);\n transition-delay: var(--dv-active-sash-transition-delay, 0.5s);\n}\n.dv-split-view-container .dv-view-container {\n position: relative;\n height: 100%;\n width: 100%;\n}\n.dv-split-view-container .dv-view-container .dv-view {\n height: 100%;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n}\n.dv-split-view-container.dv-separator-border .dv-view:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.dv-tab {\n flex-shrink: 0;\n}\n.dv-tab:focus-within, .dv-tab:focus {\n position: relative;\n}\n.dv-tab:focus-within::after, .dv-tab:focus::after {\n position: absolute;\n content: \"\";\n height: 100%;\n width: 100%;\n top: 0px;\n left: 0px;\n pointer-events: none;\n outline: 1px solid var(--dv-tab-divider-color) !important;\n outline-offset: -1px;\n z-index: 5;\n}\n.dv-tab.dv-tab-dragging .dv-default-tab-action {\n background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-tab.dv-active-tab .dv-default-tab .dv-default-tab-action {\n visibility: visible;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {\n visibility: hidden;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n visibility: visible;\n}\n.dv-tab .dv-default-tab {\n position: relative;\n height: 100%;\n display: flex;\n min-width: 80px;\n align-items: center;\n padding: 0px 8px;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.dv-tab .dv-default-tab .dv-default-tab-content {\n padding: 0px 8px;\n flex-grow: 1;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}\n.dv-tabs-and-actions-container {\n display: flex;\n background-color: var(--dv-tabs-and-actions-container-background-color);\n flex-shrink: 0;\n box-sizing: border-box;\n height: var(--dv-tabs-and-actions-container-height);\n font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container {\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container .dv-tab {\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-void-container {\n flex-grow: 0;\n}\n.dv-tabs-and-actions-container .dv-void-container {\n display: flex;\n flex-grow: 1;\n cursor: grab;\n}\n.dv-tabs-and-actions-container .dv-tabs-container {\n display: flex;\n overflow-x: overlay;\n overflow-y: hidden;\n scrollbar-width: thin;\n /* Track */\n /* Handle */\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar {\n height: 3px;\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-thumb {\n background: var(--dv-tabs-container-scrollbar-color);\n}\n.dv-tabs-and-actions-container .dv-tabs-container .dv-tab {\n -webkit-user-drag: element;\n outline: none;\n min-width: 75px;\n cursor: pointer;\n position: relative;\n box-sizing: border-box;\n}\n.dv-tabs-and-actions-container .dv-tabs-container .dv-tab:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-tab-divider-color);\n width: 1px;\n height: 100%;\n}\n.dv-watermark {\n display: flex;\n height: 100%;\n}";
36
+ var css_248z = ".dv-scrollable {\n position: relative;\n overflow: hidden;\n width: 100%;\n}\n.dv-scrollable .dv-scrollbar-horizontal {\n position: absolute;\n bottom: 0px;\n left: 0px;\n height: 4px;\n border-radius: 2px;\n background-color: transparent;\n transition-property: background-color;\n transition-timing-function: ease-in-out;\n transition-duration: 1s;\n transition-delay: 0s;\n}\n.dv-scrollable:hover .dv-scrollbar-horizontal, .dv-scrollable.dv-scrollable-resizing .dv-scrollbar-horizontal, .dv-scrollable.dv-scrollable-scrolling .dv-scrollbar-horizontal {\n background-color: var(--dv-scrollbar-background-color, rgba(255, 255, 255, 0.25));\n}\n.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: transparent;\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-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\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.dockview-theme-dark .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\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: transparent;\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-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\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 --dv-scrollbar-background-color: rgba(0, 0, 0, 0.25);\n}\n.dockview-theme-light .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\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: transparent;\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-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\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-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\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: transparent;\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-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-color-abyss-dark: #000c18;\n --dv-color-abyss: #10192c;\n --dv-color-abyss-light: #1c1c2a;\n --dv-color-abyss-lighter: #2b2b4a;\n --dv-color-abyss-accent: rgb(91, 30, 207);\n --dv-color-abyss-primary-text: white;\n --dv-color-abyss-secondary-text: rgb(148, 151, 169);\n --dv-group-view-background-color: var(--dv-color-abyss-dark);\n --dv-tabs-and-actions-container-background-color: var(\n --dv-color-abyss-light\n );\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-abyss-dark\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(--dv-color-abyss);\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-abyss-dark\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(--dv-color-abyss);\n --dv-tab-divider-color: var(--dv-color-abyss-lighter);\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: var(--dv-color-abyss-lighter);\n --dv-paneview-header-border-color: var(--dv-color-abyss-lighter);\n --dv-paneview-active-outline-color: #596f99;\n}\n.dockview-theme-abyss .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\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: transparent;\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-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\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-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .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-scrollable > .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-scrollable > .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-scrollable > .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: transparent;\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-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n padding: 10px;\n background-color: #ebeced;\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-sash-color: #cfd1d3;\n --dv-active-sash-color: #babbbb;\n}\n.dockview-theme-replit .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-replit .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-replit .dv-resize-container {\n border-radius: 10px !important;\n border: none;\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 .dv-vertical > .dv-sash-container > .dv-sash {\n background-color: transparent;\n}\n.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-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-sash-color);\n position: absolute;\n}\n.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover, .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):active {\n background-color: transparent;\n}\n.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover::after, .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):active::after {\n background-color: var(--dv-active-sash-color);\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash {\n background-color: transparent;\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-sash-color);\n position: absolute;\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover, .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):active {\n background-color: transparent;\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover::after, .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):active::after {\n background-color: var(--dv-active-sash-color);\n}\n\n.dockview-theme-abyss-spaced {\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: transparent;\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-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-border-radius: 20px;\n --dv-color-abyss-dark: rgb(11, 6, 17);\n --dv-color-abyss: #16121f;\n --dv-color-abyss-light: #201d2b;\n --dv-color-abyss-lighter: #2a2837;\n --dv-color-abyss-accent: rgb(91, 30, 207);\n --dv-color-abyss-primary-text: white;\n --dv-color-abyss-secondary-text: rgb(148, 151, 169);\n --dv-drag-over-border: 2px solid var(--dv-color-abyss-accent);\n --dv-drag-over-background-color: \"\";\n --dv-group-view-background-color: var(--dv-color-abyss-dark);\n --dv-tabs-and-actions-container-background-color: var(--dv-color-abyss);\n --dv-activegroup-visiblepanel-tab-background-color: var(\n --dv-color-abyss-lighter\n );\n --dv-activegroup-hiddenpanel-tab-background-color: var(\n --dv-color-abyss-light\n );\n --dv-inactivegroup-visiblepanel-tab-background-color: var(\n --dv-color-abyss-lighter\n );\n --dv-inactivegroup-hiddenpanel-tab-background-color: var(\n --dv-color-abyss-light\n );\n --dv-tab-divider-color: transparent;\n --dv-activegroup-visiblepanel-tab-color: var(--dv-color-abyss-primary-text);\n --dv-activegroup-hiddenpanel-tab-color: var(\n --dv-color-abyss-secondary-text\n );\n --dv-inactivegroup-visiblepanel-tab-color: var(\n --dv-color-abyss-primary-text\n );\n --dv-inactivegroup-hiddenpanel-tab-color: var(\n --dv-color-abyss-secondary-text\n );\n --dv-separator-border: transparent;\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-active-sash-color: var(--dv-color-abyss-accent);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.5);\n padding: 10px;\n background-color: var(--dv-color-abyss-dark);\n}\n.dockview-theme-abyss-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-abyss-spaced .dv-sash {\n border-radius: 4px;\n}\n.dockview-theme-abyss-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-abyss-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-abyss-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-abyss-spaced .dv-tabs-overflow-container,\n.dockview-theme-abyss-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: 8px;\n height: unset !important;\n}\n.dockview-theme-abyss-spaced .dv-tab {\n border-radius: 8px;\n}\n.dockview-theme-abyss-spaced .dv-tab .dv-svg {\n height: 8px;\n width: 8px;\n}\n.dockview-theme-abyss-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-abyss-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-abyss-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n}\n.dockview-theme-abyss-spaced .dv-resize-container .dv-groupview {\n border: 2px solid var(--dv-color-abyss-dark);\n}\n\n.dockview-theme-light-spaced {\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: transparent;\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-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-tab-font-size: 12px;\n --dv-border-radius: 20px;\n --dv-tab-margin: 0.5rem 0.25rem;\n --dv-tabs-and-actions-container-height: 44px;\n --dv-border-radius: 20px;\n --dv-drag-over-border: 2px solid rgb(91, 30, 207);\n --dv-drag-over-background-color: \"\";\n --dv-group-view-background-color: #f6f5f9;\n --dv-tabs-and-actions-container-background-color: white;\n --dv-activegroup-visiblepanel-tab-background-color: #ededf0;\n --dv-activegroup-hiddenpanel-tab-background-color: #f9f9fa;\n --dv-inactivegroup-visiblepanel-tab-background-color: #ededf0;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #f9f9fa;\n --dv-tab-divider-color: transparent;\n --dv-activegroup-visiblepanel-tab-color: rgb(104, 107, 130);\n --dv-activegroup-hiddenpanel-tab-color: rgb(148, 151, 169);\n --dv-inactivegroup-visiblepanel-tab-color: rgb(104, 107, 130);\n --dv-inactivegroup-hiddenpanel-tab-color: rgb(148, 151, 169);\n --dv-separator-border: transparent;\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-active-sash-color: rgb(91, 30, 207);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.1);\n padding: 10px;\n background-color: #f6f5f9;\n --dv-scrollbar-background-color: rgba(0, 0, 0, 0.25);\n}\n.dockview-theme-light-spaced .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-light-spaced .dv-sash {\n border-radius: 4px;\n}\n.dockview-theme-light-spaced .dv-drop-target-anchor {\n border-radius: calc(var(--dv-border-radius) / 4);\n}\n.dockview-theme-light-spaced .dv-drop-target-anchor.dv-drop-target-content {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-light-spaced .dv-resize-container {\n border-radius: var(--dv-border-radius) !important;\n border: none;\n}\n.dockview-theme-light-spaced .dv-tabs-overflow-container,\n.dockview-theme-light-spaced .dv-tabs-overflow-dropdown-default {\n border-radius: 8px;\n height: unset !important;\n}\n.dockview-theme-light-spaced .dv-tab {\n border-radius: 8px;\n}\n.dockview-theme-light-spaced .dv-tab .dv-svg {\n height: 8px;\n width: 8px;\n}\n.dockview-theme-light-spaced .dv-groupview {\n border-radius: var(--dv-border-radius);\n}\n.dockview-theme-light-spaced .dv-groupview .dv-tabs-and-actions-container {\n padding: 0px calc(var(--dv-border-radius) / 2);\n}\n.dockview-theme-light-spaced .dv-groupview .dv-content-container {\n background-color: var(--dv-tabs-and-actions-container-background-color);\n}\n.dockview-theme-light-spaced .dv-resize-container .dv-groupview {\n border: 2px solid rgba(255, 255, 255, 0.1);\n}\n.dv-drop-target-container {\n position: absolute;\n z-index: 9999;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n pointer-events: none;\n overflow: hidden;\n --dv-transition-duration: 300ms;\n}\n.dv-drop-target-container .dv-drop-target-anchor {\n position: relative;\n border: var(--dv-drag-over-border);\n transition: opacity var(--dv-transition-duration) ease-in, top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out;\n background-color: var(--dv-drag-over-background-color);\n opacity: 1;\n}\n.dv-drop-target {\n position: relative;\n --dv-transition-duration: 70ms;\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 border: var(--dv-drag-over-border);\n background-color: var(--dv-drag-over-background-color);\n transition: top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out, opacity var(--dv-transition-duration) 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-scrollable > .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-scrollable > .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-scrollable > .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-scrollable > .dv-tabs-container > .dv-tab.dv-inactive-tab {\n background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.dv-tab.dv-tab-dragging {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--dv-group-view-background-color);\n overflow: hidden;\n}\n.dv-groupview:focus {\n outline: none;\n}\n.dv-groupview > .dv-content-container {\n flex-grow: 1;\n min-height: 0;\n outline: none;\n}\n.dv-root-wrapper {\n height: 100%;\n width: 100%;\n}\n.dv-grid-view,\n.dv-branch-node {\n height: 100%;\n width: 100%;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n background-color: cyan;\n}\n\n.dv-resize-container {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: calc(var(--dv-overlay-z-index) - 2);\n border: 1px solid var(--dv-tab-divider-color);\n box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-hidden {\n display: none;\n}\n.dv-resize-container.dv-resize-container-dragging {\n opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n height: calc(100% - 8px);\n width: 4px;\n left: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n height: calc(100% - 8px);\n width: 4px;\n right: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n height: 4px;\n width: 4px;\n top: -2px;\n left: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n height: 4px;\n width: 4px;\n right: -2px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n height: 4px;\n width: 4px;\n left: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n height: 4px;\n width: 4px;\n right: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: se-resize;\n}\n.dv-render-overlay {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: 1;\n height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n z-index: calc(var(--dv-overlay-z-index) - 1);\n}\n\n.dv-debug .dv-render-overlay {\n outline: 1px solid red;\n outline-offset: -1;\n}\n.dv-pane-container {\n height: 100%;\n width: 100%;\n}\n.dv-pane-container.dv-animated .dv-view {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.dv-pane-container .dv-view {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n padding: 0px !important;\n}\n.dv-pane-container .dv-view:not(:first-child)::before {\n background-color: transparent !important;\n}\n.dv-pane-container .dv-view:not(:first-child) .dv-pane > .dv-pane-header {\n border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.dv-pane-container .dv-view .dv-default-header {\n background-color: var(--dv-group-view-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n display: flex;\n padding: 0px 8px;\n cursor: pointer;\n}\n.dv-pane-container .dv-view .dv-default-header .dv-pane-header-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.dv-pane-container .dv-view .dv-default-header > span {\n padding-left: 8px;\n flex-grow: 1;\n}\n.dv-pane-container:first-of-type > .dv-pane > .dv-pane-header {\n border-top: none !important;\n}\n.dv-pane-container .dv-pane {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n height: 100%;\n}\n.dv-pane-container .dv-pane .dv-pane-header {\n box-sizing: border-box;\n user-select: none;\n position: relative;\n outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-header.dv-pane-draggable {\n cursor: pointer;\n}\n.dv-pane-container .dv-pane .dv-pane-header:focus:before, .dv-pane-container .dv-pane .dv-pane-header:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-pane-container .dv-pane .dv-pane-body {\n overflow-y: auto;\n overflow-x: hidden;\n flex-grow: 1;\n position: relative;\n outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-body:focus:before, .dv-pane-container .dv-pane .dv-pane-body:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-enabled {\n background-color: black;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-disabled {\n background-color: orange;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-maximum {\n background-color: green;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-minimum {\n background-color: red;\n}\n\n.dv-split-view-container {\n position: relative;\n overflow: hidden;\n height: 100%;\n width: 100%;\n}\n.dv-split-view-container.dv-splitview-disabled > .dv-sash-container > .dv-sash {\n pointer-events: none;\n}\n.dv-split-view-container.dv-animation .dv-view,\n.dv-split-view-container.dv-animation .dv-sash {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.dv-split-view-container.dv-horizontal {\n height: 100%;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash {\n height: 100%;\n width: 4px;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ew-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: w-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: e-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 100%;\n width: 1px;\n}\n.dv-split-view-container.dv-vertical {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash {\n width: 100%;\n height: 4px;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ns-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: n-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: s-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 1px;\n width: 100%;\n}\n.dv-split-view-container .dv-sash-container {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.dv-split-view-container .dv-sash-container .dv-sash {\n position: absolute;\n z-index: 99;\n outline: none;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n touch-action: none;\n background-color: var(--dv-sash-color, transparent);\n}\n.dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):active, .dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):hover {\n background-color: var(--dv-active-sash-color, transparent);\n transition-property: background-color;\n transition-timing-function: ease-in-out;\n transition-duration: var(--dv-active-sash-transition-duration, 0.1s);\n transition-delay: var(--dv-active-sash-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 align-items: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.dv-tab .dv-default-tab .dv-default-tab-content {\n flex-grow: 1;\n margin-right: 4px;\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-overflow-dropdown-default {\n height: 100%;\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n margin: var(--dv-tab-margin);\n display: flex;\n align-items: center;\n flex-shrink: 0;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n}\n.dv-tabs-overflow-dropdown-default > span {\n padding-left: 0.25rem;\n}\n.dv-tabs-overflow-dropdown-default > svg {\n transform: rotate(90deg);\n}\n.dv-tabs-container {\n display: flex;\n height: 100%;\n overflow: hidden;\n scrollbar-width: thin;\n /* Track */\n /* Handle */\n}\n.dv-tabs-container.dv-horizontal .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-tabs-container::-webkit-scrollbar {\n height: 3px;\n}\n.dv-tabs-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.dv-tabs-container::-webkit-scrollbar-thumb {\n background: var(--dv-tabs-container-scrollbar-color);\n}\n\n.dv-tab {\n -webkit-user-drag: element;\n outline: none;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n position: relative;\n box-sizing: border-box;\n font-size: var(--dv-tab-font-size);\n margin: var(--dv-tab-margin);\n}\n\n.dv-tabs-overflow-container {\n flex-direction: column;\n height: unset;\n border: 1px solid var(--dv-tab-divider-color);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-tabs-overflow-container .dv-tab:not(:last-child) {\n border-bottom: 1px solid var(--dv-tab-divider-color);\n}\n.dv-tabs-overflow-container .dv-active-tab {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-tabs-overflow-container .dv-inactive-tab {\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-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 padding: 0px;\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-right-actions-container {\n display: flex;\n}\n.dv-watermark {\n display: flex;\n height: 100%;\n}";
37
37
  styleInject(css_248z);
38
38
 
39
39
  class TransferObject {
@@ -365,6 +365,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
365
365
  }
366
366
  }
367
367
 
368
+ class OverflowObserver extends CompositeDisposable {
369
+ constructor(el) {
370
+ super();
371
+ this._onDidChange = new Emitter();
372
+ this.onDidChange = this._onDidChange.event;
373
+ this._value = null;
374
+ this.addDisposables(this._onDidChange, watchElementResize(el, (entry) => {
375
+ const hasScrollX = entry.target.scrollWidth > entry.target.clientWidth;
376
+ const hasScrollY = entry.target.scrollHeight > entry.target.clientHeight;
377
+ this._value = { hasScrollX, hasScrollY };
378
+ this._onDidChange.fire(this._value);
379
+ }));
380
+ }
381
+ }
368
382
  function watchElementResize(element, cb) {
369
383
  const observer = new ResizeObserver((entires) => {
370
384
  /**
@@ -603,6 +617,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
603
617
  }
604
618
  }
605
619
  }
620
+ function isChildEntirelyVisibleWithinParent(child, parent) {
621
+ //
622
+ const childPosition = getDomNodePagePosition(child);
623
+ const parentPosition = getDomNodePagePosition(parent);
624
+ if (childPosition.left < parentPosition.left) {
625
+ return false;
626
+ }
627
+ if (childPosition.left + childPosition.width >
628
+ parentPosition.left + parentPosition.width) {
629
+ return false;
630
+ }
631
+ return true;
632
+ }
606
633
 
607
634
  function tail(arr) {
608
635
  if (arr.length === 0) {
@@ -610,9 +637,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
610
637
  }
611
638
  return [arr.slice(0, arr.length - 1), arr[arr.length - 1]];
612
639
  }
613
- function last(arr) {
614
- return arr.length > 0 ? arr[arr.length - 1] : undefined;
615
- }
616
640
  function sequenceEquals(arr1, arr2) {
617
641
  if (arr1.length !== arr2.length) {
618
642
  return false;
@@ -878,6 +902,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
878
902
  }
879
903
  set margin(value) {
880
904
  this._margin = value;
905
+ toggleClass(this.element, 'dv-splitview-has-margin', value !== 0);
881
906
  }
882
907
  constructor(container, options) {
883
908
  var _a, _b;
@@ -3449,9 +3474,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
3449
3474
  get totalPanels() {
3450
3475
  return this.component.totalPanels;
3451
3476
  }
3452
- get gap() {
3453
- return this.component.gap;
3454
- }
3455
3477
  /**
3456
3478
  * Invoked when the active group changes. May be undefined if no group is active.
3457
3479
  */
@@ -3682,9 +3704,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
3682
3704
  addPopoutGroup(item, options) {
3683
3705
  return this.component.addPopoutGroup(item, options);
3684
3706
  }
3685
- setGap(gap) {
3686
- this.component.updateOptions({ gap });
3687
- }
3688
3707
  updateOptions(options) {
3689
3708
  this.component.updateOptions(options);
3690
3709
  }
@@ -3737,14 +3756,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
3737
3756
  * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
3738
3757
  * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
3739
3758
  * dnd logic. You can see the code at
3740
- * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
3759
+ P * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
3741
3760
  */
3742
3761
  event.dataTransfer.setData('text/plain', '');
3743
3762
  }
3744
3763
  }
3745
3764
  }), addDisposableListener(this.el, 'dragend', () => {
3746
3765
  this.pointerEventsDisposable.dispose();
3747
- this.dataDisposable.dispose();
3766
+ setTimeout(() => {
3767
+ this.dataDisposable.dispose(); // allow the data to be read by other handlers before disposing
3768
+ }, 0);
3748
3769
  }));
3749
3770
  }
3750
3771
  }
@@ -3854,6 +3875,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
3854
3875
  const SMALL_WIDTH_BOUNDARY = 100;
3855
3876
  const SMALL_HEIGHT_BOUNDARY = 100;
3856
3877
  class Droptarget extends CompositeDisposable {
3878
+ get disabled() {
3879
+ return this._disabled;
3880
+ }
3881
+ set disabled(value) {
3882
+ this._disabled = value;
3883
+ }
3857
3884
  get state() {
3858
3885
  return this._state;
3859
3886
  }
@@ -3865,23 +3892,34 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
3865
3892
  this.onDrop = this._onDrop.event;
3866
3893
  this._onWillShowOverlay = new Emitter();
3867
3894
  this.onWillShowOverlay = this._onWillShowOverlay.event;
3895
+ this._disabled = false;
3868
3896
  // use a set to take advantage of #<set>.has
3869
3897
  this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
3870
3898
  this.dnd = new DragAndDropObserver(this.element, {
3871
- onDragEnter: () => undefined,
3899
+ onDragEnter: () => {
3900
+ var _a, _b, _c;
3901
+ (_c = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.getElements();
3902
+ },
3872
3903
  onDragOver: (e) => {
3904
+ var _a, _b, _c, _d, _e, _f, _g;
3905
+ Droptarget.ACTUAL_TARGET = this;
3906
+ const overrideTraget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
3873
3907
  if (this._acceptedTargetZonesSet.size === 0) {
3908
+ if (overrideTraget) {
3909
+ return;
3910
+ }
3874
3911
  this.removeDropTarget();
3875
3912
  return;
3876
3913
  }
3877
- const width = this.element.clientWidth;
3878
- const height = this.element.clientHeight;
3914
+ const target = (_e = (_d = (_c = this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : this.element;
3915
+ const width = target.offsetWidth;
3916
+ const height = target.offsetHeight;
3879
3917
  if (width === 0 || height === 0) {
3880
3918
  return; // avoid div!0
3881
3919
  }
3882
3920
  const rect = e.currentTarget.getBoundingClientRect();
3883
- const x = e.clientX - rect.left;
3884
- const y = e.clientY - rect.top;
3921
+ const x = ((_f = e.clientX) !== null && _f !== void 0 ? _f : 0) - rect.left;
3922
+ const y = ((_g = e.clientY) !== null && _g !== void 0 ? _g : 0) - rect.top;
3885
3923
  const quadrant = this.calculateQuadrant(this._acceptedTargetZonesSet, x, y, width, height);
3886
3924
  /**
3887
3925
  * If the event has already been used by another DropTarget instance
@@ -3894,6 +3932,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
3894
3932
  return;
3895
3933
  }
3896
3934
  if (!this.options.canDisplayOverlay(e, quadrant)) {
3935
+ if (overrideTraget) {
3936
+ return;
3937
+ }
3897
3938
  this.removeDropTarget();
3898
3939
  return;
3899
3940
  }
@@ -3911,29 +3952,57 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
3911
3952
  return;
3912
3953
  }
3913
3954
  this.markAsUsed(e);
3914
- if (!this.targetElement) {
3955
+ if (overrideTraget) ;
3956
+ else if (!this.targetElement) {
3915
3957
  this.targetElement = document.createElement('div');
3916
3958
  this.targetElement.className = 'dv-drop-target-dropzone';
3917
3959
  this.overlayElement = document.createElement('div');
3918
3960
  this.overlayElement.className = 'dv-drop-target-selection';
3919
3961
  this._state = 'center';
3920
3962
  this.targetElement.appendChild(this.overlayElement);
3921
- this.element.classList.add('dv-drop-target');
3922
- this.element.append(this.targetElement);
3963
+ target.classList.add('dv-drop-target');
3964
+ target.append(this.targetElement);
3965
+ // this.overlayElement.style.opacity = '0';
3966
+ // requestAnimationFrame(() => {
3967
+ // if (this.overlayElement) {
3968
+ // this.overlayElement.style.opacity = '';
3969
+ // }
3970
+ // });
3923
3971
  }
3924
3972
  this.toggleClasses(quadrant, width, height);
3925
3973
  this._state = quadrant;
3926
3974
  },
3927
3975
  onDragLeave: () => {
3976
+ var _a, _b;
3977
+ const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
3978
+ if (target) {
3979
+ return;
3980
+ }
3928
3981
  this.removeDropTarget();
3929
3982
  },
3930
- onDragEnd: () => {
3983
+ onDragEnd: (e) => {
3984
+ var _a, _b;
3985
+ const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
3986
+ if (target && Droptarget.ACTUAL_TARGET === this) {
3987
+ if (this._state) {
3988
+ // only stop the propagation of the event if we are dealing with it
3989
+ // which is only when the target has state
3990
+ e.stopPropagation();
3991
+ this._onDrop.fire({
3992
+ position: this._state,
3993
+ nativeEvent: e,
3994
+ });
3995
+ }
3996
+ }
3931
3997
  this.removeDropTarget();
3998
+ target === null || target === void 0 ? void 0 : target.clear();
3932
3999
  },
3933
4000
  onDrop: (e) => {
4001
+ var _a, _b, _c;
3934
4002
  e.preventDefault();
3935
4003
  const state = this._state;
3936
4004
  this.removeDropTarget();
4005
+ (_c = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.clear();
3937
4006
  if (state) {
3938
4007
  // only stop the propagation of the event if we are dealing with it
3939
4008
  // which is only when the target has state
@@ -3968,8 +4037,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
3968
4037
  return typeof value === 'boolean' && value;
3969
4038
  }
3970
4039
  toggleClasses(quadrant, width, height) {
3971
- var _a, _b;
3972
- if (!this.overlayElement) {
4040
+ var _a, _b, _c, _d, _e, _f, _g;
4041
+ const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
4042
+ if (!target && !this.overlayElement) {
3973
4043
  return;
3974
4044
  }
3975
4045
  const isSmallX = width < SMALL_WIDTH_BOUNDARY;
@@ -3983,7 +4053,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
3983
4053
  const topClass = !isSmallY && isTop;
3984
4054
  const bottomClass = !isSmallY && isBottom;
3985
4055
  let size = 1;
3986
- const sizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : DEFAULT_SIZE;
4056
+ const sizeOptions = (_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : DEFAULT_SIZE;
3987
4057
  if (sizeOptions.type === 'percentage') {
3988
4058
  size = clamp(sizeOptions.value, 0, 100) / 100;
3989
4059
  }
@@ -3995,6 +4065,74 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
3995
4065
  size = clamp(0, sizeOptions.value, height) / height;
3996
4066
  }
3997
4067
  }
4068
+ if (target) {
4069
+ const outlineEl = (_g = (_f = (_e = this.options).getOverlayOutline) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : this.element;
4070
+ const elBox = outlineEl.getBoundingClientRect();
4071
+ const ta = target.getElements(undefined, outlineEl);
4072
+ const el = ta.root;
4073
+ const overlay = ta.overlay;
4074
+ const bigbox = el.getBoundingClientRect();
4075
+ const rootTop = elBox.top - bigbox.top;
4076
+ const rootLeft = elBox.left - bigbox.left;
4077
+ const box = {
4078
+ top: rootTop,
4079
+ left: rootLeft,
4080
+ width: width,
4081
+ height: height,
4082
+ };
4083
+ if (rightClass) {
4084
+ box.left = rootLeft + width * (1 - size);
4085
+ box.width = width * size;
4086
+ }
4087
+ else if (leftClass) {
4088
+ box.width = width * size;
4089
+ }
4090
+ else if (topClass) {
4091
+ box.height = height * size;
4092
+ }
4093
+ else if (bottomClass) {
4094
+ box.top = rootTop + height * (1 - size);
4095
+ box.height = height * size;
4096
+ }
4097
+ if (isSmallX && isLeft) {
4098
+ box.width = 4;
4099
+ }
4100
+ if (isSmallX && isRight) {
4101
+ box.left = rootLeft + width - 4;
4102
+ box.width = 4;
4103
+ }
4104
+ const topPx = `${Math.round(box.top)}px`;
4105
+ const leftPx = `${Math.round(box.left)}px`;
4106
+ const widthPx = `${Math.round(box.width)}px`;
4107
+ const heightPx = `${Math.round(box.height)}px`;
4108
+ if (overlay.style.top === topPx &&
4109
+ overlay.style.left === leftPx &&
4110
+ overlay.style.width === widthPx &&
4111
+ overlay.style.height === heightPx) {
4112
+ return;
4113
+ }
4114
+ overlay.style.top = topPx;
4115
+ overlay.style.left = leftPx;
4116
+ overlay.style.width = widthPx;
4117
+ overlay.style.height = heightPx;
4118
+ overlay.style.visibility = 'visible';
4119
+ overlay.className = `dv-drop-target-anchor${this.options.className ? ` ${this.options.className}` : ''}`;
4120
+ toggleClass(overlay, 'dv-drop-target-left', isLeft);
4121
+ toggleClass(overlay, 'dv-drop-target-right', isRight);
4122
+ toggleClass(overlay, 'dv-drop-target-top', isTop);
4123
+ toggleClass(overlay, 'dv-drop-target-bottom', isBottom);
4124
+ toggleClass(overlay, 'dv-drop-target-center', quadrant === 'center');
4125
+ if (ta.changed) {
4126
+ toggleClass(overlay, 'dv-drop-target-anchor-container-changed', true);
4127
+ setTimeout(() => {
4128
+ toggleClass(overlay, 'dv-drop-target-anchor-container-changed', false);
4129
+ }, 10);
4130
+ }
4131
+ return;
4132
+ }
4133
+ if (!this.overlayElement) {
4134
+ return;
4135
+ }
3998
4136
  const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
3999
4137
  /**
4000
4138
  * You can also achieve the overlay placement using the transform CSS property
@@ -4051,12 +4189,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
4051
4189
  return calculateQuadrantAsPixels(overlayType, x, y, width, height, activationSizeOptions.value);
4052
4190
  }
4053
4191
  removeDropTarget() {
4192
+ var _a;
4054
4193
  if (this.targetElement) {
4055
4194
  this._state = undefined;
4056
- this.element.removeChild(this.targetElement);
4195
+ (_a = this.targetElement.parentElement) === null || _a === void 0 ? void 0 : _a.classList.remove('dv-drop-target');
4196
+ this.targetElement.remove();
4057
4197
  this.targetElement = undefined;
4058
4198
  this.overlayElement = undefined;
4059
- this.element.classList.remove('dv-drop-target');
4060
4199
  }
4061
4200
  }
4062
4201
  }
@@ -4641,7 +4780,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
4641
4780
  this._element.className = 'dv-content-container';
4642
4781
  this._element.tabIndex = -1;
4643
4782
  this.addDisposables(this._onDidFocus, this._onDidBlur);
4783
+ const target = group.dropTargetContainer;
4644
4784
  this.dropTarget = new Droptarget(this.element, {
4785
+ getOverlayOutline: () => {
4786
+ var _a;
4787
+ return ((_a = accessor.options.theme) === null || _a === void 0 ? void 0 : _a.dndPanelOverlay) === 'group'
4788
+ ? this.element.parentElement
4789
+ : null;
4790
+ },
4791
+ className: 'dv-drop-target-content',
4645
4792
  acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
4646
4793
  canDisplayOverlay: (event, position) => {
4647
4794
  if (this.group.locked === 'no-drop-target' ||
@@ -4655,22 +4802,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
4655
4802
  return false;
4656
4803
  }
4657
4804
  if (data && data.viewId === this.accessor.id) {
4658
- if (data.groupId === this.group.id) {
4659
- if (position === 'center') {
4660
- // don't allow to drop on self for center position
4661
- return false;
4662
- }
4663
- if (data.panelId === null) {
4664
- // don't allow group move to drop anywhere on self
4665
- return false;
4666
- }
4667
- }
4668
- const groupHasOnePanelAndIsActiveDragElement = this.group.panels.length === 1 &&
4669
- data.groupId === this.group.id;
4670
- return !groupHasOnePanelAndIsActiveDragElement;
4805
+ return true;
4671
4806
  }
4672
4807
  return this.group.canDisplayOverlay(event, position, 'content');
4673
4808
  },
4809
+ getOverrideTarget: target ? () => target.model : undefined,
4674
4810
  });
4675
4811
  this.addDisposables(this.dropTarget);
4676
4812
  }
@@ -4745,6 +4881,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
4745
4881
  }
4746
4882
  }
4747
4883
 
4884
+ function addGhostImage(dataTransfer, ghostElement, options) {
4885
+ var _a, _b;
4886
+ // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
4887
+ addClasses(ghostElement, 'dv-dragged');
4888
+ document.body.appendChild(ghostElement);
4889
+ dataTransfer.setDragImage(ghostElement, (_a = options === null || options === void 0 ? void 0 : options.x) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.y) !== null && _b !== void 0 ? _b : 0);
4890
+ setTimeout(() => {
4891
+ removeClasses(ghostElement, 'dv-dragged');
4892
+ ghostElement.remove();
4893
+ }, 0);
4894
+ }
4895
+
4748
4896
  class TabDragHandler extends DragHandler {
4749
4897
  constructor(element, accessor, group, panel) {
4750
4898
  super(element);
@@ -4785,25 +4933,32 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
4785
4933
  toggleClass(this.element, 'dv-inactive-tab', true);
4786
4934
  const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
4787
4935
  this.dropTarget = new Droptarget(this._element, {
4788
- acceptedTargetZones: ['center'],
4936
+ acceptedTargetZones: ['left', 'right'],
4937
+ overlayModel: { activationSize: { value: 50, type: 'percentage' } },
4789
4938
  canDisplayOverlay: (event, position) => {
4790
4939
  if (this.group.locked) {
4791
4940
  return false;
4792
4941
  }
4793
4942
  const data = getPanelData();
4794
4943
  if (data && this.accessor.id === data.viewId) {
4795
- if (data.panelId === null &&
4796
- data.groupId === this.group.id) {
4797
- // don't allow group move to drop on self
4798
- return false;
4799
- }
4800
- return this.panel.id !== data.panelId;
4944
+ return true;
4801
4945
  }
4802
4946
  return this.group.model.canDisplayOverlay(event, position, 'tab');
4803
4947
  },
4948
+ getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
4804
4949
  });
4805
4950
  this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
4806
4951
  this.addDisposables(this._onPointDown, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
4952
+ if (event.dataTransfer) {
4953
+ const style = getComputedStyle(this.element);
4954
+ const newNode = this.element.cloneNode(true);
4955
+ Array.from(style).forEach((key) => newNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key)));
4956
+ newNode.style.position = 'absolute';
4957
+ addGhostImage(event.dataTransfer, newNode, {
4958
+ y: -10,
4959
+ x: 30,
4960
+ });
4961
+ }
4807
4962
  this._onDragStart.fire(event);
4808
4963
  }), dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
4809
4964
  this._onPointDown.fire(event);
@@ -4827,17 +4982,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
4827
4982
  }
4828
4983
  }
4829
4984
 
4830
- function addGhostImage(dataTransfer, ghostElement) {
4831
- // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
4832
- addClasses(ghostElement, 'dv-dragged');
4833
- document.body.appendChild(ghostElement);
4834
- dataTransfer.setDragImage(ghostElement, 0, 0);
4835
- setTimeout(() => {
4836
- removeClasses(ghostElement, 'dv-dragged');
4837
- ghostElement.remove();
4838
- }, 0);
4839
- }
4840
-
4841
4985
  class GroupDragHandler extends DragHandler {
4842
4986
  constructor(element, accessor, group) {
4843
4987
  super(element);
@@ -4877,8 +5021,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
4877
5021
  ghostElement.style.lineHeight = '20px';
4878
5022
  ghostElement.style.borderRadius = '12px';
4879
5023
  ghostElement.style.position = 'absolute';
5024
+ ghostElement.style.pointerEvents = 'none';
5025
+ ghostElement.style.top = '-9999px';
4880
5026
  ghostElement.textContent = `Multiple Panels (${this.group.size})`;
4881
- addGhostImage(dataTransfer, ghostElement);
5027
+ addGhostImage(dataTransfer, ghostElement, { y: -10, x: 30 });
4882
5028
  }
4883
5029
  return {
4884
5030
  dispose: () => {
@@ -4910,19 +5056,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
4910
5056
  this.dropTraget = new Droptarget(this._element, {
4911
5057
  acceptedTargetZones: ['center'],
4912
5058
  canDisplayOverlay: (event, position) => {
4913
- var _a;
4914
5059
  const data = getPanelData();
4915
5060
  if (data && this.accessor.id === data.viewId) {
4916
- if (data.panelId === null &&
4917
- data.groupId === this.group.id) {
4918
- // don't allow group move to drop on self
4919
- return false;
4920
- }
4921
- // don't show the overlay if the tab being dragged is the last panel of this group
4922
- return ((_a = last(this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
5061
+ return true;
4923
5062
  }
4924
5063
  return group.model.canDisplayOverlay(event, position, 'header_space');
4925
5064
  },
5065
+ getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
4926
5066
  });
4927
5067
  this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
4928
5068
  this.addDisposables(handler, handler.onDragStart((event) => {
@@ -4933,88 +5073,338 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
4933
5073
  }
4934
5074
  }
4935
5075
 
4936
- class TabsContainer extends CompositeDisposable {
4937
- get panels() {
4938
- return this.tabs.map((_) => _.value.panel.id);
4939
- }
4940
- get size() {
4941
- return this.tabs.length;
4942
- }
4943
- get hidden() {
4944
- return this._hidden;
5076
+ class Scrollbar extends CompositeDisposable {
5077
+ get element() {
5078
+ return this._element;
4945
5079
  }
4946
- set hidden(value) {
4947
- this._hidden = value;
4948
- this.element.style.display = value ? 'none' : '';
5080
+ constructor(scrollableElement) {
5081
+ super();
5082
+ this.scrollableElement = scrollableElement;
5083
+ this._scrollLeft = 0;
5084
+ this._element = document.createElement('div');
5085
+ this._element.className = 'dv-scrollable';
5086
+ this._horizontalScrollbar = document.createElement('div');
5087
+ this._horizontalScrollbar.className = 'dv-scrollbar-horizontal';
5088
+ this.element.appendChild(scrollableElement);
5089
+ this.element.appendChild(this._horizontalScrollbar);
5090
+ this.addDisposables(addDisposableListener(this.element, 'wheel', (event) => {
5091
+ this._scrollLeft += event.deltaY * Scrollbar.MouseWheelSpeed;
5092
+ this.calculateScrollbarStyles();
5093
+ }), addDisposableListener(this._horizontalScrollbar, 'pointerdown', (event) => {
5094
+ event.preventDefault();
5095
+ toggleClass(this.element, 'dv-scrollable-scrolling', true);
5096
+ const originalClientX = event.clientX;
5097
+ const originalScrollLeft = this._scrollLeft;
5098
+ const onPointerMove = (event) => {
5099
+ const deltaX = event.clientX - originalClientX;
5100
+ const { clientWidth } = this.element;
5101
+ const { scrollWidth } = this.scrollableElement;
5102
+ const p = clientWidth / scrollWidth;
5103
+ this._scrollLeft = originalScrollLeft + deltaX / p;
5104
+ this.calculateScrollbarStyles();
5105
+ };
5106
+ const onEnd = () => {
5107
+ toggleClass(this.element, 'dv-scrollable-scrolling', false);
5108
+ document.removeEventListener('pointermove', onPointerMove);
5109
+ document.removeEventListener('pointerup', onEnd);
5110
+ document.removeEventListener('pointercancel', onEnd);
5111
+ };
5112
+ document.addEventListener('pointermove', onPointerMove);
5113
+ document.addEventListener('pointerup', onEnd);
5114
+ document.addEventListener('pointercancel', onEnd);
5115
+ }), addDisposableListener(this.element, 'scroll', () => {
5116
+ this.calculateScrollbarStyles();
5117
+ }), addDisposableListener(this.scrollableElement, 'scroll', () => {
5118
+ this._scrollLeft = this.scrollableElement.scrollLeft;
5119
+ this.calculateScrollbarStyles();
5120
+ }), watchElementResize(this.element, () => {
5121
+ toggleClass(this.element, 'dv-scrollable-resizing', true);
5122
+ if (this._animationTimer) {
5123
+ clearTimeout(this._animationTimer);
5124
+ }
5125
+ this._animationTimer = setTimeout(() => {
5126
+ clearTimeout(this._animationTimer);
5127
+ toggleClass(this.element, 'dv-scrollable-resizing', false);
5128
+ }, 500);
5129
+ this.calculateScrollbarStyles();
5130
+ }));
4949
5131
  }
4950
- show() {
4951
- if (!this.hidden) {
4952
- this.element.style.display = '';
5132
+ calculateScrollbarStyles() {
5133
+ const { clientWidth } = this.element;
5134
+ const { scrollWidth } = this.scrollableElement;
5135
+ const hasScrollbar = scrollWidth > clientWidth;
5136
+ if (hasScrollbar) {
5137
+ const px = clientWidth * (clientWidth / scrollWidth);
5138
+ this._horizontalScrollbar.style.width = `${px}px`;
5139
+ this._scrollLeft = clamp(this._scrollLeft, 0, this.scrollableElement.scrollWidth - clientWidth);
5140
+ this.scrollableElement.scrollLeft = this._scrollLeft;
5141
+ const percentageComplete = this._scrollLeft / (scrollWidth - clientWidth);
5142
+ this._horizontalScrollbar.style.left = `${(clientWidth - px) * percentageComplete}px`;
5143
+ }
5144
+ else {
5145
+ this._horizontalScrollbar.style.width = `0px`;
5146
+ this._horizontalScrollbar.style.left = `0px`;
5147
+ this._scrollLeft = 0;
4953
5148
  }
4954
5149
  }
4955
- hide() {
4956
- this._element.style.display = 'none';
5150
+ }
5151
+ Scrollbar.MouseWheelSpeed = 1;
5152
+
5153
+ class Tabs extends CompositeDisposable {
5154
+ get showTabsOverflowControl() {
5155
+ return this._showTabsOverflowControl;
4957
5156
  }
4958
- setRightActionsElement(element) {
4959
- if (this.rightActions === element) {
5157
+ set showTabsOverflowControl(value) {
5158
+ if (this._showTabsOverflowControl == value) {
4960
5159
  return;
4961
5160
  }
4962
- if (this.rightActions) {
4963
- this.rightActions.remove();
4964
- this.rightActions = undefined;
4965
- }
4966
- if (element) {
4967
- this.rightActionsContainer.appendChild(element);
4968
- this.rightActions = element;
5161
+ this._showTabsOverflowControl = value;
5162
+ if (value) {
5163
+ const observer = new OverflowObserver(this._tabsList);
5164
+ this._observerDisposable.value = new CompositeDisposable(observer, observer.onDidChange((event) => {
5165
+ const hasOverflow = event.hasScrollX || event.hasScrollY;
5166
+ this.toggleDropdown({ reset: !hasOverflow });
5167
+ }), addDisposableListener(this._tabsList, 'scroll', () => {
5168
+ this.toggleDropdown({ reset: false });
5169
+ }));
4969
5170
  }
4970
5171
  }
4971
- setLeftActionsElement(element) {
4972
- if (this.leftActions === element) {
4973
- return;
4974
- }
4975
- if (this.leftActions) {
4976
- this.leftActions.remove();
4977
- this.leftActions = undefined;
4978
- }
4979
- if (element) {
4980
- this.leftActionsContainer.appendChild(element);
4981
- this.leftActions = element;
5172
+ get element() {
5173
+ return this._element;
5174
+ }
5175
+ get panels() {
5176
+ return this._tabs.map((_) => _.value.panel.id);
5177
+ }
5178
+ get size() {
5179
+ return this._tabs.length;
5180
+ }
5181
+ get tabs() {
5182
+ return this._tabs.map((_) => _.value);
5183
+ }
5184
+ constructor(group, accessor, options) {
5185
+ super();
5186
+ this.group = group;
5187
+ this.accessor = accessor;
5188
+ this._observerDisposable = new MutableDisposable();
5189
+ this._tabs = [];
5190
+ this.selectedIndex = -1;
5191
+ this._showTabsOverflowControl = false;
5192
+ this._onTabDragStart = new Emitter();
5193
+ this.onTabDragStart = this._onTabDragStart.event;
5194
+ this._onDrop = new Emitter();
5195
+ this.onDrop = this._onDrop.event;
5196
+ this._onWillShowOverlay = new Emitter();
5197
+ this.onWillShowOverlay = this._onWillShowOverlay.event;
5198
+ this._onOverflowTabsChange = new Emitter();
5199
+ this.onOverflowTabsChange = this._onOverflowTabsChange.event;
5200
+ this._tabsList = document.createElement('div');
5201
+ this._tabsList.className = 'dv-tabs-container dv-horizontal';
5202
+ this.showTabsOverflowControl = options.showTabsOverflowControl;
5203
+ const scrollbar = new Scrollbar(this._tabsList);
5204
+ this._element = scrollbar.element;
5205
+ this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, scrollbar, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, addDisposableListener(this.element, 'pointerdown', (event) => {
5206
+ if (event.defaultPrevented) {
5207
+ return;
5208
+ }
5209
+ const isLeftClick = event.button === 0;
5210
+ if (isLeftClick) {
5211
+ this.accessor.doSetGroupActive(this.group);
5212
+ }
5213
+ }), exports.DockviewDisposable.from(() => {
5214
+ for (const { value, disposable } of this._tabs) {
5215
+ disposable.dispose();
5216
+ value.dispose();
5217
+ }
5218
+ this._tabs = [];
5219
+ }));
5220
+ }
5221
+ indexOf(id) {
5222
+ return this._tabs.findIndex((tab) => tab.value.panel.id === id);
5223
+ }
5224
+ isActive(tab) {
5225
+ return (this.selectedIndex > -1 &&
5226
+ this._tabs[this.selectedIndex].value === tab);
5227
+ }
5228
+ setActivePanel(panel) {
5229
+ let runningWidth = 0;
5230
+ for (const tab of this._tabs) {
5231
+ const isActivePanel = panel.id === tab.value.panel.id;
5232
+ tab.value.setActive(isActivePanel);
5233
+ if (isActivePanel) {
5234
+ const element = tab.value.element;
5235
+ const parentElement = element.parentElement;
5236
+ if (runningWidth < parentElement.scrollLeft ||
5237
+ runningWidth + element.clientWidth >
5238
+ parentElement.scrollLeft + parentElement.clientWidth) {
5239
+ parentElement.scrollLeft = runningWidth;
5240
+ }
5241
+ }
5242
+ runningWidth += tab.value.element.clientWidth;
4982
5243
  }
4983
5244
  }
4984
- setPrefixActionsElement(element) {
4985
- if (this.preActions === element) {
5245
+ openPanel(panel, index = this._tabs.length) {
5246
+ if (this._tabs.find((tab) => tab.value.panel.id === panel.id)) {
4986
5247
  return;
4987
5248
  }
4988
- if (this.preActions) {
4989
- this.preActions.remove();
4990
- this.preActions = undefined;
5249
+ const tab = new Tab(panel, this.accessor, this.group);
5250
+ tab.setContent(panel.view.tab);
5251
+ const disposable = new CompositeDisposable(tab.onDragStart((event) => {
5252
+ this._onTabDragStart.fire({ nativeEvent: event, panel });
5253
+ }), tab.onPointerDown((event) => {
5254
+ if (event.defaultPrevented) {
5255
+ return;
5256
+ }
5257
+ const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
5258
+ const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
5259
+ this.size === 1;
5260
+ if (isFloatingGroupsEnabled &&
5261
+ !isFloatingWithOnePanel &&
5262
+ event.shiftKey) {
5263
+ event.preventDefault();
5264
+ const panel = this.accessor.getGroupPanel(tab.panel.id);
5265
+ const { top, left } = tab.element.getBoundingClientRect();
5266
+ const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
5267
+ this.accessor.addFloatingGroup(panel, {
5268
+ x: left - rootLeft,
5269
+ y: top - rootTop,
5270
+ inDragMode: true,
5271
+ });
5272
+ return;
5273
+ }
5274
+ switch (event.button) {
5275
+ case 0: // left click or touch
5276
+ if (this.group.activePanel !== panel) {
5277
+ this.group.model.openPanel(panel);
5278
+ }
5279
+ break;
5280
+ }
5281
+ }), tab.onDrop((event) => {
5282
+ this._onDrop.fire({
5283
+ event: event.nativeEvent,
5284
+ index: this._tabs.findIndex((x) => x.value === tab),
5285
+ });
5286
+ }), tab.onWillShowOverlay((event) => {
5287
+ this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
5288
+ kind: 'tab',
5289
+ panel: this.group.activePanel,
5290
+ api: this.accessor.api,
5291
+ group: this.group,
5292
+ getData: getPanelData,
5293
+ }));
5294
+ }));
5295
+ const value = { value: tab, disposable };
5296
+ this.addTab(value, index);
5297
+ }
5298
+ delete(id) {
5299
+ const index = this.indexOf(id);
5300
+ const tabToRemove = this._tabs.splice(index, 1)[0];
5301
+ const { value, disposable } = tabToRemove;
5302
+ disposable.dispose();
5303
+ value.dispose();
5304
+ value.element.remove();
5305
+ }
5306
+ addTab(tab, index = this._tabs.length) {
5307
+ if (index < 0 || index > this._tabs.length) {
5308
+ throw new Error('invalid location');
4991
5309
  }
4992
- if (element) {
4993
- this.preActionsContainer.appendChild(element);
4994
- this.preActions = element;
5310
+ this._tabsList.insertBefore(tab.value.element, this._tabsList.children[index]);
5311
+ this._tabs = [
5312
+ ...this._tabs.slice(0, index),
5313
+ tab,
5314
+ ...this._tabs.slice(index),
5315
+ ];
5316
+ if (this.selectedIndex < 0) {
5317
+ this.selectedIndex = index;
4995
5318
  }
4996
5319
  }
4997
- get element() {
4998
- return this._element;
5320
+ toggleDropdown(options) {
5321
+ const tabs = options.reset
5322
+ ? []
5323
+ : this._tabs
5324
+ .filter((tab) => !isChildEntirelyVisibleWithinParent(tab.value.element, this._tabsList))
5325
+ .map((x) => x.value.panel.id);
5326
+ this._onOverflowTabsChange.fire({ tabs, reset: options.reset });
4999
5327
  }
5000
- isActive(tab) {
5001
- return (this.selectedIndex > -1 &&
5002
- this.tabs[this.selectedIndex].value === tab);
5328
+ }
5329
+
5330
+ const createSvgElementFromPath = (params) => {
5331
+ const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
5332
+ svg.setAttributeNS(null, 'height', params.height);
5333
+ svg.setAttributeNS(null, 'width', params.width);
5334
+ svg.setAttributeNS(null, 'viewBox', params.viewbox);
5335
+ svg.setAttributeNS(null, 'aria-hidden', 'false');
5336
+ svg.setAttributeNS(null, 'focusable', 'false');
5337
+ svg.classList.add('dv-svg');
5338
+ const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
5339
+ path.setAttributeNS(null, 'd', params.path);
5340
+ svg.appendChild(path);
5341
+ return svg;
5342
+ };
5343
+ const createCloseButton = () => createSvgElementFromPath({
5344
+ width: '11',
5345
+ height: '11',
5346
+ viewbox: '0 0 28 28',
5347
+ path: 'M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z',
5348
+ });
5349
+ const createExpandMoreButton = () => createSvgElementFromPath({
5350
+ width: '11',
5351
+ height: '11',
5352
+ viewbox: '0 0 24 15',
5353
+ path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
5354
+ });
5355
+ const createChevronRightButton = () => createSvgElementFromPath({
5356
+ width: '11',
5357
+ height: '11',
5358
+ viewbox: '0 0 15 25',
5359
+ path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
5360
+ });
5361
+
5362
+ function createDropdownElementHandle() {
5363
+ const el = document.createElement('div');
5364
+ el.className = 'dv-tabs-overflow-dropdown-default';
5365
+ const text = document.createElement('span');
5366
+ text.textContent = ``;
5367
+ const icon = createChevronRightButton();
5368
+ el.appendChild(icon);
5369
+ el.appendChild(text);
5370
+ return {
5371
+ element: el,
5372
+ update: (params) => {
5373
+ text.textContent = `${params.tabs}`;
5374
+ },
5375
+ };
5376
+ }
5377
+
5378
+ class TabsContainer extends CompositeDisposable {
5379
+ get onTabDragStart() {
5380
+ return this.tabs.onTabDragStart;
5003
5381
  }
5004
- indexOf(id) {
5005
- return this.tabs.findIndex((tab) => tab.value.panel.id === id);
5382
+ get panels() {
5383
+ return this.tabs.panels;
5384
+ }
5385
+ get size() {
5386
+ return this.tabs.size;
5387
+ }
5388
+ get hidden() {
5389
+ return this._hidden;
5390
+ }
5391
+ set hidden(value) {
5392
+ this._hidden = value;
5393
+ this.element.style.display = value ? 'none' : '';
5394
+ }
5395
+ get element() {
5396
+ return this._element;
5006
5397
  }
5007
5398
  constructor(accessor, group) {
5008
5399
  super();
5009
5400
  this.accessor = accessor;
5010
5401
  this.group = group;
5011
- this.tabs = [];
5012
- this.selectedIndex = -1;
5013
5402
  this._hidden = false;
5403
+ this.dropdownPart = null;
5404
+ this._overflowTabs = [];
5405
+ this._dropdownDisposable = new MutableDisposable();
5014
5406
  this._onDrop = new Emitter();
5015
5407
  this.onDrop = this._onDrop.event;
5016
- this._onTabDragStart = new Emitter();
5017
- this.onTabDragStart = this._onTabDragStart.event;
5018
5408
  this._onGroupDragStart = new Emitter();
5019
5409
  this.onGroupDragStart = this._onGroupDragStart.event;
5020
5410
  this._onWillShowOverlay = new Emitter();
@@ -5028,15 +5418,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
5028
5418
  this.leftActionsContainer.className = 'dv-left-actions-container';
5029
5419
  this.preActionsContainer = document.createElement('div');
5030
5420
  this.preActionsContainer.className = 'dv-pre-actions-container';
5031
- this.tabContainer = document.createElement('div');
5032
- this.tabContainer.className = 'dv-tabs-container';
5421
+ this.tabs = new Tabs(group, accessor, {
5422
+ showTabsOverflowControl: !accessor.options.disableTabsOverflowList,
5423
+ });
5033
5424
  this.voidContainer = new VoidContainer(this.accessor, this.group);
5034
5425
  this._element.appendChild(this.preActionsContainer);
5035
- this._element.appendChild(this.tabContainer);
5426
+ this._element.appendChild(this.tabs.element);
5036
5427
  this._element.appendChild(this.leftActionsContainer);
5037
5428
  this._element.appendChild(this.voidContainer.element);
5038
5429
  this._element.appendChild(this.rightActionsContainer);
5039
- this.addDisposables(this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
5430
+ this.addDisposables(accessor.onDidOptionsChange(() => {
5431
+ this.tabs.showTabsOverflowControl =
5432
+ !accessor.options.disableTabsOverflowList;
5433
+ }), this.tabs.onOverflowTabsChange((event) => {
5434
+ this.toggleDropdown(event);
5435
+ }), this.tabs, this._onWillShowOverlay, this._onDrop, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
5040
5436
  this._onGroupDragStart.fire({
5041
5437
  nativeEvent: event,
5042
5438
  group: this.group,
@@ -5044,7 +5440,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
5044
5440
  }), this.voidContainer.onDrop((event) => {
5045
5441
  this._onDrop.fire({
5046
5442
  event: event.nativeEvent,
5047
- index: this.tabs.length,
5443
+ index: this.tabs.size,
5048
5444
  });
5049
5445
  }), this.voidContainer.onWillShowOverlay((event) => {
5050
5446
  this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
@@ -5054,133 +5450,149 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
5054
5450
  group: this.group,
5055
5451
  getData: getPanelData,
5056
5452
  }));
5057
- }), addDisposableListener(this.voidContainer.element, 'pointerdown', (event) => {
5058
- const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
5059
- if (isFloatingGroupsEnabled &&
5060
- event.shiftKey &&
5061
- this.group.api.location.type !== 'floating') {
5062
- event.preventDefault();
5063
- const { top, left } = this.element.getBoundingClientRect();
5064
- const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
5065
- this.accessor.addFloatingGroup(this.group, {
5066
- x: left - rootLeft + 20,
5067
- y: top - rootTop + 20,
5068
- inDragMode: true,
5069
- });
5070
- }
5071
- }), addDisposableListener(this.tabContainer, 'pointerdown', (event) => {
5072
- if (event.defaultPrevented) {
5073
- return;
5074
- }
5075
- const isLeftClick = event.button === 0;
5076
- if (isLeftClick) {
5077
- this.accessor.doSetGroupActive(this.group);
5078
- }
5079
- }));
5080
- }
5081
- setActive(_isGroupActive) {
5082
- // noop
5083
- }
5084
- delete(id) {
5085
- const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
5086
- const tabToRemove = this.tabs.splice(index, 1)[0];
5087
- if (!tabToRemove) {
5088
- throw new Error(`dockview: Tab not found`);
5089
- }
5090
- const { value, disposable } = tabToRemove;
5091
- disposable.dispose();
5092
- value.dispose();
5093
- value.element.remove();
5094
- this.updateClassnames();
5095
- }
5096
- setActivePanel(panel) {
5097
- this.tabs.forEach((tab) => {
5098
- const isActivePanel = panel.id === tab.value.panel.id;
5099
- tab.value.setActive(isActivePanel);
5100
- });
5101
- }
5102
- openPanel(panel, index = this.tabs.length) {
5103
- if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
5104
- return;
5105
- }
5106
- const tab = new Tab(panel, this.accessor, this.group);
5107
- tab.setContent(panel.view.tab);
5108
- const disposable = new CompositeDisposable(tab.onDragStart((event) => {
5109
- this._onTabDragStart.fire({ nativeEvent: event, panel });
5110
- }), tab.onPointerDown((event) => {
5453
+ }), addDisposableListener(this.voidContainer.element, 'pointerdown', (event) => {
5111
5454
  if (event.defaultPrevented) {
5112
5455
  return;
5113
5456
  }
5114
5457
  const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
5115
- const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
5116
- this.size === 1;
5117
5458
  if (isFloatingGroupsEnabled &&
5118
- !isFloatingWithOnePanel &&
5119
- event.shiftKey) {
5459
+ event.shiftKey &&
5460
+ this.group.api.location.type !== 'floating') {
5120
5461
  event.preventDefault();
5121
- const panel = this.accessor.getGroupPanel(tab.panel.id);
5122
- const { top, left } = tab.element.getBoundingClientRect();
5462
+ const { top, left } = this.element.getBoundingClientRect();
5123
5463
  const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
5124
- this.accessor.addFloatingGroup(panel, {
5125
- x: left - rootLeft,
5126
- y: top - rootTop,
5464
+ this.accessor.addFloatingGroup(this.group, {
5465
+ x: left - rootLeft + 20,
5466
+ y: top - rootTop + 20,
5127
5467
  inDragMode: true,
5128
5468
  });
5129
- return;
5130
- }
5131
- switch (event.button) {
5132
- case 0: // left click or touch
5133
- if (this.group.activePanel !== panel) {
5134
- this.group.model.openPanel(panel);
5135
- }
5136
- break;
5137
5469
  }
5138
- }), tab.onDrop((event) => {
5139
- this._onDrop.fire({
5140
- event: event.nativeEvent,
5141
- index: this.tabs.findIndex((x) => x.value === tab),
5142
- });
5143
- }), tab.onWillShowOverlay((event) => {
5144
- this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
5145
- kind: 'tab',
5146
- panel: this.group.activePanel,
5147
- api: this.accessor.api,
5148
- group: this.group,
5149
- getData: getPanelData,
5150
- }));
5151
5470
  }));
5152
- const value = { value: tab, disposable };
5153
- this.addTab(value, index);
5154
5471
  }
5155
- closePanel(panel) {
5156
- this.delete(panel.id);
5472
+ show() {
5473
+ if (!this.hidden) {
5474
+ this.element.style.display = '';
5475
+ }
5157
5476
  }
5158
- dispose() {
5159
- super.dispose();
5160
- for (const { value, disposable } of this.tabs) {
5161
- disposable.dispose();
5162
- value.dispose();
5477
+ hide() {
5478
+ this._element.style.display = 'none';
5479
+ }
5480
+ setRightActionsElement(element) {
5481
+ if (this.rightActions === element) {
5482
+ return;
5483
+ }
5484
+ if (this.rightActions) {
5485
+ this.rightActions.remove();
5486
+ this.rightActions = undefined;
5487
+ }
5488
+ if (element) {
5489
+ this.rightActionsContainer.appendChild(element);
5490
+ this.rightActions = element;
5163
5491
  }
5164
- this.tabs = [];
5165
5492
  }
5166
- addTab(tab, index = this.tabs.length) {
5167
- if (index < 0 || index > this.tabs.length) {
5168
- throw new Error('invalid location');
5493
+ setLeftActionsElement(element) {
5494
+ if (this.leftActions === element) {
5495
+ return;
5169
5496
  }
5170
- this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
5171
- this.tabs = [
5172
- ...this.tabs.slice(0, index),
5173
- tab,
5174
- ...this.tabs.slice(index),
5175
- ];
5176
- if (this.selectedIndex < 0) {
5177
- this.selectedIndex = index;
5497
+ if (this.leftActions) {
5498
+ this.leftActions.remove();
5499
+ this.leftActions = undefined;
5500
+ }
5501
+ if (element) {
5502
+ this.leftActionsContainer.appendChild(element);
5503
+ this.leftActions = element;
5504
+ }
5505
+ }
5506
+ setPrefixActionsElement(element) {
5507
+ if (this.preActions === element) {
5508
+ return;
5509
+ }
5510
+ if (this.preActions) {
5511
+ this.preActions.remove();
5512
+ this.preActions = undefined;
5513
+ }
5514
+ if (element) {
5515
+ this.preActionsContainer.appendChild(element);
5516
+ this.preActions = element;
5178
5517
  }
5518
+ }
5519
+ isActive(tab) {
5520
+ return this.tabs.isActive(tab);
5521
+ }
5522
+ indexOf(id) {
5523
+ return this.tabs.indexOf(id);
5524
+ }
5525
+ setActive(_isGroupActive) {
5526
+ // noop
5527
+ }
5528
+ delete(id) {
5529
+ this.tabs.delete(id);
5530
+ this.updateClassnames();
5531
+ }
5532
+ setActivePanel(panel) {
5533
+ this.tabs.setActivePanel(panel);
5534
+ }
5535
+ openPanel(panel, index = this.tabs.size) {
5536
+ this.tabs.openPanel(panel, index);
5179
5537
  this.updateClassnames();
5180
5538
  }
5539
+ closePanel(panel) {
5540
+ this.delete(panel.id);
5541
+ }
5181
5542
  updateClassnames() {
5182
5543
  toggleClass(this._element, 'dv-single-tab', this.size === 1);
5183
5544
  }
5545
+ toggleDropdown(options) {
5546
+ const tabs = options.reset ? [] : options.tabs;
5547
+ this._overflowTabs = tabs;
5548
+ if (this._overflowTabs.length > 0 && this.dropdownPart) {
5549
+ this.dropdownPart.update({ tabs: tabs.length });
5550
+ return;
5551
+ }
5552
+ if (this._overflowTabs.length === 0) {
5553
+ this._dropdownDisposable.dispose();
5554
+ return;
5555
+ }
5556
+ const root = document.createElement('div');
5557
+ root.className = 'dv-tabs-overflow-dropdown-root';
5558
+ const part = createDropdownElementHandle();
5559
+ part.update({ tabs: tabs.length });
5560
+ this.dropdownPart = part;
5561
+ root.appendChild(part.element);
5562
+ this.rightActionsContainer.prepend(root);
5563
+ this._dropdownDisposable.value = new CompositeDisposable(exports.DockviewDisposable.from(() => {
5564
+ var _a, _b;
5565
+ root.remove();
5566
+ (_b = (_a = this.dropdownPart) === null || _a === void 0 ? void 0 : _a.dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
5567
+ this.dropdownPart = null;
5568
+ }), addDisposableListener(root, 'pointerdown', (event) => {
5569
+ event.preventDefault();
5570
+ }, { capture: true }), addDisposableListener(root, 'click', (event) => {
5571
+ const el = document.createElement('div');
5572
+ el.style.overflow = 'auto';
5573
+ el.className = 'dv-tabs-overflow-container';
5574
+ for (const tab of this.tabs.tabs.filter((tab) => this._overflowTabs.includes(tab.panel.id))) {
5575
+ const panelObject = this.group.panels.find((panel) => panel === tab.panel);
5576
+ const tabComponent = panelObject.view.createTabRenderer('headerOverflow');
5577
+ const child = tabComponent.element;
5578
+ const wrapper = document.createElement('div');
5579
+ toggleClass(wrapper, 'dv-tab', true);
5580
+ toggleClass(wrapper, 'dv-active-tab', panelObject.api.isActive);
5581
+ toggleClass(wrapper, 'dv-inactive-tab', !panelObject.api.isActive);
5582
+ wrapper.addEventListener('mousedown', () => {
5583
+ this.accessor.popupService.close();
5584
+ tab.element.scrollIntoView();
5585
+ tab.panel.api.setActive();
5586
+ });
5587
+ wrapper.appendChild(child);
5588
+ el.appendChild(wrapper);
5589
+ }
5590
+ this.accessor.popupService.openPopover(el, {
5591
+ x: event.clientX,
5592
+ y: event.clientY,
5593
+ });
5594
+ }));
5595
+ }
5184
5596
  }
5185
5597
 
5186
5598
  class DockviewUnhandledDragOverEvent extends AcceptableEvent {
@@ -5210,9 +5622,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
5210
5622
  rootOverlayModel: undefined,
5211
5623
  locked: undefined,
5212
5624
  disableDnd: undefined,
5213
- gap: undefined,
5214
5625
  className: undefined,
5215
5626
  noPanelsOverlay: undefined,
5627
+ dndEdges: undefined,
5628
+ theme: undefined,
5629
+ disableTabsOverflowList: undefined,
5216
5630
  };
5217
5631
  return Object.keys(properties);
5218
5632
  })();
@@ -5391,6 +5805,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
5391
5805
  this._location = { type: 'grid' };
5392
5806
  this.mostRecentlyUsed = [];
5393
5807
  this._overwriteRenderContainer = null;
5808
+ this._overwriteDropTargetContainer = null;
5394
5809
  this._onDidChange = new Emitter();
5395
5810
  this.onDidChange = this._onDidChange.event;
5396
5811
  this._width = 0;
@@ -5468,6 +5883,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
5468
5883
  var _a;
5469
5884
  return ((_a = this._overwriteRenderContainer) !== null && _a !== void 0 ? _a : this.accessor.overlayRenderContainer);
5470
5885
  }
5886
+ set dropTargetContainer(value) {
5887
+ this._overwriteDropTargetContainer = value;
5888
+ }
5889
+ get dropTargetContainer() {
5890
+ var _a;
5891
+ return ((_a = this._overwriteDropTargetContainer) !== null && _a !== void 0 ? _a : this.accessor.rootDropTargetContainer);
5892
+ }
5471
5893
  initialize() {
5472
5894
  if (this.options.panels) {
5473
5895
  this.options.panels.forEach((panel) => {
@@ -5816,6 +6238,25 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
5816
6238
  }
5817
6239
  const data = getPanelData();
5818
6240
  if (data && data.viewId === this.accessor.id) {
6241
+ if (type === 'content') {
6242
+ if (data.groupId === this.id) {
6243
+ // don't allow to drop on self for center position
6244
+ if (position === 'center') {
6245
+ return;
6246
+ }
6247
+ if (data.panelId === null) {
6248
+ // don't allow group move to drop anywhere on self
6249
+ return;
6250
+ }
6251
+ }
6252
+ }
6253
+ if (type === 'header') {
6254
+ if (data.groupId === this.id) {
6255
+ if (data.panelId === null) {
6256
+ return;
6257
+ }
6258
+ }
6259
+ }
5819
6260
  if (data.panelId === null) {
5820
6261
  // this is a group move dnd event
5821
6262
  const { groupId } = data;
@@ -6244,6 +6685,46 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
6244
6685
  }
6245
6686
  }
6246
6687
 
6688
+ const themeDark = {
6689
+ name: 'dark',
6690
+ className: 'dockview-theme-dark',
6691
+ };
6692
+ const themeLight = {
6693
+ name: 'light',
6694
+ className: 'dockview-theme-light',
6695
+ };
6696
+ const themeVisualStudio = {
6697
+ name: 'visualStudio',
6698
+ className: 'dockview-theme-vs',
6699
+ };
6700
+ const themeAbyss = {
6701
+ name: 'abyss',
6702
+ className: 'dockview-theme-abyss',
6703
+ };
6704
+ const themeDracula = {
6705
+ name: 'dracula',
6706
+ className: 'dockview-theme-dracula',
6707
+ };
6708
+ const themeReplit = {
6709
+ name: 'replit',
6710
+ className: 'dockview-theme-replit',
6711
+ gap: 10,
6712
+ };
6713
+ const themeAbyssSpaced = {
6714
+ name: 'abyssSpaced',
6715
+ className: 'dockview-theme-abyss-spaced',
6716
+ gap: 10,
6717
+ dndOverlayMounting: 'absolute',
6718
+ dndPanelOverlay: 'group',
6719
+ };
6720
+ const themeLightSpaced = {
6721
+ name: 'lightSpaced',
6722
+ className: 'dockview-theme-light-spaced',
6723
+ gap: 10,
6724
+ dndOverlayMounting: 'absolute',
6725
+ dndPanelOverlay: 'group',
6726
+ };
6727
+
6247
6728
  class DockviewPanelApiImpl extends GridviewPanelApiImpl {
6248
6729
  get location() {
6249
6730
  return this.group.api.location;
@@ -6518,38 +6999,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
6518
6999
  }
6519
7000
  }
6520
7001
 
6521
- const createSvgElementFromPath = (params) => {
6522
- const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
6523
- svg.setAttributeNS(null, 'height', params.height);
6524
- svg.setAttributeNS(null, 'width', params.width);
6525
- svg.setAttributeNS(null, 'viewBox', params.viewbox);
6526
- svg.setAttributeNS(null, 'aria-hidden', 'false');
6527
- svg.setAttributeNS(null, 'focusable', 'false');
6528
- svg.classList.add('dv-svg');
6529
- const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
6530
- path.setAttributeNS(null, 'd', params.path);
6531
- svg.appendChild(path);
6532
- return svg;
6533
- };
6534
- const createCloseButton = () => createSvgElementFromPath({
6535
- width: '11',
6536
- height: '11',
6537
- viewbox: '0 0 28 28',
6538
- path: 'M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z',
6539
- });
6540
- const createExpandMoreButton = () => createSvgElementFromPath({
6541
- width: '11',
6542
- height: '11',
6543
- viewbox: '0 0 24 15',
6544
- path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
6545
- });
6546
- const createChevronRightButton = () => createSvgElementFromPath({
6547
- width: '11',
6548
- height: '11',
6549
- viewbox: '0 0 15 25',
6550
- path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
6551
- });
6552
-
6553
7002
  class DefaultTab extends CompositeDisposable {
6554
7003
  get element() {
6555
7004
  return this._element;
@@ -6606,12 +7055,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
6606
7055
  this._content = this.createContentComponent(this.id, contentComponent);
6607
7056
  this._tab = this.createTabComponent(this.id, tabComponent);
6608
7057
  }
7058
+ createTabRenderer(tabLocation) {
7059
+ var _a;
7060
+ const cmp = this.createTabComponent(this.id, this.tabComponent);
7061
+ if (this._params) {
7062
+ cmp.init(Object.assign(Object.assign({}, this._params), { tabLocation }));
7063
+ }
7064
+ if (this._updateEvent) {
7065
+ (_a = cmp.update) === null || _a === void 0 ? void 0 : _a.call(cmp, this._updateEvent);
7066
+ }
7067
+ return cmp;
7068
+ }
6609
7069
  init(params) {
7070
+ this._params = params;
6610
7071
  this.content.init(params);
6611
- this.tab.init(params);
6612
- }
6613
- updateParentGroup(_group, _isPanelVisible) {
6614
- // noop
7072
+ this.tab.init(Object.assign(Object.assign({}, params), { tabLocation: 'header' }));
6615
7073
  }
6616
7074
  layout(width, height) {
6617
7075
  var _a, _b;
@@ -6619,6 +7077,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
6619
7077
  }
6620
7078
  update(event) {
6621
7079
  var _a, _b, _c, _d;
7080
+ this._updateEvent = event;
6622
7081
  (_b = (_a = this.content).update) === null || _b === void 0 ? void 0 : _b.call(_a, event);
6623
7082
  (_d = (_c = this.tab).update) === null || _d === void 0 ? void 0 : _d.call(_c, event);
6624
7083
  }
@@ -7456,6 +7915,132 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
7456
7915
  }
7457
7916
  }
7458
7917
 
7918
+ class PopupService extends CompositeDisposable {
7919
+ constructor(root) {
7920
+ super();
7921
+ this.root = root;
7922
+ this._active = null;
7923
+ this._activeDisposable = new MutableDisposable();
7924
+ this._element = document.createElement('div');
7925
+ this._element.className = 'dv-popover-anchor';
7926
+ this._element.style.position = 'relative';
7927
+ this.root.prepend(this._element);
7928
+ this.addDisposables(exports.DockviewDisposable.from(() => {
7929
+ this.close();
7930
+ }), this._activeDisposable);
7931
+ }
7932
+ openPopover(element, position) {
7933
+ this.close();
7934
+ const wrapper = document.createElement('div');
7935
+ wrapper.style.position = 'absolute';
7936
+ wrapper.style.zIndex = '99';
7937
+ wrapper.appendChild(element);
7938
+ const anchorBox = this._element.getBoundingClientRect();
7939
+ const offsetX = anchorBox.left;
7940
+ const offsetY = anchorBox.top;
7941
+ wrapper.style.top = `${position.y - offsetY}px`;
7942
+ wrapper.style.left = `${position.x - offsetX}px`;
7943
+ this._element.appendChild(wrapper);
7944
+ this._active = wrapper;
7945
+ this._activeDisposable.value = new CompositeDisposable(addDisposableWindowListener(window, 'pointerdown', (event) => {
7946
+ var _a;
7947
+ const target = event.target;
7948
+ if (!(target instanceof HTMLElement)) {
7949
+ return;
7950
+ }
7951
+ let el = target;
7952
+ while (el && el !== wrapper) {
7953
+ el = (_a = el === null || el === void 0 ? void 0 : el.parentElement) !== null && _a !== void 0 ? _a : null;
7954
+ }
7955
+ if (el) {
7956
+ return; // clicked within popover
7957
+ }
7958
+ this.close();
7959
+ }));
7960
+ }
7961
+ close() {
7962
+ if (this._active) {
7963
+ this._active.remove();
7964
+ this._activeDisposable.dispose();
7965
+ this._active = null;
7966
+ }
7967
+ }
7968
+ }
7969
+
7970
+ class DropTargetAnchorContainer extends CompositeDisposable {
7971
+ get disabled() {
7972
+ return this._disabled;
7973
+ }
7974
+ set disabled(value) {
7975
+ var _a;
7976
+ if (this.disabled === value) {
7977
+ return;
7978
+ }
7979
+ this._disabled = value;
7980
+ if (value) {
7981
+ (_a = this.model) === null || _a === void 0 ? void 0 : _a.clear();
7982
+ }
7983
+ }
7984
+ get model() {
7985
+ if (this.disabled) {
7986
+ return undefined;
7987
+ }
7988
+ return {
7989
+ clear: () => {
7990
+ var _a;
7991
+ if (this._model) {
7992
+ (_a = this._model.root.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this._model.root);
7993
+ }
7994
+ this._model = undefined;
7995
+ },
7996
+ exists: () => {
7997
+ return !!this._model;
7998
+ },
7999
+ getElements: (event, outline) => {
8000
+ const changed = this._outline !== outline;
8001
+ this._outline = outline;
8002
+ if (this._model) {
8003
+ this._model.changed = changed;
8004
+ return this._model;
8005
+ }
8006
+ const container = this.createContainer();
8007
+ const anchor = this.createAnchor();
8008
+ this._model = { root: container, overlay: anchor, changed };
8009
+ container.appendChild(anchor);
8010
+ this.element.appendChild(container);
8011
+ if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
8012
+ const targetBox = event.target.getBoundingClientRect();
8013
+ const box = this.element.getBoundingClientRect();
8014
+ anchor.style.left = `${targetBox.left - box.left}px`;
8015
+ anchor.style.top = `${targetBox.top - box.top}px`;
8016
+ }
8017
+ return this._model;
8018
+ },
8019
+ };
8020
+ }
8021
+ constructor(element, options) {
8022
+ super();
8023
+ this.element = element;
8024
+ this._disabled = false;
8025
+ this._disabled = options.disabled;
8026
+ this.addDisposables(exports.DockviewDisposable.from(() => {
8027
+ var _a;
8028
+ (_a = this.model) === null || _a === void 0 ? void 0 : _a.clear();
8029
+ }));
8030
+ }
8031
+ createContainer() {
8032
+ const el = document.createElement('div');
8033
+ el.className = 'dv-drop-target-container';
8034
+ return el;
8035
+ }
8036
+ createAnchor() {
8037
+ const el = document.createElement('div');
8038
+ el.className = 'dv-drop-target-anchor';
8039
+ el.style.visibility = 'hidden';
8040
+ return el;
8041
+ }
8042
+ }
8043
+
7459
8044
  const DEFAULT_ROOT_OVERLAY_MODEL = {
7460
8045
  activationSize: { type: 'pixels', value: 10 },
7461
8046
  size: { type: 'pixels', value: 20 },
@@ -7501,14 +8086,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
7501
8086
  get api() {
7502
8087
  return this._api;
7503
8088
  }
7504
- get gap() {
7505
- return this.gridview.margin;
7506
- }
7507
8089
  get floatingGroups() {
7508
8090
  return this._floatingGroups;
7509
8091
  }
7510
8092
  constructor(container, options) {
7511
- var _a;
8093
+ var _a, _b, _c;
7512
8094
  super(container, {
7513
8095
  proportionalLayout: true,
7514
8096
  orientation: exports.Orientation.HORIZONTAL,
@@ -7517,12 +8099,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
7517
8099
  : undefined,
7518
8100
  disableAutoResizing: options.disableAutoResizing,
7519
8101
  locked: options.locked,
7520
- margin: options.gap,
8102
+ margin: (_b = (_a = options.theme) === null || _a === void 0 ? void 0 : _a.gap) !== null && _b !== void 0 ? _b : 0,
7521
8103
  className: options.className,
7522
8104
  });
7523
8105
  this.nextGroupId = sequentialNumberGenerator();
7524
8106
  this._deserializer = new DefaultDockviewDeserialzier(this);
7525
- this.watermark = null;
8107
+ this._watermark = null;
7526
8108
  this._onWillDragPanel = new Emitter();
7527
8109
  this.onWillDragPanel = this._onWillDragPanel.event;
7528
8110
  this._onWillDragGroup = new Emitter();
@@ -7553,16 +8135,22 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
7553
8135
  this.onDidRemoveGroup = this._onDidRemoveGroup.event;
7554
8136
  this._onDidAddGroup = new Emitter();
7555
8137
  this.onDidAddGroup = this._onDidAddGroup.event;
8138
+ this._onDidOptionsChange = new Emitter();
8139
+ this.onDidOptionsChange = this._onDidOptionsChange.event;
7556
8140
  this._onDidActiveGroupChange = new Emitter();
7557
8141
  this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
7558
8142
  this._moving = false;
8143
+ this.popupService = new PopupService(this.element);
8144
+ this.updateDropTargetModel(options);
8145
+ this._themeClassnames = new Classnames(this.element);
8146
+ this.rootDropTargetContainer = new DropTargetAnchorContainer(this.element, { disabled: true });
7559
8147
  this.overlayRenderContainer = new OverlayRenderContainer(this.gridview.element, this);
7560
8148
  toggleClass(this.gridview.element, 'dv-dockview', true);
7561
8149
  toggleClass(this.element, 'dv-debug', !!options.debug);
7562
8150
  if (options.debug) {
7563
8151
  this.addDisposables(new StrictEventsSequencing(this));
7564
8152
  }
7565
- this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
8153
+ this.addDisposables(this.rootDropTargetContainer, this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this._onDidOptionsChange, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
7566
8154
  this.updateWatermark();
7567
8155
  }), this.onDidAdd((event) => {
7568
8156
  if (!this._moving) {
@@ -7596,7 +8184,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
7596
8184
  }
7597
8185
  }));
7598
8186
  this._options = options;
8187
+ this.updateTheme();
7599
8188
  this._rootDropTarget = new Droptarget(this.element, {
8189
+ className: 'dv-drop-target-edge',
7600
8190
  canDisplayOverlay: (event, position) => {
7601
8191
  const data = getPanelData();
7602
8192
  if (data) {
@@ -7623,7 +8213,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
7623
8213
  return firedEvent.isAccepted;
7624
8214
  },
7625
8215
  acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
7626
- overlayModel: (_a = this.options.rootOverlayModel) !== null && _a !== void 0 ? _a : DEFAULT_ROOT_OVERLAY_MODEL,
8216
+ overlayModel: (_c = this.options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL,
8217
+ getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
7627
8218
  });
7628
8219
  this.addDisposables(this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
7629
8220
  if (this.gridview.length > 0 && event.position === 'center') {
@@ -7801,6 +8392,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
7801
8392
  popoutContainer.style.overflow = 'hidden';
7802
8393
  popoutContainer.appendChild(gready);
7803
8394
  popoutContainer.appendChild(group.element);
8395
+ const anchor = document.createElement('div');
8396
+ const dropTargetContainer = new DropTargetAnchorContainer(anchor, { disabled: this.rootDropTargetContainer.disabled });
8397
+ popoutContainer.appendChild(anchor);
8398
+ group.model.dropTargetContainer = dropTargetContainer;
7804
8399
  group.model.location = {
7805
8400
  type: 'popout',
7806
8401
  getWindow: () => _window.window,
@@ -7867,6 +8462,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
7867
8462
  else if (this.getPanel(group.id)) {
7868
8463
  group.model.renderContainer =
7869
8464
  this.overlayRenderContainer;
8465
+ group.model.dropTargetContainer =
8466
+ this.rootDropTargetContainer;
7870
8467
  returnedGroup = group;
7871
8468
  const alreadyRemoved = !this._popoutGroups.find((p) => p.popoutGroup === group);
7872
8469
  if (alreadyRemoved) {
@@ -8087,7 +8684,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
8087
8684
  }
8088
8685
  }
8089
8686
  updateOptions(options) {
8090
- var _a, _b, _c, _d;
8687
+ var _a, _b;
8091
8688
  super.updateOptions(options);
8092
8689
  if ('floatingGroupBounds' in options) {
8093
8690
  for (const group of this._floatingGroups) {
@@ -8111,13 +8708,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
8111
8708
  group.overlay.setBounds();
8112
8709
  }
8113
8710
  }
8114
- if ('rootOverlayModel' in options) {
8115
- this._rootDropTarget.setOverlayModel((_c = options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL);
8116
- }
8117
- if ('gap' in options) {
8118
- this.gridview.margin = (_d = options.gap) !== null && _d !== void 0 ? _d : 0;
8119
- }
8711
+ this.updateDropTargetModel(options);
8120
8712
  this._options = Object.assign(Object.assign({}, this.options), options);
8713
+ if ('theme' in options) {
8714
+ this.updateTheme();
8715
+ }
8121
8716
  this.layout(this.gridview.width, this.gridview.height, true);
8122
8717
  }
8123
8718
  layout(width, height, forceResize) {
@@ -8535,22 +9130,22 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
8535
9130
  updateWatermark() {
8536
9131
  var _a, _b;
8537
9132
  if (this.groups.filter((x) => x.api.location.type === 'grid' && x.api.isVisible).length === 0) {
8538
- if (!this.watermark) {
8539
- this.watermark = this.createWatermarkComponent();
8540
- this.watermark.init({
9133
+ if (!this._watermark) {
9134
+ this._watermark = this.createWatermarkComponent();
9135
+ this._watermark.init({
8541
9136
  containerApi: new DockviewApi(this),
8542
9137
  });
8543
9138
  const watermarkContainer = document.createElement('div');
8544
9139
  watermarkContainer.className = 'dv-watermark-container';
8545
9140
  addTestId(watermarkContainer, 'watermark-component');
8546
- watermarkContainer.appendChild(this.watermark.element);
9141
+ watermarkContainer.appendChild(this._watermark.element);
8547
9142
  this.gridview.element.appendChild(watermarkContainer);
8548
9143
  }
8549
9144
  }
8550
- else if (this.watermark) {
8551
- this.watermark.element.parentElement.remove();
8552
- (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
8553
- this.watermark = null;
9145
+ else if (this._watermark) {
9146
+ this._watermark.element.parentElement.remove();
9147
+ (_b = (_a = this._watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
9148
+ this._watermark = null;
8554
9149
  }
8555
9150
  }
8556
9151
  addGroup(options) {
@@ -9036,6 +9631,38 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
9036
9631
  ? rootOrientation
9037
9632
  : orthogonal(rootOrientation);
9038
9633
  }
9634
+ updateDropTargetModel(options) {
9635
+ if ('dndEdges' in options) {
9636
+ this._rootDropTarget.disabled =
9637
+ typeof options.dndEdges === 'boolean' &&
9638
+ options.dndEdges === false;
9639
+ if (typeof options.dndEdges === 'object' &&
9640
+ options.dndEdges !== null) {
9641
+ this._rootDropTarget.setOverlayModel(options.dndEdges);
9642
+ }
9643
+ else {
9644
+ this._rootDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
9645
+ }
9646
+ }
9647
+ if ('rootOverlayModel' in options) {
9648
+ this.updateDropTargetModel({ dndEdges: options.dndEdges });
9649
+ }
9650
+ }
9651
+ updateTheme() {
9652
+ var _a, _b;
9653
+ const theme = (_a = this._options.theme) !== null && _a !== void 0 ? _a : themeAbyss;
9654
+ this._themeClassnames.setClassNames(theme.className);
9655
+ this.gridview.margin = (_b = theme.gap) !== null && _b !== void 0 ? _b : 0;
9656
+ switch (theme.dndOverlayMounting) {
9657
+ case 'absolute':
9658
+ this.rootDropTargetContainer.disabled = false;
9659
+ break;
9660
+ case 'relative':
9661
+ default:
9662
+ this.rootDropTargetContainer.disabled = true;
9663
+ break;
9664
+ }
9665
+ }
9039
9666
  }
9040
9667
 
9041
9668
  class GridviewComponent extends BaseGrid {
@@ -9559,6 +10186,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
9559
10186
  for (const view of views) {
9560
10187
  view.dispose();
9561
10188
  }
10189
+ this.element.remove();
9562
10190
  super.dispose();
9563
10191
  }
9564
10192
  }
@@ -9899,6 +10527,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
9899
10527
  value.dispose();
9900
10528
  }
9901
10529
  this._viewDisposables.clear();
10530
+ this.element.remove();
9902
10531
  this.paneview.dispose();
9903
10532
  }
9904
10533
  }
@@ -10216,6 +10845,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
10216
10845
  params: parameters.params,
10217
10846
  api: parameters.api,
10218
10847
  containerApi: parameters.containerApi,
10848
+ tabLocation: parameters.tabLocation,
10219
10849
  });
10220
10850
  }
10221
10851
  update(event) {
@@ -10521,7 +11151,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
10521
11151
  });
10522
11152
  DockviewReact.displayName = 'DockviewComponent';
10523
11153
 
10524
- const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
11154
+ const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dv-svg" },
10525
11155
  React.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
10526
11156
 
10527
11157
  var __rest = (undefined && undefined.__rest) || function (s, e) {
@@ -10548,7 +11178,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
10548
11178
  return title;
10549
11179
  }
10550
11180
  const DockviewDefaultTab = (_a) => {
10551
- var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride, onPointerDown, onPointerUp, onPointerLeave } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride", "onPointerDown", "onPointerUp", "onPointerLeave"]);
11181
+ var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride, onPointerDown, onPointerUp, onPointerLeave, tabLocation } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride", "onPointerDown", "onPointerUp", "onPointerLeave", "tabLocation"]);
10552
11182
  const title = useTitle(api);
10553
11183
  const isMiddleMouseButton = React.useRef(false);
10554
11184
  const onClose = React.useCallback((event) => {
@@ -10580,7 +11210,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
10580
11210
  }, [onPointerLeave]);
10581
11211
  return (React.createElement("div", Object.assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onPointerDown: _onPointerDown, onPointerUp: _onPointerUp, onPointerLeave: _onPointerLeave, className: "dv-default-tab" }),
10582
11212
  React.createElement("span", { className: "dv-default-tab-content" }, title),
10583
- !hideClose && (React.createElement("div", { className: "dv-default-tab-action", onPointerDown: onBtnPointerDown, onClick: onClose },
11213
+ !hideClose && tabLocation !== 'headerOverflow' && (React.createElement("div", { className: "dv-default-tab-action", onPointerDown: onBtnPointerDown, onClick: onClose },
10584
11214
  React.createElement(CloseButton, null)))));
10585
11215
  };
10586
11216
 
@@ -10945,6 +11575,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
10945
11575
  exports.isReactComponent = isReactComponent;
10946
11576
  exports.orthogonal = orthogonal;
10947
11577
  exports.positionToDirection = positionToDirection;
11578
+ exports.themeAbyss = themeAbyss;
11579
+ exports.themeAbyssSpaced = themeAbyssSpaced;
11580
+ exports.themeDark = themeDark;
11581
+ exports.themeDracula = themeDracula;
11582
+ exports.themeLight = themeLight;
11583
+ exports.themeLightSpaced = themeLightSpaced;
11584
+ exports.themeReplit = themeReplit;
11585
+ exports.themeVisualStudio = themeVisualStudio;
10948
11586
  exports.toTarget = toTarget;
10949
11587
  exports.usePortalsLifecycle = usePortalsLifecycle;
10950
11588