@replohq/sandbox-runtime 1.18.0 → 1.18.1

package/_vendor/schemas/selectMode.d.ts

@@ -425,8 +425,8 @@ export declare const selectModeFormatCommandSchema: z.ZodEnum<{
 export declare const selectModeSelectionTypeSchema: z.ZodEnum<{
     drag: "drag";
     area: "area";
-    none: "none";
     element: "element";
+    none: "none";
 }>;
 /**
  * Parent-side selection state mirrored from messages the iframe posts

package/_vendor/schemas/selectModeIframeRpc.d.ts

@@ -485,8 +485,8 @@ export declare const websiteBuilderToPreviewIframeMethodConfig: {
             selectionType: z.ZodEnum<{
                 drag: "drag";
                 area: "area";
-                none: "none";
                 element: "element";
+                none: "none";
             }>;
             selectors: z.ZodOptional<z.ZodArray<z.ZodString>>;
         }, z.core.$strip>;
@@ -1087,8 +1087,8 @@ export declare const selectModeParentMessageSchema: z.ZodDiscriminatedUnion<[z.Z
         selectionType: z.ZodEnum<{
             drag: "drag";
             area: "area";
-            none: "none";
             element: "element";
+            none: "none";
         }>;
         selectors: z.ZodOptional<z.ZodArray<z.ZodString>>;
     }, z.core.$strip>;

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.18.0",
+  "version": "1.18.1",
   "branch": "HEAD",
-  "commit": "371ae98105e9f99b04918b3dffe40867380cd9ef",
-  "builtAt": "2026-10-21T22:33:13.604Z"
+  "commit": "770da909743d238b91a6529e4dc38a079fdfd43a",
+  "builtAt": "2026-10-22T00:12:53.373Z"
 };

package/capturePage.js

@@ -1,6 +1,8 @@
 import { snapdom } from "@zumer/snapdom";
 import { PageCaptureError } from "./_vendor/replo-utils/lib/pageCapture.mjs";
 import * as z from "zod";
+import { SECTION_CANVAS_ATTRIBUTE } from "./select-mode/section-canvas/sectionCanvasControls";
+import { SELECTION_FRAMES_CONTAINER_ID } from "./select-mode/selectionFrame";
 const JPEG_QUALITY = 0.8;
 const VIDEO_FRAME_QUALITY = 0.85;
 const VIDEO_LOAD_TIMEOUT_MS = 4e3;
@@ -332,7 +334,9 @@ async function capturePage({
     const raw = await snapdom.toRaw(document.body, {
       scale: 1,
       embedFonts: true,
-      exclude: (element) => offscreenImages.has(element),
+      exclude: (element) => {
+        return offscreenImages.has(element) || element.id === SELECTION_FRAMES_CONTAINER_ID || element.hasAttribute(SECTION_CANVAS_ATTRIBUTE);
+      },
       plugins: [createStandInsPlugin({ objectFitByFrame, iframeThumbnails })]
     });
     const image = new Image();

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.18.0",
+  "version": "1.18.1",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.18.0",
+    "version": "1.18.1",
     "branch": "HEAD",
-    "commit": "371ae98105e9f99b04918b3dffe40867380cd9ef",
-    "builtAt": "2026-10-21T22:33:13.604Z"
+    "commit": "770da909743d238b91a6529e4dc38a079fdfd43a",
+    "builtAt": "2026-10-22T00:12:53.373Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",

package/select-mode/hooks/useSelectionHover.js

@@ -7,6 +7,7 @@ import {
 } from "../interactions/sectionGeometry";
 import { getElementBoundingRect } from "../interactions/selectionGeometry";
 import { isSectionCanvasControl } from "../section-canvas/sectionCanvasControls";
+import { sectionCanvasStore } from "../section-canvas/sectionCanvasStore";
 import { useDisplayMode, useSelectModeStore } from "../selectModeStore";
 function useSelectionHover() {
   const store = useSelectModeStore();
@@ -31,6 +32,10 @@ function useSelectionHover() {
       getWebsiteBuilderRpc()?.hoverElement({ rect: hoverRect });
     };
     const syncCurrentHover = (pointerClientPosition = store.getState().lastPointerClientPosition) => {
+      if (sectionCanvasStore.getState().drag) {
+        postHoveredElement(null);
+        return;
+      }
       const previewSection = store.getState().sectionPreviewElement;
       if (previewSection) {
         if (previewSection.isConnected) {

package/select-mode/section-canvas/SectionCanvas.js

@@ -16,7 +16,6 @@ import {
 import {
   getPlacedSections,
   getSectionGaps,
-  GHOST_WIDTH_PX,
   sectionCanvasStore,
   useSectionCanvasStore
 } from "./sectionCanvasStore";
@@ -29,10 +28,11 @@ const ACCENT_PRESSED = "#1d4ed8";
 const PILL_HEIGHT = 22;
 const PILL_SPREAD = 64;
 const PILL_HALF_WIDTH = 52;
+const LABEL_HALF_WIDTH = 80;
 const SECTION_CANVAS_CSS = `
   [${SECTION_CANVAS_ATTRIBUTE}] button { all: initial; box-sizing: border-box; display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer !important; color: ${ACCENT}; background: #fff !important; }
   [${SECTION_CANVAS_ATTRIBUTE}] button * { cursor: inherit !important; }
-  [${SECTION_CANVAS_ATTRIBUTE}] [data-shape="pill"] { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; border-radius: 4px; background: ${ACCENT} !important; color: #fff !important; font-family: system-ui, -apple-system, sans-serif; font-weight: 600; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2); }
+  [${SECTION_CANVAS_ATTRIBUTE}] [data-shape="pill"] { position: absolute; display: flex; align-items: center; transform: translate(-50%, -50%); white-space: nowrap; border-radius: 4px; background: ${ACCENT} !important; color: #fff !important; font-family: system-ui, -apple-system, sans-serif; font-weight: 600; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2); }
   [${SECTION_CANVAS_ATTRIBUTE}] button[data-shape="pill"]:hover, [${SECTION_CANVAS_ATTRIBUTE}] button[data-shape="pill"]:focus-visible { background: ${ACCENT_PRESSED} !important; color: #fff !important; }
   [${SECTION_CANVAS_ATTRIBUTE}] button[data-shape="tool"] { border-radius: 4px; gap: 4px; background: transparent !important; color: #fff !important; font-family: system-ui, -apple-system, sans-serif; font-weight: 600; }
   [${SECTION_CANVAS_ATTRIBUTE}] button[data-shape="tool"][data-grip] { cursor: grab !important; }
@@ -237,73 +237,55 @@ function SectionCanvas() {
       }
     );
   }
-  let insertMarker = null;
-  const insertingAt = canvas.insertingAt;
-  if (typeof insertingAt === "number" && !drag) {
-    const placed = getPlacedSections({ canvas, elementsByIndex });
-    const gap = getSectionGaps(placed, canvas.sections.length).find(
-      (candidate) => candidate.at === insertingAt
+  const markedGap = drag ? drag.gap : canvas.insertingAt;
+  let gapMarker = null;
+  const placed = typeof markedGap === "number" ? getPlacedSections({ canvas, elementsByIndex }) : [];
+  const gap = getSectionGaps(placed, canvas.sections.length).find(
+    (candidate) => candidate.at === markedGap
+  );
+  if (gap) {
+    const left = Math.max(
+      visible.left,
+      Math.min(...placed.map(({ box }) => box.left))
     );
-    if (gap) {
-      const left = Math.max(
-        visible.left,
-        Math.min(...placed.map(({ box }) => box.left))
-      );
-      const right = Math.min(
-        visible.right,
-        Math.max(...placed.map(({ box }) => box.right))
-      );
-      const y = Math.min(
-        Math.max(gap.y, PILL_HEIGHT * unit),
-        window.innerHeight - PILL_HEIGHT * unit
-      );
-      insertMarker = /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "fixed",
-              left,
-              width: right - left,
-              top: y - 1.5 * unit,
-              height: 3 * unit,
-              background: ACCENT
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-shape": "pill",
-            role: "status",
-            style: {
-              left: (left + right) / 2,
-              top: y,
-              height: PILL_HEIGHT * unit,
-              padding: `0 ${10 * unit}px`,
-              fontSize: 11 * unit,
-              display: "flex",
-              alignItems: "center"
-            },
-            children: "New Section Goes Here"
+    const right = Math.min(
+      visible.right,
+      Math.max(...placed.map(({ box }) => box.right))
+    );
+    const y = Math.min(
+      Math.max(gap.y, PILL_HEIGHT * unit),
+      window.innerHeight - PILL_HEIGHT * unit
+    );
+    gapMarker = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-replo-section-drop-line": true,
+          style: {
+            position: "fixed",
+            left,
+            width: right - left,
+            top: y - 1.5 * unit,
+            height: 3 * unit,
+            borderRadius: 3 * unit,
+            background: ACCENT,
+            boxShadow: `0 0 0 ${unit}px #fff`
           }
-        )
-      ] });
-    }
+        }
+      ),
+      !drag && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-shape": "pill",
+          role: "status",
+          style: pillStyle({ unit, left: (left + right) / 2, top: y }),
+          children: "New Section Goes Here"
+        }
+      )
+    ] });
   }
   let dragLayer = null;
   if (drag?.isActive && activeBox) {
-    const placed = getPlacedSections({ canvas, elementsByIndex });
-    const gap = drag.gap === null ? null : getSectionGaps(placed, canvas.sections.length).find((candidate) => {
-      return candidate.at === drag.gap;
-    });
-    const lineLeft = Math.min(...placed.map(({ box }) => box.left));
-    const lineRight = Math.max(...placed.map(({ box }) => box.right));
-    const ghostWidth = GHOST_WIDTH_PX * unit;
-    const ghostHeight = Math.min(
-      (activeBox.bottom - activeBox.top) / (activeBox.right - activeBox.left) * ghostWidth,
-      ghostWidth * 0.75
-    );
     dragLayer = /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "div",
@@ -320,61 +302,26 @@ function SectionCanvas() {
           }
         }
       ),
-      gap && /* @__PURE__ */ jsx(
-        "div",
-        {
-          "data-replo-section-drop-line": true,
-          style: {
-            position: "fixed",
-            left: lineLeft,
-            width: lineRight - lineLeft,
-            top: Math.min(
-              Math.max(gap.y, 3 * unit),
-              window.innerHeight - 3 * unit
-            ) - 1.5 * unit,
-            height: 3 * unit,
-            borderRadius: 3 * unit,
-            background: ACCENT,
-            boxShadow: `0 0 0 ${unit}px #fff`
-          }
-        }
-      ),
       /* @__PURE__ */ jsx(
         "div",
         {
+          "data-shape": "pill",
           style: {
-            position: "fixed",
-            left: drag.x + 14 * unit + ghostWidth > window.innerWidth ? drag.x - 14 * unit - ghostWidth : drag.x + 14 * unit,
-            top: Math.min(
-              drag.y + 14 * unit,
-              window.innerHeight - ghostHeight - 8 * unit
-            ),
-            width: ghostWidth,
-            height: ghostHeight,
+            ...pillStyle({
+              unit,
+              left: Math.min(
+                Math.max(drag.x, LABEL_HALF_WIDTH * unit),
+                window.innerWidth - LABEL_HALF_WIDTH * unit
+              ),
+              top: drag.y + 20 * unit + PILL_HEIGHT * unit > window.innerHeight ? drag.y - 20 * unit : drag.y + 20 * unit
+            }),
+            maxWidth: 2 * LABEL_HALF_WIDTH * unit,
+            display: "block",
+            lineHeight: `${PILL_HEIGHT * unit}px`,
             overflow: "hidden",
-            borderRadius: 6 * unit,
-            background: "#fff",
-            boxShadow: `0 ${8 * unit}px ${24 * unit}px rgba(15, 23, 42, 0.25), 0 0 0 ${unit}px rgba(15, 23, 42, 0.12)`,
-            opacity: 0.95,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            font: `500 ${12 * unit}px/1.3 system-ui, sans-serif`,
-            color: "#3f3f46"
+            textOverflow: "ellipsis"
           },
-          children: drag.ghostSrc ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: drag.ghostSrc,
-              alt: "",
-              style: {
-                display: "block",
-                width: "100%",
-                height: "auto",
-                alignSelf: "flex-start"
-              }
-            }
-          ) : activeSection?.label ?? "Section"
+          children: activeSection?.label ?? "Section"
         }
       )
     ] });
