@replohq/sandbox-runtime 1.18.0 → 1.19.0

package/heatmaps/heatRender.js

@@ -0,0 +1,198 @@
+const STOPS = [
+  { offset: 0, color: "rgba(40, 60, 255, 0)" },
+  { offset: 0.18, color: "rgba(40, 90, 255, 0.55)" },
+  { offset: 0.38, color: "rgba(0, 200, 220, 0.7)" },
+  { offset: 0.55, color: "rgba(60, 220, 90, 0.78)" },
+  { offset: 0.72, color: "rgba(255, 225, 40, 0.86)" },
+  { offset: 0.86, color: "rgba(255, 140, 20, 0.92)" },
+  { offset: 1, color: "rgba(240, 30, 40, 0.95)" }
+];
+const SCRIM_COLOR = "rgba(20, 18, 40, 0.24)";
+const MARK_LINE_COLOR = "rgba(255, 255, 255, 0.95)";
+const MARK_LABEL_BACKGROUND = "rgba(23, 23, 23, 0.85)";
+const REACH_MARKS = [0.75, 0.5, 0.25];
+const LABEL_FONT_PX = 13;
+let paletteCache = null;
+function getPalette() {
+  if (paletteCache) {
+    return paletteCache;
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = 256;
+  canvas.height = 1;
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) {
+    return null;
+  }
+  const gradient = context.createLinearGradient(0, 0, 256, 0);
+  for (const stop of STOPS) {
+    gradient.addColorStop(stop.offset, stop.color);
+  }
+  context.fillStyle = gradient;
+  context.fillRect(0, 0, 256, 1);
+  paletteCache = context.getImageData(0, 0, 256, 1).data;
+  return paletteCache;
+}
+const stampCache = /* @__PURE__ */ new Map();
+function getDiscStamp(radius) {
+  const cached = stampCache.get(radius);
+  if (cached) {
+    return cached;
+  }
+  const size = Math.max(1, Math.ceil(radius * 4));
+  const stamp = document.createElement("canvas");
+  stamp.width = size;
+  stamp.height = size;
+  const context = stamp.getContext("2d");
+  if (!context) {
+    return null;
+  }
+  const gradient = context.createRadialGradient(
+    size / 2,
+    size / 2,
+    0,
+    size / 2,
+    size / 2,
+    radius * 2
+  );
+  gradient.addColorStop(0, "rgba(0, 0, 0, 1)");
+  gradient.addColorStop(0.45, "rgba(0, 0, 0, 0.45)");
+  gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
+  context.fillStyle = gradient;
+  context.fillRect(0, 0, size, size);
+  stampCache.set(radius, stamp);
+  return stamp;
+}
+function withScrimBehind(context) {
+  context.globalCompositeOperation = "destination-over";
+  context.fillStyle = SCRIM_COLOR;
+  context.fillRect(0, 0, context.canvas.width, context.canvas.height);
+  context.globalCompositeOperation = "source-over";
+}
+function drawHeatPoints({
+  context,
+  points,
+  radius
+}) {
+  const { width, height } = context.canvas;
+  context.clearRect(0, 0, width, height);
+  const stamp = getDiscStamp(radius);
+  const palette = getPalette();
+  if (points.length > 0 && stamp && palette) {
+    const cells = /* @__PURE__ */ new Map();
+    for (const point of points) {
+      const key = `${Math.round(point.x / radius)},${Math.round(point.y / radius)}`;
+      cells.set(key, (cells.get(key) ?? 0) + point.weight);
+    }
+    const sums = [...cells.values()].sort((first, second) => first - second);
+    const max = Math.max(1, sums[Math.floor(sums.length * 0.97)] ?? 1);
+    for (const point of points) {
+      context.globalAlpha = Math.min(1, Math.max(0.04, point.weight / max));
+      context.drawImage(stamp, point.x - radius * 2, point.y - radius * 2);
+    }
+    context.globalAlpha = 1;
+    const image = context.getImageData(0, 0, width, height);
+    const pixels = image.data;
+    for (let index = 0; index < pixels.length; index += 4) {
+      const alpha = pixels[index + 3] ?? 0;
+      if (alpha === 0) {
+        continue;
+      }
+      const offset = alpha * 4;
+      pixels[index] = palette[offset] ?? 0;
+      pixels[index + 1] = palette[offset + 1] ?? 0;
+      pixels[index + 2] = palette[offset + 2] ?? 0;
+      pixels[index + 3] = palette[offset + 3] ?? 0;
+    }
+    context.putImageData(image, 0, 0);
+  }
+  withScrimBehind(context);
+}
+function getScrollReach(buckets) {
+  const total = buckets.reduce((sum, bucket) => sum + bucket.views, 0);
+  const reach = Array.from({ length: 101 }, () => 0);
+  if (total === 0) {
+    return reach;
+  }
+  const viewsByPct = /* @__PURE__ */ new Map();
+  for (const bucket of buckets) {
+    viewsByPct.set(
+      bucket.pct,
+      (viewsByPct.get(bucket.pct) ?? 0) + bucket.views
+    );
+  }
+  let remaining = total;
+  for (let pct = 0; pct <= 100; pct++) {
+    reach[pct] = remaining / total;
+    remaining -= viewsByPct.get(pct) ?? 0;
+  }
+  return reach;
+}
+function drawScrollBands({
+  context,
+  reach
+}) {
+  const { width, height } = context.canvas;
+  context.clearRect(0, 0, width, height);
+  const palette = getPalette();
+  if (!palette) {
+    return;
+  }
+  for (let pct = 0; pct < 100; pct++) {
+    const share = Math.min(1, Math.max(0, reach[pct] ?? 0));
+    const offset = Math.round(share * 255) * 4;
+    const alpha = Math.min(0.62, (palette[offset + 3] ?? 0) / 255 * 0.7);
+    context.fillStyle = `rgba(${palette[offset] ?? 0}, ${palette[offset + 1] ?? 0}, ${palette[offset + 2] ?? 0}, ${alpha})`;
+    const top = Math.floor(pct / 100 * height);
+    const bottom = Math.ceil((pct + 1) / 100 * height);
+    context.fillRect(0, top, width, bottom - top);
+  }
+}
+function getReachMarks({
+  reach,
+  height
+}) {
+  return REACH_MARKS.flatMap((share) => {
+    const pct = reach.findIndex((value) => value < share);
+    return pct > 0 ? [{ share, y: pct / 100 * height }] : [];
+  });
+}
+function drawMarkLine({
+  context,
+  y,
+  label,
+  dashed,
+  scale
+}) {
+  const { width } = context.canvas;
+  context.save();
+  context.strokeStyle = MARK_LINE_COLOR;
+  context.lineWidth = Math.max(1, 2 * scale);
+  context.setLineDash(dashed ? [8 * scale, 6 * scale] : []);
+  context.beginPath();
+  context.moveTo(0, y);
+  context.lineTo(width, y);
+  context.stroke();
+  const fontPx = LABEL_FONT_PX * scale;
+  context.font = `500 ${fontPx}px system-ui, -apple-system, sans-serif`;
+  const paddingX = 10 * scale;
+  const labelHeight = fontPx + 10 * scale;
+  const labelWidth = context.measureText(label).width + paddingX * 2;
+  const left = 24 * scale;
+  const top = Math.max(0, y - labelHeight - 6 * scale);
+  context.fillStyle = MARK_LABEL_BACKGROUND;
+  context.beginPath();
+  context.roundRect(left, top, labelWidth, labelHeight, labelHeight / 2);
+  context.fill();
+  context.fillStyle = "#fff";
+  context.textBaseline = "middle";
+  context.fillText(label, left + paddingX, top + labelHeight / 2);
+  context.restore();
+}
+export {
+  drawHeatPoints,
+  drawMarkLine,
+  drawScrollBands,
+  getReachMarks,
+  getScrollReach
+};

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.18.0",
+    "version": "1.19.0",
     "branch": "HEAD",
