@replohq/sandbox-runtime 1.19.0 → 1.19.2

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.19.0",
+  "version": "1.19.2",
   "branch": "HEAD",
-  "commit": "1aa1f09e1dd141b243b7bb3b1ff1bc947fa01371",
-  "builtAt": "2026-10-23T05:44:42.441Z"
+  "commit": "cdc23a21d2f115a5a458a13a97942dac138e692d",
+  "builtAt": "2026-10-24T17:26:05.661Z"
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.19.0",
+  "version": "1.19.2",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.19.0",
+    "version": "1.19.2",
     "branch": "HEAD",
-    "commit": "1aa1f09e1dd141b243b7bb3b1ff1bc947fa01371",
-    "builtAt": "2026-10-23T05:44:42.441Z"
+    "commit": "cdc23a21d2f115a5a458a13a97942dac138e692d",
+    "builtAt": "2026-10-24T17:26:05.661Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",

package/previewHealth.d.ts

@@ -19,6 +19,13 @@ declare global {
         __reploPreviewHealthMonitor?: PreviewHealthMonitor;
     }
 }
+/**
+ * Next's error dialog locks the body's scroll while it's open, and the
+ * stylesheet above hides that dialog, so the page would stop scrolling for no
+ * visible reason. Only a lock taken while the dialog is mounted is released;
+ * a site's own lock (a mobile menu, a modal) is left alone.
+ */
+export declare function releaseNextOverlayScrollLock(): () => void;
 /** The document's preview health actions; null outside an embedded preview. */
 export declare function getPreviewHealthActions(): PreviewHealthActions | null;
 export declare function resetPreviewHealthMonitorForTests(): void;

package/previewHealth.js

