@erdemtuna/doc-review 0.12.0 → 0.13.0

package/lib/sdk.js

@@ -5,9 +5,10 @@
  * document: editing, highlights, target resolution and serialization. It never
  * talks to the server — everything crosses to the chrome page by postMessage.
  */
-import { buildContext, findQuote } from "./anchor-text.js";
+import { buildContext, findQuote, resolveQuote } from "./anchor-text.js";
+import { createThreadAnchorController } from "./thread-anchor-controller.js";
 import { hashClickAction, navigationHref } from "./click-target.js";
-import { acceptedOpenGeneration, createHoverIntent, groupCommentTargets, nextCommentId, normalizeSelectionRange, pointInCommentApproach, sameRange, targetMessage } from "./comment-target.js";
+import { acceptedOpenGeneration, createHoverIntent, groupCommentTargets, nextCommentId, normalizeSelectionRange, pointInCommentApproach, sameRange, sameThreadTarget, targetMessage } from "./comment-target.js";
 import { classifyHref, externalHref, linkStyleFixup, listCommandFor, listStyleFixup, normalizeHref } from "./editing.js";
 import { frameMessage, initializeChannelFromDocument, matchesFrameMessage } from "./frame-channel.js";
 import { iconMarkup } from "./icons.js";
@@ -32,6 +33,7 @@ let targetGeneration = 0;
 let targetObserver = null;
 let targetIntersection = null;
 let reviewMode = "view";
+let canComment = false;
 let savePolicy = "writable";
 let modeController = null;
 let hoverTarget = null;
@@ -41,6 +43,7 @@ let resizing = null; // live drag state while the grip is held
 let suppressUntil = 0; // ignore the mouseup/click that ends a resize drag
 let saveTimer = null;
 let composeOpen = false;
+let retiredComposeGeneration = 0;
 let commentOpenRequestGeneration = null;
 let activeCommentId = null;
 let modeMenuOpen = false;
@@ -61,6 +64,8 @@ let themeRevision = 0;
 let themeWarnings = 0;
 const blockTargets = new Map();
 const blockMarkers = new Map();