-    "commit": "371ae98105e9f99b04918b3dffe40867380cd9ef",
-    "builtAt": "2026-10-21T22:33:13.604Z"
+    "commit": "1aa1f09e1dd141b243b7bb3b1ff1bc947fa01371",
+    "builtAt": "2026-10-23T05:44:42.441Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",

package/sandbox-runtime.js

@@ -5,6 +5,7 @@ import { AnnotationLayerMount } from "./annotations/AnnotationLayerMount";
 import { ClientErrorBoundary } from "./ClientErrorBoundary";
 import { DesignLibraryPreview } from "./design-library-preview/DesignLibraryPreview";
 import { DocumentReadyBeacon } from "./DocumentReadyBeacon";
+import { HeatLayerMount } from "./heatmaps/HeatLayerMount";
 import LinkInterceptor from "./LinkInterceptor";
 import { NavigationReceiver } from "./NavigationReceiver";
 import { PageCaptureResponder } from "./PageCaptureResponder";
@@ -26,6 +27,7 @@ function SandboxRuntime({ children }) {
       /* @__PURE__ */ jsx(PageCaptureResponder, {}),
       /* @__PURE__ */ jsx(EditorSelection, {}),
       /* @__PURE__ */ jsx(AnnotationLayerMount, {}),
+      /* @__PURE__ */ jsx(HeatLayerMount, {}),
       /* @__PURE__ */ jsx(DesignLibraryPreview, {}),
       children
     ] })