@@ -294,6 +294,7 @@ function createPreviewHealthMonitor() {
   overlayStyle.dataset.reploPreviewHealth = "";
   overlayStyle.textContent = "nextjs-portal{display:none!important}";
   document.head.append(overlayStyle);
+  const stopScrollLockRelease = releaseNextOverlayScrollLock();
   const stopBuildStatus = subscribeToBuildStatus({
     onBuildErrors: actions.buildErrorsChanged
   });
@@ -303,6 +304,7 @@ function createPreviewHealthMonitor() {
       unsubscribe();
       stopBuildStatus();
       overlayStyle.remove();
+      stopScrollLockRelease();
       cancelPendingRecovery();
       if (window.__reploNextErrorFeed?.listener === handleNextError) {
         window.__reploNextErrorFeed.listener = null;
@@ -310,6 +312,34 @@ function createPreviewHealthMonitor() {
     }
   };
 }
+function releaseNextOverlayScrollLock() {
+  const release = () => {
+    const portal = document.querySelector("nextjs-portal");
+    const isDialogOpen = Boolean(
+      portal?.shadowRoot?.querySelector("[data-nextjs-dialog-overlay]")
+    );
+    if (isDialogOpen && document.body.style.overflow === "hidden") {
+      document.body.style.overflow = "";
+    }
+  };
+  const observer = new MutationObserver(release);
+  const observe = () => {
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["style"]
+    });
+    release();
+  };
+  if (document.body) {
+    observe();
+  } else {
+    document.addEventListener("DOMContentLoaded", observe, { once: true });
+  }
+  return () => {
+    observer.disconnect();
+    document.removeEventListener("DOMContentLoaded", observe);
+  };
+}
 function openSocket(url) {
   return new Promise((resolve) => {
     const socket = new window.WebSocket(url);
@@ -427,5 +457,6 @@ if (typeof window !== "undefined" && process.env.NODE_ENV !== "production") {
 }
 export {
   getPreviewHealthActions,
+  releaseNextOverlayScrollLock,
   resetPreviewHealthMonitorForTests
 };

package/select-mode/EditorSelection.js

@@ -7,6 +7,10 @@ import { useParentMessaging } from "./hooks/useParentMessaging";
 import { useSelectionHover } from "./hooks/useSelectionHover";
 import { useSelectionInteractions } from "./hooks/useSelectionInteractions";
 import { useSelectionScrollSync } from "./hooks/useSelectionScrollSync";
+import {
+  FRAME_SHIELD_ATTRIBUTE,
+  FRAME_SHIELD_CSS
+} from "./interactions/embeddedFrames";
 import { PREVIEW_RENDERED_EVENT } from "./previewRendered";
 import { SectionCanvas } from "./section-canvas/SectionCanvas";
 import { sectionCanvasStore } from "./section-canvas/sectionCanvasStore";
@@ -154,6 +158,7 @@ function EditorSelection() {
             [data-select-mode-inline-editor][contenteditable="true"],
             [data-select-mode-inline-editor][contenteditable="true"] * { cursor: text !important; }
           ` }),
+    displayMode === "selection" && /* @__PURE__ */ jsx("style", { ...{ [FRAME_SHIELD_ATTRIBUTE]: "" }, children: FRAME_SHIELD_CSS }),
     /* @__PURE__ */ jsx(SelectionFrames, {}),
     /* @__PURE__ */ jsx(SectionCanvas, {})
   ] });

package/select-mode/hooks/useSelectionHover.js

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { getNearestSelectableElement } from "../descriptor/elementDescriptor";
 import { getWebsiteBuilderRpc } from "../iframeRpcChannel";
+import { getSelectionTargetForEmbeddedFrameHit } from "../interactions/embeddedFrames";
 import {
   CONTAINER_TAGS,
   findContainingSection
@@ -49,10 +50,15 @@ function useSelectionHover() {
       if (pointerClientPosition) {
         const isPointerWithinViewport = pointerClientPosition.x >= 0 && pointerClientPosition.y >= 0 && pointerClientPosition.x <= window.innerWidth && pointerClientPosition.y <= window.innerHeight;
         if (isPointerWithinViewport) {
-          hoveredElement = document.elementFromPoint(
+          const elementAtPoint = document.elementFromPoint(
             pointerClientPosition.x,
             pointerClientPosition.y
           );
+          hoveredElement = elementAtPoint && getSelectionTargetForEmbeddedFrameHit({
+            hitElement: elementAtPoint,
+            clientX: pointerClientPosition.x,
+            clientY: pointerClientPosition.y
+          });
         }
       }
       if (!hoveredElement) {

package/select-mode/hooks/useSelectionInteractions.js

@@ -4,6 +4,7 @@ import {
   getNearestSelectableElement
 } from "../descriptor/elementDescriptor";
 import { getWebsiteBuilderRpc } from "../iframeRpcChannel";
+import { getSelectionTargetForEmbeddedFrameHit } from "../interactions/embeddedFrames";
 import { findContainingSection } from "../interactions/sectionGeometry";
 import {
   collectDragCandidates,
@@ -402,7 +403,11 @@ function useSelectionInteractions() {
           return;
         }
         commitClickSelection({
-          targetElement,
+          targetElement: getSelectionTargetForEmbeddedFrameHit({
+            hitElement: targetElement,
+            clientX: event.clientX,
+            clientY: event.clientY
+          }),
           pointerEvent: event,
           candidates
         });

package/select-mode/interactions/embeddedFrames.d.ts

@@ -0,0 +1,17 @@
+export declare const FRAME_SHIELD_ATTRIBUTE = "data-select-mode-frame-shield";
+export declare const FRAME_SHIELD_CSS = "iframe { pointer-events: none !important; }";
+/**
+ * Select mode shields iframes from the pointer so presses over an embed reach
+ * this document instead of the embed's own (often cross-origin) one. The hit
+ * element is then whatever sits behind the frame, so lift the shield for one
+ * native hit test to find the frame the user actually pointed at. A frame
+ * injected as raw HTML has no React source, so prefer its nearest
+ * React-rendered ancestor, which the agent can edit. React 19 renders <body>
+ * too, so stop below it: a widget script appends its frame straight to the
+ * body, and selecting the frame beats selecting the whole page.
+ */
+export declare function getSelectionTargetForEmbeddedFrameHit({ hitElement, clientX, clientY, }: {
+    hitElement: Element;
+    clientX: number;
+    clientY: number;
+}): Element;

package/select-mode/interactions/embeddedFrames.js

@@ -0,0 +1,32 @@
+import { getFiberFromElement } from "../fiber";
+const FRAME_SHIELD_ATTRIBUTE = "data-select-mode-frame-shield";
+const FRAME_SHIELD_CSS = "iframe { pointer-events: none !important; }";
+function getSelectionTargetForEmbeddedFrameHit({
+  hitElement,
+  clientX,
+  clientY
+}) {
+  const shield = document.querySelector(
+    `style[${FRAME_SHIELD_ATTRIBUTE}]`
+  )?.sheet;
+  if (!shield || document.getElementsByTagName("iframe").length === 0) {
+    return hitElement;
+  }
+  shield.disabled = true;
+  const frame = document.elementFromPoint(clientX, clientY);
+  shield.disabled = false;
+  if (!(frame instanceof HTMLIFrameElement)) {
+    return hitElement;
+  }
+  for (let candidate = frame; candidate && candidate !== document.body; candidate = candidate.parentElement) {
+    if (getFiberFromElement(candidate)) {
+      return candidate;
+    }
+  }
+  return frame;
+}
+export {
+  FRAME_SHIELD_ATTRIBUTE,
+  FRAME_SHIELD_CSS,
+  getSelectionTargetForEmbeddedFrameHit
+};