@replohq/sandbox-runtime 1.19.5 → 1.20.0

package/PagePreviewHeightResponder.d.ts

@@ -0,0 +1 @@
+export declare function PagePreviewHeightResponder(): import("react/jsx-runtime").JSX.Element;

package/PagePreviewHeightResponder.js

@@ -0,0 +1,159 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  pagePreviewHeightRequestSchema,
+  PAGE_PREVIEW_MAX_HEIGHT
+} from "./_vendor/schemas/pagePreviewHeight.mjs";
+import { pinPreviewViewportUnits } from "./pinPreviewViewportUnits";
+function startResponder() {
+  let parentOrigin = null;
+  let scheduledFrame = 0;
+  let awaitingMeasurement = false;
+  let reportedHeight = null;
+  let baselineRootHeight = "auto";
+  const measurementStyle = new CSSStyleSheet();
+  document.adoptedStyleSheets = [
+    ...document.adoptedStyleSheets,
+    measurementStyle
+  ];
+  const measure = () => {
+    scheduledFrame = 0;
+    if (!parentOrigin) {
+      return;
+    }
+    const body = document.body;
+    pinPreviewViewportUnits({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+    const height = Math.min(
+      PAGE_PREVIEW_MAX_HEIGHT,
+      Math.ceil(
+        Math.max(
+          body.getBoundingClientRect().height,
+          body.scrollHeight,
+          document.documentElement.scrollHeight
+        )
+      )
+    );
+    baselineRootHeight = getComputedStyle(document.documentElement).height;
+    awaitingMeasurement = false;
+    if (height > 0) {
+      reportedHeight = height;
+      window.parent.postMessage(
+        { type: "replo:page-preview-height:update", height },
+        parentOrigin
+      );
+    }
+  };
+  const schedule = () => {
+    if (!parentOrigin || awaitingMeasurement) {
+      return;
+    }
+    awaitingMeasurement = true;
+    window.parent.postMessage(
+      { type: "replo:page-preview-height:reset" },
+      parentOrigin
+    );
+  };
+  const observer = new ResizeObserver(() => {
+    if (Math.ceil(document.body.getBoundingClientRect().height) === reportedHeight) {
+      return;
+    }
+    schedule();
+  });
+  const mutations = new MutationObserver(schedule);
+  const receive = (event) => {
+    if (event.source !== window.parent || event.origin === "null") {
+      return;
+    }
+    const message = pagePreviewHeightRequestSchema.safeParse(event.data);
+    if (!message.success) {
+      return;
+    }
+    parentOrigin = event.origin;
+    if (message.data.type === "replo:page-preview-height:subscribe") {
+      observer.observe(document.body);
+      mutations.observe(document.body, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        characterData: true
+      });
+      schedule();
+    } else {
+      cancelAnimationFrame(scheduledFrame);
+      scheduledFrame = requestAnimationFrame(measure);
+    }
+  };
+  window.addEventListener("message", receive);
+  const measureInteraction = () => {
+    if (!parentOrigin || awaitingMeasurement) {
+      return;
+    }
+    cancelAnimationFrame(scheduledFrame);
+    scheduledFrame = requestAnimationFrame(() => {
+      scheduledFrame = 0;
+      if (!parentOrigin) {
+        return;
+      }
+      measurementStyle.replaceSync(
+        `:root { height: ${baselineRootHeight} !important; min-height: 0 !important; max-height: none !important; }`
+      );
+      let height;
+      try {
+        height = Math.min(
+          PAGE_PREVIEW_MAX_HEIGHT,
+          Math.ceil(
+            Math.max(
+              document.body.scrollHeight,
+              document.body.getBoundingClientRect().height
+            )
+          )
+        );
+      } finally {
+        measurementStyle.replaceSync("");
+      }
+      if (height > 0) {
+        reportedHeight = height;
+        window.parent.postMessage(
+          { type: "replo:page-preview-height:update", height },
+          parentOrigin
+        );
+      }
+    });
+  };
+  const events = [
+    "pointerover",
+    "pointerout",
+    "focusin",
+    "focusout",
+    "transitionend",
+    "animationend"
+  ];
+  for (const event of events) {
+    document.addEventListener(event, measureInteraction, true);
+  }
+  document.addEventListener("load", schedule, true);
+  document.addEventListener("toggle", schedule, true);
+  return () => {
+    cancelAnimationFrame(scheduledFrame);
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+      (sheet) => sheet !== measurementStyle
+    );
+    observer.disconnect();
+    mutations.disconnect();
+    window.removeEventListener("message", receive);
+    document.removeEventListener("load", schedule, true);
+    document.removeEventListener("toggle", schedule, true);
+    for (const event of events) {
+      document.removeEventListener(event, measureInteraction, true);
+    }
+  };
+}
+function PagePreviewHeightResponder() {
+  return /* @__PURE__ */ jsx("template", { ref: startResponder });
+}
+export {
+  PagePreviewHeightResponder
+};

