@replohq/sandbox-runtime 1.18.1 → 1.19.1

package/heatmaps/heatRender.js

@@ -0,0 +1,198 @@
+const STOPS = [
+  { offset: 0, color: "rgba(40, 60, 255, 0)" },
+  { offset: 0.18, color: "rgba(40, 90, 255, 0.55)" },
+  { offset: 0.38, color: "rgba(0, 200, 220, 0.7)" },
+  { offset: 0.55, color: "rgba(60, 220, 90, 0.78)" },
+  { offset: 0.72, color: "rgba(255, 225, 40, 0.86)" },
+  { offset: 0.86, color: "rgba(255, 140, 20, 0.92)" },
+  { offset: 1, color: "rgba(240, 30, 40, 0.95)" }
+];
+const SCRIM_COLOR = "rgba(20, 18, 40, 0.24)";
+const MARK_LINE_COLOR = "rgba(255, 255, 255, 0.95)";
+const MARK_LABEL_BACKGROUND = "rgba(23, 23, 23, 0.85)";
+const REACH_MARKS = [0.75, 0.5, 0.25];
+const LABEL_FONT_PX = 13;
+let paletteCache = null;
+function getPalette() {
+  if (paletteCache) {
+    return paletteCache;
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = 256;
+  canvas.height = 1;
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) {
+    return null;
+  }
+  const gradient = context.createLinearGradient(0, 0, 256, 0);
+  for (const stop of STOPS) {
+    gradient.addColorStop(stop.offset, stop.color);
+  }
+  context.fillStyle = gradient;
+  context.fillRect(0, 0, 256, 1);
+  paletteCache = context.getImageData(0, 0, 256, 1).data;
+  return paletteCache;
+}
+const stampCache = /* @__PURE__ */ new Map();
+function getDiscStamp(radius) {
+  const cached = stampCache.get(radius);
+  if (cached) {
+    return cached;
+  }
+  const size = Math.max(1, Math.ceil(radius * 4));
+  const stamp = document.createElement("canvas");
+  stamp.width = size;
+  stamp.height = size;
+  const context = stamp.getContext("2d");
+  if (!context) {
+    return null;
+  }
+  const gradient = context.createRadialGradient(
+    size / 2,
+    size / 2,
+    0,
+    size / 2,
+    size / 2,
+    radius * 2
+  );
+  gradient.addColorStop(0, "rgba(0, 0, 0, 1)");
+  gradient.addColorStop(0.45, "rgba(0, 0, 0, 0.45)");
+  gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
+  context.fillStyle = gradient;
+  context.fillRect(0, 0, size, size);
+  stampCache.set(radius, stamp);
+  return stamp;
+}
+function withScrimBehind(context) {
+  context.globalCompositeOperation = "destination-over";
+  context.fillStyle = SCRIM_COLOR;
+  context.fillRect(0, 0, context.canvas.width, context.canvas.height);
+  context.globalCompositeOperation = "source-over";
+}
+function drawHeatPoints({
+  context,
+  points,
+  radius
+}) {
+  const { width, height } = context.canvas;
+  context.clearRect(0, 0, width, height);
+  const stamp = getDiscStamp(radius);
+  const palette = getPalette();
+  if (points.length > 0 && stamp && palette) {
+    const cells = /* @__PURE__ */ new Map();
+    for (const point of points) {
+      const key = `${Math.round(point.x / radius)},${Math.round(point.y / radius)}`;
+      cells.set(key, (cells.get(key) ?? 0) + point.weight);
+    }
+    const sums = [...cells.values()].sort((first, second) => first - second);
+    const max = Math.max(1, sums[Math.floor(sums.length * 0.97)] ?? 1);
+    for (const point of points) {
+      context.globalAlpha = Math.min(1, Math.max(0.04, point.weight / max));
+      context.drawImage(stamp, point.x - radius * 2, point.y - radius * 2);
+    }
+    context.globalAlpha = 1;
+    const image = context.getImageData(0, 0, width, height);
+    const pixels = image.data;
+    for (let index = 0; index < pixels.length; index += 4) {
+      const alpha = pixels[index + 3] ?? 0;
+      if (alpha === 0) {
+        continue;
+      }
+      const offset = alpha * 4;
+      pixels[index] = palette[offset] ?? 0;
+      pixels[index + 1] = palette[offset + 1] ?? 0;
+      pixels[index + 2] = palette[offset + 2] ?? 0;
+      pixels[index + 3] = palette[offset + 3] ?? 0;
+    }
+    context.putImageData(image, 0, 0);
+  }
+  withScrimBehind(context);
+}
+function getScrollReach(buckets) {
+  const total = buckets.reduce((sum, bucket) => sum + bucket.views, 0);
+  const reach = Array.from({ length: 101 }, () => 0);
+  if (total === 0) {
+    return reach;
+  }
+  const viewsByPct = /* @__PURE__ */ new Map();
+  for (const bucket of buckets) {
+    viewsByPct.set(
+      bucket.pct,
+      (viewsByPct.get(bucket.pct) ?? 0) + bucket.views
+    );
+  }
+  let remaining = total;
+  for (let pct = 0; pct <= 100; pct++) {
+    reach[pct] = remaining / total;
+    remaining -= viewsByPct.get(pct) ?? 0;
+  }
+  return reach;
+}
+function drawScrollBands({
+  context,
+  reach
+}) {
+  const { width, height } = context.canvas;
+  context.clearRect(0, 0, width, height);
+  const palette = getPalette();
+  if (!palette) {
+    return;
+  }
+  for (let pct = 0; pct < 100; pct++) {
+    const share = Math.min(1, Math.max(0, reach[pct] ?? 0));
+    const offset = Math.round(share * 255) * 4;
+    const alpha = Math.min(0.62, (palette[offset + 3] ?? 0) / 255 * 0.7);
+    context.fillStyle = `rgba(${palette[offset] ?? 0}, ${palette[offset + 1] ?? 0}, ${palette[offset + 2] ?? 0}, ${alpha})`;
+    const top = Math.floor(pct / 100 * height);
+    const bottom = Math.ceil((pct + 1) / 100 * height);
+    context.fillRect(0, top, width, bottom - top);
+  }
+}
+function getReachMarks({
+  reach,
+  height
+}) {
+  return REACH_MARKS.flatMap((share) => {
+    const pct = reach.findIndex((value) => value < share);
+    return pct > 0 ? [{ share, y: pct / 100 * height }] : [];
+  });
+}
+function drawMarkLine({
+  context,
+  y,
+  label,
+  dashed,
+  scale
+}) {
+  const { width } = context.canvas;
+  context.save();
+  context.strokeStyle = MARK_LINE_COLOR;
+  context.lineWidth = Math.max(1, 2 * scale);
+  context.setLineDash(dashed ? [8 * scale, 6 * scale] : []);
+  context.beginPath();
+  context.moveTo(0, y);
+  context.lineTo(width, y);
+  context.stroke();
+  const fontPx = LABEL_FONT_PX * scale;
+  context.font = `500 ${fontPx}px system-ui, -apple-system, sans-serif`;
+  const paddingX = 10 * scale;
+  const labelHeight = fontPx + 10 * scale;
+  const labelWidth = context.measureText(label).width + paddingX * 2;
+  const left = 24 * scale;
+  const top = Math.max(0, y - labelHeight - 6 * scale);
+  context.fillStyle = MARK_LABEL_BACKGROUND;
+  context.beginPath();
+  context.roundRect(left, top, labelWidth, labelHeight, labelHeight / 2);
+  context.fill();
+  context.fillStyle = "#fff";
+  context.textBaseline = "middle";
+  context.fillText(label, left + paddingX, top + labelHeight / 2);
+  context.restore();
+}
+export {
+  drawHeatPoints,
+  drawMarkLine,
+  drawScrollBands,
+  getReachMarks,
+  getScrollReach
+};

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.18.1",
+  "version": "1.19.1",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.18.1",
+    "version": "1.19.1",
     "branch": "HEAD",
