@mk-drag-and-drop/dom 0.1.0 → 0.2.0

package/README.md

@@ -23,7 +23,7 @@ import {
 ```
 
 The package also exports `@mk-drag-and-drop/dom/integration` for adapter authors
-who need lower-level DOM behavior factories and a runtime handle. Deep imports
+who need lower-level DOM behavior factories and a runtime scope. Deep imports
 into `src` or `dist` files are not part of the public package exports.
 
 ## Public Root API
@@ -40,6 +40,7 @@ The root export includes:
   `DropEvent`, `DragSource`, `DragEndResult`, `DragLifecycleCallbacks`,
   `DragLifecycleHelpers`
 - placement types: `SortableDropPlacement`, `RemeasureDropTargetsInput`
+- overlay types: `OverlayReleaseMode`
 - targeting helpers and types: `pointerToCenter`, `centerToCenter`,
   `pointerToRectDistance`, `getDistanceToRect`,
   `maxPointerDistanceToRect`, `maxOverlayCenterDistanceToRect`, `DropTarget`,
@@ -59,10 +60,11 @@ pipeline internals are not public root APIs.
 
 `@mk-drag-and-drop/dom/integration` exports:
 
-- `createDragRuntimeHandle`
-- `DragRuntimeHandle`, `DragRuntimeHandleOptions`,
-  `DragRuntimeHandleConfigureInput`
-- `DragState`, `DragOverlayPhase`, `DragOverlayRenderState`
+- `createDragRuntimeScope`
+- `DragRuntimeScope`, `DragRuntimeScopeOptions`,
+  `DragRuntimeScopeConfigureInput`
+- `DragState`, `DragOverlayPhase`, `DragOverlayRenderState`,
+  `OverlayReleaseMode`
 - `DragRuntimeSubscription`
 - `createDomDraggable`, `createDomDroppable`, `createDomDropContainer`,
   `createDomSortable`
@@ -74,15 +76,15 @@ ordinary DOM usage, prefer the root controller and binding helpers.
 
 ## Controller
 
-`createDragController(options?)` creates the public DOM controller used by the
-root binding helpers. Controller options include:
+`createDragController(options?)` creates the public DOM drag-and-drop scope used
+by the root binding helpers. Controller options include:
 
 - lifecycle callbacks: `onDragStart`, `onDragUpdate`, `onDragEnd`, `onDrop`
 - `announcements`: lifecycle callbacks that return polite live-region text
 - `dragOverlay(input)`: returns an overlay `HTMLElement` or `null`
 - `overlayRoot`: optional root for the DOM overlay wrapper
-- `keepOverlayOnDrop`: keeps the overlay in the `"released"` phase until
-  `finishOverlay` or the overlay input `finish` callback removes it
+- `overlayRelease`: `"auto"` removes overlays on drag end; `"manual"` keeps a
+  released overlay until its `removeOverlay` callback is called
 - `targetingAlgorithm` and `targetingConstraint`
 - `modifiers`
 - `pointerConfiguration`
@@ -90,23 +92,28 @@ root binding helpers. Controller options include:
 
 The returned controller has:
 
-- `update(options)`: replaces runtime/controller configuration
 - `remeasureDropTargets(input?)`: remeasures all targets, one target id, an
   array of target ids, or `{ group }`
-- `cleanup()`: ends active drag resources and removes the current overlay
-- `dispose()`: final teardown for the controller, runtime registrations,
-  subscriptions, overlays, live region, and registered dispose callbacks
-- `finishOverlay()`: removes a kept overlay
+
+The controller does not expose runtime teardown, disposal, update, or broad
+overlay removal methods. Runtime objects are ordinary JavaScript objects; DOM
+bindings and active drag resources are owned by their own lifetimes.
 
 ## Drag Overlays
 
 `dragOverlay(input)` is a creation hook. The controller calls it when overlay
-content is mounted for the `"dragging"` phase, and once more for the
-`"released"` phase when `keepOverlayOnDrop` is enabled. Pointer movement does
-not call `dragOverlay`.
+content is mounted for the `"dragging"` phase. By default, overlays are removed
+immediately when a drag ends. When `overlayRelease: "manual"` is configured, the
+controller calls `dragOverlay` once more for the `"released"` phase and passes
+`removeOverlay`; call that function when app-owned release animation is done.
+Pointer movement does not call `dragOverlay`.
+
+`removeOverlay` is only present for released overlays in manual release mode.
+Calling it more than once is safe. It removes the overlay host state only; it is
+not a controller or runtime teardown API.
 
 Apps own the returned overlay element and any dynamic content inside it. The
-package owns the overlay wrapper, movement, cleanup, and geometry measurement
+package owns the overlay wrapper, movement, release, and geometry measurement
 used by targeting and modifiers. The wrapper is positioned with `position:
 fixed`, source rect dimensions, `pointer-events: none`, and a transform derived
 from the current pointer delta.
@@ -200,14 +207,15 @@ Helpers:
 `onDrop` only runs for a valid successful drop. `onDragEnd` runs whenever a drag
 ends. `result: "dropped"` means a valid target was accepted and `onDrop` also
 runs. `result: "no-target"` means the user ended normally with no active target.
-`result: "invalid-target"` means an active target candidate was stale by finish
-time. `result: "canceled"` means the drag was canceled, such as Escape,
+`result: "invalid-target"` means an active target candidate was stale by drag
+end. `result: "canceled"` means the drag was canceled, such as Escape,
 pointercancel, or runtime cancellation.
 
 ## Bindings
 
 Root binding helpers attach behavior to DOM elements and return `void`.
-Registrations and listeners are tied to the controller lifetime.
+Registrations are WeakRef-backed and stale disconnected elements are pruned on
+drag-critical paths and explicit remeasurement.
 
 `createDraggable(input)` accepts:
 
@@ -303,7 +311,10 @@ distance helper that matches the intended behavior.
 
 Sortable placement is separate from targeting. The configured targeting
 algorithm alone chooses `activeDropTarget`; sortable only decides before/after
-preview placement relative to that active target.
+preview placement relative to that active target. For sortable groups, the
+registry may narrow measured candidates to relevant sortable item, neighbor, or
+container entries before the targeting algorithm runs; the algorithm still makes
+the active-target decision from that narrowed measured list.
 
 ## Modifiers
 
@@ -353,19 +364,33 @@ and container ids are identifiers that your app maps to its own model.
 Commit data in lifecycle callbacks, usually `onDrop`. Rerender or patch the DOM
 using your app's normal rendering path after the commit.
 
-## Cleanup Model
+## Lifetime Model
+
+Root binding helpers do not return per-item disposers. Runtime/controller
+objects are ordinary JavaScript objects and are released by garbage collection
+when unreachable.
 
-Root binding helpers do not return per-item disposers. Dispose the controller
-when tearing down the view or application area that owns those bindings.
+DOM registrations are a separate lifetime. Bindings keep WeakRef-backed records,
+and disconnected drop targets/sortables are pruned on drag-critical paths and
+explicit remeasurement. Active drag resources are owned by the input drag
+lifecycle and are released on drop, cancel, and pointercancel.
 
-Use:
+Pending pointer activation is also separate from an active drag. Activation
+delay timers, the pending activation state, and the latest pre-activation
+pointer position are canceled by pointerup, pointercancel, activation success,
+activation failure, or active drag reset.
 
-- `controller.cleanup()` to end active drag work and remove the active overlay
-- `controller.dispose()` for final teardown
+Active drag resources include pointer/window listeners, keyboard listeners, RAF
+pointer updates, text-selection suppression, active target/session state,
+overlay host state, active modifiers, and sortable preview/snapshot state. They
+are released by active drag lifecycle paths. Runtime disposal is not the cleanup
+mechanism for those resources.
 
-Disconnected drop targets are pruned on drag-critical paths, and dispose clears
-runtime registrations. React users usually rely on `DragProvider` and hooks for
-runtime and binding lifetime.
+Sortable registration state and sortable active preview state are separate.
+Registered sortable elements, ids, groups, containers, and options remain until
+they are unregistered or pruned as stale DOM. Per-drag sortable snapshots,
+dragged attributes, preview placement, and moved DOM are restored by active drag
+cleanup.
 
 ## Accessibility Scope
 
@@ -429,7 +454,6 @@ for (const columnId of ["todo", "done"]) {
 }
 
 document.body.append(item);
-window.addEventListener("pagehide", () => controller.dispose(), { once: true });
 ```
 
 ## Examples

package/dist/controller/controller-internals.d.ts

@@ -1,5 +1,5 @@
-import type { DragRuntimeHandle, InternalBindingCleanupRuntime } from "../runtime/drag-runtime-handle.js";
+import type { DragRuntimeScope, InternalStaleDomBindingRuntime } from "../runtime/drag-runtime-scope.js";
 import type { DragController } from "./create-drag-controller.js";
-export type DragControllerRuntimeHandle = DragRuntimeHandle & InternalBindingCleanupRuntime;
-export declare function setControllerRuntime(controller: DragController, runtime: DragRuntimeHandle): void;
-export declare function getControllerRuntime(controller: DragController): DragControllerRuntimeHandle;
+export type DragControllerRuntimeScope = DragRuntimeScope & InternalStaleDomBindingRuntime;
+export declare function setControllerRuntime(controller: DragController, runtime: DragRuntimeScope): void;
+export declare function getControllerRuntime(controller: DragController): DragControllerRuntimeScope;

package/dist/controller/create-drag-controller.d.ts

@@ -2,7 +2,7 @@ import type { KeyboardConfiguration, PointerConfiguration } from "../input/confi
 import type { DragModifierInput } from "../modifiers/types.js";
 import type { RemeasureDropTargetsInput } from "../runtime/drop-target-registry.js";
 import type { DragEndEvent, DragLifecycleCallbacks, DragStartEvent, DragUpdateEvent, DropEvent } from "../runtime/lifecycle.js";
-import type { DragOverlayPhase, DragState } from "../runtime/types.js";
+import type { DragState, OverlayReleaseMode } from "../runtime/types.js";
 import type { TargetingAlgorithm, TargetingConstraint } from "../targeting/types.js";
 export type DragControllerAnnouncements = {
     onDragStart?: (event: DragStartEvent) => string | null;
@@ -12,25 +12,25 @@ export type DragControllerAnnouncements = {
 };
 export type DragControllerOverlayInput = {
     dragState: DragState;
-    phase: DragOverlayPhase;
-    finish: () => void;
+    phase: "dragging";
+    removeOverlay?: never;
+} | {
+    dragState: DragState;
+    phase: "released";
+    removeOverlay: () => void;
 };
 export type DragControllerOptions = {
     announcements?: DragControllerAnnouncements;
     dragOverlay?: (input: DragControllerOverlayInput) => HTMLElement | null;
     keyboardConfiguration?: KeyboardConfiguration;
-    keepOverlayOnDrop?: boolean;
     modifiers?: readonly DragModifierInput[];
+    overlayRelease?: OverlayReleaseMode;
     overlayRoot?: HTMLElement;
     pointerConfiguration?: PointerConfiguration;
     targetingAlgorithm?: TargetingAlgorithm;
     targetingConstraint?: TargetingConstraint;
 } & DragLifecycleCallbacks;
 export type DragController = {
-    update: (options: DragControllerOptions) => void;
-    cleanup: () => void;
-    dispose: () => void;
-    finishOverlay: () => void;
     remeasureDropTargets: (input?: RemeasureDropTargetsInput) => void;
 };
 export declare function createDragController(options?: DragControllerOptions): DragController;

package/dist/controller/create-drag-controller.js

@@ -1,53 +1,24 @@
 import { rectToDragRect } from "../geometry/rects.js";
-import { createDragRuntimeHandle } from "../runtime/drag-runtime-handle.js";
+import { createDragRuntimeScope } from "../runtime/drag-runtime-scope.js";
 import { pointerToCenter } from "../targeting/algorithms.js";
 import { setControllerRuntime } from "./controller-internals.js";
 export function createDragController(options = {}) {
-    let currentOptions = options;
+    const currentOptions = options;
     let overlayWrapper = null;
     let overlayElement = null;
     let overlayResizeObserver = null;
     let liveRegion = null;
     let lastAnnouncement = null;
-    let disposed = false;
-    const runtime = createDragRuntimeHandle({
+    const runtime = createDragRuntimeScope({
         updateOverlayHost,
         targetingAlgorithm: options.targetingAlgorithm ?? pointerToCenter,
         targetingConstraint: options.targetingConstraint,
         hasDragOverlay: hasDragOverlay(options),
-        keepOverlayOnDrop: options.keepOverlayOnDrop ?? false,
+        overlayRelease: options.overlayRelease ?? "auto",
     });
     configureRuntime(options);
     syncLiveRegion();
     const controller = {
-        update: (nextOptions) => {
-            if (disposed) {
-                return;
-            }
-            currentOptions = nextOptions;
-            configureRuntime(nextOptions);
-            syncLiveRegion();
-            if (!hasDragOverlay(nextOptions)) {
-                removeOverlay();
-            }
-        },
-        cleanup: () => {
-            if (disposed) {
-                return;
-            }
-            runtime.cleanup();
-            removeOverlay();
-        },
-        dispose: () => {
-            if (disposed) {
-                return;
-            }
-            runtime.dispose();
-            removeOverlay();
-            removeLiveRegion();
-            disposed = true;
-        },
-        finishOverlay,
         remeasureDropTargets: (input) => {
             runtime.remeasureDropTargets(input);
         },
@@ -59,7 +30,7 @@ export function createDragController(options = {}) {
             targetingAlgorithm: nextOptions.targetingAlgorithm ?? pointerToCenter,
             targetingConstraint: nextOptions.targetingConstraint,
             hasDragOverlay: hasDragOverlay(nextOptions),
-            keepOverlayOnDrop: nextOptions.keepOverlayOnDrop ?? false,
+            overlayRelease: nextOptions.overlayRelease ?? "auto",
             lifecycleCallbacks: createLifecycleCallbacks(nextOptions),
             keyboardConfiguration: nextOptions.keyboardConfiguration,
             modifiers: nextOptions.modifiers,
@@ -89,10 +60,6 @@ export function createDragController(options = {}) {
         };
     }
     function updateOverlayHost(update) {
-        if (disposed) {
-            removeOverlay();
-            return;
-        }
         if (update.type === "mount" || update.type === "release") {
             mountOverlay(update.state);
             return;
@@ -101,20 +68,16 @@ export function createDragController(options = {}) {
             moveOverlay(update.dragState);
             return;
         }
-        removeOverlay();
+        clearOverlayHost();
     }
     function mountOverlay(overlayState) {
         if (!currentOptions.dragOverlay) {
-            removeOverlay();
+            clearOverlayHost();
             return;
         }
-        const nextOverlayElement = currentOptions.dragOverlay({
-            dragState: overlayState.dragState,
-            phase: overlayState.phase,
-            finish: finishOverlay,
-        });
+        const nextOverlayElement = currentOptions.dragOverlay(createOverlayInput(overlayState));
         if (!nextOverlayElement) {
-            removeOverlay();
+            clearOverlayHost();
             return;
         }
         const wrapper = getOverlayWrapper(currentOptions.overlayRoot ?? document.body);
@@ -174,19 +137,26 @@ export function createDragController(options = {}) {
         }
         return overlayWrapper;
     }
-    function finishOverlay() {
-        if (disposed) {
-            return;
-        }
-        removeOverlay();
-    }
-    function removeOverlay() {
+    function clearOverlayHost() {
         disconnectOverlayResizeObserver();
         overlayElement = null;
         runtime.setOverlayRect(null);
         overlayWrapper?.remove();
         overlayWrapper = null;
     }
+    function createOverlayInput(overlayState) {
+        if (overlayState.phase === "released") {
+            return {
+                dragState: overlayState.dragState,
+                phase: "released",
+                removeOverlay: clearOverlayHost,
+            };
+        }
+        return {
+            dragState: overlayState.dragState,
+            phase: "dragging",
+        };
+    }
     function syncLiveRegion() {
         if (currentOptions.announcements) {
             ensureLiveRegion();

package/dist/draggable/create-draggable-binding.js

@@ -25,7 +25,7 @@ export function createDraggable(input) {
         input.element.addEventListener("keydown", onKeyDown);
         keyDownAttached = true;
     }
-    const cleanup = () => {
+    const releaseDomBinding = () => {
         if (cleanedUp) {
             return;
         }
@@ -45,8 +45,8 @@ export function createDraggable(input) {
             }
         }
     };
-    runtime.registerBindingCleanup({
-        cleanup,
+    runtime.registerStaleDomBinding({
+        release: releaseDomBinding,
         isConnected: () => elementRef.deref()?.isConnected === true,
     });
 }

package/dist/droppable/create-drop-container-binding.js

@@ -11,7 +11,7 @@ export function createDropContainer(input) {
         getElement: () => elementRef.deref() ?? null,
     });
     let cleanedUp = false;
-    const cleanup = () => {
+    const releaseDomBinding = () => {
         if (cleanedUp) {
             return;
         }
@@ -19,10 +19,10 @@ export function createDropContainer(input) {
         if (!elementRef.deref()) {
             return;
         }
-        behavior.cleanup();
+        behavior.releaseRegistration();
     };
-    runtime.registerBindingCleanup({
-        cleanup,
+    runtime.registerStaleDomBinding({
+        release: releaseDomBinding,
         isConnected: () => elementRef.deref()?.isConnected === true,
     });
 }

package/dist/droppable/create-drop-container.d.ts

@@ -13,6 +13,6 @@ export type CreateDomDropContainerInput = {
 };
 export type DomDropContainerBehavior = {
     setElement: (element: HTMLElement | null) => void;
-    cleanup: () => void;
+    releaseRegistration: () => void;
 };
 export declare function createDomDropContainer(input: CreateDomDropContainerInput): DomDropContainerBehavior;

package/dist/droppable/create-drop-container.js

@@ -1,7 +1,7 @@
 export function createDomDropContainer(input) {
     let registeredElementRef = null;
     let registeredContainerId = null;
-    const cleanup = () => {
+    const releaseRegistration = () => {
         const registeredElement = registeredElementRef?.deref() ?? null;
         if (registeredContainerId !== null) {
             input.runtime.unregisterDropContainer(registeredContainerId, registeredElement ?? undefined);
@@ -25,12 +25,12 @@ export function createDomDropContainer(input) {
                 registeredContainerId === input.containerId) {
                 return;
             }
-            cleanup();
+            releaseRegistration();
             if (!element) {
                 return;
             }
             registerElement(element);
         },
-        cleanup,
+        releaseRegistration,
     };
 }

package/dist/droppable/create-droppable-binding.js

@@ -12,7 +12,7 @@ export function createDroppable(input) {
     });
     let cleanedUp = false;
     behavior.setElement(input.element);
-    const cleanup = () => {
+    const releaseDomBinding = () => {
         if (cleanedUp) {
             return;
         }
@@ -20,10 +20,10 @@ export function createDroppable(input) {
         if (!elementRef.deref()) {
             return;
         }
-        behavior.cleanup();
+        behavior.releaseRegistration();
     };
-    runtime.registerBindingCleanup({
-        cleanup,
+    runtime.registerStaleDomBinding({
+        release: releaseDomBinding,
         isConnected: () => elementRef.deref()?.isConnected === true,
     });
 }

package/dist/droppable/create-droppable.d.ts

@@ -12,6 +12,6 @@ export type CreateDomDroppableInput = {
 };
 export type DomDroppableBehavior = {
     setElement: (element: HTMLElement | null) => void;
-    cleanup: () => void;
+    releaseRegistration: () => void;
 };
 export declare function createDomDroppable(input: CreateDomDroppableInput): DomDroppableBehavior;

package/dist/droppable/create-droppable.js

@@ -1,7 +1,7 @@
 export function createDomDroppable(input) {
     let registeredElementRef = null;
     let registeredTargetId = null;
-    const cleanup = () => {
+    const releaseRegistration = () => {
         const registeredElement = registeredElementRef?.deref() ?? null;
         if (registeredTargetId !== null) {
             input.runtime.unregisterDropTarget(registeredTargetId, registeredElement ?? undefined);
@@ -16,7 +16,7 @@ export function createDomDroppable(input) {
                 registeredTargetId === input.dropTargetId) {
                 return;
             }
-            cleanup();
+            releaseRegistration();
             if (!element) {
                 return;
             }
@@ -26,6 +26,6 @@ export function createDomDroppable(input) {
             registeredElementRef = new WeakRef(element);
             registeredTargetId = input.dropTargetId;
         },
-        cleanup,
+        releaseRegistration,
     };
 }

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export type { SortableAxis, SortablePlacementBoundary, } from "./sortable/sortab
 export { createDragHandle, type CreateDragHandleInput, } from "./input/create-drag-handle.js";
 export type { DragEndResult, DragEndEvent, DragLifecycleCallbacks, DragLifecycleHelpers, DragSource, DragStartEvent, DragUpdateEvent, DropEvent, } from "./runtime/lifecycle.js";
 export type { RemeasureDropTargetsInput, SortableDropPlacement, } from "./runtime/drop-target-registry.js";
+export type { OverlayReleaseMode } from "./runtime/types.js";
 export { centerToCenter, pointerToCenter, pointerToRectDistance, } from "./targeting/algorithms.js";
 export { getDistanceToRect, maxOverlayCenterDistanceToRect, maxPointerDistanceToRect, } from "./targeting/constraints.js";
 export type { DropTarget, TargetingAlgorithm, TargetingAlgorithmInput, TargetingConstraint, TargetingConstraintInput, } from "./targeting/types.js";

package/dist/input/pointer-activation.d.ts

@@ -26,6 +26,8 @@ export declare class PointerActivationController {
     private pendingActivation;
     constructor(options: PointerActivationControllerOptions);
     request(request: PointerDragActivationRequest): void;
-    cancel(): void;
-    private activatePending;
+    cancelPendingActivation(): void;
+    private clearPendingActivation;
+    private clearPendingActivationTimer;
+    private activatePendingPointerDrag;
 }

package/dist/input/pointer-activation.js

@@ -5,7 +5,7 @@ export class PointerActivationController {
         this.options = options;
     }
     request(request) {
-        this.cancel();
+        this.cancelPendingActivation();
         if (this.options.isDragging()) {
             return;
         }
@@ -25,8 +25,8 @@ export class PointerActivationController {
             pointerId: request.pointerId,
             initialPointerPosition,
             latestPointerPosition: initialPointerPosition,
-            timeoutId: null,
-            cleanupWindowListeners: () => { },
+            activationTimerId: null,
+            releasePendingPointerListeners: null,
         };
         const handlePointerMove = (event) => {
             if (event.pointerId !== pendingActivation.pointerId) {
@@ -45,46 +45,58 @@ export class PointerActivationController {
             const distanceSquared = distanceX * distanceX + distanceY * distanceY;
             const activationDistanceSquared = activationDistance * activationDistance;
             if (distanceSquared >= activationDistanceSquared) {
-                this.activatePending(pendingActivation);
+                this.activatePendingPointerDrag(pendingActivation);
             }
         };
         const handlePointerEnd = (event) => {
             if (event.pointerId !== pendingActivation.pointerId) {
                 return;
             }
-            this.cancel();
+            this.cancelPendingActivation();
         };
         window.addEventListener("pointermove", handlePointerMove);
         window.addEventListener("pointerup", handlePointerEnd);
         window.addEventListener("pointercancel", handlePointerEnd);
-        pendingActivation.cleanupWindowListeners = () => {
+        pendingActivation.releasePendingPointerListeners = () => {
             window.removeEventListener("pointermove", handlePointerMove);
             window.removeEventListener("pointerup", handlePointerEnd);
             window.removeEventListener("pointercancel", handlePointerEnd);
         };
+        this.pendingActivation = pendingActivation;
         if (activationDelay !== null) {
-            pendingActivation.timeoutId = window.setTimeout(() => {
-                this.activatePending(pendingActivation);
+            pendingActivation.activationTimerId = window.setTimeout(() => {
+                this.activatePendingPointerDrag(pendingActivation);
             }, activationDelay);
         }
-        this.pendingActivation = pendingActivation;
     }
-    cancel() {
+    cancelPendingActivation() {
         const pendingActivation = this.pendingActivation;
         if (!pendingActivation) {
             return;
         }
-        if (pendingActivation.timeoutId !== null) {
-            window.clearTimeout(pendingActivation.timeoutId);
+        this.clearPendingActivation(pendingActivation);
+    }
+    clearPendingActivation(pendingActivation) {
+        if (this.pendingActivation === pendingActivation) {
+            this.pendingActivation = null;
+        }
+        this.clearPendingActivationTimer(pendingActivation);
+        const releasePendingPointerListeners = pendingActivation.releasePendingPointerListeners;
+        pendingActivation.releasePendingPointerListeners = null;
+        releasePendingPointerListeners?.();
+    }
+    clearPendingActivationTimer(pendingActivation) {
+        if (pendingActivation.activationTimerId === null) {
+            return;
         }
-        pendingActivation.cleanupWindowListeners();
-        this.pendingActivation = null;
+        window.clearTimeout(pendingActivation.activationTimerId);
+        pendingActivation.activationTimerId = null;
     }
-    activatePending(pendingActivation) {
+    activatePendingPointerDrag(pendingActivation) {
         if (this.pendingActivation !== pendingActivation) {
             return;
         }
-        this.cancel();
+        this.clearPendingActivation(pendingActivation);
         this.options.activate({
             draggableId: pendingActivation.draggableId,
             group: pendingActivation.group,

package/dist/integration/index.d.ts

@@ -1,5 +1,5 @@
-export { createDragRuntimeHandle, type DragRuntimeHandle, type DragRuntimeHandleConfigureInput, type DragRuntimeHandleOptions, } from "../runtime/drag-runtime-handle.js";
-export type { DragOverlayHostUpdate, DragOverlayPhase, DragOverlayRenderState, DragState, } from "../runtime/types.js";
+export { createDragRuntimeScope, type DragRuntimeScope, type DragRuntimeScopeConfigureInput, type DragRuntimeScopeOptions, } from "../runtime/drag-runtime-scope.js";
+export type { DragOverlayHostUpdate, DragOverlayPhase, DragOverlayRenderState, DragState, OverlayReleaseMode, } from "../runtime/types.js";
 export type { DragRuntimeSubscription } from "../runtime/lifecycle.js";
 export { createDomDraggable, type CreateDomDraggableInput, type DomDraggableBehavior, type DomDraggableKeyDownEvent, type DomDraggablePointerDownEvent, type DomDraggableRuntime, } from "../draggable/create-draggable.js";
 export { createDomDroppable, type CreateDomDroppableInput, type DomDroppableBehavior, type DomDroppableRuntime, } from "../droppable/create-droppable.js";

package/dist/integration/index.js

@@ -1,4 +1,4 @@
-export { createDragRuntimeHandle, } from "../runtime/drag-runtime-handle.js";
+export { createDragRuntimeScope, } from "../runtime/drag-runtime-scope.js";
 export { createDomDraggable, } from "../draggable/create-draggable.js";
 export { createDomDroppable, } from "../droppable/create-droppable.js";
 export { createDomDropContainer, } from "../droppable/create-drop-container.js";

package/dist/runtime/drag-runtime-scope.d.ts

@@ -0,0 +1,21 @@
+import type { DragRect } from "../geometry/rects.js";
+import type { DomDraggableRuntime } from "../draggable/create-draggable.js";
+import type { DomDropContainerRuntime } from "../droppable/create-drop-container.js";
+import type { DomDroppableRuntime } from "../droppable/create-droppable.js";
+import type { DomSortableRuntime } from "../sortable/sortable-registry.js";
+import { type StaleDomBindingRecord } from "./drag-runtime.js";
+import type { DragRuntimeConfigureInput, DragRuntimeOptions } from "./types.js";
+export type DragRuntimeScopeOptions = DragRuntimeOptions;
+export type DragRuntimeScopeConfigureInput = DragRuntimeConfigureInput;
+export type DragRuntimeScope = DomDraggableRuntime & DomDroppableRuntime & DomDropContainerRuntime & DomSortableRuntime & {
+    configure: (input: DragRuntimeScopeConfigureInput) => void;
+    cancelDrag: () => void;
+    releaseActiveDragResources: () => void;
+    setOverlayRect: (overlayRect: DragRect | null) => void;
+};
+export type InternalStaleDomBindingRuntime = {
+    registerStaleDomBinding: (record: StaleDomBindingRecord) => () => void;
+    pruneDisconnectedDomBindings: () => void;
+    getStaleDomBindingRecordCount: () => number;
+};
+export declare function createDragRuntimeScope(options?: DragRuntimeScopeOptions): DragRuntimeScope;