@jsenv/dom 0.17.9 → 0.17.11

package/dist/jsenv_dom.js

@@ -4257,6 +4257,187 @@ const createPreviousNodeIterator = (fromNode, rootNode, skipRoot = null) => {
   };
 };
 
+/**
+ * The click a gesture leaves behind.
+ *
+ * A press that turned into something else — an object carried, a screen swiped,
+ * a menu opened by holding still — still ends with a `pointerup`, and the
+ * browser follows that with a `click` on whatever the pointer was over. On a
+ * link or a button that click means "follow me", which is not what the hand
+ * asked for: the press was already answered, by the gesture.
+ *
+ * So it is swallowed, once, in capture on the document — before any handler an
+ * element may have, and without anyone having to know which element that is.
+ */
+
+/**
+ * Swallows the next click, for a gesture that has just answered the press.
+ *
+ * @returns {() => void} the gesture is over. The suppressor cannot be taken
+ *   down with it — the click is dispatched AFTER the pointerup that ends the
+ *   gesture, so it would be gone one event too early, and the drag would end on
+ *   the link it started from being followed. It goes once it has swallowed a
+ *   click, or at the next press if the gesture produced none: a click is always
+ *   preceded by a press, so a suppressor that outlives one press can never
+ *   reach the click of another.
+ */
+const suppressClickAfterGesture = () => {
+  const suppressClick = (clickEvent) => {
+    clickEvent.stopPropagation();
+    clickEvent.preventDefault();
+    stopSuppressing();
+  };
+  const stopSuppressing = () => {
+    document.removeEventListener("click", suppressClick, { capture: true });
+    document.removeEventListener("pointerdown", stopSuppressing, {
+      capture: true,
+    });
+  };
+  document.addEventListener("click", suppressClick, { capture: true });
+  return () => {
+    document.addEventListener("pointerdown", stopSuppressing, {
+      capture: true,
+    });
+  };
+};
+
+/**
+ * A press that says something by NOT moving.
+ *
+ * A finger landing on an element is ambiguous — it may be a tap, a scroll, a
+ * swipe — and the one unambiguous signal a finger can give is staying still:
+ * travel is exactly what a scroll looks like, so it cannot be the sign. This
+ * owns that wait, and only that: what the press then means (an object picked
+ * up, a menu opened) belongs to whoever asked for it.
+ *
+ * The wait also has to hold off the system's own answer to the same gesture: a
+ * FINGER held long enough IS the context-menu gesture, and Android's menu (around
+ * 500ms) or iOS's callout lands a tenth of a second after the press was answered
+ * here. The half of that which is an event is refused below; the half that is not
+ * (iOS selecting the word under the finger) is a stylesheet the caller writes on
+ * its own elements — `-webkit-touch-callout: none` has to be true before the
+ * finger lands, so it cannot be set from here.
+ *
+ * A mouse is a different matter and is left alone: its context menu comes from
+ * the other button, not from this press, and refusing it would take the browser's
+ * menu away from an element for no reason.
+ */
+
+/**
+ * Waits for a press to be held still, then tells the caller.
+ *
+ * @param {PointerEvent} pressEvent The `pointerdown` that may become a hold.
+ * @param {object} options
+ * @param {number} [options.delay=400] How long (ms) the pointer must stay down.
+ *   Kept under the system context-menu delay so the press is answered before
+ *   the menu would have opened.
+ * @param {number} [options.slop=8] How far (px) the pointer may drift during
+ *   the wait — beyond it the finger is going somewhere, and a press answered in
+ *   passing is a press nobody made.
+ * @param {function} [options.onPressStart] The wait began (a cue that the press
+ *   counts).
+ * @param {function} [options.onPressCancel] The pointer moved or lifted before
+ *   the wait was over.
+ * @param {(pressEvent: PointerEvent, handle: {endPress: () => void}) => void} options.onPressHeld
+ *   The wait completed. Whatever the press now means outlives this call — an
+ *   object is being carried, a menu is open under the finger — so the caller
+ *   owns the end of it and says when with `endPress`, which is what gives the
+ *   context menu back.
+ * @returns {{ cancel: () => void }}
+ */
+const waitForPressHeld = (
+  pressEvent,
+  { delay = 400, slop = 8, onPressStart, onPressCancel, onPressHeld },
+) => {
+  const { pointerId, clientX, clientY } = pressEvent;
+
+  const pressCleanupCallbacks = [];
+  const endPress = () => {
+    for (const pressCleanupCallback of pressCleanupCallbacks) {
+      pressCleanupCallback();
+    }
+    pressCleanupCallbacks.length = 0;
+  };
+
+  /* A FINGER held down is the system's own context-menu gesture, and the menu it
+     raises lands on top of the answer this press was already given. A MOUSE is
+     not: its context menu comes from the other button, has nothing to do with
+     this press, and is the user asking for the browser's menu — so it is left
+     alone, and only a touch press refuses it.
+     The listener goes on window, in capture: what answers the press may cover the
+     page (a drag backdrop, a popup), and the contextmenu event is then aimed at
+     that instead of at the element pressed. */
+  if (pressEvent.pointerType === "touch") {
+    const preventContextMenu = (contextMenuEvent) => {
+      contextMenuEvent.preventDefault();
+    };
+    window.addEventListener("contextmenu", preventContextMenu, true);
+    pressCleanupCallbacks.push(() => {
+      window.removeEventListener("contextmenu", preventContextMenu, true);
+    });
+  }
+
+  const countdownCleanupCallbacks = [];
+  const endCountdown = () => {
+    for (const countdownCleanupCallback of countdownCleanupCallbacks) {
+      countdownCleanupCallback();
+    }
+    countdownCleanupCallbacks.length = 0;
+  };
+
+  const timeout = setTimeout(() => {
+    endCountdown();
+    onPressHeld(pressEvent, { endPress });
+  }, delay);
+  countdownCleanupCallbacks.push(() => {
+    clearTimeout(timeout);
+  });
+
+  const cancelPress = (pointerEvent) => {
+    endCountdown();
+    endPress();
+    onPressCancel?.(pointerEvent);
+  };
+  const onPointerMove = (pointerMoveEvent) => {
+    if (pointerMoveEvent.pointerId !== pointerId) {
+      return;
+    }
+    const xDrift = Math.abs(pointerMoveEvent.clientX - clientX);
+    const yDrift = Math.abs(pointerMoveEvent.clientY - clientY);
+    if (xDrift < slop && yDrift < slop) {
+      return;
+    }
+    // The finger is going somewhere: it is scrolling the page, or running down
+    // the list. Letting the countdown survive would answer a press in passing.
+    cancelPress(pointerMoveEvent);
+  };
+  const onPointerEnd = (pointerEndEvent) => {
+    if (pointerEndEvent.pointerId !== pointerId) {
+      return;
+    }
+    cancelPress(pointerEndEvent);
+  };
+  // On window rather than on the element: the finger can leave it, and the
+  // element itself can be taken out of the document while the press is waiting.
+  window.addEventListener("pointermove", onPointerMove);
+  window.addEventListener("pointerup", onPointerEnd);
+  window.addEventListener("pointercancel", onPointerEnd);
+  countdownCleanupCallbacks.push(() => {
+    window.removeEventListener("pointermove", onPointerMove);
+    window.removeEventListener("pointerup", onPointerEnd);
+    window.removeEventListener("pointercancel", onPointerEnd);
+  });
+
+  onPressStart?.(pressEvent);
+
+  return {
+    cancel: () => {
+      endCountdown();
+      endPress();
+    },
+  };
+};
+
 const activeElementSignal = signal(
   typeof document === "object" ? document.activeElement : undefined,
 );
