dockview-react 1.17.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * dockview-react
3
- * @version 1.17.1
3
+ * @version 2.0.0
4
4
  * @link https://github.com/mathuo/dockview
5
5
  * @license MIT
6
6
  */
@@ -37,7 +37,7 @@
37
37
  }
38
38
  }
39
39
 
40
- var css_248z = ".dockview-svg {\n display: inline-block;\n fill: currentcolor;\n line-height: 1;\n stroke: currentcolor;\n stroke-width: 0;\n}\n.dockview-theme-dark {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: white;\n --dv-tabs-and-actions-container-background-color: #f3f3f3;\n --dv-activegroup-visiblepanel-tab-background-color: white;\n --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-inactivegroup-visiblepanel-tab-background-color: white;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-tab-divider-color: white;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n --dv-separator-border: rgba(128, 128, 128, 0.35);\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n --dv-tabs-and-actions-container-background-color: #2d2d30;\n --dv-tabs-and-actions-container-height: 20px;\n --dv-tabs-and-actions-container-font-size: 11px;\n --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: white;\n --dv-inactivegroup-visiblepanel-tab-color: white;\n --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {\n border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {\n border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {\n border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {\n border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: #000c18;\n --dv-tabs-and-actions-container-background-color: #1c1c2a;\n --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n --dv-tab-divider-color: #2b2b4a;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n --dv-separator-border: #2b2b4a;\n --dv-paneview-header-border-color: #2b2b4a;\n --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: #282a36;\n --dv-tabs-and-actions-container-background-color: #191a21;\n --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-tab-divider-color: #191a21;\n --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n --dv-separator-border: #bd93f9;\n --dv-paneview-header-border-color: #bd93f9;\n --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n position: relative;\n}\n.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n position: absolute;\n left: 0px;\n top: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #94527e;\n z-index: 999;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n position: relative;\n}\n.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #5e3d5a;\n z-index: 999;\n}\n\n.dockview-theme-replit {\n --dv-background-color: black;\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-group-view-background-color: #ebeced;\n --dv-tabs-and-actions-container-background-color: #fcfcfc;\n --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n --dv-activegroup-hiddenpanel-tab-background-color: #fcfcfc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n --dv-tab-divider-color: transparent;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n --dv-separator-border: transparent;\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-background-color: #ebeced;\n --dv-separator-handle-background-color: #cfd1d3;\n --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-resize-container:has(> .groupview) {\n border-radius: 8px;\n}\n.dockview-theme-replit .groupview {\n overflow: hidden;\n border-radius: 10px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container {\n border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab {\n margin: 4px;\n border-radius: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab .dockview-svg {\n height: 8px;\n width: 8px;\n}\n.dockview-theme-replit .groupview .tabs-and-actions-container .tab:hover {\n background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .groupview .content-container {\n background-color: #fcfcfc;\n}\n.dockview-theme-replit .groupview.active-group {\n border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .groupview.inactive-group {\n border: 1px solid transparent;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled)::after {\n content: \"\";\n height: 4px;\n width: 40px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-separator-handle-background-color);\n position: absolute;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled):hover::after {\n background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash:not(.disabled)::after {\n content: \"\";\n height: 40px;\n width: 4px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-separator-handle-background-color);\n position: absolute;\n}\n.dockview-theme-replit .horizontal > .sash-container > .sash:not(.disabled):hover::after {\n background-color: var(--dv-separator-handle-hover-background-color);\n}\n.drop-target {\n position: relative;\n}\n.drop-target > .drop-target-dropzone {\n position: absolute;\n left: 0px;\n top: 0px;\n height: 100%;\n width: 100%;\n z-index: 1000;\n pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection {\n position: relative;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n background-color: var(--dv-drag-over-background-color);\n transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n will-change: transform;\n pointer-events: none;\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-dockview {\n position: relative;\n background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n position: absolute;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n position: relative;\n}\n\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {\n background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {\n background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.tab.dv-tab-dragging {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.groupview {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--dv-group-view-background-color);\n overflow: hidden;\n}\n.groupview:focus {\n outline: none;\n}\n.groupview.empty > .tabs-and-actions-container {\n display: none;\n}\n.groupview > .content-container {\n flex-grow: 1;\n min-height: 0;\n outline: none;\n}\n.dv-root-wrapper {\n height: 100%;\n width: 100%;\n}\n.grid-view,\n.branch-node {\n height: 100%;\n width: 100%;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n background-color: cyan;\n}\n\n.dv-resize-container {\n position: absolute;\n z-index: 997;\n border: 1px solid var(--dv-tab-divider-color);\n box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-resize-container-dragging {\n opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n top: -2px;\n z-index: 999;\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n bottom: -2px;\n z-index: 999;\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n height: calc(100% - 8px);\n width: 4px;\n left: -2px;\n top: 4px;\n z-index: 999;\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n height: calc(100% - 8px);\n width: 4px;\n right: -2px;\n top: 4px;\n z-index: 999;\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n height: 4px;\n width: 4px;\n top: -2px;\n left: -2px;\n z-index: 999;\n position: absolute;\n cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n height: 4px;\n width: 4px;\n right: -2px;\n top: -2px;\n z-index: 999;\n position: absolute;\n cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n height: 4px;\n width: 4px;\n left: -2px;\n bottom: -2px;\n z-index: 999;\n position: absolute;\n cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n height: 4px;\n width: 4px;\n right: -2px;\n bottom: -2px;\n z-index: 999;\n position: absolute;\n cursor: se-resize;\n}\n.dv-render-overlay {\n position: absolute;\n z-index: 1;\n height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n z-index: 998;\n}\n.dv-debug .dv-render-overlay {\n outline: 1px solid red;\n outline-offset: -1;\n}\n.pane-container {\n height: 100%;\n width: 100%;\n}\n.pane-container.animated .view {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.pane-container .view {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n padding: 0px !important;\n}\n.pane-container .view:not(:first-child)::before {\n background-color: transparent !important;\n}\n.pane-container .view:not(:first-child) .pane > .pane-header {\n border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.pane-container .view .default-header {\n background-color: var(--dv-group-view-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n display: flex;\n padding: 0px 8px;\n cursor: pointer;\n}\n.pane-container .view .default-header .dockview-pane-header-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.pane-container .view .default-header > span {\n padding-left: 8px;\n flex-grow: 1;\n}\n.pane-container:first-of-type > .pane > .pane-header {\n border-top: none !important;\n}\n.pane-container .pane {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n height: 100%;\n}\n.pane-container .pane .pane-header {\n box-sizing: border-box;\n user-select: none;\n position: relative;\n outline: none;\n}\n.pane-container .pane .pane-header.pane-draggable {\n cursor: pointer;\n}\n.pane-container .pane .pane-header:focus:before, .pane-container .pane .pane-header:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.pane-container .pane .pane-body {\n overflow-y: auto;\n overflow-x: hidden;\n flex-grow: 1;\n position: relative;\n outline: none;\n}\n.pane-container .pane .pane-body:focus:before, .pane-container .pane .pane-body:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .split-view-container .sash-container .sash.enabled {\n background-color: black;\n}\n.dv-debug .split-view-container .sash-container .sash.disabled {\n background-color: orange;\n}\n.dv-debug .split-view-container .sash-container .sash.maximum {\n background-color: green;\n}\n.dv-debug .split-view-container .sash-container .sash.minimum {\n background-color: red;\n}\n\n.split-view-container {\n position: relative;\n overflow: hidden;\n height: 100%;\n width: 100%;\n}\n.split-view-container.dv-splitview-disabled > .sash-container > .sash {\n pointer-events: none;\n}\n.split-view-container.animation .view,\n.split-view-container.animation .sash {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.split-view-container.horizontal {\n height: 100%;\n}\n.split-view-container.horizontal > .sash-container > .sash {\n height: 100%;\n width: 4px;\n}\n.split-view-container.horizontal > .sash-container > .sash.enabled {\n cursor: ew-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.disabled {\n cursor: default;\n}\n.split-view-container.horizontal > .sash-container > .sash.maximum {\n cursor: w-resize;\n}\n.split-view-container.horizontal > .sash-container > .sash.minimum {\n cursor: e-resize;\n}\n.split-view-container.horizontal > .view-container > .view:not(:first-child)::before {\n height: 100%;\n width: 1px;\n}\n.split-view-container.vertical {\n width: 100%;\n}\n.split-view-container.vertical > .sash-container > .sash {\n width: 100%;\n height: 4px;\n}\n.split-view-container.vertical > .sash-container > .sash.enabled {\n cursor: ns-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.disabled {\n cursor: default;\n}\n.split-view-container.vertical > .sash-container > .sash.maximum {\n cursor: n-resize;\n}\n.split-view-container.vertical > .sash-container > .sash.minimum {\n cursor: s-resize;\n}\n.split-view-container.vertical > .view-container > .view {\n width: 100%;\n}\n.split-view-container.vertical > .view-container > .view:not(:first-child)::before {\n height: 1px;\n width: 100%;\n}\n.split-view-container .sash-container {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.split-view-container .sash-container .sash {\n position: absolute;\n z-index: 99;\n outline: none;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n touch-action: none;\n}\n.split-view-container .sash-container .sash:not(.disabled):active {\n transition: background-color 0.1s ease-in-out;\n background-color: var(--dv-active-sash-color, transparent);\n}\n.split-view-container .sash-container .sash:not(.disabled):hover {\n background-color: var(--dv-active-sash-color, transparent);\n transition: background-color 0.1s ease-in-out;\n transition-delay: 0.5s;\n}\n.split-view-container .view-container {\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--dv-background-color);\n}\n.split-view-container .view-container .view {\n height: 100%;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n}\n.split-view-container.separator-border .view:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.tab {\n flex-shrink: 0;\n}\n.tab:focus-within, .tab:focus {\n position: relative;\n}\n.tab:focus-within::after, .tab:focus::after {\n position: absolute;\n content: \"\";\n height: 100%;\n width: 100%;\n top: 0px;\n left: 0px;\n pointer-events: none;\n outline: 1px solid var(--dv-tab-divider-color) !important;\n outline-offset: -1px;\n z-index: 5;\n}\n.tab.dv-tab-dragging .dv-default-tab-action {\n background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.tab.active-tab .dv-default-tab .dv-default-tab-action {\n visibility: visible;\n}\n.tab.inactive-tab .dv-default-tab .dv-default-tab-action {\n visibility: hidden;\n}\n.tab.inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n visibility: visible;\n}\n.tab .dv-default-tab {\n position: relative;\n height: 100%;\n display: flex;\n min-width: 80px;\n align-items: center;\n padding: 0px 8px;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.tab .dv-default-tab .dv-default-tab-content {\n padding: 0px 8px;\n flex-grow: 1;\n}\n.tab .dv-default-tab .dv-default-tab-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n.tab .dv-default-tab .dv-default-tab-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}\n.tabs-and-actions-container {\n display: flex;\n background-color: var(--dv-tabs-and-actions-container-background-color);\n flex-shrink: 0;\n box-sizing: border-box;\n height: var(--dv-tabs-and-actions-container-height);\n font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.tabs-and-actions-container.hidden {\n display: none;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container {\n flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .tabs-container .tab {\n flex-grow: 1;\n}\n.tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .void-container {\n flex-grow: 0;\n}\n.tabs-and-actions-container .void-container {\n display: flex;\n flex-grow: 1;\n cursor: grab;\n}\n.tabs-and-actions-container .tabs-container {\n display: flex;\n overflow-x: overlay;\n overflow-y: hidden;\n scrollbar-width: thin;\n /* Track */\n /* Handle */\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar {\n height: 3px;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.tabs-and-actions-container .tabs-container::-webkit-scrollbar-thumb {\n background: var(--dv-tabs-container-scrollbar-color);\n}\n.tabs-and-actions-container .tabs-container .tab {\n -webkit-user-drag: element;\n outline: none;\n min-width: 75px;\n cursor: pointer;\n position: relative;\n box-sizing: border-box;\n}\n.tabs-and-actions-container .tabs-container .tab:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-tab-divider-color);\n width: 1px;\n height: 100%;\n}\n.watermark {\n display: flex;\n width: 100%;\n}\n.watermark.has-actions .watermark-title .actions-container {\n display: none;\n}\n.watermark .watermark-title {\n height: 35px;\n width: 100%;\n display: flex;\n}\n.watermark .watermark-content {\n flex-grow: 1;\n}\n.watermark .actions-container {\n display: flex;\n align-items: center;\n padding: 0px 8px;\n}\n.watermark .actions-container .close-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n cursor: pointer;\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.watermark .actions-container .close-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}";
40
+ var css_248z = ".dv-svg {\n display: inline-block;\n fill: currentcolor;\n line-height: 1;\n stroke: currentcolor;\n stroke-width: 0;\n}\n.dockview-theme-dark {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n}\n\n.dockview-theme-light {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: white;\n --dv-tabs-and-actions-container-background-color: #f3f3f3;\n --dv-activegroup-visiblepanel-tab-background-color: white;\n --dv-activegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-inactivegroup-visiblepanel-tab-background-color: white;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;\n --dv-tab-divider-color: white;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);\n --dv-separator-border: rgba(128, 128, 128, 0.35);\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n}\n\n.dockview-theme-vs {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #1e1e1e;\n --dv-tabs-and-actions-container-background-color: #252526;\n --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;\n --dv-tab-divider-color: #1e1e1e;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: #969696;\n --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;\n --dv-inactivegroup-hiddenpanel-tab-color: #626262;\n --dv-separator-border: rgb(68, 68, 68);\n --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);\n --dv-tabs-and-actions-container-background-color: #2d2d30;\n --dv-tabs-and-actions-container-height: 20px;\n --dv-tabs-and-actions-container-font-size: 11px;\n --dv-activegroup-visiblepanel-tab-background-color: #007acc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: white;\n --dv-inactivegroup-visiblepanel-tab-color: white;\n --dv-inactivegroup-hiddenpanel-tab-color: white;\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container {\n box-sizing: content-box;\n border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-active-tab {\n border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);\n}\n.dockview-theme-vs .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {\n border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n}\n\n.dockview-theme-abyss {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #000c18;\n --dv-tabs-and-actions-container-background-color: #1c1c2a;\n --dv-activegroup-visiblepanel-tab-background-color: #000c18;\n --dv-activegroup-hiddenpanel-tab-background-color: #10192c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;\n --dv-tab-divider-color: #2b2b4a;\n --dv-activegroup-visiblepanel-tab-color: white;\n --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);\n --dv-separator-border: #2b2b4a;\n --dv-paneview-header-border-color: #2b2b4a;\n --dv-paneview-active-outline-color: #596f99;\n}\n\n.dockview-theme-dracula {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #282a36;\n --dv-tabs-and-actions-container-background-color: #191a21;\n --dv-activegroup-visiblepanel-tab-background-color: #282a36;\n --dv-activegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;\n --dv-tab-divider-color: #191a21;\n --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);\n --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);\n --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);\n --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);\n --dv-separator-border: #bd93f9;\n --dv-paneview-header-border-color: #bd93f9;\n --dv-paneview-active-outline-color: #6272a4;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n top: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #94527e;\n z-index: 999;\n}\n.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n position: relative;\n}\n.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab::after {\n position: absolute;\n left: 0px;\n bottom: 0px;\n content: \"\";\n width: 100%;\n height: 1px;\n background-color: #5e3d5a;\n z-index: 999;\n}\n\n.dockview-theme-replit {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: white;\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);\n --dv-overlay-z-index: 999;\n --dv-group-view-background-color: #ebeced;\n --dv-tabs-and-actions-container-background-color: #fcfcfc;\n --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;\n --dv-activegroup-hiddenpanel-tab-background-color: #fcfcfc;\n --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;\n --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;\n --dv-tab-divider-color: transparent;\n --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-activegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n --dv-inactivegroup-visiblepanel-tab-color: rgb(51, 51, 51);\n --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);\n --dv-separator-border: transparent;\n --dv-paneview-header-border-color: rgb(51, 51, 51);\n --dv-separator-handle-background-color: #cfd1d3;\n --dv-separator-handle-hover-background-color: #babbbb;\n}\n.dockview-theme-replit .dv-resize-container:has(> .dv-groupview) {\n border-radius: 8px;\n}\n.dockview-theme-replit .dv-groupview {\n overflow: hidden;\n border-radius: 10px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container {\n border-bottom: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab {\n margin: 4px;\n border-radius: 8px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab .dv-svg {\n height: 8px;\n width: 8px;\n}\n.dockview-theme-replit .dv-groupview .dv-tabs-and-actions-container .dv-tab:hover {\n background-color: #e4e5e6 !important;\n}\n.dockview-theme-replit .dv-groupview .dv-content-container {\n background-color: #fcfcfc;\n}\n.dockview-theme-replit .dv-groupview.dv-active-group {\n border: 1px solid rgba(128, 128, 128, 0.35);\n}\n.dockview-theme-replit .dv-groupview.dv-inactive-group {\n border: 1px solid transparent;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled)::after {\n content: \"\";\n height: 4px;\n width: 40px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-separator-handle-background-color);\n position: absolute;\n}\n.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled):hover::after {\n background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled)::after {\n content: \"\";\n height: 40px;\n width: 4px;\n border-radius: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: var(--dv-separator-handle-background-color);\n position: absolute;\n}\n.dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover::after {\n background-color: var(--dv-separator-handle-hover-background-color);\n}\n.dv-drop-target {\n position: relative;\n}\n.dv-drop-target > .dv-drop-target-dropzone {\n position: absolute;\n left: 0px;\n top: 0px;\n height: 100%;\n width: 100%;\n z-index: 1000;\n pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection {\n position: relative;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n background-color: var(--dv-drag-over-background-color);\n transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;\n will-change: transform;\n pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n border-right: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-dockview {\n position: relative;\n background-color: var(--dv-group-view-background-color);\n}\n.dv-dockview .dv-watermark-container {\n position: absolute;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n z-index: 1;\n}\n.dv-dockview .dv-overlay-render-container {\n position: relative;\n}\n\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {\n background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);\n color: var(--dv-inactivegroup-visiblepanel-tab-color);\n}\n.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {\n background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);\n color: var(--dv-inactivegroup-hiddenpanel-tab-color);\n}\n\n/**\n * when a tab is dragged we lose the above stylings because they are conditional on parent elements\n * therefore we also set some stylings for the dragging event\n **/\n.dv-tab.dv-tab-dragging {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-groupview {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--dv-group-view-background-color);\n overflow: hidden;\n}\n.dv-groupview:focus {\n outline: none;\n}\n.dv-groupview.dv-empty > .dv-tabs-and-actions-container {\n display: none;\n}\n.dv-groupview > .dv-content-container {\n flex-grow: 1;\n min-height: 0;\n outline: none;\n}\n.dv-root-wrapper {\n height: 100%;\n width: 100%;\n}\n.dv-grid-view,\n.dv-branch-node {\n height: 100%;\n width: 100%;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-top {\n background-color: red;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-bottom {\n background-color: green;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-left {\n background-color: yellow;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-right {\n background-color: blue;\n}\n.dv-debug .dv-resize-container .dv-resize-handle-topleft,\n.dv-debug .dv-resize-container .dv-resize-handle-topright,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomleft,\n.dv-debug .dv-resize-container .dv-resize-handle-bottomright {\n background-color: cyan;\n}\n\n.dv-resize-container {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: calc(var(--dv-overlay-z-index) - 2);\n border: 1px solid var(--dv-tab-divider-color);\n box-shadow: var(--dv-floating-box-shadow);\n}\n.dv-resize-container.dv-resize-container-dragging {\n opacity: 0.5;\n}\n.dv-resize-container .dv-resize-handle-top {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-bottom {\n height: 4px;\n width: calc(100% - 8px);\n left: 4px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ns-resize;\n}\n.dv-resize-container .dv-resize-handle-left {\n height: calc(100% - 8px);\n width: 4px;\n left: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-right {\n height: calc(100% - 8px);\n width: 4px;\n right: -2px;\n top: 4px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ew-resize;\n}\n.dv-resize-container .dv-resize-handle-topleft {\n height: 4px;\n width: 4px;\n top: -2px;\n left: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: nw-resize;\n}\n.dv-resize-container .dv-resize-handle-topright {\n height: 4px;\n width: 4px;\n right: -2px;\n top: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: ne-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomleft {\n height: 4px;\n width: 4px;\n left: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: sw-resize;\n}\n.dv-resize-container .dv-resize-handle-bottomright {\n height: 4px;\n width: 4px;\n right: -2px;\n bottom: -2px;\n z-index: var(--dv-overlay-z-index);\n position: absolute;\n cursor: se-resize;\n}\n.dv-render-overlay {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: 1;\n height: 100%;\n}\n.dv-render-overlay.dv-render-overlay-float {\n z-index: calc(var(--dv-overlay-z-index) - 1);\n}\n\n.dv-debug .dv-render-overlay {\n outline: 1px solid red;\n outline-offset: -1;\n}\n.dv-pane-container {\n height: 100%;\n width: 100%;\n}\n.dv-pane-container.dv-animated .dv-view {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.dv-pane-container .dv-view {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n padding: 0px !important;\n}\n.dv-pane-container .dv-view:not(:first-child)::before {\n background-color: transparent !important;\n}\n.dv-pane-container .dv-view:not(:first-child) .dv-pane > .dv-pane-header {\n border-top: 1px solid var(--dv-paneview-header-border-color);\n}\n.dv-pane-container .dv-view .dv-default-header {\n background-color: var(--dv-group-view-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n display: flex;\n padding: 0px 8px;\n cursor: pointer;\n}\n.dv-pane-container .dv-view .dv-default-header .dv-pane-header-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.dv-pane-container .dv-view .dv-default-header > span {\n padding-left: 8px;\n flex-grow: 1;\n}\n.dv-pane-container:first-of-type > .dv-pane > .dv-pane-header {\n border-top: none !important;\n}\n.dv-pane-container .dv-pane {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n height: 100%;\n}\n.dv-pane-container .dv-pane .dv-pane-header {\n box-sizing: border-box;\n user-select: none;\n position: relative;\n outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-header.dv-pane-draggable {\n cursor: pointer;\n}\n.dv-pane-container .dv-pane .dv-pane-header:focus:before, .dv-pane-container .dv-pane .dv-pane-header:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-pane-container .dv-pane .dv-pane-body {\n overflow-y: auto;\n overflow-x: hidden;\n flex-grow: 1;\n position: relative;\n outline: none;\n}\n.dv-pane-container .dv-pane .dv-pane-body:focus:before, .dv-pane-container .dv-pane .dv-pane-body:focus-within:before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n content: \"\";\n pointer-events: none;\n outline: 1px solid;\n outline-width: -1px;\n outline-style: solid;\n outline-offset: -1px;\n outline-color: var(--dv-paneview-active-outline-color);\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-enabled {\n background-color: black;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-disabled {\n background-color: orange;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-maximum {\n background-color: green;\n}\n.dv-debug .dv-split-view-container .dv-sash-container .dv-sash.dv-minimum {\n background-color: red;\n}\n\n.dv-split-view-container {\n position: relative;\n overflow: hidden;\n height: 100%;\n width: 100%;\n}\n.dv-split-view-container.dv-splitview-disabled > .dv-sash-container > .dv-sash {\n pointer-events: none;\n}\n.dv-split-view-container.dv-animation .dv-view,\n.dv-split-view-container.dv-animation .dv-sash {\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n}\n.dv-split-view-container.dv-horizontal {\n height: 100%;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash {\n height: 100%;\n width: 4px;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ew-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: w-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: e-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 100%;\n width: 1px;\n}\n.dv-split-view-container.dv-vertical {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash {\n width: 100%;\n height: 4px;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ns-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: n-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: s-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 1px;\n width: 100%;\n}\n.dv-split-view-container .dv-sash-container {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.dv-split-view-container .dv-sash-container .dv-sash {\n position: absolute;\n z-index: 99;\n outline: none;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n touch-action: none;\n}\n.dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):active {\n transition: background-color 0.1s ease-in-out;\n background-color: var(--dv-active-sash-color, transparent);\n}\n.dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):hover {\n background-color: var(--dv-active-sash-color, transparent);\n transition: background-color 0.1s ease-in-out;\n transition-delay: 0.5s;\n}\n.dv-split-view-container .dv-view-container {\n position: relative;\n height: 100%;\n width: 100%;\n}\n.dv-split-view-container .dv-view-container .dv-view {\n height: 100%;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n}\n.dv-split-view-container.dv-separator-border .dv-view:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-separator-border);\n}\n.dv-dragged {\n transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */\n}\n\n.dv-tab {\n flex-shrink: 0;\n}\n.dv-tab:focus-within, .dv-tab:focus {\n position: relative;\n}\n.dv-tab:focus-within::after, .dv-tab:focus::after {\n position: absolute;\n content: \"\";\n height: 100%;\n width: 100%;\n top: 0px;\n left: 0px;\n pointer-events: none;\n outline: 1px solid var(--dv-tab-divider-color) !important;\n outline-offset: -1px;\n z-index: 5;\n}\n.dv-tab.dv-tab-dragging .dv-default-tab-action {\n background-color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-tab.dv-active-tab .dv-default-tab .dv-default-tab-action {\n visibility: visible;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {\n visibility: hidden;\n}\n.dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {\n visibility: visible;\n}\n.dv-tab .dv-default-tab {\n position: relative;\n height: 100%;\n display: flex;\n min-width: 80px;\n align-items: center;\n padding: 0px 8px;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.dv-tab .dv-default-tab .dv-default-tab-content {\n padding: 0px 8px;\n flex-grow: 1;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}\n.dv-tabs-and-actions-container {\n display: flex;\n background-color: var(--dv-tabs-and-actions-container-background-color);\n flex-shrink: 0;\n box-sizing: border-box;\n height: var(--dv-tabs-and-actions-container-height);\n font-size: var(--dv-tabs-and-actions-container-font-size);\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container {\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container .dv-tab {\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-void-container {\n flex-grow: 0;\n}\n.dv-tabs-and-actions-container .dv-void-container {\n display: flex;\n flex-grow: 1;\n cursor: grab;\n}\n.dv-tabs-and-actions-container .dv-tabs-container {\n display: flex;\n overflow-x: overlay;\n overflow-y: hidden;\n scrollbar-width: thin;\n /* Track */\n /* Handle */\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar {\n height: 3px;\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-thumb {\n background: var(--dv-tabs-container-scrollbar-color);\n}\n.dv-tabs-and-actions-container .dv-tabs-container .dv-tab {\n -webkit-user-drag: element;\n outline: none;\n min-width: 75px;\n cursor: pointer;\n position: relative;\n box-sizing: border-box;\n}\n.dv-tabs-and-actions-container .dv-tabs-container .dv-tab:not(:first-child)::before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n background-color: var(--dv-tab-divider-color);\n width: 1px;\n height: 100%;\n}\n.dv-watermark {\n display: flex;\n width: 100%;\n}\n.dv-watermark.dv-has-actions .dv-watermark-title .dv-actions-container {\n display: none;\n}\n.dv-watermark .dv-watermark-title {\n height: 35px;\n width: 100%;\n display: flex;\n}\n.dv-watermark .dv-watermark-content {\n flex-grow: 1;\n}\n.dv-watermark .dv-actions-container {\n display: flex;\n align-items: center;\n padding: 0px 8px;\n}\n.dv-watermark .dv-actions-container .dv-close-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n cursor: pointer;\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-watermark .dv-actions-container .dv-close-action:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}";
41
41
  styleInject(css_248z);