-    "commit": "770da909743d238b91a6529e4dc38a079fdfd43a",
-    "builtAt": "2026-10-22T00:12:53.373Z"
+    "commit": "0ccd8b79a0c0654b1b2e215b83c1efed676128fe",
+    "builtAt": "2026-10-24T00:25:38.939Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",

package/sandbox-runtime.js

@@ -5,6 +5,7 @@ import { AnnotationLayerMount } from "./annotations/AnnotationLayerMount";
 import { ClientErrorBoundary } from "./ClientErrorBoundary";
 import { DesignLibraryPreview } from "./design-library-preview/DesignLibraryPreview";
 import { DocumentReadyBeacon } from "./DocumentReadyBeacon";
+import { HeatLayerMount } from "./heatmaps/HeatLayerMount";
 import LinkInterceptor from "./LinkInterceptor";
 import { NavigationReceiver } from "./NavigationReceiver";
 import { PageCaptureResponder } from "./PageCaptureResponder";
@@ -26,6 +27,7 @@ function SandboxRuntime({ children }) {
       /* @__PURE__ */ jsx(PageCaptureResponder, {}),
       /* @__PURE__ */ jsx(EditorSelection, {}),
       /* @__PURE__ */ jsx(AnnotationLayerMount, {}),
+      /* @__PURE__ */ jsx(HeatLayerMount, {}),
       /* @__PURE__ */ jsx(DesignLibraryPreview, {}),
       children
     ] })

package/select-mode/EditorSelection.js

@@ -7,6 +7,10 @@ import { useParentMessaging } from "./hooks/useParentMessaging";
 import { useSelectionHover } from "./hooks/useSelectionHover";
 import { useSelectionInteractions } from "./hooks/useSelectionInteractions";
 import { useSelectionScrollSync } from "./hooks/useSelectionScrollSync";
+import {
+  FRAME_SHIELD_ATTRIBUTE,
+  FRAME_SHIELD_CSS
+} from "./interactions/embeddedFrames";
 import { PREVIEW_RENDERED_EVENT } from "./previewRendered";
 import { SectionCanvas } from "./section-canvas/SectionCanvas";
 import { sectionCanvasStore } from "./section-canvas/sectionCanvasStore";
