feat(mdviewer): add persistent bidirectional cursor sync highlights

Show a subtle background highlight on the synced element/line when
cursor is on the other side: CM cursor → viewer element highlight,
viewer cursor → CM line highlight. Highlights clear when focus moves
to the highlighted panel (no highlight on the active panel). Works
in both light and dark themes.

Author: abose

src-mdviewer/src/bridge.js

@@ -836,8 +836,23 @@ function handleScrollToLine(data) {
     if (!isVisible) {
         bestEl.scrollIntoView({ behavior: "instant", block: "center" });
     }
+
+    // Persistent highlight on the element corresponding to the CM cursor.
+    // Only show when CM has focus (not when viewer has focus).
+    const prev = viewer.querySelector(".cursor-sync-highlight");
+    if (prev) { prev.classList.remove("cursor-sync-highlight"); }
+    bestEl.classList.add("cursor-sync-highlight");
 }
 
+// Clear viewer highlight when viewer gets focus (user is editing in viewer)
+document.addEventListener("focusin", (e) => {
+    const viewer = document.getElementById("viewer-content");
+    if (viewer && viewer.contains(e.target)) {
+        const prev = viewer.querySelector(".cursor-sync-highlight");
+        if (prev) { prev.classList.remove("cursor-sync-highlight"); }
+    }
+});
+
 // --- Selection sync ---
 
 function _clearSelectionHighlight() {

src-mdviewer/src/styles/markdown.css

@@ -474,6 +474,16 @@
   background-color: rgba(50, 100, 220, 0.1);
 }
 
+/* Persistent cursor-sync highlight on the element corresponding to CM cursor */
+.cursor-sync-highlight {
+  background-color: rgba(100, 150, 255, 0.18);
+  border-radius: 2px;
+}
+
+[data-theme="light"] .cursor-sync-highlight {
+  background-color: rgba(50, 100, 220, 0.14);
+}
+
 /* ===== Mermaid diagrams ===== */
 
 .mermaid-diagram {

src/extensionsIntegrated/Phoenix-live-preview/MarkdownSync.js

@@ -206,6 +206,13 @@ define(function (require, exports, module) {
         _activeCM = cm;
         if (cm) {
             cm.on("cursorActivity", _cursorHandler);
+            // Clear sync highlight when CM gets focus (user is editing in CM)
+            cm.on("focus", function () {
+                if (_highlightLineHandle) {
+                    cm.removeLineClass(_highlightLineHandle, "background", "cm-cursor-sync-highlight");
+                    _highlightLineHandle = null;
+                }
+            });
             // Listen for change origin (undo/redo detection)
             cm.on("change", function (_cm, changeObj) {
                 if (changeObj) {
@@ -622,6 +629,18 @@ define(function (require, exports, module) {
             const targetScrollTop = lineTop - (scrollInfo.clientHeight / 2);
             cm.scrollTo(null, targetScrollTop);
         }
+
+        // Brief flash on the CM line to show cursor sync feedback
+        _flashCMLine(cm, cmLine);
+    }
+
+    let _highlightLineHandle = null;
+
+    function _flashCMLine(cm, line) {
+        if (_highlightLineHandle) {
+            cm.removeLineClass(_highlightLineHandle, "background", "cm-cursor-sync-highlight");
+        }
+        _highlightLineHandle = cm.addLineClass(line, "background", "cm-cursor-sync-highlight");
     }
 
     // --- Selection sync ---
@@ -690,6 +709,7 @@ define(function (require, exports, module) {
         if (!selectedText) {
             // No selection — just move cursor to clear any existing selection
             cm.setCursor({ line: cmLine, ch: 0 });
+            _flashCMLine(cm, cmLine);
             _syncingFromIframe = false;
             return;
         }

src/extensionsIntegrated/Phoenix-live-preview/live-preview.css

@@ -248,3 +248,8 @@
 .live-preview-overlay-close:hover {
     color: #fff;
 }
+
+/* Persistent cursor-sync highlight on CM line corresponding to md viewer cursor */
+.cm-cursor-sync-highlight {
+    background-color: rgba(100, 150, 255, 0.18) !important;
+}