42
42
 
43
43
  class TransferObject {
@@ -358,31 +358,6 @@
358
358
  }
359
359
  }
360
360
 
361
- function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
362
- const Component = typeof componentName === 'string'
363
- ? components[componentName]
364
- : undefined;
365
- const FrameworkComponent = typeof componentName === 'string'
366
- ? frameworkComponents[componentName]
367
- : undefined;
368
- if (Component && FrameworkComponent) {
369
- throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
370
- }
371
- if (FrameworkComponent) {
372
- if (!createFrameworkComponent) {
373
- throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
374
- }
375
- return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
376
- }
377
- if (!Component) {
378
- if (fallback) {
379
- return fallback();
380
- }
381
- throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
382
- }
383
- return new Component(id, componentName);
384
- }
385
-
386
361
  function watchElementResize(element, cb) {
387
362
  const observer = new ResizeObserver((entires) => {
388
363
  /**
@@ -851,10 +826,10 @@
851
826
  const tmp = this.size;
852
827
  this.size = this.orthogonalSize;
853
828
  this.orthogonalSize = tmp;
854
- removeClasses(this.element, 'horizontal', 'vertical');
829
+ removeClasses(this.element, 'dv-horizontal', 'dv-vertical');
855
830
  this.element.classList.add(this.orientation == exports.Orientation.HORIZONTAL
856
- ? 'horizontal'
857
- : 'vertical');
831
+ ? 'dv-horizontal'
832
+ : 'dv-vertical');
858
833
  }
859
834
  get minimumSize() {
860
835
  return this.viewItems.reduce((r, item) => r + item.minimumSize, 0);
@@ -1032,11 +1007,11 @@
1032
1007
  }
1033
1008
  style(styles) {
1034
1009
  if ((styles === null || styles === void 0 ? void 0 : styles.separatorBorder) === 'transparent') {
1035
- removeClasses(this.element, 'separator-border');
1010
+ removeClasses(this.element, 'dv-separator-border');
1036
1011
  this.element.style.removeProperty('--dv-separator-border');
1037
1012
  }
1038
1013
  else {
1039
- addClasses(this.element, 'separator-border');
1014
+ addClasses(this.element, 'dv-separator-border');
1040
1015
  if (styles === null || styles === void 0 ? void 0 : styles.separatorBorder) {
1041
1016
  this.element.style.setProperty('--dv-separator-border', styles.separatorBorder);
1042
1017
  }
@@ -1106,7 +1081,7 @@
1106
1081
  }
1107
1082
  addView(view, size = { type: 'distribute' }, index = this.viewItems.length, skipLayout) {
1108
1083
  const container = document.createElement('div');
1109
- container.className = 'view';
1084
+ container.className = 'dv-view';
1110
1085
  container.appendChild(view.element);
1111
1086
  let viewSize;
1112
1087
  if (typeof size === 'number') {
@@ -1138,7 +1113,7 @@
1138
1113
  if (this.viewItems.length > 1) {
1139
1114
  //add sash
1140
1115
  const sash = document.createElement('div');
1141
- sash.className = 'sash';
1116
+ sash.className = 'dv-sash';
1142
1117
  const onPointerStart = (event) => {
1143
1118
  for (const item of this.viewItems) {
1144
1119
  item.enabled = false;
@@ -1397,7 +1372,8 @@
1397
1372
  const offset = i === 0 || visiblePanelsBeforeThisView === 0
1398
1373
  ? 0
1399
1374
  : viewLeftOffsets[i - 1] +
1400
- (visiblePanelsBeforeThisView / sashCount) * marginReducedSize;
1375
+ (visiblePanelsBeforeThisView / sashCount) *
1376
+ marginReducedSize;
1401
1377
  if (i < this.viewItems.length - 1) {
1402
1378
  // calculate sash position
1403
1379
  const newSize = view.visible
@@ -1508,27 +1484,27 @@
1508
1484
  }
1509
1485
  }
1510
1486
  updateSash(sash, state) {
1511
- toggleClass(sash.container, 'disabled', state === exports.SashState.DISABLED);
1512
- toggleClass(sash.container, 'enabled', state === exports.SashState.ENABLED);
1513
- toggleClass(sash.container, 'maximum', state === exports.SashState.MAXIMUM);
1514
- toggleClass(sash.container, 'minimum', state === exports.SashState.MINIMUM);
1487
+ toggleClass(sash.container, 'dv-disabled', state === exports.SashState.DISABLED);
1488
+ toggleClass(sash.container, 'dv-enabled', state === exports.SashState.ENABLED);
1489
+ toggleClass(sash.container, 'dv-maximum', state === exports.SashState.MAXIMUM);
1490
+ toggleClass(sash.container, 'dv-minimum', state === exports.SashState.MINIMUM);
1515
1491
  }
1516
1492
  createViewContainer() {
1517
1493
  const element = document.createElement('div');
1518
- element.className = 'view-container';
1494
+ element.className = 'dv-view-container';
1519
1495
  return element;
1520
1496
  }
1521
1497
  createSashContainer() {
1522
1498
  const element = document.createElement('div');
1523
- element.className = 'sash-container';
1499
+ element.className = 'dv-sash-container';
1524
1500
  return element;
1525
1501
  }
1526
1502
  createContainer() {
1527
1503
  const element = document.createElement('div');
1528
1504
  const orientationClassname = this._orientation === exports.Orientation.HORIZONTAL
1529
- ? 'horizontal'
1530
- : 'vertical';
1531
- element.className = `split-view-container ${orientationClassname}`;
1505
+ ? 'dv-horizontal'
1506
+ : 'dv-vertical';
1507
+ element.className = `dv-split-view-container ${orientationClassname}`;
1532
1508
  return element;
1533
1509
  }
1534
1510
  dispose() {
@@ -1579,7 +1555,7 @@
1579
1555
  this.onDidChange = this._onDidChange.event;
1580
1556
  this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : exports.Orientation.VERTICAL;
1581
1557
  this.element = document.createElement('div');
1582
- this.element.className = 'pane-container';
1558
+ this.element.className = 'dv-pane-container';
1583
1559
  container.appendChild(this.element);
1584
1560
  this.splitview = new Splitview(this.element, {
1585
1561
  orientation: this._orientation,
@@ -1671,10 +1647,10 @@
1671
1647
  clearTimeout(this.animationTimer);
1672
1648
  this.animationTimer = undefined;
1673
1649
  }
1674
- addClasses(this.element, 'animated');
1650
+ addClasses(this.element, 'dv-animated');
1675
1651
  this.animationTimer = setTimeout(() => {
1676
1652
  this.animationTimer = undefined;
1677
- removeClasses(this.element, 'animated');
1653
+ removeClasses(this.element, 'dv-animated');
1678
1654
  }, 200);
1679
1655
  }
1680
1656
  dispose() {
@@ -1899,7 +1875,7 @@
1899
1875
  this._orthogonalSize = orthogonalSize;
1900
1876
  this._size = size;
1901
1877
  this.element = document.createElement('div');
1902
- this.element.className = 'branch-node';
1878
+ this.element.className = 'dv-branch-node';
1903
1879
  if (!childDescriptors) {
1904
1880
  this.splitview = new Splitview(this.element, {
1905
1881
  orientation: this.orientation,
@@ -2110,7 +2086,7 @@
2110
2086
  if (!parentElement) {
2111
2087
  throw new Error('Invalid grid element');
2112
2088
  }
2113
- if (/\bgrid-view\b/.test(parentElement.className)) {
2089
+ if (/\bdv-grid-view\b/.test(parentElement.className)) {
2114
2090
  return [];
2115
2091
  }
2116
2092
  const index = indexInParent(parentElement);
@@ -2458,7 +2434,7 @@
2458
2434
  this._onDidMaximizedNodeChange = new Emitter();
2459
2435
  this.onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event;
2460
2436
  this.element = document.createElement('div');
2461
- this.element.className = 'grid-view';
2437
+ this.element.className = 'dv-grid-view';
2462
2438
  this._locked = locked !== null && locked !== void 0 ? locked : false;
2463
2439
  this._margin = margin !== null && margin !== void 0 ? margin : 0;
2464
2440
  this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this.locked, this.margin);
@@ -3680,7 +3656,7 @@
3680
3656
  * dnd logic. You can see the code at
3681
3657
  * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
3682
3658
  */
3683
- event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
3659
+ event.dataTransfer.setData('text/plain', '');
3684
3660
  }
3685
3661
  }
3686
3662
  }), addDisposableListener(this.el, 'dragend', () => {
@@ -3854,12 +3830,12 @@
3854
3830
  this.markAsUsed(e);
3855
3831
  if (!this.targetElement) {
3856
3832
  this.targetElement = document.createElement('div');
3857
- this.targetElement.className = 'drop-target-dropzone';
3833
+ this.targetElement.className = 'dv-drop-target-dropzone';
3858
3834
  this.overlayElement = document.createElement('div');
3859
- this.overlayElement.className = 'drop-target-selection';
3835
+ this.overlayElement.className = 'dv-drop-target-selection';
3860
3836
  this._state = 'center';
3861
3837
  this.targetElement.appendChild(this.overlayElement);
3862
- this.element.classList.add('drop-target');
3838
+ this.element.classList.add('dv-drop-target');
3863
3839
  this.element.append(this.targetElement);
3864
3840
  }
3865
3841
  this.toggleClasses(quadrant, width, height);
@@ -3997,7 +3973,7 @@
3997
3973
  this.element.removeChild(this.targetElement);
3998
3974
  this.targetElement = undefined;
3999
3975
  this.overlayElement = undefined;
4000
- this.element.classList.remove('drop-target');
3976
+ this.element.classList.remove('dv-drop-target');
4001
3977
  }
4002
3978
  }
