dockview-core 6.3.0 → 6.4.0

package/dist/dockview-core.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 6.3.0
+ * @version 6.4.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -551,7 +551,7 @@
      * Should be more efficient than element.querySelectorAll("*") since there
      * is no need to store every element in-memory using this approach
      */
-    function allTagsNamesInclusiveOfShadowDoms(tagNames) {
+    function allTagsNamesInclusiveOfShadowDoms(tagNames, rootNode) {
         const iframes = [];
         function findIframesInNode(node) {
             if (node.nodeType === Node.ELEMENT_NODE) {
@@ -566,11 +566,15 @@
                 }
             }
         }
-        findIframesInNode(document.documentElement);
+        // Document → walk from its root element. Element → walk from itself.
+        const startEl = rootNode instanceof Document
+            ? rootNode.documentElement
+            : rootNode;
+        findIframesInNode(startEl);
         return iframes;
     }
     function disableIframePointEvents(rootNode = document) {
-        const iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW']);
+        const iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW'], rootNode);
         const original = new WeakMap(); // don't hold onto HTMLElement references longer than required
         for (const iframe of iframes) {
             original.set(iframe, iframe.style.pointerEvents);
@@ -3990,67 +3994,6 @@
         }
     }
 
-    class DragHandler extends CompositeDisposable {
-        constructor(el, disabled) {
-            super();
-            this.el = el;
-            this.disabled = disabled;
-            this.dataDisposable = new MutableDisposable();
-            this.pointerEventsDisposable = new MutableDisposable();
-            this._onDragStart = new Emitter();
-            this.onDragStart = this._onDragStart.event;
-            this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
-            this.configure();
-        }
-        setDisabled(disabled) {
-            this.disabled = disabled;
-        }
-        isCancelled(_event) {
-            return false;
-        }
-        configure() {
-            this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-                if (event.defaultPrevented ||
-                    this.isCancelled(event) ||
-                    this.disabled) {
-                    event.preventDefault();
-                    return;
-                }
-                const iframes = disableIframePointEvents();
-                this.pointerEventsDisposable.value = {
-                    dispose: () => {
-                        iframes.release();
-                    },
-                };
-                this.el.classList.add('dv-dragged');
-                setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
-                this.dataDisposable.value = this.getData(event);
-                this._onDragStart.fire(event);
-                if (event.dataTransfer) {
-                    event.dataTransfer.effectAllowed = 'move';
-                    const hasData = event.dataTransfer.items.length > 0;
-                    if (!hasData) {
-                        /**
-                         * Although this is not used by dockview many third party dnd libraries will check
-                         * dataTransfer.types to determine valid drag events.
-                         *
-                         * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
-                         * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
-                         * dnd logic. You can see the code at
-                     P    * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
-                         */
-                        event.dataTransfer.setData('text/plain', '');
-                    }
-                }
-            }), addDisposableListener(this.el, 'dragend', () => {
-                this.pointerEventsDisposable.dispose();
-                setTimeout(() => {
-                    this.dataDisposable.dispose(); // allow the data to be read by other handlers before disposing
-                }, 0);
-            }));
-        }
-    }
-
     class DragAndDropObserver extends CompositeDisposable {
         constructor(element, callbacks) {
             super();
@@ -4101,48 +4044,197 @@
         }
     }
 
-    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);
+    // Two render paths: in-place (dropzone appended to drop element) and
+    // anchored (overlay rendered into an external anchor container).
+    const DEFAULT_SIZE = { value: 50, type: 'percentage' };
+    const SMALL_WIDTH_BOUNDARY = 100;
+    const SMALL_HEIGHT_BOUNDARY = 100;
+    function createOverlayElements() {
+        const dropzone = document.createElement('div');
+        dropzone.className = 'dv-drop-target-dropzone';
+        const selection = document.createElement('div');
+        selection.className = 'dv-drop-target-selection';
+        dropzone.appendChild(selection);
+        return { dropzone, selection };
+    }
+    function computeOverlayShape(quadrant, width, height, overlayModel) {
+        var _a, _b, _c;
+        const smallWidthBoundary = (_a = overlayModel === null || overlayModel === void 0 ? void 0 : overlayModel.smallWidthBoundary) !== null && _a !== void 0 ? _a : SMALL_WIDTH_BOUNDARY;
+        const smallHeightBoundary = (_b = overlayModel === null || overlayModel === void 0 ? void 0 : overlayModel.smallHeightBoundary) !== null && _b !== void 0 ? _b : SMALL_HEIGHT_BOUNDARY;
+        const isSmallX = width < smallWidthBoundary;
+        const isSmallY = height < smallHeightBoundary;
+        const isLeft = quadrant === 'left';
+        const isRight = quadrant === 'right';
+        const isTop = quadrant === 'top';
+        const isBottom = quadrant === 'bottom';
+        const rightClass = !isSmallX && isRight;
+        const leftClass = !isSmallX && isLeft;
+        const topClass = !isSmallY && isTop;
+        const bottomClass = !isSmallY && isBottom;
+        let size = 1;
+        const sizeOptions = (_c = overlayModel === null || overlayModel === void 0 ? void 0 : overlayModel.size) !== null && _c !== void 0 ? _c : DEFAULT_SIZE;
+        if (sizeOptions.type === 'percentage') {
+            size = clamp(sizeOptions.value, 0, 100) / 100;
+        }
+        else {
+            if (rightClass || leftClass) {
+                size = clamp(0, sizeOptions.value, width) / width;
+            }
+            if (topClass || bottomClass) {
+                size = clamp(0, sizeOptions.value, height) / height;
+            }
+        }
+        return {
+            isSmallX,
+            isSmallY,
+            isLeft,
+            isRight,
+            isTop,
+            isBottom,
+            rightClass,
+            leftClass,
+            topClass,
+            bottomClass,
+            size,
+        };
+    }
+    function renderInPlaceOverlay(overlay, quadrant, width, height, overlayModel) {
+        const shape = computeOverlayShape(quadrant, width, height, overlayModel);
+        const { rightClass, leftClass, topClass, bottomClass, size } = shape;
+        const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
+        if (rightClass) {
+            box.left = `${100 * (1 - size)}%`;
+            box.width = `${100 * size}%`;
+        }
+        else if (leftClass) {
+            box.width = `${100 * size}%`;
+        }
+        else if (topClass) {
+            box.height = `${100 * size}%`;
+        }
+        else if (bottomClass) {
+            box.top = `${100 * (1 - size)}%`;
+            box.height = `${100 * size}%`;
+        }
+        if (shape.isSmallX && shape.isLeft) {
+            box.width = '4px';
+        }
+        if (shape.isSmallX && shape.isRight) {
+            box.left = `${width - 4}px`;
+            box.width = '4px';
+        }
+        if (shape.isSmallY && shape.isTop) {
+            box.height = '4px';
+        }
+        if (shape.isSmallY && shape.isBottom) {
+            box.top = `${height - 4}px`;
+            box.height = '4px';
+        }
+        overlay.style.top = box.top;
+        overlay.style.left = box.left;
+        overlay.style.width = box.width;
+        overlay.style.height = box.height;
+        overlay.style.visibility = 'visible';
+        if (!overlay.style.transform || overlay.style.transform === '') {
+            overlay.style.transform = 'translate3d(0, 0, 0)';
+        }
+        const isLine = (shape.isSmallX && (shape.isLeft || shape.isRight)) ||
+            (shape.isSmallY && (shape.isTop || shape.isBottom));
+        toggleClass(overlay, 'dv-drop-target-small-vertical', shape.isSmallY);
+        toggleClass(overlay, 'dv-drop-target-small-horizontal', shape.isSmallX);
+        toggleClass(overlay, 'dv-drop-target-selection-line', isLine);
+        toggleClass(overlay, 'dv-drop-target-left', shape.isLeft);
+        toggleClass(overlay, 'dv-drop-target-right', shape.isRight);
+        toggleClass(overlay, 'dv-drop-target-top', shape.isTop);
+        toggleClass(overlay, 'dv-drop-target-bottom', shape.isBottom);
+        toggleClass(overlay, 'dv-drop-target-center', quadrant === 'center');
+    }
+    function checkAnchoredBoundsChanged(overlay, bounds) {
+        const topPx = `${Math.round(bounds.top)}px`;
+        const leftPx = `${Math.round(bounds.left)}px`;
+        const widthPx = `${Math.round(bounds.width)}px`;
+        const heightPx = `${Math.round(bounds.height)}px`;
+        return (overlay.style.top !== topPx ||
+            overlay.style.left !== leftPx ||
+            overlay.style.width !== widthPx ||
+            overlay.style.height !== heightPx);
+    }
+    function applyAnchoredBounds(overlay, bounds) {
+        overlay.style.top = `${Math.round(bounds.top)}px`;
+        overlay.style.left = `${Math.round(bounds.left)}px`;
+        overlay.style.width = `${Math.round(bounds.width)}px`;
+        overlay.style.height = `${Math.round(bounds.height)}px`;
+        overlay.style.visibility = 'visible';
+        if (!overlay.style.transform || overlay.style.transform === '') {
+            overlay.style.transform = 'translate3d(0, 0, 0)';
+        }
+    }
+    /** `boundsChanged: false` lets callers skip redundant work on tight drag loops. */
+    function renderAnchoredOverlay(args) {
+        const shape = computeOverlayShape(args.quadrant, args.width, args.height, args.overlayModel);
+        const { rightClass, leftClass, topClass, bottomClass, size } = shape;
+        const elBox = args.outlineElement.getBoundingClientRect();
+        const ta = args.targetModel.getElements(undefined, args.outlineElement);
+        const el = ta.root;
+        const overlay = ta.overlay;
+        const bigbox = el.getBoundingClientRect();
+        const rootTop = elBox.top - bigbox.top;
+        const rootLeft = elBox.left - bigbox.left;
+        const box = {
+            top: rootTop,
+            left: rootLeft,
+            width: args.width,
+            height: args.height,
+        };
+        if (rightClass) {
+            box.left = rootLeft + args.width * (1 - size);
+            box.width = args.width * size;
+        }
+        else if (leftClass) {
+            box.width = args.width * size;
+        }
+        else if (topClass) {
+            box.height = args.height * size;
+        }
+        else if (bottomClass) {
+            box.top = rootTop + args.height * (1 - size);
+            box.height = args.height * size;
+        }
+        if (shape.isSmallX && shape.isLeft) {
+            box.width = 4;
+        }
+        if (shape.isSmallX && shape.isRight) {
+            box.left = rootLeft + args.width - 4;
+            box.width = 4;
+        }
+        if (shape.isSmallY && shape.isTop) {
+            box.height = 4;
+        }
+        if (shape.isSmallY && shape.isBottom) {
+            box.top = rootTop + args.height - 4;
+            box.height = 4;
+        }
+        if (!checkAnchoredBoundsChanged(overlay, box)) {
+            return { boundsChanged: false, targetChanged: ta.changed };
+        }
+        applyAnchoredBounds(overlay, box);
+        overlay.className = `dv-drop-target-anchor${args.className ? ` ${args.className}` : ''}`;
+        toggleClass(overlay, 'dv-drop-target-left', shape.isLeft);
+        toggleClass(overlay, 'dv-drop-target-right', shape.isRight);
+        toggleClass(overlay, 'dv-drop-target-top', shape.isTop);
+        toggleClass(overlay, 'dv-drop-target-bottom', shape.isBottom);
+        toggleClass(overlay, 'dv-drop-target-anchor-line', (shape.isSmallX && (shape.isLeft || shape.isRight)) ||
+            (shape.isSmallY && (shape.isTop || shape.isBottom)));
+        toggleClass(overlay, 'dv-drop-target-center', args.quadrant === 'center');
+        if (ta.changed) {
+            toggleClass(overlay, 'dv-drop-target-anchor-container-changed', true);
+            setTimeout(() => {
+                toggleClass(overlay, 'dv-drop-target-anchor-container-changed', false);
+            }, 10);
+        }
+        return { boundsChanged: true, targetChanged: ta.changed };
     }
+
     class WillShowOverlayEvent extends DockviewEvent {
         get nativeEvent() {
             return this.options.nativeEvent;
@@ -4187,16 +4279,10 @@
                 throw new Error(`invalid position '${position}'`);
         }
     }