package/select-mode/hooks/useSelectionHover.js

@@ -7,6 +7,7 @@ import {
 } from "../interactions/sectionGeometry";
 import { getElementBoundingRect } from "../interactions/selectionGeometry";
 import { isSectionCanvasControl } from "../section-canvas/sectionCanvasControls";
+import { sectionCanvasStore } from "../section-canvas/sectionCanvasStore";
 import { useDisplayMode, useSelectModeStore } from "../selectModeStore";
 function useSelectionHover() {
   const store = useSelectModeStore();
@@ -31,6 +32,10 @@ function useSelectionHover() {
       getWebsiteBuilderRpc()?.hoverElement({ rect: hoverRect });
     };
     const syncCurrentHover = (pointerClientPosition = store.getState().lastPointerClientPosition) => {
+      if (sectionCanvasStore.getState().drag) {
+        postHoveredElement(null);
+        return;
+      }
       const previewSection = store.getState().sectionPreviewElement;
       if (previewSection) {
         if (previewSection.isConnected) {

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

@@ -16,7 +16,6 @@ import {
 import {
   getPlacedSections,
   getSectionGaps,
-  GHOST_WIDTH_PX,
   sectionCanvasStore,
   useSectionCanvasStore
 } from "./sectionCanvasStore";
@@ -29,10 +28,11 @@ const ACCENT_PRESSED = "#1d4ed8";
 const PILL_HEIGHT = 22;
 const PILL_SPREAD = 64;
 const PILL_HALF_WIDTH = 52;
+const LABEL_HALF_WIDTH = 80;
 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}] [data-shape="pill"] { position: absolute; display: flex; align-items: center; 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; }
@@ -237,73 +237,55 @@ function SectionCanvas() {
       }
     );
   }
-  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
+  const markedGap = drag ? drag.gap : canvas.insertingAt;
+  let gapMarker = null;
+  const placed = typeof markedGap === "number" ? getPlacedSections({ canvas, elementsByIndex }) : [];
+  const gap = getSectionGaps(placed, canvas.sections.length).find(
+    (candidate) => candidate.at === markedGap
+  );
+  if (gap) {
+    const left = Math.max(
+      visible.left,
+      Math.min(...placed.map(({ box }) => box.left))
     );
-    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"
+    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
+    );
+    gapMarker = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-replo-section-drop-line": true,
+          style: {
+            position: "fixed",
+            left,
+            width: right - left,
+            top: y - 1.5 * unit,
+            height: 3 * unit,
+            borderRadius: 3 * unit,
+            background: ACCENT,
+            boxShadow: `0 0 0 ${unit}px #fff`
           }
-        )
-      ] });
-    }
+        }
+      ),
+      !drag && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-shape": "pill",
+          role: "status",
+          style: pillStyle({ unit, left: (left + right) / 2, top: y }),
+          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",
@@ -320,61 +302,26 @@ function SectionCanvas() {
           }
         }
       ),
-      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",
         {
+          "data-shape": "pill",
           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,
+            ...pillStyle({
+              unit,
+              left: Math.min(
+                Math.max(drag.x, LABEL_HALF_WIDTH * unit),
+                window.innerWidth - LABEL_HALF_WIDTH * unit
+              ),
+              top: drag.y + 20 * unit + PILL_HEIGHT * unit > window.innerHeight ? drag.y - 20 * unit : drag.y + 20 * unit
+            }),
+            maxWidth: 2 * LABEL_HALF_WIDTH * unit,
+            display: "block",
+            lineHeight: `${PILL_HEIGHT * unit}px`,
             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"
+            textOverflow: "ellipsis"
           },