4003
3979
  }
@@ -4334,7 +4310,7 @@
4334
4310
  this._headerVisible = isHeaderVisible;
4335
4311
  this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
4336
4312
  this._orientation = orientation;
4337
- this.element.classList.add('pane');
4313
+ this.element.classList.add('dv-pane');
4338
4314
  this.addDisposables(this.api.onWillVisibilityChange((event) => {
4339
4315
  const { isVisible } = event;
4340
4316
  const { accessor } = this._params;
@@ -4431,14 +4407,14 @@
4431
4407
  renderOnce() {
4432
4408
  this.header = document.createElement('div');
4433
4409
  this.header.tabIndex = 0;
4434
- this.header.className = 'pane-header';
4410
+ this.header.className = 'dv-pane-header';
4435
4411
  this.header.style.height = `${this.headerSize}px`;
4436
4412
  this.header.style.lineHeight = `${this.headerSize}px`;
4437
4413
  this.header.style.minHeight = `${this.headerSize}px`;
4438
4414
  this.header.style.maxHeight = `${this.headerSize}px`;
4439
4415
  this.element.appendChild(this.header);
4440
4416
  this.body = document.createElement('div');
4441
- this.body.className = 'pane-body';
4417
+ this.body.className = 'dv-pane-body';
4442
4418
  this.element.appendChild(this.body);
4443
4419
  }
4444
4420
  // TODO slightly hacky by-pass of the component to create a body and header component
@@ -4559,7 +4535,7 @@
4559
4535
  this._onDidBlur = new Emitter();
4560
4536
  this.onDidBlur = this._onDidBlur.event;
4561
4537
  this._element = document.createElement('div');
4562
- this._element.className = 'content-container';
4538
+ this._element.className = 'dv-content-container';
4563
4539
  this._element.tabIndex = -1;
4564
4540
  this.addDisposables(this._onDidFocus, this._onDidBlur);
4565
4541
  this.dropTarget = new Droptarget(this.element, {
@@ -4632,6 +4608,8 @@
4632
4608
  referenceContainer: this,
4633
4609
  });
4634
4610
  break;
4611
+ default:
4612
+ throw new Error(`dockview: invalid renderer type '${panel.api.renderer}'`);
4635
4613
  }
4636
4614
  if (doRender) {
4637
4615
  const focusTracker = trackFocus(container);
@@ -4698,10 +4676,10 @@
4698
4676
  this._onDragStart = new Emitter();
4699
4677
  this.onDragStart = this._onDragStart.event;
4700
4678
  this._element = document.createElement('div');
4701
- this._element.className = 'tab';
4679
+ this._element.className = 'dv-tab';
4702
4680
  this._element.tabIndex = 0;
4703
4681
  this._element.draggable = true;
4704
- toggleClass(this.element, 'inactive-tab', true);
4682
+ toggleClass(this.element, 'dv-inactive-tab', true);
4705
4683
  const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
4706
4684
  this.dropTarget = new Droptarget(this._element, {
4707
4685
  acceptedTargetZones: ['center'],
@@ -4734,8 +4712,8 @@
4734
4712
  }), this.dropTarget);
4735
4713
  }
4736
4714
  setActive(isActive) {
4737
- toggleClass(this.element, 'active-tab', isActive);
4738
- toggleClass(this.element, 'inactive-tab', !isActive);
4715
+ toggleClass(this.element, 'dv-active-tab', isActive);
4716
+ toggleClass(this.element, 'dv-inactive-tab', !isActive);
4739
4717
  }
4740
4718
  setContent(part) {
4741
4719
  if (this.content) {
@@ -4823,7 +4801,7 @@
4823
4801
  this._onDragStart = new Emitter();
4824
4802
  this.onDragStart = this._onDragStart.event;
4825
4803
  this._element = document.createElement('div');
4826
- this._element.className = 'void-container';
4804
+ this._element.className = 'dv-void-container';
4827
4805
  this._element.tabIndex = 0;
4828
4806
  this._element.draggable = true;
4829
4807
  this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
@@ -4943,16 +4921,16 @@
4943
4921
  this._onWillShowOverlay = new Emitter();
4944
4922
  this.onWillShowOverlay = this._onWillShowOverlay.event;
4945
4923
  this._element = document.createElement('div');
4946
- this._element.className = 'tabs-and-actions-container';
4924
+ this._element.className = 'dv-tabs-and-actions-container';
4947
4925
  toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
4948
4926
  this.rightActionsContainer = document.createElement('div');
4949
- this.rightActionsContainer.className = 'right-actions-container';
4927
+ this.rightActionsContainer.className = 'dv-right-actions-container';
4950
4928
  this.leftActionsContainer = document.createElement('div');
4951
- this.leftActionsContainer.className = 'left-actions-container';
4929
+ this.leftActionsContainer.className = 'dv-left-actions-container';
4952
4930
  this.preActionsContainer = document.createElement('div');
4953
- this.preActionsContainer.className = 'pre-actions-container';
4931
+ this.preActionsContainer.className = 'dv-pre-actions-container';
4954
4932
  this.tabContainer = document.createElement('div');
4955
- this.tabContainer.className = 'tabs-container';
4933
+ this.tabContainer.className = 'dv-tabs-container';
4956
4934
  this.voidContainer = new VoidContainer(this.accessor, this.group);
4957
4935
  this._element.appendChild(this.preActionsContainer);
4958
4936
  this._element.appendChild(this.tabContainer);
@@ -5041,14 +5019,10 @@
5041
5019
  });
5042
5020
  }
