@designfever/web-review-kit 0.4.0 → 0.4.1

package/dist/react-shell.cjs

@@ -185,6 +185,7 @@ function ensureReviewShellStyle() {
 
 	    /* Semantic aliases consumed by the existing shell chrome. */
 	    --df-review-bg: var(--df-review-color-canvas);
+	    --df-review-surface: var(--df-review-color-surface);
 	    --df-review-topbar: var(--df-review-color-surface);
 	    --df-review-panel: var(--df-review-color-panel);
 	    --df-review-panel-strong: var(--df-review-color-panel-strong);
@@ -539,10 +540,13 @@ function ensureReviewShellStyle() {
 
   .df-review-sitemap-list {
     --df-review-sitemap-grid-template: minmax(190px, 1fr) 74px 78px 64px minmax(108px, 160px);
+    position: relative;
     display: grid;
     align-content: start;
     min-height: 0;
-    overflow: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
     padding: 8px;
   }
 
@@ -557,11 +561,14 @@ function ensureReviewShellStyle() {
   .df-review-sitemap-table-head {
     position: sticky;
     top: 0;
-    z-index: 1;
+    z-index: 3;
     min-height: 32px;
     border-bottom: 1px solid var(--df-review-line);
     padding: 0 10px;
-    background: var(--df-review-surface);
+    background: var(--df-review-panel);
+    box-shadow:
+      0 -8px 0 0 var(--df-review-panel),
+      0 1px 0 var(--df-review-line);
     color: var(--df-review-muted);
     font-size: var(--df-review-font-size-xs);
     font-weight: 720;
@@ -632,10 +639,13 @@ function ensureReviewShellStyle() {
   .df-review-sitemap-row.is-summary {
     position: sticky;
     bottom: 0;
-    z-index: 1;
+    z-index: 3;
     border-top: 1px solid var(--df-review-line);
     border-bottom: 0;
-    background: var(--df-review-surface);
+    background: var(--df-review-panel);
+    box-shadow:
+      0 8px 0 0 var(--df-review-panel),
+      0 -1px 0 var(--df-review-line);
   }
 
   .df-review-sitemap-row.is-folder {
@@ -2489,8 +2499,12 @@ function ensureReviewShellStyle() {
   .df-review-source-candidate-list {
     display: grid;
     gap: 0;
+    max-height: min(220px, calc(100vh - 96px));
     min-height: 0;
-    overflow: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding-right: 2px;
+    scrollbar-gutter: stable;
   }
 
   .df-review-source-candidate {
@@ -5655,6 +5669,97 @@ var FigmaIcon = () => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   }
 );
 
+// src/react-shell/target/target.ts
+var HIDE_SCROLLBAR_STYLE_ID = "df-review-hide-scrollbar";
+var FIGMA_POINTER_LOCK_STYLE_ID = "df-review-figma-pointer-lock";
+var setTargetScrollbarHidden = (targetDocument, hidden) => {
+  if (!targetDocument) return;
+  const existing = targetDocument.getElementById(HIDE_SCROLLBAR_STYLE_ID);
+  if (hidden) {
+    if (existing) return;
+    const style = targetDocument.createElement("style");
+    style.id = HIDE_SCROLLBAR_STYLE_ID;
+    style.textContent = "html{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}";
+    targetDocument.head?.appendChild(style);
+  } else {
+    existing?.remove();
+  }
+};
+var setTargetFigmaOverlayLocked = (targetDocument, locked) => {
+  if (!targetDocument) return;
+  const existing = targetDocument.getElementById(FIGMA_POINTER_LOCK_STYLE_ID);
+  if (locked) {
+    if (existing) return;
+    const style = targetDocument.createElement("style");
+    style.id = FIGMA_POINTER_LOCK_STYLE_ID;
+    style.textContent = [
+      ".helper-figma-root,",
+      ".helper-figma-root *,",
+      ".helper-figma-loading-backdrop,",
+      ".helper-figma-loading-backdrop * {",
+      "pointer-events: none !important;",
+      "}"
+    ].join("\n");
+    targetDocument.head?.appendChild(style);
+  } else {
+    existing?.remove();
+  }
+};
+var isEditableEventTarget = (event) => {
+  const path = event.composedPath?.() ?? [];
+  const element = path[0] ?? event.target;
+  if (!element || typeof element.tagName !== "string") return false;
+  const tag = element.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || element.isContentEditable === true;
+};
+var TRUE_STORAGE_VALUES = /* @__PURE__ */ new Set([
+  "1",
+  "true",
+  "on",
+  "show",
+  "shown",
+  "visible",
+  "enabled",
+  "yes"
+]);
+var OVERLAY_STORAGE_KEYS = {
+  grid: ["isHelp", "df-review-grid-overlay", "dfReviewGridOverlay"],
+  figma: ["isFigmaHelp", "df-review-figma-overlay", "dfReviewFigmaOverlay"]
+};
+var isStoredOverlayEnabled = (value) => TRUE_STORAGE_VALUES.has(value?.trim().toLowerCase() ?? "");
+var getCookieValue = (targetDocument, name) => {
+  const cookies = targetDocument?.cookie ? targetDocument.cookie.split(";") : [];
+  const prefix = `${name}=`;
+  const match = cookies.map((cookie) => cookie.trim()).find((cookie) => cookie.startsWith(prefix));
+  return match ? decodeURIComponent(match.slice(prefix.length)) : null;
+};
+var getStorageValue = (storage, key) => {
+  try {
+    return storage?.getItem(key) ?? null;
+  } catch {
+    return null;
+  }
+};
+var getStoredOverlayState = (targetDocument, overlay) => {
+  const targetWindow = targetDocument?.defaultView;
+  return OVERLAY_STORAGE_KEYS[overlay].some((key) => {
+    if (isStoredOverlayEnabled(getCookieValue(targetDocument, key))) {
+      return true;
+    }
+    return isStoredOverlayEnabled(getStorageValue(targetWindow?.localStorage, key)) || isStoredOverlayEnabled(getStorageValue(targetWindow?.sessionStorage, key));
+  });
+};
+var getTargetOverlayState = (targetDocument) => ({
+  grid: Boolean(
+    targetDocument?.body.classList.contains("is-help") || targetDocument?.querySelector(".helper.onShow") || getStoredOverlayState(targetDocument, "grid")
+  ),
+  figma: Boolean(
+    targetDocument?.querySelector(
+      ".helper-figma-root, .helper-figma-loading-backdrop"
+    ) || getStoredOverlayState(targetDocument, "figma")
+  )
+});
+
 // src/react-shell/topbar.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var ReviewScopeIcon2 = ({ scope }) => {
@@ -6278,8 +6383,8 @@ function getDomAnchorFromPoint(point, configuredAttribute = "data-qa-id", enviro
     source: getDomSourceHint(target)
   };
 }
-function getElementViewportSelection(anchor, environment) {
-  const element = getAnchorElement(anchor, environment);
+function getElementViewportSelection(anchor, environment, preferredSelection) {
+  const element = getAnchorElement(anchor, environment, preferredSelection);
   if (!element) return void 0;
   const rect = element.getBoundingClientRect();
   if (rect.width <= 0 || rect.height <= 0) return void 0;
@@ -6318,22 +6423,35 @@ function getAnchorCandidates(anchor) {
     ...anchor.candidates ?? []
   ]);
 }
-function resolveAnchorElement(anchor, environment) {
+function resolveAnchorElement(anchor, environment, preferredSelection) {
   const matches = getAnchorCandidates(anchor).flatMap((candidate) => {
-    const match = queryBestAnchorCandidate(
-      candidate,
-      candidate.textFingerprint ?? anchor.textFingerprint,
-      environment
-    );
-    if (!match) return [];
-    const confidence = roundRatio(
-      (candidate.confidence ?? 0.5) * match.score
-    );
-    return [{
-      element: match.element,
-      candidate,
-      confidence
-    }];
+    const textFingerprint = candidate.textFingerprint ?? anchor.textFingerprint;
+    if (!preferredSelection) {
+      const match = queryBestAnchorCandidate(
+        candidate,
+        textFingerprint,
+        environment
+      );
+      if (!match) return [];
+      const confidence = roundRatio(
+        (candidate.confidence ?? 0.5) * match.score
+      );
+      return [{
+        element: match.element,
+        candidate,
+        confidence
+      }];
+    }
+    return queryAnchorElements(candidate.selector, environment).map((element) => {
+      const confidence = roundRatio(
+        (candidate.confidence ?? 0.5) * getTextFingerprintScore(textFingerprint, getTextFingerprint(element)) * getSelectionMatchScore(element, preferredSelection)
+      );
+      return {
+        element,
+        candidate,
+        confidence
+      };
+    });
   });
   return matches.sort((a, b) => b.confidence - a.confidence)[0];
 }
@@ -6343,8 +6461,8 @@ function cssEscape(value) {
   }
   return value.replace(/[^a-zA-Z0-9_-]/g, "\\$&");
 }
-function getAnchorElement(anchor, environment) {
-  return typeof anchor === "string" ? queryAnchorElement(anchor, environment) : resolveAnchorElement(anchor, environment)?.element;
+function getAnchorElement(anchor, environment, preferredSelection) {
+  return typeof anchor === "string" ? queryAnchorElement(anchor, environment) : resolveAnchorElement(anchor, environment, preferredSelection)?.element;
 }
 function createAnchorCandidates(target, configuredAttribute) {
   const targetCandidates = [];
@@ -6708,6 +6826,38 @@ function getTextFingerprintScore(expected, actual) {
   const matches = expectedTokens.filter((token) => actualTokens.has(token));
   return clamp(matches.length / expectedTokens.length, 0.25, 0.76);
 }
+function getSelectionMatchScore(element, selection) {
+  const rect = element.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) return 0.05;
+  const overlapLeft = Math.max(rect.left, selection.left);
+  const overlapTop = Math.max(rect.top, selection.top);
+  const overlapRight = Math.min(rect.right, selection.left + selection.width);
+  const overlapBottom = Math.min(rect.bottom, selection.top + selection.height);
+  const overlapWidth = Math.max(0, overlapRight - overlapLeft);
+  const overlapHeight = Math.max(0, overlapBottom - overlapTop);
+  const overlapArea = overlapWidth * overlapHeight;
+  if (overlapArea > 0) {
+    const selectionArea = Math.max(1, selection.width * selection.height);
+    const rectArea = Math.max(1, rect.width * rect.height);
+    return 1 + overlapArea / Math.min(selectionArea, rectArea);
+  }
+  const rectCenterX = rect.left + rect.width / 2;
+  const rectCenterY = rect.top + rect.height / 2;
+  const selectionCenterX = selection.left + selection.width / 2;
+  const selectionCenterY = selection.top + selection.height / 2;
+  const distance = Math.hypot(
+    rectCenterX - selectionCenterX,
+    rectCenterY - selectionCenterY
+  );
+  const basis = Math.max(
+    1,
+    rect.width,
+    rect.height,
+    selection.width,
+    selection.height
+  );
+  return clamp(1 / (1 + distance / basis), 0.05, 0.95);
+}
 function getFingerprintTokens(value) {
   return value.toLowerCase().split(/[\s/|,.:;()[\]{}"'`~!?<>]+/).map((token) => token.trim()).filter((token) => token.length > 1);
 }
@@ -7838,32 +7988,6 @@ function createStyleElement() {
       pointer-events: none;
     }
 
-    .dfwr-adjust-hud {
-      position: fixed;
-      z-index: 5;
-      display: inline-flex;
-      align-items: center;
-      min-height: 22px;
-      padding: 0 8px;
-      border: 1px solid rgba(99, 215, 199, 0.72);
-      border-radius: var(--df-review-radius-sm);
-      background: rgba(21, 25, 29, 0.92);
-      box-shadow:
-        0 0 0 3px rgba(99, 215, 199, 0.14),
-        0 8px 18px rgba(0, 0, 0, 0.26);
-      color: #63d7c7;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-      font-size: var(--df-review-font-size-2xs);
-      font-weight: 800;
-      line-height: 1;
-      pointer-events: none;
-      white-space: nowrap;
-    }
-
-    .dfwr-adjust-hud[hidden] {
-      display: none;
-    }
-
     .dfwr-empty,
     .dfwr-error {
       margin: 0;
@@ -8226,7 +8350,6 @@ var WebReviewKitView = class {
       if (event.button !== 0) return;
       cancel(event);
     });
-    layer.addEventListener("click", cancel);
     return layer;
   }
   getDraftAdjustmentMetrics(draft) {
@@ -8406,14 +8529,6 @@ var WebReviewKitView = class {
     if (!draft.selection) return void 0;
     return toViewportSelection(draft.selection.viewport);
   }
-  formatDraftAdjustmentStatus(draft) {
-    const metrics = this.getDraftAdjustmentMetrics(draft);
-    return [
-      `x ${this.formatSignedPx(metrics.x)}`,
-      `y ${this.formatSignedPx(metrics.y)}`,
-      `scale ${this.formatSignedPx(metrics.scale)}`
-    ].join(" / ");
-  }
   getDraftAdjustmentMetricLines(draft) {
     const metrics = this.getDraftAdjustmentMetrics(draft);
     return [
@@ -8425,6 +8540,7 @@ var WebReviewKitView = class {
   }
   withDraftAdjustmentComment(comment, draft) {
     if (!this.hasDraftAdjustment(draft)) return comment;
+    const trimmedComment = comment.trim();
     const metrics = this.getDraftAdjustmentMetrics(draft);
     const adjustment = [
       `${this.getAdjustmentLabel()}: x ${this.formatSignedPx(
@@ -8436,12 +8552,20 @@ var WebReviewKitView = class {
         metrics.viewportWidth
       )}/design ${Math.round(metrics.designWidth)})`
     ].join(" ");
-    return `${comment.trim()}
-${adjustment}`;
+    return trimmedComment ? `${trimmedComment}
+${adjustment}` : adjustment;
   }
   getStyleableDraftElement(draft, environment) {
+    if (draft.previewElement && draft.previewElement.ownerDocument === environment.document && "style" in draft.previewElement) {
+      return draft.previewElement;
+    }
     if (!draft.anchor) return void 0;
-    const element = resolveAnchorElement(draft.anchor, environment)?.element;
+    const preferredSelection = draft.selection ? toViewportSelection(draft.selection.viewport) : void 0;
+    const element = resolveAnchorElement(
+      draft.anchor,
+      environment,
+      preferredSelection
+    )?.element;
     if (!element) return void 0;
     if ("style" in element) return element;
     return void 0;
@@ -8461,39 +8585,77 @@ ${adjustment}`;
       this.restoreDraftPreview();
     }
     if (!this.draftPreview) {
-      const computedTransform = environment.window.getComputedStyle(element).transform;
+      const computedStyle = environment.window.getComputedStyle(element);
+      const clone = element.cloneNode(true);
+      this.removeDuplicateIds(clone);
+      this.copyComputedStyle(element, clone, environment);
+      this.positionDraftPreviewClone(clone, element, computedStyle);
+      environment.document.body?.appendChild(clone);
       this.draftPreview = {
         element,
-        transform: element.style.transform,
-        transformOrigin: element.style.transformOrigin,
-        transition: element.style.transition,
-        willChange: element.style.willChange,
-        baseTransform: element.style.transform || (computedTransform && computedTransform !== "none" ? computedTransform : "")
+        clone,
+        visibility: element.style.visibility
       };
+      element.style.visibility = "hidden";
     }
     const metrics = this.getDraftAdjustmentMetrics(draft);
     const translate = `translate(${this.toCssNumber(metrics.cssX)}px, ${this.toCssNumber(
       metrics.cssY
     )}px)`;
     const scale = metrics.scaleFactor === 1 ? "" : `scale(${this.toCssNumber(metrics.scaleFactor)})`;
-    element.style.transition = "none";
-    element.style.willChange = "transform";
-    element.style.transformOrigin = "top left";
-    element.style.transform = [
-      this.draftPreview.baseTransform,
-      translate,
-      scale
-    ].filter(Boolean).join(" ");
+    this.draftPreview.clone.style.transform = [translate, scale].filter(Boolean).join(" ");
   }
   restoreDraftPreview() {
     if (!this.draftPreview) return;
-    const { element, transform, transformOrigin, transition, willChange } = this.draftPreview;
-    element.style.transform = transform;
-    element.style.transformOrigin = transformOrigin;
-    element.style.transition = transition;
-    element.style.willChange = willChange;
+    const { element, clone, visibility } = this.draftPreview;
+    clone.remove();
+    element.style.visibility = visibility;
     this.draftPreview = void 0;
   }
+  positionDraftPreviewClone(clone, element, computedStyle) {
+    const rect = element.getBoundingClientRect();
+    clone.setAttribute("data-dfwr-adjust-preview", "true");
+    clone.setAttribute("aria-hidden", "true");
+    clone.style.position = "fixed";
+    clone.style.left = `${this.toCssNumber(rect.left)}px`;
+    clone.style.top = `${this.toCssNumber(rect.top)}px`;
+    clone.style.right = "auto";
+    clone.style.bottom = "auto";
+    clone.style.width = `${this.toCssNumber(rect.width)}px`;
+    clone.style.height = `${this.toCssNumber(rect.height)}px`;
+    clone.style.maxWidth = "none";
+    clone.style.maxHeight = "none";
+    clone.style.margin = "0";
+    clone.style.boxSizing = "border-box";
+    clone.style.display = this.getDraftPreviewDisplay(computedStyle.display);
+    clone.style.zIndex = "2147483646";
+    clone.style.pointerEvents = "none";
+    clone.style.transition = "none";
+    clone.style.willChange = "transform";
+    clone.style.transformOrigin = "top left";
+    clone.style.transform = "none";
+  }
+  getDraftPreviewDisplay(display) {
+    if (display === "inline" || display === "contents") return "inline-block";
+    return display || "block";
+  }
+  copyComputedStyle(element, clone, environment) {
+    const computedStyle = environment.window.getComputedStyle(element);
+    for (let index = 0; index < computedStyle.length; index += 1) {
+      const property = computedStyle.item(index);
+      clone.style.setProperty(
+        property,
+        computedStyle.getPropertyValue(property),
+        computedStyle.getPropertyPriority(property)
+      );
+    }
+  }
+  removeDuplicateIds(element) {
+    element.removeAttribute("id");
+    element.querySelectorAll("[id]").forEach((child) => {
+      child.removeAttribute("id");
+    });
+  }
   toCssNumber(value) {
     return Math.round(value * 1e3) / 1e3;
   }
@@ -8655,8 +8817,8 @@ ${adjustment}`;
     });
     const saveDraft = () => {
       const comment = textarea.value.trim();
-      if (!comment) return;
       const currentDraft = this.state.noteDraft ?? draft;
+      if (!comment && !this.hasDraftAdjustment(currentDraft)) return;
       void this.config.actions.createItem({
         kind: "note",
         comment: this.withDraftAdjustmentComment(comment, currentDraft),
@@ -8666,13 +8828,8 @@ ${adjustment}`;
         selection: currentDraft.selection
       });
     };
-    const adjustmentHud = isElementDraft ? this.createAdjustmentHud(draft, environment) : void 0;
-    if (adjustmentHud) {
-      group.append(adjustmentHud);
-    }
     const adjustmentControls = isElementDraft ? this.createAdjustmentControls({
       draft,
-      hud: adjustmentHud,
       pin,
       popover,
       selectionHighlight,
@@ -8800,7 +8957,6 @@ ${adjustment}`;
   }
   createAdjustmentControls({
     draft,
-    hud,
     pin,
     popover,
     selectionHighlight,
@@ -8838,7 +8994,6 @@ ${adjustment}`;
       scaleStatus.textContent = scaleLine;
       this.syncDraftAdjustmentUi({
         draft: nextDraft,
-        hud,
         pin,
         selectionHighlight
       });
@@ -8899,16 +9054,8 @@ ${adjustment}`;
     if (event.key.toLowerCase() === "s") return { x: 0, y: 0, scale: -step };
     return void 0;
   }
-  createAdjustmentHud(draft, environment) {
-    const hud = document.createElement("div");
-    hud.className = "dfwr-adjust-hud";
-    hud.setAttribute("aria-hidden", "true");
-    this.syncAdjustmentHud(hud, draft, environment);
-    return hud;
-  }
   syncDraftAdjustmentUi({
     draft,
-    hud,
     pin,
     selectionHighlight
   }) {
@@ -8933,26 +9080,8 @@ ${adjustment}`;
       selectionHighlight.style.width = `${rect.width}px`;
       selectionHighlight.style.height = `${rect.height}px`;
     }
-    if (hud) {
-      this.syncAdjustmentHud(hud, draft, environment);
-    }
     this.syncDraftPreview(draft);
   }
-  syncAdjustmentHud(hud, draft, environment) {
-    if (!draft.selection) return;
-    const rect = toHostSelection(
-      this.getAdjustedDraftSelection(
-        toViewportSelection(draft.selection.viewport),
-        draft
-      ),
-      environment
-    );
-    const isVisible = draft.adjustment?.isActive === true || this.hasDraftAdjustment(draft);
-    hud.hidden = !isVisible;
-    hud.textContent = this.formatDraftAdjustmentStatus(draft);
-    hud.style.left = `${Math.max(4, rect.left)}px`;
-    hud.style.top = `${Math.max(4, rect.top - 28)}px`;
-  }
   createAreaForm() {
     const form = document.createElement("form");
     form.className = "dfwr-form";
@@ -9076,12 +9205,18 @@ ${adjustment}`;
     save.className = "dfwr-button is-primary";
     save.type = "button";
     save.textContent = saveLabel;
-    save.addEventListener("click", onSave);
+    save.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      onSave();
+    });
     const cancel = document.createElement("button");
     cancel.className = "dfwr-button";
     cancel.type = "button";
     cancel.textContent = "Cancel";
-    cancel.addEventListener("click", () => {
+    cancel.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
       this.config.actions.setModeState("idle");
       this.config.actions.clearDrafts();
       this.config.actions.render();
@@ -9468,7 +9603,7 @@ ${formatItemMeta(item)}`;
 
 // src/core/web.review.kit.app.ts
 var ROOT_ID = "df-web-review-kit-root";
-function isEditableEventTarget(event) {
+function isEditableEventTarget2(event) {
   const path = event.composedPath?.() ?? [];
   const element = path[0] ?? event.target;
   if (!element || typeof element.tagName !== "string") return false;
@@ -9507,7 +9642,7 @@ var WebReviewKitApp = class {
         event.stopPropagation();
         return;
       }
-      if (isEditableEventTarget(event) || !isHotkey(event, this.hotkey)) return;
+      if (isEditableEventTarget2(event) || !isHotkey(event, this.hotkey)) return;
       event.preventDefault();
       event.stopPropagation();
       this.toggle();
@@ -9779,13 +9914,26 @@ var WebReviewKitApp = class {
     const viewport = getViewportSize(environment);
     const nextPoint = clampPoint(point, environment);
     const draft = await this.withOverlayHidden(() => {
+      const pointSelection = getPointSelection(nextPoint);
+      const targetElement = environment.document.elementFromPoint(
+        nextPoint.x,
+        nextPoint.y
+      );
+      const previewElement = targetElement && "style" in targetElement ? targetElement : void 0;
+      const targetRect = targetElement?.getBoundingClientRect();
+      const clickedSelection = targetRect && targetRect.width > 0 && targetRect.height > 0 ? {
+        left: targetRect.left,
+        top: targetRect.top,
+        width: targetRect.width,
+        height: targetRect.height
+      } : void 0;
       const anchor = getDomAnchorFromPoint(
         nextPoint,
         this.options.anchors?.attribute,
         environment
       );
-      const elementSelection = anchor ? getElementViewportSelection(anchor, environment) : void 0;
-      const selection = elementSelection ?? getPointSelection(nextPoint);
+      const elementSelection = anchor ? clickedSelection ?? getElementViewportSelection(anchor, environment, pointSelection) : void 0;
+      const selection = elementSelection ?? pointSelection;
       const markerPoint = elementSelection ? { x: selection.left, y: selection.top } : getSelectionCenter(selection);
       const reviewSelection = elementSelection ? {
         viewport: toPublicSelection(elementSelection),
@@ -9804,7 +9952,8 @@ var WebReviewKitApp = class {
         anchor,
         marker,
         selection: reviewSelection,
-        comment
+        comment,
+        previewElement
       };
     });
     this.noteDraft = draft;
@@ -9932,39 +10081,6 @@ function createNoopController() {
   };
 }
 
-// src/react-shell/target/target.ts
-var HIDE_SCROLLBAR_STYLE_ID = "df-review-hide-scrollbar";
-var setTargetScrollbarHidden = (targetDocument, hidden) => {
-  if (!targetDocument) return;
-  const existing = targetDocument.getElementById(HIDE_SCROLLBAR_STYLE_ID);
-  if (hidden) {
-    if (existing) return;
-    const style = targetDocument.createElement("style");
-    style.id = HIDE_SCROLLBAR_STYLE_ID;
-    style.textContent = "html{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}";
-    targetDocument.head?.appendChild(style);
-  } else {
-    existing?.remove();
-  }
-};
-var isEditableEventTarget2 = (event) => {
-  const path = event.composedPath?.() ?? [];
-  const element = path[0] ?? event.target;
-  if (!element || typeof element.tagName !== "string") return false;
-  const tag = element.tagName;
-  return tag === "INPUT" || tag === "TEXTAREA" || element.isContentEditable === true;
-};
-var getTargetOverlayState = (targetDocument) => ({
-  grid: Boolean(
-    targetDocument?.body.classList.contains("is-help") || targetDocument?.querySelector(".helper.onShow")
-  ),
-  figma: Boolean(
-    targetDocument?.querySelector(
-      ".helper-figma-root, .helper-figma-loading-backdrop"
-    )
-  )
-});
-
 // src/react-shell/hooks/review.frame.navigation.ts
 var bindReviewFrameNavigation = ({
   pageTargets,
@@ -10228,17 +10344,32 @@ var useReviewKitLifecycle = ({
 
 // src/react-shell/hooks/use.review.target.overlay.ts
 var import_react9 = require("react");
+var TARGET_OVERLAY_REFRESH_DELAYS = [80, 240, 600];
 var useReviewTargetOverlay = ({
   iframeRef,
   isFigmaOverlayAvailable,
   targetOverlayState,
   onTargetOverlayStateChange
 }) => {
-  const refreshTargetOverlayState = (0, import_react9.useCallback)(() => {
-    onTargetOverlayStateChange(
-      getTargetOverlayState(iframeRef.current?.contentDocument ?? void 0)
+  const refreshTimersRef = (0, import_react9.useRef)([]);
+  const clearRefreshTimers = (0, import_react9.useCallback)(() => {
+    refreshTimersRef.current.forEach((timer) => window.clearTimeout(timer));
+    refreshTimersRef.current = [];
+  }, []);
+  const updateTargetOverlayState = (0, import_react9.useCallback)(() => {
+    const state = getTargetOverlayState(
+      iframeRef.current?.contentDocument ?? void 0
     );
+    onTargetOverlayStateChange(state);
+    return state;
   }, [iframeRef, onTargetOverlayStateChange]);
+  const refreshTargetOverlayState = (0, import_react9.useCallback)(() => {
+    clearRefreshTimers();
+    updateTargetOverlayState();
+    refreshTimersRef.current = TARGET_OVERLAY_REFRESH_DELAYS.map(
+      (delay) => window.setTimeout(updateTargetOverlayState, delay)
+    );
+  }, [clearRefreshTimers, updateTargetOverlayState]);
   const dispatchTargetOverlayHotkey = (0, import_react9.useCallback)(
     (overlay) => {
       const targetWindow = iframeRef.current?.contentWindow;
@@ -10274,19 +10405,17 @@ var useReviewTargetOverlay = ({
   );
   const closeTargetOverlay = (0, import_react9.useCallback)(
     (overlay) => {
-      const currentState = getTargetOverlayState(
-        iframeRef.current?.contentDocument ?? void 0
-      );
-      onTargetOverlayStateChange(currentState);
+      const currentState = updateTargetOverlayState();
       if (!currentState[overlay]) return false;
       return dispatchTargetOverlayHotkey(overlay);
     },
-    [dispatchTargetOverlayHotkey, iframeRef, onTargetOverlayStateChange]
+    [dispatchTargetOverlayHotkey, updateTargetOverlayState]
   );
   (0, import_react9.useEffect)(() => {
     if (isFigmaOverlayAvailable || !targetOverlayState.figma) return;
     closeTargetOverlay("figma");
   }, [closeTargetOverlay, isFigmaOverlayAvailable, targetOverlayState.figma]);
+  (0, import_react9.useEffect)(() => clearRefreshTimers, [clearRefreshTimers]);
   return {
     closeTargetOverlay,
     refreshTargetOverlayState,
@@ -11544,7 +11673,7 @@ var useReviewShellHotkeys = ({
       if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
         return;
       }
-      if (isEditableEventTarget2(event)) return;
+      if (isEditableEventTarget(event)) return;
       const actions = {
         r: () => {
           if (isRulerAvailable) onToggleRuler();
@@ -12304,7 +12433,6 @@ var ReviewShell = ({
   });
   const {
     clearSelectedItem,
-    closeTargetOverlay,
     initReviewKit,
     reloadReviewKit,
     restoreReviewItem,
@@ -12442,9 +12570,6 @@ var ReviewShell = ({
     const writeMode = getReviewModeWriteMode(nextMode);
     if (writeMode && !activeAdapterEntry.writeModes.includes(writeMode)) return;
     closeRuler();
-    if (nextMode === "element") {
-      closeTargetOverlay("figma");
-    }
     setControllerReviewMode(nextMode);
   };
   useReviewShellHotkeys({
@@ -12481,6 +12606,13 @@ var ReviewShell = ({
     );
     setTargetFigmaState(config ? { targetSrc, config } : null);
   }, [iframeRef, targetSrc]);
+  (0, import_react19.useEffect)(() => {
+    const targetDocument = iframeRef.current?.contentDocument;
+    setTargetFigmaOverlayLocked(targetDocument, mode === "element");
+    return () => {
+      setTargetFigmaOverlayLocked(targetDocument, false);
+    };
+  }, [iframeRef, mode, targetSrc]);
   const clearSourceInspector = (0, import_react19.useCallback)(() => {
     sourceInspectorInteractionRef.current = false;
     setSourceInspectorState(null);
@@ -12627,6 +12759,13 @@ var ReviewShell = ({
         cursor: crosshair !important;
       }
 
+      html[${optionAttribute}="true"] .helper-figma-root,
+      html[${optionAttribute}="true"] .helper-figma-root *,
+      html[${optionAttribute}="true"] .helper-figma-loading-backdrop,
+      html[${optionAttribute}="true"] .helper-figma-loading-backdrop * {
+        pointer-events: none !important;
+      }
+
       html[${optionAttribute}="true"] body::before {
         position: fixed !important;
         z-index: 2147483647 !important;
@@ -12853,8 +12992,18 @@ var ReviewShell = ({
   const loadTargetFrame = (0, import_react19.useCallback)(() => {
     initReviewKit();
     refreshTargetFigmaConfig();
+    setTargetFigmaOverlayLocked(
+      iframeRef.current?.contentDocument,
+      mode === "element"
+    );
     bindSourceOpenShortcut();
-  }, [bindSourceOpenShortcut, initReviewKit, refreshTargetFigmaConfig]);
+  }, [
+    bindSourceOpenShortcut,
+    iframeRef,
+    initReviewKit,
+    mode,
+    refreshTargetFigmaConfig
+  ]);
   (0, import_react19.useEffect)(() => {
     const frame = window.requestAnimationFrame(bindSourceOpenShortcut);
     return () => window.cancelAnimationFrame(frame);