Layer, frame and shape lists all reorder by drag and drop

Reordering shapes by dragging worked well in the vector tab. Pixel
art layers and frames and tilemap layers still used up/down buttons.
All three lists now share one widget built from the shape list.

- SortableList in the UI toolkit, with the drag rules next to it in
  src/ui/sortable.ts. A row has an optional thumbnail, a name, a hint
  on the right and an eye toggle. Every drop is one undo step.
- The shape list is a thin wrapper around it. shapeRows.ts is gone,
  its tests moved to the new rules.
- Pixel art layers show the layer alone on the current frame, frames
  show the whole frame. Up/Down, Hide, Earlier and Later are gone.
- Tilemap layers get the eye instead of the checkbox. The per-row
  up, down and delete buttons are replaced by Delete layer next to
  Add layer.
- A row is selected on release instead of press. Selecting rebuilt
  the inspector or tilemap panel and cancelled a drag that started
  on a row not yet selected.

Tests:
- ./check.sh: 138 files, 2052 tests, exit 0 (before 137 / 2051).
- GM_STEPS=39,40,47,48 (fresh seed): ALL PASSED, 154 checks.
- 5 new e2e checks. Check total 1264 in the README is computed
  (1259 + 5), CI never measured 1259.
- Counter-checks bite: dropMove ignoring reversed fails a unit test,
  a tilemap drop not applied fails the drag check, a layer thumbnail
  showing all layers fails the thumbnail check.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

tools/e2e/40-tilemap.mjs

