Undo, and the toolbar in three groups

Undo takes back one's own latest mark, by the button, Ctrl+Z or two
quick taps of the eraser; the toolbar's drawing tools, the page and
view, and the session stand in three groups that do not move when the
tool changes; the buttons are a little smaller.

client/js/main.js

@@ -33,7 +33,7 @@ import { writePicture } from './files.js';
 import { pageToPng } from './page_picture.js';
 import { TextEditor } from './text_editor.js';
 import { enableTooltips } from './tooltip.js';
-import { guardSelection } from './selection_guard.js';
+import { guardSelection, inField } from './selection_guard.js';
 import { QUIET_ZONE, qrModules, qrPath } from './qr_code.js';
 
 /**
@@ -56,6 +56,12 @@ const ERASER_RADIUS = 10;
 
 /** With the text tool or the eraser, a press that moves less than this (3 mm) is a tap. */
 const TAP_DISTANCE = 30;
+/**
+ * Two taps of the eraser within this, both finding nothing to erase, undo
+ * the latest gesture (Andy, 2026-10-11).  A tap that erases something is
+ * never half of a double tap, so the eraser's own taps are unaffected.
+ */
+const DOUBLE_TAP_MS = 400;
 
 /**
  * An image file is shared as it is if it is no larger than this, in bytes
@@ -551,6 +557,9 @@ async function enterSession(invitationText, name, notebook) {
         syncLayers();
         showParticipants(session, renderer);
       },
+      onUndoChanged: () => {
+        /** @type {HTMLButtonElement} */ (element('undo')).disabled = !session.canUndo();
+      },
       onStatus: (status, detail) => {
         const text = { connecting: 'Connecting…', connected: 'Connected', failed: detail ?? 'Disconnected' };
         log(`Relay: ${text[status]}`);
@@ -616,16 +625,54 @@ async function enterSession(invitationText, name, notebook) {
   };
   new ResizeObserver(watchToolbar).observe(toolbar);
   watchToolbar();
+  // The drawing group keeps the width of its widest state, the pen's
+  // colours and widths, so that the page-and-view group, centred between
+  // it and the session group, stays put when the tool changes (Andy,
+  // 2026-10-11).  The floor rises if the group ever grows, as when a
+  // colour is added.
+  // The settings (colours, widths, font and size) keep their widest
+  // room likewise, so that Eraser, Hide and Undo, which stand after them
+  // since 2026-10-11, do not jump when a tool shows fewer settings.
+  for (const part of [element('drawing'), element('settings')]) {
+    let widest = 0;
+    new ResizeObserver(() => {
+      const width = part.getBoundingClientRect().width;
+      if (width > widest) {
+        widest = width;
+        part.style.minWidth = `${width}px`;
+      }
+    }).observe(part);
+  }
 
   textEditor = new TextEditor(pageElement, renderer, {
     setText: (block) => session.setText(block),
     removeText: (id) => session.removeTexts([id]),
+    beginEdit: (id) => session.beginTextEdit(id, 'editor'),
+    endEdit: (id) => session.endTextEdit(id, 'editor'),
     // A hold on the field being typed in moves its block, as on the page.
     beginHold: (clientX, clientY) => penTarget.beginHold?.(clientX, clientY) ?? false,
     holdMove: (clientX, clientY) => penTarget.holdMove?.(clientX, clientY),
     holdEnd: () => penTarget.holdEnd?.(),
   });
 
+  // Undo: one's own latest gesture, then the one before (Andy,
+  // 2026-10-11): the button, Ctrl+Z (Command+Z on a Mac) outside a field,
+  // and two quick taps of the eraser on empty paper (eraseEnded below).
+  // A block being typed is finished first, so that the undo is of it.
+  const undo = () => {
+    textEditor?.stop();
+    const what = session.undo();
+    if (what) log(`Undid ${what}`);
+  };
+  element('undo').addEventListener('click', undo);
+  document.addEventListener('keydown', (event) => {
+    if ((event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey &&
+        event.key.toLowerCase() === 'z' && !inField()) {
+      event.preventDefault();
+      undo();
+    }
+  });
+
   // Whether one's own writing may grow the page (the "Extend" box).
   let extend = localStorage.getItem(EXTEND_KEY) !== 'no';
   const extendBox = input('extend');
@@ -671,6 +718,8 @@ async function enterSession(invitationText, name, notebook) {
    */
   /** @type {Held | null} */
   let held = null;
+  /** When the eraser last tapped empty paper, by performance.now(); 0 if not lately. */
+  let lastEmptyTap = 0;
   /** @type {import('./page_model.js').Stroke | null}  The stroke a hold began as. */
   let strokeInProgress = null;
 
@@ -765,6 +814,7 @@ async function enterSession(invitationText, name, notebook) {
       if (hide) {
         const h = page.hides[hide.index];
         found = hold('hide', hide.index, h.id, { left: h.x, top: h.y, width: h.width, height: h.height }, hide.corner, x, y);
+        session.beginHideEdit(h.id);
       } else {
         const blocks = [...session.ownLayer.texts.values()];
         const at = rectAt(blocks.map(textBounds), x, y, reach);
@@ -773,6 +823,7 @@ async function enterSession(invitationText, name, notebook) {
           // Free text has no corners to resize by.
           const corner = block.height === null ? null : at.corner;
           found = hold('text', at.index, block.id, textBounds(block), corner, x, y);
+          session.beginTextEdit(block.id, 'hold');
         } else if (session.mayMakePages()) {
           const image = page.imageAt(x, y, reach);
           if (image) {
@@ -786,7 +837,7 @@ async function enterSession(invitationText, name, notebook) {
       if (strokeInProgress) {
         const begun = strokeInProgress;
         strokeInProgress = null;
-        session.endStroke();
+        session.endStroke(false);
         session.erase([begun.id]);
       }
       textEditor?.hidePreview();
@@ -826,11 +877,14 @@ async function enterSession(invitationText, name, notebook) {
       const r = currentHeldRect(held);
       if (r) log(`${held.kind} placed at ${r.left / 100}, ${r.top / 100} cm, ${r.width / 100} by ${r.height / 100} cm`);
       if (held.kind !== 'text') session.sendPageNow();
+      if (held.kind === 'text') session.endTextEdit(held.id, 'hold');
+      if (held.kind === 'hide') session.endHideEdit();
       held = null;
       renderer.showGrip(null);
     },
     eraseAlong: (x0, y0, x1, y1) => {
       textEditor?.stop();
+      session.beginErasing();
       const radius = renderer.pageLength(ERASER_RADIUS);
       const strokes = strokesTouched(session.ownLayer, x0, y0, x1, y1, radius);
       const texts = textsTouched(session.ownLayer, x0, y0, x1, y1, radius);
@@ -839,16 +893,40 @@ async function enterSession(invitationText, name, notebook) {
       return { strokes: strokes.length, texts: texts.length };
     },
     eraseEnded: (x, y, reach) => {
-      // A tap of the eraser on a Hide rectangle or an image removes it
-      // (the right to make pages, or having added the image).
-      if (reach >= TAP_DISTANCE) return;
-      const hide = session.page.hideAt(x, y, 0);
-      if (hide && session.removeHide(hide.index)) {
-        log(`Hide ${hide.index + 1} removed`);
+      // What the movement erased is one gesture to undo.
+      const erased = session.endErasing();
+      if (reach >= TAP_DISTANCE) {
+        lastEmptyTap = 0;
         return;
       }
-      const found = session.page.imageAt(x, y, 0);
-      if (found && session.removeImage(found.index)) log(`Image ${found.index + 1} removed`);
+      // A tap of the eraser on a Hide rectangle or an image removes it
+      // (the right to make pages, or having added the image).
+      let took = erased.strokes + erased.texts > 0;
+      if (!took) {
+        const hide = session.page.hideAt(x, y, 0);
+        if (hide && session.removeHide(hide.index)) {
+          log(`Hide ${hide.index + 1} removed`);
+          took = true;
+        } else {
+          const found = session.page.imageAt(x, y, 0);
+          if (found && session.removeImage(found.index)) {
+            log(`Image ${found.index + 1} removed`);
+            took = true;
+          }
+        }
+      }
+      if (took) {
+        lastEmptyTap = 0;
+        return;
+      }
+      // A tap on empty paper: the second within DOUBLE_TAP_MS undoes.
+      const now = performance.now();
+      if (now - lastEmptyTap <= DOUBLE_TAP_MS) {
+        lastEmptyTap = 0;
+        undo();
+      } else {
+        lastEmptyTap = now;
+      }
     },
     previewRect: (x0, y0, x1, y1) => {
       if (Math.abs(x1 - x0) >= TAP_DISTANCE || Math.abs(y1 - y0) >= TAP_DISTANCE) {
@@ -1170,7 +1248,12 @@ function press(group, chosen) {
 function buildToolbar(options) {
   for (const button of document.querySelectorAll('[data-tool]')) {
     button.addEventListener('click', () => {
-      press(/** @type {Element} */ (button.parentElement), button);
+      // The tool buttons stand in two groups since 2026-10-11 (Pen and
+      // Text before the colours they use, Eraser and Hide after), so the
+      // pressed one is marked among all of them, not among siblings.
+      for (const other of document.querySelectorAll('[data-tool]')) {
+        other.setAttribute('aria-pressed', String(other === button));
+      }
       const chosen = button.getAttribute('data-tool');
       options.setTool(chosen === 'eraser' ? 'eraser' : chosen === 'text' ? 'text' : chosen === 'hide' ? 'hide' : 'pen');
     });