ngx-kit 7.4.0 → 8.0.1

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, model, input, output, inject, Renderer2, effect, Input, Directive, HostListener, ApplicationRef, ContentChild, Output, ElementRef } 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,21 @@ 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 = [];
+    /**
+     * Candidate lists for hit-testing, filtered (connected to the origin; not inside the dragged
+     * element) and sorted deepest-first — both computed ONCE, not on every pointer move, since
+     * neither ever changes mid-drag. Kept in sync with the live registry (see `dropListsSnapshot`)
+     * so a list that appears or disappears mid-drag (e.g. behind an `@if`) is still picked up.
+     */
+    dropCandidates = [];
+    dropListsSnapshot = null;
+    lastEffective = { x: 0, y: 0 };
+    scrollListener;
+    resizeListener;
     init() {
         this.previousTransform = getComputedStyle(this.el).getPropertyValue('transform');
     }
@@ -157,14 +255,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 +281,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 +292,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 +320,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 +341,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 +365,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 +416,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,12 +434,848 @@ 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;
+        this.dropListsSnapshot = null; // force refreshDropCandidates() to do a full pass below
+        this.refreshDropCandidates(origin);
+        this.lastEffective = { ...pointer };
+        this.activeDropList = origin;
+        origin.enter(this, pointer.x, pointer.y);
+        // The origin is (re-)measured 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 });
+    }
+    /**
+     * Recomputes which registered lists are valid targets for this drag — connected to the
+     * origin, and not nested inside the element being dragged — plus each one's nesting depth.
+     *
+     * `DragDropService.dropLists()` is an Angular signal: its array is a NEW reference only when a
+     * list actually registers or unregisters, so the check below is a single reference comparison
+     * on every pointer move and the (heavier) connectivity/containment/depth work below it only
+     * runs on the rare event a list appears or disappears mid-drag — never on every pointer move.
+     */
+    refreshDropCandidates(origin) {
+        const all = this.service?.dropLists() ?? [];
+        if (all === this.dropListsSnapshot)
+            return;
+        this.dropListsSnapshot = all;
+        const already = new Set(this.dropCandidates.map((c) => c.list));
+        const next = [{ list: origin, depth: origin.depth }];
+        for (const l of all) {
+            if (l === origin || !l.el || !origin.isConnectedTo(l))
+                continue;
+            if (this.el !== l.el && this.el.contains(l.el))
+                continue;
+            if (!already.has(l))
+                l._cacheGeometry(); // newly eligible mid-drag: measure it now
+            next.push({ list: l, depth: l.depth });
+        }
+        this.dropCandidates = next;
+        this.cachedLists = next.map((c) => c.list);
+    }
+    /**
+     * Decide which list is under the pointer, switch if needed, then re-sort in the active one.
+     *
+     * The origin list is the one exception to "exiting a list resets/releases it": while the
+     * pointer dives into one of the origin's OWN nested lists (at any depth), the origin's
+     * placeholder and sibling displacement are left exactly as they are — frozen, not reset —
+     * so returning to the origin's own level doesn't snap items back and then forward again.
+     * Every OTHER (foreign) list still fully releases the moment the pointer leaves it, exactly
+     * as before; nesting multiple foreign sessions alive at once would let their own internal
+     * sibling displacement compound in ways a single flat `ancestorOffset` cannot represent.
+     */
+    updateDropTarget(pointer) {
+        const origin = this.originDropList;
+        if (!origin)
+            return;
+        this.refreshDropCandidates(origin);
+        const next = this.resolveDropList(pointer);
+        if (next === this.activeDropList) {
+            next?.sortItem(this, pointer);
+            return;
+        }
+        const prev = this.activeDropList;
+        if (prev && prev !== origin)
+            prev.exit(this);
+        const nextWithinOrigin = !!next && (next === origin || isDescendantOfList(next, origin));
+        if (nextWithinOrigin) {
+            if (prev === origin)
+                origin._freeze(); // no longer the innermost, but stays engaged
+        }
+        else {
+            origin.exit(this); // truly outside the origin's territory now: reset it (idempotent)
+        }
+        this.activeDropList = next;
+        next?.enter(this, pointer.x, pointer.y); // fresh entry, or resumes a still-alive (frozen) session
+    }
+    /**
+     * Innermost connected list under the pointer, from the precomputed candidates: deeper always
+     * beats shallower; among lists at the same depth (unrelated, visually overlapping lists) the
+     * currently active one is kept to avoid flicker, otherwise the smaller one wins. No DOM
+     * reads and no `.contains()` calls happen here — everything needed was precomputed above.
+     */
+    resolveDropList(pointer) {
+        let best = null;
+        let bestDepth = -1;
+        for (const { list, depth } of this.dropCandidates) {
+            if (!list._containsPoint(pointer.x, pointer.y))
+                continue;
+            if (!best || depth > bestDepth) {
+                best = list;
+                bestDepth = depth;
+            }
+            else if (depth === bestDepth && best !== this.activeDropList) {
+                if (list === this.activeDropList || list._area() < best._area())
+                    best = list;
+            }
+        }
+        return best;
+    }
+    /**
+     * 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.dropCandidates = [];
+        this.dropListsSnapshot = null;
+        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;
         this.preview.style.transform = `translate3d(${this.moveDx}px, ${this.moveDy}px, 0)`;
     }
 }
+/** Is `list` nested (at any depth) inside `ancestor`, per the parent/child list tree? */
+function isDescendantOfList(list, ancestor) {
+    for (let p = list.parentList; p; p = p.parentList) {
+        if (p === ancestor)
+            return true;
+    }
+    return false;
+}
+
+class PlaceHolderRef {
+    /**
+     * Custom placeholder content, from `*ngxPlaceholder` inside the `ngxDropList`. When unset,
+     * `attach()` falls back to a shallow clone of the dragged element (previous behaviour).
+     *
+     * Example:
+     *
+     *   <div ngxDropList>
+     *     <span class="my-placeholder" *ngxPlaceholder></span>
+     *     ...
+     *   </div>
+     */
+    tpl;
+    /** Set by `NgxPlaceholder` so the embedded view can join Angular's change-detection tree. */
+    appRef;
+    dropList;
+    element;
+    _visible = false;
+    _view;
+    /** True once `this.element` was built from `tpl` (as opposed to the fallback clone). */
+    isCustom = false;
+    attach(container, source, reference) {
+        if (!this.element) {
+            if (this.tpl) {
+                this._view = this.tpl.createEmbeddedView({});
+                this.appRef?.attachView(this._view);
+                // 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.appRef?.detachView(this._view);
+                    this._view.destroy();
+                    this._view = undefined;
+                    throw new Error('ngxPlaceholder template must contain exactly one HTMLElement root node ' +
+                        '(other root nodes, if any, are ignored).');
+                }
+                this.element = element;
+                this.isCustom = true;
+            }
+            else {
+                // Fallback: 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');
+                this.isCustom = false;
+            }
+        }
+        // Safety overrides that apply regardless of who authored the element: it must never
+        // inherit a live drag transform/animation (transform/transition are left free for the
+        // sort session to drive, translate3d-ing the placeholder to the current insertion slot),
+        // never intercept pointer events, and never be display:none.
+        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');
+        if (!this.isCustom) {
+            // Only the auto-generated clone gets the default "phantom box" look. A custom
+            // *ngxPlaceholder template is styled entirely by the caller.
+            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;
+    }
+    /** True while the currently attached element came from a custom `*ngxPlaceholder` template. */
+    get custom() {
+        return this.isCustom;
+    }
+    detach() {
+        this.element?.remove();
+        if (this._view) {
+            this.appRef?.detachView(this._view);
+            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;
+    onOffsetChange;
+    constructor(init) {
+        this.spacer = init.spacer;
+        this.onOffsetChange = init.onOffsetChange;
+        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;
+            if (this.applied.has(e.el))
+                this.onOffsetChange?.(e.el, { x: 0, y: 0 });
+        }
+        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}`;
+        }
+        this.onOffsetChange?.(e.el, off);
+    }
+    // ---------------------------------------------------------------------------------------
+    // 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;
+            if (this.applied.has(e.el))
+                this.onOffsetChange?.(e.el, { x: 0, y: 0 });
+        }
+        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 = {
@@ -355,262 +1317,30 @@ function isRtl(element) {
  * Resolves a logical direction ('start' | 'end' | 'n-start' | 'n-end' | 's-start' | 's-end')
  * to a physical, viewport-space direction ('n' | 'e' | 's' | 'w' | 'ne' | 'nw' | 'se' | 'sw')
  * based on `rtl`.
- *
- * Physical directions pass through untouched, so it's always safe to call this
- * even when `dir` might already be physical (e.g. resolving a direction that was
- * already resolved once before).
- */
-function resolveLogicalDirection(dir, rtl) {
-    if (!isLogicalDirection(dir)) {
-        return dir;
-    }
-    const base = LTR_BASE[dir];
-    return rtl ? MIRROR[base] : base;
-}
-
-/**
- * Live geometry sorting.
- *
- * 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;
+ *
+ * Physical directions pass through untouched, so it's always safe to call this
+ * even when `dir` might already be physical (e.g. resolving a direction that was
+ * already resolved once before).
+ */
+function resolveLogicalDirection(dir, rtl) {
+    if (!isLogicalDirection(dir)) {
+        return dir;
     }
+    const base = LTR_BASE[dir];
+    return rtl ? MIRROR[base] : base;
 }
 
 /**
- * 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.
+ * A drop list.
+ *
+ * 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 +1348,125 @@ 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;
+    /**
+     * Nesting: the nearest ENCLOSING drop list (null for a top-level list), and this list's own
+     * direct nested lists — i.e. lists whose nearest enclosing list is this one, not a list at any
+     * depth. Set by `NgxDropList` at init from a `skipSelf` DI lookup. Used for two things: (1)
+     * `depth` for "innermost wins" in `DragRef`'s target resolution, without any DOM `.contains()`
+     * calls on the hot path, and (2) cascading `_setAncestorOffset` (below) to every list nested
+     * inside an item that gets displaced by sorting, at any depth.
+     */
+    parentList = null;
+    childLists = new Set();
+    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;
+    /**
+     * Screen-space offset contributed by displaced ANCESTOR item(s) (see `parentList` above).
+     * `{0,0}` outside of that (the overwhelmingly common case). Kept as a SUM of independent
+     * per-source contributions, not a single overwritten value: while the pointer hovers a
+     * FOREIGN (non-origin) list nested inside the origin's own displaced item, up to two ancestor
+     * sessions can be displacing this list at once — the origin's (frozen, still active further
+     * up) and that foreign list's own — and one clearing its contribution on release must not
+     * wipe out the other's, still-active, contribution.
+     */
+    ancestorContributions = new Map();
+    ancestorOffset = { x: 0, y: 0 };
+    /** Entries this list itself pushed via a one-time placeholder-insertion reflow (see below). */
+    reflowContributions = new Map();
+    /** How many enclosing drop lists this one is nested inside. Root lists are depth 0. */
+    get depth() {
+        let d = 0;
+        for (let p = this.parentList; p; p = p.parentList)
+            d++;
+        return d;
+    }
+    _registerChild(child) {
+        child.parentList = this;
+        this.childLists.add(child);
+    }
+    _unregisterChild(child) {
+        if (child.parentList === this)
+            child.parentList = null;
+        this.childLists.delete(child);
+    }
+    /**
+     * One ancestor SESSION's contribution to this list's total displacement just changed (or
+     * cleared, `{0,0}`). `source` identifies WHICH session — the list whose own item is doing the
+     * displacing — so that this list's own recomputed total is a SUM across every currently-active
+     * source, and cascades the SAME (source, offset) pair on to every nested list at any depth
+     * unchanged, so a list several levels down stays hit-testable at its true on-screen position
+     * regardless of which ancestor(s) are currently sorting.
+     */
+    _setAncestorOffset(source, offset) {
+        const prev = this.ancestorContributions.get(source);
+        if (prev && prev.x === offset.x && prev.y === offset.y)
+            return;
+        if (offset.x === 0 && offset.y === 0)
+            this.ancestorContributions.delete(source);
+        else
+            this.ancestorContributions.set(source, offset);
+        let x = 0;
+        let y = 0;
+        for (const o of this.ancestorContributions.values()) {
+            x += o.x;
+            y += o.y;
+        }
+        if (x === this.ancestorOffset.x && y === this.ancestorOffset.y)
+            return; // no net change
+        this.ancestorOffset = { x, y };
+        for (const child of this.childLists)
+            child._setAncestorOffset(source, offset);
+    }
+    /** Which of this list's DIRECT nested lists live inside `el`, notified of its new offset. */
+    propagateOffset(el, offset) {
+        for (const child of this.childLists) {
+            if (el.contains(child.el))
+                child._setAncestorOffset(this, offset);
+        }
+    }
+    /** Rects, right now, of every `other` entry that contains one of this list's nested lists. */
+    trackedEntryRects(others) {
+        const map = new Map();
+        for (const child of this.childLists) {
+            for (const el of others) {
+                if (el.contains(child.el)) {
+                    if (!map.has(el))
+                        map.set(el, el.getBoundingClientRect());
+                    break;
+                }
+            }
+        }
+        return map;
+    }
+    /** Turns the real reflow a fresh placeholder insertion just caused into ordinary offsets. */
+    propagateReflow(before) {
+        for (const [el, prev] of before) {
+            const now = el.getBoundingClientRect();
+            const dx = now.left - prev.left;
+            const dy = now.top - prev.top;
+            if (dx || dy) {
+                this.propagateOffset(el, { x: dx, y: dy });
+                this.reflowContributions.set(el, { x: dx, y: dy });
+            }
+        }
+    }
     addItem(item) {
         this._draggables.add(item);
-        this.publishDragItems();
     }
     removeItem(item) {
         this._draggables.delete(item);
-        this.publishDragItems();
     }
     isConnectedTo(other) {
         if (other === this)
@@ -639,76 +1475,322 @@ 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 (or the moment a nested
+     * list becomes a candidate mid-drag). `measureHit` reads live `getBoundingClientRect()`s,
+     * which already include any `translate3d` an ancestor item's displacement has applied — so if
+     * this list is currently offset (nested inside a sibling that sorting is displacing right
+     * now), the measurement is normalized back to the zero-offset frame `_containsPoint` expects,
+     * by subtracting that offset straight back out. Without this, entering a nested list while
+     * its ancestor is mid-displacement would double-count the offset on every check afterwards.
+     */
+    _cacheGeometry() {
+        const hit = measureHit(this.el);
+        if (hit && (this.ancestorOffset.x || this.ancestorOffset.y)) {
+            hit.box.left -= this.ancestorOffset.x;
+            hit.box.right -= this.ancestorOffset.x;
+            hit.box.top -= this.ancestorOffset.y;
+            hit.box.bottom -= this.ancestorOffset.y;
+        }
+        this.hit = hit;
+        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;
+        // The list's own box shifts with any ancestor displacement; a clip window (a scroll/overflow
+        // ancestor) normally does not, since it is not itself an item being sorted, so it is tested
+        // against the raw pointer.
+        const d0 = hit.frame.delta();
+        if (!boxContains(hit.box, x - this.ancestorOffset.x + d0.x, y - this.ancestorOffset.y + d0.y))
+            return false;
+        for (const clip of hit.clips) {
+            const 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) {
+            // Resuming a session that's still alive: either this is the origin list (its slot is
+            // always kept), or the pointer dove into one of its own nested lists and came back up
+            // (frozen rather than released in `exit()`, see there).
+            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. */
+    /**
+     * The pointer truly left this list (as opposed to moving deeper into one of its own nested
+     * lists — see `DragRef`'s chain tracking, which never calls `exit()` for a list that remains
+     * an ancestor of the new target, so this always means "left this list's territory").
+     */
+    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();
+    /**
+     * The pointer dove into one of this list's own nested lists: this list is no longer the
+     * innermost target, but it isn't being left either — its placeholder and sibling displacement
+     * stay exactly as they are (avoids a snap-back-then-forward flicker), only the "currently
+     * hovered" bookkeeping (and its visual highlight) is cleared. `DragRef`'s chain tracking calls
+     * this instead of `exit()` for every list that remains an ancestor of the new target.
+     */
+    _freeze() {
+        this.hovered = false;
+        this.el.classList.remove('ngx-drop-list--active');
+    }
+    /**
+     * 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;
+        // `ancestorOffset` is deliberately NOT reset here: `enter()` calls this unconditionally as a
+        // safety-clear on every (re-)entry, including while a currently-active ancestor transform
+        // still legitimately applies to this list. It self-corrects when that transform actually
+        // reverts to zero, via the `onOffsetChange` cascade (see `_setAncestorOffset`), which also
+        // covers the true end of a drag (the displaced list's own session disposes and reports
+        // every entry back to `{0,0}`).
+    }
+    /** Dispose the sort session, placeholder and drag ownership. */
+    releaseSession(drag) {
+        if (drag && this.activeDrag && this.activeDrag !== drag)
+            return;
+        this.session?.dispose();
+        this.session = null;
+        if (this.reflowContributions.size) {
+            // The one-time reflow from this list's own placeholder insertion (see `propagateReflow`)
+            // never went through the session's own `applied` map, so its `dispose()` above cannot
+            // have cleared it — do that here instead, or it would linger as a stale contribution.
+            for (const [el] of this.reflowContributions)
+                this.propagateOffset(el, { x: 0, y: 0 });
+            this.reflowContributions.clear();
+        }
+        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);
+            this.lockPlaceholderGeometry(drag, ph, drag.start);
+        }
+        else {
+            ph.detach();
+            // Only the "other" entries that contain a nested list are worth measuring (usually none,
+            // or very few, even in a large tree): inserting the placeholder is a REAL DOM node, so it
+            // shifts later siblings via ordinary CSS reflow, not `translate3d` — a one-time event this
+            // list's own SortSession never reports through `onOffsetChange`, since (being sized and
+            // positioned by `foreignInsertionReference` to already match where it belongs) it never
+            // needs to actually transform anything afterwards. Measuring the small tracked set just
+            // before and after the insertion turns that one-time reflow into an ordinary ancestor
+            // contribution, exactly like any other displaced entry.
+            const tracked = this.childLists.size ? this.trackedEntryRects(others) : null;
+            const reference = this.foreignInsertionReference(others, pointer, axis, rtl);
+            ph.attach(this.el, drag.el, reference);
+            // Sized to its final footprint BEFORE measuring the reflow it causes: an unsized clone
+            // (still near-zero height) wouldn't have pushed `others` at all yet.
+            this.lockPlaceholderGeometry(drag, ph, drag.start);
+            if (tracked)
+                this.propagateReflow(tracked);
+            spacer = makeSpacer(this.el);
+            if (spacer)
+                this.el.insertBefore(spacer, reference ?? ph.element);
+        }
+        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,
+            onOffsetChange: this.childLists.size
+                ? (el, offset) => this.propagateOffset(el, offset)
+                : undefined,
+        });
+        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._cacheGeometry();
+        }
+    }
+    /**
+     * 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;
-            const ref = Array.from(elements).find((candidate) => candidate.el === node);
+            if (node.classList.contains('ngx-drag-preview'))
+                continue;
+            const ref = byElement.get(node);
             if (!ref)
                 continue;
             if (ref === item)
@@ -717,44 +1799,67 @@ 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');
-    }
-    /**
-     * 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;
+    lockPlaceholderGeometry(drag, ph, rect) {
+        const placeholder = ph.element;
+        const set = (k, v) => placeholder.style.setProperty(k, v, 'important');
+        placeholder.style.zIndex = '';
+        placeholder.style.removeProperty('will-change');
+        if (ph.custom)
+            return;
+        placeholder.style.display = drag.originalDisplay;
+        // Occupies exactly the dragged item's footprint, so the gap reserved in the list — and the
+        // sibling-displacement math derived from it — matches the item's real size.
+        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');
     }
-    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 };
 }
 
 /**
@@ -782,6 +1887,21 @@ class DragDropService {
     ...(ngDevMode ? [{ debugName: "dropLists" }] : /* istanbul ignore next */ []));
     activeDrag = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeDrag" }] : /* istanbul ignore next */ []));
+    /**
+     * DOM-position registries, used to find the nearest enclosing list/group by walking real
+     * ancestor elements instead of Angular's element-injector tree.
+     *
+     * This matters for `ngTemplateOutlet`-based recursive trees (a list of items whose own
+     * children are rendered by re-invoking the SAME `<ng-template>`, as in a tree/outliner UI):
+     * each invocation gets a FRESH embedded view whose injector context is wherever the outlet
+     * was written in the template, not wherever its content ends up in the DOM. So `inject(TOKEN,
+     * {skipSelf})` from one recursion level can never see a provider from another level — the
+     * only fix within Angular's own DI is to manually thread `ngTemplateOutletInjector` through
+     * every recursive call, which isn't reasonable to require of every consumer of this library.
+     * A plain DOM walk has no such limitation: it only cares where elements actually ended up.
+     */
+    listsByEl = new Map();
+    groupsByEl = new Map();
     registerDragItem(ref) {
         this.drags.update((items) => (items.includes(ref) ? items : [...items, ref]));
     }
@@ -792,9 +1912,37 @@ class DragDropService {
     }
     registerDropList(ref) {
         this.dropLists.update((items) => (items.includes(ref) ? items : [...items, ref]));
+        if (ref.el)
+            this.listsByEl.set(ref.el, ref);
     }
     removeDropList(ref) {
         this.dropLists.update((items) => items.filter((x) => x !== ref));
+        if (ref.el && this.listsByEl.get(ref.el) === ref)
+            this.listsByEl.delete(ref.el);
+    }
+    registerGroup(el, ref) {
+        this.groupsByEl.set(el, ref);
+    }
+    removeGroup(el) {
+        this.groupsByEl.delete(el);
+    }
+    /** Nearest registered drop list starting at (and including) `start`, walking up the DOM. */
+    findAncestorDropList(start) {
+        for (let n = start; n; n = n.parentElement) {
+            const found = this.listsByEl.get(n);
+            if (found)
+                return found;
+        }
+        return null;
+    }
+    /** Nearest registered drop-list group starting at (and including) `start`, walking up the DOM. */
+    findAncestorGroup(start) {
+        for (let n = start; n; n = n.parentElement) {
+            const found = this.groupsByEl.get(n);
+            if (found)
+                return found;
+        }
+        return null;
     }
     begin(ref) {
         this.activeDrag.set(ref);
@@ -810,23 +1958,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' });
@@ -836,76 +2002,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-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();
-    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 });
-}
-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 }],
-                }]
-        }] });
-
-const NGX_DROPLIST = new InjectionToken('ngx-drop-list');
-class NgxDropList {
-    el;
-    _ref = new DropListRef();
-    set data(value) {
-        this._ref.data = value;
-    }
-    set connectedTo(value) {
-        this._ref.connectedTo = value ?? [];
-    }
-    set disableSort(value) {
-        this._ref.disableSort = value === true;
-    }
-    drop = new EventEmitter();
-    service = inject(DragDropService);
-    group = inject(NGX_DROPLIST_GROUP, { optional: true, skipSelf: true });
-    constructor(el) {
-        this.el = el;
-    }
-    ngOnInit() {
-        this._ref.el = this.el.nativeElement;
-        this._ref.dropListGroup = this.group?._ref ?? null;
-        // 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.service.registerDropList(this._ref);
-    }
-    ngOnDestroy() {
-        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 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropList, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[NgxDropList],[ngxDropList]',
-                    providers: [{ provide: NGX_DROPLIST, useExisting: NgxDropList }],
-                    host: { class: 'ngx-drop-list' },
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{
-                type: Input,
-                args: ['data']
-            }], connectedTo: [{
-                type: Input
-            }], disableSort: [{
-                type: Input
-            }], drop: [{
-                type: Output
-            }] } });
-
 /**
  * Auto-scrolls the nearest scrollable ancestor (or window) while the pointer
  * is dragged near the edge of the scrollable viewport. Direction-agnostic —
@@ -997,11 +2093,12 @@ 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 {
     host;
-    renderer;
     disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** Element whose rect constrains the drag. Now actually enforced. */
@@ -1035,8 +2132,6 @@ class NgxDraggable {
     ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
     doc = inject(DOCUMENT);
     service = inject(DragDropService);
-    list = inject(NGX_DROPLIST, { optional: true, skipSelf: true });
-    group = inject(NGX_DROPLIST_GROUP, { optional: true, skipSelf: true });
     scroller = new AutoScroller();
     down = false;
     start = { x: 0, y: 0 };
@@ -1047,14 +2142,16 @@ class NgxDraggable {
     removeUp;
     removeKeydown;
     removeEscape;
+    removeCancel;
+    removeLostCapture;
     scrollTarget = window;
     lastScroll = { left: 0, top: 0 };
     lastWindowScroll = { left: 0, top: 0 };
     removeContainerScroll;
     removeWindowScroll;
-    constructor(host, renderer) {
+    renderer = inject(Renderer2);
+    constructor(host) {
         this.host = host;
-        this.renderer = renderer;
         effect(() => {
             this._ref.el = this.dragRootElement()
                 ? (this.host.nativeElement.closest(this.dragRootElement()) ?? this.host.nativeElement)
@@ -1067,9 +2164,15 @@ class NgxDraggable {
             : this.host.nativeElement;
         this._ref.boundary = this.boundary();
         this._ref.lockAxis = this.lockAxis();
-        this._ref.dropListGroup = this.group?._ref;
+        // Found by walking the real DOM, not Angular's element-injector tree — see the matching
+        // comment in `ngx-drop-list.directive.ts` for why: a draggable rendered by a recursively
+        // invoked `ngTemplateOutlet` needs this just as much as a nested list does.
+        const parentEl = this.host.nativeElement.parentElement;
+        const list = this.service.findAncestorDropList(parentEl);
+        this._ref.dropListGroup = list?.dropListGroup ?? this.service.findAncestorGroup(parentEl);
+        this._ref.service = this.service;
         this._ref.init();
-        this._ref.withDropList(this.list?._ref ?? null);
+        this._ref.withDropList(list ?? null);
         this.service.registerDragItem(this._ref);
         this.removeDown = this.renderer.listen(this.host.nativeElement, 'pointerdown', (e) => this.pointerDown(e));
         this.removeKeydown = this.renderer.listen(this.host.nativeElement, 'keydown', (e) => this.keyDown(e));
@@ -1080,7 +2183,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 +2198,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 +2216,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 +2290,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 +2304,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 +2327,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 +2347,21 @@ 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);
@@ -1256,7 +2391,7 @@ class NgxDraggable {
         return (target instanceof HTMLElement &&
             !!target.closest('button,a,input,textarea,select,[data-no-drag]'));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxDraggable, isStandalone: true, selector: "[NgxDraggable],[ngxDraggable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, dragRootElement: { classPropertyName: "dragRootElement", publicName: "dragRootElement", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, lockAxis: { classPropertyName: "lockAxis", publicName: "lockAxis", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", dragRootElement: "dragRootElementChange", dragHandle: "dragHandleChange", dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd" }, host: { properties: { "style.touch-action": "\"none\"", "attr.tabindex": "disabled() ? null : 0", "attr.aria-grabbed": "dragging()", "class.disable-drag": "disabled()" }, classAttribute: "ngx-draggable" }, providers: [{ provide: NGX_DRAGGABLE, useExisting: NgxDraggable }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, decorators: [{
@@ -1272,7 +2407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         '[class.disable-drag]': 'disabled()',
                     },
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], dragRootElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragRootElement", required: false }] }, { type: i0.Output, args: ["dragRootElementChange"] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }, { type: i0.Output, args: ["dragHandleChange"] }], lockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAxis", required: false }] }], dragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragThreshold", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], data: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], dragRootElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragRootElement", required: false }] }, { type: i0.Output, args: ["dragRootElementChange"] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }, { type: i0.Output, args: ["dragHandleChange"] }], lockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAxis", required: false }] }], dragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragThreshold", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], data: [{
                 type: Input,
                 args: ['data']
             }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragMove: [{ type: i0.Output, args: ["dragMove"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }] } });
@@ -1661,6 +2796,9 @@ class NgxPlaceholder {
         this.tpl = tpl;
         this._ref.tpl = tpl;
         this._ref.dropList = this.list?._ref;
+        // Lets the embedded view join Angular's change-detection tree (matters in zoneless apps,
+        // and for app-stability tracking) instead of being rendered once and left dangling.
+        this._ref.appRef = inject(ApplicationRef);
     }
     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 });
@@ -1673,6 +2811,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
+const NGX_DROPLIST = new InjectionToken('ngx-drop-list');
+class NgxDropList {
+    el;
+    _ref = new DropListRef();
+    set data(value) {
+        this._ref.data = value;
+    }
+    set connectedTo(value) {
+        this._ref.connectedTo = value ?? [];
+    }
+    set disableSort(value) {
+        this._ref.disableSort = value === true;
+    }
+    drop = new EventEmitter();
+    customPlaceholder;
+    sub;
+    service = inject(DragDropService);
+    constructor(el) {
+        this.el = el;
+    }
+    ngOnInit() {
+        this._ref.el = this.el.nativeElement;
+        // Found by walking the real DOM (not Angular's element-injector tree): a list rendered by a
+        // recursively-invoked `ngTemplateOutlet` (a tree/outliner UI, where every level re-uses the
+        // SAME `<ng-template>`) gets a fresh injector context per invocation, so `inject(TOKEN,
+        // {skipSelf})` can never see a provider from another recursion level — the DOM position is
+        // what actually determines nesting/grouping for this library's purposes anyway.
+        const parentEl = this.el.nativeElement.parentElement;
+        const group = this.service.findAncestorGroup(parentEl);
+        const parent = this.service.findAncestorDropList(parentEl);
+        this._ref.dropListGroup = group ?? null;
+        group?.add(this._ref);
+        parent?._registerChild(this._ref);
+        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._ref.parentList?._unregisterChild(this._ref);
+        this._ref.dropListGroup?.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 }], 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,
+            args: [{
+                    selector: '[NgxDropList],[ngxDropList]',
+                    providers: [{ provide: NGX_DROPLIST, useExisting: NgxDropList }],
+                    host: { class: 'ngx-drop-list' },
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], connectedTo: [{
+                type: Input
+            }], disableSort: [{
+                type: Input
+            }], drop: [{
+                type: Output
+            }], customPlaceholder: [{
+                type: ContentChild,
+                args: [NgxPlaceholder, {
+                        descendants: true,
+                    }]
+            }] } });
+
+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));
+    service = inject(DragDropService);
+    ngOnInit() {
+        // Registered by DOM element (not just provided via DI) so a list nested inside a recursive
+        // `ngTemplateOutlet` tree can still find this group by walking its real ancestors — see the
+        // comment on `DragDropService`'s registries for why DI alone can't do this.
+        this.service.registerGroup(this.el.nativeElement, this._ref);
+    }
+    ngOnDestroy() {
+        this._ref.lists.clear();
+        this.service.removeGroup(this.el.nativeElement);
+    }
+    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 });
+}
+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 }],
+                }]
+        }] });
+
 function moveItemInArray(array, from, to) {
     const f = clamp(from, array.length - 1);
     const t = clamp(to, array.length - 1);