@replohq/sandbox-runtime 0.1.0

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

@@ -0,0 +1,26 @@
+import type { SelectableData, SelectModeClickPosition } from "../../_vendor/schemas/generated/selectMode";
+/**
+ * Element that should own a click/hover selection: skip TipTap/inline JSX
+ * mark wrappers, then prefer an explicit selectable boundary when present.
+ */
+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.
+ */
+export declare function buildSelector(element: Element): string;
+/**
+ * The single entrypoint for converting a DOM `Element` into the serialized
+ * `SelectedElement` payload that crosses the iframe<->parent boundary.
+ * Centralizes everything the parent (and downstream agent) need to know
+ * about a selection: identification, geometry, source location, and a
+ * style-inlined HTML snippet.
+ *
+ * @author Kevin O'Connell 2026-04-17
+ */
+export declare function buildElementDescriptor({ element, clickPosition, siblingSelectors, }: {
+    element: Element;
+    clickPosition: SelectModeClickPosition;
+    siblingSelectors?: string[];
+}): SelectableData;

package/select-mode/descriptor/elementDescriptor.js

@@ -0,0 +1,201 @@
+import {
+  readSelectablePayload,
+  SELECT_MODE_SELECTABLE_ATTRIBUTE,
+  SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE
+} from "../../_vendor/schemas/selectMode.mjs";
+import { getFiberChain } from "../fiber";
+import { skipInlineTextMarkElements } from "../inlineTextMarks";
+import { getElementBoundingRect } from "../interactions/selectionGeometry";
+import { getDefinedStyles, getInheritedStyles } from "./styleExtraction";
+function getNearestSelectableElement(element) {
+  const host = skipInlineTextMarkElements(element);
+  return host.closest(`[${SELECT_MODE_SELECTABLE_ATTRIBUTE}]`) ?? host;
+}
+function getSelectableDataFromElement(element) {
+  const selectableElement = element.closest(
+    `[${SELECT_MODE_SELECTABLE_ATTRIBUTE}]`
+  );
+  if (!selectableElement) {
+    return null;
+  }
+  const selectablePayload = readSelectablePayload(
+    selectableElement.getAttribute(SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE)
+  );
+  if (!selectablePayload) {
+    return null;
+  }
+  return {
+    ...selectablePayload,
+    rect: getElementBoundingRect(selectableElement)
+  };
+}
+function identifyElement(element) {
+  const tagName = element.tagName.toLowerCase();
+  if (tagName === "button" || element.getAttribute("role") === "button" || tagName === "input") {
+    const trimmedText2 = element.textContent?.trim();
+    if (trimmedText2) {
+      return `${tagName}: "${trimmedText2.slice(0, 60)}"`;
+    }
+    const ariaLabel = element.getAttribute("aria-label");
+    if (ariaLabel) {
+      return `${tagName}: [${ariaLabel}]`;
+    }
+    if (tagName === "input") {
+      const inputType = element.type || "text";
+      const placeholder = element.getAttribute("placeholder");
+      return placeholder ? `input(${inputType}): "${placeholder}"` : `input(${inputType})`;
+    }
+    return tagName;
+  }
+  if (tagName === "a") {
+    const trimmedText2 = element.textContent?.trim();
+    if (trimmedText2) {
+      return `link: "${trimmedText2.slice(0, 60)}"`;
+    }
+    const href = element.getAttribute("href");
+    if (href) {
+      return `link: [${href.slice(0, 60)}]`;
+    }
+    return "link";
+  }
+  if (tagName === "img") {
+    const alt = element.alt;
+    if (alt) {
+      return `image: "${alt.slice(0, 60)}"`;
+    }
+    const src = element.src;
+    if (src) {
+      const filename = src.split("/").pop()?.split("?")[0] ?? src;
+      return `image: [${filename.slice(0, 40)}]`;
+    }
+    return "image";
+  }
+  if (/^h[1-6]$/.test(tagName)) {
+    const trimmedText2 = element.textContent?.trim();
+    return trimmedText2 ? `heading(${tagName}): "${trimmedText2.slice(0, 60)}"` : tagName;
+  }
+  if (["div", "main", "section", "article", "header", "footer", "nav"].includes(
+    tagName
+  )) {
+    const role2 = element.getAttribute("role");
+    if (role2) {
+      return role2;
+    }
+  }
+  const trimmedText = element.textContent?.trim();
+  if (trimmedText && trimmedText.length < 120) {
+    const role2 = element.getAttribute("role");
+    const label = role2 ?? tagName;
+    return `${label}: "${trimmedText.slice(0, 60)}"`;
+  }
+  const role = element.getAttribute("role");
+  if (role) {
+    return role;
+  }
+  const className = element.className;
+  if (typeof className === "string" && className) {
+    const meaningfulClassName = className.split(/\s+/).find((classToken) => {
+      return !classToken.startsWith("_") && !classToken.match(/^[a-z]{1,2}\d/) && classToken.length > 2;
+    });
+    if (meaningfulClassName) {
+      return `${tagName}.${meaningfulClassName}`;
+    }
+  }
+  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(`#${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 parts.join(" > ");
+}
+function getTextMetrics(element) {
+  const text = element.textContent?.trim();
+  if (!text) {
+    return null;
+  }
+  const style = window.getComputedStyle(element);
+  const parsedLineHeight = Number.parseFloat(style.lineHeight);
+  const computedLineHeight = Number.isNaN(parsedLineHeight) ? Number.parseFloat(style.fontSize) * 1.2 : parsedLineHeight;
+  try {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    const lineRects = Array.from(range.getClientRects()).filter((lineRect) => {
+      return lineRect.width > 0 && lineRect.height > 0;
+    });
+    let tightWidth = 0;
+    for (const lineRect of lineRects) {
+      tightWidth = Math.max(tightWidth, lineRect.width);
+    }
+    const lineCount = lineRects.length;
+    if (lineCount === 0) {
+      return null;
+    }
+    return {
+      tightWidth,
+      lineCount,
+      lineHeight: computedLineHeight
+    };
+  } catch {
+    return null;
+  }
+}
+function buildElementDescriptor({
+  element,
+  clickPosition,
+  siblingSelectors = []
+}) {
+  const selectableData = getSelectableDataFromElement(element);
+  if (selectableData) {
+    return selectableData;
+  }
+  const textMetrics = getTextMetrics(element);
+  const fiberChain = element instanceof HTMLElement ? getFiberChain(element) : [];
+  const sourceLocation = fiberChain[0]?.sourceLocation;
+  return {
+    kind: "react-element",
+    selector: buildSelector(element),
+    tagName: element.tagName.toLowerCase(),
+    elementType: identifyElement(element),
+    textContent: element.textContent?.trim()?.slice(0, 200) ?? null,
+    rect: getElementBoundingRect(element),
+    textMetrics,
+    outerHTML: element.outerHTML.slice(0, 4e3),
+    definedStyles: getDefinedStyles(element),
+    inheritedStyles: getInheritedStyles(element),
+    clickPosition,
+    sourceLocation,
+    fiberChain,
+    siblingSelectors
+  };
+}
+export {
+  buildElementDescriptor,
+  buildSelector,
+  getNearestSelectableElement
+};
+//# sourceMappingURL=elementDescriptor.js.map

package/select-mode/descriptor/elementDescriptor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../select-mode/descriptor/elementDescriptor.ts"],
+  "sourcesContent": ["import type {\n  SelectableData,\n  SelectModeClickPosition,\n  SelectModeTextMetrics,\n} from \"schemas/generated/selectMode\";\n\nimport {\n  readSelectablePayload,\n  SELECT_MODE_SELECTABLE_ATTRIBUTE,\n  SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE,\n} from \"schemas/selectMode\";\n\nimport { getFiberChain } from \"../fiber\";\nimport { skipInlineTextMarkElements } from \"../inlineTextMarks\";\nimport { getElementBoundingRect } from \"../interactions/selectionGeometry\";\nimport { getDefinedStyles, getInheritedStyles } from \"./styleExtraction\";\n\n/**\n * Element that should own a click/hover selection: skip TipTap/inline JSX\n * mark wrappers, then prefer an explicit selectable boundary when present.\n */\nexport function getNearestSelectableElement(element: Element): Element {\n  const host = skipInlineTextMarkElements(element);\n  return host.closest(`[${SELECT_MODE_SELECTABLE_ATTRIBUTE}]`) ?? host;\n}\n\nfunction getSelectableDataFromElement(element: Element): SelectableData | null {\n  const selectableElement = element.closest(\n    `[${SELECT_MODE_SELECTABLE_ATTRIBUTE}]`,\n  );\n  if (!selectableElement) {\n    return null;\n  }\n\n  const selectablePayload = readSelectablePayload(\n    selectableElement.getAttribute(SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE),\n  );\n  if (!selectablePayload) {\n    return null;\n  }\n\n  return {\n    ...selectablePayload,\n    rect: getElementBoundingRect(selectableElement),\n  };\n}\n\n/**\n * Produce a short human-readable label for an element (used in chat tokens\n * and prompt context). Tag-aware so a `<button>` reads as `button: \"Save\"`\n * rather than just `button` \u2014 that extra detail is what lets the agent\n * resolve \"the save button\" without us having to send a screenshot.\n */\nfunction identifyElement(element: Element): string {\n  const tagName = element.tagName.toLowerCase();\n\n  if (\n    tagName === \"button\" ||\n    element.getAttribute(\"role\") === \"button\" ||\n    tagName === \"input\"\n  ) {\n    const trimmedText = element.textContent?.trim();\n    if (trimmedText) {\n      return `${tagName}: \"${trimmedText.slice(0, 60)}\"`;\n    }\n    const ariaLabel = element.getAttribute(\"aria-label\");\n    if (ariaLabel) {\n      return `${tagName}: [${ariaLabel}]`;\n    }\n    if (tagName === \"input\") {\n      // Legacy cast - may or may not be necessary\n      // eslint-disable-next-line replo/no-as-cast\n      const inputType = (element as HTMLInputElement).type || \"text\";\n      const placeholder = element.getAttribute(\"placeholder\");\n      return placeholder\n        ? `input(${inputType}): \"${placeholder}\"`\n        : `input(${inputType})`;\n    }\n    return tagName;\n  }\n\n  if (tagName === \"a\") {\n    const trimmedText = element.textContent?.trim();\n    if (trimmedText) {\n      return `link: \"${trimmedText.slice(0, 60)}\"`;\n    }\n    const href = element.getAttribute(\"href\");\n    if (href) {\n      return `link: [${href.slice(0, 60)}]`;\n    }\n    return \"link\";\n  }\n\n  if (tagName === \"img\") {\n    // Legacy cast - may or may not be necessary\n    // eslint-disable-next-line replo/no-as-cast\n    const alt = (element as HTMLImageElement).alt;\n    if (alt) {\n      return `image: \"${alt.slice(0, 60)}\"`;\n    }\n    // Legacy cast - may or may not be necessary\n    // eslint-disable-next-line replo/no-as-cast\n    const src = (element as HTMLImageElement).src;\n    if (src) {\n      const filename = src.split(\"/\").pop()?.split(\"?\")[0] ?? src;\n      return `image: [${filename.slice(0, 40)}]`;\n    }\n    return \"image\";\n  }\n\n  if (/^h[1-6]$/.test(tagName)) {\n    const trimmedText = element.textContent?.trim();\n    return trimmedText\n      ? `heading(${tagName}): \"${trimmedText.slice(0, 60)}\"`\n      : tagName;\n  }\n\n  if (\n    [\"div\", \"main\", \"section\", \"article\", \"header\", \"footer\", \"nav\"].includes(\n      tagName,\n    )\n  ) {\n    const role = element.getAttribute(\"role\");\n    if (role) {\n      return role;\n    }\n  }\n\n  const trimmedText = element.textContent?.trim();\n  if (trimmedText && trimmedText.length < 120) {\n    const role = element.getAttribute(\"role\");\n    const label = role ?? tagName;\n    return `${label}: \"${trimmedText.slice(0, 60)}\"`;\n  }\n\n  const role = element.getAttribute(\"role\");\n  if (role) {\n    return role;\n  }\n\n  const className = element.className;\n  if (typeof className === \"string\" && className) {\n    const meaningfulClassName = className.split(/\\s+/).find((classToken) => {\n      return (\n        !classToken.startsWith(\"_\") &&\n        !classToken.match(/^[a-z]{1,2}\\d/) &&\n        classToken.length > 2\n      );\n    });\n    if (meaningfulClassName) {\n      return `${tagName}.${meaningfulClassName}`;\n    }\n  }\n\n  return tagName;\n}\n\n/**\n * Build a CSS selector path from `element` up to the document root. Stops\n * (and short-circuits) at the first ancestor with an `id`. Used so the\n * parent can identify the element later without holding a DOM reference.\n */\nexport function buildSelector(element: Element): string {\n  const parts: string[] = [];\n  let currentElement: Element | null = element;\n\n  while (currentElement && currentElement !== document.documentElement) {\n    const tag = currentElement.tagName.toLowerCase();\n    const id = currentElement.id;\n\n    if (id) {\n      parts.unshift(`#${id}`);\n      break;\n    }\n\n    const parentElement: Element | null = currentElement.parentElement;\n    if (parentElement) {\n      const currentTag = currentElement.tagName;\n      // Legacy cast - may or may not be necessary\n      // eslint-disable-next-line replo/no-as-cast\n      const siblings = Array.from(parentElement.children) as Element[];\n      const siblingElementsWithSameTag = siblings.filter((sibling) => {\n        return sibling.tagName === currentTag;\n      });\n      if (siblingElementsWithSameTag.length > 1) {\n        const index = siblingElementsWithSameTag.indexOf(currentElement) + 1;\n        parts.unshift(`${tag}:nth-of-type(${index})`);\n      } else {\n        parts.unshift(tag);\n      }\n    } else {\n      parts.unshift(tag);\n    }\n\n    currentElement = parentElement;\n  }\n\n  return parts.join(\" > \");\n}\n\n/**\n * Measures the actual rendered text inside `element` \u2014 the tightest width\n * the text occupies, the line count, and the line height. We return this\n * alongside the element's bounding rect so the parent panel can position\n * itself relative to the *text* (not the element box) for text-heavy\n * elements like headings and paragraphs.\n */\nfunction getTextMetrics(element: Element): SelectModeTextMetrics | null {\n  const text = element.textContent?.trim();\n  if (!text) {\n    return null;\n  }\n\n  const style = window.getComputedStyle(element);\n  const parsedLineHeight = Number.parseFloat(style.lineHeight);\n  const computedLineHeight = Number.isNaN(parsedLineHeight)\n    ? Number.parseFloat(style.fontSize) * 1.2\n    : parsedLineHeight;\n\n  try {\n    const range = document.createRange();\n    range.selectNodeContents(element);\n\n    const lineRects = Array.from(range.getClientRects()).filter((lineRect) => {\n      return lineRect.width > 0 && lineRect.height > 0;\n    });\n\n    let tightWidth = 0;\n    for (const lineRect of lineRects) {\n      tightWidth = Math.max(tightWidth, lineRect.width);\n    }\n\n    const lineCount = lineRects.length;\n    if (lineCount === 0) {\n      return null;\n    }\n\n    return {\n      tightWidth,\n      lineCount,\n      lineHeight: computedLineHeight,\n    };\n  } catch {\n    return null;\n  }\n}\n\n/**\n * The single entrypoint for converting a DOM `Element` into the serialized\n * `SelectedElement` payload that crosses the iframe<->parent boundary.\n * Centralizes everything the parent (and downstream agent) need to know\n * about a selection: identification, geometry, source location, and a\n * style-inlined HTML snippet.\n *\n * @author Kevin O'Connell 2026-04-17\n */\nexport function buildElementDescriptor({\n  element,\n  clickPosition,\n  siblingSelectors = [],\n}: {\n  element: Element;\n  clickPosition: SelectModeClickPosition;\n  siblingSelectors?: string[];\n}): SelectableData {\n  const selectableData = getSelectableDataFromElement(element);\n  if (selectableData) {\n    return selectableData;\n  }\n\n  const textMetrics = getTextMetrics(element);\n  const fiberChain =\n    element instanceof HTMLElement ? getFiberChain(element) : [];\n  const sourceLocation = fiberChain[0]?.sourceLocation;\n\n  return {\n    kind: \"react-element\",\n    selector: buildSelector(element),\n    tagName: element.tagName.toLowerCase(),\n    elementType: identifyElement(element),\n    textContent: element.textContent?.trim()?.slice(0, 200) ?? null,\n    rect: getElementBoundingRect(element),\n    textMetrics,\n    outerHTML: element.outerHTML.slice(0, 4000),\n    definedStyles: getDefinedStyles(element),\n    inheritedStyles: getInheritedStyles(element),\n    clickPosition,\n    sourceLocation,\n    fiberChain,\n    siblingSelectors,\n  };\n}\n"],
+  "mappings": "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",
+  "names": ["trimmedText", "role"]
+}

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

