@celestia-island/hikari 0.43.8 → 0.43.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.43.8",
+  "version": "0.43.9",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkTagInput.test.tsx

@@ -1547,7 +1547,7 @@ describe("HkTagInput panel geometry and drag reordering", () => {
     expect(tagTexts(container)).toEqual(["Technology", "Germany", "News"]);
   });
 
-  it("ends a row drag when the host reorders the list under it", async () => {
+  it("follows the row it grabbed when the host reorders the list under it", async () => {
     const { events, container, model } = mountTagInput({ modelValue: ["news", "tech", "de"] });
     await openPanel(container);
     const selected = reorderableRows();
@@ -1555,8 +1555,9 @@ describe("HkTagInput panel geometry and drag reordering", () => {
 
     holdPointer({ x: 10, y: 10 }, { x: 10, y: 130 }, grip(selected[0]));
     await settle();
-    // The host rewrites its own order out of band while the drag is held:
-    // the index the drag resolves by no longer names the row it grabbed.
+    // The host rewrites its own order out of band while the drag is held: the
+    // index the drag landed at names a different row now, but the row the
+    // pointer is holding is still the one being moved.
     model.value = ["de", "news", "tech"];
     await settle();
     expect(rowLabels().slice(0, 3)).toEqual(["Germany", "News", "Technology"]);
@@ -1564,10 +1565,35 @@ describe("HkTagInput panel geometry and drag reordering", () => {
     releasePointer({ x: 10, y: 130 });
     await settle();
 
-    // The gesture ends without a reorder — a drag may come to nothing, it
-    // must never move whichever row slid into the index it was holding.
-    expect(events.modelValue, "no reorder came out of the rewritten strip").toEqual([]);
-    expect(tagTexts(container)).toEqual(["Germany", "News", "Technology"]);
+    // "News" — the row the pointer grabbed — moved to the slot it was dragged
+    // to, in the strip's own new order: the released gesture is never
+    // silently replaced by a move of whichever row slid into that index.
+    expect(events.modelValue.at(-1)).toEqual(["de", "tech", "news"]);
+    expect(tagTexts(container)).toEqual(["Germany", "Technology", "News"]);
+  });
+
+  it("keeps a dragged chip on the chip it grabbed when a × removes another one mid-drag", async () => {
+    const { events, container } = mountTagInput({ modelValue: ["news", "tech", "de"] });
+    const strip = tags(container);
+    pinStrip(strip, 60, "x");
+
+    // A second pair of eyes on the same list: the × of the FIRST chip is
+    // clicked while the SECOND is being dragged. The field re-lays out under
+    // the held pointer and the dragged chip slides one index left — so the
+    // index the press landed at names the wrong chip by the time the pointer
+    // comes up, and the drop has to stay on the chip the pointer is holding.
+    holdPointer({ x: 70, y: 10 }, { x: 200, y: 10 }, strip[1]);
+    await settle();
+    closeButtons(container)[0].click();
+    await settle();
+    expect(tagTexts(container), "the × landed").toEqual(["Technology", "Germany"]);
+
+    releasePointer({ x: 200, y: 10 });
+    await settle();
+
+    // "Technology" — the grabbed chip — lands last, in the field's own order.
+    expect(events.modelValue.at(-1)).toEqual(["de", "tech"]);
+    expect(tagTexts(container)).toEqual(["Germany", "Technology"]);
   });
 
   it("clamps a row drag to the selected group", async () => {

package/src/components/HkTagInput.tsx

@@ -460,14 +460,15 @@ export const HkTagInput = defineComponent({
       const stop = activeStop.value;
       if (props.disabled || !stop || stop.kind !== "option") return false;
       // A live press OWNS the order — either list's, and from the moment
-      // the press lands rather than from the moment it turns into a drag:
-      // the drag resolves its landing slot by INDEX, so a reorder under the
-      // held pointer (or under a press that is about to become one) would
-      // leave the release moving whatever now sits at that index — a
-      // different row, silently. The chord is still consumed by the caller
-      // either way (Alt+Arrow is not a plain arrow, and the browser must
-      // not act on it); it just has nothing to move while a pointer owns
-      // the list.
+      // the press lands rather than from the moment it turns into a drag.
+      // The drag would survive a reorder (it moves the ELEMENT the press
+      // grabbed, re-reading its index as it goes), but the item's geometry
+      // is the one the press read: reordering the strip under a held pointer
+      // leaves the drag resolving against a place its item no longer
+      // occupies, which is how a gesture ends up quietly doing nothing. So
+      // the chord is inert while a pointer owns the list. It is still
+      // consumed by the caller either way (Alt+Arrow is not a plain arrow,
+      // and the browser must not act on it).
       if (chipDrag.pressed.value || rowDrag.pressed.value) return false;
       const group = selectedRows.value;
       const from = group.findIndex((option) => option.key === stop.option.key);

package/src/composables/usePointerReorder.test.ts

@@ -218,6 +218,56 @@ function scrollStrip(
   return { container, items };
 }
 
+/** A strip whose frame IS the scroller it sits in — the frame's box, its
+ *  LAID-OUT size (`offsetWidth`/`offsetHeight`, which no transform touches)
+ *  and its scroll offsets all answer as a browser would, and `scene` lets a
+ *  test scale and scroll the whole thing mid-gesture. */
+function scrollerStrip(
+  count: number,
+  size: number,
+  height: number,
+): {
+  frame: HTMLElement;
+  items: HTMLElement[];
+  scene: { scale: number; scroll: number; laid: number };
+} {
+  const frame = document.createElement("div");
+  document.body.appendChild(frame);
+  const scene = { scale: 1, scroll: 0, laid: count * size };
+  Object.defineProperty(frame, "offsetWidth", { configurable: true, get: () => scene.laid });
+  Object.defineProperty(frame, "offsetHeight", { configurable: true, get: () => height });
+  Object.defineProperty(frame, "scrollLeft", { configurable: true, get: () => scene.scroll });
+  Object.defineProperty(frame, "scrollTop", { configurable: true, get: () => 0 });
+  Object.defineProperty(frame, "getBoundingClientRect", {
+    configurable: true,
+    value: () =>
+      asRect({
+        left: 0,
+        right: scene.laid * scene.scale,
+        top: 0,
+        bottom: height * scene.scale,
+      }),
+  });
+  const items = Array.from({ length: count }, (_, i) => {
+    const el = document.createElement("div");
+    Object.defineProperty(el, "getBoundingClientRect", {
+      configurable: true,
+      value: () => {
+        const start = (i * size - scene.scroll) * scene.scale;
+        return asRect({
+          left: start,
+          right: start + size * scene.scale,
+          top: 0,
+          bottom: height * scene.scale,
+        });
+      },
+    });
+    frame.appendChild(el);
+    return el;
+  });
+  return { frame, items, scene };
+}
+
 const scopes: EffectScope[] = [];
 
 /** Mount the composable inside a real effect scope (the component case). */
@@ -874,7 +924,7 @@ describe("usePointerReorder", () => {
 
     press(handle, items, 0, { x: 10, y: 20 });
     move(150, 20);
-    items.reverse(); // the strip reorders under the drag: it must give way
+    items.shift(); // the strip drops the very chip the pointer is holding
     move(260, 20);
     up(260, 20);
     expect(drops).toEqual([]);
@@ -886,15 +936,15 @@ describe("usePointerReorder", () => {
     expect(clicks).toEqual(["row"]);
   });
 
-  it("abandons a drag whose strip reorders under it rather than dropping a foreign item", () => {
-    // The caller hands its items over in DISPLAY order, so the index a drag
-    // resolves is only meaningful while that index still names the element
-    // the press grabbed. A strip that reorders mid-gesture — a host edit
-    // from outside, a keyboard reorder, a row toggled by a second pointer, a
-    // leaving item that finally leaves — puts a different element there, and
-    // a drop resolved from that index would move whichever item slid into
-    // the slot: never the one the pointer is holding. The gesture ends
-    // instead, without a reorder.
+  it("follows the element it grabbed when the strip reorders under it", () => {
+    // The caller hands its items over in DISPLAY order, and the index a drag
+    // landed at is only the way the resolution names the element. A strip
+    // that reorders mid-gesture — a host edit from outside, a row toggled by
+    // a second pointer, a chip's ×, an Enter, a query that filters rows out —
+    // moves the elements under those indices, and the drag has to follow the
+    // ELEMENT: resolving the press-time index would move whichever item slid
+    // into it, and giving way would throw away a gesture the user is still
+    // holding.
     const items = boxes([
       { left: 0, right: 100, top: 0, bottom: 40 },
       { left: 100, right: 200, top: 0, bottom: 40 },
@@ -907,16 +957,160 @@ describe("usePointerReorder", () => {
     expect(handle.dragging.value).toBe(true);
     expect(handle.dragOver.value, "150 is past the first chip's midpoint").toBe(1);
 
-    // The strip reorders under the live drag: index 0 is another chip now.
-    items.reverse();
+    // The host moves the LAST chip to the front: the strip is now
+    // [C, A, B], so the chip the pointer grabbed sits at index 1.
+    const [grabbed, middle, last] = items;
+    const moved = [last, grabbed, middle];
+    moved.forEach((el, i) => reshape(el, { left: i * 100, right: i * 100 + 100, top: 0, bottom: 40 }));
+    items.splice(0, items.length, ...moved);
     move(260, 20);
-    expect(handle.dragging.value, "the drag ended with the strip it was reading").toBe(false);
+    expect(handle.dragging.value, "the drag is still the one the pointer started").toBe(true);
+    expect(handle.dragFrom.value, "the lift follows the chip it grabbed").toBe(1);
+    expect(handle.dragOver.value, "260 is past the second chip's midpoint of 250").toBe(2);
+    up(260, 20);
+    expect(drops, "the drop is reported in the indices the strip has now").toEqual([[1, 2]]);
+  });
+
+  it("ends the gesture the moment the strip empties", () => {
+    // Nothing left to resolve against is the same answer as the element being
+    // gone: the gesture is over then, not at the release — a drag left
+    // "running" against an empty strip would keep publishing a slot it can no
+    // longer read, and would not swallow the click it owes.
+    const items = boxes([
+      { left: 0, right: 100, top: 0, bottom: 40 },
+      { left: 100, right: 200, top: 0, bottom: 40 },
+      { left: 200, right: 300, top: 0, bottom: 40 },
+    ]);
+    const { handle, drops } = harness("x", items);
+    const inner = document.createElement("span");
+    items[0].appendChild(inner);
+    const clicks: string[] = [];
+    inner.addEventListener("click", () => clicks.push("row"));
+
+    press(handle, items, 0, { x: 10, y: 20 });
+    move(150, 20);
+    expect(handle.dragging.value).toBe(true);
+
+    items.splice(0, items.length); // every item goes at once
+    move(260, 20);
+    expect(handle.dragging.value, "the gesture ended with the strip").toBe(false);
+    expect(handle.dragFrom.value).toBe(-1);
+    expect(handle.dragOver.value).toBe(-1);
+    up(260, 20);
+    expect(drops).toEqual([]);
+    inner.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(clicks, "…and its trailing click was swallowed").toEqual([]);
+  });
+
+  it("abandons a drag whose pressed item leaves the strip", () => {
+    // The other side of the same rule: a strip that no longer carries the
+    // element at all — it was removed, or a drag of it can no longer land
+    // anywhere — has nothing for the gesture to move, so it ends without a
+    // reorder.
+    const items = boxes([
+      { left: 0, right: 100, top: 0, bottom: 40 },
+      { left: 100, right: 200, top: 0, bottom: 40 },
+      { left: 200, right: 300, top: 0, bottom: 40 },
+    ]);
+    const { handle, drops } = harness("x", items);
+
+    press(handle, items, 0, { x: 10, y: 20 });
+    move(150, 20);
+    expect(handle.dragOver.value).toBe(1);
+
+    items.shift(); // the chip the pointer is holding is gone
+    move(260, 20);
+    expect(handle.dragging.value, "the drag ended with the strip").toBe(false);
     expect(handle.dragFrom.value).toBe(-1);
     expect(handle.dragOver.value).toBe(-1);
     up(260, 20);
     expect(drops, "nothing was dropped").toEqual([]);
   });
 
+  it("carries the snapshot exactly through a frame that scrolls AND is scaled", () => {
+    // The frame here is the scroller the strip SITS IN — the shape this
+    // composable documents — and the host zooms it mid-drag while it is
+    // scrolled. The frame's own scroll slides the content inside a box that
+    // does not move, and it does so in the frame's LAYOUT units: taken off
+    // the drawn box as a raw offset it is measured at the wrong magnitude
+    // the moment the frame is scaled (by `(scale - 1) x scroll`, here 300px
+    // on a 2x zoom), and the snapshot drifts off the item it belongs to. The
+    // pointer here is past the third chip and before the fourth, so the
+    // drifted snapshot answers "stay where you are" where the strip answers
+    // "land after the fourth".
+    const { items, scene } = scrollerStrip(5, 100, 40);
+    const { handle, drops } = harness("x", items);
+
+    press(handle, items, 2, { x: 250, y: 20 });
+    scene.scale = 2; // the host zooms the strip…
+    scene.scroll = 300; // …while it is scrolled under the live drag
+    move(100, 20);
+    expect(handle.dragging.value).toBe(true);
+    expect(handle.dragOver.value, "past the third chip, before the fourth").toBe(3);
+    up(100, 20);
+    expect(drops).toEqual([[2, 3]]);
+  });
+
+  it("reads a LAYOUT change as a layout change, not as a scale", () => {
+    // The frame's own box growing is not the frame being drawn bigger: the
+    // chips keep their place and their size, and the frame merely got wider
+    // around them. A carrier that reads the drawn box alone cannot tell the
+    // two apart, and would stretch the snapshot by the ratio of the two
+    // sizes — here it would answer "stay where you are" for a pointer the
+    // strip answers "land after the third chip".
+    const { items, scene } = scrollerStrip(5, 100, 40);
+    const { handle, drops } = harness("x", items);
+
+    press(handle, items, 1, { x: 150, y: 20 });
+    scene.laid = 1000; // the frame is re-laid out around the same chips
+    move(260, 20);
+    expect(handle.dragging.value).toBe(true);
+    expect(handle.dragOver.value, "260 is past the third chip's midpoint of 250").toBe(2);
+    up(260, 20);
+    expect(drops).toEqual([[1, 2]]);
+  });
+
+  it("carries the snapshot in the nearest frame that has a box", () => {
+    // A strip wrapped in an element that generates no box of its own
+    // (`display: contents`) is laid out by the next box up, and that is the
+    // box its content moves with: reading the boxless wrapper leaves the
+    // snapshot behind the moment the page scrolls the real frame.
+    const frame = document.createElement("div");
+    const wrapper = document.createElement("div");
+    frame.appendChild(wrapper);
+    document.body.appendChild(frame);
+    const scene = { shift: 0 };
+    reshape(frame, { left: 0, right: 300, top: 0, bottom: 40 });
+    Object.defineProperty(frame, "getBoundingClientRect", {
+      configurable: true,
+      value: () => {
+        const box = { left: 0, right: 300, top: scene.shift, bottom: scene.shift + 40 };
+        return asRect(box);
+      },
+    });
+    // The wrapper itself: no box at all, exactly as `display: contents` reports.
+    reshape(wrapper, { left: 0, right: 0, top: 0, bottom: 0 });
+    const items = [0, 100, 200].map((start) => {
+      const el = document.createElement("div");
+      Object.defineProperty(el, "getBoundingClientRect", {
+        configurable: true,
+        value: () =>
+          asRect({ left: start, right: start + 100, top: scene.shift, bottom: scene.shift + 40 }),
+      });
+      wrapper.appendChild(el);
+      return el;
+    });
+    const { handle, drops } = harness("x", items);
+
+    press(handle, items, 0, { x: 10, y: 20 });
+    scene.shift = 40; // the page scrolls the strip a line up under the drag
+    move(150, 20);
+    expect(handle.dragging.value).toBe(true);
+    expect(handle.dragOver.value, "the chips kept their places inside the frame").toBe(1);
+    up(150, 20);
+    expect(drops).toEqual([[0, 1]]);
+  });
+
   it("keeps the pressed item's geometry on the content when the frame is SCALED under it", () => {
     // A `scale()` or a zoom painted on the frame — or on an ancestor — during
     // a live drag is not a movement the frame's DISPLACEMENT can describe:

package/src/composables/usePointerReorder.ts

@@ -75,8 +75,10 @@ export interface PointerReorder {
    *  crossed the threshold into a drag. The strip is this gesture's until
    *  it ends, so a caller that can change the order by other means (the
    *  panel's own keyboard reorder, a host edit) can hold off while this is
-   *  `true`: the drag resolves by INDEX, and an order that moves under it
-   *  is an order the release would misread. */
+   *  `true`: the drag moves the element the press grabbed and the snapshot
+   *  it resolves by is the one the press read, so an order that reorders the
+   *  strip under the gesture is an order resolved against geometry its item
+   *  no longer occupies. */
   pressed: Ref<boolean>;
   /** Watch a press on item `index` (item 0 of `items()` is index 0).
    *  Nothing is reported until the pointer travels past the threshold,
@@ -191,7 +193,13 @@ export function indexAt(
  * before the lift is painted on it (`start`) and carried along with the
  * frame it was read in, however that frame moves under the drag — so no
  * transform an item picks up mid-drag can move the line it is dragged along
- * or the midpoint it is compared against.
+ * or the midpoint it is compared against. The drag is moved BY ELEMENT: the
+ * press records the element it landed on and every resolution re-reads that
+ * element's index from the live strip, so a list that reorders under the
+ * gesture (a host edit, a second pointer, a removal elsewhere) keeps the
+ * drop on what the pointer is holding instead of on whatever slid into the
+ * index it started at — and a gesture whose element is gone from the strip
+ * ends without a reorder.
  *
  * The threshold is what keeps the gesture honest on a control that is also
  * clickable: a press under ~6px is not a drag at all — no state is
@@ -236,15 +244,19 @@ export function usePointerReorder(options: PointerReorderOptions): PointerReorde
   let lastMain = 0;
   let lastCross = 0;
   /** The pressed item's LAYOUT geometry (`null` until a press reads it), the
-   *  FRAME it was laid out in (its parent element) and where that frame sat
-   *  when the geometry was read — the whole drag resolves against this
-   *  instead of the item's live rect, which carries the lift. */
+   *  FRAME it was laid out in (its parent element) and that frame's reading
+   *  when the geometry was taken — the whole drag resolves against this
+   *  instead of the item's live rect, which carries the lift. The geometry
+   *  stays the press's even if the ELEMENT is re-anchored to another index
+   *  mid-gesture (`slotAt`): the pointer grabbed it where it was. */
   let pressedBand: { lo: number; hi: number } | null = null;
   let pressedMid = 0;
   let pressedFrame: HTMLElement | null = null;
-  let pressedFrameBox: { x: number; y: number; w: number; h: number } | null = null;
-  /** The very ELEMENT the press landed on: the index the drag resolves by
-   *  is only meaningful while that index still names it (see `slotAt`). */
+  let pressedFrameBox: FrameBox | null = null;
+  /** The very ELEMENT the press landed on. The drag is moved BY element:
+   *  the index is re-read from it on every resolution, so a strip that
+   *  reorders under the gesture keeps the drop on what the pointer grabbed
+   *  (`slotAt`). */
   let pressedItem: HTMLElement | null = null;
   /** Auto-scroll: px per frame (signed: negative scrolls back), 0 = off. */
   let scrollVelocity = 0;
@@ -262,87 +274,145 @@ export function usePointerReorder(options: PointerReorderOptions): PointerReorde
     return options.items().filter((el): el is HTMLElement => el != null);
   }
 
-  /** The slot the live strip resolves for a pointer at (`main`, `cross`),
-   *  starting from index `from` — the elements measured, then handed to
-   *  `indexAt`, which carries the geometry's rules. One thing is checked
-   *  first: that the INDEX still names the element the press grabbed — a
-   *  keyboard reorder, a host edit, a row toggled by a second pointer or a
-   *  leaving item finally leaving all put a different element there. When it
-   *  does not, the gesture is abandoned rather than resolved: a drag may end
-   *  without a reorder, it never lands on an item the pointer did not
-   *  grab. */
-  function slotAt(main: number, cross: number, from: number): number {
+  /** The slot the live strip resolves for a pointer at (`main`, `cross`).
+   *  The press is on an ELEMENT, and the index it landed at is only the way
+   *  the resolution names it — so the index is re-read from the element
+   *  first: anything that reorders the strip under the gesture (a host edit,
+   *  a row toggled by a second pointer, a chip's ×, an Enter, a query that
+   *  filters rows out) moves the elements under those indices, while the
+   *  element the pointer grabbed is still the one being dragged. The
+   *  resolution then follows IT, and the caller's `onDrop` gets the indices
+   *  the strip has now. Only a strip that no longer carries the element at
+   *  all — it was removed, or a drag of it can no longer land anywhere —
+   *  ends the gesture, and it ends without a reorder. */
+  function slotAt(main: number, cross: number): number {
     const items = liveItems();
-    if (items.length === 0) return -1;
-    if (pressedItem && items[pressedIndex] !== pressedItem) {
+    if (items.length === 0) {
       abandonDrag();
       return -1;
     }
+    if (pressedItem) {
+      const index = items.indexOf(pressedItem);
+      if (index < 0) {
+        abandonDrag();
+        return -1;
+      }
+      if (index !== pressedIndex) {
+        pressedIndex = index;
+        if (dragging.value) dragFrom.value = index;
+      }
+    }
     return indexAt(
       items.map((item) => item.getBoundingClientRect()),
       axis,
       main,
       cross,
-      from,
+      pressedIndex,
       layoutOrigin(),
     );
   }
 
-  /** Where a frame's CONTENT sits in viewport coordinates — the box the
-   *  item is laid out in, minus that box's own scroll, which is the point
-   *  its children move with — and how big that box is. A scroller the items
-   *  sit directly in scrolls its children without moving its own box, so
-   *  the scroll has to come off explicitly; for every other element the
-   *  offsets are 0 and this is its box origin.
-   *
-   *  The scroll comes off at its own scale, which is right whenever the
-   *  frame is not ALSO transformed: this is a raw offset against a rect the
-   *  browser has already transformed, so a `scale()` on a frame that is
-   *  itself a scroller AND is scaled mid-drag would take it off at the
-   *  wrong magnitude — out of contract here, and the shapes this is written
-   *  for (a wrapping field, a panel list) are not scrollers at all: the
-   *  surface that scrolls them is their ancestor, and an ancestor's scroll
-   *  moves the frame's box like any other translation. */
-  function frameBox(frame: HTMLElement): { x: number; y: number; w: number; h: number } {
+  /**
+   * Everything the frame says about where it puts a coordinate: the box the
+   *  item is laid out in — where it is drawn (`x`/`y`), how big it is drawn
+   *  (`w`/`h`) and how big it is LAID OUT (`laidW`/`laidH`, which no
+   *  transform touches, so the two together are the scale it is drawn at) —
+   *  and the scroll that slides its children inside that box.
+   */
+  interface FrameBox {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    laidW: number;
+    laidH: number;
+    scrollX: number;
+    scrollY: number;
+  }
+
+  /** The nearest ancestor of `item` that is actually LAID OUT. A snapshot
+   *  can only be carried in a frame that has a box to move it: an element
+   *  with `display: contents` generates none, and its children are laid out
+   *  by the next box up — which is the frame whose movement they follow. A
+   *  tree with no boxes anywhere (no layout engine at all, a test
+   *  environment) walks out of ancestors and keeps the parent it started
+   *  with. */
+  function layoutFrameOf(item: HTMLElement): HTMLElement | null {
+    for (let el = item.parentElement; el; el = el.parentElement) {
+      const rect = el.getBoundingClientRect();
+      if (rect.width > 0 || rect.height > 0 || el.offsetWidth > 0 || el.offsetHeight > 0) return el;
+    }
+    return item.parentElement;
+  }
+
+  /** Read the frame as it is right now (see `FrameBox`). */
+  function frameBox(frame: HTMLElement): FrameBox {
     const rect = frame.getBoundingClientRect();
     return {
-      x: rect.left - frame.scrollLeft,
-      y: rect.top - frame.scrollTop,
+      x: rect.left,
+      y: rect.top,
       w: rect.width,
       h: rect.height,
+      laidW: frame.offsetWidth,
+      laidH: frame.offsetHeight,
+      scrollX: frame.scrollLeft,
+      scrollY: frame.scrollTop,
     };
   }
 
-
-  /** The pressed item's layout geometry for `indexAt`, placed in the frame's
-   *  box AS IT IS NOW. The snapshot is in VIEWPORT coordinates, so anything
+  /** The pressed item's layout geometry for `indexAt`, placed where the
+   *  frame puts it NOW. The snapshot is in VIEWPORT coordinates, so anything
    *  that moves the frame under it — the auto-scroll this composable drives,
    *  a host scrolling the surface or any scroller above it, a page scroll, a
-   *  re-parent, a transform on an ancestor — has to be carried with it, or
-   *  the line the item was laid out on would be compared against siblings
-   *  that have since moved away from it. `null` before any press, and for a
-   *  press whose item was not in the strip.
+   *  re-parent, a transform on the frame or on an ancestor — has to be
+   *  carried with it, or the line the item was laid out on would be compared
+   *  against siblings that have since moved away from it. `null` before any
+   *  press, and for a press whose item was not in the strip.
+   *
+   *  The carrier is the frame's own reading of a coordinate: the snapshot
+   *  travels to wherever the frame puts that same place in its layout now,
+   *  which is exact for the three things that can move it —
    *
-   *  The carrier is the frame's BOX: a coordinate travels by the box's
-   *  displacement when the box keeps its size (a scroll of any kind, a
-   *  re-parent, a translation) and keeps its place INSIDE the box when the
-   *  box is resized — which is what a `scale()` or a zoom painted on the
-   *  frame or on an ancestor does to it, the box growing and shrinking with
-   *  the content it holds. A frame with no extent to scale against (no
-   *  layout at all, a `display: contents` frame) falls back to the
+   *   - a DISPLACEMENT of the frame (a page scroll, a re-parent, a
+   *     translation) moves the snapshot by the same amount;
+   *   - the frame's own SCROLL slides its children inside a box that does not
+   *     move, so it is taken off inside the frame's own units rather than in
+   *     drawn pixels (`sample`);
+   *   - a `scale()` or a zoom — on the frame or on an ancestor — keeps the
+   *     snapshot at the same place INSIDE the frame, which is what the frame
+   *     does to everything it holds, so the placement scales with it.
+   *
+   *  A frame with no box to read any of this from falls back to the plain
    *  displacement. */
   function layoutOrigin(): PointerReorderOrigin | null {
     if (!pressedBand || !pressedFrameBox) return null;
     const at = pressedFrameBox;
     const now = pressedFrame && pressedFrame.isConnected ? frameBox(pressedFrame) : at;
+    /** Where the frame draws a coordinate it drew at `from` when the press
+     *  was read: how far it sat from the frame's content origin, taken
+     *  against the scroll the frame has moved since, drawn again at the
+     *  scale the frame carries now. A frame whose LAID-OUT size cannot be
+     *  read (no layout engine, `display: contents`) answers with the ratio
+     *  of its drawn sizes, and takes its own scroll off raw — the reading
+     *  every frame got before the scale was measurable at all. A frame with
+     *  no box and no scroll of its own — one that cannot be read at all —
+     *  carries nothing, so the snapshot stays where the press put it. */
     const carry = (value: number, along: "x" | "y"): number => {
       const from = along === "x" ? at.x : at.y;
-      const fromSpan = along === "x" ? at.w : at.h;
       const to = along === "x" ? now.x : now.y;
-      const toSpan = along === "x" ? now.w : now.h;
-      return fromSpan > 0 && toSpan > 0
-        ? to + ((value - from) * toSpan) / fromSpan
-        : to + (value - from);
+      const drawnFrom = along === "x" ? at.w : at.h;
+      const drawnTo = along === "x" ? now.w : now.h;
+      const laidFrom = along === "x" ? at.laidW : at.laidH;
+      const laidTo = along === "x" ? now.laidW : now.laidH;
+      const scrollFrom = along === "x" ? at.scrollX : at.scrollY;
+      const scrollTo = along === "x" ? now.scrollX : now.scrollY;
+      if (laidFrom > 0 && laidTo > 0) {
+        const scaleFrom = drawnFrom / laidFrom;
+        const scaleTo = drawnTo / laidTo;
+        return to + (scaleTo / scaleFrom) * (value - from) + scaleTo * (scrollFrom - scrollTo);
+      }
+      const ratio = drawnFrom > 0 && drawnTo > 0 ? drawnTo / drawnFrom : 1;
+      return to + ratio * (value - from) + (scrollFrom - scrollTo);
     };
     const down = axis === "x" ? "y" : "x";
     const lo = carry(pressedBand.lo, down);
@@ -403,7 +473,7 @@ export function usePointerReorder(options: PointerReorderOptions): PointerReorde
     } else {
       container.scrollTop = next;
     }
-    const over = slotAt(lastMain, lastCross, pressedIndex);
+    const over = slotAt(lastMain, lastCross);
     if (over >= 0) dragOver.value = over;
     scrollFrameId = requestAnimationFrame(scrollTick);
   }
@@ -527,16 +597,18 @@ export function usePointerReorder(options: PointerReorderOptions): PointerReorde
     const at = pointerAt(event);
     lastMain = at.main;
     lastCross = at.cross;
-    const over = slotAt(lastMain, lastCross, pressedIndex);
+    const over = slotAt(lastMain, lastCross);
     if (over >= 0) dragOver.value = over;
     syncAutoScroll();
   }
 
   function onPointerUp(event: PointerEvent): void {
     if (!pressed.value || event.pointerId !== pointerId) return;
-    const from = pressedIndex;
     const at = pointerAt(event);
-    const to = moved ? slotAt(at.main, at.cross, from) : from;
+    // The slot is resolved first: it re-reads the pressed ELEMENT's index
+    // from the live strip, and that is the index the drop is reported with.
+    const to = moved ? slotAt(at.main, at.cross) : pressedIndex;
+    const from = pressedIndex;
     const dropped = moved && to >= 0 && to !== from;
     // The drag is over either way — the trap only guards the click the
     // browser is about to deliver.
@@ -545,11 +617,12 @@ export function usePointerReorder(options: PointerReorderOptions): PointerReorde
     if (dropped) options.onDrop(from, to);
   }
 
-  /** End a drag that must not resolve — the strip it was reading is no
-   *  longer the strip the press grabbed. The trailing click is swallowed
-   *  exactly as a drop's is: this WAS a drag (the pointer travelled past the
-   *  threshold), and the click the browser is about to deliver at wherever
-   *  the finger came to rest is one the user never made. */
+  /** End a drag that must not resolve — the strip no longer carries the
+   *  element the press grabbed, so there is nothing for the gesture to move.
+   *  The trailing click is swallowed exactly as a drop's is: this WAS a drag
+   *  (the pointer travelled past the threshold), and the click the browser is
+   *  about to deliver at wherever the finger came to rest is one the user
+   *  never made. */
   function abandonDrag(): void {
     if (moved) trapClick();
     releaseDrag();
@@ -594,7 +667,7 @@ export function usePointerReorder(options: PointerReorderOptions): PointerReorde
         ? rect.left + rect.width / 2
         : rect.top + rect.height / 2
       : 0;
-    pressedFrame = item?.parentElement ?? null;
+    pressedFrame = item ? layoutFrameOf(item) : null;
     pressedFrameBox = pressedFrame ? frameBox(pressedFrame) : null;
     pressedItem = item ?? null;
     originX = event.clientX;