@spectral_labs/ui 1.5.3 → 1.6.1

package/dist/internal/drag-drop/__tests__/drag-session.test.svelte.js

@@ -1,4 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { EscapeLayerState, resetEscapeLayerStack } from '../../escape-layer/index.js';
 import { dragSession } from '../drag-session.svelte.js';
 function createSourceConfig(id, overrides = {}) {
     return {
@@ -49,6 +50,28 @@ function ensurePointerEventPolyfill() {
         };
     }
 }
+function pointerEvent(type, x, y) {
+    return new PointerEvent(type, {
+        clientX: x,
+        clientY: y,
+        pointerId: 1,
+        pointerType: 'mouse',
+        bubbles: true,
+    });
+}
+function startPointerDrag(id) {
+    const config = createSourceConfig(id);
+    const el = createElement();
+    el.setPointerCapture = vi.fn();
+    el.releasePointerCapture = vi.fn();
+    dragSession.registerSource(config, el);
+    dragSession.beginPointerDrag(id, pointerEvent('pointerdown', 100, 100));
+    el.dispatchEvent(pointerEvent('pointermove', 110, 110)); // crosses the 5px threshold
+    return { config, el };
+}
+function pressEscape() {
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+}
 describe('dragSession', () => {
     beforeEach(() => {
         dragSession._resetForTests();
@@ -544,4 +567,237 @@ describe('dragSession', () => {
             tgtEl.remove();
         });
     });
+    describe('escape cancels a POINTER drag (PR #138)', () => {
+        beforeEach(() => {
+            // The session is a module singleton: a test that left one active would
+            // make `beginPointerDrag` refuse re-entry here, and the keystroke would
+            // then be handled by the INHERITED session — a green that proves nothing.
+            dragSession.cancel();
+            ensurePointerEventPolyfill();
+        });
+        it('cancels the session, releases the capture and drops no item', () => {
+            const { config, el } = startPointerDrag('esc-src');
+            const target = createTargetConfig('esc-tgt');
+            const tgtEl = createElement();
+            dragSession.registerTarget(target, tgtEl);
+            expect(dragSession.isDragging).toBe(true);
+            pressEscape();
+            expect(dragSession.isDragging).toBe(false);
+            expect(config.onDragEnd).toHaveBeenCalledWith('cancel');
+            expect(target.onDrop).not.toHaveBeenCalled();
+            expect(el.releasePointerCapture).toHaveBeenCalled();
+            expect(document.documentElement.classList.contains('sp-drag-active')).toBe(false);
+            expect(document.querySelector('.sp-drag-ghost')).toBeNull();
+            el.remove();
+            tgtEl.remove();
+        });
+        it('does not resurrect the drag on the next pointermove', () => {
+            const { config, el } = startPointerDrag('esc-resurrect');
+            pressEscape();
+            expect(dragSession.isDragging).toBe(false);
+            // The listeners must be gone: _startX/_startY survive, so a surviving
+            // onMove would re-activate the session past the 5px threshold.
+            el.dispatchEvent(pointerEvent('pointermove', 300, 300));
+            expect(dragSession.isDragging).toBe(false);
+            expect(dragSession.sourceId).toBeNull();
+            expect(config.onDragStart).toHaveBeenCalledTimes(1);
+            el.remove();
+        });
+        it('leaves Escape to the application while the claim is still PENDING', () => {
+            const config = createSourceConfig('esc-pending');
+            const el = createElement();
+            el.setPointerCapture = vi.fn();
+            el.releasePointerCapture = vi.fn();
+            dragSession.registerSource(config, el);
+            dragSession.beginPointerDrag('esc-pending', pointerEvent('pointerdown', 100, 100));
+            // no pointermove: under the threshold, the session is not dragging
+            const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true });
+            document.dispatchEvent(event);
+            expect(event.defaultPrevented).toBe(false); // the keystroke belongs to the app
+            expect(config.onDragEnd).not.toHaveBeenCalled();
+            dragSession.cancel();
+            el.remove();
+        });
+    });
+    describe('escape priority over an already-mounted escape layer (see internal/escape-layer)', () => {
+        beforeEach(() => {
+            dragSession.cancel();
+            resetEscapeLayerStack();
+            ensurePointerEventPolyfill();
+        });
+        afterEach(() => {
+            resetEscapeLayerStack();
+        });
+        /**
+         * Mounts a layer BEFORE the drag starts — the order that exposes the bug.
+         * `EscapeLayer` registers its global handler on the first mount; a drag
+         * listener added later on the SAME node in the SAME phase runs after it,
+         * so `preventDefault()` arrives once the dialog has already closed.
+         */
+        function mountLayerFirst() {
+            const onEscapeKeydown = vi.fn();
+            const layer = new EscapeLayerState({ enabled: true, onEscapeKeydown });
+            layer.mount();
+            return { layer, onEscapeKeydown };
+        }
+        it('gives the first escape to the pointer drag and the second to the dialog', () => {
+            const { layer, onEscapeKeydown } = mountLayerFirst();
+            const { config, el } = startPointerDrag('esc-layer-pointer');
+            expect(dragSession.isDragging).toBe(true);
+            pressEscape();
+            expect(dragSession.isDragging).toBe(false);
+            expect(config.onDragEnd).toHaveBeenCalledWith('cancel');
+            expect(onEscapeKeydown).not.toHaveBeenCalled(); // the dialog must survive
+            pressEscape();
+            expect(onEscapeKeydown).toHaveBeenCalledTimes(1); // now it closes normally
+            layer.unmount();
+            el.remove();
+        });
+        it('gives the first escape to the keyboard drag and the second to the dialog', () => {
+            const { layer, onEscapeKeydown } = mountLayerFirst();
+            const config = createSourceConfig('esc-layer-keyboard');
+            const el = createElement();
+            dragSession.registerSource(config, el);
+            dragSession.beginKeyboardDrag('esc-layer-keyboard');
+            expect(dragSession.isDragging).toBe(true);
+            pressEscape();
+            expect(dragSession.isDragging).toBe(false);
+            expect(config.onDragEnd).toHaveBeenCalledWith('cancel');
+            expect(onEscapeKeydown).not.toHaveBeenCalled();
+            pressEscape();
+            expect(onEscapeKeydown).toHaveBeenCalledTimes(1);
+            layer.unmount();
+            el.remove();
+        });
+        it('keeps that priority when the layer mounts AFTER the drag has started', () => {
+            // The mirror order. It was already green by accident — the drag listener
+            // happened to be registered first. The point of the pair is that the
+            // outcome no longer depends on which one registered first.
+            const { config, el } = startPointerDrag('esc-layer-after');
+            const { layer, onEscapeKeydown } = mountLayerFirst();
+            expect(dragSession.isDragging).toBe(true);
+            pressEscape();
+            expect(dragSession.isDragging).toBe(false);
+            expect(config.onDragEnd).toHaveBeenCalledWith('cancel');
+            expect(onEscapeKeydown).not.toHaveBeenCalled();
+            pressEscape();
+            expect(onEscapeKeydown).toHaveBeenCalledTimes(1);
+            layer.unmount();
+            el.remove();
+        });
+        it('leaves the dialog closable immediately while the claim is still pending', () => {
+            const { layer, onEscapeKeydown } = mountLayerFirst();
+            const config = createSourceConfig('esc-layer-pending');
+            const el = createElement();
+            el.setPointerCapture = vi.fn();
+            el.releasePointerCapture = vi.fn();
+            dragSession.registerSource(config, el);
+            dragSession.beginPointerDrag('esc-layer-pending', pointerEvent('pointerdown', 100, 100));
+            // no pointermove: under the 5px threshold the session is only PENDING
+            pressEscape();
+            expect(onEscapeKeydown).toHaveBeenCalledTimes(1); // closing stays immediate
+            expect(config.onDragEnd).not.toHaveBeenCalled();
+            dragSession.cancel();
+            layer.unmount();
+            el.remove();
+        });
+    });
+    describe('pointer drop target is computed at release', () => {
+        beforeEach(() => {
+            dragSession.cancel();
+            ensurePointerEventPolyfill();
+        });
+        it('drops on the target under the pointerup when no animation frame has run', async () => {
+            const { config, el } = startPointerDrag('release-src');
+            const target = createTargetConfig('release-tgt');
+            const onPointerUpdate = vi.fn();
+            const tgtEl = createElement(); // rect 0,0 → 200,100
+            dragSession.registerTarget(target, tgtEl, onPointerUpdate);
+            // move then up inside the SAME frame: no requestAnimationFrame callback
+            // has run, so the throttled hit-test never saw either position.
+            el.dispatchEvent(pointerEvent('pointermove', 150, 70));
+            el.dispatchEvent(pointerEvent('pointerup', 150, 70));
+            expect(onPointerUpdate).toHaveBeenCalledWith(150, 70);
+            expect(target.onDrop).toHaveBeenCalledTimes(1);
+            // completeDrop awaits onDrop, so the end-of-drag callback lands one
+            // microtask later even when onDrop is synchronous.
+            await Promise.resolve();
+            expect(config.onDragEnd).toHaveBeenCalledWith('move');
+            el.remove();
+            tgtEl.remove();
+        });
+        it('cancels the pending frame so a stale position cannot land during an async drop', async () => {
+            const { el } = startPointerDrag('release-async-src');
+            let resolveDrop = null;
+            const onDrop = vi.fn(() => new Promise((resolve) => {
+                resolveDrop = resolve;
+            }));
+            const target = createTargetConfig('release-async-tgt', { onDrop });
+            const onPointerUpdate = vi.fn();
+            const tgtEl = createElement();
+            dragSession.registerTarget(target, tgtEl, onPointerUpdate);
+            // 50,70 is INSIDE the target, so a surviving frame would call
+            // onPointerUpdate again with those stale coordinates.
+            el.dispatchEvent(pointerEvent('pointermove', 50, 70));
+            el.dispatchEvent(pointerEvent('pointerup', 150, 70));
+            expect(onPointerUpdate).toHaveBeenCalledTimes(1);
+            expect(onPointerUpdate).toHaveBeenLastCalledWith(150, 70);
+            // completeDrop is still awaiting onDrop — the session is alive, which is
+            // exactly the window a surviving frame would fire in.
+            await new Promise((resolve) => setTimeout(resolve, 48));
+            expect(onPointerUpdate).toHaveBeenCalledTimes(1);
+            expect(onPointerUpdate).toHaveBeenLastCalledWith(150, 70);
+            resolveDrop();
+            el.remove();
+            tgtEl.remove();
+        });
+    });
+    describe('pointer hit-test honours acceptedTypes', () => {
+        beforeEach(() => {
+            dragSession.cancel();
+            ensurePointerEventPolyfill();
+        });
+        it('never makes a target whose accepted types miss the drag the current one', async () => {
+            const { el } = startPointerDrag('types-src'); // carries 'test-type' + 'text/plain'
+            // Registered FIRST and covering the same rect: without the filter the
+            // hit-test stops here, because it breaks at the first rect containing
+            // the point.
+            const foreign = createTargetConfig('types-foreign', { acceptedTypes: ['other-type'] });
+            const foreignEl = createElement();
+            const foreignUpdate = vi.fn();
+            dragSession.registerTarget(foreign, foreignEl, foreignUpdate);
+            const own = createTargetConfig('types-own', { acceptedTypes: ['test-type'] });
+            const ownEl = createElement();
+            const ownUpdate = vi.fn();
+            dragSession.registerTarget(own, ownEl, ownUpdate);
+            el.dispatchEvent(pointerEvent('pointerup', 150, 70));
+            expect(foreignUpdate).not.toHaveBeenCalled();
+            expect(foreign.onDrop).not.toHaveBeenCalled();
+            expect(ownUpdate).toHaveBeenCalledWith(150, 70);
+            expect(own.onDrop).toHaveBeenCalledTimes(1);
+            await Promise.resolve();
+            el.remove();
+            foreignEl.remove();
+            ownEl.remove();
+        });
+        it('still accepts everything when acceptedTypes is absent or empty', async () => {
+            // Non-regression guard for the catch-all: green before and after the
+            // filter, and it must never turn red.
+            const { el } = startPointerDrag('types-catchall-src');
+            const catchAll = createTargetConfig('types-catchall');
+            const catchAllEl = createElement();
+            const catchAllUpdate = vi.fn();
+            dragSession.registerTarget(catchAll, catchAllEl, catchAllUpdate);
+            const empty = createTargetConfig('types-empty', { acceptedTypes: [] });
+            const emptyEl = createElement();
+            dragSession.registerTarget(empty, emptyEl, vi.fn());
+            el.dispatchEvent(pointerEvent('pointerup', 150, 70));
+            expect(catchAllUpdate).toHaveBeenCalledWith(150, 70);
+            expect(catchAll.onDrop).toHaveBeenCalledTimes(1);
+            await Promise.resolve();
+            el.remove();
+            catchAllEl.remove();
+            emptyEl.remove();
+        });
+    });
 });

