@replohq/sandbox-runtime 1.19.5 → 1.21.0

package/comments-overlay/overlay.js

@@ -0,0 +1,781 @@
+import { captureAnchor, getAnchorElement } from "./capture";
+import { isResolutionVisible, resolveAnchor } from "./resolve";
+import { OVERLAY_ROOT_ATTRIBUTE } from "./textQuote";
+const OVERLAY_Z_INDEX = 2147483645;
+const HIGHLIGHT_BACKGROUND = "rgba(250, 204, 21, 0.28)";
+const QUOTE_UNDERLINE = "2px solid rgba(250, 204, 21, 0.9)";
+const BADGE_SIZE_PX = 20;
+const BADGE_HIT_TARGET_PX = 44;
+const COMPACT_GUTTER_MAX_WIDTH_PX = 600;
+const RERESOLVE_DEBOUNCE_MS = 250;
+const SELECTION_PROMPT_DEBOUNCE_MS = 150;
+const TEXT_PICK_CLICK_SUPPRESS_MS = 750;
+const HOVER_OUTLINE_STYLE = "position:absolute;pointer-events:none;box-sizing:border-box;border:1px solid rgba(37,99,235,.45);background:rgba(37,99,235,.025);border-radius:3px";
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+const EDITABLE_SELECTOR = "input, textarea, select, [contenteditable]:not([contenteditable='false'])";
+function getReportedStatus(resolution) {
+  if (!resolution || resolution.status === "detached") {
+    return "detached";
+  }
+  return isResolutionVisible(resolution) ? resolution.status : "hidden";
+}
+function getResolutionRects(resolution) {
+  if (resolution.range) {
+    return Array.from(resolution.range.getClientRects());
+  }
+  return resolution.element ? [resolution.element.getBoundingClientRect()] : [];
+}
+function createCommentsOverlay(options) {
+  let mode = "browse";
+  let pins = [];
+  let resolutions = /* @__PURE__ */ new Map();
+  const boundElements = /* @__PURE__ */ new Map();
+  let focusedThreadId = null;
+  let hoveredBadgeThreadId = null;
+  let draftAnchor = null;
+  let draftResolution = null;
+  let draftElement = null;
+  let statusesKey = "";
+  let hoveredElement = null;
+  let hoverOutline = null;
+  let selectionPrompt = null;
+  let dismissedSelectionKey = null;
+  let promptButton = null;
+  let pointerIsDown = false;
+  let capturedTextSelection = false;
+  let suppressClickUntil = 0;
+  let paintFrame = null;
+  let resolveTimer = null;
+  let selectionTimer = null;
+  let originalCursor = null;
+  let isDestroyed = false;
+  const root = document.createElement("div");
+  root.setAttribute(OVERLAY_ROOT_ATTRIBUTE, "true");
+  root.style.cssText = `position:fixed;inset:0;z-index:${OVERLAY_Z_INDEX};pointer-events:none;overflow:hidden`;
+  document.documentElement.append(root);
+  const isInOverlay = (node) => {
+    return node instanceof Node && root.contains(node);
+  };
+  const getEventElement = (event) => {
+    const inner = event.composedPath().find((node) => {
+      return node instanceof Element;
+    });
+    return inner ?? event.target;
+  };
+  const isPageElement = (node) => {
+    return node instanceof Element && node !== document.body && node !== document.documentElement && !isInOverlay(node);
+  };
+  const isEditableSelection = (selection) => {
+    const node = selection.anchorNode;
+    const element = node instanceof Element ? node : node?.parentElement;
+    return Boolean(
+      element?.closest(EDITABLE_SELECTOR) || document.activeElement?.matches(EDITABLE_SELECTOR)
+    );
+  };
+  const getUsableSelectionRange = () => {
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+      return null;
+    }
+    if (isEditableSelection(selection)) {
+      return null;
+    }
+    const range = selection.getRangeAt(0);
+    if (!range.toString().trim() || isInOverlay(range.commonAncestorContainer)) {
+      return null;
+    }
+    return range;
+  };
+  const getSelectionKey = (range) => {
+    const before = range.cloneRange();
+    before.selectNodeContents(document.body);
+    before.setEnd(range.startContainer, range.startOffset);
+    return JSON.stringify([range.toString(), before.toString().length]);
+  };
+  const schedulePaint = () => {
+    if (paintFrame !== null || isDestroyed) {
+      return;
+    }
+    paintFrame = window.requestAnimationFrame(() => {
+      paintFrame = null;
+      paint();
+    });
+  };
+  const getElementAnchors = () => {
+    return pins.flatMap((pin) => {
+      return pin.anchor.type === "element" ? [{ pin, anchor: pin.anchor }] : [];
+    });
+  };
+  const resolveAll = () => {
+    resolveTimer = null;
+    observeShadowRoots(document);
+    const sourceCache = /* @__PURE__ */ new Map();
+    const getSource = options.getSource;
+    const cachedGetSource = getSource ? (element) => {
+      if (!sourceCache.has(element)) {
+        sourceCache.set(element, getSource(element));
+      }
+      return sourceCache.get(element) ?? null;
+    } : null;
+    const next = /* @__PURE__ */ new Map();
+    for (const { pin, anchor } of getElementAnchors()) {
+      const resolution = resolveAnchor(anchor, document, {
+        previous: boundElements.get(pin.threadId) ?? null,
+        getSource: cachedGetSource
+      });
+      next.set(pin.threadId, resolution);
+      if (resolution.element) {
+        boundElements.set(pin.threadId, resolution.element);
+      } else {
+        boundElements.delete(pin.threadId);
+      }
+    }
+    resolutions = next;
+    draftResolution = draftAnchor ? resolveAnchor(draftAnchor, document, {
+      previous: draftElement,
+      getSource: cachedGetSource
+    }) : null;
+    draftElement = draftResolution?.element ?? null;
+    const statuses = getElementAnchors().map(({ pin }) => {
+      return {
+        threadId: pin.threadId,
+        status: getReportedStatus(resolutions.get(pin.threadId))
+      };
+    });
+    const nextKey = JSON.stringify(statuses);
+    if (nextKey !== statusesKey) {
+      statusesKey = nextKey;
+      options.onAnchorStatuses({ statuses });
+    }
+    schedulePaint();
+  };
+  const scheduleResolve = () => {
+    if (resolveTimer !== null || isDestroyed) {
+      return;
+    }
+    resolveTimer = setTimeout(resolveAll, RERESOLVE_DEBOUNCE_MS);
+  };
+  const paintHighlight = (resolution, threadId) => {
+    const isQuote = Boolean(resolution.range);
+    for (const rect of getResolutionRects(resolution)) {
+      if (rect.width <= 0 || rect.height <= 0 || rect.bottom < 0 || rect.top > window.innerHeight) {
+        continue;
+      }
+      const highlight = document.createElement("div");
+      if (threadId) {
+        highlight.dataset.commentHighlight = threadId;
+      } else {
+        highlight.dataset.commentDraft = "true";
+      }
+      highlight.style.cssText = `position:absolute;pointer-events:none;background:${HIGHLIGHT_BACKGROUND};border-radius:2px;box-sizing:border-box`;
+      if (isQuote) {
+        highlight.style.borderBottom = QUOTE_UNDERLINE;
+      }
+      highlight.style.left = `${rect.left}px`;
+      highlight.style.top = `${rect.top}px`;
+      highlight.style.width = `${rect.width}px`;
+      highlight.style.height = `${rect.height}px`;
+      root.append(highlight);
+    }
+  };
+  const isHighlightShown = (threadId) => {
+    return mode === "comment" || threadId === focusedThreadId || threadId === hoveredBadgeThreadId;
+  };
+  const createIcon = (size, path) => {
+    const icon = document.createElementNS(SVG_NAMESPACE, "svg");
+    for (const [name, value] of Object.entries({
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      "aria-hidden": "true",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2"
+    })) {
+      icon.setAttribute(name, value);
+    }
+    const bubble2 = document.createElementNS(SVG_NAMESPACE, "path");
+    bubble2.setAttribute("d", path);
+    icon.append(bubble2);
+    return icon;
+  };
+  const paintHover = () => {
+    if (mode !== "comment" || !hoveredElement?.isConnected) {
+      hoverOutline?.remove();
+      return;
+    }
+    const rect = hoveredElement.getBoundingClientRect();
+    hoverOutline ??= document.createElement("div");
+    hoverOutline.style.cssText = HOVER_OUTLINE_STYLE;
+    hoverOutline.style.left = `${rect.left}px`;
+    hoverOutline.style.top = `${rect.top}px`;
+    hoverOutline.style.width = `${rect.width}px`;
+    hoverOutline.style.height = `${rect.height}px`;
+    root.append(hoverOutline);
+  };
+  const getPromptButton = () => {
+    if (promptButton) {
+      return promptButton;
+    }
+    const button = document.createElement("button");
+    button.type = "button";
+    button.dataset.commentSelectionPrompt = "true";
+    button.setAttribute("aria-label", "Comment on selection");
+    button.style.cssText = "position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;margin:0;padding:0 12px;border:0;border-radius:999px;background:#111827;color:#fff;font:500 13px/1 system-ui,-apple-system,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.28);cursor:pointer;outline-offset:2px";
+    const icon = createIcon(
+      "14",
+      "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+    );
+    const label = document.createElement("span");
+    label.textContent = "Comment";
+    button.append(icon, label);
+    button.addEventListener("pointerdown", (event) => event.preventDefault());
+    button.addEventListener("mousedown", (event) => event.preventDefault());
+    button.addEventListener("focus", () => {
+      button.style.outline = button.matches(":focus-visible") ? "2px solid #60a5fa" : "none";
+    });
+    button.addEventListener("blur", () => {
+      button.style.outline = "none";
+    });
+    button.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const range = getUsableSelectionRange();
+      if (!range) {
+        return;
+      }
+      dismissedSelectionKey = getSelectionKey(range);
+      selectionPrompt = null;
+      const rect = range.getBoundingClientRect();
+      pick(range.cloneRange(), { x: rect.right, y: rect.bottom }, (anchor) => {
+        options.onComposeFromSelection({ anchor });
+      });
+    });
+    promptButton = button;
+    return button;
+  };
+  const paintSelectionPrompt = () => {
+    const rects = selectionPrompt ? Array.from(selectionPrompt.range.getClientRects()).filter((rect) => {
+      return rect.width > 0 && rect.height > 0;
+    }) : [];
+    const first = rects[0];
+    const last = rects.at(-1);
+    if (!first || !last || last.bottom < 0 || first.top > window.innerHeight) {
+      promptButton?.remove();
+      return;
+    }
+    const isCoarse = window.matchMedia?.("(pointer: coarse)")?.matches ?? false;
+    const height = isCoarse ? 44 : 32;
+    const width = isCoarse ? 120 : 104;
+    const gap = 6;
+    const left = Math.max(
+      8,
+      Math.min(window.innerWidth - width - 8, last.right - width)
+    );
+    const below = last.bottom + gap;
+    const top = below + height <= window.innerHeight - 8 ? below : Math.max(8, first.top - gap - height);
+    const button = getPromptButton();
+    button.style.left = `${left}px`;
+    button.style.top = `${top}px`;
+    button.style.width = `${width}px`;
+    button.style.height = `${height}px`;
+    if (button.parentNode !== root) {
+      root.append(button);
+    }
+  };
+  const paintBadges = () => {
+    const isCompact = window.innerWidth <= COMPACT_GUTTER_MAX_WIDTH_PX;
+    const size = BADGE_HIT_TARGET_PX;
+    const maxLeft = Math.max(0, window.innerWidth - size);
+    const maxTop = Math.max(0, window.innerHeight - size);
+    const placed = [];
+    const place = (rect) => {
+      const baseLeft = isCompact ? maxLeft : Math.max(0, Math.min(maxLeft, rect.right - size / 2));
+      const baseTop = Math.max(0, Math.min(maxTop, rect.top - size / 2));
+      const columns = Math.ceil(maxLeft / size);
+      const rows = Math.ceil(maxTop / size);
+      for (let column = 0; column <= columns * 2; column++) {
+        const left = baseLeft + (column % 2 ? 1 : -1) * Math.ceil(column / 2) * size;
+        if (left < 0 || left > maxLeft) {
+          continue;
+        }
+        for (let row = 0; row <= rows * 2; row++) {
+          const top = baseTop + (row % 2 ? 1 : -1) * Math.ceil(row / 2) * size;
+          if (top < 0 || top > maxTop) {
+            continue;
+          }
+          const collides = placed.some((slot) => {
+            return Math.abs(slot.left - left) < size && Math.abs(slot.top - top) < size;
+          });
+          if (!collides) {
+            placed.push({ left, top });
+            return { left, top };
+          }
+        }
+      }
+      placed.push({ left: baseLeft, top: baseTop });
+      return { left: baseLeft, top: baseTop };
+    };
+    for (const pin of pins) {
+      const resolution = resolutions.get(pin.threadId);
+      const isFocused = pin.threadId === focusedThreadId;
+      if (!resolution || pin.status === "resolved" && !isFocused || !isResolutionVisible(resolution)) {
+        continue;
+      }
+      if (isHighlightShown(pin.threadId)) {
+        paintHighlight(resolution, pin.threadId);
+      }
+      const visibleRects = getResolutionRects(resolution).filter((rect) => {
+        return rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.top < window.innerHeight;
+      });
+      const first = visibleRects[0];
+      if (!first) {
+        continue;
+      }
+      const position = place(first);
+      const badge = document.createElement("button");
+      badge.type = "button";
+      badge.dataset.commentBadge = pin.threadId;
+      badge.setAttribute(
+        "aria-label",
+        pin.count === 1 ? "Open comment" : `Open ${pin.count} comments`
+      );
+      badge.style.cssText = `position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;width:${size}px;height:${size}px;padding:0;margin:0;border:0;background:transparent;cursor:pointer`;
+      if (isCompact) {
+        badge.style.justifyContent = "flex-end";
+      }
+      badge.style.left = `${position.left}px`;
+      badge.style.top = `${position.top}px`;
+      const isActive = isFocused || pin.threadId === hoveredBadgeThreadId;
+      const dot = document.createElement("span");
+      dot.style.cssText = `display:flex;align-items:center;justify-content:center;gap:3px;box-sizing:border-box;min-width:${BADGE_SIZE_PX}px;height:${BADGE_SIZE_PX}px;padding:0 ${pin.count === 1 ? 0 : 6}px;border-radius:${BADGE_SIZE_PX / 2}px;border:1px solid rgba(17,24,39,.14);background:#fff;color:#6b7280;box-shadow:0 1px 3px rgba(0,0,0,.18);font:600 11px/1 system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap`;
+      if (isCompact) {
+        dot.style.marginRight = "3px";
+      }
+      if (isActive) {
+        dot.style.borderColor = "#f59e0b";
+        dot.style.background = "#fef3c7";
+        dot.style.color = "#b45309";
+      }
+      if (resolution.status === "ambiguous") {
+        dot.style.borderStyle = "dashed";
+      }
+      const icon = createIcon("12", "M7.9 20A9 9 0 1 0 4 16.1L2 22Z");
+      icon.setAttribute("stroke-linecap", "round");
+      icon.setAttribute("stroke-linejoin", "round");
+      dot.append(icon);
+      if (pin.count > 1) {
+        dot.append(pin.count > 99 ? "99+" : String(pin.count));
+      }
+      badge.append(dot);
+      badge.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        options.onPinClicked({ threadId: pin.threadId });
+      });
+      root.append(badge);
+    }
+  };
+  function paint() {
+    for (const child of Array.from(root.children)) {
+      if (child !== promptButton || !selectionPrompt) {
+        child.remove();
+      }
+    }
+    if (draftResolution && isResolutionVisible(draftResolution)) {
+      paintHighlight(draftResolution, null);
+    }
+    paintBadges();
+    paintHover();
+    paintSelectionPrompt();
+  }
+  async function finishAnchor(anchor) {
+    if (!options.prepareAnchor) {
+      return anchor;
+    }
+    try {
+      return await options.prepareAnchor(anchor);
+    } catch {
+      return anchor;
+    }
+  }
+  const reportPicked = (anchor, rect) => {
+    const { left: x, top: y, width, height } = rect;
+    options.onAnchorPicked({ anchor, rect: { x, y, width, height } });
+  };
+  const pick = (target, point, report) => {
+    const element = getAnchorElement(target);
+    if (!element) {
+      return;
+    }
+    const anchor = captureAnchor(target, point);
+    const range = "tagName" in target ? void 0 : target;
+    const rect = (range ?? element).getBoundingClientRect();
+    draftAnchor = anchor;
+    draftElement = element;
+    draftResolution = {
+      status: "attached",
+      element,
+      ...range ? { range } : {}
+    };
+    hoveredElement = null;
+    void finishAnchor(anchor).then((prepared) => report(prepared, rect));
+    schedulePaint();
+  };
+  const clearDraft = () => {
+    draftAnchor = null;
+    draftResolution = null;
+    draftElement = null;
+  };
+  const refreshSelectionPrompt = () => {
+    selectionTimer = null;
+    const range = mode !== "comment" && !pointerIsDown ? getUsableSelectionRange() : null;
+    if (!range) {
+      dismissedSelectionKey = null;
+      if (selectionPrompt) {
+        selectionPrompt = null;
+        schedulePaint();
+      }
+      return;
+    }
+    const key = getSelectionKey(range);
+    if (key === dismissedSelectionKey) {
+      return;
+    }
+    selectionPrompt = { range: range.cloneRange(), key };
+    schedulePaint();
+  };
+  const scheduleSelectionPrompt = () => {
+    if (selectionTimer !== null) {
+      clearTimeout(selectionTimer);
+    }
+    selectionTimer = setTimeout(
+      refreshSelectionPrompt,
+      SELECTION_PROMPT_DEBOUNCE_MS
+    );
+  };
+  const captureTextPick = (event) => {
+    if (mode !== "comment") {
+      return false;
+    }
+    const range = getUsableSelectionRange();
+    if (!range) {
+      return false;
+    }
+    capturedTextSelection = true;
+    suppressClickUntil = Date.now() + TEXT_PICK_CLICK_SUPPRESS_MS;
+    pick(
+      range.cloneRange(),
+      { x: event.clientX, y: event.clientY },
+      reportPicked
+    );
+    return true;
+  };
+  const getBadgeThreadId = (target) => {
+    if (!(target instanceof Element) || !isInOverlay(target)) {
+      return null;
+    }
+    return target.closest("[data-comment-badge]")?.dataset.commentBadge ?? null;
+  };
+  const handlePointerMove = (event) => {
+    const target = getEventElement(event);
+    const nextBadgeThreadId = getBadgeThreadId(target);
+    if (nextBadgeThreadId !== hoveredBadgeThreadId) {
+      hoveredBadgeThreadId = nextBadgeThreadId;
+      schedulePaint();
+    }
+    if (mode !== "comment") {
+      return;
+    }
+    const nextHovered = isPageElement(target) ? getAnchorElement(target) : null;
+    if (nextHovered !== hoveredElement) {
+      hoveredElement = nextHovered;
+      schedulePaint();
+    }
+  };
+  const handlePointerLeave = (event) => {
+    if (event.target === document || event.target === document.documentElement) {
+      pointerIsDown = false;
+      scheduleSelectionPrompt();
+      if (hoveredBadgeThreadId) {
+        hoveredBadgeThreadId = null;
+        schedulePaint();
+      }
+    }
+    if (hoveredElement) {
+      hoveredElement = null;
+      schedulePaint();
+    }
+  };
+  const handlePress = (event) => {
+    const target = getEventElement(event);
+    const inOverlay = isInOverlay(target);
+    if (event.type === "pointerdown") {
+      capturedTextSelection = false;
+      suppressClickUntil = 0;
+      if (!inOverlay) {
+        pointerIsDown = true;
+        if (selectionPrompt) {
+          selectionPrompt = null;
+          schedulePaint();
+        }
+      }
+    }
+    if (event.type === "pointerup" && !inOverlay) {
+      pointerIsDown = false;
+      if (mode !== "comment") {
+        scheduleSelectionPrompt();
+      }
+    }
+    if (mode === "comment" && !inOverlay) {
+      event.stopImmediatePropagation();
+    }
+  };
+  const handleMouseUp = (event) => {
+    const target = getEventElement(event);
+    if (mode !== "comment" || isInOverlay(target)) {
+      return;
+    }
+    event.stopImmediatePropagation();
+    captureTextPick(event);
+  };
+  const getPinAt = (x, y) => {
+    let hit = null;
+    for (const pin of pins) {
+      const resolution = resolutions.get(pin.threadId);
+      if (!resolution || pin.status === "resolved" || !isHighlightShown(pin.threadId) || !isResolutionVisible(resolution)) {
+        continue;
+      }
+      for (const rect of getResolutionRects(resolution)) {
+        const area = rect.width * rect.height;
+        const isInside = x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+        if (isInside && (!hit || area < hit.area)) {
+          hit = { threadId: pin.threadId, area };
+        }
+      }
+    }
+    return hit?.threadId ?? null;
+  };
+  const handleClick = (event) => {
+    if (capturedTextSelection && Date.now() <= suppressClickUntil) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      capturedTextSelection = false;
+      return;
+    }
+    capturedTextSelection = false;
+    const target = getEventElement(event);
+    if (isInOverlay(target)) {
+      return;
+    }
+    const pinThreadId = mode === "browse" ? getPinAt(event.clientX, event.clientY) : null;
+    if (pinThreadId) {
+      options.onPinClicked({ threadId: pinThreadId });
+    }
+    if (mode !== "comment") {
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    if (window.getSelection()?.toString().trim()) {
+      return;
+    }
+    if (!isPageElement(target)) {
+      options.onModeShortcut({ mode: "browse" });
+      return;
+    }
+    pick(target, { x: event.clientX, y: event.clientY }, reportPicked);
+  };
+  const handleKeyDown = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (isCommentShortcut(event)) {
+      options.onModeShortcut({ mode: "comment" });
+      return;
+    }
+    if (event.key !== "Escape") {
+      return;
+    }
+    if (mode === "comment" || draftAnchor) {
+      if (mode === "comment") {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+      if (draftAnchor) {
+        clearDraft();
+        options.onPickCancelled();
+        schedulePaint();
+      } else {
+        options.onModeShortcut({ mode: "browse" });
+      }
+      return;
+    }
+    if (selectionPrompt) {
+      dismissedSelectionKey = selectionPrompt.key;
+      selectionPrompt = null;
+      schedulePaint();
+    }
+  };
+  const isCommentShortcut = (event) => {
+    if (mode === "comment" || event.repeat || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.key.toLowerCase() !== "c") {
+      return false;
+    }
+    const target = event.target;
+    return !(target instanceof Element && target.closest(EDITABLE_SELECTOR));
+  };
+  const handlePointerCancel = () => {
+    pointerIsDown = false;
+    scheduleSelectionPrompt();
+  };
+  const handleBlur = () => {
+    pointerIsDown = false;
+  };
+  const handleViewportChange = () => {
+    schedulePaint();
+    scheduleResolve();
+  };
+  const observer = new MutationObserver((mutations) => {
+    const onlyOverlay = mutations.every((mutation) => {
+      return isInOverlay(mutation.target) || mutation.type === "childList" && mutation.removedNodes.length === 0 && Array.from(mutation.addedNodes).every(
+        (node) => node === root || isInOverlay(node)
+      );
+    });
+    if (!onlyOverlay) {
+      scheduleResolve();
+    }
+  });
+  const observeOptions = {
+    childList: true,
+    subtree: true,
+    characterData: true,
+    attributes: true
+  };
+  observer.observe(document.documentElement, observeOptions);
+  const observedShadowRoots = /* @__PURE__ */ new WeakSet();
+  function observeShadowRoots(container) {
+    for (const element of Array.from(container.querySelectorAll("*"))) {
+      const shadowRoot = element.shadowRoot;
+      if (!shadowRoot) {
+        continue;
+      }
+      if (!observedShadowRoots.has(shadowRoot)) {
+        observedShadowRoots.add(shadowRoot);
+        observer.observe(shadowRoot, observeOptions);
+      }
+      observeShadowRoots(shadowRoot);
+    }
+  }
+  observeShadowRoots(document);
+  const listeners = new AbortController();
+  const capture = { capture: true, signal: listeners.signal };
+  const bubble = { signal: listeners.signal };
+  for (const type of ["pointerdown", "pointerup", "mousedown"]) {
+    document.addEventListener(type, handlePress, capture);
+  }
+  document.addEventListener("pointermove", handlePointerMove, capture);
+  document.addEventListener("pointerleave", handlePointerLeave, capture);
+  document.addEventListener("pointercancel", handlePointerCancel, capture);
+  document.addEventListener("mouseup", handleMouseUp, capture);
+  document.addEventListener("click", handleClick, capture);
+  document.addEventListener("keydown", handleKeyDown, capture);
+  document.addEventListener("selectionchange", scheduleSelectionPrompt, bubble);
+  window.addEventListener("scroll", handleViewportChange, capture);
+  window.addEventListener("resize", handleViewportChange, bubble);
+  window.addEventListener("blur", handleBlur, bubble);
+  const setCursor = (nextMode, previousMode) => {
+    const style = document.documentElement.style;
+    if (nextMode === "comment") {
+      originalCursor = {
+        value: style.getPropertyValue("cursor"),
+        priority: style.getPropertyPriority("cursor")
+      };
+      style.setProperty("cursor", "crosshair", "important");
+      return;
+    }
+    if (previousMode === "comment") {
+      if (originalCursor?.value) {
+        style.setProperty(
+          "cursor",
+          originalCursor.value,
+          originalCursor.priority
+        );
+      } else {
+        style.removeProperty("cursor");
+      }
+      originalCursor = null;
+    }
+  };
+  return {
+    setMode: (nextMode) => {
+      if (nextMode === mode) {
+        return;
+      }
+      const previousMode = mode;
+      mode = nextMode;
+      selectionPrompt = null;
+      hoveredElement = null;
+      focusedThreadId = null;
+      setCursor(nextMode, previousMode);
+      if (previousMode === "comment") {
+        window.getSelection()?.removeAllRanges();
+      }
+      schedulePaint();
+    },
+    setPins: (nextPins) => {
+      pins = nextPins;
+      const threadIds = new Set(nextPins.map((pin) => pin.threadId));
+      for (const threadId of boundElements.keys()) {
+        if (!threadIds.has(threadId)) {
+          boundElements.delete(threadId);
+        }
+      }
+      resolveAll();
+    },
+    focusThread: (threadId) => {
+      focusedThreadId = threadId;
+      const resolution = resolutions.get(threadId);
+      const target = resolution?.range?.startContainer.parentElement ?? resolution?.element ?? null;
+      if (resolution && isResolutionVisible(resolution)) {
+        const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
+        target?.scrollIntoView?.({
+          block: "center",
+          behavior: reduceMotion ? "auto" : "smooth"
+        });
+      }
+      schedulePaint();
+    },
+    clearDraft: () => {
+      clearDraft();
+      schedulePaint();
+    },
+    setDraftAnchor: (anchor) => {
+      draftAnchor = anchor?.type === "element" ? anchor : null;
+      resolveAll();
+    },
+    refresh: resolveAll,
+    destroy: () => {
+      isDestroyed = true;
+      observer.disconnect();
+      listeners.abort();
+      if (paintFrame !== null) {
+        window.cancelAnimationFrame(paintFrame);
+      }
+      if (resolveTimer !== null) {
+        clearTimeout(resolveTimer);
+      }
+      if (selectionTimer !== null) {
+        clearTimeout(selectionTimer);
+      }
+      setCursor("browse", mode);
+      root.remove();
+    }
+  };
+}
+export {
+  BADGE_SIZE_PX,
+  HIGHLIGHT_BACKGROUND,
+  OVERLAY_Z_INDEX,
+  RERESOLVE_DEBOUNCE_MS,
+  createCommentsOverlay
+};