bloggy 0.1.43__py3-none-any.whl → 0.2.3__py3-none-any.whl

bloggy/static/scripts.js

@@ -1,12 +1,146 @@
 import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
 
 const mermaidStates = {};
+const mermaidDebugEnabled = () => (
+    window.BLOGGY_DEBUG_MERMAID === true ||
+    localStorage.getItem('bloggyDebugMermaid') === '1'
+);
+const mermaidDebugLog = (...args) => {
+    if (mermaidDebugEnabled()) {
+        console.log('[bloggy][mermaid]', ...args);
+    }
+};
+const mermaidDebugSnapshot = (label) => {
+    if (!mermaidDebugEnabled()) {
+        return;
+    }
+    const wrappers = Array.from(document.querySelectorAll('.mermaid-wrapper'));
+    const withSvg = wrappers.filter(w => w.querySelector('svg'));
+    const interactive = wrappers.filter(w => w.dataset.mermaidInteractive === 'true');
+    const last = wrappers[wrappers.length - 1];
+    let lastRect = null;
+    if (last) {
+        const rect = last.getBoundingClientRect();
+        lastRect = {
+            id: last.id,
+            width: Math.round(rect.width),
+            height: Math.round(rect.height),
+            hasSvg: !!last.querySelector('svg'),
+            interactive: last.dataset.mermaidInteractive === 'true'
+        };
+    }
+    mermaidDebugLog(label, {
+        total: wrappers.length,
+        withSvg: withSvg.length,
+        interactive: interactive.length,
+        last: lastRect
+    });
+};
 const GANTT_WIDTH = 1200;
 
