@k2b/ui 0.28.0 → 0.29.0

package/dist/ssr/actions/drag-and-drop.js

@@ -0,0 +1,692 @@
+import { createSignal } from "solid-js";
+import { suppressTextSelection } from "../internal/text-selection";
+const SLOP = 10;
+const IGNORE = "input, textarea, select, [contenteditable]:not([contenteditable='false']), [data-drag-ignore]";
+const HOLD_MS = 500;
+const AUTOSCROLL_EDGE = 32;
+const [readActiveDrag, setActiveDrag] = createSignal();
+/** Reactive payload of the drag in progress, or undefined. */
+export const activeDrag = () => readActiveDrag();
+const dragStartListeners = new Set();
+/** Internal hand-over to the gesture menu that owns this press. */
+export const onPointerDragStart = listener => {
+  dragStartListeners.add(listener);
+  return () => dragStartListeners.delete(listener);
+};
+const engines = new WeakMap();
+const engineFor = doc => {
+  let engine = engines.get(doc);
+  if (!engine) {
+    engine = {
+      targets: new Set(),
+      byElement: new WeakMap()
+    };
+    engines.set(doc, engine);
+  }
+  return engine;
+};
+const accepts = (target, payload) => target.element.isConnected && !target.disabled && target.accept.includes(payload.type);
+const isModal = dialog => {
+  try {
+    return dialog.matches(":modal");
+  } catch {
+    return dialog.matches("dialog[open]");
+  }
+};
+/** The modal dialog around an element; while one is open, everything outside of it is inert. */
+const modalOf = element => {
+  for (let dialog = element.closest("dialog"); dialog; dialog = dialog.parentElement?.closest("dialog") ?? null) if (isModal(dialog)) return dialog;
+  return undefined;
+};
+const visible = element => typeof element.checkVisibility === "function" ? element.checkVisibility({
+  checkVisibilityCSS: true
+}) : element.getClientRects().length > 0 && getComputedStyle(element).visibility !== "hidden";
+/**
+ * A keyboard destination must be one a pointer could reach from where the pickup started: shown and visible, not
+ * inert, and in the same modal dialog as the origin.
+ */
+const reachable = (target, origin) => {
+  const element = target.element;
+  if (element.closest("[inert]") || modalOf(element) !== modalOf(origin)) return false;
+  return visible(element);
+};
+const mark = (target, payload) => {
+  if (payload && accepts(target, payload)) target.element.dataset.drop = "ok";else delete target.element.dataset.drop;
+};
+const containerFor = origin => {
+  try {
+    return origin.closest("dialog[open]:modal") ?? origin.ownerDocument.body;
+  } catch {
+    return origin.closest("dialog[open]") ?? origin.ownerDocument.body;
+  }
+};
+/** A live region needs a moment between being inserted and being written to, or its first text goes unread. */
+const ANNOUNCE_DELAY_MS = 100;
+/** One live region per container: the body, or the modal dialog the drag happens in, as outside of it is inert. */
+const announcers = new WeakMap();
+const announcerFor = origin => {
+  const parent = containerFor(origin);
+  let announcer = announcers.get(parent);
+  if (!announcer || announcer.region.parentElement !== parent) {
+    const region = origin.ownerDocument.createElement("div");
+    region.className = "k2b-drag-announcer";
+    region.setAttribute("role", "status");
+    region.setAttribute("aria-live", "polite");
+    region.setAttribute("aria-atomic", "true");
+    Object.assign(region.style, {
+      position: "absolute",
+      width: "1px",
+      height: "1px",
+      clip: "rect(0, 0, 0, 0)",
+      overflow: "hidden",
+      whiteSpace: "nowrap"
+    });
+    // First in a dialog: a dialog stack keeps its top level as the dialog's last child, and finds it there.
+    if (parent === origin.ownerDocument.body) parent.append(region);else parent.prepend(region);
+    announcer = {
+      region,
+      ready: performance.now() + ANNOUNCE_DELAY_MS,
+      queue: []
+    };
+    announcers.set(parent, announcer);
+  }
+  return announcer;
+};
+const announce = (origin, text) => {
+  const announcer = announcerFor(origin);
+  const write = next => {
+    announcer.region.textContent = announcer.region.textContent === next ? `${next}\u00a0` : next;
+  };
+  const wait = announcer.ready - performance.now();
+  if (wait <= 0 && !announcer.queue.length) {
+    write(text);
+    return;
+  }
+  // Texts that come before the region is ready are read together once it is, so none replaces another unread.
+  if (announcer.queue.push(text) > 1) return;
+  origin.ownerDocument.defaultView.setTimeout(() => write(announcer.queue.splice(0).join(" ")), Math.max(0, wait));
+};
+export const registerDropTarget = (element, initial) => {
+  const engine = engineFor(element.ownerDocument);
+  const entry = {
+    element,
+    ...initial
+  };
+  // The live region exists long before the first drag, so its first announcement is read.
+  announcerFor(element);
+  engine.targets.add(entry);
+  engine.byElement.set(element, entry);
+  mark(entry, engine.session?.payload);
+  engine.session?.targetsChanged?.();
+  return {
+    update(next) {
+      Object.assign(entry, next);
+      mark(entry, engine.session?.payload);
+      engine.session?.targetsChanged?.();
+    },
+    dispose() {
+      engine.targets.delete(entry);
+      engine.byElement.delete(element);
+      delete element.dataset.drop;
+      engine.session?.targetsChanged?.();
+    }
+  };
+};
+const clearSession = (engine, session, source) => {
+  if (engine.session !== session) return;
+  engine.session = undefined;
+  if (source) delete source.dataset.dragging;
+  for (const target of engine.targets) mark(target);
+  setActiveDrag(undefined);
+};
+
+/**
+ * Suppresses the click and touchend that follow the release of a drag or a hold. A drag cancelled while the button is
+ * still down waits for that pointer's release; a new press or a cancelled pointer drops the wait.
+ */
+const swallowRelease = (doc, pointerId) => {
+  const win = doc.defaultView;
+  if (pointerId !== undefined) {
+    const stop = () => {
+      win.removeEventListener("pointerup", released, true);
+      win.removeEventListener("pointercancel", gone, true);
+      win.removeEventListener("pointerdown", gone, true);
+    };
+    const released = event => {
+      if (event.pointerId !== pointerId) return;
+      stop();
+      swallowRelease(doc);
+    };
+    const gone = event => {
+      if (event.type === "pointerdown" || event.pointerId === pointerId) stop();
+    };
+    win.addEventListener("pointerup", released, true);
+    win.addEventListener("pointercancel", gone, true);
+    win.addEventListener("pointerdown", gone, true);
+    return;
+  }
+  const click = event => {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    win.removeEventListener("click", click, true);
+  };
+  const touchEnd = event => event.preventDefault();
+  win.addEventListener("click", click, true);
+  win.addEventListener("touchend", touchEnd, {
+    capture: true,
+    passive: false
+  });
+  win.setTimeout(() => {
+    win.removeEventListener("click", click, true);
+    win.removeEventListener("touchend", touchEnd, true);
+  }, 0);
+};
+
+/** Walks ancestors only; neither hit testing nor scrolling scans the target registry. */
+const SCROLLS = /^(auto|scroll|overlay)$/;
+const LOCKED = /^(hidden|clip)$/;
+/**
+ * Scrolls the first container under the pointer that can still scroll toward the edge the pointer rests near. The
+ * walk stops at a dialog, so the page behind a modal never scrolls, and the viewport scrolls only while the page is
+ * not locked, as `dialogCore` locks it with `overflow: hidden`.
+ */
+const scrollAt = (doc, hit, x, y, cache) => {
+  const win = doc.defaultView;
+  const root = doc.scrollingElement;
+  const overflowOf = element => {
+    let overflow = cache.get(element);
+    if (!overflow) {
+      const style = win.getComputedStyle(element);
+      overflow = {
+        x: style.overflowX,
+        y: style.overflowY
+      };
+      cache.set(element, overflow);
+    }
+    return overflow;
+  };
+  for (let element = hit; element; element = element.parentElement) {
+    const viewport = element === root;
+    let canX;
+    let canY;
+    if (viewport) {
+      // The body's overflow applies to the viewport while the root's is visible.
+      const own = overflowOf(element);
+      const body = doc.body ? overflowOf(doc.body) : own;
+      canX = !LOCKED.test(own.x) && !(own.x === "visible" && LOCKED.test(body.x));
+      canY = !LOCKED.test(own.y) && !(own.y === "visible" && LOCKED.test(body.y));
+    } else {
+      const own = overflowOf(element);
+      canX = SCROLLS.test(own.x);
+      canY = SCROLLS.test(own.y);
+    }
+    const rect = viewport ? {
+      left: 0,
+      top: 0,
+      right: win.innerWidth,
+      bottom: win.innerHeight
+    } : element.getBoundingClientRect();
+    const step = (point, start, end, position, max) => {
+      if (point < start || point > end) return 0;
+      const before = point - start;
+      const after = end - point;
+      if (before < AUTOSCROLL_EDGE && position > 0) return -Math.max(1, Math.ceil(12 * (1 - before / AUTOSCROLL_EDGE)));
+      if (after < AUTOSCROLL_EDGE && position < max) return Math.max(1, Math.ceil(12 * (1 - after / AUTOSCROLL_EDGE)));
+      return 0;
+    };
+    const dx = canX ? step(x, rect.left, rect.right, element.scrollLeft, element.scrollWidth - (viewport ? win.innerWidth : element.clientWidth)) : 0;
+    const dy = canY ? step(y, rect.top, rect.bottom, element.scrollTop, element.scrollHeight - (viewport ? win.innerHeight : element.clientHeight)) : 0;
+    if (dx || dy) {
+      const beforeX = element.scrollLeft;
+      const beforeY = element.scrollTop;
+      element.scrollLeft += dx;
+      element.scrollTop += dy;
+      if (element.scrollLeft !== beforeX || element.scrollTop !== beforeY) return true;
+    }
+    if (element instanceof HTMLDialogElement) return false;
+  }
+  return false;
+};
+export const bindDragSource = (source, read) => {
+  const doc = source.ownerDocument;
+  const win = doc.defaultView;
+  const engine = engineFor(doc);
+  let abandon;
+  /** Set while a held finger or a drag owns the touch, so the page must not scroll. */
+  let blockTouch = false;
+  /**
+   * Bound for the source's whole life: WebKit decides at touchstart whether a touch can still be kept from scrolling,
+   * and only a non-passive listener present by then lets the later hold do so.
+   */
+  const preventScroll = event => {
+    if (blockTouch && event.cancelable) event.preventDefault();
+  };
+  /**
+   * Fields, editable text, and marked regions inside the source keep their own press and native drag, and so does a
+   * whole source inside editable content, such as a paragraph in an editor.
+   */
+  const ignored = target => {
+    // An SVG part has no editable state of its own; its nearest HTML ancestor tells.
+    let html = target instanceof Element ? target : null;
+    while (html && !(html instanceof HTMLElement)) html = html.parentElement;
+    if (html instanceof HTMLElement && html.isContentEditable) return true;
+    const found = target instanceof Element ? target.closest(IGNORE) : null;
+    return found !== null && source.contains(found);
+  };
+  const nativeDrag = event => {
+    if (!ignored(event.target)) event.preventDefault();
+  };
+  const down = event => {
+    if (!event.isPrimary || event.button !== 0 || engine.session || read().disabled) return;
+    if (!(event.target instanceof Element) || event.target.closest(".k2b-drag-source") !== source) return;
+    if (ignored(event.target)) return;
+    engine.abandonPress?.();
+    // Ready before the drag starts, so its first announcement is read.
+    announcerFor(source);
+    const id = event.pointerId;
+    const mouse = event.pointerType === "mouse";
+    const start = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    let point = start;
+    let held = false;
+    let finished = false;
+    /** The pointer went up or away, so no click of this press is still to come. */
+    let released = false;
+    let session;
+    let messages;
+    let preview;
+    let releaseSelection;
+    let frame = 0;
+    let timer;
+    let over;
+    let refused;
+    const overflowCache = new WeakMap();
+    const hold = () => {
+      if (held || finished) return;
+      win.clearTimeout(timer);
+      if (read().disabled) {
+        cancel();
+        return;
+      }
+      held = true;
+      blockTouch = true;
+      source.dataset.held = "";
+      win.addEventListener("keydown", key, true);
+    };
+    // Android reports a long press as a context-menu event, which may come before the timer and opens a GestureMenu
+    // around the source then. It counts as the hold, so the following move drags.
+    const preventContext = event => {
+      event.preventDefault();
+      if (!session) hold();
+    };
+    const clean = () => {
+      if (finished) return;
+      finished = true;
+      win.clearTimeout(timer);
+      win.cancelAnimationFrame(frame);
+      win.removeEventListener("pointermove", move, true);
+      win.removeEventListener("pointerup", up, true);
+      win.removeEventListener("pointercancel", cancelPointer, true);
+      win.removeEventListener("pointerdown", other, true);
+      win.removeEventListener("blur", cancel);
+      win.removeEventListener("keydown", key, true);
+      win.removeEventListener("contextmenu", preventContext, true);
+      blockTouch = false;
+      source.removeEventListener("lostpointercapture", lostCapture);
+      if (source.hasPointerCapture?.(id)) source.releasePointerCapture(id);
+      delete source.dataset.held;
+      delete source.dataset.pressing;
+      preview?.remove();
+      releaseSelection?.();
+      if (engine.abandonPress === cancel) engine.abandonPress = undefined;
+      if (abandon === cancel) abandon = undefined;
+      if (session) {
+        clearSession(engine, session, source);
+        swallowRelease(doc, released ? undefined : id);
+      } else if (held) swallowRelease(doc, released ? undefined : id);
+    };
+    const cancel = () => {
+      if (finished) return;
+      const payload = session?.payload;
+      clean();
+      if (payload) announce(source, messages.cancelled(payload));
+    };
+    const hitTest = () => {
+      const payload = session.payload;
+      const hit = doc.elementFromPoint(point.x, point.y);
+      let inner;
+      let next;
+      for (let element = hit; element; element = element.parentElement) {
+        const target = engine.byElement.get(element);
+        // A dialog is a boundary: a target around it lies behind it.
+        if (!target && element instanceof HTMLDialogElement) break;
+        if (!target) continue;
+        inner ??= target;
+        if (accepts(target, payload)) {
+          next = target;
+          break;
+        }
+      }
+      const rejected = next ? undefined : inner;
+      if (next !== over || rejected !== refused) {
+        if (over) mark(over, engine.targets.has(over) ? payload : undefined);
+        if (refused) mark(refused, engine.targets.has(refused) ? payload : undefined);
+        over = next;
+        refused = rejected;
+        if (over) {
+          over.element.dataset.drop = "over";
+          announce(source, over.messages.over({
+            target: over.label
+          }));
+        } else if (refused) {
+          refused.element.dataset.drop = "refused";
+          announce(source, refused.messages.refused({
+            target: refused.label,
+            label: payload.label
+          }));
+        }
+      }
+      if (over) over.element.dataset.drop = "over";
+      if (refused) refused.element.dataset.drop = "refused";
+      return hit;
+    };
+    const renderFrame = () => {
+      frame = 0;
+      if (finished || !session) return;
+      preview.style.transform = `translate3d(${point.x}px, ${point.y}px, 0)`;
+      const hit = hitTest();
+      if (scrollAt(doc, hit, point.x, point.y, overflowCache)) frame = win.requestAnimationFrame(renderFrame);
+    };
+    const begin = () => {
+      const current = read();
+      if (current.disabled || engine.session) {
+        cancel();
+        return;
+      }
+      const payload = {
+        ...current.payload
+      };
+      messages = current.messages;
+      session = {
+        payload,
+        origin: source,
+        cancel,
+        targetsChanged: () => {
+          if (!frame) frame = win.requestAnimationFrame(renderFrame);
+        }
+      };
+      engine.session = session;
+      for (const listener of dragStartListeners) listener(id);
+      if (finished) return;
+      delete source.dataset.held;
+      source.dataset.dragging = "";
+      win.addEventListener("contextmenu", preventContext, true);
+      releaseSelection = suppressTextSelection(id);
+      // Captured, the mouse's moves and release reach this drag also over an iframe, such as a PDF preview. A finger
+      // or pen is captured by the browser already.
+      if (mouse) try {
+        source.setPointerCapture(id);
+        source.addEventListener("lostpointercapture", lostCapture);
+      } catch {
+        // The pointer is already gone; its pointerup or pointercancel ends the drag.
+      }
+      preview = doc.createElement("div");
+      // Inside the source's own .k2b-ui scope the preview inherits its theme, also a scoped dark one; a second
+      // .k2b-ui would reset the tokens to light.
+      const scope = source.parentElement?.closest(".k2b-ui");
+      preview.className = scope ? "k2b-drag-preview" : "k2b-ui k2b-drag-preview";
+      preview.setAttribute("aria-hidden", "true");
+      const icon = doc.createElement("i");
+      icon.className = payload.icon ?? "ti ti-file";
+      const label = doc.createElement("span");
+      label.className = "k2b-drag-preview__label";
+      label.textContent = payload.label;
+      preview.append(icon, label);
+      if (payload.count && payload.count > 1) {
+        const count = doc.createElement("span");
+        count.className = "k2b-drag-preview__count";
+        count.textContent = String(payload.count);
+        preview.append(count);
+      }
+      // In the top layer the preview is placed against the viewport, also inside a transformed dialog, and stays above it.
+      preview.setAttribute("popover", "manual");
+      (scope ?? doc.body).append(preview);
+      preview.showPopover?.();
+      preview.style.transform = `translate3d(${point.x}px, ${point.y}px, 0)`;
+      for (const target of engine.targets) mark(target, payload);
+      setActiveDrag(payload);
+      if (finished) return;
+      announce(source, messages.pickedUp(payload));
+      win.addEventListener("keydown", key, true);
+    };
+    const move = event => {
+      if (event.pointerId !== id || finished) return;
+      point = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      if (!session && Math.hypot(point.x - start.x, point.y - start.y) >= SLOP) {
+        if (event.pointerType !== "mouse" && !held) {
+          cancel();
+          return;
+        }
+        begin();
+      }
+      if (session && !finished && !frame) frame = win.requestAnimationFrame(renderFrame);
+    };
+    const up = event => {
+      if (event.pointerId !== id || finished) return;
+      released = true;
+      if (!session) {
+        clean();
+        return;
+      }
+      point = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      hitTest();
+      const target = over;
+      const payload = session.payload;
+      const result = target ? target.messages.dropped({
+        label: payload.label,
+        target: target.label
+      }) : messages.cancelled(payload);
+      const drop = target?.drop;
+      clean();
+      announce(source, result);
+      drop?.(payload);
+    };
+    // Capture ends without a release only when the browser takes the pointer away.
+    const lostCapture = event => {
+      if (event.pointerId === id) cancel();
+    };
+    const cancelPointer = event => {
+      if (event.pointerId !== id) return;
+      released = true;
+      cancel();
+    };
+    const other = event => {
+      if (event.pointerId !== id) cancel();
+    };
+    const key = event => {
+      if (event.key !== "Escape") return;
+      // A hold is not a drag yet: Escape ends it and still reaches the menu the hold opened.
+      if (!session) {
+        cancel();
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      cancel();
+    };
+    abandon = cancel;
+    engine.abandonPress = cancel;
+    win.addEventListener("pointermove", move, true);
+    win.addEventListener("pointerup", up, true);
+    win.addEventListener("pointercancel", cancelPointer, true);
+    win.addEventListener("pointerdown", other, true);
+    win.addEventListener("blur", cancel);
+    if (event.pointerType !== "mouse") {
+      // A held finger drags: it selects no text, and Android's long-press menu does not open, also before the hold fires.
+      source.dataset.pressing = "";
+      win.addEventListener("contextmenu", preventContext, true);
+      timer = win.setTimeout(hold, HOLD_MS);
+    }
+  };
+  announcerFor(source);
+  source.addEventListener("pointerdown", down);
+  source.addEventListener("dragstart", nativeDrag);
+  source.addEventListener("touchmove", preventScroll, {
+    passive: false
+  });
+  return () => {
+    abandon?.();
+    if (engine.session && source.contains(engine.session.origin)) engine.session.cancel();
+    source.removeEventListener("pointerdown", down);
+    source.removeEventListener("dragstart", nativeDrag);
+    source.removeEventListener("touchmove", preventScroll);
+  };
+};
+const FOCUSABLE = "a[href], button, input, select, textarea, [tabindex]";
+/** The origin itself when it takes focus, else the nearest ancestor that does, such as a menu's group. */
+const focusTarget = origin => (origin.matches(FOCUSABLE) ? origin : origin.closest(FOCUSABLE)) ?? origin;
+export const startKeyboardDrag = (input, origin, messages) => {
+  const doc = origin.ownerDocument;
+  const win = doc.defaultView;
+  const engine = engineFor(doc);
+  engine.session?.cancel();
+  engine.abandonPress?.();
+  const payload = {
+    ...input
+  };
+  const choices = () => [...engine.targets].filter(target => accepts(target, payload) && reachable(target, origin)).sort((a, b) => a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+  let targets = [];
+  let current;
+  /** Listening for keys: the first destination is chosen. */
+  let ready = false;
+  let finished = false;
+  let frame = 0;
+  const source = origin.closest(".k2b-drag-source") ?? undefined;
+  const end = (target, text) => {
+    if (finished) return;
+    finished = true;
+    win.cancelAnimationFrame(frame);
+    doc.removeEventListener("keydown", key, true);
+    doc.removeEventListener("pointerdown", cancel, true);
+    win.removeEventListener("blur", cancel);
+    const result = text ?? (target ? target.messages.dropped({
+      label: payload.label,
+      target: target.label
+    }) : messages.cancelled(payload));
+    const drop = target?.drop;
+    clearSession(engine, session, source);
+    announce(origin, result);
+    // Focus scrolls the origin back into view when choosing a destination scrolled it away.
+    if (origin.isConnected) focusTarget(origin).focus();
+    drop?.(payload);
+  };
+  const cancel = () => end();
+  const pickupModal = modalOf(origin);
+  /**
+   * Whether a modal dialog opened over the pickup, leaving the origin inert: the key comes from inside another modal,
+   * or a modal opened over a pickup that started outside of every modal.
+   */
+  const behindModal = event => {
+    const keyModal = event.target instanceof Element ? modalOf(event.target) : undefined;
+    if (keyModal && keyModal !== pickupModal && !keyModal.contains(origin)) return true;
+    // A dialog stack that shares one native dialog hides the level below, the origin's, when the next one opens.
+    if (pickupModal && (!origin.isConnected || !visible(origin))) return true;
+    return !pickupModal && Array.from(doc.querySelectorAll("dialog[open]")).some(isModal);
+  };
+  const describe = target => target.messages.choice({
+    target: target.label,
+    index: targets.indexOf(target) + 1,
+    count: targets.length
+  });
+  const choose = (target, text = describe(target)) => {
+    if (current) mark(current, engine.targets.has(current) ? payload : undefined);
+    current = target;
+    current.element.dataset.drop = "over";
+    current.element.scrollIntoView({
+      block: "nearest",
+      inline: "nearest"
+    });
+    announce(origin, text);
+  };
+  const key = event => {
+    const backward = event.key === "ArrowUp" || event.key === "ArrowLeft" || event.key === "Tab" && event.shiftKey;
+    const forward = !backward && (event.key === "ArrowDown" || event.key === "ArrowRight" || event.key === "Tab");
+    if (!backward && !forward && !["Home", "End", "Enter", " ", "Escape"].includes(event.key)) return;
+    // A modal dialog opened since the pickup: its keys are its own, and the pickup behind it ends.
+    if (behindModal(event)) {
+      cancel();
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.key === "Escape") {
+      cancel();
+      return;
+    }
+    // Destinations may have been hidden or shown since the last key, for example by a layout change.
+    targets = choices();
+    if (!targets.length) {
+      end(undefined, messages.noTarget(payload));
+      return;
+    }
+    const index = current ? targets.indexOf(current) : -1;
+    const count = targets.length;
+    if (forward) choose(targets[index < 0 ? 0 : (index + 1) % count]);else if (backward) choose(targets[index < 0 ? count - 1 : (index - 1 + count) % count]);else if (event.key === "Home") choose(targets[0]);else if (event.key === "End") choose(targets[count - 1]);else end(index >= 0 ? current : undefined);
+  };
+  /** Chooses the first destination and starts listening; without one, the sequence ends at once. */
+  const settle = () => {
+    targets = choices();
+    if (!targets.length) {
+      end(undefined, messages.noTarget(payload));
+      return;
+    }
+    ready = true;
+    // One announcement, so a screen reader does not drop the instructions for the first choice.
+    choose(targets[0], `${messages.pickedUpKeyboard({
+      label: payload.label,
+      count: targets.length
+    })} ${describe(targets[0])}`);
+    // A menu's activating key has already traversed capture. Defer the listener until that dispatch has ended.
+    queueMicrotask(() => {
+      if (finished) return;
+      doc.addEventListener("keydown", key, true);
+      doc.addEventListener("pointerdown", cancel, true);
+      win.addEventListener("blur", cancel);
+    });
+  };
+  const session = {
+    payload,
+    origin,
+    cancel,
+    // Settled a frame later, so a target that a re-render replaces has registered again before none counts as left.
+    targetsChanged() {
+      if (!ready || finished || frame) return;
+      frame = win.requestAnimationFrame(() => {
+        frame = 0;
+        if (finished) return;
+        targets = choices();
+        if (!targets.length) cancel();else choose(current && targets.includes(current) ? current : targets[0]);
+      });
+    }
+  };
+  // The drag is active before destinations are counted, so a host can mount the ones it shows only while dragging.
+  engine.session = session;
+  for (const target of engine.targets) mark(target, payload);
+  if (source) source.dataset.dragging = "";
+  setActiveDrag(payload);
+  if (finished) return cancel;
+  if (choices().length) settle();else frame = win.requestAnimationFrame(() => {
+    frame = 0;
+    if (!finished) settle();
+  });
+  return cancel;
+};
+//# sourceMappingURL=drag-and-drop.js.map