@replohq/sandbox-runtime 1.16.2 → 1.17.0

package/_vendor/replo-utils/lib/historyKeys.d.ts

@@ -0,0 +1,2 @@
+/** Which undo history step a key press asks for: Cmd/Ctrl+Z, Cmd/Ctrl+Shift+Z or Cmd/Ctrl+Y, never while typing in a field. */
+export declare function historyStepForKey(event: Pick<KeyboardEvent, "key" | "metaKey" | "ctrlKey" | "altKey" | "shiftKey" | "target">): "undo" | "redo" | null;

package/_vendor/replo-utils/lib/historyKeys.mjs

@@ -0,0 +1,18 @@
+function isTyping(target) {
+  return target instanceof HTMLElement && (target.isContentEditable || target.closest("[contenteditable]:not([contenteditable='false'])") !== null || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName));
+}
+function historyStepForKey(event) {
+  if (!(event.metaKey || event.ctrlKey) || event.altKey) {
+    return null;
+  }
+  if (isTyping(event.target)) {
+    return null;
+  }
+  const key = event.key.toLowerCase();
+  if (key === "y" || key === "z" && event.shiftKey) {
+    return "redo";
+  }
+  return key === "z" ? "undo" : null;
+}
+
+export { historyStepForKey };

package/_vendor/schemas/generated/selectModeIframeRpc.d.ts