@@ -429,6 +429,40 @@ export async function tilemap(t) {
   await undo();
   await settle();
 
+  // 40l-ii. The rows are dragged into another order: the upper layer dropped below the lower one is
+  //         drawn first. Undone again, so the blocks below find the layers as they were.
+  const upperRow = await inPanel(t, '__gm.tilemap.layerRowAt(0)');
+  const lowerRow = await inPanel(t, '__gm.tilemap.layerRowAt(1)');
+  const orderBefore = (await json(`__gm.tilemap.layers(${JSON.stringify(made.id)})`)).map((l) => l.id);
+  if (upperRow && lowerRow) await drag(upperRow.name.x, upperRow.y, lowerRow.name.x, lowerRow.y + 20);
+  await settle();
+  const orderAfter = (await json(`__gm.tilemap.layers(${JSON.stringify(made.id)})`)).map((l) => l.id);
+  const topRowNow = await json('(__gm.tilemap.layerRowAt(0) || {}).id');
+  check(
+    'dragging the upper layer row below the lower one puts that layer first in the drawing order',
+    orderBefore.length === 2 &&
+      orderAfter.join() === [orderBefore[1], orderBefore[0]].join() &&
+      topRowNow === orderBefore[0],
+    JSON.stringify({ orderBefore, orderAfter, topRowNow }),
+  );
+  await undo();
+  await settle();
+  // With no layer chosen the topmost is painted on, so that is the one Delete layer takes.
+  const chosenLayer = (await json('__gm.tilemap.paint()')).layerId;
+  const paintedLayer = orderBefore.includes(chosenLayer) ? chosenLayer : orderBefore.at(-1);
+  const removeAt = await inPanel(t, '__gm.tilemap.removeLayerAt()');
+  if (removeAt?.enabled) await click(removeAt.x, removeAt.y);
+  await settle();
+  const leftOver = (await json(`__gm.tilemap.layers(${JSON.stringify(made.id)})`)).map((l) => l.id);
+  const lastOne = await json('__gm.tilemap.removeLayerAt()');
+  check(
+    'Delete layer takes out the layer painted on, and is off for the last one',
+    leftOver.length === 1 && !leftOver.includes(paintedLayer) && lastOne?.enabled === false,
+    JSON.stringify({ paintedLayer, leftOver, lastOne }),
+  );
+  await undo();
+  await settle();
+
   // 40m. The painted layer is named in the field below the list, and Show singles it out in the
   //      scene view (#138). It sits here, not at the end, because here both layers exist: the upper
   //      one is painted on and holds the cell (4,0), the lower one the 3 × 3 block.

tools/e2e/48-pixelart.mjs

@@ -55,6 +55,13 @@ export async function pixelArt(t) {
     await click(at.x, at.y);
     await settle();
   };
+  /** A row of the layer or frame list, scrolled into view: its centre, and for a layer its eye. */
+  const listRow = async (list, rowId) => {
+    const hook = `__gm.pixelArt.${list}Row(${JSON.stringify(rowId)})`;
+    await json(hook);
+    await settle();
+    return json(hook);
+  };
   const at = (x, y) => json(`__gm.pixelArt.pixelAt(${x}, ${y})`);
   const paint = async (from, to, modifiers = {}) => {
     const a = await at(from[0], from[1]);
@@ -217,11 +224,15 @@ export async function pixelArt(t) {
   );
   await click(filledBox.x, filledBox.y);
 
-  // 48f. Hide and opacity change what the canvas shows, not the pixels.
+  // 48f. The eye in the layer's row and the opacity change what the canvas shows, not the pixels.
   const blueShown = await screen(10, 10);
-  await press_('layer:hide');
+  const eyeAt = (await listRow('layer', top)).eye;
+  await click(eyeAt.x, eyeAt.y);
+  await settle();
   const hidden = await screen(10, 10);
-  await press_('layer:hide');
+  const hiddenFlag = (await asset(id)).layers.at(-1).hidden;
+  await click(eyeAt.x, eyeAt.y);
+  await settle();
   const opacity = await control('layerOpacity');
   await click(opacity.x, opacity.y);
   await press('a', { ctrl: true });
@@ -245,14 +256,45 @@ export async function pixelArt(t) {
       )
       .join('');
   check(
-    'a hidden layer is not drawn, and a layer at half opacity is mixed with the one below',
+    'the eye hides a layer, which is then not drawn, and a layer at half opacity is mixed with the one below',
     colourDistance(blueShown, HEX[BLUE]) < 10 &&
+      hiddenFlag === true &&
       colourDistance(hidden, HEX[GREEN]) < 10 &&
+      !art.layers.at(-1).hidden &&
       art.layers.at(-1).opacity === 0.5 &&
       colourDistance(half, mixed) < 12,
-    JSON.stringify({ blueShown, hidden, half, mixed, opacity: art.layers.at(-1).opacity }),
+    JSON.stringify({ blueShown, hiddenFlag, hidden, half, mixed, opacity: art.layers.at(-1).opacity }),
   );
 
+  // 48f-ii. Each layer row shows that layer alone, on the frame painted, and the list is dragged into
+  //         another order. The picture's centre is canvas pixel (16, 16): green below, empty above.
+  const bottom = art.layers[0].id;
+  const topRow = await listRow('layer', top);
+  const bottomRow = await listRow('layer', bottom);
+  const topThumb = await json(`__gm.pixelAt(${topRow.thumb.x}, ${topRow.thumb.y})`);
+  const bottomThumb = await json(`__gm.pixelAt(${bottomRow.thumb.x}, ${bottomRow.thumb.y})`);
+  check(
+    'a layer row pictures that layer alone: green below, nothing painted there above',
+    colourDistance(bottomThumb, HEX[GREEN]) < 12 &&
+      colourDistance(topThumb, HEX[GREEN]) > 60 &&
+      colourDistance(topThumb, HEX[BLUE]) > 60,
+    JSON.stringify({ topThumb, bottomThumb }),
+  );
+  const rowsBefore = await json('__gm.pixelArt.layerRows()');
+  await drag(topRow.x, topRow.y, bottomRow.x, bottomRow.y + 20, { steps: 8 });
+  await settle();
+  const movedLayers = (await asset(id)).layers.map((l) => l.id);
+  const rowsAfter = await json('__gm.pixelArt.layerRows()');
+  check(
+    'dragging the top layer row below the other puts that layer first in the drawing order',
+    rowsBefore.join() === [top, bottom].join() &&
+      movedLayers.join() === [top, bottom].join() &&
+      rowsAfter.join() === [bottom, top].join(),
+    JSON.stringify({ rowsBefore, movedLayers, rowsAfter }),
+  );
+  await undo();
+  await settle();
+
   // 48g. Merge down: one layer left, holding both; the upper layer's opacity is not kept.
   await press_('layer:merge');
   art = await asset(id);
@@ -308,6 +350,27 @@ export async function pixelArt(t) {
   }
   check('the preview plays through the frames', seen.size >= 2, JSON.stringify([...seen]));
 
+  // 48h-ii. The frame rows picture their frames and are dragged into another order, first on top.
+  const framesBefore = (await asset(id)).frames.map((f) => f.id);
+  const firstFrameRow = await listRow('frame', framesBefore[0]);
+  const lastFrameRow = await listRow('frame', framesBefore[2]);
+  const firstThumb = await json(`__gm.pixelAt(${firstFrameRow.thumb.x}, ${firstFrameRow.thumb.y})`);
+  const lastThumb = await json(`__gm.pixelAt(${lastFrameRow.thumb.x}, ${lastFrameRow.thumb.y})`);
+  await drag(firstFrameRow.x, firstFrameRow.y, lastFrameRow.x, lastFrameRow.y + 20, { steps: 8 });
+  await settle();
+  const framesAfter = (await asset(id)).frames.map((f) => f.id);
+  const frameRowsAfter = await json('__gm.pixelArt.frameRows()');
+  check(
+    'a frame row pictures its frame, and dragging the first row to the bottom makes it the last frame',
+    colourDistance(firstThumb, HEX[GREEN]) < 12 &&
+      colourDistance(lastThumb, HEX[GREEN]) > 60 &&
+      framesAfter.join() === [framesBefore[1], framesBefore[2], framesBefore[0]].join() &&
+      frameRowsAfter.join() === framesAfter.join(),
+    JSON.stringify({ firstThumb, lastThumb, framesBefore, framesAfter, frameRowsAfter }),
+  );
+  await undo();
+  await settle();
+
   // 48i. Tile preview: the picture repeats around the canvas. Shown on the first frame, which is painted all over.
   const first = (await asset(id)).frames[0].id;
   const firstRowAt = await json(`__gm.pixelArt.frameRow(${JSON.stringify(first)})`);