@designfever/web-review-kit 0.5.0 → 0.7.0

package/dist/{chunk-TWCSIBMY.js → chunk-RPVLRULC.js}

@@ -111,6 +111,9 @@ function normalizeStoredReviewItem(value) {
   };
 }
 
+// src/figma/image.types.ts
+var DEFAULT_REVIEW_FIGMA_IMAGE_FORMAT = "webp";
+
 // src/core/review/scope.ts
 var DEFAULT_REVIEW_VIEWPORTS = [
   { label: "Mobile", width: 390, height: 720, scope: "mobile" },
@@ -389,13 +392,13 @@ function getDomAnchorFromPoint(point, configuredAttribute = "data-qa-id", enviro
   const target = environment.document.elementFromPoint(point.x, point.y);
   if (!target) return void 0;
   const candidates = createAnchorCandidates(target, configuredAttribute);
-  const primary = candidates[0];
-  if (!primary) return void 0;
+  const primaryCandidate = candidates[0];
+  if (!primaryCandidate) return void 0;
   return {
-    ...primary,
+    ...primaryCandidate,
     candidates,
     htmlSnippet: getElementHtmlSnippet(
-      getAnchorSourceElement(target, primary, configuredAttribute) ?? target
+      getAnchorSourceElement(target, primaryCandidate, configuredAttribute) ?? target
     ),
     source: getDomSourceHint(target)
   };
@@ -403,13 +406,13 @@ function getDomAnchorFromPoint(point, configuredAttribute = "data-qa-id", enviro
 function getDomAnchorFromElement(target, configuredAttribute = "data-qa-id", environment) {
   if (target.ownerDocument !== environment.document) return void 0;
   const candidates = createAnchorCandidates(target, configuredAttribute);
-  const primary = candidates[0];
-  if (!primary) return void 0;
+  const primaryCandidate = candidates[0];
+  if (!primaryCandidate) return void 0;
   return {
-    ...primary,
+    ...primaryCandidate,
     candidates,
     htmlSnippet: getElementHtmlSnippet(
-      getAnchorSourceElement(target, primary, configuredAttribute) ?? target
+      getAnchorSourceElement(target, primaryCandidate, configuredAttribute) ?? target
     ),
     source: getDomSourceHint(target)
   };
@@ -580,7 +583,7 @@ function createAnchorCandidates(target, configuredAttribute) {
 function findClosestAttributeAnchor(target, attributeNames, confidence, options) {
   for (const attributeName of attributeNames) {
     const selector = `[${attributeName}]`;
-    const element = safeClosest(target, selector);
+    const element = tryClosest(target, selector);
     if (!element) continue;
     const value = getStableAttributeValue(element, attributeName);
     if (!value) continue;
@@ -686,7 +689,7 @@ function getAnchorSourceElement(target, candidate, configuredAttribute) {
     return target;
   }
 }
-function safeClosest(element, selector) {
+function tryClosest(element, selector) {
   try {
     return element.closest(selector);
   } catch {
@@ -1190,18 +1193,90 @@ function setDocumentScrollInstantly(environment, position) {
   );
 }
 
+// src/core/draft.metrics.ts
+function getDraftViewportScale(viewport, presets) {
+  const preset = findReviewViewportPreset(viewport, presets);
+  const designWidth = typeof preset.designWidth === "number" && preset.designWidth > 0 ? preset.designWidth : viewport.width;
+  const scale = designWidth > 0 ? viewport.width / designWidth : 1;
+  return { scale, designWidth, presetLabel: preset.label };
+}
+function getDraftAdjustmentMetrics(draft, presets) {
+  const adjustment = draft.adjustment;
+  const x = adjustment?.x ?? 0;
+  const y = adjustment?.y ?? 0;
+  const scale = adjustment?.scale ?? 0;
+  const {
+    scale: viewportScale,
+    designWidth,
+    presetLabel
+  } = getDraftViewportScale(draft.viewport, presets);
+  const selection = draft.selection ? toViewportSelection(draft.selection.viewport) : void 0;
+  const scaleCssDelta = scale * viewportScale;
+  const scaleFactor = selection && selection.width > 0 ? Math.max(
+    1 / selection.width,
+    (selection.width + scaleCssDelta) / selection.width
+  ) : 1;
+  return {
+    x,
+    y,
+    scale,
+    cssX: x * viewportScale,
+    cssY: y * viewportScale,
+    scaleFactor,
+    viewportScale,
+    designWidth,
+    presetLabel,
+    viewportWidth: draft.viewport.width
+  };
+}
+function hasDraftAdjustment(draft, presets) {
+  const metrics = getDraftAdjustmentMetrics(draft, presets);
+  return metrics.x !== 0 || metrics.y !== 0 || metrics.scale !== 0;
+}
+function getAdjustedDraftPoint(point, draft, presets) {
+  const metrics = getDraftAdjustmentMetrics(draft, presets);
+  return {
+    x: point.x + metrics.cssX,
+    y: point.y + metrics.cssY
+  };
+}
+function getAdjustedDraftSelection(selection, draft, presets) {
+  const metrics = getDraftAdjustmentMetrics(draft, presets);
+  return {
+    ...selection,
+    left: selection.left + metrics.cssX,
+    top: selection.top + metrics.cssY,
+    width: selection.width * metrics.scaleFactor,
+    height: selection.height * metrics.scaleFactor
+  };
+}
+
+// src/core/typography.tokens.ts
+var reviewTypographyTokens = `
+    --df-review-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --df-review-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+    --df-review-font-size-3xs: 9px;
+    --df-review-font-size-2xs: 10px;
+    --df-review-font-size-xs: 11px;
+    --df-review-font-size-sm: 12px;
+    --df-review-font-size-md: 13px;
+    --df-review-font-size-lg: 14px;
+    --df-review-font-size-xl: 15px;
+    --df-review-font-size-2xl: 18px;
+    --df-review-font-weight-normal: 400;
+    --df-review-font-weight-emphasis: 500;
+    --df-review-line-height-tight: 1.25;
+    --df-review-line-height-base: 1.42;
+    --df-review-line-height-relaxed: 1.55;
+`;
+
 // src/core/overlay.style.ts
 function createStyleElement() {
   const style = document.createElement("style");
   style.textContent = `
     :host {
       color-scheme: dark;
-      --df-review-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      --df-review-font-size-2xs: 10px;
-      --df-review-font-size-xs: 11px;
-      --df-review-font-size-sm: 12px;
-      --df-review-font-size-md: 13px;
-      --df-review-font-size-xl: 15px;
+      ${reviewTypographyTokens}
       --df-review-space-1: 4px;
       --df-review-space-1-5: 6px;
       --df-review-space-2: 8px;
@@ -1266,6 +1341,14 @@ function createStyleElement() {
       cursor: default;
     }
 
+    .dfwr-shell.is-docked-composer {
+      position: relative;
+      inset: auto;
+      z-index: auto;
+      padding: 0;
+      pointer-events: auto;
+    }
+
     .dfwr-panel {
       position: fixed;
       right: 16px;
@@ -1292,8 +1375,8 @@ function createStyleElement() {
     }
 
     .dfwr-title {
-      font-size: 15px;
-      font-weight: 700;
+      font-size: var(--df-review-font-size-xl);
+      font-weight: var(--df-review-font-weight-emphasis);
       line-height: 1.25;
     }
 
@@ -1337,11 +1420,15 @@ function createStyleElement() {
     }
 
     .dfwr-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
       min-height: var(--df-review-control-height-md);
       padding: 0 12px;
       border-radius: var(--df-review-radius-sm);
       font-size: var(--df-review-font-size-sm);
-      font-weight: 650;
+      font-weight: var(--df-review-font-weight-emphasis);
     }
 
     .dfwr-button:hover,
@@ -1357,6 +1444,21 @@ function createStyleElement() {
       color: var(--df-review-color-accent-contrast);
     }
 
+    .dfwr-button:disabled {
+      cursor: default;
+      opacity: 0.62;
+    }
+
+    .dfwr-spinner {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      border: 2px solid currentColor;
+      border-right-color: transparent;
+      border-radius: 999px;
+      animation: dfwr-spin 720ms linear infinite;
+    }
+
     .dfwr-icon-button {
       display: inline-flex;
       align-items: center;
@@ -1366,7 +1468,7 @@ function createStyleElement() {
       padding: 0 8px;
       border-radius: var(--df-review-radius-sm);
       font-size: var(--df-review-font-size-xs);
-      font-weight: 700;
+      font-weight: var(--df-review-font-weight-emphasis);
       line-height: 1;
       text-transform: uppercase;
     }
@@ -1521,7 +1623,7 @@ function createStyleElement() {
         0 8px 18px rgba(0, 0, 0, 0.28);
       color: #111820;
       font-size: var(--df-review-font-size-2xs);
-      font-weight: 900;
+      font-weight: var(--df-review-font-weight-emphasis);
       line-height: 1;
       pointer-events: none;
     }
@@ -1547,7 +1649,7 @@ function createStyleElement() {
       box-shadow: 0 0 0 4px rgba(var(--dfwr-scope-rgb), 0.18);
       color: var(--dfwr-scope);
       font-size: var(--df-review-font-size-2xs);
-      font-weight: 800;
+      font-weight: var(--df-review-font-weight-emphasis);
     }
 
     .dfwr-bound-marker.is-highlighted {
@@ -1766,6 +1868,20 @@ function createStyleElement() {
       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-area-draft.is-docked-composer {
+      position: relative;
+      left: auto;
+      right: auto;
+      top: auto;
+      z-index: auto;
+      max-height: none;
+    }
+
+    .dfwr-shell.is-docked-composer .dfwr-textarea {
+      min-height: 184px;
+    }
+
     .dfwr-note-popover.is-dragging,
     .dfwr-area-draft.is-dragging {
       user-select: none;
@@ -1814,6 +1930,50 @@ function createStyleElement() {
       padding: 0;
     }
 
+    .dfwr-actions.has-leading {
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+
+    .dfwr-actions-leading,
+    .dfwr-actions-primary {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      min-width: 0;
+    }
+
+    .dfwr-actions-primary {
+      margin-left: auto;
+    }
+
+    .dfwr-shell.is-docked-composer .dfwr-actions.has-leading {
+      align-items: stretch;
+    }
+
+    .dfwr-shell.is-docked-composer .dfwr-actions.has-leading .dfwr-button,
+    .dfwr-shell.is-docked-composer .dfwr-actions.has-leading .dfwr-adjust-toggle {
+      height: var(--df-review-control-height-md);
+      min-height: var(--df-review-control-height-md);
+      border-radius: var(--df-review-radius-sm);
+    }
+
+    .dfwr-shell.is-docked-composer .dfwr-actions.has-leading .dfwr-button {
+      min-width: 96px;
+      padding: 0 12px;
+      font-size: var(--df-review-font-size-sm);
+    }
+
+    .dfwr-shell.is-docked-composer .dfwr-actions.has-leading .dfwr-adjust-toggle {
+      width: var(--df-review-control-height-md);
+    }
+
+    .dfwr-shell.is-docked-composer .dfwr-actions.has-leading .dfwr-adjust-toggle svg {
+      width: 18px;
+      height: 18px;
+    }
+
     .dfwr-note-actions {
       justify-content: flex-end;
     }
@@ -1831,10 +1991,18 @@ function createStyleElement() {
       gap: 10px;
     }
 
+    .dfwr-form-error {
+      margin: 0;
+      color: #ff8f61;
+      font-size: var(--df-review-font-size-sm);
+      line-height: 1.4;
+      overflow-wrap: anywhere;
+    }
+
+    .dfwr-input,
+    .dfwr-select,
     .dfwr-textarea {
       width: 100%;
-      min-height: 92px;
-      resize: vertical;
       border: 1px solid rgba(255, 255, 255, 0.16);
       border-radius: var(--df-review-radius-sm);
       padding: 10px;
@@ -1845,14 +2013,39 @@ function createStyleElement() {
       line-height: 1.45;
     }
 
+    .dfwr-input,
+    .dfwr-select {
+      min-height: 38px;
+    }
+
+    .dfwr-select {
+      appearance: none;
+      cursor: pointer;
+    }
+
+    .dfwr-textarea {
+      min-height: 92px;
+      resize: vertical;
+    }
+
+    .dfwr-input:focus,
+    .dfwr-select:focus,
     .dfwr-textarea:focus {
       outline: 2px solid var(--df-review-color-accent-ring);
       outline-offset: 1px;
     }
 
     @media (hover: none) and (pointer: coarse) {
+      .dfwr-input,
+      .dfwr-select,
       .dfwr-textarea {
-        font-size: 16px;
+        font-size: var(--df-review-font-size-xl);
+      }
+    }
+
+    @keyframes dfwr-spin {
+      to {
+        transform: rotate(360deg);
       }
     }
 
@@ -1910,8 +2103,8 @@ function createStyleElement() {
       color: var(--df-review-color-text);
       cursor: pointer;
       font: inherit;
-      font-size: 14px;
-      font-weight: 800;
+      font-size: var(--df-review-font-size-lg);
+      font-weight: var(--df-review-font-weight-emphasis);
       line-height: 1;
     }
 
@@ -1964,7 +2157,7 @@ function createStyleElement() {
       margin-bottom: 10px;
       color: rgba(247, 247, 242, 0.74);
       font-size: var(--df-review-font-size-sm);
-      font-weight: 700;
+      font-weight: var(--df-review-font-weight-emphasis);
     }
 
     .dfwr-item {
@@ -1986,6 +2179,8 @@ function createStyleElement() {
     }
 
     .dfwr-item-body {
+      display: grid;
+      gap: 4px;
       min-width: 0;
       flex: 1;
     }
@@ -2005,7 +2200,7 @@ function createStyleElement() {
       border-radius: var(--df-review-radius-pill);
       padding: 0 7px;
       font-size: var(--df-review-font-size-2xs);
-      font-weight: 800;
+      font-weight: var(--df-review-font-weight-emphasis);
       line-height: 1;
       letter-spacing: 0;
       text-transform: uppercase;
@@ -2023,13 +2218,29 @@ function createStyleElement() {
       color: rgba(247, 247, 242, 0.64);
     }
 
+    .dfwr-item-title {
+      margin: 4px 0 0;
+      color: var(--df-review-color-text);
+      font-size: var(--df-review-font-size-md);
+      font-weight: var(--df-review-font-weight-normal);
+      line-height: 1.35;
+      overflow-wrap: anywhere;
+    }
+
     .dfwr-item-comment {
+      margin: 0;
+      color: var(--df-review-color-text-muted);
+      font-size: var(--df-review-font-size-sm);
+      line-height: 1.45;
+      overflow-wrap: anywhere;
+      white-space: pre-wrap;
+    }
+
+    .dfwr-item-comment.is-primary {
       margin: 4px 0;
       color: var(--df-review-color-text);
       font-size: var(--df-review-font-size-md);
       line-height: 1.42;
-      overflow-wrap: anywhere;
-      white-space: pre-wrap;
     }
 
     .dfwr-item-date {
@@ -2138,10 +2349,12 @@ function createStyleElement() {
 
     @media (max-width: 520px) {
       .dfwr-panel {
+        left: 8px;
         right: 8px;
-        top: 8px;
-        width: calc(100vw - 16px);
-        max-height: calc(100vh - 16px);
+        top: auto;
+        bottom: 8px;
+        width: auto;
+        max-height: min(70vh, calc(100vh - 16px));
       }
     }
   `;
@@ -2221,6 +2434,7 @@ var WebReviewKitView = class {
   }
   clearDraftPreview() {
     this.restoreDraftPreview();
+    this.clearShellComposer();
   }
   render(shadow, hiddenItemsStyle) {
     const state = this.state;
@@ -2231,11 +2445,13 @@ var WebReviewKitView = class {
     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 ? "has-dismissible-draft" : ""
+      hasDismissableDraft && !shouldDockComposer ? "has-dismissible-draft" : ""
     ].filter(Boolean).join(" ");
     shell.setAttribute("aria-hidden", state.isOpen ? "false" : "true");
     if (this.config.options.ui?.panel !== false) {
@@ -2252,105 +2468,119 @@ var WebReviewKitView = class {
       shell.append(panel);
     }
     shell.append(this.createMarkerLayer());
-    if (state.isOpen && hasDismissableDraft) {
+    if (state.isOpen && hasDismissableDraft && !shouldDockComposer) {
       shell.append(this.createDraftCancelLayer());
     }
     if (state.isOpen && (state.mode === "note" || state.mode === "element")) {
-      shell.append(
-        state.noteDraft ? this.createNotePopover(state.noteDraft) : state.mode === "element" ? this.createElementLayer() : this.createNoteLayer()
-      );
+      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) {
+    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));
       }
-      shell.append(this.createAreaDraftPopover(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");
-    const cancel = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      event.stopImmediatePropagation();
-      this.config.actions.setModeState("idle");
-      this.config.actions.clearDrafts();
-      this.config.actions.setSelectingArea(false);
-      this.config.actions.render();
-    };
     layer.addEventListener("pointerdown", (event) => {
       if (event.button !== 0) return;
-      cancel(event);
+      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) {
-    const adjustment = draft.adjustment;
-    const x = adjustment?.x ?? 0;
-    const y = adjustment?.y ?? 0;
-    const scale = adjustment?.scale ?? 0;
-    const {
-      scale: viewportScale,
-      designWidth,
-      presetLabel
-    } = this.getDraftViewportScale(draft.viewport);
-    const selection = draft.selection ? toViewportSelection(draft.selection.viewport) : void 0;
-    const scaleCssDelta = scale * viewportScale;
-    const scaleFactor = selection && selection.width > 0 ? Math.max(
-      1 / selection.width,
-      (selection.width + scaleCssDelta) / selection.width
-    ) : 1;
-    return {
-      x,
-      y,
-      scale,
-      cssX: x * viewportScale,
-      cssY: y * viewportScale,
-      scaleFactor,
-      viewportScale,
-      designWidth,
-      presetLabel,
-      viewportWidth: draft.viewport.width
-    };
+    return getDraftAdjustmentMetrics(draft, this.viewportPresets);
   }
   hasDraftAdjustment(draft) {
-    const metrics = this.getDraftAdjustmentMetrics(draft);
-    return metrics.x !== 0 || metrics.y !== 0 || metrics.scale !== 0;
+    return hasDraftAdjustment(draft, this.viewportPresets);
   }
   getAdjustedDraftPoint(point, draft) {
-    const metrics = this.getDraftAdjustmentMetrics(draft);
-    return {
-      x: point.x + metrics.cssX,
-      y: point.y + metrics.cssY
-    };
+    return getAdjustedDraftPoint(point, draft, this.viewportPresets);
   }
   getAdjustedDraftSelection(selection, draft) {
-    const metrics = this.getDraftAdjustmentMetrics(draft);
-    return {
-      ...selection,
-      left: selection.left + metrics.cssX,
-      top: selection.top + metrics.cssY,
-      width: selection.width * metrics.scaleFactor,
-      height: selection.height * metrics.scaleFactor
-    };
+    return getAdjustedDraftSelection(
+      selection,
+      draft,
+      this.viewportPresets
+    );
   }
   getDraftViewportScale(viewport) {
-    const preset = findReviewViewportPreset(
-      viewport,
-      this.config.options.viewports?.presets
-    );
-    const designWidth = typeof preset.designWidth === "number" && preset.designWidth > 0 ? preset.designWidth : viewport.width;
-    const scale = designWidth > 0 ? viewport.width / designWidth : 1;
-    return { scale, designWidth, presetLabel: preset.label };
+    return getDraftViewportScale(viewport, this.viewportPresets);
   }
   getDraftComposerWidth(environment) {
     const bounds = environment.overlayRect;
@@ -2496,6 +2726,67 @@ var WebReviewKitView = class {
     return trimmedComment ? `${trimmedComment}
 ${adjustment}` : adjustment;
   }
+  getAssigneeOption(assigneeId) {
+    if (!assigneeId) return void 0;
+    return this.config.options.assigneeOptions?.find(
+      (option) => option.value === assigneeId
+    );
+  }
+  getAssigneeName(assigneeId) {
+    return this.getAssigneeOption(assigneeId)?.label;
+  }
+  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;
+  }
+  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;
+  }
+  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)
+    };
+  }
   getStyleableDraftElement(draft, environment) {
     if (draft.previewElement && draft.previewElement.ownerDocument === environment.document && "style" in draft.previewElement) {
       return draft.previewElement;
@@ -2686,11 +2977,14 @@ ${adjustment}` : adjustment;
     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;
   }
-  createNotePopover(draft) {
+  // 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 group;
+    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,
@@ -2714,8 +3008,14 @@ ${adjustment}` : adjustment;
     pin.style.top = `${hostPoint.y}px`;
     const popover = document.createElement("div");
     const position = getPopoverPosition(hostPoint, environment);
-    popover.className = `dfwr-note-popover${isElementDraft ? " is-composer" : ""}`;
-    if (isElementDraft) {
+    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),
@@ -2743,6 +3043,14 @@ ${adjustment}` : adjustment;
       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";
@@ -2756,13 +3064,30 @@ ${adjustment}` : adjustment;
         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
+        });
+      }
+    );
     const saveDraft = () => {
-      const comment = textarea.value.trim();
       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,
@@ -2774,18 +3099,31 @@ ${adjustment}` : adjustment;
       pin,
       popover,
       selectionHighlight,
-      textarea
+      textarea,
+      dockToggle: options.dockComposer
     }) : void 0;
-    const actions = this.createFormActions("Save note", saveDraft);
+    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 ? this.createDraftDragHandle("Move DOM composer") : void 0;
-    popover.append(...dragHandle ? [dragHandle] : [], form);
-    group.append(pin, popover);
+    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;
@@ -2798,18 +3136,23 @@ ${adjustment}` : adjustment;
     }
     this.attachDraftPinDrag(
       pin,
-      isElementDraft ? void 0 : popover,
+      isElementDraft || options.dockComposer ? void 0 : popover,
       meta,
       textarea
     );
-    window.setTimeout(() => {
-      if (draft.adjustment?.isActive) {
-        adjustmentControls?.focusTarget.focus();
-        return;
-      }
-      textarea.focus();
-    }, 0);
-    return group;
+    if (!options.dockComposer) {
+      window.setTimeout(() => {
+        if (draft.adjustment?.isActive) {
+          adjustmentControls?.focusTarget.focus();
+          return;
+        }
+        textarea.focus();
+      }, 0);
+    }
+    return {
+      layer: group,
+      composer: options.dockComposer ? popover : void 0
+    };
   }
   createDraftDragHandle(label) {
     const handle = document.createElement("button");
@@ -2896,12 +3239,16 @@ ${adjustment}` : adjustment;
     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
+    textarea,
+    dockToggle
   }) {
     const panel = document.createElement("div");
     panel.className = "dfwr-adjust-panel is-dom-adjust-panel";
@@ -2977,12 +3324,16 @@ ${adjustment}` : adjustment;
         }
       }));
     });
