@replohq/sandbox-runtime 1.24.2 → 1.24.4

package/_vendor/schemas/commentsOverlayRpc.d.ts

@@ -168,6 +168,10 @@ export declare const hostToCommentsOverlayMethodConfig: {
         }, z.core.$strict>;
         outputSchema: z.ZodVoid;
     };
+    clearThreadFocus: {
+        inputSchema: z.ZodUndefined;
+        outputSchema: z.ZodVoid;
+    };
     clearDraft: {
         inputSchema: z.ZodUndefined;
         outputSchema: z.ZodVoid;

package/_vendor/schemas/commentsOverlayRpc.mjs

@@ -40,6 +40,10 @@ var hostToCommentsOverlayMethodConfig = {
     inputSchema: z.strictObject({ threadId: z.string() }),
     outputSchema: z.void()
   },
+  clearThreadFocus: {
+    inputSchema: z.undefined(),
+    outputSchema: z.void()
+  },
   clearDraft: {
     inputSchema: z.undefined(),
     outputSchema: z.void()

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.24.2",
+  "version": "1.24.4",
   "branch": "HEAD",
-  "commit": "a3a1a0505f42cea89e63bbfa5628b1d35558fc76",
-  "builtAt": "2026-11-03T19:15:42.310Z"
+  "commit": "49a643c73e7608adcefebcd5c5e27c3e6d0c05a9",
+  "builtAt": "2026-11-04T22:05:21.699Z"
 };

package/comments-overlay/bridge.js

@@ -64,6 +64,9 @@ function startCommentsOverlay({
       focusThread: ({ threadId }) => {
         getOverlay().focusThread(threadId);
       },
+      clearThreadFocus: () => {
+        overlay?.clearThreadFocus();
+      },
       clearDraft: () => {
         overlay?.clearDraft();
       },

package/comments-overlay/capture.d.ts

@@ -32,7 +32,10 @@ export declare function getElementSource(element: Element): ElementSource | null
  * none. Inside a shadow root it includes nested shadow roots' text.
  */
 export declare function getTextPreview(element: Element): string;
-/** The element an anchor for this click target or selection describes. */
+/**
+ * The element an anchor for this click target or selection describes; null
+ * when a click lands in layout spacing or a selection isn't in an element.
+ */
 export declare function getAnchorElement(target: Element | Range): Element | null;
 /**
  * Builds an element anchor (D-13) for a clicked element or a text selection.

package/comments-overlay/capture.js

@@ -168,8 +168,14 @@ function createRootAnchorSelectors(element) {
     selector: ownSemanticSelector ?? findUniqueSelector(element) ?? createNthChildSelector(element)
   };
 }
+const LAYOUT_SELECTOR = "[data-comment-layout]";
 function getAnchorElement(target) {
-  const picked = isElement(target) ? target : rangeContainer(target);
+  if (isElement(target)) {
+    const element = snapToAnchorElement(target);
+    const isLayout = element.matches(LAYOUT_SELECTOR) || element.querySelector(LAYOUT_SELECTOR) !== null;
+    return isLayout ? null : element;
+  }
+  const picked = rangeContainer(target);
   return picked ? snapToAnchorElement(picked) : null;
 }
 function captureAnchor(target, point) {

package/comments-overlay/overlay.d.ts

@@ -20,6 +20,7 @@ export type CommentsOverlayCallbacks = {
     onComposeFromSelection: (input: {
         anchor: CommentAnchorElement;
     }) => void;
+    /** Esc, or a click on empty page, closed the pending pick or open thread. */
     onPickCancelled: () => void;
     /** C or Esc pressed in the frame; the host owns the mode. */
     onModeShortcut: (input: {
@@ -36,6 +37,7 @@ export type CommentsOverlay = {
     setMode: (mode: DisplayMode) => void;
     setPins: (pins: CommentOverlayPin[]) => void;
     focusThread: (threadId: string) => void;
+    clearThreadFocus: () => void;
     clearDraft: () => void;
     setDraftAnchor: (anchor: CommentAnchor | null) => void;
     /** Re-resolves every anchor now, e.g. after symbolication results arrive. */

package/comments-overlay/overlay.js

@@ -12,6 +12,7 @@ const COMPACT_GUTTER_MAX_WIDTH_PX = 600;
 const RERESOLVE_DEBOUNCE_MS = 250;
 const SELECTION_PROMPT_DEBOUNCE_MS = 150;
 const TEXT_PICK_CLICK_SUPPRESS_MS = 750;
+const PENDING_SCROLL_MS = 1e4;
 const HOVER_OUTLINE_STYLE = `position:absolute;pointer-events:none;box-sizing:border-box;border:${HIGHLIGHT_OUTLINE};background:transparent;border-radius:4px`;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 const EDITABLE_SELECTOR = "input, textarea, select, [contenteditable]:not([contenteditable='false'])";
@@ -34,6 +35,7 @@ function createCommentsOverlay(options) {
   const boundElements = /* @__PURE__ */ new Map();
   let selection = null;
   let hoveredBadgeThreadId = null;
+  let pendingScroll = null;
   let statusesKey = "";
   let hoveredElement = null;
   let hoverOutline = null;
@@ -105,6 +107,19 @@ function createCommentsOverlay(options) {
       return pin.anchor.type === "element" ? [{ pin, anchor: pin.anchor }] : [];
     });
   };
+  const scrollToThread = (threadId) => {
+    const resolution = resolutions.get(threadId);
+    if (!resolution || !isResolutionVisible(resolution)) {
+      return false;
+    }
+    const target = resolution.range?.startContainer.parentElement ?? resolution.element;
+    const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
+    target?.scrollIntoView?.({
+      block: "center",
+      behavior: reduceMotion ? "auto" : "smooth"
+    });
+    return true;
+  };
   const resolveAll = () => {
     resolveTimer = null;
     observeShadowRoots(document);
@@ -130,6 +145,12 @@ function createCommentsOverlay(options) {
       }
     }
     resolutions = next;
+    if (pendingScroll) {
+      const isStale = selection?.kind !== "thread" || selection.threadId !== pendingScroll.threadId || Date.now() > pendingScroll.until;
+      if (isStale || scrollToThread(pendingScroll.threadId)) {
+        pendingScroll = null;
+      }
+    }
     if (selection?.kind === "draft") {
       selection.resolution = resolveAnchor(selection.anchor, document, {
         previous: selection.resolution?.element ?? null,
@@ -427,6 +448,15 @@ function createCommentsOverlay(options) {
       selection = null;
     }
   };
+  const dismissSelection = () => {
+    if (!selection) {
+      return false;
+    }
+    selection = null;
+    options.onPickCancelled();
+    schedulePaint();
+    return true;
+  };
   const refreshSelectionPrompt = () => {
     selectionTimer = null;
     const range = mode !== "comment" && !pointerIsDown ? getUsableSelectionRange() : null;
@@ -580,8 +610,8 @@ function createCommentsOverlay(options) {
     if (window.getSelection()?.toString().trim()) {
       return;
     }
-    if (!isPageElement(target)) {
-      options.onModeShortcut({ mode: "browse" });
+    if (!isPageElement(target) || !getAnchorElement(target)) {
+      dismissSelection();
       return;
     }
     pick(target, { x: event.clientX, y: event.clientY }, reportPicked);
@@ -602,11 +632,7 @@ function createCommentsOverlay(options) {
         event.preventDefault();
         event.stopImmediatePropagation();
       }
-      if (selection?.kind === "draft") {
-        clearDraft();
-        options.onPickCancelled();
-        schedulePaint();
-      } else {
+      if (!dismissSelection()) {
         options.onModeShortcut({ mode: "browse" });
       }
       return;
@@ -736,17 +762,15 @@ function createCommentsOverlay(options) {
     },
     focusThread: (threadId) => {
       selection = { kind: "thread", threadId };
-      const resolution = resolutions.get(threadId);
-      const target = resolution?.range?.startContainer.parentElement ?? resolution?.element ?? null;
-      if (resolution && isResolutionVisible(resolution)) {
-        const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
-        target?.scrollIntoView?.({
-          block: "center",
-          behavior: reduceMotion ? "auto" : "smooth"
-        });
-      }
+      pendingScroll = scrollToThread(threadId) ? null : { threadId, until: Date.now() + PENDING_SCROLL_MS };
       schedulePaint();
     },
+    clearThreadFocus: () => {
+      if (selection?.kind === "thread") {
+        selection = null;
+        schedulePaint();
+      }
+    },
     clearDraft: () => {
       clearDraft();
       schedulePaint();

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.24.2",
+  "version": "1.24.4",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.24.2",
+    "version": "1.24.4",
     "branch": "HEAD",
-    "commit": "a3a1a0505f42cea89e63bbfa5628b1d35558fc76",
-    "builtAt": "2026-11-03T19:15:42.310Z"
+    "commit": "49a643c73e7608adcefebcd5c5e27c3e6d0c05a9",
+    "builtAt": "2026-11-04T22:05:21.699Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",