5043
5021
  openPanel(panel, index = this.tabs.length) {
5044
- var _a;
5045
5022
  if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
5046
5023
  return;
5047
5024
  }
5048
5025
  const tab = new Tab(panel, this.accessor, this.group);
5049
- if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
5050
- throw new Error('invalid header component');
5051
- }
5052
5026
  tab.setContent(panel.view.tab);
5053
5027
  const disposable = new CompositeDisposable(tab.onDragStart((event) => {
5054
5028
  this._onTabDragStart.fire({ nativeEvent: event, panel });
@@ -5238,7 +5212,7 @@
5238
5212
  }
5239
5213
  class DockviewGroupPanelModel extends CompositeDisposable {
5240
5214
  get element() {
5241
- throw new Error('not supported');
5215
+ throw new Error('dockview: not supported');
5242
5216
  }
5243
5217
  get activePanel() {
5244
5218
  return this._activePanel;
@@ -5248,7 +5222,7 @@
5248
5222
  }
5249
5223
  set locked(value) {
5250
5224
  this._locked = value;
5251
- toggleClass(this.container, 'locked-groupview', value === 'no-drop-target' || value);
5225
+ toggleClass(this.container, 'dv-locked-groupview', value === 'no-drop-target' || value);
5252
5226
  }
5253
5227
  get isActive() {
5254
5228
  return this._isGroupActive;
@@ -5319,6 +5293,7 @@
5319
5293
  this._locked = false;
5320
5294
  this._location = { type: 'grid' };
5321
5295
  this.mostRecentlyUsed = [];
5296
+ this._overwriteRenderContainer = null;
5322
5297
  this._onDidChange = new Emitter();
5323
5298
  this.onDidChange = this._onDidChange.event;
5324
5299
  this._width = 0;
@@ -5349,8 +5324,7 @@
5349
5324
  this.onDidActivePanelChange = this._onDidActivePanelChange.event;
5350
5325
  this._onUnhandledDragOverEvent = new Emitter();
5351
5326
  this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
5352
- this._overwriteRenderContainer = null;
5353
- toggleClass(this.container, 'groupview', true);
5327
+ toggleClass(this.container, 'dv-groupview', true);
5354
5328
  this._api = new DockviewApi(this.accessor);
5355
5329
  this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
5356
5330
  this.contentContainer = new ContentContainer(this.accessor, this);
@@ -5595,8 +5569,8 @@
5595
5569
  return;
5596
5570
  }
5597
5571
  this._isGroupActive = isGroupActive;
5598
- toggleClass(this.container, 'active-group', isGroupActive);
5599
- toggleClass(this.container, 'inactive-group', !isGroupActive);
5572
+ toggleClass(this.container, 'dv-active-group', isGroupActive);
5573
+ toggleClass(this.container, 'dv-inactive-group', !isGroupActive);
5600
5574
  this.tabsContainer.setActive(this.isActive);
5601
5575
  if (!this._activePanel && this.panels.length > 0) {
5602
5576
  this.doSetActivePanel(this.panels[0]);
@@ -5688,7 +5662,7 @@
5688
5662
  }
5689
5663
  updateContainer() {
5690
5664
  var _a, _b;
5691
- toggleClass(this.container, 'empty', this.isEmpty);
5665
+ toggleClass(this.container, 'dv-empty', this.isEmpty);
5692
5666
  this.panels.forEach((panel) => panel.runEvents());
5693
5667
  if (this.isEmpty && !this.watermark) {
5694
5668
  const watermark = this.accessor.createWatermarkComponent();
@@ -5829,6 +5803,34 @@
5829
5803
  return this._snap;
5830
5804
  }
5831
5805
  get minimumWidth() {
5806
+ /**
5807
+ * defer to protected function to allow subclasses to override easily.
5808
+ * see https://github.com/microsoft/TypeScript/issues/338
5809
+ */
5810
+ return this.__minimumWidth();
5811
+ }
5812
+ get minimumHeight() {
5813
+ /**
5814
+ * defer to protected function to allow subclasses to override easily.
5815
+ * see https://github.com/microsoft/TypeScript/issues/338
5816
+ */
5817
+ return this.__minimumHeight();
5818
+ }
5819
+ get maximumHeight() {
5820
+ /**
5821
+ * defer to protected function to allow subclasses to override easily.
5822
+ * see https://github.com/microsoft/TypeScript/issues/338
5823
+ */
5824
+ return this.__maximumHeight();
5825
+ }
5826
+ get maximumWidth() {
5827
+ /**
5828
+ * defer to protected function to allow subclasses to override easily.
5829
+ * see https://github.com/microsoft/TypeScript/issues/338
5830
+ */
5831
+ return this.__maximumWidth();
5832
+ }
5833
+ __minimumWidth() {
5832
5834
  const width = typeof this._minimumWidth === 'function'
5833
5835
  ? this._minimumWidth()
5834
5836
  : this._minimumWidth;
@@ -5838,7 +5840,17 @@
5838
5840
  }
5839
5841
  return width;
5840
5842
  }
5841
- get minimumHeight() {
5843
+ __maximumWidth() {
5844
+ const width = typeof this._maximumWidth === 'function'
5845
+ ? this._maximumWidth()
5846
+ : this._maximumWidth;
5847
+ if (width !== this._evaluatedMaximumWidth) {
5848
+ this._evaluatedMaximumWidth = width;
5849
+ this.updateConstraints();
5850
+ }
5851
+ return width;
5852
+ }
5853
+ __minimumHeight() {
5842
5854
  const height = typeof this._minimumHeight === 'function'
5843
5855
  ? this._minimumHeight()
5844
5856
  : this._minimumHeight;
@@ -5848,7 +5860,7 @@
5848
5860
  }
5849
5861
  return height;
5850
5862
  }
5851
- get maximumHeight() {
5863
+ __maximumHeight() {
5852
5864
  const height = typeof this._maximumHeight === 'function'
5853
5865
  ? this._maximumHeight()
5854
5866
  : this._maximumHeight;
@@ -5858,16 +5870,6 @@
5858
5870
  }
5859
5871
  return height;
5860
5872
  }
5861
- get maximumWidth() {
5862
- const width = typeof this._maximumWidth === 'function'
5863
- ? this._maximumWidth()
5864
- : this._maximumWidth;
5865
- if (width !== this._evaluatedMaximumWidth) {
5866
- this._evaluatedMaximumWidth = width;
5867
- this.updateConstraints();
5868
- }
5869
- return width;
5870
- }
5871
5873
  get isActive() {
5872
5874
  return this.api.isActive;
5873
5875
  }
@@ -6018,6 +6020,7 @@
6018
6020
  position: options.group
6019
6021
  ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center'
6020
6022
  : 'center',
6023
+ index: options.index,
6021
6024
  },
6022
6025
  });
