Split the mermaid machinery out of markdown.tsx

[selfcontained]

What

apps/web/src/components/ui/markdown.tsx was 489 lines. Roughly 295 of those were mermaid rendering machinery that only one of the file's four Markdown variants (MarkdownDefault) ever touches — every consumer of the pin and caption variants was loading it for nothing.

Split into three files, each declaration moved whole and unchanged:

file	lines	contents
markdown-mermaid-theme.ts	109	MermaidRenderTheme, hslToken/parseHslChannels/lightnessFromHsl, useMermaidTheme
markdown-mermaid.tsx	194	module-level render queue + config cache, getMermaidConfig/getMermaid/ensureMermaidInitialized/renderMermaidDiagram, MermaidBlock
markdown.tsx	184	getCodeBlock, MarkdownProps, Markdown, MarkdownCaption, MarkdownPin, MarkdownDefault

Import direction is a straight chain with no cycle: markdown.tsx → markdown-mermaid.tsx → markdown-mermaid-theme.ts (and markdown.tsx → the theme file directly for the hook). The only exported symbol outside the family is still Markdown, so none of the 10 consumers changed.

Why it was a candidate

Queued by the previous componentizer run. Over 300 lines, and mixed concerns — CSS-variable-to-mermaid theme derivation, a module-level async render queue, and three purely presentational markdown wrappers all in one file. components/ui/markdown.tsx is shared UI with 10 consumer files, so the context saving is broad rather than feature-local.

Behaviour

Purely structural. No declaration was reshaped, no hook changed owner (useMermaidTheme is still the single hook call at the top of MarkdownDefault; MermaidBlock's state and async render effect stayed inside MermaidBlock), and effect registration order is unchanged.

Validation

• pnpm run finalize:web — type check + production build pass.
• pnpm run test:e2e — 181 passed, 12 skipped (the skipped ones are the terminal-live suite, skipped by default). This includes the two existing mermaid E2E tests that render a diagram in the media lightbox and exercise both copy buttons.
• Playwright on a dev stack: seeded a markdown media file with a mermaid fence, a TS code block and a GFM table, plus an agent pin with a markdown body and a caption — covering all three variants. Diagram renders with themed fonts/colors, hljs highlighting and the table are intact, and both copy buttons are present. Also flipped data-theme live and confirmed the extracted useMermaidTheme MutationObserver still fires and re-renders the diagram.

Next run

Queued: apps/web/src/components/app/persona-launcher.tsx (554 lines, measured this run) — the largest backlog entry with a clear seam, and now the second-largest non-test component in the app.