Pixel art can be drawn in its own tab with layers and frames (#130)

Textures are uploaded files named by their content, so they cannot
be edited in place. Pixel art is therefore its own asset type, like
vector art. Its pixels live in the project and the tab rasters them
into a texture that sprites, tiles and animations can use.

- New asset types Pixel art and Palette. The first pixel art of a
  project gets a palette with the 16 PICO-8 colours in the same undo
  step. Every pixel is a palette index, 0 is transparent.
- Each layer on each frame is its own file data/pixels/<sha256>.px.
  The project only holds the names, so undo swaps names. The browser
  computes the hash and uploads new cels before the project is saved.
- New route POST ?r=pixels in api/lib/PixelStore.php. It answers 201
  and 422 for broken data. data/pixels/ is git-ignored.
- Tools: pencil, eraser, fill (contiguous or all pixels of a colour),
  eyedropper, line, rectangle and ellipse (outline or filled), brush
  size 1 to 8.
- Layers can be added, deleted, renamed, reordered, hidden, faded and
  merged down. Frames can be added, duplicated, deleted and reordered,
  with onion skin and a small playing preview.
- Zoom 1x to 32x in whole steps, grid from 8x, a 3x3 tile preview and
  Resize... with a 3x3 anchor.
- All frames sit side by side in one image. Each frame is a region
  like a cut texture frame, so texture rows offer "Asset / Frame 2"
  and the context menu has Create animation from frames.

Decisions:
- Merging down drops the opacity of the upper layer. Indexed colours
  know no blends.
- Only the last palette colour can be removed. Otherwise the indices
  of every image using the palette would shift.
- Undo stores the whole layer per stroke instead of pixel diffs.
- Alt+click picks a colour. It is a mouse gesture, not a shortcut.

Follow-up issues: #197 import from texture, #198 selection and
flipping, #199 PNG export, #200 more tools.

Tests:
- ./check.sh: 136 files, 2049 tests (before 135 / 2011). 34 new in
  tests/core/pixel-art.test.ts, 4 from the icon tables.
- e2e module 48 fresh: ALL PASSED, 29 checks, console empty.
- Counter-probes bite: five on the unit tests, upload order (2 tests
  fail) and cels not uploaded in the browser (1 check fails).
- Check total 1259 in README is computed (1232 measured in CI + 27).

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

src/core/model/pixelDraw.ts

@@ -0,0 +1,172 @@
+/**
+ * What the tools of the pixel art tab do to a cel (#130), as plain functions on the indices – so every
+ * rule can be measured without a browser. They write into the cel they are given; the tab hands them a
+ * copy and turns the result into a new cel file once the stroke ends.
+ */
+import { type CelPixels, emptyCel } from './pixelCel';
+
+export interface PixelPoint {
+  x: number;
+  y: number;
+}
+
+/** Brush sizes the tools offer (answer 6). */
+export const BRUSH_MIN = 1;
+export const BRUSH_MAX = 8;
+
+export function cloneCel(cel: CelPixels): CelPixels {
+  return { width: cel.width, height: cel.height, data: cel.data.slice() };
+}
+
+export function pixelAt(cel: CelPixels, x: number, y: number): number {
+  return x >= 0 && y >= 0 && x < cel.width && y < cel.height ? cel.data[y * cel.width + x]! : 0;
+}
+
+function setPixel(cel: CelPixels, x: number, y: number, index: number): void {
+  if (x >= 0 && y >= 0 && x < cel.width && y < cel.height) cel.data[y * cel.width + x] = index;
+}
+
+/**
+ * A square brush of `size` pixels on the point. An even size has no centre pixel, so it reaches one
+ * further right and down than left and up – the way Aseprite places it.
+ */
+export function stamp(cel: CelPixels, at: PixelPoint, size: number, index: number): void {
+  const n = Math.max(BRUSH_MIN, Math.min(BRUSH_MAX, Math.round(size)));
+  const x0 = at.x - Math.floor((n - 1) / 2);
+  const y0 = at.y - Math.floor((n - 1) / 2);
+  for (let y = y0; y < y0 + n; y++) for (let x = x0; x < x0 + n; x++) setPixel(cel, x, y, index);
+}
+
+/** The pixels of a straight line from one point to the other, both included (Bresenham). */
+export function linePoints(from: PixelPoint, to: PixelPoint): PixelPoint[] {
+  const points: PixelPoint[] = [];
+  let x = from.x;
+  let y = from.y;
+  const dx = Math.abs(to.x - x);
+  const dy = -Math.abs(to.y - y);
+  const sx = x < to.x ? 1 : -1;
+  const sy = y < to.y ? 1 : -1;
+  let error = dx + dy;
+  for (;;) {
+    points.push({ x, y });
+    if (x === to.x && y === to.y) return points;
+    const twice = 2 * error;
+    if (twice >= dy) {
+      error += dy;
+      x += sx;
+    }
+    if (twice <= dx) {
+      error += dx;
+      y += sy;
+    }
+  }
+}
+
+function box(a: PixelPoint, b: PixelPoint): { x0: number; y0: number; x1: number; y1: number } {
+  return { x0: Math.min(a.x, b.x), y0: Math.min(a.y, b.y), x1: Math.max(a.x, b.x), y1: Math.max(a.y, b.y) };
+}
+
+/** The pixels of a rectangle between two corners, both included: its border, or all of it. */
+export function rectPoints(a: PixelPoint, b: PixelPoint, filled: boolean): PixelPoint[] {
+  const { x0, y0, x1, y1 } = box(a, b);
+  const points: PixelPoint[] = [];
+  for (let y = y0; y <= y1; y++)
+    for (let x = x0; x <= x1; x++)
+      if (filled || x === x0 || x === x1 || y === y0 || y === y1) points.push({ x, y });
+  return points;
+}
+
+/**
+ * The pixels of the ellipse that fits the box between two corners. Filled, it is every pixel whose
+ * centre lies inside; the outline is the filled pixels with a neighbour outside, which gives a line
+ * one pixel wide without gaps – what a pixel artist expects rather than a thin sampled curve.
+ */
+export function ellipsePoints(a: PixelPoint, b: PixelPoint, filled: boolean): PixelPoint[] {
+  const { x0, y0, x1, y1 } = box(a, b);
+  const cx = (x0 + x1 + 1) / 2;
+  const cy = (y0 + y1 + 1) / 2;
+  const rx = (x1 - x0 + 1) / 2;
+  const ry = (y1 - y0 + 1) / 2;
+  const inside = (x: number, y: number): boolean => {
+    if (x < x0 || x > x1 || y < y0 || y > y1) return false;
+    const nx = (x + 0.5 - cx) / rx;
+    const ny = (y + 0.5 - cy) / ry;
+    return nx * nx + ny * ny <= 1;
+  };
+  const points: PixelPoint[] = [];
+  for (let y = y0; y <= y1; y++)
+    for (let x = x0; x <= x1; x++) {
+      if (!inside(x, y)) continue;
+      const edge = !inside(x - 1, y) || !inside(x + 1, y) || !inside(x, y - 1) || !inside(x, y + 1);
+      if (filled || edge) points.push({ x, y });
+    }
+  return points;
+}
+
+/** Every point stamped with the brush – how a line, a rectangle or an ellipse outline gets its width. */
+export function stampAll(cel: CelPixels, points: readonly PixelPoint[], size: number, index: number): void {
+  for (const point of points) stamp(cel, point, size, index);
+}
+
+/**
+ * Fills with `index`: the area of the same index the pixel lies in, joined along edges (not corners),
+ * or – `contiguous` off – every pixel of that index on the cel. Outside the cel, nothing happens.
+ */
+export function floodFill(cel: CelPixels, at: PixelPoint, index: number, contiguous: boolean): void {
+  const { width, height, data } = cel;
+  if (at.x < 0 || at.y < 0 || at.x >= width || at.y >= height) return;
+  const target = data[at.y * width + at.x]!;
+  if (target === index) return;
+  if (!contiguous) {
+    for (let i = 0; i < data.length; i++) if (data[i] === target) data[i] = index;
+    return;
+  }
+  const stack = [at.y * width + at.x];
+  data[at.y * width + at.x] = index;
+  while (stack.length > 0) {
+    const i = stack.pop() as number;
+    const x = i % width;
+    const neighbours = [x > 0 ? i - 1 : -1, x < width - 1 ? i + 1 : -1, i - width, i + width];
+    for (const n of neighbours)
+      if (n >= 0 && n < data.length && data[n] === target) {
+        data[n] = index;
+        stack.push(n);
+      }
+  }
+}
+
+/** Where the old canvas sits in the new one: each axis at its start (0), middle (0.5) or end (1). */
+export interface ResizeAnchor {
+  x: 0 | 0.5 | 1;
+  y: 0 | 0.5 | 1;
+}
+
+/** How far the old canvas is shifted in the new one; negative when a side is cut off. */
+export function anchorOffset(from: number, to: number, anchor: 0 | 0.5 | 1): number {
+  return Math.floor((to - from) * anchor);
+}
+
+/** The cel on a canvas of another size: pixels keep their place relative to the anchor, what sticks out is cut. */
+export function resizeCel(cel: CelPixels, width: number, height: number, anchor: ResizeAnchor): CelPixels {
+  const out = emptyCel(width, height);
+  const dx = anchorOffset(cel.width, width, anchor.x);
+  const dy = anchorOffset(cel.height, height, anchor.y);
+  for (let y = 0; y < cel.height; y++)
+    for (let x = 0; x < cel.width; x++) setPixel(out, x + dx, y + dy, cel.data[y * cel.width + x]!);
+  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 –
+ * the merged layer takes the lower one's.
+ */
+export function mergeCels(lower: CelPixels, upper: CelPixels): CelPixels {
+  const out = cloneCel(lower);
+  for (let y = 0; y < Math.min(lower.height, upper.height); y++)
+    for (let x = 0; x < Math.min(lower.width, upper.width); x++) {
+      const index = upper.data[y * upper.width + x]!;
+      if (index !== 0) out.data[y * out.width + x] = index;
+    }
+  return out;
+}