@replohq/sandbox-runtime 1.24.1 → 1.24.3

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.24.1",
+  "version": "1.24.3",
   "branch": "HEAD",
-  "commit": "043ae54a4a52039285aac996cc7b2b67a922dfdd",
-  "builtAt": "2026-11-03T00:13:53.913Z"
+  "commit": "e1eeef82df82036e9d623fccf943736d34fb994d",
+  "builtAt": "2026-11-04T19:25:11.953Z"
 };

package/comments-overlay/overlay.d.ts

@@ -3,7 +3,7 @@ import type { CommentOverlayAnchorStatus, CommentOverlayPin, CommentOverlayRect
 import type { DisplayMode } from "../_vendor/schemas/generated/selectMode";
 import type { ElementSource } from "./capture";
 export declare const OVERLAY_Z_INDEX = 2147483645;
-export declare const HIGHLIGHT_BACKGROUND = "rgba(250, 204, 21, 0.28)";
+export declare const HIGHLIGHT_BACKGROUND = "color-mix(in srgb, var(--replo-comment-accent) 12%, transparent)";
 export declare const BADGE_SIZE_PX = 32;
 export declare const RERESOLVE_DEBOUNCE_MS = 250;
 export type CommentsOverlayCallbacks = {
@@ -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: {

package/comments-overlay/overlay.js

@@ -2,8 +2,9 @@ import { captureAnchor, getAnchorElement } from "./capture";
 import { isResolutionVisible, resolveAnchor } from "./resolve";
 import { OVERLAY_ROOT_ATTRIBUTE } from "./textQuote";
 const OVERLAY_Z_INDEX = 2147483645;
-const HIGHLIGHT_BACKGROUND = "rgba(250, 204, 21, 0.28)";
-const QUOTE_UNDERLINE = "2px solid rgba(250, 204, 21, 0.9)";
+const HIGHLIGHT_BACKGROUND = "color-mix(in srgb, var(--replo-comment-accent) 12%, transparent)";
+const SOFT_OUTLINE_COLOR = "color-mix(in srgb, var(--replo-comment-accent) 55%, transparent)";
+const HIGHLIGHT_OUTLINE = "1.5px solid var(--replo-comment-accent)";
 const BADGE_SIZE_PX = 32;
 const BADGE_HIT_TARGET_PX = 44;
 const BADGE_HIT_TARGET_WIDTH_PX = 64;
@@ -11,7 +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 HOVER_OUTLINE_STYLE = "position:absolute;pointer-events:none;box-sizing:border-box;border:1px solid rgba(37,99,235,.45);background:rgba(37,99,235,.025);border-radius:3px";
+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'])";
 function getReportedStatus(resolution) {
@@ -31,11 +32,8 @@ function createCommentsOverlay(options) {
   let pins = [];
   let resolutions = /* @__PURE__ */ new Map();
   const boundElements = /* @__PURE__ */ new Map();
-  let focusedThreadId = null;
+  let selection = null;
   let hoveredBadgeThreadId = null;
-  let draftAnchor = null;
-  let draftResolution = null;
-  let draftElement = null;
   let statusesKey = "";
   let hoveredElement = null;
   let hoverOutline = null;
@@ -52,7 +50,7 @@ function createCommentsOverlay(options) {
   let isDestroyed = false;
   const root = document.createElement("div");
   root.setAttribute(OVERLAY_ROOT_ATTRIBUTE, "true");
-  root.style.cssText = `position:fixed;inset:0;z-index:${OVERLAY_Z_INDEX};pointer-events:none;overflow:hidden`;
+  root.style.cssText = `position:fixed;inset:0;z-index:${OVERLAY_Z_INDEX};pointer-events:none;overflow:hidden;--replo-comment-accent:light-dark(#7861bf,#b09be8);--replo-comment-surface:light-dark(#f0eafa,#372e4d);--replo-comment-text:light-dark(#7058b4,#b09be8);--replo-comment-on-accent:light-dark(#fff,#20182f)`;
   document.documentElement.append(root);
   const isInOverlay = (node) => {
     return node instanceof Node && root.contains(node);
@@ -66,22 +64,22 @@ function createCommentsOverlay(options) {
   const isPageElement = (node) => {
     return node instanceof Element && node !== document.body && node !== document.documentElement && !isInOverlay(node);
   };
-  const isEditableSelection = (selection) => {
-    const node = selection.anchorNode;
+  const isEditableSelection = (selection2) => {
+    const node = selection2.anchorNode;
     const element = node instanceof Element ? node : node?.parentElement;
     return Boolean(
       element?.closest(EDITABLE_SELECTOR) || document.activeElement?.matches(EDITABLE_SELECTOR)
     );
   };
   const getUsableSelectionRange = () => {
-    const selection = window.getSelection();
-    if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+    const selection2 = window.getSelection();
+    if (!selection2 || selection2.isCollapsed || selection2.rangeCount === 0) {
       return null;
     }
-    if (isEditableSelection(selection)) {
+    if (isEditableSelection(selection2)) {
       return null;
     }
-    const range = selection.getRangeAt(0);
+    const range = selection2.getRangeAt(0);
     if (!range.toString().trim() || isInOverlay(range.commonAncestorContainer)) {
       return null;
     }
@@ -132,11 +130,12 @@ function createCommentsOverlay(options) {
       }
     }
     resolutions = next;
-    draftResolution = draftAnchor ? resolveAnchor(draftAnchor, document, {
-      previous: draftElement,
-      getSource: cachedGetSource
-    }) : null;
-    draftElement = draftResolution?.element ?? null;
+    if (selection?.kind === "draft") {
+      selection.resolution = resolveAnchor(selection.anchor, document, {
+        previous: selection.resolution?.element ?? null,
+        getSource: cachedGetSource
+      });
+    }
     const statuses = getElementAnchors().map(({ pin }) => {
       return {
         threadId: pin.threadId,
@@ -157,7 +156,7 @@ function createCommentsOverlay(options) {
     resolveTimer = setTimeout(resolveAll, RERESOLVE_DEBOUNCE_MS);
   };
   const paintHighlight = (resolution, threadId) => {
-    const isQuote = Boolean(resolution.range);
+    const isOutlined = threadId === null || threadId === hoveredBadgeThreadId || selection?.kind === "thread" && threadId === selection.threadId;
     for (const rect of getResolutionRects(resolution)) {
       if (rect.width <= 0 || rect.height <= 0 || rect.bottom < 0 || rect.top > window.innerHeight) {
         continue;
@@ -168,10 +167,7 @@ function createCommentsOverlay(options) {
       } else {
         highlight.dataset.commentDraft = "true";
       }
-      highlight.style.cssText = `position:absolute;pointer-events:none;background:${HIGHLIGHT_BACKGROUND};border-radius:2px;box-sizing:border-box`;
-      if (isQuote) {
-        highlight.style.borderBottom = QUOTE_UNDERLINE;
-      }
+      highlight.style.cssText = `position:absolute;pointer-events:none;background:${threadId ? HIGHLIGHT_BACKGROUND : "transparent"};border:${isOutlined ? HIGHLIGHT_OUTLINE : "0"};border-radius:4px;box-sizing:border-box`;
       highlight.style.left = `${rect.left}px`;
       highlight.style.top = `${rect.top}px`;
       highlight.style.width = `${rect.width}px`;
@@ -180,7 +176,7 @@ function createCommentsOverlay(options) {
     }
   };
   const isHighlightShown = (threadId) => {
-    return mode === "comment" || threadId === focusedThreadId || threadId === hoveredBadgeThreadId;
+    return mode === "comment" || selection?.kind === "thread" && threadId === selection.threadId || threadId === hoveredBadgeThreadId;
   };
   const createIcon = (size, path) => {
     const icon = document.createElementNS(SVG_NAMESPACE, "svg");
@@ -320,7 +316,7 @@ function createCommentsOverlay(options) {
     };
     for (const pin of pins) {
       const resolution = resolutions.get(pin.threadId);
-      const isFocused = pin.threadId === focusedThreadId;
+      const isFocused = selection?.kind === "thread" && pin.threadId === selection.threadId;
       if (!resolution || pin.status === "resolved" && !isFocused || !isResolutionVisible(resolution)) {
         continue;
       }
@@ -350,12 +346,16 @@ function createCommentsOverlay(options) {
       badge.style.top = `${position.top}px`;
       const isActive = isFocused || pin.threadId === hoveredBadgeThreadId;
       const dot = document.createElement("span");
-      dot.style.cssText = `display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-width:48px;height:${BADGE_SIZE_PX}px;padding:0 6px;border-radius:8px;border:1px solid rgba(0,0,0,.12);background:#ffeb80;color:#171717;box-shadow:0 1px 3px rgba(0,0,0,.12);font:600 14px/1 system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap`;
+      dot.style.cssText = `display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-width:48px;height:${BADGE_SIZE_PX}px;padding:0 6px;border-radius:999px;border:1px solid ${SOFT_OUTLINE_COLOR};background:var(--replo-comment-surface);color:var(--replo-comment-text);box-shadow:0 1px 3px rgba(0,0,0,.08);font:600 14px/1 system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap`;
       if (isCompact) {
         dot.style.marginRight = "3px";
       }
       if (isActive) {
-        dot.style.borderColor = "rgba(0,0,0,.4)";
+        dot.style.borderColor = "var(--replo-comment-accent)";
+      }
+      if (isFocused) {
+        dot.style.background = "var(--replo-comment-accent)";
+        dot.style.color = "var(--replo-comment-on-accent)";
       }
       if (resolution.status === "ambiguous") {
         dot.style.borderStyle = "dashed";
@@ -380,8 +380,8 @@ function createCommentsOverlay(options) {
         child.remove();
       }
     }
-    if (draftResolution && isResolutionVisible(draftResolution)) {
-      paintHighlight(draftResolution, null);
+    if (selection?.kind === "draft" && selection.resolution && isResolutionVisible(selection.resolution)) {
+      paintHighlight(selection.resolution, null);
     }
     paintBadges();
     paintHover();
@@ -409,21 +409,32 @@ function createCommentsOverlay(options) {
     const anchor = captureAnchor(target, point);
     const range = "tagName" in target ? void 0 : target;
     const rect = (range ?? element).getBoundingClientRect();
-    draftAnchor = anchor;
-    draftElement = element;
-    draftResolution = {
-      status: "attached",
-      element,
-      ...range ? { range } : {}
+    selection = {
+      kind: "draft",
+      anchor,
+      resolution: {
+        status: "attached",
+        element,
+        ...range ? { range } : {}
+      }
     };
     hoveredElement = null;
     void finishAnchor(anchor).then((prepared) => report(prepared, rect));
     schedulePaint();
   };
   const clearDraft = () => {
-    draftAnchor = null;
-    draftResolution = null;
-    draftElement = null;
+    if (selection?.kind === "draft") {
+      selection = null;
+    }
+  };
+  const dismissSelection = () => {
+    if (!selection) {
+      return false;
+    }
+    selection = null;
+    options.onPickCancelled();
+    schedulePaint();
+    return true;
   };
   const refreshSelectionPrompt = () => {
     selectionTimer = null;
@@ -579,7 +590,7 @@ function createCommentsOverlay(options) {
       return;
     }
     if (!isPageElement(target)) {
-      options.onModeShortcut({ mode: "browse" });
+      dismissSelection();
       return;
     }
     pick(target, { x: event.clientX, y: event.clientY }, reportPicked);
@@ -595,16 +606,12 @@ function createCommentsOverlay(options) {
     if (event.key !== "Escape") {
       return;
     }
-    if (mode === "comment" || draftAnchor) {
+    if (mode === "comment" || selection?.kind === "draft") {
       if (mode === "comment") {
         event.preventDefault();
         event.stopImmediatePropagation();
       }
-      if (draftAnchor) {
-        clearDraft();
-        options.onPickCancelled();
-        schedulePaint();
-      } else {
+      if (!dismissSelection()) {
         options.onModeShortcut({ mode: "browse" });
       }
       return;
@@ -713,7 +720,9 @@ function createCommentsOverlay(options) {
       mode = nextMode;
       selectionPrompt = null;
       hoveredElement = null;
-      focusedThreadId = null;
+      if (selection?.kind === "thread") {
+        selection = null;
+      }
       setCursor(nextMode, previousMode);
       if (previousMode === "comment") {
         window.getSelection()?.removeAllRanges();
@@ -731,7 +740,7 @@ function createCommentsOverlay(options) {
       resolveAll();
     },
     focusThread: (threadId) => {
-      focusedThreadId = threadId;
+      selection = { kind: "thread", threadId };
       const resolution = resolutions.get(threadId);
       const target = resolution?.range?.startContainer.parentElement ?? resolution?.element ?? null;
       if (resolution && isResolutionVisible(resolution)) {
@@ -748,7 +757,11 @@ function createCommentsOverlay(options) {
       schedulePaint();
     },
     setDraftAnchor: (anchor) => {
-      draftAnchor = anchor?.type === "element" ? anchor : null;
+      if (anchor?.type === "element") {
+        selection = { kind: "draft", anchor, resolution: null };
+      } else {
+        clearDraft();
+      }
       resolveAll();
     },
     refresh: resolveAll,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.24.1",
+  "version": "1.24.3",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.24.1",
+    "version": "1.24.3",
     "branch": "HEAD",
-    "commit": "043ae54a4a52039285aac996cc7b2b67a922dfdd",
-    "builtAt": "2026-11-03T00:13:53.913Z"
+    "commit": "e1eeef82df82036e9d623fccf943736d34fb994d",
+    "builtAt": "2026-11-04T19:25:11.953Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",