Step 3: The morphing tool palette

This toolbar is worth slowing down on as UI design on its own: pick a colour and the pen row becomes a palette; open the size control and it becomes a slider — never a second panel sliding in from somewhere else. One bar, three shapes.

Local state, not document state

Which pen you're holding is yours alone — it isn't something two people converge on, so it never touches strokes. It's plain useState, same as the camera on the pin board:

const [tool, setTool] = useState<PenId>("pen")
const [color, setColor] = useState("#151515")
const [width, setWidth] = useState(4)

The morph

One bar, one mode, three shapes. Selecting a colour or opening size doesn't mount a new component next to the old one — it re-renders the same bar with different children while its width animates, so the pill visibly grows or shrinks around whatever's inside it:

const [mode, setMode] = useState<"tools" | "color" | "size">("tools")
const barWidth = mode === "tools" ? 268 : mode === "color" ? 232 : 208

<div style={{ width: barWidth, transition: MORPH, overflow: "hidden", borderRadius: 999, /* … */ }}>
  {mode === "tools" && <>{/* four pens + a colour dot + a size dot */}</>}
  {mode === "color" && <>{/* a back arrow + six swatches */}</>}
  {mode === "size" && <>{/* a back arrow + a slider */}</>}
</div>

You should see: a rounded bar in the corner with four dots (each sized to its pen's width), a colour dot, and a size dot. Click the colour dot — the bar narrows and a row of swatches slides into view where the pens were. Pick one; it narrows again, back to the pen row, now showing your choice. Click the size dot for the same trick with a slider. Draw with each pen and watch the eraser genuinely erase (it paints in the canvas's own background colour).

Next steps