@lostgradient/cinder 0.6.0 → 0.8.0

package/src/components/review-editor/review-editor-impl.svelte

@@ -0,0 +1,1509 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+import { devWarn } from '../../utilities/dev-warn.ts';
+import { useReducedMotion } from '../../utilities/use-reduced-motion.svelte.ts';
+import { createFocusRegionNavigator } from './focus-navigation.ts';
+import { createChangeTracker } from '../../utilities/change-tracker.svelte.ts';
+import { stringifyOrNull } from '../../utilities/stringify.ts';
+import MarkdownEditor from '../markdown-editor/markdown-editor.svelte';
+import { contentEquals, normalize } from '@lostgradient/cinder/markdown/pipeline';
+import { textOffsetToProseMirrorPosition } from '@lostgradient/cinder/editor';
+import { createAnchorPlugin, anchorPluginKey, } from '@lostgradient/cinder/commentary/anchor-decorations';
+import { reanchorQuote, ANCHOR_CONTEXT_LENGTH, generateId, extractMentions, createDocumentAnchor, } from '@lostgradient/cinder/commentary/comments';
+import { buildAnchorFromSelection } from '@lostgradient/cinder/commentary/anchoring';
+import ThreadPopover from './thread-popover.svelte';
+import LiveRegion from './live-region.svelte';
+import ExportActions from './export-actions.svelte';
+import CommentSidebar from './comment-sidebar.svelte';
+import FrontMatterFields from './front-matter-fields.svelte';
+import ReviewEditorControls from './review-editor-controls.svelte';
+import { bodyAnchorToDocumentAnchor, bodyAnchorUpdateToDocumentAnchorUpdate, combineFrontMatterAndBody, documentAnchorToBodyAnchor, documentPersistedAnchorToBodyAnchor, documentPositionToBodyPosition, parseReviewEditorFrontMatter, replaceFrontMatterData, remapDocumentAnchorBodyOffset, reviewStateToMarkdown, } from './review-editor-front-matter.ts';
+import { getSelectionAnchorPosition, } from './review-editor-selection-geometry.ts';
+import DiffViewer from '../diff-viewer/diff-viewer.svelte';
+import SelectionPopover from '../selection-popover/selection-popover.svelte';
+import { computeLineDiff, getDiffStats } from '@lostgradient/cinder/markdown/diff/line-diff';
+import { generateMarkdownSummary, generateUnifiedDiff, generateCommentsExport, } from '@lostgradient/cinder/commentary/export';
+// Shared reduced-motion preference (OVERLAY-POLICY: use the shared hook, not inline matchMedia).
+const reducedMotion = useReducedMotion();
+let { id, original = $bindable(''), value = $bindable(''), threads = $bindable([]), mode = 'edit', currentUserId, placeholder = 'Start writing...', name, class: className, onchange, onthreadcreate, onthreaddelete, oncommentcreate, oncommentupdate, oncommentdelete, snapshotMode = false, } = $props();
+// Blur any focused element inside this component on mount when snapshotMode
+// is active. This prevents the initial screenshot from capturing a focused
+// ring or blinking caret. We track the container element via bind:this.
+let containerElement = $state(null);
+$effect(() => {
+    if (!snapshotMode)
+        return;
+    if (!containerElement)
+        return;
+    const active = document.activeElement;
+    if (active instanceof HTMLElement && containerElement.contains(active)) {
+        active.blur();
+    }
+});
+// Reference to the underlying MarkdownEditor. Using the imported component
+// as a type is the Svelte ambient pattern — `*.svelte` declares the import
+// as a constructable type with the component's `export function` methods.
+let editorRef = $state();
+// Reference to LiveRegion for screen reader announcements (DEP-47)
+let liveRegionRef = $state();
+// Track when editor view is ready (for effects that need to wait for async editor creation)
+let editorViewReady = $state(false);
+// Track current selection for thread creation
+let currentSelection = $state(null);
+// =========================================================================
+// Thread Popover State
+// =========================================================================
+// Thread popover state
+let popoverThreadId = $state(null);
+let popoverPosition = $state(null);
+// Timer handle for panel selection scroll-then-position delay.
+// Stored at component level so we can cancel it when switching threads.
+let selectTimeoutId = null;
+// Cleanup: cancel pending panel selection timeout on component unmount.
+// This prevents the callback from executing on a destroyed component.
+$effect(() => {
+    return () => {
+        if (selectTimeoutId !== null) {
+            clearTimeout(selectTimeoutId);
+            selectTimeoutId = null;
+        }
+    };
+});
+// Internal active thread tracking (not exposed as bindable prop)
+let activeThreadId = $state(null);
+// Comment sidebar toggle state
+let sidebarOpen = $state(false);
+const currentDocument = $derived(parseReviewEditorFrontMatter(value));
+const editorValue = $derived(currentDocument.body);
+const viewPanelIds = $derived({
+    editor: `${id}-editor-panel`,
+    diff: `${id}-diff-panel`,
+    summary: `${id}-summary-panel`,
+});
+// =========================================================================
+// View Switching State (DEP-47)
+// =========================================================================
+/** Active view: editor for editing, diff for comparing, summary for review */
+let activeView = $state('editor');
+/** Diff view mode: unified shows all changes, final shows current state, original shows baseline */
+let diffViewMode = $state('unified');
+// =========================================================================
+// Diff Statistics (DEP-47)
+// =========================================================================
+/**
+ * Compute diff statistics from original vs current content.
+ * Uses the same line-diff algorithm as DiffViewer for consistency.
+ */
+const diffStats = $derived.by(() => {
+    if (!original) {
+        return { added: 0, removed: 0, modified: 0 };
+    }
+    // Normalize both inputs to avoid false positives from formatting differences
+    const normalizedOriginal = normalize(original);
+    const normalizedCurrent = normalize(value);
+    const lineDiffs = computeLineDiff(normalizedOriginal, normalizedCurrent);
+    return getDiffStats(lineDiffs);
+});
+/** Whether there are any content changes */
+const hasContentChanges = $derived(diffStats.added > 0 || diffStats.removed > 0 || diffStats.modified > 0);
+/** Total comment count (excluding soft-deleted comments) */
+const commentCount = $derived(threads.reduce((count, thread) => {
+    return count + thread.comments.filter((c) => !c.deletedAt).length;
+}, 0));
+/**
+ * Summary content for the Summary view (without the "# Review Summary" heading).
+ * The heading is useful for clipboard exports but redundant in the UI preview
+ * since the view tab already indicates this is a summary.
+ */
+const summaryContent = $derived.by(() => {
+    const result = exportMarkdownSummary();
+    // Strip the "# Review Summary\n" heading from the beginning
+    return result.markdown.replace(/^# Review Summary\n+/, '');
+});
+// =========================================================================
+// Selection Popover State (DEP-47)
+// =========================================================================
+/** Position for the selection popover (viewport-relative) */
+let selectionPopoverPosition = $state(null);
+/**
+ * Captured selection range for thread creation.
+ * We capture this when the popover appears because clicking the popover button
+ * will collapse the browser selection before handleSelectionComment runs.
+ */
+let capturedSelectionForPopover = $state(null);
+/** Whether the selection popover is in expanded form state (user clicked to add comment) */
+let selectionPopoverExpanded = $state(false);
+/** Whether the selection popover should be visible */
+const showSelectionPopover = $derived(activeView === 'editor' &&
+    mode === 'edit' &&
+    // Must have a user ID to create comments
+    currentUserId !== undefined &&
+    // Position is only set when browser selection is non-collapsed
+    // (checked via window.getSelection() in the debounced handler)
+    // OR the popover is already expanded (user is composing a comment)
+    (selectionPopoverPosition !== null || selectionPopoverExpanded) &&
+    // Don't show if a thread popover is already open
+    popoverThreadId === null);
+/** Delay for scroll-then-position pattern (matches smooth scroll duration) */
+const POSITION_DELAY_MS = 350;
+/**
+ * Get the preferred scroll behavior respecting prefers-reduced-motion.
+ * @returns 'instant' if user prefers reduced motion, 'smooth' otherwise
+ */
+function getScrollBehavior() {
+    return reducedMotion.current ? 'instant' : 'smooth';
+}
+// =========================================================================
+// Screen Reader Announcements (DEP-47)
+// =========================================================================
+/**
+ * Announce a message to screen readers via the LiveRegion component.
+ * Safe to call before the ref is available (no-op in that case).
+ *
+ * @param message - The message to announce
+ * @param priority - 'polite' (default) or 'assertive'
+ */
+function announce(message, priority = 'polite') {
+    liveRegionRef?.announce(message, priority);
+}
+// Get the popover thread
+const popoverThread = $derived.by(() => {
+    if (!popoverThreadId)
+        return null;
+    return threads.find((t) => t.id === popoverThreadId) ?? null;
+});
+// Clear popover if thread is deleted
+$effect(() => {
+    if (popoverThreadId && !popoverThread) {
+        popoverThreadId = null;
+        popoverPosition = null;
+    }
+});
+// Clear internal active thread if it no longer exists
+$effect(() => {
+    if (activeThreadId && !threads.some((t) => t.id === activeThreadId)) {
+        activeThreadId = null;
+    }
+});
+// Deep linking: open popover when activeThreadId is set externally (e.g., URL navigation).
+$effect(() => {
+    let positionTimeoutId = null;
+    if (activeThreadId && popoverThreadId !== activeThreadId) {
+        const thread = threads.find((t) => t.id === activeThreadId);
+        if (thread) {
+            const threadIdToOpen = activeThreadId;
+            // First, scroll the anchor into view. We defer popover positioning until
+            // after the scroll completes to avoid the popover appearing off-screen.
+            scrollAnchorIntoView(threadIdToOpen);
+            // After scrolling, calculate position and open the popover.
+            // We re-fetch the thread inside the callback to avoid using stale data
+            // if the threads array changes during the scroll delay.
+            positionTimeoutId = setTimeout(() => {
+                // Re-fetch thread to ensure we have current data (thread may have been deleted/modified)
+                const currentThread = threads.find((t) => t.id === threadIdToOpen);
+                if (!currentThread)
+                    return;
+                const pos = calculateViewportPosition(currentThread.anchor.from);
+                if (pos) {
+                    popoverPosition = { x: pos.left + 16, y: pos.top };
+                    popoverThreadId = threadIdToOpen;
+                }
+            }, POSITION_DELAY_MS);
+        }
+    }
+    // Cleanup: cancel pending timeout if effect re-runs or component unmounts
+    return () => {
+        if (positionTimeoutId !== null) {
+            clearTimeout(positionTimeoutId);
+        }
+    };
+});
+/**
+ * Scroll the editor to bring an anchor position into view.
+ * @param threadId - The thread ID to scroll to (passed explicitly to avoid stale closure)
+ */
+function scrollAnchorIntoView(threadId) {
+    // Query using the passed threadId, not the reactive activeThreadId,
+    // to avoid race conditions when called from setTimeout.
+    // Scope query to editor DOM to handle multiple ReviewEditor instances on page.
+    const editorDom = editorRef?.getView()?.dom;
+    const anchorElement = editorDom?.querySelector(`[data-thread-id="${threadId}"]`);
+    if (anchorElement) {
+        anchorElement.scrollIntoView({ behavior: getScrollBehavior(), block: 'center' });
+    }
+}
+// =========================================================================
+// Thread Popover Handlers
+// =========================================================================
+/**
+ * Handle closing the thread popover.
+ * Also clears activeThreadId to prevent the deep-linking effect from
+ * immediately reopening the popover, and cancels any pending panel selection timeout.
+ */
+function handlePopoverClose() {
+    // Cancel any pending panel selection timeout
+    if (selectTimeoutId !== null) {
+        clearTimeout(selectTimeoutId);
+        selectTimeoutId = null;
+    }
+    popoverThreadId = null;
+    popoverPosition = null;
+    activeThreadId = null;
+}
+/**
+ * Handle thread delete from popover.
+ */
+function handlePopoverDelete(threadId) {
+    if (currentUserId) {
+        deleteThread(threadId);
+        handlePopoverClose();
+    }
+}
+/**
+ * Handle comment update from popover.
+ */
+function handlePopoverCommentUpdate(threadId, commentId, body) {
+    updateComment(threadId, commentId, body);
+}
+/**
+ * Handle comment delete from popover.
+ */
+function handlePopoverCommentDelete(threadId, commentId) {
+    deleteComment(threadId, commentId);
+}
+/**
+ * Handle comment create from popover.
+ */
+function handlePopoverCommentCreate(threadId, body) {
+    if (currentUserId) {
+        createComment(threadId, body, currentUserId);
+    }
+}
+/**
+ * Calculate position for fixed-position popovers near an anchor.
+ * Returns viewport-relative coordinates for use with position: fixed elements
+ * (ThreadPopover).
+ */
+function calculateViewportPosition(from) {
+    const view = editorRef?.getView();
+    if (!view)
+        return null;
+    try {
+        const coords = view.coordsAtPos(documentPositionToBodyPosition(from, currentDocument.bodyOffset));
+        if (coords) {
+            // coords are already viewport-relative from ProseMirror
+            return {
+                top: coords.top + 24, // Below the anchor
+                left: Math.max(16, coords.left), // Minimum 16px from viewport edge
+            };
+        }
+    }
+    catch {
+        // Position may be invalid
+    }
+    return null;
+}
+// =========================================================================
+// Anchor Plugin Integration (DEP-39)
+// =========================================================================
+// Track last synced state to prevent thrashing
+let lastSyncedFingerprint = null;
+// Pending state for deferred re-anchoring (setState flow)
+let pendingState = $state(null);
+/**
+ * Create fingerprint including all mutable anchor fields.
+ * This prevents sync thrashing when quote/prefix/suffix change.
+ */
+function createSyncFingerprint(threadsToSync) {
+    return threadsToSync
+        .map((t) => {
+        const a = t.anchor;
+        // Include lastKnownOffset to propagate disambiguation updates
+        return `${t.id}:${a.from}:${a.to}:${a.quote}:${a.prefix}:${a.suffix}:${a.lastKnownOffset ?? ''}`;
+    })
+        .join('|');
+}
+function createPluginSyncFingerprint(threadsToSync) {
+    return `${currentDocument.bodyOffset}|${createSyncFingerprint(threadsToSync)}`;
+}
+/**
+ * Handle anchor position updates from the plugin.
+ * Called when the plugin detects position changes.
+ */
+function handleAnchorsUpdate(updates) {
+    // Update published threads
+    threads = threads.map((thread) => {
+        const update = updates.find((u) => u.threadId === thread.id);
+        if (update) {
+            const documentUpdate = bodyAnchorUpdateToDocumentAnchorUpdate(update, currentDocument.bodyOffset);
+            return {
+                ...thread,
+                anchor: {
+                    ...thread.anchor,
+                    from: documentUpdate.from,
+                    to: documentUpdate.to,
+                    quote: documentUpdate.quote,
+                    prefix: documentUpdate.prefix,
+                    suffix: documentUpdate.suffix,
+                    lastKnownOffset: documentUpdate.lastKnownOffset,
+                },
+            };
+        }
+        return thread;
+    });
+    // Update fingerprint to skip re-sync
+    lastSyncedFingerprint = createPluginSyncFingerprint(threads);
+}
+// Create anchor plugin in instance script (per-instance, before mount)
+// This runs once per ReviewEditor instance during initialization
+const anchorPlugin = createAnchorPlugin({
+    onAnchorsUpdate: handleAnchorsUpdate,
+    onAnchorClick: handleAnchorClick,
+});
+/**
+ * Handle click on an anchor decoration.
+ * Opens the thread popover at the click location.
+ */
+function handleAnchorClick(threadId, event) {
+    // Cancel any pending panel selection timer to prevent race conditions
+    // where the timer callback would unexpectedly switch to a different thread
+    if (selectTimeoutId !== null) {
+        clearTimeout(selectTimeoutId);
+        selectTimeoutId = null;
+    }
+    // Clear selection popover state when opening a thread popover
+    // Otherwise stale state persists and the popover may reappear at an invalid position
+    selectionPopoverPosition = null;
+    capturedSelectionForPopover = null;
+    selectionPopoverExpanded = false;
+    // Set active thread and open popover
+    activeThreadId = threadId;
+    // Find the thread to show the popover
+    const thread = threads.find((t) => t.id === threadId);
+    if (thread) {
+        // Position popover near the click location
+        popoverPosition = { x: event.clientX + 16, y: event.clientY };
+        popoverThreadId = threadId;
+    }
+}
+/**
+ * Sync threads to the anchor plugin via meta-transaction.
+ */
+function syncThreadsToPlugin(threadsToSync) {
+    const view = editorRef?.getView();
+    if (!view)
+        return;
+    const fingerprint = createPluginSyncFingerprint(threadsToSync);
+    // Skip if already synced
+    if (fingerprint === lastSyncedFingerprint)
+        return;
+    lastSyncedFingerprint = fingerprint;
+    view.dispatch(view.state.tr.setMeta(anchorPluginKey, {
+        type: 'sync',
+        threads: threadsToSync.map((thread) => ({
+            ...thread,
+            anchor: documentAnchorToBodyAnchor(thread.anchor, currentDocument.bodyOffset),
+        })),
+        source: 'external',
+    }));
+}
+/**
+ * Attempt re-anchoring for pending state.
+ * Called when setState is invoked and when editor content changes.
+ *
+ * Threads whose anchor text cannot be found are removed (auto-delete behavior).
+ */
+function attemptReanchoring() {
+    if (!pendingState)
+        return;
+    const view = editorRef?.getView();
+    if (!view)
+        return;
+    // Compare markdown using contentEquals (handles normalization)
+    const currentMarkdown = editorRef?.getMarkdown() ?? '';
+    const pendingDocument = parseReviewEditorFrontMatter(pendingState.content);
+    const expectedMarkdown = pendingDocument.body;
+    if (!contentEquals(currentMarkdown, expectedMarkdown)) {
+        // Content not synced yet - will retry when editor updates
+        return;
+    }
+    const state = pendingState;
+    pendingState = null;
+    const { doc } = view.state;
+    const documentText = doc.textBetween(0, doc.content.size, '\n');
+    // Re-anchor threads, filtering out those that can't be found
+    const reanchoredThreads = [];
+    for (const persistedThread of state.threads) {
+        const bodyPersistedAnchor = documentPersistedAnchorToBodyAnchor(persistedThread.anchor, pendingDocument.bodyOffset);
+        const result = reanchorQuote(documentText, bodyPersistedAnchor);
+        // If anchor text not found, skip this thread (auto-delete)
+        if (!result.found) {
+            onthreaddelete?.({ threadId: persistedThread.id });
+            continue;
+        }
+        const from = textOffsetToProseMirrorPosition(doc, result.from);
+        const to = textOffsetToProseMirrorPosition(doc, result.to);
+        if (from !== null && to !== null) {
+            // Extract the matched quote and context from the current document
+            // This prevents the plugin from detecting false drift on subsequent transactions
+            const matchedQuote = documentText.slice(result.from, result.to);
+            const newPrefix = documentText.slice(Math.max(0, result.from - ANCHOR_CONTEXT_LENGTH), result.from);
+            const newSuffix = documentText.slice(result.to, Math.min(documentText.length, result.to + ANCHOR_CONTEXT_LENGTH));
+            reanchoredThreads.push({
+                ...persistedThread,
+                anchor: {
+                    ...persistedThread.anchor,
+                    from: from + pendingDocument.bodyOffset,
+                    to: to + pendingDocument.bodyOffset,
+                    quote: matchedQuote,
+                    prefix: newPrefix,
+                    suffix: newSuffix,
+                    status: 'anchored',
+                    lastKnownOffset: result.from + pendingDocument.bodyOffset,
+                },
+            });
+        }
+    }
+    threads = reanchoredThreads;
+    // Sync threads to plugin
+    syncThreadsToPlugin(threads);
+}
+// Retry re-anchoring when editor content changes (handles async content sync)
+// We read `value` to create a dependency so this effect re-runs when content changes.
+// This is critical for setState flow where pendingState exists but content isn't synced yet.
+$effect(() => {
+    void value; // Create dependency on value
+    if (pendingState && editorRef?.getView()) {
+        attemptReanchoring();
+    }
+});
+// Sync threads to plugin when they change externally
+// Runs for empty arrays too - needed to clear stale decorations when all threads removed
+$effect(() => {
+    // Only sync if editor is ready and we don't have pending state
+    if (editorRef?.getView() && !pendingState) {
+        syncThreadsToPlugin(threads);
+    }
+});
+// Determine if editor is readonly based on mode
+const isReadonly = $derived(mode === 'readonly');
+// Clear selection popover state when mode changes to readonly
+// This prevents stale popover state from persisting across mode transitions
+$effect(() => {
+    if (mode === 'readonly') {
+        selectionPopoverPosition = null;
+        capturedSelectionForPopover = null;
+        selectionPopoverExpanded = false;
+    }
+});
+// =========================================================================
+// Optimized Change Detection (DEP-47)
+// =========================================================================
+/**
+ * Change tracker with lazy dirty flag and debounced semantic verification.
+ * Avoids per-keystroke normalize() calls which are expensive for large documents.
+ */
+const changeTracker = createChangeTracker({
+    debounceMs: 300,
+    includeFrontMatter: true,
+});
+// Wire baseline and current values to the tracker
+$effect(() => {
+    changeTracker.setBaseline(original);
+});
+$effect(() => {
+    changeTracker.setCurrent(value);
+});
+/** Timeout ID for debounced selection position calculation */
+let selectionTimeoutId = null;
+/** Debounce delay for selection position calculation (ms) */
+const SELECTION_DEBOUNCE_MS = 20;
+// Listen to browser's native selectionchange event
+// This is more reliable than ProseMirror's selection events for detecting visual selection
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    function handleBrowserSelectionChange() {
+        // Clear any pending calculation
+        if (selectionTimeoutId !== null) {
+            clearTimeout(selectionTimeoutId);
+            selectionTimeoutId = null;
+        }
+        // Only process in edit mode
+        if (mode !== 'edit') {
+            selectionPopoverPosition = null;
+            capturedSelectionForPopover = null;
+            return;
+        }
+        // Don't clear the popover if focus is within it (user is interacting with the form)
+        const selectionPopoverElement = document.getElementById(`${id}-selection-popover`);
+        if (selectionPopoverElement?.contains(document.activeElement)) {
+            return;
+        }
+        // Don't clear the popover if it's expanded (user is composing a comment)
+        // This is especially important for Safari where clicking a button doesn't focus it,
+        // which would otherwise cause the popover to close unexpectedly
+        if (selectionPopoverExpanded) {
+            return;
+        }
+        const browserSelection = window.getSelection();
+        // If selection is collapsed, hide popover immediately and reset all popover state
+        if (!browserSelection || browserSelection.isCollapsed) {
+            selectionPopoverPosition = null;
+            capturedSelectionForPopover = null;
+            selectionPopoverExpanded = false;
+            return;
+        }
+        // Check if selection is within the actual editor DOM (not front matter controls,
+        // sidebar, or toolbar content).
+        const anchorNode = browserSelection.anchorNode;
+        const editorDom = editorRef?.getView()?.dom;
+        if (!editorDom || !anchorNode || !editorDom.contains(anchorNode)) {
+            selectionPopoverPosition = null;
+            capturedSelectionForPopover = null;
+            selectionPopoverExpanded = false;
+            return;
+        }
+        // Debounce position calculation to let rapid selection events settle
+        selectionTimeoutId = setTimeout(() => {
+            selectionTimeoutId = null;
+            // Re-check selection after debounce
+            const sel = window.getSelection();
+            if (!sel || sel.isCollapsed) {
+                selectionPopoverPosition = null;
+                capturedSelectionForPopover = null;
+                return;
+            }
+            // Get the selection range and compute position from the browser's DOM
+            const range = sel.getRangeAt(0);
+            const anchorPosition = getSelectionAnchorPosition(range);
+            if (anchorPosition) {
+                // Capture the ProseMirror selection range for thread creation
+                // We need this because clicking the popover will collapse the selection
+                // Get selection directly from the view since currentSelection state
+                // may not be updated yet when the native selectionchange fires
+                const view = editorRef?.getView();
+                if (view) {
+                    const { from, to } = view.state.selection;
+                    if (from !== to) {
+                        capturedSelectionForPopover = { from, to };
+                        // Only show popover when we have a valid captured selection
+                        // This prevents showing a popover that can't submit due to timing mismatches
+                        selectionPopoverPosition = anchorPosition;
+                    }
+                }
+            }
+        }, SELECTION_DEBOUNCE_MS);
+    }
+    document.addEventListener('selectionchange', handleBrowserSelectionChange);
+    return () => {
+        document.removeEventListener('selectionchange', handleBrowserSelectionChange);
+        if (selectionTimeoutId !== null) {
+            clearTimeout(selectionTimeoutId);
+            selectionTimeoutId = null;
+        }
+    };
+});
+// Handle selection changes from ProseMirror (for currentSelection state)
+function handleSelectionChange(selection) {
+    // Mark editor as ready on first selection change (fired when editor initializes)
+    if (!editorViewReady) {
+        editorViewReady = true;
+    }
+    currentSelection = selection;
+}
+// Handle content changes
+function handleChange(newValue) {
+    value = newValue;
+    onchange?.(newValue);
+}
+function handleEditorBodyChange(newBody) {
+    handleChange(combineFrontMatterAndBody(currentDocument, newBody));
+}
+function handleFrontMatterChange(data) {
+    const previousBodyOffset = currentDocument.bodyOffset;
+    const nextValue = replaceFrontMatterData(value, data);
+    const nextDocument = parseReviewEditorFrontMatter(nextValue);
+    if (previousBodyOffset !== nextDocument.bodyOffset) {
+        threads = threads.map((thread) => ({
+            ...thread,
+            anchor: remapDocumentAnchorBodyOffset(thread.anchor, previousBodyOffset, nextDocument.bodyOffset, nextValue),
+        }));
+    }
+    handleChange(nextValue);
+}
+// =========================================================================
+// Imperative Methods
+// =========================================================================
+/** Focus the editor */
+export function focus() {
+    editorRef?.focus();
+}
+/** Get current markdown content */
+export function getMarkdown() {
+    const body = editorRef?.getMarkdown() ?? currentDocument.body;
+    return combineFrontMatterAndBody(currentDocument, body);
+}
+/** Set markdown content */
+export function setMarkdown(content) {
+    value = content;
+    editorRef?.setMarkdown(parseReviewEditorFrontMatter(content).body);
+}
+/** Get current AST */
+export function getAst() {
+    return editorRef?.getAst();
+}
+/** Get current selection */
+export function getSelection() {
+    const selection = editorRef?.getSelection();
+    if (!selection)
+        return null;
+    return {
+        ...selection,
+        from: selection.from + currentDocument.bodyOffset,
+        to: selection.to + currentDocument.bodyOffset,
+    };
+}
+/** Scroll to a specific thread's anchor position in the editor */
+export function scrollToThread(threadId) {
+    const thread = threads.find((t) => t.id === threadId);
+    if (!thread)
+        return;
+    const view = editorRef?.getView();
+    if (view && thread.anchor.from !== undefined) {
+        // Scroll the anchor position into view
+        const coords = view.coordsAtPos(documentPositionToBodyPosition(thread.anchor.from, currentDocument.bodyOffset));
+        if (coords) {
+            view.dom.scrollTo({
+                top: coords.top - 100, // Offset from top
+                behavior: getScrollBehavior(),
+            });
+        }
+    }
+}
+/**
+ * Handle thread selection from the comment sidebar.
+ * Scrolls to the thread and opens its popover.
+ */
+function handleSidebarThreadSelect(threadId) {
+    const thread = threads.find((t) => t.id === threadId);
+    if (!thread)
+        return;
+    // Set active thread
+    activeThreadId = threadId;
+    // Scroll to the thread
+    scrollToThread(threadId);
+    // Open popover at anchor position after scroll completes
+    setTimeout(() => {
+        const view = editorRef?.getView();
+        if (view && thread.anchor.from !== undefined) {
+            const coords = view.coordsAtPos(documentPositionToBodyPosition(thread.anchor.from, currentDocument.bodyOffset));
+            if (coords) {
+                popoverPosition = { x: coords.left + 16, y: coords.top };
+                popoverThreadId = threadId;
+            }
+        }
+    }, POSITION_DELAY_MS);
+}
+/**
+ * Handle request to add a document-level comment from the sidebar.
+ * The body is provided by the inline CommentComposer in the sidebar.
+ */
+function handleAddDocumentComment(body) {
+    if (!currentUserId) {
+        devWarn('Cannot add document comment: no currentUserId');
+        return;
+    }
+    createDocumentThread(body, currentUserId);
+}
+/**
+ * Get serializable review state.
+ * Threads are converted to persisted format for re-anchoring.
+ *
+ * Content is preserved as the complete Markdown document, including front matter.
+ */
+export function getState() {
+    const persistedThreads = threads.map((thread) => ({
+        ...thread,
+        anchor: {
+            quote: thread.anchor.quote,
+            prefix: thread.anchor.prefix,
+            suffix: thread.anchor.suffix,
+            status: thread.anchor.status,
+            blockId: thread.anchor.blockId,
+            originalPosition: thread.anchor.originalPosition,
+            originalQuote: thread.anchor.originalQuote, // Preserve for history
+            lastKnownOffset: thread.anchor.lastKnownOffset, // For disambiguation
+        },
+    }));
+    return {
+        schemaVersion: 4,
+        content: value,
+        original: original || undefined,
+        threads: persistedThreads,
+        reviewSession: undefined,
+        frontMatter: currentDocument.data,
+        frontMatterRaw: currentDocument.raw,
+        updatedAt: new Date().toISOString(),
+    };
+}
+/**
+ * Restore review state from serialized data.
+ * Thread anchors are re-anchored using the quote/prefix/suffix context.
+ *
+ * Note: This updates both content and original baseline from the incoming state,
+ * ensuring subsequent diffs and exports use the correct baseline.
+ */
+export function setState(state) {
+    const nextValue = reviewStateToMarkdown(state);
+    value = nextValue;
+    // Update original baseline if provided in state, so diffs work correctly
+    if (state.original !== undefined) {
+        original = state.original;
+    }
+    pendingState = { ...state, content: nextValue };
+    // Attempt re-anchoring immediately if editor is ready
+    attemptReanchoring();
+}
+/** Get direct access to ProseMirror view (advanced use) */
+export function getView() {
+    return editorRef?.getView() ?? null;
+}
+/** Get direct access to Milkdown editor (advanced use) */
+export function getEditor() {
+    return editorRef?.getEditor() ?? null;
+}
+// =========================================================================
+// Export Operations
+// =========================================================================
+/**
+ * Export an LLM-optimized Markdown summary of the review.
+ * Includes document changes and comment threads
+ * in a structured format suitable for LLM analysis.
+ */
+export function exportMarkdownSummary(options = undefined) {
+    return generateMarkdownSummary(getState(), options);
+}
+/**
+ * Export a Git-compatible unified diff.
+ * The output can be applied with `git apply` or `patch` command.
+ */
+export function exportUnifiedDiff(options = undefined) {
+    return generateUnifiedDiff(getState(), options);
+}
+// =========================================================================
+// Export Action Callbacks (for ExportActions component)
+// =========================================================================
+/** Get plain markdown content for clipboard export */
+function handleExportContent() {
+    return value;
+}
+/** Get LLM-optimized summary for clipboard export */
+function handleExportSummary() {
+    return exportMarkdownSummary().markdown;
+}
+/** Get JSON state for clipboard export */
+function handleExportJSON() {
+    const json = stringifyOrNull(getState());
+    // Return error message if serialization fails (circular refs, BigInt, etc.)
+    // This prevents copying invalid JSON like "[object Object]" to clipboard
+    if (json === null) {
+        return '{"error": "Failed to serialize editor state"}';
+    }
+    return json;
+}
+/** Get unified diff for clipboard export */
+function handleExportDiff() {
+    return exportUnifiedDiff().diff;
+}
+/** Get comments export for clipboard export */
+function handleExportComments() {
+    return generateCommentsExport(getState()).markdown;
+}
+// =========================================================================
+// Form Participation (FormData integration)
+// =========================================================================
+/**
+ * Derive field name with optional prefix.
+ * Used for hidden inputs when participating in a parent form.
+ */
+function getFieldName(field) {
+    return name ? `${name}-${field}` : field;
+}
+/**
+ * Derived values for hidden inputs (computed reactively).
+ * These power both the hidden form inputs and the getFormData() method.
+ */
+const formOriginal = $derived(original);
+const formCurrent = $derived(value);
+const formComments = $derived(JSON.stringify(threads));
+const formDiff = $derived(exportUnifiedDiff().diff);
+const formSummary = $derived(exportMarkdownSummary().markdown);
+/**
+ * Get form data as a structured object.
+ * Use this for programmatic access when not using native form submission.
+ *
+ * @example
+ * ```ts
+ * const data = editor.getFormData();
+ * await fetch('/api/review', {
+ *   method: 'POST',
+ *   body: JSON.stringify(data)
+ * });
+ * ```
+ */
+export function getFormData() {
+    return {
+        original: formOriginal,
+        current: formCurrent,
+        comments: formComments,
+        diff: formDiff,
+        summary: formSummary,
+    };
+}
+/**
+ * Reset the editor to its initial state.
+ * Reverts content to original and clears all threads.
+ */
+export function reset() {
+    // Revert content
+    value = original;
+    onchange?.(original);
+    // Clear all threads
+    for (const thread of threads) {
+        onthreaddelete?.({ threadId: thread.id });
+    }
+    // Clear UI state
+    popoverThreadId = null;
+    popoverPosition = null;
+    activeThreadId = null;
+    activeView = 'editor';
+    selectionPopoverPosition = null;
+    capturedSelectionForPopover = null;
+    selectionPopoverExpanded = false;
+    announce('Review reset');
+}
+// =========================================================================
+// Selection Popover Handlers
+// =========================================================================
+/**
+ * Handle the comment submission from the selection popover.
+ * Creates a new thread at the captured selection using currentUserId as author.
+ *
+ * We use capturedSelectionForPopover instead of currentSelection because
+ * clicking the popover button collapses the browser selection before this runs.
+ *
+ * @param body - The comment body from the selection popover form
+ */
+function handleSelectionComment(body) {
+    // Helper to clear popover state and announce failure
+    function failWithMessage(message) {
+        devWarn(message);
+        selectionPopoverPosition = null;
+        capturedSelectionForPopover = null;
+        selectionPopoverExpanded = false;
+        announce('Could not add comment. Please try selecting text again.', 'assertive');
+    }
+    if (!currentUserId) {
+        failWithMessage('Cannot create comment: no currentUserId set');
+        return;
+    }
+    // Use captured selection - clicking the popover collapses browser selection
+    if (!capturedSelectionForPopover) {
+        failWithMessage('Cannot create comment: no captured selection');
+        return;
+    }
+    if (mode === 'readonly') {
+        failWithMessage('Cannot create thread: editor is readonly');
+        return;
+    }
+    const view = editorRef?.getView();
+    if (!view) {
+        failWithMessage('Cannot create thread: editor view not available');
+        return;
+    }
+    const { from, to } = capturedSelectionForPopover;
+    // Validate positions are still within document bounds
+    // User may have edited the document while popover was expanded
+    const docSize = view.state.doc.content.size;
+    if (from < 0 || to > docSize || from > to) {
+        failWithMessage('Cannot create thread: captured selection is out of bounds');
+        return;
+    }
+    // Build anchor using shared helper
+    const anchor = bodyAnchorToDocumentAnchor(buildAnchorFromSelection(view, from, to), currentDocument.bodyOffset, value);
+    // Generate requestId for correlating optimistic updates
+    const requestId = generateId();
+    // Extract @mentions from the comment body
+    const mentions = extractMentions(body);
+    // Fire the create event with the comment body
+    const event = {
+        requestId,
+        anchor,
+        body,
+        authorId: currentUserId,
+        mentions: mentions.length > 0 ? mentions : undefined,
+    };
+    onthreadcreate?.(event);
+    // Clear state
+    capturedSelectionForPopover = null;
+    selectionPopoverPosition = null;
+    selectionPopoverExpanded = false;
+    announce('Comment added');
+}
+/**
+ * Handle the selection popover expanding to show the comment form.
+ * This keeps the popover visible even when the browser selection collapses.
+ */
+function handleSelectionPopoverExpand() {
+    selectionPopoverExpanded = true;
+}
+/**
+ * Handle the selection popover cancel action.
+ * Resets expanded state so new selections can be processed.
+ */
+function handleSelectionPopoverCancel() {
+    selectionPopoverExpanded = false;
+    // Keep position and captured selection so user can re-expand if they want
+}
+/**
+ * Close the selection popover.
+ */
+function handleSelectionPopoverClose() {
+    selectionPopoverPosition = null;
+    capturedSelectionForPopover = null;
+    selectionPopoverExpanded = false;
+}
+// =========================================================================
+// Thread Operations
+// =========================================================================
+/**
+ * Create a new thread at the current selection.
+ * Requires non-collapsed selection in edit or comment mode.
+ *
+ * Returns requestId for correlating with backend response, or null if creation failed.
+ *
+ * No-op (returns null) if:
+ * - No text is selected (collapsed selection)
+ * - Editor is in readonly mode
+ * - Editor view is not available
+ */
+export function createThread(body, authorId) {
+    if (!currentSelection || currentSelection.isCollapsed) {
+        devWarn('Cannot create thread: no text selected');
+        return null;
+    }
+    if (mode === 'readonly') {
+        devWarn('Cannot create thread: editor is readonly');
+        return null;
+    }
+    const view = editorRef?.getView();
+    if (!view) {
+        devWarn('Cannot create thread: editor view not available');
+        return null;
+    }
+    const { from, to } = currentSelection;
+    // Build anchor using shared helper
+    const anchor = bodyAnchorToDocumentAnchor(buildAnchorFromSelection(view, from, to), currentDocument.bodyOffset, value);
+    // Extract mentions from comment body
+    const mentions = extractMentions(body);
+    // Generate requestId for correlating optimistic updates
+    const requestId = generateId();
+    // Fire the create event (parent handles actual thread creation)
+    const event = {
+        requestId,
+        anchor,
+        body,
+        authorId,
+        mentions: mentions.length > 0 ? mentions : undefined,
+    };
+    onthreadcreate?.(event);
+    announce('Comment added');
+    return requestId;
+}
+/**
+ * Create a document-level comment thread.
+ *
+ * Document-level comments are not anchored to specific text but apply to
+ * the entire document. They appear at the top of the comment sidebar.
+ *
+ * Returns requestId for correlating with backend response, or null if creation failed.
+ */
+export function createDocumentThread(body, authorId) {
+    if (mode === 'readonly') {
+        devWarn('Cannot create thread: editor is readonly');
+        return null;
+    }
+    // Create document-level anchor
+    const anchor = createDocumentAnchor();
+    // Extract mentions from comment body
+    const mentions = extractMentions(body);
+    // Generate requestId for correlating optimistic updates
+    const requestId = generateId();
+    // Fire the create event (parent handles actual thread creation)
+    const event = {
+        requestId,
+        anchor,
+        body,
+        authorId,
+        mentions: mentions.length > 0 ? mentions : undefined,
+    };
+    onthreadcreate?.(event);
+    announce('Document comment added');
+    return requestId;
+}
+/**
+ * Delete a thread.
+ *
+ * Silently returns without emitting an event if:
+ * - Editor is in readonly mode (mode === 'readonly')
+ * - Thread does not exist
+ *
+ * This silent no-op behavior supports declarative UI patterns where callers
+ * don't need to pre-check conditions before calling mutation methods.
+ */
+export function deleteThread(threadId) {
+    if (mode === 'readonly')
+        return;
+    const thread = threads.find((t) => t.id === threadId);
+    if (!thread)
+        return;
+    onthreaddelete?.({ threadId });
+}
+/**
+ * Delete all threads (clear all comments).
+ *
+ * Silently does nothing if:
+ * - Editor is in readonly mode (mode === 'readonly')
+ * - No threads exist
+ *
+ * Fires onthreaddelete for each thread.
+ */
+export function clearAllThreads() {
+    if (mode === 'readonly')
+        return;
+    if (threads.length === 0)
+        return;
+    // Fire delete event for each thread
+    for (const thread of threads) {
+        onthreaddelete?.({ threadId: thread.id });
+    }
+    // Clear any active selection state
+    popoverThreadId = null;
+    popoverPosition = null;
+    activeThreadId = null;
+    announce('All comments cleared');
+}
+// =========================================================================
+// Comment Operations
+// =========================================================================
+/**
+ * Create a new comment in an existing thread.
+ *
+ * @returns requestId for correlating with backend response, or null if creation was blocked
+ *
+ * Silently returns null without emitting an event if:
+ * - Editor is in readonly mode (mode === 'readonly')
+ * - Thread does not exist
+ *
+ * This silent no-op behavior supports declarative UI patterns where callers
+ * don't need to pre-check conditions before calling mutation methods.
+ */
+export function createComment(threadId, body, authorId) {
+    if (mode === 'readonly')
+        return null;
+    const thread = threads.find((t) => t.id === threadId);
+    if (!thread)
+        return null;
+    const mentions = extractMentions(body);
+    const requestId = generateId();
+    oncommentcreate?.({
+        requestId,
+        threadId,
+        body,
+        authorId,
+        mentions: mentions.length > 0 ? mentions : undefined,
+    });
+    announce('Comment added');
+    return requestId;
+}
+/**
+ * Update an existing comment.
+ *
+ * Silently returns without emitting an event if:
+ * - Editor is in readonly mode (mode === 'readonly')
+ * - Thread or comment does not exist
+ * - Comment is soft-deleted
+ *
+ * This silent no-op behavior supports declarative UI patterns where callers
+ * don't need to pre-check conditions before calling mutation methods.
+ */
+export function updateComment(threadId, commentId, body) {
+    if (mode === 'readonly')
+        return;
+    const thread = threads.find((t) => t.id === threadId);
+    const comment = thread?.comments.find((c) => c.id === commentId);
+    if (!comment || comment.deletedAt)
+        return;
+    const mentions = extractMentions(body);
+    oncommentupdate?.({
+        threadId,
+        commentId,
+        body,
+        mentions: mentions.length > 0 ? mentions : undefined,
+    });
+}
+/**
+ * Delete a comment.
+ *
+ * Silently returns without emitting an event if:
+ * - Editor is in readonly mode (mode === 'readonly')
+ * - Thread or comment does not exist
+ * - Soft delete is requested but comment is already soft-deleted
+ *
+ * This silent no-op behavior supports declarative UI patterns where callers
+ * don't need to pre-check conditions before calling mutation methods.
+ *
+ * @param soft - If true (default), sets deletedAt for soft delete. If false, requests hard delete.
+ */
+export function deleteComment(threadId, commentId, soft = true) {
+    if (mode === 'readonly')
+        return;
+    const thread = threads.find((t) => t.id === threadId);
+    const comment = thread?.comments.find((c) => c.id === commentId);
+    if (!comment || (soft && comment.deletedAt))
+        return;
+    oncommentdelete?.({ threadId, commentId, soft });
+    announce('Comment deleted');
+}
+// =========================================================================
+// Block-Level Thread Creation
+// =========================================================================
+/**
+ * Create a thread anchored to the block containing the cursor.
+ * Works even with a collapsed selection (no text selected).
+ *
+ * Returns requestId for correlating with backend response, or null if creation failed.
+ *
+ * No-op (returns null) if:
+ * - Editor is in readonly mode
+ * - Editor view is not available
+ * - Cursor is not inside a block
+ */
+export function createBlockThread(body, authorId) {
+    if (mode === 'readonly') {
+        devWarn('Cannot create block thread: editor is readonly');
+        return null;
+    }
+    const view = editorRef?.getView();
+    if (!view) {
+        devWarn('Cannot create block thread: editor view not available');
+        return null;
+    }
+    const { from } = view.state.selection;
+    const resolvedPos = view.state.doc.resolve(from);
+    // Find the nearest block-level node
+    for (let depth = resolvedPos.depth; depth > 0; depth--) {
+        const node = resolvedPos.node(depth);
+        if (!node.isBlock)
+            continue;
+        // Get the block's inner positions (content bounds)
+        const blockFrom = resolvedPos.start(depth);
+        const blockTo = resolvedPos.end(depth);
+        // Build anchor for the entire block
+        const anchor = bodyAnchorToDocumentAnchor(buildAnchorFromSelection(view, blockFrom, blockTo), currentDocument.bodyOffset, value);
+        // Extract mentions and generate requestId
+        const mentions = extractMentions(body);
+        const requestId = generateId();
+        // Fire the create event
+        onthreadcreate?.({
+            requestId,
+            anchor,
+            body,
+            authorId,
+            mentions: mentions.length > 0 ? mentions : undefined,
+        });
+        return requestId;
+    }
+    devWarn('Cannot create block thread: cursor not inside a block');
+    return null;
+}
+// =========================================================================
+// Keyboard Navigation (F6 Landmark Navigation)
+// =========================================================================
+/**
+ * Focus regions for F6 navigation.
+ * The 'popover' region is conditionally included when a thread popover is open.
+ */
+const focusRegions = [
+    { id: 'editor', selector: '.review-editor-main', label: 'Editor' },
+    { id: 'popover', selector: '.thread-popover', label: 'Thread' },
+];
+/**
+ * Focus region navigator with conditional popover inclusion and custom editor focus.
+ */
+const focusNavigator = createFocusRegionNavigator(focusRegions, {
+    // Only include popover region when a thread popover is actually open
+    isRegionActive: (region) => {
+        if (region.id === 'popover') {
+            return popoverThread !== null;
+        }
+        return true;
+    },
+    // Custom focus handler for the editor region (ProseMirror needs special handling)
+    customFocusHandler: (region) => {
+        if (region.id === 'editor') {
+            editorRef?.getView()?.focus();
+            return true; // Handled
+        }
+        return false; // Use default behavior
+    },
+});
+/**
+ * Handle F6 keyboard navigation between regions.
+ * Uses event.currentTarget to scope navigation to this specific editor instance,
+ * supporting multiple ReviewEditor instances on the same page.
+ */
+function handleContainerKeyDown(event) {
+    if (event.key !== 'F6')
+        return;
+    // Use currentTarget (the element with the listener) to get this specific editor container
+    const container = event.currentTarget;
+    if (!(container instanceof HTMLElement))
+        return;
+    event.preventDefault();
+    const current = focusNavigator.getCurrentRegion(container);
+    const next = focusNavigator.getNextRegion(current, event.shiftKey);
+    focusNavigator.focusRegion(container, next);
+}
+</script>
+
+<!-- Export actions snippet for passing to controls -->
+{#snippet exportActionsSnippet()}
+  <ExportActions
+    id="{id}-export"
+    onexportcontent={handleExportContent}
+    onexportsummary={handleExportSummary}
+    onexportjson={handleExportJSON}
+    onexportdiff={handleExportDiff}
+    onexportcomments={handleExportComments}
+  />
+{/snippet}
+
+<!--
+  The a11y_no_static_element_interactions ignore is intentional:
+  F6 landmark navigation requires a container-level keydown listener to cycle
+  focus between editor/popover regions. The container itself is not
+  interactive; it only captures keyboard events for region-level focus management.
+-->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  bind:this={containerElement}
+  data-testid="review-editor"
+  class={classNames('review-editor-container', className)}
+  data-mode={mode}
+  data-view={activeView}
+  data-ready={editorViewReady && !pendingState ? true : undefined}
+  data-snapshot-mode={snapshotMode || undefined}
+  onkeydown={handleContainerKeyDown}
+>
+  <!-- Screen reader announcements (DEP-47) -->
+  <LiveRegion bind:this={liveRegionRef} />
+
+  <!-- Hidden form inputs for FormData participation -->
+  {#if name}
+    <input type="hidden" name={getFieldName('original')} value={formOriginal} />
+    <input type="hidden" name={getFieldName('current')} value={formCurrent} />
+    <input type="hidden" name={getFieldName('comments')} value={formComments} />
+    <input type="hidden" name={getFieldName('diff')} value={formDiff} />
+    <input type="hidden" name={getFieldName('summary')} value={formSummary} />
+  {/if}
+
+  <!-- Unified controls bar - consistent across all views -->
+  <ReviewEditorControls
+    id="{id}-controls"
+    {activeView}
+    {viewPanelIds}
+    onViewChange={(view) => {
+      // Clear selection popover state when leaving editor view
+      // Otherwise stale expanded state blocks new selections when returning
+      if (view !== 'editor') {
+        selectionPopoverPosition = null;
+        capturedSelectionForPopover = null;
+        selectionPopoverExpanded = false;
+      }
+      activeView = view;
+      announce(`Switched to ${view} view`);
+    }}
+    showDiffTabs={!!original}
+    {diffStats}
+    bind:diffViewMode
+    {hasContentChanges}
+    readonly={isReadonly}
+    onRevertAll={() => {
+      value = original;
+      onchange?.(original);
+      announce('All changes reverted');
+    }}
+    {commentCount}
+    {sidebarOpen}
+    onSidebarToggle={() => (sidebarOpen = !sidebarOpen)}
+    trailing={exportActionsSnippet}
+  />
+
+  <!-- Main content area -->
+  <div class="review-editor-main">
+    {#if activeView === 'editor'}
+      <!-- Editor view: formatting toolbar + editor content -->
+      <div
+        id={viewPanelIds.editor}
+        class="review-editor-view-panel"
+        role="tabpanel"
+        aria-label="Editor view"
+      >
+        {#if currentDocument.hasFrontMatter}
+          <FrontMatterFields
+            id={`${id}-front-matter`}
+            data={currentDocument.data}
+            raw={currentDocument.raw}
+            readonly={isReadonly}
+            onchange={handleFrontMatterChange}
+          />
+        {/if}
+        <MarkdownEditor
+          {id}
+          bind:this={editorRef}
+          value={editorValue}
+          mode="wysiwyg"
+          readonly={isReadonly}
+          {placeholder}
+          plugins={[anchorPlugin]}
+          {snapshotMode}
+          onchange={handleEditorBodyChange}
+          onready={() => {
+            if (!editorViewReady) {
+              editorViewReady = true;
+            }
+          }}
+          onselectionchange={handleSelectionChange}
+        />
+      </div>
+    {:else if activeView === 'diff'}
+      <!-- Diff view content -->
+      <div
+        id={viewPanelIds.diff}
+        class="review-editor-view-panel"
+        role="tabpanel"
+        aria-label="Diff view"
+      >
+        <DiffViewer {original} current={value} bind:viewMode={diffViewMode} readonly={isReadonly}>
+          {#snippet toolbar()}
+            <!-- Empty toolbar - controls are in the unified bar above -->
+          {/snippet}
+        </DiffViewer>
+      </div>
+    {:else}
+      <!-- Summary view (auto-generated, readonly preview) -->
+      <div
+        id={viewPanelIds.summary}
+        class="review-editor-view-panel"
+        role="tabpanel"
+        aria-label="Summary view"
+      >
+        {#if hasContentChanges || threads.length > 0}
+          <MarkdownEditor
+            id="{id}-summary"
+            value={summaryContent}
+            mode="wysiwyg"
+            readonly
+            showToolbar={false}
+            placeholder=""
+          />
+        {:else}
+          <div class="summary-view" role="region" aria-label="Review summary">
+            <div class="summary-empty">
+              <p>No changes or comments to summarize.</p>
+              <p class="summary-hint">Edit the document or add comments to generate a summary.</p>
+            </div>
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
+
+  <!-- Comment sidebar -->
+  {#if sidebarOpen}
+    <CommentSidebar
+      id="{id}-sidebar"
+      {threads}
+      {activeThreadId}
+      readonly={isReadonly}
+      onthreadselect={handleSidebarThreadSelect}
+      onclearall={clearAllThreads}
+      onadddocumentcomment={handleAddDocumentComment}
+    />
+  {/if}
+
+  <!-- Thread popover -->
+  {#if popoverThread && popoverPosition}
+    <ThreadPopover
+      id="{id}-thread-popover"
+      thread={popoverThread}
+      {currentUserId}
+      {mode}
+      position={popoverPosition}
+      onclose={handlePopoverClose}
+      ondelete={handlePopoverDelete}
+      oncommentcreate={handlePopoverCommentCreate}
+      oncommentupdate={handlePopoverCommentUpdate}
+      oncommentdelete={handlePopoverCommentDelete}
+    />
+  {/if}
+
+  <!-- Selection popover for quick comment creation -->
+  {#if showSelectionPopover}
+    <SelectionPopover
+      id="{id}-selection-popover"
+      position={selectionPopoverPosition}
+      open={showSelectionPopover}
+      oncommentsubmit={handleSelectionComment}
+      onexpand={handleSelectionPopoverExpand}
+      oncancel={handleSelectionPopoverCancel}
+      onclose={handleSelectionPopoverClose}
+    />
+  {/if}
+</div>
+
+<style>
+  /*
+   * Reset outer border/radius/overflow on the markdown-editor-wrapper when
+   * nested inside review-editor-main (.review-editor-main provides the outer shape).
+   *
+   * :global() is required because .markdown-editor-wrapper is rendered by
+   * MarkdownEditor (a child component) and would not match a scoped selector.
+   */
+  :global(.review-editor-container .review-editor-main .markdown-editor-wrapper) {
+    border: none;
+    border-radius: 0;
+    overflow: visible;
+  }
+
+  .review-editor-view-panel {
+    min-width: 0;
+  }
+
+  /*
+   * Snapshot mode: suppress the blinking caret and text selection highlights
+   * so visual regression screenshots are pixel-stable across runs.
+   * Scoped to [data-snapshot-mode] so normal editing is completely unaffected.
+   */
+  .review-editor-container[data-snapshot-mode],
+  .review-editor-container[data-snapshot-mode] * {
+    caret-color: transparent;
+    user-select: none;
+  }
+</style>