dockview-core 4.6.0 → 4.7.0

package/dist/esm/constants.d.ts

@@ -5,3 +5,4 @@ export declare const DEFAULT_FLOATING_GROUP_POSITION: {
     width: number;
     height: number;
 };
+export declare const DESERIALIZATION_POPOUT_DELAY_MS = 100;

package/dist/esm/constants.js

@@ -1,2 +1,3 @@
 export const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
 export const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100, width: 300, height: 300 };
+export const DESERIALIZATION_POPOUT_DELAY_MS = 100;

package/dist/esm/dnd/droptarget.js

@@ -3,6 +3,48 @@ import { DockviewEvent, Emitter } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 import { DragAndDropObserver } from './dnd';
 import { clamp } from '../math';
+function setGPUOptimizedBounds(element, bounds) {
+    const { top, left, width, height } = bounds;
+    const topPx = `${Math.round(top)}px`;
+    const leftPx = `${Math.round(left)}px`;
+    const widthPx = `${Math.round(width)}px`;
+    const heightPx = `${Math.round(height)}px`;
+    // Use traditional positioning but maintain GPU layer
+    element.style.top = topPx;
+    element.style.left = leftPx;
+    element.style.width = widthPx;
+    element.style.height = heightPx;
+    element.style.visibility = 'visible';
+    // Ensure GPU layer is maintained
+    if (!element.style.transform || element.style.transform === '') {
+        element.style.transform = 'translate3d(0, 0, 0)';
+    }
+}
+function setGPUOptimizedBoundsFromStrings(element, bounds) {
+    const { top, left, width, height } = bounds;
+    // Use traditional positioning but maintain GPU layer
+    element.style.top = top;
+    element.style.left = left;
+    element.style.width = width;
+    element.style.height = height;
+    element.style.visibility = 'visible';
+    // Ensure GPU layer is maintained
+    if (!element.style.transform || element.style.transform === '') {
+        element.style.transform = 'translate3d(0, 0, 0)';
+    }
+}
+function checkBoundsChanged(element, bounds) {
+    const { top, left, width, height } = bounds;
+    const topPx = `${Math.round(top)}px`;
+    const leftPx = `${Math.round(left)}px`;
+    const widthPx = `${Math.round(width)}px`;
+    const heightPx = `${Math.round(height)}px`;
+    // Check if position or size changed (back to traditional method)
+    return element.style.top !== topPx ||
+        element.style.left !== leftPx ||
+        element.style.width !== widthPx ||
+        element.style.height !== heightPx;
+}
 export class WillShowOverlayEvent extends DockviewEvent {
     get nativeEvent() {
         return this.options.nativeEvent;
@@ -286,21 +328,11 @@ export class Droptarget extends CompositeDisposable {
                 box.left = rootLeft + width - 4;
                 box.width = 4;
             }
-            const topPx = `${Math.round(box.top)}px`;
-            const leftPx = `${Math.round(box.left)}px`;
-            const widthPx = `${Math.round(box.width)}px`;
-            const heightPx = `${Math.round(box.height)}px`;
-            if (overlay.style.top === topPx &&
-                overlay.style.left === leftPx &&
-                overlay.style.width === widthPx &&
-                overlay.style.height === heightPx) {
+            // Use GPU-optimized bounds checking and setting
+            if (!checkBoundsChanged(overlay, box)) {
                 return;
             }
-            overlay.style.top = topPx;
-            overlay.style.left = leftPx;
-            overlay.style.width = widthPx;
-            overlay.style.height = heightPx;
-            overlay.style.visibility = 'visible';
+            setGPUOptimizedBounds(overlay, box);
             overlay.className = `dv-drop-target-anchor${this.options.className ? ` ${this.options.className}` : ''}`;
             toggleClass(overlay, 'dv-drop-target-left', isLeft);
             toggleClass(overlay, 'dv-drop-target-right', isRight);
@@ -352,10 +384,7 @@ export class Droptarget extends CompositeDisposable {
             box.top = `${100 * (1 - size)}%`;
             box.height = `${100 * size}%`;
         }
-        this.overlayElement.style.top = box.top;
-        this.overlayElement.style.left = box.left;
-        this.overlayElement.style.width = box.width;
-        this.overlayElement.style.height = box.height;
+        setGPUOptimizedBoundsFromStrings(this.overlayElement, box);
         toggleClass(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
         toggleClass(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
         toggleClass(this.overlayElement, 'dv-drop-target-left', isLeft);

package/dist/esm/dockview/dockviewComponent.d.ts

@@ -219,6 +219,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private readonly _floatingGroups;
     private readonly _popoutGroups;
     private readonly _rootDropTarget;
+    private _popoutRestorationPromise;
     private readonly _onDidRemoveGroup;
     readonly onDidRemoveGroup: Event<DockviewGroupPanel>;
     protected readonly _onDidAddGroup: Emitter<DockviewGroupPanel>;
@@ -235,6 +236,11 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get renderer(): DockviewPanelRenderer;
     get api(): DockviewApi;
     get floatingGroups(): DockviewFloatingGroupPanel[];
+    /**
+     * Promise that resolves when all popout groups from the last fromJSON call are restored.
+     * Useful for tests that need to wait for delayed popout creation.
+     */
+    get popoutRestorationPromise(): Promise<void>;
     constructor(container: HTMLElement, options: DockviewComponentOptions);
     setVisible(panel: DockviewGroupPanel, visible: boolean): void;
     addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: DockviewPopoutGroupOptions): Promise<boolean>;

package/dist/esm/dockview/dockviewComponent.js

@@ -19,7 +19,7 @@ import { getPanelData } from '../dnd/dataTransfer';
 import { Overlay } from '../overlay/overlay';
 import { addTestId, Classnames, getDockviewTheme, onDidWindowResizeEnd, onDidWindowMoveEnd, toggleClass, watchElementResize, } from '../dom';
 import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
-import { DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, DEFAULT_FLOATING_GROUP_POSITION, } from '../constants';
+import { DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, DEFAULT_FLOATING_GROUP_POSITION, DESERIALIZATION_POPOUT_DELAY_MS, } from '../constants';
 import { OverlayRenderContainer, } from '../overlay/overlayRenderContainer';
 import { PopoutWindow } from '../popoutWindow';
 import { StrictEventsSequencing } from './strictEventsSequencing';
@@ -74,6 +74,13 @@ export class DockviewComponent extends BaseGrid {
     get floatingGroups() {
         return this._floatingGroups;
     }
+    /**
+     * Promise that resolves when all popout groups from the last fromJSON call are restored.
+     * Useful for tests that need to wait for delayed popout creation.
+     */
+    get popoutRestorationPromise() {
+        return this._popoutRestorationPromise;
+    }
     constructor(container, options) {
         var _a, _b, _c;
         super(container, {
@@ -122,6 +129,7 @@ export class DockviewComponent extends BaseGrid {
         this.onDidMaximizedGroupChange = this._onDidMaximizedGroupChange.event;
         this._floatingGroups = [];
         this._popoutGroups = [];
+        this._popoutRestorationPromise = Promise.resolve();
         this._onDidRemoveGroup = new Emitter();
         this.onDidRemoveGroup = this._onDidRemoveGroup.event;
         this._onDidAddGroup = new Emitter();
@@ -671,6 +679,7 @@ export class DockviewComponent extends BaseGrid {
         this.updateWatermark();
     }
     orthogonalize(position, options) {
+        this.gridview.normalize();
         switch (position) {
             case 'top':
             case 'bottom':
@@ -916,18 +925,30 @@ export class DockviewComponent extends BaseGrid {
                 });
             }
             const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
-            for (const serializedPopoutGroup of serializedPopoutGroups) {
+            // Create a promise that resolves when all popout groups are created
+            const popoutPromises = [];
+            // Queue popup group creation with delays to avoid browser blocking
+            serializedPopoutGroups.forEach((serializedPopoutGroup, index) => {
                 const { data, position, gridReferenceGroup, url } = serializedPopoutGroup;
                 const group = createGroupFromSerializedState(data);
-                this.addPopoutGroup(group, {
-                    position: position !== null && position !== void 0 ? position : undefined,
-                    overridePopoutGroup: gridReferenceGroup ? group : undefined,
-                    referenceGroup: gridReferenceGroup
-                        ? this.getPanel(gridReferenceGroup)
-                        : undefined,
-                    popoutUrl: url,
+                // Add a small delay for each popup after the first to avoid browser popup blocking
+                const popoutPromise = new Promise((resolve) => {
+                    setTimeout(() => {
+                        this.addPopoutGroup(group, {
+                            position: position !== null && position !== void 0 ? position : undefined,
+                            overridePopoutGroup: gridReferenceGroup ? group : undefined,
+                            referenceGroup: gridReferenceGroup
+                                ? this.getPanel(gridReferenceGroup)
+                                : undefined,
+                            popoutUrl: url,
+                        });
+                        resolve();
+                    }, index * DESERIALIZATION_POPOUT_DELAY_MS); // 100ms delay between each popup
                 });
-            }
+                popoutPromises.push(popoutPromise);
+            });
+            // Store the promise for tests to wait on
+            this._popoutRestorationPromise = Promise.all(popoutPromises).then(() => void 0);
             for (const floatingGroup of this._floatingGroups) {
                 floatingGroup.overlay.setBounds();
             }
@@ -974,6 +995,10 @@ export class DockviewComponent extends BaseGrid {
             throw err;
         }
         this.updateWatermark();
+        // Force position updates for always visible panels after DOM layout is complete
+        requestAnimationFrame(() => {
+            this.overlayRenderContainer.updateAllPositions();
+        });
         this._onDidLayoutFromJSON.fire();
     }
     clear() {
@@ -1474,7 +1499,6 @@ export class DockviewComponent extends BaseGrid {
         const target = options.to.position;
         if (target === 'center') {
             const activePanel = from.activePanel;
-            const targetActivePanel = to.activePanel;
             const panels = this.movingLock(() => [...from.panels].map((p) => from.model.removePanel(p.id, {
                 skipSetActive: true,
             })));
@@ -1484,22 +1508,21 @@ export class DockviewComponent extends BaseGrid {
             this.movingLock(() => {
                 for (const panel of panels) {
                     to.model.openPanel(panel, {
-                        skipSetActive: true, // Always skip setting panels active during move
+                        skipSetActive: panel !== activePanel,
                         skipSetGroupActive: true,
                     });
                 }
             });
-            if (!options.skipSetActive) {
-                // Make the moved panel (from the source group) active
-                if (activePanel) {
-                    this.doSetGroupAndPanelActive(to);
-                }
+            // Ensure group becomes active after move
+            if (options.skipSetActive !== true) {
+                // For center moves (merges), we need to ensure the target group is active
+                // unless explicitly told not to (skipSetActive: true)
+                this.doSetGroupAndPanelActive(to);
             }
-            else if (targetActivePanel) {
-                // Ensure the target group's original active panel remains active
-                to.model.openPanel(targetActivePanel, {
-                    skipSetGroupActive: true
-                });
+            else if (!this.activePanel) {
+                // Even with skipSetActive: true, ensure there's an active panel if none exists
+                // This maintains basic functionality while respecting skipSetActive
+                this.doSetGroupAndPanelActive(to);
             }
         }
         else {
@@ -1529,20 +1552,26 @@ export class DockviewComponent extends BaseGrid {
                     if (selectedPopoutGroup.referenceGroup) {
                         const referenceGroup = this.getPanel(selectedPopoutGroup.referenceGroup);
                         if (referenceGroup && !referenceGroup.api.isVisible) {
-                            this.doRemoveGroup(referenceGroup, { skipActive: true });
+                            this.doRemoveGroup(referenceGroup, {
+                                skipActive: true,
+                            });
                         }
                     }
                     // Manually dispose the window without triggering restoration
                     selectedPopoutGroup.window.dispose();
                     // Update group's location and containers for target
                     if (to.api.location.type === 'grid') {
-                        from.model.renderContainer = this.overlayRenderContainer;
-                        from.model.dropTargetContainer = this.rootDropTargetContainer;
+                        from.model.renderContainer =
+                            this.overlayRenderContainer;
+                        from.model.dropTargetContainer =
+                            this.rootDropTargetContainer;
                         from.model.location = { type: 'grid' };
                     }
                     else if (to.api.location.type === 'floating') {
-                        from.model.renderContainer = this.overlayRenderContainer;
-                        from.model.dropTargetContainer = this.rootDropTargetContainer;
+                        from.model.renderContainer =
+                            this.overlayRenderContainer;
+                        from.model.dropTargetContainer =
+                            this.rootDropTargetContainer;
                         from.model.location = { type: 'floating' };
                     }
                     break;
@@ -1610,8 +1639,12 @@ export class DockviewComponent extends BaseGrid {
         from.panels.forEach((panel) => {
             this._onDidMovePanel.fire({ panel, from });
         });
-        if (!options.skipSetActive) {
-            this.doSetGroupAndPanelActive(from);
+        // Ensure group becomes active after move
+        if (options.skipSetActive === false) {
+            // Only activate when explicitly requested (skipSetActive: false)
+            // Use 'to' group for non-center moves since 'from' may have been destroyed
+            const targetGroup = to !== null && to !== void 0 ? to : from;
+            this.doSetGroupAndPanelActive(targetGroup);
         }
     }
     doSetGroupActive(group) {

package/dist/esm/gridview/gridview.d.ts

@@ -134,6 +134,7 @@ export declare class Gridview implements IDisposable {
     private _deserializeNode;
     private get root();
     private set root(value);
+    normalize(): void;
     /**
      * If the root is orientated as a VERTICAL node then nest the existing root within a new HORIZIONTAL root node
      * If the root is orientated as a HORIZONTAL node then nest the existing root within a new VERITCAL root node

package/dist/esm/gridview/gridview.js

@@ -17,6 +17,19 @@ function findLeaf(candiateNode, last) {
     }
     throw new Error('invalid node');
 }
+function cloneNode(node, size, orthogonalSize) {
+    if (node instanceof BranchNode) {
+        const result = new BranchNode(node.orientation, node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled, node.margin);
+        for (let i = node.children.length - 1; i >= 0; i--) {
+            const child = node.children[i];
+            result.addChild(cloneNode(child, child.size, child.orthogonalSize), child.size, 0, true);
+        }
+        return result;
+    }
+    else {
+        return new LeafNode(node.view, node.orientation, orthogonalSize);
+    }
+}
 function flipNode(node, size, orthogonalSize) {
     if (node instanceof BranchNode) {
         const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled, node.margin);
@@ -367,6 +380,29 @@ export class Gridview {
             this._onDidChange.fire(e);
         });
     }
+    normalize() {
+        if (!this._root) {
+            return;
+        }
+        if (this._root.children.length !== 1) {
+            return;
+        }
+        const oldRoot = this.root;
+        // can remove one level of redundant branching if there is only a single child
+        const childReference = oldRoot.children[0];
+        if (childReference instanceof LeafNode) {
+            return;
+        }
+        oldRoot.element.remove();
+        const child = oldRoot.removeChild(0); // Remove child to prevent double disposal
+        oldRoot.dispose(); // Dispose old root (won't dispose removed child)
+        child.dispose(); // Dispose the removed child
+        this._root = cloneNode(childReference, childReference.size, childReference.orthogonalSize);
+        this.element.appendChild(this._root.element);
+        this.disposable.value = this._root.onDidChange((e) => {
+            this._onDidChange.fire(e);
+        });
+    }
     /**
      * If the root is orientated as a VERTICAL node then nest the existing root within a new HORIZIONTAL root node
      * If the root is orientated as a HORIZONTAL node then nest the existing root within a new VERITCAL root node

package/dist/esm/overlay/overlayRenderContainer.d.ts

@@ -12,7 +12,10 @@ export declare class OverlayRenderContainer extends CompositeDisposable {
     readonly accessor: DockviewComponent;
     private readonly map;
     private _disposed;
+    private readonly positionCache;
+    private readonly pendingUpdates;
     constructor(element: HTMLElement, accessor: DockviewComponent);
+    updateAllPositions(): void;
     detatch(panel: IDockviewPanel): boolean;
     attach(options: {
         panel: IDockviewPanel;

package/dist/esm/overlay/overlayRenderContainer.js

@@ -1,6 +1,34 @@
 import { DragAndDropObserver } from '../dnd/dnd';
 import { getDomNodePagePosition, toggleClass } from '../dom';
 import { CompositeDisposable, Disposable, MutableDisposable, } from '../lifecycle';
+class PositionCache {
+    constructor() {
+        this.cache = new Map();
+        this.currentFrameId = 0;
+        this.rafId = null;
+    }
+    getPosition(element) {
+        const cached = this.cache.get(element);
+        if (cached && cached.frameId === this.currentFrameId) {
+            return cached.rect;
+        }
+        this.scheduleFrameUpdate();
+        const rect = getDomNodePagePosition(element);
+        this.cache.set(element, { rect, frameId: this.currentFrameId });
+        return rect;
+    }
+    invalidate() {
+        this.currentFrameId++;
+    }
+    scheduleFrameUpdate() {
+        if (this.rafId)
+            return;
+        this.rafId = requestAnimationFrame(() => {
+            this.currentFrameId++;
+            this.rafId = null;
+        });
+    }
+}
 function createFocusableElement() {
     const element = document.createElement('div');
     element.tabIndex = -1;
@@ -13,6 +41,8 @@ export class OverlayRenderContainer extends CompositeDisposable {
         this.accessor = accessor;
         this.map = {};
         this._disposed = false;
+        this.positionCache = new PositionCache();
+        this.pendingUpdates = new Set();
         this.addDisposables(Disposable.from(() => {
             for (const value of Object.values(this.map)) {
                 value.disposable.dispose();
@@ -21,6 +51,19 @@ export class OverlayRenderContainer extends CompositeDisposable {
             this._disposed = true;
         }));
     }
+    updateAllPositions() {
+        if (this._disposed) {
+            return;
+        }
+        // Invalidate position cache to force recalculation
+        this.positionCache.invalidate();
+        // Call resize function directly for all visible panels
+        for (const entry of Object.values(this.map)) {
+            if (entry.panel.api.isVisible && entry.resize) {
+                entry.resize();
+            }
+        }
+    }
     detatch(panel) {
         if (this.map[panel.api.id]) {
             const { disposable, destroy } = this.map[panel.api.id];
@@ -51,17 +94,33 @@ export class OverlayRenderContainer extends CompositeDisposable {
             this.element.appendChild(focusContainer);
         }
         const resize = () => {
-            // TODO propagate position to avoid getDomNodePagePosition calls, possible performance bottleneck?
-            const box = getDomNodePagePosition(referenceContainer.element);
-            const box2 = getDomNodePagePosition(this.element);
-            focusContainer.style.left = `${box.left - box2.left}px`;
-            focusContainer.style.top = `${box.top - box2.top}px`;
-            focusContainer.style.width = `${box.width}px`;
-            focusContainer.style.height = `${box.height}px`;
-            toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.location.type === 'floating');
+            const panelId = panel.api.id;
+            if (this.pendingUpdates.has(panelId)) {
+                return; // Update already scheduled
+            }
+            this.pendingUpdates.add(panelId);
+            requestAnimationFrame(() => {
+                this.pendingUpdates.delete(panelId);
+                if (this.isDisposed || !this.map[panelId]) {
+                    return;
+                }
+                const box = this.positionCache.getPosition(referenceContainer.element);
+                const box2 = this.positionCache.getPosition(this.element);
+                // Use traditional positioning for overlay containers
+                const left = box.left - box2.left;
+                const top = box.top - box2.top;
+                const width = box.width;
+                const height = box.height;
+                focusContainer.style.left = `${left}px`;
+                focusContainer.style.top = `${top}px`;
+                focusContainer.style.width = `${width}px`;
+                focusContainer.style.height = `${height}px`;
+                toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.location.type === 'floating');
+            });
         };
         const visibilityChanged = () => {
             if (panel.api.isVisible) {
+                this.positionCache.invalidate();
                 resize();
             }
             focusContainer.style.display = panel.api.isVisible ? '' : 'none';
@@ -156,6 +215,8 @@ export class OverlayRenderContainer extends CompositeDisposable {
         this.map[panel.api.id].disposable.dispose();
         // and reset the disposable to the active reference-container
         this.map[panel.api.id].disposable = disposable;
+        // store the resize function for direct access
+        this.map[panel.api.id].resize = resize;
         return focusContainer;
     }
 }

package/dist/styles/dockview.css

@@ -9,6 +9,10 @@
   height: 4px;
   border-radius: 2px;
   background-color: transparent;
+  /* GPU optimizations */
+  will-change: background-color, transform;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
   transition-property: background-color;
   transition-timing-function: ease-in-out;
   transition-duration: 1s;
@@ -593,9 +597,14 @@
 .dv-drop-target-container .dv-drop-target-anchor {
   position: relative;
   border: var(--dv-drag-over-border);
-  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;
   background-color: var(--dv-drag-over-background-color);
   opacity: 1;
+  /* GPU optimizations */
+  will-change: transform, opacity;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  contain: layout paint;
+  transition: opacity var(--dv-transition-duration) ease-in, transform var(--dv-transition-duration) ease-out;
 }
 .dv-drop-target {
   position: relative;
@@ -636,6 +645,7 @@
 .dv-dockview {
   position: relative;
   background-color: var(--dv-group-view-background-color);
+  contain: layout;
 }
 .dv-dockview .dv-watermark-container {
   position: absolute;
@@ -723,12 +733,18 @@
   z-index: calc(var(--dv-overlay-z-index) - 2);
   border: 1px solid var(--dv-tab-divider-color);
   box-shadow: var(--dv-floating-box-shadow);
+  /* GPU optimizations for floating group movement */
+  will-change: transform, opacity;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
 }
 .dv-resize-container.dv-hidden {
   display: none;
 }
 .dv-resize-container.dv-resize-container-dragging {
   opacity: 0.5;
+  /* Enhanced GPU acceleration during drag */
+  will-change: transform, opacity;
 }
 .dv-resize-container .dv-resize-handle-top {
   height: 4px;
@@ -806,7 +822,14 @@
   --dv-overlay-z-index: var(--dv-overlay-z-index, 999);
   position: absolute;
   z-index: 1;
+  width: 100%;
   height: 100%;
+  contain: layout paint;
+  isolation: isolate;
+  /* GPU optimizations */
+  will-change: transform;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
 }
 .dv-render-overlay.dv-render-overlay-float {
   z-index: calc(var(--dv-overlay-z-index) - 1);
@@ -821,8 +844,11 @@
   width: 100%;
 }
 .dv-pane-container.dv-animated .dv-view {
-  transition-duration: 0.15s;
-  transition-timing-function: ease-out;
+  /* GPU optimizations for smooth pane animations */
+  will-change: transform;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  transition: transform 0.15s ease-out;
 }
 .dv-pane-container .dv-view {
   overflow: hidden;
@@ -931,8 +957,11 @@
 }
 .dv-split-view-container.dv-animation .dv-view,
 .dv-split-view-container.dv-animation .dv-sash {
-  transition-duration: 0.15s;
-  transition-timing-function: ease-out;
+  /* GPU optimizations for smooth animations */
+  will-change: transform;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  transition: transform 0.15s ease-out;
 }
 .dv-split-view-container.dv-horizontal {
   height: 100%;
@@ -1104,6 +1133,9 @@
   height: 100%;
   overflow: auto;
   scrollbar-width: thin;
+  /* GPU optimizations for smooth scrolling */
+  will-change: scroll-position;
+  transform: translate3d(0, 0, 0);
   /* Track */
   /* Handle */
 }

package/package.json

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