@replohq/sandbox-runtime 1.8.0 → 1.10.0

package/capturePage.js

@@ -0,0 +1,261 @@
+import { snapdom } from "@zumer/snapdom";
+import { PageCaptureError } from "./_vendor/replo-utils/lib/pageCapture.mjs";
+import { z } from "zod";
+const JPEG_QUALITY = 0.8;
+const VIDEO_FRAME_QUALITY = 0.85;
+const VIDEO_LOAD_TIMEOUT_MS = 4e3;
+const VIDEO_SEEK_TIMEOUT_MS = 1500;
+const PLACEHOLDER_BACKGROUND = "#d9d9d6";
+const IFRAME_PLACEHOLDER_MARKER = "repeating-linear-gradient(45deg";
+const vimeoOembedSchema = z.object({ thumbnail_url: z.string() });
+function parseYouTubeId(src) {
+  const match = src.match(
+    /(?:youtube(?:-nocookie)?\.com\/embed\/|youtu\.be\/)([\w-]{11})/
+  );
+  return match?.[1] ?? null;
+}
+function parseVimeoId(src) {
+  const match = src.match(/player\.vimeo\.com\/video\/(\d+)/);
+  return match?.[1] ?? null;
+}
+function canReadIframeDocument(iframe) {
+  try {
+    return Boolean(iframe.contentDocument ?? iframe.contentWindow?.document);
+  } catch {
+    return false;
+  }
+}
+async function fetchAsDataUrl(url) {
+  const blob = await (await fetch(url)).blob();
+  return await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => {
+      resolve(String(reader.result));
+    });
+    reader.addEventListener("error", () => {
+      reject(reader.error ?? new PageCaptureError("image read failed"));
+    });
+    reader.readAsDataURL(blob);
+  });
+}
+function isCanvasReadable(source) {
+  try {
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    canvas.getContext("2d")?.drawImage(source, 0, 0, 1, 1);
+    canvas.toDataURL();
+    return true;
+  } catch {
+    return false;
+  }
+}
+function videoFrameDataUrl(video) {
+  const canvas = document.createElement("canvas");
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  const context = canvas.getContext("2d");
+  if (!context) {
+    return null;
+  }
+  context.drawImage(video, 0, 0);
+  return canvas.toDataURL("image/jpeg", VIDEO_FRAME_QUALITY);
+}
+function isOnScreen({
+  element,
+  height
+}) {
+  const rect = element.getBoundingClientRect();
+  return rect.bottom > 0 && rect.top < height && rect.width > 0;
+}
+async function readVideoFrame({
+  video,
+  height
+}) {
+  if (!isOnScreen({ element: video, height })) {
+    return null;
+  }
+  if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && isCanvasReadable(video)) {
+    return videoFrameDataUrl(video);
+  }
+  const copy = document.createElement("video");
+  copy.crossOrigin = "anonymous";
+  copy.muted = true;
+  copy.preload = "auto";
+  try {
+    copy.src = video.currentSrc || video.src;
+    await new Promise((resolve, reject) => {
+      copy.addEventListener("loadeddata", () => {
+        resolve();
+      });
+      copy.addEventListener("error", () => {
+        reject(new PageCaptureError("video load failed"));
+      });
+      setTimeout(() => {
+        reject(new PageCaptureError("video load timed out"));
+      }, VIDEO_LOAD_TIMEOUT_MS);
+    });
+    if (video.currentTime > 0.1) {
+      copy.currentTime = video.currentTime;
+      await new Promise((resolve) => {
+        copy.addEventListener("seeked", () => {
+          resolve();
+        });
+        setTimeout(resolve, VIDEO_SEEK_TIMEOUT_MS);
+      });
+    }
+    return isCanvasReadable(copy) ? videoFrameDataUrl(copy) : null;
+  } catch {
+    return null;
+  } finally {
+    copy.removeAttribute("src");
+    copy.load();
+  }
+}
+async function readIframeThumbnail(iframe) {
+  const src = iframe.src;
+  let url = null;
+  const youTubeId = parseYouTubeId(src);
+  if (youTubeId) {
+    url = `https://i.ytimg.com/vi/${youTubeId}/hqdefault.jpg`;
+  }
+  const vimeoId = parseVimeoId(src);
+  if (vimeoId) {
+    try {
+      const response = await fetch(
+        `https://vimeo.com/api/oembed.json?url=https://vimeo.com/${vimeoId}&width=1280`
+      );
+      const body = vimeoOembedSchema.safeParse(await response.json());
+      url = body.success ? body.data.thumbnail_url : null;
+    } catch {
+      url = null;
+    }
+  }
+  if (!url) {
+    return null;
+  }
+  return fetchAsDataUrl(url).catch(() => null);
+}
+function createStandInsPlugin({
+  objectFitByFrame,
+  iframeThumbnails
+}) {
+  return {
+    name: "replo-page-capture-stand-ins",
+    afterClone(context) {
+      const clone = context.clone;
+      if (!clone) {
+        return;
+      }
+      for (const image of clone.querySelectorAll("img")) {
+        const objectFit = objectFitByFrame.get(image.getAttribute("src") ?? "");
+        if (objectFit) {
+          image.style.objectFit = objectFit;
+        }
+      }
+      const placeholders = Array.from(
+        clone.querySelectorAll("div")
+      ).filter((element) => {
+        return (element.getAttribute("style") ?? "").includes(
+          IFRAME_PLACEHOLDER_MARKER
+        );
+      });
+      placeholders.forEach((placeholder, index) => {
+        const thumbnail = iframeThumbnails[index];
+        placeholder.style.backgroundImage = thumbnail ? `url("${thumbnail}")` : "none";
+        placeholder.style.backgroundColor = PLACEHOLDER_BACKGROUND;
+        placeholder.style.backgroundSize = "cover";
+        placeholder.style.backgroundPosition = "center";
+      });
+    }
+  };
+}
+function pageBackgroundColor() {
+  for (const element of [document.body, document.documentElement]) {
+    const color = getComputedStyle(element).backgroundColor;
+    if (color && color !== "transparent" && color !== "rgba(0, 0, 0, 0)") {
+      return color;
+    }
+  }
+  return "#fff";
+}
+function canvasToJpeg(canvas) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new PageCaptureError("jpeg encode failed"));
+        }
+      },
+      "image/jpeg",
+      JPEG_QUALITY
+    );
+  });
+}
+async function capturePage({
+  width,
+  height
+}) {
+  const videos = Array.from(document.querySelectorAll("video"));
+  const iframes = Array.from(document.querySelectorAll("iframe")).filter(
+    (iframe) => !canReadIframeDocument(iframe)
+  );
+  const [videoFrames, iframeThumbnails] = await Promise.all([
+    Promise.all(
+      videos.map((video) => {
+        return readVideoFrame({ video, height });
+      })
+    ),
+    Promise.all(iframes.map(readIframeThumbnail))
+  ]);
+  const originalPosters = [];
+  const objectFitByFrame = /* @__PURE__ */ new Map();
+  videos.forEach((video, index) => {
+    const frame = videoFrames[index];
+    if (!frame) {
+      return;
+    }
+    originalPosters.push({ video, poster: video.getAttribute("poster") });
+    video.setAttribute("poster", frame);
+    objectFitByFrame.set(frame, getComputedStyle(video).objectFit);
+  });
+  try {
+    const raw = await snapdom.toRaw(document.body, {
+      scale: 1,
+      embedFonts: true,
+      plugins: [createStandInsPlugin({ objectFitByFrame, iframeThumbnails })]
+    });
+    const image = new Image();
+    image.src = raw;
+    await image.decode();
+    await new Promise((resolve) => {
+      setTimeout(resolve, 100);
+    });
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      throw new PageCaptureError("canvas 2d context unavailable");
+    }
+    context.fillStyle = pageBackgroundColor();
+    context.fillRect(0, 0, width, height);
+    context.drawImage(image, 0, 0);
+    return await canvasToJpeg(canvas);
+  } finally {
+    for (const { video, poster } of originalPosters) {
+      if (poster === null) {
+        video.removeAttribute("poster");
+      } else {
+        video.setAttribute("poster", poster);
+      }
+    }
+  }
+}
+export {
+  capturePage,
+  parseVimeoId,
+  parseYouTubeId
+};