@@ -8296,36 +8477,8 @@ const createDragGestureController = (options = {}) => {
       return dragData;
     };
     const markAsStarted = () => {
-      // Suppress the click that the browser fires after pointerup following a real drag.
-      // The capture phase runs before any element onClick handler.
-      const suppressClick = clickEvent => {
-        clickEvent.stopPropagation();
-        clickEvent.preventDefault();
-        stopSuppressingClick();
-      };
-      // That click is dispatched AFTER the pointerup that ends the drag, so
-      // this cannot be taken down with the gesture — it would be gone one event
-      // too early, and the drag would end on the link it started from being
-      // followed. It goes once it has swallowed the click, or at the next press
-      // if the drag produced none: a click is always preceded by a press, so a
-      // suppressor that outlives one press can never reach the click of
-      // another.
-      const stopSuppressingClick = () => {
-        document.removeEventListener("click", suppressClick, {
-          capture: true
-        });
-        document.removeEventListener("pointerdown", stopSuppressingClick, {
-          capture: true
-        });
-      };
-      document.addEventListener("click", suppressClick, {
-        capture: true
-      });
-      addReleaseCallback(() => {
-        document.addEventListener("pointerdown", stopSuppressingClick, {
-          capture: true
-        });
-      });
+      const clickSuppressionIsOver = suppressClickAfterGesture();
+      addReleaseCallback(clickSuppressionIsOver);
       // Everything this gesture puts on the document is in place, and undoable,
       // BEFORE anybody is told it started: a listener may end the gesture from
       // inside this very notification — that is how a press becomes a drag (see
@@ -8470,6 +8623,72 @@ const createDragGestureController = (options = {}) => {
     };
     dragGesture.dragViaPointer = dragViaPointer;
     dragGesture.releaseViaPointer = releaseViaPointer;
+    /*
+     * A press that starts a drag is not a press that starts a selection: the
+     * browser sees a pointer going down on text and moving, and that is its
+     * own gesture — the words under the finger turn blue while the element
+     * travels, and the selection outlives the release.
+     *
+     * Refused from the grab, before any threshold: whether the press becomes a
+     * drag is decided a few pixels later, but the selection is decided at the
+     * FIRST move, and by then it is too late to say no.
+     *
+     * `user-select: none` would say it in CSS, but it would say it to
+     * everybody: the element would stop being selectable even when nobody is
+     * dragging it. Here it is refused for the length of one gesture.
+     */
+    const preventSelectStart = selectStartEvent => {
+      selectStartEvent.preventDefault();
+    };
+    document.addEventListener("selectstart", preventSelectStart);
+    // A press also puts an end to the selection the page was already holding,
+    // the way the browser's own press does: refusing selectstart keeps a new
+    // selection from being made, it says nothing about the one painted before
+    // — which would otherwise sit there through a gesture that has nothing to
+    // do with it.
+    collapseSelection();
+    dragGesture.addReleaseCallback(() => {
+      document.removeEventListener("selectstart", preventSelectStart);
+    });
+    /*
+     * Refusing every selection also refuses the one a press is entitled to
+     * make: a double click selects the word under it, and that selection is
+     * over before the pointer has gone anywhere. It is made here instead,
+     * spelled out (see selectWordAtPoint) rather than left to a browser
+     * heuristic that cannot tell a drag from a click.
+     *
+     * On the document and outliving the gesture, because the gesture is
+     * already over when the second click completes: dblclick comes after
+     * mouseup, the gesture ends at pointerup. It is dropped when it fires, and
+     * otherwise when the next press installs its own — a listener waiting for
+     * a double click that never comes costs nothing until then.
+     */
+    removePendingDoubleClickListener();
+    const onDoubleClick = dblclickEvent => {
+      removePendingDoubleClickListener = NOOP;
+      // A drag that happened is a gesture, not a click: the second press of a
+      // double click can be the one that drags, and what it drags must not end
+      // up selected too.
+      if (dragGesture.gestureInfo.started) {
+        return;
+      }
+      // Text the page says is not selectable stays not selectable: a
+      // programmatic selection goes through `user-select: none` in every
+      // engine — it is a rule about what the USER may start, and the browser
+      // does not read it back when asked directly. Read here so that doing the
+      // browser's work does not also undo what the page asked of it.
+      if (!isSelectable(dblclickEvent.target)) {
+        return;
+      }
+      selectWordAtPoint(dblclickEvent.clientX, dblclickEvent.clientY);
+    };
+    document.addEventListener("dblclick", onDoubleClick, {
+      once: true
+    });
+    removePendingDoubleClickListener = () => {
+      removePendingDoubleClickListener = NOOP;
+      document.removeEventListener("dblclick", onDoubleClick);
+    };
     const cleanup = initializer({
       onMove: dragViaPointer,
       onRelease: releaseViaPointer,
@@ -8662,14 +8881,66 @@ const definePropertyAsReadOnly = (object, propertyName) => {
     value: object[propertyName]
   });
 };
+const NOOP = () => {};
+let removePendingDoubleClickListener = NOOP;
+
+// What a double click selects when the browser is allowed to do it itself: the
+// word around the caret the click lands on.
+const selectWordAtPoint = (x, y) => {
+  const caretRange = createCaretRange(x, y);
+  if (!caretRange) {
+    return;
+  }
+  const selection = window.getSelection();
+  selection.removeAllRanges();
+  selection.addRange(caretRange);
+  // "word" is not a position a Range can be built from — it is a movement the
+  // selection knows how to make, and the caret walking to both of its edges is
+  // what draws the word.
+  if (selection.modify) {
+    selection.modify("move", "backward", "word");
+    selection.modify("extend", "forward", "word");
+  }
+};
+const createCaretRange = (x, y) => {
+  if (document.caretPositionFromPoint) {
+    const caretPosition = document.caretPositionFromPoint(x, y);
+    if (!caretPosition) {
+      return null;
+    }
+    const range = document.createRange();
+    range.setStart(caretPosition.offsetNode, caretPosition.offset);
+    range.collapse(true);
+    return range;
+  }
+  if (document.caretRangeFromPoint) {
+    return document.caretRangeFromPoint(x, y);
+  }
+  return null;
+};
+const isSelectable = element => {
+  if (!element || element.nodeType !== 1) {
+    return true;
+  }
+  const computedStyle = window.getComputedStyle(element);
+  const userSelect = computedStyle.userSelect || computedStyle.webkitUserSelect;
+  return userSelect !== "none";
+};
+const collapseSelection = () => {
+  const selection = window.getSelection();
+  if (selection && !selection.isCollapsed) {
+    selection.removeAllRanges();
+  }
+};
 
 installImportMetaCssBuild(import.meta);/**
  * When a press becomes a drag.
  *
  * A pointer going down on a draggable element is ambiguous — it may be a click,
  * a text selection, a scroll, or a drag — and starting the gesture right away
- * would steal all the others. This module owns the wait that resolves the
- * ambiguity, and only then hands over to the real gesture.
+ * would steal all the others. This module picks which signal resolves the
+ * ambiguity for the pointer at hand, and only then hands over to the real
+ * gesture.
  *
  * There is one gesture, with a trigger per pointer:
  * - a dedicated handle ([data-drag-handle]) says it outright: drag on contact
@@ -8822,94 +9093,26 @@ const dragAfterLongPress = (grabEvent, dragGestureInitializer, {
   onPressCancel,
   onPress
 }) => {
-  const {
-    pointerId,
-    clientX,
-    clientY
-  } = grabEvent;
-  const pressCleanupCallbacks = [];
-  const endPress = () => {
-    for (const pressCleanupCallback of pressCleanupCallbacks) {
-      pressCleanupCallback();
-    }
-    pressCleanupCallbacks.length = 0;
-  };
-
-  /*
-   * A press held long enough IS the system's context-menu gesture: Android opens
-   * its menu around 500ms, iOS its callout — both a tenth of a second after the
-   * object has been picked up, landing on top of something the finger is already
-   * carrying.
-   * The listener goes on window, in capture: once the gesture runs, the drag
-   * backdrop covers the page, so the contextmenu event is aimed at the backdrop
-   * and never reaches the element being dragged.
-   * It is removed on release — a right click with a mouse remains a right click.
-   */
-  const preventContextMenu = contextMenuEvent => {
-    contextMenuEvent.preventDefault();
-  };
-  window.addEventListener("contextmenu", preventContextMenu, true);
-  pressCleanupCallbacks.push(() => {
-    window.removeEventListener("contextmenu", preventContextMenu, true);
-  });
-  const countdownCleanupCallbacks = [];
-  const endCountdown = () => {
-    for (const countdownCleanupCallback of countdownCleanupCallbacks) {
-      countdownCleanupCallback();
-    }
-    countdownCleanupCallbacks.length = 0;
-  };
-  const timeout = setTimeout(() => {
-    endCountdown();
-    onPress?.(grabEvent);
-    // Scrolling is taken away by the gesture itself, from the moment it starts
-    // (see markAsStarted in drag_gesture.js) — one place refuses the touchmove,
-    // for every way a drag can begin.
-    const dragGesture = startDragGesture(dragGestureInitializer);
-    if (!dragGesture) {
-      endPress();
-      return;
-    }
-    dragGesture.addReleaseCallback(endPress);
-  }, longPressDelay);
-  countdownCleanupCallbacks.push(() => {
-    clearTimeout(timeout);
-  });
-  const cancelPress = pointerEvent => {
-    endCountdown();
-    endPress();
-    onPressCancel?.(pointerEvent);
-  };
-  const onPointerMove = pointerMoveEvent => {
-    if (pointerMoveEvent.pointerId !== pointerId) {
-      return;
-    }
-    const xDrift = Math.abs(pointerMoveEvent.clientX - clientX);
-    const yDrift = Math.abs(pointerMoveEvent.clientY - clientY);
-    if (xDrift < longPressSlop && yDrift < longPressSlop) {
-      return;
-    }
-    // The finger is going somewhere: it is scrolling the page, or running down
-    // the list. Letting the countdown survive would unhook an object in passing.
-    cancelPress(pointerMoveEvent);
-  };
-  const onPointerEnd = pointerEndEvent => {
-    if (pointerEndEvent.pointerId !== pointerId) {
-      return;
+  waitForPressHeld(grabEvent, {
+    delay: longPressDelay,
+    slop: longPressSlop,
+    onPressStart,
+    onPressCancel,
+    onPressHeld: (pressEvent, {
+      endPress
+    }) => {
+      onPress?.(pressEvent);
+      // Scrolling is taken away by the gesture itself, from the moment it starts
+      // (see markAsStarted in drag_gesture.js) — one place refuses the touchmove,
+      // for every way a drag can begin.
+      const dragGesture = startDragGesture(dragGestureInitializer);
+      if (!dragGesture) {
+        endPress();
+        return;
+      }
+      dragGesture.addReleaseCallback(endPress);
     }
-    cancelPress(pointerEndEvent);
-  };
-  // On window rather than on the element: the finger can leave it, and the
-  // element itself can be taken out of the document while the press is waiting.
-  window.addEventListener("pointermove", onPointerMove);
-  window.addEventListener("pointerup", onPointerEnd);
-  window.addEventListener("pointercancel", onPointerEnd);
-  countdownCleanupCallbacks.push(() => {
-    window.removeEventListener("pointermove", onPointerMove);
-    window.removeEventListener("pointerup", onPointerEnd);
-    window.removeEventListener("pointercancel", onPointerEnd);
   });
-  onPressStart?.(grabEvent);
 };
 
 /**
@@ -10609,40 +10812,266 @@ const roundForConstraints = (value) => {
   return Math.round(value * 100) / 100;
 };
 
-const applyStickyFrontiersToAutoScrollArea = (
-  autoScrollArea,
-  { direction, scrollContainer, dragName },
+/**
+ * Detects the drop target based on what element is actually under the mouse cursor.
+ * Uses document.elementsFromPoint() to respect visual stacking order naturally.
+ *
+ * @param {Object} gestureInfo - Gesture information
+ * @param {Element[]} targetElements - Array of potential drop target elements
+ * @param {object} [options]
+ * @param {Element} [options.dragElement] - The element being dragged. When provided and
+ *   `fallbackToEdge` is true, used to compute the fallback rect.
+ * @param {boolean} [options.fallbackToEdge=false] - When true and the drag element does
+ *   not intersect any target, falls back to the first item (if above all items) or the
+ *   last item (if below all items) so there is always a valid drop target at list edges.
+ * @returns {Object|null} Drop target info with elementSide or null if no valid target found
+ */
+const getDropTargetInfo = (
+  gestureInfo,
+  targetElements,
+  { fallbackToEdge = false } = {},
 ) => {
-  let { left, right, top, bottom } = autoScrollArea;
-
-  if (direction.x) {
-    const horizontalStickyFrontiers = createStickyFrontierOnAxis(
-      scrollContainer,
-      {
-        name: dragName,
-        scrollContainer,
-        primarySide: "left",
-        oppositeSide: "right",
-      },
-    );
-    for (const horizontalStickyFrontier of horizontalStickyFrontiers) {
-      const { side, bounds, element } = horizontalStickyFrontier;
-      if (side === "left") {
-        if (bounds.right <= left) {
-          continue;
-        }
-        left = bounds.right;
-        continue;
-      }
-      // right
-      if (bounds.left >= right) {
-        continue;
-      }
-      right = bounds.left;
+  const dragElement = gestureInfo.elementImpacted || gestureInfo.element;
+  const dragElementRect = dragElement.getBoundingClientRect();
+  const intersectingTargets = [];
+  let someTargetIsCol;
+  let someTargetIsTr;
+  for (const targetElement of targetElements) {
+    const targetRect = targetElement.getBoundingClientRect();
+    if (!rectangleAreIntersecting(dragElementRect, targetRect)) {
       continue;
     }
-  }
-
+    if (!someTargetIsCol && targetElement.tagName === "COL") {
+      someTargetIsCol = true;
+    }
+    if (!someTargetIsTr && targetElement.tagName === "TR") {
+      someTargetIsTr = true;
+    }
+    intersectingTargets.push(targetElement);
+  }
+
+  if (intersectingTargets.length === 0) {
+    if (fallbackToEdge) {
+      const dragElement = gestureInfo.elementImpacted || gestureInfo.element;
+      const dragElementRect = dragElement.getBoundingClientRect();
+      const firstItem = targetElements[0];
+      const lastItem = targetElements[targetElements.length - 1];
+      if (
+        firstItem &&
+        dragElementRect.bottom < firstItem.getBoundingClientRect().top
+      ) {
+        // Drag element is above all items → treat as hovering the first item from the top.
+        return {
+          element: firstItem,
+          elementSide: { x: "start", y: "start" },
+          index: 0,
+          intersectingIndex: 0,
+          intersecting: [firstItem],
+        };
+      }
+      if (
+        lastItem &&
+        dragElementRect.top > lastItem.getBoundingClientRect().bottom
+      ) {
+        // Drag element is below all items → treat as hovering the last item from the bottom.
+        return {
+          element: lastItem,
+          elementSide: { x: "start", y: "end" },
+          index: targetElements.length - 1,
+          intersectingIndex: 0,
+          intersecting: [lastItem],
+        };
+      }
+    }
+    return null;
+  }
+
+  const dragElementCenterX = dragElementRect.left + dragElementRect.width / 2;
+  const dragElementCenterY = dragElementRect.top + dragElementRect.height / 2;
+  // Clamp coordinates to viewport to avoid issues with elementsFromPoint
+  const viewportWidth = document.documentElement.clientWidth;
+  const viewportHeight = document.documentElement.clientHeight;
+  const clientX =
+    dragElementCenterX < 0
+      ? 0
+      : dragElementCenterX > viewportWidth
+        ? viewportWidth - 1
+        : dragElementCenterX;
+  const clientY =
+    dragElementCenterY < 0
+      ? 0
+      : dragElementCenterY > viewportHeight
+        ? viewportHeight - 1
+        : dragElementCenterY;
+
+  // Find the first target element in the stack (topmost visible target)
+  const elementsUnderDragElement = document.elementsFromPoint(clientX, clientY);
+  let targetElement = null;
+  let targetIndex = -1;
+  let intersectingIndex = -1;
+  for (const element of elementsUnderDragElement) {
+    // First, check if the element itself is a target
+    const directIndex = intersectingTargets.indexOf(element);
+    if (directIndex !== -1) {
+      targetElement = element;
+      intersectingIndex = directIndex;
+      break;
+    }
+    // Special case: if element is <td> or <th> and not in targets,
+    // try to find its corresponding <col> element
+    if (!isTableCell(element)) {
+      continue;
+    }
+    try_col: {
+      if (!someTargetIsCol) {
+        break try_col;
+      }
+      const tableCellCol = findTableCellCol(element);
+      if (!tableCellCol) {
+        break try_col;
+      }
+      const colIndex = intersectingTargets.indexOf(tableCellCol);
+      if (colIndex === -1) {
+        break try_col;
+      }
+      targetElement = tableCellCol;
+      intersectingIndex = colIndex;
+      break;
+    }
+    try_tr: {
+      if (!someTargetIsTr) {
+        break try_tr;
+      }
+      const tableRow = element.closest("tr");
+      const rowIndex = targetElements.indexOf(tableRow);
+      if (rowIndex === -1) {
+        break try_tr;
+      }
+      targetElement = tableRow;
+      intersectingIndex = intersectingTargets.indexOf(tableRow);
+      break;
+    }
+  }
+  if (!targetElement) {
+    targetElement = intersectingTargets[0];
+    intersectingIndex = 0;
+  }
+  targetIndex = targetElements.indexOf(targetElement);
+
+  // Determine position within the target for both axes.
+  //
+  // Use the leading edge of the dragged element (in the direction of movement)
+  // compared against the target's center:
+  //   - Dragging down: "after" as soon as the bottom crosses the target center.
+  //   - Dragging up:   "before" as soon as the top crosses the target center.
+  //   - Not moving: center-vs-center fallback.
+  //
+  // This gives consistent, predictable thresholds regardless of element size.
+  const targetRect = targetElement.getBoundingClientRect();
+  const targetCenterX = targetRect.left + targetRect.width / 2;
+  const targetCenterY = targetRect.top + targetRect.height / 2;
+  const { intentGoingDown, intentGoingUp, intentGoingRight, intentGoingLeft } =
+    gestureInfo;
+  let sideY;
+  if (intentGoingDown) {
+    sideY = dragElementRect.bottom > targetCenterY ? "end" : "start";
+  } else if (intentGoingUp) {
+    sideY = dragElementRect.top < targetCenterY ? "start" : "end";
+  } else {
+    sideY = dragElementCenterY < targetCenterY ? "start" : "end";
+  }
+  let sideX;
+  if (intentGoingRight) {
+    sideX = dragElementRect.right > targetCenterX ? "end" : "start";
+  } else if (intentGoingLeft) {
+    sideX = dragElementRect.left < targetCenterX ? "start" : "end";
+  } else {
+    sideX = dragElementCenterX < targetCenterX ? "start" : "end";
+  }
+  const result = {
+    // NOTE: avoid relying on `index` in application code. The targetElements
+    // array may be dynamically filtered (e.g. excluding the grabbed element),
+    // making this index inconsistent with the full list. Use `element` instead
+    // and look up its position yourself from your own data source.
+    index: targetIndex,
+    element: targetElement,
+    elementSide: {
+      x: sideX,
+      y: sideY,
+    },
+    // Index within the intersecting subset — could be useful to know how many
+    // elements were overlapping, but rarely needed in practice
+    intersectingIndex,
+    intersecting: intersectingTargets,
+  };
+  return result;
+};
+
+const rectangleAreIntersecting = (r1, r2) => {
+  return !(
+    r2.left > r1.right ||
+    r2.right < r1.left ||
+    r2.top > r1.bottom ||
+    r2.bottom < r1.top
+  );
+};
+
+const isTableCell = (el) => {
+  return el.tagName === "TD" || el.tagName === "TH";
+};
+
+/**
+ * Find the corresponding <col> element for a given <td> or <th> cell
+ * @param {Element} cellElement - The <td> or <th> element
+ * @param {Element[]} targetColElements - Array of <col> elements to search in
+ * @returns {Element|null} The corresponding <col> element or null if not found
+ */
+const findTableCellCol = (cellElement) => {
+  const table = cellElement.closest("table");
+  const colgroup = table.querySelector("colgroup");
+  if (!colgroup) {
+    return null;
+  }
+  const cols = colgroup.querySelectorAll("col");
+  const columnIndex = cellElement.cellIndex;
+  const correspondingCol = cols[columnIndex];
+  return correspondingCol;
+};
+
+const applyStickyFrontiersToAutoScrollArea = (
+  autoScrollArea,
+  { direction, scrollContainer, dragName },
+) => {
+  let { left, right, top, bottom } = autoScrollArea;
+
+  if (direction.x) {
+    const horizontalStickyFrontiers = createStickyFrontierOnAxis(
+      scrollContainer,
+      {
+        name: dragName,
+        scrollContainer,
+        primarySide: "left",
+        oppositeSide: "right",
+      },
+    );
+    for (const horizontalStickyFrontier of horizontalStickyFrontiers) {
+      const { side, bounds, element } = horizontalStickyFrontier;
+      if (side === "left") {
+        if (bounds.right <= left) {
+          continue;
+        }
+        left = bounds.right;
+        continue;
+      }
+      // right
+      if (bounds.left >= right) {
+        continue;
+      }
+      right = bounds.left;
+      continue;
+    }
+  }
+
   if (direction.y) {
     const verticalStickyFrontiers = createStickyFrontierOnAxis(
       scrollContainer,
@@ -10727,34 +11156,355 @@ const createStickyFrontierOnAxis = (
   return matchingStickyFrontiers;
 };
 
-const dragStyleController = createStyleController("drag_to_move");
-
-/**
- * Creates a gesture controller that moves elements via drag.
+installImportMetaCssBuild(import.meta);/**
+ * A drag, and what it is FOR.
  *
- * Wraps `createDragGestureController` and adds:
- * - Element translation via CSS transform (translate only; other existing transforms are preserved)
- * - Auto-scroll while dragging near scroll-container edges
- * - Constraints (area boundaries, obstacle elements)
+ * What a hand does is always the same — pick the thing up, carry it, let go — so
+ * the gesture is not what distinguishes these. What distinguishes them is the
+ * outcome the caller asked for, and that is what `startDragTo` takes:
  *
- * The returned controller exposes a `grab(options)` / `grabViaPointer(event, options)` method.
- * Key grab options:
- * - `element`: the element whose position drives layout calculations (scroll-container detection,
- *   constraints, auto-scroll). Sets `data-grabbed` during the drag.
- * - `referenceElement`: optional sticky-frontier / obstacle reference, defaults to `element`.
- * - `elementToMove`: optional different element to actually translate (e.g. a drag clone).
- *   If omitted, `element` is translated. The translate is read from `dragStyleController`
- *   at grab time so any pre-existing translate is accumulated rather than reset.
+ * - **move**: it stays where it was put. The element ITSELF travels and keeps the
+ *   place the hand gave it.
+ * - **reorder**: it takes a place in a list. A COPY travels while the original
+ *   keeps its place in the layout, which is what makes the gesture possible at
+ *   all — nothing else moves while the hand looks for a place, so there is a
+ *   stable row of items to look between.
+ * - **toss**: it is gotten rid of. The same copy, for the opposite reason: the
+ *   original stays until the answer says it is really gone.
+ * - **land**: it comes down ON something. Also a copy, and the closest to
+ *   `reorder` — the difference is what a target IS: a row of a list is a place
+ *   BETWEEN two others, whereas a square of a board is a place of its own, which
+ *   may already be taken. So nothing is inserted and nothing is a no-op: the
+ *   answer is "this one came down on that one", and what that means (take the
+ *   place, swap the two, refuse) is the caller's.
  *
- * A `transform` already on the moved element (rotate, scale…) is preserved and does
- * not disturb the movement. `rotate` and `scale` set as individual CSS properties do:
- * they apply outside `transform`, where nothing the gesture writes can reach them —
- * put those on a child element instead (a warning says so in dev).
+ * The caller lists which outcomes ITS element can answer, and only the machinery
+ * those need runs: no copy for a move, no drop hint for something that can only be
+ * thrown away, no landing looked for where nothing lands. `reorder` and `toss`
+ * combine (dropped on a row, or thrown off the screen); `move` and `reorder` cannot
+ * both be true of one release, and the caller is the one who must not ask for both.
  *
- * @param {object} [options]
- * @param {boolean} [options.stickyFrontiers=true]
- *   Shrinks the auto-scroll area at sticky boundaries (elements with `data-sticky-left` /
- *   `data-sticky-top`).
+ * `createDragToMoveGestureController` below is the layer under all of that — the
+ * translation, the auto-scroll, the constraints — and stays usable on its own for
+ * anything that is none of the three (a table column being dragged, a sticky
+ * frontier being moved).
+ */
+const dragStyleController = createStyleController("drag_to_move");
+
+// How long the copy takes to leave the screen, and to come back. Written into the
+// CSS below from here: the flight has to be waited for, and a duration living only
+// in a stylesheet is a timing JS cannot read reliably.
+const TOSS_DURATION_MS = 320;
+// Far enough to be off any screen, in the direction the hand was going.
+const TOSS_DISTANCE = 900;
+const css$1 = /* css */`
+  /* IT COSTS THE LIST NOTHING: the hint lands on the edge of a row, which for
+     the last one is the very bottom of the scroll area — a line taking up room
+     there would push the scrollable area a few pixels further and make a
+     scrollbar appear (or hide the hint under it) exactly when one is trying to
+     drop at the end. Being fixed is what avoids it: a fixed box has the
+     viewport as containing block, so it is left out of the scrollable overflow
+     of every ancestor and can overhang the list freely. Same for the clone it
+     accompanies. */
+  .navi_drop_hint {
+    /* A popover, so it lands in the top layer: no z-index to bid against the
+       page, and nothing it can be hidden behind. Shown BEFORE the clone, which
+       is what puts the clone above it — the top layer stacks in the order
+       things are shown, and the item being carried should pass over the line
+       rather than under it. The UA styles for [popover] have to be undone:
+       inset:0, margin:auto, a border and a background of its own. */
+    position: fixed;
+    inset: auto;
+    top: var(--drop-hint-y);
+    left: calc(var(--drop-target-left) + var(--drop-hint-margin-x, 0px));
+    display: none;
+    box-sizing: border-box;
+    width: calc(var(--drop-target-width) - 2 * var(--drop-hint-margin-x, 0px));
+    height: var(--drop-hint-size, 3px);
+    margin: 0;
+    padding: 0;
+    color: inherit;
+    background: var(--drop-hint-background-color, #4476ff);
+    border: none;
+    border-radius: var(--drop-hint-border-radius, 2px);
+    transform: translateY(-50%);
+    pointer-events: none;
+    overflow: visible;
+  }
+  .navi_drop_hint[data-drop-edge]:popover-open {
+    display: block;
+  }
+  .navi_drop_hint[data-drop-edge="top"] {
+    --drop-hint-y: calc(
+      var(--drop-target-top) - var(--drop-hint-margin-y, 0px)
+    );
+  }
+  .navi_drop_hint[data-drop-edge="bottom"] {
+    --drop-hint-y: calc(
+      var(--drop-target-bottom) + var(--drop-hint-margin-y, 0px)
+    );
+  }
+  /* A chevron at each end, pointing in: the line alone is easy to lose against
+     a list of borders and separators, two arrows read as "here" at a glance
+     (same idea as the table's column drop preview). They overhang the line,
+     which costs nothing to a box left out of the scrollable area — and the more
+     they stick out, the easier they are to spot. */
+  .navi_drop_hint_cap {
+    position: absolute;
+    top: 50%;
+    display: flex;
+    color: var(--drop-hint-background-color, #4476ff);
+    translate: 0 -50%;
+  }
+  .navi_drop_hint_cap svg {
+    width: var(--drop-hint-arrow-size, 11px);
+    height: var(--drop-hint-arrow-size, 11px);
+  }
+  .navi_drop_hint_cap[data-side="start"] {
+    left: calc(-1 * var(--drop-hint-arrow-size, 11px));
+    rotate: -90deg;
+  }
+  .navi_drop_hint_cap[data-side="end"] {
+    right: calc(-1 * var(--drop-hint-arrow-size, 11px));
+    rotate: 90deg;
+  }
+
+  /* WHERE IT LANDS, when landing is ON a thing rather than between two: the
+     place itself is lit up, because there is no gap to draw a line in. Fixed
+     and in the top layer for the same reasons as the line above. */
+  .navi_drop_surface {
+    position: fixed;
+    inset: auto;
+    top: var(--drop-target-top);
+    left: var(--drop-target-left);
+    display: none;
+    box-sizing: border-box;
+    width: var(--drop-target-width);
+    height: var(--drop-target-height);
+    margin: 0;
+    padding: 0;
+    color: inherit;
+    background: var(--drop-surface-background-color, rgba(68, 118, 255, 0.16));
+    border: var(--drop-surface-border-width, 2px) solid
+      var(--drop-surface-border-color, #4476ff);
+    border-radius: var(--drop-surface-border-radius, 6px);
+    pointer-events: none;
+    overflow: visible;
+  }
+  .navi_drop_surface[data-drop-over]:popover-open {
+    display: block;
+  }
+
+  /* WHO CAN START A DRAG, said in the cursor.
+     A handle exists only to drag, so it shows the hand. A source does not, and
+     the gesture must not claim its cursor: it drags only once the intent shows
+     (a few pixels of travel, or a long press), a plain click on it stays a
+     click, and it is usually something else FIRST — a link, a card one opens.
+     The cursor says what the element is, and a hand insisting on the one thing
+     it can also be would talk over that. So it is left alone — default, and not
+     an I-beam, because dragging across the text does not select it (the gesture
+     takes the pointer; see the selectstart refused in drag_gesture.js) — and
+     whoever puts the drag there asks for the hand when a grab really is the
+     first thing the element offers.
+     An opted-out area keeps both its cursor and its selection, and never starts
+     a drag (see the check in startDragTo).
+     Controls inside a source keep their own cursor: cursor is inherited, and
+     anything setting its own (a button's pointer) wins on itself.
+     Only the resting cursor is set here: what it becomes once a drag is under
+     way belongs to the gesture (see the backdrop in drag_gesture.js), the only
+     thing that knows a drag actually started. */
+  [data-drag-handle] {
+    cursor: grab;
+  }
+  [data-drag-source] {
+    cursor: default;
+  }
+  [data-drag-ignore] {
+    cursor: auto;
+  }
+
+  [navi-drag-clone-source] {
+    visibility: hidden;
+  }
+
+  [navi-drag-clone-wrapper] {
+    /* Also a popover (see .navi_drop_hint): in the top layer it is over the
+       page whatever the page's own stacking is, and the coordinates it is
+       given are viewport ones — which is what the pointer carrying it works
+       in. Same UA-style reset as the hint. */
+    position: fixed;
+    inset: auto;
+    top: var(--clone-top);
+    left: var(--clone-left);
+    box-sizing: border-box;
+    width: var(--clone-width);
+    height: var(--clone-height);
+    margin: 0;
+    padding: 0;
+    color: inherit;
+    background: transparent;
+    border: none;
+    /* Carries the chain down to the copy, for an item whose own radius is an
+       "inherit" from the list around it. */
+    border-radius: inherit;
+    opacity: 0.95;
+    pointer-events: none;
+    /* Nothing in a copy being carried by a pointer is text to select: the
+       selection belongs to the original, which is still in the page. This is the
+       one place the rule is unconditional — an element that can be dragged is
+       usually selectable too (a link is both), and forcing it there would take
+       away a selection made from outside the element.  */
+    user-select: none;
+    overflow: visible;
+  }
+
+  /* Ce qui a été lancé: il continue dans la direction du geste jusqu'à sortir de
+     l'écran, et revient par le même chemin si la réponse refuse. */
+  [navi-drag-clone-wrapper][data-tossed] {
+    transition:
+      translate ${TOSS_DURATION_MS}ms ease-out,
+      opacity ${TOSS_DURATION_MS}ms ease-out;
+  }
+  [navi-drag-clone-wrapper][data-tossed="away"] {
+    opacity: 0;
+  }
+
+  [navi-drag-clone] {
+    /* Cast by the copy itself rather than by the box around it, so it takes the
+       shape of the thing — a rounded row throws a rounded shadow. Its value is a
+       var read on the copy, which IS the dragged element: what being carried
+       looks like belongs to whoever owns the thing — a row lifted off a list
+       wants this shadow, a sheet of paper leaving a board wants none, and its
+       shade is a theme's business either way. */
+    box-shadow: var(--drag-clone-shadow, 0 12px 28px rgba(0, 0, 0, 0.22));
+    transform: scale(var(--drag-clone-scale, 1.03));
+    transform-origin: var(--drag-origin);
+    transition:
+      transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
+      box-shadow 0.15s ease;
+  }
+
+  @starting-style {
+    [navi-drag-clone] {
+      box-shadow: none;
+      transform: scale(1);
+    }
+  }
+`;
+// At module scope, not inside startDragTo: the cursor rules above say who
+// can start a drag, and they have to be true BEFORE anyone drags anything.
+import.meta.css = [css$1, "@jsenv/dom/src/interaction/drag/drag_to.js"];
+
+/**
+ * Starts a drag-to-reorder interaction on a list item.
+ *
+ * Handles the full reorder UX:
+ * - Activates only once the intent is established — a short movement with a mouse, a long
+ *   press with a finger (see `dragAfterIntent`), so that neither a click nor a scroll
+ *   reorders anything by accident.
+ * - Clones the grabbed element and moves the clone while the original stays hidden in place
+ *   (keeps the layout intact so other items don't shift during the drag).
+ * - The clone and the drop-hint live in the dragged element's own parent, so the CSS vars
+ *   that dress them (`--drag-clone-shadow`, `--drop-hint-size`, …) reach them by plain
+ *   inheritance, and so do the rules the list writes for its items.
+ * - Shows a drop-hint line indicating where the item will land.
+ * - Drop-target detection is intersection-based: the clone's bounding rect is compared
+ *   against every item that matches `itemSelector` in the scroll container.
+ * - No-ops are filtered: releasing on the grabbed element itself, or in a position that
+ *   would leave it at exactly the same index, never triggers `onReorder`.
+ * - On a valid drop, the clone animates to the drop position via the View Transitions API,
+ *   `onReorder` is called inside the transition callback so the DOM update and the animation
+ *   are captured together, then the clone is removed.
+ * - On a cancelled drop (pointer released with no valid target), the clone is removed
+ *   immediately without calling `onReorder`.
+ *
+ * IDs are used as the bridge between DOM elements and JS state because:
+ * - Not all DOM elements matching `itemSelector` may be valid drop targets
+ *   (holes in the structure), so DOM indices don't reliably map to state indices.
+ * - Virtual lists render fewer DOM nodes than the total item count, so
+ *   DOM-index-based counting would be wrong.
+ *
+ * Any option not listed below is forwarded to `createDragToMoveGestureController`
+ * (`areaConstraint`, `autoScrollAreaPadding`, `stickyFrontiers`…), except
+ * `releasePositionEffect`, always `"manual"` here: what moves is the clone, and it
+ * is removed on release, so there is no position to commit or cancel.
+ *
+ * @param {PointerEvent} event
+ *   The `pointerdown` event that may become a reorder.
+ * @param {object} options
+ * @param {Element} [options.draggedElement=event.currentTarget]
+ *   The list item to drag.
+ * @param {Element} [options.containerElement=draggedElement.parentElement]
+ *   Element searched with `itemSelector` to find the items to drop between.
+ * @param {string} [options.itemSelector]
+ *   CSS selector that matches all list items inside `containerElement`.
+ *   Used for drop-target detection and no-op filtering. Left out, nothing is a
+ *   drop target: no hint is drawn and no reorder can be answered — which is what
+ *   a drag that only ever throws the thing away asks for.
+ * @param {function} options.getItemId
+ *   Returns the stable ID for a given DOM element.
+ *   Signature: `getItemId(element) → id`.
+ * @param {function} options.onReorder
+ *   Called when the user drops the item in a new position.
+ *   Signature: `onReorder(fromId, toId, syncCloneWithDropTarget)`.
+ *   - `fromId`: stable ID of the dragged item.
+ *   - `toId`: stable ID of the item to insert before, or `null` to append at the end.
+ *   - `syncCloneWithDropTarget`: call it synchronously inside a
+ *     `document.startViewTransition` callback, next to the DOM mutation, so the
+ *     clone is captured at its landing position.
+ * @param {(detail: {gestureInfo: object, dropTarget: Element|null}) => "reorder"|"toss"|"cancel"} [options.resolveDrop]
+ *   What THIS release means, when the answer is not simply "a target was found or
+ *   not": the same grab can be meant to reorder or to get rid of the thing, and
+ *   only the caller knows which — far and fast is a throw, over a row is a move.
+ *   Left out, a drop target reorders and anything else is cancelled.
+ * @param {(detail: {gestureInfo: object}) => Promise|void} [options.onToss]
+ *   The release was a throw. The clone leaves the screen the way it was thrown
+ *   while this runs; it comes back if the promise rejects, because the thing still
+ *   exists and the screen has to say so.
+ * @param {object} [options.direction={ x: false, y: true }]
+ *   Axes along which dragging is allowed. Passed to `createDragToMoveGestureController`.
+ * @param {number} [options.threshold=5]
+ *   Distance (px) a mouse must travel before the press becomes a drag.
+ * @param {boolean|"if-touch"} [options.longPress="if-touch"]
+ *   Which pointers start the drag by holding still instead of by travelling.
+ * @param {number} [options.longPressDelay=400]
+ *   How long (ms) such a pointer must stay down.
+ * @param {number} [options.longPressSlop=8]
+ *   How far (px) it may drift during that wait before the press is abandoned.
+ * @param {function} [options.onPressStart]
+ *   The pointer went down and the wait began (a cue that the press counts).
+ * @param {function} [options.onPressCancel]
+ *   The pointer moved or lifted before the wait was over.
+ * @param {function} [options.onPress]
+ *   The wait completed and the item is now held (haptics, scale…).
+ */
+
+/**
+ * Creates a gesture controller that moves elements via drag.
+ *
+ * Wraps `createDragGestureController` and adds:
+ * - Element translation via CSS transform (translate only; other existing transforms are preserved)
+ * - Auto-scroll while dragging near scroll-container edges
+ * - Constraints (area boundaries, obstacle elements)
+ *
+ * The returned controller exposes a `grab(options)` / `grabViaPointer(event, options)` method.
+ * Key grab options:
+ * - `element`: the element whose position drives layout calculations (scroll-container detection,
+ *   constraints, auto-scroll). Sets `data-grabbed` during the drag.
+ * - `referenceElement`: optional sticky-frontier / obstacle reference, defaults to `element`.
+ * - `elementToMove`: optional different element to actually translate (e.g. a drag clone).
+ *   If omitted, `element` is translated. The translate is read from `dragStyleController`
+ *   at grab time so any pre-existing translate is accumulated rather than reset.
+ *
+ * A `transform` already on the moved element (rotate, scale…) is preserved and does
+ * not disturb the movement. `rotate` and `scale` set as individual CSS properties do:
+ * they apply outside `transform`, where nothing the gesture writes can reach them —
+ * put those on a child element instead (a warning says so in dev).
+ *
+ * @param {object} [options]
+ * @param {boolean} [options.stickyFrontiers=true]
+ *   Shrinks the auto-scroll area at sticky boundaries (elements with `data-sticky-left` /
+ *   `data-sticky-top`).
  * @param {number} [options.autoScrollAreaPadding=0]
  *   Extra padding (px) subtracted from each edge of the auto-scroll trigger area.
  * @param {string|object|function} [options.areaConstraint="scroll"]
@@ -10804,12 +11554,13 @@ const createDragToMoveGestureController = ({
   cancelAnimationEasing = "ease-out",
   ...options
 } = {}) => {
-  const initGrabToMoveElement = (
-    dragGesture,
-    { element, referenceElement, elementToMove, convertScrollablePosition },
-  ) => {
+  const initGrabToMoveElement = (dragGesture, {
+    element,
+    referenceElement,
+    elementToMove,
+    convertScrollablePosition
+  }) => {
     const scrollContainer = dragGesture.gestureInfo.scrollContainer;
-
     const direction = dragGesture.gestureInfo.direction;
     // elementImpacted is either an externally provided elementToMove (e.g. a drag clone)
     const elementImpacted = elementToMove || element;
@@ -10817,13 +11568,9 @@ const createDragToMoveGestureController = ({
     // (e.g. a drag clone passed by the caller) or the element itself.
     // Capture any pre-existing translate so we can accumulate on top of it
     // rather than resetting it to zero on the first drag event.
-    const transformAtGrab = dragStyleController.getUnderlyingValue(
-      elementImpacted,
-      "transform",
-    );
+    const transformAtGrab = dragStyleController.getUnderlyingValue(elementImpacted, "transform");
     const translateXAtGrab = transformAtGrab.translateX;
     const translateYAtGrab = transformAtGrab.translateY;
-
     const cancelPosition = () => {
       dragStyleController.clear(elementImpacted);
     };
@@ -10833,7 +11580,7 @@ const createDragToMoveGestureController = ({
     // animation has only to bridge the two.
     const cancelPositionAnimated = ({
       duration = cancelAnimationDuration,
-      easing = cancelAnimationEasing,
+      easing = cancelAnimationEasing
     } = {}) => {
       const transformWhileHeld = getComputedStyle(elementImpacted).transform;
       cancelPosition();
@@ -10843,10 +11590,14 @@ const createDragToMoveGestureController = ({
       }
       // No fill: the element already sits at its resting transform, the
       // animation only replays the way back to it.
-      return elementImpacted.animate(
-        [{ transform: transformWhileHeld }, { transform: transformAtRest }],
-        { duration, easing },
-      );
+      return elementImpacted.animate([{
+        transform: transformWhileHeld
+      }, {
+        transform: transformAtRest
+      }], {
+        duration,
+        easing
+      });
     };
     const commitPosition = () => {
       dragStyleController.commit(elementImpacted);
@@ -10854,7 +11605,6 @@ const createDragToMoveGestureController = ({
     dragGesture.gestureInfo.cancelPosition = cancelPosition;
     dragGesture.gestureInfo.cancelPositionAnimated = cancelPositionAnimated;
     dragGesture.gestureInfo.commitPosition = commitPosition;
-
     dragGesture.addReleaseCallback(() => {
       if (releasePositionEffect === "cancel") {
         cancelPosition();
@@ -10865,7 +11615,6 @@ const createDragToMoveGestureController = ({
       }
       // "manual": caller handles cleanup, do nothing.
     });
-
     let elementWidth;
     let elementHeight;
     {
@@ -10877,7 +11626,6 @@ const createDragToMoveGestureController = ({
       updateElementDimension();
       dragGesture.addBeforeDragCallback(updateElementDimension);
     }
-
     let scrollArea;
     {
       // Snapshot at grab time so that DOM mutations during dragging
@@ -10886,10 +11634,9 @@ const createDragToMoveGestureController = ({
         left: 0,
         top: 0,
         right: scrollContainer.scrollWidth,
-        bottom: scrollContainer.scrollHeight,
+        bottom: scrollContainer.scrollHeight
       };
     }
-
     let scrollport;
     let autoScrollArea;
     {
@@ -10900,14 +11647,11 @@ const createDragToMoveGestureController = ({
         scrollport = getScrollport(scrollBox, scrollContainer);
         autoScrollArea = scrollport;
         if (stickyFrontiers) {
-          autoScrollArea = applyStickyFrontiersToAutoScrollArea(
-            autoScrollArea,
-            {
-              scrollContainer,
-              direction,
-              // dragGestureName,
-            },
-          );
+          autoScrollArea = applyStickyFrontiersToAutoScrollArea(autoScrollArea, {
+            scrollContainer,
+            direction
+            // dragGestureName,
+          });
         }
         if (autoScrollAreaPadding > 0) {
           autoScrollArea = {
@@ -10918,7 +11662,7 @@ const createDragToMoveGestureController = ({
             left: autoScrollArea.left + autoScrollAreaPadding,
             top: autoScrollArea.top + autoScrollAreaPadding,
             right: autoScrollArea.right - autoScrollAreaPadding,
-            bottom: autoScrollArea.bottom - autoScrollAreaPadding,
+            bottom: autoScrollArea.bottom - autoScrollAreaPadding
           };
         }
       };
@@ -10941,97 +11685,77 @@ const createDragToMoveGestureController = ({
       obstacleAttributeName,
       showConstraintFeedbackLine,
       showDebugMarkers,
-      referenceElement,
+      referenceElement
     });
-    dragGesture.addBeforeDragCallback(
-      (layoutRequested, currentLayout, limitLayout, { dragEvent }) => {
-        dragConstraints.applyConstraints(
-          layoutRequested,
-          currentLayout,
-          limitLayout,
-          {
-            elementWidth,
-            elementHeight,
-            scrollArea,
-            scrollport,
-            hasCrossedScrollportLeftOnce,
-            hasCrossedScrollportTopOnce,
-            autoScrollArea,
-            dragEvent,
-          },
-        );
-      },
-    );
-
-    const dragToMove = (gestureInfo) => {
-      const { isGoingDown, isGoingUp, isGoingLeft, isGoingRight, layout } =
-        gestureInfo;
+    dragGesture.addBeforeDragCallback((layoutRequested, currentLayout, limitLayout, {
+      dragEvent
+    }) => {
+      dragConstraints.applyConstraints(layoutRequested, currentLayout, limitLayout, {
+        elementWidth,
+        elementHeight,
+        scrollArea,
+        scrollport,
+        hasCrossedScrollportLeftOnce,
+        hasCrossedScrollportTopOnce,
+        autoScrollArea,
+        dragEvent
+      });
+    });
+    const dragToMove = gestureInfo => {
+      const {
+        isGoingDown,
+        isGoingUp,
+        isGoingLeft,
+        isGoingRight,
+        layout
+      } = gestureInfo;
       const left = layout.left;
       const top = layout.top;
       const right = left + elementWidth;
       const bottom = top + elementHeight;
-
       {
-        hasCrossedScrollportLeftOnce =
-          hasCrossedScrollportLeftOnce || left < scrollport.left;
-        hasCrossedScrollportTopOnce =
-          hasCrossedScrollportTopOnce || top < scrollport.top;
-
-        const getScrollMove = (axis) => {
+        hasCrossedScrollportLeftOnce = hasCrossedScrollportLeftOnce || left < scrollport.left;
+        hasCrossedScrollportTopOnce = hasCrossedScrollportTopOnce || top < scrollport.top;
+        const getScrollMove = axis => {
           const isGoingPositive = axis === "x" ? isGoingRight : isGoingDown;
           if (isGoingPositive) {
             const elementEnd = axis === "x" ? right : bottom;
-            const autoScrollAreaEnd =
-              axis === "x" ? autoScrollArea.right : autoScrollArea.bottom;
-
+            const autoScrollAreaEnd = axis === "x" ? autoScrollArea.right : autoScrollArea.bottom;
             if (elementEnd <= autoScrollAreaEnd) {
               return 0;
             }
             const scrollAmountNeeded = elementEnd - autoScrollAreaEnd;
             return scrollAmountNeeded;
           }
-
           const isGoingNegative = axis === "x" ? isGoingLeft : isGoingUp;
           if (!isGoingNegative) {
             return 0;
           }
-
           const referenceOrEl = referenceElement || element;
-          const canAutoScrollNegative =
-            axis === "x"
-              ? !referenceOrEl.hasAttribute("data-sticky-left") ||
-                hasCrossedScrollportLeftOnce
-              : !referenceOrEl.hasAttribute("data-sticky-top") ||
-                hasCrossedScrollportTopOnce;
+          const canAutoScrollNegative = axis === "x" ? !referenceOrEl.hasAttribute("data-sticky-left") || hasCrossedScrollportLeftOnce : !referenceOrEl.hasAttribute("data-sticky-top") || hasCrossedScrollportTopOnce;
           if (!canAutoScrollNegative) {
             return 0;
           }
-
           const elementStart = axis === "x" ? left : top;
-          const autoScrollAreaStart =
-            axis === "x" ? autoScrollArea.left : autoScrollArea.top;
+          const autoScrollAreaStart = axis === "x" ? autoScrollArea.left : autoScrollArea.top;
           if (elementStart >= autoScrollAreaStart) {
             return 0;
           }
-
           const scrollAmountNeeded = autoScrollAreaStart - elementStart;
           return -scrollAmountNeeded;
         };
-
         let scrollLeftTarget;
         let scrollTopTarget;
         if (direction.x) {
           const containerScrollLeftMove = getScrollMove("x");
           if (containerScrollLeftMove) {
-            scrollLeftTarget =
-              scrollContainer.scrollLeft + containerScrollLeftMove;
+            scrollLeftTarget = scrollContainer.scrollLeft + containerScrollLeftMove;
           }
         }
         if (direction.y) {
           const containerScrollTopMove = getScrollMove("y");
           if (containerScrollTopMove) {
-            scrollTopTarget =
-              scrollContainer.scrollTop + containerScrollTopMove;
+            scrollTopTarget = scrollContainer.scrollTop + containerScrollTopMove;
           }
         }
         // now we know what to do, do it
@@ -11042,13 +11766,12 @@ const createDragToMoveGestureController = ({
           scrollContainer.scrollTop = scrollTopTarget;
         }
       }
-
       {
-        const { scrollableLeft, scrollableTop } = layout;
-        const [positionedLeft, positionedTop] = convertScrollablePosition(
+        const {
           scrollableLeft,
-          scrollableTop,
-        );
+          scrollableTop
+        } = layout;
+        const [positionedLeft, positionedTop] = convertScrollablePosition(scrollableLeft, scrollableTop);
         // Build the transform to apply, preserving any transforms that were
         // already on the element before the grab (e.g. rotate from another
         // controller), and accumulating from the pre-grab translate baseline.
@@ -11060,33 +11783,32 @@ const createDragToMoveGestureController = ({
         // the distance covered. Dragging moves things on screen, so its translate
         // has to come first, whatever else the element carries. The spread still
         // wins on the value when the element already had a translate of its own.
-        const transform = { translateX: 0, translateY: 0, ...transformAtGrab };
+        const transform = {
+          translateX: 0,
+          translateY: 0,
+          ...transformAtGrab
+        };
         if (direction.x) {
           const leftTarget = positionedLeft;
           const leftAtGrab = dragGesture.gestureInfo.leftAtGrab;
           const leftDelta = leftTarget - leftAtGrab;
-          const translateX = translateXAtGrab
-            ? translateXAtGrab + leftDelta
-            : leftDelta;
+          const translateX = translateXAtGrab ? translateXAtGrab + leftDelta : leftDelta;
           transform.translateX = translateX;
         }
         if (direction.y) {
           const topTarget = positionedTop;
           const topAtGrab = dragGesture.gestureInfo.topAtGrab;
           const topDelta = topTarget - topAtGrab;
-          const translateY = translateYAtGrab
-            ? translateYAtGrab + topDelta
-            : topDelta;
+          const translateY = translateYAtGrab ? translateYAtGrab + topDelta : topDelta;
           transform.translateY = translateY;
         }
         dragStyleController.set(elementImpacted, {
-          transform,
+          transform
         });
       }
     };
     dragGesture.addDragCallback(dragToMove);
   };
-
   const dragGestureController = createDragGestureController(options);
   const grab = dragGestureController.grab;
   dragGestureController.grab = ({
@@ -11094,511 +11816,246 @@ const createDragToMoveGestureController = ({
     referenceElement,
     elementToMove,
     event,
-    ...rest
-  } = {}) => {
-    const scrollContainer = getScrollContainer(referenceElement || element);
-    const [
-      elementScrollableLeft,
-      elementScrollableTop,
-      convertScrollablePosition,
-    ] = createDragElementPositioner(element, referenceElement, elementToMove);
-    const dragGesture = grab({
-      element,
-      scrollContainer,
-      layoutScrollableLeft: elementScrollableLeft,
-      layoutScrollableTop: elementScrollableTop,
-      event,
-      ...rest,
-    });
-    initGrabToMoveElement(dragGesture, {
-      element,
-      referenceElement,
-      elementToMove,
-      convertScrollablePosition,
-    });
-    return dragGesture;
-  };
-
-  return dragGestureController;
-};
-
-/**
- * Detects the drop target based on what element is actually under the mouse cursor.
- * Uses document.elementsFromPoint() to respect visual stacking order naturally.
- *
- * @param {Object} gestureInfo - Gesture information
- * @param {Element[]} targetElements - Array of potential drop target elements
- * @param {object} [options]
- * @param {Element} [options.dragElement] - The element being dragged. When provided and
- *   `fallbackToEdge` is true, used to compute the fallback rect.
- * @param {boolean} [options.fallbackToEdge=false] - When true and the drag element does
- *   not intersect any target, falls back to the first item (if above all items) or the
- *   last item (if below all items) so there is always a valid drop target at list edges.
- * @returns {Object|null} Drop target info with elementSide or null if no valid target found
- */
-const getDropTargetInfo = (
-  gestureInfo,
-  targetElements,
-  { fallbackToEdge = false } = {},
-) => {
-  const dragElement = gestureInfo.elementImpacted || gestureInfo.element;
-  const dragElementRect = dragElement.getBoundingClientRect();
-  const intersectingTargets = [];
-  let someTargetIsCol;
-  let someTargetIsTr;
-  for (const targetElement of targetElements) {
-    const targetRect = targetElement.getBoundingClientRect();
-    if (!rectangleAreIntersecting(dragElementRect, targetRect)) {
-      continue;
-    }
-    if (!someTargetIsCol && targetElement.tagName === "COL") {
-      someTargetIsCol = true;
-    }
-    if (!someTargetIsTr && targetElement.tagName === "TR") {
-      someTargetIsTr = true;
-    }
-    intersectingTargets.push(targetElement);
-  }
-
-  if (intersectingTargets.length === 0) {
-    if (fallbackToEdge) {
-      const dragElement = gestureInfo.elementImpacted || gestureInfo.element;
-      const dragElementRect = dragElement.getBoundingClientRect();
-      const firstItem = targetElements[0];
-      const lastItem = targetElements[targetElements.length - 1];
-      if (
-        firstItem &&
-        dragElementRect.bottom < firstItem.getBoundingClientRect().top
-      ) {
-        // Drag element is above all items → treat as hovering the first item from the top.
-        return {
-          element: firstItem,
-          elementSide: { x: "start", y: "start" },
-          index: 0,
-          intersectingIndex: 0,
-          intersecting: [firstItem],
-        };
-      }
-      if (
-        lastItem &&
-        dragElementRect.top > lastItem.getBoundingClientRect().bottom
-      ) {
-        // Drag element is below all items → treat as hovering the last item from the bottom.
-        return {
-          element: lastItem,
-          elementSide: { x: "start", y: "end" },
-          index: targetElements.length - 1,
-          intersectingIndex: 0,
-          intersecting: [lastItem],
-        };
-      }
-    }
-    return null;
-  }
-
-  const dragElementCenterX = dragElementRect.left + dragElementRect.width / 2;
-  const dragElementCenterY = dragElementRect.top + dragElementRect.height / 2;
-  // Clamp coordinates to viewport to avoid issues with elementsFromPoint
-  const viewportWidth = document.documentElement.clientWidth;
-  const viewportHeight = document.documentElement.clientHeight;
-  const clientX =
-    dragElementCenterX < 0
-      ? 0
-      : dragElementCenterX > viewportWidth
-        ? viewportWidth - 1
-        : dragElementCenterX;
-  const clientY =
-    dragElementCenterY < 0
-      ? 0
-      : dragElementCenterY > viewportHeight
-        ? viewportHeight - 1
-        : dragElementCenterY;
-
-  // Find the first target element in the stack (topmost visible target)
-  const elementsUnderDragElement = document.elementsFromPoint(clientX, clientY);
-  let targetElement = null;
-  let targetIndex = -1;
-  let intersectingIndex = -1;
-  for (const element of elementsUnderDragElement) {
-    // First, check if the element itself is a target
-    const directIndex = intersectingTargets.indexOf(element);
-    if (directIndex !== -1) {
-      targetElement = element;
-      intersectingIndex = directIndex;
-      break;
-    }
-    // Special case: if element is <td> or <th> and not in targets,
-    // try to find its corresponding <col> element
-    if (!isTableCell(element)) {
-      continue;
-    }
-    try_col: {
-      if (!someTargetIsCol) {
-        break try_col;
-      }
-      const tableCellCol = findTableCellCol(element);
-      if (!tableCellCol) {
-        break try_col;
-      }
-      const colIndex = intersectingTargets.indexOf(tableCellCol);
-      if (colIndex === -1) {
-        break try_col;
-      }
-      targetElement = tableCellCol;
-      intersectingIndex = colIndex;
-      break;
-    }
-    try_tr: {
-      if (!someTargetIsTr) {
-        break try_tr;
-      }
-      const tableRow = element.closest("tr");
-      const rowIndex = targetElements.indexOf(tableRow);
-      if (rowIndex === -1) {
-        break try_tr;
-      }
-      targetElement = tableRow;
-      intersectingIndex = intersectingTargets.indexOf(tableRow);
-      break;
-    }
-  }
-  if (!targetElement) {
-    targetElement = intersectingTargets[0];
-    intersectingIndex = 0;
-  }
-  targetIndex = targetElements.indexOf(targetElement);
-
-  // Determine position within the target for both axes.
-  //
-  // Use the leading edge of the dragged element (in the direction of movement)
-  // compared against the target's center:
-  //   - Dragging down: "after" as soon as the bottom crosses the target center.
-  //   - Dragging up:   "before" as soon as the top crosses the target center.
-  //   - Not moving: center-vs-center fallback.
-  //
-  // This gives consistent, predictable thresholds regardless of element size.
-  const targetRect = targetElement.getBoundingClientRect();
-  const targetCenterX = targetRect.left + targetRect.width / 2;
-  const targetCenterY = targetRect.top + targetRect.height / 2;
-  const { intentGoingDown, intentGoingUp, intentGoingRight, intentGoingLeft } =
-    gestureInfo;
-  let sideY;
-  if (intentGoingDown) {
-    sideY = dragElementRect.bottom > targetCenterY ? "end" : "start";
-  } else if (intentGoingUp) {
-    sideY = dragElementRect.top < targetCenterY ? "start" : "end";
-  } else {
-    sideY = dragElementCenterY < targetCenterY ? "start" : "end";
-  }
-  let sideX;
-  if (intentGoingRight) {
-    sideX = dragElementRect.right > targetCenterX ? "end" : "start";
-  } else if (intentGoingLeft) {
-    sideX = dragElementRect.left < targetCenterX ? "start" : "end";
-  } else {
-    sideX = dragElementCenterX < targetCenterX ? "start" : "end";
-  }
-  const result = {
-    // NOTE: avoid relying on `index` in application code. The targetElements
-    // array may be dynamically filtered (e.g. excluding the grabbed element),
-    // making this index inconsistent with the full list. Use `element` instead
-    // and look up its position yourself from your own data source.
-    index: targetIndex,
-    element: targetElement,
-    elementSide: {
-      x: sideX,
-      y: sideY,
-    },
-    // Index within the intersecting subset — could be useful to know how many
-    // elements were overlapping, but rarely needed in practice
-    intersectingIndex,
-    intersecting: intersectingTargets,
-  };
-  return result;
-};
-
-const rectangleAreIntersecting = (r1, r2) => {
-  return !(
-    r2.left > r1.right ||
-    r2.right < r1.left ||
-    r2.top > r1.bottom ||
-    r2.bottom < r1.top
-  );
-};
-
-const isTableCell = (el) => {
-  return el.tagName === "TD" || el.tagName === "TH";
-};
-
-/**
- * Find the corresponding <col> element for a given <td> or <th> cell
- * @param {Element} cellElement - The <td> or <th> element
- * @param {Element[]} targetColElements - Array of <col> elements to search in
- * @returns {Element|null} The corresponding <col> element or null if not found
- */
-const findTableCellCol = (cellElement) => {
-  const table = cellElement.closest("table");
-  const colgroup = table.querySelector("colgroup");
-  if (!colgroup) {
-    return null;
-  }
-  const cols = colgroup.querySelectorAll("col");
-  const columnIndex = cellElement.cellIndex;
-  const correspondingCol = cols[columnIndex];
-  return correspondingCol;
-};
-
-// Temporarily attach to the element so inherited CSS vars resolve correctly,
-// then snapshot all drop-hint custom properties onto the scroll container
-// so they survive once the element moves to the scroll container.
-const moveCSSVars = (vars, fromEl, toEl) => {
-  const fromComputedStyle = getComputedStyle(fromEl);
-  const savedVars = {};
-  for (const varName of vars) {
-    const value = fromComputedStyle.getPropertyValue(varName).trim();
-    if (value) {
-      savedVars[varName] = toEl.style.getPropertyValue(varName);
-      toEl.style.setProperty(varName, value);
-    }
-  }
-
-  return () => {
-    for (const varName of vars) {
-      if (varName in savedVars) {
-        if (savedVars[varName]) {
-          toEl.style.setProperty(varName, savedVars[varName]);
-        } else {
-          toEl.style.removeProperty(varName);
-        }
-      }
-    }
-  };
-};
-
-installImportMetaCssBuild(import.meta);const css$1 = /* css */`
-  /* IN THE PAGE, NOT IN THE LIST: the hint lands on the edge of a row, which
-     for the last one is the very bottom of the scroll area — drawn inside it,
-     the line would push the scrollable area a few pixels further and make a
-     scrollbar appear (or hide the hint under it) exactly when one is trying to
-     drop at the end. Placed in the body and positioned in viewport
-     coordinates, it can sit anywhere, overhang the list, and cost nothing to
-     the layout. Fixed, like the clone it accompanies. */
-  .navi_drop_hint {
-    /* A popover, so it lands in the top layer: no z-index to bid against the
-       page, and nothing it can be hidden behind. Shown BEFORE the clone, which
-       is what puts the clone above it — the top layer stacks in the order
-       things are shown, and the item being carried should pass over the line
-       rather than under it. The UA styles for [popover] have to be undone:
-       inset:0, margin:auto, a border and a background of its own. */
-    position: fixed;
-    inset: auto;
-    top: var(--drop-hint-y);
-    left: calc(var(--drop-target-left) + var(--drop-hint-margin-x, 0px));
-    display: none;
-    box-sizing: border-box;
-    width: calc(var(--drop-target-width) - 2 * var(--drop-hint-margin-x, 0px));
-    height: var(--drop-hint-size, 3px);
-    margin: 0;
-    padding: 0;
-    color: inherit;
-    background: var(--drop-hint-background-color, #4476ff);
-    border: none;
-    border-radius: var(--drop-hint-border-radius, 2px);
-    transform: translateY(-50%);
-    pointer-events: none;
-    overflow: visible;
-  }
-  .navi_drop_hint[data-drop-edge]:popover-open {
-    display: block;
-  }
-  .navi_drop_hint[data-drop-edge="top"] {
-    --drop-hint-y: calc(
-      var(--drop-target-top) - var(--drop-hint-margin-y, 0px)
-    );
-  }
-  .navi_drop_hint[data-drop-edge="bottom"] {
-    --drop-hint-y: calc(
-      var(--drop-target-bottom) + var(--drop-hint-margin-y, 0px)
-    );
-  }
-  /* A chevron at each end, pointing in: the line alone is easy to lose against
-     a list of borders and separators, two arrows read as "here" at a glance
-     (same idea as the table's column drop preview). They overhang the line,
-     which costs nothing now that the hint is out of the scrollable area — and
-     the more they stick out, the easier they are to spot. */
-  .navi_drop_hint_cap {
-    position: absolute;
-    top: 50%;
-    display: flex;
-    color: var(--drop-hint-background-color, #4476ff);
-    translate: 0 -50%;
-  }
-  .navi_drop_hint_cap svg {
-    width: var(--drop-hint-arrow-size, 11px);
-    height: var(--drop-hint-arrow-size, 11px);
-  }
-  .navi_drop_hint_cap[data-side="start"] {
-    left: calc(-1 * var(--drop-hint-arrow-size, 11px));
-    rotate: -90deg;
-  }
-  .navi_drop_hint_cap[data-side="end"] {
-    right: calc(-1 * var(--drop-hint-arrow-size, 11px));
-    rotate: 90deg;
-  }
+    ...rest
+  } = {}) => {
+    const scrollContainer = getScrollContainer(referenceElement || element);
+    const [elementScrollableLeft, elementScrollableTop, convertScrollablePosition] = createDragElementPositioner(element, referenceElement, elementToMove);
+    const dragGesture = grab({
+      element,
+      scrollContainer,
+      layoutScrollableLeft: elementScrollableLeft,
+      layoutScrollableTop: elementScrollableTop,
+      event,
+      ...rest
+    });
+    initGrabToMoveElement(dragGesture, {
+      element,
+      referenceElement,
+      elementToMove,
+      convertScrollablePosition
+    });
+    return dragGesture;
+  };
+  return dragGestureController;
+};
 
-  /* WHO CAN START A DRAG, said in the cursor.
-     A handle drags on the spot, so it shows the hand. A source only drags once
-     the intent shows (a few pixels of travel, or a long press) — a plain click
-     stays a click — but the text inside it cannot be selected (the gesture takes
-     the pointer), so an I-beam over it would promise something that does not
-     happen: it reads as a plain surface instead. An opted-out area keeps both
-     its cursor and its selection, and never starts a drag (see the check in
-     startDragToReorder).
-     Controls inside a source keep their own cursor: cursor is inherited, and
-     anything setting its own (a button's pointer) wins on itself.
-     Only the resting cursor is set here: what it becomes once a drag is under
-     way belongs to the gesture (see the backdrop in drag_gesture.js), the only
-     thing that knows a drag actually started. */
-  [data-drag-handle] {
-    cursor: grab;
-  }
-  [data-drag-source] {
-    cursor: default;
-    user-select: none;
+/**
+ * Starts a drag, for one or more of the outcomes listed.
+ *
+ * @param {PointerEvent} event The `pointerdown` that may become a drag.
+ * @param {("move"|"reorder"|"toss"|"land")[]} effects
+ *   What letting go of this element can mean. `reorder`, `toss` and `land` carry a
+ *   copy; `move` carries the element itself. Asking for `move` and `reorder`
+ *   together is asking one release to mean two things, and so is asking for
+ *   `reorder` and `land`.
+ * @param {object} [options]
+ * @param {Element} [options.draggedElement=event.currentTarget]
+ * @param {(detail: {gestureInfo: object, x: number, y: number}) => Promise|void} [options.onMove]
+ *   It was put somewhere. The position is already committed when this runs — the
+ *   hand let go of it there — and travels back if the promise rejects.
+ * @param {Element} [options.containerElement=draggedElement.parentElement]
+ *   Searched with `itemSelector` for the items to drop between.
+ * @param {string} [options.itemSelector] What matches the items of the list.
+ * @param {function} [options.getItemId] `getItemId(element) → id`.
+ * @param {function} [options.onReorder]
+ *   `onReorder(fromId, toId, syncCloneWithDropTarget)` — see its own note below.
+ * @param {(detail: {gestureInfo: object}) => Promise|void} [options.onToss]
+ *   It was thrown away. The copy leaves the screen while this runs and comes back
+ *   if the promise rejects, because the thing still exists and the screen has to
+ *   say so.
+ * @param {function} [options.onLand]
+ *   `onLand(fromId, toId, syncCloneWithDropTarget)` — it came down on `toId`, which
+ *   is an element and never null: nothing under the copy is a cancelled release.
+ *   The copy is held until what comes back settles, exactly like `onReorder`.
+ *   `syncCloneWithDropTarget` takes an element when the place is not the shape of
+ *   what stands on it: the copy then takes THAT box instead of the target's.
+ * @param {number} [options.tossDistance=110] How far a throw goes, in px.
+ * @param {number} [options.tossSpeed=0.45] And how fast, in px/ms. BOTH are asked
+ *   for: one without the other is moving the thing while hesitating, and nothing is
+ *   thrown away on a hesitation.
+ *
+ * Everything else is forwarded to `createDragToMoveGestureController`
+ * (`areaConstraint`, `autoScrollAreaPadding`, `direction`…) and to `dragAfterIntent`
+ * (`threshold`, `longPress`, `longPressDelay`, `longPressSlop`, `onPressStart`,
+ * `onPressCancel`, `onPress`).
+ *
+ * About `onReorder`:
+ * - `fromId`: id of the item that moved.
+ * - `toId`: id of the item to insert before, or `null` to append at the end.
+ * - `syncCloneWithDropTarget`: call it synchronously inside a
+ *   `document.startViewTransition` callback, next to the DOM mutation, so the copy
+ *   is captured at its landing position.
+ * The gesture holds its copy until what `onReorder` returns settles, so returning
+ * the transition is what makes the landing continuous.
+ */
+const startDragTo = (event, effects, {
+  draggedElement = event.currentTarget,
+  ...options
+} = {}) => {
+  // An area that opted out of dragging (a text one wants to select, a control that
+  // owns the gesture): the press there is none of our business.
+  if (event.target.closest && event.target.closest("[data-drag-ignore]")) {
+    return undefined;
   }
-  [data-drag-ignore] {
-    cursor: auto;
-    user-select: auto;
+  // A secondary button (right click and friends) is a context menu, not a grab.
+  if (!isPrimaryButtonEvent(event)) {
+    return undefined;
   }
-
-  [navi-drag-clone-source] {
-    visibility: hidden;
+  const canReorder = effects.includes("reorder");
+  const canToss = effects.includes("toss");
+  const canLand = effects.includes("land");
+  if (canReorder || canToss || canLand) {
+    return startDragToCarryCopy(event, {
+      draggedElement,
+      canReorder,
+      canToss,
+      canLand,
+      ...options
+    });
   }
+  return startDragToMoveElement(event, {
+    draggedElement,
+    ...options
+  });
+};
 
-  [navi-drag-clone-wrapper] {
-    /* Also a popover (see .navi_drop_hint): in the top layer it is over the
-       page whatever the page's own stacking is, and the coordinates it is
-       given are viewport ones — which is what the pointer carrying it works
-       in. Same UA-style reset as the hint. */
-    position: fixed;
-    inset: auto;
-    top: var(--clone-top);
-    left: var(--clone-left);
-    box-sizing: border-box;
-    width: var(--clone-width);
-    height: var(--clone-height);
-    margin: 0;
-    padding: 0;
-    color: inherit;
-    background: transparent;
-    border: none;
-    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
-    opacity: 0.95;
-    transition: box-shadow 0.15s ease;
-    pointer-events: none;
-    overflow: visible;
-  }
+/**
+ * The element ITSELF is carried, and keeps the place the hand gave it.
+ *
+ * No copy, unlike the two others: what is being moved is the thing and not a
+ * stand-in for it, so there is nothing to put back and nothing to reveal.
+ */
+const startDragToMoveElement = (event, {
+  draggedElement,
+  onMove,
+  threshold,
+  longPress,
+  longPressDelay,
+  longPressSlop,
+  onPressStart,
+  onPressCancel,
+  onPress,
+  ...options
+}) => {
+  event.preventDefault();
+  return dragAfterIntent(event, () => {
+    const gestureController = createDragToMoveGestureController({
+      releasePositionEffect: "manual",
+      ...options
+    });
+    const dragGesture = gestureController.grabViaPointer(event, {
+      element: draggedElement
+    });
+    if (!dragGesture) {
+      return null;
+    }
+    dragGesture.addReleaseCallback(async gestureInfo => {
+      const {
+        xDelta,
+        yDelta
+      } = gestureInfo.layout;
+      if (!xDelta && !yDelta) {
+        // Picked up and put back down: nothing moved, so nobody is told.
+        gestureInfo.cancelPosition();
+        return;
+      }
+      // Committed before the answer rather than after: the hand let go of it
+      // there, and a thing that snaps home while a request is in flight says the
+      // gesture was not understood.
+      gestureInfo.commitPosition();
+      try {
+        await onMove?.({
+          gestureInfo,
+          x: xDelta,
+          y: yDelta
+        });
+      } catch {
+        gestureInfo.cancelPositionAnimated();
+      }
+    });
+    return dragGesture;
+  }, {
+    threshold,
+    longPress,
+    longPressDelay,
+    longPressSlop,
+    onPressStart,
+    onPressCancel,
+    onPress
+  });
+};
 
-  [navi-drag-clone] {
-    transform: scale(var(--drag-clone-scale, 1.03));
-    transform-origin: var(--drag-origin);
-    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
+// Far and fast, both at once: one without the other is moving the thing while
+// hesitating, and nothing is thrown away on a hesitation — it comes back.
+const TOSS_DISTANCE_TO_COMMIT = 110;
+const TOSS_SPEED_TO_COMMIT = 0.45;
+const resolveDropMeaning = ({
+  gestureInfo,
+  hasDropTarget,
+  canReorder,
+  canToss,
+  canLand,
+  tossDistance = TOSS_DISTANCE_TO_COMMIT,
+  tossSpeed = TOSS_SPEED_TO_COMMIT
+}) => {
+  if (canToss) {
+    const {
+      xDelta,
+      yDelta
+    } = gestureInfo.layout;
+    const distance = Math.hypot(xDelta, yDelta);
+    if (distance > tossDistance && gestureInfo.velocity > tossSpeed) {
+      return "toss";
+    }
   }
-
-  @starting-style {
-    [navi-drag-clone-wrapper] {
-      box-shadow: none;
+  if (hasDropTarget) {
+    if (canLand) {
+      return "land";
     }
-
-    [navi-drag-clone] {
-      transform: scale(1);
+    if (canReorder) {
+      return "reorder";
     }
   }
-`;
-// At module scope, not inside startDragToReorder: the cursor rules above say who
-// can start a drag, and they have to be true BEFORE anyone drags anything.
-import.meta.css = [css$1, "@jsenv/dom/src/interaction/drag/drag_to_reorder.js"];
-const dragCSSVars = ["--drop-hint-size", "--drop-hint-background-color", "--drop-hint-border-radius", "--drop-hint-margin-x", "--drop-hint-margin-y", "--drop-hint-arrow-size", "--drag-clone-scale"];
+  return "cancel";
+};
 
 /**
- * Starts a drag-to-reorder interaction on a list item.
- *
- * Handles the full reorder UX:
- * - Activates only once the intent is established — a short movement with a mouse, a long
- *   press with a finger (see `dragAfterIntent`), so that neither a click nor a scroll
- *   reorders anything by accident.
- * - Clones the grabbed element and moves the clone while the original stays hidden in place
- *   (keeps the layout intact so other items don't shift during the drag).
- * - CSS vars (`--drop-hint-size`, `--drop-hint-background-color`, etc.) are read from the
- *   dragged element and moved to `document.documentElement` for the duration of the drag so
- *   the drop-hint and clone — both in `document.body` — can inherit them.
- * - Shows a drop-hint line indicating where the item will land.
- * - Drop-target detection is intersection-based: the clone's bounding rect is compared
- *   against every item that matches `itemSelector` in the scroll container.
- * - No-ops are filtered: releasing on the grabbed element itself, or in a position that
- *   would leave it at exactly the same index, never triggers `onReorder`.
- * - On a valid drop, the clone animates to the drop position via the View Transitions API,
- *   `onReorder` is called inside the transition callback so the DOM update and the animation
- *   are captured together, then the clone is removed.
- * - On a cancelled drop (pointer released with no valid target), the clone is removed
- *   immediately without calling `onReorder`.
- *
- * IDs are used as the bridge between DOM elements and JS state because:
- * - Not all DOM elements matching `itemSelector` may be valid drop targets
- *   (holes in the structure), so DOM indices don't reliably map to state indices.
- * - Virtual lists render fewer DOM nodes than the total item count, so
- *   DOM-index-based counting would be wrong.
- *
- * Any option not listed below is forwarded to `createDragToMoveGestureController`
- * (`areaConstraint`, `autoScrollAreaPadding`, `stickyFrontiers`…), except
- * `releasePositionEffect`, always `"manual"` here: what moves is the clone, and it
- * is removed on release, so there is no position to commit or cancel.
- *
- * @param {PointerEvent} event
- *   The `pointerdown` event that may become a reorder.
- * @param {object} options
- * @param {Element} [options.draggedElement=event.currentTarget]
- *   The list item to drag.
- * @param {Element} [options.containerElement=draggedElement.parentElement]
- *   Element searched with `itemSelector` to find the items to drop between.
- * @param {string} options.itemSelector
- *   CSS selector that matches all list items inside `containerElement`.
- *   Used for drop-target detection and no-op filtering.
- * @param {function} options.getItemId
- *   Returns the stable ID for a given DOM element.
- *   Signature: `getItemId(element) → id`.
- * @param {function} options.onReorder
- *   Called when the user drops the item in a new position.
- *   Signature: `onReorder(fromId, toId, syncCloneWithDropTarget)`.
- *   - `fromId`: stable ID of the dragged item.
- *   - `toId`: stable ID of the item to insert before, or `null` to append at the end.
- *   - `syncCloneWithDropTarget`: call it synchronously inside a
- *     `document.startViewTransition` callback, next to the DOM mutation, so the
- *     clone is captured at its landing position.
- * @param {object} [options.direction={ x: false, y: true }]
- *   Axes along which dragging is allowed. Passed to `createDragToMoveGestureController`.
- * @param {number} [options.threshold=5]
- *   Distance (px) a mouse must travel before the press becomes a drag.
- * @param {boolean|"if-touch"} [options.longPress="if-touch"]
- *   Which pointers start the drag by holding still instead of by travelling.
- * @param {number} [options.longPressDelay=400]
- *   How long (ms) such a pointer must stay down.
- * @param {number} [options.longPressSlop=8]
- *   How far (px) it may drift during that wait before the press is abandoned.
- * @param {function} [options.onPressStart]
- *   The pointer went down and the wait began (a cue that the press counts).
- * @param {function} [options.onPressCancel]
- *   The pointer moved or lifted before the wait was over.
- * @param {function} [options.onPress]
- *   The wait completed and the item is now held (haptics, scale…).
+ * A COPY of the element is carried, and the original keeps its place in the
+ * layout — which is what makes a reorder possible at all: nothing else moves
+ * while the hand looks for a place, so there is a stable row of items to look
+ * between. A landing on a place of a board is the same, and a throw uses that copy
+ * for the opposite reason: the original stays until the answer says it is really
+ * gone.
  */
-const startDragToReorder = (event, {
-  draggedElement = event.currentTarget,
+const startDragToCarryCopy = (event, {
+  draggedElement,
+  canReorder,
+  canToss,
+  canLand,
+  // Something that can be thrown away has to be able to LEAVE. The default of
+  // the layer below keeps what is dragged inside its scroll area, which is right
+  // for a reorder (a row belongs to its list) and makes a throw impossible — the
+  // copy hits the edge of the list and no distance is ever covered, so no throw
+  // ever happens and no sideways movement is even visible.
+  // Destructured with the default here rather than written at the call below: a
+  // caller passing `areaConstraint: undefined` (which is what saying nothing
+  // through an options object looks like) would otherwise put the layer below
+  // back on its own default and undo this.
+  areaConstraint = canToss ? "none" : undefined,
   containerElement = draggedElement.parentElement,
   itemSelector,
   getItemId,
   onReorder,
-  direction = {
+  onLand,
+  onToss,
+  tossDistance,
+  tossSpeed,
+  // A list runs one way and reordering walks it; a board has places all around,
+  // so something landing on one of them goes wherever the hand takes it.
+  direction = canLand ? {
+    x: true,
+    y: true
+  } : {
     x: false,
     y: true
   },
@@ -11624,12 +12081,10 @@ const startDragToReorder = (event, {
   return dragAfterIntent(event, () => {
     const cloneWrapper = createDragClone(draggedElement, event);
     draggedElement.setAttribute("navi-drag-clone-source", "");
-    // Move drag related CSS vars from the element to the document
-    // so they're accessible to .navi_drop_hint and the clone (which are both in document.body)
-    const restoreCSSVars = moveCSSVars(dragCSSVars, draggedElement, document.documentElement);
     const gestureController = createDragToMoveGestureController({
       direction,
       releasePositionEffect: "manual",
+      areaConstraint,
       ...options
     });
     const dragGesture = gestureController.grabViaPointer(event, {
@@ -11639,11 +12094,20 @@ const startDragToReorder = (event, {
     // getDropTargetInfo uses gestureInfo.elementImpacted to compute the dragged rect.
     // Point it at the clone so drop detection tracks the clone's current position.
     dragGesture.gestureInfo.elementImpacted = cloneWrapper;
-    const dropHintEl = createDropHint();
-    document.body.appendChild(dropHintEl);
+
+    // No place to land, no hint: an element that can only be thrown away has
+    // nowhere to be put. What the hint LOOKS like follows what a place is here —
+    // a line in the gap between two items, or the place itself lit up.
+    const dropHintEl = canLand ? createDropSurface() : canReorder ? createDropHint() : null;
+    if (dropHintEl) {
+      // In the container it draws into, which is where its own vars are set: the
+      // shape of a drop hint is a property of the list or board it belongs to,
+      // and reading it from there is inheritance rather than a hand-off.
+      draggedElement.parentElement.appendChild(dropHintEl);
+    }
     // The hint first, the clone second: that order is what stacks them in the
     // top layer.
-    dropHintEl.showPopover();
+    dropHintEl?.showPopover();
     cloneWrapper.showPopover();
 
     // currentBeforeElement: element before which the grabbed item will be inserted (null = end)
@@ -11651,11 +12115,16 @@ const startDragToReorder = (event, {
     let currentBeforeElement;
     let currentReleaseElement;
     const clearDropHintDOM = () => {
+      if (!dropHintEl) {
+        return;
+      }
       dropHintEl.removeAttribute("data-drop-edge");
+      dropHintEl.removeAttribute("data-drop-over");
       dropHintEl.style.removeProperty("--drop-target-top");
       dropHintEl.style.removeProperty("--drop-target-bottom");
       dropHintEl.style.removeProperty("--drop-target-left");
       dropHintEl.style.removeProperty("--drop-target-width");
+      dropHintEl.style.removeProperty("--drop-target-height");
     };
     const clearDropHint = () => {
       currentBeforeElement = undefined;
@@ -11663,6 +12132,9 @@ const startDragToReorder = (event, {
       clearDropHintDOM();
     };
     dragGesture.addDragCallback(gestureInfo => {
+      if (!dropHintEl) {
+        return;
+      }
       const allItems = [];
       const items = [];
       for (const el of containerElement.querySelectorAll(itemSelector)) {
@@ -11672,13 +12144,32 @@ const startDragToReorder = (event, {
         }
       }
       const dropTargetInfo = getDropTargetInfo(gestureInfo, items, {
-        fallbackToEdge: true
+        // The edges of a LIST: above the first row means the top of it, below
+        // the last one means the end of it. A board has no such reading — away
+        // from every place is away from every place.
+        fallbackToEdge: !canLand
       });
       gestureInfo.dropTargetInfo = dropTargetInfo || null;
       if (!dropTargetInfo) {
         clearDropHint();
         return;
       }
+      if (canLand) {
+        // The whole element is the target, so which of its edges the copy came
+        // in by says nothing: there is no gap to be on one side of.
+        const dropElement = dropTargetInfo.element;
+        if (dropElement === currentReleaseElement) {
+          return;
+        }
+        currentReleaseElement = dropElement;
+        const dropRect = dropElement.getBoundingClientRect();
+        dropHintEl.setAttribute("data-drop-over", "");
+        dropHintEl.style.setProperty("--drop-target-top", `${dropRect.top}px`);
+        dropHintEl.style.setProperty("--drop-target-left", `${dropRect.left}px`);
+        dropHintEl.style.setProperty("--drop-target-width", `${dropRect.width}px`);
+        dropHintEl.style.setProperty("--drop-target-height", `${dropRect.height}px`);
+        return;
+      }
       // Convert {element, edge} to a beforeElement using the items array
       // (not nextElementSibling, which breaks if non-item elements exist between items).
       //   edge "start" → insert before the hovered element
@@ -11718,27 +12209,61 @@ const startDragToReorder = (event, {
     });
     dragGesture.addReleaseCallback(async gestureInfo => {
       clearDropHintDOM();
-      dropHintEl.remove();
-      restoreCSSVars();
-      if (currentBeforeElement !== undefined) {
+      dropHintEl?.remove();
+
+      // What THIS release means, from what the element said it can answer. A
+      // throw is asked about first: it is the more insistent of the two, and a
+      // hand that sent the thing across the screen has not asked for it to swap
+      // places with whatever it happened to fly over.
+      const hasDropTarget = canLand ? currentReleaseElement !== undefined : currentBeforeElement !== undefined;
+      const dropMeans = resolveDropMeaning({
+        gestureInfo,
+        hasDropTarget,
+        canReorder,
+        canToss,
+        canLand,
+        tossDistance,
+        tossSpeed
+      });
+
+      // The copy stops where the hand left it, and the answer is given a way to
+      // take it the rest of the way — synchronously, inside a view transition, so
+      // it is captured where it lands rather than where it was let go of.
+      const landCopyOn = async (targetElement, answer) => {
         const clone = cloneWrapper.firstElementChild;
         // Bake the current visual position (transform included) into the CSS vars
-        // so the clone stays where the user released it when we clear the transform.
+        // so the copy stays where the user released it when the transform goes.
         setCloneViewportRect(cloneWrapper, cloneWrapper);
         gestureInfo.cancelPosition();
-        const fromId = getItemId(draggedElement);
-        const toId = currentBeforeElement ? getItemId(currentBeforeElement) : null;
-        // provide onReorder a way to synchronously move the clone to the drop target
-        // (meant to be used inside a startViewTransition callback)
-        const syncCloneWithDropTarget = () => {
-          // Snap the CSS-var position to the drop target rect so the browser
-          // captures the "new" state at the landing position.
-          setCloneViewportRect(cloneWrapper, currentReleaseElement);
-          // Removing this attr drops the CSS scale(1.15), so the browser
-          // captures the clone at scale 1 as the "new" state.
+        // Where the copy comes down is not always the thing it came down ON: a
+        // place of a board can be larger than what stands on it, and the copy
+        // has to keep its own size and land where the item will be. Said with
+        // an element, because the caller has one — the piece already standing
+        // there, the empty slot waiting.
+        const syncCloneWithDropTarget = (landingElement = targetElement) => {
+          setCloneViewportRect(cloneWrapper, landingElement);
+          // Removing this attr drops the CSS scale, so the browser captures the
+          // copy at scale 1 as the "new" state.
           clone.removeAttribute("navi-drag-clone");
         };
-        await onReorder(fromId, toId, syncCloneWithDropTarget);
+        await answer(syncCloneWithDropTarget);
+      };
+      if (dropMeans === "toss") {
+        // Bake the position the hand left it at, so the flight starts from
+        // there rather than from where the clone was declared.
+        setCloneViewportRect(cloneWrapper, cloneWrapper);
+        gestureInfo.cancelPosition();
+        const gone = await tossCloneAway(cloneWrapper, gestureInfo, onToss);
+        if (!gone) {
+          // It still exists, so the screen has to say so: the copy comes back
+          // over the original, and taking it away then reveals the row in
+          // place.
+          await settleCloneBack(cloneWrapper, draggedElement);
+        }
+      } else if (dropMeans === "land") {
+        await landCopyOn(currentReleaseElement, syncCloneWithDropTarget => onLand(getItemId(draggedElement), getItemId(currentReleaseElement), syncCloneWithDropTarget));
+      } else if (dropMeans === "reorder") {
+        await landCopyOn(currentReleaseElement, syncCloneWithDropTarget => onReorder(getItemId(draggedElement), currentBeforeElement ? getItemId(currentBeforeElement) : null, syncCloneWithDropTarget));
       }
       draggedElement.removeAttribute("navi-drag-clone-source");
       cloneWrapper.remove();
@@ -11780,6 +12305,7 @@ const setCloneViewportRect = (cloneWrapper, el) => {
 //   so the element expands naturally from where the user clicked.
 //   On release, the `navi-drag-clone` attribute is removed inside
 //   startViewTransition to drop the scale back to 1 as the "new" state.
+
 // The chevron is the one the table's column drop preview uses, rotated by the
 // CSS above so each cap points into the line.
 const dropHintTemplate = /* html */`
@@ -11808,6 +12334,59 @@ const createDropHint = () => {
   div.innerHTML = dropHintTemplate.trim();
   return div.firstElementChild;
 };
+const createDropSurface = () => {
+  const div = document.createElement("div");
+  div.className = "navi_drop_surface";
+  // Manual, like the copy it accompanies: it is opened and closed with the drag
+  // and must survive an Escape or a click elsewhere.
+  div.setAttribute("popover", "manual");
+  return div;
+};
+
+/**
+ * The copy leaves the screen the way it was thrown, and the caller says what that
+ * meant. Resolves true when it is really gone.
+ *
+ * The answer is asked for WHILE it flies rather than after: the thing is already
+ * far away by the time the request lands, which is the whole point of a gesture
+ * that means "get rid of this" — nobody waits to watch it go.
+ */
+const tossCloneAway = async (cloneWrapper, gestureInfo, onToss) => {
+  const {
+    xDelta,
+    yDelta
+  } = gestureInfo.layout;
+  const distance = Math.hypot(xDelta, yDelta) || 1;
+  cloneWrapper.dataset.tossed = "away";
+  cloneWrapper.style.translate = `${xDelta / distance * TOSS_DISTANCE}px ${yDelta / distance * TOSS_DISTANCE}px`;
+  try {
+    await onToss?.({
+      gestureInfo
+    });
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * It comes back where it came from, and only then is taken away — which is what
+ * makes the original reappear in place rather than blink back into it.
+ *
+ * Flown home on `translate` rather than by rewriting the position vars: the vars
+ * hold where the hand let go, the transition is on translate, and moving the vars
+ * would put the copy there instantly instead of taking it there.
+ */
+const settleCloneBack = (cloneWrapper, sourceElement) => {
+  const sourceRect = sourceElement.getBoundingClientRect();
+  const releaseLeft = parseFloat(cloneWrapper.style.getPropertyValue("--clone-left"));
+  const releaseTop = parseFloat(cloneWrapper.style.getPropertyValue("--clone-top"));
+  cloneWrapper.dataset.tossed = "back";
+  cloneWrapper.style.translate = `${sourceRect.left - releaseLeft}px ${sourceRect.top - releaseTop}px`;
+  return new Promise(resolve => {
+    setTimeout(resolve, TOSS_DURATION_MS);
+  });
+};
 const createDragClone = (element, pointerEvent) => {
   const rect = element.getBoundingClientRect();
   const wrapper = document.createElement("div");
@@ -11821,23 +12400,32 @@ const createDragClone = (element, pointerEvent) => {
   // scale(1.15) expands from where the user clicked, not the element center.
   // These offsets are element-relative so viewport coords are correct here.
   wrapper.style.setProperty("--drag-origin", `${pointerEvent.clientX - rect.left}px ${pointerEvent.clientY - rect.top}px`);
-  // The clone is appended to document.body, so it loses inherited styles
-  // from the original parent. Copy the computed inherited properties that
-  // are most likely to affect visual appearance.
-  const computedStyle = getComputedStyle(element.parentElement);
-  for (const property of INHERITED_PROPERTIES_TO_COPY_SET) {
-    wrapper.style.setProperty(property, computedStyle.getPropertyValue(property));
-  }
   const elementClone = element.cloneNode(true);
+  // A deep copy copies the ids too, and two elements answering to one id is a
+  // document that lies: getElementById picks whichever comes first, an anchor
+  // resolves to the wrong one, a view-transition-name is claimed twice and the
+  // transition is dropped. The copy is a picture of the thing, not another one of
+  // it — so it answers to no name at all.
+  elementClone.removeAttribute("id");
+  for (const descendantWithId of elementClone.querySelectorAll("[id]")) {
+    descendantWithId.removeAttribute("id");
+  }
   elementClone.setAttribute("navi-drag-clone", "");
+  // What is held is the copy, so it is the copy that must LOOK held: the caller
+  // dresses `[data-grabbed]` on its own element once, and the copy is that element.
+  // (The original wears it too, but it is hidden — see navi-drag-clone-source.)
+  elementClone.setAttribute("data-grabbed", "");
   elementClone.style.viewTransitionName = "navi-drag-clone";
   wrapper.appendChild(elementClone);
-  document.body.appendChild(wrapper);
+  // Beside the thing it copies, so it stands where that thing stands: every
+  // inherited value and every custom property the original reads, the copy reads
+  // too, and a rule written for an item in this list finds the copy as well. The
+  // top layer is what lets it stay there — a popover is painted above the page
+  // whatever its depth in the tree, and being fixed keeps it out of the
+  // scrollable overflow of the list it sits in.
+  element.parentElement.appendChild(wrapper);
   return wrapper;
 };
-const INHERITED_PROPERTIES_TO_COPY_SET = new Set(["color", "font-family", "font-size", "font-weight", "font-style", "line-height", "letter-spacing",
-// in case the item has border-radius: inherit. The clone can inherit too
-"border-radius"]);
 
 const startDragToResizeGesture = (
   pointerdownEvent,
@@ -11989,24 +12577,15 @@ import.meta.css = [/* css */`
   [data-drag-travel*="y"] * {
     overscroll-behavior-y: contain !important;
   }
-  :root[${WALKING_ATTRIBUTE}] {
-    /* A drag over text selects it on the way, and the blue trail says the
-       gesture was understood as something else. Not from the press: a press on
-       text IS how one selects it, and only a press that has become a travel has
-       said it was about something else — which is also why this cannot be the
-       whole answer, and why the selection made meanwhile is dropped by hand
-       (see dropSelection). */
-    user-select: none;
-  }
 `, "@jsenv/dom/src/interaction/drag/drag_to_travel.js"];
 
 // How far a pointer goes before it is a travel rather than a click: below this
 // a press that wandered a pixel is still a press, and nothing budges.
 const DRAG_START_THRESHOLD = 10;
 // How much of a box has to be pulled for letting go to carry on rather than put
-// things back. Under half, because a gesture that has clearly begun is an
-// intention: asking for the box to be dragged all the way across turns a travel
-// into work.
+// things back, when the caller does not say. Under half, because a gesture that
+// has clearly begun is an intention: asking for the box to be dragged all the
+// way across turns a travel into work.
 const DRAG_COMMIT_RATIO = 0.3;
 // A flick travels whatever the distance: the hand said "away" quickly, which is
 // the whole gesture — px/ms of pointer, and a few pixels to tell it from a tap
@@ -12073,29 +12652,6 @@ const axesLeftBy = (axes, fromElement, stopElement, attribute) => {
   return left;
 };
 
-/**
- * What the browser painted blue while it was still allowed to think this press
- * was about text.
- *
- * A mouse dragged across a page selects what it crosses, and it starts doing so
- * from the first pixel — while this is still spending ten of them deciding
- * whether the press is a travel at all. By the time it is one, a trail is
- * already there. `user-select: none` (see the CSS) stops it GROWING, it does not
- * take back what was made, and a selection already under way goes on being
- * extended by some browsers whatever the property says.
- *
- * So it is dropped, and dropped again as it comes back. The cause is outside —
- * one gesture, two things answering it, and the browser answers first — and
- * cannot be removed from here; what can be removed is its trace, on every frame
- * of a travel that is walking.
- */
-const dropSelection = () => {
-  const selection = window.getSelection();
-  if (selection && !selection.isCollapsed) {
-    selection.removeAllRanges();
-  }
-};
-
 /**
  * A scroller between the pointer and the box it is in, with room left the way
  * the gesture goes: it gets the gesture, and nothing travels — dragging a row
@@ -12136,7 +12692,8 @@ const travelsAfter = ({
   slack,
   size,
   velocity,
-  towardsSomething
+  towardsSomething,
+  commitRatio
 }) => {
   if (!towardsSomething) {
     return false;
@@ -12164,7 +12721,7 @@ const travelsAfter = ({
   // …and going towards it travels whatever the distance: the hand said "away"
   // quickly, which is the whole gesture.
   const flicked = goingFast && Math.abs(pulled) > DRAG_FLICK_DISTANCE;
-  return flicked || Math.abs(pulled) > size * DRAG_COMMIT_RATIO;
+  return flicked || Math.abs(pulled) > size * commitRatio;
 };
 
 /**
@@ -12196,6 +12753,11 @@ const travelsAfter = ({
  *   pixel since the grab is owed to the hand. The axis comes from the caller
  *   rather than from the movement, because there is nothing to decide — what
  *   was caught is travelling on one already.
+ * @param {number} [options.commitRatio=0.3] - what fraction of the box has to
+ *   be pulled for letting go to carry on rather than put things back. A
+ *   fraction and never a distance, so the same gesture asks for the same thing
+ *   on a phone and on a wide screen. Speed still answers on its own (see
+ *   travelsAfter), whatever this says.
  * @param {(detail: {axis: string, sign: number, target: Element, event: PointerEvent}) => false|{size: number, slack?: number, travelBack?: boolean, travelOn?: boolean}} options.onStart
  *   - the finger has picked its axis. Answer `false` to give the gesture up, or
  *   with the geometry it walks: `size` (one box along that axis), `slack` (how
@@ -12226,6 +12788,7 @@ const startDragToTravel = (pointerDownEvent, {
   element,
   axes = "xy",
   immediate = false,
+  commitRatio = DRAG_COMMIT_RATIO,
   onStart,
   onPull,
   onEnd,
@@ -12407,9 +12970,6 @@ const startDragToTravel = (pointerDownEvent, {
         };
         document.documentElement.setAttribute(WALKING_ATTRIBUTE, axis);
       }
-      // Whatever the press was taken for until now, it was taken for something
-      // else (see dropSelection).
-      dropSelection();
       const {
         axis
       } = travel;
@@ -12471,10 +13031,6 @@ const startDragToTravel = (pointerDownEvent, {
         return;
       }
       finish();
-      // Last chance: the pointer moves once more as it goes up, and by then the
-      // attribute above is off — so a trail made on that last move would be the
-      // one that stays (see dropSelection).
-      dropSelection();
       const {
         axis,
         size,
@@ -12497,7 +13053,8 @@ const startDragToTravel = (pointerDownEvent, {
           slack,
           size,
           velocity,
-          towardsSomething
+          towardsSomething,
+          commitRatio
         }),
         cancelled,
         event: releaseEvent
@@ -18312,4 +18869,4 @@ const useResizeStatus = (elementRef, { as = "number" } = {}) => {
   };
 };
 
-export { EASING, ELEMENT_SIZE_CHANGE, activeElementSignal, addActiveElementEffect, addAttributeEffect, allowWheelThrough, appendStyles, applyNewPosition, canScroll, captureScrollState, chainEvent, claimWheelGesture, closestOpenableAncestor, contrastColor, createBackgroundColorTransition, createBackgroundTransition, createBorderRadiusTransition, createBorderTransition, createDragGestureController, createDragToMoveGestureController, createEventGroupLogger, createGroupTransitionController, createHeightTransition, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dispatchCustomEvent, dispatchInternalCustomEvent, dispatchPublicCustomEvent, dragAfterIntent, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findEvent, findFocusDelegateTarget, findFocusable, findSelfOrAncestorFixedPosition, formatEventSideEffect, getAncestorOpenType, getAvailableHeight, getAvailableWidth, getBackground, getBackgroundColor, getBorder, getBorderRadius, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getHeightWithoutTransition, getInnerHeight, getInnerWidth, getKeyboardEventDefaultAction, getLuminance, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getOpacityWithoutTransition, getPaddingSizes, getPositionedParent, getPositioningScrollOffset, getPreferedColorScheme, getScrollBox, getScrollContainer, getScrollContainerSet, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateXWithoutTransition, getTranslateY, getVisuallyVisibleInfo, getWidth, getWidthWithoutTransition, hasCSSSizeUnit, initFlexDetailsSet, initFocusGroup, initPositionSticky, isAncestorOpen, isPrimaryButtonEvent, isSameColor, isScrollable, measureLongestVisualLineWidth, measureScrollbar, measureWidestChildRow, mergeOneStyle, mergeTwoStyles, normalizeKeyboardKey, normalizeStyle, normalizeStyles, observeAncestorOpenState, onAncestorReopen, parsePositionArea, parseStyle, performTabNavigation, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, preventIntermediateScrollbar, releaseWheelGesture, resolveCSSColor, resolveCSSSize, resolveColorLuminance, resolveOklchLightness, scrollIntoViewScoped, scrollIntoViewWithStickyAwareness, scrollRoomTowards, setAttribute, setAttributes, setStyles, snapToPixel, startDragToReorder, startDragToResizeGesture, startDragToTravel, stickyAsRelativeCoords, stringifyStyle, subscribeVisualViewportResizeSettled, subscribeWindowResizeSettled, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect, watchWheelTravel, wheelGestureIsTakenFrom };
+export { EASING, ELEMENT_SIZE_CHANGE, activeElementSignal, addActiveElementEffect, addAttributeEffect, allowWheelThrough, appendStyles, applyNewPosition, canScroll, captureScrollState, chainEvent, claimWheelGesture, closestOpenableAncestor, contrastColor, createBackgroundColorTransition, createBackgroundTransition, createBorderRadiusTransition, createBorderTransition, createDragGestureController, createDragToMoveGestureController, createEventGroupLogger, createGroupTransitionController, createHeightTransition, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dispatchCustomEvent, dispatchInternalCustomEvent, dispatchPublicCustomEvent, dragAfterIntent, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findEvent, findFocusDelegateTarget, findFocusable, findSelfOrAncestorFixedPosition, formatEventSideEffect, getAncestorOpenType, getAvailableHeight, getAvailableWidth, getBackground, getBackgroundColor, getBorder, getBorderRadius, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getHeightWithoutTransition, getInnerHeight, getInnerWidth, getKeyboardEventDefaultAction, getLuminance, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getOpacityWithoutTransition, getPaddingSizes, getPositionedParent, getPositioningScrollOffset, getPreferedColorScheme, getScrollBox, getScrollContainer, getScrollContainerSet, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateXWithoutTransition, getTranslateY, getVisuallyVisibleInfo, getWidth, getWidthWithoutTransition, hasCSSSizeUnit, initFlexDetailsSet, initFocusGroup, initPositionSticky, isAncestorOpen, isPrimaryButtonEvent, isSameColor, isScrollable, measureLongestVisualLineWidth, measureScrollbar, measureWidestChildRow, mergeOneStyle, mergeTwoStyles, normalizeKeyboardKey, normalizeStyle, normalizeStyles, observeAncestorOpenState, onAncestorReopen, parsePositionArea, parseStyle, performTabNavigation, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, preventIntermediateScrollbar, releaseWheelGesture, resolveCSSColor, resolveCSSSize, resolveColorLuminance, resolveOklchLightness, scrollIntoViewScoped, scrollIntoViewWithStickyAwareness, scrollRoomTowards, setAttribute, setAttributes, setStyles, snapToPixel, startDragTo, startDragToResizeGesture, startDragToTravel, stickyAsRelativeCoords, stringifyStyle, subscribeVisualViewportResizeSettled, subscribeWindowResizeSettled, suppressClickAfterGesture, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect, waitForPressHeld, watchWheelTravel, wheelGestureIsTakenFrom };