@replohq/sandbox-runtime 1.7.10 → 1.7.11

package/select-mode/displayModeStore.js

@@ -1,45 +1,26 @@
 "use client";
-import { useSyncExternalStore } from "react";
-const listeners = /* @__PURE__ */ new Set();
-let displayMode = "browse";
-const SERVER_SNAPSHOT = "browse";
-function notify() {
-  for (const listener of listeners) {
-    listener();
-  }
-}
+import { selectModeStore } from "./selectModeStore";
 const displayModeStore = {
   getSnapshot() {
-    return displayMode;
+    return selectModeStore.getState().displayMode;
   },
   getServerSnapshot() {
-    return SERVER_SNAPSHOT;
+    return "browse";
   },
   subscribe(listener) {
-    listeners.add(listener);
-    return () => {
-      listeners.delete(listener);
-    };
+    return selectModeStore.subscribe((state, previous) => {
+      if (state.displayMode !== previous.displayMode) {
+        listener();
+      }
+    });
   },
   setDisplayMode(nextDisplayMode) {
-    if (nextDisplayMode === displayMode) {
-      return;
-    }
-    displayMode = nextDisplayMode;
-    notify();
+    selectModeStore.getState().actions.setDisplayMode(nextDisplayMode);
   },
   reset() {
-    displayMode = "browse";
+    selectModeStore.getState().actions.reset();
   }
 };
-function useDisplayMode() {
-  return useSyncExternalStore(
-    displayModeStore.subscribe,
-    displayModeStore.getSnapshot,
-    displayModeStore.getServerSnapshot
-  );
-}
 export {
-  displayModeStore,
-  useDisplayMode
+  displayModeStore
 };

package/select-mode/hooks/useParentMessaging.js

