Let a drawing run over as many pages as the note

The ink was stuck on page one while the writing carried on without it,
which stopped making sense the moment a note could run to four pages.
Every page is exported anyway, so every page can be drawn on.

Pages are numbered the way the PDF reader numbers them, and only pages
that carry ink are stored, so the keys are the drawn pages. While drawing
there is always one blank page past the end: pages otherwise come from
how far the writing runs, and to draw on page three you would first have
had to write three pages.

A drawing that lives entirely on page one is still written in the old
single-page shape. Nothing requires that — it means an ordinary note is
stored exactly as it always was, and a device running an older build
still shows it.

The bin clears the page being looked at. Undo and redo work on the
drawing as a whole, because one Undo button that means four different
things depending on where you scrolled is not a button anyone can use.

And a real bug found on the way out: the exporter has written
drawings/<note>.png since the interface was put into English, while the
importer was still looking for zeichnungen/<note>.png. A drawing exported
by this very app came back from its own archive as nothing at all. Both
names are read now, and so are the further pages.

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

frontend/src/features/drawing/strokes.js

@@ -10,6 +10,15 @@ export const CANON_W = 1200,
   CANON_H = 1600;
 export const PREVIEW_DRAWING_W = 260; // history preview thumbnail
 export const STROKES_VERSION = 1;
+/* A drawing spread over more than one page.
+ *
+ * A note used to have exactly one sheet to draw on, which stopped making sense
+ * once the writing could run to four pages: the ink was stuck on the first one
+ * while the text carried on without it. Pages are numbered the way the PDF
+ * reader numbers them, and each keeps its own strokes in the same canonical
+ * space — so page 3 of a note means the same thing on a phone as on a desktop.
+ */
+export const SHEETS_VERSION = 2;
 
 // Widths are canonical units, so a "Medium" pen covers the same fraction of the
 // page everywhere. At the 760px desktop page width, M lands at roughly 3.5 CSS px.
@@ -41,10 +50,86 @@ export const strokeDocOf = (strokes, t) => ({
   strokes,
   ...(t ? { t } : {}),
 });
-export const docStrokes = (doc) => (Array.isArray(doc?.strokes) ? doc.strokes : []);
-export const sameStrokeDoc = (a, b) =>
-  a === b ||
-  (docStrokes(a).length === docStrokes(b).length && docStrokes(a).every((s, i) => s === docStrokes(b)[i]));
+/** The strokes on one canvas — page one, for a drawing that has several. */
+export const docStrokes = (doc) => sheetStrokes(doc, 1);
+
+/**
+ * A drawing's pages, keyed by 1-based page number.
+ *
+ * Reads either shape, so a note drawn before there were pages needs no
+ * migration: its single list of strokes is page one, which is where it was.
+ * Empty pages are dropped rather than stored, so "which pages are drawn on" is
+ * simply the keys.
+ */
+export function noteSheets(doc) {
+  if (!doc || typeof doc !== "object") return {};
+  const source =
+    doc.sheets && typeof doc.sheets === "object"
+      ? doc.sheets
+      : Array.isArray(doc.strokes)
+        ? { 1: doc.strokes }
+        : {};
+  const out = {};
+  for (const [key, strokes] of Object.entries(source)) {
+    const page = Number(key);
+    if (!Number.isInteger(page) || page < 1) continue;
+    if (!Array.isArray(strokes) || strokes.length === 0) continue;
+    out[String(page)] = strokes;
+  }
+  return out;
+}
+
+export const sheetStrokes = (doc, page) => noteSheets(doc)[String(page)] ?? [];
+
+/** Page numbers carrying ink, in reading order. */
+export const drawnSheets = (doc) =>
+  Object.keys(noteSheets(doc))
+    .map(Number)
+    .sort((a, b) => a - b);
+
+/** Every stroke in the drawing — for "is there anything here at all". */
+export const allStrokes = (doc) => {
+  const sheets = noteSheets(doc);
+  return drawnSheets(doc).flatMap((page) => sheets[String(page)]);
+};
+
+/**
+ * Builds a stroke document from pages.
+ *
+ * A drawing that lives entirely on page one is written in the old single-page
+ * shape. Nothing needs it to be — but it means an ordinary note's drawing is
+ * stored exactly as it always was, and a client that has not been updated yet
+ * still shows it.
+ */
+export function sheetDocOf(sheets, t) {
+  const clean = noteSheets({ sheets });
+  const pages = Object.keys(clean);
+  if (pages.length === 0 || (pages.length === 1 && pages[0] === "1")) {
+    return strokeDocOf(clean["1"] ?? [], t);
+  }
+  return { v: SHEETS_VERSION, w: CANON_W, h: CANON_H, sheets: clean, ...(t ? { t } : {}) };
+}
+
+/** The pages of `doc` with one page replaced — an empty page is removed. */
+export function sheetsWith(doc, page, strokes) {
+  const sheets = { ...noteSheets(doc) };
+  if (strokes?.length) sheets[String(page)] = strokes;
+  else delete sheets[String(page)];
+  return sheets;
+}
+
+/* Compared page by page. Flattening first would call a stroke moved from page
+ * two to page three "unchanged", and the move would never be saved. */
+export const sameStrokeDoc = (a, b) => {
+  if (a === b) return true;
+  const x = noteSheets(a),
+    y = noteSheets(b);
+  const keys = Object.keys(x);
+  if (keys.length !== Object.keys(y).length) return false;
+  return keys.every(
+    (k) => y[k] && x[k].length === y[k].length && x[k].every((s, i) => s === y[k][i])
+  );
+};
 
 export function paintStroke(ctx, s) {
   const p = s?.p;
@@ -77,8 +162,10 @@ export function paintStroke(ctx, s) {
   ctx.globalCompositeOperation = "source-over";
 }
 
-// Replays a whole drawing into a context of targetW × targetH device pixels.
-export function paintStrokeDoc(ctx, doc, targetW, targetH) {
+// Replays one page of a drawing into a context of targetW × targetH device
+// pixels. Single-page drawings are page one, which is what every caller that
+// never heard of pages asks for.
+export function paintStrokeDoc(ctx, doc, targetW, targetH, page = 1) {
   const w = doc?.w || CANON_W,
     h = doc?.h || CANON_H;
   ctx.setTransform(1, 0, 0, 1, 0, 0);
@@ -86,7 +173,7 @@ export function paintStrokeDoc(ctx, doc, targetW, targetH) {
   ctx.scale(targetW / w, targetH / h);
   ctx.lineCap = "round";
   ctx.lineJoin = "round";
-  for (const s of docStrokes(doc)) paintStroke(ctx, s);
+  for (const s of sheetStrokes(doc, page)) paintStroke(ctx, s);
   ctx.setTransform(1, 0, 0, 1, 0, 0);
 }