@celestia-island/hikari 0.43.8 → 0.43.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.43.8",
+  "version": "0.43.10",
   "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,172 @@ 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 };
+}
+
+/** A strip a BROWSER could have laid out: every element reports both of the
+ *  readings a real engine keeps apart — the box it is DRAWN in
+ *  (`getBoundingClientRect`, which every transform moves) and the box it is
+ *  LAID OUT in (`offsetLeft`/`offsetTop`/`offsetWidth`/`offsetHeight` along
+ *  an `offsetParent` chain, which no transform touches). One model drives
+ *  both, exactly as a browser would, so a test can re-lay the strip out (a
+ *  reorder, an insertion, a font change) or paint a transform on it and see
+ *  which reading the resolution followed. */
+function laidStrip(
+  layout: Box[],
+  frameLayout: { left: number; top: number; w: number; h: number },
+  frameDrawn: Box,
+  scene: {
+    scale?: number;
+    scroll?: number;
+    border?: { left: number; top: number };
+    /** The frame is `position: static`, so it is nobody's `offsetParent`:
+     *  the items' layout numbers are then measured from further up — the
+     *  fact that decides whether the frame's border still has to be added. */
+    staticFrame?: boolean;
+  } = {},
+): {
+  frame: HTMLElement;
+  items: HTMLElement[];
+  laid: Box[];
+  relayout: (next: Box[]) => void;
+  setFrameDrawn: (next: Box) => void;
+} {
+  const frame = document.createElement("div");
+  document.body.appendChild(frame);
+  const live = layout.map((box) => ({ ...box }));
+  const pins: Array<() => void> = [];
+  const border = scene.border ?? { left: 0, top: 0 };
+  const sceneOf = () => ({ scale: scene.scale ?? 1, scroll: scene.scroll ?? 0 });
+  frame.style.borderLeftWidth = `${border.left}px`;
+  frame.style.borderTopWidth = `${border.top}px`;
+
+  /** The box a browser draws for a laid-out box inside this frame. */
+  const drawn = (box: Box): Box => {
+    const { scale, scroll } = sceneOf();
+    const left = frameDrawn.left + (box.left - frameLayout.left - scroll) * scale;
+    const top = frameDrawn.top + (box.top - frameLayout.top) * scale;
+    return {
+      left,
+      right: left + (box.right - box.left) * scale,
+      top,
+      bottom: top + (box.bottom - box.top) * scale,
+    };
+  };
+
+  let frameDrawnBox = frameDrawn;
+  Object.defineProperty(frame, "getBoundingClientRect", {
+    configurable: true,
+    value: () => asRect(frameDrawnBox),
+  });
+  Object.defineProperty(frame, "offsetWidth", { configurable: true, get: () => frameLayout.w });
+  Object.defineProperty(frame, "offsetHeight", { configurable: true, get: () => frameLayout.h });
+  Object.defineProperty(frame, "offsetParent", { configurable: true, get: () => null });
+  Object.defineProperty(frame, "offsetLeft", { configurable: true, get: () => frameLayout.left });
+  Object.defineProperty(frame, "offsetTop", { configurable: true, get: () => frameLayout.top });
+  Object.defineProperty(frame, "scrollLeft", { configurable: true, get: () => sceneOf().scroll });
+  Object.defineProperty(frame, "scrollTop", { configurable: true, get: () => 0 });
+
+  const items = live.map((box, i) => {
+    const el = document.createElement("div");
+    frame.appendChild(el);
+    Object.defineProperty(el, "offsetParent", {
+      configurable: true,
+      get: () => (scene.staticFrame ? null : frame),
+    });
+    // A positioned frame is the items' offsetParent, so their offsets are
+    // measured from its PADDING edge; a static one is skipped and they are
+    // measured from the same place as the frame itself.
+    Object.defineProperty(el, "offsetLeft", {
+      configurable: true,
+      get: () =>
+        scene.staticFrame ? live[i].left : live[i].left - frameLayout.left - border.left,
+    });
+    Object.defineProperty(el, "offsetTop", {
+      configurable: true,
+      get: () => (scene.staticFrame ? live[i].top : live[i].top - frameLayout.top - border.top),
+    });
+    Object.defineProperty(el, "offsetWidth", {
+      configurable: true,
+      get: () => live[i].right - live[i].left,
+    });
+    Object.defineProperty(el, "offsetHeight", {
+      configurable: true,
+      get: () => live[i].bottom - live[i].top,
+    });
+    const pin = () =>
+      Object.defineProperty(el, "getBoundingClientRect", {
+        configurable: true,
+        value: () => asRect(drawn(live[i])),
+      });
+    pin();
+    pins.push(pin);
+    return el;
+  });
+
+  return {
+    frame,
+    items,
+    laid: live,
+    relayout: (next: Box[]) => {
+      next.forEach((box, i) => {
+        live[i] = { ...box };
+      });
+      pins.forEach((pin) => pin());
+    },
+    setFrameDrawn: (next: Box) => {
+      frameDrawnBox = next;
+    },
+  };
+}
+
 const scopes: EffectScope[] = [];
 
 /** Mount the composable inside a real effect scope (the component case). */
