@replohq/sdk 2.15.0 → 2.16.0

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/cart/hooks/use-add-to-cart.js

@@ -3,6 +3,7 @@ import React from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import { fromMajorUnitsToMinorUnits } from "../../_vendor/schemas/moneyFormat.mjs";
 import { DATA_LOADER_KEYS } from "../../loaders/loader-keys";
+import { isPlaceholderMerchandiseId } from "../../loaders/placeholder-product";
 import { useCartInternal } from "../cart-provider";
 import { toCartError } from "../utils/cart-error";
 const PRODUCT_LOADER_KEYS = [
@@ -86,9 +87,15 @@ function useAddToCart() {
   const [isAdding, setIsAdding] = React.useState(false);
   const addToCart = React.useCallback(
     async (items, openCartAfterAdd = true) => {
+      const buyableItems = items.filter((item) => {
+        return !isPlaceholderMerchandiseId(item.merchandiseId);
+      });
+      if (buyableItems.length === 0) {
+        return { adjustments: [], error: null };
+      }
       setIsAdding(true);
       try {
-        const cartLines = items.map((item) => {
+        const cartLines = buyableItems.map((item) => {
           const merchandise = item.merchandise ?? findMerchandiseInQueryCache({
             queryClient,
             merchandiseId: item.merchandiseId

package/lib/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sdk",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "branch": "HEAD",
-  "commit": "774d3fc49c9223dcec0ae2a83474c89c96ce5400",
-  "builtAt": "2026-10-31T01:00:17.935Z"
+  "commit": "ace9e163575351a4ad987d0f0427807eaec836ee",
+  "builtAt": "2026-10-31T09:51:00.149Z"
 };

package/loaders/placeholder-product.d.ts

@@ -0,0 +1,24 @@
+import type { PlaceholderProductId } from "../_vendor/schemas/placeholderProductsProtocol";
+import type { FullProduct } from "./loader-schemas";
+import { PLACEHOLDER_PRODUCTS_SOURCE_KEY } from "../_vendor/schemas/placeholderProductsProtocol";
+declare global {
+    interface Window {
+        __REPLO_PLACEHOLDER_PRODUCTS__?: (card: {
+            productId: PlaceholderProductId;
+            cardId: string;
+        }) => FullProduct | null;
+    }
+}
+/** Placeholder IDs name no product, so loaders never fetch them. */
+export declare function isPlaceholderProductId(productId: string | null | undefined): productId is PlaceholderProductId;
+/** A placeholder product's variant IDs start with its placeholder ID, so they never reach a cart. */
+export declare function isPlaceholderMerchandiseId(merchandiseId: string): boolean;
+export type PlaceholderProductSource = NonNullable<Window[typeof PLACEHOLDER_PRODUCTS_SOURCE_KEY]>;
+/** sandbox-runtime's product source (null on the server and on a published site), numbered so each new one is a new key. */
+export declare function usePlaceholderProductSource(): {
+    source: ((card: {
+        productId: PlaceholderProductId;
+        cardId: string;
+    }) => FullProduct | null) | null;
+    sourceNumber: number;
+};

package/loaders/placeholder-product.js

@@ -0,0 +1,39 @@
+import { useSyncExternalStore } from "react";
+import {
+  PLACEHOLDER_HERO_PRODUCT_ID,
+  PLACEHOLDER_PRODUCT_ID,
+  PLACEHOLDER_PRODUCTS_CHANGE_EVENT,
+  PLACEHOLDER_PRODUCTS_SOURCE_KEY
+} from "../_vendor/schemas/placeholderProductsProtocol.mjs";
+function isPlaceholderProductId(productId) {
+  return productId === PLACEHOLDER_HERO_PRODUCT_ID || productId === PLACEHOLDER_PRODUCT_ID;
+}
+function isPlaceholderMerchandiseId(merchandiseId) {
+  return merchandiseId.startsWith(PLACEHOLDER_HERO_PRODUCT_ID) || merchandiseId.startsWith(PLACEHOLDER_PRODUCT_ID);
+}
+function subscribe(listener) {
+  window.addEventListener(PLACEHOLDER_PRODUCTS_CHANGE_EVENT, listener);
+  return () => {
+    window.removeEventListener(PLACEHOLDER_PRODUCTS_CHANGE_EVENT, listener);
+  };
+}
+let sourceCount = 0;
+const sourceNumbers = /* @__PURE__ */ new WeakMap();
+function getSourceNumber(source) {
+  const sourceNumber = sourceNumbers.get(source) ?? ++sourceCount;
+  sourceNumbers.set(source, sourceNumber);
+  return sourceNumber;
+}
+function usePlaceholderProductSource() {
+  const source = useSyncExternalStore(
+    subscribe,
+    () => window[PLACEHOLDER_PRODUCTS_SOURCE_KEY] ?? null,
+    () => null
+  );
+  return { source, sourceNumber: source ? getSourceNumber(source) : 0 };
+}
+export {
+  isPlaceholderMerchandiseId,
+  isPlaceholderProductId,
+  usePlaceholderProductSource
+};

package/loaders/product-loader.js

@@ -1,9 +1,13 @@
 "use client";
 import { Fragment, jsx } from "react/jsx-runtime";
-import { Suspense } from "react";
+import { Suspense, useId } from "react";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { invokeLoader } from "./invoke-loader";
 import { LoaderErrorBoundary } from "./loader-error-boundary";
+import {
+  isPlaceholderProductId,
+  usePlaceholderProductSource
+} from "./placeholder-product";
 import { useReportPreviewPlaceholderRender } from "./preview-placeholder";
 import { buildProductLoaderArgs } from "./product-loader-args";
 function ProductLoaderInner({
@@ -20,6 +24,39 @@ function ProductLoaderInner({
   useReportPreviewPlaceholderRender(queryResult.data);
   return /* @__PURE__ */ jsx(Fragment, { children: children(queryResult.data) });
 }
+function PlaceholderProductCard({
+  getProduct,
+  card,
+  fallback,
+  children
+}) {
+  const product = getProduct?.(card) ?? null;
+  return /* @__PURE__ */ jsx(Fragment, { children: product ? children(product) : fallback });
+}
+function PlaceholderProductLoader({
+  productId,
+  fallback,
+  children
+}) {
+  const cardId = useId();
+  const { source, sourceNumber } = usePlaceholderProductSource();
+  return /* @__PURE__ */ jsx(
+    LoaderErrorBoundary,
+    {
+      fallback,
+      resetKey: `placeholder:${productId}:${sourceNumber}`,
+      children: /* @__PURE__ */ jsx(
+        PlaceholderProductCard,
+        {
+          getProduct: source,
+          card: { productId, cardId },
+          fallback,
+          children
+        }
+      )
+    }
+  );
+}
 function ProductLoader({
   loaderKey,
   handle,
@@ -32,6 +69,16 @@ function ProductLoader({
   fallback,
   loadingFallback = fallback
 }) {
+  if (isPlaceholderProductId(productId)) {
+    return /* @__PURE__ */ jsx(
+      PlaceholderProductLoader,
+      {
+        productId,
+        fallback: fallback ?? null,
+        children
+      }
+    );
+  }
   const args = buildProductLoaderArgs({
     handle,
     productId,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sdk",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "reploBuild": {
     "packageName": "@replohq/sdk",
-    "version": "2.15.0",
+    "version": "2.16.0",
     "branch": "HEAD",
-    "commit": "774d3fc49c9223dcec0ae2a83474c89c96ce5400",
-    "builtAt": "2026-10-31T01:00:17.935Z"
+    "commit": "ace9e163575351a4ad987d0f0427807eaec836ee",
+    "builtAt": "2026-10-31T09:51:00.149Z"
   },
   "description": "Replo SDK — cart, analytics, and data loaders for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",