@replohq/sandbox-runtime 1.22.1 → 1.24.0

package/_vendor/replo-utils/lib/misc.mjs

@@ -1,4 +1,4 @@
 export { coerceNumberToString, deepCloneAndMergeReplacingArrays, errorMessage, exhaustiveSwitch, formatFileSize, getFromRecordOrNull, hasOwnProperty, invariant, isEmpty, isFunction_default as isFunction, isNotNullish, isNullish, isPrimitive, isString_default as isString, mergeReplacingArrays, mergeReplacingObjects, noop, preventDefault, sleep, sleepWithSignal, warning } from '../../../chunk-THOBCJJA.mjs';
-import '../../../chunk-4ITJNSXZ.mjs';
 export { isNumber_default as isNumber } from '../../../chunk-SKVPFN7M.mjs';
+import '../../../chunk-4ITJNSXZ.mjs';
 import '../../../chunk-XYS6G2ZC.mjs';

package/_vendor/schemas/commentsOverlayRpc.mjs

@@ -1,7 +1,7 @@
 import { commentAnchorSchema, displayModeSchema, commentAnchorElementSchema } from '../../chunk-CGRTGQO5.mjs';
 import '../../chunk-THOBCJJA.mjs';
-import '../../chunk-4ITJNSXZ.mjs';
 import '../../chunk-SKVPFN7M.mjs';
+import '../../chunk-4ITJNSXZ.mjs';
 import '../../chunk-XYS6G2ZC.mjs';
 import * as z from 'zod';
 

package/_vendor/schemas/externalNavigationIframeRpc.mjs

@@ -1,8 +1,8 @@
 import { createIframeRpcChannel } from '../../chunk-6WREP7C2.mjs';
 import '../../chunk-ZTT7SNYN.mjs';
 import '../../chunk-THOBCJJA.mjs';
-import '../../chunk-4ITJNSXZ.mjs';
 import '../../chunk-SKVPFN7M.mjs';
+import '../../chunk-4ITJNSXZ.mjs';
 import '../../chunk-XYS6G2ZC.mjs';
 import * as z from 'zod';
 

package/_vendor/schemas/iframeRpcChannel.mjs

@@ -1,6 +1,6 @@
 export { createIframeRpcChannel, createIframeRpcRemote, iframeRpcCallSchema } from '../../chunk-6WREP7C2.mjs';
 import '../../chunk-ZTT7SNYN.mjs';
 import '../../chunk-THOBCJJA.mjs';
-import '../../chunk-4ITJNSXZ.mjs';
 import '../../chunk-SKVPFN7M.mjs';
+import '../../chunk-4ITJNSXZ.mjs';
 import '../../chunk-XYS6G2ZC.mjs';

package/_vendor/schemas/placeholderProductsProtocol.d.ts

@@ -0,0 +1,7 @@
+export declare const PLACEHOLDER_PRODUCTS_IFRAME_RPC_CHANNEL_ID: "replo:placeholder-products-iframe-rpc";
+export declare const PLACEHOLDER_PRODUCTS_IFRAME_RPC_CHANNEL_VERSION: 3;
+export declare const PLACEHOLDER_HERO_PRODUCT_ID = "f0921037-e530-4e67-a612-d573b7c40b19";
+export declare const PLACEHOLDER_PRODUCT_ID = "c53f98cd-0989-4661-a7c2-a0304d184676";
+export type PlaceholderProductId = typeof PLACEHOLDER_HERO_PRODUCT_ID | typeof PLACEHOLDER_PRODUCT_ID;
+export declare const PLACEHOLDER_PRODUCTS_SOURCE_KEY = "__REPLO_PLACEHOLDER_PRODUCTS__";
+export declare const PLACEHOLDER_PRODUCTS_CHANGE_EVENT = "replo:placeholder-products";

package/_vendor/schemas/placeholderProductsProtocol.mjs

@@ -0,0 +1,8 @@
+var PLACEHOLDER_PRODUCTS_IFRAME_RPC_CHANNEL_ID = "replo:placeholder-products-iframe-rpc";
+var PLACEHOLDER_PRODUCTS_IFRAME_RPC_CHANNEL_VERSION = 3;
+var PLACEHOLDER_HERO_PRODUCT_ID = "f0921037-e530-4e67-a612-d573b7c40b19";
+var PLACEHOLDER_PRODUCT_ID = "c53f98cd-0989-4661-a7c2-a0304d184676";
+var PLACEHOLDER_PRODUCTS_SOURCE_KEY = "__REPLO_PLACEHOLDER_PRODUCTS__";
+var PLACEHOLDER_PRODUCTS_CHANGE_EVENT = "replo:placeholder-products";
+
+export { PLACEHOLDER_HERO_PRODUCT_ID, PLACEHOLDER_PRODUCTS_CHANGE_EVENT, PLACEHOLDER_PRODUCTS_IFRAME_RPC_CHANNEL_ID, PLACEHOLDER_PRODUCTS_IFRAME_RPC_CHANNEL_VERSION, PLACEHOLDER_PRODUCTS_SOURCE_KEY, PLACEHOLDER_PRODUCT_ID };

