@designfever/web-review-kit 0.8.1 → 0.8.3

package/dist/index.cjs

@@ -248,7 +248,7 @@ function normalizeItemForSupabaseCreate(item, source, options) {
   const normalizedStatus = normalizeReviewItemStatus(item.status);
   const routeKey = item.routeKey || item.normalizedPath || "/";
   const viewport = item.viewport ?? { width: 390, height: 720 };
-  const nextItem = {
+  return {
     ...item,
     id,
     reviewNumber: void 0,
@@ -269,10 +269,6 @@ function normalizeItemForSupabaseCreate(item, source, options) {
     createdAt: now,
     updatedAt: now
   };
-  return {
-    ...nextItem,
-    externalIssueUrl: nextItem.externalIssueUrl ?? buildSupabaseReviewUrl(nextItem, source, options)
-  };
 }
 async function createItemWithRpc(item, source, options) {
   const rpcName = options.createRpc ?? DEFAULT_SUPABASE_CREATE_REVIEW_ITEM_RPC;
@@ -625,38 +621,69 @@ async function createClientRenderedFigmaAsset(figmaUrl, token, options, fetchOpt
   const requestFetch = fetchOption ?? globalThis.fetch;
   if (!requestFetch) throw new Error("Figma client rendering requires fetch.");
   const renderFormat = options.renderFormat ?? "png";
-  const response = await requestFetch(
-    createReviewFigmaImageApiUrl({
-      apiBaseUrl: options.apiBaseUrl,
-      fileKey: ref.fileKey,
-      nodeId: ref.nodeId,
-      format: renderFormat,
-      scale: options.renderScale,
-      useAbsoluteBounds: options.useAbsoluteBounds
-    }),
-    {
-      headers: {
-        "X-Figma-Token": token
+  const timeoutMs = options.timeoutMs ?? 1e4;
+  const imageUrl = await withStageTimeout(
+    async (signal) => {
+      const response = await requestFetch(
+        createReviewFigmaImageApiUrl({
+          apiBaseUrl: options.apiBaseUrl,
+          fileKey: ref.fileKey,
+          nodeId: ref.nodeId,
+          format: renderFormat,
+          scale: options.renderScale,
+          useAbsoluteBounds: options.useAbsoluteBounds
+        }),
+        {
+          headers: {
+            "X-Figma-Token": token
+          },
+          signal
+        }
+      );
+      const body = await response.json().catch(() => null);
+      if (!response.ok) {
+        throw new Error(
+          body?.err || `Figma image render failed with ${response.status}`
+        );
       }
-    }
+      const nextImageUrl = body?.images?.[ref.nodeId];
+      if (!nextImageUrl) {
+        throw new Error(
+          `Figma image render returned no URL for ${ref.nodeId}.`
+        );
+      }
+      return nextImageUrl;
+    },
+    timeoutMs,
+    "Figma API request timed out."
   );
-  const body = await response.json().catch(() => null);
-  if (!response.ok) {
-    throw new Error(body?.err || `Figma image render failed with ${response.status}`);
-  }
-  const imageUrl = body?.images?.[ref.nodeId];
-  if (!imageUrl) throw new Error(`Figma image render returned no URL for ${ref.nodeId}.`);
-  const imageResponse = await requestFetch(imageUrl);
-  if (!imageResponse.ok) {
-    throw new Error(`Figma image download failed with ${imageResponse.status}`);
-  }
-  const originalBlob = await imageResponse.blob();
+  const originalBlob = await withStageTimeout(
+    async (signal) => {
+      const imageResponse = await requestFetch(imageUrl, { signal });
+      if (!imageResponse.ok) {
+        throw new Error(
+          `Figma image download failed with ${imageResponse.status}`
+        );
+      }
+      return imageResponse.blob();
+    },
+    timeoutMs,
+    "Figma image download timed out."
+  );
+  return withStageTimeout(
+    () => createProcessedFigmaAsset(originalBlob, renderFormat, options),
+    timeoutMs,
+    "Figma image processing timed out."
+  );
+}
+async function createProcessedFigmaAsset(originalBlob, renderFormat, options) {
   const originalMimeType = normalizeClientImageMimeType(originalBlob.type) ?? getReviewFigmaImageMimeType(renderFormat === "jpg" ? "jpg" : "png");
   const originalFormat = getReviewFigmaImageFormatFromMimeType(originalMimeType) ?? (renderFormat === "jpg" ? "jpg" : "png");
-  const dimensions = await readImageBlobDimensions(originalBlob);
+  const image = await loadImageBlob(originalBlob);
+  const dimensions = readImageDimensions(image);
   const shouldConvertToWebp = options.convertToWebp ?? true;
-  const convertedBlob = shouldConvertToWebp ? await convertImageBlobToWebp(
-    originalBlob,
+  const convertedBlob = shouldConvertToWebp ? await convertImageToWebp(
+    image,
     options.webpQuality ?? 0.9,
     dimensions
   ).catch(() => null) : null;
@@ -678,22 +705,17 @@ function createReviewFigmaClientRenderedAsset({
   token,
   ...options
 }) {
-  return withTimeout(
-    createClientRenderedFigmaAsset(figmaUrl, token, options, fetchOption),
-    options.timeoutMs ?? 1e4
-  );
+  return createClientRenderedFigmaAsset(figmaUrl, token, options, fetchOption);
 }
-async function readImageBlobDimensions(blob) {
-  const image = await loadImageBlob(blob);
+function readImageDimensions(image) {
   return {
     width: image.naturalWidth || image.width,
     height: image.naturalHeight || image.height
   };
 }
-async function convertImageBlobToWebp(blob, quality, dimensions) {
+async function convertImageToWebp(image, quality, dimensions) {
   if (typeof document === "undefined") return null;
   if (!dimensions.width || !dimensions.height) return null;
-  const image = await loadImageBlob(blob);
   const canvas = document.createElement("canvas");
   canvas.width = dimensions.width;
   canvas.height = dimensions.height;
@@ -745,18 +767,26 @@ function normalizeClientImageMimeType(value) {
   }
   return null;
 }
-async function withTimeout(promise, timeoutMs) {
+async function withStageTimeout(run, timeoutMs, message) {
+  const controller = new AbortController();
+  let didTimeout = false;
   let timeoutId;
   try {
-    return await Promise.race([
-      promise,
-      new Promise((_, reject) => {
-        timeoutId = setTimeout(
-          () => reject(new Error("Figma client rendering timed out.")),
-          timeoutMs
-        );
-      })
-    ]);
+    try {
+      return await Promise.race([
+        run(controller.signal),
+        new Promise((_, reject) => {
+          timeoutId = setTimeout(() => {
+            didTimeout = true;
+            controller.abort();
+            reject(new Error(message));
+          }, timeoutMs);
+        })
+      ]);
+    } catch (error) {
+      if (didTimeout) throw new Error(message);
+      throw error;
+    }
   } finally {
     if (timeoutId) clearTimeout(timeoutId);
   }
@@ -962,7 +992,7 @@ async function uploadFigmaAsset({
   const requestFetch = fetchOption ?? globalThis.fetch;
   if (!requestFetch) throw new Error("Figma asset upload requires fetch.");
   const { blob, mimeType } = decodeAssetDataUrl(asset);
-  const response = await withTimeout2(
+  const response = await withTimeout(
     requestFetch(
       createAssetUploadUrl(endpoint, {
         imageFormat: asset.imageFormat,
@@ -1091,7 +1121,7 @@ function decodeAssetDataUrl(asset) {
     mimeType
   };
 }
-async function withTimeout2(promise, timeoutMs, message) {
+async function withTimeout(promise, timeoutMs, message) {
   let timeoutId;
   try {
     return await Promise.race([
@@ -1945,6 +1975,15 @@ function isMeaningfulClass(value) {
   ) && !normalized.startsWith("mq-");
 }
 
+// src/core/error.ts
+function 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;
+}
+
 // src/core/id.ts
 function createId() {
   if ("randomUUID" in crypto) return crypto.randomUUID();
@@ -1980,6 +2019,13 @@ var HOTKEY_KEY_ALIASES = {
   n: ["\u315C"],
   m: ["\u3161"]
 };
+function isEditableEventTarget(event) {
+  const path = event.composedPath?.() ?? [];
+  const element = path[0] ?? event.target;
+  if (!element || typeof element.tagName !== "string") return false;
+  const tag = element.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || element.isContentEditable === true;
+}
 function isHotkey(event, hotkey) {
   const parts = hotkey.split("+").map((part) => part.trim().toLowerCase()).filter(Boolean);
   const key = parts.find(
@@ -2426,6 +2472,7 @@ var DraftPreviewController = class {
       };
       element.style.visibility = "hidden";
     }
+    syncDraftPreviewCloneRect(this.snapshot.clone, element);
     const metrics = this.config.getMetrics(draft);
     const translate = `translate(${toCssNumber(metrics.cssX)}px, ${toCssNumber(
       metrics.cssY
@@ -2450,16 +2497,11 @@ var DraftPreviewController = class {
   }
 };
 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";
@@ -2471,6 +2513,14 @@ function positionDraftPreviewClone(clone, element, computedStyle) {
   clone.style.willChange = "transform";
   clone.style.transformOrigin = "top left";
   clone.style.transform = "none";
+  syncDraftPreviewCloneRect(clone, element);
+}
+function syncDraftPreviewCloneRect(clone, element) {
+  const rect = element.getBoundingClientRect();
+  clone.style.left = `${toCssNumber(rect.left)}px`;
+  clone.style.top = `${toCssNumber(rect.top)}px`;
+  clone.style.width = `${toCssNumber(rect.width)}px`;
+  clone.style.height = `${toCssNumber(rect.height)}px`;
 }
 function getDraftPreviewDisplay(display) {
   if (display === "inline" || display === "contents") return "inline-block";
@@ -2546,11 +2596,11 @@ function createStyleElement() {
       --df-review-color-text: #f7f7f2;
       --df-review-color-text-muted: rgba(247, 247, 242, 0.62);
       --df-review-color-text-subtle: rgba(247, 247, 242, 0.46);
-      --df-review-color-accent: #d7ff5f;
+      --df-review-color-accent: #7cc7ff;
       --df-review-color-accent-contrast: #171b1e;
-      --df-review-color-accent-soft: rgba(215, 255, 95, 0.16);
-      --df-review-color-accent-ring: rgba(215, 255, 95, 0.6);
-      --df-review-color-area: #63d7c7;
+      --df-review-color-accent-soft: rgba(124, 199, 255, 0.16);
+      --df-review-color-accent-ring: rgba(124, 199, 255, 0.6);
+      --df-review-color-area: #7cc7ff;
       --df-review-color-error: #ffb7a7;
       --df-review-shadow-panel: 0 18px 48px rgba(0, 0, 0, 0.34);
       --df-review-shadow-popover: 0 16px 38px rgba(0, 0, 0, 0.32);
@@ -2736,9 +2786,9 @@ function createStyleElement() {
     .dfwr-selection-highlight {
       position: fixed;
       z-index: 1;
-      border: 2px solid #d7ff5f;
+      border: 2px solid #7cc7ff;
       border-radius: var(--df-review-radius-xs);
-      background: rgba(215, 255, 95, 0.08);
+      background: rgba(124, 199, 255, 0.08);
       box-shadow:
         0 0 0 1px rgba(31, 36, 40, 0.72),
         0 0 0 9999px rgba(0, 0, 0, 0.12),
@@ -2747,8 +2797,8 @@ function createStyleElement() {
     }
 
     .dfwr-selection-highlight.is-draft {
-      border-color: #63d7c7;
-      background: rgba(99, 215, 199, 0.1);
+      border-color: #7cc7ff;
+      background: rgba(124, 199, 255, 0.1);
       box-shadow:
         0 0 0 1px rgba(31, 36, 40, 0.72),
         0 0 0 9999px rgba(0, 0, 0, 0.08),
@@ -2759,9 +2809,9 @@ function createStyleElement() {
     .dfwr-dom-hover {
       position: fixed;
       z-index: 2;
-      border: 1px solid #d7ff5f;
+      border: 1px solid #7cc7ff;
       border-radius: var(--df-review-radius-xs);
-      background: rgba(215, 255, 95, 0.1);
+      background: rgba(124, 199, 255, 0.1);
       box-shadow:
         0 0 0 1px rgba(31, 36, 40, 0.72),
         0 0 0 9999px rgba(0, 0, 0, 0.08);
@@ -2942,12 +2992,12 @@ function createStyleElement() {
     }
 
     .dfwr-area-preview-layer .dfwr-bound-marker {
-      border-color: #63d7c7;
+      border-color: #7cc7ff;
       background: var(--df-review-color-panel);
       box-shadow:
-        0 0 0 5px rgba(99, 215, 199, 0.2),
+        0 0 0 5px rgba(124, 199, 255, 0.2),
         0 12px 26px rgba(0, 0, 0, 0.3);
-      color: #63d7c7;
+      color: #7cc7ff;
     }
 
     .dfwr-bound-marker-icon {
@@ -3030,7 +3080,7 @@ function createStyleElement() {
       border-radius: var(--df-review-radius-pill);
       background: var(--df-review-color-accent);
       box-shadow:
-        0 0 0 4px rgba(215, 255, 95, 0.22),
+        0 0 0 4px rgba(124, 199, 255, 0.22),
         0 8px 18px rgba(0, 0, 0, 0.28);
       cursor: grab;
       pointer-events: auto;
@@ -3048,7 +3098,7 @@ function createStyleElement() {
       pointer-events: auto;
       color: var(--df-review-color-text);
       background: var(--df-review-color-panel);
-      border: 1px solid rgba(215, 255, 95, 0.56);
+      border: 1px solid rgba(124, 199, 255, 0.56);
       border-radius: var(--df-review-radius-md);
       box-shadow: var(--df-review-shadow-popover);
     }
@@ -3057,7 +3107,7 @@ function createStyleElement() {
     .dfwr-area-draft.is-composer {
       max-height: min(360px, calc(100vh - 32px));
       overflow: auto;
-      border-color: rgba(99, 215, 199, 0.56);
+      border-color: rgba(124, 199, 255, 0.56);
     }
 
     .dfwr-shell.is-docked-composer .dfwr-dom-popover.is-docked-composer,
@@ -3094,7 +3144,7 @@ function createStyleElement() {
 
     .dfwr-draft-drag-handle:hover,
     .dfwr-draft-drag-handle:focus-visible {
-      background: rgba(215, 255, 95, 0.62);
+      background: rgba(124, 199, 255, 0.62);
     }
 
     .dfwr-draft-drag-handle:active {
@@ -3113,7 +3163,7 @@ function createStyleElement() {
       pointer-events: auto;
       color: var(--df-review-color-text);
       background: var(--df-review-color-panel);
-      border: 1px solid rgba(215, 255, 95, 0.56);
+      border: 1px solid rgba(124, 199, 255, 0.56);
       border-radius: var(--df-review-radius-md);
       box-shadow: var(--df-review-shadow-popover);
     }
@@ -3332,7 +3382,7 @@ function createStyleElement() {
     }
 
     .dfwr-adjust-panel.is-active {
-      border-color: rgba(215, 255, 95, 0.5);
+      border-color: rgba(124, 199, 255, 0.5);
       background: var(--df-review-color-accent-soft);
     }
 
@@ -3371,7 +3421,7 @@ function createStyleElement() {
     .dfwr-adjust-toggle:hover,
     .dfwr-adjust-toggle:focus-visible,
     .dfwr-adjust-toggle.is-active {
-      border-color: rgba(215, 255, 95, 0.68);
+      border-color: rgba(124, 199, 255, 0.68);
       background: var(--df-review-color-accent-soft);
       outline: none;
     }
@@ -3434,7 +3484,7 @@ function createStyleElement() {
     }
 
     .dfwr-item:focus-visible {
-      outline: 2px solid rgba(215, 255, 95, 0.72);
+      outline: 2px solid rgba(124, 199, 255, 0.72);
       outline-offset: 4px;
     }
 
@@ -3544,8 +3594,8 @@ function createStyleElement() {
       z-index: 2;
       width: 0;
       height: 0;
-      border: 1px solid #d7ff5f;
-      background: rgba(215, 255, 95, 0.16);
+      border: 1px solid #7cc7ff;
+      background: rgba(124, 199, 255, 0.16);
       box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.18);
     }
 
@@ -4622,6 +4672,12 @@ function createDomDraftLayer(context, draft, options = {}) {
   pin.setAttribute("aria-label", "Move DOM point");
   pin.style.left = `${hostPoint.x}px`;
   pin.style.top = `${hostPoint.y}px`;
+  if (draft.isSelectionOnly) {
+    pin.classList.add("is-selection-only");
+    pin.tabIndex = -1;
+    group.append(pin);
+    return { layer: group, composer: void 0 };
+  }
   const popover = document.createElement("div");
   const position = getPopoverPosition(hostPoint, environment);
   popover.className = [
@@ -4744,7 +4800,7 @@ function createDomDraftLayer(context, draft, options = {}) {
       attachments: currentDraft.attachments
     });
   };
-  const adjustmentControls = isElementDraft ? createAdjustmentControls(context, {
+  const adjustmentControls = isElementDraft && !options.dockComposer ? createAdjustmentControls(context, {
     draft,
     pin,
     popover,
@@ -5390,7 +5446,7 @@ var WebReviewKitView = class {
     this.draftPreview = new DraftPreviewController({
       getEnvironment: () => this.config.getEnvironment(),
       getMetrics: (draft) => getDraftAdjustmentMetrics(draft, presets()),
-      hasAdjustment: (draft) => hasDraftAdjustment(draft, presets())
+      hasAdjustment: (draft) => draft.adjustment?.preview !== false && hasDraftAdjustment(draft, presets())
     });
     this.draftContext = {
       config: this.config,
@@ -5411,8 +5467,11 @@ var WebReviewKitView = class {
     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());
+    const hasSelectionOnlyDraft = state.domDraft?.isSelectionOnly === true;
+    const hasDismissableDraft = Boolean(
+      state.domDraft && !hasSelectionOnlyDraft || state.areaDraft
+    );
+    const shouldDockComposer = this.config.options.ui?.panel === false && hasDismissableDraft && !hasSelectionOnlyDraft && Boolean(this.getShellComposerHost());
     let dockedComposer;
     const shell = document.createElement("div");
     shell.className = [
@@ -5534,13 +5593,7 @@ var WebReviewKitView = class {
 
 // src/core/web.review.kit.app.ts
 var ROOT_ID = "df-web-review-kit-root";
-function isEditableEventTarget(event) {
-  const path = event.composedPath?.() ?? [];
-  const element = path[0] ?? event.target;
-  if (!element || typeof element.tagName !== "string") return false;
-  const tag = element.tagName;
-  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || element.isContentEditable === true;
-}
+var VIEWPORT_SCROLL_OPTIONS = { capture: true, passive: true };
 function createWebReviewKit(options) {
   if (typeof window === "undefined" || typeof document === "undefined") {
     return createNoopController();
@@ -5553,6 +5606,8 @@ function createWebReviewKit(options) {
     toggle: () => app.toggle(),
     setMode: (mode) => app.setMode(mode),
     startElementReview: (element, comment) => app.startElementReview(element, comment),
+    selectElement: (element) => app.selectElement(element),
+    adjustElementSelection: (delta, adjustmentOptions) => app.adjustElementSelection(delta, adjustmentOptions),
     getMode: () => app.getMode(),
     highlightItem: (itemId) => app.highlightItem(itemId),
     setHiddenItemIds: (itemIds) => app.setHiddenItemIds(itemIds),
@@ -5573,6 +5628,12 @@ var WebReviewKitApp = class {
     this.isSelectingArea = false;
     this.handleKeyDown = (event) => {
       if (event.key === "Escape" && this.cancelMode()) {
+        const activeElement = document.activeElement;
+        if (activeElement instanceof HTMLButtonElement && activeElement.matches(
+          ".df-review-mode-button, .df-review-section-outline-link.is-dom-select"
+        )) {
+          activeElement.blur();
+        }
         event.preventDefault();
         event.stopPropagation();
         return;
@@ -5587,6 +5648,7 @@ var WebReviewKitApp = class {
       this.renderFrame = window.requestAnimationFrame(() => {
         this.renderFrame = void 0;
         if (this.isDraftComposerFocused()) return;
+        this.syncDomDraftViewportGeometry();
         this.render();
       });
     };
@@ -5644,16 +5706,48 @@ var WebReviewKitApp = class {
     this.shadow = this.root.attachShadow({ mode: "open" });
     document.body.appendChild(this.root);
     document.addEventListener("keydown", this.handleKeyDown, true);
-    window.addEventListener("scroll", this.handleViewportChange, true);
+    window.addEventListener(
+      "scroll",
+      this.handleViewportChange,
+      VIEWPORT_SCROLL_OPTIONS
+    );
     window.addEventListener("resize", this.handleViewportChange);
+    this.targetViewportWindow = this.getEnvironment()?.window;
+    if (this.targetViewportWindow && this.targetViewportWindow !== window) {
+      this.targetViewportWindow.addEventListener(
+        "scroll",
+        this.handleViewportChange,
+        VIEWPORT_SCROLL_OPTIONS
+      );
+      this.targetViewportWindow.addEventListener(
+        "resize",
+        this.handleViewportChange
+      );
+    }
     this.render();
   }
   destroy() {
     this.view.clearDraftPreview();
     this.clearDrafts();
     document.removeEventListener("keydown", this.handleKeyDown, true);
-    window.removeEventListener("scroll", this.handleViewportChange, true);
+    window.removeEventListener(
+      "scroll",
+      this.handleViewportChange,
+      VIEWPORT_SCROLL_OPTIONS
+    );
     window.removeEventListener("resize", this.handleViewportChange);
+    if (this.targetViewportWindow && this.targetViewportWindow !== window) {
+      this.targetViewportWindow.removeEventListener(
+        "scroll",
+        this.handleViewportChange,
+        VIEWPORT_SCROLL_OPTIONS
+      );
+      this.targetViewportWindow.removeEventListener(
+        "resize",
+        this.handleViewportChange
+      );
+    }
+    this.targetViewportWindow = void 0;
     if (this.renderFrame) {
       window.cancelAnimationFrame(this.renderFrame);
       this.renderFrame = void 0;
@@ -5698,6 +5792,33 @@ var WebReviewKitApp = class {
     this.isSelectingArea = false;
     await this.bindElementDraftToElement(element, { comment });
   }
+  async selectElement(element) {
+    if (!this.isOpen) {
+      this.isOpen = true;
+    }
+    this.setModeState("element");
+    this.clearDrafts();
+    this.isSelectingArea = false;
+    await this.bindElementDraftToElement(element, {
+      isSelectionOnly: true
+    });
+  }
+  adjustElementSelection(delta, options) {
+    if (!this.domDraft?.selection) return false;
+    const current = this.domDraft.adjustment;
+    this.domDraft = {
+      ...this.domDraft,
+      adjustment: {
+        x: (current?.x ?? 0) + (delta.x ?? 0),
+        y: (current?.y ?? 0) + (delta.y ?? 0),
+        scale: (current?.scale ?? 0) + (delta.scale ?? 0),
+        isActive: true,
+        preview: options?.preview ?? current?.preview
+      }
+    };
+    this.render();
+    return true;
+  }
   getMode() {
     return this.mode;
   }
@@ -5777,6 +5898,33 @@ var WebReviewKitApp = class {
     this.render();
     return true;
   }
+  syncDomDraftViewportGeometry() {
+    const draft = this.domDraft;
+    const element = draft?.previewElement;
+    const environment = this.getEnvironment();
+    if (!draft?.selection || !element?.isConnected || !environment || element.ownerDocument !== environment.document) {
+      return;
+    }
+    const rect = element.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) return;
+    const selection = {
+      left: rect.left,
+      top: rect.top,
+      width: rect.width,
+      height: rect.height
+    };
+    this.domDraft = {
+      ...draft,
+      marker: {
+        ...draft.marker,
+        viewport: roundPoint({ x: rect.left, y: rect.top })
+      },
+      selection: {
+        ...draft.selection,
+        viewport: toPublicSelection(selection)
+      }
+    };
+  }
   isDraftComposerFocused() {
     if (!this.domDraft && !this.areaDraft) return false;
     const composerHost = this.getEnvironment()?.composerHost;
@@ -6000,46 +6148,28 @@ 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,
+  captureDomDraft(input) {
+    return this.captureDraft(
       input,
-      input.selection?.viewport
+      () => this.domDraft,
+      (draft) => {
+        this.domDraft = draft;
+      }
+    );
+  }
+  captureAreaDraft(input) {
+    return this.captureDraft(
+      input,
+      () => this.areaDraft,
+      (draft) => {
+        this.areaDraft = draft;
+      }
     );
-    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) {
+  async captureDraft(input, getDraft, setDraft) {
     if (this.isCapturingViewport) return;
     const environment = this.getEnvironment();
-    const draft = this.areaDraft;
+    const draft = getDraft();
     if (!draft) return;
     if (!environment?.captureViewport) {
       this.draftError = "Viewport capture helper is not available.";
@@ -6057,16 +6187,13 @@ var WebReviewKitApp = class {
     try {
       const result = await environment.captureViewport(captureInput);
       const attachment = this.createCaptureDraftAttachment(result, captureInput);
-      const currentDraft = this.areaDraft ?? draft;
-      this.areaDraft = {
+      const currentDraft = getDraft() ?? draft;
+      setDraft({
         ...currentDraft,
         attachments: [...currentDraft.attachments ?? [], attachment]
-      };
+      });
     } catch (error) {
-      this.draftError = this.getErrorMessage(
-        error,
-        "Failed to capture viewport."
-      );
+      this.draftError = getErrorMessage(error, "Failed to capture viewport.");
     } finally {
       this.isCapturingViewport = false;
       this.render();
@@ -6205,17 +6332,10 @@ var WebReviewKitApp = class {
     );
   }
   getCreateItemErrorMessage(error, wasUploadingAttachments) {
-    const message = this.getErrorMessage(error, "Failed to save QA.");
+    const message = 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.clearDrafts();
@@ -6248,6 +6368,11 @@ function createNoopController() {
     },
     async startElementReview() {
     },
+    async selectElement() {
+    },
+    adjustElementSelection() {
+      return false;
+    },
     getMode() {
       return "idle";
     },