@@ -154,6 +158,7 @@ function EditorSelection() {
             [data-select-mode-inline-editor][contenteditable="true"],
             [data-select-mode-inline-editor][contenteditable="true"] * { cursor: text !important; }
           ` }),
+    displayMode === "selection" && /* @__PURE__ */ jsx("style", { ...{ [FRAME_SHIELD_ATTRIBUTE]: "" }, children: FRAME_SHIELD_CSS }),
     /* @__PURE__ */ jsx(SelectionFrames, {}),
     /* @__PURE__ */ jsx(SectionCanvas, {})
   ] });

package/select-mode/hooks/useSelectionHover.js

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { getNearestSelectableElement } from "../descriptor/elementDescriptor";
 import { getWebsiteBuilderRpc } from "../iframeRpcChannel";
+import { getSelectionTargetForEmbeddedFrameHit } from "../interactions/embeddedFrames";
 import {
   CONTAINER_TAGS,
   findContainingSection
@@ -49,10 +50,15 @@ function useSelectionHover() {
       if (pointerClientPosition) {
         const isPointerWithinViewport = pointerClientPosition.x >= 0 && pointerClientPosition.y >= 0 && pointerClientPosition.x <= window.innerWidth && pointerClientPosition.y <= window.innerHeight;
         if (isPointerWithinViewport) {
-          hoveredElement = document.elementFromPoint(
+          const elementAtPoint = document.elementFromPoint(
             pointerClientPosition.x,
             pointerClientPosition.y
           );
+          hoveredElement = elementAtPoint && getSelectionTargetForEmbeddedFrameHit({
+            hitElement: elementAtPoint,
+            clientX: pointerClientPosition.x,
+            clientY: pointerClientPosition.y
+          });
         }
       }
       if (!hoveredElement) {

package/select-mode/hooks/useSelectionInteractions.js

@@ -4,6 +4,7 @@ import {
   getNearestSelectableElement
 } from "../descriptor/elementDescriptor";
 import { getWebsiteBuilderRpc } from "../iframeRpcChannel";
+import { getSelectionTargetForEmbeddedFrameHit } from "../interactions/embeddedFrames";
 import { findContainingSection } from "../interactions/sectionGeometry";
 import {
   collectDragCandidates,
@@ -402,7 +403,11 @@ function useSelectionInteractions() {
           return;
         }
         commitClickSelection({
-          targetElement,
+          targetElement: getSelectionTargetForEmbeddedFrameHit({
+            hitElement: targetElement,
+            clientX: event.clientX,
+            clientY: event.clientY
+          }),
           pointerEvent: event,
           candidates
         });

package/select-mode/interactions/embeddedFrames.d.ts

@@ -0,0 +1,17 @@
+export declare const FRAME_SHIELD_ATTRIBUTE = "data-select-mode-frame-shield";
+export declare const FRAME_SHIELD_CSS = "iframe { pointer-events: none !important; }";
+/**
+ * Select mode shields iframes from the pointer so presses over an embed reach
+ * this document instead of the embed's own (often cross-origin) one. The hit
+ * element is then whatever sits behind the frame, so lift the shield for one
+ * native hit test to find the frame the user actually pointed at. A frame
+ * injected as raw HTML has no React source, so prefer its nearest
+ * React-rendered ancestor, which the agent can edit. React 19 renders <body>
+ * too, so stop below it: a widget script appends its frame straight to the
+ * body, and selecting the frame beats selecting the whole page.
+ */
+export declare function getSelectionTargetForEmbeddedFrameHit({ hitElement, clientX, clientY, }: {
+    hitElement: Element;
+    clientX: number;
+    clientY: number;
+}): Element;

package/select-mode/interactions/embeddedFrames.js

@@ -0,0 +1,32 @@
+import { getFiberFromElement } from "../fiber";
+const FRAME_SHIELD_ATTRIBUTE = "data-select-mode-frame-shield";
+const FRAME_SHIELD_CSS = "iframe { pointer-events: none !important; }";
+function getSelectionTargetForEmbeddedFrameHit({
+  hitElement,
+  clientX,
+  clientY
+}) {
+  const shield = document.querySelector(
+    `style[${FRAME_SHIELD_ATTRIBUTE}]`
+  )?.sheet;
+  if (!shield || document.getElementsByTagName("iframe").length === 0) {
+    return hitElement;
+  }
+  shield.disabled = true;
+  const frame = document.elementFromPoint(clientX, clientY);
+  shield.disabled = false;
+  if (!(frame instanceof HTMLIFrameElement)) {
+    return hitElement;
+  }
+  for (let candidate = frame; candidate && candidate !== document.body; candidate = candidate.parentElement) {
+    if (getFiberFromElement(candidate)) {
+      return candidate;
+    }
+  }
+  return frame;
+}
+export {
+  FRAME_SHIELD_ATTRIBUTE,
+  FRAME_SHIELD_CSS,
+  getSelectionTargetForEmbeddedFrameHit
+};