@replohq/sandbox-runtime 1.16.1 → 1.17.0

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

@@ -0,0 +1,599 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { historyStepForKey } from "../../_vendor/replo-utils/lib/historyKeys.mjs";
+import {
+  useDisplayMode,
+  useEditingElement,
+  useInteractionSession
+} from "../selectModeStore";
+import { getSectionViewportBox } from "./optimisticSectionMove";
+import {
+  isSectionCanvasControl,
+  SECTION_CANVAS_ATTRIBUTE
+} from "./sectionCanvasControls";
+import {
+  getPlacedSections,
+  getSectionGaps,
+  GHOST_WIDTH_PX,
+  sectionCanvasStore,
+  useSectionCanvasStore
+} from "./sectionCanvasStore";
+const BUTTON_SIZE = 28;
+const TOOLBAR_INSET = 8;
+const AUTO_SCROLL_EDGE = 56;
+const AUTO_SCROLL_STEP = 14;
+const ACCENT = "#2563eb";
+const ACCENT_PRESSED = "#1d4ed8";
+const PILL_HEIGHT = 22;
+const PILL_SPREAD = 64;
+const PILL_HALF_WIDTH = 52;
+const SECTION_CANVAS_CSS = `
+  [${SECTION_CANVAS_ATTRIBUTE}] button { all: initial; box-sizing: border-box; display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer !important; color: ${ACCENT}; background: #fff !important; }
+  [${SECTION_CANVAS_ATTRIBUTE}] button * { cursor: inherit !important; }
+  [${SECTION_CANVAS_ATTRIBUTE}] [data-shape="pill"] { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; border-radius: 4px; background: ${ACCENT} !important; color: #fff !important; font-family: system-ui, -apple-system, sans-serif; font-weight: 600; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2); }
+  [${SECTION_CANVAS_ATTRIBUTE}] button[data-shape="pill"]:hover, [${SECTION_CANVAS_ATTRIBUTE}] button[data-shape="pill"]:focus-visible { background: ${ACCENT_PRESSED} !important; color: #fff !important; }
+  [${SECTION_CANVAS_ATTRIBUTE}] button[data-shape="tool"] { border-radius: 4px; gap: 4px; background: transparent !important; color: #fff !important; font-family: system-ui, -apple-system, sans-serif; font-weight: 600; }
+  [${SECTION_CANVAS_ATTRIBUTE}] button[data-shape="tool"][data-grip] { cursor: grab !important; }
+  [${SECTION_CANVAS_ATTRIBUTE}] button[data-shape="tool"]:hover, [${SECTION_CANVAS_ATTRIBUTE}] button[data-shape="tool"]:focus-visible { background: ${ACCENT_PRESSED} !important; }
+  [${SECTION_CANVAS_ATTRIBUTE}] button[data-shape="tool"][data-locked] { cursor: default !important; background: transparent !important; }
+  [${SECTION_CANVAS_ATTRIBUTE}] button:focus-visible { outline: 2px solid ${ACCENT}; outline-offset: 2px; }
+  [${SECTION_CANVAS_ATTRIBUTE}][data-dragging] * { cursor: grabbing !important; }
+`;
+function useSectionCanvasListeners(isEnabled) {
+  useEffect(() => {
+    if (!isEnabled) {
+      return;
+    }
+    const { actions } = sectionCanvasStore.getState();
+    let frame = 0;
+    const scheduleGeometry = () => {
+      if (frame) {
+        return;
+      }
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        actions.bumpGeometry();
+      });
+    };
+    const trackHover = (event) => {
+      const state = sectionCanvasStore.getState();
+      if (state.drag || isSectionCanvasControl(event.target)) {
+        return;
+      }
+      const hovered = getPlacedSections(state).find(({ box }) => {
+        return event.clientY >= box.top && event.clientY <= box.bottom && event.clientX >= box.left && event.clientX <= box.right;
+      });
+      actions.setHoveredIndex(hovered?.section.index ?? null);
+    };
+    const clearHover = (event) => {
+      if (!event.relatedTarget) {
+        actions.setHoveredIndex(null);
+      }
+    };
+    const handleKeyDown = (event) => {
+      const { drag, canvas } = sectionCanvasStore.getState();
+      if (event.key === "Escape" && drag) {
+        event.preventDefault();
+        actions.endDrag({ shouldDrop: false });
+        return;
+      }
+      if (event.key === "Escape" && typeof canvas?.insertingAt === "number") {
+        event.preventDefault();
+        actions.request({ type: "cancelInsert" });
+      }
+    };
+    let resolveTimeout;
+    const domObserver = new MutationObserver(() => {
+      const { elementsByIndex } = sectionCanvasStore.getState();
+      const isStale = elementsByIndex.size === 0 || [...elementsByIndex.values()].some((elements) => {
+        return elements.some((element) => !element.isConnected);
+      });
+      if (!isStale) {
+        scheduleGeometry();
+        return;
+      }
+      clearTimeout(resolveTimeout);
+      resolveTimeout = setTimeout(() => actions.handlePreviewRefresh(), 250);
+    });
+    domObserver.observe(document.body, { childList: true, subtree: true });
+    const resizeObserver = new ResizeObserver(scheduleGeometry);
+    const observeSections = () => {
+      resizeObserver.disconnect();
+      for (const elements of sectionCanvasStore.getState().elementsByIndex.values()) {
+        for (const element of elements) {
+          resizeObserver.observe(element);
+        }
+      }
+    };
+    observeSections();
+    const unsubscribe = sectionCanvasStore.subscribe((state, previous) => {
+      if (state.elementsByIndex !== previous.elementsByIndex) {
+        observeSections();
+      }
+    });
+    document.addEventListener("pointermove", trackHover, true);
+    document.addEventListener("pointerout", clearHover, true);
+    document.addEventListener("keydown", handleKeyDown, true);
+    document.addEventListener("scroll", scheduleGeometry, true);
+    window.addEventListener("resize", scheduleGeometry);
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(resolveTimeout);
+      domObserver.disconnect();
+      resizeObserver.disconnect();
+      unsubscribe();
+      document.removeEventListener("pointermove", trackHover, true);
+      document.removeEventListener("pointerout", clearHover, true);
+      document.removeEventListener("keydown", handleKeyDown, true);
+      document.removeEventListener("scroll", scheduleGeometry, true);
+      window.removeEventListener("resize", scheduleGeometry);
+      actions.setHoveredIndex(null);
+    };
+  }, [isEnabled]);
+}
+function useHistoryShortcutRelay(hasCanvas) {
+  useEffect(() => {
+    if (!hasCanvas) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      const step = historyStepForKey(event);
+      if (!step) {
+        return;
+      }
+      event.preventDefault();
+      if (!event.repeat) {
+        sectionCanvasStore.getState().actions.request({ type: step });
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => document.removeEventListener("keydown", handleKeyDown, true);
+  }, [hasCanvas]);
+}
+function useAutoScrollWhileDragging(isDragging) {
+  useEffect(() => {
+    if (!isDragging) {
+      return;
+    }
+    let frame = requestAnimationFrame(function step() {
+      const { drag, canvas, actions } = sectionCanvasStore.getState();
+      if (drag?.isActive) {
+        const edge = AUTO_SCROLL_EDGE / (canvas?.previewScale ?? 1);
+        const step2 = AUTO_SCROLL_STEP / (canvas?.previewScale ?? 1);
+        let delta = 0;
+        if (drag.y < edge) {
+          delta = -step2;
+        } else if (drag.y > window.innerHeight - edge) {
+          delta = step2;
+        }
+        if (delta !== 0) {
+          window.scrollBy(0, delta);
+          actions.updateDrag({ x: drag.x, y: drag.y });
+        }
+      }
+      frame = requestAnimationFrame(step);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [isDragging]);
+}
+function useCancelDragWhenDisabled(isEnabled) {
+  useEffect(() => {
+    const { endDrag } = sectionCanvasStore.getState().actions;
+    if (!isEnabled) {
+      endDrag({ shouldDrop: false });
+      return void 0;
+    }
+    return () => endDrag({ shouldDrop: false });
+  }, [isEnabled]);
+}
+function SectionCanvas() {
+  const displayMode = useDisplayMode();
+  const editingElement = useEditingElement();
+  const session = useInteractionSession();
+  const { canvas, elementsByIndex, hoveredIndex, drag, isMovePending } = useSectionCanvasStore((state) => ({
+    canvas: state.canvas,
+    elementsByIndex: state.elementsByIndex,
+    hoveredIndex: state.hoveredIndex,
+    drag: state.drag,
+    isMovePending: state.pendingMove !== null,
+    geometryVersion: state.geometryVersion
+  }));
+  const isEnabled = canvas !== null && displayMode === "selection" && !editingElement && !canvas.isDisabled;
+  useSectionCanvasListeners(isEnabled);
+  useHistoryShortcutRelay(canvas !== null);
+  useAutoScrollWhileDragging(drag !== null);
+  useCancelDragWhenDisabled(isEnabled);
+  if (!isEnabled || typeof document === "undefined" || !document.body) {
+    return null;
+  }
+  const unit = 1 / canvas.previewScale;
+  const visible = {
+    left: canvas.occludedInsets?.left ?? 0,
+    right: window.innerWidth - (canvas.occludedInsets?.right ?? 0)
+  };
+  const selectedIndex = session.type === "element" ? [...elementsByIndex.entries()].find(([, elements]) => {
+    return elements.some((element) => element.contains(session.element));
+  })?.[0] ?? null : null;
+  const activeIndex = drag ? drag.index : hoveredIndex ?? selectedIndex;
+  const activeSection = activeIndex === null ? void 0 : canvas.sections[activeIndex];
+  const activeBox = activeIndex === null ? null : getSectionViewportBox(elementsByIndex.get(activeIndex));
+  let overlay = null;
+  if (activeSection && activeBox && !isMovePending) {
+    overlay = /* @__PURE__ */ jsx(
+      SectionControls,
+      {
+        index: activeSection.index,
+        label: activeSection.label,
+        isLocked: activeSection.isLocked,
+        isFirst: activeSection.index === 0,
+        isLast: activeSection.index === canvas.sections.length - 1,
+        box: activeBox,
+        visible,
+        unit,
+        isDragging: drag !== null,
+        isPicking: typeof canvas.insertingAt === "number"
+      }
+    );
+  }
+  let insertMarker = null;
+  const insertingAt = canvas.insertingAt;
+  if (typeof insertingAt === "number" && !drag) {
+    const placed = getPlacedSections({ canvas, elementsByIndex });
+    const gap = getSectionGaps(placed, canvas.sections.length).find(
+      (candidate) => candidate.at === insertingAt
+    );
+    if (gap) {
+      const left = Math.max(
+        visible.left,
+        Math.min(...placed.map(({ box }) => box.left))
+      );
+      const right = Math.min(
+        visible.right,
+        Math.max(...placed.map(({ box }) => box.right))
+      );
+      const y = Math.min(
+        Math.max(gap.y, PILL_HEIGHT * unit),
+        window.innerHeight - PILL_HEIGHT * unit
+      );
+      insertMarker = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              left,
+              width: right - left,
+              top: y - 1.5 * unit,
+              height: 3 * unit,
+              background: ACCENT
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-shape": "pill",
+            role: "status",
+            style: {
+              left: (left + right) / 2,
+              top: y,
+              height: PILL_HEIGHT * unit,
+              padding: `0 ${10 * unit}px`,
+              fontSize: 11 * unit,
+              display: "flex",
+              alignItems: "center"
+            },
+            children: "New Section Goes Here"
+          }
+        )
+      ] });
+    }
+  }
+  let dragLayer = null;
+  if (drag?.isActive && activeBox) {
+    const placed = getPlacedSections({ canvas, elementsByIndex });
+    const gap = drag.gap === null ? null : getSectionGaps(placed, canvas.sections.length).find((candidate) => {
+      return candidate.at === drag.gap;
+    });
+    const lineLeft = Math.min(...placed.map(({ box }) => box.left));
+    const lineRight = Math.max(...placed.map(({ box }) => box.right));
+    const ghostWidth = GHOST_WIDTH_PX * unit;
+    const ghostHeight = Math.min(
+      (activeBox.bottom - activeBox.top) / (activeBox.right - activeBox.left) * ghostWidth,
+      ghostWidth * 0.75
+    );
+    dragLayer = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            left: activeBox.left,
+            top: activeBox.top,
+            width: activeBox.right - activeBox.left,
+            height: activeBox.bottom - activeBox.top,
+            background: "rgba(255, 255, 255, 0.65)",
+            outline: `${2 * unit}px dashed ${ACCENT}`,
+            outlineOffset: -unit
+          }
+        }
+      ),
+      gap && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-replo-section-drop-line": true,
+          style: {
+            position: "fixed",
+            left: lineLeft,
+            width: lineRight - lineLeft,
+            top: Math.min(
+              Math.max(gap.y, 3 * unit),
+              window.innerHeight - 3 * unit
+            ) - 1.5 * unit,
+            height: 3 * unit,
+            borderRadius: 3 * unit,
+            background: ACCENT,
+            boxShadow: `0 0 0 ${unit}px #fff`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            left: drag.x + 14 * unit + ghostWidth > window.innerWidth ? drag.x - 14 * unit - ghostWidth : drag.x + 14 * unit,
+            top: Math.min(
+              drag.y + 14 * unit,
+              window.innerHeight - ghostHeight - 8 * unit
+            ),
+            width: ghostWidth,
+            height: ghostHeight,
+            overflow: "hidden",
+            borderRadius: 6 * unit,
+            background: "#fff",
+            boxShadow: `0 ${8 * unit}px ${24 * unit}px rgba(15, 23, 42, 0.25), 0 0 0 ${unit}px rgba(15, 23, 42, 0.12)`,
+            opacity: 0.95,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            font: `500 ${12 * unit}px/1.3 system-ui, sans-serif`,
+            color: "#3f3f46"
+          },
+          children: drag.ghostSrc ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: drag.ghostSrc,
+              alt: "",
+              style: {
+                display: "block",
+                width: "100%",
+                height: "auto",
+                alignSelf: "flex-start"
+              }
+            }
+          ) : activeSection?.label ?? "Section"
+        }
+      )
+    ] });
+  }
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...{ [SECTION_CANVAS_ATTRIBUTE]: "" },
+        "data-dragging": drag?.isActive ? "" : void 0,
+        role: "group",
+        "aria-label": "Page sections",
+        style: {
+          all: "initial",
+          position: "fixed",
+          inset: 0,
+          zIndex: 2147483647,
+          pointerEvents: "none"
+        },
+        onPointerDown: (event) => event.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx("style", { children: SECTION_CANVAS_CSS }),
+          insertMarker,
+          overlay,
+          dragLayer
+        ]
+      }
+    ),
+    document.body
+  );
+}
+function SectionControls({
+  index,
+  label,
+  isLocked,
+  isFirst,
+  isLast,
+  box,
+  visible,
+  unit,
+  isDragging,
+  isPicking
+}) {
+  const { actions } = sectionCanvasStore.getState();
+  const size = BUTTON_SIZE * unit;
+  const pillHeight = PILL_HEIGHT * unit;
+  const inset = pillHeight / 2 + 4 * unit;
+  const clampY = (y) => {
+    return Math.max(inset, Math.min(window.innerHeight - inset, y));
+  };
+  const topY = clampY(box.top);
+  const bottomY = clampY(box.bottom);
+  const spread = bottomY - topY < pillHeight * 2 ? PILL_SPREAD * unit : 0;
+  const centerX = Math.min(
+    Math.max(
+      (box.left + box.right) / 2,
+      visible.left + PILL_HALF_WIDTH * unit + spread
+    ),
+    visible.right - PILL_HALF_WIDTH * unit - spread
+  );
+  const toolbarTop = Math.max(box.top, 0) + TOOLBAR_INSET * unit;
+  const textButton = {
+    height: size,
+    padding: `0 ${8 * unit}px`,
+    fontSize: 12 * unit
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          left: box.left,
+          top: box.top,
+          width: box.right - box.left,
+          height: box.bottom - box.top,
+          boxSizing: "border-box",
+          border: `${2 * unit}px solid ${ACCENT}`,
+          pointerEvents: "none"
+        }
+      }
+    ),
+    !isDragging && !isPicking && [
+      { edge: "above", at: index, top: topY, left: centerX - spread },
+      {
+        edge: "below",
+        at: index + 1,
+        top: bottomY,
+        left: centerX + spread
+      }
+    ].map(({ edge, at, top, left }) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-shape": "pill",
+        "aria-label": `Add Section ${edge} ${label}`,
+        style: {
+          left,
+          top,
+          height: pillHeight,
+          padding: `0 ${10 * unit}px`,
+          fontSize: 11 * unit
+        },
+        onClick: () => actions.request({ type: "insert", at }),
+        children: "Add Section"
+      },
+      edge
+    )),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: toolbarTop,
+          right: window.innerWidth - Math.min(box.right, visible.right) + TOOLBAR_INSET * unit,
+          display: "flex",
+          gap: 2 * unit,
+          padding: 2 * unit,
+          background: ACCENT,
+          borderRadius: 6 * unit,
+          boxShadow: "0 2px 6px rgba(15, 23, 42, 0.2)",
+          pointerEvents: "auto",
+          opacity: isDragging ? 0 : 1
+        },
+        children: isLocked ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-shape": "tool",
+            "aria-label": `${label} is shown conditionally in code; change it in chat`,
+            title: "Shown conditionally or repeated in code, so change it in chat",
+            "data-locked": "",
+            style: textButton,
+            children: "Locked"
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "data-shape": "tool",
+              "data-grip": "",
+              "aria-label": `Move ${label}. Drag, or use the arrow keys`,
+              title: "Drag to move",
+              style: { ...textButton, touchAction: "none" },
+              onPointerDown: (event) => {
+                if (event.button !== 0) {
+                  return;
+                }
+                event.preventDefault();
+                event.currentTarget.setPointerCapture(event.pointerId);
+                actions.beginDrag({
+                  index,
+                  pointerId: event.pointerId,
+                  x: event.clientX,
+                  y: event.clientY
+                });
+              },
+              onPointerMove: (event) => {
+                if (sectionCanvasStore.getState().drag?.pointerId === event.pointerId) {
+                  actions.updateDrag({ x: event.clientX, y: event.clientY });
+                }
+              },
+              onPointerUp: () => actions.endDrag({ shouldDrop: true }),
+              onPointerCancel: () => actions.endDrag({ shouldDrop: false }),
+              onKeyDown: (event) => {
+                if (event.key === "ArrowUp" && !isFirst) {
+                  event.preventDefault();
+                  actions.move({ index, to: index - 1 });
+                } else if (event.key === "ArrowDown" && !isLast) {
+                  event.preventDefault();
+                  actions.move({ index, to: index + 1 });
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx(GripIcon, { size: 14 * unit }),
+                "Move"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-shape": "tool",
+              "aria-label": `Remove ${label}`,
+              title: "Remove section",
+              style: textButton,
+              onClick: () => actions.request({ type: "remove", index }),
+              children: "Remove"
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+const GRIP_DOTS = [
+  [5, 3],
+  [5, 8],
+  [5, 13],
+  [11, 3],
+  [11, 8],
+  [11, 13]
+];
+function GripIcon({ size }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", "aria-hidden": "true", children: GRIP_DOTS.map(([cx, cy]) => {
+    return /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        r: 1.5,
+        fill: "currentColor"
+      },
+      `${cx}-${cy}`
+    );
+  }) });
+}
+export {
+  SectionCanvas
+};

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 {};