@replohq/sandbox-runtime 1.16.2 → 1.18.0

package/previewHealth.js

@@ -0,0 +1,431 @@
+import retry from "async-retry";
+import {
+  createIframeRpcChannel,
+  createIframeRpcRemote
+} from "./_vendor/schemas/iframeRpcChannel.mjs";
+import {
+  editorToPreviewHealthMethodConfig,
+  PREVIEW_HEALTH_IFRAME_RPC_CHANNEL_ID,
+  PREVIEW_HEALTH_IFRAME_RPC_CHANNEL_VERSION,
+  previewHealthToEditorMethodConfig
+} from "./_vendor/schemas/previewHealthIframeRpc.mjs";
+import { v4 as uuidv4 } from "uuid";
+import * as z from "zod";
+import { createStore } from "zustand/vanilla";
+import { installNextErrorFeed } from "./nextErrorFeed";
+const RECOVERY_SETTLE_MS = 300;
+const MAX_DIAGNOSTICS_PER_DOCUMENT = 30;
+const MAX_TEXT_LENGTH = 4e3;
+const HMR_PATHS = ["/_next/hmr", "/_next/webpack-hmr"];
+const HMR_RECONNECT_MIN_MS = 1e3;
+const HMR_RECONNECT_MAX_MS = 1e4;
+function truncate(value) {
+  return value.length > MAX_TEXT_LENGTH ? `${value.slice(0, MAX_TEXT_LENGTH)}\u2026` : value;
+}
+function stripAnsi(value) {
+  return value.replace(/\u001b\[[0-9;]*m/g, "");
+}
+const thrownErrorSchema = z.object({
+  message: z.string(),
+  name: z.string().nullable().catch(null),
+  stack: z.string().nullable().catch(null),
+  digest: z.string().nullable().catch(null)
+});
+const hmrBuildStatusSchema = z.object({
+  type: z.enum(["built", "sync"]),
+  errors: z.array(
+    z.union([
+      z.string(),
+      z.object({ message: z.string() }).transform(({ message }) => {
+        return message;
+      })
+    ])
+  )
+});
+class HmrSocketClosedError extends Error {
+}
+function toPreviewErrorDetail(value, componentStack) {
+  const thrown = thrownErrorSchema.safeParse(value);
+  const { message, name, stack, digest } = thrown.success ? thrown.data : { message: String(value), name: null, stack: null, digest: null };
+  return {
+    message: truncate(message),
+    name,
+    stack: stack === null ? null : truncate(stack),
+    componentStack: componentStack === null ? null : truncate(componentStack),
+    digest
+  };
+}
+function toMessageOnlyErrorDetail(message) {
+  return {
+    message,
+    name: null,
+    stack: null,
+    componentStack: null,
+    digest: null
+  };
+}
+function createEditorRemote() {
+  return createIframeRpcRemote(
+    createIframeRpcChannel({
+      subscriberWindow: window,
+      channelIdentifier: PREVIEW_HEALTH_IFRAME_RPC_CHANNEL_ID,
+      version: PREVIEW_HEALTH_IFRAME_RPC_CHANNEL_VERSION,
+      getTargetWindow: () => window.parent,
+      targetOrigin: "*",
+      isExpectedMessage: (event) => event.source === window.parent,
+      outgoingMethods: previewHealthToEditorMethodConfig,
+      incomingMethods: editorToPreviewHealthMethodConfig,
+      handlers: {}
+    })
+  );
+}
+function getHealthKey(health) {
+  return health.status === "ok" ? "ok" : `error:${health.source}:${health.error.message}`;
+}
+function createPreviewHealthStore() {
+  return createStore((set) => {
+    return {
+      boundaries: /* @__PURE__ */ new Map(),
+      rootFailure: null,
+      buildErrors: [],
+      actions: {
+        boundaryRendered: (boundaryId) => {
+          set((state) => {
+            return {
+              boundaries: new Map(state.boundaries).set(boundaryId, {
+                status: "rendered"
+              }),
+              rootFailure: null
+            };
+          });
+        },
+        boundaryCaughtError: (boundaryId, caught) => {
+          set((state) => {
+            return {
+              boundaries: new Map(state.boundaries).set(boundaryId, {
+                status: "failed",
+                failedAt: Date.now(),
+                ...caught
+              })
+            };
+          });
+        },
+        boundaryUnmounted: (boundaryId) => {
+          set((state) => {
+            if (!state.boundaries.has(boundaryId)) {
+              return state;
+            }
+            const boundaries = new Map(state.boundaries);
+            boundaries.delete(boundaryId);
+            return { boundaries };
+          });
+        },
+        rootCaughtError: (error) => {
+          set({ rootFailure: { error } });
+        },
+        buildErrorsChanged: (buildErrors) => {
+          set({ buildErrors });
+        }
+      }
+    };
+  });
+}
+function selectPreviewHealth(state) {
+  const firstBuildError = state.buildErrors[0];
+  if (firstBuildError !== void 0) {
+    return {
+      status: "error",
+      source: "build",
+      error: toMessageOnlyErrorDetail(firstBuildError)
+    };
+  }
+  let latestFailure = null;
+  let hasRenderedBoundary = false;
+  for (const health of state.boundaries.values()) {
+    if (health.status === "rendered") {
+      hasRenderedBoundary = true;
+    } else if (!latestFailure || health.failedAt >= latestFailure.failedAt) {
+      latestFailure = health;
+    }
+  }
+  if (latestFailure) {
+    return {
+      status: "error",
+      source: "boundary",
+      error: toPreviewErrorDetail(
+        latestFailure.error,
+        latestFailure.componentStack
+      )
+    };
+  }
+  if (state.rootFailure) {
+    return {
+      status: "error",
+      source: "root",
+      error: toPreviewErrorDetail(state.rootFailure.error, null)
+    };
+  }
+  return hasRenderedBoundary ? { status: "ok" } : null;
+}
+function createPreviewHealthMonitor() {
+  const store = createPreviewHealthStore();
+  const { actions } = store.getState();
+  const documentId = uuidv4();
+  const editor = createEditorRemote();
+  let seq = 0;
+  let lastPosted = null;
+  let pendingRecovery = null;
+  const pageFailureErrors = /* @__PURE__ */ new WeakSet();
+  const diagnosticKeys = /* @__PURE__ */ new Set();
+  const postStatus = (health) => {
+    lastPosted = health;
+    seq += 1;
+    editor.statusChanged({
+      route: window.location.pathname,
+      documentId,
+      seq,
+      health
+    });
+  };
+  const cancelPendingRecovery = () => {
+    if (pendingRecovery !== null) {
+      window.clearTimeout(pendingRecovery);
+      pendingRecovery = null;
+    }
+  };
+  const publish = (health) => {
+    if (health === null) {
+      return;
+    }
+    if (lastPosted && getHealthKey(lastPosted) === getHealthKey(health)) {
+      cancelPendingRecovery();
+      return;
+    }
+    if (health.status === "ok" && lastPosted?.status === "error") {
+      pendingRecovery ??= window.setTimeout(() => {
+        pendingRecovery = null;
+        const settled = selectPreviewHealth(store.getState());
+        if (settled?.status === "ok") {
+          postStatus(settled);
+        }
+      }, RECOVERY_SETTLE_MS);
+      return;
+    }
+    cancelPendingRecovery();
+    postStatus(health);
+  };
+  const recordDiagnostic = ({
+    origin,
+    impact,
+    error
+  }) => {
+    const firstStackFrame = error.stack?.split("\n")[1]?.trim() ?? "";
+    const key = `${origin}|${error.message}|${firstStackFrame}`;
+    if (diagnosticKeys.has(key) || diagnosticKeys.size >= MAX_DIAGNOSTICS_PER_DOCUMENT) {
+      return;
+    }
+    diagnosticKeys.add(key);
+    editor.diagnosticRecorded({
+      route: window.location.pathname,
+      documentId,
+      diagnostic: { origin, impact, error, at: Date.now() }
+    });
+  };
+  const rememberPageFailure = (value) => {
+    if (typeof value === "object" && value !== null) {
+      pageFailureErrors.add(value);
+    }
+  };
+  const recordPageFailureDiagnostics = (state, previous) => {
+    if (state.rootFailure && state.rootFailure !== previous.rootFailure) {
+      rememberPageFailure(state.rootFailure.error);
+      recordDiagnostic({
+        origin: "root",
+        impact: "page",
+        error: toPreviewErrorDetail(state.rootFailure.error, null)
+      });
+    }
+    for (const [boundaryId, health] of state.boundaries) {
+      const previousHealth = previous.boundaries.get(boundaryId);
+      if (health.status === "failed" && (previousHealth?.status !== "failed" || previousHealth.error !== health.error)) {
+        rememberPageFailure(health.error);
+        recordDiagnostic({
+          origin: "boundary",
+          impact: "page",
+          error: toPreviewErrorDetail(health.error, health.componentStack)
+        });
+      }
+    }
+    if (state.buildErrors !== previous.buildErrors) {
+      const previousBuildErrors = new Set(previous.buildErrors);
+      for (const message of state.buildErrors) {
+        if (!previousBuildErrors.has(message)) {
+          recordDiagnostic({
+            origin: "build",
+            impact: "page",
+            error: toMessageOnlyErrorDetail(message)
+          });
+        }
+      }
+    }
+  };
+  const unsubscribe = store.subscribe((state, previous) => {
+    recordPageFailureDiagnostics(state, previous);
+    publish(selectPreviewHealth(state));
+  });
+  const handleNextError = (event) => {
+    if (event.kind === "rootCaught") {
+      actions.rootCaughtError(event.error);
+      return;
+    }
+    if (pageFailureErrors.has(event.error)) {
+      return;
+    }
+    recordDiagnostic({
+      origin: event.kind === "rejection" ? "rejection" : event.origin,
+      impact: "unknown",
+      error: toPreviewErrorDetail(event.error, null)
+    });
+  };
+  if (process.env.NODE_ENV !== "production") {
+    installNextErrorFeed(handleNextError);
+  }
+  const overlayStyle = document.createElement("style");
+  overlayStyle.dataset.reploPreviewHealth = "";
+  overlayStyle.textContent = "nextjs-portal{display:none!important}";
+  document.head.append(overlayStyle);
+  const stopBuildStatus = subscribeToBuildStatus({
+    onBuildErrors: actions.buildErrorsChanged
+  });
+  return {
+    actions,
+    dispose() {
+      unsubscribe();
+      stopBuildStatus();
+      overlayStyle.remove();
+      cancelPendingRecovery();
+      if (window.__reploNextErrorFeed?.listener === handleNextError) {
+        window.__reploNextErrorFeed.listener = null;
+      }
+    }
+  };
+}
+function openSocket(url) {
+  return new Promise((resolve) => {
+    const socket = new window.WebSocket(url);
+    socket.addEventListener("open", () => {
+      resolve(socket);
+    });
+    socket.addEventListener("close", () => {
+      resolve(null);
+    });
+  });
+}
+function subscribeToBuildStatus({
+  onBuildErrors
+}) {
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  const getUrl = (path) => {
+    return `${protocol}//${window.location.host}${path}`;
+  };
+  let isStopped = false;
+  let currentSocket = null;
+  const listen = (socket, path) => {
+    if (isStopped) {
+      socket.close();
+      return;
+    }
+    currentSocket = socket;
+    socket.addEventListener("message", (event) => {
+      const data = z.string().safeParse(event.data);
+      if (!data.success) {
+        return;
+      }
+      const status = hmrBuildStatusSchema.safeParse(JSON.parse(data.data));
+      if (status.success) {
+        onBuildErrors(
+          status.data.errors.map((message) => {
+            return truncate(stripAnsi(message));
+          })
+        );
+      }
+    });
+    socket.addEventListener("close", () => {
+      if (!isStopped) {
+        void reconnect(path);
+      }
+    });
+  };
+  const reconnect = async (path) => {
+    const socket = await retry(
+      async () => {
+        if (isStopped) {
+          return null;
+        }
+        const opened = await openSocket(getUrl(path));
+        if (opened === null) {
+          throw new HmrSocketClosedError(path);
+        }
+        return opened;
+      },
+      {
+        forever: true,
+        minTimeout: HMR_RECONNECT_MIN_MS,
+        maxTimeout: HMR_RECONNECT_MAX_MS
+      }
+    );
+    if (socket !== null) {
+      listen(socket, path);
+    }
+  };
+  const connect = async () => {
+    await retry(
+      async () => {
+        for (const path of HMR_PATHS) {
+          if (isStopped) {
+            return;
+          }
+          const socket = await openSocket(getUrl(path));
+          if (socket !== null) {
+            listen(socket, path);
+            return;
+          }
+        }
+        throw new HmrSocketClosedError(
+          "No HMR endpoint accepted the connection"
+        );
+      },
+      {
+        forever: true,
+        minTimeout: HMR_RECONNECT_MIN_MS,
+        maxTimeout: HMR_RECONNECT_MAX_MS
+      }
+    );
+  };
+  void connect();
+  return () => {
+    isStopped = true;
+    currentSocket?.close();
+  };
+}
+function getPreviewHealthMonitor() {
+  if (window.self === window.top) {
+    return null;
+  }
+  window.__reploPreviewHealthMonitor ??= createPreviewHealthMonitor();
+  return window.__reploPreviewHealthMonitor;
+}
+function getPreviewHealthActions() {
+  return getPreviewHealthMonitor()?.actions ?? null;
+}
+function resetPreviewHealthMonitorForTests() {
+  window.__reploPreviewHealthMonitor?.dispose();
+  delete window.__reploPreviewHealthMonitor;
+}
+if (typeof window !== "undefined" && process.env.NODE_ENV !== "production") {
+  getPreviewHealthMonitor();
+}
+export {
+  getPreviewHealthActions,
+  resetPreviewHealthMonitorForTests
+};

package/sandbox-runtime.js

@@ -7,7 +7,6 @@ import { DesignLibraryPreview } from "./design-library-preview/DesignLibraryPrev
 import { DocumentReadyBeacon } from "./DocumentReadyBeacon";
 import LinkInterceptor from "./LinkInterceptor";
 import { NavigationReceiver } from "./NavigationReceiver";
-import { NextErrorReporter } from "./NextErrorReporter";
 import { PageCaptureResponder } from "./PageCaptureResponder";
 import PostHogRelay from "./posthog-relay";
 import { EditorSelection } from "./select-mode/EditorSelection";
@@ -19,7 +18,6 @@ function SandboxRuntime({ children }) {
   const isDevServer = process.env.NODE_ENV === "development";
   return isDevServer ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(DocumentReadyBeacon, {}),
-    /* @__PURE__ */ jsx(NextErrorReporter, {}),
     /* @__PURE__ */ jsxs(ClientErrorBoundary, { resetKey: children, children: [
       /* @__PURE__ */ jsx(LinkInterceptor, {}),
       /* @__PURE__ */ jsx(NavigationReceiver, {}),

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 = () => {