dockview-core 1.15.3 → 1.16.0

package/dist/esm/{dnd → overlay}/overlay.d.ts

@@ -1,6 +1,7 @@
 import { Event } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 import { AnchoredBox } from '../types';
+export declare const DEFAULT_OVERLAY_Z_INDEX = 999;
 export declare class Overlay extends CompositeDisposable {
     private readonly options;
     private _element;
@@ -14,12 +15,14 @@ export declare class Overlay extends CompositeDisposable {
     private horiziontalAlignment;
     set minimumInViewportWidth(value: number | undefined);
     set minimumInViewportHeight(value: number | undefined);
+    get element(): HTMLElement;
     constructor(options: AnchoredBox & {
         container: HTMLElement;
         content: HTMLElement;
         minimumInViewportWidth?: number;
         minimumInViewportHeight?: number;
     });
+    bringToFront(): void;
     setBounds(bounds?: Partial<AnchoredBox>): void;
     toJSON(): AnchoredBox;
     setupDrag(dragTarget: HTMLElement, options?: {

package/dist/esm/{dnd → overlay}/overlay.js

@@ -1,18 +1,31 @@
-import { getElementsByTagName, quasiDefaultPrevented, toggleClass, } from '../dom';
+import { disableIframePointEvents, quasiDefaultPrevented, toggleClass, } from '../dom';
 import { Emitter, addDisposableListener, addDisposableWindowListener, } from '../events';
 import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 import { clamp } from '../math';
-const bringElementToFront = (() => {
-    let previous = null;
-    function pushToTop(element) {
-        if (previous !== element && previous !== null) {
-            toggleClass(previous, 'dv-bring-to-front', false);
+export const DEFAULT_OVERLAY_Z_INDEX = 999;
+class AriaLevelTracker {
+    constructor() {
+        this._orderedList = [];
+    }
+    push(element) {
+        this._orderedList = [
+            ...this._orderedList.filter((item) => item !== element),
+            element,
+        ];
+        this.update();
+    }
+    destroy(element) {
+        this._orderedList = this._orderedList.filter((item) => item !== element);
+        this.update();
+    }
+    update() {
+        for (let i = 0; i < this._orderedList.length; i++) {
+            this._orderedList[i].setAttribute('aria-level', `${i}`);
+            this._orderedList[i].style.zIndex = `${DEFAULT_OVERLAY_Z_INDEX + i * 2}`;
         }
-        toggleClass(element, 'dv-bring-to-front', true);
-        previous = element;
     }
-    return pushToTop;
-})();
+}
+const arialLevelTracker = new AriaLevelTracker();
 export class Overlay extends CompositeDisposable {
     set minimumInViewportWidth(value) {
         this.options.minimumInViewportWidth = value;
@@ -20,6 +33,9 @@ export class Overlay extends CompositeDisposable {
     set minimumInViewportHeight(value) {
         this.options.minimumInViewportHeight = value;
     }
+    get element() {
+        return this._element;
+    }
     constructor(options) {
         super();
         this.options = options;
@@ -42,6 +58,10 @@ export class Overlay extends CompositeDisposable {
         this.options.container.appendChild(this._element);
         // if input bad resize within acceptable boundaries
         this.setBounds(Object.assign(Object.assign(Object.assign(Object.assign({ height: this.options.height, width: this.options.width }, ('top' in this.options && { top: this.options.top })), ('bottom' in this.options && { bottom: this.options.bottom })), ('left' in this.options && { left: this.options.left })), ('right' in this.options && { right: this.options.right })));
+        arialLevelTracker.push(this._element);
+    }
+    bringToFront() {
+        arialLevelTracker.push(this._element);
     }
     setBounds(bounds = {}) {
         if (typeof bounds.height === 'number') {
@@ -129,18 +149,10 @@ export class Overlay extends CompositeDisposable {
         const move = new MutableDisposable();
         const track = () => {
             let offset = null;
-            const iframes = [
-                ...getElementsByTagName('iframe'),
-                ...getElementsByTagName('webview'),
-            ];
-            for (const iframe of iframes) {
-                iframe.style.pointerEvents = 'none';
-            }
+            const iframes = disableIframePointEvents();
             move.value = new CompositeDisposable({
                 dispose: () => {
-                    for (const iframe of iframes) {
-                        iframe.style.pointerEvents = 'auto';
-                    }
+                    iframes.release();
                 },
             }, addDisposableWindowListener(window, 'mousemove', (e) => {
                 const containerRect = this.options.container.getBoundingClientRect();
@@ -209,9 +221,8 @@ export class Overlay extends CompositeDisposable {
                 track();
             }
         }), addDisposableListener(this.options.content, 'mousedown', () => {
-            bringElementToFront(this._element);
+            arialLevelTracker.push(this._element);
         }, true));
-        bringElementToFront(this._element);
         if (options.inDragMode) {
             track();
         }
@@ -224,13 +235,7 @@ export class Overlay extends CompositeDisposable {
         this.addDisposables(move, addDisposableListener(resizeHandleElement, 'mousedown', (e) => {
             e.preventDefault();
             let startPosition = null;
-            const iframes = [
-                ...getElementsByTagName('iframe'),
-                ...getElementsByTagName('webview'),
-            ];
-            for (const iframe of iframes) {
-                iframe.style.pointerEvents = 'none';
-            }
+            const iframes = disableIframePointEvents();
             move.value = new CompositeDisposable(addDisposableWindowListener(window, 'mousemove', (e) => {
                 const containerRect = this.options.container.getBoundingClientRect();
                 const overlayRect = this._element.getBoundingClientRect();
@@ -353,9 +358,7 @@ export class Overlay extends CompositeDisposable {
                 this.setBounds(bounds);
             }), {
                 dispose: () => {
-                    for (const iframe of iframes) {
-                        iframe.style.pointerEvents = 'auto';
-                    }
+                    iframes.release();
                 },
             }, addDisposableWindowListener(window, 'mouseup', () => {
                 move.dispose();
@@ -376,6 +379,7 @@ export class Overlay extends CompositeDisposable {
         return 0;
     }
     dispose() {
+        arialLevelTracker.destroy(this._element);
         this._element.remove();
         super.dispose();
     }

package/dist/esm/{overlayRenderContainer.d.ts → overlay/overlayRenderContainer.d.ts}

@@ -1,16 +1,18 @@
-import { Droptarget } from './dnd/droptarget';
-import { CompositeDisposable } from './lifecycle';
-import { IDockviewPanel } from './dockview/dockviewPanel';
+import { Droptarget } from '../dnd/droptarget';
+import { CompositeDisposable } from '../lifecycle';
+import { IDockviewPanel } from '../dockview/dockviewPanel';
+import { DockviewComponent } from '../dockview/dockviewComponent';
 export type DockviewPanelRenderer = 'onlyWhenVisible' | 'always';
 export interface IRenderable {
     readonly element: HTMLElement;
     readonly dropTarget: Droptarget;
 }
 export declare class OverlayRenderContainer extends CompositeDisposable {
-    private readonly element;
+    readonly element: HTMLElement;
+    readonly accessor: DockviewComponent;
     private readonly map;
     private _disposed;
-    constructor(element: HTMLElement);
+    constructor(element: HTMLElement, accessor: DockviewComponent);
     detatch(panel: IDockviewPanel): boolean;
     attach(options: {
         panel: IDockviewPanel;

package/dist/esm/{overlayRenderContainer.js → overlay/overlayRenderContainer.js}

@@ -1,15 +1,17 @@
-import { DragAndDropObserver } from './dnd/dnd';
-import { getDomNodePagePosition, toggleClass } from './dom';
-import { CompositeDisposable, Disposable } from './lifecycle';
+import { DragAndDropObserver } from '../dnd/dnd';
+import { getDomNodePagePosition, toggleClass } from '../dom';
+import { CompositeDisposable, Disposable, MutableDisposable, } from '../lifecycle';
+import { DEFAULT_OVERLAY_Z_INDEX } from './overlay';
 function createFocusableElement() {
     const element = document.createElement('div');
     element.tabIndex = -1;
     return element;
 }
 export class OverlayRenderContainer extends CompositeDisposable {
-    constructor(element) {
+    constructor(element, accessor) {
         super();
         this.element = element;
+        this.accessor = accessor;
         this.map = {};
         this._disposed = false;
         this.addDisposables(Disposable.from(() => {
@@ -65,7 +67,35 @@ export class OverlayRenderContainer extends CompositeDisposable {
             }
             focusContainer.style.display = panel.api.isVisible ? '' : 'none';
         };
-        const disposable = new CompositeDisposable(
+        const observerDisposable = new MutableDisposable();
+        const correctLayerPosition = () => {
+            if (panel.api.location.type === 'floating') {
+                queueMicrotask(() => {
+                    const floatingGroup = this.accessor.floatingGroups.find((group) => group.group === panel.api.group);
+                    if (!floatingGroup) {
+                        return;
+                    }
+                    const element = floatingGroup.overlay.element;
+                    const update = () => {
+                        const level = Number(element.getAttribute('aria-level'));
+                        focusContainer.style.zIndex = `${DEFAULT_OVERLAY_Z_INDEX + level * 2 + 1}`;
+                    };
+                    const observer = new MutationObserver(() => {
+                        update();
+                    });
+                    observerDisposable.value = Disposable.from(() => observer.disconnect());
+                    observer.observe(element, {
+                        attributeFilter: ['aria-level'],
+                        attributes: true,
+                    });
+                    update();
+                });
+            }
+            else {
+                focusContainer.style.zIndex = ''; // reset the z-index, perhaps CSS will take over here
+            }
+        };
+        const disposable = new CompositeDisposable(observerDisposable, 
         /**
          * since container is positioned absoutely we must explicitly forward
          * the dnd events for the expect behaviours to continue to occur in terms of dnd
@@ -89,7 +119,7 @@ export class OverlayRenderContainer extends CompositeDisposable {
             onDragOver: (e) => {
                 referenceContainer.dropTarget.dnd.onDragOver(e);
             },
-        }), panel.api.onDidVisibilityChange((event) => {
+        }), panel.api.onDidVisibilityChange(() => {
             /**
              * Control the visibility of the content, however even when not visible (display: none)
              * the content is still maintained within the DOM hence DOM specific attributes
@@ -101,6 +131,8 @@ export class OverlayRenderContainer extends CompositeDisposable {
                 return;
             }
             resize();
+        }), panel.api.onDidLocationChange(() => {
+            correctLayerPosition();
         }));
         this.map[panel.api.id].destroy = Disposable.from(() => {
             var _a;
@@ -109,6 +141,7 @@ export class OverlayRenderContainer extends CompositeDisposable {
             }
             (_a = focusContainer.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(focusContainer);
         });
+        correctLayerPosition();
         queueMicrotask(() => {
             if (this.isDisposed) {
                 return;

package/dist/esm/paneview/options.d.ts

@@ -21,5 +21,5 @@ export interface PaneviewComponentOptions {
     };
     disableDnd?: boolean;
     showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
-    parentElement: HTMLElement;
+    className?: string;
 }

package/dist/esm/paneview/paneviewComponent.d.ts

@@ -112,7 +112,7 @@ export declare class PaneviewComponent extends Resizable implements IPaneviewCom
     get height(): number;
     get width(): number;
     get options(): PaneviewComponentOptions;
-    constructor(options: PaneviewComponentOptions);
+    constructor(parentElement: HTMLElement, options: PaneviewComponentOptions);
     setVisible(panel: PaneviewPanel, visible: boolean): void;
     focus(): void;
     updateOptions(options: Partial<PaneviewComponentOptions>): void;

package/dist/esm/paneview/paneviewComponent.js

@@ -56,8 +56,8 @@ export class PaneviewComponent extends Resizable {
     get options() {
         return this._options;
     }
-    constructor(options) {
-        super(options.parentElement, options.disableAutoResizing);
+    constructor(parentElement, options) {
+        super(parentElement, options.disableAutoResizing);
         this._id = nextLayoutId.next();
         this._disposable = new MutableDisposable();
         this._viewDisposables = new Map();
@@ -71,6 +71,9 @@ export class PaneviewComponent extends Resizable {
         this.onDidAddView = this._onDidAddView.event;
         this._onDidRemoveView = new Emitter();
         this.onDidRemoveView = this._onDidRemoveView.event;
+        if (typeof options.className === 'string') {
+            this.element.classList.add(options.className);
+        }
         this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
         this._options = options;
         if (!options.components) {

package/dist/esm/splitview/options.d.ts

@@ -19,5 +19,5 @@ export interface SplitviewComponentOptions extends SplitViewOptions {
         [componentName: string]: any;
     };
     frameworkWrapper?: FrameworkFactory<SplitviewPanel>;
-    parentElement: HTMLElement;
+    className?: string;
 }

package/dist/esm/splitview/splitview.js

@@ -2,7 +2,7 @@
  * Accreditation: This file is largly based upon the MIT licenced VSCode sourcecode found at:
  * https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/splitview
  *--------------------------------------------------------------------------------------------*/
-import { removeClasses, addClasses, toggleClass, getElementsByTagName, } from '../dom';
+import { removeClasses, addClasses, toggleClass, disableIframePointEvents, } from '../dom';
 import { Emitter } from '../events';
 import { pushToStart, pushToEnd, firstIndex } from '../array';
 import { range, clamp } from '../math';
@@ -359,13 +359,7 @@ export class Splitview {
                 for (const item of this.viewItems) {
                     item.enabled = false;
                 }
-                const iframes = [
-                    ...getElementsByTagName('iframe'),
-                    ...getElementsByTagName('webview'),
-                ];
-                for (const iframe of iframes) {
-                    iframe.style.pointerEvents = 'none';
-                }
+                const iframes = disableIframePointEvents();
                 const start = this._orientation === Orientation.HORIZONTAL
                     ? event.clientX
                     : event.clientY;
@@ -427,9 +421,7 @@ export class Splitview {
                     for (const item of this.viewItems) {
                         item.enabled = true;
                     }
-                    for (const iframe of iframes) {
-                        iframe.style.pointerEvents = 'auto';
-                    }
+                    iframes.release();
                     this.saveProportions();
                     document.removeEventListener('pointermove', onPointerMove);
                     document.removeEventListener('pointerup', end);
@@ -596,29 +588,47 @@ export class Splitview {
         if (this.viewItems.length === 0) {
             return;
         }
-        const sashCount = this.viewItems.length - 1;
-        const marginReducedSize = (this.margin * sashCount) / this.viewItems.length;
+        const visibleViewItems = this.viewItems.filter((i) => i.visible);
+        const sashCount = Math.max(0, visibleViewItems.length - 1);
+        const marginReducedSize = (this.margin * sashCount) / Math.max(1, visibleViewItems.length);
         let totalLeftOffset = 0;
         const viewLeftOffsets = [];
-        for (let i = 0; i < this.viewItems.length - 1; i++) {
-            totalLeftOffset += this.viewItems[i].size;
-            viewLeftOffsets.push(totalLeftOffset);
-            const offset = Math.min(Math.max(0, totalLeftOffset - 2), this.size - this.margin);
-            if (this._orientation === Orientation.HORIZONTAL) {
-                this.sashes[i].container.style.left = `${offset}px`;
-                this.sashes[i].container.style.top = `0px`;
+        const sashWidth = 4; // hardcoded in css
+        const runningVisiblePanelCount = this.viewItems.reduce((arr, viewItem, i) => {
+            const flag = viewItem.visible ? 1 : 0;
+            if (i === 0) {
+                arr.push(flag);
             }
-            if (this._orientation === Orientation.VERTICAL) {
-                this.sashes[i].container.style.left = `0px`;
-                this.sashes[i].container.style.top = `${offset}px`;
+            else {
+                arr.push(arr[i - 1] + flag);
             }
-        }
+            return arr;
+        }, []);
+        // calculate both view and cash positions
         this.viewItems.forEach((view, i) => {
-            const size = view.size - marginReducedSize;
-            const offset = i === 0
+            totalLeftOffset += this.viewItems[i].size;
+            viewLeftOffsets.push(totalLeftOffset);
+            const size = view.visible ? view.size - marginReducedSize : 0;
+            const visiblePanelsBeforeThisView = Math.max(0, runningVisiblePanelCount[i] - 1);
+            const offset = i === 0 || visiblePanelsBeforeThisView === 0
                 ? 0
                 : viewLeftOffsets[i - 1] +
-                    (i / sashCount) * marginReducedSize;
+                    (visiblePanelsBeforeThisView / sashCount) * marginReducedSize;
+            if (i < this.viewItems.length - 1) {
+                // calculate sash position
+                const newSize = view.visible
+                    ? offset + size - sashWidth / 2 + this.margin / 2
+                    : offset;
+                if (this._orientation === Orientation.HORIZONTAL) {
+                    this.sashes[i].container.style.left = `${newSize}px`;
+                    this.sashes[i].container.style.top = `0px`;
+                }
+                if (this._orientation === Orientation.VERTICAL) {
+                    this.sashes[i].container.style.left = `0px`;
+                    this.sashes[i].container.style.top = `${newSize}px`;
+                }
+            }
+            // calculate view position
             if (this._orientation === Orientation.HORIZONTAL) {
                 view.container.style.width = `${size}px`;
                 view.container.style.left = `${offset}px`;

package/dist/esm/splitview/splitviewComponent.d.ts

@@ -83,7 +83,7 @@ export declare class SplitviewComponent extends Resizable implements ISplitviewC
     get maximumSize(): number;
     get height(): number;
     get width(): number;
-    constructor(options: SplitviewComponentOptions);
+    constructor(parentElement: HTMLElement, options: SplitviewComponentOptions);
     updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
     focus(): void;
     movePanel(from: number, to: number): void;

package/dist/esm/splitview/splitviewComponent.js

@@ -44,8 +44,8 @@ export class SplitviewComponent extends Resizable {
             ? this.splitview.size
             : this.splitview.orthogonalSize;
     }
-    constructor(options) {
-        super(options.parentElement, options.disableAutoResizing);
+    constructor(parentElement, options) {
+        super(parentElement, options.disableAutoResizing);
         this._splitviewChangeDisposable = new MutableDisposable();
         this._panels = new Map();
         this._onDidLayoutfromJSON = new Emitter();
@@ -56,6 +56,9 @@ export class SplitviewComponent extends Resizable {
         this.onDidRemoveView = this._onDidRemoveView.event;
         this._onDidLayoutChange = new Emitter();
         this.onDidLayoutChange = this._onDidLayoutChange.event;
+        if (typeof options.className === 'string') {
+            this.element.classList.add(options.className);
+        }
         this._options = options;
         if (!options.components) {
             options.components = {};

package/dist/styles/dockview.css

@@ -1,16 +1,3 @@
-.dv-render-overlay {
-  position: absolute;
-  z-index: 1;
-  height: 100%;
-}
-.dv-render-overlay.dv-render-overlay-float {
-  z-index: 999;
-}
-
-.dv-debug .dv-render-overlay {
-  outline: 1px solid red;
-  outline-offset: -1;
-}
 .dockview-svg {
   display: inline-block;
   fill: currentcolor;
@@ -257,7 +244,7 @@
 .dockview-theme-replit .groupview.inactive-group {
   border: 1px solid transparent;
 }
-.dockview-theme-replit .vertical > .sash-container > .sash::after {
+.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled)::after {
   content: "";
   height: 4px;
   width: 40px;
@@ -268,10 +255,10 @@
   background-color: var(--dv-separator-handle-background-color);
   position: absolute;
 }
-.dockview-theme-replit .vertical > .sash-container > .sash:hover::after {
+.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled):hover::after {
   background-color: var(--dv-separator-handle-hover-background-color);
 }
-.dockview-theme-replit .horizontal > .sash-container > .sash::after {
+.dockview-theme-replit .horizontal > .sash-container > .sash:not(.disabled)::after {
   content: "";
   height: 40px;
   width: 4px;
@@ -282,7 +269,7 @@
   background-color: var(--dv-separator-handle-background-color);
   position: absolute;
 }
-.dockview-theme-replit .horizontal > .sash-container > .sash:hover::after {
+.dockview-theme-replit .horizontal > .sash-container > .sash:not(.disabled):hover::after {
   background-color: var(--dv-separator-handle-hover-background-color);
 }
 .drop-target {
@@ -319,6 +306,74 @@
 .drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {
   border-right: 1px solid var(--dv-drag-over-border-color);
 }
+.dv-dockview {
+  position: relative;
+  background-color: var(--dv-group-view-background-color);
+}
+.dv-dockview .dv-watermark-container {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+}
+.dv-dockview .dv-overlay-render-container {
+  position: relative;
+}
+
+.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
+  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
+  color: var(--dv-activegroup-visiblepanel-tab-color);
+}
+.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {
+  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
+  color: var(--dv-activegroup-hiddenpanel-tab-color);
+}
+.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
+  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);
+  color: var(--dv-inactivegroup-visiblepanel-tab-color);
+}
+.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {
+  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);
+  color: var(--dv-inactivegroup-hiddenpanel-tab-color);
+}
+
+/**
+ * when a tab is dragged we lose the above stylings because they are conditional on parent elements
+ * therefore we also set some stylings for the dragging event
+ **/
+.tab.dv-tab-dragging {
+  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
+  color: var(--dv-activegroup-visiblepanel-tab-color);
+}
+.groupview {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--dv-group-view-background-color);
+  overflow: hidden;
+}
+.groupview:focus {
+  outline: none;
+}
+.groupview.empty > .tabs-and-actions-container {
+  display: none;
+}
+.groupview > .content-container {
+  flex-grow: 1;
+  min-height: 0;
+  outline: none;
+}
+.dv-root-wrapper {
+  height: 100%;
+  width: 100%;
+}
+.grid-view,
+.branch-node {
+  height: 100%;
+  width: 100%;
+}
 .dv-debug .dv-resize-container .dv-resize-handle-top {
   background-color: red;
 }
@@ -344,9 +399,6 @@
   border: 1px solid var(--dv-tab-divider-color);
   box-shadow: var(--dv-floating-box-shadow);
 }
-.dv-resize-container.dv-bring-to-front {
-  z-index: 998;
-}
 .dv-resize-container.dv-resize-container-dragging {
   opacity: 0.5;
 }
@@ -422,73 +474,17 @@
   position: absolute;
   cursor: se-resize;
 }
-.dv-dockview {
-  position: relative;
-  background-color: var(--dv-group-view-background-color);
-}
-.dv-dockview .dv-watermark-container {
+.dv-render-overlay {
   position: absolute;
-  top: 0px;
-  left: 0px;
-  height: 100%;
-  width: 100%;
   z-index: 1;
-}
-.dv-dockview .dv-overlay-render-container {
-  position: relative;
-}
-
-.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
-  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
-  color: var(--dv-activegroup-visiblepanel-tab-color);
-}
-.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {
-  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
-  color: var(--dv-activegroup-hiddenpanel-tab-color);
-}
-.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
-  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);
-  color: var(--dv-inactivegroup-visiblepanel-tab-color);
-}
-.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {
-  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);
-  color: var(--dv-inactivegroup-hiddenpanel-tab-color);
-}
-
-/**
- * when a tab is dragged we lose the above stylings because they are conditional on parent elements
- * therefore we also set some stylings for the dragging event
- **/
-.tab.dv-tab-dragging {
-  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
-  color: var(--dv-activegroup-visiblepanel-tab-color);
-}
-.groupview {
-  display: flex;
-  flex-direction: column;
   height: 100%;
-  background-color: var(--dv-group-view-background-color);
-  overflow: hidden;
 }
-.groupview:focus {
-  outline: none;
-}
-.groupview.empty > .tabs-and-actions-container {
-  display: none;
-}
-.groupview > .content-container {
-  flex-grow: 1;
-  min-height: 0;
-  outline: none;
-}
-.dv-root-wrapper {
-  height: 100%;
-  width: 100%;
+.dv-render-overlay.dv-render-overlay-float {
+  z-index: 998;
 }
-.grid-view,
-.branch-node {
-  height: 100%;
-  width: 100%;
+.dv-debug .dv-render-overlay {
+  outline: 1px solid red;
+  outline-offset: -1;
 }
 .pane-container {
   height: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-core",
-  "version": "1.15.3",
+  "version": "1.16.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",