@replohq/sandbox-runtime 1.7.10 → 1.7.12

package/select-mode/EditorSelection.js

@@ -1,39 +1,29 @@
 "use client";
-import { useCallback, useEffect } from "react";
-import {
-  buildElementDescriptor,
-  buildSelector
-} from "./descriptor/elementDescriptor";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { installFastRefreshRelay } from "./fast-refresh-relay";
-import { useCrosshairCursor } from "./hooks/useCrosshairCursor";
-import { useEditModeStateMachine } from "./hooks/useEditModeStateMachine";
 import { useOptimisticOverrides } from "./hooks/useOptimisticOverrides";
 import { useParentMessaging } from "./hooks/useParentMessaging";
 import { useSelectionHover } from "./hooks/useSelectionHover";
 import { useSelectionInteractions } from "./hooks/useSelectionInteractions";
 import { useSelectionScrollSync } from "./hooks/useSelectionScrollSync";
-import { useSelectModeController } from "./hooks/useSelectModeController";
-import { getRepetitionSiblingElements } from "./hooks/useSiblingResolution";
-import { getWebsiteBuilderRpc } from "./iframeRpcChannel";
-import { getDocumentScrollOffset } from "./interactions/selectionGeometry";
 import { PREVIEW_RENDERED_EVENT } from "./previewRendered";
