ngx-virtual-dnd 3.2.0 → 3.2.1

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, computed, effect, Injectable, inject, NgZone, input, ChangeDetectionStrategy, Component, DestroyRef, afterNextRender, ElementRef, Injector, PLATFORM_ID, untracked, afterRenderEffect, viewChild, Directive, isDevMode, output, contentChild, EnvironmentInjector, TemplateRef, ViewContainerRef } from '@angular/core';
+import { 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';
 
@@ -451,6 +454,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;
@@ -506,7 +517,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" }] : []));
@@ -530,7 +541,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 +587,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 +611,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 +636,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 +652,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) {
@@ -760,6 +780,10 @@ function queryAllByAttribute(root, attributeName, attributeValue) {
     return Array.from(root.querySelectorAll(`[${attributeName}]`)).filter((candidate) => candidate.getAttribute(attributeName) === attributeValue);
 }
 
+/** The parent lookups stop below `<body>`: it and `<html>` never count as list or item. */
+function isPageRoot(element) {
+    return element.tagName === 'BODY' || element.tagName === 'HTML';
+}
 /**
  * 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.
@@ -774,8 +798,6 @@ 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. */
@@ -1071,15 +1093,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 +1116,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.
@@ -1334,8 +1352,14 @@ 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);
+        onTick(this.#pendingCursor, cursorDirty);
         // Reschedule only if still active (stop() may have been called by onTick).
         if (this.#onTick !== null) {
             this.#scheduleNextTick();
@@ -1868,6 +1892,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,6 +2147,7 @@ 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
@@ -2125,7 +2155,13 @@ class DragIndexCalculatorService {
         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;
         }
@@ -2164,29 +2200,19 @@ class DragIndexCalculatorService {
     getTotalItemCount(args) {
         return this.#getTotalItemCount(args.droppableElement, args.isSameList, 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)
@@ -2274,6 +2300,35 @@ class DragIndexCalculatorService {
         placeholderIndex = Math.max(0, Math.min(placeholderIndex, totalItems));
         return { index: placeholderIndex, placeholderId: END_OF_LIST };
     }
+    #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;
+    }
     #getTotalItemCount(droppableElement, isSameList, draggedItemHeight) {
         // Check if a registered strategy exists
         const droppableId = this.#positionCalculator.getDroppableId(droppableElement);
@@ -2401,10 +2456,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 +2497,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 +2512,7 @@ function bindResizeObserverHeightSignal(options) {
         });
         observer.observe(element);
     });
-    height.set(element.clientHeight);
+    height.set(layoutValue(element.clientHeight));
     return () => {
         observer?.disconnect();
         observer = null;
@@ -2716,11 +2775,12 @@ class VirtualScrollContainerComponent {
     #keyboardDrag = inject(KeyboardDragService);
     #ngZone = inject(NgZone);
     #injector = inject(Injector);
+    #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 */
@@ -3098,10 +3158,23 @@ class VirtualScrollContainerComponent {
         });
     }
     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 +3193,7 @@ class VirtualScrollContainerComponent {
             thresholdPx: 5,
         });
         // Observe rendered items for dynamic height measurement
-        if (this.dynamicItemHeight()) {
-            this.#observeRenderedItems();
-        }
+        this.#observeRenderedItems();
     }
     /**
      * Scroll so the placeholder is fully visible during a keyboard drag into this list.
@@ -3171,11 +3242,12 @@ class VirtualScrollContainerComponent {
     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();
     }
     #createShiftAnimator() {
@@ -3204,39 +3276,37 @@ 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 rendered items change, once they are in the DOM (a plain effect runs
+        // before the template renders them, so newly rendered rows would be missed)
+        afterRenderEffect(() => {
+            const observer = this.#itemResizeObserver();
             if (!observer)
                 return;
+            const rendered = this.renderedItems();
+            const idFn = this.itemIdFn();
             // Find the content wrapper and observe item elements
             const wrapper = this.#elementRef.nativeElement.querySelector('.vdnd-virtual-scroll-content-wrapper');
             if (!wrapper)
@@ -3275,8 +3345,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.
@@ -3982,7 +4055,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;
@@ -4018,6 +4095,8 @@ class DroppableDirective {
      * 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,
@@ -4034,6 +4113,7 @@ class DroppableDirective {
         // Matters when it mounts DURING an active drag — the candidate snapshot was frozen at
         // drag start, so without this a conditionally rendered list would never become a target.
         afterNextRender(() => {
+            this.#rendered = true;
             const group = this.effectiveGroup();
             if (group) {
                 this.#positionCalculator.notifyCandidatesChanged(group);
@@ -4079,12 +4159,17 @@ class DroppableDirective {
         });
     }
     ngOnDestroy() {
+        // Destroyed before it rendered: its inputs may have no values yet, and it never became a
+        // drop target or a candidate the calculator knows about. (Not an ngOnInit flag: a subclass
+        // with its own ngOnInit would skip it.)
+        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());
+        // Auto-scroll unregisters itself on destroy (see createAutoScrollRegistration).
         // If this droppable unmounts mid-drag, tell the calculator so it drops it from the
         // frozen candidate list (deferred re-query runs once the element has left the DOM).
         const group = untracked(() => this.effectiveGroup());
@@ -4557,8 +4642,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 +4668,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 +4770,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 +4899,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 +4981,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 +5041,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);
@@ -5132,19 +5237,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 +5282,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 +5291,14 @@ class PointerDragHandler {
     #startPosition = null;
     /** Whether we're currently tracking a potential drag */
     #isTracking = 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 +5308,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 +5344,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 +5362,39 @@ 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
