noteconnection 1.6.8 → 1.8.0

package/dist/src/frontend/reader.js

@@ -9,12 +9,19 @@ class Reader {
         this.contentBox = document.getElementById('reading-content-box');
         this.body = document.getElementById('reading-body');
         this.title = document.getElementById('reading-title');
+        this._touchZoomBoundBody = null;
         
         this.isLocked = true;
         this.currentZoom = 0.5;
         this._protocolRenderState = null;
         this._protocolScrollHandler = null;
         this._mermaidInitialized = false;
+        this._mermaidRenderStats = {
+            frontendRender: 0,
+            frontendRun: 0,
+            backendPng: 0,
+            failed: 0,
+        };
 
         this.init();
     }
@@ -45,14 +52,50 @@ class Reader {
         }
         
         // Touch Gestures (Pinch to Zoom)
-        this.initTouchZoom();
+        this.bindTouchZoomSurface();
+    }
+
+    refreshDomRefs() {
+        this.window = document.getElementById('reading-window');
+        this.contentBox = document.getElementById('reading-content-box');
+        this.body = document.getElementById('reading-body');
+        this.title = document.getElementById('reading-title');
+    }
+
+    ensureReaderStructure() {
+        this.refreshDomRefs();
+        if (!this.window || !this.contentBox || !this.title) {
+            throw new Error('Reader shell structure is unavailable in the current document.');
+        }
+
+        const existingBody = document.getElementById('reading-body');
+        const bodyDetached = !!(existingBody && !this.contentBox.contains(existingBody));
+        if (!existingBody || bodyDetached) {
+            const replacementBody = document.createElement('div');
+            replacementBody.id = 'reading-body';
+            replacementBody.className = `reading-body ${this.isLocked ? 'locked' : 'unlocked'}`;
+            replacementBody.style.fontSize = `${this.currentZoom}rem`;
+            this.contentBox.appendChild(replacementBody);
+            this.body = replacementBody;
+        } else {
+            this.body = existingBody;
+        }
+
+        this.bindTouchZoomSurface();
+        return this.body;
     }
