@replohq/sandbox-runtime 1.7.5 → 1.7.7

package/ClientErrorBoundary.d.ts

@@ -7,4 +7,6 @@ import * as React from "react";
  * vs. an actionable error screen); the embedder reloads the iframe once the error
  * clears.
  */
-export declare function ClientErrorBoundary({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function ClientErrorBoundary({ children, resetKey, }: React.PropsWithChildren<{
+    resetKey: React.ReactNode;
+}>): import("react/jsx-runtime").JSX.Element;

package/ClientErrorBoundary.js

@@ -11,6 +11,11 @@ class ErrorBoundary extends React.Component {
   componentDidCatch(error, info) {
     this.props.onError?.(error, info);
   }
+  componentDidUpdate(previousProps, previousState) {
+    if (this.state.didCatch && previousState.didCatch && !Object.is(previousProps.resetKey, this.props.resetKey)) {
+      this.setState({ didCatch: false });
+    }
+  }
   render() {
     if (this.state.didCatch) {
       return /* @__PURE__ */ jsx(
@@ -28,7 +33,10 @@ class ErrorBoundary extends React.Component {
     return this.props.children;
   }
 }
-function ClientErrorBoundary({ children }) {
+function ClientErrorBoundary({
+  children,
+  resetKey
+}) {
   const handleError = React.useCallback(
     (error, errorInfo) => {
       const errorObj = error instanceof Error ? error : new Error(String(error));
@@ -49,7 +57,7 @@ function ClientErrorBoundary({ children }) {
     },
     []
   );
-  return /* @__PURE__ */ jsx(ErrorBoundary, { onError: handleError, children });
+  return /* @__PURE__ */ jsx(ErrorBoundary, { onError: handleError, resetKey, children });
 }
 export {
   ClientErrorBoundary

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "branch": "HEAD",
-  "commit": "dadbeffde02243998e85250ba4b2a21565c0b804",
-  "builtAt": "2026-09-17T18:17:52.737Z"
+  "commit": "480d34ab39b9a190492b6d1280cc9a8d9a89e2ab",
+  "builtAt": "2026-09-18T21:38:59.533Z"
 };

package/next/component-preview-client.js

@@ -14,6 +14,7 @@ import {
   createIframeRpcChannel,
   createIframeRpcRemote
 } from "../_vendor/schemas/iframeRpcChannel.mjs";
+import { PREVIEW_RENDERED_EVENT } from "../select-mode/previewRendered";
 import { getComponentPreviewHref } from "./component-preview-href";
 import {
   mergeClientProps,
@@ -38,6 +39,7 @@ function getCurrentHref() {
 function useComponentPreviewChannel(onSetProps) {
   const onSetPropsRef = useRef(onSetProps);
   onSetPropsRef.current = onSetProps;
+  const pendingUpdates = useRef(Promise.resolve());
   useIframeRpcChannel(
     useMemo(() => {
       if (typeof window === "undefined") {
@@ -61,7 +63,20 @@ function useComponentPreviewChannel(onSetProps) {
         outgoingMethods: componentPreviewToWebsiteBuilderMethodConfig,
         incomingMethods: websiteBuilderToComponentPreviewMethodConfig,
         handlers: {
-          setProps: (input) => onSetPropsRef.current(input)
+          setProps: (input) => {
+            const result = pendingUpdates.current.then(async () => {
+              const result2 = await onSetPropsRef.current(input);
+              window.dispatchEvent(new Event(PREVIEW_RENDERED_EVENT));
+              return result2;
+            });
+            pendingUpdates.current = result.then(
+              () => {
+              },
+              () => {
+              }
+            );
+            return result;
+          }
         }
       });
       return {
@@ -109,30 +124,28 @@ function useComponentPreviewChannel(onSetProps) {
     }, [])
   );
 }
-function useNavigateAndSettle() {
-  const router = useRouter();
-  const [isNavigationPending, startNavigation] = useTransition();
+function useCommitPreviewUpdate() {
+  const [isUpdatePending, startUpdate] = useTransition();
   const settleResolvers = useRef([]);
   useEffect(() => {
-    if (!isNavigationPending) {
+    if (!isUpdatePending) {
       const resolvers = settleResolvers.current;
       settleResolvers.current = [];
       for (const resolve of resolvers) {
         resolve();
       }
     }
-  }, [isNavigationPending]);
-  return (href) => {
+  }, [isUpdatePending]);
+  return (update) => {
     return new Promise((resolve) => {
       settleResolvers.current.push(resolve);
-      startNavigation(() => {
-        router.replace(href, { scroll: false });
-      });
+      startUpdate(update);
     });
   };
 }
 function ComponentPreviewNavigation() {
-  const navigateAndSettle = useNavigateAndSettle();
+  const router = useRouter();
+  const commitPreviewUpdate = useCommitPreviewUpdate();
   useComponentPreviewChannel(
     async ({ props, sourceRevision }) => {
       const nextHref = getComponentPreviewHref({
@@ -143,7 +156,9 @@ function ComponentPreviewNavigation() {
       if (nextHref === getCurrentHref()) {
         return { mode: "unchanged" };
       }
-      await navigateAndSettle(nextHref);
+      await commitPreviewUpdate(() => {
+        return router.replace(nextHref, { scroll: false });
+      });
       return { mode: "navigation" };
     }
   );
@@ -165,7 +180,8 @@ function ComponentPreviewStage({
   propsRef.current = props;
   const lastRawPropsRef = useRef(initialRawProps);
   const lastSourceRevisionRef = useRef(initialSourceRevision);
-  const navigateAndSettle = useNavigateAndSettle();
+  const router = useRouter();
+  const commitPreviewUpdate = useCommitPreviewUpdate();
   useComponentPreviewChannel(
     async ({
       props: nextRawProps,
@@ -183,17 +199,21 @@ function ComponentPreviewStage({
         previous: lastRawPropsRef.current,
         next: nextRawProps
       })) {
-        await navigateAndSettle(nextHref);
+        await commitPreviewUpdate(() => {
+          return router.replace(nextHref, { scroll: false });
+        });
         lastRawPropsRef.current = nextRawProps;
         lastSourceRevisionRef.current = sourceRevision;
         return { mode: "navigation" };
       }
-      setProps(
-        mergeClientProps({
-          currentResolved: propsRef.current,
-          nextRaw: nextRawProps
-        })
-      );
+      await commitPreviewUpdate(() => {
+        return setProps(
+          mergeClientProps({
+            currentResolved: propsRef.current,
+            nextRaw: nextRawProps
+          })
+        );
+      });
       lastRawPropsRef.current = nextRawProps;
       window.history.replaceState(null, "", nextHref);
       return { mode: "client" };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.7.5",
+    "version": "1.7.7",
     "branch": "HEAD",
-    "commit": "dadbeffde02243998e85250ba4b2a21565c0b804",
-    "builtAt": "2026-09-17T18:17:52.737Z"
+    "commit": "480d34ab39b9a190492b6d1280cc9a8d9a89e2ab",
+    "builtAt": "2026-09-18T21:38:59.533Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",

package/sandbox-runtime.js

@@ -19,7 +19,7 @@ function SandboxRuntime({ children }) {
   return isDevServer ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(DocumentReadyBeacon, {}),
     /* @__PURE__ */ jsx(NextErrorReporter, {}),
-    /* @__PURE__ */ jsxs(ClientErrorBoundary, { children: [
+    /* @__PURE__ */ jsxs(ClientErrorBoundary, { resetKey: children, children: [
       /* @__PURE__ */ jsx(LinkInterceptor, {}),
       /* @__PURE__ */ jsx(NavigationReceiver, {}),
       /* @__PURE__ */ jsx(PostHogRelay, {}),

package/select-mode/EditorSelection.js

@@ -15,7 +15,10 @@ import { useSelectionScrollSync } from "./hooks/useSelectionScrollSync";
 import { useSelectModeController } from "./hooks/useSelectModeController";
 import { getRepetitionSiblingElements } from "./hooks/useSiblingResolution";
 import { getWebsiteBuilderRpc } from "./iframeRpcChannel";
-import { isSelectionStillCurrent } from "./selectionPublish";
+import { getDocumentScrollOffset } from "./interactions/selectionGeometry";
+import { PREVIEW_RENDERED_EVENT } from "./previewRendered";
+import { showElementSelectionFrames } from "./selectionFrame";
+import { getConnectedSelectedElement } from "./selectModeSession";
 import { symbolicateSelectedElement } from "./symbolicate";
 function EditorSelection() {
   const {
@@ -40,9 +43,13 @@ function EditorSelection() {
     if (session.type !== "element") {
       return;
     }
-    const selectedElement = session.data.kind === "react-element" ? document.querySelector(session.data.selector) : null;
-    const element = selectedElement ?? session.element;
-    if (!(element instanceof Element) || !element.isConnected) {
+    const element = getConnectedSelectedElement(session);
+    if (!element) {
+      setSelectionType({ selectionType: "none" });
+      getWebsiteBuilderRpc()?.areaSelected({
+        rect: session.data.rect,
+        items: []
+      });
       return;
     }
     const siblingElements = getRepetitionSiblingElements({ element });
@@ -54,22 +61,24 @@ function EditorSelection() {
     if (descriptor.kind !== "react-element") {
       return;
     }
-    interactionSessionRef.current = {
+    const refreshedSession = {
       ...session,
       element,
       siblingElements,
       data: descriptor
     };
+    interactionSessionRef.current = refreshedSession;
+    showElementSelectionFrames({
+      elements: [element, ...siblingElements],
+      scrollOffset: getDocumentScrollOffset()
+    });
     void symbolicateSelectedElement(descriptor).then((symbolicated) => {
-      if (!isSelectionStillCurrent({
-        session: interactionSessionRef.current,
-        selection: { type: "element", element }
-      })) {
+      if (interactionSessionRef.current !== refreshedSession) {
         return;
       }
       getWebsiteBuilderRpc()?.elementSelected({ data: symbolicated });
     });
-  }, [interactionSessionRef]);
+  }, [interactionSessionRef, setSelectionType]);
   useEffect(() => {
     installFastRefreshRelay({
       onComplete: () => {
@@ -77,6 +86,17 @@ function EditorSelection() {
         postSelectedElementSnapshot();
       }
     });
+    window.addEventListener(
+      PREVIEW_RENDERED_EVENT,
+      postSelectedElementSnapshot
+    );
+    return () => {
+      window.removeEventListener(
+        PREVIEW_RENDERED_EVENT,
+        postSelectedElementSnapshot
+      );
+      installFastRefreshRelay();
+    };
   }, [editingElementRef, postSelectedElementSnapshot, reapplyOverrides]);
   useParentMessaging({
     applyOptimisticUpdate,

package/select-mode/previewRendered.d.ts

@@ -0,0 +1 @@
+export declare const PREVIEW_RENDERED_EVENT = "replo:preview-rendered";

package/select-mode/previewRendered.js

@@ -0,0 +1,4 @@
+const PREVIEW_RENDERED_EVENT = "replo:preview-rendered";
+export {
+  PREVIEW_RENDERED_EVENT
+};