signalk-chiplog 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -4,6 +4,19 @@ All notable changes to Chiplog are documented here. The format follows [Keep a C
 
 ## [Unreleased]
 
+## [1.2.0] - 2026-09-15
+
+### Added
+
+- The tablet app's handwriting pad now fills the whole screen and has a toolbar: fine pen, thick pen, highlighter, eraser, undo and a choice of colour (kept to the theme's colour in night mode). The eraser removes only the points it touches, splitting a stroke instead of deleting all of it; undo now steps back through erasing too, not just strokes. A stroke's colour and tool travel with it to the webapp's timeline and the PDF export, not just the tablet.
+
+### Fixed
+
+- The tablet app's stylus canvas now prevents the default action on every contact, not just the pen's — a resting palm's touch was left to the browser, which could hijack it as a gesture and cancel the pen's in-progress stroke, or show a native text-selection highlight over the canvas. iOS Safari's long-press selection callout on the canvas needed the whole entry app, not just the canvas, to opt out of selection to reliably stay away, plus blocking `selectstart`/`contextmenu`/`dragstart` directly since the CSS alone is unreliable on some iOS versions.
+- Quickly lifting and reapplying the pen could have its next stroke silently dropped: the previous contact's pointerup can arrive after the next one's pointerdown, which read as "still drawing" and refused to start the new stroke.
+- Worked around an iPadOS Safari/Scribble bug that could swallow a pen's pointer events mid-stroke, dropping strokes or having them mistakenly typed into the comment field, by also preventing the canvas's underlying touch events directly, not just the pointer ones.
+- An autopilot engagement, disengagement or mode change now takes an instrument snapshot like every other automatic event, instead of logging the change with no conditions attached.
+
 ## [1.1.0] - 2026-09-15
 
 ### Added
@@ -76,6 +89,7 @@ First release.
 - REST API under `/plugins/signalk-chiplog/api`, documented in [docs/API.md](docs/API.md).
 - Single SQLite database through Node's built-in `node:sqlite`: no native module to build.
 
-[Unreleased]: https://github.com/ricard33/signalk-chiplog/compare/v1.1.0...HEAD
+[Unreleased]: https://github.com/ricard33/signalk-chiplog/compare/v1.2.0...HEAD
+[1.2.0]: https://github.com/ricard33/signalk-chiplog/compare/v1.1.0...v1.2.0
 [1.1.0]: https://github.com/ricard33/signalk-chiplog/compare/v1.0.0...v1.1.0
 [1.0.0]: https://github.com/ricard33/signalk-chiplog/releases/tag/v1.0.0

package/README.md

@@ -153,9 +153,9 @@ Other entries made with no passage open go to the last passage if the boat is st
 ### Notes and handwriting
 
 - **Note** — type and tap **Log it**.
-- **Handwriting** — write or draw on the pad with a stylus or a finger, optionally add a comment, and tap **Log it**. Pen pressure sets the line width. **Undo stroke** and **Clear** fix mistakes. Once a stylus has touched the pad, fingers are ignored, so a palm resting on the screen does not draw.
+- **Handwriting** — takes over the whole screen, with a toolbar above the pad: fine pen, thick pen, highlighter, eraser, undo, and a choice of colour (kept to the theme's colour in night mode, to spare night vision). Pen pressure also sets the line width. The eraser removes only what it actually touches, splitting a stroke rather than deleting all of it; undo steps back through strokes and erasing alike. Once a stylus has touched the pad, fingers are ignored, so a palm resting on the screen does not draw. Add a comment and tap **Log it** to send.
 
-Handwritten notes appear as drawn in the logbook's timeline.
+Handwritten notes appear as drawn — colour, pen or highlighter included — in the logbook's timeline and in the PDF export, not just on the tablet.
 
 ### Latest entries
 
@@ -279,6 +279,10 @@ The USB drive is not mounted at the configured directory, or cannot be written.
 
 The server's clock is wrong — common on a Raspberry Pi without a real-time clock. Set it from GPS with `signalk-set-system-time`.
 
+### Handwriting strokes are dropped or turn into typed text
+
+On an iPad, this is Apple's **Scribble** intercepting the Apple Pencil before the page sees it — a known iPadOS/Safari limitation with no web-page-level fix (Scribble runs beneath the browser). If it happens often, turn Scribble off under **Settings → Apple Pencil → Scribble**; a tablet dedicated to Chiplog does not need it.
+
 ## Limitations
 
 - **Not yet:** a places page, and editing manoeuvre shortcuts from the webapps.

package/lib/event-watcher.js

@@ -222,7 +222,7 @@ function createEventWatcher({ db, readSelfPath, settings, observe, clock = Date.
       const target = pilot.engaged ? readAutopilotTarget() : null;
       logEvent(cycle, 'autopilot', subtype, {
         payload: { mode: pilot.mode, state: pilot.state, target },
-        snapshot: false
+        snapshot: true
       });
     }
   }

package/lib/events.js

@@ -55,6 +55,9 @@ function isFiniteNumber(value) {
   return typeof value === 'number' && Number.isFinite(value);
 }
 
+const HEX_COLOR = /^#[0-9a-f]{6}$/i;
+const STROKE_TOOLS = ['pen', 'highlighter'];
+
 function isValidStrokes(payload) {
   const strokes = isPlainObject(payload) ? payload.strokes : undefined;
   return (
@@ -72,7 +75,10 @@ function isValidStrokes(payload) {
             isFiniteNumber(point.y) &&
             isFiniteNumber(point.t) &&
             (point.pressure === undefined || isFiniteNumber(point.pressure))
-        )
+        ) &&
+        (stroke.color === undefined || HEX_COLOR.test(stroke.color)) &&
+        (stroke.tool === undefined || STROKE_TOOLS.includes(stroke.tool)) &&
+        (stroke.width === undefined || (isFiniteNumber(stroke.width) && stroke.width > 0))
     )
   );
 }