-          children: drag.ghostSrc ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: drag.ghostSrc,
-              alt: "",
-              style: {
-                display: "block",
-                width: "100%",
-                height: "auto",
-                alignSelf: "flex-start"
-              }
-            }
-          ) : activeSection?.label ?? "Section"
+          children: activeSection?.label ?? "Section"
         }
       )
     ] });
@@ -397,7 +344,7 @@ function SectionCanvas() {
         onPointerDown: (event) => event.stopPropagation(),
         children: [
           /* @__PURE__ */ jsx("style", { children: SECTION_CANVAS_CSS }),
-          insertMarker,
+          gapMarker,
           overlay,
           dragLayer
         ]
@@ -406,6 +353,19 @@ function SectionCanvas() {
     document.body
   );
 }
+function pillStyle({
+  unit,
+  left,
+  top
+}) {
+  return {
+    left,
+    top,
+    height: PILL_HEIGHT * unit,
+    padding: `0 ${10 * unit}px`,
+    fontSize: 11 * unit
+  };
+}
 function SectionControls({
   index,
   label,
@@ -435,6 +395,8 @@ function SectionControls({
     ),
     visible.right - PILL_HALF_WIDTH * unit - spread
   );
+  const outlineLeft = Math.max(box.left, visible.left);
+  const outlineRight = Math.min(box.right, visible.right);
   const toolbarTop = Math.max(box.top, 0) + TOOLBAR_INSET * unit;
   const textButton = {
     height: size,
@@ -447,9 +409,9 @@ function SectionControls({
       {
         style: {
           position: "fixed",
-          left: box.left,
+          left: outlineLeft,
           top: box.top,
-          width: box.right - box.left,
+          width: outlineRight - outlineLeft,
           height: box.bottom - box.top,
           boxSizing: "border-box",
           border: `${2 * unit}px solid ${ACCENT}`,
@@ -471,13 +433,7 @@ function SectionControls({
         type: "button",
         "data-shape": "pill",
         "aria-label": `Add Section ${edge} ${label}`,
-        style: {
-          left,
-          top,
-          height: pillHeight,
-          padding: `0 ${10 * unit}px`,
-          fontSize: 11 * unit
-        },
+        style: pillStyle({ unit, left, top }),
         onClick: () => actions.request({ type: "insert", at }),
         children: "Add Section"
       },
@@ -489,7 +445,7 @@ function SectionControls({
         style: {
           position: "fixed",
           top: toolbarTop,
-          right: window.innerWidth - Math.min(box.right, visible.right) + TOOLBAR_INSET * unit,
+          right: window.innerWidth - outlineRight + TOOLBAR_INSET * unit,
           display: "flex",
           gap: 2 * unit,
           padding: 2 * unit,

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

@@ -7,7 +7,6 @@ export type SectionDrag = {
     x: number;
     y: number;
     isActive: boolean;
-    ghostSrc: string | null;
     gap: number | null;
 };
 type PendingMove = {
@@ -52,7 +51,6 @@ type SectionCanvasStoreState = {
         }) => 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;

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

@@ -8,9 +8,7 @@ import {
   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) {
@@ -164,7 +162,6 @@ const sectionCanvasStore = createShallowStore(
         getWebsiteBuilderRpc()?.sectionCanvasRequest({ request });
       },
       beginDrag: ({ index, pointerId, x, y }) => {
-        const elements = get().elementsByIndex.get(index) ?? [];
         set({
           drag: {
             index,
@@ -174,20 +171,9 @@ const sectionCanvasStore = createShallowStore(
             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();
@@ -267,7 +253,6 @@ function useSectionCanvasStore(selector) {
   return useShallowStore(sectionCanvasStore, selector);
 }
 export {
-  GHOST_WIDTH_PX,
   getPlacedSections,
   getSectionGaps,
   sectionCanvasStore,

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

@@ -1,5 +0,0 @@
-/** 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>;

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

@@ -1,23 +0,0 @@
-"use client";
-async function captureSectionGhost({
-  elements,
-  width
-}) {
-  const element = elements.find((candidate) => candidate.isConnected);
-  if (!element) {
-    return null;
-  }
-  const rect = element.getBoundingClientRect();
-  if (rect.width === 0 || rect.height === 0) {
-    return null;
-  }
-  try {
-    const { snapdom } = await import("@zumer/snapdom");
-    return await snapdom.toRaw(element, { width, embedFonts: false });
-  } catch {
-    return null;
-  }
-}
-export {
-  captureSectionGhost
-};