@designfever/web-review-kit 0.7.2 → 0.8.0

package/dist/index.cjs

@@ -30,6 +30,7 @@ __export(index_exports, {
   REVIEW_WORKFLOW_STATUS_OPTIONS: () => REVIEW_WORKFLOW_STATUS_OPTIONS,
   ReviewFigmaTokenError: () => ReviewFigmaTokenError,
   collectReviewFigmaReleaseSnapshot: () => collectReviewFigmaReleaseSnapshot,
+  createEndpointReviewFigmaImageStore: () => createEndpointReviewFigmaImageStore,
   createRemoteReviewFigmaImageStore: () => createRemoteReviewFigmaImageStore,
   createReviewFigmaFrameUrl: () => createReviewFigmaFrameUrl,
   createReviewFigmaImageStoreClient: () => createReviewFigmaImageStoreClient,
@@ -156,8 +157,8 @@ function localAdapter(options = {}) {
 function normalizeStoredReviewItem(value) {
   if (!value || typeof value !== "object") return void 0;
   const raw = value;
-  const kind = raw.kind === "text" ? "note" : raw.kind === "capture" ? "area" : raw.kind;
-  if (kind !== "note" && kind !== "area") return void 0;
+  const kind = raw.kind === "capture" ? "area" : raw.kind;
+  if (kind !== "dom" && kind !== "area") return void 0;
   const { screenshot: _screenshot, reviewNumber: _reviewNumber, ...item } = raw;
   if (kind === raw.kind && _screenshot === void 0 && _reviewNumber === void 0) {
     return raw;
@@ -332,6 +333,8 @@ function rowToReviewItem(row, options) {
   const routeKey = row.route_key || item.routeKey || item.normalizedPath || "/";
   const viewport = item.viewport ?? { width: 390, height: 720 };
   const now = (/* @__PURE__ */ new Date()).toISOString();
+  const kind = normalizeReviewItemKind(item);
+  if (!kind) return null;
   return {
     ...item,
     id: row.id,
@@ -340,7 +343,7 @@ function rowToReviewItem(row, options) {
     routeKey,
     pageUrl: item.pageUrl || toAbsoluteReviewUrl(routeKey),
     normalizedPath: item.normalizedPath || routeKey,
-    kind: item.kind === "area" ? "area" : "note",
+    kind,
     comment: item.comment || "",
     status,
     viewport,
@@ -357,6 +360,10 @@ function rowToReviewItem(row, options) {
     updatedAt: row.updated_at ?? item.updatedAt ?? now
   };
 }
+function normalizeReviewItemKind(item) {
+  if (item.kind === "area" || item.kind === "dom") return item.kind;
+  return null;
+}
 async function unwrapResponse(request, label) {
   const { data, error } = await request;
   if (error) {
@@ -534,8 +541,14 @@ function createReviewFigmaImageApiUrl({
 // src/figma/image.store.ts
 var DEFAULT_REVIEW_FIGMA_IMAGE_STORE_ENDPOINT = "/__dfwr/figma-images";
 function createReviewFigmaImageStoreClient(options = {}) {
+  return createEndpointReviewFigmaImageStore(options);
+}
+function createEndpointReviewFigmaImageStore(options = {}) {
   const endpoint = options.endpoint ?? DEFAULT_REVIEW_FIGMA_IMAGE_STORE_ENDPOINT;
-  const request = createReviewFigmaImageStoreRequest(endpoint, options.fetch);
+  const request = createReviewFigmaImageStoreRequest(
+    options.fetch,
+    options.headers
+  );
   return {
     listImages(target) {
       const url = `${endpoint}?target=${encodeURIComponent(
@@ -756,19 +769,27 @@ function getReviewFigmaImageMimeType(format) {
   if (format === "png") return "image/png";
   return "image/webp";
 }
-function createReviewFigmaImageStoreRequest(endpoint, fetchOption) {
+function createReviewFigmaImageStoreRequest(fetchOption, headersProvider) {
   return async (input, init = {}) => {
     const requestFetch = fetchOption ?? globalThis.fetch;
     if (!requestFetch) throw new Error("Figma image store requires fetch.");
     const figmaToken = init.figmaToken ?? "";
-    const { figmaToken: _figmaToken, ...requestInit } = init;
+    const {
+      figmaToken: _figmaToken,
+      headers: requestHeaders,
+      ...requestInit
+    } = init;
+    const headers = new Headers();
+    headers.set("Content-Type", "application/json");
+    if (figmaToken) headers.set("X-Figma-Token", figmaToken);
+    appendReviewFigmaImageStoreHeaders(
+      headers,
+      await readReviewFigmaImageStoreHeaders(headersProvider)
+    );
+    appendReviewFigmaImageStoreHeaders(headers, requestHeaders);
     const response = await requestFetch(input, {
       ...requestInit,
-      headers: {
-        "Content-Type": "application/json",
-        ...figmaToken ? { "X-Figma-Token": figmaToken } : {},
-        ...requestInit.headers ?? {}
-      }
+      headers
     });
     const text = await response.text();
     const body = text ? JSON.parse(text) : null;
@@ -779,6 +800,15 @@ function createReviewFigmaImageStoreRequest(endpoint, fetchOption) {
     return body;
   };
 }
+async function readReviewFigmaImageStoreHeaders(provider) {
+  return typeof provider === "function" ? provider() : provider;
+}
+function appendReviewFigmaImageStoreHeaders(target, source) {
+  if (!source) return;
+  new Headers(source).forEach((value, key) => {
+    target.set(key, value);
+  });
+}
 function readReviewFigmaImageToken(provider) {
   const token = typeof provider === "function" ? provider() : provider;
   return typeof token === "string" ? token.trim() : "";
@@ -1297,26 +1327,34 @@ function getPopoverBounds(environment) {
   }
   return environment.overlayRect;
 }
+function getEnvironmentScale(environment) {
+  const scaleX = typeof environment.scaleX === "number" && Number.isFinite(environment.scaleX) && environment.scaleX > 0 ? environment.scaleX : 1;
+  const scaleY = typeof environment.scaleY === "number" && Number.isFinite(environment.scaleY) && environment.scaleY > 0 ? environment.scaleY : 1;
+  return { scaleX, scaleY };
+}
 function toHostPoint(point, environment) {
   if (!environment) return point;
+  const { scaleX, scaleY } = getEnvironmentScale(environment);
   return {
-    x: point.x + environment.viewportRect.left,
-    y: point.y + environment.viewportRect.top
+    x: point.x * scaleX + environment.viewportRect.left,
+    y: point.y * scaleY + environment.viewportRect.top
   };
 }
 function toHostSelection(selection, environment) {
+  const { scaleX, scaleY } = getEnvironmentScale(environment);
   return {
-    left: selection.left + environment.viewportRect.left,
-    top: selection.top + environment.viewportRect.top,
-    width: selection.width,
-    height: selection.height
+    left: selection.left * scaleX + environment.viewportRect.left,
+    top: selection.top * scaleY + environment.viewportRect.top,
+    width: selection.width * scaleX,
+    height: selection.height * scaleY
   };
 }
 function toTargetPoint(point, environment) {
   if (!environment) return point;
+  const { scaleX, scaleY } = getEnvironmentScale(environment);
   return {
-    x: point.x - environment.viewportRect.left,
-    y: point.y - environment.viewportRect.top
+    x: (point.x - environment.viewportRect.left) / scaleX,
+    y: (point.y - environment.viewportRect.top) / scaleY
   };
 }
 function toTargetPointFromHostEvent(event, environment) {
@@ -1365,11 +1403,6 @@ var SEMANTIC_ANCHOR_ATTRIBUTES = [
   "name",
   "href"
 ];
-function getDomAnchor(selection, configuredAttribute = "data-qa-id", environment) {
-  const x = selection.left + selection.width / 2;
-  const y = selection.top + selection.height / 2;
-  return getDomAnchorFromPoint({ x, y }, configuredAttribute, environment);
-}
 function getDomAnchorFromPoint(point, configuredAttribute = "data-qa-id", environment) {
   const target = environment.document.elementFromPoint(point.x, point.y);
   if (!target) return void 0;
@@ -1919,6 +1952,34 @@ function createId() {
 }
 
 // src/core/hotkey.ts
+var HOTKEY_KEY_ALIASES = {
+  q: ["\u3142", "\u3143"],
+  w: ["\u3148", "\u3149"],
+  e: ["\u3137", "\u3138"],
+  r: ["\u3131", "\u3132"],
+  t: ["\u3145", "\u3146"],
+  y: ["\u315B"],
+  u: ["\u3155"],
+  i: ["\u3151"],
+  o: ["\u3150", "\u3152"],
+  p: ["\u3154", "\u3156"],
+  a: ["\u3141"],
+  s: ["\u3134"],
+  d: ["\u3147"],
+  f: ["\u3139"],
+  g: ["\u314E"],
+  h: ["\u3157"],
+  j: ["\u3153"],
+  k: ["\u314F"],
+  l: ["\u3163"],
+  z: ["\u314B"],
+  x: ["\u314C"],
+  c: ["\u314A"],
+  v: ["\u314D"],
+  b: ["\u3160"],
+  n: ["\u315C"],
+  m: ["\u3161"]
+};
 function isHotkey(event, hotkey) {
   const parts = hotkey.split("+").map((part) => part.trim().toLowerCase()).filter(Boolean);
   const key = parts.find(
@@ -1939,10 +2000,7 @@ function isHotkeyKey(event, key) {
   const normalizedKey = key.toLowerCase();
   if (event.key.toLowerCase() === normalizedKey) return true;
   if (getHotkeyCode(normalizedKey) === event.code) return true;
-  const aliases = {
-    q: ["\u3142", "\u3143"]
-  };
-  return aliases[normalizedKey]?.includes(event.key) ?? false;
+  return HOTKEY_KEY_ALIASES[normalizedKey]?.includes(event.key) ?? false;
 }
 function getHotkeyCode(key) {
   if (/^[a-z]$/.test(key)) return `Key${key.toUpperCase()}`;
@@ -1984,8 +2042,7 @@ var REVIEW_SCOPE_LABELS = {
   mobile: "Mobile",
   tablet: "Tablet",
   desktop: "Desktop",
-  wide: "Wide",
-  dom: "Element"
+  wide: "Wide"
 };
 var normalizeReviewItemScope = (value) => {
   if (value === "element") return "dom";
@@ -2031,7 +2088,6 @@ function getReviewItemScope(item, presets = DEFAULT_REVIEW_VIEWPORTS) {
 }
 function getReviewItemScopeLabel(item, presets = DEFAULT_REVIEW_VIEWPORTS) {
   const scope = getReviewItemScope(item, presets);
-  if (scope === "dom") return REVIEW_SCOPE_LABELS.dom;
   const preset = findReviewViewportPreset(item.viewport, presets);
   return preset.label || REVIEW_SCOPE_LABELS[scope];
 }
@@ -2073,7 +2129,7 @@ function normalizeReviewNumber(value) {
 function getBoundMarkerPoint(item, environment) {
   const marker = getItemMarker(item);
   if (!marker) return void 0;
-  if (item.kind !== "area" && item.anchor && marker.relative) {
+  if (item.anchor && marker.relative) {
     const resolved = resolveAnchorElement(item.anchor, environment);
     const element = resolved?.element;
     if (element) {
@@ -2121,27 +2177,25 @@ function getItemHighlightSelection(item, environment) {
       environment
     );
   }
-  return getVisibleHighlightSelection(
-    [
-      getAnchorHighlightSelection(item, environment),
-      getBoundSelection(item, environment),
-      getPointHighlightSelection(item, environment)
-    ],
-    environment
-  );
+  return void 0;
 }
 function getReviewItemHighlightMode(item) {
   if (isDomReviewItem(item)) return "dom";
-  if (item.kind === "area") return "area";
-  return "note";
+  return "area";
 }
 function getItemMarker(item) {
   if (item.marker) return item.marker;
   const selection = getItemSelection(item);
   if (!selection?.viewport) return void 0;
   return {
-    viewport: roundPoint(getSelectionCenter(selection.viewport)),
-    relative: selection.relative ? roundPoint(getSelectionCenter(selection.relative)) : void 0
+    viewport: roundPoint({
+      x: selection.viewport.x,
+      y: selection.viewport.y
+    }),
+    relative: selection.relative ? roundPoint({
+      x: selection.relative.x,
+      y: selection.relative.y
+    }) : void 0
   };
 }
 function getItemSelection(item) {
@@ -2160,17 +2214,20 @@ function getItemSelection(item) {
 function shouldShowMarkerForScope(scope, currentScope) {
   return scope === currentScope;
 }
-function createSelectionCenterMarker(selection, anchor, environment) {
-  const centerPoint = getSelectionCenter(selection);
+function createSelectionStartMarker(selection, anchor, environment) {
+  const startPoint = {
+    x: selection.left,
+    y: selection.top
+  };
   return {
-    viewport: roundPoint(centerPoint),
-    relative: anchor ? getRelativePoint(centerPoint, anchor, environment) : void 0
+    viewport: roundPoint(startPoint),
+    relative: anchor ? getRelativePoint(startPoint, anchor, environment) : void 0
   };
 }
 function getBoundSelection(item, environment) {
   const selection = getItemSelection(item);
   if (!selection?.viewport) return void 0;
-  if (item.kind !== "area" && item.anchor && selection.relative) {
+  if (item.anchor && selection.relative) {
     const resolved = resolveAnchorElement(item.anchor, environment);
     const element = resolved?.element;
     if (element) {
@@ -2232,7 +2289,7 @@ function getVisibleHighlightSelection(candidates, environment) {
   );
 }
 function isDomReviewItem(item) {
-  return item.scope === "dom" || item.kind === "note" && Boolean(item.anchor && getItemSelection(item));
+  return item.kind === "dom" || item.scope === "dom";
 }
 
 // src/core/scroll.ts
@@ -2329,6 +2386,117 @@ function getAdjustedDraftSelection(selection, draft, presets) {
   };
 }
 
+// src/core/draft.preview.ts
+var DraftPreviewController = class {
+  constructor(config) {
+    this.config = config;
+  }
+  clear() {
+    if (!this.snapshot) return;
+    const { element, clone, visibility } = this.snapshot;
+    clone.remove();
+    element.style.visibility = visibility;
+    this.snapshot = void 0;
+  }
+  sync(draft) {
+    const environment = this.config.getEnvironment();
+    if (!draft || !environment || !this.config.hasAdjustment(draft)) {
+      this.clear();
+      return;
+    }
+    const element = this.getStyleableDraftElement(draft, environment);
+    if (!element) {
+      this.clear();
+      return;
+    }
+    if (this.snapshot?.element !== element) {
+      this.clear();
+    }
+    if (!this.snapshot) {
+      const computedStyle = environment.window.getComputedStyle(element);
+      const clone = element.cloneNode(true);
+      removeDuplicateIds(clone);
+      copyComputedStyle(element, clone, environment);
+      positionDraftPreviewClone(clone, element, computedStyle);
+      environment.document.body?.appendChild(clone);
+      this.snapshot = {
+        element,
+        clone,
+        visibility: element.style.visibility
+      };
+      element.style.visibility = "hidden";
+    }
+    const metrics = this.config.getMetrics(draft);
+    const translate = `translate(${toCssNumber(metrics.cssX)}px, ${toCssNumber(
+      metrics.cssY
+    )}px)`;
+    const scale = metrics.scaleFactor === 1 ? "" : `scale(${toCssNumber(metrics.scaleFactor)})`;
+    this.snapshot.clone.style.transform = [translate, scale].filter(Boolean).join(" ");
+  }
+  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;
+  }
+};
+function 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 = `${toCssNumber(rect.left)}px`;
+  clone.style.top = `${toCssNumber(rect.top)}px`;
+  clone.style.right = "auto";
+  clone.style.bottom = "auto";
+  clone.style.width = `${toCssNumber(rect.width)}px`;
+  clone.style.height = `${toCssNumber(rect.height)}px`;
+  clone.style.maxWidth = "none";
+  clone.style.maxHeight = "none";
+  clone.style.margin = "0";
+  clone.style.boxSizing = "border-box";
+  clone.style.display = 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";
+}
+function getDraftPreviewDisplay(display) {
+  if (display === "inline" || display === "contents") return "inline-block";
+  return display || "block";
+}
+function 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)
+    );
+  }
+}
+function removeDuplicateIds(element) {
+  element.removeAttribute("id");
+  element.querySelectorAll("[id]").forEach((child) => {
+    child.removeAttribute("id");
+  });
+}
+function toCssNumber(value) {
+  return Math.round(value * 1e3) / 1e3;
+}
+
 // src/core/typography.tokens.ts
 var reviewTypographyTokens = `
     --df-review-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -2652,6 +2820,36 @@ function createStyleElement() {
       --dfwr-item-color-rgb: 255, 143, 97;
     }
 
+    .dfwr-item-target-highlight.is-scope-mobile,
+    .dfwr-item-target-label.is-scope-mobile {
+      --dfwr-item-color: #7cc7ff;
+      --dfwr-item-color-rgb: 124, 199, 255;
+    }
+
+    .dfwr-item-target-highlight.is-scope-tablet,
+    .dfwr-item-target-label.is-scope-tablet {
+      --dfwr-item-color: #63d7c7;
+      --dfwr-item-color-rgb: 99, 215, 199;
+    }
+
+    .dfwr-item-target-highlight.is-scope-desktop,
+    .dfwr-item-target-label.is-scope-desktop {
+      --dfwr-item-color: #f3b75f;
+      --dfwr-item-color-rgb: 243, 183, 95;
+    }
+
+    .dfwr-item-target-highlight.is-scope-wide,
+    .dfwr-item-target-label.is-scope-wide {
+      --dfwr-item-color: #c99cff;
+      --dfwr-item-color-rgb: 201, 156, 255;
+    }
+
+    .dfwr-item-target-highlight.is-scope-dom,
+    .dfwr-item-target-label.is-scope-dom {
+      --dfwr-item-color: #ff8f61;
+      --dfwr-item-color-rgb: 255, 143, 97;
+    }
+
     .dfwr-item-target-highlight {
       position: fixed;
       z-index: 2;
@@ -2660,7 +2858,6 @@ function createStyleElement() {
       background: rgba(var(--dfwr-item-color-rgb), 0.08);
       box-shadow:
         0 0 0 1px rgba(31, 36, 40, 0.78),
-        0 0 0 9999px rgba(0, 0, 0, 0.08),
         0 12px 30px rgba(0, 0, 0, 0.24);
       pointer-events: none;
     }
@@ -2744,89 +2941,6 @@ function createStyleElement() {
       border-style: dashed;
     }
 
-    .dfwr-bound-marker.is-note-callout,
-    .dfwr-bound-marker.is-note-callout.is-highlighted {
-      --dfwr-scope: #7cc7ff;
-      --dfwr-scope-rgb: 124, 199, 255;
-      min-width: 0;
-      width: 0;
-      height: 0;
-      padding: 0;
-      transform: none;
-      border: 0;
-      border-radius: 0;
-      background: transparent;
-      box-shadow: none;
-      color: var(--dfwr-scope);
-      animation: none;
-      overflow: visible;
-    }
-
-    .dfwr-bound-marker.is-note-callout::before {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 8px;
-      height: 8px;
-      transform: translate(-50%, -50%);
-      border: 2px solid #111820;
-      border-radius: var(--df-review-radius-pill);
-      background: var(--dfwr-scope);
-      box-shadow:
-        0 0 0 3px rgba(var(--dfwr-scope-rgb), 0.22),
-        0 6px 16px rgba(0, 0, 0, 0.28);
-    }
-
-    .dfwr-bound-marker.is-note-callout.is-highlighted::before {
-      animation: dfwr-note-dot-pulse 1000ms ease-in-out infinite;
-    }
-
-    .dfwr-bound-marker.is-note-callout .dfwr-bound-marker-icon {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 31px;
-      height: 2px;
-      transform: rotate(-42deg);
-      transform-origin: left center;
-      border-radius: var(--df-review-radius-pill);
-      background: currentColor;
-      opacity: 1;
-    }
-
-    .dfwr-bound-marker.is-note-callout .dfwr-bound-marker-icon::before,
-    .dfwr-bound-marker.is-note-callout .dfwr-bound-marker-icon::after {
-      display: none;
-    }
-
-    .dfwr-bound-marker.is-note-callout .dfwr-bound-marker-number {
-      position: absolute;
-      left: 24px;
-      top: -41px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 28px;
-      height: 20px;
-      padding: 0 7px;
-      border: 1px solid var(--dfwr-scope);
-      border-radius: 4px;
-      background: var(--dfwr-scope);
-      box-shadow:
-        0 0 0 3px rgba(var(--dfwr-scope-rgb), 0.18),
-        0 8px 18px rgba(0, 0, 0, 0.28);
-      color: #111820;
-      text-align: center;
-      line-height: 1;
-      white-space: nowrap;
-    }
-
-    .dfwr-bound-marker.is-note-callout.is-highlighted .dfwr-bound-marker-icon,
-    .dfwr-bound-marker.is-note-callout.is-highlighted .dfwr-bound-marker-number {
-      animation: dfwr-selected-blink 1000ms ease-in-out infinite;
-    }
-
     .dfwr-area-preview-layer .dfwr-bound-marker {
       border-color: #63d7c7;
       background: var(--df-review-color-panel);
@@ -2897,14 +3011,14 @@ function createStyleElement() {
       line-height: 1;
     }
 
-    .dfwr-note-draft {
+    .dfwr-dom-draft {
       position: fixed;
       inset: 0;
       z-index: 4;
       pointer-events: none;
     }
 
-    .dfwr-note-pin {
+    .dfwr-dom-pin {
       appearance: none;
       position: fixed;
       z-index: 5;
@@ -2922,11 +3036,11 @@ function createStyleElement() {
       pointer-events: auto;
     }
 
-    .dfwr-note-pin:active {
+    .dfwr-dom-pin:active {
       cursor: grabbing;
     }
 
-    .dfwr-note-popover {
+    .dfwr-dom-popover {
       position: fixed;
       z-index: 4;
       width: min(320px, calc(100vw - 24px));
@@ -2939,14 +3053,14 @@ function createStyleElement() {
       box-shadow: var(--df-review-shadow-popover);
     }
 
-    .dfwr-note-popover.is-composer,
+    .dfwr-dom-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-shell.is-docked-composer .dfwr-note-popover.is-docked-composer,
+    .dfwr-shell.is-docked-composer .dfwr-dom-popover.is-docked-composer,
     .dfwr-shell.is-docked-composer .dfwr-area-draft.is-docked-composer {
       position: relative;
       left: auto;
@@ -2960,7 +3074,7 @@ function createStyleElement() {
       min-height: 184px;
     }
 
-    .dfwr-note-popover.is-dragging,
+    .dfwr-dom-popover.is-dragging,
     .dfwr-area-draft.is-dragging {
       user-select: none;
     }
@@ -3004,7 +3118,7 @@ function createStyleElement() {
       box-shadow: var(--df-review-shadow-popover);
     }
 
-    .dfwr-note-popover .dfwr-actions {
+    .dfwr-dom-popover .dfwr-actions {
       padding: 0;
     }
 
@@ -3052,14 +3166,6 @@ function createStyleElement() {
       height: 18px;
     }
 
-    .dfwr-note-actions {
-      justify-content: flex-end;
-    }
-
-    .dfwr-note-actions .dfwr-button:first-child {
-      margin-right: auto;
-    }
-
     .dfwr-area-draft .dfwr-actions {
       padding: 0;
     }
@@ -3077,6 +3183,82 @@ function createStyleElement() {
       overflow-wrap: anywhere;
     }
 
+    .dfwr-attachment-queue {
+      display: grid;
+      gap: 8px;
+      min-width: 0;
+    }
+
+    .dfwr-attachment-label {
+      color: var(--df-review-color-text-muted);
+      font-size: var(--df-review-font-size-xs);
+      line-height: 1.35;
+    }
+
+    .dfwr-attachment-list {
+      display: grid;
+      gap: 8px;
+    }
+
+    .dfwr-attachment-item {
+      display: grid;
+      grid-template-columns: 42px minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      min-width: 0;
+      padding: 6px;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: var(--df-review-radius-sm);
+      background: rgba(255, 255, 255, 0.04);
+    }
+
+    .dfwr-attachment-thumb {
+      display: block;
+      width: 42px;
+      height: 42px;
+      object-fit: cover;
+      border-radius: var(--df-review-radius-xs);
+      background: var(--df-review-color-panel-strong);
+    }
+
+    .dfwr-attachment-thumb.is-file {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--df-review-color-text-muted);
+      font-size: var(--df-review-font-size-xs);
+      font-weight: var(--df-review-font-weight-emphasis);
+    }
+
+    .dfwr-attachment-name {
+      min-width: 0;
+      overflow: hidden;
+      color: var(--df-review-color-text);
+      font-size: var(--df-review-font-size-sm);
+      line-height: 1.35;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .dfwr-attachment-remove {
+      appearance: none;
+      min-height: 28px;
+      padding: 0 8px;
+      border: 1px solid var(--df-review-color-border-strong);
+      border-radius: var(--df-review-radius-sm);
+      color: var(--df-review-color-text-muted);
+      background: var(--df-review-color-control);
+      cursor: pointer;
+      font: inherit;
+      font-size: var(--df-review-font-size-xs);
+      line-height: 1;
+    }
+
+    .dfwr-attachment-remove:hover {
+      color: var(--df-review-color-text);
+      background: var(--df-review-color-control-hover);
+    }
+
     .dfwr-input,
     .dfwr-select,
     .dfwr-textarea {
@@ -3379,18 +3561,6 @@ function createStyleElement() {
       }
     }
 
-    @keyframes dfwr-note-dot-pulse {
-      0% {
-        transform: translate(-50%, -50%) scale(0.88);
-      }
-      45% {
-        transform: translate(-50%, -50%) scale(1.3);
-      }
-      100% {
-        transform: translate(-50%, -50%) scale(1);
-      }
-    }
-
     @keyframes dfwr-selected-blink {
       0%,
       100% {
@@ -3439,1071 +3609,848 @@ function createStyleElement() {
   return style;
 }
 
-// src/core/review/format.ts
-function formatNoteDraftMeta(draft) {
-  const parts = [
-    `viewport ${formatSize(draft.viewport)}`,
-    `point ${formatPoint(draft.marker.viewport)}`
-  ];
-  if (draft.anchor) {
-    parts.push(formatAnchorMeta(draft.anchor));
-  }
-  return parts.join(" / ");
-}
-function formatItemMeta(item) {
-  const parts = [formatDate(item.createdAt)];
-  const marker = getItemMarker(item);
-  const selection = getItemSelection(item);
-  if (item.viewport) {
-    parts.push(`viewport ${formatSize(item.viewport)}`);
-  }
-  if (marker) {
-    parts.push(`point ${formatPoint(marker.viewport)}`);
-  }
-  if (selection) {
-    parts.push(`rect ${formatSelection(selection.viewport)}`);
-  }
-  if (item.anchor) {
-    parts.push(formatAnchorMeta(item.anchor));
-  }
-  return parts.join(" / ");
-}
-function formatDate(value) {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return value;
-  return date.toLocaleString(void 0, {
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit"
+// src/core/draft.attachments.ts
+function attachDraftImagePasteQueue(textarea, options) {
+  textarea.addEventListener("paste", (event) => {
+    const imageFiles = getClipboardImageFiles(event.clipboardData);
+    if (imageFiles.length === 0) return;
+    event.preventDefault();
+    const text = event.clipboardData?.getData("text/plain");
+    if (text) {
+      insertTextAtTextareaSelection(textarea, text);
+      options.onCommentChange(textarea.value);
+    }
+    const attachments = imageFiles.map(
+      (file, index) => createDraftImageAttachment(file, index)
+    );
+    options.onAttachmentsChange([
+      ...options.getAttachments() ?? [],
+      ...attachments
+    ]);
+    options.onPasteComplete();
   });
 }
-function formatSize(size) {
-  return `${Math.round(size.width)}x${Math.round(size.height)}`;
-}
-function formatPoint(point) {
-  return `${Math.round(point.x)},${Math.round(point.y)}`;
+function createDraftAttachmentQueue(ownerDocument, attachments, onRemove) {
+  if (!attachments?.length) return void 0;
+  const queue = ownerDocument.createElement("div");
+  queue.className = "dfwr-attachment-queue";
+  const label = ownerDocument.createElement("div");
+  label.className = "dfwr-attachment-label";
+  label.textContent = `Attachments (${attachments.length})`;
+  const list = ownerDocument.createElement("div");
+  list.className = "dfwr-attachment-list";
+  attachments.forEach((attachment) => {
+    const item = ownerDocument.createElement("div");
+    item.className = "dfwr-attachment-item";
+    const preview = createDraftAttachmentPreview(ownerDocument, attachment);
+    const name = ownerDocument.createElement("div");
+    name.className = "dfwr-attachment-name";
+    name.textContent = attachment.name;
+    name.title = attachment.name;
+    const remove = ownerDocument.createElement("button");
+    remove.className = "dfwr-attachment-remove";
+    remove.type = "button";
+    remove.textContent = "Remove";
+    remove.setAttribute("aria-label", `Remove ${attachment.name}`);
+    remove.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      onRemove(attachment.id);
+    });
+    item.append(preview, name, remove);
+    list.append(item);
+  });
+  queue.append(label, list);
+  return queue;
+}
+function removeDraftAttachment(attachments, attachmentId) {
+  if (!attachments?.length) return [];
+  const removed = attachments.find((attachment) => attachment.id === attachmentId);
+  if (removed?.previewUrl) {
+    URL.revokeObjectURL(removed.previewUrl);
+  }
+  return attachments.filter((attachment) => attachment.id !== attachmentId);
+}
+function getClipboardImageFiles(data) {
+  if (!data) return [];
+  const itemFiles = Array.from(data.items).filter((item) => item.kind === "file" && item.type.startsWith("image/")).map((item) => item.getAsFile()).filter((file) => Boolean(file));
+  if (itemFiles.length > 0) return itemFiles;
+  return Array.from(data.files).filter((file) => file.type.startsWith("image/"));
+}
+function createDraftImageAttachment(file, index) {
+  const mime = file.type || "image/png";
+  const name = file.name || `pasted-image-${Date.now()}-${index + 1}${getImageExtension(mime)}`;
+  return {
+    id: createDraftAttachmentId(),
+    file,
+    name,
+    mime,
+    size: file.size,
+    kind: "image",
+    previewUrl: URL.createObjectURL(file),
+    metadata: { source: "paste" }
+  };
 }
-function formatSelection(selection) {
-  return [
-    Math.round(selection.x),
-    Math.round(selection.y),
-    Math.round(selection.width),
-    Math.round(selection.height)
-  ].join(",");
+function createDraftAttachmentId() {
+  return window.crypto?.randomUUID?.() ?? `draft-attachment-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+function getImageExtension(mime) {
+  if (mime === "image/jpeg") return ".jpg";
+  if (mime === "image/gif") return ".gif";
+  if (mime === "image/webp") return ".webp";
+  if (mime === "image/svg+xml") return ".svg";
+  return ".png";
+}
+function insertTextAtTextareaSelection(textarea, text) {
+  const start = textarea.selectionStart ?? textarea.value.length;
+  const end = textarea.selectionEnd ?? start;
+  textarea.value = [
+    textarea.value.slice(0, start),
+    text,
+    textarea.value.slice(end)
+  ].join("");
+  const nextSelection = start + text.length;
+  textarea.setSelectionRange(nextSelection, nextSelection);
+}
+function createDraftAttachmentPreview(ownerDocument, attachment) {
+  if (attachment.previewUrl && attachment.mime.startsWith("image/")) {
+    const image = ownerDocument.createElement("img");
+    image.className = "dfwr-attachment-thumb";
+    image.src = attachment.previewUrl;
+    image.alt = "";
+    image.decoding = "async";
+    return image;
+  }
+  const fallback = ownerDocument.createElement("div");
+  fallback.className = "dfwr-attachment-thumb is-file";
+  fallback.textContent = "IMG";
+  return fallback;
+}
+
+// src/core/view/composer.position.ts
+var COMPOSER_MARGIN = 12;
+function getDraftComposerWidth(environment) {
+  const bounds = environment.overlayRect;
+  return Math.min(360, Math.max(240, bounds.width - COMPOSER_MARGIN * 2));
+}
+function getHostComposerBounds() {
+  const root = document.documentElement;
+  return {
+    left: 0,
+    top: 0,
+    width: root.clientWidth || window.innerWidth,
+    height: root.clientHeight || window.innerHeight
+  };
 }
-function formatAnchorMeta(anchor) {
-  const parts = [`dom ${anchor.strategy}`];
-  if (typeof anchor.confidence === "number") {
-    parts.push(`${Math.round(anchor.confidence * 100)}%`);
-  }
-  const candidates = getAnchorCandidates(anchor);
-  if (candidates.length > 1) {
-    parts.push(`${candidates.length} candidates`);
-  }
-  return parts.join(" ");
+function getClampedComposerPosition(position, environment, size, bounds = environment.overlayRect) {
+  const width = size?.width ?? getDraftComposerWidth(environment);
+  const height = size?.height ?? 236;
+  return {
+    x: clamp(
+      position.x,
+      bounds.left + COMPOSER_MARGIN,
+      bounds.left + bounds.width - width - COMPOSER_MARGIN
+    ),
+    y: clamp(
+      position.y,
+      bounds.top + COMPOSER_MARGIN,
+      bounds.top + bounds.height - height - COMPOSER_MARGIN
+    )
+  };
 }
-
-// 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();
-    this.clearShellComposer();
-  }
-  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 shouldDockComposer = this.config.options.ui?.panel === false && hasDismissableDraft && Boolean(this.getShellComposerHost());
-    let dockedComposer;
-    const shell = document.createElement("div");
-    shell.className = [
-      "dfwr-shell",
-      state.isOpen ? "is-open" : "",
-      hasDismissableDraft && !shouldDockComposer ? "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");
-      panel.className = "dfwr-panel";
-      panel.setAttribute("role", "dialog");
-      panel.setAttribute("aria-label", "Web review kit");
-      panel.append(
-        this.createHeader(),
-        this.createToolbar(),
-        this.createBody(),
-        this.createList()
-      );
-      shell.append(panel);
-    }
-    shell.append(this.createMarkerLayer());
-    if (state.isOpen && hasDismissableDraft && !shouldDockComposer) {
-      shell.append(this.createDraftCancelLayer());
-    }
-    if (state.isOpen && (state.mode === "note" || state.mode === "element")) {
-      if (state.noteDraft) {
-        const noteDraft = this.createNotePopover(state.noteDraft, {
-          dockComposer: shouldDockComposer
-        });
-        shell.append(noteDraft.layer);
-        dockedComposer = noteDraft.composer;
-      } else {
-        shell.append(
-          state.mode === "element" ? this.createElementLayer() : this.createNoteLayer()
-        );
-      }
-    }
-    if (state.isOpen && state.mode === "area" && !state.areaDraft && !state.isSelectingArea) {
-      shell.append(this.createAreaLayer());
-    }
-    if (state.isOpen && state.mode === "area" && state.areaDraft && this.config.options.ui?.panel === false) {
-      if (state.areaDraft.selection) {
-        shell.append(this.createAreaDraftOverlay(state.areaDraft));
-      }
-      const areaComposer = this.createAreaDraftPopover(state.areaDraft, {
-        dockComposer: shouldDockComposer
-      });
-      if (shouldDockComposer) {
-        dockedComposer = areaComposer;
-      } else {
-        shell.append(areaComposer);
-      }
-    }
-    shadow.append(shell);
-    this.renderShellComposer(dockedComposer);
-  }
-  get state() {
-    return this.config.getState();
-  }
-  getShellComposerHost() {
-    const environment = this.config.getEnvironment();
-    if (this.config.options.ui?.panel !== false) return void 0;
-    return environment?.composerHost ?? void 0;
-  }
-  renderShellComposer(composer) {
-    const host = composer ? this.getShellComposerHost() : void 0;
-    if (!host || !composer) {
-      this.clearShellComposer();
-      return;
-    }
-    if (this.shellComposerHost && this.shellComposerHost !== host) {
-      this.clearShellComposer();
-    }
-    this.shellComposerHost = host;
-    host.dataset.hasDraftComposer = "true";
-    if (host.parentElement) {
-      host.parentElement.dataset.hasDraftComposer = "true";
-    }
-    const shell = document.createElement("div");
-    shell.className = "dfwr-shell is-open is-shell-draft is-docked-composer";
-    shell.append(composer);
-    host.replaceChildren(createStyleElement(), shell);
-  }
-  clearShellComposer() {
-    const host = this.shellComposerHost;
-    host?.replaceChildren();
-    if (host) {
-      delete host.dataset.hasDraftComposer;
-      delete host.parentElement?.dataset.hasDraftComposer;
-    }
-    this.shellComposerHost = void 0;
-  }
-  createDraftCancelLayer() {
-    const layer = document.createElement("div");
-    layer.className = "dfwr-draft-cancel-layer";
-    layer.setAttribute("aria-hidden", "true");
-    layer.addEventListener("pointerdown", (event) => {
-      if (event.button !== 0) return;
-      this.cancelDraft(event);
-    });
-    return layer;
-  }
-  cancelDraft(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();
-  }
-  // Draft adjustment geometry lives in draft.metrics.ts; these thin wrappers
-  // supply the configured viewport presets so call sites stay unchanged.
-  get viewportPresets() {
-    return this.config.options.viewports?.presets;
-  }
-  getDraftAdjustmentMetrics(draft) {
-    return getDraftAdjustmentMetrics(draft, this.viewportPresets);
-  }
-  hasDraftAdjustment(draft) {
-    return hasDraftAdjustment(draft, this.viewportPresets);
-  }
-  getAdjustedDraftPoint(point, draft) {
-    return getAdjustedDraftPoint(point, draft, this.viewportPresets);
-  }
-  getAdjustedDraftSelection(selection, draft) {
-    return getAdjustedDraftSelection(
-      selection,
-      draft,
-      this.viewportPresets
-    );
-  }
-  getDraftViewportScale(viewport) {
-    return getDraftViewportScale(viewport, this.viewportPresets);
-  }
-  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(
+function getInitialDraftComposerPosition(selection, environment, size) {
+  const bounds = getHostComposerBounds();
+  const gap = 20;
+  if (!selection) {
+    return getClampedComposerPosition(
       {
-        x,
-        y: selection.top
+        x: environment.overlayRect.left + COMPOSER_MARGIN,
+        y: environment.overlayRect.top + COMPOSER_MARGIN
       },
       environment,
       size,
       bounds
     );
   }
-  getDraftComposerPosition({
-    selection,
+  const preferredX = selection.left + selection.width + gap;
+  const maxX = bounds.left + bounds.width - size.width - COMPOSER_MARGIN;
+  const x = preferredX <= maxX ? preferredX : selection.left - size.width - gap;
+  return getClampedComposerPosition(
+    {
+      x,
+      y: selection.top
+    },
     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 };
+    size,
+    bounds
+  );
+}
+function getDraftComposerPosition({
+  selection,
+  environment,
+  composerPosition,
+  estimatedHeight
+}) {
+  const width = getDraftComposerWidth(environment);
+  if (composerPosition) {
+    const clamped = getClampedComposerPosition(
+      composerPosition,
+      environment,
+      { width, height: estimatedHeight },
+      getHostComposerBounds()
+    );
+    return { width, left: clamped.x, top: clamped.y };
   }
-  getSelectionMqMetrics(selection, viewport) {
-    const { scale } = this.getDraftViewportScale(viewport);
-    const ratio = scale > 0 ? 1 / scale : 1;
+  const position = getInitialDraftComposerPosition(selection, environment, {
+    width,
+    height: estimatedHeight
+  });
+  return { width, left: position.x, top: position.y };
+}
+function attachDraftComposerDrag({
+  getEnvironment,
+  popover,
+  handle,
+  onMove
+}) {
+  let isDragging = false;
+  let offsetX = 0;
+  let offsetY = 0;
+  const movePopover = (event) => {
+    const environment = getEnvironment();
+    if (!environment) return;
+    const position = getClampedComposerPosition(
+      {
+        x: event.clientX - offsetX,
+        y: event.clientY - offsetY
+      },
+      environment,
+      {
+        width: popover.offsetWidth,
+        height: popover.offsetHeight
+      },
+      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);
+}
+
+// src/core/view/icons.ts
+function 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;
+}
+function 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(createIcon(paths));
+}
+function createSpinner(className) {
+  const spinner = document.createElement("span");
+  spinner.className = className;
+  spinner.setAttribute("aria-hidden", "true");
+  return spinner;
+}
+
+// src/core/view/draft.capture.ts
+function canCaptureViewport(config) {
+  return Boolean(config.getEnvironment()?.captureViewport);
+}
+function getCaptureAreaDraft(draft) {
+  return {
+    viewport: draft.viewport,
+    marker: draft.marker,
+    selection: draft.selection
+  };
+}
+function getCaptureDomDraft(config, draft, isElementDraft) {
+  if (!isElementDraft) {
     return {
-      x: selection.left * ratio,
-      y: selection.top * ratio,
-      width: selection.width * ratio,
-      height: selection.height * ratio
+      viewport: draft.viewport,
+      marker: draft.marker,
+      selection: draft.selection
     };
   }
-  formatSignedPx(value) {
-    if (value === 0) return "+0px";
-    return `${value > 0 ? "+" : ""}${value}px`;
-  }
-  formatRoundedPx(value) {
-    return `${Math.round(value)}px`;
+  const presets = config.options.viewports?.presets;
+  const marker = {
+    ...draft.marker,
+    viewport: roundPoint(
+      getAdjustedDraftPoint(draft.marker.viewport, draft, presets)
+    )
+  };
+  const selection = draft.selection ? {
+    ...draft.selection,
+    viewport: toPublicSelection(
+      getAdjustedDraftSelection(
+        toViewportSelection(draft.selection.viewport),
+        draft,
+        presets
+      )
+    )
+  } : void 0;
+  return {
+    viewport: draft.viewport,
+    marker,
+    selection
+  };
+}
+function createDraftCaptureButton(config, draft, options) {
+  const button = document.createElement("button");
+  const state = config.getState();
+  const isCapturing = state.isCapturingViewport;
+  const canCapture = canCaptureViewport(config);
+  button.className = "dfwr-button";
+  button.type = "button";
+  button.disabled = !canCapture || isCapturing || state.isCreatingItem;
+  button.setAttribute("aria-busy", isCapturing ? "true" : "false");
+  button.title = canCapture ? "Capture current viewport" : "Viewport capture helper is not available";
+  if (isCapturing) {
+    button.append(createSpinner("dfwr-spinner"), "Capturing...");
+  } else {
+    button.textContent = "Capture";
+  }
+  button.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const currentState = config.getState();
+    if (!canCaptureViewport(config) || currentState.isCapturingViewport) {
+      return;
+    }
+    if (options.kind === "area") {
+      const areaDraft = currentState.areaDraft ?? draft;
+      const nextDraft2 = {
+        ...areaDraft,
+        comment: options.textarea.value
+      };
+      config.actions.setAreaDraft(nextDraft2);
+      void config.actions.captureAreaDraft(getCaptureAreaDraft(nextDraft2));
+      return;
+    }
+    const domDraft = currentState.domDraft ?? draft;
+    const nextDraft = {
+      ...domDraft,
+      comment: options.textarea.value
+    };
+    config.actions.setDomDraft(nextDraft);
+    void config.actions.captureDomDraft(
+      getCaptureDomDraft(config, nextDraft, options.isElementDraft)
+    );
+  });
+  return button;
+}
+
+// src/core/view/draft.text.ts
+var DEFAULT_ADJUSTMENT_LABEL = "Responsive CSS px adjustments";
+function getAdjustmentLabel(options) {
+  return options.adjustmentLabel?.trim() || DEFAULT_ADJUSTMENT_LABEL;
+}
+function formatSignedPx(value) {
+  if (value === 0) return "+0px";
+  return `${value > 0 ? "+" : ""}${value}px`;
+}
+function formatRoundedPx(value) {
+  return `${Math.round(value)}px`;
+}
+function getSelectionMqMetrics(selection, viewport, presets) {
+  const { scale } = getDraftViewportScale(viewport, presets);
+  const ratio = scale > 0 ? 1 / scale : 1;
+  return {
+    x: selection.left * ratio,
+    y: selection.top * ratio,
+    width: selection.width * ratio,
+    height: selection.height * ratio
+  };
+}
+function getSelectionMetricLines(selection, viewport, presets) {
+  if (!selection) return ["area", "x none / y none", "w none / h none"];
+  const metrics = getSelectionMqMetrics(selection, viewport, presets);
+  return [
+    "area",
+    `x ${formatRoundedPx(metrics.x)} / y ${formatRoundedPx(metrics.y)}`,
+    `w ${formatRoundedPx(metrics.width)} / h ${formatRoundedPx(
+      metrics.height
+    )}`
+  ];
+}
+function getAreaDraftMetricSelection(draft) {
+  if (!draft.selection) return void 0;
+  return toViewportSelection(draft.selection.viewport);
+}
+function getDraftAdjustmentMetricLines(draft, presets) {
+  const metrics = getDraftAdjustmentMetrics(draft, presets);
+  return [
+    `x ${formatSignedPx(metrics.x)} / y ${formatSignedPx(metrics.y)}`,
+    `scale ${formatSignedPx(metrics.scale)}`
+  ];
+}
+function withDraftAdjustmentComment(comment, draft, options) {
+  const presets = options.viewports?.presets;
+  if (!hasDraftAdjustment(draft, presets)) return comment;
+  const trimmedComment = comment.trim();
+  const metrics = getDraftAdjustmentMetrics(draft, presets);
+  const adjustment = [
+    `${getAdjustmentLabel(options)}: x ${formatSignedPx(
+      metrics.x
+    )}, y ${formatSignedPx(metrics.y)}, scale ${formatSignedPx(
+      metrics.scale
+    )}`,
+    `(${metrics.presetLabel} viewport, ${Math.round(
+      metrics.viewportWidth
+    )}/design ${Math.round(metrics.designWidth)})`
+  ].join(" ");
+  return trimmedComment ? `${trimmedComment}
+${adjustment}` : adjustment;
+}
+
+// src/core/view/form.widgets.ts
+function getAssigneeOption(options, assigneeId) {
+  if (!assigneeId) return void 0;
+  return options.assigneeOptions?.find(
+    (option) => option.value === assigneeId
+  );
+}
+function getAssigneeName(options, assigneeId) {
+  return getAssigneeOption(options, assigneeId)?.label;
+}
+function isTitleFieldEnabled(options) {
+  return options.fields?.title === true;
+}
+function createDraftTitleInput(value, onInput) {
+  const input = document.createElement("input");
+  input.className = "dfwr-input";
+  input.placeholder = "Title";
+  input.type = "text";
+  input.value = value ?? "";
+  input.addEventListener("input", () => onInput(input.value));
+  return input;
+}
+function createDraftAssigneeSelect(options, value, fallbackLabel, onChange) {
+  const assigneeOptions = options.assigneeOptions ?? [];
+  if (assigneeOptions.length === 0) return void 0;
+  const assigneeTitle = options.assigneeTitle?.trim() || "Assignee";
+  const select = document.createElement("select");
+  select.className = "dfwr-select";
+  const emptyOption = document.createElement("option");
+  emptyOption.value = "";
+  emptyOption.textContent = assigneeTitle;
+  select.append(emptyOption);
+  const hasUnknownAssignee = Boolean(value) && !assigneeOptions.some((option) => option.value === value);
+  if (hasUnknownAssignee && value) {
+    const option = document.createElement("option");
+    option.value = value;
+    option.textContent = fallbackLabel ?? value;
+    select.append(option);
+  }
+  assigneeOptions.forEach((assigneeOption) => {
+    const option = document.createElement("option");
+    option.value = assigneeOption.value;
+    option.textContent = assigneeOption.label;
+    select.append(option);
+  });
+  select.value = value ?? "";
+  select.addEventListener("change", () => {
+    onChange(select.value || null, getAssigneeName(options, select.value));
+  });
+  return select;
+}
+function getDraftFields(options, titleInput, textarea, assigneeSelect) {
+  const title = titleInput?.value.trim();
+  const comment = textarea.value.trim();
+  const assigneeId = assigneeSelect?.value.trim() || void 0;
+  return {
+    title: title || void 0,
+    comment,
+    assigneeId,
+    assigneeName: getAssigneeName(options, assigneeId)
+  };
+}
+function createFormActions({
+  saveLabel,
+  onSave,
+  onCancel,
+  isSaving,
+  beforeSave,
+  className,
+  leading
+}) {
+  const actions = document.createElement("div");
+  actions.className = ["dfwr-actions", className].filter(Boolean).join(" ");
+  const save = document.createElement("button");
+  save.className = "dfwr-button is-primary";
+  save.type = "button";
+  save.disabled = isSaving;
+  save.setAttribute("aria-busy", isSaving ? "true" : "false");
+  if (isSaving) {
+    save.append(createSpinner("dfwr-spinner"), "Saving...");
+  } else {
+    save.textContent = saveLabel;
+  }
+  save.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (save.disabled) return;
+    onSave();
+  });
+  const cancel = document.createElement("button");
+  cancel.className = "dfwr-button";
+  cancel.type = "button";
+  cancel.disabled = isSaving;
+  cancel.textContent = "Cancel";
+  cancel.addEventListener("click", (event) => {
+    onCancel(event);
+  });
+  if (leading?.length) {
+    actions.classList.add("has-leading");
+    const leadingGroup = document.createElement("div");
+    leadingGroup.className = "dfwr-actions-leading";
+    leadingGroup.append(...leading);
+    const primary = document.createElement("div");
+    primary.className = "dfwr-actions-primary";
+    primary.append(save, cancel);
+    actions.append(leadingGroup, primary);
+    return actions;
   }
-  getAdjustmentLabel() {
-    return this.config.options.adjustmentLabel?.trim() || DEFAULT_ADJUSTMENT_LABEL;
+  if (beforeSave?.length || className) {
+    actions.append(cancel, ...beforeSave ?? [], save);
+    return actions;
   }
-  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;
+  actions.append(save, cancel);
+  return actions;
+}
+function createDraftError(message) {
+  if (!message) return void 0;
+  const error = document.createElement("p");
+  error.className = "dfwr-form-error";
+  error.setAttribute("role", "alert");
+  error.textContent = message;
+  return error;
+}
+function createDraftDragHandle(label) {
+  const handle = document.createElement("button");
+  handle.className = "dfwr-draft-drag-handle";
+  handle.type = "button";
+  handle.setAttribute("aria-label", label);
+  return handle;
+}
+
+// src/core/review/format.ts
+function formatDomDraftMeta(draft) {
+  const parts = [
+    `viewport ${formatSize(draft.viewport)}`,
+    `point ${formatPoint(draft.marker.viewport)}`
+  ];
+  if (draft.anchor) {
+    parts.push(formatAnchorMeta(draft.anchor));
   }
-  getAssigneeOption(assigneeId) {
-    if (!assigneeId) return void 0;
-    return this.config.options.assigneeOptions?.find(
-      (option) => option.value === assigneeId
-    );
+  return parts.join(" / ");
+}
+function formatItemMeta(item) {
+  const parts = [formatDate(item.createdAt)];
+  const marker = getItemMarker(item);
+  const selection = getItemSelection(item);
+  if (item.viewport) {
+    parts.push(`viewport ${formatSize(item.viewport)}`);
   }
-  getAssigneeName(assigneeId) {
-    return this.getAssigneeOption(assigneeId)?.label;
+  if (marker) {
+    parts.push(`point ${formatPoint(marker.viewport)}`);
   }
-  createDraftTitleInput(value, onInput) {
-    const input = document.createElement("input");
-    input.className = "dfwr-input";
-    input.placeholder = "Title";
-    input.type = "text";
-    input.value = value ?? "";
-    input.addEventListener("input", () => onInput(input.value));
-    return input;
+  if (selection) {
+    parts.push(`rect ${formatSelection(selection.viewport)}`);
   }
-  isTitleFieldEnabled() {
-    return this.config.options.fields?.title === true;
-  }
-  createDraftAssigneeSelect(value, fallbackLabel, onChange) {
-    const assigneeOptions = this.config.options.assigneeOptions ?? [];
-    if (assigneeOptions.length === 0) return void 0;
-    const assigneeTitle = this.config.options.assigneeTitle?.trim() || "Assignee";
-    const select = document.createElement("select");
-    select.className = "dfwr-select";
-    const emptyOption = document.createElement("option");
-    emptyOption.value = "";
-    emptyOption.textContent = assigneeTitle;
-    select.append(emptyOption);
-    const hasUnknownAssignee = Boolean(value) && !assigneeOptions.some((option) => option.value === value);
-    if (hasUnknownAssignee && value) {
-      const option = document.createElement("option");
-      option.value = value;
-      option.textContent = fallbackLabel ?? value;
-      select.append(option);
-    }
-    assigneeOptions.forEach((assigneeOption) => {
-      const option = document.createElement("option");
-      option.value = assigneeOption.value;
-      option.textContent = assigneeOption.label;
-      select.append(option);
-    });
-    select.value = value ?? "";
-    select.addEventListener("change", () => {
-      onChange(select.value || null, this.getAssigneeName(select.value));
-    });
-    return select;
+  if (item.anchor) {
+    parts.push(formatAnchorMeta(item.anchor));
   }
-  getDraftFields(titleInput, textarea, assigneeSelect) {
-    const title = titleInput?.value.trim();
-    const comment = textarea.value.trim();
-    const assigneeId = assigneeSelect?.value.trim() || void 0;
-    return {
-      title: title || void 0,
-      comment,
-      assigneeId,
-      assigneeName: this.getAssigneeName(assigneeId)
-    };
+  return parts.join(" / ");
+}
+function formatDate(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString(void 0, {
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function formatSize(size) {
+  return `${Math.round(size.width)}x${Math.round(size.height)}`;
+}
+function formatPoint(point) {
+  return `${Math.round(point.x)},${Math.round(point.y)}`;
+}
+function formatSelection(selection) {
+  return [
+    Math.round(selection.x),
+    Math.round(selection.y),
+    Math.round(selection.width),
+    Math.round(selection.height)
+  ].join(",");
+}
+function formatAnchorMeta(anchor) {
+  const parts = [`dom ${anchor.strategy}`];
+  if (typeof anchor.confidence === "number") {
+    parts.push(`${Math.round(anchor.confidence * 100)}%`);
   }
-  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;
+  const candidates = getAnchorCandidates(anchor);
+  if (candidates.length > 1) {
+    parts.push(`${candidates.length} candidates`);
   }
-  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 parts.join(" ");
+}
+
+// src/core/view/markers.ts
+function createMarkerElement(itemId, hostPoint, label, scope, isBound, isHighlighted) {
+  const marker = document.createElement("div");
+  marker.className = [
+    "dfwr-bound-marker",
+    `is-scope-${scope}`,
+    isBound ? "is-bound" : "is-fallback",
+    isHighlighted ? "is-highlighted" : ""
+  ].filter(Boolean).join(" ");
+  marker.style.left = `${hostPoint.x}px`;
+  marker.style.top = `${hostPoint.y}px`;
+  marker.dataset.scope = scope;
+  if (itemId) {
+    marker.dataset.reviewItemId = itemId;
+  }
+  const iconElement = document.createElement("span");
+  iconElement.className = "dfwr-bound-marker-icon";
+  iconElement.setAttribute("aria-hidden", "true");
+  const labelElement = document.createElement("span");
+  labelElement.className = "dfwr-bound-marker-number";
+  labelElement.textContent = label;
+  marker.append(iconElement, labelElement);
+  return marker;
+}
+function createSelectionHighlight(selection, environment, isDraft) {
+  const rect = toHostSelection(selection, environment);
+  const highlight = document.createElement("div");
+  highlight.className = `dfwr-selection-highlight${isDraft ? " is-draft" : ""}`;
+  highlight.style.left = `${rect.left}px`;
+  highlight.style.top = `${rect.top}px`;
+  highlight.style.width = `${rect.width}px`;
+  highlight.style.height = `${rect.height}px`;
+  return highlight;
+}
+function createItemHighlightElements(selection, environment, item, label, scope, isBound, isHighlighted) {
+  const rect = toHostSelection(selection, environment);
+  const mode = getReviewItemHighlightMode(item);
+  const highlight = document.createElement("div");
+  highlight.className = [
+    "dfwr-item-target-highlight",
+    `is-mode-${mode}`,
+    `is-scope-${scope}`,
+    isBound ? "is-bound" : "is-fallback",
+    isHighlighted ? "is-highlighted" : ""
+  ].filter(Boolean).join(" ");
+  highlight.style.left = `${rect.left}px`;
+  highlight.style.top = `${rect.top}px`;
+  highlight.style.width = `${rect.width}px`;
+  highlight.style.height = `${rect.height}px`;
+  highlight.dataset.reviewItemId = item.id;
+  const labelElement = document.createElement("div");
+  labelElement.className = [
+    "dfwr-item-target-label",
+    `is-mode-${mode}`,
+    `is-scope-${scope}`,
+    isHighlighted ? "is-highlighted" : ""
+  ].filter(Boolean).join(" ");
+  labelElement.textContent = label;
+  labelElement.style.left = `${Math.max(4, rect.left)}px`;
+  labelElement.style.top = `${Math.max(4, rect.top - 24)}px`;
+  labelElement.dataset.reviewItemId = item.id;
+  return [highlight, labelElement];
+}
+function createMarkerLayer({
+  items,
+  highlightedItemId,
+  environment,
+  presets,
+  showCompactMarkers = true
+}) {
+  const layer = document.createElement("div");
+  layer.className = "dfwr-marker-layer";
+  if (!environment) return layer;
+  const currentScope = getReviewViewportScope(
+    getViewportSize(environment),
+    presets
+  );
+  getNumberedReviewItems(items, presets).forEach((numberedItem) => {
+    const { item, scope, displayLabel } = numberedItem;
+    if (!shouldShowMarkerForScope(scope, currentScope)) {
       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";
-    const title = document.createElement("div");
-    title.className = "dfwr-title";
-    title.textContent = "Review Kit";
-    const meta = document.createElement("div");
-    meta.className = "dfwr-meta";
-    meta.textContent = getRouteKey(this.config.getEnvironment());
-    const titleGroup = document.createElement("div");
-    titleGroup.append(title, meta);
-    const close = document.createElement("button");
-    close.className = "dfwr-icon-button";
-    close.type = "button";
-    close.textContent = "x";
-    close.setAttribute("aria-label", "Close");
-    close.addEventListener("click", () => this.config.actions.close());
-    header.append(titleGroup, close);
-    return header;
-  }
-  createToolbar() {
-    const toolbar = document.createElement("div");
-    toolbar.className = "dfwr-toolbar";
-    toolbar.append(
-      this.createToolbarButton("Note", this.state.mode === "note", () => {
-        const mode = this.state.mode;
-        this.config.actions.setModeState(mode === "note" ? "idle" : "note");
-        this.config.actions.clearDrafts();
-        this.config.actions.render();
-      }),
-      this.createToolbarButton("Element", this.state.mode === "element", () => {
-        const mode = this.state.mode;
-        this.config.actions.setModeState(
-          mode === "element" ? "idle" : "element"
+    const isHighlighted = item.id === highlightedItemId;
+    if (isHighlighted) {
+      const selection = getItemHighlightSelection(item, environment);
+      if (selection) {
+        layer.append(
+          ...createItemHighlightElements(
+            selection.viewport,
+            environment,
+            item,
+            displayLabel,
+            scope,
+            selection.isBound,
+            isHighlighted
+          )
         );
-        this.config.actions.clearDrafts();
-        this.config.actions.render();
-      }),
-      this.createToolbarButton(
-        this.state.isSelectingArea ? "Selecting" : "Area",
-        this.state.mode === "area",
-        () => {
-          const mode = this.state.mode;
-          this.config.actions.setModeState(mode === "area" ? "idle" : "area");
-          this.config.actions.clearDrafts();
-          this.config.actions.render();
-        }
-      ),
-      this.createToolbarButton("Refresh", false, () => {
-        void this.config.actions.reload();
-      })
-    );
-    return toolbar;
-  }
-  createToolbarButton(label, active, onClick) {
-    const button = document.createElement("button");
-    button.className = `dfwr-button${active ? " is-active" : ""}`;
-    button.type = "button";
-    button.textContent = label;
-    button.addEventListener("click", onClick);
-    return button;
-  }
-  createBody() {
-    const body = document.createElement("div");
-    body.className = "dfwr-body";
-    const state = this.state;
-    if (state.mode === "idle") {
-      const empty = document.createElement("p");
-      empty.className = "dfwr-empty";
-      empty.textContent = "Add a note or mark an area.";
-      body.append(empty);
-      return body;
-    }
-    if (state.mode === "note" || state.mode === "element") {
-      body.append(this.createNoteBody());
-      return body;
-    }
-    body.append(this.createAreaForm());
-    return body;
-  }
-  createNoteBody() {
-    const empty = document.createElement("p");
-    empty.className = "dfwr-empty";
-    empty.textContent = this.state.noteDraft ? "Write the note in the page box." : this.state.mode === "element" ? "Click an element to add QA." : "Click on the page to place a note.";
-    return empty;
-  }
-  // Builds the note draft layer: the on-page marker/highlight plus its composer
-  // popover. When dockComposer is set the composer renders into the side panel
-  // instead of floating next to the marker (used for the docked review mode).
-  createNotePopover(draft, options = {}) {
-    const environment = this.config.getEnvironment();
-    const group = document.createElement("div");
-    group.className = "dfwr-note-draft";
-    if (!environment) return { layer: group, composer: void 0 };
-    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) {
-      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";
-    pin.type = "button";
-    pin.setAttribute("aria-label", "Move note point");
-    pin.style.left = `${hostPoint.x}px`;
-    pin.style.top = `${hostPoint.y}px`;
-    const popover = document.createElement("div");
-    const position = getPopoverPosition(hostPoint, environment);
-    popover.className = [
-      "dfwr-note-popover",
-      isElementDraft ? "is-composer" : "",
-      options.dockComposer ? "is-docked-composer" : ""
-    ].filter(Boolean).join(" ");
-    if (options.dockComposer) {
-      popover.style.width = "100%";
-    } else 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 = isElementDraft ? void 0 : document.createElement("div");
-    if (meta) {
-      meta.className = "dfwr-item-date";
-      meta.textContent = formatNoteDraftMeta(draft);
-    }
-    const titleInput = this.isTitleFieldEnabled() ? this.createDraftTitleInput(draft.title, (title) => {
-      const noteDraft = this.state.noteDraft;
-      if (!noteDraft) return;
-      this.config.actions.setNoteDraft({
-        ...noteDraft,
-        title
-      });
-    }) : void 0;
-    const textarea = document.createElement("textarea");
-    textarea.className = "dfwr-textarea";
-    textarea.placeholder = "Review comment";
-    textarea.rows = 4;
-    textarea.value = draft.comment ?? "";
-    textarea.addEventListener("input", () => {
-      const noteDraft = this.state.noteDraft;
-      if (!noteDraft) return;
-      this.config.actions.setNoteDraft({
-        ...noteDraft,
-        comment: textarea.value
-      });
-    });
-    const assigneeSelect = this.createDraftAssigneeSelect(
-      draft.assigneeId,
-      draft.assigneeName,
-      (assigneeId, assigneeName) => {
-        const noteDraft = this.state.noteDraft;
-        if (!noteDraft) return;
-        this.config.actions.setNoteDraft({
-          ...noteDraft,
-          assigneeId,
-          assigneeName
-        });
+        return;
       }
-    );
-    const saveDraft = () => {
-      const currentDraft = this.state.noteDraft ?? draft;
-      const fields = this.getDraftFields(titleInput, textarea, assigneeSelect);
-      const comment = fields.comment;
-      if (!comment && !this.hasDraftAdjustment(currentDraft)) return;
-      void this.config.actions.createItem({
-        kind: "note",
-        title: fields.title,
-        comment: this.withDraftAdjustmentComment(comment, currentDraft),
-        assigneeId: fields.assigneeId,
-        assigneeName: fields.assigneeName,
-        viewport: currentDraft.viewport,
-        anchor: currentDraft.anchor,
-        marker: currentDraft.marker,
-        selection: currentDraft.selection
-      });
-    };
-    const adjustmentControls = isElementDraft ? this.createAdjustmentControls({
-      draft,
-      pin,
-      popover,
-      selectionHighlight,
-      textarea,
-      dockToggle: options.dockComposer
-    }) : void 0;
-    const actions = this.createFormActions("Save note", saveDraft, {
-      leading: adjustmentControls?.actionButton ? [adjustmentControls.actionButton] : void 0
-    });
-    const error = this.createDraftError();
-    form.append(
-      ...meta ? [meta] : [],
-      ...adjustmentControls ? [adjustmentControls.panel] : [],
-      ...titleInput ? [titleInput] : [],
-      textarea,
-      ...assigneeSelect ? [assigneeSelect] : [],
-      ...error ? [error] : [],
-      actions
-    );
-    const dragHandle = isElementDraft && !options.dockComposer ? this.createDraftDragHandle("Move DOM composer") : void 0;
-    popover.append(
-      ...dragHandle ? [dragHandle] : [],
-      form
-    );
-    group.append(pin);
-    if (!options.dockComposer) {
-      group.append(popover);
-    }
-    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 || options.dockComposer ? void 0 : popover,
-      meta,
-      textarea
-    );
-    if (!options.dockComposer) {
-      window.setTimeout(() => {
-        if (draft.adjustment?.isActive) {
-          adjustmentControls?.focusTarget.focus();
-          return;
-        }
-        textarea.focus();
-      }, 0);
+    if (!showCompactMarkers && !isHighlighted) {
+      return;
     }
-    return {
-      layer: group,
-      composer: options.dockComposer ? popover : void 0
-    };
-  }
-  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);
-  }
-  // Builds the element-adjustment controls (nudge the previewed element via
-  // arrow keys / buttons). Wires keyboard deltas to the draft transform and
-  // keeps the pin, popover, highlight and textarea in sync as the value changes.
-  createAdjustmentControls({
-    draft,
-    pin,
-    popover,
-    selectionHighlight,
-    textarea,
-    dockToggle
-  }) {
-    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);
-    if (!dockToggle) {
-      header.append(adjust);
+    const point = getBoundMarkerPoint(item, environment);
+    if (!point || !isPointInViewport(point.viewport, environment)) {
+      return;
     }
-    panel.append(header, xyStatus, scaleStatus);
-    syncControls(draft);
-    return {
-      panel,
-      focusTarget: adjust,
-      actionButton: dockToggle ? adjust : void 0
-    };
-  }
-  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
+    const hostPoint = toHostPoint(point.viewport, environment);
+    const marker = createMarkerElement(
+      item.id,
+      hostPoint,
+      displayLabel,
+      scope,
+      point.isBound,
+      isHighlighted
     );
-    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";
-    const areaDraft = this.state.areaDraft;
-    if (!areaDraft) {
-      const empty = document.createElement("p");
-      empty.className = "dfwr-empty";
-      empty.textContent = "Drag on the page to select an area.";
-      form.append(empty);
-      return form;
-    }
-    form.append(this.createAreaMetricsPanel(areaDraft));
-    const titleInput = this.isTitleFieldEnabled() ? this.createDraftTitleInput(areaDraft.title, (title) => {
-      const draft = this.state.areaDraft;
-      if (!draft) return;
-      this.config.actions.setAreaDraft({
+    marker.title = `${displayLabel} / ${item.comment}
+${formatItemMeta(item)}`;
+    layer.append(marker);
+  });
+  return layer;
+}
+
+// src/core/view/area.draft.ts
+function createAreaForm(context) {
+  const { config } = context;
+  const form = document.createElement("form");
+  form.className = "dfwr-form";
+  const areaDraft = config.getState().areaDraft;
+  if (!areaDraft) {
+    const empty = document.createElement("p");
+    empty.className = "dfwr-empty";
+    empty.textContent = "Drag on the page to select an area.";
+    form.append(empty);
+    return form;
+  }
+  form.append(createAreaMetricsPanel(context, areaDraft));
+  const titleInput = isTitleFieldEnabled(config.options) ? createDraftTitleInput(areaDraft.title, (title) => {
+    const draft = config.getState().areaDraft;
+    if (!draft) return;
+    config.actions.setAreaDraft({
+      ...draft,
+      title
+    });
+  }) : void 0;
+  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 = config.getState().areaDraft;
+    if (!draft) return;
+    config.actions.setAreaDraft({
+      ...draft,
+      comment: textarea.value
+    });
+  });
+  attachDraftImagePasteQueue(textarea, {
+    getAttachments: () => config.getState().areaDraft?.attachments ?? areaDraft.attachments,
+    onAttachmentsChange: (attachments) => {
+      const draft = config.getState().areaDraft ?? areaDraft;
+      config.actions.setAreaDraft({
+        ...draft,
+        comment: textarea.value,
+        attachments
+      });
+    },
+    onCommentChange: (comment) => {
+      const draft = config.getState().areaDraft ?? areaDraft;
+      config.actions.setAreaDraft({
         ...draft,
-        title
+        comment
       });
-    }) : void 0;
-    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;
+    },
+    onPasteComplete: () => config.actions.render()
+  });
+  const assigneeSelect = createDraftAssigneeSelect(
+    config.options,
+    areaDraft.assigneeId,
+    areaDraft.assigneeName,
+    (assigneeId, assigneeName) => {
+      const draft = config.getState().areaDraft;
       if (!draft) return;
-      this.config.actions.setAreaDraft({
+      config.actions.setAreaDraft({
         ...draft,
-        comment: textarea.value
+        assigneeId,
+        assigneeName
       });
-    });
-    const assigneeSelect = this.createDraftAssigneeSelect(
-      areaDraft.assigneeId,
-      areaDraft.assigneeName,
-      (assigneeId, assigneeName) => {
-        const draft = this.state.areaDraft;
-        if (!draft) return;
-        this.config.actions.setAreaDraft({
-          ...draft,
-          assigneeId,
-          assigneeName
-        });
-      }
-    );
-    const actions = this.createFormActions("Save area", () => {
-      const draft = this.state.areaDraft;
-      const fields = this.getDraftFields(titleInput, textarea, assigneeSelect);
+    }
+  );
+  const actions = createFormActions({
+    saveLabel: "Save area",
+    isSaving: config.getState().isCreatingItem,
+    onCancel: context.cancelDraft,
+    onSave: () => {
+      const draft = config.getState().areaDraft;
+      const fields = getDraftFields(
+        config.options,
+        titleInput,
+        textarea,
+        assigneeSelect
+      );
       const comment = fields.comment;
-      if (!comment || !draft) return;
-      void this.config.actions.createItem({
+      if (!comment && !draft?.attachments?.length || !draft) return;
+      void config.actions.createItem({
         kind: "area",
         title: fields.title,
         comment,
@@ -4512,603 +4459,1077 @@ ${adjustment}` : adjustment;
         viewport: draft.viewport,
         anchor: draft.anchor,
         marker: draft.marker,
-        selection: draft.selection
+        selection: draft.selection,
+        attachments: draft.attachments
       });
-    });
-    const error = this.createDraftError();
-    form.append(
-      ...titleInput ? [titleInput] : [],
-      textarea,
-      ...assigneeSelect ? [assigneeSelect] : [],
-      ...error ? [error] : [],
-      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";
-    const environment = this.config.getEnvironment();
-    if (!environment || !draft.selection) return layer;
-    const selection = toViewportSelection(draft.selection.viewport);
-    layer.append(this.createSelectionHighlight(selection, environment, true));
-    if (draft.marker) {
-      const hostPoint = toHostPoint(draft.marker.viewport, environment);
-      layer.append(
-        this.createMarkerElement(
-          void 0,
-          hostPoint,
-          "\u2022",
-          getReviewViewportScope(
-            draft.viewport,
-            this.config.options.viewports?.presets
-          ),
-          true,
-          true
-        )
+    },
+    leading: [
+      createDraftCaptureButton(config, areaDraft, {
+        kind: "area",
+        textarea
+      })
+    ]
+  });
+  const error = createDraftError(config.getState().draftError);
+  const attachmentQueue = createDraftAttachmentQueue(
+    document,
+    areaDraft.attachments,
+    (attachmentId) => {
+      const draft = config.getState().areaDraft ?? areaDraft;
+      const attachments = removeDraftAttachment(
+        draft.attachments,
+        attachmentId
       );
+      config.actions.setAreaDraft({
+        ...draft,
+        comment: textarea.value,
+        attachments: attachments.length > 0 ? attachments : void 0
+      });
+      config.actions.render();
     }
-    return layer;
+  );
+  form.append(
+    ...titleInput ? [titleInput] : [],
+    textarea,
+    ...attachmentQueue ? [attachmentQueue] : [],
+    ...assigneeSelect ? [assigneeSelect] : [],
+    ...error ? [error] : [],
+    actions
+  );
+  return form;
+}
+function createAreaMetricsPanel(context, draft) {
+  const panel = document.createElement("div");
+  panel.className = "dfwr-adjust-panel is-area-metrics-panel";
+  const [labelLine, xyLine, sizeLine] = getSelectionMetricLines(
+    getAreaDraftMetricSelection(draft),
+    draft.viewport,
+    context.config.options.viewports?.presets
+  );
+  const help = document.createElement("div");
+  help.className = "dfwr-adjust-help";
+  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;
+}
+function createAreaDraftOverlay(context, draft) {
+  const { config } = context;
+  const layer = document.createElement("div");
+  layer.className = "dfwr-area-preview-layer";
+  const environment = config.getEnvironment();
+  if (!environment || !draft.selection) return layer;
+  const selection = toViewportSelection(draft.selection.viewport);
+  layer.append(createSelectionHighlight(selection, environment, true));
+  if (draft.marker) {
+    const hostPoint = toHostPoint(draft.marker.viewport, environment);
+    layer.append(
+      createMarkerElement(
+        void 0,
+        hostPoint,
+        "\u2022",
+        getReviewViewportScope(
+          draft.viewport,
+          config.options.viewports?.presets
+        ),
+        true,
+        true
+      )
+    );
   }
-  createAreaDraftPopover(draft, options = {}) {
-    const environment = this.config.getEnvironment();
-    const popover = document.createElement("div");
-    popover.className = [
-      "dfwr-area-draft",
-      "is-composer",
-      options.dockComposer ? "is-docked-composer" : ""
-    ].filter(Boolean).join(" ");
-    if (options.dockComposer) {
-      popover.style.width = "100%";
-    } else if (environment && draft.selection) {
-      const selection = toHostSelection(
-        toViewportSelection(draft.selection.viewport),
-        environment
-      );
-      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";
-    }
-    const dragHandle = options.dockComposer ? void 0 : this.createDraftDragHandle("Move area composer");
-    popover.append(
-      ...dragHandle ? [dragHandle] : [],
-      this.createAreaForm()
+  return layer;
+}
+function createAreaDraftPopover(context, draft, options = {}) {
+  const { config } = context;
+  const environment = config.getEnvironment();
+  const popover = document.createElement("div");
+  popover.className = [
+    "dfwr-area-draft",
+    "is-composer",
+    options.dockComposer ? "is-docked-composer" : ""
+  ].filter(Boolean).join(" ");
+  if (options.dockComposer) {
+    popover.style.width = "100%";
+  } else if (environment && draft.selection) {
+    const selection = toHostSelection(
+      toViewportSelection(draft.selection.viewport),
+      environment
     );
-    if (dragHandle) {
-      this.attachDraftComposerDrag(popover, dragHandle, (composerPosition) => {
-        const areaDraft = this.state.areaDraft ?? draft;
-        this.config.actions.setAreaDraft({
+    const composer = 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";
+  }
+  const dragHandle = options.dockComposer ? void 0 : createDraftDragHandle("Move area composer");
+  popover.append(
+    ...dragHandle ? [dragHandle] : [],
+    createAreaForm(context)
+  );
+  if (dragHandle) {
+    attachDraftComposerDrag({
+      getEnvironment: () => config.getEnvironment(),
+      popover,
+      handle: dragHandle,
+      onMove: (composerPosition) => {
+        const areaDraft = config.getState().areaDraft ?? draft;
+        config.actions.setAreaDraft({
           ...areaDraft,
           composerPosition
         });
+      }
+    });
+  }
+  return popover;
+}
+
+// src/core/view/dom.draft.ts
+function createDomDraftLayer(context, draft, options = {}) {
+  const { config } = context;
+  const presets = config.options.viewports?.presets;
+  const environment = config.getEnvironment();
+  const group = document.createElement("div");
+  group.className = "dfwr-dom-draft";
+  if (!environment) return { layer: group, composer: void 0 };
+  const isElementDraft = config.getState().mode === "element" && Boolean(draft.selection);
+  const hostPoint = toHostPoint(
+    isElementDraft ? getAdjustedDraftPoint(draft.marker.viewport, draft, presets) : draft.marker.viewport,
+    environment
+  );
+  let selectionHighlight;
+  if (draft.selection) {
+    const selection = toViewportSelection(draft.selection.viewport);
+    selectionHighlight = createSelectionHighlight(
+      isElementDraft ? getAdjustedDraftSelection(selection, draft, presets) : selection,
+      environment,
+      true
+    );
+    group.append(selectionHighlight);
+  }
+  const pin = document.createElement("button");
+  pin.className = "dfwr-dom-pin";
+  pin.type = "button";
+  pin.setAttribute("aria-label", "Move DOM point");
+  pin.style.left = `${hostPoint.x}px`;
+  pin.style.top = `${hostPoint.y}px`;
+  const popover = document.createElement("div");
+  const position = getPopoverPosition(hostPoint, environment);
+  popover.className = [
+    "dfwr-dom-popover",
+    isElementDraft ? "is-composer" : "",
+    options.dockComposer ? "is-docked-composer" : ""
+  ].filter(Boolean).join(" ");
+  if (options.dockComposer) {
+    popover.style.width = "100%";
+  } else if (isElementDraft) {
+    const selection = draft.selection ? toHostSelection(
+      getAdjustedDraftSelection(
+        toViewportSelection(draft.selection.viewport),
+        draft,
+        presets
+      ),
+      environment
+    ) : void 0;
+    const composer = 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 = isElementDraft ? void 0 : document.createElement("div");
+  if (meta) {
+    meta.className = "dfwr-item-date";
+    meta.textContent = formatDomDraftMeta(draft);
+  }
+  const titleInput = isTitleFieldEnabled(config.options) ? createDraftTitleInput(draft.title, (title) => {
+    const domDraft = config.getState().domDraft;
+    if (!domDraft) return;
+    config.actions.setDomDraft({
+      ...domDraft,
+      title
+    });
+  }) : void 0;
+  const textarea = document.createElement("textarea");
+  textarea.className = "dfwr-textarea";
+  textarea.placeholder = "Review comment";
+  textarea.rows = 4;
+  textarea.value = draft.comment ?? "";
+  textarea.addEventListener("input", () => {
+    const domDraft = config.getState().domDraft;
+    if (!domDraft) return;
+    config.actions.setDomDraft({
+      ...domDraft,
+      comment: textarea.value
+    });
+  });
+  attachDraftImagePasteQueue(textarea, {
+    getAttachments: () => config.getState().domDraft?.attachments ?? draft.attachments,
+    onAttachmentsChange: (attachments) => {
+      const domDraft = config.getState().domDraft ?? draft;
+      config.actions.setDomDraft({
+        ...domDraft,
+        comment: textarea.value,
+        attachments
+      });
+    },
+    onCommentChange: (comment) => {
+      const domDraft = config.getState().domDraft ?? draft;
+      config.actions.setDomDraft({
+        ...domDraft,
+        comment
+      });
+    },
+    onPasteComplete: () => config.actions.render()
+  });
+  const assigneeSelect = createDraftAssigneeSelect(
+    config.options,
+    draft.assigneeId,
+    draft.assigneeName,
+    (assigneeId, assigneeName) => {
+      const domDraft = config.getState().domDraft;
+      if (!domDraft) return;
+      config.actions.setDomDraft({
+        ...domDraft,
+        assigneeId,
+        assigneeName
       });
     }
-    return popover;
-  }
-  createFormActions(saveLabel, onSave, options) {
-    const actions = document.createElement("div");
-    actions.className = ["dfwr-actions", options?.className].filter(Boolean).join(" ");
-    const isSaving = this.state.isCreatingItem;
-    const save = document.createElement("button");
-    save.className = "dfwr-button is-primary";
-    save.type = "button";
-    save.disabled = isSaving;
-    save.setAttribute("aria-busy", isSaving ? "true" : "false");
-    if (isSaving) {
-      save.append(this.createSpinner("dfwr-spinner"), "Saving...");
-    } else {
-      save.textContent = saveLabel;
-    }
-    save.addEventListener("click", (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (this.state.isCreatingItem) return;
-      onSave();
+  );
+  const saveDraft = () => {
+    const currentDraft = config.getState().domDraft ?? draft;
+    const fields = getDraftFields(
+      config.options,
+      titleInput,
+      textarea,
+      assigneeSelect
+    );
+    const comment = fields.comment;
+    const hasAttachments = Boolean(currentDraft.attachments?.length);
+    if (!comment && !hasDraftAdjustment(currentDraft, presets) && !hasAttachments) {
+      return;
+    }
+    void config.actions.createItem({
+      kind: "dom",
+      title: fields.title,
+      comment: withDraftAdjustmentComment(
+        comment,
+        currentDraft,
+        config.options
+      ),
+      assigneeId: fields.assigneeId,
+      assigneeName: fields.assigneeName,
+      viewport: currentDraft.viewport,
+      anchor: currentDraft.anchor,
+      marker: currentDraft.marker,
+      selection: currentDraft.selection,
+      attachments: currentDraft.attachments
     });
-    const cancel = document.createElement("button");
-    cancel.className = "dfwr-button";
-    cancel.type = "button";
-    cancel.disabled = isSaving;
-    cancel.textContent = "Cancel";
-    cancel.addEventListener("click", (event) => {
-      this.cancelDraft(event);
+  };
+  const adjustmentControls = isElementDraft ? createAdjustmentControls(context, {
+    draft,
+    pin,
+    popover,
+    selectionHighlight,
+    textarea,
+    dockToggle: options.dockComposer
+  }) : void 0;
+  const leadingActions = [
+    adjustmentControls?.actionButton,
+    createDraftCaptureButton(config, draft, {
+      kind: "dom",
+      isElementDraft,
+      textarea
+    })
+  ].filter((element) => Boolean(element));
+  const actions = createFormActions({
+    saveLabel: "Save DOM QA",
+    isSaving: config.getState().isCreatingItem,
+    onSave: saveDraft,
+    onCancel: context.cancelDraft,
+    leading: leadingActions.length > 0 ? leadingActions : void 0
+  });
+  const error = createDraftError(config.getState().draftError);
+  const attachmentQueue = createDraftAttachmentQueue(
+    document,
+    draft.attachments,
+    (attachmentId) => {
+      const domDraft = config.getState().domDraft ?? draft;
+      const attachments = removeDraftAttachment(
+        domDraft.attachments,
+        attachmentId
+      );
+      config.actions.setDomDraft({
+        ...domDraft,
+        comment: textarea.value,
+        attachments: attachments.length > 0 ? attachments : void 0
+      });
+      config.actions.render();
+    }
+  );
+  form.append(
+    ...meta ? [meta] : [],
+    ...adjustmentControls ? [adjustmentControls.panel] : [],
+    ...titleInput ? [titleInput] : [],
+    textarea,
+    ...attachmentQueue ? [attachmentQueue] : [],
+    ...assigneeSelect ? [assigneeSelect] : [],
+    ...error ? [error] : [],
+    actions
+  );
+  const dragHandle = isElementDraft && !options.dockComposer ? createDraftDragHandle("Move DOM composer") : void 0;
+  popover.append(...dragHandle ? [dragHandle] : [], form);
+  group.append(pin);
+  if (!options.dockComposer) {
+    group.append(popover);
+  }
+  if (dragHandle) {
+    attachDraftComposerDrag({
+      getEnvironment: () => config.getEnvironment(),
+      popover,
+      handle: dragHandle,
+      onMove: (composerPosition) => {
+        const domDraft = config.getState().domDraft ?? draft;
+        config.actions.setDomDraft({
+          ...domDraft,
+          composerPosition,
+          comment: textarea.value
+        });
+      }
     });
-    if (options?.leading?.length) {
-      actions.classList.add("has-leading");
-      const leading = document.createElement("div");
-      leading.className = "dfwr-actions-leading";
-      leading.append(...options.leading);
-      const primary = document.createElement("div");
-      primary.className = "dfwr-actions-primary";
-      primary.append(save, cancel);
-      actions.append(leading, primary);
-      return actions;
-    }
-    if (options?.beforeSave?.length || options?.className) {
-      actions.append(cancel, ...options.beforeSave ?? [], save);
-      return actions;
-    }
-    actions.append(save, cancel);
-    return actions;
   }
-  createSpinner(className) {
-    const spinner = document.createElement("span");
-    spinner.className = className;
-    spinner.setAttribute("aria-hidden", "true");
-    return spinner;
-  }
-  createDraftError() {
-    if (!this.state.draftError) return void 0;
-    const error = document.createElement("p");
-    error.className = "dfwr-form-error";
-    error.setAttribute("role", "alert");
-    error.textContent = this.state.draftError;
-    return error;
-  }
-  createList() {
-    const section = document.createElement("div");
-    section.className = "dfwr-list";
-    const state = this.state;
-    const heading = document.createElement("div");
-    heading.className = "dfwr-list-heading";
-    heading.textContent = `Review items (${state.items.length})`;
-    section.append(heading);
-    if (state.items.length === 0) {
-      const empty = document.createElement("p");
-      empty.className = "dfwr-empty";
-      empty.textContent = "No review items on this page.";
-      section.append(empty);
-      return section;
-    }
-    for (const numberedItem of getNumberedReviewItems(
-      state.items,
-      this.config.options.viewports?.presets
-    )) {
-      section.append(this.createListItem(numberedItem));
-    }
-    return section;
+  attachDraftPinDrag(context, {
+    pin,
+    popover: isElementDraft || options.dockComposer ? void 0 : popover,
+    meta,
+    textarea
+  });
+  if (!options.dockComposer) {
+    window.setTimeout(() => {
+      if (draft.adjustment?.isActive) {
+        adjustmentControls?.focusTarget.focus();
+        return;
+      }
+      textarea.focus();
+    }, 0);
   }
-  createListItem(numberedItem) {
-    const { item } = numberedItem;
-    const row = document.createElement("article");
-    row.className = "dfwr-item";
-    row.tabIndex = 0;
-    row.setAttribute("role", "button");
-    row.setAttribute(
+  return {
+    layer: group,
+    composer: options.dockComposer ? popover : void 0
+  };
+}
+function createAdjustmentControls(context, {
+  draft,
+  pin,
+  popover,
+  selectionHighlight,
+  textarea,
+  dockToggle
+}) {
+  const { config } = context;
+  const presets = config.options.viewports?.presets;
+  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 = getAdjustmentLabel(config.options);
+  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");
+    setAdjustmentToggleIcon(adjust, isActive);
+    adjust.title = isActive ? "Finish DOM adjustment" : "Adjust DOM element with keyboard arrows";
+    adjust.setAttribute(
       "aria-label",
-      `Restore review item: ${item.title ?? item.comment}`
+      isActive ? "Finish DOM adjustment" : "Adjust DOM element with keyboard arrows"
+    );
+    const [xyLine, scaleLine] = getDraftAdjustmentMetricLines(
+      nextDraft,
+      presets
     );
-    row.addEventListener("click", () => {
-      void this.config.actions.restoreItem(item);
+    xyStatus.textContent = xyLine;
+    scaleStatus.textContent = scaleLine;
+    syncDraftAdjustmentUi(context, {
+      draft: nextDraft,
+      pin,
+      selectionHighlight
     });
-    row.addEventListener("keydown", (event) => {
-      if (event.key !== "Enter" && event.key !== " ") return;
-      event.preventDefault();
-      void this.config.actions.restoreItem(item);
+  };
+  const updateDraft = (updater) => {
+    const currentDraft = config.getState().domDraft ?? draft;
+    const nextDraft = updater(currentDraft);
+    config.actions.setDomDraft({
+      ...nextDraft,
+      comment: textarea.value
     });
-    const body = document.createElement("div");
-    body.className = "dfwr-item-body";
-    const badges = document.createElement("div");
-    badges.className = "dfwr-item-badges";
-    const scope = document.createElement("div");
-    scope.className = `dfwr-item-scope is-scope-${numberedItem.scope}`;
-    scope.textContent = numberedItem.displayLabel;
-    const kind = document.createElement("div");
-    kind.className = "dfwr-item-kind";
-    kind.textContent = item.kind;
-    badges.append(scope, kind);
-    const title = this.isTitleFieldEnabled() ? item.title?.trim() : "";
-    const titleElement = title ? document.createElement("strong") : void 0;
-    if (title && titleElement) {
-      titleElement.className = "dfwr-item-title";
-      titleElement.textContent = title;
-    }
-    const comment = document.createElement("p");
-    comment.className = `dfwr-item-comment${title ? "" : " is-primary"}`;
-    comment.textContent = item.comment;
-    const date = document.createElement("time");
-    date.className = "dfwr-item-date";
-    date.dateTime = item.createdAt;
-    date.textContent = formatItemMeta(item);
-    body.append(badges, ...titleElement ? [titleElement] : [], comment, date);
-    const actions = document.createElement("div");
-    actions.className = "dfwr-item-actions";
-    actions.addEventListener("click", (event) => event.stopPropagation());
-    actions.addEventListener("keydown", (event) => event.stopPropagation());
-    const remove = document.createElement("button");
-    remove.className = "dfwr-icon-button";
-    remove.type = "button";
-    remove.textContent = "x";
-    remove.setAttribute("aria-label", "Delete");
-    remove.addEventListener("click", (event) => {
-      event.stopPropagation();
-      void this.config.actions.removeItem(item.id).then(() => this.config.actions.reload());
+    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 = config.getState().domDraft ?? draft;
+    if (currentDraft.adjustment?.isActive !== true) return;
+    const keyDelta = 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);
+  if (!dockToggle) {
+    header.append(adjust);
+  }
+  panel.append(header, xyStatus, scaleStatus);
+  syncControls(draft);
+  return {
+    panel,
+    focusTarget: adjust,
+    // 도킹 모드에서는 토글 버튼을 폼 액션 줄(leading)로 옮긴다.
+    actionButton: dockToggle ? adjust : void 0
+  };
+}
+function 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;
+}
+function syncDraftAdjustmentUi(context, {
+  draft,
+  pin,
+  selectionHighlight
+}) {
+  const { config } = context;
+  const presets = config.options.viewports?.presets;
+  const environment = config.getEnvironment();
+  if (!environment) return;
+  const hostPoint = toHostPoint(
+    getAdjustedDraftPoint(draft.marker.viewport, draft, presets),
+    environment
+  );
+  pin.style.left = `${hostPoint.x}px`;
+  pin.style.top = `${hostPoint.y}px`;
+  if (draft.selection && selectionHighlight) {
+    const rect = toHostSelection(
+      getAdjustedDraftSelection(
+        toViewportSelection(draft.selection.viewport),
+        draft,
+        presets
+      ),
+      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`;
+  }
+  context.syncDraftPreview(draft);
+}
+function attachDraftPinDrag(context, {
+  pin,
+  popover,
+  meta,
+  textarea
+}) {
+  const { config } = context;
+  let isDragging = false;
+  const moveDraftUi = (hostPoint) => {
+    const environment = config.getEnvironment();
+    if (!environment) return;
+    const nextPoint = clampPoint(
+      toTargetPoint(hostPoint, environment),
+      environment
+    );
+    const nextHostPoint = toHostPoint(nextPoint, environment);
+    pin.style.left = `${nextHostPoint.x}px`;
+    pin.style.top = `${nextHostPoint.y}px`;
+    if (popover) {
+      const position = getPopoverPosition(nextHostPoint, environment);
+      popover.style.left = `${position.left}px`;
+      popover.style.top = `${position.top}px`;
+    }
+    const domDraft = config.getState().domDraft;
+    if (!domDraft) return;
+    const nextDraft = {
+      ...domDraft,
+      marker: {
+        ...domDraft.marker,
+        viewport: roundPoint(nextPoint)
+      },
+      comment: textarea.value
+    };
+    config.actions.setDomDraft(nextDraft);
+    if (meta) {
+      meta.textContent = formatDomDraftMeta(nextDraft);
+    }
+  };
+  pin.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    isDragging = true;
+    pin.setPointerCapture(event.pointerId);
+  });
+  pin.addEventListener("pointermove", (event) => {
+    if (!isDragging || !pin.hasPointerCapture(event.pointerId)) return;
+    event.preventDefault();
+    moveDraftUi({
+      x: event.clientX,
+      y: event.clientY
     });
-    actions.append(remove);
-    row.append(body, actions);
-    return row;
+  });
+  pin.addEventListener("pointerup", (event) => {
+    if (!isDragging || !pin.hasPointerCapture(event.pointerId)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    isDragging = false;
+    pin.releasePointerCapture(event.pointerId);
+    const nextPoint = toTargetPointFromHostEvent(
+      event,
+      config.getEnvironment()
+    );
+    const currentDraft = config.getState().domDraft;
+    const fields = {
+      title: currentDraft?.title,
+      comment: textarea.value,
+      assigneeId: currentDraft?.assigneeId,
+      assigneeName: currentDraft?.assigneeName
+    };
+    void config.actions.bindElementDraftToPoint(nextPoint, fields);
+  });
+}
+
+// src/core/view/panel.ts
+function createReviewPanel(config, renderAreaForm) {
+  const panel = document.createElement("div");
+  panel.className = "dfwr-panel";
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-label", "Web review kit");
+  panel.append(
+    createHeader(config),
+    createToolbar(config),
+    createBody(config, renderAreaForm),
+    createList(config)
+  );
+  return panel;
+}
+function createHeader(config) {
+  const header = document.createElement("div");
+  header.className = "dfwr-header";
+  const title = document.createElement("div");
+  title.className = "dfwr-title";
+  title.textContent = "Review Kit";
+  const meta = document.createElement("div");
+  meta.className = "dfwr-meta";
+  meta.textContent = getRouteKey(config.getEnvironment());
+  const titleGroup = document.createElement("div");
+  titleGroup.append(title, meta);
+  const close = document.createElement("button");
+  close.className = "dfwr-icon-button";
+  close.type = "button";
+  close.textContent = "x";
+  close.setAttribute("aria-label", "Close");
+  close.addEventListener("click", () => config.actions.close());
+  header.append(titleGroup, close);
+  return header;
+}
+function createToolbar(config) {
+  const state = config.getState();
+  const toolbar = document.createElement("div");
+  toolbar.className = "dfwr-toolbar";
+  const toggleMode = (target) => {
+    const mode = config.getState().mode;
+    config.actions.setModeState(mode === target ? "idle" : target);
+    config.actions.clearDrafts();
+    config.actions.render();
+  };
+  toolbar.append(
+    createToolbarButton(
+      "Element",
+      state.mode === "element",
+      () => toggleMode("element")
+    ),
+    createToolbarButton(
+      state.isSelectingArea ? "Selecting" : "Area",
+      state.mode === "area",
+      () => toggleMode("area")
+    ),
+    createToolbarButton("Refresh", false, () => {
+      void config.actions.reload();
+    })
+  );
+  return toolbar;
+}
+function createToolbarButton(label, active, onClick) {
+  const button = document.createElement("button");
+  button.className = `dfwr-button${active ? " is-active" : ""}`;
+  button.type = "button";
+  button.textContent = label;
+  button.addEventListener("click", onClick);
+  return button;
+}
+function createBody(config, renderAreaForm) {
+  const body = document.createElement("div");
+  body.className = "dfwr-body";
+  const state = config.getState();
+  if (state.mode === "idle") {
+    body.append(
+      createEmptyText("Select an element or mark an area.")
+    );
+    return body;
   }
-  createMarkerLayer() {
-    const layer = document.createElement("div");
-    layer.className = "dfwr-marker-layer";
-    const environment = this.config.getEnvironment();
-    if (!environment) return layer;
-    const currentScope = getReviewViewportScope(
-      getViewportSize(environment),
-      this.config.options.viewports?.presets
+  if (state.mode === "element") {
+    body.append(
+      createEmptyText(
+        state.domDraft ? "Write the QA in the page box." : "Click an element to add QA."
+      )
     );
-    getNumberedReviewItems(
-      this.state.items,
-      this.config.options.viewports?.presets
-    ).forEach((numberedItem) => {
-      const { item, scope, displayLabel } = numberedItem;
-      if (!shouldShowMarkerForScope(scope, currentScope)) {
-        return;
-      }
-      const isHighlighted = item.id === this.state.highlightedItemId;
-      const highlightMode = getReviewItemHighlightMode(item);
-      if (highlightMode !== "note" && (!this.state.highlightedItemId || isHighlighted)) {
-        const selection = getItemHighlightSelection(item, environment);
-        if (selection) {
-          layer.append(
-            ...this.createItemHighlightElements(
-              selection.viewport,
-              environment,
-              item,
-              displayLabel,
-              selection.isBound,
-              isHighlighted
-            )
-          );
-          return;
-        }
-      }
-      const point = getBoundMarkerPoint(item, environment);
-      if (!point || !isPointInViewport(point.viewport, environment)) {
-        return;
+    return body;
+  }
+  body.append(renderAreaForm());
+  return body;
+}
+function createEmptyText(text) {
+  const empty = document.createElement("p");
+  empty.className = "dfwr-empty";
+  empty.textContent = text;
+  return empty;
+}
+function createList(config) {
+  const section = document.createElement("div");
+  section.className = "dfwr-list";
+  const state = config.getState();
+  const heading = document.createElement("div");
+  heading.className = "dfwr-list-heading";
+  heading.textContent = `Review items (${state.items.length})`;
+  section.append(heading);
+  if (state.items.length === 0) {
+    section.append(createEmptyText("No review items on this page."));
+    return section;
+  }
+  for (const numberedItem of getNumberedReviewItems(
+    state.items,
+    config.options.viewports?.presets
+  )) {
+    section.append(createListItem(config, numberedItem));
+  }
+  return section;
+}
+function createListItem(config, numberedItem) {
+  const { item } = numberedItem;
+  const row = document.createElement("article");
+  row.className = "dfwr-item";
+  row.tabIndex = 0;
+  row.setAttribute("role", "button");
+  row.setAttribute(
+    "aria-label",
+    `Restore review item: ${item.title ?? item.comment}`
+  );
+  row.addEventListener("click", () => {
+    void config.actions.restoreItem(item);
+  });
+  row.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    void config.actions.restoreItem(item);
+  });
+  const body = document.createElement("div");
+  body.className = "dfwr-item-body";
+  const badges = document.createElement("div");
+  badges.className = "dfwr-item-badges";
+  const scope = document.createElement("div");
+  scope.className = `dfwr-item-scope is-scope-${numberedItem.scope}`;
+  scope.textContent = numberedItem.displayLabel;
+  const kind = document.createElement("div");
+  kind.className = "dfwr-item-kind";
+  kind.textContent = item.kind;
+  badges.append(scope, kind);
+  const title = isTitleFieldEnabled(config.options) ? item.title?.trim() : "";
+  const titleElement = title ? document.createElement("strong") : void 0;
+  if (title && titleElement) {
+    titleElement.className = "dfwr-item-title";
+    titleElement.textContent = title;
+  }
+  const comment = document.createElement("p");
+  comment.className = `dfwr-item-comment${title ? "" : " is-primary"}`;
+  comment.textContent = item.comment;
+  const date = document.createElement("time");
+  date.className = "dfwr-item-date";
+  date.dateTime = item.createdAt;
+  date.textContent = formatItemMeta(item);
+  body.append(badges, ...titleElement ? [titleElement] : [], comment, date);
+  const actions = document.createElement("div");
+  actions.className = "dfwr-item-actions";
+  actions.addEventListener("click", (event) => event.stopPropagation());
+  actions.addEventListener("keydown", (event) => event.stopPropagation());
+  const remove = document.createElement("button");
+  remove.className = "dfwr-icon-button";
+  remove.type = "button";
+  remove.textContent = "x";
+  remove.setAttribute("aria-label", "Delete");
+  remove.addEventListener("click", (event) => {
+    event.stopPropagation();
+    void config.actions.removeItem(item.id).then(() => config.actions.reload());
+  });
+  actions.append(remove);
+  row.append(body, actions);
+  return row;
+}
+
+// src/core/view/selection.layers.ts
+function createElementLayer(config) {
+  const layer = document.createElement("div");
+  layer.className = "dfwr-element-layer";
+  const environment = config.getEnvironment();
+  const hover = document.createElement("div");
+  hover.className = "dfwr-dom-hover";
+  hover.hidden = true;
+  layer.append(hover);
+  if (environment) {
+    placeLayerOverTarget(layer, environment);
+  }
+  const updateHover = (point) => {
+    const nextEnvironment = config.getEnvironment();
+    if (!nextEnvironment) return;
+    const anchor = getDomAnchorFromPoint(
+      clampPoint(point, nextEnvironment),
+      config.options.anchors?.attribute,
+      nextEnvironment
+    );
+    const selection = anchor ? getElementViewportSelection(anchor, nextEnvironment) : void 0;
+    if (!selection) {
+      hover.hidden = true;
+      return;
+    }
+    const rect = toHostSelection(selection, nextEnvironment);
+    hover.hidden = false;
+    hover.style.left = `${rect.left}px`;
+    hover.style.top = `${rect.top}px`;
+    hover.style.width = `${rect.width}px`;
+    hover.style.height = `${rect.height}px`;
+  };
+  layer.addEventListener("pointermove", (event) => {
+    updateHover(toTargetPointFromHostEvent(event, config.getEnvironment()));
+  });
+  layer.addEventListener("pointerleave", () => {
+    hover.hidden = true;
+  });
+  layer.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    void config.actions.bindElementDraftToPoint(
+      toTargetPointFromHostEvent(event, config.getEnvironment())
+    );
+  });
+  return layer;
+}
+function createAreaLayer(config) {
+  const layer = document.createElement("div");
+  layer.className = "dfwr-area-layer";
+  const environment = config.getEnvironment();
+  if (environment) {
+    placeLayerOverTarget(layer, environment);
+  }
+  const box = document.createElement("div");
+  box.className = "dfwr-area-box";
+  layer.append(box);
+  let startX = 0;
+  let startY = 0;
+  let selection;
+  let activePointerId;
+  let isDragging = false;
+  const ownerWindow = layer.ownerDocument.defaultView ?? window;
+  const updateBox = (event) => {
+    const nextEnvironment = config.getEnvironment();
+    const nextPoint = toTargetPointFromHostEvent(event, nextEnvironment);
+    const left = Math.min(startX, nextPoint.x);
+    const top = Math.min(startY, nextPoint.y);
+    const width = Math.abs(nextPoint.x - startX);
+    const height = Math.abs(nextPoint.y - startY);
+    selection = { left, top, width, height };
+    const rect = nextEnvironment ? toHostSelection(selection, nextEnvironment) : selection;
+    box.style.left = `${rect.left}px`;
+    box.style.top = `${rect.top}px`;
+    box.style.width = `${rect.width}px`;
+    box.style.height = `${rect.height}px`;
+  };
+  const addDragListeners = () => {
+    ownerWindow.addEventListener("pointermove", handlePointerMove, true);
+    ownerWindow.addEventListener("pointerup", handlePointerUp, true);
+    ownerWindow.addEventListener("pointercancel", handlePointerCancel, true);
+  };
+  const removeDragListeners = () => {
+    ownerWindow.removeEventListener("pointermove", handlePointerMove, true);
+    ownerWindow.removeEventListener("pointerup", handlePointerUp, true);
+    ownerWindow.removeEventListener(
+      "pointercancel",
+      handlePointerCancel,
+      true
+    );
+  };
+  const releasePointerCapture = (event) => {
+    try {
+      if (layer.hasPointerCapture(event.pointerId)) {
+        layer.releasePointerCapture(event.pointerId);
       }
-      const hostPoint = toHostPoint(point.viewport, environment);
-      const marker = this.createMarkerElement(
-        item.id,
-        hostPoint,
-        displayLabel,
-        scope,
-        point.isBound,
-        isHighlighted,
-        highlightMode === "note" ? "note" : "default"
-      );
-      marker.title = `${displayLabel} / ${item.comment}
-${formatItemMeta(item)}`;
-      layer.append(marker);
+    } catch {
+    }
+  };
+  function isActivePointer(event) {
+    return isDragging && event.pointerId === activePointerId;
+  }
+  const finishAreaSelection = (event) => {
+    if (!isActivePointer(event)) return;
+    event.preventDefault();
+    updateBox(event);
+    releasePointerCapture(event);
+    removeDragListeners();
+    isDragging = false;
+    activePointerId = void 0;
+    if (!selection || selection.width < 8 || selection.height < 8) return;
+    config.actions.setSelectingArea(true);
+    config.actions.render();
+    void config.actions.createAreaDraft(selection);
+  };
+  function handlePointerMove(event) {
+    if (!isActivePointer(event)) return;
+    event.preventDefault();
+    updateBox(event);
+  }
+  const handlePointerUp = (event) => {
+    finishAreaSelection(event);
+  };
+  const handlePointerCancel = (event) => {
+    if (!isActivePointer(event)) return;
+    releasePointerCapture(event);
+    removeDragListeners();
+    isDragging = false;
+    activePointerId = void 0;
+  };
+  layer.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    activePointerId = event.pointerId;
+    isDragging = true;
+    try {
+      layer.setPointerCapture(event.pointerId);
+    } catch {
+    }
+    const startPoint = toTargetPointFromHostEvent(
+      event,
+      config.getEnvironment()
+    );
+    startX = startPoint.x;
+    startY = startPoint.y;
+    updateBox(event);
+    addDragListeners();
+  });
+  layer.addEventListener("pointermove", handlePointerMove);
+  layer.addEventListener("pointerup", handlePointerUp);
+  layer.addEventListener("pointercancel", handlePointerCancel);
+  return layer;
+}
+
+// src/core/web.review.kit.view.ts
+var WebReviewKitView = class {
+  constructor(config) {
+    this.config = config;
+    const presets = () => this.config.options.viewports?.presets;
+    this.draftPreview = new DraftPreviewController({
+      getEnvironment: () => this.config.getEnvironment(),
+      getMetrics: (draft) => getDraftAdjustmentMetrics(draft, presets()),
+      hasAdjustment: (draft) => hasDraftAdjustment(draft, presets())
     });
-    return layer;
+    this.draftContext = {
+      config: this.config,
+      cancelDraft: (event) => this.cancelDraft(event),
+      syncDraftPreview: (draft) => this.draftPreview.sync(draft)
+    };
   }
-  createItemHighlightElements(selection, environment, item, label, isBound, isHighlighted) {
-    const rect = toHostSelection(selection, environment);
-    const mode = getReviewItemHighlightMode(item);
-    const highlight = document.createElement("div");
-    highlight.className = [
-      "dfwr-item-target-highlight",
-      `is-mode-${mode}`,
-      isBound ? "is-bound" : "is-fallback",
-      isHighlighted ? "is-highlighted" : ""
-    ].filter(Boolean).join(" ");
-    highlight.style.left = `${rect.left}px`;
-    highlight.style.top = `${rect.top}px`;
-    highlight.style.width = `${rect.width}px`;
-    highlight.style.height = `${rect.height}px`;
-    highlight.dataset.reviewItemId = item.id;
-    const labelElement = document.createElement("div");
-    labelElement.className = [
-      "dfwr-item-target-label",
-      `is-mode-${mode}`,
-      isHighlighted ? "is-highlighted" : ""
-    ].filter(Boolean).join(" ");
-    labelElement.textContent = label;
-    labelElement.style.left = `${Math.max(4, rect.left)}px`;
-    labelElement.style.top = `${Math.max(4, rect.top - 24)}px`;
-    labelElement.dataset.reviewItemId = item.id;
-    return [highlight, labelElement];
-  }
-  createSelectionHighlight(selection, environment, isDraft) {
-    const rect = toHostSelection(selection, environment);
-    const highlight = document.createElement("div");
-    highlight.className = `dfwr-selection-highlight${isDraft ? " is-draft" : ""}`;
-    highlight.style.left = `${rect.left}px`;
-    highlight.style.top = `${rect.top}px`;
-    highlight.style.width = `${rect.width}px`;
-    highlight.style.height = `${rect.height}px`;
-    return highlight;
-  }
-  createMarkerElement(itemId, hostPoint, label, scope, isBound, isHighlighted, variant = "default") {
-    const isNoteCallout = variant === "note";
-    const marker = document.createElement("div");
-    marker.className = [
-      "dfwr-bound-marker",
-      isNoteCallout ? "is-note-callout" : "",
-      `is-scope-${scope}`,
-      isBound ? "is-bound" : "is-fallback",
-      isHighlighted ? "is-highlighted" : ""
+  clearDraftPreview() {
+    this.draftPreview.clear();
+    this.clearShellComposer();
+  }
+  /** Rebuilds the entire shadow-root UI from the current state snapshot. */
+  render(shadow, hiddenItemsStyle) {
+    const state = this.state;
+    this.draftPreview.sync(
+      state.isOpen && state.mode === "element" ? state.domDraft : void 0
+    );
+    shadow.replaceChildren();
+    shadow.append(createStyleElement());
+    shadow.append(hiddenItemsStyle);
+    const hasDismissableDraft = Boolean(state.domDraft || state.areaDraft);
+    const shouldDockComposer = this.config.options.ui?.panel === false && hasDismissableDraft && Boolean(this.getShellComposerHost());
+    let dockedComposer;
+    const shell = document.createElement("div");
+    shell.className = [
+      "dfwr-shell",
+      state.isOpen ? "is-open" : "",
+      hasDismissableDraft && !shouldDockComposer ? "has-dismissible-draft" : ""
     ].filter(Boolean).join(" ");
-    marker.style.left = `${hostPoint.x}px`;
-    marker.style.top = `${hostPoint.y}px`;
-    marker.dataset.scope = scope;
-    if (itemId) {
-      marker.dataset.reviewItemId = itemId;
-    }
-    const iconElement = document.createElement("span");
-    iconElement.className = "dfwr-bound-marker-icon";
-    iconElement.setAttribute("aria-hidden", "true");
-    const labelElement = document.createElement("span");
-    labelElement.className = "dfwr-bound-marker-number";
-    labelElement.textContent = label;
-    marker.append(iconElement, labelElement);
-    return marker;
-  }
-  attachDraftPinDrag(pin, popover, meta, textarea) {
-    let isDragging = false;
-    const moveDraftUi = (hostPoint) => {
-      const environment = this.config.getEnvironment();
-      if (!environment) return;
-      const nextPoint = clampPoint(toTargetPoint(hostPoint, environment), environment);
-      const nextHostPoint = toHostPoint(nextPoint, environment);
-      pin.style.left = `${nextHostPoint.x}px`;
-      pin.style.top = `${nextHostPoint.y}px`;
-      if (popover) {
-        const position = getPopoverPosition(nextHostPoint, environment);
-        popover.style.left = `${position.left}px`;
-        popover.style.top = `${position.top}px`;
+    shell.setAttribute("aria-hidden", state.isOpen ? "false" : "true");
+    if (this.config.options.ui?.panel !== false) {
+      shell.append(
+        createReviewPanel(
+          this.config,
+          () => createAreaForm(this.draftContext)
+        )
+      );
+    }
+    shell.append(
+      createMarkerLayer({
+        items: state.items,
+        highlightedItemId: state.highlightedItemId,
+        environment: this.config.getEnvironment(),
+        presets: this.config.options.viewports?.presets,
+        showCompactMarkers: this.config.options.ui?.markers !== "external"
+      })
+    );
+    if (state.isOpen && hasDismissableDraft && !shouldDockComposer) {
+      shell.append(this.createDraftCancelLayer());
+    }
+    if (state.isOpen && state.mode === "element") {
+      if (state.domDraft) {
+        const domDraft = createDomDraftLayer(this.draftContext, state.domDraft, {
+          dockComposer: shouldDockComposer
+        });
+        shell.append(domDraft.layer);
+        dockedComposer = domDraft.composer;
+      } else {
+        shell.append(createElementLayer(this.config));
       }
-      const noteDraft = this.state.noteDraft;
-      if (!noteDraft) return;
-      const nextDraft = {
-        ...noteDraft,
-        marker: {
-          ...noteDraft.marker,
-          viewport: roundPoint(nextPoint)
-        },
-        comment: textarea.value
-      };
-      this.config.actions.setNoteDraft(nextDraft);
-      if (meta) {
-        meta.textContent = formatNoteDraftMeta(nextDraft);
+    }
+    if (state.isOpen && state.mode === "area" && !state.areaDraft && !state.isSelectingArea) {
+      shell.append(createAreaLayer(this.config));
+    }
+    if (state.isOpen && state.mode === "area" && state.areaDraft && this.config.options.ui?.panel === false) {
+      if (state.areaDraft.selection) {
+        shell.append(createAreaDraftOverlay(this.draftContext, state.areaDraft));
       }
-    };
-    pin.addEventListener("pointerdown", (event) => {
-      if (event.button !== 0) return;
-      event.preventDefault();
-      event.stopPropagation();
-      isDragging = true;
-      pin.setPointerCapture(event.pointerId);
-    });
-    pin.addEventListener("pointermove", (event) => {
-      if (!isDragging || !pin.hasPointerCapture(event.pointerId)) return;
-      event.preventDefault();
-      moveDraftUi({
-        x: event.clientX,
-        y: event.clientY
-      });
-    });
-    pin.addEventListener("pointerup", (event) => {
-      if (!isDragging || !pin.hasPointerCapture(event.pointerId)) return;
-      event.preventDefault();
-      event.stopPropagation();
-      isDragging = false;
-      pin.releasePointerCapture(event.pointerId);
-      const nextPoint = toTargetPointFromHostEvent(
-        event,
-        this.config.getEnvironment()
+      const areaComposer = createAreaDraftPopover(
+        this.draftContext,
+        state.areaDraft,
+        { dockComposer: shouldDockComposer }
       );
-      const currentDraft = this.state.noteDraft;
-      const fields = {
-        title: currentDraft?.title,
-        comment: textarea.value,
-        assigneeId: currentDraft?.assigneeId,
-        assigneeName: currentDraft?.assigneeName
-      };
-      void (this.state.mode === "element" ? this.config.actions.bindElementDraftToPoint(nextPoint, fields) : this.config.actions.bindNoteDraftToPoint(nextPoint, fields));
-    });
+      if (shouldDockComposer) {
+        dockedComposer = areaComposer;
+      } else {
+        shell.append(areaComposer);
+      }
+    }
+    shadow.append(shell);
+    this.renderShellComposer(dockedComposer);
   }
-  createNoteLayer() {
-    const layer = document.createElement("div");
-    layer.className = "dfwr-text-layer";
+  get state() {
+    return this.config.getState();
+  }
+  getShellComposerHost() {
     const environment = this.config.getEnvironment();
-    if (environment) {
-      placeLayerOverTarget(layer, environment);
+    if (this.config.options.ui?.panel !== false) return void 0;
+    return environment?.composerHost ?? void 0;
+  }
+  /** Mounts the docked composer into the shell-provided host element. */
+  renderShellComposer(composer) {
+    const host = composer ? this.getShellComposerHost() : void 0;
+    if (!host || !composer) {
+      this.clearShellComposer();
+      return;
     }
-    layer.addEventListener("pointerdown", (event) => {
-      if (event.button !== 0) return;
-      event.preventDefault();
-      void this.config.actions.bindNoteDraftToPoint(
-        toTargetPointFromHostEvent(event, this.config.getEnvironment())
-      );
-    });
-    return layer;
+    if (this.shellComposerHost && this.shellComposerHost !== host) {
+      this.clearShellComposer();
+    }
+    this.shellComposerHost = host;
+    host.dataset.hasDraftComposer = "true";
+    if (host.parentElement) {
+      host.parentElement.dataset.hasDraftComposer = "true";
+    }
+    const shell = document.createElement("div");
+    shell.className = "dfwr-shell is-open is-shell-draft is-docked-composer";
+    shell.append(composer);
+    host.replaceChildren(createStyleElement(), shell);
   }
-  createElementLayer() {
-    const layer = document.createElement("div");
-    layer.className = "dfwr-element-layer";
-    const environment = this.config.getEnvironment();
-    const hover = document.createElement("div");
-    hover.className = "dfwr-dom-hover";
-    hover.hidden = true;
-    layer.append(hover);
-    if (environment) {
-      placeLayerOverTarget(layer, environment);
+  clearShellComposer() {
+    const host = this.shellComposerHost;
+    host?.replaceChildren();
+    if (host) {
+      delete host.dataset.hasDraftComposer;
+      delete host.parentElement?.dataset.hasDraftComposer;
     }
-    const updateHover = (point) => {
-      const nextEnvironment = this.config.getEnvironment();
-      if (!nextEnvironment) return;
-      const anchor = getDomAnchorFromPoint(
-        clampPoint(point, nextEnvironment),
-        this.config.options.anchors?.attribute,
-        nextEnvironment
-      );
-      const selection = anchor ? getElementViewportSelection(anchor, nextEnvironment) : void 0;
-      if (!selection) {
-        hover.hidden = true;
-        return;
-      }
-      const rect = toHostSelection(selection, nextEnvironment);
-      hover.hidden = false;
-      hover.style.left = `${rect.left}px`;
-      hover.style.top = `${rect.top}px`;
-      hover.style.width = `${rect.width}px`;
-      hover.style.height = `${rect.height}px`;
-    };
-    layer.addEventListener("pointermove", (event) => {
-      updateHover(toTargetPointFromHostEvent(event, this.config.getEnvironment()));
-    });
-    layer.addEventListener("pointerleave", () => {
-      hover.hidden = true;
-    });
-    layer.addEventListener("pointerdown", (event) => {
-      if (event.button !== 0) return;
-      event.preventDefault();
-      void this.config.actions.bindElementDraftToPoint(
-        toTargetPointFromHostEvent(event, this.config.getEnvironment())
-      );
-    });
-    return layer;
+    this.shellComposerHost = void 0;
   }
-  createAreaLayer() {
+  /** Full-screen click-away layer that cancels the active draft. */
+  createDraftCancelLayer() {
     const layer = document.createElement("div");
-    layer.className = "dfwr-area-layer";
-    const environment = this.config.getEnvironment();
-    if (environment) {
-      placeLayerOverTarget(layer, environment);
-    }
-    const box = document.createElement("div");
-    box.className = "dfwr-area-box";
-    layer.append(box);
-    let startX = 0;
-    let startY = 0;
-    let selection;
-    let activePointerId;
-    let isDragging = false;
-    const ownerWindow = layer.ownerDocument.defaultView ?? window;
-    const updateBox = (event) => {
-      const nextEnvironment = this.config.getEnvironment();
-      const nextPoint = toTargetPointFromHostEvent(
-        event,
-        nextEnvironment
-      );
-      const left = Math.min(startX, nextPoint.x);
-      const top = Math.min(startY, nextPoint.y);
-      const width = Math.abs(nextPoint.x - startX);
-      const height = Math.abs(nextPoint.y - startY);
-      const hostPoint = toHostPoint(
-        { x: left, y: top },
-        nextEnvironment
-      );
-      selection = { left, top, width, height };
-      box.style.left = `${hostPoint.x}px`;
-      box.style.top = `${hostPoint.y}px`;
-      box.style.width = `${width}px`;
-      box.style.height = `${height}px`;
-    };
-    const addDragListeners = () => {
-      ownerWindow.addEventListener("pointermove", handlePointerMove, true);
-      ownerWindow.addEventListener("pointerup", handlePointerUp, true);
-      ownerWindow.addEventListener("pointercancel", handlePointerCancel, true);
-    };
-    const removeDragListeners = () => {
-      ownerWindow.removeEventListener("pointermove", handlePointerMove, true);
-      ownerWindow.removeEventListener("pointerup", handlePointerUp, true);
-      ownerWindow.removeEventListener(
-        "pointercancel",
-        handlePointerCancel,
-        true
-      );
-    };
-    const releasePointerCapture = (event) => {
-      try {
-        if (layer.hasPointerCapture(event.pointerId)) {
-          layer.releasePointerCapture(event.pointerId);
-        }
-      } catch {
-      }
-    };
-    function isActivePointer(event) {
-      return isDragging && event.pointerId === activePointerId;
-    }
-    const finishAreaSelection = (event) => {
-      if (!isActivePointer(event)) return;
-      event.preventDefault();
-      updateBox(event);
-      releasePointerCapture(event);
-      removeDragListeners();
-      isDragging = false;
-      activePointerId = void 0;
-      if (!selection || selection.width < 8 || selection.height < 8) return;
-      this.config.actions.setSelectingArea(true);
-      this.config.actions.render();
-      void this.config.actions.createAreaDraft(selection);
-    };
-    function handlePointerMove(event) {
-      if (!isActivePointer(event)) return;
-      event.preventDefault();
-      updateBox(event);
-    }
-    const handlePointerUp = (event) => {
-      finishAreaSelection(event);
-    };
-    const handlePointerCancel = (event) => {
-      if (!isActivePointer(event)) return;
-      releasePointerCapture(event);
-      removeDragListeners();
-      isDragging = false;
-      activePointerId = void 0;
-    };
+    layer.className = "dfwr-draft-cancel-layer";
+    layer.setAttribute("aria-hidden", "true");
     layer.addEventListener("pointerdown", (event) => {
       if (event.button !== 0) return;
-      event.preventDefault();
-      activePointerId = event.pointerId;
-      isDragging = true;
-      try {
-        layer.setPointerCapture(event.pointerId);
-      } catch {
-      }
-      const startPoint = toTargetPointFromHostEvent(
-        event,
-        this.config.getEnvironment()
-      );
-      startX = startPoint.x;
-      startY = startPoint.y;
-      updateBox(event);
-      addDragListeners();
+      this.cancelDraft(event);
     });
-    layer.addEventListener("pointermove", handlePointerMove);
-    layer.addEventListener("pointerup", handlePointerUp);
-    layer.addEventListener("pointercancel", handlePointerCancel);
     return layer;
   }
+  cancelDraft(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();
+  }
 };
 
 // src/core/web.review.kit.app.ts
@@ -5148,6 +5569,7 @@ var WebReviewKitApp = class {
     this.items = [];
     this.draftError = "";
     this.isCreatingItem = false;
+    this.isCapturingViewport = false;
     this.isSelectingArea = false;
     this.handleKeyDown = (event) => {
       if (event.key === "Escape" && this.cancelMode()) {
@@ -5176,10 +5598,11 @@ var WebReviewKitApp = class {
         isOpen: this.isOpen,
         mode: this.mode,
         items: this.items,
-        noteDraft: this.noteDraft,
+        domDraft: this.domDraft,
         areaDraft: this.areaDraft,
         draftError: this.draftError,
         isCreatingItem: this.isCreatingItem,
+        isCapturingViewport: this.isCapturingViewport,
         isSelectingArea: this.isSelectingArea,
         highlightedItemId: this.highlightedItemId
       }),
@@ -5191,13 +5614,9 @@ var WebReviewKitApp = class {
         restoreItem: (item) => this.restoreItem(item),
         removeItem: (itemId) => this.adapter.remove(itemId),
         setModeState: (mode) => this.setModeState(mode),
-        clearDrafts: () => {
-          this.noteDraft = void 0;
-          this.areaDraft = void 0;
-          this.draftError = "";
-        },
-        setNoteDraft: (draft) => {
-          this.noteDraft = draft;
+        clearDrafts: () => this.clearDrafts(),
+        setDomDraft: (draft) => {
+          this.domDraft = draft;
           this.draftError = "";
         },
         setAreaDraft: (draft) => {
@@ -5208,7 +5627,8 @@ var WebReviewKitApp = class {
           this.isSelectingArea = isSelectingArea;
         },
         createItem: (input) => this.createItem(input),
-        bindNoteDraftToPoint: (point, fields) => this.bindNoteDraftToPoint(point, fields),
+        captureDomDraft: (input) => this.captureDomDraft(input),
+        captureAreaDraft: (input) => this.captureAreaDraft(input),
         bindElementDraftToPoint: (point, fields) => this.bindElementDraftToPoint(point, fields),
         createAreaDraft: (selection) => this.createAreaDraft(selection)
       }
@@ -5230,6 +5650,7 @@ var WebReviewKitApp = class {
   }
   destroy() {
     this.view.clearDraftPreview();
+    this.clearDrafts();
     document.removeEventListener("keydown", this.handleKeyDown, true);
     window.removeEventListener("scroll", this.handleViewportChange, true);
     window.removeEventListener("resize", this.handleViewportChange);
@@ -5249,8 +5670,7 @@ var WebReviewKitApp = class {
   close() {
     this.isOpen = false;
     this.setModeState("idle");
-    this.noteDraft = void 0;
-    this.areaDraft = void 0;
+    this.clearDrafts();
     this.isSelectingArea = false;
     this.render();
   }
@@ -5266,8 +5686,7 @@ var WebReviewKitApp = class {
       this.isOpen = true;
     }
     this.setModeState(this.mode === mode ? "idle" : mode);
-    this.noteDraft = void 0;
-    this.areaDraft = void 0;
+    this.clearDrafts();
     this.render();
   }
   async startElementReview(element, comment) {
@@ -5275,8 +5694,7 @@ var WebReviewKitApp = class {
       this.isOpen = true;
     }
     this.setModeState("element");
-    this.noteDraft = void 0;
-    this.areaDraft = void 0;
+    this.clearDrafts();
     this.isSelectingArea = false;
     await this.bindElementDraftToElement(element, { comment });
   }
@@ -5301,6 +5719,20 @@ var WebReviewKitApp = class {
     this.hiddenItemIds = itemIds ? new Set(itemIds) : void 0;
     this.updateHiddenItemsStyle();
   }
+  clearDrafts() {
+    this.revokeDraftAttachmentPreviews(this.domDraft);
+    this.revokeDraftAttachmentPreviews(this.areaDraft);
+    this.domDraft = void 0;
+    this.areaDraft = void 0;
+    this.draftError = "";
+  }
+  revokeDraftAttachmentPreviews(draft) {
+    draft?.attachments?.forEach((attachment) => {
+      if (attachment.previewUrl) {
+        URL.revokeObjectURL(attachment.previewUrl);
+      }
+    });
+  }
   clearHighlightedItem() {
     if (!this.highlightedItemId) return;
     this.highlightedItemId = void 0;
@@ -5336,18 +5768,17 @@ var WebReviewKitApp = class {
     this.options.onModeChange?.(mode);
   }
   cancelMode() {
-    if (this.mode === "idle" && !this.noteDraft && !this.areaDraft && !this.isSelectingArea) {
+    if (this.mode === "idle" && !this.domDraft && !this.areaDraft && !this.isSelectingArea) {
       return false;
     }
     this.setModeState("idle");
-    this.noteDraft = void 0;
-    this.areaDraft = void 0;
+    this.clearDrafts();
     this.isSelectingArea = false;
     this.render();
     return true;
   }
   isDraftComposerFocused() {
-    if (!this.noteDraft && !this.areaDraft) return false;
+    if (!this.domDraft && !this.areaDraft) return false;
     const composerHost = this.getEnvironment()?.composerHost;
     const activeElement = composerHost?.ownerDocument.activeElement;
     return Boolean(
@@ -5383,6 +5814,8 @@ var WebReviewKitApp = class {
       };
       const overlayRect = target.getOverlayRect?.() ?? rect;
       const composerHost = target.getComposerHost?.();
+      const scaleX = target.window.innerWidth > 0 ? rect.width / target.window.innerWidth : 1;
+      const scaleY = target.window.innerHeight > 0 ? rect.height / target.window.innerHeight : 1;
       return {
         window: target.window,
         document: target.document,
@@ -5392,13 +5825,16 @@ var WebReviewKitApp = class {
           width: rect.width,
           height: rect.height
         },
+        scaleX,
+        scaleY,
         overlayRect: {
           left: overlayRect.left,
           top: overlayRect.top,
           width: overlayRect.width,
           height: overlayRect.height
         },
-        composerHost
+        composerHost,
+        captureViewport: target.captureViewport
       };
     } catch {
       return void 0;
@@ -5421,32 +5857,6 @@ var WebReviewKitApp = class {
     if (!this.shadow) return;
     this.view.render(this.shadow, this.createHiddenItemsStyleElement());
   }
-  async bindNoteDraftToPoint(point, fields = {}) {
-    const environment = this.getEnvironment();
-    if (!environment) return;
-    const viewport = getViewportSize(environment);
-    const nextPoint = clampPoint(point, environment);
-    const draft = await this.withOverlayHidden(() => {
-      const selection = getPointSelection(nextPoint);
-      const anchor = getDomAnchor(
-        selection,
-        this.options.anchors?.attribute,
-        environment
-      );
-      const marker = {
-        viewport: roundPoint(nextPoint),
-        relative: anchor ? getRelativePoint(nextPoint, anchor, environment) : void 0
-      };
-      return {
-        viewport,
-        anchor,
-        marker,
-        ...fields
-      };
-    });
-    this.noteDraft = draft;
-    this.render();
-  }
   async bindElementDraftToPoint(point, fields = {}) {
     const environment = this.getEnvironment();
     if (!environment) return;
@@ -5495,7 +5905,7 @@ var WebReviewKitApp = class {
         previewElement
       };
     });
-    this.noteDraft = draft;
+    this.domDraft = draft;
     this.render();
   }
   async bindElementDraftToElement(element, fields = {}) {
@@ -5536,7 +5946,7 @@ var WebReviewKitApp = class {
       };
     });
     if (!draft) return;
-    this.noteDraft = draft;
+    this.domDraft = draft;
     this.render();
   }
   async createAreaDraft(selection) {
@@ -5549,16 +5959,27 @@ var WebReviewKitApp = class {
     try {
       const viewport = getViewportSize(environment);
       this.areaDraft = await this.withOverlayHidden(() => {
-        const marker = createSelectionCenterMarker(
+        const anchorPoint = clampPoint(
+          getSelectionCenter(selection),
+          environment
+        );
+        const anchor = getDomAnchorFromPoint(
+          anchorPoint,
+          this.options.anchors?.attribute,
+          environment
+        );
+        const marker = createSelectionStartMarker(
           selection,
-          void 0,
+          anchor,
           environment
         );
         const reviewSelection = {
-          viewport: toPublicSelection(selection)
+          viewport: toPublicSelection(selection),
+          relative: anchor ? getRelativeSelection(selection, anchor, environment) : void 0
         };
         return {
           viewport,
+          anchor,
           marker,
           selection: reviewSelection
         };
@@ -5579,6 +6000,127 @@ var WebReviewKitApp = class {
       this.root.style.display = previousDisplay;
     }
   }
+  async captureDomDraft(input) {
+    if (this.isCapturingViewport) return;
+    const environment = this.getEnvironment();
+    const draft = this.domDraft;
+    if (!draft) return;
+    if (!environment?.captureViewport) {
+      this.draftError = "Viewport capture helper is not available.";
+      this.render();
+      return;
+    }
+    const captureInput = this.createViewportCaptureInput(
+      environment,
+      input,
+      input.selection?.viewport
+    );
+    this.draftError = "";
+    this.isCapturingViewport = true;
+    this.render();
+    try {
+      const result = await environment.captureViewport(captureInput);
+      const attachment = this.createCaptureDraftAttachment(result, captureInput);
+      const currentDraft = this.domDraft ?? draft;
+      this.domDraft = {
+        ...currentDraft,
+        attachments: [...currentDraft.attachments ?? [], attachment]
+      };
+    } catch (error) {
+      this.draftError = this.getErrorMessage(
+        error,
+        "Failed to capture viewport."
+      );
+    } finally {
+      this.isCapturingViewport = false;
+      this.render();
+    }
+  }
+  async captureAreaDraft(input) {
+    if (this.isCapturingViewport) return;
+    const environment = this.getEnvironment();
+    const draft = this.areaDraft;
+    if (!draft) return;
+    if (!environment?.captureViewport) {
+      this.draftError = "Viewport capture helper is not available.";
+      this.render();
+      return;
+    }
+    const captureInput = this.createViewportCaptureInput(
+      environment,
+      input,
+      input.selection?.viewport
+    );
+    this.draftError = "";
+    this.isCapturingViewport = true;
+    this.render();
+    try {
+      const result = await environment.captureViewport(captureInput);
+      const attachment = this.createCaptureDraftAttachment(result, captureInput);
+      const currentDraft = this.areaDraft ?? draft;
+      this.areaDraft = {
+        ...currentDraft,
+        attachments: [...currentDraft.attachments ?? [], attachment]
+      };
+    } catch (error) {
+      this.draftError = this.getErrorMessage(
+        error,
+        "Failed to capture viewport."
+      );
+    } finally {
+      this.isCapturingViewport = false;
+      this.render();
+    }
+  }
+  createViewportCaptureInput(environment, draft, captureRegion) {
+    const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+    const viewport = draft.viewport ?? getViewportSize(environment);
+    const routeKey = getRouteKey(environment);
+    return {
+      routeKey,
+      pageUrl: getPageUrl(environment),
+      originalUrl: getOriginalUrl(environment),
+      viewport,
+      captureRegion,
+      devicePixelRatio: environment.window.devicePixelRatio || 1,
+      scroll: {
+        x: environment.window.scrollX,
+        y: environment.window.scrollY
+      },
+      marker: draft.marker,
+      selection: draft.selection,
+      timestamp
+    };
+  }
+  createCaptureDraftAttachment(result, input) {
+    const mime = result.mime || result.file.type || "image/png";
+    const name = result.name || `review-capture-${Date.now()}.png`;
+    return {
+      id: createId(),
+      file: result.file,
+      name,
+      mime,
+      size: result.file.size,
+      kind: "capture",
+      previewUrl: mime.startsWith("image/") ? URL.createObjectURL(result.file) : void 0,
+      metadata: {
+        ...result.metadata,
+        source: "viewport-capture",
+        target: "iframe",
+        routeKey: input.routeKey,
+        pageUrl: input.pageUrl,
+        originalUrl: input.originalUrl,
+        viewport: input.viewport,
+        scroll: input.scroll,
+        marker: input.marker,
+        selection: input.selection,
+        timestamp: input.timestamp,
+        devicePixelRatio: input.devicePixelRatio,
+        width: result.width,
+        height: result.height
+      }
+    };
+  }
   async createItem(input) {
     const environment = this.getEnvironment();
     if (!environment || this.isCreatingItem) return;
@@ -5622,24 +6164,61 @@ var WebReviewKitApp = class {
     this.isCreatingItem = true;
     this.render();
     try {
-      const createdItem = await this.adapter.create(item);
+      const attachments = await this.uploadDraftAttachments(
+        input.attachments,
+        item
+      );
+      const itemWithAttachments = attachments.length > 0 ? { ...item, attachments } : item;
+      const createdItem = await this.adapter.create(itemWithAttachments);
       this.setModeState("idle");
-      this.noteDraft = void 0;
-      this.areaDraft = void 0;
+      this.clearDrafts();
       this.highlightItem(createdItem.id);
       await this.reload();
       await this.options.onCreateItem?.(createdItem);
     } catch (error) {
-      this.draftError = error instanceof Error ? error.message : "Failed to save QA.";
+      this.draftError = this.getCreateItemErrorMessage(
+        error,
+        Boolean(input.attachments?.length)
+      );
     } finally {
       this.isCreatingItem = false;
       this.render();
     }
   }
+  async uploadDraftAttachments(attachments, item) {
+    if (!attachments?.length) return [];
+    const uploadAttachment = this.adapter.uploadAttachment;
+    if (!uploadAttachment) {
+      throw new Error("Attachment upload adapter is not configured.");
+    }
+    return Promise.all(
+      attachments.map(
+        (attachment) => uploadAttachment({
+          file: attachment.file,
+          name: attachment.name,
+          mime: attachment.mime,
+          kind: attachment.kind,
+          item,
+          metadata: attachment.metadata
+        })
+      )
+    );
+  }
+  getCreateItemErrorMessage(error, wasUploadingAttachments) {
+    const message = this.getErrorMessage(error, "Failed to save QA.");
+    const reason = error && typeof error === "object" && "reason" in error && typeof error.reason === "string" ? ` (${error.reason})` : "";
+    return wasUploadingAttachments && reason ? `Attachment upload failed${reason}: ${message}` : message;
+  }
+  getErrorMessage(error, fallback) {
+    if (error instanceof Error) return error.message;
+    if (error && typeof error === "object" && "message" in error && typeof error.message === "string") {
+      return error.message;
+    }
+    return fallback;
+  }
   async restoreItem(item) {
     this.setModeState("idle");
-    this.noteDraft = void 0;
-    this.areaDraft = void 0;
+    this.clearDrafts();
     if (this.options.onRestoreItem) {
       await this.options.onRestoreItem(item);
       return;
@@ -5698,6 +6277,7 @@ function createNoopController() {
   REVIEW_WORKFLOW_STATUS_OPTIONS,
   ReviewFigmaTokenError,
   collectReviewFigmaReleaseSnapshot,
+  createEndpointReviewFigmaImageStore,
   createRemoteReviewFigmaImageStore,
   createReviewFigmaFrameUrl,
   createReviewFigmaImageStoreClient,