@replohq/sandbox-runtime 1.7.6 → 1.7.8

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/_vendor/schemas/componentPreview.mjs

@@ -6,6 +6,7 @@ var DATA_LOADER_KEYS = {
   SHOPIFY_COLLECTION_PRODUCTS: "shopify_storefront.collection_products",
   SHOPIFY_METAOBJECT: "shopify_storefront.metaobject",
   SHOPIFY_METAOBJECTS: "shopify_storefront.metaobjects",
+  SHOPIFY_KACHING_BUNDLES: "shopify_storefront.kaching_bundles",
   REPLO_PRODUCT: "replo_products.product",
   OKENDO_PRODUCT_REVIEWS: "okendo.product_reviews",
   OKENDO_PRODUCT_REVIEW_AGGREGATE: "okendo.product_review_aggregate",

package/_vendor/schemas/loaderKeys.d.ts

@@ -16,6 +16,7 @@ export declare const DATA_LOADER_KEYS: {
     readonly SHOPIFY_COLLECTION_PRODUCTS: "shopify_storefront.collection_products";
     readonly SHOPIFY_METAOBJECT: "shopify_storefront.metaobject";
     readonly SHOPIFY_METAOBJECTS: "shopify_storefront.metaobjects";
+    readonly SHOPIFY_KACHING_BUNDLES: "shopify_storefront.kaching_bundles";
     readonly REPLO_PRODUCT: "replo_products.product";
     readonly OKENDO_PRODUCT_REVIEWS: "okendo.product_reviews";
     readonly OKENDO_PRODUCT_REVIEW_AGGREGATE: "okendo.product_review_aggregate";
@@ -43,6 +44,7 @@ export declare const dataLoaderKeySchema: z.ZodEnum<{
     "shopify_storefront.collection_products": "shopify_storefront.collection_products";
     "shopify_storefront.metaobject": "shopify_storefront.metaobject";
     "shopify_storefront.metaobjects": "shopify_storefront.metaobjects";
+    "shopify_storefront.kaching_bundles": "shopify_storefront.kaching_bundles";
     "replo_products.product": "replo_products.product";
     "okendo.product_reviews": "okendo.product_reviews";
     "okendo.product_review_aggregate": "okendo.product_review_aggregate";

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "branch": "HEAD",
-  "commit": "eebf20f7ddeeb977a292b14a7abe974b07255b14",
-  "builtAt": "2026-09-18T20:52:15.073Z"
+  "commit": "3373cb130518e3250ca842e09a47b68ec42c48c0",
+  "builtAt": "2026-09-19T01:22:45.241Z"
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.7.6",
+    "version": "1.7.8",
     "branch": "HEAD",
-    "commit": "eebf20f7ddeeb977a292b14a7abe974b07255b14",
-    "builtAt": "2026-09-18T20:52:15.073Z"
+    "commit": "3373cb130518e3250ca842e09a47b68ec42c48c0",
+    "builtAt": "2026-09-19T01:22:45.241Z"
   },
   "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

@@ -19,7 +19,10 @@ import { getDocumentScrollOffset } from "./interactions/selectionGeometry";
 import { PREVIEW_RENDERED_EVENT } from "./previewRendered";
 import { showElementSelectionFrames } from "./selectionFrame";
 import { getConnectedSelectedElement } from "./selectModeSession";
-import { symbolicateSelectedElement } from "./symbolicate";
+import {
+  isUserSourceLocation,
+  symbolicateSelectedElement
+} from "./symbolicate";
 function EditorSelection() {
   const {
     displayMode,
@@ -38,66 +41,117 @@ function EditorSelection() {
     resolveSessionOverrides,
     revertOverride
   } = useOptimisticOverrides();
-  const postSelectedElementSnapshot = useCallback(() => {
-    const session = interactionSessionRef.current;
-    if (session.type !== "element") {
-      return;
-    }
-    const element = getConnectedSelectedElement(session);
-    if (!element) {
-      setSelectionType({ selectionType: "none" });
-      getWebsiteBuilderRpc()?.areaSelected({
-        rect: session.data.rect,
-        items: []
+  const postSelectedElementSnapshot = useCallback(
+    ({ clearMissing = false } = {}) => {
+      const session = interactionSessionRef.current;
+      if (session.type !== "element") {
+        return true;
+      }
+      const element = getConnectedSelectedElement(session);
+      if (!element) {
+        if (!clearMissing) return false;
+        setSelectionType({ selectionType: "none" });
+        getWebsiteBuilderRpc()?.areaSelected({
+          rect: session.data.rect,
+          items: []
+        });
+        return true;
+      }
+      const siblingElements = getRepetitionSiblingElements({ element });
+      const descriptor = buildElementDescriptor({
+        element,
+        clickPosition: session.clickPosition ?? (session.data.kind === "react-element" ? session.data.clickPosition : { x: 0, y: 0 }),
+        siblingSelectors: siblingElements.map(buildSelector)
       });
-      return;
-    }
-    const siblingElements = getRepetitionSiblingElements({ element });
-    const descriptor = buildElementDescriptor({
-      element,
-      clickPosition: session.clickPosition ?? (session.data.kind === "react-element" ? session.data.clickPosition : { x: 0, y: 0 }),
-      siblingSelectors: siblingElements.map(buildSelector)
-    });
-    if (descriptor.kind !== "react-element") {
-      return;
-    }
-    const refreshedSession = {
-      ...session,
-      element,
-      siblingElements,
-      data: descriptor
+      if (descriptor.kind !== "react-element") {
+        return true;
+      }
+      const refreshedSession = {
+        ...session,
+        element,
+        siblingElements,
+        data: session.data
+      };
+      interactionSessionRef.current = refreshedSession;
+      showElementSelectionFrames({
+        elements: [element, ...siblingElements],
+        scrollOffset: getDocumentScrollOffset()
+      });
+      void symbolicateSelectedElement(descriptor).then((symbolicated) => {
+        if (interactionSessionRef.current !== refreshedSession) {
+          return;
+        }
+        if (symbolicated.sourceLocation && !isUserSourceLocation(symbolicated.sourceLocation)) {
+          return;
+        }
+        refreshedSession.data = symbolicated;
+        getWebsiteBuilderRpc()?.elementSelected({ data: symbolicated });
+      });
+      return true;
+    },
+    [interactionSessionRef, setSelectionType]
+  );
+  useEffect(() => {
+    let refreshTimeout;
+    let missingTimeout;
+    let observationTimeout;
+    const scheduleSnapshot = () => {
+      clearTimeout(refreshTimeout);
+      refreshTimeout = setTimeout(() => {
+        if (editingElementRef.current) return;
+        if (postSelectedElementSnapshot()) {
+          clearTimeout(missingTimeout);
+          missingTimeout = void 0;
+        } else if (!missingTimeout) {
+          const missingSession = interactionSessionRef.current;
+          missingTimeout = setTimeout(() => {
+            missingTimeout = void 0;
+            if (interactionSessionRef.current === missingSession) {
+              postSelectedElementSnapshot({ clearMissing: true });
+            }
+          }, 5e3);
+        }
+      }, 250);
     };
-    interactionSessionRef.current = refreshedSession;
-    showElementSelectionFrames({
-      elements: [element, ...siblingElements],
-      scrollOffset: getDocumentScrollOffset()
-    });
-    void symbolicateSelectedElement(descriptor).then((symbolicated) => {
-      if (interactionSessionRef.current !== refreshedSession) {
-        return;
+    const observer = new MutationObserver((records) => {
+      const session = interactionSessionRef.current;
+      if (editingElementRef.current || session.type !== "element") return;
+      if (!session.element.isConnected || records.some((record) => session.element.contains(record.target))) {
+        scheduleSnapshot();
       }
-      getWebsiteBuilderRpc()?.elementSelected({ data: symbolicated });
     });
-  }, [interactionSessionRef, setSelectionType]);
-  useEffect(() => {
+    const watchRender = () => {
+      if (editingElementRef.current || interactionSessionRef.current.type !== "element")
+        return;
+      clearTimeout(observationTimeout);
+      observer.observe(document.body, {
+        subtree: true,
+        childList: true
+      });
+      observationTimeout = setTimeout(() => observer.disconnect(), 5e3);
+      scheduleSnapshot();
+    };
     installFastRefreshRelay({
       onComplete: () => {
         reapplyOverrides({ skipElement: editingElementRef.current });
-        postSelectedElementSnapshot();
+        watchRender();
       }
     });
-    window.addEventListener(
-      PREVIEW_RENDERED_EVENT,
-      postSelectedElementSnapshot
-    );
+    window.addEventListener(PREVIEW_RENDERED_EVENT, watchRender);
     return () => {
-      window.removeEventListener(
-        PREVIEW_RENDERED_EVENT,
-        postSelectedElementSnapshot
-      );
+      clearTimeout(refreshTimeout);
+      clearTimeout(missingTimeout);
+      clearTimeout(observationTimeout);
+      observer.disconnect();
+      window.removeEventListener(PREVIEW_RENDERED_EVENT, watchRender);
       installFastRefreshRelay();
     };
-  }, [editingElementRef, postSelectedElementSnapshot, reapplyOverrides]);
+  }, [
+    editingElementRef,
+    interactionSessionRef,
+    postSelectedElementSnapshot,
+    reapplyOverrides
+  ]);
   useParentMessaging({
     applyOptimisticUpdate,
     markCommitted,

package/select-mode/fast-refresh-relay.d.ts

@@ -1,3 +1,8 @@
+declare global {
+    interface Window {
+        __NEXT_HMR_LATENCY_CB: ((latencyMs: number) => void) | undefined;
+    }
+}
 export declare function installFastRefreshRelay({ onComplete, }?: {
     onComplete?: () => void;
 }): void;

package/select-mode/fast-refresh-relay.js

@@ -10,25 +10,12 @@ function installFastRefreshRelay({
     return;
   }
   hasInstalledFastRefreshRelay = true;
-  const originalLog = console.log;
-  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?.();
-    }
-  };
-  console.log = (...args) => {
-    relayIfFastRefreshComplete(...args);
-    originalLog(...args);
-  };
-  console.info = (...args) => {
-    relayIfFastRefreshComplete(...args);
-    originalInfo(...args);
+  const originalCallback = window.__NEXT_HMR_LATENCY_CB;
+  window.__NEXT_HMR_LATENCY_CB = (latencyMs) => {
+    invalidateSymbolicationCache();
+    getWebsiteBuilderRpc()?.fastRefreshComplete(void 0);
+    onFastRefreshComplete?.();
+    originalCallback?.(latencyMs);
   };
 }
 export {

package/select-mode/symbolicate.d.ts

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

package/select-mode/symbolicate.js

@@ -186,9 +186,14 @@ function applyResolved({
     componentName: original.componentName
   };
 }
+function isUserSourceLocation(location) {
+  return Boolean(
+    location && !isLikelyCompiledLocation(location) && !isDependencyOrInternalPath(location.filePath)
+  );
+}
 function findUserSourceLocation(fiberChain) {
   return fiberChain.find((entry) => {
-    return !isLikelyCompiledLocation(entry.sourceLocation) && !isDependencyOrInternalPath(entry.sourceLocation.filePath);
+    return isUserSourceLocation(entry.sourceLocation);
   })?.sourceLocation;
 }
 async function symbolicateSelectedElement(selectedElement) {
@@ -235,5 +240,6 @@ async function symbolicateSelectedElement(selectedElement) {
 }
 export {
   invalidateSymbolicationCache,
+  isUserSourceLocation,
   symbolicateSelectedElement
 };