@designfever/web-review-kit 0.3.0 → 0.4.1

package/dist/index.cjs

@@ -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;
@@ -556,8 +558,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;
@@ -596,22 +598,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];
 }
@@ -621,50 +636,70 @@ 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 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 +709,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 +718,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 +830,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;
@@ -817,10 +958,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;
@@ -832,6 +1001,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);
 }
@@ -1292,6 +1493,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;
@@ -1785,6 +1999,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;
@@ -1806,6 +2054,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;
     }
@@ -1834,6 +2090,79 @@ 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-empty,
     .dfwr-error {
       margin: 0;
@@ -2054,16 +2383,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)}`,
@@ -2129,17 +2448,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");
@@ -2155,6 +2486,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()
@@ -2174,6 +2508,332 @@ 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);
+    });
+    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);
+  }
+  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 trimmedComment = comment.trim();
+    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 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 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;
+  }
+  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 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,
+        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)})`;
+    this.draftPreview.clone.style.transform = [translate, scale].filter(Boolean).join(" ");
+  }
+  restoreDraftPreview() {
+    if (!this.draftPreview) return;
+    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;
+  }
   createHeader() {
     const header = document.createElement("div");
     header.className = "dfwr-header";
@@ -2265,15 +2925,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";
@@ -2283,14 +2948,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";
@@ -2304,25 +2990,273 @@ 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;
+      if (!comment && !this.hasDraftAdjustment(currentDraft)) return;
       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 adjustmentControls = isElementDraft ? this.createAdjustmentControls({
+      draft,
+      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,
+    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,
+        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;
+  }
+  syncDraftAdjustmentUi({
+    draft,
+    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`;
+    }
+    this.syncDraftPreview(draft);
+  }
   createAreaForm() {
     const form = document.createElement("form");
     form.className = "dfwr-form";
@@ -2334,14 +3268,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;
@@ -2358,6 +3298,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";
@@ -2386,37 +3345,61 @@ 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";
     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();
     });
+    if (options?.beforeSave?.length || options?.className) {
+      actions.append(cancel, ...options.beforeSave ?? [], save);
+      return actions;
+    }
     actions.append(save, cancel);
     return actions;
   }
@@ -2621,11 +3604,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 = {
@@ -2637,7 +3622,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;
@@ -2870,6 +3857,9 @@ var WebReviewKitApp = class {
         setNoteDraft: (draft) => {
           this.noteDraft = draft;
         },
+        setAreaDraft: (draft) => {
+          this.areaDraft = draft;
+        },
         setSelectingArea: (isSelectingArea) => {
           this.isSelectingArea = isSelectingArea;
         },
@@ -2895,6 +3885,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);
@@ -3098,14 +4089,27 @@ 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 markerPoint = getSelectionCenter(selection);
+      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),
         relative: getRelativeSelection(
@@ -3123,7 +4127,8 @@ var WebReviewKitApp = class {
         anchor,
         marker,
         selection: reviewSelection,
-        comment
+        comment,
+        previewElement
       };
     });
     this.noteDraft = draft;