ngx-kit 7.4.0 → 8.0.0

package/fesm2022/ngx-kit-drag-resize.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, EventEmitter, Injectable, InjectionToken, Directive, inject, Output, Input, model, input, output, effect, HostListener } from '@angular/core';
+import { signal, EventEmitter, Injectable, InjectionToken, inject, ElementRef, Injector, Directive, ContentChild, Output, Input, model, input, output, effect, HostListener } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
 /**
@@ -79,22 +79,97 @@ function adjustForZoom(value) {
     return zoom ? value / zoom : value;
 }
 
+/**
+ * Copy the browser-resolved visual state of an element.
+ *
+ * A drag preview is moved to <body>, so selectors depending on ancestors no
+ * longer apply. Copying computed styles (including custom properties) makes
+ * the preview visually independent from the original DOM subtree.
+ */
+function copyComputedStyle(source, target) {
+    copyStyleValues(source, target);
+    // Make the preview deterministic once it is taken out of normal flow (root only:
+    // descendants keep their own margins so the internal layout is unchanged).
+    target.style.setProperty('margin', '0', 'important');
+    target.style.setProperty('box-sizing', 'border-box', 'important');
+}
+function copyStyleValues(source, target) {
+    const computed = window.getComputedStyle(source);
+    for (let i = 0; i < computed.length; i++) {
+        const property = computed.item(i);
+        const value = computed.getPropertyValue(property);
+        if (value) {
+            target.style.setProperty(property, value, computed.getPropertyPriority(property));
+        }
+    }
+}
+function copyComputedStyleTree(source, target) {
+    copyComputedStyle(source, target);
+    copyDescendants(source, target);
+}
+function copyDescendants(source, target) {
+    const sourceChildren = Array.from(source.children);
+    const targetChildren = Array.from(target.children);
+    const count = Math.min(sourceChildren.length, targetChildren.length);
+    for (let i = 0; i < count; i++) {
+        copyStyleValues(sourceChildren[i], targetChildren[i]);
+        copyDescendants(sourceChildren[i], targetChildren[i]);
+    }
+}
+/** Backward-compatible helper retained for consumers of older versions. */
+function copyEssentialStyles(source, target) {
+    copyComputedStyle(source, target);
+    target.style.setProperty('box-sizing', 'border-box');
+}
+function combineTransforms(transform, initialTransform) {
+    return initialTransform && initialTransform !== 'none'
+        ? transform + ' ' + initialTransform
+        : transform;
+}
+
+/** Above any app chrome (modals, sticky headers) but below the browser's own UI. */
+const PREVIEW_Z_INDEX = '2147483000';
+/**
+ * Creates the visual that follows the pointer while an item of a drop list is dragged.
+ *
+ * It is appended to `<body>` with `position: fixed`, so no ancestor of the original item
+ * (`overflow: hidden`, scroll containers, clipping, transformed/positioned parents) can clip
+ * or offset it. Computed styles are copied recursively first, because once the clone leaves
+ * its list every selector that depended on an ancestor (`.column .card {}`) and every
+ * inherited property (font, colour, `direction`) would otherwise be lost.
+ *
+ * Only used for drop-list drags. Free drag never calls this.
+ */
 function cloneDragElementInBody(dragEl, rect, pointerX, pointerY) {
+    const doc = dragEl.ownerDocument;
     const preview = dragEl.cloneNode(true);
     // Avoid duplicated ids in the document.
     preview.removeAttribute('id');
+    preview.querySelectorAll('[id]').forEach((n) => n.removeAttribute('id'));
     preview.classList.add('ngx-drag-preview');
+    preview.setAttribute('aria-hidden', 'true');
+    preview.setAttribute('inert', '');
+    copyComputedStyleTree(dragEl, preview);
     Object.assign(preview.style, {
         position: 'fixed',
         top: `${rect.top}px`,
         left: `${rect.left}px`,
+        right: 'auto',
+        bottom: 'auto',
         width: `${rect.width}px`,
         height: `${rect.height}px`,
         margin: '0',
         pointerEvents: 'none',
         boxSizing: 'border-box',
+        transition: 'none',
+        animation: 'none',
+        transform: 'none',
+        visibility: 'visible',
+        display: preview.style.display === 'none' ? '' : preview.style.display,
+        willChange: 'transform',
+        zIndex: PREVIEW_Z_INDEX,
     });
-    document.body.appendChild(preview);
+    doc.body.appendChild(preview);
     return {
         element: preview,
         offsetX: pointerX - rect.left,
@@ -108,8 +183,16 @@ class DragRef {
     el;
     boundary;
     lockAxis;
+    /**
+     * The list this draggable BELONGS to (set by the template). Dragging never changes it.
+     * The list the pointer is currently over is `activeDropList`.
+     */
     dropList = null;
     dropListGroup;
+    /** Used to find the drop list under the pointer. Set by the directive; optional. */
+    service;
+    /** Drop list currently under the pointer during a drop-list drag (null = outside every list). */
+    activeDropList = null;
     placeholder;
     originDropList = null;
     originIndex = -1;
@@ -131,6 +214,13 @@ class DragRef {
     sourceVisibility = '';
     sourceDisplay = '';
     sourcePointerEvents = '';
+    sourceTransition = '';
+    /** True while a drop-list drag (body preview + placeholder) is in progress. Free drag: always false. */
+    listDrag = false;
+    cachedLists = [];
+    lastEffective = { x: 0, y: 0 };
+    scrollListener;
+    resizeListener;
     init() {
         this.previousTransform = getComputedStyle(this.el).getPropertyValue('transform');
     }
@@ -157,14 +247,18 @@ class DragRef {
         this.moveDx = 0;
         this.moveDy = 0;
         this.scrollCompensation = { x: 0, y: 0 };
-        this.originDropList = this.dropList;
-        this.originIndex = this.dropList?.getItemIndex(this) ?? -1;
+        // Only draggables that are direct children of their drop list take part in sorting.
+        // Everything else is a plain free drag.
+        const list = this.dropList && this.dropList.el === this.el.parentElement ? this.dropList : null;
+        this.originDropList = list;
+        this.originIndex = list?.getItemIndex(this) ?? -1;
         this.previousTransform = getComputedStyle(this.el).getPropertyValue('transform');
         this.isDragging.set(true);
         this.previousZIndex = this.el.style.zIndex;
         this.sourceVisibility = this.el.style.visibility;
         this.sourceDisplay = this.el.style.display;
         this.sourcePointerEvents = this.el.style.pointerEvents;
+        this.sourceTransition = this.el.style.transition;
         this.el.classList.add('ngx-draggable--dragging');
         this.el.style.willChange = 'transform';
         this.el.style.transition = 'none';
@@ -179,8 +273,10 @@ class DragRef {
          *   create a body-level preview because the original element can be
          *   inside an overflow:auto/hidden container such as a Kanban column.
          */
-        if (this.dropList) {
-            this.placeholder = this.dropList.createPlaceholder(this);
+        if (list) {
+            this.listDrag = true;
+            // Order matters: clone while the source is still visible and fully styled, hide it,
+            // and only THEN measure (the placeholder takes over the source's slot).
             const preview = cloneDragElementInBody(this.el, this.startRect, pointer.x, pointer.y);
             this.preview = preview.element;
             this.previewOffsetX = preview.offsetX;
@@ -188,6 +284,7 @@ class DragRef {
             this.el.style.visibility = 'hidden';
             this.el.style.display = 'none';
             this.el.style.pointerEvents = 'none';
+            this.beginListDrag(list, pointer);
             this.updatePreview();
         }
         else {
@@ -215,8 +312,11 @@ class DragRef {
             x: dx,
             y: dy,
         });
-        if (this.dropList) {
+        if (this.listDrag) {
             this.updatePreview();
+            // Sorting follows the (axis/boundary constrained) pointer, not the raw one.
+            this.lastEffective = { x: this.startPointer.x + dx, y: this.startPointer.y + dy };
+            this.updateDropTarget(this.lastEffective);
         }
         else {
             this.applyTransform();
@@ -233,16 +333,15 @@ class DragRef {
     endDrag() {
         if (!this.isDragging())
             return;
-        const dropList = this.dropList;
+        if (this.listDrag) {
+            this.isDragging.set(false);
+            this.finishListDrag(true);
+            return;
+        }
+        // ---- free drag: unchanged ----
         this.isDragging.set(false);
-        // Normal Drag MUST behave exactly like before.
         this.placeholder?.detach();
         this.placeholder = undefined;
-        if (dropList) {
-            dropList.finishDrag(this);
-            this.el.style.transform = this.previousTransform;
-        }
-        // Remove body preview after DropList has finished reading its state.
         this.preview?.remove();
         this.preview = undefined;
         this.el.classList.remove('ngx-draggable--dragging');
@@ -258,14 +357,34 @@ class DragRef {
         this.moveDx = 0;
         this.moveDy = 0;
         this.position.set({ x: 0, y: 0 });
-        this.dropList?.exit(this);
-        this.clearDropList();
+        if (this.listDrag) {
+            // Rollback: nothing was ever committed to the DOM or the model, so restoring is just cleanup.
+            this.isDragging.set(false);
+            this.finishListDrag(false);
+            return;
+        }
+        // ---- free drag: unchanged ----
         this.el.style.transform = this.previousTransform;
         this.el.style.visibility = this.sourceVisibility;
         this.el.style.pointerEvents = this.sourcePointerEvents;
         this.scrollCompensation = { x: 0, y: 0 };
         this.endDrag();
     }
+    /** Abort without emitting anything (the directive was destroyed mid-drag). Idempotent. */
+    dispose() {
+        if (!this.listDrag)
+            return;
+        this.isDragging.set(false);
+        this.finishListDrag(false);
+    }
+    /** True while a drop-list drag is running. */
+    get isListDrag() {
+        return this.listDrag;
+    }
+    /** Inline `display` the source element had before it was hidden for the drag. */
+    get originalDisplay() {
+        return this.sourceDisplay;
+    }
     get x() {
         return this.moveDx;
     }
@@ -289,16 +408,15 @@ class DragRef {
     notifyScroll(dx, dy) {
         if (!this.isDragging())
             return;
+        // Drop-list drags are position:fixed in <body> and follow the pointer in viewport space, so
+        // scrolling needs no compensation; sorting listens to scroll on its own (see beginListDrag).
+        if (this.listDrag)
+            return;
         this.scrollCompensation = {
             x: this.scrollCompensation.x + dx,
             y: this.scrollCompensation.y + dy,
         };
-        if (this.dropList) {
-            this.updatePreview();
-        }
-        else {
-            this.applyTransform();
-        }
+        this.applyTransform();
     }
     applyTransform() {
         const base = this.previousTransform && this.previousTransform !== 'none'
@@ -308,6 +426,92 @@ class DragRef {
         const ty = this.moveDy + this.scrollCompensation.y;
         this.el.style.transform = `${base}translate3d(${tx}px, ${ty}px, 0)`;
     }
+    // -------------------------------------------------------------------------------------
+    // drop-list drag
+    // -------------------------------------------------------------------------------------
+    beginListDrag(origin, pointer) {
+        const doc = this.el.ownerDocument;
+        const win = doc.defaultView ?? window;
+        const lists = new Set([origin]);
+        for (const l of this.service?.dropLists() ?? [])
+            lists.add(l);
+        this.cachedLists = Array.from(lists);
+        // Foreign lists are measured as they are now (no placeholder in them yet)...
+        for (const l of this.cachedLists)
+            if (l !== origin)
+                l._cacheGeometry();
+        this.lastEffective = { ...pointer };
+        this.activeDropList = origin;
+        origin.enter(this, pointer.x, pointer.y);
+        // ...the origin list AFTER its placeholder took over the source's slot, so its box still
+        // covers the whole list (the hidden source no longer occupies space).
+        origin._cacheGeometry();
+        this.scrollListener = () => {
+            for (const l of this.cachedLists)
+                l._onScroll();
+            this.updateDropTarget(this.lastEffective);
+        };
+        this.resizeListener = () => {
+            for (const l of this.cachedLists)
+                l._refresh();
+            this.updateDropTarget(this.lastEffective);
+        };
+        // Capture: `scroll` does not bubble, and any ancestor (or the page) may be the one scrolling.
+        doc.addEventListener('scroll', this.scrollListener, { capture: true, passive: true });
+        win.addEventListener('resize', this.resizeListener, { passive: true });
+    }
+    /** Decide which list is under the pointer, switch if needed, then re-sort in the active one. */
+    updateDropTarget(pointer) {
+        const origin = this.originDropList;
+        if (!origin)
+            return;
+        const next = this.service
+            ? this.service.findDropList(pointer, this.activeDropList, origin, this.el)
+            : origin._containsPoint(pointer.x, pointer.y)
+                ? origin
+                : null;
+        if (next !== this.activeDropList) {
+            this.activeDropList?.exit(this);
+            this.activeDropList = next;
+            next?.enter(this, pointer.x, pointer.y);
+        }
+        else {
+            next?.sortItem(this, pointer);
+        }
+    }
+    /**
+     * Single teardown path for every way a drop-list drag can end (drop on a list, drop outside,
+     * Escape, pointercancel, destroy). Everything transient is removed here, so nothing can leak
+     * regardless of how the drag ended. Only then is the drop event emitted.
+     */
+    finishListDrag(commit) {
+        const doc = this.el.ownerDocument;
+        if (this.scrollListener)
+            doc.removeEventListener('scroll', this.scrollListener, { capture: true });
+        if (this.resizeListener)
+            (doc.defaultView ?? window).removeEventListener('resize', this.resizeListener);
+        this.scrollListener = this.resizeListener = undefined;
+        const target = commit ? this.activeDropList : null;
+        const event = target?._finish(this, true) ?? null;
+        for (const l of this.cachedLists)
+            l._release(this);
+        this.preview?.remove();
+        this.preview = undefined;
+        this.placeholder = undefined;
+        this.activeDropList = null;
+        this.cachedLists = [];
+        this.listDrag = false;
+        // The source element is put back exactly as it was (its transform was never touched).
+        this.el.classList.remove('ngx-draggable--dragging');
+        this.el.style.visibility = this.sourceVisibility;
+        this.el.style.display = this.sourceDisplay;
+        this.el.style.pointerEvents = this.sourcePointerEvents;
+        this.el.style.transition = this.sourceTransition;
+        this.el.style.willChange = '';
+        this.el.style.zIndex = this.previousZIndex;
+        if (event && target)
+            target.onDrop.emit(event);
+    }
     updatePreview() {
         if (!this.preview)
             return;
@@ -315,6 +519,660 @@ class DragRef {
     }
 }
 
+class PlaceHolderRef {
+    tpl;
+    dropList;
+    element;
+    _visible = false;
+    /**
+     * Angular embedded view created from `tpl`.
+     */
+    _view;
+    attach(container, source, reference) {
+        /**
+         * If the placeholder has a template, render the template instead of
+         * cloning the dragged element.
+         *
+         * Example:
+         *
+         * <span class="placeholder" *ngxPlaceholder></span>
+         */
+        if (!this.element) {
+            if (this.tpl) {
+                this._view = this.tpl.createEmbeddedView({});
+                // Render bindings inside the embedded view before we move its DOM nodes.
+                this._view.detectChanges();
+                const element = this._view.rootNodes.find((node) => node instanceof HTMLElement);
+                if (!element) {
+                    this._view.destroy();
+                    this._view = undefined;
+                    throw new Error('ngxPlaceholder template must contain at least one HTMLElement root node.');
+                }
+                this.element = element;
+            }
+            else {
+                /**
+                 * Backward-compatible fallback:
+                 * if no ngxPlaceholder template was supplied, keep the old behavior.
+                 */
+                // ".list > article" and grid/flex item rules continue to apply.
+                this.element = source.cloneNode(false);
+                this.element.removeAttribute('id');
+                this.element.classList.add('ngx-drag-placeholder');
+                this.element.setAttribute('aria-hidden', 'true');
+                this.element.setAttribute('inert', '');
+                this.element.removeAttribute('tabindex');
+            }
+        }
+        // The placeholder must never inherit a live drag transform/animation. `transform` and
+        // `transition` are deliberately NOT forced with !important: the sort session drives them
+        // to slide the placeholder (translate3d) to the current insertion slot.
+        this.element.style.removeProperty('transform');
+        this.element.style.removeProperty('transition');
+        this.element.style.removeProperty('will-change');
+        this.element.style.setProperty('animation', 'none', 'important');
+        this.element.style.setProperty('pointer-events', 'none', 'important');
+        this.element.style.setProperty('visibility', 'visible', 'important');
+        this.element.style.setProperty('opacity', '0.16', 'important');
+        this.element.style.setProperty('outline', '2px dashed currentColor', 'important');
+        this.element.style.setProperty('outline-offset', '-2px', 'important');
+        this._visible = true;
+        if (reference && reference.parentNode === container) {
+            if (this.element !== reference)
+                container.insertBefore(this.element, reference);
+        }
+        else if (this.element.parentNode !== container) {
+            container.appendChild(this.element);
+        }
+        return this.element;
+    }
+    detach() {
+        this.element?.remove();
+        this._view?.destroy();
+        this._view = undefined;
+        this.element = undefined;
+        this._visible = false;
+    }
+    get visible() {
+        return this._visible && !!this.element?.isConnected;
+    }
+}
+
+/**
+ * Pure geometry used by the drop-list sorting engine.
+ *
+ * Nothing in this file touches the DOM. Everything is a deterministic function of
+ * `(rectangles, pointer)`, which is what makes sorting reversible: the same pointer over the
+ * same snapshot always yields the same insertion index, regardless of what the previous
+ * pointer positions were.
+ *
+ * Layout direction is *derived from the rectangles* (row clustering + the order in which DOM
+ * siblings actually appear on screen) rather than from `flex-direction` / `direction`. That is
+ * what lets one algorithm handle block flow, inline flow, flex (row/column/wrap/reverse),
+ * grid, RTL and `order:`-reshuffled layouts. Computed style is only a fallback for lists that
+ * are too small (0 or 1 item) to reveal their own orientation.
+ */
+/**
+ * Hysteresis is the only "magic" number in the algorithm and it is deliberate: without it a
+ * pointer resting exactly on a sibling's mid-line flips the placeholder on every sub-pixel
+ * jitter (and on every rounding difference between two layouts). It is proportional to the
+ * sibling's size and capped, so it can never make a small item feel sticky.
+ */
+const HYSTERESIS_RATIO = 0.1;
+const HYSTERESIS_MAX_PX = 6;
+function hysteresis(size) {
+    return Math.min(HYSTERESIS_MAX_PX, Math.max(0, size) * HYSTERESIS_RATIO);
+}
+const cx = (b) => (b.left + b.right) / 2;
+const cy = (b) => (b.top + b.bottom) / 2;
+const width = (b) => b.right - b.left;
+const height = (b) => b.bottom - b.top;
+const sign = (n) => (n < 0 ? -1 : 1);
+/**
+ * Builds a layout model from DOM-ordered boxes.
+ *
+ * @param fallbackAxis orientation to assume when there are fewer than two boxes.
+ * @param fallbackRtl inline direction to assume when no row contains two items.
+ */
+function analyzeLayout(boxes, fallbackAxis = 'y', fallbackRtl = false) {
+    const rows = [];
+    const rowOf = [];
+    boxes.forEach((b, i) => {
+        const row = rows[rows.length - 1];
+        if (row) {
+            const overlap = Math.min(b.bottom, row.bottom) - Math.max(b.top, row.top);
+            const smaller = Math.min(height(b), row.bottom - row.top);
+            // Same row when the boxes share at least half of the smaller one's height. Touching or
+            // sub-pixel-overlapping boxes (fractional heights) therefore start a new row.
+            if (overlap > 0 && overlap >= smaller * 0.5) {
+                row.top = Math.min(row.top, b.top);
+                row.bottom = Math.max(row.bottom, b.bottom);
+                row.last = i;
+                row.count++;
+                rowOf.push(rows.length - 1);
+                return;
+            }
+        }
+        rows.push({ top: b.top, bottom: b.bottom, first: i, last: i, count: 1 });
+        rowOf.push(rows.length - 1);
+    });
+    const rowCount = rows.length;
+    // Vertical direction: which way do successive rows travel?
+    const dirY = rowCount > 1
+        ? sign((rows[rowCount - 1].top + rows[rowCount - 1].bottom) / 2 - (rows[0].top + rows[0].bottom) / 2)
+        : 1;
+    // Horizontal direction per row (from the first/last item of that row) + a global vote.
+    const rowDirX = [];
+    let votes = 0;
+    for (const r of rows) {
+        if (r.count > 1) {
+            const d = sign(cx(boxes[r.last]) - cx(boxes[r.first]));
+            rowDirX.push(d);
+            votes += d;
+        }
+        else {
+            rowDirX.push(0); // resolved below once the global vote is known
+        }
+    }
+    const dirX = votes !== 0 ? sign(votes) : fallbackRtl ? -1 : 1;
+    for (let i = 0; i < rowDirX.length; i++)
+        if (!rowDirX[i])
+            rowDirX[i] = dirX;
+    const rowBounds = [];
+    for (let r = 0; r < rowCount - 1; r++) {
+        rowBounds.push(dirY === 1 ? (rows[r].bottom + rows[r + 1].top) / 2 : (rows[r].top + rows[r + 1].bottom) / 2);
+    }
+    const first = rows[0];
+    const lastRow = rows[rowCount - 1];
+    const yStart = first ? (dirY === 1 ? first.top : first.bottom) : 0;
+    const yEnd = lastRow ? (dirY === 1 ? lastRow.bottom : lastRow.top) : 0;
+    let axis;
+    if (boxes.length < 2)
+        axis = fallbackAxis;
+    else if (rowCount === 1)
+        axis = 'x';
+    else if (rows.every((r) => r.count === 1))
+        axis = 'y';
+    else
+        axis = 'grid';
+    return { axis, dirX, dirY, rowOf, rowDirX, rowBounds, yStart, yEnd, rowCount };
+}
+function rowAt(model, y) {
+    let r = 0;
+    for (const bound of model.rowBounds) {
+        if (model.dirY === 1 ? y > bound : y < bound)
+            r++;
+        else
+            break;
+    }
+    return r;
+}
+/**
+ * Where should the dragged item be inserted, given the pointer?
+ *
+ * The result is the number of *other* items that end up before the dragged one, i.e. the
+ * dragged item's final index. `slot` is the index (in `boxes`) of the dragged item's own slot
+ * (its placeholder), or -1 when the list does not contain one yet.
+ *
+ * `current` is the index the slot currently has in "others space"; it only decides on which
+ * side of a sibling's mid-line the small hysteresis band applies. Pass `null` for a first
+ * placement (no history, no hysteresis).
+ *
+ * Pure: depends only on its arguments.
+ */
+function resolveInsertionIndex(model, boxes, slot, pointer, current) {
+    let before = 0;
+    let others = 0;
+    for (let i = 0; i < boxes.length; i++) {
+        if (i === slot)
+            continue;
+        const o = others++;
+        const b = boxes[i];
+        // Sign of the hysteresis band: +1 favours "stays before the pointer", -1 favours "stays after".
+        const bias = current === null ? 0 : o < current ? 1 : -1;
+        let isBefore;
+        if (model.axis === 'x') {
+            isBefore = model.dirX * (pointer.x - cx(b)) + bias * hysteresis(width(b)) > 0;
+        }
+        else if (model.axis === 'y') {
+            isBefore = model.dirY * (pointer.y - cy(b)) + bias * hysteresis(height(b)) > 0;
+        }
+        else {
+            const row = model.rowOf[i];
+            const py = pointer.y + model.dirY * bias * hysteresis(height(b));
+            const pointerRow = rowAt(model, py);
+            if (model.dirY * (py - model.yStart) < 0) {
+                isBefore = false; // above the first row: nothing precedes the pointer
+            }
+            else if (model.dirY * (py - model.yEnd) > 0) {
+                isBefore = true; // below the last row: everything does (append)
+            }
+            else if (pointerRow !== row) {
+                isBefore = pointerRow > row;
+            }
+            else {
+                isBefore = model.rowDirX[row] * (pointer.x - cx(b)) + bias * hysteresis(width(b)) > 0;
+            }
+        }
+        if (isBefore)
+            before++;
+    }
+    return before;
+}
+/**
+ * Along-axis displacement of every box when the slot moves to `target` (others-space index).
+ *
+ * The result is where each box has to be translated so that the boxes, re-ordered, occupy the
+ * same run of space they occupied before, using each box's own size and the *measured* gaps
+ * between the original slots (so `gap`, margins and inline whitespace are handled by
+ * construction, not by assumption). Only meaningful for `x` / `y` axes; `grid` returns zeros.
+ */
+function computeAxisOffsets(model, boxes, slot, target) {
+    const n = boxes.length;
+    const offsets = new Array(n).fill(0);
+    if (model.axis === 'grid' || n < 2 || slot < 0)
+        return offsets;
+    const horizontal = model.axis === 'x';
+    const dir = horizontal ? model.dirX : model.dirY;
+    // Mirror into a frame where DOM order is ascending, so one code path serves LTR and RTL.
+    const lo = boxes.map((b) => (horizontal ? (dir === 1 ? b.left : -b.right) : dir === 1 ? b.top : -b.bottom));
+    const hi = boxes.map((b) => (horizontal ? (dir === 1 ? b.right : -b.left) : dir === 1 ? b.bottom : -b.top));
+    const order = [];
+    for (let i = 0; i < n; i++)
+        if (i !== slot)
+            order.push(i);
+    order.splice(Math.max(0, Math.min(target, n - 1)), 0, slot);
+    let cursor = lo[0];
+    for (let p = 0; p < n; p++) {
+        const item = order[p];
+        const delta = cursor - lo[item];
+        offsets[item] = Math.abs(delta) < 1e-6 ? 0 : dir * delta;
+        cursor += hi[item] - lo[item] + (p < n - 1 ? lo[p + 1] - hi[p] : 0);
+    }
+    return offsets;
+}
+/** Intersection of two boxes, or `null` when they do not overlap. */
+function intersectBoxes(a, b) {
+    const left = Math.max(a.left, b.left);
+    const top = Math.max(a.top, b.top);
+    const right = Math.min(a.right, b.right);
+    const bottom = Math.min(a.bottom, b.bottom);
+    return right > left && bottom > top ? { left, top, right, bottom } : null;
+}
+function boxContains(b, x, y) {
+    return x >= b.left && x <= b.right && y >= b.top && y <= b.bottom;
+}
+function toBox(r) {
+    return { left: r.left, top: r.top, right: r.right, bottom: r.bottom };
+}
+
+/**
+ * Tracks how far the scrollable ancestors of an element (and the window) have scrolled since
+ * the frame was created.
+ *
+ * Geometry is measured once, when a drag enters a list. Scrolling afterwards moves the
+ * content under a stationary pointer, which is equivalent to moving the pointer by the scroll
+ * delta in the frame the geometry was measured in. Shifting the *pointer* (one point) instead
+ * of re-measuring every item keeps cached rectangles valid across page scroll, parent scroll
+ * and nested scroll without any layout reads on the hot path.
+ *
+ * `delta()` only reads `scrollLeft/Top` after `invalidate()` (called from a scroll event), so
+ * ordinary pointer moves perform zero scroll reads.
+ */
+class ScrollFrame {
+    win;
+    targets = [];
+    origin = { x: 0, y: 0 };
+    cached = { x: 0, y: 0 };
+    dirty = false;
+    /**
+     * @param start   first element to inspect (walks up through its ancestors)
+     * @param includeStart whether `start` itself counts (true for a list whose own scroll moves its items)
+     */
+    constructor(start, includeStart = true, win = window) {
+        this.win = win;
+        let node = includeStart ? start : (start?.parentElement ?? null);
+        const root = start?.ownerDocument.documentElement;
+        while (node) {
+            // <html> scrolling is reported through `window`; counting both would double the delta.
+            if (node !== root && scrolls(node))
+                this.targets.push(node);
+            node = node.parentElement;
+        }
+        this.targets.push(win);
+        this.origin = this.read();
+    }
+    /** Call when any scroll event fires. */
+    invalidate() {
+        this.dirty = true;
+    }
+    /** Total scroll distance (px) of all tracked containers since construction. */
+    delta() {
+        if (this.dirty) {
+            const now = this.read();
+            this.cached = { x: now.x - this.origin.x, y: now.y - this.origin.y };
+            this.dirty = false;
+        }
+        return this.cached;
+    }
+    read() {
+        let x = 0;
+        let y = 0;
+        for (const t of this.targets) {
+            if (t === this.win) {
+                x += this.win.scrollX;
+                y += this.win.scrollY;
+            }
+            else {
+                x += t.scrollLeft;
+                y += t.scrollTop;
+            }
+        }
+        return { x, y };
+    }
+}
+function scrolls(el) {
+    const s = getComputedStyle(el);
+    // `hidden` containers still scroll programmatically; `clip` never does.
+    const scrollish = (v) => v === 'auto' || v === 'scroll' || v === 'overlay' || v === 'hidden';
+    return scrollish(s.overflowX) || scrollish(s.overflowY);
+}
+
+/**
+ * Inline / inline-block layouts get their inter-item gap from whitespace TEXT nodes. A
+ * placeholder that is moved (or freshly inserted) without one would collapse that gap and shift
+ * everything after it by a space width, so it carries a separator of its own. Returns `null`
+ * for layouts that have no whitespace nodes (flex, grid, Angular-trimmed templates).
+ */
+function makeSpacer(container) {
+    for (const n of Array.from(container.childNodes)) {
+        if (n.nodeType === Node.TEXT_NODE && n.nodeValue && /^\s+$/.test(n.nodeValue)) {
+            return container.ownerDocument.createTextNode(n.nodeValue);
+        }
+    }
+    return null;
+}
+const EASING = 'cubic-bezier(0, 0, 0.2, 1)';
+/**
+ * One drag's view of one drop list.
+ *
+ * Lifecycle
+ * ---------
+ *   snapshot ──► resolve(pointer) ──► apply(index) ──► ... ──► dispose()
+ *
+ * The snapshot (`boxes`) is taken once, with the dragged item's slot already in place, and is
+ * never re-read while the drag is over the list. `resolve` is a pure function of the pointer
+ * and that snapshot, so moving the pointer back always restores the previous state.
+ *
+ * Two ways to *show* the result, chosen from the measured layout:
+ *
+ *  - `transform` (one row or one column; the common case): the DOM is never touched. Siblings
+ *    and the placeholder are displaced with `translate3d`, computed from measured sizes and
+ *    gaps, exactly like Angular CDK's single-axis strategy.
+ *  - `flow` (grid / wrapping layouts): an exact translate cannot be derived without
+ *    re-implementing the browser's layout engine, so the single placeholder node is moved and
+ *    the browser lays the list out. Siblings are then animated from their old to new position
+ *    with FLIP `translate3d` so the motion is still transform-driven and smooth. Decisions
+ *    keep using the immutable snapshot, so the reflow can never feed back into them.
+ */
+class SortSession {
+    mode;
+    container;
+    placeholder;
+    itemElements;
+    animationMs;
+    fallbackAxis;
+    fallbackRtl;
+    entries = [];
+    boxes = [];
+    model;
+    /** Index of the slot (placeholder) inside `entries`/`boxes` at snapshot time. */
+    slotIdx = -1;
+    /** For each visible "other" item: its index among ALL other items (hidden ones included). */
+    otherModelIndex = [];
+    frame;
+    applied = new Map();
+    targetIdx = 0;
+    disposed = false;
+    /** undefined = not created yet, null = this layout has no whitespace separators. */
+    spacer;
+    constructor(init) {
+        this.spacer = init.spacer;
+        this.container = init.container;
+        this.placeholder = init.placeholder;
+        this.itemElements = init.itemElements;
+        this.animationMs = init.animationMs;
+        this.fallbackAxis = init.fallbackAxis;
+        this.fallbackRtl = init.fallbackRtl;
+        this.snapshot();
+        this.frame = new ScrollFrame(this.container, true);
+        this.mode = this.model.axis === 'grid' ? 'flow' : 'transform';
+        this.targetIdx = this.slotIdx;
+        const transition = this.animationMs > 0 ? `transform ${this.animationMs}ms ${EASING}` : '';
+        for (const e of this.entries) {
+            e.el.style.willChange = 'transform';
+            if (transition)
+                e.el.style.transition = transition;
+        }
+    }
+    /** Detected orientation (useful for tests/diagnostics). */
+    get axis() {
+        return this.model.axis;
+    }
+    /** Current insertion index among the *visible other* items. */
+    get target() {
+        return this.targetIdx;
+    }
+    /** Index at which the session started (the slot's original position). */
+    get origin() {
+        return this.slotIdx;
+    }
+    /** Insertion index among ALL other items of the list (what consumers see as `currentIndex`). */
+    get modelIndex() {
+        const idx = this.otherModelIndex;
+        if (this.targetIdx < idx.length)
+            return idx[this.targetIdx];
+        return idx.length ? idx[idx.length - 1] + 1 : 0;
+    }
+    /** Where would the dragged item be inserted if released at `pointer`? Pure; no side effects. */
+    resolve(pointer) {
+        const d = this.frame.delta();
+        return resolveInsertionIndex(this.model, this.boxes, this.slotIdx, { x: pointer.x + d.x, y: pointer.y + d.y }, this.targetIdx);
+    }
+    /** Visually place the slot at `index`. Idempotent. */
+    apply(index) {
+        if (this.disposed || index === this.targetIdx)
+            return;
+        this.targetIdx = index;
+        if (this.mode === 'transform')
+            this.applyTransforms(index);
+        else
+            this.applyFlow(index);
+    }
+    /** Put everything back where it started (slot at its original index). */
+    reset() {
+        this.apply(this.slotIdx);
+    }
+    /** A scroll event happened somewhere: cached scroll deltas must be re-read once. */
+    onScroll() {
+        this.frame.invalidate();
+    }
+    /**
+     * Re-baseline from the live layout (e.g. the window was resized mid-drag). Not called during
+     * normal sorting, because re-measuring while items are displaced is exactly what would
+     * re-introduce feedback into the decision.
+     */
+    refresh() {
+        if (this.disposed)
+            return;
+        const target = this.targetIdx;
+        this.clearDisplacement();
+        this.snapshot();
+        this.frame = new ScrollFrame(this.container, true);
+        if (this.mode === 'transform') {
+            this.targetIdx = this.slotIdx;
+            this.apply(Math.min(target, this.boxes.length - 1));
+        }
+        else {
+            this.targetIdx = this.slotIdx;
+        }
+    }
+    /** Restore every inline style this session touched. Safe to call more than once. */
+    dispose() {
+        if (this.disposed)
+            return;
+        this.disposed = true;
+        for (const e of this.entries) {
+            e.el.style.transform = e.savedTransform;
+            e.el.style.transition = e.savedTransition;
+            e.el.style.willChange = e.savedWillChange;
+        }
+        this.applied.clear();
+        this.spacer?.remove();
+    }
+    // ---------------------------------------------------------------------------------------
+    // snapshot
+    // ---------------------------------------------------------------------------------------
+    snapshot() {
+        const previous = new Map(this.entries.map((e) => [e.el, e]));
+        const entries = [];
+        const boxes = [];
+        const otherModelIndex = [];
+        let slot = -1;
+        let allOthers = 0;
+        for (const node of Array.from(this.container.children)) {
+            if (!(node instanceof HTMLElement))
+                continue;
+            const isSlot = node === this.placeholder;
+            if (!isSlot && !this.itemElements.has(node))
+                continue;
+            const modelIdx = isSlot ? -1 : allOthers++;
+            const rect = node.getBoundingClientRect();
+            const off = this.applied.get(node);
+            const box = toBox(rect);
+            if (off) {
+                // Strip our own displacement so the snapshot always describes the *undisplaced* layout.
+                box.left -= off.x;
+                box.right -= off.x;
+                box.top -= off.y;
+                box.bottom -= off.y;
+            }
+            const hidden = !isSlot && rect.width === 0 && rect.height === 0;
+            if (hidden)
+                continue;
+            if (isSlot)
+                slot = entries.length;
+            else
+                otherModelIndex.push(modelIdx);
+            const known = previous.get(node);
+            entries.push(known ?? {
+                el: node,
+                isSlot,
+                base: initialTransform(node),
+                savedTransform: node.style.transform,
+                savedTransition: node.style.transition,
+                savedWillChange: node.style.willChange,
+            });
+            boxes.push(box);
+        }
+        this.entries = entries;
+        this.boxes = boxes;
+        this.slotIdx = slot;
+        this.otherModelIndex = otherModelIndex;
+        this.model = analyzeLayout(boxes, this.fallbackAxis, this.fallbackRtl);
+    }
+    // ---------------------------------------------------------------------------------------
+    // transform strategy (DOM stays untouched)
+    // ---------------------------------------------------------------------------------------
+    applyTransforms(target) {
+        const offsets = computeAxisOffsets(this.model, this.boxes, this.slotIdx, target);
+        const horizontal = this.model.axis === 'x';
+        this.entries.forEach((e, i) => {
+            const o = offsets[i];
+            this.setOffset(e, horizontal ? { x: o, y: 0 } : { x: 0, y: o });
+        });
+    }
+    setOffset(e, off) {
+        const prev = this.applied.get(e.el);
+        if ((prev?.x ?? 0) === off.x && (prev?.y ?? 0) === off.y)
+            return;
+        if (off.x === 0 && off.y === 0) {
+            this.applied.delete(e.el);
+            e.el.style.transform = e.savedTransform;
+        }
+        else {
+            this.applied.set(e.el, off);
+            e.el.style.transform = `translate3d(${off.x}px, ${off.y}px, 0)${e.base}`;
+        }
+    }
+    // ---------------------------------------------------------------------------------------
+    // flow strategy (single placeholder move + FLIP transforms)
+    // ---------------------------------------------------------------------------------------
+    applyFlow(target) {
+        const entries = this.entries;
+        // 1. READ: where everything visually is right now (including in-flight animations).
+        const first = entries.map((e) => e.el.getBoundingClientRect());
+        // 2. WRITE: move the one placeholder node; drop any FLIP transforms.
+        this.placeAt(target);
+        for (const e of entries) {
+            e.el.style.transition = 'none';
+            e.el.style.transform = e.savedTransform;
+        }
+        // 3. READ: where everything is after the browser re-flowed the list.
+        const last = entries.map((e) => e.el.getBoundingClientRect());
+        // 4. WRITE: invert (put each item back where it was), then play (animate to its new home).
+        const moved = [];
+        entries.forEach((e, i) => {
+            const dx = first[i].left - last[i].left;
+            const dy = first[i].top - last[i].top;
+            if (this.animationMs > 0 && (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5)) {
+                e.el.style.transform = `translate3d(${dx}px, ${dy}px, 0)${e.base}`;
+                moved.push(e);
+            }
+        });
+        const transition = this.animationMs > 0 ? `transform ${this.animationMs}ms ${EASING}` : '';
+        if (moved.length)
+            void this.container.offsetWidth; // commit the inverted frame
+        for (const e of entries)
+            e.el.style.transition = transition || e.savedTransition;
+        for (const e of moved)
+            e.el.style.transform = e.savedTransform;
+    }
+    placeAt(target) {
+        const container = this.container;
+        if (this.spacer === undefined)
+            this.spacer = makeSpacer(container);
+        const spacer = this.spacer;
+        spacer?.remove();
+        const others = this.entries.filter((e) => !e.isSlot);
+        const ref = others[target]?.el;
+        if (ref) {
+            // ... [placeholder][separator][ref]: the separator that used to sit before `ref` still
+            // separates it from its previous sibling, the new one separates it from the placeholder.
+            container.insertBefore(this.placeholder, ref);
+            if (spacer)
+                container.insertBefore(spacer, ref);
+            return;
+        }
+        const last = others[others.length - 1]?.el;
+        const after = last ? last.nextSibling : null;
+        if (spacer)
+            container.insertBefore(spacer, after);
+        container.insertBefore(this.placeholder, after);
+    }
+    clearDisplacement() {
+        for (const e of this.entries) {
+            e.el.style.transition = 'none';
+            e.el.style.transform = e.savedTransform;
+        }
+        this.applied.clear();
+    }
+}
+function initialTransform(el) {
+    const t = getComputedStyle(el).transform;
+    return t && t !== 'none' ? ` ${t}` : '';
+}
+
 /** Base (LTR) physical direction for every logical direction. */
 const LTR_BASE = {
     start: 'w',
@@ -369,248 +1227,16 @@ function resolveLogicalDirection(dir, rtl) {
 }
 
 /**
- * Live geometry sorting.
+ * A drop list.
  *
- * Unlike the old snapshot-only implementation, every sort pass reads the
- * current DOM order and current client rects. This matters when:
- *  - the placeholder changes layout,
- *  - a Kanban column is scrolled while dragging,
- *  - the dragged item enters another list,
- *  - CSS grid/flex reflows occur.
- */
-class PositionalSortStrategy {
-    container;
-    dragging = null;
-    index = -1;
-    flow = 'free';
-    rtl = false;
-    withElementContainer(el) {
-        this.container = el;
-        return this;
-    }
-    start(_items) {
-        this.flow = detectFlow(this.container);
-        this.rtl = isRtl(this.container);
-        this.index = -1;
-    }
-    enter(drag, x, y) {
-        this.dragging = drag;
-        this.index = this.findInsertionIndex(drag, x, y);
-        this.movePlaceholder(drag, this.index);
-    }
-    sort(drag, x, y) {
-        this.dragging = drag;
-        const next = this.findInsertionIndex(drag, x, y);
-        const previous = this.getCurrentIndex();
-        if (next === previous)
-            return null;
-        this.movePlaceholder(drag, next);
-        return {
-            previousIndex: previous,
-            currentIndex: next,
-        };
-    }
-    getCurrentIndex() {
-        if (!this.container)
-            return Math.max(0, this.index);
-        const placeholder = this.dragging?.getPlaceholderElement();
-        if (placeholder?.parentElement === this.container) {
-            const refs = new Set(this.container.__ngxDragItems ?? []);
-            let position = 0;
-            const itemElements = new Set(Array.from(refs, (item) => item.el));
-            for (const node of Array.from(this.container.children)) {
-                if (node === placeholder)
-                    return position;
-                if (node instanceof HTMLElement && itemElements.has(node) && node !== this.dragging?.el) {
-                    position++;
-                }
-            }
-        }
-        return Math.max(0, this.index);
-    }
-    getItemIndex(item) {
-        let index = 0;
-        const refs = new Set(this.container.__ngxDragItems ?? []);
-        const itemElements = new Set(Array.from(refs, (ref) => ref.el));
-        for (const node of Array.from(this.container.children)) {
-            if (node === item.el)
-                return index;
-            if (node instanceof HTMLElement &&
-                !node.classList.contains('ngx-drag-placeholder') &&
-                !node.classList.contains('ngx-drag-in-body') &&
-                (!refs.size || itemElements.has(node))) {
-                index++;
-            }
-        }
-        return -1;
-    }
-    reset() {
-        this.dragging = null;
-        this.index = -1;
-    }
-    movePlaceholder(drag, index) {
-        const ph = drag.getPlaceholderElement();
-        if (!ph || !this.container)
-            return;
-        const items = this.readItems(drag);
-        const reference = items[index]?.drag.el ?? null;
-        if (reference) {
-            if (ph !== reference.previousSibling) {
-                this.container.insertBefore(ph, reference);
-            }
-        }
-        else if (ph.parentElement !== this.container || ph !== this.container.lastElementChild) {
-            this.container.appendChild(ph);
-        }
-        this.index = Math.max(0, Math.min(index, items.length));
-    }
-    findInsertionIndex(drag, x, y) {
-        const items = this.readItems(drag);
-        if (!items.length)
-            return 0;
-        switch (this.flow) {
-            case 'flex-row':
-                return this.findFlexRow(items, x);
-            case 'flex-column':
-                return this.findFlexColumn(items, y);
-            case 'grid':
-            case 'free':
-            default:
-                return this.findGrid(items, x, y);
-        }
-    }
-    readItems(drag) {
-        const itemSet = new Set(
-        // DropListRef maintains the authoritative set; DOM order is authoritative
-        // for placement, so we only inspect direct children here.
-        this.container.__ngxDragItems ?? []);
-        const byElement = new Map(Array.from(itemSet, (item) => [item.el, item]));
-        const result = [];
-        Array.from(this.container.children).forEach((element, domIndex) => {
-            if (!(element instanceof HTMLElement) ||
-                element === drag.el ||
-                element.classList.contains('ngx-drag-placeholder') ||
-                element.classList.contains('ngx-drag-in-body')) {
-                return;
-            }
-            const ref = byElement.get(element);
-            if (!ref)
-                return;
-            result.push({
-                drag: ref,
-                rect: element.getBoundingClientRect(),
-                domIndex,
-            });
-        });
-        // Fallback for environments where the private bridge is not available.
-        if (!result.length) {
-            return [];
-        }
-        return result;
-    }
-    findFlexRow(items, x) {
-        for (let i = 0; i < items.length; i++) {
-            const r = items[i].rect;
-            const mid = r.left + r.width / 2;
-            const before = this.rtl ? x > mid : x < mid;
-            if (before)
-                return i;
-        }
-        return items.length;
-    }
-    findFlexColumn(items, y) {
-        for (let i = 0; i < items.length; i++) {
-            const r = items[i].rect;
-            if (y < r.top + r.height / 2)
-                return i;
-        }
-        return items.length;
-    }
-    findGrid(items, x, y) {
-        let best = items[0];
-        let bestScore = Number.POSITIVE_INFINITY;
-        for (const item of items) {
-            const cx = item.rect.left + item.rect.width / 2;
-            const cy = item.rect.top + item.rect.height / 2;
-            const dx = Math.abs(x - cx) / Math.max(item.rect.width, 1);
-            const dy = Math.abs(y - cy) / Math.max(item.rect.height, 1);
-            const score = dx + dy * 1.2;
-            if (score < bestScore) {
-                bestScore = score;
-                best = item;
-            }
-        }
-        const target = best.rect;
-        const sameRow = y >= target.top - target.height * 0.35 && y <= target.bottom + target.height * 0.35;
-        const before = sameRow
-            ? this.rtl
-                ? x > target.left + target.width / 2
-                : x < target.left + target.width / 2
-            : y < target.top + target.height / 2;
-        return Math.max(0, Math.min(items.length, items.findIndex((x) => x === best) + (before ? 0 : 1)));
-    }
-}
-function detectFlow(el) {
-    const s = getComputedStyle(el);
-    if (s.display.includes('grid'))
-        return 'grid';
-    if (s.display.includes('flex')) {
-        if (s.flexWrap !== 'nowrap')
-            return 'grid';
-        return s.flexDirection.startsWith('column') ? 'flex-column' : 'flex-row';
-    }
-    return 'free';
-}
-
-class PlaceHolderRef {
-    tpl;
-    dropList;
-    element;
-    _visible = false;
-    attach(container, source, reference) {
-        if (!this.element) {
-            // Keep the same tag/attributes as the dragged item so selectors such as
-            // ".list > article" and grid/flex item rules continue to apply.
-            this.element = source.cloneNode(false);
-            this.element.removeAttribute('id');
-            this.element.classList.add('ngx-drag-placeholder');
-            this.element.setAttribute('aria-hidden', 'true');
-            this.element.setAttribute('inert', '');
-            this.element.removeAttribute('tabindex');
-        }
-        // The placeholder must never inherit a live drag transform/animation.
-        this.element.style.setProperty('transform', 'none', 'important');
-        this.element.style.setProperty('transition', 'none', 'important');
-        this.element.style.setProperty('animation', 'none', 'important');
-        this.element.style.setProperty('pointer-events', 'none', 'important');
-        this.element.style.setProperty('visibility', 'visible', 'important');
-        this.element.style.setProperty('opacity', '0.16', 'important');
-        this.element.style.setProperty('outline', '2px dashed currentColor', 'important');
-        this.element.style.setProperty('outline-offset', '-2px', 'important');
-        this._visible = true;
-        if (reference && reference.parentNode === container) {
-            if (this.element !== reference)
-                container.insertBefore(this.element, reference);
-        }
-        else if (this.element.parentNode !== container) {
-            container.appendChild(this.element);
-        }
-        return this.element;
-    }
-    detach() {
-        this.element?.remove();
-        this._visible = false;
-    }
-    get visible() {
-        return this._visible && !!this.element?.isConnected;
-    }
-}
-
-/**
- * DropListRef is intentionally generic, while the positional sorting strategy
- * works on DragRef<any>. The public DropList/DragRef relationship is invariant
- * because IDropEvent<T> contains T in a callback position. Keep the strongly
- * typed Set here, and narrow only at the DOM-local bridge / strategy boundary.
+ * Membership (`_draggables`) only ever reflects which draggables *belong* to this list in the
+ * template. It is never changed by dragging. Everything that is transient during a drag lives
+ * in a single `SortSession` (see sorting/sort-session.ts) that is created when a drag enters
+ * the list and disposed when it leaves or the drag ends:
+ *
+ *  - the list the drag started in keeps its session for the whole drag (its placeholder holds
+ *    the item's original slot, so leaving and re-entering is stable);
+ *  - any other list gets a fresh session on every entry and drops it on every exit.
  */
 class DropListRef {
     data;
@@ -618,19 +1244,25 @@ class DropListRef {
     disableSort = false;
     connectedTo = [];
     dropListGroup;
+    /** Duration (ms) of the sibling slide animation. `0` disables animation. */
+    sortAnimationDuration = 200;
     _draggables = new Set();
     onDrop = new EventEmitter();
-    strategy = new PositionalSortStrategy();
-    active = false;
-    previousIndex = -1;
+    session = null;
     placeholder;
+    customPlaceholder;
+    activeDrag = null;
+    isOrigin = false;
+    hovered = false;
+    hit = null;
+    /** Pre-insertion geometry of a foreign list, restored when the drag leaves it. */
+    naturalHit = null;
+    hitCached = false;
     addItem(item) {
         this._draggables.add(item);
-        this.publishDragItems();
     }
     removeItem(item) {
         this._draggables.delete(item);
-        this.publishDragItems();
     }
     isConnectedTo(other) {
         if (other === this)
@@ -639,76 +1271,255 @@ class DropListRef {
             return true;
         return !!this.dropListGroup && this.dropListGroup.has(other);
     }
+    // ---------------------------------------------------------------------------------------
+    // hit testing (cached for the duration of a drag)
+    // ---------------------------------------------------------------------------------------
+    /** Measure the list and its clipping ancestors once, at drag start. */
+    _cacheGeometry() {
+        this.hit = measureHit(this.el);
+        this.hitCached = true;
+    }
+    /**
+     * Is the point over the *visible* part of this list? Scroll-aware without re-measuring.
+     *
+     * The list box and every clipping ancestor are tracked separately because they react to scroll
+     * differently: scrolling a container moves the list but not the container's own clip window.
+     */
+    _containsPoint(x, y) {
+        const hit = this.hitCached ? this.hit : measureHit(this.el);
+        if (!hit)
+            return false;
+        let d = hit.frame.delta();
+        if (!boxContains(hit.box, x + d.x, y + d.y))
+            return false;
+        for (const clip of hit.clips) {
+            d = clip.frame.delta();
+            if (!boxContains(clip.box, x + d.x, y + d.y))
+                return false;
+        }
+        return true;
+    }
+    /** Approximate area, used to break ties between overlapping, unrelated lists. */
+    _area() {
+        const b = (this.hit ?? measureHit(this.el))?.box;
+        return b ? (b.right - b.left) * (b.bottom - b.top) : 0;
+    }
+    _onScroll() {
+        this.hit?.frame.invalidate();
+        this.hit?.clips.forEach((c) => c.frame.invalidate());
+        this.session?.onScroll();
+    }
+    /** Re-measure after a viewport resize. */
+    _refresh() {
+        if (this.hitCached)
+            this._cacheGeometry();
+        this.session?.refresh();
+    }
+    // ---------------------------------------------------------------------------------------
+    // drag lifecycle
+    // ---------------------------------------------------------------------------------------
+    /** Backwards-compatible entry point: makes this list the drag's target. */
     createPlaceholder(drag) {
-        // There is exactly one placeholder for the active drag.
-        this.placeholder?.detach();
-        const ref = new PlaceHolderRef();
-        ref.dropList = this;
-        const source = drag.el;
-        const rect = source.getBoundingClientRect();
-        ref.attach(this.el, source);
-        this.copyPlaceholderGeometry(source, ref.element, rect);
-        this.placeholder = ref;
-        drag.placeholder = ref;
         this.enter(drag, drag.pointer.x, drag.pointer.y);
-        return ref;
+        return drag.placeholder;
     }
+    /** The drag pointer entered this list (or the drag started inside it). */
     enter(drag, x = 0, y = 0) {
-        if (!this.active) {
-            this.active = true;
-            this.previousIndex = this.indexOf(drag);
-            // Sorting strategy reads the live DOM. Expose the authoritative refs
-            // through a DOM-local bridge with the intentionally wider any type.
-            this.publishDragItems();
-            this.strategy.withElementContainer(this.el).start(this.getStrategyItems());
+        if (this.session && this.activeDrag === drag) {
+            // Re-entering the list the drag started in: its session (and slot) are still alive.
+            this.hovered = true;
             this.el.classList.add('ngx-drop-list--active');
+            drag.placeholder = this.placeholder;
+            this.sortItem(drag, { x, y });
+            return;
         }
-        this.strategy.enter(this.asStrategyDrag(drag), x, y);
+        this.releaseSession(); // never keep stale state from a previous drag (geometry cache stays)
+        this.begin(drag, { x, y });
+        this.hovered = true;
+        this.el.classList.add('ngx-drop-list--active');
     }
+    /** Re-evaluate the insertion index for the pointer. Returns the new index, or null if unchanged. */
     sortItem(drag, position) {
-        if (!this.active || this.disableSort)
+        const s = this.session;
+        if (!s || this.activeDrag !== drag || !this.hovered || this.disableSort)
             return null;
-        return (this.strategy.sort(this.asStrategyDrag(drag), position.x, position.y)?.currentIndex ?? null);
+        const next = s.resolve(position);
+        if (next === s.target)
+            return null;
+        s.apply(next);
+        return s.modelIndex;
     }
-    finishDrag(drag) {
-        if (!this.active)
+    /** The pointer left this list. */
+    exit(drag) {
+        if (!this.session || this.activeDrag !== drag)
             return;
-        const currentIndex = this.strategy.getCurrentIndex();
-        this.onDrop.emit({
-            previousIndex: Math.max(0, drag.originIndex >= 0 ? drag.originIndex : this.previousIndex),
-            currentIndex,
-            item: drag,
-            container: this,
-            previousContainer: drag.originDropList ?? this,
-        });
-        this.reset();
+        this.hovered = false;
+        this.el.classList.remove('ngx-drop-list--active');
+        if (this.isOrigin) {
+            // Keep the original slot (the item logically still lives here) but stop displacing siblings.
+            this.session.reset();
+        }
+        else {
+            // A foreign list forgets the drag on exit; its geometry stays cached until the drag ends.
+            this.releaseSession(drag);
+        }
     }
-    exit(_drag) {
-        if (!this.active)
-            return;
-        this.placeholder?.detach();
-        this.reset();
+    /**
+     * Ends the drag for this list. Returns the drop event when the pointer was released over this
+     * list, `null` otherwise (nothing to emit). All transient state is disposed either way.
+     */
+    _finish(drag, commit) {
+        const s = this.session;
+        if (!s || this.activeDrag !== drag)
+            return null;
+        const event = commit && this.hovered
+            ? {
+                previousIndex: Math.max(0, drag.originIndex),
+                currentIndex: s.modelIndex,
+                item: drag,
+                container: this,
+                previousContainer: drag.originDropList ?? this,
+                isPointerOverContainer: true,
+            }
+            : null;
+        this.releaseSession(drag);
+        return event;
+    }
+    /** Compatibility wrapper: finish + emit. */
+    finishDrag(drag) {
+        const event = this._finish(drag, true);
+        if (event)
+            this.onDrop.emit(event);
     }
     resetSortTransforms() {
-        this.reset();
+        this.session?.reset();
     }
     getFinalIndex() {
-        return this.strategy.getCurrentIndex();
+        return this.session ? this.session.modelIndex : 0;
     }
     getItemIndex(item) {
         return this.indexOf(item);
     }
+    /** End of the drag: dispose EVERYTHING this list holds, including cached geometry. Idempotent. */
+    _release(drag) {
+        if (drag && this.activeDrag && this.activeDrag !== drag)
+            return;
+        this.releaseSession(drag);
+        this.hit = null;
+        this.hitCached = false;
+    }
+    /** Dispose the sort session, placeholder and drag ownership. */
+    releaseSession(drag) {
+        if (drag && this.activeDrag && this.activeDrag !== drag)
+            return;
+        this.session?.dispose();
+        this.session = null;
+        this.placeholder?.detach();
+        if (this.activeDrag && this.activeDrag.placeholder === this.placeholder) {
+            this.activeDrag.placeholder = undefined;
+        }
+        this.placeholder = undefined;
+        if (this.naturalHit) {
+            this.hit = this.naturalHit;
+            this.naturalHit = null;
+        }
+        this.activeDrag = null;
+        this.isOrigin = false;
+        this.hovered = false;
+        this.el?.classList.remove('ngx-drop-list--active');
+    }
+    // ---------------------------------------------------------------------------------------
+    // internals
+    // ---------------------------------------------------------------------------------------
+    begin(drag, pointer) {
+        const origin = drag.originDropList === this;
+        const others = this.otherSlots(drag);
+        const rtl = isRtl(this.el);
+        const axis = fallbackAxis(this.el);
+        const ph = this.customPlaceholder ?? new PlaceHolderRef();
+        ph.dropList = this;
+        let spacer;
+        if (origin) {
+            // The placeholder takes over the exact slot of the (now hidden) source element.
+            ph.attach(this.el, drag.el, drag.el);
+        }
+        else {
+            ph.detach();
+            const reference = this.foreignInsertionReference(others, pointer, axis, rtl);
+            ph.attach(this.el, drag.el, reference);
+            spacer = makeSpacer(this.el);
+            if (spacer)
+                this.el.insertBefore(spacer, reference ?? ph.element);
+        }
+        this.lockPlaceholderGeometry(drag, ph.element, drag.start);
+        this.placeholder = ph;
+        this.activeDrag = drag;
+        this.isOrigin = origin;
+        drag.placeholder = ph;
+        this.session = new SortSession({
+            container: this.el,
+            placeholder: ph.element,
+            itemElements: others,
+            fallbackAxis: axis,
+            fallbackRtl: rtl,
+            animationMs: this.sortAnimationDuration,
+            spacer,
+        });
+        if (!origin && this.hitCached) {
+            // Inserting the placeholder made this list bigger; the grown box is what the user sees
+            // (and must be able to reach, e.g. to append below the last item). The natural box comes
+            // back on exit, so entering/leaving at the old edge cannot flicker.
+            this.naturalHit = this.hit;
+            this.hit = measureHit(this.el);
+        }
+    }
+    /**
+     * First placement into a list that does not contain the item yet: the node the placeholder
+     * must be inserted before (null = append). Same pure resolver as sorting, no hysteresis.
+     */
+    foreignInsertionReference(others, pointer, axis, rtl) {
+        const els = [];
+        const boxes = [];
+        for (const node of Array.from(this.el.children)) {
+            if (!(node instanceof HTMLElement) || !others.has(node))
+                continue;
+            const r = node.getBoundingClientRect();
+            if (r.width === 0 && r.height === 0)
+                continue;
+            els.push(node);
+            boxes.push(toBox(r));
+        }
+        if (!els.length)
+            return null;
+        const index = this.disableSort
+            ? els.length
+            : resolveInsertionIndex(analyzeLayout(boxes, axis, rtl), boxes, -1, pointer, null);
+        return index < els.length ? els[index] : els[els.length - 1].nextSibling;
+    }
+    otherSlots(drag) {
+        const set = new Set();
+        for (const d of this._draggables) {
+            if (d !== drag && d.el?.parentElement === this.el)
+                set.add(d.el);
+        }
+        return set;
+    }
     indexOf(item) {
-        const elements = new Set(this._draggables);
+        const byElement = new Map();
+        for (const d of this._draggables)
+            if (d.el)
+                byElement.set(d.el, d);
         let index = 0;
         for (const node of Array.from(this.el.children)) {
             if (!(node instanceof HTMLElement))
                 continue;
             if (node === this.placeholder?.element)
                 continue;
-            if (node.classList.contains('ngx-drag-in-body'))
+            if (node.classList.contains('ngx-drag-placeholder'))
+                continue;
+            if (node.classList.contains('ngx-drag-preview'))
                 continue;
-            const ref = Array.from(elements).find((candidate) => candidate.el === node);
+            const ref = byElement.get(node);
             if (!ref)
                 continue;
             if (ref === item)
@@ -717,44 +1528,63 @@ class DropListRef {
         }
         return -1;
     }
-    reset() {
-        this.active = false;
-        this.strategy.reset();
-        this.placeholder?.detach();
-        this.placeholder = undefined;
-        this.publishDragItems();
-        this.el.classList.remove('ngx-drop-list--active');
-    }
-    copyPlaceholderGeometry(source, placeholder, rect) {
-        // copyComputedStyleTree(source, placeholder);
-        placeholder.style.setProperty('width', `${rect.width}px`, 'important');
-        placeholder.style.setProperty('height', `${rect.height}px`, 'important');
-        placeholder.style.setProperty('min-width', `${rect.width}px`, 'important');
-        placeholder.style.setProperty('min-height', `${rect.height}px`, 'important');
-        placeholder.style.setProperty('max-width', `${rect.width}px`, 'important');
-        placeholder.style.setProperty('max-height', `${rect.height}px`, 'important');
-        placeholder.style.setProperty('visibility', 'visible', 'important');
-        placeholder.style.setProperty('opacity', '0.16', 'important');
-        placeholder.style.setProperty('pointer-events', 'none', 'important');
-        placeholder.style.setProperty('transform', 'none', 'important');
-        placeholder.style.setProperty('transition', 'none', 'important');
-        placeholder.style.setProperty('animation', 'none', 'important');
-        placeholder.style.setProperty('box-sizing', 'border-box', 'important');
+    lockPlaceholderGeometry(drag, placeholder, rect) {
+        const set = (k, v) => placeholder.style.setProperty(k, v);
+        // The clone was taken from the source, which may already carry drag-time inline styles.
+        placeholder.style.display = drag.originalDisplay;
+        placeholder.style.zIndex = '';
+        placeholder.style.removeProperty('will-change');
+        set('width', `${rect.width}px`);
+        set('height', `${rect.height}px`);
+        // set('min-width', `${rect.width}px`);
+        // set('min-height', `${rect.height}px`);
+        // set('max-width', `${rect.width}px`);
+        // set('max-height', `${rect.height}px`);
+        set('visibility', 'visible');
+        set('opacity', '0.16');
+        set('pointer-events', 'none');
+        set('animation', 'none');
+        set('box-sizing', 'border-box');
     }
-    /**
-     * The sorting strategy only needs a read-only collection of draggable refs.
-     * Using DragRef<any> at this internal boundary avoids the invariant generic
-     * relationship between DragRef<T> and DragRef<unknown>.
-     */
-    getStrategyItems() {
-        return Array.from(this._draggables);
-    }
-    asStrategyDrag(drag) {
-        return drag;
-    }
-    publishDragItems() {
-        this.el.__ngxDragItems = this._draggables;
+}
+/** Orientation to assume while a list has fewer than two items to measure. */
+function fallbackAxis(container) {
+    const s = getComputedStyle(container);
+    if (s.display.includes('flex'))
+        return s.flexDirection.startsWith('column') ? 'y' : 'x';
+    if (s.display.includes('grid'))
+        return 'y';
+    const child = container.firstElementChild;
+    if (child && getComputedStyle(child).display.startsWith('inline'))
+        return 'x';
+    return 'y';
+}
+/** Rect of the list plus one clip window per clipping (overflow != visible) ancestor. */
+function measureHit(el) {
+    const r = el.getBoundingClientRect();
+    if (r.right <= r.left || r.bottom <= r.top)
+        return null;
+    const clips = [];
+    const root = el.ownerDocument.documentElement;
+    for (let node = el.parentElement; node && node !== root; node = node.parentElement) {
+        const s = getComputedStyle(node);
+        const cx = s.overflowX !== 'visible';
+        const cy = s.overflowY !== 'visible';
+        if (!cx && !cy)
+            continue;
+        const c = node.getBoundingClientRect();
+        clips.push({
+            box: {
+                left: cx ? c.left : -Infinity,
+                right: cx ? c.right : Infinity,
+                top: cy ? c.top : -Infinity,
+                bottom: cy ? c.bottom : Infinity,
+            },
+            // A clip window only moves when something ABOVE the clipping element scrolls.
+            frame: new ScrollFrame(node, false),
+        });
     }
+    return { box: toBox(r), frame: new ScrollFrame(el, false), clips };
 }
 
 /**
@@ -763,6 +1593,7 @@ class DropListRef {
  * Lists register themselves automatically when `NgxDropListGroup` wraps them.
  */
 class DropListGroupRef {
+    el;
     lists = new Set();
     add(list) {
         this.lists.add(list);
@@ -810,23 +1641,41 @@ class DragDropService {
         ref.cancelDrag();
         this.activeDrag.set(null);
     }
-    findDropList(point, current) {
-        const candidates = this.dropLists().filter((list) => {
-            const r = list.el?.getBoundingClientRect();
-            return (!!r && point.x >= r.left && point.x <= r.right && point.y >= r.top && point.y <= r.bottom);
-        });
-        // Staying over the current list should always win.
-        if (current && candidates.includes(current))
-            return current;
-        // Never jump into an unrelated list just because it overlaps the pointer.
-        // Prefer the smallest matching connected container (useful for nested lists).
-        return (candidates
-            .filter((list) => !current || current.isConnectedTo(list))
-            .sort((a, b) => {
-            const ra = a.el.getBoundingClientRect();
-            const rb = b.el.getBoundingClientRect();
-            return ra.width * ra.height - rb.width * rb.height;
-        })[0] ?? null);
+    /**
+     * Which drop list is under `point`?
+     *
+     * - Only lists connected to the drag's ORIGIN list qualify (connectivity is not transitive, so
+     *   A→B→C never lets an item hop A→C). Without an origin (a free-drag element) nothing
+     *   qualifies: free dragging is never captured by a list.
+     * - Only the visible (clip-aware) part of a list counts.
+     * - A list inside the dragged element itself is never a target.
+     * - Nested lists: the innermost qualifying list wins. Among unrelated overlapping lists the
+     *   current one is kept (no flicker), otherwise the smallest.
+     */
+    findDropList(point, current, origin, dragEl) {
+        const source = origin ?? null;
+        if (!source)
+            return null;
+        let best = null;
+        for (const list of this.dropLists()) {
+            if (!list.el || !source.isConnectedTo(list))
+                continue;
+            if (dragEl && dragEl !== list.el && dragEl.contains(list.el))
+                continue;
+            if (!list._containsPoint(point.x, point.y))
+                continue;
+            if (!best)
+                best = list;
+            else if (best.el.contains(list.el))
+                best = list; // deeper wins
+            else if (list.el.contains(best.el))
+                continue;
+            else if (list === current)
+                best = list;
+            else if (best !== current && list._area() < best._area())
+                best = list;
+        }
+        return best;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DragDropService, providedIn: 'root' });
@@ -840,19 +1689,46 @@ const NGX_DROPLIST_GROUP = new InjectionToken('ngx-drop-list-group');
 /** Wrap several `ngxDropList`s to let items move freely between them. */
 class NgxDropListGroup {
     _ref = new DropListGroupRef();
+    el = inject((ElementRef));
+    injector = inject(Injector);
+    constructor() {
+        this._ref.el = this.el.nativeElement;
+    }
     ngOnDestroy() {
         this._ref.lists.clear();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropListGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDropListGroup, isStandalone: true, selector: "[NgxDropListGroup],[ngxDropListGroup]", providers: [{ provide: NGX_DROPLIST_GROUP, useExisting: NgxDropListGroup }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDropListGroup, isStandalone: true, selector: "[NgxDropListGroup],[ngxDropListGroup]", providers: [{ provide: NGX_DROPLIST_GROUP, useExisting: NgxDropListGroup }], exportAs: ["ngxDropListGroup"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropListGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[NgxDropListGroup],[ngxDropListGroup]',
                     providers: [{ provide: NGX_DROPLIST_GROUP, useExisting: NgxDropListGroup }],
+                    exportAs: 'ngxDropListGroup',
                 }]
-        }] });
+        }], ctorParameters: () => [] });
+
+const NGX_PLACEHOLDER = new InjectionToken('ngx-place-holder');
+class NgxPlaceholder {
+    tpl;
+    _ref = new PlaceHolderRef();
+    list = inject(NGX_DROPLIST, { optional: true, skipSelf: true });
+    constructor(tpl) {
+        this.tpl = tpl;
+        this._ref.tpl = tpl;
+        this._ref.dropList = this.list?._ref;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxPlaceholder, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxPlaceholder, isStandalone: true, selector: "[NgxPlaceholder],[ngxPlaceholder]", providers: [{ provide: NGX_PLACEHOLDER, useExisting: NgxPlaceholder }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxPlaceholder, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[NgxPlaceholder],[ngxPlaceholder]',
+                    providers: [{ provide: NGX_PLACEHOLDER, useExisting: NgxPlaceholder }],
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 const NGX_DROPLIST = new InjectionToken('ngx-drop-list');
 class NgxDropList {
@@ -868,6 +1744,8 @@ class NgxDropList {
         this._ref.disableSort = value === true;
     }
     drop = new EventEmitter();
+    customPlaceholder;
+    sub;
     service = inject(DragDropService);
     group = inject(NGX_DROPLIST_GROUP, { optional: true, skipSelf: true });
     constructor(el) {
@@ -876,17 +1754,25 @@ class NgxDropList {
     ngOnInit() {
         this._ref.el = this.el.nativeElement;
         this._ref.dropListGroup = this.group?._ref ?? null;
+        // console.log('list:', this._ref.el, 'group:', this._ref.dropListGroup?.el);
         // Previously the group directive never actually tracked its lists — fixed here.
         this.group?._ref.add(this._ref);
-        this._ref.onDrop.subscribe((e) => this.drop.emit(e));
+        this.sub = this._ref.onDrop.subscribe((e) => this.drop.emit(e));
         this.service.registerDropList(this._ref);
     }
+    ngAfterContentInit() {
+        if (this.customPlaceholder) {
+            this._ref.customPlaceholder = this.customPlaceholder._ref;
+        }
+    }
     ngOnDestroy() {
+        this.sub?.unsubscribe();
+        this._ref._release();
         this.group?._ref.remove(this._ref);
         this.service.removeDropList(this._ref);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropList, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDropList, isStandalone: true, selector: "[NgxDropList],[ngxDropList]", inputs: { data: "data", connectedTo: "connectedTo", disableSort: "disableSort" }, outputs: { drop: "drop" }, host: { classAttribute: "ngx-drop-list" }, providers: [{ provide: NGX_DROPLIST, useExisting: NgxDropList }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDropList, isStandalone: true, selector: "[NgxDropList],[ngxDropList]", inputs: { data: "data", connectedTo: "connectedTo", disableSort: "disableSort" }, outputs: { drop: "drop" }, host: { classAttribute: "ngx-drop-list" }, providers: [{ provide: NGX_DROPLIST, useExisting: NgxDropList }], queries: [{ propertyName: "customPlaceholder", first: true, predicate: NgxPlaceholder, descendants: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropList, decorators: [{
             type: Directive,
@@ -904,6 +1790,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 type: Input
             }], drop: [{
                 type: Output
+            }], customPlaceholder: [{
+                type: ContentChild,
+                args: [NgxPlaceholder, {
+                        descendants: true,
+                    }]
             }] } });
 
 /**
@@ -997,6 +1888,8 @@ function getScrollPosition(container) {
     return { left: container.scrollLeft, top: container.scrollTop };
 }
 
+/** Pointer events already claimed by an (inner) draggable. */
+const claimedPointerEvents = new WeakSet();
 const NGX_DRAGGABLE = new InjectionToken('ngx-draggable');
 const DEFAULT_KEYBOARD_STEP = 8;
 class NgxDraggable {
@@ -1047,6 +1940,8 @@ class NgxDraggable {
     removeUp;
     removeKeydown;
     removeEscape;
+    removeCancel;
+    removeLostCapture;
     scrollTarget = window;
     lastScroll = { left: 0, top: 0 };
     lastWindowScroll = { left: 0, top: 0 };
@@ -1068,6 +1963,7 @@ class NgxDraggable {
         this._ref.boundary = this.boundary();
         this._ref.lockAxis = this.lockAxis();
         this._ref.dropListGroup = this.group?._ref;
+        this._ref.service = this.service;
         this._ref.init();
         this._ref.withDropList(this.list?._ref ?? null);
         this.service.registerDragItem(this._ref);
@@ -1080,7 +1976,12 @@ class NgxDraggable {
         this.removeUp?.();
         this.removeKeydown?.();
         this.removeEscape?.();
+        this.removeCancel?.();
+        this.removeLostCapture?.();
         this.scroller.stop();
+        this.stopScrollTracking();
+        // Destroyed mid-drag (e.g. the model changed underneath us): never leave a body clone behind.
+        this._ref.dispose();
         this.service.removeDragItem(this._ref);
         this._ref.dropList?.removeItem(this._ref);
     }
@@ -1090,6 +1991,11 @@ class NgxDraggable {
             // this.isInteractive(e.target) ||
             !this.isOnHandle(e.target))
             return;
+        // Nested draggables: pointerdown bubbles, so without this an ancestor draggable would start
+        // its own drag from the very same gesture. The innermost enabled draggable claims it.
+        if (claimedPointerEvents.has(e))
+            return;
+        claimedPointerEvents.add(e);
         e.preventDefault();
         this.down = true;
         this.pointerId = e.pointerId;
@@ -1103,24 +2009,20 @@ class NgxDraggable {
             if (ev.key === 'Escape' && this.dragging())
                 this.cancel();
         });
+        this.removeCancel = this.renderer.listen(this.doc, 'pointercancel', (ev) => this.pointerCancel(ev));
+        this.removeLostCapture = this.renderer.listen(this.doc, 'lostpointercapture', (ev) => this.pointerCancel(ev));
     }
     applyDragUpdate(p) {
+        const before = this._ref.activeDropList;
+        // DragRef decides everything (preview, target list, placeholder). A free drag never
+        // interacts with drop lists.
         this._ref.dragMove(p);
-        const target = this.service.findDropList(p, this._ref.dropList);
-        if (target !== this._ref.dropList) {
-            this._ref.dropList?.exit(this._ref);
-            this._ref.clearDropList();
-            if (target) {
-                this._ref.withDropList(target);
-                target.createPlaceholder(this._ref);
-                if (this.autoScroll())
-                    this.scroller.retarget(target.el);
-            }
-            else if (this.autoScroll()) {
-                this.scroller.stop();
-            }
+        if (this._ref.isListDrag && this.autoScroll()) {
+            const after = this._ref.activeDropList;
+            // Follow the hovered list; outside every list, scroll the page.
+            if (after !== before)
+                this.scroller.retarget(after?.el ?? this.doc.body);
         }
-        this._ref.dropList?.sortItem(this._ref, p);
         this.dragMove.emit(p);
     }
     /** فراخوانی می‌شود دقیقاً وقتی drag واقعاً شروع می‌شود (چه با موس، چه با کیبورد). */
@@ -1181,7 +2083,13 @@ class NgxDraggable {
         if (!this.down || e.pointerId !== this.pointerId)
             return;
         if (this.dragging()) {
-            if (this._ref.dropList) {
+            // Also when released OUTSIDE every list: endDrag() rolls the drag back and cleans up.
+            if (this._ref.isListDrag) {
+                // The release position is authoritative for the drop target (a fast flick may end with
+                // a pointerup that has no preceding pointermove at that position).
+                const p = { x: e.clientX, y: e.clientY };
+                if (p.x !== this.lastPointer.x || p.y !== this.lastPointer.y)
+                    this._ref.dragMove(p);
                 this._ref.endDrag();
             }
             this.service.end(this._ref);
@@ -1189,6 +2097,16 @@ class NgxDraggable {
         this.finish();
         this.dragEnd.emit(this._ref.pointer);
     }
+    /** Browser cancelled the pointer (touch takeover, lost capture...). */
+    pointerCancel(e) {
+        if (!this.down || e.pointerId !== this.pointerId)
+            return;
+        if (this.dragging() && this._ref.isListDrag) {
+            this.cancel();
+            return;
+        }
+        this.pointerUp(e);
+    }
     cancel() {
         this._ref.cancelDrag();
         this.service.end(this._ref);
@@ -1202,7 +2120,10 @@ class NgxDraggable {
         this.removeMove?.();
         this.removeUp?.();
         this.removeEscape?.();
+        this.removeCancel?.();
+        this.removeLostCapture?.();
         this.removeMove = this.removeUp = this.removeEscape = undefined;
+        this.removeCancel = this.removeLostCapture = undefined;
     }
     /** Arrow-key movement for keyboard/assistive-tech users. Shift multiplies the step by 4. */
     keyDown(e) {
@@ -1219,14 +2140,19 @@ class NgxDraggable {
         if (delta) {
             e.preventDefault();
             if (!this.dragging()) {
-                this._ref.pointerDown({ x: 0, y: 0 });
+                // Free drag keeps its (0,0) pseudo pointer. A list item starts from its own centre so
+                // that keyboard sorting resolves against real geometry.
+                const inList = !!this._ref.dropList && this._ref.dropList.el === this._ref.el.parentElement;
+                const r = this._ref.el.getBoundingClientRect();
+                const origin = inList ? { x: r.left + r.width / 2, y: r.top + r.height / 2 } : { x: 0, y: 0 };
+                this._ref.pointerDown(origin);
                 this._ref.boundary = this.boundary();
                 this._ref.lockAxis = this.lockAxis();
-                this._ref.startDrag({ x: 0, y: 0 });
+                this._ref.startDrag(origin);
                 this.dragging.set(true);
                 this.service.begin(this._ref);
                 this.startScrollTracking();
-                this.dragStart.emit({ x: 0, y: 0 });
+                this.dragStart.emit(origin);
             }
             this._ref.nudge(delta.x, delta.y);
             this.dragMove.emit(this._ref.pointer);
@@ -1652,27 +2578,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
-const NGX_PLACEHOLDER = new InjectionToken('ngx-place-holder');
-class NgxPlaceholder {
-    tpl;
-    _ref = new PlaceHolderRef();
-    list = inject(NGX_DROPLIST, { optional: true, skipSelf: true });
-    constructor(tpl) {
-        this.tpl = tpl;
-        this._ref.tpl = tpl;
-        this._ref.dropList = this.list?._ref;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxPlaceholder, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxPlaceholder, isStandalone: true, selector: "[NgxPlaceholder],[ngxPlaceholder]", providers: [{ provide: NGX_PLACEHOLDER, useExisting: NgxPlaceholder }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxPlaceholder, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[NgxPlaceholder],[ngxPlaceholder]',
-                    providers: [{ provide: NGX_PLACEHOLDER, useExisting: NgxPlaceholder }],
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
-
 function moveItemInArray(array, from, to) {
     const f = clamp(from, array.length - 1);
     const t = clamp(to, array.length - 1);