@@ -91,7 +97,8 @@ function validateContent(db, { type, subtype, comment, payload }) {
   }
   if (type === 'handwritten_annotation' && !isValidStrokes(payload)) {
     throw badRequest(
-      'A handwritten annotation requires payload.strokes: [{ points: [{ x, y, t, pressure? }] }]'
+      'A handwritten annotation requires payload.strokes: ' +
+        '[{ points: [{ x, y, t, pressure? }], color?, tool?: "pen"|"highlighter", width? }]'
     );
   }
 }

package/lib/logbook-pdf.js

@@ -18,6 +18,15 @@ const LINE_HEIGHT = 10;
 const CELL_PADDING = 3;
 const SKETCH_MAX_HEIGHT = 48;
 
+// A stroke's base width (SketchPanel.mjs's `fine` pen) when it predates the
+// toolbar and carries no width of its own.
+const DEFAULT_STROKE_WIDTH = 2.5;
+
+function hexToRgb(hex) {
+  const value = Number.parseInt(hex.slice(1), 16);
+  return [(value >> 16) & 0xff, (value >> 8) & 0xff, value & 0xff].map((channel) => channel / 255);
+}
+
 const GREY = [0.45, 0.45, 0.45];
 const RULE = [0.75, 0.75, 0.75];
 const HEAD_FILL = [0.9, 0.92, 0.94];
@@ -415,7 +424,11 @@ function drawRow(page, row, top) {
           originX + (point.x - sketch.minX) * sketch.scale,
           originY + (point.y - sketch.minY) * sketch.scale
         ]),
-        { width: 0.8 }
+        {
+          color: stroke.color ? hexToRgb(stroke.color) : undefined,
+          width: (stroke.width ?? DEFAULT_STROKE_WIDTH) * sketch.scale,
+          alpha: stroke.tool === 'highlighter'
+        }
       );
     }
   }

package/lib/pdf/writer.js

@@ -65,8 +65,10 @@ function createPage(width, height) {
       );
     },
 
-    // Round caps and joins, so a single point still shows as a dot.
-    polyline(points, { color = [0, 0, 0], width: lineWidth = 1 } = {}) {
+    // Round caps and joins, so a single point still shows as a dot. `alpha`
+    // draws through the document's one translucency state (a highlighter),
+    // rather than at full opacity.
+    polyline(points, { color = [0, 0, 0], width: lineWidth = 1, alpha = false } = {}) {
       if (points.length === 0) {
         return;
       }
@@ -75,11 +77,16 @@ function createPage(width, height) {
         .join(' ');
       const dot =
         points.length === 1 ? ` ${number(points[0][0])} ${number(y(points[0][1]))} l` : '';
-      ops.push(`q ${colour(color)} RG ${number(lineWidth)} w 1 J 1 j ${path}${dot} S Q`);
+      const gs = alpha ? '/GS1 gs ' : '';
+      ops.push(`q ${gs}${colour(color)} RG ${number(lineWidth)} w 1 J 1 j ${path}${dot} S Q`);
     }
   };
 }
 