+function handleCodeCopyClick(event) {
+    const button = event.target.closest('.code-copy-button, .hljs-copy-button');
+    if (!button) {
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const container = button.closest('.code-block') || button.closest('pre') || button.parentElement;
+    const textarea = container ? container.querySelector('textarea[id$="-clipboard"]') : null;
+    let text = '';
+    if (textarea && textarea.value) {
+        text = textarea.value;
+    } else {
+        const codeEl = (container && container.querySelector('pre > code')) ||
+            (container && container.querySelector('code')) ||
+            button.closest('pre');
+        if (!codeEl) {
+            return;
+        }
+        text = codeEl.innerText || codeEl.textContent || '';
+    }
+    const showToast = () => {
+        let toast = document.getElementById('code-copy-toast');
+        if (!toast) {
+            toast = document.createElement('div');
+            toast.id = 'code-copy-toast';
+            toast.className = 'fixed top-6 right-6 z-[10000] text-xs bg-slate-900 text-white px-3 py-2 rounded shadow-lg opacity-0 transition-opacity duration-300';
+            toast.textContent = 'Copied';
+            document.body.appendChild(toast);
+        }
+        toast.classList.remove('opacity-0');
+        toast.classList.add('opacity-100');
+        setTimeout(() => {
+            toast.classList.remove('opacity-100');
+            toast.classList.add('opacity-0');
+        }, 1400);
+    };
+    if (navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(text).then(showToast).catch(() => {
+            const textarea = document.createElement('textarea');
+            textarea.value = text;
+            textarea.setAttribute('readonly', '');
+            textarea.style.position = 'absolute';
+            textarea.style.left = '-9999px';
+            document.body.appendChild(textarea);
+            textarea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textarea);
+            showToast();
+        });
+    } else {
+        const textarea = document.createElement('textarea');
+        textarea.value = text;
+        textarea.setAttribute('readonly', '');
+        textarea.style.position = 'absolute';
+        textarea.style.left = '-9999px';
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textarea);
+        showToast();
+    }
+}
+
+document.addEventListener('click', handleCodeCopyClick, true);
+
 function initMermaidInteraction() {
-    document.querySelectorAll('.mermaid-wrapper').forEach(wrapper => {
+    const wrappers = Array.from(document.querySelectorAll('.mermaid-wrapper'));
+    if (mermaidDebugEnabled()) {
+        const pending = wrappers.filter(w => !w.querySelector('svg'));
+        const last = wrappers[wrappers.length - 1];
+        mermaidDebugLog('initMermaidInteraction: total', wrappers.length, 'pending', pending.length);
+        if (last) {
+            mermaidDebugLog('initMermaidInteraction: last wrapper', last.id, 'hasSvg', !!last.querySelector('svg'));
+        }
+    }
+    wrappers.forEach((wrapper, idx) => {
         const svg = wrapper.querySelector('svg');
-        if (!svg || mermaidStates[wrapper.id]) return;
+        const alreadyInteractive = wrapper.dataset.mermaidInteractive === 'true';
+        if (mermaidDebugEnabled()) {
+            mermaidDebugLog(
+                'initMermaidInteraction: wrapper',
+                idx,
+                wrapper.id,
+                'hasSvg',
+                !!svg,
+                'interactive',
+                alreadyInteractive
+            );
+        }
+        const getSvg = () => wrapper.querySelector('svg');
+        const applySvgState = (currentSvg) => {
+            if (!currentSvg) {
+                return;
+            }
+            currentSvg.style.pointerEvents = 'none';
+            currentSvg.style.transform = `translate(${state.translateX}px, ${state.translateY}px) scale(${state.scale})`;
+            currentSvg.style.transformOrigin = 'center center';
+        };
+        if (svg) {
+            svg.style.pointerEvents = 'none';
+        }
+        if (!svg || alreadyInteractive) return;
         
         // DEBUG: Log initial state
         console.group(`🔍 initMermaidInteraction: ${wrapper.id}`);
@@ -26,16 +160,28 @@ function initMermaidInteraction() {
         
         // For very wide diagrams (like Gantt charts), prefer width scaling even if it exceeds height
         const aspectRatio = svgRect.width / svgRect.height;
+        const maxUpscale = 1;
         let initialScale;
         if (aspectRatio > 3) {
-            // Wide diagram: scale to fit width, allowing vertical scroll if needed
-            initialScale = scaleX;
+            // Wide diagram: scale to fit width, but do not upscale by default
+            initialScale = Math.min(scaleX, maxUpscale);
             console.log('Wide diagram detected (aspect ratio > 3):', aspectRatio, 'Using scaleX:', initialScale);
         } else {
-            // Normal diagram: fit to smaller dimension, but allow upscaling up to 3x
-            initialScale = Math.min(scaleX, scaleY, 3);
+            // Normal diagram: fit to smaller dimension, but do not upscale by default
+            initialScale = Math.min(scaleX, scaleY, maxUpscale);
             console.log('Normal diagram (aspect ratio <=3):', aspectRatio, 'Using min scale:', initialScale);
         }
+
+        if (mermaidDebugEnabled()) {
+            mermaidDebugLog('initMermaidInteraction: sizing', {
+                id: wrapper.id,
+                wrapperWidth: wrapperRect.width,
+                wrapperHeight: wrapperRect.height,
+                svgWidth: svgRect.width,
+                svgHeight: svgRect.height,
+                initialScale
+            });
+        }
         
         const state = {
             scale: initialScale,
@@ -46,22 +192,46 @@ function initMermaidInteraction() {
             startY: 0
         };
         mermaidStates[wrapper.id] = state;
+        wrapper.dataset.mermaidInteractive = 'true';
         console.log('Final state:', state);
         console.groupEnd();
+
+        if (mermaidDebugEnabled() && !wrapper.dataset.mermaidDebugBound) {
+            wrapper.dataset.mermaidDebugBound = 'true';
+            const logEvent = (name, event) => {
+                const target = event.target && event.target.tagName ? event.target.tagName : 'unknown';
+                mermaidDebugLog(`${name} on ${wrapper.id}`, { type: event.type, target });
+            };
+            wrapper.addEventListener('pointerdown', (e) => logEvent('pointerdown', e));
+            wrapper.addEventListener('pointermove', (e) => logEvent('pointermove', e));
+            wrapper.addEventListener('pointerup', (e) => logEvent('pointerup', e));
+            wrapper.addEventListener('wheel', (e) => logEvent('wheel', e));
+        }
         
         function updateTransform() {
-            svg.style.transform = `translate(${state.translateX}px, ${state.translateY}px) scale(${state.scale})`;
-            svg.style.transformOrigin = 'center center';
+            applySvgState(getSvg());
         }
         
         // Apply initial scale
         updateTransform();
+
+        if (!wrapper.dataset.mermaidObserver) {
+            const observer = new MutationObserver(() => {
+                applySvgState(getSvg());
+            });
+            observer.observe(wrapper, { childList: true, subtree: true });
+            wrapper.dataset.mermaidObserver = 'true';
+        }
         
         // Mouse wheel zoom (zooms towards cursor position)
         wrapper.addEventListener('wheel', (e) => {
             e.preventDefault();
             
-            const rect = svg.getBoundingClientRect();
+            const currentSvg = getSvg();
+            if (!currentSvg) {
+                return;
+            }
+            const rect = currentSvg.getBoundingClientRect();
             
             // Mouse position relative to SVG's current position
             const mouseX = e.clientX - rect.left - rect.width / 2;
@@ -81,34 +251,75 @@ function initMermaidInteraction() {
             updateTransform();
         }, { passive: false });
         
-        // Pan with mouse drag
-        wrapper.addEventListener('mousedown', (e) => {
-            if (e.button !== 0) return;
+        // Pan with pointer drag (mouse + touch)
+        wrapper.style.cursor = 'grab';
+        wrapper.style.touchAction = 'none';
+        wrapper.addEventListener('pointerdown', (e) => {
+            if (e.pointerType === 'mouse' && e.button !== 0) return;
             state.isPanning = true;
             state.startX = e.clientX - state.translateX;
             state.startY = e.clientY - state.translateY;
+            wrapper.setPointerCapture(e.pointerId);
             wrapper.style.cursor = 'grabbing';
             e.preventDefault();
         });
         
-        document.addEventListener('mousemove', (e) => {
+        wrapper.addEventListener('pointermove', (e) => {
             if (!state.isPanning) return;
             state.translateX = e.clientX - state.startX;
             state.translateY = e.clientY - state.startY;
             updateTransform();
+            if (mermaidDebugEnabled()) {
+                mermaidDebugLog('pan update', wrapper.id, {
+                    translateX: state.translateX,
+                    translateY: state.translateY,
+                    scale: state.scale,
+                    svgTransform: (getSvg() && getSvg().style.transform) || ''
+                });
+            }
         });
         
-        document.addEventListener('mouseup', () => {
-            if (state.isPanning) {
-                state.isPanning = false;
-                wrapper.style.cursor = 'grab';
+        const stopPanning = (e) => {
+            if (!state.isPanning) return;
+            state.isPanning = false;
+            try {
+                wrapper.releasePointerCapture(e.pointerId);
+            } catch {
+                // Ignore if pointer capture is not active
             }
-        });
+            wrapper.style.cursor = 'grab';
+        };
         
-        wrapper.style.cursor = 'grab';
+        wrapper.addEventListener('pointerup', stopPanning);
+        wrapper.addEventListener('pointercancel', stopPanning);
     });
 }
 
+function scheduleMermaidInteraction({ maxAttempts = 12, delayMs = 80, onReady } = {}) {
+    let attempt = 0;
+    const check = () => {
+        const wrappers = Array.from(document.querySelectorAll('.mermaid-wrapper'));
+        const pending = wrappers.filter(wrapper => !wrapper.querySelector('svg'));
+        if (mermaidDebugEnabled()) {
+            const last = wrappers[wrappers.length - 1];
+            mermaidDebugLog('scheduleMermaidInteraction attempt', attempt, 'pending', pending.length);
+            if (last) {
+                mermaidDebugLog('scheduleMermaidInteraction last wrapper', last.id, 'hasSvg', !!last.querySelector('svg'));
+            }
+        }
+        if (pending.length === 0 || attempt >= maxAttempts) {
+            initMermaidInteraction();
+            if (typeof onReady === 'function') {
+                onReady();
+            }
+            return;
+        }
+        attempt += 1;
+        setTimeout(check, delayMs);
+    };
+    check();
+}
+
 window.resetMermaidZoom = function(id) {
     const state = mermaidStates[id];
     if (state) {
@@ -263,6 +474,11 @@ function reinitializeMermaid() {
     });
     
     // Find all mermaid wrappers and re-render them
+    const shouldLockHeight = (wrapper) => {
+        const height = (wrapper.style.height || '').trim();
+        return height && height !== 'auto' && height !== 'initial' && height !== 'unset';
+    };
+
     document.querySelectorAll('.mermaid-wrapper').forEach(wrapper => {
         const originalCode = wrapper.getAttribute('data-mermaid-code');
         if (originalCode) {
@@ -271,12 +487,15 @@ function reinitializeMermaid() {
             console.log('BEFORE clear - wrapper rect:', wrapper.getBoundingClientRect());
             
             // Preserve the current computed height before clearing (height should already be set explicitly)
-            const currentHeight = wrapper.getBoundingClientRect().height;
-            console.log('Preserving height:', currentHeight);
-            wrapper.style.height = currentHeight + 'px';
+            if (shouldLockHeight(wrapper)) {
+                const currentHeight = wrapper.getBoundingClientRect().height;
+                console.log('Preserving height:', currentHeight);
+                wrapper.style.height = currentHeight + 'px';
+            }
             
             // Delete the old state so it can be recreated
             delete mermaidStates[wrapper.id];
+            delete wrapper.dataset.mermaidInteractive;
             
             // Decode HTML entities
             const textarea = document.createElement('textarea');
@@ -298,11 +517,12 @@ function reinitializeMermaid() {
     
     // Re-run mermaid
     mermaid.run().then(() => {
-        console.log('Mermaid re-render complete, calling initMermaidInteraction in 100ms');
-        setTimeout(() => {
-            initMermaidInteraction();
-            console.groupEnd();
-        }, 100);
+        console.log('Mermaid re-render complete, scheduling initMermaidInteraction');
+        scheduleMermaidInteraction({
+            onReady: () => {
+                console.groupEnd();
+            }
+        });
     });
 }
 
@@ -312,7 +532,7 @@ const initialGanttWidth = getDynamicGanttWidth();
 console.log('Using initial Gantt width:', initialGanttWidth);
 
 mermaid.initialize({ 
-    startOnLoad: true,
+    startOnLoad: false,
     theme: getCurrentTheme(),
     gantt: {
         useWidth: initialGanttWidth,
@@ -324,20 +544,32 @@ mermaid.initialize({
 let isInitialLoad = true;
 
 // Initialize interaction after mermaid renders
-mermaid.run().then(() => {
-    console.log('Initial mermaid render complete');
-    setTimeout(() => {
-        console.log('Calling initial initMermaidInteraction');
-        initMermaidInteraction();
-        
-        // After initial render, set explicit heights on all wrappers so theme switching works
-        document.querySelectorAll('.mermaid-wrapper').forEach(wrapper => {
-            const currentHeight = wrapper.getBoundingClientRect().height;
-            console.log(`Setting initial height for ${wrapper.id}:`, currentHeight);
-            wrapper.style.height = currentHeight + 'px';
+document.addEventListener('DOMContentLoaded', () => {
+    mermaidDebugSnapshot('before mermaid.run (DOMContentLoaded)');
+    mermaid.run().then(() => {
+        mermaidDebugSnapshot('after mermaid.run (DOMContentLoaded)');
+        console.log('Initial mermaid render complete');
+        scheduleMermaidInteraction({
+            onReady: () => {
+                console.log('Calling initial initMermaidInteraction');
+                
+                // After initial render, set explicit heights on all wrappers so theme switching works
+                const shouldLockHeight = (wrapper) => {
+                    const height = (wrapper.style.height || '').trim();
+                    return height && height !== 'auto' && height !== 'initial' && height !== 'unset';
+                };
+                document.querySelectorAll('.mermaid-wrapper').forEach(wrapper => {
+                    if (!shouldLockHeight(wrapper)) {
+                        return;
+                    }
+                    const currentHeight = wrapper.getBoundingClientRect().height;
+                    console.log(`Setting initial height for ${wrapper.id}:`, currentHeight);
+                    wrapper.style.height = currentHeight + 'px';
+                });
+                isInitialLoad = false;
+            }
         });
-        isInitialLoad = false;
-    }, 100);
+    });
 });
 
 // Reveal current file in sidebar
@@ -346,7 +578,8 @@ function revealInSidebar(rootElement = document) {
         return;
     }
 
-    const currentPath = window.location.pathname.replace(/^\/posts\//, '');
+    // Decode the URL path to handle special characters and spaces
+    const currentPath = decodeURIComponent(window.location.pathname.replace(/^\/posts\//, ''));
     const activeLink = rootElement.querySelector(`.post-link[data-path="${currentPath}"]`);
     
     if (activeLink) {
@@ -390,11 +623,18 @@ function revealInSidebar(rootElement = document) {
 
 function initPostsSidebarAutoReveal() {
     const postSidebars = document.querySelectorAll('details[data-sidebar="posts"]');
+    
     postSidebars.forEach((sidebar) => {
         if (sidebar.dataset.revealBound === 'true') {
             return;
         }
         sidebar.dataset.revealBound = 'true';
+        
+        // Reveal immediately if sidebar is already open
+        if (sidebar.open) {
+            revealInSidebar(sidebar);
+        }
+        
         sidebar.addEventListener('toggle', () => {
             if (!sidebar.open) {
                 return;
@@ -410,6 +650,214 @@ function initFolderChevronState(rootElement = document) {
     });
 }
 
+function initSearchPlaceholderCycle(rootElement = document) {
+    const inputs = rootElement.querySelectorAll('input[data-placeholder-cycle]');
+    inputs.forEach((input) => {
+        if (input.dataset.placeholderCycleBound === 'true') {
+            return;
+        }
+        input.dataset.placeholderCycleBound = 'true';
+        const primary = input.dataset.placeholderPrimary || input.getAttribute('placeholder') || '';
+        const alt = input.dataset.placeholderAlt || '';
+        if (!alt) {
+            return;
+        }
+        let showAlt = false;
+        setInterval(() => {
+            if (input.value) {
+                return;
+            }
+            showAlt = !showAlt;
+            input.setAttribute('placeholder', showAlt ? alt : primary);
+        }, 10000);
+    });
+}
+
+function initCodeBlockCopyButtons(rootElement = document) {
+    const buttons = rootElement.querySelectorAll('.code-copy-button');
+    buttons.forEach((button) => {
+        if (button.dataset.copyBound === 'true') {
+            return;
+        }
+        button.dataset.copyBound = 'true';
+        button.addEventListener('click', () => {
+            const container = button.closest('.code-block');
+            const codeEl = container ? container.querySelector('pre > code') : null;
+            if (!codeEl) {
+                return;
+            }
+            const text = codeEl.innerText || codeEl.textContent || '';
+            const done = () => {
+                button.classList.add('is-copied');
+                setTimeout(() => button.classList.remove('is-copied'), 1200);
+            };
+            if (navigator.clipboard && window.isSecureContext) {
+                navigator.clipboard.writeText(text).then(done).catch(() => {
+                    const textarea = document.createElement('textarea');
+                    textarea.value = text;
+                    textarea.setAttribute('readonly', '');
+                    textarea.style.position = 'absolute';
+                    textarea.style.left = '-9999px';
+                    document.body.appendChild(textarea);
+                    textarea.select();
+                    document.execCommand('copy');
+                    document.body.removeChild(textarea);
+                    done();
+                });
+            } else {
+                const textarea = document.createElement('textarea');
+                textarea.value = text;
+                textarea.setAttribute('readonly', '');
+                textarea.style.position = 'absolute';
+                textarea.style.left = '-9999px';
+                document.body.appendChild(textarea);
+                textarea.select();
+                document.execCommand('copy');
+                document.body.removeChild(textarea);
+                done();
+            }
+        });
+    });
+}
+
+function initPostsSearchPersistence(rootElement = document) {
+    const input = rootElement.querySelector('.posts-search-block input[type="search"][name="q"]');
+    const results = rootElement.querySelector('.posts-search-results');
+    if (!input || !results) {
+        return;
+    }
+    if (input.dataset.searchPersistenceBound === 'true') {
+        return;
+    }
+    input.dataset.searchPersistenceBound = 'true';
+    const termKey = 'bloggy:postsSearchTerm';
+    const resultsKey = 'bloggy:postsSearchResults';
+    const enhanceGatherLink = () => {
+        const gatherLink = results.querySelector('a[href^="/search/gather"]');
+        if (!gatherLink) {
+            return;
+        }
+        const href = gatherLink.getAttribute('href');
+        if (!href) {
+            return;
+        }
+        gatherLink.setAttribute('hx_get', href);
+        gatherLink.setAttribute('hx_target', '#main-content');
+        gatherLink.setAttribute('hx_push_url', 'true');
+        gatherLink.setAttribute('hx_swap', 'outerHTML show:window:top settle:0.1s');
+    };
+    let storedTerm = '';
+    let storedResults = null;
+    try {
+        storedTerm = localStorage.getItem(termKey) || '';
+        storedResults = localStorage.getItem(resultsKey);
+    } catch (err) {
+        storedTerm = '';
+        storedResults = null;
+    }
+    if (storedTerm && !input.value) {
+        input.value = storedTerm;
+    }
+    if (storedResults && input.value) {
+        try {
+            const payload = JSON.parse(storedResults);
+            if (payload && payload.term === input.value && payload.html) {
+                results.innerHTML = payload.html;
+                enhanceGatherLink();
+            }
+        } catch (err) {
+            // Ignore malformed cached payloads.
+        }
+    }
+    const persistTerm = () => {
+        try {
+            if (input.value) {
+                localStorage.setItem(termKey, input.value);
+            } else {
+                localStorage.removeItem(termKey);
+                localStorage.removeItem(resultsKey);
+            }
+        } catch (err) {
+            // Ignore storage failures.
+        }
+    };
+    input.addEventListener('input', persistTerm);
+    const fetchResults = (query) => {
+        return fetch(`/_sidebar/posts/search?q=${query}`)
+            .then((response) => response.text())
+            .then((html) => {
+                results.innerHTML = html;
+                enhanceGatherLink();
+                try {
+                    localStorage.setItem(resultsKey, JSON.stringify({
+                        term: input.value,
+                        html: results.innerHTML
+                    }));
+                } catch (err) {
+                    // Ignore storage failures.
+                }
+            })
+            .catch(() => {});
+    };
+    document.body.addEventListener('htmx:afterSwap', (event) => {
+        if (event.target !== results) {
+            return;
+        }
+        enhanceGatherLink();
+        try {
+            localStorage.setItem(resultsKey, JSON.stringify({
+                term: input.value,
+                html: results.innerHTML
+            }));
+        } catch (err) {
+            // Ignore storage failures.
+        }
+    });
+    if (input.value) {
+        const query = encodeURIComponent(input.value);
+        if (window.htmx && typeof window.htmx.ajax === 'function') {
+            window.htmx.ajax('GET', `/_sidebar/posts/search?q=${query}`, { target: results, swap: 'innerHTML' });
+        } else {
+            fetchResults(query);
+        }
+    }
+}
+
+function initSearchClearButtons(rootElement = document) {
+    const blocks = rootElement.querySelectorAll('.posts-search-block');
+    blocks.forEach((block) => {
+        const input = block.querySelector('input[type="search"][name="q"]');
+        const button = block.querySelector('.posts-search-clear-button');
+        const results = block.querySelector('.posts-search-results');
+        if (!input || !button) {
+            return;
+        }
+        if (button.dataset.clearBound === 'true') {
+            return;
+        }
+        button.dataset.clearBound = 'true';
+        const updateVisibility = () => {
+            button.style.opacity = input.value ? '1' : '0';
+            button.style.pointerEvents = input.value ? 'auto' : 'none';
+        };
+        updateVisibility();
+        input.addEventListener('input', updateVisibility);
+        button.addEventListener('click', () => {
+            input.value = '';
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+            if (results) {
+                results.innerHTML = '';
+            }
+            try {
+                localStorage.removeItem('bloggy:postsSearchTerm');
+                localStorage.removeItem('bloggy:postsSearchResults');
+            } catch (err) {
+                // Ignore storage failures.
+            }
+        });
+    });
+}
+
 document.addEventListener('toggle', (event) => {
     const details = event.target;
     if (!(details instanceof HTMLDetailsElement)) {
@@ -437,17 +885,27 @@ function updateActivePostLink() {
 }
 
 // Update active TOC link based on scroll position
+let lastActiveTocAnchor = null;
 function updateActiveTocLink() {
     const headings = document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]');
     const tocLinks = document.querySelectorAll('.toc-link');
     
     let activeHeading = null;
+    let nearestBelow = null;
+    let nearestBelowTop = Infinity;
+    const offset = 140;
     headings.forEach(heading => {
         const rect = heading.getBoundingClientRect();
-        if (rect.top <= 100) {
+        if (rect.top <= offset) {
             activeHeading = heading;
+        } else if (rect.top < nearestBelowTop) {
+            nearestBelowTop = rect.top;
+            nearestBelow = heading;
         }
     });
+    if (!activeHeading && nearestBelow) {
+        activeHeading = nearestBelow;
+    }
     
     tocLinks.forEach(link => {
         const anchor = link.getAttribute('data-anchor');
@@ -457,6 +915,14 @@ function updateActiveTocLink() {
             link.classList.remove('bg-blue-50', 'dark:bg-blue-900/20', 'text-blue-600', 'dark:text-blue-400', 'font-semibold');
         }
     });
+
+    const activeId = activeHeading ? activeHeading.id : null;
+    if (activeId && activeId !== lastActiveTocAnchor) {
+        document.querySelectorAll(`.toc-link[data-anchor="${activeId}"]`).forEach(link => {
+            link.scrollIntoView({ block: 'nearest' });
+        });
+        lastActiveTocAnchor = activeId;
+    }
 }
 
 // Listen for scroll events to update active TOC link
@@ -471,16 +937,71 @@ window.addEventListener('scroll', () => {
     }
 });
 
+// Sync TOC highlight on hash changes and TOC clicks
+window.addEventListener('hashchange', () => {
+    requestAnimationFrame(updateActiveTocLink);
+});
+
+document.addEventListener('click', (event) => {
+    const link = event.target.closest('.toc-link');
+    if (!link) {
+        return;
+    }
+    const anchor = link.getAttribute('data-anchor');
+    if (!anchor) {
+        return;
+    }
+    requestAnimationFrame(() => {
+        document.querySelectorAll('.toc-link').forEach(item => {
+            item.classList.toggle(
+                'bg-blue-50',
+                item.getAttribute('data-anchor') === anchor
+            );
+            item.classList.toggle(
+                'dark:bg-blue-900/20',
+                item.getAttribute('data-anchor') === anchor
+            );
+            item.classList.toggle(
+                'text-blue-600',
+                item.getAttribute('data-anchor') === anchor
+            );
+            item.classList.toggle(
+                'dark:text-blue-400',
+                item.getAttribute('data-anchor') === anchor
+            );
+            item.classList.toggle(
+                'font-semibold',
+                item.getAttribute('data-anchor') === anchor
+            );
+        });
+        lastActiveTocAnchor = anchor;
+        updateActiveTocLink();
+    });
+});
+
 // Re-run mermaid on HTMX content swaps
-document.body.addEventListener('htmx:afterSwap', function() {
+document.body.addEventListener('htmx:afterSwap', function(event) {
+    mermaidDebugSnapshot('before mermaid.run (htmx:afterSwap)');
+    document.querySelectorAll('.mermaid-wrapper').forEach(wrapper => {
+        if (!wrapper.id) {
+            return;
+        }
+        // HTMX swaps can trigger a mermaid re-run that replaces SVGs.
+        // Clear interaction state so we always re-bind after mermaid.run().
+        delete mermaidStates[wrapper.id];
+        delete wrapper.dataset.mermaidInteractive;
+    });
     mermaid.run().then(() => {
-        setTimeout(initMermaidInteraction, 100);
+        mermaidDebugSnapshot('after mermaid.run (htmx:afterSwap)');
+        scheduleMermaidInteraction();
     });
     updateActivePostLink();
     updateActiveTocLink();
     initMobileMenus(); // Reinitialize mobile menu handlers
     initPostsSidebarAutoReveal();
     initFolderChevronState();
+    initSearchPlaceholderCycle(event.target || document);
+    initCodeBlockCopyButtons(event.target || document);
 });
 
 // Watch for theme changes and re-render mermaid diagrams
@@ -580,6 +1101,79 @@ function initMobileMenus() {
     }
 }
 
+// Keyboard shortcuts for toggling sidebars
+function initKeyboardShortcuts() {
+    // Prewarm the selectors to avoid lazy compilation delays
+    const postsSidebars = document.querySelectorAll('details[data-sidebar="posts"]');
+    const tocSidebar = document.querySelector('#toc-sidebar details');
+    
+    document.addEventListener('keydown', (e) => {
+        // Skip if user is typing in an input field
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable) {
+            return;
+        }
+        
+        // Z: Toggle posts panel
+        if (e.key === 'z' || e.key === 'Z') {
+            e.preventDefault();
+            const postsSidebars = document.querySelectorAll('details[data-sidebar="posts"]');
+            postsSidebars.forEach(sidebar => {
+                sidebar.open = !sidebar.open;
+            });
+        }
+        
+        // X: Toggle TOC panel
+        if (e.key === 'x' || e.key === 'X') {
+            e.preventDefault();
+            const tocSidebar = document.querySelector('#toc-sidebar details');
+            if (tocSidebar) {
+                tocSidebar.open = !tocSidebar.open;
+            }
+        }
+    });
+}
+
+function syncPdfFocusButtons(root = document) {
+    const isFocused = document.body.classList.contains('pdf-focus');
+    root.querySelectorAll('[data-pdf-focus-toggle]').forEach((button) => {
+        const focusLabel = button.getAttribute('data-pdf-focus-label') || 'Focus PDF';
+        const exitLabel = button.getAttribute('data-pdf-exit-label') || 'Exit focus';
+        button.textContent = isFocused ? exitLabel : focusLabel;
+        button.setAttribute('aria-pressed', isFocused ? 'true' : 'false');
+    });
+}
+
+function ensurePdfFocusState() {
+    const hasPdfViewer = document.querySelector('.pdf-viewer') || document.querySelector('[data-pdf-focus-toggle]');
+    if (!hasPdfViewer) {
+        document.body.classList.remove('pdf-focus');
+    }
+    syncPdfFocusButtons(document);
+}
+
+function initPdfFocusToggle() {
+    document.addEventListener('click', (event) => {
+        const button = event.target.closest('[data-pdf-focus-toggle]');
+        if (!button) {
+            return;
+        }
+        event.preventDefault();
+        document.body.classList.toggle('pdf-focus');
+        syncPdfFocusButtons(document);
+    });
+
+    document.addEventListener('keydown', (event) => {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        if (!document.body.classList.contains('pdf-focus')) {
+            return;
+        }
+        document.body.classList.remove('pdf-focus');
+        syncPdfFocusButtons(document);
+    });
+}
+
 // Initialize on page load
 document.addEventListener('DOMContentLoaded', () => {
     updateActivePostLink();
@@ -587,4 +1181,22 @@ document.addEventListener('DOMContentLoaded', () => {
     initMobileMenus();
     initPostsSidebarAutoReveal();
     initFolderChevronState();
+    initKeyboardShortcuts();
+    initPdfFocusToggle();
+    initSearchPlaceholderCycle(document);
+    initPostsSearchPersistence(document);
+    initCodeBlockCopyButtons(document);
+    initSearchClearButtons(document);
+    ensurePdfFocusState();
+});
+
+document.body.addEventListener('htmx:afterSwap', (event) => {
+    if (!event.target) {
+        return;
+    }
+    initSearchPlaceholderCycle(event.target);
+    initPostsSearchPersistence(event.target);
+    initCodeBlockCopyButtons(event.target);
+    initSearchClearButtons(event.target);
+    ensurePdfFocusState();
 });