fix(workspaces): tile-grid drag bugs — stuck drop, grab-offset follow, empty-cell hover

Three drag-interaction bugs on the Win8 tile home, one shared root cause
(capture loss from DOM reordering) plus two wiring defects:

- DROP NEVER COMMITS (stuck tile): displacePlace returned the displacement
  preview SORTED BY STREAM ORDER, so crossing stream positions moved the
  dragged tile's DOM node in the keyed {#each} and the browser dropped its
  pointer capture — pointerup never landed, phase stayed "dragging", the
  follow transform never cleared. displacePlace now preserves the INPUT
  render order (coordinates change only); placeAtCell re-sorts to stream
  order itself, so the commit's order-renumbering semantics are unchanged.

- FOLLOW TRANSFORM OFFSET: the follow translate was raw pointer displacement,
  so a grab away from the tile's top-left made the tile jump (its ORIGIN rode
  the pointer). gridPointerDown records the grab offset (pointer minus the
  tile's rect) and followStyle cancels the tile's true grid anchor (targetCell
  origin), so the GRAB POINT tracks the pointer.

- CAN'T HOVER EMPTY CELLS: pointer handling moved from per-tile elements to
  the GRID CONTAINER, which captures the pointer and is never re-parented,
  never pointer-events:none, never unmounted — move/up stream to it over
  empty cells and off-canvas, and capture can never be lost to a DOM move.

Tests updated: the four order-sensitive displacePlace assertions now expect
input render order (all coordinates unchanged — the plan's stream examples
still hold); HomeTileGrid drag tests still pass via event bubbling.

Verification: svelte-check 0 errors/0 warnings; vitest 1689/1689; biome clean
on touched files; vite build succeeds. Pointer capture is browser-only —
human check at the page: (1) drag a tile across columns, release — it must
drop, not stay stuck; (2) grab a tile by its corner/center — the grabbed
point must stay under the cursor; (3) hover/drag over empty cells past the
last tile — the ghost + drop must keep tracking.

2 files changed, 24 insertions, 12 deletions

diff --git a/src/features/workspaces/logic/tile-layout.test.ts b/src/features/workspaces/logic/tile-layout.test.ts
index 81156e7..a5d58c0 100644
--- a/src/features/workspaces/logic/tile-layout.test.ts
+++ b/src/features/workspaces/logic/tile-layout.test.ts
@@ -350,11 +350,12 @@ describe("displacePlace", () => {
       { id: "Y", col: 2, row: 1, colSpan: 1, rowSpan: 1 },
     ];
     const next = displacePlace(placements, "Y", { col: 1, row: 1 }, WIDE);
-    // Y@1; X (was@1) pushed into the gap at 2; X2 (was@3) stays.
+    // Y@1; X (was@1) pushed into the gap at 2; X2 (was@3) stays. The array
+    // keeps the INPUT render order (only coordinates change).
     expect(next.map((p) => [p.id, p.col, p.row])).toEqual([
-      ["Y", 1, 1],
       ["X", 1, 2],
       ["X2", 1, 3],
+      ["Y", 1, 1],
     ]);
   });
 
@@ -366,10 +367,11 @@ describe("displacePlace", () => {
       { id: "Y", col: 2, row: 1, colSpan: 1, rowSpan: 1 },
     ];
     const next = displacePlace(placements, "Y", { col: 1, row: 2 }, WIDE);
+    // Same coordinates, input render order: X, Z, then the dragged Y.
     expect(next.map((p) => [p.id, p.col, p.row])).toEqual([
-      ["Y", 1, 2],
       ["X", 1, 3],
       ["Z", 1, 4],
+      ["Y", 1, 2],
     ]);
   });
 
@@ -380,9 +382,10 @@ describe("displacePlace", () => {
     ];
     // Drag a (cell 1) to cell 3 — b stays at 2; a lands at 3.
     const next = displacePlace(placements, "a", { col: 1, row: 3 }, WIDE);
+    // The array keeps the input render order (a first) — only a's coords move.
     expect(next.map((p) => [p.id, p.col, p.row])).toEqual([
-      ["b", 1, 2],
       ["a", 1, 3],
+      ["b", 1, 2],
     ]);
   });
 
@@ -432,12 +435,12 @@ describe("displacePlace", () => {
       { id: "d", col: 1, row: 4, colSpan: 1, rowSpan: 1 },
     ];
     const next = displacePlace(placements, "a", { col: 1, row: 4 }, WIDE);
-    // d is pushed past the column's end → column 2 row 1. Stream order:
-    // b(1) c(2) a(3) d(4).
+    // d is pushed past the column's end → column 2 row 1. The array keeps the
+    // INPUT render order (a,b,c,d) — only coordinates change.
     expect(next.map((p) => [p.id, p.col, p.row])).toEqual([
+      ["a", 1, 4],
       ["b", 1, 2],
       ["c", 1, 3],
-      ["a", 1, 4],
       ["d", 2, 1],
     ]);
   });
diff --git a/src/features/workspaces/logic/tile-layout.ts b/src/features/workspaces/logic/tile-layout.ts
index 4b5c89c..c4720d3 100644
--- a/src/features/workspaces/logic/tile-layout.ts
+++ b/src/features/workspaces/logic/tile-layout.ts
@@ -413,7 +413,9 @@ function firstFitFrom(
  * one; the displaced re-anchor at the next fitting slot forward (spans ride
  * along; a span that can't fit the fixed cross-axis anywhere forward wraps to
  * the first fitting slot — it must land somewhere). Pure: placements + drop
- * in, a NEW placements array out (stream order).
+ * in, a NEW placements array out — in the INPUT array order (only coordinates
+ * change). A keyed `{#each}` over the result therefore never moves DOM nodes;
+ * moving a captured element drops its pointer capture — the "stuck tile" bug.
  */
 export function displacePlace(
   placements: readonly Placement[],
@@ -447,9 +449,12 @@ export function displacePlace(
     occupy(occupied, slot.col, slot.row, colSpan, rowSpan);
     placed.push({ ...placement, col: slot.col, row: slot.row });
   }
-  return placed.sort(
-    (a, b) => fillOrderKey(a.col, a.row, geometry) - fillOrderKey(b.col, b.row, geometry),
-  );
+  // Return in the INPUT render order (coordinates change only): the live drag
+  // preview feeds a keyed `{#each}`, and a reordered array moves the DOM nodes
+  // — a moved captured element silently loses pointer capture (the stuck-tile
+  // bug). The commit path re-sorts to stream order itself (`placeAtCell`).
+  const byId = new Map(placed.map((placement) => [placement.id, placement]));
+  return placements.map((placement) => byId.get(placement.id) ?? placement);
 }
 
 /**
@@ -468,7 +473,11 @@ export function placeAtCell(
   // An unknown dragged id changes nothing (order-sorted copy — the op's
   // canonical no-op shape, like `moveTile` before it).
   if (!tiles.some((tile) => tile.id === id)) return sortTiles(tiles);
-  const displaced = displacePlace(pack(tiles, geometry), id, cell, geometry);
+  // displacePlace preserves the input RENDER order for the live preview; the
+  // commit pins + renumbers in STREAM order, so re-sort before pinning.
+  const displaced = displacePlace(pack(tiles, geometry), id, cell, geometry)
+    .slice()
+    .sort((a, b) => fillOrderKey(a.col, a.row, geometry) - fillOrderKey(b.col, b.row, geometry));
   const result: TileLayoutEntry[] = [];
   for (const placement of displaced) {
     const entry = tiles.find((tile) => tile.id === placement.id);