-    
-    initTouchZoom() {
+
+    bindTouchZoomSurface() {
+        const body = this.ensureReaderStructureBodyOnly();
+        if (!body || this._touchZoomBoundBody === body) {
+            return;
+        }
+        this._touchZoomBoundBody = body;
+
         let initialDistance = 0;
         let initialZoom = 1.0;
-        
-        this.body.addEventListener('touchstart', (e) => {
+
+        body.addEventListener('touchstart', (e) => {
             if (e.touches.length === 2) {
                 initialDistance = Math.hypot(
                     e.touches[0].pageX - e.touches[1].pageX,
@@ -63,7 +106,7 @@ class Reader {
             }
         }, { passive: false });
 
-        this.body.addEventListener('touchmove', (e) => {
+        body.addEventListener('touchmove', (e) => {
             if (e.touches.length === 2) {
                 const currentDistance = Math.hypot(
                     e.touches[0].pageX - e.touches[1].pageX,
@@ -83,14 +126,158 @@ class Reader {
             }
         }, { passive: false });
 
-        this.body.addEventListener('touchend', (e) => {
+        body.addEventListener('touchend', (e) => {
             if (e.touches.length < 2) {
                 initialDistance = 0;
             }
         });
     }
 
+    ensureReaderStructureBodyOnly() {
+        this.refreshDomRefs();
+        return this.body || null;
+    }
+
+    isMermaidErrorArtifactText(text) {
+        const normalized = String(text || '').toLowerCase();
+        if (!normalized) {
+            return false;
+        }
+        return (
+            normalized.includes('syntax error in text') ||
+            normalized.includes('lexical error on line') ||
+            normalized.includes('parse error on line') ||
+            normalized.includes('mermaid version') ||
+            normalized.includes('diagram syntax error')
+        );
+    }
+
+    resolveMermaidErrorArtifactHost(node) {
+        if (!node || typeof node.closest !== 'function') {
+            return node;
+        }
+        return (
+            node.closest('.mermaid-render-host-offscreen') ||
+            node.closest('.mermaid') ||
+            node.closest('.mermaid-render-failed') ||
+            node.closest('.reader-block') ||
+            node.closest('svg') ||
+            node
+        );
+    }
+
+    isProtectedMermaidSuppressionHost(host) {
+        if (!host || host.nodeType !== Node.ELEMENT_NODE) {
+            return true;
+        }
+        return (
+            host === document.body ||
+            host === document.documentElement ||
+            host === document.head ||
+            host.id === 'graph-wrapper' ||
+            host.id === 'path-container' ||
+            host.id === 'reading-window' ||
+            host.id === 'reading-content-box' ||
+            host.id === 'reading-body'
+        );
+    }
+
+    collectMermaidErrorArtifactHosts(root) {
+        const hosts = [];
+        const hostSet = new Set();
+        const candidates = [];
+        if (!root) {
+            return hosts;
+        }
+        if (
+            root.nodeType === Node.ELEMENT_NODE &&
+            root !== document.body &&
+            root !== document.documentElement &&
+            root !== document.head
+        ) {
+            candidates.push(root);
+        }
+        if (typeof root.querySelectorAll === 'function') {
+            root.querySelectorAll('svg, .mermaid, div, section, article, aside, img, foreignObject').forEach((node) => {
+                candidates.push(node);
+            });
+        }
+        candidates.forEach((candidate) => {
+            if (!candidate || candidate.nodeType !== Node.ELEMENT_NODE) {
+                return;
+            }
+            const text = String(
+                candidate.textContent ||
+                candidate.getAttribute?.('alt') ||
+                candidate.getAttribute?.('aria-label') ||
+                ''
+            ).trim();
+            const hasErrorClass = Boolean(
+                candidate.classList?.contains('error-icon') ||
+                candidate.querySelector?.('.error-icon')
+            );
+            if (!hasErrorClass && !this.isMermaidErrorArtifactText(text)) {
+                return;
+            }
+            const host = this.resolveMermaidErrorArtifactHost(candidate);
+            if (!host || hostSet.has(host) || this.isProtectedMermaidSuppressionHost(host)) {
+                return;
+            }
+            hostSet.add(host);
+            hosts.push(host);
+        });
+        return hosts;
+    }
+
+    suppressLeakedMermaidErrorArtifacts(options = {}) {
+        const root = options.root || document.body;
+        const preserveNode = options.preserveNode || null;
+        const hosts = this.collectMermaidErrorArtifactHosts(root);
+        hosts.forEach((host) => {
+            if (!host || host.closest?.('.mermaid-render-failed')) {
+                return;
+            }
+            if (preserveNode && (host === preserveNode || preserveNode.contains(host) || host.contains(preserveNode))) {
+                return;
+            }
+            if (host.parentNode) {
+                host.parentNode.removeChild(host);
+            } else if (host.style) {
+                host.style.display = 'none';
+            }
+        });
+        return hosts.length;
+    }
+
+    createOffscreenMermaidRenderHost(widthHint) {
+        const hostWidth = Math.max(480, Number(widthHint) || 960);
+        const host = document.createElement('div');
+        host.className = 'mermaid-render-host-offscreen';
+        host.style.position = 'fixed';
+        host.style.left = '-20000px';
+        host.style.top = '0';
+        host.style.width = String(hostWidth) + 'px';
+        host.style.minWidth = String(hostWidth) + 'px';
+        host.style.height = 'auto';
+        host.style.overflow = 'visible';
+        host.style.opacity = '0';
+        host.style.pointerEvents = 'none';
+        host.style.background = 'transparent';
+        host.style.fontFamily = '"Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", sans-serif';
+        const mountRoot = (
+            (this.window && this.window.ownerDocument && this.window.ownerDocument.body) ||
+            document.body ||
+            document.documentElement
+        );
+        if (!mountRoot || typeof mountRoot.appendChild !== 'function') {
+            throw new Error('Reader Mermaid offscreen host mount root is unavailable.');
+        }
+        mountRoot.appendChild(host);
+        return host;
+    }
+
     async open(node) {
+        this.ensureReaderStructure();
         const nodeLike = this.normalizeNodeInput(node);
         this.title.innerText = nodeLike.label;
 
@@ -119,6 +306,13 @@ class Reader {
         let rendered = false;
         if (filePath) {
             rendered = await this.tryRenderViaMarkdownProtocol(nodeLike, filePath, resolvedTarget, sessionId);
+            if (rendered && this.isReaderBodyVisiblyEmpty()) {
+                console.warn('[Reader] Markdown protocol path completed without visible content. Falling back to raw markdown render.', {
+                    nodeId: nodeLike.id,
+                    filePath,
+                });
+                rendered = false;
+            }
         }
         if (!rendered) {
             const rawContent = await this.loadRawContentFallback(nodeLike);
@@ -134,7 +328,7 @@ class Reader {
 
     normalizeNodeInput(nodeLike) {
         if (typeof nodeLike === 'string') {
-            return {
+            nodeLike = {
                 id: nodeLike,
                 label: nodeLike,
                 content: '',
@@ -143,15 +337,41 @@ class Reader {
         }
         const safeNode = (nodeLike && typeof nodeLike === 'object') ? nodeLike : {};
         const nodeId = String(safeNode.id || safeNode.label || 'unknown-node');
+        const hydratedNode = this.lookupNodeDataById(nodeId);
+        const hydratedMetadata = (hydratedNode && hydratedNode.metadata && typeof hydratedNode.metadata === 'object')
+            ? hydratedNode.metadata
+            : {};
+        const safeMetadata = (safeNode.metadata && typeof safeNode.metadata === 'object') ? safeNode.metadata : {};
         return {
+            ...(hydratedNode && typeof hydratedNode === 'object' ? hydratedNode : {}),
             ...safeNode,
             id: nodeId,
-            label: String(safeNode.label || nodeId),
+            label: String(safeNode.label || hydratedNode?.label || nodeId),
             content: typeof safeNode.content === 'string' ? safeNode.content : '',
-            metadata: (safeNode.metadata && typeof safeNode.metadata === 'object') ? safeNode.metadata : {},
+            metadata: {
+                ...hydratedMetadata,
+                ...safeMetadata,
+            },
         };
     }
 
+    lookupNodeDataById(nodeId) {
+        const normalizedNodeId = String(nodeId || '').trim();
+        if (!normalizedNodeId) {
+            return null;
+        }
+        const sourceData = (typeof graphData !== 'undefined') ? graphData : window.graphData;
+        if (!sourceData || !Array.isArray(sourceData.nodes)) {
+            return null;
+        }
+        const matchedNode = sourceData.nodes.find((item) => (
+            item &&
+            (String(item.id || '').trim() === normalizedNodeId ||
+             String(item.label || '').trim() === normalizedNodeId)
+        ));
+        return matchedNode && typeof matchedNode === 'object' ? matchedNode : null;
+    }
+
     extractNodeFilePath(nodeLike) {
         if (!nodeLike || typeof nodeLike !== 'object') return '';
         const metadata = (nodeLike.metadata && typeof nodeLike.metadata === 'object') ? nodeLike.metadata : {};
@@ -160,6 +380,16 @@ class Reader {
         return String(nodeLike.filepath || nodeLike.filePath || '').trim();
     }
 
+    isReaderBodyVisiblyEmpty() {
+        if (!this.body) {
+            return true;
+        }
+        return (
+            this.body.children.length === 0 &&
+            String(this.body.textContent || '').trim().length === 0
+        );
+    }
+
     getRuntimeBaseUrl() {
         if (window.NoteConnectionRuntime && typeof window.NoteConnectionRuntime.getBaseUrl === 'function') {
             return window.NoteConnectionRuntime.getBaseUrl();
@@ -225,6 +455,89 @@ class Reader {
         });
     }
 
+    normalizeMermaidDefinition(source) {
+        if (window.pathModules && window.pathModules.utils && typeof window.pathModules.utils.normalizeBridgeMermaidDefinition === 'function') {
+            return window.pathModules.utils.normalizeBridgeMermaidDefinition(source);
+        }
+        return String(source || '').trim();
+    }
+
+    getMermaidDefinitionCandidates(source) {
+        const candidates = [];
+        const normalized = this.normalizeMermaidDefinition(source);
+        const raw = String(source || '').replace(/\r\n?/g, '\n').trim();
+        [normalized, raw].forEach((candidate) => {
+            const next = String(candidate || '').trim();
+            if (!next || candidates.includes(next)) {
+                return;
+            }
+            candidates.push(next);
+        });
+        return candidates;
+    }
+
+    async canParseMermaidDefinition(definition) {
+        if (!window.mermaid || typeof mermaid.parse !== 'function') {
+            return true;
+        }
+        try {
+            await mermaid.parse(definition);
+            return true;
+        } catch (_error) {
+            return false;
+        }
+    }
+
+    isMermaidErrorSvgMarkup(markup) {
+        const text = String(markup || '').toLowerCase();
+        if (!text) {
+            return false;
+        }
+        return (
+            text.includes('syntax error in text') ||
+            text.includes('lexical error on line') ||
+            text.includes('parse error on line') ||
+            text.includes('mermaid version') ||
+            text.includes('class="error-icon"') ||
+            text.includes('id="error-icon"')
+        );
+    }
+
+    renderCompactMermaidFailure(wrapper, error, source) {
+        wrapper.classList.add('mermaid-render-failed');
+        wrapper.innerHTML = '';
+
+        const notice = document.createElement('div');
+        notice.className = 'mermaid-render-notice';
+
+        const title = document.createElement('div');
+        title.className = 'mermaid-render-notice-title';
+        title.textContent = 'Mermaid diagram unavailable.';
+        notice.appendChild(title);
+
+        const summary = document.createElement('div');
+        summary.className = 'mermaid-render-notice-summary';
+        summary.textContent = 'Rendering failed in the current runtime. Details are available on demand.';
+        notice.appendChild(summary);
+
+        const details = document.createElement('details');
+        details.className = 'mermaid-render-notice-details';
+
+        const detailsSummary = document.createElement('summary');
+        detailsSummary.textContent = 'Render details';
+        details.appendChild(detailsSummary);
+
+        const detailText = document.createElement('pre');
+        detailText.className = 'mermaid-render-notice-code';
+        const errorMessage = String(error && error.message ? error.message : error || 'Unknown error').trim();
+        const sourceSnippet = String(source || '').trim().slice(0, 320);
+        detailText.textContent = errorMessage + (sourceSnippet ? `\n\n${sourceSnippet}` : '');
+        details.appendChild(detailText);
+
+        notice.appendChild(details);
+        wrapper.appendChild(notice);
+    }
+
     async tryRenderViaMarkdownProtocol(nodeLike, filePath, resolvedTarget, sessionId) {
         const config = this.getReadingProtocolConfig();
         if (String(config.markdownEngine || 'auto').toLowerCase() === 'legacy') {
@@ -306,13 +619,14 @@ class Reader {
 
     cleanupProtocolState() {
         this._protocolRenderState = null;
-        if (this._protocolScrollHandler) {
+        if (this._protocolScrollHandler && this.body) {
             this.body.removeEventListener('scroll', this._protocolScrollHandler);
             this._protocolScrollHandler = null;
         }
     }
 
     async renderProtocolBlocks(blocks, position, currentFilePath, sessionId) {
+        this.ensureReaderStructure();
         if (!Array.isArray(blocks) || blocks.length === 0) {
             return;
         }
@@ -509,8 +823,21 @@ class Reader {
         this.body.addEventListener('scroll', this._protocolScrollHandler, { passive: true });
     }
 
+    autoFixInlineMermaidFenceAfterBlockMath(markdownText) {
+        const source = String(markdownText || '');
+        if (!source) {
+            return source;
+        }
+        if (!source.includes('```mermaid') || !source.includes('$$')) {
+            return source;
+        }
+        return source.replace(/\$\$[ \t]*```mermaid\b/g, '$$\n```mermaid');
+    }
+
     normalizeProtocolBlock(block) {
-        const source = String(block && block.text ? block.text : '');
+        const source = this.autoFixInlineMermaidFenceAfterBlockMath(
+            String(block && block.text ? block.text : '')
+        );
         const type = String(block && block.type ? block.type : '').trim().toLowerCase();
         const normalizedType = type || 'paragraph';
         if (!source) {
@@ -712,7 +1039,11 @@ class Reader {
     }
 
     async renderRawMarkdown(rawContent, currentFilePath, sessionId) {
-        const markdownText = this.transformWikiLinks(String(rawContent || '*No content available.*'));
+        this.ensureReaderStructure();
+        const sanitizedMarkdown = this.autoFixInlineMermaidFenceAfterBlockMath(
+            String(rawContent || '*No content available.*')
+        );
+        const markdownText = this.transformWikiLinks(sanitizedMarkdown);
         this.body.innerHTML = marked.parse(markdownText);
         this.bindWikiLinks(this.body, currentFilePath || this.getRuntimeBaseUrl());
         this.renderMathInContainer(this.body);
@@ -734,10 +1065,8 @@ class Reader {
     }
 
     async renderMermaidInContainer(container) {
-        if (!window.mermaid) {
-            return;
-        }
-        if (!this._mermaidInitialized) {
+        const hasFrontendMermaid = Boolean(window.mermaid);
+        if (hasFrontendMermaid && !this._mermaidInitialized) {
             mermaid.initialize({
                 startOnLoad: false,
                 theme: 'dark',
@@ -747,6 +1076,8 @@ class Reader {
             this._mermaidInitialized = true;
         }
 
+        this.suppressLeakedMermaidErrorArtifacts({ root: document.body });
+
         let mermaidBlocks = Array.from(container.querySelectorAll('pre code.language-mermaid, pre code.lang-mermaid'));
         if (mermaidBlocks.length === 0 && container.dataset && container.dataset.codeLanguage === 'mermaid') {
             const fallbackBlock = container.querySelector('pre code');
@@ -758,7 +1089,8 @@ class Reader {
         for (const block of mermaidBlocks) {
             const txt = document.createElement('textarea');
             txt.innerHTML = block.innerHTML;
-            const graphDefinition = txt.value;
+            const candidateDefinitions = this.getMermaidDefinitionCandidates(txt.value);
+            const graphDefinition = candidateDefinitions[0] || '';
             const parentPre = block.parentElement;
             if (!parentPre || !parentPre.parentNode) continue;
 
@@ -766,25 +1098,165 @@ class Reader {
             const renderId = `reader-mermaid-${this._mermaidRenderCounter}`;
             const wrapper = document.createElement('div');
             wrapper.className = 'mermaid';
-            wrapper.id = renderId;
             parentPre.parentNode.replaceChild(wrapper, parentPre);
-            try {
-                const rendered = await mermaid.render(renderId, graphDefinition);
-                wrapper.innerHTML = rendered.svg;
-            } catch (error) {
-                wrapper.innerText = `Mermaid render error: ${String(error && error.message ? error.message : error)}`;
-                console.error('Mermaid error:', error);
+            let rendered = false;
+            const renderErrors = [];
+            let renderSource = '';
+            const section = wrapper.closest('.reader-block');
+            const blockId = section && section.dataset ? String(section.dataset.blockId || '').trim() : '';
+
+            if (hasFrontendMermaid) {
+                for (let candidateIndex = 0; candidateIndex < candidateDefinitions.length; candidateIndex += 1) {
+                    const candidate = candidateDefinitions[candidateIndex];
+                    const offscreenHost = this.createOffscreenMermaidRenderHost(
+                        wrapper.clientWidth || parentPre.clientWidth || container.clientWidth || 960
+                    );
+                    try {
+                        wrapper.innerHTML = '';
+                        const renderedResult = await mermaid.render(`${renderId}-${candidateIndex}`, candidate, offscreenHost);
+                        if (renderedResult && typeof renderedResult.svg === 'string' && renderedResult.svg.trim()) {
+                            if (this.isMermaidErrorSvgMarkup(renderedResult.svg)) {
+                                throw new Error('Mermaid frontend renderer returned an error SVG instead of a diagram.');
+                            }
+                            wrapper.innerHTML = renderedResult.svg;
+                        }
+                        if (/<svg[\s>]/i.test(String(wrapper.innerHTML || ''))) {
+                            rendered = true;
+                            renderSource = 'frontend-render';
+                            this._mermaidRenderStats.frontendRender += 1;
+                            break;
+                        }
+                    } catch (error) {
+                        renderErrors.push(error);
+                        wrapper.innerHTML = '';
+                        this.suppressLeakedMermaidErrorArtifacts({
+                            root: document.body,
+                            preserveNode: wrapper,
+                        });
+                    } finally {
+                        offscreenHost.remove();
+                    }
+                }
+            } else {
+                renderErrors.push(new Error('Mermaid runtime is unavailable in current webview.'));
+            }
+
+            if (!rendered && hasFrontendMermaid) {
+                for (let candidateIndex = 0; candidateIndex < candidateDefinitions.length; candidateIndex += 1) {
+                    const candidate = candidateDefinitions[candidateIndex];
+                    const canParse = await this.canParseMermaidDefinition(candidate);
+                    if (!canParse) {
+                        continue;
+                    }
+                    try {
+                        wrapper.innerHTML = '';
+                        wrapper.textContent = candidate;
+                        await mermaid.run({ nodes: [wrapper] });
+                        rendered = /<svg[\s>]/i.test(String(wrapper.innerHTML || '')) &&
+                            !this.isMermaidErrorSvgMarkup(String(wrapper.innerHTML || ''));
+                        if (rendered) {
+                            renderSource = 'frontend-run';
+                            this._mermaidRenderStats.frontendRun += 1;
+                            break;
+                        }
+                    } catch (error) {
+                        renderErrors.push(error);
+                        wrapper.innerHTML = '';
+                        this.suppressLeakedMermaidErrorArtifacts({
+                            root: document.body,
+                            preserveNode: wrapper,
+                        });
+                    }
+                }
+            }
+
+            if (!rendered) {
+                wrapper.innerHTML = '';
+                const backendRendered = await this.renderMermaidViaBackend(graphDefinition);
+                if (backendRendered && backendRendered.pngBase64) {
+                    const altRenderer = backendRendered.renderer ? ` (${backendRendered.renderer})` : '';
+                    wrapper.innerHTML = `<img class="mermaid-fallback-image" src="data:image/png;base64,${backendRendered.pngBase64}" alt="Mermaid diagram${altRenderer}" />`;
+                    rendered = true;
+                    renderSource = backendRendered.renderer ? `backend-${backendRendered.renderer}` : 'backend-png';
+                    this._mermaidRenderStats.backendPng += 1;
+                }
+            }
+
+            if (!rendered) {
+                const lastError = renderErrors.length > 0 ? renderErrors[renderErrors.length - 1] : null;
+                this.renderCompactMermaidFailure(wrapper, lastError, graphDefinition);
+                if (lastError) {
+                    console.error('Mermaid error:', lastError);
+                }
+                renderSource = 'failed';
+                this._mermaidRenderStats.failed += 1;
+            }
+
+            this.suppressLeakedMermaidErrorArtifacts({
+                root: document.body,
+                preserveNode: wrapper,
+            });
+
+            if (renderSource) {
+                wrapper.dataset.renderSource = renderSource;
+                const blockSuffix = blockId ? ` block=${blockId}` : '';
+                console.info(`[Reader] Mermaid render source: ${renderSource}${blockSuffix}`);
             }
         }
         if (mermaidBlocks.length > 0) {
+            console.info(
+                `[Reader] Mermaid render stats: frontend-render=${this._mermaidRenderStats.frontendRender}, frontend-run=${this._mermaidRenderStats.frontendRun}, backend-png=${this._mermaidRenderStats.backendPng}, failed=${this._mermaidRenderStats.failed}`
+            );
             this.initMermaidZoom();
         }
     }
 
+    async renderMermaidViaBackend(graphDefinition) {
+        const source = this.normalizeMermaidDefinition(graphDefinition || '');
+        if (!source) {
+            return null;
+        }
+        try {
+            const response = await fetch(
+                this.buildRuntimeUrl('/api/render/mermaid'),
+                this.buildRuntimeFetchOptions({
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        source,
+                        renderer: 'auto',
+                    }),
+                })
+            );
+            const payload = await response.json().catch(() => null);
+            if (!response.ok || !payload || typeof payload.pngBase64 !== 'string' || !payload.pngBase64.trim()) {
+                return null;
+            }
+            return {
+                pngBase64: payload.pngBase64.trim(),
+                renderer: typeof payload.renderer === 'string' ? payload.renderer.trim() : '',
+            };
+        } catch (error) {
+            console.warn('[Reader] Mermaid backend fallback failed:', error);
+            return null;
+        }
+    }
+
     initMermaidZoom() {
+        if (!this.body) {
+            return;
+        }
         const mermaidDivs = this.body.querySelectorAll('.mermaid');
         mermaidDivs.forEach(div => {
+            if (div.dataset && div.dataset.readerZoomBound === '1') {
+                return;
+            }
             div.style.cursor = 'zoom-in';
+            if (div.dataset) {
+                div.dataset.readerZoomBound = '1';
+            }
             div.addEventListener('click', (e) => {
                 e.stopPropagation(); // Prevent Reader close
                 this.openMermaidOverlay(div.innerHTML);
@@ -793,6 +1265,11 @@ class Reader {
     }
 
     openMermaidOverlay(svgContent) {
+        const existingOverlay = document.getElementById('mermaid-zoom-overlay');
+        if (existingOverlay && existingOverlay.parentNode) {
+            existingOverlay.parentNode.removeChild(existingOverlay);
+        }
+
         // Create Overlay
         const overlay = document.createElement('div');
         overlay.id = 'mermaid-zoom-overlay';
@@ -802,15 +1279,29 @@ class Reader {
         const container = document.createElement('div');
         container.className = 'mermaid-zoom-container';
         container.innerHTML = svgContent;
+        container.addEventListener('click', (event) => {
+            event.stopPropagation();
+        });
         overlay.appendChild(container);
 
         // Close Button
         const closeBtn = document.createElement('button');
         closeBtn.innerText = '×';
         closeBtn.className = 'mermaid-close-btn';
-        closeBtn.onclick = () => document.body.removeChild(overlay);
+        closeBtn.onclick = (event) => {
+            event.stopPropagation();
+            if (overlay.parentNode) {
+                overlay.parentNode.removeChild(overlay);
+            }
+        };
         overlay.appendChild(closeBtn);
 
+        overlay.addEventListener('click', () => {
+            if (overlay.parentNode) {
+                overlay.parentNode.removeChild(overlay);
+            }
+        });
+
         document.body.appendChild(overlay);
 
         // Pan/Zoom State
@@ -931,7 +1422,9 @@ class Reader {
         if (!this._sessionId) this._sessionId = 0;
         this._sessionId += 1;
         this.cleanupProtocolState();
-        this.window.style.display = 'none';
+        if (this.window) {
+            this.window.style.display = 'none';
+        }
     }
 
     toggleLock() {
@@ -940,6 +1433,7 @@ class Reader {
     }
 
     updateLockState() {
+        this.ensureReaderStructure();
         const btn = document.getElementById('btn-reader-lock');
         const zoomBtns = document.querySelectorAll('#btn-reader-zoom-in, #btn-reader-zoom-out');
         
@@ -965,6 +1459,7 @@ class Reader {
     }
 
     updateZoom() {
+        this.ensureReaderStructure();
         this.body.style.fontSize = `${this.currentZoom}rem`;
         // Scale images if needed, but CSS 'resize' handles explicit image resizing in unlocked mode.
         // Font size scaling handles text content scaling.