feat(docs): rewrite mermaid modal with click-to-view, zoom buttons, and drag-to-scroll (#140)

Replace panzoom-based modal with a simpler, more reliable approach:

- Click inline diagram to open a fullscreen modal
- + / - buttons step through zoom levels (0.25x to 4x)
- 1:1 reset button and current zoom % display
- Drag-to-scroll (pan) via scrollLeft/scrollTop
- Two-layer wrapper for correct scroll range after zoom
  * Outer: explicit px size = natural x scale (correct overflow)
  * Inner: transform:scale() fills the outer visually
- Esc to close, locked body scroll
- Dark theme support, grab cursor
- Removes @panzoom/panzoom dependency

Co-authored-by: Claude <noreply@anthropic.com>

Author: JusterZhu

website/package-lock.json

@@ -18,7 +18,6 @@
     "@docusaurus/preset-classic": "3.1.1",
     "@docusaurus/theme-mermaid": "^3.1.1",
     "@mdx-js/react": "^3.0.0",
-    "@panzoom/panzoom": "^4.6.2",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",

website/package.json

@@ -636,6 +636,68 @@
   color: var(--ifm-color-primary);
 }
 
+/* ════════════════════════════════════════════════════════════════
+   MERMAID FULLSCREEN MODAL
+   ════════════════════════════════════════════════════════════════ */
+
+/* Inline hint */
+.gu-mermaid-inline { max-width: 100%; cursor: zoom-in; }
+.gu-mermaid-inline > svg { max-width: 100%; }
+
+/* Backdrop */
+.gu-backdrop {
+  position: fixed; inset: 0; z-index: 9999;
+  background: rgba(0, 0, 0, 0.78);
+  backdrop-filter: blur(6px);
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+}
+
+/* Toolbar */
+.gu-toolbar {
+  position: fixed; top: 12px; right: 12px; z-index: 10001;
+  display: flex; align-items: center; gap: 8px;
+  background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px);
+  border-radius: 10px; padding: 8px 14px; user-select: none;
+}
+.gu-tb-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 34px; height: 34px; border: none; border-radius: 8px;
+  background: transparent; color: #ddd; font-size: 18px; cursor: pointer;
+  transition: background 0.15s;
+}
+.gu-tb-btn:hover { background: rgba(255, 255, 255, 0.18); }
+.gu-tb-pct {
+  color: rgba(255, 255, 255, 0.6); font-size: 13px; min-width: 42px; text-align: center;
+}
+
+/* Viewer — scroll to pan, wide diagrams start from left, tall from top */
+.gu-viewer {
+  width: 95vw; height: 90vh;
+  overflow: auto;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
+  cursor: grab;
+  user-select: none;
+}
+.gu-viewer:active { cursor: grabbing; }
+[data-theme='dark'] .gu-viewer { background: #1a1a2e; }
+
+/* Outer wrapper: explicit px size = scale × natural dimensions.
+   Viewer overflow:auto sees this → always correct scroll range. */
+.gu-wrap-outer {
+  overflow: hidden;
+}
+/* Inner: transform:scale fills outer visually */
+.gu-wrap-inner {
+  transform-origin: 0 0;
+}
+.gu-wrap-inner > div > svg {
+  display: block;
+  max-width: none;
+}
+
 /* ════════════════════════════════════════════════════════════════
    PRINT-FRIENDLY
    ════════════════════════════════════════════════════════════════ */