@replohq/sandbox-runtime 1.18.1 → 1.19.0

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.0",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.18.1",
+    "version": "1.19.0",
     "branch": "HEAD",
-    "commit": "770da909743d238b91a6529e4dc38a079fdfd43a",
-    "builtAt": "2026-10-22T00:12:53.373Z"
+    "commit": "1aa1f09e1dd141b243b7bb3b1ff1bc947fa01371",
+    "builtAt": "2026-10-23T05:44:42.441Z"
   },
   "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
     ] })