@replohq/sandbox-runtime 1.7.4 → 1.7.6

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.7.4",
+  "version": "1.7.6",
   "branch": "HEAD",
-  "commit": "f6125c1834fe26cb6f884cdff75da5f5788f3ca8",
-  "builtAt": "2026-09-17T01:40:15.017Z"
+  "commit": "eebf20f7ddeeb977a292b14a7abe974b07255b14",
+  "builtAt": "2026-09-18T20:52:15.073Z"
 };

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.4",
+  "version": "1.7.6",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.7.4",
+    "version": "1.7.6",
     "branch": "HEAD",
-    "commit": "f6125c1834fe26cb6f884cdff75da5f5788f3ca8",
-    "builtAt": "2026-09-17T01:40:15.017Z"
+    "commit": "eebf20f7ddeeb977a292b14a7abe974b07255b14",
+    "builtAt": "2026-09-18T20:52:15.073Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",

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/fast-refresh-relay.js

@@ -1,4 +1,5 @@
 import { getWebsiteBuilderRpc } from "./iframeRpcChannel";
+import { invalidateSymbolicationCache } from "./symbolicate";
 let hasInstalledFastRefreshRelay = false;
 let onFastRefreshComplete = null;
 function installFastRefreshRelay({
@@ -13,6 +14,9 @@ function installFastRefreshRelay({
   const originalInfo = console.info;
   const relayIfFastRefreshComplete = (...args) => {
     const message = args.join(" ");
+    if (message.includes("[Fast Refresh] rebuilding") || message.includes("[Fast Refresh] done")) {
+      invalidateSymbolicationCache();
+    }
     if (message.includes("[Fast Refresh] done")) {
       getWebsiteBuilderRpc()?.fastRefreshComplete(void 0);
       onFastRefreshComplete?.();

package/select-mode/hooks/useSelectionInteractions.js

@@ -308,7 +308,9 @@ function useSelectionInteractions({
         data
       };
       void maybeSymbolicate(data).then((symbolicated) => {
-        if (!isSelectionStillCurrent({
+        const session = interactionSessionRef.current;
+        const isPendingClickOnSelection = session.type === "drag" && !session.hasExceededThreshold && committedSelectionAtPointerDown.length === 1 && committedSelectionAtPointerDown[0] === selectionElement;
+        if (!isPendingClickOnSelection && !isSelectionStillCurrent({
           session: interactionSessionRef.current,
           selection: { type: "element", element: selectionElement }
         })) {

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

package/select-mode/symbolicate.d.ts

@@ -1,2 +1,3 @@
 import type { SelectedElement } from "../_vendor/schemas/generated/selectMode";
+export declare function invalidateSymbolicationCache(): void;
 export declare function symbolicateSelectedElement(selectedElement: SelectedElement): Promise<SelectedElement>;

package/select-mode/symbolicate.js

@@ -66,7 +66,46 @@ function extractResolvedFrame(entry) {
   }
   return entry.value?.originalStackFrame ?? null;
 }
-async function postFrames({
+const MAX_SYMBOLICATION_CACHE_ENTRIES = 128;
+const symbolications = /* @__PURE__ */ new Map();
+let symbolicationRevision = 0;
+function invalidateSymbolicationCache() {
+  symbolications.clear();
+  symbolicationRevision += 1;
+}
+async function postFrames(request) {
+  if (request.frames.length === 0) {
+    return [];
+  }
+  const key = JSON.stringify(request);
+  const cached = symbolications.get(key);
+  if (cached) {
+    return cached;
+  }
+  const revision = symbolicationRevision;
+  const promise = fetchFrames(request).then((results) => {
+    if (revision !== symbolicationRevision) {
+      return request.frames.map(() => null);
+    }
+    const hasUnresolvedFrames = results.length !== request.frames.length || results.some((result, index) => {
+      const frame = extractResolvedFrame(result);
+      return !frame?.file || frame.file === request.frames[index]?.file;
+    });
+    if (hasUnresolvedFrames && symbolications.get(key) === promise) {
+      symbolications.delete(key);
+    }
+    return results;
+  });
+  if (symbolications.size >= MAX_SYMBOLICATION_CACHE_ENTRIES) {
+    const oldestKey = symbolications.keys().next().value;
+    if (oldestKey !== void 0) {
+      symbolications.delete(oldestKey);
+    }
+  }
+  symbolications.set(key, promise);
+  return promise;
+}
+async function fetchFrames({
   frames,
   isServer
 }) {
@@ -195,5 +234,6 @@ async function symbolicateSelectedElement(selectedElement) {
   };
 }
 export {
+  invalidateSymbolicationCache,
   symbolicateSelectedElement
 };