@replohq/sandbox-runtime 1.16.1 → 1.17.0

package/select-mode/EditorSelection.js

@@ -8,6 +8,8 @@ import { useSelectionHover } from "./hooks/useSelectionHover";
 import { useSelectionInteractions } from "./hooks/useSelectionInteractions";
 import { useSelectionScrollSync } from "./hooks/useSelectionScrollSync";
 import { PREVIEW_RENDERED_EVENT } from "./previewRendered";
+import { SectionCanvas } from "./section-canvas/SectionCanvas";
+import { sectionCanvasStore } from "./section-canvas/sectionCanvasStore";
 import { SelectionFrames } from "./SelectionFrames";
 import {
   useDisplayMode,
@@ -90,6 +92,7 @@ function EditorSelection() {
       onComplete: () => {
         reapplyOverrides({ skipElement: store.getState().editingElement });
         watchRender();
+        sectionCanvasStore.getState().actions.handlePreviewRefresh();
       }
     });
     window.addEventListener(PREVIEW_RENDERED_EVENT, watchRender);
@@ -151,7 +154,8 @@ function EditorSelection() {
             [data-select-mode-inline-editor][contenteditable="true"],
             [data-select-mode-inline-editor][contenteditable="true"] * { cursor: text !important; }
           ` }),
-    /* @__PURE__ */ jsx(SelectionFrames, {})
+    /* @__PURE__ */ jsx(SelectionFrames, {}),
+    /* @__PURE__ */ jsx(SectionCanvas, {})
   ] });
 }
 export {

package/select-mode/fast-refresh-relay.js

@@ -1,5 +1,8 @@
 import { getWebsiteBuilderRpc } from "./iframeRpcChannel";
+import { SECTION_CANVAS_ATTRIBUTE } from "./section-canvas/sectionCanvasControls";
 import { invalidateSymbolicationCache } from "./symbolicate";
+const SERVER_REFRESH_HEADER = "next-hmr-refresh";
+const SERVER_REFRESH_COMMIT_TIMEOUT_MS = 2e3;
 let hasInstalledFastRefreshRelay = false;
 let onFastRefreshComplete = null;
 let lastLatencyMs = null;
@@ -11,6 +14,7 @@ function installFastRefreshRelay({
     return;
   }
   hasInstalledFastRefreshRelay = true;
+  installServerRefreshRelay();
   const originalCallback = window.__NEXT_HMR_LATENCY_CB;
   window.__NEXT_HMR_LATENCY_CB = (latencyMs) => {
     const isRepeat = latencyMs === lastLatencyMs;
@@ -19,12 +23,87 @@ function installFastRefreshRelay({
       originalCallback?.(latencyMs);
       return;
     }
-    invalidateSymbolicationCache();
-    getWebsiteBuilderRpc()?.fastRefreshComplete(void 0);
-    onFastRefreshComplete?.();
+    reportRefreshComplete();
     originalCallback?.(latencyMs);
   };
 }
+function reportRefreshComplete() {
+  invalidateSymbolicationCache();
+  getWebsiteBuilderRpc()?.fastRefreshComplete(void 0);
+  onFastRefreshComplete?.();
+}
+function isServerRefreshRequest(input, init) {
+  try {
+    return new Headers(init?.headers).has(SERVER_REFRESH_HEADER) || input instanceof Request && input.headers.has(SERVER_REFRESH_HEADER);
+  } catch {
+    return false;
+  }
+}
+function nextReactCommit() {
+  const hook = Reflect.get(
+    window,
+    "__REACT_DEVTOOLS_GLOBAL_HOOK__"
+  );
+  if (!hook || typeof hook.onCommitFiberRoot !== "function") {
+    return null;
+  }
+  return new Promise((resolve) => {
+    const original = hook.onCommitFiberRoot;
+    hook.onCommitFiberRoot = function relayCommit(...args) {
+      hook.onCommitFiberRoot = original;
+      resolve();
+      return original?.apply(this, args);
+    };
+  });
+}
+function nextPageMutation() {
+  let observer = null;
+  const promise = new Promise((resolve) => {
+    observer = new MutationObserver((records) => {
+      const isPageChange = records.some((record) => {
+        const element = record.target instanceof Element ? record.target : record.target.parentElement;
+        return element !== null && document.body.contains(element) && !element.closest(`[${SECTION_CANVAS_ATTRIBUTE}]`);
+      });
+      if (isPageChange) {
+        observer?.disconnect();
+        resolve();
+      }
+    });
+    observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+  });
+  return { promise, cancel: () => observer?.disconnect() };
+}
+function installServerRefreshRelay() {
+  const originalFetch = window.fetch;
+  window.fetch = function relayServerRefresh(input, init) {
+    const response = originalFetch.call(this, input, init);
+    if (isServerRefreshRequest(input, init)) {
+      void response.then((received) => received.clone().arrayBuffer()).then(
+        async () => {
+          const commit = nextReactCommit();
+          const mutation = commit ? null : nextPageMutation();
+          let timeout;
+          await Promise.race([
+            commit ?? mutation?.promise,
+            new Promise((resolve) => {
+              timeout = setTimeout(resolve, SERVER_REFRESH_COMMIT_TIMEOUT_MS);
+            })
+          ]);
+          mutation?.cancel();
+          clearTimeout(timeout);
+          reportRefreshComplete();
+        },
+        () => {
+        }
+      );
+    }
+    return response;
+  };
+}
 export {
   installFastRefreshRelay
 };

package/select-mode/fiber.d.ts

@@ -48,4 +48,10 @@ export declare function getFiberChain(element: HTMLElement): {
     componentName: string | undefined;
     props: Record<string, unknown> | undefined;
 }[];
+/**
+ * JSX call sites from an element outward (its own, then each owner's), still compiled. Skips
+ * `resolveCurrentFiber`'s tree scan: a call site is the same in both fiber generations, and this
+ * runs for every element near the top of the page.
+ */
+export declare function getElementSourceChain(element: HTMLElement, maxEntries?: number): DebugSource[];
 export {};

package/select-mode/fiber.js

@@ -493,9 +493,42 @@ function getFiberChain(element) {
   }
   return fiberChain;
 }
+function getElementSourceChain(element, maxEntries = 16) {
+  const chain = [];
+  const seen = /* @__PURE__ */ new Set();
+  const seenOwners = /* @__PURE__ */ new Set();
+  const push = (source) => {
+    if (!source) {
+      return;
+    }
+    const key = `${source.fileName}:${source.lineNumber}:${source.columnNumber ?? ""}`;
+    if (!seen.has(key)) {
+      seen.add(key);
+      chain.push(source);
+    }
+  };
+  let fiber = getFiberFromElement(element);
+  let depth = 0;
+  while (fiber && depth < MAX_FIBER_CHAIN_DEPTH && chain.length < maxEntries) {
+    push(parseDebugStackSource(fiber._debugStack));
+    let owner = fiber._debugOwner;
+    while (owner && !seenOwners.has(owner) && chain.length < maxEntries) {
+      seenOwners.add(owner);
+      if (!("name" in owner)) {
+        break;
+      }
+      push(parseDebugStackSource(owner.debugStack));
+      owner = owner.owner;
+    }
+    fiber = fiber.return;
+    depth += 1;
+  }
+  return chain;
+}
 export {
   findDebugSource,
   getComponentName,
+  getElementSourceChain,
   getFiberChain,
   getFiberFromElement,
   getRepetitionHostNodes,

package/select-mode/hooks/useParentMessaging.js

@@ -1,6 +1,9 @@
 import { useEffect, useMemo } from "react";
 import { useIframeRpcChannel } from "../../_vendor/replo-utils/react/use-iframe-rpc-channel.mjs";
-import { iframeRuntimeBuildMetadataSchema } from "../../_vendor/schemas/selectModeIframeRpc.mjs";
+import {
+  iframeRuntimeBuildMetadataSchema,
+  SECTION_CANVAS_CAPABILITY
+} from "../../_vendor/schemas/selectModeIframeRpc.mjs";
 import * as z from "zod";
 import { BUILD_METADATA } from "../../buildMetadata";
 import {
@@ -9,6 +12,7 @@ import {
   setSelectModeParentHandlers
 } from "../iframeRpcChannel";
 const SDK_BUILD_METADATA_SPECIFIER = "@replohq/sdk/lib/buildMetadata";
+const RUNTIME_CAPABILITIES = [SECTION_CANVAS_CAPABILITY];
 const sdkBuildMetadataModuleSchema = z.object({
   BUILD_METADATA: iframeRuntimeBuildMetadataSchema
 });
@@ -18,7 +22,10 @@ async function announceSdkBuildMetadata() {
       await import(SDK_BUILD_METADATA_SPECIFIER)
     );
     if (sdkBuildMetadata.success) {
-      getWebsiteBuilderRpc()?.iframeReady(sdkBuildMetadata.data.BUILD_METADATA);
+      getWebsiteBuilderRpc()?.iframeReady({
+        ...sdkBuildMetadata.data.BUILD_METADATA,
+        capabilities: RUNTIME_CAPABILITIES
+      });
     }
   } catch {
   }
@@ -78,7 +85,7 @@ function useParentMessaging({
       }
     });
     const rpc = getWebsiteBuilderRpc();
-    rpc?.iframeReady(BUILD_METADATA);
+    rpc?.iframeReady({ ...BUILD_METADATA, capabilities: RUNTIME_CAPABILITIES });
     void announceSdkBuildMetadata();
     return () => {
       setSelectModeParentHandlers(null);

package/select-mode/hooks/useSelectionHover.js

@@ -6,6 +6,7 @@ import {
   findContainingSection
 } from "../interactions/sectionGeometry";
 import { getElementBoundingRect } from "../interactions/selectionGeometry";
+import { isSectionCanvasControl } from "../section-canvas/sectionCanvasControls";
 import { useDisplayMode, useSelectModeStore } from "../selectModeStore";
 function useSelectionHover() {
   const store = useSelectModeStore();
@@ -54,7 +55,7 @@ function useSelectionHover() {
         hoveredElement = hoveredElementStack[hoveredElementStack.length - 1] ?? null;
       }
       postHoveredElement(
-        hoveredElement ? getNearestSelectableElement(hoveredElement) : null
+        hoveredElement && !isSectionCanvasControl(hoveredElement) ? getNearestSelectableElement(hoveredElement) : null
       );
     };
     const scheduleHoverSync = () => {

package/select-mode/hooks/useSelectionInteractions.js

@@ -20,6 +20,7 @@ import {
   unionElementPageRects
 } from "../interactions/selectionGeometry";
 import { isTextEditableElement } from "../isTextEditableElement";
+import { isSectionCanvasControl } from "../section-canvas/sectionCanvasControls";
 import { isSelectionStillCurrent } from "../selectionPublish";
 import {
   getConnectedSelectedElement,
@@ -172,6 +173,9 @@ function useSelectionInteractions() {
       );
     };
     const handlePointerDown = (event) => {
+      if (isSectionCanvasControl(event.target)) {
+        return;
+      }
       if (event.button !== 0) {
         return;
       }
@@ -362,6 +366,9 @@ function useSelectionInteractions() {
       });
     };
     const handlePointerUp = (event) => {
+      if (isSectionCanvasControl(event.target)) {
+        return;
+      }
       if (event.button !== 0) {
         return;
       }
@@ -419,6 +426,9 @@ function useSelectionInteractions() {
       });
     };
     const handleClick = (event) => {
+      if (isSectionCanvasControl(event.target)) {
+        return;
+      }
       if (editingElementRef?.current && event.target instanceof Node && editingElementRef.current.contains(event.target)) {
         return;
       }

package/select-mode/iframeRpcChannel.d.ts

@@ -2,11 +2,54 @@ import type { SelectedElement } from "../_vendor/schemas/generated/selectMode";
 import type { IframeRpcChannelInputHandlers, IframeRpcChannelRemote } from "../_vendor/schemas/iframeRpcChannel";
 import { previewIframeToWebsiteBuilderMethodConfig, websiteBuilderToPreviewIframeMethodConfig } from "../_vendor/schemas/selectModeIframeRpc";
 export type WebsiteBuilderRpcRemote = IframeRpcChannelRemote<typeof previewIframeToWebsiteBuilderMethodConfig>;
-type SelectModeParentMessagingHandlers = Omit<IframeRpcChannelInputHandlers<typeof websiteBuilderToPreviewIframeMethodConfig>, "symbolicateSelectedElement" | "navigateToRoute">;
+type SelectModeParentMessagingHandlers = Omit<IframeRpcChannelInputHandlers<typeof websiteBuilderToPreviewIframeMethodConfig>, "symbolicateSelectedElement" | "navigateToRoute" | "setSectionCanvas" | "settleSectionMove">;
 export declare function setNavigateToRouteHandler(handler: ((input: {
     pathname: string;
 }) => void) | null): void;
 export declare function getSelectModeIframeRpcChannel(): import("../_vendor/schemas/iframeRpcChannel").IframeRpcChannel<{
+    sectionCanvasRequest: {
+        inputSchema: import("zod").ZodObject<{
+            request: import("zod").ZodDiscriminatedUnion<[import("zod").ZodObject<{
+                type: import("zod").ZodLiteral<"insert">;
+                at: import("zod").ZodNumber;
+            }, import("zod/v4/core").$strip>, import("zod").ZodObject<{
+                type: import("zod").ZodLiteral<"move">;
+                moveId: import("zod").ZodString;
+                index: import("zod").ZodNumber;
+                to: import("zod").ZodNumber;
+            }, import("zod/v4/core").$strip>, import("zod").ZodObject<{
+                type: import("zod").ZodLiteral<"remove">;
+                index: import("zod").ZodNumber;
+            }, import("zod/v4/core").$strip>, import("zod").ZodObject<{
+                type: import("zod").ZodLiteral<"undo">;
+            }, import("zod/v4/core").$strip>, import("zod").ZodObject<{
+                type: import("zod").ZodLiteral<"redo">;
+            }, import("zod/v4/core").$strip>, import("zod").ZodObject<{
+                type: import("zod").ZodLiteral<"cancelInsert">;
+            }, import("zod/v4/core").$strip>], "type">;
+        }, import("zod/v4/core").$strip>;
+        outputSchema: import("zod").ZodVoid;
+    };
+    sectionCanvasLayoutChanged: {
+        inputSchema: import("zod").ZodObject<{
+            sections: import("zod").ZodArray<import("zod").ZodObject<{
+                index: import("zod").ZodNumber;
+                startLine: import("zod").ZodNumber;
+                endLine: import("zod").ZodNumber;
+                rect: import("zod").ZodObject<{
+                    x: import("zod").ZodNumber;
+                    y: import("zod").ZodNumber;
+                    left: import("zod").ZodNumber;
+                    top: import("zod").ZodNumber;
+                    right: import("zod").ZodNumber;
+                    bottom: import("zod").ZodNumber;
+                    width: import("zod").ZodNumber;
+                    height: import("zod").ZodNumber;
+                }, import("zod/v4/core").$strip>;
+            }, import("zod/v4/core").$strip>>;
+        }, import("zod/v4/core").$strip>;
+        outputSchema: import("zod").ZodVoid;
+    };
     requestInlineTextEdit: {
         inputSchema: import("zod").ZodObject<{
             editId: import("zod").ZodString;
@@ -105,6 +148,7 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
             branch: import("zod").ZodNullable<import("zod").ZodString>;
             commit: import("zod").ZodNullable<import("zod").ZodString>;
             builtAt: import("zod").ZodNullable<import("zod").ZodString>;
+            capabilities: import("zod").ZodOptional<import("zod").ZodArray<import("zod").ZodString>>;
         }, import("zod/v4/core").$strip>;
         outputSchema: import("zod").ZodVoid;
     };
@@ -446,12 +490,6 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
         inputSchema: import("zod").ZodUndefined;
         outputSchema: import("zod").ZodVoid;
     };
-    navigationAccepted: {
-        inputSchema: import("zod").ZodObject<{
-            navigationId: import("zod").ZodNumber;
-        }, import("zod/v4/core").$strip>;
-        outputSchema: import("zod").ZodVoid;
-    };
 }> | null;
 export declare function setSelectModeParentHandlers(nextHandlers: SelectModeParentMessagingHandlers | null): void;
 export declare function getWebsiteBuilderRpc(): WebsiteBuilderRpcRemote | null;

package/select-mode/iframeRpcChannel.js

@@ -8,6 +8,7 @@ import {
   SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION,
   websiteBuilderToPreviewIframeMethodConfig
 } from "../_vendor/schemas/selectModeIframeRpc.mjs";
+import { sectionCanvasStore } from "./section-canvas/sectionCanvasStore";
 import { symbolicateSelectedElement } from "./symbolicate";
 let messagingHandlers = null;
 let navigateToRouteHandler = null;
@@ -54,17 +55,17 @@ function createSelectModeIframeRpcChannel() {
       formatCommand: (input) => {
         messagingHandlers?.formatCommand(input);
       },
+      setSectionCanvas: ({ canvas }) => {
+        sectionCanvasStore.getState().actions.setCanvas(canvas);
+      },
+      settleSectionMove: (input) => {
+        sectionCanvasStore.getState().actions.settleMove(input);
+      },
       symbolicateSelectedElement: (element) => {
         return symbolicateSelectedElement(element);
       },
-      navigateToRoute: ({ pathname, navigationId }, { channel: channel2 }) => {
-        if (!navigateToRouteHandler) {
-          return;
-        }
-        navigateToRouteHandler({ pathname });
-        if (navigationId !== void 0) {
-          channel2.navigationAccepted({ navigationId });
-        }
+      navigateToRoute: (input) => {
+        navigateToRouteHandler?.(input);
       }
     }
   });

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

@@ -0,0 +1,7 @@
+/**
+ * Section controls drawn on the preview, after Squarespace's editor: the hovered or selected section
+ * gets a bold outline with an "Add Section" pill on each edge, a grip that drags it to a new place
+ * (with a picture of it and a drop line), and a trash button. Every edit is a request to the
+ * Website Builder, which owns the source.
+ */
+export declare function SectionCanvas(): import("react").ReactPortal | null;