@replohq/sandbox-runtime 0.1.0

package/select-mode/interactions/selectionGeometry.js

@@ -0,0 +1,192 @@
+import { isIntersecting, isRectEnclosing } from "../../_vendor/replo-utils/lib/geometry.mjs";
+import { v4 as uuidv4 } from "uuid";
+import { isInlineTextMarkElement } from "../inlineTextMarks";
+const SELECTION_TOLERANCE_PX = 4;
+function normalizeSelectionRect({
+  startX,
+  startY,
+  endX,
+  endY
+}) {
+  const left = Math.min(startX, endX);
+  const right = Math.max(startX, endX);
+  const top = Math.min(startY, endY);
+  const bottom = Math.max(startY, endY);
+  return {
+    x: left,
+    y: top,
+    width: right - left,
+    height: bottom - top,
+    top,
+    right,
+    bottom,
+    left
+  };
+}
+function getDragPositionFromClient({
+  clientX,
+  clientY,
+  scrollOffset
+}) {
+  return {
+    clientX,
+    clientY,
+    pageX: clientX + scrollOffset.left,
+    pageY: clientY + scrollOffset.top
+  };
+}
+function getDocumentScrollOffset() {
+  const scrollingElement = document.scrollingElement;
+  return {
+    left: scrollingElement?.scrollLeft ?? window.scrollX,
+    top: scrollingElement?.scrollTop ?? window.scrollY
+  };
+}
+function getViewportSelectionRect({
+  dragStart,
+  dragCurrent,
+  scrollOffset
+}) {
+  return normalizeSelectionRect({
+    startX: dragStart.pageX - scrollOffset.left,
+    startY: dragStart.pageY - scrollOffset.top,
+    endX: dragCurrent.pageX - scrollOffset.left,
+    endY: dragCurrent.pageY - scrollOffset.top
+  });
+}
+function getPageRectFromViewportRect({
+  rect,
+  scrollOffset
+}) {
+  return {
+    x: rect.x + scrollOffset.left,
+    y: rect.y + scrollOffset.top,
+    width: rect.width,
+    height: rect.height,
+    left: rect.left + scrollOffset.left,
+    top: rect.top + scrollOffset.top,
+    right: rect.right + scrollOffset.left,
+    bottom: rect.bottom + scrollOffset.top
+  };
+}
+function getViewportRectFromPageRect({
+  rect,
+  scrollOffset
+}) {
+  return {
+    x: rect.x - scrollOffset.left,
+    y: rect.y - scrollOffset.top,
+    width: rect.width,
+    height: rect.height,
+    left: rect.left - scrollOffset.left,
+    top: rect.top - scrollOffset.top,
+    right: rect.right - scrollOffset.left,
+    bottom: rect.bottom - scrollOffset.top
+  };
+}
+function isMeaningfulElement(element, elementRect) {
+  const tagName = element.tagName.toLowerCase();
+  if (["html", "body", "script", "style", "meta", "link"].includes(tagName)) {
+    return false;
+  }
+  if (isInlineTextMarkElement(element)) {
+    return false;
+  }
+  if (elementRect.width < 4 || elementRect.height < 4) {
+    return false;
+  }
+  return true;
+}
+function doesRectIntersectSelection({
+  elementRect,
+  selectionRect,
+  tolerancePx
+}) {
+  return isIntersecting(elementRect, selectionRect, { tolerance: tolerancePx }) && !isRectEnclosing(elementRect, selectionRect);
+}
+function collectDragCandidates(scrollOffset) {
+  const candidates = [];
+  for (const element of Array.from(document.querySelectorAll("*"))) {
+    const viewportRect = getElementBoundingRect(element);
+    if (!isMeaningfulElement(element, viewportRect)) {
+      continue;
+    }
+    candidates.push({
+      id: uuidv4(),
+      element,
+      pageRect: getPageRectFromViewportRect({
+        rect: viewportRect,
+        scrollOffset
+      })
+    });
+  }
+  return candidates;
+}
+function collapseFullyCoveredChildren({
+  candidates,
+  selected
+}) {
+  const candidateElements = new Set(
+    candidates.map((candidate) => candidate.element)
+  );
+  const selectedElements = new Set(
+    selected.map((candidate) => candidate.element)
+  );
+  return selected.filter((candidate) => {
+    const parent = candidate.element.parentElement;
+    if (!parent || !selectedElements.has(parent)) {
+      return true;
+    }
+    const everyCandidateChildSelected = Array.from(parent.children).filter((child) => candidateElements.has(child)).every((child) => selectedElements.has(child));
+    return !everyCandidateChildSelected;
+  });
+}
+function getCandidatesInSelection({
+  candidates,
+  selectionPageRect
+}) {
+  const intersecting = candidates.filter((candidate) => {
+    return doesRectIntersectSelection({
+      elementRect: candidate.pageRect,
+      selectionRect: selectionPageRect,
+      tolerancePx: SELECTION_TOLERANCE_PX
+    });
+  });
+  return collapseFullyCoveredChildren({ candidates, selected: intersecting });
+}
+function getElementAnchor({
+  element,
+  selectionRect
+}) {
+  const rect = element.getBoundingClientRect();
+  return {
+    x: Math.min(Math.max(selectionRect.left, rect.left), rect.right),
+    y: Math.min(Math.max(selectionRect.top, rect.top), rect.bottom)
+  };
+}
+function getElementBoundingRect(element) {
+  const rect = element.getBoundingClientRect();
+  return {
+    x: rect.x,
+    y: rect.y,
+    width: rect.width,
+    height: rect.height,
+    top: rect.top,
+    right: rect.right,
+    bottom: rect.bottom,
+    left: rect.left
+  };
+}
+export {
+  collectDragCandidates,
+  doesRectIntersectSelection,
+  getCandidatesInSelection,
+  getDocumentScrollOffset,
+  getDragPositionFromClient,
+  getElementAnchor,
+  getElementBoundingRect,
+  getPageRectFromViewportRect,
+  getViewportRectFromPageRect,
+  getViewportSelectionRect
+};
+//# sourceMappingURL=selectionGeometry.js.map

