ngx-virtual-dnd 3.2.1 → 3.4.0

package/fesm2022/ngx-virtual-dnd.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, InjectionToken, computed, effect, Injectable, inject, NgZone, input, ChangeDetectionStrategy, Component, DestroyRef, afterNextRender, ElementRef, Injector, PLATFORM_ID, untracked, afterRenderEffect, viewChild, Directive, isDevMode, output, contentChild, EnvironmentInjector, TemplateRef, ViewContainerRef } from '@angular/core';
+import { signal, InjectionToken, Injectable, inject, computed, effect, NgZone, DestroyRef, input, ChangeDetectionStrategy, Component, afterNextRender, ElementRef, Injector, EnvironmentInjector, PLATFORM_ID, viewChild, ViewContainerRef, untracked, isDevMode, createComponent, afterRenderEffect, Directive, output, contentChild, ErrorHandler, TemplateRef } from '@angular/core';
 import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 
 /**
@@ -75,9 +75,16 @@ class FixedHeightStrategy {
         // No-op for fixed height strategy
     }
     setItemKeys(keys) {
-        const prevCount = this.#itemCount;
-        this.#itemCount = keys.length;
-        if (prevCount !== this.#itemCount) {
+        this.setItemCount(keys.length);
+    }
+    /**
+     * Set the item count: all this strategy needs of the keys, so the library's containers skip
+     * computing them.
+     * @internal
+     */
+    setItemCount(count) {
+        if (this.#itemCount !== count) {
+            this.#itemCount = count;
             this.#version.update((v) => v + 1);
         }
     }
