@replohq/sandbox-runtime 1.9.0 → 1.10.0

package/select-mode/interactions/sectionGeometry.js

@@ -0,0 +1,200 @@
+import { SELECT_MODE_SELECTABLE_ATTRIBUTE } from "../../_vendor/schemas/selectMode.mjs";
+const GROUP_TAGS = /* @__PURE__ */ new Set(["DIV", "ARTICLE", "ASIDE", "FORM"]);
+const LANDMARK_TAGS = /* @__PURE__ */ new Set(["HEADER", "NAV", "FOOTER"]);
+const SECTION_TAGS = /* @__PURE__ */ new Set(["SECTION", "ARTICLE", ...LANDMARK_TAGS]);
+const CONTAINER_TAGS = /* @__PURE__ */ new Set([...GROUP_TAGS, ...SECTION_TAGS]);
+function findContainingSection(element) {
+  const rects = /* @__PURE__ */ new Map();
+  const styles = /* @__PURE__ */ new Map();
+  const visibleChildren = /* @__PURE__ */ new Map();
+  if (element.closest(`[${SELECT_MODE_SELECTABLE_ATTRIBUTE}]`)) {
+    return null;
+  }
+  if (element.closest('dialog, [role="dialog"], [aria-modal="true"]')) {
+    return null;
+  }
+  for (let parent = element; parent; parent = parent.parentElement) {
+    const position = getStyle(parent).position;
+    if (position === "fixed" && !LANDMARK_TAGS.has(parent.tagName)) {
+      return null;
+    }
+  }
+  const lane = findContentLane();
+  if (!lane.contains(element)) {
+    return null;
+  }
+  const outerLaneRect = getRect(lane);
+  const laneStyle = getStyle(lane);
+  const paddingLeft = parseFloat(laneStyle.paddingLeft || "0");
+  const paddingRight = parseFloat(laneStyle.paddingRight || "0");
+  const laneRect = {
+    left: outerLaneRect.left + paddingLeft,
+    right: outerLaneRect.right - paddingRight,
+    width: outerLaneRect.width - paddingLeft - paddingRight
+  };
+  if (laneRect.width <= 0) {
+    return null;
+  }
+  const tolerance = Math.max(4, laneRect.width * 0.04);
+  const section = findOutermostSection();
+  return section ? trimSectionWrappers(section) : null;
+  function findContentLane() {
+    let lane2 = element.closest("main") ?? element.ownerDocument.body;
+    while (true) {
+      const children = getVisibleChildren(lane2);
+      const child = children[0];
+      if (children.length !== 1 || !child || child.tagName !== "DIV" || hasSectionStyling(child) && (getVisibleChildren(child).filter((descendant) => {
+        return CONTAINER_TAGS.has(descendant.tagName);
+      }).length < 2 || getRect(child).height < getRect(lane2).height * 0.9)) {
+        break;
+      }
+      lane2 = child;
+    }
+    return lane2;
+  }
+  function findOutermostSection() {
+    const candidates = [];
+    for (let candidate = element; candidate && candidate !== lane; candidate = candidate.parentElement) {
+      candidates.push(candidate);
+    }
+    for (const candidate of candidates.reverse()) {
+      if (!CONTAINER_TAGS.has(candidate.tagName) || !spansLane(candidate)) {
+        continue;
+      }
+      const style = getStyle(candidate);
+      if (style.display === "none" || style.display === "contents" || style.visibility === "hidden" || style.position === "absolute") {
+        continue;
+      }
+      const rect = getRect(candidate);
+      const minimumHeight = LANDMARK_TAGS.has(candidate.tagName) ? 20 : 48;
+      if (rect.height < minimumHeight || isMultiSectionWrapper(candidate)) {
+        continue;
+      }
+      if (SECTION_TAGS.has(candidate.tagName)) {
+        return candidate;
+      }
+      let parent = candidate.parentElement;
+      while (parent && getStyle(parent).display === "contents") {
+        parent = parent.parentElement;
+      }
+      const hasPeerBand = parent && getVisibleChildren(parent).some((peer) => {
+        if (peer === candidate || peer.contains(candidate) || !spansLane(peer)) {
+          return false;
+        }
+        const peerRect = getRect(peer);
+        return peerRect.height >= 20 && (peerRect.bottom <= rect.top + 4 || peerRect.top >= rect.bottom - 4);
+      });
+      if (hasPeerBand) {
+        return candidate;
+      }
+    }
+    return null;
+  }
+  function isMultiSectionWrapper(candidate) {
+    if (!GROUP_TAGS.has(candidate.tagName) || hasSectionStyling(candidate) || hasUngroupedText(candidate)) {
+      return false;
+    }
+    const children = getVisibleChildren(candidate);
+    const childBands = children.filter((child) => {
+      return CONTAINER_TAGS.has(child.tagName) && spansLane(child) && getRect(child).height >= 48;
+    });
+    const hasLeftoverContent = children.some((child) => {
+      return !CONTAINER_TAGS.has(child.tagName) && Boolean(child.textContent?.trim());
+    });
+    if (childBands.length <= 1 || hasLeftoverContent) {
+      return false;
+    }
+    let minimumBottom = Infinity;
+    let maximumTop = -Infinity;
+    for (const child of childBands) {
+      const childRect = getRect(child);
+      minimumBottom = Math.min(minimumBottom, childRect.bottom);
+      maximumTop = Math.max(maximumTop, childRect.top);
+    }
+    return minimumBottom <= maximumTop + 4;
+  }
+  function trimSectionWrappers(section2) {
+    while (!SECTION_TAGS.has(section2.tagName) && !hasSectionStyling(section2)) {
+      const children = getVisibleChildren(section2);
+      const child = children[0];
+      if (children.length !== 1 || !child || !child.contains(element) || !CONTAINER_TAGS.has(child.tagName)) {
+        break;
+      }
+      const outer = getRect(section2);
+      const inner = getRect(child);
+      if (Math.abs(outer.top - inner.top) > 4 || Math.abs(outer.bottom - inner.bottom) > 4 || !spansLane(child)) {
+        break;
+      }
+      section2 = child;
+    }
+    return section2;
+  }
+  function spansLane(candidate) {
+    const rect = getRect(candidate);
+    return Math.abs(rect.left - laneRect.left) <= tolerance && Math.abs(rect.right - laneRect.right) <= tolerance;
+  }
+  function getRect(element2) {
+    const cached = rects.get(element2);
+    if (cached) {
+      return cached;
+    }
+    const rect = element2.getBoundingClientRect();
+    rects.set(element2, rect);
+    return rect;
+  }
+  function getStyle(element2) {
+    const cached = styles.get(element2);
+    if (cached) {
+      return cached;
+    }
+    const style = getComputedStyle(element2);
+    styles.set(element2, style);
+    return style;
+  }
+  function getVisibleChildren(element2) {
+    const cached = visibleChildren.get(element2);
+    if (cached) {
+      return cached;
+    }
+    const children = Array.from(element2.children).flatMap((child) => {
+      const style = getStyle(child);
+      if (style.display === "none" || style.visibility === "hidden" || ["fixed", "absolute"].includes(style.position) && !LANDMARK_TAGS.has(child.tagName)) {
+        return [];
+      }
+      if (style.display === "contents") {
+        return getVisibleChildren(child);
+      }
+      const rect = getRect(child);
+      return rect.width > 0 && rect.height > 0 ? [child] : [];
+    });
+    visibleChildren.set(element2, children);
+    return children;
+  }
+  function hasUngroupedText(element2) {
+    return Array.from(element2.childNodes).some((node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        return Boolean(node.textContent?.trim());
+      }
+      if (!(node instanceof Element)) {
+        return false;
+      }
+      const style = getStyle(node);
+      return style.display === "contents" && style.visibility !== "hidden" && hasUngroupedText(node);
+    });
+  }
+  function hasSectionStyling(element2) {
+    const style = getStyle(element2);
+    return style.backgroundColor !== "rgba(0, 0, 0, 0)" && style.backgroundColor !== "transparent" && style.backgroundColor !== "" || style.backgroundImage !== "none" && style.backgroundImage !== "" || [
+      style.paddingTop,
+      style.paddingRight,
+      style.paddingBottom,
+      style.paddingLeft,
+      style.borderTopWidth,
+      style.borderBottomWidth
+    ].some((value) => parseFloat(value) > 0);
+  }
+}
+export {
+  CONTAINER_TAGS,
+  findContainingSection
+};