-    header.append(help, adjust);
+    header.append(help);
+    if (!dockToggle) {
+      header.append(adjust);
+    }
     panel.append(header, xyStatus, scaleStatus);
     syncControls(draft);
     return {
       panel,
-      focusTarget: adjust
+      focusTarget: adjust,
+      actionButton: dockToggle ? adjust : void 0
     };
   }
   getAdjustmentKeyDelta(event) {
@@ -3035,6 +3386,14 @@ ${adjustment}` : adjustment;
       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({
+        ...draft,
+        title
+      });
+    }) : void 0;
     const textarea = document.createElement("textarea");
     textarea.className = "dfwr-textarea";
     textarea.placeholder = "Area comment";
@@ -3048,20 +3407,44 @@ ${adjustment}` : adjustment;
         comment: textarea.value
       });
     });
+    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 comment = textarea.value.trim();
       const draft = this.state.areaDraft;
+      const fields = this.getDraftFields(titleInput, textarea, assigneeSelect);
+      const comment = fields.comment;
       if (!comment || !draft) return;
       void this.config.actions.createItem({
         kind: "area",
+        title: fields.title,
         comment,
+        assigneeId: fields.assigneeId,
+        assigneeName: fields.assigneeName,
         viewport: draft.viewport,
         anchor: draft.anchor,
         marker: draft.marker,
         selection: draft.selection
       });
     });
