@replohq/sandbox-runtime 1.7.10 → 1.7.12

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

package/select-mode/iframeRpcChannel.d.ts

@@ -337,6 +337,28 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
         }, import("zod/v4/core").$strip>;
         outputSchema: import("zod").ZodVoid;
     };
+    inlineEditFeedbackChanged: {
+        inputSchema: import("zod").ZodObject<{
+            feedback: import("zod").ZodNullable<import("zod").ZodObject<{
+                status: import("zod").ZodEnum<{
+                    unavailable: "unavailable";
+                    pending: "pending";
+                    failed: "failed";
+                }>;
+                rect: import("zod").ZodObject<{
+                    x: import("zod").ZodNumber;
+                    y: import("zod").ZodNumber;
+                    left: import("zod").ZodNumber;
+                    top: import("zod").ZodNumber;
+                    right: import("zod").ZodNumber;
+                    bottom: import("zod").ZodNumber;
+                    width: import("zod").ZodNumber;
+                    height: import("zod").ZodNumber;
+                }, import("zod/v4/core").$strip>;
+            }, import("zod/v4/core").$strip>>;
+        }, import("zod/v4/core").$strip>;
+        outputSchema: import("zod").ZodVoid;
+    };
     editorStateUpdate: {
         inputSchema: import("zod").ZodObject<{
             activeMarks: import("zod").ZodObject<{
@@ -345,7 +367,8 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                 underline: import("zod").ZodBoolean;
                 strike: import("zod").ZodBoolean;
             }, import("zod/v4/core").$strip>;
-            isEditing: import("zod").ZodBoolean;
+            isInlineEditing: import("zod").ZodBoolean;
+            isInlineEditPending: import("zod").ZodBoolean;
         }, import("zod/v4/core").$strip>;
         outputSchema: import("zod").ZodVoid;
     };

package/select-mode/inlineEditFeedback.d.ts

@@ -0,0 +1,6 @@
+import type { InlineEditFeedback } from "../_vendor/schemas/generated/selectModeIframeRpc";
+export declare function reportInlineEditFeedback({ element, onDisconnected, status, }: {
+    element: HTMLElement;
+    onDisconnected: () => void;
+    status?: InlineEditFeedback["status"];
+}): () => void;

package/select-mode/inlineEditFeedback.js

@@ -0,0 +1,47 @@
+import { getWebsiteBuilderRpc } from "./iframeRpcChannel";
+function reportInlineEditFeedback({
+  element,
+  onDisconnected,
+  status = "pending"
+}) {
+  let animationFrame = 0;
+  let stopped = false;
+  let previousRect = "";
+  const report = () => {
+    if (stopped) return;
+    if (!element.isConnected) {
+      onDisconnected();
+      return;
+    }
+    const bounds = element.getBoundingClientRect();
+    const rect = {
+      x: bounds.x,
+      y: bounds.y,
+      top: bounds.top,
+      right: bounds.right,
+      bottom: bounds.bottom,
+      left: bounds.left,
+      width: bounds.width,
+      height: bounds.height
+    };
+    const serializedRect = JSON.stringify(rect);
+    if (serializedRect !== previousRect) {
+      previousRect = serializedRect;
+      getWebsiteBuilderRpc()?.inlineEditFeedbackChanged({
+        feedback: { status, rect }
+      });
+    }
+    animationFrame = requestAnimationFrame(report);
+  };
+  const timer = status === "pending" ? window.setTimeout(report, 150) : null;
+  if (status !== "pending") report();
+  return () => {
+    stopped = true;
+    if (timer !== null) clearTimeout(timer);
+    cancelAnimationFrame(animationFrame);
+    getWebsiteBuilderRpc()?.inlineEditFeedbackChanged({ feedback: null });
+  };
+}
+export {
+  reportInlineEditFeedback
+};

package/select-mode/isTextEditableElement.d.ts

@@ -0,0 +1 @@
+export declare function isTextEditableElement(element: Element): element is HTMLElement;

package/select-mode/isTextEditableElement.js

@@ -0,0 +1,15 @@
+function isTextEditableElement(element) {
+  const tagName = element.tagName.toLowerCase();
+  return element instanceof HTMLElement && Boolean(element.textContent?.trim()) && ![
+    "input",
+    "textarea",
+    "select",
+    "option",
+    "img",
+    "video",
+    "canvas"
+  ].includes(tagName);
+}
+export {
+  isTextEditableElement
+};

package/select-mode/selectModeStore.d.ts

