Pixel art tools show only useful options and remove any colour (#201)

The pixel art side bar showed every tool option all the time, the
palette used only part of the column width and "Remove" could only
drop the last colour. Now each tool shows what it needs, the palette
fills the column and any colour can be removed.

- Options per tool live in toolOptions.ts. Brush shows for pencil,
  eraser, line and unfilled shapes. Filled shapes shows for rectangle
  and ellipse. Contiguous shows for fill. Picker has none.
- All options share one row with a fixed height, so nothing below
  jumps when the tool changes.
- The palette picks its column count from the width and stretches the
  swatches until the row ends flush. At 1280 px that is 11 per row
  instead of 8.
- The colour field takes the space the two buttons leave, so "Remove"
  is no longer cut off.
- "Remove" deletes the selected colour. Pixels of that colour turn
  transparent, later indices move down by one in every image that uses
  the palette, and palette plus images change in one undo step.
  Transparent itself cannot be removed.

Decisions:
- Pixels of a removed colour become transparent, like erasing
  (chosen by the user before the build).

Findings:
- The Filled checkbox slid away under the pointer. The brush button
  sat to its left and vanished when Filled turned on, so the second
  click missed. The brush button now sits to the right, and a check
  clicks the same spot twice.
- One start-up FAIL "debug hook present" came back never in three
  later runs. It is the known start flake.

Tests:
- ./check.sh: 141 files, 2080 tests, exit 0 (before 140 / 2070)
- 10 new unit tests in tests/editor/pixel-palette.test.ts
- GM_STEPS=48 (fresh seed): ALL PASSED, 40 checks, 4 of them new
- Counter-check: indices not shifting and brush always visible make
  4 unit tests and exactly the 2 matching e2e checks fail
- Check total 1282 (1278 + 4) in README and wiki, computed

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

src/core/model/pixelDraw.ts

@@ -156,6 +156,21 @@ export function resizeCel(cel: CelPixels, width: number, height: number, anchor:
   return out;
 }
 
+/**
+ * The cel once palette colour `index` is gone (#201): its pixels turn transparent and every colour
+ * after it moves down one, so each remaining pixel keeps its colour. Null when nothing changes.
+ */
+export function withoutColorIndex(cel: CelPixels, index: number): CelPixels | null {
+  if (!cel.data.some((i) => i >= index)) return null;
+  const out = cloneCel(cel);
+  for (let p = 0; p < out.data.length; p++) {
+    const i = out.data[p]!;
+    if (i === index) out.data[p] = 0;
+    else if (i > index) out.data[p] = i - 1;
+  }
+  return out;
+}
+
 /**
  * The layer below with the one above laid over it: every pixel the upper layer paints covers the
  * lower one. Indexed colours have no in-between colour, so the upper layer's opacity cannot be kept –

src/core/model/pixelEdit.ts

@@ -207,14 +207,23 @@ export function withCanvasSize(
 ): PixelArtState {
   if (!isCanvasSide(width) || !isCanvasSide(height))
     throw new PixelEditError(`A side is 1 to ${PIXEL_CANVAS_MAX} pixels`);
+  for (const frame of state.frames)
+    for (const file of Object.values(frame.cels))
+      if (cels[file] === undefined) throw new PixelEditError('A cel of the old canvas has no counterpart');
+  return { ...withCelsReplaced(state, cels), width, height };
+}
+
+/** Every cel `cels` names swapped for the file it maps to, `''` leaving it empty; the others stay. */
+export function withCelsReplaced(
+  state: PixelArtState,
+  cels: Readonly<Record<string, string>>,
+): PixelArtState {
   const next = cloneState(state);
-  next.width = width;
-  next.height = height;
   for (const frame of next.frames)
     for (const [layerId, file] of Object.entries(frame.cels)) {
-      const resized = cels[file];
-      if (resized === undefined) throw new PixelEditError('A cel of the old canvas has no counterpart');
-      if (resized) frame.cels[layerId] = resized;
+      const replaced = cels[file];
+      if (replaced === undefined) continue;
+      if (replaced) frame.cels[layerId] = replaced;
       else delete frame.cels[layerId];
     }
   return next;