-    form.append(textarea, actions);
+    const error = this.createDraftError();
+    form.append(
+      ...titleInput ? [titleInput] : [],
+      textarea,
+      ...assigneeSelect ? [assigneeSelect] : [],
+      ...error ? [error] : [],
+      actions
+    );
     return form;
   }
   createAreaMetricsPanel(draft) {
@@ -3108,11 +3491,17 @@ ${adjustment}` : adjustment;
     }
     return layer;
   }
-  createAreaDraftPopover(draft) {
+  createAreaDraftPopover(draft, options = {}) {
     const environment = this.config.getEnvironment();
     const popover = document.createElement("div");
-    popover.className = "dfwr-area-draft is-composer";
-    if (environment && draft.selection) {
+    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
@@ -3128,40 +3517,61 @@ ${adjustment}` : adjustment;
       popover.style.width = `${composer.width}px`;
       popover.style.right = "auto";
     }
-    const dragHandle = this.createDraftDragHandle("Move area composer");
-    popover.append(dragHandle, this.createAreaForm());
-    this.attachDraftComposerDrag(popover, dragHandle, (composerPosition) => {
-      const areaDraft = this.state.areaDraft ?? draft;
-      this.config.actions.setAreaDraft({
-        ...areaDraft,
-        composerPosition
+    const dragHandle = options.dockComposer ? void 0 : this.createDraftDragHandle("Move area composer");
+    popover.append(
+      ...dragHandle ? [dragHandle] : [],
+      this.createAreaForm()
+    );
+    if (dragHandle) {
+      this.attachDraftComposerDrag(popover, dragHandle, (composerPosition) => {
+        const areaDraft = this.state.areaDraft ?? draft;
+        this.config.actions.setAreaDraft({
+          ...areaDraft,
+          composerPosition
+        });
       });
-    });
+    }
     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.textContent = saveLabel;
+    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 cancel = document.createElement("button");
     cancel.className = "dfwr-button";
     cancel.type = "button";
+    cancel.disabled = isSaving;
     cancel.textContent = "Cancel";
     cancel.addEventListener("click", (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      this.config.actions.setModeState("idle");
-      this.config.actions.clearDrafts();
-      this.config.actions.render();
+      this.cancelDraft(event);
     });
+    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;
@@ -3169,6 +3579,20 @@ ${adjustment}` : adjustment;
     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";
@@ -3221,14 +3645,20 @@ ${adjustment}` : adjustment;
     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";
+    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, comment, date);
+    body.append(badges, ...titleElement ? [titleElement] : [], comment, date);
     const actions = document.createElement("div");
     actions.className = "dfwr-item-actions";
     actions.addEventListener("click", (event) => event.stopPropagation());
@@ -3417,7 +3847,14 @@ ${formatItemMeta(item)}`;
         event,
         this.config.getEnvironment()
       );
-      void (this.state.mode === "element" ? this.config.actions.bindElementDraftToPoint(nextPoint, textarea.value) : this.config.actions.bindNoteDraftToPoint(nextPoint, textarea.value));
+      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));
     });
   }
   createNoteLayer() {
@@ -3495,10 +3932,14 @@ ${formatItemMeta(item)}`;
     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,
-        this.config.getEnvironment()
+        nextEnvironment
       );
       const left = Math.min(startX, nextPoint.x);
       const top = Math.min(startY, nextPoint.y);
