@replohq/sandbox-runtime 1.22.0 → 1.22.1

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.22.0",
+  "version": "1.22.1",
   "branch": "HEAD",
-  "commit": "06e25b3341d1e79f6171365410c49bee41b1f3e0",
-  "builtAt": "2026-10-30T20:22:33.673Z"
+  "commit": "073dd1a46fae9bca92aae68286e667ef84854658",
+  "builtAt": "2026-10-30T20:41:52.402Z"
 };

package/comments-overlay/overlay.d.ts

@@ -4,7 +4,7 @@ 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 BADGE_SIZE_PX = 20;
+export declare const BADGE_SIZE_PX = 32;
 export declare const RERESOLVE_DEBOUNCE_MS = 250;
 export type CommentsOverlayCallbacks = {
     onAnchorPicked: (input: {

package/comments-overlay/overlay.js

@@ -4,8 +4,9 @@ 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 BADGE_SIZE_PX = 20;
+const BADGE_SIZE_PX = 32;
 const BADGE_HIT_TARGET_PX = 44;
+const BADGE_HIT_TARGET_WIDTH_PX = 64;
 const COMPACT_GUTTER_MAX_WIDTH_PX = 600;
 const RERESOLVE_DEBOUNCE_MS = 250;
 const SELECTION_PROMPT_DEBOUNCE_MS = 150;
@@ -286,16 +287,17 @@ function createCommentsOverlay(options) {
   const paintBadges = () => {
     const isCompact = window.innerWidth <= COMPACT_GUTTER_MAX_WIDTH_PX;
     const size = BADGE_HIT_TARGET_PX;
-    const maxLeft = Math.max(0, window.innerWidth - size);
+    const width = BADGE_HIT_TARGET_WIDTH_PX;
+    const maxLeft = Math.max(0, window.innerWidth - width);
     const maxTop = Math.max(0, window.innerHeight - size);
     const placed = [];
     const place = (rect) => {
-      const baseLeft = isCompact ? maxLeft : Math.max(0, Math.min(maxLeft, rect.right - size / 2));
+      const baseLeft = isCompact ? maxLeft : Math.max(0, Math.min(maxLeft, rect.right - width / 2));
       const baseTop = Math.max(0, Math.min(maxTop, rect.top - size / 2));
-      const columns = Math.ceil(maxLeft / size);
+      const columns = Math.ceil(maxLeft / width);
       const rows = Math.ceil(maxTop / size);
       for (let column = 0; column <= columns * 2; column++) {
-        const left = baseLeft + (column % 2 ? 1 : -1) * Math.ceil(column / 2) * size;
+        const left = baseLeft + (column % 2 ? 1 : -1) * Math.ceil(column / 2) * width;
         if (left < 0 || left > maxLeft) {
           continue;
         }
@@ -305,7 +307,7 @@ function createCommentsOverlay(options) {
             continue;
           }
           const collides = placed.some((slot) => {
-            return Math.abs(slot.left - left) < size && Math.abs(slot.top - top) < size;
+            return Math.abs(slot.left - left) < width && Math.abs(slot.top - top) < size;
           });
           if (!collides) {
             placed.push({ left, top });
@@ -340,7 +342,7 @@ function createCommentsOverlay(options) {
         "aria-label",
         pin.count === 1 ? "Open comment" : `Open ${pin.count} comments`
       );
-      badge.style.cssText = `position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;width:${size}px;height:${size}px;padding:0;margin:0;border:0;background:transparent;cursor:pointer`;
+      badge.style.cssText = `position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;width:${width}px;height:${size}px;padding:0;margin:0;border:0;background:transparent;cursor:pointer;outline-offset:-2px`;
       if (isCompact) {
         badge.style.justifyContent = "flex-end";
       }
@@ -348,25 +350,21 @@ 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:3px;box-sizing:border-box;min-width:${BADGE_SIZE_PX}px;height:${BADGE_SIZE_PX}px;padding:0 ${pin.count === 1 ? 0 : 6}px;border-radius:${BADGE_SIZE_PX / 2}px;border:1px solid rgba(17,24,39,.14);background:#fff;color:#6b7280;box-shadow:0 1px 3px rgba(0,0,0,.18);font:600 11px/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: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`;
       if (isCompact) {
         dot.style.marginRight = "3px";
       }
       if (isActive) {
-        dot.style.borderColor = "#f59e0b";
-        dot.style.background = "#fef3c7";
-        dot.style.color = "#b45309";
+        dot.style.borderColor = "rgba(0,0,0,.4)";
       }
       if (resolution.status === "ambiguous") {
         dot.style.borderStyle = "dashed";
       }
-      const icon = createIcon("12", "M7.9 20A9 9 0 1 0 4 16.1L2 22Z");
+      const icon = createIcon("16", "M7.9 20A9 9 0 1 0 4 16.1L2 22Z");
       icon.setAttribute("stroke-linecap", "round");
       icon.setAttribute("stroke-linejoin", "round");
       dot.append(icon);
-      if (pin.count > 1) {
-        dot.append(pin.count > 99 ? "99+" : String(pin.count));
-      }
+      dot.append(pin.count > 99 ? "99+" : String(pin.count));
       badge.append(dot);
       badge.addEventListener("click", (event) => {
         event.preventDefault();

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.22.0",
+  "version": "1.22.1",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.22.0",
+    "version": "1.22.1",
     "branch": "HEAD",
-    "commit": "06e25b3341d1e79f6171365410c49bee41b1f3e0",
-    "builtAt": "2026-10-30T20:22:33.673Z"
+    "commit": "073dd1a46fae9bca92aae68286e667ef84854658",
+    "builtAt": "2026-10-30T20:41:52.402Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",