@replohq/sandbox-runtime 1.16.2 → 1.17.0

package/select-mode/section-canvas/optimisticSectionMove.d.ts

@@ -0,0 +1,39 @@
+type SectionBox = {
+    index: number;
+    elements: HTMLElement[];
+};
+/** How far each section shifts once `from` moves to `to`, keeping the original gaps between slots. */
+export declare function getMovedSectionOffsets({ sections, from, to, }: {
+    sections: readonly {
+        index: number;
+        top: number;
+        bottom: number;
+    }[];
+    from: number;
+    to: number;
+}): Map<number, number>;
+export type ViewportBox = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+/** A section's on-screen box: the union of its connected elements, or null when it renders nothing visible. */
+export declare function getSectionViewportBox(elements: readonly HTMLElement[] | undefined): ViewportBox | null;
+/**
+ * Shows a dropped section in its new place before the source change reaches the preview, by
+ * shifting sections with transforms instead of moving DOM nodes: React keeps positional children,
+ * so nodes moved behind its back would get the wrong content when the refresh commits. The shift
+ * clears itself the moment the preview's own DOM reflects the move (checked before paint), so the
+ * page never shows the old order in between.
+ */
+export declare function startOptimisticSectionMove({ sections, from, to, onLanded, }: {
+    sections: readonly SectionBox[];
+    from: number;
+    to: number;
+    onLanded: () => void;
+}): {
+    revert: () => void;
+    settle: () => void;
+};
+export {};

package/select-mode/section-canvas/optimisticSectionMove.js