package/select-mode/interactions/selectionGeometry.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../select-mode/interactions/selectionGeometry.ts"],
+  "sourcesContent": ["import type {\n  SelectModeBoundingRect,\n  SelectModeClickPosition,\n} from \"schemas/generated/selectMode\";\n\nimport { isIntersecting, isRectEnclosing } from \"replo-utils/lib/geometry\";\nimport { v4 as uuidv4 } from \"uuid\";\n\nimport { isInlineTextMarkElement } from \"../inlineTextMarks\";\n\nexport type DragPosition = {\n  clientX: number;\n  clientY: number;\n  pageX: number;\n  pageY: number;\n};\n\nexport type ScrollOffset = {\n  left: number;\n  top: number;\n};\n\nexport type SelectedAreaState = {\n  pageRect: SelectModeBoundingRect;\n};\n\n// NOTE (Noah, 2026-04-21): A small fudge factor so elements\n// that visually appear to touch the selection rect (but whose bounding\n// box is a pixel or two off due to borders/sub-pixel rendering) still get\n// included.\nconst SELECTION_TOLERANCE_PX = 4;\n\nfunction normalizeSelectionRect({\n  startX,\n  startY,\n  endX,\n  endY,\n}: {\n  startX: number;\n  startY: number;\n  endX: number;\n  endY: number;\n}): SelectModeBoundingRect {\n  const left = Math.min(startX, endX);\n  const right = Math.max(startX, endX);\n  const top = Math.min(startY, endY);\n  const bottom = Math.max(startY, endY);\n\n  return {\n    x: left,\n    y: top,\n    width: right - left,\n    height: bottom - top,\n    top,\n    right,\n    bottom,\n    left,\n  };\n}\n\n/**\n * @author Kevin O'Connell 2026-04-17\n */\nexport function getDragPositionFromClient({\n  clientX,\n  clientY,\n  scrollOffset,\n}: {\n  clientX: number;\n  clientY: number;\n  scrollOffset: ScrollOffset;\n}): DragPosition {\n  return {\n    clientX,\n    clientY,\n    pageX: clientX + scrollOffset.left,\n    pageY: clientY + scrollOffset.top,\n  };\n}\n\n/**\n * @author Kevin O'Connell 2026-04-17\n */\nexport function getDocumentScrollOffset(): ScrollOffset {\n  const scrollingElement = document.scrollingElement;\n  return {\n    left: scrollingElement?.scrollLeft ?? window.scrollX,\n    top: scrollingElement?.scrollTop ?? window.scrollY,\n  };\n}\n\n/**\n * @author Kevin O'Connell 2026-04-17\n */\nexport function getViewportSelectionRect({\n  dragStart,\n  dragCurrent,\n  scrollOffset,\n}: {\n  dragStart: DragPosition;\n  dragCurrent: DragPosition;\n  scrollOffset: ScrollOffset;\n}): SelectModeBoundingRect {\n  return normalizeSelectionRect({\n    startX: dragStart.pageX - scrollOffset.left,\n    startY: dragStart.pageY - scrollOffset.top,\n    endX: dragCurrent.pageX - scrollOffset.left,\n    endY: dragCurrent.pageY - scrollOffset.top,\n  });\n}\n\n/**\n * @author Kevin O'Connell 2026-04-17\n */\nexport function getPageRectFromViewportRect({\n  rect,\n  scrollOffset,\n}: {\n  rect: SelectModeBoundingRect;\n  scrollOffset: ScrollOffset;\n}): SelectModeBoundingRect {\n  return {\n    x: rect.x + scrollOffset.left,\n    y: rect.y + scrollOffset.top,\n    width: rect.width,\n    height: rect.height,\n    left: rect.left + scrollOffset.left,\n    top: rect.top + scrollOffset.top,\n    right: rect.right + scrollOffset.left,\n    bottom: rect.bottom + scrollOffset.top,\n  };\n}\n\n/**\n * @author Kevin O'Connell 2026-04-17\n */\nexport function getViewportRectFromPageRect({\n  rect,\n  scrollOffset,\n}: {\n  rect: SelectModeBoundingRect;\n  scrollOffset: ScrollOffset;\n}): SelectModeBoundingRect {\n  return {\n    x: rect.x - scrollOffset.left,\n    y: rect.y - scrollOffset.top,\n    width: rect.width,\n    height: rect.height,\n    left: rect.left - scrollOffset.left,\n    top: rect.top - scrollOffset.top,\n    right: rect.right - scrollOffset.left,\n    bottom: rect.bottom - scrollOffset.top,\n  };\n}\n\nfunction isMeaningfulElement(\n  element: Element,\n  elementRect: SelectModeBoundingRect,\n): boolean {\n  const tagName = element.tagName.toLowerCase();\n  if ([\"html\", \"body\", \"script\", \"style\", \"meta\", \"link\"].includes(tagName)) {\n    return false;\n  }\n\n  if (isInlineTextMarkElement(element)) {\n    return false;\n  }\n\n  if (elementRect.width < 4 || elementRect.height < 4) {\n    return false;\n  }\n\n  return true;\n}\n\n/**\n * A drag captures an element when their boxes overlap (within\n * `tolerancePx`) \u2014 but NOT when the drag sits entirely inside the\n * element. The latter case is the user dragging *within* a large\n * container (a section, `<main>`, `<body>`) to lasso its children; the\n * container itself isn't a thing they're trying to select, so we drop it.\n */\nexport function doesRectIntersectSelection({\n  elementRect,\n  selectionRect,\n  tolerancePx,\n}: {\n  elementRect: SelectModeBoundingRect;\n  selectionRect: SelectModeBoundingRect;\n  tolerancePx: number;\n}) {\n  return (\n    isIntersecting(elementRect, selectionRect, { tolerance: tolerancePx }) &&\n    !isRectEnclosing(elementRect, selectionRect)\n  );\n}\n\n// A meaningful element plus its page-coordinate rect and a stable id,\n// snapshotted once when a drag begins. Page coordinates are scroll-\n// invariant, so per-move hit-testing never needs to re-measure.\nexport type DragCandidate = {\n  id: string;\n  element: Element;\n  pageRect: SelectModeBoundingRect;\n};\n\n/**\n * Snapshots every meaningful element and its page rect when a drag begins.\n * Each candidate gets a stable id so the parent overlay can key its\n * live highlights without remounting them as the drag moves.\n */\nexport function collectDragCandidates(\n  scrollOffset: ScrollOffset,\n): DragCandidate[] {\n  const candidates: DragCandidate[] = [];\n  for (const element of Array.from(document.querySelectorAll(\"*\"))) {\n    const viewportRect = getElementBoundingRect(element);\n    if (!isMeaningfulElement(element, viewportRect)) {\n      continue;\n    }\n    candidates.push({\n      id: uuidv4(),\n      element,\n      pageRect: getPageRectFromViewportRect({\n        rect: viewportRect,\n        scrollOffset,\n      }),\n    });\n  }\n  return candidates;\n}\n\n/**\n * Drop a child whose parent is also selected and every one of that\n * parent's *candidate* children is selected: the parent already represents\n * the whole group, so the children are redundant. Returns only the\n * candidates that survive the collapse.\n *\n * Only children that are themselves drag candidates count toward \"fully\n * covered\". A parent's DOM children can include decorative / non-selectable\n * elements (and `.children` excludes text nodes); those can never be\n * selected, so counting them would wedge the check permanently false and\n * the collapse would never fire.\n *\n * Membership is read once up front, so the collapse cascades up the tree\n * in a single pass \u2014 a parent kept this round is itself dropped when *its*\n * parent is likewise fully covered, leaving only the topmost ancestor of\n * any fully-enclosed subtree.\n */\nfunction collapseFullyCoveredChildren({\n  candidates,\n  selected,\n}: {\n  candidates: DragCandidate[];\n  selected: DragCandidate[];\n}): DragCandidate[] {\n  const candidateElements = new Set(\n    candidates.map((candidate) => candidate.element),\n  );\n  const selectedElements = new Set(\n    selected.map((candidate) => candidate.element),\n  );\n  return selected.filter((candidate) => {\n    const parent = candidate.element.parentElement;\n    if (!parent || !selectedElements.has(parent)) {\n      return true;\n    }\n    const everyCandidateChildSelected = Array.from(parent.children)\n      .filter((child) => candidateElements.has(child))\n      .every((child) => selectedElements.has(child));\n    return !everyCandidateChildSelected;\n  });\n}\n\n/**\n * Cheap per-move hit-test against the pre-collected candidates: keep the\n * ones whose page rect overlaps the selection (excluding any that wholly\n * enclose it), then collapse any fully-covered parent/children group down\n * to just the parent (see `collapseFullyCoveredChildren`). Does no DOM\n * queries or re-measures of geometry \u2014 the only DOM reads are cheap\n * parent/child structural lookups.\n *\n * Because the collapse depends on which siblings are currently captured,\n * elements legitimately move in and out of the result as the drag grows or\n * shrinks: a child drops out the moment the drag swallows its last sibling\n * (the parent takes over), and reappears if the drag retreats.\n */\nexport function getCandidatesInSelection({\n  candidates,\n  selectionPageRect,\n}: {\n  candidates: DragCandidate[];\n  selectionPageRect: SelectModeBoundingRect;\n}): DragCandidate[] {\n  const intersecting = candidates.filter((candidate) => {\n    return doesRectIntersectSelection({\n      elementRect: candidate.pageRect,\n      selectionRect: selectionPageRect,\n      tolerancePx: SELECTION_TOLERANCE_PX,\n    });\n  });\n\n  return collapseFullyCoveredChildren({ candidates, selected: intersecting });\n}\n\n/**\n * Picks a \"click position\" for an element that fell inside an area\n * selection. We use the corner of the element nearest the top-left of the\n * selection rect, clamped to the element's own bounds. This anchor is what\n * lets the selected-element overlay continue to track the element when the\n * user scrolls (`useSelectionScrollSync` re-projects relative to it).\n *\n * @author Kevin O'Connell 2026-04-17\n */\nexport function getElementAnchor({\n  element,\n  selectionRect,\n}: {\n  element: Element;\n  selectionRect: SelectModeBoundingRect;\n}): SelectModeClickPosition {\n  const rect = element.getBoundingClientRect();\n\n  return {\n    x: Math.min(Math.max(selectionRect.left, rect.left), rect.right),\n    y: Math.min(Math.max(selectionRect.top, rect.top), rect.bottom),\n  };\n}\n\n/**\n * @author Kevin O'Connell 2026-04-17\n */\nexport function getElementBoundingRect(\n  element: Element,\n): SelectModeBoundingRect {\n  const rect = element.getBoundingClientRect();\n\n  return {\n    x: rect.x,\n    y: rect.y,\n    width: rect.width,\n    height: rect.height,\n    top: rect.top,\n    right: rect.right,\n    bottom: rect.bottom,\n    left: rect.left,\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/select-mode/selectModeSession.d.ts

@@ -0,0 +1,21 @@
+import type { SelectableData, SelectModeBoundingRect, SelectModeClickPosition, SelectModeSelectionType } from "../_vendor/schemas/generated/selectMode";
+import type { DragPosition, ScrollOffset } from "./interactions/selectionGeometry";
+export type SelectModeInteractionSession = {
+    type: Extract<SelectModeSelectionType, "none">;
+} | {
+    type: Extract<SelectModeSelectionType, "drag">;
+    dragStart: DragPosition;
+    dragCurrent: DragPosition;
+    scrollOffset: ScrollOffset;
+    hasExceededThreshold: boolean;
+} | {
+    type: Extract<SelectModeSelectionType, "element">;
+    element: Element;
+    clickPosition: SelectModeClickPosition | null;
+    data: SelectableData;
+} | {
+    type: Extract<SelectModeSelectionType, "area">;
+    pageRect: SelectModeBoundingRect;
+    items: SelectableData[];
+};
+export declare const IDLE_SESSION: SelectModeInteractionSession;

package/select-mode/selectModeSession.js

@@ -0,0 +1,7 @@
+const IDLE_SESSION = {
+  type: "none"
+};
+export {
+  IDLE_SESSION
+};
+//# sourceMappingURL=selectModeSession.js.map

package/select-mode/selectModeSession.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../select-mode/selectModeSession.ts"],
+  "sourcesContent": ["import type {\n  SelectableData,\n  SelectModeBoundingRect,\n  SelectModeClickPosition,\n  SelectModeSelectionType,\n} from \"schemas/generated/selectMode\";\nimport type {\n  DragPosition,\n  ScrollOffset,\n} from \"./interactions/selectionGeometry\";\n\n// NOTE (Kevin O'Connell, 2026-04-22, REPL-26014): SDK-internal liveness\n// state for the active drag/select interaction. Looks like a near-\n// duplicate of agent-ui's `SelectModeSelection` (now in\n// `schemas/selectMode.ts`), but deliberately not lifted into\n// `packages/schemas` for two reasons:\n//\n//   1. The `element` variant carries `element: Element` \u2014 a live DOM\n//      ref. Zod has no way to model that; `z.custom<Element>()` would\n//      regress to `any` in the generated `.ts` (see the `ZodCustom`\n//      branch in `packages/schemas/zod/generateTypeDefinition.ts`),\n//      which would lose the strong typing the rest of the SDK relies\n//      on when it reads `session.element.getBoundingClientRect()`,\n//      etc.\n//   2. There is no second consumer. This type is used only inside\n//      `packages/sandbox-runtime/select-mode/`; the parent side\n//      (agent-ui) consumes the serialized `SelectModeSelection`\n//      instead. Lifting it would move a single-package-internal type\n//      into a shared package without any cross-package reader.\n//\n// What we *do* share with the schema is the discriminator vocabulary:\n// the literals come from `SelectModeSelectionType` (generated from\n// `selectModeSelectionTypeSchema` in `schemas/selectMode.ts`), so\n// adding or renaming a selection variant is a TS error here, in\n// `SelectModeSelection`, and in `SelectModeEditSelectionMetadata`.\nexport type SelectModeInteractionSession =\n  | { type: Extract<SelectModeSelectionType, \"none\"> }\n  | {\n      type: Extract<SelectModeSelectionType, \"drag\">;\n      dragStart: DragPosition;\n      dragCurrent: DragPosition;\n      scrollOffset: ScrollOffset;\n      hasExceededThreshold: boolean;\n    }\n  | {\n      type: Extract<SelectModeSelectionType, \"element\">;\n      element: Element;\n      clickPosition: SelectModeClickPosition | null;\n      data: SelectableData;\n    }\n  | {\n      type: Extract<SelectModeSelectionType, \"area\">;\n      pageRect: SelectModeBoundingRect;\n      items: SelectableData[];\n    };\n\nexport const IDLE_SESSION: SelectModeInteractionSession = {\n  type: \"none\",\n};\n"],
+  "mappings": "AAwDO,MAAM,eAA6C;AAAA,EACxD,MAAM;AACR;",
+  "names": []
+}