@@ -0,0 +1,3 @@
+import type { SelectModeDefinedStyle } from "../../_vendor/schemas/generated/selectMode";
+export declare function getDefinedStyles(element: Element): SelectModeDefinedStyle[];
+export declare function getInheritedStyles(element: Element): Record<string, string>;

package/select-mode/descriptor/styleExtraction.js

@@ -0,0 +1,271 @@
+const CONTROL_STYLE_PROPERTIES = [
+  "color",
+  "background-color",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "line-height",
+  "letter-spacing",
+  "text-align"
+];
+const CONTROL_STYLE_PROPERTY_SET = new Set(CONTROL_STYLE_PROPERTIES);
+function isControlStyleProperty(propertyName) {
+  return CONTROL_STYLE_PROPERTY_SET.has(propertyName);
+}
+function getEscapedClassName(className) {
+  return CSS.escape(className);
+}
+function getClassSelectorMatches({
+  selectorText,
+  classNames
+}) {
+  const matches = [];
+  const selectorParts = selectorText.split(",").map((selectorPart) => {
+    return selectorPart.trim();
+  });
+  for (const selectorPart of selectorParts) {
+    for (const className of classNames) {
+      const escapedClassName = getEscapedClassName(className);
+      const baseSelector = `.${escapedClassName}`;
+      if (selectorPart === baseSelector) {
+        matches.push({ className, pseudo: null });
+        continue;
+      }
+      if (!selectorPart.startsWith(`${baseSelector}:`)) {
+        continue;
+      }
+      const pseudo = selectorPart.slice(baseSelector.length);
+      const isSimplePseudoSelector = pseudo.startsWith(":") && !/[ >+~#[.]/.test(pseudo) && !pseudo.includes("::");
+      if (isSimplePseudoSelector) {
+        matches.push({ className, pseudo });
+      }
+    }
+  }
+  return matches;
+}
+function getNestedAtRules({
+  rule,
+  activeAtRules
+}) {
+  const nextAtRules = [...activeAtRules];
+  if (rule instanceof CSSMediaRule) {
+    nextAtRules.push({ type: "@media", text: rule.conditionText });
+  } else if (rule instanceof CSSSupportsRule) {
+    nextAtRules.push({ type: "@supports", text: rule.conditionText });
+  } else if (rule.constructor?.name === "CSSContainerRule" && "conditionText" in rule && typeof rule.conditionText === "string") {
+    nextAtRules.push({
+      type: "@container",
+      text: rule.conditionText
+    });
+  }
+  return nextAtRules;
+}
+function getNestedRuleList(rule) {
+  if (typeof CSSGroupingRule !== "undefined" && rule instanceof CSSGroupingRule) {
+    return rule.cssRules;
+  }
+  return null;
+}
+function getStyleVariant({
+  atRules,
+  pseudo
+}) {
+  if (atRules.length === 0 && !pseudo) {
+    return null;
+  }
+  return { atRules, pseudo };
+}
+function getStyleVariantKey(variant) {
+  return variant ? JSON.stringify(variant) : "base";
+}
+function getDefinedStyleKey({
+  property,
+  variant
+}) {
+  return `${property}:${getStyleVariantKey(variant)}`;
+}
+function getResolvedClassStyleValue({
+  className,
+  property,
+  raw,
+  variant
+}) {
+  if (variant) {
+    return raw;
+  }
+  const temporaryElement = document.createElement("div");
+  temporaryElement.className = className;
+  document.body.append(temporaryElement);
+  const resolved = window.getComputedStyle(temporaryElement).getPropertyValue(property);
+  temporaryElement.remove();
+  return resolved.trim() || raw;
+}
+function setDefinedStyle({
+  definedStylesByKey,
+  property,
+  variant,
+  className,
+  raw,
+  resolved
+}) {
+  definedStylesByKey.set(getDefinedStyleKey({ property, variant }), {
+    property,
+    variant,
+    className,
+    raw,
+    resolved
+  });
+}
+function addRuleDefinedStyles({
+  rule,
+  activeAtRules,
+  classNames,
+  definedStylesByKey
+}) {
+  const selectorMatches = getClassSelectorMatches({
+    selectorText: rule.selectorText ?? "",
+    classNames
+  });
+  if (selectorMatches.length === 0) {
+    return;
+  }
+  for (const selectorMatch of selectorMatches) {
+    const variant = getStyleVariant({
+      atRules: activeAtRules,
+      pseudo: selectorMatch.pseudo
+    });
+    for (let styleIndex = 0; styleIndex < rule.style.length; styleIndex += 1) {
+      const property = rule.style.item(styleIndex);
+      if (!property || !isControlStyleProperty(property)) {
+        continue;
+      }
+      const raw = rule.style.getPropertyValue(property).trim();
+      if (!raw) {
+        continue;
+      }
+      setDefinedStyle({
+        definedStylesByKey,
+        property,
+        variant,
+        className: selectorMatch.className,
+        raw,
+        resolved: getResolvedClassStyleValue({
+          className: selectorMatch.className,
+          property,
+          raw,
+          variant
+        })
+      });
+    }
+  }
+}
+function addStyleRulesRecursively({
+  ruleList,
+  activeAtRules,
+  classNames,
+  definedStylesByKey
+}) {
+  for (const rule of Array.from(ruleList)) {
+    const nestedRuleList = getNestedRuleList(rule);
+    if (nestedRuleList) {
+      addStyleRulesRecursively({
+        ruleList: nestedRuleList,
+        activeAtRules: getNestedAtRules({ rule, activeAtRules }),
+        classNames,
+        definedStylesByKey
+      });
+    }
+    if (rule instanceof CSSStyleRule) {
+      addRuleDefinedStyles({
+        rule,
+        activeAtRules,
+        classNames,
+        definedStylesByKey
+      });
+    }
+  }
+}
+function addClassDefinedStyles({
+  element,
+  definedStylesByKey
+}) {
+  const classNames = Array.from(
+    new Set([...element.classList].filter(Boolean))
+  );
+  if (classNames.length === 0) {
+    return;
+  }
+  for (const sheet of Array.from(document.styleSheets)) {
+    if (sheet.href) {
+      try {
+        const sheetUrl = new URL(sheet.href);
+        if (sheetUrl.origin !== window.location.origin) {
+          continue;
+        }
+      } catch (error) {
+        if (error instanceof TypeError) {
+          continue;
+        }
+        throw error;
+      }
+    }
+    try {
+      addStyleRulesRecursively({
+        ruleList: sheet.cssRules,
+        activeAtRules: [],
+        classNames,
+        definedStylesByKey
+      });
+    } catch (error) {
+      if (error instanceof DOMException && error.name === "SecurityError") {
+        continue;
+      }
+      throw error;
+    }
+  }
+}
+function addInlineDefinedStyles({
+  element,
+  definedStylesByKey
+}) {
+  if (!(element instanceof HTMLElement)) {
+    return;
+  }
+  for (let styleIndex = 0; styleIndex < element.style.length; styleIndex += 1) {
+    const property = element.style.item(styleIndex);
+    if (!property || !isControlStyleProperty(property)) {
+      continue;
+    }
+    const raw = element.style.getPropertyValue(property).trim();
+    if (!raw) {
+      continue;
+    }
+    setDefinedStyle({
+      definedStylesByKey,
+      property,
+      variant: null,
+      className: null,
+      raw,
+      resolved: raw
+    });
+  }
+}
+function getDefinedStyles(element) {
+  const definedStylesByKey = /* @__PURE__ */ new Map();
+  addClassDefinedStyles({ element, definedStylesByKey });
+  addInlineDefinedStyles({ element, definedStylesByKey });
+  return Array.from(definedStylesByKey.values());
+}
+function getInheritedStyles(element) {
+  const computedStyle = window.getComputedStyle(element);
+  const inheritedStyles = {};
+  for (const property of CONTROL_STYLE_PROPERTIES) {
+    inheritedStyles[property] = computedStyle.getPropertyValue(property);
+  }
+  return inheritedStyles;
+}
+export {
+  getDefinedStyles,
+  getInheritedStyles
+};
+//# sourceMappingURL=styleExtraction.js.map

package/select-mode/descriptor/styleExtraction.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../select-mode/descriptor/styleExtraction.ts"],
+  "sourcesContent": ["import type {\n  SelectModeDefinedStyle,\n  SelectModeStyleAtRule,\n  SelectModeStyleVariant,\n} from \"schemas/generated/selectMode\";\n\nconst CONTROL_STYLE_PROPERTIES = [\n  \"color\",\n  \"background-color\",\n  \"font-family\",\n  \"font-size\",\n  \"font-weight\",\n  \"line-height\",\n  \"letter-spacing\",\n  \"text-align\",\n] as const;\n\ntype ControlStyleProperty = (typeof CONTROL_STYLE_PROPERTIES)[number];\n\nconst CONTROL_STYLE_PROPERTY_SET = new Set<string>(CONTROL_STYLE_PROPERTIES);\n\ntype SelectorMatch = {\n  className: string;\n  pseudo: string | null;\n};\n\nfunction isControlStyleProperty(\n  propertyName: string,\n): propertyName is ControlStyleProperty {\n  return CONTROL_STYLE_PROPERTY_SET.has(propertyName);\n}\n\nfunction getEscapedClassName(className: string) {\n  return CSS.escape(className);\n}\n\nfunction getClassSelectorMatches({\n  selectorText,\n  classNames,\n}: {\n  selectorText: string;\n  classNames: string[];\n}): SelectorMatch[] {\n  const matches: SelectorMatch[] = [];\n  const selectorParts = selectorText.split(\",\").map((selectorPart) => {\n    return selectorPart.trim();\n  });\n\n  for (const selectorPart of selectorParts) {\n    for (const className of classNames) {\n      const escapedClassName = getEscapedClassName(className);\n      const baseSelector = `.${escapedClassName}`;\n      if (selectorPart === baseSelector) {\n        matches.push({ className, pseudo: null });\n        continue;\n      }\n\n      if (!selectorPart.startsWith(`${baseSelector}:`)) {\n        continue;\n      }\n\n      const pseudo = selectorPart.slice(baseSelector.length);\n      const isSimplePseudoSelector =\n        pseudo.startsWith(\":\") &&\n        !/[ >+~#[.]/.test(pseudo) &&\n        !pseudo.includes(\"::\");\n      if (isSimplePseudoSelector) {\n        matches.push({ className, pseudo });\n      }\n    }\n  }\n\n  return matches;\n}\n\nfunction getNestedAtRules({\n  rule,\n  activeAtRules,\n}: {\n  rule: CSSRule;\n  activeAtRules: SelectModeStyleAtRule[];\n}): SelectModeStyleAtRule[] {\n  const nextAtRules = [...activeAtRules];\n  if (rule instanceof CSSMediaRule) {\n    nextAtRules.push({ type: \"@media\", text: rule.conditionText });\n  } else if (rule instanceof CSSSupportsRule) {\n    nextAtRules.push({ type: \"@supports\", text: rule.conditionText });\n  } else if (\n    rule.constructor?.name === \"CSSContainerRule\" &&\n    \"conditionText\" in rule &&\n    typeof rule.conditionText === \"string\"\n  ) {\n    nextAtRules.push({\n      type: \"@container\",\n      text: rule.conditionText,\n    });\n  }\n  return nextAtRules;\n}\n\nfunction getNestedRuleList(rule: CSSRule): CSSRuleList | null {\n  if (\n    typeof CSSGroupingRule !== \"undefined\" &&\n    rule instanceof CSSGroupingRule\n  ) {\n    return rule.cssRules;\n  }\n  return null;\n}\n\nfunction getStyleVariant({\n  atRules,\n  pseudo,\n}: {\n  atRules: SelectModeStyleAtRule[];\n  pseudo: string | null;\n}): SelectModeStyleVariant | null {\n  if (atRules.length === 0 && !pseudo) {\n    return null;\n  }\n  return { atRules, pseudo };\n}\n\nfunction getStyleVariantKey(variant: SelectModeStyleVariant | null) {\n  return variant ? JSON.stringify(variant) : \"base\";\n}\n\nfunction getDefinedStyleKey({\n  property,\n  variant,\n}: {\n  property: string;\n  variant: SelectModeStyleVariant | null;\n}) {\n  return `${property}:${getStyleVariantKey(variant)}`;\n}\n\nfunction getResolvedClassStyleValue({\n  className,\n  property,\n  raw,\n  variant,\n}: {\n  className: string;\n  property: string;\n  raw: string;\n  variant: SelectModeStyleVariant | null;\n}) {\n  if (variant) {\n    return raw;\n  }\n\n  const temporaryElement = document.createElement(\"div\");\n  temporaryElement.className = className;\n  document.body.append(temporaryElement);\n  const resolved = window\n    .getComputedStyle(temporaryElement)\n    .getPropertyValue(property);\n  temporaryElement.remove();\n\n  return resolved.trim() || raw;\n}\n\nfunction setDefinedStyle({\n  definedStylesByKey,\n  property,\n  variant,\n  className,\n  raw,\n  resolved,\n}: {\n  definedStylesByKey: Map<string, SelectModeDefinedStyle>;\n  property: string;\n  variant: SelectModeStyleVariant | null;\n  className: string | null;\n  raw: string;\n  resolved: string;\n}) {\n  definedStylesByKey.set(getDefinedStyleKey({ property, variant }), {\n    property,\n    variant,\n    className,\n    raw,\n    resolved,\n  });\n}\n\nfunction addRuleDefinedStyles({\n  rule,\n  activeAtRules,\n  classNames,\n  definedStylesByKey,\n}: {\n  rule: CSSStyleRule;\n  activeAtRules: SelectModeStyleAtRule[];\n  classNames: string[];\n  definedStylesByKey: Map<string, SelectModeDefinedStyle>;\n}) {\n  const selectorMatches = getClassSelectorMatches({\n    selectorText: rule.selectorText ?? \"\",\n    classNames,\n  });\n  if (selectorMatches.length === 0) {\n    return;\n  }\n\n  for (const selectorMatch of selectorMatches) {\n    const variant = getStyleVariant({\n      atRules: activeAtRules,\n      pseudo: selectorMatch.pseudo,\n    });\n\n    for (let styleIndex = 0; styleIndex < rule.style.length; styleIndex += 1) {\n      const property = rule.style.item(styleIndex);\n      if (!property || !isControlStyleProperty(property)) {\n        continue;\n      }\n\n      const raw = rule.style.getPropertyValue(property).trim();\n      if (!raw) {\n        continue;\n      }\n\n      setDefinedStyle({\n        definedStylesByKey,\n        property,\n        variant,\n        className: selectorMatch.className,\n        raw,\n        resolved: getResolvedClassStyleValue({\n          className: selectorMatch.className,\n          property,\n          raw,\n          variant,\n        }),\n      });\n    }\n  }\n}\n\nfunction addStyleRulesRecursively({\n  ruleList,\n  activeAtRules,\n  classNames,\n  definedStylesByKey,\n}: {\n  ruleList: CSSRuleList;\n  activeAtRules: SelectModeStyleAtRule[];\n  classNames: string[];\n  definedStylesByKey: Map<string, SelectModeDefinedStyle>;\n}) {\n  for (const rule of Array.from(ruleList)) {\n    const nestedRuleList = getNestedRuleList(rule);\n    if (nestedRuleList) {\n      addStyleRulesRecursively({\n        ruleList: nestedRuleList,\n        activeAtRules: getNestedAtRules({ rule, activeAtRules }),\n        classNames,\n        definedStylesByKey,\n      });\n    }\n\n    if (rule instanceof CSSStyleRule) {\n      addRuleDefinedStyles({\n        rule,\n        activeAtRules,\n        classNames,\n        definedStylesByKey,\n      });\n    }\n  }\n}\n\nfunction addClassDefinedStyles({\n  element,\n  definedStylesByKey,\n}: {\n  element: Element;\n  definedStylesByKey: Map<string, SelectModeDefinedStyle>;\n}) {\n  const classNames = Array.from(\n    new Set([...element.classList].filter(Boolean)),\n  );\n  if (classNames.length === 0) {\n    return;\n  }\n\n  for (const sheet of Array.from(document.styleSheets)) {\n    if (sheet.href) {\n      try {\n        const sheetUrl = new URL(sheet.href);\n        if (sheetUrl.origin !== window.location.origin) {\n          continue;\n        }\n      } catch (error) {\n        if (error instanceof TypeError) {\n          continue;\n        }\n        throw error;\n      }\n    }\n\n    try {\n      addStyleRulesRecursively({\n        ruleList: sheet.cssRules,\n        activeAtRules: [],\n        classNames,\n        definedStylesByKey,\n      });\n    } catch (error) {\n      if (error instanceof DOMException && error.name === \"SecurityError\") {\n        continue;\n      }\n      throw error;\n    }\n  }\n}\n\nfunction addInlineDefinedStyles({\n  element,\n  definedStylesByKey,\n}: {\n  element: Element;\n  definedStylesByKey: Map<string, SelectModeDefinedStyle>;\n}) {\n  if (!(element instanceof HTMLElement)) {\n    return;\n  }\n\n  for (let styleIndex = 0; styleIndex < element.style.length; styleIndex += 1) {\n    const property = element.style.item(styleIndex);\n    if (!property || !isControlStyleProperty(property)) {\n      continue;\n    }\n    const raw = element.style.getPropertyValue(property).trim();\n    if (!raw) {\n      continue;\n    }\n    setDefinedStyle({\n      definedStylesByKey,\n      property,\n      variant: null,\n      className: null,\n      raw,\n      resolved: raw,\n    });\n  }\n}\n\nexport function getDefinedStyles(element: Element): SelectModeDefinedStyle[] {\n  const definedStylesByKey = new Map<string, SelectModeDefinedStyle>();\n  addClassDefinedStyles({ element, definedStylesByKey });\n  addInlineDefinedStyles({ element, definedStylesByKey });\n  return Array.from(definedStylesByKey.values());\n}\n\nexport function getInheritedStyles(element: Element): Record<string, string> {\n  const computedStyle = window.getComputedStyle(element);\n  const inheritedStyles: Record<string, string> = {};\n  for (const property of CONTROL_STYLE_PROPERTIES) {\n    inheritedStyles[property] = computedStyle.getPropertyValue(property);\n  }\n  return inheritedStyles;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/select-mode/displayModeStore.d.ts

@@ -0,0 +1,10 @@
+import type { DisplayMode } from "../_vendor/schemas/generated/selectMode";
+export declare const displayModeStore: {
+    getSnapshot(): DisplayMode;
+    getServerSnapshot(): DisplayMode;
+    subscribe(listener: () => void): () => void;
+    setDisplayMode(nextDisplayMode: DisplayMode): void;
+    /** Test-only: reset back to the default so specs don't leak state. */
+    reset(): void;
+};
+export declare function useDisplayMode(): DisplayMode;

package/select-mode/displayModeStore.js

@@ -0,0 +1,47 @@
+"use client";
+import { useSyncExternalStore } from "react";
+const listeners = /* @__PURE__ */ new Set();
+let displayMode = "browse";
+const SERVER_SNAPSHOT = "browse";
+function notify() {
+  for (const listener of listeners) {
+    listener();
+  }
+}
+const displayModeStore = {
+  getSnapshot() {
+    return displayMode;
+  },
+  getServerSnapshot() {
+    return SERVER_SNAPSHOT;
+  },
+  subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  },
+  setDisplayMode(nextDisplayMode) {
+    if (nextDisplayMode === displayMode) {
+      return;
+    }
+    displayMode = nextDisplayMode;
+    notify();
+  },
+  /** Test-only: reset back to the default so specs don't leak state. */
+  reset() {
+    displayMode = "browse";
+  }
+};
+function useDisplayMode() {
+  return useSyncExternalStore(
+    displayModeStore.subscribe,
+    displayModeStore.getSnapshot,
+    displayModeStore.getServerSnapshot
+  );
+}
+export {
+  displayModeStore,
+  useDisplayMode
+};
+//# sourceMappingURL=displayModeStore.js.map

package/select-mode/displayModeStore.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../select-mode/displayModeStore.ts"],
+  "sourcesContent": ["\"use client\";\n\nimport type { DisplayMode } from \"schemas/generated/selectMode\";\n\nimport { useSyncExternalStore } from \"react\";\n\n/**\n * Framework-agnostic singleton for the preview iframe's select-mode display\n * mode (\"browse\" vs \"selection\"). It lives as a module singleton so that\n * components that don't share a provider ancestor \u2014 `EditorSelection` (which\n * owns the pointer/selection machinery) and `LinkInterceptor` (a sibling under\n * `ReploProvider`) \u2014 can agree on whether the user is currently selecting.\n *\n * `LinkInterceptor` needs this because in agent-preview mode it turns\n * same-origin link clicks into a `replo:navigate` postMessage (SPA-style\n * navigation of the preview). While select mode is active that navigation must\n * stand down so a link click selects the element instead of leaving the page \u2014\n * the two capture-phase click listeners otherwise race, and `stopPropagation`\n * can't suppress a sibling listener on the same node.\n *\n * @author Noah Gilmore 2026-07-23\n */\n\nconst listeners = new Set<() => void>();\nlet displayMode: DisplayMode = \"browse\";\n\n// select-mode DOM behavior is client-only, so the server snapshot is a stable\n// constant and never causes a hydration mismatch.\nconst SERVER_SNAPSHOT: DisplayMode = \"browse\";\n\nfunction notify() {\n  for (const listener of listeners) {\n    listener();\n  }\n}\n\nexport const displayModeStore = {\n  getSnapshot(): DisplayMode {\n    return displayMode;\n  },\n  getServerSnapshot(): DisplayMode {\n    return SERVER_SNAPSHOT;\n  },\n  subscribe(listener: () => void): () => void {\n    listeners.add(listener);\n    return () => {\n      listeners.delete(listener);\n    };\n  },\n  setDisplayMode(nextDisplayMode: DisplayMode) {\n    if (nextDisplayMode === displayMode) {\n      return;\n    }\n    displayMode = nextDisplayMode;\n    notify();\n  },\n  /** Test-only: reset back to the default so specs don't leak state. */\n  reset() {\n    displayMode = \"browse\";\n  },\n};\n\nexport function useDisplayMode(): DisplayMode {\n  return useSyncExternalStore(\n    displayModeStore.subscribe,\n    displayModeStore.getSnapshot,\n    displayModeStore.getServerSnapshot,\n  );\n}\n"],
+  "mappings": ";AAIA,SAAS,4BAA4B;AAmBrC,MAAM,YAAY,oBAAI,IAAgB;AACtC,IAAI,cAA2B;AAI/B,MAAM,kBAA+B;AAErC,SAAS,SAAS;AAChB,aAAW,YAAY,WAAW;AAChC,aAAS;AAAA,EACX;AACF;AAEO,MAAM,mBAAmB;AAAA,EAC9B,cAA2B;AACzB,WAAO;AAAA,EACT;AAAA,EACA,oBAAiC;AAC/B,WAAO;AAAA,EACT;AAAA,EACA,UAAU,UAAkC;AAC1C,cAAU,IAAI,QAAQ;AACtB,WAAO,MAAM;AACX,gBAAU,OAAO,QAAQ;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,eAAe,iBAA8B;AAC3C,QAAI,oBAAoB,aAAa;AACnC;AAAA,IACF;AACA,kBAAc;AACd,WAAO;AAAA,EACT;AAAA;AAAA,EAEA,QAAQ;AACN,kBAAc;AAAA,EAChB;AACF;AAEO,SAAS,iBAA8B;AAC5C,SAAO;AAAA,IACL,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,EACnB;AACF;",
+  "names": []
+}

package/select-mode/fast-refresh-relay.d.ts

@@ -0,0 +1,3 @@
+export declare function installFastRefreshRelay({ onComplete, }?: {
+    onComplete?: () => void;
+}): void;