Live mermaid preview while editing + handle alignment fix

[ptheofan]

Summary

Two things in this branch:

1. Live mermaid preview while editing — clicking a ```mermaid``` block in edit mode now opens a preview-above-source surface. The rendered diagram stays visible at the top; a textarea sits below; the diagram re-renders ~250ms after each keystroke. Invalid mermaid syntax keeps the last good preview visible and surfaces the error in an inline chip between preview and textarea. `Esc` commits, click-away commits, race conditions are handled by per-call scratch containers and monotonic request IDs.

2. Slice handle alignment for mermaid blocks — `slice-code:has(.mermaid-container)` override sets `--slice-handle-top: 0px` since mermaid blocks render as `<div.mermaid-container>` rather than `

   `, and the 13px offset tuned for `
   `'s padding was wrong.
   
   

Architecture (generalised)

The live preview is built on a new optional plugin capability — `PreviewablePlugin` — so any plugin that owns a fenced code block and can render to visual content can opt into the same editing surface. Mermaid is the first implementer; future plugins (math, graphviz, embedded HTML, etc.) get live preview for free by implementing four methods.

Component	Role
`PreviewablePlugin` interface	Optional capability: `matchesSlice`, `extractSource`, `renderPreview`, `applySourceToRaw`
`PluginManager.getPreviewablePlugins()`	Returns enabled plugins implementing the capability
`MermaidPlugin`	Implements the contract — opens ```mermaid``` and `~~~mermaid``` fences with info-string preservation
`PreviewableSourceEditor` (new)	Drives one editing session: layout, debounced re-render, race control, error chip, idempotent commit
`EditModeController`	New routing branch in `startEdit` opens the previewable editor for matching slices; shared `applyRawCommit` helper factored out so both the slim textarea and the previewable editor follow the same re-render path

Stats

• 9 files changed (3 added)
• 38 new tests; total suite 598 passing
• 22 commits, written task-by-task via TDD with subagent-driven implementation + two-stage review per task

Spec and plan

• Design: `docs/superpowers/specs/2026-05-19-mermaid-live-preview-design.md`
• Plan: `docs/superpowers/plans/2026-05-19-mermaid-live-preview.md`

Test plan

• `pnpm typecheck` clean
• `pnpm test` — 598 passing across 30 files (38 new)
• `pnpm lint` clean
• Manual: open a file with a mermaid diagram → enter edit mode (`Cmd+E`) → click the mermaid block → confirm preview-above-textarea surface
• Manual: edit the diagram source → preview updates ~250ms after typing pauses
• Manual: type invalid syntax → last good preview stays + red error chip appears with the mermaid error message
• Manual: fix the syntax → error chip disappears, preview updates
• Manual: `Esc` commits, slice re-renders with the new source
• Manual: click a non-mermaid code block (```js```) → opens regular raw textarea (no preview area)
• Manual: click a paragraph → still opens WYSIWYG inline editor
• Manual: hover any slice → handle dot grid sits aligned with the first text line for all block types

🤖 Generated with Claude Code