@@ -108,8 +115,15 @@ class FixedHeightStrategy {
  * Cache for measured item heights in dynamic virtual scrolling.
  *
  * Tracks heights by trackBy key (survives reordering). Maintains a cumulative
- * offset prefix-sum array, lazily rebuilt on height change. Binary search
- * O(log N) for scroll-to-index lookups.
+ * offset prefix-sum array and binary searches it for scroll-to-index lookups.
+ *
+ * The prefix sums are brought up to date lazily and only as far as a lookup needs:
+ * a height change invalidates the offsets from that item on, and the next lookup
+ * recomputes them up to the item it asks about. Measurements land on the rendered
+ * rows and lookups ask about the rows in view, so while scrolling a long list each
+ * frame recomputes a few rows' offsets instead of the whole list. The total height
+ * is kept as a running sum, so the spacer height needs no prefix sums between key
+ * changes.
  *
  * This is a plain class (not a service) — one instance per virtual scroll.
  */
@@ -118,12 +132,21 @@ class HeightCache {
     #estimatedHeight;
     /** Map from trackBy key to measured height */
     #heightsByKey = new Map();
-    /** Current ordered list of trackBy keys (index-aligned with item array) */
+    /**
+     * Current ordered list of trackBy keys (index-aligned with item array). A copy of the array
+     * given to `setKeys`, so a caller that changes its array in place and passes it again is seen.
+     */
     #keys = [];
+    /** Index of each key's first occurrence in `#keys` */
+    #firstIndexByKey = new Map();
+    /** Whether a key occurs more than once in `#keys` (a trackBy misconfiguration) */
+    #hasDuplicateKeys = false;
     /** Prefix sums: offsets[i] = cumulative height of items 0..i-1 */
     #offsets = [];
-    /** Whether offsets need to be rebuilt */
-    #dirty = true;
+    /** Number of leading `#offsets` entries that are up to date */
+    #validCount = 0;
+    /** Sum of the heights of all items in `#keys`, or null until it is next needed */
+    #totalHeight = 0;
     /** Index excluded during same-list drag (-1 = none) */
     #excludedIndex = -1;
     constructor(estimatedHeight) {
@@ -142,21 +165,31 @@ class HeightCache {
      * This must be called whenever items change order or the array changes.
      */
     setKeys(keys) {
-        const sameOrder = keys.length === this.#keys.length &&
-            keys.every((key, index) => Object.is(key, this.#keys[index]));
-        const nextKeySet = new Set(keys);
-        let pruned = false;
-        for (const key of this.#heightsByKey.keys()) {
-            if (!nextKeySet.has(key)) {
-                this.#heightsByKey.delete(key);
-                pruned = true;
-            }
-        }
-        if (sameOrder && !pruned) {
-            return false;
-        }
-        this.#keys = keys;
-        this.#dirty = true;
+        // The same keys in the same order (an items change that moved no item) leave the offsets and
+        // the key index valid: only heights recorded for keys not in the list are forgotten
+        if (keys.length === this.#keys.length &&
+            keys.every((key, index) => Object.is(key, this.#keys[index]))) {
+            return this.#forgetHeightsNotIn(this.#firstIndexByKey);
+        }
+        // Filled from the end, so each key keeps its first index. It also serves as the set of keys
+        // for pruning, so building it costs no extra pass.
+        const firstIndexByKey = new Map();
+        for (let i = keys.length - 1; i >= 0; i--) {
+            firstIndexByKey.set(keys[i], i);
+        }
+        this.#forgetHeightsNotIn(firstIndexByKey);
+        // Offsets before the first key that changed position are still valid
+        let firstChanged = 0;
+        const commonLength = Math.min(keys.length, this.#keys.length);
+        while (firstChanged < commonLength && Object.is(keys[firstChanged], this.#keys[firstChanged])) {
+            firstChanged++;
+        }
+        this.#keys = keys.slice();
+        this.#firstIndexByKey = firstIndexByKey;
+        this.#hasDuplicateKeys = firstIndexByKey.size < keys.length;
+        this.#offsets.length = keys.length;
+        this.#validCount = Math.min(this.#validCount, firstChanged);
+        this.#totalHeight = null;
         return true;
     }
     /**
@@ -168,7 +201,21 @@ class HeightCache {
         if (existing === height)
             return false;
         this.#heightsByKey.set(key, height);
-        this.#dirty = true;
+        // Only items at or after the key's first position move
+        const firstIndex = this.#firstIndexByKey.get(key);
+        if (firstIndex !== undefined) {
+            this.#validCount = Math.min(this.#validCount, firstIndex);
+            const previous = existing ?? this.#estimatedHeight;
+            // A key listed twice, or a non-finite height (which a running sum can't take back out),
+            // leaves the total to be recomputed from the offsets
+            this.#totalHeight =
+                this.#totalHeight === null ||
+                    this.#hasDuplicateKeys ||
+                    !Number.isFinite(height) ||
+                    !Number.isFinite(previous)
+                    ? null
+                    : this.#totalHeight + height - previous;
+        }
         return true;
     }
     /**
@@ -186,18 +233,18 @@ class HeightCache {
      * Accounts for the excluded index during same-list drag.
      */
     getOffset(index) {
-        this.#rebuildIfDirty();
+        const count = this.#keys.length;
         if (this.#excludedIndex < 0) {
             // No exclusion — direct lookup
-            return index < this.#offsets.length ? this.#offsets[index] : this.#getTotalHeightRaw();
+            return index < count ? this.#offsetAt(index) : this.#getExactTotalHeight();
         }
         // With exclusion: subtract the excluded item's height from offsets
         // at or after the excluded index
         if (index <= this.#excludedIndex) {
-            return this.#offsets[index] ?? 0;
+            return this.#offsetAt(index) ?? 0;
         }
         // index > excludedIndex: offset = raw offset for (index) minus excluded item's height
-        const rawOffset = index < this.#offsets.length ? this.#offsets[index] : this.#getTotalHeightRaw();
+        const rawOffset = index < count ? this.#offsetAt(index) : this.#getExactTotalHeight();
         const excludedHeight = this.getHeight(this.#excludedIndex);
         return rawOffset - excludedHeight;
     }
@@ -208,7 +255,6 @@ class HeightCache {
      * Uses O(1) prefix-sum lookup when possible.
      */
     getTotalHeight(itemCount) {
-        this.#rebuildIfDirty();
         if (itemCount <= 0)
             return 0;
         const keyCount = this.#keys.length;
@@ -219,20 +265,24 @@ class HeightCache {
             return this.#getTotalHeightRaw() + (itemCount - keyCount) * this.#estimatedHeight;
         }
         // Partial: prefix sum up to itemCount
-        return this.#offsets[itemCount - 1] + this.getHeight(itemCount - 1);
+        return this.#offsetAt(itemCount - 1) + this.getHeight(itemCount - 1);
     }
     /**
      * Find the first visible index for a given scrollTop.
      * Uses binary search on the prefix-sum offsets (excluding the excluded item).
      */
     findFirstVisibleIndex(scrollTop) {
-        this.#rebuildIfDirty();
         const count = this.#keys.length;
         if (count === 0)
             return 0;
-        // Binary search for the first item whose bottom edge is past scrollTop
+        // Offsets after the excluded item sit its height higher than their raw values, so
+        // bring the raw offsets up to date just past scrollTop plus that height
+        const excludedHeight = this.#excludedIndex >= 0 ? this.getHeight(this.#excludedIndex) : 0;
+        this.#extendPastOffset(scrollTop + excludedHeight);
+        // Binary search for the last item whose top is at or above scrollTop. Items past the
+        // up-to-date offsets start below scrollTop, so the search can stop there.
         let lo = 0;
-        let hi = count - 1;
+        let hi = Math.min(count, this.#validCount) - 1;
         let result = 0;
         while (lo <= hi) {
             const mid = (lo + hi) >>> 1;
@@ -278,7 +328,6 @@ class HeightCache {
      * Used for drag index calculations with variable heights.
      */
     findIndexAtOffset(offset) {
-        this.#rebuildIfDirty();
         const count = this.#keys.length;
         if (count === 0)
             return 0;
@@ -295,7 +344,7 @@ class HeightCache {
         if (excludedIndex < 0 || excludedIndex >= count) {
             return this.#findFirstIndexWithBottomPastOffset(offset, 0, count - 1);
         }
-        const excludedOffset = this.#offsets[excludedIndex];
+        const excludedOffset = this.#offsetAt(excludedIndex);
         if (offset < excludedOffset && excludedIndex > 0) {
             return this.#findFirstIndexWithBottomPastOffset(offset, 0, excludedIndex - 1);
         }
@@ -316,6 +365,17 @@ class HeightCache {
         this.#excludedIndex = nextIndex;
         return true;
     }
+    /** Forget the heights of keys not in `keys`. Returns whether it forgot any. */
+    #forgetHeightsNotIn(keys) {
+        let forgot = false;
+        for (const key of this.#heightsByKey.keys()) {
+            if (!keys.has(key)) {
+                this.#heightsByKey.delete(key);
+                forgot = true;
+            }
+        }
+        return forgot;
+    }
     /**
      * Find first logical index in [start, end] whose bottom edge is past offset.
      * Returns one-past-end when no match is found.
@@ -324,8 +384,15 @@ class HeightCache {
         if (start > end) {
             return start;
         }
+        // Items past the up-to-date offsets start below `offset`, so their bottoms are past it
+        // too: the answer is at or before the first of them
+        this.#extendPastOffset(offset);
+        const lastValid = this.#validCount - 1;
+        if (start > lastValid) {
+            return start;
+        }
         let lo = start;
-        let hi = end;
+        let hi = Math.min(end, lastValid);
         let result = end + 1;
         while (lo <= hi) {
             const mid = (lo + hi) >>> 1;
@@ -340,27 +407,64 @@ class HeightCache {
         }
         return result;
     }
-    /** Raw total height without exclusion */
+    /**
+     * Raw total height without exclusion, from the running sum. With fractional heights it can
+     * differ from the prefix sums by rounding, so it is only for the spacer height.
+     */
     #getTotalHeightRaw() {
-        this.#rebuildIfDirty();
-        const len = this.#offsets.length;
-        if (len === 0)
+        if (this.#keys.length === 0)
             return 0;
-        return this.#offsets[len - 1] + this.getHeight(len - 1);
+        return this.#totalHeight ?? this.#getExactTotalHeight();
     }
-    /** Rebuild prefix-sum array if dirty */
-    #rebuildIfDirty() {
-        if (!this.#dirty)
-            return;
-        this.#dirty = false;
+    /**
+     * Raw total height computed like the offsets (the offset one past the last item), so it
+     * compares exactly with them. Re-syncs the running sum.
+     */
+    #getExactTotalHeight() {
         const count = this.#keys.length;
-        if (this.#offsets.length !== count) {
-            this.#offsets = new Array(count);
+        if (count === 0)
+            return 0;
+        this.#extendTo(count, Infinity);
+        this.#totalHeight = this.#offsets[count - 1] + this.getHeight(count - 1);
+        return this.#totalHeight;
+    }
+    /** The raw offset of an item, bringing the prefix sums up to date as far as it */
+    #offsetAt(index) {
+        if (index >= this.#validCount) {
+            this.#extendTo(index + 1, Infinity);
+        }
+        return this.#offsets[index];
+    }
+    /**
+     * Bring the prefix sums up to date until the last up-to-date item starts past `offset`, or
+     * to the end of the list.
+     */
+    #extendPastOffset(offset) {
+        this.#extendTo(this.#keys.length, offset);
+    }
+    /**
+     * Bring the first `count` prefix sums up to date, stopping early after the first item that
+     * starts past `stopPastOffset`.
+     */
+    #extendTo(count, stopPastOffset) {
+        const end = Math.min(count, this.#keys.length);
+        let i = this.#validCount;
+        if (i >= end || (i > 0 && this.#offsets[i - 1] > stopPastOffset)) {
+            return;
         }
-        let cumulative = 0;
-        for (let i = 0; i < count; i++) {
+        let cumulative = i === 0 ? 0 : this.#offsets[i - 1] + this.getHeight(i - 1);
+        while (i < end) {
             this.#offsets[i] = cumulative;
-            cumulative += this.getHeight(i);
+            i++;
+            if (cumulative > stopPastOffset) {
+                break;
+            }
+            cumulative += this.getHeight(i - 1);
+        }
+        this.#validCount = i;
+        if (i === this.#keys.length) {
+            // Re-sync the running total with the prefix sums, dropping floating-point drift
+            this.#totalHeight = this.#offsets[i - 1] + this.getHeight(i - 1);
         }
     }
 }
@@ -487,6 +591,168 @@ const DEFAULT_DROP_EASING = 'cubic-bezier(0.2, 0, 0, 1)';
  */
 const VDND_ANIMATION_CONFIG = new InjectionToken('VDND_ANIMATION_CONFIG');
 
+/**
+ * Registry of the rendered droppables, keyed by group and by ID.
+ *
+ * `DroppableDirective` registers its element once rendered and unregisters on destroy, so drag
+ * code reads the droppables of one group instead of querying the whole document for
+ * `data-droppable-*` attributes. That keeps lookups proportional to the group, not the page,
+ * and finds droppables a document query cannot reach (inside shadow roots). It also delivers
+ * a drop to its target the moment the drag ends (`DragStateService.endDrag`).
+ * @internal
+ */
+class DroppableRegistryService {
+    #byGroup = new Map();
+    #byId = new Map();
+    #listeners = new Set();
+    /**
+     * Register a droppable, with the handler that receives drops on it. Returns the function
+     * that unregisters it; calling that more than once is a no-op.
+     */
+    register(element, id, group, onDrop = null) {
+        const registration = { element, id, group, onDrop };
+        this.#add(this.#byGroup, group, registration);
+        if (id) {
+            this.#add(this.#byId, id, registration);
+        }
+        this.#notify(group);
+        let registered = true;
+        return () => {
+            if (!registered) {
+                return;
+            }
+            registered = false;
+            this.#remove(this.#byGroup, group, registration);
+            if (id) {
+                this.#remove(this.#byId, id, registration);
+            }
+            this.#notify(group);
+        };
+    }
+    /**
+     * The group's droppables that are in the document, in document order (the order they are
+     * painted in, which hit-testing relies on). Returns a new array.
+     *
+     * Sorted on every call rather than cached: a list moved in the DOM keeps its registration.
+     * Callers read it at drag start and on candidate changes, not per frame.
+     */
+    getGroup(group) {
+        const registrations = this.#byGroup.get(group);
+        if (!registrations) {
+            return [];
+        }
+        const elements = [];
+        for (const { element } of registrations) {
+            if (element.isConnected) {
+                elements.push(element);
+            }
+        }
+        return elements.sort(compareElements);
+    }
+    /**
+     * The droppable with this ID that is in the document, or null. If a re-render briefly
+     * leaves two with the same ID, returns the first in document order.
+     */
+    getById(id) {
+        return this.#firstById(id)?.element ?? null;
+    }
+    /**
+     * Hand an ended drag to the drop handler of its target (`activeDroppableId`), so a drop
+     * reaches exactly one droppable. IDs should be unique; if several connected droppables share
+     * it (briefly, while re-rendering), those in the source list's group come first, then
+     * document order, and the first that takes the drop gets it. Does nothing when the drag had
+     * no target or item, or the target is no longer registered.
+     */
+    deliverDrop(endedState) {
+        const targetId = endedState.activeDroppableId;
+        const registrations = targetId ? this.#byId.get(targetId) : undefined;
+        if (!registrations || !endedState.draggedItem) {
+            return;
+        }
+        const sourceId = endedState.sourceDroppableId;
+        const dragGroup = sourceId ? this.#firstById(sourceId)?.group : undefined;
+        const candidates = registrations
+            .filter((registration) => registration.onDrop && registration.element.isConnected)
+            .sort((a, b) => Number(b.group === dragGroup) - Number(a.group === dragGroup) ||
+            compareElements(a.element, b.element));
+        for (const { onDrop } of candidates) {
+            if (onDrop?.(endedState)) {
+                return;
+            }
+        }
+    }
+    /**
+     * Call `listener` with the group whenever a droppable of that group registers or
+     * unregisters. Returns the function that removes the listener.
+     */
+    onChange(listener) {
+        this.#listeners.add(listener);
+        return () => this.#listeners.delete(listener);
+    }
+    /** The registration with this ID that is in the document and first in document order. */
+    #firstById(id) {
+        const registrations = this.#byId.get(id);
+        if (!registrations) {
+            return null;
+        }
+        let match = null;
+        for (const registration of registrations) {
+            if (registration.element.isConnected &&
+                (!match || compareElements(registration.element, match.element) < 0)) {
+                match = registration;
+            }
+        }
+        return match;
+    }
+    #add(map, key, registration) {
+        const list = map.get(key);
+        if (list) {
+            list.push(registration);
+        }
+        else {
+            map.set(key, [registration]);
+        }
+    }
+    #remove(map, key, registration) {
+        const list = map.get(key);
+        const index = list?.indexOf(registration) ?? -1;
+        if (!list || index === -1) {
+            return;
+        }
+        list.splice(index, 1);
+        if (list.length === 0) {
+            map.delete(key);
+        }
+    }
+    #notify(group) {
+        for (const listener of this.#listeners) {
+            listener(group);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DroppableRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DroppableRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DroppableRegistryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+/**
+ * Negative when `a` comes before `b` in the document (an ancestor comes before its
+ * descendants). Across shadow roots the order is stable but implementation-defined.
+ */
+function compareElements(a, b) {
+    if (a === b) {
+        return 0;
+    }
+    const position = a.compareDocumentPosition(b);
+    return position & Node.DOCUMENT_POSITION_FOLLOWING ||
+        position & Node.DOCUMENT_POSITION_CONTAINED_BY
+        ? -1
+        : 1;
+}
+
 const INITIAL_CORE_STATE = {
     isDragging: false,
     draggedItem: null,
@@ -509,6 +775,7 @@ const INITIAL_CORE_STATE = {
  * draggedItem, etc.).
  */
 class DragStateService {
+    #droppableRegistry = inject(DroppableRegistryService);
     /** Core state signal — contains all rarely-changing properties */
     #state = signal(INITIAL_CORE_STATE, ...(ngDevMode ? [{ debugName: "#state" }] : []));
     /** High-frequency cursor position — updated at 60fps during pointer drag */
@@ -521,11 +788,13 @@ class DragStateService {
     #placeholderId = signal(null, ...(ngDevMode ? [{ debugName: "#placeholderId" }] : []));
     /** Index where the placeholder should be inserted — updated on each placeholder move */
     #placeholderIndex = signal(null, ...(ngDevMode ? [{ debugName: "#placeholderIndex" }] : []));
+    /** Whether the drag in progress is a touch drag (no cursor shows, so no grabbing cursor) */
+    #isTouchDrag = signal(false, ...(ngDevMode ? [{ debugName: "#isTouchDrag" }] : []));
     /** Snapshot captured synchronously immediately before the last drag state reset. */
     #endedDragState = signal(null, ...(ngDevMode ? [{ debugName: "#endedDragState" }] : []));
     /** Flag indicating if the last drag was cancelled (not dropped) */
     #wasCancelled = signal(false, ...(ngDevMode ? [{ debugName: "#wasCancelled" }] : []));
-    /** Whether the last drag was cancelled (for droppable to check before emitting drop) */
+    /** Whether the last drag was cancelled (a cancelled drag delivers no drop) */
     wasCancelled = this.#wasCancelled.asReadonly();
     /** Snapshot captured synchronously before the last drag reset. */
     endedDragState = this.#endedDragState.asReadonly();
@@ -562,37 +831,44 @@ class DragStateService {
     /** Target index during keyboard navigation */
     keyboardTargetIndex = this.#keyboardTargetIndex.asReadonly();
     constructor() {
-        // Inject cursor styles once (for consistent grabbing cursor during drag)
+        // Inject the grabbing cursor styles once. They target lists and items only: a rule matching
+        // every element (`body.vdnd-dragging *`, or a `*` anywhere right of the body class) restyles
+        // the whole document each time the body class changes, at drag start and at drop. Touch drags
+        // show no cursor, so they skip it.
         if (typeof document !== 'undefined') {
             const styleId = 'vdnd-cursor-styles';
             if (!document.getElementById(styleId)) {
                 const style = document.createElement('style');
                 style.id = styleId;
                 style.textContent = `
-          body.vdnd-dragging,
-          body.vdnd-dragging * {
+          body.vdnd-dragging:not(.vdnd-dragging-touch) .vdnd-droppable,
+          body.vdnd-dragging:not(.vdnd-dragging-touch) .vdnd-draggable {
             cursor: grabbing !important;
           }
         `;
                 document.head.appendChild(style);
             }
         }
-        // Effect to toggle body class during drag
+        // Effect to toggle the body classes during drag
         effect(() => {
             if (typeof document === 'undefined')
                 return;
             const isDragging = this.isDragging();
-            document.body.classList.toggle('vdnd-dragging', isDragging);
+            const classList = document.body.classList;
+            classList.toggle('vdnd-dragging', isDragging);
+            classList.toggle('vdnd-dragging-touch', isDragging && this.#isTouchDrag());
         });
     }
     /**
      * Start a drag operation.
      * `placeholderId` is deprecated with the `placeholderId` signal; the library passes `END_OF_LIST`.
+     * `isTouchDrag` marks a drag started by touch, which gets no grabbing cursor.
      */
-    startDrag(item, cursorPosition, grabOffset, lockAxis, activeDroppableId, placeholderId, placeholderIndex, sourceIndex, isKeyboardDrag, axisLockPosition) {
+    startDrag(item, cursorPosition, grabOffset, lockAxis, activeDroppableId, placeholderId, placeholderIndex, sourceIndex, isKeyboardDrag, axisLockPosition, isTouchDrag) {
         // Reset terminal drag metadata at start of new drag
         this.#endedDragState.set(null);
         this.#wasCancelled.set(false);
+        this.#isTouchDrag.set(isTouchDrag ?? false);
         this.#cursorPosition.set(cursorPosition ?? null);
         this.#keyboardTargetIndex.set(isKeyboardDrag ? (sourceIndex ?? 0) : null);
         this.#activeDroppableId.set(activeDroppableId ?? null);
@@ -662,32 +938,49 @@ class DragStateService {
         this.#placeholderIndex.set(placeholderIndex);
     }
     /**
-     * End the drag operation and reset state (normal drop).
+     * End the drag operation and reset state (normal drop), then deliver the drop: the target
+     * droppable (`activeDroppableId`) emits `drop` before this returns.
      */
     endDrag() {
-        this.#endedDragState.set(this.getStateSnapshot());
+        // Only a drag in progress ends. Again (e.g. from a drop handler) it would overwrite the
+        // ended drag, which the drop animation reads, with an empty one.
+        if (!this.#state().isDragging) {
+            return;
+        }
+        const endedState = this.getStateSnapshot();
+        this.#endedDragState.set(endedState);
         this.#wasCancelled.set(false);
-        this.#resetHighFrequencySignals();
+        this.#resetSignalsOutsideCoreState();
         this.#state.set(INITIAL_CORE_STATE);
+        // After the reset, so the drop handler sees the drag as over. Delivered here rather than
+        // from a droppable effect on the next change detection: by then the target may already
+        // be destroyed or re-created (a drop zone rendered only while dragging, a list replaced
+        // by a (dragEnd) handler), and every other droppable would have to tell a new drop from
+        // an old one.
+        this.#droppableRegistry.deliverDrop(endedState);
     }
     /**
      * Cancel the drag operation (escape key, disabled, etc.).
      */
     cancelDrag() {
+        if (!this.#state().isDragging) {
+            return;
+        }
         this.#endedDragState.set(this.getStateSnapshot());
         this.#wasCancelled.set(true);
-        this.#resetHighFrequencySignals();
+        this.#resetSignalsOutsideCoreState();
         this.#state.set(INITIAL_CORE_STATE);
     }
     /**
-     * Reset the dedicated high-frequency signals to their initial null state.
+     * Reset the signals kept outside the core state (high-frequency fields, touch flag) to idle.
      */
-    #resetHighFrequencySignals() {
+    #resetSignalsOutsideCoreState() {
         this.#cursorPosition.set(null);
         this.#keyboardTargetIndex.set(null);
         this.#activeDroppableId.set(null);
         this.#placeholderId.set(null);
         this.#placeholderIndex.set(null);
+        this.#isTouchDrag.set(false);
     }
     /**
      * Check if a specific droppable is currently active.
@@ -760,26 +1053,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-/**
- * Query by an exact attribute value without interpolating consumer data into a CSS selector.
- *
- * CSS attribute selectors need string-specific escaping that differs from `CSS.escape()`.
- * Filtering candidates by attribute presence avoids selector syntax errors for IDs containing
- * quotes, brackets, backslashes, or other selector-sensitive characters.
- */
-function queryByAttribute(root, attributeName, attributeValue) {
-    const candidates = root.querySelectorAll(`[${attributeName}]`);
-    for (const candidate of candidates) {
-        if (candidate.getAttribute(attributeName) === attributeValue) {
-            return candidate;
-        }
-    }
-    return null;
-}
-function queryAllByAttribute(root, attributeName, attributeValue) {
-    return Array.from(root.querySelectorAll(`[${attributeName}]`)).filter((candidate) => candidate.getAttribute(attributeName) === attributeValue);
-}
-
 /** The parent lookups stop below `<body>`: it and `<html>` never count as list or item. */
 function isPageRoot(element) {
     return element.tagName === 'BODY' || element.tagName === 'HTML';
@@ -790,6 +1063,7 @@ function isPageRoot(element) {
  */
 class PositionCalculatorService {
     #ngZone = inject(NgZone);
+    #registry = inject(DroppableRegistryService);
     /** Data attribute used to identify droppable elements */
     #DROPPABLE_ID_ATTR = 'data-droppable-id';
     /** Data attribute used to identify droppable groups */
@@ -802,6 +1076,15 @@ class PositionCalculatorService {
     #nearEdgeResult = { top: false, bottom: false, left: false, right: false };
     /** Active drag session rect snapshot, or null when no drag is in progress. */
     #session = null;
+    constructor() {
+        // A droppable (un)registering mid-drag makes the next hit-test re-read the candidates.
+        // Removed on destroy in case the service is provided below root.
+        const removeListener = this.#registry.onChange((group) => this.notifyCandidatesChanged(group));
+        inject(DestroyRef).onDestroy(() => {
+            removeListener();
+            this.endDragSession();
+        });
+    }
     /**
      * Begin a drag session: snapshot the candidate droppables for `groupName` and
      * their rects once, then watch for viewport changes (scroll/resize) that would
@@ -821,7 +1104,7 @@ class PositionCalculatorService {
         this.#session = {
             groupName,
             candidates,
-            rects: candidates.map((el) => this.#measureRect(el)),
+            rects: this.#measureRects(candidates, []),
             dirty: false,
             candidatesStale: false,
             onViewportChange,
@@ -867,10 +1150,11 @@ class PositionCalculatorService {
         }
     }
     /**
-     * Re-query the candidate droppable *list* for the active session and re-read their
-     * rects. Unlike {@link invalidateDroppableRects} (which only refreshes rects), this
-     * picks up droppables added or removed since the snapshot was captured at drag start —
-     * the frozen candidate list is otherwise blind to mid-drag mounts/unmounts.
+     * Re-read the candidate droppable *list* for the active session from the registry and
+     * re-read their rects. Unlike {@link invalidateDroppableRects} (which only refreshes
+     * rects), this picks up droppables added or removed since the snapshot was captured at
+     * drag start. Registration changes already trigger it on the next hit-test; this is the
+     * manual escape hatch.
      *
      * Safe to call when no session is active (no-op).
      */
@@ -880,19 +1164,18 @@ class PositionCalculatorService {
             return;
         }
         session.candidates = this.#queryDroppables(session.groupName);
-        session.rects = session.candidates.map((el) => this.#measureRect(el));
+        session.rects = this.#measureRects(session.candidates, []);
         session.dirty = false;
         session.candidatesStale = false;
         this.#observeCandidates(session);
     }
     /**
      * Signal that the set of droppables for `groupName` may have changed (a droppable
-     * registered or unregistered mid-drag). Defers the actual re-query to the next
-     * hit-test — where a removed element is already gone from the DOM and a newly added
-     * one has its data attributes applied — keeping this notification path cheap.
+     * registered or unregistered mid-drag). Defers the re-read to the next hit-test, keeping
+     * this notification path cheap.
      *
-     * Called by {@link DroppableDirective} lifecycle hooks. No-op when the active session
-     * belongs to a different group or no session is active.
+     * Called for every droppable registry change. No-op when the active session belongs to
+     * a different group or no session is active.
      */
     notifyCandidatesChanged(groupName) {
         if (this.#session && this.#session.groupName === groupName) {
@@ -922,23 +1205,20 @@ class PositionCalculatorService {
                 this.refreshCandidates();
             }
             else if (session.dirty) {
-                for (let i = 0; i < session.candidates.length; i++) {
-                    session.rects[i] = this.#measureRect(session.candidates[i]);
-                }
+                this.#measureRects(session.candidates, session.rects);
                 session.dirty = false;
             }
             return this.#hitTest(x, y, session.candidates, session.rects);
         }
         // No active session: one-shot geometric query (still avoids elementFromPoint).
         const candidates = this.#queryDroppables(groupName);
-        const rects = candidates.map((el) => this.#measureRect(el));
-        return this.#hitTest(x, y, candidates, rects);
+        return this.#hitTest(x, y, candidates, this.#measureRects(candidates, []));
     }
     /**
      * Look up a droppable element by its ID.
      *
-     * When a drag session is active, searches the cached candidate list (O(n), avoids a DOM
-     * query). Falls back to `document.querySelector` when no session is active.
+     * When a drag session is active, searches the cached candidate list. Otherwise looks the
+     * ID up in the droppable registry. Neither queries the document.
      *
      * Intended for the autoscroll scroll-only fast path, where the active droppable is already
      * known and only the placeholder index needs recalculation.
@@ -952,13 +1232,10 @@ class PositionCalculatorService {
             }
             return null;
         }
-        if (typeof document === 'undefined') {
-            return null;
-        }
-        return queryByAttribute(document, this.#DROPPABLE_ID_ATTR, id);
+        return this.#registry.getById(id);
     }
     /**
-     * Query all droppable elements belonging to a group, in document order.
+     * All rendered droppables belonging to a group, in document order, from the registry.
      *
      * All group members are included — the disabled check happens per-frame in
      * {@link #hitTest} rather than here, because a droppable can be disabled or
@@ -966,30 +1243,46 @@ class PositionCalculatorService {
      * `(dragStart)` handler, which fires AFTER the candidate snapshot is captured).
      */
     #queryDroppables(groupName) {
-        if (typeof document === 'undefined') {
-            return [];
-        }
-        return queryAllByAttribute(document, this.#DROPPABLE_GROUP_ATTR, groupName);
+        return this.#registry.getGroup(groupName);
     }
     /**
-     * Measure a candidate's hit-test rect, clipped to its nearest `.vdnd-scrollable`
-     * ancestor. Without clipping a droppable scrolled mostly out of a clipping container
-     * still hit-tests over its full unclipped rect (issue #23 case 3). The intersection is
-     * built as a plain DOMRect; an empty intersection yields a negative width/height so the
-     * `#hitTest` bounds check can never match it.
+     * The ancestor that clips a candidate's hit-test rect: its nearest `.vdnd-scrollable`
+     * ancestor, or null when it has none or is one itself. Without clipping a droppable scrolled
+     * mostly out of a clipping container still hit-tests over its full unclipped rect (issue #23
+     * case 3).
      */
-    #measureRect(el) {
-        const rect = el.getBoundingClientRect();
+    #clipOf(el) {
         const scrollable = el.closest('.vdnd-scrollable');
-        if (!scrollable || scrollable === el) {
-            return rect;
+        return scrollable === el ? null : scrollable;
+    }
+    /**
+     * Measure the candidates' hit-test rects into `rects`, each clipped to its clip ancestor (see
+     * `#clipOf`). Consecutive candidates in one scroller (lists side by side in it) read its rect
+     * once. The ancestor is looked up on each pass: a list moved to another scroller mid-drag keeps
+     * its registration. The intersection is built as a plain DOMRect; an empty intersection yields
+     * a negative width/height so the `#hitTest` bounds check can never match it.
+     */
+    #measureRects(candidates, rects) {
+        let lastClip = null;
+        let lastClipRect = null;
+        for (let i = 0; i < candidates.length; i++) {
+            const rect = candidates[i].getBoundingClientRect();
+            const clip = this.#clipOf(candidates[i]);
+            if (!clip) {
+                rects[i] = rect;
+                continue;
+            }
+            if (clip !== lastClip || !lastClipRect) {
+                lastClip = clip;
+                lastClipRect = clip.getBoundingClientRect();
+            }
+            const top = Math.max(rect.top, lastClipRect.top);
+            const left = Math.max(rect.left, lastClipRect.left);
+            const right = Math.min(rect.right, lastClipRect.right);
+            const bottom = Math.min(rect.bottom, lastClipRect.bottom);
+            rects[i] = new DOMRect(left, top, right - left, bottom - top);
         }
-        const clip = scrollable.getBoundingClientRect();
-        const top = Math.max(rect.top, clip.top);
-        const left = Math.max(rect.left, clip.left);
-        const right = Math.min(rect.right, clip.right);
-        const bottom = Math.min(rect.bottom, clip.bottom);
-        return new DOMRect(left, top, right - left, bottom - top);
+        return rects;
     }
     /**
      * Create a ResizeObserver (run outside Angular per CLAUDE.md) that marks the session's
@@ -1191,21 +1484,20 @@ class PositionCalculatorService {
         // current container — otherwise a container disabled mid-drag (its own index becomes
         // -1) would trap the drag with no reachable neighbour. Disabled droppables are skipped
         // as *targets* during the outward scan below instead.
-        const allDroppables = queryAllByAttribute(document, this.#DROPPABLE_GROUP_ATTR, groupName);
+        const allDroppables = this.#registry.getGroup(groupName);
         if (allDroppables.length <= 1) {
             return null;
         }
         // Get bounding rects, IDs, and disabled state, sorted by X position
         const droppableInfos = [];
         allDroppables.forEach((el) => {
-            const htmlEl = el;
-            const id = htmlEl.getAttribute(this.#DROPPABLE_ID_ATTR);
+            const id = el.getAttribute(this.#DROPPABLE_ID_ATTR);
             if (id) {
                 droppableInfos.push({
-                    element: htmlEl,
+                    element: el,
                     id,
-                    rect: htmlEl.getBoundingClientRect(),
-                    disabled: this.#isDroppableDisabled(htmlEl),
+                    rect: el.getBoundingClientRect(),
+                    disabled: this.#isDroppableDisabled(el),
                 });
             }
         });
@@ -1249,7 +1541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Single RAF loop that coordinates all drag-frame work in ordered phases:
@@ -1262,6 +1554,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  *      latest cursor and a `cursorDirty` flag. Callers skip their hit-test when
  *      the flag is false, so autoscroll-only frames (cursor stationary) incur
  *      zero hit-test work.
+ *   3. Frame writer phase (WRITE): registered writers apply the state computed this
+ *      frame to the DOM. DragPreviewComponent writes the preview transform here, so
+ *      the preview moves in the frame that processed the pointer instead of waiting
+ *      for a change detection tick, which Angular schedules after this frame.
  *
  * PointerDragHandler calls `queueCursorUpdate()` instead of managing its own
  * RAF per pointermove. This coalesces all moves within a frame into one update
@@ -1277,6 +1573,8 @@ class DragSchedulerService {
     #cursorDirty = false;
     /** Tick participants called before the main compute phase each frame. */
     #participants = [];
+    /** Frame writers called after the main compute phase each frame. */
+    #frameWriters = [];
     /**
      * Start the scheduler RAF loop.
      * No-op if already running.
@@ -1333,6 +1631,26 @@ class DragSchedulerService {
             this.#participants.splice(idx, 1);
         }
     }
+    /**
+     * Register a function to be called at the end of each frame, after the main tick.
+     * DragPreviewComponent registers here to move the preview within the same frame.
+     * No-op if the same function reference is already registered.
+     */
+    addFrameWriter(fn) {
+        if (!this.#frameWriters.includes(fn)) {
+            this.#frameWriters.push(fn);
+        }
+    }
+    /**
+     * Unregister a previously added frame writer.
+     * No-op if the function was not registered.
+     */
+    removeFrameWriter(fn) {
+        const idx = this.#frameWriters.indexOf(fn);
+        if (idx !== -1) {
+            this.#frameWriters.splice(idx, 1);
+        }
+    }
     #scheduleNextTick() {
         this.#rafId = requestAnimationFrame(() => this.#tick());
     }
@@ -1360,7 +1678,15 @@ class DragSchedulerService {
         }
         // Phase 2 — main compute (cursor-based hit-test + signal write)
         onTick(this.#pendingCursor, cursorDirty);
-        // Reschedule only if still active (stop() may have been called by onTick).
+        // stop() may have been called by onTick (the drag ended): nothing left to write.
+        if (this.#onTick === null) {
+            return;
+        }
+        // Phase 3 — frame writers (apply this frame's state to the DOM)
+        for (const writer of this.#frameWriters) {
+            writer();
+        }
+        // Reschedule only if still active (a writer is not expected to stop it, but may).
         if (this.#onTick !== null) {
             this.#scheduleNextTick();
         }
@@ -1411,6 +1737,14 @@ class AutoScrollService {
     /** Last tick cursor position for stationary detection */
     #lastTickCursorX = NaN;
     #lastTickCursorY = NaN;
+    /**
+     * The containers the last tick that ran asked to scroll but had no room left: the first
+     * #exhaustedCount entries (the objects are reused from tick to tick). A resting cursor skips the
+     * tick only while they stay as they were on the axes it asked for: content that grows (rows
+     * measured taller, items added), a resize or a scroll can give one room, and the scroll resumes.
+     */
+    #exhausted = [];
+    #exhaustedCount = 0;
     /**
      * Last timestamp used to scale per-frame autoscroll distance by elapsed frame time.
      * Scale is intentionally floored at 1 to preserve the existing feel on 60fps+ displays while
@@ -1514,6 +1848,8 @@ class AutoScrollService {
         this.#cursorOverride = null;
         this.#lastTickCursorX = NaN;
         this.#lastTickCursorY = NaN;
+        this.#exhausted.length = 0;
+        this.#exhaustedCount = 0;
         this.#lastScrollTimestamp = 0;
         this.#scrollState.containerId = null;
         this.#scrollState.direction.x = 0;
@@ -1542,14 +1878,17 @@ class AutoScrollService {
         if (!cursor) {
             return;
         }
-        // Skip the container iteration when cursor hasn't moved and scroll is idle.
+        // Skip the container iteration when the cursor hasn't moved and scroll is idle, unless a
+        // container it asked to scroll without room has changed since (see #exhausted).
         if (cursor.x === this.#lastTickCursorX &&
             cursor.y === this.#lastTickCursorY &&
-            !this.isScrolling()) {
+            !this.isScrolling() &&
+            !this.#exhaustedChanged()) {
             return;
         }
         this.#lastTickCursorX = cursor.x;
         this.#lastTickCursorY = cursor.y;
+        this.#exhaustedCount = 0;
         let scrollPerformed = false;
         // Frame scale is shared across candidates within a tick; computed lazily on
         // the first scroll attempt so stationary/idle frames don't advance the clock.
@@ -1609,8 +1948,19 @@ class AutoScrollService {
                     this.#scrollState.direction.y = direction.y;
                     this.#scrollState.speed = speed;
                     scrollPerformed = true;
+                    // Notify callback IMMEDIATELY in the same frame (no RAF delay)
+                    // Delaying via RAF causes cumulative drift during continuous autoscroll
+                    // because multiple scrolls happen before each delayed callback runs.
+                    // Note: No ngZone.run() needed here - the callback (DraggableDirective.#recalculatePlaceholder)
+                    // updates signals and plain fields, and enters the zone itself to emit dragEnd if it ends
+                    // the drag.
+                    // It runs after the scroll state is recorded: it may end the drag, and the reset of
+                    // stopMonitoring() must not be overwritten.
+                    this.#onScrollCallback?.();
                     break;
                 }
+                // No room in any requested direction: a resting cursor retries it once it changes
+                this.#recordExhausted(element, direction);
             }
         }
         if (!scrollPerformed) {
@@ -1670,16 +2020,46 @@ class AutoScrollService {
                 }
             }
         }
-        if (!scrolled) {
-            return false;
+        return scrolled;
+    }
+    /** Record a container that had no room in `direction` (see #exhausted). */
+    #recordExhausted(element, direction) {
+        const exhausted = (this.#exhausted[this.#exhaustedCount] ??= {
+            element,
+            vertical: false,
+            horizontal: false,
+            scrollTop: 0,
+            scrollLeft: 0,
+            maxScrollTop: 0,
+            maxScrollLeft: 0,
+        });
+        exhausted.element = element;
+        exhausted.vertical = direction.y !== 0;
+        exhausted.horizontal = direction.x !== 0;
+        exhausted.scrollTop = element.scrollTop;
+        exhausted.scrollLeft = element.scrollLeft;
+        exhausted.maxScrollTop = element.scrollHeight - element.clientHeight;
+        exhausted.maxScrollLeft = element.scrollWidth - element.clientWidth;
+        this.#exhaustedCount++;
+    }
+    /**
+     * Whether a container in #exhausted has scrolled or changed size on an axis it was asked to
+     * scroll, so it may have room now.
+     */
+    #exhaustedChanged() {
+        for (let i = 0; i < this.#exhaustedCount; i++) {
+            const exhausted = this.#exhausted[i];
+            const { element } = exhausted;
+            if ((exhausted.vertical &&
+                (element.scrollTop !== exhausted.scrollTop ||
+                    element.scrollHeight - element.clientHeight !== exhausted.maxScrollTop)) ||
+                (exhausted.horizontal &&
+                    (element.scrollLeft !== exhausted.scrollLeft ||
+                        element.scrollWidth - element.clientWidth !== exhausted.maxScrollLeft))) {
+                return true;
+            }
         }
-        // Notify callback IMMEDIATELY in the same frame (no RAF delay)
-        // Delaying via RAF causes cumulative drift during continuous autoscroll
-        // because multiple scrolls happen before each delayed callback runs.
-        // Note: No ngZone.run() needed here - the callback (DraggableDirective.#recalculatePlaceholder)
-        // already enters the zone when updating drag state.
-        this.#onScrollCallback?.();
-        return true;
+        return false;
     }
     #getFrameScale() {
         const now = performance.now();
@@ -1720,20 +2100,19 @@ class ElementCloneService {
      * These are the visual properties that affect appearance. Keeping them
      * kebab-case avoids a camelCase→kebab conversion on every property of every
      * node during the recursive clone walk (a drag-start hot path).
+     *
+     * A shorthand carries more than the longhands listed with it (`background-size`,
+     * `font-style`, …), so it is copied first, and the longhands only when the engine can't
+     * serialize the shorthand (it gives '' for `font` with `font-variant-ligatures: none`, for
+     * example). Copying both would read and write the same values twice.
      */
-    #stylePropsToCopy = [
-        'background',
-        'background-color',
-        'background-image',
+    #stylesToCopy = [
+        ['background', ['background-color', 'background-image']],
         'border',
         'border-radius',
         'box-shadow',
         'color',
-        'font',
-        'font-family',
-        'font-size',
-        'font-weight',
-        'line-height',
+        ['font', ['font-family', 'font-size', 'font-weight', 'line-height']],
         'padding',
         'margin',
         'display',
@@ -1775,10 +2154,22 @@ class ElementCloneService {
     #applyComputedStyles(source, target) {
         const computed = window.getComputedStyle(source);
         // Copy essential visual properties (keys are already kebab-case)
-        for (const prop of this.#stylePropsToCopy) {
-            const value = computed.getPropertyValue(prop);
-            if (value) {
-                target.style.setProperty(prop, value);
+        for (const style of this.#stylesToCopy) {
+            if (typeof style === 'string') {
+                this.#copyStyle(computed, target, style);
+                continue;
+            }
+            // The longhands only when the shorthand was not copied: the engine gave no value, or the
+            // clone rejected it. A shorthand sets all its longhands, so reading one back tells (the
+            // shorthand itself would be serialized again to be read). The clone may carry that
+            // longhand inline from the source, so it goes first.
+            const [shorthand, longhands] = style;
+            target.style.removeProperty(longhands[0]);
+            if (!this.#copyStyle(computed, target, shorthand) ||
+                !target.style.getPropertyValue(longhands[0])) {
+                for (const longhand of longhands) {
+                    this.#copyStyle(computed, target, longhand);
+                }
             }
         }
         // Disable animations and transitions on clone
@@ -1795,6 +2186,18 @@ class ElementCloneService {
             }
         }
     }
+    /**
+     * Copy one computed property to the target's inline style. Returns whether the engine gave a
+     * value for it.
+     */
+    #copyStyle(computed, target, property) {
+        const value = computed.getPropertyValue(property);
+        if (!value) {
+            return false;
+        }
+        target.style.setProperty(property, value);
+        return true;
+    }
     /**
      * Handle special elements that require extra processing.
      */
@@ -2149,9 +2552,7 @@ class DragIndexCalculatorService {
             return cached;
         const isViewport = droppableElement.hasAttribute('data-virtual-viewport');
         const virtualScrollElement = droppableElement.querySelector('vdnd-virtual-scroll');
-        const virtualContentElement = (droppableElement.matches('vdnd-virtual-content')
-            ? droppableElement
-            : droppableElement.closest('vdnd-virtual-content'));
+        const virtualContentElement = this.#findVirtualContent(droppableElement);
         let containerType;
         let scrollContainer;
         let scrollableParent = null;
@@ -2198,7 +2599,7 @@ class DragIndexCalculatorService {
         return entry;
     }
     getTotalItemCount(args) {
-        return this.#getTotalItemCount(args.droppableElement, args.isSameList, args.draggedItemHeight);
+        return this.#getTotalItemCount(args.droppableElement, args.draggedItemHeight);
     }
     /**
      * Live scroll geometry of a droppable's rows (see {@link DroppableScrollGeometry}). The same
@@ -2270,7 +2671,7 @@ class DragIndexCalculatorService {
             totalItems = Math.max(0, cachedItemCount);
         }
         else {
-            totalItems = this.#getTotalItemCount(droppableElement, isSameList, draggedItemHeight);
+            totalItems = this.#getTotalItemCount(droppableElement, draggedItemHeight, cache);
         }
         // Edge detection: allow dropping at the END of the list when cursor is near bottom edge.
         // Due to max scroll limits, the math alone can't reach totalItems when the list is longer
@@ -2329,7 +2730,12 @@ class DragIndexCalculatorService {
         const offset = parseFloat(element?.getAttribute('data-content-offset') ?? '');
         return Number.isFinite(offset) ? offset : 0;
     }
-    #getTotalItemCount(droppableElement, isSameList, draggedItemHeight) {
+    /**
+     * The number of items in a droppable. With `cache`, the drag's resolved metadata, the virtual
+     * containers it knows are not looked up in the DOM again: this runs on every frame of a drag
+     * over a list without a registered strategy.
+     */
+    #getTotalItemCount(droppableElement, draggedItemHeight, cache) {
         // Check if a registered strategy exists
         const droppableId = this.#positionCalculator.getDroppableId(droppableElement);
         const strategy = droppableId ? this.#strategies.get(droppableId) : null;
@@ -2338,7 +2744,9 @@ class DragIndexCalculatorService {
             return Math.max(0, strategyItemCount);
         }
         // Check for embedded virtual scroll component
-        const virtualScroll = droppableElement.querySelector('vdnd-virtual-scroll');
+        const virtualScroll = cache
+            ? cache.virtualScrollElement
+            : droppableElement.querySelector('vdnd-virtual-scroll');
         if (virtualScroll) {
             // Use data-total-items attribute if available (always the true N)
             const totalItemsAttr = virtualScroll.getAttribute('data-total-items');
@@ -2375,9 +2783,9 @@ class DragIndexCalculatorService {
             return count;
         }
         // Check for page-level scroll (vdnd-virtual-content)
-        const virtualContent = droppableElement.matches('vdnd-virtual-content')
-            ? droppableElement
-            : droppableElement.closest('vdnd-virtual-content');
+        const virtualContent = cache
+            ? cache.virtualContentElement
+            : this.#findVirtualContent(droppableElement);
         if (virtualContent) {
             // Prefer explicit total items attribute (works for both fixed and dynamic heights)
             const totalItemsAttr = virtualContent.getAttribute('data-total-items');
@@ -2404,6 +2812,12 @@ class DragIndexCalculatorService {
         const items = droppableElement.querySelectorAll('[data-draggable-id]');
         return items.length;
     }
+    /** The `vdnd-virtual-content` the droppable is or is inside (page-level scroll), if any. */
+    #findVirtualContent(droppableElement) {
+        return droppableElement.matches('vdnd-virtual-content')
+            ? droppableElement
+            : droppableElement.closest('vdnd-virtual-content');
+    }
     #getDraggedItemHeightFallback(height, fallback) {
         return Number.isFinite(height) && height > 0 ? height : fallback;
     }
@@ -2547,6 +2961,66 @@ function createAutoScrollRegistration(options) {
     destroyRef.onDestroy(unregisterCurrent);
 }
 
+/**
+ * Give a list's strategy its items: `count` of them, with the track keys `keys` returns (the
+ * list's own array, which it goes on reading).
+ *
+ * - FixedHeightStrategy's `setItemKeys` only counts the keys: it gets the count, and the keys are
+ *   never computed.
+ * - DynamicHeightStrategy's copies the keys: it gets the list's array.
+ * - Any other `setItemKeys` (a strategy of the consumer's own, or a subclass that overrides it)
+ *   gets a copy, which it may keep and change.
+ * @internal
+ */
+function setStrategyItems(strategy, count, keys) {
+    if (strategy instanceof FixedHeightStrategy &&
+        strategy.setItemKeys === FixedHeightStrategy.prototype.setItemKeys) {
+        strategy.setItemCount(count);
+    }
+    else if (strategy instanceof DynamicHeightStrategy &&
+        strategy.setItemKeys === DynamicHeightStrategy.prototype.setItemKeys) {
+        strategy.setItemKeys(keys());
+    }
+    else {
+        strategy.setItemKeys(keys().slice());
+    }
+}
+
+/**
+ * Query by an exact attribute value without interpolating consumer data into a CSS selector.
+ *
+ * CSS attribute selectors need string-specific escaping that differs from `CSS.escape()`.
+ * Filtering candidates by attribute presence avoids selector syntax errors for IDs containing
+ * quotes, brackets, backslashes, or other selector-sensitive characters.
+ */
+function queryByAttribute(root, attributeName, attributeValue) {
+    const candidates = root.querySelectorAll(`[${attributeName}]`);
+    for (const candidate of candidates) {
+        if (candidate.getAttribute(attributeName) === attributeValue) {
+            return candidate;
+        }
+    }
+    return null;
+}
+/**
+ * The elements carrying an attribute, by its value (the first in document order when several
+ * share one, as `queryByAttribute` finds). One query for many lookups, where `queryByAttribute`
+ * scans every candidate on each call.
+ */
+function mapByAttribute(root, attributeName) {
+    const elements = new Map();
+    for (const candidate of root.querySelectorAll(`[${attributeName}]`)) {
+        const value = candidate.getAttribute(attributeName);
+        if (!elements.has(value)) {
+            elements.set(value, candidate);
+        }
+    }
+    return elements;
+}
+function queryAllByAttribute(root, attributeName, attributeValue) {
+    return Array.from(root.querySelectorAll(`[${attributeName}]`)).filter((candidate) => candidate.getAttribute(attributeName) === attributeValue);
+}
+
 /** Layout changes smaller than this are ignored (sub-pixel rounding noise). */
 const MIN_SHIFT_PX = 0.5;
 /**
@@ -2554,8 +3028,15 @@ const MIN_SHIFT_PX = 0.5;
  *
  * Call `beforeUpdate()` before the DOM reflects a new drag/placeholder state. When the
  * placeholder moved (or the drag ended), it snapshots every rendered element's visual position, then after
- * the render measures again and plays a compositor-only `transform` animation from the
- * old position to the new one.
+ * the render measures again and plays a `translate` animation from the old position to the
+ * new one.
+ *
+ * The slide animates the individual `translate` property with a replace effect, so it runs
+ * on the compositor (Chromium never composites a `composite: 'add'` keyframe effect) and
+ * composes with any `transform` the consumer sets on the row. `translate` applies before
+ * `transform`, in the parent's coordinate space, where the deltas are measured. A row
+ * that sets its own `translate` gets an additive effect instead, which keeps that value
+ * but is ticked on the main thread.
  *
  * Positions are measured relative to the scroll content, so scrolling (including
  * programmatic scroll in the same tick) never animates. Measurements include any
@@ -2692,36 +3173,51 @@ class ShiftAnimator {
             }
             // Both measurements include the in-flight offset, so the new animation must
             // start from that offset plus the layout delta to continue from the current spot.
-            const current = this.#currentOffset(element);
-            shifts.push({ element, x: dx + current.x, y: dy + current.y });
+            const active = this.#activeShift(element);
+            const remaining = active ? 1 - active.progress : 0;
+            shifts.push({
+                element,
+                x: dx + (active?.shift.x ?? 0) * remaining,
+                y: dy + (active?.shift.y ?? 0) * remaining,
+                // While a slide applies, computed style includes it: keep the decision it was made with.
+                additive: active?.shift.additive ?? this.#hasOwnTranslate(element),
+            });
         }
         // Write phase
         for (const element of stale) {
             this.cancel(element);
         }
         for (const shift of shifts) {
-            this.#start(shift.element, shift.x, shift.y);
+            this.#start(shift);
         }
     }
-    #currentOffset(element) {
-        const running = this.#running.get(element);
+    /**
+     * Whether the row sets its own `translate` (which a replace effect would hide while it
+     * runs). Only read while no slide runs on the element: the computed value would include it.
+     */
+    #hasOwnTranslate(element) {
+        const translate = getComputedStyle(element).translate;
+        return !!translate && translate !== 'none';
+    }
+    /** The element's running slide and its progress, or null when none is in effect. */
+    #activeShift(element) {
+        const shift = this.#running.get(element);
         // Effect-level easing makes `progress` the eased progress, i.e. the fraction travelled.
-        const progress = running?.animation.effect?.getComputedTiming().progress;
-        if (!running || progress === null || progress === undefined) {
-            return { x: 0, y: 0 };
+        // It is null once the animation was cancelled or finished (even before `onfinish` ran).
+        const progress = shift?.animation.effect?.getComputedTiming().progress;
+        if (!shift || progress === null || progress === undefined) {
+            return null;
         }
-        const remaining = 1 - progress;
-        return { x: running.x * remaining, y: running.y * remaining };
+        return { shift, progress };
     }
-    #start(element, x, y) {
+    #start({ element, x, y, additive }) {
         this.#running.get(element)?.animation.cancel();
-        const animation = element.animate([{ transform: `translate(${x}px, ${y}px)` }, { transform: 'translate(0px, 0px)' }], {
+        const animation = element.animate([{ translate: `${x}px ${y}px` }, { translate: '0px 0px' }], {
             duration: this.#duration(),
             easing: this.#config.shiftEasing ?? DEFAULT_SHIFT_EASING,
-            // Layer on top of any transform the consumer already applies to the item.
-            composite: 'add',
+            composite: additive ? 'add' : 'replace',
         });
-        this.#running.set(element, { animation, x, y });
+        this.#running.set(element, { animation, x, y, additive });
         animation.onfinish = () => {
             if (this.#running.get(element)?.animation === animation) {
                 this.#running.delete(element);
@@ -2730,25 +3226,227 @@ class ShiftAnimator {
     }
 }
 
+/** The elements drop animations hide, with the animation hiding each */
+const hiddenTargets = new Map();
 /**
- * A virtual scroll container that only renders visible items.
- *
- * Key features:
- * - Only renders items within the visible viewport plus an overscan buffer
- * - Supports "sticky" items that are always rendered (used for dragged items)
- * - Uses spacer divs to maintain correct scroll height
- * - Integrates with the drag-and-drop system
- * - Automatic height detection via ResizeObserver when containerHeight is not provided
- * - Supports dynamic item heights via `dynamicItemHeight` input
+ * Show again an element a drop animation hides, if one of these nodes holds it. A virtual list
+ * calls it for the row it pools: that row's element renders another item next.
+ * @internal
+ */
+function revealDropTargetIn(nodes) {
+    for (const [element, animation] of hiddenTargets) {
+        if (nodes.some((node) => node.contains(element))) {
+            hiddenTargets.delete(element);
+            animation.cancel();
+        }
+    }
+}
+/**
+ * Plays the drop ("settle") animation: the drag preview glides from where it was released
+ * into the dropped item's final position, while that item stays invisible underneath.
  *
- * @example
- * ```html
- * <!-- With fixed height items -->
- * <vdnd-virtual-scroll
- *   [items]="items()"
- *   [itemHeight]="50"
- *   [containerHeight]="400"
- *   [trackByFn]="trackById">
+ * Purely visual. The drag state and the drop events are already final when it starts, so it
+ * never delays or changes a drop. Without a target (the item is not rendered, or scrolled out
+ * of view) the ghost fades out where it was released.
+ * @internal
+ */
+class DropAnimator {
+    #config;
+    #ghostAnimation = null;
+    #hidden = null;
+    /** The reduced-motion media query, created on first use (null without `matchMedia`) */
+    #reducedMotionQuery;
+    constructor(config) {
+        this.#config = config;
+    }
+    /** Whether a drop animation would play right now (duration, WAAPI, reduced motion). */
+    isEnabled() {
+        if (this.#duration() <= 0)
+            return false;
+        if (typeof Element === 'undefined' || typeof Element.prototype.animate !== 'function') {
+            return false;
+        }
+        return !this.#prefersReducedMotion();
+    }
+    /**
+     * Animate `ghost` onto `target` (or fade it out without one), then call `onDone`.
+     * `onDone` is not called when the animation is cancelled.
+     */
+    play(ghost, target, onDone) {
+        this.cancel();
+        const timing = {
+            duration: this.#duration(),
+            easing: this.#config.dropEasing ?? DEFAULT_DROP_EASING,
+            fill: 'forwards',
+        };
+        let ghostAnimation;
+        if (target) {
+            const from = ghost.getBoundingClientRect();
+            const dx = target.rect.left - from.left;
+            const dy = target.rect.top - from.top;
+            // Travel on top of the preview's own position transform (width/height must not be
+            // composited, so the base transform is repeated instead of using composite: 'add').
+            const base = ghost.style.transform;
+            ghostAnimation = ghost.animate([
+                {
+                    transform: `${base} translate(0px, 0px)`,
+                    width: `${from.width}px`,
+                    height: `${from.height}px`,
+                },
+                {
+                    transform: `${base} translate(${dx}px, ${dy}px)`,
+                    width: `${target.rect.width}px`,
+                    height: `${target.rect.height}px`,
+                },
+            ], timing);
+            // Keep the real item invisible until the ghost lands on it, so it is never seen twice.
+            const hideAnimation = target.element.animate([{ opacity: 0 }, { opacity: 0 }], {
+                duration: timing.duration,
+            });
+            this.#hidden = { element: target.element, animation: hideAnimation };
+            hiddenTargets.set(target.element, hideAnimation);
+        }
+        else {
+            ghostAnimation = ghost.animate([{ opacity: 1 }, { opacity: 0 }], timing);
+        }
+        this.#ghostAnimation = ghostAnimation;
+        ghostAnimation.onfinish = () => {
+            if (this.#ghostAnimation !== ghostAnimation)
+                return;
+            this.cancel();
+            onDone();
+        };
+    }
+    /** Stop the running animation immediately and reveal the real item. */
+    cancel() {
+        const ghostAnimation = this.#ghostAnimation;
+        const hidden = this.#hidden;
+        this.#ghostAnimation = null;
+        this.#hidden = null;
+        ghostAnimation?.cancel();
+        if (hidden) {
+            if (hiddenTargets.get(hidden.element) === hidden.animation) {
+                hiddenTargets.delete(hidden.element);
+            }
+            hidden.animation.cancel();
+        }
+    }
+    #duration() {
+        return this.#config.dropDuration ?? DEFAULT_DROP_DURATION;
+    }
+    /** One media query for every drop: it is live, so it follows a change of the preference. */
+    #prefersReducedMotion() {
+        if (this.#reducedMotionQuery === undefined) {
+            this.#reducedMotionQuery =
+                typeof matchMedia === 'function' ? matchMedia('(prefers-reduced-motion: reduce)') : null;
+        }
+        return this.#reducedMotionQuery?.matches ?? false;
+    }
+}
+/**
+ * Find the rendered element of a dropped item: first in the droppable it was dropped on, then
+ * in the one it came from (a drop the consumer rejected or has not committed yet leaves it
+ * there). Returns null when it is not rendered, or rendered but scrolled out of its list's view.
+ *
+ * `getDroppable` resolves a droppable ID to its element (the droppable registry lookup).
+ */
+function findDropTarget(draggableId, droppableIds, getDroppable) {
+    for (const droppableId of droppableIds) {
+        if (!droppableId)
+            continue;
+        const droppable = getDroppable(droppableId);
+        const element = droppable
+            ? queryByAttribute(droppable, 'data-draggable-id', draggableId)
+            : null;
+        if (!droppable || !element)
+            continue;
+        const rect = element.getBoundingClientRect();
+        // Hidden, or virtualized/scrolled out of the list's visible box: nowhere to land.
+        if (rect.width === 0 && rect.height === 0)
+            return null;
+        const bounds = droppable.getBoundingClientRect();
+        const visible = rect.bottom > bounds.top &&
+            rect.top < bounds.bottom &&
+            rect.right > bounds.left &&
+            rect.left < bounds.right;
+        return visible ? { element, rect } : null;
+    }
+    return null;
+}
+
+/**
+ * How many views of rows that left a list stay pooled for rows that come in (recycleRows). A
+ * scroll step reuses the views it pools right away; the pool keeps the rest, for example when
+ * fewer rows render after the list shrinks.
+ */
+const MAX_POOLED_ROWS = 10;
+/** `Node.DOCUMENT_POSITION_FOLLOWING`, without the `Node` global (servers have none) */
+const DOCUMENT_POSITION_FOLLOWING = 4;
+/**
+ * The node that comes first in the DOM. A view's `rootNodes` list a control flow block's anchor
+ * before the nodes rendered in it, which the DOM puts before the anchor.
+ */
+function firstInDocumentOrder(nodes) {
+    let first = null;
+    for (const node of nodes) {
+        if (first === null || node.compareDocumentPosition(first) & DOCUMENT_POSITION_FOLLOWING) {
+            first = node;
+        }
+    }
+    return first;
+}
+/**
+ * Which values belong to a longest increasing subsequence of `values` (negative values never
+ * do). For rows: the views that can stay where they are while the others move around them, as
+ * few as possible. A moved row loses focus and restarts its CSS transitions.
+ */
+function longestIncreasingRun(values) {
+    // tails[k]: the index of the smallest value that ends an increasing run of length k + 1
+    const tails = [];
+    const previous = new Array(values.length).fill(-1);
+    for (let i = 0; i < values.length; i++) {
+        const value = values[i];
+        if (value < 0)
+            continue;
+        let low = 0;
+        let high = tails.length;
+        while (low < high) {
+            const middle = (low + high) >> 1;
+            if (values[tails[middle]] < value) {
+                low = middle + 1;
+            }
+            else {
+                high = middle;
+            }
+        }
+        previous[i] = low > 0 ? tails[low - 1] : -1;
+        tails[low] = i;
+    }
+    const inRun = new Array(values.length).fill(false);
+    for (let i = tails.length > 0 ? tails[tails.length - 1] : -1; i >= 0; i = previous[i]) {
+        inRun[i] = true;
+    }
+    return inRun;
+}
+/**
+ * A virtual scroll container that only renders visible items.
+ *
+ * Key features:
+ * - Only renders items within the visible viewport plus an overscan buffer
+ * - Supports "sticky" items that are always rendered (used for dragged items)
+ * - Uses spacer divs to maintain correct scroll height
+ * - Integrates with the drag-and-drop system
+ * - Automatic height detection via ResizeObserver when containerHeight is not provided
+ * - Supports dynamic item heights via `dynamicItemHeight` input
+ *
+ * @example
+ * ```html
+ * <!-- With fixed height items -->
+ * <vdnd-virtual-scroll
+ *   [items]="items()"
+ *   [itemHeight]="50"
+ *   [containerHeight]="400"
+ *   [trackByFn]="trackById">
  *   <ng-template let-item let-index="index">
  *     <div class="item">{{ item.name }}</div>
  *   </ng-template>
@@ -2775,6 +3473,7 @@ class VirtualScrollContainerComponent {
     #keyboardDrag = inject(KeyboardDragService);
     #ngZone = inject(NgZone);
     #injector = inject(Injector);
+    #environmentInjector = inject(EnvironmentInjector);
     #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     /** Cleanup function for scroll listener */
     #scrollCleanup = null;
@@ -2789,6 +3488,38 @@ class VirtualScrollContainerComponent {
     #measuredHeight = signal(0, ...(ngDevMode ? [{ debugName: "#measuredHeight" }] : []));
     /** Slides items displaced by the placeholder (only when VDND_ANIMATION_CONFIG is provided) */
     #shiftAnimator = this.#createShiftAnimator();
+    /** The template's spacer (cannot use ES private with viewChild) */
+    spacer = viewChild('spacer', ...(ngDevMode ? [{ debugName: "spacer" }] : []));
+    /** The template's content wrapper (cannot use ES private with viewChild) */
+    contentWrapper = viewChild('contentWrapper', ...(ngDevMode ? [{ debugName: "contentWrapper" }] : []));
+    /** Where #renderRows inserts the rows (cannot use ES private with viewChild) */
+    rowOutlet = viewChild('rows', { ...(ngDevMode ? { debugName: "rowOutlet" } : {}), read: ViewContainerRef });
+    /** Rendered rows, in DOM order */
+    #rows = [];
+    /** The entries the rendered rows show */
+    #rowEntries = null;
+    /** The template the rendered rows were created from */
+    #rowTemplate = null;
+    /** The track function that gave the rendered rows their keys */
+    #rowTrackBy = null;
+    /** Views of rows that left, detached, to render rows that come in (recycleRows) */
+    #rowPool = [];
+    /**
+     * Set while this component's view is about to be checked in the current change detection pass:
+     * from an input change (ngOnChanges, which runs before its effects; the first render included)
+     * until the check (ngAfterViewChecked). That check renders every row.
+     */
+    #viewCheckPending = false;
+    /** The placeholder, created on its first render and reused */
+    #placeholder = null;
+    /** Height last set on the placeholder */
+    #placeholderHeightSet = null;
+    /** Content offset last written to the content wrapper */
+    #contentTransformSet = null;
+    /** Whether duplicate track keys were reported (once per list) */
+    #warnedDuplicateKeys = false;
+    /** The row keys last checked for duplicates (checked again when the rows change) */
+    #rowKeysChecked = null;
     /** Template for rendering each item - passed as input instead of content child for reliability */
     itemTemplate = input.required(...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
     /** Unique ID for this scroll container (used for auto-scroll registration) */
@@ -2835,6 +3566,13 @@ class VirtualScrollContainerComponent {
      * Required for placeholder positioning.
      */
     droppableId = input(...(ngDevMode ? [undefined, { debugName: "droppableId" }] : []));
+    /**
+     * Reuse the views of rows that scroll out to render the rows that scroll in, instead of
+     * destroying them and creating new ones. Scrolling creates fewer components and elements, but
+     * a row's components, element and DOM state (focus aside) then carry over to other items.
+     * @default false
+     */
+    recycleRows = input(false, ...(ngDevMode ? [{ debugName: "recycleRows" }] : []));
     /**
      * Whether to automatically add the dragged item to the sticky list.
      * This ensures the dragged item remains visible during virtual scrolling.
@@ -2931,22 +3669,50 @@ class VirtualScrollContainerComponent {
     draggedItemId = computed(() => {
         return this.#dragState.draggedItem()?.draggableId ?? null;
     }, ...(ngDevMode ? [{ debugName: "draggedItemId" }] : []));
-    /** Map of item IDs to their indices - rebuilt only when items() changes (O(n) once, then O(1) lookups) */
-    #itemIndexMap = computed(() => {
-        const items = this.items();
+    /**
+     * Every item's ID, in order. Computed once per items change, and only when something reads it:
+     * a dynamic-height strategy, a drag, or a sticky item outside the rendered rows. A fixed-height
+     * strategy needs only the item count.
+     */
+    #itemIds = computed(() => {
         const idFn = this.itemIdFn();
+        return this.items().map((item) => idFn(item));
+    }, ...(ngDevMode ? [{ debugName: "#itemIds" }] : []));
+    /**
+     * Index of each item ID (the last, when several share one), for the sticky items outside the
+     * rendered rows. Built on first use, so an items change (a drop) builds none.
+     */
+    #itemIndexMap = computed(() => {
+        const ids = this.#itemIds();
         const map = new Map();
-        for (let i = 0; i < items.length; i++) {
-            map.set(idFn(items[i]), i);
+        for (let i = 0; i < ids.length; i++) {
+            map.set(ids[i], i);
         }
         return map;
     }, ...(ngDevMode ? [{ debugName: "#itemIndexMap" }] : []));
-    /** The index of the currently dragged item in the items array (-1 if not found or not dragging) */
+    /**
+     * The index of the currently dragged item in the items array (-1 if not found or not dragging).
+     * Found without the index map, which only this lookup would need on a drag: a drag that started
+     * in another list has no item here (IDs are unique across lists), the index where the drag found
+     * its item is checked next, and only then every item ID is searched.
+     */
     #draggedItemIndex = computed(() => {
         const draggedId = this.draggedItemId();
         if (!draggedId)
             return -1;
-        return this.#itemIndexMap().get(draggedId) ?? -1;
+        const droppableId = this.droppableId();
+        const sourceDroppableId = this.#dragState.sourceDroppableId();
+        if (droppableId && sourceDroppableId && droppableId !== sourceDroppableId)
+            return -1;
+        const sourceIndex = this.#dragState.sourceIndex();
+        const items = this.items();
+        if (sourceIndex !== null &&
+            sourceIndex >= 0 &&
+            sourceIndex < items.length &&
+            this.itemIdFn()(items[sourceIndex]) === draggedId) {
+            return sourceIndex;
+        }
+        return this.#itemIds().lastIndexOf(draggedId);
     }, ...(ngDevMode ? [{ debugName: "#draggedItemIndex" }] : []));
     /** Memoized Set of sticky IDs - rebuilt only when effectiveStickyIds() changes */
     #stickyIdsSet = computed(() => new Set(this.effectiveStickyIds()), ...(ngDevMode ? [{ debugName: "#stickyIdsSet" }] : []));
@@ -2971,31 +3737,20 @@ class VirtualScrollContainerComponent {
         }
         return this.itemHeight();
     }, ...(ngDevMode ? [{ debugName: "placeholderHeight" }] : []));
-    /** Items to render, including sticky items and placeholder */
-    renderedItems = computed(() => {
+    /**
+     * Rows to render: the items in range, then the sticky items outside it. Independent of the
+     * placeholder, so a placeholder move leaves the rows as they are.
+     */
+    #renderedRows = computed(() => {
         const items = this.items();
         const { start, end } = this.#renderRange();
         const stickyIds = this.#stickyIdsSet();
         const idFn = this.itemIdFn();
-        const itemIndexMap = this.#itemIndexMap();
         const draggedId = this.draggedItemId();
-        const placeholderIdx = this.placeholderIndex();
         const result = [];
         const renderedIds = new Set();
-        let hasPlaceholder = false;
-        // Add all items in the visible range, inserting placeholder at correct position
+        // Add all items in the visible range
         for (let i = start; i <= end && i < items.length; i++) {
-            // Insert placeholder before item at placeholderIndex
-            if (placeholderIdx === i && !hasPlaceholder) {
-                result.push({
-                    type: 'placeholder',
-                    data: null,
-                    index: placeholderIdx,
-                    isSticky: false,
-                    isDragging: false,
-                });
-                hasPlaceholder = true;
-            }
             const item = items[i];
             const id = idFn(item);
             result.push({
@@ -3007,24 +3762,14 @@ class VirtualScrollContainerComponent {
             });
             renderedIds.add(id);
         }
-        // If placeholder is at the end (after all items), add it
-        if (placeholderIdx >= items.length && placeholderIdx >= 0 && !hasPlaceholder) {
-            result.push({
-                type: 'placeholder',
-                data: null,
-                index: placeholderIdx,
-                isSticky: false,
-                isDragging: false,
-            });
-            hasPlaceholder = true;
-        }
         // Add any sticky items that aren't already rendered
         const missingStickyIndices = [];
         for (const id of stickyIds) {
             if (renderedIds.has(id))
                 continue;
-            const index = itemIndexMap.get(id);
-            if (index === undefined)
+            // The drag knows its item's index; the index map serves the other sticky items
+            const index = id === draggedId ? this.#draggedItemIndex() : (this.#itemIndexMap().get(id) ?? -1);
+            if (index < 0)
                 continue;
             missingStickyIndices.push({ id, index });
         }
@@ -3044,6 +3789,45 @@ class VirtualScrollContainerComponent {
             });
         }
         return result;
+    }, ...(ngDevMode ? [{ debugName: "#renderedRows" }] : []));
+    /** Track keys of #renderedRows, in order */
+    #rowKeys = computed(() => this.#renderedRows().map((entry, i) => this.trackEntry(i, entry)), ...(ngDevMode ? [{ debugName: "#rowKeys" }] : []));
+    /**
+     * Where the placeholder renders among the rows: before the row at this position (after the
+     * rows in range when it equals their count), or -1 when it is not rendered. It goes before the
+     * item at the placeholder index when that item is in range, and after the rows in range when
+     * the index is past the last item.
+     */
+    #placeholderSlot = computed(() => {
+        const placeholderIndex = this.placeholderIndex();
+        if (placeholderIndex < 0)
+            return -1;
+        const itemCount = this.items().length;
+        const { start, end } = this.#renderRange();
+        const lastInRange = Math.min(end, itemCount - 1);
+        if (placeholderIndex >= start && placeholderIndex <= lastInRange) {
+            return placeholderIndex - start;
+        }
+        if (placeholderIndex >= itemCount) {
+            return Math.max(0, lastInRange - start + 1);
+        }
+        return -1;
+    }, ...(ngDevMode ? [{ debugName: "#placeholderSlot" }] : []));
+    /** Items to render, including sticky items and placeholder */
+    renderedItems = computed(() => {
+        const rows = this.#renderedRows();
+        const slot = this.#placeholderSlot();
+        const result = [...rows];
+        if (slot >= 0) {
+            result.splice(slot, 0, {
+                type: 'placeholder',
+                data: null,
+                index: this.placeholderIndex(),
+                isSticky: false,
+                isDragging: false,
+            });
+        }
+        return result;
     }, ...(ngDevMode ? [{ debugName: "renderedItems" }] : []));
     /** Generated ID for auto-scroll registration */
     #generatedScrollId = `vdnd-scroll-${Math.random().toString(36).slice(2, 9)}`;
@@ -3059,12 +3843,10 @@ class VirtualScrollContainerComponent {
             enabled: () => this.autoScrollEnabled(),
             config: () => this.autoScrollConfig(),
         });
-        // Keep strategy item keys in sync
+        // Keep the strategy's items in sync. A fixed-height strategy needs only their count, which
+        // spares computing every item's ID on each items change (each drop).
         effect(() => {
-            const items = this.items();
-            const idFn = this.itemIdFn();
-            const keys = items.map((item) => idFn(item));
-            this.#strategy().setItemKeys(keys);
+            setStrategyItems(this.#strategy(), this.items().length, () => this.#itemIds());
         });
         // Register strategy with drag index calculator for accurate drag calculations
         effect((onCleanup) => {
@@ -3081,16 +3863,6 @@ class VirtualScrollContainerComponent {
             const draggedIndex = this.#draggedItemIndex();
             strategy.setExcludedIndex(draggedIndex >= 0 ? draggedIndex : null);
         });
-        // Snapshot item positions before the template re-renders the placeholder move.
-        // Component effects run before the component's own template is refreshed.
-        if (this.#shiftAnimator) {
-            const animator = this.#shiftAnimator;
-            effect(() => {
-                const isDragging = this.#dragState.isDragging();
-                const placeholderIndex = this.placeholderIndex();
-                untracked(() => animator.beforeUpdate(isDragging, placeholderIndex));
-            });
-        }
         // Keyboard drag autoscroll: keep the placeholder visible. Arrow keys call
         // #revealPlaceholder synchronously (through KeyboardDragService) so a drop right after a
         // move never lands outside the rendered range; this effect re-runs it when item
@@ -3156,6 +3928,18 @@ class VirtualScrollContainerComponent {
                 }
             }
         });
+        effect(() => {
+            const spacer = this.spacer()?.nativeElement;
+            if (spacer) {
+                spacer.style.height = `${this.totalHeight()}px`;
+            }
+        });
+        // Last, so it renders what the effects above scrolled to. Component effects run before the
+        // component's own view is checked, which has nothing to update: the template has no bindings.
+        effect(() => this.#render());
+    }
+    ngOnChanges() {
+        this.#viewCheckPending = true;
     }
     ngOnInit() {
         // Measure rows in dynamic height mode. dynamicItemHeight can change at runtime, and the
@@ -3195,6 +3979,9 @@ class VirtualScrollContainerComponent {
         // Observe rendered items for dynamic height measurement
         this.#observeRenderedItems();
     }
+    ngAfterViewChecked() {
+        this.#viewCheckPending = false;
+    }
     /**
      * Scroll so the placeholder is fully visible during a keyboard drag into this list.
      * Reads only signals and strategy offsets, so it works before the placeholder renders.
@@ -3239,6 +4026,279 @@ class VirtualScrollContainerComponent {
             this.#scrollTop.set(newScrollTop);
         }
     }
+    /**
+     * Render the content offset, the rows and the placeholder. From an effect, not the template:
+     * Angular checks every row view in this component's view each time a signal its template reads
+     * changes, so reading the placeholder there re-rendered every row on each placeholder move.
+     * Here a placeholder move only moves the placeholder, and a row renders when its context does.
+     */
+    #render() {
+        // Snapshot the rendered positions before anything moves, so displaced rows can slide. First,
+        // as a subclass that renders its own template relies on it too.
+        const isDragging = this.#dragState.isDragging();
+        const placeholderIndex = this.placeholderIndex();
+        untracked(() => this.#shiftAnimator?.beforeUpdate(isDragging, placeholderIndex));
+        const outlet = this.rowOutlet();
+        const wrapper = this.contentWrapper()?.nativeElement;
+        // Not this component's template (a subclass's own): it renders renderedItems() itself
+        if (!outlet || !wrapper)
+            return;
+        const template = this.itemTemplate() ?? null;
+        const entries = this.#renderedRows();
+        const keys = this.#rowKeys();
+        const trackBy = this.effectiveTrackByFn();
+        const recycle = this.recycleRows();
+        const transform = this.contentTransform();
+        const slot = this.#placeholderSlot();
+        const placeholderHeight = slot >= 0 ? this.placeholderHeight() : null;
+        // Untracked: the signals the rows' templates read must not become this effect's
+        untracked(() => {
+            if (transform !== this.#contentTransformSet) {
+                wrapper.style.transform = transform;
+                this.#contentTransformSet = transform;
+            }
+            this.#renderRows(outlet, template, entries, keys, trackBy, recycle);
+            this.#renderPlaceholder(outlet, slot, placeholderHeight);
+        });
+    }
+    /**
+     * Give each entry a view of the item template, in order. As with `@for`, a row keeps its view
+     * (and the components in it) while its track key stays rendered, and only the rows out of order
+     * move. The view of a row that leaves is destroyed, or with `recycle` pooled and given to a row
+     * that comes in. Only new, pooled and changed views are checked, with `detectChanges()`:
+     * `markForCheck()` would mark every ancestor view up to the root too.
+     */
+    #renderRows(outlet, template, entries, keys, trackBy, recycle) {
+        if (!recycle) {
+            this.#destroyRowPool();
+        }
+        // Nothing to do, as on a placeholder move
+        if (entries === this.#rowEntries &&
+            template === this.#rowTemplate &&
+            trackBy === this.#rowTrackBy) {
+            return;
+        }
+        // A new template renders every row anew; without one there is no row (as ngTemplateOutlet)
+        if (template !== this.#rowTemplate) {
+            for (const row of this.#rows) {
+                row.view.destroy();
+            }
+            this.#rows = [];
+            this.#destroyRowPool();
+            this.#rowTemplate = template;
+        }
+        if (!template)
+            return;
+        // A new track function gives the rendered rows new keys; they keep their views (as with @for)
+        if (trackBy !== this.#rowTrackBy) {
+            for (const row of this.#rows) {
+                const { $implicit, index } = row.view.context;
+                row.key = this.trackEntry(index, { type: 'item', data: $implicit, index });
+            }
+            this.#rowTrackBy = trackBy;
+        }
+        // The last render's views by key, in order: an entry takes the first view left for its key
+        const previous = new Map();
+        for (const row of this.#rows) {
+            if (row.view.destroyed)
+                continue;
+            const views = previous.get(row.key);
+            if (views) {
+                views.push(row);
+            }
+            else {
+                previous.set(row.key, [row]);
+            }
+        }
+        const kept = keys.map((key) => previous.get(key)?.shift());
+        this.#warnDuplicateKeys(keys);
+        // Remove the rows that left, then keep in place the longest run of kept views that is
+        // already in order (their positions in the outlet, which now holds only kept views)
+        const dragged = this.#dragState.draggedItem();
+        for (const views of previous.values()) {
+            for (const row of views) {
+                // The dragged item's view is destroyed, as without recycling: that cancels the drag
+                // instead of handing it to another item
+                if (recycle && !this.#rendersDraggedItem(row.view, dragged)) {
+                    this.#poolRow(outlet, row.view);
+                }
+                else {
+                    row.view.destroy();
+                }
+            }
+        }
+        const positions = new Map();
+        for (let i = 0; i < outlet.length; i++) {
+            positions.set(outlet.get(i), i);
+        }
+        const inPlace = longestIncreasingRun(kept.map((row) => (row ? positions.get(row.view) : -1)));
+        // From the last row up, so each row goes right before the next one, already in place
+        const rows = new Array(entries.length);
+        const toCheck = [];
+        let next = null;
+        for (let i = entries.length - 1; i >= 0; i--) {
+            const entry = entries[i];
+            let row = kept[i];
+            if (row) {
+                if (!inPlace[i]) {
+                    this.#moveBefore(outlet, row.view, next);
+                }
+                if (this.#updateContext(row.view.context, entry)) {
+                    toCheck.push(row.view);
+                }
+            }
+            else {
+                const index = next ? outlet.indexOf(next) : outlet.length;
+                // A pooled view is checked whatever its context: nothing checked it while detached
+                let view = this.#rowPool.pop();
+                if (view) {
+                    this.#updateContext(view.context, entry);
+                    outlet.insert(view, index);
+                }
+                else {
+                    const context = {
+                        $implicit: entry.data,
+                        index: entry.index,
+                        isSticky: entry.isSticky,
+                    };
+                    view = outlet.createEmbeddedView(template, context, index);
+                }
+                row = { key: keys[i], view };
+                toCheck.push(view);
+            }
+            rows[i] = row;
+            next = row.view;
+        }
+        this.#rows = rows;
+        while (this.#rowPool.length > MAX_POOLED_ROWS) {
+            this.#rowPool.pop().destroy();
+        }
+        // When this component's own view is checked later in this pass, that check renders every row
+        if (!this.#viewCheckPending) {
+            // Top to bottom (toCheck lists them bottom up)
+            for (let i = toCheck.length - 1; i >= 0; i--) {
+                toCheck[i].detectChanges();
+            }
+        }
+        this.#rowEntries = entries;
+    }
+    /**
+     * Whether a row's view renders the dragged item: its item has the dragged ID, or the view holds
+     * the dragged element (its draggable ID need not be the item's ID).
+     */
+    #rendersDraggedItem(view, dragged) {
+        if (!dragged)
+            return false;
+        return (this.itemIdFn()(view.context.$implicit) === dragged.draggableId ||
+            view.rootNodes.some((node) => node.contains(dragged.element)));
+    }
+    /**
+     * Take a row's view out of the outlet and pool it. It keeps its element, so its shift
+     * animation is cancelled (the item it renders next must not slide from this one's position),
+     * and a drop animation that hides it shows it again.
+     */
+    #poolRow(outlet, view) {
+        outlet.detach(outlet.indexOf(view));
+        const nodes = view.rootNodes;
+        // A leave animation (`animate.leave`) keeps the row in the DOM, and Angular removes it when
+        // the animation ends: in the row of another item by then, if the view were reused
+        if (nodes.some((node) => node.parentNode !== null)) {
+            view.destroy();
+            return;
+        }
+        for (const node of nodes) {
+            if (node instanceof HTMLElement) {
+                this.#shiftAnimator?.cancel(node);
+            }
+        }
+        revealDropTargetIn(nodes);
+        this.#rowPool.push(view);
+    }
+    #destroyRowPool() {
+        for (const view of this.#rowPool) {
+            view.destroy();
+        }
+        this.#rowPool = [];
+    }
+    /** Move a row's view right before `next` (last without one), unless it is there already. */
+    #moveBefore(outlet, view, next) {
+        const target = next ? outlet.indexOf(next) : outlet.length;
+        const current = outlet.indexOf(view);
+        if (current === target - 1)
+            return;
+        // move() takes the view out before inserting it, which shifts the views after it
+        outlet.move(view, current < target ? target - 1 : target);
+    }
+    /** Copy an entry into a row's context. Returns whether the context changed. */
+    #updateContext(context, entry) {
+        if (Object.is(context.$implicit, entry.data) &&
+            context.index === entry.index &&
+            context.isSticky === entry.isSticky) {
+            return false;
+        }
+        context.$implicit = entry.data;
+        context.index = entry.index;
+        context.isSticky = entry.isSticky;
+        return true;
+    }
+    /** Items sharing a track key still render (a view each), but drag and drop needs unique IDs. */
+    #warnDuplicateKeys(keys) {
+        if (this.#warnedDuplicateKeys || keys === this.#rowKeysChecked || !isDevMode())
+            return;
+        this.#rowKeysChecked = keys;
+        const seen = new Set();
+        for (const key of keys) {
+            if (seen.has(key)) {
+                this.#warnedDuplicateKeys = true;
+                console.warn(`[ngx-virtual-dnd] vdnd-virtual-scroll rendered two items with the track key ` +
+                    `${String(key)}. Give every item a unique ID (itemIdFn, or trackByFn).`);
+                return;
+            }
+            seen.add(key);
+        }
+    }
+    /**
+     * Put the placeholder before the row at `slot` (see #placeholderSlot), or take it out of the
+     * DOM. It is a DragPlaceholderComponent of its own, outside this view: moving it or setting its
+     * height checks no row.
+     */
+    #renderPlaceholder(outlet, slot, height) {
+        if (slot < 0 || height === null) {
+            this.#placeholderElement()?.remove();
+            return;
+        }
+        this.#placeholder ??= createComponent(DragPlaceholderComponent, {
+            environmentInjector: this.#environmentInjector,
+        });
+        if (height !== this.#placeholderHeightSet) {
+            this.#placeholder.setInput('itemHeight', height);
+            this.#placeholder.changeDetectorRef.detectChanges();
+            this.#placeholderHeightSet = height;
+        }
+        // Rows are inserted before the outlet's anchor, so the anchor follows the last of them
+        const anchor = outlet.element.nativeElement;
+        const parent = anchor.parentNode;
+        const element = this.#placeholderElement();
+        if (!parent || !element)
+            return;
+        const before = this.#firstNodeOfRows(slot, parent) ?? anchor;
+        if (element.nextSibling !== before) {
+            parent.insertBefore(element, before);
+        }
+    }
+    #placeholderElement() {
+        return this.#placeholder?.location.nativeElement ?? null;
+    }
+    /** The first node in `parent` of the rows from `index` on (null when none has one). */
+    #firstNodeOfRows(index, parent) {
+        for (let i = index; i < this.#rows.length; i++) {
+            const nodes = this.#rows[i].view.rootNodes.filter((node) => node.parentNode === parent);
+            const node = firstInDocumentOrder(nodes);
+            if (node)
+                return node;
+        }
+        return null;
+    }
     ngOnDestroy() {
         this.#scrollCleanup?.();
         this.#resizeCleanup?.();
@@ -3249,6 +4309,12 @@ class VirtualScrollContainerComponent {
         this.#observedElementByKey.clear();
         itemResizeObserver?.disconnect();
         this.#shiftAnimator?.cancelAll();
+        // Detached, so not destroyed with this view
+        this.#destroyRowPool();
+        // Created outside this view, so not destroyed with it (and destroy() leaves it in the DOM)
+        this.#placeholderElement()?.remove();
+        this.#placeholder?.destroy();
+        this.#placeholder = null;
     }
     #createShiftAnimator() {
         const config = inject(VDND_ANIMATION_CONFIG, { optional: true });
@@ -3262,10 +4328,25 @@ class VirtualScrollContainerComponent {
         });
     }
     /**
-     * Rendered item roots and the placeholder. `@for` never reuses a view for a different
-     * track key, so each element is its own stable identity.
+     * Rendered item roots, keyed by the row's track key (a recycled view renders another item, so
+     * its element is no identity), and the placeholder.
      */
     *#shiftAnimationEntries() {
+        if (this.rowOutlet()) {
+            for (const row of this.#rows) {
+                for (const node of row.view.rootNodes) {
+                    if (node instanceof HTMLElement) {
+                        yield [row.key, node];
+                    }
+                }
+            }
+            const placeholder = this.#placeholderElement();
+            if (placeholder?.isConnected) {
+                yield [placeholder, placeholder];
+            }
+            return;
+        }
+        // A subclass's own template (see #render) never recycles: each element is its own identity
         const wrapper = this.#elementRef.nativeElement.querySelector('.vdnd-virtual-scroll-content-wrapper');
         if (!wrapper)
             return;
@@ -3299,25 +4380,29 @@ class VirtualScrollContainerComponent {
      * item when a new observer is created.
      */
     #observeRenderedItems() {
-        // Re-observe whenever rendered items change, once they are in the DOM (a plain effect runs
-        // before the template renders them, so newly rendered rows would be missed)
+        // Re-observe whenever the rows change, once #render has put them in the DOM. The rows, not
+        // renderedItems(): a placeholder move changes no row. A new item template changes no entry
+        // but renders every row anew, as new elements.
         afterRenderEffect(() => {
             const observer = this.#itemResizeObserver();
             if (!observer)
                 return;
-            const rendered = this.renderedItems();
+            const rendered = this.#renderedRows();
             const idFn = this.itemIdFn();
+            this.itemTemplate();
             // Find the content wrapper and observe item elements
             const wrapper = this.#elementRef.nativeElement.querySelector('.vdnd-virtual-scroll-content-wrapper');
             if (!wrapper)
                 return;
+            // The DOM element of each item, by its data-draggable-id: one query for all rows, where a
+            // query per row scanned the wrapper once for each (quadratic in the rendered rows)
+            const elementsById = mapByAttribute(wrapper, 'data-draggable-id');
             const nextObservedByKey = new Map();
             for (const entry of rendered) {
                 if (entry.type !== 'item' || !entry.data)
                     continue;
                 const key = idFn(entry.data);
-                // Find the DOM element for this item by its data-draggable-id.
-                const el = queryByAttribute(wrapper, 'data-draggable-id', key);
+                const el = elementsById.get(key);
                 if (el) {
                     nextObservedByKey.set(key, el);
                 }
@@ -3356,206 +4441,56 @@ class VirtualScrollContainerComponent {
      */
     scrollToIndex(index) {
         const strategy = this.#strategy();
-        const position = strategy.getOffsetForIndex(index);
-        this.scrollTo(position);
-    }
-    /**
-     * Get the current scroll position.
-     */
-    getScrollTop() {
-        return this.#scrollTop();
-    }
-    /**
-     * Get the total scrollable height.
-     */
-    getScrollHeight() {
-        return this.totalHeight();
-    }
-    /**
-     * Scroll by a delta amount.
-     */
-    scrollBy(delta) {
-        const newPosition = Math.max(0, Math.min(this.getScrollTop() + delta, this.getScrollHeight() - this.effectiveHeight()));
-        this.scrollTo(newPosition);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VirtualScrollContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VirtualScrollContainerComponent, isStandalone: true, selector: "vdnd-virtual-scroll", inputs: { itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: true, transformFunction: null }, scrollContainerId: { classPropertyName: "scrollContainerId", publicName: "scrollContainerId", isSignal: true, isRequired: false, transformFunction: null }, autoScrollEnabled: { classPropertyName: "autoScrollEnabled", publicName: "autoScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollConfig: { classPropertyName: "autoScrollConfig", publicName: "autoScrollConfig", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: true, transformFunction: null }, dynamicItemHeight: { classPropertyName: "dynamicItemHeight", publicName: "dynamicItemHeight", isSignal: true, isRequired: false, transformFunction: null }, containerHeight: { classPropertyName: "containerHeight", publicName: "containerHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, stickyItemIds: { classPropertyName: "stickyItemIds", publicName: "stickyItemIds", isSignal: true, isRequired: false, transformFunction: null }, itemIdFn: { classPropertyName: "itemIdFn", publicName: "itemIdFn", isSignal: true, isRequired: true, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, droppableId: { classPropertyName: "droppableId", publicName: "droppableId", isSignal: true, isRequired: false, transformFunction: null }, autoStickyDraggedItem: { classPropertyName: "autoStickyDraggedItem", publicName: "autoStickyDraggedItem", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height.px": "containerHeight() ?? null", "attr.data-item-height": "itemHeight()", "attr.data-total-items": "items().length" }, classAttribute: "vdnd-virtual-scroll" }, ngImport: i0, template: `
-    <!-- Single spacer maintains scroll height -->
-    <div class="vdnd-virtual-scroll-spacer" [style.height.px]="totalHeight()"></div>
-
-    <!-- Content wrapper positioned via GPU-accelerated transform -->
-    <div class="vdnd-virtual-scroll-content-wrapper" [style.transform]="contentTransform()">
-      @for (entry of renderedItems(); track trackEntry($index, entry)) {
-        @if (entry.type === 'placeholder') {
-          <vdnd-drag-placeholder [itemHeight]="placeholderHeight()" />
-        } @else {
-          <ng-container
-            *ngTemplateOutlet="
-              itemTemplate();
-              context: {
-                $implicit: entry.data,
-                index: entry.index,
-                isSticky: entry.isSticky,
-              }
-            "
-          >
-          </ng-container>
-        }
-      }
-    </div>
-  `, isInline: true, styles: [":host{display:block;overflow:auto;position:relative;overflow-anchor:none}.vdnd-virtual-scroll-spacer{position:absolute;top:0;left:0;width:1px;visibility:hidden;pointer-events:none}.vdnd-virtual-scroll-content-wrapper{position:absolute;top:0;left:0;right:0;will-change:transform}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DragPlaceholderComponent, selector: "vdnd-drag-placeholder", inputs: ["itemHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VirtualScrollContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdnd-virtual-scroll', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, DragPlaceholderComponent], host: {
-                        class: 'vdnd-virtual-scroll',
-                        '[style.height.px]': 'containerHeight() ?? null',
-                        '[attr.data-item-height]': 'itemHeight()',
-                        '[attr.data-total-items]': 'items().length',
-                    }, template: `
-    <!-- Single spacer maintains scroll height -->
-    <div class="vdnd-virtual-scroll-spacer" [style.height.px]="totalHeight()"></div>
-
-    <!-- Content wrapper positioned via GPU-accelerated transform -->
-    <div class="vdnd-virtual-scroll-content-wrapper" [style.transform]="contentTransform()">
-      @for (entry of renderedItems(); track trackEntry($index, entry)) {
-        @if (entry.type === 'placeholder') {
-          <vdnd-drag-placeholder [itemHeight]="placeholderHeight()" />
-        } @else {
-          <ng-container
-            *ngTemplateOutlet="
-              itemTemplate();
-              context: {
-                $implicit: entry.data,
-                index: entry.index,
-                isSticky: entry.isSticky,
-              }
-            "
-          >
-          </ng-container>
-        }
-      }
-    </div>
-  `, styles: [":host{display:block;overflow:auto;position:relative;overflow-anchor:none}.vdnd-virtual-scroll-spacer{position:absolute;top:0;left:0;width:1px;visibility:hidden;pointer-events:none}.vdnd-virtual-scroll-content-wrapper{position:absolute;top:0;left:0;right:0;will-change:transform}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: true }] }], scrollContainerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainerId", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: true }] }], dynamicItemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicItemHeight", required: false }] }], containerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], stickyItemIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyItemIds", required: false }] }], itemIdFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemIdFn", required: true }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], droppableId: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppableId", required: false }] }], autoStickyDraggedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoStickyDraggedItem", required: false }] }] } });
-
-/**
- * Plays the drop ("settle") animation: the drag preview glides from where it was released
- * into the dropped item's final position, while that item stays invisible underneath.
- *
- * Purely visual. The drag state and the drop events are already final when it starts, so it
- * never delays or changes a drop. Without a target (the item is not rendered, or scrolled out
- * of view) the ghost fades out where it was released.
- * @internal
- */
-class DropAnimator {
-    #config;
-    #ghostAnimation = null;
-    #hideAnimation = null;
-    constructor(config) {
-        this.#config = config;
-    }
-    /** Whether a drop animation would play right now (duration, WAAPI, reduced motion). */
-    isEnabled() {
-        if (this.#duration() <= 0)
-            return false;
-        if (typeof Element === 'undefined' || typeof Element.prototype.animate !== 'function') {
-            return false;
-        }
-        if (typeof matchMedia !== 'function')
-            return true;
-        return !matchMedia('(prefers-reduced-motion: reduce)').matches;
-    }
-    /**
-     * Animate `ghost` onto `target` (or fade it out without one), then call `onDone`.
-     * `onDone` is not called when the animation is cancelled.
-     */
-    play(ghost, target, onDone) {
-        this.cancel();
-        const timing = {
-            duration: this.#duration(),
-            easing: this.#config.dropEasing ?? DEFAULT_DROP_EASING,
-            fill: 'forwards',
-        };
-        let ghostAnimation;
-        if (target) {
-            const from = ghost.getBoundingClientRect();
-            const dx = target.rect.left - from.left;
-            const dy = target.rect.top - from.top;
-            // Travel on top of the preview's own position transform (width/height must not be
-            // composited, so the base transform is repeated instead of using composite: 'add').
-            const base = ghost.style.transform;
-            ghostAnimation = ghost.animate([
-                {
-                    transform: `${base} translate(0px, 0px)`,
-                    width: `${from.width}px`,
-                    height: `${from.height}px`,
-                },
-                {
-                    transform: `${base} translate(${dx}px, ${dy}px)`,
-                    width: `${target.rect.width}px`,
-                    height: `${target.rect.height}px`,
-                },
-            ], timing);
-            // Keep the real item invisible until the ghost lands on it, so it is never seen twice.
-            this.#hideAnimation = target.element.animate([{ opacity: 0 }, { opacity: 0 }], {
-                duration: timing.duration,
-            });
-        }
-        else {
-            ghostAnimation = ghost.animate([{ opacity: 1 }, { opacity: 0 }], timing);
-        }
-        this.#ghostAnimation = ghostAnimation;
-        ghostAnimation.onfinish = () => {
-            if (this.#ghostAnimation !== ghostAnimation)
-                return;
-            this.cancel();
-            onDone();
-        };
+        const position = strategy.getOffsetForIndex(index);
+        this.scrollTo(position);
     }
-    /** Stop the running animation immediately and reveal the real item. */
-    cancel() {
-        const ghostAnimation = this.#ghostAnimation;
-        const hideAnimation = this.#hideAnimation;
-        this.#ghostAnimation = null;
-        this.#hideAnimation = null;
-        ghostAnimation?.cancel();
-        hideAnimation?.cancel();
+    /**
+     * Get the current scroll position.
+     */
+    getScrollTop() {
+        return this.#scrollTop();
     }
-    #duration() {
-        return this.#config.dropDuration ?? DEFAULT_DROP_DURATION;
+    /**
+     * Get the total scrollable height.
+     */
+    getScrollHeight() {
+        return this.totalHeight();
     }
-}
-/**
- * Find the rendered element of a dropped item: first in the droppable it was dropped on, then
- * in the one it came from (a drop the consumer rejected or has not committed yet leaves it
- * there). Returns null when it is not rendered, or rendered but scrolled out of its list's view.
- */
-function findDropTarget(draggableId, droppableIds) {
-    if (typeof document === 'undefined')
-        return null;
-    for (const droppableId of droppableIds) {
-        if (!droppableId)
-            continue;
-        const droppable = queryByAttribute(document, 'data-droppable-id', droppableId);
-        const element = droppable
-            ? queryByAttribute(droppable, 'data-draggable-id', draggableId)
-            : null;
-        if (!droppable || !element)
-            continue;
-        const rect = element.getBoundingClientRect();
-        // Hidden, or virtualized/scrolled out of the list's visible box: nowhere to land.
-        if (rect.width === 0 && rect.height === 0)
-            return null;
-        const bounds = droppable.getBoundingClientRect();
-        const visible = rect.bottom > bounds.top &&
-            rect.top < bounds.bottom &&
-            rect.right > bounds.left &&
-            rect.left < bounds.right;
-        return visible ? { element, rect } : null;
+    /**
+     * Scroll by a delta amount.
+     */
+    scrollBy(delta) {
+        const newPosition = Math.max(0, Math.min(this.getScrollTop() + delta, this.getScrollHeight() - this.effectiveHeight()));
+        this.scrollTo(newPosition);
     }
-    return null;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VirtualScrollContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: VirtualScrollContainerComponent, isStandalone: true, selector: "vdnd-virtual-scroll", inputs: { itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: true, transformFunction: null }, scrollContainerId: { classPropertyName: "scrollContainerId", publicName: "scrollContainerId", isSignal: true, isRequired: false, transformFunction: null }, autoScrollEnabled: { classPropertyName: "autoScrollEnabled", publicName: "autoScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollConfig: { classPropertyName: "autoScrollConfig", publicName: "autoScrollConfig", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: true, transformFunction: null }, dynamicItemHeight: { classPropertyName: "dynamicItemHeight", publicName: "dynamicItemHeight", isSignal: true, isRequired: false, transformFunction: null }, containerHeight: { classPropertyName: "containerHeight", publicName: "containerHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, stickyItemIds: { classPropertyName: "stickyItemIds", publicName: "stickyItemIds", isSignal: true, isRequired: false, transformFunction: null }, itemIdFn: { classPropertyName: "itemIdFn", publicName: "itemIdFn", isSignal: true, isRequired: true, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, droppableId: { classPropertyName: "droppableId", publicName: "droppableId", isSignal: true, isRequired: false, transformFunction: null }, recycleRows: { classPropertyName: "recycleRows", publicName: "recycleRows", isSignal: true, isRequired: false, transformFunction: null }, autoStickyDraggedItem: { classPropertyName: "autoStickyDraggedItem", publicName: "autoStickyDraggedItem", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height.px": "containerHeight() ?? null", "attr.data-item-height": "itemHeight()", "attr.data-total-items": "items().length" }, classAttribute: "vdnd-virtual-scroll" }, viewQueries: [{ propertyName: "spacer", first: true, predicate: ["spacer"], descendants: true, isSignal: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, isSignal: true }, { propertyName: "rowOutlet", first: true, predicate: ["rows"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `
+    <!-- Single spacer maintains scroll height -->
+    <div #spacer class="vdnd-virtual-scroll-spacer"></div>
+
+    <!-- Content wrapper positioned via GPU-accelerated transform -->
+    <div #contentWrapper class="vdnd-virtual-scroll-content-wrapper">
+      <ng-container #rows />
+    </div>
+  `, isInline: true, styles: [":host{display:block;overflow:auto;position:relative;overflow-anchor:none}.vdnd-virtual-scroll-spacer{position:absolute;top:0;left:0;width:1px;visibility:hidden;pointer-events:none}.vdnd-virtual-scroll-content-wrapper{position:absolute;top:0;left:0;right:0;will-change:transform}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VirtualScrollContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdnd-virtual-scroll', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'vdnd-virtual-scroll',
+                        '[style.height.px]': 'containerHeight() ?? null',
+                        '[attr.data-item-height]': 'itemHeight()',
+                        '[attr.data-total-items]': 'items().length',
+                    }, template: `
+    <!-- Single spacer maintains scroll height -->
+    <div #spacer class="vdnd-virtual-scroll-spacer"></div>
+
+    <!-- Content wrapper positioned via GPU-accelerated transform -->
+    <div #contentWrapper class="vdnd-virtual-scroll-content-wrapper">
+      <ng-container #rows />
+    </div>
+  `, styles: [":host{display:block;overflow:auto;position:relative;overflow-anchor:none}.vdnd-virtual-scroll-spacer{position:absolute;top:0;left:0;width:1px;visibility:hidden;pointer-events:none}.vdnd-virtual-scroll-content-wrapper{position:absolute;top:0;left:0;right:0;will-change:transform}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { spacer: [{ type: i0.ViewChild, args: ['spacer', { isSignal: true }] }], contentWrapper: [{ type: i0.ViewChild, args: ['contentWrapper', { isSignal: true }] }], rowOutlet: [{ type: i0.ViewChild, args: ['rows', { ...{ read: ViewContainerRef }, isSignal: true }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: true }] }], scrollContainerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainerId", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: true }] }], dynamicItemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicItemHeight", required: false }] }], containerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], stickyItemIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyItemIds", required: false }] }], itemIdFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemIdFn", required: true }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], droppableId: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppableId", required: false }] }], recycleRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "recycleRows", required: false }] }], autoStickyDraggedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoStickyDraggedItem", required: false }] }] } });
 
 /**
  * Renders a preview of the dragged item that follows the cursor.
@@ -3581,6 +4516,8 @@ class DragPreviewComponent {
     #overlayContainer = inject(OverlayContainerService);
     #elementRef = inject((ElementRef));
     #injector = inject(Injector);
+    #droppableRegistry = inject(DroppableRegistryService);
+    #scheduler = inject(DragSchedulerService);
     #dropAnimator = this.#createDropAnimator();
     /** Optional custom template for the preview */
     previewTemplate = input(...(ngDevMode ? [undefined, { debugName: "previewTemplate" }] : []));
@@ -3598,6 +4535,39 @@ class DragPreviewComponent {
     isSettling = computed(() => this.#settling() !== null, ...(ngDevMode ? [{ debugName: "isSettling" }] : []));
     /** The item shown: the live dragged item, or the dropped one while it settles */
     displayedItem = computed(() => this.dragState.draggedItem() ?? this.#settling()?.item ?? null, ...(ngDevMode ? [{ debugName: "displayedItem" }] : []));
+    /**
+     * Where the preview goes, from everything but the cursor. The template and its effects never
+     * read the cursor: a signal read there would schedule a full application render on every
+     * pointer frame, and that render lands after the frame is painted (one frame late).
+     */
+    #placement = computed(() => {
+        const settling = this.#settling();
+        if (settling && !this.dragState.isDragging()) {
+            return {
+                settled: settling.position,
+                offset: { x: 0, y: 0 },
+                initialPosition: null,
+                lockAxis: null,
+            };
+        }
+        return this.#placementFor({
+            grabOffset: this.dragState.grabOffset(),
+            initialPosition: this.dragState.initialPosition(),
+            lockAxis: this.dragState.lockAxis(),
+        });
+    }, ...(ngDevMode ? [{ debugName: "#placement" }] : []));
+    /**
+     * Moves the preview inside the drag scheduler's frame, right after the hit-test wrote the
+     * cursor (bound for stable add/remove). The render-time write in the constructor covers the
+     * rest: the preview appearing, keyboard drags and the settle.
+     */
+    #writeFramePosition = () => {
+        const preview = this.previewElement()?.nativeElement;
+        if (!preview || this.#settling() || !this.dragState.isDragging()) {
+            return;
+        }
+        this.#place(preview, this.#placement(), this.dragState.cursorPosition());
+    };
     /** Whether this preview's template registration is currently counted (kept balanced). */
     #templateRegistered = false;
     /** The cloned element from drag state (used when no custom template is provided) */
@@ -3608,6 +4578,7 @@ class DragPreviewComponent {
         return this.displayedItem()?.clonedElement ?? null;
     }, ...(ngDevMode ? [{ debugName: "clonedElement" }] : []));
     constructor() {
+        this.#scheduler.addFrameWriter(this.#writeFramePosition);
         // Teleport host element into the body-level overlay container after first render.
         // This escapes any ancestor CSS transforms that would break position: fixed.
         afterNextRender(() => {
@@ -3616,6 +4587,18 @@ class DragPreviewComponent {
                 container.appendChild(this.#elementRef.nativeElement);
             }
         });
+        // Place the preview when it appears or anything but the cursor changes (drag start,
+        // keyboard drags, the settle). The cursor is read untracked; pointer moves are written by
+        // #writeFramePosition. Runs before the settle's afterNextRender reads the transform.
+        afterRenderEffect({
+            write: () => {
+                const preview = this.previewElement()?.nativeElement;
+                const placement = this.#placement();
+                if (preview) {
+                    this.#place(preview, placement, untracked(this.dragState.cursorPosition));
+                }
+            },
+        });
         // Publish whether this preview renders via a custom template so the drag
         // directives can skip the drag-start element clone when it won't be shown.
         effect(() => {
@@ -3660,6 +4643,7 @@ class DragPreviewComponent {
         });
     }
     ngOnDestroy() {
+        this.#scheduler.removeFrameWriter(this.#writeFramePosition);
         this.#dropAnimator?.cancel();
         if (this.#templateRegistered) {
             this.#overlayContainer.setTemplatePreviewActive(false);
@@ -3667,32 +4651,31 @@ class DragPreviewComponent {
         }
         this.#elementRef.nativeElement.remove();
     }
-    /** Whether the preview is visible */
+    /**
+     * Whether the preview is visible. A drag shows it once it has a position: `initialPosition`
+     * is set from the drag-start cursor and, unlike `cursorPosition`, does not change per frame.
+     */
     isVisible = computed(() => {
-        return ((this.dragState.isDragging() && this.dragState.cursorPosition() !== null) || this.isSettling());
+        return ((this.dragState.isDragging() && this.dragState.initialPosition() !== null) ||
+            this.isSettling());
     }, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
-    /** Position of the preview */
-    position = computed(() => {
-        const settling = this.#settling();
-        if (settling && !this.dragState.isDragging()) {
-            return settling.position;
+    #placementFor(state) {
+        return {
+            settled: null,
+            // Use grab offset if available (preserves grab position), otherwise fall back to cursorOffset input
+            offset: state.grabOffset ?? this.cursorOffset(),
+            initialPosition: state.initialPosition,
+            lockAxis: state.lockAxis,
+        };
+    }
+    #positionAt(placement, cursor) {
+        if (placement.settled) {
+            return placement.settled;
         }
-        return this.#positionFor({
-            cursorPosition: this.dragState.cursorPosition(),
-            grabOffset: this.dragState.grabOffset(),
-            initialPosition: this.dragState.initialPosition(),
-            lockAxis: this.dragState.lockAxis(),
-        });
-    }, ...(ngDevMode ? [{ debugName: "position" }] : []));
-    #positionFor(state) {
-        const cursor = state.cursorPosition;
-        const initialPosition = state.initialPosition;
-        const lockAxis = state.lockAxis;
         if (!cursor) {
             return { x: 0, y: 0 };
         }
-        // Use grab offset if available (preserves grab position), otherwise fall back to cursorOffset input
-        const offset = state.grabOffset ?? this.cursorOffset();
+        const { offset, initialPosition, lockAxis } = placement;
         let x = cursor.x - offset.x;
         let y = cursor.y - offset.y;
         // Apply axis locking if configured
@@ -3709,10 +4692,10 @@ class DragPreviewComponent {
         return { x, y };
     }
     /** Transform-based positioning for better performance (avoid layout from left/top). */
-    transform = computed(() => {
-        const { x, y } = this.position();
-        return `translate3d(${x}px, ${y}px, 0)`;
-    }, ...(ngDevMode ? [{ debugName: "transform" }] : []));
+    #place(preview, placement, cursor) {
+        const { x, y } = this.#positionAt(placement, cursor);
+        preview.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+    }
     /** Dimensions of the preview */
     dimensions = computed(() => {
         const item = this.displayedItem();
@@ -3748,7 +4731,7 @@ class DragPreviewComponent {
         }
         const settling = {
             item: ended.draggedItem,
-            position: this.#positionFor(ended),
+            position: this.#positionAt(this.#placementFor(ended), ended.cursorPosition),
         };
         this.#settling.set(settling);
         // A normal drop lands in the target list; a cancel, a rejected drop or one the consumer
@@ -3765,7 +4748,7 @@ class DragPreviewComponent {
                 this.#settling.set(null);
                 return;
             }
-            const target = findDropTarget(settling.item.draggableId, droppableIds);
+            const target = findDropTarget(settling.item.draggableId, droppableIds, (id) => this.#droppableRegistry.getById(id));
             this.#dropAnimator.play(ghost, target, () => {
                 if (this.#settling() === settling) {
                     this.#settling.set(null);
@@ -3785,7 +4768,6 @@ class DragPreviewComponent {
         class="vdnd-drag-preview"
         [class.vdnd-drag-preview-dropping]="isSettling()"
         [attr.data-testid]="isSettling() ? 'vdnd-drag-preview-dropping' : 'vdnd-drag-preview'"
-        [style.transform]="transform()"
         [style.width.px]="dimensions().width"
         [style.height.px]="dimensions().height"
       >
@@ -3812,7 +4794,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         class="vdnd-drag-preview"
         [class.vdnd-drag-preview-dropping]="isSettling()"
         [attr.data-testid]="isSettling() ? 'vdnd-drag-preview-dropping' : 'vdnd-drag-preview'"
-        [style.transform]="transform()"
         [style.width.px]="dimensions().width"
         [style.height.px]="dimensions().height"
       >
@@ -4013,7 +4994,8 @@ class DroppableDirective {
     #elementRef = inject((ElementRef));
     #dragState = inject(DragStateService);
     #autoScroll = inject(AutoScrollService);
-    #positionCalculator = inject(PositionCalculatorService);
+    #registry = inject(DroppableRegistryService);
+    #ngZone = inject(NgZone);
     #parentGroup = inject(VDND_GROUP_TOKEN, { optional: true });
     /** Unique identifier for this droppable */
     vdndDroppable = input.required(...(ngDevMode ? [{ debugName: "vdndDroppable" }] : []));
@@ -4042,7 +5024,7 @@ class DroppableDirective {
     autoScrollConfig = input({}, ...(ngDevMode ? [{ debugName: "autoScrollConfig" }] : []));
     /** Constrain drag preview and placeholder to container boundaries */
     constrainToContainer = input(false, ...(ngDevMode ? [{ debugName: "constrainToContainer" }] : []));
-    /** Emits when an item is dropped on this droppable */
+    /** Emits when an item is dropped on this droppable: at release, right after its `dragEnd` */
     // eslint-disable-next-line @angular-eslint/no-output-native
     drop = output();
     /**
@@ -4087,14 +5069,6 @@ class DroppableDirective {
     #lastPlaceholderIndex = null;
     /** Drag whose initial placeholder position has already been seen by this droppable */
     #placeholderTrackedDrag = null;
-    /** Track previous active state to detect the drag-end transition */
-    #wasActive = false;
-    /**
-     * The terminal drag snapshot this droppable has already processed. `endedDragState`
-     * persists until the next drag starts, so this guards against replaying the same drop
-     * when the effect re-runs (e.g. `disabled()` toggling) after the drag has ended.
-     */
-    #handledEndedState = null;
     /** Whether this droppable has rendered, so its inputs have values */
     #rendered = false;
     constructor() {
@@ -4109,59 +5083,33 @@ class DroppableDirective {
             // would never register. AutoScrollService filters by live scroll geometry per drag.
             canRegister: () => Boolean(this.effectiveGroup()),
         });
-        // Notify the calculator once this droppable is rendered (host data attributes applied).
-        // Matters when it mounts DURING an active drag — the candidate snapshot was frozen at
-        // drag start, so without this a conditionally rendered list would never become a target.
-        afterNextRender(() => {
-            this.#rendered = true;
+        afterNextRender(() => (this.#rendered = true));
+        // Register with the droppable registry, and again under the new key when the ID or group
+        // changes. Drag code finds drop targets through the registry instead of querying the
+        // document; a registration during an active drag makes this droppable a target from the
+        // next hit-test. The registry also calls #handleDrop when a drag ends on this droppable.
+        // The cleanup unregisters it, including on destroy.
+        //
+        // Not deferred to afterNextRender: this runs in the change detection that creates the
+        // droppable (inputs are set by then), so afterNextRender hooks of that same render (drop
+        // animation, keyboard focus restore) already find it, and so does a view refreshed only
+        // by its own detectChanges(). Nothing reads the registry before change detection ends.
+        effect((onCleanup) => {
             const group = this.effectiveGroup();
-            if (group) {
-                this.#positionCalculator.notifyCandidatesChanged(group);
+            if (!group) {
+                return;
             }
+            onCleanup(this.#registry.register(this.#elementRef.nativeElement, this.vdndDroppable(), group, (endedState) => this.#handleDrop(endedState)));
         });
         effect(() => {
             const currentIndex = this.#placeholderInsertionIndex();
             untracked(() => this.#handlePlaceholderMove(currentIndex));
         });
-        // React to state changes and handle drop events.
-        //
-        // Keyed only on the low-frequency fields (isActive/isDragging/draggedItem). The final
-        // placeholder/index values #handleDrop needs are captured by DragStateService.endDrag()
-        // into endedDragState() at the drag-end boundary, so this effect never has to poll the
-        // high-frequency cursor/placeholder signals — reading them here would make it re-run and
-        // re-allocate a snapshot on every 60fps frame, defeating the service's signal splitting.
-        effect(() => {
-            const active = this.isActive();
-            const draggedItem = this.#dragState.draggedItem();
-            const isDragging = this.#dragState.isDragging();
-            // Handle drag end (drop). This droppable is the release target when it was either
-            // observed active during the drag (#wasActive) OR named as the target in the ended
-            // drag snapshot. The snapshot path covers the pointer-up flush, where the final
-            // position is processed and the state cleared in the same synchronous task, so this
-            // effect never observes isActive() === true mid-drag and #wasActive stays false.
-            const endedState = untracked(() => this.#dragState.endedDragState());
-            const endedTargetedThis = endedState?.activeDroppableId === this.vdndDroppable();
-            if (!isDragging && draggedItem === null && (this.#wasActive || endedTargetedThis)) {
-                // Consume each terminal snapshot exactly once. endedDragState persists until the
-                // next drag starts and disabled()/other inputs re-run this effect, so without a
-                // per-snapshot guard a later state change would replay the same historical drop.
-                if (endedState !== this.#handledEndedState) {
-                    this.#handledEndedState = endedState;
-                    // Emit only for an enabled target that ended normally. A target disabled at
-                    // release still consumes the snapshot (so re-enabling can't resurrect the drop)
-                    // but emits nothing, keeping dragEnd and drop consistent.
-                    if (!this.disabled() && !this.#dragState.wasCancelled()) {
-                        this.#handleDrop();
-                    }
-                }
-            }
-            this.#wasActive = active;
-        });
     }
     ngOnDestroy() {
-        // Destroyed before it rendered: its inputs may have no values yet, and it never became a
-        // drop target or a candidate the calculator knows about. (Not an ngOnInit flag: a subclass
-        // with its own ngOnInit would skip it.)
+        // Destroyed before it rendered: its inputs may have no values yet and it never became the
+        // active drop target. (Not an ngOnInit flag: a subclass with its own ngOnInit would skip
+        // it.) A registry registration, if any, is removed by its effect's cleanup.
         if (!this.#rendered) {
             return;
         }
@@ -4169,13 +5117,7 @@ class DroppableDirective {
         if (this.isActive()) {
             this.#dragState.setActiveDroppable(null);
         }
-        // Auto-scroll unregisters itself on destroy (see createAutoScrollRegistration).
-        // If this droppable unmounts mid-drag, tell the calculator so it drops it from the
-        // frozen candidate list (deferred re-query runs once the element has left the DOM).
-        const group = untracked(() => this.effectiveGroup());
-        if (group) {
-            this.#positionCalculator.notifyCandidatesChanged(group);
-        }
+        // Auto-scroll and the droppable registry unregister through their effects' cleanup.
     }
     /**
      * Emit placeholderMove when the placeholder moved within (or entered) this droppable.
@@ -4209,14 +5151,14 @@ class DroppableDirective {
         });
     }
     /**
-     * Handle a drop on this droppable.
+     * Emit `drop` for a drag that ended on this droppable. Called by the registry from
+     * `DragStateService.endDrag()`, with the state captured just before the reset. Returns
+     * whether it emitted.
      */
-    #handleDrop() {
-        // The live state is cleared before this effect fires, so read the terminal snapshot
-        // captured by endDrag()/cancelDrag() immediately before the reset.
-        const state = untracked(() => this.#dragState.endedDragState());
-        if (!state?.draggedItem || state.activeDroppableId !== this.vdndDroppable()) {
-            return;
+    #handleDrop(state) {
+        // A target disabled at release is not a valid drop (dragEnd reports no destination).
+        if (this.disabled() || !state.draggedItem || state.activeDroppableId !== this.vdndDroppable()) {
+            return false;
         }
         const sourceDroppableId = state.sourceDroppableId ?? '';
         const placeholderId = state.placeholderId ?? END_OF_LIST;
@@ -4236,7 +5178,7 @@ class DroppableDirective {
             sourceDroppableId,
             activeDroppableId: this.vdndDroppable(),
         });
-        this.drop.emit({
+        const event = {
             source: {
                 draggableId: state.draggedItem.draggableId,
                 droppableId: sourceDroppableId,
@@ -4249,7 +5191,13 @@ class DroppableDirective {
                 index: destinationIndex,
                 data: this.vdndDroppableData(),
             },
-        });
+        };
+        // Delivered from the pointer/keyboard listener, which runs outside Angular's zone. With
+        // zone.js a template listener marks its view dirty without scheduling a render, so emit
+        // inside the zone for the consumer's handler (and async work it starts) to render. A
+        // no-op when zoneless.
+        this.#ngZone.run(() => this.drop.emit(event));
+        return true;
     }
     /**
      * Get the index of an item in a droppable.
@@ -4257,7 +5205,7 @@ class DroppableDirective {
      */
     #getItemIndex(draggableId, droppableId) {
         // Find all draggables in the source droppable
-        const droppable = queryByAttribute(document, 'data-droppable-id', droppableId);
+        const droppable = this.#registry.getById(droppableId);
         if (!droppable) {
             return 0;
         }
@@ -4330,6 +5278,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { vdndDroppable: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDroppable", required: true }] }], vdndDroppableGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDroppableGroup", required: false }] }], vdndDroppableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDroppableData", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }], constrainToContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "constrainToContainer", required: false }] }], drop: [{ type: i0.Output, args: ["drop"] }], placeholderMove: [{ type: i0.Output, args: ["placeholderMove"] }] } });
 
+/**
+ * Forwards the inner droppable's `drop` and `placeholderMove` to the sortable list's outputs.
+ *
+ * Not template listeners: Angular marks the listening view and every ancestor up to the root
+ * dirty before running one, so each placeholder move would re-render the consumer's whole
+ * component chain even when nothing listens to `placeholderMove`. A subscription marks nothing;
+ * a consumer's own listener on the sortable list marks only its own view. Subscribed in the
+ * constructor, before the droppable's first change detection can emit; both outputs drop their
+ * listeners when the element is destroyed.
+ */
+class SortableListOutputsDirective {
+    constructor() {
+        const droppable = inject(DroppableDirective);
+        const list = inject(VirtualSortableListComponent);
+        droppable.drop.subscribe((event) => list.drop.emit(event));
+        droppable.placeholderMove.subscribe((event) => list.placeholderMove.emit(event));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SortableListOutputsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: SortableListOutputsDirective, isStandalone: true, selector: "[vdndSortableListOutputs]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SortableListOutputsDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[vdndSortableListOutputs]' }]
+        }], ctorParameters: () => [] });
 /**
  * A high-level component that combines droppable, virtual scroll, and placeholder
  * functionality into a single, easy-to-use component.
@@ -4407,6 +5379,13 @@ class VirtualSortableListComponent {
     containerHeight = input(...(ngDevMode ? [undefined, { debugName: "containerHeight" }] : []));
     /** Number of items to render above/below the visible area */
     overscan = input(3, ...(ngDevMode ? [{ debugName: "overscan" }] : []));
+    /**
+     * Reuse the views of rows that scroll out to render the rows that scroll in, instead of
+     * destroying them and creating new ones. Scrolling creates fewer components and elements, but
+     * a row's components, element and DOM state (focus aside) then carry over to other items.
+     * @default false
+     */
+    recycleRows = input(false, ...(ngDevMode ? [{ debugName: "recycleRows" }] : []));
     /** Enable auto-scroll when dragging near edges */
     autoScrollEnabled = input(true, ...(ngDevMode ? [{ debugName: "autoScrollEnabled" }] : []));
     /** Auto-scroll configuration */
@@ -4420,7 +5399,7 @@ class VirtualSortableListComponent {
     /** Emits each time the placeholder moves within this list (every item displacement) */
     placeholderMove = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VirtualSortableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: VirtualSortableListComponent, isStandalone: true, selector: "vdnd-sortable-list", inputs: { droppableId: { classPropertyName: "droppableId", publicName: "droppableId", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: true, transformFunction: null }, dynamicItemHeight: { classPropertyName: "dynamicItemHeight", publicName: "dynamicItemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemIdFn: { classPropertyName: "itemIdFn", publicName: "itemIdFn", isSignal: true, isRequired: true, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: true, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, droppableData: { classPropertyName: "droppableData", publicName: "droppableData", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, containerHeight: { classPropertyName: "containerHeight", publicName: "containerHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, autoScrollEnabled: { classPropertyName: "autoScrollEnabled", publicName: "autoScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollConfig: { classPropertyName: "autoScrollConfig", publicName: "autoScrollConfig", isSignal: true, isRequired: false, transformFunction: null }, constrainToContainer: { classPropertyName: "constrainToContainer", publicName: "constrainToContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drop: "drop", placeholderMove: "placeholderMove" }, host: { classAttribute: "vdnd-sortable-list" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: VirtualSortableListComponent, isStandalone: true, selector: "vdnd-sortable-list", inputs: { droppableId: { classPropertyName: "droppableId", publicName: "droppableId", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: true, transformFunction: null }, dynamicItemHeight: { classPropertyName: "dynamicItemHeight", publicName: "dynamicItemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemIdFn: { classPropertyName: "itemIdFn", publicName: "itemIdFn", isSignal: true, isRequired: true, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: true, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, droppableData: { classPropertyName: "droppableData", publicName: "droppableData", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, containerHeight: { classPropertyName: "containerHeight", publicName: "containerHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, recycleRows: { classPropertyName: "recycleRows", publicName: "recycleRows", isSignal: true, isRequired: false, transformFunction: null }, autoScrollEnabled: { classPropertyName: "autoScrollEnabled", publicName: "autoScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollConfig: { classPropertyName: "autoScrollConfig", publicName: "autoScrollConfig", isSignal: true, isRequired: false, transformFunction: null }, constrainToContainer: { classPropertyName: "constrainToContainer", publicName: "constrainToContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drop: "drop", placeholderMove: "placeholderMove" }, host: { classAttribute: "vdnd-sortable-list" }, ngImport: i0, template: `
     <div
       class="vdnd-sortable-list-droppable"
       [vdndDroppable]="droppableId()"
@@ -4428,8 +5407,7 @@ class VirtualSortableListComponent {
       [vdndDroppableData]="droppableData()"
       [disabled]="disabled()"
       [constrainToContainer]="constrainToContainer()"
-      (drop)="drop.emit($event)"
-      (placeholderMove)="placeholderMove.emit($event)"
+      vdndSortableListOutputs
     >
       <vdnd-virtual-scroll
         [items]="items()"
@@ -4442,16 +5420,17 @@ class VirtualSortableListComponent {
         [autoStickyDraggedItem]="true"
         [containerHeight]="containerHeight()"
         [overscan]="overscan()"
+        [recycleRows]="recycleRows()"
         [autoScrollEnabled]="autoScrollEnabled()"
         [autoScrollConfig]="autoScrollConfig()"
       >
       </vdnd-virtual-scroll>
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: VirtualScrollContainerComponent, selector: "vdnd-virtual-scroll", inputs: ["itemTemplate", "scrollContainerId", "autoScrollEnabled", "autoScrollConfig", "items", "itemHeight", "dynamicItemHeight", "containerHeight", "overscan", "stickyItemIds", "itemIdFn", "trackByFn", "droppableId", "autoStickyDraggedItem"] }, { kind: "directive", type: DroppableDirective, selector: "[vdndDroppable]", inputs: ["vdndDroppable", "vdndDroppableGroup", "vdndDroppableData", "disabled", "autoScrollEnabled", "autoScrollConfig", "constrainToContainer"], outputs: ["drop", "placeholderMove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: VirtualScrollContainerComponent, selector: "vdnd-virtual-scroll", inputs: ["itemTemplate", "scrollContainerId", "autoScrollEnabled", "autoScrollConfig", "items", "itemHeight", "dynamicItemHeight", "containerHeight", "overscan", "stickyItemIds", "itemIdFn", "trackByFn", "droppableId", "recycleRows", "autoStickyDraggedItem"] }, { kind: "directive", type: DroppableDirective, selector: "[vdndDroppable]", inputs: ["vdndDroppable", "vdndDroppableGroup", "vdndDroppableData", "disabled", "autoScrollEnabled", "autoScrollConfig", "constrainToContainer"], outputs: ["drop", "placeholderMove"] }, { kind: "directive", type: SortableListOutputsDirective, selector: "[vdndSortableListOutputs]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VirtualSortableListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdnd-sortable-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [VirtualScrollContainerComponent, DroppableDirective], host: {
+            args: [{ selector: 'vdnd-sortable-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [VirtualScrollContainerComponent, DroppableDirective, SortableListOutputsDirective], host: {
                         class: 'vdnd-sortable-list',
                     }, template: `
     <div
@@ -4461,8 +5440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
       [vdndDroppableData]="droppableData()"
       [disabled]="disabled()"
       [constrainToContainer]="constrainToContainer()"
-      (drop)="drop.emit($event)"
-      (placeholderMove)="placeholderMove.emit($event)"
+      vdndSortableListOutputs
     >
       <vdnd-virtual-scroll
         [items]="items()"
@@ -4475,13 +5453,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         [autoStickyDraggedItem]="true"
         [containerHeight]="containerHeight()"
         [overscan]="overscan()"
+        [recycleRows]="recycleRows()"
         [autoScrollEnabled]="autoScrollEnabled()"
         [autoScrollConfig]="autoScrollConfig()"
       >
       </vdnd-virtual-scroll>
     </div>
   `, styles: [":host{display:block}\n"] }]
-        }], propDecorators: { droppableId: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppableId", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: true }] }], dynamicItemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicItemHeight", required: false }] }], itemIdFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemIdFn", required: true }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: true }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], droppableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppableData", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], containerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }], constrainToContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "constrainToContainer", required: false }] }], drop: [{ type: i0.Output, args: ["drop"] }], placeholderMove: [{ type: i0.Output, args: ["placeholderMove"] }] } });
+        }], propDecorators: { droppableId: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppableId", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: true }] }], dynamicItemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicItemHeight", required: false }] }], itemIdFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemIdFn", required: true }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: true }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], droppableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppableData", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], containerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], recycleRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "recycleRows", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }], constrainToContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "constrainToContainer", required: false }] }], drop: [{ type: i0.Output, args: ["drop"] }], placeholderMove: [{ type: i0.Output, args: ["placeholderMove"] }] } });
 
 /**
  * A virtual viewport component that provides efficient wrapper-based positioning
@@ -5129,22 +6108,25 @@ class KeyboardDragHandler {
         this.#cleanupDocumentListener();
         // Clear droppable metadata cache from this drag session
         this.#deps.dragIndexCalculator.clearCache();
-        // Emit drag end event
-        this.#deps.callbacks.onDragEnd({
+        const event = {
             draggableId: ctx.draggableId,
             droppableId: this.#deps.callbacks.getParentDroppableId() ?? '',
             cancelled: false,
             data: ctx.data,
             sourceIndex,
             destinationIndex,
-        });
+        };
         // The item stays in its source list when there is no valid target
         const fallbackDroppableId = hasValidTarget
             ? activeDroppableId
             : this.#deps.dragState.sourceDroppableId();
-        this.#deps.keyboardDrag.completeKeyboardDrag();
-        // Restore focus to the moved element after state updates
-        this.#restoreFocus(ctx.draggableId, fallbackDroppableId);
+        this.#endInZone(() => {
+            this.#deps.callbacks.onDragEnd(event);
+            // Ends the drag state, which delivers the drop
+            this.#deps.keyboardDrag.completeKeyboardDrag();
+            // Restore focus to the moved element after state updates
+            this.#restoreFocus(ctx.draggableId, fallbackDroppableId);
+        });
     }
     /**
      * Cancel a keyboard drag operation.
@@ -5158,18 +6140,30 @@ class KeyboardDragHandler {
         this.#cleanupDocumentListener();
         // Clear droppable metadata cache from this drag session
         this.#deps.dragIndexCalculator.clearCache();
-        // Emit drag end event
-        this.#deps.callbacks.onDragEnd({
+        const event = {
             draggableId: ctx.draggableId,
             droppableId: this.#deps.callbacks.getParentDroppableId() ?? '',
             cancelled: true,
             data: ctx.data,
             sourceIndex,
             destinationIndex: null,
+        };
+        this.#endInZone(() => {
+            this.#deps.callbacks.onDragEnd(event);
+            this.#deps.keyboardDrag.cancelKeyboardDrag();
+            // Restore focus to the original element after state updates
+            this.#restoreFocus(ctx.draggableId, sourceDroppableId);
         });
-        this.#deps.keyboardDrag.cancelKeyboardDrag();
-        // Restore focus to the original element after state updates
-        this.#restoreFocus(ctx.draggableId, sourceDroppableId);
+    }
+    /**
+     * Run a drag end (dragEnd, the state reset that delivers drop, the focus restore) in one
+     * entry into Angular's zone. The document listener runs outside it; with zone.js a
+     * template listener marks its view dirty but schedules no render, and each entry renders
+     * when it is left, so this renders the end once, with focus restored in that render. A
+     * no-op when zoneless.
+     */
+    #endInZone(end) {
+        this.#deps.ngZone.run(end);
     }
     /**
      * Teardown — remove any active document listener.
@@ -5197,7 +6191,7 @@ class KeyboardDragHandler {
             }
             else if (fallbackDroppableId) {
                 // Fallback: focus the first draggable in the list the item ended up in
-                const container = queryByAttribute(document, 'data-droppable-id', fallbackDroppableId);
+                const container = this.#deps.positionCalculator.getDroppableById(fallbackDroppableId);
                 const firstDraggable = container?.querySelector('[data-draggable-id]');
                 firstDraggable?.focus();
             }
@@ -5291,8 +6285,14 @@ class PointerDragHandler {
     #startPosition = null;
     /** Whether we're currently tracking a potential drag */
     #isTracking = false;
