Add the A4 report designer and fix band layout

Brings in the A4 (millimetre) report designer alongside the existing
matrix editor, migrates the frontend from react-scripts to Vite/Vitest,
and fixes four defects found while using the A4 band tools.

Layout — layout.js now implements the standard banded-report model:
everything prints where it was drawn, and a band growing per data row is
the only thing that moves anything. Previously `paginate` re-flowed every
band from the top margin, so a band placed halfway down the page
previewed at the top, and `header` was treated as a page header and
hoisted above the statics drawn before it. A header is a COLUMN header:
it prints in place and repeats only on a continuation page. Statics now
take part too — one drawn below a band keeps its drawn gap as that band
grows, and follows onto the next page rather than vanishing when pushed
past the bottom margin. The displacement is keyed on the band's design
bottom, not on an instance's laid-out y: every row of a band shares one
design position, so keying on the instance measured the gap from row 1
and let the static overlap rows 2..n.

Band children — a child's x is relative to its band, as its y already
was. layout() emitted it raw, so a field printed measured from the paper
edge instead of the band's left margin. Instances now carry bandX.

Band placement — a band's x comes from the page margins, so creation
takes only the click's Y (the factory's x was being overwritten by the
spread order) and dragging is locked to the vertical axis. Bands render
as a strip, with top/bottom rules only, matching the matrix editor.
fromApiReport reflows on load so reports saved with a stray x straighten
themselves. Matrix bands are constrained to vertical too.

Drag lifecycle — useElementDrag re-subscribed its document listeners on
every render during a drag, because the effect depended on an unmemoized
onDrag. Each re-subscribe removed the mouseup listener before adding the
next, measured as add/remove/add/remove/add across two mousemoves, and a
release landing in that gap was lost: the element kept following the
cursor until the next click. Snapping made it routine, since a held
guide stops x/y changing and leaves the guide overlay's render sitting
between the move and the release. onDrag and dragData now go through
refs so the effect depends on [isDragging] alone.

Note: the matrix editor has no test coverage, so its band constraint is
verified by reading only. The A4 suite is 201 passing tests.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

.claude/agent-memory/react-expert-dev/testing-react.md

@@ -0,0 +1,65 @@
+# Testing React components in ScalesApp
+
+## What's available
+
+- **Vitest + jsdom** (`npm test` → `vitest run`). Run a single suite with:
+  `npx vitest run <path-to-test-file>`. Use `vi.*` (not `jest.*`); `globals: true`
+  is set, so `describe`/`test`/`expect`/`vi` need no import. See
+  [[vite-vitest-migration]].
+- **`@testing-library/react` is NOT installed.** Don't assume it; mount with
+  `createRoot` from `react-dom/client` and `act` from `react` instead.
+- There is no `src/setupTests.js`. Set `global.IS_REACT_ACT_ENVIRONMENT = true` in the
+  test file itself, or React logs "testing environment is not configured to support act(...)".
+- Import `act` from `react`, not `react-dom/test-utils` (the latter is deprecated in React 18
+  and prints a warning on every call).
+
+## Three gotchas that produce fake failures
+
+These each look like a component bug and are not. Verify with a tiny probe test before
+"fixing" component code.
+
+1. **React's `onBlur`/`onFocus` map to native `focusout`/`focusin`.**
+   Dispatching `new FocusEvent('blur')` does nothing — the handler never runs, so the
+   component looks broken. Dispatch `focusout`/`focusin` instead.
+
+2. **`MouseEvent` coerces `clientX`/`clientY` to integers.**
+   Passing a fractional pixel coordinate silently truncates. In a mm-based editor that
+   shows up as a ~0.3mm discrepancy that looks like a rounding bug in the conversion code.
+   Use whole pixels in tests and derive expected values from those same integers.
+
+3. **`<input type="number">` in jsdom returns `""` for a partial value like `"12."`.**
+   Real browsers sanitise similarly. See [[decimal-inputs]].
+
+## jsdom has no layout
+
+`getBoundingClientRect()` returns all zeros. For canvas/positioning components, stub it
+per test to pin a known origin:
+
+```js
+Element.prototype.getBoundingClientRect = function () {
+  if (this.classList.contains('a4-page')) {
+    return { left: 100, top: 50, /* ...*/ toJSON() {} };
+  }
+  return { left: 0, top: 0, /* ... */ toJSON() {} };
+};
+```
+
+## Driving controlled inputs
+
+React overrides the `value` setter, so `input.value = x` alone won't trigger `onChange`.
+Use the native setter, then dispatch `input`:
+
+```js
+const setter = Object.getOwnPropertyDescriptor(
+  window.HTMLInputElement.prototype, 'value'
+).set;
+setter.call(input, '12.');
+input.dispatchEvent(new Event('input', { bubbles: true }));
+```
+
+## Backend round-trips without a live server
+
+Outbound HTTP from the agent sandbox may be blocked even when the dev server is running.
+To exercise real DRF serializers/filters/DB, use Django's test client directly against the
+dev database — pass `APIClient(SERVER_NAME='localhost')`, since the default `testserver`
+host is rejected by `ALLOWED_HOSTS`.