ngx-virtual-dnd 3.2.0 → 3.3.0

package/fesm2022/ngx-virtual-dnd.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { signal, InjectionToken, computed, effect, Injectable, inject, NgZone, input, ChangeDetectionStrategy, Component, DestroyRef, afterNextRender, ElementRef, Injector, untracked, viewChild, Directive, isDevMode, output, contentChild, EnvironmentInjector, TemplateRef, ViewContainerRef } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
+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';
 
 /**
  * Initial state for the drag state service.
@@ -21,7 +21,10 @@ const INITIAL_DRAG_STATE = {
     keyboardTargetIndex: null,
 };
 /**
- * Placeholder ID used when dropping at the end of a list.
+ * The value of every `placeholderId` the library sets. Positions are reported as indexes
+ * (`placeholderIndex`, `DropDestination.index`).
+ * @deprecated Goes with the deprecated `placeholderId` fields. Use the indexes. Will be removed in
+ * the next major version.
  */
 const END_OF_LIST = 'END_OF_LIST';
 
@@ -72,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);
         }
     }
@@ -105,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.
  */
@@ -115,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) {
@@ -139,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;
     }
     /**
@@ -165,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;
     }
     /**
@@ -183,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;
     }
@@ -205,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;
@@ -216,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;
@@ -275,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;
@@ -292,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);
         }
@@ -313,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.
@@ -321,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;
@@ -337,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);
         }
     }
 }
@@ -451,6 +558,14 @@ const VDND_SCROLL_CONTAINER = new InjectionToken('VDND_SCROLL_CONTAINER');
  * a viewport component that handles wrapper-based positioning.
  */
 const VDND_VIRTUAL_VIEWPORT = new InjectionToken('VDND_VIRTUAL_VIEWPORT');
+/**
+ * Internal, not exported from the package. Provided by vdnd-virtual-viewport next to
+ * VDND_VIRTUAL_VIEWPORT: its rows start contentOffset px down its scroll area while its
+ * scrollTop() is the raw position, so VirtualForDirective subtracts the offset when the viewport
+ * it injects is this one. A token instead of an instanceof check keeps the viewport component out
+ * of apps that don't use it.
+ */
+const VDND_OFFSET_ROWS_VIEWPORT = new InjectionToken('VDND_OFFSET_ROWS_VIEWPORT');
 
 /** Default shift animation duration (ms) used when the config omits `shiftDuration`. */
 const DEFAULT_SHIFT_DURATION = 200;