6023
6026
  }
@@ -6069,30 +6072,34 @@
6069
6072
  get minimumWidth() {
6070
6073
  var _a;
6071
6074
  const activePanelMinimumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumWidth;
6072
- return typeof activePanelMinimumWidth === 'number'
6073
- ? activePanelMinimumWidth
6074
- : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH;
6075
+ if (typeof activePanelMinimumWidth === 'number') {
6076
+ return activePanelMinimumWidth;
6077
+ }
6078
+ return super.__minimumWidth();
6075
6079
  }
6076
6080
  get minimumHeight() {
6077
6081
  var _a;
6078
6082
  const activePanelMinimumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumHeight;
6079
- return typeof activePanelMinimumHeight === 'number'
6080
- ? activePanelMinimumHeight
6081
- : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT;
6083
+ if (typeof activePanelMinimumHeight === 'number') {
6084
+ return activePanelMinimumHeight;
6085
+ }
6086
+ return super.__minimumHeight();
6082
6087
  }
6083
6088
  get maximumWidth() {
6084
6089
  var _a;
6085
6090
  const activePanelMaximumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumWidth;
6086
- return typeof activePanelMaximumWidth === 'number'
6087
- ? activePanelMaximumWidth
6088
- : Number.MAX_SAFE_INTEGER;
6091
+ if (typeof activePanelMaximumWidth === 'number') {
6092
+ return activePanelMaximumWidth;
6093
+ }
6094
+ return super.__maximumWidth();
6089
6095
  }