@@ -874,7 +1040,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 +1052,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 +1073,473 @@ 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("resolves against where the strip has RE-LAID the held item out", () => {
+    // A font, a zoom or an insertion around the strip re-lays it out under a
+    // live drag, so the item the pointer is holding is no longer where the
+    // press found it. The snapshot describes the old place; the layout
+    // numbers describe the new one, and the resolution has to follow the
+    // strip the user is looking at. The chips here shrink mid-drag, which
+    // brings the held chip's midpoint back behind the pointer: the walk that
+    // the press-time midpoint stopped short of now runs past the strip.
+    const laid: Box[] = [
+      { 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 strip = laidStrip(laid, { left: 0, top: 0, w: 300, h: 40 }, { left: 0, right: 300, top: 0, bottom: 40 });
+    const { handle, drops } = harness("x", strip.items);
+
+    press(handle, strip.items, 1, { x: 150, y: 20 });
+    move(140, 20);
+    expect(handle.dragging.value).toBe(true);
+    expect(handle.dragOver.value, "the press-time midpoint is still ahead of the pointer").toBe(1);
+
+    // The strip is re-laid out under the drag: every chip, the held one
+    // included, is drawn at its new place.
+    strip.relayout([
+      { left: 0, right: 50, top: 0, bottom: 40 },
+      { left: 50, right: 100, top: 0, bottom: 40 },
+      { left: 100, right: 150, top: 0, bottom: 40 },
+    ]);
+    move(140, 20);
+    expect(handle.dragOver.value, "the pointer is past every chip of the new strip").toBe(2);
+    up(140, 20);
+    expect(drops).toEqual([[1, 2]]);
+  });
+
+  it("ignores a transform painted on the held item while it follows the layout", () => {
+    // The whole reason the snapshot exists: a transform on the item — the
+    // drag's own lift, a host animation, a zoomed wrapper — is painted, not
+    // laid out, and must not move the line or the midpoint the resolution
+    // reads. The layout numbers are blind to it, so following the layout
+    // costs nothing here: the same gesture resolves the same way with the
+    // held chip drawn twice as large and shifted.
+    const laid: Box[] = [
+      { 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 strip = laidStrip(laid, { left: 0, top: 0, w: 300, h: 40 }, { left: 0, right: 300, top: 0, bottom: 40 });
+    const { handle, drops } = harness("x", strip.items);
+
+    press(handle, strip.items, 0, { x: 10, y: 20 });
+    move(150, 20);
+    expect(handle.dragOver.value).toBe(1);
+
+    // A host transform lands on the held chip: an edge-anchored cross-axis
+    // scale, plus a hard translation that carries its drawn box onto the line
+    // below and its drawn midpoint far past where it is laid out — the class
+    // of transform an earlier wave recorded as unfixable while the drawn box
+    // was what got measured. The pointer sits inside the moved band (where
+    // measuring the drawn box makes the held chip the only candidate line, so
+    // the walk stops on its own translated midpoint) and past the second
+    // chip's midpoint, which is where the layout answers "land after the
+    // second chip".
+    reshape(strip.items[0], { left: 100, right: 300, top: 40, bottom: 96 });
+    move(180, 45);
+    expect(handle.dragOver.value, "180 is past the second chip's midpoint of 150").toBe(1);
+    up(180, 45);
+    expect(drops).toEqual([[0, 1]]);
+  });
+
+  it("carries the derived geometry through a frame that scrolls", () => {
+    // The derivation reads a LAYOUT position and maps it through the box the
+    // frame is drawn in, so the frame's own scroll (which slides the content
+    // inside that box) has to be taken off in the same units. The strip is
+    // scrolled mid-drag; the pointer stays where it is, over a different
+    // chip of the content.
+    const laid: Box[] = [
+      { left: 0, right: 100, top: 0, bottom: 40 },
+      { left: 100, right: 200, top: 0, bottom: 40 },
+      { left: 200, right: 300, top: 0, bottom: 40 },
+      { left: 300, right: 400, top: 0, bottom: 40 },
+    ];
+    const scene = { scale: 1, scroll: 0 };
+    const strip = laidStrip(
+      laid,
+      { left: 0, top: 0, w: 400, h: 40 },
+      { left: 0, right: 400, top: 0, bottom: 40 },
+      scene,
+    );
+    const { handle, drops } = harness("x", strip.items);
+
+    press(handle, strip.items, 0, { x: 10, y: 20 });
+    move(40, 20);
+    expect(handle.dragOver.value, "40 is still short of the first chip's midpoint of 50").toBe(0);
+
+    scene.scroll = 120; // the frame scrolls the strip under the drag
+    strip.relayout(laid); // re-pin the drawn boxes at the new scroll
+    move(40, 20);
+    expect(handle.dragOver.value, "the chips moved back under the pointer with the content").toBe(1);
+    up(40, 20);
+    expect(drops).toEqual([[0, 1]]);
+  });
+
+  it("reads the frame's border the way the frame hands its layout numbers over", () => {
+    // The items' layout numbers are measured from their offsetParent's
+    // PADDING edge — so when the frame is that offsetParent its border has to
+    // be added back, and when the frame is `position: static` (nobody's
+    // offsetParent) the same numbers are already measured from its BORDER
+    // edge and adding it again would count it twice. Both shapes here are
+    // laid out identically and drawn identically: the resolution has to
+    // answer the same for both, and it has to keep the border's own scale.
+    const layout: Box[] = [
+      { left: 20, right: 60, top: 20, bottom: 60 },
+      { left: 80, right: 120, top: 20, bottom: 60 },
+      { left: 140, right: 180, top: 20, bottom: 60 },
+      { left: 200, right: 240, top: 20, bottom: 60 },
+    ];
+    const frameLayout = { left: 0, top: 0, w: 260, h: 80 };
+    const frameDrawn: Box = { left: 0, right: 260, top: 0, bottom: 80 };
+    const border = { left: 20, top: 20 };
+    for (const staticFrame of [false, true]) {
+      const strip = laidStrip(layout, frameLayout, frameDrawn, { border, staticFrame });
+      const { handle, drops } = harness("x", strip.items);
+      press(handle, strip.items, 0, { x: 30, y: 35 });
+      move(102, 62);
+      expect(handle.dragging.value, `staticFrame=${staticFrame}`).toBe(true);
+      expect(handle.dragOver.value, `staticFrame=${staticFrame} lands after the first chip`).toBe(1);
+      up(102, 62);
+      expect(drops, `staticFrame=${staticFrame}`).toEqual([[0, 1]]);
+    }
+  });
+
+  it("resolves exactly as the held item's own drawn box says, across frame shapes", () => {
+    // The differential form of the test above: for every shape a frame can
+    // have — positioned or static, with or without a border, drawn at its own
+    // size or scaled, scrolled or not, one line or two — the resolution has
+    // to answer what the held item's TRUE layout box answers. The sweep walks
+    // the pointer over each strip and compares against `indexAt` handed that
+    // true box, so any place the derived geometry drifts shows up wherever
+    // the drift can be observed, without hand-picking pointers.
+    const single: Box[] = [
+      { left: 12, right: 52, top: 12, bottom: 52 },
+      { left: 72, right: 112, top: 12, bottom: 52 },
+      { left: 132, right: 172, top: 12, bottom: 52 },
+    ];
+    const wrapped: Box[] = [
+      { left: 12, right: 52, top: 12, bottom: 52 },
+      { left: 72, right: 112, top: 12, bottom: 52 },
+      { left: 12, right: 52, top: 72, bottom: 112 },
+    ];
+    const scenes = [
+      { layout: single, frame: { left: 0, top: 0, w: 200, h: 70 }, drawn: { left: 0, right: 200, top: 0, bottom: 70 }, scene: {} },
+      { layout: single, frame: { left: 0, top: 0, w: 200, h: 70 }, drawn: { left: 5, right: 235, top: 7, bottom: 112 }, scene: { scale: 1.5 } },
+      { layout: single, frame: { left: 0, top: 0, w: 200, h: 70 }, drawn: { left: 5, right: 235, top: 7, bottom: 112 }, scene: { scale: 1.5, border: { left: 12, top: 12 } } },
+      { layout: single, frame: { left: 0, top: 0, w: 200, h: 70 }, drawn: { left: 5, right: 235, top: 7, bottom: 112 }, scene: { scale: 1.5, border: { left: 12, top: 12 }, staticFrame: true } },
+      { layout: single, frame: { left: 0, top: 0, w: 200, h: 70 }, drawn: { left: 0, right: 200, top: 0, bottom: 70 }, scene: { border: { left: 12, top: 12 } } },
+      { layout: single, frame: { left: 0, top: 0, w: 200, h: 70 }, drawn: { left: 0, right: 200, top: 0, bottom: 70 }, scene: { border: { left: 12, top: 12 }, staticFrame: true } },
+      { layout: single, frame: { left: 0, top: 0, w: 200, h: 70 }, drawn: { left: 0, right: 200, top: 0, bottom: 70 }, scene: { scroll: 25 } },
+      { layout: wrapped, frame: { left: 0, top: 0, w: 200, h: 130 }, drawn: { left: 0, right: 200, top: 0, bottom: 130 }, scene: {} },
+      { layout: wrapped, frame: { left: 0, top: 0, w: 200, h: 130 }, drawn: { left: 0, right: 300, top: 0, bottom: 195 }, scene: { scale: 1.5, border: { left: 8, top: 8 } } },
+    ];
+    let compared = 0;
+    for (const [index, entry] of scenes.entries()) {
+      const strip = laidStrip(entry.layout, entry.frame, entry.drawn, entry.scene);
+      const rects = strip.items.map((el) => el.getBoundingClientRect());
+      // The line filter's tolerance is half a pixel wide, so the sweep has to
+      // land ON the band edges, not only near them.
+      const crosses = new Set<number>();
+      for (let cross = -10; cross <= 140; cross += 5) crosses.add(cross);
+      for (const rect of rects) {
+        for (const edge of [rect.top, rect.bottom]) {
+          for (const delta of [-2, -1, -0.5, 0, 0.5, 1, 2]) crosses.add(Number((edge + delta).toFixed(2)));
+        }
+      }
+      for (let from = 0; from < strip.items.length; from += 1) {
+        // The held item's own layout box, drawn — the geometry the resolution
+        // is supposed to be reading.
+        const truth = strip.items[from].getBoundingClientRect();
+        const trueOrigin = {
+          band: { lo: truth.top, hi: truth.bottom },
+          mid: truth.left + truth.width / 2,
+        };
+        for (let main = -20; main <= 240; main += 20) {
+          for (const cross of crosses) {
+            const { handle } = harness("x", strip.items);
+            press(handle, strip.items, from, { x: main - 40, y: cross });
+            move(main, cross);
+            const got = handle.dragOver.value;
+            const want = indexAt(rects, "x", main, cross, from, trueOrigin);
+            expect(got, `scene ${index} from ${from} at (${main}, ${cross})`).toBe(want);
+            up(main, cross);
+            compared += 1;
+          }
+        }
+      }
+    }
+    expect(compared, "the sweep really ran").toBeGreaterThan(1000);
+  }, 20_000);
+
+  it("keeps the carried snapshot when only half of the box can be read", () => {
+    // A box that reports one side and not the other cannot place anything: a
+    // zero width would put the midpoint on the item's own edge. The gesture
+    // here is one the derivation WOULD answer differently — the strip is
+    // re-laid out under the drag — so the assertion is the carried
+    // snapshot's answer, which is what a strip with no layout numbers at all
+    // gets.
+    const laid: Box[] = [
+      { 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 strip = laidStrip(laid, { left: 0, top: 0, w: 300, h: 40 }, {
+      left: 0,
+      right: 300,
+      top: 0,
+      bottom: 40,
+    });
+    Object.defineProperty(strip.items[1], "offsetWidth", { configurable: true, get: () => 0 });
+    const { handle, drops } = harness("x", strip.items);
+
+    press(handle, strip.items, 1, { x: 150, y: 20 });
+    move(140, 20);
+    expect(handle.dragging.value).toBe(true);
+    expect(handle.dragOver.value, "the press-time midpoint still stops the walk").toBe(1);
+
+    strip.relayout([
+      { left: 0, right: 50, top: 0, bottom: 40 },
+      { left: 50, right: 100, top: 0, bottom: 40 },
+      { left: 100, right: 150, top: 0, bottom: 40 },
+    ]);
+    move(140, 20);
+    expect(handle.dragOver.value, "half a box is no box: the snapshot still resolves").toBe(1);
+    up(140, 20);
+    expect(drops).toEqual([]);
+  });
+
+  it("keeps the carried snapshot when the layout chain cannot be added up", () => {
+    // A chain that runs through something with no offsets of its own — an
+    // element inside `<svg>` reports no `offsetLeft` at all — sums to NaN,
+    // and a NaN origin answers every comparison the same way: it would place
+    // the item at the end of the strip. The chain is checked, and the gesture
+    // falls back to the snapshot.
+    const laid: Box[] = [
+      { 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 strip = laidStrip(laid, { left: 0, top: 0, w: 300, h: 40 }, {
+      left: 0,
+      right: 300,
+      top: 0,
+      bottom: 40,
+    });
+    const { handle, drops } = harness("x", strip.items);
+
+    press(handle, strip.items, 1, { x: 150, y: 20 });
+    move(140, 20);
+    expect(handle.dragOver.value).toBe(1);
+
+    // The held chip's chain now passes through an element with no offsets.
+    const svgish = document.createElement("div");
+    Object.defineProperty(svgish, "offsetLeft", { configurable: true, get: () => undefined });
+    Object.defineProperty(svgish, "offsetTop", { configurable: true, get: () => undefined });
+    Object.defineProperty(svgish, "offsetParent", {
+      configurable: true,
+      get: () => strip.frame,
+    });
+    Object.defineProperty(strip.items[1], "offsetParent", {
+      configurable: true,
+      get: () => svgish,
+    });
+    strip.relayout([
+      { left: 0, right: 50, top: 0, bottom: 40 },
+      { left: 50, right: 100, top: 0, bottom: 40 },
+      { left: 100, right: 150, top: 0, bottom: 40 },
+    ]);
+    move(140, 20);
+    expect(handle.dragOver.value, "an unaddable chain keeps the snapshot's answer").toBe(1);
+    up(140, 20);
+    expect(drops).toEqual([]);
+  });
+
+  it("keeps the carried snapshot when the held item collapses", () => {
+    // A held chip re-laid out to no height has no line to be on: its derived
+    // band would be a point and the line filter would drop it, which is a
+    // resolution the layout cannot justify. The fallback answers instead.
+    const laid: Box[] = [
+      { 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 strip = laidStrip(laid, { left: 0, top: 0, w: 300, h: 40 }, {
+      left: 0,
+      right: 300,
+      top: 0,
+      bottom: 40,
+    });
+    const { handle, drops } = harness("x", strip.items);
+
+    press(handle, strip.items, 1, { x: 150, y: 20 });
+    move(140, 20);
+    expect(handle.dragOver.value).toBe(1);
+
+    strip.relayout([
+      { left: 0, right: 50, top: 0, bottom: 40 },
+      { left: 50, right: 100, top: 20, bottom: 20 },
+      { left: 100, right: 150, top: 0, bottom: 40 },
+    ]);
+    move(140, 20);
+    expect(handle.dragOver.value, "a chip with no height has no line to stand on").toBe(1);
+    up(140, 20);
+    expect(drops).toEqual([]);
+  });
+
+  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,219 @@ 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,
     };
   }
 
+  /** Where an element's border box sits in a space its ancestors share: the
+   *  one number CSS transforms do not touch. `offsetLeft`/`offsetTop` are
+   *  LAYOUT positions — the drag's own lift, a host `scale()`, a FLIP
+   *  animation and a transition mid-flight all leave them exactly where they
+   *  were — so walking the offsetParent chain of the item and of its frame
+   *  and subtracting gives the item's current place inside the frame however
+   *  it is drawn. Both sides are walked to the same root, so a frame that is
+   *  not itself an offsetParent (a static frame) cancels exactly.
+   *
+   *  `through` reports whether the walk passed THROUGH the frame, which is
+   *  what decides how the two differ: an offset is measured from the
+   *  offsetParent's PADDING edge, so a chain that runs through the frame
+   *  leaves the difference measured from the frame's padding box (its border
+   *  has to be added back), while a chain that skips it — a frame that is
+   *  `position: static` is nobody's offsetParent — leaves the difference
+   *  measured from the frame's BORDER box, where adding the border again
+   *  would double-count it.
+   *
+   *  The chain must be walked LIVE: a transform (or even
+   *  `will-change: transform`) on an ancestor rebinds `offsetParent`. */
+  function layoutOffset(
+    el: HTMLElement,
+    frame: HTMLElement | null,
+  ): { x: number; y: number; through: boolean } {
+    let x = 0;
+    let y = 0;
+    let through = false;
+    for (let node: HTMLElement | null = el; node; node = node.offsetParent as HTMLElement | null) {
+      x += node.offsetLeft;
+      y += node.offsetTop;
+      if (node === frame) through = true;
+    }
+    return { x, y, through };
+  }
+
+  /** The pressed item's layout geometry read off the LIVE strip rather than
+   *  carried from the press — the answer to "where is the item I am holding
+   *  NOW?", which is what changes when the list reorders, an item is added or
+   *  removed around it, a font or a zoom changes, or the strip re-wraps.
+   *  `null` when there is no box to read (no layout engine at all, a detached
+   *  element, a collapsed or partially-readable one), which keeps the caller
+   *  on the carried snapshot. */
+  function derivedOrigin(): PointerReorderOrigin | null {
+    if (!pressedItem || !pressedFrame || !pressedFrame.isConnected) return null;
+    const box = frameBox(pressedFrame);
+    const itemW = pressedItem.offsetWidth;
+    const itemH = pressedItem.offsetHeight;
+    if (!(itemW > 0) || !(itemH > 0)) return null;
+    if (!(box.w > 0) || !(box.h > 0)) return null;
+    const at = layoutOffset(pressedItem, pressedFrame);
+    const of = layoutOffset(pressedFrame, null);
+    // A chain that runs through something without layout offsets of its own
+    // (an SVG ancestor, a foreignObject boundary) sums to NaN rather than
+    // failing: nothing can be placed from it, so the snapshot keeps the call.
+    if (!Number.isFinite(at.x) || !Number.isFinite(at.y)) return null;
+    if (!Number.isFinite(of.x) || !Number.isFinite(of.y)) return null;
+    const scaleX = box.laidW > 0 ? box.w / box.laidW : 1;
+    const scaleY = box.laidH > 0 ? box.h / box.laidH : 1;
+    /** The frame's own border, in the units it is DRAWN at — and only when
+     *  the walk into the frame came through it (`through`). */
+    const style = getComputedStyle(pressedFrame);
+    const borderLeft = at.through ? (parseFloat(style.borderLeftWidth) || 0) * scaleX : 0;
+    const borderTop = at.through ? (parseFloat(style.borderTopWidth) || 0) * scaleY : 0;
+    const left = box.x + borderLeft + (at.x - of.x - box.scrollX) * scaleX;
+    const top = box.y + borderTop + (at.y - of.y - box.scrollY) * scaleY;
+    const width = itemW * scaleX;
+    const height = itemH * scaleY;
+    return axis === "x"
+      ? { band: { lo: top, hi: top + height }, mid: left + width / 2 }
+      : { band: { lo: left, hi: left + width }, mid: top + height / 2 };
+  }
 
-  /** 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 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
+   *  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 —
+   *
+   *   - 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 {
+    const live = derivedOrigin();
+    if (live) return live;
     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 +547,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 +671,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 +691,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 +741,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;