Add opt-in mermaid pan/zoom/fullscreen support

[yarikoptic]

Summary

Adds opt-in pan/zoom/fullscreen support for mermaid diagrams, gated by a new site parameter.

When params.mermaid.panZoom = true:

• Diagrams become zoomable (scroll) and pannable (drag) via svg-pan-zoom (v3.6.2, MIT)
• A hover-to-show control overlay appears at top-right with: fullscreen toggle, zoom in, reset, zoom out
• Fullscreen preserves and restores the previous zoom/pan state on exit
• Diagrams render at their natural size — no extra margins or layout changes

When the parameter is not set (default), behavior is completely unchanged.

Motivation

Complex mermaid diagrams (nested subgraphs, large flowcharts) are hard to read at the default prose width. Discussion #553 (Image Zooming) shows demand for interactive diagram viewing — 21% of readers attempt to click/zoom images. This addresses that need specifically for mermaid.

Implementation notes

• svg-pan-zoom is vendored at assets/lib/svg-pan-zoom/svg-pan-zoom.min.js (~30KB) and only bundled into mermaid.bundle.js when the param is enabled
• All control positioning uses inline JS styles rather than CSS classes, since Congo loads css/compiled/main.css (Tailwind pre-built) and additions to css/main.css require a Tailwind rebuild
• Controls are hidden by default (opacity: 0) and shown on mouseenter / hidden on mouseleave
• The mermaid-panzoom CSS class is added to the shortcode container when enabled, providing a hook for the JS
• Minimal CSS in an inline <style> block in vendor.html handles only SVG max-width override and fullscreen background

Files changed

• assets/lib/svg-pan-zoom/svg-pan-zoom.min.js — new: vendored library (MIT)
• assets/js/mermaid.js — pan/zoom init, hover controls, fullscreen with state preservation
• layouts/_partials/vendor.html — conditional svg-pan-zoom bundling + inline styles
• layouts/_shortcodes/mermaid.html — conditional mermaid-panzoom class

Usage

# config/_default/params.toml
[mermaid]
  panZoom = true

Demo

See it in action:

• Add container venv overlay development example myyoda/principles-examples#14 for future STAMPED Principles Examples — Container Venv Overlay (once the parent project deploys with this theme version).
• pre-rendered at https://deploy-preview-14--fluffy-custard-93f908.netlify.app/examples/container-venv-overlay-development/ and when I hover the mouse over the first diagram getting

🤖 Generated with Claude Code and refined

edits:
post initial submission, force pushed to

• change color for buttons in full screen mode since gray is not visible on dark, now - nice

[netlify]

✅ Deploy Preview for hugo-congo ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	a204098
🔍 Latest deploy log	https://app.netlify.com/projects/hugo-congo/deploys/69aa21b24298ff00083cf8c3
😎 Deploy Preview	https://deploy-preview-1156--hugo-congo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.