@@ -397,7 +344,7 @@ function SectionCanvas() {
         onPointerDown: (event) => event.stopPropagation(),
         children: [
           /* @__PURE__ */ jsx("style", { children: SECTION_CANVAS_CSS }),
-          insertMarker,
+          gapMarker,
           overlay,
           dragLayer
         ]
@@ -406,6 +353,19 @@ function SectionCanvas() {
     document.body
   );
 }
+function pillStyle({
+  unit,
+  left,
+  top
+}) {
+  return {
+    left,
+    top,
+    height: PILL_HEIGHT * unit,
+    padding: `0 ${10 * unit}px`,
+    fontSize: 11 * unit
+  };
+}
 function SectionControls({
   index,
   label,
@@ -435,6 +395,8 @@ function SectionControls({
     ),
     visible.right - PILL_HALF_WIDTH * unit - spread
   );
+  const outlineLeft = Math.max(box.left, visible.left);
+  const outlineRight = Math.min(box.right, visible.right);
   const toolbarTop = Math.max(box.top, 0) + TOOLBAR_INSET * unit;
   const textButton = {
     height: size,
@@ -447,9 +409,9 @@ function SectionControls({
       {
         style: {
           position: "fixed",
-          left: box.left,
+          left: outlineLeft,
           top: box.top,
-          width: box.right - box.left,
+          width: outlineRight - outlineLeft,
           height: box.bottom - box.top,
           boxSizing: "border-box",
           border: `${2 * unit}px solid ${ACCENT}`,
@@ -471,13 +433,7 @@ function SectionControls({
         type: "button",
         "data-shape": "pill",
         "aria-label": `Add Section ${edge} ${label}`,
-        style: {
-          left,
-          top,
-          height: pillHeight,
-          padding: `0 ${10 * unit}px`,
-          fontSize: 11 * unit
-        },
+        style: pillStyle({ unit, left, top }),
         onClick: () => actions.request({ type: "insert", at }),
         children: "Add Section"
       },
@@ -489,7 +445,7 @@ function SectionControls({
         style: {
           position: "fixed",
           top: toolbarTop,
-          right: window.innerWidth - Math.min(box.right, visible.right) + TOOLBAR_INSET * unit,
+          right: window.innerWidth - outlineRight + TOOLBAR_INSET * unit,
           display: "flex",
           gap: 2 * unit,
           padding: 2 * unit,

package/select-mode/section-canvas/sectionCanvasStore.d.ts

@@ -7,7 +7,6 @@ export type SectionDrag = {
     x: number;
     y: number;
     isActive: boolean;
-    ghostSrc: string | null;
     gap: number | null;
 };
 type PendingMove = {
@@ -52,7 +51,6 @@ type SectionCanvasStoreState = {
         }) => void;
     };
 };
-export declare const GHOST_WIDTH_PX = 240;
 /** On-screen sections in page order, with their boxes. */
 export declare function getPlacedSections(state: Pick<SectionCanvasStoreState, "canvas" | "elementsByIndex">): {
     section: import("../../_vendor/schemas/generated/selectModeIframeRpc").SectionCanvasSection;

package/select-mode/section-canvas/sectionCanvasStore.js

@@ -8,9 +8,7 @@ import {
   startOptimisticSectionMove
 } from "./optimisticSectionMove";
 import { findSectionElements } from "./sectionElements";
-import { captureSectionGhost } from "./sectionGhost";
 const DRAG_THRESHOLD_PX = 4;
-const GHOST_WIDTH_PX = 240;
 let resolveToken = 0;
 let moveCounter = 0;
 function sameSections(previous, next) {
@@ -164,7 +162,6 @@ const sectionCanvasStore = createShallowStore(
         getWebsiteBuilderRpc()?.sectionCanvasRequest({ request });
       },
       beginDrag: ({ index, pointerId, x, y }) => {
-        const elements = get().elementsByIndex.get(index) ?? [];
         set({
           drag: {
             index,
@@ -174,20 +171,9 @@ const sectionCanvasStore = createShallowStore(
             x,
             y,
             isActive: false,
-            ghostSrc: null,
             gap: null
           }
         });
-        const scale = get().canvas?.previewScale ?? 1;
-        void captureSectionGhost({
-          elements,
-          width: GHOST_WIDTH_PX / scale
-        }).then((ghostSrc) => {
-          const drag = get().drag;
-          if (ghostSrc && drag?.pointerId === pointerId && drag.index === index) {
-            set({ drag: { ...drag, ghostSrc } });
-          }
-        });
       },
       updateDrag: ({ x, y }) => {
         const state = get();
@@ -267,7 +253,6 @@ function useSectionCanvasStore(selector) {
   return useShallowStore(sectionCanvasStore, selector);
 }
 export {
-  GHOST_WIDTH_PX,
   getPlacedSections,
   getSectionGaps,
   sectionCanvasStore,

package/select-mode/section-canvas/sectionGhost.d.ts

@@ -1,5 +0,0 @@
-/** A small picture of a section to drag around, or null when it can't be drawn. */
-export declare function captureSectionGhost({ elements, width, }: {
-    elements: readonly HTMLElement[];
-    width: number;
-}): Promise<string | null>;

package/select-mode/section-canvas/sectionGhost.js

@@ -1,23 +0,0 @@
-"use client";
-async function captureSectionGhost({
-  elements,
-  width
-}) {
-  const element = elements.find((candidate) => candidate.isConnected);
-  if (!element) {
-    return null;
-  }
-  const rect = element.getBoundingClientRect();
-  if (rect.width === 0 || rect.height === 0) {
-    return null;
-  }
-  try {
-    const { snapdom } = await import("@zumer/snapdom");
-    return await snapdom.toRaw(element, { width, embedFonts: false });
-  } catch {
-    return null;
-  }
-}
-export {
-  captureSectionGhost
-};