package/_vendor/schemas/previewHealthIframeRpc.mjs

@@ -1,8 +1,8 @@
 import { createIframeRpcChannel } from '../../chunk-6WREP7C2.mjs';
 import '../../chunk-ZTT7SNYN.mjs';
 import '../../chunk-THOBCJJA.mjs';
-import '../../chunk-4ITJNSXZ.mjs';
 import '../../chunk-SKVPFN7M.mjs';
+import '../../chunk-4ITJNSXZ.mjs';
 import '../../chunk-XYS6G2ZC.mjs';
 import * as z from 'zod';
 

package/_vendor/schemas/selectMode.mjs

@@ -1,5 +1,5 @@
 export { SELECT_MODE_SELECTABLE_ATTRIBUTE, SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE, displayModeSchema, getIframeOffset, isSelectedSection, readSelectablePayload, selectModeBoundingRectSchema, selectModeClickPositionSchema, selectModeDefinedStyleSchema, selectModeFiberChainEntrySchema, selectModeFormatCommandSchema, selectModeHoverRectSchema, selectModeImageSchema, selectModeImageScopeSchema, selectModeImageSourceSchema, selectModeInlineTextStatusSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionRectSchema, selectModeSelectionSchema, selectModeSelectionTypeSchema, selectModeSourceLocationSchema, selectModeStyleAtRuleSchema, selectModeStyleVariantSchema, selectModeTextMetricsSchema, selectModeTiptapActiveMarksSchema, selectModeVideoSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement } from '../../chunk-CGRTGQO5.mjs';
 import '../../chunk-THOBCJJA.mjs';
-import '../../chunk-4ITJNSXZ.mjs';
 import '../../chunk-SKVPFN7M.mjs';
+import '../../chunk-4ITJNSXZ.mjs';
 import '../../chunk-XYS6G2ZC.mjs';

package/_vendor/schemas/selectModeIframeRpc.mjs

@@ -1,7 +1,7 @@
 import { selectModeBoundingRectSchema, selectModeTiptapActiveMarksSchema, selectModeSelectionRectSchema, selectableDataSchema, selectModeHoverRectSchema, selectModeFormatCommandSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionTypeSchema, displayModeSchema, selectModeClickPositionSchema, selectedElementSchema } from '../../chunk-CGRTGQO5.mjs';
 import '../../chunk-THOBCJJA.mjs';
-import '../../chunk-4ITJNSXZ.mjs';
 import '../../chunk-SKVPFN7M.mjs';
+import '../../chunk-4ITJNSXZ.mjs';
 import '../../chunk-XYS6G2ZC.mjs';
 import * as z from 'zod';
 

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.22.1",
+  "version": "1.24.0",
   "branch": "HEAD",
-  "commit": "073dd1a46fae9bca92aae68286e667ef84854658",
-  "builtAt": "2026-10-30T20:41:52.402Z"
+  "commit": "2eac4f35e57f8dd0ccee30b2d374c2cdcbb13e44",
+  "builtAt": "2026-11-01T08:37:57.957Z"
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.22.1",
+  "version": "1.24.0",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.22.1",
+    "version": "1.24.0",
     "branch": "HEAD",
-    "commit": "073dd1a46fae9bca92aae68286e667ef84854658",
-    "builtAt": "2026-10-30T20:41:52.402Z"
+    "commit": "2eac4f35e57f8dd0ccee30b2d374c2cdcbb13e44",
+    "builtAt": "2026-11-01T08:37:57.957Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",

package/placeholder-products/placeholderProducts.d.ts

@@ -0,0 +1,2 @@
+/** Fills a template's placeholder product cards in a template preview; a published site downloads none of that code. */
+export declare function PlaceholderProductReceiver(): import("react/jsx-runtime").JSX.Element;

package/placeholder-products/placeholderProducts.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+function startReceiver() {
+  const isTemplatePreview = process.env.NODE_ENV === "development" || window.location.hostname.endsWith(".reploregistry.com");
+  if (!isTemplatePreview) {
+    return;
+  }
+  let stop = null;
+  let isStopped = false;
+  void import("./placeholderProductsPreview").then((module) => {
+    if (!isStopped) {
+      stop = module.startPlaceholderProducts();
+    }
+  });
+  return () => {
+    isStopped = true;
+    stop?.();
+  };
+}
+function PlaceholderProductReceiver() {
+  return /* @__PURE__ */ jsx("template", { ref: startReceiver });
+}
+export {
+  PlaceholderProductReceiver
+};

