@replohq/sandbox-runtime 1.9.0 → 1.10.0

package/select-mode/descriptor/elementDescriptor.js

@@ -30,12 +30,20 @@ function getSelectableDataFromElement(element) {
     rect: getElementBoundingRect(selectableElement)
   };
 }
-function identifyElement(element) {
+function getRenderedText(element) {
+  if (element instanceof HTMLElement) {
+    return (element.innerText ?? element.textContent)?.trim() ?? null;
+  }
+  return element.textContent?.trim() ?? null;
+}
+function identifyElement({
+  element,
+  trimmedText
+}) {
   const tagName = element.tagName.toLowerCase();
   if (tagName === "button" || element.getAttribute("role") === "button" || tagName === "input") {
-    const trimmedText2 = element.textContent?.trim();
-    if (trimmedText2) {
-      return `${tagName}: "${trimmedText2.slice(0, 60)}"`;
+    if (trimmedText) {
+      return `${tagName}: "${trimmedText.slice(0, 60)}"`;
     }
     const ariaLabel = element.getAttribute("aria-label");
     if (ariaLabel) {
@@ -49,9 +57,8 @@ function identifyElement(element) {
     return tagName;
   }
   if (tagName === "a") {
-    const trimmedText2 = element.textContent?.trim();
-    if (trimmedText2) {
-      return `link: "${trimmedText2.slice(0, 60)}"`;
+    if (trimmedText) {
+      return `link: "${trimmedText.slice(0, 60)}"`;
     }
     const href = element.getAttribute("href");
     if (href) {
@@ -72,8 +79,7 @@ function identifyElement(element) {
     return "image";
   }
   if (/^h[1-6]$/.test(tagName)) {
-    const trimmedText2 = element.textContent?.trim();
-    return trimmedText2 ? `heading(${tagName}): "${trimmedText2.slice(0, 60)}"` : tagName;
+    return trimmedText ? `heading(${tagName}): "${trimmedText.slice(0, 60)}"` : tagName;
   }
   if (["div", "main", "section", "article", "header", "footer", "nav"].includes(
     tagName
@@ -83,7 +89,6 @@ function identifyElement(element) {
       return role2;
     }
   }
-  const trimmedText = element.textContent?.trim();
   if (trimmedText && trimmedText.length < 120) {
     const role2 = element.getAttribute("role");
     const label = role2 ?? tagName;
@@ -168,7 +173,8 @@ function getTextMetrics(element) {
 function buildElementDescriptor({
   element,
   clickPosition,
-  siblingSelectors = []
+  siblingSelectors = [],
+  section
 }) {
   const selectableData = getSelectableDataFromElement(element);
   if (selectableData) {
@@ -177,12 +183,13 @@ function buildElementDescriptor({
   const textMetrics = getTextMetrics(element);
   const fiberChain = element instanceof HTMLElement ? getFiberChain(element) : [];
   const sourceLocation = fiberChain[0]?.sourceLocation;
+  const trimmedText = getRenderedText(element);
   return {
     kind: "react-element",
     selector: buildSelector(element),
     tagName: element.tagName.toLowerCase(),
-    elementType: identifyElement(element),
-    textContent: element.textContent?.trim()?.slice(0, 200) ?? null,
+    elementType: identifyElement({ element, trimmedText }),
+    textContent: trimmedText?.slice(0, 200) ?? null,
     rect: getElementBoundingRect(element),
     textMetrics,
     outerHTML: element.outerHTML.slice(0, 4e3),
@@ -192,7 +199,8 @@ function buildElementDescriptor({
     clickPosition,
     sourceLocation,
     fiberChain,
-    siblingSelectors
+    siblingSelectors,
+    ...section ? { section: { selector: buildSelector(section) } } : {}
   };
 }
 export {

package/select-mode/hooks/useOptimisticOverrides.js

@@ -91,7 +91,9 @@ function applyPayload({
   payload,
   token
 }) {
-  if (payload.kind === "image") return;
+  if (payload.kind === "image") {
+    return;
+  }
   if (payload.kind === "css") {
     addToken(element, token);
     return;
@@ -201,7 +203,9 @@ function reapplyOverride({
   override,
   skipElement
 }) {
-  if (override.payload.kind === "image") return;
+  if (override.payload.kind === "image") {
+    return;
+  }
   for (const target of override.targets) {
     const element = resolveTarget(target);
     if (!element || skipElement && element.contains(skipElement)) {
@@ -220,10 +224,14 @@ function reapplyOverride({
 function syncImagePreviews() {
   const configurations = /* @__PURE__ */ new Map();
   for (const override of getOverrideList()) {
-    if (override.payload.kind !== "image") continue;
+    if (override.payload.kind !== "image") {
+      continue;
+    }
     for (const target of override.targets) {
       const element = resolveTarget(target);
-      if (!(element instanceof HTMLImageElement)) continue;
+      if (!(element instanceof HTMLImageElement)) {
+        continue;
+      }
       const previous = configurations.get(element);
       configurations.set(element, {
         image: override.payload.image,
@@ -232,7 +240,9 @@ function syncImagePreviews() {
     }
   }
   for (const [element, preview] of imagePreviews) {
-    if (configurations.has(element)) continue;
+    if (configurations.has(element)) {
+      continue;
+    }
     preview.dispose();
     imagePreviews.delete(element);
   }
@@ -253,7 +263,9 @@ function syncImagePreviews() {
   }
   setOverrideList(
     getOverrideList().filter((entry) => {
-      if (entry.payload.kind !== "image") return true;
+      if (entry.payload.kind !== "image") {
+        return true;
+      }
       entry.targets = entry.targets.filter((target) => {
         const element = resolveTarget(target);
         return !element || !acknowledged.has(element);

package/select-mode/hooks/useParentMessaging.d.ts

@@ -16,7 +16,7 @@ import type { DisplayMode, SelectModeFormatCommand, SelectModeOptimisticUpdatePa
  * the initial `setDisplayMode` — without this handshake the parent would
  * race the iframe's mount and the first message could be lost.
  */
-export declare function useParentMessaging({ applyOptimisticUpdate, markCommitted, resolveSessionOverrides, onEnterEditMode, onExitEditMode, onFormatCommand, revertOverride, setDisplayMode, setSelectionType, }: {
+export declare function useParentMessaging({ applyOptimisticUpdate, markCommitted, resolveSessionOverrides, onExpandToSection, onSetSectionPreview, onEnterEditMode, onExitEditMode, onFormatCommand, revertOverride, setDisplayMode, setSelectionType, }: {
     applyOptimisticUpdate?: (input: {
         editId: string;
         payload: SelectModeOptimisticUpdatePayload;
@@ -25,6 +25,12 @@ export declare function useParentMessaging({ applyOptimisticUpdate, markCommitte
     }) => void;
     markCommitted?: (editId: string, sessionId: string) => void;
     resolveSessionOverrides?: (sessionId: string, outcome: "persisted" | "failed") => void;
+    onExpandToSection?: (input: {
+        targetSelector: string;
+    }) => void;
+    onSetSectionPreview?: (input: {
+        targetSelector: string | null;
+    }) => void;
     onEnterEditMode?: () => void;
     onExitEditMode?: () => void;
     onFormatCommand?: (command: SelectModeFormatCommand) => void;

package/select-mode/hooks/useParentMessaging.js

@@ -27,6 +27,8 @@ function useParentMessaging({
   applyOptimisticUpdate,
   markCommitted,
   resolveSessionOverrides,
+  onExpandToSection,
+  onSetSectionPreview,
   onEnterEditMode,
   onExitEditMode,
   onFormatCommand,
@@ -37,6 +39,8 @@ function useParentMessaging({
   useIframeRpcChannel(useMemo(() => getSelectModeIframeRpcChannel(), []));
   useEffect(() => {
     setSelectModeParentHandlers({
+      expandToSection: (input) => onExpandToSection?.(input),
+      setSectionPreview: (input) => onSetSectionPreview?.(input),
       setDisplayMode: ({ displayMode }) => {
         setDisplayMode(displayMode);
       },
@@ -83,6 +87,8 @@ function useParentMessaging({
     applyOptimisticUpdate,
     markCommitted,
     resolveSessionOverrides,
+    onExpandToSection,
+    onSetSectionPreview,
     onEnterEditMode,
     onExitEditMode,
     onFormatCommand,

package/select-mode/hooks/useSelectionHover.js

@@ -1,6 +1,10 @@
 import { useEffect } from "react";
 import { getNearestSelectableElement } from "../descriptor/elementDescriptor";
 import { getWebsiteBuilderRpc } from "../iframeRpcChannel";
+import {
+  CONTAINER_TAGS,
+  findContainingSection
+} from "../interactions/sectionGeometry";
 import { getElementBoundingRect } from "../interactions/selectionGeometry";
 import { useDisplayMode, useSelectModeStore } from "../selectModeStore";
 function useSelectionHover() {
@@ -11,16 +15,30 @@ function useSelectionHover() {
       return;
     }
     const postHoveredElement = (element) => {
-      const { lastPostedHoverRect, actions } = store.getState();
+      const { lastPostedHover, actions } = store.getState();
+      const lastPostedHoverRect = lastPostedHover?.rect;
       const rect = element ? getElementBoundingRect(element) : null;
-      const isUnchanged = lastPostedHoverRect !== void 0 && (rect === lastPostedHoverRect || rect !== null && lastPostedHoverRect !== null && rect.x === lastPostedHoverRect.x && rect.y === lastPostedHoverRect.y && rect.width === lastPostedHoverRect.width && rect.height === lastPostedHoverRect.height);
+      const isUnchanged = lastPostedHover?.element === element && lastPostedHoverRect !== void 0 && (rect === lastPostedHoverRect || rect !== null && lastPostedHoverRect !== null && rect.x === lastPostedHoverRect.x && rect.y === lastPostedHoverRect.y && rect.width === lastPostedHoverRect.width && rect.height === lastPostedHoverRect.height);
       if (isUnchanged) {
         return;
       }
-      actions.setLastPostedHoverRect(rect);
-      getWebsiteBuilderRpc()?.hoverElement({ rect });
+      const hoverRect = rect && element ? {
+        ...rect,
+        isSection: element === store.getState().sectionPreviewElement || CONTAINER_TAGS.has(element.tagName) && findContainingSection(element) === element
+      } : null;
+      actions.setLastPostedHover({ element, rect: hoverRect });
+      getWebsiteBuilderRpc()?.hoverElement({ rect: hoverRect });
     };
     const syncCurrentHover = (pointerClientPosition = store.getState().lastPointerClientPosition) => {
+      const previewSection = store.getState().sectionPreviewElement;
+      if (previewSection) {
+        if (previewSection.isConnected) {
+          postHoveredElement(previewSection);
+          return;
+        }
+        store.getState().actions.setSectionPreview({ targetSelector: null });
+        return;
+      }
       let hoveredElement = null;
       if (pointerClientPosition) {
         const isPointerWithinViewport = pointerClientPosition.x >= 0 && pointerClientPosition.y >= 0 && pointerClientPosition.x <= window.innerWidth && pointerClientPosition.y <= window.innerHeight;
@@ -59,14 +77,6 @@ function useSelectionHover() {
       }
       syncCurrentHover(position);
     };
-    const handlePointerOver = (event) => {
-      const position = { x: event.clientX, y: event.clientY };
-      store.getState().actions.setLastPointerClientPosition(position);
-      if (store.getState().interactionSession.type === "drag") {
-        return;
-      }
-      syncCurrentHover(position);
-    };
     const handlePointerOut = (event) => {
       if (store.getState().interactionSession.type === "drag") {
         return;
@@ -81,11 +91,20 @@ function useSelectionHover() {
         cancelAnimationFrame(hoverSyncAnimationFrameId);
         actions.setHoverSyncAnimationFrameId(null);
       }
-      postHoveredElement(null);
+      if (store.getState().sectionPreviewElement) {
+        syncCurrentHover(null);
+      } else {
+        postHoveredElement(null);
+      }
     };
+    const stopPreviewObservation = store.subscribe((state, previous) => {
+      if (state.sectionPreviewElement !== previous.sectionPreviewElement) {
+        syncCurrentHover();
+      }
+    });
     syncCurrentHover();
     document.addEventListener("pointermove", handlePointerMove, true);
-    document.addEventListener("pointerover", handlePointerOver, true);
+    document.addEventListener("pointerover", handlePointerMove, true);
     document.addEventListener("pointerout", handlePointerOut, true);
     document.addEventListener("scroll", scheduleHoverSync, true);
     document.addEventListener("wheel", scheduleHoverSync, {
@@ -94,13 +113,17 @@ function useSelectionHover() {
     });
     window.addEventListener("resize", scheduleHoverSync);
     return () => {
+      stopPreviewObservation();
+      store.getState().actions.setSectionPreview({ targetSelector: null });
+      postHoveredElement(null);
+      store.getState().actions.setLastPostedHover(void 0);
       const { hoverSyncAnimationFrameId } = store.getState();
       if (hoverSyncAnimationFrameId !== null) {
         cancelAnimationFrame(hoverSyncAnimationFrameId);
         store.getState().actions.setHoverSyncAnimationFrameId(null);
       }
       document.removeEventListener("pointermove", handlePointerMove, true);
-      document.removeEventListener("pointerover", handlePointerOver, true);
+      document.removeEventListener("pointerover", handlePointerMove, true);
       document.removeEventListener("pointerout", handlePointerOut, true);
       document.removeEventListener("scroll", scheduleHoverSync, true);
       document.removeEventListener("wheel", scheduleHoverSync, {

package/select-mode/hooks/useSelectionInteractions.js

@@ -1,7 +1,6 @@
 import { useEffect } from "react";
 import {
   buildElementDescriptor,
-  buildSelector,
   getNearestSelectableElement
 } from "../descriptor/elementDescriptor";
 import { getWebsiteBuilderRpc } from "../iframeRpcChannel";
@@ -27,7 +26,6 @@ import {
 } from "../selectModeSession";
 import { useDisplayMode, useSelectModeStore } from "../selectModeStore";
 import { symbolicateSelectedElement } from "../symbolicate";
-import { getRepetitionSiblingElements } from "./useSiblingResolution";
 const DOUBLE_CLICK_THRESHOLD_MS = 500;
 function getSelectedElementsFromSession(session) {
   if (session.type === "element") {
@@ -72,8 +70,8 @@ function useSelectionInteractions() {
       actions().hideSelectionFrames();
     };
     const showAreaSelectionFrames = actions().showAreaSelectionFrames;
-    const showElementSelectionFrames = actions().showElementSelectionFrames;
     const editingPointerIds = store().editingPointerIds;
+    let committedDataAtPointerDown = null;
     const clearCommittedSelection = ({
       rect
     }) => {
@@ -186,6 +184,8 @@ function useSelectionInteractions() {
       event.preventDefault();
       event.stopPropagation();
       const scrollOffset = getDocumentScrollOffset();
+      const session = interactionSessionRef.current;
+      committedDataAtPointerDown = session.type === "element" ? session.data : null;
       actions().setCommittedSelectionAtPointerDown(
         getSelectedElementsFromSession(interactionSessionRef.current)
       );
@@ -277,7 +277,6 @@ function useSelectionInteractions() {
       selectionElement,
       pointerEvent
     }) => {
-      const targetRect = selectionElement.getBoundingClientRect();
       const clickPosition = getElementAnchor({
         element: selectionElement,
         selectionRect: getPointRect({
@@ -285,12 +284,6 @@ function useSelectionInteractions() {
           y: pointerEvent.clientY
         })
       });
-      const scrollOffset = getDocumentScrollOffset();
-      const siblingElements = selectionElement instanceof HTMLElement ? getRepetitionSiblingElements({ element: selectionElement }) : [];
-      showElementSelectionFrames({
-        elements: [selectionElement, ...siblingElements],
-        scrollOffset
-      });
       const now = pointerEvent.timeStamp;
       const previousClick = store().lastClick;
       if (previousClick && previousClick.target === selectionElement && now - previousClick.time <= DOUBLE_CLICK_THRESHOLD_MS && isTextEditableElement(selectionElement)) {
@@ -301,41 +294,20 @@ function useSelectionInteractions() {
         });
         return;
       }
-      const data = buildElementDescriptor({
+      const data = actions().commitElementSelection({
         element: selectionElement,
         clickPosition,
-        siblingSelectors: siblingElements.map(buildSelector)
+        isPendingClickOnSelection: (descriptor) => {
+          const session = interactionSessionRef.current;
+          const committedSelectionAtPointerDown = store().committedSelectionAtPointerDown;
+          return session.type === "drag" && !session.hasExceededThreshold && committedDataAtPointerDown === descriptor && committedSelectionAtPointerDown.length === 1 && committedSelectionAtPointerDown[0] === selectionElement;
+        }
       });
       actions().setLastClick({
         descriptorPromise: Promise.resolve(data),
         target: selectionElement,
         time: now
       });
-      if (!selectionElement.isConnected) {
-        return;
-      }
-      interactionSessionRef.current = {
-        type: "element",
-        element: selectionElement,
-        siblingElements,
-        clickPosition: {
-          x: clickPosition.x - targetRect.left,
-          y: clickPosition.y - targetRect.top
-        },
-        data
-      };
-      void maybeSymbolicate(data).then((symbolicated) => {
-        const session = interactionSessionRef.current;
-        const committedSelectionAtPointerDown = store().committedSelectionAtPointerDown;
-        const isPendingClickOnSelection = session.type === "drag" && !session.hasExceededThreshold && committedSelectionAtPointerDown.length === 1 && committedSelectionAtPointerDown[0] === selectionElement;
-        if (!isPendingClickOnSelection && !isSelectionStillCurrent({
-          session: interactionSessionRef.current,
-          selection: { type: "element", element: selectionElement }
-        })) {
-          return;
-        }
-        getWebsiteBuilderRpc()?.elementSelected({ data: symbolicated });
-      });
     };
     const commitClickSelection = ({
       targetElement,

package/select-mode/hooks/useSelectionScrollSync.js

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { isSelectedSection } from "../../_vendor/schemas/selectMode.mjs";
 import { getWebsiteBuilderRpc } from "../iframeRpcChannel";
 import {
   getDocumentScrollOffset,
@@ -37,7 +38,8 @@ function useSelectionScrollSync() {
                 interactionSession.element,
                 ...interactionSession.siblingElements
               ],
-              scrollOffset
+              scrollOffset,
+              isSection: isSelectedSection(interactionSession.data)
             });
             getWebsiteBuilderRpc()?.selectedElementRectUpdate({
               rect: boundingRect,
@@ -57,8 +59,10 @@ function useSelectionScrollSync() {
       );
     };
     document.addEventListener("scroll", handleScroll, true);
+    window.addEventListener("resize", handleScroll);
     return () => {
       document.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", handleScroll);
       const { scrollSyncAnimationFrameId, actions } = store.getState();
       if (scrollSyncAnimationFrameId !== null) {
         cancelAnimationFrame(scrollSyncAnimationFrameId);

package/select-mode/iframeRpcChannel.d.ts

@@ -13,6 +13,9 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
             element: import("zod").ZodObject<{
                 kind: import("zod").ZodLiteral<"react-element">;
                 selector: import("zod").ZodString;
+                section: import("zod").ZodOptional<import("zod").ZodObject<{
+                    selector: import("zod").ZodString;
+                }, import("zod/v4/core").$strip>>;
                 tagName: import("zod").ZodString;
                 elementType: import("zod").ZodString;
                 textContent: import("zod").ZodNullable<import("zod").ZodString>;
@@ -104,6 +107,9 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
             data: import("zod").ZodDiscriminatedUnion<[import("zod").ZodObject<{
                 kind: import("zod").ZodLiteral<"react-element">;
                 selector: import("zod").ZodString;
+                section: import("zod").ZodOptional<import("zod").ZodObject<{
+                    selector: import("zod").ZodString;
+                }, import("zod/v4/core").$strip>>;
                 tagName: import("zod").ZodString;
                 elementType: import("zod").ZodString;
                 textContent: import("zod").ZodNullable<import("zod").ZodString>;
@@ -202,6 +208,7 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                 bottom: import("zod").ZodNumber;
                 width: import("zod").ZodNumber;
                 height: import("zod").ZodNumber;
+                isSection: import("zod").ZodOptional<import("zod").ZodBoolean>;
             }, import("zod/v4/core").$strip>>;
         }, import("zod/v4/core").$strip>;
         outputSchema: import("zod").ZodVoid;
@@ -283,6 +290,9 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
             items: import("zod").ZodArray<import("zod").ZodDiscriminatedUnion<[import("zod").ZodObject<{
                 kind: import("zod").ZodLiteral<"react-element">;
                 selector: import("zod").ZodString;
+                section: import("zod").ZodOptional<import("zod").ZodObject<{
+                    selector: import("zod").ZodString;
+                }, import("zod/v4/core").$strip>>;
                 tagName: import("zod").ZodString;
                 elementType: import("zod").ZodString;
                 textContent: import("zod").ZodNullable<import("zod").ZodString>;

package/select-mode/iframeRpcChannel.js

@@ -25,6 +25,8 @@ function createSelectModeIframeRpcChannel() {
     outgoingMethods: previewIframeToWebsiteBuilderMethodConfig,
     incomingMethods: websiteBuilderToPreviewIframeMethodConfig,
     handlers: {
+      expandToSection: (input) => messagingHandlers?.expandToSection(input),
+      setSectionPreview: (input) => messagingHandlers?.setSectionPreview(input),
       setDisplayMode: (input) => {
         messagingHandlers?.setDisplayMode(input);
       },

package/select-mode/imageOverridePreview.js

@@ -13,11 +13,17 @@ function createImagePreview(image) {
   let configuration = "";
   let disposed = false;
   function paint() {
-    if (disposed) return;
+    if (disposed) {
+      return;
+    }
     const url = resolver.currentSrc || resolver.src;
-    if (!url) return;
+    if (!url) {
+      return;
+    }
     const rule = `[data-replo-image-preview="${token}"] { content: url(${JSON.stringify(url)}) !important; }`;
-    if (style.textContent !== rule) style.textContent = rule;
+    if (style.textContent !== rule) {
+      style.textContent = rule;
+    }
   }
   resolver.addEventListener("load", paint);
   return {
@@ -50,7 +56,9 @@ function createImagePreview(image) {
           resolveMetadata(config.sizes, image.sizes)
         );
         picture.replaceChildren(...sources, resolver);
-        if (!picture.isConnected) document.body.append(picture);
+        if (!picture.isConnected) {
+          document.body.append(picture);
+        }
       }
       paint();
     },
@@ -64,8 +72,9 @@ function createImagePreview(image) {
       resolver.removeEventListener("load", paint);
       picture.remove();
       style.remove();
-      if (image.dataset.reploImagePreview === token)
+      if (image.dataset.reploImagePreview === token) {
         delete image.dataset.reploImagePreview;
+      }
     }
   };
 }

package/select-mode/imageSources.js

@@ -24,8 +24,9 @@ function getPreviewUrl({
   srcSet,
   baseURI
 }) {
-  if (src.length > MAX_IMAGE_METADATA_LENGTH || srcSet.length > MAX_IMAGE_METADATA_LENGTH)
+  if (src.length > MAX_IMAGE_METADATA_LENGTH || srcSet.length > MAX_IMAGE_METADATA_LENGTH) {
     return null;
+  }
   const candidate = src || srcSet.trim().split(/\s+/)[0]?.replace(/,+$/, "");
   if (!candidate) {
     return null;

package/select-mode/inlineEditFeedback.js

@@ -8,7 +8,9 @@ function reportInlineEditFeedback({
   let stopped = false;
   let previousRect = "";
   const report = () => {
-    if (stopped) return;
+    if (stopped) {
+      return;
+    }
     if (!element.isConnected) {
       onDisconnected();
       return;
@@ -34,10 +36,14 @@ function reportInlineEditFeedback({
     animationFrame = requestAnimationFrame(report);
   };
   const timer = status === "pending" ? window.setTimeout(report, 150) : null;
-  if (status !== "pending") report();
+  if (status !== "pending") {
+    report();
+  }
   return () => {
     stopped = true;
-    if (timer !== null) clearTimeout(timer);
+    if (timer !== null) {
+      clearTimeout(timer);
+    }
     cancelAnimationFrame(animationFrame);
     getWebsiteBuilderRpc()?.inlineEditFeedbackChanged({ feedback: null });
   };

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

@@ -0,0 +1,3 @@
+export declare const CONTAINER_TAGS: Set<string>;
+/** Suggests a visual section from live layout, not a React/source component boundary. */
+export declare function findContainingSection(element: Element): Element | null;