@replohq/sandbox-runtime 1.9.0 → 1.10.1

package/select-mode/SelectionFrames.js

@@ -1,13 +1,17 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
+import { getDocumentScrollOffset } from "./interactions/selectionGeometry";
 import {
+  SECTION_SELECTION_FRAME_BACKGROUND,
+  SECTION_SELECTION_FRAME_BORDER_HEX,
   SELECTION_FRAME_BORDER_HEX,
   SELECTION_FRAME_EDITING_BORDER_HEX,
   SELECTION_FRAMES_CONTAINER_ID
 } from "./selectionFrame";
 import {
   useIsSelectionFrameEditing,
+  useSectionHoverRect,
   useSelectionFrames
 } from "./selectModeStore";
 const CONTAINER_STYLE = {
@@ -24,32 +28,61 @@ const CONTAINER_STYLE = {
 function SelectionFrames() {
   const frames = useSelectionFrames();
   const isEditing = useIsSelectionFrameEditing();
-  if (typeof document === "undefined" || !document.body || frames.length === 0) {
+  const sectionHoverRect = useSectionHoverRect();
+  if (typeof document === "undefined" || !document.body || frames.length === 0 && !sectionHoverRect) {
     return null;
   }
-  const borderColor = isEditing ? SELECTION_FRAME_EDITING_BORDER_HEX : SELECTION_FRAME_BORDER_HEX;
+  const elementBorderColor = isEditing ? SELECTION_FRAME_EDITING_BORDER_HEX : SELECTION_FRAME_BORDER_HEX;
+  const scrollOffset = getDocumentScrollOffset();
+  const sectionLabelPosition = sectionHoverRect ? {
+    x: sectionHoverRect.x + scrollOffset.left,
+    y: sectionHoverRect.y + scrollOffset.top
+  } : frames.find((frame) => frame.variant === "section")?.pageRect;
   return createPortal(
-    /* @__PURE__ */ jsx("div", { id: SELECTION_FRAMES_CONTAINER_ID, "aria-hidden": true, style: CONTAINER_STYLE, children: frames.map((frame, index) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        "aria-hidden": true,
-        style: {
-          position: "absolute",
-          boxSizing: "border-box",
-          borderRadius: 2,
-          pointerEvents: "none",
-          margin: 0,
-          padding: 0,
-          left: frame.pageRect.x,
-          top: frame.pageRect.y,
-          width: frame.pageRect.width,
-          height: frame.pageRect.height,
-          border: `2px solid ${borderColor}`,
-          background: frame.variant === "area" ? "rgba(192, 38, 211, 0.08)" : "transparent"
+    /* @__PURE__ */ jsxs("div", { id: SELECTION_FRAMES_CONTAINER_ID, "aria-hidden": true, style: CONTAINER_STYLE, children: [
+      frames.map((frame, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          "data-variant": frame.variant,
+          style: {
+            position: "absolute",
+            boxSizing: "border-box",
+            borderRadius: 2,
+            pointerEvents: "none",
+            margin: 0,
+            padding: 0,
+            left: frame.pageRect.x,
+            top: frame.pageRect.y,
+            width: frame.pageRect.width,
+            height: frame.pageRect.height,
+            border: `2px solid ${frame.variant === "section" ? SECTION_SELECTION_FRAME_BORDER_HEX : elementBorderColor}`,
+            background: {
+              area: "rgba(192, 38, 211, 0.08)",
+              element: "transparent",
+              section: SECTION_SELECTION_FRAME_BACKGROUND
+            }[frame.variant]
+          }
+        },
+        `${frame.variant}-${index}`
+      )),
+      sectionLabelPosition && /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            position: "absolute",
+            top: sectionLabelPosition.y + 6,
+            left: sectionLabelPosition.x + 6,
+            padding: "3px 6px",
+            borderRadius: 4,
+            background: "#2563eb",
+            color: "white",
+            font: "500 12px/16px system-ui"
+          },
+          children: "Section"
         }
-      },
-      `${frame.variant}-${index}`
-    )) }),
+      )
+    ] }),
     document.body
   );
 }

package/select-mode/descriptor/elementDescriptor.d.ts

@@ -17,8 +17,9 @@ export declare function buildSelector(element: Element): string;
  * about a selection: identification, geometry, source location, and a
  * style-inlined HTML snippet.
  */
