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>

src/editor/panels/TilemapPanel.ts

@@ -15,7 +15,6 @@ import {
   SetTilemapLayerHiddenCommand,
   SetTilemapLayerZCommand,
 } from '../../core/commands/tilemapCommands';
-import type { Command } from '../../core/commands/Command';
 import type { TilemapAsset } from '../../core/model/Asset';
 import { findObject } from '../../core/model/hierarchy';
 import { resolvedHolder } from '../../core/model/instance';
@@ -23,13 +22,13 @@ import { findAssetOf } from '../../core/model/Project';
 import { findLayer, isLayerVisible, layerZ } from '../../core/model/tilemap';
 import {
   Button,
-  Checkbox,
   Dropdown,
   HStack,
   Menu,
   NumberField,
   Panel,
   ScrollContainer,
+  SortableList,
   TextField,
   Theme,
   ui,
@@ -134,7 +133,8 @@ export interface TilemapPanelWidgets {
   tools: Map<TilemapTool, Button>;
   /** Null while the project has no tile. */
   palette: TilePalette | null;
-  layers: { id: string; name: Button; visible: Checkbox; up: Button; down: Button; remove: Button }[];
+  layers: SortableList;
+  removeLayer: Button;
   /** The name of the layer painted on (#138). */
   layerName: TextField;
   /** Its `z` above the map's own (#174). */
@@ -287,7 +287,18 @@ function buildPanelContent(host: InspectorHost, asset: TilemapAsset): void {
   const widgets: TilemapPanelWidgets = {
     tools: new Map(),
     palette: null,
-    layers: [],
+    layers: new SortableList({
+      reversed: true,
+      onPick: (layerId) => state.setTilemapPaint({ layerId }),
+      onMove: (from, to) => state.execute(new MoveTilemapLayerCommand(asset.id, from, to)),
+      onToggleHidden: (layerId) =>
+        state.execute(
+          new SetTilemapLayerHiddenCommand(asset.id, layerId, isLayerVisible(findLayer(asset, layerId)!)),
+        ),
+    }),
+    removeLayer: new Button('Delete layer', {
+      onClick: () => state.execute(new RemoveTilemapLayerCommand(asset.id, painted)),
+    }),
     layerName,
     layerZ: layerZField,
     focus,
@@ -329,31 +340,14 @@ function buildPanelContent(host: InspectorHost, asset: TilemapAsset): void {
     addNote(host, 'Choose a tile to paint with.', 'small');
 
   addTitle(host, 'LAYERS');
-  addNote(host, 'The last layer is drawn on top.', 'small');
-  // Bottom-up on screen, as in every layer list: the topmost row is the one drawn last.
-  for (let index = asset.layers.length - 1; index >= 0; index--) {
-    const layer = asset.layers[index]!;
-    const row = new HStack({ gap: Theme.gap });
-    const visible = new Checkbox(isLayerVisible(layer));
-    visible.onChange = (checked) =>
-      state.execute(new SetTilemapLayerHiddenCommand(asset.id, layer.id, !checked));
-    row.add(visible);
-    const choose = new Button(layer.name, {
-      align: 'left',
-      onClick: () => state.setTilemapPaint({ layerId: layer.id }),
-    });
-    choose.toggled = layer.id === painted;
-    row.add(choose, 1);
-    const small = (label: string, command: () => Command) =>
-      row.add(new Button(label, { variant: 'ghost', width: 24, onClick: () => state.execute(command()) }));
-    const up = small('↑', () => new MoveTilemapLayerCommand(asset.id, index, index + 1));
-    const down = small('↓', () => new MoveTilemapLayerCommand(asset.id, index, index - 1));
-    const remove = small('✕', () => new RemoveTilemapLayerCommand(asset.id, layer.id));
-    widgets.layers.push({ id: layer.id, name: choose, visible, up, down, remove });
-    host.body.add(row);
-  }
-  // Below the list rather than in it: a row is a button that picks the layer, and a text field
-  // in its place would take the click that chooses it.
+  widgets.layers.setItems(
+    asset.layers.map((layer) => ({ id: layer.id, label: layer.name, hidden: !isLayerVisible(layer) })),
+    [painted],
+  );
+  host.body.add(widgets.layers);
+  addNote(host, 'Drag a row to draw it earlier or later.', 'small');
+  // Below the list rather than in it: a press on a row picks the layer, and a text field in its
+  // place would take the click that chooses it.
   const nameRow = labelledRow('Name').row;
   nameRow.add(layerName, 1);
   host.body.add(nameRow);
@@ -366,7 +360,11 @@ function buildPanelContent(host: InspectorHost, asset: TilemapAsset): void {
   host.body.add(showRow);
   addNote(host, 'Show only changes the scene view, not the game.', 'small');
   addGap(host);
-  host.body.add(widgets.addLayer);
+  widgets.removeLayer.setEnabled(asset.layers.length > 1);
+  const layerButtons = new HStack({ gap: Theme.gap });
+  layerButtons.add(widgets.addLayer, 1);
+  layerButtons.add(widgets.removeLayer, 1);
+  host.body.add(layerButtons);
 }
 
 function tileIdsOf(state: EditorState): string[] {