+    /** The item the tracked press landed on */
+    #pressedId = null;
+    /** Whether the document and window listeners of a press are added */
+    #listening = false;
     /** Identifier of the finger that pressed, for touch gestures (other fingers are ignored) */
     #touchId = null;
+    /** Whether the tracked press is a touch (which shows no cursor) */
+    #isTouch = false;
     /** Bound event handlers for cleanup */
     #boundPointerMove = null;
     #boundPointerUp = null;
@@ -5318,6 +6318,13 @@ class PointerDragHandler {
     getStartPosition() {
         return this.#startPosition;
     }
+    /**
+     * Whether the tracked press is a touch. Read by the directive when the drag starts: a touch
+     * drag shows no cursor, so it gets no grabbing cursor.
+     */
+    isTouchPress() {
+        return this.#isTouch;
+    }
     /**
      * Handle pointer down (mouse or touch).
      * Called from the directive's host binding.
@@ -5373,6 +6380,8 @@ class PointerDragHandler {
             return;
         }
         this.#isTracking = true;
+        this.#pressedId = ctx.draggableId;
+        this.#isTouch = isTouch;
         if (touch) {
             this.#touchId = touch.identifier;
             this.#startPosition = { x: touch.clientX, y: touch.clientY };
@@ -5387,9 +6396,10 @@ class PointerDragHandler {
         if (delay > 0) {
             this.#delayTimerId = setTimeout(() => {
                 this.#delayTimerId = null;
-                // Another drag started while this press was held: drop the press rather than show it
-                // as ready to drag during that drag.
-                if (this.#deps.callbacks.isOtherDragActive()) {
+                // Another drag started while this press was held, or the press no longer applies (see
+                // #isStalePress): drop it rather than show it as ready to drag.
+                if (this.#deps.callbacks.isOtherDragActive() ||
+                    this.#isStalePress(this.#deps.getContext())) {
                     this.cleanup();
                     return;
                 }
@@ -5418,6 +6428,7 @@ class PointerDragHandler {
             window.addEventListener('blur', this.#boundWindowBlur);
             document.addEventListener('visibilitychange', this.#boundVisibilityChange);
         });
+        this.#listening = true;
     }
     /**
      * Remove listeners + cancel timers.
@@ -5425,14 +6436,18 @@ class PointerDragHandler {
      */
     cleanup() {
         this.#isTracking = false;
+        this.#pressedId = null;
         this.#startPosition = null;
         this.#touchId = null;
+        this.#isTouch = false;
         this.#deps.callbacks.onPendingChange(false); // Clear pending state on cleanup
         this.#cancelDelayTimer();
-        // Server rendering destroys the directive without a global document, and never added any
-        if (typeof document === 'undefined') {
+        // Nothing to remove unless a press added listeners (most draggables are never pressed; a
+        // virtual list destroys one each time a row scrolls out). Server rendering adds none.
+        if (!this.#listening) {
             return;
         }
+        this.#listening = false;
         // Remove event listeners
         if (this.#boundPointerMove) {
             document.removeEventListener('mousemove', this.#boundPointerMove);
@@ -5483,9 +6498,14 @@ class PointerDragHandler {
         else {
             position = { x: event.clientX, y: event.clientY };
         }
-        const ctx = this.#deps.getContext();
         // Check if we've moved past the threshold
         if (!this.#deps.callbacks.isDragging() && this.#startPosition) {
+            // Read only before the drag starts, not on every move of a drag: nothing in it matters then
+            const ctx = this.#deps.getContext();
+            if (this.#isStalePress(ctx)) {
+                this.cleanup();
+                return;
+            }
             const distance = Math.sqrt(Math.pow(position.x - this.#startPosition.x, 2) +
                 Math.pow(position.y - this.#startPosition.y, 2));
             if (distance < ctx.dragThreshold) {
@@ -5537,13 +6557,25 @@ class PointerDragHandler {
         }
         // Only prevent default if we were actually dragging
         // Otherwise, allow native touch behavior (like scroll momentum) to complete
-        if (this.#deps.callbacks.isDragging()) {
-            event.preventDefault();
-            // The system took the touch (an incoming call, an OS gesture, too many fingers): the user
-            // never released, so this is a cancel, not a drop
-            this.#deps.callbacks.onDragEnd(event.type === 'touchcancel');
+        // The drag end runs consumer handlers (dragEnd, drop); stop tracking even if one throws
+        try {
+            if (this.#deps.callbacks.isDragging()) {
+                event.preventDefault();
+                // The system took the touch (an incoming call, an OS gesture, too many fingers): the
+                // user never released, so this is a cancel, not a drop
+                this.#deps.callbacks.onDragEnd(event.type === 'touchcancel');
+            }
         }
-        this.cleanup();
+        finally {
+            this.cleanup();
+        }
+    }
+    /**
+     * Whether the tracked press no longer applies to the draggable: it renders another item now, or
+     * it left the page (a virtual list recycled or pooled its row).
+     */
+    #isStalePress(ctx) {
+        return ctx.draggableId !== this.#pressedId || !ctx.element.isConnected;
     }
     /**
      * Cancel the delay timer if active.
@@ -5560,9 +6592,12 @@ class PointerDragHandler {
      */
     #onEscapeKeyDown(event) {
         if (event.key === 'Escape' && this.#deps.callbacks.isDragging()) {
-            // No ngZone.run() needed - #endDrag uses signals which work outside zone
-            this.#deps.callbacks.onDragEnd(true);
-            this.cleanup();
+            try {
+                this.#deps.callbacks.onDragEnd(true);
+            }
+            finally {
+                this.cleanup();
+            }
         }
     }
     /**
@@ -5572,10 +6607,14 @@ class PointerDragHandler {
         if (!this.#isTracking) {
             return;
         }
-        if (this.#deps.callbacks.isDragging()) {
-            this.#deps.callbacks.onDragEnd(true);
+        try {
+            if (this.#deps.callbacks.isDragging()) {
+                this.#deps.callbacks.onDragEnd(true);
+            }
+        }
+        finally {
+            this.cleanup();
         }
-        this.cleanup();
     }
     /**
      * Treat the page being hidden (tab switch, app switch on mobile) as focus loss.
@@ -5587,10 +6626,20 @@ class PointerDragHandler {
     }
     /**
      * The tracked finger in `touches`, or null. Synthetic touch events (e.g. from test tools) can
-     * leave a list undefined, so a missing list counts as empty.
+     * leave a list undefined, so a missing list counts as empty. Read by index, without copying the
+     * list or creating an iterator: this runs for every touch move.
      */
     #trackedTouch(touches) {
-        return Array.from(touches ?? []).find((touch) => touch.identifier === this.#touchId) ?? null;
+        if (!touches) {
+            return null;
+        }
+        // eslint-disable-next-line @typescript-eslint/prefer-for-of -- for...of creates an iterator
+        for (let i = 0; i < touches.length; i++) {
+            if (touches[i].identifier === this.#touchId) {
+                return touches[i];
+            }
+        }
+        return null;
     }
     /**
      * The finger that pressed this draggable: of the touches that started with this event, the
@@ -5604,6 +6653,26 @@ class PointerDragHandler {
     }
 }
 
+/** Key names as Angular's `keydown.<key>` bindings spell them, for the `event.key` values that differ */
+const KEY_NAMES = {
+    ' ': 'space',
+    Esc: 'escape',
+    '\x1B': 'escape',
+    Up: 'arrowup',
+    Down: 'arrowdown',
+    Left: 'arrowleft',
+    Right: 'arrowright',
+};
+/** The keys an item handles */
+const HANDLED_KEYS = new Set([
+    'space',
+    'enter',
+    'arrowup',
+    'arrowdown',
+    'arrowleft',
+    'arrowright',
+    'escape',
+]);
 /**
  * Makes an element draggable within the virtual scroll drag-and-drop system.
  *
@@ -5680,9 +6749,16 @@ class DraggableDirective {
     dragStart = output();
     /** Emits when drag ends */
     dragEnd = output();
-    /** Whether this element is in the "ready to drag" state (delay has passed) */
-    #isPending = signal(false, ...(ngDevMode ? [{ debugName: "#isPending" }] : []));
-    isPending = this.#isPending.asReadonly();
+    /** The item whose press is ready to drag (its delay has passed) */
+    #pendingId = signal(null, ...(ngDevMode ? [{ debugName: "#pendingId" }] : []));
+    /**
+     * Whether this element is in the "ready to drag" state (delay has passed). Tied to the pressed
+     * item: a recycled row that renders another item is not ready to drag.
+     */
+    isPending = computed(() => {
+        const pendingId = this.#pendingId();
+        return pendingId !== null && pendingId === this.vdndDraggable();
+    }, ...(ngDevMode ? [{ debugName: "isPending" }] : []));
     /** Whether this element is currently being dragged (based on global drag state) */
     isDragging = computed(() => {
         const draggedItem = this.#dragState.draggedItem();
@@ -5692,6 +6768,62 @@ class DraggableDirective {
     #pointerHandler;
     /** Set by ngOnInit, which creates the handlers */
     #initialized = false;
+    /**
+     * Keys pressed on the item: one listener, added outside Angular's zone, instead of a
+     * `(keydown.<key>)` host binding per key, as Angular adds a listener to every row for each.
+     * Like those bindings, it ignores a key pressed with Shift, Ctrl, Alt or Meta, runs the handler
+     * of a key it handles in the zone (so zone.js apps still render after it), prevents the key's
+     * default action when the handler returns false, and reports what the handler throws to the
+     * ErrorHandler. Added in the constructor, so it runs before the element's template listeners,
+     * as host listeners do.
+     */
+    #onKeydown = (event) => {
+        if (!this.#initialized || event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) {
+            return;
+        }
+        const key = event.key ? (KEY_NAMES[event.key] ?? event.key.toLowerCase()) : '';
+        if (!HANDLED_KEYS.has(key)) {
+            return;
+        }
+        this.#ngZone.run(() => {
+            try {
+                if (this.#handleKey(key, event) === false) {
+                    event.preventDefault();
+                }
+            }
+            catch (error) {
+                this.#envInjector.get(ErrorHandler).handleError(error);
+            }
+        });
+    };
+    /**
+     * Touch presses on the item. Added programmatically, not as a host binding (which Angular adds
+     * without options, so non-passive): a swipe that starts on an element with a non-passive
+     * touchstart listener can't scroll until the main thread has run it. With a drag delay the press
+     * never cancels the scroll (the page must scroll when the user swipes before the delay passes),
+     * so the listener is passive; without one it prevents the default action and is non-passive.
+     * Like the keydown listener, it runs the handler in the zone (as the mousedown host binding
+     * does) and reports what it throws to the ErrorHandler. Added once the inputs are set, so unlike
+     * a host listener it runs after the element's template listeners.
+     */
+    #onTouchStart = (event) => {
+        if (!this.#initialized) {
+            return;
+        }
+        this.#ngZone.run(() => {
+            try {
+                this.onPointerDown(event, true);
+            }
+            catch (error) {
+                this.#envInjector.get(ErrorHandler).handleError(error);
+            }
+        });
+    };
+    /** Whether the touchstart listener is passive, or null while it isn't added */
+    #touchStartPassive = null;
+    constructor() {
+        this.#ngZone.runOutsideAngular(() => this.#elementRef.nativeElement.addEventListener('keydown', this.#onKeydown));
+    }
     /** Cached constraint flag from source droppable */
     #constrainToContainer = false;
     /** Element whose rect is used for clamping (scroll container or droppable itself) */
@@ -5702,9 +6834,7 @@ class DraggableDirective {
      * Update the pending state and emit the change event.
      */
     #setPending(pending) {
-        if (this.#isPending() !== pending) {
-            this.#isPending.set(pending);
-        }
+        this.#pendingId.set(pending ? this.vdndDraggable() : null);
     }
     /**
      * Find the element to use for container constraint clamping.
@@ -5729,7 +6859,8 @@ class DraggableDirective {
             ngZone: this.#ngZone,
             envInjector: this.#envInjector,
             callbacks: {
-                onDragStart: (event) => this.dragStart.emit(event),
+                onDragStart: (event) => this.#ngZone.run(() => this.dragStart.emit(event)),
+                // The keyboard handler ends the drag inside the zone (dragEnd, drop, focus restore)
                 onDragEnd: (event) => this.dragEnd.emit(event),
                 getParentDroppableId: () => this.#getParentDroppableId(),
                 calculateSourceIndex: (el, droppable) => this.#calculateSourceIndex(el, droppable),
@@ -5758,6 +6889,7 @@ class DraggableDirective {
             },
             getContext: () => ({
                 element: this.#elementRef.nativeElement,
+                draggableId: this.vdndDraggable(),
                 groupName: this.#effectiveGroup(),
                 disabled: this.disabled(),
                 dragHandle: this.dragHandle(),
@@ -5766,8 +6898,14 @@ class DraggableDirective {
             }),
         });
         this.#initialized = true;
+        this.#listenForTouchStart();
+    }
+    ngOnChanges() {
+        this.#listenForTouchStart();
     }
     ngOnDestroy() {
+        this.#elementRef.nativeElement.removeEventListener('keydown', this.#onKeydown);
+        this.#elementRef.nativeElement.removeEventListener('touchstart', this.#onTouchStart);
         // Destroyed before its first change detection: there are no handlers yet, and its inputs
         // have no values (reading a bound ID would throw).
         if (!this.#initialized) {
@@ -5780,6 +6918,35 @@ class DraggableDirective {
         this.#pointerHandler.destroy();
         this.#keyboardHandler.destroy();
     }
+    /**
+     * Add the touchstart listener, or re-add it when the drag delay changes whether it can be
+     * passive. Lifecycle hooks, not an effect: creating a view effect schedules a change detection
+     * that visits every ancestor, and a virtual list creates rows on each scroll step.
+     */
+    #listenForTouchStart() {
+        // The handler cancels the scroll of a touch press only when there is no delay
+        const passive = this.dragDelay() !== 0;
+        if (passive === this.#touchStartPassive) {
+            return;
+        }
+        const element = this.#elementRef.nativeElement;
+        element.removeEventListener('touchstart', this.#onTouchStart);
+        this.#ngZone.runOutsideAngular(() => element.addEventListener('touchstart', this.#onTouchStart, { passive }));
+        this.#touchStartPassive = passive;
+    }
+    /** Run the handler of a key the item handles (see HANDLED_KEYS), returning what it returns. */
+    #handleKey(key, event) {
+        switch (key) {
+            case 'space':
+                return this.onKeyboardActivate(event);
+            case 'enter':
+                return this.onEnterKey(event);
+            case 'escape':
+                return this.onEscape();
+            default:
+                return this.onArrowKey(event);
+        }
+    }
     /**
      * Handle pointer down (mouse or touch).
      */
@@ -5946,7 +7113,7 @@ class DraggableDirective {
             height: rect.height,
             width: rect.width,
             data: this.vdndDraggableData(),
-        }, position, grabOffset, lockAxis, activeDroppableId, initialPlaceholderId, initialPlaceholderIndex, sourceIndex, undefined, lockAxis ? startPos : undefined);
+        }, position, grabOffset, lockAxis, activeDroppableId, initialPlaceholderId, initialPlaceholderIndex, sourceIndex, undefined, lockAxis ? startPos : undefined, this.#pointerHandler.isTouchPress());
         // Start the scheduler RAF loop (drives pointer-move updates + autoscroll participant).
         // onTick is called each frame: when cursor is dirty, run full #updateDrag.
         this.#scheduler.start((cursor, cursorDirty) => {
@@ -5957,13 +7124,16 @@ class DraggableDirective {
         // Start auto-scroll monitoring — registers as a scheduler participant.
         this.#autoScroll.startMonitoring(() => this.#recalculatePlaceholder());
         // Emit drag start event
-        this.dragStart.emit({
+        // Pointer listeners run outside Angular's zone. With zone.js a template listener marks
+        // its view dirty but schedules no render, so emit inside the zone (a no-op when zoneless).
+        const event = {
             draggableId: this.vdndDraggable(),
             droppableId: parentDroppableId ?? '',
             data: this.vdndDraggableData(),
             position,
             sourceIndex,
-        });
+        };
+        this.#ngZone.run(() => this.dragStart.emit(event));
     }
     /**
      * Calculate the source index of the dragged element BEFORE it's hidden.
@@ -6179,22 +7349,27 @@ class DraggableDirective {
                 sourceDroppableId: this.#dragState.sourceDroppableId(),
                 activeDroppableId: this.#dragState.activeDroppableId(),
             });
-        // Emit drag end event
-        this.dragEnd.emit({
+        const event = {
             draggableId: this.vdndDraggable(),
             droppableId: this.#getParentDroppableId() ?? '',
             cancelled,
             data: this.vdndDraggableData(),
             sourceIndex,
             destinationIndex,
+        };
+        // dragEnd, then the state reset that delivers drop, in ONE zone entry: listeners run
+        // outside Angular's zone, and with zone.js each entry renders when it is left, so
+        // separate entries would render the drag end twice. A no-op when zoneless.
+        this.#ngZone.run(() => {
+            this.dragEnd.emit(event);
+            // Clear drag state - this triggers isDragging computed to become false
+            if (cancelled) {
+                this.#dragState.cancelDrag();
+            }
+            else {
+                this.#dragState.endDrag();
+            }
         });
-        // Clear drag state - this triggers isDragging computed to become false
-        if (cancelled) {
-            this.#dragState.cancelDrag();
-        }
-        else {
-            this.#dragState.endDrag();
-        }
     }
     /**
      * Get the parent droppable ID.
@@ -6208,7 +7383,7 @@ class DraggableDirective {
         return droppable ? this.#positionCalculator.getDroppableId(droppable) : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DraggableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DraggableDirective, isStandalone: true, selector: "[vdndDraggable]", inputs: { vdndDraggable: { classPropertyName: "vdndDraggable", publicName: "vdndDraggable", isSignal: true, isRequired: true, transformFunction: null }, vdndDraggableGroup: { classPropertyName: "vdndDraggableGroup", publicName: "vdndDraggableGroup", isSignal: true, isRequired: false, transformFunction: null }, vdndDraggableData: { classPropertyName: "vdndDraggableData", publicName: "vdndDraggableData", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", isSignal: true, isRequired: false, transformFunction: null }, dragDelay: { classPropertyName: "dragDelay", publicName: "dragDelay", isSignal: true, isRequired: false, transformFunction: null }, lockAxis: { classPropertyName: "lockAxis", publicName: "lockAxis", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd" }, host: { listeners: { "mousedown": "onPointerDown($event, false)", "touchstart": "onPointerDown($event, true)", "keydown.space": "onKeyboardActivate($event)", "keydown.enter": "onEnterKey($event)", "keydown.arrowup": "onArrowKey($event)", "keydown.arrowdown": "onArrowKey($event)", "keydown.arrowleft": "onArrowKey($event)", "keydown.arrowright": "onArrowKey($event)", "keydown.escape": "onEscape()" }, properties: { "attr.data-draggable-id": "vdndDraggable()", "class.vdnd-draggable": "true", "class.vdnd-draggable-dragging": "isDragging()", "class.vdnd-draggable-disabled": "disabled()", "class.vdnd-drag-pending": "isPending()", "style.display": "isDragging() ? \"none\" : null", "attr.aria-grabbed": "isDragging() ? \"true\" : \"false\"", "tabindex": "disabled() ? -1 : 0" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DraggableDirective, isStandalone: true, selector: "[vdndDraggable]", inputs: { vdndDraggable: { classPropertyName: "vdndDraggable", publicName: "vdndDraggable", isSignal: true, isRequired: true, transformFunction: null }, vdndDraggableGroup: { classPropertyName: "vdndDraggableGroup", publicName: "vdndDraggableGroup", isSignal: true, isRequired: false, transformFunction: null }, vdndDraggableData: { classPropertyName: "vdndDraggableData", publicName: "vdndDraggableData", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", isSignal: true, isRequired: false, transformFunction: null }, dragDelay: { classPropertyName: "dragDelay", publicName: "dragDelay", isSignal: true, isRequired: false, transformFunction: null }, lockAxis: { classPropertyName: "lockAxis", publicName: "lockAxis", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd" }, host: { listeners: { "mousedown": "onPointerDown($event, false)" }, properties: { "attr.data-draggable-id": "vdndDraggable()", "class.vdnd-draggable": "true", "class.vdnd-draggable-dragging": "isDragging()", "class.vdnd-draggable-disabled": "disabled()", "class.vdnd-drag-pending": "isPending()", "style.display": "isDragging() ? \"none\" : null", "attr.aria-grabbed": "isDragging() ? \"true\" : \"false\"", "tabindex": "disabled() ? -1 : 0" } }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DraggableDirective, decorators: [{
             type: Directive,
@@ -6224,17 +7399,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[attr.aria-grabbed]': 'isDragging() ? "true" : "false"',
                         '[tabindex]': 'disabled() ? -1 : 0',
                         '(mousedown)': 'onPointerDown($event, false)',
-                        '(touchstart)': 'onPointerDown($event, true)',
-                        '(keydown.space)': 'onKeyboardActivate($event)',
-                        '(keydown.enter)': 'onEnterKey($event)',
-                        '(keydown.arrowup)': 'onArrowKey($event)',
-                        '(keydown.arrowdown)': 'onArrowKey($event)',
-                        '(keydown.arrowleft)': 'onArrowKey($event)',
-                        '(keydown.arrowright)': 'onArrowKey($event)',
-                        '(keydown.escape)': 'onEscape()',
                     },
                 }]
-        }], propDecorators: { vdndDraggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDraggable", required: true }] }], vdndDraggableGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDraggableGroup", required: false }] }], vdndDraggableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDraggableData", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }], dragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragThreshold", required: false }] }], dragDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDelay", required: false }] }], lockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAxis", required: false }] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }] } });
+        }], ctorParameters: () => [], propDecorators: { vdndDraggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDraggable", required: true }] }], vdndDraggableGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDraggableGroup", required: false }] }], vdndDraggableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "vdndDraggableData", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }], dragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragThreshold", required: false }] }], dragDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDelay", required: false }] }], lockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAxis", required: false }] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }] } });
 
 /**
  * Directive that marks an element as a scrollable container for virtual scrolling.
@@ -6548,38 +7715,47 @@ class VirtualForDirective {
         const end = Math.min(total - 1, first + visible + overscan);
         return { start, end };
     }, ...(ngDevMode ? [{ debugName: "#renderRange" }] : []));
-    /** Map of trackBy keys to item indices for quick lookup */
-    #itemIndexMap = computed(() => {
-        const items = this.vdndVirtualForOf();
+    /**
+     * Every item's track key, in order. Computed once per items change, and only when something
+     * reads it: a dynamic-height strategy or a drag. A fixed-height strategy needs only the count.
+     */
+    #itemKeys = computed(() => {
         const trackByFn = this.vdndVirtualForTrackBy();
-        const map = new Map();
-        for (let i = 0; i < items.length; i++) {
-            map.set(trackByFn(i, items[i]), i);
-        }
-        return map;
-    }, ...(ngDevMode ? [{ debugName: "#itemIndexMap" }] : []));
-    /** Index of the dragged item in this list (-1 if not present or not dragging) */
+        return this.vdndVirtualForOf().map((item, i) => trackByFn(i, item));
+    }, ...(ngDevMode ? [{ debugName: "#itemKeys" }] : []));
+    /**
+     * Index of the dragged item in this list (-1 if not present or not dragging). The index where
+     * the drag found its item is checked first: it spares a search of every track key.
+     */
     #draggedItemIndex = computed(() => {
         const draggedItem = this.#dragState.draggedItem();
         if (!draggedItem)
             return -1;
