@replohq/sandbox-runtime 1.6.5 → 1.6.6

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "branch": "HEAD",
-  "commit": "5d112aef8f978ceb8157400597f494b241e6ac1c",
-  "builtAt": "2026-09-12T01:09:48.099Z"
+  "commit": "0a9a7d328a712b8935e4b6a199689919c3ec4392",
+  "builtAt": "2026-09-13T12:48:42.823Z"
 };

package/chunk-RXYLMSNM.mjs

@@ -0,0 +1,134 @@
+// ../replo-utils/lib/viewportSnapshot.ts
+var VIEWPORT_SNAPSHOT_REQUEST = "replo:viewport-snapshot:request";
+var VIEWPORT_SNAPSHOT_RESPONSE = "replo:viewport-snapshot:response";
+var VIEWPORT_SNAPSHOT_MAX_DEPTH = 2;
+function isTrustedViewportSnapshotRequester(origin) {
+  let hostname;
+  try {
+    hostname = new URL(origin).hostname;
+  } catch {
+    return false;
+  }
+  if (hostname === "replo.app" || hostname.endsWith(".replo.app")) {
+    return true;
+  }
+  if (process.env.NODE_ENV === "production") {
+    return false;
+  }
+  return hostname === "localhost" || hostname === "127.0.0.1" || hostname.endsWith(".ngrok.app");
+}
+function canReceiveMessages(value) {
+  return typeof value === "object" && value !== null && "postMessage" in value && typeof value.postMessage === "function";
+}
+function isResponseMessage(data) {
+  return typeof data === "object" && data !== null && "type" in data && data.type === VIEWPORT_SNAPSHOT_RESPONSE && "requestId" in data && typeof data.requestId === "string" && "frameIndex" in data && typeof data.frameIndex === "number";
+}
+function isRequestMessage(data) {
+  return typeof data === "object" && data !== null && "type" in data && data.type === VIEWPORT_SNAPSHOT_REQUEST && "requestId" in data && typeof data.requestId === "string" && "frameIndex" in data && typeof data.frameIndex === "number" && "remainingDepth" in data && typeof data.remainingDepth === "number";
+}
+function requestChildViewportSnapshots({
+  targetWindow,
+  requestId,
+  timeoutMs,
+  remainingDepth = VIEWPORT_SNAPSHOT_MAX_DEPTH
+}) {
+  const frameCount = targetWindow.frames.length;
+  if (frameCount === 0 || remainingDepth <= 0) {
+    return Promise.resolve([]);
+  }
+  return new Promise((resolve) => {
+    const collected = /* @__PURE__ */ new Map();
+    const settle = () => {
+      targetWindow.removeEventListener("message", onMessage);
+      targetWindow.clearTimeout(timeoutId);
+      resolve(
+        [...collected.entries()].map(([frameIndex, capture]) => ({ frameIndex, capture })).sort((first, second) => {
+          return first.frameIndex - second.frameIndex;
+        })
+      );
+    };
+    const onMessage = (event) => {
+      if (!isResponseMessage(event.data) || event.data.requestId !== requestId || // A frame may only answer for its own slot — anything else could
+      // overwrite a sibling's capture or force an early settle.
+      event.source !== targetWindow.frames[event.data.frameIndex]) {
+        return;
+      }
+      if (event.data.capture !== null) {
+        collected.set(event.data.frameIndex, event.data.capture);
+      }
+      if (collected.size === frameCount) {
+        settle();
+      }
+    };
+    targetWindow.addEventListener("message", onMessage);
+    const timeoutId = targetWindow.setTimeout(settle, timeoutMs);
+    for (let frameIndex = 0; frameIndex < frameCount; frameIndex++) {
+      const message = {
+        type: VIEWPORT_SNAPSHOT_REQUEST,
+        requestId,
+        frameIndex,
+        remainingDepth
+      };
+      targetWindow.frames[frameIndex]?.postMessage(message, "*");
+    }
+  });
+}
+function startViewportSnapshotResponder({
+  targetWindow,
+  takeSnapshot,
+  measureFrameRect,
+  isTrustedRequester = isTrustedViewportSnapshotRequester,
+  cascadeTimeoutMs = 1500
+}) {
+  if (targetWindow.parent === targetWindow) {
+    return () => {
+    };
+  }
+  const onMessage = (event) => {
+    if (!isRequestMessage(event.data) || event.source !== targetWindow.parent || !canReceiveMessages(event.source) || !isTrustedRequester(event.origin ?? "")) {
+      return;
+    }
+    const { requestId, frameIndex, remainingDepth } = event.data;
+    const requester = event.source;
+    const requesterOrigin = event.origin ?? "*";
+    const respond = (capture) => {
+      const response = {
+        type: VIEWPORT_SNAPSHOT_RESPONSE,
+        requestId,
+        frameIndex,
+        capture
+      };
+      requester.postMessage(response, requesterOrigin);
+    };
+    let snapshot = null;
+    try {
+      snapshot = takeSnapshot();
+    } catch {
+    }
+    if (snapshot === null) {
+      respond(null);
+      return;
+    }
+    void requestChildViewportSnapshots({
+      targetWindow,
+      // Derived per level so a child's own fan-out can't collide with ours.
+      requestId: `${requestId}:${frameIndex}`,
+      timeoutMs: cascadeTimeoutMs,
+      remainingDepth: remainingDepth - 1
+    }).then((childCaptures) => {
+      respond({
+        snapshot,
+        childFrames: childCaptures.flatMap((child) => {
+          const rect = measureFrameRect(child.frameIndex);
+          return rect ? [{ frameIndex: child.frameIndex, rect, capture: child.capture }] : [];
+        })
+      });
+    });
+  };
+  targetWindow.addEventListener("message", onMessage);
+  return () => {
+    return targetWindow.removeEventListener("message", onMessage);
+  };
+}
+
+export { VIEWPORT_SNAPSHOT_MAX_DEPTH, VIEWPORT_SNAPSHOT_REQUEST, VIEWPORT_SNAPSHOT_RESPONSE, isTrustedViewportSnapshotRequester, requestChildViewportSnapshots, startViewportSnapshotResponder };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.6.5",
+    "version": "1.6.6",
     "branch": "HEAD",