-export declare function buildElementDescriptor({ element, clickPosition, siblingSelectors, }: {
+export declare function buildElementDescriptor({ element, clickPosition, siblingSelectors, section, }: {
     element: Element;
     clickPosition: SelectModeClickPosition;
     siblingSelectors?: string[];
+    section?: Element | null;
 }): SelectableData;

package/select-mode/descriptor/elementDescriptor.js

@@ -8,6 +8,43 @@ import { getImageDescriptor } from "../imageSources";
 import { skipInlineTextMarkElements } from "../inlineTextMarks";
 import { getElementBoundingRect } from "../interactions/selectionGeometry";
 import { getDefinedStyles, getInheritedStyles } from "./styleExtraction";
+const SECTION_SELECTOR = 'section, article, aside, [role="region"]';
+const SECTION_LABEL_LENGTH = 60;
+function normalizeSectionLabel(value) {
+  return value?.replace(/\s+/g, " ").trim().slice(0, SECTION_LABEL_LENGTH) || void 0;
+}
+function findSectionLabel(section) {
+  if (!section) {
+    return void 0;
+  }
+  const ariaLabel = normalizeSectionLabel(section.getAttribute("aria-label"));
+  if (ariaLabel) {
+    return ariaLabel;
+  }
+  const labelledBy = section.getAttribute("aria-labelledby");
+  const labelledByText = normalizeSectionLabel(
+    labelledBy?.split(/\s+/).map((id) => section.ownerDocument.getElementById(id)?.textContent).filter(Boolean).join(" ")
+  );
+  if (labelledByText) {
+    return labelledByText;
+  }
+  const headings = Array.from(
+    section.querySelectorAll("h1, h2, h3, h4, h5, h6")
+  ).filter((candidate) => {
+    if (candidate.checkVisibility?.({ visibilityProperty: true }) === false) {
+      return false;
+    }
+    const semanticSection = candidate.closest(SECTION_SELECTOR);
+    return !semanticSection || semanticSection === section || !section.contains(semanticSection);
+  });
+  const highestHeadingLevel = Math.min(
+    ...headings.map((heading2) => Number(heading2.tagName[1]))
+  );
+  const [heading, competingHeading] = headings.filter(
+    (candidate) => Number(candidate.tagName[1]) === highestHeadingLevel
+  );
+  return competingHeading ? void 0 : normalizeSectionLabel(heading ? getRenderedText(heading) : void 0);
+}
 function getNearestSelectableElement(element) {
   const host = skipInlineTextMarkElements(element);
   return host.closest(`[${SELECT_MODE_SELECTABLE_ATTRIBUTE}]`) ?? host;
@@ -30,12 +67,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 +94,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 +116,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 +126,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 +210,8 @@ function getTextMetrics(element) {
 function buildElementDescriptor({
   element,
   clickPosition,
-  siblingSelectors = []
+  siblingSelectors = [],
+  section
 }) {
   const selectableData = getSelectableDataFromElement(element);
   if (selectableData) {
@@ -177,12 +220,15 @@ function buildElementDescriptor({
   const textMetrics = getTextMetrics(element);
   const fiberChain = element instanceof HTMLElement ? getFiberChain(element) : [];
   const sourceLocation = fiberChain[0]?.sourceLocation;
+  const trimmedText = getRenderedText(element);
+  const sectionLabel = findSectionLabel(section);
   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,
+    ...sectionLabel ? { sectionLabel } : {},
     rect: getElementBoundingRect(element),
     textMetrics,
     outerHTML: element.outerHTML.slice(0, 4e3),
@@ -192,7 +238,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,10 +1,10 @@
 import { useEffect } from "react";
 import {
   buildElementDescriptor,
-  buildSelector,
   getNearestSelectableElement
 } from "../descriptor/elementDescriptor";
 import { getWebsiteBuilderRpc } from "../iframeRpcChannel";
+import { findContainingSection } from "../interactions/sectionGeometry";
 import {
   collectDragCandidates,
   getCandidatesInSelection,
@@ -27,7 +27,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 +71,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 +185,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)
       );
@@ -242,6 +243,7 @@ function useSelectionInteractions() {
         element,
         data: buildElementDescriptor({
           element,
+          section: findContainingSection(element),
           clickPosition: getElementAnchor({
             element,
             selectionRect: anchorRect
@@ -277,7 +279,6 @@ function useSelectionInteractions() {
       selectionElement,
       pointerEvent
     }) => {
-      const targetRect = selectionElement.getBoundingClientRect();
       const clickPosition = getElementAnchor({
         element: selectionElement,
         selectionRect: getPointRect({
@@ -285,12 +286,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 +296,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,9 +13,13 @@ 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>;
+                sectionLabel: import("zod").ZodOptional<import("zod").ZodString>;
                 rect: import("zod").ZodObject<{
                     x: import("zod").ZodNumber;
                     y: import("zod").ZodNumber;
@@ -104,9 +108,13 @@ 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>;
+                sectionLabel: import("zod").ZodOptional<import("zod").ZodString>;
                 rect: import("zod").ZodObject<{
                     x: import("zod").ZodNumber;
                     y: import("zod").ZodNumber;
@@ -202,6 +210,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,9 +292,13 @@ 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>;
+                sectionLabel: import("zod").ZodOptional<import("zod").ZodString>;
                 rect: import("zod").ZodObject<{
                     x: import("zod").ZodNumber;
                     y: import("zod").ZodNumber;

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