-        const byId = this.#itemIndexMap().get(draggedItem.draggableId);
-        if (byId !== undefined) {
+        const items = this.vdndVirtualForOf();
+        const sourceIndex = this.#dragState.sourceIndex();
+        if (sourceIndex !== null && sourceIndex >= 0 && sourceIndex < items.length) {
+            const item = items[sourceIndex];
+            if (this.vdndVirtualForTrackBy()(sourceIndex, item) === draggedItem.draggableId ||
+                (draggedItem.data !== null && draggedItem.data !== undefined && item === draggedItem.data)) {
+                return sourceIndex;
+            }
+        }
+        // The last item with the key, as an index map filled in order would give
+        const byId = this.#itemKeys().lastIndexOf(draggedItem.draggableId);
+        if (byId >= 0) {
             return byId;
         }
         const data = draggedItem.data;
         if (data !== null && data !== undefined) {
-            return this.vdndVirtualForOf().indexOf(data);
+            return items.indexOf(data);
         }
         return -1;
     }, ...(ngDevMode ? [{ debugName: "#draggedItemIndex" }] : []));
     constructor() {
-        // Keep strategy item keys in sync
+        // Keep the strategy's items in sync. A fixed-height strategy needs only their count, which
+        // spares computing every item's track key on each items change (each drop).
         effect(() => {
-            const items = this.vdndVirtualForOf();
-            const trackByFn = this.vdndVirtualForTrackBy();
-            const keys = items.map((item, i) => trackByFn(i, item));
-            this.#strategy().setItemKeys(keys);
+            setStrategyItems(this.#strategy(), this.vdndVirtualForOf().length, () => this.#itemKeys());
         });
         // Register strategy with drag index calculator for accurate position lookups
         effect((onCleanup) => {
@@ -6595,12 +7771,13 @@ class VirtualForDirective {
         // correctly skip the hidden item — not just findIndexAtOffset.
         effect(() => {
             const strategy = this.#strategy();
-            const draggedIndex = this.#draggedItemIndex();
             const droppableId = this.#effectiveDroppableId();
             const sourceDroppableId = this.#dragState.sourceDroppableId();
             const isDragging = this.#dragState.isDragging();
             const isSourceList = isDragging && droppableId !== undefined && droppableId === sourceDroppableId;
-            if (isSourceList && draggedIndex >= 0) {
+            // Only the source list looks for the dragged item (in all its keys)
+            const draggedIndex = isSourceList ? this.#draggedItemIndex() : -1;
+            if (draggedIndex >= 0) {
                 strategy.setExcludedIndex(draggedIndex);
             }
             else {
@@ -6799,14 +7976,12 @@ class VirtualForDirective {
         strategy.version();
         const placeholderIndex = this.#placeholderIndex();
         const showPlaceholder = this.#shouldShowPlaceholder();
-        const draggedIndex = this.#draggedItemIndex();
         const droppableId = this.#effectiveDroppableId();
         const sourceDroppableId = this.#dragState.sourceDroppableId();
         const isSourceList = droppableId ? droppableId === sourceDroppableId : true;
-        const shouldKeepDragged = this.#dragState.isDragging() &&
-            draggedIndex >= 0 &&
-            isSourceList &&
-            draggedIndex < items.length;
+        // Only the source list keeps the dragged item rendered, so only it looks for the item
+        const draggedIndex = this.#dragState.isDragging() && isSourceList ? this.#draggedItemIndex() : -1;
+        const shouldKeepDragged = draggedIndex >= 0 && draggedIndex < items.length;
         // Snapshot positions before the DOM changes so displaced items can slide
         this.#shiftAnimator?.beforeUpdate(this.#dragState.isDragging(), placeholderIndex);
         // Notify viewport of render start index for wrapper positioning
@@ -6916,14 +8091,8 @@ class VirtualForDirective {
         // Move unused views to pool
         for (const [key, view] of this.#activeViews) {
             if (!neededKeys.has(key)) {
-                const index = this.#viewContainer.indexOf(view);
-                if (index >= 0) {
-                    this.#viewContainer.detach(index);
-                }
-                this.#unobserveViewElements(view);
-                this.#cancelShiftAnimation(view);
-                this.#viewPool.push(view);
                 this.#activeViews.delete(key);
+                this.#poolView(view);
             }
         }
         // Remove placeholder from DOM if not needed
@@ -6935,6 +8104,7 @@ class VirtualForDirective {
         let viewContainerIndex = 0;
         let placeholderDomPosition = -1;
         const renderedKeys = new Set();
+        const changedViews = [];
         for (const entry of itemsToRender) {
             if (entry.type === 'placeholder') {
                 placeholderDomPosition = viewContainerIndex;
@@ -6945,7 +8115,7 @@ class VirtualForDirective {
                 continue;
             }
             renderedKeys.add(entry.key);
-            const view = this.#getOrCreateView(entry.key, entry.context);
+            const view = this.#getOrCreateView(entry.key, entry.context, changedViews);
             // Ensure view is at correct position in ViewContainerRef
             const currentIndex = this.#viewContainer.indexOf(view);
             if (currentIndex !== viewContainerIndex) {
@@ -6970,8 +8140,33 @@ class VirtualForDirective {
             }
             viewContainerIndex++;
         }
+        this.#renderChangedViews(changedViews);
         return placeholderDomPosition;
     }
+    /**
+     * Take a row's view out of the container and pool it. It keeps its element, so its shift
+     * animation is cancelled (the item it renders next must not slide from this one's position),
+     * and a drop animation that hides it shows it again.
+     */
+    #poolView(view) {
+        const index = this.#viewContainer.indexOf(view);
+        if (index >= 0) {
+            this.#viewContainer.detach(index);
+        }
+        this.#unobserveViewElements(view);
+        // A leave animation (`animate.leave`) keeps the row in the DOM, and Angular removes it when
+        // the animation ends: in the row of another item by then, if the view were reused. A row
+        // whose element is dragged (its draggable ID is not its track key) is destroyed too, which
+        // cancels the drag instead of handing it to another item.
+        const draggedElement = this.#dragState.draggedItem()?.element;
+        if (view.rootNodes.some((node) => node.parentNode !== null || (!!draggedElement && node.contains(draggedElement)))) {
+            view.destroy();
+            return;
+        }
+        this.#cancelShiftAnimation(view);
+        revealDropTargetIn(view.rootNodes);
+        this.#viewPool.push(view);
+    }
     /**
      * Clamp target indices for move/insert to avoid out-of-range operations when
      * reconciliation is given invalid duplicate keys or transiently inconsistent view state.
@@ -6997,28 +8192,59 @@ class VirtualForDirective {
     }
     /**
      * Get an existing view or create/recycle one from the pool.
+     * Adds the view to `changedViews` when it needs rendering: new, taken from the pool, or with a
+     * changed context.
      */
-    #getOrCreateView(key, context) {
-        let view = this.#activeViews.get(key);
+    #getOrCreateView(key, context, changedViews) {
+        const activeView = this.#activeViews.get(key);
+        let view = activeView ?? this.#viewPool.pop();
         if (view) {
-            // Update existing view context
-            Object.assign(view.context, context);
-            view.markForCheck();
+            // A pooled view was detached, so change detection skipped it: render it even when it
+            // comes back with the same context, as what its template shows may have changed since
+            if (this.#updateContext(view.context, context) || !activeView) {
+                changedViews.push(view);
+            }
         }
         else {
-            // Try pool first, then create new
-            view = this.#viewPool.pop();
-            if (view) {
-                Object.assign(view.context, context);
-                view.markForCheck();
-            }
-            else {
-                view = this.#templateRef.createEmbeddedView(context);
-            }
-            this.#activeViews.set(key, view);
+            view = this.#templateRef.createEmbeddedView(context);
+            changedViews.push(view);
         }
+        this.#activeViews.set(key, view);
         return view;
     }
+    /** Copy the fields of `next` into `context`. Returns whether any of them changed. */
+    #updateContext(context, next) {
+        if (Object.is(context.$implicit, next.$implicit) &&
+            context.index === next.index &&
+            context.first === next.first &&
+            context.last === next.last &&
+            context.count === next.count) {
+            return false;
+        }
+        context.$implicit = next.$implicit;
+        context.index = next.index;
+        context.first = next.first;
+        context.last = next.last;
+        context.count = next.count;
+        return true;
+    }
+    /**
+     * Render the views whose context changed, and only those. `markForCheck()` would mark every
+     * ancestor view up to the root as well, re-rendering all of them (and every row of the list)
+     * on each scroll step. Untracked, so the rows' signal reads do not become this effect's
+     * dependencies.
+     */
+    #renderChangedViews(changedViews) {
+        if (changedViews.length === 0)
+            return;
+        untracked(() => {
+            for (const view of changedViews) {
+                if (!view.destroyed) {
+                    view.detectChanges();
+                }
+            }
+        });
+    }
     /**
      * Apply absolute positioning styles to a view's root nodes.
      */