List drawn shapes under Draw, with icon shapes and colour swatches

Each shape drawn by hand gets a row under Draw, as Import's files do: its
colour swatch, its name, and show/hide, fly-to and remove. A shape is named
in its row, and its swatch opens the five colours there, so labelling and
colouring happen after a shape is drawn and can be seen, instead of in a
field filled in beforehand. Area, Line and Pin become icon buttons, named
for screen readers and tooltips, and the colour for the next shape is a row
of swatches instead of a dropdown.

The annotation engine gains per-mark remove, setHidden, restyle and frame,
and onChange so the list follows the board. A hidden mark stays on the board
at alpha 0, a renamed line keeps its length, and fly-to frames a line by its
whole path. Voice marks are not listed.

The Draw, form-field and segmented-control gates drive the new controls;
swatches are checked as chips, not segments.

scripts/qa-segmented-controls.mjs

@@ -45,7 +45,11 @@ try {
   });
 
   const surface = await page.evaluate(() => {
-    const groups = [...document.querySelectorAll('[role="radiogroup"]')];
+    // Colour swatches are one-of-many too, but chips, not segments: they are
+    // checked on their own below.
+    const groups = [
+      ...document.querySelectorAll('[role="radiogroup"]:not(.draw-colors)'),
+    ];
     const buttons = groups.flatMap((group) => [
       ...group.querySelectorAll('[role="radio"]'),
     ]);
@@ -71,6 +75,31 @@ try {
     JSON.stringify(surface),
   );
 
+  const swatches = await page.evaluate(() => {
+    const group = document.getElementById('draw-colors');
+    const chips = [...(group?.querySelectorAll('[role="radio"]') || [])];
+    return {
+      count: chips.length,
+      round: chips.every(
+        (chip) => getComputedStyle(chip).borderRadius === '50%',
+      ),
+      colours: new Set(
+        chips.map((chip) => getComputedStyle(chip).backgroundColor),
+      ).size,
+      checked: chips.filter(
+        (chip) => chip.getAttribute('aria-checked') === 'true',
+      ).length,
+    };
+  });
+  check(
+    "Draw's colour swatches are five round chips, one checked",
+    swatches.count === 5 &&
+      swatches.round &&
+      swatches.colours === 5 &&
+      swatches.checked === 1,
+    JSON.stringify(swatches),
+  );
+
   await page.evaluate(() =>
     document.getElementById('models3d-mode-all').click(),
   );