@replohq/sandbox-runtime 1.22.0 → 1.23.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.0",
+  "version": "1.23.0",
   "branch": "HEAD",
-  "commit": "06e25b3341d1e79f6171365410c49bee41b1f3e0",
-  "builtAt": "2026-10-30T20:22:33.673Z"
+  "commit": "ace9e163575351a4ad987d0f0427807eaec836ee",
+  "builtAt": "2026-10-31T09:51:00.646Z"
 };

package/comments-overlay/overlay.d.ts

@@ -4,7 +4,7 @@ import type { DisplayMode } from "../_vendor/schemas/generated/selectMode";
 import type { ElementSource } from "./capture";
 export declare const OVERLAY_Z_INDEX = 2147483645;
 export declare const HIGHLIGHT_BACKGROUND = "rgba(250, 204, 21, 0.28)";
-export declare const BADGE_SIZE_PX = 20;
+export declare const BADGE_SIZE_PX = 32;
 export declare const RERESOLVE_DEBOUNCE_MS = 250;
 export type CommentsOverlayCallbacks = {
     onAnchorPicked: (input: {

package/comments-overlay/overlay.js

@@ -4,8 +4,9 @@ import { OVERLAY_ROOT_ATTRIBUTE } from "./textQuote";
 const OVERLAY_Z_INDEX = 2147483645;
 const HIGHLIGHT_BACKGROUND = "rgba(250, 204, 21, 0.28)";
 const QUOTE_UNDERLINE = "2px solid rgba(250, 204, 21, 0.9)";
-const BADGE_SIZE_PX = 20;
+const BADGE_SIZE_PX = 32;
 const BADGE_HIT_TARGET_PX = 44;
+const BADGE_HIT_TARGET_WIDTH_PX = 64;
 const COMPACT_GUTTER_MAX_WIDTH_PX = 600;
 const RERESOLVE_DEBOUNCE_MS = 250;
 const SELECTION_PROMPT_DEBOUNCE_MS = 150;
@@ -286,16 +287,17 @@ function createCommentsOverlay(options) {
   const paintBadges = () => {
     const isCompact = window.innerWidth <= COMPACT_GUTTER_MAX_WIDTH_PX;
     const size = BADGE_HIT_TARGET_PX;
-    const maxLeft = Math.max(0, window.innerWidth - size);
+    const width = BADGE_HIT_TARGET_WIDTH_PX;
+    const maxLeft = Math.max(0, window.innerWidth - width);
     const maxTop = Math.max(0, window.innerHeight - size);
     const placed = [];
     const place = (rect) => {
-      const baseLeft = isCompact ? maxLeft : Math.max(0, Math.min(maxLeft, rect.right - size / 2));
+      const baseLeft = isCompact ? maxLeft : Math.max(0, Math.min(maxLeft, rect.right - width / 2));
       const baseTop = Math.max(0, Math.min(maxTop, rect.top - size / 2));
-      const columns = Math.ceil(maxLeft / size);
+      const columns = Math.ceil(maxLeft / width);
       const rows = Math.ceil(maxTop / size);
       for (let column = 0; column <= columns * 2; column++) {
-        const left = baseLeft + (column % 2 ? 1 : -1) * Math.ceil(column / 2) * size;
+        const left = baseLeft + (column % 2 ? 1 : -1) * Math.ceil(column / 2) * width;
         if (left < 0 || left > maxLeft) {
           continue;
         }
@@ -305,7 +307,7 @@ function createCommentsOverlay(options) {
             continue;
           }
           const collides = placed.some((slot) => {
-            return Math.abs(slot.left - left) < size && Math.abs(slot.top - top) < size;
+            return Math.abs(slot.left - left) < width && Math.abs(slot.top - top) < size;
           });
           if (!collides) {
             placed.push({ left, top });
@@ -340,7 +342,7 @@ function createCommentsOverlay(options) {
         "aria-label",
         pin.count === 1 ? "Open comment" : `Open ${pin.count} comments`
       );
-      badge.style.cssText = `position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;width:${size}px;height:${size}px;padding:0;margin:0;border:0;background:transparent;cursor:pointer`;
+      badge.style.cssText = `position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;width:${width}px;height:${size}px;padding:0;margin:0;border:0;background:transparent;cursor:pointer;outline-offset:-2px`;
       if (isCompact) {
         badge.style.justifyContent = "flex-end";
       }
@@ -348,25 +350,21 @@ function createCommentsOverlay(options) {
       badge.style.top = `${position.top}px`;
       const isActive = isFocused || pin.threadId === hoveredBadgeThreadId;
       const dot = document.createElement("span");
-      dot.style.cssText = `display:flex;align-items:center;justify-content:center;gap:3px;box-sizing:border-box;min-width:${BADGE_SIZE_PX}px;height:${BADGE_SIZE_PX}px;padding:0 ${pin.count === 1 ? 0 : 6}px;border-radius:${BADGE_SIZE_PX / 2}px;border:1px solid rgba(17,24,39,.14);background:#fff;color:#6b7280;box-shadow:0 1px 3px rgba(0,0,0,.18);font:600 11px/1 system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap`;
+      dot.style.cssText = `display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-width:48px;height:${BADGE_SIZE_PX}px;padding:0 6px;border-radius:8px;border:1px solid rgba(0,0,0,.12);background:#ffeb80;color:#171717;box-shadow:0 1px 3px rgba(0,0,0,.12);font:600 14px/1 system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap`;
       if (isCompact) {
         dot.style.marginRight = "3px";
       }
       if (isActive) {
-        dot.style.borderColor = "#f59e0b";
-        dot.style.background = "#fef3c7";
-        dot.style.color = "#b45309";
+        dot.style.borderColor = "rgba(0,0,0,.4)";
       }
       if (resolution.status === "ambiguous") {
         dot.style.borderStyle = "dashed";
       }
-      const icon = createIcon("12", "M7.9 20A9 9 0 1 0 4 16.1L2 22Z");
+      const icon = createIcon("16", "M7.9 20A9 9 0 1 0 4 16.1L2 22Z");
       icon.setAttribute("stroke-linecap", "round");
       icon.setAttribute("stroke-linejoin", "round");
       dot.append(icon);
-      if (pin.count > 1) {
-        dot.append(pin.count > 99 ? "99+" : String(pin.count));
-      }
+      dot.append(pin.count > 99 ? "99+" : String(pin.count));
       badge.append(dot);
       badge.addEventListener("click", (event) => {
         event.preventDefault();

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.22.0",
+    "version": "1.23.0",
     "branch": "HEAD",
-    "commit": "06e25b3341d1e79f6171365410c49bee41b1f3e0",
-    "builtAt": "2026-10-30T20:22:33.673Z"
+    "commit": "ace9e163575351a4ad987d0f0427807eaec836ee",
+    "builtAt": "2026-10-31T09:51:00.646Z"
   },
   "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