@@ -41,6 +41,9 @@ function useParentMessaging({
         setDisplayMode(displayMode);
       },
       setSelectionType: (input) => {
+        if (input.selectionType === "none") {
+          onExitEditMode?.();
+        }
         setSelectionType(input);
       },
       applyOptimisticUpdate: (message) => {

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

@@ -1,19 +1 @@
-import type { MutableRefObject } from "react";
-import type { DisplayMode } from "../../_vendor/schemas/generated/selectMode";
-import type { SelectModeInteractionSession } from "../selectModeSession";
-export declare function resetHoverRectDedup(): void;
-/**
- * Tracks whichever element is under the user's pointer while in `selection`
- * mode and reports its bounding rect to the parent so the parent can render
- * the hover overlay.
- *
- * Two behaviors worth knowing about:
- *  - During an active drag we suppress hover updates; the drag overlay is
- *    the only highlight we want visible.
- *  - Unchanged rectangles do not cross the iframe bridge. Viewport updates
- *    are coalesced because scroll and wheel can fire in the same frame.
- */
-export declare function useSelectionHover({ displayMode, interactionSessionRef, }: {
-    displayMode: DisplayMode;
-    interactionSessionRef: MutableRefObject<SelectModeInteractionSession>;
-}): void;
+export declare function useSelectionHover(): void;

package/select-mode/hooks/useSelectionHover.js

@@ -2,34 +2,25 @@ import { useEffect } from "react";
 import { getNearestSelectableElement } from "../descriptor/elementDescriptor";
 import { getWebsiteBuilderRpc } from "../iframeRpcChannel";
 import { getElementBoundingRect } from "../interactions/selectionGeometry";
-let activeHoverDedupReset = null;
-function resetHoverRectDedup() {
-  activeHoverDedupReset?.();
-}
-function useSelectionHover({
-  displayMode,
-  interactionSessionRef
-}) {
+import { useDisplayMode, useSelectModeStore } from "../selectModeStore";
+function useSelectionHover() {
+  const store = useSelectModeStore();
+  const displayMode = useDisplayMode();
   useEffect(() => {
     if (displayMode !== "selection") {
       return;
     }
-    let hoverSyncAnimationFrameId = null;
-    let lastPointerClientPosition = null;
-    let lastPostedRect;
-    activeHoverDedupReset = () => {
-      lastPostedRect = void 0;
-    };
     const postHoveredElement = (element) => {
+      const { lastPostedHoverRect, actions } = store.getState();
       const rect = element ? getElementBoundingRect(element) : null;
-      const isUnchanged = lastPostedRect !== void 0 && (rect === lastPostedRect || rect !== null && lastPostedRect !== null && rect.x === lastPostedRect.x && rect.y === lastPostedRect.y && rect.width === lastPostedRect.width && rect.height === lastPostedRect.height);
+      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);
       if (isUnchanged) {
         return;
       }
-      lastPostedRect = rect;
+      actions.setLastPostedHoverRect(rect);
       getWebsiteBuilderRpc()?.hoverElement({ rect });
     };
-    const syncCurrentHover = (pointerClientPosition = lastPointerClientPosition) => {
+    const syncCurrentHover = (pointerClientPosition = store.getState().lastPointerClientPosition) => {
       let hoveredElement = null;
       if (pointerClientPosition) {
         const isPointerWithinViewport = pointerClientPosition.x >= 0 && pointerClientPosition.y >= 0 && pointerClientPosition.x <= window.innerWidth && pointerClientPosition.y <= window.innerHeight;
@@ -49,79 +40,76 @@ function useSelectionHover({
       );
     };
     const scheduleHoverSync = () => {
-      if (interactionSessionRef.current.type === "drag" || hoverSyncAnimationFrameId !== null) {
+      const { interactionSession, hoverSyncAnimationFrameId, actions } = store.getState();
+      if (interactionSession.type === "drag" || hoverSyncAnimationFrameId !== null) {
         return;
       }
-      hoverSyncAnimationFrameId = requestAnimationFrame(() => {
-        hoverSyncAnimationFrameId = null;
-        syncCurrentHover();
-      });
+      actions.setHoverSyncAnimationFrameId(
+        requestAnimationFrame(() => {
+          store.getState().actions.setHoverSyncAnimationFrameId(null);
+          syncCurrentHover();
+        })
+      );
     };
     const handlePointerMove = (event) => {
-      lastPointerClientPosition = {
-        x: event.clientX,
-        y: event.clientY
-      };
-      if (interactionSessionRef.current.type === "drag") {
+      const position = { x: event.clientX, y: event.clientY };
+      store.getState().actions.setLastPointerClientPosition(position);
+      if (store.getState().interactionSession.type === "drag") {
         return;
       }
-      syncCurrentHover(lastPointerClientPosition);
+      syncCurrentHover(position);
     };
     const handlePointerOver = (event) => {
-      lastPointerClientPosition = {
-        x: event.clientX,
-        y: event.clientY
-      };
-      if (interactionSessionRef.current.type === "drag") {
+      const position = { x: event.clientX, y: event.clientY };
+      store.getState().actions.setLastPointerClientPosition(position);
+      if (store.getState().interactionSession.type === "drag") {
         return;
       }
-      syncCurrentHover(lastPointerClientPosition);
+      syncCurrentHover(position);
     };
     const handlePointerOut = (event) => {
-      if (interactionSessionRef.current.type === "drag") {
+      if (store.getState().interactionSession.type === "drag") {
         return;
       }
       const nextRelatedTarget = event.relatedTarget;
       if (nextRelatedTarget instanceof Node && document.contains(nextRelatedTarget)) {
         return;
       }
-      lastPointerClientPosition = null;
+      const { hoverSyncAnimationFrameId, actions } = store.getState();
+      actions.setLastPointerClientPosition(null);
       if (hoverSyncAnimationFrameId !== null) {
         cancelAnimationFrame(hoverSyncAnimationFrameId);
-        hoverSyncAnimationFrameId = null;
+        actions.setHoverSyncAnimationFrameId(null);
       }
       postHoveredElement(null);
     };
-    const handleViewportChange = () => {
-      scheduleHoverSync();
-    };
     syncCurrentHover();
     document.addEventListener("pointermove", handlePointerMove, true);
     document.addEventListener("pointerover", handlePointerOver, true);
     document.addEventListener("pointerout", handlePointerOut, true);
-    document.addEventListener("scroll", handleViewportChange, true);
-    document.addEventListener("wheel", handleViewportChange, {
+    document.addEventListener("scroll", scheduleHoverSync, true);
+    document.addEventListener("wheel", scheduleHoverSync, {
       capture: true,
       passive: true
     });
-    window.addEventListener("resize", handleViewportChange);
+    window.addEventListener("resize", scheduleHoverSync);
     return () => {
-      activeHoverDedupReset = null;
+      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("pointerout", handlePointerOut, true);
-      document.removeEventListener("scroll", handleViewportChange, true);
-      document.removeEventListener("wheel", handleViewportChange, {
+      document.removeEventListener("scroll", scheduleHoverSync, true);
+      document.removeEventListener("wheel", scheduleHoverSync, {
         capture: true
       });
-      window.removeEventListener("resize", handleViewportChange);
+      window.removeEventListener("resize", scheduleHoverSync);
     };
-  }, [displayMode, interactionSessionRef]);
+  }, [displayMode, store]);
 }
 export {
-  resetHoverRectDedup,
   useSelectionHover
 };

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

@@ -1,6 +1,3 @@
-import type { MutableRefObject } from "react";
-import type { DisplayMode, SelectableData } from "../../_vendor/schemas/generated/selectMode";
-import type { SelectModeInteractionSession } from "../selectModeSession";
 /**
  * Owns the iframe-side pointer interactions that drive selection:
  *
@@ -24,12 +21,4 @@ import type { SelectModeInteractionSession } from "../selectModeSession";
  * underlying page can't navigate or trigger handlers while the user is
  * working in selection mode.
  */
-export declare function useSelectionInteractions({ displayMode, editingElementRef, interactionSessionRef, onBeginEditing, }: {
-    displayMode: DisplayMode;
-    editingElementRef?: MutableRefObject<HTMLElement | null>;
-    interactionSessionRef: MutableRefObject<SelectModeInteractionSession>;
-    onBeginEditing: (args: {
-        element: Element;
-        descriptorPromise: Promise<SelectableData>;
-    }) => void;
-}): void;
+export declare function useSelectionInteractions(): void;

package/select-mode/hooks/useSelectionInteractions.js

@@ -19,18 +19,14 @@ import {
   isAdditiveSelectionClick,
   unionElementPageRects
 } from "../interactions/selectionGeometry";
-import {
-  hideSelectionFrame,
-  showAreaSelectionFrames,
-  showElementSelectionFrames
-} from "../selectionFrame";
+import { isTextEditableElement } from "../isTextEditableElement";
 import { isSelectionStillCurrent } from "../selectionPublish";
 import {
   getConnectedSelectedElement,
   IDLE_SESSION
 } from "../selectModeSession";
+import { useDisplayMode, useSelectModeStore } from "../selectModeStore";
 import { symbolicateSelectedElement } from "../symbolicate";
-import { isTextEditableElement } from "./useEditModeStateMachine";
 import { getRepetitionSiblingElements } from "./useSiblingResolution";
 const DOUBLE_CLICK_THRESHOLD_MS = 500;
 function getSelectedElementsFromSession(session) {
@@ -49,21 +45,35 @@ function getSelectedElementsFromSession(session) {
 async function maybeSymbolicate(data) {
   return data.kind === "react-element" ? symbolicateSelectedElement(data) : data;
 }
-function useSelectionInteractions({
-  displayMode,
-  editingElementRef,
-  interactionSessionRef,
-  onBeginEditing
-}) {
+function useSelectionInteractions() {
+  const selectModeStore = useSelectModeStore();
+  const displayMode = useDisplayMode();
   useEffect(() => {
     if (displayMode !== "selection") {
       return;
     }
-    let dragAnimationFrameId = null;
-    const editingPointerIds = /* @__PURE__ */ new Set();
-    let lastClick = null;
-    let dragCandidates = [];
-    let committedSelectionAtPointerDown = [];
+    const store = () => selectModeStore.getState();
+    const interactionSessionRef = {
+      get current() {
+        return store().interactionSession;
+      },
+      set current(next) {
+        store().actions.setInteractionSession(next);
+      }
+    };
+    const editingElementRef = {
+      get current() {
+        return store().editingElement;
+      }
+    };
+    const actions = () => store().actions;
+    const onBeginEditing = actions().beginEditing;
+    const hideSelectionFrame = () => {
+      actions().hideSelectionFrames();
+    };
+    const showAreaSelectionFrames = actions().showAreaSelectionFrames;
+    const showElementSelectionFrames = actions().showElementSelectionFrames;
+    const editingPointerIds = store().editingPointerIds;
     const clearCommittedSelection = ({
       rect
     }) => {
@@ -72,11 +82,12 @@ function useSelectionInteractions({
       getWebsiteBuilderRpc()?.areaSelected({ rect, items: [] });
     };
     const stopDragAnimation = () => {
+      const dragAnimationFrameId = store().dragAnimationFrameId;
       if (dragAnimationFrameId === null) {
         return;
       }
       cancelAnimationFrame(dragAnimationFrameId);
-      dragAnimationFrameId = null;
+      actions().setDragAnimationFrameId(null);
     };
     const resetDragState = ({
       notifyParentDragCleared = true
@@ -84,7 +95,7 @@ function useSelectionInteractions({
       const currentSession = interactionSessionRef.current;
       stopDragAnimation();
       if (currentSession.type !== "drag") {
-        dragCandidates = [];
+        actions().setDragCandidates([]);
         return;
       }
       if (notifyParentDragCleared && currentSession.hasExceededThreshold) {
@@ -93,7 +104,7 @@ function useSelectionInteractions({
           selectionRects: []
         });
       }
-      dragCandidates = [];
+      actions().setDragCandidates([]);
       interactionSessionRef.current = IDLE_SESSION;
     };
     const postCurrentDragRect = () => {
@@ -120,7 +131,7 @@ function useSelectionInteractions({
         scrollOffset: session.scrollOffset
       });
       const selectionRects = getCandidatesInSelection({
-        candidates: dragCandidates,
+        candidates: store().dragCandidates,
         selectionPageRect
       }).map((candidate) => ({
         id: candidate.id,
@@ -137,7 +148,7 @@ function useSelectionInteractions({
     const syncDragRectToViewport = () => {
       const session = interactionSessionRef.current;
       if (session.type !== "drag") {
-        dragAnimationFrameId = null;
+        actions().setDragAnimationFrameId(null);
         return;
       }
       const nextScrollOffset = getDocumentScrollOffset();
@@ -159,7 +170,9 @@ function useSelectionInteractions({
           scrollOffset: nextScrollOffset
         };
       }
-      dragAnimationFrameId = requestAnimationFrame(syncDragRectToViewport);
+      actions().setDragAnimationFrameId(
+        requestAnimationFrame(syncDragRectToViewport)
+      );
     };
     const handlePointerDown = (event) => {
       if (event.button !== 0) {
@@ -173,8 +186,8 @@ function useSelectionInteractions({
       event.preventDefault();
       event.stopPropagation();
       const scrollOffset = getDocumentScrollOffset();
-      committedSelectionAtPointerDown = getSelectedElementsFromSession(
-        interactionSessionRef.current
+      actions().setCommittedSelectionAtPointerDown(
+        getSelectedElementsFromSession(interactionSessionRef.current)
       );
       const dragStart = getDragPositionFromClient({
         clientX: event.clientX,
@@ -188,9 +201,11 @@ function useSelectionInteractions({
         scrollOffset,
         hasExceededThreshold: false
       };
-      dragCandidates = collectDragCandidates(scrollOffset);
-      if (dragAnimationFrameId === null) {
-        dragAnimationFrameId = requestAnimationFrame(syncDragRectToViewport);
+      actions().setDragCandidates(collectDragCandidates(scrollOffset));
+      if (store().dragAnimationFrameId === null) {
+        actions().setDragAnimationFrameId(
+          requestAnimationFrame(syncDragRectToViewport)
+        );
       }
     };
     const handlePointerMove = (event) => {
@@ -210,10 +225,12 @@ function useSelectionInteractions({
     };
     const handleViewportChangeDuringDrag = () => {
       const session = interactionSessionRef.current;
-      if (session.type !== "drag" || dragAnimationFrameId !== null) {
+      if (session.type !== "drag" || store().dragAnimationFrameId !== null) {
         return;
       }
-      dragAnimationFrameId = requestAnimationFrame(syncDragRectToViewport);
+      actions().setDragAnimationFrameId(
+        requestAnimationFrame(syncDragRectToViewport)
+      );
     };
     const commitAreaSelection = ({
       selectedElements,
@@ -275,9 +292,9 @@ function useSelectionInteractions({
         scrollOffset
       });
       const now = pointerEvent.timeStamp;
-      const previousClick = lastClick;
+      const previousClick = store().lastClick;
       if (previousClick && previousClick.target === selectionElement && now - previousClick.time <= DOUBLE_CLICK_THRESHOLD_MS && isTextEditableElement(selectionElement)) {
-        lastClick = null;
+        actions().setLastClick(null);
         onBeginEditing({
           element: selectionElement,
           descriptorPromise: previousClick.descriptorPromise
@@ -289,11 +306,11 @@ function useSelectionInteractions({
         clickPosition,
         siblingSelectors: siblingElements.map(buildSelector)
       });
-      lastClick = {
+      actions().setLastClick({
         descriptorPromise: Promise.resolve(data),
         target: selectionElement,
         time: now
-      };
+      });
       if (!selectionElement.isConnected) {
         return;
       }
@@ -309,6 +326,7 @@ function useSelectionInteractions({
       };
       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,
@@ -329,14 +347,14 @@ function useSelectionInteractions({
         commitElementSelection({ selectionElement, pointerEvent });
         return;
       }
-      lastClick = null;
+      actions().setLastClick(null);
       const pointerRect = getPointRect({
         x: pointerEvent.clientX,
         y: pointerEvent.clientY
       });
       const nextElements = getSelectionAfterAdditiveClick({
         candidates,
-        currentSelectedElements: committedSelectionAtPointerDown,
+        currentSelectedElements: store().committedSelectionAtPointerDown,
         targetElement: selectionElement
       });
       const [firstElement] = nextElements;
@@ -349,7 +367,7 @@ function useSelectionInteractions({
           selectionElement: firstElement,
           pointerEvent
         });
-        lastClick = null;
+        actions().setLastClick(null);
         return;
       }
       const scrollOffset = getDocumentScrollOffset();
@@ -382,7 +400,7 @@ function useSelectionInteractions({
       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;
+      const candidates = store().dragCandidates;
       resetDragState({ notifyParentDragCleared: false });
       if (!dragStart || snapshot.type !== "drag") {
         const targetElement = event.target;
@@ -469,7 +487,7 @@ function useSelectionInteractions({
       window.removeEventListener("resize", handleViewportChangeDuringDrag);
       resetDragState();
     };
-  }, [displayMode, editingElementRef, interactionSessionRef, onBeginEditing]);
+  }, [displayMode, selectModeStore]);
 }
 export {
   useSelectionInteractions

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

@@ -1,25 +1 @@
-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 would call `serializeStyledElement` recursively.
- *    The in-iframe frames only remeasure the selected repetition group.
- *  - 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.
- */
-export declare function useSelectionScrollSync({ displayMode, interactionSessionRef, }: {
-    displayMode: DisplayMode;
-    interactionSessionRef: MutableRefObject<SelectModeInteractionSession>;
-}): void;
+export declare function useSelectionScrollSync(): void;

package/select-mode/hooks/useSelectionScrollSync.js

@@ -5,59 +5,67 @@ import {
   getElementBoundingRect,
   getViewportRectFromPageRect
 } from "../interactions/selectionGeometry";
-import { showElementSelectionFrames } from "../selectionFrame";
-function useSelectionScrollSync({
-  displayMode,
-  interactionSessionRef
-}) {
+import { useDisplayMode, useSelectModeStore } from "../selectModeStore";
+function useSelectionScrollSync() {
+  const store = useSelectModeStore();
+  const displayMode = useDisplayMode();
   useEffect(() => {
     if (displayMode !== "selection") {
       return;
     }
-    let animationFrameId = null;
     const handleScroll = () => {
-      if (animationFrameId !== null) {
+      const { scrollSyncAnimationFrameId, actions } = store.getState();
+      if (scrollSyncAnimationFrameId !== 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();
-          showElementSelectionFrames({
-            elements: [session.element, ...session.siblingElements],
-            scrollOffset
-          });
-          getWebsiteBuilderRpc()?.selectedElementRectUpdate({
-            rect: boundingRect,
-            clickPosition
-          });
-          return;
-        }
-        if (session.type === "area") {
-          getWebsiteBuilderRpc()?.selectedAreaRectUpdate({
-            rect: getViewportRectFromPageRect({
-              rect: session.pageRect,
-              scrollOffset: getDocumentScrollOffset()
-            })
-          });
-        }
-      });
+      actions.setScrollSyncAnimationFrameId(
+        requestAnimationFrame(() => {
+          const { interactionSession, actions: storeActions } = store.getState();
+          storeActions.setScrollSyncAnimationFrameId(null);
+          if (interactionSession.type === "element") {
+            const boundingRect = getElementBoundingRect(
+              interactionSession.element
+            );
+            const sessionClickPosition = interactionSession.clickPosition;
+            const clickPosition = {
+              x: sessionClickPosition !== null ? boundingRect.left + sessionClickPosition.x : boundingRect.right,
+              y: sessionClickPosition !== null ? boundingRect.top + sessionClickPosition.y : boundingRect.bottom
+            };
+            const scrollOffset = getDocumentScrollOffset();
+            storeActions.showElementSelectionFrames({
+              elements: [
+                interactionSession.element,
+                ...interactionSession.siblingElements
+              ],
+              scrollOffset
+            });
+            getWebsiteBuilderRpc()?.selectedElementRectUpdate({
+              rect: boundingRect,
+              clickPosition
+            });
+            return;
+          }
+          if (interactionSession.type === "area") {
+            getWebsiteBuilderRpc()?.selectedAreaRectUpdate({
+              rect: getViewportRectFromPageRect({
+                rect: interactionSession.pageRect,
+                scrollOffset: getDocumentScrollOffset()
+              })
+            });
+          }
+        })
+      );
     };
     document.addEventListener("scroll", handleScroll, true);
     return () => {
       document.removeEventListener("scroll", handleScroll, true);
-      if (animationFrameId !== null) {
-        cancelAnimationFrame(animationFrameId);
+      const { scrollSyncAnimationFrameId, actions } = store.getState();
+      if (scrollSyncAnimationFrameId !== null) {
+        cancelAnimationFrame(scrollSyncAnimationFrameId);
+        actions.setScrollSyncAnimationFrameId(null);
       }
     };
-  }, [displayMode, interactionSessionRef]);
+  }, [displayMode, store]);
 }
 export {
   useSelectionScrollSync