package/_vendor/schemas/pagePreviewHeight.d.ts

@@ -0,0 +1,14 @@
+import * as z from "zod/mini";
+export declare const PAGE_PREVIEW_MAX_HEIGHT = 100000;
+export declare const pagePreviewHeightRequestSchema: z.ZodMiniObject<{
+    type: z.ZodMiniEnum<{
+        "replo:page-preview-height:subscribe": "replo:page-preview-height:subscribe";
+        "replo:page-preview-height:measure": "replo:page-preview-height:measure";
+    }>;
+}, z.core.$strip>;
+export declare const pagePreviewHeightResponseSchema: z.ZodMiniDiscriminatedUnion<[z.ZodMiniObject<{
+    type: z.ZodMiniLiteral<"replo:page-preview-height:update">;
+    height: z.ZodMiniNumber<number>;
+}, z.core.$strip>, z.ZodMiniObject<{
+    type: z.ZodMiniLiteral<"replo:page-preview-height:reset">;
+}, z.core.$strip>], "type">;

package/_vendor/schemas/pagePreviewHeight.mjs

@@ -0,0 +1,18 @@
+import * as z from 'zod/mini';
+
+var PAGE_PREVIEW_MAX_HEIGHT = 1e5;
+var pagePreviewHeightRequestSchema = z.object({
+  type: z.enum([
+    "replo:page-preview-height:subscribe",
+    "replo:page-preview-height:measure"
+  ])
+});
+var pagePreviewHeightResponseSchema = z.discriminatedUnion("type", [
+  z.object({
+    type: z.literal("replo:page-preview-height:update"),
+    height: z.number().check(z.minimum(1), z.maximum(PAGE_PREVIEW_MAX_HEIGHT))
+  }),
+  z.object({ type: z.literal("replo:page-preview-height:reset") })
+]);
+
+export { PAGE_PREVIEW_MAX_HEIGHT, pagePreviewHeightRequestSchema, pagePreviewHeightResponseSchema };

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.19.5",
+  "version": "1.20.0",
   "branch": "HEAD",
-  "commit": "925967a151b3e53a1891d5d57b0cf956b0f64ffe",
-  "builtAt": "2026-10-28T00:16:14.622Z"
+  "commit": "17c6d4e2e064b7d35efe5732361372f119e931b5",
+  "builtAt": "2026-10-29T03:14:43.608Z"
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.19.5",
+  "version": "1.20.0",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.19.5",
+    "version": "1.20.0",
     "branch": "HEAD",
-    "commit": "925967a151b3e53a1891d5d57b0cf956b0f64ffe",
-    "builtAt": "2026-10-28T00:16:14.622Z"
+    "commit": "17c6d4e2e064b7d35efe5732361372f119e931b5",
+    "builtAt": "2026-10-29T03:14:43.608Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",
@@ -35,6 +35,7 @@
     "@tiptap/pm": "^2.25.0",
     "@zumer/snapdom": "^3.0.0",
     "async-retry": "^1.3.3",
