@replohq/sandbox-runtime 0.1.0

package/select-mode/hooks/useSelectionInteractions.js

@@ -0,0 +1,353 @@
+import { useEffect } from "react";
+import {
+  buildElementDescriptor,
+  getNearestSelectableElement
+} from "../descriptor/elementDescriptor";
+import { getWebsiteBuilderRpc } from "../iframeRpcChannel";
+import {
+  collectDragCandidates,
+  getCandidatesInSelection,
+  getDocumentScrollOffset,
+  getDragPositionFromClient,
+  getElementAnchor,
+  getPageRectFromViewportRect,
+  getViewportRectFromPageRect,
+  getViewportSelectionRect
+} from "../interactions/selectionGeometry";
+import { showSelectionFrame, showSelectionFrames } from "../selectionFrame";
+import { IDLE_SESSION } from "../selectModeSession";
+import { symbolicateSelectedElement } from "../symbolicate";
+import { isTextEditableElement } from "./useEditModeStateMachine";
+import { getSourceLocationSiblingSelectors } from "./useSiblingResolution";
+const DOUBLE_CLICK_THRESHOLD_MS = 500;
+async function maybeSymbolicate(data) {
+  return data.kind === "react-element" ? symbolicateSelectedElement(data) : data;
+}
+function useSelectionInteractions({
+  displayMode,
+  editingElementRef,
+  interactionSessionRef,
+  onBeginEditing
+}) {
+  useEffect(() => {
+    if (displayMode !== "selection") {
+      return;
+    }
+    let dragAnimationFrameId = null;
+    let lastClick = null;
+    let dragCandidates = [];
+    const stopDragAnimation = () => {
+      if (dragAnimationFrameId === null) {
+        return;
+      }
+      cancelAnimationFrame(dragAnimationFrameId);
+      dragAnimationFrameId = null;
+    };
+    const resetDragState = ({
+      notifyParentDragCleared = true
+    } = {}) => {
+      const currentSession = interactionSessionRef.current;
+      stopDragAnimation();
+      if (currentSession.type !== "drag") {
+        dragCandidates = [];
+        return;
+      }
+      if (notifyParentDragCleared && currentSession.hasExceededThreshold) {
+        getWebsiteBuilderRpc()?.dragRectUpdated({
+          dragRect: null,
+          selectionRects: []
+        });
+      }
+      dragCandidates = [];
+      interactionSessionRef.current = IDLE_SESSION;
+    };
+    const postCurrentDragRect = () => {
+      const session = interactionSessionRef.current;
+      if (session.type !== "drag") {
+        return;
+      }
+      const rect = getViewportSelectionRect({
+        dragStart: session.dragStart,
+        dragCurrent: session.dragCurrent,
+        scrollOffset: session.scrollOffset
+      });
+      if (rect.width <= 6 && rect.height <= 6 && !session.hasExceededThreshold) {
+        return;
+      }
+      if (!session.hasExceededThreshold) {
+        interactionSessionRef.current = {
+          ...session,
+          hasExceededThreshold: true
+        };
+      }
+      const selectionPageRect = getPageRectFromViewportRect({
+        rect,
+        scrollOffset: session.scrollOffset
+      });
+      const selectionRects = getCandidatesInSelection({
+        candidates: dragCandidates,
+        selectionPageRect
+      }).map((candidate) => ({
+        id: candidate.id,
+        rect: getViewportRectFromPageRect({
+          rect: candidate.pageRect,
+          scrollOffset: session.scrollOffset
+        })
+      }));
+      getWebsiteBuilderRpc()?.dragRectUpdated({
+        dragRect: rect,
+        selectionRects
+      });
+    };
+    const syncDragRectToViewport = () => {
+      const session = interactionSessionRef.current;
+      if (session.type !== "drag") {
+        dragAnimationFrameId = null;
+        return;
+      }
+      const nextScrollOffset = getDocumentScrollOffset();
+      const nextDragCurrent = getDragPositionFromClient({
+        clientX: session.dragCurrent.clientX,
+        clientY: session.dragCurrent.clientY,
+        scrollOffset: nextScrollOffset
+      });
+      if (nextDragCurrent.pageX !== session.dragCurrent.pageX || nextDragCurrent.pageY !== session.dragCurrent.pageY) {
+        interactionSessionRef.current = {
+          ...session,
+          dragCurrent: nextDragCurrent,
+          scrollOffset: nextScrollOffset
+        };
+        postCurrentDragRect();
+      } else {
+        interactionSessionRef.current = {
+          ...session,
+          scrollOffset: nextScrollOffset
+        };
+      }
+      dragAnimationFrameId = requestAnimationFrame(syncDragRectToViewport);
+    };
+    const handlePointerDown = (event) => {
+      if (editingElementRef?.current && event.target instanceof Node && editingElementRef.current.contains(event.target)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      const scrollOffset = getDocumentScrollOffset();
+      const dragStart = getDragPositionFromClient({
+        clientX: event.clientX,
+        clientY: event.clientY,
+        scrollOffset
+      });
+      interactionSessionRef.current = {
+        type: "drag",
+        dragStart,
+        dragCurrent: dragStart,
+        scrollOffset,
+        hasExceededThreshold: false
+      };
+      dragCandidates = collectDragCandidates(scrollOffset);
+      if (dragAnimationFrameId === null) {
+        dragAnimationFrameId = requestAnimationFrame(syncDragRectToViewport);
+      }
+    };
+    const handlePointerMove = (event) => {
+      const session = interactionSessionRef.current;
+      if (session.type !== "drag") {
+        return;
+      }
+      interactionSessionRef.current = {
+        ...session,
+        dragCurrent: getDragPositionFromClient({
+          clientX: event.clientX,
+          clientY: event.clientY,
+          scrollOffset: getDocumentScrollOffset()
+        })
+      };
+      postCurrentDragRect();
+    };
+    const handleViewportChangeDuringDrag = () => {
+      const session = interactionSessionRef.current;
+      if (session.type !== "drag" || dragAnimationFrameId !== null) {
+        return;
+      }
+      dragAnimationFrameId = requestAnimationFrame(syncDragRectToViewport);
+    };
+    const commitElementSelection = ({
+      targetElement,
+      pointerEvent
+    }) => {
+      const selectionElement = getNearestSelectableElement(targetElement);
+      const targetRect = selectionElement.getBoundingClientRect();
+      const clickPosition = {
+        x: pointerEvent.clientX,
+        y: pointerEvent.clientY
+      };
+      const scrollOffset = getDocumentScrollOffset();
+      showSelectionFrame({
+        variant: "element",
+        pageRect: {
+          x: targetRect.left + scrollOffset.left,
+          y: targetRect.top + scrollOffset.top,
+          width: targetRect.width,
+          height: targetRect.height
+        }
+      });
+      const now = pointerEvent.timeStamp;
+      const previousClick = lastClick;
+      if (previousClick && previousClick.target === selectionElement && now - previousClick.time <= DOUBLE_CLICK_THRESHOLD_MS && isTextEditableElement(selectionElement)) {
+        lastClick = null;
+        onBeginEditing({
+          element: selectionElement,
+          descriptorPromise: previousClick.descriptorPromise
+        });
+        return;
+      }
+      const data = buildElementDescriptor({
+        element: selectionElement,
+        clickPosition,
+        siblingSelectors: selectionElement instanceof HTMLElement ? getSourceLocationSiblingSelectors({ element: selectionElement }) : []
+      });
+      lastClick = {
+        descriptorPromise: Promise.resolve(data),
+        target: selectionElement,
+        time: now
+      };
+      if (!selectionElement.isConnected) {
+        return;
+      }
+      interactionSessionRef.current = {
+        type: "element",
+        element: selectionElement,
+        clickPosition: {
+          x: pointerEvent.clientX - targetRect.left,
+          y: pointerEvent.clientY - targetRect.top
+        },
+        data
+      };
+      void maybeSymbolicate(data).then((symbolicated) => {
+        getWebsiteBuilderRpc()?.elementSelected({ data: symbolicated });
+      });
+    };
+    const handlePointerUp = (event) => {
+      if (editingElementRef?.current && event.target instanceof Node && editingElementRef.current.contains(event.target)) {
+        return;
+      }
+      const snapshot = interactionSessionRef.current;
+      const wasDragging = snapshot.type === "drag" ? snapshot.hasExceededThreshold : false;
+      const dragStart = snapshot.type === "drag" ? snapshot.dragStart : null;
+      const dragCurrent = snapshot.type === "drag" ? snapshot.dragCurrent : null;
+      const scrollOffset = snapshot.type === "drag" ? snapshot.scrollOffset : getDocumentScrollOffset();
+      const candidates = dragCandidates;
+      resetDragState({ notifyParentDragCleared: false });
+      if (!dragStart || snapshot.type !== "drag") {
+        const targetElement = event.target;
+        if (!(targetElement instanceof Element)) {
+          return;
+        }
+        commitElementSelection({
+          targetElement,
+          pointerEvent: event
+        });
+        return;
+      }
+      const resolvedDragCurrent = dragCurrent ?? dragStart;
+      const selectionRect = getViewportSelectionRect({
+        dragStart,
+        dragCurrent: resolvedDragCurrent,
+        scrollOffset
+      });
+      if (!wasDragging) {
+        const targetElement = event.target;
+        if (!(targetElement instanceof Element)) {
+          return;
+        }
+        commitElementSelection({
+          targetElement,
+          pointerEvent: event
+        });
+        return;
+      }
+      const pageRect = getPageRectFromViewportRect({
+        rect: selectionRect,
+        scrollOffset
+      });
+      const selectedCandidates = getCandidatesInSelection({
+        candidates,
+        selectionPageRect: pageRect
+      });
+      const items = selectedCandidates.map((candidate) => {
+        return buildElementDescriptor({
+          element: candidate.element,
+          clickPosition: getElementAnchor({
+            element: candidate.element,
+            selectionRect
+          })
+        });
+      });
+      interactionSessionRef.current = {
+        type: "area",
+        pageRect,
+        items
+      };
+      showSelectionFrames({
+        frames: selectedCandidates.map((candidate) => ({
+          variant: "area",
+          pageRect: {
+            x: candidate.pageRect.x,
+            y: candidate.pageRect.y,
+            width: candidate.pageRect.width,
+            height: candidate.pageRect.height
+          }
+        }))
+      });
+      void Promise.all(items.map(maybeSymbolicate)).then(
+        (symbolicatedItems) => {
+          getWebsiteBuilderRpc()?.areaSelected({
+            rect: selectionRect,
+            items: symbolicatedItems
+          });
+        }
+      );
+    };
+    const handleClick = (event) => {
+      if (editingElementRef?.current && event.target instanceof Node && editingElementRef.current.contains(event.target)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    const handlePointerCancel = () => {
+      resetDragState();
+    };
+    const handleWindowBlur = () => {
+      resetDragState();
+    };
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    document.addEventListener("pointermove", handlePointerMove, true);
+    document.addEventListener("pointerup", handlePointerUp, true);
+    document.addEventListener("pointercancel", handlePointerCancel, true);
+    document.addEventListener("click", handleClick, true);
+    document.addEventListener("scroll", handleViewportChangeDuringDrag, true);
+    window.addEventListener("blur", handleWindowBlur);
+    window.addEventListener("resize", handleViewportChangeDuringDrag);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+      document.removeEventListener("pointermove", handlePointerMove, true);
+      document.removeEventListener("pointerup", handlePointerUp, true);
+      document.removeEventListener("pointercancel", handlePointerCancel, true);
+      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener(
+        "scroll",
+        handleViewportChangeDuringDrag,
+        true
+      );
+      window.removeEventListener("blur", handleWindowBlur);
+      window.removeEventListener("resize", handleViewportChangeDuringDrag);
+      resetDragState();
+    };
+  }, [displayMode, editingElementRef, interactionSessionRef, onBeginEditing]);
+}
+export {
+  useSelectionInteractions
+};
+//# sourceMappingURL=useSelectionInteractions.js.map

package/select-mode/hooks/useSelectionInteractions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../select-mode/hooks/useSelectionInteractions.ts"],
+  "sourcesContent": ["import type { MutableRefObject } from \"react\";\nimport type {\n  DisplayMode,\n  SelectableData,\n  SelectModeClickPosition,\n} from \"schemas/generated/selectMode\";\nimport type { DragCandidate } from \"../interactions/selectionGeometry\";\nimport type { SelectModeInteractionSession } from \"../selectModeSession\";\n\nimport { useEffect } from \"react\";\n\nimport {\n  buildElementDescriptor,\n  getNearestSelectableElement,\n} from \"../descriptor/elementDescriptor\";\nimport { getWebsiteBuilderRpc } from \"../iframeRpcChannel\";\nimport {\n  collectDragCandidates,\n  getCandidatesInSelection,\n  getDocumentScrollOffset,\n  getDragPositionFromClient,\n  getElementAnchor,\n  getPageRectFromViewportRect,\n  getViewportRectFromPageRect,\n  getViewportSelectionRect,\n} from \"../interactions/selectionGeometry\";\nimport { showSelectionFrame, showSelectionFrames } from \"../selectionFrame\";\nimport { IDLE_SESSION } from \"../selectModeSession\";\nimport { symbolicateSelectedElement } from \"../symbolicate\";\nimport { isTextEditableElement } from \"./useEditModeStateMachine\";\nimport { getSourceLocationSiblingSelectors } from \"./useSiblingResolution\";\n\nconst DOUBLE_CLICK_THRESHOLD_MS = 500;\n\n// React fibers carry only Turbopack chunk paths; resolving them to the\n// user's source file is async and only meaningful for \"react-element\"\n// kinds. Plan selectables already point at the right thing.\nasync function maybeSymbolicate(data: SelectableData): Promise<SelectableData> {\n  return data.kind === \"react-element\"\n    ? symbolicateSelectedElement(data)\n    : data;\n}\n\n/**\n * Owns the iframe-side pointer interactions that drive selection:\n *\n *  - On `pointerdown` we open a `drag` session (storing both client + page\n *    coords plus the current scroll offset). We don't yet know if this will\n *    become a click or an actual drag.\n *  - On `pointermove` we update the drag rect and post `DRAG_RECT_UPDATED`\n *    to the parent so the live drag rectangle can render. We only flip\n *    `hasExceededThreshold` once the rect grows past 6\u00D76 px so that a tiny\n *    accidental drag still resolves as a click.\n *  - On `pointerup` we either:\n *      - resolve as an `ELEMENT_SELECTED` (single click / sub-threshold drag)\n *      - resolve as an `AREA_SELECTED` (drag past threshold), filtering the\n *        candidates snapshotted at drag start against the final rectangle to\n *        enumerate which descendants the user enclosed.\n *  - During an active drag a `requestAnimationFrame` loop keeps the rect in\n *    sync with the page scroll so the rectangle visually \"sticks\" to the\n *    page rather than the viewport.\n *\n * We capture-listen and `preventDefault`/`stopPropagation` clicks so the\n * underlying page can't navigate or trigger handlers while the user is\n * working in selection mode.\n *\n * @author Kevin O'Connell 2026-04-17\n */\nexport function useSelectionInteractions({\n  displayMode,\n  editingElementRef,\n  interactionSessionRef,\n  onBeginEditing,\n}: {\n  displayMode: DisplayMode;\n  editingElementRef?: MutableRefObject<HTMLElement | null>;\n  interactionSessionRef: MutableRefObject<SelectModeInteractionSession>;\n  onBeginEditing: (args: {\n    element: Element;\n    descriptorPromise: Promise<SelectableData>;\n  }) => void;\n}) {\n  // eslint-disable-next-line replo/no-use-effect -- Legacy effect - may or may not be necessary\n  useEffect(() => {\n    if (displayMode !== \"selection\") {\n      return;\n    }\n\n    let dragAnimationFrameId: number | null = null;\n    let lastClick: {\n      descriptorPromise: Promise<SelectableData>;\n      target: Element;\n      time: number;\n    } | null = null;\n    // Snapshot of the page's meaningful elements + their page rects, taken\n    // once when a drag begins so per-move hit-testing avoids a full-DOM scan.\n    let dragCandidates: DragCandidate[] = [];\n\n    const stopDragAnimation = () => {\n      if (dragAnimationFrameId === null) {\n        return;\n      }\n\n      cancelAnimationFrame(dragAnimationFrameId);\n      dragAnimationFrameId = null;\n    };\n\n    // `notifyParentDragCleared` posts a null drag rect so the parent tears\n    // down the live drag overlay. The area-commit path suppresses it: the\n    // parent maps a null drag rect to `selection = none`, which round-trips\n    // back as `setSelectionType(\"none\")` and wipes the in-iframe frames we're\n    // about to paint. The follow-up `areaSelected` supersedes the drag overlay\n    // on its own, so the null post is pure collateral damage there.\n    const resetDragState = ({\n      notifyParentDragCleared = true,\n    }: { notifyParentDragCleared?: boolean } = {}) => {\n      const currentSession = interactionSessionRef.current;\n\n      stopDragAnimation();\n\n      if (currentSession.type !== \"drag\") {\n        dragCandidates = [];\n        return;\n      }\n\n      if (notifyParentDragCleared && currentSession.hasExceededThreshold) {\n        getWebsiteBuilderRpc()?.dragRectUpdated({\n          dragRect: null,\n          selectionRects: [],\n        });\n      }\n\n      dragCandidates = [];\n      interactionSessionRef.current = IDLE_SESSION;\n    };\n\n    const postCurrentDragRect = () => {\n      const session = interactionSessionRef.current;\n      if (session.type !== \"drag\") {\n        return;\n      }\n\n      const rect = getViewportSelectionRect({\n        dragStart: session.dragStart,\n        dragCurrent: session.dragCurrent,\n        scrollOffset: session.scrollOffset,\n      });\n\n      if (\n        rect.width <= 6 &&\n        rect.height <= 6 &&\n        !session.hasExceededThreshold\n      ) {\n        return;\n      }\n\n      if (!session.hasExceededThreshold) {\n        interactionSessionRef.current = {\n          ...session,\n          hasExceededThreshold: true,\n        };\n      }\n\n      // Cheap hit-test against the candidates we snapshotted at drag start,\n      // projected back to viewport coords so the parent can paint a live\n      // highlight on each element the drag will capture. No DOM scan here.\n      const selectionPageRect = getPageRectFromViewportRect({\n        rect,\n        scrollOffset: session.scrollOffset,\n      });\n      const selectionRects = getCandidatesInSelection({\n        candidates: dragCandidates,\n        selectionPageRect,\n      }).map((candidate) => ({\n        id: candidate.id,\n        rect: getViewportRectFromPageRect({\n          rect: candidate.pageRect,\n          scrollOffset: session.scrollOffset,\n        }),\n      }));\n\n      getWebsiteBuilderRpc()?.dragRectUpdated({\n        dragRect: rect,\n        selectionRects,\n      });\n    };\n\n    const syncDragRectToViewport = () => {\n      const session = interactionSessionRef.current;\n      if (session.type !== \"drag\") {\n        dragAnimationFrameId = null;\n        return;\n      }\n\n      const nextScrollOffset = getDocumentScrollOffset();\n      const nextDragCurrent = getDragPositionFromClient({\n        clientX: session.dragCurrent.clientX,\n        clientY: session.dragCurrent.clientY,\n        scrollOffset: nextScrollOffset,\n      });\n\n      if (\n        nextDragCurrent.pageX !== session.dragCurrent.pageX ||\n        nextDragCurrent.pageY !== session.dragCurrent.pageY\n      ) {\n        interactionSessionRef.current = {\n          ...session,\n          dragCurrent: nextDragCurrent,\n          scrollOffset: nextScrollOffset,\n        };\n        postCurrentDragRect();\n      } else {\n        interactionSessionRef.current = {\n          ...session,\n          scrollOffset: nextScrollOffset,\n        };\n      }\n\n      dragAnimationFrameId = requestAnimationFrame(syncDragRectToViewport);\n    };\n\n    const handlePointerDown = (event: PointerEvent) => {\n      if (\n        editingElementRef?.current &&\n        event.target instanceof Node &&\n        editingElementRef.current.contains(event.target)\n      ) {\n        return;\n      }\n      event.preventDefault();\n      event.stopPropagation();\n\n      const scrollOffset = getDocumentScrollOffset();\n      const dragStart = getDragPositionFromClient({\n        clientX: event.clientX,\n        clientY: event.clientY,\n        scrollOffset,\n      });\n      interactionSessionRef.current = {\n        type: \"drag\",\n        dragStart,\n        dragCurrent: dragStart,\n        scrollOffset,\n        hasExceededThreshold: false,\n      };\n      dragCandidates = collectDragCandidates(scrollOffset);\n\n      if (dragAnimationFrameId === null) {\n        dragAnimationFrameId = requestAnimationFrame(syncDragRectToViewport);\n      }\n    };\n\n    const handlePointerMove = (event: PointerEvent) => {\n      const session = interactionSessionRef.current;\n      if (session.type !== \"drag\") {\n        return;\n      }\n\n      interactionSessionRef.current = {\n        ...session,\n        dragCurrent: getDragPositionFromClient({\n          clientX: event.clientX,\n          clientY: event.clientY,\n          scrollOffset: getDocumentScrollOffset(),\n        }),\n      };\n      postCurrentDragRect();\n    };\n\n    const handleViewportChangeDuringDrag = () => {\n      const session = interactionSessionRef.current;\n      if (session.type !== \"drag\" || dragAnimationFrameId !== null) {\n        return;\n      }\n\n      dragAnimationFrameId = requestAnimationFrame(syncDragRectToViewport);\n    };\n\n    const commitElementSelection = ({\n      targetElement,\n      pointerEvent,\n    }: {\n      targetElement: Element;\n      pointerEvent: PointerEvent;\n    }) => {\n      const selectionElement = getNearestSelectableElement(targetElement);\n      const targetRect = selectionElement.getBoundingClientRect();\n      const clickPosition: SelectModeClickPosition = {\n        x: pointerEvent.clientX,\n        y: pointerEvent.clientY,\n      };\n\n      // Paint the in-iframe selection frame synchronously for instant\n      // feedback \u2014 symbolicate is a network roundtrip and we don't want\n      // the visual selection to wait on it.\n      const scrollOffset = getDocumentScrollOffset();\n      showSelectionFrame({\n        variant: \"element\",\n        pageRect: {\n          x: targetRect.left + scrollOffset.left,\n          y: targetRect.top + scrollOffset.top,\n          width: targetRect.width,\n          height: targetRect.height,\n        },\n      });\n\n      const now = pointerEvent.timeStamp;\n      const previousClick = lastClick;\n      if (\n        previousClick &&\n        previousClick.target === selectionElement &&\n        now - previousClick.time <= DOUBLE_CLICK_THRESHOLD_MS &&\n        isTextEditableElement(selectionElement)\n      ) {\n        lastClick = null;\n        onBeginEditing({\n          element: selectionElement,\n          descriptorPromise: previousClick.descriptorPromise,\n        });\n        return;\n      }\n\n      // NOTE (Noah, 2026-07-24): Commit the selection immediately rather than\n      // deferring it behind the double-click window. A single click always\n      // selects, and a double-click is just \"select + edit\", so there's nothing\n      // to suppress \u2014 waiting only added a full DOUBLE_CLICK_THRESHOLD_MS of\n      // latency to every click and left `interactionSessionRef` non-element in\n      // the gap. Double-click is still detected via the `lastClick` timestamp\n      // above; the follow-up click reuses this descriptor to open the editor.\n      const data = buildElementDescriptor({\n        element: selectionElement,\n        clickPosition,\n        siblingSelectors:\n          selectionElement instanceof HTMLElement\n            ? getSourceLocationSiblingSelectors({ element: selectionElement })\n            : [],\n      });\n      lastClick = {\n        descriptorPromise: Promise.resolve(data),\n        target: selectionElement,\n        time: now,\n      };\n\n      if (!selectionElement.isConnected) {\n        return;\n      }\n      interactionSessionRef.current = {\n        type: \"element\",\n        element: selectionElement,\n        clickPosition: {\n          x: pointerEvent.clientX - targetRect.left,\n          y: pointerEvent.clientY - targetRect.top,\n        },\n        data,\n      };\n      void maybeSymbolicate(data).then((symbolicated) => {\n        getWebsiteBuilderRpc()?.elementSelected({ data: symbolicated });\n      });\n    };\n\n    const handlePointerUp = (event: PointerEvent) => {\n      // Clicks inside the element being edited belong to the inline editor, not\n      // select mode. Without this guard the double-click detection below re-runs\n      // `onBeginEditing` on the same element (e.g. when repositioning the\n      // caret), rebuilding the editor over itself and wiping the content.\n      // Mirrors the guards in `handlePointerDown` and `handleClick`.\n      if (\n        editingElementRef?.current &&\n        event.target instanceof Node &&\n        editingElementRef.current.contains(event.target)\n      ) {\n        return;\n      }\n      const snapshot = interactionSessionRef.current;\n      const wasDragging =\n        snapshot.type === \"drag\" ? snapshot.hasExceededThreshold : false;\n      const dragStart = snapshot.type === \"drag\" ? snapshot.dragStart : null;\n      const dragCurrent =\n        snapshot.type === \"drag\" ? snapshot.dragCurrent : null;\n      const scrollOffset =\n        snapshot.type === \"drag\"\n          ? snapshot.scrollOffset\n          : getDocumentScrollOffset();\n      // `resetDragState` clears `dragCandidates`, so grab them first \u2014 the\n      // final committed set is the same cached candidates the live preview\n      // used, so preview and result never disagree.\n      const candidates = dragCandidates;\n\n      // Suppress the null drag-rect post: if this resolves to an area\n      // selection it would otherwise flash the parent to `selection = none`\n      // and wipe the frames we paint below. Click/empty-drag paths don't\n      // depend on it (a sub-threshold drag never posted a rect to clear).\n      resetDragState({ notifyParentDragCleared: false });\n\n      if (!dragStart || snapshot.type !== \"drag\") {\n        const targetElement = event.target;\n        if (!(targetElement instanceof Element)) {\n          return;\n        }\n\n        commitElementSelection({\n          targetElement,\n          pointerEvent: event,\n        });\n        return;\n      }\n\n      const resolvedDragCurrent = dragCurrent ?? dragStart;\n      const selectionRect = getViewportSelectionRect({\n        dragStart,\n        dragCurrent: resolvedDragCurrent,\n        scrollOffset,\n      });\n\n      if (!wasDragging) {\n        const targetElement = event.target;\n        if (!(targetElement instanceof Element)) {\n          return;\n        }\n\n        commitElementSelection({\n          targetElement,\n          pointerEvent: event,\n        });\n        return;\n      }\n\n      const pageRect = getPageRectFromViewportRect({\n        rect: selectionRect,\n        scrollOffset,\n      });\n\n      const selectedCandidates = getCandidatesInSelection({\n        candidates,\n        selectionPageRect: pageRect,\n      });\n      const items = selectedCandidates.map((candidate) => {\n        return buildElementDescriptor({\n          element: candidate.element,\n          clickPosition: getElementAnchor({\n            element: candidate.element,\n            selectionRect,\n          }),\n        });\n      });\n\n      interactionSessionRef.current = {\n        type: \"area\",\n        pageRect,\n        items,\n      };\n\n      // Highlight each captured element so the committed area selection\n      // \"sticks\" inside the iframe \u2014 matching how a single click stays\n      // outlined \u2014 rather than drawing one faint box over the drag region.\n      showSelectionFrames({\n        frames: selectedCandidates.map((candidate) => ({\n          variant: \"area\" as const,\n          pageRect: {\n            x: candidate.pageRect.x,\n            y: candidate.pageRect.y,\n            width: candidate.pageRect.width,\n            height: candidate.pageRect.height,\n          },\n        })),\n      });\n\n      void Promise.all(items.map(maybeSymbolicate)).then(\n        (symbolicatedItems) => {\n          getWebsiteBuilderRpc()?.areaSelected({\n            rect: selectionRect,\n            items: symbolicatedItems,\n          });\n        },\n      );\n    };\n\n    const handleClick = (event: MouseEvent) => {\n      if (\n        editingElementRef?.current &&\n        event.target instanceof Node &&\n        editingElementRef.current.contains(event.target)\n      ) {\n        return;\n      }\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    const handlePointerCancel = () => {\n      resetDragState();\n    };\n\n    const handleWindowBlur = () => {\n      resetDragState();\n    };\n\n    document.addEventListener(\"pointerdown\", handlePointerDown, true);\n    document.addEventListener(\"pointermove\", handlePointerMove, true);\n    document.addEventListener(\"pointerup\", handlePointerUp, true);\n    document.addEventListener(\"pointercancel\", handlePointerCancel, true);\n    document.addEventListener(\"click\", handleClick, true);\n    document.addEventListener(\"scroll\", handleViewportChangeDuringDrag, true);\n    window.addEventListener(\"blur\", handleWindowBlur);\n    window.addEventListener(\"resize\", handleViewportChangeDuringDrag);\n\n    return () => {\n      document.removeEventListener(\"pointerdown\", handlePointerDown, true);\n      document.removeEventListener(\"pointermove\", handlePointerMove, true);\n      document.removeEventListener(\"pointerup\", handlePointerUp, true);\n      document.removeEventListener(\"pointercancel\", handlePointerCancel, true);\n      document.removeEventListener(\"click\", handleClick, true);\n      document.removeEventListener(\n        \"scroll\",\n        handleViewportChangeDuringDrag,\n        true,\n      );\n      window.removeEventListener(\"blur\", handleWindowBlur);\n      window.removeEventListener(\"resize\", handleViewportChangeDuringDrag);\n      resetDragState();\n    };\n  }, [displayMode, editingElementRef, interactionSessionRef, onBeginEditing]);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,28 @@
+import type { MutableRefObject } from "react";
+import type { DisplayMode } from "../../_vendor/schemas/generated/selectMode";
+import type { SelectModeInteractionSession } from "../selectModeSession";
+/**
+ * After a selection (element or area) has been resolved, the parent's
+ * highlight overlay is positioned in viewport coordinates. When the user
+ * scrolls the iframe document the highlight would otherwise lag behind the
+ * underlying element. This hook re-sends an updated rect on every scroll
+ * (rAF-coalesced) so the parent overlay tracks the element/area through
+ * scrolls without us having to mirror scroll state into the parent.
+ *
+ *  - For an `element` session we send only `{ boundingRect, clickPosition }`
+ *    — the rest of the descriptor (selector, outerHTML, computed styles,
+ *    text metrics, source location) was captured at selection-commit time
+ *    and doesn't change while the user is just scrolling. Rebuilding the
+ *    full descriptor here used to call `serializeStyledElement` (recursive
+ *    `getComputedStyle` walk) on every scroll frame; this keeps the hot
+ *    path to a single `getBoundingClientRect` read.
+ *  - For an `area` session we keep the original *page* rect (which doesn't
+ *    move) and convert it to viewport coordinates using the latest scroll
+ *    offset before sending.
+ *
+ * @author Kevin O'Connell 2026-04-17
+ */
+export declare function useSelectionScrollSync({ displayMode, interactionSessionRef, }: {
+    displayMode: DisplayMode;
+    interactionSessionRef: MutableRefObject<SelectModeInteractionSession>;
+}): void;

package/select-mode/hooks/useSelectionScrollSync.js

@@ -0,0 +1,70 @@
+import { useEffect } from "react";
+import { getWebsiteBuilderRpc } from "../iframeRpcChannel";
+import {
+  getDocumentScrollOffset,
+  getElementBoundingRect,
+  getViewportRectFromPageRect
+} from "../interactions/selectionGeometry";
+import { showSelectionFrame } from "../selectionFrame";
+function useSelectionScrollSync({
+  displayMode,
+  interactionSessionRef
+}) {
+  useEffect(() => {
+    if (displayMode !== "selection") {
+      return;
+    }
+    let animationFrameId = null;
+    const handleScroll = () => {
+      if (animationFrameId !== null) {
+        return;
+      }
+      animationFrameId = requestAnimationFrame(() => {
+        animationFrameId = null;
+        const session = interactionSessionRef.current;
+        if (session.type === "element") {
+          const boundingRect = getElementBoundingRect(session.element);
+          const sessionClickPosition = session.clickPosition;
+          const clickPosition = {
+            x: sessionClickPosition !== null ? boundingRect.left + sessionClickPosition.x : boundingRect.right,
+            y: sessionClickPosition !== null ? boundingRect.top + sessionClickPosition.y : boundingRect.bottom
+          };
+          const scrollOffset = getDocumentScrollOffset();
+          showSelectionFrame({
+            variant: "element",
+            pageRect: {
+              x: boundingRect.left + scrollOffset.left,
+              y: boundingRect.top + scrollOffset.top,
+              width: boundingRect.width,
+              height: boundingRect.height
+            }
+          });
+          getWebsiteBuilderRpc()?.selectedElementRectUpdate({
+            rect: boundingRect,
+            clickPosition
+          });
+          return;
+        }
+        if (session.type === "area") {
+          getWebsiteBuilderRpc()?.selectedAreaRectUpdate({
+            rect: getViewportRectFromPageRect({
+              rect: session.pageRect,
+              scrollOffset: getDocumentScrollOffset()
+            })
+          });
+        }
+      });
+    };
+    document.addEventListener("scroll", handleScroll, true);
+    return () => {
+      document.removeEventListener("scroll", handleScroll, true);
+      if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId);
+      }
+    };
+  }, [displayMode, interactionSessionRef]);
+}
+export {
+  useSelectionScrollSync
+};
+//# sourceMappingURL=useSelectionScrollSync.js.map

package/select-mode/hooks/useSelectionScrollSync.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../select-mode/hooks/useSelectionScrollSync.ts"],
+  "sourcesContent": ["import type { MutableRefObject } from \"react\";\nimport type { DisplayMode } from \"schemas/generated/selectMode\";\nimport type { SelectModeInteractionSession } from \"../selectModeSession\";\n\nimport { useEffect } from \"react\";\n\nimport { getWebsiteBuilderRpc } from \"../iframeRpcChannel\";\nimport {\n  getDocumentScrollOffset,\n  getElementBoundingRect,\n  getViewportRectFromPageRect,\n} from \"../interactions/selectionGeometry\";\nimport { showSelectionFrame } from \"../selectionFrame\";\n\n/**\n * After a selection (element or area) has been resolved, the parent's\n * highlight overlay is positioned in viewport coordinates. When the user\n * scrolls the iframe document the highlight would otherwise lag behind the\n * underlying element. This hook re-sends an updated rect on every scroll\n * (rAF-coalesced) so the parent overlay tracks the element/area through\n * scrolls without us having to mirror scroll state into the parent.\n *\n *  - For an `element` session we send only `{ boundingRect, clickPosition }`\n *    \u2014 the rest of the descriptor (selector, outerHTML, computed styles,\n *    text metrics, source location) was captured at selection-commit time\n *    and doesn't change while the user is just scrolling. Rebuilding the\n *    full descriptor here used to call `serializeStyledElement` (recursive\n *    `getComputedStyle` walk) on every scroll frame; this keeps the hot\n *    path to a single `getBoundingClientRect` read.\n *  - For an `area` session we keep the original *page* rect (which doesn't\n *    move) and convert it to viewport coordinates using the latest scroll\n *    offset before sending.\n *\n * @author Kevin O'Connell 2026-04-17\n */\nexport function useSelectionScrollSync({\n  displayMode,\n  interactionSessionRef,\n}: {\n  displayMode: DisplayMode;\n  interactionSessionRef: MutableRefObject<SelectModeInteractionSession>;\n}) {\n  // eslint-disable-next-line replo/no-use-effect -- Legacy effect - may or may not be necessary\n  useEffect(() => {\n    if (displayMode !== \"selection\") {\n      return;\n    }\n\n    let animationFrameId: number | null = null;\n\n    const handleScroll = () => {\n      if (animationFrameId !== null) {\n        return;\n      }\n\n      animationFrameId = requestAnimationFrame(() => {\n        animationFrameId = null;\n\n        const session = interactionSessionRef.current;\n        if (session.type === \"element\") {\n          const boundingRect = getElementBoundingRect(session.element);\n          const sessionClickPosition = session.clickPosition;\n          const clickPosition = {\n            x:\n              sessionClickPosition !== null\n                ? boundingRect.left + sessionClickPosition.x\n                : boundingRect.right,\n            y:\n              sessionClickPosition !== null\n                ? boundingRect.top + sessionClickPosition.y\n                : boundingRect.bottom,\n          };\n          // Page coordinates of the in-iframe frame are stable across\n          // pure scroll, but layout shifts during scroll (sticky\n          // headers expanding, lazy images settling, etc.) can move the\n          // selected element. Re-applying every rAF tick keeps the\n          // frame glued; same-value style writes are cheap and don't\n          // repaint.\n          const scrollOffset = getDocumentScrollOffset();\n          showSelectionFrame({\n            variant: \"element\",\n            pageRect: {\n              x: boundingRect.left + scrollOffset.left,\n              y: boundingRect.top + scrollOffset.top,\n              width: boundingRect.width,\n              height: boundingRect.height,\n            },\n          });\n          getWebsiteBuilderRpc()?.selectedElementRectUpdate({\n            rect: boundingRect,\n            clickPosition,\n          });\n          return;\n        }\n\n        if (session.type === \"area\") {\n          getWebsiteBuilderRpc()?.selectedAreaRectUpdate({\n            rect: getViewportRectFromPageRect({\n              rect: session.pageRect,\n              scrollOffset: getDocumentScrollOffset(),\n            }),\n          });\n        }\n      });\n    };\n\n    document.addEventListener(\"scroll\", handleScroll, true);\n    return () => {\n      document.removeEventListener(\"scroll\", handleScroll, true);\n      if (animationFrameId !== null) {\n        cancelAnimationFrame(animationFrameId);\n      }\n    };\n  }, [displayMode, interactionSessionRef]);\n}\n"],
+  "mappings": "AAIA,SAAS,iBAAiB;AAE1B,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AAuB5B,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AACF,GAGG;AAED,YAAU,MAAM;AACd,QAAI,gBAAgB,aAAa;AAC/B;AAAA,IACF;AAEA,QAAI,mBAAkC;AAEtC,UAAM,eAAe,MAAM;AACzB,UAAI,qBAAqB,MAAM;AAC7B;AAAA,MACF;AAEA,yBAAmB,sBAAsB,MAAM;AAC7C,2BAAmB;AAEnB,cAAM,UAAU,sBAAsB;AACtC,YAAI,QAAQ,SAAS,WAAW;AAC9B,gBAAM,eAAe,uBAAuB,QAAQ,OAAO;AAC3D,gBAAM,uBAAuB,QAAQ;AACrC,gBAAM,gBAAgB;AAAA,YACpB,GACE,yBAAyB,OACrB,aAAa,OAAO,qBAAqB,IACzC,aAAa;AAAA,YACnB,GACE,yBAAyB,OACrB,aAAa,MAAM,qBAAqB,IACxC,aAAa;AAAA,UACrB;AAOA,gBAAM,eAAe,wBAAwB;AAC7C,6BAAmB;AAAA,YACjB,SAAS;AAAA,YACT,UAAU;AAAA,cACR,GAAG,aAAa,OAAO,aAAa;AAAA,cACpC,GAAG,aAAa,MAAM,aAAa;AAAA,cACnC,OAAO,aAAa;AAAA,cACpB,QAAQ,aAAa;AAAA,YACvB;AAAA,UACF,CAAC;AACD,+BAAqB,GAAG,0BAA0B;AAAA,YAChD,MAAM;AAAA,YACN;AAAA,UACF,CAAC;AACD;AAAA,QACF;AAEA,YAAI,QAAQ,SAAS,QAAQ;AAC3B,+BAAqB,GAAG,uBAAuB;AAAA,YAC7C,MAAM,4BAA4B;AAAA,cAChC,MAAM,QAAQ;AAAA,cACd,cAAc,wBAAwB;AAAA,YACxC,CAAC;AAAA,UACH,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAEA,aAAS,iBAAiB,UAAU,cAAc,IAAI;AACtD,WAAO,MAAM;AACX,eAAS,oBAAoB,UAAU,cAAc,IAAI;AACzD,UAAI,qBAAqB,MAAM;AAC7B,6BAAqB,gBAAgB;AAAA,MACvC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,aAAa,qBAAqB,CAAC;AACzC;",
+  "names": []
+}

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

