raffel 1.1.16 → 1.1.18

package/dist/docs/ui/runtime/index.js

@@ -31,6 +31,8 @@ const docsAssetBasePath = String(data.docsAssetBasePath ?? '');
 const footerMarkdown = data.footerMarkdown ?? null;
 const tocConfig = data.tocConfig ?? {};
 const markdownConfig = data.markdownConfig ?? {};
+const mermaidConfig = data.mermaidConfig ?? { enabled: true, src: 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js', viewer: true };
+let mermaidLoadPromise = null;
 const docsRepoConfig = (data.docsRepoConfig ?? null);
 const breadcrumbsConfig = (data.breadcrumbsConfig && typeof data.breadcrumbsConfig === 'object')
     ? data.breadcrumbsConfig
@@ -1490,15 +1492,52 @@ function scrollToActiveHeading() {
 function scrollToEndpoint(id) {
     byId(id)?.scrollIntoView?.({ behavior: 'smooth', block: 'start' });
 }
-function renderMermaidDiagrams(root = doc) {
-    const mermaid = win.mermaid;
+/**
+ * Lazy-load the Mermaid renderer the first time a page with diagrams is
+ * visited. Cached: subsequent route transitions inside the SPA reuse the
+ * same `<script>` injection. Pages without `.mermaid` blocks never trigger
+ * the network request, so the ~3MB library stays off the critical path
+ * for the 95% of docs pages that have no diagrams.
+ */
+function loadMermaidLibrary(src) {
+    if (win.mermaid)
+        return Promise.resolve(win.mermaid);
+    if (mermaidLoadPromise)
+        return mermaidLoadPromise;
+    mermaidLoadPromise = new Promise((resolve, reject) => {
+        const script = doc.createElement('script');
+        script.src = src;
+        script.defer = true;
+        script.onload = () => resolve(win.mermaid);
+        script.onerror = () => {
+            mermaidLoadPromise = null;
+            reject(new Error(`Failed to load Mermaid from ${src}`));
+        };
+        doc.head?.appendChild(script);
+    });
+    return mermaidLoadPromise;
+}
+async function renderMermaidDiagrams(root = doc) {
     const diagrams = Array.from(root?.querySelectorAll?.('.mermaid:not([data-mermaid-rendered])') ?? []);
     if (diagrams.length === 0)
         return;
-    if (!mermaid) {
+    if (mermaidConfig.enabled === false) {
         diagrams.forEach(diagram => diagram.classList.add('mermaid-fallback'));
         return;
     }
+    let mermaid = win.mermaid;
+    if (!mermaid) {
+        try {
+            mermaid = await loadMermaidLibrary(mermaidConfig.src);
+        }
+        catch (error) {
+            diagrams.forEach(diagram => {
+                diagram.classList.add('mermaid-fallback', 'mermaid-error');
+                diagram.setAttribute('title', error instanceof Error ? error.message : 'Unable to load Mermaid');
+            });
+            return;
+        }
+    }
     mermaid.initialize?.({ startOnLoad: false, securityLevel: 'strict' });
     diagrams.forEach((diagram, index) => {
         const source = diagram.getAttribute('data-mermaid-source') || diagram.textContent || '';
@@ -1509,6 +1548,8 @@ function renderMermaidDiagrams(root = doc) {
             result?.bindFunctions?.(diagram);
             diagram.dataset.mermaidRendered = 'true';
             diagram.classList.remove('mermaid-fallback', 'mermaid-error');
+            if (mermaidConfig.viewer !== false)
+                mountMermaidViewer(diagram);
         })
             .catch((error) => {
             diagram.dataset.mermaidRendered = 'error';
@@ -1517,6 +1558,191 @@ function renderMermaidDiagrams(root = doc) {
         });
     });
 }
+/**
+ * Wrap a freshly rendered Mermaid SVG in a viewer overlay:
+ *   • toolbar (zoom in/out/reset/fullscreen) — fades in on hover
+ *   • drag-to-pan when zoomed in (scale > 1)
+ *   • wheel-zoom with Ctrl/⌘ pressed (so vertical scroll still works normally)
+ *   • fullscreen via <dialog>, with same controls
+ *
+ * Idempotent: skips diagrams already wrapped (data-mermaid-viewer-mounted).
+ */
+function mountMermaidViewer(diagram) {
+    if (diagram.dataset.mermaidViewerMounted)
+        return;
+    const svg = diagram.querySelector?.('svg');
+    if (!svg)
+        return;
+    const viewport = doc.createElement('div');
+    viewport.className = 'mermaid-viewport';
+    diagram.insertBefore(viewport, svg);
+    viewport.appendChild(svg);
+    const toolbar = doc.createElement('div');
+    toolbar.className = 'mermaid-toolbar';
+    toolbar.innerHTML = [
+        '<button class="mermaid-btn" data-mermaid-action="zoom-in" aria-label="Zoom in" title="Zoom in">+</button>',
+        '<button class="mermaid-btn" data-mermaid-action="zoom-out" aria-label="Zoom out" title="Zoom out">−</button>',
+        '<button class="mermaid-btn" data-mermaid-action="reset" aria-label="Reset view" title="Reset view">⟲</button>',
+        '<button class="mermaid-btn" data-mermaid-action="fullscreen" aria-label="Open fullscreen" title="Fullscreen">⛶</button>',
+    ].join('');
+    diagram.appendChild(toolbar);
+    const state = { scale: 1, tx: 0, ty: 0 };
+    function apply() {
+        svg.style.transform = `translate(${state.tx}px, ${state.ty}px) scale(${state.scale})`;
+        svg.style.transformOrigin = 'center center';
+        svg.style.transition = 'transform 0.18s cubic-bezier(0.16, 1, 0.3, 1)';
+        viewport.style.cursor = state.scale > 1 ? 'grab' : '';
+    }
+    function reset() { state.scale = 1; state.tx = 0; state.ty = 0; apply(); }
+    function zoomBy(factor) {
+        state.scale = Math.max(0.5, Math.min(state.scale * factor, 8));
+        if (state.scale === 1) {
+            state.tx = 0;
+            state.ty = 0;
+        }
+        apply();
+    }
+    toolbar.addEventListener('click', (ev) => {
+        const action = ev.target?.dataset?.mermaidAction;
+        if (action === 'zoom-in')
+            zoomBy(1.25);
+        else if (action === 'zoom-out')
+            zoomBy(1 / 1.25);
+        else if (action === 'reset')
+            reset();
+        else if (action === 'fullscreen')
+            openMermaidFullscreen(svg.cloneNode(true));
+    });
+    let panning = false;
+    let panStartX = 0;
+    let panStartY = 0;
+    let panStartTx = 0;
+    let panStartTy = 0;
+    viewport.addEventListener('mousedown', (ev) => {
+        if (ev.button !== 0 || state.scale <= 1)
+            return;
+        panning = true;
+        panStartX = ev.clientX;
+        panStartY = ev.clientY;
+        panStartTx = state.tx;
+        panStartTy = state.ty;
+        viewport.style.cursor = 'grabbing';
+        ev.preventDefault();
+    });
+    doc.addEventListener('mousemove', (ev) => {
+        if (!panning)
+            return;
+        state.tx = panStartTx + (ev.clientX - panStartX);
+        state.ty = panStartTy + (ev.clientY - panStartY);
+        svg.style.transform = `translate(${state.tx}px, ${state.ty}px) scale(${state.scale})`;
+    });
+    doc.addEventListener('mouseup', () => {
+        if (!panning)
+            return;
+        panning = false;
+        viewport.style.cursor = state.scale > 1 ? 'grab' : '';
+    });
+    viewport.addEventListener('wheel', (ev) => {
+        if (!ev.ctrlKey && !ev.metaKey)
+            return;
+        ev.preventDefault();
+        zoomBy(ev.deltaY < 0 ? 1.1 : 1 / 1.1);
+    });
+    diagram.dataset.mermaidViewerMounted = 'true';
+}
+function openMermaidFullscreen(svg) {
+    const dialog = doc.createElement('dialog');
+    dialog.className = 'mermaid-fullscreen-dialog';
+    const close = doc.createElement('button');
+    close.className = 'mermaid-fullscreen-close';
+    close.setAttribute('aria-label', 'Close');
+    close.textContent = '✕';
+    close.addEventListener('click', () => dialog.close());
+    const stage = doc.createElement('div');
+    stage.className = 'mermaid-fullscreen-stage';
+    svg.removeAttribute('style');
+    stage.appendChild(svg);
+    const fsState = { scale: 1, tx: 0, ty: 0 };
+    function fsApply() {
+        svg.style.transform = `translate(${fsState.tx}px, ${fsState.ty}px) scale(${fsState.scale})`;
+        svg.style.transformOrigin = 'center center';
+        stage.style.cursor = fsState.scale > 1 ? 'grab' : '';
+    }
+    function fsZoom(factor) {
+        fsState.scale = Math.max(0.5, Math.min(fsState.scale * factor, 8));
+        if (fsState.scale === 1) {
+            fsState.tx = 0;
+            fsState.ty = 0;
+        }
+        fsApply();
+    }
+    const toolbar = doc.createElement('div');
+    toolbar.className = 'mermaid-toolbar mermaid-toolbar-fullscreen';
+    toolbar.innerHTML = [
+        '<button class="mermaid-btn" data-mermaid-action="zoom-in" aria-label="Zoom in" title="Zoom in">+</button>',
+        '<button class="mermaid-btn" data-mermaid-action="zoom-out" aria-label="Zoom out" title="Zoom out">−</button>',
+        '<button class="mermaid-btn" data-mermaid-action="reset" aria-label="Reset view" title="Reset view">⟲</button>',
+    ].join('');
+    toolbar.addEventListener('click', (ev) => {
+        const action = ev.target?.dataset?.mermaidAction;
+        if (action === 'zoom-in')
+            fsZoom(1.25);
+        else if (action === 'zoom-out')
+            fsZoom(1 / 1.25);
+        else if (action === 'reset') {
+            fsState.scale = 1;
+            fsState.tx = 0;
+            fsState.ty = 0;
+            fsApply();
+        }
+    });
+    let fsPan = false;
+    let fsStartX = 0;
+    let fsStartY = 0;
+    let fsStartTx = 0;
+    let fsStartTy = 0;
+    stage.addEventListener('mousedown', (ev) => {
+        if (ev.button !== 0 || fsState.scale <= 1)
+            return;
+        fsPan = true;
+        fsStartX = ev.clientX;
+        fsStartY = ev.clientY;
+        fsStartTx = fsState.tx;
+        fsStartTy = fsState.ty;
+        stage.style.cursor = 'grabbing';
+        ev.preventDefault();
+    });
+    doc.addEventListener('mousemove', (ev) => {
+        if (!fsPan)
+            return;
+        fsState.tx = fsStartTx + (ev.clientX - fsStartX);
+        fsState.ty = fsStartTy + (ev.clientY - fsStartY);
+        fsApply();
+    });
+    doc.addEventListener('mouseup', () => {
+        if (!fsPan)
+            return;
+        fsPan = false;
+        stage.style.cursor = fsState.scale > 1 ? 'grab' : '';
+    });
+    stage.addEventListener('wheel', (ev) => {
+        ev.preventDefault();
+        fsZoom(ev.deltaY < 0 ? 1.1 : 1 / 1.1);
+    });
+    dialog.appendChild(close);
+    dialog.appendChild(toolbar);
+    dialog.appendChild(stage);
+    doc.body.appendChild(dialog);
+    dialog.addEventListener('close', () => { try {
+        doc.body.removeChild(dialog);
+    }
+    catch { } });
+    dialog.addEventListener('keydown', (ev) => {
+        if (ev.key === 'Escape')
+            dialog.close();
+    });
+    dialog.showModal?.();
+}
 function parseComponentProps(raw) {
     const source = String(raw ?? '').trim();
     if (!source)