@replohq/sandbox-runtime 1.19.3 → 1.19.5

package/_vendor/schemas/externalNavigationIframeRpc.d.ts

@@ -1,4 +1,5 @@
 import * as z from "zod";
+import type { IframeRpcVersionMismatch } from "./iframeRpcChannel";
 export declare const EXTERNAL_NAVIGATION_IFRAME_RPC_CHANNEL_ID: "replo:external-navigation-iframe-rpc";
 export declare const EXTERNAL_NAVIGATION_IFRAME_RPC_CHANNEL_VERSION: 1;
 export declare const sandboxToParentExternalNavigationMethodConfig: {
@@ -11,7 +12,8 @@ export declare const sandboxToParentExternalNavigationMethodConfig: {
 };
 export declare const parentToSandboxExternalNavigationMethodConfig: {};
 /** Opens what the frame hands up in a new tab. Null `frameOrigin` accepts any origin. */
-export declare function createExternalNavigationParentChannel({ getFrameWindow, frameOrigin, }: {
+export declare function createExternalNavigationParentChannel({ getFrameWindow, frameOrigin, onPeerVersionMismatch, }: {
     getFrameWindow: () => Window | null;
     frameOrigin: string | null;
+    onPeerVersionMismatch?: (mismatch: IframeRpcVersionMismatch) => void;
 }): import("./iframeRpcChannel").IframeRpcChannel<{}>;

package/_vendor/schemas/externalNavigationIframeRpc.mjs

@@ -1,4 +1,4 @@
-import { createIframeRpcChannel } from '../../chunk-36IPO47A.mjs';
+import { createIframeRpcChannel } from '../../chunk-6WREP7C2.mjs';
 import '../../chunk-ZTT7SNYN.mjs';
 import '../../chunk-THOBCJJA.mjs';
 import '../../chunk-4ITJNSXZ.mjs';
@@ -17,7 +17,8 @@ var sandboxToParentExternalNavigationMethodConfig = {
 var parentToSandboxExternalNavigationMethodConfig = {};
 function createExternalNavigationParentChannel({
   getFrameWindow,
-  frameOrigin
+  frameOrigin,
+  onPeerVersionMismatch
 }) {
   return createIframeRpcChannel({
     subscriberWindow: window,
@@ -30,6 +31,7 @@ function createExternalNavigationParentChannel({
     },
     outgoingMethods: parentToSandboxExternalNavigationMethodConfig,
     incomingMethods: sandboxToParentExternalNavigationMethodConfig,
+    onPeerVersionMismatch,
     handlers: {
       openExternal: ({ url: url2 }) => {
         window.open(url2, "_blank", "noopener,noreferrer");

package/_vendor/schemas/iframeRpcChannel.d.ts

@@ -50,6 +50,11 @@ type SubscriberWindow = {
 type TargetIframeWindow = {
     postMessage: (message: unknown, targetOrigin: string) => void;
 };
+export type IframeRpcVersionMismatch = {
+    channelIdentifier: string;
+    ownVersion: number;
+    peerVersion: number;
+};
 type IframeRpcChannelOptions<OutgoingMethods extends IframeRpcChannelMethodConfig, IncomingMethods extends IframeRpcChannelMethodConfig> = {
     subscriberWindow: SubscriberWindow;
     channelIdentifier: string;
@@ -60,6 +65,13 @@ type IframeRpcChannelOptions<OutgoingMethods extends IframeRpcChannelMethodConfi
     outgoingMethods: OutgoingMethods;
     incomingMethods: IncomingMethods;
     handlers: IframeRpcChannelHandlers<IncomingMethods, OutgoingMethods>;
+    /**
+     * Called for every message from the expected peer on another version of
+     * this channel. The message itself is dropped: neither side can parse the
+     * other's protocol, so recovering (e.g. reloading the older side) is the
+     * caller's job.
+     */
+    onPeerVersionMismatch?: (mismatch: IframeRpcVersionMismatch) => void;
 };
 export type IframeRpcChannel<OutgoingMethods extends IframeRpcChannelMethodConfig = IframeRpcChannelMethodConfig> = {
     subscribe: () => () => void;

package/_vendor/schemas/iframeRpcChannel.mjs

@@ -1,4 +1,4 @@
-export { createIframeRpcChannel, createIframeRpcRemote, iframeRpcCallSchema } from '../../chunk-36IPO47A.mjs';
+export { createIframeRpcChannel, createIframeRpcRemote, iframeRpcCallSchema } from '../../chunk-6WREP7C2.mjs';
 import '../../chunk-ZTT7SNYN.mjs';
 import '../../chunk-THOBCJJA.mjs';
 import '../../chunk-4ITJNSXZ.mjs';

package/_vendor/schemas/previewHealthIframeRpc.d.ts

@@ -1,4 +1,5 @@
 import * as z from "zod";
+import type { IframeRpcVersionMismatch } from "./iframeRpcChannel";
 export declare const PREVIEW_HEALTH_IFRAME_RPC_CHANNEL_ID: "replo:preview-health-iframe-rpc";
 export declare const PREVIEW_HEALTH_IFRAME_RPC_CHANNEL_VERSION: 1;
 export declare const previewErrorDetailSchema: z.ZodObject<{
@@ -147,7 +148,7 @@ export declare const editorToPreviewHealthMethodConfig: {};
  * status from current runtimes and null from older runtimes, which only say
  * ok or error.
  */
-export declare function subscribeToPreviewHealth({ getFrameWindow, onDocumentArrived, onStatus, onDiagnostic, }: {
+export declare function subscribeToPreviewHealth({ getFrameWindow, onDocumentArrived, onStatus, onDiagnostic, onPeerVersionMismatch, }: {
     getFrameWindow: () => Window | null;
     onDocumentArrived?: () => void;
     onStatus: (update: {
@@ -155,5 +156,6 @@ export declare function subscribeToPreviewHealth({ getFrameWindow, onDocumentArr
         report: PreviewStatusReport | null;
     }) => void;
     onDiagnostic?: (report: PreviewDiagnosticReport) => void;
+    onPeerVersionMismatch?: (mismatch: IframeRpcVersionMismatch) => void;
 }): () => void;
 export {};

package/_vendor/schemas/previewHealthIframeRpc.mjs

@@ -1,4 +1,4 @@
-import { createIframeRpcChannel } from '../../chunk-36IPO47A.mjs';
+import { createIframeRpcChannel } from '../../chunk-6WREP7C2.mjs';
 import '../../chunk-ZTT7SNYN.mjs';
 import '../../chunk-THOBCJJA.mjs';
 import '../../chunk-4ITJNSXZ.mjs';
@@ -71,7 +71,8 @@ function subscribeToPreviewHealth({
   getFrameWindow,
   onDocumentArrived,
   onStatus,
-  onDiagnostic
+  onDiagnostic,
+  onPeerVersionMismatch
 }) {
   const isFromFrame = (event) => {
     const frameWindow = getFrameWindow();
@@ -86,6 +87,7 @@ function subscribeToPreviewHealth({
     isExpectedMessage: isFromFrame,
     outgoingMethods: editorToPreviewHealthMethodConfig,
     incomingMethods: previewHealthToEditorMethodConfig,
+    onPeerVersionMismatch,
     handlers: {
       documentArrived: () => {
         onDocumentArrived?.();

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.19.3",
+  "version": "1.19.5",
   "branch": "HEAD",
-  "commit": "1b05582b9331219dbbcb56ff30f0876086df7e32",
-  "builtAt": "2026-10-24T18:33:20.377Z"
+  "commit": "925967a151b3e53a1891d5d57b0cf956b0f64ffe",
+  "builtAt": "2026-10-28T00:16:14.622Z"
 };

package/{chunk-36IPO47A.mjs → chunk-6WREP7C2.mjs}

@@ -252,7 +252,8 @@ function createIframeRpcChannel(options) {
     isExpectedMessage,
     outgoingMethods,
     incomingMethods,
-    handlers
+    handlers,
+    onPeerVersionMismatch
   } = options;
   const pendingRequests = /* @__PURE__ */ new Map();
   let subscriberCount = 0;
@@ -380,7 +381,7 @@ function createIframeRpcChannel(options) {
   const handleMessage = (event) => {
     const parsedMetadata = z.object({
       channelIdentifier: z.literal(channelIdentifier),
-      version: z.literal(version)
+      version: z.number()
     }).safeParse(event.data);
     if (!parsedMetadata.success) {
       return;
@@ -400,6 +401,15 @@ function createIframeRpcChannel(options) {
       });
       return;
     }
+    const peerVersion = parsedMetadata.data.version;
+    if (peerVersion !== version) {
+      onPeerVersionMismatch?.({
+        channelIdentifier,
+        ownVersion: version,
+        peerVersion
+      });
+      return;
+    }
     const parsedCall = iframeRpcCallSchema.safeParse(event.data);
     if (!parsedCall.success) {
       return;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.19.3",
+  "version": "1.19.5",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.19.3",
+    "version": "1.19.5",
     "branch": "HEAD",
-    "commit": "1b05582b9331219dbbcb56ff30f0876086df7e32",
-    "builtAt": "2026-10-24T18:33:20.377Z"
+    "commit": "925967a151b3e53a1891d5d57b0cf956b0f64ffe",
+    "builtAt": "2026-10-28T00:16:14.622Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",

package/select-mode/descriptor/elementDescriptor.js

@@ -116,6 +116,13 @@ function identifyElement({
     }
     return "image";
   }
+  if (element instanceof HTMLIFrameElement) {
+    if (element.hasAttribute("srcdoc")) {
+      return "iframe: inline HTML (srcdoc)";
+    }
+    const src = element.getAttribute("src");
+    return src ? `iframe: [${src.slice(0, 60)}]` : "iframe";
+  }
   if (/^h[1-6]$/.test(tagName)) {
     return trimmedText ? `heading(${tagName}): "${trimmedText.slice(0, 60)}"` : tagName;
   }

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

@@ -4,11 +4,7 @@ export declare const FRAME_SHIELD_CSS = "iframe { pointer-events: none !importan
  * 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.
+ * native hit test to find the frame the user actually pointed at.
  */
 export declare function getSelectionTargetForEmbeddedFrameHit({ hitElement, clientX, clientY, }: {
     hitElement: Element;

package/select-mode/interactions/embeddedFrames.js

@@ -1,4 +1,3 @@
-import { getFiberFromElement } from "../fiber";
 const FRAME_SHIELD_ATTRIBUTE = "data-select-mode-frame-shield";
 const FRAME_SHIELD_CSS = "iframe { pointer-events: none !important; }";
 function getSelectionTargetForEmbeddedFrameHit({
@@ -15,15 +14,7 @@ function getSelectionTargetForEmbeddedFrameHit({
   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;
+  return frame instanceof HTMLIFrameElement ? frame : hitElement;
 }
 export {
   FRAME_SHIELD_ATTRIBUTE,

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

@@ -219,24 +219,21 @@ function SectionCanvas() {
   const activeIndex = drag ? drag.index : hoveredIndex ?? selectedIndex;
   const activeSection = activeIndex === null ? void 0 : canvas.sections[activeIndex];
   const activeBox = activeIndex === null ? null : getSectionViewportBox(elementsByIndex.get(activeIndex));
-  let overlay = null;
-  if (activeSection && activeBox && !isMovePending) {
-    overlay = /* @__PURE__ */ jsx(
-      SectionControls,
-      {
-        index: activeSection.index,
-        label: activeSection.label,
-        isLocked: activeSection.isLocked,
-        isFirst: activeSection.index === 0,
-        isLast: activeSection.index === canvas.sections.length - 1,
-        box: activeBox,
-        visible,
-        unit,
-        isDragging: drag !== null,
-        isPicking: typeof canvas.insertingAt === "number"
-      }
-    );
-  }
+  const overlay = activeSection && activeBox && !isMovePending ? /* @__PURE__ */ jsx(
+    SectionControls,
+    {
+      index: activeSection.index,
+      label: activeSection.label,
+      isLocked: activeSection.isLocked,
+      isFirst: activeSection.index === 0,
+      isLast: activeSection.index === canvas.sections.length - 1,
+      box: activeBox,
+      visible,
+      unit,
+      isDragging: drag !== null,
+      isPicking: typeof canvas.insertingAt === "number"
+    }
+  ) : null;
   const markedGap = drag ? drag.gap : canvas.insertingAt;
   let gapMarker = null;
   const placed = typeof markedGap === "number" ? getPlacedSections({ canvas, elementsByIndex }) : [];
@@ -284,48 +281,45 @@ function SectionCanvas() {
       )
     ] });
   }
-  let dragLayer = null;
-  if (drag?.isActive && activeBox) {
-    dragLayer = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "fixed",
-            left: activeBox.left,
-            top: activeBox.top,
-            width: activeBox.right - activeBox.left,
-            height: activeBox.bottom - activeBox.top,
-            background: "rgba(255, 255, 255, 0.65)",
-            outline: `${2 * unit}px dashed ${ACCENT}`,
-            outlineOffset: -unit
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          "data-shape": "pill",
-          style: {
-            ...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",
-            textOverflow: "ellipsis"
-          },
-          children: activeSection?.label ?? "Section"
+  const dragLayer = drag?.isActive && activeBox ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          left: activeBox.left,
+          top: activeBox.top,
+          width: activeBox.right - activeBox.left,
+          height: activeBox.bottom - activeBox.top,
+          background: "rgba(255, 255, 255, 0.65)",
+          outline: `${2 * unit}px dashed ${ACCENT}`,
+          outlineOffset: -unit
         }
-      )
-    ] });
-  }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-shape": "pill",
+        style: {
+          ...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",
+          textOverflow: "ellipsis"
+        },
+        children: activeSection?.label ?? "Section"
+      }
+    )
+  ] }) : null;
   return createPortal(
     /* @__PURE__ */ jsxs(
       "div",
@@ -528,17 +522,9 @@ function SectionControls({
     )
   ] });
 }
-const GRIP_DOTS = [
-  [5, 3],
-  [5, 8],
-  [5, 13],
-  [11, 3],
-  [11, 8],
-  [11, 13]
-];
 function GripIcon({ size }) {
-  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", "aria-hidden": "true", children: GRIP_DOTS.map(([cx, cy]) => {
-    return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", "aria-hidden": "true", children: [5, 11].flatMap((cx) => {
+    return [3, 8, 13].map((cy) => /* @__PURE__ */ jsx(
       "circle",
       {
         cx,
@@ -547,7 +533,7 @@ function GripIcon({ size }) {
         fill: "currentColor"
       },
       `${cx}-${cy}`
-    );
+    ));
   }) });
 }
 export {

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

@@ -1,7 +1,3 @@
-type SectionBox = {
-    index: number;
-    elements: HTMLElement[];
-};
 /** How far each section shifts once `from` moves to `to`, keeping the original gaps between slots. */
 export declare function getMovedSectionOffsets({ sections, from, to, }: {
     sections: readonly {
@@ -28,12 +24,17 @@ export declare function getSectionViewportBox(elements: readonly HTMLElement[] |
  * page never shows the old order in between.
  */
 export declare function startOptimisticSectionMove({ sections, from, to, onLanded, }: {
-    sections: readonly SectionBox[];
+    sections: readonly {
+        index: number;
+        elements: readonly HTMLElement[];
+    }[];
     from: number;
     to: number;
     onLanded: () => void;
 }): {
     revert: () => void;
-    settle: () => void;
+    settle: ({ afterMs }: {
+        afterMs: number;
+    }) => void;
+    land: () => void;
 };
-export {};

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

@@ -85,11 +85,11 @@ function startOptimisticSectionMove({
   const reordered = [...order];
   reordered.splice(fromPosition, 1);
   reordered.splice(getTargetPosition({ indices: order, from, to }), 0, from);
+  const textOf = (elements) => {
+    return elements.map((element) => element.textContent ?? "").join("\n");
+  };
   const textBySection = new Map(
-    placed.map((section) => [
-      section.index,
-      section.elements.map((element) => element.textContent ?? "").join("\n")
-    ])
+    placed.map((section) => [section.index, textOf(section.elements)])
   );
   const watchedSlots = placed.flatMap((section, slot) => {
     const expected = textBySection.get(reordered[slot]);
@@ -97,11 +97,13 @@ function startOptimisticSectionMove({
   });
   const containers = new Set(
     placed.flatMap((section) => {
-      return section.elements.flatMap((element) => {
-        return element.parentNode ? [element.parentNode] : [];
-      });
+      return section.elements.flatMap((element) => element.parentNode ?? []);
     })
   );
+  const rootsInMovedOrder = reordered.flatMap((index) => {
+    const root = placed.find((section) => section.index === index)?.elements.find((element) => element.isConnected);
+    return root ? [root] : [];
+  });
   let isDone = false;
   let fallbackTimeout;
   const finish = ({ animate }) => {
@@ -128,20 +130,26 @@ function startOptimisticSectionMove({
       restoreTransitions();
     }
   };
-  const hasLanded = (records) => {
-    if (records.some((record) => {
-      return record.type === "childList" && containers.has(record.target);
-    })) {
-      return true;
-    }
-    return watchedSlots.length > 0 && watchedSlots.every(({ elements, expected }) => {
-      return elements.some((element) => !element.isConnected) || elements.map((element) => element.textContent ?? "").join("\n") === expected;
-    });
+  const hasLanded = () => {
+    return (
+      rootsInMovedOrder.length >= 2 && rootsInMovedOrder.every((root, position) => {
+        const previous = rootsInMovedOrder[position - 1];
+        return root.isConnected && (!previous || Boolean(
+          previous.compareDocumentPosition(root) & Node.DOCUMENT_POSITION_FOLLOWING
+        ));
+      }) ||
+      rootsInMovedOrder.some((root) => !root.isConnected) || watchedSlots.length > 0 && watchedSlots.every(({ elements, expected }) => {
+        return elements.some((element) => !element.isConnected) || textOf(elements) === expected;
+      })
+    );
+  };
+  const land = () => {
+    finish({ animate: false });
+    onLanded();
   };
-  const observer = new MutationObserver((records) => {
-    if (hasLanded(records)) {
-      finish({ animate: false });
-      onLanded();
+  const observer = new MutationObserver(() => {
+    if (hasLanded()) {
+      land();
     }
   });
   for (const container of containers) {
@@ -153,16 +161,14 @@ function startOptimisticSectionMove({
   }
   return {
     revert: () => finish({ animate: true }),
-    settle: () => {
+    settle: ({ afterMs }) => {
       if (isDone) {
         return;
       }
       clearTimeout(fallbackTimeout);
-      fallbackTimeout = setTimeout(() => {
-        finish({ animate: false });
-        onLanded();
-      }, 8e3);
-    }
+      fallbackTimeout = setTimeout(land, afterMs);
+    },
+    land
   };
 }
 export {

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

@@ -1,4 +1,5 @@
 import type { SectionCanvasRequest, SectionCanvasState } from "../../_vendor/schemas/generated/selectModeIframeRpc";
+import { startOptimisticSectionMove } from "./optimisticSectionMove";
 export type SectionDrag = {
     index: number;
     pointerId: number;
@@ -9,10 +10,9 @@ export type SectionDrag = {
     isActive: boolean;
     gap: number | null;
 };
-type PendingMove = {
+type PendingMove = ReturnType<typeof startOptimisticSectionMove> & {
     moveId: string;
-    settle: () => void;
-    revert: () => void;
+    phase: "saving" | "refreshedWhileSaving" | "saved";
 };
 type SectionCanvasStoreState = {
     canvas: SectionCanvasState | null;

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

@@ -52,11 +52,10 @@ function getDropGap({
     getPlacedSections(state),
     state.canvas?.sections.length ?? 0
   );
-  let nearest = null;
+  let nearest;
   for (const gap of gaps) {
-    const distance = Math.abs(gap.y - y);
-    if (!nearest || distance < nearest.distance) {
-      nearest = { at: gap.at, distance };
+    if (!nearest || Math.abs(gap.y - y) < Math.abs(nearest.y - y)) {
+      nearest = gap;
     }
   }
   if (!nearest || nearest.at === index || nearest.at === index + 1) {
@@ -145,10 +144,19 @@ const sectionCanvasStore = createShallowStore(
         reportLayout(get());
       },
       handlePreviewRefresh: () => {
-        if (!get().canvas || get().pendingMove) {
+        const { canvas, pendingMove } = get();
+        if (!canvas) {
           return;
         }
-        void get().actions.resolveSections();
+        if (!pendingMove) {
+          void get().actions.resolveSections();
+        } else if (pendingMove.phase === "saved") {
+          pendingMove.land();
+        } else {
+          set({
+            pendingMove: { ...pendingMove, phase: "refreshedWhileSaving" }
+          });
+        }
       },
       bumpGeometry: () => {
         set((state) => ({ geometryVersion: state.geometryVersion + 1 }));
@@ -206,16 +214,14 @@ const sectionCanvasStore = createShallowStore(
       },
       move: ({ index, to }) => {
         const state = get();
-        const sectionCount = state.canvas?.sections.length ?? 0;
-        if (!state.canvas || state.canvas.isDisabled || state.pendingMove || state.canvas.sections[index]?.isLocked !== false || to === index || to < 0 || to >= sectionCount) {
+        if (!state.canvas || state.canvas.isDisabled || state.pendingMove || state.canvas.sections[index]?.isLocked !== false || to === index || to < 0 || to >= state.canvas.sections.length) {
           return;
         }
-        moveCounter += 1;
-        const moveId = `section-move-${Date.now()}-${moveCounter}`;
+        const moveId = `section-move-${Date.now()}-${++moveCounter}`;
         const optimistic = startOptimisticSectionMove({
           sections: state.canvas.sections.map((section) => ({
             index: section.index,
-            elements: [...state.elementsByIndex.get(section.index) ?? []]
+            elements: state.elementsByIndex.get(section.index) ?? []
           })),
           from: index,
           to,
@@ -228,7 +234,7 @@ const sectionCanvasStore = createShallowStore(
           }
         });
         set({
-          pendingMove: { moveId, ...optimistic },
+          pendingMove: { moveId, phase: "saving", ...optimistic },
           hoveredIndex: null
         });
         get().actions.request({ type: "move", moveId, index, to });
@@ -239,7 +245,9 @@ const sectionCanvasStore = createShallowStore(
           return;
         }
         if (outcome === "persisted") {
-          pendingMove.settle();
+          const afterMs = pendingMove.phase === "refreshedWhileSaving" ? 8e3 : 2e4;
+          set({ pendingMove: { ...pendingMove, phase: "saved" } });
+          pendingMove.settle({ afterMs });
           return;
         }
         pendingMove.revert();

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

@@ -1,16 +1,14 @@
-import type { SelectModeSourceLocation } from "../../_vendor/schemas/generated/selectMode";
 import type { SectionCanvasSection } from "../../_vendor/schemas/generated/selectModeIframeRpc";
-type Resolve = (locations: readonly SelectModeSourceLocation[]) => Promise<SelectModeSourceLocation[]>;
+import { symbolicateSourceLocations } from "../symbolicate";
 /**
  * The DOM elements each page section renders, found from source, not layout: an element belongs to
- * a section when a JSX call site in its owner chain lies in the page file inside that section's lines. Walks down from <body> a level at a time, symbolicating each level
- * in one request and stopping at the first element that matches, so a section's descendants are
- * never read.
+ * a section when a JSX call site in its owner chain lies in the page file inside that section's
+ * lines. Walks down from <body> a level at a time, symbolicating each level in one request and
+ * stopping at the first element that matches, so a section's descendants are never read.
  */
 export declare function findSectionElements({ root, pageFilePath, sections, resolve, }: {
     root: Element;
     pageFilePath: string;
     sections: readonly Pick<SectionCanvasSection, "index" | "startLine" | "endLine">[];
-    resolve?: Resolve;
+    resolve?: typeof symbolicateSourceLocations;
 }): Promise<Map<number, HTMLElement[]>>;
-export {};

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

@@ -47,10 +47,9 @@ async function findSectionElements({
       }
     }
     if (pending.size > 0) {
-      const keys = [...pending.keys()];
       const results = await resolve([...pending.values()]);
-      keys.forEach((key, index) => {
-        resolved.set(key, results[index] ?? pending.get(key));
+      [...pending].forEach(([key, location], index) => {
+        resolved.set(key, results[index] ?? location);
       });
     }
     const next = [];
@@ -58,15 +57,9 @@ async function findSectionElements({
       let section;
       for (const location of chain) {
         const original = resolved.get(locationKey(location));
-        if (!original || !isSectionCanvasPageFile({
-          filePath: original.filePath,
-          pageFilePath
-        })) {
-          continue;
-        }
-        section = sections.find((candidate) => {
+        section = original && isSectionCanvasPageFile({ filePath: original.filePath, pageFilePath }) ? sections.find((candidate) => {
           return candidate.startLine <= original.lineNumber && original.lineNumber <= candidate.endLine;
-        });
+        }) : void 0;
         if (section) {
           break;
         }