-    const DEFAULT_ACTIVATION_SIZE = {
+    const DEFAULT_ACTIVATION_SIZE$1 = {
         value: 20,
         type: 'percentage',
     };
-    const DEFAULT_SIZE = {
-        value: 50,
-        type: 'percentage',
-    };
-    const SMALL_WIDTH_BOUNDARY = 100;
-    const SMALL_HEIGHT_BOUNDARY = 100;
     class Droptarget extends CompositeDisposable {
         get disabled() {
             return this._disabled;
@@ -4277,20 +4363,12 @@
                     this.markAsUsed(e);
                     if (overrideTarget) ;
                     else if (!this.targetElement) {
-                        this.targetElement = document.createElement('div');
-                        this.targetElement.className = 'dv-drop-target-dropzone';
-                        this.overlayElement = document.createElement('div');
-                        this.overlayElement.className = 'dv-drop-target-selection';
+                        const els = createOverlayElements();
+                        this.targetElement = els.dropzone;
+                        this.overlayElement = els.selection;
                         this._state = 'center';
-                        this.targetElement.appendChild(this.overlayElement);
                         target.classList.add('dv-drop-target');
                         target.append(this.targetElement);
-                        // this.overlayElement.style.opacity = '0';
-                        // requestAnimationFrame(() => {
-                        //     if (this.overlayElement) {
-                        //         this.overlayElement.style.opacity = '';
-                        //     }
-                        // });
                     }
                     this.toggleClasses(quadrant, width, height);
                     this._state = quadrant;
@@ -4360,166 +4438,29 @@
             return typeof value === 'boolean' && value;
         }
         toggleClasses(quadrant, width, height) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            var _a, _b, _c, _d, _e;
             const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
-            if (!target && !this.overlayElement) {
-                return;
-            }
-            const smallWidthBoundary = (_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.smallWidthBoundary) !== null && _d !== void 0 ? _d : SMALL_WIDTH_BOUNDARY;
-            const smallHeightBoundary = (_f = (_e = this.options.overlayModel) === null || _e === void 0 ? void 0 : _e.smallHeightBoundary) !== null && _f !== void 0 ? _f : SMALL_HEIGHT_BOUNDARY;
-            const isSmallX = width < smallWidthBoundary;
-            const isSmallY = height < smallHeightBoundary;
-            const isLeft = quadrant === 'left';
-            const isRight = quadrant === 'right';
-            const isTop = quadrant === 'top';
-            const isBottom = quadrant === 'bottom';
-            const rightClass = !isSmallX && isRight;
-            const leftClass = !isSmallX && isLeft;
-            const topClass = !isSmallY && isTop;
-            const bottomClass = !isSmallY && isBottom;
-            let size = 1;
-            const sizeOptions = (_h = (_g = this.options.overlayModel) === null || _g === void 0 ? void 0 : _g.size) !== null && _h !== void 0 ? _h : DEFAULT_SIZE;
-            if (sizeOptions.type === 'percentage') {
-                size = clamp(sizeOptions.value, 0, 100) / 100;
-            }
-            else {
-                if (rightClass || leftClass) {
-                    size = clamp(0, sizeOptions.value, width) / width;
-                }
-                if (topClass || bottomClass) {
-                    size = clamp(0, sizeOptions.value, height) / height;
-                }
-            }
             if (target) {
-                const outlineEl = (_l = (_k = (_j = this.options).getOverlayOutline) === null || _k === void 0 ? void 0 : _k.call(_j)) !== null && _l !== void 0 ? _l : this.element;
-                const elBox = outlineEl.getBoundingClientRect();
-                const ta = target.getElements(undefined, outlineEl);
-                const el = ta.root;
-                const overlay = ta.overlay;
-                const bigbox = el.getBoundingClientRect();
-                const rootTop = elBox.top - bigbox.top;
-                const rootLeft = elBox.left - bigbox.left;
-                const box = {
-                    top: rootTop,
-                    left: rootLeft,
-                    width: width,
-                    height: height,
-                };
-                if (rightClass) {
-                    box.left = rootLeft + width * (1 - size);
-                    box.width = width * size;
-                }
-                else if (leftClass) {
-                    box.width = width * size;
-                }
-                else if (topClass) {
-                    box.height = height * size;
-                }
-                else if (bottomClass) {
-                    box.top = rootTop + height * (1 - size);
-                    box.height = height * size;
-                }
-                if (isSmallX && isLeft) {
-                    box.width = 4;
-                }
-                if (isSmallX && isRight) {
-                    box.left = rootLeft + width - 4;
-                    box.width = 4;
-                }
-                if (isSmallY && isTop) {
-                    box.height = 4;
-                }
-                if (isSmallY && isBottom) {
-                    box.top = rootTop + height - 4;
-                    box.height = 4;
-                }
-                // Use GPU-optimized bounds checking and setting
-                if (!checkBoundsChanged(overlay, box)) {
-                    return;
-                }
-                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);
-                toggleClass(overlay, 'dv-drop-target-top', isTop);
-                toggleClass(overlay, 'dv-drop-target-bottom', isBottom);
-                toggleClass(overlay, 'dv-drop-target-anchor-line', (isSmallX && (isLeft || isRight)) ||
-                    (isSmallY && (isTop || isBottom)));
-                toggleClass(overlay, 'dv-drop-target-center', quadrant === 'center');
-                if (ta.changed) {
-                    toggleClass(overlay, 'dv-drop-target-anchor-container-changed', true);
-                    setTimeout(() => {
-                        toggleClass(overlay, 'dv-drop-target-anchor-container-changed', false);
-                    }, 10);
-                }
+                const outlineEl = (_e = (_d = (_c = this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : this.element;
+                renderAnchoredOverlay({
+                    outlineElement: outlineEl,
+                    targetModel: target,
+                    quadrant,
+                    width,
+                    height,
+                    overlayModel: this.options.overlayModel,
+                    className: this.options.className,
+                });
                 return;
             }
             if (!this.overlayElement) {
                 return;
             }
-            const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
-            /**
-             * You can also achieve the overlay placement using the transform CSS property
-             * to translate and scale the element however this has the undesired effect of
-             * 'skewing' the element. Comment left here for anybody that ever revisits this.
-             *
-             * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform
-             *
-             * right
-             * translateX(${100 * (1 - size) / 2}%) scaleX(${scale})
-             *
-             * left
-             * translateX(-${100 * (1 - size) / 2}%) scaleX(${scale})
-             *
-             * top
-             * translateY(-${100 * (1 - size) / 2}%) scaleY(${scale})
-             *
-             * bottom
-             * translateY(${100 * (1 - size) / 2}%) scaleY(${scale})
-             */
-            if (rightClass) {
-                box.left = `${100 * (1 - size)}%`;
-                box.width = `${100 * size}%`;
-            }
-            else if (leftClass) {
-                box.width = `${100 * size}%`;
-            }
-            else if (topClass) {
-                box.height = `${100 * size}%`;
-            }
-            else if (bottomClass) {
-                box.top = `${100 * (1 - size)}%`;
-                box.height = `${100 * size}%`;
-            }
-            if (isSmallX && isLeft) {
-                box.width = '4px';
-            }
-            if (isSmallX && isRight) {
-                box.left = `${width - 4}px`;
-                box.width = '4px';
-            }
-            if (isSmallY && isTop) {
-                box.height = '4px';
-            }
-            if (isSmallY && isBottom) {
-                box.top = `${height - 4}px`;
-                box.height = '4px';
-            }
-            setGPUOptimizedBoundsFromStrings(this.overlayElement, box);
-            const isLine = (isSmallX && (isLeft || isRight)) ||
-                (isSmallY && (isTop || isBottom));
-            toggleClass(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
-            toggleClass(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
-            toggleClass(this.overlayElement, 'dv-drop-target-selection-line', isLine);
-            toggleClass(this.overlayElement, 'dv-drop-target-left', isLeft);
-            toggleClass(this.overlayElement, 'dv-drop-target-right', isRight);
-            toggleClass(this.overlayElement, 'dv-drop-target-top', isTop);
-            toggleClass(this.overlayElement, 'dv-drop-target-bottom', isBottom);
-            toggleClass(this.overlayElement, 'dv-drop-target-center', quadrant === 'center');
+            renderInPlaceOverlay(this.overlayElement, quadrant, width, height, this.options.overlayModel);
         }
         calculateQuadrant(overlayType, x, y, width, height) {
             var _a, _b;
-            const activationSizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) !== null && _b !== void 0 ? _b : DEFAULT_ACTIVATION_SIZE;
+            const activationSizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) !== null && _b !== void 0 ? _b : DEFAULT_ACTIVATION_SIZE$1;
             const isPercentage = activationSizeOptions.type === 'percentage';
             if (isPercentage) {
                 return calculateQuadrantAsPercentage(overlayType, x, y, width, height, activationSizeOptions.value);
@@ -4577,6 +4518,723 @@
         return 'center';
     }
 
+    function addGhostImage(dataTransfer, ghostElement, options) {
+        var _a, _b;
+        // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
+        addClasses(ghostElement, 'dv-dragged');
+        // move the element off-screen initially otherwise it may in some cases be rendered at (0,0) momentarily
+        ghostElement.style.top = '-9999px';
+        document.body.appendChild(ghostElement);
+        dataTransfer.setDragImage(ghostElement, (_a = options === null || options === void 0 ? void 0 : options.x) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.y) !== null && _b !== void 0 ? _b : 0);
+        setTimeout(() => {
+            removeClasses(ghostElement, 'dv-dragged');
+            ghostElement.remove();
+        }, 0);
+    }
+
+    /**
+     * Singleton — only one pointer-driven drag active at a time.
+     *
+     * State is shared across every Dockview instance on the page. Targets
+     * from instance B receive hit-tests from drags originating in instance A;
+     * that's intentional for cross-instance drops since `LocalSelectionTransfer`
+     * is also process-wide. The corollary is that every Tabs subscriber to
+     * `onDragMove` fires for every pointer drag globally — each subscriber
+     * hit-tests against its own DOM, so this is O(N) per pointermove where N
+     * is the number of registered listeners across all instances.
+     */
+    class PointerDragController extends CompositeDisposable {
+        static getInstance() {
+            if (!PointerDragController._instance) {
+                PointerDragController._instance = new PointerDragController();
+            }
+            return PointerDragController._instance;
+        }
+        constructor() {
+            super();
+            this._targets = new Set();
+            /** Kept in sync with `_targets` so hit-testing is allocation-free. */
+            this._targetByElement = new Map();
+            this._onDragStart = new Emitter();
+            this.onDragStart = this._onDragStart.event;
+            this._onDragMove = new Emitter();
+            this.onDragMove = this._onDragMove.event;
+            this._onDragEnd = new Emitter();
+            this.onDragEnd = this._onDragEnd.event;
+            this.addDisposables(this._onDragStart, this._onDragMove, this._onDragEnd);
+        }
+        get active() {
+            return this._active;
+        }
+        registerTarget(target) {
+            this._targets.add(target);
+            this._targetByElement.set(target.element, target);
+            return {
+                dispose: () => {
+                    this._targets.delete(target);
+                    if (this._targetByElement.get(target.element) === target) {
+                        this._targetByElement.delete(target.element);
+                    }
+                    if (this._currentTarget === target) {
+                        this._currentTarget = undefined;
+                    }
+                },
+            };
+        }
+        beginDrag(args) {
+            var _a, _b, _c;
+            if (this._active) {
+                this.cancel();
+            }
+            const { pointerEvent, source } = args;
+            // Call `getData()` before mutating controller state — a throw
+            // here would otherwise leave `_active` populated with no window
+            // listeners installed, blocking every subsequent drag.
+            const dataDisposable = args.getData();
+            this._active = {
+                pointerId: pointerEvent.pointerId,
+                startX: pointerEvent.clientX,
+                startY: pointerEvent.clientY,
+                source,
+            };
+            this._onDragMoveCallback = args.onDragMove;
+            this._onDragEndCallback = args.onDragEnd;
+            this._dataDisposable = dataDisposable;
+            this._ghost = args.ghost;
+            // Iframes capture pointermove once the cursor crosses into them,
+            // which would freeze the drag from the parent window's POV.
+            this._iframeShield = disableIframePointEvents((_a = source.ownerDocument) !== null && _a !== void 0 ? _a : document);
+            const startEvent = {
+                clientX: pointerEvent.clientX,
+                clientY: pointerEvent.clientY,
+                pointerEvent,
+            };
+            this._onDragStart.fire(startEvent);
+            // Source's owning window — popout drags fire on their own window,
+            // not the main one.
+            const targetWindow = (_c = (_b = source.ownerDocument) === null || _b === void 0 ? void 0 : _b.defaultView) !== null && _c !== void 0 ? _c : window;
+            this._moveListener = addDisposableListener(targetWindow, 'pointermove', (e) => {
+                if (!this._active || e.pointerId !== this._active.pointerId) {
+                    return;
+                }
+                this._handleMove(e);
+            });
+            this._upListener = addDisposableListener(targetWindow, 'pointerup', (e) => {
+                if (!this._active || e.pointerId !== this._active.pointerId) {
+                    return;
+                }
+                this._handleEnd(e, true);
+            });
+            this._cancelListener = addDisposableListener(targetWindow, 'pointercancel', (e) => {
+                if (!this._active || e.pointerId !== this._active.pointerId) {
+                    return;
+                }
+                this._handleEnd(e, false);
+            });
+        }
+        cancel() {
+            var _a, _b;
+            if (!this._active) {
+                return;
+            }
+            (_a = this._currentTarget) === null || _a === void 0 ? void 0 : _a.handleDragLeave();
+            this._teardown();
+            (_b = this._dataDisposable) === null || _b === void 0 ? void 0 : _b.dispose();
+            this._dataDisposable = undefined;
+        }
+        _findTargetUnder(x, y) {
+            var _a, _b;
+            // `elementsFromPoint` is topmost-first; walk up to find the closest
+            // registered ancestor (so a tab beats the layout-root that contains it).
+            // Use the source's owning document so popout drags hit their own targets.
+            const sourceDoc = (_b = (_a = this._active) === null || _a === void 0 ? void 0 : _a.source.ownerDocument) !== null && _b !== void 0 ? _b : document;
+            const elements = sourceDoc.elementsFromPoint(x, y);
+            for (const el of elements) {
+                let current = el;
+                while (current) {
+                    const target = this._targetByElement.get(current);
+                    if (target) {
+                        return target;
+                    }
+                    current = current.parentElement;
+                }
+            }
+            return undefined;
+        }
+        _handleMove(e) {
+            var _a, _b, _c;
+            (_a = this._ghost) === null || _a === void 0 ? void 0 : _a.update(e.clientX, e.clientY);
+            const dragEvent = {
+                clientX: e.clientX,
+                clientY: e.clientY,
+                pointerEvent: e,
+            };
+            const newTarget = this._findTargetUnder(e.clientX, e.clientY);
+            if (newTarget !== this._currentTarget) {
+                (_b = this._currentTarget) === null || _b === void 0 ? void 0 : _b.handleDragLeave();
+                this._currentTarget = newTarget;
+            }
+            if (newTarget) {
+                newTarget.handleDragOver(dragEvent);
+            }
+            (_c = this._onDragMoveCallback) === null || _c === void 0 ? void 0 : _c.call(this, dragEvent);
+            this._onDragMove.fire(dragEvent);
+        }
+        _handleEnd(e, dropped) {
+            var _a;
+            const dragEvent = {
+                clientX: e.clientX,
+                clientY: e.clientY,
+                pointerEvent: e,
+            };
+            if (dropped && this._currentTarget) {
+                this._currentTarget.handleDrop(dragEvent);
+            }
+            else {
+                (_a = this._currentTarget) === null || _a === void 0 ? void 0 : _a.handleDragLeave();
+            }
+            const onEnd = this._onDragEndCallback;
+            const dataDisposable = this._dataDisposable;
+            this._teardown();
+            this._dataDisposable = undefined;
+            // Defer disposal so drop handlers can still read the transfer data.
+            setTimeout(() => dataDisposable === null || dataDisposable === void 0 ? void 0 : dataDisposable.dispose(), 0);
+            onEnd === null || onEnd === void 0 ? void 0 : onEnd(dragEvent, dropped);
+            this._onDragEnd.fire(dragEvent);
+        }
+        _teardown() {
+            var _a, _b, _c, _d, _e;
+            this._currentTarget = undefined;
+            this._active = undefined;
+            this._onDragMoveCallback = undefined;
+            this._onDragEndCallback = undefined;
+            (_a = this._ghost) === null || _a === void 0 ? void 0 : _a.dispose();
+            this._ghost = undefined;
+            (_b = this._iframeShield) === null || _b === void 0 ? void 0 : _b.release();
+            this._iframeShield = undefined;
+            (_c = this._moveListener) === null || _c === void 0 ? void 0 : _c.dispose();
+            (_d = this._upListener) === null || _d === void 0 ? void 0 : _d.dispose();
+            (_e = this._cancelListener) === null || _e === void 0 ? void 0 : _e.dispose();
+            this._moveListener = undefined;
+            this._upListener = undefined;
+            this._cancelListener = undefined;
+        }
+    }
+
+    const DEFAULT_ACTIVATION_SIZE = {
+        value: 20,
+        type: 'percentage',
+    };
+    /** Pointer-driven counterpart to `Droptarget` with identical visual output. */
+    class PointerDropTarget extends CompositeDisposable {
+        get disabled() {
+            return this._disabled;
+        }
+        set disabled(value) {
+            this._disabled = value;
+            if (value) {
+                this._removeOverlay();
+            }
+        }
+        get state() {
+            return this._state;
+        }
+        constructor(element, options) {
+            super();
+            this.element = element;
+            this.options = options;
+            this._onDrop = new Emitter();
+            this.onDrop = this._onDrop.event;
+            this._onWillShowOverlay = new Emitter();
+            this.onWillShowOverlay = this._onWillShowOverlay.event;
+            this._disabled = false;
+            this._acceptedTargetZonesSet = new Set(options.acceptedTargetZones);
+            const handle = {
+                element: this.element,
+                handleDragOver: (e) => this._onDragOver(e),
+                handleDragLeave: () => this._onDragLeave(),
+                handleDrop: (e) => this._onDropEvent(e),
+            };
+            this.addDisposables(this._onDrop, this._onWillShowOverlay, PointerDragController.getInstance().registerTarget(handle));
+        }
+        setTargetZones(zones) {
+            this._acceptedTargetZonesSet = new Set(zones);
+        }
+        setOverlayModel(model) {
+            this.options.overlayModel = model;
+        }
+        dispose() {
+            this._removeOverlay();
+            super.dispose();
+        }
+        _onDragOver(event) {
+            var _a, _b, _c, _d, _e;
+            if (this._disabled) {
+                this._removeOverlay();
+                return;
+            }
+            const overrideTarget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
+            if (this._acceptedTargetZonesSet.size === 0) {
+                if (overrideTarget) {
+                    return;
+                }
+                this._removeOverlay();
+                return;
+            }
+            const outlineEl = (_e = (_d = (_c = this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : this.element;
+            const width = outlineEl.offsetWidth;
+            const height = outlineEl.offsetHeight;
+            if (width === 0 || height === 0) {
+                return;
+            }
+            const rect = outlineEl.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            const quadrant = this._calculateQuadrant(x, y, width, height);
+            if (quadrant === null) {
+                this._removeOverlay();
+                return;
+            }
+            if (!this.options.canDisplayOverlay(event.pointerEvent, quadrant)) {
+                if (overrideTarget) {
+                    return;
+                }
+                this._removeOverlay();
+                return;
+            }
+            const willShow = new WillShowOverlayEvent({
+                nativeEvent: event.pointerEvent,
+                position: quadrant,
+            });
+            this._onWillShowOverlay.fire(willShow);
+            if (willShow.defaultPrevented) {
+                this._removeOverlay();
+                return;
+            }
+            if (overrideTarget) {
+                renderAnchoredOverlay({
+                    outlineElement: outlineEl,
+                    targetModel: overrideTarget,
+                    quadrant,
+                    width,
+                    height,
+                    overlayModel: this.options.overlayModel,
+                    className: this.options.className,
+                });
+                this._state = quadrant;
+                return;
+            }
+            if (!this._targetElement) {
+                const els = createOverlayElements();
+                this._targetElement = els.dropzone;
+                this._overlayElement = els.selection;
+                this._state = 'center';
+                this.element.classList.add('dv-drop-target');
+                this.element.append(this._targetElement);
+            }
+            if (this._overlayElement) {
+                renderInPlaceOverlay(this._overlayElement, quadrant, width, height, this.options.overlayModel);
+            }
+            this._state = quadrant;
+        }
+        _onDragLeave() {
+            var _a, _b;
+            const overrideTarget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
+            // Anchor target owns its own lifecycle; just clear our latched
+            // state so a subsequent pointerup doesn't fire a stale drop.
+            if (overrideTarget) {
+                this._state = undefined;
+                overrideTarget.clear();
+                return;
+            }
+            this._removeOverlay();
+        }
+        _onDropEvent(event) {
+            var _a, _b;
+            const state = this._state;
+            const overrideTarget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this._removeOverlay();
+            overrideTarget === null || overrideTarget === void 0 ? void 0 : overrideTarget.clear();
+            if (state) {
+                this._onDrop.fire({
+                    position: state,
+                    nativeEvent: event.pointerEvent,
+                });
+            }
+        }
+        _calculateQuadrant(x, y, width, height) {
+            var _a, _b;
+            const activation = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) !== null && _b !== void 0 ? _b : DEFAULT_ACTIVATION_SIZE;
+            if (activation.type === 'percentage') {
+                return calculateQuadrantAsPercentage(this._acceptedTargetZonesSet, x, y, width, height, activation.value);
+            }
+            return calculateQuadrantAsPixels(this._acceptedTargetZonesSet, x, y, width, height, activation.value);
+        }
+        _removeOverlay() {
+            var _a;
+            if (this._targetElement) {
+                this._state = undefined;
+                (_a = this._targetElement.parentElement) === null || _a === void 0 ? void 0 : _a.classList.remove('dv-drop-target');
+                this._targetElement.remove();
+                this._targetElement = undefined;
+                this._overlayElement = undefined;
+            }
+            else {
+                this._state = undefined;
+            }
+        }
+    }
+
+    const DEFAULT_THRESHOLD = 5;
+    const DEFAULT_TOUCH_INITIATION_DELAY = 250;
+    const DEFAULT_PRESS_TOLERANCE = 8;
+    /**
+     * Pointer-event drag source. Waits for movement past `threshold` (and
+     * touch-only `touchInitiationDelay`) before promoting to a drag so taps
+     * pass through unaffected.
+     */
+    class PointerDragSource extends CompositeDisposable {
+        constructor(element, options) {
+            var _a;
+            super();
+            this.element = element;
+            this.options = options;
+            this._disabled = false;
+            this._armed = false;
+            this._startX = 0;
+            this._startY = 0;
+            this._touchOnly = (_a = options.touchOnly) !== null && _a !== void 0 ? _a : true;
+            this.addDisposables(addDisposableListener(this.element, 'pointerdown', (e) => {
+                this._onPointerDown(e);
+            }));
+        }
+        setDisabled(value) {
+            this._disabled = value;
+            if (value) {
+                this._cancelPending();
+            }
+        }
+        /**
+         * `false` lets the pointer source also handle mouse pointers; used when
+         * `dndStrategy: 'pointer'` to drive every input type through this path.
+         */
+        setTouchOnly(value) {
+            if (this._touchOnly === value) {
+                return;
+            }
+            this._touchOnly = value;
+            // A pending mouse-tracked drag should be abandoned if we re-enable
+            // the touch-only filter mid-flight.
+            if (value) {
+                this._cancelPending();
+            }
+        }
+        _shouldHandle(event) {
+            var _a, _b;
+            if (this._disabled) {
+                return false;
+            }
+            // Pointer-type filter runs before isCancelled — consumer state read
+            // by isCancelled may not be populated for events we'll never handle.
+            if (this._touchOnly &&
+                event.pointerType !== 'touch' &&
+                event.pointerType !== 'pen') {
+                return false;
+            }
+            if ((_b = (_a = this.options).isCancelled) === null || _b === void 0 ? void 0 : _b.call(_a, event)) {
+                return false;
+            }
+            return true;
+        }
+        _onPointerDown(event) {
+            var _a, _b, _c, _d, _e;
+            if (!this._shouldHandle(event)) {
+                return;
+            }
+            // Defensive: a fresh pointerdown supersedes any in-flight tracking.
+            this._cancelPending();
+            this._pendingPointerId = event.pointerId;
+            this._startX = event.clientX;
+            this._startY = event.clientY;
+            this._startEvent = event;
+            const isTouch = event.pointerType === 'touch' || event.pointerType === 'pen';
+            // Touch waits a short window so a still finger can press-and-hold
+            // before drifting; once the timer fires, any motion past `threshold`
+            // begins the drag.
+            const initiationDelayOpt = this.options.touchInitiationDelay;
+            const initiationDelay = (_a = (typeof initiationDelayOpt === 'function'
+                ? initiationDelayOpt()
+                : initiationDelayOpt)) !== null && _a !== void 0 ? _a : DEFAULT_TOUCH_INITIATION_DELAY;
+            this._armed = !isTouch || initiationDelay <= 0;
+            if (isTouch && initiationDelay > 0 && isFinite(initiationDelay)) {
+                this._armTimer = setTimeout(() => {
+                    this._armTimer = undefined;
+                    this._armed = true;
+                }, initiationDelay);
+            }
+            const threshold = (_b = this.options.threshold) !== null && _b !== void 0 ? _b : DEFAULT_THRESHOLD;
+            const pressToleranceOpt = this.options.pressTolerance;
+            const pressTolerance = (_c = (typeof pressToleranceOpt === 'function'
+                ? pressToleranceOpt()
+                : pressToleranceOpt)) !== null && _c !== void 0 ? _c : DEFAULT_PRESS_TOLERANCE;
+            // Source's owning window — popout drags fire on their own window.
+            const targetWindow = (_e = (_d = this.element.ownerDocument) === null || _d === void 0 ? void 0 : _d.defaultView) !== null && _e !== void 0 ? _e : window;
+            this._pendingMoveListener = addDisposableListener(targetWindow, 'pointermove', (moveEvent) => {
+                if (moveEvent.pointerId !== this._pendingPointerId) {
+                    return;
+                }
+                const dx = moveEvent.clientX - this._startX;
+                const dy = moveEvent.clientY - this._startY;
+                const distance = Math.hypot(dx, dy);
+                if (this._armed) {
+                    if (distance >= threshold) {
+                        this._beginDrag(moveEvent);
+                    }
+                    return;
+                }
+                // Pre-arm phase: a flick past `pressTolerance` in any
+                // direction is treated as drag intent. The element opts out
+                // of native scroll via `touch-action: none`; container-level
+                // scrolling lives on the surrounding strip's empty space.
+                if (distance > pressTolerance) {
+                    this._beginDrag(moveEvent);
+                }
+            });
+            this._pendingUpListener = addDisposableListener(targetWindow, 'pointerup', (upEvent) => {
+                if (upEvent.pointerId !== this._pendingPointerId) {
+                    return;
+                }
+                this._cancelPending();
+            });
+            this._pendingCancelListener = addDisposableListener(targetWindow, 'pointercancel', (cancelEvent) => {
+                if (cancelEvent.pointerId !== this._pendingPointerId) {
+                    return;
+                }
+                this._cancelPending();
+            });
+        }
+        /** For sibling gesture detectors (e.g. LongPressDetector) to dismiss a pending drag. */
+        cancelPending() {
+            this._cancelPending();
+        }
+        _cancelPending() {
+            var _a, _b, _c;
+            this._pendingPointerId = undefined;
+            if (this._armTimer !== undefined) {
+                clearTimeout(this._armTimer);
+                this._armTimer = undefined;
+            }
+            this._armed = false;
+            (_a = this._pendingMoveListener) === null || _a === void 0 ? void 0 : _a.dispose();
+            (_b = this._pendingUpListener) === null || _b === void 0 ? void 0 : _b.dispose();
+            (_c = this._pendingCancelListener) === null || _c === void 0 ? void 0 : _c.dispose();
+            this._pendingMoveListener = undefined;
+            this._pendingUpListener = undefined;
+            this._pendingCancelListener = undefined;
+            this._startEvent = undefined;
+        }
+        _beginDrag(triggerEvent) {
+            var _a, _b, _c, _d, _e;
+            const startEvent = (_a = this._startEvent) !== null && _a !== void 0 ? _a : triggerEvent;
+            this._cancelPending();
+            (_c = (_b = this.options).onDragStart) === null || _c === void 0 ? void 0 : _c.call(_b, startEvent);
+            const ghost = (_e = (_d = this.options).createGhost) === null || _e === void 0 ? void 0 : _e.call(_d, startEvent);
+            PointerDragController.getInstance().beginDrag({
+                pointerEvent: triggerEvent,
+                source: this.element,
+                getData: () => this.options.getData(startEvent),
+                ghost,
+                onDragMove: this.options.onDragMove,
+                onDragEnd: this.options.onDragEnd,
+            });
+        }
+        dispose() {
+            this._cancelPending();
+            super.dispose();
+        }
+    }
+
+    /**
+     * Floating clone that follows the pointer; appended to the owning
+     * document's body with `pointer-events: none` so it doesn't intercept
+     * hit-testing.
+     */
+    class PointerGhost {
+        constructor(opts) {
+            var _a, _b, _c, _d, _e;
+            this._disposed = false;
+            this.element = opts.element;
+            this.offsetX = (_a = opts.offsetX) !== null && _a !== void 0 ? _a : 0;
+            this.offsetY = (_b = opts.offsetY) !== null && _b !== void 0 ? _b : 0;
+            // Animate via transform (see update); position:fixed for scroll-independence.
+            this.element.style.position = 'fixed';
+            this.element.style.left = '0px';
+            this.element.style.top = '0px';
+            this.element.style.pointerEvents = 'none';
+            this.element.style.zIndex = '99999';
+            this.element.style.opacity = String((_c = opts.opacity) !== null && _c !== void 0 ? _c : 0.8);
+            this.element.style.willChange = 'transform';
+            this.element.style.transform = `translate3d(${opts.initialX - this.offsetX}px, ${opts.initialY - this.offsetY}px, 0)`;
+            const ownerDocument = (_e = (_d = opts.owner) === null || _d === void 0 ? void 0 : _d.ownerDocument) !== null && _e !== void 0 ? _e : document;
+            ownerDocument.body.appendChild(this.element);
+        }
+        update(clientX, clientY) {
+            if (this._disposed) {
+                return;
+            }
+            // translate3d composites on the GPU — no layout per pointermove.
+            this.element.style.transform = `translate3d(${clientX - this.offsetX}px, ${clientY - this.offsetY}px, 0)`;
+        }
+        dispose() {
+            if (this._disposed) {
+                return;
+            }
+            this._disposed = true;
+            this.element.remove();
+        }
+    }
+
+    /**
+     * HTML5 drag source. Listens for the native `dragstart` event, calls
+     * `getData` to populate transfer, optionally renders the ghost via
+     * `setDragImage`, fires `onDragStart` / `onDragEnd`, and tears down the
+     * transfer disposer after `dragend`.
+     */
+    class Html5DragSource extends CompositeDisposable {
+        constructor(el, opts) {
+            super();
+            this.el = el;
+            this.opts = opts;
+            this._dataDisposable = new MutableDisposable();
+            this._pointerEventsDisposable = new MutableDisposable();
+            this._disabled = !!opts.disabled;
+            this.addDisposables(this._dataDisposable, this._pointerEventsDisposable, addDisposableListener(this.el, 'dragstart', (event) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                if (event.defaultPrevented ||
+                    this._disabled ||
+                    ((_b = (_a = this.opts).isCancelled) === null || _b === void 0 ? void 0 : _b.call(_a, event))) {
+                    event.preventDefault();
+                    return;
+                }
+                // Iframes capture pointermove once the cursor enters them,
+                // which freezes drag tracking from the parent window's
+                // POV. Shield the source's owning document so popout-window
+                // drags shield the popout, not the main window.
+                const iframes = disableIframePointEvents((_c = this.el.ownerDocument) !== null && _c !== void 0 ? _c : document);
+                this._pointerEventsDisposable.value = {
+                    dispose: () => iframes.release(),
+                };
+                this.el.classList.add('dv-dragged');
+                setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
+                this._dataDisposable.value = this.opts.getData(event);
+                const ghost = (_e = (_d = this.opts).createGhost) === null || _e === void 0 ? void 0 : _e.call(_d, event);
+                if (ghost && event.dataTransfer) {
+                    addGhostImage(event.dataTransfer, ghost.element, {
+                        x: (_f = ghost.offsetX) !== null && _f !== void 0 ? _f : 0,
+                        y: (_g = ghost.offsetY) !== null && _g !== void 0 ? _g : 0,
+                    });
+                    if (ghost.dispose) {
+                        // addGhostImage removes the element from the DOM on
+                        // the next tick; dispose the framework renderer on
+                        // the same schedule.
+                        const disposeGhost = ghost.dispose;
+                        setTimeout(() => disposeGhost(), 0);
+                    }
+                }
+                if (event.dataTransfer) {
+                    event.dataTransfer.effectAllowed = 'move';
+                    // Some third-party DnD libs (e.g. react-dnd) cancel the
+                    // dragstart when `dataTransfer.types` is empty.
+                    if (event.dataTransfer.items.length === 0) {
+                        event.dataTransfer.setData('text/plain', '');
+                    }
+                }
+                (_j = (_h = this.opts).onDragStart) === null || _j === void 0 ? void 0 : _j.call(_h, event);
+            }), addDisposableListener(this.el, 'dragend', (event) => {
+                var _a, _b;
+                this._pointerEventsDisposable.dispose();
+                // Defer disposal so drop handlers can still read the
+                // transfer payload before it clears.
+                setTimeout(() => this._dataDisposable.dispose(), 0);
+                (_b = (_a = this.opts).onDragEnd) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            }));
+        }
+        setDisabled(value) {
+            this._disabled = value;
+        }
+        setTouchOnly(_) {
+            // No-op — HTML5 path can't filter by pointer type.
+        }
+        cancelPending() {
+            // No-op — HTML5 has no pre-arm phase to cancel.
+        }
+    }
+    class Html5DragBackend {
+        constructor() {
+            this.kind = 'html5';
+        }
+        createDropTarget(element, options) {
+            return new Droptarget(element, options);
+        }
+        createDragSource(element, options) {
+            return new Html5DragSource(element, options);
+        }
+    }
+    class PointerDragBackend {
+        constructor() {
+            this.kind = 'pointer';
+        }
+        createDropTarget(element, options) {
+            return new PointerDropTarget(element, options);
+        }
+        createDragSource(element, options) {
+            const pointerCreateGhost = options.createGhost
+                ? (event) => {
+                    const spec = options.createGhost(event);
+                    if (!spec) {
+                        return undefined;
+                    }
+                    const ghost = new PointerGhost({
+                        element: spec.element,
+                        initialX: event.clientX,
+                        initialY: event.clientY,
+                        offsetX: spec.offsetX,
+                        offsetY: spec.offsetY,
+                        owner: element,
+                    });
+                    if (spec.dispose) {
+                        const baseDispose = ghost.dispose.bind(ghost);
+                        const disposeSpec = spec.dispose;
+                        ghost.dispose = () => {
+                            baseDispose();
+                            disposeSpec();
+                        };
+                    }
+                    return ghost;
+                }
+                : undefined;
+            const source = new PointerDragSource(element, {
+                getData: options.getData,
+                isCancelled: options.isCancelled,
+                onDragStart: options.onDragStart,
+                onDragEnd: options.onDragEnd
+                    ? (event) => options.onDragEnd(event.pointerEvent)
+                    : undefined,
+                createGhost: pointerCreateGhost,
+                touchOnly: options.touchOnly,
+                touchInitiationDelay: options.touchInitiationDelay,
+                pressTolerance: options.pressTolerance,
+                threshold: options.threshold,
+            });
+            if (options.disabled) {
+                source.setDisabled(true);
+            }
+            return source;
+        }
+    }
+    const html5Backend = new Html5DragBackend();
+    const pointerBackend = new PointerDragBackend();
+
     const PROPERTY_KEYS_PANEVIEW = (() => {
         /**
          * by readong the keys from an empty value object TypeScript will error
@@ -5042,35 +5700,42 @@
             const id = this.id;
             const accessorId = this.accessor.id;
             this.header.draggable = true;
-            this.handler = new (class PaneDragHandler extends DragHandler {
-                getData() {
+            const sharedDragOptions = {
+                getData: () => {
                     LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
                     return {
                         dispose: () => {
                             LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
                         },
                     };
+                },
+            };
+            this.html5DragSource = html5Backend.createDragSource(this.header, sharedDragOptions);
+            this.pointerDragSource = pointerBackend.createDragSource(this.header, sharedDragOptions);
+            const canDisplayOverlay = (event, position) => {
+                const data = getPaneData();
+                if (data) {
+                    if (data.paneId !== this.id &&
+                        data.viewId === this.accessor.id) {
+                        return true;
+                    }
                 }
-            })(this.header);
-            this.target = new Droptarget(this.element, {
+                const firedEvent = new PaneviewUnhandledDragOverEvent(event, position, getPaneData, this);
+                this._onUnhandledDragOverEvent.fire(firedEvent);
+                return firedEvent.isAccepted;
+            };
+            const dropTargetOptions = {
                 acceptedTargetZones: ['top', 'bottom'],
                 overlayModel: {
                     activationSize: { type: 'percentage', value: 50 },
                 },
-                canDisplayOverlay: (event, position) => {
-                    const data = getPaneData();
-                    if (data) {
-                        if (data.paneId !== this.id &&
-                            data.viewId === this.accessor.id) {
-                            return true;
-                        }
-                    }
-                    const firedEvent = new PaneviewUnhandledDragOverEvent(event, position, getPaneData, this);
-                    this._onUnhandledDragOverEvent.fire(firedEvent);
-                    return firedEvent.isAccepted;
-                },
-            });
-            this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
+                canDisplayOverlay,
+            };
+            this.target = html5Backend.createDropTarget(this.element, dropTargetOptions);
+            this.pointerTarget = pointerBackend.createDropTarget(this.element, dropTargetOptions);
+            this.addDisposables(this._onDidDrop, this.html5DragSource, this.pointerDragSource, this.target, this.pointerTarget, this.target.onDrop((event) => {
+                this.onDrop(event);
+            }), this.pointerTarget.onDrop((event) => {
                 this.onDrop(event);
             }));
         }
@@ -5125,6 +5790,25 @@
             this._element.tabIndex = -1;
             this.addDisposables(this._onDidFocus, this._onDidBlur);
             const target = group.dropTargetContainer;
+            const canDisplayOverlay = (event, position) => {
+                if (this.group.locked === 'no-drop-target' ||
+                    (this.group.locked && position === 'center')) {
+                    return false;
+                }
+                const data = getPanelData();
+                if (!data &&
+                    event.shiftKey &&
+                    this.group.location.type !== 'floating') {
+                    return false;
+                }
+                if (data && data.viewId === this.accessor.id) {
+                    return true;
+                }
+                return this.group.canDisplayOverlay(event, position, 'content');
+            };
+            // `dropTarget` stays the concrete `Droptarget` (not via the backend
+            // factory) because overlayRenderContainer forwards HTML5 drag events
+            // through `dropTarget.dnd` — that field is not part of `IDropTarget`.
             this.dropTarget = new Droptarget(this.element, {
                 getOverlayOutline: () => {
                     var _a;
@@ -5134,25 +5818,22 @@
                 },
                 className: 'dv-drop-target-content',
                 acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-                canDisplayOverlay: (event, position) => {
-                    if (this.group.locked === 'no-drop-target' ||
-                        (this.group.locked && position === 'center')) {
-                        return false;
-                    }
-                    const data = getPanelData();
-                    if (!data &&
-                        event.shiftKey &&
-                        this.group.location.type !== 'floating') {
-                        return false;
-                    }
-                    if (data && data.viewId === this.accessor.id) {
-                        return true;
-                    }
-                    return this.group.canDisplayOverlay(event, position, 'content');
+                canDisplayOverlay,
+                getOverrideTarget: target ? () => target.model : undefined,
+            });
+            this.pointerDropTarget = pointerBackend.createDropTarget(this.element, {
+                acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
+                canDisplayOverlay,
+                getOverlayOutline: () => {
+                    var _a;
+                    return ((_a = accessor.options.theme) === null || _a === void 0 ? void 0 : _a.dndPanelOverlay) === 'group'
+                        ? this.element.parentElement
+                        : null;
                 },
+                className: 'dv-drop-target-content',
                 getOverrideTarget: target ? () => target.model : undefined,
             });
-            this.addDisposables(this.dropTarget);
+            this.addDisposables(this.dropTarget, this.pointerDropTarget);
         }
         show() {
             this.element.style.display = '';
@@ -5240,37 +5921,169 @@
         }
     }
 
-    function addGhostImage(dataTransfer, ghostElement, options) {
-        var _a, _b;
-        // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
-        addClasses(ghostElement, 'dv-dragged');
-        // move the element off-screen initially otherwise it may in some cases be rendered at (0,0) momentarily
-        ghostElement.style.top = '-9999px';
-        document.body.appendChild(ghostElement);
-        dataTransfer.setDragImage(ghostElement, (_a = options === null || options === void 0 ? void 0 : options.x) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.y) !== null && _b !== void 0 ? _b : 0);
-        setTimeout(() => {
-            removeClasses(ghostElement, 'dv-dragged');
-            ghostElement.remove();
-        }, 0);
+    const DEFAULT_DELAY = 500;
+    const DEFAULT_TOLERANCE = 8;
+    /**
+     * Passive — does not consume the pointer; movement past `tolerance`
+     * cancels silently so a sibling `PointerDragSource` can take over.
+     */
+    class LongPressDetector extends CompositeDisposable {
+        constructor(element, options) {
+            super();
+            this.element = element;
+            this.options = options;
+            this._startX = 0;
+            this._startY = 0;
+            this.addDisposables(addDisposableListener(this.element, 'pointerdown', (e) => {
+                this._onPointerDown(e);
+            }));
+        }
+        _onPointerDown(event) {
+            var _a, _b, _c, _d, _e;
+            const touchOnly = (_a = this.options.touchOnly) !== null && _a !== void 0 ? _a : true;
+            if (touchOnly &&
+                event.pointerType !== 'touch' &&
+                event.pointerType !== 'pen') {
+                return;
+            }
+            // Defensive — supersede any in-flight press.
+            this._cancelPending();
+            this._pointerId = event.pointerId;
+            this._startX = event.clientX;
+            this._startY = event.clientY;
+            const delay = (_b = this.options.delay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY;
+            const tolerance = (_c = this.options.tolerance) !== null && _c !== void 0 ? _c : DEFAULT_TOLERANCE;
+            // Source's owning window — popout drags fire on their own window.
+            const targetWindow = (_e = (_d = this.element.ownerDocument) === null || _d === void 0 ? void 0 : _d.defaultView) !== null && _e !== void 0 ? _e : window;
+            this._timer = setTimeout(() => {
+                this._timer = undefined;
+                this._cancelPending();
+                // Touch browsers synthesize a compatibility `contextmenu` event
+                // for long-press. preventDefault on the original pointerdown is
+                // too late (already dispatched), so install a one-shot
+                // capture-phase guard for the next contextmenu. Without this,
+                // consumers that don't preventDefault inside their onLongPress
+                // (or that early-return before doing so) leak the browser's
+                // native menu on top of theirs.
+                this._installContextMenuGuard(targetWindow);
+                // Same idea for `click`: when the user releases their finger
+                // after the long-press, touch browsers dispatch a `click` to
+                // the element the touch ended on (the source). Consumers
+                // typically wire click to a primary action (e.g. tab activate,
+                // tab-group chip collapse-toggle). Without this guard, the
+                // long-press immediately fires both the context menu AND the
+                // primary action — and the action's side effects (e.g. a chip
+                // collapse animation) read as a screen wobble while the menu
+                // is supposed to be open. Scoped to the source element so
+                // clicks on menu items elsewhere remain effective.
+                this._installClickGuard(targetWindow);
+                this.options.onLongPress(event);
+            }, delay);
+            this._moveListener = addDisposableListener(targetWindow, 'pointermove', (moveEvent) => {
+                if (moveEvent.pointerId !== this._pointerId) {
+                    return;
+                }
+                const dx = moveEvent.clientX - this._startX;
+                const dy = moveEvent.clientY - this._startY;
+                if (Math.hypot(dx, dy) > tolerance) {
+                    this._cancelPending();
+                }
+            });
+            this._upListener = addDisposableListener(targetWindow, 'pointerup', (upEvent) => {
+                if (upEvent.pointerId !== this._pointerId) {
+                    return;
+                }
+                this._cancelPending();
+            });
+            this._cancelListener = addDisposableListener(targetWindow, 'pointercancel', (cancelEvent) => {
+                if (cancelEvent.pointerId !== this._pointerId) {
+                    return;
+                }
+                this._cancelPending();
+            });
+        }
+        _installContextMenuGuard(targetWindow) {
+            let guard;
+            const timeout = setTimeout(() => guard === null || guard === void 0 ? void 0 : guard.dispose(), 500);
+            guard = addDisposableListener(targetWindow, 'contextmenu', (event) => {
+                event.preventDefault();
+                clearTimeout(timeout);
+                guard === null || guard === void 0 ? void 0 : guard.dispose();
+            }, { capture: true });
+        }
+        _installClickGuard(targetWindow) {
+            let guard;
+            const timeout = setTimeout(() => guard === null || guard === void 0 ? void 0 : guard.dispose(), 500);
+            guard = addDisposableListener(targetWindow, 'click', (event) => {
+                // Only suppress clicks targeted at the long-pressed element
+                // or its descendants. A user tap on a context menu item (or
+                // anywhere else) still gets through unchanged.
+                const target = event.target;
+                if (target && this.element.contains(target)) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+                clearTimeout(timeout);
+                guard === null || guard === void 0 ? void 0 : guard.dispose();
+            }, { capture: true });
+        }
+        _cancelPending() {
+            var _a, _b, _c;
+            if (this._timer !== undefined) {
+                clearTimeout(this._timer);
+                this._timer = undefined;
+            }
+            this._pointerId = undefined;
+            (_a = this._moveListener) === null || _a === void 0 ? void 0 : _a.dispose();
+            (_b = this._upListener) === null || _b === void 0 ? void 0 : _b.dispose();
+            (_c = this._cancelListener) === null || _c === void 0 ? void 0 : _c.dispose();
+            this._moveListener = undefined;
+            this._upListener = undefined;
+            this._cancelListener = undefined;
+        }
+        dispose() {
+            this._cancelPending();
+            super.dispose();
+        }
     }
 
-    class TabDragHandler extends DragHandler {
-        constructor(element, accessor, group, panel, disabled) {
-            super(element, disabled);
-            this.accessor = accessor;
-            this.group = group;
-            this.panel = panel;
-            this.panelTransfer = LocalSelectionTransfer.getInstance();
+    function resolveDndCapabilities(options) {
+        if (options.disableDnd) {
+            return { html5: false, pointer: false, pointerHandlesMouse: false };
+        }
+        switch (options.dndStrategy) {
+            case 'pointer':
+                return { html5: false, pointer: true, pointerHandlesMouse: true };
+            case 'html5':
+                return { html5: true, pointer: false, pointerHandlesMouse: false };
+            case 'auto':
+            case undefined:
+            default:
+                // On touch-primary devices (phones / basic tablets) HTML5 DnD's
+                // native long-press intercepts the gesture before our pointer
+                // backend can react — Android Chrome launches a system drag with
+                // its half-transparent thumbnail, and the long-press context menu
+                // never opens. Disable HTML5 there so the pointer backend owns
+                // every gesture. Hybrid devices (touchscreen laptops, Surface,
+                // iPad with mouse) keep both backends — mouse uses HTML5, touch
+                // falls back to whichever backend the underlying element wired.
+                return isCoarsePrimaryInput$2()
+                    ? { html5: false, pointer: true, pointerHandlesMouse: true }
+                    : { html5: true, pointer: true, pointerHandlesMouse: false };
         }
-        getData(event) {
-            this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, this.panel.id)], PanelTransfer.prototype);
-            return {
-                dispose: () => {
-                    this.panelTransfer.clearData(PanelTransfer.prototype);
-                },
-            };
+    }
+    function isCoarsePrimaryInput$2() {
+        if (typeof window === 'undefined' || !window.matchMedia) {
+            return false;
         }
+        // Coarse pointer without any fine pointer = phone-class device. A laptop
+        // touchscreen reports both, and we want HTML5 to remain available there
+        // because a real mouse is also plugged in.
+        const coarse = window.matchMedia('(pointer: coarse)').matches;
+        const fine = window.matchMedia('(pointer: fine)').matches;
+        return coarse && !fine;
     }
+
     class Tab extends CompositeDisposable {
         get element() {
             return this._element;
@@ -5281,6 +6094,7 @@
             this.accessor = accessor;
             this.group = group;
             this.content = undefined;
+            this.panelTransfer = LocalSelectionTransfer.getInstance();
             this._direction = 'horizontal';
             this._onPointDown = new Emitter();
             this.onPointerDown = this._onPointDown.event;
@@ -5292,114 +6106,106 @@
             this.onDragStart = this._onDragStart.event;
             this._onDragEnd = new Emitter();
             this.onDragEnd = this._onDragEnd.event;
+            const caps = resolveDndCapabilities(this.accessor.options);
             this._element = document.createElement('div');
             this._element.className = 'dv-tab';
             this._element.tabIndex = 0;
-            this._element.draggable = !this.accessor.options.disableDnd;
+            this._element.draggable = caps.html5;
             toggleClass(this.element, 'dv-inactive-tab', true);
-            this.dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel, !!this.accessor.options.disableDnd);
-            this.dropTarget = new Droptarget(this._element, {
+            const canDisplayOverlay = (event, position) => {
+                var _a;
+                if (this.group.locked) {
+                    return false;
+                }
+                const data = getPanelData();
+                if (data && this.accessor.id === data.viewId) {
+                    // Smooth-reorder takes over the in-flight visual when active,
+                    // so individual tab overlays are suppressed for internal drags.
+                    if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
+                        return false;
+                    }
+                    return true;
+                }
+                return this.group.model.canDisplayOverlay(event, position, 'tab');
+            };
+            this.dropTarget = html5Backend.createDropTarget(this._element, {
                 acceptedTargetZones: ['left', 'right'],
                 overlayModel: this._buildOverlayModel(),
-                canDisplayOverlay: (event, position) => {
+                canDisplayOverlay,
+                getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+            });
+            this.pointerDropTarget = pointerBackend.createDropTarget(this._element, {
+                acceptedTargetZones: ['left', 'right'],
+                overlayModel: this._buildOverlayModel(),
+                canDisplayOverlay,
+                getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+            });
+            const sharedDragOptions = {
+                getData: () => {
+                    this.panelTransfer.setData([
+                        new PanelTransfer(this.accessor.id, this.group.id, this.panel.id),
+                    ], PanelTransfer.prototype);
+                    return {
+                        dispose: () => {
+                            this.panelTransfer.clearData(PanelTransfer.prototype);
+                        },
+                    };
+                },
+                // 30/-10 matches the HTML5 setDragImage offset that has been
+                // shipped for years; pointer backend wraps in PointerGhost,
+                // HTML5 backend feeds into setDragImage.
+                createGhost: () => ({
+                    element: this._buildGhostElement(),
+                    offsetX: 30,
+                    offsetY: -10,
+                }),
+                onDragStart: (event) => {
                     var _a;
-                    if (this.group.locked) {
-                        return false;
-                    }
-                    const data = getPanelData();
-                    if (data && this.accessor.id === data.viewId) {
-                        if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
-                            // When smooth reorder is enabled, the Tabs
-                            // container handles all intra-accessor drops
-                            // (both same-group and cross-group) via
-                            // animation.  Suppress the per-tab overlay so
-                            // the tab is dropped *beside* rather than *on*.
-                            return false;
-                        }
-                        return true;
+                    this._onDragStart.fire(event);
+                    if (!(event instanceof PointerEvent) &&
+                        ((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
+                        // Delay collapse to next frame so the browser
+                        // captures the full drag image first.
+                        requestAnimationFrame(() => {
+                            toggleClass(this.element, 'dv-tab--dragging', true);
+                        });
                     }
-                    return this.group.model.canDisplayOverlay(event, position, 'tab');
                 },
-                getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
-            });
-            this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
+                onDragEnd: (event) => {
+                    this._onDragEnd.fire(event);
+                },
+            };
+            this.html5DragSource = html5Backend.createDragSource(this._element, Object.assign(Object.assign({}, sharedDragOptions), { disabled: !caps.html5 }));
+            this.pointerDragSource = pointerBackend.createDragSource(this._element, Object.assign(Object.assign({}, sharedDragOptions), { disabled: !caps.pointer, touchOnly: !caps.pointerHandlesMouse, isCancelled: () => !resolveDndCapabilities(this.accessor.options).pointer }));
+            // Both droptargets feed the same downstream stream; consumers don't
+            // need to know which path produced the overlay.
+            this.onWillShowOverlay = exports.DockviewEvent.any(this.dropTarget.onWillShowOverlay, this.pointerDropTarget.onWillShowOverlay);
             this.addDisposables(this._onPointDown, this._onTabClick, this._onDropped, this._onDragStart, this._onDragEnd, this.accessor.onDidOptionsChange(() => {
-                this.dropTarget.setOverlayModel(this._buildOverlayModel());
-            }), this.dragHandler.onDragStart((event) => {
-                var _a;
-                if (event.dataTransfer) {
-                    const style = getComputedStyle(this.element);
-                    const newNode = this.element.cloneNode(true);
-                    const isVertical = this._direction === 'vertical';
-                    /**
-                     * Properties to skip when copying computed styles for a
-                     * vertical tab ghost.  `writing-mode` is excluded so we
-                     * can force `horizontal-tb`.  Size and margin logical
-                     * properties are excluded because their physical meaning
-                     * flips when writing-mode changes, which would produce
-                     * incorrect dimensions.
-                     */
-                    const verticalSkip = new Set([
-                        'writing-mode',
-                        'inline-size',
-                        'block-size',
-                        'min-inline-size',
-                        'min-block-size',
-                        'max-inline-size',
-                        'max-block-size',
-                        'margin-inline',
-                        'margin-inline-start',
-                        'margin-inline-end',
-                        'margin-block',
-                        'margin-block-start',
-                        'margin-block-end',
-                        'padding-inline',
-                        'padding-inline-start',
-                        'padding-inline-end',
-                        'padding-block',
-                        'padding-block-start',
-                        'padding-block-end',
-                    ]);
-                    Array.from(style).forEach((key) => {
-                        if (isVertical && verticalSkip.has(key)) {
-                            return;
-                        }
-                        newNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key));
-                    });
-                    if (isVertical) {
-                        // Force horizontal text flow and swap the physical
-                        // dimensions so the ghost appears as a horizontal tab.
-                        newNode.style.setProperty('writing-mode', 'horizontal-tb');
-                        newNode.style.setProperty('width', style.height);
-                        newNode.style.setProperty('height', style.width);
-                    }
-                    newNode.style.position = 'absolute';
-                    newNode.classList.add('dv-tab-ghost-drag');
-                    addGhostImage(event.dataTransfer, newNode, {
-                        y: -10,
-                        x: 30,
-                    });
-                }
-                this._onDragStart.fire(event);
-                if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
-                    // Delay collapse to next frame so the browser
-                    // captures the full drag image first
-                    requestAnimationFrame(() => {
-                        toggleClass(this.element, 'dv-tab--dragging', true);
-                    });
-                }
-            }), addDisposableListener(this._element, 'dragend', (event) => {
+                const model = this._buildOverlayModel();
+                this.dropTarget.setOverlayModel(model);
+                this.pointerDropTarget.setOverlayModel(model);
+            }), addDisposableListener(this._element, 'dragend', () => {
+                // The shared onDragEnd handler already fires _onDragEnd via
+                // the HTML5 backend; just strip the dragging class here.
                 toggleClass(this.element, 'dv-tab--dragging', false);
-                this._onDragEnd.fire(event);
-            }), this.dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
+            }), this.html5DragSource, addDisposableListener(this._element, 'pointerdown', (event) => {
                 this._onPointDown.fire(event);
             }), addDisposableListener(this._element, 'click', (event) => {
                 this._onTabClick.fire(event);
             }), addDisposableListener(this._element, 'contextmenu', (event) => {
                 this.accessor.contextMenuController.show(this.panel, this.group, event);
+            }), new LongPressDetector(this._element, {
+                onLongPress: (event) => {
+                    // Don't let a subsequent finger move arm a drag on top
+                    // of the just-opened menu.
+                    this.pointerDragSource.cancelPending();
+                    this.accessor.contextMenuController.show(this.panel, this.group, event);
+                },
             }), this.dropTarget.onDrop((event) => {
                 this._onDropped.fire(event);
-            }), this.dropTarget);
+            }), this.pointerDropTarget.onDrop((event) => {
+                this._onDropped.fire(event);
+            }), this.dropTarget, this.pointerDropTarget, this.pointerDragSource);
         }
         setActive(isActive) {
             toggleClass(this.element, 'dv-active-tab', isActive);
@@ -5429,11 +6235,60 @@
         }
         setDirection(direction) {
             this._direction = direction;
-            this.dropTarget.setTargetZones(direction === 'vertical' ? ['top', 'bottom'] : ['left', 'right']);
+            const zones = direction === 'vertical' ? ['top', 'bottom'] : ['left', 'right'];
+            this.dropTarget.setTargetZones(zones);
+            this.pointerDropTarget.setTargetZones(zones);
         }
         updateDragAndDropState() {
-            this._element.draggable = !this.accessor.options.disableDnd;
-            this.dragHandler.setDisabled(!!this.accessor.options.disableDnd);
+            const caps = resolveDndCapabilities(this.accessor.options);
+            this._element.draggable = caps.html5;
+            this.html5DragSource.setDisabled(!caps.html5);
+            this.pointerDragSource.setDisabled(!caps.pointer);
+            this.pointerDragSource.setTouchOnly(!caps.pointerHandlesMouse);
+        }
+        /**
+         * Vertical tabs are flipped to horizontal so the ghost stays readable
+         * during the drag rather than appearing sideways-rotated.
+         */
+        _buildGhostElement() {
+            const style = getComputedStyle(this.element);
+            const newNode = this.element.cloneNode(true);
+            const isVertical = this._direction === 'vertical';
+            const verticalSkip = new Set([
+                'writing-mode',
+                'inline-size',
+                'block-size',
+                'min-inline-size',
+                'min-block-size',
+                'max-inline-size',
+                'max-block-size',
+                'margin-inline',
+                'margin-inline-start',
+                'margin-inline-end',
+                'margin-block',
+                'margin-block-start',
+                'margin-block-end',
+                'padding-inline',
+                'padding-inline-start',
+                'padding-inline-end',
+                'padding-block',
+                'padding-block-start',
+                'padding-block-end',
+            ]);
+            Array.from(style).forEach((key) => {
+                if (isVertical && verticalSkip.has(key)) {
+                    return;
+                }
+                newNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key));
+            });
+            if (isVertical) {
+                newNode.style.setProperty('writing-mode', 'horizontal-tb');
+                newNode.style.setProperty('width', style.height);
+                newNode.style.setProperty('height', style.width);
+            }
+            newNode.style.position = 'absolute';
+            newNode.classList.add('dv-tab-ghost-drag');
+            return newNode;
         }
     }
 