6090
6096
  get maximumHeight() {
6091
6097
  var _a;
6092
6098
  const activePanelMaximumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumHeight;
6093
- return typeof activePanelMaximumHeight === 'number'
6094
- ? activePanelMaximumHeight
6095
- : Number.MAX_SAFE_INTEGER;
6099
+ if (typeof activePanelMaximumHeight === 'number') {
6100
+ return activePanelMaximumHeight;
6101
+ }
6102
+ return super.__maximumHeight();
6096
6103
  }
6097
6104
  get panels() {
6098
6105
  return this._model.panels;
@@ -6206,12 +6213,14 @@
6206
6213
  return this.group.api.getWindow();
6207
6214
  }
6208
6215
  moveTo(options) {
6209
- var _a;
6216
+ var _a, _b;
6210
6217
  this.accessor.moveGroupOrPanel({
6211
6218
  from: { groupId: this._group.id, panelId: this.panel.id },
6212
6219
  to: {
6213
- group: options.group,
6214
- position: (_a = options.position) !== null && _a !== void 0 ? _a : 'center',
6220
+ group: (_a = options.group) !== null && _a !== void 0 ? _a : this._group,
6221
+ position: options.group
6222
+ ? (_b = options.position) !== null && _b !== void 0 ? _b : 'center'
6223
+ : 'center',
6215
6224
  index: options.index,
6216
6225
  },
6217
6226
  });
@@ -6430,7 +6439,7 @@
6430
6439
  svg.setAttributeNS(null, 'viewBox', params.viewbox);
6431
6440
  svg.setAttributeNS(null, 'aria-hidden', 'false');
6432
6441
  svg.setAttributeNS(null, 'focusable', 'false');
6433
- svg.classList.add('dockview-svg');
6442
+ svg.classList.add('dv-svg');
6434
6443
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
6435
6444
  path.setAttributeNS(null, 'd', params.path);
6436
6445
  svg.appendChild(path);
@@ -6601,19 +6610,19 @@
6601
6610
  constructor() {
6602
6611
  super();
6603
6612
  this._element = document.createElement('div');
6604
- this._element.className = 'watermark';
6613
+ this._element.className = 'dv-watermark';
6605
6614
  const title = document.createElement('div');
6606
- title.className = 'watermark-title';
6615
+ title.className = 'dv-watermark-title';
6607
6616
  const emptySpace = document.createElement('span');
6608
6617
  emptySpace.style.flexGrow = '1';
6609
6618
  const content = document.createElement('div');
6610
- content.className = 'watermark-content';
6619
+ content.className = 'dv-watermark-content';
6611
6620
  this._element.appendChild(title);
6612
6621
  this._element.appendChild(content);
6613
6622
  const actionsContainer = document.createElement('div');
6614
- actionsContainer.className = 'actions-container';
6623
+ actionsContainer.className = 'dv-actions-container';
6615
6624
  const closeAnchor = document.createElement('div');
6616
- closeAnchor.className = 'close-action';
6625
+ closeAnchor.className = 'dv-close-action';
6617
6626
  closeAnchor.appendChild(createCloseButton());
6618
6627
  actionsContainer.appendChild(closeAnchor);
6619
6628
  title.appendChild(emptySpace);
@@ -6633,11 +6642,10 @@
6633
6642
  }
6634
6643
  render() {
6635
6644
  const isOneGroup = !!(this._api && this._api.size <= 1);
6636
- toggleClass(this.element, 'has-actions', isOneGroup);
6645
+ toggleClass(this.element, 'dv-has-actions', isOneGroup);
6637
6646
  }
6638
6647
  }
6639
6648
 
