@mapples/dnd 1.1.2 → 1.2.1

package/dist/monitor/Monitor.js

@@ -22,8 +22,25 @@ export class Monitor {
     dragElements = new Map();
     /** Tree structure of registered drop elements */
     dropElementsTree = new Map();
+    /**
+     * Flat index of every registered drop element and its parent id. Kept in
+     * lockstep with the tree by register/unregister/update — the only writers —
+     * so id lookups and frame-key resolution are O(1)/O(depth) instead of a
+     * full recursive tree walk per layout event.
+     */
+    dropNodesById = new Map();
+    dropParentById = new Map();
+    /** Pending coalesced force-layout broadcast (one per animation frame). */
+    forceLayoutUpdatePending = false;
+    /** Registered frame coordinate spaces by key */
+    frames = new Map();
     /** ID of the currently active drag target */
     dragTargetId = null;
+    /** Active move-drag source (an existing canvas element being moved) */
+    moveSource = null;
+    /** Pointer coords at drag start / most recent drag tick (drop space) */
+    dragStartCoords = null;
+    lastDragCoords = null;
     /** Currently active drop target */
     dropTarget = null;
     /** Index position within the current drop target */
@@ -40,6 +57,42 @@ export class Monitor {
             this.trackOutside = true;
         }
     }
