Show diagram errors as a callout

[MaggieAppleton]

Replaces the bare red Mermaid error with a contained callout that says what went wrong in plain words and keeps the useful part of Mermaid's message.

Stacked on #218 (code block header bar). The callout sits inside that block's box, so this PR targets design/code-block. GitHub will retarget it to main when #218 merges.

Change

• A failed diagram shows a pale red callout with a red warning icon in a disc, the title "This diagram could not be drawn", and a one-line reason.
• The reason comes from a new, unit-tested describeDiagramError() in code.ts:
  • For an unknown diagram type, Mermaid echoes the whole source back after "for text:". The source is already on screen, so only "The diagram type is not recognised." is kept.
  • For a parse error, it shows "Parse error on line 3", the caret excerpt in monospace, and the "Expecting …" hint wrapped in the same type size and colour as the message.
  • Anything that matches no known shape falls back to Mermaid's own first line. An empty message gets a generic sentence.
• Text uses --text-sm and --text-xs with their line-height tokens, and colours use theme tokens. The design contract passes with no new exceptions.
• It is not a live region. The diagram re-renders on every keystroke while someone types, so an announcement would repeat constantly. KaTeX (math) errors keep their existing rendering.

Screenshots

Captured from the dev-only design audit page at 2x, with a parse-error diagram added temporarily to the audit to show that case.

Before (#218)	After (this PR)

Verification

• Conflicts resolved against the latest Redesign code block controls as a header bar #218 branch (e4e2e28); both code-language focus and invalid-diff filename fixes are retained.
• The diff against Redesign code block controls as a header bar #218 contains only the five diagram-error callout files.
• All 32 focused code/diagram unit tests, types, CI checks, and build pass.
• All 17 code-block and 10 responsive-content Chromium tests pass, including Redesign code block controls as a header bar #218’s two regression tests and the diagram-error callout checks.

After resolving the stack

The real editor still shows the parse-error explanation and unknown-diagram callout inside the updated code block.

🤖 Generated with Claude Code