@designfever/web-review-kit 0.8.0 → 0.8.2

package/dist/{chunk-4ZP7B7R6.js → chunk-ZWJNUOYV.js}

@@ -1321,6 +1321,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
@@ -1345,16 +1346,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";
@@ -1366,6 +1362,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";
@@ -1441,11 +1445,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);
@@ -1631,9 +1635,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),
@@ -1642,8 +1646,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),
@@ -1654,9 +1658,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);
@@ -1837,12 +1841,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 {
@@ -1925,7 +1929,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;
@@ -1943,7 +1947,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);
     }
@@ -1952,7 +1956,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,
@@ -1989,7 +1993,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 {
@@ -2008,7 +2012,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);
     }
@@ -2227,7 +2231,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);
     }
 
@@ -2266,7 +2270,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;
     }
@@ -2329,7 +2333,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;
     }
 
@@ -2439,8 +2443,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);
     }
 
@@ -3517,6 +3521,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 = [
@@ -3639,7 +3649,7 @@ function createDomDraftLayer(context, draft, options = {}) {
       attachments: currentDraft.attachments
     });
   };
-  const adjustmentControls = isElementDraft ? createAdjustmentControls(context, {
+  const adjustmentControls = isElementDraft && !options.dockComposer ? createAdjustmentControls(context, {
     draft,
     pin,
     popover,
@@ -4285,7 +4295,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,
@@ -4306,8 +4316,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 = [
@@ -4429,6 +4442,7 @@ var WebReviewKitView = class {
 
 // src/core/web.review.kit.app.ts
 var ROOT_ID = "df-web-review-kit-root";
+var VIEWPORT_SCROLL_OPTIONS = { capture: true, passive: true };
 function isEditableEventTarget(event) {
   const path = event.composedPath?.() ?? [];
   const element = path[0] ?? event.target;
@@ -4448,6 +4462,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),
@@ -4468,6 +4484,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;
@@ -4482,6 +4504,7 @@ var WebReviewKitApp = class {
       this.renderFrame = window.requestAnimationFrame(() => {
         this.renderFrame = void 0;
         if (this.isDraftComposerFocused()) return;
+        this.syncDomDraftViewportGeometry();
         this.render();
       });
     };
@@ -4539,16 +4562,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;
@@ -4593,6 +4648,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;
   }
@@ -4672,6 +4754,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;
@@ -5143,6 +5252,11 @@ function createNoopController() {
     },
     async startElementReview() {
     },
+    async selectElement() {
+    },
+    adjustElementSelection() {
+      return false;
+    },
     getMode() {
       return "idle";
     },
@@ -5181,7 +5295,8 @@ export {
   getItemHighlightSelection,
   shouldShowMarkerForScope,
   runWithAutoScrollBehavior,
+  getDraftViewportScale,
   reviewTypographyTokens,
   createWebReviewKit
 };
-//# sourceMappingURL=chunk-4ZP7B7R6.js.map
+//# sourceMappingURL=chunk-ZWJNUOYV.js.map