package/select-mode/selectionFrame.d.ts

@@ -0,0 +1,81 @@
+/**
+ * In-iframe selection frame renderer.
+ *
+ * Lives in the canopy iframe (not in agent-ui) because the previous
+ * parent-side overlay had to be re-anchored on every scroll frame via
+ * postMessage hop -> Zustand update -> React reconciliation, which
+ * shows up as visible lag when the user scrolls quickly.
+ *
+ * By rendering directly inside the canopy iframe's document we get two
+ * properties for free:
+ *
+ *  1. `position: absolute` + page coordinates means the document's own
+ *     scroll naturally translates the frames — zero JavaScript per
+ *     scroll frame, the browser composites them with the underlying page
+ *     content.
+ *  2. No bridge serialization: the only cost when selection commits is
+ *     a handful of style writes on the frame nodes.
+ *
+ * A single click resolves to one frame; an area drag resolves to one
+ * frame per captured element, so the renderer keeps a pool of nodes
+ * under a shared container and reconciles it on each call (reusing
+ * existing nodes when the count is stable, which keeps the single-frame
+ * scroll-sync hot path a couple of style writes rather than a DOM churn).
+ *
+ * The canopy iframe loads a customer page and doesn't include lattice /
+ * tailwind, so styling is intentionally vanilla inline CSS rather than
+ * Tailwind classes.
+ *
+ * @author Kevin O'Connell 2026-05-26
+ */
+type SelectionFrameVariant = "element" | "area";
+type SelectionFramePageRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+type SelectionFrameSpec = {
+    pageRect: SelectionFramePageRect;
+    variant: SelectionFrameVariant;
+};
+/**
+ * Toggle the brighter inline-edit border and re-color any frames already on
+ * screen so the change is immediate, not deferred to the next redraw.
+ */
+export declare function setSelectionFrameEditing(editing: boolean): void;
+/**
+ * Shared body-level layer container for in-iframe editor overlays (selection
+ * frames, annotation frames). Zero-size and pointer-transparent so it never
+ * affects the page; children opt into pointer events individually.
+ */
+export declare function getOrCreateFramesLayerContainer({ id, zIndex, }: {
+    id: string;
+    zIndex: number;
+}): HTMLDivElement | null;
+/**
+ * Position selection frames at the given *page* coordinates, one node per
+ * spec. Page coords don't shift during scroll, so the caller is free to
+ * call this once at commit time and let the browser handle the rest of the
+ * scroll lifetime. Reconciles the node pool against `frames.length` so a
+ * repeated single-frame call (scroll sync) just repositions one node.
+ *
+ * @author Kevin O'Connell 2026-05-26
+ */
+export declare function showSelectionFrames({ frames, }: {
+    frames: SelectionFrameSpec[];
+}): void;
+/**
+ * Convenience wrapper for the single-frame (element click) case.
+ *
+ * @author Kevin O'Connell 2026-05-26
+ */
+export declare function showSelectionFrame({ pageRect, variant, }: {
+    pageRect: SelectionFramePageRect;
+    variant: SelectionFrameVariant;
+}): void;
+/**
+ * @author Kevin O'Connell 2026-05-26
+ */
+export declare function hideSelectionFrame(): void;
+export {};