package/dist/internal/drag-drop/drag-session.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drag-session.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/drag-drop/drag-session.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EACV,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAGhB,UAAU,EACV,gBAAgB,EAEjB,MAAM,YAAY,CAAA;AAOnB,UAAU,gBAAgB;IACxB,MAAM,EAAE,gBAAgB,CAAA;IACxB,OAAO,EAAE,WAAW,CAAA;CACrB;AAED,UAAU,gBAAgB;IACxB,MAAM,EAAE,gBAAgB,CAAA;IACxB,OAAO,EAAE,WAAW,CAAA;IACpB,+EAA+E;IAC/E,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD;AA4QD,eAAO,MAAM,WAAW;;;;;;;;;;;2BAmCC,gBAAgB,WAAW,WAAW,GAAG,MAAM,IAAI;2BAQhE,gBAAgB,WACf,WAAW,oBACF,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,GAC/C,MAAM,IAAI;kBASC,MAAM,IAAI,GAAG,MAAM,IAAI;+BASV,MAAM,KAAK,YAAY,GAAG,IAAI;gCA4G7B,MAAM,GAAG,IAAI;IAezC,gDAAgD;uBAC7B,IAAI;IAYvB,0DAA0D;uBACvC,IAAI;IAYvB,mFAAmF;0BAC7D,UAAU,GAAG,IAAI;YAQ/B,OAAO,CAAC,IAAI,CAAC;cAIX,IAAI;IAMd,uDAAuD;sCACrB,MAAM,QAAQ,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI;IAKlE,+FAA+F;iCAClE,MAAM,GAAG,OAAO;IAI7C,+FAA+F;6CACtD,MAAM,GAAG,OAAO;IAIzD,mCAAmC;kBACrB,MAAM,GAAG,gBAAgB,GAAG,SAAS;IAInD,mCAAmC;kBACrB,MAAM,GAAG,gBAAgB,GAAG,SAAS;IAInD,gBAAgB;sBACE,IAAI;CAMvB,CAAA"}
+{"version":3,"file":"drag-session.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/drag-drop/drag-session.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EACV,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAGhB,UAAU,EACV,gBAAgB,EAEjB,MAAM,YAAY,CAAA;AAOnB,UAAU,gBAAgB;IACxB,MAAM,EAAE,gBAAgB,CAAA;IACxB,OAAO,EAAE,WAAW,CAAA;CACrB;AAED,UAAU,gBAAgB;IACxB,MAAM,EAAE,gBAAgB,CAAA;IACxB,OAAO,EAAE,WAAW,CAAA;IACpB,+EAA+E;IAC/E,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD;AAsRD,eAAO,MAAM,WAAW;;;;;;;;;;;2BAmCC,gBAAgB,WAAW,WAAW,GAAG,MAAM,IAAI;2BAQhE,gBAAgB,WACf,WAAW,oBACF,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,GAC/C,MAAM,IAAI;kBASC,MAAM,IAAI,GAAG,MAAM,IAAI;+BASV,MAAM,KAAK,YAAY,GAAG,IAAI;gCAgK7B,MAAM,GAAG,IAAI;IAezC,gDAAgD;uBAC7B,IAAI;IAYvB,0DAA0D;uBACvC,IAAI;IAYvB,mFAAmF;0BAC7D,UAAU,GAAG,IAAI;YAQ/B,OAAO,CAAC,IAAI,CAAC;cAIX,IAAI;IAMd,uDAAuD;sCACrB,MAAM,QAAQ,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI;IAKlE,+FAA+F;iCAClE,MAAM,GAAG,OAAO;IAI7C,+FAA+F;6CACtD,MAAM,GAAG,OAAO;IAIzD,mCAAmC;kBACrB,MAAM,GAAG,gBAAgB,GAAG,SAAS;IAInD,mCAAmC;kBACrB,MAAM,GAAG,gBAAgB,GAAG,SAAS;IAInD,gBAAgB;sBACE,IAAI;CAMvB,CAAA"}