6640
- const DEFAULT_OVERLAY_Z_INDEX = 999;
6641
6649
  class AriaLevelTracker {
6642
6650
  constructor() {
6643
6651
  this._orderedList = [];
@@ -6656,7 +6664,7 @@
6656
6664
  update() {
6657
6665
  for (let i = 0; i < this._orderedList.length; i++) {
6658
6666
  this._orderedList[i].setAttribute('aria-level', `${i}`);
6659
- this._orderedList[i].style.zIndex = `${DEFAULT_OVERLAY_Z_INDEX + i * 2}`;
6667
+ this._orderedList[i].style.zIndex = `calc(var(--dv-overlay-z-index, 999) + ${i * 2})`;
6660
6668
  }
6661
6669
  }
6662
6670
  }
@@ -7113,7 +7121,7 @@
7113
7121
  const element = floatingGroup.overlay.element;
7114
7122
  const update = () => {
7115
7123
  const level = Number(element.getAttribute('aria-level'));
7116
- focusContainer.style.zIndex = `${DEFAULT_OVERLAY_Z_INDEX + level * 2 + 1}`;
7124
+ focusContainer.style.zIndex = `calc(var(--dv-overlay-z-index, 999) + ${level * 2 + 1})`;
7117
7125
  };
7118
7126
  const observer = new MutationObserver(() => {
7119
7127
  update();
@@ -7245,7 +7253,6 @@
7245
7253
  window: this._window.value,
7246
7254
  });
7247
7255
  this._window.disposable.dispose();
7248
- this._window.value.close();
7249
7256
  this._window = null;
7250
7257
  this._onDidClose.fire();
7251
7258
  }
@@ -7277,7 +7284,9 @@
7277
7284
  }
7278
7285
  const disposable = new CompositeDisposable();
7279
7286
  this._window = { value: externalWindow, disposable };
7280
- disposable.addDisposables(addDisposableWindowListener(window, 'beforeunload', () => {
7287
+ disposable.addDisposables(exports.DockviewDisposable.from(() => {
7288
+ externalWindow.close();
7289
+ }), addDisposableWindowListener(window, 'beforeunload', () => {
7281
7290
  /**
7282
7291
  * before the main window closes we should close this popup too
7283
7292
  * to be good citizens
@@ -7294,7 +7303,7 @@
7294
7303
  id: this.target,
7295
7304
  window: externalWindow,
7296
7305
  });
7297
- return new Promise((resolve) => {
7306
+ return new Promise((resolve, reject) => {
7298
7307
  externalWindow.addEventListener('unload', (e) => {
7299
7308
  // if page fails to load before unloading
7300
7309
  // this.close();
@@ -7303,21 +7312,27 @@
7303
7312
  /**
7304
7313
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
7305
7314
  */
7306
- const externalDocument = externalWindow.document;
7307
- externalDocument.title = document.title;
7308
- externalDocument.body.appendChild(container);
7309
- addStyles(externalDocument, window.document.styleSheets);
7310
- /**
7311
- * beforeunload must be registered after load for reasons I could not determine
7312
- * otherwise the beforeunload event will not fire when the window is closed
7313
- */
7314
- addDisposableWindowListener(externalWindow, 'beforeunload', () => {
7315
+ try {
7316
+ const externalDocument = externalWindow.document;
7317
+ externalDocument.title = document.title;
7318
+ externalDocument.body.appendChild(container);
7319
+ addStyles(externalDocument, window.document.styleSheets);
7315
7320
  /**
7316
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
7321
+ * beforeunload must be registered after load for reasons I could not determine
7322
+ * otherwise the beforeunload event will not fire when the window is closed
7317
7323
  */
7318
- this.close();
7319
- });
7320
- resolve(container);
7324
+ addDisposableWindowListener(externalWindow, 'beforeunload', () => {
7325
+ /**
7326
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
7327
+ */
7328
+ this.close();
7329
+ });
7330
+ resolve(container);
7331
+ }
7332
+ catch (err) {
7333
+ // only except this is the DOM isn't setup. e.g. in a in correctly configured test
7334
+ reject(err);
7335
+ }
7321
7336
  });
7322
7337
  });
7323
7338
  });
@@ -7570,9 +7585,6 @@
7570
7585
  }
7571
7586
  const box = getBox();
7572
7587
  const groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId();
