@replohq/sandbox-runtime 1.20.0 → 1.21.0

package/comments-overlay/vendor/selector.js

@@ -0,0 +1,372 @@
+/*!
+ * Copyright (c) 2025 Aiden Bai
+ * SPDX-License-Identifier: MIT
+ * https://github.com/aidenybai/react-grab
+ */
+const FINDER_TIMEOUT_MS = 200;
+const MAX_SELECTOR_COMBINATIONS = 1e4;
+const SELECTOR_ATTR_VALUE_MAX_LENGTH_CHARS = 120;
+const SEED_MIN_LENGTH = 3;
+const ATTR_VALUE_MAX_LENGTH_CHARS = 100;
+const BROAD_SELECTOR_TARGET_DESCENDANT_RATIO = 0.5;
+const PENALTY_ID = 0;
+const PENALTY_CLASS = 1;
+const PENALTY_ATTR = 2;
+const PENALTY_TAG = 5;
+const PENALTY_NTH_OF_TYPE = 10;
+const PENALTY_NTH_CHILD = 50;
+const PREFERRED_SELECTOR_ATTRIBUTE_NAMES = [
+  "data-testid",
+  "data-test-id",
+  "data-test",
+  "data-cy",
+  "data-qa",
+  "aria-label",
+  "href",
+  "src",
+  "role",
+  "name",
+  "title",
+  "alt"
+];
+const ACTIONABLE_SELECTOR_ROLES = /* @__PURE__ */ new Set([
+  "button",
+  "link",
+  "checkbox",
+  "radio",
+  "switch",
+  "tab",
+  "menuitem",
+  "option",
+  "textbox",
+  "combobox",
+  "slider",
+  "spinbutton"
+]);
+const ACCEPTED_ATTR_NAMES = /* @__PURE__ */ new Set([
+  "role",
+  "name",
+  "aria-label",
+  "rel",
+  "href"
+]);
+const UUID_ELEMENT_ID_PATTERN = /^[0-9a-f]{8}(?:-[0-9a-f]{4}){3}-[0-9a-f]{12}$/i;
+const REACT_COLON_ELEMENT_ID_PATTERN = /:r[a-z0-9]+:/i;
+const REACT_UNDERSCORE_ELEMENT_ID_PATTERN = /_r_[a-z0-9]+_(?:$|-)/i;
+const REACT_GUILLEMET_ELEMENT_ID_PATTERN = /«r[a-z0-9]+»/i;
+const GENERATED_FRAMEWORK_ELEMENT_ID_PATTERN = /^(?:downshift-\d+(?:-|$)|headlessui-[a-z-]+-\d+(?:-|$)|mui-\d+(?:-|$)|radix-\d+(?:-|$)|react-aria-\d+(?:-|$)|react-select-\d+(?:-|$))/i;
+const EMBER_ELEMENT_ID_PATTERN = /^ember\d+$/i;
+const NUMERIC_ELEMENT_ID_PATTERN = /^\d+$/;
+function isStableElementId(elementId) {
+  return elementId.length > 0 && elementId.length <= SELECTOR_ATTR_VALUE_MAX_LENGTH_CHARS && !REACT_COLON_ELEMENT_ID_PATTERN.test(elementId) && !UUID_ELEMENT_ID_PATTERN.test(elementId) && !REACT_UNDERSCORE_ELEMENT_ID_PATTERN.test(elementId) && !REACT_GUILLEMET_ELEMENT_ID_PATTERN.test(elementId) && !GENERATED_FRAMEWORK_ELEMENT_ID_PATTERN.test(elementId) && !EMBER_ELEMENT_ID_PATTERN.test(elementId) && !NUMERIC_ELEMENT_ID_PATTERN.test(elementId);
+}
+function isPreferredSelectorAttribute(name, value) {
+  return PREFERRED_SELECTOR_ATTRIBUTE_NAMES.includes(name) && value.length > 0 && value.length <= SELECTOR_ATTR_VALUE_MAX_LENGTH_CHARS && (name !== "role" || value.split(/\s+/).some((role) => ACTIONABLE_SELECTOR_ROLES.has(role)));
+}
+function getSelectorRoot(element) {
+  const rootNode = element.getRootNode();
+  return rootNode instanceof Document || typeof ShadowRoot !== "undefined" && rootNode instanceof ShadowRoot ? rootNode : element.ownerDocument;
+}
+function isSelectorUniqueForElement(element, selector) {
+  try {
+    const matches = getSelectorRoot(element).querySelectorAll(selector);
+    return matches.length === 1 && matches[0] === element;
+  } catch {
+    return false;
+  }
+}
+function createSemanticSelector(element) {
+  const elementId = element.getAttribute("id");
+  if (elementId && isStableElementId(elementId)) {
+    const idSelector = `#${CSS.escape(elementId)}`;
+    if (isSelectorUniqueForElement(element, idSelector)) {
+      return idSelector;
+    }
+  }
+  for (const attributeName of PREFERRED_SELECTOR_ATTRIBUTE_NAMES) {
+    const attributeValue = element.getAttribute(attributeName);
+    if (!attributeValue || !isPreferredSelectorAttribute(attributeName, attributeValue)) {
+      continue;
+    }
+    const attributeSelector = `[${attributeName}=${JSON.stringify(attributeValue)}]`;
+    if (isSelectorUniqueForElement(element, attributeSelector)) {
+      return attributeSelector;
+    }
+    const tagSelector = `${element.tagName.toLowerCase()}${attributeSelector}`;
+    if (isSelectorUniqueForElement(element, tagSelector)) {
+      return tagSelector;
+    }
+  }
+  return null;
+}
+const SELECTOR_IDENTIFIER_QUERY = [
+  ...PREFERRED_SELECTOR_ATTRIBUTE_NAMES.filter((name) => name !== "role").map(
+    (name) => `[${name}]`
+  ),
+  ...Array.from(ACTIONABLE_SELECTOR_ROLES).map((role) => `[role~="${role}"]`)
+].join(",");
+const GENERIC_SELECTOR_TARGET_QUERY = "button,input,select,textarea";
+function hasSelectorIdentifier(element) {
+  const elementId = element.getAttribute("id");
+  return Boolean(
+    elementId && isStableElementId(elementId) || element.matches(SELECTOR_IDENTIFIER_QUERY)
+  );
+}
+function isSelectorTarget(element) {
+  return hasSelectorIdentifier(element) || element.matches(GENERIC_SELECTOR_TARGET_QUERY);
+}
+function isBroadSelectorTarget(element) {
+  const root = getSelectorRoot(element);
+  let bodyDescendantCount;
+  if (root instanceof Document) {
+    const { body, documentElement } = root;
+    if (element === body || element === documentElement) {
+      return true;
+    }
+    if (!body) {
+      return false;
+    }
+    bodyDescendantCount = body.getElementsByTagName("*").length;
+  } else {
+    bodyDescendantCount = root.querySelectorAll("*").length;
+  }
+  if (bodyDescendantCount === 0) {
+    return false;
+  }
+  return element.getElementsByTagName("*").length / bodyDescendantCount >= BROAD_SELECTOR_TARGET_DESCENDANT_RATIO;
+}
+function findSelectorTarget(element, isCandidateAccepted) {
+  let current = element;
+  while (current) {
+    if (isSelectorTarget(current)) {
+      const isBroad = isBroadSelectorTarget(current);
+      if (isBroad && current !== element) {
+        return element;
+      }
+      if (!isCandidateAccepted || isCandidateAccepted(current)) {
+        return current;
+      }
+      if (isBroad) {
+        return current;
+      }
+      if (!hasSelectorIdentifier(current) && current === element) {
+        return current;
+      }
+    }
+    current = current.parentElement;
+  }
+  return element;
+}
+function buildRelativeNthOfTypePath(ancestor, element) {
+  const parts = [];
+  for (let current = element; current && current !== ancestor; current = current.parentElement) {
+    const tagName = current.tagName;
+    const parent = current.parentElement ?? current.parentNode;
+    const siblings = parent && "children" in parent ? Array.from(parent.children).filter((sibling) => {
+      return sibling.tagName === tagName;
+    }) : [];
+    parts.unshift(
+      siblings.length > 1 ? `${tagName.toLowerCase()}:nth-of-type(${siblings.indexOf(current) + 1})` : tagName.toLowerCase()
+    );
+  }
+  return parts.join(" > ");
+}
+function createNearestSemanticSelector(element) {
+  const ownSelector = createSemanticSelector(element);
+  if (ownSelector) {
+    return ownSelector;
+  }
+  const accepted = { selector: null };
+  const target = findSelectorTarget(element, (candidate) => {
+    accepted.selector = createSemanticSelector(candidate);
+    return accepted.selector !== null;
+  });
+  if (target === element || !accepted.selector) {
+    return null;
+  }
+  const selector = `${accepted.selector} > ${buildRelativeNthOfTypePath(target, element)}`;
+  return isSelectorUniqueForElement(element, selector) ? selector : null;
+}
+function isWordLike(text) {
+  if (!/^[a-z-]{3,}$/i.test(text)) {
+    return false;
+  }
+  return text.split(/-|[A-Z]/).every((segment) => {
+    return segment.length > 2 && !/[^aeiou]{4,}/i.test(segment);
+  });
+}
+function isAcceptedAttr(name, value) {
+  const nameIsAccepted = ACCEPTED_ATTR_NAMES.has(name) || name.startsWith("data-") && isWordLike(name);
+  const valueIsAccepted = isWordLike(value) && value.length < ATTR_VALUE_MAX_LENGTH_CHARS || value.startsWith("#") && isWordLike(value.slice(1));
+  return nameIsAccepted && valueIsAccepted;
+}
+function buildSelectorString(path) {
+  return path.map((node) => node.name).reverse().join(" > ");
+}
+function calculatePenalty(path) {
+  return path.reduce((total, node) => total + node.penalty, 0);
+}
+function getChildIndex(element, filterTagName) {
+  const parentNode = element.parentNode;
+  if (!parentNode) {
+    return void 0;
+  }
+  let position = 0;
+  for (const sibling of Array.from(parentNode.children)) {
+    if (filterTagName === void 0 || sibling.tagName.toLowerCase() === filterTagName) {
+      position++;
+    }
+    if (sibling === element) {
+      return position;
+    }
+  }
+  return void 0;
+}
+function collectCandidateNodes(element) {
+  const candidates = [];
+  const elementId = element.getAttribute("id");
+  const tagName = element.tagName.toLowerCase();
+  if (elementId && isWordLike(elementId)) {
+    candidates.push({ name: `#${CSS.escape(elementId)}`, penalty: PENALTY_ID });
+  }
+  for (const className of Array.from(element.classList)) {
+    if (isWordLike(className)) {
+      candidates.push({
+        name: `.${CSS.escape(className)}`,
+        penalty: PENALTY_CLASS
+      });
+    }
+  }
+  for (const attribute of Array.from(element.attributes)) {
+    if (isAcceptedAttr(attribute.name, attribute.value) || isPreferredSelectorAttribute(attribute.name, attribute.value)) {
+      candidates.push({
+        name: `[${CSS.escape(attribute.name)}="${CSS.escape(attribute.value)}"]`,
+        penalty: PENALTY_ATTR
+      });
+    }
+  }
+  candidates.push({ name: tagName, penalty: PENALTY_TAG });
+  const typePosition = getChildIndex(element, tagName);
+  if (typePosition !== void 0) {
+    candidates.push({
+      name: tagName === "html" ? "html" : `${tagName}:nth-of-type(${typePosition})`,
+      penalty: PENALTY_NTH_OF_TYPE
+    });
+  }
+  const childPosition = getChildIndex(element);
+  if (childPosition !== void 0) {
+    candidates.push({
+      name: tagName === "html" ? "html" : `${tagName}:nth-child(${childPosition})`,
+      penalty: PENALTY_NTH_CHILD
+    });
+  }
+  return candidates;
+}
+function collectCombinations(stack, budget = MAX_SELECTOR_COMBINATIONS, currentPath = []) {
+  if (budget <= 0) {
+    return [];
+  }
+  const [level, ...rest] = stack;
+  if (!level) {
+    return [currentPath];
+  }
+  const results = [];
+  for (const node of level) {
+    const remainingBudget = budget - results.length;
+    if (remainingBudget <= 0) {
+      break;
+    }
+    results.push(
+      ...collectCombinations(rest, remainingBudget, [...currentPath, node])
+    );
+  }
+  return results;
+}
+function isPathUnique(path, root) {
+  try {
+    return root.querySelectorAll(buildSelectorString(path)).length === 1;
+  } catch {
+    return false;
+  }
+}
+function findUniqueSelector(target, timeoutMs = FINDER_TIMEOUT_MS) {
+  if (target.tagName.toLowerCase() === "html") {
+    return "html";
+  }
+  const root = getSelectorRoot(target);
+  const stopElement = root instanceof Document ? root.documentElement : null;
+  const startTime = Date.now();
+  const ancestorStack = [];
+  let current = target;
+  let depth = 0;
+  const findIn = (paths) => {
+    paths.sort(
+      (pathA, pathB) => calculatePenalty(pathA) - calculatePenalty(pathB)
+    );
+    for (const path of paths) {
+      if (Date.now() - startTime > timeoutMs) {
+        return "timeout";
+      }
+      if (isPathUnique(path, root)) {
+        return path;
+      }
+    }
+    return null;
+  };
+  while (current && current !== stopElement) {
+    ancestorStack.push(collectCandidateNodes(current));
+    current = current.parentElement;
+    depth++;
+    if (depth >= SEED_MIN_LENGTH) {
+      const found = findIn(collectCombinations(ancestorStack));
+      if (found === "timeout") {
+        return null;
+      }
+      if (found) {
+        return buildSelectorString(found);
+      }
+    }
+  }
+  if (depth < SEED_MIN_LENGTH) {
+    const found = findIn(collectCombinations(ancestorStack));
+    if (found && found !== "timeout") {
+      return buildSelectorString(found);
+    }
+  }
+  return null;
+}
+function createNthChildSelector(element) {
+  const segments = [];
+  const body = element.ownerDocument.body;
+  let current = element;
+  while (current) {
+    const currentId = current.getAttribute("id");
+    if (currentId) {
+      segments.unshift(`#${CSS.escape(currentId)}`);
+      break;
+    }
+    const parent = current.parentElement;
+    if (!parent) {
+      segments.unshift(current.tagName.toLowerCase());
+      break;
+    }
+    const nthChild = Array.from(parent.children).indexOf(current) + 1;
+    segments.unshift(`${current.tagName.toLowerCase()}:nth-child(${nthChild})`);
+    if (parent === body) {
+      segments.unshift("body");
+      break;
+    }
+    current = parent;
+  }
+  return segments.join(" > ");
+}
+export {
+  FINDER_TIMEOUT_MS,
+  buildRelativeNthOfTypePath,
+  createNearestSemanticSelector,
+  createNthChildSelector,
+  createSemanticSelector,
+  findSelectorTarget,
+  findUniqueSelector,
+  isStableElementId
+};

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.20.0",
+    "version": "1.21.0",
     "branch": "HEAD",
