The Shape tool, implied rectangles, and the palette floating again

A Shapes button right of Text draws a rectangle, an ellipse, a line of
taps or an arrow in the pen's colour and width, with a fill colour of
its own; a hold, a secondary press or two quick clicks open its menu.
Text and Hide rectangles draw nothing on the page and show blue corners
while the pointer hovers over them; free text's red corner mark is
gone.  Arrange moves and resizes shapes.  The colour palette floats
below "+" again instead of reflowing the toolbar.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

client/index.html

@@ -45,14 +45,29 @@
       <button type="button" data-tool="pen" aria-pressed="true"
               data-help="Write on the page. Only your own writing can be erased.">Pen</button>
       <button type="button" data-tool="text" aria-pressed="false"
-              data-help="Type on the page. Tap where the text should begin, or drag open a rectangle: a red box, white inside, in which the text wraps and which grows downward as you type. Tap your own text to change it; rest the pen on it to move it, or near a corner of a box to resize it, or use Arrange.">Text</button>
+              data-help="Type on the page. Tap where the text should begin, or drag open a rectangle in which the text wraps and which grows downward as you type; its corners are marked in blue on the screen only. Tap your own text to change it; rest the pen on it to move it, or near a corner of a rectangle to resize it, or use Arrange.">Text</button>
+      <button type="button" id="shape_tool" data-tool="shape" aria-pressed="false" aria-haspopup="menu" aria-expanded="false" data-name="Shapes"
+              data-help="Draw the shape named on the button, in the pen’s colour and line width. Hold the button down, or press it with the right button, for the other shapes.">Rectangle</button>
+      <div id="shape_menu" class="popup menu" role="menu" hidden>
+        <button type="button" class="menu_item" role="menuitem" data-shape="rectangle"
+                data-help="Rectangle: drag open the rectangle from one corner to the opposite one.">Rectangle</button>
+        <button type="button" class="menu_item" role="menuitem" data-shape="ellipse"
+                data-help="Ellipse: drag open the rectangle the ellipse fills.">Ellipse</button>
+        <button type="button" class="menu_item" role="menuitem" data-shape="line"
+                data-help="Line: tap each point of the line in turn; a drag gives its first two. Tap the last point again to finish, or the first point to close the shape. Backspace takes back the last point, Escape finishes.">Line</button>
+        <button type="button" class="menu_item" role="menuitem" data-shape="arrow"
+                data-help="Arrow: drag from the tail to the tip. The head is filled, its width from the line width.">Arrow</button>
+        <hr>
+        <div class="menu_title">Fill the shapes with</div>
+        <div class="group fills" id="shape_fill" role="radiogroup" aria-label="Fill"></div>
+      </div>
     </div>
     <div id="settings" class="settings">
     <div class="group" id="colors" role="radiogroup" aria-label="Color">
       <button id="more_colors" type="button" class="swatch more"
               data-help="Choose another color. It is added here.">+</button>
     </div>
-    <div id="color_palette" class="palette" hidden></div>
+    <div id="color_palette" class="popup palette" hidden></div>
     <div class="group" id="widths" role="radiogroup" aria-label="Line width"></div>
     <div class="group" id="text_style" hidden>
       <select id="text_font" aria-label="Font" data-help="The font: a sans-serif, a serif or a monospaced one, as this computer has them.">
@@ -68,7 +83,7 @@
       <button type="button" data-tool="hide" aria-pressed="false" hidden
               data-help="Hide part of the page for everyone: drag open a rectangle, and what lies under it is covered in white, marked by blue corners. Rest the pen on it to move it, or near a corner to resize it, or use Arrange; a tap of the eraser removes it.">Hide</button>
       <button type="button" data-tool="arrange" aria-pressed="false"
-              data-help="Move and resize: the corners of every image, Hide and text box of yours are marked in blue. Drag inside one to move it, drag a corner to resize it (an image keeps its shape). A press elsewhere does nothing. With any other tool, resting the pen on one of them for half a second does the same.">Arrange</button>
+              data-help="Move and resize: the corners of every image are marked in blue, as those of Hides and text rectangles always are. Drag inside an image, a Hide or a text rectangle of yours to move it, drag a corner to resize it (an image keeps its shape). A press elsewhere does nothing. With any other tool, resting the pen on one of them for half a second does the same.">Arrange</button>
       <button type="button" data-tool="eraser" aria-pressed="false"
               data-help="Erase your own strokes and text by moving over them. A tap on an image, or on a Hide rectangle, removes it, if you are the host or a co-host (or added the image yourself). Two quick taps on empty paper, away from anything the eraser would remove, undo your latest mark; again, and the one before.">Eraser</button>
     </div>