7573
- if (itemToPopout.api.location.type === 'grid') {
7574
- itemToPopout.api.setVisible(false);
7575
- }
7576
7588
  const _window = new PopoutWindow(`${this.id}-${groupId}`, // unique id
7577
7589
  theme !== null && theme !== void 0 ? theme : '', {
7578
7590
  url: (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : '/popout.html',
@@ -7591,11 +7603,11 @@
7591
7603
  .then((popoutContainer) => {
7592
7604
  var _a;
7593
7605
  if (_window.isDisposed) {
7594
- return;
7606
+ return false;
7595
7607
  }
7596
7608
  if (popoutContainer === null) {
7597
7609
  popoutWindowDisposable.dispose();
7598
- return;
7610
+ return false;
7599
7611
  }
7600
7612
  const gready = document.createElement('div');
7601
7613
  gready.className = 'dv-overlay-render-container';
@@ -7604,30 +7616,40 @@
7604
7616
  ? itemToPopout.group
7605
7617
  : itemToPopout;
7606
7618
  const referenceLocation = itemToPopout.api.location.type;
7607
- const group = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) !== null && _a !== void 0 ? _a : this.createGroup({ id: groupId });
7619
+ /**
7620
+ * The group that is being added doesn't already exist within the DOM, the most likely occurance
7621
+ * of this case is when being called from the `fromJSON(...)` method
7622
+ */
7623
+ const isGroupAddedToDom = referenceGroup.element.parentElement !== null;
7624
+ const group = !isGroupAddedToDom
7625
+ ? referenceGroup
7626
+ : (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) !== null && _a !== void 0 ? _a : this.createGroup({ id: groupId });
7608
7627
  group.model.renderContainer = overlayRenderContainer;
7609
- if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup)) {
7628
+ group.layout(_window.window.innerWidth, _window.window.innerHeight);
7629
+ if (!this._groups.has(group.api.id)) {
7610
7630
  this._onDidAddGroup.fire(group);
7611
7631
  }
7612
- if (itemToPopout instanceof DockviewPanel) {
7613
- this.movingLock(() => {
7614
- const panel = referenceGroup.model.removePanel(itemToPopout);
7615
- group.model.openPanel(panel);
7616
- });
7617
- }
7618
- else {
7619
- this.movingLock(() => moveGroupWithoutDestroying({
7620
- from: referenceGroup,
7621
- to: group,
7622
- }));
7623
- switch (referenceLocation) {
7624
- case 'grid':
7625
- referenceGroup.api.setVisible(false);
7626
- break;
7627
- case 'floating':
7628
- case 'popout':
7629
- this.removeGroup(referenceGroup);
7630
- break;
7632
+ if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup) && isGroupAddedToDom) {
7633
+ if (itemToPopout instanceof DockviewPanel) {
7634
+ this.movingLock(() => {
7635
+ const panel = referenceGroup.model.removePanel(itemToPopout);
7636
+ group.model.openPanel(panel);
7637
+ });
7638
+ }
7639
+ else {
7640
+ this.movingLock(() => moveGroupWithoutDestroying({
7641
+ from: referenceGroup,
7642
+ to: group,
7643
+ }));
7644
+ switch (referenceLocation) {
7645
+ case 'grid':
7646
+ referenceGroup.api.setVisible(false);
7647
+ break;
7648
+ case 'floating':
7649
+ case 'popout':
7650
+ this.removeGroup(referenceGroup);
7651
+ break;
7652
+ }
7631
7653
  }
7632
7654
  }
7633
7655
  popoutContainer.classList.add('dv-dockview');
@@ -7638,6 +7660,10 @@
7638
7660
  type: 'popout',
7639
7661
  getWindow: () => _window.window,
7640
7662
  };
7663
+ if (isGroupAddedToDom &&
7664
+ itemToPopout.api.location.type === 'grid') {
7665
+ itemToPopout.api.setVisible(false);
7666
+ }
7641
7667
  this.doSetGroupAndPanelActive(group);
7642
7668
  popoutWindowDisposable.addDisposables(group.api.onDidActiveChange((event) => {
7643
7669
  var _a;
@@ -7652,9 +7678,13 @@
7652
7678
  const value = {
7653
7679
  window: _window,
7654
7680
  popoutGroup: group,
7655
- referenceGroup: this.getPanel(referenceGroup.id)
7656
- ? referenceGroup.id
7657
- : undefined,
7681
+ referenceGroup: !isGroupAddedToDom
7682
+ ? undefined
7683
+ : referenceGroup
7684
+ ? this.getPanel(referenceGroup.id)
7685
+ ? referenceGroup.id
7686
+ : undefined
7687
+ : undefined,
7658
7688
  disposable: {
7659
7689
  dispose: () => {
7660
7690
  popoutWindowDisposable.dispose();
@@ -7669,9 +7699,10 @@
7669
7699
  * window dimensions
7670
7700
  */
7671
7701
  addDisposableWindowListener(_window.window, 'resize', () => {
7672
- group.layout(window.innerWidth, window.innerHeight);
7702
+ group.layout(_window.window.innerWidth, _window.window.innerHeight);
7673
7703
  }), overlayRenderContainer, exports.DockviewDisposable.from(() => {
7674
- if (this.getPanel(referenceGroup.id)) {
7704
+ if (isGroupAddedToDom &&
7705
+ this.getPanel(referenceGroup.id)) {
7675
7706
  this.movingLock(() => moveGroupWithoutDestroying({
7676
7707
  from: group,
7677
7708
  to: referenceGroup,
@@ -7686,21 +7717,27 @@
7686
7717
  }
7687
7718
  }
7688
7719
  else if (this.getPanel(group.id)) {
7689
- const removedGroup = this.doRemoveGroup(group, {
7720
+ this.doRemoveGroup(group, {
7690
7721
  skipDispose: true,
7691
7722
  skipActive: true,
7723
+ skipPopoutReturn: true,
7692
7724
  });
7725
+ const removedGroup = group;
7693
7726
  removedGroup.model.renderContainer =
7694
7727
  this.overlayRenderContainer;
7695
7728
  removedGroup.model.location = { type: 'grid' };
7696
7729
  returnedGroup = removedGroup;
7730
+ this.doAddGroup(removedGroup, [0]);
7731
+ this.doSetGroupAndPanelActive(removedGroup);
7697
7732
  }
7698
7733
  }));
7699
7734
  this._popoutGroups.push(value);
7700
7735
  this.updateWatermark();
7736
+ return true;
7701
7737
  })
7702
7738
  .catch((err) => {
7703
7739
  console.error('dockview: failed to create popout window', err);
7740
+ return false;
7704
7741
  });
7705
7742
  }
7706
7743
  addFloatingGroup(item, options) {
@@ -7804,7 +7841,7 @@
7804
7841
  : (_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
7805
7842
  ? undefined
7806
7843
  : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
7807
- const el = group.element.querySelector('.void-container');
7844
+ const el = group.element.querySelector('.dv-void-container');
7808
7845
  if (!el) {
7809
7846
  throw new Error('failed to find drag handle');
7810
7847
  }
@@ -8087,7 +8124,6 @@
8087
8124
  this.addPopoutGroup((_c = (gridReferenceGroup
8088
8125
  ? this.getPanel(gridReferenceGroup)
8089
8126
  : undefined)) !== null && _c !== void 0 ? _c : group, {
8090
- skipRemoveGroup: true,
8091
8127
  position: position !== null && position !== void 0 ? position : undefined,
8092
8128
  overridePopoutGroup: gridReferenceGroup
8093
8129
  ? group
@@ -8105,6 +8141,7 @@
8105
8141
  }
8106
8142
  }
8107
8143
  catch (err) {
8144
+ console.error('dockview: failed to deserialize layout. Reverting changes', err);
8108
8145
  /**
8109
8146
  * Takes all the successfully created groups and remove all of their panels.
8110
8147
  */
@@ -8172,11 +8209,13 @@
8172
8209
  width: options.initialWidth,
8173
8210
  height: options.initialHeight,
8174
8211
  };
8212
+ let index;
8175
8213
  if (options.position) {
8176
8214
  if (isPanelOptionsWithPanel(options.position)) {
8177
8215
  const referencePanel = typeof options.position.referencePanel === 'string'
8178
8216
  ? this.getGroupPanel(options.position.referencePanel)
8179
8217
  : options.position.referencePanel;
8218
+ index = options.position.index;
8180
8219
  if (!referencePanel) {
8181
8220
  throw new Error(`referencePanel '${options.position.referencePanel}' does not exist`);
8182
8221
  }
@@ -8187,6 +8226,7 @@
8187
8226
  typeof options.position.referenceGroup === 'string'
8188
8227
  ? (_a = this._groups.get(options.position.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
8189
8228
  : options.position.referenceGroup;
8229
+ index = options.position.index;
8190
8230
  if (!referenceGroup) {
8191
8231
  throw new Error(`referenceGroup '${options.position.referenceGroup}' does not exist`);
8192
8232
  }
@@ -8197,6 +8237,7 @@
8197
8237
  group.model.openPanel(panel, {
8198
8238
  skipSetActive: options.inactive,
8199
8239
  skipSetGroupActive: options.inactive,
8240
+ index,
8200
8241
  });
8201
8242
  if (!options.inactive) {
8202
8243
  this.doSetGroupAndPanelActive(group);
@@ -8226,6 +8267,7 @@
8226
8267
  group.model.openPanel(panel, {
8227
8268
  skipSetActive: options.inactive,
8228
8269
  skipSetGroupActive: options.inactive,
8270
+ index,
8229
8271
  });
8230
8272
  }
8231
8273
  else if (referenceGroup.api.location.type === 'floating' ||
@@ -8234,6 +8276,7 @@
8234
8276
  referenceGroup.model.openPanel(panel, {
8235
8277
  skipSetActive: options.inactive,
8236
8278
  skipSetGroupActive: options.inactive,
8279
+ index,
8237
8280
  });
8238
8281
  referenceGroup.api.setSize({
8239
8282
  width: initial === null || initial === void 0 ? void 0 : initial.width,
@@ -8254,6 +8297,7 @@
8254
8297
  group.model.openPanel(panel, {
8255
8298
  skipSetActive: options.inactive,
8256
8299
  skipSetGroupActive: options.inactive,
8300
+ index,
8257
8301
  });
8258
8302
  if (!options.inactive) {
8259
8303
  this.doSetGroupAndPanelActive(group);
@@ -8272,6 +8316,7 @@
8272
8316
  group.model.openPanel(panel, {
8273
8317
  skipSetActive: options.inactive,
8274
8318
  skipSetGroupActive: options.inactive,
8319
+ index,
8275
8320
  });
8276
8321
  }
8277
8322
  else {
@@ -8282,6 +8327,7 @@
8282
8327
  group.model.openPanel(panel, {
8283
8328
  skipSetActive: options.inactive,
8284
8329
  skipSetGroupActive: options.inactive,
8330
+ index,
8285
8331
  });
8286
8332
  if (!options.inactive) {
8287
8333
  this.doSetGroupAndPanelActive(group);
@@ -8822,6 +8868,31 @@
8822
8868
  }
8823
8869
  }
8824
8870
 
8871
+ function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
8872
+ const Component = typeof componentName === 'string'
8873
+ ? components[componentName]
8874
+ : undefined;
8875
+ const FrameworkComponent = typeof componentName === 'string'
8876
+ ? frameworkComponents[componentName]
8877
+ : undefined;
8878
+ if (Component && FrameworkComponent) {
8879
+ throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
8880
+ }
8881
+ if (FrameworkComponent) {
8882
+ if (!createFrameworkComponent) {
8883
+ throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
8884
+ }
8885
+ return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
8886
+ }
8887
+ if (!Component) {
8888
+ if (fallback) {
8889
+ return fallback();
8890
+ }
8891
+ throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
8892
+ }
8893
+ return new Component(id, componentName);
8894
+ }
8895
+
8825
8896
  class GridviewComponent extends BaseGrid {
8826
8897
  get orientation() {
8827
8898
  return this.gridview.orientation;
@@ -9370,12 +9441,14 @@
9370
9441
  this._expandedIcon = createExpandMoreButton();
9371
9442
  this._collapsedIcon = createChevronRightButton();
9372
9443
  this.disposable = new MutableDisposable();
9373
- this.apiRef = { api: null };
9444
+ this.apiRef = {
9445
+ api: null,
9446
+ };
9374
9447
  this._element = document.createElement('div');
9375
- this.element.className = 'default-header';
9448
+ this.element.className = 'dv-default-header';
9376
9449
  this._content = document.createElement('span');
9377
9450
  this._expander = document.createElement('div');
9378
- this._expander.className = 'dockview-pane-header-icon';
9451
+ this._expander.className = 'dv-pane-header-icon';
9379
9452
  this.element.appendChild(this._expander);
9380
9453
  this.element.appendChild(this._content);
9381
9454
  this.addDisposables(addDisposableListener(this._element, 'click', () => {
@@ -10232,22 +10305,6 @@
10232
10305
  disposable.dispose();
10233
10306
  };
10234
10307
  }, [props.onDidDrop]);
10235
- React.useEffect(() => {
10236
- if (!dockviewRef.current) {
10237
- return () => {
10238
- // noop
10239
- };
10240
- }
10241
- const disposable = dockviewRef.current.onUnhandledDragOverEvent((event) => {
10242
- var _a;
10243
- if ((_a = props.showDndOverlay) === null || _a === void 0 ? void 0 : _a.call(props, event)) {
10244
- event.accept();
10245
- }
10246
- });
10247
- return () => {
10248
- disposable.dispose();
10249
- };
10250
- }, [props.showDndOverlay]);
10251
10308
  React.useEffect(() => {
10252
10309
  if (!dockviewRef.current) {
10253
10310
  return () => {
@@ -10665,7 +10722,6 @@
10665
10722
  exports.GridviewComponent = GridviewComponent;
10666
10723
  exports.GridviewPanel = GridviewPanel;
10667
10724
  exports.GridviewReact = GridviewReact;
10668
- exports.LocalSelectionTransfer = LocalSelectionTransfer;
10669
10725
  exports.PROPERTY_KEYS = PROPERTY_KEYS;
10670
10726
  exports.PaneFramework = PaneFramework;
10671
10727
  exports.PaneTransfer = PaneTransfer;
@@ -10684,7 +10740,6 @@
10684
10740
  exports.SplitviewReact = SplitviewReact;
10685
10741
  exports.Tab = Tab;
10686
10742
  exports.WillShowOverlayLocationEvent = WillShowOverlayLocationEvent;
10687
- exports.createComponent = createComponent;
10688
10743
  exports.createDockview = createDockview;
10689
10744
  exports.createGridview = createGridview;
10690
10745
  exports.createPaneview = createPaneview;