@@ -0,0 +1,160 @@
+import type { DisplayMode, SelectableData, SelectModeBoundingRect, SelectModeFormatCommand, SelectModeSelectionType } from "../_vendor/schemas/generated/selectMode";
+import type { InlineEditFeedback } from "../_vendor/schemas/generated/selectModeIframeRpc";
+import type { DragCandidate } from "./interactions/selectionGeometry";
+import type { SelectionFrameSpec } from "./selectionFrame";
+import type { SelectModeInteractionSession } from "./selectModeSession";
+import type { InlineTiptapEditor } from "./tiptapInlineEditor";
+export type ActiveMarks = {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strike: boolean;
+};
+export declare const EMPTY_ACTIVE_MARKS: ActiveMarks;
+type InlineEditRequest = {
+    status: "pending";
+    editId: string;
+    element: HTMLElement;
+    timeout: number;
+    stopFeedback: () => void;
+} | {
+    status: Exclude<InlineEditFeedback["status"], "pending">;
+    element: HTMLElement;
+    stopFeedback: () => void;
+};
+type LastClick = {
+    descriptorPromise: Promise<SelectableData>;
+    target: Element;
+    time: number;
+};
+interface SelectModeStoreState {
+    displayMode: DisplayMode;
+    interactionSession: SelectModeInteractionSession;
+    selectionFrames: SelectionFrameSpec[];
+    isSelectionFrameEditing: boolean;
+    lastPointerClientPosition: {
+        x: number;
+        y: number;
+    } | null;
+    lastPostedHoverRect: SelectModeBoundingRect | null | undefined;
+    hoverSyncAnimationFrameId: number | null;
+    lastClick: LastClick | null;
+    dragCandidates: DragCandidate[];
+    committedSelectionAtPointerDown: Element[];
+    dragAnimationFrameId: number | null;
+    editingPointerIds: Set<number>;
+    scrollSyncAnimationFrameId: number | null;
+    inlineEditRequest: InlineEditRequest | null;
+    editor: InlineTiptapEditor | null;
+    editingElement: HTMLElement | null;
+    editId: string | null;
+    originalInnerHTML: string | null;
+    initialHTML: string | null;
+    isCommitting: boolean;
+    beginEditingAt: number;
+    activeMarks: ActiveMarks;
+    actions: {
+        reset: () => void;
+        setDisplayMode: (displayMode: DisplayMode) => void;
+        setSelectionType: ({ selectionType, selectors, }: {
+            selectionType: SelectModeSelectionType;
+            selectors?: string[];
+        }) => void;
+        setInteractionSession: (interactionSession: SelectModeInteractionSession) => void;
+        resetInteractionSession: () => void;
+        postSelectedElementSnapshot: (options?: {
+            clearMissing?: boolean;
+        }) => boolean;
+        showElementSelectionFrames: ({ elements, scrollOffset, }: {
+            elements: Element[];
+            scrollOffset: {
+                left: number;
+                top: number;
+            };
+        }) => void;
+        showAreaSelectionFrames: ({ elements, scrollOffset, }: {
+            elements: Element[];
+            scrollOffset: {
+                left: number;
+                top: number;
+            };
+        }) => void;
+        hideSelectionFrames: () => void;
+        setLastPointerClientPosition: (position: {
+            x: number;
+            y: number;
+        } | null) => void;
+        setLastPostedHoverRect: (rect: SelectModeBoundingRect | null | undefined) => void;
+        resetHoverRectDedup: () => void;
+        setHoverSyncAnimationFrameId: (id: number | null) => void;
+        setLastClick: (lastClick: LastClick | null) => void;
+        setDragCandidates: (dragCandidates: DragCandidate[]) => void;
+        setCommittedSelectionAtPointerDown: (elements: Element[]) => void;
+        setDragAnimationFrameId: (id: number | null) => void;
+        setScrollSyncAnimationFrameId: (id: number | null) => void;
+        beginEditing: ({ element, descriptorPromise, }: {
+            element: Element;
+            descriptorPromise: Promise<SelectableData>;
+        }) => void;
+        commitInlineEdit: () => void;
+        revertInlineEdit: () => void;
+        formatCommand: (command: SelectModeFormatCommand) => void;
+        dismissInlineEditRequest: () => void;
+    };
+}
+export declare const selectModeStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<import("zustand").StoreApi<SelectModeStoreState>>;
+export declare function useSelectModeStore(): import("zustand/traditional").UseBoundStoreWithEqualityFn<import("zustand").StoreApi<SelectModeStoreState>>;
+export declare const useSelectModeStoreActions: () => {
+    reset: () => void;
+    setDisplayMode: (displayMode: DisplayMode) => void;
+    setSelectionType: ({ selectionType, selectors, }: {
+        selectionType: SelectModeSelectionType;
+        selectors?: string[];
+    }) => void;
+    setInteractionSession: (interactionSession: SelectModeInteractionSession) => void;
+    resetInteractionSession: () => void;
+    postSelectedElementSnapshot: (options?: {
+        clearMissing?: boolean;
+    }) => boolean;
+    showElementSelectionFrames: ({ elements, scrollOffset, }: {
+        elements: Element[];
+        scrollOffset: {
+            left: number;
+            top: number;
+        };
+    }) => void;
+    showAreaSelectionFrames: ({ elements, scrollOffset, }: {
+        elements: Element[];
+        scrollOffset: {
+            left: number;
+            top: number;
+        };
+    }) => void;
+    hideSelectionFrames: () => void;
+    setLastPointerClientPosition: (position: {
+        x: number;
+        y: number;
+    } | null) => void;
+    setLastPostedHoverRect: (rect: SelectModeBoundingRect | null | undefined) => void;
+    resetHoverRectDedup: () => void;
+    setHoverSyncAnimationFrameId: (id: number | null) => void;
+    setLastClick: (lastClick: LastClick | null) => void;
+    setDragCandidates: (dragCandidates: DragCandidate[]) => void;
+    setCommittedSelectionAtPointerDown: (elements: Element[]) => void;
+    setDragAnimationFrameId: (id: number | null) => void;
+    setScrollSyncAnimationFrameId: (id: number | null) => void;
+    beginEditing: ({ element, descriptorPromise, }: {
+        element: Element;
+        descriptorPromise: Promise<SelectableData>;
+    }) => void;
+    commitInlineEdit: () => void;
+    revertInlineEdit: () => void;
+    formatCommand: (command: SelectModeFormatCommand) => void;
+    dismissInlineEditRequest: () => void;
+};
+export declare const useDisplayMode: () => DisplayMode;
+export declare const useSelectionFrames: () => SelectionFrameSpec[];
+export declare const useIsSelectionFrameEditing: () => boolean;
+export declare const useEditingElement: () => HTMLElement | null;
+export declare const useInteractionSession: () => SelectModeInteractionSession;
+export {};