Step 5 - toolbar

Add the tool system and creation tools. Keep all element mutations behind three functions - addEl / updateEl / deleteEl - that currently only update a local elements signal (they will become optimistic Firestore writes later; do not let any tool write state directly).

Toolbar

(left dock, icon buttons with tooltips + aria-labels; inline 24x24 SVG icons, no icon library): select, pan, pen, note, text, shapes (flyout with the 10 shape kinds), line, arrow, frame, connect (stub), eraser (stub). Active tool is a signal; Escape returns to select.

Behaviors:

• pen: pointerdown starts a draft polyline in world coords, pointermove appends (skip points closer than ~1.5 world units), pointerup commits a 'path' element. Draw the in-progress draft each frame.
• note: click drops a 180x180 sticky in the current note color (color picker in a top context bar), then immediately opens text editing.
• text: click drops a text element and opens editing.
• shape/line/arrow: drag defines the bounds (or endpoints); enforce a minimum size of ~8 world units, else discard.
• frame: drag creates a frame with an editable title.
• Text editing: a floating HTML overlay positioned over the element at the current zoom, styled to match; commit on blur/Escape; notes re-run fitNoteFontSize on commit.</li> </ul> <p>A small top context bar appears when relevant: note/stroke color swatches, and (for the pen) stroke width.</p> <p>Acceptance: I can draw strokes, drop and type into notes and text blocks, drag out all 10 shapes plus lines/arrows and frames, and everything repaints through the single render effect with no per-tool canvas code outside the util module.</p>