package/dist/internal/drag-drop/drag-session.svelte.js

@@ -7,7 +7,7 @@
  * Inspired by React Aria's DragManager — adapted for Svelte 5 runes.
  */
 import { AnnouncerState } from '../announcer/index.js';
-import { isBrowser } from '../helpers/index.js';
+import { isBrowser, kbd } from '../helpers/index.js';
 import { startKeyboardDnD, stopKeyboardDnD } from './keyboard-dnd.svelte.js';
 // eslint-disable-next-line svelte/prefer-svelte-reactivity -- module-level registry, not reactive state
 const registeredSources = new Map();
@@ -235,6 +235,16 @@ let _startX = 0;
 let _startY = 0;
 let _dragThresholdMet = false;
 let _pointerUpdateScheduled = false;
+/** Id of the throttling frame, so a release can drop it before it lands. */
+let _pointerUpdateRafId = null;
+/**
+ * Tears down the listeners a pointer drag installed — including the Escape
+ * listener on `window`, which would otherwise outlive its session: a drag
+ * ended by anything other than up/cancel/Escape (an external `cancel()`, a
+ * pagehide) never runs the closure's own cleanup, and the stale listener then
+ * answers the NEXT session's keystroke with the previous session's element.
+ */
+let _pointerCleanup = null;
 let _pendingPointerX = 0;
 let _pendingPointerY = 0;
 const DRAG_THRESHOLD = 5;