@@ -0,0 +1,6 @@
+export declare function getSourceLocationSiblingElements({ element, }: {
+    element: Element;
+}): HTMLElement[];
+export declare function getSourceLocationSiblingSelectors({ element, }: {
+    element: Element;
+}): string[];

package/select-mode/hooks/useSiblingResolution.js

@@ -0,0 +1,59 @@
+import { buildSelector } from "../descriptor/elementDescriptor";
+import { getHostSourceIdentity } from "../fiber";
+const sourceIdentityCache = /* @__PURE__ */ new WeakMap();
+function getSourceIdentityKey(element) {
+  const cached = sourceIdentityCache.get(element);
+  if (cached !== void 0) {
+    return cached;
+  }
+  const identity = getHostSourceIdentity(element);
+  if (!identity) {
+    sourceIdentityCache.set(element, null);
+    return null;
+  }
+  const key = [
+    identity.filePath,
+    identity.lineNumber,
+    identity.columnNumber ?? "",
+    identity.tagName
+  ].join(":");
+  sourceIdentityCache.set(element, key);
+  return key;
+}
+function getSourceLocationSiblingElements({
+  element
+}) {
+  if (!(element instanceof HTMLElement) || !document.body) {
+    return [];
+  }
+  const selectedLocationKey = getSourceIdentityKey(element);
+  if (!selectedLocationKey) {
+    return [];
+  }
+  const siblings = [];
+  const treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT
+  );
+  let currentNode = treeWalker.nextNode();
+  while (currentNode) {
+    if (currentNode instanceof HTMLElement && currentNode !== element) {
+      const currentLocationKey = getSourceIdentityKey(currentNode);
+      if (currentLocationKey === selectedLocationKey) {
+        siblings.push(currentNode);
+      }
+    }
+    currentNode = treeWalker.nextNode();
+  }
+  return siblings;
+}
+function getSourceLocationSiblingSelectors({
+  element
+}) {
+  return getSourceLocationSiblingElements({ element }).map(buildSelector);
+}
+export {
+  getSourceLocationSiblingElements,
+  getSourceLocationSiblingSelectors
+};
+//# sourceMappingURL=useSiblingResolution.js.map