+    "postcss-value-parser": "4.2.0",
     "uuid": "^11.1.0",
     "zod": "^4.3.6",
     "zustand": "^4.5.7"

package/pinPreviewViewportUnits.d.ts

@@ -0,0 +1,4 @@
+export declare function pinPreviewViewportUnits({ width, height, }: {
+    width: number;
+    height: number;
+}): void;

package/pinPreviewViewportUnits.js

@@ -0,0 +1,76 @@
+import valueParser from "postcss-value-parser";
+function pinPreviewViewportUnits({
+  width,
+  height
+}) {
+  const sizes = {
+    vh: height,
+    svh: height,
+    lvh: height,
+    dvh: height,
+    vmin: Math.min(width, height),
+    vmax: Math.max(width, height)
+  };
+  const pinDeclaration = (style) => {
+    for (const property of Array.from(style)) {
+      const value = style.getPropertyValue(property);
+      if (!/[0-9.](?:[sld]?vh|vmin|vmax)\b/iu.test(value)) {
+        continue;
+      }
+      const parsed = valueParser(value);
+      let changed = false;
+      parsed.walk((node) => {
+        if (node.type === "function" && node.value.toLowerCase() === "url") {
+          return false;
+        }
+        if (node.type !== "word") {
+          return;
+        }
+        const dimension = valueParser.unit(node.value);
+        if (!dimension || !Object.hasOwn(sizes, dimension.unit.toLowerCase())) {
+          return;
+        }
+        node.value = `${Number(dimension.number) * sizes[dimension.unit.toLowerCase()] / 100}px`;
+        changed = true;
+      });
+      if (changed) {
+        style.setProperty(
+          property,
+          parsed.toString(),
+          style.getPropertyPriority(property)
+        );
+      }
+    }
+  };
+  const pinRules = (rules) => {
+    for (const rule of Array.from(rules)) {
+      if (rule instanceof CSSStyleRule) {
+        pinDeclaration(rule.style);
+      }
+      if (rule instanceof CSSGroupingRule) {
+        pinRules(rule.cssRules);
+      }
+      if (rule instanceof CSSImportRule && rule.styleSheet) {
+        pinSheet(rule.styleSheet);
+      }
+    }
+  };
+  const pinSheet = (sheet) => {
+    try {
+      pinRules(sheet.cssRules);
+    } catch (error) {
+      if (!(error instanceof DOMException && error.name === "SecurityError")) {
+        throw error;
+      }
+    }
+  };
+  for (const sheet of Array.from(document.styleSheets)) {
+    pinSheet(sheet);
+  }
+  for (const element of document.querySelectorAll("[style]")) {
+    pinDeclaration(element.style);
+  }
+}
+export {
+  pinPreviewViewportUnits
+};

package/sandbox-runtime.js

@@ -9,6 +9,7 @@ import { HeatLayerMount } from "./heatmaps/HeatLayerMount";
 import LinkInterceptor from "./LinkInterceptor";
 import { NavigationReceiver } from "./NavigationReceiver";
 import { PageCaptureResponder } from "./PageCaptureResponder";
+import { PagePreviewHeightResponder } from "./PagePreviewHeightResponder";
 import PostHogRelay from "./posthog-relay";
 import { EditorSelection } from "./select-mode/EditorSelection";
 function ViewportSnapshotResponder() {
@@ -25,6 +26,7 @@ function SandboxRuntime({ children }) {
       /* @__PURE__ */ jsx(PostHogRelay, {}),
       /* @__PURE__ */ jsx(ViewportSnapshotResponder, {}),
       /* @__PURE__ */ jsx(PageCaptureResponder, {}),
+      /* @__PURE__ */ jsx(PagePreviewHeightResponder, {}),
       /* @__PURE__ */ jsx(EditorSelection, {}),
       /* @__PURE__ */ jsx(AnnotationLayerMount, {}),
       /* @__PURE__ */ jsx(HeatLayerMount, {}),