@designfever/web-review-kit 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -176,7 +176,7 @@ function supabaseAdapter(options) {
         );
       }
       const rows = await unwrapResponse(
-        request.order("updated_at", { ascending: false }),
+        request.order("created_at", { ascending: false }),
         "supabase list review items"
       );
       return (rows ?? []).flatMap((row) => {
@@ -459,19 +459,6 @@ function getPopoverPosition(point, environment, options) {
     )
   };
 }
-function getAreaPopoverPosition(selection, environment) {
-  return getPopoverPosition(
-    {
-      x: selection.left + selection.width,
-      y: selection.top
-    },
-    environment,
-    {
-      width: 360,
-      estimatedHeight: 206
-    }
-  );
-}
 function getPopoverBounds(environment) {
   if (!environment) {
     return {
@@ -536,6 +523,21 @@ function roundPoint(point) {
 }
 
 // src/core/dom.anchor.ts
+var COMMON_ANCHOR_ATTRIBUTES = [
+  "data-testid",
+  "data-test-id",
+  "data-cy",
+  "data-test",
+  "data-qa",
+  "data-section-id",
+  "data-component"
+];
+var SEMANTIC_ANCHOR_ATTRIBUTES = [
+  "aria-label",
+  "title",
+  "name",
+  "href"
+];
 function getDomAnchor(selection, configuredAttribute = "data-qa-id", environment) {
   const x = selection.left + selection.width / 2;
   const y = selection.top + selection.height / 2;
@@ -625,46 +627,66 @@ function getAnchorElement(anchor, environment) {
   return typeof anchor === "string" ? queryAnchorElement(anchor, environment) : resolveAnchorElement(anchor, environment)?.element;
 }
 function createAnchorCandidates(target, configuredAttribute) {
-  const candidates = [];
-  const anchoredByAttribute = target.closest(`[${configuredAttribute}]`);
-  if (anchoredByAttribute) {
-    const value = anchoredByAttribute.getAttribute(configuredAttribute);
-    if (value) {
-      candidates.push({
-        selector: `[${configuredAttribute}="${cssEscape(value)}"]`,
-        strategy: "configured-attribute",
-        confidence: 0.98,
-        textFingerprint: getTextFingerprint(anchoredByAttribute)
-      });
-    }
-  }
+  const targetCandidates = [];
+  const configuredAnchor = getExactAttributeAnchorCandidate(
+    target,
+    configuredAttribute,
+    0.98,
+    "configured-attribute"
+  );
+  if (configuredAnchor) targetCandidates.push(configuredAnchor);
+  const targetAttributeAnchor = getAttributeAnchorCandidate(
+    target,
+    COMMON_ANCHOR_ATTRIBUTES.filter((name) => name !== configuredAttribute),
+    0.9
+  );
+  if (targetAttributeAnchor) targetCandidates.push(targetAttributeAnchor);
   if (isMeaningfulId(target.id)) {
-    candidates.push({
+    targetCandidates.push({
       selector: `#${cssEscape(target.id)}`,
       strategy: "id",
       confidence: 0.94,
       textFingerprint: getTextFingerprint(target)
     });
   }
+  const semanticAnchor = getAttributeAnchorCandidate(
+    target,
+    SEMANTIC_ANCHOR_ATTRIBUTES,
+    0.84
+  );
+  if (semanticAnchor) targetCandidates.push(semanticAnchor);
   const targetClassName = getMeaningfulClassName(target);
   if (targetClassName) {
-    candidates.push({
+    targetCandidates.push({
       selector: `${target.tagName.toLowerCase()}.${cssEscape(targetClassName)}`,
       strategy: "class",
       confidence: 0.82,
       textFingerprint: getTextFingerprint(target)
     });
   }
-  candidates.push({
+  const scopedPath = getScopedDomPathCandidate(target, configuredAttribute);
+  if (scopedPath) targetCandidates.push(scopedPath);
+  const targetDomPath = {
     selector: getDomPath(target),
     strategy: "dom-path",
-    confidence: 0.9,
+    confidence: targetCandidates.length > 0 ? 0.8 : 0.5,
     textFingerprint: getTextFingerprint(target)
-  });
+  };
+  const parentCandidates = [];
   const parent = target.parentElement;
+  const parentConfiguredAnchor = parent ? findClosestAttributeAnchor(parent, [configuredAttribute], 0.72, {
+    strategy: "configured-attribute"
+  }) : void 0;
+  if (parentConfiguredAnchor) parentCandidates.push(parentConfiguredAnchor);
+  const anchoredByAttribute = parent ? findClosestAttributeAnchor(
+    parent,
+    COMMON_ANCHOR_ATTRIBUTES.filter((name) => name !== configuredAttribute),
+    0.7
+  ) : void 0;
+  if (anchoredByAttribute) parentCandidates.push(anchoredByAttribute);
   const anchoredById = parent ? findClosest(parent, (element) => isMeaningfulId(element.id)) : void 0;
   if (anchoredById?.id) {
-    candidates.push({
+    parentCandidates.push({
       selector: `#${cssEscape(anchoredById.id)}`,
       strategy: "id",
       confidence: 0.72,
@@ -674,7 +696,7 @@ function createAnchorCandidates(target, configuredAttribute) {
   const anchoredByClass = parent ? findClosest(parent, (element) => Boolean(getMeaningfulClassName(element))) : void 0;
   const className = anchoredByClass ? getMeaningfulClassName(anchoredByClass) : void 0;
   if (anchoredByClass && className) {
-    candidates.push({
+    parentCandidates.push({
       selector: `${anchoredByClass.tagName.toLowerCase()}.${cssEscape(
         className
       )}`,
@@ -683,8 +705,107 @@ function createAnchorCandidates(target, configuredAttribute) {
       textFingerprint: getTextFingerprint(anchoredByClass)
     });
   }
+  const candidates = targetCandidates.length > 0 ? [...targetCandidates, targetDomPath, ...parentCandidates] : [...parentCandidates, targetDomPath];
   return dedupeAnchorCandidates(candidates);
 }
+function findClosestAttributeAnchor(target, attributeNames, confidence, options) {
+  for (const attributeName of attributeNames) {
+    const selector = `[${attributeName}]`;
+    const element = safeClosest(target, selector);
+    if (!element) continue;
+    const value = getStableAttributeValue(element, attributeName);
+    if (!value) continue;
+    return {
+      selector: `[${attributeName}="${cssEscape(value)}"]`,
+      strategy: options?.strategy ?? "attribute",
+      confidence,
+      textFingerprint: getTextFingerprint(element)
+    };
+  }
+  return void 0;
+}
+function getExactAttributeAnchorCandidate(element, attributeName, confidence, strategy) {
+  const value = getStableAttributeValue(element, attributeName);
+  if (!value) return void 0;
+  return {
+    selector: `[${attributeName}="${cssEscape(value)}"]`,
+    strategy,
+    confidence,
+    textFingerprint: getTextFingerprint(element)
+  };
+}
+function getAttributeAnchorCandidate(element, attributeNames, confidence) {
+  for (const attributeName of attributeNames) {
+    const value = getStableAttributeValue(element, attributeName);
+    if (!value) continue;
+    return {
+      selector: `${element.tagName.toLowerCase()}[${attributeName}="${cssEscape(
+        value
+      )}"]`,
+      strategy: "attribute",
+      confidence,
+      textFingerprint: getTextFingerprint(element)
+    };
+  }
+  return void 0;
+}
+function getScopedDomPathCandidate(target, configuredAttribute) {
+  const parent = target.parentElement;
+  if (!parent) return void 0;
+  const anchor = findStableAncestorSelector(parent, configuredAttribute);
+  if (!anchor) return void 0;
+  const selector = getDomPathBetween(anchor.element, target, anchor.selector);
+  if (!selector) return void 0;
+  return {
+    selector,
+    strategy: "dom-path",
+    confidence: anchor.confidence,
+    textFingerprint: getTextFingerprint(target)
+  };
+}
+function findStableAncestorSelector(start, configuredAttribute) {
+  let element = start;
+  const root = start.ownerDocument.documentElement;
+  while (element && element !== root) {
+    const configuredValue = getStableAttributeValue(element, configuredAttribute);
+    if (configuredValue) {
+      return {
+        element,
+        selector: `[${configuredAttribute}="${cssEscape(configuredValue)}"]`,
+        confidence: 0.88
+      };
+    }
+    const attributeAnchor = getAttributeAnchorCandidate(
+      element,
+      COMMON_ANCHOR_ATTRIBUTES.filter((name) => name !== configuredAttribute),
+      0.84
+    );
+    if (attributeAnchor) {
+      return {
+        element,
+        selector: attributeAnchor.selector,
+        confidence: 0.84
+      };
+    }
+    if (isMeaningfulId(element.id)) {
+      return {
+        element,
+        selector: `#${cssEscape(element.id)}`,
+        confidence: 0.82
+      };
+    }
+    const className = getMeaningfulClassName(element);
+    if (className) {
+      return {
+        element,
+        selector: `${element.tagName.toLowerCase()}.${cssEscape(className)}`,
+        confidence: 0.76
+      };
+    }
+    element = element.parentElement;
+  }
+  return void 0;
+}
 function getAnchorSourceElement(target, candidate, configuredAttribute) {
   if (candidate.strategy === "configured-attribute") {
     return target.closest(`[${configuredAttribute}]`);
@@ -696,6 +817,13 @@ function getAnchorSourceElement(target, candidate, configuredAttribute) {
     return target;
   }
 }
+function safeClosest(element, selector) {
+  try {
+    return element.closest(selector);
+  } catch {
+    return null;
+  }
+}
 function getElementHtmlSnippet(element, maxLength = 1e3) {
   const html = decodeHtmlEntities(element.outerHTML.replace(/\s+/g, " ").trim());
   if (html.length <= maxLength) return html;
@@ -718,18 +846,39 @@ function decodeHtmlEntities(value) {
 }
 function getDomSourceHint(target) {
   const sourceElement = target.closest(
-    "[data-file], [data-component], [data-section-index], [data-section-id]"
+    [
+      "[data-wrk-source-file]",
+      "[data-wrk-source-component]",
+      "[data-wrk-source-line]",
+      "[data-wrk-source-column]",
+      "[data-file]",
+      "[data-component]",
+      "[data-section-index]",
+      "[data-section-id]"
+    ].join(", ")
   );
   if (!sourceElement) return void 0;
-  const dataset = sourceElement.dataset;
   const source = {
-    component: dataset.component,
-    file: dataset.file,
-    sectionId: dataset.sectionId,
-    sectionIndex: dataset.sectionIndex
+    component: getSourceAttribute(
+      sourceElement,
+      "data-wrk-source-component",
+      "data-component"
+    ),
+    file: getSourceAttribute(sourceElement, "data-wrk-source-file", "data-file"),
+    line: getSourceAttribute(sourceElement, "data-wrk-source-line"),
+    column: getSourceAttribute(sourceElement, "data-wrk-source-column"),
+    sectionId: getSourceAttribute(sourceElement, "data-section-id"),
+    sectionIndex: getSourceAttribute(sourceElement, "data-section-index")
   };
   return Object.values(source).some(Boolean) ? source : void 0;
 }
+function getSourceAttribute(element, ...names) {
+  for (const name of names) {
+    const value = element.getAttribute(name)?.trim();
+    if (value) return value;
+  }
+  return void 0;
+}
 function dedupeAnchorCandidates(candidates) {
   const seen = /* @__PURE__ */ new Set();
   return candidates.filter((candidate) => {
@@ -796,10 +945,38 @@ function getDomPath(element) {
   }
   return `body > ${parts.join(" > ")}`;
 }
+function getDomPathBetween(ancestor, target, ancestorSelector) {
+  const parts = [];
+  let current = target;
+  while (current && current !== ancestor) {
+    parts.unshift(getDomPathPart(current));
+    current = current.parentElement;
+  }
+  if (current !== ancestor || parts.length === 0) return void 0;
+  return `${ancestorSelector} > ${parts.join(" > ")}`;
+}
+function getDomPathPart(element) {
+  const parent = element.parentElement;
+  const tag = element.tagName.toLowerCase();
+  if (!parent) return tag;
+  const currentTagName = element.tagName;
+  const siblings = Array.from(parent.children).filter(
+    (child) => child.tagName === currentTagName
+  );
+  const index = siblings.indexOf(element) + 1;
+  return `${tag}:nth-of-type(${index})`;
+}
 function getTextFingerprint(element) {
   const text = element.textContent?.replace(/\s+/g, " ").trim();
   return text ? text.slice(0, 120) : void 0;
 }
+function getStableAttributeValue(element, attributeName) {
+  const value = element.getAttribute(attributeName)?.trim();
+  if (!value || value.length > 160) return void 0;
+  if (/^(true|false)$/i.test(value)) return void 0;
+  if (/^\d+$/.test(value) && value.length < 3) return void 0;
+  return value;
+}
 function getTextFingerprintScore(expected, actual) {
   if (!expected) return 1;
   if (!actual) return 0.5;
@@ -1271,6 +1448,19 @@ function createStyleElement() {
       display: block;
     }
 
+    .dfwr-shell.has-dismissible-draft {
+      z-index: 900;
+    }
+
+    .dfwr-draft-cancel-layer {
+      position: fixed;
+      inset: 0;
+      z-index: 2;
+      pointer-events: auto;
+      background: transparent;
+      cursor: default;
+    }
+
     .dfwr-panel {
       position: fixed;
       right: 16px;
@@ -1764,6 +1954,40 @@ function createStyleElement() {
       box-shadow: var(--df-review-shadow-popover);
     }
 
+    .dfwr-note-popover.is-composer,
+    .dfwr-area-draft.is-composer {
+      max-height: min(360px, calc(100vh - 32px));
+      overflow: auto;
+      border-color: rgba(99, 215, 199, 0.56);
+    }
+
+    .dfwr-note-popover.is-dragging,
+    .dfwr-area-draft.is-dragging {
+      user-select: none;
+    }
+
+    .dfwr-draft-drag-handle {
+      display: block;
+      width: 42px;
+      height: 6px;
+      margin: 0 auto 10px;
+      padding: 0;
+      cursor: grab;
+      pointer-events: auto;
+      background: rgba(247, 247, 242, 0.28);
+      border: 0;
+      border-radius: 999px;
+    }
+
+    .dfwr-draft-drag-handle:hover,
+    .dfwr-draft-drag-handle:focus-visible {
+      background: rgba(215, 255, 95, 0.62);
+    }
+
+    .dfwr-draft-drag-handle:active {
+      cursor: grabbing;
+    }
+
     .dfwr-area-draft {
       position: fixed;
       right: 16px;
@@ -1785,6 +2009,14 @@ function createStyleElement() {
       padding: 0;
     }
 
+    .dfwr-note-actions {
+      justify-content: flex-end;
+    }
+
+    .dfwr-note-actions .dfwr-button:first-child {
+      margin-right: auto;
+    }
+
     .dfwr-area-draft .dfwr-actions {
       padding: 0;
     }
@@ -1813,6 +2045,105 @@ function createStyleElement() {
       outline-offset: 1px;
     }
 
+    .dfwr-adjust-panel {
+      display: grid;
+      gap: 4px;
+      padding: 8px 10px;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: var(--df-review-radius-sm);
+      background: rgba(255, 255, 255, 0.04);
+    }
+
+    .dfwr-adjust-panel-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      min-width: 0;
+    }
+
+    .dfwr-adjust-panel-header .dfwr-adjust-help {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    .dfwr-adjust-panel.is-active {
+      border-color: rgba(215, 255, 95, 0.5);
+      background: var(--df-review-color-accent-soft);
+    }
+
+    .dfwr-adjust-help,
+    .dfwr-adjust-status {
+      margin: 0;
+      color: var(--df-review-color-text-muted);
+      font-size: var(--df-review-font-size-xs);
+      line-height: 1.35;
+    }
+
+    .dfwr-adjust-status {
+      color: var(--df-review-color-text);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+    }
+
+    .dfwr-adjust-toggle {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 34px;
+      height: 30px;
+      padding: 0;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: var(--df-review-radius-sm);
+      background: rgba(255, 255, 255, 0.04);
+      color: var(--df-review-color-text);
+      cursor: pointer;
+      font: inherit;
+      font-size: 14px;
+      font-weight: 800;
+      line-height: 1;
+    }
+
+    .dfwr-adjust-toggle:hover,
+    .dfwr-adjust-toggle:focus-visible,
+    .dfwr-adjust-toggle.is-active {
+      border-color: rgba(215, 255, 95, 0.68);
+      background: var(--df-review-color-accent-soft);
+      outline: none;
+    }
+
+    .dfwr-adjust-toggle svg {
+      width: 18px;
+      height: 18px;
+      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;
@@ -2033,16 +2364,6 @@ function createStyleElement() {
 }
 
 // src/core/review/format.ts
-function formatAreaDraftMeta(draft) {
-  const parts = [`viewport ${formatSize(draft.viewport)}`];
-  if (draft.selection) {
-    parts.push(`rect ${formatSelection(draft.selection.viewport)}`);
-  }
-  if (draft.marker) {
-    parts.push(`point ${formatPoint(draft.marker.viewport)}`);
-  }
-  return parts.join(" / ");
-}
 function formatNoteDraftMeta(draft) {
   const parts = [
     `viewport ${formatSize(draft.viewport)}`,
@@ -2108,17 +2429,29 @@ function formatAnchorMeta(anchor) {
 }
 
 // src/core/web.review.kit.view.ts
+var DEFAULT_ADJUSTMENT_LABEL = "Responsive CSS px adjustments";
 var WebReviewKitView = class {
   constructor(config) {
     this.config = config;
   }
+  clearDraftPreview() {
+    this.restoreDraftPreview();
+  }
   render(shadow, hiddenItemsStyle) {
     const state = this.state;
+    this.syncDraftPreview(
+      state.isOpen && state.mode === "element" ? state.noteDraft : void 0
+    );
     shadow.replaceChildren();
     shadow.append(createStyleElement());
     shadow.append(hiddenItemsStyle);
+    const hasDismissableDraft = Boolean(state.noteDraft || state.areaDraft);
     const shell = document.createElement("div");
-    shell.className = `dfwr-shell${state.isOpen ? " is-open" : ""}`;
+    shell.className = [
+      "dfwr-shell",
+      state.isOpen ? "is-open" : "",
+      hasDismissableDraft ? "has-dismissible-draft" : ""
+    ].filter(Boolean).join(" ");
     shell.setAttribute("aria-hidden", state.isOpen ? "false" : "true");
     if (this.config.options.ui?.panel !== false) {
       const panel = document.createElement("div");
@@ -2134,6 +2467,9 @@ var WebReviewKitView = class {
       shell.append(panel);
     }
     shell.append(this.createMarkerLayer());
+    if (state.isOpen && hasDismissableDraft) {
+      shell.append(this.createDraftCancelLayer());
+    }
     if (state.isOpen && (state.mode === "note" || state.mode === "element")) {
       shell.append(
         state.noteDraft ? this.createNotePopover(state.noteDraft) : state.mode === "element" ? this.createElementLayer() : this.createNoteLayer()
@@ -2153,6 +2489,294 @@ var WebReviewKitView = class {
   get state() {
     return this.config.getState();
   }
+  createDraftCancelLayer() {
+    const layer = document.createElement("div");
+    layer.className = "dfwr-draft-cancel-layer";
+    layer.setAttribute("aria-hidden", "true");
+    const cancel = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      this.config.actions.setModeState("idle");
+      this.config.actions.clearDrafts();
+      this.config.actions.setSelectingArea(false);
+      this.config.actions.render();
+    };
+    layer.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0) return;
+      cancel(event);
+    });
+    layer.addEventListener("click", cancel);
+    return layer;
+  }
+  getDraftAdjustmentMetrics(draft) {
+    const adjustment = draft.adjustment;
+    const x = adjustment?.x ?? 0;
+    const y = adjustment?.y ?? 0;
+    const scale = adjustment?.scale ?? 0;
+    const {
+      scale: viewportScale,
+      designWidth,
+      presetLabel
+    } = this.getDraftViewportScale(draft.viewport);
+    const selection = draft.selection ? toViewportSelection(draft.selection.viewport) : void 0;
+    const scaleCssDelta = scale * viewportScale;
+    const scaleFactor = selection && selection.width > 0 ? Math.max(
+      1 / selection.width,
+      (selection.width + scaleCssDelta) / selection.width
+    ) : 1;
+    return {
+      x,
+      y,
+      scale,
+      cssX: x * viewportScale,
+      cssY: y * viewportScale,
+      scaleFactor,
+      viewportScale,
+      designWidth,
+      presetLabel,
+      viewportWidth: draft.viewport.width
+    };
+  }
+  hasDraftAdjustment(draft) {
+    const metrics = this.getDraftAdjustmentMetrics(draft);
+    return metrics.x !== 0 || metrics.y !== 0 || metrics.scale !== 0;
+  }
+  getAdjustedDraftPoint(point, draft) {
+    const metrics = this.getDraftAdjustmentMetrics(draft);
+    return {
+      x: point.x + metrics.cssX,
+      y: point.y + metrics.cssY
+    };
+  }
+  getAdjustedDraftSelection(selection, draft) {
+    const metrics = this.getDraftAdjustmentMetrics(draft);
+    return {
+      ...selection,
+      left: selection.left + metrics.cssX,
+      top: selection.top + metrics.cssY,
+      width: selection.width * metrics.scaleFactor,
+      height: selection.height * metrics.scaleFactor
+    };
+  }
+  getDraftViewportScale(viewport) {
+    const preset = findReviewViewportPreset(
+      viewport,
+      this.config.options.viewports?.presets
+    );
+    const designWidth = typeof preset.designWidth === "number" && preset.designWidth > 0 ? preset.designWidth : viewport.width;
+    const scale = designWidth > 0 ? viewport.width / designWidth : 1;
+    return { scale, designWidth, presetLabel: preset.label };
+  }
+  getDraftComposerWidth(environment) {
+    const bounds = environment.overlayRect;
+    const margin = 12;
+    return Math.min(360, Math.max(240, bounds.width - margin * 2));
+  }
+  getClampedComposerPosition(position, environment, size, bounds = environment.overlayRect) {
+    const margin = 12;
+    const width = size?.width ?? this.getDraftComposerWidth(environment);
+    const height = size?.height ?? 236;
+    return {
+      x: clamp(
+        position.x,
+        bounds.left + margin,
+        bounds.left + bounds.width - width - margin
+      ),
+      y: clamp(
+        position.y,
+        bounds.top + margin,
+        bounds.top + bounds.height - height - margin
+      )
+    };
+  }
+  getHostComposerBounds() {
+    const root = document.documentElement;
+    return {
+      left: 0,
+      top: 0,
+      width: root.clientWidth || window.innerWidth,
+      height: root.clientHeight || window.innerHeight
+    };
+  }
+  getInitialDraftComposerPosition(selection, environment, size) {
+    const bounds = this.getHostComposerBounds();
+    const margin = 12;
+    const gap = 20;
+    if (!selection) {
+      return this.getClampedComposerPosition(
+        {
+          x: environment.overlayRect.left + margin,
+          y: environment.overlayRect.top + margin
+        },
+        environment,
+        size,
+        bounds
+      );
+    }
+    const preferredX = selection.left + selection.width + gap;
+    const maxX = bounds.left + bounds.width - size.width - margin;
+    const x = preferredX <= maxX ? preferredX : selection.left - size.width - gap;
+    return this.getClampedComposerPosition(
+      {
+        x,
+        y: selection.top
+      },
+      environment,
+      size,
+      bounds
+    );
+  }
+  getDraftComposerPosition({
+    selection,
+    environment,
+    composerPosition,
+    estimatedHeight
+  }) {
+    const width = this.getDraftComposerWidth(environment);
+    if (composerPosition) {
+      const clamped = this.getClampedComposerPosition(
+        composerPosition,
+        environment,
+        { width, height: estimatedHeight },
+        this.getHostComposerBounds()
+      );
+      return { width, left: clamped.x, top: clamped.y };
+    }
+    const position = this.getInitialDraftComposerPosition(selection, environment, {
+      width,
+      height: estimatedHeight
+    });
+    return { width, left: position.x, top: position.y };
+  }
+  getSelectionMqMetrics(selection, viewport) {
+    const { scale } = this.getDraftViewportScale(viewport);
+    const ratio = scale > 0 ? 1 / scale : 1;
+    return {
+      x: selection.left * ratio,
+      y: selection.top * ratio,
+      width: selection.width * ratio,
+      height: selection.height * ratio
+    };
+  }
+  formatSignedPx(value) {
+    if (value === 0) return "+0px";
+    return `${value > 0 ? "+" : ""}${value}px`;
+  }
+  formatRoundedPx(value) {
+    return `${Math.round(value)}px`;
+  }
+  getAdjustmentLabel() {
+    return this.config.options.adjustmentLabel?.trim() || DEFAULT_ADJUSTMENT_LABEL;
+  }
+  getSelectionMetricLines(selection, viewport) {
+    if (!selection) return ["area", "x none / y none", "w none / h none"];
+    const metrics = this.getSelectionMqMetrics(selection, viewport);
+    return [
+      "area",
+      `x ${this.formatRoundedPx(metrics.x)} / y ${this.formatRoundedPx(
+        metrics.y
+      )}`,
+      `w ${this.formatRoundedPx(metrics.width)} / h ${this.formatRoundedPx(
+        metrics.height
+      )}`
+    ];
+  }
+  getAreaDraftMetricSelection(draft) {
+    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 [
+      `x ${this.formatSignedPx(metrics.x)} / y ${this.formatSignedPx(
+        metrics.y
+      )}`,
+      `scale ${this.formatSignedPx(metrics.scale)}`
+    ];
+  }
+  withDraftAdjustmentComment(comment, draft) {
+    if (!this.hasDraftAdjustment(draft)) return comment;
+    const metrics = this.getDraftAdjustmentMetrics(draft);
+    const adjustment = [
+      `${this.getAdjustmentLabel()}: x ${this.formatSignedPx(
+        metrics.x
+      )}, y ${this.formatSignedPx(metrics.y)}, scale ${this.formatSignedPx(
+        metrics.scale
+      )}`,
+      `(${metrics.presetLabel} viewport, ${Math.round(
+        metrics.viewportWidth
+      )}/design ${Math.round(metrics.designWidth)})`
+    ].join(" ");
+    return `${comment.trim()}
+${adjustment}`;
+  }
+  getStyleableDraftElement(draft, environment) {
+    if (!draft.anchor) return void 0;
+    const element = resolveAnchorElement(draft.anchor, environment)?.element;
+    if (!element) return void 0;
+    if ("style" in element) return element;
+    return void 0;
+  }
+  syncDraftPreview(draft) {
+    const environment = this.config.getEnvironment();
+    if (!draft || !environment || !this.hasDraftAdjustment(draft)) {
+      this.restoreDraftPreview();
+      return;
+    }
+    const element = this.getStyleableDraftElement(draft, environment);
+    if (!element) {
+      this.restoreDraftPreview();
+      return;
+    }
+    if (this.draftPreview?.element !== element) {
+      this.restoreDraftPreview();
+    }
+    if (!this.draftPreview) {
+      const computedTransform = environment.window.getComputedStyle(element).transform;
+      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 : "")
+      };
+    }
+    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(" ");
+  }
+  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;
+    this.draftPreview = void 0;
+  }
+  toCssNumber(value) {
+    return Math.round(value * 1e3) / 1e3;
+  }
   createHeader() {
     const header = document.createElement("div");
     header.className = "dfwr-header";
@@ -2244,15 +2868,20 @@ var WebReviewKitView = class {
     const group = document.createElement("div");
     group.className = "dfwr-note-draft";
     if (!environment) return group;
-    const hostPoint = toHostPoint(draft.marker.viewport, environment);
+    const isElementDraft = this.state.mode === "element" && Boolean(draft.selection);
+    const hostPoint = toHostPoint(
+      isElementDraft ? this.getAdjustedDraftPoint(draft.marker.viewport, draft) : draft.marker.viewport,
+      environment
+    );
+    let selectionHighlight;
     if (draft.selection) {
-      group.append(
-        this.createSelectionHighlight(
-          toViewportSelection(draft.selection.viewport),
-          environment,
-          true
-        )
+      const selection = toViewportSelection(draft.selection.viewport);
+      selectionHighlight = this.createSelectionHighlight(
+        isElementDraft ? this.getAdjustedDraftSelection(selection, draft) : selection,
+        environment,
+        true
       );
+      group.append(selectionHighlight);
     }
     const pin = document.createElement("button");
     pin.className = "dfwr-note-pin";
@@ -2262,14 +2891,35 @@ var WebReviewKitView = class {
     pin.style.top = `${hostPoint.y}px`;
     const popover = document.createElement("div");
     const position = getPopoverPosition(hostPoint, environment);
-    popover.className = "dfwr-note-popover";
-    popover.style.left = `${position.left}px`;
-    popover.style.top = `${position.top}px`;
+    popover.className = `dfwr-note-popover${isElementDraft ? " is-composer" : ""}`;
+    if (isElementDraft) {
+      const selection = draft.selection ? toHostSelection(
+        this.getAdjustedDraftSelection(
+          toViewportSelection(draft.selection.viewport),
+          draft
+        ),
+        environment
+      ) : void 0;
+      const composer = this.getDraftComposerPosition({
+        selection,
+        environment,
+        composerPosition: draft.composerPosition,
+        estimatedHeight: 252
+      });
+      popover.style.left = `${composer.left}px`;
+      popover.style.top = `${composer.top}px`;
+      popover.style.width = `${composer.width}px`;
+    } else {
+      popover.style.left = `${position.left}px`;
+      popover.style.top = `${position.top}px`;
+    }
     const form = document.createElement("form");
     form.className = "dfwr-form";
-    const meta = document.createElement("div");
-    meta.className = "dfwr-item-date";
-    meta.textContent = formatNoteDraftMeta(draft);
+    const meta = isElementDraft ? void 0 : document.createElement("div");
+    if (meta) {
+      meta.className = "dfwr-item-date";
+      meta.textContent = formatNoteDraftMeta(draft);
+    }
     const textarea = document.createElement("textarea");
     textarea.className = "dfwr-textarea";
     textarea.placeholder = "Review comment";
@@ -2283,25 +2933,306 @@ var WebReviewKitView = class {
         comment: textarea.value
       });
     });
-    const actions = this.createFormActions("Save note", () => {
+    const saveDraft = () => {
       const comment = textarea.value.trim();
       if (!comment) return;
+      const currentDraft = this.state.noteDraft ?? draft;
       void this.config.actions.createItem({
         kind: "note",
-        comment,
-        viewport: draft.viewport,
-        anchor: draft.anchor,
-        marker: draft.marker,
-        selection: draft.selection
+        comment: this.withDraftAdjustmentComment(comment, currentDraft),
+        viewport: currentDraft.viewport,
+        anchor: currentDraft.anchor,
+        marker: currentDraft.marker,
+        selection: currentDraft.selection
       });
-    });
-    form.append(meta, textarea, actions);
-    popover.append(form);
+    };
+    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,
+      textarea
+    }) : void 0;
+    const actions = this.createFormActions("Save note", saveDraft);
+    form.append(
+      ...meta ? [meta] : [],
+      ...adjustmentControls ? [adjustmentControls.panel] : [],
+      textarea,
+      actions
+    );
+    const dragHandle = isElementDraft ? this.createDraftDragHandle("Move DOM composer") : void 0;
+    popover.append(...dragHandle ? [dragHandle] : [], form);
     group.append(pin, popover);
-    this.attachDraftPinDrag(pin, popover, meta, textarea);
-    window.setTimeout(() => textarea.focus(), 0);
+    if (dragHandle) {
+      this.attachDraftComposerDrag(popover, dragHandle, (composerPosition) => {
+        const noteDraft = this.state.noteDraft ?? draft;
+        this.config.actions.setNoteDraft({
+          ...noteDraft,
+          composerPosition,
+          comment: textarea.value
+        });
+      });
+    }
+    this.attachDraftPinDrag(
+      pin,
+      isElementDraft ? void 0 : popover,
+      meta,
+      textarea
+    );
+    window.setTimeout(() => {
+      if (draft.adjustment?.isActive) {
+        adjustmentControls?.focusTarget.focus();
+        return;
+      }
+      textarea.focus();
+    }, 0);
     return group;
   }
+  createDraftDragHandle(label) {
+    const handle = document.createElement("button");
+    handle.className = "dfwr-draft-drag-handle";
+    handle.type = "button";
+    handle.setAttribute("aria-label", label);
+    return handle;
+  }
+  createIcon(paths) {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "2.4");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    paths.forEach((d) => {
+      const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      path.setAttribute("d", d);
+      svg.append(path);
+    });
+    return svg;
+  }
+  setAdjustmentToggleIcon(button, isActive) {
+    const paths = isActive ? ["M20 6 9 17l-5-5"] : [
+      "M12 2v20",
+      "M2 12h20",
+      "m9 5 3-3 3 3",
+      "m9 19 3 3 3-3",
+      "m5 9-3 3 3 3",
+      "m19 9 3 3-3 3"
+    ];
+    button.replaceChildren(this.createIcon(paths));
+  }
+  attachDraftComposerDrag(popover, handle, onMove) {
+    let isDragging = false;
+    let offsetX = 0;
+    let offsetY = 0;
+    const movePopover = (event) => {
+      const environment = this.config.getEnvironment();
+      if (!environment) return;
+      const position = this.getClampedComposerPosition(
+        {
+          x: event.clientX - offsetX,
+          y: event.clientY - offsetY
+        },
+        environment,
+        {
+          width: popover.offsetWidth,
+          height: popover.offsetHeight
+        },
+        this.getHostComposerBounds()
+      );
+      popover.style.left = `${position.x}px`;
+      popover.style.top = `${position.y}px`;
+      onMove(position);
+    };
+    handle.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0) return;
+      const rect = popover.getBoundingClientRect();
+      offsetX = event.clientX - rect.left;
+      offsetY = event.clientY - rect.top;
+      isDragging = true;
+      event.preventDefault();
+      event.stopPropagation();
+      handle.setPointerCapture(event.pointerId);
+      popover.classList.add("is-dragging");
+    });
+    handle.addEventListener("pointermove", (event) => {
+      if (!isDragging || !handle.hasPointerCapture(event.pointerId)) return;
+      event.preventDefault();
+      movePopover(event);
+    });
+    const stopDrag = (event) => {
+      if (!isDragging || !handle.hasPointerCapture(event.pointerId)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      isDragging = false;
+      handle.releasePointerCapture(event.pointerId);
+      popover.classList.remove("is-dragging");
+      movePopover(event);
+    };
+    handle.addEventListener("pointerup", stopDrag);
+    handle.addEventListener("pointercancel", stopDrag);
+  }
+  createAdjustmentControls({
+    draft,
+    hud,
+    pin,
+    popover,
+    selectionHighlight,
+    textarea
+  }) {
+    const panel = document.createElement("div");
+    panel.className = "dfwr-adjust-panel is-dom-adjust-panel";
+    const header = document.createElement("div");
+    header.className = "dfwr-adjust-panel-header";
+    const help = document.createElement("div");
+    help.className = "dfwr-adjust-help";
+    help.textContent = this.getAdjustmentLabel();
+    const adjust = document.createElement("button");
+    adjust.className = "dfwr-adjust-toggle";
+    adjust.type = "button";
+    adjust.title = "Adjust DOM element with keyboard arrows";
+    adjust.setAttribute("aria-label", "Adjust DOM element with keyboard arrows");
+    const xyStatus = document.createElement("div");
+    xyStatus.className = "dfwr-adjust-status";
+    const scaleStatus = document.createElement("div");
+    scaleStatus.className = "dfwr-adjust-status";
+    const syncControls = (nextDraft) => {
+      const isActive = nextDraft.adjustment?.isActive === true;
+      panel.classList.toggle("is-active", isActive);
+      adjust.classList.toggle("is-active", isActive);
+      adjust.setAttribute("aria-pressed", isActive ? "true" : "false");
+      this.setAdjustmentToggleIcon(adjust, isActive);
+      adjust.title = isActive ? "Finish DOM adjustment" : "Adjust DOM element with keyboard arrows";
+      adjust.setAttribute(
+        "aria-label",
+        isActive ? "Finish DOM adjustment" : "Adjust DOM element with keyboard arrows"
+      );
+      const [xyLine, scaleLine] = this.getDraftAdjustmentMetricLines(nextDraft);
+      xyStatus.textContent = xyLine;
+      scaleStatus.textContent = scaleLine;
+      this.syncDraftAdjustmentUi({
+        draft: nextDraft,
+        hud,
+        pin,
+        selectionHighlight
+      });
+    };
+    const updateDraft = (updater) => {
+      const currentDraft = this.state.noteDraft ?? draft;
+      const nextDraft = updater(currentDraft);
+      this.config.actions.setNoteDraft({
+        ...nextDraft,
+        comment: textarea.value
+      });
+      syncControls(nextDraft);
+    };
+    adjust.addEventListener("click", () => {
+      updateDraft((currentDraft) => ({
+        ...currentDraft,
+        adjustment: {
+          x: currentDraft.adjustment?.x ?? 0,
+          y: currentDraft.adjustment?.y ?? 0,
+          scale: currentDraft.adjustment?.scale ?? 0,
+          isActive: currentDraft.adjustment?.isActive !== true
+        }
+      }));
+      adjust.focus();
+    });
+    popover.addEventListener("keydown", (event) => {
+      const currentDraft = this.state.noteDraft ?? draft;
+      if (currentDraft.adjustment?.isActive !== true) return;
+      const keyDelta = this.getAdjustmentKeyDelta(event);
+      if (!keyDelta) return;
+      event.preventDefault();
+      event.stopPropagation();
+      updateDraft((activeDraft) => ({
+        ...activeDraft,
+        adjustment: {
+          x: (activeDraft.adjustment?.x ?? 0) + keyDelta.x,
+          y: (activeDraft.adjustment?.y ?? 0) + keyDelta.y,
+          scale: (activeDraft.adjustment?.scale ?? 0) + keyDelta.scale,
+          isActive: true
+        }
+      }));
+    });
+    header.append(help, adjust);
+    panel.append(header, xyStatus, scaleStatus);
+    syncControls(draft);
+    return {
+      panel,
+      focusTarget: adjust
+    };
+  }
+  getAdjustmentKeyDelta(event) {
+    const step = event.shiftKey ? 10 : 1;
+    if (event.key === "ArrowLeft") return { x: -step, y: 0, scale: 0 };
+    if (event.key === "ArrowRight") return { x: step, y: 0, scale: 0 };
+    if (event.key === "ArrowUp") return { x: 0, y: -step, scale: 0 };
+    if (event.key === "ArrowDown") return { x: 0, y: step, scale: 0 };
+    if (event.key.toLowerCase() === "w") return { x: 0, y: 0, scale: step };
+    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
+  }) {
+    const environment = this.config.getEnvironment();
+    if (!environment) return;
+    const hostPoint = toHostPoint(
+      this.getAdjustedDraftPoint(draft.marker.viewport, draft),
+      environment
+    );
+    pin.style.left = `${hostPoint.x}px`;
+    pin.style.top = `${hostPoint.y}px`;
+    if (draft.selection && selectionHighlight) {
+      const rect = toHostSelection(
+        this.getAdjustedDraftSelection(
+          toViewportSelection(draft.selection.viewport),
+          draft
+        ),
+        environment
+      );
+      selectionHighlight.style.left = `${rect.left}px`;
+      selectionHighlight.style.top = `${rect.top}px`;
+      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";
@@ -2313,14 +3244,20 @@ var WebReviewKitView = class {
       form.append(empty);
       return form;
     }
-    const meta = document.createElement("div");
-    meta.className = "dfwr-item-date";
-    meta.textContent = formatAreaDraftMeta(areaDraft);
-    form.append(meta);
+    form.append(this.createAreaMetricsPanel(areaDraft));
     const textarea = document.createElement("textarea");
     textarea.className = "dfwr-textarea";
     textarea.placeholder = "Area comment";
     textarea.rows = 4;
+    textarea.value = areaDraft.comment ?? "";
+    textarea.addEventListener("input", () => {
+      const draft = this.state.areaDraft;
+      if (!draft) return;
+      this.config.actions.setAreaDraft({
+        ...draft,
+        comment: textarea.value
+      });
+    });
     const actions = this.createFormActions("Save area", () => {
       const comment = textarea.value.trim();
       const draft = this.state.areaDraft;
@@ -2337,6 +3274,25 @@ var WebReviewKitView = class {
     form.append(textarea, actions);
     return form;
   }
+  createAreaMetricsPanel(draft) {
+    const panel = document.createElement("div");
+    panel.className = "dfwr-adjust-panel is-area-metrics-panel";
+    const help = document.createElement("div");
+    help.className = "dfwr-adjust-help";
+    const [labelLine, xyLine, sizeLine] = this.getSelectionMetricLines(
+      this.getAreaDraftMetricSelection(draft),
+      draft.viewport
+    );
+    help.textContent = labelLine;
+    const xyStatus = document.createElement("div");
+    xyStatus.className = "dfwr-adjust-status";
+    xyStatus.textContent = xyLine;
+    const sizeStatus = document.createElement("div");
+    sizeStatus.className = "dfwr-adjust-status";
+    sizeStatus.textContent = sizeLine;
+    panel.append(help, xyStatus, sizeStatus);
+    return panel;
+  }
   createAreaDraftOverlay(draft) {
     const layer = document.createElement("div");
     layer.className = "dfwr-area-preview-layer";
@@ -2365,23 +3321,37 @@ var WebReviewKitView = class {
   createAreaDraftPopover(draft) {
     const environment = this.config.getEnvironment();
     const popover = document.createElement("div");
-    popover.className = "dfwr-area-draft";
+    popover.className = "dfwr-area-draft is-composer";
     if (environment && draft.selection) {
       const selection = toHostSelection(
         toViewportSelection(draft.selection.viewport),
         environment
       );
-      const position = getAreaPopoverPosition(selection, environment);
-      popover.style.left = `${position.left}px`;
-      popover.style.top = `${position.top}px`;
+      const composer = this.getDraftComposerPosition({
+        selection,
+        environment,
+        composerPosition: draft.composerPosition,
+        estimatedHeight: 220
+      });
+      popover.style.left = `${composer.left}px`;
+      popover.style.top = `${composer.top}px`;
+      popover.style.width = `${composer.width}px`;
       popover.style.right = "auto";
     }
-    popover.append(this.createAreaForm());
+    const dragHandle = this.createDraftDragHandle("Move area composer");
+    popover.append(dragHandle, this.createAreaForm());
+    this.attachDraftComposerDrag(popover, dragHandle, (composerPosition) => {
+      const areaDraft = this.state.areaDraft ?? draft;
+      this.config.actions.setAreaDraft({
+        ...areaDraft,
+        composerPosition
+      });
+    });
     return popover;
   }
-  createFormActions(saveLabel, onSave) {
+  createFormActions(saveLabel, onSave, options) {
     const actions = document.createElement("div");
-    actions.className = "dfwr-actions";
+    actions.className = ["dfwr-actions", options?.className].filter(Boolean).join(" ");
     const save = document.createElement("button");
     save.className = "dfwr-button is-primary";
     save.type = "button";
@@ -2396,6 +3366,10 @@ var WebReviewKitView = class {
       this.config.actions.clearDrafts();
       this.config.actions.render();
     });
+    if (options?.beforeSave?.length || options?.className) {
+      actions.append(cancel, ...options.beforeSave ?? [], save);
+      return actions;
+    }
     actions.append(save, cancel);
     return actions;
   }
@@ -2600,11 +3574,13 @@ ${formatItemMeta(item)}`;
       if (!environment) return;
       const nextPoint = clampPoint(toTargetPoint(hostPoint, environment), environment);
       const nextHostPoint = toHostPoint(nextPoint, environment);
-      const position = getPopoverPosition(nextHostPoint, environment);
       pin.style.left = `${nextHostPoint.x}px`;
       pin.style.top = `${nextHostPoint.y}px`;
-      popover.style.left = `${position.left}px`;
-      popover.style.top = `${position.top}px`;
+      if (popover) {
+        const position = getPopoverPosition(nextHostPoint, environment);
+        popover.style.left = `${position.left}px`;
+        popover.style.top = `${position.top}px`;
+      }
       const noteDraft = this.state.noteDraft;
       if (!noteDraft) return;
       const nextDraft = {
@@ -2616,7 +3592,9 @@ ${formatItemMeta(item)}`;
         comment: textarea.value
       };
       this.config.actions.setNoteDraft(nextDraft);
-      meta.textContent = formatNoteDraftMeta(nextDraft);
+      if (meta) {
+        meta.textContent = formatNoteDraftMeta(nextDraft);
+      }
     };
     pin.addEventListener("pointerdown", (event) => {
       if (event.button !== 0) return;
@@ -2770,6 +3748,13 @@ ${formatItemMeta(item)}`;
 
 // src/core/web.review.kit.app.ts
 var ROOT_ID = "df-web-review-kit-root";
+function 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" || tag === "SELECT" || element.isContentEditable === true;
+}
 function createWebReviewKit(options) {
   if (typeof window === "undefined" || typeof document === "undefined") {
     return createNoopController();
@@ -2802,7 +3787,7 @@ var WebReviewKitApp = class {
         event.stopPropagation();
         return;
       }
-      if (!isHotkey(event, this.hotkey)) return;
+      if (isEditableEventTarget(event) || !isHotkey(event, this.hotkey)) return;
       event.preventDefault();
       event.stopPropagation();
       this.toggle();
@@ -2842,6 +3827,9 @@ var WebReviewKitApp = class {
         setNoteDraft: (draft) => {
           this.noteDraft = draft;
         },
+        setAreaDraft: (draft) => {
+          this.areaDraft = draft;
+        },
         setSelectingArea: (isSelectingArea) => {
           this.isSelectingArea = isSelectingArea;
         },
@@ -2867,6 +3855,7 @@ var WebReviewKitApp = class {
     this.render();
   }
   destroy() {
+    this.view.clearDraftPreview();
     document.removeEventListener("keydown", this.handleKeyDown, true);
     window.removeEventListener("scroll", this.handleViewportChange, true);
     window.removeEventListener("resize", this.handleViewportChange);
@@ -3077,7 +4066,7 @@ var WebReviewKitApp = class {
       );
       const elementSelection = anchor ? getElementViewportSelection(anchor, environment) : void 0;
       const selection = elementSelection ?? getPointSelection(nextPoint);
-      const markerPoint = getSelectionCenter(selection);
+      const markerPoint = elementSelection ? { x: selection.left, y: selection.top } : getSelectionCenter(selection);
       const reviewSelection = elementSelection ? {
         viewport: toPublicSelection(elementSelection),
         relative: getRelativeSelection(