-    "commit": "17c6d4e2e064b7d35efe5732361372f119e931b5",
-    "builtAt": "2026-10-29T03:14:43.608Z"
+    "commit": "d5ce2185ff844319f59248b9da6641bf96f4c0a2",
+    "builtAt": "2026-10-29T04:07:57.675Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",

package/sandbox-runtime.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useViewportSnapshotResponder } from "./_vendor/replo-utils/react/use-viewport-snapshot-responder.mjs";
 import { AnnotationLayerMount } from "./annotations/AnnotationLayerMount";
 import { ClientErrorBoundary } from "./ClientErrorBoundary";
+import { CommentsOverlayMount } from "./comments-overlay/CommentsOverlayMount";
 import { DesignLibraryPreview } from "./design-library-preview/DesignLibraryPreview";
 import { DocumentReadyBeacon } from "./DocumentReadyBeacon";
 import { HeatLayerMount } from "./heatmaps/HeatLayerMount";
@@ -28,6 +29,7 @@ function SandboxRuntime({ children }) {
       /* @__PURE__ */ jsx(PageCaptureResponder, {}),
       /* @__PURE__ */ jsx(PagePreviewHeightResponder, {}),
       /* @__PURE__ */ jsx(EditorSelection, {}),
+      /* @__PURE__ */ jsx(CommentsOverlayMount, {}),
       /* @__PURE__ */ jsx(AnnotationLayerMount, {}),
       /* @__PURE__ */ jsx(HeatLayerMount, {}),
       /* @__PURE__ */ jsx(DesignLibraryPreview, {}),

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

@@ -5,9 +5,10 @@ import type { SelectableData, SelectModeClickPosition } from "../../_vendor/sche
  */
 export declare function getNearestSelectableElement(element: Element): Element;
 /**
- * Build a CSS selector path from `element` up to the document root. Stops
- * (and short-circuits) at the first ancestor with an `id`. Used so the
- * parent can identify the element later without holding a DOM reference.
+ * The cheap structural selector for selections, siblings, sections and override
+ * targets, so they stay comparable (e.g. `isSelectedSection`).
+ * Runs once per repeated sibling on every click, so it must not use the
+ * capture's uniqueness search, which costs up to 200ms per element.
  */
 export declare function buildSelector(element: Element): string;
 /**

package/select-mode/descriptor/elementDescriptor.js

@@ -4,6 +4,10 @@ import {
   SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE
 } from "../../_vendor/schemas/selectMode.mjs";
 import * as z from "zod";
+import {
+  buildNthOfTypePath,
+  captureElementAnchor
+} from "../../comments-overlay/capture";
 import { getFiberChain } from "../fiber";
 import { getImageDescriptor } from "../imageSources";
 import { skipInlineTextMarkElements } from "../inlineTextMarks";
@@ -155,34 +159,19 @@ function identifyElement({
   return tagName;
 }
 function buildSelector(element) {
-  const parts = [];
-  let currentElement = element;
-  while (currentElement && currentElement !== document.documentElement) {
-    const tag = currentElement.tagName.toLowerCase();
-    const id = currentElement.id;
-    if (id) {
-      parts.unshift(`#${CSS.escape(id)}`);
-      break;
-    }
-    const parentElement = currentElement.parentElement;
-    if (parentElement) {
-      const currentTag = currentElement.tagName;
-      const siblings = Array.from(parentElement.children);
-      const siblingElementsWithSameTag = siblings.filter((sibling) => {
-        return sibling.tagName === currentTag;
-      });
-      if (siblingElementsWithSameTag.length > 1) {
-        const index = siblingElementsWithSameTag.indexOf(currentElement) + 1;
-        parts.unshift(`${tag}:nth-of-type(${index})`);
-      } else {
-        parts.unshift(tag);
-      }
-    } else {
-      parts.unshift(tag);
-    }
-    currentElement = parentElement;
+  return buildNthOfTypePath(element);
+}
+function getAnchorSourceLocation(anchor) {
+  const source = anchor.source;
+  if (!source || source.line === void 0) {
+    return void 0;
   }
-  return parts.join(" > ");
+  return {
+    filePath: source.filePath,
+    lineNumber: source.line,
+    ...source.col === void 0 ? {} : { columnNumber: source.col },
+    ...source.componentChain[0] ? { componentName: source.componentChain[0] } : {}
+  };
 }
 function getTextMetrics(element) {
   const text = element.textContent?.trim();
@@ -228,10 +217,10 @@ function buildElementDescriptor({
   const video = z.instanceof(HTMLVideoElement).safeParse(element);
   const textMetrics = getTextMetrics(element);
   const fiberChain = element instanceof HTMLElement ? getFiberChain(element) : [];
-  const sourceLocation = fiberChain[0]?.sourceLocation;
   const trimmedText = getRenderedText(element);
   const sectionLabel = findSectionLabel(section);
   const { definedStyles, authoredStyles } = getElementStyles(element);
+  const anchor = captureElementAnchor(element, clickPosition);
   return {
     kind: "react-element",
     selector: buildSelector(element),
@@ -251,10 +240,11 @@ function buildElementDescriptor({
     authoredStyles,
     inheritedStyles: getInheritedStyles(element),
     clickPosition,
-    sourceLocation,
+    sourceLocation: getAnchorSourceLocation(anchor),
     fiberChain,
     siblingSelectors,
-    ...section ? { section: { selector: buildSelector(section) } } : {}
+    ...section ? { section: { selector: buildSelector(section) } } : {},
+    anchor
   };
 }
 export {

package/select-mode/iframeRpcChannel.d.ts

@@ -134,6 +134,34 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                     props: import("zod").ZodOptional<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodUnknown>>;
                 }, import("zod/v4/core").$strip>>>;
                 siblingSelectors: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodString>>;
+                anchor: import("zod").ZodOptional<import("zod").ZodObject<{
+                    type: import("zod").ZodLiteral<"element">;
+                    semanticSelector: import("zod").ZodOptional<import("zod").ZodString>;
+                    selector: import("zod").ZodString;
+                    nthOfTypePath: import("zod").ZodString;
+                    source: import("zod").ZodOptional<import("zod").ZodObject<{
+                        filePath: import("zod").ZodString;
+                        componentChain: import("zod").ZodArray<import("zod").ZodString>;
+                        line: import("zod").ZodOptional<import("zod").ZodNumber>;
+                        col: import("zod").ZodOptional<import("zod").ZodNumber>;
+                    }, import("zod/v4/core").$strip>>;
+                    listKey: import("zod").ZodOptional<import("zod").ZodString>;
+                    tagName: import("zod").ZodString;
+                    textPreview: import("zod").ZodString;
+                    quote: import("zod").ZodOptional<import("zod").ZodObject<{
+                        exact: import("zod").ZodString;
+                        prefix: import("zod").ZodString;
+                        suffix: import("zod").ZodString;
+                    }, import("zod/v4/core").$strip>>;
+                    offset: import("zod").ZodObject<{
+                        x: import("zod").ZodNumber;
+                        y: import("zod").ZodNumber;
+                    }, import("zod/v4/core").$strip>;
+                    context: import("zod").ZodOptional<import("zod").ZodObject<{
+                        url: import("zod").ZodString;
+                        locale: import("zod").ZodOptional<import("zod").ZodNullable<import("zod").ZodString>>;
+                    }, import("zod/v4/core").$strip>>;
+                }, import("zod/v4/core").$strip>>;
             }, import("zod/v4/core").$strip>;
         }, import("zod/v4/core").$strip>;
         outputSchema: import("zod").ZodObject<{
@@ -235,6 +263,34 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                     props: import("zod").ZodOptional<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodUnknown>>;
                 }, import("zod/v4/core").$strip>>>;
                 siblingSelectors: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodString>>;
+                anchor: import("zod").ZodOptional<import("zod").ZodObject<{
+                    type: import("zod").ZodLiteral<"element">;
+                    semanticSelector: import("zod").ZodOptional<import("zod").ZodString>;
+                    selector: import("zod").ZodString;
+                    nthOfTypePath: import("zod").ZodString;
+                    source: import("zod").ZodOptional<import("zod").ZodObject<{
+                        filePath: import("zod").ZodString;
+                        componentChain: import("zod").ZodArray<import("zod").ZodString>;
+                        line: import("zod").ZodOptional<import("zod").ZodNumber>;
+                        col: import("zod").ZodOptional<import("zod").ZodNumber>;
+                    }, import("zod/v4/core").$strip>>;
+                    listKey: import("zod").ZodOptional<import("zod").ZodString>;
+                    tagName: import("zod").ZodString;
+                    textPreview: import("zod").ZodString;
+                    quote: import("zod").ZodOptional<import("zod").ZodObject<{
+                        exact: import("zod").ZodString;
+                        prefix: import("zod").ZodString;
+                        suffix: import("zod").ZodString;
+                    }, import("zod/v4/core").$strip>>;
+                    offset: import("zod").ZodObject<{
+                        x: import("zod").ZodNumber;
+                        y: import("zod").ZodNumber;
+                    }, import("zod/v4/core").$strip>;
+                    context: import("zod").ZodOptional<import("zod").ZodObject<{
+                        url: import("zod").ZodString;
+                        locale: import("zod").ZodOptional<import("zod").ZodNullable<import("zod").ZodString>>;
+                    }, import("zod/v4/core").$strip>>;
+                }, import("zod/v4/core").$strip>>;
             }, import("zod/v4/core").$strip>, import("zod").ZodObject<{
                 kind: import("zod").ZodLiteral<"plan">;
                 planId: import("zod").ZodString;
@@ -424,6 +480,34 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                     props: import("zod").ZodOptional<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodUnknown>>;
                 }, import("zod/v4/core").$strip>>>;
                 siblingSelectors: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodString>>;
+                anchor: import("zod").ZodOptional<import("zod").ZodObject<{
+                    type: import("zod").ZodLiteral<"element">;
+                    semanticSelector: import("zod").ZodOptional<import("zod").ZodString>;
+                    selector: import("zod").ZodString;
+                    nthOfTypePath: import("zod").ZodString;
+                    source: import("zod").ZodOptional<import("zod").ZodObject<{
+                        filePath: import("zod").ZodString;
+                        componentChain: import("zod").ZodArray<import("zod").ZodString>;
+                        line: import("zod").ZodOptional<import("zod").ZodNumber>;
+                        col: import("zod").ZodOptional<import("zod").ZodNumber>;
+                    }, import("zod/v4/core").$strip>>;
+                    listKey: import("zod").ZodOptional<import("zod").ZodString>;
+                    tagName: import("zod").ZodString;
+                    textPreview: import("zod").ZodString;
+                    quote: import("zod").ZodOptional<import("zod").ZodObject<{
+                        exact: import("zod").ZodString;
+                        prefix: import("zod").ZodString;
+                        suffix: import("zod").ZodString;
+                    }, import("zod/v4/core").$strip>>;
+                    offset: import("zod").ZodObject<{
+                        x: import("zod").ZodNumber;
+                        y: import("zod").ZodNumber;
+                    }, import("zod/v4/core").$strip>;
+                    context: import("zod").ZodOptional<import("zod").ZodObject<{
+                        url: import("zod").ZodString;
+                        locale: import("zod").ZodOptional<import("zod").ZodNullable<import("zod").ZodString>>;
+                    }, import("zod/v4/core").$strip>>;
+                }, import("zod/v4/core").$strip>>;
             }, import("zod/v4/core").$strip>, import("zod").ZodObject<{
                 kind: import("zod").ZodLiteral<"plan">;
                 planId: import("zod").ZodString;

package/select-mode/symbolicate.js

@@ -229,13 +229,17 @@ async function symbolicateSelectedElement(selectedElement) {
       });
     }
   }
-  let sourceLocation = selectedElement.sourceLocation;
-  if (fiberChain.length === 0 && sourceLocation && isLikelyCompiledLocation(sourceLocation)) {
-    const captured = sourceLocation;
+  const capturedSourceLocation = selectedElement.sourceLocation;
+  let sourceLocation = capturedSourceLocation;
+  const symbolicatedCapture = {
+    location: null
+  };
+  if (sourceLocation && isLikelyCompiledLocation(sourceLocation)) {
     targets.push({
-      location: captured,
+      location: sourceLocation,
       apply: (next) => {
         sourceLocation = next;
+        symbolicatedCapture.location = next;
       }
     });
   }
@@ -249,13 +253,27 @@ async function symbolicateSelectedElement(selectedElement) {
     const frame = extractResolvedFrame(resolved[index] ?? null);
     target.apply(applyResolved({ original: target.location, frame }));
   }
-  if (fiberChain.length > 0) {
-    sourceLocation = findUserSourceLocation(fiberChain) ?? fiberChain[0].sourceLocation;
+  if (!isUserSourceLocation(sourceLocation)) {
+    sourceLocation = findUserSourceLocation(fiberChain) ?? sourceLocation ?? fiberChain[0]?.sourceLocation;
   }
+  const anchor = selectedElement.anchor;
+  const anchorSource = anchor?.source;
+  const resolvedCapture = anchorSource && anchorSource.filePath === capturedSourceLocation?.filePath && anchorSource.line === capturedSourceLocation.lineNumber ? symbolicatedCapture.location : null;
   return {
     ...selectedElement,
     sourceLocation,
-    fiberChain
+    fiberChain,
+    ...anchor && anchorSource && resolvedCapture ? {
+      anchor: {
+        ...anchor,
+        source: {
+          ...anchorSource,
+          filePath: resolvedCapture.filePath,
+          line: resolvedCapture.lineNumber,
+          col: resolvedCapture.columnNumber
+        }
+      }
+    } : {}
   };
 }
 export {