improve notepad features and add drawing canvas

tests/toolbox-modules.test.mjs

@@ -3,7 +3,7 @@ import { test } from "node:test";
 import assert from "node:assert/strict";
 import { parseColonImportLines } from "../website/src/features/toolboxes/modules/textImport.js";
 import { getTimePatternRecurrenceMs, getTimePatternTargetMs } from "../website/src/features/toolboxes/modules/timerUtils.js";
-import { compactModuleDataForStorage, createToolboxExportPayload, normalizeTaskPlannerData } from "../website/src/features/toolboxes/storage/toolboxStorage.js";
+import { compactModuleDataForStorage, createToolboxExportPayload, normalizeNotepadData, normalizeTaskPlannerData } from "../website/src/features/toolboxes/storage/toolboxStorage.js";
 
 test("colon text import keeps urls intact after the first separator", () => {
   assert.deepEqual(parseColonImportLines("Build:https://example.com/build?class=rogue\nPotion:10"), [
@@ -28,6 +28,82 @@ test("time pattern recurrence uses configured frequency instead of next remainin
   assert.equal(getTimePatternRecurrenceMs("X:X:30"), 60 * 1000);
 });
 
+test("notepad data migrates text, sanitizes html and compacts drawings", () => {
+  const migrated = normalizeNotepadData({ text: "Boss\nPhase 2" });
+  assert.equal(migrated.text, "Boss\nPhase 2");
+  assert.match(migrated.html, /<p>Boss<\/p><p>Phase 2<\/p>/);
+
+  const normalized = normalizeNotepadData({
+    html: '<h3 onclick="bad()">Titre</h3><script>alert(1)</script><span style="color: rgb(246, 196, 83); position: fixed">Important</span><img src=x>',
+    updatedAt: "2026-07-29T12:00:00.000Z",
+    drawingMode: "permanent",
+    drawings: {
+      strokes: [
+        {
+          id: "stroke1",
+          color: "#f6c453",
+          width: 40,
+          points: [{ x: 1.123 }, { x: 4, y: 8 }, { x: 12.345, y: 16.789 }]
+        }
+      ]
+    }
+  });
+
+  assert.match(normalized.html, /<h3>Titre<\/h3>/);
+  assert.match(normalized.html, /<span style="color: #f6c453">Important<\/span>/);
+  assert.doesNotMatch(normalized.html, /script|onclick|position|img/);
+  assert.equal(normalized.updatedAt, "2026-07-29T12:00:00.000Z");
+  assert.equal(normalized.drawings.strokes[0].width, 24);
+  assert.deepEqual(normalized.drawings.strokes[0].points, [{ x: 4, y: 8 }, { x: 12.35, y: 16.79 }]);
+
+  const compactTemporary = compactModuleDataForStorage("notepad", {
+    html: "<p>Note</p>",
+    text: "Note",
+    drawingMode: "temporary",
+    drawings: { strokes: normalized.drawings.strokes }
+  });
+  assert.equal(compactTemporary.drawings, undefined);
+  assert.equal(compactTemporary.drawingMode, undefined);
+
+  const compactPermanent = compactModuleDataForStorage("notepad", {
+    html: "<p>Note</p>",
+    text: "Note",
+    updatedAt: "not a date",
+    drawingMode: "permanent",
+    drawings: normalized.drawings
+  });
+  assert.equal(compactPermanent.updatedAt, undefined);
+  assert.equal(compactPermanent.drawingMode, "permanent");
+  assert.equal(compactPermanent.drawings.strokes.length, 1);
+});
+
+test("image annotation storage keeps drawing strokes as percent coordinates", () => {
+  const compact = compactModuleDataForStorage("imageAnnotation", {
+    image: "data:image/png;base64,aaa",
+    markers: [{ id: "marker1", x: 120, y: 50, label: "Boss" }],
+    drawings: {
+      strokes: [
+        {
+          id: "stroke1",
+          color: "#22d3ee",
+          width: 4,
+          points: [{ x: 10.123, y: 20.456 }, { x: 140, y: -4 }]
+        }
+      ]
+    }
+  });
+
+  assert.equal(compact.markers[0].x, 100);
+  assert.deepEqual(compact.drawings.strokes[0].points, [{ x: 10.12, y: 20.46 }, { x: 100, y: 0 }]);
+
+  const exported = createToolboxExportPayload(
+    { id: "toolbox1", name: "Map", modules: [{ id: "module1", type: "imageAnnotation" }], updatedAt: "2026-01-01T00:00:00.000Z" },
+    { "toolbox1:module1": compact }
+  );
+  assert.equal(exported.modules.m1.markers[0].id, "k1");
+  assert.equal(exported.modules.m1.drawings.strokes[0].id, "d1");
+});
+
 test("task planner data normalizes invalid settings and relations", () => {
   const normalized = normalizeTaskPlannerData({
     weeklyResetDay: 9,