@replohq/sandbox-runtime 1.19.0 → 1.19.1

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.19.0",
+  "version": "1.19.1",
   "branch": "HEAD",
-  "commit": "1aa1f09e1dd141b243b7bb3b1ff1bc947fa01371",
-  "builtAt": "2026-10-23T05:44:42.441Z"
+  "commit": "0ccd8b79a0c0654b1b2e215b83c1efed676128fe",
+  "builtAt": "2026-10-24T00:25:38.939Z"
 };

package/package.json

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

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
+};