@@ -3506,7 +3947,7 @@ ${formatItemMeta(item)}`;
       const height = Math.abs(nextPoint.y - startY);
       const hostPoint = toHostPoint(
         { x: left, y: top },
-        this.config.getEnvironment()
+        nextEnvironment
       );
       selection = { left, top, width, height };
       box.style.left = `${hostPoint.x}px`;
@@ -3514,9 +3955,68 @@ ${formatItemMeta(item)}`;
       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.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0) return;
       event.preventDefault();
-      layer.setPointerCapture(event.pointerId);
+      activePointerId = event.pointerId;
+      isDragging = true;
+      try {
+        layer.setPointerCapture(event.pointerId);
+      } catch {
+      }
       const startPoint = toTargetPointFromHostEvent(
         event,
         this.config.getEnvironment()
@@ -3524,20 +4024,11 @@ ${formatItemMeta(item)}`;
       startX = startPoint.x;
       startY = startPoint.y;
       updateBox(event);
+      addDragListeners();
     });
-    layer.addEventListener("pointermove", (event) => {
-      if (!layer.hasPointerCapture(event.pointerId)) return;
-      updateBox(event);
-    });
-    layer.addEventListener("pointerup", (event) => {
-      if (!layer.hasPointerCapture(event.pointerId)) return;
-      layer.releasePointerCapture(event.pointerId);
-      updateBox(event);
-      if (!selection || selection.width < 8 || selection.height < 8) return;
-      this.config.actions.setSelectingArea(true);
-      this.config.actions.render();
-      void this.config.actions.createAreaDraft(selection);
-    });
+    layer.addEventListener("pointermove", handlePointerMove);
+    layer.addEventListener("pointerup", handlePointerUp);
+    layer.addEventListener("pointercancel", handlePointerCancel);
     return layer;
   }
 };
@@ -3577,6 +4068,8 @@ var WebReviewKitApp = class {
     this.isOpen = false;
     this.mode = "idle";
     this.items = [];
+    this.draftError = "";
+    this.isCreatingItem = false;
     this.isSelectingArea = false;
     this.handleKeyDown = (event) => {
       if (event.key === "Escape" && this.cancelMode()) {
@@ -3590,9 +4083,10 @@ var WebReviewKitApp = class {
       this.toggle();
     };
     this.handleViewportChange = () => {
-      if (!this.isOpen || this.renderFrame) return;
+      if (!this.isOpen || this.renderFrame || this.isDraftComposerFocused()) return;
       this.renderFrame = window.requestAnimationFrame(() => {
         this.renderFrame = void 0;
+        if (this.isDraftComposerFocused()) return;
         this.render();
       });
     };
@@ -3606,6 +4100,8 @@ var WebReviewKitApp = class {
         items: this.items,
         noteDraft: this.noteDraft,
         areaDraft: this.areaDraft,
+        draftError: this.draftError,
+        isCreatingItem: this.isCreatingItem,
         isSelectingArea: this.isSelectingArea,
         highlightedItemId: this.highlightedItemId
       }),
@@ -3620,19 +4116,22 @@ var WebReviewKitApp = class {
         clearDrafts: () => {
           this.noteDraft = void 0;
           this.areaDraft = void 0;
+          this.draftError = "";
         },
         setNoteDraft: (draft) => {
           this.noteDraft = draft;
+          this.draftError = "";
         },
         setAreaDraft: (draft) => {
           this.areaDraft = draft;
+          this.draftError = "";
         },
         setSelectingArea: (isSelectingArea) => {
           this.isSelectingArea = isSelectingArea;
         },
         createItem: (input) => this.createItem(input),
-        bindNoteDraftToPoint: (point, comment) => this.bindNoteDraftToPoint(point, comment),
-        bindElementDraftToPoint: (point, comment) => this.bindElementDraftToPoint(point, comment),
+        bindNoteDraftToPoint: (point, fields) => this.bindNoteDraftToPoint(point, fields),
+        bindElementDraftToPoint: (point, fields) => this.bindElementDraftToPoint(point, fields),
         createAreaDraft: (selection) => this.createAreaDraft(selection)
       }
     });
@@ -3701,7 +4200,7 @@ var WebReviewKitApp = class {
     this.noteDraft = void 0;
     this.areaDraft = void 0;
     this.isSelectingArea = false;
-    await this.bindElementDraftToElement(element, comment);
+    await this.bindElementDraftToElement(element, { comment });
   }
   getMode() {
     return this.mode;
@@ -3769,6 +4268,14 @@ var WebReviewKitApp = class {
     this.render();
     return true;
   }
+  isDraftComposerFocused() {
+    if (!this.noteDraft && !this.areaDraft) return false;
+    const composerHost = this.getEnvironment()?.composerHost;
+    const activeElement = composerHost?.ownerDocument.activeElement;
+    return Boolean(
+      composerHost && activeElement && composerHost.contains(activeElement)
+    );
+  }
   getEnvironment() {
     const target = typeof this.options.target === "function" ? this.options.target() : this.options.target;
     if (!target) {
@@ -3797,6 +4304,7 @@ var WebReviewKitApp = class {
         height: target.window.innerHeight
       };
       const overlayRect = target.getOverlayRect?.() ?? rect;
+      const composerHost = target.getComposerHost?.();
       return {
         window: target.window,
         document: target.document,
@@ -3811,7 +4319,8 @@ var WebReviewKitApp = class {
           top: overlayRect.top,
           width: overlayRect.width,
           height: overlayRect.height
-        }
+        },
+        composerHost
       };
     } catch {
       return void 0;
@@ -3834,7 +4343,7 @@ var WebReviewKitApp = class {
     if (!this.shadow) return;
     this.view.render(this.shadow, this.createHiddenItemsStyleElement());
   }
-  async bindNoteDraftToPoint(point, comment) {
+  async bindNoteDraftToPoint(point, fields = {}) {
     const environment = this.getEnvironment();
     if (!environment) return;
     const viewport = getViewportSize(environment);
@@ -3854,13 +4363,13 @@ var WebReviewKitApp = class {
         viewport,
         anchor,
         marker,
-        comment
+        ...fields
       };
     });
     this.noteDraft = draft;
     this.render();
   }
-  async bindElementDraftToPoint(point, comment) {
+  async bindElementDraftToPoint(point, fields = {}) {
     const environment = this.getEnvironment();
     if (!environment) return;
     const viewport = getViewportSize(environment);
@@ -3904,14 +4413,14 @@ var WebReviewKitApp = class {
         anchor,
         marker,
         selection: reviewSelection,
-        comment,
+        ...fields,
         previewElement
       };
     });
     this.noteDraft = draft;
     this.render();
   }
-  async bindElementDraftToElement(element, comment) {
+  async bindElementDraftToElement(element, fields = {}) {
     const environment = this.getEnvironment();
     if (!environment || element.ownerDocument !== environment.document) return;
     const viewport = getViewportSize(environment);
@@ -3944,7 +4453,7 @@ var WebReviewKitApp = class {
         anchor,
         marker,
         selection: reviewSelection,
-        comment,
+        ...fields,
         previewElement
       };
     });
@@ -3954,26 +4463,33 @@ var WebReviewKitApp = class {
   }
   async createAreaDraft(selection) {
     const environment = this.getEnvironment();
-    if (!environment) return;
-    const viewport = getViewportSize(environment);
-    this.areaDraft = await this.withOverlayHidden(() => {
-      const marker = createSelectionCenterMarker(
-        selection,
-        void 0,
-        environment
-      );
-      const reviewSelection = {
-        viewport: toPublicSelection(selection)
-      };
-      return {
-        viewport,
-        marker,
-        selection: reviewSelection
-      };
-    });
-    this.isSelectingArea = false;
-    this.setModeState("area");
-    this.render();
+    if (!environment) {
+      this.isSelectingArea = false;
+      this.render();
+      return;
+    }
+    try {
+      const viewport = getViewportSize(environment);
+      this.areaDraft = await this.withOverlayHidden(() => {
+        const marker = createSelectionCenterMarker(
+          selection,
+          void 0,
+          environment
+        );
+        const reviewSelection = {
+          viewport: toPublicSelection(selection)
+        };
+        return {
+          viewport,
+          marker,
+          selection: reviewSelection
+        };
+      });
+      this.setModeState("area");
+    } finally {
+      this.isSelectingArea = false;
+      this.render();
+    }
   }
   async withOverlayHidden(callback) {
     if (!this.root) return callback();
@@ -3987,11 +4503,16 @@ var WebReviewKitApp = class {
   }
   async createItem(input) {
     const environment = this.getEnvironment();
-    if (!environment) return;
+    if (!environment || this.isCreatingItem) return;
     const now = (/* @__PURE__ */ new Date()).toISOString();
     const routeKey = getRouteKey(environment);
     const viewport = input.viewport ?? getViewportSize(environment);
     const createdBy = this.options.userId?.trim();
+    const title = input.title?.trim();
+    const assigneeId = input.assigneeId?.trim() || void 0;
+    const assigneeOption = this.options.assigneeOptions?.find(
+      (option) => option.value === assigneeId
+    );
     const item = {
       id: createId(),
       projectId: this.options.projectId,
@@ -4001,8 +4522,10 @@ var WebReviewKitApp = class {
       normalizedPath: routeKey,
       scope: input.scope ?? getReviewViewportScope(viewport, this.options.viewports?.presets),
       kind: input.kind,
-      title: input.comment.split("\n")[0]?.slice(0, 80),
+      title: title || void 0,
       comment: input.comment,
+      assigneeId,
+      assigneeName: input.assigneeName ?? assigneeOption?.label,
       createdBy: createdBy || void 0,
       status: "todo",
       viewport,
@@ -4017,13 +4540,23 @@ var WebReviewKitApp = class {
       createdAt: now,
       updatedAt: now
     };
-    const createdItem = await this.adapter.create(item);
-    this.setModeState("idle");
-    this.noteDraft = void 0;
-    this.areaDraft = void 0;
-    this.highlightItem(createdItem.id);
-    await this.reload();
-    await this.options.onCreateItem?.(createdItem);
+    this.draftError = "";
+    this.isCreatingItem = true;
+    this.render();
+    try {
+      const createdItem = await this.adapter.create(item);
+      this.setModeState("idle");
+      this.noteDraft = void 0;
+      this.areaDraft = void 0;
+      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.";
+    } finally {
+      this.isCreatingItem = false;
+      this.render();
+    }
   }
   async restoreItem(item) {
     this.setModeState("idle");
@@ -4080,6 +4613,7 @@ export {
   REVIEW_WORKFLOW_STATUS_OPTIONS,
   normalizeReviewItemStatus,
   localAdapter,
+  DEFAULT_REVIEW_FIGMA_IMAGE_FORMAT,
   clamp,
   DEFAULT_REVIEW_VIEWPORTS,
   findReviewViewportPreset,
@@ -4088,6 +4622,7 @@ export {
   getReviewItemScopeLabel,
   getNumberedReviewItems,
   runWithAutoScrollBehavior,
+  reviewTypographyTokens,
   createWebReviewKit
 };
-//# sourceMappingURL=chunk-TWCSIBMY.js.map
+//# sourceMappingURL=chunk-RPVLRULC.js.map