@replohq/sandbox-runtime 1.0.1 → 1.2.0

package/LinkInterceptor.js

@@ -42,6 +42,24 @@ function LinkInterceptor() {
     const originalPushState = history.pushState;
     const originalReplaceState = history.replaceState;
     const navigation = getWindowNavigation();
+    const reportNavigated = (rawUrl) => {
+      let route;
+      try {
+        route = new URL(
+          typeof rawUrl === "string" ? rawUrl : rawUrl.href,
+          window.location.href
+        ).pathname;
+      } catch {
+        route = String(rawUrl);
+      }
+      window.parent.postMessage(
+        {
+          type: "replo:navigated",
+          route
+        },
+        "*"
+      );
+    };
     window.open = function(url, target, features) {
       if (url !== void 0 && url !== "" && urlLeavesSandbox(url) === true) {
         return null;
@@ -52,13 +70,21 @@ function LinkInterceptor() {
       if (url && urlLeavesSandbox(url) === true) {
         return;
       }
-      return originalPushState.call(history, state, unused, url);
+      const result = originalPushState.call(history, state, unused, url);
+      if (url) {
+        reportNavigated(url);
+      }
+      return result;
     };
     history.replaceState = function(state, unused, url) {
       if (url && urlLeavesSandbox(url) === true) {
         return;
       }
-      return originalReplaceState.call(history, state, unused, url);
+      const result = originalReplaceState.call(history, state, unused, url);
+      if (url) {
+        reportNavigated(url);
+      }
+      return result;
     };
     const handleNavigate = (event) => {
       const destinationUrl = event.destination?.url;
@@ -95,20 +121,18 @@ function LinkInterceptor() {
         blockNavigation(event);
         return;
       }
-      event.preventDefault();
-      let route;
-      try {
-        route = new URL(href, window.location.href).pathname;
-      } catch {
-        route = href;
+      if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+        return;
       }
-      window.parent.postMessage(
-        {
-          type: "replo:navigate",
-          route
-        },
-        "*"
-      );
+      if (link.hasAttribute("download")) {
+        return;
+      }
+      queueMicrotask(() => {
+        if (event.defaultPrevented) {
+          return;
+        }
+        reportNavigated(href);
+      });
     };
     navigation?.addEventListener("navigate", handleNavigate);
     document.addEventListener("click", handleClick, true);

package/LinkInterceptor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../LinkInterceptor.tsx"],
-  "sourcesContent": ["\"use client\";\n\nimport { useEffect } from \"react\";\n\nimport { displayModeStore } from \"./select-mode/displayModeStore\";\n\ntype NavigationNavigateEvent = {\n  destination?: { url?: string };\n  preventDefault?: () => void;\n};\n\ntype NavigationLike = {\n  addEventListener: (\n    type: \"navigate\",\n    listener: (event: NavigationNavigateEvent) => void,\n  ) => void;\n  removeEventListener: (\n    type: \"navigate\",\n    listener: (event: NavigationNavigateEvent) => void,\n  ) => void;\n};\n\nfunction blockNavigation(event: MouseEvent) {\n  event.preventDefault();\n  event.stopPropagation();\n  event.stopImmediatePropagation();\n}\n\nfunction isNavigationLike(value: unknown): value is NavigationLike {\n  if (typeof value !== \"object\" || value === null) {\n    return false;\n  }\n\n  return (\n    typeof Reflect.get(value, \"addEventListener\") === \"function\" &&\n    typeof Reflect.get(value, \"removeEventListener\") === \"function\"\n  );\n}\n\nfunction getWindowNavigation() {\n  const navigation = Reflect.get(window, \"navigation\");\n  return isNavigationLike(navigation) ? navigation : null;\n}\n\nfunction shouldInterceptNavigationForAgentPreview() {\n  if (typeof window === \"undefined\") {\n    return false;\n  }\n\n  if (window.parent === window) {\n    return false;\n  }\n\n  return (\n    new URLSearchParams(window.location.search).get(\"__reploAgentPreview\") ===\n    \"1\"\n  );\n}\n\nfunction urlLeavesSandbox(rawUrl: string | URL): boolean | null {\n  try {\n    const resolved =\n      typeof rawUrl === \"string\"\n        ? new URL(rawUrl, window.location.href)\n        : new URL(rawUrl.href, window.location.href);\n    return resolved.origin !== window.location.origin;\n  } catch {\n    return null;\n  }\n}\n\nexport default function LinkInterceptor() {\n  // eslint-disable-next-line replo/no-use-effect -- Browser navigation APIs must be patched at client runtime and restored when the interceptor unmounts.\n  useEffect(() => {\n    if (!shouldInterceptNavigationForAgentPreview()) {\n      return;\n    }\n\n    const originalWindowOpen = window.open;\n    const originalPushState = history.pushState;\n    const originalReplaceState = history.replaceState;\n    const navigation = getWindowNavigation();\n\n    window.open = function (\n      url?: string | URL,\n      target?: string,\n      features?: string,\n    ) {\n      if (url !== undefined && url !== \"\" && urlLeavesSandbox(url) === true) {\n        return null;\n      }\n\n      return originalWindowOpen.call(window, url, target, features);\n    };\n\n    history.pushState = function (\n      state: Parameters<History[\"pushState\"]>[0],\n      unused: string,\n      url?: string | URL | null,\n    ) {\n      if (url && urlLeavesSandbox(url) === true) {\n        return;\n      }\n\n      return originalPushState.call(history, state, unused, url);\n    };\n\n    history.replaceState = function (\n      state: Parameters<History[\"replaceState\"]>[0],\n      unused: string,\n      url?: string | URL | null,\n    ) {\n      if (url && urlLeavesSandbox(url) === true) {\n        return;\n      }\n\n      return originalReplaceState.call(history, state, unused, url);\n    };\n\n    const handleNavigate = (event: NavigationNavigateEvent) => {\n      const destinationUrl = event.destination?.url;\n      if (\n        destinationUrl === undefined ||\n        destinationUrl === \"\" ||\n        urlLeavesSandbox(destinationUrl) !== true\n      ) {\n        return;\n      }\n\n      event.preventDefault?.();\n    };\n\n    const handleClick = (event: MouseEvent) => {\n      // While select mode is active a link click must select the element, not\n      // navigate. `useSelectionInteractions` prevents the default nav, but this\n      // sibling capture listener would still post `replo:navigate` and move the\n      // preview off the page \u2014 `stopPropagation` there can't suppress a\n      // listener on the same node, so we bail out here explicitly.\n      if (displayModeStore.getSnapshot() === \"selection\") {\n        return;\n      }\n\n      const target = event.target;\n\n      if (!(target instanceof Element)) {\n        return;\n      }\n\n      const link = target.closest(\"a[href]\");\n\n      if (!(link instanceof HTMLAnchorElement)) {\n        return;\n      }\n\n      const href = link.getAttribute(\"href\");\n      if (!href) {\n        return;\n      }\n\n      if (href.startsWith(\"#\")) {\n        return;\n      }\n\n      const linkTarget = link.getAttribute(\"target\");\n      if (linkTarget && linkTarget !== \"_self\") {\n        blockNavigation(event);\n        return;\n      }\n\n      if (urlLeavesSandbox(href) === true) {\n        blockNavigation(event);\n        return;\n      }\n\n      event.preventDefault();\n\n      let route: string;\n      try {\n        route = new URL(href, window.location.href).pathname;\n      } catch {\n        route = href;\n      }\n\n      window.parent.postMessage(\n        {\n          type: \"replo:navigate\",\n          route,\n        },\n        \"*\",\n      );\n    };\n\n    navigation?.addEventListener(\"navigate\", handleNavigate);\n    document.addEventListener(\"click\", handleClick, true);\n\n    return () => {\n      window.open = originalWindowOpen;\n      history.pushState = originalPushState;\n      history.replaceState = originalReplaceState;\n      navigation?.removeEventListener(\"navigate\", handleNavigate);\n      document.removeEventListener(\"click\", handleClick, true);\n    };\n  }, []);\n\n  return null;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\";\n\nimport { useEffect } from \"react\";\n\nimport { displayModeStore } from \"./select-mode/displayModeStore\";\n\ntype NavigationNavigateEvent = {\n  destination?: { url?: string };\n  preventDefault?: () => void;\n};\n\ntype NavigationLike = {\n  addEventListener: (\n    type: \"navigate\",\n    listener: (event: NavigationNavigateEvent) => void,\n  ) => void;\n  removeEventListener: (\n    type: \"navigate\",\n    listener: (event: NavigationNavigateEvent) => void,\n  ) => void;\n};\n\nfunction blockNavigation(event: MouseEvent) {\n  event.preventDefault();\n  event.stopPropagation();\n  event.stopImmediatePropagation();\n}\n\nfunction isNavigationLike(value: unknown): value is NavigationLike {\n  if (typeof value !== \"object\" || value === null) {\n    return false;\n  }\n\n  return (\n    typeof Reflect.get(value, \"addEventListener\") === \"function\" &&\n    typeof Reflect.get(value, \"removeEventListener\") === \"function\"\n  );\n}\n\nfunction getWindowNavigation() {\n  const navigation = Reflect.get(window, \"navigation\");\n  return isNavigationLike(navigation) ? navigation : null;\n}\n\nfunction shouldInterceptNavigationForAgentPreview() {\n  if (typeof window === \"undefined\") {\n    return false;\n  }\n\n  if (window.parent === window) {\n    return false;\n  }\n\n  return (\n    new URLSearchParams(window.location.search).get(\"__reploAgentPreview\") ===\n    \"1\"\n  );\n}\n\nfunction urlLeavesSandbox(rawUrl: string | URL): boolean | null {\n  try {\n    const resolved =\n      typeof rawUrl === \"string\"\n        ? new URL(rawUrl, window.location.href)\n        : new URL(rawUrl.href, window.location.href);\n    return resolved.origin !== window.location.origin;\n  } catch {\n    return null;\n  }\n}\n\nexport default function LinkInterceptor() {\n  // eslint-disable-next-line replo/no-use-effect -- Browser navigation APIs must be patched at client runtime and restored when the interceptor unmounts.\n  useEffect(() => {\n    if (!shouldInterceptNavigationForAgentPreview()) {\n      return;\n    }\n\n    const originalWindowOpen = window.open;\n    const originalPushState = history.pushState;\n    const originalReplaceState = history.replaceState;\n    const navigation = getWindowNavigation();\n\n    // Tell the parent editor where the site's own navigation went so it can\n    // keep its URL, page list, and select-mode in sync without reloading the\n    // iframe. A fact, not a request: it is only sent once a navigation is\n    // actually happening.\n    const reportNavigated = (rawUrl: string | URL) => {\n      let route: string;\n      try {\n        route = new URL(\n          typeof rawUrl === \"string\" ? rawUrl : rawUrl.href,\n          window.location.href,\n        ).pathname;\n      } catch {\n        route = String(rawUrl);\n      }\n      window.parent.postMessage(\n        {\n          type: \"replo:navigated\",\n          route,\n        },\n        \"*\",\n      );\n    };\n\n    window.open = function (\n      url?: string | URL,\n      target?: string,\n      features?: string,\n    ) {\n      if (url !== undefined && url !== \"\" && urlLeavesSandbox(url) === true) {\n        return null;\n      }\n\n      return originalWindowOpen.call(window, url, target, features);\n    };\n\n    // The history patches are where client-side navigations are reported:\n    // next/link cancels its click and routes through pushState, so the click\n    // handler below cannot know whether the site actually navigated \u2014 these\n    // patches fire exactly when it did (link clicks and programmatic\n    // router.push/redirects alike).\n    history.pushState = function (\n      state: Parameters<History[\"pushState\"]>[0],\n      unused: string,\n      url?: string | URL | null,\n    ) {\n      if (url && urlLeavesSandbox(url) === true) {\n        return;\n      }\n\n      const result = originalPushState.call(history, state, unused, url);\n      if (url) {\n        reportNavigated(url);\n      }\n      return result;\n    };\n\n    history.replaceState = function (\n      state: Parameters<History[\"replaceState\"]>[0],\n      unused: string,\n      url?: string | URL | null,\n    ) {\n      if (url && urlLeavesSandbox(url) === true) {\n        return;\n      }\n\n      const result = originalReplaceState.call(history, state, unused, url);\n      if (url) {\n        reportNavigated(url);\n      }\n      return result;\n    };\n\n    const handleNavigate = (event: NavigationNavigateEvent) => {\n      const destinationUrl = event.destination?.url;\n      if (\n        destinationUrl === undefined ||\n        destinationUrl === \"\" ||\n        urlLeavesSandbox(destinationUrl) !== true\n      ) {\n        return;\n      }\n\n      event.preventDefault?.();\n    };\n\n    const handleClick = (event: MouseEvent) => {\n      // While select mode is active a link click must select the element, not\n      // navigate. `useSelectionInteractions` prevents the default nav, but this\n      // sibling capture listener would still post `replo:navigate` and move the\n      // preview off the page \u2014 `stopPropagation` there can't suppress a\n      // listener on the same node, so we bail out here explicitly.\n      if (displayModeStore.getSnapshot() === \"selection\") {\n        return;\n      }\n\n      const target = event.target;\n\n      if (!(target instanceof Element)) {\n        return;\n      }\n\n      const link = target.closest(\"a[href]\");\n\n      if (!(link instanceof HTMLAnchorElement)) {\n        return;\n      }\n\n      const href = link.getAttribute(\"href\");\n      if (!href) {\n        return;\n      }\n\n      if (href.startsWith(\"#\")) {\n        return;\n      }\n\n      const linkTarget = link.getAttribute(\"target\");\n      if (linkTarget && linkTarget !== \"_self\") {\n        blockNavigation(event);\n        return;\n      }\n\n      if (urlLeavesSandbox(href) === true) {\n        blockNavigation(event);\n        return;\n      }\n\n      // A modified click (new tab / etc.) is the browser's to handle \u2014 the\n      // iframe sandbox has no `allow-popups`, so it can't escape anyway.\n      // Don't hijack it or tell the parent we navigated.\n      if (\n        event.button !== 0 ||\n        event.metaKey ||\n        event.ctrlKey ||\n        event.shiftKey ||\n        event.altKey\n      ) {\n        return;\n      }\n\n      // A download link never navigates, so there is nothing to report.\n      if (link.hasAttribute(\"download\")) {\n        return;\n      }\n\n      // Let the site navigate itself \u2014 next/link does an instant client-side\n      // transition, exactly like a normal Next.js app \u2014 instead of cancelling\n      // the click and making the parent editor tear down and reload the whole\n      // preview iframe. next/link navigations are reported by the pushState\n      // patch above; this deferred report covers plain anchors the browser\n      // itself navigates (a full document load inside the iframe). Deferred a\n      // microtask because this capture listener runs before the site's own\n      // handlers: a cancelled click (next/link included) navigates nothing.\n      queueMicrotask(() => {\n        if (event.defaultPrevented) {\n          return;\n        }\n        reportNavigated(href);\n      });\n    };\n\n    navigation?.addEventListener(\"navigate\", handleNavigate);\n    document.addEventListener(\"click\", handleClick, true);\n\n    return () => {\n      window.open = originalWindowOpen;\n      history.pushState = originalPushState;\n      history.replaceState = originalReplaceState;\n      navigation?.removeEventListener(\"navigate\", handleNavigate);\n      document.removeEventListener(\"click\", handleClick, true);\n    };\n  }, []);\n\n  return null;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/_vendor/schemas/componentPreview.d.ts

@@ -3,14 +3,22 @@ export declare const MAX_COMPONENT_PREVIEW_PROPS_BYTES: number;
 export declare const componentPreviewPropNameSchema: z.ZodString;
 export declare const componentPreviewPropsSchema: z.ZodRecord<z.ZodString, z.ZodJSONSchema>;
 export declare const COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID: "replo:component-preview-iframe-rpc";
-export declare const COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION: 1;
+export declare const COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION: 2;
+export declare const COMPONENT_PREVIEW_PARENT_ORIGIN_PARAM = "reploParentOrigin";
 export declare const websiteBuilderToComponentPreviewMethodConfig: {
     setProps: {
         inputSchema: z.ZodObject<{
             props: z.ZodRecord<z.ZodString, z.ZodJSONSchema>;
             sourceRevision: z.ZodString;
         }, z.core.$strip>;
-        outputSchema: z.ZodVoid;
+        outputSchema: z.ZodObject<{
+            mode: z.ZodEnum<{
+                client: "client";
+                navigation: "navigation";
+                unchanged: "unchanged";
+            }>;
+        }, z.core.$strip>;
+        timeoutMs: number;
     };
 };
 export declare const componentPreviewToWebsiteBuilderMethodConfig: {

package/_vendor/schemas/componentPreview.mjs

@@ -32,16 +32,25 @@ var componentPreviewPropNameSchema = z.string().min(1).max(80).regex(/^[A-Za-z_$
     name
   );
 }, "Unsafe prop name");
-var componentPreviewPropsSchema = z.record(z.string(), z.json());
+var componentPreviewPropsSchema = z.record(
+  componentPreviewPropNameSchema,
+  z.json()
+);
 var COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID = "replo:component-preview-iframe-rpc";
-var COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION = 1;
+var COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION = 2;
+var COMPONENT_PREVIEW_PARENT_ORIGIN_PARAM = "reploParentOrigin";
 var websiteBuilderToComponentPreviewMethodConfig = {
   setProps: {
     inputSchema: z.object({
       props: componentPreviewPropsSchema,
       sourceRevision: z.string().min(1)
     }),
-    outputSchema: z.void()
+    // How the frame applied the update: in place via the client prop store,
+    // via an in-frame server navigation, or not at all (already current).
+    outputSchema: z.object({
+      mode: z.enum(["client", "navigation", "unchanged"])
+    }),
+    timeoutMs: 1e4
   }
 };
 var componentPreviewToWebsiteBuilderMethodConfig = {
@@ -94,4 +103,4 @@ var componentPreviewPreparationSchema = z.discriminatedUnion("status", [
   z.object({ status: z.literal("siteUpdateRequired") })
 ]).describe("ComponentPreviewPreparation");
 
-export { COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID, COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION, MAX_COMPONENT_PREVIEW_PROPS_BYTES, componentPreviewComponentSchema, componentPreviewIndexSchema, componentPreviewPathSchema, componentPreviewPreparationSchema, componentPreviewProductReferenceSchema, componentPreviewPropNameSchema, componentPreviewPropsSchema, componentPreviewSelectionSchema, componentPreviewSourceFileSchema, componentPreviewSourceSchema, componentPreviewToWebsiteBuilderMethodConfig, websiteBuilderToComponentPreviewMethodConfig };
+export { COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID, COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION, COMPONENT_PREVIEW_PARENT_ORIGIN_PARAM, MAX_COMPONENT_PREVIEW_PROPS_BYTES, componentPreviewComponentSchema, componentPreviewIndexSchema, componentPreviewPathSchema, componentPreviewPreparationSchema, componentPreviewProductReferenceSchema, componentPreviewPropNameSchema, componentPreviewPropsSchema, componentPreviewSelectionSchema, componentPreviewSourceFileSchema, componentPreviewSourceSchema, componentPreviewToWebsiteBuilderMethodConfig, websiteBuilderToComponentPreviewMethodConfig };

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

@@ -1,6 +1,6 @@
 export type DisplayMode = "browse" | "selection";
 export type SelectModeSelectionType = "none" | "element" | "area" | "drag";
-export type SelectModeInlineTextStatus = "editable" | "dynamic" | null;
+export type SelectModeInlineTextStatus = "editable" | "dynamic" | "translated" | null;
 export type SelectModeTextMetrics = {
     tightWidth: number;
     lineCount: number;

package/_vendor/schemas/selectMode.d.ts

@@ -8,6 +8,7 @@ export declare const displayModeSchema: z.ZodEnum<{
 export declare const selectModeInlineTextStatusSchema: z.ZodNullable<z.ZodEnum<{
     editable: "editable";
     dynamic: "dynamic";
+    translated: "translated";
 }>>;
 export declare const selectModeTextMetricsSchema: z.ZodObject<{
     tightWidth: z.ZodNumber;
@@ -86,13 +87,15 @@ export type RectOffset = {
     left: number;
     top: number;
 };
-export declare function transformRect({ rect, offset, }: {
+export declare function transformRect({ rect, offset, scale, }: {
     rect: SelectModeBoundingRect;
     offset: RectOffset;
+    scale?: number;
 }): SelectModeBoundingRect;
-export declare function transformPoint({ point, offset, }: {
+export declare function transformPoint({ point, offset, scale, }: {
     point: SelectModeClickPosition;
     offset: RectOffset;
+    scale?: number;
 }): SelectModeClickPosition;
 export declare function getIframeOffset(iframe: HTMLIFrameElement | null): RectOffset;
 export declare const selectedElementSchema: z.ZodObject<{
@@ -256,6 +259,11 @@ export type SelectModeBoundingRect = z.infer<typeof selectModeBoundingRectSchema
 export type SelectModeClickPosition = z.infer<typeof selectModeClickPositionSchema>;
 export type SelectableData = z.infer<typeof selectableDataSchema>;
 export type SelectableDataPayload = z.infer<typeof selectableDataPayloadSchema>;
+export declare function transformSelectedElement({ element, offset, scale, }: {
+    element: z.infer<typeof selectedElementSchema>;
+    offset: RectOffset;
+    scale?: number;
+}): z.infer<typeof selectedElementSchema>;
 export declare function transformSelectableData({ data, offset, }: {
     data: SelectableData;
     offset: RectOffset;

package/_vendor/schemas/selectMode.mjs

@@ -1,3 +1,3 @@
-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 } from '../../chunk-3UFG7XTQ.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-2455EG5R.mjs';
 import '../../chunk-N5EI2MOZ.mjs';
 import '../../chunk-FNTGY7I5.mjs';

package/_vendor/schemas/selectModeIframeRpc.mjs

@@ -1,4 +1,4 @@
-import { selectModeFormatCommandSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionTypeSchema, displayModeSchema, selectModeTiptapActiveMarksSchema, selectModeBoundingRectSchema, selectableDataSchema, selectModeSelectionRectSchema, selectModeClickPositionSchema, selectedElementSchema } from '../../chunk-3UFG7XTQ.mjs';
+import { selectModeFormatCommandSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionTypeSchema, displayModeSchema, selectModeTiptapActiveMarksSchema, selectModeBoundingRectSchema, selectableDataSchema, selectModeSelectionRectSchema, selectModeClickPositionSchema, selectedElementSchema } from '../../chunk-2455EG5R.mjs';
 import '../../chunk-N5EI2MOZ.mjs';
 import '../../chunk-FNTGY7I5.mjs';
 import { z } from 'zod';

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "branch": "HEAD",
-  "commit": "9fc57a3ef1d06689e70fe0d90c25c03717e37d03",
-  "builtAt": "2026-08-19T22:39:33.469Z"
+  "commit": "0460cd76d21b76aeefd6d972a25dab1b917d34d0",
+  "builtAt": "2026-08-25T19:38:53.050Z"
 };

package/{chunk-3UFG7XTQ.mjs → chunk-2455EG5R.mjs}

@@ -18,7 +18,7 @@ function parseSchemaOrNull(value, schema) {
 var SELECT_MODE_SELECTABLE_ATTRIBUTE = "data-replo-selectable";
 var SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE = "data-replo-selectable-payload";
 var displayModeSchema = z.enum(["browse", "selection"]).describe("DisplayMode");
-var selectModeInlineTextStatusSchema = z.enum(["editable", "dynamic"]).nullable().describe("SelectModeInlineTextStatus");
+var selectModeInlineTextStatusSchema = z.enum(["editable", "dynamic", "translated"]).nullable().describe("SelectModeInlineTextStatus");
 var selectModeTextMetricsSchema = z.object({
   tightWidth: z.number(),
   lineCount: z.number(),
@@ -71,26 +71,28 @@ var selectModeDefinedStyleSchema = z.object({
 }).describe("SelectModeDefinedStyle");
 function transformRect({
   rect,
-  offset
+  offset,
+  scale = 1
 }) {
   return {
-    x: rect.x + offset.left,
-    y: rect.y + offset.top,
-    left: rect.left + offset.left,
-    right: rect.right + offset.left,
-    top: rect.top + offset.top,
-    bottom: rect.bottom + offset.top,
-    width: rect.width,
-    height: rect.height
+    x: rect.x * scale + offset.left,
+    y: rect.y * scale + offset.top,
+    left: rect.left * scale + offset.left,
+    right: rect.right * scale + offset.left,
+    top: rect.top * scale + offset.top,
+    bottom: rect.bottom * scale + offset.top,
+    width: rect.width * scale,
+    height: rect.height * scale
   };
 }
 function transformPoint({
   point,
-  offset
+  offset,
+  scale = 1
 }) {
   return {
-    x: point.x + offset.left,
-    y: point.y + offset.top
+    x: point.x * scale + offset.left,
+    y: point.y * scale + offset.top
   };
 }
 function getIframeOffset(iframe) {
@@ -125,6 +127,21 @@ var selectablePlanDataSchema = z.object({
 var selectablePlanPayloadSchema = selectablePlanDataSchema.omit({ rect: true }).describe("SelectablePlanPayload");
 var selectableDataPayloadSchema = z.discriminatedUnion("kind", [selectablePlanPayloadSchema]).describe("SelectableDataPayload");
 var selectableDataSchema = z.discriminatedUnion("kind", [selectedElementSchema, selectablePlanDataSchema]).describe("SelectableData");
+function transformSelectedElement({
+  element,
+  offset,
+  scale = 1
+}) {
+  return {
+    ...element,
+    rect: transformRect({ rect: element.rect, offset, scale }),
+    clickPosition: transformPoint({
+      point: element.clickPosition,
+      offset,
+      scale
+    })
+  };
+}
 function transformSelectableData({
   data,
   offset
@@ -133,14 +150,7 @@ function transformSelectableData({
     data,
     "kind"
   )({
-    "react-element": (element) => ({
-      ...element,
-      rect: transformRect({ rect: element.rect, offset }),
-      clickPosition: transformPoint({
-        point: element.clickPosition,
-        offset
-      })
-    }),
+    "react-element": (element) => transformSelectedElement({ element, offset }),
     plan: (plan) => ({
       ...plan,
       rect: transformRect({ rect: plan.rect, offset })
@@ -202,4 +212,4 @@ var selectModeSelectionSchema = z.discriminatedUnion("type", [
   })
 ]).describe("SelectModeSelection");
 
-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 };
+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 };

package/next/component-preview-client.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentType } from "react";
+export declare function ComponentPreviewNavigation(): null;
+export declare function ComponentPreviewStage({ Component, initialProps, initialRawProps, initialSourceRevision, }: {
+    Component: ComponentType<Record<string, unknown>>;
+    initialProps: Record<string, unknown>;
+    initialRawProps: Record<string, unknown>;
+    initialSourceRevision: string;
+}): import("react/jsx-runtime").JSX.Element;

package/next/component-preview-client.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { useIframeRpcChannel } from "../_vendor/replo-utils/react/use-iframe-rpc-channel.mjs";
+import {
+  COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID,
+  COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION,
+  COMPONENT_PREVIEW_PARENT_ORIGIN_PARAM,
+  componentPreviewToWebsiteBuilderMethodConfig,
+  websiteBuilderToComponentPreviewMethodConfig
+} from "../_vendor/schemas/componentPreview.mjs";
+import {
+  createIframeRpcChannel,
+  createIframeRpcRemote
+} from "../_vendor/schemas/iframeRpcChannel.mjs";
+import { getComponentPreviewHref } from "./component-preview-href";
+import {
+  mergeClientProps,
+  productReferencesChanged
+} from "./component-preview-props";
+function getParentOrigin() {
+  const fromQuery = new URLSearchParams(window.location.search).get(
+    COMPONENT_PREVIEW_PARENT_ORIGIN_PARAM
+  );
+  if (fromQuery) {
+    try {
+      return new URL(fromQuery).origin;
+    } catch {
+      return null;
+    }
+  }
+  return document.referrer ? new URL(document.referrer).origin : null;
+}
+function getCurrentHref() {
+  return `${window.location.pathname}${window.location.search}${window.location.hash}`;
+}
+function useComponentPreviewChannel(onSetProps) {
+  const onSetPropsRef = useRef(onSetProps);
+  onSetPropsRef.current = onSetProps;
+  useIframeRpcChannel(
+    useMemo(() => {
+      if (typeof window === "undefined") {
+        return null;
+      }
+      const parentOrigin = getParentOrigin();
+      if (!parentOrigin) {
+        return null;
+      }
+      const rpcChannel = createIframeRpcChannel({
+        subscriberWindow: window,
+        channelIdentifier: COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID,
+        version: COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION,
+        getTargetWindow: () => {
+          return window.parent === window ? null : window.parent;
+        },
+        targetOrigin: parentOrigin,
+        isExpectedMessage: (event) => {
+          return event.source === window.parent && event.origin === parentOrigin;
+        },
+        outgoingMethods: componentPreviewToWebsiteBuilderMethodConfig,
+        incomingMethods: websiteBuilderToComponentPreviewMethodConfig,
+        handlers: {
+          setProps: (input) => onSetPropsRef.current(input)
+        }
+      });
+      return {
+        ...rpcChannel,
+        subscribe() {
+          const unsubscribe = rpcChannel.subscribe();
+          createIframeRpcRemote(rpcChannel).iframeReady();
+          return unsubscribe;
+        }
+      };
+    }, [])
+  );
+}
+function useNavigateAndSettle() {
+  const router = useRouter();
+  const [isNavigationPending, startNavigation] = useTransition();
+  const settleResolvers = useRef([]);
+  useEffect(() => {
+    if (!isNavigationPending) {
+      const resolvers = settleResolvers.current;
+      settleResolvers.current = [];
+      for (const resolve of resolvers) {
+        resolve();
+      }
+    }
+  }, [isNavigationPending]);
+  return (href) => {
+    return new Promise((resolve) => {
+      settleResolvers.current.push(resolve);
+      startNavigation(() => {
+        router.replace(href, { scroll: false });
+      });
+    });
+  };
+}
+function ComponentPreviewNavigation() {
+  const navigateAndSettle = useNavigateAndSettle();
+  useComponentPreviewChannel(
+    async ({ props, sourceRevision }) => {
+      const nextHref = getComponentPreviewHref({
+        currentUrl: window.location.href,
+        props,
+        sourceRevision
+      });
+      if (nextHref === getCurrentHref()) {
+        return { mode: "unchanged" };
+      }
+      await navigateAndSettle(nextHref);
+      return { mode: "navigation" };
+    }
+  );
+  return null;
+}
+function ComponentPreviewStage({
+  Component,
+  initialProps,
+  initialRawProps,
+  initialSourceRevision
+}) {
+  const [props, setProps] = useState(initialProps);
+  const [lastInitialProps, setLastInitialProps] = useState(initialProps);
+  if (initialProps !== lastInitialProps) {
+    setLastInitialProps(initialProps);
+    setProps(initialProps);
+  }
+  const propsRef = useRef(props);
+  propsRef.current = props;
+  const lastRawPropsRef = useRef(initialRawProps);
+  const lastSourceRevisionRef = useRef(initialSourceRevision);
+  const navigateAndSettle = useNavigateAndSettle();
+  useComponentPreviewChannel(
+    async ({
+      props: nextRawProps,
+      sourceRevision
+    }) => {
+      const nextHref = getComponentPreviewHref({
+        currentUrl: window.location.href,
+        props: nextRawProps,
+        sourceRevision
+      });
+      if (nextHref === getCurrentHref()) {
+        return { mode: "unchanged" };
+      }
+      if (sourceRevision !== lastSourceRevisionRef.current || productReferencesChanged({
+        previous: lastRawPropsRef.current,
+        next: nextRawProps
+      })) {
+        await navigateAndSettle(nextHref);
+        lastRawPropsRef.current = nextRawProps;
+        lastSourceRevisionRef.current = sourceRevision;
+        return { mode: "navigation" };
+      }
+      setProps(
+        mergeClientProps({
+          currentResolved: propsRef.current,
+          nextRaw: nextRawProps
+        })
+      );
+      lastRawPropsRef.current = nextRawProps;
+      window.history.replaceState(null, "", nextHref);
+      return { mode: "client" };
+    }
+  );
+  return /* @__PURE__ */ jsx(Component, { ...props });
+}
+export {
+  ComponentPreviewNavigation,
+  ComponentPreviewStage
+};
+//# sourceMappingURL=component-preview-client.js.map

package/next/component-preview-client.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../next/component-preview-client.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport type { ComponentType } from \"react\";\nimport type { z } from \"zod\";\n\nimport { useEffect, useMemo, useRef, useState, useTransition } from \"react\";\n\nimport { useRouter } from \"next/navigation\";\n\nimport { useIframeRpcChannel } from \"replo-utils/react/use-iframe-rpc-channel\";\nimport {\n  COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID,\n  COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION,\n  COMPONENT_PREVIEW_PARENT_ORIGIN_PARAM,\n  componentPreviewToWebsiteBuilderMethodConfig,\n  websiteBuilderToComponentPreviewMethodConfig,\n} from \"schemas/componentPreview\";\nimport {\n  createIframeRpcChannel,\n  createIframeRpcRemote,\n} from \"schemas/iframeRpcChannel\";\n\nimport { getComponentPreviewHref } from \"./component-preview-href\";\nimport {\n  mergeClientProps,\n  productReferencesChanged,\n} from \"./component-preview-props\";\n\ntype SetPropsInput = z.output<\n  (typeof websiteBuilderToComponentPreviewMethodConfig)[\"setProps\"][\"inputSchema\"]\n>;\ntype SetPropsResult = z.output<\n  (typeof websiteBuilderToComponentPreviewMethodConfig)[\"setProps\"][\"outputSchema\"]\n>;\n\nfunction getParentOrigin(): string | null {\n  const fromQuery = new URLSearchParams(window.location.search).get(\n    COMPONENT_PREVIEW_PARENT_ORIGIN_PARAM,\n  );\n  if (fromQuery) {\n    try {\n      return new URL(fromQuery).origin;\n    } catch {\n      return null;\n    }\n  }\n  return document.referrer ? new URL(document.referrer).origin : null;\n}\n\nfunction getCurrentHref() {\n  return `${window.location.pathname}${window.location.search}${window.location.hash}`;\n}\n\n// Child side of the preview channel: announces readiness on subscribe and\n// routes incoming setProps calls to the caller. React Doctor rejects passing a\n// useEffectEvent result into channel handlers, so freshness comes from a plain\n// ref the stable closure reads at call time.\nfunction useComponentPreviewChannel(\n  onSetProps: (input: SetPropsInput) => Promise<SetPropsResult>,\n) {\n  const onSetPropsRef = useRef(onSetProps);\n  onSetPropsRef.current = onSetProps;\n  useIframeRpcChannel(\n    useMemo(() => {\n      if (typeof window === \"undefined\") {\n        return null;\n      }\n      const parentOrigin = getParentOrigin();\n      if (!parentOrigin) {\n        return null;\n      }\n      const rpcChannel = createIframeRpcChannel({\n        subscriberWindow: window,\n        channelIdentifier: COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID,\n        version: COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION,\n        getTargetWindow: () => {\n          return window.parent === window ? null : window.parent;\n        },\n        targetOrigin: parentOrigin,\n        isExpectedMessage: (event) => {\n          return (\n            event.source === window.parent && event.origin === parentOrigin\n          );\n        },\n        outgoingMethods: componentPreviewToWebsiteBuilderMethodConfig,\n        incomingMethods: websiteBuilderToComponentPreviewMethodConfig,\n        handlers: {\n          setProps: (input) => onSetPropsRef.current(input),\n        },\n      });\n      return {\n        ...rpcChannel,\n        subscribe() {\n          const unsubscribe = rpcChannel.subscribe();\n          createIframeRpcRemote(rpcChannel).iframeReady();\n          return unsubscribe;\n        },\n      };\n    }, []),\n  );\n}\n\n// Server-render an in-frame navigation and resolve once the transition\n// settles, so the parent's ack tracks the actual repaint.\nfunction useNavigateAndSettle() {\n  const router = useRouter();\n  const [isNavigationPending, startNavigation] = useTransition();\n  const settleResolvers = useRef<(() => void)[]>([]);\n  // eslint-disable-next-line replo/no-use-effect -- Resolves promises held by the RPC channel, an external system, once the navigation transition settles.\n  useEffect(() => {\n    if (!isNavigationPending) {\n      const resolvers = settleResolvers.current;\n      settleResolvers.current = [];\n      for (const resolve of resolvers) {\n        resolve();\n      }\n    }\n  }, [isNavigationPending]);\n  // A navigation that never settles (a hung RSC fetch) never resolves \u2014 the\n  // parent's channel timeout turns that into the disconnected state, and the\n  // caller's refs stay uncommitted so the next sync retries the navigation.\n  return (href: string) => {\n    return new Promise<void>((resolve) => {\n      settleResolvers.current.push(resolve);\n      startNavigation(() => {\n        router.replace(href, { scroll: false });\n      });\n    });\n  };\n}\n\nexport function ComponentPreviewNavigation() {\n  const navigateAndSettle = useNavigateAndSettle();\n  useComponentPreviewChannel(\n    async ({ props, sourceRevision }): Promise<SetPropsResult> => {\n      const nextHref = getComponentPreviewHref({\n        currentUrl: window.location.href,\n        props,\n        sourceRevision,\n      });\n      if (nextHref === getCurrentHref()) {\n        return { mode: \"unchanged\" };\n      }\n      await navigateAndSettle(nextHref);\n      return { mode: \"navigation\" };\n    },\n  );\n  return null;\n}\n\nexport function ComponentPreviewStage({\n  Component,\n  initialProps,\n  initialRawProps,\n  initialSourceRevision,\n}: {\n  Component: ComponentType<Record<string, unknown>>;\n  initialProps: Record<string, unknown>;\n  initialRawProps: Record<string, unknown>;\n  initialSourceRevision: string;\n}) {\n  const [props, setProps] = useState(initialProps);\n  // A fresh server render (mount or in-frame navigation) is authoritative;\n  // its props replace whatever the client store held.\n  const [lastInitialProps, setLastInitialProps] = useState(initialProps);\n  if (initialProps !== lastInitialProps) {\n    setLastInitialProps(initialProps);\n    setProps(initialProps);\n  }\n  const propsRef = useRef(props);\n  propsRef.current = props;\n  const lastRawPropsRef = useRef(initialRawProps);\n  const lastSourceRevisionRef = useRef(initialSourceRevision);\n  const navigateAndSettle = useNavigateAndSettle();\n\n  useComponentPreviewChannel(\n    async ({\n      props: nextRawProps,\n      sourceRevision,\n    }): Promise<SetPropsResult> => {\n      const nextHref = getComponentPreviewHref({\n        currentUrl: window.location.href,\n        props: nextRawProps,\n        sourceRevision,\n      });\n      if (nextHref === getCurrentHref()) {\n        return { mode: \"unchanged\" };\n      }\n      if (\n        sourceRevision !== lastSourceRevisionRef.current ||\n        productReferencesChanged({\n          previous: lastRawPropsRef.current,\n          next: nextRawProps,\n        })\n      ) {\n        await navigateAndSettle(nextHref);\n        lastRawPropsRef.current = nextRawProps;\n        lastSourceRevisionRef.current = sourceRevision;\n        return { mode: \"navigation\" };\n      }\n      setProps(\n        mergeClientProps({\n          currentResolved: propsRef.current,\n          nextRaw: nextRawProps,\n        }),\n      );\n      lastRawPropsRef.current = nextRawProps;\n      // Keep the URL canonical without a server round trip, so a manual frame\n      // reload restores the current props and the unchanged-check stays exact.\n      window.history.replaceState(null, \"\", nextHref);\n      return { mode: \"client\" };\n    },\n  );\n\n  return <Component {...props} />;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/next/component-preview-props.d.ts

@@ -0,0 +1,8 @@
+export declare function productReferencesChanged({ previous, next, }: {
+    previous: Record<string, unknown>;
+    next: Record<string, unknown>;
+}): boolean;
+export declare function mergeClientProps({ currentResolved, nextRaw, }: {
+    currentResolved: Record<string, unknown>;
+    nextRaw: Record<string, unknown>;
+}): Record<string, unknown>;

package/next/component-preview-props.js

@@ -0,0 +1,36 @@
+import { componentPreviewProductReferenceSchema } from "../_vendor/schemas/componentPreview.mjs";
+function isProductReference(value) {
+  return componentPreviewProductReferenceSchema.safeParse(value).success;
+}
+function productReferencesChanged({
+  previous,
+  next
+}) {
+  const names = /* @__PURE__ */ new Set([...Object.keys(previous), ...Object.keys(next)]);
+  for (const name of names) {
+    const previousIsReference = isProductReference(previous[name]);
+    const nextIsReference = isProductReference(next[name]);
+    if (!previousIsReference && !nextIsReference) {
+      continue;
+    }
+    if (previousIsReference !== nextIsReference || JSON.stringify(previous[name]) !== JSON.stringify(next[name])) {
+      return true;
+    }
+  }
+  return false;
+}
+function mergeClientProps({
+  currentResolved,
+  nextRaw
+}) {
+  return Object.fromEntries(
+    Object.entries(nextRaw).map(([name, value]) => {
+      return isProductReference(value) ? [name, currentResolved[name]] : [name, value];
+    })
+  );
+}
+export {
+  mergeClientProps,
+  productReferencesChanged
+};
+//# sourceMappingURL=component-preview-props.js.map

package/next/component-preview-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../next/component-preview-props.ts"],
+  "sourcesContent": ["import { componentPreviewProductReferenceSchema } from \"schemas/componentPreview\";\n\nfunction isProductReference(value: unknown) {\n  return componentPreviewProductReferenceSchema.safeParse(value).success;\n}\n\n// Product references need the server loader, so any change to one forces the\n// navigation path; everything else can apply in place.\nexport function productReferencesChanged({\n  previous,\n  next,\n}: {\n  previous: Record<string, unknown>;\n  next: Record<string, unknown>;\n}): boolean {\n  const names = new Set([...Object.keys(previous), ...Object.keys(next)]);\n  for (const name of names) {\n    const previousIsReference = isProductReference(previous[name]);\n    const nextIsReference = isProductReference(next[name]);\n    if (!previousIsReference && !nextIsReference) {\n      continue;\n    }\n    if (\n      previousIsReference !== nextIsReference ||\n      JSON.stringify(previous[name]) !== JSON.stringify(next[name])\n    ) {\n      return true;\n    }\n  }\n  return false;\n}\n\n// Builds the next client-store props from an incoming raw payload: raw product\n// references are swapped for the already-resolved values in the current store\n// (only unchanged references reach this path \u2014 changed ones forced navigation),\n// and every other prop takes the incoming value. Keys absent from the payload\n// are dropped so the component's own defaults return.\nexport function mergeClientProps({\n  currentResolved,\n  nextRaw,\n}: {\n  currentResolved: Record<string, unknown>;\n  nextRaw: Record<string, unknown>;\n}): Record<string, unknown> {\n  return Object.fromEntries(\n    Object.entries(nextRaw).map(([name, value]) => {\n      return isProductReference(value)\n        ? [name, currentResolved[name]]\n        : [name, value];\n    }),\n  );\n}\n"],
+  "mappings": "AAAA,SAAS,8CAA8C;AAEvD,SAAS,mBAAmB,OAAgB;AAC1C,SAAO,uCAAuC,UAAU,KAAK,EAAE;AACjE;AAIO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AACF,GAGY;AACV,QAAM,QAAQ,oBAAI,IAAI,CAAC,GAAG,OAAO,KAAK,QAAQ,GAAG,GAAG,OAAO,KAAK,IAAI,CAAC,CAAC;AACtE,aAAW,QAAQ,OAAO;AACxB,UAAM,sBAAsB,mBAAmB,SAAS,IAAI,CAAC;AAC7D,UAAM,kBAAkB,mBAAmB,KAAK,IAAI,CAAC;AACrD,QAAI,CAAC,uBAAuB,CAAC,iBAAiB;AAC5C;AAAA,IACF;AACA,QACE,wBAAwB,mBACxB,KAAK,UAAU,SAAS,IAAI,CAAC,MAAM,KAAK,UAAU,KAAK,IAAI,CAAC,GAC5D;AACA,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAOO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAG4B;AAC1B,SAAO,OAAO;AAAA,IACZ,OAAO,QAAQ,OAAO,EAAE,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM;AAC7C,aAAO,mBAAmB,KAAK,IAC3B,CAAC,MAAM,gBAAgB,IAAI,CAAC,IAC5B,CAAC,MAAM,KAAK;AAAA,IAClB,CAAC;AAAA,EACH;AACF;",
+  "names": []
+}

package/next/component-preview.d.ts

@@ -1,9 +1,11 @@
 import type { ComponentType } from "react";
 import type { ComponentPreviewProductReference } from "../_vendor/schemas/generated/componentPreview";
 export declare function createComponentPreviewPage(Component: ComponentType<Record<string, unknown>>, options?: {
-    getProduct: (reference: ComponentPreviewProductReference) => Promise<unknown>;
+    getProduct?: (reference: ComponentPreviewProductReference) => Promise<unknown>;
+    interactive?: boolean;
 }): ({ searchParams, }: {
     searchParams: Promise<{
         props?: string | string[];
+        sourceRevision?: string | string[];
     }>;
 }) => Promise<import("react/jsx-runtime").JSX.Element>;

package/next/component-preview.js

@@ -6,48 +6,43 @@ import {
 } from "../_vendor/schemas/componentPreview.mjs";
 import { DocumentReadyBeacon } from "../DocumentReadyBeacon";
 import { NextErrorReporter } from "../NextErrorReporter";
-import { ComponentPreviewNavigation } from "./component-preview-navigation";
-const BLOCKED_PROP_NAMES = /* @__PURE__ */ new Set([
-  "__proto__",
-  "constructor",
-  "dangerouslySetInnerHTML"
-]);
+import {
+  ComponentPreviewNavigation,
+  ComponentPreviewStage
+} from "./component-preview-client";
 async function getPreviewProps({
   value,
   getProduct
 }) {
   const previewPropsResult = componentPreviewPropsSchema.safeParse(value);
   if (!previewPropsResult.success) {
-    return {};
+    return { rawProps: {}, resolvedProps: {} };
   }
-  const previewProps = {};
+  const rawProps = {};
+  const resolvedProps = {};
   for (const [name, propValue] of Object.entries(previewPropsResult.data)) {
-    if (BLOCKED_PROP_NAMES.has(name)) {
-      continue;
-    }
+    rawProps[name] = propValue;
     const productReferenceResult = componentPreviewProductReferenceSchema.safeParse(propValue);
     if (!productReferenceResult.success) {
-      previewProps[name] = propValue;
+      resolvedProps[name] = propValue;
       continue;
     }
-    if (getProduct) {
-      previewProps[name] = await getProduct(productReferenceResult.data);
-    }
+    resolvedProps[name] = getProduct ? await getProduct(productReferenceResult.data) : propValue;
   }
-  return previewProps;
+  return { rawProps, resolvedProps };
 }
 async function parseProps({
   value,
   getProduct
 }) {
   if (typeof value !== "string" || new TextEncoder().encode(value).byteLength > MAX_COMPONENT_PREVIEW_PROPS_BYTES) {
-    return {};
+    return { rawProps: {}, resolvedProps: {} };
   }
   let parsed;
   try {
     parsed = JSON.parse(value);
   } catch {
-    return {};
+    return { rawProps: {}, resolvedProps: {} };
   }
   return await getPreviewProps({ value: parsed, getProduct });
 }
@@ -55,15 +50,31 @@ function createComponentPreviewPage(Component, options) {
   return async function ComponentPreviewPage({
     searchParams
   }) {
-    const props = await parseProps({
-      value: (await searchParams).props,
+    const resolvedSearchParams = await searchParams;
+    const { rawProps, resolvedProps } = await parseProps({
+      value: resolvedSearchParams.props,
       getProduct: options?.getProduct
     });
+    if (options?.interactive) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DocumentReadyBeacon, {}),
+        /* @__PURE__ */ jsx(NextErrorReporter, {}),
+        /* @__PURE__ */ jsx(
+          ComponentPreviewStage,
+          {
+            Component,
+            initialProps: resolvedProps,
+            initialRawProps: rawProps,
+            initialSourceRevision: typeof resolvedSearchParams.sourceRevision === "string" ? resolvedSearchParams.sourceRevision : ""
+          }
+        )
+      ] });
+    }
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ComponentPreviewNavigation, {}),
       /* @__PURE__ */ jsx(DocumentReadyBeacon, {}),
       /* @__PURE__ */ jsx(NextErrorReporter, {}),
-      /* @__PURE__ */ jsx(Component, { ...props })
+      /* @__PURE__ */ jsx(Component, { ...resolvedProps })
     ] });
   };
 }

package/next/component-preview.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../next/component-preview.tsx"],
-  "sourcesContent": ["import type { ComponentType } from \"react\";\nimport type { ComponentPreviewProductReference } from \"schemas/generated/componentPreview\";\n\nimport {\n  componentPreviewProductReferenceSchema,\n  componentPreviewPropsSchema,\n  MAX_COMPONENT_PREVIEW_PROPS_BYTES,\n} from \"schemas/componentPreview\";\n\nimport { DocumentReadyBeacon } from \"../DocumentReadyBeacon\";\nimport { NextErrorReporter } from \"../NextErrorReporter\";\nimport { ComponentPreviewNavigation } from \"./component-preview-navigation\";\n\nconst BLOCKED_PROP_NAMES = new Set([\n  \"__proto__\",\n  \"constructor\",\n  \"dangerouslySetInnerHTML\",\n]);\n\nasync function getPreviewProps({\n  value,\n  getProduct,\n}: {\n  value: unknown;\n  getProduct?: (\n    reference: ComponentPreviewProductReference,\n  ) => Promise<unknown>;\n}): Promise<Record<string, unknown>> {\n  const previewPropsResult = componentPreviewPropsSchema.safeParse(value);\n  if (!previewPropsResult.success) {\n    return {};\n  }\n\n  const previewProps: Record<string, unknown> = {};\n  for (const [name, propValue] of Object.entries(previewPropsResult.data)) {\n    if (BLOCKED_PROP_NAMES.has(name)) {\n      continue;\n    }\n    const productReferenceResult =\n      componentPreviewProductReferenceSchema.safeParse(propValue);\n    if (!productReferenceResult.success) {\n      previewProps[name] = propValue;\n      continue;\n    }\n    if (getProduct) {\n      previewProps[name] = await getProduct(productReferenceResult.data);\n    }\n  }\n  return previewProps;\n}\n\nasync function parseProps({\n  value,\n  getProduct,\n}: {\n  value: string | string[] | undefined;\n  getProduct?: (\n    reference: ComponentPreviewProductReference,\n  ) => Promise<unknown>;\n}) {\n  if (\n    typeof value !== \"string\" ||\n    new TextEncoder().encode(value).byteLength >\n      MAX_COMPONENT_PREVIEW_PROPS_BYTES\n  ) {\n    return {};\n  }\n  let parsed: unknown;\n  try {\n    parsed = JSON.parse(value);\n  } catch {\n    return {};\n  }\n  return await getPreviewProps({ value: parsed, getProduct });\n}\n\nexport function createComponentPreviewPage(\n  Component: ComponentType<Record<string, unknown>>,\n  options?: {\n    getProduct: (\n      reference: ComponentPreviewProductReference,\n    ) => Promise<unknown>;\n  },\n) {\n  return async function ComponentPreviewPage({\n    searchParams,\n  }: {\n    searchParams: Promise<{ props?: string | string[] }>;\n  }) {\n    const props = await parseProps({\n      value: (await searchParams).props,\n      getProduct: options?.getProduct,\n    });\n    return (\n      <>\n        <ComponentPreviewNavigation />\n        <DocumentReadyBeacon />\n        <NextErrorReporter />\n        <Component {...props} />\n      </>\n    );\n  };\n}\n"],
-  "mappings": "AA8FM,mBACE,KADF;AA3FN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,kCAAkC;AAE3C,MAAM,qBAAqB,oBAAI,IAAI;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAED,eAAe,gBAAgB;AAAA,EAC7B;AAAA,EACA;AACF,GAKqC;AACnC,QAAM,qBAAqB,4BAA4B,UAAU,KAAK;AACtE,MAAI,CAAC,mBAAmB,SAAS;AAC/B,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,eAAwC,CAAC;AAC/C,aAAW,CAAC,MAAM,SAAS,KAAK,OAAO,QAAQ,mBAAmB,IAAI,GAAG;AACvE,QAAI,mBAAmB,IAAI,IAAI,GAAG;AAChC;AAAA,IACF;AACA,UAAM,yBACJ,uCAAuC,UAAU,SAAS;AAC5D,QAAI,CAAC,uBAAuB,SAAS;AACnC,mBAAa,IAAI,IAAI;AACrB;AAAA,IACF;AACA,QAAI,YAAY;AACd,mBAAa,IAAI,IAAI,MAAM,WAAW,uBAAuB,IAAI;AAAA,IACnE;AAAA,EACF;AACA,SAAO;AACT;AAEA,eAAe,WAAW;AAAA,EACxB;AAAA,EACA;AACF,GAKG;AACD,MACE,OAAO,UAAU,YACjB,IAAI,YAAY,EAAE,OAAO,KAAK,EAAE,aAC9B,mCACF;AACA,WAAO,CAAC;AAAA,EACV;AACA,MAAI;AACJ,MAAI;AACF,aAAS,KAAK,MAAM,KAAK;AAAA,EAC3B,QAAQ;AACN,WAAO,CAAC;AAAA,EACV;AACA,SAAO,MAAM,gBAAgB,EAAE,OAAO,QAAQ,WAAW,CAAC;AAC5D;AAEO,SAAS,2BACd,WACA,SAKA;AACA,SAAO,eAAe,qBAAqB;AAAA,IACzC;AAAA,EACF,GAEG;AACD,UAAM,QAAQ,MAAM,WAAW;AAAA,MAC7B,QAAQ,MAAM,cAAc;AAAA,MAC5B,YAAY,SAAS;AAAA,IACvB,CAAC;AACD,WACE,iCACE;AAAA,0BAAC,8BAA2B;AAAA,MAC5B,oBAAC,uBAAoB;AAAA,MACrB,oBAAC,qBAAkB;AAAA,MACnB,oBAAC,aAAW,GAAG,OAAO;AAAA,OACxB;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import type { ComponentType } from \"react\";\nimport type { ComponentPreviewProductReference } from \"schemas/generated/componentPreview\";\n\nimport {\n  componentPreviewProductReferenceSchema,\n  componentPreviewPropsSchema,\n  MAX_COMPONENT_PREVIEW_PROPS_BYTES,\n} from \"schemas/componentPreview\";\n\nimport { DocumentReadyBeacon } from \"../DocumentReadyBeacon\";\nimport { NextErrorReporter } from \"../NextErrorReporter\";\nimport {\n  ComponentPreviewNavigation,\n  ComponentPreviewStage,\n} from \"./component-preview-client\";\n\nasync function getPreviewProps({\n  value,\n  getProduct,\n}: {\n  value: unknown;\n  getProduct?: (\n    reference: ComponentPreviewProductReference,\n  ) => Promise<unknown>;\n}): Promise<{\n  rawProps: Record<string, unknown>;\n  resolvedProps: Record<string, unknown>;\n}> {\n  const previewPropsResult = componentPreviewPropsSchema.safeParse(value);\n  if (!previewPropsResult.success) {\n    return { rawProps: {}, resolvedProps: {} };\n  }\n\n  const rawProps: Record<string, unknown> = {};\n  const resolvedProps: Record<string, unknown> = {};\n  for (const [name, propValue] of Object.entries(previewPropsResult.data)) {\n    rawProps[name] = propValue;\n    const productReferenceResult =\n      componentPreviewProductReferenceSchema.safeParse(propValue);\n    if (!productReferenceResult.success) {\n      resolvedProps[name] = propValue;\n      continue;\n    }\n    // Without a resolver the raw reference passes through rather than the prop\n    // silently vanishing; the component sees exactly what the URL carried.\n    resolvedProps[name] = getProduct\n      ? await getProduct(productReferenceResult.data)\n      : propValue;\n  }\n  return { rawProps, resolvedProps };\n}\n\nasync function parseProps({\n  value,\n  getProduct,\n}: {\n  value: string | string[] | undefined;\n  getProduct?: (\n    reference: ComponentPreviewProductReference,\n  ) => Promise<unknown>;\n}) {\n  if (\n    typeof value !== \"string\" ||\n    new TextEncoder().encode(value).byteLength >\n      MAX_COMPONENT_PREVIEW_PROPS_BYTES\n  ) {\n    return { rawProps: {}, resolvedProps: {} };\n  }\n  let parsed: unknown;\n  try {\n    parsed = JSON.parse(value);\n  } catch {\n    return { rawProps: {}, resolvedProps: {} };\n  }\n  return await getPreviewProps({ value: parsed, getProduct });\n}\n\nexport function createComponentPreviewPage(\n  Component: ComponentType<Record<string, unknown>>,\n  options?: {\n    getProduct?: (\n      reference: ComponentPreviewProductReference,\n    ) => Promise<unknown>;\n    // Interactive components (\"use client\" in the component file) render\n    // inside the client prop stage so plain prop edits apply without a server\n    // round trip. Server components can only re-render via navigation.\n    interactive?: boolean;\n  },\n) {\n  return async function ComponentPreviewPage({\n    searchParams,\n  }: {\n    searchParams: Promise<{\n      props?: string | string[];\n      sourceRevision?: string | string[];\n    }>;\n  }) {\n    const resolvedSearchParams = await searchParams;\n    const { rawProps, resolvedProps } = await parseProps({\n      value: resolvedSearchParams.props,\n      getProduct: options?.getProduct,\n    });\n    if (options?.interactive) {\n      return (\n        <>\n          <DocumentReadyBeacon />\n          <NextErrorReporter />\n          <ComponentPreviewStage\n            Component={Component}\n            initialProps={resolvedProps}\n            initialRawProps={rawProps}\n            initialSourceRevision={\n              typeof resolvedSearchParams.sourceRevision === \"string\"\n                ? resolvedSearchParams.sourceRevision\n                : \"\"\n            }\n          />\n        </>\n      );\n    }\n    return (\n      <>\n        <ComponentPreviewNavigation />\n        <DocumentReadyBeacon />\n        <NextErrorReporter />\n        <Component {...resolvedProps} />\n      </>\n    );\n  };\n}\n"],
+  "mappings": "AAwGQ,mBACE,KADF;AArGR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,eAAe,gBAAgB;AAAA,EAC7B;AAAA,EACA;AACF,GAQG;AACD,QAAM,qBAAqB,4BAA4B,UAAU,KAAK;AACtE,MAAI,CAAC,mBAAmB,SAAS;AAC/B,WAAO,EAAE,UAAU,CAAC,GAAG,eAAe,CAAC,EAAE;AAAA,EAC3C;AAEA,QAAM,WAAoC,CAAC;AAC3C,QAAM,gBAAyC,CAAC;AAChD,aAAW,CAAC,MAAM,SAAS,KAAK,OAAO,QAAQ,mBAAmB,IAAI,GAAG;AACvE,aAAS,IAAI,IAAI;AACjB,UAAM,yBACJ,uCAAuC,UAAU,SAAS;AAC5D,QAAI,CAAC,uBAAuB,SAAS;AACnC,oBAAc,IAAI,IAAI;AACtB;AAAA,IACF;AAGA,kBAAc,IAAI,IAAI,aAClB,MAAM,WAAW,uBAAuB,IAAI,IAC5C;AAAA,EACN;AACA,SAAO,EAAE,UAAU,cAAc;AACnC;AAEA,eAAe,WAAW;AAAA,EACxB;AAAA,EACA;AACF,GAKG;AACD,MACE,OAAO,UAAU,YACjB,IAAI,YAAY,EAAE,OAAO,KAAK,EAAE,aAC9B,mCACF;AACA,WAAO,EAAE,UAAU,CAAC,GAAG,eAAe,CAAC,EAAE;AAAA,EAC3C;AACA,MAAI;AACJ,MAAI;AACF,aAAS,KAAK,MAAM,KAAK;AAAA,EAC3B,QAAQ;AACN,WAAO,EAAE,UAAU,CAAC,GAAG,eAAe,CAAC,EAAE;AAAA,EAC3C;AACA,SAAO,MAAM,gBAAgB,EAAE,OAAO,QAAQ,WAAW,CAAC;AAC5D;AAEO,SAAS,2BACd,WACA,SASA;AACA,SAAO,eAAe,qBAAqB;AAAA,IACzC;AAAA,EACF,GAKG;AACD,UAAM,uBAAuB,MAAM;AACnC,UAAM,EAAE,UAAU,cAAc,IAAI,MAAM,WAAW;AAAA,MACnD,OAAO,qBAAqB;AAAA,MAC5B,YAAY,SAAS;AAAA,IACvB,CAAC;AACD,QAAI,SAAS,aAAa;AACxB,aACE,iCACE;AAAA,4BAAC,uBAAoB;AAAA,QACrB,oBAAC,qBAAkB;AAAA,QACnB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAc;AAAA,YACd,iBAAiB;AAAA,YACjB,uBACE,OAAO,qBAAqB,mBAAmB,WAC3C,qBAAqB,iBACrB;AAAA;AAAA,QAER;AAAA,SACF;AAAA,IAEJ;AACA,WACE,iCACE;AAAA,0BAAC,8BAA2B;AAAA,MAC5B,oBAAC,uBAAoB;AAAA,MACrB,oBAAC,qBAAkB;AAAA,MACnB,oBAAC,aAAW,GAAG,eAAe;AAAA,OAChC;AAAA,EAEJ;AACF;",
   "names": []
 }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.0.1",
+    "version": "1.2.0",
     "branch": "HEAD",
-    "commit": "9fc57a3ef1d06689e70fe0d90c25c03717e37d03",
-    "builtAt": "2026-08-19T22:39:33.469Z"
+    "commit": "0460cd76d21b76aeefd6d972a25dab1b917d34d0",
+    "builtAt": "2026-08-25T19:38:53.050Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",
@@ -21,6 +21,10 @@
       "types": "./next/component-preview.d.ts",
       "default": "./next/component-preview.js"
     },
+    "./next/component-preview-client": {
+      "types": "./next/component-preview-client.d.ts",
+      "default": "./next/component-preview-client.js"
+    },
     "./next/config": {
       "types": "./next/config.d.ts",
       "default": "./next/config.js"

package/select-mode/displayModeStore.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../select-mode/displayModeStore.ts"],
-  "sourcesContent": ["\"use client\";\n\nimport type { DisplayMode } from \"schemas/generated/selectMode\";\n\nimport { useSyncExternalStore } from \"react\";\n\n/**\n * Framework-agnostic singleton for the preview iframe's select-mode display\n * mode (\"browse\" vs \"selection\"). It lives as a module singleton so that\n * components that don't share a provider ancestor \u2014 `EditorSelection` (which\n * owns the pointer/selection machinery) and `LinkInterceptor` (a sibling under\n * `ReploProvider`) \u2014 can agree on whether the user is currently selecting.\n *\n * `LinkInterceptor` needs this because in agent-preview mode it turns\n * same-origin link clicks into a `replo:navigate` postMessage (SPA-style\n * navigation of the preview). While select mode is active that navigation must\n * stand down so a link click selects the element instead of leaving the page \u2014\n * the two capture-phase click listeners otherwise race, and `stopPropagation`\n * can't suppress a sibling listener on the same node.\n *\n * @author Noah Gilmore 2026-07-23\n */\n\nconst listeners = new Set<() => void>();\nlet displayMode: DisplayMode = \"browse\";\n\n// select-mode DOM behavior is client-only, so the server snapshot is a stable\n// constant and never causes a hydration mismatch.\nconst SERVER_SNAPSHOT: DisplayMode = \"browse\";\n\nfunction notify() {\n  for (const listener of listeners) {\n    listener();\n  }\n}\n\nexport const displayModeStore = {\n  getSnapshot(): DisplayMode {\n    return displayMode;\n  },\n  getServerSnapshot(): DisplayMode {\n    return SERVER_SNAPSHOT;\n  },\n  subscribe(listener: () => void): () => void {\n    listeners.add(listener);\n    return () => {\n      listeners.delete(listener);\n    };\n  },\n  setDisplayMode(nextDisplayMode: DisplayMode) {\n    if (nextDisplayMode === displayMode) {\n      return;\n    }\n    displayMode = nextDisplayMode;\n    notify();\n  },\n  /** Test-only: reset back to the default so specs don't leak state. */\n  reset() {\n    displayMode = \"browse\";\n  },\n};\n\nexport function useDisplayMode(): DisplayMode {\n  return useSyncExternalStore(\n    displayModeStore.subscribe,\n    displayModeStore.getSnapshot,\n    displayModeStore.getServerSnapshot,\n  );\n}\n"],
+  "sourcesContent": ["\"use client\";\n\nimport type { DisplayMode } from \"schemas/generated/selectMode\";\n\nimport { useSyncExternalStore } from \"react\";\n\n/**\n * Framework-agnostic singleton for the preview iframe's select-mode display\n * mode (\"browse\" vs \"selection\"). It lives as a module singleton so that\n * components that don't share a provider ancestor \u2014 `EditorSelection` (which\n * owns the pointer/selection machinery) and `LinkInterceptor` (a sibling under\n * `ReploProvider`) \u2014 can agree on whether the user is currently selecting.\n *\n * `LinkInterceptor` needs this because in agent-preview mode it observes\n * same-origin link clicks and reports the resulting navigation to the parent\n * editor (`replo:navigated`). While select mode is active that must stand\n * down so a link click selects the element instead of leaving the page \u2014\n * the two capture-phase click listeners otherwise race, and `stopPropagation`\n * can't suppress a sibling listener on the same node.\n *\n * @author Noah Gilmore 2026-07-23\n */\n\nconst listeners = new Set<() => void>();\nlet displayMode: DisplayMode = \"browse\";\n\n// select-mode DOM behavior is client-only, so the server snapshot is a stable\n// constant and never causes a hydration mismatch.\nconst SERVER_SNAPSHOT: DisplayMode = \"browse\";\n\nfunction notify() {\n  for (const listener of listeners) {\n    listener();\n  }\n}\n\nexport const displayModeStore = {\n  getSnapshot(): DisplayMode {\n    return displayMode;\n  },\n  getServerSnapshot(): DisplayMode {\n    return SERVER_SNAPSHOT;\n  },\n  subscribe(listener: () => void): () => void {\n    listeners.add(listener);\n    return () => {\n      listeners.delete(listener);\n    };\n  },\n  setDisplayMode(nextDisplayMode: DisplayMode) {\n    if (nextDisplayMode === displayMode) {\n      return;\n    }\n    displayMode = nextDisplayMode;\n    notify();\n  },\n  /** Test-only: reset back to the default so specs don't leak state. */\n  reset() {\n    displayMode = \"browse\";\n  },\n};\n\nexport function useDisplayMode(): DisplayMode {\n  return useSyncExternalStore(\n    displayModeStore.subscribe,\n    displayModeStore.getSnapshot,\n    displayModeStore.getServerSnapshot,\n  );\n}\n"],
   "mappings": ";AAIA,SAAS,4BAA4B;AAmBrC,MAAM,YAAY,oBAAI,IAAgB;AACtC,IAAI,cAA2B;AAI/B,MAAM,kBAA+B;AAErC,SAAS,SAAS;AAChB,aAAW,YAAY,WAAW;AAChC,aAAS;AAAA,EACX;AACF;AAEO,MAAM,mBAAmB;AAAA,EAC9B,cAA2B;AACzB,WAAO;AAAA,EACT;AAAA,EACA,oBAAiC;AAC/B,WAAO;AAAA,EACT;AAAA,EACA,UAAU,UAAkC;AAC1C,cAAU,IAAI,QAAQ;AACtB,WAAO,MAAM;AACX,gBAAU,OAAO,QAAQ;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,eAAe,iBAA8B;AAC3C,QAAI,oBAAoB,aAAa;AACnC;AAAA,IACF;AACA,kBAAc;AACd,WAAO;AAAA,EACT;AAAA;AAAA,EAEA,QAAQ;AACN,kBAAc;AAAA,EAChB;AACF;AAEO,SAAS,iBAA8B;AAC5C,SAAO;AAAA,IACL,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,EACnB;AACF;",
   "names": []
 }

package/next/component-preview-navigation.d.ts

@@ -1 +0,0 @@
-export declare function ComponentPreviewNavigation(): null;

package/next/component-preview-navigation.js

@@ -1,66 +0,0 @@
-"use client";
-import { useMemo } from "react";
-import { useRouter } from "next/navigation";
-import { useIframeRpcChannel } from "../_vendor/replo-utils/react/use-iframe-rpc-channel.mjs";
-import {
-  COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID,
-  COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION,
-  componentPreviewToWebsiteBuilderMethodConfig,
-  websiteBuilderToComponentPreviewMethodConfig
-} from "../_vendor/schemas/componentPreview.mjs";
-import {
-  createIframeRpcChannel,
-  createIframeRpcRemote
-} from "../_vendor/schemas/iframeRpcChannel.mjs";
-import { getComponentPreviewHref } from "./component-preview-href";
-function ComponentPreviewNavigation() {
-  const router = useRouter();
-  useIframeRpcChannel(
-    useMemo(() => {
-      if (typeof window === "undefined" || !document.referrer) {
-        return null;
-      }
-      const parentOrigin = new URL(document.referrer).origin;
-      const rpcChannel = createIframeRpcChannel({
-        subscriberWindow: window,
-        channelIdentifier: COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID,
-        version: COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION,
-        getTargetWindow: () => {
-          return window.parent === window ? null : window.parent;
-        },
-        targetOrigin: parentOrigin,
-        isExpectedMessage: (event) => {
-          return event.source === window.parent && event.origin === parentOrigin;
-        },
-        outgoingMethods: componentPreviewToWebsiteBuilderMethodConfig,
-        incomingMethods: websiteBuilderToComponentPreviewMethodConfig,
-        handlers: {
-          setProps: ({ props, sourceRevision }) => {
-            const nextHref = getComponentPreviewHref({
-              currentUrl: window.location.href,
-              props,
-              sourceRevision
-            });
-            const currentHref = `${window.location.pathname}${window.location.search}${window.location.hash}`;
-            if (nextHref !== currentHref) {
-              router.replace(nextHref, { scroll: false });
-            }
-          }
-        }
-      });
-      return {
-        ...rpcChannel,
-        subscribe() {
-          const unsubscribe = rpcChannel.subscribe();
-          createIframeRpcRemote(rpcChannel).iframeReady();
-          return unsubscribe;
-        }
-      };
-    }, [router])
-  );
-  return null;
-}
-export {
-  ComponentPreviewNavigation
-};
-//# sourceMappingURL=component-preview-navigation.js.map

package/next/component-preview-navigation.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../next/component-preview-navigation.tsx"],
-  "sourcesContent": ["\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { useRouter } from \"next/navigation\";\n\nimport { useIframeRpcChannel } from \"replo-utils/react/use-iframe-rpc-channel\";\nimport {\n  COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID,\n  COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION,\n  componentPreviewToWebsiteBuilderMethodConfig,\n  websiteBuilderToComponentPreviewMethodConfig,\n} from \"schemas/componentPreview\";\nimport {\n  createIframeRpcChannel,\n  createIframeRpcRemote,\n} from \"schemas/iframeRpcChannel\";\n\nimport { getComponentPreviewHref } from \"./component-preview-href\";\n\nexport function ComponentPreviewNavigation() {\n  const router = useRouter();\n  useIframeRpcChannel(\n    useMemo(() => {\n      if (typeof window === \"undefined\" || !document.referrer) {\n        return null;\n      }\n      const parentOrigin = new URL(document.referrer).origin;\n      const rpcChannel = createIframeRpcChannel({\n        subscriberWindow: window,\n        channelIdentifier: COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_ID,\n        version: COMPONENT_PREVIEW_IFRAME_RPC_CHANNEL_VERSION,\n        getTargetWindow: () => {\n          return window.parent === window ? null : window.parent;\n        },\n        targetOrigin: parentOrigin,\n        isExpectedMessage: (event) => {\n          return (\n            event.source === window.parent && event.origin === parentOrigin\n          );\n        },\n        outgoingMethods: componentPreviewToWebsiteBuilderMethodConfig,\n        incomingMethods: websiteBuilderToComponentPreviewMethodConfig,\n        handlers: {\n          setProps: ({ props, sourceRevision }) => {\n            const nextHref = getComponentPreviewHref({\n              currentUrl: window.location.href,\n              props,\n              sourceRevision,\n            });\n            const currentHref = `${window.location.pathname}${window.location.search}${window.location.hash}`;\n            if (nextHref !== currentHref) {\n              router.replace(nextHref, { scroll: false });\n            }\n          },\n        },\n      });\n      return {\n        ...rpcChannel,\n        subscribe() {\n          const unsubscribe = rpcChannel.subscribe();\n          createIframeRpcRemote(rpcChannel).iframeReady();\n          return unsubscribe;\n        },\n      };\n    }, [router]),\n  );\n\n  return null;\n}\n"],
-  "mappings": ";AAEA,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAE1B,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,+BAA+B;AAEjC,SAAS,6BAA6B;AAC3C,QAAM,SAAS,UAAU;AACzB;AAAA,IACE,QAAQ,MAAM;AACZ,UAAI,OAAO,WAAW,eAAe,CAAC,SAAS,UAAU;AACvD,eAAO;AAAA,MACT;AACA,YAAM,eAAe,IAAI,IAAI,SAAS,QAAQ,EAAE;AAChD,YAAM,aAAa,uBAAuB;AAAA,QACxC,kBAAkB;AAAA,QAClB,mBAAmB;AAAA,QACnB,SAAS;AAAA,QACT,iBAAiB,MAAM;AACrB,iBAAO,OAAO,WAAW,SAAS,OAAO,OAAO;AAAA,QAClD;AAAA,QACA,cAAc;AAAA,QACd,mBAAmB,CAAC,UAAU;AAC5B,iBACE,MAAM,WAAW,OAAO,UAAU,MAAM,WAAW;AAAA,QAEvD;AAAA,QACA,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,UAAU;AAAA,UACR,UAAU,CAAC,EAAE,OAAO,eAAe,MAAM;AACvC,kBAAM,WAAW,wBAAwB;AAAA,cACvC,YAAY,OAAO,SAAS;AAAA,cAC5B;AAAA,cACA;AAAA,YACF,CAAC;AACD,kBAAM,cAAc,GAAG,OAAO,SAAS,QAAQ,GAAG,OAAO,SAAS,MAAM,GAAG,OAAO,SAAS,IAAI;AAC/F,gBAAI,aAAa,aAAa;AAC5B,qBAAO,QAAQ,UAAU,EAAE,QAAQ,MAAM,CAAC;AAAA,YAC5C;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AACD,aAAO;AAAA,QACL,GAAG;AAAA,QACH,YAAY;AACV,gBAAM,cAAc,WAAW,UAAU;AACzC,gCAAsB,UAAU,EAAE,YAAY;AAC9C,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF,GAAG,CAAC,MAAM,CAAC;AAAA,EACb;AAEA,SAAO;AACT;",
-  "names": []
-}