@happy-nut/monacori 0.1.13 → 0.1.15

package/dist/viewer.client.js

@@ -164,7 +164,7 @@ function setupCustomSelect(id, getOptions, getCurrent, onPick) {
     var r = el.getBoundingClientRect(), cur = getCurrent();
     showCustomDropdown(r.left, r.bottom + 4, getOptions().map(function (o) {
       return { label: (o.value === cur ? '✓  ' : '  ') + o.label, onSelect: function () { onPick(o.value); render(); } };
-    }));
+    }), r.top - 4);
   });
   render();
   return { render: render };
@@ -2091,7 +2091,28 @@ function saveMergePrompt(kind, text) {
 
 // Reusable custom dropdown (keyboard + mouse). options: [{ label, onSelect }]. First item is pre-selected;
 // Arrow keys move, Enter chooses, Esc / click-outside dismiss. Replaces native <select>/menus everywhere.
-function showCustomDropdown(x, y, options) {
+// Approximate the caret's pixel position in the (monospace) merged textarea so the dropdown can open right
+// under it — and flip above when there isn't room below. Returns { x, top (caret line top), below }.
+function mergedCaretXY(area) {
+  var pos = area.selectionStart || 0;
+  var nl = area.value.slice(0, pos).split('\n');
+  var lineNum = nl.length - 1;
+  var col = nl[lineNum].length;
+  var cs = getComputedStyle(area);
+  var lineH = parseFloat(cs.lineHeight) || 18;
+  var rect = area.getBoundingClientRect();
+  var span = document.createElement('span');
+  span.style.cssText = 'position:absolute;visibility:hidden;white-space:pre';
+  span.style.font = cs.font;
+  span.textContent = 'MMMMMMMMMMMMMMMMMMMM';
+  document.body.appendChild(span);
+  var charW = span.getBoundingClientRect().width / 20;
+  span.remove();
+  var caretTop = rect.top + (parseFloat(cs.paddingTop) || 0) + lineNum * lineH - area.scrollTop;
+  var x = Math.min(rect.left + (parseFloat(cs.paddingLeft) || 0) + col * charW, rect.right - 24);
+  return { x: x, top: caretTop, below: caretTop + lineH + 2 };
+}
+function showCustomDropdown(x, y, options, flipTop) {
   var existing = document.getElementById('mc-dropdown');
   if (existing) existing.remove();
   var dd = document.createElement('div');
@@ -2116,9 +2137,16 @@ function showCustomDropdown(x, y, options) {
     item.addEventListener('mousemove', function () { setActive(i); });
     dd.appendChild(item);
   });
-  dd.style.left = Math.round(x) + 'px';
-  dd.style.top = Math.round(y) + 'px';
   document.body.appendChild(dd);
+  // Position after measuring: open at (x, y); flip above (flipTop) when it would overflow the bottom,
+  // and nudge in from the right/bottom edges so it never clips offscreen.
+  var ddr = dd.getBoundingClientRect();
+  var top = y, left = x;
+  if (typeof flipTop === 'number' && top + ddr.height > window.innerHeight - 8) top = Math.max(8, flipTop - ddr.height);
+  else if (top + ddr.height > window.innerHeight - 8) top = Math.max(8, window.innerHeight - ddr.height - 8);
+  if (left + ddr.width > window.innerWidth - 8) left = Math.max(8, window.innerWidth - ddr.width - 8);
+  dd.style.left = Math.round(left) + 'px';
+  dd.style.top = Math.round(top) + 'px';
   document.addEventListener('keydown', onKey, true);
   document.addEventListener('mousedown', onOutside, true);
 }
@@ -2221,20 +2249,20 @@ function openMergedView(kind) {
     e.stopPropagation();
     var seqs = mergedCommentSeqs(kind, area.selectionStart, area.selectionEnd);
     if (!seqs.length) return;
-    var rect = area.getBoundingClientRect();
-    var x = rect.left + 24, y = rect.top + 48;
+    var cxy = mergedCaretXY(area);
+    var x = cxy.x, y = cxy.below, flipTop = cxy.top;
     var rerender = function () {
       if (!reviewComments.filter(function (c) { return c.kind === kind; }).length) { modal.remove(); return; }
       area.value = buildMergedText(kind);
     };
     if (area.selectionStart !== area.selectionEnd || seqs.length > 1) {
-      showCustomDropdown(x, y, [{ label: t('dropdown.remove'), onSelect: function () { seqs.forEach(deleteComment); rerender(); } }]);
+      showCustomDropdown(x, y, [{ label: t('dropdown.remove'), onSelect: function () { seqs.forEach(deleteComment); rerender(); } }], flipTop);
     } else {
       var seq = seqs[0];
       showCustomDropdown(x, y, [
         { label: t('dropdown.navigate'), onSelect: function () { modal.remove(); navigateToComment(seq); } },
         { label: t('dropdown.remove'), onSelect: function () { deleteComment(seq); rerender(); } },
-      ]);
+      ], flipTop);
     }
   });
   closeBtn.addEventListener('click', function () { modal.remove(); });