+        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: drop the press rather than show it
+                // as ready to drag during that drag.
+                if (this.#deps.callbacks.isOtherDragActive()) {
+                    this.cleanup();
+                    return;
+                }
                 this.#delayReady = true;
                 this.#deps.callbacks.onPendingChange(true); // Emit ready state when delay passes
-                this.#delayTimerId = null;
             }, delay);
         }
         else {
@@ -5249,6 +5413,10 @@ 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);
         });
     }
     /**
@@ -5258,8 +5426,13 @@ class PointerDragHandler {
     cleanup() {
         this.#isTracking = false;
         this.#startPosition = null;
+        this.#touchId = null;
         this.#deps.callbacks.onPendingChange(false); // Clear pending state on cleanup
         this.#cancelDelayTimer();
+        // Server rendering destroys the directive without a global document, and never added any
+        if (typeof document === 'undefined') {
+            return;
+        }
         // Remove event listeners
         if (this.#boundPointerMove) {
             document.removeEventListener('mousemove', this.#boundPointerMove);
@@ -5273,9 +5446,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,7 +5466,23 @@ class PointerDragHandler {
         if (!this.#isTracking) {
             return;
         }
-        const position = _a.#getPosition(event);
+        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 };
+        }
         const ctx = this.#deps.getContext();
         // Check if we've moved past the threshold
         if (!this.#deps.callbacks.isDragging() && this.#startPosition) {
@@ -5304,6 +5499,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,11 +5527,21 @@ 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 system took the touch (an incoming call, an OS gesture, too many fingers): the user
+            // never released, so this is a cancel, not a drop
+            this.#deps.callbacks.onDragEnd(event.type === 'touchcancel');
         }
         this.cleanup();
     }
@@ -5356,17 +5566,43 @@ class PointerDragHandler {
         }
     }
     /**
-     * Get position from mouse or touch event.
+     * Cancel the drag (or drop the pending press) when the window loses focus.
      */
-    static #getPosition(event) {
-        if ('touches' in event) {
-            const touch = event.touches[0] ?? event.changedTouches[0];
-            return { x: touch.clientX, y: touch.clientY };
+    #onFocusLost() {
+        if (!this.#isTracking) {
+            return;
+        }
+        if (this.#deps.callbacks.isDragging()) {
+            this.#deps.callbacks.onDragEnd(true);
+        }
+        this.cleanup();
+    }
+    /**
+     * Treat the page being hidden (tab switch, app switch on mobile) as focus loss.
+     */
+    #onVisibilityChange() {
+        if (document.visibilityState === 'hidden') {
+            this.#onFocusLost();
         }
-        return { x: event.clientX, y: event.clientY };
+    }
+    /**
+     * 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.
+     */
+    #trackedTouch(touches) {
+        return Array.from(touches ?? []).find((touch) => touch.identifier === this.#touchId) ?? 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;
 
 /**
  * Makes an element draggable within the virtual scroll drag-and-drop system.
@@ -5454,6 +5690,8 @@ class DraggableDirective {
     }, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
     #keyboardHandler;
     #pointerHandler;
+    /** Set by ngOnInit, which creates the handlers */
+    #initialized = false;
     /** Cached constraint flag from source droppable */
     #constrainToContainer = false;
     /** Element whose rect is used for clamping (scroll container or droppable itself) */
@@ -5516,6 +5754,7 @@ 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,
@@ -5526,8 +5765,14 @@ class DraggableDirective {
                 dragDelay: this.dragDelay(),
             }),
         });
+        this.#initialized = true;
     }
     ngOnDestroy() {
+        // 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);
@@ -5549,20 +5794,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).
      */
@@ -5701,49 +5975,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.
@@ -6160,6 +6406,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 +6415,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 +6438,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 +6515,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();
@@ -6345,12 +6607,33 @@ class VirtualForDirective {
                 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 +6641,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 +6709,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.
      */
@@ -6867,9 +7157,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 +7201,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);