package/select-mode/selectModeStore.d.ts

@@ -1,4 +1,4 @@
-import type { DisplayMode, SelectableData, SelectModeBoundingRect, SelectModeFormatCommand, SelectModeSelectionType, SelectModeTiptapActiveMarks } from "../_vendor/schemas/generated/selectMode";
+import type { DisplayMode, SelectableData, SelectModeClickPosition, SelectModeFormatCommand, SelectModeHoverRect, SelectModeSelectionType, SelectModeTiptapActiveMarks } from "../_vendor/schemas/generated/selectMode";
 import type { InlineEditFeedback } from "../_vendor/schemas/generated/selectModeIframeRpc";
 import type { DragCandidate } from "./interactions/selectionGeometry";
 import type { SelectionFrameSpec } from "./selectionFrame";
@@ -22,6 +22,10 @@ type LastClick = {
     target: Element;
     time: number;
 };
+type PostedHover = {
+    element: Element | null;
+    rect: SelectModeHoverRect | null;
+};
 interface SelectModeStoreState {
     displayMode: DisplayMode;
     interactionSession: SelectModeInteractionSession;
@@ -31,7 +35,8 @@ interface SelectModeStoreState {
         x: number;
         y: number;
     } | null;
-    lastPostedHoverRect: SelectModeBoundingRect | null | undefined;
+    lastPostedHover: PostedHover | undefined;
+    sectionPreviewElement: Element | null;
     hoverSyncAnimationFrameId: number | null;
     lastClick: LastClick | null;
     dragCandidates: DragCandidate[];
@@ -60,8 +65,20 @@ interface SelectModeStoreState {
         postSelectedElementSnapshot: (options?: {
             clearMissing?: boolean;
         }) => boolean;
-        showElementSelectionFrames: ({ elements, scrollOffset, }: {
+        commitElementSelection: ({ element, clickPosition, isPendingClickOnSelection, }: {
+            element: Element;
+            clickPosition: SelectModeClickPosition;
+            isPendingClickOnSelection?: (data: SelectableData) => boolean;
+        }) => SelectableData;
+        expandToSection: (input: {
+            targetSelector: string;
+        }) => void;
+        setSectionPreview: (input: {
+            targetSelector: string | null;
+        }) => void;
+        showElementSelectionFrames: ({ elements, isSection, scrollOffset, }: {
             elements: Element[];
+            isSection?: boolean;
             scrollOffset: {
                 left: number;
                 top: number;
@@ -79,8 +96,7 @@ interface SelectModeStoreState {
             x: number;
             y: number;
         } | null) => void;
-        setLastPostedHoverRect: (rect: SelectModeBoundingRect | null | undefined) => void;
-        resetHoverRectDedup: () => void;
+        setLastPostedHover: (hover: PostedHover | undefined) => void;
         setHoverSyncAnimationFrameId: (id: number | null) => void;
         setLastClick: (lastClick: LastClick | null) => void;
         setDragCandidates: (dragCandidates: DragCandidate[]) => void;
@@ -111,8 +127,20 @@ export declare const useSelectModeStoreActions: () => {
     postSelectedElementSnapshot: (options?: {
         clearMissing?: boolean;
     }) => boolean;
-    showElementSelectionFrames: ({ elements, scrollOffset, }: {
+    commitElementSelection: ({ element, clickPosition, isPendingClickOnSelection, }: {
+        element: Element;
+        clickPosition: SelectModeClickPosition;
+        isPendingClickOnSelection?: (data: SelectableData) => boolean;
+    }) => SelectableData;
+    expandToSection: (input: {
+        targetSelector: string;
+    }) => void;
+    setSectionPreview: (input: {
+        targetSelector: string | null;
+    }) => void;
+    showElementSelectionFrames: ({ elements, isSection, scrollOffset, }: {
         elements: Element[];
+        isSection?: boolean;
         scrollOffset: {
             left: number;
             top: number;
@@ -130,8 +158,7 @@ export declare const useSelectModeStoreActions: () => {
         x: number;
         y: number;
     } | null) => void;
-    setLastPostedHoverRect: (rect: SelectModeBoundingRect | null | undefined) => void;
-    resetHoverRectDedup: () => void;
+    setLastPostedHover: (hover: PostedHover | undefined) => void;
     setHoverSyncAnimationFrameId: (id: number | null) => void;
     setLastClick: (lastClick: LastClick | null) => void;
     setDragCandidates: (dragCandidates: DragCandidate[]) => void;
@@ -149,6 +176,7 @@ export declare const useSelectModeStoreActions: () => {
 };
 export declare const useDisplayMode: () => DisplayMode;
 export declare const useSelectionFrames: () => SelectionFrameSpec[];
+export declare const useSectionHoverRect: () => SelectModeHoverRect | null;
 export declare const useIsSelectionFrameEditing: () => boolean;
 export declare const useEditingElement: () => HTMLElement | null;
 export declare const useInteractionSession: () => SelectModeInteractionSession;

package/select-mode/selectModeStore.js

@@ -10,9 +10,11 @@ import {
   requestInlineTextEdit
 } from "./iframeRpcChannel";
 import { reportInlineEditFeedback } from "./inlineEditFeedback";
+import { findContainingSection } from "./interactions/sectionGeometry";
 import { getDocumentScrollOffset } from "./interactions/selectionGeometry";
 import { isTextEditableElement } from "./isTextEditableElement";
 import { getSelectionFrameSpecs } from "./selectionFrame";
+import { isSelectionStillCurrent } from "./selectionPublish";
 import { getConnectedSelectedElement, IDLE_SESSION } from "./selectModeSession";
 import {
   isUserSourceLocation,
@@ -42,6 +44,21 @@ function stopInlineEditRequest(request) {
   }
   request.stopFeedback();
 }
+function buildElementSelection({
+  element,
+  clickPosition
+}) {
+  const section = findContainingSection(element);
+  const isSection = section === element;
+  const siblingElements = isSection ? [] : getRepetitionSiblingElements({ element });
+  const data = buildElementDescriptor({
+    element,
+    clickPosition,
+    siblingSelectors: siblingElements.map(buildSelector),
+    section
+  });
+  return { data, siblingElements, isSection };
+}
 function reportInlineEditingState({
   activeMarks,
   isInlineEditing,
@@ -59,7 +76,8 @@ const INITIAL_STATE = {
   selectionFrames: [],
   isSelectionFrameEditing: false,
   lastPointerClientPosition: null,
-  lastPostedHoverRect: void 0,
+  lastPostedHover: void 0,
+  sectionPreviewElement: null,
   hoverSyncAnimationFrameId: null,
   lastClick: null,
   dragCandidates: [],
@@ -294,7 +312,8 @@ const selectModeStore = createShallowStore(
       set({
         interactionSession: IDLE_SESSION,
         selectionFrames: [],
-        lastPostedHoverRect: void 0,
+        lastPostedHover: void 0,
+        sectionPreviewElement: null,
         hoverSyncAnimationFrameId: null,
         dragAnimationFrameId: null,
         dragCandidates: []
@@ -356,15 +375,19 @@ const selectModeStore = createShallowStore(
           });
         },
         setInteractionSession: (interactionSession) => {
-          set({ interactionSession });
+          set({ interactionSession, sectionPreviewElement: null });
         },
         resetInteractionSession,
         postSelectedElementSnapshot: ({ clearMissing = false } = {}) => {
           const { interactionSession } = get();
-          if (interactionSession.type !== "element") return true;
+          if (interactionSession.type !== "element") {
+            return true;
+          }
           const element = getConnectedSelectedElement(interactionSession);
           if (!element) {
-            if (!clearMissing) return false;
+            if (!clearMissing) {
+              return false;
+            }
             get().actions.setSelectionType({ selectionType: "none" });
             getWebsiteBuilderRpc()?.areaSelected({
               rect: interactionSession.data.rect,
@@ -372,27 +395,39 @@ const selectModeStore = createShallowStore(
             });
             return true;
           }
-          const siblingElements = getRepetitionSiblingElements({ element });
-          const descriptor = buildElementDescriptor({
+          const {
+            data: descriptor,
+            siblingElements,
+            isSection
+          } = buildElementSelection({
             element,
-            clickPosition: interactionSession.clickPosition ?? (interactionSession.data.kind === "react-element" ? interactionSession.data.clickPosition : { x: 0, y: 0 }),
-            siblingSelectors: siblingElements.map(buildSelector)
+            clickPosition: interactionSession.clickPosition ?? (interactionSession.data.kind === "react-element" ? interactionSession.data.clickPosition : { x: 0, y: 0 })
           });
-          if (descriptor.kind !== "react-element") return true;
+          if (descriptor.kind !== "react-element") {
+            return true;
+          }
           const refreshedSession = {
             ...interactionSession,
             element,
-            siblingElements
+            siblingElements,
+            data: descriptor
           };
-          set({ interactionSession: refreshedSession });
+          set({
+            interactionSession: refreshedSession,
+            sectionPreviewElement: null
+          });
           get().actions.showElementSelectionFrames({
             elements: [element, ...siblingElements],
+            isSection,
             scrollOffset: getDocumentScrollOffset()
           });
           void symbolicateSelectedElement(descriptor).then((symbolicated) => {
-            if (get().interactionSession !== refreshedSession) return;
-            if (symbolicated.sourceLocation && !isUserSourceLocation(symbolicated.sourceLocation))
+            if (get().interactionSession !== refreshedSession) {
+              return;
+            }
+            if (symbolicated.sourceLocation && !isUserSourceLocation(symbolicated.sourceLocation)) {
               return;
+            }
             set({
               interactionSession: { ...refreshedSession, data: symbolicated }
             });
@@ -400,12 +435,94 @@ const selectModeStore = createShallowStore(
           });
           return true;
         },
-        showElementSelectionFrames: ({ elements, scrollOffset }) => {
+        commitElementSelection: ({
+          element,
+          clickPosition,
+          isPendingClickOnSelection
+        }) => {
+          set({ sectionPreviewElement: null });
+          const { data, siblingElements, isSection } = buildElementSelection({
+            element,
+            clickPosition
+          });
+          get().actions.showElementSelectionFrames({
+            elements: [element, ...siblingElements],
+            isSection,
+            scrollOffset: getDocumentScrollOffset()
+          });
+          if (!element.isConnected) {
+            return data;
+          }
+          const rect = element.getBoundingClientRect();
+          set({
+            interactionSession: {
+              type: "element",
+              element,
+              siblingElements,
+              clickPosition: {
+                x: clickPosition.x - rect.left,
+                y: clickPosition.y - rect.top
+              },
+              data
+            }
+          });
+          const descriptorPromise = data.kind === "react-element" ? symbolicateSelectedElement(data) : Promise.resolve(data);
+          void descriptorPromise.then((result) => {
+            const session = get().interactionSession;
+            const isCurrent = session.type === "element" && session.data === data && isSelectionStillCurrent({
+              session,
+              selection: { type: "element", element }
+            });
+            if (isCurrent || isPendingClickOnSelection?.(data)) {
+              getWebsiteBuilderRpc()?.elementSelected({ data: result });
+            }
+          });
+          return data;
+        },
+        expandToSection: ({ targetSelector }) => {
+          const { editingElement, inlineEditRequest, interactionSession } = get();
+          if (interactionSession.type !== "element" || interactionSession.data.kind !== "react-element" || interactionSession.data.selector !== targetSelector || !interactionSession.data.section || editingElement || inlineEditRequest) {
+            return;
+          }
+          const section = interactionSession.element.isConnected ? findContainingSection(interactionSession.element) : null;
+          if (!section || section === interactionSession.element) {
+            return;
+          }
+          const rect = section.getBoundingClientRect();
+          get().actions.commitElementSelection({
+            element: section,
+            clickPosition: {
+              x: rect.left + rect.width / 2,
+              y: rect.top + Math.min(24, rect.height / 2)
+            }
+          });
+        },
+        setSectionPreview: ({ targetSelector }) => {
+          if (!targetSelector) {
+            set({ sectionPreviewElement: null });
+            return;
+          }
+          const {
+            displayMode,
+            editingElement,
+            inlineEditRequest,
+            interactionSession
+          } = get();
+          if (displayMode !== "selection" || interactionSession.type !== "element" || interactionSession.data.kind !== "react-element" || interactionSession.data.selector !== targetSelector || !interactionSession.data.section || editingElement || inlineEditRequest) {
+            return;
+          }
+          const section = interactionSession.element.isConnected ? findContainingSection(interactionSession.element) : null;
+          if (!section || section === interactionSession.element) {
+            return;
+          }
+          set({ sectionPreviewElement: section });
+        },
+        showElementSelectionFrames: ({ elements, isSection, scrollOffset }) => {
           set({
             selectionFrames: getSelectionFrameSpecs({
               elements,
               scrollOffset,
-              variant: "element"
+              variant: isSection ? "section" : "element"
             })
           });
         },
@@ -424,11 +541,8 @@ const selectModeStore = createShallowStore(
         setLastPointerClientPosition: (lastPointerClientPosition) => {
           set({ lastPointerClientPosition });
         },
-        setLastPostedHoverRect: (lastPostedHoverRect) => {
-          set({ lastPostedHoverRect });
-        },
-        resetHoverRectDedup: () => {
-          set({ lastPostedHoverRect: void 0 });
+        setLastPostedHover: (lastPostedHover) => {
+          set({ lastPostedHover });
         },
         setHoverSyncAnimationFrameId: (hoverSyncAnimationFrameId) => {
           set({ hoverSyncAnimationFrameId });
@@ -557,6 +671,11 @@ const useSelectionFrames = () => {
     (state) => state.selectionFrames
   );
 };
+const useSectionHoverRect = () => {
+  return useShallowStore(useSelectModeStore(), (state) => {
+    return state.displayMode === "selection" && state.interactionSession.type !== "drag" && state.lastPostedHover?.rect?.isSection ? state.lastPostedHover.rect : null;
+  });
+};
 const useIsSelectionFrameEditing = () => {
   return useShallowStore(
     useSelectModeStore(),
@@ -579,6 +698,7 @@ export {
   useEditingElement,
   useInteractionSession,
   useIsSelectionFrameEditing,
+  useSectionHoverRect,
   useSelectModeStore,
   useSelectModeStoreActions,
   useSelectionFrames

package/select-mode/selectionFrame.d.ts

@@ -1,7 +1,9 @@
 export declare const SELECTION_FRAMES_CONTAINER_ID = "replo-select-mode-selection-frames";
 export declare const SELECTION_FRAME_BORDER_HEX = "#c026d3";
 export declare const SELECTION_FRAME_EDITING_BORDER_HEX = "#e879f9";
-export type SelectionFrameVariant = "element" | "area";
+export declare const SECTION_SELECTION_FRAME_BORDER_HEX = "#60a5fa";
+export declare const SECTION_SELECTION_FRAME_BACKGROUND = "rgba(96, 165, 250, 0.06)";
+export type SelectionFrameVariant = "element" | "area" | "section";
 export type SelectionFramePageRect = {
     x: number;
     y: number;

package/select-mode/selectionFrame.js

@@ -1,6 +1,8 @@
 const SELECTION_FRAMES_CONTAINER_ID = "replo-select-mode-selection-frames";
 const SELECTION_FRAME_BORDER_HEX = "#c026d3";
 const SELECTION_FRAME_EDITING_BORDER_HEX = "#e879f9";
+const SECTION_SELECTION_FRAME_BORDER_HEX = "#60a5fa";
+const SECTION_SELECTION_FRAME_BACKGROUND = "rgba(96, 165, 250, 0.06)";
 function getSelectionFrameSpecs({
   elements,
   scrollOffset,
@@ -20,6 +22,8 @@ function getSelectionFrameSpecs({
   });
 }
 export {
+  SECTION_SELECTION_FRAME_BACKGROUND,
+  SECTION_SELECTION_FRAME_BORDER_HEX,
   SELECTION_FRAMES_CONTAINER_ID,
   SELECTION_FRAME_BORDER_HEX,
   SELECTION_FRAME_EDITING_BORDER_HEX,