@@ -2264,12 +2292,12 @@ function openMergedView(kind) {
   document.body.appendChild(modal);
   // Focus the send button (Enter starts pane-pick) when present, else the read-only text. Electron
   // async-restores focus to <body>, so retry briefly (same as the composer).
-  var modalFocusTarget = sendBtn || area;
+  var modalFocusTarget = area; // focus the text (not the send button) so the caret is visible and Opt+Arrow/Enter work; Send-to-terminal is a click
   var modalFocusTries = 0;
   var tryFocusModal = function () {
     if (!document.getElementById('mc-modal')) return true;
     if (document.activeElement === modalFocusTarget) return true;
-    try { modalFocusTarget.focus(); if (modalFocusTarget === area) modalFocusTarget.select(); } catch (e) {}
+    try { modalFocusTarget.focus(); modalFocusTarget.selectionStart = modalFocusTarget.selectionEnd = 0; } catch (e) {}
     return document.activeElement === modalFocusTarget;
   };
   if (!tryFocusModal()) {

package/dist/viewer.css

@@ -685,6 +685,10 @@ h1 { margin: 0; font-size: 18px; }
   font-size: 14px; line-height: 1; padding: 0 3px; cursor: pointer; border-radius: 3px;
 }
 .source-tab-close:hover { background: var(--line); color: var(--text); }
+/* Scrolloff: keep the caret / focused row near the vertical middle while navigating, so holding an arrow
+   key scrolls the view CONTINUOUSLY instead of leaving it still until the caret reaches the viewport edge
+   (the "stutter every ~viewport" the user reported). Applies to the source body, the diff, and the sidebar. */
+.source-body, #diff2html-container, .sidebar-scroll { scroll-padding-block: 35vh; }
 .source-body {
   border: 1px solid var(--border);
   overflow: auto;
@@ -860,8 +864,8 @@ body.mc-composing .source-row.cursor-line .num { color: inherit; }
 .mc-modal-head span { margin-right: auto; }
 .mc-modal-text { width: 100%; height: 100%; box-sizing: border-box; resize: none; border: 0; padding: 12px; background: var(--bg); color: var(--text); caret-color: var(--text); font: 12px/1.55 Monaco, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
 .mc-modal-text:focus { outline: none; }
-.mc-dropdown { position: fixed; z-index: 70; min-width: 150px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); padding: 4px; }
-.mc-dropdown-item { display: block; width: 100%; text-align: left; padding: 7px 12px; border: 0; background: transparent; color: var(--text); border-radius: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; }
+.mc-dropdown { position: fixed; z-index: 70; min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); padding: 3px; }
+.mc-dropdown-item { display: block; width: 100%; text-align: left; padding: 4px 10px; border: 0; background: transparent; color: var(--text); border-radius: 4px; font-size: 12px; line-height: 1.5; cursor: pointer; white-space: nowrap; }
 .mc-dropdown-item.active, .mc-dropdown-item:hover { background: var(--active); color: #fff; }
 #mc-toasts { position: fixed; left: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; max-width: 360px; pointer-events: none; }
 .mc-toast { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--active); border-radius: 8px; padding: 10px 14px; font-size: 13px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }

package/package.json

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