dockview
Version:
Docking layout manager — tabs, groups, grids, splitviews, drag and drop, floating panels
17 lines (16 loc) • 898 kB
JavaScript
/**
* dockview
* @version 8.0.0
* @link https://github.com/dockview/dockview
* @license MIT
*/
(function(global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.dockview = {})));
})(this, function(exports) {
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
//#region \0cssinject:/home/runner/work/dockview/dockview/packages/dockview/dist/styles/dockview.css.mjs
if (typeof document !== "undefined") {
const s = document.createElement("style");
s.textContent = ".dv-drop-target-container {\n position: absolute;\n z-index: 9999;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n pointer-events: none;\n overflow: hidden;\n --dv-transition-duration: 300ms;\n}\n.dv-drop-target-container .dv-drop-target-anchor {\n position: relative;\n border: var(--dv-drag-over-border);\n background-color: var(--dv-drag-over-background-color);\n opacity: 1;\n /* GPU optimizations */\n will-change: transform, opacity;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n contain: layout paint;\n transition: opacity var(--dv-transition-duration) ease-in, top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out;\n}\n.dv-drop-target {\n position: relative;\n --dv-transition-duration: 70ms;\n}\n.dv-drop-target > .dv-drop-target-dropzone {\n position: absolute;\n left: 0px;\n top: 0px;\n height: 100%;\n width: 100%;\n z-index: 1000;\n pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection {\n position: relative;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n border: var(--dv-drag-over-border);\n background-color: var(--dv-drag-over-background-color);\n transition: top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out, opacity var(--dv-transition-duration) ease-out;\n will-change: transform;\n pointer-events: none;\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {\n border-top: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {\n border-bottom: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {\n border-left: 1px solid var(--dv-drag-over-border-color);\n}\n.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {\n border-right: 1px solid var(--dv-drag-over-border-color);\n}\n\n.dv-dnd-compass {\n z-index: 1001;\n}\n\n.dv-dnd-compass-cell {\n box-sizing: border-box;\n border-radius: 2px;\n border: 1px solid var(--dv-dnd-compass-color, #1f9cf0);\n background-color: var(--dv-dnd-compass-cell-color, rgba(31, 156, 240, 0.25));\n}\n\n.dv-dnd-compass-cell-edge {\n border-style: dashed;\n background-color: var(--dv-dnd-compass-edge-cell-color, rgba(31, 156, 240, 0.12));\n}\n\n.dv-dnd-compass-cell-active {\n background-color: var(--dv-dnd-compass-active-cell-color, rgba(31, 156, 240, 0.5));\n border-style: solid;\n}\n\n.dv-dnd-compass-edge-preview {\n z-index: 1000;\n box-sizing: border-box;\n background-color: var(--dv-drag-over-background-color);\n border: var(--dv-drag-over-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/* Applied to the ghost tab clone during drag so it shows the same border as a focused tab */\n.dv-tab-ghost-drag {\n position: relative;\n}\n.dv-tab-ghost-drag::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\n.dv-tab {\n flex-shrink: 0;\n}\n.dv-tab:focus-visible, .dv-tab:has(:focus-visible) {\n position: relative;\n}\n.dv-tab:focus-visible::after, .dv-tab:has(:focus-visible)::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@media (hover: none) {\n .dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {\n visibility: visible;\n }\n}\n.dv-tab .dv-default-tab {\n position: relative;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.dv-tab .dv-default-tab .dv-default-tab-content {\n flex-grow: 1;\n margin-right: 4px;\n}\n.dv-tab .dv-default-tab .dv-default-tab-action {\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n border: none;\n background: none;\n color: inherit;\n font: inherit;\n cursor: pointer;\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@media (pointer: coarse) {\n .dv-tab .dv-default-tab .dv-default-tab-action {\n padding: 8px;\n }\n}\n.dv-tabs-overflow-dropdown-default {\n height: 100%;\n box-sizing: border-box;\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n margin: var(--dv-tab-margin);\n display: flex;\n align-items: center;\n flex-shrink: 0;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n}\n.dv-tabs-overflow-dropdown-default > span {\n padding-left: 0.25rem;\n}\n.dv-tabs-overflow-dropdown-default > svg {\n transform: rotate(90deg);\n}\n.dv-tabs-overflow-dropdown-default:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}\n.dv-tabs-container {\n display: flex;\n position: relative;\n height: 100%;\n overflow: auto;\n scrollbar-width: thin;\n /**\n * Multi-row (wrapping) tabs. Inert until the `MultiRowTabsModule` toggles\n * `.dv-tabs-container--wrap` on this element (`overflow.mode: 'wrap'`):\n * tabs wrap onto multiple rows instead of clipping into the dropdown, and\n * the strip grows to fit (the header grows via the `:has()` rule in\n * tabsContainer.scss; the free header-aware content-sizing seam then shrinks\n * the content area to match). Restricted to horizontal headers in v1.\n */\n}\n.dv-tabs-container.dv-tabs-container--wrap:not(.dv-tabs-container-vertical) {\n flex-wrap: wrap;\n height: auto;\n overflow: visible;\n align-content: flex-start;\n}\n.dv-tabs-container.dv-tabs-container--wrap:not(.dv-tabs-container-vertical) .dv-tab {\n height: var(--dv-tabs-and-actions-container-height);\n}\n.dv-tabs-container.dv-tabs-container--wrap:not(.dv-tabs-container-vertical).dv-tabs-container--wrap-capped {\n max-height: calc(var(--dv-tabs-and-actions-container-height) * var(--dv-max-tab-rows));\n overflow: hidden;\n}\n.dv-tabs-container.dv-tabs-container--wrap:not(.dv-tabs-container-vertical) .dv-tab--reorder-before::after,\n.dv-tabs-container.dv-tabs-container--wrap:not(.dv-tabs-container-vertical) .dv-tab--reorder-after::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n width: 2px;\n z-index: 10;\n pointer-events: none;\n background-color: var(--dv-drag-over-border-color);\n}\n.dv-tabs-container.dv-tabs-container--wrap:not(.dv-tabs-container-vertical) .dv-tab--reorder-before::after {\n left: 0;\n}\n.dv-tabs-container.dv-tabs-container--wrap:not(.dv-tabs-container-vertical) .dv-tab--reorder-after::after {\n right: 0;\n}\n.dv-tabs-container {\n /**\n * Multi-column (wrapping) tabs for a vertical (edge-group) header: the\n * mirror of the horizontal rule above with the axes swapped. The main axis\n * is vertical (bounded by the header height, so overflowing tabs wrap) and\n * the cross axis is horizontal (grows into additional columns). The header\n * grows in width via the `:has()` rule in tabsContainer.scss.\n *\n * Column flow direction under `writing-mode: vertical-rl` differs\n * between left and right header positions; this needs visual verification\n * in a real browser (jsdom lays out neither writing-mode nor flex-wrap).\n */\n}\n.dv-tabs-container.dv-tabs-container--wrap.dv-tabs-container-vertical {\n flex-wrap: wrap;\n width: auto;\n height: 100%;\n max-height: 100%;\n overflow: visible;\n align-content: flex-start;\n}\n.dv-tabs-container.dv-tabs-container--wrap.dv-tabs-container-vertical .dv-tab {\n width: var(--dv-tabs-and-actions-container-height);\n height: var(--dv-wrap-vertical-tab-height, auto);\n}\n.dv-tabs-container.dv-tabs-container--wrap.dv-tabs-container-vertical.dv-tabs-container--wrap-capped {\n max-width: calc(var(--dv-tabs-and-actions-container-height) * var(--dv-max-tab-rows));\n overflow: hidden;\n}\n.dv-tabs-container.dv-tabs-container--wrap.dv-tabs-container-vertical .dv-tab--reorder-before::after,\n.dv-tabs-container.dv-tabs-container--wrap.dv-tabs-container-vertical .dv-tab--reorder-after::after {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n height: 2px;\n z-index: 10;\n pointer-events: none;\n background-color: var(--dv-drag-over-border-color);\n}\n.dv-tabs-container.dv-tabs-container--wrap.dv-tabs-container-vertical .dv-tab--reorder-before::after {\n top: 0;\n}\n.dv-tabs-container.dv-tabs-container--wrap.dv-tabs-container-vertical .dv-tab--reorder-after::after {\n bottom: 0;\n}\n.dv-tabs-container {\n /* GPU optimizations for smooth scrolling */\n will-change: scroll-position;\n transform: translate3d(0, 0, 0);\n /**\n * Stop scroll-chaining at the tab strip so that wheel / trackpad\n * overscroll past the strip's edges doesn't trigger the browser's\n * swipe-to-go-back-or-forward gesture (and doesn't scroll the page\n * either). `contain` keeps the native bounce visuals; `none` would\n * also disable them.\n */\n overscroll-behavior: contain;\n /**\n * Empty space between tabs (and the scrollbar lane) keeps pan-x so a\n * flick on those areas produces native momentum scroll. The tab and\n * chip elements themselves opt out (`touch-action: none`) so the\n * pointer drag source owns the gesture from pointerdown - a flick on\n * a tab or chip always becomes a drag, regardless of direction.\n */\n touch-action: pan-x;\n}\n.dv-tabs-container.dv-tabs-container-vertical {\n width: 100%;\n height: fit-content;\n max-height: 100%;\n writing-mode: vertical-rl;\n touch-action: pan-y;\n}\n.dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before, .dv-tabs-container.dv-vertical .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}\n.dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before {\n width: 1px;\n height: 100%;\n}\n.dv-tabs-container.dv-vertical .dv-tab:not(:first-child)::before {\n width: 100%;\n height: 1px;\n}\n.dv-tabs-container::-webkit-scrollbar {\n height: 3px;\n}\n.dv-tabs-container {\n /* Track */\n}\n.dv-tabs-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.dv-tabs-container {\n /* Handle */\n}\n.dv-tabs-container::-webkit-scrollbar-thumb {\n background: var(--dv-tabs-container-scrollbar-color);\n}\n\n.dv-scrollable > .dv-tabs-container {\n overflow: hidden;\n}\n\n.dv-tab {\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n outline: none;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n position: relative;\n box-sizing: border-box;\n font-size: var(--dv-tab-font-size);\n margin: var(--dv-tab-margin);\n touch-action: none;\n}\n.dv-tab.dv-tab--shifting {\n will-change: transform, margin-left, margin-right, margin-top, margin-bottom;\n transition: transform var(--dv-transition-duration, 200ms) ease-out, margin-left var(--dv-transition-duration, 200ms) ease-out, margin-right var(--dv-transition-duration, 200ms) ease-out, margin-top var(--dv-transition-duration, 200ms) ease-out, margin-bottom var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tab.dv-tab--dragging {\n width: 0 !important;\n min-width: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n overflow: hidden;\n opacity: 0;\n pointer-events: none;\n transition: width var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tab.dv-tab--group-collapsed {\n width: 0 !important;\n min-width: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n overflow: hidden;\n opacity: 0;\n pointer-events: none;\n transition: width var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tab.dv-tab--group-expanding {\n transition: width var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n\n.dv-tab.dv-tab--pinned:has(.dv-tab-pin) {\n display: flex;\n align-items: center;\n}\n.dv-tab.dv-tab--pinned .dv-tab-pin {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n margin-right: 4px;\n opacity: 0.7;\n pointer-events: none;\n}\n.dv-tab.dv-tab--pinned .dv-tab-pin .dv-svg {\n width: 11px;\n height: 11px;\n}\n.dv-tab.dv-tab--pinned .dv-default-tab {\n min-width: 0;\n}\n.dv-tab.dv-tab--pinned .dv-default-tab-action {\n display: none;\n}\n\n.dv-tab.dv-tab--pinned-compact .dv-default-tab-content {\n display: none;\n}\n.dv-tab.dv-tab--pinned-compact .dv-tab-pin {\n margin-right: 0;\n}\n\n.dv-tabs-container:not(.dv-tabs-container--wrap):not(.dv-tabs-container-vertical) > .dv-tab.dv-tab--pinned-sticky {\n position: sticky;\n left: var(--dv-pinned-sticky-left, 0);\n z-index: 2;\n}\n\n.dv-tabs-and-actions-container.dv-tabs-and-actions-container--pinned-row {\n flex-wrap: wrap;\n height: auto;\n min-height: var(--dv-tabs-and-actions-container-height);\n align-content: flex-start;\n}\n.dv-tabs-and-actions-container.dv-tabs-and-actions-container--pinned-row .dv-pinned-row {\n flex: 0 0 100%;\n order: -1;\n}\n.dv-tabs-and-actions-container.dv-tabs-and-actions-container--pinned-row .dv-tab.dv-tab--pinned {\n display: none;\n}\n\n.dv-pinned-row {\n display: flex;\n align-items: center;\n gap: 2px;\n box-sizing: border-box;\n width: 100%;\n min-height: var(--dv-tabs-and-actions-container-height);\n padding: 2px 4px;\n background-color: var(--dv-tabs-and-actions-container-background-color);\n border-bottom: 1px solid var(--dv-tab-divider-color);\n}\n\n.dv-pinned-tab {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n box-sizing: border-box;\n padding: 0.25rem 0.5rem;\n font-size: var(--dv-tab-font-size);\n cursor: pointer;\n user-select: none;\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-pinned-tab.dv-pinned-tab--active {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-pinned-tab .dv-pinned-tab-label {\n max-width: 120px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.dv-pinned-tab .dv-pinned-tab-unpin {\n flex-shrink: 0;\n opacity: 0.6;\n}\n.dv-pinned-tab .dv-pinned-tab-unpin:hover {\n opacity: 1;\n}\n.dv-pinned-tab.dv-pinned-tab--dragging {\n opacity: 0.5;\n}\n.dv-pinned-tab.dv-pinned-tab--drop-before, .dv-pinned-tab.dv-pinned-tab--drop-after {\n position: relative;\n}\n.dv-pinned-tab.dv-pinned-tab--drop-before::after, .dv-pinned-tab.dv-pinned-tab--drop-after::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n width: 2px;\n z-index: 10;\n pointer-events: none;\n background-color: var(--dv-drag-over-border-color);\n}\n.dv-pinned-tab.dv-pinned-tab--drop-before::after {\n left: 0;\n}\n.dv-pinned-tab.dv-pinned-tab--drop-after::after {\n right: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .dv-tab {\n transition: none !important;\n }\n .dv-tab-group-chip {\n transition: none !important;\n }\n}\n.dv-tab-group-chip {\n display: inline-flex;\n align-items: center;\n align-self: center;\n padding: var(--dv-tab-group-chip-padding);\n margin: 0 8px 0 8px;\n border-radius: var(--dv-tab-group-chip-border-radius);\n font-size: var(--dv-tab-group-chip-font-size);\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n box-sizing: border-box;\n line-height: 1;\n touch-action: none;\n background-color: var(--dv-tab-group-color);\n color: white;\n}\n.dv-tab-group-chip.dv-tab-group-chip--accent-off {\n background-color: transparent;\n color: inherit;\n}\n.dv-tab-group-chip.dv-tab-group-chip--shifting {\n will-change: margin-left;\n transition: margin-left var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tab-group-chip.dv-tab-group-chip--dragging {\n width: 0 !important;\n min-width: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n overflow: hidden;\n opacity: 0;\n pointer-events: none;\n transition: width var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tab-group-chip .dv-tab-group-chip-label--empty {\n display: none;\n}\n.dv-tab-group-chip:has(.dv-tab-group-chip-label--empty) {\n position: relative;\n width: 12px;\n height: 12px;\n padding: 0;\n border-radius: 50%;\n}\n.dv-tab-group-chip:has(.dv-tab-group-chip-label--empty)::before {\n content: \"\";\n position: absolute;\n inset: -8px;\n}\n\n.dv-tab-group-underline {\n position: absolute;\n bottom: 0;\n opacity: var(--dv-tab-group-line-opacity);\n pointer-events: none;\n z-index: 10;\n}\n\n.dv-tab-group-chip-continuation {\n position: absolute;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n opacity: var(--dv-tab-group-line-opacity);\n pointer-events: none;\n z-index: 10;\n}\n\n.dv-groupview-header-bottom .dv-tab-group-underline {\n bottom: auto;\n top: 0;\n}\n\n.dv-tabs-container-vertical .dv-tab-group-underline {\n bottom: auto;\n left: 0;\n}\n\n.dv-tabs-container-vertical .dv-tab-group-chip {\n margin: 8px 0 8px 0;\n}\n.dv-tabs-container-vertical .dv-tab {\n padding: 0.5rem 0.25rem;\n}\n.dv-tabs-container-vertical .dv-tab.dv-tab--group-collapsed {\n height: 0 !important;\n min-height: 0 !important;\n width: auto !important;\n min-width: initial !important;\n transition: height var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tabs-container-vertical .dv-tab.dv-tab--group-expanding {\n transition: height var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n.dv-tabs-container-vertical .dv-tab.dv-tab--dragging {\n height: 0 !important;\n min-height: 0 !important;\n width: auto !important;\n min-width: initial !important;\n transition: height var(--dv-transition-duration, 200ms) ease-out, padding var(--dv-transition-duration, 200ms) ease-out, margin var(--dv-transition-duration, 200ms) ease-out, opacity var(--dv-transition-duration, 200ms) ease-out;\n}\n\n.dv-tabs-overflow-container {\n flex-direction: column;\n height: unset;\n font-size: var(--dv-tabs-and-actions-container-font-size);\n max-height: min(50vh, 400px);\n overflow-y: auto;\n border: 1px solid var(--dv-tab-divider-color);\n background-color: var(--dv-group-view-background-color);\n /* Scrollbar styling for webkit browsers */\n}\n.dv-tabs-overflow-container::-webkit-scrollbar {\n width: 6px;\n}\n.dv-tabs-overflow-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.dv-tabs-overflow-container::-webkit-scrollbar-thumb {\n background: var(--dv-tabs-container-scrollbar-color);\n border-radius: 3px;\n}\n.dv-tabs-overflow-container {\n /* Firefox scrollbar */\n scrollbar-width: thin;\n}\n.dv-tabs-overflow-container .dv-tab:not(:last-child) {\n border-bottom: 1px solid var(--dv-tab-divider-color);\n}\n.dv-tabs-overflow-container .dv-active-tab {\n background-color: var(--dv-activegroup-visiblepanel-tab-background-color);\n color: var(--dv-activegroup-visiblepanel-tab-color);\n}\n.dv-tabs-overflow-container .dv-inactive-tab {\n background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-group-header {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n font-size: 0.8em;\n font-weight: 600;\n color: var(--dv-activegroup-hiddenpanel-tab-color);\n cursor: pointer;\n border-bottom: 1px solid var(--dv-tab-divider-color);\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-group-header:hover {\n background-color: var(--dv-icon-hover-background-color);\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-group-color {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n background-color: var(--dv-tab-group-color);\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-group-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-group-collapsed-badge {\n font-size: 0.75em;\n font-weight: 400;\n opacity: 0.7;\n padding: 1px 4px;\n border-radius: 3px;\n background-color: var(--dv-tab-divider-color);\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-pinned-header {\n cursor: default;\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-pinned-header:hover {\n background-color: transparent;\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-pinned-header .dv-tabs-overflow-pinned-icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n opacity: 0.7;\n}\n.dv-tabs-overflow-container .dv-tabs-overflow-pinned-header .dv-tabs-overflow-pinned-icon .dv-svg {\n width: 11px;\n height: 11px;\n}\n.dv-tabs-overflow-container .dv-tab.dv-tab--grouped {\n padding-left: 16px;\n}\n\n/*\n * Advanced overflow popover (AdvancedOverflowModule): the same container as the\n * free list, upgraded in place with a search input, a scrollable listbox, and a\n * keyboard-highlighted active row. Styles live in core so the module ships no\n * CSS; they are inert unless the module renders this body.\n */\n.dv-tabs-overflow-container.dv-tabs-overflow-advanced {\n min-width: 220px;\n}\n.dv-tabs-overflow-container.dv-tabs-overflow-advanced .dv-tabs-overflow-search {\n box-sizing: border-box;\n width: 100%;\n padding: 6px 8px;\n border: none;\n border-bottom: 1px solid var(--dv-tab-divider-color);\n outline: none;\n font-size: inherit;\n font-family: inherit;\n color: var(--dv-activegroup-visiblepanel-tab-color);\n background-color: var(--dv-group-view-background-color);\n}\n.dv-tabs-overflow-container.dv-tabs-overflow-advanced .dv-tabs-overflow-list {\n display: flex;\n flex-direction: column;\n outline: none;\n}\n.dv-tabs-overflow-container.dv-tabs-overflow-advanced .dv-tab.dv-tabs-overflow-option--focused {\n outline: 1px solid var(--dv-tab-divider-color);\n outline-offset: -1px;\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 * Multi-row (wrapping) tabs: when the tab list wraps onto multiple rows\n * (`.dv-tabs-container--wrap`, toggled by the `MultiRowTabsModule`), the\n * header grows to fit instead of clipping. Inert otherwise: the single-row\n * fixed height above is unchanged.\n */\n}\n.dv-tabs-and-actions-container:has(.dv-tabs-container--wrap) {\n height: auto;\n min-height: var(--dv-tabs-and-actions-container-height);\n align-items: flex-start;\n}\n.dv-tabs-and-actions-container:has(.dv-tabs-container--wrap) > .dv-pre-actions-container,\n.dv-tabs-and-actions-container:has(.dv-tabs-container--wrap) > .dv-left-actions-container,\n.dv-tabs-and-actions-container:has(.dv-tabs-container--wrap) > .dv-right-actions-container,\n.dv-tabs-and-actions-container:has(.dv-tabs-container--wrap) > .dv-void-container {\n height: var(--dv-tabs-and-actions-container-height);\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-scrollable {\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container {\n flex-grow: 1;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container .dv-tab {\n flex-grow: 1;\n padding: 0px;\n}\n.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-void-container {\n flex-grow: 0;\n}\n.dv-tabs-and-actions-container .dv-void-container {\n display: flex;\n flex-grow: 1;\n 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-tabs-and-actions-container .dv-void-container.dv-draggable {\n cursor: grab;\n}\n.dv-tabs-and-actions-container .dv-right-actions-container {\n display: flex;\n}\n.dv-tabs-and-actions-container .dv-right-actions-container.dv-right-actions-container-vertical {\n flex-direction: column;\n}\n.dv-tabs-and-actions-container.dv-groupview-header-vertical {\n flex-direction: column;\n height: auto;\n width: var(--dv-tabs-and-actions-container-height);\n}\n.dv-tabs-and-actions-container.dv-groupview-header-vertical:has(.dv-tabs-container--wrap) {\n width: auto;\n min-width: var(--dv-tabs-and-actions-container-height);\n}\n.dv-tabs-and-actions-container.dv-groupview-header-vertical:has(.dv-tabs-container--wrap) > .dv-scrollable {\n align-self: stretch;\n}\n.dv-watermark {\n display: flex;\n height: 100%;\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\n.dv-keyboard-docking-hint {\n position: absolute;\n left: 50%;\n bottom: 8px;\n transform: translateX(-50%);\n z-index: 100;\n max-width: 90%;\n padding: 4px 10px;\n border-radius: 4px;\n font-size: 12px;\n line-height: 1.4;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n pointer-events: none;\n background-color: var(--dv-context-menu-background-color, var(--dv-group-view-background-color));\n color: var(--dv-activegroup-visiblepanel-tab-color);\n border: 1px solid var(--dv-tab-divider-color);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);\n}\n.dv-groupview {\n display: flex;\n height: 100%;\n background-color: var(--dv-group-view-background-color);\n overflow: hidden;\n flex-direction: column;\n}\n.dv-groupview:focus {\n outline: none;\n}\n.dv-groupview > .dv-content-container {\n flex-grow: 1;\n min-height: 0;\n outline: none;\n}\n.dv-groupview.dv-groupview-header-bottom {\n flex-direction: column-reverse;\n}\n.dv-groupview.dv-groupview-header-left {\n flex-direction: row;\n}\n.dv-groupview.dv-groupview-header-right {\n flex-direction: row-reverse;\n}\n.dv-groupview.dv-groupview-edge.dv-edge-collapsed > .dv-content-container {\n display: 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-floating-overlay-host {\n position: absolute;\n pointer-events: none;\n}\n.dv-floating-overlay-host > .dv-resize-container {\n pointer-events: auto;\n}\n\n.dv-edge-peek {\n background-color: var(--dv-group-view-background-color);\n border: 1px solid var(--dv-separator-border);\n box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);\n}\n.dv-edge-peek > * {\n width: 100%;\n height: 100%;\n overflow: auto;\n}\n\n.dv-auto-edge-band {\n position: absolute;\n pointer-events: none;\n z-index: var(--dv-overlay-z-index, 999);\n background-color: var(--dv-edge-dock-indicator-color);\n box-shadow: 0 0 6px var(--dv-edge-dock-indicator-color);\n}\n\n.dv-edge-peek-header {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 0 4px 0 8px;\n box-sizing: border-box;\n background-color: var(--dv-group-view-background-color);\n border: 1px solid var(--dv-separator-border);\n border-bottom: none;\n color: var(--dv-activegroup-visiblepanel-tab-color);\n font-size: 12px;\n}\n.dv-edge-peek-header .dv-edge-peek-pin,\n.dv-edge-peek-header .dv-edge-peek-close {\n flex: 0 0 auto;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n cursor: pointer;\n border: none;\n padding: 4px;\n color: inherit;\n background: transparent;\n outline: none;\n}\n.dv-edge-peek-header .dv-edge-peek-pin:hover,\n.dv-edge-peek-header .dv-edge-peek-close:hover {\n border-radius: 2px;\n background-color: var(--dv-icon-hover-background-color);\n}\n.dv-edge-peek-header .dv-edge-peek-pin:focus-visible,\n.dv-edge-peek-header .dv-edge-peek-close:focus-visible {\n border-radius: 2px;\n outline: 1px solid var(--dv-tab-divider-color);\n outline-offset: -1px;\n}\n\n.dv-edge-peek-title {\n flex: 1 1 auto;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.dv-resize-container > .dv-grid-view {\n width: 100%;\n height: 100%;\n}\n\n.dv-resize-container-with-titlebar {\n display: flex;\n flex-direction: column;\n}\n.dv-resize-container-with-titlebar > .dv-floating-titlebar {\n flex: 0 0 auto;\n}\n.dv-resize-container-with-titlebar > .dv-grid-view {\n height: auto;\n flex: 1 1 0;\n min-height: 0;\n}\n\n.dv-floating-titlebar {\n box-sizing: border-box;\n flex-shrink: 0;\n height: var(--dv-floating-titlebar-height, 22px);\n background-color: var(--dv-floating-titlebar-background-color);\n border-bottom: var(--dv-floating-titlebar-border-bottom, none);\n user-select: none;\n touch-action: none;\n}\n.dv-floating-titlebar.dv-draggable {\n cursor: grab;\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 background-color: var(--dv-group-view-background-color);\n border: var(--dv-floating-border);\n box-shadow: var(--dv-floating-box-shadow);\n /* GPU optimizations for floating group movement */\n will-change: transform, opacity;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n}\n.dv-resize-container.dv-hidden {\n display: none;\n}\n.dv-resize-container.dv-resize-container-dragging {\n opacity: var(--dv-floating-group-dragging-opacity);\n /* Enhanced GPU acceleration during drag */\n will-change: transform, opacity;\n}\n.dv-resize-container .dv-resize-handle-top,\n.dv-resize-container .dv-resize-handle-bottom,\n.dv-resize-container .dv-resize-handle-left,\n.dv-resize-container .dv-resize-handle-right,\n.dv-resize-container .dv-resize-handle-topleft,\n.dv-resize-container .dv-resize-handle-topright,\n.dv-resize-container .dv-resize-handle-bottomleft,\n.dv-resize-container .dv-resize-handle-bottomright {\n touch-action: none;\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@media (pointer: coarse) {\n .dv-resize-container .dv-resize-handle-top,\n .dv-resize-container .dv-resize-handle-bottom {\n height: 16px;\n width: calc(100% - 48px);\n left: 24px;\n }\n .dv-resize-container .dv-resize-handle-top {\n top: -10px;\n }\n .dv-resize-container .dv-resize-handle-bottom {\n bottom: -10px;\n }\n .dv-resize-container .dv-resize-handle-left,\n .dv-resize-container .dv-resize-handle-right {\n width: 16px;\n height: calc(100% - 48px);\n top: 24px;\n }\n .dv-resize-container .dv-resize-handle-left {\n left: -10px;\n }\n .dv-resize-container .dv-resize-handle-right {\n right: -10px;\n }\n .dv-resize-container .dv-resize-handle-topleft,\n .dv-resize-container .dv-resize-handle-topright,\n .dv-resize-container .dv-resize-handle-bottomleft,\n .dv-resize-container .dv-resize-handle-bottomright {\n height: 24px;\n width: 24px;\n }\n .dv-resize-container .dv-resize-handle-topleft {\n top: -12px;\n left: -12px;\n }\n .dv-resize-container .dv-resize-handle-topright {\n top: -12px;\n right: -12px;\n }\n .dv-resize-container .dv-resize-handle-bottomleft {\n bottom: -12px;\n left: -12px;\n }\n .dv-resize-container .dv-resize-handle-bottomright {\n bottom: -12px;\n right: -12px;\n }\n}\n\n.dv-smart-guides {\n pointer-events: none;\n z-index: calc(var(--dv-overlay-z-index, 999) + 100);\n}\n\n.dv-smart-guide {\n background-color: var(--dv-smart-guides-color, #1f9cf0);\n}\n\n.dv-smart-guide-preview {\n box-sizing: border-box;\n background-color: var(--dv-smart-guides-preview-color, rgba(31, 156, 240, 0.18));\n border: 1px solid var(--dv-smart-guides-color, #1f9cf0);\n}\n.dv-render-overlay {\n --dv-overlay-z-index: var(--dv-overlay-z-index, 999);\n position: absolute;\n z-index: 1;\n width: 100%;\n height: 100%;\n contain: layout paint;\n isolation: isolate;\n /* GPU optimizations */\n will-change: transform;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\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 /* GPU optimizations for smooth pane animations */\n will-change: transform;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n transition: transform 0.15s 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-visible:before, .dv-pane-container .dv-pane .dv-pane-header:has(:focus-visible):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-visible:before, .dv-pane-container .dv-pane .dv-pane-body:has(:focus-visible):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-scrollable {\n position: relative;\n overflow: hidden;\n}\n.dv-scrollable .dv-scrollbar {\n position: absolute;\n border-radius: 2px;\n background-color: transparent;\n /* GPU optimizations */\n will-change: background-color, transform;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n transition-property: background-color;\n transition-timing-function: ease-in-out;\n transition-duration: 1s;\n transition-delay: 0s;\n}\n.dv-scrollable .dv-scrollbar-horizontal {\n bottom: 0px;\n left: 0px;\n height: 4px;\n}\n.dv-scrollable .dv-scrollbar-vertical {\n right: 0px;\n top: 0px;\n width: 4px;\n}\n.dv-scrollable:hover .dv-scrollbar, .dv-scrollable.dv-scrollable-resizing .dv-scrollbar, .dv-scrollable.dv-scrollable-scrolling .dv-scrollbar {\n background-color: var(--dv-scrollbar-background-color, rgba(255, 255, 255, 0.25));\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 /* GPU optimizations for smooth animations */\n will-change: transform;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n transition: transform 0.15s ease-out;\n}\n.dv-split-view-container.dv-horizontal {\n height: 100%;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash {\n height: 100%;\n width: 4px;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ew-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: w-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: e-resize;\n}\n.dv-split-view-container.dv-horizontal > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 100%;\n width: 1px;\n}\n.dv-split-view-container.dv-vertical {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash {\n width: 100%;\n height: 4px;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-enabled {\n cursor: ns-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-disabled {\n cursor: default;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-maximum {\n cursor: n-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash.dv-minimum {\n cursor: s-resize;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view {\n width: 100%;\n}\n.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view:not(:first-child)::before {\n height: 1px;\n width: 100%;\n}\n.dv-split-view-container .dv-sash-container {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.dv-split-view-container .dv-sash-container .dv-sash {\n position: absolute;\n z-index: 99;\n outline: none;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n touch-action: none;\n background-color: var(--dv-sash-color, transparent);\n}\n.dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):active, .dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):hover {\n background-color: var(--dv-active-sash-color, transparent);\n transition-property: background-color;\n transition-timing-function: ease-in-out;\n transition-duration: var(--dv-active-sash-transition-duration, 0.1s);\n transition-delay: var(--dv-active-sash-transition-delay, 0.5s);\n}\n@media (pointer: coarse) {\n .dv-split-view-container .dv-sash-container > .dv-sash:not(.dv-disabled)::before {\n content: \"\";\n position: absolute;\n background: transparent;\n }\n .dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash:not(.dv-disabled)::before {\n top: 0;\n bottom: 0;\n left: -10px;\n right: -10px;\n }\n .dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash:not(.dv-disabled)::before {\n left: 0;\n right: 0;\n top: -10px;\n bottom: -10px;\n }\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-svg {\n display: inline-block;\n fill: currentcolor;\n line-height: 1;\n stroke: currentcolor;\n stroke-width: 0;\n}\n.dockview-theme-dark {\n --dv-paneview-active-outline-color: dodgerblue;\n --dv-tabs-and-actions-container-font-size: 13px;\n --dv-tabs-and-actions-container-height: 35px;\n --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);\n --dv-drag-over-border-color: transparent;\n --dv-edge-dock-indicator-color: rgba(56, 139, 253, 0.9);\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);\n --dv-floating-border: 1px solid rgba(255, 255, 255, 0.1);\n --dv-overlay-z-index: 999;\n --dv-tab-font-size: inherit;\n --dv-border-radius: 0px;\n --dv-tab-margin: 0;\n --dv-sash-color: transparent;\n --dv-active-sash-color: transparent;\n --dv-active-sash-transition-duration: 0.1s;\n --dv-active-sash-transition-delay: 0.5s;\n --dv-spacing-padding: 0px;\n --dv-tab-border-radius: 0px;\n --dv-sash-border-radius: 0px;\n --dv-dropdown-border-radius: 0px;\n --dv-tab-close-icon-size: inherit;\n --dv-floating-group-border: none;\n --dv-drag-over-border: none;\n --dv-floating-group-dragging-opacity: 0.5;\n --dv-floating-titlebar-height: 22px;\n --dv-floating-titlebar-background-color: var(\n --dv-tabs-and-actions-container-background-color\n );\n --dv-floating-titlebar-border-bottom: var(--dv-floating-border);\n --dv-tab-group-color-grey: #5f6368;\n --dv-tab-group-color-blue: #1a73e8;\n --dv-tab-group-color-red: #d93025;\n --dv-tab-group-color-yellow: #f9ab00;\n --dv-tab-group-color-green: #188038;\n --dv-tab-group-color-pink: #d01884;\n --dv-tab-group-color-purple: #a142f4;\n --dv-tab-group-color-cyan: #007b83;\n --dv-tab-group-color-orange: #e8710a;\n --dv-tab-group-chip-padding: 4px 8px;\n --dv-tab-group-chip-border-radius: 6px;\n --dv-tab-group-chip-font-size: 11px;\n --dv-tab-group-line-height: 2px;\n --dv-tab-group-line-opacity: 0.6;\n}\n.dockview-theme-dark .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {\n opacity: 0;\n transition: none;\n}\n.dockview-theme-dark {\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: transparent;\n --dv-edge-dock-indicator-color: rgba(56, 139, 253, 0.9);\n --dv-tabs-container-scrollbar-color: #888;\n --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);\n --dv-floating-box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0,