package/select-mode/hooks/useSiblingResolution.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../select-mode/hooks/useSiblingResolution.ts"],
+  "sourcesContent": ["import { buildSelector } from \"../descriptor/elementDescriptor\";\nimport { getHostSourceIdentity } from \"../fiber\";\n\nconst sourceIdentityCache = new WeakMap<HTMLElement, string | null>();\n\nfunction getSourceIdentityKey(element: HTMLElement): string | null {\n  const cached = sourceIdentityCache.get(element);\n  if (cached !== undefined) {\n    return cached;\n  }\n  const identity = getHostSourceIdentity(element);\n  if (!identity) {\n    sourceIdentityCache.set(element, null);\n    return null;\n  }\n  const key = [\n    identity.filePath,\n    identity.lineNumber,\n    identity.columnNumber ?? \"\",\n    identity.tagName,\n  ].join(\":\");\n  sourceIdentityCache.set(element, key);\n  return key;\n}\n\nexport function getSourceLocationSiblingElements({\n  element,\n}: {\n  element: Element;\n}): HTMLElement[] {\n  if (!(element instanceof HTMLElement) || !document.body) {\n    return [];\n  }\n\n  const selectedLocationKey = getSourceIdentityKey(element);\n  if (!selectedLocationKey) {\n    return [];\n  }\n\n  const siblings: HTMLElement[] = [];\n  const treeWalker = document.createTreeWalker(\n    document.body,\n    NodeFilter.SHOW_ELEMENT,\n  );\n\n  let currentNode = treeWalker.nextNode();\n  while (currentNode) {\n    if (currentNode instanceof HTMLElement && currentNode !== element) {\n      const currentLocationKey = getSourceIdentityKey(currentNode);\n      if (currentLocationKey === selectedLocationKey) {\n        siblings.push(currentNode);\n      }\n    }\n    currentNode = treeWalker.nextNode();\n  }\n\n  return siblings;\n}\n\nexport function getSourceLocationSiblingSelectors({\n  element,\n}: {\n  element: Element;\n}): string[] {\n  return getSourceLocationSiblingElements({ element }).map(buildSelector);\n}\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AAEtC,MAAM,sBAAsB,oBAAI,QAAoC;AAEpE,SAAS,qBAAqB,SAAqC;AACjE,QAAM,SAAS,oBAAoB,IAAI,OAAO;AAC9C,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,EACT;AACA,QAAM,WAAW,sBAAsB,OAAO;AAC9C,MAAI,CAAC,UAAU;AACb,wBAAoB,IAAI,SAAS,IAAI;AACrC,WAAO;AAAA,EACT;AACA,QAAM,MAAM;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS,gBAAgB;AAAA,IACzB,SAAS;AAAA,EACX,EAAE,KAAK,GAAG;AACV,sBAAoB,IAAI,SAAS,GAAG;AACpC,SAAO;AACT;AAEO,SAAS,iCAAiC;AAAA,EAC/C;AACF,GAEkB;AAChB,MAAI,EAAE,mBAAmB,gBAAgB,CAAC,SAAS,MAAM;AACvD,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,sBAAsB,qBAAqB,OAAO;AACxD,MAAI,CAAC,qBAAqB;AACxB,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,WAA0B,CAAC;AACjC,QAAM,aAAa,SAAS;AAAA,IAC1B,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAEA,MAAI,cAAc,WAAW,SAAS;AACtC,SAAO,aAAa;AAClB,QAAI,uBAAuB,eAAe,gBAAgB,SAAS;AACjE,YAAM,qBAAqB,qBAAqB,WAAW;AAC3D,UAAI,uBAAuB,qBAAqB;AAC9C,iBAAS,KAAK,WAAW;AAAA,MAC3B;AAAA,IACF;AACA,kBAAc,WAAW,SAAS;AAAA,EACpC;AAEA,SAAO;AACT;AAEO,SAAS,kCAAkC;AAAA,EAChD;AACF,GAEa;AACX,SAAO,iCAAiC,EAAE,QAAQ,CAAC,EAAE,IAAI,aAAa;AACxE;",
+  "names": []
+}