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.

src/ui/styles/layers.css

@@ -1495,8 +1495,7 @@ body.recording-mode #right-context-rail > [data-panel-id] {
 }
 
 /* Draw's options sit flat under its name, like a layer row's controls, not
-   as the card that hangs under a DISPLAY button. DISPLAY's shared label
-   column means nothing here, so the Shape label takes its own width. */
+   as the card that hangs under a DISPLAY button. */
 #utilities-panel .utilities-tools .pp-slider-row {
   padding: 4px 0;
   background: none;
@@ -1505,7 +1504,3 @@ body.recording-mode #right-context-rail > [data-panel-id] {
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
 }
-
-#utilities-panel .utilities-tools .pp-slider-mini-label {
-  min-width: 0;
-}