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/kokkoja.css

@@ -5,7 +5,6 @@
   --panel: #f6f6f7;
   --desk: #e4e4e7;
   --accent: #1f4fd8;
-  --text_frame: #e53935;     /* A text rectangle's frame: the palette's red. */
   font-family: system-ui, sans-serif;
   font-size: 15px;
   color: var(--ink);
@@ -226,6 +225,18 @@ h2 {
   cursor: default;
 }
 .menu hr { width: 100%; margin: 0.2rem 0; border: 0; border-top: 1px solid var(--line); }
+/* The shapes menu marks the current shape with a check, every item
+   leaving the room for it so that the names line up; its fill colours
+   stand in a row like the toolbar's. */
+.menu .menu_item[role="menuitem"]::before { content: ""; display: inline-block; width: 1.1em; margin-right: 0.1em; }
+.menu .menu_item[aria-checked="true"]::before { content: "✓"; }
+.menu .fills { padding: 0.25rem 0.6rem 0.3rem; }
+/* "No fill": a white swatch struck through. */
+.swatch.none {
+  --swatch: white;
+  background-image: linear-gradient(135deg, transparent 45%, #b42318 45%, #b42318 55%, transparent 55%);
+  background-clip: content-box;
+}
 .menu .toggle input { margin: 0; }
 
 .help_popup { padding: 0.8rem 1rem; }
@@ -358,15 +369,34 @@ h2 {
   background: #2e7d32;
 }
 
-/* The Arrange tool's cues: blue corners on everything that can be moved
-   or resized, and an outline on images, whose edges may not show. */
+/* The Arrange tool's cues: blue corners and an outline on every image,
+   whose edges may not show (text rectangles and Hides carry blue corners
+   at all times since 2026-10-14, drawn on the canvases); and the same
+   corners on free text under a hovering pointer (.hover_cue). */
 .arrange_cues { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
 .arrange_cue {
   position: absolute;
   box-sizing: border-box;
+  pointer-events: none;
   --handle-color: #1e88e5;
 }
 .arrange_cue.image { border: 1px solid #1e88e5; }
+/* The hover cue's corners are L marks like those the canvases draw on
+   text rectangles and Hides, not the Arrange tool's squares, so that
+   "blue corners" look the same everywhere; renderer.js sets the mark's
+   length and line width for the zoom. */
+.hover_cue { position: absolute; box-sizing: border-box; pointer-events: none; z-index: 3; --handle-color: #1e88e5; }
+.hover_cue .handle {
+  width: var(--mark);
+  height: var(--mark);
+  transform: none;
+  background: none;
+  border: 0 solid var(--handle-color);
+}
+.hover_cue .handle.nw { left: 0; top: 0; border-width: var(--mark_line) 0 0 var(--mark_line); }
+.hover_cue .handle.ne { left: auto; right: 0; top: 0; border-width: var(--mark_line) var(--mark_line) 0 0; }
+.hover_cue .handle.sw { left: 0; top: auto; bottom: 0; border-width: 0 0 var(--mark_line) var(--mark_line); }
+.hover_cue .handle.se { left: auto; right: 0; top: auto; bottom: 0; border-width: 0 var(--mark_line) var(--mark_line) 0; }
 
 .page {
   position: relative;
@@ -414,23 +444,29 @@ h2 {
   pointer-events: none;
 }
 
-/* The field of a text rectangle shows its frame and white ground itself,
-   since the renderer leaves the block out while it is edited. */
-.text_field.rect {
-  background: white;
-  outline-style: solid;
-  outline-color: var(--text_frame);
-}
+/* (A text rectangle's field drew its red frame and white ground until
+   2026-10-14, and free text's field its red L; the renderer draws the
+   marks of the block being edited now, the same way as at any other
+   time, and the field shows only the lines.) */
 
-/* Free text's corner mark while it is edited: an L at its top-left corner. */
-.text_mark {
+/* A shape being dragged open, or the rubber band of a line in progress:
+   an SVG in page units over the page, in the pen's colour and width. */
+.shape_preview {
   position: absolute;
-  z-index: 3;
-  box-sizing: border-box;
-  border-style: solid none none solid;
-  border-color: var(--text_frame);
+  inset: 0;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
+  z-index: 3;
+  overflow: visible;
 }
+.shape_preview path { stroke-linecap: round; stroke-linejoin: round; }
+
+/* The Shape button names the current shape and keeps the width of the
+   widest name (main.js measures), so that nothing moves when the shape
+   changes; a long press on it opens the menu, so a touch must not select
+   its text or call up the system's menu. */
+#shape_tool { -webkit-touch-callout: none; touch-action: none; }
 
 
 /* The Session dialog: who is here, and the invitation. */