-    "commit": "5d112aef8f978ceb8157400597f494b241e6ac1c",
-    "builtAt": "2026-09-12T01:09:48.099Z"
+    "commit": "0a9a7d328a712b8935e4b6a199689919c3ec4392",
+    "builtAt": "2026-09-13T12:48:42.823Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",

package/sandbox-runtime.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useViewportSnapshotResponder } from "./_vendor/replo-utils/react/use-viewport-snapshot-responder.mjs";
 import { AnnotationLayerMount } from "./annotations/AnnotationLayerMount";
 import { ClientErrorBoundary } from "./ClientErrorBoundary";
 import { DesignLibraryPreview } from "./design-library-preview/DesignLibraryPreview";
@@ -9,6 +10,10 @@ import { NavigationReceiver } from "./NavigationReceiver";
 import { NextErrorReporter } from "./NextErrorReporter";
 import PostHogRelay from "./posthog-relay";
 import { EditorSelection } from "./select-mode/EditorSelection";
+function ViewportSnapshotResponder() {
+  useViewportSnapshotResponder();
+  return null;
+}
 function SandboxRuntime({ children }) {
   const isDevServer = process.env.NODE_ENV === "development";
   return isDevServer ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -18,6 +23,7 @@ function SandboxRuntime({ children }) {
       /* @__PURE__ */ jsx(LinkInterceptor, {}),
       /* @__PURE__ */ jsx(NavigationReceiver, {}),
       /* @__PURE__ */ jsx(PostHogRelay, {}),
+      /* @__PURE__ */ jsx(ViewportSnapshotResponder, {}),
       /* @__PURE__ */ jsx(EditorSelection, {}),
       /* @__PURE__ */ jsx(AnnotationLayerMount, {}),
       /* @__PURE__ */ jsx(DesignLibraryPreview, {}),

package/sandbox-runtime.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../sandbox-runtime.tsx"],
-  "sourcesContent": ["\"use client\";\n\nimport { AnnotationLayerMount } from \"./annotations/AnnotationLayerMount\";\nimport { ClientErrorBoundary } from \"./ClientErrorBoundary\";\nimport { DesignLibraryPreview } from \"./design-library-preview/DesignLibraryPreview\";\nimport { DocumentReadyBeacon } from \"./DocumentReadyBeacon\";\nimport LinkInterceptor from \"./LinkInterceptor\";\nimport { NavigationReceiver } from \"./NavigationReceiver\";\nimport { NextErrorReporter } from \"./NextErrorReporter\";\nimport PostHogRelay from \"./posthog-relay\";\nimport { EditorSelection } from \"./select-mode/EditorSelection\";\n\nexport function SandboxRuntime({ children }: React.PropsWithChildren) {\n  // The editor only embeds dev servers (`next dev`), so editor-integration components render there only \u2014 production builds ship none of them and behave like plain Next apps.\n  const isDevServer = process.env.NODE_ENV === \"development\";\n\n  return isDevServer ? (\n    <>\n      <DocumentReadyBeacon />\n      {/* NOTE (Max, 2026-06-08): Outside ClientErrorBoundary on purpose \u2014 when\n          the boundary catches a runtime error it swaps its children for a\n          neutral cover, which would unmount the reporter and freeze it in the\n          error state. It must stay mounted to observe Next's overlay across\n          error <-> recover. */}\n      <NextErrorReporter />\n      <ClientErrorBoundary>\n        <LinkInterceptor />\n        <NavigationReceiver />\n        <PostHogRelay />\n        <EditorSelection />\n        <AnnotationLayerMount />\n        <DesignLibraryPreview />\n        {children}\n      </ClientErrorBoundary>\n    </>\n  ) : (\n    children\n  );\n}\n"],
-  "mappings": ";AAiBI,mBACE,KAOA,YARF;AAfJ,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,OAAO,kBAAkB;AACzB,SAAS,uBAAuB;AAEzB,SAAS,eAAe,EAAE,SAAS,GAA4B;AAEpE,QAAM,cAAc,QAAQ,IAAI,aAAa;AAE7C,SAAO,cACL,iCACE;AAAA,wBAAC,uBAAoB;AAAA,IAMrB,oBAAC,qBAAkB;AAAA,IACnB,qBAAC,uBACC;AAAA,0BAAC,mBAAgB;AAAA,MACjB,oBAAC,sBAAmB;AAAA,MACpB,oBAAC,gBAAa;AAAA,MACd,oBAAC,mBAAgB;AAAA,MACjB,oBAAC,wBAAqB;AAAA,MACtB,oBAAC,wBAAqB;AAAA,MACrB;AAAA,OACH;AAAA,KACF,IAEA;AAEJ;",
+  "sourcesContent": ["\"use client\";\n\nimport { useViewportSnapshotResponder } from \"replo-utils/react/use-viewport-snapshot-responder\";\n\nimport { AnnotationLayerMount } from \"./annotations/AnnotationLayerMount\";\nimport { ClientErrorBoundary } from \"./ClientErrorBoundary\";\nimport { DesignLibraryPreview } from \"./design-library-preview/DesignLibraryPreview\";\nimport { DocumentReadyBeacon } from \"./DocumentReadyBeacon\";\nimport LinkInterceptor from \"./LinkInterceptor\";\nimport { NavigationReceiver } from \"./NavigationReceiver\";\nimport { NextErrorReporter } from \"./NextErrorReporter\";\nimport PostHogRelay from \"./posthog-relay\";\nimport { EditorSelection } from \"./select-mode/EditorSelection\";\n\nfunction ViewportSnapshotResponder() {\n  useViewportSnapshotResponder();\n  return null;\n}\n\nexport function SandboxRuntime({ children }: React.PropsWithChildren) {\n  // The editor only embeds dev servers (`next dev`), so editor-integration components render there only \u2014 production builds ship none of them and behave like plain Next apps.\n  const isDevServer = process.env.NODE_ENV === \"development\";\n\n  return isDevServer ? (\n    <>\n      <DocumentReadyBeacon />\n      {/* NOTE (Max, 2026-06-08): Outside ClientErrorBoundary on purpose \u2014 when\n          the boundary catches a runtime error it swaps its children for a\n          neutral cover, which would unmount the reporter and freeze it in the\n          error state. It must stay mounted to observe Next's overlay across\n          error <-> recover. */}\n      <NextErrorReporter />\n      <ClientErrorBoundary>\n        <LinkInterceptor />\n        <NavigationReceiver />\n        <PostHogRelay />\n        <ViewportSnapshotResponder />\n        <EditorSelection />\n        <AnnotationLayerMount />\n        <DesignLibraryPreview />\n        {children}\n      </ClientErrorBoundary>\n    </>\n  ) : (\n    children\n  );\n}\n"],
+  "mappings": ";AAwBI,mBACE,KAOA,YARF;AAtBJ,SAAS,oCAAoC;AAE7C,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,OAAO,kBAAkB;AACzB,SAAS,uBAAuB;AAEhC,SAAS,4BAA4B;AACnC,+BAA6B;AAC7B,SAAO;AACT;AAEO,SAAS,eAAe,EAAE,SAAS,GAA4B;AAEpE,QAAM,cAAc,QAAQ,IAAI,aAAa;AAE7C,SAAO,cACL,iCACE;AAAA,wBAAC,uBAAoB;AAAA,IAMrB,oBAAC,qBAAkB;AAAA,IACnB,qBAAC,uBACC;AAAA,0BAAC,mBAAgB;AAAA,MACjB,oBAAC,sBAAmB;AAAA,MACpB,oBAAC,gBAAa;AAAA,MACd,oBAAC,6BAA0B;AAAA,MAC3B,oBAAC,mBAAgB;AAAA,MACjB,oBAAC,wBAAqB;AAAA,MACtB,oBAAC,wBAAqB;AAAA,MACrB;AAAA,OACH;AAAA,KACF,IAEA;AAEJ;",
   "names": []
 }