-import { showElementSelectionFrames } from "./selectionFrame";
-import { getConnectedSelectedElement } from "./selectModeSession";
+import { SelectionFrames } from "./SelectionFrames";
 import {
-  isUserSourceLocation,
-  symbolicateSelectedElement
-} from "./symbolicate";
+  useDisplayMode,
+  useSelectModeStore,
+  useSelectModeStoreActions
+} from "./selectModeStore";
 function EditorSelection() {
+  const store = useSelectModeStore();
+  const displayMode = useDisplayMode();
   const {
-    displayMode,
-    interactionSessionRef,
+    formatCommand,
+    postSelectedElementSnapshot,
+    revertInlineEdit,
     setDisplayMode,
     setSelectionType
-  } = useSelectModeController();
-  const { beginEditing, editingElementRef, formatCommand, revert } = useEditModeStateMachine({
-    displayMode,
-    interactionSessionRef
-  });
+  } = useSelectModeStoreActions();
   const {
     applyOptimisticUpdate,
     markCommitted,
@@ -41,56 +31,6 @@ function EditorSelection() {
     resolveSessionOverrides,
     revertOverride
   } = useOptimisticOverrides();
-  const postSelectedElementSnapshot = useCallback(
-    ({ clearMissing = false } = {}) => {
-      const session = interactionSessionRef.current;
-      if (session.type !== "element") {
-        return true;
-      }
-      const element = getConnectedSelectedElement(session);
-      if (!element) {
-        if (!clearMissing) return false;
-        setSelectionType({ selectionType: "none" });
-        getWebsiteBuilderRpc()?.areaSelected({
-          rect: session.data.rect,
-          items: []
-        });
-        return true;
-      }
-      const siblingElements = getRepetitionSiblingElements({ element });
-      const descriptor = buildElementDescriptor({
-        element,
-        clickPosition: session.clickPosition ?? (session.data.kind === "react-element" ? session.data.clickPosition : { x: 0, y: 0 }),
-        siblingSelectors: siblingElements.map(buildSelector)
-      });
-      if (descriptor.kind !== "react-element") {
-        return true;
-      }
-      const refreshedSession = {
-        ...session,
-        element,
-        siblingElements,
-        data: session.data
-      };
-      interactionSessionRef.current = refreshedSession;
-      showElementSelectionFrames({
-        elements: [element, ...siblingElements],
-        scrollOffset: getDocumentScrollOffset()
-      });
-      void symbolicateSelectedElement(descriptor).then((symbolicated) => {
-        if (interactionSessionRef.current !== refreshedSession) {
-          return;
-        }
-        if (symbolicated.sourceLocation && !isUserSourceLocation(symbolicated.sourceLocation)) {
-          return;
-        }
-        refreshedSession.data = symbolicated;
-        getWebsiteBuilderRpc()?.elementSelected({ data: symbolicated });
-      });
-      return true;
-    },
-    [interactionSessionRef, setSelectionType]
-  );
   useEffect(() => {
     let refreshTimeout;
     let missingTimeout;
@@ -98,15 +38,15 @@ function EditorSelection() {
     const scheduleSnapshot = () => {
       clearTimeout(refreshTimeout);
       refreshTimeout = setTimeout(() => {
-        if (editingElementRef.current) return;
+        if (store.getState().editingElement) return;
         if (postSelectedElementSnapshot()) {
           clearTimeout(missingTimeout);
           missingTimeout = void 0;
         } else if (!missingTimeout) {
-          const missingSession = interactionSessionRef.current;
+          const missingSession = store.getState().interactionSession;
           missingTimeout = setTimeout(() => {
             missingTimeout = void 0;
-            if (interactionSessionRef.current === missingSession) {
+            if (store.getState().interactionSession === missingSession) {
               postSelectedElementSnapshot({ clearMissing: true });
             }
           }, 5e3);
@@ -114,14 +54,14 @@ function EditorSelection() {
       }, 250);
     };
     const observer = new MutationObserver((records) => {
-      const session = interactionSessionRef.current;
-      if (editingElementRef.current || session.type !== "element") return;
+      const session = store.getState().interactionSession;
+      if (store.getState().editingElement || session.type !== "element") return;
       if (!session.element.isConnected || records.some((record) => session.element.contains(record.target))) {
         scheduleSnapshot();
       }
     });
     const watchRender = () => {
-      if (editingElementRef.current || interactionSessionRef.current.type !== "element")
+      if (store.getState().editingElement || store.getState().interactionSession.type !== "element")
         return;
       clearTimeout(observationTimeout);
       observer.observe(document.body, {
@@ -133,7 +73,7 @@ function EditorSelection() {
     };
     installFastRefreshRelay({
       onComplete: () => {
-        reapplyOverrides({ skipElement: editingElementRef.current });
+        reapplyOverrides({ skipElement: store.getState().editingElement });
         watchRender();
       }
     });
@@ -146,35 +86,56 @@ function EditorSelection() {
       window.removeEventListener(PREVIEW_RENDERED_EVENT, watchRender);
       installFastRefreshRelay();
     };
-  }, [
-    editingElementRef,
-    interactionSessionRef,
-    postSelectedElementSnapshot,
-    reapplyOverrides
-  ]);
+  }, [store, postSelectedElementSnapshot, reapplyOverrides]);
+  useEffect(() => {
+    const cancelOnPointerDown = (event) => {
+      const { editingElement, inlineEditRequest, actions } = store.getState();
+      if (event.button === 0 && editingElement && event.target instanceof Node && !editingElement.contains(event.target)) {
+        actions.commitInlineEdit();
+      }
+      if (inlineEditRequest && event.target instanceof Node && !inlineEditRequest.element.contains(event.target)) {
+        actions.dismissInlineEditRequest();
+      }
+    };
+    const cancelOnEscape = (event) => {
+      const { inlineEditRequest, actions } = store.getState();
+      if (!inlineEditRequest || event.key !== "Escape") {
+        return;
+      }
+      if (inlineEditRequest.status === "pending") {
+        event.preventDefault();
+      }
+      actions.dismissInlineEditRequest();
+    };
+    document.addEventListener("pointerdown", cancelOnPointerDown, true);
+    document.addEventListener("keydown", cancelOnEscape, true);
+    return () => {
+      document.removeEventListener("pointerdown", cancelOnPointerDown, true);
+      document.removeEventListener("keydown", cancelOnEscape, true);
+      store.getState().actions.revertInlineEdit();
+    };
+  }, [store]);
   useParentMessaging({
     applyOptimisticUpdate,
     markCommitted,
-    onExitEditMode: revert,
+    onExitEditMode: revertInlineEdit,
     onFormatCommand: formatCommand,
     resolveSessionOverrides,
     revertOverride,
     setDisplayMode,
     setSelectionType
   });
-  useCrosshairCursor({ displayMode });
-  useSelectionInteractions({
-    displayMode,
-    editingElementRef,
-    interactionSessionRef,
-    onBeginEditing: beginEditing
-  });
-  useSelectionHover({ displayMode, interactionSessionRef });
-  useSelectionScrollSync({
-    displayMode,
-    interactionSessionRef
-  });
-  return null;
+  useSelectionInteractions();
+  useSelectionHover();
+  useSelectionScrollSync();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    displayMode === "selection" && /* @__PURE__ */ jsx("style", { children: `
+            * { cursor: crosshair !important; user-select: none !important; -webkit-user-drag: none !important; }
+            [data-select-mode-inline-editor][contenteditable="true"],
+            [data-select-mode-inline-editor][contenteditable="true"] * { cursor: text !important; }
+          ` }),
+    /* @__PURE__ */ jsx(SelectionFrames, {})
+  ] });
 }
 export {
   EditorSelection

package/select-mode/SelectionFrames.d.ts

@@ -0,0 +1 @@
+export declare function SelectionFrames(): import("react").ReactPortal | null;

package/select-mode/SelectionFrames.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import {
+  SELECTION_FRAME_BORDER_HEX,
+  SELECTION_FRAME_EDITING_BORDER_HEX,
+  SELECTION_FRAMES_CONTAINER_ID
+} from "./selectionFrame";
+import {
+  useIsSelectionFrameEditing,
+  useSelectionFrames
+} from "./selectModeStore";
+const CONTAINER_STYLE = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0,
+  margin: 0,
+  padding: 0,
+  pointerEvents: "none",
+  zIndex: 2147483646
+};
+function SelectionFrames() {
+  const frames = useSelectionFrames();
+  const isEditing = useIsSelectionFrameEditing();
+  if (typeof document === "undefined" || !document.body || frames.length === 0) {
+    return null;
+  }
+  const borderColor = isEditing ? SELECTION_FRAME_EDITING_BORDER_HEX : SELECTION_FRAME_BORDER_HEX;
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { id: SELECTION_FRAMES_CONTAINER_ID, "aria-hidden": true, style: CONTAINER_STYLE, children: frames.map((frame, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        style: {
+          position: "absolute",
+          boxSizing: "border-box",
+          borderRadius: 2,
+          pointerEvents: "none",
+          margin: 0,
+          padding: 0,
+          left: frame.pageRect.x,
+          top: frame.pageRect.y,
+          width: frame.pageRect.width,
+          height: frame.pageRect.height,
+          border: `2px solid ${borderColor}`,
+          background: frame.variant === "area" ? "rgba(192, 38, 211, 0.08)" : "transparent"
+        }
+      },
+      `${frame.variant}-${index}`
+    )) }),
+    document.body
+  );
+}
+export {
+  SelectionFrames
+};