@@ -5441,6 +6296,7 @@
         get kind() {
             return this.options.kind;
         }
+        /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
         get nativeEvent() {
             return this.event.nativeEvent;
         }
@@ -5471,131 +6327,202 @@
         }
     }
 
-    class GroupDragHandler extends DragHandler {
-        constructor(element, accessor, group, disabled) {
-            super(element, disabled);
-            this.accessor = accessor;
-            this.group = group;
-            this.panelTransfer = LocalSelectionTransfer.getInstance();
-            this.addDisposables(addDisposableListener(element, 'pointerdown', (e) => {
-                if (e.shiftKey) {
-                    /**
-                     * You cannot call e.preventDefault() because that will prevent drag events from firing
-                     * but we also need to stop any group overlay drag events from occuring
-                     * Use a custom event marker that can be checked by the overlay drag events
-                     */
-                    quasiPreventDefault(e);
-                }
-            }, true));
-        }
-        isCancelled(_event) {
-            if (this.group.api.location.type === 'floating' && !_event.shiftKey) {
-                return true;
-            }
-            if (this.group.api.location.type === 'edge' && this.group.size === 0) {
-                return true;
-            }
-            return false;
-        }
-        getData(dragEvent) {
-            const dataTransfer = dragEvent.dataTransfer;
-            this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, null)], PanelTransfer.prototype);
-            const style = window.getComputedStyle(this.el);
-            const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
-            const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
-            if (dataTransfer) {
-                const createGhost = this.accessor.options.createGroupDragGhostComponent;
-                let ghostElement;
-                let customRenderer;
-                if (createGhost) {
-                    customRenderer = createGhost(this.group);
-                    customRenderer.init({
-                        group: this.group,
-                        api: this.accessor.api,
-                    });
-                    ghostElement = customRenderer.element;
-                    ghostElement.style.position = 'absolute';
-                    ghostElement.style.pointerEvents = 'none';
-                    ghostElement.style.top = '-9999px';
-                }
-                else {
-                    ghostElement = document.createElement('div');
-                    ghostElement.style.backgroundColor = bgColor;
-                    ghostElement.style.color = color;
-                    ghostElement.style.padding = '2px 8px';
-                    ghostElement.style.height = '24px';
-                    ghostElement.style.fontSize = '11px';
-                    ghostElement.style.lineHeight = '20px';
-                    ghostElement.style.borderRadius = '12px';
-                    ghostElement.style.position = 'absolute';
-                    ghostElement.style.pointerEvents = 'none';
-                    ghostElement.style.top = '-9999px';
-                    ghostElement.textContent = `Multiple Panels (${this.group.size})`;
-                }
-                addGhostImage(dataTransfer, ghostElement, { y: -10, x: 30 });
-                if (customRenderer === null || customRenderer === void 0 ? void 0 : customRenderer.dispose) {
-                    // addGhostImage removes the element from the DOM on the next
-                    // tick; dispose the framework renderer on the same schedule.
-                    const renderer = customRenderer;
-                    setTimeout(() => { var _a; return (_a = renderer.dispose) === null || _a === void 0 ? void 0 : _a.call(renderer); }, 0);
-                }
-            }
-            return {
-                dispose: () => {
-                    this.panelTransfer.clearData(PanelTransfer.prototype);
-                },
-            };
-        }
-    }
-
+    // Floating-group redock via touch: require a deliberate long press so the
+    // "move the float around" gesture doesn't double-trigger the redock ghost.
+    // Infinity pressTolerance disables the pre-arm flick override; any motion
+    // during the wait is treated as drag-the-float, not redock intent.
+    const FLOATING_REDOCK_INITIATION_DELAY_MS = 500;
     class VoidContainer extends CompositeDisposable {
         get element() {
             return this._element;
         }
         constructor(accessor, group) {
+            var _a, _b;
             super();
             this.accessor = accessor;
             this.group = group;
+            this.panelTransfer = LocalSelectionTransfer.getInstance();
             this._onDrop = new Emitter();
             this.onDrop = this._onDrop.event;
             this._onDragStart = new Emitter();
             this.onDragStart = this._onDragStart.event;
+            const caps = resolveDndCapabilities(this.accessor.options);
             this._element = document.createElement('div');
             this._element.className = 'dv-void-container';
-            this._element.draggable = !this.accessor.options.disableDnd;
-            toggleClass(this._element, 'dv-draggable', !this.accessor.options.disableDnd);
+            this._element.draggable = caps.html5;
+            toggleClass(this._element, 'dv-draggable', caps.html5 || caps.pointer);
             this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
                 this.accessor.doSetGroupActive(this.group);
-            }));
-            this.handler = new GroupDragHandler(this._element, accessor, group, !!this.accessor.options.disableDnd);
-            this.dropTarget = new Droptarget(this._element, {
+            }), 
+            // Shift+pointerdown marks the event so the group's overlay
+            // drag (move-by-floating) sees it was consumed and doesn't
+            // fire alongside the HTML5 drag. quasiPreventDefault sets the
+            // marker without calling preventDefault — that would also
+            // block dragstart, which we need to fire.
+            addDisposableListener(this._element, 'pointerdown', (e) => {
+                if (e.shiftKey) {
+                    quasiPreventDefault(e);
+                }
+            }, true));
+            const canDisplayOverlay = (event, position) => {
+                if (this.group.api.locked) {
+                    // Dropping on the void/header space adds the panel
+                    // to this group, which `locked` is meant to prevent
+                    // (both `true` and `'no-drop-target'`).
+                    return false;
+                }
+                const data = getPanelData();
+                if (data && this.accessor.id === data.viewId) {
+                    return true;
+                }
+                return group.model.canDisplayOverlay(event, position, 'header_space');
+            };
+            this.dropTarget = html5Backend.createDropTarget(this._element, {
                 acceptedTargetZones: ['center'],
-                canDisplayOverlay: (event, position) => {
-                    if (this.group.api.locked) {
-                        // Dropping on the void/header space adds the panel
-                        // to this group, which `locked` is meant to prevent
-                        // (both `true` and `'no-drop-target'`).
-                        return false;
+                canDisplayOverlay,
+                getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+            });
+            this.pointerDropTarget = pointerBackend.createDropTarget(this._element, {
+                acceptedTargetZones: ['center'],
+                canDisplayOverlay,
+                getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+            });
+            const buildMultiPanelsGhost = () => {
+                const ghostEl = document.createElement('div');
+                const style = window.getComputedStyle(this._element);
+                const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
+                const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
+                ghostEl.style.backgroundColor = bgColor;
+                ghostEl.style.color = color;
+                ghostEl.style.padding = '2px 8px';
+                ghostEl.style.height = '24px';
+                ghostEl.style.fontSize = '11px';
+                ghostEl.style.lineHeight = '20px';
+                ghostEl.style.borderRadius = '12px';
+                ghostEl.style.whiteSpace = 'nowrap';
+                ghostEl.style.boxSizing = 'border-box';
+                // HTML5 setDragImage snapshots the element as appended to the
+                // document; a default block-level div would stretch to the
+                // body's width and render as a viewport-wide bar.
+                ghostEl.style.display = 'inline-block';
+                ghostEl.textContent = `Multiple Panels (${this.group.size})`;
+                return ghostEl;
+            };
+            const buildGhostSpec = () => {
+                const createGhost = this.accessor.options.createGroupDragGhostComponent;
+                if (createGhost) {
+                    const renderer = createGhost(this.group);
+                    renderer.init({
+                        group: this.group,
+                        api: this.accessor.api,
+                    });
+                    return {
+                        element: renderer.element,
+                        offsetX: 30,
+                        offsetY: -10,
+                        dispose: renderer.dispose
+                            ? () => { var _a; return (_a = renderer.dispose) === null || _a === void 0 ? void 0 : _a.call(renderer); }
+                            : undefined,
+                    };
+                }
+                return {
+                    element: buildMultiPanelsGhost(),
+                    offsetX: 30,
+                    offsetY: -10,
+                };
+            };
+            const sharedDragOptions = {
+                getData: () => {
+                    this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, null)], PanelTransfer.prototype);
+                    return {
+                        dispose: () => {
+                            this.panelTransfer.clearData(PanelTransfer.prototype);
+                        },
+                    };
+                },
+                createGhost: buildGhostSpec,
+                onDragStart: (event) => {
+                    this._onDragStart.fire(event);
+                },
+            };
+            this.html5DragSource = html5Backend.createDragSource(this._element, Object.assign(Object.assign({}, sharedDragOptions), { disabled: !caps.html5, isCancelled: (event) => {
+                    // HTML5: floating groups need shift+drag as the explicit
+                    // detach gesture (otherwise click-and-drag conflicts with
+                    // moving the floating group itself).
+                    if (this.group.api.location.type === 'floating' &&
+                        !event.shiftKey) {
+                        return true;
                     }
-                    const data = getPanelData();
-                    if (data && this.accessor.id === data.viewId) {
+                    if (this.group.api.location.type === 'edge' &&
+                        this.group.size === 0) {
                         return true;
                     }
-                    return group.model.canDisplayOverlay(event, position, 'header_space');
-                },
-                getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
-            });
-            this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
-            this.addDisposables(this.handler, this.handler.onDragStart((event) => {
-                this._onDragStart.fire(event);
-            }), this.dropTarget.onDrop((event) => {
+                    return false;
+                } }));
+            const isFloating = () => { var _a, _b, _c; return ((_c = (_b = (_a = this.group) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.location) === null || _c === void 0 ? void 0 : _c.type) === 'floating'; };
+            this.pointerDragSource = pointerBackend.createDragSource(this._element, Object.assign(Object.assign({}, sharedDragOptions), { disabled: !caps.pointer, touchOnly: !caps.pointerHandlesMouse, 
+                // Floating groups share this element with the overlay's
+                // move-the-float drag. Without a longer hold + tolerance
+                // override, both gestures commit simultaneously and the
+                // user sees the float follow their finger *and* a ghost.
+                touchInitiationDelay: () => isFloating() ? FLOATING_REDOCK_INITIATION_DELAY_MS : 250, pressTolerance: () => (isFloating() ? Infinity : 8), isCancelled: () => {
+                    if (!resolveDndCapabilities(this.accessor.options).pointer) {
+                        return true;
+                    }
+                    // Pointer: long-press IS the deliberate gesture, so
+                    // floating groups don't need the shift gate.
+                    if (this.group.api.location.type === 'edge' &&
+                        this.group.size === 0) {
+                        return true;
+                    }
+                    return false;
+                }, onDragStart: (event) => {
+                    var _a;
+                    // Redock just committed — abort any in-flight overlay
+                    // move so the float stops following the finger while
+                    // the ghost takes over.
+                    (_a = this.getFloatingOverlay()) === null || _a === void 0 ? void 0 : _a.cancelPendingDrag();
+                    this._onDragStart.fire(event);
+                } }));
+            // Mirror direction: once the overlay's move-the-float gesture has
+            // actually moved something, cancel the pending redock arm so the
+            // ghost doesn't appear mid-drag if the user holds past 500ms.
+            const overlayMoveSub = new MutableDisposable();
+            const refreshOverlayMoveSub = () => {
+                const overlay = this.getFloatingOverlay();
+                overlayMoveSub.value = overlay
+                    ? overlay.onDidStartMoving(() => {
+                        this.pointerDragSource.cancelPending();
+                    })
+                    : exports.DockviewDisposable.NONE;
+            };
+            refreshOverlayMoveSub();
+            this.addDisposables(overlayMoveSub);
+            const locationChange = (_b = (_a = this.group) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.onDidLocationChange;
+            if (locationChange) {
+                this.addDisposables(locationChange(refreshOverlayMoveSub));
+            }
+            this.onWillShowOverlay = exports.DockviewEvent.any(this.dropTarget.onWillShowOverlay, this.pointerDropTarget.onWillShowOverlay);
+            this.addDisposables(this.html5DragSource, this.dropTarget.onDrop((event) => {
+                this._onDrop.fire(event);
+            }), this.pointerDropTarget.onDrop((event) => {
                 this._onDrop.fire(event);
-            }), this.dropTarget);
+            }), this.dropTarget, this.pointerDropTarget, this.pointerDragSource);
         }
         updateDragAndDropState() {
-            this._element.draggable = !this.accessor.options.disableDnd;
-            toggleClass(this._element, 'dv-draggable', !this.accessor.options.disableDnd);
-            this.handler.setDisabled(!!this.accessor.options.disableDnd);
+            const caps = resolveDndCapabilities(this.accessor.options);
+            this._element.draggable = caps.html5;
+            toggleClass(this._element, 'dv-draggable', caps.html5 || caps.pointer);
+            this.html5DragSource.setDisabled(!caps.html5);
+            this.pointerDragSource.setDisabled(!caps.pointer);
+            this.pointerDragSource.setTouchOnly(!caps.pointerHandlesMouse);
+        }
+        getFloatingOverlay() {
+            var _a, _b;
+            if (!this.group) {
+                return undefined;
+            }
+            return (_b = (_a = this.accessor.floatingGroups) === null || _a === void 0 ? void 0 : _a.find((fg) => fg.group === this.group)) === null || _b === void 0 ? void 0 : _b.overlay;
         }
     }
 