+    /**
+     * Registers (or replaces) a frame coordinate space. Drop elements whose
+     * config carries the same `frameKey` are stored and hit-tested in
+     * coordinates relative to this frame's origin.
+     */
+    registerFrame(frameKey, entry) {
+        this.frames.set(frameKey, entry);
+    }
+    /**
+     * Moves a frame's world origin. O(1): no element re-measures needed since
+     * frame content layouts are origin-relative.
+     */
+    updateFrameOrigin(frameKey, origin) {
+        const frame = this.frames.get(frameKey);
+        if (!frame)
+            return;
+        this.frames.set(frameKey, { ...frame, origin });
+    }
+    /** Removes a frame coordinate space. */
+    unregisterFrame(frameKey) {
+        this.frames.delete(frameKey);
+    }
+    /** Gets a registered frame space by key. */
+    getFrame(frameKey) {
+        return this.frames.get(frameKey);
+    }
+    /**
+     * Converts world coordinates into a frame's local space.
+     * Falls through unchanged when the frame isn't registered.
+     */
+    toFrameLocal(coords, frameKey) {
+        const frame = this.frames.get(frameKey);
+        if (!frame)
+            return coords;
+        return { x: coords.x - frame.origin.x, y: coords.y - frame.origin.y };
+    }
     /**
      * Gets the ID of the currently active drag target.
      * @returns The drag target ID or null if no drag is active
@@ -56,11 +109,20 @@ export class Monitor {
     }
     /**
      * Triggers a force layout update event.
-     * This causes all registered elements to recalculate their layout information.
+     * This causes all registered elements to recalculate their layout
+     * information. Every registered element answers with a forced layout read,
+     * so calls are coalesced to at most one broadcast per animation frame —
+     * scroll handlers and settle timers may call this at input rate.
      */
     triggerForceLayoutUpdate() {
-        this.events.next({
-            type: DnDEventType.LayoutForceUpdate,
+        if (this.forceLayoutUpdatePending)
+            return;
+        this.forceLayoutUpdatePending = true;
+        requestAnimationFrame(() => {
+            this.forceLayoutUpdatePending = false;
+            this.events.next({
+                type: DnDEventType.LayoutForceUpdate,
+            });
         });
     }
     /**
@@ -144,18 +206,63 @@ export class Monitor {
     }
     /**
      * Handles the start of a drag operation.
-     * @param dragCoords - The coordinates where the drag started
+     * @param dragCoords - Coordinates in drop-target space (world space when a
+     * pointer transform is installed), or `null` when the press began outside
+     * that space entirely. A palette press is exactly that case — the palette
+     * lives beside the canvas, not on it — so a null here must never abort the
+     * drag; it only rules out grabbing an existing element to move.
+     * @param windowCoords - Raw window coordinates for drag-*source* hit
+     * testing (palette items live outside any frame); defaults to `dragCoords`
      */
-    onDragStart(dragCoords) {
-        const dragTargetId = this.getDragTarget(dragCoords);
-        if (!dragTargetId)
+    onDragStart(dragCoords, windowCoords) {
+        this.dragStartCoords = dragCoords;
+        this.lastDragCoords = dragCoords;
+        const sourceCoords = windowCoords ?? dragCoords;
+        if (!sourceCoords)
+            return;
+        const dragTargetId = this.getDragTarget(sourceCoords);
+        if (dragTargetId) {
+            const dragTarget = this.dragElements.get(dragTargetId);
+            this.setDragTargetId(dragTargetId);
+            this.events.next({
+                type: DnDEventType.DragStart,
+                target: this.getDragTargetId(),
+                data: dragTarget?.item.data,
+                kind: 'palette',
+            });
+            return;
+        }
+        // No palette source under the pointer — a drag that starts on an
+        // existing canvas element moves it (Figma-style direct manipulation).
+        // A press outside the drop space can't be on such an element.
+        if (!dragCoords)
+            return;
+        const dropTargets = this.getDropTargets(dragCoords, this.dropElementsTree);
+        const shallowTarget = this.getShallowTarget(dropTargets, dragCoords);
+        const componentId = shallowTarget?.data
+            ?.id;
+        if (!shallowTarget || !componentId)
+            return;
+        // Root-level elements (page roots) are not movable.
+        if (this.dropElementsTree.has(shallowTarget.id))
             return;
-        const dragTarget = this.dragElements.get(dragTargetId);
-        this.setDragTargetId(dragTargetId);
+        const hit = shallowTarget.hitCoords ?? dragCoords;
+        this.moveSource = {
+            dropId: shallowTarget.id,
+            componentId,
+            frameKey: shallowTarget.frameKey ?? null,
+            grabOffset: {
+                x: hit.x - shallowTarget.layout.x,
+                y: hit.y - shallowTarget.layout.y,
+            },
+        };
         this.events.next({
             type: DnDEventType.DragStart,
-            target: this.getDragTargetId(),
-            data: dragTarget?.item.data,
+            dropTarget: shallowTarget,
+            data: shallowTarget.data,
+            kind: 'move',
+            moveSource: this.moveSource,
+            frameKey: shallowTarget.frameKey ?? null,
         });
     }
     /**
@@ -164,21 +271,124 @@ export class Monitor {
      */
     onDrag(dragCoords) {
         const dragTargetId = this.getDragTargetId();
-        if (!dragTargetId)
+        if (!dragTargetId && !this.moveSource)
             return;
-        const dropTargets = this.getDropTargets(dragCoords, this.dropElementsTree);
+        this.lastDragCoords = dragCoords;
+        // While moving an element, its own subtree is not a valid drop target.
+        const dropTargets = this.getDropTargets(dragCoords, this.dropElementsTree, null, this.moveSource?.dropId ?? null);
         const shallowTarget = this.getShallowTarget(dropTargets, dragCoords);
-        if (!shallowTarget?.canDrop)
-            return;
-        this.setDropTarget(shallowTarget);
-        const dropTargetIndex = this.getDropTargetIndexData(dragCoords, shallowTarget);
-        this.setDropTargetIndex(dropTargetIndex);
+        // Leaving every droppable area clears the pending drop rather than
+        // keeping the last one: the pointer is the only thing that decides where
+        // a drop lands, so hovering out must be indistinguishable from never
+        // having hovered in. The Drag event still fires (with a null target) so
+        // overlays drop their highlight instead of stranding it on the element
+        // the pointer last passed over.
+        const target = shallowTarget?.canDrop ? shallowTarget : null;
+        this.setDropTarget(target);
+        this.setDropTargetIndex(target
+            ? this.getDropTargetIndexData(target.hitCoords ?? dragCoords, target)
+            : null);
         this.events.next({
             type: DnDEventType.Drag,
             target: dragTargetId,
             dropTarget: this.getDropTarget(),
             dropTargetIndex: this.getDropTargetIndex(),
             dragCoords: dragCoords,
+            frameKey: target?.frameKey ?? null,
+            kind: this.moveSource ? 'move' : 'palette',
+            moveSource: this.moveSource,
+        });
+    }
+    /**
+     * The pointer left the drop coordinate space entirely — reported by the
+     * host when its `pointerTransform` cannot place the pointer (e.g. it moved
+     * off the canvas viewport onto surrounding chrome). Equivalent to hovering
+     * empty space: the pending drop clears, so a release here cancels.
+     */
+    onDragOutside() {
+        const dragTargetId = this.getDragTargetId();
+        if (!dragTargetId && !this.moveSource)
+            return;
+        // Already cleared — don't republish on every pointer move outside.
+        if (!this.getDropTarget() && this.getDropTargetIndex() === null)
+            return;
+        this.setDropTarget(null);
+        this.setDropTargetIndex(null);
+        this.events.next({
+            type: DnDEventType.Drag,
+            target: dragTargetId,
+            dropTarget: null,
+            dropTargetIndex: null,
+            dragCoords: this.lastDragCoords,
+            frameKey: null,
+            kind: this.moveSource ? 'move' : 'palette',
+            moveSource: this.moveSource,
+        });
+    }
+    /**
+     * Hit-tests a point in drop space with no drag registered. Drags that start
+     * outside the app — files dragged in from the OS — never register a drag
+     * element, so they cannot go through {@link onDrag}; this gives them the
+     * same target and insert-index resolution the in-app drag path uses.
+     * @param dropCoords - The coordinates to hit-test, in drop space
+     */
+    hitTest(dropCoords) {
+        const dropTargets = this.getDropTargets(dropCoords, this.dropElementsTree);
+        const shallowTarget = this.getShallowTarget(dropTargets, dropCoords);
+        const dropTarget = shallowTarget?.canDrop ? shallowTarget : null;
+        return {
+            dropTarget,
+            dropTargetIndex: dropTarget
+                ? this.getDropTargetIndexData(dropTarget.hitCoords ?? dropCoords, dropTarget)
+                : null,
+        };
+    }
+    /**
+     * Publishes an external drag's current position, so the drop chrome
+     * (hover highlight, insert line) tracks a file dragged in from the OS
+     * exactly as it tracks an in-app drag. Pass `null` coordinates while the
+     * pointer sits outside the drop space — that clears the pending drop the
+     * same way hovering off a droppable area does mid-drag.
+     * @param dropCoords - The pointer position in drop space, or null
+     */
+    onExternalDrag(dropCoords) {
+        const { dropTarget, dropTargetIndex } = dropCoords
+            ? this.hitTest(dropCoords)
+            : { dropTarget: null, dropTargetIndex: null };
+        // Nothing to say when the drag is still over empty space it was already
+        // over — pointer moves arrive at input rate.
+        if (!dropTarget && !this.getDropTarget())
+            return;
+        this.lastDragCoords = dropCoords;
+        this.setDropTarget(dropTarget);
+        this.setDropTargetIndex(dropTargetIndex);
+        this.events.next({
+            type: DnDEventType.Drag,
+            target: null,
+            dropTarget,
+            dropTargetIndex,
+            dragCoords: dropCoords,
+            frameKey: dropTarget?.frameKey ?? null,
+            kind: 'external',
+        });
+    }
+    /**
+     * Ends an external drag — the files were dropped, or the drag left the
+     * window. Always `cancelled`: whatever the drop produces is inserted by
+     * the host once its uploads finish, never by the DnD path.
+     */
+    onExternalDragEnd() {
+        this.lastDragCoords = null;
+        this.setDropTarget(null);
+        this.setDropTargetIndex(null);
+        this.events.next({
+            type: DnDEventType.DragEnd,
+            target: null,
+            dropTarget: null,
+            dropTargetIndex: null,
+            frameKey: null,
+            kind: 'external',
+            cancelled: true,
         });
     }
     /**
@@ -186,30 +396,45 @@ export class Monitor {
      * @param dragCoords - The coordinates where the selection occurred
      */
     onSelect(dragCoords) {
-        if (!this.isInsideFirstRootElement(dragCoords) && !this.trackOutside)
+        if (!this.isInsideAnyRootElement(dragCoords) && !this.trackOutside)
             return;
         const dropTargets = this.getDropTargets(dragCoords, this.dropElementsTree);
         const shallowTarget = this.getShallowTarget(dropTargets, dragCoords);
         this.events.next({
             type: DnDEventType.Select,
             dropTarget: shallowTarget,
+            frameKey: shallowTarget?.frameKey ?? null,
         });
     }
     /**
-     * Checks if the given coordinates are inside the first root element.
-     * @param dragCoords - The coordinates to check
-     * @returns True if inside the first root element
+     * Checks if the given coordinates are inside any root drop element,
+     * converting into frame-local space for frame-rooted elements.
      * @private
      */
-    isInsideFirstRootElement(dragCoords) {
-        const firstRootElement = this.dropElementsTree.entries().next().value;
-        if (!firstRootElement)
-            return false;
-        const [, firstRootTarget] = firstRootElement;
-        return (firstRootTarget.layout.x <= dragCoords.x &&
-            firstRootTarget.layout.y <= dragCoords.y &&
-            firstRootTarget.layout.x + firstRootTarget.layout.width >= dragCoords.x &&
-            firstRootTarget.layout.y + firstRootTarget.layout.height >= dragCoords.y);
+    isInsideAnyRootElement(dragCoords) {
+        for (const [, target] of this.dropElementsTree) {
+            const coords = target.frameKey
+                ? this.toFrameLocal(dragCoords, target.frameKey)
+                : dragCoords;
+            if (target.layout.x <= coords.x &&
+                target.layout.y <= coords.y &&
+                target.layout.x + target.layout.width >= coords.x &&
+                target.layout.y + target.layout.height >= coords.y) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Looks up a registered drop target (with its current layout and frame
+     * key) by matching data properties — e.g. `{ id: componentId }`.
+     *
+     * @param frameKey - Restrict the search to one frame's subtree. Required
+     * whenever ids are only unique per frame (every page root shares the id
+     * `root`, so an unscoped lookup can return another frame's element).
+     */
+    getDropTargetByData(dataQuery, frameKey) {
+        return this.findDropTargetByData(dataQuery, this.dropElementsTree, null, frameKey ?? null);
     }
     /**
      * Handles external selection by data query.
@@ -220,21 +445,47 @@ export class Monitor {
         this.events.next({
             type: DnDEventType.Select,
             dropTarget: dropTarget,
+            frameKey: dropTarget?.frameKey ?? null,
         });
     }
     /**
-     * Handles the end of a drag operation.
+     * Handles the end of a drag operation. Releasing the pointer outside every
+     * droppable area cancels the drag: `DragEnd` still fires — overlays, the
+     * drag ghost and `isDragging` all reset on it — but carries a null
+     * `dropTarget` and `cancelled: true`, so nothing is inserted or moved.
      */
     onDragEnd() {
+        const dragTargetId = this.getDragTargetId();
+        const moveSource = this.moveSource;
         const dropTarget = this.getDropTarget();
-        if (!dropTarget)
+        // Idempotent: a pan that never became a drag (canvas panning, or a
+        // gesture cancelled before activation) must not emit a phantom DragEnd.
+        if (!dragTargetId && !moveSource) {
+            this.resetDragState();
             return;
+        }
         this.events.next({
             type: DnDEventType.DragEnd,
-            target: this.getDragTargetId(),
+            target: dragTargetId,
             dropTarget: dropTarget,
-            dropTargetIndex: this.getDropTargetIndex(),
+            dropTargetIndex: dropTarget ? this.getDropTargetIndex() : null,
+            frameKey: dropTarget?.frameKey ?? null,
+            kind: moveSource ? 'move' : 'palette',
+            moveSource,
+            dragCoords: this.lastDragCoords,
+            dragStartCoords: this.dragStartCoords,
+            cancelled: !dropTarget,
         });
+        this.resetDragState();
+    }
+    /**
+     * Clears every piece of per-drag state.
+     * @private
+     */
+    resetDragState() {
+        this.moveSource = null;
+        this.dragStartCoords = null;
+        this.lastDragCoords = null;
         this.setDragTargetId(null);
         this.setDropTarget(null);
         this.setDropTargetIndex(null);
@@ -250,7 +501,7 @@ export class Monitor {
     registerDropElement(layout, parent, config, data) {
         this.dropElementIds++;
         if (!parent) {
-            this.dropElementsTree.set(this.dropElementIds, {
+            const item = {
                 layout: {
                     ...layout,
                     index: config?.index || 0,
@@ -259,17 +510,21 @@ export class Monitor {
                 },
                 canDrop: config?.canDrop,
                 data,
-            });
+                frameKey: config?.frameKey,
+            };
+            this.dropElementsTree.set(this.dropElementIds, item);
+            this.dropNodesById.set(this.dropElementIds, item);
+            this.dropParentById.set(this.dropElementIds, null);
         }
         else {
-            const parentLayout = this.findDropTarget(parent, this.dropElementsTree);
+            const parentLayout = this.dropNodesById.get(parent);
             if (!parentLayout) {
                 throw new Error('Parent element not found');
             }
             if (!parentLayout.children) {
                 parentLayout.children = new Map();
             }
-            parentLayout.children.set(this.dropElementIds, {
+            const item = {
                 layout: {
                     ...layout,
                     index: config?.index || 0,
@@ -278,7 +533,10 @@ export class Monitor {
                 },
                 canDrop: config?.canDrop,
                 data,
-            });
+            };
+            parentLayout.children.set(this.dropElementIds, item);
+            this.dropNodesById.set(this.dropElementIds, item);
+            this.dropParentById.set(this.dropElementIds, parent);
         }
         return this.dropElementIds;
     }
@@ -290,8 +548,14 @@ export class Monitor {
         if (this.dropElementsTree.has(id)) {
             this.dropElementsTree.delete(id);
         }
-        const parent = this.findDropTargetParent(id, this.dropElementsTree);
-        parent?.children?.delete(id);
+        else {
+            const parentId = this.dropParentById.get(id);
+            if (parentId != null) {
+                this.dropNodesById.get(parentId)?.children?.delete(id);
+            }
+        }
+        this.dropNodesById.delete(id);
+        this.dropParentById.delete(id);
     }
     /**
      * Updates the layout and configuration for a registered drop element.
@@ -301,27 +565,34 @@ export class Monitor {
      * @param data - Optional new data
      */
     updateDropElement(id, layout, config, data) {
-        const target = this.findDropTarget(id, this.dropElementsTree);
+        const target = this.dropNodesById.get(id);
         if (target) {
+            const nextIndex = config?.index || target.layout.index;
+            const nextZIndex = config?.zIndex || target.layout.zIndex;
+            const nextFlexDirection = config?.flexDirection || target.layout.flexDirection;
+            const changed = target.layout.x !== layout.x ||
+                target.layout.y !== layout.y ||
+                target.layout.width !== layout.width ||
+                target.layout.height !== layout.height ||
+                target.layout.index !== nextIndex ||
+                target.layout.zIndex !== nextZIndex ||
+                target.layout.flexDirection !== nextFlexDirection;
             target.layout.x = layout.x;
             target.layout.y = layout.y;
             target.layout.width = layout.width;
             target.layout.height = layout.height;
-            target.layout.index = config?.index || target.layout.index;
-            target.layout.zIndex = config?.zIndex || target.layout.zIndex;
-            target.layout.flexDirection =
-                config?.flexDirection || target.layout.flexDirection;
+            target.layout.index = nextIndex;
+            target.layout.zIndex = nextZIndex;
+            target.layout.flexDirection = nextFlexDirection;
             target.data = data || target.data;
             target.canDrop = config?.canDrop || target.canDrop;
-            if (this.dropElementsTree.has(id)) {
-                this.dropElementsTree.set(id, target);
-            }
-            else {
-                const parent = this.findDropTargetParent(id, this.dropElementsTree);
-                if (parent) {
-                    parent.children?.set(id, target);
-                }
+            // Layout listeners (selection overlays, highlight rects) only react to
+            // geometry/order. Re-measures land here at input rate and are usually
+            // no-ops — broadcasting those floods every subscriber for nothing.
+            if (!changed) {
+                return;
             }
+            const frameKey = this.findFrameKeyFor(id);
             this.events.next({
                 type: DnDEventType.Layout,
                 target: id,
@@ -331,31 +602,26 @@ export class Monitor {
                     layout: target.layout,
                     canDrop: target.canDrop,
                     data: target.data,
+                    frameKey,
                 },
+                frameKey,
             });
         }
     }
     /**
-     * Finds a drop target by ID in the tree structure.
-     * @param id - The ID to search for
-     * @param tree - The tree to search in
-     * @returns The drop item or null if not found
+     * Resolves the frame space an element (or any of its ancestors) belongs to
+     * by walking the parent chain — O(depth).
      * @private
      */
-    findDropTarget(id, tree) {
-        if (!tree) {
-            return null;
-        }
-        if (tree.has(id)) {
-            return tree.get(id) || null;
-        }
-        for (const [, value] of tree) {
-            if (value.children) {
-                const target = this.findDropTarget(id, value.children);
-                if (target) {
-                    return target;
-                }
-            }
+    findFrameKeyFor(id) {
+        let current = id;
+        while (current != null) {
+            const node = this.dropNodesById.get(current);
+            if (!node)
+                return null;
+            if (node.frameKey)
+                return node.frameKey;
+            current = this.dropParentById.get(current);
         }
         return null;
     }
@@ -366,14 +632,23 @@ export class Monitor {
      * @returns The drop target or null if not found
      * @private
      */
-    findDropTargetByData(dataQuery, tree) {
+    findDropTargetByData(dataQuery, tree, frameKey, requiredFrameKey) {
         if (!tree) {
             return null;
         }
         let index = 0;
         for (const [id, target] of tree) {
             index++;
-            if (target.data && this.partialMatch(target.data, dataQuery)) {
+            const targetFrameKey = target.frameKey ?? frameKey ?? null;
+            // Prune subtrees belonging to other frames when a frame is required.
+            if (requiredFrameKey &&
+                targetFrameKey &&
+                targetFrameKey !== requiredFrameKey) {
+                continue;
+            }
+            if (target.data &&
+                this.partialMatch(target.data, dataQuery) &&
+                (!requiredFrameKey || targetFrameKey === requiredFrameKey)) {
                 return {
                     id,
                     layout: target.layout,
@@ -381,10 +656,11 @@ export class Monitor {
                     canDrop: target.canDrop,
                     children: target.children,
                     data: target.data,
+                    frameKey: targetFrameKey,
                 };
             }
             if (target.children) {
-                const childResult = this.findDropTargetByData(dataQuery, target.children);
+                const childResult = this.findDropTargetByData(dataQuery, target.children, targetFrameKey, requiredFrameKey);
                 if (childResult) {
                     return childResult;
                 }
@@ -427,30 +703,6 @@ export class Monitor {
         }
         return true;
     }
-    /**
-     * Finds the parent of a drop target by ID.
-     * @param id - The ID of the child drop target
-     * @param tree - The tree to search in
-     * @returns The parent drop item or null if not found
-     * @private
-     */
-    findDropTargetParent(id, tree) {
-        if (!tree) {
-            return null;
-        }
-        for (const [, value] of tree) {
-            if (value.children && value.children.has(id)) {
-                return value;
-            }
-            else {
-                const parent = this.findDropTargetParent(id, value.children);
-                if (parent) {
-                    return parent;
-                }
-            }
-        }
-        return null;
-    }
     /**
      * Gets all drop targets that contain the given coordinates.
      * @param dropCoords - The coordinates to check
@@ -458,7 +710,7 @@ export class Monitor {
      * @returns Array of drop targets or null if none found
      * @private
      */
-    getDropTargets(dropCoords, tree) {
+    getDropTargets(dropCoords, tree, frameKey, excludeId) {
         const targets = [];
         if (!tree) {
             return null;
@@ -466,10 +718,21 @@ export class Monitor {
         let index = 0;
         for (const [id, target] of tree) {
             index++;
-            if (target.layout.x <= dropCoords.x &&
-                target.layout.y <= dropCoords.y &&
-                target.layout.x + target.layout.width >= dropCoords.x &&
-                target.layout.y + target.layout.height >= dropCoords.y) {
+            // Skip the excluded subtree entirely (a moved element can't be its
+            // own drop target, nor can any of its descendants).
+            if (excludeId != null && id === excludeId) {
+                continue;
+            }
+            // Entering a frame-rooted subtree: convert the pointer into that
+            // frame's local space once; all descendant layouts share it.
+            const targetFrameKey = target.frameKey ?? frameKey ?? null;
+            const coords = target.frameKey
+                ? this.toFrameLocal(dropCoords, target.frameKey)
+                : dropCoords;
+            if (target.layout.x <= coords.x &&
+                target.layout.y <= coords.y &&
+                target.layout.x + target.layout.width >= coords.x &&
+                target.layout.y + target.layout.height >= coords.y) {
                 targets.push({
                     id,
                     layout: target.layout,
@@ -477,9 +740,11 @@ export class Monitor {
                     canDrop: target.canDrop,
                     children: target.children,
                     data: target.data,
+                    frameKey: targetFrameKey,
+                    hitCoords: coords,
                 });
             }
-            const childTargets = this.getDropTargets(dropCoords, target.children);
+            const childTargets = this.getDropTargets(coords, target.children, targetFrameKey, excludeId);
             if (childTargets) {
                 targets.push(...childTargets);
             }
@@ -502,12 +767,14 @@ export class Monitor {
         if (!lastTarget) {
             return null;
         }
-        if (lastTarget.layout.y + this.padding > dragCoords.y ||
+        // Compare in the target's own coordinate space (frame-local inside
+        // frames); `hitCoords` was attached during hit testing.
+        const coords = lastTarget.hitCoords ?? dragCoords;
+        if (lastTarget.layout.y + this.padding > coords.y ||
             lastTarget.layout.y + lastTarget.layout.height - this.padding <
-                dragCoords.y ||
-            lastTarget.layout.x + this.padding > dragCoords.x ||
-            lastTarget.layout.x + lastTarget.layout.width - this.padding <
-                dragCoords.x) {
+                coords.y ||
+            lastTarget.layout.x + this.padding > coords.x ||
+            lastTarget.layout.x + lastTarget.layout.width - this.padding < coords.x) {
             return sortedTargets[sortedTargets.length - 2] || lastTarget;
         }
         return lastTarget;