@replohq/sandbox-runtime 1.0.1 → 1.1.0

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;

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 } from '../../chunk-P5NWJM64.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-P5NWJM64.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.1.0",
   "branch": "HEAD",
-  "commit": "9fc57a3ef1d06689e70fe0d90c25c03717e37d03",
-  "builtAt": "2026-08-19T22:39:33.469Z"
+  "commit": "9293953aa1a314e9bbfd7b614cfdd11181138f00",
+  "builtAt": "2026-08-20T04:27:18.976Z"
 };

package/{chunk-3UFG7XTQ.mjs → chunk-P5NWJM64.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(),

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.1.0",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.0.1",
+    "version": "1.1.0",
     "branch": "HEAD",
-    "commit": "9fc57a3ef1d06689e70fe0d90c25c03717e37d03",
-    "builtAt": "2026-08-19T22:39:33.469Z"
+    "commit": "9293953aa1a314e9bbfd7b614cfdd11181138f00",
+    "builtAt": "2026-08-20T04:27:18.976Z"
   },
   "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/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": []
-}