package/select-mode/selectionFrame.js

@@ -0,0 +1,132 @@
+const FUCHSIA_HEX = "#c026d3";
+const EDITING_FUCHSIA_HEX = "#e879f9";
+const FRAMES_CONTAINER_ID = "replo-select-mode-selection-frames";
+let isEditing = false;
+function getFrameBorderHex() {
+  return isEditing ? EDITING_FUCHSIA_HEX : FUCHSIA_HEX;
+}
+function applyVariantStyle({
+  frame,
+  variant
+}) {
+  frame.style.border = `2px solid ${getFrameBorderHex()}`;
+  frame.style.background = variant === "area" ? "rgba(192, 38, 211, 0.08)" : "transparent";
+}
+function setSelectionFrameEditing(editing) {
+  if (isEditing === editing) {
+    return;
+  }
+  isEditing = editing;
+  if (typeof document === "undefined") {
+    return;
+  }
+  const container = document.getElementById(FRAMES_CONTAINER_ID);
+  if (!(container instanceof HTMLDivElement)) {
+    return;
+  }
+  for (const child of container.children) {
+    if (child instanceof HTMLDivElement) {
+      child.style.borderColor = getFrameBorderHex();
+    }
+  }
+}
+function getOrCreateFramesLayerContainer({
+  id,
+  zIndex
+}) {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const existing = document.getElementById(id);
+  if (existing instanceof HTMLDivElement) {
+    return existing;
+  }
+  if (!document.body) {
+    return null;
+  }
+  const container = document.createElement("div");
+  container.id = id;
+  container.setAttribute("aria-hidden", "true");
+  container.style.cssText = [
+    "position: absolute",
+    "top: 0",
+    "left: 0",
+    "width: 0",
+    "height: 0",
+    "margin: 0",
+    "padding: 0",
+    "pointer-events: none",
+    `z-index: ${zIndex}`
+  ].join(";");
+  document.body.append(container);
+  return container;
+}
+function getOrCreateContainer() {
+  return getOrCreateFramesLayerContainer({
+    id: FRAMES_CONTAINER_ID,
+    zIndex: 2147483646
+  });
+}
+function createFrameNode() {
+  const frame = document.createElement("div");
+  frame.setAttribute("aria-hidden", "true");
+  frame.style.cssText = [
+    "position: absolute",
+    "top: 0",
+    "left: 0",
+    "box-sizing: border-box",
+    "border-radius: 2px",
+    "pointer-events: none",
+    "margin: 0",
+    "padding: 0"
+  ].join(";");
+  return frame;
+}
+function showSelectionFrames({
+  frames
+}) {
+  const container = getOrCreateContainer();
+  if (!container) {
+    return;
+  }
+  while (container.childElementCount > frames.length) {
+    container.lastElementChild?.remove();
+  }
+  while (container.childElementCount < frames.length) {
+    container.append(createFrameNode());
+  }
+  frames.forEach((spec, index) => {
+    const frame = container.children[index];
+    if (!(frame instanceof HTMLDivElement)) {
+      return;
+    }
+    applyVariantStyle({ frame, variant: spec.variant });
+    frame.style.left = `${spec.pageRect.x}px`;
+    frame.style.top = `${spec.pageRect.y}px`;
+    frame.style.width = `${spec.pageRect.width}px`;
+    frame.style.height = `${spec.pageRect.height}px`;
+  });
+}
+function showSelectionFrame({
+  pageRect,
+  variant
+}) {
+  showSelectionFrames({ frames: [{ pageRect, variant }] });
+}
+function hideSelectionFrame() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const container = document.getElementById(FRAMES_CONTAINER_ID);
+  if (container instanceof HTMLDivElement) {
+    container.replaceChildren();
+  }
+}
+export {
+  getOrCreateFramesLayerContainer,
+  hideSelectionFrame,
+  setSelectionFrameEditing,
+  showSelectionFrame,
+  showSelectionFrames
+};
+//# sourceMappingURL=selectionFrame.js.map