package/chunk-LIPH4O4F.mjs

@@ -0,0 +1,67 @@
+import { v4 } from 'uuid';
+
+function bytesToBase64Url(bytes) {
+  let binary = "";
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+  return btoa(binary).replaceAll("+", "-").replaceAll("/", "_").replaceAll("=", "");
+}
+function base64UrlToBytes(input) {
+  const normalized = input.replaceAll("-", "+").replaceAll("_", "/");
+  const padded = normalized.padEnd(
+    normalized.length + (4 - normalized.length % 4) % 4,
+    "="
+  );
+  const binary = atob(padded);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i += 1) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
+function randomBase64Url(byteLength) {
+  return bytesToBase64Url(crypto.getRandomValues(new Uint8Array(byteLength)));
+}
+function randomUUID() {
+  return v4();
+}
+async function sha256Hex(input) {
+  const buffer = typeof input === "string" ? new TextEncoder().encode(input) : input;
+  const hash = await crypto.subtle.digest("SHA-256", buffer);
+  return [...new Uint8Array(hash)].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+function constantTimeEqual({
+  left,
+  right
+}) {
+  if (left.length !== right.length) {
+    return false;
+  }
+  let difference = 0;
+  for (let index = 0; index < left.length; index += 1) {
+    difference |= (left[index] ?? 0) ^ (right[index] ?? 0);
+  }
+  return difference === 0;
+}
+async function getHmacSha256Hex({
+  rawBody,
+  signingKey
+}) {
+  const encoder = new TextEncoder();
+  const key = await crypto.subtle.importKey(
+    "raw",
+    encoder.encode(signingKey),
+    { name: "HMAC", hash: "SHA-256" },
+    false,
+    ["sign"]
+  );
+  const signature = await crypto.subtle.sign(
+    "HMAC",
+    key,
+    encoder.encode(rawBody)
+  );
+  return [...new Uint8Array(signature)].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+
+export { base64UrlToBytes, bytesToBase64Url, constantTimeEqual, getHmacSha256Hex, randomBase64Url, randomUUID, sha256Hex };

package/{chunk-XWNBKE63.mjs → chunk-PJBGUXBG.mjs}

@@ -48,6 +48,7 @@ var selectModeBoundingRectSchema = z.object({
   width: z.number(),
   height: z.number()
 }).describe("SelectModeBoundingRect");
+var selectModeHoverRectSchema = selectModeBoundingRectSchema.extend({ isSection: z.boolean().optional() }).describe("SelectModeHoverRect");
 var selectModeSelectionRectSchema = z.object({
   id: z.string(),
   rect: selectModeBoundingRectSchema
@@ -122,6 +123,7 @@ var selectModeImageSchema = z.object({
 var selectedElementSchema = z.object({
   kind: z.literal("react-element"),
   selector: z.string(),
+  section: z.object({ selector: z.string() }).optional(),
   tagName: z.string(),
   elementType: z.string(),
   textContent: z.string().nullable(),
@@ -145,6 +147,9 @@ var selectablePlanDataSchema = z.object({
 var selectablePlanPayloadSchema = selectablePlanDataSchema.omit({ rect: true }).describe("SelectablePlanPayload");
 var selectableDataPayloadSchema = z.discriminatedUnion("kind", [selectablePlanPayloadSchema]).describe("SelectableDataPayload");
 var selectableDataSchema = z.discriminatedUnion("kind", [selectedElementSchema, selectablePlanDataSchema]).describe("SelectableData");
+function isSelectedSection(data) {
+  return data.kind === "react-element" && data.selector === data.section?.selector;
+}
 function transformSelectedElement({
   element,
   offset,
@@ -232,4 +237,4 @@ var selectModeSelectionSchema = z.discriminatedUnion("type", [
   })
 ]).describe("SelectModeSelection");
 
-export { SELECT_MODE_SELECTABLE_ATTRIBUTE, SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE, displayModeSchema, getIframeOffset, readSelectablePayload, selectModeBoundingRectSchema, selectModeClickPositionSchema, selectModeDefinedStyleSchema, selectModeFiberChainEntrySchema, selectModeFormatCommandSchema, selectModeImageSchema, selectModeImageScopeSchema, selectModeImageSourceSchema, selectModeInlineTextStatusSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionRectSchema, selectModeSelectionSchema, selectModeSelectionTypeSchema, selectModeSourceLocationSchema, selectModeStyleAtRuleSchema, selectModeStyleVariantSchema, selectModeTextMetricsSchema, selectModeTiptapActiveMarksSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement };
+export { SELECT_MODE_SELECTABLE_ATTRIBUTE, SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE, displayModeSchema, getIframeOffset, isSelectedSection, readSelectablePayload, selectModeBoundingRectSchema, selectModeClickPositionSchema, selectModeDefinedStyleSchema, selectModeFiberChainEntrySchema, selectModeFormatCommandSchema, selectModeHoverRectSchema, selectModeImageSchema, selectModeImageScopeSchema, selectModeImageSourceSchema, selectModeInlineTextStatusSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionRectSchema, selectModeSelectionSchema, selectModeSelectionTypeSchema, selectModeSourceLocationSchema, selectModeStyleAtRuleSchema, selectModeStyleVariantSchema, selectModeTextMetricsSchema, selectModeTiptapActiveMarksSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement };

package/design-library-preview/DesignLibraryPreview.js

@@ -14,9 +14,13 @@ function DesignLibraryPreview() {
   const ownsDefaultFont = useRef(false);
   useEffect(() => {
     const handleMessage = (event) => {
-      if (!isAllowedEditorMessage(event)) return;
+      if (!isAllowedEditorMessage(event)) {
+        return;
+      }
       const parsed = designLibraryPreviewMessageSchema.safeParse(event.data);
-      if (!parsed.success) return;
+      if (!parsed.success) {
+        return;
+      }
       const { cssVars, fonts, defaultFontCssVar } = parsed.data;
       const root = document.documentElement;
       const nextVars = { ...cssVars };
@@ -25,7 +29,9 @@ function DesignLibraryPreview() {
       }
       const owned = ownedKeys.current ?? /* @__PURE__ */ new Set();
       for (const key of owned) {
-        if (!(key in nextVars)) root.style.removeProperty(key);
+        if (!(key in nextVars)) {
+          root.style.removeProperty(key);
+        }
       }
       ownedKeys.current = new Set(Object.keys(nextVars));
       for (const [key, value] of Object.entries(nextVars)) {
@@ -44,7 +50,9 @@ function DesignLibraryPreview() {
         }
       }
       for (const href of nextHrefs) {
-        if (links.has(href)) continue;
+        if (links.has(href)) {
+          continue;
+        }
         const link = document.createElement("link");
         link.rel = "stylesheet";
         link.href = href;
@@ -62,9 +70,13 @@ function DesignLibraryPreview() {
         }
       }
       for (const font of customFonts) {
-        if (!font.faceUrl) continue;
+        if (!font.faceUrl) {
+          continue;
+        }
         const existing = faces.get(font.family);
-        if (existing?.url === font.faceUrl) continue;
+        if (existing?.url === font.faceUrl) {
+          continue;
+        }
         existing?.style.remove();
         const style = document.createElement("style");
         style.dataset[FONT_LINK_DATA_KEY] = "";

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.8.0",
+    "version": "1.10.0",
     "branch": "HEAD",
-    "commit": "6ad933540e110b76d214b8700e7a356a551c869a",
-    "builtAt": "2026-09-24T18:57:19.451Z"
+    "commit": "604d707e41cac581b43e134371e5e9a0f78fa2b7",
+    "builtAt": "2026-09-25T19:36:00.140Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",
@@ -40,6 +40,7 @@
     "@tiptap/extension-text": "^2.25.0",
     "@tiptap/extension-underline": "^2.25.0",
     "@tiptap/pm": "^2.25.0",
+    "@zumer/snapdom": "^3.0.0",
     "uuid": "^11.1.0",
     "zod": "^4.3.6",
     "zustand": "^4.5.7"

package/sandbox-runtime.js

@@ -8,6 +8,7 @@ import { DocumentReadyBeacon } from "./DocumentReadyBeacon";
 import LinkInterceptor from "./LinkInterceptor";
 import { NavigationReceiver } from "./NavigationReceiver";
 import { NextErrorReporter } from "./NextErrorReporter";
+import { PageCaptureResponder } from "./PageCaptureResponder";
 import PostHogRelay from "./posthog-relay";
 import { EditorSelection } from "./select-mode/EditorSelection";
 function ViewportSnapshotResponder() {
@@ -24,6 +25,7 @@ function SandboxRuntime({ children }) {
       /* @__PURE__ */ jsx(NavigationReceiver, {}),
       /* @__PURE__ */ jsx(PostHogRelay, {}),
       /* @__PURE__ */ jsx(ViewportSnapshotResponder, {}),
+      /* @__PURE__ */ jsx(PageCaptureResponder, {}),
       /* @__PURE__ */ jsx(EditorSelection, {}),
       /* @__PURE__ */ jsx(AnnotationLayerMount, {}),
       /* @__PURE__ */ jsx(DesignLibraryPreview, {}),

package/select-mode/EditorSelection.js

@@ -18,6 +18,8 @@ function EditorSelection() {
   const store = useSelectModeStore();
   const displayMode = useDisplayMode();
   const {
+    expandToSection,
+    setSectionPreview,
     formatCommand,
     postSelectedElementSnapshot,
     revertInlineEdit,
@@ -38,7 +40,9 @@ function EditorSelection() {
     const scheduleSnapshot = () => {
       clearTimeout(refreshTimeout);
       refreshTimeout = setTimeout(() => {
-        if (store.getState().editingElement) return;
+        if (store.getState().editingElement) {
+          return;
+        }
         if (postSelectedElementSnapshot()) {
           clearTimeout(missingTimeout);
           missingTimeout = void 0;
@@ -54,15 +58,26 @@ function EditorSelection() {
       }, 250);
     };
     const observer = new MutationObserver((records) => {
-      const session = store.getState().interactionSession;
-      if (store.getState().editingElement || session.type !== "element") return;
+      const {
+        actions,
+        editingElement,
+        interactionSession: session,
+        sectionPreviewElement
+      } = store.getState();
+      if (sectionPreviewElement && !sectionPreviewElement.isConnected) {
+        actions.setSectionPreview({ targetSelector: null });
+      }
+      if (editingElement || session.type !== "element") {
+        return;
+      }
       if (!session.element.isConnected || records.some((record) => session.element.contains(record.target))) {
         scheduleSnapshot();
       }
     });
     const watchRender = () => {
-      if (store.getState().editingElement || store.getState().interactionSession.type !== "element")
+      if (store.getState().editingElement || store.getState().interactionSession.type !== "element") {
         return;
+      }
       clearTimeout(observationTimeout);
       observer.observe(document.body, {
         subtree: true,
@@ -118,6 +133,8 @@ function EditorSelection() {
   useParentMessaging({
     applyOptimisticUpdate,
     markCommitted,
+    onExpandToSection: expandToSection,
+    onSetSectionPreview: setSectionPreview,
     onExitEditMode: revertInlineEdit,
     onFormatCommand: formatCommand,
     resolveSessionOverrides,

package/select-mode/SelectionFrames.js

@@ -1,13 +1,17 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
+import { getDocumentScrollOffset } from "./interactions/selectionGeometry";
 import {
+  SECTION_SELECTION_FRAME_BACKGROUND,
+  SECTION_SELECTION_FRAME_BORDER_HEX,
   SELECTION_FRAME_BORDER_HEX,
   SELECTION_FRAME_EDITING_BORDER_HEX,
   SELECTION_FRAMES_CONTAINER_ID
 } from "./selectionFrame";
 import {
   useIsSelectionFrameEditing,
+  useSectionHoverRect,
   useSelectionFrames
 } from "./selectModeStore";
 const CONTAINER_STYLE = {
@@ -24,32 +28,61 @@ const CONTAINER_STYLE = {
 function SelectionFrames() {
   const frames = useSelectionFrames();
   const isEditing = useIsSelectionFrameEditing();
-  if (typeof document === "undefined" || !document.body || frames.length === 0) {
+  const sectionHoverRect = useSectionHoverRect();
+  if (typeof document === "undefined" || !document.body || frames.length === 0 && !sectionHoverRect) {
     return null;
   }
-  const borderColor = isEditing ? SELECTION_FRAME_EDITING_BORDER_HEX : SELECTION_FRAME_BORDER_HEX;
+  const elementBorderColor = isEditing ? SELECTION_FRAME_EDITING_BORDER_HEX : SELECTION_FRAME_BORDER_HEX;
+  const scrollOffset = getDocumentScrollOffset();
+  const sectionLabelPosition = sectionHoverRect ? {
+    x: sectionHoverRect.x + scrollOffset.left,
+    y: sectionHoverRect.y + scrollOffset.top
+  } : frames.find((frame) => frame.variant === "section")?.pageRect;
   return createPortal(
-    /* @__PURE__ */ jsx("div", { id: SELECTION_FRAMES_CONTAINER_ID, "aria-hidden": true, style: CONTAINER_STYLE, children: frames.map((frame, index) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        "aria-hidden": true,
-        style: {
-          position: "absolute",
-          boxSizing: "border-box",
-          borderRadius: 2,
-          pointerEvents: "none",
-          margin: 0,
-          padding: 0,
-          left: frame.pageRect.x,
-          top: frame.pageRect.y,
-          width: frame.pageRect.width,
-          height: frame.pageRect.height,
-          border: `2px solid ${borderColor}`,
-          background: frame.variant === "area" ? "rgba(192, 38, 211, 0.08)" : "transparent"
+    /* @__PURE__ */ jsxs("div", { id: SELECTION_FRAMES_CONTAINER_ID, "aria-hidden": true, style: CONTAINER_STYLE, children: [
+      frames.map((frame, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          "data-variant": frame.variant,
+          style: {
+            position: "absolute",
+            boxSizing: "border-box",
+            borderRadius: 2,
+            pointerEvents: "none",
+            margin: 0,
+            padding: 0,
+            left: frame.pageRect.x,
+            top: frame.pageRect.y,
+            width: frame.pageRect.width,
+            height: frame.pageRect.height,
+            border: `2px solid ${frame.variant === "section" ? SECTION_SELECTION_FRAME_BORDER_HEX : elementBorderColor}`,
+            background: {
+              area: "rgba(192, 38, 211, 0.08)",
+              element: "transparent",
+              section: SECTION_SELECTION_FRAME_BACKGROUND
+            }[frame.variant]
+          }
+        },
+        `${frame.variant}-${index}`
+      )),
+      sectionLabelPosition && /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            position: "absolute",
+            top: sectionLabelPosition.y + 6,
+            left: sectionLabelPosition.x + 6,
+            padding: "3px 6px",
+            borderRadius: 4,
+            background: "#2563eb",
+            color: "white",
+            font: "500 12px/16px system-ui"
+          },
+          children: "Section"
         }
-      },
-      `${frame.variant}-${index}`
-    )) }),
+      )
+    ] }),
     document.body
   );
 }

package/select-mode/descriptor/elementDescriptor.d.ts

@@ -17,8 +17,9 @@ export declare function buildSelector(element: Element): string;
  * about a selection: identification, geometry, source location, and a
  * style-inlined HTML snippet.
  */
-export declare function buildElementDescriptor({ element, clickPosition, siblingSelectors, }: {
+export declare function buildElementDescriptor({ element, clickPosition, siblingSelectors, section, }: {
     element: Element;
     clickPosition: SelectModeClickPosition;
     siblingSelectors?: string[];
+    section?: Element | null;
 }): SelectableData;