package/placeholder-products/placeholderProductsPreview.d.ts

@@ -0,0 +1,88 @@
+import type { PlaceholderProductId } from "../_vendor/schemas/placeholderProductsProtocol";
+/** A product as Replo's product loaders return it, as far as the preview touches it. */
+type LoaderProduct = {
+    id: string;
+    handle: string;
+    title: string;
+    variants: {
+        id: string;
+    }[];
+};
+export declare const GRAY_PRODUCT: {
+    id: string;
+    handle: string;
+    title: string;
+    description: null;
+    descriptionHtml: null;
+    availableForSale: boolean;
+    featuredImage: {
+        url: string;
+        altText: string;
+        width: null;
+        height: null;
+    };
+    images: {
+        url: string;
+        altText: string;
+        width: null;
+        height: null;
+    }[];
+    media: {
+        url: string;
+        altText: string;
+        width: null;
+        height: null;
+        type: string;
+        alt: string;
+    }[];
+    options: {
+        id: string;
+        name: string;
+        values: ("Option 1" | "Option 2" | "Option 3")[];
+        optionValues: {
+            id: string;
+            value: "Option 1" | "Option 2" | "Option 3";
+            swatch: {
+                color: "#d9d9d9" | "#b3b3b3" | "#8c8c8c";
+                imageUrl: null;
+            };
+        }[];
+    }[];
+    variants: {
+        id: string;
+        title: "Option 1" | "Option 2" | "Option 3";
+        availableForSale: boolean;
+        sku: null;
+        selectedOptions: {
+            name: string;
+            value: "Option 1" | "Option 2" | "Option 3";
+        }[];
+        image: null;
+        price: {
+            amount: string;
+            currencyCode: string;
+        };
+        compareAtPrice: null;
+        sellingPlanIds: never[];
+    }[];
+    vendor: null;
+    productType: null;
+    tags: never[];
+    sellingPlanGroups: never[];
+    requiresSellingPlan: boolean;
+    metafields: never[];
+};
+/**
+ * The product source @replohq/sdk's loaders read: the hero ID gets the first product, other cards the rest in mount
+ * order, cycling. Copies take the card's placeholder ID so the SDK's cart drops their variants.
+ */
+export declare function createPlaceholderProductSource({ products, cardNumbers, }: {
+    products: readonly LoaderProduct[];
+    cardNumbers: Map<string, number>;
+}): ({ productId, cardId, }: {
+    productId: PlaceholderProductId;
+    cardId: string;
+}) => LoaderProduct | null;
+/** Shows the gray product, then the products the embedding page sends; its two notify messages are spoken by hand. */
+export declare function startPlaceholderProducts(): () => void;
+export {};

package/placeholder-products/placeholderProductsPreview.js

