/** * @fileoverview Mermaid zoom-stage guardian (v2.5.12 / Task #2951). * * Why this module exists * ---------------------- * The Mermaid controller (`public/mermaid-renderer.js`) wraps every * freshly-rendered SVG in a `.mermaid-zoom-stage` div that carries * the pan/zoom CSS transform and the pointer-drag handlers. Without * that wrapper the user can neither pan nor zoom the lifecycle * diagram. * * Mermaid's library auto-runs `mermaid.run({nodes})` once * `startOnLoad: true` is set in `mermaid.initialize`. We DO set * `startOnLoad: true` in the SSR template (server.ts line ~2041) so * the initial paint works for hosts that don't ship our controller. * The auto-runner scans the DOM for `.mermaid` elements that are not * already marked `data-processed` and replaces their innerHTML with a * freshly-rendered SVG. * * Even after our controller's `update()` has set `data-processed="true"` * and wrapped the SVG, Mermaid's auto-runner fires roughly 1.5–3s * later (observed via Playwright trace on 2026-08-12) and replaces * the contents of the `.mermaid` element with a fresh, bare SVG. The * bare SVG is not wrapped in `.mermaid-zoom-stage`, so the pan/zoom * UI silently breaks for the rest of the page lifetime. * * What this module does * --------------------- * `ensureMermaidZoomStage(container)` — one-shot helper that walks * the container and wraps any existing `` in a * `.mermaid-zoom-stage` div. Idempotent: calling it twice keeps ONE * wrapper. * * `MermaidZoomGuardian` — a long-lived `MutationObserver` that * detects when something (Mermaid's late `mermaid.run()`, an SSE * patch, etc.) replaces the SVG and re-applies the wrapper. The * guardian stops observing after `stop()` is called. * * Both helpers are deliberately framework-free so they can be unit- * tested in happy-dom / jsdom without a full browser. */ /** * Wrap any existing SVG inside `container` in a single * `.mermaid-zoom-stage` div. Idempotent. * * @returns the (possibly newly-created) stage element, or `null` * when the container has no SVG to wrap. */ export declare function ensureMermaidZoomStage(container: Element): HTMLElement | null; /** * v2.5.12 (Task #2951): the MermaidZoomGuardian watches a container * and re-wraps any replacement SVG in `.mermaid-zoom-stage`. Use * this for diagrams that survive past the initial render — e.g. the * lifecycle mermaid on the per-task page, where Mermaid's late * `mermaid.run()` otherwise destroys the wrapper. * * Lifecycle: * const g = new MermaidZoomGuardian(container); * g.start(); * // ...later, when the page is torn down: * g.stop(); */ export declare class MermaidZoomGuardian { private readonly container; private observer; private scheduled; constructor(container: Element); start(): void; stop(): void; } /** * Export the constants so tests can reference them without hardcoding. */ export declare const MERMAID_STAGE_CLASS = "mermaid-zoom-stage"; export declare const MERMAID_TOOLBAR_CLASS = "mermaid-zoom-toolbar"; export declare const MERMAID_CONTAINER_CLASS = "mermaid"; //# sourceMappingURL=mermaid-zoom-guardian.d.ts.map