@@ -0,0 +1,172 @@
+const SETTLE_TRANSITION = "transform 180ms cubic-bezier(0.2, 0, 0, 1)";
+function getTargetPosition({
+  indices,
+  from,
+  to
+}) {
+  return indices.filter((index) => {
+    return index !== from && (index < from ? index : index - 1) < to;
+  }).length;
+}
+function getMovedSectionOffsets({
+  sections,
+  from,
+  to
+}) {
+  const fromPosition = sections.findIndex((section) => section.index === from);
+  const toPosition = getTargetPosition({
+    indices: sections.map((section) => section.index),
+    from,
+    to
+  });
+  const offsets = /* @__PURE__ */ new Map();
+  if (fromPosition === -1 || fromPosition === toPosition) {
+    return offsets;
+  }
+  const low = Math.min(fromPosition, toPosition);
+  const high = Math.max(fromPosition, toPosition);
+  const original = sections.slice(low, high + 1);
+  const reordered = [...original];
+  const [moved] = reordered.splice(fromPosition - low, 1);
+  reordered.splice(toPosition - low, 0, moved);
+  let cursor = original[0].top;
+  reordered.forEach((section, slot) => {
+    offsets.set(section.index, cursor - section.top);
+    const gapAfterSlot = slot < original.length - 1 ? original[slot + 1].top - original[slot].bottom : 0;
+    cursor += section.bottom - section.top + gapAfterSlot;
+  });
+  return offsets;
+}
+function getSectionViewportBox(elements) {
+  const rects = (elements ?? []).filter((element) => element.isConnected).map((element) => element.getBoundingClientRect()).filter((rect) => rect.width !== 0 || rect.height !== 0);
+  if (rects.length === 0) {
+    return null;
+  }
+  return {
+    top: Math.min(...rects.map((rect) => rect.top)),
+    bottom: Math.max(...rects.map((rect) => rect.bottom)),
+    left: Math.min(...rects.map((rect) => rect.left)),
+    right: Math.max(...rects.map((rect) => rect.right))
+  };
+}
+function startOptimisticSectionMove({
+  sections,
+  from,
+  to,
+  onLanded
+}) {
+  const placed = sections.flatMap((section) => {
+    const box = getSectionViewportBox(section.elements);
+    return box ? [{ ...section, ...box }] : [];
+  });
+  const offsets = getMovedSectionOffsets({ sections: placed, from, to });
+  const shifted = [];
+  for (const section of placed) {
+    const offset = offsets.get(section.index);
+    if (!offset) {
+      continue;
+    }
+    for (const element of section.elements) {
+      const { transform, transition, position, zIndex } = element.style;
+      shifted.push({
+        element,
+        saved: { transform, transition, position, zIndex }
+      });
+      element.style.transition = SETTLE_TRANSITION;
+      element.style.transform = `${transform} translateY(${offset}px)`.trim();
+      if (section.index === from) {
+        element.style.position = position || "relative";
+        element.style.zIndex = "1";
+      }
+    }
+  }
+  const order = placed.map((section) => section.index);
+  const fromPosition = order.indexOf(from);
+  const reordered = [...order];
+  reordered.splice(fromPosition, 1);
+  reordered.splice(getTargetPosition({ indices: order, from, to }), 0, from);
+  const textBySection = new Map(
+    placed.map((section) => [
+      section.index,
+      section.elements.map((element) => element.textContent ?? "").join("\n")
+    ])
+  );
+  const watchedSlots = placed.flatMap((section, slot) => {
+    const expected = textBySection.get(reordered[slot]);
+    return expected === textBySection.get(section.index) ? [] : [{ elements: section.elements, expected }];
+  });
+  const containers = new Set(
+    placed.flatMap((section) => {
+      return section.elements.flatMap((element) => {
+        return element.parentNode ? [element.parentNode] : [];
+      });
+    })
+  );
+  let isDone = false;
+  let fallbackTimeout;
+  const finish = ({ animate }) => {
+    if (isDone) {
+      return;
+    }
+    isDone = true;
+    observer.disconnect();
+    clearTimeout(fallbackTimeout);
+    for (const { element, saved } of shifted) {
+      element.style.transition = animate ? SETTLE_TRANSITION : "none";
+      element.style.transform = saved.transform;
+      element.style.position = saved.position;
+      element.style.zIndex = saved.zIndex;
+    }
+    const restoreTransitions = () => {
+      for (const { element, saved } of shifted) {
+        element.style.transition = saved.transition;
+      }
+    };
+    if (animate) {
+      setTimeout(restoreTransitions, 200);
+    } else {
+      restoreTransitions();
+    }
+  };
+  const hasLanded = (records) => {
+    if (records.some((record) => {
+      return record.type === "childList" && containers.has(record.target);
+    })) {
+      return true;
+    }
+    return watchedSlots.length > 0 && watchedSlots.every(({ elements, expected }) => {
+      return elements.some((element) => !element.isConnected) || elements.map((element) => element.textContent ?? "").join("\n") === expected;
+    });
+  };
+  const observer = new MutationObserver((records) => {
+    if (hasLanded(records)) {
+      finish({ animate: false });
+      onLanded();
+    }
+  });
+  for (const container of containers) {
+    observer.observe(container, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+  }
+  return {
+    revert: () => finish({ animate: true }),
+    settle: () => {
+      if (isDone) {
+        return;
+      }
+      clearTimeout(fallbackTimeout);
+      fallbackTimeout = setTimeout(() => {
+        finish({ animate: false });
+        onLanded();
+      }, 8e3);
+    }
+  };
+}
+export {
+  getMovedSectionOffsets,
+  getSectionViewportBox,
+  startOptimisticSectionMove
+};

package/select-mode/section-canvas/sectionCanvasControls.d.ts

@@ -0,0 +1,3 @@
+export declare const SECTION_CANVAS_ATTRIBUTE = "data-replo-section-canvas";
+/** The canvas's own buttons and drag handles, which Select Mode's click, drag and hover must leave alone. */
+export declare function isSectionCanvasControl(target: EventTarget | null): boolean;

package/select-mode/section-canvas/sectionCanvasControls.js

@@ -0,0 +1,8 @@
+const SECTION_CANVAS_ATTRIBUTE = "data-replo-section-canvas";
+function isSectionCanvasControl(target) {
+  return target instanceof Element && Boolean(target.closest(`[${SECTION_CANVAS_ATTRIBUTE}]`));
+}
+export {
+  SECTION_CANVAS_ATTRIBUTE,
+  isSectionCanvasControl
+};

package/select-mode/section-canvas/sectionCanvasStore.d.ts

@@ -0,0 +1,71 @@
+import type { SectionCanvasRequest, SectionCanvasState } from "../../_vendor/schemas/generated/selectModeIframeRpc";
+export type SectionDrag = {
+    index: number;
+    pointerId: number;
+    startX: number;
+    startY: number;
+    x: number;
+    y: number;
+    isActive: boolean;
+    ghostSrc: string | null;
+    gap: number | null;
+};
+type PendingMove = {
+    moveId: string;
+    settle: () => void;
+    revert: () => void;
+};
+type SectionCanvasStoreState = {
+    canvas: SectionCanvasState | null;
+    elementsByIndex: ReadonlyMap<number, readonly HTMLElement[]>;
+    hoveredIndex: number | null;
+    drag: SectionDrag | null;
+    pendingMove: PendingMove | null;
+    geometryVersion: number;
+    actions: {
+        setCanvas: (canvas: SectionCanvasState | null) => void;
+        resolveSections: () => Promise<void>;
+        handlePreviewRefresh: () => void;
+        bumpGeometry: () => void;
+        setHoveredIndex: (index: number | null) => void;
+        request: (request: SectionCanvasRequest) => void;
+        beginDrag: (input: {
+            index: number;
+            pointerId: number;
+            x: number;
+            y: number;
+        }) => void;
+        updateDrag: (input: {
+            x: number;
+            y: number;
+        }) => void;
+        endDrag: (input: {
+            shouldDrop: boolean;
+        }) => void;
+        move: (input: {
+            index: number;
+            to: number;
+        }) => void;
+        settleMove: (input: {
+            moveId: string;
+            outcome: "persisted" | "failed";
+        }) => void;
+    };
+};
+export declare const GHOST_WIDTH_PX = 240;
+/** On-screen sections in page order, with their boxes. */
+export declare function getPlacedSections(state: Pick<SectionCanvasStoreState, "canvas" | "elementsByIndex">): {
+    section: import("../../_vendor/schemas/generated/selectModeIframeRpc").SectionCanvasSection;
+    box: import("./optimisticSectionMove").ViewportBox;
+}[];
+/**
+ * The insertion points between on-screen sections: `at` is the index a new or moved section goes
+ * before in the page's list, `y` the viewport line drawn for it.
+ */
+export declare function getSectionGaps(placed: ReturnType<typeof getPlacedSections>, sectionCount: number): {
+    at: number;
+    y: number;
+}[];
+export declare const sectionCanvasStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<import("zustand").StoreApi<SectionCanvasStoreState>>;
+export declare function useSectionCanvasStore<Selected>(selector: (state: SectionCanvasStoreState) => Selected): Selected;
+export {};

package/select-mode/section-canvas/sectionCanvasStore.js

@@ -0,0 +1,275 @@
+"use client";
+import { createShallowStore } from "../../_vendor/replo-utils/react/zustand.mjs";
+import { getWebsiteBuilderRpc } from "../iframeRpcChannel";
+import { getDocumentScrollOffset } from "../interactions/selectionGeometry";
+import { useShallowStore } from "../useShallowStore";
+import {
+  getSectionViewportBox,
+  startOptimisticSectionMove
+} from "./optimisticSectionMove";
+import { findSectionElements } from "./sectionElements";
+import { captureSectionGhost } from "./sectionGhost";
+const DRAG_THRESHOLD_PX = 4;
+const GHOST_WIDTH_PX = 240;
+let resolveToken = 0;
+let moveCounter = 0;
+function sameSections(previous, next) {
+  if (!previous || !next || previous.pageFilePath !== next.pageFilePath) {
+    return false;
+  }
+  return previous.sections.length === next.sections.length && previous.sections.every((section, position) => {
+    const other = next.sections[position];
+    return section.index === other.index && section.startLine === other.startLine && section.endLine === other.endLine;
+  });
+}
+function getPlacedSections(state) {
+  return (state.canvas?.sections ?? []).flatMap((section) => {
+    const box = getSectionViewportBox(state.elementsByIndex.get(section.index));
+    return box ? [{ section, box }] : [];
+  });
+}
+function getSectionGaps(placed, sectionCount) {
+  const gaps = placed.map(({ section, box }, position) => {
+    const previous = placed[position - 1];
+    return {
+      at: section.index,
+      y: previous ? (previous.box.bottom + box.top) / 2 : box.top
+    };
+  });
+  const last = placed.at(-1);
+  if (last) {
+    gaps.push({
+      at: Math.max(last.section.index + 1, sectionCount),
+      y: last.box.bottom
+    });
+  }
+  return gaps;
+}
+function getDropGap({
+  state,
+  index,
+  y
+}) {
+  const gaps = getSectionGaps(
+    getPlacedSections(state),
+    state.canvas?.sections.length ?? 0
+  );
+  let nearest = null;
+  for (const gap of gaps) {
+    const distance = Math.abs(gap.y - y);
+    if (!nearest || distance < nearest.distance) {
+      nearest = { at: gap.at, distance };
+    }
+  }
+  if (!nearest || nearest.at === index || nearest.at === index + 1) {
+    return null;
+  }
+  return nearest.at;
+}
+function reportLayout(state) {
+  if (!state.canvas) {
+    return;
+  }
+  const scroll = getDocumentScrollOffset();
+  const sections = getPlacedSections(state).map(
+    ({ section, box }) => {
+      const left = box.left + scroll.left;
+      const top = box.top + scroll.top;
+      const width = box.right - box.left;
+      const height = box.bottom - box.top;
+      return {
+        index: section.index,
+        startLine: section.startLine,
+        endLine: section.endLine,
+        rect: {
+          x: left,
+          y: top,
+          left,
+          top,
+          right: left + width,
+          bottom: top + height,
+          width,
+          height
+        }
+      };
+    }
+  );
+  getWebsiteBuilderRpc()?.sectionCanvasLayoutChanged({ sections });
+}
+const sectionCanvasStore = createShallowStore(
+  (set, get) => ({
+    canvas: null,
+    elementsByIndex: /* @__PURE__ */ new Map(),
+    hoveredIndex: null,
+    drag: null,
+    pendingMove: null,
+    geometryVersion: 0,
+    actions: {
+      setCanvas: (canvas) => {
+        const previous = get().canvas;
+        set({ canvas });
+        if (!canvas) {
+          resolveToken += 1;
+          get().pendingMove?.revert();
+          set({
+            elementsByIndex: /* @__PURE__ */ new Map(),
+            hoveredIndex: null,
+            drag: null,
+            pendingMove: null
+          });
+          return;
+        }
+        if (canvas.isDisabled && get().drag) {
+          set({ drag: null });
+        }
+        if (!sameSections(previous, canvas) && !get().pendingMove) {
+          void get().actions.resolveSections();
+        }
+      },
+      resolveSections: async () => {
+        const canvas = get().canvas;
+        if (!canvas || typeof document === "undefined" || !document.body) {
+          return;
+        }
+        const token = ++resolveToken;
+        const elementsByIndex = await findSectionElements({
+          root: document.body,
+          pageFilePath: canvas.pageFilePath,
+          sections: canvas.sections
+        }).catch(() => /* @__PURE__ */ new Map());
+        if (token !== resolveToken) {
+          return;
+        }
+        set((state) => ({
+          elementsByIndex,
+          geometryVersion: state.geometryVersion + 1
+        }));
+        reportLayout(get());
+      },
+      handlePreviewRefresh: () => {
+        if (!get().canvas || get().pendingMove) {
+          return;
+        }
+        void get().actions.resolveSections();
+      },
+      bumpGeometry: () => {
+        set((state) => ({ geometryVersion: state.geometryVersion + 1 }));
+      },
+      setHoveredIndex: (hoveredIndex) => {
+        if (get().hoveredIndex !== hoveredIndex) {
+          set({ hoveredIndex });
+        }
+      },
+      request: (request) => {
+        getWebsiteBuilderRpc()?.sectionCanvasRequest({ request });
+      },
+      beginDrag: ({ index, pointerId, x, y }) => {
+        const elements = get().elementsByIndex.get(index) ?? [];
+        set({
+          drag: {
+            index,
+            pointerId,
+            startX: x,
+            startY: y,
+            x,
+            y,
+            isActive: false,
+            ghostSrc: null,
+            gap: null
+          }
+        });
+        const scale = get().canvas?.previewScale ?? 1;
+        void captureSectionGhost({
+          elements,
+          width: GHOST_WIDTH_PX / scale
+        }).then((ghostSrc) => {
+          const drag = get().drag;
+          if (ghostSrc && drag?.pointerId === pointerId && drag.index === index) {
+            set({ drag: { ...drag, ghostSrc } });
+          }
+        });
+      },
+      updateDrag: ({ x, y }) => {
+        const state = get();
+        const drag = state.drag;
+        if (!drag) {
+          return;
+        }
+        const scale = state.canvas?.previewScale ?? 1;
+        const isActive = drag.isActive || Math.hypot(x - drag.startX, y - drag.startY) * scale > DRAG_THRESHOLD_PX;
+        set({
+          drag: {
+            ...drag,
+            x,
+            y,
+            isActive,
+            gap: isActive ? getDropGap({ state, index: drag.index, y }) : null
+          }
+        });
+      },
+      endDrag: ({ shouldDrop }) => {
+        const drag = get().drag;
+        set({ drag: null });
+        if (!shouldDrop || !drag?.isActive || drag.gap === null) {
+          return;
+        }
+        get().actions.move({
+          index: drag.index,
+          to: drag.gap > drag.index ? drag.gap - 1 : drag.gap
+        });
+      },
+      move: ({ index, to }) => {
+        const state = get();
+        const sectionCount = state.canvas?.sections.length ?? 0;
+        if (!state.canvas || state.canvas.isDisabled || state.pendingMove || state.canvas.sections[index]?.isLocked !== false || to === index || to < 0 || to >= sectionCount) {
+          return;
+        }
+        moveCounter += 1;
+        const moveId = `section-move-${Date.now()}-${moveCounter}`;
+        const optimistic = startOptimisticSectionMove({
+          sections: state.canvas.sections.map((section) => ({
+            index: section.index,
+            elements: [...state.elementsByIndex.get(section.index) ?? []]
+          })),
+          from: index,
+          to,
+          onLanded: () => {
+            if (get().pendingMove?.moveId !== moveId) {
+              return;
+            }
+            set({ pendingMove: null });
+            void get().actions.resolveSections();
+          }
+        });
+        set({
+          pendingMove: { moveId, ...optimistic },
+          hoveredIndex: null
+        });
+        get().actions.request({ type: "move", moveId, index, to });
+      },
+      settleMove: ({ moveId, outcome }) => {
+        const pendingMove = get().pendingMove;
+        if (pendingMove?.moveId !== moveId) {
+          return;
+        }
+        if (outcome === "persisted") {
+          pendingMove.settle();
+          return;
+        }
+        pendingMove.revert();
+        set({ pendingMove: null });
+        void get().actions.resolveSections();
+      }
+    }
+  })
+);
+function useSectionCanvasStore(selector) {
+  return useShallowStore(sectionCanvasStore, selector);
+}
+export {
+  GHOST_WIDTH_PX,
+  getPlacedSections,
+  getSectionGaps,
+  sectionCanvasStore,
+  useSectionCanvasStore
+};

package/select-mode/section-canvas/sectionElements.d.ts

@@ -0,0 +1,16 @@
+import type { SelectModeSourceLocation } from "../../_vendor/schemas/generated/selectMode";
+import type { SectionCanvasSection } from "../../_vendor/schemas/generated/selectModeIframeRpc";
+type Resolve = (locations: readonly SelectModeSourceLocation[]) => Promise<SelectModeSourceLocation[]>;
+/**
+ * The DOM elements each page section renders, found from source, not layout: an element belongs to
+ * a section when a JSX call site in its owner chain lies in the page file inside that section's lines. Walks down from <body> a level at a time, symbolicating each level
+ * in one request and stopping at the first element that matches, so a section's descendants are
+ * never read.
+ */
+export declare function findSectionElements({ root, pageFilePath, sections, resolve, }: {
+    root: Element;
+    pageFilePath: string;
+    sections: readonly Pick<SectionCanvasSection, "index" | "startLine" | "endLine">[];
+    resolve?: Resolve;
+}): Promise<Map<number, HTMLElement[]>>;
+export {};

package/select-mode/section-canvas/sectionElements.js

@@ -0,0 +1,94 @@
+import { isSectionCanvasPageFile } from "../../_vendor/schemas/selectModeIframeRpc.mjs";
+import { getElementSourceChain } from "../fiber";
+import { symbolicateSourceLocations } from "../symbolicate";
+import { isSectionCanvasControl } from "./sectionCanvasControls";
+const MAX_DEPTH = 14;
+const MAX_ELEMENTS = 2e3;
+const SKIPPED_TAGS = /* @__PURE__ */ new Set([
+  "SCRIPT",
+  "STYLE",
+  "LINK",
+  "META",
+  "TEMPLATE",
+  "NOSCRIPT"
+]);
+async function findSectionElements({
+  root,
+  pageFilePath,
+  sections,
+  resolve = symbolicateSourceLocations
+}) {
+  const found = /* @__PURE__ */ new Map();
+  const resolved = /* @__PURE__ */ new Map();
+  let level = Array.from(root.children);
+  let visited = 0;
+  for (let depth = 0; depth < MAX_DEPTH && level.length > 0; depth += 1) {
+    const candidates = level.flatMap((element) => {
+      if (!(element instanceof HTMLElement) || SKIPPED_TAGS.has(element.tagName) || isSectionCanvasControl(element)) {
+        return [];
+      }
+      const chain = getElementSourceChain(element).map(
+        (source) => ({
+          filePath: source.fileName,
+          lineNumber: source.lineNumber,
+          columnNumber: source.columnNumber
+        })
+      );
+      return [{ element, chain }];
+    });
+    visited += candidates.length;
+    const pending = /* @__PURE__ */ new Map();
+    for (const { chain } of candidates) {
+      for (const location of chain) {
+        const key = locationKey(location);
+        if (!resolved.has(key)) {
+          pending.set(key, location);
+        }
+      }
+    }
+    if (pending.size > 0) {
+      const keys = [...pending.keys()];
+      const results = await resolve([...pending.values()]);
+      keys.forEach((key, index) => {
+        resolved.set(key, results[index] ?? pending.get(key));
+      });
+    }
+    const next = [];
+    for (const { element, chain } of candidates) {
+      let section;
+      for (const location of chain) {
+        const original = resolved.get(locationKey(location));
+        if (!original || !isSectionCanvasPageFile({
+          filePath: original.filePath,
+          pageFilePath
+        })) {
+          continue;
+        }
+        section = sections.find((candidate) => {
+          return candidate.startLine <= original.lineNumber && original.lineNumber <= candidate.endLine;
+        });
+        if (section) {
+          break;
+        }
+      }
+      if (section) {
+        const elements = found.get(section.index) ?? [];
+        elements.push(element);
+        found.set(section.index, elements);
+        continue;
+      }
+      next.push(...Array.from(element.children));
+    }
+    if (visited >= MAX_ELEMENTS) {
+      break;
+    }
+    level = next;
+  }
+  return found;
+}
+function locationKey(location) {
+  return `${location.filePath}:${location.lineNumber}:${location.columnNumber ?? ""}`;
+}
+export {
+  findSectionElements
+};

package/select-mode/section-canvas/sectionGhost.d.ts

@@ -0,0 +1,5 @@
+/** A small picture of a section to drag around, or null when it can't be drawn. */
+export declare function captureSectionGhost({ elements, width, }: {
+    elements: readonly HTMLElement[];
+    width: number;
+}): Promise<string | null>;