+// The one translucency level the writer knows: a highlighter over ink, over
+// the paper. Only allocated once, referenced from any page that needs it.
+const HIGHLIGHTER_ALPHA = 0.35;
+
 function createPdf({ title = '', author = '', creator = '', creationDate = new Date() } = {}) {
   const pages = [];
 
@@ -91,19 +98,20 @@ function createPdf({ title = '', author = '', creator = '', creationDate = new D
     },
 
     finish() {
-      // Object numbers: 1 catalog, 2 page tree, 3–4 fonts, 5 info, then a page
-      // and its content stream for each page.
-      const pageRef = (index) => 6 + index * 2;
+      // Object numbers: 1 catalog, 2 page tree, 3–4 fonts, 5 the highlighter's
+      // ExtGState, 6 info, then a page and its content stream for each page.
+      const pageRef = (index) => 7 + index * 2;
       const objects = [
         '<< /Type /Catalog /Pages 2 0 R >>',
         `<< /Type /Pages /Kids [${pages.map((_, index) => `${pageRef(index)} 0 R`).join(' ')}] /Count ${pages.length} >>`,
         '<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica /Encoding /WinAnsiEncoding >>',
         '<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica-Bold /Encoding /WinAnsiEncoding >>',
+        `<< /Type /ExtGState /ca ${number(HIGHLIGHTER_ALPHA)} /CA ${number(HIGHLIGHTER_ALPHA)} >>`,
         `<< /Title ${infoString(title)} /Author ${infoString(author)} /Creator ${infoString(creator)} /Producer ${infoString(creator)} /CreationDate ${pdfDate(creationDate)} >>`
       ];
       pages.forEach((page, index) => {
         objects.push(
-          `<< /Type /Page /Parent 2 0 R /MediaBox [0 0 ${number(page.width)} ${number(page.height)}] /Resources << /Font << /F1 3 0 R /F2 4 0 R >> >> /Contents ${pageRef(index) + 1} 0 R >>`
+          `<< /Type /Page /Parent 2 0 R /MediaBox [0 0 ${number(page.width)} ${number(page.height)}] /Resources << /Font << /F1 3 0 R /F2 4 0 R >> /ExtGState << /GS1 5 0 R >> >> /Contents ${pageRef(index) + 1} 0 R >>`
         );
         const content = zlib.deflateSync(Buffer.from(page.ops.join('\n'), 'latin1'));
         objects.push({
@@ -137,7 +145,7 @@ function createPdf({ title = '', author = '', creator = '', creationDate = new D
         '0000000000 65535 f ',
         ...offsets.map((offset) => `${String(offset).padStart(10, '0')} 00000 n `),
         'trailer',
-        `<< /Size ${objects.length + 1} /Root 1 0 R /Info 5 0 R >>`,
+        `<< /Size ${objects.length + 1} /Root 1 0 R /Info 6 0 R >>`,
         'startxref',
         String(xrefOffset),
         '%%EOF',
@@ -149,4 +157,4 @@ function createPdf({ title = '', author = '', creator = '', creationDate = new D
   };
 }
 
-module.exports = { createPdf };
+module.exports = { createPdf, HIGHLIGHTER_ALPHA };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-chiplog",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Automated digital logbook plugin for Signal K, with keyboard/handwritten entry on tablet",
   "main": "index.js",
   "files": [

package/public/entry/entry.css

@@ -76,6 +76,12 @@ body {
   background: var(--bg);
   color: var(--text);
   -webkit-tap-highlight-color: transparent;
+  /* Form controls keep their own text selection regardless of this. iOS Safari's
+     long-press selection/callout on non-text content (the sketch canvas) only
+     reliably backs off when this is set this high up, not just on the element. */
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
 }
 
 body {
@@ -291,6 +297,44 @@ textarea:focus-visible {
   }
 }
 
+/* Handwriting takes the whole screen while it is the active tab: a small
+   writing area is the opposite of what a stylus needs. */
+.writer.fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  margin: 0;
+  border-radius: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.writer.fullscreen .tabs {
+  flex: none;
+}
+
+.writer.fullscreen .tab-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.writer.fullscreen .sketch {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.writer.fullscreen .sketch-surface {
+  flex: 1;
+  min-height: 0;
+}
+
+.writer.fullscreen .sketch-canvas {
+  height: 100%;
+}
+
 .panel {
   background: var(--surface);
   border: 1px solid var(--border);
@@ -366,8 +410,47 @@ input {
   gap: 0.75rem;
 }
 
+.sketch-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.sketch-tools {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.sketch-colors {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-left: auto;
+}
+
+.color-swatch {
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  border: 2px solid var(--border);
+  border-radius: 999px;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+.color-swatch[aria-pressed='true'] {
+  box-shadow:
+    0 0 0 2px var(--surface),
+    0 0 0 4px var(--accent);
+}
+
 .sketch-surface {
   position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
 }
 
 .sketch-canvas {
@@ -379,9 +462,16 @@ input {
   background: var(--paper);
   color: var(--ink);
   touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
   cursor: crosshair;
 }
 
+.sketch-canvas.erasing {
+  cursor: cell;
+}
+
 .sketch-hint {
   position: absolute;
   inset: 0;

package/public/entry/js/components/Icons.mjs

@@ -18,6 +18,95 @@ export function PencilIcon() {
   </svg>`;
 }
 
+export function FinePenIcon() {
+  return html`<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
+    <path
+      d="M13.3 2.7 17.3 6.7 7 17 2.5 17.5 3 13 Z"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.2"
+      stroke-linejoin="round"
+      stroke-linecap="round"
+    />
+    <path d="M11.3 4.7 15.3 8.7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" />
+  </svg>`;
+}
+
+export function ThickPenIcon() {
+  return html`<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
+    <path
+      d="M13.3 2.7 17.3 6.7 7 17 2.5 17.5 3 13 Z"
+      fill="currentColor"
+      fill-opacity="0.2"
+      stroke="currentColor"
+      stroke-width="2.2"
+      stroke-linejoin="round"
+      stroke-linecap="round"
+    />
+    <path d="M11.3 4.7 15.3 8.7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" />
+  </svg>`;
+}
+
+export function HighlighterIcon() {
+  return html`<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
+    <path
+      d="M6 12.5 12.5 6l3 3-6.5 6.5z"
+      fill="currentColor"
+      fill-opacity="0.35"
+      stroke="currentColor"
+      stroke-width="1.4"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6 12.5 3.5 17l4.5-2.5z"
+      fill="currentColor"
+      stroke="currentColor"
+      stroke-width="1.2"
+      stroke-linejoin="round"
+    />
+  </svg>`;
+}
+
+export function EraserIcon() {
+  return html`<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
+    <g transform="rotate(-25 10 10)">
+      <rect
+        x="4"
+        y="6"
+        width="12"
+        height="8"
+        rx="1.6"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.6"
+        stroke-linejoin="round"
+      />
+      <line x1="4" y1="10.5" x2="16" y2="10.5" stroke="currentColor" stroke-width="1.6" />
+    </g>
+  </svg>`;
+}
+
+export function UndoIcon() {
+  return html`<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
+    <path
+      d="M5 8H12a4 4 0 0 1 0 8H8"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.7"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8 4.5 4.5 8 8 11.5"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.7"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>`;
+}
+
 export function TrashIcon() {
   return html`<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
     <path d="M4 6h12" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />

package/public/entry/js/components/SketchPanel.mjs

@@ -1,48 +1,92 @@
 import { html, useEffect, useRef, useState } from '../../../vendor/preact-htm.mjs';
 import { useLocale } from '../../../js/context.mjs';
 import { createStrokeRecorder, strokeWidth } from '../strokes.mjs';
+import { EraserIcon, FinePenIcon, HighlighterIcon, ThickPenIcon, UndoIcon } from './Icons.mjs';
 
-const BASE_WIDTH = 2.5;
+// Presets for the toolbar: base width in canvas CSS pixels, before pressure
+// scaling (SPEC §4.4). Only the highlighter is drawn with transparency.
+const TOOLS = {
+  fine: { kind: 'pen', width: 2.5, icon: FinePenIcon, labelKey: 'entry.toolFine' },
+  large: { kind: 'pen', width: 5.5, icon: ThickPenIcon, labelKey: 'entry.toolLarge' },
+  highlighter: {
+    kind: 'highlighter',
+    width: 16,
+    icon: HighlighterIcon,
+    labelKey: 'entry.toolHighlighter'
+  }
+};
+const TOOL_ORDER = ['fine', 'large', 'highlighter'];
+const HIGHLIGHTER_ALPHA = 0.35;
+const ERASER_RADIUS = 12;
+const DEFAULT_COLOR = '#0f1b26';
+
+// The first choice keeps the theme's ink colour (so a note drawn without
+// picking a colour looks the same as before this toolbar existed); the rest
+// are fixed so the note looks the same everywhere it is later shown.
+const COLORS = [
+  { id: 'auto', value: null, labelKey: 'entry.colorDefault' },
+  { id: 'blue', value: '#1d4ed8', labelKey: 'entry.colorBlue' },
+  { id: 'red', value: '#dc2626', labelKey: 'entry.colorRed' },
+  { id: 'green', value: '#16a34a', labelKey: 'entry.colorGreen' },
+  { id: 'amber', value: '#d97706', labelKey: 'entry.colorAmber' }
+];
+
+function toHex(cssColor) {
+  const channels = cssColor.match(/\d+/g);
+  if (!channels) {
+    return DEFAULT_COLOR;
+  }
+  return `#${channels
+    .slice(0, 3)
+    .map((channel) => Number(channel).toString(16).padStart(2, '0'))
+    .join('')}`;
+}
 
 function drawStroke(context, stroke) {
   const { points } = stroke;
+  const base = stroke.width ?? TOOLS.fine.width;
+  context.strokeStyle = stroke.color ?? DEFAULT_COLOR;
+  context.fillStyle = stroke.color ?? DEFAULT_COLOR;
+  context.globalAlpha = stroke.tool === 'highlighter' ? HIGHLIGHTER_ALPHA : 1;
   if (points.length === 1) {
     const [point] = points;
     context.beginPath();
-    context.arc(point.x, point.y, strokeWidth(BASE_WIDTH, point.pressure) / 2, 0, Math.PI * 2);
+    context.arc(point.x, point.y, strokeWidth(base, point.pressure) / 2, 0, Math.PI * 2);
     context.fill();
-    return;
-  }
-  for (let i = 1; i < points.length; i += 1) {
-    const from = points[i - 1];
-    const to = points[i];
-    context.lineWidth = strokeWidth(BASE_WIDTH, to.pressure);
-    context.beginPath();
-    context.moveTo(from.x, from.y);
-    context.lineTo(to.x, to.y);
-    context.stroke();
+  } else {
+    for (let i = 1; i < points.length; i += 1) {
+      const from = points[i - 1];
+      const to = points[i];
+      context.lineWidth = strokeWidth(base, to.pressure);
+      context.beginPath();
+      context.moveTo(from.x, from.y);
+      context.lineTo(to.x, to.y);
+      context.stroke();
+    }
   }
+  context.globalAlpha = 1;
 }
 
-export function SketchPanel({ busy, onLog }) {
+export function SketchPanel({ busy, onLog, night }) {
   const { t } = useLocale();
   const canvas = useRef(null);
   const recorder = useRef(createStrokeRecorder());
   const activePointer = useRef(null);
   // Once a pen has touched the canvas, fingers are the palm resting on it.
   const penSeen = useRef(false);
+  const [tool, setTool] = useState('fine');
+  const [color, setColor] = useState(COLORS[0]);
   const [strokeCount, setStrokeCount] = useState(0);
+  const [canUndo, setCanUndo] = useState(false);
   const [comment, setComment] = useState('');
 
-  function context() {
-    const element = canvas.current;
-    const drawing = element.getContext('2d');
-    drawing.lineCap = 'round';
-    drawing.lineJoin = 'round';
-    const colour = getComputedStyle(element).color;
-    drawing.strokeStyle = colour;
-    drawing.fillStyle = colour;
-    return drawing;
+  function syncState() {
+    setStrokeCount(recorder.current.strokes.length);
+    setCanUndo(recorder.current.canUndo());
+  }
+
+  function resolveColor() {
+    return color.value ?? toHex(getComputedStyle(canvas.current).color);
   }
 
   function redraw() {
@@ -54,7 +98,9 @@ export function SketchPanel({ busy, onLog }) {
     const { width, height } = element.getBoundingClientRect();
     element.width = Math.round(width * ratio);
     element.height = Math.round(height * ratio);
-    const drawing = context();
+    const drawing = element.getContext('2d');
+    drawing.lineCap = 'round';
+    drawing.lineJoin = 'round';
     drawing.setTransform(ratio, 0, 0, ratio, 0, 0);
     drawing.clearRect(0, 0, width, height);
     recorder.current.strokes.forEach((stroke) => drawStroke(drawing, stroke));
@@ -73,23 +119,52 @@ export function SketchPanel({ busy, onLog }) {
   };
   const pressureOf = (event) => (event.pointerType === 'pen' ? event.pressure : undefined);
 
+  // Belt-and-braces alongside the CSS `user-select`/`-webkit-touch-callout: none`:
+  // some iOS Safari versions still raise the selection/lookup callout on a long
+  // press over the canvas despite that CSS, so block it at the event level too.
+  // Also covers a WebKit bug (https://bugs.webkit.org/show_bug.cgi?id=217430): with
+  // Scribble on, Safari can swallow a pen's pointer events mid-stroke unless the
+  // underlying touchstart/touchmove is prevented directly, not just the pointer one.
+  const suppressDefault = (event) => event.preventDefault();
+
   const onPointerDown = (event) => {
+    event.preventDefault();
     if (event.pointerType === 'pen') {
       penSeen.current = true;
     } else if (event.pointerType === 'touch' && penSeen.current) {
       return;
     }
-    if (activePointer.current !== null || busy) {
+    if (activePointer.current !== null) {
+      if (event.pointerType !== 'pen') {
+        return;
+      }
+      // A pen can only touch one point at a time, so a new pen contact means the
+      // previous one has lifted even if its pointerup/pointercancel hasn't arrived
+      // yet — quickly reapplying the pen can reorder those events. Finish the
+      // stale stroke instead of silently dropping the new one.
+      if (tool !== 'eraser') {
+        recorder.current.end();
+      }
+      activePointer.current = null;
+    }
+    if (busy) {
       return;
     }
-    event.preventDefault();
     canvas.current.setPointerCapture(event.pointerId);
     activePointer.current = event.pointerId;
     const [x, y] = locate(event);
-    const stroke = recorder.current.begin(x, y, event.timeStamp, pressureOf(event));
-    const drawing = context();
-    drawing.setTransform(window.devicePixelRatio || 1, 0, 0, window.devicePixelRatio || 1, 0, 0);
-    drawStroke(drawing, stroke);
+    if (tool === 'eraser') {
+      recorder.current.beginErase();
+      if (recorder.current.eraseAt(x, y, ERASER_RADIUS)) {
+        redraw();
+      }
+      syncState();
+      return;
+    }
+    const style = { color: resolveColor(), tool: TOOLS[tool].kind, width: TOOLS[tool].width };
+    recorder.current.begin(x, y, event.timeStamp, pressureOf(event), style);
+    redraw();
+    syncState();
   };
 
   const onPointerMove = (event) => {
@@ -97,16 +172,24 @@ export function SketchPanel({ busy, onLog }) {
       return;
     }
     const samples = event.getCoalescedEvents?.() ?? [];
-    const drawing = context();
-    drawing.setTransform(window.devicePixelRatio || 1, 0, 0, window.devicePixelRatio || 1, 0, 0);
-    for (const sample of samples.length > 0 ? samples : [event]) {
-      const [x, y] = locate(sample);
-      const stroke = recorder.current.extend(x, y, sample.timeStamp, pressureOf(sample));
-      const { points } = stroke;
-      if (points.length > 1) {
-        drawStroke(drawing, { points: points.slice(-2) });
+    const list = samples.length > 0 ? samples : [event];
+    if (tool === 'eraser') {
+      let changed = false;
+      for (const sample of list) {
+        const [x, y] = locate(sample);
+        changed = recorder.current.eraseAt(x, y, ERASER_RADIUS) || changed;
+      }
+      if (changed) {
+        redraw();
+        syncState();
       }
+      return;
+    }
+    for (const sample of list) {
+      const [x, y] = locate(sample);
+      recorder.current.extend(x, y, sample.timeStamp, pressureOf(sample));
     }
+    redraw();
   };
 
   const onPointerUp = (event) => {
@@ -114,21 +197,23 @@ export function SketchPanel({ busy, onLog }) {
       return;
     }
     activePointer.current = null;
-    recorder.current.end();
-    setStrokeCount(recorder.current.strokes.length);
+    if (tool !== 'eraser') {
+      recorder.current.end();
+    }
+    syncState();
   };
 
   const undo = () => {
     recorder.current.undo();
-    setStrokeCount(recorder.current.strokes.length);
     redraw();
+    syncState();
   };
 
   const clear = () => {
     recorder.current.clear();
-    setStrokeCount(0);
     setComment('');
     redraw();
+    syncState();
   };
 
   const send = async () => {
@@ -144,16 +229,73 @@ export function SketchPanel({ busy, onLog }) {
 
   return html`
     <div class="sketch">
+      <div class="sketch-toolbar" role="toolbar" aria-label=${t('entry.sketchTools')}>
+        <div class="sketch-tools">
+          ${TOOL_ORDER.map((key) => {
+            const preset = TOOLS[key];
+            const Icon = preset.icon;
+            return html`<button
+              type="button"
+              key=${key}
+              class="tool-button icon-button"
+              aria-pressed=${tool === key}
+              aria-label=${t(preset.labelKey)}
+              onClick=${() => setTool(key)}
+            >
+              <${Icon} />
+            </button>`;
+          })}
+          <button
+            type="button"
+            class="tool-button icon-button"
+            aria-pressed=${tool === 'eraser'}
+            aria-label=${t('entry.toolEraser')}
+            onClick=${() => setTool('eraser')}
+          >
+            <${EraserIcon} />
+          </button>
+          <button
+            type="button"
+            class="tool-button icon-button"
+            disabled=${!canUndo}
+            aria-label=${t('entry.sketchUndo')}
+            onClick=${undo}
+          >
+            <${UndoIcon} />
+          </button>
+        </div>
+        ${
+          !night &&
+          html`<div class="sketch-colors">
+          ${COLORS.map(
+            (option) => html`<button
+              type="button"
+              key=${option.id}
+              class="color-swatch"
+              style=${{ background: option.value ?? 'var(--ink)' }}
+              aria-pressed=${color.id === option.id}
+              aria-label=${t(option.labelKey)}
+              onClick=${() => setColor(option)}
+            ></button>`
+          )}
+        </div>`
+        }
+      </div>
       <div class="sketch-surface">
         <canvas
           ref=${canvas}
-          class="sketch-canvas"
+          class="sketch-canvas ${tool === 'eraser' ? 'erasing' : ''}"
           role="img"
           aria-label=${t('entry.sketchArea')}
           onPointerDown=${onPointerDown}
           onPointerMove=${onPointerMove}
           onPointerUp=${onPointerUp}
           onPointerCancel=${onPointerUp}
+          onContextMenu=${suppressDefault}
+          onSelectStart=${suppressDefault}
+          onDragStart=${suppressDefault}
+          onTouchStart=${suppressDefault}
+          onTouchMove=${suppressDefault}
         ></canvas>
         ${strokeCount === 0 && html`<span class="sketch-hint" aria-hidden="true">${t('entry.sketchHint')}</span>`}
       </div>
@@ -166,9 +308,6 @@ export function SketchPanel({ busy, onLog }) {
         onInput=${(event) => setComment(event.currentTarget.value)}
       />
       <div class="sketch-actions">
-        <button type="button" class="tool-button" disabled=${strokeCount === 0} onClick=${undo}>
-          ${t('entry.sketchUndo')}
-        </button>
         <button type="button" class="tool-button" disabled=${strokeCount === 0} onClick=${clear}>
           ${t('entry.sketchClear')}
         </button>

package/public/entry/js/main.mjs

@@ -285,7 +285,7 @@ function App({ journal }) {
           busy=${busy}
           onLog=${log}
         />
-        <section class="panel writer">
+        <section class="panel writer ${tab === 'sketch' ? 'fullscreen' : ''}">
           <div class="tabs" role="tablist">
             ${['note', 'sketch'].map(
               (name) => html`<button
@@ -300,8 +300,10 @@ function App({ journal }) {
               </button>`
             )}
           </div>
-          <div hidden=${tab !== 'note'}><${NotePanel} busy=${busy} onLog=${log} /></div>
-          <div hidden=${tab !== 'sketch'}><${SketchPanel} busy=${busy} onLog=${log} /></div>
+          <div class="tab-panel" hidden=${tab !== 'note'}><${NotePanel} busy=${busy} onLog=${log} /></div>
+          <div class="tab-panel" hidden=${tab !== 'sketch'}>
+            <${SketchPanel} busy=${busy} onLog=${log} night=${night} />
+          </div>
         </section>
       </div>
       <${RecentList}

package/public/entry/js/strokes.mjs

@@ -1,14 +1,29 @@
 // Records a handwritten note as vector strokes, the format the logbook stores
 // (SPEC §4.4): points in CSS pixels of the canvas, t in milliseconds from the
-// first point of the note, pressure only from a pen.
+// first point of the note, pressure only from a pen. A stroke also carries the
+// tool it was drawn with — color, tool ('pen'/'highlighter') and base width —
+// so the webapp and PDF can reproduce it, not just the tablet.
 
 // Rounded through toFixed: multiplying back by a step leaves 38.800000000000004.
 const round = (value, digits) => Number(value.toFixed(digits));
 
+// Shortest distance from (px, py) to the segment (x1, y1)-(x2, y2).
+function distanceToSegment(px, py, x1, y1, x2, y2) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const lengthSquared = dx * dx + dy * dy;
+  const t =
+    lengthSquared === 0
+      ? 0
+      : Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lengthSquared));
+  return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
+}
+
 export function createStrokeRecorder() {
   let strokes = [];
   let current = null;
   let origin = null;
+  let history = [];
 
   function point(x, y, time, pressure) {
     origin ??= time;
@@ -19,9 +34,18 @@ export function createStrokeRecorder() {
     return recorded;
   }
 
+  // Snapshots the strokes as they are now, so a single `undo()` can restore
+  // them after either a finished pen stroke or a whole eraser gesture.
+  function pushHistory() {
+    history.push(
+      strokes.map((stroke) => ({ ...stroke, points: stroke.points.map((p) => ({ ...p })) }))
+    );
+  }
+
   return {
-    begin(x, y, time, pressure) {
-      current = { points: [point(x, y, time, pressure)] };
+    begin(x, y, time, pressure, style) {
+      pushHistory();
+      current = { points: [point(x, y, time, pressure)], ...style };
       strokes.push(current);
       return current;
     },
@@ -42,9 +66,55 @@ export function createStrokeRecorder() {
       current = null;
     },
 
+    // Call once when an eraser gesture starts, then `eraseAt` for each move:
+    // the whole gesture undoes as one action, like a finished pen stroke.
+    beginErase() {
+      pushHistory();
+    },
+
+    // Removes any point of any stroke within `radius` of (x, y), splitting a
+    // stroke in two where the erased portion was in its middle. Returns
+    // whether anything was actually erased.
+    eraseAt(x, y, radius) {
+      let changed = false;
+      const next = [];
+      for (const stroke of strokes) {
+        const { points } = stroke;
+        let run = [];
+        const flushRun = () => {
+          if (run.length > 0) {
+            next.push({ ...stroke, points: run });
+            run = [];
+          }
+        };
+        // Tested against the last point actually kept, not the original array: once a
+        // point is erased, the segment picks up from before it, so a straight line
+        // erased in its middle still splits into two, instead of eating one more
+        // point than intended on the far side of the gap.
+        for (const candidate of points) {
+          const kept = run.at(-1);
+          const hit = kept
+            ? distanceToSegment(x, y, kept.x, kept.y, candidate.x, candidate.y) <= radius
+            : Math.hypot(candidate.x - x, candidate.y - y) <= radius;
+          if (hit) {
+            changed = true;
+            flushRun();
+          } else {
+            run.push(candidate);
+          }
+        }
+        flushRun();
+      }
+      if (changed) {
+        strokes = next;
+        current = null;
+      }
+      return changed;
+    },
+
     undo() {
+      strokes = history.pop() ?? [];
       current = null;
-      strokes.pop();
       if (strokes.length === 0) {
         origin = null;
       }
@@ -54,19 +124,29 @@ export function createStrokeRecorder() {
       strokes = [];
       current = null;
       origin = null;
+      history = [];
     },
 
     get strokes() {
       return strokes;
     },
 
+    canUndo() {
+      return history.length > 0;
+    },
+
     isEmpty() {
       return strokes.length === 0;
     },
 
     payload({ width, height }) {
       return {
-        strokes: strokes.map((stroke) => ({ points: stroke.points.map((p) => ({ ...p })) })),
+        strokes: strokes.map((stroke) => ({
+          points: stroke.points.map((p) => ({ ...p })),
+          ...(stroke.color !== undefined ? { color: stroke.color } : {}),
+          ...(stroke.tool !== undefined ? { tool: stroke.tool } : {}),
+          ...(stroke.width !== undefined ? { width: stroke.width } : {})
+        })),
         width: Math.round(width),
         height: Math.round(height)
       };

package/public/js/components/Timeline.mjs

@@ -10,6 +10,10 @@ function strokePoints(stroke) {
   return (points.length === 1 ? [points[0], points[0]] : points).join(' ');
 }
 
+// Kept in step with SketchPanel.mjs and logbook-pdf.js: how translucent a
+// highlighter stroke is, wherever it is later shown.
+const HIGHLIGHTER_OPACITY = 0.35;
+
 export function Strokes({ strokes, label }) {
   const points = strokes.flatMap((stroke) => stroke.points ?? []);
   if (points.length === 0) {
@@ -21,6 +25,9 @@ export function Strokes({ strokes, label }) {
   const minY = Math.min(...ys);
   const size = Math.max(Math.max(...xs) - minX, Math.max(...ys) - minY, 1);
   const pad = size * 0.05;
+  // Older notes, drawn before the toolbar existed, have no color/width of their
+  // own: they fall back to a single relative width in the current text colour.
+  const defaultWidth = size / 120;
   return html`
     <svg
       class="strokes"
@@ -28,18 +35,15 @@ export function Strokes({ strokes, label }) {
       role="img"
       aria-label=${label}
     >
-      <g
-        fill="none"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width=${size / 120}
-      >
+      <g fill="none" stroke-linecap="round" stroke-linejoin="round">
         ${strokes.map(
           (stroke, index) =>
             html`<polyline
               key=${index}
               points=${strokePoints(stroke)}
+              stroke=${stroke.color ?? 'currentColor'}
+              stroke-width=${stroke.width ?? defaultWidth}
+              stroke-opacity=${stroke.tool === 'highlighter' ? HIGHLIGHTER_OPACITY : 1}
             />`
         )}
       </g>

package/public/js/i18n.mjs

@@ -237,10 +237,20 @@ export const MESSAGES = {
     'entry.refused': 'Not logged: {message}',
     'entry.chooseSail': 'Which sail is up?',
     'entry.otherSail': 'Other sail',
-    'entry.sketchUndo': 'Undo stroke',
+    'entry.sketchUndo': 'Undo',
     'entry.sketchClear': 'Clear',
     'entry.sketchArea': 'Handwriting area',
     'entry.sketchHint': 'Write or draw here',
+    'entry.sketchTools': 'Drawing tools',
+    'entry.toolFine': 'Fine pen',
+    'entry.toolLarge': 'Thick pen',
+    'entry.toolHighlighter': 'Highlighter',
+    'entry.toolEraser': 'Eraser',
+    'entry.colorDefault': 'Theme colour',
+    'entry.colorBlue': 'Blue',
+    'entry.colorRed': 'Red',
+    'entry.colorGreen': 'Green',
+    'entry.colorAmber': 'Amber',
     'entry.recent': 'Latest entries',
     'entry.recentEmpty': 'Nothing logged in this passage yet.',
     'entry.pending': 'Waiting to be sent',
@@ -513,10 +523,20 @@ export const MESSAGES = {
     'entry.refused': 'Non consigné : {message}',
     'entry.chooseSail': 'Quelle voile est envoyée ?',
     'entry.otherSail': 'Autre voile',
-    'entry.sketchUndo': 'Effacer le trait',
+    'entry.sketchUndo': 'Annuler',
     'entry.sketchClear': 'Tout effacer',
     'entry.sketchArea': 'Zone d’écriture',
     'entry.sketchHint': 'Écrivez ou dessinez ici',
+    'entry.sketchTools': 'Outils de dessin',
+    'entry.toolFine': 'Crayon fin',
+    'entry.toolLarge': 'Crayon large',
+    'entry.toolHighlighter': 'Surligneur',
+    'entry.toolEraser': 'Gomme',
+    'entry.colorDefault': 'Couleur du thème',
+    'entry.colorBlue': 'Bleu',
+    'entry.colorRed': 'Rouge',
+    'entry.colorGreen': 'Vert',
+    'entry.colorAmber': 'Orange',
     'entry.recent': 'Dernières saisies',
     'entry.recentEmpty': 'Rien de consigné dans cette navigation.',
     'entry.pending': 'En attente d’envoi',