@@ -0,0 +1,137 @@
+import {
+  PLACEHOLDER_HERO_PRODUCT_ID,
+  PLACEHOLDER_PRODUCTS_IFRAME_RPC_CHANNEL_ID,
+  PLACEHOLDER_PRODUCTS_IFRAME_RPC_CHANNEL_VERSION,
+  PLACEHOLDER_PRODUCTS_CHANGE_EVENT,
+  PLACEHOLDER_PRODUCTS_SOURCE_KEY
+} from "../_vendor/schemas/placeholderProductsProtocol.mjs";
+const GRAY_IMAGE = {
+  url: "https://registry.replocdn.com/placeholder-products/gray.webp",
+  altText: "Product name",
+  width: null,
+  height: null
+};
+const GRAY_VALUES = [
+  ["Option 1", "#d9d9d9"],
+  ["Option 2", "#b3b3b3"],
+  ["Option 3", "#8c8c8c"]
+];
+const GRAY_PRODUCT = {
+  id: "gray",
+  handle: "gray",
+  title: "Product name",
+  description: null,
+  descriptionHtml: null,
+  availableForSale: true,
+  featuredImage: GRAY_IMAGE,
+  images: [GRAY_IMAGE],
+  media: [{ type: "image", alt: "Product name", ...GRAY_IMAGE }],
+  options: [
+    {
+      id: "gray:option",
+      name: "Option",
+      values: GRAY_VALUES.map(([value]) => value),
+      optionValues: GRAY_VALUES.map(([value, color]) => ({
+        id: `gray:${value}`,
+        value,
+        swatch: { color, imageUrl: null }
+      }))
+    }
+  ],
+  variants: GRAY_VALUES.map(([value]) => ({
+    id: `gray:${value}`,
+    title: value,
+    availableForSale: true,
+    sku: null,
+    selectedOptions: [{ name: "Option", value }],
+    image: null,
+    price: { amount: "0.00", currencyCode: "USD" },
+    compareAtPrice: null,
+    sellingPlanIds: []
+  })),
+  vendor: null,
+  productType: null,
+  tags: [],
+  sellingPlanGroups: [],
+  requiresSellingPlan: false,
+  metafields: []
+};
+const cardNumbers = /* @__PURE__ */ new Map();
+function createPlaceholderProductSource({
+  products,
+  cardNumbers: cardNumbers2
+}) {
+  const copies = /* @__PURE__ */ new Map();
+  const others = products.length > 1 ? products.slice(1) : products;
+  return ({
+    productId,
+    cardId
+  }) => {
+    const isHero = productId === PLACEHOLDER_HERO_PRODUCT_ID;
+    let card = 0;
+    if (!isHero) {
+      card = cardNumbers2.get(cardId) ?? cardNumbers2.size;
+      cardNumbers2.set(cardId, card);
+    }
+    const product = isHero ? products[0] : others[card % others.length];
+    if (!product) {
+      return null;
+    }
+    const id = `${productId}:${card}`;
+    const copy = copies.get(id) ?? {
+      ...product,
+      id,
+      handle: isHero ? "sample" : `sample-${card + 1}`,
+      variants: product.variants.map((variant) => ({
+        ...variant,
+        id: `${id}:${variant.id}`
+      }))
+    };
+    copies.set(id, copy);
+    return copy;
+  };
+}
+function publishSource(products) {
+  const source = createPlaceholderProductSource({ products, cardNumbers });
+  Object.assign(window, { [PLACEHOLDER_PRODUCTS_SOURCE_KEY]: source });
+  window.dispatchEvent(new Event(PLACEHOLDER_PRODUCTS_CHANGE_EVENT));
+}
+function findSentProducts(message) {
+  if (typeof message !== "object" || message === null || Reflect.get(message, "channelIdentifier") !== PLACEHOLDER_PRODUCTS_IFRAME_RPC_CHANNEL_ID || Reflect.get(message, "method") !== "setPlaceholderProducts") {
+    return [];
+  }
+  const data = Reflect.get(message, "data");
+  const products = typeof data === "object" && data !== null ? Reflect.get(data, "products") : null;
+  return Array.isArray(products) ? (
+    products
+  ) : [];
+}
+function startPlaceholderProducts() {
+  publishSource([GRAY_PRODUCT]);
+  if (window.parent === window) {
+    return () => {
+    };
+  }
+  const onMessage = (event) => {
+    const products = event.source === window.parent ? findSentProducts(event.data) : [];
+    if (products.length > 0) {
+      publishSource(products);
+    }
+  };
+  window.addEventListener("message", onMessage);
+  window.parent.postMessage(
+    {
+      channelIdentifier: PLACEHOLDER_PRODUCTS_IFRAME_RPC_CHANNEL_ID,
+      version: PLACEHOLDER_PRODUCTS_IFRAME_RPC_CHANNEL_VERSION,
+      type: "notify",
+      method: "placeholderProductsReady"
+    },
+    "*"
+  );
+  return () => window.removeEventListener("message", onMessage);
+}
+export {
+  GRAY_PRODUCT,
+  createPlaceholderProductSource,
+  startPlaceholderProducts
+};

package/sandbox-runtime.d.ts

@@ -1 +1 @@
-export declare function SandboxRuntime({ children }: React.PropsWithChildren): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function SandboxRuntime({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/sandbox-runtime.js

@@ -11,6 +11,7 @@ import LinkInterceptor from "./LinkInterceptor";
 import { NavigationReceiver } from "./NavigationReceiver";
 import { PageCaptureResponder } from "./PageCaptureResponder";
 import { PagePreviewHeightResponder } from "./PagePreviewHeightResponder";
+import { PlaceholderProductReceiver } from "./placeholder-products/placeholderProducts";
 import PostHogRelay from "./posthog-relay";
 import { EditorSelection } from "./select-mode/EditorSelection";
 function ViewportSnapshotResponder() {
@@ -33,9 +34,13 @@ function SandboxRuntime({ children }) {
       /* @__PURE__ */ jsx(AnnotationLayerMount, {}),
       /* @__PURE__ */ jsx(HeatLayerMount, {}),
       /* @__PURE__ */ jsx(DesignLibraryPreview, {}),
+      /* @__PURE__ */ jsx(PlaceholderProductReceiver, {}),
       children
     ] })
-  ] }) : children;
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx(PlaceholderProductReceiver, {})
+  ] });
 }
 export {
   SandboxRuntime