dockview-core 6.3.0 → 6.5.0

package/dist/package/main.esm.mjs

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 6.3.0
+ * @version 6.5.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -545,7 +545,7 @@ function addTestId(element, id) {
  * 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) {
@@ -560,11 +560,15 @@ function allTagsNamesInclusiveOfShadowDoms(tagNames) {
             }
         }
     }
-    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);
@@ -3984,67 +3988,6 @@ class DockviewApi {
     }
 }
 
-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();
@@ -4095,48 +4038,197 @@ class DragAndDropObserver extends CompositeDisposable {
     }
 }
 
-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;
@@ -4181,16 +4273,10 @@ function positionToDirection(position) {
             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;
@@ -4271,20 +4357,12 @@ class Droptarget extends CompositeDisposable {
                 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;
@@ -4354,166 +4432,29 @@ class Droptarget extends CompositeDisposable {
         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);
@@ -4571,6 +4512,723 @@ function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold)
     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
@@ -5036,35 +5694,42 @@ class DraggablePaneviewPanel extends PaneviewPanel {
         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);
         }));
     }
@@ -5119,6 +5784,25 @@ class ContentContainer extends CompositeDisposable {
         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;
@@ -5128,25 +5812,22 @@ class ContentContainer extends CompositeDisposable {
             },
             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 = '';
@@ -5234,37 +5915,169 @@ class ContentContainer extends CompositeDisposable {
     }
 }
 
-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;
@@ -5275,6 +6088,7 @@ class Tab extends CompositeDisposable {
         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;
@@ -5286,114 +6100,106 @@ class Tab extends CompositeDisposable {
         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 = Event.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);
@@ -5423,11 +6229,60 @@ class Tab extends CompositeDisposable {
     }
     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;
     }
 }
 
@@ -5435,6 +6290,7 @@ class DockviewWillShowOverlayLocationEvent {
     get kind() {
         return this.options.kind;
     }
+    /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
     get nativeEvent() {
         return this.event.nativeEvent;
     }
@@ -5465,131 +6321,202 @@ class DockviewWillShowOverlayLocationEvent {
     }
 }
 
-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();
+                })
+                : Disposable.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 = Event.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;
     }
 }
 