@@ -476,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,
@@ -498,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 */
@@ -506,7 +784,7 @@ class DragStateService {
     #keyboardTargetIndex = signal(null, ...(ngDevMode ? [{ debugName: "#keyboardTargetIndex" }] : []));
     /** ID of the droppable currently being hovered over — changes on droppable crossings */
     #activeDroppableId = signal(null, ...(ngDevMode ? [{ debugName: "#activeDroppableId" }] : []));
-    /** ID of the item the placeholder should appear before */
+    /** `END_OF_LIST` while a droppable is targeted, otherwise null; see placeholderIndex */
     #placeholderId = signal(null, ...(ngDevMode ? [{ debugName: "#placeholderId" }] : []));
     /** Index where the placeholder should be inserted — updated on each placeholder move */
     #placeholderIndex = signal(null, ...(ngDevMode ? [{ debugName: "#placeholderIndex" }] : []));
@@ -514,7 +792,7 @@ class DragStateService {
     #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();
@@ -530,7 +808,11 @@ class DragStateService {
     sourceIndex = computed(() => this.#state().sourceIndex, ...(ngDevMode ? [{ debugName: "sourceIndex" }] : []));
     /** ID of the droppable currently being hovered over */
     activeDroppableId = this.#activeDroppableId.asReadonly();
-    /** ID of the item the placeholder should appear before */
+    /**
+     * `END_OF_LIST` while a droppable is targeted, otherwise null.
+     * @deprecated It never identifies an item. Use `placeholderIndex`. Will be removed in the next
+     * major version.
+     */
     placeholderId = this.#placeholderId.asReadonly();
     /** Index where the placeholder should be inserted */
     placeholderIndex = this.#placeholderIndex.asReadonly();
@@ -572,6 +854,7 @@ class DragStateService {
     }
     /**
      * Start a drag operation.
+     * `placeholderId` is deprecated with the `placeholderId` signal; the library passes `END_OF_LIST`.
      */
     startDrag(item, cursorPosition, grabOffset, lockAxis, activeDroppableId, placeholderId, placeholderIndex, sourceIndex, isKeyboardDrag, axisLockPosition) {
         // Reset terminal drag metadata at start of new drag
@@ -595,6 +878,7 @@ class DragStateService {
     }
     /**
      * Update the drag position and targets.
+     * `placeholderId` is deprecated with the `placeholderId` signal; the library passes `END_OF_LIST`.
      */
     updateDragPosition(update) {
         if (!this.#state().isDragging) {
@@ -619,7 +903,9 @@ class DragStateService {
         this.#activeDroppableId.set(droppableId);
     }
     /**
-     * Update just the placeholder position.
+     * Update just the placeholder ID.
+     * @deprecated Sets only the deprecated `placeholderId`. Will be removed in the next major
+     * version.
      */
     setPlaceholder(placeholderId) {
         if (!this.#state().isDragging) {
@@ -633,6 +919,7 @@ class DragStateService {
      * Used by the autoscroll scroll-only fast path: when a scroll fires, the cursor has not
      * moved, so only the placeholder index needs recalculation. Skipping the cursor and
      * active-droppable writes avoids spurious re-evaluation of computeds that read those signals.
+     * `placeholderId` is deprecated with the `placeholderId` signal; the library passes `END_OF_LIST`.
      */
     updateScrollOnlyPlaceholder(placeholderId, placeholderIndex) {
         if (!this.#state().isDragging) {
@@ -642,18 +929,34 @@ 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.#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();
@@ -740,32 +1043,17 @@ 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;
+/** 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';
 }
-function queryAllByAttribute(root, attributeName, attributeValue) {
-    return Array.from(root.querySelectorAll(`[${attributeName}]`)).filter((candidate) => candidate.getAttribute(attributeName) === attributeValue);
-}
-
 /**
  * Service for calculating drop positions and finding elements at cursor positions.
  * This is the core algorithm that makes virtual scroll + drag-and-drop work together.
  */
 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 */
@@ -774,12 +1062,19 @@ class PositionCalculatorService {
     #DROPPABLE_DISABLED_ATTR = 'data-droppable-disabled';
     /** Data attribute used to identify draggable elements */
     #DRAGGABLE_ID_ATTR = 'data-draggable-id';
-    /** Maximum DOM levels to traverse when looking for parent elements */
-    #MAX_PARENT_TRAVERSAL = 15;
     /** Reusable result object for getNearEdge (avoids per-frame allocation) */
     #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
@@ -799,7 +1094,7 @@ class PositionCalculatorService {
         this.#session = {
             groupName,
             candidates,
-            rects: candidates.map((el) => this.#measureRect(el)),
+            rects: this.#measureRects(candidates, []),
             dirty: false,
             candidatesStale: false,
             onViewportChange,
@@ -845,10 +1140,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).
      */
@@ -858,19 +1154,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) {
@@ -900,23 +1195,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.
@@ -930,13 +1222,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
@@ -944,30 +1233,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
@@ -1071,15 +1376,19 @@ class PositionCalculatorService {
      * @returns The droppable parent element, or null if none found
      */
     getDroppableParent(element, groupName) {
-        let current = element;
-        let count = 0;
-        while (current && current.tagName !== 'BODY' && count < this.#MAX_PARENT_TRAVERSAL) {
-            const foundGroup = current.getAttribute(this.#DROPPABLE_GROUP_ATTR);
-            if (foundGroup && foundGroup === groupName) {
+        // An empty group name never matches (an empty attribute value is no group)
+        if (!groupName) {
+            return null;
+        }
+        // Match on the attribute's presence and compare the value here, so the group name needs no
+        // selector escaping. Nearer droppables of other groups are skipped.
+        const selector = `[${this.#DROPPABLE_GROUP_ATTR}]`;
+        let current = element.closest(selector);
+        while (current && !isPageRoot(current)) {
+            if (current.getAttribute(this.#DROPPABLE_GROUP_ATTR) === groupName) {
                 return current;
             }
-            current = current.parentElement;
-            count++;
+            current = current.parentElement?.closest(selector) ?? null;
         }
         return null;
     }
@@ -1090,17 +1399,9 @@ class PositionCalculatorService {
      * @returns The draggable parent element, or null if none found
      */
     getDraggableParent(element) {
-        let current = element;
-        let count = 0;
-        while (current && current.tagName !== 'BODY' && count < this.#MAX_PARENT_TRAVERSAL) {
-            const draggableId = current.getAttribute(this.#DRAGGABLE_ID_ATTR);
-            if (draggableId) {
-                return current;
-            }
-            current = current.parentElement;
-            count++;
-        }
-        return null;
+        const selector = `[${this.#DRAGGABLE_ID_ATTR}]:not([${this.#DRAGGABLE_ID_ATTR}=""])`;
+        const draggable = element.closest(selector);
+        return draggable && !isPageRoot(draggable) ? draggable : null;
     }
     /**
      * Get the draggable ID from an element.
@@ -1173,21 +1474,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),
                 });
             }
         });
@@ -1231,7 +1531,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:
@@ -1244,6 +1544,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
@@ -1259,6 +1563,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.
@@ -1315,6 +1621,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());
     }
@@ -1334,9 +1660,23 @@ class DragSchedulerService {
         for (const participant of this.#participants) {
             participant();
         }
+        // A participant can end the drag (the autoscroll callback may cancel it), which stops
+        // the scheduler and clears onTick.
+        const onTick = this.#onTick;
+        if (!onTick) {
+            return;
+        }
         // Phase 2 — main compute (cursor-based hit-test + signal write)
-        this.#onTick(this.#pendingCursor, cursorDirty);
-        // Reschedule only if still active (stop() may have been called by onTick).
+        onTick(this.#pendingCursor, cursorDirty);
+        // 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();
         }
@@ -1387,6 +1727,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
@@ -1490,6 +1838,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;
@@ -1518,14 +1868,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.
@@ -1585,8 +1938,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) {
@@ -1646,16 +2010,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();
@@ -1696,20 +2090,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',
@@ -1751,10 +2144,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
@@ -1771,6 +2176,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.
      */
@@ -1868,6 +2285,11 @@ class ElementCloneService {
                 el.setAttribute('disabled', 'true');
             }
         });
+        // A checked radio joins its group as soon as the clone is connected, which unchecks the
+        // radio in the source item. Without a name the cloned radios belong to no group.
+        clone.querySelectorAll('input[type="radio"][name]').forEach((radio) => {
+            radio.removeAttribute('name');
+        });
         // Remove focus styling classes that might interfere
         clone.classList.remove('vdnd-draggable-dragging');
         clone.classList.remove('vdnd-draggable-disabled');
@@ -2118,14 +2540,19 @@ class DragIndexCalculatorService {
         const cached = this.#droppableCache.get(droppableElement);
         if (cached)
             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;
-        if (virtualScrollElement) {
+        if (isViewport) {
+            // The viewport scrolls its own rows. Checked first so a list nested in a row is not
+            // mistaken for this one.
+            containerType = 'viewport';
+            scrollContainer = droppableElement;
+        }
+        else if (virtualScrollElement) {
             containerType = 'virtualScroll';
             scrollContainer = virtualScrollElement;
         }
@@ -2162,31 +2589,21 @@ 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
+     * measurement places the placeholder and finds the dragged item's source index.
+     */
+    getScrollGeometry(droppableElement, draggedItemHeight) {
+        return this.#getScrollGeometry(this.#resolveDroppable(droppableElement, draggedItemHeight));
     }
     calculatePlaceholderIndex(args) {
         const { droppableElement, position, grabOffset, draggedItemHeight, sourceDroppableId, sourceIndex, } = args;
         // Resolve cached metadata (DOM queries run once per droppable per drag session)
         const cache = this.#resolveDroppable(droppableElement, draggedItemHeight);
         // Live reads: getBoundingClientRect() and scrollTop change during scroll
-        let currentScrollTop;
-        let rect;
-        if (cache.containerType === 'virtualScroll') {
-            rect = cache.scrollContainer.getBoundingClientRect();
-            currentScrollTop = cache.scrollContainer.scrollTop;
-        }
-        else if (cache.containerType === 'virtualContent' && cache.scrollableParent) {
-            rect = cache.scrollContainer.getBoundingClientRect();
-            const contentOffsetAttr = cache.virtualContentElement.getAttribute('data-content-offset');
-            const contentOffset = contentOffsetAttr ? parseFloat(contentOffsetAttr) : 0;
-            const offsetValue = Number.isFinite(contentOffset) ? contentOffset : 0;
-            currentScrollTop = cache.scrollContainer.scrollTop - offsetValue;
-        }
-        else {
-            rect = cache.scrollContainer.getBoundingClientRect();
-            currentScrollTop =
-                cache.containerType === 'virtualContent' ? 0 : cache.scrollContainer.scrollTop;
-        }
+        const { rect, scrollTop: currentScrollTop } = this.#getScrollGeometry(cache);
         const { strategy, itemHeight, droppableId: currentDroppableId, isConstrainedToContainer, } = cache;
         // Calculate preview center position mathematically
         // The preview is positioned at: cursorPosition - grabOffset (see drag-preview.component.ts)
@@ -2244,7 +2661,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
@@ -2274,7 +2691,41 @@ class DragIndexCalculatorService {
         placeholderIndex = Math.max(0, Math.min(placeholderIndex, totalItems));
         return { index: placeholderIndex, placeholderId: END_OF_LIST };
     }
-    #getTotalItemCount(droppableElement, isSameList, draggedItemHeight) {
+    #getScrollGeometry(cache) {
+        const { containerType, scrollContainer } = cache;
+        const rect = scrollContainer.getBoundingClientRect();
+        const isVirtual = containerType === 'virtualScroll' || containerType === 'virtualContent';
+        switch (containerType) {
+            case 'viewport':
+                return {
+                    rect,
+                    scrollTop: scrollContainer.scrollTop - this.#readContentOffset(scrollContainer),
+                    isVirtual,
+                };
+            case 'virtualContent':
+                // Without a vdndScrollable parent the content element itself is measured, unscrolled
+                return cache.scrollableParent
+                    ? {
+                        rect,
+                        scrollTop: scrollContainer.scrollTop - this.#readContentOffset(cache.virtualContentElement),
+                        isVirtual,
+                    }
+                    : { rect, scrollTop: 0, isVirtual };
+            default:
+                return { rect, scrollTop: scrollContainer.scrollTop, isVirtual };
+        }
+    }
+    /** The `data-content-offset` (px reserved above the rows) of a virtual container, or 0. */
+    #readContentOffset(element) {
+        const offset = parseFloat(element?.getAttribute('data-content-offset') ?? '');
+        return Number.isFinite(offset) ? offset : 0;
+    }
+    /**
+     * 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;
@@ -2283,7 +2734,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');
@@ -2320,9 +2773,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');
@@ -2349,6 +2802,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;
     }
@@ -2401,10 +2860,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     }, template: ``, styles: [":host{display:block;pointer-events:none}\n"] }]
         }], propDecorators: { itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: true }] }] } });
 
+/** A layout value, or 0 where there is no layout (server rendering leaves them undefined). */
+function layoutValue(value) {
+    return Number.isFinite(value) ? value : 0;
+}
 function bindRafThrottledScrollTopSignal(options) {
     const { element, ngZone, scrollTop, thresholdPx = 5, onCommit } = options;
     let pendingRaf = null;
-    let lastCommittedScrollTop = element.scrollTop;
+    let lastCommittedScrollTop = layoutValue(element.scrollTop);
     const onScroll = () => {
         if (pendingRaf !== null) {
             return;
@@ -2438,7 +2901,7 @@ function bindRafThrottledScrollTopSignal(options) {
 function bindResizeObserverHeightSignal(options) {
     const { element, ngZone, height, minDeltaPx = 1 } = options;
     if (typeof ResizeObserver === 'undefined') {
-        height.set(element.clientHeight);
+        height.set(layoutValue(element.clientHeight));
         return () => undefined;
     }
     let observer = null;
@@ -2453,7 +2916,7 @@ function bindResizeObserverHeightSignal(options) {
         });
         observer.observe(element);
     });
-    height.set(element.clientHeight);
+    height.set(layoutValue(element.clientHeight));
     return () => {
         observer?.disconnect();
         observer = null;
@@ -2488,6 +2951,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;
 /**
@@ -2671,12 +3194,214 @@ 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)
+ * 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.
+ *
+ * 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
@@ -2716,11 +3441,13 @@ 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;
     #resizeCleanup = null;
-    /** ResizeObserver for dynamic height measurement */
-    #itemResizeObserver = null;
+    /** ResizeObserver for dynamic height measurement (only in dynamic height mode) */
+    #itemResizeObserver = signal(null, ...(ngDevMode ? [{ debugName: "#itemResizeObserver" }] : []));
     /** Map from observed HTMLElement to its trackBy key */
     #observedElements = new WeakMap();
     /** Stable mapping from rendered key to observed element for unobserve cleanup */
@@ -2729,6 +3456,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) */
@@ -2775,6 +3534,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.
@@ -2871,22 +3637,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" }] : []));
@@ -2911,31 +3705,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({
@@ -2947,24 +3730,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 });
         }
@@ -2984,6 +3757,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)}`;
@@ -2999,12 +3811,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) => {
@@ -3021,16 +3831,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
@@ -3096,12 +3896,37 @@ 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() {
-        // Set up ResizeObserver for dynamic height measurement
-        if (this.dynamicItemHeight()) {
-            this.#setupItemResizeObserver();
-        }
+        // Measure rows in dynamic height mode. dynamicItemHeight can change at runtime, and the
+        // strategy is replaced when it (or itemHeight) does, so this creates, replaces or removes the
+        // observer. #observeRenderedItems observes every rendered row with each new observer, so a
+        // new strategy gets their heights.
+        effect((onCleanup) => {
+            // No ResizeObserver during server rendering
+            if (!this.dynamicItemHeight() || !this.#isBrowser)
+                return;
+            this.#strategy();
+            const observer = untracked(() => this.#createItemResizeObserver());
+            this.#itemResizeObserver.set(observer);
+            onCleanup(() => {
+                observer.disconnect();
+                this.#observedElementByKey.clear();
+                this.#itemResizeObserver.set(null);
+            });
+        }, { injector: this.#injector });
     }
     ngAfterViewInit() {
         const element = this.#elementRef.nativeElement;
@@ -3120,9 +3945,10 @@ class VirtualScrollContainerComponent {
             thresholdPx: 5,
         });
         // Observe rendered items for dynamic height measurement
-        if (this.dynamicItemHeight()) {
-            this.#observeRenderedItems();
-        }
+        this.#observeRenderedItems();
+    }
+    ngAfterViewChecked() {
+        this.#viewCheckPending = false;
     }
     /**
      * Scroll so the placeholder is fully visible during a keyboard drag into this list.
@@ -3168,15 +3994,295 @@ 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?.();
+        const itemResizeObserver = this.#itemResizeObserver();
         for (const element of this.#observedElementByKey.values()) {
-            this.#itemResizeObserver?.unobserve(element);
+            itemResizeObserver?.unobserve(element);
         }
         this.#observedElementByKey.clear();
-        this.#itemResizeObserver?.disconnect();
+        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 });
@@ -3190,10 +4296,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;
@@ -3204,50 +4325,52 @@ class VirtualScrollContainerComponent {
         }
     }
     /**
-     * Set up ResizeObserver for measuring individual item heights.
+     * Create the ResizeObserver that measures individual item heights.
      */
-    #setupItemResizeObserver() {
-        this.#ngZone.runOutsideAngular(() => {
-            this.#itemResizeObserver = new ResizeObserver((entries) => {
-                const strategy = this.#strategy();
-                for (const entry of entries) {
-                    const element = entry.target;
-                    const key = this.#observedElements.get(element);
-                    if (key === undefined)
-                        continue;
-                    const height = entry.borderBoxSize?.[0]?.blockSize ?? element.offsetHeight;
-                    if (height > 0) {
-                        strategy.setMeasuredHeight(key, height);
-                    }
+    #createItemResizeObserver() {
+        return this.#ngZone.runOutsideAngular(() => new ResizeObserver((entries) => {
+            const strategy = this.#strategy();
+            for (const entry of entries) {
+                const element = entry.target;
+                const key = this.#observedElements.get(element);
+                if (key === undefined)
+                    continue;
+                const height = entry.borderBoxSize?.[0]?.blockSize ?? element.offsetHeight;
+                if (height > 0) {
+                    strategy.setMeasuredHeight(key, height);
                 }
-            });
-        });
+            }
+        }));
     }
     /**
      * Observe currently rendered items' DOM elements for height changes.
-     * Called after view init and on each render cycle in dynamic mode.
+     * Called after view init; re-observes after each render in dynamic mode, and every rendered
+     * item when a new observer is created.
      */
     #observeRenderedItems() {
-        if (!this.#itemResizeObserver)
-            return;
-        // Use an effect to re-observe whenever rendered items change
-        effect(() => {
-            const rendered = this.renderedItems();
-            const idFn = this.itemIdFn();
-            const observer = this.#itemResizeObserver;
+        // 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.#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);
                 }
@@ -3275,8 +4398,11 @@ class VirtualScrollContainerComponent {
      * Scroll to a specific position.
      */
     scrollTo(position) {
-        this.#elementRef.nativeElement.scrollTop = position;
-        this.#scrollTop.set(position);
+        const element = this.#elementRef.nativeElement;
+        element.scrollTop = position;
+        // Store where the browser actually scrolled. It clamps to the scrollable range, and if that
+        // leaves the element where it was, no scroll event arrives to correct an out-of-range value.
+        this.#scrollTop.set(element.scrollTop);
     }
     /**
      * Scroll to a specific item index.
@@ -3306,183 +4432,33 @@ class VirtualScrollContainerComponent {
         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: `
+    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 class="vdnd-virtual-scroll-spacer" [style.height.px]="totalHeight()"></div>
+    <div #spacer class="vdnd-virtual-scroll-spacer"></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 #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"], 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 });
+  `, 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, imports: [NgTemplateOutlet, DragPlaceholderComponent], host: {
+            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 class="vdnd-virtual-scroll-spacer" [style.height.px]="totalHeight()"></div>
+    <div #spacer class="vdnd-virtual-scroll-spacer"></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 #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: { 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();
-        };
-    }
-    /** 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();
-    }
-    #duration() {
-        return this.#config.dropDuration ?? DEFAULT_DROP_DURATION;
-    }
-}
-/**
- * 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;
-    }
-    return null;
-}
+        }], 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.
@@ -3508,6 +4484,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" }] : []));
@@ -3525,6 +4503,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) */
@@ -3535,6 +4546,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(() => {
@@ -3543,6 +4555,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(() => {
@@ -3587,6 +4611,7 @@ class DragPreviewComponent {
         });
     }
     ngOnDestroy() {
+        this.#scheduler.removeFrameWriter(this.#writeFramePosition);
         this.#dropAnimator?.cancel();
         if (this.#templateRegistered) {
             this.#overlayContainer.setTemplatePreviewActive(false);
@@ -3594,32 +4619,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
@@ -3636,10 +4660,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();
@@ -3675,7 +4699,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
@@ -3692,7 +4716,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);
@@ -3712,7 +4736,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"
       >
@@ -3739,7 +4762,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"
       >
@@ -3940,7 +4962,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" }] : []));
@@ -3969,7 +4992,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();
     /**
@@ -3982,7 +5005,11 @@ class DroppableDirective {
         const activeId = this.#dragState.activeDroppableId();
         return activeId === this.vdndDroppable() && !this.disabled();
     }, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
-    /** The current placeholder ID when this droppable is active */
+    /**
+     * `END_OF_LIST` while this droppable is active, otherwise null.
+     * @deprecated It never identifies an item. For the position, use the `placeholderMove` output
+     * (and `DropEvent.destination.index` on drop). Will be removed in the next major version.
+     */
     placeholderId = computed(() => {
         if (!this.isActive()) {
             return null;
@@ -4010,14 +5037,8 @@ 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() {
         createAutoScrollRegistration({
             autoScrollService: this.#autoScroll,
@@ -4030,67 +5051,41 @@ 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(() => {
+        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 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;
+        }
         // Clean up if this droppable is destroyed while being active
         if (this.isActive()) {
             this.#dragState.setActiveDroppable(null);
         }
-        // Unregister from auto-scroll
-        this.#autoScroll.unregisterContainer(this.vdndDroppable());
-        // 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.
@@ -4124,14 +5119,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;
@@ -4151,7 +5146,7 @@ class DroppableDirective {
             sourceDroppableId,
             activeDroppableId: this.vdndDroppable(),
         });
-        this.drop.emit({
+        const event = {
             source: {
                 draggableId: state.draggedItem.draggableId,
                 droppableId: sourceDroppableId,
@@ -4164,7 +5159,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.
@@ -4172,7 +5173,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;
         }
@@ -4245,6 +5246,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.
@@ -4322,6 +5347,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 */
@@ -4335,7 +5367,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()"
@@ -4343,8 +5375,7 @@ class VirtualSortableListComponent {
       [vdndDroppableData]="droppableData()"
       [disabled]="disabled()"
       [constrainToContainer]="constrainToContainer()"
-      (drop)="drop.emit($event)"
-      (placeholderMove)="placeholderMove.emit($event)"
+      vdndSortableListOutputs
     >
       <vdnd-virtual-scroll
         [items]="items()"
@@ -4357,16 +5388,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
@@ -4376,8 +5408,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()"
@@ -4390,13 +5421,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
@@ -4557,8 +5589,9 @@ class VirtualViewportComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VirtualViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: VirtualViewportComponent, isStandalone: true, selector: "vdnd-virtual-viewport", inputs: { itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: true, transformFunction: null }, dynamicItemHeight: { classPropertyName: "dynamicItemHeight", publicName: "dynamicItemHeight", isSignal: true, isRequired: false, transformFunction: null }, contentOffset: { classPropertyName: "contentOffset", publicName: "contentOffset", isSignal: true, isRequired: false, 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 } }, host: { classAttribute: "vdnd-virtual-viewport" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: VirtualViewportComponent, isStandalone: true, selector: "vdnd-virtual-viewport", inputs: { itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: true, transformFunction: null }, dynamicItemHeight: { classPropertyName: "dynamicItemHeight", publicName: "dynamicItemHeight", isSignal: true, isRequired: false, transformFunction: null }, contentOffset: { classPropertyName: "contentOffset", publicName: "contentOffset", isSignal: true, isRequired: false, 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 } }, host: { attributes: { "data-virtual-viewport": "" }, properties: { "attr.data-content-offset": "contentOffset()" }, classAttribute: "vdnd-virtual-viewport" }, providers: [
             { provide: VDND_VIRTUAL_VIEWPORT, useExisting: VirtualViewportComponent },
+            { provide: VDND_OFFSET_ROWS_VIEWPORT, useExisting: VirtualViewportComponent },
             { provide: VDND_SCROLL_CONTAINER, useExisting: VirtualViewportComponent },
         ], ngImport: i0, template: `
     <!-- Spacer maintains total scroll height -->
@@ -4582,9 +5615,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             type: Component,
             args: [{ selector: 'vdnd-virtual-viewport', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: VDND_VIRTUAL_VIEWPORT, useExisting: VirtualViewportComponent },
+                        { provide: VDND_OFFSET_ROWS_VIEWPORT, useExisting: VirtualViewportComponent },
                         { provide: VDND_SCROLL_CONTAINER, useExisting: VirtualViewportComponent },
                     ], host: {
                         class: 'vdnd-virtual-viewport',
+                        // Read by the drag index calculator: this element scrolls its own rows, which start
+                        // data-content-offset px below the top of the scroll area
+                        'data-virtual-viewport': '',
+                        '[attr.data-content-offset]': 'contentOffset()',
                     }, template: `
     <!-- Spacer maintains total scroll height -->
     <div
@@ -4679,6 +5717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 class VirtualContentComponent {
     #elementRef = inject((ElementRef));
     #ngZone = inject(NgZone);
+    #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     /**
      * The parent scroll container injected via skip-self to get the actual scrollable element.
      * We provide our own VDND_SCROLL_CONTAINER with adjusted values to children.
@@ -4807,6 +5846,10 @@ class VirtualContentComponent {
                 this.#measuredHeaderHeight.set(0);
                 return;
             }
+            // Server rendering: no layout to measure, and no ResizeObserver
+            if (!this.#isBrowser) {
+                return;
+            }
             const el = dir.elementRef.nativeElement;
             this.#measuredHeaderHeight.set(el.offsetHeight);
             let observer = null;
@@ -4885,15 +5928,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 class KeyboardDragHandler {
     #deps;
     #boundKeyDown = null;
+    /**
+     * The drag this handler started. Keyboard drag state is shared by every draggable, so a key
+     * that reaches another item (one focused by a click during the drag, for example) must not
+     * move, drop or cancel this drag in that item's name.
+     */
+    #ownDrag = null;
     constructor(deps) {
         this.#deps = deps;
         this.#boundKeyDown = this.#onDocumentKeyDown.bind(this);
     }
     /**
-     * Whether a keyboard drag is currently active.
+     * Whether a keyboard drag this handler started is active.
      */
     isActive() {
-        return this.#deps.keyboardDrag.isActive();
+        return (this.#ownDrag !== null &&
+            this.#deps.keyboardDrag.isActive() &&
+            this.#deps.dragState.draggedItem() === this.#ownDrag);
     }
     /**
      * Start a keyboard drag operation.
@@ -4937,6 +5988,7 @@ class KeyboardDragHandler {
             width: rect.width,
             data: ctx.data,
         }, sourceIndex, totalItemCount, droppableId);
+        this.#ownDrag = this.#deps.dragState.draggedItem();
         // Add document-level keyboard listener (since element is hidden with display:none)
         this.#deps.ngZone.runOutsideAngular(() => {
             document.addEventListener('keydown', this.#boundKeyDown);
@@ -5024,22 +6076,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.
@@ -5053,18 +6108,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.
@@ -5092,7 +6159,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();
             }
@@ -5132,19 +6199,42 @@ class KeyboardDragHandler {
      * Document-level keydown listener active during keyboard drag.
      */
     #onDocumentKeyDown(event) {
+        // The drag ended without this handler (its state was reset elsewhere): stop listening, or
+        // this listener would also take the keys of the next keyboard drag
+        if (!this.isActive()) {
+            this.#cleanupDocumentListener();
+            return;
+        }
         this.handleKey(event);
     }
     /**
      * Remove the document-level keyboard listener.
      */
     #cleanupDocumentListener() {
-        if (this.#boundKeyDown) {
+        this.#ownDrag = null;
+        // Server rendering destroys the directive without a global document, and never added it
+        if (this.#boundKeyDown && typeof document !== 'undefined') {
             document.removeEventListener('keydown', this.#boundKeyDown);
         }
     }
 }
 
-var _a;
+/**
+ * Elements inside a draggable that keep their own interaction: pressing one never starts a
+ * pointer drag, and Space pressed on one never starts a keyboard drag.
+ */
+const INTERACTIVE_ELEMENT_SELECTOR = 'button, input, textarea, select, [contenteditable]';
+/** Class that excludes the element carrying it, and everything inside it, from starting a drag. */
+const NO_DRAG_CLASS = 'no-drag';
+/**
+ * The `no-drag` element inside `draggable` (the draggable itself included) that contains
+ * `target`, or null. A `no-drag` ancestor of the draggable does not count.
+ */
+function findNoDragElement(target, draggable) {
+    const noDrag = target.closest(`.${NO_DRAG_CLASS}`);
+    return noDrag !== null && draggable.contains(noDrag) ? noDrag : null;
+}
+
 /**
  * Handles pointer-based (mouse + touch) drag operations.
  *
@@ -5154,7 +6244,8 @@ var _a;
  * - Drag delay timer
  * - Forwarding moves to the directive (DragSchedulerService coalesces them per frame)
  * - Document-level listener management
- * - Escape key cancellation during pointer drag
+ * - Escape key cancellation during pointer drag, and cancellation when the window loses focus
+ *   or the page is hidden (the release would never arrive) or the system cancels the touch
  */
 class PointerDragHandler {
     #deps;
@@ -5162,10 +6253,18 @@ 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;
     /** Bound event handlers for cleanup */
     #boundPointerMove = null;
     #boundPointerUp = null;
     #boundKeyDown = null;
+    #boundWindowBlur = null;
+    #boundVisibilityChange = null;
     /** Timer ID for drag delay */
     #delayTimerId = null;
     /** Whether the delay has been satisfied (user held long enough) */
@@ -5175,6 +6274,8 @@ class PointerDragHandler {
         this.#boundPointerMove = this.#onPointerMove.bind(this);
         this.#boundPointerUp = this.#onPointerUp.bind(this);
         this.#boundKeyDown = this.#onEscapeKeyDown.bind(this);
+        this.#boundWindowBlur = this.#onFocusLost.bind(this);
+        this.#boundVisibilityChange = this.#onVisibilityChange.bind(this);
     }
     /**
      * The position where the user initially pressed down.
@@ -5209,8 +6310,13 @@ class PointerDragHandler {
         }
         // Check for elements that should not trigger drag
         const target = event.target;
-        if (target.closest('button, input, textarea, select, [contenteditable]') ||
-            target.classList.contains('no-drag')) {
+        if (target.closest(INTERACTIVE_ELEMENT_SELECTOR) ||
+            findNoDragElement(target, ctx.element) !== null) {
+            return;
+        }
+        // Track the finger that pressed this draggable; the others are ignored for the gesture.
+        const touch = 'touches' in event ? PointerDragHandler.#pressingTouch(event, ctx.element) : null;
+        if ('touches' in event && !touch) {
             return;
         }
         const delay = ctx.dragDelay;
@@ -5222,15 +6328,41 @@ class PointerDragHandler {
             event.preventDefault();
         }
         event.stopPropagation();
+        // A second finger on this draggable while the first is still down: keep following the first.
+        if ('touches' in event && touch && this.#isTracking && this.#trackedTouch(event.touches)) {
+            return;
+        }
+        // Only one drag at a time: a second finger or a press during a keyboard drag must not
+        // replace the drag in progress. The press keeps the default handling above, so a mouse press
+        // still doesn't focus this item (which would take the keys of a keyboard drag).
+        if (this.#deps.callbacks.isOtherDragActive()) {
+            return;
+        }
         this.#isTracking = true;
-        this.#startPosition = _a.#getPosition(event);
-        // Handle drag delay
+        this.#pressedId = ctx.draggableId;
+        if (touch) {
+            this.#touchId = touch.identifier;
+            this.#startPosition = { x: touch.clientX, y: touch.clientY };
+        }
+        else {
+            const mouse = event;
+            this.#startPosition = { x: mouse.clientX, y: mouse.clientY };
+        }
+        // Handle drag delay. A repeated press (e.g. after a release the page never saw) restarts the
+        // delay; the previous timer must not survive, or it fires after the gesture has ended.
+        this.#cancelDelayTimer();
         if (delay > 0) {
-            this.#delayReady = false;
             this.#delayTimerId = setTimeout(() => {
+                this.#delayTimerId = null;
+                // 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;
+                }
                 this.#delayReady = true;
                 this.#deps.callbacks.onPendingChange(true); // Emit ready state when delay passes
-                this.#delayTimerId = null;
             }, delay);
         }
         else {
@@ -5249,7 +6381,12 @@ class PointerDragHandler {
             }
             // Listen for Escape key on document to cancel drag
             document.addEventListener('keydown', this.#boundKeyDown);
+            // Switching windows or tabs mid-drag means the release never reaches this page: cancel
+            // instead of leaving the drag active until the next press.
+            window.addEventListener('blur', this.#boundWindowBlur);
+            document.addEventListener('visibilitychange', this.#boundVisibilityChange);
         });
+        this.#listening = true;
     }
     /**
      * Remove listeners + cancel timers.
@@ -5257,9 +6394,17 @@ class PointerDragHandler {
      */
     cleanup() {
         this.#isTracking = false;
+        this.#pressedId = null;
         this.#startPosition = null;
+        this.#touchId = null;
         this.#deps.callbacks.onPendingChange(false); // Clear pending state on cleanup
         this.#cancelDelayTimer();
+        // 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);
@@ -5273,9 +6418,15 @@ class PointerDragHandler {
         if (this.#boundKeyDown) {
             document.removeEventListener('keydown', this.#boundKeyDown);
         }
+        if (this.#boundWindowBlur) {
+            window.removeEventListener('blur', this.#boundWindowBlur);
+        }
+        if (this.#boundVisibilityChange) {
+            document.removeEventListener('visibilitychange', this.#boundVisibilityChange);
+        }
     }
     /**
-     * Full teardown — cleanup + null references.
+     * Teardown when the directive is destroyed: removes listeners and cancels timers.
      */
     destroy() {
         this.cleanup();
@@ -5287,10 +6438,31 @@ class PointerDragHandler {
         if (!this.#isTracking) {
             return;
         }
-        const position = _a.#getPosition(event);
-        const ctx = this.#deps.getContext();
+        let position;
+        if ('touches' in event) {
+            // `touches` holds every finger's current position, so the tracked finger's is there even
+            // when only another finger moved
+            const touch = this.#trackedTouch(event.touches) ?? this.#trackedTouch(event.changedTouches);
+            if (!touch) {
+                // The tracked finger is gone. While dragging, keep other fingers from scrolling the page.
+                if (this.#deps.callbacks.isDragging()) {
+                    event.preventDefault();
+                }
+                return;
+            }
+            position = { x: touch.clientX, y: touch.clientY };
+        }
+        else {
+            position = { x: event.clientX, y: event.clientY };
+        }
         // 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) {
@@ -5304,6 +6476,11 @@ class PointerDragHandler {
                 this.cleanup();
                 return;
             }
+            // Another press won the race and started its drag first: give up this one.
+            if (this.#deps.callbacks.isOtherDragActive()) {
+                this.cleanup();
+                return;
+            }
             // Start the drag - now we can prevent default
             event.preventDefault();
             this.#deps.callbacks.onDragStart(position);
@@ -5327,13 +6504,35 @@ class PointerDragHandler {
         if (!this.#isTracking) {
             return;
         }
+        // Another finger lifted (or was cancelled) while the tracked one is still down. Touches
+        // without an identifier (malformed synthetic events) can't be told apart: any release ends.
+        if ('touches' in event &&
+            typeof this.#touchId === 'number' &&
+            this.#trackedTouch(event.changedTouches) === null &&
+            this.#trackedTouch(event.touches) !== null) {
+            return;
+        }
         // 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();
-            this.#deps.callbacks.onDragEnd(false);
+        // 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');
+            }
+        }
+        finally {
+            this.cleanup();
         }
-        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.
@@ -5350,24 +6549,87 @@ 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);
+            try {
+                this.#deps.callbacks.onDragEnd(true);
+            }
+            finally {
+                this.cleanup();
+            }
+        }
+    }
+    /**
+     * Cancel the drag (or drop the pending press) when the window loses focus.
+     */
+    #onFocusLost() {
+        if (!this.#isTracking) {
+            return;
+        }
+        try {
+            if (this.#deps.callbacks.isDragging()) {
+                this.#deps.callbacks.onDragEnd(true);
+            }
+        }
+        finally {
             this.cleanup();
         }
     }
     /**
-     * Get position from mouse or touch event.
+     * Treat the page being hidden (tab switch, app switch on mobile) as focus loss.
      */
-    static #getPosition(event) {
-        if ('touches' in event) {
-            const touch = event.touches[0] ?? event.changedTouches[0];
-            return { x: touch.clientX, y: touch.clientY };
+    #onVisibilityChange() {
+        if (document.visibilityState === 'hidden') {
+            this.#onFocusLost();
+        }
+    }
+    /**
+     * 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. Read by index, without copying the
+     * list or creating an iterator: this runs for every touch move.
+     */
+    #trackedTouch(touches) {
+        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 { x: event.clientX, y: event.clientY };
+        return null;
+    }
+    /**
+     * The finger that pressed this draggable: of the touches that started with this event, the
+     * one on the draggable (several fingers can land in one touchstart).
+     */
+    static #pressingTouch(event, element) {
+        // Either list can be undefined on synthetic events
+        const started = Array.from(event.changedTouches ?? []);
+        const onElement = started.find((touch) => touch.target instanceof Node && element.contains(touch.target));
+        return onElement ?? started[0] ?? Array.from(event.touches ?? [])[0] ?? null;
     }
 }
-_a = 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.
  *
@@ -5444,9 +6706,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();
@@ -5454,6 +6723,64 @@ class DraggableDirective {
     }, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
     #keyboardHandler;
     #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) */
@@ -5464,9 +6791,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.
@@ -5491,7 +6816,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),
@@ -5516,9 +6842,11 @@ class DraggableDirective {
                 onDragEnd: (cancelled) => this.#endDrag(cancelled),
                 onPendingChange: (pending) => this.#setPending(pending),
                 isDragging: () => this.isDragging(),
+                isOtherDragActive: () => this.#dragState.isDragging() && !this.isDragging(),
             },
             getContext: () => ({
                 element: this.#elementRef.nativeElement,
+                draggableId: this.vdndDraggable(),
                 groupName: this.#effectiveGroup(),
                 disabled: this.disabled(),
                 dragHandle: this.dragHandle(),
@@ -5526,8 +6854,20 @@ class DraggableDirective {
                 dragDelay: this.dragDelay(),
             }),
         });
+        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) {
+            return;
+        }
         // If destroyed mid-drag, cancel to avoid stale global state / ongoing RAF loops.
         if (this.isDragging()) {
             this.#endDrag(true);
@@ -5535,6 +6875,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).
      */
@@ -5549,20 +6918,49 @@ class DraggableDirective {
         if (this.disabled()) {
             return;
         }
+        // Space on a control inside the item types into it or clicks it, just as a press on
+        // one never starts a pointer drag.
+        if (this.#isFromNestedControl(event)) {
+            return;
+        }
         event.preventDefault();
-        event.stopPropagation(); // Prevent document listener from receiving this event
         // If we're in a keyboard drag, Space drops the item
         if (this.#keyboardHandler.isActive()) {
+            event.stopPropagation(); // Prevent document listener from receiving this event
             this.#keyboardHandler.complete();
             return;
         }
-        // If we're in a pointer drag, ignore
-        if (this.isDragging()) {
+        // Another drag is in progress: don't replace it. The key goes on to the document, where a
+        // keyboard drag of another item drops with it.
+        if (this.#dragState.isDragging()) {
             return;
         }
-        // Start keyboard drag
+        // Start keyboard drag. The document listener it adds must not receive this event.
+        event.stopPropagation();
         this.#keyboardHandler.activate();
     }
+    /**
+     * Whether the event comes from a control (or from inside a `no-drag` element) nested inside this
+     * draggable. Neither the draggable itself nor a control around it counts, so a
+     * `<button vdndDraggable>` still picks up with Space, and neither does a control that is the
+     * drag handle, such as a button handle. Controls inside the handle do count.
+     */
+    #isFromNestedControl(event) {
+        const host = this.#elementRef.nativeElement;
+        const target = event.target;
+        if (!(target instanceof Element) || target === host) {
+            return false;
+        }
+        if (findNoDragElement(target, host) !== null) {
+            return true;
+        }
+        const control = target.closest(INTERACTIVE_ELEMENT_SELECTOR);
+        if (control === null || control === host || !host.contains(control)) {
+            return false;
+        }
+        const handleSelector = this.dragHandle();
+        return !handleSelector || !control.matches(handleSelector);
+    }
     /**
      * Handle Enter key (alternative to Space for dropping during keyboard drag).
      */
@@ -5683,13 +7081,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.
@@ -5701,49 +7102,21 @@ class DraggableDirective {
             return 0;
         }
         const rect = element.getBoundingClientRect();
-        const virtualScroll = droppableElement.querySelector('vdnd-virtual-scroll');
-        const virtualContent = droppableElement.matches('vdnd-virtual-content')
-            ? droppableElement
-            : droppableElement.closest('vdnd-virtual-content');
-        let containerRect;
-        let scrollTop;
-        if (virtualScroll) {
-            containerRect = virtualScroll.getBoundingClientRect();
-            scrollTop = virtualScroll.scrollTop;
-        }
-        else if (virtualContent) {
-            // Page-level scroll: use scrollable parent rect + content offset so that
-            // relativeY is measured from the start of the virtual items, not the header.
-            const scrollableParent = virtualContent.closest('.vdnd-scrollable');
-            if (scrollableParent) {
-                containerRect = scrollableParent.getBoundingClientRect();
-                const contentOffsetAttr = virtualContent.getAttribute('data-content-offset');
-                const contentOffset = contentOffsetAttr ? parseFloat(contentOffsetAttr) : 0;
-                scrollTop =
-                    scrollableParent.scrollTop - (Number.isFinite(contentOffset) ? contentOffset : 0);
-            }
-            else {
-                containerRect = virtualContent.getBoundingClientRect();
-                scrollTop = 0;
-            }
-        }
-        else {
-            containerRect = droppableElement.getBoundingClientRect();
-            scrollTop = droppableElement.scrollTop;
-        }
+        // The same measurement that places the placeholder: it knows each container's scroll
+        // element and subtracts space reserved above the rows (contentOffset, page headers).
+        const geometry = this.#dragIndexCalculator.getScrollGeometry(droppableElement, rect.height);
+        const relativeY = rect.top - geometry.rect.top + geometry.scrollTop;
         // Try to use registered strategy for accurate offset-based lookup
         const droppableId = this.#positionCalculator.getDroppableId(droppableElement);
         if (droppableId) {
             const strategy = this.#dragIndexCalculator.getStrategyForDroppable(droppableId);
             if (strategy) {
-                const relativeY = rect.top - containerRect.top + scrollTop;
                 return strategy.findIndexAtOffset(relativeY);
             }
         }
         // Preserve the geometry fallback for a virtual container whose strategy is unavailable.
-        if (virtualScroll || virtualContent) {
+        if (geometry.isVirtual) {
             const itemHeight = rect.height || 50;
-            const relativeY = rect.top - containerRect.top + scrollTop;
             return Math.round(relativeY / itemHeight);
         }
         // Non-virtual fallback: derive the logical index from preceding draggable siblings.
@@ -5933,22 +7306,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.
@@ -5962,7 +7340,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,
@@ -5978,17 +7356,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.
@@ -6160,6 +7530,7 @@ class VirtualForDirective {
     #scrollContainer = inject(VDND_SCROLL_CONTAINER);
     #injector = inject(Injector);
     #ngZone = inject(NgZone);
+    #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     #dragState = inject(DragStateService);
     #dragIndexCalculator = inject(DragIndexCalculatorService);
     /**
@@ -6168,6 +7539,8 @@ class VirtualForDirective {
      * so we skip individual absolute positioning.
      */
     #viewport = inject(VDND_VIRTUAL_VIEWPORT, { optional: true });
+    /** A vdnd-virtual-viewport, whose rows start contentOffset px down (see #rowsScrollTop) */
+    #offsetRowsViewport = inject(VDND_OFFSET_ROWS_VIEWPORT, { optional: true });
     /**
      * Optional parent droppable directive.
      * When present, droppableId is inherited automatically.
@@ -6189,7 +7562,7 @@ class VirtualForDirective {
     #placeholderInDom = false;
     /** ResizeObserver for dynamic height measurement */
     #resizeObserver = null;
-    /** Map from observed HTMLElement to its trackBy key */
+    /** Map from observed HTMLElement to its trackBy key (reset with each new observer) */
     #observedElements = new WeakMap();
     // ========== Inputs ==========
     /** The array of items to iterate over */
@@ -6266,8 +7639,21 @@ class VirtualForDirective {
         const strategy = this.#strategy();
         // Read version to subscribe to dynamic height changes
         strategy.version();
-        return strategy.getFirstVisibleIndex(this.#scrollContainer.scrollTop());
+        return strategy.getFirstVisibleIndex(this.#rowsScrollTop());
     }, ...(ngDevMode ? [{ debugName: "#firstVisibleIndex" }] : []));
+    /**
+     * How far the rows are scrolled. A vdnd-virtual-viewport's rows start contentOffset px down its
+     * scroll area, but its scrollTop() is the raw position (scrollBy() relies on it), so subtract the
+     * offset here. vdnd-virtual-content's scrollTop() already excludes its offset.
+     */
+    #rowsScrollTop() {
+        const scrollTop = this.#scrollContainer.scrollTop();
+        const viewport = this.#viewport;
+        if (viewport === null || viewport !== this.#offsetRowsViewport) {
+            return scrollTop;
+        }
+        return Math.max(0, scrollTop - viewport.contentOffset());
+    }
     /** Number of visible items */
     #visibleCount = computed(() => {
         const height = this.#scrollContainer.containerHeight();
@@ -6286,38 +7672,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) => {
@@ -6333,24 +7728,46 @@ 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 {
                 strategy.setExcludedIndex(null);
             }
         });
+        // Measure item heights in dynamic height mode: the directive's own input, or the viewport's
+        // strategy when inherited. Both can change at runtime, and the strategy is replaced when they
+        // do, so this creates, replaces or removes the observer. A new observer reports every
+        // rendered item, so a new strategy gets their heights.
+        effect((onCleanup) => {
+            // Read the strategy first so the effect tracks its replacement even when the input is on
+            const strategy = this.#strategy();
+            const measure = this.vdndVirtualForDynamicItemHeight() || strategy instanceof DynamicHeightStrategy;
+            // No ResizeObserver during server rendering
+            if (!measure || !this.#isBrowser) {
+                return;
+            }
+            untracked(() => this.#startMeasuring());
+            onCleanup(() => this.#stopMeasuring());
+        });
         // React to changes and update views
         effect(() => {
             this.#updateViews();
         });
     }
     ngOnInit() {
+        // Server rendering: there is no ResizeObserver, and elements added outside the template
+        // (spacer, placeholder) would not match the client's DOM during hydration. The browser adds
+        // the spacer on init, so the server markup lacks only the list's scroll height until then.
+        if (!this.#isBrowser) {
+            return;
+        }
         // Only create spacer when NOT inside a viewport component
         // (viewport provides its own spacer and wrapper positioning)
         if (!this.#useViewportPositioning) {
@@ -6358,12 +7775,6 @@ class VirtualForDirective {
         }
         // Create placeholder element for drag operations
         this.#createPlaceholder();
-        // Set up ResizeObserver for dynamic height mode.
-        // Check both the directive's own input and the viewport's strategy (when inherited).
-        if (this.vdndVirtualForDynamicItemHeight() ||
-            this.#strategy() instanceof DynamicHeightStrategy) {
-            this.#setupResizeObserver();
-        }
     }
     ngOnDestroy() {
         this.#viewPool.forEach((view) => view.destroy());
@@ -6432,6 +7843,19 @@ class VirtualForDirective {
             spacer.style.height = `${strategy.getTotalHeight(total)}px`;
         }, { injector: this.#injector });
     }
+    /** Create the ResizeObserver and observe the items already rendered. */
+    #startMeasuring() {
+        this.#setupResizeObserver();
+        for (const [key, view] of this.#activeViews) {
+            this.#observeViewElements(view, key);
+        }
+    }
+    /** Disconnect the ResizeObserver and forget what it observed. */
+    #stopMeasuring() {
+        this.#resizeObserver?.disconnect();
+        this.#resizeObserver = null;
+        this.#observedElements = new WeakMap();
+    }
     /**
      * Set up ResizeObserver for dynamic height measurement.
      */
@@ -6509,14 +7933,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
@@ -6626,14 +8048,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
@@ -6645,6 +8061,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;
@@ -6655,7 +8072,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) {
@@ -6680,8 +8097,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.
@@ -6707,28 +8149,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.
      */
@@ -6867,9 +8340,9 @@ function moveItem(event, lists) {
         reorderItems(event, sourceList);
         return;
     }
-    // Cross-list move
-    const sourceItems = sourceList();
-    const item = sourceItems[sourceIndex];
+    // Cross-list move. Read untracked, as in reorderItems: an effect that applies the drop must
+    // not depend on the lists it changes.
+    const item = untracked(sourceList)[sourceIndex];
     if (item === undefined) {
         if (isDevMode()) {
             console.warn(`[ngx-virtual-dnd] [moveItem] Could not find item at index ${sourceIndex}`);
@@ -6911,6 +8384,14 @@ function reorderItems(event, list) {
     if (sourceIndex === destIndex) {
         return;
     }
+    // The list may have changed during the drag; never splice in a missing item as undefined.
+    // Read untracked: from an effect, a tracked read would make the effect re-run on this reorder.
+    if (untracked(list)[sourceIndex] === undefined) {
+        if (isDevMode()) {
+            console.warn(`[ngx-virtual-dnd] [reorderItems] Could not find item at index ${sourceIndex}`);
+        }
+        return;
+    }
     list.update((items) => {
         const newItems = [...items];
         const [removed] = newItems.splice(sourceIndex, 1);