@happy-nut/monacori 0.1.16 → 0.1.18

package/dist/viewer.client.js

@@ -509,6 +509,15 @@ function scheduleDiffScroll(row) {
 // reflow-forcing scrollIntoView can run, so collapse them to one (latest element) per animation frame and
 // use block:nearest (no per-row center-jump). Shared by the tree, source caret, and diff caret.
 var pendingScrollEl = null, scrollElRaf = 0;
+// Reveal `el` by keeping it ~fraction of the way down its scroller, scrolling minimally on EVERY move so the
+// view follows the caret CONTINUOUSLY. scrollIntoView('nearest') instead leaves the view still until the
+// caret reaches the edge and then jumps — stuttering ~every viewport while an arrow key is held.
+function revealAt(el, scroller, fraction) {
+  if (!el) return;
+  if (!scroller || !scroller.clientHeight) { try { el.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } catch (x) {} return; }
+  var off = el.getBoundingClientRect().top - scroller.getBoundingClientRect().top;
+  scroller.scrollTop += off - scroller.clientHeight * fraction;
+}
 function scheduleScrollIntoView(el) {
   pendingScrollEl = el || null;
   if (scrollElRaf) return;
@@ -897,7 +906,7 @@ function scheduleTreeFocus() {
     if (treeFocusIndex < 0 || treeFocusIndex >= rows.length) return;
     const el = rows[treeFocusIndex];
     document.querySelectorAll('.tree-focus').forEach((e) => { if (e !== el) e.classList.remove('tree-focus'); });
-    if (el) { el.classList.add('tree-focus'); el.scrollIntoView({ block: 'nearest', inline: 'nearest' }); }
+    if (el) { el.classList.add('tree-focus'); revealAt(el, document.querySelector('.sidebar-scroll'), 0.42); }
   });
 }
 
@@ -1583,7 +1592,7 @@ function scheduleDiffReveal(wrapper, side, ri) {
     applyDiffSelection();
     if (!t) return;
     var row = diffRowAt(t.wrapper, t.side, t.ri);
-    if (row && row.scrollIntoView) { try { row.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } catch (x) {} }
+    revealAt(row, document.getElementById('diff2html-container'), 0.42);
   });
 }
 function navEntryOf(kind) {
@@ -3318,7 +3327,7 @@ function scheduleSourceReveal(prev) {
     var lines = f.content.split(/\r?\n/);
     updateSourceCaret(p, lines, f.language || 'text');
     var cl = document.querySelector('.source-row.cursor-line');
-    if (cl && cl.scrollIntoView) { try { cl.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } catch (x) {} }
+    revealAt(cl, document.getElementById('source-body'), 0.42);
   });
 }
 
@@ -3336,25 +3345,35 @@ function updateSourceCaret(prev, lines, language) {
   // Restore the line the caret left: drop the caret span, re-highlight the full line.
   if (prev && prev.lineIndex !== viewerCursor.lineIndex) {
     const prevRow = rowFor(prev.lineIndex);
-    if (prevRow) {
-      prevRow.classList.remove('cursor-line');
-      if (!rendered) {
-        const prevCell = prevRow.querySelector('.source-code');
-        if (prevCell) prevCell.innerHTML = highlightLine(lines[prev.lineIndex] || '', language);
-      }
-    }
+    if (prevRow) prevRow.classList.remove('cursor-line');
   }
+  // Drop the old caret span WITHOUT re-highlighting the line — re-tokenizing a line on every caret move is
+  // what made holding an arrow key stutter. (The diff caret already works this way: insert/remove a span.)
+  if (!rendered) body.querySelectorAll('.code-cursor').forEach((s) => { const p = s.parentNode; if (p) { p.removeChild(s); if (p.normalize) p.normalize(); } });
   // Reconcile the go-to-definition highlight (set only on symbol jumps, cleared on plain moves).
   body.querySelectorAll('.source-row.symbol-target').forEach((r) => r.classList.remove('symbol-target'));
   if (viewerCursor.targetLine >= 0) rowFor(viewerCursor.targetLine)?.classList.add('symbol-target');
-  // Rebuild the new caret line with the caret span.
   const row = rowFor(viewerCursor.lineIndex);
   if (!row) { if (!rendered) openSourceFile(viewerCursor.path, false); return; } // line not in the DOM — full re-render (eager source only)
   row.classList.add('cursor-line');
-  if (!rendered) {
-    const cell = row.querySelector('.source-code');
-    if (cell) cell.innerHTML = renderLineWithCursor(lines[viewerCursor.lineIndex] || '', language, viewerCursor.column);
-  }
+  if (!rendered) insertSourceCaret(row, viewerCursor.column);
+}
+// Insert the caret span at `column` of `row` via a real DOM range into the already-highlighted line — the
+// same cheap technique the diff caret uses, so holding an arrow key never re-tokenizes a line.
+function insertSourceCaret(row, column) {
+  var cell = row.querySelector('.source-code');
+  if (!cell || (cell.textContent || '').length === 0) return; // empty line: the cursor-line background marks it
+  var pos = diffCaretDomPosition(cell, column);
+  if (!pos) return;
+  var span = document.createElement('span');
+  span.className = 'code-cursor';
+  span.setAttribute('aria-hidden', 'true');
+  try {
+    var off = pos.node.nodeType === 3 ? Math.min(pos.offset, (pos.node.textContent || '').length) : pos.offset;
+    var range = document.createRange();
+    range.setStart(pos.node, off); range.collapse(true);
+    range.insertNode(span);
+  } catch (e) {}
 }
 
 function openSourceAt(path, lineIndex, column) {
@@ -3983,6 +4002,7 @@ function openSourceFile(path, shouldSwitch = true) {
   } else {
     body.innerHTML = renderSourceTable(file, '');
     if (httpEnvSelect) httpEnvSelect.classList.add('hidden');
+    if (viewerCursor && viewerCursor.path === path) { var ccr = body.querySelector('.source-row.cursor-line'); if (ccr) insertSourceCaret(ccr, viewerCursor.column); }
   }
   updateRenderToggle(path);
   renderSourceComments();
@@ -4518,7 +4538,7 @@ function renderSourceTable(file, query) {
     return [
       '<tr class="' + classes + '" data-line-index="' + index + '">',
       '<td class="num">' + String(index + 1) + '</td>',
-      '<td class="source-code">' + (isCursorLine ? renderLineWithCursor(line, file.language || 'text', cursor.column) : highlightLine(line, file.language || 'text')) + '</td>',
+      '<td class="source-code">' + highlightLine(line, file.language || 'text') + '</td>',
       '</tr>',
     ].join('');
   }).join('');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happy-nut/monacori",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "Validation control plane for AI-generated code changes.",
   "type": "module",
   "repository": {