dockview 6.3.0 → 6.4.0

package/dist/styles/dockview.css

@@ -2344,6 +2344,16 @@
   /* Enhanced GPU acceleration during drag */
   will-change: transform, opacity;
 }
+.dv-resize-container .dv-resize-handle-top,
+.dv-resize-container .dv-resize-handle-bottom,
+.dv-resize-container .dv-resize-handle-left,
+.dv-resize-container .dv-resize-handle-right,
+.dv-resize-container .dv-resize-handle-topleft,
+.dv-resize-container .dv-resize-handle-topright,
+.dv-resize-container .dv-resize-handle-bottomleft,
+.dv-resize-container .dv-resize-handle-bottomright {
+  touch-action: none;
+}
 .dv-resize-container .dv-resize-handle-top {
   height: 4px;
   width: calc(100% - 8px);
@@ -2416,6 +2426,55 @@
   position: absolute;
   cursor: se-resize;
 }
+@media (pointer: coarse) {
+  .dv-resize-container .dv-resize-handle-top,
+  .dv-resize-container .dv-resize-handle-bottom {
+    height: 16px;
+    width: calc(100% - 48px);
+    left: 24px;
+  }
+  .dv-resize-container .dv-resize-handle-top {
+    top: -10px;
+  }
+  .dv-resize-container .dv-resize-handle-bottom {
+    bottom: -10px;
+  }
+  .dv-resize-container .dv-resize-handle-left,
+  .dv-resize-container .dv-resize-handle-right {
+    width: 16px;
+    height: calc(100% - 48px);
+    top: 24px;
+  }
+  .dv-resize-container .dv-resize-handle-left {
+    left: -10px;
+  }
+  .dv-resize-container .dv-resize-handle-right {
+    right: -10px;
+  }
+  .dv-resize-container .dv-resize-handle-topleft,
+  .dv-resize-container .dv-resize-handle-topright,
+  .dv-resize-container .dv-resize-handle-bottomleft,
+  .dv-resize-container .dv-resize-handle-bottomright {
+    height: 24px;
+    width: 24px;
+  }
+  .dv-resize-container .dv-resize-handle-topleft {
+    top: -12px;
+    left: -12px;
+  }
+  .dv-resize-container .dv-resize-handle-topright {
+    top: -12px;
+    right: -12px;
+  }
+  .dv-resize-container .dv-resize-handle-bottomleft {
+    bottom: -12px;
+    left: -12px;
+  }
+  .dv-resize-container .dv-resize-handle-bottomright {
+    bottom: -12px;
+    right: -12px;
+  }
+}
 .dv-render-overlay {
   --dv-overlay-z-index: var(--dv-overlay-z-index, 999);
   position: absolute;
@@ -2633,6 +2692,25 @@
   transition-duration: var(--dv-active-sash-transition-duration, 0.1s);
   transition-delay: var(--dv-active-sash-transition-delay, 0.5s);
 }
+@media (pointer: coarse) {
+  .dv-split-view-container .dv-sash-container > .dv-sash:not(.dv-disabled)::before {
+    content: "";
+    position: absolute;
+    background: transparent;
+  }
+  .dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash:not(.dv-disabled)::before {
+    top: 0;
+    bottom: 0;
+    left: -10px;
+    right: -10px;
+  }
+  .dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash:not(.dv-disabled)::before {
+    left: 0;
+    right: 0;
+    top: -10px;
+    bottom: -10px;
+  }
+}
 .dv-split-view-container .dv-view-container {
   position: relative;
   height: 100%;
@@ -2704,6 +2782,11 @@
 .dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {
   visibility: visible;
 }
+@media (hover: none) {
+  .dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {
+    visibility: visible;
+  }
+}
 .dv-tab .dv-default-tab {
   position: relative;
   height: 100%;
@@ -2728,6 +2811,11 @@
   border-radius: 2px;
   background-color: var(--dv-icon-hover-background-color);
 }
+@media (pointer: coarse) {
+  .dv-tab .dv-default-tab .dv-default-tab-action {
+    padding: 8px;
+  }
+}
 .dv-tabs-overflow-dropdown-default {
   height: 100%;
   color: var(--dv-activegroup-hiddenpanel-tab-color);
@@ -2748,6 +2836,7 @@
   border-radius: 2px;
   background-color: var(--dv-icon-hover-background-color);
 }
+@charset "UTF-8";
 .dv-tabs-container {
   display: flex;
   position: relative;
@@ -2757,12 +2846,29 @@
   /* GPU optimizations for smooth scrolling */
   will-change: scroll-position;
   transform: translate3d(0, 0, 0);
+  /**
+   * Stop scroll-chaining at the tab strip so that wheel / trackpad
+   * overscroll past the strip's edges doesn't trigger the browser's
+   * swipe-to-go-back-or-forward gesture (and doesn't scroll the page
+   * either). `contain` keeps the native bounce visuals; `none` would
+   * also disable them.
+   */
+  overscroll-behavior: contain;
+  /**
+   * Empty space between tabs (and the scrollbar lane) keeps pan-x so a
+   * flick on those areas produces native momentum scroll. The tab and
+   * chip elements themselves opt out (`touch-action: none`) so the
+   * pointer drag source owns the gesture from pointerdown — a flick on
+   * a tab or chip always becomes a drag, regardless of direction.
+   */
+  touch-action: pan-x;
 }
 .dv-tabs-container.dv-tabs-container-vertical {
   width: 100%;
   height: fit-content;
   max-height: 100%;
   writing-mode: vertical-rl;
+  touch-action: pan-y;
 }
 .dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before, .dv-tabs-container.dv-vertical .dv-tab:not(:first-child)::before {
   content: " ";
@@ -2802,7 +2908,10 @@
 }
 
 .dv-tab {
-  -webkit-user-drag: element;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
   outline: none;
   padding: 0.25rem 0.5rem;
   cursor: pointer;
@@ -2810,6 +2919,7 @@
   box-sizing: border-box;
   font-size: var(--dv-tab-font-size);
   margin: var(--dv-tab-margin);
+  touch-action: none;
 }
 .dv-tab.dv-tab--shifting {
   will-change: transform, margin-left, margin-right, margin-top, margin-bottom;
@@ -2860,6 +2970,7 @@
   white-space: nowrap;
   box-sizing: border-box;
   line-height: 1;
+  touch-action: none;
   background-color: var(--dv-tab-group-color);
   color: white;
 }
@@ -3037,6 +3148,11 @@
 .dv-tabs-and-actions-container .dv-void-container {
   display: flex;
   flex-grow: 1;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  touch-action: none;
 }
 .dv-tabs-and-actions-container .dv-void-container.dv-draggable {
   cursor: grab;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dockview",
-    "version": "6.3.0",
+    "version": "6.4.0",
     "description": "React docking layout manager — tabs, groups, grids, splitviews, drag and drop, floating panels",
     "keywords": [
         "splitview",
@@ -20,6 +20,8 @@
         "drag-and-drop",
         "drag",
         "drop",
+        "touch",
+        "mobile",
         "typescript",
         "zero-dependency",
         "ide-layout",
@@ -68,7 +70,7 @@
         "format:check": "prettier --check 'src/**/*.{ts,tsx,js,jsx}'"
     },
     "dependencies": {
-        "dockview-core": "^6.3.0"
+        "dockview-core": "^6.4.0"
     },
     "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"