package/select-mode/annotationFrames.d.ts

@@ -1,3 +1,16 @@
+/**
+ * In-iframe annotation frame renderer — `selectionFrame`'s sibling surface.
+ *
+ * Same architecture and reasons as selection frames: page-coordinate
+ * `position: absolute` nodes in a body-level container, so document scroll
+ * translates them with zero JavaScript per scroll frame, and styling is
+ * vanilla inline CSS because customer pages have no tailwind.
+ *
+ * An annotation frame is an invisible positioning box over the annotated
+ * element carrying a numbered badge dot — the dot is the entire visual.
+ * Unlike selection frames these rebuild wholesale on each call: re-renders
+ * happen on set/re-measure (rare), never per scroll, so pooling buys nothing.
+ */
 export declare const ANNOTATION_CONTAINER_ID = "replo-annotation-frames";
 interface AnnotationRect {
     x: number;

package/select-mode/annotationFrames.js

@@ -1,5 +1,35 @@
-import { getOrCreateFramesLayerContainer } from "./selectionFrame";
 const ANNOTATION_CONTAINER_ID = "replo-annotation-frames";
+function getOrCreateFramesLayerContainer({
+  id,
+  zIndex
+}) {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const existing = document.getElementById(id);
+  if (existing instanceof HTMLDivElement) {
+    return existing;
+  }
+  if (!document.body) {
+    return null;
+  }
+  const container = document.createElement("div");
+  container.id = id;
+  container.setAttribute("aria-hidden", "true");
+  container.style.cssText = [
+    "position: absolute",
+    "top: 0",
+    "left: 0",
+    "width: 0",
+    "height: 0",
+    "margin: 0",
+    "padding: 0",
+    "pointer-events: none",
+    `z-index: ${zIndex}`
+  ].join(";");
+  document.body.append(container);
+  return container;
+}
 const ANNOTATION_FONT_STYLE_ID = "replo-annotation-font";
 const BADGE_SIZE_PX = 30;
 const EDITORIAL_ITALIC_FONT_URL = "https://assets.replocdn.com/PPEditorialNew-Italic.woff2";

package/select-mode/displayModeStore.d.ts

@@ -4,7 +4,5 @@ export declare const displayModeStore: {
     getServerSnapshot(): DisplayMode;
     subscribe(listener: () => void): () => void;
     setDisplayMode(nextDisplayMode: DisplayMode): void;
-    /** Test-only: reset back to the default so specs don't leak state. */
     reset(): void;
 };
-export declare function useDisplayMode(): DisplayMode;

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;