@replohq/sandbox-runtime 1.7.7 → 1.7.9

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/errors.d.ts

@@ -120,6 +120,13 @@ export declare class Uncommon_GloballyMappedError extends ReploError {
         userFacingDetails: ErrorUserFacingDetails;
     });
 }
+/**
+ * The `userFacingDetails.key` publisher puts on its 404 for a missing project.
+ * It lives here rather than next to the error class because a caller across a
+ * service boundary (airlock) matches on it to tell "this project is gone" apart
+ * from any other 404 that URL could produce.
+ */
+export declare const PROJECT_NOT_FOUND_ERROR_KEY = "errors.project.notFound";
 export declare class ReploValidationError extends ReploError {
     constructor(message: string);
 }

package/_vendor/schemas/generated/selectMode.d.ts

@@ -86,6 +86,7 @@ export type SelectableDataPayload = SelectablePlanPayload;
 export type SelectableData = SelectedElement | SelectablePlanData;
 export type SelectModeOptimisticUpdatePayload = {
     kind: "css";
+    fontSource?: "google" | "site";
     property: string;
     value: string | null;
 } | {

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/_vendor/schemas/selectMode.d.ts

@@ -275,6 +275,10 @@ export declare function readSelectablePayload(rawPayload: string | null): {
 } | null;
 export declare const selectModeOptimisticUpdatePayloadSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
     kind: z.ZodLiteral<"css">;
+    fontSource: z.ZodOptional<z.ZodEnum<{
+        google: "google";
+        site: "site";
+    }>>;
     property: z.ZodString;
     value: z.ZodNullable<z.ZodString>;
 }, z.core.$strip>, z.ZodObject<{

package/_vendor/schemas/selectMode.mjs

@@ -1,4 +1,4 @@
-export { SELECT_MODE_SELECTABLE_ATTRIBUTE, SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE, displayModeSchema, getIframeOffset, readSelectablePayload, selectModeBoundingRectSchema, selectModeClickPositionSchema, selectModeDefinedStyleSchema, selectModeFiberChainEntrySchema, selectModeFormatCommandSchema, selectModeInlineTextStatusSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionRectSchema, selectModeSelectionSchema, selectModeSelectionTypeSchema, selectModeSourceLocationSchema, selectModeStyleAtRuleSchema, selectModeStyleVariantSchema, selectModeTextMetricsSchema, selectModeTiptapActiveMarksSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement } from '../../chunk-UOBGRB5I.mjs';
+export { SELECT_MODE_SELECTABLE_ATTRIBUTE, SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE, displayModeSchema, getIframeOffset, readSelectablePayload, selectModeBoundingRectSchema, selectModeClickPositionSchema, selectModeDefinedStyleSchema, selectModeFiberChainEntrySchema, selectModeFormatCommandSchema, selectModeInlineTextStatusSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionRectSchema, selectModeSelectionSchema, selectModeSelectionTypeSchema, selectModeSourceLocationSchema, selectModeStyleAtRuleSchema, selectModeStyleVariantSchema, selectModeTextMetricsSchema, selectModeTiptapActiveMarksSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement } from '../../chunk-4T7WSMC3.mjs';
 import '../../chunk-JUKCUPQ6.mjs';
 import '../../chunk-FLYEIRFK.mjs';
 import '../../chunk-TESFJQID.mjs';

package/_vendor/schemas/selectModeIframeRpc.d.ts

@@ -225,6 +225,10 @@ export declare const websiteBuilderToCanopyMethodConfig: {
             editId: z.ZodString;
             payload: z.ZodDiscriminatedUnion<[z.ZodObject<{
                 kind: z.ZodLiteral<"css">;
+                fontSource: z.ZodOptional<z.ZodEnum<{
+                    google: "google";
+                    site: "site";
+                }>>;
                 property: z.ZodString;
                 value: z.ZodNullable<z.ZodString>;
             }, z.core.$strip>, z.ZodObject<{
@@ -723,6 +727,10 @@ export declare const selectModeParentMessageSchema: z.ZodDiscriminatedUnion<[z.Z
         editId: z.ZodString;
         payload: z.ZodDiscriminatedUnion<[z.ZodObject<{
             kind: z.ZodLiteral<"css">;
+            fontSource: z.ZodOptional<z.ZodEnum<{
+                google: "google";
+                site: "site";
+            }>>;
             property: z.ZodString;
             value: z.ZodNullable<z.ZodString>;
         }, z.core.$strip>, z.ZodObject<{

package/_vendor/schemas/selectModeIframeRpc.mjs

@@ -1,4 +1,4 @@
-import { selectedElementSchema, selectModeFormatCommandSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionTypeSchema, displayModeSchema, selectModeTiptapActiveMarksSchema, selectModeBoundingRectSchema, selectableDataSchema, selectModeSelectionRectSchema, selectModeClickPositionSchema } from '../../chunk-UOBGRB5I.mjs';
+import { selectedElementSchema, selectModeFormatCommandSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionTypeSchema, displayModeSchema, selectModeTiptapActiveMarksSchema, selectModeBoundingRectSchema, selectableDataSchema, selectModeSelectionRectSchema, selectModeClickPositionSchema } from '../../chunk-4T7WSMC3.mjs';
 import '../../chunk-JUKCUPQ6.mjs';
 import '../../chunk-FLYEIRFK.mjs';
 import '../../chunk-TESFJQID.mjs';

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.7.7",
+  "version": "1.7.9",
   "branch": "HEAD",
-  "commit": "480d34ab39b9a190492b6d1280cc9a8d9a89e2ab",
-  "builtAt": "2026-09-18T21:38:59.533Z"
+  "commit": "b01d429fa2ffd0346a2187126d2b7ea58e40441f",
+  "builtAt": "2026-09-20T05:20:23.775Z"
 };

package/{chunk-UOBGRB5I.mjs → chunk-4T7WSMC3.mjs}

@@ -168,6 +168,7 @@ function readSelectablePayload(rawPayload) {
 var selectModeOptimisticUpdatePayloadSchema = z.discriminatedUnion("kind", [
   z.object({
     kind: z.literal("css"),
+    fontSource: z.enum(["google", "site"]).optional(),
     property: z.string(),
     value: z.string().nullable()
   }),

package/package.json

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

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/hooks/useOptimisticOverrides.js

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import { buildGoogleFontsCssUrl, quoteFontFamily } from "../../_vendor/replo-utils/lib/fonts.mjs";
 import { buildSelector } from "../descriptor/elementDescriptor";
 import {
   SELECT_MODE_OVERRIDE_ATTRIBUTE,
@@ -125,13 +126,74 @@ function restoreOriginalState({
     element.innerHTML = originalState.innerHTML;
   }
 }
+function isBareFontFamilyName(value) {
+  const trimmed = value.trim();
+  if (trimmed.startsWith("var(") || trimmed === "inherit" || trimmed === "initial" || trimmed === "unset" || trimmed === "revert" || trimmed.includes(",")) {
+    return false;
+  }
+  return true;
+}
+function formatCssFontFamilyValue(value) {
+  const trimmed = value.trim();
+  if (!isBareFontFamilyName(trimmed)) {
+    return trimmed;
+  }
+  if (trimmed.startsWith("'") && trimmed.endsWith("'") || trimmed.startsWith('"') && trimmed.endsWith('"')) {
+    return trimmed;
+  }
+  return quoteFontFamily(trimmed);
+}
+function ensureGoogleFontStylesheet(family) {
+  if (!isBareFontFamilyName(family)) {
+    return null;
+  }
+  const bareFamily = family.replace(/^['"]|['"]$/gu, "");
+  if (!bareFamily) {
+    return null;
+  }
+  const existing = Array.from(
+    document.querySelectorAll("link[data-replo-select-font]")
+  ).find((link) => link.dataset.reploSelectFont === bareFamily);
+  if (!existing) {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = buildGoogleFontsCssUrl(bareFamily);
+    link.dataset.reploSelectFont = bareFamily;
+    document.head.append(link);
+  }
+  return bareFamily;
+}
+function removeUnusedGoogleFontStylesheet(family) {
+  const stillNeeded = getOverrideList().some(
+    (override) => override.injectedFontFamily === family
+  );
+  if (stillNeeded) {
+    return;
+  }
+  for (const link of document.querySelectorAll(
+    "link[data-replo-select-font]"
+  )) {
+    if (link.dataset.reploSelectFont === family) {
+      link.remove();
+    }
+  }
+}
 function installCssRule(override) {
   if (override.payload.kind !== "css") {
     return;
   }
+  let cssValue = override.payload.value ?? "revert";
+  if (override.payload.property === "font-family" && override.payload.value) {
+    cssValue = formatCssFontFamilyValue(override.payload.value);
+    if (override.payload.fontSource === "google") {
+      override.injectedFontFamily = ensureGoogleFontStylesheet(
+        override.payload.value.trim()
+      );
+    }
+  }
   const style = document.createElement("style");
   style.dataset.reploSelectOverride = override.token;
-  style.textContent = `[${SELECT_MODE_OVERRIDE_ATTRIBUTE}~="${override.token}"] { ${override.payload.property}: ${override.payload.value ?? "revert"} !important; }`;
+  style.textContent = `[${SELECT_MODE_OVERRIDE_ATTRIBUTE}~="${override.token}"] { ${override.payload.property}: ${cssValue} !important; }`;
   document.head.append(style);
 }
 function resolveTarget(target) {
@@ -185,9 +247,13 @@ function removeOverride({
       });
     }
   }
+  const injectedFontFamily = override.injectedFontFamily;
   setOverrideList(
     getOverrideList().filter((candidate) => candidate.editId !== editId)
   );
+  if (injectedFontFamily) {
+    removeUnusedGoogleFontStylesheet(injectedFontFamily);
+  }
   if (outcome === "failed") {
     for (const remainingOverride of getOverrideList()) {
       reapplyOverride({ override: remainingOverride, skipElement: null });
@@ -214,6 +280,7 @@ function useOptimisticOverrides() {
       const token = `override-${editId}`;
       const override = {
         editId,
+        injectedFontFamily: null,
         payload,
         registrationTimeout: window.setTimeout(() => {
           removeOverride({ editId, outcome: "failed" });

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