+let threadAnchors = null;
+const threadTargets = new Map();
 /** True when the page's own scripts rewrote the DOM before any user edit. */
 let dynamic = false;
 const diagnostic = (event, detail = {}) => {
@@ -175,7 +180,7 @@ shadow.innerHTML = `
     .active { border: 2px solid var(--review-annotation-border); }
     .block-marker { position: fixed; pointer-events: none; z-index: 2147483644;
       box-sizing: border-box; border-left: 3px solid var(--review-annotation-border); background: var(--review-annotation-tint); }
-    .block-marker[data-active="true"] { border-left-width: 6px; background: var(--review-annotation-active-tint); }
+    .block-marker[data-active="true"] { border-left-width: 3px; background: var(--review-annotation-active-tint); }
     .block-badge { position: fixed; z-index: 2147483647; pointer-events: auto;
       height: 24px; min-width: 32px; box-sizing: border-box; padding: 2px 6px;
       border: 1px solid var(--review-annotation-border); border-radius: 5px; background: var(--review-annotation-background); color: var(--review-annotation-foreground);
@@ -242,9 +247,12 @@ shadow.innerHTML = `
     button:focus-visible, input:focus-visible, .mover:focus-visible, .grip:focus-visible {
       outline: 3px solid var(--review-ring); outline-offset: 2px;
     }
-    .box, .block-marker, .block-badge, .chip, .grip, .hint, .linkbox, .mover, .dropline, .comment-action {
+    .chip, .grip, .hint, .linkbox, .mover, .dropline, .comment-action {
       box-shadow: 0 0 0 1px var(--review-halo-light), 0 0 0 2px var(--review-halo-dark), 0 3px 10px var(--review-review-shadow-color);
     }
+    .block-marker { box-shadow: 0 0 0 1px var(--review-halo-light); }
+    .block-badge { box-shadow: 0 1px 4px var(--review-review-shadow-color); }
+    .box.active { box-shadow: 0 0 0 1px var(--review-halo-light); border-width: 1px; }
     .selection-cues { position: fixed; inset: 0; pointer-events: none; z-index: 2147483645; }
     .selection-cue { position: fixed; border-radius: 2px; background: var(--review-annotation-tint);
       box-shadow: inset 0 -2px var(--review-annotation-border), 0 1px var(--review-halo-light), 0 2px var(--review-halo-dark); }
@@ -267,7 +275,7 @@ shadow.innerHTML = `
   <div class="dropline" id="dropline"></div>
   <div class="selection-cues" id="selectionCues"></div>
   <div id="blockAnnotations" role="group" aria-label="Saved block comments"></div>
-  <button class="comment-action" id="commentAction" title="Comment on this target" aria-label="Comment on this target">${iconMarkup("messageSquarePlus", { size: 17 })}</button>
+  <button class="comment-action" id="commentAction" disabled title="Comment on this target" aria-label="Comment on this target">${iconMarkup("messageSquarePlus", { size: 17 })}</button>
 `;
 const els = {};
 const mountOverlay = () => {
@@ -295,7 +303,8 @@ function positionBlockBadge(badge, rect) {
     const candidates = [
         [rect.left - width - 5, rect.top], [rect.right + 5, rect.top],
         [rect.right - width, rect.top - height - 5], [rect.right - width, rect.bottom + 5],
-        [innerWidth - width - 4, rect.top], [4, rect.top],
+        [innerWidth - width - 4, Math.max(4, Math.min(innerHeight - height - 4, rect.top))],
+        [4, Math.max(4, Math.min(innerHeight - height - 4, rect.top))],
     ];
     const controls = "a[href], button, input, select, textarea, summary, [role=button], [role=tab], [contenteditable=true]";
     const occupied = [...blockMarkers.values()].filter((entry) => entry.badge !== badge && entry.badge.style.display !== "none")
@@ -344,7 +353,7 @@ function renderBlockAnnotations() {
                 const currentIds = groupCommentTargets(blockTargets).get(element) || [];
                 const id = nextCommentId(currentIds, activeCommentId);
                 if (id)
-                    post("eh:activate", { id });
+                    requestThreadActivation(id);
             });
             els.blockAnnotations.append(marker, badge);
             entry = { marker, badge };
@@ -355,9 +364,9 @@ function renderBlockAnnotations() {
         marker.dataset.active = String(active);
         badge.setAttribute("aria-pressed", String(active));
         const label = commentTargetFor(element)?.label || element.tagName.toLowerCase();
-        const name = `${ids.length} block comment${ids.length === 1 ? "" : "s"} on ${label}${ids.length > 1 ? "; activate to open next comment" : ""}`;
+        const name = ids.length > 1 ? `Open ${ids.length} conversations` : "Open conversation";
         badge.setAttribute("aria-label", name);
-        badge.title = name;
+        badge.title = `${name} on ${label}`;
         badge.textContent = `◧ ${ids.length}`;
         const rect = visibleRects([rectData(element.getBoundingClientRect())], { kind: "element", element })[0];
         marker.style.display = badge.style.display = "none";
@@ -366,6 +375,8 @@ function renderBlockAnnotations() {
         Object.assign(marker.style, { display: "block", left: `${rect.left}px`, top: `${rect.top}px`, width: `${rect.width}px`, height: `${rect.height}px` });
         positionBlockBadge(badge, rect);
     }
+    if (pending || retarget)
+        positionCommentAction(targetRects(retarget || pending));
     refreshGeometryWatch();
 }
 function showMover(el) {
@@ -602,13 +613,23 @@ function renderSelectionCues(rects) {
 function positionCommentAction(rects, target = retarget || pending) {
     const visible = visibleRects(rects, target);
     const rect = visible[visible.length - 1];
-    if (!rect || (composeOpen && !retarget)) {
+    if (!canComment || !rect || (composeOpen && !retarget)) {
+        els.commentAction.style.display = "none";
+        return false;
+    }
+    const x = Math.max(4, Math.min(window.innerWidth - 34, rect.right + 6));
+    const y = Math.max(4, Math.min(window.innerHeight - 34, rect.top - 4));
+    const badges = [...blockMarkers.values()].filter(({ badge }) => badge.style.display !== "none")
+        .map(({ badge }) => badge.getBoundingClientRect());
+    const position = [[x, y], [x, y + 38], [x, y - 38], [x - 38, y]].find(([left, top]) => left >= 4 && top >= 4 && left + 30 <= innerWidth - 4 && top + 30 <= innerHeight - 4 &&
+        !badges.some((badge) => left < badge.right && left + 30 > badge.left && top < badge.bottom && top + 30 > badge.top));
+    if (!position) {
         els.commentAction.style.display = "none";
         return false;
     }
     els.commentAction.style.display = "flex";
-    els.commentAction.style.left = `${Math.max(4, Math.min(window.innerWidth - 34, rect.right + 6))}px`;
-    els.commentAction.style.top = `${Math.max(4, Math.min(window.innerHeight - 34, rect.top - 4))}px`;
+    els.commentAction.style.left = `${position[0]}px`;
+    els.commentAction.style.top = `${position[1]}px`;
     return true;
 }
 function postTarget(type, target = pending) {
@@ -714,7 +735,7 @@ function geometryWatchSignature() {
     });
 }
 function refreshGeometryWatch() {
-    const shouldWatch = !disposed && !!(pending || retarget || activeCommentId || blockTargets.size);
+    const shouldWatch = !disposed && !!(pending || retarget || activeCommentId || blockTargets.size || threadAnchors?.projection?.anchors.length);
     if (!shouldWatch) {
         clearInterval(geometryWatchTimer);
         geometryWatchTimer = null;
@@ -725,10 +746,18 @@ function refreshGeometryWatch() {
         return;
     watchedGeometrySignature = geometryWatchSignature();
     geometryWatchTimer = setInterval(() => {
-        if (disposed || !(pending || retarget || activeCommentId || blockTargets.size)) {
+        if (disposed || !(pending || retarget || activeCommentId || blockTargets.size || threadAnchors?.projection?.anchors.length)) {
             refreshGeometryWatch();
             return;
         }
+        if (threadAnchors?.projection) {
+            try {
+                threadAnchors.refresh();
+            }
+            catch (error) {
+                diagnostic("thread-boundary-rejected", { message: error.message });
+            }
+        }
         const next = geometryWatchSignature();
         if (next === watchedGeometrySignature)
             return;
@@ -878,6 +907,8 @@ function cssPath(el) {
 }
 /** The heading a block sits under, used to name edits in arbitrary HTML. */
 function precedingHeading(el) {
+    if (/^h[1-6]$/i.test(el.tagName) && el.textContent.trim())
+        return el.textContent.trim();
     let node = el;
     while (node && node !== document.body) {
         let sib = node.previousElementSibling;
@@ -932,7 +963,9 @@ function targetFor(node) {
         // one edit row, so number them.
         const twins = block.parentElement ? [...block.parentElement.children].filter((c) => c.tagName === block.tagName) : [];
         const ordinal = twins.length > 1 ? ` ${twins.indexOf(block) + 1}` : "";
-        pinnedLabels.set(block, heading ? `${clip(heading, 26)} · ${tag}${ordinal}` : clip(block.textContent, 40) || tag);
+        const excerpt = clip(block.textContent.replace(/\s+/g, " ").trim(), 40);
+        pinnedLabels.set(block, heading ? `${clip(heading, 26)} · ${tag}${ordinal}: ${excerpt}`
+            : excerpt ? `${excerpt}${ordinal ? ` · ${tag}${ordinal}` : ""}` : `${tag}${ordinal}`);
     }
     return { el: block, label: pinnedLabels.get(block), authored: false };
 }
@@ -1267,9 +1300,12 @@ function restoreTargetFocus(target) {
         return;
     if (target.kind === "element" && target.element?.isConnected) {
         const element = target.element;
+        const focused = document.activeElement;
+        if (document.hasFocus() && focused !== document.body && focused !== element && !isOurs(focused))
+            return;
         element.focus({ preventScroll: true });
         requestAnimationFrame(() => {
-            if (element.isConnected && document.activeElement !== element) {
+            if (element.isConnected && document.activeElement === document.body) {
                 element.focus({ preventScroll: true });
             }
         });
@@ -1297,6 +1333,8 @@ function restoreTargetFocus(target) {
  * contextual action or keyboard shortcut owns that transition.
  */
 function settleSelection() {
+    if (!canComment)
+        return false;
     const sel = document.getSelection();
     if (!sel || sel.isCollapsed || !sel.rangeCount)
         return false;
@@ -1347,6 +1385,8 @@ function settleSelection() {
     return true;
 }
 function setElementTarget(container) {
+    if (!canComment)
+        return;
     if (!container?.el ||
         (pending && pending.kind === "element" && pending.element === container.el) ||
         (retarget && retarget.kind === "element" && retarget.element === container.el)) {
@@ -1373,7 +1413,7 @@ function setElementTarget(container) {
 }
 function openPendingCompose() {
     hoverIntent?.cancel();
-    if (composing || disposed || !themeRevision)
+    if (!canComment || composing || disposed || !themeRevision)
         return false;
     const selection = document.getSelection();
     if (selection && !selection.isCollapsed && selection.rangeCount) {
@@ -1391,6 +1431,8 @@ function openPendingCompose() {
 function acceptCommentOpen(msg) {
     hoverIntent?.cancel();
     const requested = Number(msg.requestedGeneration);
+    if (requested <= retiredComposeGeneration)
+        return;
     if (commentOpenRequestGeneration === requested)
         commentOpenRequestGeneration = null;
     if (!msg.accepted) {
@@ -1535,7 +1577,8 @@ function reanchor(comments) {
             let el = blockTargets.get(comment.id);
             if (!el?.isConnected) {
                 try {
-                    el = comment.anchor?.selector ? document.querySelector(comment.anchor.selector) : null;
+                    const matches = comment.anchor?.selector ? [...document.querySelectorAll(comment.anchor.selector)].filter((element) => !isOurs(element)) : [];
+                    el = matches.length === 1 ? matches[0] : null;
                 }
                 catch {
                     el = null;
@@ -1559,9 +1602,145 @@ function reanchor(comments) {
         const marks = wrapOffsets(map, hit.start, hit.end, comment.id);
         (marks.length ? resolved : orphaned).push(comment.id);
     }
-    post("eh:anchorStatus", { resolved, orphaned });
+    if (!threadAnchors?.projection)
+        post("eh:anchorStatus", { resolved, orphaned });
     renderBlockAnnotations();
 }
+function hiddenThreadTarget(element) {
+    for (let node = element; node; node = node.parentElement) {
+        const style = getComputedStyle(node);
+        if (node.hidden || node.getAttribute("aria-hidden") === "true" || style.display === "none" ||
+            style.visibility === "hidden" || style.visibility === "collapse" ||
+            style.contentVisibility === "hidden" || Number(style.opacity) === 0)
+            return true;
+    }
+    return false;
+}
+const threadElements = new Map();
+function resolveThreadAnchor({ threadId, target }) {
+    threadTargets.delete(threadId);
+    const unavailable = (reason) => ({ threadId, state: "unavailable", reason });
+    if (!document.body || document.readyState === "loading")
+        return unavailable("render-loading");
+    let resolved;
+    if (target.kind === "element") {
+        let candidates;
+        try {
+            candidates = [...document.querySelectorAll(target.anchor.selector)]
+                .filter((element) => document.body.contains(element) && !isOurs(element));
+        }
+        catch (error) {
+            if (error.name !== "SyntaxError")
+                throw error;
+            return unavailable("invalid-selector");
+        }
+        if (!candidates.length)
+            return { threadId, state: "missing" };
+        if (candidates.length > 1)
+            return { threadId, state: "ambiguous", candidateCount: candidates.length };
+        const previous = threadElements.get(threadId);
+        if (previous && previous !== candidates[0])
+            return unavailable("render-changed");
+        threadElements.set(threadId, candidates[0]);
+        if (hiddenThreadTarget(candidates[0]))
+            return unavailable("hidden");
+        resolved = { kind: "element", element: candidates[0] };
+    }
+    else {
+        const { text, map } = flatten();
+        const hit = resolveQuote(text, target.anchor);
+        if (hit.state !== "found")
+            return { threadId, ...hit };
+        const entries = map.filter((entry) => entry.end > hit.start && entry.start < hit.end);
+        if (!entries.length)
+            return unavailable("not-measurable");
+        if (entries.some((entry) => hiddenThreadTarget(entry.node.parentElement)))
+            return unavailable("hidden");
+        const range = document.createRange();
+        range.setStart(entries[0].node, hit.start - entries[0].start);
+        range.setEnd(entries.at(-1).node, hit.end - entries.at(-1).start);
+        resolved = { kind: "selection", range };
+    }
+    const raw = targetRects(resolved).filter((rect) => rect.width > 0 && rect.height > 0);
+    if (!raw.length)
+        return unavailable("not-measurable");
+    const viewport = viewportData();
+    const relationTo = (clip) => raw.every((rect) => rect.bottom <= clip.top) ? "above"
+        : raw.every((rect) => rect.top >= clip.bottom) ? "below"
+            : raw.every((rect) => rect.right <= clip.left) ? "left"
+                : raw.every((rect) => rect.left >= clip.right) ? "right" : "visible";
+    const viewportRelation = relationTo({ left: 0, top: 0, right: viewport.width, bottom: viewport.height });
+    const clip = effectiveClipRect(resolved);
+    const relation = viewportRelation !== "visible" ? viewportRelation : clip ? relationTo(clip) : null;
+    if (!relation)
+        return unavailable("not-measurable");
+    const rects = relation === "visible" ? raw.map((rect) => intersectRects(rect, clip)).filter(Boolean) : raw;
+    if (!rects.length)
+        return unavailable("not-measurable");
+    threadTargets.set(threadId, resolved);
+    return { threadId, state: "found", rects, viewport, relation };
+}
+threadAnchors = createThreadAnchorController({
+    channel: frameMessage("scope"),
+    resolve: resolveThreadAnchor,
+    reconcile(projection, states) {
+        const open = new Set(projection.anchors.filter(anchor => !anchor.resolved).map(anchor => anchor.threadId));
+        const found = new Set(states.anchors.filter((anchor) => anchor.state === "found" && open.has(anchor.threadId)).map((anchor) => anchor.threadId));
+        for (const threadId of found) {
+            const target = threadTargets.get(threadId);
+            if (target.kind === "element")
+                blockTargets.set(threadId, target.element);
+            else {
+                const marks = marksFor(threadId);
+                if (marks.length && (!marks.some((mark) => mark.contains(target.range.startContainer)) ||
+                    !marks.some((mark) => mark.contains(target.range.endContainer)) ||
+                    marks.map((mark) => mark.textContent).join("") !== target.range.toString()))
+                    unwrap(threadId);
+            }
+        }
+        reanchor(projection.anchors.filter((anchor) => found.has(anchor.threadId)).map(({ threadId, target }) => ({
+            id: threadId, kind: target.kind, anchor: target.anchor,
+        })));
+        for (const threadId of found) {
+            const state = states.anchors.find((item) => item.threadId === threadId);
+            const peers = states.anchors.filter((item) => found.has(item.threadId) && sameThreadTarget(item, state)).map((item) => item.threadId);
+            const marks = marksFor(threadId);
+            for (const [index, mark] of marks.entries()) {
+                const nestedPeer = [...mark.querySelectorAll(`mark[${MARK_ATTR}]`)].some((nested) => peers.includes(nested.getAttribute(MARK_ATTR)));
+                const interactive = index === 0 && !nestedPeer;
+                if (mark.tabIndex !== (interactive ? 0 : -1))
+                    mark.tabIndex = interactive ? 0 : -1;
+                const role = interactive ? "button" : "presentation";
+                if (mark.getAttribute("role") !== role)
+                    mark.setAttribute("role", role);
+                const label = peers.length > 1 ? `Open ${peers.length} conversations` : "Open conversation";
+                if (interactive && mark.getAttribute("aria-label") !== label)
+                    mark.setAttribute("aria-label", label);
+                if (!interactive && mark.hasAttribute("aria-label"))
+                    mark.removeAttribute("aria-label");
+            }
+        }
+    },
+    changed(_projection, states) {
+        post("eh:threadAnchorStates", states);
+    },
+});
+function threadAction(action, threadId) {
+    const { anchors: _anchors, type: _type, ...scope } = threadAnchors.projection;
+    return threadAnchors.action({ type: "eh:threadAction", ...scope, action, threadId });
+}
+function requestThreadActivation(id) {
+    if (!threadAnchors.projection) {
+        post("eh:activate", { id });
+        return;
+    }
+    try {
+        post("eh:threadAction", threadAction("activate", id));
+    }
+    catch (error) {
+        diagnostic("thread-boundary-rejected", { message: error.message });
+    }
+}
 function activate(id, scroll) {
     activeCommentId = id || null;
     const marks = marksFor(id);
@@ -1627,17 +1806,43 @@ const REVIEW_DOCUMENT_COLORS = {
     mark[${MARK_ATTR}] { background: #FFF1D9; color: #75470E; text-decoration: underline #915B13; }
     mark[${MARK_ATTR}]:hover, mark[${MARK_ATTR}].eh-active { background: #F5D6A3; }
     mark[${MARK_ATTR}].eh-active { outline: 2px solid #915B13; outline-offset: 1px; }
+    body[contenteditable="true"] mark[${MARK_ATTR}] { color: inherit; background: transparent; text-decoration: none; outline: 1px dashed #915B13; outline-offset: 1px; }
+    body[contenteditable="true"] mark[${MARK_ATTR}].eh-active { outline: 2px solid #915B13; }
     ::selection { background: #F5D6A3; color: #75470E; }
   `,
     dark: `
     mark[${MARK_ATTR}] { background: #3D3020; color: #F1CC8E; text-decoration: underline #E7BB72; }
     mark[${MARK_ATTR}]:hover, mark[${MARK_ATTR}].eh-active { background: #594325; }
     mark[${MARK_ATTR}].eh-active { outline: 2px solid #E7BB72; outline-offset: 1px; }
+    body[contenteditable="true"] mark[${MARK_ATTR}] { color: inherit; background: transparent; text-decoration: none; outline: 1px dashed #E7BB72; outline-offset: 1px; }
+    body[contenteditable="true"] mark[${MARK_ATTR}].eh-active { outline: 2px solid #E7BB72; }
     ::selection { background: #594325; color: #F1CC8E; }
   `,
 };
 /* REVIEW_THEME_DOCUMENT_END */
 function boot() {
+    document.addEventListener("keydown", (event) => {
+        if (!threadAnchors.projection || event.isComposing || event.keyCode === 229)
+            return;
+        const mark = event.target.closest?.(`mark[${MARK_ATTR}]`);
+        if (mark && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            event.stopPropagation();
+            requestThreadActivation(mark.getAttribute(MARK_ATTR));
+        }
+        else if (event.key === "Escape" && activeCommentId &&
+            (isOurs(event.target) || !event.target.closest?.("input,textarea,select,[contenteditable='true']"))) {
+            try {
+                post("eh:threadAction", threadAction("dismiss", activeCommentId));
+                deactivateComment();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            catch (error) {
+                diagnostic("thread-boundary-rejected", { message: error.message });
+            }
+        }
+    });
     mountOverlay();
     const style = document.createElement("style");
     style.setAttribute("data-eh-sdk", "");
@@ -1709,7 +1914,7 @@ function boot() {
         const mark = event.target.closest && event.target.closest(`mark[${MARK_ATTR}]`);
         if (mark && themeRevision) {
             event.preventDefault();
-            post("eh:activate", { id: mark.getAttribute(MARK_ATTR) });
+            requestThreadActivation(mark.getAttribute(MARK_ATTR));
             return;
         }
         if (reviewMode === "view") {
@@ -2000,20 +2205,23 @@ function boot() {
         const target = targetFor(hoverTarget);
         const label = target ? target.label : "Element";
         const before = hoverTarget.textContent;
+        const before_html = blockHtml(hoverTarget);
         hoverTarget.remove();
         hoverTarget = null;
         place(els.outline, null);
         showChip(null);
-        queueEdit({ label, kind: "deleted", before, after: "" });
+        queueEdit({ label, kind: "deleted", before, before_html, after: "" });
         flushSave();
     });
     // beforeinput still sees the untouched wording, so capture it once per block.
     const originalText = new WeakMap();
     const originalHtml = new WeakMap();
+    const capturedBlocks = new Set();
     const captureOriginal = (el) => {
         if (!originalText.has(el)) {
             originalText.set(el, el.textContent);
             originalHtml.set(el, blockHtml(el));
+            capturedBlocks.add(el);
         }
     };
     /** An edit row for a block changed outside the input-event flow (attribute
@@ -2269,6 +2477,11 @@ function boot() {
             event.key.toLowerCase() === "m") {
             if (selectionIsActive())
                 settleSelection();
+            else if (event.target !== document.body && event.target !== document.documentElement) {
+                const target = commentTargetFor(event.target);
+                if (target)
+                    setElementTarget(target);
+            }
             if (openPendingCompose()) {
                 event.preventDefault();
                 event.stopPropagation();
@@ -2463,6 +2676,16 @@ function boot() {
     // not HTML5 drag: the element is relocated on drop, never cloned, so
     // identity (labels, captured originals, comment anchors) survives the move.
     let moving = null; // { el, label, drop: { ref, before } | null } while the handle is held
+    const cancelMove = () => {
+        if (!moving)
+            return;
+        moving.preview.cancel();
+        moving = null;
+        showDropline(null);
+        showMover(null);
+    };
+    window.addEventListener("pointercancel", cancelMove);
+    window.addEventListener("blur", cancelMove);
     const dropPointFor = (x, y) => {
         const under = document.elementFromPoint(x, y);
         if (!under || isOurs(under))
@@ -2482,9 +2705,12 @@ function boot() {
         event.preventDefault();
         event.stopPropagation();
         const target = targetFor(el);
-        moving = { el, label: target ? target.label : "Block", drop: null };
+        moving = {
+            el, label: target ? target.label : "Block", drop: null,
+            before: el.textContent, beforeHtml: blockHtml(el),
+            preview: el.animate([{ opacity: 0.4 }, { opacity: 0.4 }], { duration: 1000, iterations: Infinity }),
+        };
         captureOriginal(moving.el);
-        moving.el.style.opacity = "0.4";
         place(els.outline, null);
         showChip(null);
         try {
@@ -2504,11 +2730,11 @@ function boot() {
     window.addEventListener("pointerup", () => {
         if (!moving)
             return;
-        const { el, label, drop } = moving;
+        const { el, label, drop, before, beforeHtml, preview } = moving;
         moving = null;
         showDropline(null);
         showMover(null);
-        el.style.opacity = "";
+        preview.cancel();
         suppressUntil = Date.now() + 250;
         if (!drop || !drop.ref.isConnected || !el.isConnected)
             return;
@@ -2523,9 +2749,9 @@ function boot() {
         queueEdit({
             label,
             kind: "moved",
-            before: originalText.get(el),
+            before,
             after: el.textContent,
-            before_html: originalHtml.get(el),
+            before_html: beforeHtml,
             after_html: blockHtml(el),
             moved_after: prev ? clip(prev.textContent, 90) : "",
             moved_before: following ? clip(following.textContent, 90) : "",
@@ -2643,9 +2869,44 @@ function boot() {
             reposition();
         });
     };
-    document.addEventListener("scroll", scheduleReposition, true);
-    window.addEventListener("scroll", scheduleReposition, true);
-    window.addEventListener("resize", scheduleReposition);
+    let readingAnchor = null;
+    let readingWidth = innerWidth;
+    const rememberPassage = () => {
+        const selection = window.getSelection();
+        let range = selection?.rangeCount && !selection.isCollapsed ? selection.getRangeAt(0).cloneRange() : null;
+        const selected = range?.getBoundingClientRect();
+        if (!selected || selected.bottom <= 0 || selected.top >= innerHeight) {
+            range = document.caretRangeFromPoint?.(innerWidth / 2, innerHeight / 2) ?? null;
+        }
+        if (!range || range.startContainer.getRootNode() !== document || !range.startContainer.isConnected) {
+            readingAnchor = null;
+            return;
+        }
+        const rect = range.getBoundingClientRect();
+        readingAnchor = rect.height ? { range, top: rect.top } : null;
+        readingWidth = innerWidth;
+    };
+    const scrolled = () => {
+        scheduleReposition();
+        // A resize-generated scroll must not replace the anchor before restoration.
+        if (innerWidth === readingWidth)
+            rememberPassage();
+    };
+    document.addEventListener("scroll", scrolled, true);
+    window.addEventListener("scroll", scrolled, true);
+    document.addEventListener("selectionchange", () => { if (innerWidth === readingWidth)
+        rememberPassage(); });
+    window.addEventListener("resize", () => {
+        if (innerWidth !== readingWidth && readingAnchor?.range.startContainer.isConnected) {
+            const delta = readingAnchor.range.getBoundingClientRect().top - readingAnchor.top;
+            if (Number.isFinite(delta))
+                window.scrollBy({ top: delta, behavior: "instant" });
+        }
+        readingWidth = innerWidth;
+        rememberPassage();
+        scheduleReposition();
+    });
+    rememberPassage();
     let scrollQueued = false;
     window.addEventListener("scroll", () => {
         if (scrollQueued)
@@ -2665,11 +2926,40 @@ function boot() {
         if (!matchesFrameMessage(msg))
             return;
         switch (msg.type) {
+            case "eh:threadAnchors":
+                try {
+                    threadAnchors.project(msg);
+                    refreshGeometryWatch();
+                }
+                catch (error) {
+                    diagnostic("thread-boundary-rejected", { message: error.message });
+                }
+                break;
+            case "eh:threadAction":
+                try {
+                    const action = threadAnchors.action(msg);
+                    if (action.action === "dismiss")
+                        deactivateComment();
+                    else {
+                        if (action.action === "reveal")
+                            targetElement(threadTargets.get(action.threadId))?.scrollIntoView({ block: "center", inline: "nearest", behavior: "instant" });
+                        if (threadAnchors.projection.anchors.find(anchor => anchor.threadId === action.threadId)?.resolved)
+                            deactivateComment();
+                        else
+                            activate(action.threadId, false);
+                        threadAnchors.refresh();
+                    }
+                }
+                catch (error) {
+                    diagnostic("thread-boundary-rejected", { message: error.message });
+                }
+                break;
             case "eh:setTheme":
                 applyReviewTheme(msg);
                 break;
             case "eh:anchors":
-                reanchor(msg.comments || []);
+                if (!threadAnchors.projection)
+                    reanchor(msg.comments || []);
                 break;
             case "eh:commit":
                 if (msg.targetGeneration && pending && msg.targetGeneration !== pending.generation)
@@ -2681,7 +2971,15 @@ function boot() {
                 if (msg.targetGeneration && pending && msg.targetGeneration !== pending.generation)
                     break;
                 {
+                    // Cancellation can arrive before the new selection's debounced update.
+                    const selection = document.getSelection();
+                    if (selection?.rangeCount && !selection.isCollapsed &&
+                        (pending?.kind !== "selection" || !sameRange(selection.getRangeAt(0), pending.range)))
+                        settleSelection();
                     const discardThrough = Number(msg.discardThroughGeneration) || Number(msg.targetGeneration) || 0;
+                    retiredComposeGeneration = Math.max(retiredComposeGeneration, discardThrough);
+                    if (commentOpenRequestGeneration <= discardThrough)
+                        commentOpenRequestGeneration = null;
                     const newerRetarget = retarget && retarget.generation > discardThrough ? retarget : null;
                     if (msg.restoreFocus && !newerRetarget)
                         restoreTargetFocus(pending);
@@ -2719,7 +3017,8 @@ function boot() {
                 renderBlockAnnotations();
                 break;
             case "eh:activate":
-                activate(msg.id, !!msg.scroll);
+                if (!threadAnchors.projection)
+                    activate(msg.id, !!msg.scroll);
                 break;
             case "eh:flush":
                 flushSave();
@@ -2748,9 +3047,20 @@ function boot() {
                     checkDynamic(String(msg.html || ""));
                 break;
             case "eh:configureReview": {
+                if ((msg.mode !== "edit" && msg.mode !== "view") ||
+                    (msg.savePolicy !== "writable" && msg.savePolicy !== "feedback-only") || typeof msg.canComment !== "boolean") {
+                    console.warn("[doc-review-frame] Rejected invalid review configuration.");
+                    break;
+                }
                 cancelHover();
-                reviewMode = msg.mode === "edit" ? "edit" : "view";
-                savePolicy = msg.savePolicy === "feedback-only" ? "feedback-only" : "writable";
+                reviewMode = msg.mode;
+                savePolicy = msg.savePolicy;
+                canComment = msg.canComment;
+                els.commentAction.disabled = !canComment;
+                if (!canComment) {
+                    clearTimeout(selectionTimer);
+                    clearPending();
+                }
                 modeController.setMode(reviewMode);
                 if (reviewMode === "view") {
                     showChip(null);
@@ -2759,7 +3069,7 @@ function boot() {
                     els.linkbox.style.display = "none";
                 }
                 scheduleTargetGeometry();
-                post("eh:configurationApplied", { mode: reviewMode, savePolicy });
+                post("eh:configurationApplied", { mode: reviewMode, savePolicy, canComment });
                 break;
             }
             case "eh:restoreScroll":
@@ -2771,6 +3081,18 @@ function boot() {
             case "eh:assetFailed":
                 pendingPastes.delete(msg.id);
                 break;
+            case "eh:submittedEdits": {
+                if (!Array.isArray(msg.labels) || msg.labels.some((label) => typeof label !== "string"))
+                    break;
+                const labels = new Set(msg.labels);
+                for (const element of capturedBlocks)
+                    if (labels.has(pinnedLabels.get(element))) {
+                        originalText.delete(element);
+                        originalHtml.delete(element);
+                        capturedBlocks.delete(element);
+                    }
+                break;
+            }
             default:
                 break;
         }