@@ -9,6 +9,49 @@ export type IframeRuntimeBuildMetadata = {
     branch: string | null;
     commit: string | null;
     builtAt: string | null;
+    capabilities?: string[];
+};
+export type SectionCanvasSection = {
+    index: number;
+    startLine: number;
+    endLine: number;
+    label: string;
+    isLocked: boolean;
+};
+export type SectionCanvasState = {
+    pageFilePath: string;
+    sections: SectionCanvasSection[];
+    previewScale: number;
+    isDisabled: boolean;
+    insertingAt?: number | null;
+    occludedInsets?: {
+        left: number;
+        right: number;
+    } | null;
+};
+export type SectionCanvasRequest = {
+    type: "insert";
+    at: number;
+} | {
+    type: "move";
+    moveId: string;
+    index: number;
+    to: number;
+} | {
+    type: "remove";
+    index: number;
+} | {
+    type: "undo";
+} | {
+    type: "redo";
+} | {
+    type: "cancelInsert";
+};
+export type SectionCanvasLayoutEntry = {
+    index: number;
+    startLine: number;
+    endLine: number;
+    rect: SelectModeBoundingRect;
 };
 export type SelectModeParentMessage = {
     method: "expandToSection";

package/_vendor/schemas/selectModeIframeRpc.d.ts

@@ -25,6 +25,75 @@ export declare const iframeRuntimeBuildMetadataSchema: z.ZodObject<{
     branch: z.ZodNullable<z.ZodString>;
     commit: z.ZodNullable<z.ZodString>;
     builtAt: z.ZodNullable<z.ZodString>;
+    capabilities: z.ZodOptional<z.ZodArray<z.ZodString>>;
+}, z.core.$strip>;
+/** Runtimes listing this draw section insert and drag controls on the canvas and accept `setSectionCanvas`. */
+export declare const SECTION_CANVAS_CAPABILITY = "sectionCanvas";
+export declare const sectionCanvasSectionSchema: z.ZodObject<{
+    index: z.ZodNumber;
+    startLine: z.ZodNumber;
+    endLine: z.ZodNumber;
+    label: z.ZodString;
+    isLocked: z.ZodBoolean;
+}, z.core.$strip>;
+/**
+ * Whether a source location's file is the canvas's page file. Locations arrive as `file://` URLs,
+ * `./`-relative or absolute paths, and the page file is workspace-relative, so either may be a path
+ * suffix of the other. The builder's selection sync and the runtime's section finding both use this.
+ */
+export declare function isSectionCanvasPageFile({ filePath, pageFilePath, }: {
+    filePath: string;
+    pageFilePath: string;
+}): boolean;
+export declare const sectionCanvasStateSchema: z.ZodObject<{
+    pageFilePath: z.ZodString;
+    sections: z.ZodArray<z.ZodObject<{
+        index: z.ZodNumber;
+        startLine: z.ZodNumber;
+        endLine: z.ZodNumber;
+        label: z.ZodString;
+        isLocked: z.ZodBoolean;
+    }, z.core.$strip>>;
+    previewScale: z.ZodNumber;
+    isDisabled: z.ZodBoolean;
+    insertingAt: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+    occludedInsets: z.ZodOptional<z.ZodNullable<z.ZodObject<{
+        left: z.ZodNumber;
+        right: z.ZodNumber;
+    }, z.core.$strip>>>;
+}, z.core.$strip>;
+export declare const sectionCanvasRequestSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    type: z.ZodLiteral<"insert">;
+    at: z.ZodNumber;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"move">;
+    moveId: z.ZodString;
+    index: z.ZodNumber;
+    to: z.ZodNumber;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"remove">;
+    index: z.ZodNumber;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"undo">;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"redo">;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"cancelInsert">;
+}, z.core.$strip>], "type">;
+export declare const sectionCanvasLayoutEntrySchema: z.ZodObject<{
+    index: z.ZodNumber;
+    startLine: z.ZodNumber;
+    endLine: z.ZodNumber;
+    rect: z.ZodObject<{
+        x: z.ZodNumber;
+        y: z.ZodNumber;
+        left: z.ZodNumber;
+        top: z.ZodNumber;
+        right: z.ZodNumber;
+        bottom: z.ZodNumber;
+        width: z.ZodNumber;
+        height: z.ZodNumber;
+    }, z.core.$strip>;
 }, z.core.$strip>;
 export declare const selectModeEventInputSchemas: {
     hover: z.ZodObject<{
@@ -185,6 +254,38 @@ export declare const selectModeEventInputSchemas: {
     }, z.core.$strip>;
 };
 export declare const websiteBuilderToPreviewIframeMethodConfig: {
+    setSectionCanvas: {
+        inputSchema: z.ZodObject<{
+            canvas: z.ZodNullable<z.ZodObject<{
+                pageFilePath: z.ZodString;
+                sections: z.ZodArray<z.ZodObject<{
+                    index: z.ZodNumber;
+                    startLine: z.ZodNumber;
+                    endLine: z.ZodNumber;
+                    label: z.ZodString;
+                    isLocked: z.ZodBoolean;
+                }, z.core.$strip>>;
+                previewScale: z.ZodNumber;
+                isDisabled: z.ZodBoolean;
+                insertingAt: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+                occludedInsets: z.ZodOptional<z.ZodNullable<z.ZodObject<{
+                    left: z.ZodNumber;
+                    right: z.ZodNumber;
+                }, z.core.$strip>>>;
+            }, z.core.$strip>>;
+        }, z.core.$strip>;
+        outputSchema: z.ZodVoid;
+    };
+    settleSectionMove: {
+        inputSchema: z.ZodObject<{
+            moveId: z.ZodString;
+            outcome: z.ZodEnum<{
+                failed: "failed";
+                persisted: "persisted";
+            }>;
+        }, z.core.$strip>;
+        outputSchema: z.ZodVoid;
+    };
     expandToSection: {
         inputSchema: z.ZodObject<{
             targetSelector: z.ZodString;
@@ -478,6 +579,49 @@ export declare const websiteBuilderToPreviewIframeMethodConfig: {
     };
 };
 export declare const previewIframeToWebsiteBuilderMethodConfig: {
+    sectionCanvasRequest: {
+        inputSchema: z.ZodObject<{
+            request: z.ZodDiscriminatedUnion<[z.ZodObject<{
+                type: z.ZodLiteral<"insert">;
+                at: z.ZodNumber;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"move">;
+                moveId: z.ZodString;
+                index: z.ZodNumber;
+                to: z.ZodNumber;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"remove">;
+                index: z.ZodNumber;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"undo">;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"redo">;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"cancelInsert">;
+            }, z.core.$strip>], "type">;
+        }, z.core.$strip>;
+        outputSchema: z.ZodVoid;
+    };
+    sectionCanvasLayoutChanged: {
+        inputSchema: z.ZodObject<{
+            sections: z.ZodArray<z.ZodObject<{
+                index: z.ZodNumber;
+                startLine: z.ZodNumber;
+                endLine: z.ZodNumber;
+                rect: z.ZodObject<{
+                    x: z.ZodNumber;
+                    y: z.ZodNumber;
+                    left: z.ZodNumber;
+                    top: z.ZodNumber;
+                    right: z.ZodNumber;
+                    bottom: z.ZodNumber;
+                    width: z.ZodNumber;
+                    height: z.ZodNumber;
+                }, z.core.$strip>;
+            }, z.core.$strip>>;
+        }, z.core.$strip>;
+        outputSchema: z.ZodVoid;
+    };
     requestInlineTextEdit: {
         inputSchema: z.ZodObject<{
             editId: z.ZodString;
@@ -576,6 +720,7 @@ export declare const previewIframeToWebsiteBuilderMethodConfig: {
             branch: z.ZodNullable<z.ZodString>;
             commit: z.ZodNullable<z.ZodString>;
             builtAt: z.ZodNullable<z.ZodString>;
+            capabilities: z.ZodOptional<z.ZodArray<z.ZodString>>;
         }, z.core.$strip>;
         outputSchema: z.ZodVoid;
     };
@@ -1032,6 +1177,7 @@ export declare const selectModeIframeMessageSchema: z.ZodDiscriminatedUnion<[z.Z
         branch: z.ZodNullable<z.ZodString>;
         commit: z.ZodNullable<z.ZodString>;
         builtAt: z.ZodNullable<z.ZodString>;
+        capabilities: z.ZodOptional<z.ZodArray<z.ZodString>>;
     }, z.core.$strip>;
 }, z.core.$strip>, z.ZodObject<{
     method: z.ZodLiteral<"elementSelected">;

package/_vendor/schemas/selectModeIframeRpc.mjs

@@ -16,8 +16,57 @@ var iframeRuntimeBuildMetadataSchema = z.object({
   version: z.string(),
   branch: z.string().nullable(),
   commit: z.string().nullable(),
-  builtAt: z.string().nullable()
+  builtAt: z.string().nullable(),
+  capabilities: z.array(z.string()).optional()
 }).describe("IframeRuntimeBuildMetadata");
+var SECTION_CANVAS_CAPABILITY = "sectionCanvas";
+var sectionCanvasSectionSchema = z.object({
+  index: z.number().int().nonnegative(),
+  startLine: z.number().int().positive(),
+  endLine: z.number().int().positive(),
+  label: z.string(),
+  isLocked: z.boolean()
+}).describe("SectionCanvasSection");
+function isSectionCanvasPageFile({
+  filePath,
+  pageFilePath
+}) {
+  const normalized = filePath.replace(/^file:\/\//u, "").replace(/^\.\//u, "");
+  return normalized === pageFilePath || normalized.endsWith(`/${pageFilePath}`) || pageFilePath.endsWith(`/${normalized}`);
+}
+var sectionCanvasStateSchema = z.object({
+  pageFilePath: z.string(),
+  sections: z.array(sectionCanvasSectionSchema),
+  previewScale: z.number().positive(),
+  isDisabled: z.boolean(),
+  insertingAt: z.number().int().nonnegative().nullish(),
+  occludedInsets: z.object({
+    left: z.number().nonnegative(),
+    right: z.number().nonnegative()
+  }).nullish()
+}).describe("SectionCanvasState");
+var sectionCanvasRequestSchema = z.discriminatedUnion("type", [
+  z.object({ type: z.literal("insert"), at: z.number().int().nonnegative() }),
+  z.object({
+    type: z.literal("move"),
+    moveId: z.string(),
+    index: z.number().int().nonnegative(),
+    to: z.number().int().nonnegative()
+  }),
+  z.object({
+    type: z.literal("remove"),
+    index: z.number().int().nonnegative()
+  }),
+  z.object({ type: z.literal("undo") }),
+  z.object({ type: z.literal("redo") }),
+  z.object({ type: z.literal("cancelInsert") })
+]).describe("SectionCanvasRequest");
+var sectionCanvasLayoutEntrySchema = z.object({
+  index: z.number().int().nonnegative(),
+  startLine: z.number().int().positive(),
+  endLine: z.number().int().positive(),
+  rect: selectModeBoundingRectSchema
+}).describe("SectionCanvasLayoutEntry");
 var selectModeEventInputSchemas = {
   hover: z.object({
     rect: selectModeHoverRectSchema.nullable()
@@ -37,6 +86,17 @@ var selectModeEventInputSchemas = {
   })
 };
 var websiteBuilderToPreviewIframeMethodConfig = {
+  setSectionCanvas: {
+    inputSchema: z.object({ canvas: sectionCanvasStateSchema.nullable() }),
+    outputSchema: z.void()
+  },
+  settleSectionMove: {
+    inputSchema: z.object({
+      moveId: z.string(),
+      outcome: z.enum(["persisted", "failed"])
+    }),
+    outputSchema: z.void()
+  },
   expandToSection: {
     inputSchema: z.object({ targetSelector: z.string() }),
     outputSchema: z.void()
@@ -110,6 +170,16 @@ var websiteBuilderToPreviewIframeMethodConfig = {
   }
 };
 var previewIframeToWebsiteBuilderMethodConfig = {
+  sectionCanvasRequest: {
+    inputSchema: z.object({ request: sectionCanvasRequestSchema }),
+    outputSchema: z.void()
+  },
+  sectionCanvasLayoutChanged: {
+    inputSchema: z.object({
+      sections: z.array(sectionCanvasLayoutEntrySchema)
+    }),
+    outputSchema: z.void()
+  },
   requestInlineTextEdit: {
     inputSchema: z.object({
       editId: z.string(),
@@ -265,4 +335,4 @@ var selectModeIframeMessageSchema = z.discriminatedUnion("method", [
   })
 ]).describe("SelectModeIframeMessage");
 
-export { SELECT_MODE_IFRAME_RPC_CHANNEL_ID, SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION, iframeRuntimeBuildMetadataSchema, inlineEditFeedbackSchema, previewIframeToWebsiteBuilderMethodConfig, selectModeEventInputSchemas, selectModeIframeMessageSchema, selectModeParentMessageSchema, websiteBuilderToPreviewIframeMethodConfig };
+export { SECTION_CANVAS_CAPABILITY, SELECT_MODE_IFRAME_RPC_CHANNEL_ID, SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION, iframeRuntimeBuildMetadataSchema, inlineEditFeedbackSchema, isSectionCanvasPageFile, previewIframeToWebsiteBuilderMethodConfig, sectionCanvasLayoutEntrySchema, sectionCanvasRequestSchema, sectionCanvasSectionSchema, sectionCanvasStateSchema, selectModeEventInputSchemas, selectModeIframeMessageSchema, selectModeParentMessageSchema, websiteBuilderToPreviewIframeMethodConfig };

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.16.2",
+  "version": "1.17.0",
   "branch": "HEAD",
-  "commit": "9158b1e6452ebc5e1945da883b1c8406c7b17f08",
-  "builtAt": "2026-10-19T23:23:08.010Z"
+  "commit": "7d16c9a29182a37625a958569422b94a08b9a627",
+  "builtAt": "2026-10-20T04:21:24.844Z"
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.16.2",
+  "version": "1.17.0",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.16.2",
+    "version": "1.17.0",
     "branch": "HEAD",
-    "commit": "9158b1e6452ebc5e1945da883b1c8406c7b17f08",
-    "builtAt": "2026-10-19T23:23:08.010Z"
+    "commit": "7d16c9a29182a37625a958569422b94a08b9a627",
+    "builtAt": "2026-10-20T04:21:24.844Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",

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;
       }