@@ -5845,6 +6772,14 @@ function resolveTabGroupAccent(color, palette) {
     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;
@@ -5855,22 +6790,22 @@ class TabGroupChip extends CompositeDisposable {
         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) {
@@ -6334,6 +7269,12 @@ class TabGroupManager {
             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) {
@@ -6427,6 +7368,45 @@ class TabGroupManager {
         (_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();
@@ -6472,6 +7452,74 @@ class TabGroupManager {
             ? 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;
@@ -6485,24 +7533,70 @@ class TabGroupManager {
             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
@@ -6761,6 +7855,7 @@ class Tabs extends CompositeDisposable {
         for (const tab of this._tabs) {
             tab.value.setDirection(value);
         }
+        this._tabGroupManager.updateDirection();
     }
     constructor(group, accessor, options) {
         super();
@@ -6780,7 +7875,7 @@ class Tabs extends CompositeDisposable {
         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();
@@ -6815,13 +7910,40 @@ class Tabs extends CompositeDisposable {
             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;
             }
@@ -6829,135 +7951,60 @@ class Tabs extends CompositeDisposable {
             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) => {
@@ -7079,6 +8126,9 @@ class Tabs extends CompositeDisposable {
         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);
@@ -7338,6 +8388,7 @@ class Tabs extends CompositeDisposable {
         for (const tab of this._tabs) {
             tab.value.updateDragAndDropState();
         }
+        this._tabGroupManager.updateDragAndDropState();
     }
     /**
      * Synchronize chip elements and CSS classes for all tab groups
@@ -7349,6 +8400,13 @@ class Tabs extends CompositeDisposable {
     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];
@@ -7379,89 +8437,79 @@ class Tabs extends CompositeDisposable {
             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
@@ -7523,6 +8571,164 @@ class Tabs extends CompositeDisposable {
         }
         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) {
@@ -7932,20 +9138,23 @@ class Tabs extends CompositeDisposable {
      * 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();
@@ -7973,7 +9182,7 @@ class Tabs extends CompositeDisposable {
             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,
@@ -8001,22 +9210,27 @@ class Tabs extends CompositeDisposable {
         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) {
@@ -8516,6 +9730,7 @@ const PROPERTY_KEYS_DOCKVIEW = (() => {
         rootOverlayModel: undefined,
         locked: undefined,
         disableDnd: undefined,
+        dndStrategy: undefined,
         className: undefined,
         noPanelsOverlay: undefined,
         dndEdges: undefined,
@@ -8700,6 +9915,10 @@ class TabGroup extends CompositeDisposable {
 }
 
 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;
     }
@@ -8804,29 +10023,28 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         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;
         }
@@ -8952,6 +10170,8 @@ class DockviewGroupPanelModel extends CompositeDisposable {
             // 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) => {
@@ -8962,6 +10182,14 @@ class DockviewGroupPanelModel extends CompositeDisposable {
                 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(() => {
@@ -10965,7 +12193,12 @@ class Overlay extends CompositeDisposable {
         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');
@@ -11074,16 +12307,60 @@ class Overlay extends CompositeDisposable {
         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 = Disposable.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 = Disposable.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;
@@ -11120,13 +12397,13 @@ class Overlay extends CompositeDisposable {
                     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;
@@ -11136,7 +12413,7 @@ class Overlay extends CompositeDisposable {
             if (quasiDefaultPrevented(event)) {
                 return;
             }
-            track();
+            track(dragTarget, event.pointerId);
         }), addDisposableListener(this.options.content, 'pointerdown', (event) => {
             if (event.defaultPrevented) {
                 return;
@@ -11147,7 +12424,7 @@ class Overlay extends CompositeDisposable {
                 return;
             }
             if (event.shiftKey) {
-                track();
+                track(this.options.content, event.pointerId);
             }
         }), addDisposableListener(this.options.content, 'pointerdown', () => {
             arialLevelTracker.push(this._element);
@@ -11165,6 +12442,19 @@ class Overlay extends CompositeDisposable {
             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();
@@ -11299,11 +12589,17 @@ class Overlay extends CompositeDisposable {
             }), {
                 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) {
@@ -11828,6 +13124,14 @@ class StrictEventsSequencing extends CompositeDisposable {
     }
 }
 
+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();
@@ -11866,8 +13170,22 @@ class PopupService extends CompositeDisposable {
         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;
@@ -11885,6 +13203,18 @@ class PopupService extends CompositeDisposable {
                 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(() => {
@@ -11941,6 +13271,14 @@ function buildSeparator() {
     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';
@@ -11961,10 +13299,17 @@ function buildRenameInput(tabGroup) {
         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) {
@@ -12879,7 +14224,7 @@ class DockviewComponent extends BaseGrid {
         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: Orientation.HORIZONTAL,
@@ -12978,37 +14323,51 @@ class DockviewComponent extends BaseGrid {
         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);
@@ -13070,7 +14429,7 @@ class DockviewComponent extends BaseGrid {
                 d.dispose();
             }
             this._edgeGroupDisposables.clear();
-        }), this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
+        }), this._rootDropTarget, this._rootPointerDropTarget, Event.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;
@@ -13082,7 +14441,7 @@ class DockviewComponent extends BaseGrid {
                 group: undefined,
                 getData: getPanelData,
             }));
-        }), this._rootDropTarget.onDrop((event) => {
+        }), Event.any(this._rootDropTarget.onDrop, this._rootPointerDropTarget.onDrop)((event) => {
             var _a;
             const willDropEvent = new DockviewWillDropEvent({
                 nativeEvent: event.nativeEvent,
@@ -13120,7 +14479,7 @@ class DockviewComponent extends BaseGrid {
                     getData: getPanelData,
                 }));
             }
-        }), this._rootDropTarget);
+        }));
     }
     setVisible(panel, visible) {
         switch (panel.api.location.type) {
@@ -13632,9 +14991,12 @@ class DockviewComponent extends BaseGrid {
         }
         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) {
@@ -15198,15 +16560,18 @@ class DockviewComponent extends BaseGrid {
     }
     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) {