@@ -320,14 +330,26 @@ export const dragSession = {
         // Guard the pending claim against page navigation (see onPageHide)
         startPageHideListener();
         const el = source.element;
-        el.setPointerCapture(e.pointerId);
+        const pointerId = e.pointerId;
+        el.setPointerCapture(pointerId);
+        function releaseCapture(id) {
+            try {
+                el.releasePointerCapture(id);
+            }
+            catch {
+                /* element may be disconnected */
+            }
+        }
         function cleanup() {
+            _pointerCleanup = null;
             // eslint-disable-next-line ts/no-use-before-define -- hoisted event handler references
             el.removeEventListener('pointermove', onMove);
             // eslint-disable-next-line ts/no-use-before-define -- hoisted event handler references
             el.removeEventListener('pointerup', onUp);
             // eslint-disable-next-line ts/no-use-before-define -- hoisted event handler references
             el.removeEventListener('pointercancel', onCancel);
+            // eslint-disable-next-line ts/no-use-before-define -- hoisted event handler references
+            window.removeEventListener('keydown', onEscape, true);
             clearLongPress();
         }
         function clearLongPress() {
@@ -377,14 +399,15 @@ export const dragSession = {
             }
         };
         const onUp = (ev) => {
-            try {
-                el.releasePointerCapture(ev.pointerId);
-            }
-            catch {
-                /* element may be disconnected */
-            }
+            releaseCapture(ev.pointerId);
             cleanup();
             if (_isDragging) {
+                // The target is whatever sits under the RELEASE point, not whatever
+                // the last frame that happened to run left behind. A fast gesture
+                // (move then up inside one frame) reached `completeDrop` with
+                // `_currentTargetId === null` and was cancelled in silence.
+                cancelScheduledPointerUpdate();
+                updatePointerPosition(ev.clientX, ev.clientY);
                 completeDrop();
             }
             else {
@@ -393,12 +416,50 @@ export const dragSession = {
             }
         };
         const onCancel = () => {
+            releaseCapture(pointerId);
+            cleanup();
+            cancelDrag();
+        };
+        /**
+         * Escape cancels an ACTIVE pointer drag (PR #138: the e2e pin has documented
+         * this gap since 2026-04-13). Three rules make it correct:
+         *
+         * 1. the listeners are torn down from THIS closure — `_startX`/`_startY`
+         *    survive a cancel, so a surviving `onMove` would re-activate the
+         *    session at the next 5px move;
+         * 2. below the movement threshold the session is only PENDING: the
+         *    keystroke belongs to the application (a dialog, a menu), and we
+         *    neither consume nor prevent it;
+         * 3. the listener sits on `window`, not on `document`. `EscapeLayer`
+         *    captures on `document`, and a drag that starts INSIDE an open dialog
+         *    registers after it: on the same node in the same phase the layer
+         *    would run first and close the dialog before `preventDefault()` could
+         *    say anything. `window` in capture is strictly above EVERY
+         *    `document`-level handler, `EscapeLayer` included, so mount order
+         *    stops deciding, and `stopImmediatePropagation()` keeps the keystroke
+         *    from travelling on. The next Escape finds no drag and closes the
+         *    dialog normally.
+         *
+         * The tier is above `document`, not above everything: a handler already on
+         * `window` in capture when the drag starts still runs first, since this one
+         * registers last. Inside this package that cannot happen — the two
+         * window-capture handlers, here and in `keyboard-dnd`, are mutually
+         * exclusive because a session refuses re-entrance while one is live.
+         */
+        const onEscape = (ev) => {
+            if (ev.key !== kbd.ESCAPE || !_isDragging)
+                return;
+            ev.preventDefault();
+            ev.stopImmediatePropagation();
+            releaseCapture(pointerId);
             cleanup();
             cancelDrag();
         };
         el.addEventListener('pointermove', onMove);
         el.addEventListener('pointerup', onUp);
         el.addEventListener('pointercancel', onCancel);
+        window.addEventListener('keydown', onEscape, true);
+        _pointerCleanup = cleanup;
     },
     // ── Start drag (keyboard) ───────────────────────────────────────────
     beginKeyboardDrag(sourceId) {
@@ -544,20 +605,57 @@ function schedulePointerUpdate(x, y) {
     moveGhost(x, y);
     if (!_pointerUpdateScheduled) {
         _pointerUpdateScheduled = true;
-        requestAnimationFrame(() => {
+        _pointerUpdateRafId = requestAnimationFrame(() => {
             _pointerUpdateScheduled = false;
+            _pointerUpdateRafId = null;
             if (_isDragging) {
                 updatePointerPosition(_pendingPointerX, _pendingPointerY);
             }
         });
     }
 }
+/**
+ * Drops the throttling frame still in flight. Called when the session stops
+ * taking positions from it — at the release, and at every reset. `onDrop` may
+ * be async: while `completeDrop` awaits it the session is still dragging, so a
+ * surviving frame would push a STALE position over the one just released.
+ */
+function cancelScheduledPointerUpdate() {
+    if (_pointerUpdateRafId !== null) {
+        cancelAnimationFrame(_pointerUpdateRafId);
+        _pointerUpdateRafId = null;
+    }
+    _pointerUpdateScheduled = false;
+}
+/**
+ * Whether a target accepts what is being dragged. Answers for both the pointer
+ * hit-test and keyboard target navigation.
+ *
+ * No `acceptedTypes`, or an empty one, passes everything AT THIS LEVEL. That
+ * permissive branch is narrower than it looks: `SortableList` and `GridList`
+ * always hand down a non-empty list (their own `dragType` by default), so it
+ * is reached only when a consumer passes an empty array on purpose — and such
+ * a target is still refused at the drop by the component's own
+ * `getDropOperation`, which is pre-existing and unchanged here.
+ */
+function targetAcceptsDragTypes(target) {
+    const accepted = target.config.acceptedTypes;
+    if (!accepted || accepted.length === 0)
+        return true;
+    return accepted.some((t) => _types.has(t));
+}
 function updatePointerPosition(x, y) {
     // Hit-test all registered targets to find the one under the pointer
     let found = false;
     for (const [id, target] of registeredTargets) {
         if (target.config.isDisabled)
             continue;
+        // A target that does not accept these types is not under the pointer for
+        // this drag: skipping it here is what keeps a foreign list from turning
+        // `drop-active` and drawing an indicator. Without it the loop breaks on
+        // the first rect containing the point, whatever that target accepts.
+        if (!targetAcceptsDragTypes(target))
+            continue;
         const rect = target.element.getBoundingClientRect();
         if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
             if (_currentTargetId !== id) {
@@ -600,11 +698,8 @@ function getValidTargets() {
         if (target.config.isDisabled)
             continue;
         // Check if the target accepts the drag types
-        if (target.config.acceptedTypes && target.config.acceptedTypes.length > 0) {
-            const accepts = target.config.acceptedTypes.some((t) => _types.has(t));
-            if (!accepts)
-                continue;
-        }
+        if (!targetAcceptsDragTypes(target))
+            continue;
         // Group filtering: if target has a group, only accept sources from the same group
         // (or sources whose dragType matches the target's acceptedTypes — already handled above)
         if (target.config.group && _sourceCollectionId) {
@@ -702,6 +797,11 @@ function restoreFocus(targetEl, sourceEl) {
     }, 150);
 }
 function resetSession() {
+    // A pointer session may end without its own handlers running (external
+    // `cancel()`, pagehide): tear its listeners down here too, or the Escape
+    // listener survives on `window` and answers the next session.
+    _pointerCleanup?.();
+    cancelScheduledPointerUpdate();
     stopKeyboardDnD();
     restoreHiddenContent();
     stopObservingTargets();

package/dist/internal/drag-drop/keyboard-dnd.svelte.d.ts

@@ -10,6 +10,14 @@
 /**
  * Start listening for keyboard DnD events.
  * Call when a keyboard drag begins.
+ *
+ * The handler sits on `window`, not on `document`: `EscapeLayer` captures on
+ * `document`, and a keyboard drag started INSIDE an open dialog registers
+ * after it — on the same node in the same phase the layer would answer the
+ * keystroke first and close the dialog. `window` in capture is strictly above
+ * every `document`-level handler, so mount order stops deciding. It is not
+ * above everything: a handler already on `window` in capture when the drag
+ * starts still runs first, since this one registers last.
  */
 export declare function startKeyboardDnD(): void;
 /**

package/dist/internal/drag-drop/keyboard-dnd.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-dnd.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/drag-drop/keyboard-dnd.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAOH;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAIvC;AAED;;;GAGG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAItC"}
+{"version":3,"file":"keyboard-dnd.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/drag-drop/keyboard-dnd.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAOH;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAIvC;AAED;;;GAGG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAItC"}

package/dist/internal/drag-drop/keyboard-dnd.svelte.js

@@ -13,12 +13,20 @@ let isListening = false;
 /**
  * Start listening for keyboard DnD events.
  * Call when a keyboard drag begins.
+ *
+ * The handler sits on `window`, not on `document`: `EscapeLayer` captures on
+ * `document`, and a keyboard drag started INSIDE an open dialog registers
+ * after it — on the same node in the same phase the layer would answer the
+ * keystroke first and close the dialog. `window` in capture is strictly above
+ * every `document`-level handler, so mount order stops deciding. It is not
+ * above everything: a handler already on `window` in capture when the drag
+ * starts still runs first, since this one registers last.
  */
 export function startKeyboardDnD() {
     if (!isBrowser || isListening)
         return;
     isListening = true;
-    document.addEventListener('keydown', onKeyDown, true);
+    window.addEventListener('keydown', onKeyDown, true);
 }
 /**
  * Stop listening for keyboard DnD events.
@@ -28,7 +36,7 @@ export function stopKeyboardDnD() {
     if (!isListening)
         return;
     isListening = false;
-    document.removeEventListener('keydown', onKeyDown, true);
+    window.removeEventListener('keydown', onKeyDown, true);
 }
 function onKeyDown(e) {
     if (!dragSession.isDragging) {
@@ -56,7 +64,10 @@ function onKeyDown(e) {
         }
         case kbd.ESCAPE: {
             e.preventDefault();
-            e.stopPropagation();
+            // Immediate: the drag owns this keystroke entirely. Without it the
+            // containing dialog would close on the very Escape that cancelled the
+            // drag; the NEXT Escape closes it, which is what the user expects.
+            e.stopImmediatePropagation();
             dragSession.cancel();
             stopKeyboardDnD();
             break;

package/dist/internal/escape-layer/escape-layer.svelte.d.ts

@@ -3,6 +3,18 @@
  *
  * Multiple escape layers can be active simultaneously (e.g. nested dialogs).
  * Only the topmost layer with behavior 'close' handles the keydown.
+ *
+ * TIERS. This stack listens on `document` in the CAPTURE phase (see `mount`).
+ * Exactly one tier sits above it: while a drag session is ACTIVE,
+ * `internal/drag-drop` listens on `window` in capture and calls
+ * `stopImmediatePropagation()`, so no layer here is offered that keystroke —
+ * the drag is cancelled, and the NEXT Escape reaches this stack normally.
+ * Below the drag's 5px pointer threshold the session is only PENDING and does
+ * not touch the event, so dismissing a surface stays immediately available.
+ *
+ * "Only the topmost layer handles the keydown" therefore reads: among the
+ * layers that are offered the keystroke at all. A dialog that will not close
+ * on Escape is very often a drag that has not ended.
  */
 import type { EscapeKeydownBehavior, EscapeLayerProps } from './types.js';
 export declare class EscapeLayerState {

package/dist/internal/escape-layer/escape-layer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"escape-layer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/escape-layer/escape-layer.svelte.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AA4CzE,qBAAa,gBAAgB;IAC3B,KAAK,EAAE,gBAAgB,CAAA;gBAEX,KAAK,EAAE,gBAAgB;IAInC,KAAK,IAAI,IAAI;IAYb,OAAO,IAAI,IAAI;IAcf;;;;OAIG;IACH,cAAc,CAAC,QAAQ,EAAE,qBAAqB,GAAG,IAAI;CAGtD;AAED,gDAAgD;AAChD,wBAAgB,qBAAqB,IAAI,IAAI,CAK5C"}
+{"version":3,"file":"escape-layer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/escape-layer/escape-layer.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AA4CzE,qBAAa,gBAAgB;IAC3B,KAAK,EAAE,gBAAgB,CAAA;gBAEX,KAAK,EAAE,gBAAgB;IAInC,KAAK,IAAI,IAAI;IAmBb,OAAO,IAAI,IAAI;IAcf;;;;OAIG;IACH,cAAc,CAAC,QAAQ,EAAE,qBAAqB,GAAG,IAAI;CAGtD;AAED,gDAAgD;AAChD,wBAAgB,qBAAqB,IAAI,IAAI,CAK5C"}

package/dist/internal/escape-layer/escape-layer.svelte.js

@@ -3,6 +3,18 @@
  *
  * Multiple escape layers can be active simultaneously (e.g. nested dialogs).
  * Only the topmost layer with behavior 'close' handles the keydown.
+ *
+ * TIERS. This stack listens on `document` in the CAPTURE phase (see `mount`).
+ * Exactly one tier sits above it: while a drag session is ACTIVE,
+ * `internal/drag-drop` listens on `window` in capture and calls
+ * `stopImmediatePropagation()`, so no layer here is offered that keystroke —
+ * the drag is cancelled, and the NEXT Escape reaches this stack normally.
+ * Below the drag's 5px pointer threshold the session is only PENDING and does
+ * not touch the event, so dismissing a surface stays immediately available.
+ *
+ * "Only the topmost layer handles the keydown" therefore reads: among the
+ * layers that are offered the keystroke at all. A dialog that will not close
+ * on Escape is very often a drag that has not ended.
  */
 import { isBrowser, kbd } from '../helpers/index.js';
 const layerStack = [];
@@ -49,7 +61,14 @@ export class EscapeLayerState {
             return;
         if (!this.props.enabled)
             return;
-        // Add global listener if this is the first layer
+        // Add global listener if this is the first layer.
+        //
+        // `document` + capture is contractual, not incidental: `internal/drag-drop`
+        // deliberately sits one tier above, on `window` in capture, so an active
+        // drag always answers Escape before any layer whatever the mount order.
+        // Hoisting this listener to `window` would put the two back on the same
+        // node in the same phase, where registration order decides — which is the
+        // bug that put the drag handler on `window` in the first place.
         if (layerStack.length === 0) {
             document.addEventListener('keydown', handleGlobalKeydown, true);
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spectral_labs/ui",
   "type": "module",
-  "version": "1.5.3",
+  "version": "1.6.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"