package/select-mode/selectionFrame.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../select-mode/selectionFrame.ts"],
+  "sourcesContent": ["/**\n * In-iframe selection frame renderer.\n *\n * Lives in the canopy iframe (not in agent-ui) because the previous\n * parent-side overlay had to be re-anchored on every scroll frame via\n * postMessage hop -> Zustand update -> React reconciliation, which\n * shows up as visible lag when the user scrolls quickly.\n *\n * By rendering directly inside the canopy iframe's document we get two\n * properties for free:\n *\n *  1. `position: absolute` + page coordinates means the document's own\n *     scroll naturally translates the frames \u2014 zero JavaScript per\n *     scroll frame, the browser composites them with the underlying page\n *     content.\n *  2. No bridge serialization: the only cost when selection commits is\n *     a handful of style writes on the frame nodes.\n *\n * A single click resolves to one frame; an area drag resolves to one\n * frame per captured element, so the renderer keeps a pool of nodes\n * under a shared container and reconciles it on each call (reusing\n * existing nodes when the count is stable, which keeps the single-frame\n * scroll-sync hot path a couple of style writes rather than a DOM churn).\n *\n * The canopy iframe loads a customer page and doesn't include lattice /\n * tailwind, so styling is intentionally vanilla inline CSS rather than\n * Tailwind classes.\n *\n * @author Kevin O'Connell 2026-05-26\n */\n\n// Matches `--color-fuchsia` (Tailwind v4 `fuchsia-600`) used by agent-ui\n// so the in-iframe frame is visually consistent with the rest of the\n// select-mode UI.\nconst FUCHSIA_HEX = \"#c026d3\";\n\n// Brighter fuchsia (`fuchsia-400`) used while a text block is being inline\n// edited, so the active edit target stands out from a plain selection.\nconst EDITING_FUCHSIA_HEX = \"#e879f9\";\n\nconst FRAMES_CONTAINER_ID = \"replo-select-mode-selection-frames\";\n\n// Whether an inline text edit is in progress. Module-level so every frame\n// redraw (including the scroll-sync hot path) picks up the brighter color\n// without threading the flag through each call.\nlet isEditing = false;\n\nfunction getFrameBorderHex(): string {\n  return isEditing ? EDITING_FUCHSIA_HEX : FUCHSIA_HEX;\n}\n\ntype SelectionFrameVariant = \"element\" | \"area\";\n\ntype SelectionFramePageRect = {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n};\n\ntype SelectionFrameSpec = {\n  pageRect: SelectionFramePageRect;\n  variant: SelectionFrameVariant;\n};\n\nfunction applyVariantStyle({\n  frame,\n  variant,\n}: {\n  frame: HTMLDivElement;\n  variant: SelectionFrameVariant;\n}) {\n  // Both variants use the same bright fuchsia border so a single click and\n  // each member of an area selection read as equally \"selected\"; the area\n  // members carry a faint fill so a cluster still reads as a group. While\n  // inline editing, the border brightens to mark the active edit target.\n  frame.style.border = `2px solid ${getFrameBorderHex()}`;\n  frame.style.background =\n    variant === \"area\" ? \"rgba(192, 38, 211, 0.08)\" : \"transparent\";\n}\n\n/**\n * Toggle the brighter inline-edit border and re-color any frames already on\n * screen so the change is immediate, not deferred to the next redraw.\n */\nexport function setSelectionFrameEditing(editing: boolean) {\n  if (isEditing === editing) {\n    return;\n  }\n  isEditing = editing;\n  if (typeof document === \"undefined\") {\n    return;\n  }\n  const container = document.getElementById(FRAMES_CONTAINER_ID);\n  if (!(container instanceof HTMLDivElement)) {\n    return;\n  }\n  for (const child of container.children) {\n    if (child instanceof HTMLDivElement) {\n      child.style.borderColor = getFrameBorderHex();\n    }\n  }\n}\n\n/**\n * Shared body-level layer container for in-iframe editor overlays (selection\n * frames, annotation frames). Zero-size and pointer-transparent so it never\n * affects the page; children opt into pointer events individually.\n */\nexport function getOrCreateFramesLayerContainer({\n  id,\n  zIndex,\n}: {\n  id: string;\n  zIndex: number;\n}): HTMLDivElement | null {\n  if (typeof document === \"undefined\") {\n    return null;\n  }\n  const existing = document.getElementById(id);\n  if (existing instanceof HTMLDivElement) {\n    return existing;\n  }\n  if (!document.body) {\n    return null;\n  }\n  const container = document.createElement(\"div\");\n  container.id = id;\n  container.setAttribute(\"aria-hidden\", \"true\");\n  container.style.cssText = [\n    \"position: absolute\",\n    \"top: 0\",\n    \"left: 0\",\n    \"width: 0\",\n    \"height: 0\",\n    \"margin: 0\",\n    \"padding: 0\",\n    \"pointer-events: none\",\n    `z-index: ${zIndex}`,\n  ].join(\";\");\n  document.body.append(container);\n  return container;\n}\n\nfunction getOrCreateContainer(): HTMLDivElement | null {\n  return getOrCreateFramesLayerContainer({\n    id: FRAMES_CONTAINER_ID,\n    zIndex: 2147483646,\n  });\n}\n\nfunction createFrameNode(): HTMLDivElement {\n  const frame = document.createElement(\"div\");\n  frame.setAttribute(\"aria-hidden\", \"true\");\n  frame.style.cssText = [\n    \"position: absolute\",\n    \"top: 0\",\n    \"left: 0\",\n    \"box-sizing: border-box\",\n    \"border-radius: 2px\",\n    \"pointer-events: none\",\n    \"margin: 0\",\n    \"padding: 0\",\n  ].join(\";\");\n  return frame;\n}\n\n/**\n * Position selection frames at the given *page* coordinates, one node per\n * spec. Page coords don't shift during scroll, so the caller is free to\n * call this once at commit time and let the browser handle the rest of the\n * scroll lifetime. Reconciles the node pool against `frames.length` so a\n * repeated single-frame call (scroll sync) just repositions one node.\n *\n * @author Kevin O'Connell 2026-05-26\n */\nexport function showSelectionFrames({\n  frames,\n}: {\n  frames: SelectionFrameSpec[];\n}) {\n  const container = getOrCreateContainer();\n  if (!container) {\n    return;\n  }\n\n  while (container.childElementCount > frames.length) {\n    container.lastElementChild?.remove();\n  }\n  while (container.childElementCount < frames.length) {\n    container.append(createFrameNode());\n  }\n\n  frames.forEach((spec, index) => {\n    const frame = container.children[index];\n    if (!(frame instanceof HTMLDivElement)) {\n      return;\n    }\n    applyVariantStyle({ frame, variant: spec.variant });\n    frame.style.left = `${spec.pageRect.x}px`;\n    frame.style.top = `${spec.pageRect.y}px`;\n    frame.style.width = `${spec.pageRect.width}px`;\n    frame.style.height = `${spec.pageRect.height}px`;\n  });\n}\n\n/**\n * Convenience wrapper for the single-frame (element click) case.\n *\n * @author Kevin O'Connell 2026-05-26\n */\nexport function showSelectionFrame({\n  pageRect,\n  variant,\n}: {\n  pageRect: SelectionFramePageRect;\n  variant: SelectionFrameVariant;\n}) {\n  showSelectionFrames({ frames: [{ pageRect, variant }] });\n}\n\n/**\n * @author Kevin O'Connell 2026-05-26\n */\nexport function hideSelectionFrame() {\n  if (typeof document === \"undefined\") {\n    return;\n  }\n  const container = document.getElementById(FRAMES_CONTAINER_ID);\n  if (container instanceof HTMLDivElement) {\n    container.replaceChildren();\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/select-mode/symbolicate.d.ts

@@ -0,0 +1,2 @@
+import type { SelectedElement } from "../_vendor/schemas/generated/selectMode";
+export declare function symbolicateSelectedElement(selectedElement: SelectedElement): Promise<SelectedElement>;