@@ -5851,6 +6778,14 @@
         return (palette !== null && palette !== void 0 ? palette : getFallbackPalette()).resolveValue(color);
     }
 
+    /**
+     * Visual chip for a tab group. Owns the DOM element, label, click /
+     * context-menu interactions, and exposes a long-press gesture as a
+     * second `onContextMenu` source. Drag-and-drop wiring lives in
+     * `TabGroupManager` — the manager constructs the drag sources on this
+     * chip's element so it can include tabs-list context (custom group
+     * drag image, tab-group transfer payload).
+     */
     class TabGroupChip extends CompositeDisposable {
         get element() {
             return this._element;
@@ -5861,22 +6796,22 @@
             this._onClick = new Emitter();
             this.onClick = this._onClick.event;
             this._onContextMenu = new Emitter();
+            /** Fires on right-click and on touch long-press. */
             this.onContextMenu = this._onContextMenu.event;
-            this._onDragStart = new Emitter();
-            this.onDragStart = this._onDragStart.event;
             this._element = document.createElement('div');
             this._element.className = 'dv-tab-group-chip';
             this._element.tabIndex = 0;
-            this._element.draggable = true;
             this._label = document.createElement('span');
             this._label.className = 'dv-tab-group-chip-label';
             this._element.appendChild(this._label);
-            this.addDisposables(this._onClick, this._onContextMenu, this._onDragStart, addDisposableListener(this._element, 'click', (event) => {
+            this.addDisposables(this._onClick, this._onContextMenu, new LongPressDetector(this._element, {
+                onLongPress: (event) => {
+                    this._onContextMenu.fire(event);
+                },
+            }), addDisposableListener(this._element, 'click', (event) => {
                 this._onClick.fire(event);
             }), addDisposableListener(this._element, 'contextmenu', (event) => {
                 this._onContextMenu.fire(event);
-            }), addDisposableListener(this._element, 'dragstart', (event) => {
-                this._onDragStart.fire(event);
             }));
         }
         init(params) {
@@ -6340,6 +7275,12 @@
                 this._positionChipForGroup(tabGroup);
             }
         }
+        updateDirection() {
+            const isVertical = this._ctx.getDirection() === 'vertical';
+            for (const [, entry] of this._chipRenderers) {
+                entry.dropTarget.setTargetZones(isVertical ? ['top'] : ['left']);
+            }
+        }
         snapshotChipWidths() {
             const widths = new Map();
             for (const [groupId, entry] of this._chipRenderers) {
@@ -6433,6 +7374,45 @@
             (_a = this._pendingTransitionCleanups.get(panelId)) === null || _a === void 0 ? void 0 : _a();
             this._pendingTransitionCleanups.delete(panelId);
         }
+        updateDragAndDropState() {
+            const caps = resolveDndCapabilities(this._ctx.accessor.options);
+            for (const entry of this._chipRenderers.values()) {
+                entry.chip.element.draggable = caps.html5;
+                entry.html5DragSource.setDisabled(!caps.html5);
+                entry.pointerDragSource.setDisabled(!caps.pointer);
+                entry.pointerDragSource.setTouchOnly(!caps.pointerHandlesMouse);
+            }
+        }
+        /**
+         * Synchronously dispose the chip drag sources for an in-flight chip
+         * drag. Called from `_commitGroupMove` so the transfer payload +
+         * iframe shield are released BEFORE the cross-group move detaches
+         * the chip (chip dispose is scheduled on a microtask via
+         * `_scheduleTabGroupUpdate`, which is too late for callers that read
+         * `getPanelData()` synchronously after the move). Idempotent — the
+         * subsequent `update()` will also dispose the sources.
+         */
+        disposeChipDrag(tabGroupId) {
+            var _a, _b;
+            const entry = this._chipRenderers.get(tabGroupId);
+            if (!entry) {
+                return;
+            }
+            // Optional-chained because tests may inject minimal entries
+            // that skip the manager's normal `_ensureChipForGroup` flow.
+            (_a = entry.html5DragSource) === null || _a === void 0 ? void 0 : _a.dispose();
+            (_b = entry.pointerDragSource) === null || _b === void 0 ? void 0 : _b.dispose();
+        }
+        /** Cloned chip rect used as the pointer follow-finger ghost. */
+        _buildChipGhostElement(chipEl) {
+            const style = getComputedStyle(chipEl);
+            const clone = chipEl.cloneNode(true);
+            Array.from(style).forEach((key) => {
+                clone.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key));
+            });
+            clone.style.position = 'absolute';
+            return clone;
+        }
         disposeAll() {
             var _a;
             (_a = this._indicator) === null || _a === void 0 ? void 0 : _a.dispose();
@@ -6478,6 +7458,74 @@
                 ? createChip(tabGroup)
                 : new TabGroupChip(this._ctx.accessor.tabGroupColorPalette);
             chip.init({ tabGroup, api: this._ctx.accessor.api });
+            const caps = resolveDndCapabilities(this._ctx.accessor.options);
+            chip.element.draggable = caps.html5;
+            const panelTransfer = LocalSelectionTransfer.getInstance();
+            // Shared `getData` for both backends. Sets a group-level
+            // PanelTransfer (panelId=null, tabGroupId identifies the group).
+            // The returned disposer clears it on drag end.
+            const getData = () => {
+                panelTransfer.setData([
+                    new PanelTransfer(this._ctx.accessor.id, this._ctx.group.id, null, tabGroup.id),
+                ], PanelTransfer.prototype);
+                return {
+                    dispose: () => {
+                        panelTransfer.clearData(PanelTransfer.prototype);
+                    },
+                };
+            };
+            // The chip's HTML5 drag image is the cloned tabs list (chip only),
+            // mounted inside the dockview root for CSS-variable inheritance and
+            // positioned against the chip's in-place rect. Layout-dependent
+            // offset means we set the drag image directly in `onDragStart`
+            // (inside the dragstart handler) rather than via the generic
+            // `createGhost` factory, which only knows about ghost specs that
+            // can be appended to `document.body`.
+            const html5DragSource = html5Backend.createDragSource(chip.element, {
+                getData,
+                disabled: !caps.html5,
+                isCancelled: () => !resolveDndCapabilities(this._ctx.accessor.options).html5,
+                onDragStart: (event) => {
+                    // Type guard via `dataTransfer` — `instanceof DragEvent`
+                    // would throw in jsdom which doesn't ship a DragEvent
+                    // constructor.
+                    if ('dataTransfer' in event && event.dataTransfer) {
+                        this.setGroupDragImage(event, tabGroup, chip.element);
+                    }
+                    this._callbacks.onChipDragStart(tabGroup, chip, event);
+                },
+                onDragEnd: (event) => {
+                    var _a, _b;
+                    (_b = (_a = this._callbacks).onChipDragEnd) === null || _b === void 0 ? void 0 : _b.call(_a, tabGroup, chip, event);
+                },
+            });
+            // Synchronous panelTransfer cleanup directly on the chip element.
+            // `Html5DragSource`'s dragend defers data disposal via `setTimeout(0)`
+            // so drop handlers can read the payload — but a chip drag that
+            // ends via `moveGroupOrPanel` (no actual drop event) needs the
+            // singleton cleared immediately, otherwise a synchronous
+            // `getPanelData()` after the move still sees the stale chip
+            // payload. Attached directly (not via `addDisposableListener`) so
+            // the listener survives chip disposal in the detach-then-dragend
+            // cross-group path; `once: true` auto-removes after the single
+            // dragend that we care about. (#1254)
+            chip.element.addEventListener('dragend', () => {
+                panelTransfer.clearData(PanelTransfer.prototype);
+            }, { once: true });
+            const pointerDragSource = pointerBackend.createDragSource(chip.element, {
+                getData,
+                disabled: !caps.pointer,
+                touchOnly: !caps.pointerHandlesMouse,
+                isCancelled: () => !resolveDndCapabilities(this._ctx.accessor.options).pointer,
+                createGhost: () => ({
+                    element: this._buildChipGhostElement(chip.element),
+                    offsetX: 8,
+                    offsetY: 8,
+                }),
+                onDragStart: (event) => {
+                    this._callbacks.onChipDragStart(tabGroup, chip, event);
+                },
+            });
             const disposables = [
                 tabGroup.onDidChange(() => {
                     var _a;
@@ -6491,24 +7539,70 @@
                 tabGroup.onDidCollapseChange(() => {
                     this._updateTabGroupClasses();
                 }),
+                html5DragSource,
+                pointerDragSource,
             ];
-            // Wire chip context menu and drag for all chip renderers
+            // Context menu: built-in TabGroupChip already aggregates right-click
+            // + touch long-press into `onContextMenu`. Custom chip renderers
+            // don't, so attach a long-press detector and contextmenu listener
+            // directly on their element.
+            const onContextMenu = (event) => {
+                // A long-press on a chip should preempt the in-flight pointer
+                // drag and open the menu instead.
+                pointerDragSource.cancelPending();
+                this._callbacks.onChipContextMenu(tabGroup, event);
+            };
             if (chip instanceof TabGroupChip) {
-                disposables.push(chip.onContextMenu((event) => {
-                    this._callbacks.onChipContextMenu(tabGroup, event);
-                }), chip.onDragStart((event) => {
-                    this._callbacks.onChipDragStart(tabGroup, chip, event);
-                }));
+                disposables.push(chip.onContextMenu(onContextMenu));
             }
             else {
-                disposables.push(addDisposableListener(chip.element, 'contextmenu', (event) => {
-                    this._callbacks.onChipContextMenu(tabGroup, event);
-                }), addDisposableListener(chip.element, 'dragstart', (event) => {
-                    this._callbacks.onChipDragStart(tabGroup, chip, event);
-                }));
-            }
+                disposables.push(new LongPressDetector(chip.element, {
+                    onLongPress: onContextMenu,
+                }), addDisposableListener(chip.element, 'contextmenu', onContextMenu));
+            }
+            // The chip sits before its group's first tab in the DOM, so it
+            // covers the "drop before the group" position. Without a drop
+            // target here, dropping a tab over the chip is a dead zone —
+            // particularly visible when the group is first in the tabs list
+            // and there's no preceding tab whose right zone covers position 0.
+            // The smooth animation path already shifts the chip's margin to
+            // open a gap, so suppress the overlay in that mode.
+            const isVertical = this._ctx.getDirection() === 'vertical';
+            const dropTarget = new Droptarget(chip.element, {
+                acceptedTargetZones: isVertical ? ['top'] : ['left'],
+                overlayModel: {
+                    activationSize: { value: 100, type: 'percentage' },
+                },
+                canDisplayOverlay: (event, position) => {
+                    var _a;
+                    if (this._ctx.group.locked) {
+                        return false;
+                    }
+                    if (this._ctx.accessor.options.disableDnd) {
+                        return false;
+                    }
+                    const data = getPanelData();
+                    if (data && this._ctx.accessor.id === data.viewId) {
+                        if (((_a = this._ctx.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) ===
+                            'smooth') {
+                            return false;
+                        }
+                        return true;
+                    }
+                    return this._ctx.group.model.canDisplayOverlay(event, position, 'tab');
+                },
+            });
+            disposables.push(dropTarget, dropTarget.onDrop((event) => {
+                this._callbacks.onChipDrop(tabGroup, event);
+            }));
             const disposable = new CompositeDisposable(...disposables);
-            this._chipRenderers.set(tabGroup.id, { chip, disposable });
+            this._chipRenderers.set(tabGroup.id, {
+                chip,
+                html5DragSource,
+                pointerDragSource,
+                disposable,
+                dropTarget,
+            });
             // Group is born collapsed (cross-group drop, layout restore, etc.):
             // its tabs are about to be added without the collapsed class. Skip
             // the animation in the upcoming _updateTabGroupClasses call so they
@@ -6767,6 +7861,7 @@
             for (const tab of this._tabs) {
                 tab.value.setDirection(value);
             }
+            this._tabGroupManager.updateDirection();
         }
         constructor(group, accessor, options) {
             super();
@@ -6786,7 +7881,7 @@
             this._voidContainer = null;
             this._voidContainerListeners = null;
             this._extendedDropZone = null;
-            this._chipDragCleanup = null;
+            this._pointerInsideTabsList = false;
             this._onTabDragStart = new Emitter();
             this.onTabDragStart = this._onTabDragStart.event;
             this._onDrop = new Emitter();
@@ -6821,13 +7916,40 @@
                 onChipDragStart: (tabGroup, chip, event) => {
                     this._handleChipDragStart(tabGroup, chip, event);
                 },
+                onChipDragEnd: () => {
+                    // HTML5 chip dragend (incl. cancels). The Html5DragSource
+                    // owns the listener on the chip element, so this fires
+                    // even if the chip was detached cross-group — the
+                    // element keeps its listeners until the source is
+                    // disposed. resetDragAnimation is a no-op after a
+                    // successful drop (anim state already null) thanks to
+                    // the gating inside it.
+                    this.resetDragAnimation();
+                },
+                onChipDrop: (tabGroup, event) => {
+                    this._handleChipDrop(tabGroup, event);
+                },
             });
             this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, {
                 dispose: () => {
                     var _a;
                     (_a = this._flipTransitionCleanup) === null || _a === void 0 ? void 0 : _a.call(this);
                 },
-            }, addDisposableListener(this.element, 'pointerdown', (event) => {
+            }, 
+            // Pointer-side cleanup: when any pointer drag ends, tear
+            // down smooth-reorder anim state the dragover bridge may
+            // have installed. The chip's pointer drag source handles
+            // its own transfer payload + iframe-shield cleanup.
+            PointerDragController.getInstance().onDragEnd(() => {
+                this._pointerInsideTabsList = false;
+                this.resetDragAnimation();
+            }), 
+            // Pointer-event mirror of the HTML5 dragover / dragleave handlers
+            // below. Drives smooth-reorder for `dndStrategy: 'pointer'` and
+            // for touch drags in `'auto'`.
+            PointerDragController.getInstance().onDragMove((e) => {
+                this._handlePointerDragMove(e.clientX, e.clientY);
+            }), addDisposableListener(this.element, 'pointerdown', (event) => {
                 if (event.defaultPrevented) {
                     return;
                 }
@@ -6835,135 +7957,60 @@
                 if (isLeftClick) {
                     this.accessor.doSetGroupActive(this.group);
                 }
-            }), addDisposableListener(this._tabsList, 'dragover', (event) => {
-                var _a, _b, _c, _d;
-                if (this.accessor.options.disableDnd) {
+            }), 
+            // Trackpad / wheel forwarding. The strip scrolls along its own
+            // axis (x for horizontal headers, y for vertical), so deltaY
+            // from a plain mouse wheel maps onto the strip's axis too —
+            // this gives the VS Code-style "scroll over tab bar to page
+            // through tabs" feel. We only consume the event when the strip
+            // is actually overflowing in the direction the user wheeled in,
+            // so a wheel at the edge of a non-overflowing strip still
+            // bubbles up and scrolls the page. `{ passive: false }` is
+            // required because we call preventDefault().
+            addDisposableListener(this._tabsList, 'wheel', (event) => {
+                const isVertical = this._direction === 'vertical';
+                const primary = isVertical
+                    ? event.deltaY || event.deltaX
+                    : event.deltaX || event.deltaY;
+                if (primary === 0) {
                     return;
                 }
-                // If _animState exists but belongs to a different
-                // drag (stale from a previous operation), replace it
-                // so the current drag is handled correctly.
-                if (this._animState) {
-                    const data = getPanelData();
-                    if ((data === null || data === void 0 ? void 0 : data.tabGroupId) &&
-                        data.groupId !== this.group.id &&
-                        this._animState.sourceTabGroupId !== data.tabGroupId) {
-                        this._animState = null;
-                    }
-                }
-                if (!this._animState) {
-                    const data = getPanelData();
-                    // In default animation mode, individual tab drops
-                    // are handled by per-tab Droptargets. But tab group
-                    // chip drags still need tab-list-level handling so
-                    // that drops on gaps / void space work.
-                    if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) ===
-                        'default' &&
-                        !(data === null || data === void 0 ? void 0 : data.tabGroupId)) {
-                        return;
-                    }
-                    if (data &&
-                        (data.panelId || data.tabGroupId) &&
-                        data.groupId !== this.group.id) {
-                        const avgWidth = this.getAverageTabWidth();
-                        if (data.tabGroupId) {
-                            // External group drag — look up the
-                            // source tab group to size the gap
-                            const sourceGroup = this.accessor.getPanel(data.groupId);
-                            const sourceTg = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.getTabGroups().find((tg) => tg.id === data.tabGroupId);
-                            const panelCount = (_b = sourceTg === null || sourceTg === void 0 ? void 0 : sourceTg.panelIds.length) !== null && _b !== void 0 ? _b : 1;
-                            const groupGapWidth = avgWidth * panelCount + avgWidth;
-                            this._animState = {
-                                sourceTabId: '',
-                                sourceIndex: -1,
-                                tabPositions: this.snapshotTabPositions(),
-                                chipPositions: this._tabGroupManager.snapshotChipWidths(),
-                                currentInsertionIndex: null,
-                                targetTabGroupId: null,
-                                sourceTabGroupId: data.tabGroupId,
-                                sourceGroupPanelIds: sourceTg
-                                    ? new Set(sourceTg.panelIds)
-                                    : new Set(),
-                                sourceChipWidth: avgWidth,
-                                cursorOffsetFromDragLeft: groupGapWidth / 2,
-                                sourceGapWidth: groupGapWidth,
-                                containerLeft: this._tabsList.getBoundingClientRect()
-                                    .left,
-                            };
-                        }
-                        else {
-                            this._animState = {
-                                sourceTabId: data.panelId,
-                                sourceIndex: -1,
-                                tabPositions: this.snapshotTabPositions(),
-                                chipPositions: this._tabGroupManager.snapshotChipWidths(),
-                                currentInsertionIndex: null,
-                                targetTabGroupId: null,
-                                sourceTabGroupId: null,
-                                sourceGroupPanelIds: null,
-                                sourceChipWidth: 0,
-                                cursorOffsetFromDragLeft: avgWidth / 2,
-                                sourceGapWidth: avgWidth,
-                                containerLeft: this._tabsList.getBoundingClientRect()
-                                    .left,
-                            };
-                        }
-                    }
-                    else {
-                        return;
-                    }
-                }
-                event.preventDefault(); // allow drop to fire on the container
-                // For intra-group drag (sourceIndex >= 0) the gap
-                // animation is the sole visual indicator — clear any
-                // stale anchor overlay that may have been set while the
-                // cursor was over the panel content area or another zone.
-                // External drags (sourceIndex === -1) leave the overlay
-                // to the individual tab Droptargets so cross-group
-                // animation is not disrupted.
-                if (this._animState.sourceIndex !== -1) {
-                    (_d = (_c = this.group.model.dropTargetContainer) === null || _c === void 0 ? void 0 : _c.model) === null || _d === void 0 ? void 0 : _d.clear();
-                }
-                this.handleDragOver(event);
-            }, true), addDisposableListener(this._tabsList, 'dragleave', (event) => {
-                var _a, _b, _c;
-                if (!this._animState) {
+                const max = isVertical
+                    ? this._tabsList.scrollHeight -
+                        this._tabsList.clientHeight
+                    : this._tabsList.scrollWidth -
+                        this._tabsList.clientWidth;
+                if (max <= 0) {
                     return;
                 }
-                const related = event.relatedTarget;
-                // Ignore moves between children of the tabs list
-                if (related && this._tabsList.contains(related)) {
+                const current = isVertical
+                    ? this._tabsList.scrollTop
+                    : this._tabsList.scrollLeft;
+                // At the edge in the wheel direction: let the page
+                // scroll instead of trapping the gesture.
+                if ((primary < 0 && current <= 0) ||
+                    (primary > 0 && current >= max)) {
                     return;
                 }
-                // If moving into the broader drop zone (e.g. void container,
-                // left actions), keep _animState alive so the external
-                // dragover listeners can continue the gap animation.
-                if (related && ((_a = this._extendedDropZone) === null || _a === void 0 ? void 0 : _a.contains(related))) {
-                    this.resetTabTransforms();
-                    this._animState.currentInsertionIndex = null;
-                    return;
+                event.preventDefault();
+                // Custom-scrollbar mode wraps the tabs list and installs
+                // its own wheel listener that rewrites scrollLeft from a
+                // deltaY-only tracker. Without stopPropagation that
+                // handler would clobber our deltaX-aware update.
+                event.stopPropagation();
+                if (isVertical) {
+                    this._tabsList.scrollTop = current + primary;
                 }
-                // When leaving toward the void container (empty header space
-                // to the right), keep the animation state so the drop can
-                // still land at the end position.
-                const rt = event.relatedTarget;
-                const isVoid = this._voidContainer &&
-                    rt &&
-                    (rt === this._voidContainer ||
-                        this._voidContainer.contains(rt));
-                if (isVoid) {
-                    return;
+                else {
+                    this._tabsList.scrollLeft = current + primary;
                 }
-                this.resetTabTransforms();
-                if (this._animState) {
-                    if (this._animState.sourceIndex === -1) {
-                        (_c = (_b = this.group.model.dropTargetContainer) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.clear();
-                        this._animState = null;
-                    }
-                    else {
-                        this._animState.currentInsertionIndex = null;
-                    }
+            }, { passive: false }), addDisposableListener(this._tabsList, 'dragover', (event) => {
+                if (this._processDragOver(event.clientX)) {
+                    // Allow `drop` to fire on the tabs list container.
+                    event.preventDefault();
                 }
+            }, true), addDisposableListener(this._tabsList, 'dragleave', (event) => {
+                this._processDragLeave(event.relatedTarget);
             }, true), addDisposableListener(this._tabsList, 'dragend', () => {
                 this.resetDragAnimation();
             }), addDisposableListener(this._tabsList, 'drop', (event) => {
@@ -7085,6 +8132,9 @@
             const disposable = new CompositeDisposable(tab.onDragStart((event) => {
                 var _a;
                 this._onTabDragStart.fire({ nativeEvent: event, panel });
+                // Both HTML5 and pointer drags initialize _animState. Cleanup
+                // is wired in both paths: HTML5 via dragend/drop on _tabsList,
+                // pointer via PointerDragController.onDragEnd subscriptions.
                 if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
                     const tabWidth = tab.element.getBoundingClientRect().width;
                     const sourceIndex = this._tabs.findIndex((x) => x.value === tab);
@@ -7344,6 +8394,7 @@
             for (const tab of this._tabs) {
                 tab.value.updateDragAndDropState();
             }
+            this._tabGroupManager.updateDragAndDropState();
         }
         /**
          * Synchronize chip elements and CSS classes for all tab groups
@@ -7355,6 +8406,13 @@
         refreshTabGroupAccent() {
             this._tabGroupManager.refreshAccents();
         }
+        /**
+         * Tabs-list-specific side effects of a chip drag start. The chip's
+         * drag sources (constructed by `TabGroupManager`) own the transfer
+         * payload, iframe shielding, dataTransfer setup, and the HTML5 drag
+         * image. This method just sets up the smooth-reorder anim state and
+         * collapses the source-group tabs in the tabs list.
+         */
         _handleChipDragStart(tabGroup, chip, event) {
             var _a;
             const firstPanelId = tabGroup.panelIds[0];
@@ -7385,89 +8443,79 @@
                 sourceGapWidth: groupGapWidth,
                 containerLeft: this._tabsList.getBoundingClientRect().left,
             };
-            // Set LocalSelectionTransfer so drop targets recognise this as
-            // an internal dockview drag.  panelId is null (group-level),
-            // tabGroupId identifies which tab group is being dragged.
-            const panelTransfer = LocalSelectionTransfer.getInstance();
-            panelTransfer.setData([
-                new PanelTransfer(this.accessor.id, this.group.id, null, tabGroup.id),
-            ], PanelTransfer.prototype);
-            const iframes = disableIframePointEvents();
-            // The dragend listener on `_tabsList` is unreachable for chip
-            // drags because cross-group drops detach the chip from the DOM
-            // before dragend fires (the source tab group becomes empty, so
-            // `_positionChipForGroup` removes the chip element). Without
-            // bubbling, the tabsList listener never runs and `_animState`,
-            // `_chipDragCleanup`, and the dragging CSS classes leak. Listen
-            // directly on the chip element so cleanup happens regardless of
-            // whether it's still attached.  (Issue #1254.)
-            const chipElement = chip.element;
-            const onChipDragEnd = () => {
-                chipElement.removeEventListener('dragend', onChipDragEnd);
-                this.resetDragAnimation();
-            };
-            chipElement.addEventListener('dragend', onChipDragEnd);
-            this._chipDragCleanup = {
-                dispose: () => {
-                    chipElement.removeEventListener('dragend', onChipDragEnd);
-                    panelTransfer.clearData(PanelTransfer.prototype);
-                    iframes.release();
-                },
-            };
-            if (event.dataTransfer) {
-                event.dataTransfer.effectAllowed = 'move';
-                if (event.dataTransfer.items.length === 0) {
-                    event.dataTransfer.setData('text/plain', '');
-                }
-            }
-            if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
-                // Collapse group tabs + chip after the browser
-                // captures the drag image, then open the gap at the
-                // source position — all instant (no transitions).
-                const groupPanelIds = new Set(tabGroup.panelIds);
-                this._pendingCollapse = true;
-                requestAnimationFrame(() => {
-                    var _a;
-                    var _b;
-                    this._pendingCollapse = false;
-                    if (!this._animState) {
-                        return;
-                    }
-                    // Collapse all group tabs instantly
-                    for (const t of this._tabs) {
-                        if (groupPanelIds.has(t.value.panel.id)) {
-                            t.value.element.style.transition = 'none';
-                            toggleClass(t.value.element, 'dv-tab--dragging', true);
-                        }
-                    }
-                    // Collapse the group chip instantly
-                    const chipEntry = this._tabGroupManager.chipRenderers.get(tabGroup.id);
-                    if (chipEntry) {
-                        chipEntry.chip.element.style.transition = 'none';
-                        toggleClass(chipEntry.chip.element, 'dv-tab-group-chip--dragging', true);
-                    }
-                    // Single reflow for the entire batch
-                    void this._tabsList.offsetHeight;
-                    const underline = this._tabGroupManager.groupUnderlines.get(tabGroup.id);
-                    if (underline) {
-                        underline.style.display = 'none';
-                    }
-                    (_a = (_b = this._animState).currentInsertionIndex) !== null && _a !== void 0 ? _a : (_b.currentInsertionIndex = firstIdx);
-                    // Apply gap with transitions disabled
-                    this.applyDragOverTransforms(true);
-                    // Re-enable transitions for subsequent moves
-                    for (const t of this._tabs) {
-                        if (groupPanelIds.has(t.value.panel.id)) {
-                            t.value.element.style.removeProperty('transition');
-                        }
+            if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) !== 'smooth') {
+                return;
+            }
+            // Collapse group tabs + chip after the browser captures the drag
+            // image, then open the gap at the source position — all instant
+            // (no transitions).
+            const groupPanelIds = new Set(tabGroup.panelIds);
+            this._pendingCollapse = true;
+            requestAnimationFrame(() => {
+                var _a;
+                var _b;
+                this._pendingCollapse = false;
+                if (!this._animState) {
+                    return;
+                }
+                // Collapse all group tabs instantly
+                for (const t of this._tabs) {
+                    if (groupPanelIds.has(t.value.panel.id)) {
+                        t.value.element.style.transition = 'none';
+                        toggleClass(t.value.element, 'dv-tab--dragging', true);
                     }
-                    if (chipEntry) {
-                        chipEntry.chip.element.style.removeProperty('transition');
+                }
+                // Collapse the group chip instantly
+                const chipEntry = this._tabGroupManager.chipRenderers.get(tabGroup.id);
+                if (chipEntry) {
+                    chipEntry.chip.element.style.transition = 'none';
+                    toggleClass(chipEntry.chip.element, 'dv-tab-group-chip--dragging', true);
+                }
+                // Single reflow for the entire batch
+                void this._tabsList.offsetHeight;
+                const underline = this._tabGroupManager.groupUnderlines.get(tabGroup.id);
+                if (underline) {
+                    underline.style.display = 'none';
+                }
+                (_a = (_b = this._animState).currentInsertionIndex) !== null && _a !== void 0 ? _a : (_b.currentInsertionIndex = firstIdx);
+                this.applyDragOverTransforms(true);
+                for (const t of this._tabs) {
+                    if (groupPanelIds.has(t.value.panel.id)) {
+                        t.value.element.style.removeProperty('transition');
                     }
-                });
+                }
+                if (chipEntry) {
+                    chipEntry.chip.element.style.removeProperty('transition');
+                }
+            });
+        }
+        /**
+         * A drop on a tab group chip means "insert before this group". Resolve to
+         * the index of the group's first tab, adjusting for same-group removal
+         * (when the source tab is currently to the left of the target slot, its
+         * removal shifts the insertion index down by one). Always clears
+         * `targetTabGroupId` so the dropped tab lands outside the group.
+         */
+        _handleChipDrop(tabGroup, event) {
+            const firstPanelId = tabGroup.panelIds[0];
+            if (!firstPanelId) {
+                return;
+            }
+            const insertionIndex = this._tabs.findIndex((x) => x.value.panel.id === firstPanelId);
+            if (insertionIndex === -1) {
+                return;
             }
-            // Build a composite drag image showing chip + group tabs
-            this._tabGroupManager.setGroupDragImage(event, tabGroup, chip.element);
+            const data = getPanelData();
+            const sourceIndex = data && data.groupId === this.group.id && data.panelId
+                ? this._tabs.findIndex((x) => x.value.panel.id === data.panelId)
+                : -1;
+            const adjustedIndex = insertionIndex -
+                (sourceIndex !== -1 && sourceIndex < insertionIndex ? 1 : 0);
+            this._onDrop.fire({
+                event: event.nativeEvent,
+                index: adjustedIndex,
+                targetTabGroupId: null,
+            });
         }
         /**
          * Sets the broader container that is part of the same logical drop surface
@@ -7529,6 +8577,164 @@
             }
             return total / this._tabs.length;
         }
+        /**
+         * Pointer-event entry point. The HTML5 path enters via the per-element
+         * `dragover` listener; this one hit-tests the global pointer-drag
+         * position against the tabs list and routes through the same shared
+         * `_processDragOver` / `_processDragLeave` helpers.
+         */
+        _handlePointerDragMove(clientX, clientY) {
+            var _a;
+            const sourceDoc = (_a = this._tabsList.ownerDocument) !== null && _a !== void 0 ? _a : document;
+            const elAtPoint = sourceDoc.elementFromPoint(clientX, clientY);
+            const inside = !!elAtPoint &&
+                (this._tabsList.contains(elAtPoint) ||
+                    (!!this._extendedDropZone &&
+                        this._extendedDropZone.contains(elAtPoint)));
+            if (!inside) {
+                if (this._pointerInsideTabsList) {
+                    this._pointerInsideTabsList = false;
+                    this._processDragLeave(elAtPoint);
+                }
+                return;
+            }
+            this._pointerInsideTabsList = true;
+            this._processDragOver(clientX);
+        }
+        /**
+         * Shared body of the dragover entry point. Refreshes stale anim state
+         * for a changed drag identity, initializes anim state for incoming
+         * cross-group drags, and dispatches to the gap-following math in
+         * `handleDragOver`. Returns true when this tabs list has taken
+         * ownership of the drag — HTML5 callers use this to gate
+         * `event.preventDefault()`.
+         */
+        _processDragOver(clientX) {
+            var _a, _b, _c, _d;
+            if (this.accessor.options.disableDnd) {
+                return false;
+            }
+            // Stale-state guard: if a previous drag's anim state is still here
+            // but the current drag is a different identity, drop the stale one
+            // so the new drag starts from a clean slate.
+            if (this._animState) {
+                const data = getPanelData();
+                if ((data === null || data === void 0 ? void 0 : data.tabGroupId) &&
+                    data.groupId !== this.group.id &&
+                    this._animState.sourceTabGroupId !== data.tabGroupId) {
+                    this._animState = null;
+                }
+            }
+            if (!this._animState) {
+                const data = getPanelData();
+                // In default animation mode, individual tab drops are handled
+                // by per-tab Droptargets; only chip drags need tabs-list-level
+                // handling so drops on void space still work.
+                if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'default' &&
+                    !(data === null || data === void 0 ? void 0 : data.tabGroupId)) {
+                    return false;
+                }
+                if (data &&
+                    (data.panelId || data.tabGroupId) &&
+                    data.groupId !== this.group.id) {
+                    const avgWidth = this.getAverageTabWidth();
+                    if (data.tabGroupId) {
+                        // External group drag — look up the source group to
+                        // size the gap.
+                        const sourceGroup = this.accessor.getPanel(data.groupId);
+                        const sourceTg = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.getTabGroups().find((tg) => tg.id === data.tabGroupId);
+                        const panelCount = (_b = sourceTg === null || sourceTg === void 0 ? void 0 : sourceTg.panelIds.length) !== null && _b !== void 0 ? _b : 1;
+                        const groupGapWidth = avgWidth * panelCount + avgWidth;
+                        this._animState = {
+                            sourceTabId: '',
+                            sourceIndex: -1,
+                            tabPositions: this.snapshotTabPositions(),
+                            chipPositions: this._tabGroupManager.snapshotChipWidths(),
+                            currentInsertionIndex: null,
+                            targetTabGroupId: null,
+                            sourceTabGroupId: data.tabGroupId,
+                            sourceGroupPanelIds: sourceTg
+                                ? new Set(sourceTg.panelIds)
+                                : new Set(),
+                            sourceChipWidth: avgWidth,
+                            cursorOffsetFromDragLeft: groupGapWidth / 2,
+                            sourceGapWidth: groupGapWidth,
+                            containerLeft: this._tabsList.getBoundingClientRect().left,
+                        };
+                    }
+                    else {
+                        this._animState = {
+                            sourceTabId: data.panelId,
+                            sourceIndex: -1,
+                            tabPositions: this.snapshotTabPositions(),
+                            chipPositions: this._tabGroupManager.snapshotChipWidths(),
+                            currentInsertionIndex: null,
+                            targetTabGroupId: null,
+                            sourceTabGroupId: null,
+                            sourceGroupPanelIds: null,
+                            sourceChipWidth: 0,
+                            cursorOffsetFromDragLeft: avgWidth / 2,
+                            sourceGapWidth: avgWidth,
+                            containerLeft: this._tabsList.getBoundingClientRect().left,
+                        };
+                    }
+                }
+                else {
+                    return false;
+                }
+            }
+            // For intra-group drag (sourceIndex >= 0) the gap animation is the
+            // sole visual indicator — clear any stale anchor overlay that may
+            // have been set while the cursor was over the panel content area or
+            // another zone. External drags (sourceIndex === -1) leave the
+            // overlay to the individual tab Droptargets so cross-group
+            // animation is not disrupted.
+            if (this._animState.sourceIndex !== -1) {
+                (_d = (_c = this.group.model.dropTargetContainer) === null || _c === void 0 ? void 0 : _c.model) === null || _d === void 0 ? void 0 : _d.clear();
+            }
+            this.handleDragOver({ clientX });
+            return true;
+        }
+        /**
+         * Shared body of the dragleave entry point. Preserves anim state when
+         * the drag moves between tabs-list children, into the extended drop
+         * zone, or into the void container; tears it down otherwise.
+         */
+        _processDragLeave(related) {
+            var _a, _b, _c;
+            if (!this._animState) {
+                return;
+            }
+            // Moves between children of the tabs list aren't real leaves.
+            if (related && this._tabsList.contains(related)) {
+                return;
+            }
+            // Moving into the broader drop zone (e.g. void container, left
+            // actions) — keep anim state alive so external listeners can
+            // continue the gap animation.
+            if (related && ((_a = this._extendedDropZone) === null || _a === void 0 ? void 0 : _a.contains(related))) {
+                this.resetTabTransforms();
+                this._animState.currentInsertionIndex = null;
+                return;
+            }
+            // Leaving toward the void container (empty header space to the
+            // right): keep anim state so a drop can still land at the end.
+            const isVoid = this._voidContainer &&
+                related &&
+                (related === this._voidContainer ||
+                    this._voidContainer.contains(related));
+            if (isVoid) {
+                return;
+            }
+            this.resetTabTransforms();
+            if (this._animState.sourceIndex === -1) {
+                (_c = (_b = this.group.model.dropTargetContainer) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.clear();
+                this._animState = null;
+            }
+            else {
+                this._animState.currentInsertionIndex = null;
+            }
+        }
         handleDragOver(event) {
             var _a, _b, _c, _d, _e;
             if (!this._animState) {
@@ -7938,20 +9144,23 @@
          * in the model, and run a FLIP animation.
          */
         _commitGroupMove(sourceTabGroupId, insertionIndex) {
-            var _a, _b, _c;
-            // Read transfer data BEFORE disposing cleanup — disposing
-            // _chipDragCleanup clears the global LocalSelectionTransfer
-            // singleton which getPanelData() reads from.
+            var _a, _b;
+            // Read transfer data first.
             const data = getPanelData();
-            (_a = this._chipDragCleanup) === null || _a === void 0 ? void 0 : _a.dispose();
-            this._chipDragCleanup = null;
+            // Synchronously dispose the source chip's drag sources, which
+            // clears the panelTransfer payload + iframe shield. Cross-group
+            // moves dissolve the source chip on a microtask, which is too
+            // late: a synchronous `getPanelData()` after this method (or any
+            // sibling dragover handler firing in the same tick) would
+            // otherwise see stale data still referencing the old tabGroupId.
+            this._tabGroupManager.disposeChipDrag(sourceTabGroupId);
             // Check if the tab group exists in this group (within-group reorder)
             // or in another group (cross-group move).
             const isLocal = this.group.model
                 .getTabGroups()
                 .some((tg) => tg.id === sourceTabGroupId);
             if (isLocal) {
-                if (((_b = this.accessor.options.theme) === null || _b === void 0 ? void 0 : _b.tabAnimation) === 'smooth') {
+                if (((_a = this.accessor.options.theme) === null || _a === void 0 ? void 0 : _a.tabAnimation) === 'smooth') {
                     this._clearGroupDragClasses(sourceTabGroupId);
                     const firstPositions = this.snapshotTabPositions();
                     this.resetTabTransforms();
@@ -7979,7 +9188,7 @@
                 this.accessor.moveGroupOrPanel({
                     from: {
                         groupId: data.groupId,
-                        tabGroupId: (_c = data.tabGroupId) !== null && _c !== void 0 ? _c : sourceTabGroupId,
+                        tabGroupId: (_b = data.tabGroupId) !== null && _b !== void 0 ? _b : sourceTabGroupId,
                     },
                     to: {
                         group: this.group,
@@ -8007,22 +9216,27 @@
             this._tabGroupManager.skipNextCollapseAnimation = true;
         }
         resetDragAnimation() {
-            var _a, _b;
             this._pendingCollapse = false;
-            this.resetTabTransforms();
-            // Clear drag-collapse classes instantly (no transition)
-            if ((_a = this._animState) === null || _a === void 0 ? void 0 : _a.sourceTabGroupId) {
-                this._clearGroupDragClasses(this._animState.sourceTabGroupId);
-            }
-            else {
-                this._removeClassInstantlyBatch(this._tabs.map((t) => t.value.element), 'dv-tab--dragging');
-            }
-            this._animState = null;
-            (_b = this._chipDragCleanup) === null || _b === void 0 ? void 0 : _b.dispose();
-            this._chipDragCleanup = null;
-            // Restore any hidden underlines from group drags
-            for (const [, el] of this._tabGroupManager.groupUnderlines) {
-                el.style.removeProperty('display');
+            // After a drop, `tab.onDrop` consumes _animState (sets it to null)
+            // and immediately calls `runFlipAnimation`, which sets transforms
+            // and queues an rAF to trigger the CSS transition. dragend fires
+            // synchronously on the source element BEFORE that rAF runs — if
+            // we cleared transforms here we'd clobber the in-flight FLIP, so
+            // gate the cleanup on _animState still being set (i.e. drag was
+            // cancelled rather than dropped).
+            if (this._animState) {
+                this.resetTabTransforms();
+                if (this._animState.sourceTabGroupId) {
+                    this._clearGroupDragClasses(this._animState.sourceTabGroupId);
+                }
+                else {
+                    this._removeClassInstantlyBatch(this._tabs.map((t) => t.value.element), 'dv-tab--dragging');
+                }
+                this._animState = null;
+                // Restore any hidden underlines from group drags.
+                for (const [, el] of this._tabGroupManager.groupUnderlines) {
+                    el.style.removeProperty('display');
+                }
             }
         }
         runFlipAnimation(firstPositions, sourceTabId, isCrossGroup = false, animRange) {
@@ -8522,6 +9736,7 @@
             rootOverlayModel: undefined,
             locked: undefined,
             disableDnd: undefined,
+            dndStrategy: undefined,
             className: undefined,
             noPanelsOverlay: undefined,
             dndEdges: undefined,
@@ -8706,6 +9921,10 @@
     }
 
     class DockviewDidDropEvent extends DockviewEvent {
+        /**
+         * `PointerEvent` for touch drags has no `dataTransfer`; use
+         * `getData()` for the dockview payload regardless of input method.
+         */
         get nativeEvent() {
             return this.options.nativeEvent;
         }
@@ -8810,29 +10029,28 @@
             toggleClass(this.container, 'dv-groupview-floating', false);
             toggleClass(this.container, 'dv-groupview-popout', false);
             toggleClass(this.container, 'dv-groupview-edge', false);
+            // Mouse and touch drop targets must agree on accepted zones.
+            const applyZones = (zones) => {
+                this.contentContainer.dropTarget.setTargetZones(zones);
+                this.contentContainer.pointerDropTarget.setTargetZones(zones);
+            };
             switch (value.type) {
                 case 'grid':
-                    this.contentContainer.dropTarget.setTargetZones([
-                        'top',
-                        'bottom',
-                        'left',
-                        'right',
-                        'center',
-                    ]);
+                    applyZones(['top', 'bottom', 'left', 'right', 'center']);
                     break;
                 case 'floating':
-                    this.contentContainer.dropTarget.setTargetZones(['center']);
-                    this.contentContainer.dropTarget.setTargetZones(value
+                    applyZones(['center']);
+                    applyZones(value
                         ? ['center']
                         : ['top', 'bottom', 'left', 'right', 'center']);
                     toggleClass(this.container, 'dv-groupview-floating', true);
                     break;
                 case 'popout':
-                    this.contentContainer.dropTarget.setTargetZones(['center']);
+                    applyZones(['center']);
                     toggleClass(this.container, 'dv-groupview-popout', true);
                     break;
                 case 'edge':
-                    this.contentContainer.dropTarget.setTargetZones(['center']);
+                    applyZones(['center']);
                     toggleClass(this.container, 'dv-groupview-edge', true);
                     break;
             }
@@ -8958,6 +10176,8 @@
                 // noop
             }), this.contentContainer.dropTarget.onDrop((event) => {
                 this.handleDropEvent('content', event.nativeEvent, event.position);
+            }), this.contentContainer.pointerDropTarget.onDrop((event) => {
+                this.handleDropEvent('content', event.nativeEvent, event.position);
             }), this.tabsContainer.onWillShowOverlay((event) => {
                 this._onWillShowOverlay.fire(event);
             }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
@@ -8968,6 +10188,14 @@
                     group: this.groupPanel,
                     getData: getPanelData,
                 }));
+            }), this.contentContainer.pointerDropTarget.onWillShowOverlay((event) => {
+                this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
+                    kind: 'content',
+                    panel: this.activePanel,
+                    api: this._api,
+                    group: this.groupPanel,
+                    getData: getPanelData,
+                }));
             }), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this._onUnhandledDragOverEvent, this._onDidPanelTitleChange, this._onDidPanelParametersChange, this._onDidCreateTabGroup, this._onDidDestroyTabGroup, this._onDidAddPanelToTabGroup, this._onDidRemovePanelFromTabGroup, this._onDidTabGroupChange, this._onDidTabGroupCollapsedChange, this._onDidCreateTabGroup.event(() => {
                 this._scheduleTabGroupUpdate();
             }), this._onDidDestroyTabGroup.event(() => {
@@ -10971,7 +12199,12 @@
             this.onDidChange = this._onDidChange.event;
             this._onDidChangeEnd = new Emitter();
             this.onDidChangeEnd = this._onDidChangeEnd.event;
-            this.addDisposables(this._onDidChange, this._onDidChangeEnd);
+            this._onDidStartMoving = new Emitter();
+            /** Fires once per drag, the first time the float actually moves. */
+            this.onDidStartMoving = this._onDidStartMoving.event;
+            this._dragMove = new MutableDisposable();
+            this._dragCancelled = false;
+            this.addDisposables(this._onDidChange, this._onDidChangeEnd, this._onDidStartMoving, this._dragMove);
             this._element.className = 'dv-resize-container';
             this._isVisible = true;
             this.setupResize('top');
@@ -11080,16 +12313,60 @@
             result.height = element.height;
             return result;
         }
+        /**
+         * Abort an in-flight move-the-float drag. Used by the void container
+         * when a redock long-press fires after the move started, so the ghost
+         * gesture wins without the float continuing to follow the finger.
+         * Does not emit `onDidChangeEnd` because no change is being committed.
+         */
+        cancelPendingDrag() {
+            if (!this._dragMove.value) {
+                return;
+            }
+            this._dragCancelled = true;
+            toggleClass(this._element, 'dv-resize-container-dragging', false);
+            this._dragMove.value = exports.DockviewDisposable.NONE;
+        }
         setupDrag(dragTarget, options = { inDragMode: false }) {
-            const move = new MutableDisposable();
-            const track = () => {
+            const track = (captureTarget, pointerId) => {
                 let offset = null;
+                let hasMoved = false;
+                this._dragCancelled = false;
                 const iframes = disableIframePointEvents();
-                move.value = new CompositeDisposable({
+                if (captureTarget &&
+                    typeof pointerId === 'number' &&
+                    typeof captureTarget.setPointerCapture === 'function') {
+                    try {
+                        captureTarget.setPointerCapture(pointerId);
+                    }
+                    catch (_a) {
+                        // ignore – non-fatal if the browser refuses capture
+                    }
+                }
+                const end = () => {
+                    toggleClass(this._element, 'dv-resize-container-dragging', false);
+                    this._dragMove.value = exports.DockviewDisposable.NONE;
+                    this._onDidChangeEnd.fire();
+                };
+                this._dragMove.value = new CompositeDisposable({
                     dispose: () => {
                         iframes.release();
+                        if (captureTarget &&
+                            typeof pointerId === 'number' &&
+                            typeof captureTarget.releasePointerCapture ===
+                                'function') {
+                            try {
+                                captureTarget.releasePointerCapture(pointerId);
+                            }
+                            catch (_a) {
+                                // ignore – pointer may already be released
+                            }
+                        }
                     },
                 }, addDisposableListener(window, 'pointermove', (e) => {
+                    if (this._dragCancelled) {
+                        return;
+                    }
                     const containerRect = this.options.container.getBoundingClientRect();
                     const x = e.clientX - containerRect.left;
                     const y = e.clientY - containerRect.top;
@@ -11126,13 +12403,13 @@
                         bounds.right = right;
                     }
                     this.setBounds(bounds);
-                }), addDisposableListener(window, 'pointerup', () => {
-                    toggleClass(this._element, 'dv-resize-container-dragging', false);
-                    move.dispose();
-                    this._onDidChangeEnd.fire();
-                }));
+                    if (!hasMoved) {
+                        hasMoved = true;
+                        this._onDidStartMoving.fire();
+                    }
+                }), addDisposableListener(window, 'pointerup', end), addDisposableListener(window, 'pointercancel', end));
             };
-            this.addDisposables(move, addDisposableListener(dragTarget, 'pointerdown', (event) => {
+            this.addDisposables(addDisposableListener(dragTarget, 'pointerdown', (event) => {
                 if (event.defaultPrevented) {
                     event.preventDefault();
                     return;
@@ -11142,7 +12419,7 @@
                 if (quasiDefaultPrevented(event)) {
                     return;
                 }
-                track();
+                track(dragTarget, event.pointerId);
             }), addDisposableListener(this.options.content, 'pointerdown', (event) => {
                 if (event.defaultPrevented) {
                     return;
@@ -11153,7 +12430,7 @@
                     return;
                 }
                 if (event.shiftKey) {
-                    track();
+                    track(this.options.content, event.pointerId);
                 }
             }), addDisposableListener(this.options.content, 'pointerdown', () => {
                 arialLevelTracker.push(this._element);
@@ -11171,6 +12448,19 @@
                 e.preventDefault();
                 let startPosition = null;
                 const iframes = disableIframePointEvents();
+                const pointerId = e.pointerId;
+                if (typeof resizeHandleElement.setPointerCapture === 'function') {
+                    try {
+                        resizeHandleElement.setPointerCapture(pointerId);
+                    }
+                    catch (_a) {
+                        // ignore – non-fatal if the browser refuses capture
+                    }
+                }
+                const end = () => {
+                    move.dispose();
+                    this._onDidChangeEnd.fire();
+                };
                 move.value = new CompositeDisposable(addDisposableListener(window, 'pointermove', (e) => {
                     const containerRect = this.options.container.getBoundingClientRect();
                     const overlayRect = this._element.getBoundingClientRect();
@@ -11305,11 +12595,17 @@
                 }), {
                     dispose: () => {
                         iframes.release();
+                        if (typeof resizeHandleElement.releasePointerCapture ===
+                            'function') {
+                            try {
+                                resizeHandleElement.releasePointerCapture(pointerId);
+                            }
+                            catch (_a) {
+                                // ignore – pointer may already be released
+                            }
+                        }
                     },
-                }, addDisposableListener(window, 'pointerup', () => {
-                    move.dispose();
-                    this._onDidChangeEnd.fire();
-                }));
+                }, addDisposableListener(window, 'pointerup', end), addDisposableListener(window, 'pointercancel', end));
             }));
         }
         getMinimumWidth(width) {
@@ -11834,6 +13130,14 @@
         }
     }
 
+    function isCoarsePrimaryInput$1(win) {
+        if (!win.matchMedia) {
+            return false;
+        }
+        const coarse = win.matchMedia('(pointer: coarse)').matches;
+        const fine = win.matchMedia('(pointer: fine)').matches;
+        return coarse && !fine;
+    }
     class PopupService extends CompositeDisposable {
         constructor(root, win = window) {
             super();
@@ -11872,8 +13176,22 @@
             wrapper.style.left = `${position.x - offsetX}px`;
             this._element.appendChild(wrapper);
             this._active = wrapper;
+            // Outside-pointerdown dismissal is suppressed for a short grace
+            // window after opening. Touch long-press callers (chip / tab context
+            // menus) open the popover while the user's finger is still pressing
+            // the source element — Android Chrome can dispatch a follow-up
+            // synthetic pointerdown tied to the gesture, and the release-then-
+            // retap motion can land just outside the wrapper. Either would
+            // dismiss the popover before the user can see or interact with it.
+            // The grace window is short enough that intentional outside taps
+            // still feel responsive.
+            const openedAt = Date.now();
+            const POINTERDOWN_GRACE_MS = 200;
             this._activeDisposable.value = new CompositeDisposable(addDisposableListener(this._window, 'pointerdown', (event) => {
                 var _a;
+                if (Date.now() - openedAt < POINTERDOWN_GRACE_MS) {
+                    return;
+                }
                 const target = event.target;
                 if (!(target instanceof HTMLElement)) {
                     return;
@@ -11891,6 +13209,18 @@
                     this.close();
                 }
             }), addDisposableListener(this._window, 'resize', () => {
+                // On touch-primary devices, common interactions resize the
+                // window: on-screen keyboard pop, orientation change, browser
+                // address-bar collapse. None of these mean "the user wants
+                // the popover dismissed". Specifically, focusing the chip
+                // context menu's rename input pops the keyboard, which would
+                // otherwise close the menu the moment the user goes to edit
+                // it. Desktop / hybrid input keeps the existing behaviour —
+                // there a resize genuinely means the user has resized the
+                // window and the popover position is now stale.
+                if (isCoarsePrimaryInput$1(this._window)) {
+                    return;
+                }
                 this.close();
             }));
             this._window.requestAnimationFrame(() => {
@@ -11947,6 +13277,14 @@
         el.setAttribute('role', 'separator');
         return el;
     }
+    function isCoarsePrimaryInput() {
+        if (typeof window === 'undefined' || !window.matchMedia) {
+            return false;
+        }
+        const coarse = window.matchMedia('(pointer: coarse)').matches;
+        const fine = window.matchMedia('(pointer: fine)').matches;
+        return coarse && !fine;
+    }
     function buildRenameInput(tabGroup) {
         const wrapper = document.createElement('div');
         wrapper.className = 'dv-context-menu-rename';
@@ -11967,10 +13305,17 @@
             e.stopPropagation();
         });
         wrapper.appendChild(input);
-        requestAnimationFrame(() => {
-            input.focus();
-            input.select();
-        });
+        // Skip auto-focus on touch-primary devices: focusing the input pops the
+        // on-screen keyboard, which fires `window resize`, which `PopupService`
+        // listens to and uses to dismiss the popover — so the menu opens, the
+        // keyboard appears, and the menu immediately closes before the user can
+        // type. The user can still tap the input to focus it intentionally.
+        if (!isCoarsePrimaryInput()) {
+            requestAnimationFrame(() => {
+                input.focus();
+                input.select();
+            });
+        }
         return wrapper;
     }
     function buildColorPicker(tabGroup, palette) {
@@ -12885,7 +14230,7 @@
             return this._popoutRestorationPromise;
         }
         constructor(container, options) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g;
             super(container, {
                 proportionalLayout: true,
                 orientation: exports.Orientation.HORIZONTAL,
@@ -12984,37 +14329,51 @@
             this._floatingOverlayHost = document.createElement('div');
             this._floatingOverlayHost.className = 'dv-floating-overlay-host';
             this._shellManager.element.appendChild(this._floatingOverlayHost);
-            this._rootDropTarget = new Droptarget(this.element, {
-                className: 'dv-drop-target-edge',
-                canDisplayOverlay: (event, position) => {
-                    const data = getPanelData();
-                    if (data) {
-                        if (data.viewId !== this.id) {
-                            return false;
-                        }
-                        if (position === 'center') {
-                            // center drop target is only allowed if there are no panels in the grid
-                            // floating panels are allowed
-                            return this.gridview.length === 0;
-                        }
-                        return true;
-                    }
-                    if (position === 'center' && this.gridview.length !== 0) {
-                        /**
-                         * for external events only show the four-corner drag overlays, disable
-                         * the center position so that external drag events can fall through to the group
-                         * and panel drop target handlers
-                         */
+            const rootCanDisplayOverlay = (event, position) => {
+                const data = getPanelData();
+                if (data) {
+                    if (data.viewId !== this.id) {
                         return false;
                     }
-                    const firedEvent = new DockviewUnhandledDragOverEvent(event, 'edge', position, getPanelData);
-                    this._onUnhandledDragOverEvent.fire(firedEvent);
-                    return firedEvent.isAccepted;
-                },
+                    if (position === 'center') {
+                        // center drop target is only allowed if there are no panels in the grid
+                        // floating panels are allowed
+                        return this.gridview.length === 0;
+                    }
+                    return true;
+                }
+                if (position === 'center' && this.gridview.length !== 0) {
+                    /**
+                     * for external events only show the four-corner drag overlays, disable
+                     * the center position so that external drag events can fall through to the group
+                     * and panel drop target handlers
+                     */
+                    return false;
+                }
+                const firedEvent = new DockviewUnhandledDragOverEvent(event, 'edge', position, getPanelData);
+                this._onUnhandledDragOverEvent.fire(firedEvent);
+                return firedEvent.isAccepted;
+            };
+            this._rootDropTarget = html5Backend.createDropTarget(this.element, {
+                className: 'dv-drop-target-edge',
+                canDisplayOverlay: rootCanDisplayOverlay,
                 acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
                 overlayModel: (_f = options.rootOverlayModel) !== null && _f !== void 0 ? _f : DEFAULT_ROOT_OVERLAY_MODEL,
                 getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
             });
+            this._rootPointerDropTarget = pointerBackend.createDropTarget(this.element, {
+                className: 'dv-drop-target-edge',
+                canDisplayOverlay: rootCanDisplayOverlay,
+                acceptedTargetZones: [
+                    'top',
+                    'bottom',
+                    'left',
+                    'right',
+                    'center',
+                ],
+                overlayModel: (_g = options.rootOverlayModel) !== null && _g !== void 0 ? _g : DEFAULT_ROOT_OVERLAY_MODEL,
+                getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+            });
             this.updateDropTargetModel(options);
             toggleClass(this.gridview.element, 'dv-dockview', true);
             toggleClass(this.element, 'dv-debug', !!options.debug);
@@ -13076,7 +14435,7 @@
                     d.dispose();
                 }
                 this._edgeGroupDisposables.clear();
-            }), this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
+            }), this._rootDropTarget, this._rootPointerDropTarget, exports.DockviewEvent.any(this._rootDropTarget.onWillShowOverlay, this._rootPointerDropTarget.onWillShowOverlay)((event) => {
                 if (this.gridview.length > 0 && event.position === 'center') {
                     // option only available when no panels in primary grid
                     return;
@@ -13088,7 +14447,7 @@
                     group: undefined,
                     getData: getPanelData,
                 }));
-            }), this._rootDropTarget.onDrop((event) => {
+            }), exports.DockviewEvent.any(this._rootDropTarget.onDrop, this._rootPointerDropTarget.onDrop)((event) => {
                 var _a;
                 const willDropEvent = new DockviewWillDropEvent({
                     nativeEvent: event.nativeEvent,
@@ -13126,7 +14485,7 @@
                         getData: getPanelData,
                     }));
                 }
-            }), this._rootDropTarget);
+            }));
         }
         setVisible(panel, visible) {
             switch (panel.api.location.type) {
@@ -13638,9 +14997,12 @@
             }
             this.updateDropTargetModel(options);
             const oldDisableDnd = this.options.disableDnd;
+            const oldDndStrategy = this.options.dndStrategy;
             this._options = Object.assign(Object.assign({}, this.options), options);
             const newDisableDnd = this.options.disableDnd;
-            if (oldDisableDnd !== newDisableDnd) {
+            const newDndStrategy = this.options.dndStrategy;
+            if (oldDisableDnd !== newDisableDnd ||
+                oldDndStrategy !== newDndStrategy) {
                 this.updateDragAndDropState();
             }
             if ('theme' in options) {
@@ -15204,15 +16566,18 @@
         }
         updateDropTargetModel(options) {
             if ('dndEdges' in options) {
-                this._rootDropTarget.disabled =
-                    typeof options.dndEdges === 'boolean' &&
-                        options.dndEdges === false;
+                const disabled = typeof options.dndEdges === 'boolean' &&
+                    options.dndEdges === false;
+                this._rootDropTarget.disabled = disabled;
+                this._rootPointerDropTarget.disabled = disabled;
                 if (typeof options.dndEdges === 'object' &&
                     options.dndEdges !== null) {
                     this._rootDropTarget.setOverlayModel(options.dndEdges);
+                    this._rootPointerDropTarget.setOverlayModel(options.dndEdges);
                 }
                 else {
                     this._rootDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
+                    this._rootPointerDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
                 }
             }
             if ('rootOverlayModel' in options) {