dockview-react 4.5.0 → 4.7.0

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;
@@ -292,6 +296,7 @@
   --dv-active-sash-color: transparent;
   --dv-active-sash-transition-duration: 0.1s;
   --dv-active-sash-transition-delay: 0.5s;
+  box-sizing: border-box;
   padding: 10px;
   background-color: #ebeced;
   --dv-group-view-background-color: #ebeced;
@@ -411,6 +416,7 @@
   --dv-tab-margin: 0.5rem 0.25rem;
   --dv-tabs-and-actions-container-height: 44px;
   --dv-border-radius: 20px;
+  box-sizing: border-box;
   --dv-color-abyss-dark: rgb(11, 6, 17);
   --dv-color-abyss: #16121f;
   --dv-color-abyss-light: #201d2b;
@@ -515,6 +521,7 @@
   --dv-tab-margin: 0.5rem 0.25rem;
   --dv-tabs-and-actions-container-height: 44px;
   --dv-border-radius: 20px;
+  box-sizing: border-box;
   --dv-drag-over-border: 2px solid rgb(91, 30, 207);
   --dv-drag-over-background-color: "";
   --dv-group-view-background-color: #f6f5f9;
@@ -590,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;
@@ -633,6 +645,7 @@
 .dv-dockview {
   position: relative;
   background-color: var(--dv-group-view-background-color);
+  contain: layout;
 }
 .dv-dockview .dv-watermark-container {
   position: absolute;
@@ -720,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;
@@ -803,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);
@@ -818,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;
@@ -928,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%;
@@ -1101,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 */
 }
@@ -1181,6 +1216,8 @@
 .dv-tabs-and-actions-container .dv-void-container {
   display: flex;
   flex-grow: 1;
+}
+.dv-tabs-and-actions-container .dv-void-container.dv-draggable {
   cursor: grab;
 }
 .dv-tabs-and-actions-container .dv-right-actions-container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-react",
-  "version": "4.5.0",
+  "version": "4.7.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",
@@ -41,19 +41,18 @@
     "README.md"
   ],
   "scripts": {
-    "build": "npm run build:package && npm run build:bundles",
-    "build:bundles": "rollup -c",
+    "build:bundle": "rollup -c",
     "build:cjs": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.json --verbose --extendedDiagnostics",
     "build:css": "node scripts/copy-css.js",
     "build:esm": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.esm.json --verbose --extendedDiagnostics",
-    "build:package": "npm run build:cjs && npm run build:esm && npm run build:css",
+    "build": "npm run build:cjs && npm run build:esm && npm run build:css",
     "clean": "rimraf dist/ .build/ .rollup.cache/",
-    "prepublishOnly": "npm run rebuild && npm run test",
+    "prepublishOnly": "npm run rebuild && npm run build:bundle && npm run test",
     "rebuild": "npm run clean && npm run build",
     "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-react",
     "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-react --coverage"
   },
   "dependencies": {
-    "dockview": "^4.5.0"
+    "dockview": "^4.7.0"
   }
 }